/* Argum landing — dark build.
   Every colour comes from the tokens below. See DESIGN.md at project root for
   the concept, the rules that come with each token, and the motion inventory.
   No hex literal belongs anywhere else in this file. */

:root {
  /* surface ladder — elevation is lightness, never shadow */
  --void:     #0B0F14;
  --surface:  #121821;
  --raised:   #1A2330;
  --raised-2: #222D3B;
  --edge:     #2A3746;

  /* text — never pure white */
  --text:     #DDE5EC;
  --muted:    #8A9AAA;
  --faint:    #5A6874;

  /* verdict colours — the only saturated values on the page */
  --allow:    #55B888;
  --deny:     #D65E42;
  --hold:     #D2A03F;
  --proof:    #6FA0D8;

  /* derived channels, so component rules never restate a hex */
  --proof-rgb: 111, 160, 216;
  --allow-rgb: 85, 184, 136;
  --deny-rgb:  214, 94, 66;
  --hold-rgb:  210, 160, 63;
  --void-rgb:  11, 15, 20;
  --text-rgb:  221, 229, 236;

  --font-display: 'Anybody', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── fonts (self-hosted, latin) ─────────────────────────────────────────── */
@font-face {
  font-family: 'Anybody';
  src: url('fonts/anybody-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/plexsans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/plexsans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plexmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* ── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, ul, ol { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--proof); outline-offset: 2px; }
::selection { background: rgba(var(--proof-rgb), 0.35); color: var(--text); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── type roles — extremes, not the lukewarm middle ────────────────────── */
.display {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 72, 'wght' 800;
  font-size: clamp(3.1rem, 7.4vw, 6.6rem);
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--text);
}
.section-head {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 74, 'wght' 800;
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  letter-spacing: -0.028em;
  line-height: 0.97;
  max-width: 20ch;
  margin-bottom: 1.75rem;
}
.section-head--xl { font-size: clamp(2.8rem, 6.4vw, 5.6rem); max-width: 16ch; }
/* the one large light-weight moment — 200 against the page's 800 */
.section-head--light { font-variation-settings: 'wdth' 84, 'wght' 200; letter-spacing: -0.02em; }
.section-head.narrow { max-width: 24ch; }

/* headings that run past the content column (breaking the symmetric stack) */
.bleed-head { max-width: 26ch; width: calc(100% + 12vw); }
@media (max-width: 900px) { .bleed-head { width: 100%; } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--proof);
  margin-bottom: 1.5rem;
}
.eyebrow--muted { color: var(--muted); }

.body-copy { max-width: 62ch; color: var(--muted); }
.body-copy + .body-copy { margin-top: 1.1em; }
.body-copy strong { color: var(--text); font-weight: 600; }
.muted { color: var(--muted); }

.mono-line {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.85rem;
}
.mono-line--right { text-align: right; }

/* ── buttons & links — proof is the only clickable colour ──────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--proof);
  transition: background 200ms linear, color 200ms linear;
}
.btn--solid { background: var(--proof); color: var(--void); }
.btn--solid:hover { background: var(--text); border-color: var(--text); }
.btn--ghost { color: var(--proof); background: transparent; }
.btn--ghost:hover { background: rgba(var(--proof-rgb), 0.12); }

.link-slide {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--proof);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.link-slide::after {
  content: '';
  position: absolute;
  left: 0; bottom: 10px;
  width: 100%; height: 1px;
  background: var(--proof);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms linear;
}
.link-slide:hover::after { transform: scaleX(1); }

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 64px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 200ms linear, border-color 200ms linear;
}
.nav.is-scrolled {
  background: rgba(var(--void-rgb), 0.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--edge);
}
.nav__inner {
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__wordmark {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 72, 'wght' 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
}
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color 200ms linear;
}
.nav__link:hover { color: var(--text); }
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--proof);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms linear;
}
.nav__link:hover::after { transform: scaleX(1); }
@media (max-width: 860px) { .nav__link { display: none; } }

/* ── plates ────────────────────────────────────────────────────────────── */
/* Sections carry no background and no border. The page reads as one continuous
   surface; the atmosphere below is a single fixed layer behind everything, so
   nothing marks where one section stops and the next begins. */
.plate {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1.25rem, 4vw, 3.5rem);
  background: transparent;
  isolation: isolate;
}
.plate--hero { padding-top: clamp(5rem, 11vw, 9rem); }
.plate--short { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
/* Content sits above the atmosphere. Overlay layers carry .plate-layer and are
   excluded here so their own absolute positioning survives. */
.plate > *:not(.plate-layer) { position: relative; z-index: 4; }

/* ── the atmosphere ────────────────────────────────────────────────────── */
/* One fixed layer for the whole document: a slow vertical drift through the
   surface ladder, plus grid, dot matrix and grain. Fixed rather than repeated
   per section, so no seam can appear at a section boundary. */
.atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.atmosphere__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 15% 0%, rgba(var(--text-rgb), 0.045), transparent 60%),
    radial-gradient(ellipse 100% 70% at 85% 100%, rgba(111, 160, 216, 0.05), transparent 62%);
}
.atmosphere__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--text-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--text-rgb), 0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 25%, transparent 100%);
}
.atmosphere__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(var(--text-rgb), 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
  mask-image: radial-gradient(ellipse 65% 60% at 75% 25%, #000 0%, transparent 80%);
}
.atmosphere__grain {
  position: absolute; inset: 0;
  opacity: 0.26;
  mix-blend-mode: overlay;
  background-image: var(--grain-url);
  background-size: 180px 180px;
}
/* Body carries the base tone; the page scrolls over a single continuous field. */
body { background: linear-gradient(180deg, var(--void) 0%, var(--surface) 42%, var(--void) 100%); background-attachment: fixed; }
main, .nav, .footer { position: relative; z-index: 1; }

/* ── photographic plates — graded in code, not baked into the file ─────── */
/* Every overlay fades out at its own top and bottom edge, so a photograph and
   the scrim over it dissolve into the continuous field instead of ending on a
   visible line. The scrim needs this as much as the image: it is the layer that
   used to draw the hard seam under the hero. */
.plate-photo, .plate-drawn, .scrim, .scanline {
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.plate--hero .plate-photo, .plate--hero .scrim, .plate--hero .scanline {
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.plate-photo { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; isolation: isolate; }
.plate-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* exposure pulled down so it never competes with type */
  filter: grayscale(1) contrast(1.06) brightness(0.52);
}
/* duotone: colour-blend toward proof, then wash ~85% into void */
.plate-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--proof);
  mix-blend-mode: color;
  opacity: 0.62;
}
.plate-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--void);
  opacity: 0.58;
}
.plate-photo--deep img { filter: grayscale(1) contrast(1.02) brightness(0.36); }
.plate-photo--deep::after { opacity: 0.72; }
.plate-photo--faint::after { opacity: 0.86; }
/* Sections that sit over a supplied photograph push it much further back: the
   copy over them is long-form, so the picture has to read as texture and mood
   rather than as a photograph competing for attention. */
