/* ==== tokens.css ==== */
/* 369X design tokens. A visual refresh should mean editing this file, not the pages.
   Colours use hex first, then OKLCH where supported. Dark theme only (see docs/design-system.md). */

@font-face {
  font-family: "Geist";
  src: url(../fonts/Geist-Variable.woff2?v=8676fdb3a2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(../fonts/GeistMono-Variable.woff2?v=f503a4338f) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces: near-black, never pure #000 */
  --bg: #04090c;
  --bg-1: #071015;
  --bg-2: #0b171d;
  --bg-3: #102128;
  --line: #1a2c33;
  --line-2: #274048;

  /* Text */
  --text: #eef4f5;
  --text-2: #b9c8cd;
  --muted: #93a8af;
  --faint: #71878f;

  /* Brand (from the logo X and arrow) */
  --green: #39ff4a;
  --mint: #00ee9f;
  --aqua: #00e8d0;
  --cyan: #00d9ff;
  --brand-grad: linear-gradient(100deg, var(--green) 0%, var(--mint) 45%, var(--cyan) 100%);

  /* Semantic */
  --yes: #00ee9f;
  --no: #ff6b7a;
  --warn: #f4c66a;
  --info: #00d9ff;
  --lavender: #a99bff;

  /* Fee segments */
  --seg-1: #00ee9f;
  --seg-2: #a99bff;
  --seg-3: #00d9ff;
  --seg-4: #f4c66a;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;                                   /* 17px body */
  --step-1: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --step-5: clamp(2.75rem, 1.8rem + 4.2vw, 5.25rem);
  --step-6: clamp(3.25rem, 1.8rem + 6.4vw, 7.25rem);
  --lh-body: 1.6;
  --lh-tight: 1.04;
  --track-display: -0.03em;
  --track-head: -0.02em;
  --track-eyebrow: 0.14em;

  /* Space: 4/8 px scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px;
  --rhythm-compact: clamp(48px, 6vw, 72px);
  --rhythm-standard: clamp(72px, 9vw, 128px);
  --rhythm-expansive: clamp(96px, 13vw, 184px);

  /* Layout */
  --content-max: 1240px;
  --reading-max: 700px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;

  /* Shape */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;
  --hair: 1px solid var(--line);

  /* Motion: one easing family, no bounce */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-ui: 180ms;
  --t-reveal: 560ms;
  --t-diagram: 1100ms;

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --bg: oklch(0.145 0.012 220);
    --bg-1: oklch(0.172 0.014 220);
    --bg-2: oklch(0.205 0.017 218);
    --bg-3: oklch(0.245 0.02 215);
    --line: oklch(0.29 0.022 215);
    --line-2: oklch(0.36 0.026 212);
    --mint: oklch(0.85 0.19 162);
    --cyan: oklch(0.83 0.145 215);
    --green: oklch(0.88 0.26 142);
    --brand-grad: linear-gradient(100deg in oklch, var(--green) 0%, var(--mint) 45%, var(--cyan) 100%);
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: #e3ecee;
    --muted: #c3d2d6;
    --faint: #a9bcc2;
    --line: #3a5660;
    --line-2: #5a7b86;
  }
}

/* ==== base.css ==== */
/* Base: reset, typography, links, focus, utilities */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
hr { border: 0; border-top: var(--hair); margin: var(--s-8) 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 620; }
h2 { font-size: var(--step-4); line-height: 1.08; letter-spacing: var(--track-display); font-weight: 600; }
h3 { font-size: var(--step-2); line-height: 1.2; letter-spacing: var(--track-head); font-weight: 580; }
h4 { font-size: var(--step-1); line-height: 1.3; }
p { margin: 0 0 1em; text-wrap: pretty; hanging-punctuation: first; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li + li { margin-top: .35em; }
strong, b { font-weight: 620; }
small, .small { font-size: var(--step--1); }
code, .mono, kbd { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
code { font-size: .9em; background: var(--bg-2); border: var(--hair); border-radius: var(--r-1); padding: .08em .35em; }
kbd { font-size: .78em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: .05em .4em; color: var(--text-2); }
.num, .tnum, table { font-variant-numeric: tabular-nums; }
dfn { font-style: normal; }

a { color: var(--text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
a:hover { background-size: 100% 1px; }
.prose a, p a, dd a, figcaption a, td a, .fineprint a, .checklist a, .doc ul:not([class]) a, .rm__list a { color: var(--mint); background-size: 100% 1px; background-image: linear-gradient(color-mix(in srgb, var(--mint) 45%, transparent), color-mix(in srgb, var(--mint) 45%, transparent)); }
.prose a:hover, p a:hover, dd a:hover, td a:hover, .checklist a:hover, .doc ul:not([class]) a:hover { background-image: linear-gradient(var(--mint), var(--mint)); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  :focus-visible { animation: focus-in var(--t-ui) var(--ease); }
  @keyframes focus-in { from { outline-offset: 7px; outline-color: transparent; } }
}

::selection { background: color-mix(in srgb, var(--mint) 35%, transparent); color: var(--text); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--mint); color: #02130c; padding: 10px 16px; border-radius: var(--r-2); font-weight: 600; background-image: none; }
.skip-link:focus { top: 12px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mint); margin: 0 0 var(--s-5); font-weight: 500; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.muted { color: var(--muted); }
.fineprint { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }
.grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nowrap { white-space: nowrap; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==== layout.css ==== */
/* Layout: containers, sections, header, menus, footer, document layout */

.container { width: 100%; max-width: calc(var(--content-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.reading { max-width: var(--reading-max); }
.section { padding-block: var(--rhythm-standard); position: relative; }
.section--compact { padding-block: var(--rhythm-compact); }
.section--expansive { padding-block: var(--rhythm-expansive); }
.section--band { background: var(--bg-1); border-block: var(--hair); }
.section--flush-top { padding-top: 0; }
.section + .section:not(.section--band):not(.section--nodivide)::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); max-width: var(--content-max); margin-inline: auto; border-top: var(--hair); }
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-9); max-width: 780px; }
.section-head h2 { max-width: 20ch; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-9); } }

.split { display: grid; gap: var(--s-8); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .split--wide-right { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .split--center { align-items: center; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 32px); }
}
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-8); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.grid-2 { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.grid-3 { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Texture: fine dot grid at ≤4% for large dark surfaces */
.texture { position: relative; isolation: isolate; }
.texture::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(238, 244, 245, .035) 1px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, transparent 100%); }

/* ---------------------------------------------------------------- header */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform 260ms var(--ease); border-bottom: 1px solid transparent; }
.header.is-solid, .header.is-open { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(1px)) { .header.is-solid { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(1.2) blur(14px); } }
.header.is-hidden { transform: translateY(-100%); }
.header__bar { height: 100%; display: flex; align-items: center; gap: var(--s-5); }
.header__logo { display: inline-flex; align-items: center; flex: none; background: none; padding: 6px 0; }
.header__logo img { width: 104px; height: auto; }
.header__nav { flex: 1; display: none; justify-content: center; }
.header__tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.header__tools .header__cta { display: none; }
.js .header__nav { display: none; }
@media (min-width: 1080px) {
  .js .header__nav { display: flex; }
  .js .header__menu { display: none; }
  .header__tools .header__cta { display: inline-flex; }
}
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list > li + li { margin: 0; }
.nav__trigger { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: var(--step--1); font-weight: 500; color: var(--text-2); transition: color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease); }
.nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--text); background: var(--bg-2); }
.nav__item.is-active > .nav__trigger { color: var(--text); }
.nav__item.is-active > .nav__trigger::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--mint); margin-left: 2px; }
.nav__chev { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.search-trigger { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: var(--step--1); background: var(--bg-1); background-image: none; }
.search-trigger:hover { color: var(--text); border-color: var(--line-2); background-image: none; }
.search-trigger kbd { display: none; }
@media (min-width: 1180px) { .search-trigger kbd { display: inline; } }
.search-trigger__label { display: none; }
@media (min-width: 560px) { .search-trigger__label { display: inline; } }
.header__menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: var(--step--1); font-weight: 560; background-image: none; }
.header__menu:hover { background-image: none; border-color: var(--mint); }

/* Reading progress */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: var(--brand-grad); opacity: .9; pointer-events: none; }

/* Mega menu */
.mega { position: fixed; left: 0; right: 0; top: var(--header-h); background: var(--bg-1); border-bottom: var(--hair); box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); }
.mega[hidden] { display: none; }
.mega.is-entering { animation: mega-in 200ms var(--ease) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.mega__inner { max-width: calc(var(--content-max) + var(--gutter) * 2); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-9); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-9); }
.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-8); }
.mega__heading { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-4); }
.mega ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.mega li + li { margin: 0; }
.mega__cols a { display: grid; gap: 2px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r-2); background-image: none; }
.mega__cols a:hover, .mega__cols a:focus-visible { background: var(--bg-2); }
.mega__cols a[aria-current="page"] .mega__label::after { content: " ·"; color: var(--mint); }
.mega__label { font-weight: 560; }
.mega__desc { font-size: var(--step--1); color: var(--muted); }
.mega__feature { display: grid; align-content: end; gap: 6px; padding: var(--s-6); border: var(--hair); border-radius: var(--r-3); background: var(--bg); min-height: 220px; background-image: none; position: relative; overflow: hidden; }
.mega__feature:hover { border-color: var(--line-2); background-image: none; }
.mega__art { position: absolute; top: 24px; left: 24px; width: 110px; height: auto; }
.mega__art .on, .mega__art .vec { fill: var(--mint); stroke: var(--mint); }
.mega__art .off { fill: var(--line-2); }
.mega__art .tick { fill: var(--text); }
.mega__art .vec { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.mega__art.mini-donut { width: 88px; height: 88px; }
.mega__feature--links { align-content: start; padding-top: 104px; }
.mega__channels { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 4px; }
.mega__channels li { margin: 0; }
.mega__channels a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--mint); font-size: var(--step--1); background-image: none; }
.mega__channels a:hover { color: var(--text); background-image: none; }
.mega__art .seg-protocol { fill: var(--seg-1); } .mega__art .seg-creator { fill: var(--seg-2); } .mega__art .seg-depth { fill: var(--seg-3); } .mega__art .seg-lp { fill: var(--seg-4); }
.mega__ftitle { font-weight: 600; font-size: var(--step-1); letter-spacing: var(--track-head); }
.mega__ftext { color: var(--muted); font-size: var(--step--1); }
.mega-scrim { position: fixed; inset: var(--header-h) 0 0; background: rgba(2, 6, 8, .55); z-index: 40; }
.mega-scrim[hidden] { display: none; }

