/* ==========================================================================
   PRISM GLASS: the light/dark theme layer and the interaction finish.
   13 Oct 2026. Loaded after styles.min.css + motion.css, paired with
   /assets/theme.js.

   THE THEME is a class on <html>: "dark" or "light". The same key and the
   same class names as the dashboard app (next-themes, localStorage "theme"),
   so a choice made on the website carries into the app and back. The class
   is set by a tiny inline script in every page's <head> before first paint,
   and the light tokens are ALSO inlined in the critical CSS, so a light-mode
   visitor never sees a dark flash while this file is on its way.

   Nearly everything in styles.css reads tokens, so most of the light theme is
   the token block. What follows it is only the handful of surfaces that
   carried their own dark colour.

   Every motion below stops under prefers-reduced-motion (block at the end).
   ========================================================================== */

/* ---------- Tokens that never change with the theme ---------------------- */
:root {
  --neon: #7DFF4D;        /* neon fills with dark text on top: always bright */
  --neon-2: #B7FF63;
  --violet-fill: #9D6FFF;
  --tint: 255,255,255;    /* the "ink" for translucent washes and hairlines */
}

/* ---------- Light: pearl glass ------------------------------------------- */
html.light {
  --void: #F5F3FB;
  --deep-purple: #EDE7FB;
  --surface: #FFFFFF;
  --surface-2: #F3F0FA;
  --primary: #6D28D9;
  --primary-light: #7C3AED;
  --primary-deep: #5B21B6;
  --accent: #237A0B;      /* 4.95:1 on --void, AA for small text */
  --glow: #2A800F;
  --success: #15803D;
  --danger: #BE123C;
  --warning: #B45309;
  --info: #0E7490;
  --text: #14102A;
  --text-secondary: #4A4766;
  --text-tertiary: #5E5A78;
  --tint: 20,14,48;
  --border: rgba(20,14,48,.09);
  --border-strong: rgba(20,14,48,.16);
  --glass-bg: rgba(255,255,255,.58);
  --glass-bg-strong: rgba(255,255,255,.76);
  --shadow-card: 0 1px 2px rgba(40,20,90,.05), 0 12px 32px rgba(40,20,90,.08);
  --shadow-elevated: 0 24px 60px rgba(40,20,90,.16), 0 2px 6px rgba(40,20,90,.06);
  --glow-primary: 0 0 0 1px rgba(124,58,237,.28), 0 8px 26px rgba(124,58,237,.26);
  --glow-accent: 0 0 0 1px rgba(35,122,11,.22), 0 8px 22px rgba(125,255,77,.3);
  color-scheme: light;
}

html.light body {
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(157,111,255,.20), transparent 60%),
    radial-gradient(900px 600px at 100% 10%, rgba(125,255,77,.16), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(56,189,248,.10), transparent 60%),
    var(--void);
  background-attachment: fixed;
}
html.light .grid-overlay {
  background-image:
    linear-gradient(rgba(76,29,149,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,29,149,.06) 1px, transparent 1px);
}
html.light .blob { opacity: .22; }
html.light .blob-green { background: radial-gradient(circle, var(--neon) 0%, transparent 70%); opacity: .2; }
html.light .cursor-glow { background: radial-gradient(circle, rgba(124,58,237,.12), rgba(125,255,77,.08) 45%, transparent 70%); }

/* Frosted white glass: brighter rim, white inner highlight, violet shadow. */
html.light .glass {
  border-color: rgba(255,255,255,.85);
  box-shadow:
    0 0 0 1px rgba(20,14,48,.06),
    0 1px 2px rgba(40,20,90,.05),
    0 14px 36px rgba(60,30,130,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
html.light .glass.spot {
  background-image:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124,58,237,.10), transparent 45%),
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(125,255,77,.14), transparent 60%);
}

/* The R10 mark: white R on dark, black R on light. Two images in the markup,
   one shown per theme (the light one is only fetched in light mode). */
