/* tradevoir.com, direction B: "the instrument". A dark, precise ground; one luminous signal and one
   warning colour used sparingly; Geist for words, Geist Mono for anything that is data. Sections
   alternate between dense proof panels and quiet statements, one full-bleed diagram, and a light
   closing band so the page ends in contrast. Self-hosted fonts only (see fonts/ and _headers); no
   inline style attributes, because the CSP refuses them. functions/enquiry.js renders its failure
   page against this file too, so the .note, .kicker and .btn-quiet rules at the end must stay. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Ground: near-black with a blue cast, four steps of lift. */
  --ink-0: #060a10;
  --ink-1: #0a111a;
  --ink-2: #0f1824;
  --ink-3: #162234;
  --line: #1b2a3d;
  --line-2: #2b4059;

  /* Text. Against --ink-0: text 16:1, text-2 9:1, text-3 6:1. Against --ink-3 text-3 is 5:1,
     which is the lightest ground it is allowed to sit on. */
  --text: #e8eef6;
  --text-2: #a6b6ca;
  --text-3: #8093ab;

  /* The one signal, and the one warning. Signal is for what is true and held: the record, a lit
     fill, the primary action. Warning is for a disagreement and nothing else. */
  --signal: #5df2c4;
  --signal-2: #2db894;
  --signal-wash: rgba(93, 242, 196, 0.1);
  --warn: #ffb547;

  --buy: #7db0ff;
  --sell: #ff9a86;
  --bad: #ff8585;
  --sess-0: #5df2c4;
  --sess-1: #6f9bff;
  --sess-2: #b79bff;
  --sess-3: #7fd6ea;

  /* The light closing band. Ink on paper 17:1; teal on paper 5.6:1. */
  --paper: #f3f6fa;
  --paper-ink: #09111a;
  --paper-text-2: #43546a;
  --paper-line: #c4cfdd;
  --paper-signal: #00755a;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-micro: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --t-h3: 1.3125rem;
  --t-statement: clamp(2.125rem, 1.2rem + 3.6vw, 4.25rem);
  --t-display: clamp(2.5rem, 1.1rem + 5.6vw, 5.25rem);

  --air: clamp(5.5rem, 3rem + 9vw, 11rem);
  --dense: clamp(3.5rem, 2rem + 5vw, 6rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.003em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--signal); color: var(--ink-0); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
* { scrollbar-color: var(--line-2) var(--ink-1); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }
.on-paper :focus-visible { outline-color: var(--paper-ink); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--signal); color: var(--ink-0); padding: 0.6rem 1rem; border-radius: 6px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.wide { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: clamp(0.5rem, 0.2rem + 1.4vw, 1.75rem); }