.plate--photo-faint .plate-photo img {
  filter: grayscale(1) contrast(0.94) brightness(0.26);
  /* frame off-centre so faces do not sit directly behind body copy */
  object-position: 62% center;
}
.plate--photo-faint .plate-photo::after { opacity: 0.9; }
.plate--photo-faint .plate-photo::before { opacity: 0.7; }
/* the desk photograph is already dark and low-contrast, so it needs less */
.plate--photo-dusk .plate-photo img {
  filter: grayscale(1) contrast(1) brightness(0.4);
  object-position: 30% center;
}
.plate--photo-dusk .plate-photo::after { opacity: 0.86; }

/* drawn plates (03 archive, 04 console) — born in the palette, so they need no
   duotone; the opacity variant is the whole grade */
.plate-drawn { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.plate-drawn svg { width: 100%; height: 100%; display: block; }
.plate--drawn-faint .plate-drawn { opacity: 0.5; }
.plate--drawn-deep .plate-drawn { opacity: 0.34; }
/* the drawn rooms are wide; on narrow viewports crop to the lit aisle rather
   than squashing the perspective */
@media (max-width: 700px) {
  .plate--drawn-faint .plate-drawn { opacity: 0.38; }
  .plate--drawn-deep .plate-drawn { opacity: 0.26; }
}

/* the one ambient effect — a scan line drifting down over ~18s */
.scanline {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.scanline::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -20%;
  height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(var(--proof-rgb), 0.085), transparent);
  animation: scan 18s linear infinite;
}
@keyframes scan { to { top: 120%; } }