span img.mark-light { display: none; }
html.light span img.mark-light { display: block; }
html.light span img.mark-dark { display: none; }
.brand-mark img, .byline-mark img { width: 100%; height: 100%; object-fit: contain; }
html.light .brand-badge { background: rgba(125,255,77,.28); }
html.light .eyebrow { color: #5B21B6; background: rgba(124,58,237,.10); border-color: rgba(124,58,237,.28); }
html.light .eyebrow-muted { color: var(--accent); background: var(--glass-bg); border-color: var(--border); }

/* The agents' signature colours, deepened so labels and ticks read on white.
   Avatar rings keep their glow; only the ink changes. */
html.light .agent-adriana { --a1: #1F7A0A; --a-rgb: 31, 122, 10; }
html.light .agent-luis    { --a1: #475569; --a2: #0F9F5A; --a-rgb: 71, 85, 105; }
html.light .agent-chloe   { --a1: #0369A1; --a2: #38BDF8; --a-rgb: 3, 105, 161; }

/* Surfaces that stay dark in both themes (the intro film sits on video):
   they keep the dark tokens so their text stays white. */
html.light .intro-curtain, html.light .team-banner, html.light .cast-media {
  --void: #06060A; --surface: #121218; --text: #FFFFFF; --text-secondary: #A3A3B2; --text-tertiary: #828299;
  --tint: 255,255,255; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16);
  --glass-bg: rgba(255,255,255,.035); --glass-bg-strong: rgba(255,255,255,.06); --accent: #7DFF4D; --glow: #B7FF63;
}

/* Small tinted labels need darker ink than body accents to hold 4.5:1. */
html.light .mock-pill.pill-success { color: #166534; }
html.light .flow-top { color: var(--primary); }

/* Surfaces that carried their own dark colour. */
html.light .section-alt { background: linear-gradient(180deg, transparent, rgba(124,58,237,.055) 15%, rgba(125,255,77,.04) 60%, rgba(124,58,237,.05) 85%, transparent); }
html.light .cmdk-backdrop { background: rgba(245,243,251,.6); }
html.light .cmdk-panel,
html.light .cmdk-dialog { background: rgba(255,255,255,.92); }
html.light .access-overlay { background: radial-gradient(120% 90% at 50% 0%, rgba(237,231,251,.97), rgba(245,243,251,.99)); }
html.light .mobile-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-elevated); }
html.light .tw-caret { box-shadow: 0 0 10px rgba(35,122,11,.45); }
html.light .section-head h2::after { box-shadow: 0 0 14px rgba(124,58,237,.3); }
html.light ::selection { background: #7C3AED; color: #fff; }
html.light img[src$=".svg"].invert-light { filter: invert(1); }

/* ==========================================================================
   THE TOGGLE: a glass capsule with a planet that orbits from moon to sun.
   ========================================================================== */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 3.6rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .35s ease, box-shadow .45s var(--ease-spring), transform .35s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  border-color: rgba(157,111,255,.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12), 0 6px 24px rgba(124,58,237,.35);
  transform: translateY(-1px);
}
.theme-toggle:active { transform: scale(.95); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sky behind the planet: night violet, or day dawn. */
.tt-sky {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at 80% 50%, rgba(124,58,237,.42), rgba(26,16,61,.15) 70%);
  transition: opacity .5s ease;
}
.tt-sky--day {
  background: radial-gradient(120% 140% at 20% 50%, rgba(255,196,77,.55), rgba(255,236,190,.25) 60%, rgba(125,255,77,.12));
  opacity: 0;
}
html.light .tt-sky--night { opacity: 0; }
html.light .tt-sky--day { opacity: 1; }

/* Stars twinkle at night; they drift out at dawn. */
.tt-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px #fff;
  animation: tt-twinkle 2.6s ease-in-out infinite;
  transition: transform .6s var(--ease-spring), opacity .4s ease;
}
.tt-stars i:nth-child(1) { left: 22%; top: 30%; }
.tt-stars i:nth-child(2) { left: 34%; top: 62%; animation-delay: .7s; width: 1.5px; height: 1.5px; }
.tt-stars i:nth-child(3) { left: 14%; top: 58%; animation-delay: 1.3s; }
@keyframes tt-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
html.light .tt-stars i { opacity: 0; transform: translateY(8px); }

/* The planet. In dark it sits right as a crescent moon; in light it rolls
   left and becomes the sun. */
.tt-knob {
  position: absolute; top: 50%; left: calc(100% - 1.75rem);
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  transform: translateY(-50%) rotate(0deg);
  background: radial-gradient(circle at 35% 30%, #fff, #E6E0FF 55%, #B9A6FF);
  box-shadow: 0 0 10px rgba(185,166,255,.8), 0 0 22px rgba(124,58,237,.6);
  transition: left .6s var(--ease-spring), transform .7s var(--ease-spring), background .5s ease, box-shadow .5s ease;
}
/* The crescent: a shadow disc that slides off when the sun comes up. */
.tt-knob::after {
  content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  top: -.15rem; right: -.25rem;
  background: rgba(32,20,74,.92);
  transition: transform .6s var(--ease-spring), opacity .4s ease;
}
/* Sun rays. */
.tt-knob::before {
  content: ""; position: absolute; inset: -.32rem; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,184,77,.95) 0 8deg, transparent 8deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
          mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
  opacity: 0; transform: scale(.4) rotate(-90deg);
  transition: opacity .45s ease, transform .7s var(--ease-spring);
}
html.light .tt-knob {
  left: .25rem;
  transform: translateY(-50%) rotate(180deg);
  background: radial-gradient(circle at 35% 30%, #FFF7D6, #FFD15C 55%, #FFA51F);
  box-shadow: 0 0 12px rgba(255,190,60,.9), 0 0 26px rgba(255,165,31,.55);
}
html.light .tt-knob::after { transform: translate(.9rem,-.6rem) scale(.2); opacity: 0; }
html.light .tt-knob::before { opacity: 1; transform: scale(1) rotate(0deg); animation: tt-spin 12s linear infinite; }
@keyframes tt-spin { to { transform: scale(1) rotate(360deg); } }

/* Theme change: a circle of the new theme grows out of the toggle
   (View Transitions; theme.js sets the origin). Browsers without it simply
   switch, which is fine. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* While the theme swaps without a view transition, colour transitions would
   make every surface fade at its own speed. One frame of no transitions. */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* ==========================================================================
   PRISM RING: a band of light that flows around a glass card's edge while
   the cursor is on it. Masked to the 1px border so the card body stays clear.
   ========================================================================== */
@property --prism-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.prism-rel { position: relative; }
.prism::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--prism-ang),
    transparent 0deg, rgba(157,111,255,.95) 50deg, rgba(125,255,77,.9) 110deg,
    rgba(56,189,248,.8) 160deg, transparent 220deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  animation: prism-spin 3.6s linear infinite paused;
}
.prism:hover::after { opacity: 1; animation-play-state: running; }
@keyframes prism-spin { to { --prism-ang: 360deg; } }

