/* ============================================================
   SIGHTLINE · product analytics, read as stories
   Art direction: precise, architectural, ice-blue daylight.
   Hand-written. No frameworks.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg: #F5F6F8;
  --ink: #16181D;
  --blue: #2B5CFF;
  --blue-deep: #1E46D6;
  --gray: #C9CED8;
  --card: #FFFFFF;
  --ice: #EDF2FE;

  --ink-72: rgba(22, 24, 29, .72);
  --ink-55: rgba(22, 24, 29, .55);
  --ink-38: rgba(22, 24, 29, .38);
  --line: rgba(22, 24, 29, .09);
  --line-soft: rgba(22, 24, 29, .06);
  --blue-line: rgba(43, 92, 255, .32);

  --font-d: 'Archivo', 'Inter', sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --ease-lift: cubic-bezier(.2, .9, .27, 1);

  --shadow-card:
    0 1px 2px rgba(22, 24, 29, .05),
    0 6px 18px -6px rgba(22, 30, 55, .08),
    0 24px 48px -18px rgba(22, 30, 55, .10);
  --shadow-pop:
    0 2px 4px rgba(22, 24, 29, .06),
    0 14px 32px -10px rgba(30, 50, 120, .16),
    0 48px 90px -28px rgba(30, 50, 120, .22);

  --nav-h: 72px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --content: 1360px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* NB: no `scroll-behavior: smooth` here on purpose. It fights programmatic
   scrollTo (and fullPage capture), producing stitch artifacts. Anchor
   smoothing is done in JS, which respects prefers-reduced-motion. */
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--blue); color: #fff; }

/* Drafting-paper grain. Procedural feTurbulence, no image request.
   Fixed so it reads as tooth in the paper rather than sliding with content. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .42;
  /* deliberately NO mix-blend-mode: a blended full-viewport fixed layer
     forces a full recomposite every frame and would cost the pinned 3D
     scroll its smoothness. Plain alpha over near-white reads the same. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--gray);
  border: 3px solid var(--bg);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
svg { display: block; }

/* The `hidden` attribute is only a UA rule, and ANY author `display` beats
   it. .chapters is display:grid, so the story panel never actually hid and
   picking "Raw events" rendered both panels stacked on top of each other. */
[hidden] { display: none !important; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-d);
  font-stretch: 125%;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.022em;
  font-size: clamp(2.7rem, 5.7vw, 5.35rem);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-d);
  font-stretch: 118%;
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -.018em;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-d);
  font-stretch: 110%;
  font-weight: 700;
  letter-spacing: -.008em;
  line-height: 1.15;
  font-size: 1.3rem;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 650;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-55);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.eyebrow--blue { color: var(--blue); }
.lede { font-size: 1.11rem; line-height: 1.65; color: var(--ink-72); max-width: 56ch; }
.mono-label {
  font-family: var(--font-b);
  font-variant-numeric: tabular-nums;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-38);
}

/* ---------- reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s var(--ease-out),
    transform .75s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.rule {
  height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-io);
  transition-delay: var(--d, 0s);
}
.rule.is-in { transform: scaleX(1); }

/* ---------- sheet rule ----------
   Every section opens on a drawn hairline with a registration tick and its
   sheet code. Gives the page an architectural cadence and, at the section
   joins, something to look at other than 240px of stacked padding. */