/* scrim behind text sitting over photography */
.scrim {
  background: linear-gradient(100deg, rgba(var(--void-rgb), 0.92) 0%, rgba(var(--void-rgb), 0.86) 46%, rgba(var(--void-rgb), 0.34) 76%, transparent 100%);
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
@media (max-width: 900px) {
  .scrim { background: linear-gradient(180deg, rgba(var(--void-rgb), 0.9) 0%, rgba(var(--void-rgb), 0.9) 70%, rgba(var(--void-rgb), 0.6) 100%); }
}

/* ── grid ──────────────────────────────────────────────────────────────── */
.grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
/* asymmetric splits — deliberately not 6/6 */
.col-7-off { grid-column: 1 / span 7; }
.col-4-off { grid-column: 9 / span 4; }
.plate > .reveal, .plate > .statband, .plate > .flow, .plate > .threecol,
.plate > .stall-cards, .plate > .stall-kicker, .plate > .layers, .plate > .faq,
.plate > .fieldcards, .plate > .loop, .plate > .pricing, .plate > .prod,
.plate > .close__cta, .plate > .mono-line, .plate > .handoff-wrap,
.plate > .shots {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-7-off, .col-4-off { grid-column: span 12; }
}

/* ── centred composition ───────────────────────────────────────────────── */
/* The page runs down one centred column. Text blocks are centred and capped at
   a comfortable measure; anything with its own internal alignment (tables,
   field cards, the walkthrough tabs) resets to the left inside itself, because
   centring rows of label-and-value pairs makes them unreadable. */
.plate { text-align: center; }
.plate .section-head,
.plate .display,
.plate .body-copy,
.plate .subhead,
.plate .eyebrow,
.plate .kicker,
.plate .prod__scope,
.plate .close__intro,
.plate .cloud__note,
.plate .problem__lead,
.plate .shots__cap {
  margin-left: auto;
  margin-right: auto;
}
.plate .section-head, .plate .display { max-width: 20ch; }
.plate .section-head--xl { max-width: 18ch; }
.plate .body-copy, .plate .problem__lead, .plate .cloud__note { max-width: 62ch; }
.plate .kicker { max-width: 26ch; }
/* left-aligned islands inside the centred column */
.fleetview, .gate, .roomlist, .fieldcard, .shots__tab, .qcard, .acard,
.threecol__col, .team__row, .receipt, .stays-private, .incident {
  text-align: left;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
/* Type and air, nothing else. The gate, the verdicts and the proof are all
   shown further down the page, so the hero states the claim and gets out of
   the way. The space around the headline is the composition. */
.plate--hero {
  min-height: min(92vh, 900px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hero__copy { width: 100%; }
/* a wide measure so the headline sets in two lines and can run large */
.plate--hero .display { max-width: 30ch; font-size: clamp(2.9rem, 6.2vw, 5.5rem); }
.subhead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin-top: 1.9rem;
}
.subhead__accent { color: var(--proof); }

/* hero node overlay — the sync pins these onto the plate. They occupy a band
   below the copy so they never sit under running text; the band only exists at
   widths where the hero is a two-column split. */
.hero-nodes {
  position: absolute;
  left: 0; right: 0;
  top: 64px;          /* clears the sticky nav */
  height: 12%;
  z-index: 1;
  pointer-events: none;
}
.hero-nodes__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-node { position: absolute; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); white-space: nowrap; }
.hero-node__dot {
  width: 5px; height: 5px; flex-shrink: 0;
  background: var(--proof);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(var(--proof-rgb), 0.14);
}
.hero-node__id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1099px) { .hero-nodes { display: none; } }
.node-dot { fill: var(--proof); }
.node-ring { fill: none; stroke: var(--proof); stroke-width: 1; opacity: 0.5; }
/* mono at this size needs more contrast headroom than it looks like it does */
.node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text);
}
.node-ts { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--muted); }
.node-note { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; }
.node-note--allow { fill: var(--allow); }
.node-note--hold { fill: var(--hold); }
.connector { fill: none; stroke: var(--proof); stroke-width: 1; opacity: 0.55; stroke-dasharray: 3 4; }