/* Lift + deeper glow under the cursor. */
.prism { transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring), border-color .35s ease; }
.prism:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(157,111,255,.25), 0 18px 50px -10px rgba(124,58,237,.35);
}
/* Big surfaces keep the ring but don't float: a whole table lifting is noise. */
.table-wrap.prism:hover, .mock-window.prism:hover, .panel-mock.prism:hover, .faq-item.prism:hover { transform: none; }
html.light .prism:hover {
  box-shadow: 0 0 0 1px rgba(124,58,237,.14), 0 22px 50px -12px rgba(76,29,149,.28), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ==========================================================================
   BUTTONS: magnetic (theme.js, via the independent `translate` property so
   it never fights a hover transform), a glow burst where you click, a light
   that flows along the primary button, and an arrow that leans forward.
   ========================================================================== */
.btn { transition: transform .35s var(--ease-spring), translate .45s var(--ease-spring), box-shadow .35s var(--ease-spring), background-color .25s ease, border-color .25s ease, color .25s ease; }

.btn-primary {
  background: linear-gradient(120deg, var(--primary-light), var(--primary) 45%, #5B21B6 60%, var(--primary-light));
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: background-position .9s var(--ease-out), transform .35s var(--ease-spring), translate .45s var(--ease-spring), box-shadow .35s var(--ease-spring);
}
.btn-primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 0 0 1px rgba(157,111,255,.6), 0 12px 44px rgba(124,58,237,.55), 0 0 26px rgba(125,255,77,.22);
}
.btn-glass:hover, .btn-ghost:hover {
  box-shadow: 0 0 0 1px rgba(157,111,255,.35), 0 10px 30px rgba(124,58,237,.22);
}
.btn-ghost:hover { background: var(--glass-bg); }
html.light .btn-glass:hover { background: rgba(255,255,255,.92); border-color: rgba(124,58,237,.35); }

.btn svg, .btn .ic { transition: transform .4s var(--ease-spring); }
.btn:hover svg:last-child, .btn:hover .ic:last-child { transform: translateX(3px); }
.btn:only-child svg:only-child { transform: none; }

.btn-burst {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  pointer-events: none; transform: translate(-50%,-50%) scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(183,255,99,.45) 40%, transparent 70%);
  animation: btn-burst .65s var(--ease-out) forwards;
}
@keyframes btn-burst { to { transform: translate(-50%,-50%) scale(18); opacity: 0; } }

