/* Exponic.com — site styles. Colour ONLY via var(--x-*) from tokens.css
 * (generated; zero hardcoded brand values here — greys/whites appear only as
 * token vars). Type/space per the v1 manual (§5–§6) with the ruled 12.5px
 * floor. Register: The Ledger, Exponic edition — light reading surfaces with
 * committed reversed-ink bands (~70/30), real tables, real footnote anchors.
 * No client JS anywhere; motion is state feedback only. */

/* ---------- fonts: self-hosted from this origin, both SIL OFL ----------
 * DESIGN PRINCIPLES v2 §2.1 — Schibsted Grotesk (display + text) and IBM Plex
 * Mono (evidence only: eyebrows, figure numerals, decision markers, chips).
 * Inter is gone: it supersedes manual §5.1 and closes open decision D-6.
 * No Google Fonts link — no visitor IP leaves this origin for a face. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--x-font-sans);
  font-size: var(--x-size-base);
  line-height: 1.65;
  color: var(--x-ink);
  background: var(--x-surface-000);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--x-base-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--x-ink); }
:focus-visible { outline: 3px solid var(--x-base-ui); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--x-surface-000); color: var(--x-ink); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* numerals are evidence; evidence aligns down a column */
table, .metric, .pm-kicker { font-variant-numeric: tabular-nums; }
/* Evidence face (§2.1) — labels and numerals that are read as data, never prose. */
.pm-kicker, .step-n, .door-kicker, .burger-group, .foot-head, .register-head, .vslot-tag, .foot-agate { font-family: var(--x-font-mono); font-weight: var(--x-weight-medium); }

/* ---------- type scale (v1 manual §5.2; display/h1 clamp fluidly) ---------- */
h1 { font-size: clamp(32px, 4.6vw, var(--x-size-4xl)); font-weight: var(--x-weight-extrabold); line-height: var(--x-leading-display); letter-spacing: var(--x-tracking-display); margin: 0 0 var(--x-space-4); text-wrap: balance; }
.display { font-size: clamp(36px, 5.4vw, var(--x-size-5xl)); line-height: var(--x-leading-tight); }
h2 { font-size: clamp(26px, 3.2vw, var(--x-size-3xl)); font-weight: var(--x-weight-extrabold); line-height: var(--x-leading-display); letter-spacing: var(--x-tracking-display); margin: 0 0 var(--x-space-4); text-wrap: balance; }
.h2-sm { font-size: var(--x-size-2xl); }
h3 { font-size: var(--x-size-2xl); font-weight: var(--x-weight-bold); line-height: 1.28; letter-spacing: var(--x-tracking-tight); margin: 0 0 var(--x-space-3); }
h4 { font-size: var(--x-size-xl); font-weight: var(--x-weight-bold); line-height: 1.32; letter-spacing: var(--x-tracking-tight); margin: 0 0 var(--x-space-2); }
p { margin: 0 0 var(--x-space-4); }
.lede { font-size: var(--x-size-lg); line-height: 1.65; color: var(--x-ink-secondary); }
.small { font-size: var(--x-size-sm); color: var(--x-ink-secondary); }
.eyebrow { font-family: var(--x-font-mono); font-size: var(--x-size-micro); font-weight: var(--x-weight-medium); letter-spacing: 0.13em; text-transform: uppercase; color: var(--x-base-ink); margin: 0 0 var(--x-space-3); }
.eyebrow-muted { color: var(--x-ink-muted); }
.prose { max-width: 680px; }
.prose p, .reading p { max-width: 68ch; }

/* ---------- layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.band { padding: var(--x-space-24) 0; background: var(--x-surface-000); }
.band-sunken { background: var(--x-surface-100); }
.band-tint { background: var(--x-delta-tint, var(--x-base-tint)); }
.band-ink { background: var(--x-surface-900); color: var(--x-ink-inverse); }
.band-ink .eyebrow { color: var(--x-ink-inverse-secondary); }
.band-ink a { color: var(--x-base-dark); }
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--x-ink-inverse); }
/* Reading text on the navy canvas takes the inverse secondary step — .lede and
   .small set the light-theme secondary ink on themselves, which sat unreadable
   on the dark band (seen rendered 2026-09-07). */
.band-ink .lede, .band-ink .small, .band-ink .close-body, .band-ink .prose { color: var(--x-ink-inverse-secondary); }
.mt-xl { margin-top: var(--x-space-8); }
@media (max-width: 767px) { .band { padding: var(--x-space-16) 0; } }

