/* =========================================================================
   AuraCrawl — single stylesheet.

   IDENTITY: aurora-lit glass.
   - The page sits on a deep neutral ground with a slow aurora field behind it
     (three heavily-diffused blooms) plus fine film grain. Nothing is flat.
   - Surfaces are translucent glass: a white-alpha fill, a hairline white-alpha
     border, backdrop blur, and — the part that actually reads as glass — a
     specular top edge (inset highlight) catching the light above it.
   - Depth comes from stacked translucency, not from drop shadows.
   - Chartreuse is the single signal colour: focus, live state, confirmation,
     one primary action. It is never used as a gradient wash.
   - Geometry is softly rounded (14px panels, 10px controls). Consistent, so
     the roundness reads as a decision rather than a default.

   All decoration is CSS. The only asset the page loads is the typeface.
   ========================================================================= */

/* ---------- Tokens ----------
   Colour lives in channel triplets (--*-rgb) so every alpha variant across the
   sheet follows one value. The palette itself is generated into css/theme.css
   from src/data/themes.js — nothing below hardcodes a colour literal.
   ---------- */
:root {
  /* Palette — every value here is overridden by css/theme.css. Defaults keep
     the sheet standalone if the theme file is ever missing. */
  --shell-rgb: 18 7 9;
  --panel-rgb: 28 14 15;
  --tint-rgb: 255 222 214;
  --accent-rgb: 219 98 52;
  --accent-2-rgb: 150 30 52;
  --danger-rgb: 255 138 107;

  --bg: #120709;
  --bg-deep: #0b0406;
  --ink: #f4e8e4;
  --ink-bright: #ddd0cd;
  --ink-dim: #c6b9b6;
  --ink-mute: #9b8a8c;
  --ink-faint: #5c6270;
  --code-ink: #cdc0bd;
  --accent: #DB6234;
  --accent-hi: #E87C4C;
  --accent-deep: #8E3A14;
  --accent-2: #C4304A;
  --accent-2-deep: #7a1420;
  --on-accent: #1c0603;
  --tint-hi: #F6E4DC;
  --data-num: #dcc39a;
  --data-bool: #e39aa4;
  --danger: #ff8a6b;
  --danger-hi: #ff9aa8;
  --danger-dim: #c99a9c;

  /* Derived — these follow the palette automatically. */
  --glass: rgb(var(--tint-rgb) / 0.05);
  --glass-2: rgb(var(--tint-rgb) / 0.08);
  --glass-3: rgb(var(--tint-rgb) / 0.1);
  --glass-line: rgb(var(--tint-rgb) / 0.11);
  --glass-line-hi: rgb(var(--tint-rgb) / 0.2);
  --glass-solid: rgb(var(--panel-rgb) / 0.8);
  /* The surface a panel's glass sheen sits on. */
  --panel-base: var(--panel-base);
  --blur: blur(24px) saturate(1.3);
  --specular: inset 0 1px 0 rgb(var(--tint-rgb) / 0.08);
  --lift: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
  /* Interaction colour. Defaults to the accent, so existing themes are
     unchanged; a theme may point it elsewhere so that pointing at something
     is what reveals colour. */
  --hover: var(--accent);
  --hover-rgb: var(--accent-rgb);
  /* The colour a panel adopts while the pointer is on it. --signal-hi is the
     same signal on dark surfaces, where a paper-legible value goes muddy. */
  --signal: var(--accent);
  --signal-rgb: var(--accent-rgb);
  --signal-hi: var(--signal);
  --signal-hi-rgb: var(--signal-rgb);
  /* Structural grid behind the hero — inks flip with the mode. */
  --grid-dot: rgb(var(--tint-rgb) / 0.24);
  --grid-line: rgb(var(--tint-rgb) / 0.06);
  --hover-glass: rgb(var(--hover-rgb) / 0.12);
  --hover-line: rgb(var(--hover-rgb) / 0.4);
  --accent-glass: rgb(var(--accent-rgb) / 0.1);
  --accent-line: rgb(var(--accent-rgb) / 0.28);
  --accent-2-line: rgb(var(--accent-2-rgb) / 0.3);
  --accent-2-glass: rgb(var(--accent-2-rgb) / 0.1);
  --aurora-1: rgb(var(--accent-rgb) / 0.085);
  --aurora-2: rgb(var(--accent-2-rgb) / 0.075);
  --aurora-3: rgb(var(--accent-2-rgb) / 0.065);

  --nav-h: 68px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --container: 1200px;

  /* Three faces, three jobs. Display for headings and figures (it has the
     character prose does not need), Geist for body copy (neutral, excellent
     small), Geist Mono for labels, code and anything tabular. */
  --display: 'Space Grotesk', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  margin: 0 0 0.5em; line-height: 1.08; font-family: var(--display);
  font-weight: 500; letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 500; letter-spacing: -0.042em; }
h2 { font-size: clamp(1.62rem, 3.2vw, 2.35rem); letter-spacing: -0.035em; }
h3 { font-size: 1.08rem; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
code, pre { font-family: var(--mono); }
::selection { background: rgb(var(--accent-rgb) / 0.24); color: #fff; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 26px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 22px; top: 0; transform: translateY(-130%);
  z-index: 200; background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Ambient: aurora field + grain ---------- */
/* Aurora. Fixed, heavily diffused, drifting on a long cycle. */
body::before {
  content: ''; position: fixed; inset: -25%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(34% 40% at 18% 12%, var(--aurora-1), transparent 68%),
    radial-gradient(38% 44% at 82% 26%, var(--aurora-2), transparent 70%),
    radial-gradient(40% 42% at 52% 82%, var(--aurora-3), transparent 72%);
  filter: blur(34px);
  /* Amplitude carries the motion, not brightness: the layer stays under 8%
     opacity but travels far enough that the page never looks like a still. */
  animation: auroraDrift 34s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0% { transform: translate3d(-4%, 2%, 0) scale(1) rotate(0deg); }
  33% { transform: translate3d(5%, -4%, 0) scale(1.18) rotate(4deg); }
  66% { transform: translate3d(-2%, 5%, 0) scale(1.08) rotate(-3deg); }
  100% { transform: translate3d(6%, -2%, 0) scale(1.22) rotate(2deg); }
}
/* Grain. A tiny inline SVG turbulence tile — stops large flat areas from
   banding, and keeps the glass from looking like plastic. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Glass primitive ----------
   Everything panel-like shares this. The specular top edge is what sells it. */
.cap-card, .uc-card, .why-card, .incl-card, .proc-card, .faq-item,
.code-card, .request-card, .practice-card, .fact-card, .scope-form,
.step, .platform-row, .related-card, .step-viz, .cta-inner, .browser-card, .mega {
  /* Sheen layer over a semi-solid base: keeps the glass read while
     guaranteeing text contrast independent of the backdrop. */
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}

/* ---------- Primitives ---------- */
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.15rem;
}
.kicker::before {
  content: ''; width: 16px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.badge {
  display: inline-block;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--accent-glass);
  padding: 4px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  white-space: nowrap;
}

.lede { color: var(--ink-dim); font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 60ch; }
.prose { max-width: 70ch; }
.prose p { color: var(--ink-dim); }
.intro-lead { color: var(--ink) !important; font-size: 1.12rem; line-height: 1.56; }
.prose code {
  color: var(--accent); background: var(--accent-glass);
  border: 1px solid var(--accent-line);
  padding: 1px 6px; border-radius: var(--radius-xs); font-size: 0.84em;
}
.h3-like { font-size: 1.3rem; margin-bottom: 1.5rem; }
.ph { font-family: var(--mono); font-size: 0.84em; color: var(--ink-mute); }

/* Buttons. Primary is the one solid object on the page — it should look lit. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out), color 0.2s;
}
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.5), 0 10px 26px -16px rgb(var(--accent-rgb) / 0.4),
              inset 0 1px 0 rgb(var(--tint-rgb) / 0.42);
}
.btn-primary:hover {
  background: var(--accent-hi); transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.65), 0 14px 34px -16px rgb(var(--accent-rgb) / 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:disabled { background: var(--accent-deep); color: var(--on-accent); box-shadow: none; cursor: progress; transform: none; }
.btn-ghost {
  border-color: var(--glass-line-hi); color: var(--ink);
  background: var(--glass); box-shadow: var(--specular);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.btn-ghost:hover { background: var(--glass-2); border-color: var(--hover-line); color: var(--hover); transform: translateY(-1px); }

.text-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
}
.text-link::after {
  content: ''; height: 1px; width: 0;
  background: var(--accent); transition: width 0.3s var(--ease-out);
}
.text-link:hover::after { width: 14px; }

.section { padding: clamp(64px, 8vw, 108px) 0; position: relative; }
.section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-line) 22%, var(--glass-line) 78%, transparent);
}
/* Alternate sections are a *lighter* pane of glass, not a darker box. */
.section-alt { background: rgba(255, 255, 255, 0.016); }
.section-head { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 50px); }
.section-more { margin-top: 2rem; }
.inline-note { margin-top: 1.8rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-dim); font-size: 0.9rem; }

/* ---------- Entrance motion: one curve, staggered ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.cap-strip .reveal:nth-child(2), .uc-grid .reveal:nth-child(2), .why-grid .reveal:nth-child(2),
.incl-grid .reveal:nth-child(2), .stepper .reveal:nth-child(2), .proc-grid .reveal:nth-child(2) { transition-delay: 90ms; }
.cap-strip .reveal:nth-child(3), .uc-grid .reveal:nth-child(3), .why-grid .reveal:nth-child(3),
.incl-grid .reveal:nth-child(3), .stepper .reveal:nth-child(3), .proc-grid .reveal:nth-child(3) { transition-delay: 180ms; }
.cap-strip .reveal:nth-child(4), .uc-grid .reveal:nth-child(4), .why-grid .reveal:nth-child(4),
.incl-grid .reveal:nth-child(4) { transition-delay: 270ms; }
.uc-grid .reveal:nth-child(5), .incl-grid .reveal:nth-child(5) { transition-delay: 360ms; }
.uc-grid .reveal:nth-child(6), .incl-grid .reveal:nth-child(6) { transition-delay: 450ms; }

.hero-copy > *, .hero-visual { animation: heroIn 1s var(--ease-out) both; }
.hero-copy > .kicker { animation-delay: 0.05s; }
.hero-copy > h1 { animation-delay: 0.14s; }
.hero-copy > .hero-sub { animation-delay: 0.24s; }
.hero-copy > .hero-actions { animation-delay: 0.34s; }
.hero-visual { animation-delay: 0.3s; animation-duration: 1.25s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Signature motion: aura sweep ----------
   A soft sheen crosses the glass, as if the aurora behind it moved. Replaces
   any hard travelling border — this is light on a surface, not a neon edge. */