/* ---------- header ---------- */
.site-head { position: relative; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
/* The mark and wordmark are one image (logo.svg), which plays its reveal once as it loads and is
   still under prefers-reduced-motion; the animation lives in the file, where the CSP cannot reach it.
   Height is set here and the width follows from the image's own ratio. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img, .brand svg { display: block; height: 1.875rem; width: auto; }
/* logo-hover.js swaps the image for an inline SVG of the same size once the reveal has played; its
   trail streams off the V's left edge, past the box, so the box must not clip it. */
.brand svg { overflow: visible; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 2.2vw, 2.25rem); }
.site-nav a { text-decoration: none; font-size: var(--t-small); color: var(--text-2); padding: 0.5rem 0; }
.site-nav a:hover { color: var(--text); }
.site-nav .btn { color: var(--text); padding: 0.6rem 1.25rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0.6rem 1.25rem;
  border-radius: 8px; border: 1px solid var(--line-2);
  font: inherit; font-size: var(--t-small); font-weight: 550; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  background: transparent; color: var(--text);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { border-color: var(--text-2); background: var(--ink-3); }
.btn-primary { background: var(--signal); border-color: var(--signal); color: var(--ink-0); font-weight: 600; }
.btn-primary:hover { background: #8bf7d6; border-color: #8bf7d6; color: var(--ink-0); }
.btn-text { border-color: transparent; padding-inline: 0.25rem; color: var(--text-2); }
.btn-text:hover { background: transparent; border-color: transparent; color: var(--text); }
.btn svg { flex: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  background:
    radial-gradient(60% 50% at 50% 78%, rgba(93, 242, 196, 0.085), transparent 70%),
    radial-gradient(40% 40% at 88% 8%, rgba(111, 155, 255, 0.07), transparent 70%);
}
/* A faint measuring grid fading out downward: the page's one texture. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120, 160, 210, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 160, 210, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero-top { padding-top: clamp(1.5rem, 0.5rem + 3.5vw, 3.5rem); }
h1 {
  font-size: var(--t-display); line-height: 0.99; font-weight: 500; letter-spacing: -0.038em;
  max-width: 17.5em; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--signal); }
.hero-sub {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.lede { font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem); line-height: 1.5; color: var(--text-2); max-width: 64ch; text-wrap: pretty; }
.lede b { color: var(--text); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.hero-app { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }

/* ---------- the drawn product ---------- */
.app {
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 40px 90px -30px rgba(0,0,0,0.85), 0 12px 30px -12px rgba(0,0,0,0.6);
  overflow: hidden;
  font-size: 0.8125rem; line-height: 1.4;
  color: var(--text);
}
.app .dim { color: var(--text-3); }
.title-bar {
  display: flex; align-items: center; gap: 0.75rem; padding: 0 0.9rem; height: 2.5rem;
  background: var(--ink-2); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden;
}
/* The portal's top bar draws its V (mark.svg, 16px tall) then the word, 16px apart (App.tsx .title-bar__brand). */
.tb-brand { display: inline-flex; align-items: center; gap: 1rem; font-weight: 600; letter-spacing: 0.16em; font-size: 0.75rem; }
.tb-brand img { display: block; flex-shrink: 0; }
.tb-sep { width: 1px; height: 1rem; background: var(--line-2); }
.tb-product { color: var(--text-2); }
.tb-crumb { color: var(--text-3); padding-left: 0.75rem; border-left: 1px solid var(--line-2); }
.tb-spacer { flex: 1; }
.env-badge {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.18rem 0.55rem; border-radius: 4px;
  color: var(--buy); background: rgba(125, 176, 255, 0.1); border: 1px solid rgba(125, 176, 255, 0.35);
}
.env-badge--sample { color: var(--text-2); background: transparent; border-color: var(--line-2); }
.tb-tenant { color: var(--text-3); }
.tb-tenant b { color: var(--text-2); font-weight: 500; }

.app-body { display: flex; min-height: 0; }
.activity-bar {
  flex: none; width: 3rem; padding: 0.5rem 0; background: var(--ink-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.ab-group { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.activity-bar i { position: relative; display: grid; place-items: center; width: 3rem; height: 2.4rem; color: var(--text-3); font-style: normal; }
.activity-bar i.on { color: var(--text); }
.activity-bar i.on::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--signal); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 0.25rem; padding: 0 0.75rem; border-bottom: 1px solid var(--line); background: var(--ink-1); }
.tab { padding: 0.55rem 0.8rem 0.5rem; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 0.5rem; align-items: baseline; }
.tab--on { color: var(--text); border-bottom-color: var(--signal); }
.tab .n { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.tab--on .n { color: var(--text-2); }

.filter-bar { display: flex; align-items: flex-end; gap: 1rem; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.filter-bar__group { display: flex; flex-direction: column; gap: 0.25rem; }
.micro-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ctl { min-width: 5.2rem; padding: 0.28rem 0.6rem; border: 1px solid var(--line-2); border-radius: 5px; background: var(--ink-0); font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }
.ctl.sel::after { content: ""; display: inline-block; width: 0.38rem; height: 0.38rem; margin-left: 0.55rem; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-0.12rem) rotate(45deg); }
.mini-btn { padding: 0.28rem 0.7rem; border: 1px solid var(--line-2); border-radius: 5px; color: var(--text-2); background: var(--ink-2); font-size: 0.75rem; white-space: nowrap; }

.dg__toolbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--line); }
.dg__spacer { flex: 1; }
.dg__scroll { overflow: hidden; position: relative; }
.dg__scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; pointer-events: none; background: linear-gradient(to right, transparent, var(--ink-1)); }
.dg__inner { min-width: 100%; width: max-content; }
.dg__row { display: flex; align-items: center; height: 1.75rem; border-bottom: 1px solid rgba(27, 42, 61, 0.7); }
.dg__row--head { height: 1.9rem; background: var(--ink-2); }
.dg__row--filter { height: 1.9rem; background: var(--ink-1); }
.dg__hcell, .dg__fcell, .dg__cell { flex: 0 0 auto; padding: 0 0.6rem; white-space: nowrap; overflow: hidden; }
.dg__hcell { font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.dg__fcell { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }
.dg__cell { font-family: var(--mono); font-size: 0.75rem; }
.dg__cell--r { text-align: right; }
.dg__row--sess-0 { box-shadow: inset 3px 0 0 var(--sess-0); }
.dg__row--sess-1 { box-shadow: inset 3px 0 0 var(--sess-1); }
.dg__row--sess-2 { box-shadow: inset 3px 0 0 var(--sess-2); }
.dg__row--sess-3 { box-shadow: inset 3px 0 0 var(--sess-3); }
.dg__body .dg__row:hover { background: rgba(255, 255, 255, 0.025); }
.side-buy { color: var(--buy); }
.side-sell { color: var(--sell); }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; letter-spacing: 0.02em; }
.pill__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.pill--warn { color: var(--warn); }
.pill--bad { color: var(--bad); }

.c-seq { width: 4.6rem; } .c-cap { width: 7.6rem; } .c-venue { width: 3.6rem; } .c-sym { width: 5.6rem; }
.c-side { width: 3.8rem; } .c-qty { width: 3.6rem; } .c-unit { width: 4.6rem; } .c-px { width: 5.8rem; }
.c-ccy { width: 3.4rem; } .c-trd { width: 5.4rem; } .c-acct { width: 5.4rem; } .c-clr { width: 6.6rem; } .c-state { width: 7.2rem; }
.c-cap, .c-seq { color: var(--text-2); }

.status-bar {
  display: flex; align-items: center; gap: 1.4rem; height: 1.9rem; padding: 0 0.9rem;
  background: var(--ink-2); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; overflow: hidden;
}
.status-bar__spacer { flex: 1; }
.status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.5rem; }
.status-dot--ok { background: var(--signal); }
.status-dot--warn { background: var(--warn); }
.st-swap { display: inline-grid; }
.st-swap > * { grid-area: 1 / 1; }
.st-run { display: none; }

/* The hero's import run: a row at a time, then COMPLETE. An import, not a live feed. With motion
   off the panel is simply full and reads COMPLETE. */
@media (prefers-reduced-motion: no-preference) {
  .hero-app .dg__body .dg__row { animation: row-in 0.6s var(--ease) both; }
  /* One delay per row, written out: the CSP refuses the inline style attribute a custom property
     would need. */
  .hero-app .dg__body .dg__row:nth-child(1) { animation-delay: 0.35s; }
  .hero-app .dg__body .dg__row:nth-child(2) { animation-delay: 0.55s; }
  .hero-app .dg__body .dg__row:nth-child(3) { animation-delay: 0.75s; }
  .hero-app .dg__body .dg__row:nth-child(4) { animation-delay: 0.95s; }
  .hero-app .dg__body .dg__row:nth-child(5) { animation-delay: 1.15s; }
  .hero-app .dg__body .dg__row:nth-child(6) { animation-delay: 1.35s; }
  .hero-app .dg__body .dg__row:nth-child(7) { animation-delay: 1.55s; }
  .hero-app .dg__body .dg__row:nth-child(8) { animation-delay: 1.75s; }
  .hero-app .dg__body .dg__row:nth-child(9) { animation-delay: 1.95s; }
  .hero-app .dg__body .dg__row:nth-child(10) { animation-delay: 2.15s; }
  .hero-app .dg__body .dg__row:nth-child(11) { animation-delay: 2.35s; }
  .hero-app .dg__body .dg__row:nth-child(12) { animation-delay: 2.55s; }
  .hero-app .dg__body .dg__row:nth-child(13) { animation-delay: 2.75s; }
  .hero-app .dg__body .dg__row:nth-child(14) { animation-delay: 2.95s; }
  .st-run { display: inline; animation: fade-out 0.01s linear 3.6s forwards; }
  .st-done { opacity: 0; animation: fade-in 0.4s linear 3.7s forwards; }
  @keyframes row-in { from { opacity: 0; transform: translateY(6px); background: var(--signal-wash); } to { opacity: 1; transform: none; } }
  @keyframes fade-out { to { opacity: 0; visibility: hidden; } }
  @keyframes fade-in { to { opacity: 1; } }
}

