/* SafeHands landing page.
   The page is built as a measuring instrument: the risk scale carries the
   product's real decision bands (0-30 allow, 31-69 warn, 70+ block) and the
   block threshold from docs/DECISION_CONTRACT.md, so the verdict is shown
   rather than asserted. No build step: edit this file directly.

   The palette comes from the SafeHands logo: an electric royal blue on white,
   two hands cradling something kept safe. Blue is the structural brand accent,
   carried by the chrome, the full-bleed bands and a soft glow. A safety green
   is the second accent: energy that means what it says, marking what is live,
   verified and safe to sign. The full verdict spectrum (allow green, warn amber,
   block red) stays reserved for the instrument's live reading and the specimen
   readouts, where colour is a measurement rather than decoration.

   Spacing is fluid: --pad-x and --sec-y clamp between phone and desktop, so the
   rhythm scales smoothly instead of snapping at a handful of breakpoints. */

/* Three faces, all SIL Open Font License, self-hosted under site/fonts (licences
   in the *-OFL.txt files). Geist Sans sets prose, Geist Mono sets every piece of
   data and code, and Departure Mono is the dot-matrix readout: the numbers and
   the verdict word render as an instrument's LED display rather than as text. */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url("fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url("fonts/Geist-Bold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "Departure Mono"; font-weight: 400; font-display: swap; src: url("fonts/DepartureMono-Regular.woff2") format("woff2"); }

:root {
  --ground:  #0A0B12;
  --panel:   #12141E;
  --panel-2: #181B27;
  --ink:     #EAECF5;
  --ink-2:   #9CA1B4;
  --ink-3:   #616579;
  --rule:    #1C1F2C;
  --rule-2:  #2A2E3E;
  --shadow:  rgb(0 2 14 / .62);
  --brand:   #5566FF;                    /* the logo's electric blue: the structural brand accent */
  --glow:    rgb(85 102 255 / .30);      /* the same blue, spread as the logo's glow */
  --safe:    #4ADE80;                    /* safety green: the energy accent (live, verified, safe) */
  --safe-glow: rgb(74 222 128 / .30);
  --band:    #2A2DE0;                    /* the true logo blue, used at full strength on the bold band */
  --on-band: #FFFFFF;
  --vc:      #FF5A5A;                     /* set by main.js from the live verdict */
  --on-vc:   #FFFFFF;
  --allow:   #4ADE80;
  --warn:    #F0A93B;
  --block:   #FF5A5A;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pixel: "Departure Mono", "Geist Mono", ui-monospace, monospace;
  --maxw: 1120px;
  --pad-x: clamp(20px, 4vw, 28px);       /* the page gutter, fluid from phone to desktop */
  --sec-y: clamp(74px, 9.5vw, 120px);    /* section vertical rhythm, fluid */
  --mark: url("safehands.jpg");
}
/* Daylight surface: the same logo blue on a cool paper ground
   deepened to hold contrast against white. */
@media (prefers-color-scheme: light) {
  :root {
    --ground: #F5F6FC; --panel: #FFFFFF; --panel-2: #EDEFF9;
    --ink: #0B0D1A; --ink-2: #474C60; --ink-3: #686E82;
    --rule: #E3E5F1; --rule-2: #CBCFE2;
    --shadow: rgb(20 24 60 / .12);
    --brand: #2A2DE0; --glow: rgb(42 45 224 / .16);
    --safe: #12894A; --safe-glow: rgb(18 137 74 / .16);
    --vc: #C22020; --on-vc: #FFFFFF;
    --allow: #1E7A32; --warn: #96570B; --block: #C22020;
  }
}
:root[data-theme="dark"] {
  --ground: #0A0B12; --panel: #12141E; --panel-2: #181B27; --shadow: rgb(0 2 14 / .62);
  --ink: #EAECF5; --ink-2: #9CA1B4; --ink-3: #616579;
  --rule: #1C1F2C; --rule-2: #2A2E3E;
  --brand: #5566FF; --glow: rgb(85 102 255 / .30);
  --safe: #4ADE80; --safe-glow: rgb(74 222 128 / .30);
  --vc: #FF5A5A; --on-vc: #FFFFFF;
  --allow: #4ADE80; --warn: #F0A93B; --block: #FF5A5A;
}
:root[data-theme="light"] {
  --ground: #F5F6FC; --panel: #FFFFFF; --panel-2: #EDEFF9; --shadow: rgb(20 24 60 / .12);
  --ink: #0B0D1A; --ink-2: #474C60; --ink-3: #686E82;
  --rule: #E3E5F1; --rule-2: #CBCFE2;
  --brand: #2A2DE0; --glow: rgb(42 45 224 / .16);
  --safe: #12894A; --safe-glow: rgb(18 137 74 / .16);
  --vc: #C22020; --on-vc: #FFFFFF;
  --allow: #1E7A32; --warn: #96570B; --block: #C22020;
}

