/* ============================================================
   PRISMO — Design system (v2)
   One accent (the prism spectrum), near-black on white,
   1.25 type ratio, 4px grid, dark mode day one,
   reduced-motion safe, grain + ambient light for depth.
   v2: floating glass nav, press physics, cursor spotlight,
   custom easing, typographic polish, 404.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Spectrum = the prism. One accent, used sparingly. (v4: diagonal ramp sampled from the new logo PNG, 2026-08-26) */
  --spectrum: linear-gradient(118deg, #07CFA2 0%, #1E86FF 38%, #3252D7 66%, #7035F9 100%);
  --spectrum-text: linear-gradient(118deg, #0C8F7A 0%, #1E86FF 40%, #3252D7 68%, #7035F9 100%); /* light: first stop darkened — teal-on-white fails contrast */
  --teal: #07CFA2;
  --azure: #1E86FF;
  --indigo: #3252D7;
  --violet: #7035F9;

  /* Accessible text accent (derived from the azure/indigo band; passes 4.5:1 on light + dark) */
  --accent: #1a5fd0;
  --accent-hover: #1754c4;

  /* Light (default) */
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --ink: #0e1116;      /* near-black, never pure #000 */
  --ink-2: #2a3140;
  --muted: #475063;     /* AA body text on white (audit v2: extra headroom for .78rem mono) */
  --faint: #556076;     /* labels/legends — one step darker than audit v1 */
  --ink-3: #3a4454;     /* small mono labels on white (was --faint, 4.5:1 → 8.6:1) */
  --border: #e6e8ee;
  --border-2: #d6dae2;
  --shadow-sm: 0 1px 2px rgba(16, 20, 30, .05), 0 2px 6px rgba(16, 20, 30, .04);
  --shadow-md: 0 6px 24px -8px rgba(16, 20, 30, .14), 0 2px 8px rgba(16, 20, 30, .05);
  --shadow-lg: 0 24px 60px -20px rgba(16, 20, 30, .22);
  --ring: rgba(24, 137, 210, .45);
  --nav-bg: rgba(255, 255, 255, .72);
  --nav-bg-solid: rgba(255, 255, 255, .88);
  --nav-rest-bg: rgba(255, 255, 255, .55);
  --nav-rest-border: rgba(14, 17, 22, .07);
  --nav-scroll-border: rgba(14, 17, 22, .14);
  --nav-rest-shadow: 0 1px 2px rgba(16, 20, 30, .04), 0 10px 30px -18px rgba(16, 20, 30, .10);
  --nav-scroll-shadow: 0 12px 40px -16px rgba(16, 20, 30, .25), 0 2px 8px rgba(16, 20, 30, .06), inset 0 1px 0 rgba(255, 255, 255, .7);
  --grain-opacity: .016;
  --frame-halo: 0 30px 100px -24px rgba(30, 134, 255, .3), 0 16px 60px -24px rgba(112, 53, 249, .22);
  --demo-shadow: 0 30px 70px -18px rgba(16, 20, 30, .32), 0 10px 28px -10px rgba(16, 20, 30, .16);
  --hero-glow: radial-gradient(72% 40% at 50% 76%, rgba(30, 134, 255, .09), transparent 72%),
               radial-gradient(42% 34% at 50% 18%, rgba(7, 207, 162, .05), transparent 70%);
  /* Blueprint grid line — mixes against whatever --ink the active theme sets,
     so one definition serves light and dark. (v3, finout-inspired) */
  --grid-line: color-mix(in srgb, var(--ink) 9%, transparent);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Type — 1.25 (major third) from 17px base */
  --fs-1: 1rem;          /* 17 */
  --fs-2: 1.25rem;       /* 21.25 */
  --fs-3: 1.5625rem;     /* 26.5 */
  --fs-4: 1.9531rem;     /* 33 */
  --fs-5: 2.4414rem;     /* 41.3 */
  --fs-6: 3.0518rem;     /* 51.6 */

  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.25rem, 1.1rem + .6vw, 1.5625rem);
  --step-2: clamp(1.5625rem, 1.2rem + 1.4vw, 2.4414rem);
  --step-3: clamp(1.9531rem, 1.2rem + 3vw, 3.4rem);
  --step-4: clamp(2.4rem, 1.1rem + 6vw, 4.6rem);

  --font-display: "Quicksand", system-ui, sans-serif;
  --font-body: "Quicksand", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --measure: 62ch;
  --container: 74.5rem;      /* = former nav width (72rem + 2.5rem). One canonical
        content width: nav pill, hero demo frame, and every .container all read this,
        so their edges line up. See .nav__inner / .hero__demo. */
  --container-narrow: 52rem; /* prose measure (About) — kept a touch under full width for line length */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --nav-h: 68px;
  --brand-ink: #0A1A3C; /* logo wordmark navy (sampled from logo PNG) */
  /* Footer watermark (light theme): clearly visible cool-gray ghost on white */
  --wm: #8b96ac;
  --wm-sheen: #8b96ac;
  /* "Glass" texture: top-lit, base sinks into the page (clipped to letterforms) */
  --wm-grad: linear-gradient(180deg, color-mix(in srgb, var(--wm) 28%, #ffffff) 0%, var(--wm) 42%, color-mix(in srgb, var(--wm) 72%, #0b0e13) 100%);

  /* Motion — custom curves, never default ease */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Cinematic curve — slow, heavy ease-out (reference-grade reveal motion) */
  --ease-cine: cubic-bezier(0.12, 0.23, 0.17, 0.99);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-cine: 1.5s;    /* hero intro elements */
  --dur-cine-2: 0.9s;  /* scroll reveals */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c10;
    --bg-soft: #0e1117;
    --surface: #12151c;
    --surface-2: #171b24;
    --ink: #f3f5f8;
    --ink-2: #c9d0dc;
    --ink-3: #dfe4ec;
    --muted: #9da7b8;
    --faint: #8d97ab;
    --border: #222834;
    --border-2: #2d3443;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 30px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.7);
    --ring: rgba(60,160,235,.5);
    --nav-bg: rgba(10,12,16,.66);
    --nav-bg-solid: rgba(21, 26, 36, .86);
    --nav-rest-bg: rgba(18, 22, 30, .5);
    --nav-rest-border: rgba(255, 255, 255, .1);
    --nav-scroll-border: rgba(255, 255, 255, .17);
    --nav-rest-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.5);
    --nav-scroll-shadow: 0 14px 44px -14px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255, 255, 255, .12);
    --grain-opacity: .06;
    --frame-halo: 0 34px 120px -22px rgba(30, 134, 255, .4), 0 20px 80px -22px rgba(112, 53, 249, .3), 0 8px 40px -12px rgba(7, 207, 162, .16);
    --demo-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7);
    --spectrum-text: linear-gradient(118deg, #10d9ae 0%, #3b95ff 40%, #5b74f2 68%, #9366fa 100%);
    --hero-glow: radial-gradient(78% 48% at 50% 80%, rgba(30, 134, 255, .2), transparent 66%),
                 radial-gradient(40% 32% at 50% 10%, rgba(7, 207, 162, .09), transparent 70%);
    --accent: #6f92ff;
    --accent-hover: #93b0ff;
    --brand-ink: #f3f5f8;
    /* Footer watermark (auto dark): faint cool light — subtle but readable on #0a0c10 */
    --wm: #262d3b;
    --wm-sheen: #5b6a86;
    /* "Glass" texture: top-lit, base sinks into the page (clipped to letterforms) */
    --wm-grad: linear-gradient(180deg, color-mix(in srgb, var(--wm) 55%, #ffffff) 0%, var(--wm) 42%, color-mix(in srgb, var(--wm) 50%, #000000) 100%);
  }
}
:root[data-theme="dark"] {
  --spectrum-text: var(--spectrum);
  --demo-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7);
  --spectrum-text: linear-gradient(118deg, #10d9ae 0%, #3b95ff 40%, #5b74f2 68%, #9366fa 100%);
  --bg: #0a0c10;
  --bg-soft: #0e1117;
  --surface: #12151c;
  --surface-2: #171b24;
  --frame-halo: 0 34px 120px -22px rgba(43, 70, 224, .4), 0 20px 80px -22px rgba(122, 43, 226, .3), 0 8px 40px -12px rgba(14, 196, 141, .16);
  --ink: #f3f5f8;
  --ink-2: #c9d0dc;
  --ink-3: #dfe4ec;
  --muted: #9da7b8;
  --faint: #8d97ab;
  --border: #222834;
  --border-2: #2d3443;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 30px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.7);
  --ring: rgba(60,160,235,.5);
  --nav-bg: rgba(10,12,16,.66);
  --nav-bg-solid: rgba(21, 26, 36, .86);
  --nav-rest-bg: rgba(18, 22, 30, .5);
  --nav-rest-border: rgba(255, 255, 255, .1);
  --nav-scroll-border: rgba(255, 255, 255, .17);
  --nav-rest-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.5);
  --nav-scroll-shadow: 0 14px 44px -14px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255, 255, 255, .12);
  --grain-opacity: .06;
  --hero-glow: radial-gradient(78% 48% at 50% 80%, rgba(43, 70, 224, .2), transparent 66%),
               radial-gradient(40% 32% at 50% 10%, rgba(14, 196, 141, .09), transparent 70%);
  --accent: #6f92ff;
  --accent-hover: #93b0ff;
  --brand-ink: #f3f5f8;
  /* Footer watermark (forced dark) */
  --wm: #262d3b;
  --wm-sheen: #5b6a86;
  /* "Glass" texture: top-lit, base sinks into the page (clipped to letterforms) */
  --wm-grad: linear-gradient(180deg, color-mix(in srgb, var(--wm) 55%, #ffffff) 0%, var(--wm) 42%, color-mix(in srgb, var(--wm) 50%, #000000) 100%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Film grain — kills the sterile flatness. Fixed, pointer-events: none. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--ink);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
main, .nav, .footer, .skip { position: relative; z-index: 2; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; color: inherit; }

/* Theme-aware: the old fixed violet + white was unreadable in light mode (2.7:1) */
::selection { background: color-mix(in srgb, var(--azure) 32%, transparent); color: var(--ink); }

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ring);
  border-radius: var(--radius-sm);
}

