/* ════════════════════════════════════════════════════════════════════════════
   DECYPHERLY — hidden sublink. An investor-facing ENGINEERING BRIEF for a
   chess model that actually understands the board.

   Identity: a technical document in the Palantir / Anduril / US-Graphics
   lineage. Grotesk display (Archivo) + grid mono (Martian Mono), no serif
   anywhere. Structure is drawn with REAL ink rules — 1.5px borders, full
   spec tables, engineering-drawing title blocks ("SHEET 02 · PROBLEM
   ANALYSIS · REV A") — not decorative hairlines. Data is literal: FEN
   strings, eval numbers, training-run progress bars. No fade-up reveals;
   the only motion is the two scroll-driven figures (Fig. A, the embedded 3D
   pipeline plate, and Fig. B, the phone). Deliberately unlike the home
   page's space cinema and Faline's warm serif editorial.
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* must beat layout display rules (#bv-host et al) */

:root {
  color-scheme: light;
  --bg:        #f0f0e8;   /* engineering paper */
  --bg-2:      #e7e8dc;
  --white:     #f7f8f1;   /* raised cells */
  --ink:       #14160f;
  --ink-2:     #464b3e;
  --ink-3:     #7b8070;
  --rule:      #14160f;   /* structure is drawn in ink */
  --rule-soft: #c9cbb8;
  --sig:       #40865f;   /* middle green for text on light backgrounds */
  --sig-bright:#8fd4ae;   /* lightest green for text on dark backgrounds */
  --sig-dark:  #20563a;   /* deep green for filled backgrounds */
  --neg:       #b43a1e;
  --dark:      #101310;   /* dark sheet (thesis) */
  --plate:     #0e120f;   /* exhibit plate = 3D scene clear colour */
  --brand-bg:  var(--sig-dark); /* shared Decypherly logo block */
  --sq-light:  #f0e9d2;   /* board cream (plates + phone) */
  --sq-dark:   #c9bd96;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --grot: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --nav-h: 60px;
  --page-pad: clamp(20px, 4vw, 28px);
  --measure: 1160px;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  /* the scene void, NOT paper: the fixed canvas is shifted/scaled during the
     hook, and a paper body showed through the exposed left edge as a seam ("a
     bar on the left"). Matching the scene clear colour hides it. #page sets its
     own paper background (z20) so the brief is unaffected. */
  background: var(--plate); color: var(--ink); overflow-x: hidden;
  font-family: var(--grot); line-height: 1.6; letter-spacing: -0.004em;
  font-size: 16.5px;
}
::selection { background: var(--ink); color: var(--bg); }

.wrap { max-width: var(--measure); margin: 0 auto; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--grot); color: var(--ink); }
h1 { font-weight: 700; font-stretch: 105%; font-size: clamp(2.45rem, 4.7vw, 4.15rem); line-height: 1.0; letter-spacing: -0.022em; }
h2 { font-weight: 740; font-stretch: 110%; text-transform: uppercase; font-size: clamp(1.7rem, 3.1vw, 2.55rem); line-height: 1.0; letter-spacing: -0.008em; }
h3 { font-weight: 650; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -0.012em; }
em { font-style: normal; }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.6;
  color: var(--ink-2); max-width: 62ch; margin-top: 18px;
}
.lead + .lead { margin-top: 10px; }

a { color: var(--sig); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* ── Title block — the recurring engineering-drawing strip ────────────────── */
.tblock {
  display: grid; grid-template-columns: auto 1fr auto auto;
  border: 1.5px solid var(--rule);
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.35;
  margin-bottom: clamp(44px, 6vw, 68px);
  background: var(--white);
}
.tblock > span { padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.tblock > span + span { border-left: 1px solid var(--rule); }
.tb-no { background: var(--brand-bg); color: var(--bg); font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; }
.tb-title { font-weight: 700; color: var(--ink); }
.tb-side { color: var(--ink-3); white-space: nowrap; }

/* ── Nav — floats over the dark cinematic, inverts to paper once the brief lands ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  background: var(--dark);
  border-bottom: 1px solid rgba(143, 212, 174, 0.1);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
}
/* Keep the overview's top bar readable against the first dark section. */
.dcy .nav:not(.on-light) {
  background: var(--dark);
  border-bottom-color: rgba(143, 212, 174, 0.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav.on-light {
  background: rgba(240, 240, 232, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--rule);
}
.nav-wrap {
  padding: 0 max(var(--page-pad), calc((100% - var(--measure)) / 2)); height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; position: relative;
}
.nav-wrap .brand { grid-column: 1; justify-self: start; }
.nav-wrap .nav-links { grid-column: 2; justify-self: center; }
.nav-wrap .nav-actions { grid-column: 3; justify-self: end; }
.brand {
  font-family: var(--mono); font-weight: 800; font-size: 0.86rem;
  color: var(--bg); text-decoration: none; white-space: nowrap;
  background: var(--brand-bg); padding: 10px 14px; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 7px; transition: color 0.3s var(--ease);
  flex: 0 0 auto;
}
.brand:hover { color: #fff; }
.brand-mark { display: inline-flex; align-items: center; color: var(--sig-bright); transition: color 0.3s var(--ease); }
.brand-mark svg { width: 1em; height: 1em; display: block; }
.nav.on-light .brand { color: var(--bg); }
.nav.on-light .brand:hover { color: #fff; }
.nav.on-light .brand-mark { color: var(--sig); }
.nav-links { display: flex; gap: 22px; }
.nav-links a {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(228, 232, 216, 0.74); text-decoration: none; transition: color 0.15s;
  padding: 4px 0;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--sig-bright); text-underline-offset: 6px; }
.nav.on-light .nav-links a { color: var(--ink-2); }
.nav.on-light .nav-links a:hover { color: var(--ink); }
.nav.on-light .nav-links a.active { color: var(--ink); text-decoration-color: var(--sig); }
.nav-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; width: 36px; height: 36px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: #f4f6ea; transition: 0.2s; }
.nav.on-light .nav-toggle span { background: var(--ink); }

#problem, #architecture, #product, #market, #progress, #thesis, #founder { scroll-margin-top: 60px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: 15px 28px; border: 1.5px solid var(--rule); border-radius: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--sig-dark); border-color: var(--sig-dark); color: #f2f6ee; }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { border-color: var(--sig); color: var(--sig); }

/* ════════════════════════════════════════════════════════════════════════════
   THE CINEMATIC — a fixed, full-bleed flythrough of the machine. The pitch is
   told over it beat by beat (keyed to camera stations in scene3d.js / site.js),
   then the investor brief (#page) scrolls up OVER the scene. Same spine as the
   home page: fixed canvas z0 · overlays z10 · content z20.
   ════════════════════════════════════════════════════════════════════════════ */
#scene-canvas {
  position: fixed; top: 0; bottom: 0; left: -18vw; width: 136vw; height: 100dvh;
  display: block; z-index: 0; background: var(--plate);
  transform-origin: center;
  will-change: transform;
}
/* legibility wash: gentle top + bottom vignette, darker in the text corner —
   keeps the beat copy readable without muting the bright webs mid-frame */
.scene-scrim, .scene-scrim-hook {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
}
.scene-scrim {
  /* NOT a 4-edge vignette — just a soft pool of shade that hugs the beat copy
     (lower-left). The beats also carry their own text-shadow + tight ::before
     wash, so this only needs to seat the block, not darken the whole frame. */
  background: radial-gradient(42% 40% at 25% 82%, rgba(8,11,8,0.72), rgba(8,11,8,0) 70%);
}
/* the extra hero darkening (clears the hook copy). Its OPACITY is crossfaded
   out by the driver as you scroll off the hook — replacing a class-based swap
   that snapped the whole scene brighter in one frame. A soft pool behind the
   centred hero copy (centre-left), not a left-edge bar. */
.scene-scrim-hook {
  opacity: 0;
  background: radial-gradient(42% 50% at 26% 50%, rgba(8,11,8,0.84), rgba(8,11,8,0) 68%);
}

/* the beats — one fixed overlay per station, opacity/rise driven by site.js */
#journey-overlays { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.beat {
  position: fixed; inset: 0; display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 3vh) max(var(--page-pad), calc((100% - var(--measure)) / 2)) clamp(48px, 9vh, 108px);
  opacity: 0; visibility: hidden; will-change: opacity, transform;
}
.beat-inner { position: relative; z-index: 1; max-width: 600px; }
/* readability over the bright webs: a soft dark aura that hugs the GLYPHS
   (text-shadow), plus a very tight low-opacity wash — never a box around the block */
.beat h1, .beat h2, .beat-lead { text-shadow: 0 2px 22px rgba(6,9,6,0.72), 0 1px 7px rgba(6,9,6,0.6); }
.beat-body, .beat-sub, .beat-tag, .beat-hint, .evalcard { text-shadow: 0 1px 12px rgba(6,9,6,0.8), 0 0 5px rgba(6,9,6,0.64); }
.beat-inner::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -8px -16px -10px -14px;
  background: radial-gradient(92% 120% at 26% 52%, rgba(7,10,7,0.46), rgba(7,10,7,0) 74%);
  filter: blur(17px);
}
.beat-hook .beat-inner::before { inset: -12px -22px; background: radial-gradient(86% 108% at 50% 50%, rgba(7,10,7,0.42), rgba(7,10,7,0) 76%); }
.beat h1, .beat h2 { color: #f5f7ec; }
.beat h2 {
  text-transform: none; font-stretch: 104%; font-weight: 720;
  font-size: clamp(1.9rem, 3.7vw, 3.15rem); line-height: 1.02; letter-spacing: -0.02em;
}
.beat h2 em, .beat h1 em { color: var(--sig-bright); }
.beat-body { margin-top: 16px; font-size: clamp(1rem, 1.45vw, 1.17rem); line-height: 1.58; color: rgba(228,232,214,0.84); max-width: 46ch; }
.beat-tag {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sig-bright);
}
.beat-tag b { background: var(--sig-dark); color: #08110a; font-weight: 700; padding: 4px 8px 5px; letter-spacing: 0.1em; }

/* the opening hook — big, centred, always clear of the nav */
.beat-hook { align-items: center; padding-top: calc(var(--nav-h) + 5vh); }
.beat-hook .beat-inner { max-width: min(680px, 92vw); }
.beat-hook h1 { font-size: clamp(2.5rem, 5.4vw, 4.7rem); line-height: 1.0; font-weight: 760; font-stretch: 108%; letter-spacing: -0.024em; }
.beat-sub { margin-top: 24px; font-size: clamp(1.06rem, 1.6vw, 1.3rem); line-height: 1.5; color: rgba(228,232,214,0.84); max-width: 40ch; }

/* the fork beat — the engine's cold number vs. the real idea */
.beat-fork .beat-inner { max-width: 560px; }
.evalcard {
  display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 24px;
  padding: 11px 17px; border: 1px solid rgba(238,240,226,0.22);
  background: rgba(10,14,10,0.42); font-family: var(--mono);
}
.ev-src, .ev-move { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(205,210,190,0.58); }
.ev-num { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: #c4c9b8; }
.beat-lead { font-size: clamp(1.7rem, 3.5vw, 2.75rem); font-weight: 720; font-stretch: 104%; letter-spacing: -0.02em; line-height: 1.05; color: #f5f7ec; }
.beat-lead em { color: var(--sig-bright); }
.beat-fork .beat-body { margin-top: 18px; }

/* scroll hints */
.beat-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(24px, 4vh, 42px);
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(205,210,190,0.6);
}
.beat-hint i { color: var(--sig-bright); font-style: normal; animation: hint-bob 1.8s var(--ease) infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* the tall spacer sets the flythrough's scroll length; the fixed scene shows through it */
#journey-spacer { position: relative; width: 100%; z-index: 1; pointer-events: none; /* height set in JS */ }

/* ── The investor brief — lands over the cinematic ────────────────────────── */
#page {
  position: relative; z-index: 20; background: var(--bg);
  box-shadow: 0 -46px 90px -30px rgba(8, 11, 8, 0.62);
}
.chapter { padding: clamp(76px, 9.5vw, 128px) var(--page-pad); }
.sheet-head { margin-bottom: clamp(40px, 5.5vw, 64px); }
.sheet-head h2 { max-width: 24ch; }

/* ── Sheet 02 · Spec table ────────────────────────────────────────────────── */
.spec { border: 1.5px solid var(--rule); background: var(--white); }
.spec-row { display: grid; grid-template-columns: 1.02fr 1.2fr 1.2fr; }
.spec-row + .spec-row { border-top: 1px solid var(--rule); }
.spec-row > span { padding: 17px 20px 19px; font-size: 0.94rem; line-height: 1.58; color: var(--ink-2); }
.spec-row > span + span { border-left: 1px solid var(--rule); }
.spec-head { background: var(--ink); }
.spec-head > span { padding: 10px 20px; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--bg); }
.spec-head > span + span { border-left-color: #3c4034; }
.s-name { font-weight: 650; color: var(--ink) !important; font-size: 1.04rem !important; letter-spacing: -0.012em; line-height: 1.3 !important; }
.s-name small { display: block; margin-top: 7px; font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.spec-row.is-us { background: #eef4ea; box-shadow: inset 4px 0 0 var(--sig-dark); }
.spec-row.is-us .s-name { color: var(--sig) !important; }
.spec-row.is-us .s-name small { color: var(--sig); opacity: 0.75; }
.spec-row.is-us > span { color: var(--ink); }
/* mobile-only cell labels (shown when the grid stacks) */
.spec-row:not(.spec-head) > span:nth-child(2)::before,
.spec-row:not(.spec-head) > span:nth-child(3)::before {
  display: none;
  font-family: var(--mono); font-size: 0.54rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-3);
  margin-bottom: 5px;
}
.spec-row:not(.spec-head) > span:nth-child(2)::before { content: 'Mechanism'; }
.spec-row:not(.spec-head) > span:nth-child(3)::before { content: 'Outcome'; }

/* ── Market · commercial paths ────────────────────────────────────────────── */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.path { border: 1.5px solid var(--rule); background: var(--white); display: flex; flex-direction: column; }
.path-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.path-head b { color: var(--sig-bright); font-weight: 700; }
.path > p { padding: 18px 20px 20px; font-size: 0.98rem; line-height: 1.6; color: var(--ink-2); }
.kv > div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 11px 20px 12px; border-top: 1px solid var(--rule-soft); align-items: baseline; }
.kv b { font-family: var(--mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.kv span { font-size: 0.92rem; line-height: 1.5; color: var(--ink); }

/* ── Sheet 06 · Training runs ─────────────────────────────────────────────── */
.runs { list-style: none; margin-bottom: clamp(48px, 6vw, 72px); border-top: 1.5px solid var(--rule); }
.run { padding: 20px 0 22px; border-bottom: 1px solid var(--rule-soft); }
.run:last-child { border-bottom: 1.5px solid var(--rule); }
.run-line { display: grid; grid-template-columns: 52px 1fr minmax(150px, 240px) 108px; align-items: center; gap: clamp(14px, 2vw, 24px); }
.run-line b { font-family: var(--mono); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
.run-line h3 { font-size: clamp(1.1rem, 1.5vw, 1.28rem); }
.run-bar { height: 12px; border: 1px solid var(--rule); background: var(--white); }
.run-bar i { display: block; height: 100%; background: var(--sig-dark); }
.run.now .run-bar i { background: repeating-linear-gradient(-45deg, var(--sig-dark) 0 5px, #67ac87 5px 10px); }
.run-state { font-family: var(--mono); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; justify-self: end; }
.run.done .run-state, .run.done .run-line b { color: var(--sig); }
.run.now .run-state { color: var(--ink); }
.run.next .run-state, .run.next .run-line b { color: var(--ink-3); }
.run > p { margin-top: 10px; padding-left: calc(52px + clamp(14px, 2vw, 24px)); max-width: 74ch; font-size: 0.93rem; line-height: 1.58; color: var(--ink-2); }

/* data strip */
.data4 { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--rule); background: var(--white); }
.data4 > div { padding: 20px 20px 22px; }
.data4 > div + div { border-left: 1px solid var(--rule); }
.data4 b { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; }
.data4 span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; }

/* ── Sheet 07 · Thesis (dark sheet) ───────────────────────────────────────── */
.band-dark { background: var(--dark); color: #e9ecdd; }
.band-dark .tblock { background: transparent; border-color: #4a4f42; color: #a7ac99; }
.band-dark .tb-no { background: #e9ecdd; color: var(--dark); }
.band-dark .tblock > span + span { border-left-color: #4a4f42; }
.band-dark .tb-title { color: #e9ecdd; }
.thesis-statement {
  max-width: 30ch; margin: 0 0 clamp(48px, 6vw, 72px);
  font-weight: 660; font-stretch: 104%;
  font-size: clamp(1.65rem, 3.2vw, 2.7rem); line-height: 1.14; letter-spacing: -0.02em;
  color: #e9ecdd;
}
.thesis-statement em { color: var(--sig-bright); }
.domains { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #4a4f42; }
.domain { padding: 18px 20px 20px; }
.domain + .domain { border-left: 1px solid #4a4f42; }
.domain b { display: block; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--sig-bright); }
.domain p { margin-top: 10px; font-size: 0.93rem; line-height: 1.58; color: #b9bead; }
.thesis-note { margin-top: clamp(32px, 4.5vw, 48px); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8b9080; line-height: 1.9; }

/* live-application link inside a domain card (Faline) — on the dark band */
.domain a { color: var(--sig-bright); text-decoration: none; border-bottom: 1px solid rgba(143,212,174,0.4); transition: border-color 0.2s; }
.domain a:hover { border-bottom-color: var(--sig-bright); }

/* ── Sheet 08 · Founder ───────────────────────────────────────────────────── */
.founder-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.founder-kv { border: 1.5px solid var(--rule); background: var(--white); }
.founder-kv > div:first-child { border-top: none; }
.founder-kv > div { grid-template-columns: 88px 1fr; padding: 12px 16px 13px; }
.statement p { font-size: clamp(1.04rem, 1.4vw, 1.18rem); line-height: 1.7; color: var(--ink-2); max-width: 58ch; }
.statement p + p { margin-top: 1.3em; }
.statement p em { color: var(--ink); font-weight: 600; }
.statement-sig {
  margin-top: clamp(26px, 3.5vw, 38px); padding-top: 16px; border-top: 1.5px solid var(--rule);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Footer — the drawing's title block ───────────────────────────────────── */
.footer { padding: clamp(56px, 7vw, 88px) var(--page-pad) 20px; }
.foot-tblock { grid-template-columns: auto 1fr auto auto auto; margin-bottom: 0; border: none; background: none; }
.foot-tblock .tb-no .brand-mark { color: var(--sig-bright); }
.foot-tblock .tb-no .brand-mark svg { width: 1.2em; height: 1.2em; }
.foot-tblock .tb-title { text-transform: none; letter-spacing: 0.02em; font-weight: 500; color: var(--ink-2); }
.foot-tblock .tb-title a { color: var(--sig); }
.foot-note { margin-top: 13px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

/* ── Fig. B — the phone (device on the sheet; the SCREEN is the light app) ── */
.app-intro { padding-bottom: 0; }
#app-head { margin-bottom: 0; }

.rev-scrolly { position: relative; height: calc(240dvh - var(--nav-h)); }
.rev-scrolly-stage {
  position: sticky; top: var(--nav-h); height: calc(100dvh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 16px;
  background: var(--bg);
}

/* fit wrapper — scales the whole device to the stage without reflow.
   NO will-change/layer promotion here: a promoted layer is rasterised once at 1×
   and then bitmap-scaled by the compositor, which STEPS the screen's rounded-clip
   corner (a visible notch where the arc meets the straight edge) at the fractional
   fit scale. Painting normally re-rasterises the clip at the final on-screen size,
   so the corner stays crisp. The device is small and only animates briefly on
   scroll-in, so repainting instead of compositing costs nothing noticeable. */
.phone-fit { transform: scale(var(--phone-scale, 1)); transform-origin: center; }

/* the device: fixed design size (screen 375×812 + 14px bezel) */
.phone { position: relative; width: 403px; height: 840px; opacity: 0; }
/* titanium frame: light-catch gradient + bright inner rim, corners concentric
   with the screen (outer radius − padding = screen radius) */
.phone-frame {
  position: absolute; inset: 0; border-radius: 56px; padding: 8px;
  background: linear-gradient(150deg, #3a3a3d 0%, #191919 26%, #0a0a0b 52%, #161618 74%, #2c2c2f 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1.5px 1px rgba(255,255,255,0.14),
    inset 0 -2px 3px rgba(0,0,0,0.55),
    0 26px 46px -30px rgba(20,22,15,0.46);
}
/* No inner ring on the screen: the titanium frame's dark edge is the only bezel.
   A previous inset black "glass edge" read as a second border that stepped at the
   corner and looked like it faded (only visible where light content sat behind it).
   Everything inside the screen switches to Decypherly's paper/ink product UI. */
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 48px; overflow: hidden; background: #f4f3eb;
  display: flex; flex-direction: column;
  --ink: #10140f; --ink-2: rgba(16,20,15,0.7); --ink-3: rgba(16,20,15,0.45);
  --line: rgba(16,20,15,0.16); --line-strong: rgba(16,20,15,0.28);
  --panel: #fbfaf3; --panel-2: #eeefe4;
  --acc: var(--sig); --acc-bright: var(--sig); --acc-tint: rgba(85,167,124,0.11);
  --alert: #bf4f39; --alert-tint: rgba(191,79,57,0.1);
}
.ph-island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: 120px; height: 35px; border-radius: 999px; background: #000;
}

/* status bar — grid with the middle column matching the Dynamic Island's
   width, so the time and the icon cluster each sit centred in their own
   "ear" (the gap between the screen edge and the island), not hugging the
   outer edges. flex: 0 0 auto so the flex column can't shrink it (it was
   squeezing 58→42px, pulling the time up and dropping it below the
   top-pinned Dynamic Island). */
.ph-status { position: relative; z-index: 5; flex: 0 0 auto; height: 58px; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; }
.ph-time { grid-column: 1; justify-self: center; }
.ph-sys { grid-column: 3; justify-self: center; }
.ph-time {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: 16.5px; line-height: 1; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ph-sys { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.ph-sys svg { display: block; fill: currentColor; }
.ph-cell { width: 19px; height: 12px; }
.ph-wifi { width: 17px; height: 12px; }
.ph-battery { width: 28px; height: 13px; fill: none; }
.ph-battery-body { stroke: currentColor; stroke-width: 1.15; opacity: 0.68; fill: none; }
.ph-battery-fill, .ph-battery-cap { fill: currentColor; }

/* app header — the assistant's identity bar */
.ph-head {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: grid; grid-template-columns: 16px 1fr 16px; align-items: center; gap: 10px;
  padding: 4px 16px 12px; border-bottom: 1px solid var(--line);
  background: #f4f3eb;
}
.ph-back { color: var(--acc); font-size: 25px; line-height: 1; font-weight: 300; }
/* the model's mark — an inked tile, sharp corners to match the brief */
.ph-ava {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sig-dark); color: #f7f8ee; border: 1px solid var(--acc-bright);
  font-family: var(--grot); font-weight: 820; font-stretch: 108%; font-size: 16px; letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(247,248,238,0.14);
}
.ph-ava.sm { width: 26px; height: 26px; font-size: 13px; }
.ph-head-title { line-height: 1.1; min-width: 0; justify-self: start; }
.ph-head-title b { display: block; font-family: var(--grot); font-size: 16px; font-weight: 760; font-stretch: 106%; color: var(--ink); letter-spacing: -0.012em; }
.ph-eyebrow { display: block; margin-top: 1px; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.07em; color: var(--ink-3); }
/* the chat thread — a viewport the conversation streams and auto-scrolls inside */
.ph-thread { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ph-thread::after {
  /* a soft fade so streamed content dissolves under the header, not a hard cut.
     tall enough to fully dissolve a scrolled-under board rank (a piece is ~43px),
     with the first band solid so nothing chops at the header seam. */
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 40px; z-index: 2; pointer-events: none;
  background: linear-gradient(#f4f3eb 22%, rgba(244,243,235,0));
}
.ph-thread-inner {
  padding: 12px 15px 14px; display: flex; flex-direction: column; gap: 12px;
  will-change: transform;
}
/* every streamed block starts hidden; JS reveals it on scroll */
.ph-thread-inner [data-at] { opacity: 0; }

/* board rendered from data-fen (fixed glyph size — the device is transform-scaled) */
.gr-board {
  width: 100%; aspect-ratio: 1 / 1; display: grid;
  grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 1.5px solid var(--ink); border-radius: 0; overflow: hidden;
  box-shadow: 8px 8px 0 rgba(16,20,15,0.08);
}
.gr-sq { position: relative; display: flex; align-items: center; justify-content: center; }
.gr-sq.l { background: var(--sq-light); }
.gr-sq.d { background: var(--sq-dark); }
.gr-sq .pc { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1; color: #23211a; }
.gr-sq .pc.white { color: #fbfaf3; -webkit-text-stroke: 0.9px #2a2820; }
.gr-sq.flag::after { content: ''; position: absolute; inset: 7%; border: 2px solid var(--alert); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }
.gr-sq.hint::after { content: ''; position: absolute; inset: 7%; border: 2px dashed var(--acc); border-radius: 0; opacity: 0.9; }

/* the cover schematic board overrides the app-board look: flat, square, inked.
   Unlike the app board (fixed glyph size, sits in a transform-scaled device),
   this one is laid out at real, varying widths (proof card, mobile), so its
   glyphs must scale with the board itself — sized in cqw off the board's own
   inline size — or a small rendering clips pieces against the board edge. */
.schem .gr-board { border-radius: 0; box-shadow: none; border: 1px solid var(--rule); container-type: inline-size; }
.schem .gr-sq.l { background: var(--white); }
.schem .gr-sq.d { background: #d9dbc6; }
.schem .gr-sq .pc { font-size: clamp(9px, 7cqw, 22px); color: #14160f; }
.schem .gr-sq .pc.white { color: var(--white); -webkit-text-stroke: 1px #14160f; }
.schem .gr-sq.flag::after { inset: 5%; border: 2px solid var(--sig); border-radius: 0; }
.schem .gr-sq.hint::after { inset: 5%; border: 1.5px dashed var(--ink-3); border-radius: 0; opacity: 0.85; }

.ph-movebar { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.ph-move { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ph-eval { font-family: var(--mono); font-size: 12.5px; font-weight: 800; }
.ph-eval.bad { color: var(--alert); }
.ph-tag { margin-left: auto; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--alert); background: var(--alert-tint); border: 1px solid rgba(191,79,57,0.42); padding: 3px 7px; border-radius: 0; }

@keyframes ph-spin { to { transform: rotate(360deg); } }
@keyframes ph-blink { 50% { opacity: 0; } }

/* ── The attached position — the context the question is about ─────────────── */
.ph-attach {
  border: 1.5px solid var(--line-strong); background: var(--panel);
  padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 3px 3px 0 rgba(16,20,15,0.05);
}
.ph-attach-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; }
.ph-attach-eyebrow { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.ph-attach-title { font-family: var(--grot); font-size: 12.5px; font-weight: 680; letter-spacing: -0.01em; color: var(--ink); }

/* ── The user's message — a sent bubble ───────────────────────────────────── */
.ph-msg { display: flex; }
.ph-msg.user { justify-content: flex-end; }
.ph-msg.user p {
  max-width: 84%; background: var(--sig-dark); color: #f3f7f0; border: 1px solid var(--acc-bright);
  padding: 9px 12px; font-size: 13.5px; line-height: 1.42; font-weight: 460; letter-spacing: -0.004em;
  box-shadow: 2px 2px 0 rgba(85,167,124,0.16);
}

/* ── The assistant turn ───────────────────────────────────────────────────── */
.ph-turn { display: flex; flex-direction: column; gap: 11px; }
.ph-turn-head { display: flex; align-items: center; gap: 8px; }
.ph-turn-name { font-family: var(--grot); font-size: 13px; font-weight: 740; letter-spacing: -0.01em; color: var(--ink); }
.ph-turn-state {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.ph-turn-state.working { color: var(--acc); }
.ph-turn-state.working::before {
  content: ''; width: 10px; height: 10px; border-radius: 999px;
  border: 1.5px solid var(--acc); border-top-color: transparent;
  transform: rotate(var(--loader-rotation, 0deg));
}
.ph-turn-state.done::before {
  content: ''; width: 4px; height: 7px; margin: -2px 2px 0 0; border: solid var(--acc); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}

/* the agent's tool loop — a Claude-Code-style trace on a timeline rail */
.ph-steps { position: relative; display: flex; flex-direction: column; gap: 11px; padding: 1px 0; }
.ph-steps::before { content: ''; position: absolute; left: 7.25px; top: 9px; bottom: 9px; width: 1.5px; background: var(--line); z-index: 0; }
.ph-step { position: relative; z-index: 1; display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: center; }
.ph-step-ic {
  position: relative; width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: #f4f3eb;
  display: inline-flex; align-items: center; justify-content: center;
}
.ph-step.running .ph-step-ic { border-color: var(--acc); }
.ph-step.running .ph-step-ic::after {
  display: none;
}
.ph-step.done .ph-step-ic { border-color: var(--sig-dark); background: var(--sig-dark); }
.ph-step.done .ph-step-ic::after {
  content: ''; width: 3.5px; height: 7px; margin-top: -1px; border: solid #f3f7f0; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.ph-step-tx b { display: block; font-family: var(--grot); font-size: 12.5px; font-weight: 640; letter-spacing: -0.005em; line-height: 1.25; color: var(--ink); }

/* the synthesized answer — streamed word by word like a live model. the accent
   rail grows with the revealed content (--fill, set on scroll) so it never runs
   through the space reserved for not-yet-streamed blocks. */
.ph-answer { position: relative; display: flex; flex-direction: column; gap: 13px; padding-left: 12px; }
.ph-answer::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--fill, 0) * 100%); background: var(--acc); }
.ph-stream { font-family: var(--grot); font-size: 13.5px; line-height: 1.56; color: var(--ink-2); }
.ph-stream em { color: var(--ink); font-weight: 700; }
.ph-stream .wd { opacity: 0; transition: opacity 0.14s linear; }
.ph-stream .wd.on { opacity: 1; }
.ph-stream .ph-caret { display: inline-block; width: 2px; height: 0.95em; margin-left: 1px; vertical-align: -1px; background: var(--acc); }

/* the concrete forcing line + the grounding chips */
.ph-line { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-line span { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 0; padding: 5px 8px; }
.ph-line span.hot { background: var(--acc-tint); border-color: rgba(85,167,124,0.48); color: var(--acc); }
.ph-refline { display: flex; flex-direction: column; gap: 8px; }
.ph-refline-label { font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }

/* suggested follow-ups — the assistant offering next questions */
.ph-followups { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.ph-follow {
  font-family: var(--grot); font-size: 12.5px; font-weight: 520; letter-spacing: -0.004em; text-align: left;
  color: var(--acc-bright); background: #eef4ea; border: 1px solid rgba(85,167,124,0.3);
  padding: 8px 11px; border-radius: 0; cursor: default; max-width: 100%;
}
.ph-follow::before { content: '\21B3'; margin-right: 7px; color: var(--acc); font-family: var(--mono); font-size: 0.85em; }

/* ── The composer — the "you can chat with it" affordance ──────────────────── */
.ph-composer {
  flex: 0 0 auto; z-index: 3; display: grid; grid-template-columns: 30px 1fr 34px; align-items: center; gap: 9px;
  padding: 10px 14px 20px; border-top: 1px solid var(--line); background: #f4f3eb;
}
.ph-plus { position: relative; width: 30px; height: 30px; border: 1.5px solid var(--line-strong); }
.ph-plus::before, .ph-plus::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink-2); transform: translate(-50%, -50%); }
.ph-plus::before { width: 13px; height: 1.6px; }
.ph-plus::after { width: 1.6px; height: 13px; }
.ph-input { display: flex; align-items: center; height: 34px; padding: 0 12px; background: var(--panel); border: 1.5px solid var(--line-strong); overflow: hidden; }
.ph-input-ph { font-family: var(--grot); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ph-send { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--sig-dark); border: 1px solid var(--acc-bright); color: #f3f7f0; }
.ph-send svg { width: 18px; height: 18px; display: block; }

.ph-home { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 10; width: 134px; height: 5px; border-radius: 999px; background: rgba(16,20,15,0.28); }

/* ── No-WebGL fallback ────────────────────────────────────────────────────── */
/* The flythrough degrades to the annotated 2D board/pipeline (boardviz.js),
   shown as a fixed backdrop; the beat overlays still crossfade over it. */
.bv-host {
  position: fixed; inset: 0; z-index: 1; display: none;
  align-items: center; justify-content: center;
  /* dark-scene palette for the SVG rendered inside */
  --ink: #edefe0; --ink-2: rgba(213,217,197,0.78); --ink-3: rgba(163,168,147,0.62);
  --line: rgba(238,240,226,0.14);
}
.no-3d #scene-canvas { display: none; }
.no-3d .bv-host { display: flex; }

/* 2D board-viz styles (fallback only; lives inside the dark plate scope) */
.bv-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: scale(1.06); transform-origin: center; }
.bv-frame { fill: none; stroke: rgba(238,240,226,0.28); stroke-width: 1.4; }
.bv-sq-l { fill: var(--sq-light); }
.bv-sq-d { fill: var(--sq-dark); }
.bv-coord { fill: var(--ink-3); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; }
.bv-piece { font-size: 34px; fill: #23211a; font-family: Georgia, serif; }
.bv-piece.white { fill: #fdfcf4; stroke: #2a2820; stroke-width: 0.9; paint-order: stroke; }
.bv-hl { fill: #4f8a67; }
.bv-ring { fill: none; stroke: #3d7a58; stroke-width: 2; }
.bv-chip-bg { fill: rgba(19,24,19,0.92); stroke: var(--line); stroke-width: 1; }
.bv-chip-dot { fill: #7fb894; }
.bv-chip-text { fill: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; }
.bv-leader { fill: none; stroke: #7fb894; stroke-width: 1.1; opacity: 0.5; stroke-dasharray: 3 4; stroke-linecap: round; }
.bv-arrow { fill: none; stroke: #2f6a49; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.bv-arrow-head { fill: #2f6a49; opacity: 0.95; }
.bv-move-badge-bg { fill: #a5d9b8; }
.bv-move-badge-text { fill: #0e120f; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.bv-node-body { fill: rgba(19,24,19,0.96); stroke: #578f6d; stroke-width: 1.5; }
.bv-node-ring { fill: none; stroke: #7fb894; stroke-width: 1.2; }
.bv-node-title { fill: var(--ink); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; }
.bv-node-sub { fill: var(--ink-3); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; }
.bv-node-dot { fill: #7fb894; }
.bv-status { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; }
.bv-status.see { fill: #7fb894; }
.bv-status.ok { fill: #a5d9b8; }
.bv-pkt-bg { fill: #182019; stroke: #7fb894; stroke-width: 1.2; }
.bv-pkt-bar { fill: #7fb894; opacity: 0.9; }
.bv-stamp-bg { fill: rgba(127,184,148,0.16); stroke: #7fb894; stroke-width: 1.2; }
.bv-stamp-text { fill: #a5d9b8; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; }
.bv-say { fill: var(--ink); font-family: var(--grot); font-size: 16px; }
.bv-caret { fill: #7fb894; }

/* ════════════════════════════════════════════════════════════════════════════
   DECYPHERLY FRONT PAGE (decypherly.html) — the general idea, told lighter than
   the chess cinematic. A dark hero, then the paper brief. Reuses the same nav,
   title blocks, buttons, domains and footer; adds a hero, a plain-language
   architecture diagram (.flow), a text/text contrast, and the chess proof card.
   ════════════════════════════════════════════════════════════════════════════ */
.dcy section[id] { scroll-margin-top: var(--nav-h); }

/* shared bits */
.kicker {
  display: inline-block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sig);
}
.kicker.on-dark, .band-dark .kicker { color: var(--sig-bright); }
.lead.on-dark, .band-dark .lead { color: #b9bead; }
.band-dark h2 { color: #e9ecdd; }
.bigger-lead { margin-bottom: 26px; }
.two-up-r .btn { margin-top: 4px; }
.chapter.tight { padding-top: clamp(60px, 7vw, 96px); padding-bottom: clamp(60px, 7vw, 96px); }
.band-soft { background: var(--bg-2); }
.sheet-head.center { text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }
.sheet-head.center h2 { max-width: none; }
.sheet-head.center .lead { margin-left: auto; margin-right: auto; }

/* ── Hero (dark) ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100dvh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 7vh) var(--page-pad) clamp(64px, 9vh, 104px);
  background: radial-gradient(120% 120% at 78% 8%, #14201a 0%, var(--plate) 46%, #0a0d0a 100%);
  color: #f5f7ec; overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(143, 212, 174, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 212, 174, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 22%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 70% 22%, #000 0%, transparent 72%);
}
.hero-inner { position: relative; max-width: var(--measure); margin: 0 auto; width: 100%; }
.hero-eyebrow {
  display: inline-block; margin-bottom: 22px;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sig-bright);
}
.hero h1 {
  color: #f6f8ed; font-weight: 760; font-stretch: 108%;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 0.98; letter-spacing: -0.026em;
  max-width: 16ch;
}
.hero h1 em { color: var(--sig-bright); }
.hero-sub {
  margin-top: 26px; max-width: 54ch;
  font-size: clamp(1.08rem, 1.7vw, 1.35rem); line-height: 1.55; color: rgba(228, 232, 214, 0.86);
}
.hero-sub em { color: #eef2e4; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 4vw, 42px); }
.hero-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(34px, 6vh, 60px);
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(205, 210, 190, 0.55);
}
.hero-hint i { color: var(--sig-bright); font-style: normal; animation: hint-bob 1.8s var(--ease) infinite; }

/* product-wedge pages are punchier than the overview but still reveal the brief */
.product-wedge .hero {
  min-height: 78dvh;
  align-items: flex-end;
}
.product-wedge .hero h1 {
  max-width: 18ch;
  font-size: clamp(2.45rem, 5.4vw, 4.85rem);
}
.product-wedge .hero-sub {
  max-width: 58ch;
}
.product-wedge .hero-hint {
  margin-top: clamp(24px, 4vh, 42px);
}

/* buttons on the dark hero */
.btn.on-dark { border-color: rgba(238, 240, 226, 0.45); color: #f4f6ea; }
.btn.primary.on-dark { background: #f4f6ea; color: #0e120f; border-color: #f4f6ea; }
.btn.primary.on-dark:hover { background: var(--sig-dark); border-color: var(--sig-dark); color: #f4f6ea; }
.btn.ghost.on-dark:hover { border-color: var(--sig-bright); color: var(--sig-bright); }

/* ── Two-up layout (problem, founder, thesis) ─────────────────────────────── */
.two-up { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.two-up-l h2 { max-width: 12ch; }
.two-up-r .lead { margin-top: 0; }
.two-up-r .lead + .lead { margin-top: 14px; }
.foot-meta { margin-top: 14px; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

/* ── The method — plain-language pipeline (.flow) ─────────────────────────── */
.flow { position: relative; margin-top: clamp(20px, 4vw, 40px); }
.flow-rail { position: absolute; left: 12.5%; right: 12.5%; top: 33px; height: 2px; z-index: 0; }
.flow-rail svg { position: absolute; inset: -1px 0; width: 100%; height: 4px; overflow: visible; }
.fr-base { stroke: var(--rule-soft); stroke-width: 2; }
.fr-flow {
  stroke: var(--sig); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000;
}
.flow.in .fr-flow { transition: stroke-dashoffset 1.15s var(--ease) 0.15s; stroke-dashoffset: 0; }
.flow-pulse {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--sig-dark); opacity: 0;
  box-shadow: 0 0 0 4px rgba(27, 122, 75, 0.18), 0 0 14px 2px rgba(143, 212, 174, 0.7);
}
.flow.in .flow-pulse { animation: flow-run 3.4s var(--ease) 1.2s infinite; }
@keyframes flow-run {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.flow-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 34px); position: relative; z-index: 1; }
.stage { text-align: center; opacity: 0; transform: translateY(16px); }
.flow.in .stage { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); opacity: 1; transform: none; }
.flow.in .stage:nth-child(2) { transition-delay: 0.1s; }
.flow.in .stage:nth-child(3) { transition-delay: 0.2s; }
.flow.in .stage:nth-child(4) { transition-delay: 0.3s; }
.flow-node {
  position: relative; width: 66px; height: 66px; margin: 0 auto 18px;
  border: 1.5px solid var(--rule); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.flow-ix { position: absolute; top: -1.5px; left: -1.5px; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 5px 4px; }
.flow-ic { font-size: 1.5rem; line-height: 1; filter: grayscale(0.1); }
.flow-copy b { display: block; font-family: var(--grot); font-weight: 720; font-stretch: 106%; font-size: clamp(1.1rem, 1.5vw, 1.34rem); letter-spacing: -0.01em; color: var(--ink); }
.flow-copy p { margin-top: 9px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); max-width: 26ch; margin-left: auto; margin-right: auto; }

/* ── Contrast — text-about vs the-thing-itself ────────────────────────────── */
.big-statement {
  max-width: 22ch; margin-bottom: clamp(36px, 5vw, 56px);
  font-weight: 700; font-stretch: 106%;
  font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.022em; color: var(--ink);
}
.big-statement em { color: var(--sig); }
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contrast-card { border: 1.5px solid var(--rule); background: var(--white); padding: 22px 24px 26px; }
.contrast-card.is-us { background: #eef4ea; box-shadow: inset 5px 0 0 var(--sig-dark); }
.cc-tag { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.contrast-card.is-us .cc-tag { color: var(--sig); }
.contrast-card p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.contrast-card.is-us p { color: var(--ink); }

/* ── Proof — the chess link card ──────────────────────────────────────────── */
.proof-card {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; padding: clamp(30px, 4vw, 52px);
  border: 1.5px solid var(--rule); background: var(--white); text-decoration: none; color: inherit;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.proof-card:hover { border-color: var(--sig); box-shadow: 0 24px 60px -34px rgba(20, 30, 20, 0.5); transform: translateY(-3px); }
.proof-l h2 { max-width: 15ch; }
.proof-l .lead { max-width: 52ch; }
.proof-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sig);
}
.proof-go i { font-style: normal; transition: transform 0.25s var(--ease); }
.proof-card:hover .proof-go i { transform: translateX(5px); }
.proof-r { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.proof-r .gr-board { width: 100%; max-width: 300px; }
.proof-cap { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); text-align: center; }

/* domains / proof — condensed variants for the decypherly front page */
#domains.chapter.tight { padding-top: clamp(32px, 3.5vw, 48px); padding-bottom: clamp(32px, 3.5vw, 48px); }
#domains .sheet-head { margin-bottom: clamp(20px, 2.5vw, 32px); }
#domains .domain { padding: 12px 16px 14px; }
#domains .domain p { margin-top: 6px; font-size: 0.85rem; line-height: 1.45; }
#proof.chapter.tight { padding-top: clamp(32px, 3.5vw, 48px); padding-bottom: clamp(32px, 3.5vw, 48px); }
#proof .proof-card { padding: clamp(18px, 2.5vw, 28px); }
#proof .proof-r .gr-board { max-width: 320px; }
#proof .proof-go { margin-top: 14px; }

/* first section on the page — no hero above it anymore, so clear the fixed nav */
#problem { padding-top: calc(var(--nav-h) + clamp(60px, 7vw, 96px)); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-kv { max-width: 520px; }
}
@media (max-width: 940px) {
  .data4 { grid-template-columns: 1fr 1fr; }
  .data4 > div:nth-child(3) { border-left: none; }
  .data4 > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .runs .run-line { grid-template-columns: 44px 1fr minmax(110px, 170px) 92px; }
  .run > p { padding-left: calc(44px + clamp(14px, 2vw, 24px)); }
  /* front page */
  .two-up { grid-template-columns: 1fr; gap: 22px; }
  .two-up-l h2 { max-width: none; }
  .flow-track { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .flow-rail { display: none; }
  .stage { text-align: left; display: grid; grid-template-columns: 66px 1fr; gap: 16px; align-items: start; }
  .flow-node { margin: 0; }
  .flow-copy p { margin-left: 0; max-width: 40ch; }
  .proof-card { grid-template-columns: 1fr; }
  .proof-r { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
  .proof-r .gr-board { max-width: 220px; }
}
@media (max-width: 760px) {
  :root { --page-pad: 20px; }
  .nav-wrap .nav-links {
    grid-column: 1 / -1; justify-self: stretch;
  }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; width: auto; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(11, 15, 11, 0.97); border-bottom: 1.5px solid rgba(238, 240, 226, 0.16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: 6px var(--page-pad) 14px;
    transform: translateY(-10px); opacity: 0; pointer-events: none; transition: 0.2s;
  }
  .nav.on-light .nav-links { background: rgba(240, 240, 232, 0.97); border-bottom-color: var(--rule); }
  body.nav-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 0; font-size: 0.8rem; text-align: right; }
  .nav-toggle { display: flex; }
  .paths { grid-template-columns: 1fr; }
  .contrast { grid-template-columns: 1fr; }
  .domains { grid-template-columns: 1fr; }
  .domain + .domain { border-left: none; border-top: 1px solid #4a4f42; }
  .tblock, .foot-tblock { grid-template-columns: auto 1fr; }
  .tblock > .tb-side { display: none; } /* > span sets display:flex — must out-rank it */
  .data3 { grid-template-columns: 1fr 1fr; }
  .data3 > div:nth-child(3) { border-left: none; border-top: 1px solid var(--rule); grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  h2 { font-size: 1.6rem; }
  .flow-track { grid-template-columns: 1fr; gap: 20px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .beat { padding-left: 20px; padding-right: 20px; padding-bottom: clamp(40px, 7vh, 68px); }
  .beat-inner { max-width: none; }
  .beat h2 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  .beat-lead { font-size: clamp(1.62rem, 7.2vw, 2.1rem); }
  .beat-hook .beat-inner { max-width: min(360px, 90vw); }
  .beat-hook h1 { font-size: clamp(2.3rem, 9.5vw, 3.05rem); }
  .beat-body, .beat-sub { max-width: none; }
  .run-line { grid-template-columns: 40px 1fr auto; }
  .run-bar { display: none; }
  .run > p { padding-left: 0; margin-top: 12px; }
  .founder-kv > div { grid-template-columns: 76px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .beat-hint i, .hero-hint i { animation: none; }
  .flow.in .flow-pulse { animation: none; }
  .flow.in .fr-flow { transition: none; stroke-dashoffset: 0; }
}