/* ── receipt (signature element) ───────────────────────────────────────── */
.receipt-wrap { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.receipt-wrap--large { grid-template-columns: 1fr; }
.receipt { background: var(--raised); }
.receipt__chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--edge);
  background: var(--surface);
}
.receipt__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--edge); }
.receipt__url {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin-left: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt__body { padding: 18px; }
.receipt__claim { font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
.receipt__progress { position: relative; height: 18px; margin-top: 16px; }
.receipt__sweep {
  position: absolute; left: 0; top: 8px;
  height: 1px; width: 100%;
  background: var(--proof);
  transform: scaleX(0);
  transform-origin: left;
}
.receipt__checking {
  position: absolute; right: 0; top: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.receipt__result {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
  opacity: 0;
}
.receipt__counts { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
/* one of the two permitted glowing elements in the hero viewport */
.receipt__verified {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  padding: 5px 11px;
  color: var(--allow);
  border: 1px solid rgba(var(--allow-rgb), 0.55);
  background: rgba(var(--allow-rgb), 0.10);
  white-space: nowrap;
}
.receipt__disclosure {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 18px 14px;
  opacity: 0;
}
.receipt.is-verified .receipt__progress { display: none; }
.receipt.is-verified .receipt__result { opacity: 1; transition: opacity 200ms linear; }
.receipt.is-verified .receipt__disclosure { opacity: 1; transition: opacity 200ms linear 100ms; }
.receipt.is-verified .receipt__verified {
  box-shadow: 0 0 0 1px rgba(var(--allow-rgb), 0.28), 0 0 18px rgba(var(--allow-rgb), 0.30);
  text-shadow: 0 0 10px rgba(var(--allow-rgb), 0.45);
}

.stays-private { background: var(--surface); padding: 15px 17px; }
.stays-private__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin-bottom: 11px;
}
.lock { width: 11px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.2; }
.stays-private__row {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  padding: 7px 0;
  border-top: 1px solid var(--edge);
  display: flex; justify-content: space-between; gap: 10px;
}
.stays-private__row::after { content: 'WITHHELD'; letter-spacing: 0.13em; opacity: 0.6; }
.receipt-label { margin-top: 12px; }

/* ── incidents ─────────────────────────────────────────────────────────── */
.incidents { display: flex; flex-direction: column; }
.incident { border-top: 1px solid var(--edge); padding: 1.2rem 0; }
.incident:last-child { border-bottom: 1px solid var(--edge); }
.incident__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.incident__co {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 1.4rem;
  color: var(--text);
}
.chip-date {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  color: var(--muted);
  border: 1px solid var(--edge);
  padding: 3px 8px;
  white-space: nowrap;
}
.incident__desc { margin-top: 0.5rem; color: var(--deny); font-size: 0.9375rem; }
.incident__src { margin-top: 0.4rem; }

/* stat band — figure oversized and crossing the left content edge */
.statband {
  display: flex; align-items: baseline; gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--edge);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
}
.statband__figure {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 68, 'wght' 800;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-left: clamp(0px, -2vw, 0px);
}
.statband__text { font-size: 1.15rem; max-width: 34ch; color: var(--muted); }
@media (max-width: 700px) { .statband { flex-direction: column; align-items: flex-start; gap: 1rem; } }

/* ── handoff layer over photography ────────────────────────────────────── */
.handoff-wrap { position: relative; margin-top: 3rem; }
.handoff {
  position: relative;
  aspect-ratio: 2400 / 1350;
  border: 1px solid var(--edge);
  overflow: hidden;
}
/* isolate so the duotone blends with the photograph only, not the plate behind it */
.handoff__photo { position: absolute; inset: 0; isolation: isolate; }
.handoff__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(0.78); }
.handoff__photo::before { content: ''; position: absolute; inset: 0; background: var(--proof); mix-blend-mode: color; opacity: 0.85; }
/* the room must stay legible under the routing layer, so this plate keeps the
   lightest wash of the four */
.handoff__photo::after { content: ''; position: absolute; inset: 0; background: var(--void); opacity: 0.34; }
/* darken only the band the labels sit in, so contrast is met without flattening
   the whole image */
.handoff__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(var(--void-rgb), 0.80) 0%, rgba(var(--void-rgb), 0.55) 34%, transparent 62%);
}
.handoff__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.handoff__chip { position: absolute; top: 12px; right: 12px; z-index: 3; }
.handoff__caption { margin-top: 0.85rem; }
@media (max-width: 700px) { .handoff { aspect-ratio: 4 / 3; } }

/* ── fleet view ────────────────────────────────────────────────────────── */
.fleetview { border: 1px solid var(--edge); background: var(--raised); }
.fleetview__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px; border-bottom: 1px solid var(--edge);
  background: var(--surface);
}
.fleetview__title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.chip-concept {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--muted);
  border: 1px solid var(--edge);
  background: var(--void);
  padding: 4px 9px;
  white-space: nowrap;
}
.fleetview__top { display: grid; grid-template-columns: 96px auto 1fr; align-items: center; gap: 20px; padding: 20px; }
.donut { width: 96px; height: 96px; }
.fleetview__total {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 74, 'wght' 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}
.fleetview__legend { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--muted); }
.fleetview__legend li { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fleetview__legend small { color: var(--muted); font-size: 0.75rem; width: 100%; padding-left: 19px; }
.sw { width: 9px; height: 9px; flex-shrink: 0; display: inline-block; transform: translateY(0.5px); }
/* status dots emit light, so they may glow — the fleet card's whole budget */
.sw--green { background: var(--allow); box-shadow: 0 0 8px rgba(var(--allow-rgb), 0.5); }
.sw--amber { background: var(--hold); box-shadow: 0 0 8px rgba(var(--hold-rgb), 0.45); }
.sw--grey { background: var(--faint); }

.fleetview__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.fleetview__colhead { text-align: right; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding: 7px 15px; }
.fleetview__table td { padding: 10px 15px; border-top: 1px solid var(--edge); color: var(--muted); }
.cell-name { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); }
.cell-count { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.cell-status { text-align: right; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase; }
.row--ok .cell-status { color: var(--allow); }
.row--quiet td, .row--quiet .cell-status { color: var(--muted); }
.row--strike.is-struck { background: rgba(var(--deny-rgb), 0.09); }
.row--strike.is-struck .cell-status { color: var(--deny); }
.strike-target { position: relative; white-space: nowrap; }
.strike-target::after {
  content: '';
  position: absolute; left: 0; top: 55%;
  width: 100%; height: 1px;
  background: var(--deny);
  transform: scaleX(0);
  transform-origin: left;
}
.is-struck .strike-target::after { transform: scaleX(1); transition: transform 400ms var(--ease); }
@media (max-width: 640px) {
  .fleetview__top { grid-template-columns: 76px 1fr; }
  .fleetview__total { grid-column: 2; }
  .fleetview__legend { grid-column: 1 / -1; }
  .donut { width: 76px; height: 76px; }
  .strike-target { white-space: normal; }
  .fleetview__table td, .fleetview__colhead { padding-left: 8px; padding-right: 8px; }
  .fleetview__table td:first-child { padding-left: 15px; }
  .fleetview__table td:last-child { padding-right: 15px; }
  .cell-name { font-size: 0.6875rem; }
}

/* ── the stall ─────────────────────────────────────────────────────────── */
.stall-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: 2rem; }
.qcard, .acard { border: 1px solid var(--edge); background: var(--raised); padding: 1.6rem 1.7rem; }
.qcard p { font-size: 1.15rem; font-weight: 600; max-width: 36ch; color: var(--text); }
.acard { background: transparent; }
.acard__struck { font-size: 1.05rem; font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.acard__body { margin-top: 0.6rem; color: var(--muted); font-size: 0.9375rem; }
/* the kicker crosses the plate boundary into the next section */
.stall-kicker {
  margin-top: 3.5rem;
  border-top: 1px solid var(--proof);
  padding-top: 1.75rem;
  position: relative;
  padding-bottom: 2.5rem;
  z-index: 4;
}
/* The kicker bleeds past the section's bottom padding only when it is the last
   thing in the section. Anywhere else that negative margin drags the following
   paragraph up on top of it. */
.stall-kicker:last-child {
  margin-bottom: calc(-1 * clamp(4.5rem, 9vw, 8.5rem) - 2.5rem);
}
.kicker {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 78, 'wght' 800;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--proof);
  max-width: 20ch;
}
@media (max-width: 640px) { .stall-cards { grid-template-columns: 1fr; } .stall-kicker, .stall-kicker:last-child { margin-bottom: 0; padding-bottom: 0; } }

