/* ==========================================================================
   ELYSIUM site system (template: Uroboros site system, reskinned).
   Theme: "Ultima Thule", polar night. Blue-black, ice white, glacier greys; aurora (teal to violet)
   is the only colour. Michroma for display, Geist for body, IBM Plex Mono for labels and numbers.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #05080D;
  --surface: #0A1018;
  --surface-2: #101822;
  --surface-footer: #04070B;
  --accent: #6FE3C1;
  --accent-dim: rgba(111, 227, 193, 0.16);
  --accent-ink: #04120E;
  --aurora: linear-gradient(90deg, #6FE3C1, #8A7CFF);
  --violet: #8A7CFF;
  --text: #E8F1F7;
  --text-muted: rgba(232, 241, 247, 0.70);
  --text-faint: rgba(232, 241, 247, 0.56);
  --text-ghost: rgba(232, 241, 247, 0.28);
  --line: rgba(232, 241, 247, 0.10);
  --line-strong: rgba(232, 241, 247, 0.18);
  --line-hover: rgba(232, 241, 247, 0.34);
  --grid-line: rgba(232, 241, 247, 0.035);
  --negative: #FF3B3B;          /* Panic and frozen only */
  --negative-soft: rgba(255, 59, 59, 0.10);
  --negative-line: rgba(255, 59, 59, 0.45);

  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Michroma", "Geist", system-ui, sans-serif;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  --container: 1120px;
  --gutter: 40px;
  --bar-h: 64px;
  --strip-h: 32px;
  --nav-h: 96px;
  --section-y: 112px;
  --head-gap: 56px;

  /* type scale: text 11/12/14/16/18/32, display 22/28/32/48/64. Every font-size uses one of these. */
  --fs-11: 11px; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-22: 22px; --fs-28: 28px; --fs-32: 32px; --fs-48: 48px; --fs-64: 64px;
  --fs-display: var(--fs-64); --lh-display: 1.0;
  --fs-h1: var(--fs-48);      --lh-h1: 1.04;
  --fs-h2: var(--fs-32);      --lh-h2: 1.08;
  --fs-h3: var(--fs-22);      --lh-h3: 1.3;
  --fs-lead: var(--fs-18);    --lh-lead: 1.5;
  --fs-body: var(--fs-16);    --lh-body: 1.6;
  --fs-sm: var(--fs-14);      --lh-sm: 1.55;
  --fs-xs: var(--fs-12);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
}
@media (max-width: 1023px) {
  :root { --gutter: 32px; --section-y: 88px; --head-gap: 44px;
    --fs-display: var(--fs-48); --fs-h1: var(--fs-48); --fs-h2: var(--fs-28); --fs-h3: var(--fs-22); }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --section-y: 64px; --head-gap: 32px;
    --fs-display: var(--fs-32); --fs-h1: var(--fs-32); --fs-h2: var(--fs-22); --fs-h3: var(--fs-18); --fs-lead: var(--fs-16); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body);
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--text); text-wrap: balance; }
h1 { font-weight: 600; letter-spacing: -0.045em; }
h2 { letter-spacing: -0.038em; }
h3 { letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
input, select, textarea, button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num, td, th { font-variant-numeric: tabular-nums; }
.mono, code { font-family: var(--font-mono); letter-spacing: 0; }
code { font-size: max(var(--fs-12), calc(1em - 2px)); } /* one step below its text: 14→12, 16→14, 18→16 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.link { text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--text); }
.addr-missing, .addr-missing:hover { text-decoration: none; cursor: auto; }
.prose a { text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--text); }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: calc(var(--section-y) * .8); position: relative; }
.rule-top::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--line); pointer-events: none; }

/* section head: h2 on the left, the sub on the right, bottoms aligned */
.split-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin: 0 0 var(--head-gap); }
.split-head h2 { grid-column: 1 / span 7; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.split-head > p:not(.kicker) { grid-column: 9 / -1; max-width: 420px; color: var(--text-muted); font-size: var(--fs-16); line-height: 1.55; padding-bottom: 4px; }
@media (max-width: 1023px) {
  .split-head h2, .split-head > p:not(.kicker) { grid-column: 1 / -1; }
  .split-head > p:not(.kicker) { margin-top: 16px; max-width: 560px; padding-bottom: 0; }
}

/* numbered mono index line that opens every section */
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.4; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.kicker .n { color: var(--accent); }
.kicker .n::after { content: ""; display: inline-block; width: 16px; height: 1px;
  margin-left: 10px; vertical-align: middle; background: var(--line-strong); }
.split-head > .kicker { grid-column: 1 / -1; }

/* hairline definition rows for prose lists */
.rows { margin: 0; border-top: 1px solid var(--line-strong); }
.rows > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rows dt { grid-column: 1 / span 5; font-size: var(--fs-16); font-weight: 500; letter-spacing: -.02em; }
.rows dd { grid-column: 7 / -1; margin: 0; color: var(--text-muted); font-size: var(--fs-16);
  line-height: 1.5; max-width: 520px; }
.rows > div:hover { background: linear-gradient(90deg, rgba(232,241,247,.025), transparent 80%); }
@media (max-width: 1023px) {
  .rows > div { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .rows dt, .rows dd { grid-column: 1 / -1; }
}

/* mono spec strip under the hero */
.spec-sec { padding-top: 32px; padding-bottom: 24px; }
.spec-line { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-12);
  color: var(--text-muted); }
.spec-line span { padding: 14px 20px; border-left: 1px solid var(--line); }
.spec-line span:first-child { border-left: 0; padding-left: 0; color: var(--text); }
@media (max-width: 767px) {
  .spec-line { flex-direction: column; }
  .spec-line span, .spec-line span:first-child { padding: 10px 0; border-left: 0; }
  .spec-line span + span { border-top: 1px solid var(--line); }
}

/* closing CTA with a command block */
.cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px;
  align-items: end; }
.cta h2 { max-width: 640px; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.cta .sub { margin-top: 16px; max-width: 560px; color: var(--text-muted); font-size: var(--fs-16);
  line-height: 1.55; }
.cta .btn { margin-top: 32px; }
.cta-cmd { border-top: 1px solid var(--line-strong); padding-top: 16px; min-width: 0; }
.cta-cmd .cmd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-faint); }
.cta-cmd code { display: block; margin-top: 12px; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); font-family: var(--font-mono);
  font-size: var(--fs-12); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cta-cmd code.addr-missing { font-family: var(--font-body); font-size: var(--fs-14); color: var(--text-faint); background: none; border-style: dashed; }