.beam { position: relative; overflow: hidden; }
.beam::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent, rgb(var(--tint-rgb) / 0.045) 42%,
              rgb(var(--accent-rgb) / 0.07) 52%, rgb(var(--tint-rgb) / 0.03) 62%, transparent);
  transform: skewX(-14deg);
  animation: auraSweep 7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes auraSweep {
  0%, 12% { left: -60%; opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(var(--shell-rgb) / 0.66);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}
.site-header.scrolled { background: rgb(var(--shell-rgb) / 0.86); border-bottom-color: var(--glass-line); }
.site-nav { display: flex; align-items: center; gap: 26px; min-height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em; }
.logo-mark {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.12), 0 0 10px rgb(var(--accent-rgb) / 0.4);
}
.nav-menu { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border: 0; background: none; border-radius: var(--radius-sm);
  font-size: 0.88rem; color: var(--ink-dim);
  transition: color 0.16s, background 0.16s;
}
.nav-link:hover { color: var(--hover); background: var(--glass); }
.caret { width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.22s var(--ease-out); }
.has-mega.open .caret { transform: rotate(225deg) translateY(-1px); }
.nav-cta { padding: 10px 18px; font-size: 0.68rem; }

/* Mega-menu: one floating sheet of glass. */
.nav-item.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.995);
  width: min(1000px, calc(100vw - 44px));
  background: rgb(var(--panel-rgb) / 0.9);
  border-color: var(--glass-line-hi);
  box-shadow: var(--specular), 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  padding: 26px 12px 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.24s var(--ease-out), visibility 0.24s;
}
.has-mega.open .mega, .has-mega:hover .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 0; }
.mega-group { padding: 0 20px; }
.mega-group + .mega-group { border-left: 1px solid rgba(255, 255, 255, 0.055); }
.mega-chev { display: none; }
.mega-heading {
  margin: 0 0 12px; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute);
}
.mega-heading a:hover { color: var(--hover); }
.mega-group ul { display: grid; gap: 2px; }
.mega-group li a {
  display: block; padding: 6px 10px; margin-left: -10px;
  font-size: 0.88rem; color: var(--ink-bright); border-radius: var(--radius-xs);
  transition: color 0.15s, background 0.15s, transform 0.15s var(--ease-out);
}
.mega-group li a:hover { color: var(--ink); background: var(--glass-2); transform: translateX(2px); }
.mega-foot { margin-top: 20px; padding: 16px 20px 0; border-top: 1px solid var(--glass-line); }

.nav-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; margin-left: auto; }
.nav-burger span { display: block; width: 19px; height: 1px; background: var(--ink); transition: transform 0.22s var(--ease-out), opacity 0.2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(64px, 10vw, 132px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
/* Two stacked layers: a 96px rule grid for structure and a finer dot lattice
   on top of it, both faded out radially so the type sits on clean ground.
   Drawn with gradients rather than an asset — it costs nothing to ship. */
.hero::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 1.6px 1.6px, var(--grid-dot) 1.6px, transparent 0);
  background-size: 132px 132px, 132px 132px, 44px 44px;
  /* An ellipse well inside the section, so the pattern is gone at every edge
     and corner rather than being clipped by the section boundary. */
  mask-image: radial-gradient(46% 52% at 32% 46%, #000 12%, rgba(0, 0, 0, 0.55) 52%, transparent 82%);
  -webkit-mask-image: radial-gradient(46% 52% at 32% 46%, #000 12%, rgba(0, 0, 0, 0.55) 52%, transparent 82%);
}
/* A horizon hairline closes the section off. */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--glass-line) 18%, var(--glass-line) 82%, transparent);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
  gap: clamp(34px, 5vw, 66px); align-items: center;
}
/* The grid must not run under the type. A soft wash of the page colour lifts
   the copy off it without cutting a visible hole in the pattern. */
.hero-copy { position: relative; }
.hero-copy::before {
  content: ''; position: absolute; inset: -14% -18% -12% -16%; z-index: -1;
  background: radial-gradient(62% 58% at 42% 50%, var(--bg) 40%, rgb(var(--shell-rgb) / 0) 78%);
  pointer-events: none;
}
.hero-copy h1 { margin-bottom: 1.15rem; }
.hero-sub { color: var(--ink-dim); font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 2.2rem; }

/* Hero visual: page glass being scanned, then the record it produced. */
.hero-visual { display: grid; gap: 12px; }
.browser-card { overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.022); }
.b-dot, .code-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); flex: none; }
.browser-bar .b-dot:first-child, .code-head .code-dot:first-child { background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.6); }
.browser-url { margin-left: 8px; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-body { position: relative; padding: 18px 16px; display: grid; gap: 10px; overflow: hidden; }
.skeleton { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.sk-30 { width: 30%; } .sk-45 { width: 45%; } .sk-60 { width: 60%; } .sk-75 { width: 75%; } .sk-90 { width: 90%; }
.scanline {
  position: absolute; left: 0; right: 0; height: 40px; top: -40px;
  background: linear-gradient(180deg, transparent, rgb(var(--accent-rgb) / 0.1));
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.85);
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.2);
  animation: scan 4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes scan {
  0% { top: -40px; opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.hero-arrow { display: flex; justify-content: center; transform: rotate(90deg); opacity: 0.75; color: var(--accent); }

/* ---------- Code cards ---------- */
.code-card { margin: 0; overflow: hidden; }
.code-head { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.022); }
.code-title { margin-left: 8px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--ink-mute); }
.code-body { margin: 0; padding: 18px; overflow-x: auto; font-size: 0.78rem; line-height: 1.78; }
.code-body code { color: var(--code-ink); }
.j-key { color: var(--ink); }
.j-str { color: var(--accent); }
.j-num { color: var(--data-num); }
.j-bool { color: var(--data-bool); }

/* ---------- Capability strip ---------- */
/* Separate panes with real gaps — floating glass, not one divided slab. */
.cap-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cap-card { padding: 24px 22px; display: grid; gap: 14px; align-content: start; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); }
.cap-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.cap-card .badge, .request-card .badge, .practice-card .badge { justify-self: start; }
.cap-card p { margin: 0; font-size: 0.92rem; color: var(--ink-dim); line-height: 1.56; }

/* ---------- Stepper ---------- */
/* Subgrid again: the three widgets differ in row count, so without shared
   rows the headings below them would sit at three different heights. */
.stepper {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  grid-template-rows: auto auto auto auto 1fr auto;
}
.step {
  grid-row: 1 / -1; grid-template-rows: subgrid;
  position: relative; padding: 26px 24px 28px; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); }
.step:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.step-num { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--ink-mute); }
.step h3 { margin: 14px 0 3px; font-size: 1.24rem; }
.step-sub { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 1rem; }
.step p { color: var(--ink-dim); font-size: 0.92rem; margin: 0; }
.step-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 1.15rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }

/* ---------- Use case cards ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.uc-card {
  padding: 26px 24px;
  /* auto / 1fr / auto keeps every footer link on one baseline. */
  display: grid; grid-template-rows: auto 1fr auto; gap: 0.7rem;
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.uc-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-3px); }
.uc-card h3 { margin: 0; }
.uc-card:hover h3 a { color: var(--hover); }
.uc-card p { color: var(--ink-dim); font-size: 0.91rem; margin: 0; }
.uc-card .text-link { justify-self: start; }

/* ---------- Input → output ---------- */
.io-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.request-card { padding: 24px; display: grid; gap: 18px; align-content: start; }
.request-label { margin: 0; }
.request-url, .request-ask { margin: 0; font-size: 0.9rem; color: var(--ink-dim); word-break: break-word; }
.request-url { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); }
.request-key { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.request-ask { color: var(--ink); }

/* ---------- Why grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.why-card { padding: 28px 26px; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); }
.why-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.why-card h3 { margin-bottom: 0.7rem; }
.why-card p { margin: 0; color: var(--ink-dim); font-size: 0.93rem; }

/* ---------- Waitlist ---------- */
.waitlist-strip { padding: clamp(48px, 6vw, 76px) 0; position: relative; background: rgba(255, 255, 255, 0.016); }
.waitlist-strip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 30%, var(--accent-line) 70%, transparent);
}
.waitlist-inner {
  width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 36px; align-items: center;
}
.waitlist-copy h2 { font-size: clamp(1.32rem, 2.2vw, 1.7rem); margin-bottom: 0.6rem; }
.waitlist-note { margin: 0; color: var(--ink-dim); font-size: 0.9rem; max-width: 46ch; }
.waitlist-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.waitlist-form .form-msg { grid-column: 1 / -1; }

/* ---------- Forms ---------- */
input, select, textarea {
  width: 100%; font: inherit; font-size: 0.93rem; color: var(--ink);
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm); padding: 12px 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--specular);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-line);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--specular), 0 0 0 3px rgb(var(--accent-rgb) / 0.13);
}
textarea { resize: vertical; min-height: 120px; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px;
}
label { display: block; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }

.form-msg { margin: 0; font-family: var(--mono); font-size: 0.73rem; min-height: 1.3em; color: var(--ink-mute); }
.form-msg.is-pending { color: var(--ink-dim); }
.form-msg.is-success { color: var(--accent); }
.form-msg.is-error { color: var(--danger); }

.form-shell { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(30px, 4vw, 56px); align-items: start; }
.form-intro h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.form-intro p { color: var(--ink-dim); }
.scope-form { padding: clamp(24px, 3vw, 32px); }
.form-heading { font-size: 1.28rem; }
.form-note { margin: 0 0 1.5rem; font-size: 0.86rem; color: var(--ink-mute); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.form-alt { font-size: 0.88rem; color: var(--ink-dim); }
.contact-direct { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--glass-line); }
.expect-list { display: grid; gap: 0; margin-top: 1.7rem; }
.expect-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: start; padding: 17px 0; border-top: 1px solid var(--glass-line); }
.expect-row p { margin: 0; font-size: 0.91rem; color: var(--ink-dim); }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(64px, 8vw, 108px) 0; }
.cta-inner {
  width: min(var(--container), calc(100% - 52px)); margin: 0 auto;
  padding: clamp(42px, 6vw, 70px) clamp(26px, 5vw, 62px);
  position: relative; box-shadow: var(--specular), var(--lift);
}
/* A soft aurora pool behind the glass, only here. */
.cta-inner > * { position: relative; z-index: 2; }
.cta-inner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: radial-gradient(70% 120% at 12% 0%, rgb(var(--accent-rgb) / 0.13), transparent 62%),
              radial-gradient(60% 100% at 92% 100%, rgb(var(--accent-2-rgb) / 0.09), transparent 66%);
}
.cta-inner h2 { max-width: 26ch; }
.cta-inner p { color: var(--ink-dim); max-width: 56ch; }
.cta-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- Page heroes ---------- */
.page-hero { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 58px); }
.page-hero-tight { padding-top: clamp(30px, 4vw, 46px); }
.page-hero .hero-actions { margin-top: 1.9rem; }
.page-hero .badge { margin-bottom: 1.2rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { width: 100%; max-width: var(--container); margin: 22px auto 0; padding: 0 26px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 9px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); }
.breadcrumb a { color: var(--ink-dim); }
.breadcrumb a:hover { color: var(--hover); }
.crumb-sep { color: rgba(255, 255, 255, 0.18); }