/* ── the unlock ────────────────────────────────────────────────────────── */
/* the annotation column needs a floor, or the 1fr stack starves it to one word
   per line at wide viewports */
.layers { display: grid; grid-template-columns: 22px 1fr minmax(12ch, max-content); gap: 20px; align-items: stretch; margin-top: 2.5rem; }
.layers__arrow { height: 100%; width: 14px; }
.layers__stack { display: flex; flex-direction: column; gap: 6px; }
.layer {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding: 1.15rem 1.4rem;
  border-left: 2px solid var(--edge);
  background: var(--surface);
}
.layer--hi { border-left-color: var(--proof); background: var(--raised); }
.layer__label {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 74, 'wght' 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
  min-width: 12ch;
}
.layer:not(.layer--hi) .layer__label { color: var(--muted); }
.layer__desc { color: var(--muted); font-size: 0.9375rem; }
.layers__note { align-self: center; color: var(--muted); max-width: 13ch; margin: 0; padding-right: 0.5rem; line-height: 1.7; }
@media (max-width: 1100px) { .layers { grid-template-columns: 22px 1fr; } .layers__note { grid-column: 2; max-width: none; margin-top: 0.5rem; } }
.unlock-bottom { margin-top: 3.5rem; }
.zkbox { border: 1px solid var(--edge); background: var(--raised); padding: 1.6rem 1.7rem; }
.zkbox__head {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--proof);
  margin-bottom: 0.9rem;
}
.zkbox__body { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 640px) {
  .layers { grid-template-columns: 1fr; }
  .layers__arrow { display: none; }
  .layer { flex-direction: column; gap: 0.3rem; }
  .layers__note { max-width: none; }
}