/* Smooth the theme switch: only while the toggle is mid-flight (main.js adds the
   .theming class for ~0.4s), ease every colour so dark and light cross-fade
   instead of snapping. Off the rest of the time, so hovers and the instrument
   animations keep their own timings. */
:root.theming, :root.theming *, :root.theming *::before, :root.theming *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.theming, :root.theming *, :root.theming *::before, :root.theming *::after { transition: none !important; }
}
* { box-sizing: border-box; }
/* The instrument itself stays square, because a measuring face is square.
   Everything a hand touches gets a small radius: that is the difference
   between a product and a specification sheet. */
.btn, .pill, .theme { border-radius: 6px; }
.inst, .pills { border-radius: 12px; overflow: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink);
  /* The faintest trace of the verdict, 2.5%: enough that the page feels like it
     is in a state, not enough to read as a coloured page. */
  background: color-mix(in srgb, var(--vc) 2.5%, var(--ground));
  transition: background .5s ease;
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand); color: var(--on-vc); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

/* Bold full-bleed bands break out of the calibration rail to the full viewport,
   the way a lit readout overruns its frame. Content inside is re-constrained by
   .band-inner. body carries overflow-x:hidden, so the 100vw never scrolls. */
.fullbleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.fullbleed::before { display: none; }
.band-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

/* Device labels are uppercase because that is what is silkscreened onto an
   instrument. Prose never is. */
.lab {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Announced to assistive tech, never shown: the scale itself is pure geometry. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── device header ─────────────────────────────────────────────────── */
header { position: sticky; top: 0; z-index: 30; background: var(--ground); }
.hbar { display: flex; align-items: center; gap: 26px; height: 58px;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 640; letter-spacing: -.01em; }
.mark { background-image: var(--mark); background-size: cover; background-position: center; flex: none; }
.brand .mark { width: 26px; height: 26px; }
.hbar nav { display: flex; gap: 24px; margin-left: auto; }
.hbar nav a { position: relative; font-size: .9rem; color: var(--ink-2); }
.hbar nav a:hover { color: var(--ink); }
/* A brand underline wipes in under the hovered nav link, left to right. */
.hbar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.hbar nav a:hover::after { transform: scaleX(1); }
.theme {
  font: inherit; background: none; border: 1px solid var(--rule-2); color: var(--ink-2);
  width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center;
}
.theme:hover { border-color: var(--ink); color: var(--ink); }
/* Sun or moon, showing the mode a click switches TO. Line icons, monochrome,
   inheriting the button colour. Handles the OS default and the explicit toggle. */
.theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.theme .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme .i-moon { display: none; }
  :root:not([data-theme]) .theme .i-sun { display: block; }
}
:root[data-theme="dark"] .theme .i-moon { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="light"] .theme .i-moon { display: block; }
:root[data-theme="light"] .theme .i-sun { display: none; }
/* Hamburger, mobile only. The burger stays hidden on desktop where the inline
   nav shows; below 840px the nav collapses into a panel the burger opens. */