/* ---------- How it works ---------- */
.pipeline { padding: clamp(54px, 7vw, 96px) 26px; display: grid; gap: clamp(44px, 6vw, 78px); }
.pipeline-stage { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); }
.stage-rail { display: grid; justify-items: center; gap: 14px; }
.stage-num {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 50%;
  background: var(--accent-glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--specular), 0 0 18px -10px rgb(var(--accent-rgb) / 0.3);
}
.stage-line { width: 1px; flex: 1; min-height: 64px; height: 100%; background: linear-gradient(180deg, var(--glass-line-hi), transparent); }
.stage-body { max-width: 70ch; }
.stage-body h2 { margin-top: 0.9rem; }
.stage-body p { color: var(--ink-dim); }
.stage-sub { color: var(--ink-mute); font-weight: 400; font-size: 0.6em; }

/* ---------- Lists ---------- */
.tick-list, .cross-list { display: grid; gap: 11px; margin: 1.5rem 0 0; }
.tick-list li, .cross-list li { position: relative; padding-left: 26px; color: var(--ink-dim); font-size: 0.92rem; }
.tick-list li::before {
  content: ''; position: absolute; left: 2px; top: 0.5em;
  width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.cross-list li::before { content: '×'; position: absolute; left: 3px; top: -0.05em; color: var(--danger); font-family: var(--mono); font-size: 1.05em; line-height: 1.55; }
.tick-list.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 30px; }

/* ---------- Products hub ---------- */
.category-block {
  padding: 34px 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px); scroll-margin-top: calc(var(--nav-h) + 24px);
}
.category-block + .category-block { border-top: 1px solid var(--glass-line); }
.category-head h2 { font-size: 1.34rem; }
.category-head p { color: var(--ink-dim); font-size: 0.92rem; max-width: 38ch; line-height: 1.6; }
.platform-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.platform-row {
  display: grid; gap: 4px; padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--glass-solid);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.platform-row:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.platform-row a { font-weight: 500; font-size: 0.95rem; }
.platform-row:hover a { color: var(--hover); }
.platform-tagline { font-size: 0.79rem; color: var(--ink-dim); line-height: 1.5; }

/* ---------- Platform page ---------- */
.pipeline-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 2rem; padding: 17px 19px;
  border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: var(--accent-glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
  color: var(--ink-dim); font-size: 0.91rem;
}
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related-card {
  display: grid; gap: 5px; padding: 19px 20px; height: 100%;
  background: var(--glass-solid);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.related-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.related-card:hover .related-name { color: var(--hover); }
.related-name { font-weight: 500; }
.related-tag { font-size: 0.79rem; color: var(--ink-dim); line-height: 1.5; }

/* ---------- Use cases page ---------- */
.jump-nav { margin-top: 2rem; }
.jump-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.jump-nav a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--specular);
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.16s, border-color 0.16s, background 0.16s, transform 0.16s var(--ease-out);
}
.jump-nav a:hover { color: var(--hover); border-color: var(--hover-line); background: var(--hover-glass); transform: translateY(-1px); }
.uc-sections { padding: clamp(50px, 6vw, 88px) 26px; display: grid; gap: 0; }
.uc-section {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px);
  padding: clamp(32px, 4vw, 48px) 0; scroll-margin-top: calc(var(--nav-h) + 24px);
}
.uc-section + .uc-section { border-top: 1px solid var(--glass-line); }
.uc-section-index { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.15em; color: var(--ink-mute); padding-top: 0.6rem; }
.uc-section-body { max-width: 72ch; }
.uc-section-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.uc-section-body > p { color: var(--ink-dim); }
.practice-card { padding: 18px 20px; display: grid; gap: 10px; margin-top: 1.5rem; }
.practice-label { margin: 0; }
.practice-text { margin: 0; font-family: var(--mono); font-size: 0.81rem; line-height: 1.68; color: var(--ink); }

/* ---------- Enterprise ---------- */
.incl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.incl-card { padding: 26px 24px; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); }
.incl-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.incl-card h3 { font-size: 1.02rem; margin-bottom: 0.65rem; }
.incl-card p { margin: 0; color: var(--ink-dim); font-size: 0.91rem; }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.fit-head { margin: 0; }

/* ---------- Pricing ---------- */
.proc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.proc-card { padding: 28px 26px; position: relative; transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out); }
.proc-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.proc-num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--accent); }
.proc-card h3 { margin: 15px 0 0.6rem; font-size: 1.1rem; }
.proc-card p { margin: 0; color: var(--ink-dim); font-size: 0.91rem; }
.driver-list { display: grid; gap: 0; }
.driver-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: start; padding: 21px 0; position: relative; }
.driver-row + .driver-row { border-top: 1px solid var(--glass-line); }
.driver-row p { margin: 0; color: var(--ink-dim); font-size: 0.93rem; max-width: 70ch; }
.faq-list { display: grid; gap: 12px; }
.faq-item { padding: 24px 26px; transition: background 0.25s, border-color 0.25s; }
.faq-item:hover { background: var(--glass-2); border-color: var(--hover-line); }
.faq-item h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.faq-item p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; max-width: 76ch; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(30px, 5vw, 60px); align-items: start; }
.fact-card { padding: 24px; display: grid; gap: 0; position: sticky; top: calc(var(--nav-h) + 24px); }
.fact-row { display: grid; gap: 7px; font-size: 0.9rem; color: var(--ink-dim); padding: 15px 0; }
.fact-row + .fact-row { border-top: 1px solid var(--glass-line); }
.fact-row:first-child { padding-top: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding: clamp(54px, 6vw, 84px) 0 30px; background: rgba(255, 255, 255, 0.014); }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-line) 20%, var(--glass-line) 80%, transparent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 36px; }
.footer-brand { max-width: 32ch; }
.footer-tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin: 16px 0 12px; }
.footer-note { font-size: 0.85rem; color: var(--ink-mute); }
.footer-note a { color: var(--ink-dim); border-bottom: 1px solid var(--glass-line); }
.footer-note a:hover { color: var(--hover); border-bottom-color: var(--hover-line); }
.footer-heading { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; }
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { font-size: 0.86rem; color: var(--ink-dim); transition: color 0.15s; }
.footer-col a:hover { color: var(--hover); }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-mute);
}
.footer-base p { margin: 0; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-contact a:hover { color: var(--hover); }

/* In-view meters (pricing drivers) */
.driver-row::after {
  content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease-out);
}
.driver-list.in-view .driver-row::after { transform: scaleX(1); }
.driver-list.in-view .driver-row:nth-child(2)::after { transition-delay: 0.12s; }
.driver-list.in-view .driver-row:nth-child(3)::after { transition-delay: 0.24s; }
.driver-list.in-view .driver-row:nth-child(4)::after { transition-delay: 0.36s; }

.code-body, .practice-text, .viz-field, .form-msg { font-variant-numeric: tabular-nums; }

/* ---------- Motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  body::before, .beam::after, .scanline, .viz-live i,
  .hero-copy > *, .hero-visual { animation: none !important; }
  .hero-copy > *, .hero-visual { opacity: 1; transform: none; }
  .driver-row::after { transform: scaleX(1); }
  .beam::after { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cap-strip, .incl-grid, .related-grid, .uc-grid, .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 auto; margin: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 20px 26px 30px;
    background: rgb(var(--shell-rgb) / 0.94);
    -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    border-bottom: 1px solid var(--glass-line);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  body.nav-open .nav-menu { display: flex; }
  body.nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li + li { border-top: 1px solid var(--glass-line); }
  .nav-link { justify-content: space-between; width: 100%; padding: 15px 2px; font-size: 0.98rem; border-radius: 0; }
  .nav-cta { margin-top: 18px; align-self: flex-start; }
  .mega {
    position: static; transform: none; width: 100%;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none; background: transparent; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 4px 0 14px;
  }
  .has-mega.open .mega { display: block; transform: none; }
  .has-mega:hover .mega { display: none; }
  .has-mega.open:hover .mega { display: block; }
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .mega-group { padding: 0 14px 0 0; }
  .mega-group + .mega-group { border-left: 0; }
  .mega-foot { padding-left: 0; }

  .hero-grid, .io-grid, .form-shell, .about-grid, .waitlist-inner, .category-block { grid-template-columns: minmax(0, 1fr); }
  .why-grid, .stepper, .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-rows: none; }
  .step { grid-row: auto; grid-template-rows: auto auto auto auto 1fr auto; }
  .fact-card { position: static; }
  .tick-list.two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .container, .waitlist-inner, .breadcrumb, .uc-sections, .pipeline { padding-left: 20px; padding-right: 20px; }
  .cta-inner { width: calc(100% - 40px); }
  .uc-grid, .cap-strip, .platform-list, .mega-grid, .incl-grid, .related-grid, .proc-grid, .form-grid, .waitlist-form { grid-template-columns: minmax(0, 1fr); }
  .pipeline-stage { grid-template-columns: minmax(0, 1fr); }
  .stage-rail { grid-auto-flow: column; justify-items: start; justify-content: start; align-items: center; gap: 14px; }
  .stage-line { height: 1px; min-height: 0; width: 100%; background: linear-gradient(90deg, var(--glass-line-hi), transparent); }
  .uc-section { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .expect-row, .driver-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .code-body { font-size: 0.72rem; }
  .btn { width: 100%; }
  .hero-actions .btn, .cta-actions .btn, .form-actions .btn { width: auto; }
}

/* =========================================================================
   RAISED BAND — the change of pace, without leaving the palette
   A paper-white slab against oxblood reads as a different website. This is
   the same idea done with elevation instead of inversion: a warmer, lighter
   surface lifted off the ground, with an ember hairline along the top.
   ========================================================================= */
.panel-raised {
  /* Lifted glass: warmer and brighter than the page, still unmistakably dark. */
  --glass: rgb(var(--tint-rgb) / 0.055);
  --glass-2: rgb(var(--tint-rgb) / 0.09);
  --glass-line: rgb(var(--tint-rgb) / 0.13);
  --glass-line-hi: rgb(var(--tint-rgb) / 0.24);

  position: relative;
  margin: clamp(20px, 3vw, 34px) auto;
  width: min(calc(var(--container) + 60px), calc(100% - 40px));
  padding: clamp(48px, 6vw, 86px) 0;
  border-radius: clamp(16px, 2vw, 26px);
  border: 1px solid var(--glass-line);
  background:
    radial-gradient(80% 60% at 12% 0%, rgb(var(--accent-rgb) / 0.07), transparent 62%),
    radial-gradient(70% 60% at 92% 100%, rgb(var(--accent-2-rgb) / 0.07), transparent 66%),
    var(--panel-base);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular), 0 40px 90px -50px #000;
  overflow: hidden;
}
/* Ember hairline along the top edge marks the band without a colour change. */
.panel-raised::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
  opacity: 0.7;
}
.panel-raised::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel-raised > .container { position: relative; z-index: 1; }

/* ---------- Capability matrix ---------- */
.cap-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cm-card {
  display: grid; grid-template-rows: auto auto auto 1fr; gap: 0.55rem;
  padding: 26px 24px 28px;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--specular);
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.cm-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-2px); }
.cm-num { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em; color: var(--accent); }
.cm-name { margin: 0; font-size: 1.12rem; letter-spacing: -0.025em; }
.cm-card p { margin: 0; font-size: 0.9rem; color: var(--ink-dim); }
.cm-viz {
  position: relative; min-height: 104px; margin-top: 0.9rem; align-self: end;
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.26); overflow: hidden;
}
.cm-viz .viz-label, .cm-viz .viz-live { color: var(--ink-mute); }
.cm-viz .viz-live { color: var(--accent); }
.cm-viz .viz-live i { background: var(--accent-deep); }

