/* ==========================================================================
   WithoutBall — site.css (THE stylesheet; hand-written, single file)
   Order: @font-face → tokens → reset/base → chrome → components → sections
          → owner blocks → responsive → reduced-motion kill.
   TOKENS ARE LAW: raw colors exist ONLY inside the tokens block below
   (enforced by src/internal/palette_consistency.ts). Everything else
   composes via var() / color-mix() / the --*-rgb tuples.
   ========================================================================== */

/* ==========================================================================
   Fonts — self-hosted variable WOFF2 (OFL; see /fonts/OFL.txt).
   latin + latin-ext subsets via unicode-range (TR/DE diacritics live in
   latin-ext). Mono is the system stack (spec §0.5 — no third family).
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens — the ONLY place raw color exists.
   ========================================================================== */
/* tokens:start */
:root {
  /* Native form controls follow the active theme (the explicit
     [data-theme="light"] trigger below flips this to `light`; dark is THE
     default — the OS scheme decides nothing). */
  color-scheme: dark;

  /* --- Brand palette (carried over from the old site — the dark DEFAULT) --- */
  --bg: #05060A;
  --bg-rgb: 5, 6, 10;
  --surface: #0A0E1A;
  --surface-2: #121A2B;
  --text: #E2E8F0;
  --white: #FFFFFF;
  --black: #000000;

  --accent: #63FF4B;        /* neon pitch */
  --accent-hover: #7CFF66;
  --violet: #B455FF;        /* neon AI */
  --blue: #2DD4BF;
  --amber: #F59E0B;
  --red: #EF4444;

  /* RGB tuples (for rgba(var(--x-rgb), a) gradients — keep in sync above) */
  --accent-rgb: 99, 255, 75;
  --violet-rgb: 180, 85, 255;
  --blue-rgb: 45, 212, 191;
  --amber-rgb: 245, 158, 11;
  --red-rgb: 239, 68, 68;
  --text-rgb: 226, 232, 240;
  --white-rgb: 255, 255, 255;

  /* --- Light palette mirrors (declared ONCE here, applied by the single
     explicit [data-theme="light"] trigger right after tokens:end — light is
     an explicit visitor choice, never an OS inference). Accents keep the
     brand hues but drop to ink depth — neon fails AA on paper
     (#63FF4B on #F6F8FB is 1.24:1; the deep pair below is ≥5:1 AA). --- */
  --light-bg: #F6F8FB;              /* cold "day-pitch paper"; theme-color light */
  --light-bg-rgb: 246, 248, 251;
  --light-surface: #FFFFFF;         /* cards elevate as white on paper */
  --light-surface-2: #EAEFF3;
  --light-text: #0E1524;            /* 17.1:1 on bg (AAA) */
  --light-text-rgb: 14, 21, 36;
  --light-accent: #26770D;          /* hue 106° — 5.30:1 on bg */
  --light-accent-hover: #1E5F0A;    /* darken on hover in light */
  --light-violet: #7A22DD;          /* hue 268° — 6.37:1 on bg */
  --light-blue: #0F766E;
  --light-amber: #92610A;
  --light-red: #C42323;
  --light-accent-rgb: 38, 119, 13;
  --light-violet-rgb: 122, 34, 221;
  --light-blue-rgb: 15, 118, 110;
  --light-amber-rgb: 146, 97, 10;
  --light-red-rgb: 196, 35, 35;

  /* --- Light elevation (numeric rgba must live in the tokens block; the
     trigger blocks remap --shadow-* to these) --- */
  --light-shadow-sm: 0 8px 20px rgba(14, 21, 36, 0.1), 0 2px 6px rgba(14, 21, 36, 0.08);
  --light-shadow: 0 18px 44px rgba(14, 21, 36, 0.12), 0 6px 16px rgba(14, 21, 36, 0.1);
  --light-shadow-lg: 0 32px 80px rgba(14, 21, 36, 0.16), 0 12px 32px rgba(14, 21, 36, 0.1);

  /* --- Canvas-stable tokens — NEVER remapped by the theme. The /preview/
     stage is a permanent dark product plate (it depicts the product's own
     screen inside themed window chrome); canvases that must stay neon read
     --neon-* instead of the remappable --accent/--violet. Values duplicate
     the dark token hexes so canvas fallback literals stay token-legal. --- */
  --neon-accent: #63FF4B;
  --neon-accent-rgb: 99, 255, 75;
  --neon-violet: #B455FF;
  --neon-violet-rgb: 180, 85, 255;
  --stage-bg: #0A0E1A;
  --stage-line-rgb: 255, 255, 255;
  --stage-text-rgb: 226, 232, 240;

  /* --- Behavior tokens (single-source component theming — the trigger blocks
     remap these instead of duplicating component rules per theme) --- */
  --aurora-opacity: 0.75;           /* light: .5 — full fog would gray the paper */
  --grain-opacity: 0.02;            /* light: .014 — speckle reads as dirt on paper */
  --spot-blend: screen;             /* light: multiply — screen is a no-op on white */
  --plate-line-rgb: 255, 255, 255;  /* light: the text tuple (ink gridlines) */

  /* --- Derived colors (the dim-fill / alpha-border / full-text grammar) --- */
  --text-dim: color-mix(in srgb, var(--text) 55%, transparent);
  /* Caption tier: content-bearing captions/labels — readable but quiet.
     55% holds WCAG AA (>=4.5:1) for small text on --bg and the card
     surfaces (45% measured 3.84:1 — content-bearing text may not fail AA).
     22% (--text-muted) is reserved for true decoration (hairlines, ticks). */
  --text-faint: color-mix(in srgb, var(--text) 55%, transparent);
  --text-muted: color-mix(in srgb, var(--text) 22%, transparent);
  --border: color-mix(in srgb, var(--white) 6.5%, transparent);
  --border-strong: color-mix(in srgb, var(--white) 14%, transparent);
  --hairline: color-mix(in srgb, var(--white) 4%, transparent);
  --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 26%, transparent);
  --violet-dim: color-mix(in srgb, var(--violet) 14%, transparent);
  --violet-border: color-mix(in srgb, var(--violet) 35%, transparent);
  --violet-glow: color-mix(in srgb, var(--violet) 22%, transparent);
  --blue-dim: color-mix(in srgb, var(--blue) 14%, transparent);
  --blue-border: color-mix(in srgb, var(--blue) 35%, transparent);
  --amber-dim: color-mix(in srgb, var(--amber) 14%, transparent);
  --amber-border: color-mix(in srgb, var(--amber) 35%, transparent);
  --neutral-dim: color-mix(in srgb, var(--text) 10%, transparent);
  --neutral-border: color-mix(in srgb, var(--text) 28%, transparent);
  --glass: color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 96%, transparent);
  --selection: color-mix(in srgb, var(--accent) 28%, transparent);

  /* --- Elevation (exactly 3 tiers, dark recipes) --- */
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.38), 0 6px 16px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.3);

  /* --- Typography --- */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --text-display: clamp(2.6rem, 1.4rem + 4.8vw, 4.8rem);
  --text-h1: clamp(2.1rem, 1.3rem + 2.8vw, 3.2rem);
  --text-h2: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  --text-h3: 1.2rem;
  --text-lg: 1.125rem;
  --text-body: 1.0625rem;   /* 17px */
  --text-sm: 0.9rem;
  --text-xs: 0.8125rem;
  --text-mono-label: 0.78rem; /* 12.5px mono labels */
  --tracking-label: 0.08em;

  /* --- Space scale: 4/8/12/16/24/32/48/64/96/128 --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(72px, 10vw, 128px);
  --container: 1120px;

  /* --- Nav metrics + safe areas (keep old behavior) --- */
  --nav-h: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-total-h: calc(var(--nav-h) + var(--safe-top));

  /* --- Motion --- */
  --motion-fast: 120ms;
  --motion: 180ms;
  --motion-slow: 280ms;
  --motion-deliberate: 520ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Radii (6/10/14/20/999) --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
}
/* tokens:end */

/* ==========================================================================
   Light theme — SINGLE explicit trigger (owner decision 2026-07-09: the site
   is DARK BY DEFAULT for everyone; light is applied only when the visitor
   chooses it via the header toggle, which sets data-theme="light" from the
   stored wb.theme). The scellis-era `@media (prefers-color-scheme: light)`
   auto-trigger was REMOVED on purpose — palette_consistency.ts check (e)
   fails the build if it is ever reintroduced. The block remaps the full
   property set to the --light-* mirrors declared in the tokens block, plus
   the light re-mixes of the derived grammar (% changes only — no literals,
   so it may sit below tokens:end and still pass the palette scan).
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--light-bg);
  --bg-rgb: var(--light-bg-rgb);
  --surface: var(--light-surface);
  --surface-2: var(--light-surface-2);
  --text: var(--light-text);
  --text-rgb: var(--light-text-rgb);
  --accent: var(--light-accent);
  --accent-hover: var(--light-accent-hover);
  --violet: var(--light-violet);
  --blue: var(--light-blue);
  --amber: var(--light-amber);
  --red: var(--light-red);
  --accent-rgb: var(--light-accent-rgb);
  --violet-rgb: var(--light-violet-rgb);
  --blue-rgb: var(--light-blue-rgb);
  --amber-rgb: var(--light-amber-rgb);
  --red-rgb: var(--light-red-rgb);
  /* Dim/border grammar re-mixed for light-on-paper (dark %s assume glow). */
  --text-dim: color-mix(in srgb, var(--text) 70%, transparent);
  --text-faint: color-mix(in srgb, var(--text) 60%, transparent);
  --text-muted: color-mix(in srgb, var(--text) 30%, transparent);
  --border: color-mix(in srgb, var(--text) 16%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 28%, transparent);
  --hairline: color-mix(in srgb, var(--text) 9%, transparent);
  /* Chip fills drop to 12% so full-color text on the fill holds AA. */
  --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
  --violet-dim: color-mix(in srgb, var(--violet) 12%, transparent);
  --blue-dim: color-mix(in srgb, var(--blue) 12%, transparent);
  --amber-dim: color-mix(in srgb, var(--amber) 12%, transparent);
  --shadow-sm: var(--light-shadow-sm);
  --shadow: var(--light-shadow);
  --shadow-lg: var(--light-shadow-lg);
  --aurora-opacity: 0.5;
  --grain-opacity: 0.014;
  --spot-blend: multiply;
  --plate-line-rgb: var(--light-text-rgb);
}

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  scroll-padding-top: calc(var(--nav-total-h) + 16px);
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: var(--text-body);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent-rgb), 0.03) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(var(--violet-rgb), 0.02) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 10% 100%, rgba(var(--blue-rgb), 0.02) 0%, transparent 55%);
  color: var(--text);
  line-height: 1.6;
  position: relative;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Aurora backdrop (GPU-friendly transforms only) — carried over. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(var(--accent-rgb), 0.14) 0%, transparent 60%),
    radial-gradient(45% 55% at 85% 25%, rgba(var(--violet-rgb), 0.12) 0%, transparent 62%),
    radial-gradient(40% 50% at 55% 85%, rgba(var(--blue-rgb), 0.1) 0%, transparent 60%);
  filter: blur(70px) saturate(1.15);
  opacity: var(--aurora-opacity);
  transform: translate3d(0, 0, 0);
  animation: aurora-drift 14s ease-in-out infinite alternate;
  will-change: transform;
}

