/* Jevmaxxing v4
   One dark world. The veil made the whole desk a night room, so every page now runs on the same
   ink ground the veil already used: #0B0B0C under the page, #131315 under a panel, hairlines
   instead of boxes, mono for every number, one pink accent, red only where WARDEN kills.
   The token names did not change, only their values: --paper is the ground and --ink is the type,
   which is why every component came across without a second copy of itself.
   Sections: 1 tokens  2 base  3 type  4 nav  5 chips and buttons  6 surfaces and tables
   7 data blocks  8 hero  9 loop  10 walk  11 jev  12 token  13 desk page  14 scan page
   15 receipts  16 build  17 docs and terms  18 footer  19 motion  20 responsive
   21 v2 identity: the lockup, the agent glyphs, the Jev band, the desk's book
   22 responsive, v2 pieces  23 space reserved before data  24 the accent button
   25 v4 hero  26 v4 the veil  27 v4 the desk  28 v4 the rail  29 v4 the read band
   30 v4 responsive  31 v4 space reserved */

/* Metric matched fallbacks, so the swap from the fallback to Geist does not reflow the page.
   Measured on this machine at 100px: Geist is 5.1 percent wider than the system sans and Geist
   Mono is 9.1 percent wider than the system mono, which is exactly the shift the layout-shift
   observer was catching at font swap time. size-adjust closes the width gap and the ascent and
   descent overrides pin the line box, so the fallback occupies the same space as the real face. */