/* ==========================================================================
   NAV: a liquid glass pill slides under whichever link the cursor is on.
   ========================================================================== */
.main-nav { position: relative; }
.main-nav a { position: relative; z-index: 1; padding: .35rem .1rem; }
.nav-pill {
  position: absolute; top: 50%; left: 0; height: 2.1rem; z-index: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(157,111,255,.20), rgba(125,255,77,.10));
  border: 1px solid rgba(157,111,255,.35);
  box-shadow: 0 0 18px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: left .45s var(--ease-spring), width .45s var(--ease-spring), opacity .3s ease;
}
.main-nav.has-pill .nav-pill { opacity: 1; }
.main-nav.has-pill a:hover { color: var(--text); }
html.light .nav-pill { background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(125,255,77,.16)); }

.cmdk-trigger, .icon-btn { transition: color .2s ease, border-color .25s ease, box-shadow .35s var(--ease-spring), background-color .2s ease; }
.cmdk-trigger:hover, .icon-btn:hover { border-color: rgba(157,111,255,.45); box-shadow: 0 0 0 3px rgba(124,58,237,.10), 0 6px 20px rgba(124,58,237,.22); }

/* The header glass catches more light once the page scrolls under it. */
.header-inner { transition: box-shadow .4s ease, background-color .4s ease, border-color .4s ease; }
.site-header.is-scrolled .header-inner { box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(157,111,255,.14); }

/* Brand: the 10X badge shimmers when the logo is hovered. */
.brand-mark { transition: transform .6s var(--ease-spring), box-shadow .4s ease; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 18px rgba(124,58,237,.55); }
.brand-badge { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position .9s var(--ease-out); }
.brand:hover .brand-badge { background-position: -60% 0; }

/* ==========================================================================
   FOOTER: social buttons glow in their own colours; the RapidShips link
   draws its underline in.
   ========================================================================== */