/* ── product ───────────────────────────────────────────────────────────── */
.flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin: 2.5rem auto 1rem; position: relative; padding-bottom: 2.25rem;
  width: fit-content; max-width: 100%;
}
.flow__box {
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--edge); background: var(--raised);
  padding: 1.1rem 1.4rem; font-size: 0.875rem; font-weight: 600;
  width: 19ch; color: var(--text); text-align: center;
}
.flow__box--center { background: var(--proof); border-color: var(--proof); color: var(--void); }
.flow__box--center span { font-weight: 400; font-size: 0.75rem; opacity: 0.85; }
.flow__arrow { width: 48px; flex-shrink: 0; align-self: center; }
.flow__labels {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; gap: 2rem;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
}
.flow__struck { color: var(--muted); }
.flow__kept { color: var(--proof); }
.prod { border-top: 1px solid var(--edge); margin-top: 3rem; padding-top: 3rem; scroll-margin-top: 80px; }
.prod__label {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 70, 'wght' 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: 0.01em;
  color: var(--text);
}
.prod__promise { font-size: 1.1rem; font-weight: 600; margin: 0.7rem 0 0.9rem; max-width: 32ch; color: var(--text); }
.prod__scope { margin-top: 3rem; }
.coverage-line { border: 1px solid var(--edge); background: var(--raised); padding: 1.15rem 1.35rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.coverage-line__text { margin: 0; font-size: 0.75rem; text-transform: none; letter-spacing: 0.05em; color: var(--muted); font-family: var(--font-mono); }

/* ── demo walkthrough ──────────────────────────────────────────────────── */
.demo { border-top: 1px solid var(--edge); margin-top: 3rem; padding-top: 3rem; scroll-margin-top: 80px; }
.demo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.demo__head .eyebrow { margin-bottom: 1rem; }
.demo__heading {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 74, 'wght' 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.028em;
  line-height: 0.99;
  color: var(--text);
  max-width: 18ch;
}
.demo__standfirst { margin-top: 1rem; max-width: 60ch; }
.demo__frame {
  position: relative;
  border: 1px solid var(--edge);
  background: var(--raised);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.demo__play {
  display: block;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0; background: none;
  cursor: pointer;
  position: relative;
}
.demo__play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.72; transition: opacity 200ms linear; }
.demo__play:hover img { opacity: 0.88; }
.demo__play::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(var(--void-rgb), 0.55) 100%);
}
.demo__btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 46px;
  padding: 0.75rem 1.4rem;
  background: var(--void);
  border: 1px solid var(--proof);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--proof);
  white-space: nowrap;
  transition: background 200ms linear, color 200ms linear;
}
.demo__play:hover .demo__btn { background: var(--proof); color: var(--void); }
.demo__tri { width: 12px; height: 13px; fill: currentColor; flex-shrink: 0; }
.demo__dur { color: var(--muted); }
.demo__play:hover .demo__dur { color: var(--void); }
.demo__play:focus-visible { outline: 2px solid var(--proof); outline-offset: -2px; }
/* once loaded the <video> replaces the button in the same box */
.demo__frame video { width: 100%; height: 100%; display: block; background: var(--void); }
.demo__note { margin-top: 0.9rem; }
.demo__summary { margin-top: 1rem; border-top: 1px solid var(--edge); }
.demo__summary-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  min-height: 46px;
}
.demo__summary-q::-webkit-details-marker { display: none; }
.demo__steps { padding: 0 0 1.25rem 1.25rem; margin: 0; color: var(--muted); max-width: 68ch; font-size: 0.9375rem; }
.demo__steps li { padding: 0.3rem 0; }
.demo__steps li::marker { color: var(--faint); font-family: var(--font-mono); font-size: 0.75rem; }
@media (max-width: 860px) {
  .demo__head { flex-direction: column; gap: 1.25rem; }
  .demo__btn { font-size: 0.6875rem; padding: 0.7rem 1rem; gap: 0.6rem; }
  /* clipped rather than display:none, so the button keeps its accessible name */
  .demo__btn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
}

.gate { border: 1px solid var(--edge); background: var(--raised); padding: 1.2rem 1.35rem; position: relative; }
.gate > .chip-concept { position: absolute; top: 11px; right: 11px; }
.gate__row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--edge); }
.gate__row:first-of-type { border-top: 0; margin-top: 1.4rem; }
.gate[data-armed] .gate__row { opacity: 0; transform: translateY(6px); }
.gate[data-armed] .gate__row.is-shown { opacity: 1; transform: none; transition: opacity 200ms linear, transform 200ms var(--ease); }
.gate__num { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.gate__text { font-size: 0.875rem; color: var(--text); }
.gate__chip { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; padding: 4px 10px; white-space: nowrap; }
/* chips sit on --void rather than a tinted --raised so the verdict colours keep
   AA at 10px; the tint stays in the border */
.gate__chip--amber { background: var(--void); color: var(--hold); border: 1px solid rgba(var(--hold-rgb), 0.5); }
.gate__chip--rust { background: var(--void); color: var(--deny); border: 1px solid rgba(var(--deny-rgb), 0.5); }
.gate__chip--mono { color: var(--muted); border: 1px solid var(--edge); }
/* the deny chip glows briefly and settles */
.gate__row.is-shown .gate__chip--rust { animation: denyPulse 900ms linear 200ms 1; }
@keyframes denyPulse {
  0%   { box-shadow: 0 0 0 rgba(var(--deny-rgb), 0); }
  35%  { box-shadow: 0 0 18px rgba(var(--deny-rgb), 0.55); }
  100% { box-shadow: 0 0 0 rgba(var(--deny-rgb), 0); }
}
.gate__sub { grid-column: 2 / 4; font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted); letter-spacing: 0.05em; }
.gate__end { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--edge); font-weight: 600; font-size: 0.875rem; color: var(--text); }

/* ── privacy field cards ───────────────────────────────────────────────── */
.fieldcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 2.5rem; background: var(--edge); border: 1px solid var(--edge); }
.fieldcard { background: var(--surface); padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; }
.fieldcard__name { color: var(--muted); }
.fieldcard__mode { font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; font-size: 0.625rem; color: var(--proof); }
@media (max-width: 767px) { .fieldcards { grid-template-columns: repeat(2, 1fr); } }

/* ── three-column sections ─────────────────────────────────────────────── */
.threecol { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: 2rem; }
/* the deployment note must not read as a fourth column of the row above it */
.threecol + .body-copy { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); max-width: 68ch; }
.threecol__col { border-top: 1px solid var(--edge); padding-top: 1.4rem; }
.threecol__col--proof { border-top-color: var(--proof); }
.threecol__head {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
  color: var(--text);
}
.clock { width: 38px; height: 38px; margin-bottom: 1rem; display: block; }
@media (max-width: 767px) { .threecol { grid-template-columns: 1fr; } }

