/* XYNQ / ORIGIN · Direction 01 · Monochrome Precision
   Swiss-modernist, strictly black and white. 12-column grid, 1px rules,
   2px radii. Decision severity is carried by ink weight and shape:
   outline → hatched → grey → solid. No hue, no gradients, no glow. */

/* Self-hosted web fonts (tools/fonts/build-fonts.sh; OFL, see assets/fonts/OFL-*.txt). Variable, pinned to the
   weight ranges used and subset to latin: 75 KB for all three families. No request goes to Google. */
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-latin-wght-500-600.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-400-600.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin-wght-400-500.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

/* Fallback faces: size-adjust calibrated on the real hero text against the web fonts so the swap does not re-wrap text.
   Inter ascender .96875 / descender .2421875; JetBrains Mono 1.02 / .30. Overrides are divided by size-adjust. */
@font-face { font-family: "Inter Tight FB"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 400 500; size-adjust: 98.56%; ascent-override: 98.3%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight FB"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"); font-weight: 600 700; size-adjust: 93.45%; ascent-override: 103.7%; descent-override: 25.9%; line-gap-override: 0%; }
@font-face { font-family: "Inter FB"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 400 450; size-adjust: 105.8%; ascent-override: 91.6%; descent-override: 22.9%; line-gap-override: 0%; }
@font-face { font-family: "Inter FB"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 451 500; size-adjust: 108%; ascent-override: 89.7%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Inter FB"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"); font-weight: 600 700; size-adjust: 102%; ascent-override: 95%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono FB"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("DejaVu Sans Mono"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --black: #000;
  --white: #fff;
  --grey: #8c8c8c;            /* QUARANTINE fill; black text on it = 6.3:1 */

  --display: "Inter Tight", "Inter Tight FB", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Inter", "Inter FB", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono FB", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  --col-gap: clamp(12px, 2vw, 24px);
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 64px;
  --r: 2px;
  --ease-out: cubic-bezier(.2, 0, 0, 1);

  /* light scope by default */
  --bg: #fff;
  --fg: #000;
  --fg-2: #2b2b2b;
  --fg-3: #5e5e5e;            /* 6.4:1 on white */
  --rule: #000;
  --rule-2: #d4d4d4;
  --panel: #f4f4f4;
  --focus: #000;
}

.t-light { --bg: #fff; --fg: #000; --fg-2: #2b2b2b; --fg-3: #5e5e5e; --rule: #000; --rule-2: #d4d4d4; --panel: #f4f4f4; --focus: #000; }
.t-dark  { --bg: #000; --fg: #fff; --fg-2: #d6d6d6; --fg-3: #9e9e9e; --rule: #fff; --rule-2: #333; --panel: #0e0e0e; --focus: #fff; }
.t-light, .t-dark { background: var(--bg); color: var(--fg-2); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open { overflow: hidden; }
body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--fg-2); background: #fff;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; color: var(--fg); font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: clamp(32px, 4.4vw, 60px); text-wrap: balance; }
h2.h-sm { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.025em; line-height: 1.1; }
h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0; }
p, dd, strong, .lede { text-wrap: pretty; } /* no one-word last lines */
em { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
code, pre { font-family: var(--mono); }
b { font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
::selection { background: #000; color: #fff; }
.t-dark ::selection { background: #fff; color: #000; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: #000; color: #fff; padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; outline-color: #000; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px;
}
.lede { margin-top: 20px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--fg-3); max-width: 36em; }
.lede code, .rules code {
  font-size: .84em; padding: 1px 5px; border: 1px solid var(--rule-2); border-radius: var(--r); color: var(--fg); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r);
  font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--fg);
  transition: background-color .14s linear, color .14s linear;
}
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn-solid { position: relative; isolation: isolate; overflow: hidden; background: var(--fg); color: var(--bg); }
/* Ink wipe: a paper sheet in difference mode inverts exactly what it covers (fill, label, arrow),
   so the inversion edge travels with the wipe. Enters from the left, leaves to the right. */
.btn-solid::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #fff; mix-blend-mode: difference;
  transform: scaleX(0); transform-origin: right; transition: transform .22s var(--ease-out);
}
.btn-solid:hover::after { transform: none; transform-origin: left; }
.btn-solid:disabled::after { display: none; }
.btn-line { background: transparent; color: var(--fg); }
.btn-line:hover { background: var(--fg); color: var(--bg); }
.btn .arr { display: inline-block; font-family: var(--mono); transition: transform .18s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Decision glyphs + tags: the ink-weight scale ---------- */
.glyph {
  display: inline-block; flex-shrink: 0; width: 10px; height: 10px;
  border: 1.5px solid currentColor; background: transparent; vertical-align: -1px;
}
.glyph[data-d="REVIEW"] { background: repeating-linear-gradient(-45deg, currentColor 0 1.2px, transparent 1.2px 3px); }
.glyph[data-d="QUARANTINE"] { background: var(--grey); }
.glyph[data-d="REJECT"] { background: currentColor; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; line-height: 1;
  padding: 6px 9px 6px 7px; border-radius: var(--r); white-space: nowrap;
  color: var(--fg); background: transparent; border: 1px solid var(--fg);
}
.tag::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; flex-shrink: 0; box-sizing: border-box; }
.tag[data-d="REVIEW"]::before { background: repeating-linear-gradient(-45deg, currentColor 0 1.1px, transparent 1.1px 2.8px); }
.tag[data-d="QUARANTINE"] { background: var(--grey); border-color: var(--grey); color: #000; }
.tag[data-d="QUARANTINE"]::before { background: #000; border-color: #000; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tag[data-d="REJECT"] { background: var(--fg); color: var(--bg); }
.tag[data-d="REJECT"]::before { background: currentColor; }
.tag-lg { font-size: 15px; padding: 10px 14px 10px 12px; gap: 10px; }
.tag-lg::before { width: 12px; height: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  --bg: #fff; --fg: #000; --fg-2: #2b2b2b; --fg-3: #5e5e5e; --rule-2: #d4d4d4; --focus: #000;
  background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--rule-2);
  transition: none;
}
.site-header .btn, .site-header .nav-links a, .site-header .link-quiet { transition: none; }
.site-header.on-dark { --bg: #000; --fg: #fff; --fg-2: #d6d6d6; --fg-3: #9e9e9e; --rule-2: #333; --focus: #fff; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 26px; width: auto; }
.brand-paper, .site-header.on-dark .brand-ink { display: none; }
.site-header.on-dark .brand-paper { display: block; }
.nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links a, .link-quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px;
  color: var(--fg-3); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color .12s linear;
}
.nav-links a:hover, .link-quiet:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 6px; }
@media (hover: hover) and (min-width: 1121px) {
  .nav-links a, .link-quiet {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(50% + 12px) / 0 1px;
    background-origin: content-box; transition: color .12s linear, background-size .2s var(--ease-out);
  }
  .nav-links a:hover, .link-quiet:hover { text-decoration: none; background-size: 100% 1px; }
}
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-toggle { display: none; }