/* 03 — concurrent lanes, each breathing at its own rate. */
.viz-lanes { padding: 30px 14px 15px; display: grid; gap: 7px; align-content: end; }
.viz-lanes .ln { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; color: var(--ink-mute); }
.viz-lanes .ln b { display: block; height: 3px; border-radius: 999px; background: rgb(var(--tint-rgb) / 0.1); overflow: hidden; position: relative; }
.viz-lanes .ln b::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: left center; animation: lanePulse 3.4s ease-in-out infinite;
}
.viz-lanes .ln:nth-child(2) b::after { animation-duration: 2.6s; animation-delay: 0.3s; }
.viz-lanes .ln:nth-child(3) b::after { animation-duration: 4.1s; animation-delay: 0.6s; }
.viz-lanes .ln:nth-child(4) b::after { animation-duration: 3s; animation-delay: 0.15s; }
@keyframes lanePulse {
  0%, 100% { transform: scaleX(0.28); }
  50% { transform: scaleX(0.96); }
}

/* 06 — a watch log, scrolling one line at a time. */
.viz-log { padding: 30px 14px 15px; display: grid; gap: 5px; align-content: end; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.03em; color: var(--ink-mute); }
.viz-log .lg { display: grid; grid-template-columns: 42px 1fr; gap: 8px; opacity: 0; animation: logIn 6s var(--ease-out) infinite; }
.viz-log .lg:nth-child(2) { animation-delay: 1.1s; }
.viz-log .lg:nth-child(3) { animation-delay: 2.2s; }
.viz-log .lg em { font-style: normal; color: var(--accent); }
.viz-log .lg b { font-weight: 400; color: var(--ink); }
@keyframes logIn {
  0%, 4% { opacity: 0; transform: translateY(3px); }
  10%, 84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .viz-lanes .ln b::after { animation: none !important; transform: scaleX(0.8); }
  .viz-log .lg { animation: none !important; opacity: 1; transform: none; }
}

@media (max-width: 1080px) { .cap-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cap-matrix { grid-template-columns: minmax(0, 1fr); }
  .panel-raised { width: calc(100% - 24px); border-radius: 16px; }
}

/* =========================================================================
   PRICING — plan cards and the difficulty ladder
   ========================================================================= */
/* The grid owns the rows; each card inherits them via subgrid, so name,
   price, summary, specs and CTA line up across all four cards no matter how
   differently the copy wraps. */
.plan-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  grid-template-rows: auto auto auto auto 1fr auto auto;
}
.plan-card {
  position: relative; display: grid;
  grid-row: 1 / -1; grid-template-rows: subgrid;
  gap: 0.5rem; padding: 28px 24px 26px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.plan-card:hover { background: var(--glass-2); border-color: var(--hover-line); transform: translateY(-3px); }
/* The promoted plan is lit rather than recoloured — same glass, more light. */
.plan-card.is-featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.07), rgba(255, 255, 255, 0.04));
  box-shadow: var(--specular), 0 0 34px -22px rgb(var(--accent-rgb) / 0.3);
}
.plan-flag {
  position: absolute; top: -1px; right: 18px;
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); padding: 4px 9px; border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}
.plan-name { margin: 0; font-family: var(--display); font-size: 1.08rem; }
.plan-price {
  font-family: var(--display);
  margin: 0.2rem 0 0; font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.plan-price span {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.plan-summary { margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--ink-dim); min-height: 3.6em; }
.plan-specs { margin: 1.1rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--glass-line); }
.plan-specs > div {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px;
  padding: 9px 0; min-height: 46px; align-content: start;
  border-bottom: 1px solid var(--glass-line);
}
.plan-specs dt { margin: 0; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); padding-top: 2px; }
.plan-specs dd { margin: 0; font-size: 0.82rem; color: var(--ink); }
.plan-includes { margin-top: 1.1rem; gap: 8px; }
.plan-includes li { font-size: 0.84rem; padding-left: 22px; }
.plan-overage {
  margin: 1rem 0 0; font-family: var(--mono); font-size: 0.63rem; line-height: 1.6;
  color: var(--ink-dim);
  border-top: 1px solid var(--glass-line); padding-top: 0.9rem;
}
.plan-overage span { display: block; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
/* Pin every CTA to the last shared row so cards without an overage line
   (Probe) don't float their button up out of alignment. */
.plan-cta { margin-top: 1.3rem; width: 100%; grid-row: 7 / 8; align-self: end; }
.plan-foot {
  margin: 22px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; font-size: 0.9rem; color: var(--ink-dim);
  border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: var(--accent-glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}

/* Difficulty ladder — three rungs, each one step brighter than the last. */
.tier-ladder { display: grid; gap: 12px; }
.tier-card {
  padding: 22px 24px; border-radius: var(--radius);
  border: 1px solid var(--glass-line); background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
  border-left: 2px solid rgb(var(--accent-rgb) / 0.25);
}
.tier-card:nth-child(2) { border-left-color: rgb(var(--accent-rgb) / 0.55); }
.tier-card:nth-child(3) { border-left-color: var(--accent); }
.tier-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tier-head h3 { margin: 0; font-size: 1.1rem; }
.tier-from { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); }
.tier-card p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; max-width: 80ch; }

/* Build fee card */
.fee-shell { margin-top: clamp(28px, 4vw, 44px); }
.fee-card {
  padding: 26px 28px; border-radius: var(--radius);
  border: 1px solid var(--glass-line); background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.fee-card > p { color: var(--ink-dim); font-size: 0.92rem; max-width: 74ch; }
.fee-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--glass-line); }
.fee-row .badge { justify-self: start; }
.fee-value { font-family: var(--mono); font-size: 0.86rem; color: var(--ink); font-variant-numeric: tabular-nums; }

@supports not (grid-template-rows: subgrid) {
  .stepper { grid-template-rows: none; }
  .step { grid-row: auto; grid-template-rows: auto auto auto auto 1fr auto; }
  .plan-grid { align-items: stretch; }
  .plan-card { grid-row: auto; grid-template-rows: auto auto auto auto 1fr auto auto; }
  .plan-cta { grid-row: auto; }
}

@media (max-width: 1080px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .plan-card { grid-row: auto; grid-template-rows: auto auto auto auto 1fr auto auto; }
  .plan-cta { grid-row: auto; }
}
@media (max-width: 640px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .fee-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* =========================================================================
   INTERACTIVE WIDGETS
   Small operable interfaces, not decorations. Each one demos itself until the
   visitor touches it, then hands over control — so the states below are
   driven by classes JS sets, never by an animation that fights the user.
   ========================================================================= */
.step-viz, .cm-viz {
  position: relative; padding: 34px 14px 14px;
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.24);
  display: grid; gap: 9px; align-content: start;
}
.cm-viz { background: rgba(0, 0, 0, 0.26); margin-top: 0.9rem; align-self: end; }
.step-viz { margin: 4px 0 18px; }

.viz-label, .viz-live {
  position: absolute; top: 11px; z-index: 2;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.viz-label { left: 13px; color: var(--ink-mute); }
.viz-live { right: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.viz-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.5); } }
.viz-state { font-weight: 400; }

/* Every control shares one hit-target treatment. */
.viz-row, .viz-layer, .viz-field, .v-opt {
  appearance: none; background: none; border: 1px solid transparent;
  border-radius: var(--radius-xs); padding: 5px 7px; margin: 0;
  font: inherit; text-align: left; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s var(--ease-out);
}
.viz-row:hover, .viz-layer:hover, .viz-field:hover, .v-opt:hover { background: var(--hover-glass); border-color: var(--hover-line); }
.viz-row:focus-visible, .viz-layer:focus-visible, .viz-field:focus-visible, .v-opt:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* --- reticle: pick an element, the scanner locks on --- */
.viz-vision .viz-rows { display: grid; gap: 3px; }
.viz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.viz-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.cm-viz .viz-bar { background: rgb(var(--tint-rgb) / 0.1); }
.viz-field-name {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); opacity: 0; transition: opacity 0.2s;
}
.viz-row[aria-pressed="true"] .viz-field-name { opacity: 1; color: var(--accent); }
.viz-row[aria-pressed="true"] .viz-bar { background: var(--accent); box-shadow: 0 0 8px -2px rgb(var(--accent-rgb) / 0.5); }
.viz-reticle {
  /* top:0 is required: without it the box starts from its static position
     (below the rows) and the JS offset is added on top of that. */
  position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none;
  border: 1px solid var(--accent); border-radius: 4px;
  background: rgb(var(--accent-rgb) / 0.08);
  box-shadow: 0 0 12px -6px rgb(var(--accent-rgb) / 0.45);
  transition: transform 0.42s var(--ease-out), width 0.42s var(--ease-out), height 0.2s, opacity 0.2s;
  opacity: 0;
}
.viz-reticle.is-on { opacity: 1; }

/* --- layers: clear the stack up to the layer you choose --- */
.viz-strike .viz-layers { display: grid; gap: 5px; }
.viz-layer { display: grid; grid-template-columns: 74px minmax(0, 1fr) 34px; align-items: center; gap: 9px; }
.viz-layer-name, .viz-flag {
  font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-mute);
}
.viz-flag { text-align: right; }
.viz-track { display: block; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.cm-viz .viz-track { background: rgb(var(--tint-rgb) / 0.1); }
.viz-track b {
  display: block; height: 100%; border-radius: inherit; background: var(--accent);
  box-shadow: 0 0 7px rgb(var(--accent-rgb) / 0.4);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.viz-layer.is-clear .viz-track b { transform: scaleX(1); }
.viz-layer.is-clear .viz-flag { color: var(--accent); }
.viz-layer.is-clear .viz-layer-name { color: var(--ink); }

/* --- fields: land one at a time; the stamp lights when all are in --- */
.viz-fields { display: grid; gap: 3px; }
.viz-field {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 9px; align-items: center;
  font-family: var(--mono); font-size: 0.56rem;
  opacity: 0.32; transition: opacity 0.3s var(--ease-out), background 0.18s, border-color 0.18s;
}
.viz-field.is-in { opacity: 1; }
.viz-field em { font-style: normal; color: var(--ink-mute); }
.viz-field span { color: var(--accent); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.viz-stamp {
  justify-self: end; margin-top: 2px;
  font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-glass);
  padding: 3px 8px; border-radius: 999px;
  opacity: 0; transform: scale(0.94); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.viz-stamp.is-on { opacity: 1; transform: none; }

/* --- select: options in, outcome out --- */
.v-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.v-opt {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-mute); border-color: var(--glass-line); border-radius: 999px; padding: 4px 10px;
}
.v-opt[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-glass);
}
.v-out {
  margin: 0; font-family: var(--mono); font-size: 0.58rem; line-height: 1.6;
  color: var(--ink); min-height: 2.6em;
}
.v-foot { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }

/* --- ambient widgets keep their loops (nothing to operate) --- */
.viz-lanes, .viz-log { padding-top: 34px; }

/* =========================================================================
   TABS — the output-shape switcher
   ========================================================================= */
.shape-switch {
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  background: var(--glass); box-shadow: var(--specular);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  overflow: hidden;
}
.tab-strip {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 12px 0;
  border-bottom: 1px solid var(--glass-line);
}
.tab {
  appearance: none; background: none; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  padding: 10px 16px; margin-bottom: -1px;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); cursor: pointer;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}