/* Mobile sheet: works without JS through :target */
.msheet { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: none; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.msheet:target, .msheet.is-open { display: flex; }
.msheet.is-open { animation: sheet-in 220ms var(--ease) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }
.msheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--gutter); border-bottom: var(--hair); flex: none; }
.msheet__close { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; font-size: var(--step--1); background-image: none; }
.msheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--gutter) var(--s-8); }
.msheet__search { width: 100%; justify-content: flex-start; height: 48px; margin-bottom: var(--s-4); }
.msheet__group { border-bottom: var(--hair); }
.msheet__group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: var(--step-1); font-weight: 560; cursor: pointer; }
.msheet__group summary::-webkit-details-marker { display: none; }
.msheet__group summary .icon { transition: transform var(--t-ui) var(--ease); color: var(--muted); }
.msheet__group[open] summary .icon { transform: rotate(180deg); }
.msheet__group ul { list-style: none; padding: 0 0 var(--s-4); margin: 0; }
.msheet__group li + li { margin: 0; }
.msheet__group a { display: flex; align-items: center; min-height: 48px; color: var(--text-2); background-image: none; }
.msheet__group a[aria-current="page"] { color: var(--mint); }
.msheet__foot { flex: none; padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); border-top: var(--hair); background: var(--bg-1); }
.msheet__foot .btn { width: 100%; justify-content: center; }
.msheet__foot .socials { justify-content: center; margin-top: var(--s-3); }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------------------------------------------------------------- breadcrumbs */
.crumbs { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--s-6); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); }

/* ---------------------------------------------------------------- page hero (inner pages) */
.phero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--rhythm-compact); position: relative; }
.phero__grid { display: grid; gap: var(--s-8); align-items: end; }
@media (min-width: 980px) { .phero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-10); } .phero__grid--center { align-items: center; } }
.phero h1 { max-width: 16ch; }
.phero h1.h1--long { max-width: 22ch; font-size: var(--step-4); }
.phero__answer { font-size: var(--step-1); line-height: 1.55; color: var(--text-2); max-width: 58ch; margin-top: var(--s-6); }
.phero__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-6); color: var(--muted); font-size: var(--step--1); }
.phero__visual { min-width: 0; }

/* ---------------------------------------------------------------- document layout with TOC */
.doc-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.doc-layout > .toc { order: -1; }
@media (min-width: 1100px) {
  .doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-10); align-items: start; }
  .doc-layout > .toc { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow: auto; }
}
.doc { min-width: 0; }
.doc > section { padding-block: var(--rhythm-compact); border-top: var(--hair); }
.doc > section:first-child { border-top: 0; padding-top: 0; }
.doc h2 { font-size: var(--step-3); max-width: 24ch; margin-bottom: var(--s-5); }
.doc h3 { font-size: var(--step-1); margin: var(--s-7) 0 var(--s-3); }
.doc .prose, .doc > section > p, .doc > section > ul, .doc > section > ol { max-width: var(--reading-max); }
.prose > * + * { margin-top: 1em; }
.prose h3 { margin-top: var(--s-7); }

.toc__box { border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); }
.toc__h { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.toc__h::-webkit-details-marker { display: none; }
.toc__h .icon { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease); }
.toc__box[open] .toc__h .icon { transform: rotate(180deg); }
.toc__list { list-style: none; margin: 0; padding: 0 8px 12px; counter-reset: toc; }
.toc__list li { margin: 0; }
.toc__list a { display: block; padding: 6px 8px 6px 12px; border-left: 1px solid var(--line); font-size: var(--step--1); color: var(--muted); line-height: 1.4; background-image: none; }
.toc__list a:hover { color: var(--text); }
.toc__list a.is-current { color: var(--text); border-left-color: var(--mint); }
@media (min-width: 1100px) {
  .toc__box { border: 0; background: none; }
  .toc__h { padding: 0 0 12px; cursor: default; pointer-events: none; }
  .toc__h .icon { display: none; }
  .toc__list { padding: 0; }
}
@media (max-width: 1099px) { .toc { position: sticky; top: calc(var(--header-h) + 8px); z-index: 20; } .toc__box:not([open]) { background: color-mix(in srgb, var(--bg-1) 94%, transparent); } }

/* ---------------------------------------------------------------- footer */
.footer { border-top: var(--hair); background: var(--bg-1); padding-top: var(--s-11); padding-bottom: var(--s-8); margin-top: 0; }
.footer__top { display: grid; gap: var(--s-9); }
@media (min-width: 1040px) { .footer__top { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-10); } }
.footer__brand img { width: 220px; }
.footer__entity { color: var(--muted); font-size: var(--step--1); margin-top: var(--s-5); max-width: 36ch; }
.footer__tagline { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-2); margin-top: var(--s-5); }
.footer__tagline span { color: var(--mint); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
@media (min-width: 720px) { .footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer__h { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: var(--s-4); }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li + li { margin-top: 6px; }
.footer__col a { color: var(--text-2); font-size: var(--step--1); display: inline-block; padding-block: 3px; }
.footer__col a:hover { color: var(--text); }
.footer__connect { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--hair); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: center; justify-content: space-between; }
.app-textlink { min-height: 44px; }
.footer__status { margin-top: var(--s-6); padding-top: var(--s-6); border-top: var(--hair); display: grid; gap: var(--s-4); font-size: var(--step--1); color: var(--muted); }
@media (min-width: 900px) { .footer__status { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.footer__risk { max-width: 72ch; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; padding: 0; margin: 0; }
.footer__legal li { margin: 0; }
.footer__legal a { color: var(--muted); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); font-size: var(--step--2); color: var(--faint); font-family: var(--font-mono); letter-spacing: .04em; }
.statusline { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); }
.statusline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent); flex: none; }

.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); background-image: none; }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top .icon { transform: rotate(-90deg); }


@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }
::view-transition-new(root) { animation-name: vt-in; }
::view-transition-old(root) { animation-name: vt-out; }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vt-out { to { opacity: 0; } }
.header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ==== components.css ==== */
/* Components: buttons, badges, tables, callouts, FAQ, forms, calculators, search dialog */

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 580; font-size: var(--step--1); letter-spacing: .005em; background-image: none; transition: transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease); white-space: nowrap; }
.btn:hover { background-size: auto; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .icon { transition: transform var(--t-ui) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { background: var(--brand-grad); color: #021309; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.4); }
.btn--primary:hover { background: var(--brand-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 20px -8px color-mix(in srgb, var(--mint) 70%, transparent); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-2); background: var(--bg-2); }
.btn--sm { min-height: 40px; padding: 0 16px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; color: var(--mint); background-image: none; }
.textlink .icon { width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease); }
.textlink:hover { background-image: none; }
.textlink:hover .icon { transform: translateX(3px); }

/* Status badges: shape + icon + text, never colour alone */
.status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); font-size: var(--step--2); font-weight: 560; letter-spacing: .02em; border: 1px solid; white-space: nowrap; vertical-align: middle; line-height: 1; flex: none; }
.status__icon { width: 14px; height: 14px; }
.status--testnet { color: #7cf5c8; border-color: color-mix(in srgb, var(--mint) 40%, transparent); background: color-mix(in srgb, var(--mint) 9%, transparent); }
.status--planned { color: #8fe6ff; border-color: color-mix(in srgb, var(--cyan) 40%, transparent); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.status--rolling { color: #b9f58f; border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 7%, transparent); }
.status--tge { color: #c9c0ff; border-color: color-mix(in srgb, var(--lavender) 45%, transparent); background: color-mix(in srgb, var(--lavender) 9%, transparent); }
.status--design { color: var(--text-2); border-color: var(--line-2); background: var(--bg-2); }
.status--proposed { color: #f7d794; border-color: color-mix(in srgb, var(--warn) 40%, transparent); border-style: dashed; background: transparent; }
.status--vision { color: var(--muted); border-color: var(--line-2); border-style: dotted; background: transparent; }
.status--illustrative { color: var(--muted); border-color: var(--line-2); }
.status--verified { color: var(--mint); border-color: var(--mint); }
.status-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.status-legend li { display: grid; grid-template-columns: 170px 1fr; gap: var(--s-4); align-items: center; margin: 0; font-size: var(--step--1); color: var(--muted); }
@media (max-width: 560px) { .status-legend li { grid-template-columns: 1fr; gap: 6px; } }

.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tag--illustrative { border: 1px dashed var(--line-2); padding: 3px 8px; border-radius: var(--r-1); color: var(--text-2); }

.model-label { display: inline-flex; gap: 10px; align-items: center; font-size: var(--step--1); color: var(--text-2); border: var(--hair); background: var(--bg-1); padding: 8px 14px; border-radius: var(--r-pill); margin: 0; }
.model-label .icon { color: var(--lavender); }
.updated { color: var(--muted); font-size: var(--step--1); }

/* Big numbers */
.bignum { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-6); line-height: .9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; display: inline-block; }
.bignum--md { font-size: var(--step-5); }
.bignum--sm { font-size: var(--step-3); letter-spacing: -0.03em; }
.keyfig { display: grid; gap: var(--s-3); }
.keyfig__label { color: var(--muted); font-size: var(--step--1); max-width: 30ch; }
.stat-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--hair); }
@media (min-width: 720px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-strip li { margin: 0; padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: var(--hair); display: grid; gap: 4px; }
.stat__num { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--step--1); color: var(--muted); }

/* Chips */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: var(--hair); border-radius: var(--r-pill); font-size: var(--step--1); color: var(--text-2); background: var(--bg-1); }
.chip .icon { color: var(--mint); }
.chips--quiet .chip { background: transparent; }