/* Film grain overlay (data-URI feTurbulence) — carried over. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

input {
  font-family: inherit;
}

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

::selection {
  background: var(--selection);
  color: var(--text);
}

:where(section[id]) {
  scroll-margin-top: calc(var(--nav-total-h) + 16px);
}

/* --- Utilities --- */
.container {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding-left: max(clamp(16px, 3.5vw, 40px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3.5vw, 40px), env(safe-area-inset-right, 0px));
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.gradient-text {
  /* No achromatic midpoint: hold both hues, then cross through chromatic
     accent→violet mixes so the middle words never desaturate to gray. */
  background: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent) 30%,
    color-mix(in srgb, var(--accent) 55%, var(--violet)) 52%,
    color-mix(in srgb, var(--violet) 78%, var(--accent)) 72%,
    var(--violet) 92%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mono {
  font-family: var(--mono);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 10000;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--accent-border);
  color: var(--text);
  font-weight: 600;
  transition: top var(--motion) var(--ease);
}

.skip-link:focus {
  top: calc(var(--safe-top) + var(--space-3));
}

/* ==========================================================================
   Chrome — header (glass nav + mega dropdowns + language menu)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--nav-total-h);
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion) var(--ease), background var(--motion) var(--ease),
    box-shadow var(--motion) var(--ease);
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--nav-h);
  width: 100%;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex: 0 0 auto;
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

.brand-mark img {
  width: 28px;
  height: 28px;
  /* Flat single-color mark (transparent background, solid black fill — the
     older logo, restored 2026-07-09). It is tinted to the theme's text color
     with a brightness/invert filter: pure white on the dark DEFAULT theme,
     flipping to pure black under [data-theme="light"] (rule just below). */
  filter: brightness(0) invert(1);
}

:root[data-theme="light"] .brand-mark img {
  /* Light theme: flip the mark back to black so it reads on the paper nav. */
  filter: brightness(0);
}

.site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* The nav is built from native <details> menus — works with NO JS. The shell
   <details> holds ONLY the mobile hamburger summary; the group bar is its
   SIBLING (desktop shows groups, hides shell; ≤1100px gates groups on
   .site-nav__shell[open]). */
.site-nav__shell {
  display: none;
}

.site-nav__toggle {
  display: none;
}

.site-nav__groups {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.navmenu {
  position: relative;
}

.navmenu__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
}

.navmenu__summary::-webkit-details-marker {
  display: none;
}

.navmenu__summary:hover,
.navmenu--active > .navmenu__summary,
.navmenu[open] > .navmenu__summary {
  color: var(--text);
  background: var(--hairline);
}

.navmenu__chev {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform var(--motion) var(--ease);
}

.navmenu[open] > .navmenu__summary .navmenu__chev {
  transform: rotate(180deg);
}

.navmenu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-lg);
  z-index: 130;
}

/* Belt-and-braces: where backdrop-filter never runs, glass must go opaque —
   otherwise the hero headline reads straight through the menu text (and body
   copy ghosts through the 72%-glass sticky header on scroll). */
@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--bg);
  }

  .navmenu__panel {
    background: var(--surface);
  }

  @media (max-width: 1100px) {
    .site-nav__groups {
      background: var(--surface);
    }
  }
}

.navmenu__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.navmenu__list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
}

.navmenu__list a:hover,
.navmenu__list a.is-active {
  color: var(--text);
  background: var(--hairline);
}

/* Mobile-sheet CTA: hidden outside the sheet. Carries .btn (display:
   inline-flex, later in the file, equal specificity) — so this hide rule and
   its ≤1100px re-show both use the .site-nav__groups prefix to outrank it. */
.site-nav__groups .site-nav__cta {
  display: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--text);
  background: var(--hairline);
}

/* --- Mega panels: full-width glass plates under the bar --- */
.navmenu--mega {
  position: static;
}

.navmenu__panel--mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - 2 * var(--space-5)));
  min-width: 0;
  padding: var(--space-6);
}

/* Invisible bridge over the summary→panel gap so hover can cross it. */
.navmenu__panel--mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-3) - 4px);
  height: calc(var(--space-3) + 4px);
}

.megamenu {
  display: flex;
  align-items: stretch;
  gap: var(--space-6);
}

.megamenu__zone {
  flex: 1 1 0;
  min-width: 0;
}

.megamenu__zone--wide {
  flex: 2.05 1 0;
}

.megamenu__zone + .megamenu__zone {
  border-left: 1px solid var(--hairline);
  padding-left: var(--space-6);
}

/* Capabilities panel (the only 4-zone mega): stack SEE above ANTICIPATE in
   one rail so UNDERSTAND's two-column block never sits beside a lone item.
   Falls back to the flex row where :has() is unsupported. */
@media (min-width: 1101px) {
  .megamenu:has(> .megamenu__zone:nth-child(4)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr) minmax(0, 1.15fr);
    column-gap: var(--space-6);
    row-gap: var(--space-5);
  }

  .megamenu:has(> .megamenu__zone:nth-child(4)) > .megamenu__zone:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .megamenu:has(> .megamenu__zone:nth-child(4)) > .megamenu__zone:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .megamenu:has(> .megamenu__zone:nth-child(4)) > .megamenu__zone:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: var(--space-5);
  }

  .megamenu:has(> .megamenu__zone:nth-child(4)) > .megamenu__zone:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

.megamenu__kicker {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}

.megamenu__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-1) var(--space-3);
  align-content: start;
}

.megamenu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease);
}

.megamenu__item:hover {
  background: var(--hairline);
}

.megamenu__item.is-active {
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.megamenu__text {
  display: block;
  min-width: 0;
}

.megamenu__name {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.megamenu__desc {
  display: block;
  color: var(--text-dim);
  font-size: var(--text-xs);
  line-height: 1.45;
  margin-top: 2px;
  /* Two-line clamp keeps the panels tidy with long preserved blurbs. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.megamenu__cards {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.megamenu__card {
  position: relative;
  display: block;
  padding: var(--space-4) var(--space-5);
  padding-right: var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface));
  transition: border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.megamenu__card:hover {
  border-color: var(--accent-border);
  transform: translateY(-1px);
}

.megamenu__card.is-active {
  border-color: var(--accent-border);
}

.megamenu__card .megamenu__desc {
  margin-top: var(--space-1);
}

.megamenu__go {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--text-muted);
  transition: color var(--motion) var(--ease);
}

.megamenu__go .icon {
  display: block;
  width: 15px;
  height: 15px;
}

.megamenu__card:hover .megamenu__go {
  color: var(--accent);
}

/* --- Header actions: language switcher + CTA --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.lang-menu {
  position: relative;
}

.lang-menu__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 38px;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
}

.lang-menu__summary::-webkit-details-marker {
  display: none;
}

.lang-menu__summary:hover,
.lang-menu[open] > .lang-menu__summary {
  color: var(--text);
  background: var(--hairline);
}

.lang-menu__summary .icon {
  width: 15px;
  height: 15px;
}

.lang-menu__code {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

/* Right-anchor the dropdown; it stays a floating panel at EVERY width. */
.lang-menu .navmenu__panel {
  position: absolute;
  left: auto;
  right: 0;
  transform: none;
}

/* Theme toggle — a quiet ghost control matching the language-menu summary's
   metrics (38px control, radius-sm, dim-until-hover), sitting between the
   language switcher and the CTA. aria-pressed is reflected by theme.ts.
   Hidden until theme.ts's pre-paint bootstrap stamps `js-theme` on <html>:
   without JS it would be a focusable control that does nothing (the rest of
   the site is no-JS-safe). Bootstrap runs before the stylesheet — no flash. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
}

html.js-theme .theme-toggle {
  display: inline-flex;
}

.theme-toggle:hover {
  color: var(--text);
  background: var(--hairline);
}

/* Language hint — a slim dismissible banner injected directly under the
   header by nav_menu.ts when a stored wb.lang preference differs from the
   page locale. Hairline border, surface background, mono — unobtrusive. */
.lang-hint {
  position: relative;
  z-index: 99;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.lang-hint__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.lang-hint__text {
  min-width: 0;
}

.lang-hint__link {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.lang-hint__link:hover,
.lang-hint__link:focus-visible {
  text-decoration: underline;
}

.lang-hint__close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}

.lang-hint__close:hover,
.lang-hint__close:focus-visible {
  color: var(--text);
}

.nav-toggle-icon {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

/* ==========================================================================
   Chrome — footer
   ========================================================================== */
.site-main {
  min-height: 40vh;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 40%, var(--bg));
  padding-block: var(--space-5);
  margin-top: var(--space-9);
}

.site-main--home + .site-footer {
  margin-top: 0;
}

.site-footer__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.site-footer__tagline {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.site-footer__social {
  margin-left: auto;
}

.social-row ul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.social-row a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--hairline);
  color: var(--text-dim);
  transition: color var(--motion) var(--ease), border-color var(--motion) var(--ease),
    background var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.social-row a:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
  transform: translateY(-1px);
}

.social-row .icon {
  display: block;
  width: 15px;
  height: 15px;
}

.site-footer__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-xs);
}

.site-footer__copy {
  margin: 0;
  color: var(--text-faint);
}

.site-footer__copy a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion) var(--ease);
}

