/* Den website: one stylesheet.
   The visual world is DESIGN.md; the page structure and class names are
   docs/design-spec.md. Dark monochrome, white at an opacity, squared
   corners. The only hue is an agent's own colour inside a TUI block. */

/* ── Fonts: self-hosted, OFL (assets/fonts/, licences beside them) ── */
@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("/assets/fonts/hedvig-letters-serif-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/fonts/spectral-300-italic-latin.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
  size-adjust: 104%;          /* match Hedvig's x-height */
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-symbols2.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

/* ── Tokens (DESIGN.md, verbatim) ─────────────────────────────────── */
/* Second direction: serif display, italic accent, large tiled icons.
   Responsive steps for the tokens follow right after :root. */
:root {
  /* Ground and lines */
  --bg:        oklch(0.06 0 0);   /* page */
  --card:      oklch(0.08 0 0);   /* raised surfaces, tiles, the band */
  --line:      oklch(0.98 0 0 / 0.08);
  --line-hover:oklch(0.98 0 0 / 0.14);
  --line-strong:oklch(0.98 0 0 / 0.18); /* hero stage frame, .key--xl */
  --sep:       oklch(0.98 0 0 / 0.10);  /* internal separators in a card */

  /* Ink ladder: white at an opacity, never a grey hex */
  --ink-1:     oklch(0.98 0 0 / 0.92); /* headlines, primary values */
  --ink-2:     oklch(0.98 0 0 / 0.70); /* body, icon strokes */
  --ink-3:     oklch(0.98 0 0 / 0.50); /* captions, table data */
  --ink-dim:   oklch(0.98 0 0 / 0.42); /* second clause of a headline, large text only */
  --ink-4:     oklch(0.98 0 0 / 0.35); /* micro-labels, corner ticks */
  --ink-5:     oklch(0.98 0 0 / 0.22); /* helper text, guides, footer mark */
  --fill-1:    oklch(0.98 0 0 / 0.04); /* keycaps */
  --fill-2:    oklch(0.98 0 0 / 0.06); /* selected states */
  --speck:     oklch(0.98 0 0 / 0.16); /* reference value; specks.svg carries its own */
  --btn:       oklch(0.98 0 0 / 0.92);
  --btn-hover: oklch(0.98 0 0 / 0.80);

  /* Shape and motion */
  --radius:    2px;
  --radius-key:4px;
  --radius-key-xl:8px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    200ms;
  --t-state:   700ms;
  --t-enter:   900ms;
  --rise:      12px;  /* entrance offset */

  /* Faces (self-hosted from assets/fonts/, see docs/design-spec.md §0) */
  --font-display: "Hedvig Letters Serif", "Iowan Old Style", Georgia, serif;
  --font-accent:  "Spectral", "Iowan Old Style", Georgia, serif; /* italic 300 only */
  --font-ui:      "Geist", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Type scale: fluid from 375px to 1440px */
  --fs-hero:   clamp(44px, 25.7px + 4.88vw, 96px);
  --fs-band:   clamp(40px, 23.1px + 4.51vw, 88px);
  --fs-h2:     clamp(34px, 26.25px + 2.07vw, 56px);
  --fs-h3:     clamp(24px, 22.6px + 0.38vw, 28px);
  --fs-stat:   clamp(40px, 34.4px + 1.5vw, 56px);
  --fs-lead:   clamp(17px, 15.94px + 0.28vw, 20px);
  --fs-title:  clamp(16px, 15.65px + 0.09vw, 17px);
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-micro:  11px;
  --fs-tui:    13px;
  --fs-key:    11px;
  --lh-hero:   0.98;
  --lh-h2:     1.04;
  --lh-body:   1.6;
  --track-hero:-0.025em;
  --track-h2:  -0.02em;
  --track-micro:0.14em;

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

  /* Layout */
  --content:   1280px;
  --gutter:    24px;    /* grid column gap */
  --pad:       24px;    /* page side padding */
  --section:   160px;   /* vertical padding of a section */
  --section-lg:200px;   /* the ^Y band */
  --head-gap:  64px;    /* section head to its content */
  --stage:     1120px;  /* hero TUI stage max width */
  --bar-h:     56px;

  /* Icons and tiles (DESIGN.md "Icons") */
  --tile-xl:   160px;  --ico-xl: 96px;  --stroke-xl: 1.5px;
  --tile-l:    96px;   --ico-l:  56px;  --stroke-l:  1.25px;
  --tile-m:    64px;   --ico-m:  36px;  --stroke-m:  1.25px;
  --ico-s:     16px;   --stroke-s: 1.25px;
  --tick:      8px;    /* corner tick on a tile */
  --tick-stage:12px;   /* corner tick on the hero stage */

  /* TUI fidelity (docs/design-spec.md §9.F): Den's own palette on the
     deepharness Omarchy theme, and a fixed cell measured from Ghostty
     (7 x 16px at 12px there; 13 / 18 here keeps the ratio). Inside a .tui
     these replace the ink ladder entirely. */
  --tui-bg:     #000000;  /* Bg */
  --tui-surface:#010101;  /* Surface */
  --tui-sel:    #2e2e2e;  /* Sel: selection, focused border, keycaps */
  --tui-border: #171717;  /* Surface2 = mix(Bg, Sel): unfocused borders, rules */
  --tui-fg:     #dfdfdf;  /* Fg */
  --tui-dim:    #7c7c7c;  /* FgDim */
  --tui-muted:  #575757;  /* Muted */
  --tui-bright: #f8f8f8;  /* Bright */
  --tui-logo-mid:#949494; /* Tint(Fg, FgDim), wordmark shading */
  --tui-ok:     #66cb8e;  /* green */
  --tui-attn:   #e8b84a;  /* yellow */
  --tui-err:    #ea9e9e;  /* red */
  --tui-code:   #cccccc;  /* cyan */
  --tui-blush:  #f4c4c4;  /* bright_red, critter cheeks */
  --tui-fs:     13px;     /* cell width is 1ch = 7.8px */
  --cell-h:     18px;
  --tui-fs-narrow: 11px;  /* container <= 520px: 1ch = 6.6px */
  --cell-h-narrow: 15px;

  /* Agent colours: Den's hue list on deepharness, picked by each demo
     agent's seed (design-spec §9.F6). Used only inside .tui. */
  --ag-orch:   #a0f3d8;  /* den-site-000004, index 5 */
  --ag-mossy:  #66cb8e;  /* den-site-000319, index 2 */
  --ag-fuzzy:  #ea9e9e;  /* den-site-003778, index 0 */
  --ag-plucky: #f0b07a;  /* den-site-000247, index 6 */
  --ag-snug:   #e8d27a;  /* den-site-002950, index 7 */
  --ag-wombat: #7fd3c4;  /* spare, index 9 */
  --ag-pebble: #fbf1a5;  /* den-site-001761, index 4 */

  color-scheme: dark;
}

@media (max-width: 959px) {
  :root {
    --section: 112px; --section-lg: 144px; --head-gap: 48px;
    --tile-xl: 128px; --ico-xl: 76px;
  }
}
@media (max-width: 640px) {
  :root {
    --pad: 16px; --gutter: 16px; --bar-h: 52px;
    --section: 88px; --section-lg: 104px; --head-gap: 40px;
    --tile-xl: 96px; --ico-xl: 56px; --stroke-xl: 1.25px;
    --tile-l:  72px; --ico-l:  42px;
    --tile-m:  56px; --ico-m:  32px;
  }
}

/* ── Reset and base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, pre { margin: 0; }
ul[role="list"], ol[role="list"], .list-plain { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

html { background: var(--bg); scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: oklch(0.98 0 0 / 0.22); color: oklch(0.98 0 0); }

/* Scrollbars, themed (only the TUI blocks and the map ever scroll sideways) */
* { scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-hover); border-radius: var(--radius); }