.burger { display: none; }
@media (max-width: 840px) {
  .hbar nav {
    position: absolute; top: 59px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 6px 0;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    box-shadow: 0 24px 40px -28px var(--shadow);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .hbar nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .hbar nav a { padding: 13px 28px; font-size: 1rem; }
  .hbar nav a::after { display: none; }
  .hbar nav a:active { background: var(--panel-2); }
  /* nav is absolute here, so nothing pushes the controls right on its own:
     the theme button takes the auto margin and the burger follows it. */
  .theme { margin-left: auto; width: 40px; height: 40px; }
  .burger {
    display: flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 40px; height: 40px; padding: 0 6px; margin-left: 4px;
    background: none; border: 0; cursor: pointer;
  }
  .burger span {
    display: block; height: 2px; width: 100%; background: var(--ink);
    transition: transform .22s ease, opacity .22s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hbar nav, .burger span { transition: none; }
}

/* ── the calibration rail: sections hang off a measured edge ────────── */
main { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); max-width: var(--maxw); margin: 0 auto; }
section { padding: var(--sec-y) var(--pad-x); border-bottom: 1px solid var(--rule); position: relative; }
section::before {
  content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 1px; background: var(--rule-2);
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
/* The section index reads as a channel tag on a faceplate: [01], the number in
   the brand blue, the brackets and label in the quiet ink. Green is reserved for
   what it means (live, verified, safe), so navigation labels stay neutral. */
.eyebrow .idx { color: var(--brand); }
.eyebrow .idx::before { content: "["; color: var(--ink-3); margin-right: 1px; }
.eyebrow .idx::after { content: "]"; color: var(--ink-3); margin-left: 1px; }
h2 { font-size: clamp(2rem, 4.6vw, 3.15rem); font-weight: 680; letter-spacing: -.04em; line-height: 1.1; max-width: 20ch; }
.sub { color: var(--ink-2); max-width: 66ch; margin-top: 15px; }

/* ── hero ──────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(36px, 6vw, 68px); padding-bottom: var(--sec-y); }
/* The hero sits on a faint calibration grid, the surface a measuring instrument
   is read against, with brand light coming off the instrument to the right.
   Masked to fade out by the fold, so it reads as precision, not a generic glow. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 54% at 70% 26%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    linear-gradient(to right, var(--rule) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(96% 80% at 66% 24%, #000 0%, transparent 64%);
          mask-image: radial-gradient(96% 80% at 66% 24%, #000 0%, transparent 64%);
}
.hero > * { position: relative; z-index: 1; }
/* Two columns on wide screens: the value proposition on the left, the working
   instrument on the right, so the product itself is the hero visual. Below
   980px they stack, instrument under copy. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: 46px; align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }
.hero-copy { min-width: 0; }
.hero .inst { margin-top: 0; }
/* A short spec list under the call to action, so the copy column reads to about
   the height of the instrument beside it. */
.hero-spec { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hero-spec li { position: relative; padding-left: 20px; font-size: .9rem; color: var(--ink-2); }
.hero-spec li::before { content: ">"; position: absolute; left: 2px; top: 0; color: var(--brand); font-family: var(--mono); font-weight: 500; }
.idline { margin-bottom: 26px; }
/* A live-status chip: a breathing safety-green point and a confident line.
   Reads as a running, safe system, not a debug readout. */
.livechip {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
  padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--safe) 30%, var(--rule-2)); border-radius: 6px;
  background: color-mix(in srgb, var(--safe) 8%, var(--panel)); max-width: 100%;
}
.livechip .live {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--safe);
  box-shadow: 0 0 8px 1px var(--safe-glow); animation: breathe 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .livechip .live { animation: none; } }
.lc-main { font-size: .84rem; font-weight: 500; color: var(--ink); letter-spacing: -.004em; }
h1 {
  font-size: clamp(2.3rem, 5.8vw, 4.05rem); font-weight: 700;
  letter-spacing: -.048em; line-height: 1.02; max-width: 18ch;
}
h1 em { font-style: normal; color: var(--brand); }
.lead { color: var(--ink-2); font-size: 1.08rem; max-width: 58ch; margin-top: 20px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; padding: 12px 20px; font-size: .95rem; font-weight: 560; border: 1px solid transparent; }
.btn.p {
  background: var(--brand); color: var(--on-vc); font-weight: 600;
  box-shadow: 0 0 46px -6px var(--glow);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn.p:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 34px -12px var(--glow), 0 0 46px -6px var(--glow); }