.site-footer__copy a:hover {
  color: var(--accent);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.site-footer__legal a {
  color: var(--text-dim);
  transition: color var(--motion) var(--ease);
}

.site-footer__legal a:hover {
  color: var(--text);
}

.site-footer__consent {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--motion) var(--ease);
}

.site-footer__consent:hover {
  color: var(--text);
}

/* ==========================================================================
   Components — buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease),
    color var(--motion) var(--ease), box-shadow var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn--secondary:hover {
  border-color: color-mix(in srgb, var(--text) 26%, transparent);
  background: var(--hairline);
  transform: translateY(-1px);
}

.btn__icon .icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Components — cards (with cursor spotlight; spotlight.ts sets --mx/--my)
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.card {
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  overflow: hidden;
  transition: transform var(--motion-slow) var(--ease-emph), border-color var(--motion-slow) var(--ease),
    box-shadow var(--motion-slow) var(--ease);
}

.card > * {
  position: relative;
  z-index: 1;
}

/* Accent top rule that fades in on hover (old cap-card detail). */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--violet), transparent);
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease);
}

/* Cursor spotlight (fine pointers; spotlight.ts writes --mx/--my). */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--motion-slow) var(--ease);
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.14),
    rgba(var(--violet-rgb), 0.1) 38%,
    transparent 62%
  );
  /* screen is a no-op on white — the token flips to multiply in light. */
  mix-blend-mode: var(--spot-blend);
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.card:hover::before,
.card:hover::after {
  opacity: 1;
}

.card__eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.card__body {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
}

.card__chip {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.card--link .card__arrow {
  display: inline-flex;
  margin-top: var(--space-4);
  color: var(--text-muted);
  transition: color var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.card--link .card__arrow .icon {
  width: 16px;
  height: 16px;
}

.card--link:hover .card__arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Cards with a chip need headroom so title and pill never collide. */
.card__chip + .card__eyebrow,
.card__chip + .card__title {
  padding-right: var(--space-9);
}

/* ==========================================================================
   Components — status chips (dim fill + alpha border + full-color text)
   Vocabulary: Built=accent · Prototype=blue · Example/Synthetic=violet ·
   Roadmap=amber · Research=neutral (spec §5).
   ========================================================================== */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--neutral-border);
  background: var(--neutral-dim);
  color: var(--text-dim);
  white-space: nowrap;
}

.status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-chip--built {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
}

.status-chip--prototype {
  border-color: var(--blue-border);
  background: var(--blue-dim);
  color: var(--blue);
}

.status-chip--example,
.status-chip--synthetic {
  border-color: var(--violet-border);
  background: var(--violet-dim);
  color: var(--violet);
}

.status-chip--roadmap {
  border-color: var(--amber-border);
  background: var(--amber-dim);
  color: var(--amber);
}

.status-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Components — page header, sections, spec heads
   ========================================================================== */
.page-header {
  padding: calc(var(--space-9)) 0 var(--space-6);
  position: relative;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 70% at 30% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%),
    radial-gradient(45% 60% at 80% 10%, rgba(var(--violet-rgb), 0.05) 0%, transparent 62%);
}

.page-header__title {
  font-size: var(--text-h1);
  font-weight: 700;
  max-width: 22ch;
  margin-bottom: var(--space-4);
  /* Long German/Turkish compounds (e.g. "Bewegungsintelligenz") must never
     clip at narrow widths: hyphenate per the page language, break as a last
     resort. Applies to all display headings via the shared heading rule. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.section__title,
.hero-home__title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* The home hero headline is display type: English must never hyphenate
   ("intelli-gence" at 375px breaks the flagship line) and the rag balances
   where supported. DE/TR keep last-resort hyphenation — compounds like
   "Intelligenzschicht" can overflow a phone column whole. */
.hero-home__title {
  hyphens: none;
  text-wrap: balance;
}

:lang(de) .hero-home__title,
:lang(tr) .hero-home__title {
  hyphens: auto;
}

.page-header__lead {
  font-size: var(--text-lg);
  color: var(--text-dim);
  max-width: 62ch;
  line-height: 1.7;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.section {
  padding: var(--space-8) 0;
}

.section__head {
  margin-bottom: var(--space-7);
}

.section__title {
  font-size: var(--text-h2);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: var(--text-body);
  color: var(--text-dim);
  max-width: 60ch;
  line-height: 1.7;
}

.spec-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-h2);
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.spec-head__num {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  flex: 0 0 auto;
}

/* ==========================================================================
   Components — ledger (datasheet table)
   ========================================================================== */
.ledger-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ledger thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.ledger tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.ledger tbody tr:last-child td {
  border-bottom: none;
}

.ledger tbody tr:hover {
  background: var(--hairline);
}

.ledger__param {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text);
  white-space: nowrap;
  position: relative;
}

/* Outranks `.ledger tbody td`'s shorthand — the tick needs a real text
   offset (the old rule silently lost this specificity fight, which is why
   the bar sat under the first character). */
.ledger tbody td.ledger__param {
  padding-left: calc(var(--space-4) + 12px);
}

/* Fixed 12px tick centered on the FIRST text line (cells are top-aligned
   and may wrap) — a full-row bar hugging the first character reads as a
   clipped glyph. */
.ledger__param::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-3) + 4px);
  height: 12px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0.75;
}

.ledger__row--violet .ledger__param::before {
  background: var(--violet);
}

.ledger__row--blue .ledger__param::before {
  background: var(--blue);
}

.ledger__row--amber .ledger__param::before {
  background: var(--amber);
}

.ledger__note {
  color: var(--text-dim);
}

/* ==========================================================================
   Components — prose, breadcrumbs, feature list
   ========================================================================== */
.prose {
  max-width: 720px;
}

.prose p {
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion) var(--ease);
}

.prose a:hover {
  color: var(--accent);
}

.prose h2,
.prose h3 {
  color: var(--text);
  margin: var(--space-6) 0 var(--space-3);
}

.prose ul {
  list-style: disc;
  padding-left: var(--space-5);
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--text-muted);
}

.breadcrumbs a {
  transition: color var(--motion) var(--ease);
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-faint);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3) var(--space-6);
  max-width: 820px;
}

.feature-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.feature-list__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  flex: 0 0 auto;
}

.feature-list__check .icon {
  width: 11px;
  height: 11px;
}

/* ==========================================================================
   Components — waitlist form (early-access; script lands with its owner)
   ========================================================================== */
.waitlist-form {
  max-width: 640px;
}

.waitlist-form__row {
  display: flex;
  gap: var(--space-3);
}

.waitlist-form__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}

.waitlist-form__input::placeholder {
  color: var(--text-faint);
}

.waitlist-form__input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.waitlist-form__submit {
  height: 52px;
  padding: 0 var(--space-6);
}

.waitlist-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

.waitlist-form__msg {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: var(--space-4);
  min-height: 1.2em;
  color: var(--text-dim);
}

.waitlist-form__msg.is-success {
  color: var(--accent);
}

.waitlist-form__msg.is-error {
  color: var(--red);
}

/* ==========================================================================
   Components — error page (404)
   ========================================================================== */
.error-page {
  text-align: center;
  padding-block: clamp(var(--space-8), 9vw, var(--space-10));
}

.error-page__code {
  /* Shrink-wrap so the gradient spans the glyphs, not the full column. */
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(4rem, 3rem + 8vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Chromatic midpoints — keeps the middle "0" from going gray. */
  background-image: linear-gradient(
    120deg,
    var(--accent) 0%,
    var(--accent) 30%,
    color-mix(in srgb, var(--accent) 55%, var(--violet)) 52%,
    color-mix(in srgb, var(--violet) 78%, var(--accent)) 72%,
    var(--violet) 92%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page__title {
  font-size: var(--text-h2);
  margin: var(--space-4) 0 var(--space-3);
}

.error-page__lead {
  color: var(--text-dim);
  max-width: 52ch;
  margin: 0 auto;
}

.error-page__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ==========================================================================
   Components — consent banner (GDPR; revealed by consent_banner.ts)
   ========================================================================== */
.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 950;
  padding: var(--space-4) 0 calc(var(--space-4) + var(--safe-bottom));
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: consent-banner-in var(--motion-slow) var(--ease-emph) both;
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.consent-banner__body {
  margin: 0;
  flex: 1 1 280px;
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.consent-banner__body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-banner__body a:hover {
  color: var(--accent);
}

.consent-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.consent-banner__btn {
  height: 40px;
  padding: 0 var(--space-4);
}

/* ==========================================================================
   Sections — home hero (full viewport; canvas + scrim + CSS fallback plate)
   ========================================================================== */
.site-main--home {
  display: flex;
  flex-direction: column;
}

.hero-home {
  position: relative;
  flex: 1;
  min-height: calc(100svh - var(--nav-total-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0 var(--space-9);
  overflow: hidden;
  isolation: isolate;
}

.hero-home__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* CSS-only fallback plate: a static echo of the "Shape of Space" field —
   the two territory washes (accent vs violet), a soft contested-seam band and
   the giant kickoff ring, all as WIDE soft gradients (no hairlines anywhere —
   thin lines render badly on some panels). The GPU renderer draws OVER this,
   so no-JS / no-WebGL / lost-context visitors still get a branded plate. */
.hero-home__plate {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(72% 96% at 14% 44%, rgba(var(--accent-rgb), 0.13) 0%, transparent 64%),
    radial-gradient(74% 100% at 88% 58%, rgba(var(--violet-rgb), 0.12) 0%, transparent 66%),
    radial-gradient(48% 66% at 54% 48%, rgba(var(--blue-rgb), 0.05) 0%, transparent 72%),
    radial-gradient(130% 150% at 50% 120%, rgba(var(--violet-rgb), 0.06) 0%, transparent 58%);
}

.hero-home__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Kickoff geometry echo: a wide soft center-circle band, its spot, and the
     contested-seam band leaning through it. Band widths are 8–10% stops —
     deliberately broad, never a line. */
  background-image:
    radial-gradient(closest-side circle at 58% 46%, transparent 54%, rgba(var(--text-rgb), 0.05) 63%, rgba(var(--text-rgb), 0.05) 72%, transparent 81%),
    radial-gradient(closest-side circle at 58% 46%, rgba(var(--text-rgb), 0.06) 0%, transparent 8%),
    linear-gradient(96deg, transparent 40%, rgba(var(--text-rgb), 0.045) 52%, transparent 64%);
}

.hero-home__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Scrim — guards the copy zone only; the field stays vivid to every edge
   (the old edge-to-bg radial made the corners read as blank plate). */
.hero-home__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(var(--bg-rgb), 0.42) 0%,
      transparent 22%,
      transparent 78%,
      rgba(var(--bg-rgb), 0.46) 100%
    ),
    radial-gradient(
      88% 64% at 50% 46%,
      rgba(var(--bg-rgb), 0.44) 0%,
      rgba(var(--bg-rgb), 0.2) 52%,
      transparent 76%
    );
}

.hero-home__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: min(1040px, 92vw);
}

.hero-home__title {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  line-height: 1.05;
  /* bg-colored halo keeps the headline legible over the live field. */
  text-shadow: 0 0 24px rgba(var(--bg-rgb), 0.85), 0 0 64px rgba(var(--bg-rgb), 0.65);
}

.hero-home__line {
  display: block;
}

.hero-home__title .gradient-text {
  text-shadow: none;
}

.hero-home__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto var(--space-7);
  line-height: 1.7;
  text-shadow: 0 0 18px rgba(var(--bg-rgb), 0.85);
}

.hero-home__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   Scroll reveal (progressive enhancement; see reveal.ts). Content is fully
   visible without JS; the hidden start state only applies under .js-reveal.
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--motion-deliberate) var(--ease-emph), transform var(--motion-deliberate) var(--ease-emph);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.js-reveal .reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.js-reveal .reveal[data-reveal-delay="3"] { transition-delay: 240ms; }