.footer-social a { transition: transform .45s var(--ease-spring), box-shadow .4s ease, color .3s ease, border-color .3s ease, background-color .3s ease; }
.footer-social a:hover { transform: translateY(-3px) rotate(-6deg); }
.footer-social a[href*="linkedin"]:hover { color: #fff; background: #0A66C2; border-color: #0A66C2; box-shadow: 0 10px 28px rgba(10,102,194,.5); }
.footer-social a[href*="x.com"]:hover { color: var(--void); background: var(--text); border-color: var(--text); box-shadow: 0 10px 28px rgba(var(--tint),.25); }
.footer-social a[href*="instagram"]:hover { color: #fff; background: linear-gradient(45deg, #FEDA75, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5); border-color: transparent; box-shadow: 0 10px 28px rgba(214,41,118,.45); }

.built-by {
  color: var(--text);
  font-weight: 600;
  background-image: linear-gradient(90deg, var(--accent), var(--primary-light));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .45s var(--ease-out), color .2s ease, text-shadow .3s ease;
}
.built-by:hover { color: var(--accent); background-size: 100% 2px; text-shadow: 0 0 14px rgba(125,255,77,.35); }
.footer-bottom .built-by { font-weight: 500; color: inherit; background-size: 0 1px; }
.footer-bottom .built-by:hover { color: var(--text); background-size: 100% 1px; }
.footer-col a { transition: color .2s ease, transform .35s var(--ease-spring); display: inline-block; }
.footer-col a:hover { color: var(--text); transform: translateX(3px); }

/* ==========================================================================
   PLAYBOOK DROPDOWN: a glass mega-menu under the header's Playbook link.
   Opens on hover or keyboard focus (desktop), or on the chevron button
   (click/tap, theme.js). The Playbook link itself still goes to /insights/.
   ========================================================================== */
.nav-dd { position: relative; display: inline-flex; align-items: center; gap: .1rem; }
.main-nav .nav-dd-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-tertiary); cursor: pointer; transition: color .2s ease, transform .35s var(--ease-spring), background-color .2s ease; position: relative; z-index: 1; }
.nav-dd-btn:hover, .nav-dd.is-open .nav-dd-btn { color: var(--text); background: var(--glass-bg-strong); }
.nav-dd.is-open .nav-dd-btn, .nav-dd:hover .nav-dd-btn { transform: rotate(180deg); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-dd-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; z-index: 80;
  width: min(640px, calc(100vw - 2rem));
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem 1.2rem;
  padding: 1.1rem; border-radius: 22px;
  background: rgba(18,18,24,.97); border: 1px solid var(--border-strong);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(157,111,255,.12), 0 30px 80px -20px rgba(124,58,237,.45);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98); transform-origin: top center;
  transition: opacity .22s ease, transform .35s var(--ease-spring), visibility 0s linear .22s;
}
html.light .nav-dd-panel { background: rgba(255,255,255,.98); box-shadow: 0 0 0 1px rgba(20,14,48,.06), 0 30px 70px -18px rgba(76,29,149,.3); }
/* hover bridge so the cursor can travel from the link to the panel */
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .nav-dd:hover .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s, 0s, 0s; }
}
.nav-dd.is-open .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s, 0s, 0s; }
.nav-dd.is-closed .nav-dd-panel { opacity: 0 !important; visibility: hidden !important; }
.dd-h { margin: 0 0 .45rem .4rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.main-nav .dd-topic { display: flex; gap: .7rem; align-items: center; padding: .55rem .6rem; border-radius: 14px; color: var(--text); transition: background-color .2s ease, transform .3s var(--ease-spring); }
.main-nav .dd-topic:hover { background: var(--glass-bg-strong); transform: translateX(3px); }
.dd-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: rgb(var(--pc)); background: rgba(var(--pc), .14); border: 1px solid rgba(var(--pc), .28); }
.dd-txt { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.dd-txt strong { font-size: .9rem; font-weight: 600; }
.dd-txt span { font-size: .78rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-side { display: flex; flex-direction: column; gap: .15rem; padding-left: 1.1rem; border-left: 1px solid var(--border); }
.main-nav .dd-tool { padding: .4rem .5rem; border-radius: 10px; font-size: .86rem; color: var(--text-secondary); transition: color .2s ease, background-color .2s ease; }
.main-nav .dd-tool:hover { color: var(--text); background: var(--glass-bg-strong); }
.main-nav .dd-all { color: var(--accent); font-weight: 600; }
.main-nav .dd-feature { margin-top: .6rem; display: flex; flex-direction: column; gap: .25rem; padding: .8rem .85rem; border-radius: 14px; background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(125,255,77,.08)); border: 1px solid rgba(157,111,255,.3); transition: transform .35s var(--ease-spring), box-shadow .35s ease; }
.main-nav .dd-feature:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(124,58,237,.5); }
.dd-feature strong { font-size: .88rem; color: var(--text); }
.dd-feature span:last-child { font-size: .76rem; color: var(--text-secondary); line-height: 1.4; }
.dd-live { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dd-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: dd-pulse 1.8s ease-in-out infinite; }
@keyframes dd-pulse { 50% { opacity: .35; } }
.main-nav .dd-foot { grid-column: 1 / -1; display: block; text-align: center; padding: .6rem; border-radius: 12px; font-size: .84rem; font-weight: 600; color: var(--text); background: var(--glass-bg); border: 1px solid var(--border); transition: border-color .2s ease, background-color .2s ease; }
.main-nav .dd-foot:hover { border-color: rgba(157,111,255,.5); background: var(--glass-bg-strong); }