.status-list { list-style: none; padding: 0; counter-reset: st; }
.status-list li { counter-increment: st; padding: 0.5rem 0; display: flex; gap: 0.9rem; color: var(--muted); }
.status-list li::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  transform: translateY(2px);
}

/* ── who it's for ──────────────────────────────────────────────────────── */
.loop { margin-top: 2.5rem; }
.loop__boxes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.loop__return { display: block; width: min(820px, 92%); margin: 6px auto 0; }
.loop__caption { text-align: center; color: var(--proof); font-size: 1.1rem; max-width: 50ch; margin: 1rem auto 0; }
.who-cols { margin-top: 3rem; }
.pricing { margin-top: 3rem; border-top: 1px solid var(--edge); padding-top: 1.75rem; display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.pricing .mono-line { margin: 0; }

/* ── difference ────────────────────────────────────────────────────────── */
.chipmath { width: 100%; max-width: 460px; }
.chipmath__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; fill: var(--proof); }
.chipmath__label--mut { fill: var(--muted); }

/* ── close ─────────────────────────────────────────────────────────────── */
.close__statement { max-width: 19ch; margin-top: 0.5rem; }
.close__mid { margin-top: 3.5rem; margin-bottom: 3rem; }
.team { display: flex; flex-direction: column; max-width: 560px; margin-left: auto; margin-right: auto; }
.team__row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--edge); }
.team__row:last-child { border-bottom: 1px solid var(--edge); }
.team__name { color: var(--text); font-weight: 600; }
.team__role { color: var(--muted); text-align: right; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; align-self: center; }
.team__row--link { text-decoration: none; align-items: center; }
.team__row--link .team__ext { width: 12px; height: 12px; color: var(--muted); transition: color 150ms ease; }
.team__row--link:hover .team__name, .team__row--link:focus-visible .team__name { color: var(--proof); }
.team__row--link:hover .team__ext, .team__row--link:focus-visible .team__ext { color: var(--proof); }

/* ── screenshot walkthrough (named tabs, self-advancing) ───────────────── */
.shots { margin-top: 3.5rem; }
.shots__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-bottom: 0; }
.shots__tab {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem;
  padding: 0.95rem 1.1rem 0;
  background: var(--surface); color: var(--muted);
  border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase;
  transition: color 160ms ease, background-color 160ms ease;
}
.shots__tab:hover { color: var(--text); background: var(--raised); }
.shots__tab[aria-selected='true'] { color: var(--text); background: var(--raised); }
.shots__tab-label { display: block; }
/* the dwell line: a 2px rail per tab, filled by the active tab's timer */
.shots__rail { display: block; height: 2px; background: var(--edge); overflow: hidden; }
.shots__fill { display: block; height: 100%; width: 100%; background: var(--proof); transform: scaleX(0); transform-origin: left center; }
/* The fill is paused until the figure is actually on screen, so the line never
   runs down while nobody is looking at it. */
.shots__tab[aria-selected='true'] .shots__fill {
  animation: shots-dwell var(--shots-dwell, 15000ms) linear forwards;
  animation-play-state: paused;
}
.shots--running .shots__tab[aria-selected='true'] .shots__fill { animation-play-state: running; }
.shots--held .shots__fill { animation: none !important; transform: scaleX(0); }
.shots--held .shots__tab[aria-selected='true'] .shots__fill { transform: scaleX(1); }
@keyframes shots-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.shots__frame { position: relative; border: 1px solid var(--edge); background: var(--raised); }
.shots__panel img { display: block; width: 100%; height: auto; }
.shots__panel { animation: shots-fade 320ms ease both; }
.shots__chip { position: absolute; top: 12px; right: 12px; }
.shots__cap { margin: 0.85rem 0 0; }
@keyframes shots-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .shots__panel { animation: none; }
  /* no self-advance under reduced motion: the fill sits complete and main.js
     stops the timer, so the reader drives entirely by click */
  .shots__tab[aria-selected='true'] .shots__fill { animation: none; transform: scaleX(1); }
}
@media (max-width: 700px) {
  .shots__tabs { grid-template-columns: repeat(2, 1fr); }
  .shots__tab { padding: 0.8rem 0.85rem 0; font-size: 0.6875rem; }
}

.problem__lead { max-width: 62ch; }

