/* =============================================================
   Lossless — slick, futuristic dark-first design system
   References: Linear · Vercel · Cursor · Stripe (dark) · Anthropic
   Uses the auth landing's deep navy + brand blue + indigo/violet
   accents, with glass surfaces, gradient borders, and aurora glow.
   ============================================================= */

/* ---------- Tokens ----------------------------------------- */
:root {
  /* Brand — chrome-blue infinity, refined for dark */
  --brand-50:  #eaf2fc;
  --brand-100: #c4daf3;
  --brand-200: #98bbe6;
  --brand-300: #6e9bd0;
  --brand-400: #4a7ab8;
  --brand-500: #34609a;
  --brand-600: #2a4d7e;
  --brand-700: #1f3a62;
  --brand-800: #142848;
  --brand-900: #0a1830;

  /* Accents — futuristic, vibrant on dark */
  --cyan:        #5fc4ff;
  --cyan-glow:   rgba(95, 196, 255, 0.45);
  --indigo:      #6366f1;
  --indigo-glow: rgba(99, 102, 241, 0.45);
  --violet:      #8b5cf6;
  --violet-glow: rgba(139, 92, 246, 0.45);
  --pink:        #ec4899;
  --pink-glow:   rgba(236, 72, 153, 0.4);

  /* Neutrals — true dark */
  --black:    #000000;
  --void:     #05080f;
  --night:    #0a0e1a;
  --deep:     #0f1420;
  --abyss:    #131929;
  --surface:  #1a2034;
  --raised:   #232a44;
  --hairline: rgba(255, 255, 255, 0.06);
  --line:     rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --muted:    #6b7592;
  --soft:     #a8b2cc;
  --light:    #d4dae6;
  --white:    #ffffff;

  /* Semantic — DARK BY DEFAULT */
  --bg:           var(--void);
  --bg-elevated:  var(--night);
  --bg-sunken:    var(--black);
  --surface:      var(--deep);
  --border:       var(--line);
  --border-strong: var(--line-strong);
  --text:         var(--white);
  --text-muted:   var(--soft);
  --text-subtle:  var(--muted);
  --text-onbrand: var(--white);
  --link:         var(--brand-300);
  --link-hover:   var(--brand-200);
  --focus:        var(--cyan);
  --success:      #4ade80;
  --warning:      #fbbf24;
  --danger:       #f87171;

  /* Spacing — 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows + glows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
  --glow-brand: 0 0 0 1px rgba(74, 122, 184, 0.3), 0 0 40px rgba(52, 96, 154, 0.2);
  --glow-cyan: 0 0 0 1px rgba(95, 196, 255, 0.3), 0 0 40px rgba(95, 196, 255, 0.2);

  /* Type */
  --font-sans: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Charter, Georgia, serif;
  --font-mono: 'Plus Jakarta Sans', ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --fs-2xl:  clamp(2rem, 2vw + 1.5rem, 2.75rem);
  --fs-3xl:  clamp(2.75rem, 3.5vw + 1.5rem, 4.5rem);
  --fs-4xl:  clamp(3.5rem, 5vw + 1rem, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Motion */
  --t-fast: 140ms;
  --t-med:  240ms;
  --t-slow: 380ms;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reset / base ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "calt";
  overflow-x: hidden;
}

/* AURORA — site-wide ambient glow that lives behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(99, 102, 241, 0.18), transparent 55%),
    radial-gradient(800px 600px at 85% 110%, rgba(52, 96, 154, 0.20), transparent 55%),
    radial-gradient(600px 400px at 70% 30%, rgba(95, 196, 255, 0.06), transparent 55%);
}
body > * { position: relative; z-index: 1; }
/* keep the sticky header (and its dropdown menus) above main content —
   body > * gives every slot z-index:1, so the header needs to win the tie
   or dropdown panels render behind the page content. */
#site-header-slot { z-index: 60; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

:where(h1,h2,h3,h4) {
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { color: var(--text); }
::selection { background: rgba(99, 102, 241, 0.4); color: var(--white); }

/* ---------- Layout primitives ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

.section {
  /* More generous vertical breathing room — sections should feel like
     pages, not stacked rows. ~80px on small viewports → ~180px on wide. */
  padding-block: clamp(80px, 10vw, 180px);
  position: relative;
}
.section--tight { padding-block: clamp(56px, 6vw, 96px); }

/* ──────────────────────────────────────────────────────────────
   Section-by-section scroll snap. `proximity` (not mandatory) so
   long sections don't trap a reader mid-content — the snap engages
   only when you're already near a section boundary. scroll-padding-top
   compensates for the 64px sticky site-header. Smooth-scroll gives the
   ease-in/ease-out feel during the snap animation. Respects
   prefers-reduced-motion so accessibility users get instant scroll.
   ────────────────────────────────────────────────────────────── */
/* Snap behavior REMOVED 2026-05-30. The previous block forced
   `scroll-snap-type: y mandatory` on <html> + `scroll-snap-align: start`
   + `min-height: 100vh` on every .hero / .section / .lab-strip /
   .page-hero / .slide. That combination caused the symptom Vlad
   reported on 2026-05-30: "page is really sluggish when scrolling and
   the moment I start scrolling content goes blank completely."
   Root cause: `mandatory` fought `smooth` mid-scroll — the browser kept
   aborting paint while it picked which snap point to commit to. Each
   long section also got trapped because mandatory snap doesn't release
   cleanly when content exceeds the viewport height.
   Slide-deck behavior moved to a dedicated /v2 page (marketing-mockup/v2.html)
   that uses explicit JS-driven scrollIntoView transitions instead of
   forcing the whole site through a CSS snap container — keeps the
   slide feel without the blank-mid-scroll bug. */

/* "alt" — slightly lifted dark surface, no cream warmth here */
.section--alt {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
  border-block: 1px solid var(--hairline);
}

/* "deep" — full-bleed dark with the aurora */
.section--deep {
  background:
    radial-gradient(1000px 600px at 50% 0%, rgba(52, 96, 154, 0.25), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(99, 102, 241, 0.15), transparent 55%),
    linear-gradient(180deg, var(--abyss), var(--night));
  position: relative;
  border-block: 1px solid var(--hairline);
  overflow: hidden;
}
.section--deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.section--deep > * { position: relative; }

/* "cream" → warm-dark variant (since we're dark-mode) */
.section--cream {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(195, 154, 63, 0.06), transparent 60%),
    linear-gradient(180deg, #100c08, #0c0a06);
  border-block: 1px solid var(--hairline);
}

/* Eyebrow / kicker — elegant editorial small-caps italic serif */
.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--brand-200);
  margin-bottom: var(--s-4);
  text-transform: none;
}
.kicker::before {
  content: ""; width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-300));
}
.eyebrow { color: var(--brand-200); margin-bottom: var(--s-3); }

.lede {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 60ch;
  line-height: var(--lh-base);
}
.muted { color: var(--text-muted); }