/* Topic colours, shared by the dropdown and the Playbook pages. */
.dd-t-costs, .pc-costs { --pc: 125,255,77; }
.dd-t-sales, .pc-sales { --pc: 157,111,255; }
.dd-t-operations, .pc-operations { --pc: 255,184,77; }
.dd-t-ai, .pc-ai { --pc: 56,189,248; }
.dd-t-research, .pc-research { --pc: 255,110,170; }
html.light .dd-t-costs, html.light .pc-costs { --pc: 35,122,11; }
html.light .dd-t-sales, html.light .pc-sales { --pc: 109,40,217; }
html.light .dd-t-operations, html.light .pc-operations { --pc: 180,83,9; }
html.light .dd-t-ai, html.light .pc-ai { --pc: 3,105,161; }
html.light .dd-t-research, html.light .pc-research { --pc: 190,24,93; }

/* Header fits on one line at laptop widths now that Playbook has a chevron. */
.main-nav a, .brand-word, .header-actions .btn { white-space: nowrap; }
@media (max-width: 1360px) { .main-nav { gap: 1.25rem; } }
@media (max-width: 1180px) { .main-nav { gap: .95rem; } .main-nav a { font-size: .84rem; } .cmdk-trigger span, .cmdk-trigger kbd { display: none; } }
@media (max-width: 1000px) { .main-nav { display: none; } .nav-toggle { display: inline-flex; } }
@media (max-width: 1100px) and (min-width: 901px) { .main-nav { gap: .75rem; } .header-actions { gap: .4rem; } .header-actions .header-cta { padding: .65rem 1rem; } .header-signin { padding-left: .6rem; padding-right: .6rem; } }