/* Callouts */
.callout { border: var(--hair); border-left: 2px solid var(--mint); background: var(--bg-1); border-radius: var(--r-2); padding: var(--s-5) var(--s-6); display: grid; gap: 6px; max-width: var(--reading-max); }
.callout__title { font-weight: 600; display: flex; gap: 10px; align-items: center; }
.callout__title .icon { color: var(--mint); }
.callout--risk { border-left-color: var(--no); }
.callout--risk .callout__title .icon { color: var(--no); }
.callout--warn { border-left-color: var(--warn); }
.callout--warn .callout__title .icon { color: var(--warn); }
.inshort { border-top: 1px solid var(--mint); padding-top: var(--s-4); max-width: var(--reading-max); }
.inshort__k { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mint); margin-bottom: 8px; display: block; }
.pullquote { font-size: var(--step-3); line-height: 1.2; letter-spacing: var(--track-head); font-weight: 520; max-width: 26ch; margin: 0; }
.pullquote em { font-style: normal; color: var(--mint); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 2px; }
.data-table { width: 100%; font-size: var(--step--1); }
.data-table caption { text-align: left; padding: var(--s-4) var(--s-5); color: var(--text-2); font-weight: 560; caption-side: top; border-bottom: var(--hair); }
.data-table th, .data-table td { padding: 12px var(--s-5); text-align: left; vertical-align: top; border-bottom: var(--hair); }
.data-table thead th { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500; white-space: nowrap; }
.data-table tbody th { font-weight: 560; }
#sale-phases-table tbody th, #fee-tiers tbody th, #leverage-tiers tbody th, #lp-tiers tbody th { white-space: nowrap; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tfoot th, .data-table tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; font-weight: 600; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table .desc { color: var(--muted); min-width: 220px; }
.data-table tr { transition: background-color var(--t-ui) var(--ease); }
.data-table tr.is-hl { background: color-mix(in srgb, var(--mint) 8%, transparent); }
.data-table .row-muted > * { color: var(--muted); }
.data-table--compact th, .data-table--compact td { padding: 8px 12px; }
details .data-table, .calc .data-table { border: var(--hair); border-radius: var(--r-2); margin-top: var(--s-4); }
.row-note { font-size: var(--step--2); color: var(--faint); margin-top: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; vertical-align: 0; flex: none; }
.swatch--protocol { background: var(--seg-1); } .swatch--creator { background: var(--seg-2); } .swatch--depth { background: var(--seg-3); } .swatch--lp { background: var(--seg-4); }
.bar-cell { width: 34%; min-width: 90px; vertical-align: middle !important; }
.hbar { display: block; height: 8px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--mint), var(--cyan)); transform-origin: 0 50%; }
.hbar--mint { background: var(--mint); }
.th-sub { display: block; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--faint); margin-top: 2px; font-weight: 400; white-space: normal; }
.compare-table td { min-width: 200px; }
.compare-table .cell-text { display: block; margin-bottom: 8px; color: var(--text-2); }
.cell-src { display: block; font-size: 12px; color: var(--faint); }
.cell-src a, a.src { color: var(--muted); background-image: linear-gradient(var(--line-2), var(--line-2)); background-size: 100% 1px; }
.compare-table tbody th { min-width: 150px; position: sticky; left: 0; background: var(--bg-1); z-index: 1; }

/* Disclosure */
.disclosure { margin-top: var(--s-5); border-top: var(--hair); }
.disclosure > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--mint); font-weight: 560; font-size: var(--step--1); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "+"; font-family: var(--font-mono); width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 5px; font-size: 13px; line-height: 1; }
.disclosure[open] > summary::before { content: "−"; }
.disclosure > :not(summary) { animation: fade-down 260ms var(--ease); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } }

/* FAQ */
.faq { border-top: var(--hair); }
.faq__item { border-bottom: var(--hair); }
.faq__item > summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s-5); align-items: center; padding: 20px 0; cursor: pointer; font-size: var(--step-1); font-weight: 540; letter-spacing: -0.01em; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover .faq__q { color: var(--mint); }
.faq__q { transition: color var(--t-ui) var(--ease); }
.faq__icon { width: 22px; height: 22px; color: var(--muted); transition: transform 240ms var(--ease); flex: none; }
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--mint); }
.faq__a { padding: 0 0 var(--s-6); color: var(--text-2); max-width: 68ch; }
.faq__item[open] .faq__a { animation: fade-down 260ms var(--ease); }
.faq-group + .faq-group { margin-top: var(--s-10); }
.faq-group h2 { font-size: var(--step-3); margin-bottom: var(--s-5); }

/* Filter / search inputs */
.filter { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-8); }
.input { height: 48px; padding: 0 16px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--bg-1); min-width: 0; width: 100%; max-width: 420px; }
.input:focus-visible { border-color: var(--cyan); outline: none; box-shadow: var(--focus); }
.filter__count { font-size: var(--step--1); color: var(--muted); }
[data-hidden] { display: none !important; }

/* Glossary */
.az-rail { position: sticky; top: calc(var(--header-h) + 8px); z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); padding-block: 10px; border-bottom: var(--hair); margin-bottom: var(--s-6); }
.az-rail ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.az-rail li { margin: 0; }
.az-rail a { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: var(--r-1); font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); background-image: none; }
.az-rail a:hover { background: var(--bg-2); color: var(--mint); }
.gloss-letter { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-top: var(--hair); }
@media (min-width: 900px) { .gloss-letter { grid-template-columns: 120px minmax(0, 1fr); } }
.gloss-letter__h { font-size: var(--step-4); color: var(--mint); font-weight: 500; line-height: 1; }
.terms { margin: 0; display: grid; gap: var(--s-5); }
.term { display: grid; gap: 4px; max-width: 72ch; scroll-margin-top: calc(var(--header-h) + 72px); }
.term dt { font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; }
.term dd { margin: 0; color: var(--text-2); }
.term:target dt { color: var(--mint); }
.term__more { font-size: var(--step--1); white-space: nowrap; }

/* Related + series */
.related { margin-top: var(--rhythm-compact); }
.related__h { font-size: var(--step-2) !important; margin-bottom: var(--s-5); }
.related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related__list li { margin: 0; }
.related__card { display: grid; gap: 8px; height: 100%; padding: var(--s-5); border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); position: relative; background-image: none; transition: transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.related__card:hover { transform: translateY(-2px); border-color: var(--line-2); background-image: none; }
.related__title { font-weight: 600; padding-right: 28px; }
.related__desc { color: var(--muted); font-size: var(--step--1); }
.related__arrow { position: absolute; top: var(--s-5); right: var(--s-5); color: var(--mint); width: 18px; height: 18px; }
.series-nav { margin-top: var(--rhythm-compact); padding-top: var(--s-6); border-top: var(--hair); }
.series-nav__pos { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); }
.series-nav__links { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 720px) { .series-nav__links { grid-template-columns: 1fr 1fr; } }
.series-nav__link { display: grid; gap: 4px; padding: var(--s-5); border: var(--hair); border-radius: var(--r-3); font-weight: 580; background-image: none; }
.series-nav__link:hover { border-color: var(--mint); background-image: none; }
.series-nav__link--next { text-align: right; grid-column: 2; }
@media (max-width: 719px) { .series-nav__link--next { grid-column: auto; } }
.series-nav__dir { font-size: var(--step--1); color: var(--muted); font-weight: 400; }

/* Sources */
.source-list { padding-left: 1.4em; display: grid; gap: var(--s-4); max-width: 80ch; }
.source-list li { margin: 0; }
.source-list a { font-weight: 560; }
.src-meta { display: block; color: var(--muted); font-size: var(--step--1); }