/* ---------- Buttons — matte polymer-plate raised neumorphic --------
   Every button reads as a small polymer plate growing softly out of the
   dark background. Same vocabulary as the passcode submit tile: diffuse
   matte highlight band (NOT a specular shine), smooth top-to-bottom body
   gradient, multi-layer inset shadows describing a gentle dome, soft
   outer drop shadow for elevation. On press the plate descends with an
   ease-out curve (slow, gentle) and rebounds with the same easing.
   ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  border-radius: 14px;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  color: var(--text);
  transform: translateY(0);
  /* default: matte polymer slate (secondary-style — neutral). Primary +
     others override the background but inherit the geometry below. */
  background:
    /* diffuse top highlight band — matte, NOT a focused shine */
    radial-gradient(ellipse 110% 60% at 50% -20%,
      rgba(170, 200, 230, 0.22) 0%,
      rgba(170, 200, 230, 0.06) 45%,
      rgba(170, 200, 230, 0) 75%),
    /* body — smooth slate gradient, no banding */
    linear-gradient(180deg, #2a3b54 0%, #1b2a3f 55%, #131e30 100%);
  box-shadow:
    /* dome rim (top edge catches light) */
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 2px 1px -1px rgba(255, 255, 255, 0.10),
    /* underbelly (bottom edge) — soft dark seam */
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22),
    /* outer elevation — the button sits ABOVE the page */
    0 8px 18px -6px rgba(0, 0, 0, 0.55),
    0 2px 6px -2px rgba(0, 0, 0, 0.35);
  /* ── timing — ease-out on release. Slow + gentle, not snappy ── */
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform  280ms cubic-bezier(0.22, 1, 0.36, 1),
    color      280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover {
  /* a touch brighter, lifts 1px */
  background:
    radial-gradient(ellipse 110% 60% at 50% -20%,
      rgba(195, 220, 245, 0.28) 0%,
      rgba(195, 220, 245, 0.08) 45%,
      rgba(195, 220, 245, 0) 75%),
    linear-gradient(180deg, #324464 0%, #1f3148 55%, #15213a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 2px 1px -1px rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 -3px 9px rgba(0, 0, 0, 0.24),
    0 12px 24px -6px rgba(0, 0, 0, 0.60),
    0 3px 8px -2px rgba(0, 0, 0, 0.40);
  transform: translateY(-1px);
}
.btn:active {
  /* gentle press — same easing both directions so the press has weight */
  background:
    linear-gradient(180deg, #1a2840 0%, #111c33 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 3px -1px rgba(0, 0, 0, 0.40);
  transform: translateY(1px);
  transition:
    background 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform  160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(95, 196, 255, 0.30),
    0 8px 18px -6px rgba(0, 0, 0, 0.55);
}

/* Primary — brighter brand-blue polymer plate (the call to action) */
.btn--primary {
  color: var(--white);
  background:
    radial-gradient(ellipse 110% 60% at 50% -20%,
      rgba(190, 220, 250, 0.30) 0%,
      rgba(190, 220, 250, 0.08) 45%,
      rgba(190, 220, 250, 0) 75%),
    linear-gradient(180deg, #4a78b0 0%, #34609a 55%, #244a7a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 2px 1px -1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 -3px 9px rgba(0, 0, 0, 0.20),
    0 10px 22px -6px rgba(52, 96, 154, 0.55),
    0 2px 8px -2px rgba(0, 0, 0, 0.35);
}
.btn--primary:hover {
  background:
    radial-gradient(ellipse 110% 60% at 50% -20%,
      rgba(210, 232, 255, 0.36) 0%,
      rgba(210, 232, 255, 0.10) 45%,
      rgba(210, 232, 255, 0) 75%),
    linear-gradient(180deg, #5586bd 0%, #3a6aa4 55%, #295486 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 2px 1px -1px rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 -3px 10px rgba(0, 0, 0, 0.20),
    0 14px 30px -6px rgba(52, 96, 154, 0.65),
    0 3px 10px -2px rgba(0, 0, 0, 0.40);
  transform: translateY(-1px);
}
.btn--primary:active {
  background:
    linear-gradient(180deg, #2a4e7c 0%, #1b3960 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 3px -1px rgba(0, 0, 0, 0.40);
  transform: translateY(1px);
}

/* Secondary — same matte polymer geometry as base .btn (just confirms
   the body gradient so a secondary on a lighter section still reads). */
.btn--secondary {
  /* inherits the base .btn matte slate — explicit for clarity */
  color: var(--text);
}

/* Ghost — minimal, but still gets the gentle press. No plate by default;
   becomes a soft polymer plate on hover so the press has somewhere to
   travel TO. */
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}
.btn--ghost:hover {
  color: var(--text);
  background:
    radial-gradient(ellipse 110% 60% at 50% -20%,
      rgba(170, 200, 230, 0.14) 0%,
      rgba(170, 200, 230, 0) 70%),
    linear-gradient(180deg, rgba(40, 56, 80, 0.55) 0%, rgba(24, 36, 56, 0.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 4px 12px -4px rgba(0, 0, 0, 0.40);
  transform: translateY(-1px);
}
.btn--ghost:active {
  background: linear-gradient(180deg, rgba(20, 30, 48, 0.6) 0%, rgba(15, 22, 36, 0.6) 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(1px);
}

/* Size variant — larger plate with slightly stronger elevation */
.btn--lg {
  padding: 16px 28px;
  font-size: var(--fs-base);
  border-radius: 16px;
}

/* ---------- Header ----------------------------------------
   position:fixed so the nav floats above every section regardless
   of scroll-snap or scroll-container nesting. The matching
   scroll-padding-top:64px on <html> (in index.html) keeps snap
   targets from landing behind the header.                       */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
  /* Elevate above page content — must beat .section-deep z-index */
}
/* Push page content down so nothing hides behind the fixed header */
body { padding-top: 64px; }
.nav {
  display: flex; align-items: center; gap: var(--s-6);
  height: 64px;
}
.brand, .wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px; color: var(--text);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display: grid; place-items: center;
  color: white; font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.wordmark img {
  height: 26px; width: auto; display: block;
  filter: drop-shadow(0 1px 4px rgba(74, 122, 184, 0.4));
}
.wordmark__text {
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--text);
}
.nav-links {
  display: flex; gap: var(--s-5); align-items: center;
  list-style: none; padding: 0;
}
.nav-links a {
  color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 500;
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-cta {
  margin-left: auto;
  display: flex; gap: var(--s-2); align-items: center;
}
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  cursor: pointer; color: var(--text);
}

/* ---------- Hero ------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  /* Asymmetric: tighter top (was 96-180px, now 32-72px) so the
     headline sits closer to the nav and reads as vertically centered
     in a 13" viewport. Bottom stays generous for breathing room into
     the next section. */
  padding-block: clamp(32px, 4vw, 72px) clamp(80px, 10vw, 160px);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(99, 102, 241, 0.22), transparent 55%),
    radial-gradient(900px 600px at 100% 100%, rgba(52, 96, 154, 0.22), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(139, 92, 246, 0.12), transparent 55%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 100px);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
}
.hero__title {
  font-size: clamp(2.5rem, 4.5vw + 1rem, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero__title em, .display-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
  letter-spacing: -0.025em;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero__sub {
  margin-top: var(--s-5);
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.55;
}
.hero__cta {
  margin-top: var(--s-6);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}
.hero__meta {
  margin-top: var(--s-5);
  font-size: var(--fs-xs); color: var(--text-subtle);
  display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
}
.hero__meta strong { color: var(--text); font-weight: 600; }

.hero__visual {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ---------- Logos rail ------------------------------------ */
.logos {
  padding-block: var(--s-6);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,0.01);
}
.marquee__rule {
  display: flex; align-items: center; gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.marquee__rule::before, .marquee__rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.marquee__rule::after { background: linear-gradient(90deg, var(--line), transparent); }
.marquee__rule span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-subtle);
}
.marquee {
  display: flex; gap: clamp(40px, 6vw, 96px);
  align-items: center; justify-content: center;
  flex-wrap: wrap;
  padding-block: var(--s-5);
}
.marquee span {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text-subtle);
  opacity: 0.7;
  transition: all var(--t-fast) var(--ease);
}
.marquee span:hover { opacity: 1; color: var(--text); }
.logos__row {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  align-items: center; gap: var(--s-5);
}
.logos__row span {
  text-align: center; font-weight: 600;
  color: var(--text-subtle); font-size: var(--fs-sm);
}
.logos__caption {
  text-align: center; font-size: var(--fs-xs); color: var(--text-subtle);
  margin-bottom: var(--s-4);
  letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-mono);
}

/* ---------- Section heading ----------------------------- */
.section-heading, .section__head {
  display: grid; gap: var(--s-3);
  max-width: 70ch;
  margin-bottom: var(--s-7);
}
.section-heading h2 {
  font-size: clamp(2rem, 2.8vw + 1rem, 3.25rem);
  letter-spacing: -0.03em; line-height: 1.05;
  font-weight: 600;
}
.section-heading h2 em, .section__head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
}
.section-heading p, .section__head p {
  color: var(--text-muted); font-size: var(--fs-md); max-width: 60ch;
}

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}
.editorial > * { min-width: 0; }
.editorial h2 {
  font-size: clamp(2rem, 2.8vw + 1rem, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.editorial h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
}
.editorial p { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.6; max-width: 60ch; }
.editorial p + p { margin-top: var(--s-4); }
.editorial__sticky { position: sticky; top: 96px; }
@media (max-width: 800px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial__sticky { position: static; }
}

.h-display {
  font-size: clamp(2.75rem, 4vw + 1rem, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.h-display em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
  letter-spacing: -0.025em;
}

/* ---------- Pillar / feature cards ------------------------ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.pillars > * { min-width: 0; }
.pillar, .feature {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: grid; gap: var(--s-3);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 32px -16px rgba(0,0,0,0.5);
  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.pillar::before, .feature::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(95, 196, 255, 0.5), transparent);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}
.pillar:hover, .feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 80px rgba(99, 102, 241, 0.08);
}
.pillar:hover::before, .feature:hover::before { opacity: 1; }

.pillar__num, .feature__num {
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--brand-200);
}
.pillar h3, .feature h3 {
  font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);
  letter-spacing: -0.02em; line-height: 1.2;
  font-weight: 600;
}
.pillar p, .feature p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.pillar a, .feature a, .feature__link {
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--brand-300);
}
.pillar a::after, .feature__link::after { content: " →"; transition: transform var(--t-fast); display: inline-block; }
.pillar a:hover::after, .feature__link:hover::after { transform: translateX(4px); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-4);
}
.feature-grid > * { min-width: 0; }

/* ---------- Steps ---------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-4);
  counter-reset: step;
}
.step {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--brand-300);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.step h3 { margin-top: var(--s-3); font-size: var(--fs-lg); font-weight: 600; }
.step p  { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Quote ---------------------------------------- */
.quote {
  border-left: 2px solid var(--brand-400);
  padding: var(--s-5) var(--s-6);
  background: rgba(255,255,255,0.02);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-md);
  color: var(--text);
  max-width: 70ch;
}
.quote footer { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }

.pull-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.8vw + 1rem, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 30ch;
  color: var(--text);
}
.pull-quote::before {
  content: "“";
  display: block;
  font-family: var(--font-serif);
  font-size: 3.5em; line-height: 0.5;
  color: var(--brand-400);
  margin-bottom: 4px;
  opacity: 0.6;
}
.pull-quote em {
  font-style: italic;
  background: linear-gradient(120deg, var(--brand-200), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- CTA banner ----------------------------------- */
.cta-banner {
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(95, 196, 255, 0.15), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(139, 92, 246, 0.15), transparent 60%),
    linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr auto;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: var(--white); font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); font-weight: 600; letter-spacing: -0.025em; }
.cta-banner p  { color: rgba(255,255,255,0.75); margin-top: var(--s-2); max-width: 56ch; }
.cta-banner .btn--primary {
  background: var(--white); color: var(--brand-900);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.cta-banner .btn--primary:hover {
  background: var(--brand-50); color: var(--brand-900);
}
.cta-banner .btn--ghost {
  color: var(--white); border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
}
.cta-banner .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

/* ---------- Page hero ------------------------------------ */
.page-hero {
  padding-block: clamp(var(--s-7), 8vw, var(--s-9));
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(99, 102, 241, 0.15), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(52, 96, 154, 0.15), transparent 55%);
  border-bottom: 1px solid var(--hairline);
}
.page-hero--deep {
  background:
    radial-gradient(800px 500px at 90% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(139, 92, 246, 0.18), transparent 60%),
    linear-gradient(180deg, var(--abyss), var(--night));
}
.crumb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-3); font-family: var(--font-serif); font-style: italic; }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--text); }