.two-col { display: grid; grid-template-columns: 1fr; gap: var(--x-space-6); align-items: start; }
.three-col { display: grid; grid-template-columns: 1fr; gap: var(--x-space-4); }
@media (min-width: 768px) {
  .two-col { grid-template-columns: 1fr 1.4fr; }
  .three-col { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- masthead ---------- */
.masthead { background: var(--x-surface-000); border-bottom: 1px solid var(--x-line); position: relative; z-index: 40; }
.nav { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-weight: 700; font-size: var(--x-size-xl); letter-spacing: -0.01em; color: var(--x-ink); }
.nav-links { display: none; align-items: center; gap: 16px; margin-left: auto; }
.nav-link { font-size: var(--x-size-sm); color: var(--x-ink-secondary); text-decoration: none; white-space: nowrap; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--x-ink); }
.nav-login { font-weight: 500; color: var(--x-ink); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (min-width: 760px) { .nav-actions { margin-left: 0; } }

.burger { display: block; position: relative; }
.burger > summary { list-style: none; cursor: pointer; padding: 6px; display: inline-flex; }
.burger > summary::-webkit-details-marker { display: none; }
.burger-icon { display: inline-flex; flex-direction: column; gap: 4px; }
.burger-icon span { width: 22px; height: 2px; background: var(--x-ink); border-radius: 2px; }
.burger-panel { position: absolute; right: 0; margin-top: 12px; width: min(88vw, 360px); background: var(--x-surface-000); border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); box-shadow: 0 8px 24px rgba(31,56,100,0.12); padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; z-index: 50; }
.burger-group { font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-ink-muted); margin-top: 12px; }
.burger-group:first-child { margin-top: 0; }
.burger-link { font-size: var(--x-size-base); color: var(--x-ink); text-decoration: none; padding: 7px 0; }
/* Three links and two actions fit well below the old 1140px threshold, so the
   burger now only appears where it is actually needed. */
@media (min-width: 760px) { .nav-links { display: flex; } .burger { display: none; } }

/* ---------- the services dropdown — v1's, back in the v3 masthead ---------- */
.has-drop { position: relative; }
.drop-caret { color: var(--x-ink-muted); }
.drop-panel { position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 340px; background: var(--x-surface-000); border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); box-shadow: 0 8px 24px rgba(31,56,100,0.10); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms, transform 160ms, visibility 160ms; z-index: 40; }
.has-drop:hover .drop-panel, .has-drop:focus-within .drop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.drop-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--x-radius-md); text-decoration: none; }
.drop-item:hover { background: var(--x-surface-100); }
.drop-dot { width: 8px; height: 8px; border-radius: 4px; margin-top: 7px; flex: none; background: var(--x-line-strong); }
.drop-name { display: block; font-size: var(--x-size-sm); font-weight: 600; color: var(--x-ink); }
.drop-sub { display: block; font-size: var(--x-size-caption); color: var(--x-ink-secondary); }
.drop-all { display: block; margin-top: 6px; padding: 9px 10px; border-top: 1px solid var(--x-line); font-size: var(--x-size-caption); font-weight: 600; color: var(--x-base-ink); text-decoration: none; }