/* Focus: one ring, everywhere */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--ink-1);
  outline-offset: 3px;
  border-radius: var(--radius);
}

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

.skip {
  position: absolute; left: var(--pad); top: 8px; z-index: 100;
  padding: 6px 12px; background: var(--btn); color: var(--bg);
  font: 500 14px/1.6 var(--font-ui); text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
code { font-size: 0.875em; color: var(--ink-1); }
.nowrap { white-space: nowrap; }

/* ── Type scale ───────────────────────────────────────────────────── */
.display, .h2, .h3, .band__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--ink-1);
  text-wrap: balance;
}
.display {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-hero);
}
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
}
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
.band__title {
  font-size: var(--fs-band);
  line-height: 1;
  letter-spacing: var(--track-hero);
}
/* Two-tone headlines: the dim clause, and the one italic accent word */
.dim { color: var(--ink-dim); }
.display em, .h2 em, .h3 em, .band__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: inherit;
}
.dim em { color: var(--ink-1); }

.lead {
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.title { font-size: var(--fs-title); font-weight: 500; line-height: 1.35; color: var(--ink-1); }
.caption { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-3); }
.helper  { font-size: 13px; line-height: 1.5; color: var(--ink-5); }
.micro, .idx {
  font: 400 var(--fs-micro)/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
}
/* The hero label carries meaning on its own, so it reads one step brighter */
.micro--lead { color: var(--ink-3); }
.idx__n { color: var(--ink-3); }