/* Skip link — first focus stop, invisible until needed */
.skip {
  position: absolute; left: 1rem; top: -100%;
  background: var(--ink); color: var(--bg);
  padding: .6rem 1rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 500;
  transition: top var(--dur-2) var(--ease-out);
  z-index: 100;
}
.skip:focus-visible { top: 1rem; }

/* ---------- Reading progress (spectrum line at the very top) ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: 2px; pointer-events: none;
  background: var(--spectrum);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- Scroll cue ("scroll to explore") ----------
   Trendy micro-interaction: small mono label + a track with a light
   segment that travels down, like the reference sites' hero cue. */
.scroll-cue {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: var(--ink-3); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.scroll-cue__track {
  width: 1px; height: 44px; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 1px;
}
.scroll-cue__track::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 14px; border-radius: 1px;
  background: var(--spectrum);
  animation: cue 1.9s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-16px); opacity: 0; }
  28% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
/* Full-bleed panels: cancel the container's gutter so each visible block's
   outer edge lands on the navbar pill's edge (same axis, every breakpoint).
   Section *text* keeps the gutter; only the panel surfaces run flush. */
.outcomes, .channels, .brain, .ask, .feat-grid, .usecases { margin-inline: calc(var(--gutter) * -1); }
.section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section--soft { background: var(--bg-soft); border-block: 1px solid var(--border); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.measure { max-width: var(--measure); }

/* Eyebrow / mono label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--spectrum);
  border-radius: 2px;
}
.eyebrow--spectrum { color: var(--ink-2); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
h1, h2, h3, h4, p, .lead, .hero__sub { text-wrap: pretty; }
.h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -.03em; }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.p { color: var(--muted); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lead { margin-top: 1rem; }
.section-head.center { margin-inline: auto; }

/* Gradient emphasis word (spectrum, used once per big headline) */
.grad {
  background: var(--spectrum-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  padding: .85em 1.4em;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) ease, border-color var(--dur-2) ease;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--bg); box-shadow: var(--shadow-sm); position: relative; }
.btn--primary::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px;
  background: var(--spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: var(--shadow-md); }
  .btn--primary:hover::after { opacity: 1; }
}
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--border-2); box-shadow: 0 1px 2px rgba(16,20,30,.06), 0 3px 10px -2px rgba(16,20,30,.10); }
/* Light-mode elevation: white-on-white surfaces need a visible frame + shadow */
.btn--primary { box-shadow: var(--shadow-sm), 0 2px 12px -2px rgba(16,20,30,.18); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { border-color: var(--ink-2); background: var(--surface-2); box-shadow: var(--shadow-sm), 0 2px 10px -2px rgba(16,20,30,.10); }
}
.btn--lg { font-size: 1.125rem; padding: 1em 1.7em; }
.btn--sm { font-size: .9rem; padding: .6em 1em; }
/* Arrow-in-its-own-orbit: the trailing arrow lives in a subtle disc */
.btn .arrow {
  display: inline-grid; place-items: center;
  width: 1.55em; height: 1.55em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--btn-fg) 14%, transparent);
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(2px) scale(1.06); }
}
.btn:active .arrow { transform: scale(.94); }

.link {
  color: var(--accent); font-weight: 500;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0% 1.5px;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) ease;
}
.link:hover { background-size: 100% 1.5px; }

/* ---------- Nav (floating glass island) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
}
/* The glass island IS the content container — one element owns the fill,
   border, and shadow, so the pill can never end up narrower or offset from
   the brand/links/CTA it wraps. (The old separate ::before island had its own
   max-width and drifted ~7px off the content axis on scrollbar viewports.) */
.nav__inner {
  max-width: var(--container);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: relative;
  margin-top: .9rem;
  padding-inline: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-pill);
  background: var(--nav-rest-bg);
  border: 1px solid var(--nav-rest-border);
  box-shadow: var(--nav-rest-shadow);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav.is-scrolled .nav__inner {
  background: var(--nav-bg-solid);
  border-color: var(--nav-scroll-border);
  box-shadow: var(--nav-scroll-shadow);
  transform: translateY(-2px);
}
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -.02em; color: var(--brand-ink); }
.nav__brand svg { height: 28px; width: auto; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav__brand:hover svg { transform: rotate(-6deg) scale(1.05); }
}
.nav__links { display: flex; align-items: center; gap: 2rem; }
/* Tighten the toggle→CTA pair so the right side reads as links | (toggle + CTA) */
.nav__links .theme-toggle { margin-right: -1rem; }
.nav__link { font-size: .95rem; color: var(--ink-2); font-weight: 500; transition: color var(--dur-1) ease; position: relative; }
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--spectrum); transition: right var(--dur-2) var(--ease-out); }
.nav__link:hover::after, .nav__link.is-active::after { right: 0; }