.btn.p:active { transform: translateY(0); }
/* The install button reads as a terminal line: a blue prompt, then the command. */
.btn.g { border-color: var(--rule-2); font-family: var(--mono); font-size: .85rem; color: var(--ink-2); }
.btn.g::before { content: "$"; color: var(--brand); margin-right: 9px; font-weight: 500; }
.btn.g:hover { border-color: var(--brand); color: var(--ink); }
/* A brand-blue block that blinks after the command, like a live terminal caret. */
.btn.g::after {
  content: ""; display: inline-block; width: .55em; height: 1.02em; margin-left: 8px;
  vertical-align: -.16em; background: var(--brand); box-shadow: 0 0 9px var(--glow);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ── entrance reveals: sections rise and fade in as they are scrolled to ─ */
/* Applied only by script, so with JS off nothing is ever hidden. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn.g::after { animation: none; }
  .btn.p:hover { transform: none; }
  .hbar nav a::after { transition: none; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .path > a .arw { transition: none; }
}
/* An orchestrated hero entrance: the value proposition rises in sequence and the
   instrument settles in just after, so the page opens with intent. Guarded by
   no-preference, so reduced motion never sees the hidden start state, and it is
   pure CSS, so it plays even with scripting off. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .idline   { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .06s; }
  .hero-copy h1        { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .14s; }
  .hero-copy .lead     { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .24s; }
  .hero-copy .cta      { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .33s; }
  .hero-copy .hero-spec{ animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .41s; }
  .hero .inst          { animation: instSettle .95s cubic-bezier(.22,.61,.36,1) both; animation-delay: .28s; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes instSettle { from { opacity: 0; transform: translateY(22px) scale(.99); } to { opacity: 1; transform: none; } }

/* ── the instrument ────────────────────────────────────────────────── */
.inst {
  margin-top: 46px; border: 1px solid var(--rule-2); background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule) inset, 0 30px 80px -32px var(--shadow), 0 0 120px -44px var(--glow);
}
.inst-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--rule); background: var(--panel-2);
}
/* A quiet right-aligned note that the inspector is running through the specimens
   on its own. It is set by script and removed the moment a specimen is picked by
   hand, so control passes to the reader and never fights them. */
.inst-hint { margin-left: auto; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.inst-hint::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.inst.interacted .inst-hint { display: none; }
@media (max-width: 620px) { .inst-hint { display: none; } }
/* The power LED: a steady brand point that breathes, so the faceplate reads
   as an instrument that is on and listening, not a static picture. */
.led {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--brand);
  box-shadow: 0 0 8px 1px var(--glow); animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .led { animation: none; } }

.specimen { padding: 18px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 13px; }
.pills { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-2); width: fit-content; }
.pill {
  font: inherit; font-size: .85rem; padding: 8px 14px; background: none;
  color: var(--ink-2); cursor: pointer; border: 0; border-right: 1px solid var(--rule-2);
  transition: color .16s ease, background .16s ease;
}
.pill:last-child { border-right: 0; }
.pill:hover { color: var(--ink); background: var(--panel-2); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
/* The byte readout is the one element that is literally a screen: the exact
   calldata SafeHands reads. It is recessed and carries the faintest scanlines,
   so it reads as a lit display rather than a code block. */
.req {
  position: relative;
  font-family: var(--mono); font-size: .81rem; line-height: 1.9; color: var(--ink-2);
  background: var(--ground); border: 1px solid var(--rule); padding: 13px 15px;
  overflow-x: auto; white-space: pre;
  box-shadow: inset 0 0 34px -14px rgb(0 0 0 / .7);
}
.req::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 3px);
}
.req b { color: var(--ink); font-weight: 500; }
.req u { text-decoration: none; color: var(--vc, var(--block)); }

/* ── the calibrated scale: the product's real decision contract ─────── */
.gauge { padding: 24px 20px 20px; }
.gauge-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.gauge-head .read { margin-left: auto; text-align: right; }
.verdict-word {
  font-family: var(--pixel); font-size: 2.1rem; font-weight: 400;
  letter-spacing: .02em; color: var(--vc); line-height: 1;
  text-shadow: 0 0 20px color-mix(in srgb, var(--vc) 58%, transparent);
}
.read .score { font-family: var(--pixel); font-variant-numeric: tabular-nums; font-size: 2.35rem; font-weight: 400; color: var(--vc); line-height: 1; text-shadow: 0 0 20px color-mix(in srgb, var(--vc) 58%, transparent); }
.read .of { color: var(--ink-3); font-size: 1rem; }

