/* ===== Nomos — shared site styles (Nocturne brand) =====
   Light-first. Dark is available via a manual toggle. */

/* ===== Typeface =====
   Self-hosted so the brand renders identically everywhere and the site stays
   fully self-contained — no CDN, no external request, nothing to break behind
   the password gate. Variable fonts: one file covers the whole weight range.

   Fraunces      display   — a serif with actual character; the brand voice
   Public Sans   body      — the US government's open typeface, apt for a
                             compliance product and deliberately not Inter
   IBM Plex Mono data      — record numbers, dates, statuses

   font-display:swap keeps text readable while the face loads. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-display: swap;
  font-weight: 100 900; src: url('/fonts/fraunces-wght.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-display: swap;
  font-weight: 100 900; src: url('/fonts/fraunces-wght-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-display: swap;
  font-weight: 100 900; src: url('/fonts/public-sans-wght.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-display: swap;
  font-weight: 400; src: url('/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-display: swap;
  font-weight: 500; src: url('/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
  color-scheme: light;
  /* 60/30/10 — light is the default
     60% cream canvas, 30% warm paper surfaces, 10% brass. */
  --ground:#F4F0E6; --surface:#EBE4D6; --panel:#E2D7C4;
  --ink:#2A2D34; --ink-soft:#4A463A; --ink-faint:#6A6558;
  --line:#D4CBB8; --line-strong:#C3B79F;
  --accent:#94711F; --accent-ink:#F6F2EA; --accent-soft:rgba(148,113,31,.12);
  --mark-word:#1D3A57;
  --tile:radial-gradient(120% 140% at 30% 0%, #F7F1E4 0%, #E2D7C4 100%);
  --ok:#3F7D5C; --ok-soft:rgba(63,125,92,.13);
  --warn:#9A6B1E; --warn-soft:rgba(154,107,30,.13);
  --alert:#A8452F; --alert-soft:rgba(168,69,47,.12);
  /* Small-text variants. The palette above is tuned for fills, rules, icons
     and headings, where WCAG asks 3:1 and it passes. As 10-12px label text on
     cream it lands at 3.2-4.3:1, under the 4.5:1 that small text needs, on
     eleven elements across five pages. These are the same hues darkened by
     the minimum that clears 4.5:1 against the LIGHTEST surface each one
     actually sits on (including the translucent chip tints, which composite
     lighter than the raw token suggests). Large text keeps the palette above.
     Recompute with tools/contrast_solve.py if a surface colour changes. */
  --accent-text:#80621B;   /* was 3.58:1 on surface  -> 4.51:1 */
  --ok-text:#34674C;       /* was 3.34:1 on the chip -> 4.50:1 */
  --warn-text:#7B5518;     /* was 3.19:1 on the chip -> 4.54:1 */
  --alert-text:#9A3F2B;    /* was 3.98:1 on the chip -> 4.54:1 */
  --accent-fill:#8B6A1D;   /* button fill: label was 4.05:1 -> 4.50:1 */
  --header-bg:rgba(244,240,230,.94);
  /* The floating nav's full footprint: pill height plus the rail above and
     below it. Anything that has to sit clear of the header reads this, so the
     two cannot drift apart the way a hard-coded offset does. */
  --header-h: 100px;
  --shadow:0 1px 2px rgba(20,24,29,.06),0 16px 40px rgba(28,40,60,.14);
  --serif: 'Fraunces','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans: 'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono: 'Plex Mono',ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
}
/* Default = light. A manual toggle switches to dark via [data-theme="dark"]. */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* 60/30/10 — dark Nocturne */
  --ground: #11141B;
  --surface: #172A3F;
  --panel: #1D3A57;
  --ink: #F2ECDD;
  --ink-soft: rgba(242,236,221,.84);
  --ink-faint: rgba(242,236,221,.7);
  --line: #2A3C4E;
  --line-strong: rgba(242,236,221,.22);
  --accent: #D6AD62;
  --accent-ink: #16283A;
  --accent-soft: rgba(214,173,98,.13);
  --mark-word: #F2ECDD;
  --tile: radial-gradient(120% 140% at 30% 0%, #24405A 0%, #152536 100%);
  --ok: #6FB58E; --ok-soft: rgba(111,181,142,.15);
  --warn: #D9A257; --warn-soft: rgba(217,162,87,.15);
  --alert: #D2705A; --alert-soft: rgba(210,112,90,.15);
  --header-bg: rgba(17,20,27,.94);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);
  /* The dark palette already clears AA comfortably — accent on ground is
     8.79:1, the button label 7.16:1 — so the small-text variants are just the
     palette itself. Darkening them here would make dark mode worse, not
     better. */
  --accent-text: var(--accent);
  --ok-text: var(--ok);
  --warn-text: var(--warn);
  --alert-text: var(--alert);
  --accent-fill: var(--accent);
}
.nav-cta { display:flex; align-items:center; gap:10px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:9px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); cursor:pointer; transition:border-color .15s, color .15s; flex:none; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }
.theme-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.theme-toggle .ico-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display:none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }
  .btn-gold:hover, .btn-gold:focus-visible, .btn-gold:active { transform:none; }
  .rl-open:hover, .rl-open:focus-visible, .rl-open:active { transform:none; box-shadow:none; }
  .rl-open::before { transition:none; }
  .rl-open span { transition:none; }
}
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; }
/* Fraunces carries an optical-size axis: display cuts tighten spacing and
   sharpen contrast at large sizes, text cuts stay open at small ones. Headings
   opt into the display cut; everything else keeps the default. */
h1, h2, .pl-name, .dk-mast h1 { font-variation-settings:'opsz' 96; }
h3, h4 { font-variation-settings:'opsz' 36; }
body { font-variation-settings:'opsz' 14; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 18px; border-radius:0 0 8px 0; font-weight:700; font-size:13px; }
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
a { color: inherit; text-decoration: none; }
/* The measure. 1120px was set when the site was mostly prose; it now leaves a
   third of a large display empty on pages built from grids and tables. The cap
   only bites above 1120px, so nothing below that width moves. */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 28px; }
img, svg { max-width: 100%; }

/* mark */
.mark { display:block; height:auto; }
.mark .mk-bkt { font-family:var(--serif); font-size:42px; fill:var(--accent); }
.mark .mk-word { font-family:var(--serif); font-size:23px; letter-spacing:9.5px; fill:var(--mark-word); }

/* header / nav */
header.nav { position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.nav-links { display:flex; align-items:center; gap:22px; }
.nav-links a { font-size:13px; letter-spacing:.02em; color:var(--ink-soft); transition:color .15s; white-space:nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--accent); }
.nav .mark { width:140px; }
/* white-space:nowrap at every width — Public Sans is wider than the system
   stack it replaced, and without this the nav buttons wrap to two lines. */
.btn { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:10px 20px; cursor:pointer; transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1), filter .22s cubic-bezier(.22,.61,.36,1), border-color .18s ease, color .18s ease, background .18s ease; display:inline-block; white-space:nowrap; }
.btn-gold { background:var(--accent-fill); color:var(--accent-ink); border:1px solid var(--accent-fill); }
.btn-gold:hover,
.btn-gold:focus-visible {
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    0 10px 22px var(--accent-soft),
    0 2px 0 color-mix(in srgb, #000 14%, var(--accent));
}
.btn-gold:active {
  transform:translateY(0);
  filter:brightness(.98);
  box-shadow:inset 0 1px 2px color-mix(in srgb, #000 18%, transparent);
  transition-duration:.1s;
}
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
/* mobile drawer */
.nav-toggle { display:none; width:40px; height:36px; align-items:center; justify-content:center; flex-direction:column; gap:4px; background:transparent; border:1px solid var(--line-strong); border-radius:8px; cursor:pointer; padding:0; flex:none; }
.nav-toggle span { display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

.nav-drawer { display:none; position:fixed; inset:64px 0 0; z-index:49; background:var(--ground); border-top:1px solid var(--line); padding:8px 28px 28px; overflow-y:auto; }
.nav-drawer[hidden] { display:none; }
.nav-drawer.open { display:block; }
.nav-drawer-links { display:flex; flex-direction:column; }
.nav-drawer-links a { font-size:16px; color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line); }
.nav-drawer-links a:hover, .nav-drawer-links a[aria-current="page"] { color:var(--accent); }
.drawer-login { display:block; text-align:center; margin-top:20px; }

/* Drawer takes over at 980px: Public Sans is wider than the system stack, so
   the full nav no longer fits between ~900 and 980px without overflowing. */
@media (max-width: 980px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  /* .nav-login is gone from the header entirely; the theme toggle stays visible
     on mobile now that it is a 36px icon rather than a wide text button. */
  .nav-login { display:none; }
  .theme-toggle { width:34px; height:34px; }
  .nav .mark { width:112px; }
  .nav-in { gap:10px; }
  .btn { padding:9px 15px; font-size:11.5px; white-space:nowrap; }
}
@media (min-width: 981px) { .nav-drawer { display:none !important; } }

/* page intro */
.page-head {
  padding: clamp(48px,5.5vw,84px) 0 clamp(16px,2vw,28px);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-head::before {
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:min(1200px,96vw);
  pointer-events:none;
  background:radial-gradient(ellipse 58% 76% at 64% 42%, var(--accent-soft) 0%, transparent 70%);
  background:radial-gradient(ellipse 58% 76% at 64% 42%,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 24%,
    color-mix(in srgb, var(--accent) 6%, transparent) 40%,
    color-mix(in srgb, var(--accent) 3%, transparent) 54%,
    color-mix(in srgb, var(--accent) 1%, transparent) 68%,
    transparent 84%);
  opacity:.82;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
}
.page-head .wrap { position:relative; z-index:1; max-width:980px; }
.eyebrow { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.eyebrow b { color:var(--accent); }
.page-head h1 { font-family:var(--serif); font-weight:700; font-size:clamp(34px,4.6vw,54px); line-height:1.02; letter-spacing:-.015em; margin:14px 0 0; text-wrap:balance; }
.page-head h1 .gold { color:var(--accent); }
.page-head .lede { font-size:clamp(15px,1.5vw,18px); color:var(--ink-soft); margin:16px 0 0; max-width:60ch; }
.page-head .lede b { color:var(--ink); font-weight:600; }

/* sections
   A flat 40px between every section gave a long page no sense of where one
   idea ended and the next began — the whole site read as one continuous column
   regardless of how many arguments it was making. The scale is fluid so the
   gaps close on a phone rather than turning each page into a scroll. */
section.band { padding: clamp(56px,6.5vw,96px) 0; border-top:1px solid var(--line); }
section.band:first-of-type { border-top:0; }
.sec-head { max-width:64ch; margin:0 0 clamp(26px,3.2vw,40px); }
.sec-head.center { text-align:center; margin-left:auto; margin-right:auto; }
.sec-head h2 { font-family:var(--serif); font-weight:700; font-size:clamp(24px,2.7vw,34px); letter-spacing:-.01em; margin:8px 0 0; text-wrap:balance; }
.sec-head p { color:var(--ink-soft); font-size:15px; margin:10px 0 0; }

/* grids + cards */
.grid { display:grid; gap:16px; align-items:stretch; }
.grid > .card { display:flex; flex-direction:column; }
/* Push only a trailing chip/link row to the card bottom, so sibling cards in a
   row align on it. Deliberately NOT applied to a card's closing <p>: doing so
   detaches the paragraph from its heading on cards that have no chip row. */
.grid > .card > :last-child:not(p):not(h3) { margin-top:auto; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; }
.card.rail { border-top:3px solid var(--accent); }
.card h3 { font-family:var(--serif); font-size:20px; margin:0 0 8px; color:var(--ink); }
.card p { font-size:13.5px; color:var(--ink-soft); margin:0; }
.card .num { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }

/* pills + states */
.pill { font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.live { color:var(--accent-ink); background:var(--accent); }
.pill.coming { color:var(--ink-soft); background:transparent; border:1px solid var(--line-strong); }
.pill.ok { color:var(--ok); background:var(--ok-soft); }
.pill.warn { color:var(--warn); background:var(--warn-soft); }
.pill.alert { color:var(--alert); background:var(--alert-soft); }
.state { font-size:11px; padding:3px 9px; border-radius:5px; border:1px solid var(--line-strong); color:var(--ink-soft); display:inline-block; }
.state.g { color:var(--ok); border-color:var(--ok-soft); background:var(--ok-soft); }
.state.a { color:var(--alert); border-color:var(--alert-soft); background:var(--alert-soft); }
.state.w { color:var(--warn); border-color:var(--warn-soft); background:var(--warn-soft); }

/* infographic: dependency flow */
.flow { display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:10px; }
.flow .node { background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:12px 16px; font-size:13px; color:var(--ink); display:flex; align-items:center; min-width:0; transition:border-color .2s ease, background .2s ease; }
.flow .node:hover { border-color:var(--accent); background:var(--panel); }
.flow .node.win { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; }
.flow .node.win:hover { background:var(--accent); border-color:var(--accent); }
.flow .arw { display:flex; align-items:center; color:var(--accent); font-weight:700; font-size:18px; }

/* infographic: numbered steps / funnel */
.steps { display:flex; flex-direction:column; gap:0; }
.step { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.step:first-child { border-top:0; }
.step .idx { width:38px; height:38px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); font-family:var(--serif); font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; flex:none; }
.step .idx.done { background:var(--accent); color:var(--accent-ink); }
.step h3 { margin:2px 0 4px; font-size:16px; color:var(--ink); font-weight:700; }
.step p { margin:0; font-size:13.5px; color:var(--ink-soft); }

/* infographic: tile with the navy logo/hero ground */
.tile { background:var(--tile); border:1px solid var(--line-strong); border-radius:14px; padding:30px; transition:border-color .2s ease, box-shadow .2s ease; }
.tile:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft); }

/* preview panel (product mock) */
.preview { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.pv-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--tile); }
.pv-top .t { font-family:var(--serif); font-size:15px; color:var(--ink); font-weight:700; }
.pv-top .addr { font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.pv-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); }
.pv-row:last-child { border-bottom:0; }
.pv-row .name { font-size:13.5px; color:var(--ink); font-weight:500; }
.pv-row .name small { display:block; font-weight:400; color:var(--ink-faint); font-size:11px; margin-top:1px; }
.status { font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 11px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.ok { color:var(--ok-text); background:var(--ok-soft); }
.status.warn { color:var(--warn-text); background:var(--warn-soft); }
.status.alert { color:var(--alert-text); background:var(--alert-soft); }

/* two-col split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }

/* callout */
.callout { background:var(--panel); border-radius:12px; padding:26px 28px; transition:box-shadow .2s ease, background .2s ease; }
.callout:hover { box-shadow:0 0 0 1px var(--accent); }
.callout .k { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.callout h3 { font-family:var(--serif); font-size:clamp(18px,2vw,24px); color:var(--ink); margin:8px 0 0; text-wrap:balance; }

/* legal-style card */
.law { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--alert); border-radius:10px; padding:22px; transition:border-color .2s ease, background .2s ease; }
.law:hover { border-color:var(--accent); background:var(--panel); }
.law .stat { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--accent); text-transform:uppercase; }
.law h3 { font-family:var(--serif); font-size:19px; margin:6px 0 0; color:var(--ink); border:0; }
.law p { font-size:13px; color:var(--ink-soft); margin:9px 0 0; }
.law .hit { margin-top:11px; padding:9px 12px; background:var(--alert-soft); border-radius:6px; font-size:12px; color:var(--ink); }
.law .hit b { color:var(--alert); }

/* cta band */
.cta-band { text-align:center; background:var(--tile); border:1px solid var(--line-strong); border-radius:16px; padding:48px 30px; }
.cta-band h2 { font-family:var(--serif); font-size:clamp(24px,3vw,36px); color:var(--ink); margin:0; text-wrap:balance; }
.cta-band p { color:var(--ink-soft); margin:12px 0 24px; font-size:15px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; }
.cta-row.center { justify-content:center; }
@media (max-width:520px) {
  .cta-row { flex-direction:column; align-items:stretch; }
  .cta-row .btn { text-align:center; }
}

/* footer */
footer { border-top:1px solid var(--line); padding:clamp(40px,5vw,64px) 0 28px; margin-top:0; }
.foot-in {
  display:grid;
  grid-template-columns:minmax(200px,1.35fr) repeat(3,minmax(0,.7fr));
  gap:clamp(28px,4vw,48px) clamp(24px,4vw,56px);
  align-items:start;
}
.foot-in .mark { width:148px; display:block; }
.foot-brand a { display:inline-block; }
.foot-col h2 { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
/* The 10px that used to sit in margin-bottom is now 5px of padding above and
   below, so the gap between two links' text is unchanged at 10px while the tap
   target grows from 21px to 31px — over the 24px WCAG 2.5.8 (AA) minimum.
   Negative margins on the first and last link keep the column's overall height
   and alignment identical to before. */
.foot-col a { display:block; font-size:13px; color:var(--ink-soft); padding:5px 0; margin:0; }
.foot-col a:first-of-type { margin-top:-5px; }
.foot-col a:last-child { margin-bottom:-5px; }
.foot-col a:hover { color:var(--accent); }
.foot-meta { font-size:13px; color:var(--ink-faint); margin-top:12px; max-width:28ch; line-height:1.5; }
.foot-bar {
  margin-top:clamp(24px,3vw,36px);
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint);
  text-align:center;
}
}
@media (max-width:860px) {
  .foot-in { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foot-brand { grid-column:1 / -1; }
}
@media (max-width:520px) {
  .foot-in { grid-template-columns:1fr 1fr; }
}

/* "coming soon" stub */
.stub { text-align:center; padding:80px 0; }
.stub .mark { width:230px; margin:0 auto 24px; }
.stub h1 { font-family:var(--serif); font-size:clamp(28px,4vw,44px); margin:0; }
.stub p { color:var(--ink-soft); margin:14px auto 0; max-width:52ch; }
.stub .soon { display:inline-block; margin-top:22px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:7px 16px; }

@media (max-width: 980px) {
  .g3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .g2, .g3, .split { grid-template-columns:1fr; }
  .split { gap:28px; }
}

/* ===== deep-dive ("onion") components ===== */
.breadcrumb { font-size:12px; color:var(--ink-faint); margin-bottom:8px; letter-spacing:.02em; }
/* Underlined, not just recoloured: this link sits in a line of text with the
   same colour weight as its neighbours, so colour alone does not distinguish
   it (WCAG 1.4.1 — axe measured 1.62:1 against the surrounding text, against a
   3:1 minimum). */
/* 5px of vertical padding takes the target from 14px to 24px, clearing WCAG
   2.5.8 (AA). On an inline element that padding overflows the line box rather
   than growing it, so nothing on the page moves. */
.breadcrumb a { color:var(--ink-soft); padding:5px 0; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:from-font; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .sep { padding:0 6px; color:var(--line-strong); }

.timeline { display:flex; align-items:flex-start; overflow-x:auto; padding:6px 0 10px; }
.tl-step { flex:1 0 130px; position:relative; padding:0 8px; text-align:center; }
.tl-step::after { content:""; position:absolute; top:8px; left:50%; width:100%; height:2px; background:var(--line-strong); z-index:0; }
.tl-step:last-child::after { display:none; }
.tl-dot { width:18px; height:18px; border-radius:999px; background:var(--surface); border:2px solid var(--accent); margin:0 auto 12px; position:relative; z-index:1; }
.tl-step.on .tl-dot { background:var(--accent); }
.tl-step.warn .tl-dot { border-color:var(--warn); } .tl-step.warn.on .tl-dot { background:var(--warn); }
.tl-step.bad .tl-dot { border-color:var(--alert); } .tl-step.bad.on .tl-dot { background:var(--alert); }
.tl-step h5 { margin:0; font-size:13px; color:var(--ink); }
.tl-step p { margin:4px 0 0; font-size:11px; color:var(--ink-faint); }

/* ===== motion standard — scroll-triggered ===== */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; }
.reveal.seen { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.12s; } .reveal.d2 { transition-delay:.24s; } .reveal.d3 { transition-delay:.36s; }
.pulse-chip { animation:pulseChip 2.4s ease-in-out infinite; }
@keyframes pulseChip { 0%,100% { box-shadow:0 0 0 0 var(--accent-soft); } 50% { box-shadow:0 0 0 7px transparent; } }

/* flow gains motion once scrolled into view */
.flow .node, .flow .arw { opacity:0; transform:translateY(9px); transition:opacity .5s ease, transform .5s ease; }
.flow.seen .node, .flow.seen .arw { opacity:1; transform:none; }
.flow.seen .node:nth-child(1){transition-delay:.05s} .flow.seen .arw:nth-child(2){transition-delay:.12s}
.flow.seen .node:nth-child(3){transition-delay:.19s} .flow.seen .arw:nth-child(4){transition-delay:.26s}
.flow.seen .node:nth-child(5){transition-delay:.33s} .flow.seen .arw:nth-child(6){transition-delay:.40s}
.flow.seen .node:nth-child(7){transition-delay:.47s}
.flow.seen .node.win { animation:winPulse 2.6s ease 1.1s infinite; }
@keyframes winPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(214,173,98,.4);} 50%{ box-shadow:0 0 0 9px rgba(214,173,98,0);} }