/* ---------- Connections / connectors --------------------- */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}
.connector {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  transition: all var(--t-fast) var(--ease);
}
.connector:hover { border-color: var(--brand-400); background: rgba(74, 122, 184, 0.06); }
.connector__logo {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: var(--white);
  display: grid; place-items: center;
  font-weight: 700;
}
.connector__name { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.connector__cat  { font-size: var(--fs-xs); color: var(--text-muted); }

.badge {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.badge--live { color: var(--success); border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.08); }
.badge--beta { color: var(--cyan); border-color: rgba(95, 196, 255, 0.3); background: rgba(95, 196, 255, 0.08); }
.badge--soon { color: var(--text-muted); }

.cat-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); }
.cat-tab {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.cat-tab:hover { color: var(--text); border-color: var(--line-strong); }
.cat-tab[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  color: var(--white); border-color: var(--brand-400);
  box-shadow: 0 4px 16px rgba(52, 96, 154, 0.4);
}

/* ---------- Split, panel --------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: center;
}
.split img, .split .panel {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.panel {
  padding: var(--s-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- FAQ ------------------------------------------ */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--t-fast) var(--ease);
}
.faq summary {
  list-style: none; cursor: pointer;
  font-weight: 600; font-size: var(--fs-base);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-muted); font-weight: 400; font-size: 1.25em; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] { border-color: var(--brand-400); background: rgba(74, 122, 184, 0.04); }
.faq p { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- Footer --------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, transparent, var(--black));
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--s-6);
}
.footer-grid h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--brand-200);
  font-weight: 400;
  margin-bottom: var(--s-3);
}
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer-grid a { color: var(--text-muted); font-size: var(--fs-sm); }
.footer-grid a:hover { color: var(--text); }
.footer-bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: var(--s-3);
  font-family: var(--font-serif); font-style: italic;
}

/* ---------- Pricing -------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: stretch;
}
.tier {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: grid; gap: var(--s-4);
  position: relative;
  transition: all var(--t-med) var(--ease);
}
.tier:hover { border-color: var(--line-strong); }
.tier--featured {
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(95, 196, 255, 0.15), transparent),
    linear-gradient(180deg, rgba(74, 122, 184, 0.08), rgba(255,255,255,0.01));
  border-color: var(--brand-400);
  box-shadow: 0 0 0 1px var(--brand-400), 0 16px 40px rgba(52, 96, 154, 0.25);
}
.tier__tag {
  position: absolute; top: -12px; left: var(--s-6);
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  color: var(--white);
  font-family: var(--font-serif); font-size: 13px;
  font-weight: 400; font-style: italic;
  padding: 5px var(--s-4); border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(52, 96, 154, 0.4);
}
.tier__name {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400; font-style: italic;
  color: var(--brand-200);
}
.tier__price { display: flex; align-items: baseline; gap: var(--s-2); }
.tier__price strong {
  font-size: clamp(2.25rem, 2.4vw + 1rem, 3.25rem);
  font-weight: 700; letter-spacing: -0.04em;
  color: var(--text); line-height: 1;
}
.tier__price span { color: var(--text-muted); font-size: var(--fs-sm); }
.tier__sub { color: var(--text-muted); font-size: var(--fs-sm); }
.tier__features {
  list-style: none; padding: 0; display: grid; gap: var(--s-2);
  font-size: var(--fs-sm); margin-top: var(--s-3);
}
.tier__features li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--s-2);
  align-items: start; color: var(--text);
}
.tier__features li::before {
  content: "✓"; color: var(--brand-300); font-weight: 600; line-height: 1.4;
}
.tier__features li.muted::before { content: "·"; color: var(--text-subtle); }
.tier__features li.muted { color: var(--text-subtle); }
.tier .btn { width: 100%; margin-top: auto; }

/* ---------- Compare table -------------------------------- */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--text);
}
.compare-table thead th {
  font-weight: 600; color: var(--text); font-size: var(--fs-base);
  background: rgba(255,255,255,0.02);
}
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tbody th { font-weight: 500; color: var(--text-muted); }
.compare-table .y { color: var(--success); font-weight: 600; }
.compare-table .n { color: var(--text-subtle); }

/* ---------- Long-form prose ------------------------------ */
.prose {
  max-width: 70ch;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text);
}
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); font-size: var(--fs-xl); color: var(--text); font-weight: 600; }
.prose h3 { margin-top: var(--s-6); font-size: var(--fs-lg); color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: rgba(255,255,255,0.06); border: 1px solid var(--hairline);
  padding: 1px 6px; border-radius: var(--r-sm);
  color: var(--brand-200);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-6); }
.prose blockquote {
  border-left: 2px solid var(--brand-400);
  padding-left: var(--s-5);
  color: var(--text-muted);
  font-style: italic;
}
.prose strong { color: var(--text); }
.prose a { color: var(--brand-200); }
.prose a:hover { color: var(--cyan); }

.toc {
  position: sticky; top: 88px;
  font-size: var(--fs-sm);
}
.toc h4 {
  font-family: var(--font-serif); font-size: 14px;
  font-style: italic; color: var(--brand-200); font-weight: 400;
  margin-bottom: var(--s-3);
}
.toc ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.toc a { color: var(--text-muted); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--text); }

.long-form-grid {
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
}
@media (max-width: 800px) {
  .long-form-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
}

/* ---------- Blog ----------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-4);
}
.post {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-rows: 180px auto;
  transition: all var(--t-fast) var(--ease);
}
.post:hover {
  border-color: var(--brand-400);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.post__cover {
  background:
    radial-gradient(circle at 30% 30%, rgba(95, 196, 255, 0.30), transparent 60%),
    linear-gradient(135deg, var(--brand-600), var(--brand-900));
  position: relative;
}
.post__cover--alt {
  background:
    radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.30), transparent 55%),
    linear-gradient(135deg, var(--brand-500), var(--brand-300));
}
.post__cover--mono {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 14px, transparent 14px 28px),
    var(--abyss);
}
.post__body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.post__cat {
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 400; font-style: italic;
  color: var(--brand-200);
}
.post h3 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 500; font-family: var(--font-serif); }
.post h3 a { color: var(--text); }
.post h3 a:hover { color: var(--brand-200); }
.post__meta { font-size: 13px; color: var(--text-muted); font-family: var(--font-serif); font-style: italic; }
.post__excerpt { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

.article-hero {
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
  border-bottom: 1px solid var(--hairline);
}
.article-hero h1 { max-width: 22ch; font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem); }
.article-meta {
  display: flex; gap: var(--s-3); align-items: center;
  font-size: var(--fs-sm); color: var(--text-muted);
  margin-top: var(--s-4);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.author-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; color: var(--text);
  font-family: var(--font-sans);
}
.author-chip__avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: white; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* ---------- Forms ---------------------------------------- */
.form { display: grid; gap: var(--s-4); max-width: 520px; }
.field { display: grid; gap: var(--s-2); }
.field label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-base);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  transition: all var(--t-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-subtle); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand-400);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(52, 96, 154, 0.25);
}

/* ---------- People grid ---------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.person {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: grid; gap: var(--s-3);
}
.person__avatar {
  width: 56px; height: 56px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: var(--white); display: grid; place-items: center;
  font-weight: 700;
}
.person__name { font-weight: 600; color: var(--text); }
.person__role { color: var(--text-muted); font-size: var(--fs-sm); }
.person__bio { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Stats ---------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.stat {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.stat strong {
  display: block;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  font-weight: 700; letter-spacing: -0.025em;
  color: var(--brand-200);
  font-variant-numeric: tabular-nums;
}
.stat span { color: var(--text-muted); font-size: var(--fs-sm); }

.bignum {
  display: grid; gap: 4px;
}
.bignum strong {
  font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem);
  font-weight: 700; letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--white), rgba(255,255,255,0.6));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bignum span {
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
}

/* ---------- Bento ---------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
}
.bento > * { min-width: 0; }
.bento > * {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px -16px rgba(0,0,0,0.5);
  transition: all var(--t-fast) var(--ease);
}
.bento > a:hover {
  border-color: var(--brand-400);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.bento .b-2 { grid-column: span 2; }
.bento .b-3 { grid-column: span 3; }
.bento .b-4 { grid-column: span 4; }
.bento .b-6 { grid-column: span 6; }
.bento h3 {
  font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2;
  font-weight: 600;
}
.bento p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--s-2); line-height: 1.55; }

/* ---------- Diagrams · neumorphic glass --------------------
   Minority-Report aesthetic: raised glass surface with both
   recessed inner shadow + raised outer shadow + light edge.
   ----------------------------------------------------------- */
.diagram {
  position: relative;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    /* raised outer */
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    /* recessed inner glow at top */
    0 14px 32px -12px rgba(0,0,0,0.55),
    0 30px 80px -20px rgba(0,0,0,0.55);
}
.diagram::before {
  /* glass highlight line near the top edge */
  content: ""; position: absolute;
  top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}
.diagram::after {
  /* soft inner ambient glow */
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(95, 196, 255, 0.10), transparent 60%);
}
.diagram--canvas {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(99, 102, 241, 0.14), transparent 60%),
    radial-gradient(50% 40% at 100% 100%, rgba(95,196,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}
.diagram > * { position: relative; z-index: 1; }

/* Memory-stack editorial: organic plate that bleeds into the surrounding black.
   No border, no corner radius, no glass frosting — just a soft halo behind the
   diamond stack that fades to transparent at the edges. The pseudo-element
   carries the background so children (the SVG layers + icon labels) stay sharp. */
.diagram[data-diagram="memoryStackEditorial"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}
.diagram[data-diagram="memoryStackEditorial"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  height: auto;
  background:
    radial-gradient(58% 55% at 50% 32%, rgba(99, 102, 241, 0.18), transparent 70%),
    radial-gradient(45% 40% at 82% 85%, rgba(95, 196, 255, 0.08), transparent 70%),
    radial-gradient(85% 75% at 50% 55%, rgba(255, 255, 255, 0.04), transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 74% at 50% 50%, #000 28%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 74% at 50% 50%, #000 28%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.diagram[data-diagram="memoryStackEditorial"]::after {
  display: none;
}
.diagram__caption {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  margin-top: var(--s-4);
  display: flex; gap: var(--s-3); align-items: flex-start;
}
.diagram__caption::before {
  content: "Fig."; color: var(--brand-300); font-style: italic; font-weight: 400;
}

/* SVG diagram colors — auto-themed via CSS classes */
.svg-arrow { stroke: var(--brand-300); stroke-width: 1.5; fill: none; }
.svg-arrow--muted { stroke: var(--line-strong); }
.svg-node { fill: rgba(255,255,255,0.04); stroke: var(--line-strong); stroke-width: 1; }
.svg-node--brand { fill: var(--brand-500); stroke: var(--brand-300); }
.svg-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; fill: var(--light); }
.svg-label--muted { fill: var(--text-muted); font-weight: 400; }

.src-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--text);
}
.src-pill__icon {
  width: 18px; height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: white;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}