.sheet-rule { position: relative; padding-top: 24px; margin-bottom: clamp(40px, 4.6vw, 62px); }
.sheet-rule::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 1px; height: 11px; background: var(--blue);
}
.sheet-code {
  position: absolute; right: 0; bottom: 8px;
  font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-38);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: 10px;
  font-weight: 600; font-size: .95rem; letter-spacing: .002em;
  transition:
    transform .4s var(--ease-lift),
    box-shadow .4s var(--ease-lift),
    background-color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    color .25s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(.985); }
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg.arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow:
    0 1px 2px rgba(30, 70, 214, .3),
    0 8px 20px -6px rgba(43, 92, 255, .45),
    0 20px 44px -12px rgba(43, 92, 255, .35);
}
.btn-primary:hover {
  background: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(30, 70, 214, .3),
    0 14px 30px -8px rgba(43, 92, 255, .55),
    0 30px 60px -14px rgba(43, 92, 255, .4);
}
.btn-ghost {
  border: 1px solid rgba(22, 24, 29, .18);
  color: var(--ink); background: transparent;
}
.btn-ghost:hover {
  background: #fff; border-color: rgba(22, 24, 29, .34);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--ice); transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .5); }
.btn-sm { height: 42px; padding: 0 20px; font-size: .875rem; border-radius: 9px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .95rem; color: var(--blue);
}
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow span {
  background: linear-gradient(var(--blue), var(--blue)) no-repeat left 100% / 0 1px;
  transition: background-size .35s var(--ease-out);
  padding-bottom: 2px;
}
.link-arrow:hover span { background-size: 100% 1px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(245, 246, 248, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px -18px rgba(22, 30, 55, .18);
}
.nav-inner {
  max-width: var(--content); height: 100%;
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 36px;
}
/* read-through progress, drawn on the nav's own hairline. The site is an
   instrument, so it should tell you where in the drawing you are. */
.nav-prog {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--blue);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.nav.is-scrolled .nav-prog { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-word {
  font-family: var(--font-d); font-stretch: 125%; font-weight: 800;
  font-size: .95rem; letter-spacing: .2em; text-transform: uppercase;
}
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a {
  font-size: .9rem; font-weight: 550; color: var(--ink-72);
  padding: 10px 2px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat left calc(100% - 6px) / 0 1.5px;
  transition: color .25s var(--ease-out), background-size .35s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); background-size: 100% 1.5px; }
.nav-links a.is-active {
  color: var(--ink);
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 100% 1.5px;
}

/* ============================================================
   HERO · pinned scroll assembly
   --e = explode factor. 1 = exploded blueprint, 0 = assembled.
   ============================================================ */
.hero-track {
  position: relative;
  /* 250vh = 150vh of assembly scroll. Long enough that the stack settles
     deliberately, short enough that the track's tail isn't a huge empty
     field in a full-page render (a sticky pin can't fill it). */
  height: 250vh;
  /* blueprint sheet: visible in full-page render below the pin */
  background:
    radial-gradient(720px 480px at 66% 42%, rgba(43, 92, 255, .06), transparent 70%),
    linear-gradient(rgba(22, 24, 29, .05) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(22, 24, 29, .05) 1px, transparent 1px) 0 0 / 120px 100%,
    linear-gradient(rgba(22, 24, 29, .022) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(22, 24, 29, .022) 1px, transparent 1px) 0 0 / 24px 100%;
}
.hero-pin {
  --e: 1;
  /* --lay is the LAYOUT half of --e: where the scene parks and how big it
     is, plus the copy's fade. It tracks --e normally, but keeping it
     separate lets reduced-motion park the scene in its exploded position
     (copy visible beside it) while the stack itself renders flat and
     assembled. Driving both off --e alone meant --e:0 hid the entire hero
     headline from anyone with reduced motion on. */
  --lay: var(--e);
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  overflow: clip;
  display: flex; align-items: center;
  /* centre content between the nav and the manifest rail, not the raw box */
  padding-top: var(--nav-h);
  padding-bottom: 54px;
  background:
    radial-gradient(760px 500px at 66% 44%, rgba(43, 92, 255, .07), transparent 70%),
    linear-gradient(rgba(22, 24, 29, .05) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(22, 24, 29, .05) 1px, transparent 1px) 0 0 / 120px 100%,
    linear-gradient(rgba(22, 24, 29, .022) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(22, 24, 29, .022) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--bg);
  z-index: 1;
}

/* stage ruler lives on the track, revealed in full-page renders */
.hero-stages {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-stages li {
  position: absolute; right: 40px;
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  font-size: .66rem; letter-spacing: .16em; color: var(--ink-38);
  font-variant-numeric: tabular-nums;
}
.hero-stages li::after { content: ""; width: 34px; height: 1px; background: var(--gray); }

/* draw-in blueprint accents */
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-lines line, .hero-lines circle {
  stroke-dashoffset: var(--len);
  stroke-dasharray: var(--len);
  transition: stroke-dashoffset 1.3s var(--ease-io);
}
.is-loaded .hero-lines line, .is-loaded .hero-lines circle { stroke-dashoffset: 0; }
.hero-lines .plus { opacity: 0; transition: opacity .8s var(--ease-out) 1s; }
.is-loaded .hero-lines .plus { opacity: 1; }

/* The scene is absolutely centred on this box, not a grid column, so it can
   grow past the copy and settle dead-centre once the copy has cleared. */
.hero-grid {
  position: relative;
  width: 100%; max-width: var(--content);
  margin-inline: auto; padding-inline: var(--gutter);
}
.hero-copy { width: min(480px, 46%); }

/* Copy fades and lifts away as the dashboard assembles. The curve matters:
   the stack slides left as it flattens, so the copy has to be fully gone
   BEFORE the sidebar reaches it. At the old (--e - .42) * 3.2 the headline
   was still a 25% ghost at half assembly with the dashboard on top of it. */
.hero-copy {
  position: relative; z-index: 3;
  opacity: calc((var(--lay) - .58) * 4.4);
  transform: translateY(calc((1 - var(--lay)) * -52px));
}
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero-copy h1 { margin-bottom: 24px; }
.hero-sub { font-size: 1.09rem; color: var(--ink-72); max-width: 44ch; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }
.hero-specs { display: flex; gap: 22px; flex-wrap: wrap; }
.hero-specs span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 550; color: var(--ink-55);
  letter-spacing: .02em;
}
.hero-specs span::before { content: ""; width: 5px; height: 5px; background: var(--blue); }

/* entrance choreography */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-copy > * { opacity: 0; }
.is-loaded .hero-copy > * { animation: rise .75s var(--ease-out) both; }
.is-loaded .hero-copy .eyebrow { animation-delay: .05s; }
.is-loaded .hero-copy h1 { animation-delay: .13s; }
.is-loaded .hero-copy .hero-sub { animation-delay: .22s; }
.is-loaded .hero-copy .hero-ctas { animation-delay: .3s; }
.is-loaded .hero-copy .hero-specs { animation-delay: .38s; }

/* HUD readout. It's a build instrument, so it retires once the stack lands
   (it was colliding with the signals toast at low --e). */
.hud {
  position: absolute; top: calc(var(--nav-h) + 20px); right: var(--gutter);
  display: flex; gap: 26px; z-index: 3;
  opacity: clamp(0, (var(--e) - .05) * 3.5, 1);
}
.hud div { text-align: right; opacity: 0; }
.is-loaded .hud div { animation: rise .7s var(--ease-out) both; }
.is-loaded .hud div:nth-child(1) { animation-delay: .5s; }
.is-loaded .hud div:nth-child(2) { animation-delay: .56s; }
.is-loaded .hud div:nth-child(3) { animation-delay: .62s; }
.hud dt {
  font-size: .6rem; letter-spacing: .18em; color: var(--ink-38);
  text-transform: uppercase; margin-bottom: 2px;
}
.hud dd {
  font-size: .82rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hud dd em { color: var(--blue); font-style: normal; }

/* layer manifest rail: its own band at the foot of the pin, so it can
   never collide with the hero copy the way a floating legend did. */
.manifest {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  height: 54px;
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--gutter);
  border-top: 1px solid var(--line);
  background: linear-gradient(rgba(245, 246, 248, 0), rgba(245, 246, 248, .9) 60%);
  opacity: 0;
}
.is-loaded .manifest { animation: rise .7s var(--ease-out) .58s both; }
.manifest-list { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.manifest-list li {
  --lit: clamp(0, (1 - var(--e) - var(--i) * .11) * 8, 1);
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-size: .62rem; font-weight: 600; letter-spacing: .15em;
  color: var(--ink); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: calc(.34 + var(--lit) * .66);
  white-space: nowrap;
}
.manifest-list li i {
  width: calc(9px + var(--lit) * 13px); height: 1px;
  background: var(--blue);
  opacity: calc(.3 + var(--lit) * .7);
}
.manifest-list li em { color: var(--blue); font-style: normal; }

/* status cell cross-fades hint -> caption as the stack lands */
.manifest-status {
  position: relative; margin-left: auto;
  min-width: 210px; height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
}
.manifest-status > span {
  position: absolute; right: 0;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.scroll-hint {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-55);
  opacity: calc((var(--e) - .82) * 5.6);
}
.scroll-hint b { font-weight: 600; }
.scroll-hint i {
  width: 1px; height: 20px; background: var(--gray);
  overflow: hidden; position: relative;
}
.scroll-hint i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blue);
  animation: drip 1.8s var(--ease-io) infinite;
}
@keyframes drip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.hero-caption {
  font-size: .74rem; color: var(--ink-55); letter-spacing: .03em;
  opacity: calc((.2 - var(--e)) * 6);
}
.hero-caption::before {
  content: ""; width: 40px; height: 1px; background: var(--gray);
}

/* ---------- the 3D scene ----------
   --fit-e / --fit-a / --push are measured in JS on resize:
   exploded it sits in the gap right of the copy, assembled it grows and
   centres. Interpolated by --e, so one scroll value drives the whole move. */
.hero-scene {
  position: absolute; top: 50%; left: 50%;
  width: 960px; height: 620px;
  margin: -310px 0 0 -480px;
  z-index: 2;
  transform-origin: 50% 50%;
  transform:
    translateX(calc(var(--lay) * var(--push, 240px)))
    scale(calc(var(--fit-a, 1) + var(--lay) * (var(--fit-e, .78) - var(--fit-a, 1))));
}
.dash-scaler {
  position: relative;
  width: 960px; height: 620px;
  perspective: 2200px;
  perspective-origin: 50% 44%;
}
/* --px/--py: pointer parallax, fed by JS and scaled by --e so it only
   breathes while the stack is airborne and dies exactly on assembly. */
.stack {
  --px: 0; --py: 0;
  position: absolute; top: 0; left: 0;
  width: 960px; height: 620px;
  transform-origin: 50% 50%;
  transform:
    scale(calc(1 - var(--e) * .16))
    rotateX(calc(var(--e) * (42deg + var(--py) * 5deg)))
    rotateZ(calc(var(--e) * -11deg))
    rotateY(calc(var(--e) * var(--px) * 7deg))
    translateZ(calc(var(--e) * -30px));
  transform-style: preserve-3d;
  pointer-events: none;
  user-select: none;
}
.is-settled .stack { transform: none; }

.layer {
  position: absolute; inset: 0;
  transform: translateZ(calc(var(--z) * var(--e))) translateY(calc(var(--dy) * var(--e)));
  transform-style: flat;
  backface-visibility: hidden;
}
.is-settled .layer { transform: none; }

.layer-inner { position: absolute; inset: 0; opacity: 0; }
.is-loaded .layer-inner {
  animation: layerIn .8s var(--ease-out) both;
  animation-delay: calc(.28s + var(--li) * .07s);
}
@keyframes layerIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

/* The blueprint frame belongs to the CHROME layer only. Drawing it on all
   six turned the exploded state into stacked empty glass panes instead of
   dashboard parts in mid-air. */
.layer[data-chrome] .layer-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  box-shadow: 0 30px 60px -18px rgba(24, 38, 92, .3);
  opacity: calc(var(--e) * .9);
}
.layer[data-chrome] .layer-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  border: 1px solid var(--blue-line);
  background:
    linear-gradient(rgba(228, 237, 255, .14), rgba(228, 237, 255, .14)),
    linear-gradient(var(--blue) 0 0) no-repeat 14px 12px / 22px 1px;
  opacity: var(--e);
  pointer-events: none;
}