@font-face {
  font-family: 'Geist Metrics';
  font-weight: 400;
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 105.1%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
/* The fallback has no real 500 or 600, so one size-adjust cannot cover all three weights: Geist
   gets wider with weight and the fallback does not. Measured per weight and declared per weight. */
@font-face {
  font-family: 'Geist Metrics';
  font-weight: 500;
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 107.6%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Metrics';
  font-weight: 600 900;
  src: local('Segoe UI Semibold'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 106.7%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Mono Metrics';
  src: local('Consolas'), local('Menlo'), local('DejaVu Sans Mono');
  size-adjust: 109.1%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* 1 ------------------------------------------------------------------ tokens */
/* Measured against the ground they are used on, with the checker in qa/shots.mjs:
   ink #F3F3F0 17.7:1, muted #A3A3AB 7.9:1, pink text #FF5FB0 7.0:1, kill text #FF6B66 7.1:1,
   watch text #FFC94D 12.9:1, and ink on the pink fill 5.1:1, which is what lets the pink carry a
   button label. The raw pink #F0298F is a fill and a hairline, never small text. */
:root {
  --paper: #0B0B0C;
  --card: #131315;
  --ink: #F3F3F0;
  --muted: #A3A3AB;
  --line: #26262A;
  --line-soft: #1D1D21;
  --jev: #F0298F;
  --jev-ink: #FF5FB0;
  --kill: #E5322D;
  --kill-ink: #FF6B66;
  --amber: #F5B400;
  --amber-ink: #FFC94D;

  --r: 6px;
  --r-chip: 999px;
  --shadow: none;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --gut: 24px;
  --wrap: 1180px;

  --ui: 'Geist', 'Geist Metrics', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', 'Geist Mono Metrics', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 2 -------------------------------------------------------------------- base */
*, *::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(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01' 1;
  -webkit-font-smoothing: antialiased;
}

/* several components below set display, which would otherwise beat the hidden attribute */
[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
/* Grid and flex children default to min-width:auto, which lets a long mono string or a wide
   table push the whole page sideways even when the scroll container is right there. */
.hero-grid > *, .jev-grid > *, .walk-grid > *, .walk-steps > *, .token-grid > *,
.scan-grid > *, .scan-col > *, .step > *, .foot-in > *, .stats > *, .rail > *,
.launch-nums > *, .quote-out > *, .bar-row > *, .flags > li > *, .rcpt-head > * { min-width: 0; }
.tbl-scroll, .code, .panel, .card { max-width: 100%; }
.wrap--wide { max-width: 1340px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r);
}
.skip:focus { left: 12px; top: 12px; }

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

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

section { padding: 88px 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head p { color: var(--muted); margin: 12px 0 0; }

/* 3 -------------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.028em; line-height: 1.04; }
h1 { font-size: clamp(38px, 6.2vw, 72px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; }
h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0 0 16px; }
.lede { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 54ch; line-height: 1.5; }
.body { color: var(--muted); max-width: 64ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.agent { font-family: var(--mono); letter-spacing: .06em; font-weight: 500; }
.tick { font-family: var(--mono); letter-spacing: -.01em; }

/* 4 --------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 11, 12, .82);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand-mark {
  font-size: 18px; font-weight: 600; letter-spacing: -.035em;
  text-decoration: none; text-transform: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 22px; margin-left: 8px; }
.nav-links a {
  font-size: 14px; color: var(--muted); text-decoration: none;
  transition: color .2s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap;
}
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.live[data-state='live'] .dot { background: var(--jev); box-shadow: 0 0 0 3px rgba(240, 41, 143, .26); }
.live[data-state='live'] { color: var(--ink); }
.live[data-state='down'] .dot { background: var(--kill); }
@media (prefers-reduced-motion: no-preference) {
  .live[data-state='live'] .dot { animation: pulse 2.4s var(--ease) infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 5 ------------------------------------------------------- chips and buttons */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-chip); border: 1px solid var(--line);
  background: var(--card);
  padding: 3px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  white-space: nowrap;
}
.chip--clear { background: rgba(240, 41, 143, .15); border-color: rgba(240, 41, 143, .5); color: var(--jev-ink); }
.chip--watch { background: rgba(245, 180, 0, .13); border-color: rgba(245, 180, 0, .45); color: var(--amber-ink); }
.chip--kill  { background: rgba(229, 50, 45, .14); border-color: rgba(229, 50, 45, .5); color: var(--kill-ink); }
.chip--ink   { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip--quiet { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: var(--r-chip); padding: 11px 20px;
  font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn:active { transform: translateY(1px); }
.btn .arr {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11, 11, 12, .12); font-size: 11px; flex: none;
  transition: transform .22s var(--ease);
}
.btn:hover .arr { transform: translate(2px, -1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--card); border-color: var(--ink); }
.btn--ghost .arr { background: rgba(243, 243, 240, .1); }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--card); color: var(--muted); border-color: var(--line);
  cursor: not-allowed; pointer-events: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r-chip);
  padding: 6px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  cursor: pointer; color: var(--muted);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* 6 --------------------------------------------------- surfaces and tables */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.pad { padding: 22px; }
.pad-sm { padding: 16px; }

/* was an inverted block on the light world. On ink there is nothing to invert into, so it is a
   raised panel: one step up from the ground, one hairline, the accent on its links. */
.ink-block {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px;
}
.ink-block .label { color: var(--muted); }
.ink-block a { color: var(--jev-ink); }
.jev-text { color: var(--jev-ink); }
.kill-text { color: var(--kill-ink); }
.watch-text { color: var(--amber-ink); }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.r, .tbl th.r { text-align: right; padding-right: 0; }
/* position:relative so a visually hidden caption inside the table cannot escape this clip and
   add phantom width to the document. */
.tbl-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll .tbl { min-width: 760px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 14px; }
.kv dt { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.kv dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

.code {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  padding: 18px; overflow-x: auto; white-space: pre; margin: 0;
  color: var(--ink);
}
.code .c { color: var(--muted); }
.code .k { color: var(--jev-ink); }

.note {
  border-left: 2px solid var(--amber); background: rgba(245, 180, 0, .09);
  padding: 14px 18px; border-radius: 0 var(--r) var(--r) 0; font-size: 14px; color: var(--ink);
}
.note.kill { border-left-color: var(--kill); background: rgba(229, 50, 45, .1); }

.state {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  display: flex; align-items: center; gap: 9px; padding: 14px 0;
}
.state::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none;
}
.state[data-kind='down']::before { background: var(--kill); }
.state[data-kind='ok']::before { background: var(--jev); }

.skel { background: var(--line-soft); border-radius: 3px; color: transparent; display: inline-block; min-width: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: breathe 1.5s var(--ease) infinite; }
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* 7 ---------------------------------------------------------- data blocks */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stat { padding: 20px 22px 22px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .label { display: block; margin-bottom: 8px; }
.stat .n { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(28px, 3.1vw, 40px); letter-spacing: -.035em; line-height: 1; }
.stat .n small { font-size: .45em; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.stat .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 7px; }

.bar-row { display: grid; grid-template-columns: 78px 1fr 52px; gap: 12px; align-items: center; margin-bottom: 9px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-row .label { margin: 0; }
.bar { height: 6px; background: var(--line-soft); border-radius: var(--r-chip); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--jev); border-radius: var(--r-chip); width: 0; transition: width .5s var(--ease); }
.bar.is-kill i { background: var(--kill); }
.bar.is-watch i { background: var(--amber); }
.bar-row .v { font-family: var(--mono); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.flags { list-style: none; margin: 0; padding: 0; }
.flags li {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; align-items: start;
}
.flags li:last-child { border-bottom: 0; }
.flags .lv { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.flags .lv[data-l='kill'] { color: var(--kill-ink); }
.flags .lv[data-l='warn'] { color: var(--amber-ink); }
.flags .lv[data-l='info'] { color: var(--jev-ink); }

/* 8 -------------------------------------------------------------------- hero */
.hero { padding: 64px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 44px; }
.hero .lede { margin: 0 0 28px; }

.hero-desk { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.hero-desk header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.hero-desk .body-pad { padding: 20px 18px; }
.launch-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.launch-top .sym { font-family: var(--mono); font-size: 24px; letter-spacing: -.02em; font-weight: 500; }
.launch-top .nm { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.launch-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.launch-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.launch-nums div .label { display: block; margin-bottom: 5px; }
.launch-nums div .n { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.verdict-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; }
.verdict-strip .vb { font-family: var(--mono); font-size: 13px; }

/* 9 -------------------------------------------------------------------- loop */
.rail { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
/* The cell rule is the gate from the mark, stood on its edge: a hairline you can walk past, and
   the one you are on lights pink. WARDEN's lights red, because that is the cell that ends a trade. */
.rail-cell { padding: 24px 20px 26px 20px; position: relative; }
.rail-cell::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--line);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.rail-cell:hover::before, .rail-cell:focus-within::before { background: var(--jev); box-shadow: 1px 0 0 var(--jev); }
.rail-cell[data-agent='WARDEN']:hover::before, .rail-cell[data-agent='WARDEN']:focus-within::before { background: var(--kill); box-shadow: 1px 0 0 var(--kill); }
.rail-cell .ix { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.rail-cell .rail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail-cell h3 { margin: 16px 0 8px; font-family: var(--mono); letter-spacing: .06em; font-size: 15px; }
.rail-cell p { font-size: 13.5px; color: var(--muted); margin: 0; }
.rail-cell[data-agent='WARDEN'] .ix, .rail-cell[data-agent='WARDEN'] h3 { color: var(--kill-ink); }
.rail-cell[data-agent='WARDEN'] .glyph { color: var(--kill-ink); }


/* 10 -------------------------------------------------------------------- walk */
.walk { position: relative; }
.walk-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.walk-left { position: sticky; top: 104px; }
.walk-progress { list-style: none; margin: 28px 0 0; padding: 0; border-left: 1px solid var(--line); }
.walk-progress li {
  padding: 9px 0 9px 18px; margin-left: -1px; border-left: 2px solid transparent;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--muted);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.walk-progress li { display: flex; align-items: center; gap: 9px; }
.walk-progress li.on { color: var(--ink); border-left-color: var(--jev); }
/* the step the reader is on lights its own glyph, so the rail says which agent is running */
.walk-progress li .glyph { color: var(--line); transition: color .3s var(--ease); }
.walk-progress li.on .glyph { color: var(--jev-ink); }
.walk-progress li.on .glyph[data-a='WARDEN'] { color: var(--kill-ink); }
.walk-step .agent-tag .glyph { color: var(--line); }
.walk-steps { display: grid; gap: 18px; }
.walk-step { padding: 24px; }
.walk-step h3 { margin-bottom: 10px; }
.walk-step .agent-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); display: block; margin-bottom: 12px; }
.walk-step p { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; }
.walk-step .out { font-family: var(--mono); font-size: 13px; border-top: 1px solid var(--line-soft); padding-top: 13px; overflow-wrap: anywhere; }

/* 11 --------------------------------------------------------------------- jev */
.jev-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 48px; align-items: start; }
.policy { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.policy th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.policy td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.policy td:last-child { padding-right: 0; color: var(--muted); }
.policy tr:last-child td { border-bottom: 0; }

/* 12 ------------------------------------------------------------------- token */
.token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.flow div { background: var(--card); padding: 22px; }
.flow .label { display: block; margin-bottom: 10px; }
.flow p { margin: 0; font-size: 14px; color: var(--muted); }
.flow strong { display: block; font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }

.ca-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px dashed var(--line); border-radius: var(--r-chip);
  padding: 9px 16px; font-family: var(--mono); font-size: 13px; color: var(--muted);
  background: var(--card); overflow-wrap: anywhere;
}
.ca-pill.is-live { border-style: solid; border-color: var(--ink); color: var(--ink); }

/* 13 --------------------------------------------------------------- desk page */
.page-head { padding: 44px 0 26px; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); }
.page-head .lede { margin-top: 14px; }
.page-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: 20px; }

.d-sym { font-family: var(--mono); font-weight: 500; }
.d-nm { color: var(--muted); font-size: 12.5px; display: block; overflow-wrap: anywhere; max-width: 24ch; }
.d-age { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.row-kill td:first-child { box-shadow: inset 2px 0 0 var(--kill); }
tr[hidden] { display: none; }

/* 14 --------------------------------------------------------------- scan page */
.scan-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: 10px 13px; font-family: var(--mono); font-size: 14px; min-width: 0;
}
.field input:focus-visible { border-color: var(--ink); }
.field .help { font-size: 12px; color: var(--muted); font-family: var(--ui); }
.field .err { font-size: 12.5px; color: var(--kill-ink); font-family: var(--ui); }
.field--grow { flex: 1 1 380px; }

.scan-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: 24px; align-items: start; }
.scan-col { display: grid; gap: 24px; }
/* padding:0 because the page level `section` rule would otherwise pad these panels, which are
   sections for the outline, not bands of the page. */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 0; }
.panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--line); background: var(--paper);
  border-radius: var(--r) var(--r) 0 0;
}
.panel > header h2, .panel > header h3 { font-size: 13px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; color: var(--muted); }
.panel .in { padding: 20px; }