.tab:hover { color: var(--ink); background: var(--glass); }
.tab[aria-selected="true"] {
  color: var(--accent); background: rgb(var(--accent-rgb) / 0.07);
  border-color: var(--glass-line); border-bottom: 1px solid transparent;
}
.tab:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.tab-body { padding: 20px; }
.tab-panel:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-xs); }
.tab-panel .code-card { animation: panelIn 0.4s var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shape-note { margin: 0 0 14px; font-size: 0.9rem; color: var(--ink-dim); max-width: 76ch; }
.code-plain code { color: var(--ink-dim); white-space: pre; }

@media (prefers-reduced-motion: reduce) {
  .viz-live i { animation: none !important; }
  .tab-panel .code-card { animation: none; }
  .viz-reticle { transition: none; }
}

@media (max-width: 640px) {
  .viz-layer { grid-template-columns: 64px minmax(0, 1fr) 30px; }
  .tab { padding: 9px 12px; font-size: 0.58rem; }
  .tab-body { padding: 14px; }
}

/* =========================================================================
   TICKER — two counter-scrolling rows
   The row content is duplicated once in the markup, so translating exactly
   -50% lands the second copy where the first began: a seamless loop with no
   JS and no clone bookkeeping.
   ========================================================================= */
.ticker-band {
  padding: 26px 0; display: grid; gap: 10px;
  border-top: 1px solid var(--glass-line);
  border-bottom: 1px solid var(--glass-line);
  background: rgb(var(--tint-rgb) / 0.014);
}
.ticker {
  overflow: hidden;
  /* Fade the ends so tags enter and leave instead of being sliced off. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-row { display: flex; gap: 10px; width: max-content; animation: tickerRun 46s linear infinite; }
.ticker[data-dir="rev"] .ticker-row { animation-direction: reverse; animation-duration: 58s; }
.ticker-band:hover .ticker-row { animation-play-state: paused; }
@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick {
  flex: none; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass-solid);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap;
}
.ticker[data-dir="rev"] .tick { color: var(--ink-mute); }

/* =========================================================================
   RESOLVER — the open web on the left, your record on the right
   ========================================================================= */
.resolver {
  display: grid; grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr);
  gap: 0; align-items: stretch;
}
.res-col {
  padding: 24px 26px; display: grid; gap: 14px; align-content: start;
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.res-head {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.res-chaos { border-color: rgb(var(--accent-2-rgb) / 0.3); }
.res-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.res-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 11px; border-radius: var(--radius-xs);
  border: 1px solid rgb(var(--accent-2-rgb) / 0.34); background: rgb(var(--accent-2-rgb) / 0.1);
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--danger-dim);
  /* Each chip fails on its own rhythm — staggered by --d from the markup. */
  animation: chipFlicker 5.4s steps(1, end) infinite;
  animation-delay: var(--d);
}
.res-chip b { font-weight: 500; color: var(--danger-hi); letter-spacing: 0.04em; }
@keyframes chipFlicker {
  0%, 62% { opacity: 1; }
  66% { opacity: 0.28; }
  70% { opacity: 1; }
  74% { opacity: 0.35; }
  78%, 100% { opacity: 1; }
}

/* The join: a pulse travelling left to right, once per cycle. */
.res-link { position: relative; display: grid; place-items: center; gap: 10px; }
.res-link::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgb(var(--accent-2-rgb) / 0.5), var(--accent));
  opacity: 0.5;
}
.res-beam {
  position: absolute; top: 50%; margin-top: -2px; left: 6px;
  width: 26px; height: 4px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 12px -2px rgb(var(--accent-rgb) / 0.6);
  animation: beamRun 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes beamRun {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(126px); opacity: 0; }
}
.res-stage {
  /* Sits on the rail, so it carries the page ground as a chip rather than
     letting the line strike through it. */
  position: relative; transform: translateY(26px);
  padding: 5px 9px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim); text-align: center;
  white-space: nowrap;
}

.res-out { border-color: var(--accent-line); }
.res-rows { display: grid; gap: 6px; }
.res-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px;
  font-family: var(--mono); font-size: 0.62rem;
  opacity: 0; animation: rowLand 5.4s var(--ease-out) infinite;
  animation-delay: var(--d);
}
.res-row em { font-style: normal; color: var(--ink-mute); }
.res-row b { font-weight: 400; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes rowLand {
  0%, 8% { opacity: 0; transform: translateX(-6px); }
  18%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-6px); }
}
.res-stamp {
  justify-self: start;
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-glass);
  padding: 4px 9px; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-row, .res-chip, .res-beam, .res-row { animation: none !important; }
  .res-row { opacity: 1; transform: none; }
  .res-beam { opacity: 1; }
}

@media (max-width: 900px) {
  .resolver { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .res-link { height: 74px; }
  .res-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgb(var(--accent-2-rgb) / 0.5), var(--accent)); }
  .res-beam { left: 50%; margin-left: -2px; top: 6px; width: 4px; height: 22px; }
  @keyframes beamRun { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
  .res-stage { transform: none; }
}

/* =========================================================================
   ADDITIONAL WIDGETS — cadence, tier, terminal
   ========================================================================= */
.io-aside { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; }
.io-aside-copy { margin: 0; color: var(--ink-dim); font-size: 0.93rem; max-width: 44ch; }
.io-aside .cm-viz, .tier-aside .cm-viz {
  margin: 0; align-self: stretch;
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  box-shadow: var(--specular);
}
.io-aside .v-out, .tier-aside .v-out { color: var(--ink); }

.tier-shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 18px; align-items: start; }
.tier-aside { display: grid; gap: 12px; }