.scale { position: relative; }
/* Zone bands ARE the documented verdict bands, not decoration. */
.zones { display: flex; height: 34px; border: 1px solid var(--rule-2); }
.zone { position: relative; }
.zone.a { flex: 0 0 30%; background: color-mix(in srgb, var(--allow) 11%, transparent); }
.zone.w { flex: 0 0 40%; background: color-mix(in srgb, var(--warn) 11%, transparent); border-left: 1px solid var(--rule-2); }
.zone.b { flex: 1 1 auto; background: color-mix(in srgb, var(--block) 11%, transparent); border-left: 1px solid var(--rule-2); }
.zone span {
  position: absolute; top: 50%; transform: translateY(-50%); left: 8px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}
.zone.a span { color: var(--allow); }
.zone.w span { color: var(--warn); }
.zone.b span { color: var(--block); }

/* Overshoot then settle: an analog needle does not stop dead on the value. */
.fill { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 0; background: var(--vc); box-shadow: 0 0 24px -2px var(--vc); opacity: .95; transition: width .62s cubic-bezier(.31,1.28,.42,1); }
@media (prefers-reduced-motion: reduce) { .fill { transition: none; } }
.needle { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); transition: left .62s cubic-bezier(.31,1.28,.42,1); }
@media (prefers-reduced-motion: reduce) { .needle { transition: none; } }

/* Tick strip: major ticks every 10, the threshold at 70 called out. */
.ticks { position: relative; height: 26px; margin-top: 2px; }
.ticks span.t { position: absolute; top: 0; width: 1px; height: 5px; background: var(--rule-2); }
.ticks span.t.maj { height: 8px; background: var(--ink-3); }
.ticks span.n { position: absolute; top: 10px; transform: translateX(-50%); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .64rem; font-weight: 400; color: var(--ink-3); }
.thr { position: absolute; left: 70%; top: -36px; bottom: 0; width: 1px; background: var(--ink-2); }
.thr::after {
  content: "THRESHOLD 70"; position: absolute; top: -16px; left: 6px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; color: var(--ink-2); white-space: nowrap;
}
@media (max-width: 560px) { .thr::after { content: "70"; } }

.findings { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.findings li { font-size: .89rem; color: var(--ink-2); padding-left: 18px; position: relative; }
.findings li.arriving { opacity: 0; transform: translateY(3px); }
.findings li.settled { opacity: 1; transform: none; transition: opacity .32s ease, transform .32s ease; }
@media (prefers-reduced-motion: reduce) {
  .findings li.arriving { opacity: 1; transform: none; }
  .findings li.settled { transition: none; }
}
.findings li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--vc); }
/* The recommendation is the instrument's conclusion, so it carries the verdict
   state in its form: a left bar and the faintest wash in the live colour. */
.act {
  margin-top: 18px; padding: 12px 14px; font-size: .89rem; color: var(--ink-2);
  border-left: 2px solid var(--vc);
  background: color-mix(in srgb, var(--vc) 6%, transparent);
}
.act b { color: var(--ink); font-weight: 620; }

/* ── narrow screens ────────────────────────────────────────────────
   Section and gutter spacing is already fluid (--sec-y / --pad-x), so the phone
   breakpoint only restyles the pieces that must physically change: segmented
   controls that would wrap wrong, the stacked calls to action, and the
   instrument's own paddings. */
@media (max-width: 620px) {
  .inst-top { flex-wrap: wrap; gap: 6px 12px; }

  /* Full-width stacked calls to action, each a comfortable tap height. */
  .cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; text-align: center; padding: 13px 16px; }
  .btn.g { font-size: .78rem; padding: 12px 12px; white-space: normal; line-height: 1.5; }

  /* The instrument sits closer to the copy, and gives the scale its edges back. */
  .inst { margin-top: 30px; }
  .specimen { padding: 15px; }
  .gauge { padding: 20px 14px 16px; }

  /* Segmented controls become stacked rows, each tall enough to tap. */
  .pills { width: 100%; flex-wrap: wrap; }
  .pill { flex: 1 1 100%; padding: 13px 14px; border-right: 0; border-bottom: 1px solid var(--rule-2); text-align: left; }
  .pill:last-child { border-bottom: 0; }

  .gauge-head { flex-wrap: wrap; gap: 6px 12px; }
  .verdict-word, .read .score { font-size: 1.35rem; }

  .ticks span.n { font-size: .58rem; }
  .zone span { font-size: .54rem; left: 5px; letter-spacing: .1em; }
  .st { padding: 16px 15px; }
}
/* Very small handsets: thin the number strip, but keep all three zone labels
   so the legend stays symmetric rather than showing block alone. */