/* Data layers: the CARDS are the objects in flight. Their lift shadow and
   blue registration outline scale with --e, so altitude reads physically. */
.layer:not([data-chrome]) .dash-card {
  box-shadow:
    0 0 0 1px rgba(43, 92, 255, calc(var(--e) * .34)),
    0 1px 2px rgba(22, 24, 29, .05),
    0 calc(6px + var(--e) * 22px) calc(16px + var(--e) * 40px) calc(-8px - var(--e) * 10px)
      rgba(24, 38, 92, calc(.1 + var(--e) * .18));
}

/* dashed assembly spine through the layers */
.spine {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: calc(var(--e) * 420px);
  transform: translate(-50%, -50%) translateZ(calc(var(--e) * 140px)) rotateX(90deg);
  background: repeating-linear-gradient(to bottom, rgba(43, 92, 255, .55) 0 5px, transparent 5px 11px);
  opacity: calc(var(--e) * .9);
}
/* ground shadow while airborne */
.stack-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -7%;
  height: 12%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(24, 38, 92, .3), transparent 72%);
  transform: translateZ(-80px) scaleX(calc(.72 + var(--e) * .28));
  opacity: calc(var(--e) * .55);
  filter: blur(6px);
}

/* Settle flash. When the last layer lands, one light pass reads across the
   sheet: the drawing is complete. Fires again if you re-assemble. It sits
   outside .stack so it paints above every layer once they're all at z=0. */
.scan {
  position: absolute; inset: 0;
  border-radius: 14px; overflow: hidden;
  pointer-events: none; opacity: 0;
}
.scan::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(100deg,
    transparent, rgba(43, 92, 255, .10) 44%, rgba(255, 255, 255, .6) 56%, transparent);
  transform: translateX(-130%);
}
.is-settled .scan { opacity: 1; }
.is-settled .scan::before { animation: scan 1.15s var(--ease-io) forwards; }
@keyframes scan { from { transform: translateX(-130%); } to { transform: translateX(360%); } }

/* ---------- dashboard UI (design space 960x620) ---------- */
.dash-root { font-family: var(--font-b); color: var(--ink); line-height: 1.35; }
.dash-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 10px 24px -14px rgba(22, 30, 55, .12);
}

/* L1 chrome
   position:absolute is load-bearing. Without it `inset:0` is inert, the box
   collapses to its (all-absolute) children's height, and the panel renders
   with no radius, no border and no lift shadow: the assembled payoff had
   square corners and sat flat on the paper. */
.chrome {
  position: absolute; inset: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
/* Footprint slots on the base plate: the exploded state used to show a big
   empty white slab under the airborne cards. Now the frame carries a dashed
   registration outline for every part, so you read where each one lands.
   They fade out exactly as the real cards cover them. */
.slots { position: absolute; inset: 0; pointer-events: none; }
.slots i {
  position: absolute;
  border: 1px dashed rgba(43, 92, 255, .38);
  border-radius: 10px;
  opacity: calc(var(--e) * .9);
}
.slots i::after {
  content: attr(data-n);
  position: absolute; top: 6px; left: 8px;
  font-size: 8px; font-weight: 700; letter-spacing: .14em;
  color: rgba(43, 92, 255, .5);
  font-style: normal;
}
.chrome .side {
  position: absolute; top: 0; bottom: 0; left: 0; width: 190px;
  border-right: 1px solid var(--line-soft);
  background: #FBFCFD;
  padding: 18px 12px;
}
.side-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px 16px;
  font-family: var(--font-d); font-stretch: 120%;
  font-weight: 800; font-size: 12.5px; letter-spacing: .14em;
}
.side-nav { display: grid; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 9px; border-radius: 7px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-72);
}
.side-nav a svg { width: 14px; height: 14px; stroke: currentColor; }
.side-nav a.on { background: var(--ice); color: var(--blue); font-weight: 600; }
.side-label {
  font-size: 9px; letter-spacing: .18em; color: var(--ink-38);
  text-transform: uppercase; padding: 14px 9px 6px;
}
/* The sidebar ran ~290 design px of dead white between Settings and the
   workspace foot. The fix queue is what the story section links to, so it
   belongs here and it gives the assembled state something to read. */