/* ---------- the problem: a quiet statement ---------- */
.quiet-sec { padding-block: var(--air); }
h2 { font-size: var(--t-statement); line-height: 1.04; font-weight: 450; letter-spacing: -0.034em; text-wrap: balance; }
h2 em { font-style: normal; color: var(--signal); }
.problem-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.problem-grid h2 { grid-column: 1 / span 10; }
.problem-prose { grid-column: 6 / span 7; margin-top: clamp(3rem, 2rem + 4vw, 6rem); display: grid; gap: 1.5rem; color: var(--text-2); font-size: var(--t-lead); line-height: 1.55; }
.problem-prose p { max-width: 38ch; text-wrap: pretty; }
.problem-prose p:nth-child(2) { margin-left: 4ch; }
.problem-prose strong { color: var(--text); font-weight: 500; }

/* The day as one line: the slip is cheap, the finding is late, and the span between them is the
   position you were trading against. */
.timeline { margin-top: clamp(3.5rem, 2rem + 5vw, 7rem); }
.tl-track { position: relative; display: grid; grid-template-columns: 1fr 2.4fr 1fr; align-items: center; height: 3.5rem; }
.tl-seg { height: 0; border-top: 1px solid var(--line-2); }
.tl-seg--bad { height: 0.875rem; background: repeating-linear-gradient(135deg, var(--warn) 0 2px, transparent 2px 7px); border-top: 1px solid var(--warn); border-bottom: 1px solid var(--warn); }
.tl-tick { position: absolute; top: 50%; width: 2px; height: 2rem; background: var(--text); transform: translateY(-50%); }
.tl-tick--a { left: calc(100% / 4.4); }
.tl-tick--b { left: calc(100% / 4.4 * 3.4); }
.tl-labels { display: grid; grid-template-columns: 1fr 2.4fr 1fr; margin-top: 0.75rem; font-size: var(--t-small); color: var(--text-2); line-height: 1.4; }
.tl-labels .l-a { text-align: right; padding-right: 0.9rem; }
.tl-labels .l-m { text-align: center; color: var(--warn); }
.tl-labels .l-b { padding-left: 0.9rem; }
.tl-labels b { display: block; color: var(--text); font-weight: 500; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.15rem; }
.tl-labels .l-m b { color: var(--warn); }

/* ---------- the full-bleed moment ---------- */
.converge { position: relative; isolation: isolate; padding-block: var(--dense); background: var(--ink-1); border-block: 1px solid var(--line); overflow: hidden; overflow: clip; }
.converge::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120, 160, 210, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 160, 210, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
}
.converge-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: end; }
.converge-head p { color: var(--text-2); font-size: var(--t-body); max-width: 44ch; text-wrap: pretty; }

.cv { --row: 3.25rem; --lab: 2.5rem; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 1.1fr) minmax(0, 0.7fr); align-items: stretch; }
.cv-src { display: grid; grid-template-rows: var(--lab) var(--row) var(--row) var(--lab) var(--row) var(--row) var(--row); }
.cv-group { align-self: end; padding-bottom: 0.5rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.cv-strip { display: flex; align-items: center; gap: clamp(0.5rem, 0.2rem + 1.4vw, 1.5rem); border-top: 1px solid var(--line); }
.cv-name { flex: 0 0 auto; width: clamp(4rem, 3rem + 3vw, 6.5rem); font-size: var(--t-small); color: var(--text); }
.marks { display: flex; gap: clamp(2px, 0.1rem + 0.35vw, 7px); flex: 1 1 auto; min-width: 0; }
.marks i { flex: 0 1 1.1rem; max-width: 1.1rem; aspect-ratio: 1; min-width: 5px; border: 1px solid #46607f; border-radius: 2px; background: transparent; }
.marks i.on { background: var(--signal); border-color: var(--signal); }
.cv-n { flex: 0 0 auto; width: 1.5rem; text-align: right; font-family: var(--mono); font-size: var(--t-small); color: var(--text-2); }
.cv-lines { position: relative; min-width: 0; }
.cv-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cv-lines path { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-opacity: 0.5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .cv-lines path.flow { stroke-dasharray: 3 16; stroke-opacity: 0.95; animation: flow 3.4s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -57; } }
}
.cv-rec {
  align-self: center; display: flex; flex-direction: column; gap: 1rem; justify-content: center;
  padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  background: var(--ink-0); border: 1px solid var(--signal); border-radius: 10px;
  box-shadow: 0 0 0 4px var(--signal-wash), 0 30px 60px -30px rgba(0,0,0,0.8);
}
.cv-rec .marks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; flex: none; }
.cv-rec .marks i { max-width: none; flex: none; min-width: 0; }
.cv-rec-n { font-family: var(--mono); font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; color: var(--text); }
.cv-rec-l { font-size: var(--t-small); color: var(--text-2); line-height: 1.4; }
.cv-rec-l b { color: var(--signal); font-weight: 500; }
.converge-foot { margin-top: 2rem; font-size: var(--t-small); color: var(--text-3); max-width: 70ch; }

