/* 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 v5 privacy, the spine  27 v4 the desk  28 v5 the rail panel  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 privacy, the spine of the home page */
/* Privacy is the product, so it is the second thing a reader meets and the largest type on the
   page after the hero. Four promises on one hairline grid, two by two. Each cell is a promise,
   then the thing that proves it against a pink rule, then a link that checks it. The second cell
   carries a live dry quote, so the funding road is priced on the page rather than described. */
.privacy { padding: 92px 0 96px; }
.privacy-h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.032em; }
/* Four rows down one hairline, numbers running down the left edge: the spine. The promise is on
   the left of each row and the thing that proves it is on the right, so a reader's eye crosses
   from the claim to the check without a column of dead space anywhere. */
.promises {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; border-top: 1px solid var(--line);
}
.promise {
  position: relative; display: grid; gap: 0 44px;
  grid-template-columns: 52px minmax(0, 1.02fr) minmax(0, 1fr);
  padding: 30px 0 34px; border-bottom: 1px solid var(--line);
}
.promise > * { min-width: 0; }
.promise:last-child { border-bottom: 0; padding-bottom: 6px; }
/* the hairline the row hangs from lights pink when the row is read, the same gesture the loop rail
   makes on its own left rule. Transform only. */
.promise::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);
}
.promise:hover::after, .promise:focus-within::after { transform: scaleX(1); }
.promise .ix {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--jev-ink);
  padding-top: 5px;
}
.promise h3 { margin: 0 0 12px; font-size: 22px; }
.promise p { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 44ch; }
.promise-proof { display: grid; justify-items: start; gap: 16px; align-content: start; }
.promise .proof {
  padding-left: 15px; border-left: 1px solid rgba(240, 41, 143, .4);
  font-size: 13px; line-height: 1.5; max-width: 46ch;
}
.promise .proof .label { display: block; margin-bottom: 4px; color: var(--jev-ink); }
.promise .veil-ticket { width: 100%; margin-top: 0; }

/* 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);
}

/* the honesty strip. What the chain still shows, in the same words the veil page and the docs use,
   so the four promises above are read next to the four things they do not cover. */
.public-strip {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px 36px;
  align-items: start; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
}
.public-strip > * { min-width: 0; }
.public-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px;
}
.public-strip li {
  position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.public-strip li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--jev);
}
.public-strip li strong { color: var(--ink); font-weight: 500; }

/* 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 */
/* A headline section now, not a footnote: one raised panel under a pink rule, the network on the
   left with its live dry quote, the regulated wrapper on the right with its figures and their read
   date. Facts and dates only. No partnership is claimed anywhere on this site. */
.rail-panel {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 40px 40px 34px; overflow: hidden;
}
/* the only place on this page where the raw pink is a surface: a 2px rule across the panel's head,
   the same weight as the sweep that says the RPC is live. */
.rail-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--jev);
}
.rail-panel-head { max-width: 64ch; }
.rail-panel-head h2 { font-size: clamp(28px, 3.4vw, 44px); }
.rail-panel-head p { color: var(--muted); margin: 14px 0 0; }
.rail-two {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 36px; border-top: 1px solid var(--line);
}
.rail-two > * { min-width: 0; }
.rail-side { position: relative; padding: 28px 36px 4px 0; }
.rail-side + .rail-side { padding: 28px 0 4px 36px; }
.rail-side + .rail-side::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 4px; width: 1px; background: var(--line);
}
.rail-side .label { display: block; margin-bottom: 12px; }
.rail-side h3 { font-size: 20px; margin-bottom: 12px; }
.rail-side h4 { font-size: 15px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; margin: 26px 0 10px; }
.rail-side p { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.rail-live, .rail-etp {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px;
  margin: 0 0 12px; font-size: 12.5px;
}
.rail-live dt, .rail-etp dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px;
}
.rail-live dd, .rail-etp dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.rail-foot, .rail-read { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 0 0 16px; }
.rail-affil {
  margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink);
}
.rail-zec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.rail-zec > * { min-width: 0; }
.rail-zec .label { display: block; margin-bottom: 8px; }
.rail-zec p { font-size: 13px; color: var(--muted); margin: 0; }
.rail-src { margin: 22px 0 0; font-size: 12.5px; color: var(--muted); max-width: 88ch; }

/* 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; }
  .promise { grid-template-columns: 44px minmax(0, 1fr); gap: 22px 20px; padding: 26px 0 30px; }
  .promise-say { grid-column: 2; }
  .promise-proof { grid-column: 2; }
  .promise p { max-width: 62ch; }
  .public-strip { grid-template-columns: 1fr; gap: 18px; }
  .public-strip ul { grid-template-columns: 1fr; gap: 12px; }
  .desk-live { grid-template-columns: 1fr; gap: 34px; }
  .rail-panel { padding: 32px 28px 28px; }
  .rail-two { grid-template-columns: 1fr; }
  .rail-side, .rail-side + .rail-side { padding: 26px 0 8px; border-top: 1px solid var(--line); }
  .rail-side:first-child { border-top: 0; }
  .rail-side + .rail-side::before { display: none; }
  .rail-zec { grid-template-columns: 1fr; gap: 18px; }
  .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; }
  /* The two hero buttons measure just over one phone line in the metric fallback and just under it
     in Geist, so leaving the break to flex-wrap moved the whole stage 58px at font swap. Stacked,
     the row is two lines in both faces and the swap costs nothing. */
  .hero-cta { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px; }
  .hero-turn { width: min(360px, 100%); }
  .hero-stage { justify-items: stretch; }
  .hero-rcpt { padding: 12px 10px 0; }
  .privacy { padding: 60px 0 64px; }
  .privacy-h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .promise p { max-width: none; }
  .veil-ticket .t-row { flex-direction: column; gap: 3px; }
  .veil-ticket .v { text-align: left; }
  .rail-panel { padding: 26px 18px 22px; }
  .rail-side h3, .promise h3 { font-size: 18px; }
}
/* 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; }
/* The dry quote's floor is held by the cell, not by the ticket. On the ticket it made a bordered
   box with one sentence in it whenever the relay did not answer, which reads as a broken card;
   on the cell the same reserve is plain ground and the ticket is only ever as tall as it is real.
   Measured filled: 316 at 1440, 299 from 1080 down, 373 at 720, 409 at 390. */
.promise-proof--priced { min-height: 316px; }
/* the five rail rows hold their filled height: four of them arrive from the dry quote and the
   longest of those values wraps to two lines, which is the whole of this panel's layout shift. */
#rail-live { min-height: 128px; }
/* 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; }
/* The identity panel opens empty the moment a token is in the url and fills in one go when the scan
   lands: symbol, name, the chip strip and the link row all arrive together, and the whole grid under
   them drops by that much. Measured filled 174 from 600 up, 207 at 480 and below, where the chip
   strip takes a second row; empty it is 68, so at 390 that was 139 px of push under a full viewport
   and the whole of this page's shift. Every scan carries at least the WARDEN chip, the venue chip,
   the age and the scan time, so two rows of chips is the real content on a phone and not a ceiling. */
#scan-head .in { min-height: 174px; }
@media (max-width: 480px) { #scan-head .in { min-height: 207px; } }
@media (max-width: 1080px) { #feed-preview { min-height: 392px; } .promise-proof--priced { min-height: 300px; } }
@media (max-width: 720px) { #feed-preview { min-height: 392px; } .promise-proof--priced { min-height: 376px; } }
@media (max-width: 480px) { .promise-proof--priced { min-height: 412px; } }