/* Solutions dropdown */
.nav__drop { position: relative; }
.nav__drop-btn { display: inline-flex; align-items: center; gap: .35rem; }
.nav__drop-btn svg { transition: transform var(--dur-2) var(--ease-out); }
.nav__drop:hover .nav__drop-btn svg, .nav__drop:focus-within .nav__drop-btn svg { transform: rotate(180deg); }
.nav__drop-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.98);
  transform-origin: top center;
  min-width: 340px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  display: flex; flex-direction: column; gap: .15rem;
}
.nav__drop-panel::before {
  /* notch pointing at the trigger */
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.nav__drop:hover .nav__drop-panel, .nav__drop:focus-within .nav__drop-panel, .nav__drop.is-open .nav__drop-panel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav__drop-panel a { display: block; padding: .65rem .7rem; border-radius: var(--radius-sm); transition: background var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.nav__drop-panel a:hover { background: var(--surface-2); transform: translateX(2px); }
.nav__drop-panel a b { display: block; font-size: .92rem; color: var(--ink); font-weight: 600; }
.nav__drop-panel a span { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.4; }
.nav__actions { display: flex; align-items: center; gap: .75rem; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease; position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.theme-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--ink-2); transition: color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out), background var(--dur-2) ease; }
.theme-toggle:hover { color: var(--ink); border-color: var(--border-2); background: var(--surface-2); }
.theme-toggle:active { transform: scale(.92) rotate(-12deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
/* JS-managed state (main.js sets the class on <html> after resolving auto) — wins over the media rules above. */
:root.theme--dark .theme-toggle .icon-sun { display: block; }
:root.theme--dark .theme-toggle .icon-moon { display: none; }
:root.theme--light .theme-toggle .icon-sun { display: none; }
:root.theme--light .theme-toggle .icon-moon { display: block; }

/* ---------- Hero ----------
   Cinematic intro: elements rise from below and fade in on a slow,
   heavy ease-out, staggered — eyebrow → title → sub → CTA → trust,
   then the demo frame drifts up from a scale of .98. */
@keyframes cine-in {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes frame-in {
  from { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero .eyebrow {
  animation: cine-in var(--dur-cine) var(--ease-cine) both;
  animation-delay: .08s;
}
.hero .hero__titleswap {
  animation: cine-in var(--dur-cine) var(--ease-cine) both;
  animation-delay: .24s;
}
.hero .hero__subswap {
  animation: cine-in var(--dur-cine) var(--ease-cine) both;
  animation-delay: .42s;
}
.hero .hero__cta {
  animation: cine-in var(--dur-cine) var(--ease-cine) both;
  animation-delay: .6s;
}
.hero .hero__trust {
  animation: cine-in var(--dur-cine) var(--ease-cine) both;
  animation-delay: .78s;
}
.hero .demo-frame {
  animation: frame-in 1.7s var(--ease-cine) .72s backwards; /* backwards, not both — so the scroll parallax can take over after the intro */
  will-change: transform;
}
.hero .chips {
  animation: cine-in var(--dur-cine) var(--ease-cine) both;
  animation-delay: 1.28s;
}
/* Subpage heroes (about / solutions) share the same entrance */
.hero--page .crumbs { animation: cine-in var(--dur-cine) var(--ease-cine) .08s both; }
.hero--page .h1 { animation: cine-in var(--dur-cine) var(--ease-cine) .24s both; }
.hero--page .lead { animation: cine-in var(--dur-cine) var(--ease-cine) .44s both; }
.hero--page .hero__cta { animation: cine-in var(--dur-cine) var(--ease-cine) .62s both; }
/* 404 mirrors the rhythm */
.notfound .notfound__code { animation: cine-in var(--dur-cine) var(--ease-cine) .08s both; }
.notfound h1 { animation: cine-in var(--dur-cine) var(--ease-cine) .3s both; }
.notfound p { animation: cine-in var(--dur-cine) var(--ease-cine) .48s both; }
.notfound .notfound__cta { animation: cine-in var(--dur-cine) var(--ease-cine) .66s both; }
.hero {
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4.25rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.hero::before {
  /* ambient prism light behind the hero */
  content: "";
  position: absolute; inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
/* Single column: centered copy on top, the demo in its own row below */
.hero__copy { text-align: center; max-width: 52rem; margin-inline: auto; }
.hero__title { margin-top: 1.1rem; }
.hero__sub { margin: 1.4rem auto 0; font-size: var(--step-1); color: var(--ink-2); max-width: 42rem; line-height: 1.5; }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; }
.hero__trust { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3); letter-spacing: .02em; }
.hero__trust span { display: inline-flex; align-items: center; gap: .5em; }
.hero__trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
/* Hero copy swap — headline AND subhead crossfade. Each pair of lines shares
   one grid slot (grid-area: 1/1), so the slot height = the taller of the two
   and NOTHING below (CTAs, trust, demo) moves.
   On load: big line = "Software should be experienced, not explained."
   (spectrum highlight on "not explained." — same treatment the pitch gives
   "itself.") with "Modern buyers…" as the sub. When the headline's top edge
   tucks under the fixed nav, both lines crossfade to the product pitch
   ("Your product / sells itself." + "Prismo is a sales agent…").
   The entrance is carried by the SLOTS (above), so the `both` fill-mode
   pins the slot, not the lines — the crossfade transitions on the lines
   themselves are never overridden by a finished keyframe.
   One-way, per visit (main.js). No-JS: <html> keeps .no-js → intro lines
   hidden, pitch lines static = the classic single-copy hero. */
.hero__titleswap,
.hero__subswap { display: grid; justify-items: center; }
.hero__titleswap > *,
.hero__subswap > * {
  grid-area: 1 / 1;
  transition: opacity var(--dur-cine-2) var(--ease-cine),
             transform var(--dur-cine-2) var(--ease-cine),
             filter var(--dur-cine-2) var(--ease-cine);
}
.hero__title--pitch,
.hero__sub--pitch {
  pointer-events: none;
  opacity: 0; transform: translateY(14px); filter: blur(6px);
}
.hero.is-swapped .hero__title--intro,
.hero.is-swapped .hero__sub--intro {
  pointer-events: none;
  opacity: 0; transform: translateY(-14px); filter: blur(6px);
}
.hero.is-swapped .hero__title--pitch,
.hero.is-swapped .hero__sub--pitch {
  pointer-events: auto;
  opacity: 1; transform: none; filter: none;
}
.no-js .hero__title--intro,
.no-js .hero__sub--intro { display: none; }
.no-js .hero__title--pitch,
.no-js .hero__sub--pitch { opacity: 1; transform: none; filter: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__titleswap > *, .hero__subswap > * { transition: none; }
}
/* Same max-width formula as .nav__inner (line 360), padding folded into the
   cap instead of stacked — so the frame's edges land on the nav pill's edges
   at every viewport, and its center stays on the same axis (viewport/2). */
.hero__demo { width: 100%; max-width: var(--container); margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; padding-inline: 0; position: relative; z-index: 1; }
.scroll-cue { margin-top: clamp(1.4rem, 4vw, 2.5rem); }

/* ---------- Embed / demo frame (the visual center) ---------- */
.demo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--demo-shadow), var(--frame-halo);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
/* double bezel: a milled shell around the window */
.demo-frame::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: calc(var(--radius-lg) + 10px);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}
.demo-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--spectrum); opacity: .55; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: 2;
}
.demo-frame__bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.demo-frame__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-2); }
.demo-frame__dot:nth-child(1){ background:#ff5f57; } .demo-frame__dot:nth-child(2){ background:#febc2e; } .demo-frame__dot:nth-child(3){ background:#28c840; }
.demo-frame__url { margin-left: .5rem; font-family: var(--font-mono); font-size: .74rem; color: var(--faint); letter-spacing: .02em; }
.demo-frame__live { margin-left: auto; display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.demo-frame__live::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(7,207,162,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(7,207,162,.55);} 70%{box-shadow:0 0 0 8px rgba(7,207,162,0);} 100%{box-shadow:0 0 0 0 rgba(7,207,162,0);} }
.demo-frame__stage { aspect-ratio: 16/9; position: relative; }
.demo-frame__stage iframe, .demo-frame__stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Honest drop-in slot */
.demo-slot { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .6rem; padding: 2rem; }
.demo-slot__mark { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.demo-slot__text { color: var(--muted); font-size: .95rem; max-width: 26ch; }
.demo-slot .prism-mini { width: 54px; height: 54px; margin-inline: auto; opacity: .9; animation: prism-breathe 5s var(--ease-in-out) infinite; }
@keyframes prism-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }

/* Caption chips (fade in, never bounce) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin-top: 2.5rem; justify-content: center; max-width: 40rem; margin-inline: auto; }
.chip { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); padding: .45em .8em; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: .5em; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spectrum); }

/* ---------- Demo screen (live Prismo session) ----------
   A simulated 1-to-1 demo: buyer chat + live dashboard + floating glass
   input. Theme-adaptive; spectrum accent; reveals with the hero, loops. */
/* The demo window keeps a dark stage in BOTH themes — a live running app reads as real
   software against the page (in light mode it also prevents white-on-white-on-white). */
.demo-frame__stage {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(30,134,255,.22), transparent 60%),
    radial-gradient(90% 90% at 8% 110%, rgba(7,207,162,.14), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, #12151c, #0e1117);
}
:root[data-theme="dark"] .demo-frame__stage {
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(30,134,255,.22), transparent 60%),
    radial-gradient(90% 90% at 8% 110%, rgba(7,207,162,.14), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--bg-soft));
}
.demo-app {
  position: absolute; inset: 0; display: flex; gap: 12px; padding: 14px 14px 64px; min-width: 0; overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(.965);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.demo-frame__stage .demo-app.run,
.demo-frame__stage .demo-app.final { opacity: 1; transform: none; }

/* -- chat pane -- */
.demo-app__chat {
  flex: 0 0 40%; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.chat__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-2);
}
.chat__live { color: var(--teal); display: inline-flex; align-items: center; gap: 5px; }
.chat__live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.chat__body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 12px; overflow: hidden; }
.bubble { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: .85rem; line-height: 1.42; font-weight: 500; opacity: 0; transform: translateY(5px) scale(.98); animation: chatIn .5s var(--ease-out) forwards; }
@keyframes chatIn { to { opacity: 1; transform: none; } }
.bubble--user { align-self: flex-end; color: #fff; background: linear-gradient(118deg, #0A7396 0%, #1663CE 34%, #3252D7 68%, #5B3AE0 100%); border-bottom-right-radius: 4px; } /* every stop ≥5:1 for white text (was #0F9FBE start = 3.1:1) */
.bubble--bot { align-self: flex-start; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat__think { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; font-family: var(--font-mono); font-size: .58rem; color: var(--faint); opacity: 0; animation: chatIn .4s var(--ease-out) forwards; }
.chat__think::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.chat__type { display: flex; gap: 4px; padding: 0 12px 10px; }
.chat__type[hidden] { display: none; }
.chat__type span { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); animation: typing 1.1s infinite; }
.chat__type span:nth-child(2) { animation-delay: .15s; } .chat__type span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }

/* -- dashboard pane: slimmed to KPIs + one chart (clear, not crowded) -- */
.demo-app__dash { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.dash__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.kpi__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .03em; color: var(--faint); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi__num { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi__delta { font-family: var(--font-mono); font-size: .6rem; color: var(--teal); }
.kpi__delta--flat { color: var(--faint); }
.chart { flex: 1; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.chart__head b { font-family: var(--font-display); font-weight: 600; font-size: .74rem; color: var(--ink); }
.chart__leg { font-family: var(--font-mono); font-size: .56rem; color: var(--faint); display: inline-flex; align-items: center; gap: 5px; }
.chart__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 10px; }
.bar { flex: 1; height: var(--h); min-height: 6px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--azure), var(--indigo)); transform: scaleY(.06); transform-origin: bottom; transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.bar:nth-child(1){--i:0}.bar:nth-child(2){--i:1}.bar:nth-child(3){--i:2}.bar:nth-child(4){--i:3}.bar:nth-child(5){--i:4}.bar:nth-child(6){--i:5}.bar:nth-child(7){--i:6}.bar:nth-child(8){--i:7}
.run .bar { transform: scaleY(1); }
.final .bar { transition: none; transform: scaleY(1); }
.lg { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.lg--a { background: linear-gradient(180deg, var(--azure), var(--indigo)); }
.lg--indigo { background: var(--indigo); } .lg--azure { background: var(--azure); } .lg--teal { background: var(--teal); }

/* -- floating glass input -- */
.demo-input {
  position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%);
  width: min(86%, 430px); height: 40px; border-radius: 999px;
  display: flex; align-items: center; gap: 9px; padding: 0 9px 0 12px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.4);
  animation: inputFloat 4.6s var(--ease-in-out) infinite;
}
@keyframes inputFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
.demo-input__logo { flex: 0 0 20px; width: 20px; height: 20px; }
.demo-input__logo svg { width: 100%; height: 100%; display: block; }
.demo-input__ph { flex: 1; font-family: var(--font-body); font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-input__btns { display: flex; gap: 6px; }
.demo-input__btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; font-size: .72rem; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.demo-input__btn--call { color: #fff; background: #ef4444; animation: callGlow 2.4s var(--ease-in-out) infinite; }
@keyframes callGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); } }

/* The demo mock is a RUNNING APP inside the frame — its chrome stays dark in BOTH
   themes (light mode included: white cards on a dark stage read as a broken page).
   Fixed values, so it never drifts with the page theme. Dark mode keeps the
   theme surfaces, which are dark anyway (slightly lifted vs the stage bg).
   NOTE: must come AFTER the original .kpi/.chat/.chart/.demo-input rules above
   (equal specificity — source order decides). */