@media (max-width: 380px) {
  .ticks span.n[data-v="20"], .ticks span.n[data-v="60"] { display: none; }
  .zone span { font-size: .5rem; left: 4px; letter-spacing: .05em; }
}

/* A deliberately sparse band of evidence before the loud one. Every name here is
   a VERIFIED entry in the ecosystem registry, so it is evidence, not a logo wall:
   each carries a safety-green check because recognition on this page means the
   same thing it means in a verdict. */
.verified { padding: clamp(34px, 5vw, 48px) var(--pad-x); border-bottom: 1px solid var(--rule); text-align: center; }
.vf-label { display: block; margin-bottom: 20px; color: var(--safe); }
.vf-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }
.vf-names span { position: relative; padding-left: 22px; font-family: var(--mono); font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.vf-names span::before { content: "\2713"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--safe); font-weight: 700; font-size: .95em; }
@media (max-width: 620px) {
  .vf-names { gap: 12px 22px; }
  .vf-names span { font-size: .96rem; padding-left: 19px; }
}

/* ── the problem ───────────────────────────────────────────────────── */
.lead .bad { color: var(--block); font-weight: 500; }

/* ── what it catches ────────────────────────────────────────────────
   Not a wall of prose: six specimen readouts. Each shows the call the inspector
   reads, the flagged token lit in its verdict colour, a verdict chip, and a
   single plain line. A recessed mono screen per tile ties the section back to
   the live instrument in the hero, so this band reads differently from the
   plain faceplate grids elsewhere on the page. */
.specs { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spec {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px;
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 13px;
  transition: border-color .18s ease, transform .18s ease;
}
.spec:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.spec-io { display: flex; align-items: center; gap: 10px; }
.chip {
  flex: none; font-family: var(--mono); font-size: .6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; padding: 3px 8px;
  border: 1px solid var(--rule-2); border-radius: 4px; color: var(--ink-3);
}
.chip.b { color: var(--block); border-color: color-mix(in srgb, var(--block) 42%, var(--rule-2)); }
.chip.w { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, var(--rule-2)); }
/* The recessed readout: the exact call, the flagged token underlined in the
   verdict colour. Faint inset, so it reads as a lit screen, not a code block. */
.spec code {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-2);
  background: var(--ground); border: 1px solid var(--rule); border-radius: 5px;
  padding: 9px 12px; white-space: nowrap; overflow-x: auto;
  box-shadow: inset 0 0 26px -14px rgb(0 0 0 / .7);
}
.spec code u { text-decoration: none; font-weight: 500; }
.spec.block code u { color: var(--block); }
.spec.warn code u { color: var(--warn); }
.spec > p { font-size: .9rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .spec, .spec:hover { transition: none; transform: none; } }
@media (max-width: 720px) { .specs { grid-template-columns: 1fr; } }

/* ── sequence: the only numbered thing on the page, because it is the
     only real sequence ─────────────────────────────────────────────── */
.seq { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-bottom: 0; margin-top: 30px; position: relative; }
/* A brand-blue signal sweeps across the top of the strip, left to right, once the
   pipeline scrolls into view: the data flowing through the four steps. */