/* Print / programmatic full-page capture: no scroll events fire, so reveal
   everything unconditionally. */
@media print {
  .js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes aurora-drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.5%, 1.5%, 0) scale(1.04);
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

@keyframes consent-banner-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   OWNER BLOCKS — page families fill ONLY between their own markers, and
   include their page-scoped responsive rules INSIDE their block (the global
   responsive map below covers chrome + shared components only).
   ========================================================================== */

/* ===== capabilities (owner: capabilities-agent) ===== */

/* --- /capabilities/ overview — hero chips (preserved hero.chip_1..4) --- */
.cap-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-5);
}

.cap-hero-chip {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--hairline);
  white-space: nowrap;
}

/* --- /capabilities/ overview — marquee ticker (preserved marquee.*) ---
   Two identical groups; the track translates -50% for a seamless loop.
   The duplicate group is aria-hidden in the markup. */
.cap-marquee {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-4) 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 8%, var(--black) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--black) 8%, var(--black) 92%, transparent);
}

.cap-marquee__track {
  display: flex;
  width: max-content;
  animation: cap-marquee-scroll 42s linear infinite;
  will-change: transform;
}

.cap-marquee:hover .cap-marquee__track {
  animation-play-state: paused;
}

.cap-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding-right: var(--space-7);
}

.cap-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.cap-marquee__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  flex: 0 0 auto;
}

.cap-marquee__val {
  color: var(--accent);
  font-weight: 700;
}

@keyframes cap-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- /capabilities/ overview — stats strip (preserved stats.*), framed
   under the mono "Platform targets" chip (engineering targets, spec §3) --- */
.cap-stats {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

.cap-stats__frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: var(--space-7) var(--space-6) var(--space-6);
}

.cap-stats__chip {
  position: absolute;
  top: 0;
  left: var(--space-5);
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 12px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  background: var(--bg);
}

.cap-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.cap-stat {
  padding-left: var(--space-5);
  border-left: 1px solid var(--hairline);
}

.cap-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.cap-stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-2);
}

.cap-stat__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- /capabilities/ overview — 3×3 capability grid with zone kickers --- */
.cap-grid-section {
  padding-top: var(--space-6);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.cap-grid > .reveal {
  height: 100%;
}

.cap-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cap-card .card__arrow {
  margin-top: auto;
  padding-top: var(--space-4);
}

.cap-card__zone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.cap-card__zone::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.cap-card__zone--understand {
  color: var(--violet);
}

.cap-card__zone--anticipate {
  color: var(--amber);
}

.card__chip + .cap-card__zone {
  padding-right: var(--space-9);
}

/* --- capability pages — §-numbered sections, prose, cross-refs --- */
.cap-section + .cap-section {
  border-top: 1px solid var(--hairline);
}

.cap-prose {
  max-width: 68ch;
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.cap-refs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 560px;
  margin-top: var(--space-5);
}

.cap-ref {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.cap-ref:hover {
  border-color: var(--accent-border);
  transform: translateX(2px);
}

.cap-ref__path {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--accent);
  white-space: nowrap;
}

.cap-ref__label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.cap-ref .icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex: 0 0 auto;
  transition: color var(--motion) var(--ease);
}

.cap-ref:hover .icon {
  color: var(--accent);
}

/* --- capability pages — status callout + intended-use boundary --- */
.cap-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 720px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.cap-status .status-chip {
  flex: 0 0 auto;
  margin-top: 2px;
}

.cap-status__text {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
}

.cap-boundary {
  max-width: 720px;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius);
  background: var(--amber-dim);
}

.cap-boundary__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-2);
}

.cap-boundary__text {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.65;
}

/* --- capability pages — figure vignettes (inline SVG, token-colored) --- */
.cap-figure {
  max-width: 720px;
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.cap-figure__canvas {
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
}

.cap-vig {
  width: min(100%, 560px);
  height: auto;
}

.cap-figure__caption {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.6;
}

.cap-figure__chips {
  display: inline-flex;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin-top: 1px;
}

/* SVG vignette strokes/fills — tokens only (palette law) */
.vg-bone {
  stroke: color-mix(in srgb, var(--text) 72%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.vg-bone--dim {
  stroke: var(--text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}

.vg-joint {
  fill: var(--text);
}

.vg-joint--accent {
  fill: var(--accent);
}

.vg-joint--violet {
  fill: var(--violet);
}

.vg-joint--amber {
  fill: var(--amber);
}

.vg-dot {
  fill: var(--text-muted);
}

.vg-accent {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.vg-violet {
  stroke: var(--violet);
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}

.vg-amber {
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.vg-dim {
  stroke: var(--border-strong);
  stroke-width: 1.5;
  fill: none;
}

.vg-hair {
  stroke: color-mix(in srgb, var(--text) 11%, transparent);
  stroke-width: 1;
  fill: none;
}

.vg-dash {
  stroke-dasharray: 4 5;
}

.vg-band {
  fill: var(--neutral-dim);
}

.vg-track {
  fill: var(--hairline);
}

.vg-bar {
  fill: var(--text-muted);
}

.vg-bar--accent {
  fill: var(--accent);
}

.vg-cone {
  fill: var(--accent-dim);
}

.vg-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--text-dim);
}

.vg-label--accent {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--accent);
}

.vg-label--amber {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--amber);
}

.vg-enc {
  font-family: var(--mono);
  font-size: 15px;
  fill: var(--violet);
}

/* --- capabilities — responsive (scoped to this family's pages) --- */
@media (max-width: 1100px) {
  .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cap-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-5);
  }

  .cap-stat:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 720px) {
  .cap-grid {
    grid-template-columns: 1fr;
  }

  .cap-marquee__group {
    gap: var(--space-5);
    padding-right: var(--space-5);
  }

  .cap-stats__frame {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
}

@media (max-width: 560px) {
  .cap-stats__grid {
    grid-template-columns: 1fr;
  }

  .cap-stat {
    padding-left: 0;
    border-left: none;
  }

  .cap-figure__caption {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Reduced motion: stop the ticker entirely (the global kill also collapses
   motion tokens; this pins the track so no loop state is visible). */
@media (prefers-reduced-motion: reduce) {
  .cap-marquee__track {
    animation: none;
  }
}

/* ===== end capabilities ===== */

/* ===== docs (owner: docs-agent) ===== */

/* --- /docs/ overview — moat grid (four verbatim tech cards) --- */
.docs-moat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.docs-moat__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}

.docs-moat__num {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.docs-moat__card .card__eyebrow,
.docs-moat__card .card__title {
  padding-right: var(--space-9);
}

.docs-moat__card .card__body {
  flex: 1;
}

/* --- Mono tag pills (the 12 preserved tech tags) --- */
.docs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.docs-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  white-space: nowrap;
}

.docs-moat__card:hover .docs-tag {
  border-color: var(--border-strong);
}

/* --- Doc-page body sections (tighter rhythm than marketing bands) --- */
.section--doc {
  padding: var(--space-7) 0;
}

.section--doc .prose {
  max-width: 720px;
}

.section--doc .ledger-wrap {
  margin-top: var(--space-6);
}

.section--doc .ledger-wrap + .prose {
  margin-top: var(--space-5);
}

/* --- Shared figure caption (mono footnote grammar) --- */
.docs-figcap {
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-faint);
  margin-top: var(--space-4);
  max-width: 68ch;
}

/* --- Flow figure: mono pipeline strip (architecture, inference) --- */
.docs-flow {
  margin-top: var(--space-6);
}

.docs-flow__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow-x: auto;
}