.cite {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: rgba(95, 196, 255, 0.08);
  border: 1px solid rgba(95, 196, 255, 0.25);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--cyan);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.cite:hover { background: rgba(95, 196, 255, 0.15); color: var(--cyan); }
.cite::before { content: "↗"; opacity: 0.7; }

.record {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  display: grid; gap: var(--s-2);
}
.record__type {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-300); font-weight: 600;
}
.record__title { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text); }
.record__meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.record__cites { display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--s-2); }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-4);
}
.timeline::before {
  content: ""; position: absolute;
  top: 16px; bottom: 16px; left: 100px;
  width: 1px; background: linear-gradient(180deg, var(--brand-400), transparent);
}
.timeline__date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  text-align: right; padding-top: 14px; position: relative;
}
.timeline__date::after {
  content: ""; position: absolute;
  top: 18px; right: -14px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand-300);
  box-shadow: 0 0 0 3px var(--bg), 0 0 12px var(--brand-400);
}
.timeline__entry { padding-bottom: var(--s-4); margin-left: var(--s-3); }
.timeline__entry .record { margin-top: var(--s-1); }

/* ---------- Ledger (terminal-grade) ---------------------- */
.ledger {
  font-family: var(--font-mono);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--abyss);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ledger thead th {
  font-family: var(--font-sans);
  text-align: left;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-subtle);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.ledger thead th:last-child, .ledger tbody td.amt { text-align: right; }
.ledger tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  vertical-align: top;
}
.ledger tbody tr { transition: background var(--t-fast) var(--ease); }
.ledger tbody tr:hover { background: rgba(255,255,255,0.02); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger .src {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--text-muted); display: block; margin-top: 3px;
}
.ledger .pos { color: var(--success); }
.ledger .neg { color: var(--danger); }
.ledger .ref { color: var(--brand-300); font-weight: 600; }

/* ---------- Icons ---------------------------------------- */
.icon {
  width: 40px; height: 40px;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 16px rgba(95, 196, 255, 0.2)) brightness(1.15);
}
.icon--sm  { width: 24px; height: 24px; }
.icon--md  { width: 40px; height: 40px; }
.icon--lg  { width: 56px; height: 56px; }
.icon--xl  { width: 80px; height: 80px; }

.icon-tile {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  position: relative;
  overflow: hidden;
}
.icon-tile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(95, 196, 255, 0.15), transparent 70%);
}
.icon-tile .icon { width: 36px; height: 36px; position: relative; }

/* ---------- Glass utility -------------------------------- */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glass strong { color: var(--white); }

.serif        { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---------- Responsive ----------------------------------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { aspect-ratio: 16 / 11; max-width: 600px; margin-inline: auto; width: 100%; }
  .pillars, .feature-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > *:nth-child(n+4) { grid-column: span 1; }
  .split { grid-template-columns: 1fr; }
  .cta-banner { grid-template-columns: 1fr; }
  .logos__row { grid-template-columns: repeat(3,1fr); }
  .pricing { grid-template-columns: 1fr; }
  .post-grid, .people { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bento > * { grid-column: span 6; }
  .bento .b-3 { grid-column: span 3; }
  .bento .b-2 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .nav-links, .nav-cta .btn--ghost { display: none; }
  .nav-toggle { display: inline-flex; }
  .pillars, .feature-grid, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .post-grid, .people { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .bento > *, .bento .b-2, .bento .b-3 { grid-column: span 6; }
  .compare-table { font-size: var(--fs-xs); }
  .compare-table th, .compare-table td { padding: var(--s-2) var(--s-3); }
  .timeline { grid-template-columns: 64px 1fr; }
  .timeline::before { left: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .feature:hover, .pillar:hover { transform: none; }
  .h-display em, .hero__title em { animation: none; }
  .flap__roll { transition: none !important; }
}

/* ============================================================
   SOLARI / SPLIT-FLAP DEPARTURES BOARD
   Cycles through your real domain records like an airport board.
   ============================================================ */
.solari-frame {
  position: relative;
  background:
    linear-gradient(180deg, #0a0e1a, #050810);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,0,0,0.5);
}
.solari-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px);
  mask-image: radial-gradient(ellipse at center, black 60%, transparent);
  -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent);
}
.solari-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 200px at 50% 0%, rgba(95, 196, 255, 0.10), transparent 60%),
    radial-gradient(500px 200px at 100% 100%, rgba(99, 102, 241, 0.10), transparent 60%);
}

.solari-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-200);
}
.solari-head__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.solari-head__brand::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px var(--success);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.solari-head__time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.solari-cols {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 80px 130px 110px;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--s-3);
  padding-inline: var(--s-2);
}

.solari-board {
  position: relative;
  display: grid;
  gap: 6px;
}
.solari-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 80px 130px 110px;
  gap: var(--s-3);
  align-items: center;
  padding: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  position: relative;
}
.solari-row::before {
  content: ""; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
  pointer-events: none;
}

.solari-cell {
  display: flex;
  gap: 1px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.solari-cell--right { justify-content: flex-end; }

.flap {
  --flap-h: 26px;
  --flap-w: 16px;
  display: inline-block;
  height: var(--flap-h);
  width: var(--flap-w);
  background: linear-gradient(180deg, #0d1730 0%, #060a18 100%);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  line-height: var(--flap-h);
  color: var(--brand-200);
  text-align: center;
  vertical-align: middle;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
.flap::after {
  content: ""; position: absolute;
  left: 0; right: 0;
  top: 50%; height: 1px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  pointer-events: none;
}
.flap--wide { --flap-w: 18px; }
.flap__roll {
  display: flex;
  flex-direction: column;
  transition: transform 280ms cubic-bezier(0.55, 0, 0.5, 1);
  will-change: transform;
}
.flap__roll--fast { transition-duration: 180ms; }
.flap__roll--slow { transition-duration: 420ms; }
.flap__char {
  height: var(--flap-h);
  display: grid;
  place-items: center;
  letter-spacing: -0.02em;
}

/* Highlighted "now departing" row — pulses subtly */
.solari-row--highlight {
  border-color: rgba(95, 196, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(95, 196, 255, 0.15),
    0 0 24px rgba(95, 196, 255, 0.18);
  animation: pulseHighlight 2.6s ease-in-out 1;
}
@keyframes pulseHighlight {
  0%   { box-shadow: inset 0 1px 0 rgba(95,196,255,0.15), 0 0 8px rgba(95,196,255,0.05); }
  50%  { box-shadow: inset 0 1px 0 rgba(95,196,255,0.25), 0 0 32px rgba(95,196,255,0.32); }
  100% { box-shadow: inset 0 1px 0 rgba(95,196,255,0.15), 0 0 8px rgba(95,196,255,0.05); }
}

/* Type chip column gets brand-blue treatment */
.solari-cell--type .flap { color: var(--cyan); }
/* Amount column gets warmer */
.solari-cell--amount .flap { color: #ffd574; }
/* Source column muted */
.solari-cell--source .flap { color: rgba(149, 195, 237, 0.85); }

.solari-foot {
  position: relative;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.solari-foot__legend {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
}
.solari-foot__legend strong {
  color: var(--brand-200); font-weight: 500;
  font-family: var(--font-mono);
}

@media (max-width: 720px) {
  .solari-cols, .solari-row { grid-template-columns: 48px minmax(0,1fr) 90px; }
  .solari-cols > *:nth-child(n+4), .solari-row > *:nth-child(n+4) { display: none; }
  .flap { --flap-w: 13px; --flap-h: 22px; font-size: 13px; line-height: 22px; }
}

/* ============================================================
   UPL · PROVENANCE ENVELOPE — product-style drawer
   Looks like the real reconciliation drawer / record card screen.
   Three columns: payload (typed record), origin (linked sources timeline),
   seal (signature card). Reuses .panel, .badge, .ledger styling cues.
   ============================================================ */
.upl {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,0,0,0.45);
}
.upl__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px 20px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.upl__chrome-l { display: inline-flex; align-items: center; gap: 12px; }
.upl__dots { display: inline-flex; gap: 6px; }
.upl__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.upl__dots span:nth-child(1) { background: #ff5f57; }
.upl__dots span:nth-child(2) { background: #febc2e; }
.upl__dots span:nth-child(3) { background: #28c840; }
.upl__path { color: var(--brand-200); font-weight: 600; }
.upl__chrome-r { display: inline-flex; gap: 14px; align-items: center; color: var(--text-subtle); }

.upl__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.upl__col {
  background: rgba(255,255,255,0.015);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.upl__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}

/* PAYLOAD — typed record card */
.upl__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0;
}
.upl__subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.upl__kv {
  display: grid;
  gap: 8px;
  font-size: 13px;
  margin: 0;
  padding: 0;
}
.upl__kv > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 6px;
  border-bottom: 1px dashed var(--hairline);
}
.upl__kv > div:last-child { border-bottom: 0; }
.upl__kv dt, .upl__kv .k { color: var(--text-muted); font-weight: 500; }
.upl__kv dd, .upl__kv .v { color: var(--text); font-weight: 500; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.upl__kv .v.pos { color: var(--success); }
.upl__kv .v.neg { color: var(--danger); }
.upl__kv .v.mono { font-family: var(--font-mono); font-size: 12px; }

.upl__metric {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(95, 196, 255, 0.06);
  border: 1px solid rgba(95, 196, 255, 0.18);
  border-radius: var(--r-md);
  display: grid;
  gap: 4px;
}
.upl__metric-label {
  font-size: 11px;
  color: var(--brand-200);
  font-family: var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.upl__metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.upl__metric-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* ORIGIN — linked sources timeline */
.upl__timeline {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 26px;
  margin: 0;
  list-style: none;
}
.upl__timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(95, 196, 255, 0.4),
    rgba(95, 196, 255, 0.10));
}
.upl__chapter {
  position: relative;
}
.upl__chapter::before {
  content: "";
  position: absolute;
  left: -22px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(95, 196, 255, 0.15);
}
.upl__chapter-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-200);
  font-weight: 600;
  margin-bottom: 4px;
}
.upl__chapter-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.upl__sources {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.upl__source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm, 6px);
  transition: border-color 160ms ease, background 160ms ease;
}
.upl__source:hover {
  border-color: rgba(95, 196, 255, 0.30);
  background: rgba(95, 196, 255, 0.04);
}
.upl__source-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 56px;
}
.upl__source-text {
  color: var(--text);
  font-size: 13px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upl__source-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

/* SEAL — signature card */
.upl__seal {
  display: grid;
  place-items: center;
  padding: 16px 0 8px;
}
.upl__seal-mark {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(95,196,255,0.30), rgba(52,96,154,0.18) 60%, rgba(0,0,0,0) 100%),
    rgba(0,0,0,0.45);
  border: 1.5px solid rgba(95, 196, 255, 0.45);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 24px rgba(0,0,0,0.35),
    0 0 0 6px rgba(95, 196, 255, 0.04);
}
.upl__seal-mark img { width: 48px; height: 48px; opacity: 0.95; }
.upl__seal-status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.upl__seal-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--success);
  text-align: center;
  margin-top: 2px;
}
.upl__seal-card {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  margin-top: 4px;
}
.upl__seal-card-row {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px;
}
.upl__seal-card-row .k {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.upl__seal-card-row .v {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.upl__btn-row { display: grid; gap: 6px; margin-top: 8px; }
.upl__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.upl__btn:hover { background: rgba(95,196,255,0.06); border-color: rgba(95, 196, 255, 0.30); }
.upl__btn--primary {
  background: rgba(95,196,255,0.10);
  border-color: rgba(95, 196, 255, 0.40);
  color: var(--brand-100);
}

.upl__foot {
  padding: 14px 22px;
  background: rgba(0,0,0,0.40);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.upl__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.upl__chip {
  padding: 5px 11px;
  background: rgba(95, 196, 255, 0.06);
  border: 1px solid rgba(95, 196, 255, 0.20);
  border-radius: 999px;
  font-size: 12px;
  color: var(--brand-200);
  font-weight: 500;
}
.upl__foot-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .upl__body { grid-template-columns: 1fr; }
  .upl__col { padding: 18px; }
}

/* ============================================================
   LEDGER PANE CROSS-FADE — Airport board ↔ Matrix rain panes
   stack and cross-fade smoothly instead of hard-swapping.
   ============================================================ */
.ledger-pane {
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}
.ledger-pane--hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 380ms;
}
/* On wide layouts, stack the two panes so the fade happens in place
   instead of one slot moving as the other appears. */
@media (min-width: 720px) {
  .ledger-pane + .ledger-pane {
    margin-top: -100%;
  }
}

/* ============================================================
   LEDGER VIEW SWITCHER — Airport board ↔ Matrix rain
   ============================================================ */
.ledger-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ledger-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ledger-switcher__btn:hover { color: var(--brand-200); }
.ledger-switcher__btn.is-active {
  background: rgba(95, 196, 255, 0.12);
  color: var(--brand-100);
  box-shadow: inset 0 0 0 1px rgba(95, 196, 255, 0.30);
}
.ledger-switcher__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-300);
  box-shadow: 0 0 8px rgba(95, 196, 255, 0.7);
}
.ledger-switcher__dot--green {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(95, 196, 255, 0.8);
}