/* ---------- where the trades go: a dense proof panel ---------- */
.dense { padding-block: var(--dense); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 1.5rem clamp(2rem, 6vw, 7rem); align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.sec-head h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); }
.sec-head p { color: var(--text-2); max-width: 46ch; text-wrap: pretty; }

.rig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-1); overflow: hidden; }
.rig-col { display: flex; flex-direction: column; min-width: 0; }
.rig-col + .rig-col { border-left: 1px solid var(--line); }
.rig-bar { display: flex; justify-content: space-between; align-items: center; height: 2.5rem; padding: 0 1rem; background: var(--ink-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.rig-bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); }
.rig-art { padding: 1.25rem 1rem; min-height: 15rem; background: var(--ink-0); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.rig-text { padding: 1.4rem 1.25rem 1.6rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.rig-text p { color: var(--text-2); font-size: 1rem; text-wrap: pretty; }
.wire { margin-top: auto; padding-top: 0.5rem; font-family: var(--mono); font-size: var(--t-small); color: var(--signal); }

.xl-ribbon { display: flex; gap: 0.9rem; align-items: center; padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); color: var(--text-3); }
.xl-ribbon .on { color: var(--text); border-bottom: 2px solid var(--signal); padding-bottom: 0.2rem; margin-bottom: -0.7rem; }
.xl-refresh { margin-left: auto; padding: 0.2rem 0.6rem; border: 1px solid var(--signal); color: var(--signal); border-radius: 4px; }
.xl-grid { display: grid; grid-template-columns: 1.8rem repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.xl-grid span { padding: 0.28rem 0.45rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.xl-grid .h { background: var(--ink-2); color: var(--text-3); text-align: center; }
.xl-grid .k { color: var(--signal); }
.xl-grid span:nth-child(5n) { border-right: 0; }

.ap-req { padding: 0.5rem 0.7rem; border: 1px solid var(--line-2); border-radius: 5px; color: var(--text); background: var(--ink-1); }
.ap-req b { color: var(--signal); font-weight: 500; margin-right: 0.6rem; }
.ap-seq { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.ap-seq div { display: flex; justify-content: space-between; padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--line); }
.ap-seq div:last-child { border-bottom: 0; background: var(--signal-wash); color: var(--text); }
.ap-note { color: var(--text-3); }

.pu-flow { display: grid; gap: 0.5rem; }
.pu-src, .pu-dest { padding: 0.45rem 0.7rem; border: 1px solid var(--line-2); border-radius: 5px; background: var(--ink-1); color: var(--text); }
.pu-src { border-color: var(--signal); }
.pu-mid { display: flex; align-items: center; gap: 0.6rem; color: var(--text-3); padding-left: 0.7rem; }
.pu-dests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.pu-dests .pu-dest { text-align: center; padding-inline: 0.2rem; font-size: 0.6875rem; }
.pu-fmt { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pu-fmt span { padding: 0.12rem 0.5rem; border: 1px solid var(--line-2); border-radius: 99px; color: var(--text-2); }
.rig-note { margin-top: 1.25rem; color: var(--text-3); font-size: var(--t-small); max-width: 70ch; text-wrap: pretty; }

/* ---------- the ladder: stepped cards and a risk meter ---------- */
.ladder-sec { padding-block: var(--air); }
.ladder-head { max-width: 52rem; }
.ladder-head h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); }
.ladder-head p { margin-top: 1.5rem; color: var(--text-2); font-size: var(--t-lead); max-width: 44ch; text-wrap: pretty; }

.ladder { margin-top: clamp(2.5rem, 2rem + 3vw, 5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.rung { display: flex; flex-direction: column; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 12px; padding: 1.25rem; gap: 1rem; }
/* The stair: each rung stands higher than the last, because each carries more risk. */
.rung:nth-child(1) { margin-top: 7.5rem; }
.rung:nth-child(2) { margin-top: 5rem; }
.rung:nth-child(3) { margin-top: 2.5rem; }
.rung:nth-child(4) { margin-top: 0; border-color: rgba(255, 181, 71, 0.45); }
.rung--live { border-color: var(--signal-2); background: linear-gradient(180deg, rgba(93,242,196,0.07), var(--ink-1) 55%); }
.rung-step { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mini { border: 1px solid var(--line-2); border-radius: 8px; background: var(--ink-0); overflow: hidden; font-family: var(--mono); font-size: 0.75rem; }
.mini-head { display: flex; justify-content: space-between; padding: 0.45rem 0.65rem; background: var(--ink-2); border-bottom: 1px solid var(--line); color: var(--text-2); }
.mini-ok { color: var(--signal); }
.mini-rows li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--line); }
.mini-rows li:last-child { border-bottom: 0; }
.mini-k { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-2); }
.mini-k::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 1px; border: 1px solid var(--text-3); }
.mini-k.bad::before { background: var(--warn); border-color: var(--warn); }
.mini-k.live::before { background: var(--signal); border-color: var(--signal); }
.mini-k.plain::before { display: none; }
.mini-v { color: var(--text); }

.status { align-self: flex-start; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.28rem 0.6rem; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text-2); }
.status-now { color: var(--ink-0); background: var(--signal); border-color: var(--signal); font-weight: 600; }
.rung p { color: var(--text-2); font-size: 1rem; text-wrap: pretty; }

.risk { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.risk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: var(--t-small); }
.risk-k { color: var(--text-3); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; }
.risk-v { color: var(--text); font-weight: 500; text-align: right; }
.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 0.6rem; }
.meter i { height: 0.5rem; border-radius: 1px; background: var(--ink-3); }
.meter i.on { background: var(--signal); }
.meter.hot i.on { background: var(--warn); }
.meter-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); }
.meter-scale span:nth-child(2) { text-align: center; }
.meter-scale span:nth-child(3) { text-align: right; }
.ladder-note { margin-top: 2.5rem; max-width: 64ch; color: var(--text-3); font-size: var(--t-small); text-wrap: pretty; }