:root:not([data-theme="dark"]) .demo-frame { --demo-surface: #12151c; --demo-surface-2: #171b24; --demo-border: #232a38; --demo-ink: #f3f5f8; --demo-ink-2: #c9d0dc; --demo-faint: #8d97ab; }
:root[data-theme="dark"] .demo-frame { --demo-surface: var(--surface); --demo-surface-2: var(--surface-2); --demo-border: var(--border); --demo-ink: var(--ink); --demo-ink-2: var(--ink-2); --demo-faint: var(--faint); }
.demo-frame__bar { background: var(--demo-surface-2); border-bottom-color: var(--demo-border); }
.demo-frame__url { color: var(--demo-faint); }
.demo-frame__live { color: var(--demo-ink-2); }
.demo-app__chat { background: var(--demo-surface); border-color: var(--demo-border); }
.chat__head { border-bottom-color: var(--demo-border); color: var(--demo-ink-2); }
.bubble--bot { color: var(--demo-ink); background: var(--demo-surface-2); border-color: var(--demo-border); }
.chat__think { color: var(--demo-faint); }
.chat__think::before { background: var(--demo-faint); }
.chat__type span { background: var(--demo-faint); }
.kpi { background: var(--demo-surface); border-color: var(--demo-border); }
.kpi__label { color: var(--demo-faint); }
.kpi__num { color: var(--demo-ink); }
.chart { background: var(--demo-surface); border-color: var(--demo-border); }
.chart__head b { color: var(--demo-ink); }
.chart__leg { color: var(--demo-faint); }
.demo-input { background: color-mix(in srgb, var(--demo-surface) 55%, transparent); border-color: color-mix(in srgb, var(--demo-ink) 12%, transparent); }
.demo-input__ph { color: var(--demo-faint); }
.demo-input__btn { background: color-mix(in srgb, var(--demo-ink) 8%, transparent); color: var(--demo-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .demo-app { transition: none; }
  .bubble, .bar, .demo-input, .demo-input__btn--call { animation: none !important; transition: none !important; }
}
/* .final (no-JS / reduced) end-state: everything visible, no motion */
.demo-app.final .bubble, .demo-app.final .demo-input, .demo-app.final .demo-input__btn--call { animation: none; }
.demo-app.final .bubble { opacity: 1; transform: none; }

/* ---------- Spotlight cards ----------
   Cursor-tracked glow. JS sets --mx/--my; pure CSS fallback = static. */
.spot { position: relative; }
.spot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--teal) 7%, var(--azure) 5%), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .spot:hover::before { opacity: 1; }
}

/* ---------- Section: How it works (5 outcomes) ---------- */
.outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.outcome { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); position: relative; }
.outcome__idx { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); letter-spacing: .1em; }
.outcome__idx b { color: transparent; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; font-weight: 600; }
.outcome h3 { font-size: var(--step-1); margin-top: .6rem; letter-spacing: -.02em; }
.outcome p { margin-top: .5rem; color: var(--muted); font-size: .98rem; }
/* Equalize body-copy height so callout (quote) cards baseline-align across columns. */
.outcomes .outcome:not(.outcome--lead) p { min-height: 4.95em; }
/* Row 05 spans full width — give it a hierarchy bump so it reads as a feature, not a stretched cell. */
.outcomes article:nth-of-type(5) h3 { font-size: calc(var(--step-1) * 1.18); }
.outcomes article:nth-of-type(5) p { max-width: 52rem; font-size: 1.02rem; }
.outcomes article:nth-of-type(5) .callout { max-width: 56rem; }
.outcome--lead { grid-column: 1 / -1; background: var(--ink); color: var(--bg); }
.outcome--lead h2 { color: var(--bg); font-size: var(--step-2); }
.outcome--lead p { color: color-mix(in srgb, var(--bg) 72%, transparent); font-size: var(--step-1); max-width: 40rem; }
.outcome--lead::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 85% -10%, rgba(122,43,226,.28), transparent 60%),
              radial-gradient(50% 80% at 5% 110%, rgba(14,196,141,.18), transparent 60%);
  pointer-events: none;
}
.outcome--lead > * { position: relative; }

/* ---------- Section: Channels (2 cards) ---------- */
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.channel { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.5rem); position: relative; overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) ease; }
@media (hover: hover) and (pointer: fine) {
  .channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
}
.channel__tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.channel h3 { font-size: var(--step-2); margin-top: .8rem; }
.channel p { margin-top: .7rem; color: var(--muted); }
.channel__list { margin-top: 1.25rem; display: grid; gap: .6rem; }
.channel__list li { display: flex; gap: .65em; color: var(--ink-2); font-size: .96rem; list-style: none; }
.channel__list li::before { content: "→"; color: var(--accent); font-family: var(--font-mono); }
.channel__glow { position: absolute; top: -30%; right: -20%; width: 240px; height: 240px; background: var(--spectrum); opacity: .07; filter: blur(60px); pointer-events: none; }

/* ---------- Section: Brain (focal loop diagram) ---------- */
/* Replaces the flat 4-card grid with one signature visual: the agent's
   loop (record → learn → show → book) drawn as a ring with a spectrum
   stroke and a pulse travelling the path. Static under reduced motion /
   no-JS (the SVG renders fully; only the pulse + node breathing are
   animated). The four capability lines survive as a compact legend, so
   nothing is lost. */
.loop {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  margin-top: clamp(1rem, 3vw, 2rem);
}
.loop__stage { position: relative; }
.loop__stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.loop__ring { fill: none; stroke: var(--border-2); stroke-width: 1.5; }
.loop__ring-grad { fill: none; stroke: url(#loop-grad); stroke-opacity: .5; stroke-width: 2; }
/* The travelling pulse: a small dot riding the ring path. Hidden by default
   (no-JS / older browsers) and only enabled where offset-path is supported —
   so the diagram is always fully rendered, the motion is progressive. */
.loop__pulse-dot { fill: var(--teal); }
.loop__pulse-travel { display: none; }
@supports (offset-path: path("M 170 18 A 152 152 0 1 1 169.99 18")) {
  .loop__pulse-travel {
    display: inline;
    offset-path: path("M 170 18 A 152 152 0 1 1 169.99 18");
    offset-rotate: 0deg;
    animation: loopTravel 7s linear infinite;
  }
}
@keyframes loopTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.loop__node { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.5; }
.loop__node-ico { fill: none; stroke: var(--node, var(--azure)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loop__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.loop__num { font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
/* node breathing: subtle scale on the icon group (transform only) */
.loop__node-g { transform-box: fill-box; transform-origin: center; animation: nodeBreathe 4.2s var(--ease-in-out) infinite; }
.loop__node-g:nth-of-type(2) { animation-delay: 1.05s; }
.loop__node-g:nth-of-type(3) { animation-delay: 2.1s; }
.loop__node-g:nth-of-type(4) { animation-delay: 3.15s; }
@keyframes nodeBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.loop__center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none; gap: .35rem;
}
.loop__center b {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -.03em; color: var(--ink);
}
.loop__center span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
/* Legend: the four capabilities, compact rows under the ring */
.loop__legend { display: grid; gap: .9rem; }
.loop-legend__row {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .95rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .loop-legend__row:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow-sm); }
}
/* Tone dot — maps each capability row to its ring node color. No numbers:
   the ring's 01–04 are the loop STEPS (record/learn/show/book); the legend
   rows are the four CAPABILITIES, so numbering them too would conflate the
   two sets. The dot carries the mapping instead. */
.loop-legend__n {
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: .38rem; border-radius: 999px;
  background: var(--node, var(--azure));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--node, var(--azure)) 14%, transparent);
}
.loop-legend__row b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; color: var(--ink); }
.loop-legend__row p { margin: .2rem 0 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 860px) {
  .loop { grid-template-columns: 1fr; }
  .loop__stage { max-width: 420px; margin-inline: auto; width: 100%; }
}
/* Reduced motion: the diagram stays fully rendered; the travelling pulse
   and node breathing stop (transform/offset animation only). */
@media (prefers-reduced-motion: reduce) {
  .loop__pulse-travel, .loop__node-g { animation: none !important; }
  .loop-legend__row { transition: none; }
}