.prose a, .link {
  color: var(--ink-1);
  text-decoration: underline;
  text-decoration-color: var(--line-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.prose a:hover, .link:hover { text-decoration-color: var(--ink-2); }

/* ── Layout ───────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-7);
}
.section { padding-block: var(--section); }
/* Hairline between neighbouring sections, inside the content width */
.section + .section { position: relative; }
.section + .section::before {
  content: ""; position: absolute; top: 0;
  left: max(var(--pad), (100% - var(--content)) / 2);
  right: max(var(--pad), (100% - var(--content)) / 2);
  border-top: 1px solid var(--line);
}

/* Split: copy beside a TUI block, both top-aligned (Who directs whom) */
.split { align-items: start; }
.split--5-7 > .split__copy  { grid-column: 1 / span 5; }
.split--5-7 > .split__media { grid-column: 6 / span 7; }
.split__copy  { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.split__media { min-width: 0; display: grid; gap: var(--sp-3); }

/* Section heads: index, tile, headline, body */
.idx + .tile { margin-top: var(--sp-5); }
.tile + .h2 { margin-top: var(--sp-6); }
.idx + .h2 { margin-top: var(--sp-6); }
.h2 + .body { margin-top: var(--sp-5); }
.body + .points { margin-top: var(--sp-6); }

/* ── Tiles and icons ──────────────────────────────────────────────── */
.tile {
  position: relative; display: grid; place-items: center; flex: none;
  inline-size: var(--tile); block-size: var(--tile);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease);
}
.tile .ico {
  inline-size: var(--ico); block-size: var(--ico); stroke-width: var(--ico-stroke);
  fill: none; stroke: currentColor; stroke-linecap: butt; stroke-linejoin: miter;
  overflow: visible;
}
.tile .hi  { color: var(--ink-1); }          /* stroke/fill use currentColor */
/* corner ticks: top-left and bottom-right, 8px Ls on the border corners */
.tile::before, .tile::after {
  content: ""; position: absolute; inline-size: var(--tick); block-size: var(--tick);
  border: 0 solid var(--ink-4);
}
.tile::before { inset: -1px auto auto -1px; border-width: 1px 0 0 1px; }
.tile::after  { inset: auto -1px -1px auto; border-width: 0 1px 1px 0; }
a:hover .tile { border-color: var(--line-strong); }
.tile--xl { --tile: var(--tile-xl); --ico: var(--ico-xl); --ico-stroke: var(--stroke-xl); }
.tile--l  { --tile: var(--tile-l);  --ico: var(--ico-l);  --ico-stroke: var(--stroke-l); }
.tile--m  { --tile: var(--tile-m);  --ico: var(--ico-m);  --ico-stroke: var(--stroke-m); }
.ico--s   {
  inline-size: var(--ico-s); block-size: var(--ico-s); stroke-width: var(--stroke-s);
  fill: none; stroke: currentColor;
}

/* Specks: the one texture. Hero, band and 404 only. Never animated. */
.specks { position: relative; isolation: isolate; }
.specks::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/specks.svg") 0 0 / 640px 640px repeat;
  pointer-events: none;
}

/* ── Keycap ───────────────────────────────────────────────────────── */
.key {
  display: inline-block;
  font: 500 var(--fs-key)/1.5 var(--font-mono);
  color: var(--ink-2);
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-key);
  padding: 1px 6px;
  box-shadow: 0 1px 0 var(--line);
  white-space: nowrap;
  vertical-align: 0.1em;
}
.key--xl {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.78em; line-height: 1.1;
  letter-spacing: 0;
  padding: 0.04em 0.22em;
  color: var(--ink-1);
  background: var(--fill-1);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-key-xl);
  box-shadow: 0 4px 0 var(--line-strong);
  vertical-align: 0.06em;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 22px;
  font: 500 15px/1 var(--font-ui);
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--btn); color: var(--bg); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--secondary { background: transparent; color: var(--ink-1); border-color: var(--line-hover); }
.btn--secondary:hover { border-color: var(--line-strong); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.card--primary { padding: var(--sp-6); }

/* ── Top bar ──────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sp-6);
}
.wordmark {
  font: 500 18px/1 var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--ink-1);
  text-decoration: none;
}
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__link {
  font-size: 14px; color: var(--ink-3); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--ink-1); }

/* ── Hero: centred copy, the TUI on a framed stage ────────────────── */
.hero { padding-block: var(--sp-10) var(--section); }
.hero__copy {
  max-width: 880px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero__copy .display { margin-top: var(--sp-5); }
.hero__copy .lead { margin-top: 28px; }
.hero__copy .actions { margin-top: 40px; justify-content: center; }
/* each line of the h1 rises once on load */
.display .line { display: inline-block; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } }
.hero .display .line { animation: rise var(--t-enter) var(--ease) both; }
.hero .display .line + br + .line { animation-delay: 80ms; }

.stage {
  position: relative;
  max-width: var(--stage);
  margin: 72px auto 0;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  background: var(--bg);
}
.stage::before, .stage::after {
  content: ""; position: absolute; inline-size: var(--tick-stage); block-size: var(--tick-stage);
  border: 0 solid var(--ink-4);
}
.stage::before { inset: -1px auto auto -1px; border-width: 1px 0 0 1px; }
.stage::after  { inset: auto -1px -1px auto; border-width: 0 1px 1px 0; }

/* ── Proof strip ──────────────────────────────────────────────────── */
.proof { border-block: 1px solid var(--line); background: var(--bg); }
.proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.stat {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 40px 32px;
  min-width: 0;
}
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__label { margin-top: var(--sp-5); color: var(--ink-3); }   /* the value needs its label */
.stat__value {
  margin-top: var(--sp-3);
  font: 300 var(--fs-stat)/1 var(--font-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
.stat__caption { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-3); }

/* ── Feature points ───────────────────────────────────────────────── */
.points { display: grid; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.points li {
  position: relative; padding-left: var(--sp-5);
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
  text-wrap: pretty;
}
.points li::before {
  content: ""; position: absolute; left: 0; top: calc(0.8em - 3px);
  width: 6px; height: 6px; border: 1px solid var(--ink-4);
}
.points code { font-size: 13px; }

/* Caption under a TUI block */
.tui-cap { font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); }
.tui-cap .key { margin-right: var(--sp-1); }

/* ── 01 Inbox: headline first, then TUI and copy ──────────────────── */
.feat-head { align-items: end; }
.feat-head > div { grid-column: 1 / span 8; display: flex; flex-direction: column; align-items: flex-start; }
.feat-head > .tile { grid-column: 11 / span 2; justify-self: end; }
.feat-body { margin-top: var(--head-gap); align-items: start; }
.feat-body__media { grid-column: 1 / span 7; min-width: 0; }
.feat-body__copy  { grid-column: 9 / span 4; min-width: 0; }

/* ── 03 Missions: centred head, wide TUI, points, the four shapes ─── */
.center-head {
  max-width: 760px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.center-head .body { margin-inline: auto; }
.missions__tui, .points--2 {
  max-width: calc(10 * (100% - 11 * var(--gutter)) / 12 + 9 * var(--gutter));
  margin-inline: auto;
}
.missions__tui { margin-top: var(--head-gap); }
.points--2 { margin-top: var(--sp-7); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-7); }
/* ---- Demo: the recording, framed like a screen. A poster until play;
   the YouTube player loads only then, so the page asks YouTube for
   nothing by itself. ---- */
.demo__media {
  max-width: calc(10 * (100% - 11 * var(--gutter)) / 12 + 9 * var(--gutter));
  margin: var(--head-gap) auto 0;
}
.demo__play, .demo__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 1920 / 798;
  background: var(--tui-bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.demo__play { color: var(--ink-1); text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.demo__play:hover, .demo__play:focus-visible { border-color: var(--line-strong); }
.demo__poster { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--t-fast) var(--ease); }
.demo__play:hover .demo__poster { opacity: 1; }
.demo__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px 0 14px;
  font: 500 14px/1 var(--font-ui); color: var(--bg);
  background: var(--btn); border-radius: var(--radius);
  transition: background var(--t-fast) var(--ease);
}
.demo__play:hover .demo__btn { background: var(--btn-hover); }
.demo__len { font-family: var(--font-mono); font-size: 12px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.demo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo__cap { margin-top: var(--sp-3); text-align: center; }

.shapes-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
  list-style: none; padding: 0;
  margin: var(--sp-8) auto 0;
  max-width: calc(10 * (100% - 11 * var(--gutter)) / 12 + 9 * var(--gutter));
}
.shapes-row li { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.shapes-row__n { font: 400 13px/1.4 var(--font-mono); color: var(--ink-2); }

/* ── 02 Agent badge: the pair ───────────────────────────────────── */
.pair { position: relative; margin-top: var(--head-gap); align-items: start; row-gap: 0; }
.pair__cc  { grid-column: 1 / span 7; grid-row: 1; }
.pair__den { grid-column: 8 / span 5; grid-row: 1; }
/* the connector: a dashed hairline across the gutter, frame to frame,
   on the row both critters share (line 5) */
.pair__link {
  grid-column: 1 / -1; grid-row: 2; margin-top: var(--sp-6); text-align: center;
  font: 400 var(--fs-micro)/1.4 var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--track-micro); color: var(--ink-3);
}
.pair__link::before {
  content: ""; position: absolute;
  top: calc(1px + 6 * var(--cell-h));
  left: calc(7 * (100% - 11 * var(--gutter)) / 12 + 6 * var(--gutter));
  width: var(--gutter);
  border-top: 1px dashed var(--line-strong);
}
.pair__where {
  margin-top: var(--sp-3); text-align: center;
  font: 400 13px/1.5 var(--font-mono); color: var(--ink-3);
}
#badge .points--2 { margin-top: var(--sp-7); }
.pair__note { margin: var(--sp-5) auto 0; text-align: center; max-width: 60ch; }

/* ── 05 Review: head across, screen full width ───────────────────── */
.review-head { align-items: end; }
.review-head__l { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; }
.review-head__r { grid-column: 7 / span 6; min-width: 0; }
.review-screen { margin-top: var(--head-gap); display: grid; gap: var(--sp-3); min-width: 0; }

/* ── Band: Nothing runs before ^Y ─────────────────────────────────── */
.band {
  background: var(--card);
  border-block: 1px solid var(--line);
  padding-block: var(--section-lg);
}
.band__in {
  max-width: 1000px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.band__title { margin-top: var(--sp-6); }
.band .body { margin-top: 40px; max-width: 60ch; }

/* ── 04 Install ───────────────────────────────────────────────────── */
.install__head { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; }
.install__card { grid-column: 7 / span 6; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-self: start; }
.reqs { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.reqs dt, .reqs dd {
  padding: 20px 0;
  border-top: 1px solid var(--sep);
  line-height: 1.5;
}
.reqs dt:first-of-type, .reqs dd:first-of-type { border-top: 0; padding-top: var(--sp-2); }
.reqs dt {
  padding-right: var(--sp-6);
  font: 400 12px/1.9 var(--font-mono);
  color: var(--ink-3);
}
.reqs dd { font-size: 15px; color: var(--ink-1); }
.reqs dd span { color: var(--ink-3); }
.cmds {
  margin: 0; padding: var(--sp-4); overflow-x: auto;
  border: 1px solid var(--sep);
  font: 400 13px/1.7 var(--font-mono); color: var(--ink-1);
}
.cmds code { font-size: inherit; }
.install__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) 20px;
  padding-top: var(--sp-5); border-top: 1px solid var(--sep);
}

/* ── Compare page ─────────────────────────────────────────────────── */
.cmp__head { max-width: 880px; display: flex; flex-direction: column; align-items: flex-start; }
.cmp__head .display { margin-top: var(--sp-5); font-size: min(var(--fs-hero), 72px); }
.cmp__head .lead { margin-top: 28px; max-width: 62ch; }
.cmp__table {
  margin-top: var(--sp-8); overflow-x: auto;
  border: 1px solid var(--line); background: var(--card);
}
.cmp__t { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.cmp__t th, .cmp__t td {
  padding: 20px var(--sp-5); vertical-align: top;
  border-top: 1px solid var(--sep); font-size: 15px; line-height: 1.55; color: var(--ink-2);
  width: 25%;
}
.cmp__t thead th, .cmp__t thead td { border-top: 0; font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); letter-spacing: 0.04em; }
.cmp__t thead th:nth-child(2) { color: var(--ink-1); }
.cmp__t tbody th { font: 400 12px/1.9 var(--font-mono); color: var(--ink-3); }
.cmp__t td:nth-child(2) { color: var(--ink-1); }
.cmp__note { margin-top: var(--sp-4); }
.cmp__cols { margin-top: var(--sp-9, 96px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
.cmp__cols .h3 + .points, .cmp__cols .h3 + .body { margin-top: var(--sp-5); }
.cmp__sub { margin-top: var(--sp-7); }
.cmp__cta { margin-top: 96px; padding-top: var(--sp-7); border-top: 1px solid var(--sep); max-width: 640px; }
.cmp__cta .h3 + .body { margin-top: var(--sp-4); }
.cmp__cta .install__cta { margin-top: var(--sp-5); }
@media (max-width: 800px) {
  .cmp__table { background: none; border: 0; overflow: visible; }
  .cmp__t { min-width: 0; display: block; }
  .cmp__t thead { display: none; }
  .cmp__t tbody, .cmp__t tr { display: block; }
  .cmp__t tr { border: 1px solid var(--line); background: var(--card); margin-top: var(--sp-4); }
  .cmp__t tbody th { display: block; width: auto; padding: var(--sp-4) var(--sp-5) 0; border: 0; }
  .cmp__t td { display: block; width: auto; padding: var(--sp-3) var(--sp-5); border-top: 0; }
  .cmp__t td:last-child { padding-bottom: var(--sp-4); }
  .cmp__t td::before { content: attr(data-label); display: block; font: 400 11px/1.6 var(--font-mono); color: var(--ink-4); letter-spacing: 0.04em; }
}
@media (max-width: 800px) { .cmp__cols { grid-template-columns: minmax(0, 1fr); } .cmp__cta { margin-top: 64px; } }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-top: 40px; }
.footer__in {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-4) var(--sp-6);
  font-size: 13px; color: var(--ink-3);
}
.footer__brand { color: var(--ink-2); }
.footer__brand .wordmark { font-size: 14px; margin-right: 6px; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-left: auto; list-style: none; padding: 0; }
.footer__links a { color: var(--ink-3); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer__links a:hover { color: var(--ink-1); }
.footer__note { flex-basis: 100%; color: var(--ink-3); font-size: 12px; }
/* The DEN block mark from the TUI, drawn as one path so the cells read
   as solid blocks; it spans the content width */
.footer__mark {
  display: block;
  inline-size: 100%; max-inline-size: 1260px; block-size: auto;
  margin: var(--sp-8) 0 40px;
  fill: var(--ink-5);
}

/* ── 404 ──────────────────────────────────────────────────────────── */
.nf {
  min-height: calc(100svh - var(--bar-h) - 120px);
  display: grid; align-items: center;
  padding-block: var(--sp-9);
}
.nf__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf__in > .micro { margin-top: var(--sp-6); }
.nf__in .display { margin-top: var(--sp-5); max-width: 880px; }
.nf .display { font-size: min(var(--fs-hero), 72px); }
.nf__in .lead { margin-top: 28px; }
.nf__in .actions { margin-top: 40px; justify-content: center; }
.nf__in .tui { margin-top: var(--sp-8); width: 100%; max-width: 640px; text-align: left; }

/* ════════════════════════════════════════════════════════════════════
   TUI re-creation (docs/design-spec.md §9.F)
   A character grid: Geist Mono in a fixed 1ch × --cell-h cell, Den's own
   deepharness colours (--tui-*), everything placed in whole cells and
   whole lines. The text is real; box and block characters are drawn by
   CSS once js/ has wrapped them (.tui.is-drawn .bx), and show as plain
   glyphs without JS. Critters are canvases drawn by js/.
   ════════════════════════════════════════════════════════════════════ */
.tui {
  container: tui / inline-size;
  min-width: 0;
  margin: 0;
  background: var(--tui-bg);
  border: 1px solid var(--line);
  color: var(--tui-fg);
  font: 400 var(--tui-fs)/var(--cell-h) var(--font-mono);
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  font-variant-numeric: tabular-nums;
  font-variant-emoji: text;
  font-synthesis: none;
  text-align: left;
}
.tui__screen {
  padding: var(--cell-h) 2ch;
  min-width: 0;
  overflow-x: auto;                 /* the block scrolls, never the page */
  overscroll-behavior-x: contain;
}
@container tui (max-width: 520px) {
  .tui__screen { --cell-h: var(--cell-h-narrow); font-size: var(--tui-fs-narrow); line-height: var(--cell-h-narrow); }
}

/* One terminal line. Spaces are real; long lines are cut with … */
.ln {
  display: block; height: var(--cell-h);
  white-space: pre; overflow: hidden; text-overflow: ellipsis;
}
.ln:empty::before { content: " "; }
/* A line with a part pinned to the right edge */
.ln.lr { display: flex; text-overflow: clip; }
.lr > * { flex: none; white-space: pre; }
.lr > .l { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lr > .r { margin-left: auto; padding-left: 2ch; }
.lr > .r:empty { display: none; }
.lr--tabs > .l { flex: none; }      /* Den keeps the tabs and cuts the keycaps */
.lr--tabs > .r { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ln.ov { overflow: visible; }

/* Den's colours, text weights, selection */
.c-fg { color: var(--tui-fg); }
.c-dim { color: var(--tui-dim); }
.c-muted { color: var(--tui-muted); }
.c-bright { color: var(--tui-bright); }
.c-ok { color: var(--tui-ok); }
.c-attn { color: var(--tui-attn); }
.c-err { color: var(--tui-err); }
.c-code { color: var(--tui-code); }
.c-bd { color: var(--tui-border); }
.c-sel { color: var(--tui-sel); }
.tui .b { font-weight: 700; }
.tui .u { text-decoration: underline 1px; text-underline-offset: 3px; }
.sel { background: var(--tui-sel); }

/* agent colours: the class sets --ag; .a, .nm and .chip use it */
.ag-orch   { --ag: var(--ag-orch); }
.ag-mossy  { --ag: var(--ag-mossy); }
.ag-fuzzy  { --ag: var(--ag-fuzzy); }
.ag-plucky { --ag: var(--ag-plucky); }
.ag-snug   { --ag: var(--ag-snug); }
.ag-wombat { --ag: var(--ag-wombat); }
.ag-pebble { --ag: var(--ag-pebble); }
.a  { color: var(--ag); }
.nm { color: var(--ag); font-weight: 700; }
/* chips and keycaps carry their 1-cell padding as real spaces */
.chip { background: var(--ag); color: var(--tui-bg); font-weight: 700; }
.kc { background: var(--tui-sel); color: var(--tui-fg); }
.brand { background: var(--tui-bright); color: var(--tui-bg); font-weight: 700; }
.pc { background: var(--tui-sel); color: var(--tui-fg); }
.pc.on { background: var(--tui-bright); color: var(--tui-bg); font-weight: 700; }
.badge-n { background: var(--tui-fg); color: var(--tui-bg); font-weight: 700; }
.badge-n.wait { background: var(--tui-attn); }

/* Panes: Den's box(), square corners through the centre of the outer
   cells, title one space in from ┌─. Content starts in column 1. */
.panes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.pane { position: relative; min-width: 0; padding: var(--cell-h) 1ch; }
.pane::before {
  content: ""; position: absolute; pointer-events: none;
  inset: round(down, calc(var(--cell-h) / 2), 1px) round(down, 0.5ch, 1px);
  border: 1px solid var(--tui-border);
}
.pane.is-focus::before { border-color: var(--tui-sel); }
.pane__t {
  position: absolute; top: 0; left: 2ch; z-index: 1;
  height: var(--cell-h); max-width: calc(100% - 4ch);
  overflow: hidden; white-space: pre; text-overflow: ellipsis;
  background: var(--tui-bg); color: var(--tui-dim);
}
.pane.is-focus .pane__t { color: var(--tui-fg); }
/* a full-width ─ rule, drawn */
.rule {
  height: var(--cell-h);
  background: linear-gradient(var(--tui-border), var(--tui-border)) 0 round(down, calc(var(--cell-h) / 2), 1px) / 100% 1px no-repeat;
}
.rule.c-sel { background-image: linear-gradient(var(--tui-sel), var(--tui-sel)); }
.rule--cc { background-image: linear-gradient(var(--tui-dim), var(--tui-dim)); }   /* Claude Code's own rule, #828282 */
.rule--name > .r { background: var(--tui-bg); padding-left: 0; margin-right: 2ch; }

/* The wordmark: DEN as half-cell pixel rows, 15 cells × 3 lines */
.tui__head { display: flex; min-width: 0; }
.tui__head > .info { flex: 1 1 auto; min-width: 0; padding-left: 4ch; }
.tui__head > .clock { flex: none; padding-left: 2ch; }
.mark .p-bright { fill: var(--tui-bright); }
.mark .p-fg { fill: var(--tui-fg); }
.mark .p-mid { fill: var(--tui-logo-mid); }
.mark .p-dim { fill: var(--tui-dim); }
.mark {
  display: block; flex: none;
  width: 15ch; height: calc(3 * var(--cell-h));
  shape-rendering: crispEdges;
}
.tui .brand-line { display: none; }
@container tui (max-width: 760px) {     /* Den shows the brand chip under 100 columns */
  .tui__head { display: none; }
  .tui .brand-line { display: flex; }
}

/* Drawn box and block characters (U+2500–U+259F). Only active once js/
   has wrapped every one of them and set .is-drawn on the block. */
.bx { font-style: normal; }
.tui.is-drawn .bx {
  --x: round(down, 50%, 1px);
  --y: round(down, calc(var(--cell-h) / 2), 1px);
  display: inline-block; position: relative; vertical-align: top;
  width: 1ch; height: var(--cell-h);
  -webkit-text-fill-color: transparent;
}
.tui.is-drawn .bx::before, .tui.is-drawn .bx::after {
  content: none; position: absolute; background: currentColor;
}
/* ─ ━ */
.tui.is-drawn .bx[data-c="─"]::before { content: ""; left: 0; right: 0; top: var(--y); height: 1px; }
/* │ */
.tui.is-drawn .bx[data-c="│"]::before { content: ""; top: 0; bottom: 0; left: var(--x); width: 1px; }
/* ┃ */
.tui.is-drawn .bx[data-c="┃"]::before { content: ""; top: 0; bottom: 0; left: calc(var(--x) - 1px); width: 2px; }
/* verticals: full, upper half, lower half */
.tui.is-drawn .bx:is([data-c="├"], [data-c="┤"], [data-c="┼"])::before { content: ""; top: 0; bottom: 0; left: var(--x); width: 1px; }
.tui.is-drawn .bx:is([data-c="└"], [data-c="┘"], [data-c="┴"])::before { content: ""; top: 0; height: calc(var(--y) + 1px); left: var(--x); width: 1px; }
.tui.is-drawn .bx:is([data-c="┌"], [data-c="┐"], [data-c="┬"])::before { content: ""; top: var(--y); bottom: 0; left: var(--x); width: 1px; }
/* horizontals: right half, left half, full */
.tui.is-drawn .bx:is([data-c="├"], [data-c="└"], [data-c="┌"])::after { content: ""; top: var(--y); height: 1px; left: var(--x); right: 0; }
.tui.is-drawn .bx:is([data-c="┤"], [data-c="┘"], [data-c="┐"])::after { content: ""; top: var(--y); height: 1px; left: 0; width: calc(var(--x) + 1px); }
.tui.is-drawn .bx:is([data-c="┼"], [data-c="┴"], [data-c="┬"])::after { content: ""; top: var(--y); height: 1px; left: 0; right: 0; }
/* blocks */
.tui.is-drawn .bx[data-c="█"]::before { content: ""; inset: 0; }
.tui.is-drawn .bx[data-c="▀"]::before { content: ""; left: 0; right: 0; top: 0; height: var(--y); }
.tui.is-drawn .bx[data-c="▄"]::before { content: ""; left: 0; right: 0; bottom: 0; top: var(--y); }
.tui.is-drawn .bx[data-c="▌"]::before { content: ""; top: 0; bottom: 0; left: 0; width: var(--x); }
.tui.is-drawn .bx[data-c="▐"]::before { content: ""; top: 0; bottom: 0; right: 0; left: var(--x); }
.tui.is-drawn .bx[data-c="▎"]::before { content: ""; top: 0; bottom: 0; left: 0; width: max(1px, round(nearest, 25%, 1px)); }
.tui.is-drawn .bx[data-c="▏"]::before { content: ""; top: 0; bottom: 0; left: 0; width: max(1px, round(nearest, 12.5%, 1px)); }
.tui.is-drawn .bx[data-c="░"]::before { content: ""; inset: 0; opacity: 0.25; }

/* Critters: a canvas drawn by js/ from the agent's seed. The holder
   takes the critter's first-row cells; the canvas hangs down from it. */
.crw { display: inline-block; position: relative; vertical-align: top; width: 8ch; height: var(--cell-h); }
.crw--half { width: 16ch; }
.cr { position: absolute; left: 0; top: 0; display: block; width: 8ch; height: calc(4 * var(--cell-h)); }
.crw--half .cr { width: 16ch; height: calc(8 * var(--cell-h)); }

/* ── Fleet view ───────────────────────────────────────────────────── */
.panes--fleet { grid-template-columns: minmax(0, round(down, 34%, 1ch)) minmax(0, 1fr); }
@container tui (max-width: 639px) {
  .panes--fleet, .panes--2 { grid-template-columns: minmax(0, 1fr); }
  .hide-narrow { display: none !important; }
}
.panes--2 { grid-template-columns: minmax(0, round(down, 50%, 1ch)) minmax(0, 1fr); }
.panes--ov { grid-template-columns: minmax(0, round(down, 34%, 1ch)) minmax(0, 1fr); }
@container tui (max-width: 639px) { .panes--ov { grid-template-columns: minmax(0, 1fr); } }

/* Dispatch card (Den's chat card for a brief): stripe, critter, lines */
.card { position: relative; }

/* ── State swap: working → done ───────────────────────────────────────
   Any element with data-state holds both versions of what changes,
   stacked in one grid cell so nothing reflows. js/ flips data-state
   between "working" and "done"; CSS cross-fades over --t-state.     */
.swap { display: inline-grid; vertical-align: top; }
.swap > * { grid-area: 1 / 1; white-space: pre; transition: opacity var(--t-state) ease-out, visibility var(--t-state) ease-out; }
.swap--block { display: grid; min-width: 0; }
.swap--block > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-state="working"] .when-done,
[data-state="done"] .when-working { opacity: 0; visibility: hidden; }

/* ── Review view ──────────────────────────────────────────────────── */
.panes--review { grid-template-columns: minmax(0, clamp(32ch, round(down, 28%, 1ch), 46ch)) minmax(0, 1fr) minmax(0, clamp(32ch, round(down, 22%, 1ch), 44ch)); }
.review-left { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
@container tui (max-width: 1107px) {    /* under 142 cells: Den drops the Review pane */
  .panes--review { grid-template-columns: minmax(0, clamp(32ch, round(down, 28%, 1ch), 46ch)) minmax(0, 1fr); }
  .panes--review > .rv-drafts { display: none; }
}
@container tui (max-width: 561px) {     /* under 72 cells: the diff alone */
  .panes--review { grid-template-columns: minmax(0, 1fr); }
  .panes--review > .review-left { display: none; }
}
@container tui (max-width: 520px) {
  .panes--review { grid-template-columns: minmax(0, 1fr); }
  .panes--review > .review-left { display: none; }
}

/* ── Map: a fixed character picture; it scrolls sideways in its pane ── */
.map { overflow-x: auto; overscroll-behavior-x: contain; }
.map > .ln { overflow: visible; width: max-content; }
.map__hint { display: none; }
@container tui (max-width: 690px) {     /* the map (83 cells) is wider than the pane: say so */
  .map__hint { display: block; }
}

/* ── Claude Code footer with the badge ────────────────────────────── */
.cursor { background: var(--tui-fg); color: var(--tui-bg); }
.tui--cc .lr > .l { flex: none; min-width: 34ch; max-width: 40ch; }
.tui--cc .lr > .r.gauge { margin-left: 0; padding-left: 3ch; flex: 0 1 auto; min-width: 0; overflow: hidden; }
@container tui (max-width: 779px) {     /* the badge drops its gauges on narrow terminals */
  .tui--cc .gauge { display: none; }
  .tui--cc .lr > .l { flex: 0 1 auto; min-width: 0; }
}

/* ── Section entrance (once, on scroll) ───────────────────────────────
   Hidden only when JS is present: <html class="js"> is set in <head>.
   js/ adds .is-in through an IntersectionObserver.                    */
.js .reveal {
  opacity: 0; transform: translateY(var(--rise));
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--late { transition-delay: 120ms; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (min-width: 960px) {
  .h2 .dim { display: block; }
}

@media (max-width: 1099px) {
  .feat-body__copy { grid-column: 8 / span 5; }
  .split--map > .split__copy,
  .split--map > .split__media { grid-column: 1 / -1; }   /* the map needs the full width */
  .split--map > .split__copy { max-width: 640px; }
}

/* One column under 960px: index, tile, headline, body, then the TUI. */
@media (max-width: 959px) {
  .grid { row-gap: var(--sp-7); }
  .split > .split__copy,
  .split > .split__media,
  .feat-body__media, .feat-body__copy,
  .install__head, .install__card { grid-column: 1 / -1; grid-row: auto; }
  .split__copy, .feat-body__copy, .install__head { max-width: 640px; }

  .hero { padding-block: 72px 96px; }

  .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat:first-child, .stat:last-child { padding: 40px 32px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(even) { padding-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* Inbox: index, tile, h2, then copy, then the TUI */
  .feat-head { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0; }
  .feat-head > div { display: contents; }
  .feat-head .idx { order: 1; }
  .feat-head > .tile { order: 2; margin-top: var(--sp-5); }
  .feat-head .h2 { order: 3; margin-top: var(--sp-6); }
  .feat-body__copy { order: -1; }

  .points--2 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .pair__cc, .pair__den, .pair__link { grid-column: 1 / -1; }
  .pair__link { grid-row: 2; margin: 0; padding: var(--sp-3) 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
  .pair__link::before { position: static; display: block; width: 0; height: 48px; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .pair__den { grid-row: 3; }
  .review-head__l, .review-head__r { grid-column: 1 / -1; }
  .review-head__r { max-width: 640px; }
  .missions__tui, .shapes-row { max-width: none; }
  .points--2 { margin-inline: auto; }
}

/* Phone, designed at 375px */
@media (max-width: 640px) {
  .nav { gap: 0; }
  .nav__link { display: none; }       /* the footer repeats them */

  .hero { padding-block: 48px 88px; }
  .hero__copy .actions { width: 100%; flex-wrap: nowrap; }
  .hero__copy .actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .stage { margin-top: var(--sp-7); padding: var(--sp-2); }

  .proof__list { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat:first-child, .stat:last-child, .stat:nth-child(n) {
    display: grid; grid-template-columns: var(--tile-m) minmax(0, 1fr);
    column-gap: var(--sp-5); align-items: start;
    padding: var(--sp-6) 0; border-left: 0;
  }
  .stat + .stat { border-top: 1px solid var(--line); }
  .stat .tile { grid-row: 1 / span 3; }
  .stat__label { margin-top: 0; }
  .stat__label, .stat__value, .stat__caption { grid-column: 2; }
  .stat__value { margin-top: var(--sp-2); }
  .stat__caption { margin-top: var(--sp-2); }

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

  .reqs { grid-template-columns: minmax(0, 1fr); }
  .reqs dt { padding: var(--sp-4) 0 0; border-top: 1px solid var(--sep); }
  .reqs dd { padding: 0 0 var(--sp-4); border-top: 0; }
  .reqs dt:first-of-type { padding-top: 0; border-top: 0; }
  .reqs dd:first-of-type { padding-top: 0; }
  .card--primary { padding: var(--sp-5); }
  .footer__links { margin-left: 0; }
  .footer__mark { margin-top: var(--sp-7); margin-bottom: var(--sp-6); }
}

/* ── Motion preferences ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}