@media (max-width: 1023px) { .cta { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-14); font-weight: 500; line-height: 1; letter-spacing: -0.006em;
  white-space: nowrap; cursor: pointer; background: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--lg { height: 44px; padding: 0 20px; font-size: var(--fs-14); }
.btn--sm { height: 32px; padding: 0 12px; font-size: var(--fs-12); }
.btn--primary { background: var(--text); color: var(--accent-ink); border-color: var(--text); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn--secondary { color: var(--text); border-color: var(--line-strong); }
.btn--secondary:hover { background: rgba(232, 241, 247, 0.05); border-color: var(--line-hover); }
.btn--danger { color: var(--negative); border-color: var(--negative-line); }
.btn--danger:hover { background: var(--negative-soft); border-color: var(--negative); }
.btn--danger.armed { background: var(--negative); color: #050505; border-color: var(--negative); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- nav + CA strip ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom-color: var(--line); }
.nav > .container { height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: var(--fs-18); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--text); }
.logo svg { width: 20px; height: 20px; flex: none; }
.nav-links { display: flex; align-items: stretch; gap: 2px; height: var(--bar-h); }
.nav-links a { position: relative; display: inline-flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-fast); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-links a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px; background: var(--text); }
.nav-links a:focus-visible { outline-offset: -8px; }
.nav-cta { justify-self: end; display: flex; align-items: center; gap: 8px; }
.burger { display: none; justify-self: end; width: 40px; height: 40px; margin-right: -10px; border: 0; border-radius: var(--r-md); background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.burger:hover { background: rgba(232, 241, 247, 0.05); }
.burger svg { width: 20px; height: 20px; }
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom)); background: var(--bg); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease-out); }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); border-bottom: 1px solid var(--line); }
.menu nav { display: grid; margin-top: 8px; }
.menu nav a { display: flex; align-items: center; height: 56px; border-bottom: 1px solid var(--line); font-size: var(--fs-18); font-weight: 500; letter-spacing: -0.02em; color: var(--text-muted); }
.menu nav a[aria-current] { color: var(--text); }
body.menu-open { overflow: hidden; }
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav > .container { grid-template-columns: 1fr auto auto; gap: 12px; }
  .burger { display: inline-flex; }
}
.ca-strip { height: var(--strip-h); border-bottom: 1px solid var(--line); background: var(--bg); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-faint); }
.ca-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ca-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ca-copy { all: unset; cursor: pointer; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy:hover { text-decoration: underline; text-underline-offset: 3px; }
.ca-copy:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.ca-socials { display: flex; align-items: center; gap: 16px; flex: none; }
.ca-socials a:hover { color: var(--text); }
@media (max-width: 560px) { .ca-strip { font-size: var(--fs-11); } .ca-socials .ca-scan { display: none; } }

/* ---------- status chips (from status.json) ---------- */
.st { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-ghost); }
.st[data-state="live"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.st[data-state="live"]::before { background: var(--accent-ink); }
.st[data-state="pending"]::before { background: var(--text-muted); }
.st[data-state="roadmap"] { border-style: dashed; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-ghost); flex: none; display: inline-block; }
.dot.on { background: var(--text); }
.dot.bad { background: var(--negative); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border-top: 1px solid var(--line-strong); }
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.t th, .t td { padding: 13px 12px 13px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.t thead th { font-weight: 400; font-size: var(--fs-12); color: var(--text-faint); white-space: nowrap; }
.t td.r, .t th.r { text-align: right; padding-right: 20px; }
.t tr > :last-child { padding-right: 0; }
.t td b { font-weight: 500; }
.t td small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--text-faint); }
.t .mono { font-size: var(--fs-12); }
/* below 768px every .t table stacks: first cell + the .stk-side column on one line, the rest label over value
   (labels come from the header, set as data-label by app.js) */
@media (max-width: 767px) {
  .t thead { display: none; }
  .t, .t tbody { display: block; }
  .t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px;
    padding: 14px 0; border-bottom: 1px solid var(--line); }
  .t tbody tr:last-child { border-bottom: 0; }
  .t th, .t td, .t td.r, .t tr > :last-child { display: block; grid-column: 1 / -1; padding: 0; border: 0; text-align: left; }
  .t tbody tr > :first-child { grid-column: 1; grid-row: 1; }
  .t td.stk-side { grid-column: 2; grid-row: 1; min-width: 120px; text-align: right; }
  .t td.stk-side .share { justify-content: flex-end; }
  .t td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400; letter-spacing: .02em; color: var(--text-faint); }
  .t td.stk-side::before { display: none; }
}

/* ---------- facts list ---------- */
.kv { margin: 0; display: grid; border-top: 1px solid var(--line-strong); }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ---------- notes ---------- */
.note { border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 16px; font-size: var(--fs-14); line-height: 1.55; color: var(--text-muted); }
.note b { color: var(--text); font-weight: 500; }
.note.danger { border-color: var(--negative-line); background: var(--negative-soft); color: var(--text); }
.note.danger b { color: var(--negative); }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 28px 24px; color: var(--text-muted); font-size: var(--fs-16); display: grid; gap: 10px; justify-items: start; }
.empty h3 { font-size: var(--fs-18); }

/* ---------- command blocks ---------- */
.cmd { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.6; }
.cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text); }
.copy { flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: none; padding: 2px 8px; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text-muted); cursor: pointer; }
.copy:hover { color: var(--text); border-color: var(--line-hover); }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; min-height: 60px; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: none; border: 0; font-size: var(--fs-16); font-weight: 500; letter-spacing: -0.02em; text-align: left; cursor: pointer; }
.faq-ic { width: 24px; height: 24px; flex: none; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-muted);
  display: grid; place-items: center; transition: transform 200ms var(--ease-out); }
.faq-ic svg { width: 12px; height: 12px; display: block; transition: transform 200ms var(--ease-out); }
.faq-item:not(.is-open):hover .faq-ic { transform: rotate(90deg); color: var(--text);
  border-color: var(--line-hover); }
.faq-item.is-open .faq-ic { background: transparent; color: var(--text);
  border-color: var(--line-hover); }