/* ---------- Section: Ask the bot ---------- */
.ask { background: var(--ink); color: var(--bg); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden; }
.ask::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 80% -10%, rgba(112,53,249,.4), transparent 60%), radial-gradient(70% 120% at 10% 120%, rgba(7,207,162,.28), transparent 60%); pointer-events: none; }
.ask > * { position: relative; z-index: 1; }
.ask h2 { color: var(--bg); font-size: var(--step-3); }
.ask p { color: color-mix(in srgb, var(--bg) 74%, transparent); margin-top: 1rem; max-width: 42rem; font-size: var(--step-1); }
.ask__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.ask .btn--primary { --btn-bg: var(--bg); --btn-fg: var(--ink); }
.ask__note { font-family: var(--font-mono); font-size: .78rem; color: color-mix(in srgb, var(--bg) 60%, transparent); }
/* Bot panel */
.bot { margin-top: 1.5rem; border: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 6%, transparent); padding: 1.25rem; display: none; }
.bot.is-open { display: block; animation: bot-in var(--dur-3) var(--ease-out); }
@keyframes bot-in { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } }
.bot__row { display: flex; gap: .75rem; }
.bot__input { flex: 1; background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 24%, transparent); border-radius: var(--radius-pill); padding: .7em 1.1em; color: var(--bg); transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) var(--ease-out); }
.bot__input:focus { outline: none; border-color: color-mix(in srgb, var(--teal) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.bot__input::placeholder { color: color-mix(in srgb, var(--bg) 55%, transparent); }
/* Glassy submit inside the dark panel — fixed values so it works in both themes
   (the old inline style forced near-invisible white-on-#f1f3f6 in light mode) */
.bot__send { --btn-bg: color-mix(in srgb, var(--bg) 14%, transparent); --btn-fg: var(--bg); border-color: color-mix(in srgb, var(--bg) 26%, transparent); }
.bot__msg { font-size: .9rem; color: color-mix(in srgb, var(--bg) 78%, transparent); margin-bottom: .85rem; }

/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final h2 { font-size: var(--step-4); letter-spacing: -.03em; }
.final p { margin: 1.25rem auto 0; max-width: 40rem; color: var(--muted); font-size: var(--step-1); }
.final__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Final CTA: prism refraction (v2, product-grounded) ----------
   The company's founding metaphor made literal — the about page says it:
   "Prismo takes one capture of your product and refracts it into a demo
   for every use case — the way white light through a prism comes out as
   the full spectrum. One ray in. Every buyer, out."
   Scene (one SVG): the white beam = the single recording; it strikes the
   Prismo mark (the prism) and refracts into 7 rays — one for each kind of
   buyer the agent demos to, each ray labelled with that buyer. The buyer
   strip under the scene is the same seven, as real buttons.
   Interaction (JS, progressive): hover/focus a buyer or its ray → the ray
   flares and a "demo delivered" comet fires down it; when nobody
   interacts, an idle tour showcases each buyer in turn.
   The SVG is the static end-state — no-JS / reduced-motion / pre-JS all
   show the full picture, nothing moving. transform + opacity only (a
   2.5→3.4px stroke-width on hover is the one sanctioned exception —
   paint-only, small area); photon/comet travel rides offset-path and is
   auto-hidden (and comets never fired) where it is unsupported. */
.prism-rig { margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; max-width: 880px; }
.prism-rig__stage svg { width: 100%; height: auto; display: block; overflow: visible; }
/* "white light" is a theme color. THIS SITE'S DEFAULT THEME IS DARK
   (:root:not([data-theme="light"]) carries the dark tokens; a fresh visit
   shows --bg #0a0c10), so the BASE values here are the DARK ones and the
   light values are overridden under [data-theme="light"] — the same
   convention the rest of the sheet uses. (Getting this backwards made the
   beam + buyer rays resolve to their muted light values on a default-dark
   page, i.e. a dark-navy hairline on near-black.) */
.prism-rig { --beam: #F4F8FF; }
:root[data-theme="light"] .prism-rig { --beam: #1B2333; }
/* The seven buyer colors — a spectral ramp tuned per theme so every ray
   and label holds ≥ ~4.3:1 on paper, luminous on near-black. Base = the
   dark (luminous) values audited against #0a0c10; the light (deep) values
   are audited against #fff and applied under [data-theme="light"]. */
.prism-rig {
  --pr-c1: #FF6B5E; --pr-c2: #FF9838; --pr-c3: #FFC53D; --pr-c4: #43D06A;
  --pr-c5: #4DA3FF; --pr-c6: #7A74FF; --pr-c7: #8F6FFF;
}
:root[data-theme="light"] .prism-rig {
  --pr-c1: #D62828; --pr-c2: #B84700; --pr-c3: #A66A00; --pr-c4: #2A8C3D;
  --pr-c5: #1E6FE8; --pr-c6: #4A45D8; --pr-c7: #7035F9;
}
/* .reveal keeps the rig hidden until observed — that is the desired
   pre-state, so only neutralize its blur/lift, not the opacity */
.prism-rig { transform: none; filter: none; margin-top: clamp(1.25rem, 3vw, 2rem); }
.pr-sm { transform-box: fill-box; transform-origin: center; }
.pr-beam, .pr-ray { stroke-linecap: round; fill: none; stroke-dasharray: 1; }
/* The beam is a SOLID trunk — one continuous recording arriving from the
   left. It must read as a strong single stream, not a hairline, so the
   input carries the left half as strongly as the seven-ray fan carries the
   right (the metaphor is "one in", so it is ONE bold line, not many thin). */
.pr-beam { stroke: var(--beam); }
.pr-beam--halo { stroke-width: 16; }
.pr-beam--core { stroke-width: 5; }
/* the beam's caption: what the white line IS, in the scene's own voice.
   Sized to read as a peer of the ray labels — the input deserves the
   same typographic weight as the outputs. */
.pr-src {
  font-family: var(--font-mono); font-size: 24px; font-weight: 500;
  letter-spacing: .05em; text-transform: lowercase; fill: var(--muted);
}
/* the beam's start dot — mirrors the seven end dots on the right */
.pr-src-dot { fill: var(--beam); opacity: 0; transition: opacity .5s var(--ease-cine, cubic-bezier(0.23, 1, 0.32, 1)); }
.pr-ray--glow { stroke: var(--c); stroke-width: 11; opacity: 0; transition: opacity .18s var(--ease-out, ease-out); }
.pr-ray--core { stroke: var(--c); stroke-width: 2.5; transition: stroke-width .18s var(--ease-out, ease-out); }
/* invisible fat stroke = the ray's hover target (pointer users) */
.pr-ray-hit { stroke: transparent; stroke-width: 22; fill: none; pointer-events: stroke; cursor: pointer; }
.pr-hit { fill: color-mix(in srgb, var(--beam) 60%, transparent); }
.pr-end { fill: var(--c); transform-box: fill-box; transform-origin: center; }
.pr-label {
  font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: .02em;
  fill: var(--c);
  paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round;
}
/* --- entrance choreography — the reveal observer adds .is-in ---
     t=0     glow + prism scale-fade in
     t≈.4s   the white beam draws in
     t≈.6s   the seven buyer rays fan out, staggered 80ms
     t≈.95s  the impact flash lands on the mark
     t≈1.5s  ray tips + buyer labels fade in
     t≈2.2s  the idle loop begins (photons + the JS buyer tour) */
.pr-glow, .pr-hit, .pr-label { opacity: 0; transition: opacity .6s var(--ease-cine, cubic-bezier(0.23, 1, 0.32, 1)); }
.pr-end { opacity: 0; transition: opacity .6s var(--ease-cine, cubic-bezier(0.23, 1, 0.32, 1)), transform .18s var(--ease-out, ease-out); }
.pr-src { opacity: 0; transition: opacity .6s var(--ease-cine, cubic-bezier(0.23, 1, 0.32, 1)); }
.pr-sm { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease-cine, ease-out), transform .7s var(--ease-cine, ease-out); }
.pr-beam, .pr-ray { stroke-dashoffset: 1; }
.prism-rig.is-in .pr-glow { opacity: .2; transition-delay: .05s; }
.prism-rig.is-in .pr-sm { opacity: 1; transform: scale(1); transition-delay: .1s; }
.prism-rig.is-in .pr-beam--halo { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease-cine, ease-out) .4s; }
.prism-rig.is-in .pr-beam--core { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease-cine, ease-out) .45s; }
.prism-rig.is-in .pr-src-dot { opacity: 1; transition-delay: .4s; }
.prism-rig.is-in .pr-hit { opacity: 1; transition-delay: .95s; }
.prism-rig.is-in .pr-ray--core { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)) var(--d, .6s), stroke-width .18s var(--ease-out, ease-out); }
/* the glow line shares the draw-in (its opacity is 0 until flared, so the
   timing is invisible — it only matters that the dash is eventually 0) */
.prism-rig.is-in .pr-ray--glow { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)) .7s; }
.prism-rig.is-in .pr-end { opacity: 1; transition-delay: 1.5s; }
.prism-rig.is-in .pr-label { opacity: 1; transition-delay: 1.6s; }
.prism-rig.is-in .pr-src { opacity: 1; transition-delay: .8s; }
/* --- flare state: JS sets .is-on on a ray group + its buyer chip --- */
.pr-rayline.is-on .pr-ray--glow { opacity: .62; }
.pr-rayline.is-on .pr-ray--core { stroke-width: 4.6px; }
.pr-rayline.is-on .pr-end { transform: scale(1.9); }
/* while a buyer is focused, the idle photon layer fades out so the scene
   concentrates on the active ray (class on the rig, set/cleared by JS) */
.pr-idle { opacity: 1; transition: opacity .3s var(--ease-out, ease-out); }
.prism-rig.is-focus .pr-idle { opacity: .12; }
/* --- idle + interaction light --- */
.pr-photon { opacity: 0; offset-rotate: 0deg; animation: pr-travel var(--pdur, 3.4s) linear infinite; animation-delay: var(--pdel, 2.4s); }
@keyframes pr-travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.pr-comet { opacity: 0; offset-rotate: 0deg; }
.pr-comet.fired { animation: pr-comet .9s var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1)); }
@keyframes pr-comet {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* --- idle breathing (transform + opacity only; starts after entrance) --- */
.pr-glow { animation: pr-breathe 9s var(--ease-in-out, ease-in-out) 3s infinite; }
@keyframes pr-breathe { 0%, 100% { opacity: .2; } 50% { opacity: .3; } }
.pr-sm { animation: pr-float 9s var(--ease-in-out, ease-in-out) 3s infinite; }
@keyframes pr-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.005); } }
/* --- the buyer strip: the seven rays as real, focusable buttons --- */
.prism-buyers { margin-top: clamp(1.4rem, 3vw, 2rem); max-width: 640px; margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .55rem; }
.pr-buyer {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .45em .9em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body); font-size: .82rem; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--dur-2, 240ms) var(--ease-out, ease-out), box-shadow var(--dur-2, 240ms) var(--ease-out, ease-out), border-color var(--dur-2, 240ms) var(--ease-out, ease-out), color var(--dur-2, 240ms) var(--ease-out, ease-out);
}
.pr-buyer__dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 55%, transparent); }
.pr-buyer.is-on { border-color: color-mix(in srgb, var(--c) 55%, var(--border)); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pr-buyer:hover, .pr-buyer:focus-visible, .pr-buyer.is-on {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm), 0 6px 18px -8px color-mix(in srgb, var(--c) 55%, transparent);
  }
}
.pr-buyer:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* --- no-JS: the observer never runs — the full picture, nothing moving --- */
.no-js .pr-glow { opacity: .2; transition: none; animation: none; }
.no-js .pr-sm { opacity: 1; transform: none; transition: none; animation: none; }
.no-js .pr-hit { opacity: 1; transition: none; }
.no-js .pr-end, .no-js .pr-label { opacity: 1; transition: none; }
.no-js .pr-src { opacity: 1; transition: none; }
.no-js .pr-src-dot { opacity: 1; transition: none; }
.no-js .pr-beam, .no-js .pr-ray { stroke-dashoffset: 0; transition: none; }
.no-js .pr-ray--glow { opacity: .12; transition: none; }
.no-js .pr-idle { opacity: 1; transition: none; }
.no-js .pr-photon, .no-js .pr-comet { display: none; }
/* --- reduced motion: the same picture, zero movement --- */
@media (prefers-reduced-motion: reduce) {
  .prism-rig, .prism-rig * { animation: none !important; }
  .prism-rig .pr-beam, .prism-rig .pr-ray { stroke-dashoffset: 0 !important; transition: none !important; }
  .prism-rig .pr-glow, .prism-rig .pr-sm, .prism-rig .pr-hit, .prism-rig .pr-end, .prism-rig .pr-label, .prism-rig .pr-src, .prism-rig .pr-src-dot, .prism-rig .pr-ray--glow, .prism-rig .pr-idle, .prism-rig .pr-buyer { transition: none !important; }
  .prism-rig .pr-glow { opacity: .2; }
  .prism-rig .pr-sm { opacity: 1; transform: none; }
  .prism-rig .pr-hit { opacity: 1; }
  .prism-rig .pr-end, .prism-rig .pr-label { opacity: 1; }
  .prism-rig .pr-src { opacity: 1; }
  .prism-rig .pr-src-dot { opacity: 1; }
  .pr-buyer:hover, .pr-buyer.is-on { transform: none; }
}
/* --- responsive --- */
@media (max-width: 900px) { .prism-rig { max-width: 680px; } }
@media (max-width: 600px) {
  .prism-rig { max-width: 480px; }
  .pr-label { display: none; }
  .pr-src, .pr-src-dot { display: none; }
  .prism-buyers { gap: .45rem .4rem; }
  .pr-buyer { font-size: .76rem; padding: .4em .75em; }
}