/* ---------- CTAs — coral is the ONE commit; it never navigates ---------- */
.cta { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border-radius: var(--x-radius-md); font-weight: 600; font-size: var(--x-size-base); padding: 12px 22px; transition: background 160ms, color 160ms, border-color 160ms; }
.cta-sm { font-size: var(--x-size-sm); padding: 9px 16px; }
.cta-primary { background: var(--x-coral); color: var(--x-ink); }
.cta-primary:hover { background: var(--x-coral-deep); color: var(--x-surface-000); }
.cta-secondary { background: transparent; border: 1px solid var(--x-line-strong); color: var(--x-ink); font-weight: 500; }
.cta-secondary:hover { background: var(--x-surface-100); border-color: var(--x-base-ui); color: var(--x-ink); }
.cta-quiet { padding: 12px 4px; background: none; color: var(--x-base-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cta-quiet:hover { color: var(--x-ink); }
.band-ink .cta-quiet { color: var(--x-base-dark); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: var(--x-space-6); }
/* On reversed-ink bands the generic .band-ink a colour must never restyle a CTA:
   the commit stays coral + dark ink; the secondary goes inverse. */
.band-ink a.cta-primary { background: var(--x-coral); color: var(--x-ink); }
.band-ink a.cta-primary:hover { background: var(--x-coral-deep); color: var(--x-surface-000); }
.band-ink a.cta-secondary { color: var(--x-ink-inverse); border-color: var(--x-ink-inverse-secondary); }
.band-ink a.cta-secondary:hover { background: transparent; border-color: var(--x-ink-inverse); color: var(--x-ink-inverse); }

/* ---------- cards / steps ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--x-space-4); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } .cards-2 { grid-template-columns: repeat(2, 1fr); } .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1088px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--x-surface-000); border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); padding: var(--x-space-6); display: flex; flex-direction: column; gap: var(--x-space-2); }
.band-sunken .card { background: var(--x-surface-000); }
.card-title { font-weight: 600; font-size: var(--x-size-lg); color: var(--x-ink); }
.card-body { font-size: var(--x-size-sm); line-height: 1.6; color: var(--x-ink-secondary); margin: 0; }
a.card { text-decoration: none; transition: box-shadow 160ms, transform 160ms; }
a.card:hover { box-shadow: 0 8px 24px rgba(31,56,100,0.08); transform: translateY(-2px); }

.steps { display: grid; grid-template-columns: 1fr; gap: var(--x-space-4); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-top: 2px solid var(--x-line-strong); padding-top: var(--x-space-3); }
.step-n { display: block; font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.10em; }
.step-title { display: block; font-weight: 600; font-size: var(--x-size-lg); margin-top: 4px; }
.step-body { font-size: var(--x-size-sm); color: var(--x-ink-secondary); margin: 6px 0 0; max-width: 44ch; }
.maturity { margin-top: var(--x-space-8); font-size: var(--x-size-sm); color: var(--x-ink-secondary); max-width: 68ch; }

/* ---------- honest banner — trust work is set in READING type (law) ---------- */
.honest { border: 1px solid var(--x-line-strong); border-left: 4px solid var(--x-warn); border-radius: var(--x-radius-md); padding: var(--x-space-5) var(--x-space-6); background: var(--x-surface-000); max-width: 68ch; }
.honest-lead { font-weight: 600; font-size: var(--x-size-base); margin: 0 0 4px; }
.honest-body { font-size: var(--x-size-base); line-height: 1.6; color: var(--x-ink-secondary); margin: 0; }
.band-ink .honest { background: transparent; border-color: var(--x-ink-inverse-secondary); }
.band-ink .honest-lead { color: var(--x-ink-inverse); }
.band-ink .honest-body { color: var(--x-ink-inverse-secondary); }

/* ---------- the Ledger table ---------- */
.ltable-fig { margin: var(--x-space-8) 0 0; overflow-x: auto; }
.ltable { border-collapse: collapse; width: 100%; font-size: var(--x-size-sm); }
.ltable caption { text-align: left; font-size: var(--x-size-caption); color: var(--x-ink-secondary); padding-bottom: var(--x-space-2); caption-side: top; }
.ltable thead th { background: var(--x-surface-900); color: var(--x-ink-inverse); text-align: left; font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; }
.ltable tbody th, .ltable tbody td { border-bottom: 1px solid var(--x-line); padding: 12px; vertical-align: top; text-align: left; }
.ltable tbody th { font-weight: 600; color: var(--x-ink); }
.ltable tbody td { color: var(--x-ink-secondary); }
.ltable-note { font-size: var(--x-size-caption); color: var(--x-ink-secondary); margin-top: var(--x-space-2); max-width: 68ch; }

/* ---------- video slots (poster + drop-in-later) ---------- */
.vslot { margin: 0; }
.vslot-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vslot-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.vslot-play { width: 54px; height: 54px; border-radius: 27px; background: var(--x-surface-000); border: 1px solid var(--x-line-strong); display: flex; align-items: center; justify-content: center; font-size: var(--x-size-lg); color: var(--x-ink); }
.vslot-tag { position: absolute; bottom: 10px; right: 12px; font-size: var(--x-size-micro); color: var(--x-ink-secondary); background: var(--x-surface-000); border: 1px solid var(--x-line); border-radius: var(--x-radius-pill); padding: 3px 10px; }
.vslot-caption { font-size: var(--x-size-caption); color: var(--x-ink-secondary); margin-top: var(--x-space-2); }

/* ---------- figures: phase map / routing / loop / seam ---------- */
.pm { margin: var(--x-space-8) 0 0; }
.pm-caption { font-size: var(--x-size-caption); color: var(--x-ink-secondary); margin-bottom: var(--x-space-4); }
.pm-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
.pm-col { display: flex; }
.pm-plate { flex: 1; display: flex; flex-direction: column; gap: 6px; text-decoration: none; border: 1px solid; border-radius: var(--x-radius-md); padding: 14px 16px; transition: box-shadow 160ms, transform 160ms; }
.pm-plate:hover { box-shadow: 0 8px 24px rgba(31,56,100,0.08); transform: translateY(-1px); }
.pm-kicker { font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.10em; color: var(--x-ink-muted); }
.pm-name { font-weight: 600; font-size: var(--x-size-lg); }
.pm-sub { font-size: var(--x-size-caption); line-height: 1.5; color: var(--x-ink); }
.pm-inset { margin-top: auto; font-size: var(--x-size-micro); color: var(--x-ink-secondary); border-top: 1px solid var(--x-line-strong); padding-top: 8px; }
.pm-arrow { display: flex; align-items: center; justify-content: center; color: var(--x-ink-muted); font-size: var(--x-size-sm); }
.pm-arrow::before { content: "↓"; }
.pm-arrow-back::before { content: "↑"; }
@media (min-width: 980px) {
  .pm-grid { grid-template-columns: 1fr auto 1fr auto 1.12fr auto 1fr; gap: 12px; }
  .pm-arrow::before { content: "→"; }
  .pm-arrow-back::before { content: "←"; }
}

.route-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
.route-col { border: 1px solid; border-radius: var(--x-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.route-line { font-size: var(--x-size-sm); margin: 0; }
.route-foot { font-size: var(--x-size-caption); color: var(--x-ink-secondary); margin: auto 0 0; padding-top: 8px; }
.route-types { display: flex; flex-wrap: wrap; gap: 6px; }
.route-chip { font-size: var(--x-size-caption); border: 1px solid var(--x-market-ui); color: var(--x-market-ink); background: var(--x-surface-000); border-radius: var(--x-radius-sm); padding: 3px 8px; }
@media (min-width: 980px) { .route-grid { grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 12px; } }

.loop { margin: var(--x-space-8) 0 0; }
.loop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.loop-entry { font-size: var(--x-size-sm); color: var(--x-ink-secondary); border: 1px dashed var(--x-line-strong); border-radius: var(--x-radius-md); padding: 10px 14px; }
.loop-box { border: 1px solid var(--x-base-ui); background: var(--x-base-tint); color: var(--x-base-ink); border-radius: var(--x-radius-md); padding: 12px 18px; font-weight: 600; }
.loop-return { margin-top: 10px; font-size: var(--x-size-caption); color: var(--x-base-ink); border-top: 1px solid var(--x-base-ui); max-width: 560px; padding-top: 6px; }

.seam-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
.seam-side { border: 1px solid var(--x-line-strong); border-radius: var(--x-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; background: var(--x-surface-100); }
.seam-name { font-weight: 700; font-size: var(--x-size-xl); color: var(--x-ink); }
.seam-gate { display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--x-size-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-ink-muted); border-left: 1px dashed var(--x-line-strong); border-right: 1px dashed var(--x-line-strong); padding: 8px 14px; }
@media (min-width: 768px) { .seam-row { grid-template-columns: 1fr auto 1.1fr; } }

/* ---------- service page ---------- */
.svc-hero { display: grid; grid-template-columns: 1fr; gap: 28px; border-radius: var(--x-radius-xl); padding: var(--x-space-10); align-items: start; }
@media (min-width: 900px) { .svc-hero { grid-template-columns: 1.25fr 0.9fr; gap: 36px; } }
.svc-rule { display: block; width: 34px; height: 4px; border-radius: 2px; margin-bottom: 14px; }
.svc-promise { font-size: var(--x-size-xl); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; margin: 0 0 var(--x-space-3); }
.svc-sub { font-size: var(--x-size-base); color: var(--x-ink-secondary); max-width: 52ch; margin: 0; }
.svc-oneliner { font-size: var(--x-size-xl); font-weight: 600; letter-spacing: -0.01em; margin-top: var(--x-space-6); }
.svc-relationship { font-size: var(--x-size-xl); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; max-width: 30ch; }
.placeholder { font-size: var(--x-size-sm); color: var(--x-ink-secondary); border: 1px dashed var(--x-line-strong); border-radius: var(--x-radius-md); padding: 10px 14px; max-width: 62ch; }
.login-card { display: flex; flex-wrap: wrap; gap: var(--x-space-6); align-items: center; justify-content: space-between; background: var(--x-surface-000); border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); padding: var(--x-space-6); }
.login-card > div:first-child { flex: 1 1 380px; }
.close-col { max-width: 52ch; display: flex; flex-direction: column; gap: var(--x-space-4); }
.close-body { font-size: var(--x-size-base); line-height: 1.65; color: var(--x-ink-inverse-secondary); margin: 0; }
.close-signoff { font-size: var(--x-size-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--x-ink-inverse); margin: 0; }

/* ---------- long-form reading + margin notes (the Ledger apparatus) ---------- */
.reading { max-width: 680px; position: relative; }
.deck { column-gap: 48px; }
@media (min-width: 900px) { .deck { column-count: 2; column-rule: 1px solid var(--x-line); max-width: none; } .deck p { break-inside: avoid-column; } }
.nref a { text-decoration: none; font-weight: 600; color: var(--x-base-ink); padding: 0 2px; }
.mnote { font-size: var(--x-size-caption); line-height: 1.5; color: var(--x-ink-secondary); border-left: 2px solid var(--x-line-strong); padding-left: 12px; margin: var(--x-space-4) 0; max-width: 46ch; }
.mnote-n { font-weight: 600; text-decoration: none; color: var(--x-base-ink); }
.mnote-src { display: block; font-size: var(--x-size-micro); color: var(--x-ink-muted); margin-top: 2px; }
@media (min-width: 1180px) {
  .reading .mnote { float: right; clear: right; width: 260px; margin-right: -300px; margin-top: 4px; }
  .reading { margin-right: 300px; }
  .wrap > .reading { margin-right: auto; padding-right: 300px; max-width: 980px; }
}

/* ---------- note register + colophon ---------- */
.note-register { border-top: 2px solid var(--x-ink); padding-top: var(--x-space-6); margin-bottom: var(--x-space-10); }
.register-head { font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--x-ink-muted); margin: 0 0 var(--x-space-3); }
.note-register ol { margin: 0; padding-left: 20px; font-size: var(--x-size-caption); color: var(--x-ink-secondary); }
.note-register li { margin-bottom: 8px; max-width: 68ch; }
.nback { text-decoration: none; }

.colophon { background: var(--x-surface-100); border-top: 1px solid var(--x-line); padding: var(--x-space-16) 0 var(--x-space-10); margin-top: var(--x-space-16); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: var(--x-space-8); }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.foot-signature { font-weight: 600; margin: var(--x-space-3) 0 var(--x-space-2); }
.foot-oneliner { font-size: var(--x-size-sm); color: var(--x-ink-secondary); max-width: 40ch; }
.foot-col { display: flex; flex-direction: column; gap: 6px; }
.foot-head { font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--x-ink-muted); margin-bottom: 6px; }
.foot-link { font-size: var(--x-size-sm); color: var(--x-ink-secondary); text-decoration: none; }
.foot-link:hover { color: var(--x-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Trust work in reading type — 14px, never agate (the law, §7b.3). */
.foot-regulatory { border-top: 1px solid var(--x-line-strong); margin-top: var(--x-space-10); padding-top: var(--x-space-6); }
.foot-regulatory p { font-size: var(--x-size-sm); line-height: 1.6; color: var(--x-ink-secondary); max-width: 68ch; margin-bottom: var(--x-space-3); }
.foot-meta { margin-top: var(--x-space-6); }
.foot-meta p { font-size: var(--x-size-sm); color: var(--x-ink-secondary); margin-bottom: 6px; }
.foot-agate { font-size: var(--x-size-micro); color: var(--x-ink-muted); margin-top: var(--x-space-4); }

/* ---------- doors (homepage band C) ---------- */
.doors { display: grid; grid-template-columns: 1fr; gap: var(--x-space-4); }
@media (min-width: 820px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door { border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); padding: var(--x-space-6); background: var(--x-surface-000); display: flex; flex-direction: column; gap: var(--x-space-3); }
.door-kicker { font-size: var(--x-size-micro); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--x-ink-muted); }
.door-q { font-size: var(--x-size-lg); font-weight: 600; margin: 0; }
.door-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* ---------- misc ---------- */
.mono { font-family: var(--x-font-mono); font-size: var(--x-size-micro); color: var(--x-ink-secondary); }
.metric { font-size: var(--x-size-4xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
hr.rule { border: 0; border-top: 1px solid var(--x-line); margin: var(--x-space-8) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* standalone video slots are constrained — a slot is an aside, not a hero */
.vslot-solo { max-width: 780px; }

/* ════════════════════════════════════════════════════════════════════════════
   v2 — THE GROWTH CYCLE SPINE (platform · growth-cycle · about)
   Colour still resolves only through var(--x-*). The figure register is the one
   place a dark band matters: tokens.css re-points every --x-fig-* on .band-ink,
   so a figure there carries its own ink instead of inheriting the light theme's.
   ════════════════════════════════════════════════════════════════════════════ */

/* ---------- band head + hero ---------- */
.band-head { margin-bottom: var(--x-space-10); }
.band-head h2 { max-width: 22ch; }
.band-head .lede { margin: var(--x-space-4) 0 0; max-width: 68ch; }
.h1-tight { max-width: 17ch; }

.hero2 { display: grid; grid-template-columns: 1fr; gap: var(--x-space-10); align-items: start; }
@media (min-width: 900px) { .hero2 { grid-template-columns: 1.35fr 0.95fr; gap: 48px; } }
.hero2 h1 { margin-bottom: var(--x-space-5); }
.hero2 h1 em { font-style: normal; color: var(--x-base-ink); }
.hero2 .lede { max-width: 52ch; }
.hero2 .small { margin: var(--x-space-3) 0 0; max-width: 46ch; }
.kicker { display: inline-block; font-family: var(--x-font-mono); font-size: var(--x-size-micro); font-weight: var(--x-weight-medium); letter-spacing: 0.11em; text-transform: uppercase; color: var(--x-ink-muted); border: 1px solid var(--x-line-strong); border-radius: var(--x-radius-pill); padding: 4px 12px; margin: 0 0 var(--x-space-5); }

/* ---------- cards: the numeral is evidence, the title is prose ---------- */
.card-n { font-family: var(--x-font-mono); font-size: var(--x-size-micro); font-weight: var(--x-weight-medium); letter-spacing: 0.10em; color: var(--x-base-ink); }
.card-source { font-family: var(--x-font-mono); font-size: var(--x-size-micro); color: var(--x-ink-muted); margin: 0; }
.card-feature { border-color: var(--x-base-ui); box-shadow: inset 0 0 0 1px var(--x-base-ui); }
.band-ink .card { background: transparent; border-color: var(--x-line-inverse); }
.band-ink .card-title { color: var(--x-ink-inverse); }
.band-ink .card-body, .band-ink .card-source { color: var(--x-ink-inverse-secondary); }
.band-ink .card-n { color: var(--x-base-dark); }

/* ---------- the Triangle: a reading of the ring, never a caption ---------- */
.triangle { display: flex; flex-wrap: wrap; gap: var(--x-space-6); font-family: var(--x-font-mono); font-size: var(--x-size-micro); letter-spacing: 0.07em; text-transform: uppercase; color: var(--x-ink-muted); margin: var(--x-space-4) 0 0; }
.triangle b { color: var(--x-base-ink); font-weight: var(--x-weight-semibold); }
.band-ink .triangle { color: var(--x-ink-inverse-secondary); }
.band-ink .triangle b { color: var(--x-base-dark); }

/* ---------- the wide ruled table (the eight, and what they stand in for) ---------- */
.ltable-wide { min-width: 780px; }
.ltable-group th { background: var(--x-surface-100); font-family: var(--x-font-mono); font-size: var(--x-size-micro); font-weight: var(--x-weight-medium); letter-spacing: 0.09em; text-transform: uppercase; color: var(--x-ink-muted); padding: 8px 12px; }
.band-sunken .ltable-group th { background: var(--x-surface-000); }
.cell-name { display: block; font-weight: var(--x-weight-semibold); }
.cell-sub { display: block; font-weight: var(--x-weight-regular); font-size: var(--x-size-caption); color: var(--x-ink-muted); margin-top: 2px; }

/* ---------- gains: the box, and the sum that sizes it ---------- */
.gain .card-body { flex: 1; }
.formula { font-family: var(--x-font-mono); font-size: var(--x-size-caption); line-height: 1.6; color: var(--x-ink-muted); border-top: 1px dashed var(--x-line-strong); padding-top: var(--x-space-3); margin: var(--x-space-2) 0 0; }

/* ---------- status + decision chips (evidence face, 12.5px floor) ---------- */
.chip { display: inline-block; font-family: var(--x-font-mono); font-size: var(--x-size-micro); letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--x-radius-pill); border: 1px solid var(--x-line-strong); color: var(--x-ink-muted); }
.chip-dec, .chip-soon { color: var(--x-warn); border-color: var(--x-warn); }

/* ---------- the three rungs — drawn as a ladder you climb in order ---------- */
.ladder { display: grid; grid-template-columns: 1fr; border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); overflow: hidden; }
@media (min-width: 820px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
.rung { padding: var(--x-space-6); border-bottom: 1px solid var(--x-line); display: flex; flex-direction: column; gap: var(--x-space-2); }
.rung:last-child { border-bottom: 0; }
@media (min-width: 820px) { .rung { border-bottom: 0; border-right: 1px solid var(--x-line); } .rung:last-child { border-right: 0; } }
.rung-free { background: var(--x-base-tint); }
.rung .card-n { color: var(--x-ink-muted); text-transform: uppercase; }
.plan-price { margin: 0; }
.plan-list { list-style: none; margin: var(--x-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--x-space-2); font-size: var(--x-size-sm); color: var(--x-ink-secondary); }
.plan-list li { padding-left: 16px; position: relative; }
.plan-list li::before { content: "·"; position: absolute; left: 4px; color: var(--x-base-ink); font-weight: var(--x-weight-bold); }

/* ---------- straight answers — native disclosure, no client JS ---------- */
.faqs { max-width: 780px; }
.faq { border-bottom: 1px solid var(--x-line); }
.faq > summary { cursor: pointer; list-style: none; padding: var(--x-space-5) 0; font-weight: var(--x-weight-semibold); font-size: var(--x-size-base); display: flex; justify-content: space-between; gap: var(--x-space-5); align-items: baseline; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; font-family: var(--x-font-mono); color: var(--x-base-ink); font-weight: var(--x-weight-regular); flex: none; }
.faq[open] > summary::after { content: "–"; }
.faq p { padding-bottom: var(--x-space-5); color: var(--x-ink-secondary); max-width: 68ch; margin: 0; }

/* ---------- the eight workstreams — a disclosure each, all eight in the DOM -- */
.ws-list { display: flex; flex-direction: column; gap: var(--x-space-3); }
.ws { border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); padding: 0 var(--x-space-6) 0; background: var(--x-surface-000); }
.ws > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--x-space-4); padding: var(--x-space-5) 0; }
/* The workstream name is a real h3 so the eight are in the heading outline, not
   just in the tab order — but it inherits the summary's row, not a block. */
.ws-head { display: contents; margin: 0; font: inherit; letter-spacing: inherit; }
.ws > summary::-webkit-details-marker { display: none; }
.ws > summary::after { content: "+"; margin-left: auto; font-family: var(--x-font-mono); color: var(--x-base-ink); }
.ws[open] > summary::after { content: "–"; }
.ws[open] { border-color: var(--x-base-ui); }
.ws-n { font-family: var(--x-font-mono); font-size: var(--x-size-micro); font-weight: var(--x-weight-medium); color: var(--x-ink-muted); }
.ws-name { font-size: var(--x-size-xl); font-weight: var(--x-weight-bold); letter-spacing: var(--x-tracking-tight); }
.ws-arc { font-family: var(--x-font-mono); font-size: var(--x-size-micro); letter-spacing: 0.10em; text-transform: uppercase; color: var(--x-base-ink); }
.ws-panel { display: grid; grid-template-columns: 1fr; gap: var(--x-space-8); align-items: start; padding-top: var(--x-space-2); }
/* A grid item defaults to min-width:auto, so the nowrap .chain below would push
   the track — and the page — wider than a 375px viewport. The scroll belongs to
   the chain, not to the page. */
.ws-panel > * { min-width: 0; }
@media (min-width: 900px) { .ws-panel { grid-template-columns: 1.1fr 0.9fr; gap: 40px; } }
.ws-panel .lede { margin: 0 0 var(--x-space-4); }
.ws-panel .small { margin: 0; }
.ws-impact { font-size: var(--x-size-lg); font-weight: var(--x-weight-semibold); line-height: 1.4; letter-spacing: var(--x-tracking-tight); margin: var(--x-space-5) 0 0; }
.ws-moves-head { margin: var(--x-space-8) 0 var(--x-space-4); }
.ws > .moves:last-child, .ws-moves-head + .moves { margin-bottom: var(--x-space-6); }

.chain { font-family: var(--x-font-mono); font-size: var(--x-size-caption); color: var(--x-ink-muted); border: 1px dashed var(--x-line-strong); border-radius: var(--x-radius-md); padding: 12px 16px; margin: var(--x-space-4) 0 0; overflow-x: auto; white-space: nowrap; }
.illus { border-left: 3px solid var(--x-base-ui); padding: 2px 0 2px var(--x-space-4); margin: var(--x-space-5) 0 0; }
.illus-lbl { display: block; font-family: var(--x-font-mono); font-size: var(--x-size-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--x-ink-muted); margin-bottom: 4px; }
/* Manual §5.3: never italics for emphasis — the weight carries it. */
.illus p { font-size: var(--x-size-sm); font-weight: var(--x-weight-medium); color: var(--x-ink-secondary); margin: 0; max-width: 46ch; }

.compounds { border: 1px solid var(--x-base-ui); border-radius: var(--x-radius-lg); padding: var(--x-space-5); background: var(--x-base-tint); }
.compounds-lbl { display: block; font-family: var(--x-font-mono); font-size: var(--x-size-micro); letter-spacing: 0.10em; text-transform: uppercase; color: var(--x-base-ink); margin-bottom: 8px; }
.compounds-what { font-size: var(--x-size-lg); font-weight: var(--x-weight-bold); letter-spacing: var(--x-tracking-tight); margin: 0 0 var(--x-space-3); }
.compounds .card-body { color: var(--x-ink); }

/* ---------- the eight moves — a row is a leaf: two levels, one clause ---------- */
.moves { display: flex; flex-direction: column; border: 1px solid var(--x-line); border-radius: var(--x-radius-lg); overflow: hidden; margin: var(--x-space-6) 0 0; }
.move { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--x-line); font-size: var(--x-size-sm); }
@media (min-width: 640px) { .move { grid-template-columns: 128px 1fr; gap: var(--x-space-4); } }
.move:last-child { border-bottom: 0; }
.move-k { font-family: var(--x-font-mono); font-size: var(--x-size-caption); color: var(--x-base-ink); letter-spacing: 0.04em; }
.move-tag { display: block; color: var(--x-ink-muted); }
.move-gate .move-tag { color: var(--x-warn); }
.move p { color: var(--x-ink-secondary); margin: 0; }
.move-gate { background: var(--x-surface-100); }
.move-gate .move-k { color: var(--x-warn); }
.band-sunken .move-gate { background: var(--x-surface-000); }