/* Forms & calculators */
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--step--1); font-weight: 560; color: var(--text-2); }
.field input[type="text"], .field select { height: 48px; padding: 0 14px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--bg); width: 100%; font-family: var(--font-mono); font-size: var(--step-0); }
.field select { font-family: var(--font-sans); font-size: var(--step--1); }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--cyan); box-shadow: var(--focus); }
.field input[aria-invalid="true"] { border-color: var(--no); }
.field__hint { font-size: var(--step--2); color: var(--faint); margin: 0; }
.field__err { font-size: var(--step--1); color: var(--no); margin: 0; min-height: 0; }
.field__err:empty { display: none; }
.calc { border: var(--hair); border-radius: var(--r-4); background: var(--bg-1); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--s-6); container-type: inline-size; }
.calc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.calc__title { font-size: var(--step-1); }
.calc__fields { display: grid; gap: var(--s-4); }
@container (min-width: 560px) { .calc__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calc--fee .calc__fields, form[data-calc="fee"] .calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc__grid { margin: 0; display: grid; gap: 1px; background: var(--line); border: var(--hair); border-radius: var(--r-3); overflow: hidden; }
@container (min-width: 560px) { .calc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calc__grid .is-pos, .calc__grid .is-neg { grid-column: span 3; } .calc__grid--fees { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc__grid--fees .calc__total { grid-column: span 2; } }
.calc__grid > div { background: var(--bg); padding: 14px 16px; display: grid; gap: 2px; }
.calc__grid dt { font-size: var(--step--2); color: var(--muted); display: flex; align-items: center; }
.calc__grid dd { margin: 0; font-family: var(--font-mono); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.calc__grid .is-pos dd { color: var(--yes); }
.calc__grid .is-neg dd { color: var(--no); }
.calc__grid .is-pos dt::before { content: "▲"; font-size: 10px; margin-right: 6px; color: var(--yes); }
.calc__grid .is-neg dt::before { content: "▼"; font-size: 10px; margin-right: 6px; color: var(--no); }
.calc__total dd { font-weight: 600; }
.calc__big { display: grid; gap: 4px; margin: 0; }
.calc__big .bignum { font-size: var(--step-5); }
.calc__bigcap { color: var(--muted); font-size: var(--step--1); }
.calc .flash { animation: tick 420ms var(--ease); }
@keyframes tick { from { color: var(--mint); } }

/* Ledger (worked examples) */
.ledger { border: var(--hair); border-radius: var(--r-4); background: var(--bg-1); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--s-5); }
.ledger__title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 580; margin: 0; }
.ledger__rows { margin: 0; display: grid; }
.ledger__rows > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: var(--step--1); }
.ledger__rows dt { color: var(--text-2); }
.ledger__rows dd { margin: 0; font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.ledger__sum { border-bottom-style: solid !important; }
.ledger__sum dt { color: var(--text); font-weight: 580; }
.ledger__sum--pos dd { color: var(--yes); }
.ledger__sum--neg dd { color: var(--no); }

/* Seg control */
.seg-control { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: var(--hair); border-radius: var(--r-pill); background: var(--bg); }
.seg-btn { border: 0; background: transparent; color: var(--muted); font-size: var(--step--2); font-weight: 560; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--bg-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Copy buttons */
.copy-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: transparent; border-radius: var(--r-1); font-size: var(--step--2); padding: 4px 8px; color: var(--text-2); font-family: var(--font-mono); min-height: 32px; }
.copy-btn:hover { border-color: var(--mint); color: var(--text); }
.copy-btn.is-done { border-color: var(--mint); color: var(--mint); }

/* Search dialog */
.search-dialog { width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 80px)); margin: 72px auto auto; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-4); background: var(--bg-1); color: var(--text); box-shadow: 0 40px 80px -20px rgba(0,0,0,.7); overflow: hidden; }
.search-dialog::backdrop { background: rgba(2, 6, 8, .66); }
.search-dialog[open] { display: flex; flex-direction: column; animation: sheet-in 200ms var(--ease); }
.search-dialog__bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: var(--hair); }
.search-dialog__bar .icon { color: var(--muted); }
.search-dialog__input { flex: 1; height: 60px; border: 0; background: transparent; font-size: var(--step-1); min-width: 0; }
.search-dialog__input:focus-visible { outline: none; }
.search-dialog__close { border: 1px solid var(--line-2); background: transparent; border-radius: var(--r-1); height: 32px; padding: 0 8px; font-size: var(--step--2); color: var(--muted); }
.search-results { overflow-y: auto; padding: 8px; margin: 0; list-style: none; }
.search-results li { margin: 0; }
.search-results__group { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); padding: 12px 12px 6px; }
.search-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-2); background-image: none; }
.search-results a[aria-selected="true"], .search-results a:hover { background: var(--bg-3); }
.search-results__t { font-weight: 560; }
.search-results__t mark { background: none; color: var(--mint); }
.search-results__d { font-size: var(--step--1); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 24px 16px; color: var(--muted); font-size: var(--step--1); }
.search-empty a { color: var(--mint); }
.search-dialog__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: var(--hair); font-size: 12px; color: var(--faint); }

/* Site index */
.site-index { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.site-index h3 { font-family: var(--font-mono); font-size: var(--step--2) !important; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s-3) !important; font-weight: 500; }
.site-index ul { list-style: none; padding: 0; margin: 0; }
.site-index li { margin: 0 0 6px; font-size: var(--step--1); }

/* Socials, app link */
.socials { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--s-5); margin: 0; }
.socials li { margin: 0; }
.social-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-2); font-size: var(--step--1); background-image: none; }
.social-link:hover { color: var(--text); background-image: none; }
.social-link .icon { color: var(--mint); }

/* App tag inside buttons and links: status honesty while the app is on testnet */
.btn__tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-pill); background: rgba(2, 19, 9, .18); border: 1px solid rgba(2, 19, 9, .35); line-height: 1.3; }
.app-textlink .btn__tag, .olinks .btn__tag, .channel-card .btn__tag { background: color-mix(in srgb, var(--mint) 10%, transparent); border-color: color-mix(in srgb, var(--mint) 40%, transparent); color: #7cf5c8; margin-left: 4px; vertical-align: middle; }

/* Channel cards (contact, community) */
.channel-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .channel-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.channel-cards li { margin: 0; }
.channel-card { position: relative; display: grid; gap: 6px; height: 100%; padding: var(--s-6); border: var(--hair); border-radius: var(--r-4); background: var(--bg-1); background-image: none; transition: transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.channel-card:hover { transform: translateY(-2px); border-color: var(--mint); background-image: none; }
.channel-card__icon { width: 32px; height: 32px; color: var(--mint); margin-bottom: var(--s-3); }
.channel-card__name { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; }
.channel-card__handle { font-family: var(--font-mono); font-size: var(--step--1); color: var(--mint); }
.channel-card__desc { color: var(--muted); font-size: var(--step--1); }
.channel-card__arrow { position: absolute; top: var(--s-6); right: var(--s-6); width: 20px; height: 20px; color: var(--muted); }
.channel-card--app { border-color: color-mix(in srgb, var(--mint) 45%, var(--line)); }

/* Official links box */
.olinks { border: var(--hair); border-left: 2px solid var(--mint); border-radius: var(--r-3); background: var(--bg-1); padding: var(--s-5) var(--s-6); max-width: var(--reading-max); display: grid; gap: var(--s-3); }
.olinks__title { display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 0; }
.olinks__title .icon { color: var(--mint); }
.olinks__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.olinks__list li { margin: 0; display: grid; grid-template-columns: 90px 1fr; gap: var(--s-3); align-items: baseline; font-size: var(--step--1); }
.olinks__k { color: var(--muted); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.olinks__list a { color: var(--mint); font-family: var(--font-mono); }
.olinks__note { color: var(--text-2); font-size: var(--step--1); margin: 0; }
.anti-scam { border-left-color: var(--no); }
.app-link { color: var(--text-2); font-size: var(--step--1); max-width: 60ch; }

/* Contract list */
.contract-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: var(--hair); border-radius: var(--r-3); overflow: hidden; }
.contract-list li { margin: 0; background: var(--bg-1); padding: 14px 18px; display: grid; gap: 4px; }
@media (min-width: 720px) { .contract-list li { grid-template-columns: 210px 1fr; gap: var(--s-5); align-items: baseline; } }
.contract-list code { background: none; border: 0; padding: 0; color: var(--mint); font-size: var(--step--1); }
.contract-list span { color: var(--text-2); font-size: var(--step--1); }

/* Cards used sparingly (not as a repeating grid everywhere) */
.panel { border: var(--hair); border-radius: var(--r-4); background: var(--bg-1); padding: clamp(20px, 3vw, 36px); }
.panel--quiet { background: transparent; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.checklist li { margin: 0; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.checklist li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; border: 1px solid var(--mint); background: color-mix(in srgb, var(--mint) 12%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2300ee9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.checklist--no li::before { border-color: var(--no); background: color-mix(in srgb, var(--no) 10%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='%23ff6b7a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.numbered { counter-reset: n; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.numbered > li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); margin: 0; }
.numbered > li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--step--1); color: var(--mint); padding-top: 3px; }
.numbered h3 { font-size: var(--step-1) !important; margin: 0 0 4px !important; }

/* Definition pairs (fact sheet) */
.facts { margin: 0; display: grid; border-top: var(--hair); }
.facts > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--s-4); padding: 12px 0; border-bottom: var(--hair); font-size: var(--step--1); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--text); }

/* Reveal motion (content visible unless motion is ready) */
.motion-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
.motion-ready .reveal { transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .motion-ready .reveal:not(.is-in) { opacity: 1; transform: none; } }
.table-wrap > .data-table { min-width: 560px; }
.table-wrap > .data-table.tge-table, .table-wrap > #lp-tiers { min-width: 420px; }
.table-wrap--compare > .data-table { min-width: 720px; }

/* Competitor information note (the only date that stays visible on the site) */
.competitor-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--step--2); color: var(--muted); margin: 0 0 var(--s-4); max-width: 72ch; }
.competitor-note .icon { margin-top: 2px; color: var(--cyan); }
#sale-phases-table td:nth-child(5) { min-width: 200px; }
#sale-phases-table { font-size: 13px; }

/* ---------------------------------------------------------------- Addendum 4: Get started, Open app, documents */
.btn--ghost .btn__tag { background: color-mix(in srgb, var(--mint) 10%, transparent); border-color: color-mix(in srgb, var(--mint) 40%, transparent); color: #7cf5c8; }
.header__tools .header__app { display: none; position: relative; }
.header__tip { display: none; }
@media (min-width: 1080px) {
  .header__tools .header__app { display: inline-flex; }
}
/* Narrow desktop: Open app shrinks to its icon; the tooltip shows its name on hover and keyboard focus. */
@media (min-width: 1080px) and (max-width: 1319px) {
  .header__app { width: 40px; padding: 0; justify-content: center; }
  .header__app .header__app-text, .header__app .btn__tag { display: none; }
  .header__tip { display: block; position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; white-space: nowrap; padding: 6px 10px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-size: 12px; font-weight: 500; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
  .header__app:hover .header__tip, .header__app:focus-visible .header__tip { opacity: 1; transform: none; }
}
.msheet__foot .msheet__app { margin-top: var(--s-2); }
.footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }

.ready-band { margin-top: var(--rhythm-standard); padding-block: var(--rhythm-standard); border-top: var(--hair); background: linear-gradient(180deg, var(--bg-1), transparent); }
.ready-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.ready-band__h { margin: 0; font-size: var(--step-3); }

.doc-cards { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .doc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-cards > li + li { margin: 0; }
.doc-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-1); }
.doc-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-2); background: color-mix(in srgb, var(--mint) 10%, transparent); color: var(--mint); }
.doc-card__title { margin: 0; font-size: var(--step-1); }
.doc-card__desc { margin: var(--s-2) 0 0; color: var(--text-2); }
.doc-card__meta { margin: var(--s-3) 0 0; font-size: var(--step--1); color: var(--muted); }
.doc-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; }
.phero__doc { margin-top: var(--s-4); color: var(--text-2); font-size: var(--step--1); }
/* Narrowest desktop widths: search and Get started drop their decoration so the bar never overlaps. */
@media (min-width: 1080px) and (max-width: 1239px) {
  .header__bar { gap: var(--s-3); }
  .header .search-trigger__label { display: none; }
  .header__cta .icon { display: none; }
  .nav__trigger { padding: 0 10px; }
}
.header__tools > * { flex: none; }
.search-trigger kbd { white-space: nowrap; }
@media (min-width: 1320px) and (max-width: 1439px) { .header .search-trigger kbd { display: none; } }