.docs-flow__node {
  flex: 1 1 0;
  min-width: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.docs-flow__node--out {
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.docs-flow__code {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.docs-flow__node--out .docs-flow__code {
  color: var(--accent);
}

.docs-flow__sub {
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: 1.4;
}

.docs-flow__arrow {
  align-self: center;
  flex: 0 0 auto;
  font-family: var(--mono);
  color: var(--text-faint);
}

/* --- Mask-pattern figure (foundation-model) --- */
.mask-fig {
  margin-top: var(--space-6);
}

.mask-fig__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

.mask-fig__tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
}

.mask-fig__svg {
  display: block;
  width: 100%;
  height: auto;
}

.mask-cell {
  fill: var(--surface-2);
}

.mask-cell--m {
  fill: var(--accent-dim);
  stroke: var(--accent-border);
  stroke-width: 1;
}

.mask-fig__name {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: var(--space-3);
}

/* --- Stat strip (proof-of-concept compute) --- */
.docs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.docs-stat {
  border-left: 1px solid var(--border-strong);
  padding-left: var(--space-4);
}

.docs-stat__value {
  display: block;
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.docs-stat__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--space-1);
}

/* --- Data-scale ladder (corpus size → earned capability) --- */
.docs-ladder {
  margin-top: var(--space-6);
  max-width: 820px;
}

.docs-ladder__rung {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--hairline);
}

.docs-ladder__rung:last-child {
  border-bottom: 1px solid var(--hairline);
}

.docs-ladder__scale {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  padding-top: 2px;
}

.docs-ladder__body .status-chip-row {
  margin-bottom: var(--space-2);
}

.docs-ladder__body p {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 58ch;
}

/* --- Split figure: today vs research direction (simulation) --- */
.docs-split {
  margin-top: var(--space-6);
}

.docs-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.docs-split__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
}

.docs-split__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.docs-split__head .status-chip-row {
  margin-bottom: 0;
}

.docs-split__title {
  font-family: var(--display);
  font-size: var(--text-h3);
  font-weight: 700;
}

.docs-split__list li {
  position: relative;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.6;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.docs-split__list li:last-child {
  margin-bottom: 0;
}

.docs-split__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  color: var(--text-muted);
}

/* --- Vision blockquote (simulation §01) --- */
.docs-quote {
  max-width: 720px;
  border-left: 2px solid var(--violet-border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--surface);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}

.docs-quote p {
  font-family: var(--display);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text);
  text-wrap: balance;
}

/* --- Code figure (API examples) --- */
.code-figure {
  margin-top: var(--space-6);
  max-width: 780px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.code-figure__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.code-figure__dots {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.code-figure__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.code-figure__title {
  flex: 1;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-figure__bar .status-chip-row {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.code-figure__pre {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-dim);
  tab-size: 2;
}

.code-figure__pre code {
  font-family: inherit;
}

.code-figure .docs-figcap {
  padding: 0 var(--space-5) var(--space-5);
  margin-top: 0;
}

/* --- Skeleton topology figure (/docs/skeleton/ — brand moment) --- */
.skel-figure {
  margin-top: var(--space-6);
  max-width: 780px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%),
    var(--surface);
  padding: var(--space-6);
}

.skel-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
}

.skel-bone {
  stroke: var(--text-dim);
  stroke-width: 2;
  stroke-linecap: round;
}

.skel-head {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

.skel-ground {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 7;
}

.skel-leader {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.skel-halo {
  fill: var(--accent-dim);
}

.skel-halo--root {
  fill: var(--violet-dim);
}

.skel-joint {
  fill: var(--accent);
}

.skel-joint--root {
  fill: var(--violet);
}

.skel-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  fill: var(--text-dim);
}

.skel-label__idx {
  fill: var(--text-faint);
}

/* --- Docs responsive (scoped to docs pages) --- */
@media (max-width: 900px) {
  .docs-moat {
    grid-template-columns: 1fr;
  }

  .docs-split__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .docs-flow__track {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-flow__arrow {
    transform: rotate(90deg);
  }

  .docs-ladder__rung {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .skel-figure {
    padding: var(--space-4);
  }

  .skel-label {
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  .docs-moat__card {
    padding: var(--space-5) var(--space-4);
  }

  .docs-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== end docs ===== */

/* ===== solutions+experience (owner: solutions-agent) ===== */

/* ----- /solutions/ — audience cards (green figure / violet chart) ----- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.audience-card {
  --aud: var(--accent);
  --aud-dim: var(--accent-dim);
  --aud-border: var(--accent-border);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  overflow: hidden;
  transition: transform var(--motion-slow) var(--ease-emph), border-color var(--motion-slow) var(--ease),
    box-shadow var(--motion-slow) var(--ease);
}

.audience-card--violet {
  --aud: var(--violet);
  --aud-dim: var(--violet-dim);
  --aud-border: var(--violet-border);
}

.audience-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--aud), transparent 70%);
  opacity: 0.5;
  transition: opacity var(--motion-slow) var(--ease);
}

.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 45% at 20% 0%, var(--aud-dim) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease);
}

.audience-card:hover {
  transform: translateY(-3px);
  border-color: var(--aud-border);
  box-shadow: var(--shadow-sm);
}

.audience-card:hover::before,
.audience-card:hover::after {
  opacity: 1;
}

.audience-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Skeletal line-art pose mark (topology-figure grammar) — no icon tile. */
.audience-card__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--aud);
  filter: drop-shadow(0 0 12px var(--aud-dim));
}

.audience-card__mark svg {
  width: 100%;
  height: 100%;
}

.audience-card__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aud);
  background: var(--aud-dim);
  border: 1px solid var(--aud-border);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  white-space: nowrap;
}

.audience-card__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 700;
  color: var(--text);
}

.audience-card__desc {
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Preserved f1..f4 as instrument rows — mono index + hue tick + hairlines
   (the ledger grammar) instead of the template check-circle list. */
.audience-specs {
  list-style: none;
  margin-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.audience-specs__row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-3) calc(var(--space-2) + 10px);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.audience-specs__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 1px;
  background: var(--aud);
  opacity: 0.75;
}

.audience-specs__idx {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.audience-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--aud);
}

.audience-card__arrow .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--motion) var(--ease);
}

.audience-card:hover .audience-card__arrow .icon {
  transform: translateX(3px);
}

/* ----- /solutions/ third band: compact 4-step workflow previews linking
   both detail pages (mono chip grammar, hue per audience) ----- */
.wf-preview {
  --wfp: var(--accent);
  --wfp-dim: var(--accent-dim);
  --wfp-border: var(--accent-border);
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.wf-preview--violet {
  --wfp: var(--violet);
  --wfp-dim: var(--violet-dim);
  --wfp-border: var(--violet-border);
}

.wf-preview + .wf-preview {
  margin-top: var(--space-4);
}

.wf-preview:hover {
  border-color: var(--wfp-border);
  transform: translateY(-1px);
}

.wf-preview__tag {
  flex: 0 0 auto;
  min-width: 96px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wfp);
}

.wf-preview__steps {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
}

.wf-preview__step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  white-space: nowrap;
}

.wf-preview__step + .wf-preview__step::before {
  content: "→";
  position: absolute;
  left: calc(-1 * var(--space-5) + 5px);
  color: var(--text-faint);
}

.wf-preview__idx {
  color: var(--wfp);
  font-weight: 600;
}

.wf-preview__go {
  flex: 0 0 auto;
  color: var(--wfp);
}

.wf-preview__go .icon {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform var(--motion) var(--ease);
}

.wf-preview:hover .wf-preview__go .icon {
  transform: translateX(3px);
}

/* ----- Workflow diagram (4 skeletal step glyphs on a hairline rail) ----- */
.workflow {
  --wf: var(--accent);
  --wf-dim: var(--accent-dim);
  --wf-border: var(--accent-border);
  margin: 0;
}

.workflow--violet {
  --wf: var(--violet);
  --wf-dim: var(--violet-dim);
  --wf-border: var(--violet-border);
}

.workflow__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  list-style: none;
}

/* The rail: a hairline running through the node centers. */
.workflow__list::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--wf-border), var(--border) 55%, transparent);
}

.workflow__step {
  position: relative;
  padding-top: 0;
}

.workflow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--wf-border);
  color: var(--wf);
  box-shadow: 0 0 0 6px var(--bg), 0 0 18px var(--wf-dim);
  margin-bottom: var(--space-4);
}

.workflow__glyph svg {
  width: 24px;
  height: 24px;
  display: block;
}

.workflow__idx {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.workflow__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.workflow__desc {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
}

/* ----- Roadmap cards (labeled Roadmap; no pricing) ----- */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
}

.roadmap-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease-emph);
}

.roadmap-card:hover {
  border-color: var(--amber-border);
  transform: translateY(-2px);
}

.roadmap-card__chip {
  display: inline-flex;
  margin-bottom: var(--space-3);
}

.roadmap-card__name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.roadmap-card__desc {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
}

.roadmap-boundary {
  margin-top: var(--space-5);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-dim);
  border-left: 2px solid var(--amber-border);
  padding-left: var(--space-4);
  max-width: 62ch;
}

/* ----- Related links (compact link rows — link, don't restate) ----- */
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.related-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--motion) var(--ease), background var(--motion) var(--ease),
    transform var(--motion) var(--ease);
}

.related-link:hover {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  transform: translateY(-1px);
}

.related-link__eyebrow {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: 0 0 auto;
  min-width: 9ch;
}

.related-link__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.related-link__arrow {
  color: var(--text-muted);
  display: inline-flex;
  transition: color var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.related-link__arrow .icon {
  width: 16px;
  height: 16px;
}

.related-link:hover .related-link__arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ----- /preview/ — window chrome + canvas stage ----- */
.section--preview {
  padding-top: var(--space-6);
}

.preview-window {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.preview-window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.preview-window__dots {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.preview-window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.preview-window__dot--red {
  background: var(--red);
  opacity: 0.8;
}

.preview-window__dot--amber {
  background: var(--amber);
  opacity: 0.8;
}

.preview-window__dot--accent {
  background: var(--accent);
  opacity: 0.8;
}

.preview-window__title {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-window__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  flex: 0 0 auto;
}

.preview-window__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse-dot 1.6s var(--ease) infinite;
}

.preview-window__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.preview-modes {
  display: inline-flex;
  gap: var(--space-2);
}

.preview-mode-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--motion) var(--ease), border-color var(--motion) var(--ease),
    background var(--motion) var(--ease);
}