/* ---------- Footer ----------
   Two variants:
   · .footer--brand (home) — hihobbes-style: brand block + status pill,
     link columns, giant clipped wordmark, quiet copyright line.
   · default (about / privacy / solutions / 404) — the original compact
     grid footer, unchanged.
   Watermark + reveals are pure transform/opacity, gated on .js,
   reduced-motion → static. */
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); }

/* — Home: brand footer — */
.footer--brand { background: var(--bg); overflow: hidden; }
.footer--brand .footer__top { max-width: var(--container); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4.5rem); }
.footer--brand .footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.footer__logo { display: inline-flex; align-items: center; gap: .55rem; }
.footer__logo .logo-mark { height: 30px; width: auto; transition: transform var(--dur-2) var(--ease-out); }
.footer__logo:hover .logo-mark { transform: translateY(-2px); }
.footer__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; color: var(--brand-ink); line-height: 1; }
.footer--brand .footer__tag { max-width: 34ch; }
.footer__status { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .35rem .8rem; }
.footer__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.footer__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: footer-pulse 2.4s var(--ease-out) infinite; }
@keyframes footer-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.footer--brand .footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); align-content: start; }
/* Giant clipped wordmark — the hihobbes signature flourish. Faint,
   bottom-clipped, theme-aware (--wm: soft gray on white, faint light on
   dark, with a subtle top-lit "glass" gradient clipped to the letterforms
   (texture, not flat fill). One on-brand motion: a "light-refraction" sheen
   sweeps the letterforms every ~5s (background-position only), plus a gentle
   fade entrance and a subtle scroll drift (main.js). No-JS → static; reduced
   motion → all still. */
.footer__mark { position: relative; max-width: 100vw; margin-top: clamp(1.75rem, 4vw, 3rem); overflow: hidden; pointer-events: none; }
.footer__mark-inner {
  position: relative;
  display: block; width: 100%; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(7rem, 24vw, 21rem); line-height: 1.18; letter-spacing: -.035em;
  /* Top-lit glass gradient clipped to the letterforms = subtle texture.
     (text-shadow is deliberately absent: it paints OUTSIDE the clipped glyphs
     and would smear the gradient into a glow.) */
  background: var(--wm-grad, var(--wm));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* -9.5% of the line box: measured so the ENTIRE word sits in view —
     cap-top ~45px below the clip top, the "p" tail (measured +20% of em
     below baseline) ~43px above the clip bottom. Nothing is cut off. */
  transform: translateY(calc(-9.5% + var(--wm-drift, 0px)));
  will-change: transform, opacity; user-select: none;
}
/* Entrance: fade in when the footer enters view (transform is left to the
   scroll-drift parallax, so it stays crisp — no lag). */
.js .footer__mark-inner { opacity: 0; transition: opacity .9s var(--ease-cine) .12s; }
.js .footer__mark-inner.is-in { opacity: 1; }
/* Refraction sheen: Prismo IS a prism, so the signature motion is a band of
   *refracted light* — white core, teal→azure→violet edges — sweeping across
   the wordmark. It is a text-clipped overlay (background-clip: text) so the
   light travels strictly INSIDE the letterforms, like a beam through glass.
   One pass every 5s (band crosses ~1.9–3.9s); background-position only. */
.footer__mark-sheen {
  position: absolute; inset: 0;
  font: inherit; text-align: center;
  line-height: 1.18; letter-spacing: -.035em;
  background: linear-gradient(100deg,
    transparent 44%,
    rgba(7,207,162,.85) 46.5%,
    rgba(30,134,255,.9) 48.5%,
    rgba(255,255,255,.95) 50%,
    rgba(112,53,249,.9) 51.5%,
    rgba(7,207,162,.85) 53.5%,
    transparent 56%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: wm-sheen 5s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes wm-sheen {
  /* band travels right→… core at -0.3W (off left) → 1.3W (off right) */
  0%, 40% { background-position: 100% 0; opacity: 0; }
  48% { opacity: 1; }
  78% { opacity: 1; }
  85%, 100% { background-position: 0% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__dot::after { animation: none; opacity: 0; }
  .footer__logo:hover .logo-mark { transform: none; }
  .footer--brand .footer__col a:hover { transform: none; }
  .js .footer__mark-inner { opacity: 1; transition: none; }
  .footer__mark-sheen { display: none; }
}

/* — Default: compact grid footer (sub-pages) — */
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer > .container { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid .footer__brand svg { height: 28px; width: auto; margin-bottom: .9rem; }
.footer__tag { color: var(--muted); font-size: .95rem; }
.footer__col h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 1rem; }
.footer__col a { display: block; color: var(--ink-2); font-size: .95rem; padding: .35em 0; transition: color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.footer__col a:hover { color: var(--accent); transform: translateX(2px); }
.footer__grid + .footer__base,
.footer__base { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; color: var(--faint); font-size: .85rem; }
/* Home base sits directly under the clipped watermark — no divider, no big
   top margin. It's a direct child of .footer (not wrapped in .container), so
   it re-applies the container width + auto margin itself. */
.footer--brand .footer__base { max-width: var(--container); margin: 0 auto; padding: 1.6rem var(--gutter) 1.9rem; border-top: 0; }

/* ---------- Reveal on scroll ----------
   The same cinematic curve as the hero intro, slightly faster:
   fade + rise + blur, staggered per grid. */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity var(--dur-cine-2) var(--ease-cine), transform var(--dur-cine-2) var(--ease-cine), filter var(--dur-cine-2) var(--ease-cine); }
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
/* No-JS: the IntersectionObserver never runs — content must stay visible. */
.no-js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
/* No-JS: the demo sim never runs, so force the full static end-state —
   the app is opacity:0 until JS adds .run/.final, which would leave the
   entire product frame blank without JavaScript. */
.no-js .demo-app { opacity: 1; transform: none; }
.no-js .bar { transform: scaleY(1); transition: none; }
.stagger > * { transition-delay: 0ms; }
.stagger > *:nth-child(1){ transition-delay:.05s } .stagger > *:nth-child(2){ transition-delay:.14s }
.stagger > *:nth-child(3){ transition-delay:.23s } .stagger > *:nth-child(4){ transition-delay:.32s }
.stagger > *:nth-child(5){ transition-delay:.41s } .stagger > *:nth-child(6){ transition-delay:.5s }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn, .channel, .block, .theme-toggle, .demo-frame, .demo-slot .prism-mini { transition: none; animation: none; }
  .btn:hover, .channel:hover, .block:hover, .nav__brand:hover svg { transform: none; }
  .nav__inner { transition: none; }
  .nav.is-scrolled .nav__inner { transform: none; }
  .demo-frame__live::before { animation: none; }
  .bot.is-open { animation: none; }
  .progress { display: none; }
  .scroll-cue { display: none; }
  .essay p { filter: none !important; opacity: 1 !important; }
  .hero .eyebrow, .hero .hero__titleswap, .hero .hero__subswap, .hero .hero__cta, .hero .hero__trust,
  .hero .demo-frame, .hero .chips,
  .hero--page .crumbs, .hero--page .h1, .hero--page .lead, .hero--page .hero__cta,
  .notfound .notfound__code, .notfound h1, .notfound p, .notfound .notfound__cta {
    animation: none; opacity: 1; transform: none; filter: none;
  }
  .hero .demo-frame, .section--soft .demo-frame { transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + 1.75rem); }
  .hero__demo { margin-top: 1.5rem; }
  .demo-frame__stage { aspect-ratio: 4 / 5; }
  .demo-app { flex-direction: column; overflow-y: auto; }
  .demo-app__chat { flex: none; min-height: 46%; }
  .demo-app__dash { flex: none; }
  .chart { min-height: 110px; }
  .demo-input { width: min(88%, 400px); }
}
@media (max-width: 960px) {
  .brain { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid .footer__brand { grid-column: 1 / -1; }
  .footer--brand .footer__top { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 760px) {
  .nav { padding-top: .6rem; }
  .nav__inner { max-width: var(--container); height: 52px; margin-top: 0; padding-inline: .9rem; }
  .nav.is-scrolled .nav__inner { transform: none; } /* transform would trap the fixed mobile menu */
  .nav__links {
    display: none;
    position: fixed; top: calc(.6rem + 52px + 10px); left: .75rem; right: .75rem;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: var(--nav-bg-solid);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.25rem 1.25rem;
    z-index: 59;
  }
  .nav.is-open .nav__links {
    display: flex;
    animation: menu-in .28s var(--ease-out);
  }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
  .nav__link { padding: .7rem .5rem; font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav__drop-panel { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; box-shadow: none; border: 0; background: transparent; display: none; padding-left: .75rem; }
  .nav__drop-panel::before { display: none; }
  .nav__drop.is-open .nav__drop-panel { display: block; }
  .theme-toggle { justify-content: flex-start; width: 100%; margin-top: .5rem; }
  .nav__links .btn { display: inline-flex; justify-content: center; margin-top: .5rem; }
  .nav__toggle { display: inline-flex; }
  .outcomes { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .section-head { max-width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer--brand .footer__nav { grid-template-columns: 1fr 1fr; }
  .demo-frame::after { display: none; }
}
@media (max-width: 560px) {
  .brain { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer--brand .footer__nav { grid-template-columns: 1fr; }
  .footer--brand .footer__base { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .hero__cta .btn { width: 100%; }
  .final__cta .btn { width: 100%; }
}

/* ---------- Solutions / About components ---------- */
.hero--page { text-align: center; padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem)); position: relative; }
.hero--page::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
}
.hero--page > .container { position: relative; }
.hero--page .container { max-width: 52rem; }
.hero--page .lead { margin: 1.4rem auto 0; max-width: 40rem; }
.hero--page .hero__cta { justify-content: center; }
.crumbs { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--faint); margin-bottom: 1.25rem; display: inline-flex; gap: .5em; align-items: center; }
.crumbs a { color: var(--muted); transition: color var(--dur-1) ease; }
.crumbs a:hover { color: var(--accent); }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.feat { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 1.6rem 1.5rem; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) ease; }
@media (hover: hover) and (pointer: fine) {
  .feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
}
.feat__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); margin-bottom: 1rem; transition: color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .feat:hover .feat__icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); transform: scale(1.05); }
}
.feat__icon svg { width: 22px; height: 22px; }
.feat h3 { font-size: 1.15rem; }
.feat p { margin-top: .5rem; color: var(--muted); font-size: .95rem; }