/* ==== visuals.css ==== */
/* Signature visuals: Probability Line, Outcome Grid, Rising Vector, Rising Bars, and the diagrams built from them */

/* ---- Probability Line */
.pline { display: grid; gap: 10px; }
.pline__q { font-size: var(--step--1); color: var(--text); line-height: 1.4; font-weight: 500; }
.pline__track { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--no) 38%, var(--bg-3)); overflow: visible; }
.pline__yes { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px 0 0 3px; background: var(--yes); transition: width 900ms var(--ease); }
.pline__tick { position: absolute; top: -5px; bottom: -5px; left: var(--p); width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; transition: left 900ms var(--ease); }
.pline__nums { display: flex; justify-content: space-between; font-size: var(--step--2); color: var(--muted); letter-spacing: .04em; }
.pline__y b { color: var(--yes); font-weight: 600; }
.pline__n b { color: var(--no); font-weight: 600; }
.pline__nums b { font-size: var(--step--1); margin-left: 4px; }
.pline__y::before { content: "▲ "; color: var(--yes); font-size: 9px; }
.pline__n::before { content: "▼ "; color: var(--no); font-size: 9px; }

/* ---- Hero market board */
.board { margin: 0; border: var(--hair); border-radius: var(--r-4); background: linear-gradient(180deg, var(--bg-1), color-mix(in srgb, var(--bg-1) 60%, var(--bg))); padding: clamp(18px, 2.4vw, 28px); position: relative; }
.board__head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: var(--s-5); }
.board__sub { font-size: var(--step--2); color: var(--faint); }
.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.board__card { margin: 0; padding: 16px 0; border-top: var(--hair); display: grid; gap: 10px; }
.board__card:first-child { border-top: 0; padding-top: 4px; }
.board__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.board__cat { color: var(--mint); }
.board__rule { text-align: right; }
@media (max-width: 480px) { .board__rule { display: none; } }
.motion-ready .board__card { animation: rise-in 700ms var(--ease) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
.board.is-paused .pline__yes, .board.is-paused .pline__tick { transition-duration: 0s; }

/* ---- Outcome Grid */
.og { margin: 0; display: grid; gap: var(--s-7); align-items: center; container-type: inline-size; }
@container (min-width: 640px) { .og { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
@media (min-width: 760px) { .og { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.og__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, 1.2vw, 10px); aspect-ratio: 1; max-width: 340px; width: 100%; }
.og__dot { border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); aspect-ratio: 1; transition: background-color 260ms var(--ease), border-color 260ms var(--ease), transform 260ms var(--ease); transition-delay: calc(var(--k, 0) * 6ms); }
.og__dot.is-on { background: var(--yes); border-color: var(--yes); }
.og__side { display: grid; gap: var(--s-5); }
.og__readout { display: grid; gap: var(--s-3); margin: 0; }
.og__price { font-size: var(--step-6); font-weight: 600; letter-spacing: -0.05em; line-height: .9; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.og__text { color: var(--text-2); max-width: 36ch; }
.og__text strong { color: var(--yes); }
.og__controls { display: grid; grid-template-columns: 1fr auto; gap: 10px var(--s-4); align-items: center; }
.og__label { grid-column: 1 / -1; font-size: var(--step--1); color: var(--muted); }
.og__cap { grid-column: 1 / -1; font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mint) var(--fill, 50%), var(--line-2) var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mint); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--text); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--mint); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--mint); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--mint), 0 0 0 5px color-mix(in srgb, var(--cyan) 50%, transparent); }

/* ---- Lifecycle (scrollytelling on wide screens, stepped list on small) */
.lc { display: grid; gap: var(--s-8); }
.lc__visual { display: none; }
@media (min-width: 960px) {
  .lc { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s-11); }
  .lc__visual { display: block; position: sticky; top: calc(var(--header-h) + 60px); align-self: start; }
}
.lc__svg { width: 100%; max-width: 320px; }
.lc__rail { stroke: var(--line-2); stroke-width: 2; }
.lc__fill { stroke: var(--mint); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lc, 0)); transition: stroke-dashoffset 700ms var(--ease); }
.lc__node circle { fill: var(--bg); stroke: var(--line-2); stroke-width: 2; transition: fill 300ms var(--ease), stroke 300ms var(--ease); }
.lc__node text { fill: var(--muted); font-size: 15px; font-family: var(--font-sans); transition: fill 300ms var(--ease); }
.lc__node.is-done circle { fill: var(--mint); stroke: var(--mint); }
.lc__node.is-active circle { fill: var(--bg); stroke: var(--mint); stroke-width: 3; }
.lc__node.is-active text, .lc__node.is-done text { fill: var(--text); }
.lc__void .lc__branch { fill: none; stroke: var(--no); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.lc__void circle { fill: var(--bg); stroke: var(--no); stroke-width: 2; }
.lc__void text { fill: var(--no); font-size: 13px; font-family: var(--font-mono); }
.lc__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.lc__step { margin: 0; padding: var(--s-6) 0; border-top: var(--hair); display: grid; grid-template-columns: 52px 1fr; gap: 4px var(--s-4); transition: opacity 400ms var(--ease); }
.lc__step p { grid-column: 2; color: var(--text-2); max-width: 54ch; }
.lc__num { color: var(--mint); font-size: var(--step--1); padding-top: 6px; }
.lc__h { font-size: var(--step-2); }
.lc__step--void .lc__num, .lc__step--void .lc__h { color: var(--no); }
@media (min-width: 960px) {
  .lc__step { min-height: 30vh; align-content: center; border-top: 0; padding: var(--s-8) 0; }
  .motion-ready .lc__step:not(.is-active) { opacity: .38; }
}

/* ---- Fee split */
.feesplit { margin: 0; display: grid; gap: var(--s-6); }
.feesplit__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); }
.feesplit__total { display: grid; gap: 6px; margin: 0; }
.feesplit__caption { color: var(--muted); font-size: var(--step--1); }
.feebar { display: flex; gap: 3px; height: clamp(56px, 8vw, 84px); }
.feebar__seg { flex: 0 0 auto; width: calc(var(--w) - 3px); border-radius: var(--r-2); position: relative; display: flex; align-items: flex-end; padding: 10px 12px; color: #021309; font-family: var(--font-mono); font-weight: 600; font-size: var(--step--1); transition: width 700ms var(--ease), opacity 400ms var(--ease); overflow: hidden; min-width: 0; }
.feebar__seg--protocol { background: var(--seg-1); }
.feebar__seg--creator { background: var(--seg-2); }
.feebar__seg--depth { background: var(--seg-3); }
.feebar__seg--lp { background: var(--seg-4); }
.feebar__val { white-space: nowrap; }
.feesplit__note { color: var(--muted); font-size: var(--step--1); margin: 0; }
.feebar.is-built .feebar__seg { animation: seg-in 700ms var(--ease) both; }
.feebar.is-built .feebar__seg:nth-child(2) { animation-delay: 120ms; } .feebar.is-built .feebar__seg:nth-child(3) { animation-delay: 240ms; } .feebar.is-built .feebar__seg:nth-child(4) { animation-delay: 360ms; }
@keyframes seg-in { from { transform: scaleX(0); transform-origin: 0 50%; opacity: 0; } }
.feebar__seg.is-hl { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 520px) { .feebar__seg { padding: 8px 6px; font-size: 11px; } }

/* ---- Allocation donut ↔ table */
.alloc { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1360px) { .alloc { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-8); } .alloc__chart { position: sticky; top: calc(var(--header-h) + 32px); } }
.alloc__table tbody th { min-width: 190px; }
.alloc__table .desc { min-width: 200px; }
.alloc__chart { margin: 0; display: grid; gap: var(--s-4); justify-items: center; }
.donut { width: 100%; max-width: 320px; }
.donut__seg { cursor: pointer; transition: opacity 240ms var(--ease), transform 240ms var(--ease); transform-origin: 120px 120px; }
.alloc.is-focus .donut__seg:not(.is-hl) { opacity: .25; }
.donut__seg.is-hl { transform: scale(1.035); }
.donut__big { fill: var(--text); font-size: 30px; font-weight: 600; letter-spacing: -1px; font-family: var(--font-sans); }
.donut__small { fill: var(--muted); font-size: 12px; font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
.alloc__readout { font-size: var(--step--1); color: var(--muted); text-align: center; min-height: 3em; max-width: 30ch; }
.alloc__table tbody tr { cursor: pointer; }
.alloc__table tbody tr:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.mini-donut { width: 100%; height: auto; }
.motion-ready .alloc .donut__seg { animation: donut-in 900ms var(--ease) both; }
@keyframes donut-in { from { opacity: 0; } }

/* ---- Line & bar charts */
.chart { margin: 0; display: grid; gap: var(--s-4); }
.chart__svg { width: 100%; border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); padding: 8px; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__tick { fill: var(--faint); font-size: 11px; font-family: var(--font-mono); }
.chart__line { fill: none; stroke: var(--mint); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: color-mix(in srgb, var(--mint) 10%, transparent); }
.chart__dot { fill: var(--bg); stroke: var(--mint); stroke-width: 2; }
.chart__label { fill: var(--text); font-size: 11px; font-family: var(--font-mono); }
.chart__cap { stroke: var(--warn); stroke-dasharray: 4 4; stroke-width: 1; }
.chart__bar { fill: var(--cyan); opacity: .85; }
.chart__bar:hover { opacity: 1; fill: var(--mint); }
.chart figcaption, .chart > figcaption { font-size: var(--step--1); color: var(--muted); max-width: 80ch; }
.motion-ready [data-draw] .chart__line { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.motion-ready [data-draw].is-drawn .chart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease); }
.motion-ready [data-draw] .chart__bar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.motion-ready [data-draw].is-drawn .chart__bar { transform: none; transition: transform 800ms var(--ease); }