.gold { color:var(--accent); }

/* ===== puzzle: compliance assembles; one piece blocks the rest =====
   Flip cards: front is the name, back is the meaning. Shared by the homepage
   and How It Works. Hover uses the brand gold; the blocker uses alert. */
.assemble { max-width:min(1360px,100%); margin:0 auto; }
.assemble .pieces { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .assemble .pieces { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .assemble .pieces { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.piece {
  padding:0; border:0; background:transparent; border-radius:0;
  perspective:1200px; cursor:pointer; text-align:center;
  opacity:0; transform:translateY(22px) scale(.9);
  transition:opacity .55s ease, transform .6s cubic-bezier(.2,.9,.3,1.3);
}
.assemble.seen .piece { opacity:1; transform:none; }
.assemble.seen .piece:nth-child(1){transition-delay:.05s} .assemble.seen .piece:nth-child(2){transition-delay:.13s}
.assemble.seen .piece:nth-child(3){transition-delay:.21s} .assemble.seen .piece:nth-child(4){transition-delay:.29s}
.assemble.seen .piece:nth-child(5){transition-delay:.37s} .assemble.seen .piece:nth-child(6){transition-delay:.66s}
.piece-inner {
  position:relative; min-height:148px;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.assemble.seen .piece:hover .piece-inner,
.assemble.seen .piece:focus-within .piece-inner,
.assemble.seen .piece.is-open .piece-inner { transform:rotateY(180deg); }
.piece:focus-visible { outline:none; }
.piece:focus-visible .piece-front,
.piece:focus-visible .piece-back { outline:2px solid var(--accent); outline-offset:2px; }
.piece-front,
.piece-back {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:18px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.piece.block .piece-front,
.piece.block .piece-back { border-color:var(--alert); }
.assemble.seen .piece:hover .piece-front,
.assemble.seen .piece:hover .piece-back,
.assemble.seen .piece:focus-within .piece-front,
.assemble.seen .piece:focus-within .piece-back,
.assemble.seen .piece.is-open .piece-front,
.assemble.seen .piece.is-open .piece-back {
  border-color:var(--accent);
  background:var(--panel);
  box-shadow:0 0 0 1px var(--accent-soft);
}
.assemble.seen .piece:hover .plab,
.assemble.seen .piece:hover .piece-tip-name,
.assemble.seen .piece:focus-within .plab,
.assemble.seen .piece:focus-within .piece-tip-name,
.assemble.seen .piece.is-open .plab,
.assemble.seen .piece.is-open .piece-tip-name { color:var(--accent); }
.assemble.seen .piece.block:hover .piece-front,
.assemble.seen .piece.block:hover .piece-back,
.assemble.seen .piece.block:focus-within .piece-front,
.assemble.seen .piece.block:focus-within .piece-back,
.assemble.seen .piece.block.is-open .piece-front,
.assemble.seen .piece.block.is-open .piece-back {
  border-color:var(--alert);
  background:var(--alert-soft);
  box-shadow:0 0 0 1px var(--alert-soft);
}
.assemble.seen .piece.block:hover .plab,
.assemble.seen .piece.block:hover .piece-tip-name,
.assemble.seen .piece.block:focus-within .plab,
.assemble.seen .piece.block:focus-within .piece-tip-name,
.assemble.seen .piece.block.is-open .plab,
.assemble.seen .piece.block.is-open .piece-tip-name { color:var(--alert); }
.piece-back {
  transform:rotateY(180deg);
  align-items:flex-start; justify-content:center; text-align:left; gap:5px;
}
.piece .pico { width:24px; height:24px; border-radius:6px; margin:0 auto 6px; background:var(--accent-soft); border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:12px; font-weight:700; }
.piece .plab { font-size:14px; color:var(--ink); font-weight:600; margin:0; transition:color .2s ease; }
.piece.block .pico { background:var(--alert-soft); border-color:var(--alert); color:var(--alert); }
.piece-tip-name { font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink); margin:0; transition:color .2s ease; }
.piece-tip-desc { font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.45; }
@media (max-width:520px) { .piece-inner { min-height:118px; } }
.assemble .seal { text-align:center; margin-top:38px; opacity:0; transform:translateY(8px); transition:opacity .6s ease 1.2s, transform .6s ease 1.2s; }
.assemble.seen .seal { opacity:1; transform:none; }
.assemble .seal .chip { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:9px 20px; font-weight:700; font-size:13px; letter-spacing:.02em; transition:box-shadow .2s ease, transform .2s ease; }
.assemble .seal .chip:hover { transform:translateY(-1px); box-shadow:0 6px 18px var(--accent-soft); }
.assemble .seal .sub { font-size:12px; color:var(--ink-faint); margin-top:9px; }

/* ===== the reveal is OPT-IN =====================================
   Every rule above starts its element at opacity:0 and waits for
   IntersectionObserver to add .seen. That makes the animation the DEFAULT and
   readable content the exception, so any client that does not run the observer
   renders a blank page: measured on this branch, 90% of the homepage's text
   was invisible with JavaScript off and 80% invisible when printed.

   So the hidden state now only exists once a script has declared that it will
   be undone — `html.js-reveal`, set by the snippet in each page's <head>.
   No script, script error, no IntersectionObserver, reduced-motion preference,
   print: no class, and the content is simply there.

   `!important` rather than a `.js-reveal` prefix on each rule above: this
   mirrors the reduced-motion escape hatch directly below, and it means adding
   a new .reveal-style rule later cannot silently out-specify the safety net.

   `:where()` keeps the whole list at zero specificity, so it never competes
   with the .seen rules — it is decided purely by the !important flag. */
html:not(.js-reveal) :where(
  .reveal, .flow .node, .flow .arw, .piece, .assemble .seal,
  .arch__node, .arch__core-box, section.band.rg-open .rg-row,
  .panel.reveal, .home .s8-band .step,
  .pl-stage, .hero-win .pv-row
),
html:not(.js-reveal) :where(.arch__core)::before,
html:not(.js-reveal) :where(.arch__core)::after {
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* Printing never scrolls, so the observer never fires for anything past the
   first screen. Force the resting state on paper regardless of .js-reveal. */
@media print {
  :where(
    .reveal, .flow .node, .flow .arw, .piece, .assemble .seal,
    .arch__node, .arch__core-box, section.band.rg-open .rg-row,
    .panel.reveal, .home .s8-band .step,
    .pl-stage, .hero-win .pv-row
  ),
  :where(.arch__core)::before,
  :where(.arch__core)::after {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Extended to the full list: the original five selectors left the roadmap
     rows, the portal panels, the Section 8 steps and the architecture diagram
     still hidden for a reduced-motion visitor whose JavaScript did not run. */
  :where(
    .reveal, .flow .node, .flow .arw, .piece, .assemble .seal,
    .arch__node, .arch__core-box, section.band.rg-open .rg-row,
    .panel.reveal, .home .s8-band .step,
    .pl-stage, .hero-win .pv-row
  ) { opacity:1 !important; transform:none !important; transition:none !important; }
  .pulse-chip, .flow.seen .node.win { animation:none !important; }
  .piece-inner { transition:none !important; }
}

.deep-links { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.deep-link { display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; transition:border-color .15s, transform .12s, background .2s ease; }
.deep-link:hover { border-color:var(--accent); background:var(--panel); transform:translateY(-2px); }
.deep-link:hover .t { color:var(--accent); }
.deep-link .t { font-size:14px; font-weight:700; color:var(--ink); } .deep-link .s { font-size:12px; color:var(--ink-faint); margin-top:3px; }
.deep-link .go { color:var(--accent); font-size:12px; margin-top:8px; display:inline-block; }
@media (max-width:860px){ .deep-links { grid-template-columns:1fr; } }

/* connector card header — keeps the pill hugging its text */
.conn-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.conn-head .meta { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.conn-head h3 { font-size:16px; margin:0; }
.conn-head svg { flex:none; }

/* ===================================================================
  PIPELINE — "How every service works", rebuilt.
  Four stages, each animating its own verb, with a worked example
  underneath that updates as the record moves through.
  =================================================================== */
.tile.pipeline {
  --pipe-dur:.5s;
  --pipe-lead:.6s;
  --pipe-step:1.9s;
  --pipe-rail:5.7s;
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, var(--surface)) 0%, var(--surface) 100%);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line-strong));
  box-shadow:var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.pipeline { --pipe-dur:.5s; --pipe-lead:.6s; --pipe-step:1.9s; --pipe-rail:5.7s; --pipe-line:var(--ok); --pipe-line-soft:var(--ok-soft); --pipe-line-glow:rgba(63,125,92,.45); }
:root[data-theme="dark"] .pipeline { --pipe-line:var(--accent); --pipe-line-soft:var(--accent-soft); --pipe-line-glow:rgba(214,173,98,.45); }

/* --- the stage track --- */
.pl-track { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; isolation:isolate; }
.pl-track::before {
  content:""; position:absolute; left:calc(12.5% + 0px); right:calc(12.5% + 0px); top:26px; height:2px;
  background:var(--line-strong); opacity:.5; z-index:-1; pointer-events:none;
}
.pl-track::after {
  content:""; position:absolute; left:12.5%; top:26px; height:2px; width:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,var(--pipe-line),var(--pipe-line));
  box-shadow:0 0 10px var(--pipe-line-glow);
}
.pipeline.go .pl-track::after { animation:railFill var(--pipe-rail) linear var(--pipe-lead) both; }
@keyframes railFill { to { width:75%; } }

.pl-stage { position:relative; z-index:1; padding:0 14px; text-align:center; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.pipeline.go .pl-stage { opacity:1; transform:none; }
.pipeline.go .pl-stage:nth-child(1){ transition-delay:.05s }
.pipeline.go .pl-stage:nth-child(2){ transition-delay:.15s }
.pipeline.go .pl-stage:nth-child(3){ transition-delay:.25s }
.pipeline.go .pl-stage:nth-child(4){ transition-delay:.35s }

.pl-dot {
  width:54px; height:54px; margin:0 auto 14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
  transform:translateZ(0);
  transition:border-color .45s ease, background .45s ease, box-shadow .45s ease;
}
.pl-dot svg { width:24px; height:24px; display:block; overflow:visible; stroke:currentColor; fill:none; color:var(--ink-faint); transition:color .45s ease; }
.pl-dot svg [fill="currentColor"]{ fill:currentColor; stroke:none; }

.pl-stage.lit .pl-dot {
  border-color:var(--pipe-line);
  background:color-mix(in srgb, var(--pipe-line) 18%, var(--surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pipe-line) 45%, transparent),
    0 0 18px var(--pipe-line-glow),
    0 8px 28px var(--pipe-line-glow);
}
.pl-stage.lit .pl-dot svg { color:var(--pipe-line); }
.pl-stage.done .pl-dot {
  border-color:var(--pipe-line);
  box-shadow:0 0 12px var(--pipe-line-glow);
}

/* Step 02 is the reconciliation checkmark. When it lights (after the rail
   passes), we highlight it to match the line. */
.pipeline.go .pl-stage.s2.lit .pl-dot { border-color:var(--pipe-line); background:color-mix(in srgb, var(--pipe-line) 18%, var(--surface)); }
.pipeline.go .pl-stage.s2.lit .pl-dot svg { color:var(--pipe-line); }
.pipeline.go .pl-stage.s2.done .pl-dot { border-color:var(--pipe-line); }
.pipeline.go .pl-stage.s2.done .pl-dot svg { color:var(--pipe-line); }

.pipeline.go .pl-stage.s1.lit .pl-dot,
.pipeline.go .pl-stage.s1.done .pl-dot,
.pipeline.go .pl-stage.s3.lit .pl-dot,
.pipeline.go .pl-stage.s3.done .pl-dot,
.pipeline.go .pl-stage.s4.done .pl-dot { border-color:var(--pipe-line); background:color-mix(in srgb, var(--pipe-line) 18%, var(--surface)); }
.pipeline.go .pl-stage.s1.lit .pl-dot svg,
.pipeline.go .pl-stage.s3.lit .pl-dot svg,
.pipeline.go .pl-stage.s4.lit .pl-dot svg { color:var(--pipe-line); }

.pl-num { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-soft); text-transform:uppercase; }
.pl-name { font-family:var(--serif); font-size:16px; font-weight:700; color:var(--ink); margin:4px 0 5px; line-height:1.2; }
.pl-desc { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; max-width:22ch; margin-inline:auto; }

/* final stage reads as the payoff */
.pipeline.go .pl-stage.s4.lit .pl-dot {
  background:var(--pipe-line); border-color:var(--pipe-line);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pipe-line) 45%, transparent),
    0 0 18px var(--pipe-line-glow),
    0 8px 28px var(--pipe-line-glow);
  animation:plPulse 2.6s ease .4s infinite;
}
.pipeline.go .pl-stage.s4.lit .pl-dot svg { color:var(--accent-ink); }
@keyframes plPulse {
  0%,100%{
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--pipe-line) 45%, transparent),
      0 0 18px var(--pipe-line-glow),
      0 8px 28px var(--pipe-line-glow);
  }
  50%{
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--pipe-line) 18%, transparent),
      0 0 26px var(--pipe-line-glow),
      0 10px 36px var(--pipe-line-glow);
  }
}