/* ── verifier room: what the room contains ─────────────────────────────── */
/* receipt and manifest side by side, the pair centred as one block */
.roomshow {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  max-width: 1100px;
  margin: 3rem auto 0;
  text-align: left;
}
@media (max-width: 860px) { .roomshow { grid-template-columns: 1fr; } }
.roomshow .receipt-wrap { margin-top: 0; }
.roomlist { margin-top: 0; }
.roomlist__head { margin-bottom: 0.35rem; }
.roomlist__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 0.85rem 0; border-top: 1px solid var(--edge);
}
.roomlist__row:last-child { border-bottom: 1px solid var(--edge); }
.roomlist__label { color: var(--text); font-weight: 600; flex-shrink: 0; }
.roomlist__value { color: var(--muted); text-align: right; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
@media (max-width: 560px) {
  .roomlist__row { flex-direction: column; gap: 0.3rem; }
  .roomlist__value { text-align: left; }
}

/* ── policy control: the steps a change passes through ─────────────────── */
/* The same label-and-value rows the verifier room uses, on their own rather
   than paired with a receipt, so they get their own measure instead of the
   1320px plate width. */
/* `.plate > .reveal` caps direct children at 1320px, so this has to match its
   specificity to win the measure back. */
.plate > .steplist { max-width: 640px; margin: 3rem auto 0; }

.cloud__note { max-width: 68ch; }
.cloud__note:first-of-type { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); }
.close__cta { margin-top: 4rem; border-top: 1px solid var(--edge); padding-top: 2.75rem; }
.close__intro { color: var(--text); font-size: 1.1rem; margin: 0 auto 0.6rem; max-width: 48ch; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin-right: auto; margin-left: 0; }
.faq__item { border-top: 1px solid var(--edge); }
.faq__item:last-child { border-bottom: 1px solid var(--edge); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  min-height: 46px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__marker { width: 13px; height: 13px; flex-shrink: 0; color: var(--proof); transition: transform 200ms linear; }
details[open] .faq__marker { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.4rem; color: var(--muted); max-width: 60ch; font-size: 0.9375rem; }

/* ── footer ────────────────────────────────────────────────────────────── */
.footer {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  max-width: 1320px; margin: 0 auto;
  padding: 1.75rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--edge);
}
.footer__mark { font-family: var(--font-display); font-variation-settings: 'wdth' 72, 'wght' 800; font-size: 14px; color: var(--muted); text-transform: none; letter-spacing: -0.01em; }
.footer__links a { color: var(--muted); text-decoration: none; transition: color 200ms linear; }
.footer__links a:hover { color: var(--proof); }

/* ── scroll reveal — 200ms fade, small rise, nothing else ──────────────── */
.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 200ms linear, transform 200ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ── the sync: one orchestrated load sequence, ~1.6s ───────────────────── */
.js .hero__copy .eyebrow { clip-path: inset(0 100% 0 0); }
.js .sync .hero__copy .eyebrow { animation: typeIn 420ms steps(28, end) 260ms forwards; }
@keyframes typeIn { to { clip-path: inset(0 0 0 0); } }

.js .hero__copy .display > span { display: block; overflow: hidden; }
.js .hero__copy .display > span > i { display: block; font-style: normal; transform: translateY(102%); }
.js .sync .hero__copy .display > span:nth-child(1) > i { animation: hardUp 380ms var(--ease) 520ms forwards; }
.js .sync .hero__copy .display > span:nth-child(2) > i { animation: hardUp 380ms var(--ease) 610ms forwards; }
@keyframes hardUp { to { transform: translateY(0); } }

.js .hero__copy .subhead { opacity: 0; }
.js .sync .hero__copy .subhead { animation: fadeIn 240ms linear 900ms forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* nodes pin onto the plate one at a time, then the connector traces */
.js .hero-nodes .node { opacity: 0; }
.js .sync .hero-nodes .node:nth-of-type(1) { animation: fadeIn 200ms linear 700ms forwards; }
.js .sync .hero-nodes .node:nth-of-type(2) { animation: fadeIn 200ms linear 840ms forwards; }
.js .sync .hero-nodes .node:nth-of-type(3) { animation: fadeIn 200ms linear 980ms forwards; }
.js .hero-nodes .connector { stroke-dashoffset: var(--len); stroke-dasharray: var(--len); opacity: 0; }
.js .sync .hero-nodes .connector { animation: trace 620ms linear 1020ms forwards; }
@keyframes trace { 0% { opacity: 0.55; stroke-dashoffset: var(--len); } 100% { opacity: 0.55; stroke-dashoffset: 0; } }

/* the verifier-room receipt runs its sweep on scroll; main.js sets it there */
@keyframes sweep { to { transform: scaleX(1); } }

/* ── reduced motion: no sync, no scan line, final states rendered ──────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scanline::before { animation: none; display: none; }
  .js .hero__copy .eyebrow { clip-path: none; animation: none; }
  .js .hero__copy .display > span > i { transform: none; animation: none; }
  .js .hero__copy .subhead { opacity: 1; animation: none; }
  .js .hero-nodes .node { opacity: 1; animation: none; }
  .js .hero-nodes .connector { stroke-dashoffset: 0; opacity: 0.55; animation: none; }
  .receipt__progress { display: none; }
  .receipt__result, .receipt__disclosure { opacity: 1; }
  .gate[data-armed] .gate__row { opacity: 1; transform: none; }
  .gate__row.is-shown .gate__chip--rust { animation: none; }
  .strike-target::after { transform: scaleX(1); transition: none; }
  .row--strike { background: rgba(var(--deny-rgb), 0.09); }
  .link-slide::after, .nav__link::after, .faq__marker, .btn { transition: none; }
}