/* ---- Sale ladder */
.ladder { margin: 0; display: grid; gap: var(--s-4); }
.ladder__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: end; height: 220px; }
.ladder__step { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto auto; gap: 6px; }
.ladder__bar { align-self: end; height: var(--h); border-radius: var(--r-1) var(--r-1) 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 70%, transparent), color-mix(in srgb, var(--mint) 15%, transparent)); border-top: 2px solid var(--mint); }
.ladder__step--target .ladder__bar { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--cyan) 18%, transparent) 6px 7px); border: 1px dashed var(--cyan); border-bottom: 0; }
.ladder__price { font-family: var(--font-mono); font-size: var(--step-1); }
.ladder__name { font-size: var(--step--2); color: var(--muted); }
.ladder figcaption { font-size: var(--step--1); color: var(--muted); }

/* ---- Staking tiers */
.tiers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; } }
.tier { margin: 0; border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); padding: var(--s-5); display: grid; gap: 6px; }
@media (min-width: 820px) { .tier { min-height: calc(220px + var(--step) * 36px); align-content: end; } }
.tier:last-child { border-color: color-mix(in srgb, var(--mint) 50%, var(--line)); }
.tier__n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
.tier__name { font-size: var(--step-1) !important; margin: 0 !important; }
.tier__req, .tier__eff { font-size: var(--step--1); color: var(--muted); margin: 0; }
.tier__disc { margin: 6px 0; display: grid; gap: 2px; font-size: var(--step--1); color: var(--text-2); }
.tier__disc .bignum { color: var(--mint); }
.tier__eff strong { color: var(--text); }

/* ---- Leverage band */
.levband { margin: 0; display: grid; gap: var(--s-4); }
.levband__track { position: relative; height: 72px; border-radius: var(--r-2); background: var(--bg-2); margin-top: 44px; }
.levband__zone { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); display: flex; align-items: flex-end; padding: 8px 10px; font-size: 11px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.levband__zone--liq { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--no) 22%, transparent) 0 6px, color-mix(in srgb, var(--no) 10%, transparent) 6px 12px); color: #ffc2c9; border-radius: var(--r-2) 0 0 var(--r-2); }
.levband__zone--buffer { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.levband__zone--gain { background: color-mix(in srgb, var(--yes) 14%, transparent); color: #9bf5d2; justify-content: flex-end; border-radius: 0 var(--r-2) var(--r-2) 0; }
.levband__mark { position: absolute; top: -40px; bottom: 0; left: var(--at); width: 0; border-left: 1.5px solid var(--no); }
.levband__mark span { position: absolute; top: 0; right: 6px; white-space: nowrap; font-size: 12px; font-family: var(--font-mono); color: #ffc2c9; }
.levband__mark--be { border-left: 1.5px dashed var(--warn); top: -20px; }
.levband__mark--be span { color: #f7d794; }
.levband__mark--entry { border-left-color: var(--text); }
.levband__mark--entry span { color: var(--text); right: auto; left: 6px; }
.levband__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.levband figcaption { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 600px) { .levband__mark--be span { display: none; } .levband__zlabel { display: none; } }

/* ---- Ecosystem map */
.eco { margin: 0; display: grid; gap: var(--s-6); }
@media (min-width: 980px) { .eco { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; } }
.eco__svg { width: 100%; max-width: 620px; }
.eco__flow { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion-ready .eco:not(.is-drawn) .eco__flow { stroke-dashoffset: 1; }
.motion-ready .eco.is-drawn .eco__flow { stroke: var(--mint); stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease), stroke 1100ms var(--ease); }
.eco__node circle { fill: var(--mint); }
.eco__node--lps circle { fill: var(--seg-4); } .eco__node--creators circle { fill: var(--seg-2); } .eco__node--resolvers circle { fill: var(--cyan); } .eco__node--stakers circle { fill: var(--lavender); }
.eco__label { fill: var(--text); font-size: 15px; font-weight: 560; font-family: var(--font-sans); }
.eco__hub circle { fill: var(--bg-1); stroke: var(--mint); stroke-width: 1.5; }
.eco__hub text { fill: var(--text); font-size: 15px; font-weight: 600; font-family: var(--font-sans); }
.eco__hub .eco__hubsub { fill: var(--muted); font-size: 11px; font-weight: 400; font-family: var(--font-mono); }
.eco__legend { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); font-size: var(--step--1); color: var(--muted); }
.eco__legend li { margin: 0; padding-bottom: var(--s-3); border-bottom: var(--hair); }
.eco__legend strong { color: var(--text); display: block; }

/* ---- Architecture stack */
.arch { margin: 0; display: grid; gap: var(--s-5); }
.arch__stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.arch__layer { margin: 0; position: relative; border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); padding: var(--s-5) var(--s-6) var(--s-5) 76px; }
.arch__layer::after { content: ""; position: absolute; left: 38px; bottom: -11px; width: 1px; height: 11px; background: var(--mint); }
.arch__layer:last-child::after { display: none; }
.arch__layer--contracts { border-color: color-mix(in srgb, var(--mint) 45%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 6%, var(--bg-1)), var(--bg-1)); }
.arch__n { position: absolute; left: 22px; top: var(--s-5); color: var(--mint); font-size: var(--step--1); }
.arch__name { font-size: var(--step-1) !important; margin: 0 0 6px !important; }
.arch__layer p { color: var(--text-2); font-size: var(--step--1); margin: 0; }
.arch figcaption { font-size: var(--step--1); color: var(--muted); }
.motion-ready .arch:not(.is-drawn) .arch__layer { opacity: 0; transform: translateY(10px); }
.motion-ready .arch .arch__layer { transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i) * 120ms); }

/* ---- Roadmap */
.rm { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 var(--s-5); }
.rm__rail { position: relative; width: 2px; background: var(--line); margin-left: 13px; border-radius: 1px; }
.rm__fill { position: absolute; left: 0; top: 0; width: 2px; height: var(--fill, 14%); background: var(--mint); border-radius: 1px; transition: height 1200ms var(--ease); }
.rm__phases { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
.rm__phase { margin: 0; position: relative; border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); padding: var(--s-6); }
.rm__marker { position: absolute; left: calc(-1 * var(--s-5) - 21px); top: 30px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); }
.rm__phase--testnet .rm__marker { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mint) 20%, transparent); }
.rm__phase--planned .rm__marker { border-color: var(--cyan); }
.rm__phase--proposed { opacity: .88; border-style: dashed; }
.rm__phase--vision { opacity: .74; border-style: dotted; background: transparent; }
.rm__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); align-items: center; }
.rm__when { font-size: var(--step--1); color: var(--mint); margin: 0; }
.rm__title { font-size: var(--step-2) !important; margin: var(--s-3) 0 var(--s-4) !important; }
.rm__list { margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: var(--step--1); columns: 1; }
@media (min-width: 900px) { .rm__list { columns: 2; column-gap: var(--s-8); } .rm__list li { break-inside: avoid; } }

/* ---- LMSR explorer */
.lmsr { margin: 0; display: grid; gap: var(--s-5); border: var(--hair); border-radius: var(--r-4); background: var(--bg-1); padding: clamp(18px, 3vw, 32px); }
.lmsr__controls { display: grid; gap: 4px; }
.lmsr__controls label { font-size: var(--step--1); color: var(--text-2); }
.lmsr__svg { width: 100%; }
.lmsr__svg .ax { stroke: var(--line-2); }
.lmsr__svg .gl { stroke: var(--line); }
.lmsr__svg .tk { fill: var(--faint); font-size: 11px; font-family: var(--font-mono); }
.lmsr__svg .curve { fill: none; stroke: var(--mint); stroke-width: 2.5; }
.lmsr__svg .book { fill: none; stroke: var(--lavender); stroke-width: 2; stroke-dasharray: 5 4; }
.lmsr__svg .sel { fill: color-mix(in srgb, var(--mint) 12%, transparent); }
.lmsr__svg .marker { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3; }
.lmsr__svg .lbl { font-size: 12px; font-family: var(--font-sans); }
.lmsr__svg .lbl--l { fill: var(--mint); } .lmsr__svg .lbl--b { fill: var(--lavender); }
.lmsr__out { display: grid; gap: 6px; font-size: var(--step--1); color: var(--text-2); }
.lmsr__out p { margin: 0; }
.lmsr__k { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.lmsr__out p + p { margin-top: 6px; }
.lmsr figcaption { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Utility constellation */
.util { position: relative; display: grid; gap: var(--s-5); }
.util__core { display: none; }
.util__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: var(--hair); border-radius: var(--r-4); overflow: hidden; }
@media (min-width: 720px) { .util__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .util { grid-template-columns: 1fr 200px 1fr; align-items: center; }
  .util__core { display: grid; place-items: center; grid-column: 2; grid-row: 1; width: 200px; height: 200px; border-radius: 50%; border: 1px solid var(--mint); background: radial-gradient(circle, color-mix(in srgb, var(--mint) 14%, var(--bg)) 0%, var(--bg) 70%); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.03em; box-shadow: 0 0 0 16px color-mix(in srgb, var(--mint) 5%, transparent), 0 0 0 40px color-mix(in srgb, var(--mint) 3%, transparent); }
  .util__list { display: contents; }
  .util__item { border: var(--hair); border-radius: var(--r-3); }
  .util__item:nth-child(-n+3) { grid-column: 1; }
  .util__item:nth-child(n+4) { grid-column: 3; }
  .util__item:nth-child(1), .util__item:nth-child(4) { grid-row: 1; transform: translateY(-2px); }
}
.util__item { margin: 0; background: var(--bg-1); padding: var(--s-5); display: grid; gap: 8px; align-content: start; }
@media (min-width: 1100px) {
  .util { grid-template-rows: repeat(3, auto); row-gap: var(--s-4); }
  .util__core { grid-row: 1 / span 3; }
  .util__item:nth-child(1), .util__item:nth-child(4) { grid-row: 1; }
  .util__item:nth-child(2), .util__item:nth-child(5) { grid-row: 2; }
  .util__item:nth-child(3), .util__item:nth-child(6) { grid-row: 3; }
}
.util__icon { color: var(--mint); width: 24px; height: 24px; }
.util__item h3 { font-size: var(--step-1) !important; margin: 0 !important; }
.util__item p { font-size: var(--step--1); color: var(--text-2); margin: 0; }

/* ---- Flow steps */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); counter-reset: f; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
.flow__step { margin: 0; position: relative; border: var(--hair); border-radius: var(--r-3); padding: var(--s-6) var(--s-5) var(--s-5); background: var(--bg-1); }
.flow__step h3 { font-size: var(--step-1) !important; margin: 0 0 6px !important; }
.flow__step p { font-size: var(--step--1); color: var(--text-2); margin: 0; }
.flow__n { position: absolute; top: -12px; left: var(--s-5); background: var(--bg); border: 1px solid var(--mint); color: var(--mint); border-radius: var(--r-pill); font-size: 12px; padding: 1px 10px; }
@media (min-width: 860px) { .flow__step:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--mint); border-right: 1.5px solid var(--mint); transform: translateY(-50%) rotate(45deg); z-index: 1; } }
.flow--4 { } @media (min-width: 1000px) { .flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Product areas / USPs */
.areas { list-style: none; padding: 0; margin: 0; display: grid; border-top: var(--hair); }
@media (min-width: 760px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-9); } }
.area { margin: 0; padding: var(--s-6) 0; border-bottom: var(--hair); display: grid; gap: 8px; }
.area__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.area__n { color: var(--faint); font-size: var(--step--1); }
.area__name { font-size: var(--step-2) !important; margin: 0 !important; }
.area__name a { background-image: none; }
.area__name a:hover { color: var(--mint); }
.area p { color: var(--text-2); margin: 0; max-width: 46ch; }
.usps { list-style: none; padding: 0; margin: 0; display: grid; border-top: var(--hair); }
@media (min-width: 900px) { .usps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-9); } }
.usp { margin: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px var(--s-3); padding: var(--s-5) 0; border-bottom: var(--hair); align-items: start; }
.usp > .status { grid-column: 2; justify-self: start; margin-top: 6px; }
.usp__n { color: var(--mint); font-size: var(--step--1); padding-top: 2px; }
.usp__name { font-size: var(--step-0) !important; margin: 0 0 2px !important; font-weight: 600; letter-spacing: -0.005em; }
.usp p { font-size: var(--step--1); color: var(--text-2); margin: 0; }
.usp__link { white-space: nowrap; }