/* ============================================================
   MATRIX-RAIN — same frame as Solari, canvas of falling glyphs.
   Lossless blue-steel palette (records + transactions writing out).
   ============================================================ */
.matrix-frame {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20, 50, 90, 0.40), #050a14 55%, #02050a 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(95, 196, 255, 0.08),
    0 24px 60px rgba(0,0,0,0.6);
}
.matrix-frame[hidden] { display: none; }
.matrix-frame__head {
  position: relative;
  z-index: 2;
  /* Two-row layout: brand/time line on top, record-type icon strip below.
     Previously a single horizontal flex; expanded to flex-direction:column
     so the icon strip can sit underneath without compressing the brand. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(95, 196, 255, 0.20);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(168, 197, 232, 0.85);
}
.matrix-frame__head-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.matrix-frame__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(95, 196, 255, 0.10);
  margin-top: 2px;
}
.matrix-frame__icons svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(168, 197, 232, 0.55);
  transition: color 200ms, transform 200ms;
}
.matrix-frame__icons svg:hover {
  color: var(--cyan, #5fc4ff);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .matrix-frame__icons { gap: 10px; }
  .matrix-frame__icons svg { width: 14px; height: 14px; }
}
.matrix-frame__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.matrix-frame__brand::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: blink 1.6s ease-in-out infinite;
}
.matrix-frame__time {
  color: rgba(168, 197, 232, 0.50);
  font-variant-numeric: tabular-nums;
}
.matrix-canvas {
  display: block;
  width: 100%;
  height: clamp(360px, 46vh, 560px);
  background: transparent;
  border: 1px solid rgba(95, 196, 255, 0.12);
  border-radius: 8px;
}
.matrix-frame__foot {
  position: relative;
  z-index: 2;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(168, 197, 232, 0.60);
  border-top: 1px solid rgba(95, 196, 255, 0.14);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.matrix-frame__legend {
  display: flex;
  gap: 14px 18px;
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
}
.matrix-frame__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0.42;
  color: rgba(168, 197, 232, 0.78);
  transition: opacity 220ms ease, color 220ms ease, text-shadow 220ms ease;
}
.matrix-frame__legend-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
  color: rgba(149, 195, 237, 0.85);
  transition: opacity 220ms ease, color 220ms ease, filter 220ms ease;
}
.matrix-frame__legend-icon[src] {
  /* legacy raster fallback */
  filter: brightness(0.85) saturate(0.7);
}
.matrix-frame__legend span.is-active {
  opacity: 1;
  color: rgba(232, 244, 255, 0.96);
  text-shadow: 0 0 10px rgba(95, 196, 255, 0.35);
}
.matrix-frame__legend span.is-active .matrix-frame__legend-icon {
  opacity: 1;
  color: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(95, 196, 255, 0.45));
}
/* Backward-compat: any leftover <strong> tag in older mark-up */
.matrix-frame__legend strong {
  font-weight: 600;
  font-family: var(--font-mono);
  color: rgba(95, 196, 255, 0.55);
  transition: color 220ms ease, text-shadow 220ms ease;
}
.matrix-frame__legend span.is-active strong {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(95, 196, 255, 0.65);
}

/* ──────────────────────────────────────────────────────────────
   Idle pulse — every legend item that ISN'T currently activated by
   the matrix-rain.js (no `is-active` class) cycles through a slow
   on/off rhythm, so the legend reads as a live taxonomy rather than
   a static caption. The stagger uses nth-child(11n+…) buckets so
   consecutive items have visibly different phases — produces a
   wave that moves across the grid.

   Items WITH `is-active` (driven by real records on stage) override
   this animation via the higher-specificity rule above.
   prefers-reduced-motion users get the static dim state.
   ────────────────────────────────────────────────────────────── */