.scan-id { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.scan-id .sym { font-family: var(--mono); font-size: 28px; letter-spacing: -.02em; font-weight: 500; }
.scan-id .nm { color: var(--muted); overflow-wrap: anywhere; }

.watchlist { display: grid; gap: 10px; }
.watchlist .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.wtag {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  border-radius: var(--r-chip); padding: 4px 6px 4px 11px; font-family: var(--mono); font-size: 11.5px; background: var(--paper);
}
.wtag button { border: 0; background: none; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px 4px; border-radius: 50%; }
.wtag button:hover { color: var(--kill-ink); }

.quote-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.quote-out div .label { display: block; margin-bottom: 5px; }
.quote-out div .n { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.tx-line { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; margin-top: 14px; }
.tx-line a { color: var(--jev-ink); }
.tx-line.is-fail { color: var(--kill-ink); }
.tx-line.is-ok { color: var(--jev-ink); }

.verdict-big { font-family: var(--mono); font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.verdict-big[data-a='killed'] { color: var(--kill-ink); }
.verdict-big[data-a='buy'], .verdict-big[data-a='copy'] { color: var(--jev-ink); }
.reasons { margin: 16px 0 0; padding: 0; list-style: none; }
.reasons li { font-size: 14px; color: var(--muted); padding: 8px 0; border-top: 1px solid var(--line-soft); }

/* 15 ----------------------------------------------------------- receipts */
.rcpt { border-bottom: 1px solid var(--line-soft); }
.rcpt:last-child { border-bottom: 0; }
.rcpt-head {
  display: grid; grid-template-columns: 96px 1fr auto auto; gap: 16px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; padding: 15px 0; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.rcpt-head:hover .rcpt-sym { color: var(--jev-ink); }
.rcpt-time { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rcpt-sym { font-family: var(--mono); font-weight: 500; transition: color .2s var(--ease); }
.rcpt-conf { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rcpt-body { padding: 0 0 20px; display: none; }
.rcpt.open .rcpt-body { display: block; }
.rcpt:target .rcpt-sym { color: var(--jev-ink); }
.rcpt-strip { display: grid; gap: 0; }

/* 16 ---------------------------------------------------------------- build */
.steps { display: grid; gap: 28px; counter-reset: step; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step .ix { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 5px; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); max-width: 66ch; }
.file-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0;
  background: var(--paper); padding: 9px 16px;
}
.file-head .fn { font-family: var(--mono); font-size: 12.5px; }
.file-head a { font-family: var(--mono); font-size: 12px; color: var(--jev-ink); }
.file-head + .code { border-radius: 0 0 var(--r) var(--r); max-height: 340px; overflow: auto; }

/* 17 -------------------------------------------------------- docs and terms */
.prose { max-width: 72ch; }
.prose h2 { margin: 52px 0 16px; font-size: clamp(22px, 2.6vw, 28px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--jev-ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; color: var(--ink); overflow-wrap: anywhere; }
.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.doc-toc a { text-decoration: none; }

/* 18 ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--line); padding: 44px 0 56px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot .risk { font-size: 12.5px; color: var(--muted); max-width: 62ch; margin: 24px 0 0; }

/* 19 ------------------------------------------------------------------ motion */
/* `scripting: enabled` matters: without it a reader with JavaScript off would get a page of
   invisible sections, because nothing would ever add .in. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .rise.in { opacity: 1; transform: none; }
  .rise[data-d='1'] { transition-delay: .06s; }
  .rise[data-d='2'] { transition-delay: .12s; }
  .rise[data-d='3'] { transition-delay: .18s; }
  .rise[data-d='4'] { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 20 -------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero-grid, .jev-grid, .walk-grid, .token-grid, .scan-grid { grid-template-columns: 1fr; gap: 36px; }
  .walk-left { position: static; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail-cell { border-bottom: 1px solid var(--line); padding-right: 20px; }
  .rail-cell:nth-child(2n) { border-right: 0; }
  .rail-cell:last-child { border-bottom: 0; }
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line); padding-right: 16px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .jev-bar { grid-template-columns: 1fr; gap: 14px; }
  .nav-links { gap: 16px; }
}
@media (max-width: 720px) {
  :root { --gut: 16px; }
  section { padding: 60px 0; }
  .hero { padding: 40px 0 0; }
  .hero h1 { max-width: none; }
  .nav-in { height: 60px; gap: 12px; }
  .nav-links { gap: 14px; overflow-x: auto; scrollbar-width: none; padding-right: 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 13px; white-space: nowrap; }
  .live .txt { display: none; }
  .rail { grid-template-columns: 1fr; }
  .rail-cell { border-right: 0; padding: 18px 0; }
  .launch-nums { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; }
  .quote-out { grid-template-columns: 1fr; }
  .rcpt-head { grid-template-columns: 1fr auto; row-gap: 6px; }
  .rcpt-time { grid-column: 1 / -1; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step .ix { padding-top: 0; }
  .ink-block { padding: 20px; }
  .pad { padding: 18px; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

/* 21 ------------------------------------------------------------ v2 identity */
/* One idea runs through this section: the mark is a gate with two bars and one dot that got
   through, so every structural rule on the site is that gate. The loop rail's left hairline, the
   agent glyphs on the same 64 grid at the same stroke 7, the pink sweep on the live card and the
   three under the hero mark are the same geometry the data already lives in. Nothing decorative. */

/* the lockup, composed from the locked mark and live Geist so the wordmark is real text.
   Metrics from lab/README.md: mark ink height = cap height, so the 64 unit box renders at
   cap * 64/41, and the ink gap of 0.62 cap becomes a CSS gap of 0.474 cap once the mark box's
   own 6 units of right margin are subtracted. At 18px Geist 600 that is a 20px box and a 6px gap. */
.lockup { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.lockup-mark {
  width: 20px; height: 20px; flex: none;
  background: url(/img/mark-invert.svg) center / contain no-repeat;
}
.lockup-word {
  font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; color: var(--ink);
}
.brand-stack { display: grid; gap: 12px; justify-items: start; }
.brand-stack .foot-mark {
  width: 34px; height: 34px;
  background: url(/img/mark-invert.svg) center / contain no-repeat;
}

/* the five agent glyphs. Masks, not images, so a glyph takes ink, pink or kill red from the
   element it sits in, exactly like mark-current.svg does for the logo. */
.glyph {
  width: 24px; height: 24px; flex: none; display: inline-block;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.glyph--sm { width: 16px; height: 16px; }
.glyph[data-a='SCOUT']  { -webkit-mask-image: url(/img/agents/scout.svg);  mask-image: url(/img/agents/scout.svg); }
.glyph[data-a='LEDGER'] { -webkit-mask-image: url(/img/agents/ledger.svg); mask-image: url(/img/agents/ledger.svg); }
.glyph[data-a='PULSE']  { -webkit-mask-image: url(/img/agents/pulse.svg);  mask-image: url(/img/agents/pulse.svg); }
.glyph[data-a='FLUX']   { -webkit-mask-image: url(/img/agents/flux.svg);   mask-image: url(/img/agents/flux.svg); }
.glyph[data-a='WARDEN'] { -webkit-mask-image: url(/img/agents/warden.svg); mask-image: url(/img/agents/warden.svg); }
.glyph--quiet { color: var(--muted); }
.panel > header .ttl, .book-head .ttl { display: inline-flex; align-items: center; gap: 10px; }
.tbl th .glyph { vertical-align: -3px; margin-right: 7px; color: var(--muted); }

/* the fourth WARDEN state. A read the chain refused is not a clear read, so it is grey and the
   border is dashed: the shape of a chip with nothing measured inside it. */
.chip--unread { background: var(--paper); border-style: dashed; border-color: var(--line); color: var(--muted); }

/* hero ------------------------------------------------------------------- */
.hero-h1 { font-size: clamp(56px, 7.5vw, 104px); letter-spacing: -.03em; line-height: .96; max-width: 14ch; }
/* optically level with the card header rather than with its border */
.hero-say { padding-top: 10px; }

/* the live sweep. It runs only when /api/status reports the RPC live, so the one animated thing
   in the hero is a statement about the chain and not decoration. Transform and opacity only. */
.hero-desk::after {
  content: ''; position: absolute; top: -1px; left: 0; height: 2px; width: 34%;
  background: linear-gradient(90deg, transparent, var(--jev), transparent);
  opacity: 0; transform: translateX(-100%); pointer-events: none;
}
.hero-desk.is-live::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-desk.is-live::after { animation: sweep 3.6s var(--ease) infinite; }
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(295%); } }

/* the Jev band: one full width step up off the ground, the mark large on the right, the four
   question ids as mono chips and the measured round trip. */
.jev-band { background: var(--card); color: var(--ink); }
.jev-band-in {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
  padding: 44px 0;
}
.jev-band .who { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.jev-band .what { font-size: 17px; color: var(--ink); margin: 14px 0 0; max-width: 62ch; line-height: 1.5; }
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.q-chips .chip { background: transparent; border-color: var(--line); color: var(--ink); }
.jev-band .ms { font-family: var(--mono); font-size: 13px; color: var(--jev); margin-top: 18px; display: block; }
.jev-band-mark {
  width: 132px; height: 132px; flex: none;
  background: url(/img/mark-invert.svg) center / contain no-repeat;
}

/* the desk's own book ------------------------------------------------------ */
.book { border-top: 1px solid var(--line); }
.book-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; justify-content: space-between; padding: 22px 0 18px; }
.book-nums { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.book-nums div { padding: 18px 20px 20px 0; border-right: 1px solid var(--line); }
.book-nums div:last-child { border-right: 0; }
.book-nums .label { display: block; margin-bottom: 8px; }
.book-nums .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 26px; letter-spacing: -.03em; line-height: 1; display: block; }
.book-nums .n.up { color: var(--jev-ink); }
.book-nums .n.down { color: var(--kill-ink); }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; align-items: start; }
.book-grid h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 12px; }
.book-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.book-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.book-list li:last-child { border-bottom: 0; }
.book-list .sym { font-family: var(--mono); font-weight: 500; }
.book-list .why { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.book-list .mark { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.book-list .mark.up { color: var(--jev-ink); }
.book-list .mark.down { color: var(--kill-ink); }
.book-back { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.book-note { font-size: 13.5px; color: var(--muted); max-width: 74ch; margin: 18px 0 0; }
.book-grid > * { min-width: 0; }
.book-list > li > * { min-width: 0; }

/* receipts: the state Jev saw, as a two column read rather than raw JSON */
.rcpt-state { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: start; margin-top: 6px; }
.rcpt-state > * { min-width: 0; }
.rcpt-state .kv dt { padding-top: 2px; }
.rcpt-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.rcpt-bucket { color: var(--muted); }
.rcpt-more { display: flex; justify-content: center; padding: 22px 0 0; }
.rcpt-gate { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }

/* scan: the fill ticket states */
.snipe-wrap { display: grid; gap: 10px; margin-top: 22px; }
.snipe-why { font-size: 12.5px; color: var(--muted); font-family: var(--ui); }
.tx-line.is-wait { color: var(--muted); }
.tx-line .ok-tick { color: var(--jev-ink); font-family: var(--mono); margin-right: 6px; }

/* 22 --------------------------------------------------- responsive, v2 pieces */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .jev-band-in { grid-template-columns: 1fr; gap: 28px; }
  .jev-band-mark { width: 92px; height: 92px; }
  .book-grid { grid-template-columns: 1fr; gap: 26px; }
  .rail-cell { border-bottom: 1px solid var(--line); }
  .rail-cell:last-child { border-bottom: 0; }
}
@media (max-width: 860px) {
  .book-nums { grid-template-columns: repeat(2, 1fr); }
  .book-nums div:nth-child(2n) { border-right: 0; }
  .book-nums div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .rcpt-state { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .hero { padding: 36px 0 0; }
  .hero-h1 { font-size: clamp(40px, 12vw, 56px); max-width: none; }
  .hero-grid { margin-top: 28px; }
  .rail-cell { padding: 18px 0 20px 16px; }
  .jev-band-in { padding: 36px 0; }
  .jev-band .what { font-size: 15.5px; }
  .book-head { padding: 18px 0 14px; }
  .book-nums .n { font-size: 22px; }
}
@media (max-width: 420px) {
  .book-nums { grid-template-columns: 1fr; }
  .book-nums div { border-right: 0; border-bottom: 1px solid var(--line); }
  .book-nums div:last-child { border-bottom: 0; }
}

/* 23 ------------------------------------------- space reserved before data */
/* Every panel below fills from an endpoint. Without a floor the page reflows the moment the
   first response lands and everything under it jumps, so each async host holds the height its
   filled state takes. The floors are below the real content on every page that has data, so
   they cost nothing once it arrives and they stop the footer walking up the screen. */
#book-host { min-height: 664px; }          /* the book's filled height, measured at 1440 */
#log { min-height: 560px; }
#desk-body-wrap { min-height: 640px; }
.scan-col .panel .in { min-height: 120px; }
#warden-kv { min-height: 300px; }
#pulse-kv { min-height: 210px; }
.hero-desk .body-pad { min-height: 214px; }
@media (max-width: 1080px) { #book-host { min-height: 892px; } }
@media (max-width: 720px) {
  #book-host { min-height: 892px; }
  #log { min-height: 400px; }
  #desk-body-wrap { min-height: 480px; }
  #warden-kv { min-height: 260px; }
  .hero-desk .body-pad { min-height: 250px; }
}


/* 24 -------------------------------------------------- the accent button */
/* The pink is a 5.1:1 ground for ink, so a pink fill can carry an ink label. It is the veil's
   button and nothing else's: the desk's own primary is the light fill, which keeps one meaning
   per colour across every page. */
.btn--jev { background: var(--jev); border-color: var(--jev); color: #0B0B0C; }
.btn--jev:hover { background: #FF4FA4; border-color: #FF4FA4; }
.btn--jev .arr { background: rgba(11, 11, 12, .18); }

/* the small link that hands a token from the scan page to the veil */
.veil-jump {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: var(--jev-ink); text-decoration: none; border-bottom: 1px solid rgba(240, 41, 143, .4);
  padding-bottom: 1px; justify-self: start;
}
.veil-jump:hover { border-bottom-color: var(--jev-ink); }

/* 25 --------------------------------------------------------- v4 the hero */
/* Two columns: the sentence on the left, the object on the right. The object is the only thing
   above the fold that moves besides the live dot, and it moves because it is the mark itself
   swinging through the angles it still reads as a knot at, not because motion was available.
   The aureole is wider than the column it sits in, which is the point: it has to reach past the
   mark's silhouette. The section clips it so that reach never becomes page width. */
.hero-v4 { padding: 44px 0 80px; overflow: hidden; }
/* The mark is the hero object, so it takes the larger half of the row and the sentence is sized
   to the column that is left rather than to the viewport: at 1180 that column is 564px, and the
   longer of the two headline lines measures 500px in Geist 600 at the clamp's ceiling. */
.hero-v4-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 48px; align-items: center;
}
.hero-v4-in > * { min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero-h1 {
  font-size: clamp(56px, 5.6vw, 80px); letter-spacing: -.03em; line-height: .96;
  margin: 0; text-wrap: balance;
}
.hero-sub {
  font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.55; color: var(--muted);
  max-width: 50ch; margin: 26px 0 32px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* the stage. The aureole is the only gradient used as a surface anywhere on the site: a single
   pink radial, measured to sit about six per cent above the ground at its brightest, which lifts
   the mark's black limb off the ink without lighting the section. The two other gradients in this
   file are a fade mask on the phone nav and the 2px sweep that says the RPC is live. */
.hero-stage { position: relative; display: grid; justify-items: center; }
.hero-aureole {
  position: absolute; left: 50%; top: 42%; width: 118%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(240, 41, 143, .17) 0%, rgba(240, 41, 143, .07) 32%, rgba(240, 41, 143, 0) 62%);
}
.hero-turn {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1;
  transition: transform .5s var(--ease);
}
.hero-turn img, .hero-turn canvas { width: 100%; height: 100%; display: block; }
.hero-turn canvas { position: absolute; inset: 0; opacity: 0; }
/* The still and the swing are the same object at the same angle, so the canvas fades over the
   still rather than replacing it: no blank frame, no jump, and opacity is the only property. */
.hero-turn picture, .hero-turn canvas { transition: opacity .5s var(--ease); }
.hero-turn.is-playing picture { opacity: 0; }
.hero-turn.is-playing canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-turn, .hero-turn picture, .hero-turn canvas { transition: none; } }

/* The last three receipts, on the same hairline grammar as the loop rail, so the object sits on
   real data rather than on a plinth. The render carries its own margin, so the strip sits close
   under the mark rather than under the mark's box. */
.hero-rcpts-label { display: block; width: 100%; margin: 8px 0 0; }
.hero-rcpts {
  width: 100%; margin-top: 10px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line);
}
.hero-rcpts > * { min-width: 0; }
.hero-rcpt {
  position: relative; padding: 13px 14px 0; display: grid; gap: 5px; text-decoration: none;
}
.hero-rcpt:first-child { padding-left: 0; }
.hero-rcpt:last-child { padding-right: 0; }
.hero-rcpt + .hero-rcpt::before {
  content: ''; position: absolute; left: 0; top: 13px; bottom: 2px; width: 1px; background: var(--line);
}
.hero-rcpt .s { font-family: var(--mono); font-size: 14px; font-weight: 500; transition: color .2s var(--ease); }
.hero-rcpt .v { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hero-rcpt .p { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-rcpt[data-v='killed'] .v { color: var(--kill-ink); }
.hero-rcpt[data-v='buy'] .v, .hero-rcpt[data-v='copy'] .v { color: var(--jev-ink); }
.hero-rcpt:hover .s { color: var(--jev-ink); }
.hero-rcpts .state { grid-column: 1 / -1; padding: 13px 0 0; }

/* 26 ------------------------------------------------ v4 the veil, second */
/* The privacy layer is the second thing a reader meets, not the seventh. Three columns on one
   hairline: where the key is made, where the money comes from, what signs the fill. The middle
   column carries a live dry quote, so the road is priced on the page rather than described. */
.veil-home { padding: 84px 0 88px; }
.veil-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); margin-top: 38px;
}
.veil-cols > * { min-width: 0; }
.veil-col { position: relative; padding: 28px 28px 30px; }
.veil-col:first-child { padding-left: 0; }
.veil-col:last-child { padding-right: 0; }
.veil-col + .veil-col::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.veil-col::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--jev); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.veil-col:hover::after, .veil-col:focus-within::after { transform: scaleX(1); }
.veil-col .ix { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--jev-ink); }
.veil-col h3 { margin: 15px 0 10px; font-size: 17px; }
.veil-col p { margin: 0; font-size: 14px; color: var(--muted); }

/* the dry quote, drawn as a ticket. Every number on it came back from POST /api/veil/quote with
   dry true; nothing here is a worked example. */
.veil-ticket {
  margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); padding: 14px 16px 12px; display: grid; gap: 9px;
}
.veil-ticket .t-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.veil-ticket .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.veil-ticket .v { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.veil-ticket .v--accent { color: var(--jev-ink); }
.veil-ticket .t-foot {
  border-top: 1px solid var(--line-soft); padding-top: 9px; margin: 0;
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* what the chain still shows, said in plain words next to the button that opens the tool */
.veil-public {
  display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; gap: 22px 36px;
  align-items: start; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line);
}
.veil-public > * { min-width: 0; }
.veil-public ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.veil-public li {
  position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.veil-public li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--jev);
}
.veil-public li strong { color: var(--ink); font-weight: 500; }
.veil-note { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* 27 ------------------------------------------------ v4 the desk, live */
.desk-live { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; align-items: start; }
.desk-live > * { min-width: 0; }
.feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.feed-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.feed-tbl th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.feed-tbl td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.feed-tbl tbody tr:last-child td { border-bottom: 0; }
.feed-tbl td.r, .feed-tbl th.r { text-align: right; padding-right: 0; }
.feed-tbl .sym { font-family: var(--mono); font-weight: 500; }
.feed-tbl .nm { color: var(--muted); font-size: 12px; display: block; overflow-wrap: anywhere; max-width: 22ch; }
.feed-tbl .ageish { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.feed-tbl a { text-decoration: none; }
.feed-tbl tbody tr:hover .sym { color: var(--jev-ink); }
.feed-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.feed-scroll .feed-tbl { min-width: 520px; }
/* The four desk numbers now live in this band, under the launch card. The column is half the
   row, so they sit two by two rather than four across: at four across every label wrapped. */
.desk-live .stats { margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.desk-live .stat { border-bottom: 1px solid var(--line); padding-right: 18px; }
.desk-live .stat:nth-child(2n) { border-right: 0; }
.desk-live .stat:nth-last-child(-n+2) { border-bottom: 0; }

/* 28 ------------------------------------------------------ v4 the rail */
/* The road the veil settles through, and the regulated wrapper that holds it. Facts and dates
   only: no partnership is claimed anywhere on this site. */
.rail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 32px; }
.rail-facts > * { min-width: 0; }
.rail-fact { position: relative; padding: 26px 32px 6px 0; }
.rail-fact + .rail-fact { padding: 26px 0 6px 32px; }
.rail-fact + .rail-fact::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 6px; width: 1px; background: var(--line);
}
.rail-fact h3 { font-size: 17px; margin-bottom: 10px; }
.rail-fact p { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.rail-fact dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; font-size: 12.5px; }
.rail-fact dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.rail-fact dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.rail-src { margin: 22px 0 0; font-size: 12.5px; color: var(--muted); }

/* 29 ----------------------------------------------------- v4 the read band */
/* The walk and the typed answers were two sections doing one job. They are one now: the launch
   walked through the five agents, then the exact question block the API sends Jev. */
.read-types {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px;
  align-items: start; margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line);
}
.read-types > * { min-width: 0; }

/* 30 -------------------------------------------------- v4 responsive */
@media (max-width: 1180px) {
  .hero-v4-in { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; }
}
@media (max-width: 1080px) {
  .hero-v4 { padding: 40px 0 64px; }
  .hero-v4-in { grid-template-columns: 1fr; gap: 44px; }
  .hero-stage { justify-items: start; }
  .veil-cols { grid-template-columns: 1fr; border-top: 0; }
  .veil-col, .veil-col:first-child, .veil-col:last-child { padding: 24px 0 26px; border-top: 1px solid var(--line); }
  .veil-col + .veil-col::before { display: none; }
  .veil-public { grid-template-columns: 1fr; gap: 18px; }
  .veil-note { grid-column: 1; }
  .desk-live { grid-template-columns: 1fr; gap: 34px; }
  .rail-facts { grid-template-columns: 1fr; }
  .rail-fact, .rail-fact + .rail-fact { padding: 24px 0 8px; border-top: 1px solid var(--line); }
  .rail-fact:first-child { border-top: 0; }
  .rail-fact + .rail-fact::before { display: none; }
  .read-types { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; padding-top: 36px; }
}
@media (max-width: 720px) {
  .hero-v4 { padding: 28px 0 52px; }
  .hero-h1 { font-size: clamp(38px, 11.5vw, 52px); line-height: 1; }
  .hero-sub { margin: 20px 0 26px; }
  .hero-turn { width: min(360px, 100%); }
  .hero-stage { justify-items: stretch; }
  .hero-rcpt { padding: 12px 10px 0; }
  .veil-home { padding: 56px 0 60px; }
  .veil-ticket .t-row { flex-direction: column; gap: 3px; }
  .veil-ticket .v { text-align: left; }
}
/* The book is the tallest thing on this site that arrives after first paint, and it reflows
   hard as its two columns stack, so its floor is measured at each width the layout changes
   at: 664 at 1440, 892 from 1080 down, 1060 under 480 and 1284 under 420. */
@media (max-width: 480px) { #book-host { min-height: 1060px; } }
@media (max-width: 420px) {
  #book-host { min-height: 1284px; }
  .desk-live .stats { grid-template-columns: 1fr; }
  .desk-live .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .desk-live .stat:last-child { border-bottom: 0; }
  /* three stacked blocks would be a third of a phone screen, so each receipt becomes one row:
     symbol on the left, verdict beside it, confidence pushed to the right edge. */
  .hero-rcpts { grid-template-columns: 1fr; }
  .hero-rcpt, .hero-rcpt:first-child, .hero-rcpt:last-child {
    padding: 11px 0; border-top: 1px solid var(--line-soft);
    display: flex; align-items: baseline; gap: 10px;
  }
  .hero-rcpt:first-child { border-top: 0; }
  .hero-rcpt .p { margin-left: auto; }
  .hero-rcpt + .hero-rcpt::before { display: none; }
  #hero-rcpts { min-height: 134px; }
}

/* 31 ------------------------------ v4 space reserved before the data lands */
#hero-rcpts { min-height: 62px; }
#feed-preview { min-height: 392px; }
#veil-ticket { min-height: 150px; }
/* the scan page hides its state line once a scan lands, and on a page this tall that collapse
   was the whole of its layout shift. The slot holds the line's height whether it is there or not. */
.state-slot { min-height: 47px; }
@media (max-width: 1080px) { #feed-preview { min-height: 392px; } }
@media (max-width: 720px) { #feed-preview { min-height: 392px; } #veil-ticket { min-height: 214px; } }