.preview-mode-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.preview-mode-btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent-border);
}

.preview-window__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  white-space: nowrap;
}

.preview-window__stage {
  position: relative;
  /* Deliberately theme-STABLE: the stage depicts the product's own dark
     screen inside themed window chrome, so it is pinned to the --stage-*
     tokens (never remapped) — the plate and its CSS gridlines must not flip
     with the site theme (pitch_canvas.ts reads the same stable tokens). */
  background-color: var(--stage-bg);
  background-image:
    linear-gradient(rgba(var(--stage-line-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--stage-line-rgb), 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.preview-window__stage canvas {
  display: block;
  width: 100%;
  height: 420px;
}

/* ----- /how-it-works/ — glyph nodes on a luminous dashed trace + mono
   spec rail (instrument-dense at 1440) ----- */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-7);
  align-items: start;
}

.how-steps {
  position: relative;
}

.how-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-6);
  list-style: none;
}

/* Animated dashed trace through the node centers (pipeline-chip grammar);
   static under reduced motion via the global token collapse. */
.how-steps__rail {
  position: absolute;
  top: 27px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue), var(--violet), var(--accent));
  background-size: 200% 100%;
  opacity: 0.5;
  -webkit-mask-image: repeating-linear-gradient(90deg, var(--black) 0 8px, transparent 8px 14px);
  mask-image: repeating-linear-gradient(90deg, var(--black) 0 8px, transparent 8px 14px);
  animation: how-rail-flow 7s linear infinite;
}

.how-step {
  position: relative;
}

/* Glyph node: video frame → skeleton → dashboard tile. */
.how-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 6px var(--bg);
  margin-bottom: var(--space-4);
}

.how-step__node svg {
  display: block;
  width: 26px;
  height: 26px;
}

.how-step__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.how-step--accent .how-step__node {
  color: var(--accent);
  border: 1px solid var(--accent-border);
  background: linear-gradient(180deg, var(--accent-dim), transparent 80%), var(--surface);
  box-shadow: 0 0 0 6px var(--bg), 0 0 18px var(--accent-dim);
}

.how-step--blue .how-step__node {
  color: var(--blue);
  border: 1px solid var(--blue-border);
  background: linear-gradient(180deg, var(--blue-dim), transparent 80%), var(--surface);
  box-shadow: 0 0 0 6px var(--bg), 0 0 18px var(--blue-dim);
}

.how-step--violet .how-step__node {
  color: var(--violet);
  border: 1px solid var(--violet-border);
  background: linear-gradient(180deg, var(--violet-dim), transparent 80%), var(--surface);
  box-shadow: 0 0 0 6px var(--bg), 0 0 18px var(--violet-dim);
}

.how-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.how-step__desc {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.7;
}

/* Mono spec rail — sanctioned pipeline numbers only. */
.how-spec {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
}

.how-spec__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}

.how-spec__title::before {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

.how-spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--text-xs);
}

.how-spec__row:last-child {
  border-bottom: none;
}

.how-spec__label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.how-spec__value {
  color: var(--text);
  text-align: right;
}

@keyframes how-rail-flow {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 200% 0;
  }
}

/* ----- /how-it-works/ — pipeline strip + claim-safe note ----- */
.pipeline-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.pipeline-strip__stage {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  white-space: nowrap;
}

.pipeline-strip__stage--out {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent-border);
}

.pipeline-strip__arrow {
  font-family: var(--mono);
  color: var(--text-faint);
  font-size: 0.8rem;
}

.pipeline-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 74ch;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.pipeline-note .status-chip {
  flex: 0 0 auto;
  margin-top: 2px;
}

.pipeline-link {
  max-width: 480px;
}

.pipeline-link .related-link {
  display: flex;
}

/* ----- Responsive (scoped to this family's pages) ----- */
@media (max-width: 900px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }

  .workflow__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The rail only makes sense as a single line — hide it on wrapped grids. */
  .workflow__list::before {
    display: none;
  }

  .preview-window__stage canvas {
    height: clamp(280px, 48vw, 420px);
  }

  .wf-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .wf-preview__steps {
    gap: var(--space-2) var(--space-3);
  }

  /* Wrapped chips orphan the inter-chip arrows — drop them. */
  .wf-preview__step + .wf-preview__step::before {
    content: none;
  }

  .wf-preview__go {
    display: none;
  }

  .how-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .how-steps__list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Connector turns vertical along the glyph nodes. */
  .how-steps__rail {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--accent), var(--blue), var(--violet));
    background-size: 100% 100%;
    -webkit-mask-image: repeating-linear-gradient(180deg, var(--black) 0 8px, transparent 8px 14px);
    mask-image: repeating-linear-gradient(180deg, var(--black) 0 8px, transparent 8px 14px);
    animation: none;
  }

  .how-step {
    padding-left: calc(56px + var(--space-4));
  }

  .how-step__node {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 560px) {
  .audience-card {
    padding: var(--space-5);
  }

  .workflow__list {
    grid-template-columns: 1fr;
  }

  .preview-window__bar {
    gap: var(--space-3);
  }

  .preview-window__title {
    text-align: left;
  }

  .preview-window__stage canvas {
    height: clamp(240px, 62vw, 420px);
  }

  .preview-window__meta {
    flex-wrap: wrap;
    white-space: normal;
    gap: var(--space-2) var(--space-4);
  }

  .related-links {
    grid-template-columns: 1fr;
  }

  .related-link__eyebrow {
    min-width: 0;
  }
}

/* ===== end solutions+experience ===== */

/* ===== vision+company (owner: vision-agent) ===== */
/* Pages: /vision/ + /vision/beyond-football/ + /vision/agents/ + /team/ +
   /contact/ + /early-access/. All colors via tokens; page-scoped responsive
   rules live at the end of this block. */

/* --- Shared: mono figure captions + arrowed text links --- */
.vc-figcap {
  margin-top: var(--space-4);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 72ch;
}

.vc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--motion) var(--ease);
}

.vc-link .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--motion) var(--ease);
}

.vc-link:hover {
  color: var(--accent-hover);
}

.vc-link:hover .icon {
  transform: translateX(3px);
}

/* --- /vision/: modality ledger (text→GPT · proteins→AlphaFold · …) --- */
.modality-ledger {
  margin-top: var(--space-7);
}

.modality-ledger__rows {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.modality-row {
  display: grid;
  grid-template-columns: 110px 20px 140px 90px 1fr auto;
  grid-template-areas: "modality arrow model year note chip";
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

.modality-row:last-child {
  border-bottom: none;
}

.modality-row__modality {
  grid-area: modality;
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.modality-row__arrow {
  grid-area: arrow;
  color: var(--text-faint);
}

.modality-row__model {
  grid-area: model;
  font-family: var(--display);
  font-weight: 700;
}

.modality-row__year {
  grid-area: year;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.modality-row__note {
  grid-area: note;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.modality-row__chip {
  grid-area: chip;
}

.modality-row--open {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 70%);
}

.modality-row--open .modality-row__modality,
.modality-row--open .modality-row__year {
  color: var(--accent);
}

/* --- /vision/: where vs how duo (trajectory vs skeleton) --- */
.wherehow {
  margin-top: var(--space-7);
}

.wherehow__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.wherehow__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.wherehow__panel svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  color: var(--text-dim);
}

.wherehow__panel--how {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), transparent 70%);
}

.wherehow__label {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.wherehow__panel--how .wherehow__label {
  color: var(--accent);
}

.wh-traj {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.8;
}

.wh-dot {
  fill: currentColor;
  opacity: 0.55;
}

.wh-dot--end {
  fill: var(--text);
  opacity: 1;
}

.wh-bones path,
.wh-head {
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.72;
}

.wh-joint circle {
  fill: var(--violet);
}

.wh-joint--load circle {
  fill: var(--accent);
}

/* --- /vision/: two channels over one knowledgebase --- */
.channel-duo__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.channel-duo__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
}

/* Tick connecting each panel down to the shared base bar. */
.channel-duo__panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-5));
  width: 1px;
  height: var(--space-5);
  background: var(--border-strong);
}

.channel-duo__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.channel-duo__panel + .channel-duo__panel .channel-duo__kicker {
  color: var(--violet);
}

.channel-duo__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.channel-duo__body {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.channel-duo__base {
  margin-top: var(--space-5);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* --- /vision/: closing statement (sport-agnostic principle) --- */
.vision-close {
  max-width: 760px;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.vision-close__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-4);
}

.vision-close__body {
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

/* --- /vision/beyond-football/: backbone → heads expansion map --- */
.vmap {
  margin-top: var(--space-7);
  text-align: center;
}

.vmap__backbone {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  border-radius: var(--radius-lg);
}

.vmap__backbone-label {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.vmap__backbone-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.vmap__trunk {
  width: 1px;
  height: 28px;
  margin: 0 auto;
  background: var(--border-strong);
}

.vmap__heads {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

/* Rail spanning the five tick positions (10% … 90% of the row). */
.vmap__heads::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--border-strong);
}

.vmap__head {
  position: relative;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.vmap__head::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 50%;
  width: 1px;
  height: var(--space-4);
  background: var(--border-strong);
}

.vmap__head--live {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
}

/* --- /vision/beyond-football/: the vertical ledger rows --- */
.vertical-rows {
  border-top: 1px solid var(--border);
}

.vertical-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.vertical-row__num {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-top: 4px;
}

.vertical-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.vertical-row__name {
  font-size: var(--text-h3);
}

.vertical-row__body {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 72ch;
}

.vertical-row__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* The intended-use boundary (rehabilitation) — amber, unmissable, calm. */
.boundary-note {
  margin-top: var(--space-4);
  max-width: 72ch;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--amber);
  background: var(--amber-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text);
}

/* --- /vision/beyond-football/: Without[X] wordmark play --- */
.wordmark-play {
  margin-top: var(--space-6);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: radial-gradient(60% 90% at 50% 0%, rgba(var(--violet-rgb), 0.07), transparent 70%);
}

.wordmark-play__line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 32px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 2.6vw, 2.6rem);
  letter-spacing: -0.02em;
}