/* --- per-stage glyph motion --- */
.pipeline.go .s1.lit .g-doc   { animation:plPull 1s cubic-bezier(.3,.8,.3,1) both; }
.pipeline.go .s1.lit .g-stack { animation:plDim .5s ease both; }
@keyframes plPull { 0%{ transform:translateY(8px); opacity:0 } 50%{ transform:translateY(-3px); opacity:1 } 100%{ transform:translateY(-1.5px); opacity:1 } }
@keyframes plDim { to { opacity:.4 } }

.pipeline.go .s2.lit .g-colL { animation:plConvL .75s cubic-bezier(.3,.8,.3,1) both; }
.pipeline.go .s2.lit .g-colR { animation:plConvR .75s cubic-bezier(.3,.8,.3,1) both; }
.pipeline.go .s2.lit .g-tick { animation:plTick .45s cubic-bezier(.2,.9,.3,1.4) .55s both; }
@keyframes plConvL { 0%{ transform:translateX(-6px); opacity:.3 } 100%{ transform:none; opacity:1 } }
@keyframes plConvR { 0%{ transform:translateX(6px);  opacity:.3 } 100%{ transform:none; opacity:1 } }
@keyframes plTick  { 0%{ opacity:0; transform:scale(.4) } 100%{ opacity:1; transform:scale(1) } }

.pipeline.go .s3.lit .g-barA { animation:plRankA .8s cubic-bezier(.3,.8,.3,1) both; }
.pipeline.go .s3.lit .g-barB { animation:plRankB .8s cubic-bezier(.3,.8,.3,1) both; }
.pipeline.go .s3.lit .g-barC { animation:plRankC .8s cubic-bezier(.3,.8,.3,1) both; }
@keyframes plRankA { 0%{transform:translateY(0)} 55%,100%{transform:translateY(15px)} }
@keyframes plRankB { 0%{transform:translateY(0)} 55%,100%{transform:translateY(-7.5px)} }
@keyframes plRankC { 0%{transform:translateY(0);opacity:.45} 55%,100%{transform:translateY(-7.5px);opacity:1} }

.pipeline.go .s4.lit .g-bell { animation:plRing .9s ease .15s both; transform-origin:12px 5px; }
.pipeline.go .s4.lit .g-clap { animation:plClap .4s ease .15s both; }
@keyframes plRing { 0%{transform:rotate(0)} 20%{transform:rotate(-16deg)} 40%{transform:rotate(13deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(4deg)} 100%{transform:rotate(0)} }
@keyframes plClap { 0%{opacity:0} 100%{opacity:1} }

/* --- the worked example panel --- */
.pl-spec {
  margin-top:34px;
  background:color-mix(in srgb, var(--ground) 70%, var(--surface));
  border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
  font-family:var(--mono);
}
.pl-spec-top {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 70%, var(--surface));
}
.pl-spec-top, .pl-spec-top * { font-family:var(--mono); }
.pl-spec-top .lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.pl-spec-top .addr { font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.pl-spec-body { padding:18px 20px; min-height:108px; }

/* One frame at a time in normal flow. Absolute stacking let the outgoing
   copy sit under the incoming copy, which read as doubled type. */
.pl-frame { display:none; padding:0; }
.pl-frame.on { display:block; animation:plFrameIn .55s ease both; }
@keyframes plFrameIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.pl-frame, .pl-frame * { font-family:var(--mono); }

.pl-kv { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.45em; row-gap:2px; font-family:var(--mono); font-size:12.5px; line-height:1.55; margin:0 0 8px; }
.pl-kv .k { color:var(--ink-soft); min-width:0; flex:none; }
.pl-kv .k::after { content:":"; }
.pl-kv .v { color:var(--ink); min-width:0; }
.pl-note { font-size:12.5px; color:var(--ink-soft); margin:12px 0 0; }
.pl-note b { color:var(--ink); }

.pl-rows { display:flex; flex-direction:column; gap:7px; }
.pl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; padding:7px 11px; border-radius:7px; background:var(--ground); border:1px solid var(--line); }
.pl-row .nm { color:var(--ink); }
.pl-row .dt { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.pl-row.urgent { border-color:var(--alert); }
.pl-row.urgent .dt { color:var(--alert); }

.pl-verdict { display:flex; align-items:flex-start; gap:14px; }
.pl-verdict .chip { flex:none; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:8px 16px; font-weight:700; font-size:12.5px; white-space:nowrap; }
.pl-verdict .txt { font-size:13px; color:var(--ink-soft); line-height:1.6; font-family:var(--mono); }
.pl-verdict .txt b { color:var(--ink); }

.pl-replay { font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.04em; border:1px solid var(--line-strong); background:transparent; color:var(--ink-faint); border-radius:999px; padding:5px 13px; cursor:pointer; }
.pl-replay:hover { border-color:var(--accent); color:var(--accent); }

@media (max-width:860px) {
  .pl-track { grid-template-columns:1fr; gap:0; }
  .pl-track::before, .pl-track::after { display:none; }
  /* stage becomes a row: glyph in a left rail, all text in one column beside it */
  .pl-stage {
    display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto;
    column-gap:16px; text-align:left; padding:0 0 22px; align-items:start; position:relative;
  }
  .pl-stage:last-child { padding-bottom:0; }
  /* vertical connector down the glyph rail */
  .pl-stage::before {
    content:""; position:absolute; left:26px; top:54px; bottom:0; width:2px;
    background:var(--line-strong); opacity:.45;
  }
  .pl-stage:last-child::before { display:none; }
  .pl-stage.done::before { background:var(--pipe-line); opacity:.8; }
  .pl-dot { margin:0; grid-row:1 / span 3; }
  .pl-num  { grid-column:2; align-self:center; }
  .pl-name { grid-column:2; margin:3px 0 4px; }
  .pl-desc { grid-column:2; max-width:none; margin-inline:0; }
  /* stack the verdict so the sentence gets full width */
  .pl-verdict { flex-direction:column; gap:12px; }
  .pl-kv { margin-bottom:10px; }
  .pl-kv .k { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
  .pl-row { flex-direction:column; align-items:flex-start; gap:3px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-stage { opacity:1 !important; transform:none !important; transition:none !important; }
  .pipeline * { animation:none !important; }
  .pl-track::after { width:75% !important; }
  .pl-frame { transition:none !important; }
}

.rl-life-head { text-align:center; }
.rl-life-head h2 { text-wrap:unset; max-width:none; }

/* Lifecycle: same rail animation as the service pipelines, circular dots */
.life-pipe .pl-stage { z-index:1; }
.life-pipe .pl-dot {
  width:18px; height:18px; border-radius:999px; margin:0 auto 12px;
  background:var(--surface); border:2px solid var(--line-strong);
  box-shadow:0 0 0 6px var(--surface);
  z-index:2;
}
.life-pipe .pl-track::before,
.life-pipe .pl-track::after { top:8px; z-index:-1; }
.life-pipe .pl-name { font-size:13px; margin:0 0 4px; }
.life-pipe .pl-desc { font-size:11px; color:var(--ink-faint); max-width:18ch; }
.life-pipe.pipeline.go .pl-stage.lit .pl-dot,
.life-pipe.pipeline.go .pl-stage.done .pl-dot {
  background:var(--pipe-line);
  border-color:var(--pipe-line);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pipe-line) 45%, transparent),
    0 0 18px var(--pipe-line-glow),
    0 8px 28px var(--pipe-line-glow);
  animation:plPulse 2.6s ease .4s infinite;
}
.life-pipe .note-faint { margin-top:18px; text-align:center; }
@media (max-width:860px) {
  .life-pipe .pl-stage { grid-template-columns:20px 1fr; }
  .life-pipe .pl-stage::before { left:8px; top:20px; }
  .life-pipe .pl-dot { margin:0; box-shadow:0 0 0 4px var(--surface); }
  .life-pipe .pl-desc { max-width:none; }
}

/* ===== The ledger =====
   Replaces the card grid on Features. The content is a register of services,
   each reading from a named arm of City government and reporting a state —
   so it is set as ruled entries under source headings, with the state in the
   right margin. Hierarchy comes from type and rules; there is no box.

   Deliberately NOT a grid of equal cards: the sources differ in weight, and
   the first entry under each source carries the section's argument. */

.ledger { margin-top:6px; }

/* --- source group --- */
.lg-src { margin-top:44px; }
.lg-src:first-child { margin-top:26px; }
.lg-src-head {
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:9px; border-bottom:1px solid var(--line-strong);
}
.lg-src-key {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap;
}
.lg-src-head h3 {
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.005em;
  margin:0; color:var(--ink-soft);
}
.lg-src-count { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }

/* --- entry --- */
.lg-row {
  display:grid; grid-template-columns:1fr minmax(150px,auto);
  gap:6px 24px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line);
  transition:background .16s ease;
}
.lg-row:hover { background:linear-gradient(90deg,color-mix(in srgb, var(--panel) 80%, transparent),transparent 55%); }
.lg-row:last-child { border-bottom:0; }