.usecases { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.usecase { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; }
.usecase__n { font-family: var(--font-mono); font-size: 1rem; color: transparent; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; font-weight: 600; }
.usecase h3 { font-size: var(--step-1); letter-spacing: -.02em; }
.usecase p { margin-top: .5rem; color: var(--muted); }
.usecase ul { margin-top: 1rem; display: grid; gap: .5rem; }
.usecase li { list-style: none; display: flex; gap: .65em; color: var(--ink-2); font-size: .96rem; }
.usecase li::before { content: "→"; color: var(--accent); font-family: var(--font-mono); }

/* About vision essay */
.essay { max-width: 46rem; }
.essay p { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); margin-top: 1.4rem; }
.essay p.big { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; color: var(--ink); letter-spacing: -.02em; }
.essay .drop { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- About — blur-to-focus on scroll ----------
   Each essay paragraph sits defocused (blurred + dimmed) and resolves
   to sharp, full-contrast ink as it crosses the reading line — the
   trendy "blur to focus on scroll" treatment. Sharp by default so the
   text is fully readable with no JS or under reduced-motion; JS
   (non-reduced) drives blur/opacity per scroll frame via inline style. */
.essay p {
  will-change: filter, opacity;
}
.story-slot { border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--surface-2); padding: 1.5rem; margin-top: 1.5rem; color: var(--muted); font-size: .95rem; }
.story-slot b { color: var(--ink-2); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: .5rem; }
.beliefs { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.belief { background: var(--surface); padding: 1.4rem 1.6rem; font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -.02em; color: var(--ink); display: flex; gap: .9rem; align-items: baseline; }
.belief span { font-family: var(--font-mono); font-size: .8rem; color: var(--faint); }

/* ---------- Spotlight panels in dark mode ----------
   .outcome--lead and .ask are ink-on-bg in light mode (dark panels on a
   light page — intentional contrast). In dark mode, invert them back to
   lifted dark surfaces so the page stays a consistent dark tone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .outcome--lead { background: var(--surface-2); }
  :root:not([data-theme="light"]) .outcome--lead h2 { color: var(--ink); }
  :root:not([data-theme="light"]) .outcome--lead p { color: color-mix(in srgb, var(--ink-2) 80%, transparent); }
  :root:not([data-theme="light"]) .ask { background: var(--surface); border: 1px solid var(--border); }
  :root:not([data-theme="light"]) .ask h2 { color: var(--ink); }
  :root:not([data-theme="light"]) .ask p { color: color-mix(in srgb, var(--ink-2) 78%, transparent); }
  :root:not([data-theme="light"]) .ask .btn--primary { --btn-bg: var(--ink); --btn-fg: var(--bg); }
  :root:not([data-theme="light"]) .ask__note { color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
  :root:not([data-theme="light"]) .bot { border-color: color-mix(in srgb, var(--ink-2) 22%, transparent); background: color-mix(in srgb, var(--ink-2) 6%, transparent); }
  :root:not([data-theme="light"]) .bot__input { border-color: color-mix(in srgb, var(--ink-2) 24%, transparent); color: var(--ink); }
  :root:not([data-theme="light"]) .bot__input::placeholder { color: color-mix(in srgb, var(--ink-2) 55%, transparent); }
  :root:not([data-theme="light"]) .bot__msg { color: color-mix(in srgb, var(--ink-2) 78%, transparent); }
  /* base .bot__send is glass-of-var(--bg): light ink = light glass + light text
     (correct in light mode); on the inverted dark panel it must flip to light-on-dark */
  :root:not([data-theme="light"]) .bot__send { --btn-bg: color-mix(in srgb, var(--ink) 14%, transparent); --btn-fg: var(--ink); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-theme="light"]) .bot__send:hover { --btn-bg: color-mix(in srgb, var(--ink) 22%, transparent); }
  }
}
:root[data-theme="dark"] .outcome--lead { background: var(--surface-2); }
:root[data-theme="dark"] .outcome--lead h2 { color: var(--ink); }
:root[data-theme="dark"] .outcome--lead p { color: color-mix(in srgb, var(--ink-2) 80%, transparent); }
:root[data-theme="dark"] .ask { background: var(--surface); border: 1px solid var(--border); }
:root[data-theme="dark"] .ask h2 { color: var(--ink); }
:root[data-theme="dark"] .ask p { color: color-mix(in srgb, var(--ink-2) 78%, transparent); }
:root[data-theme="dark"] .ask .btn--primary { --btn-bg: var(--ink); --btn-fg: var(--bg); }
:root[data-theme="dark"] .ask__note { color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
:root[data-theme="dark"] .bot { border-color: color-mix(in srgb, var(--ink-2) 22%, transparent); background: color-mix(in srgb, var(--ink-2) 6%, transparent); }
:root[data-theme="dark"] .bot__input { border-color: color-mix(in srgb, var(--ink-2) 24%, transparent); color: var(--ink); }
:root[data-theme="dark"] .bot__input::placeholder { color: color-mix(in srgb, var(--ink-2) 55%, transparent); }
:root[data-theme="dark"] .bot__msg { color: color-mix(in srgb, var(--ink-2) 78%, transparent); }
/* .bot__send on the inverted dark panel: light glass + light text (matches
   the panel inversion above — base values are tuned for the light-mode panel) */
:root[data-theme="dark"] .bot__send { --btn-bg: color-mix(in srgb, var(--ink) 14%, transparent); --btn-fg: var(--ink); border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .bot__send:hover { --btn-bg: color-mix(in srgb, var(--ink) 22%, transparent); }
}

/* ---------- 404 ---------- */
.notfound { min-height: calc(100dvh - var(--nav-h)); display: grid; place-content: center; text-align: center; padding: var(--nav-h) 0 4rem; position: relative; }
.notfound::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
}
.notfound > .container { position: relative; }
.notfound__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 12px 40px rgba(43, 70, 224, .18));
}
.notfound h1 { font-size: var(--step-3); margin-top: 1.25rem; }
.notfound p { margin: 1rem auto 0; max-width: 34rem; color: var(--muted); font-size: var(--step-1); }
.notfound__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

@media (max-width: 760px) {
  .usecase { grid-template-columns: 1fr; gap: .7rem; }
  .hero--page .hero__cta .btn { width: 100%; }
}

/* ============================================================
   v3 — Finout-inspired upgrades (2026-08-27)
   Reference: finout.io. What we borrow, adapted to Prismo's
   dark-first spectrum identity (no light-on-white, no serifs,
   no new copy):
     1. Blueprint grid texture under the hero + every section.
     2. Spectrum color-coding of the "How it works" rows
        (teal -> azure -> indigo -> violet -> teal).
     3. Agent-voice callout cards inside each row.
     4. A spectrum "thread" running through the How-it-works
        section (finout's gradient connector, verticalized).
     5. Tactile press states on every card.
     6. Floating back-to-top pill (finout's scroll-to-top).
   All motion stays transform/opacity; reduced-motion guarded.
   ============================================================ */

/* ---------- 1. Blueprint grid (hero + sections) ----------
   Faint 44px graph-paper, mixed from --ink so one definition
   serves light and dark. Fades out toward the edges; sits
   under the content (z-0) and never receives pointer events. */