.wordmark-play__x {
  background: linear-gradient(135deg, var(--accent), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wordmark-play__x--ball {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.wordmark-play__arrow {
  color: var(--text-muted);
  font-size: 0.7em;
}

.wordmark-play .vc-figcap {
  margin: var(--space-5) auto 0;
  text-align: center;
}

/* --- /vision/agents/: example chat figures --- */
.chat-figures {
  display: grid;
  gap: var(--space-5);
  max-width: 820px;
}

.chat-figure {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.chat-figure__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.chat-figure__role {
  font-family: var(--mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.chat-figure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.chat-msg {
  max-width: 85%;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.chat-msg--user {
  align-self: flex-end;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-right-radius: var(--radius-sm);
}

.chat-msg--agent {
  align-self: flex-start;
  background: rgba(var(--violet-rgb), 0.07);
  border: 1px solid var(--violet-border);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--text-dim);
}

.chat-msg__tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

.chat-msg--agent .chat-msg__tag {
  color: var(--violet);
}

.chat-msg__text {
  margin: 0;
}

.chat-msg__evidence {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--violet-border);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* --- /vision/agents/: MCP roadmap note --- */
.mcp-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 760px;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--amber-border);
  background: var(--amber-dim);
  border-radius: var(--radius-lg);
}

.mcp-note .status-chip {
  flex: 0 0 auto;
  margin-top: 2px;
}

.mcp-note__body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
}

.mcp-note__body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion) var(--ease);
}

.mcp-note__body a:hover {
  color: var(--accent);
}

/* --- /team/: founder cards — portrait-led centerpiece (M2.4). The ring
   hue is set per CARD (--ring) and drives the conic ring (carried over
   from the old site), the hover glow, and the credential ticks. Portraits
   are the mono variants (uniform, instrument-like); the color variant
   stacks above and fades in on hover. Özgür has no publishable photo:
   his card renders a matching initials tile (same ring, same geometry —
   deliberately NOT an empty state). --- */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.founder-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6) var(--space-5);
}

.founder-card--accent { --ring: var(--accent); }
.founder-card--blue { --ring: var(--blue); }
.founder-card--violet { --ring: var(--violet); }
.founder-card--amber { --ring: var(--amber); }

.founder-card__avatar {
  width: clamp(108px, 13vw, 148px);
  height: clamp(108px, 13vw, 148px);
  padding: 3px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--ring),
    color-mix(in srgb, var(--ring) 12%, transparent) 55%,
    var(--ring)
  );
  transition: box-shadow var(--motion-slow) var(--ease);
}

.founder-card:hover .founder-card__avatar {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent);
}

/* Inner disc: clips the portrait; also the initials-tile surface. */
.founder-card__portrait {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}

.founder-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Color variant above the mono base — revealed on card hover. */
.founder-card__img--color {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease);
}

.founder-card:hover .founder-card__img--color {
  opacity: 1;
}

.founder-card__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2vw, 2.1rem);
  letter-spacing: 0.02em;
}

.founder-card .card__title {
  font-size: 1.45rem;
  letter-spacing: -0.01em;
}

.founder-card .card__body {
  margin-bottom: var(--space-5);
}

/* Credential strip — ledger-tick grammar (mono, hue tick per fact),
   pinned to the card bottom so the strips align across the grid. The
   keywords ARE the proof (Leibniz Prize, ERC, UEFA Pro) so they read at
   full ink; the hue ticks stay the quiet separators. */
.founder-card__creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: auto;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: calc(var(--text-xs) + 1px);
  color: var(--text);
}

.founder-card__creds li {
  position: relative;
  padding-left: 12px;
}

.founder-card__creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: var(--ring);
  opacity: 0.75;
}

/* Photo credits — legally required attribution (CC BY-SA 4.0 for the
   Çiçek portrait) as a discreet faint mono line at the page bottom. */
.team-credits {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--text-faint);
}

.team-credits__lead {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.team-credits a {
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion) var(--ease);
}

.team-credits a:hover {
  color: var(--text-dim);
}

/* --- /team/: "What we're building" — prose + mono side-note rail (the
   two-column grammar from /vision/) --- */
.building-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-7);
  align-items: start;
}

.building-aside {
  border-left: 1px solid var(--border);
  padding-left: var(--space-5);
}

.building-aside__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--text-xs);
}

.building-aside__row:first-child {
  padding-top: 0;
}

.building-aside__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.building-aside__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.building-aside__value {
  color: var(--text-dim);
  line-height: 1.5;
}

.building-aside__value a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion) var(--ease);
}

.building-aside__value a:hover {
  color: var(--accent);
}

/* --- /contact/: numbered intent doors --- */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.intent-card {
  padding-top: var(--space-6);
}

.intent-card__num {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.intent-card__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* --- /early-access/: form states + privacy note --- */
.section--waitlist {
  padding-top: var(--space-6);
}

.section--waitlist .container {
  position: relative;
}

.section--waitlist .waitlist-form {
  max-width: 640px;
}

/* Low-opacity skeletal watermark to the right of the form. */
.waitlist-visual {
  position: absolute;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-55%);
  width: clamp(150px, 16vw, 210px);
  color: var(--text-faint);
  opacity: 0.5;
  pointer-events: none;
}

.waitlist-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .waitlist-visual {
    display: none;
  }
}

/* Short page: tighten the band above the footer instead of leaving a dead
   gap (page-scoped via the waitlist section). */
.section--waitlist + .section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.site-main:has(.section--waitlist) + .site-footer {
  margin-top: var(--space-6);
}

.waitlist-note {
  margin-top: var(--space-4);
  max-width: 640px;
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.6;
}

.waitlist-note a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion) var(--ease);
}

.waitlist-note a:hover {
  color: var(--accent);
}

.waitlist-form.is-done .waitlist-form__row {
  opacity: 0.5;
  pointer-events: none;
}

.waitlist-form__submit.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.waitlist-form__submit.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bg) 35%, transparent);
  border-top-color: var(--bg);
  animation: vc-spin 0.7s linear infinite;
}

@keyframes vc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- vision+company responsive (page-scoped) --- */
@media (max-width: 900px) {
  .wherehow__panels,
  .channel-duo__panels,
  .founder-grid,
  .intent-grid,
  .building-grid {
    grid-template-columns: 1fr;
  }

  .building-grid {
    gap: var(--space-5);
  }

  .building-aside {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .channel-duo__panel::after {
    display: none;
  }

  .vmap__heads {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0;
    margin-top: var(--space-4);
  }

  .vmap__trunk,
  .vmap__heads::before,
  .vmap__head::before {
    display: none;
  }
}

@media (max-width: 720px) {
  /* Narrow widths: the note and chip get their own rows — five content-sized
     columns cannot shrink and clipped at ≤375px (worse with DE/TR strings). */
  .modality-row {
    grid-template-columns: minmax(0, auto) 20px minmax(0, 1fr);
    grid-template-areas:
      "modality arrow model"
      "year year chip"
      "note note note";
    gap: var(--space-2) var(--space-3);
  }

  .modality-row__model {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .modality-row__chip {
    justify-self: end;
  }

  .vertical-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .vertical-row__num {
    padding-top: 0;
  }

  .chat-msg {
    max-width: 100%;
  }

  .mcp-note {
    flex-direction: column;
    gap: var(--space-3);
  }
}
/* ===== end vision+company ===== */

/* ===== investors+legal (owner: investors-agent) ===== */

/* ----- /investors/ — mono cross-reference rows (deep links, not restated facts) ----- */
.inv-refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
}

.inv-ref {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-dim);
  transition: color var(--motion) var(--ease);
}

.inv-ref:hover {
  color: var(--accent);
}

/* ----- proof strip — Built-chipped stat tiles ----- */
.inv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.inv-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.inv-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-border), transparent);
}

.inv-stat__chip {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.inv-stat__value {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.inv-stat__label {
  font-size: var(--text-sm);
  color: var(--text-dim);
  max-width: 26ch;
}

/* ----- shared aside note under ledgers ----- */
.inv-note {
  margin-top: var(--space-5);
  max-width: 720px;
  color: var(--text-dim);
  line-height: 1.7;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent-border);
}

/* ----- platform stack figure (products = heads, embeddings = the asset) ----- */
.inv-stack {
  margin: 0 0 var(--space-6);
}

.inv-stack__tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inv-stack__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.inv-stack__group {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--hairline);
}

.inv-stack__group-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}

.inv-stack__heads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.inv-stack__head {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  white-space: nowrap;
}

.inv-stack__bus {
  position: relative;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--accent);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

/* connector stems between the tiers */
.inv-stack__bus::before,
.inv-stack__bus::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: var(--space-3);
  background: var(--accent-border);
}

.inv-stack__bus::before {
  top: calc(-1 * var(--space-3) - 1px);
}

.inv-stack__bus::after {
  bottom: calc(-1 * var(--space-3) - 1px);
}

.inv-stack__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-5) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

.inv-stack__base-name {
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.inv-stack__base-sub {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.inv-stack__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--text-faint);
  text-align: center;
}

/* ----- product one-liners (two group columns, no pricing ever) ----- */
.inv-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}

.inv-products__group {
  display: flex;
  flex-direction: column;
}

.inv-product {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
}

.inv-product:last-child {
  border-bottom: none;
}

.inv-product__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.inv-product__name {
  font-family: var(--display);
  font-weight: 600;
  color: var(--text);
}

.inv-product__flag {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.inv-product__body {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 48ch;
}

/* ----- moat statement + compounding loops ----- */
.inv-moat {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  max-width: 26em;
  color: var(--text-dim);
}

.inv-moat__close {
  color: var(--accent);
  font-weight: 700;
}

.inv-loops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.inv-loop {
  position: relative;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.inv-loop__num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.inv-loop__title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.inv-loop__body {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
}

/* ----- founder entries (bios verbatim; compact, distinct from /team/ cards) ----- */
.inv-founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}

.inv-founder {
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 1px solid var(--border-strong);
}

.inv-founder__role {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.inv-founder__name {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.inv-founder__bio {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.7;
}

/* ----- phase roadmap — milestone timeline, no dates ----- */
.inv-phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.inv-phase {
  position: relative;
  padding-top: var(--space-5);
}

/* the connector rail */
.inv-phase::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 12px;
  right: calc(-1 * var(--space-4));
  height: 1px;
  background: var(--border-strong);
}

.inv-phase:last-child::before {
  right: 0;
}

/* the milestone dot */
.inv-phase::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--hairline);
}