.lg-name {
  grid-column:1; grid-row:1;
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink);
  margin:0; letter-spacing:-.005em; transition:color .2s ease;
}
.lg-row:hover .lg-name { color:var(--accent); }
.lg-desc { grid-column:1; grid-row:2; font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.6; max-width:56ch; }

/* the lead entry in each group carries the argument */
.lg-row.lead { padding:24px 0 22px; }
.lg-row.lead .lg-name { font-family:var(--serif); font-size:clamp(19px,1.9vw,23px); font-weight:700; letter-spacing:-.015em; }
.lg-row.lead .lg-desc { font-size:14.5px; }

/* --- right margin: states + status --- */
.lg-meta { grid-column:2; grid-row:1 / span 2; justify-self:end; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.lg-status { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ok); white-space:nowrap; }
.lg-status.coming { color:var(--warn); }
.lg-states { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.lg-states span {
  font-family:var(--mono); font-size:10px; letter-spacing:.02em;
  padding:2px 7px; border-radius:3px; white-space:nowrap;
  color:var(--ink-faint); border:1px solid var(--line);
}
.lg-states span.g { color:var(--ok); border-color:var(--ok-soft); background:var(--ok-soft); }
.lg-states span.a { color:var(--alert); border-color:var(--alert-soft); background:var(--alert-soft); }
.lg-more { font-size:12.5px; color:var(--accent); margin-top:2px; white-space:nowrap; }
.lg-more:hover { text-decoration:underline; text-underline-offset:3px; }

@media (max-width:760px) {
  .lg-row { grid-template-columns:1fr; }
  .lg-name { grid-column:1; grid-row:auto; }
  .lg-desc { grid-column:1; grid-row:auto; }
  .lg-meta { grid-column:1; grid-row:auto; justify-self:start; align-items:flex-start; text-align:left; margin-top:10px; }
  .lg-states { justify-content:flex-start; }
  .lg-src-head { flex-wrap:wrap; gap:6px 12px; }
  .lg-src-count { margin-left:0; width:100%; }
}

/* ===== Features page: architecture dashboard =====
   Dark terminal-style diagram showing data flow from city sources → Nomos → portal.
   Animated on scroll: nodes fade/slide in, core draws its border, connectors pulse. */
.arch {
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:16px;
  padding:clamp(28px,3.5vw,48px) clamp(24px,3vw,44px);
  margin-bottom:clamp(32px,4vw,56px);
  position:relative; overflow:hidden;
}
.arch__label,
.arch__foot {
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}
.arch__label { margin-bottom:clamp(20px,2.5vw,32px); }
.arch__foot { margin-top:clamp(20px,2.5vw,32px); text-align:center; color:var(--accent); }

.arch__layout {
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,3vw,40px);
  align-items:center;
}

/* Nodes */
.arch__sources,
.arch__output { display:flex; flex-direction:column; gap:12px; }
.arch__node {
  background:var(--ground); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px;
  opacity:0; transform:translateX(-16px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.arch__node--out {
  transform:translateX(16px);
}
.arch.seen .arch__node { opacity:1; transform:none; }
.arch.seen .arch__sources .arch__node:nth-child(1) { transition-delay:.05s; }
.arch.seen .arch__sources .arch__node:nth-child(2) { transition-delay:.12s; }
.arch.seen .arch__sources .arch__node:nth-child(3) { transition-delay:.19s; }
.arch.seen .arch__sources .arch__node:nth-child(4) { transition-delay:.26s; }
.arch.seen .arch__output .arch__node { transition-delay:.55s; }

.arch__node h4 {
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink);
  margin:0 0 4px; letter-spacing:.01em;
}
.arch__node p {
  font-family:var(--mono); font-size:11px; color:var(--ink-faint);
  margin:0; line-height:1.5;
}

/* Core processor box */
.arch__core-box {
  background:var(--ground); border:2px solid var(--accent); border-radius:12px;
  padding:clamp(20px,2.4vw,32px) clamp(18px,2vw,28px);
  opacity:0; transform:scale(.92);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1) .3s, transform .6s cubic-bezier(.2,.7,.2,1) .3s, border-color .2s ease, box-shadow .2s ease;
}
.arch.seen .arch__core-box { opacity:1; transform:none; }
.arch__core-box:hover { border-color:var(--accent); box-shadow:0 0 24px var(--accent-soft); }
.arch__core-box h4 {
  font-family:var(--mono); font-size:14px; font-weight:700; color:var(--accent);
  margin:0 0 10px; letter-spacing:.02em;
}
.arch__core-box p {
  font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);
  margin:0; line-height:1.7; padding-left:12px; position:relative;
}
.arch__core-box p::before {
  content:"›"; position:absolute; left:0; color:var(--accent);
}

/* Connection dots between columns */
.arch__core { position:relative; }
.arch__core::before,
.arch__core::after {
  content:""; position:absolute; top:50%; width:clamp(12px,2vw,28px); height:2px;
  background:var(--accent); opacity:0;
  transition:opacity .4s ease .5s;
}
.arch__core::before { right:100%; transform:translateY(-1px); }
.arch__core::after { left:100%; transform:translateY(-1px); }
.arch.seen .arch__core::before,
.arch.seen .arch__core::after { opacity:1; }