.faq-item.is-open .faq-ic svg { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms var(--ease-out), visibility 0s linear 300ms; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms var(--ease-out), visibility 0s; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 0 20px; max-width: 68ch; color: var(--text-muted); }
.faq-a p + p { margin-top: -8px; }
/* left rail: kicker + title pinned in columns 1-3, accordion in 5-12 */
.faq-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; align-items: start; }
.faq-head { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.faq-head > p:last-child { margin-top: 16px; color: var(--text-muted); font-size: var(--fs-16); line-height: 1.55; }
.faq-wrap .faq { grid-column: 5 / -1; border-top: 1px solid var(--line-strong); }
.faq-wrap .faq-item { background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; }
.faq-wrap .faq-q { padding: 20px 0; border-radius: 0; }
.faq-wrap .faq-a p { padding: 0 48px 22px 0; font-size: var(--fs-16); line-height: 1.6; max-width: 62ch; }
@media (max-width: 1023px) {
  .faq-head { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
  .faq-wrap .faq { grid-column: 1 / -1; }
  .faq-wrap .faq-a p { padding-right: 0; }
}

/* ---------- footer ---------- */
.footer { background: var(--surface-footer); border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--fs-sm); }
.f-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
.f-col { min-width: 0; padding: 56px 32px 48px; border-left: 1px solid var(--line); }
.f-col:first-child { border-left: 0; padding-left: 0; }
.f-col:last-child { padding-right: 0; }
.f-col .desc { margin-top: 20px; max-width: 300px; line-height: var(--lh-sm); }
.f-col h2 { margin: 0 0 14px; font-size: var(--fs-12); font-weight: 400; letter-spacing: 0; color: var(--text-faint); }
.f-links { list-style: none; display: grid; gap: 2px; }
.f-links a { display: inline-block; padding: 5px 0; color: var(--text-muted); }
.f-links a:hover { color: var(--text); }
.f-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: baseline; padding: 20px 0 28px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-11); line-height: 1.6; }
@media (max-width: 1023px) {
  .f-top { grid-template-columns: 1fr 1fr 1fr; }
  .f-col:first-child { grid-column: 1 / -1; padding: 48px 0 32px; border-bottom: 1px solid var(--line); }
  .f-col:nth-child(2) { border-left: 0; padding-left: 0; }
  .f-col { padding: 32px 24px 40px; }
}
@media (max-width: 767px) {
  .f-top { grid-template-columns: 1fr 1fr; }
  .f-col, .f-col:nth-child(2) { padding: 28px 0 8px; border-left: 0; }
  .f-col:first-child { padding: 40px 0 28px; }
  .f-col:last-child { grid-column: 1 / -1; padding-bottom: 32px; }
  .f-bottom { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: calc(var(--nav-h) + 88px) 0 64px; position: relative; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.page-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 820px; }
.page-hero .lead { margin-top: 24px; max-width: 600px; color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.page-hero .meta { margin-bottom: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 767px) { .page-hero { padding: calc(var(--nav-h) + 48px) 0 40px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---- polish pass ---- (2 Nov 2026, launch QA)
   Appended block; overrides only. Refs: Vercel DESIGN.md (hairline + stacked micro-shadow elevation,
   grey ladder for disabled, mono eyebrows), Linear DESIGN.md (dark surfaces with a 1px top inner highlight).
   Hero ring section is out of scope here. Uses var(--accent) only, never redefines it. */
:root {
  --pp-card-line: rgba(232, 241, 247, 0.09);
  --pp-card-bg: linear-gradient(180deg, rgba(232, 241, 247, 0.028), rgba(232, 241, 247, 0) 42%), var(--surface);
  --pp-card-shadow: inset 0 1px 0 rgba(232, 241, 247, 0.045), 0 1px 1px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --pp-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent, var(--text));
  --r-card: 10px;
}

/* ---------- 1. symmetry / rhythm ---------- */
/* section heads: h2 sits right under its kicker on every section (was bottom-aligned, so the
   kicker-to-h2 gap swung from 16px to 60px whenever the sub ran longer than the title) */
.split-head { align-items: start; }
.split-head > p:not(.kicker) { padding-bottom: 0; padding-top: 6px; }
.split-head > p .st { display: flex; width: fit-content; margin-top: 14px !important; }
@media (max-width: 1023px) { .split-head > p:not(.kicker) { padding-top: 0; } }

/* token: both columns start on the same hairline; the narrow column stacks label over text */
@media (min-width: 1024px) {
  #token .two > div:first-child { padding-top: 39px; }
  #token .two > div:last-child .rows > div { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  #token .two > div:last-child .rows dt, #token .two > div:last-child .rows dd { grid-column: 1 / -1; max-width: none; }
}
/* admin: table header row and the aside heading share a top line */
.rows.rows--admin { margin-top: 0; }

/* (template) step-3 button wrapper inherited the step-row padding + rule and sat 18px high */
.keys > div div { padding: 0; border-bottom: 0; gap: 0; }

/* code: audit cards keep their links on one baseline */
.docs .doc-c { grid-template-rows: auto 1fr auto; align-content: stretch; }
.docs .doc-c > p:last-child { align-self: end; }

/* panels: the watcher terminal fills its half like a screen, not an empty box */
.panels .term-body { flex: 1 1 auto;
  background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(232, 241, 247, 0.018) 23px 24px);
  background-position: 0 22px; }

/* ---------- 4. de-AI + premium ---------- */
/* buttons */
.btn { border-radius: 7px; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform 90ms var(--ease-out); }
.btn--primary { background: linear-gradient(180deg, #FFFFFF, #E4E4E4); border-color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(232, 241, 247, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn--primary:hover { background: var(--accent, #FFFFFF); border-color: var(--accent, #FFFFFF); }
.btn--primary:active { background: #DADADA; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.btn--secondary { background: linear-gradient(180deg, rgba(232, 241, 247, 0.045), rgba(232, 241, 247, 0.012));
  border-color: rgba(232, 241, 247, 0.14); box-shadow: inset 0 1px 0 rgba(232, 241, 247, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4); }
.btn--secondary:hover { background: rgba(232, 241, 247, 0.07); border-color: var(--line-hover); }
.btn--secondary:active { background: rgba(232, 241, 247, 0.04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn--danger { box-shadow: inset 0 1px 0 rgba(255, 59, 59, 0.08); }
.btn:focus-visible, .copy:focus-visible, .chip:focus-visible, .tab:focus-visible, .faq-q:focus-visible .faq-ic { outline: none; box-shadow: var(--pp-ring); }
.faq-q:focus-visible { outline: none; }
html body .btn[disabled], html body .btn[aria-disabled="true"] { opacity: 1; cursor: not-allowed; transform: none;
  background: rgba(232, 241, 247, 0.035); border-color: var(--line); color: var(--text-ghost); box-shadow: none; }
html body .btn--danger[disabled] { color: rgba(255, 59, 59, 0.45); border-color: rgba(255, 59, 59, 0.2); background: transparent; }
/* trailing chevron on outbound secondary actions (same 16-grid, 1.5px stroke as every other icon) */
.prod .go .btn::after, #contracts .btn::after, .doc-c a.link::after {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out); }
.doc-c a.link::after { display: inline-block; margin-left: 4px; vertical-align: -1px; }
.prod .go .btn:hover::after, #contracts .btn:hover::after, .doc-c a.link:hover::after { transform: translateX(2px); opacity: 1; }
.prod .go .btn { padding-right: 10px; }

/* one icon stroke: 1.5px rendered, whatever the viewBox */
.faq-ic svg path, .rm-ic svg path, .burger svg path, .flow svg path { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.pg .s { stroke-width: 1.5; }
.faq-ic { border-radius: 6px; border-color: rgba(232, 241, 247, 0.12); background: rgba(232, 241, 247, 0.02); }

/* cards: one radius, one hairline, one surface, one micro-shadow */
.inst, .term, .csim, .lsim-card, .leak, .conn, .card, .sanct, .proof-live, .clock, .rm-sum, .cta-cmd code, .empty {
  border-radius: var(--r-card); }
html body .inst, html body .csim, html body .lsim-card, html body .leak, html body .conn, html body .card, html body .sanct, html body .proof-live {
  border-color: var(--pp-card-line); background: var(--pp-card-bg); box-shadow: var(--pp-card-shadow); }
html body .term { border-color: var(--pp-card-line); box-shadow: inset 0 2px 0 var(--text), var(--pp-card-shadow); }
html body .clock, html body .rm-sum { border-color: var(--pp-card-line); background: var(--pp-card-bg); box-shadow: inset 0 1px 0 rgba(232, 241, 247, 0.04); }
html body .empty { border-color: rgba(232, 241, 247, 0.12); background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(232, 241, 247, 0.012) 9px 10px); }
.note { border-radius: 8px; }
.cmd, .checksum { border-radius: 8px; }

/* chips / badges */
main .st:not(.hero .st) { height: 22px; padding: 0 8px; border-radius: 5px; font-size: var(--fs-12); letter-spacing: .02em;
  border-color: rgba(232, 241, 247, 0.13); background: rgba(232, 241, 247, 0.02); box-shadow: inset 0 1px 0 rgba(232, 241, 247, 0.04); gap: 7px; }
main .st:not(.hero .st)[data-state="live"] { background: var(--text); border-color: var(--text); box-shadow: none; }
.copy { height: 22px; padding: 0 8px; border-radius: 5px; letter-spacing: .02em; background: rgba(232, 241, 247, 0.02);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.tag { border-radius: 5px; }
.chip { border-radius: 7px; }

/* inputs (template) */
html body .fld input, html body .fld select, html body .fld textarea, html body .inp, html body .addby input {
  background: #090909; border-color: rgba(232, 241, 247, 0.13); border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
html body .fld input:hover, html body .fld select:hover, html body .fld textarea:hover, html body .inp:hover, html body .addby input:hover { border-color: var(--line-hover); }
html body .fld input:focus, html body .fld select:focus, html body .fld textarea:focus, html body .inp:focus, html body .addby input:focus {
  border-color: rgba(232, 241, 247, 0.42);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 3px color-mix(in srgb, var(--accent, #fff) 14%, transparent); }
.fld input::placeholder, .fld textarea::placeholder, .inp::placeholder, .addby input::placeholder { color: var(--text-ghost); }

/* typography: mono labels tracked the same, numbers tabular everywhere they line up */
.t thead th { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; }
.prod-n { letter-spacing: .04em; }
.kv dd, .c-row, .clock b, .rm-sum dd, .csim, .lsim, .inst, .term, .bfeed, .spec-line, .st, .mono, code, .q, .assets, .facts dd, .defaults dd, .rm-when, .hd-strip dd {
  font-variant-numeric: tabular-nums; }
.cta-cmd code { border-color: var(--pp-card-line); background: var(--pp-card-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }

/* ---------- 2. animation budget ---------- */
/* one reveal: 14px rise, 600ms, 50ms stagger; lists use the same distance */
html.mo body .rv { --rv-d: 14px; transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
/* pillars are readable at once; only their glyphs play in sequence */
html.mo body .pillars.seq .pillar:not(.on) { opacity: 1; }
/* hairline draws in once; the travelling dot was a second animation on the same line and could park at the edge */
html body .rule-top::after { content: none; animation: none; }

/* ---------- 3. scroll warp (motion.js draws it; this is just its layer) ---------- */
.bgfx-warp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: auto; opacity: 0; transition: opacity 200ms linear; }
.bgfx.is-warping .bgfx-warp { opacity: 1; }
.bgfx { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .bgfx-warp { display: none; } }

/* ---- accent (hero + live values) ---- */
.st[data-state="pending"]::before { background: var(--accent); }
html[data-chain-live] [data-live] { color: var(--accent); }
a:hover { color: var(--accent); }

/* ---- $ELYSIUM market panel (index #token, tokmkt.js) — borderless left-rule like the hero panels ---- */
.tok-mkt { margin: 0 0 48px; padding: 2px 0 4px 20px; border-left: 1px solid var(--line-strong); }
.tok-mkt .hd-h { margin-bottom: 10px; }
.tm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; }
.tok-mkt .kv { border-top: 0; }
.tok-mkt .kv > div { border-bottom: 0; padding: 6px 0; font-size: var(--fs-14); align-items: baseline; }
.tok-mkt .kv dt { color: var(--text-muted); white-space: nowrap; flex: none; }
.tok-mkt .kv dd { min-width: 0; }
.tok-mkt .kv dd, .tm-list { font-family: var(--font-mono); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.tok-mkt .live-note { font-family: var(--font-body); }
.tok-mkt [data-mkt][data-state="ok"], .tm-p[data-state="ok"] { color: var(--accent); }
.tok-mkt [data-mkt] .live-note, .tok-mkt [data-mkt="updated"] { color: var(--text-faint); }
.tm-sub { margin: 6px 0 6px; font-size: var(--fs-14); color: var(--text-muted); }
.tm-list { margin: 0; padding: 0; list-style: none; }
.tm-list li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; min-width: 0; }
.tm-list .tm-i { color: var(--text-faint); width: 2ch; text-align: right; flex: none; }
.tm-list .live-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-list .tm-p { margin-left: auto; flex: none; }
.tm-foot { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: var(--fs-12); }
.tm-foot .live-note { flex: 1 1 260px; }
@media (max-width: 767px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tok-mkt { padding-left: 14px; margin-bottom: 40px; }
  .tok-mkt .kv dd { white-space: normal; min-width: 0; }
  .tok-mkt .kv dd .live-note { display: block; margin-top: 2px; }
}

/* ==========================================================================
   Polar pass (ELYSIUM "Ultima Thule", 3 Nov 2026). Overrides only.
   Ice-white monoliths, hairlines, frost-glass panels. Aurora (teal → violet) is the only colour,
   used for live values, the kicker index, focus and the one primary action. Geometric glyphs only.
   ========================================================================== */
body { background: var(--bg); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.split-head h2, .faq-head h2, .cta h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-weight: 500; }
.wide { font-family: var(--font-display); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.aurora-text { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* kicker: aurora index, a short double hairline */
.kicker .n { color: var(--accent); }
.kicker .n::after { width: 20px; height: 5px; background: none; vertical-align: 2px; border-top: 1px solid var(--line-hover); border-bottom: 1px solid var(--line); }

/* section rules: ice hairline that fades at both ends, a small polar star in the middle */
.rule-top::before { background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-hover) 50%, var(--line-strong) 80%, transparent); }
.section.rule-top > .container { position: relative; }
.section.rule-top > .container::before { content: ""; position: absolute; left: 50%; top: calc(var(--section-y) * -.8 - 6px); width: 12px; height: 12px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 7 5 12 6 7 7 6 12 5 7 0 6 5 5Z' fill='%23E8F1F7' fill-opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none; }

/* buttons: ice monoliths, square; the primary one carries the aurora edge */
.btn { border-radius: 1px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500; }
.btn--lg { font-size: var(--fs-12); padding: 0 22px; height: 46px; }
.btn--primary { background: linear-gradient(180deg, #F4F9FC, #D3E1EA); border-color: #F4F9FC; color: #05080D;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(111, 227, 193, .55), 0 10px 28px -12px rgba(111, 227, 193, .45); }
.btn--primary:hover { background: linear-gradient(180deg, #FFFFFF, #E3F7F0); border-color: var(--accent); color: #05080D; box-shadow: inset 0 -2px 0 var(--violet), 0 10px 30px -10px rgba(138, 124, 255, .5); }
.btn--primary:active { background: #D3E1EA; }
.btn--secondary { color: var(--text); background: rgba(10, 16, 24, .45); border-color: var(--line-hover); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--secondary:hover { color: #fff; border-color: var(--text); background: rgba(232, 241, 247, .06); }

.st, main .st:not(.hero .st) { border-radius: 1px; }
main .st:not(.hero .st)[data-state="live"], .st[data-state="live"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* frost-glass panel (hero readouts, HUD, closing address) */
.frost { background: linear-gradient(180deg, rgba(232, 241, 247, .06), rgba(232, 241, 247, .015)), rgba(5, 8, 13, .58); border: 1px solid rgba(232, 241, 247, .12);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); box-shadow: inset 0 1px 0 rgba(232, 241, 247, .10); }

.logo { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-14); letter-spacing: .24em; }
.logo svg { width: 22px; height: 22px; }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.ca-strip { background: rgba(5, 8, 13, .7); }
.empty, .cta-cmd code, .rm-sum, .clock { border-radius: 1px !important; }

.footer .logo { font-size: var(--fs-16); }

/* live HUD (fixed corner readout) */
.hud { position: fixed; z-index: 30; right: var(--gutter); top: calc(var(--nav-h) + 18px);
  display: grid; gap: 2px; padding: 9px 12px 10px; border-left: 1px solid var(--accent);
  font-family: var(--font-mono); font-size: var(--fs-11); line-height: 1.5; letter-spacing: .04em; color: var(--text-faint); pointer-events: none; font-variant-numeric: tabular-nums; }
.hud div { display: flex; gap: 12px; justify-content: space-between; white-space: nowrap; }
.hud b { font-weight: 400; color: var(--text); }
.hud i { font-style: normal; color: var(--text-ghost); }
@media (max-width: 1023px) {
  .hud { top: auto; right: auto; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 6px 10px 7px; font-size: var(--fs-11); }
}

/* fixed backdrop: the ring (stage.js), and a veil for the content sections */
.stage { position: fixed; inset: 0; z-index: -3; background: var(--bg) url("station-still.jpg") 70% 50% / cover no-repeat; }
.stage.is-gl { background-image: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
/* the WebGL canvas gets its own viewport-sized compositor layer, isolated from the page */
.stage.is-gl { contain: strict; transform: translateZ(0); will-change: transform; overflow: hidden; }
/* Chromium on macOS (set by stage.js while the ring is live) or ?blur=0: no live blur over the repainting canvas;
   frosted panels keep their gradient, hairline and inner highlight on a denser tint */
html.no-bdf *, html.no-bdf *::before, html.no-bdf *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.no-bdf .frost { background: linear-gradient(180deg, rgba(232, 241, 247, .07), rgba(232, 241, 247, .02)), rgba(7, 11, 17, .84); }
html.no-bdf .btn--secondary { background: rgba(10, 16, 24, .74); }
html.no-bdf .btn--secondary:hover { background: rgba(22, 30, 40, .8); }
html.no-bdf .pf-row { background: rgba(8, 13, 20, .84); }
html.no-bdf .nav.is-scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); }
html.no-bgfx .bgfx { display: none !important; }
.stage.no-gl canvas { display: none; }
.stage-veil { position: fixed; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 50% 40%, rgba(5, 8, 13, .84), var(--bg)); opacity: 0; pointer-events: none; }
/* home: a scrim between the scene and the content. Its top edge (160 px fade) rides the hero's bottom edge (stage.js sets
   the transform on scroll), so the hero headline keeps the bright scene and every section below sits on the scrim. */
.stage-scrim { position: fixed; left: 0; right: 0; top: 0; height: calc(100vh + 160px); z-index: -2; pointer-events: none; will-change: transform; transform: translateY(calc(100vh - 120px));
  background: linear-gradient(180deg, rgba(5, 8, 13, 0) 0, rgba(5, 8, 13, .72) 160px, rgba(5, 8, 13, .86) 100%), radial-gradient(60% 50% at 50% 45%, transparent, rgba(5, 8, 13, .55)); }
/* RPC read state (rpc-read.js): a kept value is dimmed while the node is busy; one small age line per panel */
[data-stale=""] { opacity: .6; transition: opacity .3s; }
.rpc-age { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .04em; text-transform: none; color: var(--text-faint); white-space: nowrap; }
.rpc-age:empty { display: none; }
.hd-h .rpc-age { margin-left: auto; }
.lp-live { position: relative; }
.lp-live > .rpc-age { position: absolute; top: 5px; right: 20px; }
@media (max-width: 767px) { .stage { background-position: 50% 70%; } }
/* the logo is a fixed mark (no scroll rotation); the sticky CTA stays off on phones, where the nav already has it */
.logo svg { transform: none !important; }
@media (max-width: 767px) { .scta { display: none !important; } }
/* phones: the burger sits inside the 16px gutter (template had -10px) */
@media (max-width: 767px) { .burger { margin-right: -4px; width: 36px; } .nav-cta .btn { padding: 0 10px; letter-spacing: .06em; } }

/* countdown to Elysium's public opening (top strip; app.js) */
.cd { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-faint); white-space: nowrap; }
.cd-l { color: var(--text-muted); }
.cd-short { display: none; }
.cd-date { color: var(--text-faint); }
.cd-t { display: inline-flex; align-items: center; color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-g { display: inline-flex; }
.dg { display: inline-block; width: 1ch; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.dg-c { display: block; white-space: pre; line-height: 1.25em; transition: transform 450ms cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.cd-sep { padding: 0 .3ch; color: var(--text-ghost); }
.cd.is-done .cd-l { color: var(--accent); }
@media (max-width: 1023px) { .ca-inner > .ca-left { display: none; } }
@media (max-width: 767px) { .cd-long { display: none; } .cd-short { display: inline; } .cd { gap: 7px; font-size: var(--fs-11); } }
@media (prefers-reduced-motion: reduce) { .dg-c { transition: none; } }
/* top strip below 1024: countdown + a short CA line; the socials move to the footer only on phones */
.ca-sm { display: none; }
@media (max-width: 1023px) { .ca-inner > .ca-left { display: flex; } .ca-lg { display: none; } .ca-sm { display: inline; } }
@media (max-width: 767px) { .ca-socials { display: none; } .ca-inner > .ca-left { flex: 0 1 auto; } }

/* ---------- pending state: our own contracts not deployed yet ---------- */
.pend { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 22px; padding: 0 10px 0 8px; overflow: hidden; vertical-align: middle;
  font: 500 var(--fs-11) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  border: 1px solid rgba(111, 227, 193, .22); background: linear-gradient(90deg, rgba(111, 227, 193, .05), rgba(138, 124, 255, .05)); border-radius: 2px; }
.pend::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pend-dot 1.8s ease-in-out infinite; }
.pend::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(111, 227, 193, .18) 42%, rgba(138, 124, 255, .18) 58%, transparent 80%); transform: translateX(-100%); animation: pend-sweep 2.6s cubic-bezier(.4, 0, .2, 1) infinite; pointer-events: none; }
@keyframes pend-sweep { to { transform: translateX(100%); } }
@keyframes pend-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pend::after { animation: none; transform: none; opacity: .35; } .pend::before { animation: none; opacity: .8; } }

/* ---------- live proofs ---------- */
.proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-row { padding: 16px 18px; min-width: 0; border: 1px solid var(--line); background: rgba(8, 13, 20, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf-h { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pf-h b { font: 500 var(--fs-14) var(--font-body); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(111, 227, 193, .7); }
.pf-row.is-pending .pf-dot { background: var(--text-faint); box-shadow: none; }
.pf-addr { margin-left: auto; font: var(--fs-12) var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.pf-kv { margin: 10px 0 0; display: grid; gap: 0; }
.pf-kv > div:not(.pend) { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-12); min-width: 0; }
.pf-kv dt { color: var(--text-faint); flex: none; }
.pf-kv dd { margin: 0; text-align: right; font: var(--fs-12) var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere; min-width: 0; }
.pf-kv dd[data-state="ok"] { color: var(--accent); }
.pf-kv dd[data-state="bad"] { color: #ff9d9d; }
.pf-kv dd[data-state="warn"] { color: #f2d48a; }
.pf-kv .pend { justify-self: start; }
.pf-kv .link { margin-top: 10px; font-size: var(--fs-12); }
@media (max-width: 767px) { .proofs { grid-template-columns: minmax(0, 1fr); } .pf-kv > div:not(.pend) { flex-direction: column; gap: 2px; } .pf-kv dd { text-align: left; } }

/* buy links before the CA exists: they scroll to the CA field (pending) */
a.btn.is-pending { opacity: .72; }

/* roadmap: pending chip in the status column (reuses .pend) */
.rm-head .rm-pend { grid-area: st; justify-self: end; }
@media (max-width: 767px) { .rm-head .rm-pend { justify-self: start; } }

/* ---------- wallet networks: Add Elysium / Add HyperEVM (netadd.js) ---------- */
.netadd { position: relative; display: inline-flex; align-items: center; }
.netadd .na-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.netadd .na-more { width: 28px; padding: 0; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.netadd .na-more svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); }
.netadd .na-more[aria-expanded="true"] svg { transform: rotate(180deg); }
[data-net][data-state="on"]::before { content: "✓"; margin-right: 6px; color: var(--accent); font-family: var(--font-mono); }
.na-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 300px; padding: 12px; display: grid; gap: 6px; }
.na-pop[hidden] { display: none; }
.na-h { margin: 0 0 2px; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.na-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 18px minmax(0, 1fr); row-gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.na-row:hover { border-color: var(--line-hover); background: rgba(232, 241, 247, .04); }
.na-row:focus-visible { box-shadow: var(--pp-ring, 0 0 0 2px var(--accent)); }
.na-row::before { content: ""; grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
.na-row[data-state="on"]::before { content: "✓"; }
.na-row b { grid-column: 2; }
.na-row[data-state="on"] { border-color: var(--line-strong); }
.na-row b { font-size: var(--fs-14); font-weight: 500; color: var(--text); }
.na-row small { grid-column: 2; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text-faint); }
.na-note { margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.na-note[data-kind="err"] { color: #ff9d9d; }
.na-note[data-kind="warn"] { color: #f2d48a; }
.na-note code { color: var(--text); }
.na-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.menu-net { margin-top: 24px; display: grid; gap: 10px; }
.menu-net-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-net-btns .btn { width: 100%; padding: 0 10px; }
@media (max-width: 1023px) { .nav-cta .netadd { display: none; } }

/* ---------- wallet session: header address menu + wallet picker (wallet-session.js) ---------- */
[data-wallet] { font-family: var(--font-mono); }
[data-wallet][data-connected="1"] { letter-spacing: .02em; text-transform: none; }
[data-wallet].is-pending { cursor: progress; opacity: .78; text-transform: none; letter-spacing: .02em; }
.wl-pop { position: fixed; z-index: 80; width: 280px; max-width: calc(100vw - 32px); padding: 12px; display: grid; gap: 6px; border-radius: var(--r-lg); }
.wl-pop[hidden] { display: none; }
.wl-row { min-height: 44px; align-content: center; grid-template-columns: minmax(0, 1fr); }
.wl-row b, .wl-row small { grid-column: 1; }
.wl-row--ico b, .wl-row--ico small { grid-column: 2; }
.wl-row b { font-family: var(--font-mono); font-size: var(--fs-12); }
.wl-row::before { content: none; }
.wl-row.wl-row--ico { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
.wl-row .wl-ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; border-radius: var(--r-sm); }
.wl-row[data-wl-disconnect] b { color: #ff9d9d; }
.wl-pop .na-note { margin: 0; }
@media (max-width: 767px) { .nav-cta .nav-launch { display: none; } }   /* index / whitepaper: the wallet button takes its spot; Launch stays in the menu and hero */
@media (max-width: 767px) { .wl-pop { left: 16px; right: 16px !important; width: auto; max-width: none; } .wl-row { min-height: 48px; } }
@media (min-width: 1024px) { .menu-net { display: none; } }
@media (min-width: 1300px) and (max-width: 1439px) { .nav-links a { padding: 0 9px; } }

/* ==========================================================================
   Layout pass (3 Nov 2026, symmetry QA). Overrides only.
   ========================================================================== */
/* top strip: countdown left, CA centred on the container axis, socials right; the date lives in the countdown's tooltip */
.ca-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
.ca-inner > .cd { justify-self: start; max-width: 100%; overflow: hidden; }
.ca-inner > .ca-left { justify-self: center; position: relative; }
.ca-inner > .ca-socials { justify-self: end; }
.cd-date { display: none; }
.ca-copy { display: inline-flex; align-items: center; }
.ca-copy .ca-short { display: none; }
.ca-copied { position: absolute; left: 100%; margin-left: 8px; white-space: nowrap; }
.ca-copied:empty { display: none; }
.ca-socials a { display: inline-flex; align-items: center; height: var(--strip-h); }
@media (max-width: 1199px) { .ca-copy .ca-full { display: none; } .ca-copy .ca-short { display: inline; } }
@media (max-width: 1023px) { .ca-inner > .ca-left { display: flex; } .cd-long { display: none; } .cd-short { display: inline; } }
@media (max-width: 767px) {
  :root { --strip-h: 40px; --nav-h: 104px; }
  .ca-inner { grid-template-columns: minmax(0, auto) auto; justify-content: space-between; }
  .ca-inner > .ca-left { justify-self: end; gap: 7px; }
  .ca-copy { height: 40px; }
  .cd { gap: 7px; font-size: var(--fs-11); }
}

/* header: logo, links right after it, buttons pushed to the right edge; burger up to 1279px so the wallet buttons never overlap the links */
@media (min-width: 1300px) { .ca-strip > .container { max-width: calc(1600px + var(--gutter) * 2); } .nav > .container { max-width: calc(1600px + var(--gutter) * 2); grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0; } .nav-links { justify-self: start; margin-left: 36px; } .nav-cta { margin-left: 32px; } }
@media (max-width: 1299px) {
  .nav-links { display: none; }
  .nav > .container { grid-template-columns: 1fr auto auto; gap: 12px; }
  .burger { display: inline-flex; }
}
.logo { min-height: 40px; }

/* HUD: right edge on the container edge; shown over the hero only (stage.js toggles .hud.is-off); off below 1024 */
.hud { right: max(var(--gutter), calc((100% - var(--container)) / 2)); transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.hud.is-off { opacity: 0; visibility: hidden; }
@media (max-width: 1023px) { .hud { display: none; } }

/* token section: market rows on one pitch, both columns start on one line, the alloc box gets its padding */
.tm-grid { align-items: start; }
#token .rows code { overflow-wrap: anywhere; }
@media (min-width: 1024px) { #token .two > div:first-child { padding-top: 0; } }
.alloc { padding: 14px 18px 8px; margin: 0 0 28px; }
.alloc > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.alloc .pf-kv { margin-top: 0; }

/* proofs: titles wrap (never clip the role); sibling cards share the header row height */
.proofs { grid-auto-rows: auto; }
.pf-row { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.pf-h { align-items: flex-start; }
.pf-h b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; flex: 1 1 auto; }
.pf-dot { margin-top: 6px; }
.pf-addr { line-height: 1.6; }
.pf-kv { align-self: start; }

/* inline code in the hero CA field keeps its label on one line */
.ca-field > span { white-space: nowrap; flex: none; }

/* coordinates: links keep a 40px hit area on phones without moving the rows */
@media (max-width: 767px) {
  .c-row > a.link { padding-block: 10px; margin-block: -10px; }
  .f-links { gap: 0; }
  .f-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
  .btn--sm { height: 40px; }
  .copy { height: 40px; padding: 0 12px; }
  .ca-field { padding-block: 0; }
  .burger, .burger[style] { width: 40px; margin-right: 0; }
  .nav-cta .btn { height: 40px; }
}

/* no live blur (Chromium/macOS, or ?blur=0): the remaining glass panels get a denser tint */
html.no-bdf .hero-meta .st:not([data-state="live"]) { background: rgba(5, 8, 13, .82); }
html.no-bdf .wp-toc { background: rgba(8, 13, 20, .9); }
html.no-bdf .nf-card { background: rgba(10, 15, 22, .92); }
html.no-bdf .tk .tk-top .tk-mode { background: rgba(5, 8, 13, .92); }
@media (max-width: 767px) {
  .f-links a, .c-row > a.link { min-width: 40px; }
  .nav > .container { gap: 6px; }
  .nav .logo { letter-spacing: .16em; }
  .nav-cta .btn { letter-spacing: .03em; }
}
/* tap targets, desktop: every control is at least 24 × 24 px. Padding only (the negative margin keeps the layout where it
   was; on inline links vertical padding never moves the line box). Phones keep the 40 px rules above. */
@media (min-width: 768px) {
  .link { padding-block: 4px; margin-block: -4px; }
  .ca-copy { min-height: 24px; }
  .ca-socials a, .f-links a { min-width: 24px; }
  .ca-socials a { justify-content: center; }
  .copy { height: 24px; }
}
/* phones: standalone text links (not links inside a sentence) get a 40 px+ tall hit area, same padding trick */
@media (max-width: 767px) {
  .link:not(p .link):not(.c-row > .link), .tm-foot > .link, p.back > .link { padding-block: 12px; margin-block: -12px; }
}

/* ==========================================================================
   Visual review fixes (4 Nov 2026). Overrides only; header rules above stay as they are.
   ========================================================================== */
/* 1. addresses never break mid-string: one line, clipped with an ellipsis to the column. The full address stays in the
   element's text (larpcheck, copy handlers) and in its title attribute. */
.ca-field code, #hero-ca, #cta-addr, #t-addr, [data-addr], .addr, .pf-kv dd.addr, .wp-addr, #br-inbox, #token .rows code, .kv dd > code.mono {
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal !important; word-break: normal !important; }
#token .rows code.mono, .kv dd > code.mono, .wp-addr, #br-inbox, a[data-addr] { display: inline-block; max-width: 100%; vertical-align: bottom; }
.cta-cmd code#cta-addr { display: block; }
.pf-kv dd.addr { min-width: 0; flex: 1 1 auto; }
@media (max-width: 767px) { .pf-kv dd.addr { max-width: 100%; } }

/* 2. proofs: two-column masonry (pad-proofs.js places the cards, both columns end on one bottom edge) */
.proofs.is-masonry { grid-auto-rows: 1px; row-gap: 0; align-items: stretch; }
.proofs.is-masonry > .pf-row { display: flex; flex-direction: column; grid-template-rows: none; margin-bottom: 14px; }
.proofs.is-masonry > .pf-row > .pf-kv { flex: none; align-self: stretch; }

/* 3. FAQ answers: brighter text on an opaque surface while open; closed rows stay transparent */
.faq-a p, .faq-wrap .faq-a p { color: rgba(232, 241, 247, .78); }
.faq-item.is-open .faq-a > div { background: rgba(5, 8, 13, .55); box-shadow: inset 0 1px 0 var(--line-strong); }
.faq-wrap .faq-a p { padding: 0 48px 22px 16px; }
.faq-wrap .faq-a p:first-child { padding-top: 16px; }
@media (max-width: 1023px) { .faq-wrap .faq-a p { padding-right: 16px; } }

/* 4. scrim: the 160 px fade under the hero, then one flat overlay for every section below (no vignette, no ramp) */
.stage-scrim { background: linear-gradient(180deg, rgba(5, 8, 13, 0) 0, rgba(5, 8, 13, .80) 160px, rgba(5, 8, 13, .80) 100%); }

/* 6. no one-word last lines in running text */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

/* 7. FAQ rail spans four columns, so the heading sits at the same size as every other section heading */
@media (min-width: 1024px) { .faq-head { grid-column: 1 / span 4; } }

/* 8. tap targets: small controls get an invisible hit area (≥ 24 × 24) without changing their visual size */
.copy, .faq-ic, .ca-socials a, .wp-toc a, .br-link { position: relative; }
.copy::after, .faq-ic::after, .ca-socials a::after, .wp-toc a::after, .br-link::after { content: ""; position: absolute; pointer-events: auto; }
.copy::after { inset: -4px -2px; }
.faq-ic::after { inset: -4px; }
.ca-socials a::after { inset: 0 -6px; }
.wp-toc a::after { inset: -4px 0; }
.br-link::after { inset: -5px 0; }
#br-inbox { padding-block: 4px; margin-block: -4px; }   /* clipped (ellipsis), so padding instead of ::after */

/* 9. supply row: "minted · sent to 0x…dEaD"; on phones the note drops to its own line without the separator */
@media (max-width: 767px) { .tok-mkt [data-mkt="supply"] .tm-sep { display: none; } }

/* home proofs: compact cards (one line: name, address, hash check), tap to open */
.proofs.proofs--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.proofs--compact .pf-row { padding: 12px 14px; }
.proofs--compact .pf-h b { font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proofs--compact .pf-kv > div:not(:nth-child(2)) { display: none; }
.proofs--compact .pf-row.is-open .pf-kv > div { display: flex; }
.proofs--compact .pf-h { cursor: pointer; }
.proofs--compact .pf-h::after { content: "+"; margin-left: 8px; color: var(--text-faint); font-family: var(--font-mono); }
.proofs--compact .pf-row.is-open .pf-h::after { content: "−"; }
.proofs--compact .pf-wide { display: none !important; }
@media (max-width: 1100px) { .proofs.proofs--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .proofs.proofs--compact { grid-template-columns: minmax(0, 1fr); } }
.pf-more { margin: 20px 0 0; text-align: center; }
.proofs--compact .pf-row:not(.is-open) .pf-kv dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 767px) { .proofs--compact .pf-row:not(.is-open) .pf-kv { display: none; } }