@media (max-width: 1120px) {
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r);
    background: transparent; border: 1px solid var(--fg); color: var(--fg); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .18s var(--ease-out);
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .nav-menu {
    position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--bg); border-bottom: 1px solid var(--fg);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .js .nav-menu:not(.is-open) { display: none; }
  .no-js .nav-toggle { display: none; }
  .no-js .site-header { position: relative; height: auto; }
  .no-js .header-inner { flex-wrap: wrap; row-gap: 0; padding-block: 10px 4px; }
  .no-js .nav { width: 100%; }
  .no-js .nav-menu { position: static; display: flex; flex-direction: column; align-items: stretch; padding: 0 0 8px; border: 0; max-height: none; background: transparent; }
  .no-js .nav-links { flex-direction: row; flex-wrap: wrap; column-gap: 20px; }
  .no-js .nav-links li { border: 0; }
  .no-js .nav-links a { min-height: 44px; font-size: 16px; }
  .no-js .nav-actions { padding-top: 4px; justify-content: flex-start; gap: 16px; }
  .no-js .hero { padding-top: 24px; }
  .nav-links { flex-direction: column; }
  .nav-links li { border-bottom: 1px solid var(--rule-2); }
  .nav-links a { display: flex; padding: 0; min-height: 52px; font-size: 18px; font-family: var(--display); color: var(--fg); letter-spacing: -.01em; }
  .nav-actions { justify-content: space-between; padding-top: 16px; }
  .link-quiet { padding-left: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(var(--header-h) + clamp(20px, 3vw, 36px)); padding-bottom: clamp(28px, 3vw, 40px);
}
/* Depth layer: registration marks on a 12-col rhythm. */
.hero-marks {
  position: absolute; inset: -80px 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 54v12M54 60h12' stroke='%23dcdcdc' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 120px; background-position: center top;
}
.hero-top { row-gap: 16px; }
.hero-head { grid-column: 1 / -1; }
.hero-head .kicker { color: var(--fg); }
.hero-title {
  font-size: clamp(42px, 5.8vw, 86px); font-weight: 600; line-height: .94; letter-spacing: -.045em;
  text-wrap: balance; max-width: 15.5em;
}
.hero-side {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; row-gap: 16px;
  position: relative; padding-top: 18px; margin-top: clamp(4px, 1vw, 12px);
}
.hero-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left; }
.hero-lede { grid-column: 1 / 8; grid-row: 1 / 3; font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.55; color: var(--fg-2); max-width: 36em; }
.hero-lede b { font-family: var(--mono); font-weight: 500; font-size: .82em; letter-spacing: .04em; color: var(--fg); }
.hero-side .cta-row { grid-column: 9 / 13; justify-content: flex-end; }

.fig { margin: clamp(20px, 2.4vw, 32px) 0 0; }
.fig-frame { position: relative; border: 1px solid var(--rule); height: clamp(300px, 25vw, 380px); background: #fff; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig-fallback { display: none; }
.no-js .hero-canvas { display: none; }
.no-js .fig-frame { height: auto; }
.no-js .fig-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; padding: 0; list-style: none; }
.no-js .fig-fallback li { padding: 16px; border-right: 1px solid var(--rule-2); font-size: 14px; }
.no-js .fig-fallback b { display: block; font-family: var(--mono); font-weight: 500; }
/* Phones: the drawing turns portrait (main.js uses the same 559px query), and the bar becomes one 45px row
   like the network's: a caption plus a fixed Pause. The key stays in the accessibility tree; the drawing
   labels every lane itself. Without JS the visible key stays (it fits one row with the toggle hidden). */
@media (max-width: 559px) {
  .js .hero-fig .fig-frame { height: 424px; }
  .hero-fig .fig-bar { align-items: stretch; min-height: 45px; gap: 0; }
  .js .hero-fig .fig-key { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .js .hero-fig .fig-cap { display: flex; align-items: center; margin: 0; padding: 8px 12px; min-width: 0; font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
  .no-js .hero-fig .fig-key { column-gap: 10px; letter-spacing: .02em; }
  .no-js .hero-fig .fig-key li { gap: 6px; }
}
/* Below 360px the four entries can't share a row at 12px: a deliberate 2×2 table, never a lone REJECT. */
@media (max-width: 359px) {
  .no-js .hero-fig .fig-key { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 16px; }
}

/* Legend and control bar: ruled onto the drawing's bottom edge like a title block. */
.fig-bar {
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
  border: 1px solid var(--rule); border-top: 0; min-height: 44px;
}
.fig-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; list-style: none; margin: 0; padding: 8px 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
}
.fig-key li { display: inline-flex; align-items: center; gap: 7px; }
.fig-cap { display: none; }
.fig-bar .viz-toggle { flex: none; border: 0; border-left: 1px solid var(--rule-2); border-radius: 0; }
.fig-bar .viz-toggle:hover { background: var(--fg); color: var(--bg); }

.viz-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.viz-toggle:hover { border-color: var(--fg); }
.viz-toggle[hidden], .no-js .viz-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .viz-toggle { display: none; } }
.vt-pause { flex: none; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
.is-paused .vt-pause { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }

.spec-row {
  list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
}
.spec-row li { padding: 10px 12px 0 0; }
.spec-row li + li { padding-left: 12px; border-left: 1px solid var(--rule-2); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-y); }
.sec-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  border-top: 1px solid var(--rule); padding-top: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec-num {
  grid-column: 1 / 4; font-family: var(--display); font-weight: 600; color: var(--fg);
  font-size: clamp(64px, 10vw, 160px); line-height: .78; letter-spacing: -.065em;
  font-variant-numeric: tabular-nums; margin-left: -.04em;
}
.sec-title { grid-column: 5 / 13; }
.sec-title .kicker { color: var(--fg); }
.sec-num-sm { font-size: clamp(56px, 6vw, 96px); margin-bottom: 20px; }

/* Consecutive paper sections read as one document: the ruled head is the divider. */
.section.t-light + .section.t-light { padding-top: 0; }

/* ---------- 01 How it works: four beats, then the Evidence Pack ---------- */
.beats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); }
.beat { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--rule); }
/* The rail: each beat's rule ends in an arrowhead pointing at the next beat. */
.beat:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--col-gap) * -1 + 2px); top: -4px; border-left: 7px solid var(--fg); border-block: 3.5px solid transparent; }
.beat-n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.beat h3 { margin-top: 18px; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; }
.beat p { margin-top: 8px; font-size: 15px; color: var(--fg-3); max-width: 34ch; }
.beat-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 500; }
.beat-link .arr { font-family: var(--mono); text-decoration: none; transition: transform .18s var(--ease-out); }
.beat-link:hover .arr { transform: translateX(3px); }