.seq::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0;
  background: var(--brand); box-shadow: 0 0 11px 1px var(--glow); z-index: 1;
}
.seq.flow::before { width: 100%; transition: width 1s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .seq.flow::before { width: 0; transition: none; } }
@media (max-width: 900px) { .seq { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .seq { grid-template-columns: 1fr; } }
.st { padding: 20px 18px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.st:last-child { border-right: 0; }
.st .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .1em; color: var(--ink-3); }
.st.key { background: var(--panel); }
.st.key .n { color: var(--brand); }
/* A brand-blue step pulses once as the pipeline activates it, then settles. */
.st.lit { animation: steplit 1.6s ease both; }
@keyframes steplit {
  0% { box-shadow: none; }
  22% { box-shadow: inset 0 0 0 1px var(--brand), 0 0 38px -6px var(--glow); }
  100% { box-shadow: inset 0 0 0 1px transparent, 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .st.lit { animation: none; } }
.st h3 { font-size: 1rem; font-weight: 630; letter-spacing: -.018em; }
.st p { font-size: .87rem; color: var(--ink-2); }
.note { margin-top: 28px; color: var(--ink-2); max-width: 66ch; font-size: 1.02rem; }

/* ── spec rows ─────────────────────────────────────────────────────── */
.rows { margin-top: 26px; border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 190px 1fr; gap: 26px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 6px; } }
.row h3 { font-size: .98rem; font-weight: 630; letter-spacing: -.018em; }
.row p { color: var(--ink-2); font-size: .92rem; }

/* ── built for Real-Fi ──────────────────────────────────────────────
   The domain pillar: the five obligations real-world assets carry that DeFi can
   skip, each mapped to a capability that is live on mainnet. Green "Live" tags,
   because the claim is only ever what is deployed; the closing note keeps scope
   honest (no issuance, no KYC, does not make a flow compliant on its own). */
.rfi { margin-top: 30px; border-top: 1px solid var(--rule); }
.rfi-row { display: grid; grid-template-columns: 190px 1fr auto; gap: 20px 26px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rfi-req { font-size: 1rem; font-weight: 640; letter-spacing: -.018em; color: var(--ink); }
.rfi-cap { font-size: .92rem; color: var(--ink-2); max-width: 62ch; }
.rfi-live {
  align-self: start; font-family: var(--mono); font-size: .58rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em; padding: 4px 9px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--safe) 42%, var(--rule-2)); border-radius: 4px; color: var(--safe);
}
@media (max-width: 760px) {
  .rfi-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .rfi-cap { grid-column: 1 / -1; }
}

/* ── who it's for ───────────────────────────────────────────────────
   Three ways to reach one engine. Same cell-and-hairline system as the other
   grids; the "for X" kicker rides the brand blue, each card closing on a
   bordered call to action that lights blue on hover. */
.paths { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.path { background: var(--panel); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.path .pk { color: var(--brand); }
.path h3 { font-size: 1.16rem; font-weight: 660; letter-spacing: -.022em; }
.path p { font-size: .9rem; color: var(--ink-2); flex: 1 1 auto; }
.path code { font-family: var(--mono); color: var(--brand); font-size: .86em; }
.path > a {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px;
  padding: 9px 15px; font-size: .87rem; font-weight: 560; color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 6px;
  transition: border-color .18s ease, background .18s ease;
}
.path > a:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, transparent); }
.path > a .arw { color: var(--brand); transition: transform .18s ease; }
.path > a:hover .arw { transform: translateX(3px); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

/* ── the Run card: the install command, minimal ─────────────────────
   A compact panel, not a big one: a small Works-with row of the MCP clients as
   MONOCHROME brand glyphs (one ink, never a colour logo wall), the install line
   as a recessed terminal with a copy button, and two quiet text links. */
.runcard {
  margin-top: 28px; max-width: 560px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--panel);
  padding: 18px; display: flex; flex-direction: column; gap: 15px;
}
.run-with { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.cls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cl { display: inline-flex; color: var(--ink-3); transition: color .18s ease; }
.cl:hover { color: var(--ink); }
.cl svg { width: 20px; height: 20px; fill: currentColor; display: block; }
/* The install line, a recessed terminal: a blue prompt, the command, a copy. */
.run-cmd {
  display: flex; align-items: center; gap: 10px;
  background: var(--ground); border: 1px solid var(--rule); border-radius: 7px;
  padding: 8px 8px 8px 13px;
  box-shadow: inset 0 0 24px -16px rgb(0 0 0 / .7);
}
.run-prompt { flex: none; color: var(--brand); font-family: var(--mono); font-weight: 600; font-size: .85rem; }
.run-cmd code { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: .83rem; color: var(--ink); white-space: nowrap; overflow-x: auto; }
.run-copy {
  flex: none; font: inherit; font-size: .73rem; letter-spacing: .03em;
  padding: 6px 11px; border: 1px solid var(--rule-2); border-radius: 5px;
  background: var(--panel-2); color: var(--ink-2); cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.run-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.run-copy.done { color: var(--safe); border-color: color-mix(in srgb, var(--safe) 50%, var(--rule-2)); }
.run-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.run-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 550; color: var(--ink-2); }
.run-links a:hover { color: var(--ink); }
.run-links .arw { color: var(--brand); transition: transform .18s ease; }
.run-links a:hover .arw { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .run-links a:hover .arw { transform: none; } }

/* ── platform figures: the first bold full-bleed band ────────────────────
   The one place the page turns fully to brand colour, the way a funded product
   states its scale. Every figure is checkable in the repository: no user counts,
   no volume, nothing that cannot be verified by reading the code. */
.figures { padding: clamp(56px, 8vw, 84px) 0; border-bottom: 0; background: var(--band); color: var(--on-band); }
.figures-h { text-align: center; color: var(--on-band); font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 660; letter-spacing: -.035em; max-width: 20ch; margin: 0 auto 10px; }
.figures-sub { text-align: center; color: rgb(255 255 255 / .76); font-size: .98rem; max-width: 44ch; margin: 0 auto clamp(34px, 5vw, 46px); }
.fig-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.fig { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgb(255 255 255 / .22); padding-top: 16px; }
.fig .ch { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; color: rgb(255 255 255 / .68); }
.fig b {
  font-family: var(--pixel); font-variant-numeric: tabular-nums;
  font-size: clamp(2.3rem, 5.6vw, 3.5rem); font-weight: 400;
  letter-spacing: .01em; line-height: 1; color: var(--on-band); margin-top: 2px;
}
.fig b em { font-style: normal; color: #64F5AE; text-shadow: 0 0 18px rgb(100 245 174 / .5); }
.fig span:last-child { font-size: .85rem; color: rgb(255 255 255 / .74); }
@media (max-width: 900px) { .fig-row { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; } }
@media (max-width: 380px) { .fig-row { grid-template-columns: 1fr; gap: 24px; } }

/* The boundary sits under the trust properties, as the other half of the
   same argument rather than a section of its own. */
.never-head {
  margin-top: 44px; font-size: 1.15rem; font-weight: 640;
  letter-spacing: -.025em; color: var(--ink);
}
.nl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin-top: 14px; }
.nl div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 13px 0; }
.nl .x { font-family: var(--mono); font-size: .78rem; color: var(--vc); }
.nl p { color: var(--ink-2); font-size: .91rem; }
@media (max-width: 760px) { .nl { grid-template-columns: 1fr; } }