/* ---------- the zeros, drawn rather than hidden (the honesty pattern) ---------- */
.zeros { display: flex; gap: var(--x-space-5); flex-wrap: wrap; margin: 0 0 var(--x-space-6); }
.zero { border: 1px solid var(--x-ink-inverse-secondary); border-radius: var(--x-radius-lg); padding: var(--x-space-4) var(--x-space-6); min-width: 176px; }
.zero-v { display: block; font-family: var(--x-font-mono); font-size: var(--x-size-3xl); font-weight: var(--x-weight-semibold); line-height: 1; color: var(--x-ink-inverse); font-variant-numeric: tabular-nums; }
.zero-l { display: block; font-family: var(--x-font-mono); font-size: var(--x-size-micro); letter-spacing: 0.10em; text-transform: uppercase; color: var(--x-ink-inverse-secondary); margin-top: 8px; }

/* ---------- the instruments ------------------------------------------------
   The panel is its own scroll container, so a wide figure never scrolls the
   page. The caption sits OUTSIDE the panel, below it, inside the <figure>
   (§7.0.3). SVG label sizes below are drawing units inside a scaled viewBox —
   figure geometry, not page typography, and deliberately not tokenised. */
.fig { margin: var(--x-space-8) 0 0; }
.fig-panel { position: relative; border: 1px solid var(--x-fig-edge); border-radius: var(--x-radius-xl); background: var(--x-fig-panel); padding: 32px 24px 24px; overflow-x: auto; }
.fig-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--x-fig-convert); border-radius: var(--x-radius-xl) var(--x-radius-xl) 0 0; }
.fig-panel svg { display: block; width: 100%; height: auto; min-width: 520px; max-width: 860px; margin: 0 auto; }
.fig-cap { font-size: var(--x-size-caption); line-height: 1.55; color: var(--x-ink-secondary); margin: var(--x-space-4) auto 0; max-width: 68ch; text-align: center; }
.band-ink .fig-cap { color: var(--x-ink-inverse-secondary); }
.fig text { font-family: var(--x-font-sans); fill: var(--x-fig-ink); }
.fig .lbl { font-size: 12.5px; font-weight: 500; }
.fig .sub { font-size: 11.5px; fill: var(--x-fig-soft); font-weight: 500; }
.fig .big { font-size: 15px; font-weight: 600; }
/* .ser and .hubeyb are the two labels the inherited figures set smallest. At the
   panel's own max width they rendered at 10.0px and 11.5px — under the site's
   12.5px floor, which §4.4 says to check in RENDERED pixels, not authored ones.
   .ser moves to the sans face (narrower per character, so it still clears the
   60-unit serpentine box without touching Kollied's geometry) and both are
   sized to land at or above 12.5px rendered. */