/* Responsive */
@media (max-width:860px) {
  .arch__layout { grid-template-columns:1fr; gap:24px; }
  .arch__core::before, .arch__core::after { display:none; }
  .arch__node { transform:translateY(12px); }
  .arch__node--out { transform:translateY(12px); }
  .arch__sources, .arch__output { gap:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .arch__node, .arch__core-box { opacity:1 !important; transform:none !important; transition:none !important; }
  .arch__core::before, .arch__core::after { opacity:1 !important; transition:none !important; }
}

/* ===== Features page: scannable card grid =====
   Cards hover, stagger in on scroll, and bold the key detail for scanning. */
.feat-services .sec-head { margin-bottom:clamp(24px,3vw,40px); }
.feat-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.feat-card {
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.feat-card:hover {
  border-color:var(--accent); background:var(--panel);
  transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.feat-card:hover .feat-card__title { color:var(--accent); }

/* Featured card now uses the same footprint as the rest so the grid stays
   a clean 3-column matrix. */
.feat-card--hero {
  grid-column:auto;
  display:flex;
  gap:12px;
  align-items:stretch;
}
.feat-card--hero .feat-card__head,
.feat-card--hero .feat-card__title,
.feat-card--hero .feat-card__desc,
.feat-card--hero .feat-card__states,
.feat-card--hero .feat-card__cta { grid-column:auto; }

/* Head: source + status */
.feat-card__head {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.feat-card__source {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.feat-card__status {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; font-weight:600;
}
.feat-card__status { display:none; }
.feat-card__status.live { color:var(--ok); background:var(--ok-soft); }
.feat-card__status.build { color:var(--warn); background:var(--warn-soft); }

/* Title */
.feat-card__title {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(18px,1.8vw,24px); margin:0; letter-spacing:-.012em;
  transition:color .2s ease; color:var(--ink);
}

/* Desc — bolds are the scannable highlights */
.feat-card__desc {
  font-size:clamp(13.5px,1.1vw,15px); color:var(--ink-soft);
  margin:0; line-height:1.65; max-width:48ch;
}
.feat-card__desc b { color:var(--ink); font-weight:600; }

/* State pills */
.feat-card__states { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:8px; }
.feat-card__states span {
  font-family:var(--mono); font-size:10px; letter-spacing:.02em;
  padding:4px 10px; border-radius:5px; white-space:nowrap;
  color:var(--ink-faint); border:1px solid var(--line);
}
.feat-card__states span.g { color:var(--ok); border-color:var(--ok-soft); background:var(--ok-soft); }
.feat-card__states span.a { color:var(--alert); border-color:var(--alert-soft); background:var(--alert-soft); }

/* Deep link */
.feat-card__cta {
  margin-top:auto;
  align-self:stretch;
  width:100%;
  text-align:center;
  padding:8px 14px;
  font-size:12px;
  letter-spacing:.05em;
}
.feat-card__cta:hover,
.feat-card__cta:focus-visible {
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 0 0 1px var(--accent), 0 0 0 6px var(--accent-soft);
}

/* Staggered reveals for cards */
.feat-grid .feat-card.reveal { transition-duration:.6s; }
.feat-grid .feat-card.reveal.d1 { transition-delay:.1s; }
.feat-grid .feat-card.reveal.d2 { transition-delay:.2s; }

/* Responsive */
@media (max-width:980px) {
  .feat-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .feat-card--hero { grid-column:auto; }
}
@media (max-width:620px) {
  .feat-grid { grid-template-columns:1fr; gap:14px; }
  .feat-card:hover { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .feat-card__cta:hover,
  .feat-card__cta:focus-visible { transform:none; }
}


/* ===== The register =====
   Replaces the card grid on Roadmap. Nineteen capabilities in five parts,
   set as ruled entries rather than boxes: hierarchy comes from type weight
   and rules, and one lead entry per part carries that part's argument.
   Colours are the existing brand tokens only. */

.rg-mast { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  padding:0 0 22px; border-bottom:2px solid var(--ink); }
.rg-mast h1 { font-family:var(--serif); font-weight:700; margin:0;
  font-size:clamp(34px,6vw,72px); line-height:.94; letter-spacing:-.03em; text-wrap:balance; }
.rg-mast h1 em { font-style:italic; color:var(--accent); }
.rg-mast .meta { font-family:var(--mono); font-size:11px; line-height:1.7;
  color:var(--ink-faint); text-align:right; white-space:nowrap; }
.rg-mast .meta b { color:var(--ink); display:block; font-size:22px; font-weight:400; letter-spacing:-.01em; }
.rg-lede { font-size:15.5px; color:var(--ink-soft); max-width:58ch; margin:20px 0 0; line-height:1.65; }

.rg-part { margin-top:52px; }
.rg-part-head { display:flex; align-items:baseline; gap:16px; padding-bottom:10px;
  border-bottom:1px solid var(--line-strong); }
.rg-part-num { font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--accent-text); white-space:nowrap; }
.rg-part-head h2 { font-family:var(--serif); font-size:clamp(20px,2.3vw,28px); font-weight:700;
  margin:0; letter-spacing:-.015em; }
.rg-part-count { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; }

.rg-row { display:grid; grid-template-columns:52px 1fr minmax(110px,auto); gap:0 20px;
  padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline;
  transition:background .16s ease; }
.rg-row:hover { background:linear-gradient(90deg,color-mix(in srgb, var(--panel) 80%, transparent),transparent 60%); }
.rg-row:hover .rg-idx { color:var(--accent-text); }
.rg-row:last-child { border-bottom:0; }
.rg-idx { grid-column:1; grid-row:1; font-family:var(--mono); font-size:11px; color:var(--ink-faint);
  letter-spacing:.06em; transition:color .16s ease; }
.rg-name { grid-column:2; grid-row:1; font-family:var(--sans); font-size:15px; font-weight:600;
  margin:0 0 4px; color:var(--ink); letter-spacing:-.005em; transition:color .16s ease; }
.rg-row:hover .rg-name { color:var(--accent); }
.rg-desc { grid-column:2; grid-row:2; font-size:13.5px; color:var(--ink-soft); margin:0;
  line-height:1.6; max-width:62ch; }
.rg-state { grid-column:3; grid-row:1 / span 2; justify-self:end; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ok-text); white-space:nowrap; }
.rg-state.soon { color:var(--warn-text); }
.rg-state.later { color:var(--ink-faint); }

.rg-row.lead { padding:24px 0 22px; border-bottom:1px solid var(--line-strong); }
.rg-row.lead .rg-name { font-family:var(--serif); font-size:clamp(18px,1.9vw,24px);
  font-weight:700; letter-spacing:-.015em; margin-bottom:7px; }
.rg-row.lead .rg-desc { font-size:14.5px; }
.rg-row.lead .rg-idx { color:var(--accent-text); font-size:12px; }

.rg-part.quiet .rg-row { padding:12px 0; }
.rg-part.quiet .rg-name { font-weight:500; color:var(--ink-soft); }
.rg-part.quiet .rg-desc { font-size:12.5px; }

.rg-foot { margin-top:32px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--ink-faint); line-height:1.7; max-width:72ch; }

/* Roadmap: animate each capability row in sequence as the part appears. */
section.band.rg-open .rg-row {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
section.band.rg-open .rg-part.seen .rg-row {
  opacity:1;
  transform:none;
}
section.band.rg-open .rg-part.seen .rg-row:nth-child(2){ transition-delay:.06s }
section.band.rg-open .rg-part.seen .rg-row:nth-child(3){ transition-delay:.14s }
section.band.rg-open .rg-part.seen .rg-row:nth-child(4){ transition-delay:.22s }
section.band.rg-open .rg-part.seen .rg-row:nth-child(5){ transition-delay:.30s }
section.band.rg-open .rg-part.seen .rg-row:nth-child(6){ transition-delay:.38s }

@media (max-width:760px) {
  .rg-mast { grid-template-columns:1fr; gap:14px; align-items:start; }
  .rg-mast .meta { text-align:left; }
  .rg-row { grid-template-columns:36px 1fr; gap:0 14px; }
  .rg-state { grid-column:2; grid-row:auto; justify-self:start; margin-top:7px; }
}


/* ===== Q&A =====
   Replaces the card grid on the FAQ. Questions and answers are a definition
   list, not a grid of boxes: the question leads in the display serif, the
   answer sits beneath it, and a hairline separates entries. Grouped so a
   reader can find their question by topic rather than scanning six identical
   tiles. Existing brand tokens only. */

.qa-group { margin-top:44px; }
.qa-group:first-of-type { margin-top:22px; }
.qa-group-head { display:flex; align-items:baseline; gap:14px;
  padding-bottom:9px; border-bottom:1px solid var(--line-strong); }
.qa-group-key { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text); white-space:nowrap; }
.qa-group-head h2 { font-family:var(--sans); font-size:14px; font-weight:600;
  margin:0; color:var(--ink-soft); letter-spacing:-.005em; }

.qa { border-bottom:1px solid var(--line); padding:22px 0; }
.qa:last-child { border-bottom:0; }
.qa h3 { font-family:var(--serif); font-size:clamp(17px,1.8vw,21px); font-weight:700;
  color:var(--ink); margin:0 0 8px; letter-spacing:-.012em; text-wrap:balance; }
.qa p { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.7; max-width:68ch; }
.qa p + p { margin-top:9px; }
.qa a { color:var(--accent); }
.qa a:hover { text-decoration:underline; text-underline-offset:3px; }
.qa b { color:var(--ink); font-weight:600; }

/* ===== Connector roster =====
   Replaces the card grid on Connectors. The logo mark is the content here —
   a reader scans for "do you connect what I use?" — so each connector is a
   ruled row: mark, name, what connecting does, status. Grouped by what the
   connection is for. Third-party brand marks keep their own colours; the
   surrounding layout uses existing brand tokens only. */

.cx-group { margin-top:46px; }
.cx-group:first-of-type { margin-top:24px; }
.cx-group-head { display:flex; align-items:baseline; gap:14px;
  padding-bottom:9px; border-bottom:1px solid var(--line-strong); }
.cx-group-key { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.cx-group-head h2 { font-family:var(--sans); font-size:14px; font-weight:600;
  margin:0; color:var(--ink-soft); letter-spacing:-.005em; }
.cx-group-count { margin-left:auto; font-family:var(--mono); font-size:10.5px;
  color:var(--ink-faint); white-space:nowrap; }

.cx-row { display:grid; grid-template-columns:44px 1fr minmax(96px,auto);
  gap:4px 18px; align-items:center; padding:16px 0;
  border-bottom:1px solid var(--line); transition:background .16s ease; }
.cx-row:hover { background:linear-gradient(90deg,color-mix(in srgb, var(--panel) 80%, transparent),transparent 58%); }
.cx-row:last-child { border-bottom:0; }
.cx-mark { grid-column:1; grid-row:1 / span 2; align-self:center; }
.cx-mark svg { display:block; width:38px; height:38px; }
.cx-name { grid-column:2; grid-row:1; font-family:var(--sans); font-size:15px;
  font-weight:600; color:var(--ink); margin:0; letter-spacing:-.005em; }
.cx-desc { grid-column:2; grid-row:2; font-size:13.5px; color:var(--ink-soft);
  margin:0; line-height:1.6; max-width:60ch; }
.cx-state { grid-column:3; grid-row:1 / span 2; justify-self:end; align-self:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ok); white-space:nowrap; }
.cx-state.soon { color:var(--warn); }

@media (max-width:700px) {
  .cx-row { grid-template-columns:38px 1fr; gap:3px 14px; }
  .cx-mark svg { width:32px; height:32px; }
  .cx-state { grid-column:2; grid-row:3; justify-self:start; margin-top:7px; }
}

/* ===== Docket components =====
   The site's remaining card grids, rebuilt in the legal-instrument direction
   the register and roster patterns established. Numbered entries, ruled rows,
   status and figures in the right margin. Existing brand tokens only.

   Three components:
     .consq   — consequence entries (homepage stakes): a claim and its cost
     .svc     — the service index (homepage "live today"): compact two-column
     .tiers   — pricing as a comparison table rather than three boxes
*/

/* ---------- consequences: what a lapse costs ---------- */
.consq { border-top:1px solid var(--line-strong); }
.consq-row {
  display:grid; grid-template-columns:44px 1fr minmax(0,1.15fr); gap:0 26px;
  padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.consq-num { grid-column:1; font-family:var(--mono); font-size:11px; color:var(--alert); letter-spacing:.08em; }
.consq-claim { grid-column:2; font-family:var(--serif); font-size:clamp(17px,1.8vw,21px);
  font-weight:700; color:var(--ink); margin:0; letter-spacing:-.015em; line-height:1.2; text-wrap:balance; }
.consq-detail { grid-column:3; font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.65; }
@media (max-width:760px) {
  .consq-row { grid-template-columns:32px 1fr; gap:6px 12px; padding:18px 0; }
  .consq-detail { grid-column:2; }
}

/* ---------- service index: compact, two columns, no boxes ---------- */
.svc { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; border-top:1px solid var(--line-strong); }
.svc-row { display:grid; grid-template-columns:1fr auto; gap:2px 16px;
  padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.svc-name { font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink); margin:0; }
.svc-desc { grid-column:1; font-size:13px; color:var(--ink-soft); margin:0; line-height:1.55; max-width:44ch; }
.svc-tag { grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ok); white-space:nowrap; }
@media (max-width:760px) { .svc { grid-template-columns:1fr; gap:0; } }

/* ---------- pricing as a comparison table ---------- */
.tiers { border-top:2px solid var(--ink); }
.tier {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(140px,auto);
  gap:8px 30px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start;
}
.tier.featured { background:linear-gradient(90deg,color-mix(in srgb, var(--panel) 85%, transparent),transparent 70%); }
.tier-id { grid-column:1; }
.tier-num { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.14em; }
.tier-name { font-family:var(--serif); font-size:clamp(21px,2.2vw,27px); font-weight:700;
  color:var(--ink); margin:5px 0 0; letter-spacing:-.018em; }
.tier-price { font-family:var(--mono); font-size:23px; color:var(--accent); margin:7px 0 0; }
.tier-price small { font-family:var(--sans); font-size:12px; color:var(--ink-faint); }
.tier-note { font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin:3px 0 0; letter-spacing:.04em; }
.tier-what { grid-column:2; }
.tier-what p { font-size:14px; color:var(--ink-soft); margin:0 0 10px; line-height:1.65; }
.tier-what ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.tier-what li { font-size:13px; color:var(--ink-soft); padding-left:18px; position:relative; }
.tier-what li::before { content:"—"; position:absolute; left:0; color:var(--accent); }
.tier-act { grid-column:3; justify-self:end; }
@media (max-width:860px) {
  .tier { grid-template-columns:1fr; gap:12px 0; padding:22px 0; }
  .tier-id, .tier-what, .tier-act { grid-column:1; justify-self:start; }
}

/* ---------- filing types: plain cards ---------- */
.ftype-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:16px;
}
.ftype-grid > .card { grid-column:span 2; }
.ftype-grid > .card:nth-child(n+4) { grid-column:span 3; }
.ftype-grid > .card .num { display:block; margin-bottom:10px; }
.ftype-grid > .card h3 {
  display:flex; align-items:flex-start; gap:10px;
}
.ftype-grid > .card h3 svg {
  width:22px; height:22px; flex:none; margin-top:3px;
  color:var(--accent); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:980px) {
  .ftype-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ftype-grid > .card, .ftype-grid > .card:nth-child(n+4) { grid-column:auto; }
  .ftype-grid > .card:last-child { grid-column:1 / -1; }
}
@media (max-width:620px) {
  .ftype-grid { grid-template-columns:1fr; }
  .ftype-grid > .card:last-child { grid-column:auto; }
}

/* ===== Header =====
   One fixed size. The bar does not resize on scroll — a nav that changes
   dimensions while you read is a distraction, not a feature. Only its ground
   firms up so content cannot show through. */

/* ===== FAQ accordion =====
   Questions become buttons controlling collapsible panels. Answers stay in the
   DOM so crawlers still read them; only their height collapses. */
.qa-h { margin:0; }
.qa-q { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; width:100%; text-align:left; background:transparent; border:0; padding:4px 0; cursor:pointer; font-family:var(--serif); font-size:clamp(17px,1.8vw,21px); font-weight:700; color:var(--ink); letter-spacing:-.012em; line-height:1.3; }
.qa-q:hover { color:var(--accent); }
.qa-mark { position:relative; flex:none; width:16px; height:16px; margin-top:5px; }
.qa-mark::before, .qa-mark::after { content:""; position:absolute; background:var(--accent); transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s ease; }
.qa-mark::before { left:0; top:7px; width:16px; height:1.5px; }
.qa-mark::after { left:7.25px; top:0; width:1.5px; height:16px; }
.qa-q[aria-expanded="true"] .qa-mark::after { transform:scaleY(0); opacity:0; }

.qa-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1); }
.qa-a[data-open="true"] { grid-template-rows:1fr; }
.qa-a-in { overflow:hidden; }
.qa-a-in > p { margin:10px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .qa-a, .qa-mark::before, .qa-mark::after { transition:none; }
}

/* ===== Hero window =====
   The site's one orchestrated moment. Rows populate in sequence, then the fire
   certification row flips out of compliance — the product catching something
   while you watch. Runs once; no loop. */
.hero-win .pv-row { opacity:0; transform:translateY(9px); transition:opacity .45s ease, transform .45s ease; }
.hero-win.go .pv-row { opacity:1; transform:none; }
.hero-win.go .pv-row:nth-child(2) { transition-delay:.20s }
.hero-win.go .pv-row:nth-child(3) { transition-delay:.31s }
.hero-win.go .pv-row:nth-child(4) { transition-delay:.42s }
.hero-win.go .pv-row:nth-child(5) { transition-delay:.53s }
.hero-win.go .pv-row:nth-child(6) { transition-delay:.64s }

/* the flip: .pv-now is hidden until the row is marked flipped.
   These carry .pv-row so they outrank `.pv-row .name small`, which would
   otherwise force the hidden <small> back to display:block. */
.hero-win .pv-row .pv-now { display:none; }
.hero-win .pv-row.flipped .pv-was { display:none; }
.hero-win .pv-row.flipped small.pv-now { display:block; }
.hero-win .pv-row.flipped .status .pv-now { display:inline; }
.hero-win .pv-row.flipped .status { color:var(--alert); background:var(--alert-soft); }
.hero-win .pv-row.flipped { animation:heroFlip .55s ease; }
@keyframes heroFlip {
  0%   { background:transparent; }
  35%  { background:var(--alert-soft); }
  100% { background:transparent; }
}
.hero-win .pv-row.flipped .status { animation:heroPulse 2.4s ease .55s 3; }
@keyframes heroPulse {
  0%,100% { box-shadow:0 0 0 0 var(--alert-soft); }
  50%     { box-shadow:0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-win .pv-row { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-win .pv-row.flipped, .hero-win .pv-row.flipped .status { animation:none !important; }
}

/* ===== Product panels =====
   The portal drawn in markup rather than claimed in prose. Same technique as
   the hero window: real interface chrome, plausible data, brand tokens only.
   A visitor should be able to see what they are buying before they sign up. */

/* --- a product panel: chrome + body --- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; transition:border-color .2s ease; }
.panel:hover { border-color:var(--accent); }
.panel-top { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--tile); }
.panel-dots { display:flex; gap:5px; flex:none; }
.panel-dots i { width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block; }
.panel-title { font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.04em; }
.panel-tag { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; }
.panel-body { padding:0; }

/* rows inside a panel */
.p-row { display:grid; grid-template-columns:1fr auto; gap:2px 14px; padding:12px 16px; border-bottom:1px solid var(--line); align-items:center; }
.p-row:last-child { border-bottom:0; }
.p-name { font-size:13.5px; color:var(--ink); font-weight:500; }
.p-sub { grid-column:1; font-size:11px; color:var(--ink-faint); font-family:var(--mono); }
.p-when { grid-column:2; grid-row:1 / span 2; font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-align:right; white-space:nowrap; }
.p-row.hot { background:linear-gradient(90deg,var(--alert-soft),transparent 62%); }
.p-row.hot .p-when { color:var(--alert); }

/* the blocker chain — connector lines between dependent items */
.chain { padding:18px 16px 20px; }
.chain-item { display:grid; grid-template-columns:26px 1fr; gap:0 12px; position:relative; padding-bottom:16px; }
.chain-item:last-child { padding-bottom:0; }
.chain-item::before { content:""; position:absolute; left:12.5px; top:22px; bottom:0; width:1.5px; background:var(--line-strong); }
.chain-item:last-child::before { display:none; }
.chain-dot { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--ink-faint); background:var(--surface); position:relative; z-index:1; }
.chain-item.block .chain-dot { border-color:var(--alert); color:var(--alert); }
.chain-item.block::before { background:var(--alert); opacity:.5; }
.chain-item.ok .chain-dot { border-color:var(--ok); color:var(--ok); }
.chain-t { font-size:13px; color:var(--ink); font-weight:500; }
.chain-s { font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.5; }
.chain-item.block .chain-t { color:var(--alert); }

/* a small stat row inside a panel */
.p-stats { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.p-stat { padding:14px 16px; border-right:1px solid var(--line); }
.p-stat:last-child { border-right:0; }
.p-stat b { display:block; font-family:var(--mono); font-size:19px; color:var(--ink); font-weight:500; }
.p-stat span { display:block; font-size:10.5px; color:var(--ink-faint); margin-top:3px; font-family:var(--mono); letter-spacing:.04em; }
.p-stat.alert b { color:var(--alert); }
.p-stat.ok b { color:var(--ok); }

/* two panels side by side, same width and height */
.panel-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.panel-pair .panel { display:flex; flex-direction:column; height:100%; }
.panel-pair .panel-body { flex:1; display:flex; flex-direction:column; }
.panel-pair .chain { flex:1; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:860px) { .panel-pair { grid-template-columns:1fr; gap:16px; } }

/* panels reveal as they scroll in */
.panel.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.panel.reveal.seen { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .panel.reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== Stage =====
   The page had no rhythm: eight full-width sections at similar heights on one
   flat ground. This gives it a spine — a dominant opening that fills the
   viewport, atmosphere behind the two moments that matter, and a quiet
   register everywhere else. Brand tokens only; no new colour is introduced. */

/* --- the hero fills the screen --- */
.stage {
  min-height:calc(100vh - var(--header-h));
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:40px 0 60px;
}
/* One ambient wash, not a gradient on everything. Built from the accent token
   so it moves with the theme.

   The stage clips to itself, and its top edge sits directly beneath the
   floating header. Anything still visible at that edge therefore ended in a
   straight horizontal line across the screen, which is what made the wash read
   as a shape pasted behind the page rather than as light falling on it. The
   box is aligned to the stage and masked so the wash has already reached zero
   by the time it arrives there. The left, right and bottom edges are the
   viewport's own, so clipping against those is invisible and needs no such
   treatment.

   The falloff is also broken into several stops rather than two: one long ramp
   this wide bands into visible rings on an 8-bit display. */
.stage::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:0; top:0; bottom:0; width:min(1100px,92vw);
  background:radial-gradient(ellipse 58% 76% at 64% 42%, var(--accent-soft) 0%, transparent 70%);
  background:radial-gradient(ellipse 58% 76% at 64% 42%,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 24%,
    color-mix(in srgb, var(--accent) 6%, transparent) 40%,
    color-mix(in srgb, var(--accent) 3%, transparent) 54%,
    color-mix(in srgb, var(--accent) 1%, transparent) 68%,
    transparent 84%);
  opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 24%);
}
.stage > * { position:relative; z-index:1; }

/* text left, window right — but the window is now the dominant object */
.stage-in { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,4vw,64px); align-items:center; width:100%; }
@media (max-width:980px) {
  .stage { min-height:0; padding:20px 0 44px; }
  .stage-in { grid-template-columns:1fr; gap:32px; }
  .stage::before { right:0; top:0; width:100%; }
}

/* the window sits flat on the page. A 3D tilt was rasterising the type
   off the pixel grid, which is what made the card look soft. */
.stage .hero-win {
  box-shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.42);
  transform:none;
}
.stage .hero-win .pv-top { padding:16px 20px; }
.stage .hero-win .pv-row { padding:16px 20px; }
.stage .hero-win .pv-row .name { font-size:14.5px; }
@media (max-width:980px) { .stage .hero-win { transform:none; } }

/* --- atmosphere behind the product panels, the page's second moment --- */
.lit-band { position:relative; overflow:hidden; }
.lit-band::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(900px,80vw); aspect-ratio:1; left:-18%; top:8%;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
  opacity:.7;
}
.lit-band > * { position:relative; z-index:1; }

/* --- a hairline that separates without a hard rule --- */
.band.soft-top { border-top:0; }
.band.soft-top::before {
  content:""; display:block; height:1px; margin:0 auto 40px; max-width:1120px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 22%,var(--line-strong) 78%,transparent);
}

/* ===== Live windows =====
   The windows played one cutscene and then sat there as pictures. A real
   interface has ambient life: a caret that walks the rows, a highlight that
   follows it, a scan that sweeps the surface, a pulse on whatever needs
   attention. Nothing loops fast enough to distract from reading.

   Every colour is an existing token. */

/* --- the surface: a faint sheen that sweeps once on arrival --- */
.win-live { position:relative; }
.win-live::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(104deg, transparent 34%, var(--accent-soft) 50%, transparent 66%);
  transform:translateX(-120%);
  opacity:0;
}
.win-live.go::after { animation:winSheen 1.5s cubic-bezier(.3,.7,.3,1) .35s both; }
@keyframes winSheen {
  0%   { transform:translateX(-120%); opacity:0; }
  22%  { opacity:.9; }
  100% { transform:translateX(120%); opacity:0; }
}

/* --- the walking highlight: whichever row the interface is "looking at" --- */
.win-live .pv-row, .win-live .p-row { position:relative; transition:background .5s ease; }
.win-live .pv-row.look, .win-live .p-row.look {
  background:linear-gradient(90deg, var(--accent-soft), transparent 72%);
}
/* a brass edge marks the looked-at row */
.win-live .pv-row::before, .win-live .p-row::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); opacity:0; transition:opacity .4s ease;
}
.win-live .pv-row.look::before, .win-live .p-row.look::before { opacity:1; }

/* --- the live clock in the window chrome --- */
.win-clock { font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.06em; }
.win-clock i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--ok);
  margin-right:6px; vertical-align:middle; animation:winBeat 2.4s ease-in-out infinite; }
@keyframes winBeat { 0%,100% { opacity:1; } 50% { opacity:.25; } }

/* --- attention pulse: the row that is out of compliance keeps breathing --- */
.win-live .pv-row.flipped .status,
.win-live .p-row.hot .p-when {
  animation:winAlert 3.2s ease-in-out infinite;
}
@keyframes winAlert { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* --- count-up figures in the stat strip --- */
.p-stat b { font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .win-live.go::after { animation:none; }
  .win-live .pv-row.look, .win-live .p-row.look { background:none; }
  .win-live .pv-row::before, .win-live .p-row::before { display:none; }
  .win-clock i, .win-live .pv-row.flipped .status, .win-live .p-row.hot .p-when { animation:none; }
}

/* ===== Hero sequence =====
   The window walks its own rows on a timer and loops; site.js drives it. It
   used to be pinned to the viewport inside a 320vh track with scroll position
   choosing the step, which charged the reader three screens of scrolling to
   watch a four-step sequence and pushed the rest of the page that much further
   down. The track is now an ordinary wrapper and the stage an ordinary
   section, so the hero costs one screen like everything else.

   The stage keeps its own min-height from the base rule, so it still fills the
   viewport. If JS never runs the window simply sits on its first state. */
.stage-track { position:relative; }

/* the caption that changes per step, under the hero copy */
.step-note { margin-top:22px; min-height:52px; position:relative; }
.step-note span {
  position:absolute; inset:0; opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
  font-family:var(--mono); font-size:12px; color:var(--ink-faint);
  line-height:1.6; letter-spacing:.01em;
}
.step-note span.on { opacity:1; transform:none; }
/* These captions cross-fade in one absolutely-positioned slot, so the no-JS
   fallback cannot be "show them all" — they would stack on top of each other.
   Show the first one instead: without the script the slot reads as a static
   caption rather than an empty box. */
html:not(.js-reveal) .step-note span:first-child { opacity:1; transform:none; }
@media print { .step-note span:first-child { opacity:1 !important; transform:none !important; } }
.step-note b { color:var(--accent); font-weight:400; }

@media (max-width:980px) {
  /* The captions cross-fade in a fixed-height slot on a wide screen. On a
     phone they wrap to two and three lines, so that slot would have to be
     tall enough for the longest of them and mostly empty the rest of the
     time. They stack and all read at once instead; the window still walks. */
  .step-note { min-height:0; }
  .step-note span { position:static; opacity:1; transform:none; display:block; }
  .step-note span + span { margin-top:6px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-note span { position:static; opacity:1; transform:none; display:block; }
}

/* ===== Constellation =====
   The Connectors page listed eleven sources and connected nothing. This is the
   page's argument as a picture: every City system and business tool wired into
   one hub, with data pulsing down the lines toward it.

   Drawn as inline SVG so the lines are real geometry, not decoration. Brand
   tokens only. */

.constel {
  position:relative;
  margin:0 auto;
  max-width:820px;
}
.constel svg {
  display:block; width:100%; height:auto; overflow:visible;
}

/* --- the wires --- */
.constel .wire {
  fill:none;
  stroke:var(--line-strong);
  stroke-width:1.15;
  stroke-dasharray:var(--len) var(--len);
  stroke-dashoffset:var(--len);
  transition:stroke .5s ease, opacity .5s ease;
  opacity:.88;
}
.constel.go .wire { animation:wireDraw 1.1s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes wireDraw { to { stroke-dashoffset:0; } }

/* each wire starts a beat after the one before */
.constel.go .wire:nth-of-type(1) { animation-delay:.10s }
.constel.go .wire:nth-of-type(2) { animation-delay:.18s }
.constel.go .wire:nth-of-type(3) { animation-delay:.26s }
.constel.go .wire:nth-of-type(4) { animation-delay:.34s }
.constel.go .wire:nth-of-type(5) { animation-delay:.42s }
.constel.go .wire:nth-of-type(6) { animation-delay:.50s }
.constel.go .wire:nth-of-type(7) { animation-delay:.58s }
.constel.go .wire:nth-of-type(8) { animation-delay:.66s }
.constel.go .wire:nth-of-type(9) { animation-delay:.74s }
.constel.go .wire:nth-of-type(10){ animation-delay:.82s }
.constel.go .wire:nth-of-type(11){ animation-delay:.90s }

/* --- the packet: a bright dot that travels the wire into the hub --- */
.constel .pulse {
  fill:var(--accent);
  opacity:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 44%, transparent));
}
.constel.go .pulse { animation:pulseRun 3.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pulseRun {
  0%      { opacity:0; }
  6%      { opacity:1; }
  62%     { opacity:1; }
  70%,100%{ opacity:0; }
}

/* --- source nodes --- */
.constel .node-g { opacity:0; transform-box:fill-box; transform-origin:center; }
.constel.go .node-g { animation:nodeIn .5s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes nodeIn { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:none; } }
.constel .node-plate {
  fill:var(--surface);
  stroke:var(--line-strong);
  stroke-width:1;
  filter:drop-shadow(0 12px 24px color-mix(in srgb, var(--ground) 40%, transparent));
}
.constel .node-lab { font-family:var(--mono); font-size:9px; fill:var(--ink-faint); letter-spacing:.04em; }

/* --- the hub --- */
.constel .hub-ring {
  fill:none;
  stroke:color-mix(in srgb, var(--accent) 78%, #f0d8a8);
  stroke-width:1.35;
  opacity:.44;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 18%, transparent));
}
.constel.go .hub-ring { animation:hubRing 3.4s ease-out infinite; }
@keyframes hubRing {
  0%   { r:34; opacity:.45; }
  70%  { r:62; opacity:0; }
  100% { r:62; opacity:0; }
}
.constel .hub-plate {
  fill:color-mix(in srgb, var(--accent) 92%, #f3d49f);
  stroke:color-mix(in srgb, var(--accent) 52%, #fff1d2);
  stroke-width:.8;
  filter:drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 22%, transparent));
}
.constel .hub-word {
  font-family:var(--serif);
  font-size:13px;
  font-weight:700;
  fill:var(--accent-ink);
  letter-spacing:.08em;
}

/* hovering a source lights its wire */
.constel .link:hover .wire {
  stroke:color-mix(in srgb, var(--accent) 72%, #f2d7a4);
  opacity:1;
}
.constel .link:hover .node-plate {
  stroke:var(--accent);
  filter:drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 16%, transparent));
}
.constel .link { cursor:default; }

@media (max-width:720px) {
  /* the graphic is geometry — below this width it stops being readable, so it
     is replaced by the roster alone rather than squeezed */
  .constel { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .constel .wire { stroke-dashoffset:0; animation:none !important; }
  .constel .node-g { opacity:1; animation:none !important; }
  .constel .pulse, .constel .hub-ring { display:none; }
}
/* labels now sit beside the real brand mark inside a wider plate */
.constel .node-lab {
  font-family:var(--mono);
  font-size:10.5px;
  fill:color-mix(in srgb, var(--ink-soft) 88%, #d8e0ea);
  letter-spacing:.03em;
}
.constel .node-soon { font-family:var(--mono); font-size:8.5px; fill:var(--warn); letter-spacing:.1em; }
.constel .link.coming .node-plate { stroke-dasharray:3 3; }
.constel .link.coming .node-g { opacity:.75; }
.constel .link:hover .node-lab { fill:var(--ink); }

/* ===== Navigation =====
   One floating pill, centred and sized to its own contents rather than spanning
   the viewport: mark, links, theme toggle and call to action all ride inside it.

   Motion here is deliberately small. The pill arrives once on load, the
   indicator tracks the cursor, and the surface solidifies when content passes
   beneath. Nothing loops and nothing bounces — the bar should read as
   engineered rather than decorated. Brand tokens only; no new colour. */

/* the header is only a centring rail — the pill is the visible element */
header.nav {
  display:flex; justify-content:center;
  background:transparent; backdrop-filter:none; border-bottom:0;
  padding:18px 16px;
  /* the gutters either side of the pill are empty, so let clicks fall through
     to the page rather than being swallowed by a full-width transparent bar */
  pointer-events:none;
}
header.nav.tight { background:transparent; }

.nav-in {
  pointer-events:auto;
  /* override .wrap — the pill is as wide as its contents, not the page grid */
  width:auto; max-width:100%; margin:0;
  display:inline-flex; align-items:center; justify-content:flex-start;
  gap:10px;
  height:64px;
  padding:0 10px 0 22px;
  border-radius:999px;

  /* The bar must stay legible over any content passing beneath it. 82% alpha
     at 14px blur still let text read through as a smear, so the blur is
     stronger and the ground is nearly opaque. color-mix keeps it on the
     --ground token, so it follows the theme. */
  background:var(--header-bg); /* fallback where color-mix is unsupported */
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(22px);
  -webkit-backdrop-filter:saturate(1.4) blur(22px);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 12px 34px rgba(0,0,0,.28);
  transform-origin:50% 50%;
  transition:transform .3s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
  /* `backwards`, not `both`: once it has played the element must fall back to
     its own transform so the scroll state below can still scale it */
  animation:nav-settle .55s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes nav-settle {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:none; }
}
header.nav.tight .nav-in {
  /* once content is passing underneath, drop the transparency entirely.
     Scale rather than height: a transform cannot reflow the page, so the
     bar cannot shove content around as it condenses. */
  background:var(--ground);
  border-color:var(--line-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.38);
  transform:scale(.985);
}

/* --- the mark, sized to sit inside a pill --- */
.nav .mark { width:116px; transition:opacity .2s ease; }
.nav-in > a:first-child { display:flex; align-items:center; flex:none; }
.nav-in > a:first-child:hover .mark { opacity:.75; }

/* --- links: a track with a sliding indicator behind them ---
   Every pixel of padding here widens the pill, which is what sets the drawer
   breakpoint below: seven links plus the mark and the call to action have to
   fit on one row above it. The breakpoint follows the spacing, not the
   reverse — cramping the links to hold a round number is the wrong trade. */
.nav-links { position:relative; gap:4px; flex:0 1 auto; min-width:0; }
.nav-links a {
  position:relative; z-index:1;
  padding:10px 15px; border-radius:999px;
  font-size:13.5px; font-weight:500; letter-spacing:.005em;
  color:var(--ink-soft); white-space:nowrap; transition:color .2s ease;
}
.nav-links a:hover { color:var(--ink); }
.nav-links a[aria-current="page"] { color:var(--accent); font-weight:600; }

/* the indicator itself — one element, moved by JS */
.nav-ind {
  position:absolute; z-index:0; top:50%; left:0; height:38px; width:0;
  margin-top:-19px; border-radius:999px;
  background:var(--accent-soft);
  border:1px solid transparent;
  opacity:0;
  transition:transform .34s cubic-bezier(.4,.5,.15,1), width .34s cubic-bezier(.4,.5,.15,1), opacity .2s ease, border-color .2s ease;
  pointer-events:none;
}
.nav-links.ind-on .nav-ind { opacity:1; }
.nav-links.ind-hover .nav-ind { border-color:var(--line-strong); }

/* a divider before the investor link — it is not a product page */
.nav-links .nav-sep {
  width:1px; height:18px; background:var(--line-strong); opacity:.6;
  margin:0 9px; flex:none; align-self:center;
}

/* --- the right cluster, fenced off from the links by a hairline --- */
.nav-cta { gap:8px; flex:none; position:relative; margin-left:6px; padding-left:15px; }
.nav-cta::before {
  content:""; position:absolute; left:0; top:50%; margin-top:-11px;
  width:1px; height:22px; background:var(--line);
}
.theme-toggle { width:38px; height:38px; border-radius:999px; border-color:transparent; background:var(--surface); }
.theme-toggle:hover { border-color:var(--accent); background:var(--accent-soft); }
.theme-toggle svg { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.theme-toggle:hover .ico-sun { transform:rotate(40deg); }
.nav-toggle { border-radius:999px; width:42px; height:38px; }
.nav-cta .btn { padding:12px 22px; font-size:12px; letter-spacing:.07em; }

/* The roomier links need more width than the 980px the drawer used to take
   over at, so it now starts earlier. The base stylesheet hides .nav-drawer
   above 980px with !important, which would strand the new band between the
   two breakpoints with no navigation at all — hence the explicit re-open. */
@media (max-width:1100px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .nav-cta { margin-left:0; padding-left:0; }
  .nav-cta::before { display:none; }
  /* With the links gone the pill would shrink-wrap to a ~390px island adrift in
     the middle of a wide viewport. It spans instead, capped so it never
     stretches into a thin band across a tablet. */
  .nav-in { width:100%; max-width:680px; justify-content:space-between; }
  .nav-drawer { inset:92px 0 0; }   /* clears the pill and its 18px rail */
}
@media (min-width:981px) and (max-width:1100px) {
  .nav-drawer.open { display:block !important; }
}

@media (max-width:980px) {
  :root { --header-h:82px; }
  header.nav { padding:12px 14px; }
  .nav-in { height:58px; padding:0 10px 0 16px; gap:8px; }
  .nav-ind, .nav-links .nav-sep { display:none; }
  .nav-drawer { inset:82px 0 0; }
}
@media (max-width:420px) {
  .nav .mark { width:98px; }
  .nav-cta { gap:5px; }
  .nav-cta .btn { padding:10px 15px; font-size:11px; letter-spacing:.05em; }
}
/* The mark, the toggle, the CTA and the burger stop fitting a 320px screen at
   the sizes above, so this is the one place the spacing has to give way. */
@media (max-width:360px) {
  header.nav { padding:10px; }
  .nav-in { padding:0 8px 0 12px; gap:6px; }
  .nav .mark { width:84px; }
  .nav-cta { gap:4px; }
  .nav-cta .btn { padding:9px 11px; font-size:10.5px; letter-spacing:.04em; }
  .theme-toggle { width:34px; height:34px; }
  .nav-toggle { width:36px; height:34px; }
}

/* The burger and the theme switch are painted at 34-38px because that is what
   fits the pill on a narrow phone (see the two blocks above). The TARGET does
   not have to match the paint: this centres an invisible 44x44 hit area on
   each, so a thumb gets the 44px of WCAG 2.5.5 / the Apple and Android
   guidance while the header keeps the size it was designed at. Nothing moves —
   the pseudo-element is absolutely positioned and paints nothing.

   Only below the burger band, where these are touch targets at all. */
@media (max-width:1040px) {
  .nav-toggle, .theme-toggle { position:relative; }
  .nav-toggle::after, .theme-toggle::after {
    content:"";
    position:absolute; top:50%; left:50%;
    width:44px; height:44px; min-width:100%; min-height:100%;
    transform:translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  header.nav, .nav-in, .nav-ind, .theme-toggle svg { transition:none; }
  .nav-in { animation:none; }
  header.nav.tight .nav-in { transform:none; }
}

/* ===== Homepage =====
   What stayed here after the rhythm, measure and section-head spacing were
   promoted to the site-wide rules above: the hero, and the handful of
   components that only this page uses. */

.home .sec-head { margin-bottom:clamp(26px,3.2vw,40px); }
.home .sec-head-wide { max-width:none; }

/* consequences: wide like the hero, but not a full-screen slab. The
   earlier pass filled the monitor; this is the same measure with the type
   and card height brought back down. */
.home .lapse .wrap {
  max-width:none; width:100%;
  padding-left:clamp(24px,4.5vw,80px); padding-right:clamp(24px,4.5vw,80px);
}
.home .lapse .sec-head h2 { font-size:clamp(24px,2.8vw,38px); max-width:22ch; }
.home .consq {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px);
  border-top:0;
}
.home .consq-row {
  display:flex; flex-direction:column; gap:14px; align-items:flex-start; justify-content:flex-start;
  min-height:clamp(180px,22vh,260px);
  padding:clamp(24px,2.6vw,40px) clamp(22px,2.2vw,36px);
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface);
  transition:
    opacity .66s cubic-bezier(.2,.7,.2,1),
    transform .66s cubic-bezier(.2,.7,.2,1),
    border-color .2s ease,
    background .2s ease;
}
.home .consq-row:hover { border-color:var(--accent); background:var(--panel); transform:translateY(-2px); }
.home .consq-row:hover .consq-claim { color:var(--accent); }
.home .consq-num { display:none; }
.home .consq-claim { font-size:clamp(18px,1.45vw,22px); margin:0; transition:color .2s ease; }
.home .consq-detail { max-width:none; font-size:clamp(14.5px,1.15vw,17px); line-height:1.55; }
.home .consq-foot { margin:10px 0 0; }

.home .assemble-band .wrap {
  max-width:none; width:100%;
  padding-left:clamp(24px,4.5vw,80px); padding-right:clamp(24px,4.5vw,80px);
}
.home .assemble-band .sec-head { margin-bottom:clamp(18px,2vw,28px); }
.home .assemble-band .sec-head h2 { font-size:clamp(26px,3vw,40px); max-width:none; margin-left:auto; margin-right:auto; }
.home .assemble-band .sec-head p {
  font-family:var(--serif); font-weight:700; font-variation-settings:'opsz' 96;
  font-size:clamp(26px,3vw,40px); color:var(--ink); line-height:1.15;
  max-width:none; margin:6px auto 0; letter-spacing:-.01em; text-wrap:balance;
}

/* --- hero type, lifted out of the markup ---
   These rules were style attributes on the h1, the lede, the button row and
   the accent span. They now also carry the opening screen's scale.

   At 45px in a 1200px column the hero used about a third of a desktop and
   left the rest empty, so the first thing a visitor saw looked like a page
   that had not finished loading. Everything below is sized against the
   viewport instead of a fixed pixel value, so the screen fills whatever it
   is opened on and still collapses cleanly on a phone. */
.home .stage-title {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(34px,4.5vw,72px); line-height:1.06; letter-spacing:-.022em;
  margin:clamp(18px,1.6vw,24px) 0 0;
}
.home .stage-title-em { display:block; color:var(--accent); }
.home .stage-lede {
  font-size:clamp(15.5px,1.5vw,21px); color:var(--ink-soft);
  margin:clamp(20px,1.8vw,26px) 0 0; max-width:44ch; line-height:1.55;
}
.home .stage-cta { margin-top:clamp(26px,2.6vw,38px); }
.home .stage-cta .btn { padding:clamp(13px,1.1vw,16px) clamp(26px,2.2vw,32px); font-size:clamp(12px,.95vw,13.5px); }
.home .stage .eyebrow { font-size:clamp(11.5px,.92vw,13px); }
.home .step-note span { font-size:clamp(12px,1vw,14px); }
.home .step-note { min-height:clamp(52px,5vw,64px); }

/* --- the opening screen ---
   The stage is the only section that should be measured against the screen
   rather than the page, so it takes the full viewport width it can get and
   spends its vertical space on content rather than padding. */
.home .stage { padding:clamp(20px,2.4vh,40px) 0 clamp(44px,5vh,72px); }
.home .stage-in { gap:clamp(30px,4vw,76px); }
/* the opening screen runs wider than the reading sections below it: it is two
   objects side by side, not a column of prose, so the measure that protects
   paragraphs would only strand it in margin on a large display */
.home .stage .wrap { max-width:min(1580px,92vw); }

/* The window is the other half of the screen, so it scales with it. Its five
   rows are what actually decide how much of the viewport the hero fills, so
   the row height is the lever, not the type. */
.home .stage .hero-win .pv-top { padding:clamp(12px,1.2vw,18px) clamp(16px,1.4vw,22px); }
.home .stage .hero-win .pv-top .t { font-size:clamp(14px,1.1vw,16px); }
.home .stage .hero-win .pv-row { padding:clamp(11px,1.3vw,18px) clamp(16px,1.4vw,22px); }
.home .stage .hero-win .pv-row .name { font-size:clamp(13px,1.05vw,15px); }
.home .stage .hero-win .pv-row .name small { font-size:10.5px; }
.home .stage .hero-win .status { font-size:10.5px; padding:3px 9px; }

/* The wash behind the hero covered the right third; at this scale it has to
   read as light across the whole opening screen, not a corner highlight. Only
   the width and the anchor change here — the shape, the stops and the mask that
   keeps it off the header all come from the base rule.

   Desktop only. Below 980px the stage is un-pinned and therefore position:
   static, so its overflow:hidden no longer clips an absolutely positioned
   pseudo-element — a wash wider than the viewport escapes and puts a
   horizontal scrollbar on the page. */
@media (min-width:981px) {
  .home .stage::before { width:min(1600px,118vw); right:-9%; opacity:.9; }
}

/* --- consequences: the claim column was a third of the row and half empty --- */
.home .consq-foot {
  color:var(--ink-faint); font-size:12.5px; margin:10px 0 0; font-family:var(--mono);
}

/* --- Section 8 block --- */
.home .split-title {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px,3.2vw,42px); margin:8px 0 0; text-wrap:balance;
}
.home .split-lede { color:var(--ink-soft); font-size:clamp(15.5px,1.25vw,18px); margin:16px 0 0; max-width:48ch; line-height:1.6; }
.home .split-note { color:var(--ink-faint); font-size:clamp(14px,1.1vw,15.5px); margin:16px 0 0; max-width:48ch; line-height:1.55; }
.home .split-note b { color:var(--ink); }

/* Shared wide measure for the lower homepage bands — same gutters as lapse
   and assemble so the page does not narrow mid-scroll. */
.home .s8-band .wrap,
.home .portal-band .wrap {
  max-width:none; width:100%;
  padding-left:clamp(24px,4.5vw,80px); padding-right:clamp(24px,4.5vw,80px);
}
.home .s8-band .split { gap:clamp(28px,4vw,56px); }
.home .s8-band .s8-cta { margin-top:clamp(22px,2.2vw,30px); }
.home .s8-band .tile {
  padding:clamp(22px,2.2vw,32px);
  border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease, opacity .75s cubic-bezier(.2,.7,.2,1);
}
.home .s8-band .tile:hover {
  border-color:var(--accent);
  background:var(--panel);
  box-shadow:0 0 0 1px var(--accent-soft), var(--shadow);
  transform:translateY(-2px);
}
.home .s8-band .tile.reveal:not(.seen):hover { transform:translateY(22px); }
.home .s8-band .step {
  opacity:0; transform:translateX(12px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.home .s8-band .tile.seen .step { opacity:1; transform:none; }
.home .s8-band .tile.seen .step:nth-child(1) { transition-delay:.08s; }
.home .s8-band .tile.seen .step:nth-child(2) { transition-delay:.16s; }
.home .s8-band .tile.seen .step:nth-child(3) { transition-delay:.24s; }
.home .s8-band .tile.seen .step:nth-child(4) { transition-delay:.32s; }
.home .s8-band .step { padding:clamp(14px,1.4vw,18px) 0; }
.home .s8-band .step h3 { transition:color .2s ease; }
.home .s8-band .tile:hover .step h3 { color:var(--accent); }

/* Portal panels: sharp chrome, gold hover language matching lapse cards */
.home .portal-band .panel-pair {
  max-width:1240px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  gap:clamp(28px,3.2vw,48px);
}
.home .portal-band .panel-top { padding:12px 16px; }
.home .portal-band .p-row { padding:11px 16px; }
.home .portal-band .p-stat { padding:12px 16px; }
.home .portal-band .p-stat b { font-size:18px; }
.home .portal-band .chain { padding:16px 16px 18px; }
.home .portal-band .chain-item { padding-bottom:14px; }
.home .portal-band .panel {
  border-radius:16px;
  transition:
    opacity .66s cubic-bezier(.2,.7,.2,1),
    transform .66s cubic-bezier(.2,.7,.2,1),
    border-color .2s ease,
    box-shadow .2s ease;
}
.home .portal-band .panel:hover {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-soft), var(--shadow);
  transform:translateY(-2px);
}
.home .portal-band .panel.reveal:not(.seen):hover { transform:translateY(18px); }
.home .portal-band .p-name,
.home .portal-band .chain-t,
.home .portal-band .panel-title { -webkit-font-smoothing:antialiased; }

/* --- closing call to action --- */
.home .cta-close.cta-wide { border-top:0; padding:10px 0; }
.home .cta-band {
  padding:clamp(44px,5vw,72px) clamp(24px,4vw,48px);
  border-radius:20px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.home .cta-band:hover {
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-soft), var(--shadow);
}
.home .cta-band h2 { font-size:clamp(26px,3.2vw,40px); }
.home .cta-band .cta-row { gap:14px; }
.home .cta-band .btn { padding:clamp(12px,1vw,15px) clamp(22px,2vw,30px); }

/* --- motion ---
   The reveal itself already exists; this only widens where it applies and
   staggers the pair of panels so they do not arrive as one slab. site.js
   adds .seen on intersection and skips straight to it under reduced motion. */
.home .reveal { transition-duration:.72s; }
.home .panel-pair .panel.d2 { transition-delay:.18s; }
.home .consq-row.reveal.d1 { transition-delay:.14s; }
.home .consq-row.reveal.d2 { transition-delay:.28s; }

/* Hero load entrance — first viewport, not scroll-triggered */
.home .stage-copy .eyebrow,
.home .stage-title,
.home .stage-lede,
.home .stage-cta,
.home .step-note {
  opacity:0; transform:translateY(16px);
  animation:home-enter .75s cubic-bezier(.2,.7,.2,1) both;
}
.home .stage-copy .eyebrow { animation-delay:.06s; }
.home .stage-title { animation-delay:.16s; }
.home .stage-lede { animation-delay:.3s; }
.home .stage-cta { animation-delay:.42s; }
.home .step-note { animation-delay:.54s; }
.home .stage .hero-win {
  opacity:0; transform:translateY(24px);
  animation:home-enter .85s cubic-bezier(.2,.7,.2,1) .28s forwards;
}
@keyframes home-enter {
  to { opacity:1; transform:none; }
}

@media (max-width:980px) {
  /* 20px left the eyebrow almost touching the floating pill */
  .home .stage { padding-top:34px; }
}
@media (max-width:860px) {
  .home .consq { grid-template-columns:1fr; }
  .home .consq-row { transform:none; min-height:0; }
  .home .s8-band .tile:hover,
  .home .portal-band .panel:hover { transform:none; }
  .home .cta-band .cta-row { flex-direction:column; align-items:stretch; }
  .home .cta-band .btn { text-align:center; width:100%; }
  .home .s8-band .step { transform:translateY(12px); }
}
@media (max-width:520px) {
  /* The two buttons cannot sit side by side at this width, and a wrapped row
     reads as an accident. Stacking them full-width makes it a decision, and
     gives both a full-width tap target. */
  .home .stage-cta { flex-direction:column; align-items:stretch; }
  .home .stage-cta .btn { text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  .home .stage-copy .eyebrow,
  .home .stage-title,
  .home .stage-lede,
  .home .stage-cta,
  .home .step-note,
  .home .stage .hero-win { opacity:1; transform:none; animation:none; }
  .home .s8-band .step { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== Inner pages =====
   Header, homepage hero, and the partners deck are frozen. Everything else
   shares one measure, one type scale, one card language, and the same
   restrained reveal the homepage already uses. Copy is not restated here. */

main .wrap { padding-left:clamp(20px,4vw,40px); padding-right:clamp(20px,4vw,40px); }

body:not(.home) .page-head {
  padding:clamp(56px,8vh,112px) 0 clamp(28px,3.2vw,52px);
}
body:not(.home) .page-head h1 {
  font-size:clamp(36px,5.2vw,68px); max-width:16ch; letter-spacing:-.022em;
}
body:not(.home) .page-head .lede {
  font-size:clamp(16px,1.55vw,20px); line-height:1.58; max-width:54ch; margin-top:18px;
}
body:not(.home) .page-head .breadcrumb,
body:not(.home) .page-head .eyebrow,
body:not(.home) .page-head h1,
body:not(.home) .page-head .lede {
  opacity:0;
  animation:page-head-in .72s cubic-bezier(.2,.7,.2,1) both;
}
body:not(.home) .page-head .breadcrumb { animation-delay:.04s; }
body:not(.home) .page-head .eyebrow { animation-delay:.12s; }
body:not(.home) .page-head h1 { animation-delay:.2s; }
body:not(.home) .page-head .lede { animation-delay:.36s; }
@keyframes page-head-in {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

.sec-head-row {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; max-width:none;
}
.sec-head-copy { max-width:64ch; }
.sec-head-wide { max-width:none; }

/* Underlined at rest, not only on hover. Brass against body ink is 2.08:1 —
   below the 3:1 that colour-only differentiation requires — and hover is not
   available to a touch or keyboard-only visitor before they commit. */
.accent-link { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:from-font; }
.accent-link:hover { text-decoration-thickness:2px; }
.warn-ink { color:var(--warn); }
.alert-ink { color:var(--alert); }
.ink { color:var(--ink); }
.mono-val { font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
.note-center { text-align:center; color:var(--ink-soft); font-size:13.5px; margin:22px 0 0; }
.note-faint { font-size:12.5px; color:var(--ink-faint); margin:14px 0 0; }
.split-copy h2, h2.split-copy { font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.4vw,30px); margin:8px 0 12px; }
.split-copy p, p.split-copy { color:var(--ink-soft); font-size:14px; margin:0; line-height:1.65; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.card-head h3 { margin:0; }
.callout-row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.callout-row h3 { margin-top:8px; }
section.band.cta-wide { padding:10px 0; }
.cta-wide .wrap {
  max-width:none; width:100%;
  padding:0 10px;
}
.callout-wide {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(48px,5vw,72px) clamp(28px,4vw,48px);
  border-radius:16px;
}
.callout-wide h3 {
  font-family:var(--serif);
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.15;
  max-width:22ch;
  margin:0;
  padding:0;
  text-wrap:balance;
}
.callout-wide p {
  color:var(--ink-soft);
  font-size:15px;
  margin:12px 0 24px;
}
.callout-wide .cta-row { justify-content:center; }
.callout-wide .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 24px;
  font-size:13px;
  line-height:1;
  box-sizing:border-box;
}
@media (max-width:520px) {
  .callout-wide .cta-row { width:100%; }
  .callout-wide .btn { width:100%; }
}

.cta-wide .cta-band {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--line-strong);
  padding:clamp(48px,5vw,72px) clamp(28px,4vw,48px);
  border-radius:16px;
}
.cta-wide .cta-band h2 {
  font-size:clamp(26px,3.2vw,40px);
  max-width:22ch;
  margin:0;
  text-wrap:balance;
}
.cta-wide .cta-band p { margin:12px 0 24px; font-size:15px; }
.cta-wide .cta-band .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 24px;
  font-size:13px;
  line-height:1;
  box-sizing:border-box;
}
.callout.center { text-align:center; }
.callout.center h3 { margin:10px 0 22px; }
.back-link { display:inline-block; margin-top:20px; color:var(--accent); font-size:13px; }
.back-link:hover { text-decoration:underline; text-underline-offset:3px; }

.card {
  border-radius:14px; padding:clamp(20px,2vw,28px);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover { border-color:var(--accent); background:var(--panel); transform:translateY(-2px); box-shadow:var(--shadow); }
.card:hover h3 { color:var(--accent); }
.card h3 { font-size:clamp(18px,1.6vw,22px); transition:color .2s ease; }

/* How It Works: six steps as a board, not a stacked list */
.steps-board {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
}
.steps-board .step {
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  padding:clamp(20px,2vw,26px); border:1px solid var(--line); border-radius:14px;
  background:var(--surface);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.steps-board .step:hover { border-color:var(--accent); background:var(--panel); transform:translateY(-2px); }
.steps-board .step:hover h4 { color:var(--accent); }
.steps-board .step h3 { margin:0; font-size:17px; transition:color .2s ease; }
.steps-board .step p { font-size:14px; line-height:1.55; }

.cta-band {
  padding:clamp(48px,5.5vw,80px) clamp(24px,4vw,48px);
  border-radius:20px;
}
.cta-band h2 { font-size:clamp(26px,3.2vw,40px); }

.stub { padding:clamp(80px,14vh,140px) 0 clamp(64px,8vh,96px); }
.stub h1 { font-size:clamp(32px,4.6vw,52px); }

.rg-open { border-top:0; padding-top:clamp(48px,7vh,88px); }
.rg-mast h1 { font-size:clamp(36px,5vw,64px); max-width:14ch; }
.rg-part { margin-top:clamp(40px,5vw,72px); }
.rg-row { padding:20px 8px; border-radius:10px; }
.coming-mark { color:var(--warn-text); font-weight:600; }

.qa-group { margin-bottom:clamp(28px,3.5vw,48px); }
.qa { padding:clamp(18px,2vw,26px) 0; }

.pl-note.idle { margin:0; color:var(--ink-soft); }

@media (max-width:980px) {
  .steps-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .steps-board { grid-template-columns:1fr; }
  .card:hover, .steps-board .step:hover, .home .consq-row:hover { transform:none; }
  .rg-row { padding-left:0; padding-right:0; }
  .rg-part-head { flex-wrap:wrap; }
  .rg-part-count { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.home) .page-head,
  body:not(.home) .page-head .breadcrumb,
  body:not(.home) .page-head .eyebrow,
  body:not(.home) .page-head h1,
  body:not(.home) .page-head .lede { animation:none; opacity:1; transform:none; }
}

.split-open {
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,56px);
  align-items:center;
}
.split-open__copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
}
.split-open h2.split-copy {
  font-size:clamp(32px,3.8vw,48px);
  margin:10px 0 18px;
  letter-spacing:-.018em;
  line-height:1.12;
}
.split-open p.split-copy {
  font-size:clamp(17.5px,1.5vw,21px);
  line-height:1.62;
  max-width:none;
  color:var(--ink-soft);
  margin:0;
}
.split-open .preview {
  width:100%;
  border-radius:16px;
}
.split-open .pv-top { padding:18px 24px; }
.split-open .pv-top .t { font-size:clamp(18px,1.55vw,23px); }
.split-open .pv-top .addr { font-size:13px; letter-spacing:.06em; }
.split-open .pv-row { padding:clamp(17px,1.7vw,24px) 24px; }
.split-open .pv-row .name { font-size:clamp(16px,1.3vw,18.5px); }
.split-open .pv-row .name small { font-size:13.5px; margin-top:3px; }
.split-open .mono-val { font-size:15px; color:var(--ink); }
.split-open .status { font-size:13px; padding:6px 13px; }
.split-open .warn-ink { font-size:16px; font-weight:600; }

.rl-matter {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(36px,4.5vw,64px) clamp(24px,3.2vw,52px);
}
.rl-matter__copy { width:100%; }
.rl-matter .k {
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
.rl-matter h2 {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(20px,2.4vw,34px); line-height:1.25;
  max-width:none; margin:14px auto 0;
  letter-spacing:-.018em; text-align:center;
}
.rl-chain {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  list-style:none;
  margin:48px auto 0; padding:0;
  width:100%; max-width:920px;
  text-align:center;
}
.rl-chain li {
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:0 18px;
  background:transparent; border:0; border-radius:0; min-height:0;
  transition:none;
}
.rl-chain li:not(:last-child)::after {
  content:"";
  position:absolute; top:16px; left:calc(50% + 22px);
  width:calc(100% - 28px); height:1.5px;
  background:var(--line-strong);
  pointer-events:none;
}
.rl-chain li:nth-child(2)::after { background:color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.rl-chain li:hover { transform:none; box-shadow:none; border-color:transparent; }
.rl-chain__idx {
  width:32px; height:32px; border-radius:999px;
  border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-soft); background:var(--surface); position:relative; z-index:1;
}
.rl-chain__label {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(17px,1.7vw,22px);
  color:var(--ink); line-height:1.25; letter-spacing:-.016em;
  max-width:13ch; text-wrap:balance;
}
.rl-chain .is-end { background:transparent; border:0; }
.rl-chain .is-end .rl-chain__idx {
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.rl-chain .is-end .rl-chain__label { color:var(--accent); }
.rl-chain .is-end:hover { background:transparent; border:0; }

.rl-related {
  width:100%;
  gap:16px;
}
.rl-related .deep-link {
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  border-radius:16px;
  padding:clamp(28px,2.8vw,40px) clamp(20px,2.2vw,28px);
  min-height:100%;
  transition:border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.rl-related .deep-link:hover { box-shadow:var(--shadow); }
.rl-related .t {
  font-family:var(--serif); font-size:clamp(18px,1.6vw,22px);
  font-weight:700; letter-spacing:-.014em; display:block;
  text-wrap:balance;
}
.rl-related .s {
  display:block; margin:10px auto 22px;
  max-width:22ch;
  font-size:clamp(14px,1.15vw,16px); line-height:1.5;
  color:var(--ink-soft);
}
.rl-open {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:auto; padding:12px 22px 12px 24px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--accent);
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  isolation:isolate;
  transition:
    color .22s ease,
    border-color .22s ease,
    transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s cubic-bezier(.22,.61,.36,1);
}
.rl-open::before {
  content:"";
  position:absolute; inset:0;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  z-index:-1;
}
.rl-open span {
  display:inline-block;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.rl-open:hover,
.rl-open:focus-visible {
  color:var(--accent-ink);
  transform:translateY(-2px);
  box-shadow:0 10px 22px var(--accent-soft);
}
.rl-open:hover::before,
.rl-open:focus-visible::before { transform:scaleX(1); }
.rl-open:hover span,
.rl-open:focus-visible span { transform:translateX(4px); }
.rl-open:active { transform:translateY(0); transition-duration:.1s; }

@media (max-width:860px) {
  .rl-matter { gap:28px; }
  .rl-matter h2 { font-size:clamp(22px,6vw,28px); }
  .rl-chain {
    grid-template-columns:1fr;
    max-width:36ch;
    margin-top:36px;
    text-align:left;
    gap:0;
  }
  .rl-chain li {
    display:grid; grid-template-columns:40px 1fr; gap:0 16px;
    align-items:center; padding:0 0 28px;
  }
  .rl-chain li:last-child { padding-bottom:0; }
  .rl-chain li:not(:last-child)::after {
    top:auto; left:15px; bottom:0; width:2px; height:calc(100% - 36px);
    background:var(--line-strong);
  }
  .rl-chain__label { max-width:none; }
  .rl-chain li:hover { transform:none; }
  .rl-related .deep-link:hover { transform:none; }
}