/* Mobile menu: the topics sit indented under Playbook. */
.mobile-nav a.btn-primary { color: #fff; border-bottom: 0; }
.mobile-sub { display: flex; flex-direction: column; padding: .1rem 0 .4rem .9rem; border-bottom: 1px solid var(--border); }
.mobile-nav .mobile-sub a { padding: .45rem 0; font-size: .9rem; border-bottom: 0; color: var(--text-tertiary); }
.mobile-nav .mobile-sub a::before { content: "\2014\00a0"; color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) { .nav-dd-panel, .nav-dd-btn, .dd-topic { transition: none; } .dd-live::before { animation: none; } }

/* ==========================================================================
   ASK AI: one click opens an assistant with a question about Rapid Ai 10x
   already asked, pointed at llms.txt. Original glass buttons; each lights up
   in its own hue on hover.
   ========================================================================== */
.footer-ask-ai { margin-top: 1.4rem; }
.footer-ask-ai-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 .6rem; }
.ask-ai-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.ask-ai-btn {
  --h: 157,111,255;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem .38rem .38rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-secondary);
  border: 1px solid var(--border-strong); background: var(--glass-bg);
  transition: color .25s ease, border-color .3s ease, box-shadow .4s var(--ease-spring), transform .4s var(--ease-spring), background-color .3s ease;
}
.ask-ai-ic {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--h), .16); color: rgb(var(--h));
  transition: background-color .3s ease, transform .6s var(--ease-spring);
}
.ask-ai-ic svg { width: 15px; height: 15px; fill: currentColor; }
.ask-ai-btn:hover, .ask-ai-btn:focus-visible {
  color: var(--text); border-color: rgba(var(--h), .6); transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(var(--h), .12), 0 10px 26px rgba(var(--h), .32);
}
.ask-ai-btn:hover .ask-ai-ic { background: rgb(var(--h)); color: #fff; transform: rotate(72deg) scale(1.08); }
.ask-ai-btn:focus-visible { outline: 2px solid rgb(var(--h)); outline-offset: 2px; }
.ask-ai--chatgpt    { --h: 16,163,127; }
.ask-ai--perplexity { --h: 32,178,170; }
.ask-ai--claude     { --h: 217,119,87; }
.ask-ai--google     { --h: 99,128,255; }
.ask-ai--grok       { --h: 150,150,170; }
html.light .ask-ai--grok { --h: 60,60,80; }
@media (prefers-reduced-motion: reduce) { .ask-ai-btn, .ask-ai-ic { transition: none; } .ask-ai-btn:hover { transform: none; } .ask-ai-btn:hover .ask-ai-ic { transform: none; } }

/* ==========================================================================
   FOOTER v2 (14 Oct 2026): Ask AI bar on top, brand + four link columns,
   one-line bottom bar. Tighter than before: roughly half the dead space.
   ========================================================================== */
.site-footer { padding: 2.2rem 0 1.4rem; }
.footer-ask { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; flex-wrap: wrap;
  padding: 1rem 1.1rem 1rem 1.4rem; border-radius: 20px; margin-bottom: 2.2rem;
  background: linear-gradient(120deg, rgba(124,58,237,.14), rgba(125,255,77,.05) 60%, rgba(56,189,248,.08)) !important; border-color: rgba(157,111,255,.28) !important; }
.footer-ask-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 220px; }
.footer-ask-kicker { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.footer-ask-copy p { margin: 0; font-size: .92rem; color: var(--text); font-weight: 500; }
.footer-ask .ask-ai-row { gap: .4rem; }
.footer-ask .ask-ai-btn { padding: .3rem .75rem .3rem .3rem; font-size: .82rem; background: var(--glass-bg-strong); }
.footer-ask .ask-ai-ic { width: 26px; height: 26px; font: 800 .68rem/1 var(--font-body); letter-spacing: -.02em; color: #fff; background: rgb(var(--h)); box-shadow: 0 0 0 2px rgba(var(--h), .25), 0 4px 12px rgba(var(--h), .45); }
.footer-ask .ask-ai-btn:hover .ask-ai-ic { transform: scale(1.12) rotate(-6deg); background: rgb(var(--h)); }
.ask-ai--grok { --h: 60,60,72; }
html.light .ask-ai--grok { --h: 20,20,28; }
.ask-ai--google { --h: 78,108,240; }

.footer-main { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(130px, 1fr)); gap: 1.5rem 2rem; padding-bottom: 1.8rem; }
.footer-main .footer-brand p { margin-top: .7rem; max-width: 22rem; font-size: .86rem; }
.footer-meta-row { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.footer-meta-row .footer-live { margin-top: 0; }
.footer-meta-row .footer-social { margin-top: 0; }
.footer-meta-row .footer-social a { width: 32px; height: 32px; }
.footer-main .footer-col { gap: .5rem; }
.footer-main .footer-col .footer-col-title { margin-bottom: .15rem; font-size: .7rem; letter-spacing: .1em; }
.footer-main .footer-col a { font-size: .86rem; }
.site-footer .footer-bottom { align-items: center; padding-top: 1.1rem; gap: .6rem 1.5rem; font-size: .74rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.footer-legal a { color: var(--text-tertiary); transition: color .2s ease; }
.footer-legal a:hover { color: var(--text); }
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr 1fr; } .footer-main .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main .footer-col:last-child { grid-column: 1 / -1; }
  .footer-ask { padding: 1rem; }
  .footer-ask .ask-ai-row { width: 100%; }
}

/* ==========================================================================
   Phones: everything fits in the header, the toggle shrinks a touch.
   ========================================================================== */
@media (max-width: 480px) {
  .brand-word { white-space: nowrap; }
  .header-actions { gap: .4rem; }
  .header-inner { padding: 0 .85rem; gap: .5rem; }
  .theme-toggle { width: 3.2rem; height: 1.95rem; }
  .tt-knob { width: 1.35rem; height: 1.35rem; left: calc(100% - 1.6rem); }
  html.light .tt-knob { left: .22rem; }
}

/* ==========================================================================
   Reduced motion: the theme still switches, nothing moves to get there.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tt-stars i, html.light .tt-knob::before, .prism::after { animation: none !important; }
  .tt-knob, .tt-knob::before, .tt-knob::after, .nav-pill, .prism, .btn, .footer-social a, .brand-mark { transition: none !important; }
  .prism:hover, .footer-social a:hover, .brand:hover .brand-mark { transform: none; }
  .btn-burst { display: none; }
}