.fig .ser { font-size: 9.5px; font-weight: 500; letter-spacing: 0.01em; }
.fig .eyb { font-family: var(--x-font-mono); font-size: 10px; fill: var(--x-fig-soft); letter-spacing: 0.11em; }
.fig .amp { font-family: var(--x-font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--x-fig-convert); }
.fig .hubeyb { font-family: var(--x-font-mono); font-size: 9px; letter-spacing: 0.07em; fill: var(--x-fig-soft); }
.fig .hub { font-size: 13.5px; font-weight: 800; }
.fig .rnum { font-family: var(--x-font-mono); font-size: 10px; font-weight: 700; }
.fig .rname { font-size: 15px; font-weight: 700; }
.fig .leg { font-size: 13px; font-weight: 700; }
.fig .legn { font-family: var(--x-font-mono); font-size: 10.5px; fill: var(--x-fig-soft); }
.fig .xnum { font-family: var(--x-font-mono); font-size: 7.5px; font-weight: 700; }
.fig .xkey { font-family: var(--x-font-mono); font-size: 8.5px; letter-spacing: 0.02em; fill: var(--x-fig-soft); }
.fig .scname { font-size: 11px; font-weight: 700; }
.fig .scsub { font-family: var(--x-font-mono); font-size: 8px; letter-spacing: 0.04em; fill: var(--x-fig-soft); }