/* ---------- 03 Policy ---------- */
.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rules li { position: relative; counter-increment: r; padding: 18px 0 18px 48px; border-top: 1px solid var(--rule-2); color: var(--fg-3); }
.rules li:first-child { border-top-color: var(--rule); }
.rules li::before {
  content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 20px;
  font-family: var(--mono); font-size: 12px; color: var(--fg);
}
.rules strong { display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.policy-layout { align-items: start; }
.policy-aside { grid-column: 1 / 6; }
.sim { grid-column: 7 / 13; border: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 28px); }
.sim-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); }
.sim-head h3 { font-size: 22px; }
.sim-tag { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.sim-field { margin-top: 22px; }
.sim-mode { border: 0; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; min-width: 0; }
.sim-mode-legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.seg { flex: 1 1 50%; min-width: 0; position: relative; display: flex; align-items: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--fg); font-size: 13.5px; line-height: 1.3; color: var(--fg); cursor: pointer; }
.seg + .seg { border-left: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg:has(input:checked) { background: var(--fg); color: var(--bg); }
.seg:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.sim[data-mode="iuc"] [data-key="score"], .sim[data-mode="score"] [data-key="iuc"] { display: none; }
.sim-strip { position: relative; container-type: inline-size; }
.sim-needle { position: absolute; left: -1px; top: -7px; width: 2px; height: 26px; background: var(--fg); box-shadow: 0 0 0 2px var(--bg); transform: translateX(calc(var(--risk, 32) * 1cqi)); transition: transform .12s linear; }
.sim-key-note { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--fg-3); }
.sim-result .tag-lg { view-transition-name: sim-decision; }
::view-transition { pointer-events: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(sim-decision) { animation-duration: 180ms; animation-timing-function: linear; }
::view-transition-old(sim-decision) { animation: none; }
:root[data-sim-dir="up"]::view-transition-new(sim-decision) { animation: ink-in 180ms linear both; }
:root[data-sim-dir="down"]::view-transition-new(sim-decision) { animation: ink-in-rev 180ms linear both; }
@keyframes ink-in { from { clip-path: inset(0 100% 0 0); } }
@keyframes ink-in-rev { from { clip-path: inset(0 0 0 100%); } }
.sim-label-row { display: flex; justify-content: space-between; align-items: baseline; color: var(--fg); font-weight: 500; font-size: 15px; }
.sim-field output { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.sim input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 4px 0 0; background: transparent; cursor: pointer; }
.sim input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--fg); }
.sim input[type="range"]::-moz-range-track { height: 1px; background: var(--fg); }
.sim input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 28px; margin-top: -14px; background: var(--fg); border: 0; border-radius: 0; }
.sim input[type="range"]::-moz-range-thumb { width: 18px; height: 28px; background: var(--fg); border: 0; border-radius: 0; }
.sim input[type="range"]:focus-visible { outline-offset: 0; }

.sim-bands { display: flex; height: 12px; gap: 2px; }
.sim-bands span { flex: 0 0 calc(var(--w) - 2px); border: 1px solid var(--fg); }
.sim-bands [data-d="REVIEW"] { background: repeating-linear-gradient(-45deg, var(--fg) 0 1px, transparent 1px 4px); }
.sim-bands [data-d="QUARANTINE"] { background: var(--grey); border-color: var(--grey); }
.sim-bands [data-d="REJECT"] { background: var(--fg); }
.sim-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.sim-key li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sim-key .glyph { color: var(--fg); }
.sim-key b { color: var(--fg); font-weight: 500; }

.sim-toggles { border: 0; margin: 18px 0 0; padding: 0; display: grid; }
.switch { display: flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--fg-2); border-top: 1px solid var(--rule-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; flex-shrink: 0; width: 36px; height: 20px; border: 1px solid var(--fg-3); border-radius: var(--r); transition: background-color .12s linear, border-color .12s linear; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--fg-3); transition: transform .16s var(--ease-out), background-color .12s linear; }
.switch input:checked + .switch-ui { background: var(--fg); border-color: var(--fg); }
.switch input:checked + .switch-ui::after { transform: translateX(16px); background: var(--bg); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--focus); outline-offset: 3px; }
.sim-result { margin-top: 12px; padding: 16px; border: 1px solid var(--rule-2); min-height: 124px; }
.sim-trace { list-style: none; margin: 14px 0 0; padding: 0; font-family: var(--mono); font-size: 12px; color: var(--fg-3); display: grid; gap: 4px; }
.sim-trace li { overflow-wrap: anywhere; }
.sim-trace b { color: var(--fg); font-weight: 500; }
.sim-note { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--fg-3); }

/* ---------- 02 · Step 06 opens into the Evidence Pack ---------- */
h3.h-md { font-size: clamp(28px, 3vw, 44px); letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.evidence { margin-top: clamp(56px, 7vw, 104px); align-items: start; row-gap: 32px; }
.evidence-copy { grid-column: 1 / 7; border-top: 1px solid var(--rule); padding-top: clamp(16px, 2vw, 24px); }
.evidence-copy .kicker { color: var(--fg); }
.evidence-copy .lede { max-width: 30em; }
.photo.photo-emboss { margin-top: clamp(24px, 3vw, 40px); } /* beats .photo { margin: 0 } below */
.photo-emboss .photo-frame { aspect-ratio: 16 / 9; }
.photo-emboss img { transform: scale(1.3); transform-origin: 66% 36%; }
/* Side by side (961px+): the plate fills the copy column down to the record's bottom edge, so the two
   columns end on one line at every width instead of a fixed 16:9 that only matched by chance. */
@media (min-width: 961px) {
  .evidence { align-items: stretch; }
  .evidence-copy { display: flex; flex-direction: column; }
  .photo.photo-emboss { flex: 1 1 0; display: flex; flex-direction: column; min-height: 200px; }
  .photo-emboss .photo-frame { flex: 1 1 0; aspect-ratio: auto; min-height: 0; }
  /* the image must not size the row: it only fills whatever height the record sets */
  .photo-emboss .photo-frame picture { position: absolute; inset: 0; }
}
.record { grid-column: 7 / 13; border: 1px solid var(--rule); display: flex; flex-direction: column; }
.record-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--fg); color: var(--bg); }
.record-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.status::before { content: "✓"; display: grid; place-items: center; width: 14px; height: 14px; background: var(--bg); color: var(--fg); font-size: 10px; }
.record-rows { margin: 0; padding: 0 16px; }
.record-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); min-height: 48px; }
.record-rows dt { font-size: 14px; color: var(--fg-3); }
.record-rows dd { margin: 0; color: var(--fg); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 13px; }
.record-checks { list-style: none; margin: 0; padding: 16px; display: grid; gap: 10px; font-size: 14px; color: var(--fg); }
.record-checks li { display: flex; align-items: center; gap: 10px; }
.record-checks li::before { content: "✓"; flex-shrink: 0; width: 16px; height: 16px; display: grid; place-items: center; font-size: 10px; color: var(--bg); background: var(--fg); }
.record-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.fmt { color: var(--fg); padding: 4px 8px; border: 1px solid var(--fg); border-radius: var(--r); }