@keyframes matrix-legend-pulse {
  0%, 70%, 100% {
    opacity: 0.32;
    color: rgba(168, 197, 232, 0.55);
  }
  35%, 50% {
    opacity: 0.85;
    color: rgba(220, 235, 255, 0.92);
    text-shadow: 0 0 8px rgba(95, 196, 255, 0.25);
  }
}
@keyframes matrix-legend-pulse-icon {
  0%, 70%, 100% {
    opacity: 0.55;
    filter: none;
  }
  35%, 50% {
    opacity: 1;
    color: rgba(95, 196, 255, 0.92);
    filter: drop-shadow(0 0 4px rgba(95, 196, 255, 0.35));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .matrix-frame__legend span:not(.is-active) {
    animation: matrix-legend-pulse 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .matrix-frame__legend span:not(.is-active) .matrix-frame__legend-icon {
    animation: matrix-legend-pulse-icon 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  /* 11-phase stagger — consecutive items light up at different times,
     producing a visible left-to-right wave across the grid. */
  .matrix-frame__legend span:nth-child(11n+1),
  .matrix-frame__legend span:nth-child(11n+1) .matrix-frame__legend-icon { animation-delay: 0s; }
  .matrix-frame__legend span:nth-child(11n+2),
  .matrix-frame__legend span:nth-child(11n+2) .matrix-frame__legend-icon { animation-delay: -0.82s; }
  .matrix-frame__legend span:nth-child(11n+3),
  .matrix-frame__legend span:nth-child(11n+3) .matrix-frame__legend-icon { animation-delay: -1.64s; }
  .matrix-frame__legend span:nth-child(11n+4),
  .matrix-frame__legend span:nth-child(11n+4) .matrix-frame__legend-icon { animation-delay: -2.45s; }
  .matrix-frame__legend span:nth-child(11n+5),
  .matrix-frame__legend span:nth-child(11n+5) .matrix-frame__legend-icon { animation-delay: -3.27s; }
  .matrix-frame__legend span:nth-child(11n+6),
  .matrix-frame__legend span:nth-child(11n+6) .matrix-frame__legend-icon { animation-delay: -4.09s; }
  .matrix-frame__legend span:nth-child(11n+7),
  .matrix-frame__legend span:nth-child(11n+7) .matrix-frame__legend-icon { animation-delay: -4.91s; }
  .matrix-frame__legend span:nth-child(11n+8),
  .matrix-frame__legend span:nth-child(11n+8) .matrix-frame__legend-icon { animation-delay: -5.73s; }
  .matrix-frame__legend span:nth-child(11n+9),
  .matrix-frame__legend span:nth-child(11n+9) .matrix-frame__legend-icon { animation-delay: -6.55s; }
  .matrix-frame__legend span:nth-child(11n+10),
  .matrix-frame__legend span:nth-child(11n+10) .matrix-frame__legend-icon { animation-delay: -7.36s; }
  .matrix-frame__legend span:nth-child(11n),
  .matrix-frame__legend span:nth-child(11n) .matrix-frame__legend-icon { animation-delay: -8.18s; }
}

/* ============================================================
   THREE WAYS IN — "One ledger. Three doors." (Claude-design style)
   Hairline-divided rows. Generous whitespace. Editorial kicker on
   the left rail. Restrained chrome — only dividers and the agent
   chips carry visual weight.
   ============================================================ */
.ledger-doors {
  display: grid;
  border-top: 1px solid var(--hairline);
}
.door {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(40px, 4vw, 64px) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.door__rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-serif);
}
.door__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
  font-weight: 500;
}
.door__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--brand-200);
  letter-spacing: -0.005em;
}
.door__title {
  font-size: clamp(1.375rem, 0.9vw + 1rem, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 28ch;
}
.door__body {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.door__link {
  display: inline-block;
  margin-top: 24px;
  color: var(--brand-200);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.door__link:hover {
  color: var(--brand-100);
  border-bottom-color: rgba(149, 195, 237, 0.45);
}

.agent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  transition:
    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    background 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.agent-chip:hover {
  border-color: rgba(95, 196, 255, 0.30);
  background: rgba(95, 196, 255, 0.04);
  transform: translateY(-1px);
}
.agent-chip img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
}
.agent-chip__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  padding-left: 10px;
  border-left: 1px solid var(--hairline);
  margin-left: 2px;
}
@media (max-width: 720px) {
  .door {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 36px 0;
  }
  .agent-chip__sub {
    display: none;
  }
}

/* ============================================================
   THREE DOORS — slide-style 4-column row variant
   Heading + three doors side-by-side, separated by hairline rules.
   Designed to read like a single editorial slide.
   ============================================================ */
/* Three-doors section — section title spans full width across all three
   doors (no longer a 4th column). Bottom hairline removed; only the top
   hairline frames the section against the matrix-rain above. */
.ledger-doors--slide {
  display: block;
  padding: clamp(40px, 4vw, 64px) 0;
  border-top: 1px solid var(--hairline);
  /* border-bottom removed per user request */
}
.ledger-doors__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.ledger-doors__heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ledger-doors__heading--full {
  max-width: 60rem;
  margin-bottom: clamp(40px, 4vw, 64px);
  padding-right: 0;
}
.ledger-doors__title {
  font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  max-width: 14ch;
}
.ledger-doors__lede {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 36ch;
}

.door--slide {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 clamp(20px, 2vw, 32px);
  border-left: 1px solid var(--hairline);
}
/* The first door in the row no longer has a left rail (it's the leftmost
   column under the spanning header). */
.ledger-doors__row .door--slide:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Workspaces list inside Door 1 — one line per workspace with a small
   inline SVG icon (taxonomy matches the matrix-rain legend). */
.door__workspaces {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.door__workspaces li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.door__workspaces svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand-200);
  opacity: 0.92;
}
.door--slide .door__rail {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
}
.door--slide .door__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
  font-weight: 500;
}
.door--slide .door__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--brand-200);
}
.door--slide .door__title {
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 4px;
  max-width: 22ch;
}
.door--slide .door__body {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  max-width: 32ch;
}
.door--slide .door__link {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  color: var(--brand-200);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.door--slide .door__link:hover {
  color: var(--brand-100);
  border-bottom-color: rgba(149, 195, 237, 0.45);
}
.door__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005));
  border: 1px solid var(--hairline);
  border-radius: 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.door__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: 0.95;
}

.agent-chips--stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.agent-chips--stack .agent-chip {
  width: 100%;
  padding: 7px 12px 7px 8px;
  font-size: 13px;
  gap: 10px;
}
.agent-chips--stack .agent-chip img {
  width: 22px;
  height: 22px;
}
.agent-chips--stack .agent-chip__sub {
  margin-left: auto;
  padding-left: 8px;
  font-size: 10px;
}

@media (max-width: 1100px) {
  .ledger-doors__row {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
  .ledger-doors__row .door--slide:first-child,
  .ledger-doors__row .door--slide:nth-child(3) {
    /* Restore left border on the wrapped row */
    border-left: 1px solid var(--hairline);
    padding-left: clamp(20px, 2vw, 32px);
  }
  .ledger-doors__row .door--slide:nth-child(2n+1) {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 720px) {
  .ledger-doors__row {
    grid-template-columns: 1fr;
  }
  .door--slide {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding: 28px 0 0;
  }
  .door--slide:first-of-type {
    padding-left: 0;
  }
  .agent-chips--stack .agent-chip__sub {
    display: none;
  }
}

/* ============================================================
   WORKSPACES — six lenses on one ledger
   Alternating left/right bands with mockup card + content stack.
   Claude-design aesthetic: hairline dividers, mono kicker rail,
   serif-italic emphasis, restrained chrome.
   ============================================================ */
.workspaces {
  display: grid;
  border-top: 1px solid var(--hairline);
}
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(56px, 6vw, 96px) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.workspace--reversed .workspace__visual {
  order: 2;
}
.workspace--reversed .workspace__content {
  order: 1;
}

/* ── content side ─────────────────────────────────────────────── */
.workspace__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.workspace__rail {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.workspace__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
  font-weight: 500;
}
.workspace__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--brand-200);
}
.workspace__title {
  font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--text);
  margin: 0 0 6px;
  max-width: 22ch;
}
.workspace__body {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.workspace__values {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.workspace__values li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.workspace__values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 1px;
  background: var(--brand-200);
  opacity: 0.5;
}
.workspace__quote {
  margin: 4px 0 0;
  padding: 16px 20px;
  background: rgba(95, 196, 255, 0.04);
  border-left: 2px solid var(--brand-200);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
}
.workspace__quote footer {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--text-subtle);
  letter-spacing: 0;
}
.workspace__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.workspace__proof > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workspace__proof strong {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.workspace__proof span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.workspace__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}
.cap-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  transition: border-color 200ms ease, color 200ms ease;
}
.cap-chip:hover {
  border-color: rgba(95, 196, 255, 0.30);
  color: var(--brand-100);
}
.workspace__cta {
  display: inline-block;
  margin-top: 12px;
  color: var(--brand-200);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
  align-self: flex-start;
}
.workspace__cta:hover {
  color: var(--brand-100);
  border-bottom-color: rgba(149, 195, 237, 0.45);
}

/* ── mockup card (looks like a real product screen) ──────────── */
.workspace-mockup {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,0,0,0.45);
}
.workspace-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: lowercase;
  color: var(--text-muted);
}
.workspace-mockup__dots {
  display: inline-flex; gap: 6px; flex-shrink: 0;
}
.workspace-mockup__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.workspace-mockup__dots span:nth-child(1) { background: #ff5f57; }
.workspace-mockup__dots span:nth-child(2) { background: #febc2e; }
.workspace-mockup__dots span:nth-child(3) { background: #28c840; }
.workspace-mockup__path {
  color: var(--brand-200);
  font-weight: 500;
}
.workspace-mockup__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline);
}
.workspace-mockup__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.workspace-mockup__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
.workspace-mockup__rows {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.workspace-mockup__rows > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  border-bottom: 1px dashed var(--hairline);
  font-size: 13px;
  color: var(--text);
}
.workspace-mockup__rows > li:last-child {
  border-bottom: 0;
}
.workspace-mockup__logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
}
.workspace-mockup__logo--mono {
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(95, 196, 255, 0.06);
  border: 1px solid rgba(95, 196, 255, 0.18);
  padding: 0;
}
.workspace-mockup__row-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-mockup__amt {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--text);
}
.workspace-mockup__amt.pos { color: var(--success); }
.workspace-mockup__amt.neg { color: var(--danger); }
.workspace-mockup__amt.status {
  color: var(--brand-200);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 900px) {
  .workspace,
  .workspace--reversed {
    grid-template-columns: 1fr;
  }
  .workspace--reversed .workspace__visual { order: 0; }
  .workspace--reversed .workspace__content { order: 1; }
  .workspace__proof {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   USE-CASE GALLERY — 10 horizontally-scrollable scenarios
   Re-uses .workspace-mockup tokens for visual consistency, with
   .workspace-mockup--gallery to fix card width and remove the
   visual=col / content=col layout (each card is just the chrome).
   ============================================================ */
.use-case-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 18px;
}

.use-case-gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(20px, calc((100vw - 76rem) / 2));
  /* bleed to viewport edges so the strip can scroll past the container */
  padding-block: 8px 28px;
  padding-inline: max(20px, calc((100vw - 76rem) / 2));
  margin-inline: calc(max(20px, calc((100vw - 76rem) / 2)) * -1);
  /* subtle hint that there's more to the right */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.use-case-gallery::-webkit-scrollbar { height: 8px; }
.use-case-gallery::-webkit-scrollbar-track { background: transparent; }
.use-case-gallery::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}
.use-case-gallery::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}
.use-case-gallery:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 4px;
  border-radius: 12px;
}

.use-case {
  flex: 0 0 360px;
  scroll-snap-align: start;
  display: flex;
}
.use-case .workspace-mockup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.use-case .workspace-mockup__rows {
  flex: 1;  /* rows fill any extra height so card heights line up */
}
/* Featured card (the trip story) gets a wider footprint to make room
   for the inline route map. */