/* Terminal: lines land in sequence, caret parked on the last one. */
.intake-shell { margin-top: 2.2rem; max-width: 560px; }
.term {
  position: relative; padding: 34px 16px 16px;
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  background: linear-gradient(var(--glass), var(--glass)), rgb(var(--panel-rgb) / 0.78);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.term-body { display: grid; gap: 6px; position: relative; }
.term-line {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  opacity: 0; animation: termLine 0.4s var(--ease-out) forwards;
  animation-delay: var(--d);
}
.term-line em { font-style: normal; color: var(--ink-mute); }
.term-line b { font-weight: 400; color: var(--ink); }
.term-line.is-done em, .term-line.is-done b { color: var(--accent); }
@keyframes termLine { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.term-caret {
  width: 7px; height: 13px; background: var(--accent); justify-self: start;
  margin-left: 23px; opacity: 0.9;
  animation: caretBlink 1.1s step-end infinite;
}
@keyframes caretBlink { 0%, 100% { opacity: 0.9; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .term-line { animation: none !important; opacity: 1; }
  .term-caret { animation: none !important; }
}

@media (max-width: 900px) {
  .io-aside, .tier-shell { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   AMBIENT MOTION — the page is never a still image
   Three independent layers, all cheap (transform/opacity only, GPU-composited)
   and all dim: motion comes from travel and timing, not from brightness.
   ========================================================================= */

/* 1. A second aurora band, counter-rotating against the first. */
.sky {
  position: fixed; inset: -30%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(30% 34% at 70% 30%, rgb(var(--accent-rgb) / 0.07), transparent 70%),
    radial-gradient(26% 30% at 25% 70%, rgb(var(--accent-2-rgb) / 0.06), transparent 72%);
  filter: blur(40px);
  animation: skyTurn 58s linear infinite;
}
@keyframes skyTurn {
  from { transform: rotate(0deg) scale(1.1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* 2. Embers: a handful of motes drifting upward on their own timings. */
.embers { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute; bottom: -8px; width: 2px; height: 2px; border-radius: 50%;
  background: var(--accent); opacity: 0;
  box-shadow: 0 0 6px rgb(var(--accent-rgb) / 0.6);
  animation: emberRise var(--dur, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
}
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.5; }
  50% { transform: translateY(-46vh) translateX(14px); opacity: 0.35; }
  88% { opacity: 0.16; }
  100% { transform: translateY(-96vh) translateX(-10px); opacity: 0; }
}

/* 3. A slow horizontal sweep across section rules, so the structure breathes. */
.section::before, .site-footer::before, .waitlist-strip::before {
  background-size: 200% 100%;
  animation: ruleSweep 14s ease-in-out infinite;
}
@keyframes ruleSweep {
  0%, 100% { background-position: 0% 0; opacity: 0.7; }
  50% { background-position: 100% 0; opacity: 1; }
}

/* =========================================================================
   WIDGET AMBIENCE — motion that continues alongside the interactivity
   ========================================================================= */

/* A sheen crosses every widget on a slow loop. */
.step-viz::after, .cm-viz::after, .term::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(var(--tint-rgb) / 0.1) 45%,
              rgb(var(--accent-rgb) / 0.13) 55%, transparent);
  transform: skewX(-12deg);
  animation: vizSheen 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.cm-viz::after { background: linear-gradient(100deg, transparent, rgb(var(--accent-2-rgb) / 0.1) 50%, transparent); }
.step-viz, .cm-viz, .term { overflow: hidden; }
@keyframes vizSheen {
  0%, 6% { left: -40%; opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* The active option in any select widget carries a travelling underline. */
.v-opt[aria-pressed="true"] { position: relative; overflow: hidden; }
.v-opt[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: optTravel 2.4s ease-in-out infinite;
}
@keyframes optTravel {
  0%, 100% { transform: translateX(-60%); opacity: 0.4; }
  50% { transform: translateX(60%); opacity: 1; }
}

/* Cleared tracks keep a slow shimmer, so a solved layer still looks live. */
.viz-layer.is-clear .viz-track b::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--tint-rgb) / 0.55), transparent);
  animation: trackShimmer 3.2s ease-in-out infinite;
}
.viz-layer .viz-track b { position: relative; overflow: hidden; }
@keyframes trackShimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Landed fields pulse once on arrival rather than simply appearing. */
.viz-field.is-in span { animation: fieldPulse 0.5s var(--ease-out); }
@keyframes fieldPulse {
  0% { opacity: 0.3; transform: translateX(-3px); }
  100% { opacity: 1; transform: none; }
}

/* The JSON card gets a reading head passing down it, matching the hero scan. */
.hero-visual .code-card { position: relative; }
.hero-visual .code-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.075), transparent);
  animation: readHead 6s ease-in-out infinite;
}
@keyframes readHead {
  0%, 100% { transform: translateY(-10%); opacity: 0; }
  25% { opacity: 1; }
  75% { transform: translateY(200%); opacity: 0.2; }
}

/* Copy button: confirms in place. */
.copy-btn.is-copied { border-color: var(--accent); color: var(--accent); }
.copy-btn.is-copied .copy-hint::after { content: 'ied'; }

@media (prefers-reduced-motion: reduce) {
  .sky, .embers, .ember,
  .section::before, .site-footer::before, .waitlist-strip::before,
  .step-viz::after, .cm-viz::after, .term::after,
  .v-opt[aria-pressed="true"]::after,
  .viz-layer.is-clear .viz-track b::after,
  .viz-field.is-in span,
  .hero-visual .code-card::after { animation: none !important; }
  .embers, .sky { display: none; }
  .hero-visual .code-card::after, .step-viz::after, .cm-viz::after, .term::after { opacity: 0; }
}

/* =========================================================================
   EMAIL PANEL — the only conversion path on the site
   ========================================================================= */
.email-panel {
  padding: clamp(26px, 3vw, 34px);
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.email-cta { width: 100%; margin-bottom: 20px; }
.email-address { display: grid; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--glass-line); }
.email-label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.copy-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px dashed var(--glass-line-hi); background: rgb(var(--tint-rgb) / 0.03);
  font-family: var(--mono); font-size: 0.82rem; color: var(--ink);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.copy-btn:hover { border-color: var(--hover-line); background: var(--hover-glass); }
.copy-hint { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.email-list-head { margin: 20px 0 0; font-size: 0.9rem; color: var(--ink); }
.email-list { margin-top: 12px; }
.email-list li { font-size: 0.88rem; }
.email-foot { margin: 20px 0 0; font-size: 0.85rem; color: var(--ink-mute); }
.waitlist-action { display: grid; gap: 10px; justify-items: stretch; }

@media (max-width: 640px) { .email-cta { width: 100%; } }

/* =========================================================================
   WIDGET MOTION, MADE LEGIBLE
   The first pass was measurable but not readable. Two changes: every widget
   shows its autoplay position, and each one carries motion that never stops —
   so a widget looks alive before you touch it and after you take it over.
   ========================================================================= */

/* Autoplay position. Doubles as an affordance: it says "this is cycling, and
   you can drive it instead". Removed the moment the visitor takes control. */
.viz-prog {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  overflow: hidden; z-index: 3; background: rgb(var(--tint-rgb) / 0.06);
}
.viz-prog::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin: left center;
  animation: progStep 1.6s linear infinite;
}
.is-manual .viz-prog { opacity: 0; transition: opacity 0.3s; }
@keyframes progStep {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Vision: a continuous scan passes the rows regardless of what is selected. */
.viz-vision .viz-rows::after {
  content: ''; position: absolute; left: 0; right: 0; height: 22px;
  pointer-events: none; top: 0;
  background: linear-gradient(180deg, transparent, rgb(var(--accent-rgb) / 0.16), transparent);
  animation: rowScan 4.4s ease-in-out infinite;
}
.viz-vision .viz-rows { position: relative; }
@keyframes rowScan {
  0%, 100% { transform: translateY(-14px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translateY(52px); }
}

/* Strike: layers still holding breathe, so the stack reads as under pressure. */
.viz-layer:not(.is-clear) .viz-flag { animation: holdPulse 1.8s ease-in-out infinite; }
.viz-layer:not(.is-clear) .viz-track b { transform: scaleX(0.08); animation: holdProbe 2.6s ease-in-out infinite; }
@keyframes holdPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes holdProbe {
  0%, 100% { transform: scaleX(0.06); opacity: 0.5; }
  50% { transform: scaleX(0.2); opacity: 1; }
}

/* Fields: a caret waits after the last landed row. */
.viz-fields { position: relative; }
.viz-fields::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 6px; height: 11px; background: var(--accent); opacity: 0.8;
  animation: caretBlink 1.05s step-end infinite;
}

/* Select widgets: the live dot already pulses; add a slow scan under the
   outcome line so the readout never looks like a static caption. */
.v-out { position: relative; }
.v-out::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 34%;
  background: linear-gradient(90deg, var(--accent), transparent);
  animation: outScan 3.6s ease-in-out infinite;
}
@keyframes outScan {
  0%, 100% { transform: translateX(0); opacity: 0.35; }
  50% { transform: translateX(190%); opacity: 0.9; }
}

/* Ambient telemetry widgets (always animating, nothing to click) */
.viz-pool { padding: 34px 14px 15px; display: grid; gap: 6px; align-content: start; }
.viz-pool .fp {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; align-items: center;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.04em; color: var(--ink-mute);
}
.viz-pool .fp b { font-weight: 400; color: var(--ink); overflow: hidden; white-space: nowrap; }
.viz-pool .fp s { text-decoration: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: fpCycle 3.2s ease-in-out infinite; }
.viz-pool .fp:nth-child(3) s { animation-delay: 0.6s; }
.viz-pool .fp:nth-child(4) s { animation-delay: 1.2s; }
.viz-pool .fp:nth-child(5) s { animation-delay: 1.8s; }
@keyframes fpCycle { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

.viz-spark { padding: 34px 14px 15px; display: flex; align-items: flex-end; gap: 4px; height: 104px; }
.viz-spark i {
  display: block; flex: 1; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / 0.25));
  transform-origin: bottom center;
  animation: sparkRise 2.8s ease-in-out infinite;
}
@keyframes sparkRise {
  0%, 100% { transform: scaleY(0.28); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .viz-prog::after, .viz-vision .viz-rows::after, .viz-layer:not(.is-clear) .viz-flag,
  .viz-layer:not(.is-clear) .viz-track b, .viz-fields::after, .v-out::after,
  .viz-pool .fp s, .viz-spark i { animation: none !important; }
  .viz-prog, .viz-fields::after, .v-out::after, .viz-vision .viz-rows::after { display: none; }
  .viz-spark i { transform: scaleY(0.6); }
}

/* =========================================================================
   SCENE: request path
   Five stages on a rail, two records travelling out of phase. The stage
   highlight is driven by animation-delay derived from --i, so the sequence is
   carried by timing rather than by a script.
   ========================================================================= */
.arc, .run, .rqlog {
  padding: 22px 24px 24px;
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.arc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.arc-head .viz-label, .arc-head .viz-live { position: static; }

.arc-track { position: relative; height: 14px; margin: 0 4px 4px; }
.arc-rail {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgb(var(--tint-rgb) / 0.06), rgb(var(--tint-rgb) / 0.16), rgb(var(--tint-rgb) / 0.06));
}
.arc-packet {
  position: absolute; top: 50%; margin-top: -3px; left: 0;
  width: 22px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 14px -2px rgb(var(--accent-rgb) / 0.75);
  animation: arcRun 5.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.arc-packet-2 { animation-delay: 2.6s; opacity: 0.55; }
@keyframes arcRun {
  0% { transform: translateX(-8%); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(calc(100vw)); opacity: 0; }
}
/* Constrain the packet travel to the track, whatever the container width. */
.arc-track { overflow: hidden; }
@keyframes arcRunBounded {
  0% { left: -6%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 104%; opacity: 0; }
}
.arc-packet { animation-name: arcRunBounded; }

.arc-nodes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.arc-node { display: grid; gap: 3px; padding-top: 12px; position: relative; }
.arc-dot {
  position: absolute; top: -8px; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--tint-rgb) / 0.18);
  /* Lights as the packet passes: one fifth of the cycle each, in order. */
  animation: arcNode 5.2s linear infinite;
  animation-delay: calc(var(--i) * 0.94s);
}
@keyframes arcNode {
  0%, 6% { background: var(--accent); box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.8); transform: scale(1.5); }
  18%, 100% { background: rgb(var(--tint-rgb) / 0.18); box-shadow: none; transform: scale(1); }
}
.arc-name { font-family: var(--display); font-size: 0.88rem; color: var(--ink); letter-spacing: -0.01em; }
.arc-sub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.arc-note { margin: 20px 0 0; font-size: 0.86rem; color: var(--ink-dim); max-width: 70ch; }

/* =========================================================================
   SCENE: resumable run
   ========================================================================= */
.run-track {
  position: relative; height: 8px; border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.07); overflow: hidden; margin-bottom: 16px;
}
.run-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: transform 0.25s linear;
}
.run-head {
  position: absolute; top: -3px; width: 2px; height: 14px; left: 0;
  background: #fff; box-shadow: 0 0 10px rgb(var(--tint-rgb) / 0.9);
  transition: left 0.25s linear; opacity: 0;
}
.run.is-running .run-head { opacity: 1; }
.run.is-killed .run-fill { background: linear-gradient(90deg, var(--accent-2-deep), var(--accent-2)); }
.run.is-killed .run-head { background: var(--danger); box-shadow: 0 0 10px rgb(var(--danger-rgb) / 0.8); }
.run-lead { margin: 0 0 16px; font-size: 0.87rem; color: var(--ink-dim); max-width: 54ch; }
.run-lead b { font-weight: 400; color: var(--accent); }
.run-readout { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 16px; }
.run-row { display: grid; gap: 3px; font-family: var(--mono); }
.run-row em { font-style: normal; font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.run-row b { font-family: var(--display); font-weight: 500; font-size: 1.12rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.run.is-killed .run-row b { color: var(--danger); }
.run-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.run-btn[aria-pressed] { cursor: pointer; }


/* =========================================================================
   SCENE: streaming request log
   ========================================================================= */
.rqlog-window {
  height: 168px; overflow: hidden; position: relative;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.rqlog-stream { display: grid; gap: 5px; animation: logStream 22s linear infinite; }
@keyframes logStream { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.rqlog:hover .rqlog-stream { animation-play-state: paused; }
.rq {
  display: grid; grid-template-columns: 62px 42px 1fr auto; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute);
  padding: 4px 8px; border-radius: var(--radius-xs);
  border-left: 1px solid rgb(var(--tint-rgb) / 0.1);
}
.rq em, .rq i, .rq s { font-style: normal; text-decoration: none; }
.rq b { font-weight: 400; color: var(--accent); }
.rq s { color: var(--ink-dim); }
.rq.is-warn { border-left-color: var(--accent-2); background: rgb(var(--accent-2-rgb) / 0.09); }
.rq.is-warn b, .rq.is-warn s { color: var(--danger-hi); }

/* Section shell for the scenes */
.scene-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; align-items: stretch; }
/* Side-by-side scenes share a row height, and each pushes its trailing block
   to the bottom — so the two panels line up top and bottom rather than ending
   wherever their content happens to stop. */
.scene-grid > .arc, .scene-grid > .scene-stack > .run,
.scene-grid > .rqlog, .scene-grid > .drift { display: flex; flex-direction: column; }
.scene-grid .scene-stack { display: grid; }
.arc-note { margin-top: auto; padding-top: 20px; }
.run-controls { margin-top: auto; padding-top: 4px; }
.scene-stack { display: grid; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .arc-packet, .arc-dot, .rqlog-stream { animation: none !important; }
  .arc-packet { opacity: 0; }
  .arc-dot { background: var(--accent); }
}

@media (max-width: 900px) {
  .scene-grid { grid-template-columns: minmax(0, 1fr); }
  .arc-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .arc-nodes { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   SCENE: architecture diagram
   Wires are marching-ants gradients, not SVG paths — nothing needs measuring
   at runtime, and the flow survives any container width.
   ========================================================================= */
.dg, .rm, .drift {
  padding: 22px 24px 24px;
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.dg-grid { display: grid; grid-template-columns: 1fr 46px 1fr 46px 1fr; gap: 0; align-items: start; }
.dg-col { display: grid; gap: 8px; }
.dg-col-label {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
}
.dg-node {
  display: grid; gap: 3px; padding: 11px 13px;
  border: 1px solid var(--glass-line); border-radius: var(--radius-sm);
  background: rgb(var(--tint-rgb) / 0.03);
  animation: dgNode 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
@keyframes dgNode {
  0%, 88%, 100% { border-color: var(--glass-line); background: rgb(var(--tint-rgb) / 0.03); }
  6% { border-color: var(--accent-line); background: var(--accent-glass); }
}
.dg-node-name { font-family: var(--display); font-size: 0.88rem; color: var(--ink); letter-spacing: -0.01em; }
.dg-node-sub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.05em; color: var(--ink-dim); line-height: 1.5; }

.dg-wires { display: grid; gap: 8px; align-content: start; padding-top: 30px; }
.dg-wire {
  height: 37px; display: block; position: relative;
}
.dg-wire::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 11px);
  background-size: 11px 1px;
  opacity: 0.55;
  animation: wirePan 0.75s linear infinite;
}
.dg-wires:nth-of-type(2) .dg-wire::after { animation-duration: 0.95s; }
@keyframes wirePan { from { background-position: 0 0; } to { background-position: 11px 0; } }

.dg-sink { margin-top: 18px; display: grid; gap: 8px; }
.dg-sink-line {
  height: 1px; display: block;
  background-image: repeating-linear-gradient(90deg, var(--accent-2) 0 6px, transparent 6px 16px);
  background-size: 16px 1px; opacity: 0.6;
  animation: wirePan 1.1s linear infinite reverse;
}
.dg-sink-label { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }

/* =========================================================================
   SCENE: region map
   Arcs are SVG (a stretched curve is still a route); everything round is HTML
   at fixed pixel size, so nothing deforms with the container aspect.
   ========================================================================= */
.rm-stage { position: relative; height: clamp(210px, 24vw, 280px); margin: 8px 0 4px; }
.rm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rm-arc {
  fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 5; opacity: 0.7;
  animation: arcFlow 1.6s linear infinite; animation-delay: var(--d);
}
@keyframes arcFlow { to { stroke-dashoffset: -8; } }
.rm-field { position: absolute; inset: 0; }
.rm-dot {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgb(var(--tint-rgb) / 0.16); transform: translate(-50%, -50%);
}
.rm-node { position: absolute; transform: translate(-50%, -50%); }
.rm-halo {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.2);
  animation: haloPulse 3s ease-in-out infinite; animation-delay: var(--d);
}
.rm-core {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.9);
}
.rm-node.is-hub .rm-core { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #fff; box-shadow: 0 0 12px rgb(var(--tint-rgb) / 0.9); }
.rm-node.is-hub .rm-halo { background: rgb(var(--accent-rgb) / 0.3); width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@keyframes haloPulse {
  0%, 100% { transform: scale(0.6); opacity: 0.3; }
  50% { transform: scale(1.35); opacity: 0.85; }
}
.rm-label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); white-space: nowrap;
}
.rm-node.is-hub .rm-label { color: var(--accent); left: 19px; }
.rm-note { margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-dim); max-width: 66ch; }