.side-queue { margin-top: 10px; border-top: 1px solid var(--line-soft); }
.sq-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px; border-radius: 7px;
}
.sq-dot {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 4px;
  background: var(--gray); flex-shrink: 0;
}
.sq-dot.hot { background: var(--blue); box-shadow: 0 0 0 3px rgba(43, 92, 255, .14); }
.sq-name { font-size: 11px; font-weight: 600; letter-spacing: -.005em; }
.sq-sub { font-size: 9px; color: var(--ink-38); }

.side-foot {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--line-soft); padding-top: 12px;
  font-size: 11.5px; font-weight: 550; color: var(--ink-72);
}
.chrome .head {
  position: absolute; top: 0; left: 190px; right: 0; height: 56px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: #fff;
}
.head-title { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.head-crumb { font-size: 11px; color: var(--ink-38); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 7px;
  font-size: 11.5px; font-weight: 550; color: var(--ink-72);
  background: #fff;
}
.pill svg { width: 10px; height: 10px; stroke: currentColor; }
.avatars { display: flex; }
.avatars b {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff;
  background: var(--ice); color: var(--blue);
  font-size: 8.5px; font-weight: 700;
  display: grid; place-items: center;
  margin-left: -6px;
}
.avatars b:first-child { margin-left: 0; }
.avatars b.more { background: var(--ink); color: #fff; }
.chrome .canvas {
  position: absolute; top: 56px; left: 190px; right: 0; bottom: 0;
  background:
    linear-gradient(rgba(22, 24, 29, .025) 1px, transparent 1px) 0 0 / 100% 24px,
    #F7F8FA;
}

/* L2 metrics */
.kpi { padding: 13px 14px; }
.kpi-label { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 7px; }
.kpi-val {
  font-family: var(--font-d); font-stretch: 112%;
  font-size: 21px; font-weight: 750; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 3px;
}
.kpi-val small { font-size: 11px; color: var(--ink-38); font-weight: 550; }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 7px; padding: 2px 7px; border-radius: 20px;
  font-size: 9.5px; font-weight: 650;
  background: var(--ice); color: var(--blue-deep);
}
.kpi-delta.dim { background: #F0F1F4; color: var(--ink-55); }
.live-kpi { padding: 14px 16px; }
.live-kpi .kpi-val { font-size: 30px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 650; color: var(--blue); letter-spacing: .1em; }
.live-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulse 2s var(--ease-io) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 92, 255, .38); } 55% { box-shadow: 0 0 0 6px rgba(43, 92, 255, 0); } }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 10px; }
.spark i { flex: 1; background: var(--ice); border-radius: 2px 2px 0 0; }
.spark i.hi { background: var(--blue); }

/* L3 trends card */
.trend-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.trend-title { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.trend-legend { margin-left: auto; display: flex; gap: 12px; font-size: 10px; color: var(--ink-55); }
.trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend-legend i { width: 14px; height: 2px; background: var(--blue); border-radius: 2px; }
.trend-legend .prev i { background: var(--gray); }
.trend-svg { padding: 2px 10px 4px; }
.trend-x { display: flex; justify-content: space-between; padding: 0 18px 10px; font-size: 9px; color: var(--ink-38); font-variant-numeric: tabular-nums; }

/* L4 sessions card */
.sess-head { display: flex; align-items: center; padding: 14px 16px 8px; }
.sess-head .trend-title { flex: 1; }
.sess-head a { font-size: 10.5px; font-weight: 600; color: var(--blue); }
.sess-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--line-soft);
}
.sess-row b {
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  background: var(--ice); color: var(--blue-deep);
  flex-shrink: 0;
}
.sess-meta { flex: 1; min-width: 0; }
.sess-name { font-size: 11.5px; font-weight: 600; }
.sess-sub { font-size: 9.5px; color: var(--ink-55); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 650; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 20px;
  text-transform: uppercase;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip.reading { background: var(--ice); color: var(--blue-deep); }
.chip.stalled { background: #F0F1F4; color: var(--ink-55); }
.chip.done { background: var(--ink); color: #fff; }

/* L5 funnel card */
.fun-rows { padding: 6px 16px 14px; display: grid; gap: 9px; }
.fun-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; }
.fun-row span { font-size: 10.5px; font-weight: 550; color: var(--ink-72); }
.fun-row em { font-size: 10.5px; font-weight: 650; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.fun-bar { height: 8px; background: #EEF0F4; border-radius: 4px; overflow: hidden; }
.fun-bar i {
  display: block; height: 100%; width: var(--w);
  background: linear-gradient(90deg, var(--blue), #6E8DFF);
  border-radius: 4px;
}

/* L6 signals: floating annotations.
   The toast lands in the header's free span, clear of the date pill. At its
   old 596/348 it came down exactly on top of the header controls and buried
   them, which read as a layout bug rather than a landing. */
.toast {
  left: 516px; top: 5px; width: 296px;
  display: flex; gap: 10px; padding: 9px 12px;
  border-left: 3px solid var(--blue);
  box-shadow: var(--shadow-pop);
}
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 4px; flex-shrink: 0; animation: pulse 2.4s var(--ease-io) infinite; }
.toast-title { font-size: 11.5px; font-weight: 650; }
.toast-sub { font-size: 10px; color: var(--ink-55); }
/* Sits in the clear air ABOVE the trend line's low-left run and points down
   at the reticle. At its old 384/268 it lay across the rising line and hid
   the exact data it was annotating. */
.callout {
  left: 246px; top: 232px; width: 210px;
  padding: 10px 12px;
  box-shadow: var(--shadow-pop);
  border-color: rgba(43, 92, 255, .3);
}
.callout::after {
  content: ""; position: absolute; left: 99px; top: 100%;
  width: 1px; height: 16px;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 3px, transparent 3px 6px);
}
.callout-tag { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; color: var(--blue); text-transform: uppercase; margin-bottom: 3px; }
.callout-txt { font-size: 10.5px; font-weight: 550; }
.reticle {
  position: absolute; left: 334px; top: 302px; width: 22px; height: 22px;
}
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--blue); }
.reticle::before { left: 50%; top: -5px; bottom: -5px; width: 1px; }
.reticle::after { top: 50%; left: -5px; right: -5px; height: 1px; }
.reticle b {
  position: absolute; inset: 4px;
  border: 1px solid var(--blue); border-radius: 50%;
  background: rgba(43, 92, 255, .14);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { position: relative; padding-block: clamp(88px, 9.5vw, 132px); }
/* the story section already carries a top rule, so it doesn't need the
   full pad above, and the band below shouldn't double up on white */
#story { padding-bottom: clamp(72px, 7.5vw, 104px); }
.section-inner { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.section-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .h2 { margin-bottom: 18px; }
.band { background: #fff; border-block: 1px solid var(--line-soft); }
/* Drafting sheet: the feature cards were #FAFBFC on a #fff band, which is a
   1.5% tonal step. They read as nothing. Putting them on the paper field
   over a blueprint grid gives them the same white-card-on-canvas logic the
   product's own dashboard uses. */
.sheet {
  background:
    linear-gradient(rgba(22, 24, 29, .04) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(22, 24, 29, .04) 1px, transparent 1px) 0 0 / 120px 100%,
    var(--bg);
  border-block: 1px solid var(--line-soft);
}

/* ---------- proof strip ----------
   Built as a drafting register (hairline cells, tick marks, a numbered
   count) rather than a row of gray words floating in a tall white band.
   Same cell logic as the footer title block, so they rhyme. */
.proof { padding-block: 0; }
.proof-inner {
  max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(150px, .9fr) repeat(6, 1fr);
  align-items: stretch;
}
.proof-label {
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px 22px 26px 0;
  border-right: 1px solid var(--line);
  font-size: .74rem; color: var(--ink-55); line-height: 1.45;
}
.proof-label b {
  display: block; font-weight: 650; color: var(--ink);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 5px;
}
.proof-logos { display: contents; }
.proof-logos span {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 8px;
  border-right: 1px solid var(--line);
  font-family: var(--font-d); font-stretch: 112%;
  font-weight: 700; font-size: clamp(.82rem, 1.02vw, 1.02rem); letter-spacing: .005em;
  color: var(--ink-55);
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out);
  cursor: crosshair;
  white-space: nowrap;
}
.proof-logos span:last-child { border-right: 0; }
/* register tick, drawn on the cell's top edge */
.proof-logos span::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 7px; background: var(--gray);
  transition: height .35s var(--ease-out), background-color .35s var(--ease-out);
}
.proof-logos span:hover { color: var(--ink); background: rgba(43, 92, 255, .035); }
.proof-logos span:hover::before { height: 13px; background: var(--blue); }
.proof-logos span:hover svg { color: var(--blue); }
.proof-logos svg { width: 14px; height: 14px; flex-shrink: 0; transition: color .3s var(--ease-out); }

/* ---------- story section ---------- */
/* the head ran 780px wide and left half the row empty. The figure earns
   that space and states the product's whole claim as a picture. */
#story .section-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(250px, 300px);
  gap: clamp(32px, 5vw, 84px);
  align-items: end;
  justify-content: space-between;
}
.compress {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.compress figcaption {
  font-size: .6rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-38);
  margin-bottom: 14px;
}
.compress figcaption b { color: var(--blue); font-weight: 700; margin-right: 7px; }
/* the raw stream: a 1px-every-5px barcode, no markup, no image */
.cmp-raw {
  height: 34px; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--gray) 0 1px, transparent 1px 5px),
    linear-gradient(var(--ice), var(--ice));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cmp-lbl { font-size: .7rem; color: var(--ink-55); margin: 8px 0 0; }
.cmp-lbl b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
/* the narrowing: a drawn funnel from the stream's width to the chapters' */
/* NB: the taper is the clip-path, so borders on this box get clipped away
   with it. The fill has to carry the shape on its own. */
.cmp-link {
  height: 26px; margin: 10px 0;
  background: linear-gradient(rgba(43, 92, 255, .26), rgba(43, 92, 255, .07));
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.cmp-out { display: flex; gap: 5px; padding: 0 18%; }
.cmp-out i {
  flex: 1; height: 16px; border-radius: 3px;
  background: var(--gray);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease-lift);
  transition-delay: calc(.5s + var(--i) * 90ms);
}
.compress.is-in .cmp-out i { transform: scaleY(1); }
.cmp-out i.hot { background: var(--blue); }
.cmp-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-38);
}
.cmp-foot em {
  font-style: normal; font-family: var(--font-d); font-stretch: 118%;
  font-size: 1.05rem; font-weight: 750; letter-spacing: -.01em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.storyboard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.story-meta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 30px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--ink-55);
  font-variant-numeric: tabular-nums;
}
.story-meta b { color: var(--ink); font-weight: 650; }
.story-meta .sep { width: 1px; height: 14px; background: var(--line); }
.story-meta .chip { font-size: .62rem; }
/* segmented control: story vs the raw events it came from */
.seg {
  position: relative; margin-left: auto;
  display: flex; gap: 2px; padding: 3px;
  background: #F1F2F5;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
}
.seg-thumb {
  position: absolute; top: 3px; left: 3px;
  width: var(--tw, 62px); height: calc(100% - 6px);
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 4px 10px -4px rgba(22, 30, 55, .16);
  transform: translateX(var(--tx, 0px));
  transition: transform .42s var(--ease-lift), width .42s var(--ease-lift);
}
.seg button {
  position: relative; z-index: 1;
  height: 30px; padding: 0 13px;
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-55);
  border-radius: 7px;
  transition: color .3s var(--ease-out);
  white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { color: var(--ink); }