/* ── closing call to action: the second bold band ───────────────────────
   A dark full-bleed finale, the same in both themes, lit by a wide safety-green
   glow: the payoff of a page about signing safely. Green eyebrow, blue CTA. */
.closer { padding: clamp(80px, 11vw, 128px) 0; border-bottom: 0; background: #0C0E17; color: #EAECF5; text-align: center; overflow: hidden; }
.closer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 130% at 50% 122%, rgb(74 222 128 / .22), transparent 62%);
}
.closer .band-inner { position: relative; z-index: 1; }
.closer-ey { display: block; color: #4ADE80; margin-bottom: 16px; }
.closer h2 { color: #FFFFFF; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.04em; max-width: 18ch; margin: 0 auto; }
.closer p { color: #9CA1B4; max-width: 52ch; margin: 18px auto 0; }
.closer .cta { margin-top: 32px; justify-content: center; }

/* ── footer ────────────────────────────────────────────────────────
   A full footer: brand block with the tagline and community links on the left,
   three columns of navigation on the right, the copyright as a base bar under a
   hairline. */
footer { padding: clamp(40px, 6vw, 56px) var(--pad-x) 40px; max-width: var(--maxw); margin: 0 auto; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.foot { display: grid; grid-template-columns: 1.25fr 2fr; gap: 40px 32px; }
.foot .mark { width: 22px; height: 22px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-tag { color: var(--ink-2); font-size: .9rem; max-width: 30ch; }
/* Social marks: the real brand glyphs, rendered monochrome so they sit in the
   palette, each in a hairline chip that lights to the brand blue with a soft
   glow on hover, echoing the instrument. Recognisable, never a generic set. */
.foot-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: 8px;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.foot-social a:hover {
  color: var(--brand); border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  box-shadow: 0 0 18px -7px var(--glow);
}
.foot-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-h { margin-bottom: 2px; }
.foot-col a { font-size: .88rem; color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); }
.foot-base { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .8rem; letter-spacing: .01em; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 520px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }