/* =============================================================================
   site.css - VerifAIer Marketing Site v1. Self-contained (dashboard tokens).
   Premium enterprise, dark. No CDN, no external fonts.
   ============================================================================= */
/* -----------------------------------------------------------------------------
   Fonts. Self-hosted, no CDN, no external request at page load.
   Archivo is the variable font: one file carries wght 100-900, so every weight
   the frozen design uses costs a single request instead of four. JetBrains Mono
   ships no variable webfont, so only the two weights actually used were taken.
   Licences sit beside the files: OFL-Archivo.txt and OFL-JetBrainsMono.txt.
   `font-display:swap` renders the fallback immediately and swaps when the face
   arrives, which is what keeps a text-first page readable on a cold cache.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Archivo";src:url("../assets/fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* -----------------------------------------------------------------------------
   Gate 4 - the seven-product VISUAL identity family, as `--id-*` below.

   Presentation only. These are hues; `vailidator.ui.identity` is the semantic source
   and `scripts/site_tokens.py --check` compares them in both directions, so a hue
   added here and never declared there is drift. They may never decide routing,
   authorization, capability, maturity, availability, subsystem loading, persistence
   or a trust decision. Three of the seven share the brand green, which is exactly why
   the MARK is the identity and the hue is not.

   Two rules about the block below, both learned the hard way. Nothing but
   declarations may go inside it: the token checker reads it by splitting on `;`, so a
   comment in there becomes part of the next property's name. And no comment anywhere
   in this file may spell the block's own opening selector, because the checker finds
   that block with the first match in the file and would capture the comment instead.
   -------------------------------------------------------------------------- */
:root{
  --bg:#07090e; --bg-2:#0a0d13; --surface:#0d1117; --elevated:#161c27; --overlay:#1e2736;
  --text:#e8edf5; --muted:#8b97a8; --faint:#5a6474; --inverse:#07090e;
  --brand:#00e5a0; --brand-dim:#00b87e; --brand-bg:rgba(0,229,160,0.08); --brand-glow:rgba(0,229,160,0.35);
  --blue:#60a5fa; --violet:#a78bfa; --amber:#f5a623; --cyan:#22d3ee;
  --id-evidence-engine:#00e5a0; --id-flight-recorder:#60a5fa;
  --id-memory-receipts:#a78bfa; --id-agent-passport:#f5a623;
  --id-trust-intelligence:#22d3ee; --id-sentinel-runtime:#00e5a0;
  --id-verifaier-me:#00e5a0;
  --line:rgba(255,255,255,0.08); --line-soft:rgba(255,255,255,0.05); --line-strong:rgba(255,255,255,0.16);
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono","Fira Code","Cascadia Code","Consolas","Courier New",monospace;
  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --wrap:1180px; --px:clamp(1.25rem,5vw,2.5rem);
  --t:180ms cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.006em;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--brand-dim)}
ul{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.st-skip{position:absolute;left:1rem;top:-60px;z-index:200;background:var(--brand);color:var(--inverse);
  font-weight:700;padding:.6rem 1rem;border-radius:var(--r);transition:top var(--t)}
.st-skip:focus{top:1rem;color:var(--inverse)}
.st-container{max-width:var(--wrap);margin:0 auto;padding:0 var(--px);width:100%}

/* ── Nav ── */
.st-nav{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:background var(--t),border-color var(--t),backdrop-filter var(--t)}
.st-nav.is-scrolled{background:rgba(7,9,14,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.st-nav__inner{display:flex;align-items:center;gap:2rem;height:66px}
.st-brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800;font-size:1.1rem;letter-spacing:-0.02em}
.st-brand:hover{color:var(--text)}
/* the canonical VerifAIer v/A monogram, presented as a logo lockup badge */
.st-brand__mark{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:9px;background:var(--brand-bg);box-shadow:inset 0 0 0 1px rgba(0,229,160,0.22)}
.st-brand__va{font-family:var(--mono);font-weight:800;font-size:.92rem;letter-spacing:-0.06em;
  color:var(--brand);line-height:1}
.st-brand__word em{font-style:normal;color:var(--brand)}
.st-nav__menu{display:flex;align-items:center;gap:1.75rem;margin-left:auto}
.st-nav__menu>a{color:var(--muted);font-size:.9rem;font-weight:500}
.st-nav__menu>a:hover,.st-nav__menu>a[aria-current="page"]{color:var(--text)}
.st-nav__actions{display:flex;align-items:center;gap:.6rem;margin-left:.5rem}
.st-nav__toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);
  background:none;color:var(--text);align-items:center;justify-content:center;cursor:pointer}
.st-nav__toggle svg{width:20px;height:20px}

/* ── Buttons ── */
.st-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border-radius:var(--r);
  font-size:.9rem;font-weight:600;font-family:inherit;background:transparent;border:1px solid transparent;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),color var(--t);white-space:nowrap;cursor:pointer}
.st-btn--primary{background:var(--brand);color:var(--inverse);box-shadow:0 2px 16px rgba(0,229,160,0.2)}
.st-btn--primary:hover{color:var(--inverse);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,229,160,0.32)}
.st-btn--ghost{border-color:var(--line-strong);color:var(--text)}
.st-btn--ghost:hover{border-color:var(--brand);color:var(--text)}
.st-btn--lg{padding:.9rem 1.6rem;font-size:1rem}
.st-btn--sm{padding:.45rem .85rem;font-size:.82rem}
.st-btn[hidden]{display:none}   /* st-btn sets inline-flex, which beats [hidden] */
.st-btn:active{transform:translateY(0) scale(.98)}

/* ── Typographic sections ── */
.st-section{padding:clamp(4.5rem,9vw,8rem) 0}
.st-section--alt{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.st-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:1.25rem}
.st-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.st-h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:-0.04em;line-height:1.04}
.st-h1 em{font-style:normal;color:var(--brand)}
.st-h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.st-h3{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em}
.st-lead{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--muted);line-height:1.65;max-width:60ch}
.st-sectionhead{max-width:760px;margin-bottom:3.5rem}
.st-sectionhead .st-lead{margin-top:1rem}

/* ── Hero ── */
.st-hero{position:relative;padding:clamp(4.5rem,10vw,8rem) 0 clamp(3.5rem,7vw,6rem);overflow:hidden}
.st-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 55% at 25% -5%,rgba(0,229,160,0.14),transparent 60%),
  radial-gradient(50% 50% at 90% 10%,rgba(96,165,250,0.08),transparent 60%),var(--bg)}
.st-hero__actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.25rem}
.st-hero__note{margin-top:1.5rem;font-size:.85rem;color:var(--faint);display:flex;gap:1.25rem;flex-wrap:wrap}
.st-hero__note span{display:inline-flex;align-items:center;gap:.4rem}
.st-hero__note span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand)}
/* WP-10L: the hero is a two-column lockup. The claim sits on the left and the reserved 3D
   Pill slot on the right, over a scannable capability strip. The slot keeps its own aspect
   ratio so the page does not reflow when the real asset lands, and it draws nothing. */
.st-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.st-hero__copy{min-width:0}
.st-hero__visual{aspect-ratio:1/1;width:100%;max-width:420px;margin-left:auto;
  border-radius:var(--r-xl)}
.st-hero__strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;margin-top:clamp(2.5rem,5vw,3.5rem);background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.st-hero__strip li{background:var(--bg);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.3rem}
.st-hero__strip strong{font-size:.9rem;font-weight:700;letter-spacing:-0.01em}
.st-hero__strip span{font-size:.8rem;color:var(--muted);line-height:1.45}
@media (max-width:860px){
  .st-hero__grid{grid-template-columns:1fr}
  .st-hero__visual{display:none}
}

/* ── Framework strip ── */
.st-strip{display:flex;align-items:center;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;justify-content:center;
  padding:1.5rem 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.st-strip__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.st-strip__item{color:var(--muted);font-weight:600;font-size:.95rem}

/* ── Cards / grids ── */
.st-grid{display:grid;gap:1.5rem}
.st-grid--3{grid-template-columns:repeat(3,1fr)}
.st-grid--2{grid-template-columns:repeat(2,1fr)}
.st-grid--4{grid-template-columns:repeat(4,1fr)}
.st-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.st-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.4)}
.st-card--muted{background:var(--bg-2);border-style:dashed}
.st-card--muted:hover{transform:none;box-shadow:none}
.st-card__icon{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  background:var(--brand-bg);color:var(--brand);margin-bottom:1.1rem;box-shadow:inset 0 0 0 1px rgba(0,229,160,0.22)}
.st-card__icon svg{width:22px;height:22px}
.st-card h3{margin-bottom:.5rem}
.st-card p{color:var(--muted);font-size:.94rem}
/* the arrow had no intrinsic size, so it rendered at ~49px next to 14px text */
.st-card__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1rem;font-size:.86rem;font-weight:600;white-space:nowrap}
.st-card__link svg{width:1em;height:1em;flex:0 0 auto}
/* the audience line inside a card read as a continuation of the paragraph */
.st-card .st-meta{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-soft);color:var(--faint);font-size:.82rem}


/* ── Stat strip ── */
.st-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.st-stat{border-left:2px solid var(--brand);padding-left:1.1rem}
.st-stat__num{font-size:2rem;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.st-stat__lbl{color:var(--muted);font-size:.86rem;margin-top:.25rem}

/* ── Split feature rows ── */
.st-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.st-split+.st-split{margin-top:clamp(3rem,6vw,5rem)}
.st-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:1.5rem;
  box-shadow:0 20px 50px rgba(0,0,0,0.45)}
.st-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem}
.st-list li{display:flex;gap:.7rem;color:var(--muted);font-size:.95rem}
.st-list svg{width:20px;height:20px;color:var(--brand);flex-shrink:0;margin-top:1px}

/* ── Code ── */
.st-code{background:#05070b;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem 1.4rem;
  font-family:var(--mono);font-size:.82rem;line-height:1.7;color:#c7d2e0;overflow-x:auto;white-space:pre}
.st-code .c{color:var(--faint)} .st-code .g{color:var(--brand)} .st-code .k{color:var(--violet)} .st-code .s{color:#7fd1b9}
.st-endpoint{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:.83rem}
.st-endpoint:last-child{border-bottom:none}
.st-verb{font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:.15rem .5rem;border-radius:var(--r-sm);border:1px solid currentColor}
.st-verb--get{color:var(--blue)} .st-verb--post{color:var(--brand)}
.st-endpoint span{color:var(--muted)}

/* ── Pill / badge ── */
.st-pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--r-full);border:1px solid var(--line-strong);color:var(--muted)}
.st-pill--brand{color:var(--brand);border-color:rgba(0,229,160,0.3);background:var(--brand-bg)}

/* ── Pricing ── */
.st-price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:2rem;display:flex;flex-direction:column}
.st-price--featured{border-color:rgba(0,229,160,0.4);box-shadow:0 0 0 1px rgba(0,229,160,0.15),0 24px 60px rgba(0,0,0,0.5)}
.st-price__name{font-size:1.1rem;font-weight:700}
.st-price__amt{font-size:2.6rem;font-weight:800;letter-spacing:-0.03em;margin:.75rem 0 .25rem}
.st-price__amt small{font-size:.95rem;font-weight:500;color:var(--muted)}
.st-price__desc{color:var(--muted);font-size:.9rem;min-height:2.6em}
.st-price .st-list{flex:1;margin:1.5rem 0}
.st-price .st-btn{width:100%;justify-content:center}

/* ── CTA band ── */
.st-cta{position:relative;text-align:center;overflow:hidden}
.st-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 120% at 50% 0%,rgba(0,229,160,0.12),transparent 60%),var(--bg-2)}
.st-cta .st-h2{margin-bottom:1rem}
.st-cta__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ── Forms ── */
.st-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:2rem;box-shadow:0 24px 60px rgba(0,0,0,0.45)}
.st-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.st-field label{font-size:.85rem;font-weight:600;color:var(--muted)}
.st-field input,.st-field textarea,.st-field select{background:#05070b;border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .85rem;color:var(--text);font-size:.92rem;font-family:inherit}
.st-field input:focus,.st-field textarea:focus,.st-field select:focus{outline:none;border-color:rgba(0,229,160,0.4);box-shadow:0 0 0 3px var(--brand-bg)}
.st-field textarea{min-height:110px;resize:vertical}
.st-form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.st-success{display:flex;gap:.7rem;align-items:flex-start;background:var(--brand-bg);border:1px solid rgba(0,229,160,0.3);
  border-radius:var(--r);padding:1rem;color:var(--text);font-size:.9rem}
.st-success svg{width:20px;height:20px;color:var(--brand);flex-shrink:0;margin-top:1px}

/* ── FAQ ── */
.st-faq details{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.25rem;margin-bottom:.75rem;background:var(--surface)}
.st-faq summary{font-weight:600;cursor:pointer;list-style:none}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq p{color:var(--muted);font-size:.92rem;margin-top:.75rem}

/* ── Proof-first demonstrations ── */
.st-verify,.st-trail{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.75rem}
.st-verify__head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid var(--line-soft)}
.st-verify__file{font-family:var(--mono);font-size:.9rem;color:var(--text)}
.st-verify__size{color:var(--faint);font-size:.82rem}
.st-verify__rows{display:grid;gap:.6rem;margin:1.1rem 0}
.st-verify__row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.st-verify__label{min-width:11.5rem;color:var(--muted);font-size:.88rem}
.st-verify__hash{font-family:var(--mono);font-size:.86rem;color:var(--text);
  word-break:break-all}
.st-verify__verdict{font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.15rem .5rem;border-radius:var(--r);
  border:1px solid var(--line-strong);color:var(--muted)}
.st-verify[data-state=match] .st-verify__verdict{color:var(--brand);border-color:var(--brand)}
.st-verify[data-state=mismatch] .st-verify__verdict{color:#ff8f8f;border-color:#ff8f8f}
.st-verify[data-state=match] .st-verify__hash[data-role=computed]{color:var(--brand)}
.st-verify[data-state=mismatch] .st-verify__hash[data-role=computed]{color:#ff8f8f}
.st-verify__editlabel{display:block;margin:.4rem 0 .5rem;color:var(--muted);font-size:.88rem}
.st-verify__bytes{width:100%;font-family:var(--mono);font-size:.8rem;line-height:1.55;
  color:var(--text);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:.9rem;resize:vertical}
.st-verify__bytes:focus{outline:2px solid var(--brand);outline-offset:2px}
.st-verify__status{color:var(--muted);font-size:.9rem;margin-top:.9rem}
.st-verify__reset{margin-top:.75rem}
.st-verify__live,.st-trail__live{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.st-trail__id{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid var(--line-soft)}
.st-trail__idlabel{color:var(--faint);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.1em}
.st-trail__id code{font-family:var(--mono);font-size:.84rem;color:var(--text);
  word-break:break-all}
.st-trail__list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.st-trail__row{display:grid;grid-template-columns:11rem 13rem 1fr auto;gap:.9rem;
  align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
.st-trail__surface{font-weight:700;color:var(--text);font-size:.92rem}
.st-trail__file{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.st-trail__desc{color:var(--muted);font-size:.88rem}
.st-trail__mark{font-family:var(--mono);font-size:.76rem;color:var(--faint);
  white-space:nowrap}
.st-trail__row[data-found=yes] .st-trail__mark{color:var(--brand)}
.st-trail__row[data-found=no] .st-trail__mark{color:#ff8f8f}
.st-trail__actions{margin-top:1.25rem}
.st-trail__summary{color:var(--muted);font-size:.9rem;margin-top:.9rem}
@media (max-width:760px){
  .st-trail__row{grid-template-columns:1fr;gap:.25rem}
  .st-verify__label{min-width:100%}
}

/* ── Footer ── */
.st-footer{border-top:1px solid var(--line-soft);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;background:var(--bg-2)}
.st-footer__grid{display:grid;grid-template-columns:1.5fr repeat(6,minmax(0,1fr));gap:1.75rem 1.5rem}
.st-footer__tag{color:var(--muted);font-size:.9rem;margin-top:1rem;max-width:34ch}
/* Column headings are `h2` (Gate 5): the footer is a sibling landmark of `<main>` and every
   page has one `h1`, so `h1 -> h2` is the only level that cannot skip. Same rendered box as
   the `h4` it replaced -- the reset zeroes margins and both default to bold. */
.st-footer h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:1rem}
.st-footer li{margin-bottom:.6rem}
.st-footer li a{color:var(--muted);font-size:.9rem}
.st-footer li a:hover{color:var(--text)}
.st-footer__legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.75rem;
  border-top:1px solid var(--line-soft);color:var(--faint);font-size:.82rem}

.st-mt-1{margin-top:1rem}.st-mt-2{margin-top:2rem}.st-center{text-align:center}
@keyframes st-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.st-hero .st-eyebrow,.st-hero .st-h1,.st-hero .st-lead,.st-hero__actions,.st-hero__note{animation:st-rise .5s ease both}
.st-hero .st-h1{animation-delay:.05s}.st-hero .st-lead{animation-delay:.1s}.st-hero__actions{animation-delay:.15s}

/* ── Responsive ── */
@media (max-width:1180px){
  .st-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-footer__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .st-grid--3,.st-grid--4{grid-template-columns:repeat(2,1fr)}
  .st-stats{grid-template-columns:repeat(2,1fr)}
  .st-split{grid-template-columns:1fr}
  .st-footer__grid{grid-template-columns:1fr 1fr}
  .st-footer__brand{grid-column:1/-1}
  .st-nav__toggle{display:inline-flex}
  .st-nav__menu{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(7,9,14,0.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:1rem var(--px) 1.5rem;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t)}
  .st-nav.is-open .st-nav__menu{opacity:1;transform:none;pointer-events:auto}
  .st-nav__menu>a{padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
  .st-nav__actions{margin:1rem 0 0;flex-direction:column;align-items:stretch}
  .st-nav__actions .st-btn{justify-content:center}
}
@media (max-width:560px){
  .st-grid--3,.st-grid--4,.st-grid--2{grid-template-columns:1fr}
  .st-stats{grid-template-columns:1fr 1fr}
  .st-form__row{grid-template-columns:1fr}
  .st-footer__grid{grid-template-columns:1fr}
}

.st-footer__legal a{color:var(--muted)}
.st-footer__legal a:hover{color:var(--text)}
.st-footer__links{white-space:normal}

/* The five questions every public page answers, in one shape. */
.st-answers{display:grid;gap:1.1rem;margin-top:1.5rem}
.st-answer{border-left:2px solid var(--line-strong);padding-left:1.1rem}
.st-answer dt{color:var(--text);font-weight:600;font-size:1rem;margin-bottom:.35rem}
.st-answer dd{color:var(--muted);font-size:.95rem;margin:0}

/* ── WP-10R: the landing redesign ─────────────────────────────────────────────
   The approved Pill is the hero. Everything here exists to give it room. */
.st-hero--pill{padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem)}
.st-hero--pill .st-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,6vw,5rem)}
.st-hero--pill .st-h1{font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.02;
  letter-spacing:-0.035em;max-width:14ch}
.st-hero--pill .st-lead{font-size:clamp(1.05rem,1.9vw,1.35rem);max-width:34ch;
  color:var(--muted);margin-top:1.25rem}
.st-hero--pill .st-eyebrow{margin-bottom:1.25rem}
.st-hero--pill .st-hero__actions{margin-top:2rem}
/* The image, at the size the brief asks for: it dominates, and it keeps its room on a
   phone instead of being switched off. */
.st-hero--pill .st-hero__visual{aspect-ratio:1/1;width:100%;max-width:none;
  display:flex;align-items:center;justify-content:center}
.st-pillshot{display:block;width:100%}
.st-pillshot img{width:100%;height:auto;border-radius:var(--r-xl);display:block}
.st-pillshot--tilt img{transform:rotate(-3deg)}
/* Where to start: six destinations, above the fold, without six more buttons. */
.st-entry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;
  margin-top:2.25rem;max-width:32rem}
.st-entry a{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  transition:border-color var(--t),background var(--t)}
.st-entry a:hover{border-color:var(--brand);background:var(--brand-bg)}
.st-entry strong{font-size:.85rem;color:var(--text);font-weight:600;letter-spacing:-0.01em}
.st-entry span{font-size:.72rem;color:var(--faint)}
/* Product navigation: seven cards, immediately below the hero. */
.st-sectionhead--center{text-align:center;margin-left:auto;margin-right:auto;max-width:46rem}
.st-sectionhead--center .st-lead{margin-left:auto;margin-right:auto}
.st-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.st-pgrid>:nth-child(1){grid-column:span 2}
.st-pcard{position:relative;display:flex;flex-direction:column;gap:.4rem;
  padding:1.6rem 1.5rem 3rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
  transition:border-color var(--t),transform var(--t),background var(--t)}
.st-pcard:hover{border-color:var(--brand);background:var(--elevated);transform:translateY(-2px)}
.st-pcard__eyebrow{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand)}
.st-pcard__name{font-size:1.35rem;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.st-pcard__body{font-size:.9rem;color:var(--muted);line-height:1.5}
.st-pcard__go{position:absolute;left:1.5rem;bottom:1.35rem;color:var(--brand);
  font-size:1.1rem;transition:transform var(--t)}
.st-pcard:hover .st-pcard__go{transform:translateX(4px)}
.st-lcard{padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
.st-lcard h3{font-size:1.05rem;margin-bottom:.5rem;letter-spacing:-0.01em}
.st-lcard p{font-size:.9rem;color:var(--muted);line-height:1.55}
/* A product showcase: copy on one side, the mark on the other. */
.st-showcase__art{display:flex;align-items:center;justify-content:center;min-width:0}
.st-showcase__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,4.5rem);align-items:center}
.st-showcase h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-0.03em;line-height:1.1}
.st-ticks{display:flex;flex-direction:column;gap:.6rem;margin:1.5rem 0 0}
.st-ticks li{position:relative;padding-left:1.6rem;font-size:.95rem;color:var(--muted)}
.st-ticks li::before{content:"";position:absolute;left:0;top:.52em;width:.55rem;height:.55rem;
  border-radius:var(--r-full);background:var(--brand)}
/* Honest availability: two columns, and the difference is visible. */
.st-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.st-tools__col{padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
.st-tools__label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:1rem}
.st-tool{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;font-size:.95rem}
.st-tool strong{color:var(--text);font-weight:600}
.st-tool span:last-child{margin-left:auto;font-size:.75rem;color:var(--faint)}
.st-dot{width:.5rem;height:.5rem;border-radius:var(--r-full);flex:none}
.st-tool--on .st-dot{background:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.st-tool--soon .st-dot{background:var(--line-strong)}
.st-tool--soon strong{color:var(--muted)}
.st-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem;
  counter-reset:step}
.st-steps li{padding:1.35rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
.st-steps li>span{display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:var(--r-full);background:var(--brand-bg);
  color:var(--brand);font-size:.8rem;font-weight:700;margin-bottom:.75rem}
.st-steps strong{display:block;font-size:1rem;margin-bottom:.3rem}
.st-steps p{font-size:.88rem;color:var(--muted);line-height:1.5}
.st-verdict{padding:2.5rem;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);text-align:center}
.st-verdict__label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.st-verdict__value{font-family:var(--mono);font-size:clamp(2rem,4.5vw,3.2rem);color:var(--brand);
  letter-spacing:-0.02em;margin:.5rem 0}
.st-verdict__note{font-size:.9rem;color:var(--muted);max-width:26ch;margin:0 auto}
.st-close__inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.75rem}
.st-close h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-0.03em;max-width:18ch}
@media (max-width:980px){
  .st-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-pgrid>:nth-child(1){grid-column:span 2}
}
@media (max-width:860px){
  .st-hero--pill .st-hero__grid{grid-template-columns:1fr}
  /* The mark stays. It is the brand, and a phone is where most first impressions land. */
  .st-hero--pill .st-hero__visual{display:flex;order:-1;max-width:34rem;margin:0 auto 1.5rem}
  .st-showcase__grid{grid-template-columns:1fr}
  .st-tools,.st-steps{grid-template-columns:1fr}
  .st-entry{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
@media (max-width:600px){
  .st-pgrid,.st-pgrid>:nth-child(1){grid-template-columns:1fr;grid-column:auto}
}

/* WP-10R: the detail is kept, not dumped. A visitor scans; a reader opens. */
.st-more{margin-top:1.25rem;border-top:1px solid var(--line-soft);padding-top:1rem}
.st-more>summary{cursor:pointer;font-size:.85rem;color:var(--brand);list-style:none;
  display:inline-flex;align-items:center;gap:.4rem}
.st-more>summary::-webkit-details-marker{display:none}
.st-more>summary::after{content:"+";font-family:var(--mono);color:var(--faint)}
.st-more[open]>summary::after{content:"−"}
.st-more__body{margin-top:1rem;display:flex;flex-direction:column;gap:.9rem}
.st-more__body p{color:var(--muted);font-size:.95rem;line-height:1.65}

/* =============================================================================
   GATE 4 - the shared public body grammar.

   The three reference pages (Landing, Platform, Products) are one editorial system,
   not three page-specific stylesheets. Everything below is the vocabulary the frozen
   captures repeat across all three: a chapter shell, a labelled chapter head, cards,
   panels, definition rows, proof surfaces, terminal surfaces, product identity rows,
   artwork containers and one action hierarchy.

   It builds on the tokens above rather than declaring values, and it carries no
   authenticated-application density: a marketing chapter breathes, a control plane
   does not, and the inheritance boundary in IMPLEMENTATION_READINESS.md section F is
   the reason these classes are `st-` and stay on the site.
   ============================================================================= */

/* -- Screen-reader-only text ----------------------------------------------- */
/* Not `display:none` and not `visibility:hidden` - both remove it from the
   accessibility tree, which is the one place it is meant to exist. A maturity chip
   reading "PENDING" beside a product name is terse to the point of ambiguity when it is
   announced on its own, so `ui.maturity.MEANINGS` ships in front of it here. */
.st-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* -- Reference hero -------------------------------------------------------- */
/* Landing carries a full pill beside the claim; Platform and Products carry a crop
   bleeding off the top-right corner. One component, one modifier. */
.st-rhero{position:relative;padding:clamp(2.5rem,5.5vw,4.5rem) 0 clamp(2.25rem,4.5vw,4rem);overflow:hidden}
.st-rhero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 52% at 22% -8%,rgba(0,229,160,0.13),transparent 62%),var(--bg)}
.st-rhero__grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center}
.st-rhero__copy{min-width:0;position:relative;z-index:1}
.st-rhero .st-h1{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.03;letter-spacing:-0.038em}
.st-rhero .st-lead{font-size:clamp(1rem,1.7vw,1.16rem);max-width:44ch;margin-top:1.1rem;line-height:1.55}
.st-rhero__actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.6rem}
.st-rhero__art{min-width:0;position:relative}
.st-rhero__art img{width:100%;height:auto;display:block}
/* The Landing capsule bleeds off the right edge in the frozen artboard rather than
   sitting inside the content column, and the LIVE PROOF surface overlaps its lower
   left. `.st-rhero` clips the overflow, so the bleed stops at the viewport.
   The asset is `heroes/pill-hero.png`. The capsule the site used to serve as
   `assets/pill.png` had the superseded category lockup baked into the pixels, which no
   stylesheet can correct; Gate 5 withdrew it from the served tier and deleted its five
   derivatives. The custody record is `docs/design/retired-assets-2026-08-09/MANIFEST.md`. */
.st-rhero__pill{width:172%;max-width:none;margin:-5% 0 0 -4%;
  filter:drop-shadow(0 24px 70px rgba(0,229,160,.22))}
.st-rhero__art .st-proof{position:relative;z-index:2;width:86%;margin:-16% 0 0 auto;
  background:rgba(13,17,23,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
/* The crop. The frozen Platform and Products heroes let the capsule run off the top
   and right edges of the viewport rather than sitting inside the content column. */
.st-rhero--crop .st-rhero__art{position:absolute;top:0;right:0;width:min(46vw,660px);
  pointer-events:none}
.st-rhero--crop .st-rhero__art img{transform:translate(14%,-16%) scale(1.35);
  -webkit-mask-image:radial-gradient(72% 72% at 40% 55%,#000 42%,transparent 78%);
  mask-image:radial-gradient(72% 72% at 40% 55%,#000 42%,transparent 78%)}
.st-rhero--crop .st-rhero__grid{grid-template-columns:minmax(0,1fr)}
.st-rhero--crop .st-h1{font-size:clamp(2.3rem,4.05vw,3.65rem);line-height:1}
.st-rhero--crop .st-rhero__copy{max-width:60ch}

/* The chapter index under the hero lead. Not a nav landmark - it is a contents strip,
   so it stays a plain list and the page keeps one primary navigation. */
.st-chindex{display:flex;flex-wrap:wrap;gap:0 .1rem;margin-top:clamp(1.5rem,3vw,2.25rem);
  padding-top:1.1rem;border-top:1px solid var(--line-soft);max-width:56rem}
.st-chindex li{display:flex;align-items:center}
.st-chindex li+li::before{content:'';width:1px;height:.85rem;background:var(--line);margin:0 .95rem}
.st-chindex a{color:var(--muted);font-size:.83rem}
.st-chindex a:hover{color:var(--text)}

/* -- Chapter shell --------------------------------------------------------- */
.st-ch{padding:clamp(2.75rem,6.1vw,5.5rem) 0;border-top:1px solid var(--line-soft)}
.st-ch--alt{background:var(--bg-2)}
/* The one chapter the frozen Landing tints: VerifAIer Me, the personal surface. */
.st-ch--personal{background:
  radial-gradient(78% 60% at 50% 0%,rgba(0,229,160,0.09),transparent 70%),var(--bg)}
.st-ch--center{text-align:center}
.st-ch--center .st-ch__head{margin-left:auto;margin-right:auto;justify-content:center}
.st-ch--center .st-ch__title,.st-ch--center .st-ch__lead{margin-left:auto;margin-right:auto}

.st-ch__head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem}
.st-ch__n{font-weight:800;font-size:1.75rem;line-height:.9;letter-spacing:-0.04em;
  color:rgba(255,255,255,0.19)}
.st-ch__rule{width:1.6rem;height:1px;background:var(--line-strong)}
.st-ch__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brand);font-weight:700}
.st-ch__q{font-size:.83rem;font-style:italic;color:var(--faint);
  padding-left:.9rem;border-left:1px solid var(--line)}
.st-ch__title{font-size:clamp(1.85rem,3.7vw,2.65rem);font-weight:800;letter-spacing:-0.032em;
  line-height:1.08;max-width:20ch}
.st-ch__lead{font-size:1.02rem;color:var(--muted);line-height:1.55;max-width:52ch;margin-top:.9rem}
/* The aside the frozen chapters set opposite the title. */
.st-ch__split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:end}
.st-ch__aside{font-size:.94rem;color:var(--muted);line-height:1.6;max-width:44ch}
.st-ch__aside--right{margin-left:auto;text-align:right}
.st-ch__aside--block{min-width:0}
.st-ch__under{margin-top:1.1rem}
.st-ch__body{margin-top:clamp(1.4rem,2.6vw,2.25rem)}
.st-ch__body>*+*{margin-top:1.1rem}

/* -- Cards ----------------------------------------------------------------- */
.st-grid{display:grid;gap:.85rem}
.st-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.st-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-card{padding:1.15rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface)}
.st-card--lit{border-color:rgba(0,229,160,0.34);background:rgba(0,229,160,0.045)}
.st-card--quiet{background:transparent}
.st-card__eyebrow{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.5rem}
.st-card--lit .st-card__eyebrow{color:var(--brand)}
.st-card__title{font-size:1.02rem;font-weight:700;letter-spacing:-0.015em;margin-bottom:.4rem}
.st-card__title--big{font-size:1.35rem;color:var(--brand);letter-spacing:-0.02em}
.st-card p{font-size:.875rem;color:var(--muted);line-height:1.5}
.st-card__meta{display:block;margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.72rem;color:var(--faint)}

/* Column strip - four labelled statements on one hairline-separated row. */
.st-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.st-strip>div{padding:1.05rem 1.4rem 1.05rem 0;border-right:1px solid var(--line)}
.st-strip>div:last-child{border-right:0}
.st-strip>div+div{padding-left:1.5rem}
.st-strip dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:.45rem}
.st-strip dd{font-size:.9rem;color:var(--text);line-height:1.5;margin:0}

/* -- Panels ---------------------------------------------------------------- */
.st-panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden}
.st-panel--lit{border-color:rgba(0,229,160,0.3);background:rgba(0,229,160,0.04)}
.st-panel__head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.7rem 1.15rem;border-bottom:1px solid var(--line-soft)}
.st-panel__cap{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.st-panel__cap--lit{color:var(--brand)}
.st-panel__meta{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--faint)}
.st-panel__body{padding:1.15rem}
.st-panel__body>*+*{margin-top:.9rem}
.st-panel__foot{padding:.8rem 1.15rem;border-top:1px solid var(--line-soft);
  font-size:.85rem;color:var(--muted);line-height:1.5}

/* Definition rows - the frozen "01 The operation / what it is" table. */
.st-rows{display:flex;flex-direction:column}
.st-rows>div{display:grid;grid-template-columns:2.4rem minmax(0,14rem) minmax(0,1fr) auto;
  align-items:baseline;gap:.4rem 1.15rem;padding:.55rem 1.15rem;
  border-top:1px solid var(--line-soft)}
.st-rows>div:first-child{border-top:0}
.st-rows__n{font-family:var(--mono);font-size:.7rem;color:var(--brand)}
.st-rows__k{font-size:.95rem;font-weight:700;letter-spacing:-0.01em;margin:0}
.st-rows__v{font-size:.875rem;color:var(--muted);line-height:1.45;margin:0}
.st-rows__meta{font-family:var(--mono);font-size:.7rem;color:var(--faint);text-align:right;margin:0}
.st-rows--kv>div{grid-template-columns:minmax(0,11rem) minmax(0,1fr)}
.st-rows--wide>div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) auto}

/* NOTE callout: a labelled pill beside a paragraph. Two children, laid out in a row.
   WAS `.st-note`, RENAMED AT GATE 5. `content.css` had defined `.st-note` since the docs
   pass as a prose box -- a plain tinted paragraph with inline `<code>` and `<strong>` in
   it -- and Gate 4C added this flex component under the same name. On the thirty-six pages
   that load both, the prose note inherited `display:flex` (content.css overrides the box
   but never the display mode) and every inline run inside it became a flex item: the
   paragraph rendered as a row of narrow columns. Confirmed in a browser on install.html
   before the rename.
   This composition takes the new name because it is the newcomer and has three consumers;
   the prose note keeps `.st-note` and moves below, into the sheet all eighty-eight pages
   load, so a page cannot use it and miss its definition. */
.st-callout{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 1.2rem;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.st-callout__tag{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--faint);border:1px solid var(--line);border-radius:var(--r-full);
  padding:.2rem .55rem;margin-top:.1rem}
.st-callout p{font-size:.875rem;color:var(--muted);line-height:1.55}

/* Prose note: one tinted box of running text. Moved here from `content.css` at Gate 5,
   unchanged, because `pricing.html` and `personal.html` use it without loading that
   sheet. Declarations byte-for-byte the ones `content.css` carried. */
.st-note{background:var(--brand-bg);border:1px solid rgba(0,229,160,0.25);border-radius:var(--r);padding:1rem 1.25rem;color:var(--muted);font-size:.9rem;margin:1.5rem 0}
.st-note strong{color:var(--text)}

/* -- Chips ----------------------------------------------------------------- */
/* AVAILABLE / PLANNED / PENDING, and nothing else. PLANNED renders in the neutral ink
   because its exact hue is UNRESOLVED - `vailidator.ui.maturity.PLANNED_INK_UNRESOLVED`
   records why: a 0.5x capture cannot yield a value, and guessing one makes it permanent. */
.st-chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:var(--r-full);border:1px solid currentColor;
  white-space:nowrap;line-height:1.4}
.st-chip[data-maturity="available"]{color:var(--brand)}
.st-chip[data-maturity="planned"]{color:var(--muted)}
.st-chip[data-maturity="pending"]{color:var(--amber)}
.st-chip--match{color:var(--brand)}
.st-chip--flat{color:var(--faint)}

/* -- Artwork --------------------------------------------------------------- */
/* Every editorial illustration carries a visible caption. The editorial firewall in
   CLAUDE.md 8.5 is the reason: these are marketing illustrations, never screenshots and
   never evidence, and the caption is what stops a reader reading one as a product. */
.st-figure{position:relative;margin:0}
/* The frozen artboards letterbox the editorial illustrations: full content width at
   roughly 2.4:1. The crop is CSS, per the asset handoff, and `aspect-ratio` also
   reserves the box before the file decodes so the chapter beneath never jumps. */
.st-figure img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  aspect-ratio:2.45/1;object-fit:cover;object-position:center 46%;background:var(--surface)}
.st-figure--mid{max-width:58rem;margin:0 auto}
.st-figure--tall{max-width:33rem;margin:0 auto}
.st-figure--tall img{aspect-ratio:5/6;object-position:center}
/* Mobile keeps the portrait-or-square variants the Owner supplied, so the crop relaxes
   rather than slicing a 700x894 illustration down to a 2.4:1 band. */
@media (max-width:640px){
  .st-figure img{aspect-ratio:auto;object-fit:contain}
  .st-figure--tall img{aspect-ratio:auto}
}
.st-figure figcaption{position:absolute;right:.9rem;bottom:.7rem;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,237,245,.42)}
.st-figure--narrow{max-width:36rem;margin:0 auto}
.st-figure picture{display:block}

/* -- Proof surface --------------------------------------------------------- */
.st-proof{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  font-family:var(--mono)}
.st-proof__head{display:flex;align-items:baseline;gap:1rem;padding:.9rem 1.25rem;
  border-bottom:1px solid var(--line-soft)}
.st-proof__cap{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.st-proof__size{margin-left:auto;font-size:.66rem;color:var(--faint)}
.st-proof__file{padding:.85rem 1.25rem 0;font-size:.82rem;color:var(--text)}
.st-proof__rows{padding:.6rem 1.25rem 1rem;margin:0}
.st-proof__rows>div{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.3rem 0}
.st-proof__rows dt{flex:0 0 8.5rem;font-size:.72rem;color:var(--muted)}
.st-proof__rows dd{margin:0;font-size:.76rem;color:var(--text);word-break:break-all}
.st-proof__rows dd.is-computed{color:var(--brand)}
.st-proof__note{padding:.9rem 1.25rem;border-top:1px solid var(--line-soft);
  font-family:var(--sans);font-size:.84rem;color:var(--muted);line-height:1.55}

/* -- Terminal / code surface ----------------------------------------------- */
.st-term{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  overflow:hidden}
.st-term__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;
  border-bottom:1px solid var(--line-soft)}
.st-term__bar i{width:.5rem;height:.5rem;border-radius:var(--r-full);background:var(--line-strong)}
.st-term__bar i:last-of-type{background:var(--brand)}
.st-term__title{margin:0 auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--faint)}
.st-term pre{padding:1.15rem 1.25rem;margin:0;overflow-x:auto;font-family:var(--mono);
  font-size:.8rem;line-height:1.75;color:var(--muted)}
/* The frozen session frame states the verdict beside the diff rather than under it: the
   same step, and what was deliberately NOT inferred from it. */
.st-term__split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.st-term__side{padding:1.15rem 1.25rem;border-left:1px solid var(--line-soft)}
.st-term__side p{font-size:.85rem;color:var(--muted);line-height:1.5;margin-bottom:.9rem}
.st-term__side .st-rows>div{padding-left:0;padding-right:0}
@media (max-width:860px){
  .st-term__split{grid-template-columns:1fr}
  .st-term__side{border-left:0;border-top:1px solid var(--line-soft)}
}
.st-term pre b{color:var(--text);font-weight:400}
.st-term pre em{color:var(--brand);font-style:normal}
.st-cmd{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);font-family:var(--mono);font-size:.78rem;
  color:var(--text);overflow-x:auto}
.st-cmd::before{content:"$";color:var(--brand);flex:none}

/* -- Product identity rows ------------------------------------------------- */
/* The mark is the identity. `--id-*` is a tint applied to a label, and it decides
   nothing: no route, no capability, no maturity, no availability. */
.st-idlist{display:flex;flex-direction:column;gap:.15rem}
.st-idrow{display:flex;align-items:center;gap:.65rem;padding:.28rem 0;font-size:.91rem}
.st-idrow img{width:26px;height:auto;flex:none}
.st-idrow a,.st-idrow>span{color:var(--text)}
.st-idrow a:hover{color:var(--brand)}
.st-idtag{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4rem;color:var(--muted)}
.st-idtag::before{content:'';width:.42rem;height:.42rem;border-radius:var(--r-full);
  background:var(--id,var(--brand))}
.st-idlegend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;margin:0}
.st-idlegend>span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}
.st-idlegend>span::before{content:'';width:.42rem;height:.42rem;border-radius:var(--r-full);
  background:var(--id,var(--brand))}
/* The Me lockup: the one badge the frozen design draws in live type, not an asset. */
.st-me{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;
  width:2.1rem;height:2.1rem;flex:none;border-radius:8px;background:var(--brand-bg);
  box-shadow:inset 0 0 0 1px rgba(0,229,160,.34);color:var(--brand);
  font-weight:800;font-size:.8rem;letter-spacing:-0.02em;line-height:1}
.st-me small{display:block;font-family:var(--mono);font-size:.3rem;letter-spacing:.1em;
  opacity:.75;margin-top:.1rem}
/* The trail rows carry the same geometry as a definition row and add a found state. */
.st-trailrow[data-found="yes"] .st-rows__meta{color:var(--brand)}
.st-trailrow[data-found="no"] .st-rows__meta{color:var(--amber)}

/* -- The four-column platform index ---------------------------------------- */
.st-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem 2.5rem}
.st-index h3{font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brand);font-weight:700;padding-bottom:.6rem;border-bottom:1px solid var(--line-soft);
  margin-bottom:.35rem}

/* Coverage as a ratio bar. Twenty cells, fourteen answering - a count of what could be
   reached, not a score out of anything. There is no threshold colour and no percentage,
   because a percentage is one of the three things the platform refuses to compute. */
.st-ratio{display:flex;gap:3px;margin-top:.7rem}
.st-ratio i{flex:1 1 0;height:16px;border-radius:2px;background:var(--overlay)}
.st-ratio i[data-on]{background:var(--brand)}

/* -- Statistics ------------------------------------------------------------ */
.st-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;
  border-top:1px solid var(--line);padding-top:1.35rem;margin:0}
.st-stats>div+div{border-left:1px solid var(--line);padding-left:1.5rem}
.st-stats dt{font-family:var(--mono);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;
  color:var(--text);line-height:1;margin-bottom:.6rem}
.st-stats dd{margin:0;font-size:.86rem;color:var(--muted)}

/* -- Ordered walkthrough --------------------------------------------------- */
/* Desktop shows the condensed strip; the ordered list is the semantic content and is
   what a screen reader and a phone both get. Neither duplicates the other in the
   accessibility tree: the strip is decorative and hidden from it. */
.st-flow{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  text-align:center}
.st-flow>li{flex:1 1 8rem}
.st-flow b{display:block;font-size:clamp(1.4rem,3vw,2.05rem);font-weight:800;letter-spacing:-0.03em}
.st-flow>li:last-child b{color:var(--brand)}
.st-flow span{display:block;margin-top:.5rem;font-size:.82rem;color:var(--muted);line-height:1.45}
.st-flow__arrow{flex:0 0 auto;color:var(--faint)}
.st-track{display:flex;flex-direction:column;gap:0;counter-reset:st-track;text-align:left}
.st-track>li{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,1fr);
  gap:1rem;padding:0 0 1.05rem}
/* The marker spans both rows of the item. Without `grid-row`, auto-placement puts the
   marker in row 1 column 1, the heading in row 1 column 2, and then wraps the paragraph
   into row 2 COLUMN 1 - a 40 px track - where a two-line description became two hundred
   pixels tall. The explicit placement is the fix, and `>*{grid-column:2}` is what stops
   it recurring the next time an item grows a third child. */
.st-track>li::before{counter-increment:st-track;content:counter(st-track,decimal-leading-zero);
  grid-column:1;grid-row:1/span 2;align-self:start;
  display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;
  border-radius:var(--r-full);border:1px solid var(--line-strong);font-family:var(--mono);
  font-size:.68rem;color:var(--muted);background:var(--bg)}
.st-track>li>*{grid-column:2}
.st-track>li:first-child::before{border-color:var(--brand);color:var(--brand)}
.st-track>li:not(:last-child)::after{content:'';position:absolute;left:1.05rem;top:2.1rem;
  bottom:.2rem;width:1px;background:var(--line)}
.st-track strong{display:block;font-size:1rem;letter-spacing:-0.01em;margin-bottom:.25rem}
.st-track p{font-size:.86rem;color:var(--muted);line-height:1.45}

/* -- Comparison ------------------------------------------------------------ */
.st-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.st-vs__col{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:1.2rem 1.3rem}
.st-vs__col--dim .st-vs__item{color:var(--faint)}
.st-vs__col--lit{border-color:rgba(0,229,160,.3);background:rgba(0,229,160,.04)}
.st-vs__item{padding:.5rem 0;border-top:1px solid var(--line-soft);font-size:.89rem;
  line-height:1.45;color:var(--text)}
.st-vs__item:first-of-type{border-top:0}

/* -- Action hierarchy ------------------------------------------------------ */
/* One primary per chapter. Everything else is a ghost button or a text action, which is
   what keeps the primary meaning "this is the next step" rather than "this is a link". */
.st-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.2rem}
.st-actions--end{justify-content:flex-end}
.st-actions--split{justify-content:space-between}
.st-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;
  color:var(--text)}
.st-link::after{content:"\2192";color:var(--brand);transition:transform var(--t)}
.st-link:hover{color:var(--brand)}
.st-link:hover::after{transform:translateX(3px)}
.st-quiet{font-size:.85rem;color:var(--muted)}
.st-mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;color:var(--faint)}

/* -- Responsive ------------------------------------------------------------ */
/* The frozen mobile compositions are not the desktop scaled down: columns become a
   single column in reading order, the crop hero puts its artwork above the claim, and
   the chapter head stacks its number, label and question rather than truncating them. */
@media (max-width:1024px){
  .st-grid--4,.st-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-strip{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0}
  .st-strip>div:nth-child(2n){border-right:0}
  .st-strip>div{border-bottom:1px solid var(--line)}
  .st-rows>div,.st-rows--wide>div{grid-template-columns:2.4rem minmax(0,1fr)}
  .st-rows__v,.st-rows__meta{grid-column:2}
  .st-rows__meta{text-align:left}
}
@media (max-width:860px){
  .st-rhero__grid,.st-ch__split,.st-vs,.st-grid--2,.st-grid--3{grid-template-columns:1fr}
  .st-rhero__art{order:-1;max-width:34rem;margin:0 auto 1.75rem}
  /* The frozen mobile hero puts the capsule above the claim and drops the proof
     surface out of the hero entirely - chapter 01 carries it there instead. */
  .st-rhero__pill{width:100%;margin-left:0}
  .st-rhero__art .st-proof{display:none}
  .st-rhero--crop .st-rhero__art{position:static;width:auto;margin:0 0 1.25rem}
  .st-rhero--crop .st-rhero__art img{transform:none;-webkit-mask-image:none;mask-image:none}
  .st-ch__aside--right{margin-left:0;text-align:left}
  .st-ch__title{max-width:none}
  .st-stats{grid-template-columns:1fr;gap:1.25rem}
  .st-stats>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.25rem}
  .st-flow{display:none}
  .st-chindex{max-width:none}
}
@media (max-width:600px){
  .st-grid--4,.st-grid--5,.st-index,.st-strip{grid-template-columns:1fr}
  .st-strip>div{border-right:0;padding-left:0}
  .st-strip>div+div{padding-left:0}
  .st-ch__head{gap:.55rem}
  .st-ch__n{font-size:1.2rem}
  .st-ch__q{flex-basis:100%;padding-left:0;border-left:0}
  .st-rows>div,.st-rows--kv>div,.st-rows--wide>div{grid-template-columns:1fr;gap:.35rem}
  .st-rows__v,.st-rows__meta{grid-column:1}
  .st-proof__rows>div{gap:.15rem}
  .st-proof__rows dt{flex-basis:100%}
  .st-idrow{font-size:.9rem}
}
/* Touch targets. A 26px mark is decoration; the thing a finger lands on is the row. */
@media (pointer:coarse){
  .st-idrow a,.st-index a,.st-chindex a{min-height:44px;display:inline-flex;align-items:center}
}

/* =============================================================================
   GATE 6A - the audience-page grammar.

   Enterprise, Developers and Government are three audiences reading one architecture.
   Everything below extends the Gate 4 vocabulary rather than restating it: the chapter
   shell, the cards, the panels, the definition rows, the chips, the proof surface and
   the action hierarchy are all reused unchanged, and only the compositions the frozen
   audience artboards genuinely require are added here.

   The one rule that shaped every addition: a component earns a class when the frozen
   capture shows a composition the existing vocabulary cannot express, and not when the
   same composition would like a different name on a different page.
   ============================================================================= */

/* -- Deployment posture ---------------------------------------------------- */
/* The audit appendix observed that posture and maturity "occupy the same visual slot".
   They share a shape and they must not share a reading, so the posture indicator keeps
   the chip's geometry and takes a squared corner and a dashed edge: a stated property
   of the deployment, not a claim about whether something exists yet.
   `vailidator.ui.posture` owns the vocabulary and raises on a third value. */
/* The ink is `--muted` (6.39:1 on the surface) and not `--faint` (3.16:1). The word is
   the sole carrier of a posture's meaning, and a state word set below AA is a state a
   reader has to guess at. The frozen artboard renders NOT OFFERED a step fainter than
   BY CONSTRUCTION; legibility of the word wins over a half-step of tone, and the two
   are already separated by their shape and their text. */
.st-chip[data-posture]{border-radius:var(--r-sm);border-style:dashed;color:var(--muted);
  letter-spacing:.12em}

/* -- The executive brief --------------------------------------------------- */
/* 04 Enterprise opens on a one-minute read before chapter 01. It is a SECTION with a
   heading of its own - the label on the left is the section, and the three statements
   on the right are its content. Gate 5 recorded this page as an outline defect for
   exactly that reason: the opening block had content and no name. */
.st-brief{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.75rem);align-items:start}
/* The frozen 04 Enterprise architecture chapter gives the perimeter roughly two
   thirds and the facts column a third. The chapter-head split is 1.15/0.85, which is
   the ratio for a title and its aside, not for a diagram and its annotations. */
/* The chapter head aligns its aside to the title baseline (`align-items:end`). A body
   split is two columns of content and has to start together, or a short left column
   floats to the bottom of a tall right one. */
.st-ch__split--top{align-items:start}
/* The closing band centres its one action row with its claim. A modifier rather than a
   rule on `.st-ch--center`, because the frozen Landing has centred chapters whose
   action rows are left-aligned and this gate does not get to move them. */
.st-ch--band .st-actions{justify-content:center}
.st-ch__split--wide{grid-template-columns:minmax(0,1.95fr) minmax(0,1fr)}
.st-brief__title{font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brand);font-weight:700}
.st-brief__note{margin-top:.9rem;font-size:.86rem;color:var(--faint);line-height:1.55;
  max-width:30ch}

/* Definition rows whose key is a monospace label rather than a title. */
.st-rows--mono>div{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
  padding-left:0;padding-right:0;padding-top:1rem;padding-bottom:1rem}
.st-rows--mono .st-rows__k{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);font-weight:400;line-height:1.6}
.st-rows--mono .st-rows__v{font-size:.96rem;color:var(--text);line-height:1.6}
/* The same row, with a monospace brand key: "1 cmd", "0 acct", "0 deps". */
.st-rows--code>div{grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);
  padding-left:0;padding-right:0;padding-top:.85rem;padding-bottom:.85rem}
.st-rows--code .st-rows__k{font-family:var(--mono);font-size:.86rem;color:var(--brand);
  font-weight:400}

/* -- Hairline column set --------------------------------------------------- */
/* The frozen evidence lifecycle and the frozen architectural facts are columns divided
   by rules, not cards: nothing is elevated, because no step in a lifecycle is the
   important one. */
.st-cols{display:grid;gap:0}
.st-cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.st-cols--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.st-cols>div{padding:0 1.35rem 0 0}
.st-cols>div+div{padding-left:1.35rem;border-left:1px solid var(--line-soft)}
.st-cols__n{display:block;font-family:var(--mono);font-size:.66rem;color:var(--faint);
  padding-bottom:.55rem;margin-bottom:.85rem;border-bottom:1px solid var(--line)}
.st-cols__t{font-size:1rem;font-weight:700;letter-spacing:-0.015em;margin-bottom:.4rem}
.st-cols p{font-size:.85rem;color:var(--muted);line-height:1.5}
.st-cols__meta{display:block;margin-top:.85rem;font-family:var(--mono);font-size:.66rem;
  color:var(--faint)}
.st-cols__meta b{font-weight:400;color:var(--id,var(--brand))}

/* Stacked facts: a hairline list of "term / one sentence" with no box around it. */
.st-facts{display:flex;flex-direction:column}
.st-facts>div{padding:.85rem 0;border-top:1px solid var(--line-soft)}
.st-facts>div:first-child{border-top:0;padding-top:0}
.st-facts dt{font-size:.94rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:.25rem}
.st-facts dd{margin:0;font-size:.84rem;color:var(--muted);line-height:1.5}

/* -- The perimeter --------------------------------------------------------- */
/* 04 Enterprise draws the deployment boundary as a boundary: everything the
   organisation runs sits inside one tinted rule, and the only thing outside it is us. */
.st-perim{position:relative;border:1px solid rgba(0,229,160,0.28);border-radius:var(--r-lg);
  padding:1.9rem 1.25rem 1.25rem}
.st-perim__label{position:absolute;top:.75rem;left:1.25rem;font-family:var(--mono);
  font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
  font-weight:700}
.st-perim__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.st-perim__box{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:.95rem 1rem}
.st-perim__box--core{border-color:rgba(0,229,160,0.3);background:rgba(0,229,160,0.045)}
.st-perim__cap{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.5rem}
.st-perim__box--core .st-perim__cap{color:var(--brand)}
.st-perim__box strong{display:block;font-size:.95rem;font-weight:700;letter-spacing:-0.01em;
  margin-bottom:.3rem}
.st-perim__box span{font-size:.8rem;color:var(--muted);line-height:1.45}
.st-perim__gap{display:flex;align-items:center;gap:1rem;margin:1rem 0 .75rem;
  font-size:.85rem;color:var(--muted)}
.st-perim__gap::before{content:'';flex:0 0 6.5rem;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}
.st-outside{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  border:1px dashed var(--line-strong);border-radius:var(--r);padding:.85rem 1.1rem;
  font-size:.86rem;color:var(--muted);line-height:1.5}
.st-outside__tag{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}

/* -- Adoption timeline ----------------------------------------------------- */
/* Six steps on one rule. The rule is the point: nothing is rebuilt between two dots. */
.st-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.st-timeline>li{position:relative;padding:2.5rem 1.1rem 0 0}
.st-timeline>li::before{content:'';position:absolute;top:1.35rem;left:0;width:.6rem;
  height:.6rem;border-radius:var(--r-full);background:var(--brand)}
.st-timeline>li:last-child::before{background:var(--line-strong)}
.st-timeline>li::after{content:'';position:absolute;top:1.62rem;left:.6rem;right:0;
  height:1px;background:var(--line)}
.st-timeline>li:last-child::after{display:none}
.st-timeline__n{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);position:absolute;top:0;left:0}
.st-timeline strong{display:block;font-size:.98rem;font-weight:700;letter-spacing:-0.015em;
  margin-bottom:.35rem}
.st-timeline p{font-size:.82rem;color:var(--muted);line-height:1.45}
.st-timeline__add{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.66rem;
  color:var(--brand)}

/* -- Tally lists ----------------------------------------------------------- */
/* Two hairline lists that answer opposite questions. The glyph carries the direction
   and is aria-hidden, so the list heading above it is what a screen reader reads. */
.st-tally{display:flex;flex-direction:column}
/* The marker is absolute over padding, NOT a grid column. As a grid, every text run
   after a `<strong>` inside an item became its own anonymous grid item, was
   auto-placed into the 1.1rem marker track, and rendered one word per line. */
.st-tally>li{position:relative;padding:.7rem 0 .7rem 1.85rem;
  border-top:1px solid var(--line-soft);font-size:.89rem;color:var(--text);
  line-height:1.5}
.st-tally>li::before{content:"\2014";position:absolute;left:0;top:.7rem;
  color:var(--faint)}
.st-tally strong{display:block;margin-bottom:.15rem}
.st-tally--yes>li::before{content:"\2192";position:absolute;left:0;top:.7rem;color:var(--brand)}
.st-tally--yes>li{font-weight:600}
.st-tally__cap{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding-bottom:.6rem;
  border-bottom:1px solid var(--line)}
.st-tally__cap--lit{color:var(--brand)}

/* -- The relay: where you work, one server, what comes back ---------------- */
.st-relay{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:1rem}
.st-relay__box{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:1.05rem 1.15rem;min-height:7.5rem}
.st-relay__box--lit{border-color:rgba(0,229,160,0.3);background:rgba(0,229,160,0.045);
  font-family:var(--mono)}
.st-relay__cap{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.75rem}
.st-relay__box--lit .st-relay__cap{color:var(--brand)}
.st-relay__box li{font-size:.92rem;color:var(--text);padding:.14rem 0}
.st-relay__box li.is-quiet{color:var(--faint)}
.st-relay__arrow{color:var(--brand);font-size:1.1rem;line-height:1}

/* -- The capability matrix ------------------------------------------------- */
.st-matrix{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.25fr)}
.st-matrix__h{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding:0 1.15rem .7rem 0}
.st-matrix>div{padding:.95rem 1.15rem .95rem 0;border-top:1px solid var(--line-soft)}
.st-matrix>.st-matrix__h{border-top:0}
/* The per-cell label. Clipped rather than `display:none` on desktop, because it is the
   accessible name of a cell whose visual name is the column header above it, and the
   header is gone at 860px. Same technique as `.st-sr`, kept local so a reader on a
   phone gets the label as visible text rather than as nothing. */
.st-matrix__k{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.st-matrix b{font-size:.92rem;font-weight:700;letter-spacing:-0.01em}
.st-matrix span{font-size:.84rem;color:var(--muted);line-height:1.5}

/* -- Capture depth --------------------------------------------------------- */
/* Four levels, each opt-in. The bar is a DEPTH, not a score: level 4 is not the goal
   and nothing computes a value from it. */
.st-ratio--sm{max-width:9rem;gap:2px}
.st-ratio--sm i{height:7px}

/* -- The state legend ------------------------------------------------------ */
/* The eight-state vocabulary, shown as the product's own words. The glyph is
   aria-hidden and the word carries the meaning, because colour is never the sole
   carrier of a state. */
.st-states{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem}
.st-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;
  padding:.28rem .7rem;border-radius:var(--r-full);border:1px solid currentColor;
  color:var(--muted);white-space:nowrap}
.st-state i{font-style:normal;font-size:.72rem;line-height:1}
.st-state[data-state="ok"]{color:var(--brand)}
.st-state[data-state="partial"]{color:var(--brand-dim)}
.st-state[data-state="empty"]{color:var(--muted)}
.st-state[data-state="unknown"]{color:var(--violet)}
.st-state[data-state="blocked"]{color:var(--violet)}

/* -- Doors ----------------------------------------------------------------- */
/* A card whose top row carries a label on the left and a chip on the right. */
.st-card__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.6rem}
.st-card__top .st-card__eyebrow{margin-bottom:0}
.st-card__num{display:block;font-family:var(--mono);font-size:1.75rem;font-weight:700;
  color:var(--brand);letter-spacing:-0.03em;line-height:1;margin-bottom:.6rem}

/* The band under the doors: one mark, one runtime. */
.st-behind{display:flex;align-items:center;gap:clamp(1rem,3vw,2.25rem);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:1.1rem 1.35rem}
.st-behind__mark{width:2.2rem;height:2.2rem;flex:none;display:grid;place-items:center;
  border-radius:8px;background:var(--brand-bg);box-shadow:inset 0 0 0 1px rgba(0,229,160,.34);
  color:var(--brand);font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:-0.05em}
.st-behind__cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.3rem}
.st-behind strong{font-size:.98rem;font-weight:700;letter-spacing:-0.015em}
.st-behind__list{display:flex;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;margin-left:auto}
.st-behind__list span{font-size:.92rem;font-weight:600;color:var(--text)}

/* -- The amber panel ------------------------------------------------------- */
/* What an assessment does NOT establish. Amber rather than red: nothing here is a
   failure, and nothing here is a warning about the reader's system. It is the list of
   readings the page refuses to let a mode name imply. */
.st-panel--warn{border-color:rgba(245,166,35,0.34);background:rgba(245,166,35,0.045)}
.st-panel__cap--warn{color:var(--amber)}
.st-panel--warn .st-rows>div{border-top-color:rgba(245,166,35,0.16)}

/* -- The closing claim ----------------------------------------------------- */
/* Four lines, the last one in the brand. The frozen Developers page ends on it. */
.st-claim{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:800;letter-spacing:-0.03em;
  line-height:1.22;max-width:16ch}
.st-claim em{font-style:normal;color:var(--brand);display:block}
/* `16ch` is a measure, not a width cap: a single long word still overflows it. The
   claim is set in the display face, so at 390px `Without more setup.` reached 420px
   and gave the page a horizontal scroll. Clamped against the viewport instead. */
.st-claim{max-width:min(16ch,100%);overflow-wrap:break-word}

/* -- Responsive ------------------------------------------------------------ */
/* The frozen mobile artboards keep the four-cell strip two-up rather than stacking it
   into four full-width rows, keep the brief as one column with its label above, and
   put every column set into a single reading column. */
@media (max-width:1024px){
  .st-cols--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-cols>div,.st-cols>div+div{border-left:0;padding-left:0;padding-bottom:1.35rem}
  .st-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-perim__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-relay{grid-template-columns:1fr;gap:.75rem}
  .st-relay__arrow{transform:rotate(90deg);justify-self:center}
  .st-relay__box{min-height:0}
}
@media (max-width:860px){
  .st-brief{grid-template-columns:1fr;gap:1.25rem}
  /* The mono label column is 10.5rem, which leaves ~230px of measure at 390px and sets
     the brief three words to a line. The frozen mobile artboard puts the label above
     its statement. This override has to live here rather than rely on the base
     `.st-rows` responsive rule, because the Gate 6A block is declared after it. */
  .st-rows--mono>div,.st-rows--code>div{grid-template-columns:1fr;gap:.35rem}
  .st-brief__note{max-width:none}
  .st-matrix{grid-template-columns:1fr;gap:0}
  .st-matrix>div{padding-right:0}
  /* The header row goes; the per-cell labels take its place, in the same ink. */
  .st-matrix__h{display:none}
  .st-matrix__k{position:static;width:auto;height:auto;margin:0 0 .3rem;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;display:block;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint)}
  .st-matrix>div:nth-child(3n+2){padding-top:.35rem;border-top:0}
  .st-matrix>div:nth-child(3n+3){padding-top:.35rem;border-top:0}
  .st-cols--2,.st-cols--3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .st-cols--4,.st-cols--5{grid-template-columns:1fr}
  .st-timeline{grid-template-columns:1fr;gap:.35rem}
  .st-timeline>li{padding-right:0;padding-top:2.2rem}
  .st-timeline>li::after{display:none}
  .st-perim__row{grid-template-columns:1fr}
  .st-behind__list{margin-left:0}
}

/* The frozen 04 Enterprise mobile artboard keeps its four-cell strip two-up at 390px
   rather than stacking it into four full-width rows. A modifier rather than a change to
   `.st-strip`, because the three reference pages are frozen production references and
   this gate does not get to restack their mobile composition. */
@media (max-width:600px){
  .st-strip--2up{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-strip--2up>div{padding-left:0;border-right:1px solid var(--line)}
  .st-strip--2up>div:nth-child(2n){border-right:0;padding-left:1.1rem}
  .st-strip--2up>div+div{padding-left:0}
  .st-strip--2up>div:nth-child(2n){padding-left:1.1rem}
}

/* A 1fr grid track has an automatic minimum of min-content, so a terminal frame or a
   code surface inside a stacked editorial split pushes the track wider than the
   viewport and the whole page gains a horizontal scroll. minmax(0,1fr) is the same
   track with a zero minimum, which lets the surface inside it scroll on its own
   instead. Shared, because the split is shared: any page that puts a code surface in
   one hits this, and the three reference pages re-render byte-identical without it
   because none of them currently does. */
@media (max-width:860px){
  .st-ch__split--top,.st-ch__split--wide{grid-template-columns:minmax(0,1fr)}
}

/* ==== Gate 6B - the product family ======================================== */
/* Seven pages, one grammar. Everything below is shared by all seven and used by none of
   the pages before them, which is why it is a block rather than edits to the components
   above: the reference and audience pages must re-render byte-identical.

   `--id` is the product's own accent, set per page from `vailidator.ui.identity`.
   `--id-wash` is the same hue at the alpha the frozen artboards carry. Both are passed
   INLINE rather than added to `:root`, because `scripts/site_tokens.py --check` asserts
   the site declares exactly the seven `--id-*` the leaf declares and no more - a
   stylesheet is not allowed to grow the identity family behind the leaf's back. */

/* -- The product hero ------------------------------------------------------ */
.st-rhero--product::before{background:
  radial-gradient(62% 56% at 76% 4%,var(--id-wash,rgba(0,229,160,.14)),transparent 66%),
  var(--bg)}
.st-rhero--product .st-rhero__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.st-rhero--product .st-h1{font-size:clamp(2.6rem,5.8vw,4.15rem);letter-spacing:-0.042em}
.st-rhero--product .st-lead{max-width:46ch;font-size:clamp(1rem,1.6vw,1.13rem)}
/* The halo and the soft edge are CSS. The handoff README is explicit that the mask, halo
   and fade the frozen heroes appear to carry are not baked into the files. */
.st-rhero--product .st-rhero__art img{
  filter:drop-shadow(0 26px 78px var(--id-wash,rgba(0,229,160,.2)));
  -webkit-mask-image:radial-gradient(76% 76% at 52% 50%,#000 54%,transparent 88%);
  mask-image:radial-gradient(76% 76% at 52% 50%,#000 54%,transparent 88%)}
.st-psub{color:var(--faint);font-size:.92rem;line-height:1.6;max-width:44ch;margin-top:1.05rem}

/* The identity eyebrow. The square is decoration and carries `aria-hidden`; the accent
   label beside it is the meaning, so nothing here is distinguished by colour alone. */
.st-peyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  color:var(--id,var(--brand));margin-bottom:1.1rem;flex-wrap:wrap}
.st-peyebrow i{width:.44rem;height:.44rem;flex:none;background:var(--id,var(--brand))}
.st-peyebrow em{font-style:normal;color:var(--faint);font-weight:400;letter-spacing:.17em;
  display:inline-flex;align-items:center;gap:.7rem}
.st-peyebrow em::before{content:'';width:1px;height:.82rem;background:var(--line)}

/* -- 01  The opposed comparison -------------------------------------------- */
.st-opposed{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.15rem,2.6vw,2rem)}
.st-opposed__caps,.st-opposed__row{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(.9rem,3vw,2.5rem)}
.st-opposed__caps{padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.st-opposed__cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--faint)}
.st-opposed__cap--lit{color:var(--id,var(--brand))}
.st-opposed dl{margin:0}
/* Every cell carries its own column label, clipped while the header row is visible and
   shown once the row stacks. Clipped rather than `display:none`, so a screen reader is
   told which side of the comparison it is reading at every width. */
.st-opposed__k{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.st-opposed__row{padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.st-opposed__row:last-child{border-bottom:0;padding-bottom:.2rem}
.st-opposed dt{color:var(--faint);font-size:1.02rem;font-weight:600;letter-spacing:-0.012em}
.st-opposed dd{margin:0;color:var(--text);font-size:1.02rem;font-weight:700;
  letter-spacing:-0.018em;position:relative;padding-left:1.1rem}
.st-opposed dd::before{content:'';position:absolute;left:0;top:.6em;width:.32rem;
  height:.32rem;border-radius:var(--r-full);background:var(--id,var(--brand))}

/* -- 02  The record, as it was recorded ----------------------------------- */
.st-record{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.st-record__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:1.05rem clamp(1.1rem,2.4vw,1.6rem) .55rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--faint)}
/* Wide content scrolls inside its own box. A monospace ledger at 390px is wider than the
   viewport, and a page that scrolls sideways to show it has moved the problem, not
   solved it. */
.st-record__scroll{overflow-x:auto}
.st-record table{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:.75rem;white-space:nowrap}
.st-record th{text-align:left;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  font-size:.57rem;color:var(--faint);padding:.45rem clamp(1.1rem,2.4vw,1.6rem);
  border-bottom:1px solid var(--line)}
.st-record td{padding:.6rem clamp(1.1rem,2.4vw,1.6rem);color:var(--muted);
  border-bottom:1px solid var(--line-soft)}
.st-record tr:last-child td{border-bottom:0}
.st-record td:first-child{color:var(--faint)}
.st-record__ok{color:var(--brand)}
.st-record__no{color:var(--amber)}
.st-record__lead{margin:0;padding:.15rem clamp(1.1rem,2.4vw,1.6rem) .55rem;
  color:var(--muted);font-size:.86rem;line-height:1.55;display:flex;
  align-items:center;gap:.6rem;flex-wrap:wrap}
.st-record__kv{margin:0;padding:.3rem clamp(1.1rem,2.4vw,1.6rem) .9rem;
  font-family:var(--mono);font-size:.77rem}
.st-record__kv>div{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:.6rem;
  padding:.28rem 0}
.st-record__kv dt{color:var(--faint)}
.st-record__kv dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.st-record__foot{padding:.85rem clamp(1.1rem,2.4vw,1.6rem) 1.1rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;line-height:1.62}

/* -- 03  The axis: the one dimension a product could most easily overclaim -- */
.st-axis{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:.2rem clamp(1.1rem,2.4vw,1.6rem)}
.st-axis__row{display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(.85rem,2.4vw,2rem);padding:1.1rem 0;border-bottom:1px solid var(--line-soft)}
/* The numbered variant: a stage table. Two content columns rather than three, with
   the number in its own narrow track. */
.st-axis--n .st-axis__row{grid-template-columns:2.4rem minmax(0,1fr) minmax(0,1.35fr)}
.st-axis__row:last-child{border-bottom:0}
.st-axis__t{display:block;font-weight:700;font-size:1.01rem;letter-spacing:-0.015em}
.st-axis__s{display:block;color:var(--faint);font-size:.81rem;margin-top:.18rem}
.st-axis__m{color:var(--faint);font-size:.87rem;line-height:1.6}
.st-axis__w{color:var(--muted);font-size:.87rem;line-height:1.62}

/* -- 04  The two real routes ----------------------------------------------- */
.st-routes{margin:0;padding:.15rem clamp(1.1rem,2.4vw,1.6rem) .9rem}
.st-routes>div{display:grid;grid-template-columns:2.2rem minmax(0,1fr);
  padding:.9rem 0;border-bottom:1px solid var(--line-soft)}
.st-routes>div:last-child{border-bottom:0;padding-bottom:.2rem}
.st-routes__n{font-family:var(--mono);font-size:.68rem;color:var(--id,var(--brand))}
.st-routes dt{font-weight:700;font-size:.95rem}
.st-routes dd{margin:.25rem 0 0;grid-column:2;color:var(--faint);font-size:.87rem;
  line-height:1.6}

/* -- 05  What the product does not claim ----------------------------------- */
.st-refuse{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.15rem,2.6vw,2rem)}
.st-refuse__cap{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:.2rem}
.st-refuse__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(1.25rem,3vw,3rem)}
.st-refuse__grid>div{padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.st-refuse__grid>div:nth-last-child(-n+2){border-bottom:0;padding-bottom:.2rem}
.st-refuse__t{display:block;font-weight:700;font-size:.94rem;position:relative;
  padding-left:1.5rem}
.st-refuse__t::before{content:'';position:absolute;left:0;top:.62em;width:.8rem;height:1px;
  background:var(--line-strong)}
.st-refuse__b{margin:.28rem 0 0 1.5rem;color:var(--muted);font-size:.87rem;line-height:1.62}

/* -- The closing claim, shared by all seven -------------------------------- */
.st-pclose{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.25rem,4vw,3.5rem);padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line)}
.st-pclose h2{font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.12;
  letter-spacing:-0.032em;max-width:23ch}
.st-pclose p{color:var(--faint);font-size:.92rem;line-height:1.68}

@media (max-width:980px){
  .st-rhero--product .st-rhero__grid{grid-template-columns:minmax(0,1fr)}
  /* The frozen mobile artboards put the artwork under the copy rather than beside it,
     at a size that does not push the first chapter below two screens. */
  .st-rhero--product .st-rhero__art{max-width:30rem;margin:.5rem auto 0}
  .st-axis__row{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .st-axis--n .st-axis__row{grid-template-columns:2.4rem minmax(0,1fr)}
  .st-axis--n .st-axis__w{grid-column:2}
  .st-pclose{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .st-opposed__caps{display:none}
  .st-opposed__row{grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.85rem 0}
  /* Stacked, a header row three rows above the cell it labels is not a label. Each cell
     carries its own, clipped on desktop and shown here - which also keeps both in the
     accessibility tree at every width, rather than removing them at exactly the width
     where the visual column that replaced them is gone too. */
  .st-opposed__k{position:static;width:auto;height:auto;margin:0 0 .1rem;overflow:visible;
    clip:auto;clip-path:none;white-space:normal;display:block;font-family:var(--mono);
    font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
  .st-opposed dd .st-opposed__k{color:var(--id,var(--brand))}
  .st-opposed dd{padding-left:1.1rem}
  .st-refuse__grid{grid-template-columns:minmax(0,1fr)}
  .st-refuse__grid>div:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft);
    padding-bottom:1rem}
  .st-refuse__grid>div:last-child{border-bottom:0;padding-bottom:.2rem}
  .st-record__kv>div{grid-template-columns:minmax(0,1fr);gap:.15rem}
}