/* ---------- Photographs: hard crops, hairline frames, mono captions ---------- */
.photo { margin: 0; }
.photo-frame { position: relative; overflow: hidden; border: 1px solid var(--rule); background: #1a1a1a; }
.photo-frame picture { display: block; width: 100%; height: 100%; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-junction { margin-top: clamp(32px, 4vw, 48px); }
.photo-junction .photo-frame { aspect-ratio: 16 / 9; }
.photo-junction img { object-position: 50% 48%; }
/* Phones: the two decorative plates become thin strips (owner, 29 Sep): same images, about 80px shorter each. */
@media (max-width: 640px) {
  .photo-emboss .photo-frame { aspect-ratio: 3 / 1; }
  .photo-emboss img { transform: none; object-position: 62% 38%; }
  .photo-junction .photo-frame { aspect-ratio: 12 / 5; } /* the fader caps span ~60% of the plate height */
  .photo-junction img { object-position: 50% 41%; }
}

.band { margin: 0; }
.band-frame { position: relative; overflow: clip; height: clamp(170px, 21vw, 340px); border-bottom: 1px solid var(--rule-2); }
.band-pic { position: absolute; inset: -14% 0; display: block; }
.band-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.band + .section { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- 05 Network ---------- */
.network-section { overflow: clip; isolation: isolate; }
.marks {
  position: absolute; inset: -120px 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 54v12M54 60h12' stroke='%23262626' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 120px; background-position: center top;
}
.lede-strong { color: var(--fg); font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.015em; }

/* Privacy stack: five layers, ruled in order; the marker's ink rises layer by layer. */
/* Network stage: live three.js canvas over the poster, full content width. The frame's ratio is reserved in CSS
   (16:9; 4:5 on phones in every mode), so switching modes never shifts layout.
   Poster and video are never cropped (their captions are baked in at the edges). */
.net-stage { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--rule); background: #000; overflow: clip; }
.net-poster, .net-poster img, .net-video, .net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.net-poster img, .net-video { object-fit: contain; }
.net-video { opacity: 0; }
.net-video.is-live { opacity: 1; }
.no-js .net-video { display: none; }
.net-canvas { display: block; z-index: 1; }
.net[data-mode="live"] .net-poster, .net[data-mode="live"] .net-video { visibility: hidden; }
.net .fig-bar { align-items: center; min-height: 45px; } /* the Pause toggle appearing never grows it */
.net-k { padding: 8px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }

/* The HUD: HTML over the canvas (crisp at any size). Colours are the source scene's greys on black. */
.net-hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto;
  padding: clamp(16px, 3.2%, 44px) clamp(16px, 3.6%, 52px);
  font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a;
}
.net-hud[hidden] { display: none; }
.nh-title { grid-area: 1 / 1; }
.nh-title b { color: #fff; font-weight: 500; }
.nh-caption {
  grid-area: 2 / 1; margin-top: 14px; max-width: 24em;
  font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.02em; text-transform: none; color: #fff;
  transition: opacity .3s linear;
}
.nh-caption.is-off { opacity: 0; }
.nh-readout { grid-area: 1 / 2 / 3 / 3; margin: 0; line-height: 1.9; }
.nh-readout div { display: flex; justify-content: flex-end; gap: .8em; }
.nh-readout dd { margin: 0; min-width: 2ch; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
/* The stage bar is the one interactive part of the HUD: 44px buttons that seek the timeline. */
.nh-steps { grid-area: 4 / 1 / 5 / 3; display: flex; flex-wrap: nowrap; gap: 4px 12px; margin: 0 0 -10px -10px; padding: 0; list-style: none; min-width: 0; }
.nh-steps button {
  display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 10px; margin: 0;
  border: 0; border-radius: var(--r); background: none; color: inherit; cursor: pointer; pointer-events: auto;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  transition: color .12s linear;
}
.nh-steps button:hover { color: #fff; }
.nh-steps button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.nh-steps i { width: 10px; height: 10px; border: 1px solid currentColor; flex-shrink: 0; }
.nh-steps .on { color: #fff; }
.nh-steps .on i { background: #fff; }
.nh-steps .done i { background: #8a8a8a; }
.nh-l { margin-left: .4em; }
/* Live mode takes horizontal drags (orbit) but never vertical ones: the page always scrolls. */
.net[data-mode="live"] .net-stage { touch-action: pan-y; }
@media (pointer: fine) { .net[data-mode="live"] .net-canvas { cursor: grab; } }
/* Inspect tooltip: the HUD's type (mono label, one plain line), clamped inside the frame by network.js. */
.nh-tip {
  position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 4px; max-width: min(300px, calc(100% - 16px));
  padding: 10px 12px; background: rgba(0, 0, 0, .88); border: 1px solid #5e5e5e; pointer-events: none; will-change: transform;
}
.nh-tip[hidden] { display: none; }
.nh-tip b { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.nh-tip span { font: 400 14px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: #d6d6d6; }
/* The one-time hint shares the caption's cell under the stage, so it never moves anything. */
.net-k { display: grid; min-width: 0; flex: 1 1 auto; }
.nk-label, .nk-hint { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s linear; }
/* Both hint strings are in the HTML; the pointer type picks one, so the cell is sized at first paint. */
.nk-hint-fine { display: none; }
@media (pointer: fine) { .nk-hint-fine { display: inline; } .nk-hint-touch { display: none; } }
.nk-hint { opacity: 0; color: var(--fg-2); }
.net.show-hint .nk-hint { opacity: 1; }
.net.show-hint .nk-label { opacity: 0; }
/* Hint and label share one cell: fade one out, then the other in, so they never overlap mid-fade. */
.nk-label, .nk-hint { transition-duration: .2s; }
.net.show-hint .nk-hint, .net:not(.show-hint) .nk-label { transition-delay: .2s; }
.nh-labels { position: absolute; inset: 0; }
.nh-label {
  position: absolute; left: 0; top: -.7em; white-space: nowrap; will-change: transform;
  font-size: 12px; letter-spacing: .1em; color: #bdbdbd; text-shadow: 0 0 6px #000, 0 0 2px #000;
}
.nh-label.is-on, .nh-entity { color: #fff; }
/* Phones: a taller 4:5 frame in every mode, so the ring reads at 390px. The live camera reframes for it
   (network.js); the video and poster have their own 4:5 renders (tools/network3d/capture-portrait.mjs). */
@media (max-width: 640px) {
  .net-stage { aspect-ratio: 4 / 5; }
}
/* Up to 960px the HUD is a single column: caption on top, a 2x2 readout and compact steps below
   (between 641 and 960 the stage is still 16:9, but too narrow for the desktop HUD's corners). */
@media (max-width: 960px) {
  .net-hud { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; padding: 16px; }
  .nh-title { display: none; }
  .nh-caption { grid-area: 1 / 1; margin: 0; font-size: 20px; min-height: 2.24em; }
  .nh-readout { grid-area: 3 / 1; display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: 20px; line-height: 1.7; letter-spacing: .08em; }
  .nh-readout div { justify-content: flex-start; gap: .6em; }
  /* Five fixed 44px squares; the active stage's name sits in one fixed slot after them, so changing stage
     never moves anything (CLS 0 over the loop). */
  .nh-steps { grid-area: 4 / 1; position: relative; margin-top: 2px; gap: 0; letter-spacing: .08em; }
  .nh-steps li { flex: 0 0 44px; }
  .nh-steps button { width: 44px; padding: 0; justify-content: center; }
  .nh-steps .nh-n, .nh-steps .nh-l { display: none; }
  .nh-steps button.on .nh-l { display: block; position: absolute; top: 0; left: calc(5 * 44px + 8px); margin: 0; line-height: 44px; white-space: nowrap; }
  .nh-tip span { font-size: 14px; }
}

.privacy { margin-top: clamp(48px, 6vw, 80px); }
.privacy-k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); padding-bottom: 12px; }
.privacy-layers { list-style: none; margin: 0; padding: 0; }
.layer-row { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; row-gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule-2); }
/* Wide: each layer reads as one ruled table row: layer · promise · techniques. */
@media (min-width: 961px) {
  .layer-row { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: baseline; }
  .layer-id { grid-row: auto; }
}
.layer-row:first-child { border-top-color: var(--rule); }
.layer-id { grid-row: span 2; display: flex; align-items: center; gap: 8px; align-self: start; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); padding-top: 3px; white-space: nowrap; }
.layer-row strong { color: var(--fg); font-weight: 600; font-size: 16px; line-height: 1.4; }
.layer-text { font-size: 15px; line-height: 1.55; color: var(--fg-3); }
.lw { flex-shrink: 0; width: 10px; height: 10px; border: 1.5px solid var(--fg); }
.layer-row:nth-child(2) .lw { background: repeating-linear-gradient(-45deg, var(--fg) 0 1px, transparent 1px 3.5px); }
.layer-row:nth-child(3) .lw { background: repeating-linear-gradient(-45deg, var(--fg) 0 1.4px, transparent 1.4px 2.4px); }
.layer-row:nth-child(4) .lw { background: var(--grey); border-color: var(--grey); }
.layer-row:nth-child(5) .lw { background: var(--fg); }
.privacy-layers { border-bottom: 1px solid var(--rule-2); } /* closes the stack now the tagline line is gone */

.network-points { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.network-points > div { padding-top: 16px; border-top: 1px solid var(--rule); }
.network-points dt { color: var(--fg); font-weight: 600; }
.network-points dd { margin: 6px 0 0; font-size: 15px; color: var(--fg-3); max-width: 40ch; }
.status-tag { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px dashed var(--fg-3); border-radius: var(--r); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }

/* ---------- 06 Why ---------- */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(32px, 4vw, 48px); counter-reset: w; }
.why { counter-increment: w; border-top: 1px solid var(--rule); padding-top: 14px; }
.why-k { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.why-k::after { content: "03." counter(w); color: var(--fg); }
.why h3 { margin-top: 20px; font-size: clamp(20px, 1.8vw, 24px); }
.why p { margin-top: 8px; color: var(--fg-3); font-size: 15px; max-width: 42ch; }
.why p a { color: var(--fg); }

/* ---------- 06 Team · Recognition ---------- */
.recognition { margin-top: clamp(56px, 7vw, 104px); }
.sub-head { border-top: 1px solid var(--rule); padding-top: 16px; margin-bottom: clamp(28px, 3vw, 40px); }
.sub-head h3 { max-width: 22em; }
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.plate { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Wide: the three plates share row tracks, so kickers, titles, descriptions and links sit on common baselines. */
@media (min-width: 961px) {
  .plates { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .plate { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; justify-items: start; align-items: start; }
  .plate a { align-self: end; }
}
.plate-mark { position: relative; align-self: stretch; display: grid; place-items: center; height: clamp(104px, 9vw, 128px); margin-bottom: 12px; }
.plate-mark img { filter: grayscale(1) contrast(1.1); }
.plate-mark .logo-deep { filter: grayscale(1) contrast(1.4) brightness(.82); }
.plate-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plate-frame rect {
  x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px);
  fill: none; stroke: var(--fg); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0;
}
.plate-mark { justify-self: stretch; }
.plate-sel .plate-mark { border: 1px dashed var(--fg-3); }
.plate strong { color: var(--fg); font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -.015em; line-height: 1.25; }
.plate p { color: var(--fg-3); font-size: 15px; max-width: 34ch; }
.plate a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; font-size: 14px; font-weight: 500; }
.plate a .arr { font-family: var(--mono); text-decoration: none; transition: transform .18s var(--ease-out); }
.plate a:hover .arr { transform: translateX(3px); }
.proof-k { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.proof-table { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.proof-table li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 6px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.proof-table .proof-k { grid-column: 1 / 5; }
.proof-names { grid-column: 5 / 13; color: var(--fg-2); }
.partner-mark { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; color: var(--fg); text-decoration-color: var(--rule-2); }
.partner-mark img { height: 22px; width: auto; filter: grayscale(1); }

/* ---------- 09 Team ---------- */
/* Founders: a clean three-up at desktop (portrait over text); stacked rows below 961px. */
.founders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.person { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-content: start; padding: 24px 0 8px; border-top: 1px solid var(--rule); }
.person .portrait { width: clamp(120px, 11vw, 160px); }
.portrait { aspect-ratio: 1; border: 1px solid var(--rule); background: var(--panel); overflow: clip; }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.person-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* Founders: name above its logo row, so the three rows of logos line up. */
.founders .person-id { flex-direction: column; align-items: flex-start; }
.person-name { position: relative; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.02em; }
.person-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out); }
@media (hover: hover) { .person:hover .person-name::after, .advisor:hover .person-name::after { transform: none; } }
.orgs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.orgs img { filter: grayscale(1) contrast(1.1); }
.orgs .logo-true { filter: none; }   /* official black mark: already ink */
.orgs .logo-cs { transform: translateY(-20%); }   /* the sail rises above the wordmark: lift to its visual centre */
.person-role { margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.person-bio { margin-top: 8px; font-size: 15px; color: var(--fg-3); max-width: 48ch; }
.advisors { margin-top: clamp(48px, 6vw, 88px); row-gap: 16px; align-items: start; }
.advisors-head { grid-column: 1 / 5; border-top: 1px solid var(--rule); padding-top: 16px; }
.advisor-list { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.advisor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.advisor .person-name { font-size: 17px; letter-spacing: -.01em; }
.advisor p { font-size: 15px; color: var(--fg-3); }

/* ---------- 10 FAQ ---------- */
.faq-layout { align-items: start; row-gap: 24px; }
.faq-head { grid-column: 1 / 5; border-top: 1px solid var(--rule); padding-top: 16px; }
.faq-list { grid-column: 5 / 13; border-top: 1px solid var(--rule); }
.faq { border-bottom: 1px solid var(--rule-2); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; min-height: 44px;
  padding: 22px 48px 22px 0; font-family: var(--display); font-weight: 600; color: var(--fg); font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* The +/- open-state marker: the single disclosure glyph on the site (FAQ answers and the phone folds). */
.faq summary::before, .faq summary::after, .fold-sum::before, .fold-sum::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--fg); }
.faq summary::after, .fold-sum::after { transform: rotate(90deg); transition: transform .18s var(--ease-out); }
.faq[open] summary::after, .fold[open] > .fold-sum::after { transform: rotate(0); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq p { padding: 0 48px 24px 0; color: var(--fg-3); max-width: 68ch; }

/* ---------- CTA ---------- */
.cta-section { position: relative; overflow: clip; isolation: isolate; padding-block: clamp(80px, 10vw, 144px); }
.cta-logo { height: 42px; width: auto; margin-bottom: 28px; }
.cta-inner { align-items: start; row-gap: 36px; border-top: 1px solid var(--rule); padding-top: 20px; }
.cta-copy { grid-column: 1 / 7; }
.cta-copy h2 { font-size: clamp(40px, 6vw, 92px); line-height: .95; letter-spacing: -.045em; }
.cta-sub { margin-top: 24px; font-size: 17px; color: var(--fg-2); max-width: 30em; }

/* Register interest: a compact form, ruled like the rest of the page. */
.ri-form { grid-column: 8 / 13; display: grid; gap: 20px; }
.ri-field { display: grid; gap: 8px; }
.ri-field label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.ri-opt { color: var(--fg-3); }
.ri-field input, .ri-field textarea {
  width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; border: 1px solid var(--fg-3); border-radius: var(--r);
  background: var(--bg); color: var(--fg); font: 16px/1.5 var(--sans);
}
.ri-field textarea { min-height: 104px; resize: vertical; }
.ri-field input:hover, .ri-field textarea:hover { border-color: var(--fg); }
.ri-field input:focus-visible, .ri-field textarea:focus-visible { border-color: var(--fg); outline: 2px solid var(--focus); outline-offset: 2px; }
.ri-field input:user-invalid { border-style: dashed; border-color: var(--fg); }
.ri-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ri-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ri-how { font-size: 14px; color: var(--fg-3); }
.ri-how[hidden] { display: none; }
/* With JS and an endpoint the form posts itself; the mailto note only describes the no-JS path. CSS, not JS, so nothing shifts. */
.js .ri-form:not([data-endpoint=""]) .ri-how { display: none; }
.ri-status { font-size: 16px; color: var(--fg); padding-left: 14px; border-left: 2px solid var(--fg); }
.ri-status:empty { display: none; }
.ri-status:focus { outline: none; }
.ri-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ri-form[aria-busy="true"] .btn { opacity: .6; }
.ri-privacy { padding-top: 16px; border-top: 1px solid var(--rule-2); font-size: 14px; color: var(--fg-3); }
.ri-privacy a { color: var(--fg); white-space: nowrap; }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 16px; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 56px 28px; font-size: 14px; border-top: 1px solid var(--rule-2); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; }
.footer-brand { grid-column: 1 / 6; }
.footer-col:nth-of-type(1) { grid-column: 7 / 10; }
.footer-col:nth-of-type(2) { grid-column: 10 / 13; }
.footer-brand img { height: 24px; width: auto; }
.footer-brand p { margin-top: 16px; max-width: 42ch; color: var(--fg-3); }
.footer-brand strong { color: var(--fg); }
.footer-motto { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg) !important; }
.footer-col h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); }
.footer-col ul { list-style: none; margin: 6px 0 0; padding: 0; }
.footer-col a { display: flex; align-items: center; min-height: 44px; color: var(--fg-3); text-decoration: none; }
.footer-col a:hover { color: var(--fg); text-decoration: underline; }
.footer-legal { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 40px; padding-top: 14px; font-size: 13px; color: var(--fg-3); }
/* The legal hairline starts and ends at the content edge, like every other rule (not the container's padding). */
.footer-legal::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule-2); }
.footer-legal a { color: var(--fg-3); display: inline-block; padding-block: 12px; }
.footer-legal a:hover { color: var(--fg); }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advisor { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .hero-lede { grid-column: 1 / -1; grid-row: auto; }
  .hero-side .cta-row { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
  .spec-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-row li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .spec-row li { padding-bottom: 10px; }
  .spec-row li:nth-child(n+4) { border-top: 1px solid var(--rule-2); }
  .sec-num { grid-column: 1 / -1; margin-bottom: 20px; }
  .sec-title { grid-column: 1 / -1; }
  .policy-aside, .sim, .evidence-copy, .record,
  .advisors-head, .advisor-list, .faq-head, .faq-list,
  .cta-copy, .ri-form { grid-column: 1 / -1; }
  .sim { margin-top: 16px; }
  .plates, .founders { grid-template-columns: minmax(0, 1fr); }
  .person { grid-template-columns: clamp(96px, 16vw, 128px) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 28px); padding: 28px 0 32px; border-top-color: var(--rule-2); }
  .founders .person:first-child { border-top-color: var(--rule); }
  .person .portrait { width: auto; }
  .network-points { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .proof-table .proof-k, .proof-names { grid-column: 1 / -1; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:nth-of-type(1) { grid-column: 1 / 7; }
  .footer-col:nth-of-type(2) { grid-column: 7 / 13; }
  .hero-marks { display: none; }
  .band-pic { inset: 0; }
}
@media (max-width: 640px) {
  .hero-title { letter-spacing: -.04em; line-height: .98; }
  .person { grid-template-columns: 84px minmax(0, 1fr); padding: 24px 0 28px; }
  .cta-row .btn, .ri-actions .btn { flex: 1 1 100%; }
  .fig-frame { height: 320px; }
  .fig-key { column-gap: 12px; padding-inline: 10px; }
  .spec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-row li:nth-child(n) { border-left: 1px solid var(--rule-2); padding-left: 12px; border-top: 0; }
  .spec-row li:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .spec-row li:nth-child(n+3) { border-top: 1px solid var(--rule-2); }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .layer-row { grid-template-columns: minmax(0, 1fr); }
  .layer-id { grid-row: auto; padding-top: 0; }
  .beats { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .beat::after { display: none; }
  .sim-key { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 20px; }
  .record-checks { grid-template-columns: 1fr; }
  .faq p { padding-right: 0; }
  .footer-col:nth-of-type(n) { grid-column: 1 / -1; }
  .seg { flex-basis: 100%; }
  .nk-stages { display: none; }
  /* Phones: body copy at 16px (the desktop 15px secondary text reads small on a phone). */
  .beat p, .why p, .person-bio, .plate p, .network-points dd, .advisor p, .record-rows dt, .record-checks, .cta-sub { font-size: 16px; }
  .seg + .seg { border-left: 1px solid var(--fg); border-top: 0; }
}

.nav-links a[aria-current="page"] { color: var(--fg); }

/* ---------- FAQ, policy and privacy pages: same tokens, grid and rules; only what they need ---------- */
.page-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.page-hero + .section { padding-top: clamp(64px, 8vw, 112px); }


/* Privacy notice: ruled rows, label left, text right. */
.notice { border-top: 1px solid var(--rule); }
.notice-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
.notice-k { grid-column: 1 / 5; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; color: var(--fg); }
.notice-body { grid-column: 5 / 12; color: var(--fg-2); max-width: 64ch; }
.notice-body strong { color: var(--fg); font-weight: 600; }
.notice-date { margin-top: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--fg-3); }

@media (max-width: 960px) {
  .notice-k, .notice-body { grid-column: 1 / -1; }
}

/* Stagger and width tokens as classes (the CSP allows no style="" attributes). */
.i-0 { --i: 0; } .i-1 { --i: 1; } .i-2 { --i: 2; } .i-3 { --i: 3; } .i-4 { --i: 4; }
.rd-80 { --rd: 80ms; }
.w-10 { --w: 10%; } .w-20 { --w: 20%; } .w-30 { --w: 30%; } .w-40 { --w: 40%; } .w-90 { --w: 90%; }

/* ---------- Motion: ink and measurement ----------
   Every hidden start state below is scoped to html.motion (set by main.js only when motion is allowed)
   or html.intro (set by the inline hero script), and applies to decorative marks only: rules, numerals,
   frames, check boxes, beat rules and portraits. Text is never hidden. */

/* Hero: lines rise inside clip boxes (inline script), then the rule under them is drawn. */
.hl-ln { display: block; white-space: nowrap; clip-path: inset(-.2em -.1em -.24em -.1em); }
.hl-in { display: block; }
@keyframes rule-draw { from { transform: scaleX(0); } }
.intro-hold .hero-side::before { transform: scaleX(0); }
.intro .hero-side::before { animation: rule-draw .44s linear .12s backwards; }

/* Section heads: the hairline is ruled from the left, then the numeral inks in behind it. */
.motion .draw { position: relative; border-top-color: transparent; }
.motion .draw::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule);
  transform-origin: left; transition: transform .5s var(--ease-out) var(--rd, 0ms);
}
.motion .draw:not(.in)::before { transform: scaleX(0); }
.motion .draw .sec-num { clip-path: inset(-25% -10% -25% -10%); transition: clip-path .45s var(--ease-out) calc(var(--rd, 0ms) + .12s); }
.motion .draw:not(.in) .sec-num { clip-path: inset(-25% 100% -25% -10%); }

/* Evidence Pack: each check inks in, one after another. */
.record-checks li:nth-child(2) { --i: 1; }
.record-checks li:nth-child(3) { --i: 2; }
.record-checks li:nth-child(4) { --i: 3; }
.record-checks li:nth-child(5) { --i: 4; }
.motion .record-checks li::before { clip-path: inset(0); transition: clip-path .16s linear calc(var(--i, 0) * 90ms); }
.motion .record-verify:not(.in) .record-checks li::before { clip-path: inset(0 100% 0 0); }

/* How: the rail is ruled beat by beat, left to right (text never hidden). */
.motion .beats .beat { border-top-color: transparent; }
.motion .beats .beat::before {
  content: ""; position: absolute; left: 0; right: calc(var(--col-gap) * -1); top: -1px; height: 1px; background: var(--rule);
  transform-origin: left; transition: transform .3s linear calc(var(--i, 0) * 110ms);
}
.motion .beats .beat:last-child::before { right: 0; }
.motion .beats:not(.in) .beat::before { transform: scaleX(0); }
.motion .beats .beat::after { transition: opacity .12s linear calc(var(--i, 0) * 110ms + .28s); }
.motion .beats:not(.in) .beat::after { opacity: 0; }
@media (max-width: 1120px) { .motion .beats .beat::before { right: 0; } }

/* Privacy stack: each layer's hairline is ruled in, one after another (text never hidden). */
.motion .privacy .layer-row { border-top-color: transparent; }
.motion .privacy .layer-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule-2);
  transform-origin: left; transition: transform .36s var(--ease-out) calc(var(--i, 0) * 90ms);
}
.motion .privacy .layer-row:first-child::before { background: var(--rule); }
.motion .privacy:not(.in) .layer-row::before { transform: scaleX(0); }
.motion .privacy .lw { transition: clip-path .16s linear calc(var(--i, 0) * 90ms + .2s); clip-path: inset(0); }
.motion .privacy:not(.in) .lw { clip-path: inset(0 100% 0 0); }

/* Awards: a frame is drawn once around each winner's mark. */
.plates .plate:nth-child(2) { --pd: .12s; }
.motion .plate-frame rect { transition: stroke-dashoffset .5s linear var(--pd, 0ms); }
.motion .plate:not(.in) .plate-frame rect { stroke-dashoffset: 1; }

/* Team: portraits are wiped in like a plate being pulled. */
.founders .person:nth-child(2) { --pd: 90ms; }
.founders .person:nth-child(3) { --pd: 180ms; }
.motion .portrait img { clip-path: inset(0); transition: clip-path .5s var(--ease-out) var(--pd, 0ms); }
.motion .person:not(.in) .portrait img { clip-path: inset(0 100% 0 0); }

/* Reading progress: a 1px measuring hairline on the header's edge, driven by scroll only. */
@keyframes measure { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg);
      transform-origin: left; animation: measure linear both; animation-timeline: scroll(root);
    }
  }
}

/* ---------- Scroll-driven motion (feature-gated, motion allowed only) ---------- */
@keyframes drift { from { transform: translate3d(0, calc(var(--d, 0px) * -1), 0); } to { transform: translate3d(0, var(--d, 0px), 0); } }
@supports (animation-timeline: view()) {
  @media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
    .hero-marks, .marks, .band-pic { will-change: transform; animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    .hero-marks { --d: 36px; }
    .marks { --d: 60px; }
    .band-pic { --d: 34px; }
  }
}

/* How it works, five steps: 3 + 2 on tablets and small laptops (no orphan card); one column on phones. */
@media (min-width: 641px) and (max-width: 1120px) {
  .beats { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 36px; }
  .beat { grid-column: span 2; }
  .beat:nth-child(n+4) { grid-column: span 3; }
  .beat:nth-child(3)::after { display: none; }
  .beat:nth-child(n+4) p { max-width: 44ch; }
}

/* Tablets: the Evidence Pack photo is capped (it grew to ~790x420 at 960px and pushed the receipt away). */
@media (min-width: 641px) and (max-width: 1120px) { .photo-emboss { max-width: 560px; } }

/* No content-visibility:auto on the sections: tried in R8c, it made every in-page and #hash jump land off
   target (up to ~3,000px) while skipped sections kept their placeholder size. The first layout stays under
   the 100ms budget without it. */

/* The registration-mark grid read as strike-throughs across text below desktop widths. */
@media (max-width: 1120px) { .marks { display: none; } }

/* Landscape phones: the stage fits the viewport under the header (keeping its ratio, centred). */
@media (orientation: landscape) and (max-height: 500px) {
  /* stage + its 45px control bar fit under the header */
  .net-stage, .net .fig-bar { width: min(100%, calc((100dvh - var(--header-h) - 45px - 24px) * 16 / 9)); margin-inline: auto; }
  /* A stage this short has no room for the counters under the ring; the caption and stage bar carry the story. */
  .nh-readout { display: none; }
}

/* ---------- Phones: R8 round 2 (mobile review) ---------- */
@media (max-width: 640px) {
  /* The registration-mark grid read as strike-throughs across body text at this size. */
  .layer-text { font-size: 16px; }
  .plate-mark { height: 72px; }
  /* Team: portrait beside name and role, then the bio at full width (was ~30 characters a line). */
  .person { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; }
  .person-body { display: contents; }
  .person .portrait { grid-row: 1 / span 2; }
  .person .person-id { grid-column: 2; align-self: end; } /* founders only: advisors keep their own one-column rows */
  .person .person-role { grid-column: 2; align-self: start; }
  .person .person-bio { grid-column: 1 / -1; margin-top: 16px; max-width: none; }
  /* Policy simulator: the verdict stays in view while you drag the slider. */
  .sim-result { position: sticky; bottom: 0; z-index: 2; background: var(--bg); box-shadow: 0 -1px 0 var(--rule-2); padding: 12px 14px; min-height: 0; }
  .sim-result .sim-trace { margin-top: 10px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =====================================================================================================
   Mobile ergonomics (29 Sep): two patterns only, both phone-only (max-width: 640px).
   - Snap sequence (.seq): a horizontal scroll-snap track of peer cards with a numbered rail. Pure CSS works
     with no JS (swipe, next card peeks); site/seq.js adds the rail, auto-advance (How only) and the toggle.
   - Fold (details.fold): the summary carries the claim, the body the supporting sentence. Closed in the HTML;
     at 641px and up the closed content box is shown and the summary is inert, so desktop reads exactly as
     before with or without JS (seq.js sets [open] there only where ::details-content is unsupported).
   Kept in one block, away from the hero's .fig-* rules.
   ===================================================================================================== */

/* ---------- Snap sequence ---------- */
.seq-bar { display: none; }

@media (max-width: 640px) {
  .seq-track {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .seq-track::-webkit-scrollbar { display: none; }
  .seq-track > .seq-slide { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .beats.seq-track, .why-grid.seq-track, .plates.seq-track { row-gap: 0; }
  .beats.seq-track .beat { padding: 16px 0 4px; }
  .beats.seq-track .beat p, .why-grid.seq-track .why p, .plates.seq-track .plate p { max-width: none; }

  .js .seq-bar { display: flex; align-items: stretch; gap: 8px; margin-top: 16px; }
  .seq-rail { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; }
  .seq-seg {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 0 12px; border: 0; background: none; cursor: pointer;
    display: flex; align-items: flex-end; color: var(--fg-3); font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  }
  .seq-seg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--rule-2); }
  /* The fill is the dwell timer's face: transform only (compositor), driven by seq.js with WAAPI. */
  .seq-fill { position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; }
  .seq-seg.is-seen .seq-fill { transform: scaleX(1); }
  .seq-seg[aria-current="true"] { color: var(--fg); font-weight: 500; }
  .seq-seg:focus-visible { outline-offset: -2px; }

  /* Pause / Play / Replay swap without input, so nothing in the bar may move: fixed toggle width,
     equal 10px glyph boxes, a label box wide enough for the longest word. */
  .seq-toggle { flex: 0 0 104px; justify-content: flex-start; padding-inline: 16px 8px; }
  .seq-toggle .vt-pause, .seq-toggle .vt-replay { flex: 0 0 10px; width: 10px; }
  .seq-toggle.is-paused .vt-pause { flex-basis: 10px; }
  .seq-toggle [data-seq-state] { min-width: 6ch; }
  .vt-replay { position: relative; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
  .vt-replay::after { content: ""; position: absolute; right: -3px; top: -2px; border-left: 4px solid currentColor; border-block: 3px solid transparent; transform: rotate(60deg); }
  .seq-toggle.is-done .vt-pause, .seq-toggle:not(.is-done) .vt-replay { display: none; }
}
/* Narrow phones: the toggle goes icon-only (its aria-label carries the words), so rail segments stay >= 44px. */
@media (max-width: 379px) {
  .seq-toggle { flex-basis: 44px; padding: 0; justify-content: center; }
  .seq-toggle [data-seq-state] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Fold ---------- */
.fold > summary { list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.rule-fold > summary strong { display: block; }

@media (min-width: 641px) {
  .fold::details-content { content-visibility: visible; }
  .fold > .fold-sum { pointer-events: none; cursor: auto; }
  .fold-sum::before, .fold-sum::after { display: none; }
  .record-fold > summary, .sim-fold > summary { display: none; }
  .record-rows:first-child > div:last-child { border-bottom: 1px solid var(--rule-2); }
}

@media (max-width: 640px) {
  .fold-sum { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 44px; padding-right: 36px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fold-sum:focus-visible { outline-offset: 2px; }
  /* Privacy stack: the whole stack is one fold; its kicker is the summary. Open, every layer reads in full. */
  .privacy-fold > .privacy-k { padding-block: 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-2); line-height: 1.6; }
  .privacy-fold[open] > .privacy-k { border-bottom-color: transparent; }
  /* Evidence receipt: the Decision row stays, the five spec rows fold */
  .record-fold { margin: 0 16px; border-bottom: 1px solid var(--rule-2); }
  .record-fold .fold-sum { font-size: 14px; color: var(--fg-3); padding-block: 8px; }
  .record-fold .record-rows { padding: 0; }
  .record-fold .record-rows > div:last-child { border-bottom: 0; }
  /* Policy rules: the bold lead is the summary */
  .rules li { padding-block: 12px; }
  .rules li::before { top: 24px; }
  .rule-fold > summary strong { margin-bottom: 0; }
  .rule-fold p { padding: 4px 36px 6px 0; }
  /* Evaluator footnote */
  .sim-fold { margin-top: 12px; border-top: 1px solid var(--rule-2); }
  .sim-fold .fold-sum { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
  .sim-fold .sim-note { margin-top: 0; padding-bottom: 4px; }
}
@supports selector(::details-content) {
  @media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .fold::details-content { block-size: 0; overflow-y: clip; transition: block-size .24s var(--ease-out), content-visibility .24s allow-discrete; }
    .fold[open]::details-content { block-size: auto; }
  }
}