.use-case--featured {
  flex: 0 0 432px;
}
.use-case--featured .workspace-mockup {
  background:
    radial-gradient(120% 60% at 80% 0%, rgba(95, 196, 255, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border-color: rgba(95, 196, 255, 0.22);
}

/* Trip route map — inline SVG strip with three drive segments */
.trip-map {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(95, 196, 255, 0.04), transparent);
}
.trip-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.trip-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.trip-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trip-map__swatch {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #5fc4ff;
  display: inline-block;
}
.trip-map__swatch--a { opacity: 0.95; }
.trip-map__swatch--b {
  opacity: 0.7;
  background-image: linear-gradient(90deg, #5fc4ff 50%, transparent 50%);
  background-size: 4px 2px;
  background-color: transparent;
}
.trip-map__swatch--c { opacity: 0.55; }

.use-case-foot {
  margin-top: 22px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 64ch;
}
.use-case-foot a {
  color: var(--brand-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 196, 255, 0.35);
}
.use-case-foot a:hover {
  border-bottom-color: var(--brand-200);
}

@media (max-width: 720px) {
  .use-case { flex-basis: 320px; }
  .use-case--featured { flex-basis: 360px; }
  .use-case-gallery {
    /* on phones, allow bleed to true viewport edge */
    padding-inline: 20px;
    margin-inline: -20px;
  }
}

/* ============================================================
   FINANCE · Reconciliation timeline — animated 7-step rail that
   shows one purchase being walked from email-receipt through
   delivery, refund, statement, and bank deposit. Sits inside the
   Finance .workspace-mockup as proof-of-the-chain.
   ============================================================ */
.recon-timeline {
  position: relative;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(95, 196, 255, 0.05), transparent 55%),
    linear-gradient(180deg, rgba(95, 196, 255, 0.025), transparent);
}
.recon-timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.recon-timeline__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-200);
}
.recon-timeline__amt {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--text);
  font-weight: 600;
}

/* The rail — vertical stack of 7 steps with a connector line behind */
.recon-timeline__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.recon-timeline__rail::before {
  content: "";
  position: absolute;
  left: 7px;     /* aligns with the dot center */
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(95, 196, 255, 0.45), rgba(95, 196, 255, 0.06));
  border-radius: 1px;
}

/* one step */
.recon-step {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  position: relative;
  opacity: 0;
  transform: translateX(-4px);
  animation: recon-step-in 0.45s cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes recon-step-in {
  to { opacity: 1; transform: translateX(0); }
}

.recon-step__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 1);
  border: 2px solid rgba(95, 196, 255, 0.45);
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.95),
    0 0 0 4px rgba(95, 196, 255, 0.18);
  position: relative;
  z-index: 2;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* The "done" state — solid blue dot with subtle ring pulse on landing */
.recon-step--done .recon-step__dot {
  background: #5fc4ff;
  border-color: #5fc4ff;
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.95),
    0 0 0 5px rgba(95, 196, 255, 0.25),
    0 0 12px rgba(95, 196, 255, 0.5);
}

/* The final step gets a brighter green-ish "settled" tint */
.recon-step--final .recon-step__dot {
  background: #58e7a3;
  border-color: #58e7a3;
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.95),
    0 0 0 5px rgba(88, 231, 163, 0.28),
    0 0 12px rgba(88, 231, 163, 0.55);
}

.recon-step__label {
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recon-step__when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Footer pills — summary chips below the rail */
.recon-timeline__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.recon-timeline__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
}
.recon-timeline__pill--ok {
  color: #58e7a3;
  border-color: rgba(88, 231, 163, 0.3);
  background: rgba(88, 231, 163, 0.08);
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .recon-step {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ============================================================
   MANIFESTO — three principles, large editorial typography
   ============================================================ */
.manifesto {
  /* Three principles laid out as three columns on one row, under the
     shared section heading. A hairline runs across the top of all
     three, "cutting" the row into columns. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  max-width: 1180px;
  margin-inline: auto;
}
.manifesto__row {
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.manifesto__num {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--brand-300);
  margin-bottom: var(--s-3);
}
.manifesto__title {
  /* Sized for a ~370px column — wraps to 2–3 lines per principle. */
  font-size: clamp(1.25rem, 0.8vw + 0.9rem, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text);
}
.manifesto__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
}
.manifesto__body {
  margin-top: var(--s-4);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-muted);
}
@media (max-width: 880px) {
  .manifesto { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ============================================================
   CONSTELLATION — customer quote cards, varied sizes
   ============================================================ */
.constellation {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: stretch;
}
.constellation > * { min-width: 0; }
.qcard {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-3);
  transition: all var(--t-med) var(--ease);
}
.qcard:hover {
  border-color: var(--brand-400);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.qcard::before {
  content: "“";
  position: absolute;
  top: -8px; left: 16px;
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  color: var(--brand-700);
  opacity: 0.4;
  pointer-events: none;
}
.qcard p {
  position: relative;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.qcard p strong, .qcard p em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
}
.qcard__attribution {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.qcard__avatar {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; color: var(--white);
  font-size: 13px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.qcard__avatar--violet { background: linear-gradient(135deg, var(--violet), #4c1d95); }
.qcard__avatar--cyan   { background: linear-gradient(135deg, var(--cyan), #0369a1); }
.qcard__avatar--amber  { background: linear-gradient(135deg, #fbbf24, #b45309); }
.qcard__avatar--rose   { background: linear-gradient(135deg, var(--pink), #9d174d); }
.qcard__avatar--emerald{ background: linear-gradient(135deg, #34d399, #047857); }
.qcard__name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.qcard__role {
  font-size: 13px; color: var(--text-muted);
  font-family: var(--font-serif); font-style: italic;
}
/* Sizes */
.qcard.q-2 { grid-column: span 2; }
.qcard.q-3 { grid-column: span 3; }
.qcard.q-4 { grid-column: span 4; }
.qcard.q-6 { grid-column: span 6; }
.qcard.q-3 p { font-size: var(--fs-md); }
.qcard.q-4 p { font-size: 1.25rem; }
.qcard.q-6 p { font-size: 1.5rem; line-height: 1.35; }

@media (max-width: 800px) {
  .constellation { grid-template-columns: 1fr 1fr; }
  .qcard.q-2, .qcard.q-3, .qcard.q-4, .qcard.q-6 { grid-column: span 2; }
}
@media (max-width: 540px) {
  .constellation { grid-template-columns: 1fr; }
  .qcard.q-2, .qcard.q-3, .qcard.q-4, .qcard.q-6 { grid-column: span 1; }
}

/* ============================================================
   IN-THE-LAB — investor deck reference band
   ============================================================ */
.lab-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, transparent, rgba(95, 196, 255, 0.03), transparent);
  padding-block: var(--s-7);
}
.lab-strip__lead {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--brand-200);
  margin-bottom: var(--s-3);
}
.lab-strip__title {
  font-size: clamp(1.75rem, 1.8vw + 1rem, 2.5rem);
  letter-spacing: -0.025em;
  font-weight: 500;
  max-width: 36ch;
  line-height: 1.15;
}
.lab-strip__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
}
.deck-list {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.deck {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
}
.deck:hover {
  border-color: var(--brand-400);
  background: rgba(74, 122, 184, 0.05);
}
.deck__num {
  font-family: var(--font-serif); font-size: 13px;
  font-style: italic; color: var(--brand-300);
}
.deck__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-family: var(--font-serif);
}
.deck__sub {
  font-size: 12px; color: var(--text-muted); line-height: 1.45;
}
@media (max-width: 800px) {
  .deck-list { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   INFINITY MARK HERO — animated ambient brand element
   ============================================================ */
.infinity-mark {
  position: absolute;
  pointer-events: none;
  width: 320px;
  height: 320px;
  opacity: 0.18;
  animation: spinInfinity 60s linear infinite;
}
@keyframes spinInfinity {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.infinity-mark--top-right { top: -80px; right: -80px; }
.infinity-mark--bottom-left { bottom: -120px; left: -120px; }

/* ============================================================
   THOUGHT-LEADERSHIP — Memory Stack diagram styling
   ============================================================ */
.stack-diagram {
  display: grid;
  gap: 4px;
  max-width: 720px;
  margin-inline: auto;
}
.stack-layer {
  position: relative;
  padding: var(--s-5) var(--s-6);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-4);
  transition: all var(--t-fast) var(--ease);
}
.stack-layer:hover {
  border-color: var(--brand-400);
  background: rgba(74, 122, 184, 0.06);
}
.stack-layer--ours {
  background: linear-gradient(135deg, rgba(74, 122, 184, 0.20), rgba(99, 102, 241, 0.12));
  border-color: var(--brand-400);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 32px rgba(52, 96, 154, 0.25);
}
.stack-layer__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.stack-layer__name em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand-200), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stack-layer__sub {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.stack-layer__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.stack-layer--ours .stack-layer__pill {
  background: var(--brand-500); color: var(--white);
  border-color: var(--brand-300);
}
.stack-arrow {
  text-align: center;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 13px;
  padding-block: 4px;
}

/* ============================================================
   PITCH DECK — full-viewport keyboard-navigable slides
   ============================================================ */
.deck {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  overflow-y: scroll;
  background: var(--void);
}
.deck::-webkit-scrollbar { width: 0; }

.slide {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 80px);
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

/* Slide hero variants */
.slide--cover {
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(99, 102, 241, 0.22), transparent 55%),
    radial-gradient(900px 600px at 100% 100%, rgba(52, 96, 154, 0.22), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(139, 92, 246, 0.16), transparent 55%);
}
.slide--deep {
  background:
    radial-gradient(1000px 600px at 50% 0%, rgba(52, 96, 154, 0.20), transparent 60%),
    linear-gradient(180deg, var(--abyss), var(--night));
}
.slide--cream {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(195, 154, 63, 0.06), transparent 60%),
    linear-gradient(180deg, #100c08, #0c0a06);
}

.slide__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
/* Suppress hyphen-mid-word breaking that was causing "mileage-/to-/property-" */
.slide__inner, .slide__inner * {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.slide__chrome {
  position: absolute;
  top: 24px; left: 0; right: 0;
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
}
.slide__brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-200);
}
.slide__brand img {
  width: 22px; height: 22px;
  filter: drop-shadow(0 1px 4px rgba(74, 122, 184, 0.4));
}
.slide__num {
  font-variant-numeric: tabular-nums;
}

.slide__kicker {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--brand-200);
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.slide__kicker::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.slide h1 {
  font-size: clamp(2.5rem, 4.5vw + 1rem, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 16ch;
}
.slide h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
  letter-spacing: -0.025em;
}
.slide h2 {
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  max-width: 24ch;
}
.slide h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-200);
}
.slide__lede {
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
  color: var(--text-muted);
  margin-top: var(--s-5);
  max-width: 56ch;
  line-height: 1.5;
}
.slide__lede strong { color: var(--text); font-weight: 600; }
.slide__sub {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  color: var(--brand-200);
  margin-top: var(--s-4);
  font-weight: 400;
}

.slide__cta {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}

/* Slide grids */
.slide__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.slide__cols--narrow {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.slide__cols > * { min-width: 0; }
@media (max-width: 900px) {
  .slide__cols, .slide__cols--narrow { grid-template-columns: 1fr; }
}

.slide__threecol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.slide__threecol > * { min-width: 0; }
@media (max-width: 800px) {
  .slide__threecol { grid-template-columns: 1fr; }
}

.slide__list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  font-size: 1.0625rem; line-height: 1.5;
  color: var(--text);
  max-width: 50ch;
  width: 100%;
  counter-reset: slide-list;
}
.slide__list li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  min-width: 0;
}
.slide__list li::before {
  content: counter(slide-list, decimal-leading-zero);
  counter-increment: slide-list;
  flex: 0 0 32px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--brand-300);
  padding-top: 2px;
}

.slide__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.slide__metrics > * { min-width: 0; }
.slide__metric strong {
  display: block;
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  font-weight: 700; letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, var(--white), rgba(255,255,255,0.55));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.slide__metric span {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
  display: block;
  margin-top: var(--s-2);
}
@media (max-width: 800px) {
  .slide__metrics { grid-template-columns: 1fr 1fr; }
}

.slide__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 24ch;
  color: var(--text);
}
.slide__quote::before {
  content: "“";
  font-family: var(--font-serif);
  font-size: 4em;
  line-height: 0.5;
  color: var(--brand-400);
  display: block;
  margin-bottom: 12px;
  opacity: 0.6;
}
.slide__quote em {
  font-style: italic;
  background: linear-gradient(120deg, var(--brand-200), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide__quote-attr {
  margin-top: var(--s-5);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
}

/* Slide nav rail */
.deck-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
}
.deck-nav__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.deck-nav__dot:hover { background: var(--brand-300); }
.deck-nav__dot[aria-current="true"] {
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
  transform: scale(1.4);
}

.deck-help {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
}
.deck-help kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  margin-inline: 2px;
  color: var(--brand-200);
}

/* Print → for PDF export */
@media print {
  .deck-nav, .deck-help { display: none; }
  .deck { height: auto; overflow: visible; scroll-snap-type: none; }
  .slide {
    min-height: 0;
    height: 720px;
    page-break-after: always;
    border-bottom: 0;
  }
  body::before { display: none; }
}

/* ============================================================
   STORIES — horizontal gallery of cross-source scenarios
   ============================================================ */
.stories__heading {
  max-width: 60rem;
  margin-bottom: clamp(32px, 3vw, 56px);
}

.stories__rail-wrap {
  position: relative;
  /* Let the rail bleed slightly past the container so cards near the
     edges can peek in/out of view. */
  margin: 0 calc(-1 * clamp(20px, 2vw, 40px));
  padding: 0 clamp(20px, 2vw, 40px);
}

.stories__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(640px, 720px);
  gap: clamp(20px, 2vw, 32px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding: clamp(20px, 2vw, 40px);
  padding: 8px 4px 32px;
  outline: 0;
}
.stories__rail::-webkit-scrollbar { height: 8px; }
.stories__rail::-webkit-scrollbar-track {
  background: transparent;
}
.stories__rail::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(95,196,255,0.32), rgba(74,122,184,0.20));
  border-radius: 4px;
}

@media (max-width: 720px) {
  .stories__rail {
    grid-auto-columns: 92vw;
    gap: 16px;
  }
}

/* Nav arrow buttons — floating on either side of the rail */
.stories__nav {
  position: absolute;
  top: 38%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(ellipse 110% 60% at 50% -10%, rgba(170,200,230,0.22) 0%, rgba(170,200,230,0) 70%),
    linear-gradient(180deg, #2a3b54 0%, #131e30 100%);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 6px 14px -4px rgba(0,0,0,0.55);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
  display: none;
}
.stories__rail-wrap:hover .stories__nav,
.stories__rail-wrap:focus-within .stories__nav { display: flex; align-items: center; justify-content: center; }
.stories__nav:hover { transform: translateY(-1px); }
.stories__nav:active { transform: translateY(1px); }
.stories__nav--prev { left: clamp(8px, 1vw, 20px); }
.stories__nav--next { right: clamp(8px, 1vw, 20px); }

/* Individual story card */
.story {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20,32,47,0.6) 0%, rgba(13,22,34,0.6) 100%);
  border: 1px solid rgba(170,195,225,0.10);
  border-radius: 20px;
  padding: 24px 24px 18px;
  transition: border-color 240ms, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.story:hover {
  border-color: rgba(95,196,255,0.30);
  transform: translateY(-2px);
}

.story__head { margin-bottom: 14px; }
.story__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.story__title {
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0;
}

.story__stage {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(95,196,255,0.06) 0%, rgba(95,196,255,0) 70%),
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(13,22,34,0.55) 100%);
  border: 1px solid rgba(170,195,225,0.08);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.story__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
}

.story__body {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}

.story__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(170,195,225,0.08);
}
.story__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(95,196,255,0.06);
  border: 1px solid rgba(95,196,255,0.18);
  letter-spacing: 0.01em;
}
.story__source-ic { color: var(--brand-200); display: inline-flex; }