.inv-phase__num {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.inv-phase__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-h3);
  margin: var(--space-1) 0 var(--space-2);
}

.inv-phase__desc {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 30ch;
}

/* ----- data-room closing band ----- */
.inv-dataroom {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-xl);
}

.inv-dataroom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 50% 0%, var(--accent-dim), transparent 70%);
  pointer-events: none;
}

.inv-dataroom > * {
  position: relative;
}

.inv-dataroom .section-label {
  justify-content: center;
}

.inv-dataroom__title {
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.inv-dataroom__body {
  max-width: 560px;
  margin: 0 auto var(--space-5);
  color: var(--text-dim);
  line-height: 1.7;
}

.inv-dataroom__body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inv-dataroom__body a:hover {
  color: var(--accent);
}

.inv-dataroom__actions {
  display: flex;
  justify-content: center;
}

/* ----- /legal/* — long-form document typography ----- */
.legal-section {
  padding-top: var(--space-6);
}

.legal-doc {
  max-width: 760px;
}

.legal-doc__section {
  margin-bottom: var(--space-7);
}

.legal-doc__section:last-child {
  margin-bottom: 0;
}

.legal-doc .spec-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

.legal-doc p {
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: var(--space-4);
  max-width: 72ch;
}

.legal-doc p:last-child {
  margin-bottom: 0;
}

.legal-doc ul {
  list-style: none;
  margin: var(--space-4) 0;
  padding: var(--space-2) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.legal-doc li {
  color: var(--text-dim);
  line-height: 1.65;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) + 14px);
  position: relative;
}

.legal-doc li + li {
  border-top: 1px solid var(--hairline);
}

.legal-doc li::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: calc(var(--space-3) + 0.55em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-border);
}

/* ----- responsive (scoped to investors + legal pages) ----- */
@media (max-width: 1100px) {
  .inv-loops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inv-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-6);
  }

  /* break the rail at the row wrap */
  .inv-phase:nth-child(2)::before {
    right: 0;
  }
}

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

  .inv-stack__row,
  .inv-products,
  .inv-founders {
    grid-template-columns: minmax(0, 1fr);
  }

  .inv-founders {
    gap: var(--space-4);
  }
}

@media (max-width: 560px) {
  .inv-stats,
  .inv-loops,
  .inv-phases {
    grid-template-columns: minmax(0, 1fr);
  }

  /* vertical timeline on phones: rail runs down, not across */
  .inv-phase {
    padding-top: 0;
    padding-left: var(--space-6);
  }

  .inv-phase::before {
    top: 14px;
    bottom: calc(-1 * var(--space-6));
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .inv-phase:last-child::before {
    display: none;
  }

  .inv-phase::after {
    top: 4px;
  }

  .inv-dataroom {
    padding: var(--space-6) var(--space-4);
  }

  .legal-doc li {
    padding-left: calc(var(--space-4) + 14px);
  }

  .legal-doc li::before {
    left: var(--space-4);
  }
}

/* ===== end investors+legal ===== */

/* ===== hero-renderer (owner: hero-agent) ===== */
/* Renderer handshake: the canvas is invisible until its first successful
   WebGL2 frame sets [data-gpu-ok] on the mount — then the canvas fades in and
   the CSS fallback plate yields. No JS / no WebGL / lost context ⇒ the plate
   simply stays (zero CLS, zero breakage). */
.hero-home__media .hero-home__field {
  opacity: 0;
  transition: opacity 250ms var(--ease);
}

.hero-home__media[data-gpu-ok] .hero-home__field {
  opacity: 1;
}

.hero-home__media .hero-home__plate {
  transition: opacity 1100ms var(--ease);
}

.hero-home__media[data-gpu-ok] .hero-home__plate {
  opacity: 0;
}

/* Wide composition (≥1100px): the headline column sits left; the renderer
   shifts the contested seam right-of-center to match (same breakpoint in
   gpu_hero.ts), and the scrim guards only the copy column — the field stays
   vivid through the center, the right and every corner. */
@media (min-width: 1100px) {
  .hero-home__content {
    text-align: left;
  }

  .hero-home__subtitle {
    margin-left: 0;
  }

  .hero-home__actions {
    justify-content: flex-start;
  }

  .hero-home__scrim {
    background:
      linear-gradient(
        90deg,
        rgba(var(--bg-rgb), 0.68) 0%,
        rgba(var(--bg-rgb), 0.36) 30%,
        transparent 56%
      ),
      linear-gradient(
        180deg,
        rgba(var(--bg-rgb), 0.3) 0%,
        transparent 18%,
        transparent 82%,
        rgba(var(--bg-rgb), 0.34) 100%
      );
  }
}

/* Mobile (<700px): the renderer shifts the contested seam BELOW the copy
   (portrait also rotates the play axis 90° so play flows up-screen); the
   scrim guards the copy band and stays open at the bottom where the seam
   and the runs live. */
@media (max-width: 700px) {
  .hero-home__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(var(--bg-rgb), 0.46) 0%,
        rgba(var(--bg-rgb), 0.32) 18%,
        rgba(var(--bg-rgb), 0.55) 38%,
        rgba(var(--bg-rgb), 0.5) 62%,
        rgba(var(--bg-rgb), 0.12) 78%,
        rgba(var(--bg-rgb), 0.3) 96%,
        rgba(var(--bg-rgb), 0.38) 100%
      );
  }
}
/* ===== end hero-renderer ===== */

/* ==========================================================================
   Responsive map — 1280 / 1100 / 900 / 720 / 560 (+379 ultra-narrow).
   Mobile nav sheet at ≤1100px (details-based accordion).
   ========================================================================== */
@media (max-width: 1280px) {
  .site-header__inner {
    gap: var(--space-4);
  }

  .navmenu__summary,
  .site-nav__link {
    padding-inline: var(--space-2);
  }
}

@media (max-width: 1100px) {
  .site-header__inner {
    gap: var(--space-3);
  }

  .site-nav {
    position: relative;
    flex: 0 0 auto;
    order: 3;
  }

  /* The shell (hamburger) appears; the group bar collapses into a tap sheet. */
  .site-nav__shell {
    display: block;
  }

  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--hairline);
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }

  .site-nav__toggle::-webkit-details-marker {
    display: none;
  }

  /* Touch layouts: the toggle grows to the hamburger's 44px tap-target
     convention (desktop keeps the quieter 38px ghost metrics). */
  .theme-toggle {
    width: 44px;
    height: 44px;
  }

  /* Collapsed by default; the shell's [open] reveals the sibling sheet of
     stacked group accordions (anchored to .site-nav, under the toggle). */
  .site-nav__groups {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: min(360px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100svh - var(--nav-total-h) - var(--space-6));
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    backdrop-filter: blur(20px) saturate(1.35);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 120;
  }

  .site-nav__shell[open] + .site-nav__groups {
    display: flex;
  }

  /* Groups expand inline (accordion), not as floating dropdowns. (Scoped to
     the nav groups — the header's language menu stays a dropdown.) */
  .site-nav .navmenu {
    position: static;
  }

  .site-nav .navmenu__summary {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
  }

  .site-nav .navmenu__panel {
    position: static;
    transform: none;
    min-width: 0;
    width: auto;
    padding: var(--space-1) 0 var(--space-2) var(--space-4);
    border: none;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .navmenu__panel--mega::before {
    display: none;
  }

  /* Mega panels collapse into the accordion: one stacked column. */
  .megamenu {
    flex-direction: column;
    gap: var(--space-4);
  }

  .megamenu__zone + .megamenu__zone {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: var(--space-4);
  }

  .megamenu__list {
    grid-template-columns: 1fr;
  }

  .megamenu__kicker {
    margin-bottom: var(--space-2);
  }

  .megamenu__card {
    padding: var(--space-3) var(--space-4);
    padding-right: var(--space-7);
  }

  .site-nav__link {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  .site-nav__groups .site-nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: var(--space-2);
  }

  .site-header__brand {
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  :root {
    --section-y: clamp(56px, 9vw, 96px);
  }

  .section {
    padding: var(--space-7) 0;
  }

  .page-header {
    padding-top: var(--space-8);
  }
}

@media (max-width: 720px) {
  /* Keep the language switcher reachable on phones; drop only the header CTA
     (Get Early Access stays one tap away inside the nav sheet + hero). */
  .site-header__cta {
    display: none;
  }

  .btn {
    min-height: 44px;
  }

  .navmenu__list a,
  .megamenu__item {
    min-height: 44px;
    align-items: center;
    display: flex;
  }

  .site-footer__social {
    margin-left: 0;
    flex-basis: 100%;
  }

  .waitlist-form__row {
    flex-direction: column;
  }

  .waitlist-form__submit {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .container {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
  }

  .hero-home__actions .btn,
  .error-page__actions .btn,
  .page-header__actions .btn {
    flex: 1 1 auto;
  }

  .card {
    padding: var(--space-5) var(--space-4);
  }

  .consent-banner__actions {
    flex: 1 1 100%;
  }

  .consent-banner__btn {
    flex: 1 1 auto;
  }
}

/* Ultra-narrow (iPhone SE / fold-cover class): drop the brand WORDMARK (the
   logo mark keeps identity) so the hamburger never leaves the viewport. */
@media (max-width: 379px) {
  .site-header__wordmark {
    display: none;
  }

  .site-header__inner {
    gap: var(--space-2);
  }

  .site-header__actions {
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Reduced motion — total collapse. Tokens shrink to 1ms, every animation and
   transition dies, reveals show immediately. Owner blocks must not animate
   outside these tokens.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion: 1ms;
    --motion-slow: 1ms;
    --motion-deliberate: 1ms;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body::before {
    animation: none;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}