.section::before,
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}
.section::before {
  -webkit-mask-image: radial-gradient(95% 90% at 50% 0%, #000 0%, transparent 95%);
          mask-image: radial-gradient(95% 90% at 50% 0%, #000 0%, transparent 95%);
}
.hero::after {
  -webkit-mask-image: radial-gradient(75% 55% at 50% 12%, #000 0%, transparent 88%);
          mask-image: radial-gradient(75% 55% at 50% 12%, #000 0%, transparent 88%);
}
/* Content always above the grid */
.section > .container { position: relative; z-index: 1; }
.scroll-cue { position: relative; z-index: 1; }

/* ---------- 2. Spectrum color-coding: How it works ----------
   Each row takes one spectrum stop (same ramp, 5 steps).
   The number chip carries the color; the row tints on hover.
   .outcome--lead is a <div>, the five rows are <article>s,
   so nth-of-type addresses exactly the rows. */
.outcomes article:nth-of-type(1) { --tone: var(--teal); }
.outcomes article:nth-of-type(2) { --tone: var(--azure); }
.outcomes article:nth-of-type(3) { --tone: var(--indigo); }
.outcomes article:nth-of-type(4) { --tone: var(--violet); }
.outcomes article:nth-of-type(5) { --tone: var(--teal); }
/* Light theme: desaturate the mid stops a touch for readable chips
   (they double as text color on white). Dark keeps the full stops. */
.outcome__idx {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .32em .8em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone, var(--teal)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--teal)) 24%, transparent);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.outcome__idx b {
  color: var(--tone, var(--teal));
  -webkit-text-fill-color: var(--tone, var(--teal));
  background: none;
}
/* Light theme: the full-spectrum stops (teal 2.0:1, azure 3.6:1 on white)
   fail AA as text, so all five get darker text-safe variants of the same
   hues. Chip tints/borders still mix from --tone, so the hue family holds.
   Dark theme keeps the full-spectrum stops (they pop on near-black). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .outcomes article:nth-of-type(1) { --tone: #0a7a5e; }
  :root:not([data-theme="dark"]) .outcomes article:nth-of-type(2) { --tone: #0f6bd6; }
  :root:not([data-theme="dark"]) .outcomes article:nth-of-type(3) { --tone: #4a5fd0; }
  :root:not([data-theme="dark"]) .outcomes article:nth-of-type(4) { --tone: #5b2fd0; }
  :root:not([data-theme="dark"]) .outcomes article:nth-of-type(5) { --tone: #0a7a5e; }
}
:root[data-theme="light"] .outcomes article:nth-of-type(1) { --tone: #0a7a5e; }
:root[data-theme="light"] .outcomes article:nth-of-type(2) { --tone: #0f6bd6; }
:root[data-theme="light"] .outcomes article:nth-of-type(3) { --tone: #4a5fd0; }
:root[data-theme="light"] .outcomes article:nth-of-type(4) { --tone: #5b2fd0; }
:root[data-theme="light"] .outcomes article:nth-of-type(5) { --tone: #0a7a5e; }

/* Dark theme: the full-spectrum indigo/violet stops fail WCAG AA as TEXT
   (2.89 / 3.10 on the card). Lighten the text-facing tone for rows 3-4 only —
   borders/tints still mix from --tone, so the hue family holds. Teal/azure
   already pass. These are the *text* tone; decorative spectrum gradients
   elsewhere are unaffected. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .outcomes article:nth-of-type(3) { --tone: #6c85fb; }
  :root:not([data-theme="light"]) .outcomes article:nth-of-type(4) { --tone: #9b71fe; }
}
:root[data-theme="dark"] .outcomes article:nth-of-type(3) { --tone: #6c85fb; }
:root[data-theme="dark"] .outcomes article:nth-of-type(4) { --tone: #9b71fe; }

/* ---------- 3. Callout cards (agent-voice one-liners) ---------- */
.callout {
  margin-top: 1.15rem;
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tone, var(--teal)) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tone, var(--teal)) 20%, transparent);
  border-left: 3px solid var(--tone, var(--teal));
}
.callout__mark {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.6rem; line-height: .85;
  color: var(--tone, var(--teal));
}
.callout__text { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
/* The full-width row (05) keeps its callout at a readable measure */
.outcomes article:nth-of-type(5) .callout { max-width: 46rem; }

/* ---------- 4. Spectrum thread through How-it-works ----------
   Finout's gradient connector, verticalized: the spectrum runs
   down the section's center axis behind the panel, fading at
   both ends. The panel (opaque) covers the middle, so the
   thread reads as a beam entering and exiting the grid. */
.thread {
  position: absolute;
  left: 50%; top: 1.5rem; bottom: 1.5rem;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg,
    var(--teal) 0%,
    var(--azure) 34%,
    var(--indigo) 58%,
    var(--violet) 82%,
    transparent 99%);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

/* ---------- 4b. Row focus (finout's "Meet the agents" treatment) ----------
   Finout's reference makes the current agent's heading solid accent color
   while the others stay neutral. Here: ONE row is the spotlight at a time —
   on scroll its tone ring + beam + chip come alive; hovering a row steals
   the spotlight. :focus-visible = keyboard. Ring is a breathing box-shadow,
   never a border shift (no layout move, transform/opacity/shadow only). */
.outcome:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--tone, var(--teal)) 5%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--teal)) 34%, transparent);
}
.outcome.is-active {
  background: color-mix(in srgb, var(--tone, var(--teal)) 4%, var(--surface));
  animation: rowPulse 2.6s var(--ease-in-out) infinite;
}
.outcome.is-active .outcome__idx {
  background: color-mix(in srgb, var(--tone, var(--teal)) 14%, transparent);
  border-color: color-mix(in srgb, var(--tone, var(--teal)) 40%, transparent);
}
.outcome.is-active .callout { border-color: color-mix(in srgb, var(--tone, var(--teal)) 32%, transparent); }
@keyframes rowPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--teal)) 26%, transparent); }
  50%      { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--teal)) 46%, transparent),
                       0 0 34px -14px color-mix(in srgb, var(--tone, var(--teal)) 60%, transparent); }
}
/* "Speaking" dots in the active row's chip — a calm three-dot talk
   pattern, like a person mid-sentence while showing. Transform/opacity
   only; reduced motion leaves them as a static triple dot. */
.dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; }
.dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--tone, var(--teal));
  opacity: .35; transform: scale(.8);
}
.outcome.is-active .dots i { animation: dotTalk 1.3s var(--ease-in-out) infinite; }
.outcome.is-active .dots i:nth-child(2) { animation-delay: .18s; }
.outcome.is-active .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dotTalk {
  0%, 55%, 100% { opacity: .35; transform: scale(.8); }
  27%           { opacity: 1; transform: scale(1); }
}
/* No-JS / pre-spotlight fallback: row 01 keeps a calm static ring so the
   section still has an anchor. JS adds .rowfocus to the grid, switching it
   off the moment the spotlight is alive. */
.outcomes:not(.rowfocus) .outcome:nth-of-type(1) {
  background: color-mix(in srgb, var(--tone, var(--teal)) 4%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--teal)) 30%, transparent);
}

/* Beam that travels the thread — a spectrum pulse descending the center line,
   finout's wavy gradient connector, verticalized. */
.thread__pulse {
  position: absolute; left: -3px; top: 0;
  width: 8px; height: 110px;
  background: linear-gradient(180deg, transparent, var(--azure) 55%, transparent);
  filter: blur(1.5px);
  opacity: 0;
  animation: beamDrop 4.2s var(--ease-in-out) infinite;
}
@keyframes beamDrop {
  0%   { transform: translateY(-120px); opacity: 0; }
  10%  { opacity: .8; }
  60%  { opacity: .8; }
  100% { transform: translateY(calc(var(--thread-h, 1200px) + 140px)); opacity: 0; }
}
/* The #how thread only — the section provides the travel distance */
#how .thread { overflow: hidden; }

/* Heading keywords — finout's "agents" is emerald; ours are spectrum.
   .spec = the full ramp clipped to text; .spec--tone = the row's own stop. */
.spec {
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.spec--tone {
  background: none;
  color: var(--tone, var(--teal));
  -webkit-text-fill-color: var(--tone, var(--teal));
}

/* ---------- 5. Tactile press (finout's physical feel) ----------
   Hover lifts a card; :active presses it 1px back, like a key. */
@media (hover: hover) and (pointer: fine) {
  .outcome { transition: background var(--dur-2) ease; }
  .outcome:hover { background: color-mix(in srgb, var(--tone, var(--teal)) 4%, var(--surface)); }
  .outcome:hover .outcome__idx {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--tone, var(--teal)) 15%, transparent);
    border-color: color-mix(in srgb, var(--tone, var(--teal)) 38%, transparent);
  }
  .channel:active, .block:active, .feat:active { transform: translateY(-1px) scale(.995); }
}

/* ---------- 6. Back-to-top pill ---------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--nav-bg-solid);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--border-2);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.96);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
              border-color var(--dur-1) ease, visibility 0s linear var(--dur-2);
}
.to-top.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
              border-color var(--dur-1) ease;
}
.to-top svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { border-color: color-mix(in srgb, var(--teal) 55%, var(--border-2)); }
  .to-top:active { transform: scale(.94); }
}
@media (max-width: 560px) {
  .to-top { right: 1rem; bottom: 1rem; width: 40px; height: 40px; }
}

/* ---------- v3 reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .outcome, .outcome__idx, .channel, .block, .feat { transition: none; }
  .outcome.is-active { animation: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--teal)) 34%, transparent); }
  .outcome.is-active .dots i { animation: none; opacity: .5; transform: none; }
  .thread__pulse { display: none; }
}