/* ============================================================
   Vehicle fleet roster — list of vehicles inside the Vehicles
   workspace mockup. Each row: small brand icon + name + plate +
   mileage. Reads as a clean fleet summary above the expense rows.
   ============================================================ */
.vehicle-fleet {
  list-style: none;
  padding: 8px 14px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(95,196,255,0.04);
  border: 1px solid rgba(95,196,255,0.12);
  border-radius: 10px;
}
.vehicle-fleet__row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 12.5px;
  color: var(--text);
  border-bottom: 1px dashed rgba(170,195,225,0.10);
}
.vehicle-fleet__row:last-child { border-bottom: 0; }
.vehicle-fleet__icon {
  width: 18px; height: 18px;
  object-fit: contain;
  opacity: 0.9;
}
.vehicle-fleet__icon--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-muted);
}
.vehicle-fleet__name {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.vehicle-fleet__plate {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(170,195,225,0.08);
}
.vehicle-fleet__miles {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--brand-200);
  font-variant-numeric: tabular-nums;
}

/* Per-row reconciliation chip — small secondary line under each
   expense row showing which card / statement it was matched to. */
.workspace-mockup__rows--vehicles .workspace-mockup__row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workspace-mockup__recon {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--brand-200);
  opacity: 0.78;
}
.workspace-mockup__recon::before {
  content: "↳";
  margin-right: 5px;
  opacity: 0.55;
}

@media (max-width: 720px) {
  .vehicle-fleet__row {
    grid-template-columns: 22px 1fr auto;
  }
  .vehicle-fleet__plate { display: none; }
}

/* ============================================================
   Stories gallery — additions for unique-per-scene cards
   ============================================================ */

/* New header strip on each story card — icon + eyebrow + title.
   Replaces the prior plain header. */
.story__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.story__head-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 110% 60% at 50% -10%, rgba(170,200,230,0.20) 0%, rgba(170,200,230,0) 70%),
    linear-gradient(180deg, rgba(20,32,47,0.85) 0%, rgba(13,22,34,0.85) 100%);
  border: 1px solid rgba(170,195,225,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.40);
}
.story__head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Tone tints on each story stage — gives every card its own
   color identity without breaking the shared layout. */
.story__stage--cyan {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(95,196,255,0.08) 0%, rgba(95,196,255,0) 70%),
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(13,22,34,0.55) 100%);
}
.story__stage--amber {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(232,193,112,0.07) 0%, rgba(232,193,112,0) 70%),
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(22,18,10,0.55) 100%);
  border-color: rgba(232,193,112,0.10);
}
.story__stage--rose {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(232,154,160,0.07) 0%, rgba(232,154,160,0) 70%),
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(22,12,14,0.55) 100%);
  border-color: rgba(232,154,160,0.10);
}
.story__stage--violet {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(179,154,232,0.07) 0%, rgba(179,154,232,0) 70%),
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(14,12,22,0.55) 100%);
  border-color: rgba(179,154,232,0.10);
}
.story__stage--emerald {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(134,212,157,0.07) 0%, rgba(134,212,157,0) 70%),
    linear-gradient(180deg, rgba(5,8,15,0.55) 0%, rgba(10,18,14,0.55) 100%);
  border-color: rgba(134,212,157,0.10);
}

/* Hoverable markers on the LA→PS map (and any other scene that
   uses .story-marker). Hover state lights them up and brings the
   label forward. */
.story-marker {
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-marker:hover {
  transform: translateY(-1px) scale(1.06);
}
.story-marker:hover circle {
  filter: drop-shadow(0 0 6px rgba(95,196,255,0.55));
}
.story-marker__label {
  opacity: 0.92;
  transition: opacity 200ms ease;
}
.story-marker:hover .story-marker__label {
  opacity: 1;
}

/* Map-style story stage adjustments — keep the SVG flush */
.story__svg--map, .story__svg--calendar, .story__svg--forms,
.story__svg--board, .story__svg--funnel, .story__svg--network,
.story__svg--chart, .story__svg--listings, .story__svg--flow,
.story__svg--growth {
  width: 100%;
  height: auto;
  max-height: 280px;
  display: block;
}