/* ---------- v3: a workstream's ring beside its moves; the position dot ---------- */
.ws-cycle { display: grid; grid-template-columns: 1fr; gap: var(--x-space-6); align-items: start; margin-bottom: var(--x-space-6); }
.ws-cycle > * { min-width: 0; }
.ws-cycle .fig { margin: 0; }
.ws-cycle .fig-panel svg { min-width: 0; }
.ws-cycle .moves { margin: 0; }
@media (min-width: 960px) { .ws-cycle { grid-template-columns: 0.95fr 1.05fr; gap: var(--x-space-8); } }
.ws-mini { flex: none; align-self: center; }

/* ---------- v3: the plan door and the lead form — Kollied's close ---------- */
.plan-door { display: inline-block; margin-top: var(--x-space-3); font-size: var(--x-size-sm); font-weight: 600; color: var(--x-base-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plan-door:hover { color: var(--x-ink); }
.plan-price { font-family: var(--x-font-mono); font-size: var(--x-size-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-warn); margin: 0; }
.lead { max-width: 780px; }
.lead-grid { display: grid; grid-template-columns: 1fr; gap: var(--x-space-4); }
@media (min-width: 768px) { .lead-grid { grid-template-columns: repeat(3, 1fr); } }
.lead label { display: flex; flex-direction: column; gap: 6px; font-size: var(--x-size-caption); font-weight: 600; color: var(--x-ink-secondary); }
.lead input { font: inherit; font-size: var(--x-size-base); color: var(--x-ink); background: var(--x-surface-000); border: 1px solid var(--x-line-strong); border-radius: var(--x-radius-md); padding: 10px 12px; min-width: 0; }
.lead input:focus { outline: 2px solid var(--x-base-ui); outline-offset: 1px; border-color: var(--x-base-ui); }
.lead button.cta { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* ---------- the language switch — EN · NO, mono, quiet; never a CTA ---------- */
.lang { display: inline-flex; align-items: center; gap: 6px; font-family: var(--x-font-mono); font-size: var(--x-size-caption); letter-spacing: 0.06em; margin-right: var(--x-space-2); }
.lang-on { color: var(--x-ink); font-weight: 600; }
.lang-off { color: var(--x-ink-secondary); text-decoration: none; }
.lang-off:hover { color: var(--x-base-ink); text-decoration: underline; }
.lang-sep { color: var(--x-line-strong); }