/* =========================================================================
   SCENE: schema drift — states driven entirely by data-step
   ========================================================================= */
.drift-map { display: grid; grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 16px; }
.drift-side { display: grid; gap: 6px; }
.drift-side-label { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.drift-field {
  font-family: var(--mono); font-size: 0.68rem; padding: 8px 10px;
  border: 1px solid var(--glass-line); border-radius: var(--radius-xs);
  background: rgb(var(--tint-rgb) / 0.03); color: var(--ink);
  transition: opacity 0.3s var(--ease-out), color 0.3s, border-color 0.3s, background 0.3s;
}
.drift-new { display: none; }
.drift-yours { border-color: var(--accent-line); background: var(--accent-glass); color: var(--accent); }
.drift-link { position: relative; display: grid; place-items: center; gap: 6px; }
.drift-wire {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 10px);
  background-size: 10px 1px; animation: wirePan 0.8s linear infinite;
}
.drift-badge {
  position: relative; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--bg); color: var(--accent);
}
/* State 2 — the target renamed the field. */
.drift[data-step="1"] .drift-old { display: none; }
.drift[data-step="1"] .drift-new { display: block; border-color: rgb(var(--accent-2-rgb) / 0.5); background: rgb(var(--accent-2-rgb) / 0.12); color: var(--danger-hi); }
.drift[data-step="1"] .drift-wire { background-image: repeating-linear-gradient(90deg, var(--accent-2) 0 4px, transparent 4px 10px); animation-duration: 0.4s; }
.drift[data-step="1"] .drift-badge { border-color: rgb(var(--accent-2-rgb) / 0.6); color: var(--danger-hi); }
.drift[data-step="1"] .drift-badge::after { content: 'drift'; }
.drift[data-step="1"] .drift-badge { font-size: 0; padding: 3px 7px; }
.drift[data-step="1"] .drift-badge::after { font-size: 0.5rem; }
/* State 3 — repaired: the new name, mapped as before. */
.drift[data-step="2"] .drift-old { display: none; }
.drift[data-step="2"] .drift-new { display: block; border-color: var(--accent-line); background: var(--accent-glass); color: var(--accent); }
.drift[data-step="2"] .drift-badge::after { content: ''; }

@media (prefers-reduced-motion: reduce) {
  .dg-node, .dg-wire::after, .dg-sink-line, .rm-arc, .rm-halo, .drift-wire { animation: none !important; }
}

@media (max-width: 900px) {
  .dg-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dg-wires { display: none; }
  .rm-stage { height: 240px; }
  .drift-map { grid-template-columns: minmax(0, 1fr); }
  .drift-link { height: 34px; }
  .drift-wire { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background-image: repeating-linear-gradient(180deg, var(--accent) 0 4px, transparent 4px 10px); background-size: 1px 10px; }
}

/* =========================================================================
   LIGHT MODE
   The sheet is written dark-first: glass is a light tint at low alpha over a
   dark ground, and the specular edge is white. On a light ground both of those
   invert — a 5% white tint over white is invisible, and a white top edge does
   nothing. So a light theme redefines the DERIVED tokens only; every component
   follows without a single component-level override.
   Themes opt in via mode: 'light' in src/data/themes.js.
   ========================================================================= */
:root[data-mode="light"] {
  /* Glass becomes a dark tint over a light ground. */
  --glass: rgb(var(--panel-rgb) / 0.035);
  --glass-2: rgb(var(--panel-rgb) / 0.07);
  --glass-3: rgb(var(--panel-rgb) / 0.1);
  --glass-line: rgb(var(--panel-rgb) / 0.14);
  --glass-line-hi: rgb(var(--panel-rgb) / 0.26);
  --glass-solid: rgb(var(--tint-rgb) / 0.86);
  /* Light surfaces are lifted by shadow, not by an inner highlight. */
  --specular: 0 1px 2px rgb(var(--panel-rgb) / 0.05);
  --lift: 0 18px 44px -28px rgb(var(--panel-rgb) / 0.3);
  /* Ambient light has to be far weaker or it muddies white. */
  --aurora-1: rgb(var(--accent-rgb) / 0.05);
  --aurora-2: rgb(var(--accent-2-rgb) / 0.04);
  --aurora-3: rgb(var(--accent-2-rgb) / 0.03);
  /* Panels are paper, lifted off a slightly darker page. */
  --panel-base: rgb(var(--tint-rgb) / 0.92);
  --grid-dot: rgb(var(--panel-rgb) / 0.26);
  --grid-line: rgb(var(--panel-rgb) / 0.06);
}
:where(:root[data-mode="light"]) body::after { opacity: 0.02; mix-blend-mode: multiply; }
:where(:root[data-mode="light"]) .sky { opacity: 0.55; }
:where(:root[data-mode="light"]) .embers { display: none; }
:where(:root[data-mode="light"]) .site-header { background: rgb(var(--tint-rgb) / 0.82); }
:where(:root[data-mode="light"]) .site-header.scrolled { background: rgb(var(--tint-rgb) / 0.94); }
/* Code, terminals and telemetry stay dark: a code block on white with a light
   panel behind it loses the "this is machine output" read entirely. */
:where(:root[data-mode="light"]) .code-card,
:where(:root[data-mode="light"]) .browser-card,
:where(:root[data-mode="light"]) .term,
:where(:root[data-mode="light"]) .rqlog,
:where(:root[data-mode="light"]) .step-viz,
:where(:root[data-mode="light"]) .cm-viz,
:where(:root[data-mode="light"]) .run,
:where(:root[data-mode="light"]) .arc,
:where(:root[data-mode="light"]) .dg {
  --glass: rgb(var(--tint-rgb) / 0.05);
  --glass-2: rgb(var(--tint-rgb) / 0.09);
  --glass-line: rgb(var(--tint-rgb) / 0.12);
  --glass-line-hi: rgb(var(--tint-rgb) / 0.22);
  --ink: rgb(var(--tint-rgb) / 0.96);
  --ink-dim: rgb(var(--tint-rgb) / 0.72);
  --ink-mute: rgb(var(--tint-rgb) / 0.5);
  --specular: inset 0 1px 0 rgb(var(--tint-rgb) / 0.08);
  /* A light theme's accent is dark by definition and would be invisible here,
     so inside dark panels the accent becomes a light neutral. Colour arrives
     only on hover — see the widget re-theme below. */
  --accent: rgb(var(--tint-rgb) / 0.9);
  --accent-rgb: var(--tint-rgb);
  --accent-line: rgb(var(--tint-rgb) / 0.3);
  --accent-glass: rgb(var(--tint-rgb) / 0.1);
  /* Bright signal here — this surface is dark. */
  --signal: var(--signal-hi);
  --signal-rgb: var(--signal-hi-rgb);
  --panel-base: var(--bg-deep);
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  color: var(--ink);
  border-color: var(--glass-line);
}
:where(:root[data-mode="light"]) .code-head,
:where(:root[data-mode="light"]) .browser-bar { background: rgb(var(--tint-rgb) / 0.03); }
:where(:root[data-mode="light"]) .code-body code { color: rgb(var(--tint-rgb) / 0.78); }
:where(:root[data-mode="light"]) .mega { background: rgb(var(--tint-rgb) / 0.97); }
:where(:root[data-mode="light"]) .cta-inner { background: rgb(var(--panel-rgb) / 0.03); }
:where(:root[data-mode="light"]) .panel-raised {
  background:
    radial-gradient(80% 60% at 12% 0%, rgb(var(--hover-rgb) / 0.06), transparent 62%),
    rgb(var(--panel-rgb) / 0.035);
}
:where(:root[data-mode="light"]) input,
:where(:root[data-mode="light"]) select,
:where(:root[data-mode="light"]) textarea { background: rgb(var(--tint-rgb) / 0.7); }
:where(:root[data-mode="light"]) .btn-primary { box-shadow: 0 8px 20px -12px rgb(var(--accent-rgb) / 0.5); }
:where(:root[data-mode="light"]) .skeleton { background: rgb(var(--tint-rgb) / 0.14); }
:where(:root[data-mode="light"]) ::selection { background: rgb(var(--hover-rgb) / 0.35); color: var(--on-accent); }