/* raw event log */
.rawlog { padding: 22px 30px 26px; }
.raw-head, .raw-row {
  display: grid; grid-template-columns: 108px 132px 1fr;
  gap: 16px; align-items: baseline;
}
.raw-head {
  font-size: .6rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-38);
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.raw-rows { border-bottom: 1px solid var(--line); }
.raw-row {
  padding: 7px 8px 7px 0;
  font: 500 .76rem/1.5 ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .25s var(--ease-out);
}
.raw-rows .raw-row:last-child { border-bottom: 0; }
.raw-row:hover { background: #FAFBFC; }
.raw-row time { color: var(--ink-38); }
.raw-row b { color: var(--ink); font-weight: 600; }
.raw-row span { color: var(--ink-55); word-break: break-word; }
.raw-row em { color: var(--blue-deep); font-style: normal; }
.raw-row.hot { background: var(--ice); margin-inline: -8px; padding-inline: 8px; border-radius: 4px; }
.raw-row.hot b { color: var(--blue-deep); }
.raw-row.hot:hover { background: #E3EBFE; }
.raw-foot { font-size: .82rem; color: var(--ink-55); margin-top: 14px; }
.raw-foot b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* panel crossfade */
[role="tabpanel"] { animation: panelIn .45s var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chapters {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 44px 30px 34px;
}
/* The rail must die on the LAST dot, not run past it. Dots sit at each
   1fr column's left edge, so the final dot centre lands at 80% + 3px.  */
.chapters::before {
  content: ""; position: absolute; left: 30px; right: calc(20% - 3px); top: 58px;
  height: 1px; background: var(--line);
}
.chapters .thread {
  position: absolute; left: 30px; right: calc(20% - 3px); top: 58px; height: 1px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease-io) .2s;
}
.chapters.is-in .thread { transform: scaleX(1); }
.chapter { position: relative; padding-top: 34px; }
.chapter::before {
  content: ""; position: absolute; top: 8px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gray);
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.chapter.is-in::before { border-color: var(--blue); background: #fff; }
.chapter.flag::after {
  content: "PLOT POINT";
  position: absolute; top: 0; left: 24px;
  font-size: .56rem; font-weight: 700; letter-spacing: .16em;
  color: var(--blue);
}
.chapter time { display: block; font-size: .68rem; color: var(--ink-38); font-variant-numeric: tabular-nums; margin-bottom: 7px; letter-spacing: .06em; }
.chapter-tag {
  display: inline-block; margin-bottom: 9px;
  font-size: .6rem; font-weight: 700; letter-spacing: .15em;
  color: var(--ink-55);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 3px 9px;
}
.chapter.flag .chapter-tag { color: var(--blue); border-color: rgba(43, 92, 255, .4); background: var(--ice); }
.chapter p { font-size: .875rem; line-height: 1.5; color: var(--ink-72); max-width: 21ch; }
.chapter p b { color: var(--ink); font-weight: 600; }
.story-foot {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 30px;
  border-top: 1px solid var(--line-soft);
  background: #FBFCFD;
}
.story-foot p { font-size: .9rem; color: var(--ink-72); flex: 1; min-width: 260px; }
.story-foot p b { color: var(--ink); }

/* ---------- features ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}
.feature {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease-lift), box-shadow .5s var(--ease-lift), border-color .4s var(--ease-out);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(43, 92, 255, .28);
  box-shadow: var(--shadow-pop);
}
/* registration bracket: opens up on hover instead of just recolouring */
.feature::after {
  content: ""; position: absolute; top: 18px; right: 18px;
  width: 9px; height: 9px;
  border-top: 1px solid var(--gray); border-right: 1px solid var(--gray);
  transition:
    border-color .3s var(--ease-out),
    width .45s var(--ease-lift), height .45s var(--ease-lift),
    transform .4s var(--ease-out);
}
.feature:hover::after {
  border-color: var(--blue);
  width: 20px; height: 20px;
  transform: translate(2px, -2px);
}
/* a hairline sweeps the card's top edge on hover */
.feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .6s var(--ease-out);
}
.feature:hover::before { transform: scaleX(1); }
.feature .h3 { margin: 0 0 10px; }
.feature > p { font-size: .93rem; color: var(--ink-72); max-width: 52ch; }
.feature-idx {
  font-size: .66rem; font-weight: 700; letter-spacing: .18em;
  color: var(--blue); margin-bottom: 16px; display: block;
  font-variant-numeric: tabular-nums;
}
.f-chart { grid-column: span 7; }
.f-chapters { grid-column: span 5; }
.f-dropoff { grid-column: span 5; }
.f-signals { grid-column: span 7; }

/* the live chart demo */
.chart-wrap { position: relative; margin-top: 22px; }
.chart-svg { width: 100%; height: auto; }
.chart-svg .gridline { stroke: rgba(22, 24, 29, .07); stroke-width: 1; }
.chart-svg .gridlabel { font-size: 10px; fill: var(--ink-38); font-family: var(--font-b); }
.chart-svg .xlabel { font-size: 10px; fill: var(--ink-38); font-family: var(--font-b); }
.chart-svg .line-cur { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line-prev { fill: none; stroke: var(--gray); stroke-width: 1.8; stroke-dasharray: 5 6; stroke-linecap: round; }
.chart-svg .area { fill: url(#areaFill); opacity: 0; transition: opacity 1s var(--ease-out) .9s; }
.chart-wrap.is-drawn .area { opacity: 1; }
.chart-svg .pt { fill: #fff; stroke: var(--blue); stroke-width: 2; opacity: 0; transition: opacity .4s var(--ease-out); }
.chart-wrap.is-drawn .pt { opacity: 1; }
.chart-cursor { position: absolute; top: 0; bottom: 30px; width: 1px; background: var(--blue); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); }
.chart-dot {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue); border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(43, 92, 255, .5);
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out);
}
.chart-tip {
  position: absolute; z-index: 4;
  min-width: 168px;
  background: var(--ink); color: #fff;
  border-radius: 10px; padding: 11px 13px;
  font-size: .78rem; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity .25s var(--ease-out);
  box-shadow: 0 18px 44px -12px rgba(10, 14, 30, .5);
}
.chart-tip.flip { transform: translate(-88%, -12px); }
.chart-tip b { font-size: .82rem; }
.chart-tip .row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.chart-tip .row i { width: 10px; height: 2px; border-radius: 2px; background: var(--blue); }
.chart-tip .row.prev i { background: var(--gray); }
.chart-tip .row em { margin-left: auto; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; padding-left: 14px; }
.chart-tip .sess { color: rgba(255, 255, 255, .6); font-size: .7rem; margin-top: 3px; }
.chart-hit { position: absolute; inset: 0; cursor: crosshair; }

/* chapters mini visual */
.mini-chapters { margin-top: 26px; display: grid; gap: 8px; }
.mini-row {
  display: flex; align-items: center; gap: 10px;
  background: #F6F8FC; border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 9px 13px;
  font-size: .8rem; font-weight: 550; color: var(--ink-72);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.is-in .mini-row { opacity: 1; transform: none; }
.mini-row b {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-38); font-variant-numeric: tabular-nums;
}
.mini-row.flag { border-color: rgba(43, 92, 255, .4); background: var(--ice); color: var(--blue-deep); }
.mini-row.flag b { color: var(--blue); }
.mini-count { font-size: .72rem; color: var(--ink-38); margin-top: 10px; }

/* drop-off mini funnel */
.mini-funnel { margin-top: 26px; display: grid; gap: 12px; }
.mf-row { display: grid; grid-template-columns: 86px 1fr 40px; gap: 12px; align-items: center; font-size: .8rem; }
.mf-row span { color: var(--ink-72); font-weight: 550; }
.mf-row em { font-style: normal; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.mf-bar { height: 10px; border-radius: 5px; background: #EDEFF3; overflow: hidden; }
.mf-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blue), #6E8DFF);
  border-radius: 5px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-io);
  transition-delay: calc(var(--i) * 120ms);
}
.is-in .mf-bar i { transform: scaleX(var(--w)); }
.mf-note { font-size: .72rem; color: var(--ink-38); margin-top: 8px; }
.mf-note b { color: var(--blue); font-weight: 650; }

/* signals mock */
.mini-signal {
  margin-top: 26px;
  background: #F7F9FD; border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 16px 18px;
}
.ms-head { display: flex; align-items: center; gap: 9px; font-size: .84rem; font-weight: 650; }
.ms-head::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 2.2s var(--ease-io) infinite; }
.ms-sub { font-size: .78rem; color: var(--ink-55); margin: 5px 0 12px; }
.ms-sessions { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-sessions i {
  font-style: normal; font-size: .68rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 8px; color: var(--ink-72); background: #fff;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
  cursor: crosshair;
}
.ms-sessions i:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* ---------- stats ribbon ---------- */
.ribbon { border-block: 1px solid var(--line-soft); background: #fff; }
.ribbon-inner {
  max-width: var(--content); margin-inline: auto; padding: 44px var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
/* register cells, same hairline logic as the proof strip and title block */
.stat { position: relative; padding-right: 28px; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 32px; }
.stat::before {
  content: ""; position: absolute; top: -44px; left: 0;
  width: 1px; height: 9px; background: var(--gray);
}
.stat:first-child::before { display: none; }
.stat b {
  display: block;
  font-family: var(--font-d); font-stretch: 122%;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 780; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat b em { color: var(--blue); font-style: normal; }
/* MUST stay a child selector: a bare `.stat span` also matched the counter
   span inside <b> and, at equal specificity, shrank it to .82rem. */
.stat > span { font-size: .82rem; color: var(--ink-55); }

/* ---------- pricing ---------- */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; align-items: stretch;
}
.plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 30px 30px;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-lift), box-shadow .5s var(--ease-lift), border-color .4s var(--ease-out);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: rgba(22, 24, 29, .16); }
.plan-name { font-family: var(--font-d); font-stretch: 118%; font-weight: 750; font-size: 1.05rem; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.plan-for { font-size: .84rem; color: var(--ink-55); margin: 6px 0 22px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.plan-price b {
  font-family: var(--font-d); font-stretch: 124%;
  font-size: 3rem; font-weight: 800; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.plan-price span { font-size: .8rem; color: var(--ink-55); }
.plan-bill { font-size: .72rem; color: var(--ink-38); margin-bottom: 24px; }
.plan ul { list-style: none; display: grid; gap: 11px; margin-bottom: 30px; }
.plan li { display: flex; gap: 10px; font-size: .875rem; color: var(--ink-72); }
.plan li svg { flex-shrink: 0; margin-top: 4px; }
.plan .btn { margin-top: auto; }
.plan-hot {
  border: 1.5px solid var(--blue);
  box-shadow: var(--shadow-pop);
  background: linear-gradient(180deg, #FDFDFF, #fff);
}
.plan-hot:hover { border-color: var(--blue); transform: translateY(-8px); }
.plan-tag {
  position: absolute; top: -13px; left: 30px;
  background: var(--blue); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  padding: 5px 12px; border-radius: 20px;
  box-shadow: 0 6px 16px -4px rgba(43, 92, 255, .5);
}
.pricing-note { text-align: center; font-size: .82rem; color: var(--ink-55); margin-top: 34px; }

/* ---------- final CTA + footer (ink) ---------- */
.cta {
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(43, 92, 255, .16), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 120px 100%,
    var(--ink);
  color: #fff;
  text-align: center;
  padding-block: clamp(100px, 11vw, 168px);
  position: relative; overflow: clip;
}
.cta .eyebrow { color: rgba(255, 255, 255, .55); }
.cta .display { font-size: clamp(2.4rem, 4.6vw, 4.3rem); margin: 22px auto 20px; max-width: 17ch; }
.cta p { color: rgba(255, 255, 255, .64); max-width: 46ch; margin: 0 auto 38px; font-size: 1.05rem; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta .fine { margin-top: 26px; font-size: .76rem; color: rgba(255, 255, 255, .42); }
.cta ::selection { background: #fff; color: var(--ink); }
.cta .corner {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid rgba(43, 92, 255, .6);
  pointer-events: none;
}
.cta .corner.tl { top: 28px; left: 28px; border-right: 0; border-bottom: 0; }
.cta .corner.tr { top: 28px; right: 28px; border-left: 0; border-bottom: 0; }
.cta .corner.bl { bottom: 28px; left: 28px; border-right: 0; border-top: 0; }
.cta .corner.br { bottom: 28px; right: 28px; border-left: 0; border-top: 0; }

footer {
  background: var(--ink); color: rgba(255, 255, 255, .62);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
footer ::selection { background: #fff; color: var(--ink); }
.titleblock {
  max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.titleblock div {
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 22px 18px 0;
}
.titleblock div + div { padding-left: 22px; }
.titleblock div:last-child { border-right: 0; }
.titleblock dt { font-size: .58rem; letter-spacing: .2em; color: rgba(255, 255, 255, .34); text-transform: uppercase; margin-bottom: 3px; }
.titleblock dd { font-size: .78rem; font-weight: 550; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.footer-main {
  max-width: var(--content); margin-inline: auto; padding: 56px var(--gutter) 46px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  border-block: 1px solid rgba(255, 255, 255, .08);
}
.footer-brand p { font-size: .875rem; max-width: 30ch; margin-top: 16px; line-height: 1.6; }
.footer-col h4 {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .4); font-weight: 650; margin-bottom: 16px;
}
.footer-col a {
  display: inline-block; font-size: .875rem; padding: 6px 0;
  color: rgba(255, 255, 255, .66);
  background: linear-gradient(#fff, #fff) no-repeat left calc(100% - 4px) / 0 1px;
  transition: color .25s var(--ease-out), background-size .3s var(--ease-out);
}
.footer-col a:hover { color: #fff; background-size: 100% 1px; }
.footer-col ul { list-style: none; }
.footer-bottom {
  max-width: var(--content); margin-inline: auto; padding: 22px var(--gutter) 30px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  font-size: .76rem; color: rgba(255, 255, 255, .4);
}
.footer-bottom .legal { display: flex; gap: 18px; }
.footer-bottom a { color: rgba(255, 255, 255, .5); transition: color .25s var(--ease-out); padding: 6px 0; }
.footer-bottom a:hover { color: #fff; }
.credit { margin-left: auto; }
.credit a { color: rgba(255, 255, 255, .66); border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 1px; }
.credit a:hover { color: #fff; border-color: #fff; }

/* ---------- crosshair cursor overlay ---------- */
.crosshair { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out); }
.crosshair.on { opacity: 1; }
.cx-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(43, 92, 255, .34); }
.cx-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(43, 92, 255, .34); }
.cx-r {
  position: absolute; width: 13px; height: 13px;
  border: 1px solid var(--blue);
  transform: translate(-50%, -50%);
  background: rgba(245, 246, 248, .5);
}
.cx-t {
  position: absolute;
  transform: translate(14px, 14px);
  font-size: .6rem; letter-spacing: .12em; color: var(--blue);
  font-variant-numeric: tabular-nums;
  background: rgba(245, 246, 248, .8);
  padding: 2px 6px;
  white-space: nowrap;
}
[data-crosshair] { cursor: crosshair; }
[data-crosshair] a, [data-crosshair] button { cursor: pointer; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(360px, 420px) 1fr; }
  .features-grid { grid-template-columns: repeat(6, 1fr); }
  .f-chart, .f-chapters, .f-dropoff, .f-signals { grid-column: span 6; }
}

@media (max-width: 860px) {
  .hero-track { height: auto; }
  .hero-pin {
    position: relative; height: auto; min-height: 0;
    padding: calc(var(--nav-h) + 56px) 0 64px;
  }
  .manifest { display: none; }
  .hero-copy { opacity: 1; transform: none; width: auto; }

  /* No pin on mobile, and no cropped screenshot either. Scaling all 960px of
     design space into ~350 renders 12px UI text at 4px (mush), and panning to
     a crop window sliced the chart legend and the plot-point callout in half.
     Instead the layers collapse with `display: contents` so every dash-card
     becomes a direct grid item and the dashboard REFLOWS into a real mobile
     stack: 2x2 metrics, then the trend chart, then the funnel. Native type
     sizes, nothing clipped, and it's the same markup. */
  .hero-scene {
    position: relative; top: auto; left: auto;
    margin: 34px 0 0; width: 100%; height: auto;
    aspect-ratio: auto;
    transform: none;
  }
  .dash-scaler {
    position: static;
    width: auto; height: auto;
    perspective: none;
  }
  .stack {
    position: static;
    width: auto; height: auto;
    transform: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .layer, .layer-inner { display: contents; }
  .dash-card {
    position: static;
    width: auto !important; height: auto !important;
    box-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 20px -12px rgba(22, 30, 55, .14) !important;
  }
  /* chrome and the floating annotations are desktop-only: they have no
     meaning once the thing is a flat list. Sessions and the live counter
     drop out to keep the hero a screen tall, not three. */
  /* mobile applies .is-settled statically, which would fire the settle
     flash over a reflowed grid it was never composed for */
  .layer[data-chrome], .toast, .callout, .reticle,
  .live-kpi, .sess-card, .scan { display: none; }
  .trend-card, .fun-card { grid-column: span 2; }
  .kpi-val { font-size: 19px; }
  .trend-svg { padding: 2px 6px 4px; }
  .hud, .hero-stages, .spine, .stack-shadow { display: none; }
  /* the 7-cell register can't hold six nowrap wordmarks at 390px: it blew
     the body out to 806px wide. Two columns, borders re-cut to suit. */
  .proof-inner { grid-template-columns: 1fr 1fr; }
  .proof-label {
    grid-column: 1 / -1;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 24px 0 18px;
  }
  .proof-logos span { justify-content: flex-start; padding: 18px 6px; }
  .proof-logos span:nth-child(odd) { border-right: 0; padding-left: 14px; }
  .proof-logos span:nth-child(-n+5) { border-bottom: 1px solid var(--line); }
  .proof-logos span::before { left: 14px; }
  .proof-logos span:nth-child(odd)::before { left: 28px; }

  .chapters { grid-template-columns: 1fr; gap: 4px; padding: 26px 22px; }
  .chapters::before, .chapters .thread { left: 28px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; }
  .chapters .thread { transform: scaleY(0); transform-origin: top; }
  .chapters.is-in .thread { transform: scaleY(1); }
  .chapter { padding: 14px 0 14px 42px; }
  .chapter::before { top: 16px; left: 22px; }
  .chapter.flag::after { left: 42px; top: 0; }
  .chapter p { max-width: none; }
  .story-meta { padding: 18px 22px; gap: 12px; }
  .story-foot { padding: 18px 22px; }
  #story .section-head { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .compress { max-width: 420px; }
  .ribbon-inner { grid-template-columns: repeat(2, 1fr); row-gap: 30px; padding-block: 36px; }
  /* the register only works while the cells share a row */
  .stat { padding-right: 16px; }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 26px; }
  .stat::before { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .plan-hot:hover { transform: translateY(-5px); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock div:nth-child(2) { border-right: 0; }
  .titleblock div:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .08); padding-left: 0; }
  .titleblock div:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .titleblock div:nth-child(3) { padding-right: 22px; }
  .crosshair { display: none; }

  /* ---- touch targets: everything tappable clears 44px ---- */
  .btn-sm { height: 44px; }
  .seg button { height: 44px; padding: 0 16px; }
  .brand { padding: 10px 0; }
  .skip-link { padding: 12px 18px; }
  .link-arrow { padding: 9px 0; }
  .footer-col a { padding: 11px 0; }
  .footer-bottom a { padding: 13px 0; }
  /* the credit keeps its underline tight to the text, so it gets its tap
     area from a pseudo-element instead of padding the box open */
  .credit a { position: relative; }
  .credit a::after { content: ""; position: absolute; inset: -12px -4px; }
}

@media (max-width: 620px) {
  .nav-links { display: none; }
  .display { font-size: clamp(2.35rem, 10.6vw, 2.8rem); }
  .hero-ctas .btn { flex: 1; min-width: 200px; }
  .proof-inner { flex-direction: column; align-items: flex-start; }
  .proof-label { max-width: none; }
  .features-grid { gap: 16px; }
  .feature { padding: 24px 20px; }
  .footer-main { grid-template-columns: 1fr; }
  .credit { margin-left: 0; }
  .chart-tip { min-width: 148px; font-size: .72rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Static hero: no pin, no track to scroll through, and --lay:1 parks the
     (already-flat) dashboard where the exploded state sat, so the copy keeps
     its half of the frame instead of being faded to zero by --e:0. */
  .hero-track { height: 100vh; }
  .hero-pin { position: relative; --lay: 1; }
  .hero-copy { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .rule { transform: scaleX(1); }
  .hero-copy > *, .layer-inner, .hud div { opacity: 1; animation: none !important; }
  .hero-lines line, .hero-lines circle { stroke-dashoffset: 0; }
  .hero-lines .plus { opacity: 1; }
  .mini-row, .chart-svg .pt, .chart-svg .area { opacity: 1; transform: none; }
  .mf-bar i { transform: scaleX(var(--w)); }
  .chapters .thread { transform: none; }
  .scroll-hint { display: none; }
  /* pass-2 additions: land them in their finished state, no motion */
  .cmp-out i { transform: scaleY(1); }
  .scan { display: none; }
  .feature::before { transform: scaleX(0); }
  .live-dot::before, .toast-dot, .ms-head::before { animation: none !important; }
}