/* ---- Fee comparison */
.feecmp { margin: 0; display: grid; gap: var(--s-5); }
.feecmp__assume { font-size: var(--step--1); color: var(--text-2); max-width: 80ch; margin: 0; }
.feecmp__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: var(--hair); border-radius: var(--r-3); overflow: hidden; }
@media (min-width: 820px) { .feecmp__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.feecmp__item { margin: 0; background: var(--bg-1); padding: var(--s-5); display: grid; gap: 8px; align-content: start; }
.feecmp__venue { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.feecmp__detail { font-size: var(--step--1); color: var(--text-2); }
.feecmp figcaption { font-size: var(--step--1); color: var(--muted); max-width: 80ch; }

/* ---- Thumbs, bars, vector */
.thumb { width: 100%; height: auto; }
.thumb .on { fill: var(--mint); } .thumb .off { fill: var(--line-2); }
.thumb__curve { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.thumb__step { fill: none; stroke: var(--lavender); stroke-width: 2.5; stroke-dasharray: 5 4; }
.thumb__down { fill: none; stroke: var(--no); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 5; }
.thumb__ring { fill: color-mix(in srgb, var(--mint) 14%, transparent); stroke: var(--mint); stroke-width: 2; }
.thumb__ring2 { fill: color-mix(in srgb, var(--lavender) 14%, transparent); stroke: var(--lavender); stroke-width: 2; }
.rbars { width: 48px; height: 32px; fill: var(--mint); }
.vector { width: 100%; height: 80px; }
.vector path { fill: none; stroke: var(--mint); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion-ready .vector:not(.is-drawn) path { stroke-dashoffset: 1; }
.motion-ready .vector.is-drawn path { transition: stroke-dashoffset 1200ms var(--ease); }

/* ==== pages.css ==== */
/* Page-family and page-specific composition */

/* ---------------------------------------------------------------- home hero */
.hero { position: relative; padding-top: clamp(40px, 7vw, 96px); padding-bottom: var(--rhythm-standard); overflow: clip; }
.hero__grid { display: grid; gap: var(--s-9); align-items: center; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s-10); } }
.hero h1 { font-size: clamp(3rem, 1.4rem + 5.6vw, 6.5rem); letter-spacing: -0.045em; line-height: .96; max-width: 12ch; font-weight: 640; }
.hero h1 .grad-text { display: inline-block; padding-bottom: .06em; }
.hero__tagline { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.hero__tagline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; }
.hero__def { font-size: var(--step-1); color: var(--text-2); max-width: 46ch; margin-top: var(--s-6); line-height: 1.55; }
.hero__status { margin-top: var(--s-7); display: flex; gap: 10px; align-items: flex-start; font-size: var(--step--1); color: var(--muted); max-width: 52ch; }
.hero__vector { position: absolute; right: -4vw; top: 8%; width: 48vw; max-width: 760px; height: 70%; opacity: .5; pointer-events: none; z-index: -1; }
.hero__vector path { stroke: url(#vec-grad); }

/* ---------------------------------------------------------------- home sections */
.home-prob { display: grid; gap: var(--s-9); }
@media (min-width: 1040px) { .home-prob { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; } }
.home-prob h2 { max-width: 12ch; }

.moments { display: grid; gap: var(--rhythm-compact); }
.moment { display: grid; gap: var(--s-7); padding-top: var(--s-8); border-top: var(--hair); }
@media (min-width: 960px) {
  .moment { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-10); align-items: center; }
  .moment--flip > :first-child { order: 2; }
}
.moment__head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: var(--s-4); }
.moment__n { font-family: var(--font-mono); color: var(--faint); font-size: var(--step--1); }
.moment h3 { font-size: var(--step-3); letter-spacing: var(--track-display); max-width: 18ch; margin-bottom: var(--s-4); }
.moment p { color: var(--text-2); max-width: 48ch; }
.moment__visual { min-width: 0; }

.req-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.req-flow li { margin: 0; border: var(--hair); border-radius: var(--r-3); padding: var(--s-4); background: var(--bg-1); display: grid; gap: 6px; font-size: var(--step--1); color: var(--text-2); position: relative; }
.req-flow li strong { color: var(--text); font-size: var(--step-0); }
.req-flow li:last-child { border-color: color-mix(in srgb, var(--mint) 55%, var(--line)); }
.req-flow .mono { color: var(--mint); font-size: 12px; }
@media (max-width: 560px) { .req-flow { grid-template-columns: 1fr; } }

.big-creator { display: grid; gap: var(--s-5); }
.big-creator .bignum { font-size: clamp(5rem, 3rem + 10vw, 10rem); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.trust { display: grid; gap: 1px; background: var(--line); border: var(--hair); border-radius: var(--r-4); overflow: hidden; }
@media (min-width: 860px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust__cell { background: var(--bg); padding: clamp(20px, 3vw, 36px); display: grid; gap: 10px; align-content: start; }
.trust__cell .icon { color: var(--mint); width: 28px; height: 28px; }
.trust__cell h3 { font-size: var(--step-1); }
.trust__cell p { color: var(--text-2); font-size: var(--step--1); margin: 0; }
.trust__cell--wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); align-items: center; }
.trust__figs { display: flex; flex-wrap: wrap; gap: var(--s-7); margin: var(--s-3) 0; }
.trust__fig { display: grid; gap: 2px; }
.trust__fig b { font-size: var(--step-3); letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.trust__fig span { color: var(--muted); font-size: var(--step--2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }

.token-band { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 980px) { .token-band { grid-template-columns: minmax(0, 1.2fr) 240px minmax(0, .9fr); } }
.token-band__fig .bignum { font-size: clamp(5rem, 2.5rem + 9vw, 9.5rem); }
.token-band__fig p { color: var(--muted); max-width: 32ch; margin-top: var(--s-3); }
.token-band__donut { width: 220px; justify-self: center; }

.guides { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guides > li { margin: 0; }
.guide-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border: var(--hair); border-radius: var(--r-4); overflow: hidden; background: var(--bg-1); background-image: none; transition: transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.guide-card:hover { transform: translateY(-2px); border-color: var(--line-2); background-image: none; }
.guide-card__art { background: var(--bg); border-bottom: var(--hair); padding: var(--s-6); display: grid; place-items: center; aspect-ratio: 16 / 10; }
.guide-card__art svg { width: auto; height: 100%; max-height: 140px; }
.guide-card__body { padding: var(--s-5) var(--s-6) var(--s-6); display: grid; gap: 8px; align-content: start; }
.guide-card__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.guide-card__title { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.guide-card__desc { color: var(--muted); font-size: var(--step--1); }

.closing { text-align: left; padding-block: var(--rhythm-expansive); position: relative; overflow: clip; }
.closing__tag { font-size: clamp(2.6rem, 1rem + 7.5vw, 8rem); line-height: .95; letter-spacing: -0.05em; font-weight: 620; }
.closing__tag span { display: block; }
.closing__tag span:nth-child(2) { color: var(--text-2); }
.closing__tag span:nth-child(3) { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.closing .rbars { position: absolute; right: var(--gutter); bottom: var(--rhythm-standard); width: 120px; height: 80px; opacity: .8; }

/* ---------------------------------------------------------------- editorial family */
.manifesto { font-size: clamp(1.75rem, 1rem + 3.2vw, 3.5rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 540; max-width: 22ch; }
.manifesto em { font-style: normal; color: var(--mint); }
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: var(--hair); counter-reset: p; }
.principles li { margin: 0; counter-increment: p; display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-bottom: var(--hair); }
@media (min-width: 860px) { .principles li { grid-template-columns: 80px minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: baseline; } }
.principles li::before { content: counter(p, decimal-leading-zero); font-family: var(--font-mono); color: var(--mint); }
.principles h3 { font-size: var(--step-2); }
.principles p { color: var(--text-2); margin: 0; }

.paths { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path { border-top: 2px solid var(--mint); padding-top: var(--s-5); display: grid; gap: 8px; align-content: start; }
.path:nth-child(2) { border-top-color: var(--cyan); } .path:nth-child(3) { border-top-color: var(--lavender); }
.path h3 { font-size: var(--step-1); }
.path p { color: var(--text-2); font-size: var(--step--1); margin: 0; }

/* ---------------------------------------------------------------- brand */
.logo-tiles { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .logo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.logo-tile { border: var(--hair); border-radius: var(--r-4); overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.logo-tile__stage { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px); min-height: 220px; }
.logo-tile__stage img { width: min(100%, 340px); }
.logo-tile--light .logo-tile__stage { background: #f6f8f8; }
.logo-tile--dark .logo-tile__stage { background: var(--bg); }
.logo-tile__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: var(--s-4) var(--s-5); background: var(--bg-1); border-top: var(--hair); font-size: var(--step--1); }
.logo-tile__foot a { display: inline-flex; gap: 6px; align-items: center; color: var(--mint); }
.swatches { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.swatches li { margin: 0; border: var(--hair); border-radius: var(--r-3); overflow: hidden; background: var(--bg-1); }
.swatches__chip { height: 88px; }
.swatches__meta { padding: 12px 14px; display: grid; gap: 6px; font-size: var(--step--1); }
.swatches__meta span { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.dodont { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .dodont { grid-template-columns: 1fr 1fr; } }
.clearspace { position: relative; display: inline-grid; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r-2); background: var(--bg); }
.clearspace img { width: 220px; outline: 1px dashed color-mix(in srgb, var(--mint) 50%, transparent); }
.boiler { border: var(--hair); border-radius: var(--r-3); background: var(--bg-1); padding: var(--s-5); display: grid; gap: var(--s-4); max-width: 80ch; }
.boiler p { margin: 0; color: var(--text-2); }

/* ---------------------------------------------------------------- learn hub */
.path-strip { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: g; border-top: var(--hair); }
.path-strip > li { margin: 0; counter-increment: g; border-bottom: var(--hair); }
.path-strip a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-5) 0; background-image: none; }
@media (min-width: 900px) { .path-strip a { grid-template-columns: 64px 140px minmax(0, 1fr) auto; } }
.path-strip a::before { content: counter(g, decimal-leading-zero); font-family: var(--font-mono); color: var(--mint); }
.path-strip__art { display: none; }
@media (min-width: 900px) { .path-strip__art { display: block; width: 110px; } }
.path-strip__t { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; display: block; }
.path-strip__d { color: var(--muted); font-size: var(--step--1); display: block; margin-top: 2px; }
.path-strip .icon { color: var(--mint); transition: transform var(--t-ui) var(--ease); }
.path-strip a:hover .icon { transform: translateX(4px); }
.path-strip a:hover .path-strip__t { color: var(--mint); }

/* ---------------------------------------------------------------- 404 */
.nf { min-height: 70vh; display: grid; align-content: center; gap: var(--s-6); padding-block: var(--rhythm-standard); }
.nf h1 { max-width: 14ch; }
.nf .pline { max-width: 560px; }
.nf .pline__track { background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
.nf .pline__yes { display: none; }
.nf .pline__tick { left: 50%; animation: wander 4s var(--ease) infinite alternate; }
@keyframes wander { from { left: 38%; } to { left: 62%; } }

/* ---------------------------------------------------------------- policy family */
.family-policy .doc { max-width: 760px; }
.family-policy .doc > section > h2 { font-size: var(--step-2); }
.policy-note { font-size: var(--step--1); color: var(--muted); border: var(--hair); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); background: var(--bg-1); max-width: var(--reading-max); }

/* ---------------------------------------------------------------- article family */
.family-article .phero h1 { max-width: 20ch; font-size: var(--step-4); }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); color: var(--muted); margin-top: var(--s-5); }
.worked { border: var(--hair); border-radius: var(--r-4); background: var(--bg-1); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--s-4); max-width: var(--reading-max); }
.worked__title { font-weight: 600; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* compare */
.verdict { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .verdict { grid-template-columns: 1fr 1fr; } }
.verdict__col { border: var(--hair); border-radius: var(--r-3); padding: var(--s-6); background: var(--bg-1); }
.verdict__col h3 { font-size: var(--step-1); margin-bottom: var(--s-4); }
.verdict__col ul { margin: 0; color: var(--text-2); font-size: var(--step--1); }

/* risk matrix (security) */
.evidence { display: grid; gap: 1px; background: var(--line); border: var(--hair); border-radius: var(--r-3); overflow: hidden; }
.evidence__row { background: var(--bg-1); display: grid; gap: 6px var(--s-5); padding: var(--s-5); }
@media (min-width: 820px) { .evidence__row { grid-template-columns: 220px minmax(0, 1fr) 190px; align-items: start; } }
.evidence__row h3 { font-size: var(--step-0) !important; margin: 0 !important; font-weight: 600; }
.evidence__row p { margin: 0; color: var(--text-2); font-size: var(--step--1); }
.evidence__row .status { justify-self: start; }
@media (min-width: 820px) { .evidence__row .status { justify-self: end; } }

.facts--xl > div { font-size: var(--step-0); padding: 14px 0; }
.facts--xl dd { text-align: right; font-size: var(--step-1); }
.phero__visual > .rbars { width: 180px; height: 120px; justify-self: end; }

/* ---------------------------------------------------------------- Get started (Connect Wallet) */
.gs-body { min-height: 100vh; display: flex; flex-direction: column; }
.gs-body main { flex: 1; }
.gs-header { border-bottom: var(--hair); }
.gs-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
.gs-back { color: var(--text-2); font-size: var(--step--1); background-image: none; }
.gs-back:hover { color: var(--text); }
.gs { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 7vh, 80px) var(--gutter) var(--s-9); }
.gs__motif { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.gs__grid { width: min(760px, 120vw); height: auto; opacity: .06; }
.gs__grid .on { fill: var(--mint); }
.gs__grid .off { fill: var(--text-2); }
.gs__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.gs__line-yes { display: block; width: 58%; height: 100%; background: var(--brand-grad); opacity: .45; }
.gs__card { width: 100%; max-width: 520px; padding: clamp(22px, 5vw, 40px); border: 1px solid var(--line-2); border-radius: var(--r-4); background: color-mix(in srgb, var(--bg-1) 94%, transparent); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.gs__h { margin: var(--s-3) 0 var(--s-4); font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.05rem); line-height: 1.15; }
.gs__lede { margin: 0; color: var(--text-2); }
.gs__invite { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); background: color-mix(in srgb, var(--mint) 9%, transparent); color: var(--text); font-size: var(--step--1); }
.gs__invite[hidden] { display: none; }
.gs__invite .icon { flex: none; margin-top: 2px; color: var(--mint); }
.gs__btn { width: 100%; min-height: 56px; margin-top: var(--s-6); justify-content: center; font-size: var(--step-0); }
.gs__btn .icon { width: 22px; height: 22px; }
.gs__btn-icon { display: inline-flex; }
.gs__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(2, 19, 9, .3); border-top-color: #021309; animation: gs-spin .8s linear infinite; }
.gs__btn.is-busy { cursor: progress; }
.gs__btn.is-busy .gs__spinner { display: inline-block; }
.gs__btn.is-busy .gs__btn-icon { display: none; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gs__spinner { animation-duration: 2.4s; } }
.gs__note { margin: var(--s-3) 0 0; text-align: center; font-size: var(--step--1); color: var(--text-2); }
.gs__note:empty { margin: 0; }
.gs__note.is-error { color: var(--no); }
.gs__wallets { margin: var(--s-4) 0 0; text-align: center; font-size: var(--step--1); color: var(--muted); }
.gs__network { display: flex; justify-content: center; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--step--1); }
.gs__chain { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text); }
.gs__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.gs__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); color: #7cf5c8; }
.gs__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-6) 0 0; padding: var(--s-5) 0 0; border-top: var(--hair); font-size: var(--step--1); line-height: 1.35; color: var(--text-2); text-align: center; }
.gs__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.gs__steps li + li::before { content: "\2192"; position: absolute; left: calc(var(--s-3) / -2); top: 2px; transform: translateX(-50%); color: var(--muted); }
.gs__step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--mint); font-size: 12px; }
.gs__safety { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--bg-2); font-size: var(--step--1); color: var(--text-2); }
.gs__safety .icon { flex: none; margin-top: 2px; color: var(--mint); }
.gs__consent { margin: var(--s-4) 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.gs__learn { margin: var(--s-6) 0 0; font-size: var(--step--1); }

/* ---------------------------------------------------------------- moved-address page (/litepaper/) */
.redirect-page { max-width: 760px; padding-block: var(--rhythm-standard); }

/* ==== print.css ==== */
/* Print: readable black-on-white documents (protocol overview, policies, guides) */
@media print {
  :root { --bg: #fff; --bg-1: #fff; --bg-2: #f4f6f6; --text: #0a0f12; --text-2: #22303a; --muted: #44535c; --faint: #5b6a73; --line: #cfd8dc; --line-2: #b0bec5; }
  body { background: #fff; color: #0a0f12; font-size: 11pt; }
  .header, .footer__cols, .msheet, .to-top, .search-dialog, .toc, .actions, .seg-control, .og__controls, .progress, .mega-scrim, .skip-link, .related, .series-nav, [data-lmsr] input { display: none !important; }
  .section, .doc > section { padding-block: 16pt !important; }
  a { color: #0a0f12 !important; background: none !important; text-decoration: underline; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #44535c; }
  .table-wrap { overflow: visible; border-color: #cfd8dc; }
  .data-table th, .data-table td { border-color: #cfd8dc; }
  details { display: block; } details > summary { display: none; } details > * { display: block !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  h1, h2, h3 { break-after: avoid; } figure, table, .ledger { break-inside: avoid; }
  .footer { border: 0; padding-top: 12pt; }
}