/* =========================================================================
   RE-THEME ON POINTER
   Every panel on the site — animated widget or plain card — is monochrome at
   rest and adopts the signal colour while pointed at. The swap is on the
   accent TOKENS, scoped to the hovered element, so everything inside responds
   at once: badges, labels, live dots, tracks, values, stamps, links.
   One list, so a new panel type cannot silently miss out.
   ========================================================================= */
.step-viz, .cm-viz, .term, .run, .arc, .dg, .rqlog, .drift,
.code-card, .browser-card, .shape-switch, .resolver .res-col,
.cap-card, .uc-card, .why-card, .incl-card, .proc-card, .faq-item,
.plan-card, .cm-card, .tier-card, .fee-card, .practice-card,
.request-card, .fact-card, .platform-row, .related-card, .email-panel, .step {
  transition: border-color 0.22s var(--ease-out), background 0.22s var(--ease-out),
              box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.step-viz:hover, .cm-viz:hover, .term:hover, .run:hover, .arc:hover, .dg:hover,
.rqlog:hover, .drift:hover, .code-card:hover, .browser-card:hover,
.shape-switch:hover, .resolver .res-col:hover,
.cap-card:hover, .uc-card:hover, .why-card:hover, .incl-card:hover,
.proc-card:hover, .faq-item:hover, .plan-card:hover, .cm-card:hover,
.tier-card:hover, .fee-card:hover, .practice-card:hover, .request-card:hover,
.fact-card:hover, .platform-row:hover, .related-card:hover, .email-panel:hover,
.step:hover {
  --accent: var(--signal);
  --accent-rgb: var(--signal-rgb);
  --accent-hi: var(--signal);
  --accent-line: rgb(var(--signal-rgb) / 0.42);
  --accent-glass: rgb(var(--signal-rgb) / 0.15);
  --hover: var(--signal);
  --hover-rgb: var(--signal-rgb);
  border-color: rgb(var(--signal-rgb) / 0.45);
  box-shadow: var(--specular), 0 0 0 1px rgb(var(--signal-rgb) / 0.1),
              0 14px 36px -26px rgb(var(--signal-rgb) / 0.35);
}
/* A card holding a widget should not double up the treatment. */
.step:hover .step-viz:not(:hover) { border-color: rgb(var(--signal-rgb) / 0.28); }

/* A sample block says so, rather than letting invented values read as data. */
.code-note {
  padding: 10px 14px; border-top: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 0.58rem; line-height: 1.6;
  letter-spacing: 0.03em; color: var(--ink-mute);
}

/* =========================================================================
   DELIVERY MAP — where we write, and what reads it
   ========================================================================= */
.dl {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0;
  padding: 22px 24px 24px;
  background: linear-gradient(var(--glass), var(--glass)), var(--panel-base);
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--specular);
}
.dl-side { min-width: 0; }
.viz-note {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.dl-list { display: grid; gap: 2px; }
.dl-item {
  display: grid; gap: 2px; padding: 9px 11px; border-radius: var(--radius-xs);
  border: 1px solid transparent; transition: background 0.18s, border-color 0.18s;
}
.dl-item:hover { background: var(--hover-glass); border-color: var(--hover-line); }
.dl-name { font-size: 0.87rem; color: var(--ink); letter-spacing: -0.01em; }
.dl-detail { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.04em; color: var(--ink-mute); line-height: 1.5; }
/* The join: a pulse crossing from our side to theirs. */
.dl-join { position: relative; }
.dl-join::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px;
  background: linear-gradient(90deg, var(--accent-line), var(--glass-line));
}
.dl-beam {
  position: absolute; top: 50%; margin-top: -2px; left: 6px;
  width: 16px; height: 4px; border-radius: 999px; background: var(--accent);
  animation: dlRun 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes dlRun {
  0% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(36px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dl-beam { animation: none; opacity: 1; } }
@media (max-width: 900px) {
  .dl { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dl-join { height: 30px; }
  .dl-join::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--accent-line), var(--glass-line)); }
  .dl-beam { left: 50%; margin-left: -2px; top: 4px; width: 4px; height: 14px; }
}


/* =========================================================================
   TOUCH TARGETS
   A 27px logo or a 19px link is fine with a mouse and a coin-toss with a
   thumb. Below 900px every interactive element gets a 44px minimum box —
   grown with padding so nothing moves visually, only the hit area.
   ========================================================================= */
@media (max-width: 900px) {
  .logo { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .text-link, .step-link, .footer-col a, .footer-note a, .footer-contact a,
  .breadcrumb a, .mega-group li a, .mega-heading a, .form-alt a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Widget controls: taller rows, and the option pills get real padding. */
  .v-opt { min-height: 40px; display: inline-flex; align-items: center; padding: 10px 14px; font-size: 0.6rem; }
  .viz-row, .viz-layer, .viz-field { min-height: 38px; align-content: center; }
  .step-viz, .cm-viz { min-height: 148px; }
  .tab { min-height: 44px; display: inline-flex; align-items: center; }
  .copy-btn { min-height: 48px; }
  .jump-nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .run-btn { min-height: 42px; }
  /* Footer links stack, so the taller boxes need breathing room, not gaps. */
  .footer-col ul { gap: 0; }
  .dl-item { min-height: 52px; align-content: center; }
  .platform-row { min-height: 60px; align-content: center; }
  .platform-row a, .related-card, .uc-card h3 a { min-height: 34px; display: flex; align-items: center; }
  .related-card { min-height: 64px; }
}

/* Comfortable reading sizes on a phone.
   Uppercase mono labels carry more x-height than lowercase, so 0.6rem reads
   fine on a desktop — but on a phone held at arm's length it does not. Every
   label class gets a floor of 0.68rem (~11px) below 900px. */
@media (max-width: 900px) {
  .kicker, .badge, .viz-label, .viz-live, .viz-note, .code-title, .code-note,
  .dg-col-label, .dg-node-sub, .arc-sub, .dl-detail, .rm-label, .v-foot,
  .footer-heading, .footer-tag, .footer-base, .breadcrumb ol, .request-key,
  .plan-price span, .plan-specs dt, .expect-row .badge, .fact-row,
  .step-sub, .proc-num, .step-num, .email-label, .form-msg, .jump-nav a,
  .uc-section-index, .tier-from, .fee-value, .run-row em, .practice-text {
    font-size: 0.68rem;
  }
  .plan-specs dd, .plan-includes li, .email-list li { font-size: 0.88rem; }
  .platform-tagline, .related-tag { font-size: 0.84rem; }
  /* The last few stragglers: widget internals and small UI affordances. */
  .drift-side-label, .drift-badge, .drift-badge::after,
  .copy-hint, .plan-flag, .plan-overage, .plan-overage span,
  .viz-field, .viz-layer-name, .viz-flag, .viz-field-name,
  .term-line, .rq, .lg, .fp, .md-ok, .x-row, .r-dest, .ln { font-size: 0.68rem; }
  .v-out, .drift-map .drift-field { font-size: 0.72rem; }
  .viz-stamp, .res-head, .res-chip, .res-row, .res-stamp, .res-stage,
  .dl-name, .tick, .m-foot, .md-req, .arc-name,
  .dg-sink-label, .cm-num,
  .viz-pool .fp, .viz-pool .fp b, .viz-log .lg { font-size: 0.68rem; }
}

@media (max-width: 640px) {
  .plan-specs dd { font-size: 0.88rem; }
  .code-body { font-size: 0.74rem; }
}

/* =========================================================================
   MOBILE NAVIGATION — rewritten
   The previous version had three faults: the panel was translucent so the
   hero read through it, the light-mode `.mega` rule (declared later in the
   sheet) turned the submenu back into a floating card, and the 44px tap
   targets combined with grid gaps produced 1,984px of scroll inside an 852px
   viewport. This block is deliberately last so it wins the cascade, and it
   treats the panel as a full-screen sheet: opaque, compact, one flat list.
   ========================================================================= */
@media (max-width: 900px) {
  /* backdrop-filter on an ancestor makes it the containing block for fixed
     descendants — which silently measured the panel against the 92px header
     instead of the viewport, collapsing it to 24px. The panel is opaque on
     mobile anyway, so the header does not need the blur here. */
  .site-header {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--bg);
  }
  body.nav-open .site-header { border-bottom: 1px solid var(--glass-line); }

  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 0; margin: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 0 24px;
    /* Opaque. A translucent sheet over a busy hero is unreadable, and no
       amount of backdrop blur fixes text-over-text. */
    background: var(--bg);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    max-height: none; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .nav-menu { display: flex; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--glass-line); }
  .nav-list > li + li { border-top: 0; }
  .nav-link {
    justify-content: space-between; width: 100%;
    min-height: 54px; padding: 0 22px; border-radius: 0;
    font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink);
  }
  .nav-link:hover, .nav-link:active { background: var(--glass); color: var(--hover); }
  .caret { width: 6px; height: 6px; }

  /* The submenu is an inline list, not a panel: no card, no shadow, no blur. */
  .has-mega .mega,
  :where(:root[data-mode="light"]) .has-mega .mega {
    position: static; transform: none; width: 100%;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
    background: var(--glass); border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 6px 0 10px; margin: 0;
  }
  .has-mega.open .mega { display: block; }
  .has-mega:hover .mega { display: none; }
  .has-mega.open:hover .mega { display: block; }

  .mega-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mega-group { padding: 0; border-left: 0; }
  .mega-group + .mega-group { border-left: 0; }
  .mega-heading {
    margin: 0; padding: 14px 22px 6px;
    font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ink-mute);
  }
  .mega-heading a { min-height: 0; }
  .mega-group ul { gap: 0; }
  .mega-group li a {
    display: flex; align-items: center; min-height: 46px;
    margin: 0; padding: 0 22px 0 34px; border-radius: 0;
    font-size: 0.86rem; color: var(--ink-dim);
  }
  .mega-group li a:active { background: var(--hover-glass); color: var(--hover); }
  .mega-foot { margin: 6px 0 0; padding: 12px 22px 0; border-top: 1px solid var(--glass-line); }
  .mega-foot a { min-height: 44px; display: inline-flex; align-items: center; }

  /* .btn gets width:100% on small screens, which with side margins overflows
     the panel. Box the button instead of stretching it. */
  .nav-cta { margin: 18px 22px 24px; width: auto; align-self: stretch; justify-content: center; }

  /* Category accordion. Twenty-nine links in a flat list is 1,700px of
     scrolling; collapsed categories put the whole catalog on one screen.
     The heading becomes the control — see main.js. */
  .mega-heading {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 48px; padding: 0 22px; margin: 0;
    border-top: 1px solid var(--glass-line); cursor: pointer;
  }
  .mega-group:first-child .mega-heading { border-top: 0; }
  .mega-chev { display: block; }
  .mega-heading .mega-chev {
    width: 6px; height: 6px; flex: none;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.22s var(--ease-out);
  }
  .mega-group.open .mega-heading { color: var(--hover); }
  .mega-group.open .mega-chev { transform: rotate(225deg) translateY(-2px); }
  .mega-group ul { display: none; padding-bottom: 6px; }
  .mega-group.open ul { display: grid; }
}