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

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  line-height: var(--leading-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
h1 { font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.005em; }
h3 { font-size: var(--text-h3); font-weight: 600; }

p { margin: 0 0 var(--space-4); max-width: 62ch; color: var(--color-text-dim); }
p strong { color: var(--color-text); font-weight: 600; }
.text-body-lg { font-size: var(--text-body-lg); color: var(--color-text); }

a { color: var(--color-signal); }
img, svg { max-width: 100%; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-signal); color: var(--color-ground-sunken);
  padding: var(--space-2) var(--space-4); z-index: 100; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.section { padding-block: var(--section-pad-y); padding-inline: var(--space-4); }
.section-inner { max-width: 68rem; margin-inline: auto; }
.section--sunken { background: var(--color-ground-sunken); }



.meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-text-faint);
  letter-spacing: 0.01em;
}



.panel {
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-6);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: var(--line-width) solid transparent;
  cursor: pointer;
  white-space: normal;
  line-height: 1.25;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--color-signal);
  color: var(--color-ground-sunken);
}
.btn-primary:hover { background: var(--color-signal-strong); box-shadow: 0 0 0 6px var(--color-signal-wash); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled] { background: var(--color-border); color: var(--color-text-faint); cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--color-signal); color: var(--color-signal); }

.link-quiet {
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
}
.link-quiet:hover, .link-quiet:focus-visible { color: var(--color-signal); text-decoration-color: var(--color-signal); }

.link-inline {
  color: var(--color-signal); text-underline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- reveal-on-scroll: opacity + small transform only ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal] { transform: none; }
}

/* ===================== NAV ===================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ground-veil);
  backdrop-filter: blur(10px);
  border-bottom: var(--line-width) solid var(--color-border-soft);
}
.nav-inner {
  max-width: 68rem; margin-inline: auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.nav-brand {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--color-text); text-decoration: none; letter-spacing: -0.01em;
}
.nav-brand span { color: var(--color-signal); }
.nav-stat {
  display: none;
  align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-text-dim);
}
.nav-stat strong { color: var(--color-long); font-weight: 600; }
@media (min-width: 48rem){ .nav-stat { display: inline-flex; } }
.nav-cta { padding: var(--space-2) var(--space-4); font-size: 0.8125rem; }

/* ===================== HERO ===================== */
.hero { position: relative; padding-block: clamp(3rem, 5vw + 1rem, 6rem); overflow: clip; }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -8rem -10% auto -10%; height: 30rem;
  background: radial-gradient(55% 55% at 28% 25%, var(--color-signal-wash) 0%, transparent 72%);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.hero-copy h1 { max-width: 20ch; }
.hero-copy .text-body-lg { max-width: 46ch; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-2); }





/* the readout: real device evidence, standing on its own — no card, no nested frame */
.readout { position: relative; min-width: 0; }
.readout-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4); padding-bottom: var(--space-2);
  border-bottom: var(--line-width) solid var(--color-border-soft);
  font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-text-faint);
}

.readout figcaption { margin-top: var(--space-4); }

@media (max-width: 56rem){
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy h1 { max-width: none; }
  .readout { max-width: 24rem; margin-inline: auto; }
}

/* ===================== PIPELINE STRIP ===================== */






.pipeline-node .n {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--color-ground-raised); border: var(--line-width) solid var(--color-border);
  font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem; color: var(--color-signal);
  margin-bottom: var(--space-1);
}
.pipeline-node[data-role="you"] .n { border-color: var(--color-signal); background: var(--color-signal-wash); }



/* ===================== EVIDENCE / STAT GRID ===================== */
.stat-grid {
  display: flex; flex-wrap: wrap;
  gap: var(--space-8) var(--space-10);
  padding-block: var(--space-6);
  border-top: 2px solid var(--color-text);
  border-bottom: var(--line-width) solid var(--color-border-soft);
  margin-block: var(--space-6);
}
.stat-cell { min-width: 0; }
.stat-cell dt { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.stat-cell dd {
  margin: 0; font-family: var(--font-mono); font-weight: 600;
  font-size: var(--text-stat); line-height: 1;
  color: var(--color-text);
}
.stat-cell dd.is-positive { color: var(--color-long); }











/* hand-built signal waveform — decorative brand motif, not a data plot */




/* ===================== WALKTHROUGH ===================== */
.walk-strip { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x proximity; }
.walk-strip figure { flex: 0 0 min(13.5rem, 62vw); margin: 0; scroll-snap-align: start; }
.walk-strip .frame {
  transition: transform var(--dur-standard) var(--ease-out), filter var(--dur-standard) var(--ease-out);
  filter: drop-shadow(0 0.5rem 1.25rem var(--shadow-sm));
}
.walk-strip .frame:hover { transform: translateY(-3px); filter: drop-shadow(0 0.75rem 1.5rem var(--shadow-md)); }
.walk-strip img { width: 100%; height: auto; max-height: 27rem; object-fit: contain; object-position: top; display: block; }
.walk-strip figcaption { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-faint); margin-top: var(--space-2); }

/* ===================== FAQ accordion ===================== */
.faq details { border-top: var(--line-width) solid var(--color-border-soft); padding-block: var(--space-4); }
.faq details:last-child { border-bottom: var(--line-width) solid var(--color-border-soft); }
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-body-lg); list-style: none; color: var(--color-text);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); color: var(--color-signal);
  flex: none; transition: transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { margin-top: var(--space-3); font-size: var(--text-body); }

/* ===================== Persistent CTA bar ===================== */



.sticky-cta .btn-primary { padding: var(--space-2) var(--space-4); }



/* ===================== Footer ===================== */
.site-footer { border-top: var(--line-width) solid var(--color-border-soft); }
.site-footer .meta { max-width: 62ch; }

/* =====================================================================
   Multi-page additions — the Terminal Dashboard system extended from the
   single-page landing to the five-page site (Overview / Setup / Amplify /
   FAQ / Legal). Same tokens, same voice; nothing here introduces a new
   colour, radius or face.
   ===================================================================== */

/* ---- Risk strip: sits above the nav, compliance-first, never sticky ---- */
.risk-strip {
  background: var(--color-ground-sunken);
  border-bottom: var(--line-width) solid var(--color-border-soft);
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--color-text-faint);
}
.risk-strip .section-inner { padding: var(--space-2) var(--space-4); }
.risk-strip strong { color: var(--color-signal); font-weight: 600; }
.risk-strip a { color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 3px; }
.risk-strip a:hover { color: var(--color-signal); }

/* ---- Nav: brand + page links + CTA ---- */
.nav-links { display: none; align-items: center; gap: var(--space-5); }
.nav-links a {
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: 0.02em;
  color: var(--color-text-dim); text-decoration: none; padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a[aria-current="page"] { color: var(--color-signal); border-bottom-color: var(--color-signal); }
@media (min-width: 62rem){ .nav-links { display: flex; } .nav-stat { display: none; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; background: none; border: var(--line-width) solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 1.05rem; height: 1.5px; background: currentColor;
  position: relative; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after { position: absolute; top: 5px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }
@media (min-width: 62rem){ .nav-toggle { display: none; } }

.nav-drawer {
  display: none;
  border-bottom: var(--line-width) solid var(--color-border-soft);
  background: var(--color-ground-sunken);
  position: sticky; top: 3.5rem; z-index: 45;
}
body.nav-open .nav-drawer { display: block; }
@media (min-width: 62rem){ body.nav-open .nav-drawer { display: none; } }
.nav-drawer ol { list-style: none; margin: 0; padding: var(--space-2) var(--space-4); max-width: 68rem; margin-inline: auto; }
.nav-drawer li { border-top: var(--line-width) solid var(--color-border-soft); }
.nav-drawer li:first-child { border-top: 0; }
.nav-drawer a {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-block: var(--space-3); font-family: var(--font-mono); font-size: var(--text-body);
  color: var(--color-text-dim); text-decoration: none;
}
.nav-drawer a[aria-current="page"] { color: var(--color-signal); }
.drawer-telegram { color: var(--color-signal) !important; }
.nav-drawer .n { font-size: var(--text-meta); color: var(--color-text-faint); }

/* ---- Page head: the sub-pages' opener. Deliberately not a hero — a
       terminal shows a header row, not a billboard, on interior screens. ---- */
.page-head { padding-block: clamp(2.5rem, 4vw + 1rem, 4.5rem) 0; }
.page-head h1 { max-width: 22ch; }
.page-head .text-body-lg { max-width: 58ch; }





/* ---- Prose: legal and explanatory body copy ---- */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-2); }
.prose ul, .prose ol { margin: 0; padding-inline-start: 1.25em; color: var(--color-text-dim); max-width: 62ch; }
.prose li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-signal); }
.prose dt { font-weight: 600; color: var(--color-text); margin-top: var(--space-4); }
.prose dd { margin: var(--space-1) 0 0; color: var(--color-text-dim); max-width: 62ch; }

/* ---- Callout: a fact that changes what the reader should do next ---- */
.callout {
  border-left: 2px solid var(--color-signal);
  background: var(--color-signal-wash);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-6);
}
.callout h3 { font-size: var(--text-body-lg); margin-bottom: var(--space-2); }
.callout p:last-child { margin-bottom: 0; }
.callout ul { margin: var(--space-2) 0 0; padding-inline-start: 1.25em; color: var(--color-text-dim); }
.callout li { margin-top: var(--space-2); }
.callout li::marker { color: var(--color-signal); }
.callout--plain { border-left-color: var(--color-border); background: var(--color-ground-raised); }

/* ---- Definition rows: "three names", tier comparisons ---- */








/* ---- Chart: the public growth record, redrawn to the terminal palette.
       Replaces the decorative waveform — a page about a track record should
       plot the track record, not a squiggle that only suggests one. ---- */
















.section--sunken .chart-last { background: var(--color-ground-sunken); }

/* ---- Objections: the four questions that stop a click, answered beside it ---- */
.objections { margin-block: var(--space-8); }
.objections > div {
  display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
  border-top: var(--line-width) solid var(--color-border-soft);
}
.objections > div:last-child { border-bottom: var(--line-width) solid var(--color-border-soft); }
.objections dt { font-weight: 600; color: var(--color-text); }
.objections dd { margin: 0; color: var(--color-text-dim); }
.objections dd a { color: var(--color-signal); text-underline-offset: 3px; }
@media (max-width: 46rem){ .objections > div { grid-template-columns: minmax(0, 1fr); } }

/* ---- Spec strip: the four numbers people check before registering ---- */





/* ---- Footer: carries the disclosures on every page ---- */
.site-footer { background: var(--color-ground-sunken); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-8) var(--space-16);
}
@media (max-width: 56rem){ .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-lg); color: var(--color-text); }
.footer-brand span { color: var(--color-signal); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.footer-links a { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--color-signal); }
.footer-telegram { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none !important; }
.footer-telegram .icon-telegram { width: 1rem; height: 1rem; flex: none; fill: var(--color-signal); }
.footer-telegram:hover .icon-telegram { fill: var(--color-signal-strong); }
.token-support { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); }
.token-support .icon-telegram { width: 1rem; height: 1rem; margin-top: .1875rem; flex: none; fill: var(--color-signal); }
.token-support a { color: var(--color-signal); text-decoration: none; }
.token-support a:hover { color: var(--color-signal-strong); text-decoration: underline; }
.footer-disclosures { display: grid; gap: var(--space-4); }
.footer-disclosures p { font-size: var(--text-meta); color: var(--color-text-faint); max-width: 68ch; margin: 0; line-height: 1.7; }
.footer-disclosures strong { color: var(--color-text-dim); }
.footer-bottom {
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: var(--line-width) solid var(--color-border-soft);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-faint);
}

/* ---- Section rhythm helpers ---- */
.section-inner > .eyebrow:first-child { margin-top: 0; }

/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero / Long Document
 * design-system: ../design.md · designed-as-app
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 * Graphite and amber; readable sources, real evidence, no entrance animation. */
html,body{overflow-x:clip}
html{scroll-padding-top:calc(var(--header-height) + var(--space-6));scroll-behavior:auto}
body{font-size:1rem}
figure{margin:0}
h1,h2,h3{overflow-wrap:anywhere}
h1{letter-spacing:-.035em;line-height:1.08}
h2{letter-spacing:-.025em;line-height:1.15;max-width:28ch}
p{line-height:1.7}
a{transition:color var(--dur-fast) var(--ease-out)}
button,input{font:inherit}
button{touch-action:manipulation}
.meta,figcaption,.walk-strip figcaption,.risk-strip,.footer-links a,.footer-bottom{font-family:var(--font-body);font-size:var(--text-meta);line-height:1.65;letter-spacing:normal;color:var(--color-text-faint)}
.section-inner{max-width:72rem}
.section{padding-inline:var(--space-6)}
.section-inner>p{max-width:68ch}
.section-inner>h2+p{margin-bottom:var(--space-8)}
.btn{white-space:nowrap;min-height:2.75rem;line-height:1.25;box-shadow:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.btn-primary:hover{box-shadow:none}
.btn-primary:active{transform:none;background:var(--color-signal-deep)}
.link-quiet{font-family:var(--font-body);font-size:1rem;color:var(--color-text);text-decoration-color:var(--color-border);display:inline-block;white-space:nowrap}
.link-quiet:hover{text-decoration-color:var(--color-signal)}
.link-button{border:0;background:none;color:var(--color-signal);padding:var(--space-2) 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:2.75rem;white-space:nowrap}
[data-reveal]{opacity:1;transform:none;transition:none}
.risk-strip .section-inner{padding:var(--space-2) var(--space-6);max-width:75rem}
.risk-strip{font-size:.8125rem}
.risk-strip strong{color:var(--color-text-dim)}
.risk-strip a{white-space:nowrap;color:var(--color-text-dim)}
.nav{padding:var(--space-3) var(--space-6);backdrop-filter:none;background:var(--color-ground);}
.nav-inner{max-width:72rem;min-width:0;gap:var(--space-6)}
.nav-brand{white-space:nowrap;flex:none;font-size:1rem;gap:var(--space-1)}
.nav-links{gap:var(--space-5)}
.nav-links a{font-family:var(--font-body);font-size:.9375rem;letter-spacing:normal;white-space:nowrap;min-height:2.75rem;display:inline-flex;align-items:center}
.nav-inner>div:last-child{flex:none}
.nav-cta{font-size:.875rem;padding:var(--space-2) var(--space-4)}
.nav-telegram{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex:none;border:1px solid var(--color-border);border-radius:999px}
.nav-telegram .icon-telegram{width:1.125rem;height:1.125rem;fill:var(--color-text-dim)}
.nav-telegram:hover{border-color:var(--color-signal)}
.nav-telegram:hover .icon-telegram{fill:var(--color-signal)}
.nav-toggle{width:2.75rem;height:2.75rem;flex:none}
.nav-drawer{position:fixed;top:var(--header-height);left:0;right:0;max-height:calc(100dvh - var(--header-height));overflow:auto;z-index:45}
.nav-drawer ol{padding:var(--space-3) var(--space-6);max-width:75rem}
.nav-drawer a{font-family:var(--font-body);white-space:nowrap}
.hero{padding-block:clamp(3rem,5vw,5.5rem)}
.hero::before{display:none}
.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-16);align-items:center}
.hero-copy{gap:var(--space-5)}
.hero-copy>*{margin:0}
.hero-copy h1{max-width:17ch}
.hero-copy .text-body-lg{font-size:var(--text-body-lg);color:var(--color-text-dim);max-width:44ch}
.independent-label{font-size:var(--text-meta);color:var(--color-signal);font-family:var(--font-body)}
.hero-actions{gap:var(--space-6);margin-block:var(--space-2);}

.hero-copy .meta{max-width:54ch}
.hero-copy .meta[style]{margin-top:0!important}
.readout{margin:0;max-width:26rem;justify-self:end}
.readout-head{font-family:var(--font-body);font-size:var(--text-meta);color:var(--color-text-dim);gap:var(--space-3)}
.readout-head span{white-space:nowrap}
.readout img{max-height:28rem;object-fit:contain;width:100%}
.readout figcaption{margin-top:var(--space-4)}
.image-zoom{display:block;position:relative;color:var(--color-text);text-decoration:none}
.image-zoom:focus-visible{outline-offset:6px}
.image-zoom:hover .zoom-label{text-decoration:underline;text-underline-offset:3px}
.zoom-label{display:block;font-size:var(--text-meta);color:var(--color-signal);padding-top:var(--space-3);white-space:nowrap}

.facts-heading{font-size:1.125rem;margin-bottom:var(--space-6);font-weight:600}
.quick-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-6);margin:0 0 var(--space-6)}
.quick-facts div{min-width:0}
.quick-facts dt{color:var(--color-text-faint);font-size:var(--text-meta);margin-bottom:var(--space-2)}
.quick-facts dd{font:600 1.375rem/1.25 var(--font-display);margin:0 0 var(--space-2)}
.quick-facts small{color:var(--color-text-dim);font-size:.8125rem;display:block;max-width:25ch}



.source-snapshot{margin-block:var(--space-8);max-width:100%}
.source-snapshot img{width:100%;height:auto;border:1px solid var(--color-border)}
.source-snapshot figcaption{max-width:80ch;margin-top:var(--space-4)}
.source-snapshot figcaption a{display:inline-block;margin-left:var(--space-2)}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--color-border);gap:var(--space-8);padding-block:var(--space-6);margin-block:var(--space-8)}
.stat-cell dt{font-family:var(--font-body);font-size:var(--text-meta);text-transform:none;letter-spacing:normal;color:var(--color-text-dim)}
.stat-cell dd{font-size:clamp(1.75rem,2.7vw,2.75rem);font-weight:500;color:var(--color-text)}
.stat-cell .stat-date{font-size:clamp(1.4rem,2.3vw,2.25rem);line-height:1.25}
.evidence-detail{border-bottom:1px solid var(--color-border-soft);padding-bottom:var(--space-4);margin-bottom:var(--space-6)}
.evidence-detail summary{cursor:pointer;min-height:2.75rem;color:var(--color-text-dim)}
.evidence-detail p{margin-top:var(--space-4);max-width:74ch}
.walk-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);overflow:visible;padding:0}
.walk-strip figure{width:auto;min-width:0}
.walk-strip img{height:28rem;max-height:none;object-fit:contain;object-position:top left;width:100%;background:var(--color-ground-sunken)}
.walk-strip figcaption{margin-top:var(--space-3);max-width:31ch}
.objections{margin-block:var(--space-6)}
.objections>div{grid-template-columns:minmax(0,16rem) minmax(0,1fr);padding-block:var(--space-6);gap:var(--space-8)}
.handoff{margin-top:var(--space-4);max-width:58ch}
.page-head{padding-block:var(--space-12) 0}
.page-head h1{max-width:22ch}
.page-head .text-body-lg{max-width:58ch;color:var(--color-text-dim);margin-top:var(--space-5)}
.reviewed{margin-top:var(--space-6);padding:0;border:0}
.page-index{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);border-block:1px solid var(--color-border-soft);padding:var(--space-3) 0;margin-top:var(--space-8)}
.page-index a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.9375rem;white-space:nowrap;text-decoration:none}
.page-index a:hover{text-decoration:underline;text-underline-offset:4px}
.callout{border:1px solid var(--color-border);background:var(--color-ground-raised);padding:var(--space-6);margin-block:0 var(--space-8);max-width:52rem}
.callout p{max-width:70ch}
.callout--plain{margin-top:var(--space-8);background:transparent}
.callout h3{font-size:1.125rem}
.faq summary{font-size:1.125rem;align-items:center;line-height:1.5;min-height:2.75rem;gap:var(--space-6)}
.faq summary::after{font-size:1.25rem}
.def-list{margin-block:var(--space-8)}
.def-list>div{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--space-8);padding-block:var(--space-6);border-top:1px solid var(--color-border-soft)}
.def-list dt{font-weight:600}
.def-list dd{margin:0;color:var(--color-text-dim);max-width:65ch}
.glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-16);margin-top:var(--space-8)}
.glossary dt{font-weight:600;margin-bottom:var(--space-2)}
.glossary dd{margin:0;color:var(--color-text-dim);max-width:45ch}
.checklist{border:1px solid var(--color-border);padding:var(--space-6);max-width:52rem;margin-top:var(--space-10)}
.checklist label{display:flex;gap:var(--space-3);align-items:center;min-height:3rem;color:var(--color-text-dim);cursor:pointer}
.checklist input{width:1.25rem;height:1.25rem;accent-color:var(--color-signal);flex:none}
.checklist h3{font-size:1.25rem}
.checklist [role=status]{margin:0}
.table-scroll{overflow:auto;margin-block:var(--space-8);border:1px solid var(--color-border-soft)}
.comparison{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:44rem}
.comparison th,.comparison td{text-align:left;vertical-align:top;padding:var(--space-5);border-bottom:1px solid var(--color-border-soft);width:25%;line-height:1.6}
.comparison td{color:var(--color-text-dim)}
.comparison thead{background:var(--color-ground-raised)}
.comparison tbody th{font-weight:500}
.faq{max-width:52rem}
.faq-group{font-size:1rem;color:var(--color-text-faint);margin-block:var(--space-10) var(--space-4);font-family:var(--font-body);font-weight:500;letter-spacing:normal}
.faq-group:first-child{margin-top:0}
.faq details{padding-block:var(--space-3)}
.faq details p{max-width:66ch;margin-bottom:var(--space-4)}
.prose{max-width:var(--space-reading);margin-left:max(0px,calc((100% - 72rem)/2))}
.prose h2{font-size:1.6rem;margin-top:var(--space-10)}
.prose h2:first-child{margin-top:0}
.prose li{margin-top:var(--space-3)}
.footer-grid{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:var(--space-16)}
.footer-disclosures p{font-size:var(--text-meta);color:var(--color-text-faint);max-width:72ch}
.footer-bottom{font-size:.8125rem;margin-top:var(--space-4);padding-top:var(--space-4)}
.footer-links a{white-space:nowrap;min-height:2rem;display:inline-flex;align-items:center;width:fit-content}
.site-footer{padding-block:var(--space-12)}
.image-dialog{background:var(--color-ground);color:var(--color-text);border:1px solid var(--color-border);padding:var(--space-6);width:min(74rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto}
.image-dialog::backdrop{background:var(--dialog-overlay)}
.dialog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.dialog-toolbar h2{font-size:1.25rem;margin:0}
.dialog-image-scroll{overflow:auto;max-height:65dvh;display:flex;align-items:center;justify-content:center}
.dialog-image-scroll img{max-width:100%;max-height:65dvh;width:auto;height:auto;object-fit:contain;margin:auto}
.image-dialog .meta{margin-top:var(--space-4)}
body.image-open{overflow-y:hidden}
@media(min-width:62rem){.nav-toggle{display:none}}
@media(max-width:61.99rem){.nav-links{display:none}.nav-inner{gap:var(--space-3)}.hero-grid{gap:var(--space-8)}.hero-actions{gap:var(--space-4)}.quick-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-brand{font-size:.9375rem}}
@media(max-width:56rem){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-copy h1{max-width:20ch}.readout{justify-self:start;max-width:23rem;margin:var(--space-4) 0 0}.footer-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}.walk-strip{gap:var(--space-5)}.walk-strip img{height:22rem}.hero-copy .text-body-lg{max-width:55ch}}
@media(max-width:46rem){.section{padding-inline:var(--space-5)}.nav{padding-inline:var(--space-4)}.risk-strip .section-inner{padding-inline:var(--space-4)}.nav-brand{font-size:.875rem}.nav-cta{padding-inline:var(--space-3)}.nav-inner>div:last-child{gap:var(--space-2)!important}.objections>div,.def-list>div{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}.stat-grid{gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}.stat-cell:last-child{grid-column:1/-1}.glossary{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}.walk-strip{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}.walk-strip figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--space-5)}.walk-strip img{height:auto;max-height:none;background:none}.walk-strip figcaption{margin:0}.readout{max-width:21rem}.page-head{padding-top:var(--space-10)}.page-index{gap:0 var(--space-5)}.callout{padding:var(--space-5)}.table-scroll{margin-right:0;overflow:visible;background:none;padding-inline:var(--space-5)}.comparison{display:block;min-width:0;width:100%}.comparison thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.comparison tbody{display:block}.comparison tr{display:block;padding-block:var(--space-4);border-top:1px solid var(--color-border-soft)}.comparison tr:first-child{border-top:0;padding-top:var(--space-4)}.comparison th,.comparison td{display:block;width:auto;padding:0;border:0}.comparison th[scope=row]{font-size:1rem;font-weight:600;margin-bottom:var(--space-3);color:var(--color-text)}.comparison td{padding-top:var(--space-3);color:var(--color-text-dim)}.comparison td::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-faint);margin-bottom:var(--space-1)}.hero-actions{align-items:flex-start;flex-direction:column}.link-quiet{font-size:.9375rem}.hero{padding-block:var(--space-10)}.quick-facts dd{font-size:1.125rem}.source-snapshot figcaption a{margin-left:0}.footer-links a{font-size:.875rem}}
@media(max-width:350px){.nav-brand{font-size:.8125rem;gap:2px}.nav-cta{padding-inline:var(--space-2);font-size:.8125rem}.nav-inner{gap:var(--space-2)}.readout-head{font-size:.8125rem}.section{padding-inline:var(--space-4)}.walk-strip figure{grid-template-columns:minmax(0,1fr)}.walk-strip img{max-height:32rem}.walk-strip figcaption{max-width:none}.image-dialog{padding:var(--space-4)}.dialog-toolbar h2{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* Beginner journey refinement · existing GoldCopyGuide design system.
 * Firsthand setup guide; Marquee Hero and Long Document; P5 H5 E4 S5 R5 V4. */
.brand-mark{width:1.7rem;height:1.7rem;flex:none;object-fit:contain}
.nav-brand,.footer-brand{align-items:center;gap:var(--space-2);display:flex}
.nav-brand .brand-copy,.footer-brand .brand-copy{color:var(--color-text);font-family:var(--font-display);letter-spacing:-.04em}
.brand-copy>span{color:var(--color-signal)}
.hero-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr);gap:var(--space-12);}
.hero-copy h1{font-size:var(--hero-heading);max-width:21ch;line-height:1.07;letter-spacing:-.04em}
.headline-secondary{color:var(--color-signal)}
.hero-copy .text-body-lg{max-width:49ch;font-size:1.125rem}
.hero-copy{gap:var(--space-6)}
.hero-actions{gap:var(--space-6)}
.hero-copy>.meta{max-width:58ch}
.readout{max-width:23rem;width:100%;justify-self:center;}
.readout>.image-zoom{width:100%;}
.readout img{height:27rem;width:auto;max-width:100%;margin:auto;object-fit:contain}
.readout figcaption{max-width:34ch;margin-inline:auto;font-size:.8125rem}
.readout-head{font-size:.8125rem;margin-bottom:var(--space-4);}
.how-section{border-block:1px solid var(--color-border-soft);padding-block:var(--space-12)}
.how-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:var(--space-16);align-items:center}
.how-layout h2{font-size:clamp(1.65rem,1.3rem + 1vw,2.25rem);max-width:26ch}
.how-layout p{max-width:53ch}
.how-layout p:last-child{font-size:.9375rem;margin-bottom:0}
.connection-list{list-style:none;margin:0;padding:0;}
.connection-list li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--space-4);align-items:baseline;padding-block:var(--space-5);border-bottom:1px solid var(--color-border-soft);position:relative}
.connection-list li:first-child{border-top:1px solid var(--color-border-soft)}
.connection-list strong{font-family:var(--font-display);font-size:1.125rem;font-weight:600}
.connection-list span{color:var(--color-text-dim);font-size:.9375rem}
.token-feature{padding-block:var(--space-12)}
.token-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:var(--space-16);align-items:start}
.token-layout h2{max-width:23ch}
.token-layout>div>p{max-width:53ch}
.token-layout .link-quiet{margin-top:var(--space-3)}
.token-explainer{border:1px solid var(--color-border);background:var(--color-ground-raised);padding:var(--space-6)}
.token-explainer h3{font-size:1.125rem}
.token-explainer p:last-child{margin-bottom:0}
.token-compare{display:flex;gap:var(--space-6);margin:var(--space-4) 0;padding:var(--space-4) 0;border-top:1px solid var(--color-border-soft);border-bottom:1px solid var(--color-border-soft)}
.token-compare dt{color:var(--color-text-faint);font-size:var(--text-meta);margin-bottom:var(--space-1)}
.token-compare dd{font:600 1.25rem/1.2 var(--font-display);margin:0;color:var(--color-text)}
.preview-section{border-top:1px solid var(--color-border-soft);padding-top:var(--space-12)}
.preview-section h2{max-width:30ch}
.preview-section .walk-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10);}
.preview-section .walk-strip figure{display:flex;flex-direction:column;gap:var(--space-5)}
.preview-section .walk-strip figcaption{order:-1;max-width:30ch;margin:0;position:relative}
.preview-step{font-family:var(--font-mono);color:var(--color-signal);font-size:.875rem;display:inline-block;margin-bottom:var(--space-3)}
.preview-section .walk-strip h3{font-size:1.25rem;margin-bottom:var(--space-2)}
.preview-section .walk-strip p{margin-bottom:var(--space-3)}
.preview-section .walk-strip p.meta{font-size:.8125rem;margin-bottom:0}
.preview-section .walk-strip img{width:auto;max-width:100%;height:23rem;background:transparent;object-position:top left}
.preview-section .walk-strip .image-zoom{align-self:start}
.terms-section{background:var(--color-ground-sunken);padding-block:var(--space-10)}
.terms-section h2{font-size:1.25rem;margin-bottom:var(--space-6)}
.terms-section>div>p{margin:0}
.evidence-section .source-snapshot{margin-top:var(--space-8)}
.evidence-crop{position:relative;width:100%;aspect-ratio:1880/708;overflow:hidden;border:1px solid var(--color-border)}
.evidence-crop img{position:absolute;width:136.117%;max-width:none;height:auto;left:-17.553%;top:-88.277%;border:0}
.evidence-section .source-snapshot figcaption{max-width:none}
.evidence-section .stat-grid{margin-block:var(--space-6);border-top:0;padding-top:0}
.evidence-section .evidence-detail{margin-bottom:0}
.guide-shell{max-width:75rem;margin:auto;padding-inline:var(--space-6);display:grid;grid-template-columns:var(--guide-rail-width) minmax(0,1fr);gap:var(--space-12);align-items:start;padding-top:var(--space-10)}
.guide-rail{position:sticky;top:calc(var(--header-height) + var(--space-6));padding-top:var(--space-2)}
.guide-rail nav{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-6)}
.guide-rail nav p{font-size:.8125rem;color:var(--color-text-faint);margin-bottom:var(--space-3)}
.guide-rail nav a{font-size:.9375rem;text-decoration:none;min-height:2.75rem;display:flex;align-items:center;color:var(--color-text-dim);border-bottom:1px solid transparent;white-space:nowrap;width:fit-content}
.guide-rail nav a:hover,.guide-rail nav a[aria-current=location]{color:var(--color-signal);border-color:var(--color-border)}
.guide-rail>.meta{font-size:.8125rem;margin-bottom:0}
.rail-contact{font-size:.875rem;white-space:nowrap;min-height:2.75rem;display:inline-flex;align-items:center}
.rail-telegram{gap:var(--space-2);color:var(--color-signal)}
.rail-telegram .icon-telegram{width:1rem;height:1rem;fill:var(--color-signal);flex:none}
.guide-content{min-width:0}
.guide-content>.section{padding:var(--space-10) 0;background:transparent;border-top:1px solid var(--color-border-soft)}
.guide-content>.section:first-child{border:0;padding-top:0}
.guide-content .section-inner{width:100%;margin:0}
.guide-content h2{font-size:clamp(1.6rem,1.2rem + 1.1vw,2.25rem)}
.guide-content .def-list>div{grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--space-6)}
.token-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-block:var(--space-6)}
.token-fields label{display:block;margin-bottom:var(--space-2);font-size:var(--text-meta);color:var(--color-text-dim)}
.copy-field{display:flex;align-items:center;gap:var(--space-2)}
.copy-field input{min-width:0;width:100%;font-family:var(--font-mono);font-size:1.125rem;color:var(--color-text);background:var(--color-ground-raised);border:1px solid var(--color-border);padding:var(--space-3);border-radius:var(--radius-sm);height:3rem}
.copy-field .btn{flex:none;font-size:.875rem;padding:var(--space-3);height:3rem}
[data-copy-status]:empty{display:none}
[data-copy-field]{display:none}.copy-enhanced [data-copy-field]{display:inline-flex}
@media(min-width:62rem){html[data-page=guide] .page-index{display:none}html[data-page=guide] .page-head{padding-bottom:var(--space-6)}}
@media(max-width:61.99rem){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr);gap:var(--space-8)}.hero-copy h1{font-size:clamp(2.35rem,4.3vw,3.5rem)}.hero-actions{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.how-layout,.token-layout{gap:var(--space-8)}.connection-list li{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}.guide-shell{display:block;padding-top:var(--space-8)}.guide-rail{display:none}.guide-content>.section{padding-block:var(--space-8)}}
@media(max-width:56rem){.hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}.hero-copy h1{max-width:24ch}.hero-copy .text-body-lg{max-width:56ch}.readout{max-width:25rem;margin:0;justify-self:start;display:grid;grid-template-columns:1fr;}.readout img{height:23rem}.readout figcaption{max-width:none}.how-layout,.token-layout{grid-template-columns:minmax(0,1fr)}.connection-list li{grid-template-columns:8rem minmax(0,1fr)}.preview-section .walk-strip{gap:var(--space-6)}.preview-section .walk-strip img{height:19rem}.evidence-crop{aspect-ratio:1880/708}}
@media(max-width:46rem){.brand-mark{width:1.125rem;height:1.125rem}.nav-brand{gap:var(--space-1)}.hero-copy h1{font-size:2.4rem;max-width:20ch}.hero-copy{gap:var(--space-5)}.hero-copy .text-body-lg{font-size:1rem}.readout{max-width:21rem}.readout img{height:23rem}.how-section,.token-feature{padding-block:var(--space-10)}.how-layout h2{font-size:1.75rem}.token-explainer{padding:var(--space-5)}.preview-section .walk-strip{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}.preview-section .walk-strip figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:start;padding-bottom:var(--space-8);border-bottom:1px solid var(--color-border-soft)}.preview-section .walk-strip figure:last-child{padding-bottom:0;border-bottom:0}.preview-section .walk-strip figcaption{order:0}.preview-section .walk-strip img{height:auto;width:100%}.preview-step{margin-bottom:var(--space-2)}.preview-section .walk-strip h3{font-size:1.125rem}.preview-section .walk-strip p{font-size:.875rem}.guide-shell{padding-inline:var(--space-5)}.guide-content .def-list>div{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}.token-fields{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.evidence-section .stat-cell dd{font-size:1.75rem}}
@media(max-width:350px){.hero-copy h1{font-size:2.1rem}.hero-actions .btn{padding-inline:var(--space-4);font-size:.875rem}.hero-actions .link-quiet{font-size:.875rem}.hero-copy .meta{font-size:.8125rem}.readout-head{font-size:.75rem}.connection-list li{grid-template-columns:6.5rem minmax(0,1fr);gap:var(--space-3)}.token-layout .link-quiet{font-size:.8125rem}.preview-section .walk-strip figure{grid-template-columns:minmax(0,1fr)}.preview-section .walk-strip .image-zoom{max-width:13rem}.preview-section .walk-strip .zoom-label{font-size:.8125rem}.guide-shell{padding-inline:var(--space-4)}.nav-brand{font-size:.8125rem}}
@media(min-width:46.01rem){.preview-section .walk-strip figcaption{min-height:11rem}}

/* ---- Evidence pair: the master record beside a real follower account -------
 * These were on opposite ends of the page, which left the single most
 * important distinction on the site for the reader to assemble. Two figures,
 * each labelled for what it actually is, aligned to the top; the master crop
 * is wider because its source is a chart, the follower's is a phone. */
.evidence-pair{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--space-8);align-items:start;margin-block:var(--space-8)}
.evidence-pair .source-snapshot{margin-block:0}
.evidence-role{display:block;font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
/* the follower phone, cropped to the same statistics region the master shows */
.follower-crop{position:relative;width:100%;aspect-ratio:705/670;overflow:hidden;border:1px solid var(--color-border)}
.follower-crop img{position:absolute;width:125.816%;max-width:none;height:auto;left:-13.475%;top:-26.866%;border:0}
@media (max-width:56rem){
 .evidence-pair{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
}

/* ---- Comparison table figure colors -----------------------------------
 * outranks `.comparison td{color:...}`, which is more specific than a bare
 * class — needed by any .comparison table's figure-good/bad, e.g. amplify.html. */
.comparison td.figure-good{color:var(--color-long)}
.comparison td.figure-bad{color:var(--color-short)}

/* ---- Token fields on the homepage ---- */
.token-feature .token-fields{margin-top:var(--space-6)}
.token-feature .link-quiet{margin-top:var(--space-2)}

/* ---- What happens between the steps ---- */
.waiting-heading{margin-top:var(--space-12)}
.waiting-list{margin-top:var(--space-4)}

/* ---- Verify page: claim, status, source ----------------------------------
 * The status word is information, not decoration: it says how far a claim was
 * actually taken. It uses the semantic colours already reserved for state, and
 * never appears without the source sitting next to it. */
.verify-list dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
.verify-status{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;white-space:nowrap}
.verify-status.is-confirmed{color:var(--color-long)}
.verify-status.is-partial{color:var(--color-signal)}
.verify-status.is-unverified{color:var(--color-short)}
.verify-list dd em{color:var(--color-text)}
@media (min-width:56rem){
 .verify-list>div{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
 .verify-list dt{flex-direction:column;gap:var(--space-2)}
}

/* ---- Guide steps: the eight steps, open --------------------------------
 * They were <details>. Each holds two to four sentences -- too little to
 * justify hiding, and the accordion put six clicks between a beginner and
 * the guide, with two of the three screenshots locked behind them. Same
 * numbering, same order, same copy; the disclosure is gone and each step
 * carries its own screen beside it. */
.steps{list-style:none;margin:var(--space-8) 0 0;padding:0}
.step{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,1fr) minmax(0,19rem);gap:var(--space-6) var(--space-8);align-items:start;padding-block:var(--space-8);border-top:1px solid var(--color-border-soft)}
.step:last-child{border-bottom:1px solid var(--color-border-soft)}
.step--noshot .step-body{grid-column:2 / -1}
/* the hairline that carries the eye from one number to the next */
.step::before{content:"";position:absolute;left:.6875rem;top:0;bottom:0;width:1px;background:var(--color-border-soft)}
.step:first-child::before{top:var(--space-8)}
.step:last-child::before{bottom:auto;height:var(--space-8)}
.step-num{position:relative;z-index:1;margin:0;padding-block:var(--space-1);width:1.375rem;text-align:center;background:var(--color-ground);font-family:var(--font-mono);font-size:.8125rem;font-weight:600;color:var(--color-signal)}
.step-body h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.35;color:var(--color-text);margin:0}
.step-body>p{margin-top:var(--space-3);max-width:62ch}
.step-body .token-fields{margin-bottom:var(--space-4)}
.step-shots{display:grid;gap:var(--space-6);min-width:0}
.step-shots figure{margin:0}
.step-shots .image-zoom{display:block;text-decoration:none}
.step-shots .zoom-label{display:inline-block;margin-top:var(--space-2);font-size:.8125rem}
.step-shots figcaption{font-size:.8125rem;margin-top:var(--space-2);color:var(--color-text-faint)}
/* Cropped to the region the step actually talks about. The file and the
 * full-resolution dialog are untouched; only the framing is CSS. */
.shot-crop{position:relative;display:block;width:100%;overflow:hidden;border:1px solid var(--color-border);background:var(--color-ground-sunken)}
.shot-crop img{position:absolute;left:0;width:100%;max-width:none;height:auto;display:block}
.shot-crop--browse{aspect-ratio:1290/1743}
.shot-crop--browse img{top:-44.6%}
.shot-crop--strategy{aspect-ratio:1290/1050}
.shot-crop--strategy img{top:-73.3%}
.shot-crop--allocate{aspect-ratio:1290/700}
.shot-crop--allocate img{top:-230%}
@media (max-width:61.99rem){
 .step{grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-4) var(--space-5)}
 .step .step-body,.step--noshot .step-body{grid-column:2}
 .step-shots{grid-column:2;max-width:20rem}
}

/* =====================================================================
   SIGNAL RAILS — structural layer
   ---------------------------------------------------------------------
   The pages had lost every structural device across earlier passes and
   were reading as unbroken copy on one flat ground. Nothing here adds a
   colour, a face or a radius: it makes the ruling the system already
   claimed ("a terminal is ruled, not carded") actually visible, gives
   the page a scannable rhythm, and puts real depth under the device
   screenshots so the platform's own green reads as being inside a phone
   rather than as this site's accent.
   No new claim, no new figure, no motion on scroll.
   ===================================================================== */

:root{
  /* Ruling at oklch(39%) on an 18% ground was under 1.6:1 — present in the
     stylesheet, absent on screen. Raised until the lines carry structure. */
  --color-border: oklch(47% 0.008 80);
  --color-border-soft: oklch(36% 0.007 80);
  --color-hairline: oklch(30% 0.006 80);
  /* one shared inner highlight for raised surfaces */
  --edge-light: inset 0 1px 0 oklch(100% 0 0 / .05);
}

/* ---- Section rail --------------------------------------------------
   A numbered rule at the head of each section. It spans the content
   column, so the eye gets a horizontal anchor at full width instead of
   a paragraph floating in the left half, and the amber tick repeats the
   accent down the page. Sentence case, numerals in mono. */
.section-inner > p.rail,
.rail{
  display:flex; max-width:none; align-items:baseline; gap:var(--space-3);
  position:relative;
  margin:0 0 var(--space-8);
  padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
  font-size:.8125rem; line-height:1.4;
}
.rail::before{
  content:""; position:absolute; top:-1px; left:0;
  width:3.25rem; height:2px; background:var(--color-signal);
}
.rail-num{
  font-family:var(--font-mono); font-weight:600; font-size:.8125rem;
  color:var(--color-signal); letter-spacing:.02em; flex:none;
}
.rail-label{ color:var(--color-text-dim); }
.section > .rail:first-child{ margin-top:0; }

/* ---- Bands and section seams ---------------------------------------
   Alternating ground keeps a long page from reading as one surface;
   the seam is a full-bleed hairline, which is what a ruled layout does
   instead of stacking cards. */
.section--band{ background:var(--color-ground-sunken); }
.section + .section{ border-top:1px solid var(--color-hairline); }
.how-section{ border-block:0; }
.preview-section{ border-top:0; }

/* ---- Hero ----------------------------------------------------------- */
.hero{ position:relative; }
.hero::before{
  display:block;
  inset:-14rem -20% auto -14%; height:44rem;
  background:
    radial-gradient(46% 46% at 24% 46%, oklch(72% 0.16 55 / .13) 0%, transparent 70%),
    radial-gradient(38% 38% at 74% 30%, oklch(72% 0.16 55 / .06) 0%, transparent 68%);
}
/* a faint graticule, only under the hero — depth without a texture on
   every section */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, oklch(100% 0 0 / .022) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(100% 0 0 / .022) 1px, transparent 1px);
  background-size:5.5rem 5.5rem;
  mask-image:radial-gradient(70% 80% at 40% 40%, #000 0%, transparent 78%);
}
.hero-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); align-items:center; }

/* The phone is the only proof above the fold. It was a thumbnail in a
   large empty column; give it the column and real shadow. */
.readout{ max-width:27rem; justify-self:center; }
.readout img{ height:32rem; }
.readout > .image-zoom{
  position:relative;
  filter:drop-shadow(0 1.5rem 2.75rem oklch(0% 0 0 / .6)) drop-shadow(0 .25rem .5rem oklch(0% 0 0 / .4));
}

/* ---- Hero chain: the whole path, in the fold ------------------------
   A beginner's first question is "how many steps is this?". Three rows,
   the same three the guide is built from, answer it before any scroll. */
.hero-chain{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--color-border-soft);
  max-width:44rem;
}
.hero-chain li{
  position:relative; flex:1 1 10rem; min-width:0;
  padding:var(--space-4) var(--space-5) var(--space-4) 0;
  display:flex; align-items:baseline; gap:var(--space-3);
  font-size:.9375rem; color:var(--color-text-dim);
}
.hero-chain li + li{ padding-left:var(--space-5); }
.hero-chain li + li::before{
  content:""; position:absolute; left:0; top:var(--space-4); bottom:var(--space-4);
  width:1px; background:var(--color-border-soft);
}
.hero-chain b{
  font-family:var(--font-mono); font-size:.8125rem; font-weight:600;
  color:var(--color-signal); flex:none;
}

/* ---- The three names as a chain ------------------------------------
   It was three unlinked rows; the thing a beginner has to grasp is that
   they sit in a line. The connector says so. */
.connection-list li{ padding-left:var(--space-6); }
.connection-list li::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--color-border-soft);
}
.connection-list li:first-child::before{ top:50%; }
.connection-list li:last-child::before{ bottom:50%; }
.connection-list li::after{
  content:""; position:absolute; left:-3px; top:calc(50% - 4px);
  width:8px; height:8px; background:var(--color-signal);
}
.connection-list li:last-child::after{ background:var(--color-signal-strong); }

/* ---- 24x token block: the page's differentiator, treated as one ----- */
.token-feature .token-fields{
  border-left:2px solid var(--color-signal);
  padding:var(--space-5) 0 var(--space-5) var(--space-6);
  background:linear-gradient(to right, var(--color-signal-wash), transparent 60%);
}
.copy-field input{ box-shadow:var(--edge-light); letter-spacing:.04em; }
.copy-field input:focus-visible{ border-color:var(--color-signal); }
.token-explainer{ box-shadow:var(--edge-light); border-color:var(--color-border); }
.token-explainer h3{ display:flex; align-items:baseline; gap:var(--space-3); }
.token-explainer h3::before{
  content:""; width:1.5rem; height:2px; background:var(--color-signal); flex:none;
}

/* ---- Numbers ---------------------------------------------------------
   The mono figures were the best thing on the page and appeared once.
   Give every figure row the same tick-and-rule treatment. */
.quick-facts{ border-top:1px solid var(--color-border); padding-top:var(--space-6); }
.quick-facts > div{ position:relative; padding-left:var(--space-4); }
.quick-facts > div::before{
  content:""; position:absolute; left:0; top:.15rem; width:2px; height:2.75rem;
  background:var(--color-signal);
}
.quick-facts dd{ color:var(--color-text); }

.stat-grid{
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-hairline);
  padding-block:var(--space-8);
}
.evidence-section .stat-grid{
  border-top:1px solid var(--color-border);
  padding-top:var(--space-8);
}
.stat-cell{ position:relative; padding-left:var(--space-4); }
.stat-cell::before{
  content:""; position:absolute; left:0; top:.2rem; width:2px; height:1.1rem;
  background:var(--color-signal);
}

/* ---- Tables: give the head weight, the rows air --------------------- */
.table-scroll{
  border-color:var(--color-border); box-shadow:var(--edge-light);
  /* Scrollable-edge cue: two "local" gradients scroll with the table and mask
     the two "scroll" shadow gradients once an edge is reached, so the shadow
     only shows on the side that still has content off-screen. No JS, no motion.
     On this near-black ground a dark drop shadow is invisible, so the cue is a
     pale glow in the existing border color rather than the usual black shadow. */
  background:
    linear-gradient(to right, var(--color-ground) 30%, oklch(0% 0 0 / 0)),
    linear-gradient(to right, oklch(0% 0 0 / 0), var(--color-ground) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, var(--color-border), oklch(0% 0 0 / 0)),
    radial-gradient(farthest-side at 100% 50%, var(--color-border), oklch(0% 0 0 / 0)) 100% 0;
  background-repeat:no-repeat;
  background-color:var(--color-ground);
  background-size:2rem 100%, 2rem 100%, .875rem 100%, .875rem 100%;
  background-attachment:local, local, scroll, scroll;
}
.comparison thead{ background:var(--color-ground-raised); }
.comparison thead th{
  border-bottom:2px solid var(--color-border);
  color:var(--color-text); font-weight:600;
}
.comparison tbody tr:last-child th,
.comparison tbody tr:last-child td{ border-bottom:0; }

/* ---- Screenshots: mat them ------------------------------------------
   The platform's neon green was the loudest colour on the site because
   the captures sat directly on the page. A graphite mat and a real
   shadow put them back inside a device. */
.preview-section .walk-strip .image-zoom{
  filter:drop-shadow(0 1rem 2rem oklch(0% 0 0 / .5));
}
.preview-section .walk-strip img{
  border:1px solid var(--color-border);
  background:var(--color-ground-sunken);
}
.evidence-crop,.follower-crop,.shot-crop{
  border-color:var(--color-border);
  box-shadow:0 1rem 2.25rem oklch(0% 0 0 / .45);
}
.evidence-pair .source-snapshot figcaption{ padding-top:var(--space-1); }

/* ---- Callouts and panels get a real edge ---------------------------- */
.callout{ box-shadow:var(--edge-light); }
.checklist{ box-shadow:var(--edge-light); background:var(--color-ground-raised); }

/* ---- Decision block --------------------------------------------------
   Every CTA on the site sat as a loose button after a paragraph. At the
   points where someone actually decides, the button gets a frame, the
   reassurance sits with it, and nothing else competes. */
.decision{
  position:relative;
  margin-top:var(--space-10);
  padding:var(--space-8) var(--space-8) var(--space-8);
  border:1px solid var(--color-border);
  background:var(--color-ground-raised);
  box-shadow:var(--edge-light);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-5) var(--space-8);
}
.decision::before{
  content:""; position:absolute; top:-1px; left:0; width:5rem; height:2px;
  background:var(--color-signal);
}
.decision-copy{ flex:1 1 22rem; min-width:0; }
.decision-copy h3{ font-size:1.25rem; margin-bottom:var(--space-2); }
.decision-copy p{ margin:0; max-width:52ch; }
.decision .btn{ flex:none; }
.decision .meta{ flex:1 1 100%; margin:0; max-width:62ch; }
@media(max-width:46rem){ .decision{ padding:var(--space-6); } }

/* ---- Section heads keep their measure, the rules do not ------------- */
.section-inner > h2{ max-width:24ch; }
.evidence-section .section-inner > p:first-of-type{ max-width:68ch; }

/* ---- Footer seam ---------------------------------------------------- */
.site-footer{ border-top:1px solid var(--color-border); }

@media(max-width:61.99rem){
  .hero-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr); }
  .readout img{ height:26rem; }
}
@media(max-width:56rem){
  /* this layer sits after the base breakpoints, so the single-column hero
     has to be restated here or the two-column rule leaks onto phones */
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .readout{ justify-self:start; max-width:23rem; }
  .readout img{ height:24rem; }
  .hero::after{ background-size:4rem 4rem; }
}
@media(max-width:46rem){
  .rail{ margin-bottom:var(--space-6); }
  .hero-chain li{ flex:1 1 100%; padding-left:0 !important; padding-block:var(--space-3); }
  .hero-chain li + li::before{ left:0; right:0; top:0; bottom:auto; width:auto; height:1px; }
  .quick-facts > div::before{ height:2rem; }
}

/* ---- Guide chapters keep the same tick rhythm as the rails ---------- */
.guide-content > .section{ position:relative; }
.guide-content > .section::before{
  content:""; position:absolute; top:-1px; left:0; width:3.25rem; height:2px;
  background:var(--color-signal);
}
.guide-content > .section:first-child::before{ display:none; }
.guide-content > .section + .section{ border-top-color:var(--color-border); }
.guide-content .decision{ margin-top:var(--space-8); }

/* ---- Registration-flow captures: the screens for guide steps 01-05 -----
 * Same CSS-crop technique as the strategy screens: the stored file is the
 * whole capture and the enlargement shows it complete; only the framing is
 * CSS, cropped to the part of the screen the step is about. Offsets are
 * -y0/(y1-y0) of the source, so the ratio and the offset stay in step. */
.shot-crop--signup   { aspect-ratio:1290/2230 } .shot-crop--signup img   { top:-13.453% }
.shot-crop--verify   { aspect-ratio:620/330 }   .shot-crop--verify img   { top:-148.485% }
.shot-crop--survey   { aspect-ratio:1290/1520 } .shot-crop--survey img   { top:-32.895% }
.shot-crop--ibportal { aspect-ratio:1290/1010 } .shot-crop--ibportal img { top:-112.871% }
.shot-crop--taglogin { aspect-ratio:1290/1530 } .shot-crop--taglogin img { top:-52.288% }
.shot-crop--kycnotice{ aspect-ratio:1290/1390 } .shot-crop--kycnotice img{ top:-51.799% }
.shot-crop--kycstart { aspect-ratio:1290/1390 } .shot-crop--kycstart img { top:-26.619% }
.shot-crop--kycsteps { aspect-ratio:1290/1660 } .shot-crop--kycsteps img { top:-22.289% }


/* ---- Split headline, asymmetric section head, paired decision ---------
 * Three structural moves. (1) A heading states two things and the second
 * half carries the accent, so the eye gets a colour anchor on every
 * section instead of one at the top of the page. (2) Where a section
 * opens with a lede, the heading holds the left column and the lede sits
 * right, at reading size — an editorial head rather than a centred stack.
 * (3) A decision offers one filled action and one quiet alternative, so
 * the button is a choice, not the only door. No motion, no reveal. */

.h-split{ max-width:none; }
.h-split .headline-secondary{ color:var(--color-signal); }

.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--space-8) var(--space-16);
  align-items:end;
  margin-bottom:var(--space-10);
}
.section-head > h2{ margin:0; max-width:22ch; }
.section-head > p{
  margin:0; max-width:46ch;
  color:var(--color-text-dim);
  font-size:.9375rem; line-height:1.65;
}

.decision .link-quiet{ flex:none; }

@media(max-width:61.99rem){
  .section-head{ gap:var(--space-6) var(--space-10); }
}
@media(max-width:56rem){
  .section-head{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-4);
    align-items:start;
    margin-bottom:var(--space-8);
  }
  .section-head > h2{ max-width:24ch; }
  .section-head > p{ max-width:64ch; font-size:1rem; }
}
@media(max-width:46rem){
  .decision{ align-items:flex-start; }
  .decision .btn{ width:100%; text-align:center; justify-content:center; }
  .decision .link-quiet{ font-size:.9375rem; }
}


/* ---- Figures, capacity map, monthly series -------------------------
 * Three additions that carry new facts rather than new decoration.
 * The capacity map sets the two amplification tiers side by side so the
 * trade the token actually makes — double the capacity, half the
 * permitted loss — is visible in one glance instead of buried in prose.
 * The series is a description list, not a chart: the figures are the
 * evidence and the bar is only there to give the eye the shape. */

.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.figure-bad{ color:var(--color-short); }
.figure-good{ color:var(--color-long); }

/* ---- Stat cells say what the number means --------------------------- */
.stat-cell small{
  display:block; margin-top:var(--space-3);
  font-size:.8125rem; line-height:1.55;
  color:var(--color-text-faint); max-width:36ch;
}
.stat-cell dd.figure-bad{ color:var(--color-short); }
.stat-cell dd.figure-good{ color:var(--color-long); }

/* ---- Capacity map --------------------------------------------------- */
.capacity-map{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6); margin-block:var(--space-8);
}
.capacity-col{
  position:relative; padding:var(--space-6);
  border:1px solid var(--color-border);
  background:var(--color-ground-raised);
  box-shadow:var(--edge-light);
}
.capacity-col::before{
  content:""; position:absolute; top:-1px; left:0;
  width:3.25rem; height:2px; background:var(--color-border);
}
.capacity-col.is-token::before{ background:var(--color-signal); width:5rem; }
.capacity-tier{
  margin:0; font-family:var(--font-display);
  font-size:clamp(2.25rem,1.8rem + 2vw,3.5rem);
  line-height:1; letter-spacing:-.04em; color:var(--color-text);
}
.capacity-col.is-token .capacity-tier{ color:var(--color-signal); }
.capacity-sub{
  margin:var(--space-2) 0 var(--space-5);
  font-size:.875rem; color:var(--color-text-faint);
}
.capacity-col dl{ margin:0; }
.capacity-col dl > div{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:var(--space-2) var(--space-4);
  padding-block:var(--space-3);
  border-top:1px solid var(--color-border-soft);
}
.capacity-col dt{ font-size:.9375rem; color:var(--color-text-dim); min-width:0; }
.capacity-col dd{
  margin:0; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-weight:500; color:var(--color-text); white-space:nowrap;
}
.capacity-col dd.figure-bad{ color:var(--color-short); }

/* ---- Document captures (platform dialogs, register entries) ---------- */
.doc-shot{ margin-block:var(--space-8); }
.doc-shot-frame{
  border:1px solid var(--color-border);
  background:var(--color-ground-sunken);
  max-width:48rem;
}
.doc-shot-frame img{ display:block; width:100%; height:auto; }
.doc-shot figcaption{ max-width:62ch; }
.doc-shot--wide .doc-shot-frame{ max-width:none; }

/* The register capture is a wide document. Stored and enlarged whole; the
   inline framing is CSS, cropped to the licensee fields. Offsets are
   -x0/crop-width and -y0/crop-height of the 2553x1330 source. */
.register-crop{
  position:relative; width:100%; aspect-ratio:1450/584;
  overflow:hidden; border:1px solid var(--color-border);
  background:var(--color-ground-sunken);
}
.register-crop img{
  position:absolute; width:176.069%; max-width:none; height:auto;
  left:0; top:-94.521%; border:0;
}

/* ---- Monthly series -------------------------------------------------
   Two columns so twenty-two rows do not become a scroll of their own.
   Reading order runs across then down, which is chronological either way. */
.series{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(11,auto); grid-auto-flow:column;
  gap:0 var(--space-12);
  margin-block:var(--space-8) var(--space-10);
}
.series-row{
  display:grid; grid-template-columns:minmax(0,5rem) minmax(0,1fr);
  align-items:center; gap:var(--space-4);
  padding-block:var(--space-2);
  border-top:1px solid var(--color-border-soft);
}
.series-row dt{
  font-family:var(--font-mono); font-size:.8125rem;
  color:var(--color-text-dim); white-space:nowrap;
}
.series-row dd{
  margin:0; display:grid;
  grid-template-columns:minmax(0,1fr) 3.5rem;
  align-items:center; gap:var(--space-3);
}
.series-bar{
  display:block; height:.5rem; min-width:2px;
  width:calc(var(--v) * 100%);
  background:var(--color-signal-wash-strong);
  border-left:2px solid var(--color-signal);
}
.series-row .num{ font-size:.8125rem; text-align:right; color:var(--color-text); }

@media(max-width:56rem){
  .capacity-map{ gap:var(--space-4); }
  .series{ gap:0 var(--space-8); }
}
@media(max-width:46rem){
  .capacity-map{ grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
  .capacity-col{ padding:var(--space-5); }
  .series{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; }
  .series-row{ grid-template-columns:minmax(0,4.5rem) minmax(0,1fr); }
}


/* ---- Register entry, reproduced field by field ----------------------
   A nested list inside a verify row: the regulator's own field names on
   the left, its values on the right, so the reader can match them against
   the capture rather than take our summary of it. */
.register-fields{
  margin:var(--space-4) 0 var(--space-5);
  border-top:1px solid var(--color-border-soft);
}
.register-fields > div{
  display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:var(--space-2) var(--space-5);
  padding-block:var(--space-2);
  border-bottom:1px solid var(--color-border-soft);
}
.register-fields dt{
  font-weight:400; font-size:.875rem; color:var(--color-text-faint);
}
.register-fields dd{ margin:0; color:var(--color-text); font-size:.9375rem; }
@media(max-width:46rem){
  .register-fields > div{ grid-template-columns:minmax(0,1fr); gap:var(--space-1); }
}