/* ---------- breaks: a ledger ---------- */
.breaks-sec { padding-block: var(--dense); background: var(--ink-1); border-block: 1px solid var(--line); }
.breaks-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.breaks-grid h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.breaks-grid .lead { margin-top: 1.5rem; color: var(--text-2); font-size: var(--t-lead); max-width: 34ch; text-wrap: pretty; }
.ledger { border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-0); overflow: hidden; }
.ledger-head { display: flex; justify-content: space-between; padding: 0.7rem 1.25rem; background: var(--ink-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ledger li { display: grid; grid-template-columns: minmax(11rem, 0.85fr) minmax(0, 2fr); gap: 1rem 1.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger li:last-child { border-bottom: 0; }
.kind { font-weight: 500; color: var(--text); display: flex; gap: 0.7rem; align-items: baseline; }
.kind::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--warn); }
.kind--bad::before { background: var(--bad); }
.kind--ok::before { background: var(--signal); }
.means { color: var(--text-2); font-size: 1rem; text-wrap: pretty; }

/* The headline acted out: the Only in Voir answer, as the sentence Voir writes in its place of a red
   cell. Static, this is just the finished sentence; the red cell lives only in the scroll motion at
   the end of this file. Every word is the ledger's. */
.brk-fig { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 30rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-0); overflow: hidden; overflow: clip; }
.brk-head { display: flex; justify-content: space-between; padding: 0.7rem 1.25rem; background: var(--ink-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.brk-stage { position: relative; padding: 1.25rem; }
.brk-grid { display: none; }
.brk-card { position: relative; display: grid; border: 1px solid var(--line-2); border-radius: 8px; background: var(--ink-1); overflow: hidden; }
.brk-cell { display: flex; align-items: center; height: 2.75rem; padding-inline: 1rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-small); color: var(--text); }
.brk-card .kind { padding: 0.9rem 1rem 0.35rem; }
.brk-card .means { padding: 0 1rem 1rem; }

/* ---------- evidence: statement, chain, facts ---------- */
.evidence { padding-block: var(--air) var(--dense); }
.evidence h2 { max-width: 15em; }
.evidence-prose { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 6vw, 6rem); color: var(--text-2); font-size: var(--t-lead); line-height: 1.55; max-width: 62rem; }
.evidence-prose p { text-wrap: pretty; }
.evidence-prose strong { color: var(--text); font-weight: 500; }

.chain { margin-top: clamp(3rem, 2rem + 4vw, 6rem); border: 1px solid var(--line-2); border-radius: 12px; background: var(--ink-1); padding: clamp(1.25rem, 1rem + 1.6vw, 2.25rem); }
.chain-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chain-link { position: relative; padding: 1rem 1.1rem; background: var(--ink-0); border: 1px solid var(--line-2); border-radius: 8px; font-family: var(--mono); font-size: 0.8125rem; display: grid; gap: 0.35rem; margin-right: 2.25rem; }
.chain-link:last-child { margin-right: 0; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
.chain-link:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 2.25rem; height: 1px; background: var(--signal-2); }
.chain-link:not(:last-child)::before { content: ""; position: absolute; left: calc(100% + 1.4rem); top: calc(50% - 3px); width: 6px; height: 6px; border-top: 1px solid var(--signal-2); border-right: 1px solid var(--signal-2); transform: rotate(45deg); }
.chain-seq { color: var(--text-3); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; }
.chain-row { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--text-3); }
.chain-row b { font-weight: 400; color: var(--text); }
.chain-tag { position: absolute; top: -0.7rem; right: 0.8rem; background: var(--signal); color: var(--ink-0); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 3px; font-weight: 600; }
.chain-anchor { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-2); font-size: var(--t-small); color: var(--text-2); }
.chain-anchor svg { flex: none; color: var(--signal); }
.chain-note { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

.facts { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); }
.fact { padding-block: 1.6rem; border-top: 1px solid var(--line-2); display: grid; gap: 0.6rem; align-content: start; }
.fact p { color: var(--text-2); font-size: 1rem; max-width: 46ch; text-wrap: pretty; }

/* ---------- who it is for ---------- */
.who { padding-block: var(--air); border-top: 1px solid var(--line); }
.who h2 { max-width: 12em; }
.who-lead { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(2rem, 6vw, 6rem); max-width: 64rem; color: var(--text-2); font-size: var(--t-lead); line-height: 1.5; }
.who-lead p { text-wrap: pretty; }
.roles { margin-top: clamp(3rem, 2rem + 4vw, 6rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--text-3); }
.role { padding: 1.5rem 1.5rem 0 0; display: grid; gap: 0.75rem; align-content: start; }
.role + .role { padding-left: 1.5rem; border-left: 1px solid var(--line-2); }
.role h3 { font-size: var(--t-small); font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.role .big { font-size: clamp(1.375rem, 1rem + 1.1vw, 1.875rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--text); font-weight: 450; text-wrap: balance; }
.role p:last-child { color: var(--text-2); font-size: 1rem; text-wrap: pretty; }

/* ---------- the closing band: light, so the page ends in contrast ---------- */
.on-paper { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.close { padding-block: clamp(4.5rem, 3rem + 7vw, 9rem) clamp(3rem, 2rem + 4vw, 5rem); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.close h2 { font-size: clamp(2.5rem, 1.3rem + 5vw, 5.5rem); line-height: 0.98; letter-spacing: -0.042em; font-weight: 500; }
.close h2 em { color: var(--paper-signal); }
.contact-pitch p { margin-top: 1.5rem; color: var(--paper-text-2); font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.contact-pitch .contact-cta { margin-top: 2rem; }
.contact-pitch .contact-alt { font-size: var(--t-body); }
.contact-alt a { color: var(--paper-ink); font-weight: 500; text-decoration-color: var(--paper-signal); text-decoration-thickness: 2px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; background: #fff; border: 1px solid var(--paper-line); border-radius: 12px; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: 0 30px 60px -40px rgba(9, 17, 26, 0.35); }
.field { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-small); font-weight: 500; color: var(--paper-ink); }
.opt { font-weight: 400; color: var(--paper-text-2); margin-left: 0.4rem; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--paper-ink); background: var(--paper); border: 1px solid #7a8da6; border-radius: 8px; padding: 0.7rem 0.8rem; min-height: 2.75rem; }
.field textarea { resize: vertical; }
.field input::placeholder { color: #5b6c82; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8396ad; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 1px; border-color: var(--paper-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-ink { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); font-weight: 600; }
.btn-ink:hover { background: var(--paper-signal); border-color: var(--paper-signal); color: #fff; }
.form .btn { grid-column: 1 / -1; min-height: 3.25rem; font-size: 1rem; }
.form-note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--paper-text-2); }

.site-foot { padding-block: 0 2.25rem; font-size: var(--t-small); color: var(--paper-text-2); }
.foot-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--paper-line); }
.site-foot nav { display: flex; gap: 1.5rem; }
.site-foot a { color: var(--paper-ink); }
.foot-id { display: inline-flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.foot-id img { display: block; height: 1.5rem; width: auto; }

/* ---------- the standalone note pages: thanks.html, and the failure page functions/enquiry.js renders ---------- */
.note { padding-block: clamp(4rem, 2rem + 8vw, 9rem); }
body:has(> .note) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .note) > .note { flex: 1; }
.note .kicker { margin-bottom: 1.25rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.note h1 { font-size: var(--t-statement); line-height: 1.02; max-width: 14em; }
.note .lede { margin-top: 1.5rem; }
.note .lede a { color: var(--signal); }
.note .actions { margin-top: 2rem; }
.btn-quiet { border-color: var(--line-2); }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rung:nth-child(n) { margin-top: 0; }
  .rig { grid-template-columns: 1fr; }
  .rig-col + .rig-col { border-left: 0; border-top: 1px solid var(--line); }
  .rig-art { min-height: 0; }
  .hide-tight { display: none !important; }
}
@media (max-width: 820px) {
  .hide-narrow { display: none; }
  .hero-sub { grid-template-columns: 1fr; }
  .problem-grid h2, .problem-prose { grid-column: 1 / -1; }
  .problem-prose p:nth-child(2) { margin-left: 0; }
  .converge-head, .sec-head, .breaks-grid, .contact, .evidence-prose, .who-lead { grid-template-columns: 1fr; }
  .facts, .roles { grid-template-columns: 1fr; }
  .role { padding-right: 0; }
  .role + .role { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); margin-top: 1.5rem; }
  .chain-links { grid-template-columns: 1fr; gap: 1.75rem; }
  .chain-link { margin-right: 0; }
  .chain-link:not(:last-child)::after { left: 50%; top: 100%; width: 1px; height: 1.75rem; }
  .chain-link:not(:last-child)::before { left: calc(50% - 3px); top: calc(100% + 1rem); transform: rotate(135deg); }
  .ledger li { grid-template-columns: 1fr; gap: 0.35rem; }
  .form { grid-template-columns: 1fr; }
  .site-nav { gap: 1rem; }
}
@media (max-width: 640px) {
  .ladder { grid-template-columns: 1fr; }
  .rung:nth-child(2) { margin-left: 0.75rem; } .rung:nth-child(3) { margin-left: 1.5rem; } .rung:nth-child(4) { margin-left: 2.25rem; }
  .activity-bar { display: none; }
  .title-bar .tb-crumb, .title-bar .tb-tenant, .title-bar .tb-product, .title-bar .tb-sep, .title-bar .tb-spacer { display: none; }
  .title-bar { height: auto; flex-wrap: wrap; padding: 0.55rem 0.75rem; gap: 0.4rem 0.6rem; }
  .tl-labels { font-size: var(--t-micro); }
  .tl-labels .l-a { padding-right: 0.5rem; } .tl-labels .l-b { padding-left: 0.5rem; }
  .c-opt { display: none; }
  .cv { grid-template-columns: minmax(0, 1fr) 2rem 5.75rem; }
  .cv-name { width: 4.6rem; white-space: nowrap; font-size: 0.8125rem; }
  .cv-n { width: 1rem; }
  .cv-strip { gap: 0.4rem; }
  .marks i { min-width: 4px; }
  .cv-rec { padding: 0.65rem; gap: 0.6rem; }
  .cv-rec-l { font-size: var(--t-micro); }
  .cv-rec .marks { gap: 3px; }
  .status-bar { gap: 0.9rem; }
  .actions .btn-primary { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .brand img, .brand svg { height: 1.625rem; }
}

/* ---------- scroll motion ----------
   Everything below is CSS scroll-driven animation (animation-timeline), and nothing here is script
   (the CSP allows one file of it, and this is not it). Two gates, both of which must pass: the
   visitor has not asked for less motion, and the browser can do it. Outside them none of this
   exists, so Firefox today, a visitor who has asked for reduced motion, print and a link-preview
   robot all get the page exactly as written above, fully visible.

   These are scrubbed by scroll, not played on a clock: an animation moves as far as the visitor
   has scrolled, so a keyframe percentage is a place on the page, never a number of milliseconds.
   Each starts from the state the page already has and ends on it (the keyframes name only the
   "from"), so a half-played one is a dimmer or a lower version of the real thing, never a different
   thing, and the sequences finish while their figure is still well inside the screen.

   A view timeline measures against the nearest scroll container, and overflow: hidden makes one,
   so nothing that contains an animated figure may use it: .converge and .brk-fig use overflow: clip. */
@property --on { syntax: "<number>"; inherits: true; initial-value: 1; }

@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Reveals: a heading, its lead and its figure rise a little and fade in as they enter. The
       range is capped so a tall block (a column of prose, a ledger) is at full strength after
       fourteen rem of scroll, not after all of its height. `translate`, not `transform`, because a
       few of these already have one. */
    main h2,
    .problem-prose, .timeline,
    .converge-head > div, .cv,
    .sec-head p, .rig, .rig-note,
    .ladder-head p,
    .breaks-grid .lead, .brk-fig, .ledger,
    .evidence-prose, .chain, .fact,
    .who-lead, .role,
    .contact-pitch p, .form {
      animation: m-rise var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry min(100%, 14rem);
    }
    @keyframes m-rise { from { opacity: 0; translate: 0 1.25rem; } }

    /* "Every fill, every clearer, one record": fill j lights in the exchange that holds it and in the
       clearing firm that holds it at the same moment, left to right (the same twelve fills sit at
       the same positions in both groupings), then the lines join, then the record's own twelve
       light in turn, and the count arrives last. The dashed drift on the lines is untouched. */
    .cv { view-timeline: --cv; }
    .cv .marks i:nth-child(1) { --j: 0; }  .cv .marks i:nth-child(2) { --j: 1; }
    .cv .marks i:nth-child(3) { --j: 2; }  .cv .marks i:nth-child(4) { --j: 3; }
    .cv .marks i:nth-child(5) { --j: 4; }  .cv .marks i:nth-child(6) { --j: 5; }
    .cv .marks i:nth-child(7) { --j: 6; }  .cv .marks i:nth-child(8) { --j: 7; }
    .cv .marks i:nth-child(9) { --j: 8; }  .cv .marks i:nth-child(10) { --j: 9; }
    .cv .marks i:nth-child(11) { --j: 10; } .cv .marks i:nth-child(12) { --j: 11; }
    .cv-src .marks i.on { --a: 8; --s: 1; --d: 2; }
    .cv-rec .marks i { --a: 22; --s: 0.65; --d: 1.6; }
    .cv-src .marks i.on, .cv-rec .marks i {
      animation: m-light var(--ease) both;
      animation-timeline: --cv;
      animation-range: cover calc((var(--a) + var(--j) * var(--s)) * 1%) cover calc((var(--a) + var(--j) * var(--s) + var(--d)) * 1%);
    }
    @keyframes m-light { from { background-color: transparent; border-color: #46607f; } }
    .cv-lines, .cv-rec-n { animation: m-fade var(--ease) both; animation-timeline: --cv; }
    .cv-lines { animation-range: cover 17% cover 26%; }
    .cv-rec-n { animation-name: m-arrive; animation-range: cover 30% cover 36%; }
    @keyframes m-fade { from { opacity: 0; } }
    @keyframes m-arrive { from { opacity: 0; translate: 0 0.5rem; } }

    /* The four steps, one after another, with a line drawn along the top of each as it lights. The
       step is lit as a whole (its screen, its label, its text), so the "after exchange certification"
       label never leaves the screen it belongs to. --on runs 0 to 1 on the step and everything
       inside it is a function of it. Four across, one timeline paces them; stacked or in pairs,
       each step is paced by its own entrance, the second of a pair a little behind the first. */
    .ladder { view-timeline: --ladder; }
    .rung:nth-child(1) { --n: 0; } .rung:nth-child(2) { --n: 1; } .rung:nth-child(3) { --n: 2; } .rung:nth-child(4) { --n: 3; }
    .rung {
      position: relative;
      animation: m-on var(--ease) both;
      animation-timeline: --ladder;
      animation-range: cover calc((3 + var(--n) * 4.5) * 1%) cover calc((10 + var(--n) * 4.5) * 1%);
      opacity: calc(0.35 + 0.65 * var(--on));
      translate: 0 calc((1 - var(--on)) * 1rem);
    }
    .rung::before {
      content: ""; position: absolute; top: -1px; left: 12px; right: 12px; height: 2px; border-radius: 2px;
      background: var(--signal); transform-origin: left center; scale: var(--on) 1; pointer-events: none;
    }
    .rung:nth-child(4)::before { background: var(--warn); }
    @keyframes m-on { from { --on: 0; } to { --on: 1; } }
    @media (max-width: 1100px) {
      .rung:nth-child(odd) { --c: 0; } .rung:nth-child(even) { --c: 1; }
      .rung {
        animation-timeline: view();
        animation-range: entry calc(var(--c) * 3rem) entry calc(10rem + var(--c) * 3rem);
      }
    }
    @media (max-width: 640px) { .rung:nth-child(n) { --c: 0; } }

    /* The chain: each entry appears, then the line to the next is drawn and meets its arrowhead, one
       link at a time, and the head last. The note that the digests are illustrative is not part of
       this and is never hidden. */
    .chain { view-timeline: --chain; }
    .chain-link:nth-child(1) { --k: 0; } .chain-link:nth-child(2) { --k: 1; }
    .chain-link:nth-child(3) { --k: 2; } .chain-link:nth-child(4) { --k: 3; }
    .chain-link {
      animation: m-on var(--ease) both;
      animation-timeline: --chain;
      animation-range: cover calc((12 + var(--k) * 6) * 1%) cover calc((22 + var(--k) * 6) * 1%);
      opacity: clamp(0.3, calc(0.3 + 1.4 * var(--on)), 1);
    }
    .chain-link:not(:last-child)::after { transform-origin: left center; scale: clamp(0, calc((var(--on) - 0.5) * 2), 1) 1; }
    .chain-link:not(:last-child)::before { opacity: clamp(0, calc((var(--on) - 0.8) * 5), 1); }
    @media (max-width: 820px) {
      .chain-link { animation-timeline: view(); animation-range: entry 0% entry 100%; }
      .chain-link:not(:last-child)::after { transform-origin: center top; scale: 1 clamp(0, calc((var(--on) - 0.5) * 2), 1); }
    }

    /* A break is a sentence, not a red cell. The card begins as the one flagged cell of a faint
       sheet, then opens out of it into the sentence, and the red drains out of the cell. */
    .brk-stage { view-timeline: --brk; }
    .brk-grid {
      display: block; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(to right, var(--line-2) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
      background-size: 7.5rem 2.75rem; background-position: 1.25rem 1.25rem;
    }
    .brk-grid, .brk-card, .brk-cell, .brk-card .kind, .brk-card .means {
      animation-timing-function: var(--ease); animation-fill-mode: both;
      animation-timeline: --brk; animation-range: cover 14% cover 46%;
    }
    .brk-grid { animation-name: m-brk-grid; }
    .brk-card { animation-name: m-brk-open; }
    .brk-cell { animation-name: m-brk-cell; }
    .brk-card .kind, .brk-card .means { animation-name: m-brk-words; }
    @keyframes m-brk-open {
      0%, 20% { clip-path: inset(0 calc(100% - 7.5rem) calc(100% - 2.75rem) 0 round 4px); }
      60%, 100% { clip-path: inset(0 0 0 0 round 8px); }
    }
    @keyframes m-brk-cell { 0%, 55% { background-color: var(--bad); color: var(--ink-0); } }
    @keyframes m-brk-words { 0%, 40% { opacity: 0; } }
    @keyframes m-brk-grid { 0%, 40% { opacity: 1; } 80%, 100% { opacity: 0; } }
  }
}

/* ===== Hero grid lines and hover states (site/README.md, "Hero grid lines and hover") ===== */
.hero-flow { display: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  .hero-flow {
    display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
  }
}
/* Each line runs along the 64px grid of .hero::before, turning at grid corners: across then down,
   down then across, and both ways. offset-rotate turns the bar at each corner so its tail follows. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (offset-path: path("M 0 0 H 1")) {
    .hero-flow i {
      position: absolute; top: 0; left: 0; display: block; opacity: 0;
      height: 1px; width: 140px; background: linear-gradient(to right, transparent, var(--c, rgba(93, 242, 196, 0.7)));
      offset-rotate: auto; offset-anchor: 100% 50%;
      animation: hero-flow var(--d) linear var(--delay) infinite;
    }
    .hero-flow i:nth-child(1)  { offset-path: path("M -200 128 H 576 V 1100");          --d: 7s;   --delay: -1s; }
    .hero-flow i:nth-child(2)  { offset-path: path("M 1700 320 H 896 V 1100");          --d: 8s;   --delay: -5s; --c: rgba(111, 155, 255, 0.7); }
    .hero-flow i:nth-child(3)  { offset-path: path("M 192 -200 V 448 H 1700");          --d: 7.5s; --delay: -3s; }
    .hero-flow i:nth-child(4)  { offset-path: path("M 1216 -200 V 576 H -200");         --d: 9s;   --delay: -7s; --c: rgba(111, 155, 255, 0.7); }
    .hero-flow i:nth-child(5)  { offset-path: path("M -200 704 H 1700");                --d: 6s;   --delay: -2s; }
    .hero-flow i:nth-child(6)  { offset-path: path("M 1700 192 H -200");                --d: 6.5s; --delay: -4s; --c: rgba(111, 155, 255, 0.7); }
    .hero-flow i:nth-child(7)  { offset-path: path("M 1344 -200 V 1100");               --d: 6s;   --delay: -0.5s; }
    .hero-flow i:nth-child(8)  { offset-path: path("M 64 -200 V 256 H 320 V 1100");     --d: 7s;   --delay: -6s; }
    .hero-flow i:nth-child(9)  { offset-path: path("M -200 448 H 128 V 1100");          --d: 8.5s; --delay: -2.5s; --c: rgba(111, 155, 255, 0.7); }
    .hero-flow i:nth-child(10) { offset-path: path("M 320 -200 V 128 H 1700");          --d: 9.5s; --delay: -8s; }
    @keyframes hero-flow {
      0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 55% { opacity: 1; }
      60% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; }
    }
  }
}

/* Hover: only for a mouse, so a tap never leaves a card stuck lit. Lifts are for things you can press. */
@media (hover: hover) {
  .site-nav a:not(.btn) { position: relative; }
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--signal);
    transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
  }
  .site-nav a:not(.btn):hover::after { transform: scaleX(1); }

  .btn { transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.25s var(--ease), translate 0.25s var(--ease); }
  .btn-primary:hover { box-shadow: 0 0 0 4px rgba(93, 242, 196, 0.12), 0 10px 28px -8px rgba(93, 242, 196, 0.45); }
  .btn svg { transition: translate 0.25s var(--ease); }
  .btn-text:hover svg { translate: 0 2px; }

  .rig-col { transition: background-color 0.2s var(--ease); }
  .rig-col:hover { background: var(--ink-2); }
  .rig-col .rig-bar { transition: color 0.2s var(--ease); }
  .rig-col:hover .rig-bar { color: var(--text-2); }

  .rung { transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease); }
  .rung:hover { border-color: #3d5878; box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.8); }
  .rung--live:hover, .rung:nth-child(1):hover { border-color: var(--signal); }
  .rung:nth-child(4):hover { border-color: rgba(255, 181, 71, 0.8); }

  .ledger li { transition: background-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
  .ledger li:hover { background: rgba(255, 255, 255, 0.025); box-shadow: inset 2px 0 0 var(--warn); }

  .fact { transition: border-color 0.2s var(--ease); }
  .fact:hover { border-top-color: var(--signal-2); }

  .role + .role { transition: border-color 0.2s var(--ease); }
  .role:hover + .role, .role + .role:hover { border-left-color: var(--signal-2); }

  main p a, .note a { transition: color 0.15s var(--ease), text-underline-offset 0.15s var(--ease); }
  main p a:hover { color: var(--signal); text-underline-offset: 0.3em; }
  .on-paper p a:hover { color: var(--paper-signal); }
  .site-foot a { transition: color 0.15s var(--ease); }
  .site-foot a:hover { color: var(--paper-signal); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .btn-text:hover svg { translate: none; }
  .site-nav a:not(.btn)::after { transition: none; }
}