/* ============================================================
   KYE Protocol™ public-site stylesheet
   ============================================================
   Loaded by every page in public/site/. The browser receives one
   stylesheet (styles.css) with @imports pulling foundation files
   first, then the historical §FINAL-1..§FINAL-42 cascade in
   document order. The historical layering is documented in
   public/site/DESIGN-AUDIT.md §3.

   Load order (cascade matters):

     1. assets/css/tokens.css   — §TOKENS design-token contract
                                   (colour / type / spacing / radius /
                                   shadow / motion / layout / z-index
                                   for light + dark)
     2. assets/css/fonts.css    — @font-face + Material Symbols gate

     3. (this file, below)      — palette baseline + §FINAL-1..§FINAL-42
                                   topical patches in cascade order

   Future modular extractions (P2 in DESIGN-AUDIT.md):
     • assets/css/base.css       — body / typography / prose / links
     • assets/css/components/*   — top-bar, footer, sections, cards,
                                   pills, modal, code, tables,
                                   timelines, forms, badges
     • assets/css/pages/*        — whitepaper, legal, sectors

   Don't reorder rules in the historical block without checking
   the cascade — many §FINAL-* patches depend on later !important
   overrides to defeat earlier ones (documented in DESIGN-AUDIT
   §3 "Known cascade conflicts").
   ============================================================ */
@import url("./assets/css/tokens.css");
@import url("./assets/css/fonts.css");

/* TABLE OF CONTENTS — historical cascade
   §PALETTE       enterprise / protocol-grade colour baseline
   §FINAL-1..2    palette + diagram + table unification
   §FINAL-3       typographic scale (definitive)
   §FINAL-4       focus-visible accessibility
   §FINAL-5       mobile responsive polish
   §FINAL-6       universal typographic enforcement
   §FINAL-7       comparison table inner consistency
   §FINAL-8       mega-menu nav + section accordion
   §FINAL-9       Google-aligned colour palette
   §FINAL-10      clean / modern / neat pass
   §FINAL-11      native <details>/<summary> layout
   §FINAL-12      universal design tokens + dark-mode contrast
   §FINAL-13      scroll-to-top glass effect
   §FINAL-14      kill residual blue
   §FINAL-15      Material top app bar + drawer + stepper
   §FINAL-16..23  ladder of palette / accent / icon polish passes
   §FINAL-24      brand-mark contrast + theme-toggle visibility
   §FINAL-25      §authority-finality comparison table
   §FINAL-26      semantic code-snippet colour palette
   §FINAL-27      brand-mark bulletproof + sector colour pack
   §FINAL-28      af-diagram (BEFORE→AFTER hero) + who-stories
                  (editorial magazine spread)
   §FINAL-29      whitepaper chrome (icons / pager / indicator) +
                  per-tab nav icon colours
   §FINAL-30      dark-mode readability emergency fixes
   §FINAL-31..32  code-snippet categories landing-side + extended
   §FINAL-33      REVERTED (full-bleed dark band)
   §FINAL-34      mobile dark-mode visibility + sector overflow +
                  per-section accent rails
   §FINAL-35..36  defeat legacy !important grey + framework badges
   §FINAL-37      modal accessibility + per-section variant chrome
   §FINAL-38      above/below-#who chrome split (later removed by
                  §FINAL-39)
   §FINAL-39      KILLED universal collapsible — one consistent
                  section header
   §FINAL-40      10-item punch list + universal-consistency push
   §FINAL-41      ps-card mobile fonts, KYA contrast, capability-
                  table fonts, horizontal-frameworks badges
   §FINAL-42      .fwk-list pre-hydration plain-text fallback
   ============================================================ */

/* ============================================================
   ENTERPRISE / PROTOCOL-GRADE PALETTE — defined at the top so it
   wins the cascade. Marketing gradients, glass blur, and rainbow
   stat numbers are explicitly disabled in §END of file.
   ============================================================ */

:root {
  /* Modern light theme: near-white + soft pastel mesh + clean surfaces */
  --bg: #fcfcfd;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: rgba(248, 249, 252, 0.92);
  --surface-3: #f1f3f9;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --line-soft: rgba(15, 23, 42, 0.04);
  --text: #0b0f1c;
  --text-muted: #555a72;
  --text-dim: #8993b0;
  /* Note: this --accent is the *fallback* before the cascade. The
   * effective shipped accent is indigo #6366f1 (set by the harmonised-
   * with-diagrams rule near line 3286). Several pages reference
   * --accent-ink #4338ca for prose anchors. */
  --accent: #6366f1;          /* indigo-500 — matches diagrams */
  --accent-2: #818cf8;        /* indigo-400 */
  --accent-ink: #4338ca;      /* indigo-700 — prose anchor color */
  --accent-line: rgba(99, 102, 241, 0.30); /* indigo-500 @ 30% */
  --accent-soft: rgba(99, 102, 241, 0.10);
  --accent-grad: linear-gradient(120deg, #ec4899 0%, #6366f1 30%, #6366f1 55%, #06b6d4 80%, #10b981 100%);
  --info: #0ea5e9;            /* sky-500 */
  --info-soft: rgba(14, 165, 233, 0.10);
  --info-line: rgba(14, 165, 233, 0.22);
  --success: #059669;         /* emerald-600 */
  --success-soft: rgba(5, 150, 105, 0.10);
  --success-line: rgba(5, 150, 105, 0.22);
  --warning: #d97706;         /* amber-600 */
  --warning-soft: rgba(217, 119, 6, 0.10);
  --warning-line: rgba(217, 119, 6, 0.22);
  --danger: #e11d48;          /* rose-600 */
  --danger-soft: rgba(225, 29, 72, 0.10);
  --danger-line: rgba(225, 29, 72, 0.22);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);
  --shadow-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --shadow-2: 0 8px 24px -10px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
  --shadow-3: 0 24px 56px -20px rgba(99,102,241,.25), 0 4px 12px rgba(15,23,42,.08);
  --glass-blur: saturate(180%) blur(18px);
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 18px;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  margin: 0;
  position: relative;
  min-height: 100vh;
}
/* Ambient pastel gradient mesh sitting behind the whole page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 8% -10%,  rgba(168, 85, 247, 0.18), transparent 65%),
    radial-gradient(700px 500px at 92% 12%,  rgba(14, 165, 233, 0.16), transparent 60%),
    radial-gradient(800px 600px at 50% 68%,  rgba(236, 72, 153, 0.10), transparent 65%),
    radial-gradient(900px 500px at 0% 100%,  rgba(16, 185, 129, 0.10), transparent 65%);
  filter: saturate(140%);
}
::selection { background: rgba(99, 102, 241, 0.18); color: var(--text); }

/* === Accessibility primitives === */
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 8px;
  font-weight: 600; font-size: var(--type-14); z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 12px; outline: 3px solid var(--accent); outline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .nav-cta:focus-visible {
  outline-offset: 3px;
}
.urn-input:focus-visible, .vocab-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* Visually hidden but read by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === Base typography + anchors ===
 * Single source of truth for prose link styling. Without this rule,
 * .biz-list / .lede / orphan <p> links fell back to browser-default
 * blue-underline because no global a{} rule existed. */
a {
  color: var(--accent-ink, #4338ca);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent, #6366f1);
  text-underline-offset: 2px;
}
.section p a, .section li a, .lede a, .biz-list li a {
  border-bottom: 1px solid var(--accent-line, rgba(99,102,241,0.30));
}
.section p a:hover, .section li a:hover,
.lede a:hover, .biz-list li a:hover {
  border-bottom-color: var(--accent, #6366f1);
}
/* Btn / pill / card links opt out — they have their own visual */
a.btn, a.tb-link, a.tb-cta, a.cn-pill, a.prim-card,
a.brand, a.skip-link, a.scroll-top,
.footer a, .top-bar a, .top-bar-drawer a {
  border-bottom: 0 !important;
}
.footer a, .top-bar a, .top-bar-drawer a { text-decoration: none; }

/* === Layout primitives === */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .container { padding: 0 16px; } }
.section { padding: 80px 0; border-top: 0; position: relative; z-index: 1; isolation: isolate; }
.section + .section { border-top: 1px solid var(--line-soft, var(--line)); }
@media (max-width: 900px) { .section { padding: 64px 0; } }
@media (max-width: 600px) { .section { padding: 48px 0; } }
@media (max-width: 400px) { .h-section { font-size: var(--type-28); } .lede { font-size: var(--type-14); } }
.section.alt {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 100%);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.eyebrow {
  font-size: var(--type-11); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600;
}
.h-section { font-size: var(--type-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 8px 0 12px; }
.h-section .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--text-muted); font-size: var(--type-16); max-width: 680px; line-height: 1.55; }

/* === Top nav === */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.brand { display: flex; flex-direction: row !important; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -0.01em; flex-shrink: 0; white-space: nowrap; }
.brand-name { white-space: nowrap !important; flex-shrink: 0; }
@media (max-width: 480px) { .brand { gap: 8px; font-size: var(--type-14); } .brand-mark { width: 28px; height: 28px; } }
.brand-mark {
  width: auto; height: 32px; min-width: 32px;
  padding: 0 10px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--kye-color-brand, #6366f1) 0%, var(--kye-color-brand-2, #4338ca) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-2);
  color: #fff;
  font-weight: 800;
  font-size: var(--type-14);
  letter-spacing: 0.04em;
  line-height: 1;
}
.brand-mark svg { color: white; }
.brand-mark--wordmark { font-family: var(--font-display, var(--font-ui)); white-space: nowrap; }
.nav-links { display: flex; gap: 22px; align-items: center; font-size: var(--type-14); }
.nav-links a { color: var(--text-muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 7px 14px; border-radius: 7px;
  background: var(--accent); color: white !important;
  font-weight: 500; box-shadow: var(--shadow-1);
}
.nav-cta:hover { background: var(--accent-2); }

/* Progressive disclosure of nav links as the viewport narrows.
 * Order of priority (kept until the last possible breakpoint): GitHub CTA →
 * Whitepaper → FAQ → Compare → How it works → Discussions → Vocabulary →
 * Evolution → Why. Stay readable from 1180 down to 320. */
@media (max-width: 1100px) { .nav-links a[href*="Discussions"] { display: none; } }
@media (max-width: 1000px) { .nav-links a[href="#evolution"] { display: none; } }
@media (max-width: 900px)  { .nav-links a[href="#cmp"], .nav-links a[href="#faq"] { display: none; } }
@media (max-width: 800px)  { .nav-links a[href="whitepaper.html"] { display: none; } }
@media (max-width: 700px)  { .nav-links a[href="#problem-solution"] { display: none; } }
@media (max-width: 620px)  { .nav-links a[href="#how"] { display: none; } }
@media (max-width: 540px)  { .nav-links a[href="#what"] { display: none; } }

/* === Hero === */
.hero { position: relative; padding: 96px 0 64px; overflow: hidden; }
@media (max-width: 760px) { .hero { padding: 56px 0 32px; } }
@media (max-width: 760px) { .hero h1 { line-height: 1.1; } }
@media (max-width: 480px) { .hero p.lede { font-size: var(--type-16); } }
@media (max-width: 480px) { .hero-cta { gap: 8px; } .hero-cta .btn { flex: 1 1 100%; justify-content: center; } }
.hero-bg { display: none; }
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-line) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-line) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at top, black 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 0%, transparent 60%);
}
.hero-inner { position: relative; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.86); color: var(--accent);
  font-size: var(--type-12); font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.hero h1 {
  font-size: clamp(36px, 5.5vw, 64px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.05; margin: 20px 0 18px;
  max-width: 920px;
}
.hero h1 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lede { font-size: var(--type-18); max-width: 720px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 8px; font-size: var(--type-14); font-weight: 500;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .2s, border-color .2s;
  min-height: 44px;     /* WCAG AAA tap-target — was rendering 36-40px on mobile (v2 audit #6) */
  box-sizing: border-box;
}
/* Same floor for other interactive controls flagged by the audit. */
.tb-link, .wk-tab, .drawer-toggle, .drawer-close { min-height: 40px; box-sizing: border-box; }
.wk-tab { min-width: 44px; padding: 10px 14px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: var(--bg); box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--accent); color: white; }
.btn-secondary { background: rgba(255,255,255,0.86); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-1); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: rgba(15,23,42,0.04); }

/* === Stat strip (under hero) === */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 56px; border: 1px solid var(--line);
  border-radius: var(--radius-3);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.stat-cell { padding: 22px 24px; border-right: 1px solid var(--line); }
.stat-cell:last-child { border-right: none; }
.stat-num { font-size: var(--type-28); font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-num .unit { font-size: var(--type-18); color: var(--text-muted); margin-left: 4px; font-weight: 600; }
.stat-label { font-size: var(--type-12); color: var(--text-dim); margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 760px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .stat-cell { padding: 16px 14px; }
  .stat-num { font-size: var(--type-22); }
}

/* === Card primitives === */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 22px;
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.card-h { font-size: var(--type-16); font-weight: 600; letter-spacing: -0.01em; }
.card-sub { color: var(--text-muted); font-size: var(--type-14); margin-top: 4px; line-height: 1.5; }
.card-tag {
  display: inline-block; font-size: var(--type-11); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 10px; font-weight: 600;
}

/* === Before/After (governed vs ungoverned) === */
.ba-wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; margin-top: 32px;
  align-items: stretch; position: relative; isolation: isolate;
}
@media (max-width: 900px) { .ba-wrap { grid-template-columns: 1fr; } .ba-arrow { transform: rotate(90deg); justify-self: center; } }
.ba-side {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 28px;
  position: relative; min-height: 460px; overflow: hidden;
  display: flex; flex-direction: column;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
}
.ba-side.before { border-color: rgba(225, 29, 72, 0.30); }
.ba-side.after  { border-color: rgba(5, 150, 105, 0.35); box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.10), var(--shadow-2); }
.ba-tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 5px 12px; margin-bottom: 14px; border-radius: 999px;
  font-size: var(--type-11); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  position: static;
}
.ba-side.before .ba-tag { background: var(--color-danger-50); color: #be123c; border: 1px solid #fecdd3; }
.ba-side.after  .ba-tag { background: var(--color-brand-50); color: #047857; border: 1px solid #a7f3d0; }
.ba-arrow { background: rgba(255,255,255,0.85); border: 1px solid var(--line-strong); color: var(--accent); }
.ba-title { font-size: var(--type-18); font-weight: 600; margin-bottom: 8px; }
.ba-sub { color: var(--text-muted); font-size: var(--type-13); margin-bottom: 18px; }
.ba-stage {
  height: 280px; border-radius: var(--radius-2); position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(248,249,252,0.85), color-mix(in srgb, var(--color-neutral-100) 95%, transparent));
  border: 1px solid var(--line);
}
.ba-arrow {
  align-self: center;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--accent-2); box-shadow: var(--shadow-2);
}
.ba-controls { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* === Trust graph === */
.tg-wrap {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 320px; gap: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3);
  padding: 24px; box-shadow: var(--shadow-2);
}
@media (max-width: 900px) { .tg-wrap { grid-template-columns: 1fr; } }
.tg-stage {
  background: linear-gradient(180deg, rgba(99,102,241,0.04) 0%, rgba(14,165,233,0.04) 100%);
  border: 1px solid var(--line); border-radius: var(--radius-2);
  height: 480px; position: relative; overflow: hidden;
}
@media (max-width: 600px) { .tg-stage { height: 360px; } .tg-wrap { padding: 16px; } }
@media (max-width: 600px) { .cascade-stage { height: 280px; } }
.tg-side { display: flex; flex-direction: column; gap: 14px; }
.tg-info { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-2); padding: 16px; min-height: 180px; }
.tg-info .label { font-size: var(--type-11); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
.tg-info h4 { margin: 6px 0 8px; font-size: var(--type-16); }
.tg-info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: var(--type-12); margin: 0; }
.tg-info dt { color: var(--text-dim); }
.tg-info dd { margin: 0; color: var(--text); font-family: var(--font-mono); font-size: var(--type-11); word-break: break-all; }
.tg-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-toggle {
  padding: 6px 11px; border-radius: 6px; font-size: var(--type-12);
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--line); cursor: pointer;
}
.tg-toggle.is-on { background: var(--accent); color: white; border-color: var(--accent); }
.tg-legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--type-12); color: var(--text-muted); }
.tg-legend .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* SVG node + edge styles */
.tg-node circle {
  stroke: rgba(15, 23, 42, 0.55);
  stroke-width: 1.6; cursor: pointer; transition: r .15s, stroke-width .15s;
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--color-line-strong) 20%, transparent));
}
.tg-node:hover circle { r: 14; stroke-width: 2.4; }
.tg-node text {
  fill: var(--text); font-size: var(--type-11); font-family: var(--font-mono);
  pointer-events: none; font-weight: 600;
  paint-order: stroke; stroke: color-mix(in srgb, var(--color-paper) 95%, transparent); stroke-width: 3px; stroke-linejoin: round;
}
.tg-link { stroke: rgba(74, 84, 120, 0.45); stroke-width: 1.4; fill: none; }
.tg-link.is-revoked { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 4 3; }
.tg-node.is-stopped circle { fill: var(--danger) !important; }
.tg-node.is-selected circle { stroke: var(--accent); stroke-width: 3.5; }

/* === Cascade ripple === */
.cascade-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
@media (max-width: 900px) { .cascade-wrap { grid-template-columns: 1fr; } }
.cascade-stage {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3);
  height: 360px; position: relative; overflow: hidden; box-shadow: var(--shadow-2);
}
.cascade-stage svg { display: block; width: 100%; height: 100%; }
.cascade-feed {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3);
  padding: 18px; box-shadow: var(--shadow-2); display: flex; flex-direction: column;
}
.cascade-feed h4 { font-size: var(--type-14); margin: 0 0 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.cascade-feed ul {
  list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto;
  font-family: var(--font-mono); font-size: var(--type-12); max-height: 280px;
}
.cascade-feed li { padding: 6px 0; border-bottom: 1px dashed var(--line-soft); display: flex; gap: 10px; align-items: center; }
.cascade-feed .pill { padding: 2px 7px; border-radius: 4px; font-size: var(--type-11); font-weight: 500; }
.cascade-feed .pill.signal { background: rgba(99,102,241,0.12); color: var(--accent); }
.cascade-feed .pill.cascade { background: rgba(217,119,6,0.14); color: var(--warning); }
.cascade-feed .pill.audit { background: rgba(14,165,233,0.14); color: var(--info); }
.cascade-controls { display: flex; gap: 10px; margin-top: 16px; }

/* === Decision dashboard === */
.dash-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 28px; }
@media (max-width: 900px) { .dash-wrap { grid-template-columns: 1fr; } }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3); padding: 24px; box-shadow: var(--shadow-2); }
.dash-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.dash-counter {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 14px;
}
.dash-counter .l { font-size: var(--type-11); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
.dash-counter .v { font-size: var(--type-28); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.dash-counter .delta { font-size: var(--type-11); margin-top: 2px; }
.dash-counter .delta.up { color: var(--success); }
.dash-counter .delta.down { color: var(--danger); }

.donut-wrap { position: relative; height: 240px; display: grid; place-items: center; }
.donut-wrap svg { display: block; max-width: 100%; }
@media (max-width: 480px) { .donut-wrap { height: 200px; } .donut-wrap svg { width: 200px; height: 200px; } }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.donut-center .v { font-size: var(--type-28); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.donut-center .l { font-size: var(--type-11); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.donut-legend { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--type-13); }
.donut-legend-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; border-radius: 4px; }
.donut-legend-row:hover { background: var(--surface-2); }
.donut-legend-row .left { display: flex; align-items: center; gap: 8px; }
.donut-legend-row .left .swatch { width: 10px; height: 10px; border-radius: 2px; }
.donut-legend-row .right { font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* === Comparison matrix === */
.cmp-scroll-wrap { margin-top: 28px; position: relative; }
/* Right-edge fade so the user sees there's more content to scroll. */
.cmp-scroll-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: 48px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg) 80%);
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
  opacity: 0.85;
}
@media (max-width: 600px) { .cmp-scroll-wrap::after { width: 28px; } }
.cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-3);
  background: rgba(255, 255, 255, 0.78); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-line-strong) 18%, transparent) transparent;
}
.cmp-wrap::-webkit-scrollbar { height: 8px; }
.cmp-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-line-strong) 18%, transparent); border-radius: 8px; }
.cmp { border-collapse: separate; border-spacing: 0; min-width: 1180px; width: max-content; }
.cmp thead th {
  background: color-mix(in srgb, var(--color-neutral-50) 95%, transparent); color: var(--text-muted);
  font-size: var(--type-11); font-weight: 600; padding: 16px 14px;
  text-align: left; border-bottom: 1px solid var(--line-strong);
  text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap;
}
.cmp thead th:first-child { padding-left: 22px; min-width: 280px; }
.cmp thead th:last-child  { padding-right: 22px; }
.cmp tbody td {
  padding: 14px; font-size: var(--type-14); border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; white-space: nowrap; line-height: 1.5;
}
.cmp tbody td:first-child { padding-left: 22px; min-width: 280px; white-space: normal; }
.cmp tbody td:last-child  { padding-right: 22px; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp tbody tr:hover { background: rgba(99, 102, 241, 0.04); }
.cmp .product-col { font-weight: 600; color: var(--text); }
.cmp .product-col .ver { font-weight: 400; color: var(--text-dim); font-size: var(--type-11); }
.cmp .cell-yes { color: var(--success); font-weight: 600; }
.cmp .cell-no { color: var(--text-dim); }
.cmp .cell-partial { color: var(--warning); font-weight: 500; }
.cmp .cell-yes::before { content: "● "; }
.cmp .cell-no::before { content: "○ "; }
.cmp .cell-partial::before { content: "◐ "; }
.cmp .row-kye { background: rgba(99, 102, 241, 0.06); }
.cmp .row-kye .product-col { color: var(--accent); }
.cmp .row-kye .product-col::before { content: "★ "; color: var(--accent); }

/* === URN parser tokens (re-themed) === */
.urn-input {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 14px 16px;
  font-family: var(--font-mono); font-size: var(--type-14); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.urn-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.urn-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.urn-sample {
  font-family: var(--font-mono); font-size: var(--type-11);
  padding: 5px 10px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.urn-sample:hover { color: var(--text); border-color: var(--accent); background: rgba(99,102,241,0.08); }
.urn-out { margin-top: 20px; }
.urn-token { display: inline-block; margin: 2px 4px 2px 0; padding: 5px 10px; border-radius: 5px; font-family: var(--font-mono); font-size: var(--type-13); word-break: break-all; }
@media (max-width: 600px) { .urn-token { font-size: var(--type-11); padding: 4px 8px; } .urn-input { font-size: var(--type-12); } }
/* URN token base palette — brand green ramp (see also the !important
 * override block below for the post-cascade lock). */
.urn-tok-prefix { background: var(--kye-color-brand-soft, rgba(99,102,241,0.10)); color: var(--accent, #6366f1); }
.urn-tok-class  { background: var(--kye-color-brand-line, rgba(99,102,241,0.22)); color: var(--accent, #6366f1); }
.urn-tok-td     { background: rgba(99,102,241,0.16); color: var(--accent, #6366f1); }
.urn-tok-sub    { background: rgba(99,102,241,0.30); color: #fff; }
.urn-tok-local  { background: rgba(120,146,200,0.16); color: var(--text-muted); }
.urn-tok-bad    { background: var(--danger-soft, rgba(239,68,68,0.2)); color: var(--danger, #b91c1c); }
.urn-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: var(--type-12); color: var(--text-muted); margin-top: 18px; }
.urn-meta b { color: var(--text); font-weight: 500; }

/* === Decision flow (re-themed) === */
.flow-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 900px) { .flow-wrap { grid-template-columns: 1fr; } }
.flow-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flow-controls select {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; border-radius: 7px; font-size: var(--type-13); font-family: var(--font-ui);
}
#flow-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#flow-steps li {
  padding: 10px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--type-13); opacity: 0.5; transition: all .25s;
}
#flow-steps li.is-active { opacity: 1; border-color: var(--accent); background: rgba(99,102,241,0.08); }
#flow-steps li code { font-family: var(--font-mono); font-size: var(--type-12); color: var(--accent-2); padding: 1px 4px; background: rgba(99,102,241,0.10); border-radius: 3px; }
.flow-decision {
  background: rgba(255,255,255,0.86); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 32px; min-height: 280px;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.flow-decision::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--text-dim); transition: background .25s ease;
}
.flow-decision.is-allow    { background: linear-gradient(180deg, var(--color-brand-50), rgba(255,255,255,0.86)); border-color: #6ee7b7; }
.flow-decision.is-allow::before    { background: var(--success); }
.flow-decision.is-approval { background: linear-gradient(180deg, #fef3c7, rgba(255,255,255,0.86)); border-color: #fcd34d; }
.flow-decision.is-approval::before { background: var(--warning); }
.flow-decision.is-deny     { background: linear-gradient(180deg, var(--color-danger-50), rgba(255,255,255,0.86)); border-color: #fda4af; }
.flow-decision.is-deny::before     { background: var(--danger); }
.flow-decision .l { font-size: var(--type-11); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.flow-decision .v { font-size: var(--type-28); font-weight: 800; margin-top: 12px; font-family: var(--font-mono); letter-spacing: -0.02em; }
.flow-decision .v.allow    { color: var(--success); }
.flow-decision .v.approval { color: var(--warning); }
.flow-decision .v.deny     { color: var(--danger); }
.flow-decision .badge-icon { display: inline-block; margin-right: 10px; vertical-align: middle; }
.flow-decision .reasons, .flow-decision .obs { margin-top: 18px; font-size: var(--type-13); color: var(--text-muted); line-height: 1.65; }
.flow-decision code { font-family: var(--font-mono); font-size: var(--type-12); padding: 2px 6px; background: var(--surface-3); border-radius: 4px; color: var(--text); margin: 0 2px; border: 1px solid var(--line); }
/* Highlighted decision flow steps when their decision corresponds */
#flow-steps li.is-active.flow-allow    { border-color: var(--success); background: rgba(5,150,105,0.06); }
#flow-steps li.is-active.flow-approval { border-color: var(--warning); background: rgba(217,119,6,0.06); }
#flow-steps li.is-active.flow-deny     { border-color: var(--danger);  background: rgba(225,29,72,0.06); }

/* === Profiles === */
.profile-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.profile-tab {
  padding: 8px 14px; border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--line); cursor: pointer; font-size: var(--type-13); font-weight: 500;
  transition: all .15s;
}
.profile-tab:hover { color: var(--text); border-color: var(--accent); }
.profile-tab.is-active { background: var(--accent); color: white; border-color: var(--accent); box-shadow: var(--shadow-1); }
.profile-detail {
  margin-top: 18px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}
.profile-detail .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .profile-detail .grid { grid-template-columns: 1fr; } }
.profile-detail h3 { font-size: var(--type-22); margin: 8px 0 6px; letter-spacing: -0.01em; }
.profile-detail .endpoints, .profile-detail .terms {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.profile-detail .endpoints li { font-family: var(--font-mono); font-size: var(--type-12); color: var(--accent-2); padding: 6px 10px; background: var(--surface-2); border-radius: 5px; border: 1px solid var(--line-soft); }
.profile-detail .terms li { font-size: var(--type-13); color: var(--text-muted); }
.profile-detail .terms code { font-family: var(--font-mono); font-size: var(--type-12); color: var(--info); }

/* === Lifecycle simulator === */
.lc-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 900px) { .lc-wrap { grid-template-columns: 1fr; } }
.lc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3); padding: 22px; box-shadow: var(--shadow-1); }
.lc-state { font-family: var(--font-mono); font-size: var(--type-28); font-weight: 700; color: var(--accent-2); letter-spacing: -0.01em; }
.lc-status { font-size: var(--type-12); color: var(--text-dim); margin-top: 4px; }
.lc-transitions { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-btn {
  font-family: var(--font-mono); font-size: var(--type-12);
  padding: 7px 12px; border-radius: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); cursor: pointer; transition: all .15s;
}
.lc-btn:hover { border-color: var(--accent); color: var(--accent-2); background: rgba(99,102,241,0.08); }
.lc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lc-cascade ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: var(--type-13); color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.lc-log { font-family: var(--font-mono); font-size: var(--type-11); max-height: 240px; overflow-y: auto; }
.lc-log li { padding: 4px 0; color: var(--text-muted); border-bottom: 1px dashed var(--line-soft); }

/* === Vocabulary browser === */
.vocab-input {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 13px 16px;
  font-family: var(--font-mono); font-size: var(--type-14); color: var(--text); margin-top: 18px;
}
.vocab-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.vocab-counts { font-size: var(--type-12); color: var(--text-dim); margin-top: 10px; }
/* Vocabulary: category tabs + compact list */
.vocab-cats {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px;
}
.vocab-cat {
  padding: 6px 12px; border-radius: 999px; font-size: var(--type-12); font-weight: 500;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--line); cursor: pointer; transition: all .15s;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.vocab-cat:hover { color: var(--text); border-color: var(--accent); }
.vocab-cat.is-on {
  background: var(--accent); color: white; border-color: var(--accent);
  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.55);
}
.vocab-cat .badge {
  display: inline-block; margin-left: 6px;
  background: rgba(255,255,255,0.18); color: inherit;
  padding: 1px 6px; border-radius: 8px; font-size: var(--type-11);
  font-variant-numeric: tabular-nums;
}
.vocab-list {
  margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-3);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.vocab-row {
  display: grid; grid-template-columns: 220px 1fr;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: var(--type-13); gap: 18px; align-items: baseline;
  transition: background .15s;
}
.vocab-row:last-child { border-bottom: none; }
.vocab-row:hover { background: rgba(139, 92, 246, 0.05); }
.vocab-row .v-name { font-family: var(--font-mono); font-size: var(--type-12); color: var(--accent-2); font-weight: 500; word-break: break-all; }
.vocab-row .v-desc { color: var(--text-muted); line-height: 1.5; }
.vocab-row .v-cat-pill { display: inline-block; font-size: var(--type-11); padding: 1px 6px; border-radius: 4px; background: var(--line); color: var(--text-dim); margin-right: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 700px) {
  .vocab-row { grid-template-columns: 1fr; gap: 4px; }
}

/* === Public repos: 3 cols on desktop, 2 cols on tablet, 1 col on mobile === */
.repo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 900px) { .repo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .repo-grid { grid-template-columns: 1fr; } }
.repo-card {
  display: block; padding: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-2); text-decoration: none;
  transition: all .15s; box-shadow: var(--shadow-1);
}
.repo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.repo-name { font-family: var(--font-mono); color: var(--accent-2); font-weight: 600; font-size: var(--type-14); }
.repo-desc { font-size: var(--type-13); color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

/* === Footer === */
.footer { padding: 0; border-top: 1px solid var(--line); color: var(--text-dim); font-size: var(--type-13); }
.footer-inner { display: block; }
.footer-bar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.footer-copy { color: var(--text-muted); font-size: var(--type-12); }
.footer-copy a { color: var(--accent); text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }
.footer-social {
  display: inline-flex; align-items: center; gap: 6px;
}
.footer-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none !important;
  border-bottom: 1px solid var(--line) !important;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.footer-soc:hover {
  color: var(--accent);
  border-color: var(--accent) !important;
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.footer-gh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--type-12);
  font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.footer-gh:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.footer-tm {
  padding: 14px 0 22px;
  font-size: var(--type-11);
  line-height: 1.7;
  color: var(--text-dim);
  border-top: 1px dashed var(--line);
}
@media (max-width: 600px) {
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .footer-tm { font-size: var(--type-11); }
}

/* === Scroll-to-top button with progress ring === */
.scroll-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .15s, box-shadow .15s;
}
.scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { background: var(--text); }
.scroll-top:hover .arrow { stroke: var(--bg); }
.scroll-top:hover .ring-progress { stroke: white; }
.scroll-top svg { display: block; }
.scroll-top .arrow { stroke: var(--text); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.scroll-top .ring-bg { stroke: var(--line); stroke-width: 3; fill: none; }
.scroll-top .ring-progress {
  stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round;
  transition: stroke-dashoffset .12s linear;
  transform: rotate(-90deg); transform-origin: center;
}
@media (max-width: 600px) {
  .scroll-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* === Beyond KYC / KYB / KYA / KYE evolution === */
.evo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 36px; align-items: stretch;
}
@media (max-width: 1080px) { .evo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .evo-grid { grid-template-columns: 1fr; } }
.evo-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 22px;
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.evo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.evo-card.legacy   { border-color: var(--line-strong); }
.evo-card.emerging { border-color: rgba(217, 119, 6, 0.30); background: linear-gradient(180deg, rgba(254, 243, 199, 0.55), rgba(255, 255, 255, 0.85)); }
.evo-card.kye {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(255, 255, 255, 0.85));
  box-shadow: var(--shadow-3);
}
.evo-tag {
  font-size: var(--type-11); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.evo-card.emerging .evo-tag { color: var(--warning); }
.evo-card.kye .evo-tag { color: var(--accent); }
.evo-card h3 { margin: 0; font-size: var(--type-28); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
@media (max-width: 600px) { .evo-card { padding: 18px; } .evo-card h3 { font-size: var(--type-22); } .evo-callout { padding: 18px 20px; font-size: var(--type-14); } }
.evo-card.kye h3 { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.evo-sub { font-size: var(--type-13); color: var(--text-muted); margin: 0; font-weight: 500; }
.evo-have, .evo-miss { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--type-13); line-height: 1.5; }
.evo-have li { color: var(--text); padding-left: 22px; position: relative; }
.evo-have li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  background: rgba(5,150,105,0.16); border-radius: 50%;
}
.evo-have li::after {
  content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 3px;
  border-left: 2px solid var(--success); border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}
.evo-miss li { color: var(--text-dim); padding-left: 22px; position: relative; }
.evo-miss li::before {
  content: "✕"; position: absolute; left: 0; top: -1px; width: 14px; height: 14px;
  font-size: var(--type-11); color: var(--danger); font-weight: 700; text-align: center;
}
.evo-card.kye .evo-have li { color: var(--text); font-weight: 500; }
.evo-card.kye .evo-have li strong { color: var(--accent); }

.evo-callout {
  margin-top: 32px; padding: 24px 28px;
  background: rgba(255,255,255,0.86); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  font-size: var(--type-14); line-height: 1.65; color: var(--text-muted);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.evo-callout strong { color: var(--text); }

/* === What is KYE / Plain definition === */
.what-card {
  background: rgba(255,255,255,0.86); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 32px;
  box-shadow: var(--shadow-2); margin-top: 28px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.what-card .def-tag {
  font-size: var(--type-11); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.what-def {
  font-size: clamp(18px, 2.4vw, 22px); line-height: 1.55;
  color: var(--text); margin: 12px 0 0; font-weight: 500;
  letter-spacing: -0.01em;
}
.what-def .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.what-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 22px;
}
@media (max-width: 900px) { .what-grid { grid-template-columns: 1fr; } }
.what-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; background: rgba(255,255,255,0.5);
  border: 1px solid var(--line); border-radius: var(--radius-2);
}
.what-row .what-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; font-size: var(--type-18);
  background: var(--accent-soft); color: var(--accent);
}
.what-row .what-h {
  font-size: var(--type-14); font-weight: 700; margin: 0 0 3px; color: var(--text);
}
.what-row .what-b {
  font-size: var(--type-13); color: var(--text-muted); margin: 0; line-height: 1.5;
}

/* === Problem / Solution split === */
.ps-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 28px;
}
@media (max-width: 900px) { .ps-wrap { grid-template-columns: 1fr; } }
.ps-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 26px;
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.ps-card.problem  { border-color: rgba(225, 29, 72, 0.30); }
.ps-card.solution { border-color: rgba(5, 150, 105, 0.32);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.55), rgba(255, 255, 255, 0.85)); }
.ps-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
}
.ps-card.problem .ps-tag  { background: var(--color-danger-50); color: #be123c; border: 1px solid #fecdd3; }
.ps-card.solution .ps-tag { background: var(--color-brand-50); color: #047857; border: 1px solid #a7f3d0; }
.ps-h { font-size: var(--type-18); font-weight: 700; letter-spacing: -0.01em; margin: 12px 0 14px; color: var(--text); }
.ps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--type-14); line-height: 1.55; color: var(--text-muted); }
.ps-list li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  margin-top: 2px;
}
.ps-card.problem  .ps-list li::before {
  background: rgba(225, 29, 72, 0.14);
  background-image: linear-gradient(45deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%);
}
.ps-card.solution .ps-list li::before {
  background: rgba(5, 150, 105, 0.14);
  background-image: linear-gradient(45deg, transparent 38%, var(--success) 38%, var(--success) 50%, transparent 50%, transparent 75%, var(--success) 75%, var(--success) 80%, transparent 80%);
}
.ps-card.solution .ps-list li strong { color: var(--text); font-weight: 600; }
.ps-arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}

/* === How it works (3 steps) === */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 28px;
  position: relative;
}
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }
.how-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 28px;
  box-shadow: var(--shadow-1); position: relative;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.how-num {
  position: absolute; top: -16px; left: 24px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--text); color: white;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--type-16);
  box-shadow: var(--shadow-2);
}
.how-h { font-size: var(--type-16); font-weight: 700; letter-spacing: -0.01em; margin: 14px 0 8px; color: var(--text); }
.how-b { font-size: var(--type-13); color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.how-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.how-pill {
  font-family: var(--font-mono); font-size: var(--type-11);
  padding: 3px 9px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(99,102,241,0.18);
}

/* === ROI / Benefits === */
.roi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 28px;
}
@media (max-width: 900px) { .roi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .roi-grid { grid-template-columns: 1fr; } }
.roi-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 24px; box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.roi-num {
  font-size: var(--type-36); font-weight: 800; letter-spacing: -0.03em;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.roi-num .unit { font-size: var(--type-18); color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); margin-left: 4px; font-weight: 600; }
.roi-h { font-size: var(--type-14); font-weight: 700; margin: 12px 0 6px; color: var(--text); }
.roi-b { color: var(--text-muted); font-size: var(--type-13); line-height: 1.55; margin: 0; }

/* === Enterprise assurance / compliance badges === */
.assurance-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 24px;
}
@media (max-width: 900px) { .assurance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .assurance-grid { grid-template-columns: 1fr; } }
.assurance-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 16px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column; gap: 6px;
}
.assurance-card .h { font-size: var(--type-12); font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-transform: uppercase; }
.assurance-card .c { font-size: var(--type-22); font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.assurance-card .b { font-size: var(--type-12); color: var(--text-muted); line-height: 1.45; }
.compliance-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.compliance-pill {
  font-family: var(--font-mono); font-size: var(--type-11); font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  background: var(--success-soft); color: var(--success);
  border: 1px solid var(--success-line);
}
.compliance-row .lbl {
  font-size: var(--type-11); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; margin-right: 8px;
}
.version-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(5, 150, 105, 0.12); color: var(--success);
  border: 1px solid rgba(5, 150, 105, 0.25);
  font-family: var(--font-mono); font-size: var(--type-11); font-weight: 600;
  text-decoration: none; margin-left: 10px;
  vertical-align: middle;
}
.version-pill:hover { background: rgba(5, 150, 105, 0.20); }
.version-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.version-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }

/* Footer intro — clarifies the two-axis model: top-bar = surfaces,
   footer = topics. Per user clarification 2026-05-13. */
.footer-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 0 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--color-line) 10%, transparent));
  padding-bottom: 14px;
}
.footer-intro-eyebrow {
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #6366f1);
}
.footer-intro-aside {
  font-size: var(--type-12);
  color: var(--text-dim, #6b7280);
  max-width: 640px;
}
@media (max-width: 760px) {
  .footer-intro { padding: 22px 0 12px; }
  .footer-intro-aside { font-size: var(--type-11); }
}

/* Footer multi-column enterprise */
.footer-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px;
  padding: 40px 0 28px;
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 32px 0 18px; } }
@media (max-width: 380px)  { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: var(--type-13); }
.footer-col a:hover { color: var(--accent); }
.footer-col p { color: var(--text-muted); font-size: var(--type-13); line-height: 1.55; margin: 0 0 12px; }
.footer-col code { font-family: var(--font-mono); font-size: var(--type-11); color: var(--accent-2); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 18px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: var(--type-12); color: var(--text-dim);
}

/* Coverage: horizontal + vertical chart */
.cov-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px;
}
@media (max-width: 900px) { .cov-wrap { grid-template-columns: 1fr; } }
.cov-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-3); padding: 22px; box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.cov-card h3 { margin: 0 0 4px; font-size: var(--type-16); font-weight: 700; }
.cov-card .sub { color: var(--text-dim); font-size: var(--type-12); margin-bottom: 14px; }
.cov-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cov-pill {
  font-family: var(--font-mono); font-size: var(--type-11);
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(99,102,241,0.16);
}
.cov-pill.line { background: rgba(14,165,233,0.10); color: var(--info); border-color: rgba(14,165,233,0.18); }
.cov-pill.gov  { background: rgba(5,150,105,0.10); color: var(--success); border-color: rgba(5,150,105,0.18); }

/* === Quickstart === */
.qs-card {
  margin-top: 28px;
  background: rgba(255,255,255,0.86); border: 1px solid var(--line);
  border-radius: var(--radius-3); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.qs-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 249, 252, 0.6);
  overflow-x: auto;
  scrollbar-width: none;
}
.qs-tabs::-webkit-scrollbar { display: none; }
.qs-tab { white-space: nowrap; }
.qs-tab {
  padding: 12px 20px; font-size: var(--type-13); font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  transition: color .15s, border-color .15s;
}
.qs-tab:hover { color: var(--text); }
.qs-tab.is-on {
  color: var(--accent); border-bottom-color: var(--accent);
  background: rgba(255,255,255,0.86);
}
.qs-pane { padding: 0; }
.qs-pane pre {
  margin: 0; padding: 24px 28px;
  background: var(--color-neutral-900); color: var(--color-info-50);
  font-family: var(--font-mono); font-size: var(--type-13); line-height: 1.6;
  overflow-x: auto; max-height: 380px;
}
@media (max-width: 600px) {
  .qs-pane pre { padding: 18px 16px; font-size: var(--type-11); line-height: 1.55; }
  .qs-tab { padding: 10px 14px; font-size: var(--type-12); }
  .qs-tabs { overflow-x: auto; }
  .qs-tabs::-webkit-scrollbar { display: none; }
}
/* Syntax-highlight palette — brand-coherent.
 * No cyan / indigo / purple. Keywords + identifiers anchor on
 * --kye-color-brand (Google green); strings use --kye-color-brand-2
 * (deeper green lift); numbers + comments fall back to the muted
 * --kye-color-warning + a slate-neutral so the eye still parses
 * code structure without colour-leak to the legacy indigo/violet
 * palette. */
.qs-pane pre .k { color: var(--kye-color-brand, #6366f1); font-weight: 600; }
.qs-pane pre .s { color: var(--kye-color-brand-2, #4338ca); }
.qs-pane pre .c { color: var(--kye-color-text-dim, #8993b0); font-style: italic; }
.qs-pane pre .n { color: var(--kye-color-warning, #F4B400); }
.qs-pane pre .u { color: var(--kye-color-brand, #6366f1); }
.qs-copy {
  position: absolute; top: 12px; right: 16px;
  background: var(--kye-color-brand-soft, rgba(99, 102, 241, 0.10));
  color: var(--accent, #6366f1);
  border: 1px solid var(--kye-color-brand-line, rgba(99, 102, 241, 0.22));
  padding: 4px 10px; font-size: var(--type-11); border-radius: 5px;
  font-family: var(--font-mono); cursor: pointer;
}
.qs-copy:hover {
  background: var(--accent, #6366f1);
  color: #fff;
  border-color: var(--accent, #6366f1);
}
.qs-pane-wrap { position: relative; }

/* === Personas === */
.persona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 28px;
}
@media (max-width: 900px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .persona-grid { grid-template-columns: 1fr; } }
.persona-card {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 22px; box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column; gap: 10px;
}
.persona-card .persona-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: var(--type-18);
}
.persona-card h3 { margin: 0; font-size: var(--type-16); font-weight: 700; }
.persona-card .pain { font-size: var(--type-13); color: var(--text-dim); font-style: italic; }
.persona-card p { margin: 0; font-size: var(--type-14); color: var(--text-muted); line-height: 1.5; }

/* === Persona tabs (buyers.html) === */
.persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted, #888) 22%, transparent);
}
.persona-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--type-13);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.persona-tab:hover { color: var(--text, #111); background: color-mix(in srgb, var(--accent, var(--color-brand-500)) 6%, transparent); }
.persona-tab[aria-selected="true"] { color: var(--accent, var(--color-brand-500)); border-bottom-color: var(--accent, var(--color-brand-500)); font-weight: 600; }
.persona-panel { display: none; padding-top: 18px; }
.persona-panel[data-active] { display: block; }
.persona-panel .why-card { box-shadow: none; padding: 0; }
/* Mobile: collapse tabs into one horizontally-scrolling row instead of
   a multi-row wrap. Stops the scattered look on phones. */
@media (max-width: 720px) {
  .persona-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }
  .persona-tab {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: var(--type-13);
    scroll-snap-align: start;
  }
  .persona-tab[aria-selected="true"] { scroll-snap-align: center; }
}

/* === Protocol-page sticky TOC === */
.protocol-toc {
  position: sticky;
  top: 56px;
  z-index: 20;
  background: color-mix(in srgb, var(--bg, var(--color-paper)) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted, #888) 18%, transparent);
  padding: 8px 0;
}
.protocol-toc > .container {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.protocol-toc .cn-pill {
  flex-shrink: 0;
  font-size: var(--type-13);
  padding: 6px 12px;
}
@media (max-width: 720px) { .protocol-toc { top: 48px; } }

/* === Star CTA (sticky) === */
.star-cta {
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: var(--type-13); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s, transform .25s, background .15s;
}
.star-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.star-cta:hover { background: var(--accent); color: white; }
.star-cta svg { color: #fbbf24; }
@media (max-width: 600px) { .star-cta { left: 16px; bottom: 16px; padding: 8px 14px; font-size: var(--type-12); } }
@media (max-width: 360px) { .star-cta { padding: 7px 11px; font-size: var(--type-11); } }

/* === Logos strip placeholder === */
.logos-strip {
  margin-top: 32px;
  background: rgba(255,255,255,0.66); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-3); padding: 28px;
  text-align: center; color: var(--text-dim); font-size: var(--type-13); line-height: 1.6;
}
.logos-strip strong { color: var(--text); }
@media (max-width: 600px) { .logos-strip { padding: 20px; font-size: var(--type-12); } }

/* === FAQ === */
.faq-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(255,255,255,0.78); border: 1px solid var(--line);
  border-radius: var(--radius-2); padding: 0;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow-2); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px; font-size: var(--type-16); font-weight: 600;
  color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-weight: 400; color: var(--accent); font-size: var(--type-22);
  transition: transform .2s; line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0; padding: 0 22px 22px; color: var(--text-muted);
  line-height: 1.65; font-size: var(--type-14);
  word-wrap: break-word; overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .faq-item summary { padding: 14px 16px; font-size: var(--type-14); gap: 8px; }
  .faq-item p { padding: 0 16px 16px; font-size: var(--type-14); }
}
.faq-item code { font-family: var(--font-mono); font-size: var(--type-12); padding: 2px 6px; background: var(--accent-soft); border-radius: 4px; color: var(--accent); }

/* Mermaid recolor */
.mermaid-host { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3); margin-top: 24px; overflow-x: auto; box-shadow: var(--shadow-2); }
.mermaid svg { max-width: 100%; height: auto; }

/* === Custom coloured sequence diagram === */
.seq-host {
  margin-top: 32px; padding: 28px;
  background: rgba(255,255,255,0.86); border: 1px solid var(--line); border-radius: var(--radius-3);
  box-shadow: var(--shadow-2); overflow-x: auto;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.seq-host svg { display: block; max-width: 100%; min-width: 720px; height: auto; }
@media (max-width: 760px) { .seq-host { padding: 18px 12px; } }
.seq-actor-rect { rx: 8; }
.seq-line-line { stroke: rgba(74, 84, 120, 0.20); stroke-width: 1.2; stroke-dasharray: 4 4; }
.seq-msg-line  { stroke-width: 1.6; }
.seq-msg-text  { font-family: var(--font-mono); font-size: var(--type-11); font-weight: 600; }
.seq-actor-text { font-family: var(--font-ui); font-size: var(--type-12); font-weight: 600; fill: white; }
.seq-step-num   { font-family: var(--font-ui); font-size: var(--type-11); font-weight: 700; fill: white; }
.seq-step-num-bg { stroke: white; stroke-width: 1.4; }
.seq-alt-box {
  fill: rgba(99, 102, 241, 0.05); stroke: rgba(99, 102, 241, 0.30);
  stroke-width: 1; stroke-dasharray: 3 3; rx: 6;
}
.seq-alt-label {
  font-family: var(--font-mono); font-size: var(--type-11); font-weight: 600;
  fill: var(--accent); letter-spacing: 0.04em;
}








/* STATE MODEL — six dimensions */
.state-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px;
}
@media (max-width: 960px) { .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .state-grid { grid-template-columns: 1fr; } }
.state-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.state-card .state-h {
  font-family: var(--font-mono); font-size: var(--type-13); color: var(--accent); font-weight: 600;
  background: var(--accent-soft); padding: 4px 10px; border-radius: 6px; align-self: flex-start;
}
.state-card .state-desc { font-size: var(--type-14); color: var(--text); line-height: 1.55; }
.state-card .state-vals {
  list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.state-card .state-vals li code {
  font-family: var(--font-mono); font-size: var(--type-11); color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--line); padding: 3px 8px; border-radius: 5px;
}
.state-card .state-emit { font-size: var(--type-12); color: var(--text-dim); margin-top: 4px; }
.state-card .state-emit code {
  font-family: var(--font-mono); font-size: var(--type-11); color: var(--accent-2); background: transparent; padding: 0;
}

/* SECTORS */
.sector-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px;
}
@media (max-width: 960px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sector-grid { grid-template-columns: 1fr; } }
.sector-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.sector-card .sector-icon,
.persona-card .persona-icon,
.why-card .why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(99,102,241,0.20);
  margin-bottom: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.sector-card .sector-icon svg,
.persona-card .persona-icon svg,
.why-card .why-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* URN tokens — brand-coherent green ramp (no indigo / violet / purple leaks).
 * The five token classes vary by *opacity* of the same brand hue so the URN
 * still reads as five distinct pills, but the page never breaks brand. */
.urn-tok-prefix { background: var(--kye-color-brand-soft, rgba(99,102,241,0.10)) !important; color: var(--accent, #6366f1) !important; }
.urn-tok-class  { background: var(--kye-color-brand-line, rgba(99,102,241,0.22)) !important; color: var(--accent, #6366f1) !important; }
.urn-tok-td     { background: rgba(99,102,241,0.16) !important; color: var(--accent, #6366f1) !important; }
.urn-tok-sub    { background: rgba(99,102,241,0.30) !important; color: #fff !important; }
.urn-tok-local  { background: rgba(100,116,139,0.14) !important; color: var(--text-muted, #475569) !important; }
.urn-tok-bad    { background: var(--danger-soft, rgba(239,68,68,0.18)) !important; color: var(--danger, #b91c1c) !important; }
.sector-card h3 { margin: 0; font-size: var(--type-16); font-weight: 600; }
.sector-card .sector-pain { font-size: var(--type-13); color: var(--text-muted); line-height: 1.55; margin: 0; }
.sector-card .sector-profiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sector-card .prof-pill {
  font-family: var(--font-mono); font-size: var(--type-11); color: var(--accent); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 999px; text-decoration: none; border: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.sector-card .prof-pill:hover { border-color: var(--accent); }
.sector-card .sector-frameworks {
  font-size: var(--type-11); color: var(--text-dim); margin-top: 4px; letter-spacing: 0.02em;
}

/* ============================================================
   Accessibility: visible focus rings on every interactive element.
   ============================================================ */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
.prof-pill:focus-visible,
.compliance-pill:focus-visible,
.profile-tab:focus-visible,
.urn-sample:focus-visible,
.assurance-card:focus-visible,
.state-card:focus-visible,
.sector-card:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ============================================================
   Print: clean print of Trust & assurance, Sectors, State model,
   Profiles, Coverage, FAQ — for audit/PDF handoff.
   ============================================================ */
@media print {
  :root { --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --line: #d0d4dc; }
  body { background: var(--color-paper); color: #000; }
  .nav, .star-cta, .scroll-top, #ba-play, #ba-reset, #tg-revoke, #tg-reset,
  #cascade-fire, #cascade-reset, #dash-play, #dash-pause, #dash-clear,
  .qs-tabs, .urn-input, .vocab-input, .hero-cta, .nav-links,
  .footer-links, video, canvas { display: none !important; }
  section { page-break-inside: avoid; padding: 18px 0 !important; }
  .h-section { font-size: 18pt; }
  h3 { font-size: 13pt; }
  body, p, li, td, th, code { font-size: 10pt; line-height: 1.45; color: #000; }
  .assurance-card .c { color: #000 !important; background: none !important; -webkit-text-fill-color: #000; }
  a { color: #000; text-decoration: underline; }
  .sector-card, .state-card, .assurance-card, .ps-card, .persona-card {
    border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid;
  }
}

/* ============================================================
   Dark mode (auto, by preference). Light theme stays default.
   Only re-targets surface/text/line tokens; semantic colors stay.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--color-neutral-900);
    --surface: rgba(20, 26, 44, 0.78);
    --surface-solid: var(--color-neutral-800);
    --surface-2: rgba(15, 20, 35, 0.92);
    --surface-3: var(--color-neutral-800);
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);
    --line-soft: rgba(255, 255, 255, 0.05);
    --text: var(--color-neutral-100);
    --text-muted: #aab2cc;
    --text-dim: #7a83a3;
    --accent-soft: rgba(167, 139, 250, 0.16);
    --success-soft: rgba(52, 211, 153, 0.14);
    --success-line: rgba(52, 211, 153, 0.30);
    --info-soft: rgba(56, 189, 248, 0.14);
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger-soft: rgba(244, 63, 94, 0.14);
    --shadow-1: 0 1px 2px rgba(0,0,0,.40);
    --shadow-2: 0 8px 24px -10px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.30);
    --shadow-3: 0 24px 56px -20px rgba(99,102,241,.45), 0 4px 12px rgba(0,0,0,.35);
  }
}

/* ============================================================
   Trademark symbols (™ U+2122, ® U+00AE) inherit text font + size.
   Without this, browsers may substitute a system font for these
   glyphs, producing visibly mismatched marks (heavier, off-size).
   ============================================================ */
:root {
  --font-tm: var(--font-ui);
}
/* Force Inter (which ships ™ ®) before falling back to system glyphs.
   Apply at body level so every prose ™/® inherits cleanly. */
html, body, h1, h2, h3, h4, h5, h6, p, li, td, th, span, summary, label,
button, a, dt, dd, code, kbd, sup, .brand, .lede, .h-section, .eyebrow {
  font-family: var(--font-ui);
  font-feature-settings: "ss01", "cv01", "cv11";
  text-rendering: optimizeLegibility;
}
/* Inline ™/® at exact body size and weight (no super-small fallback). */
.tm, sup.tm {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  vertical-align: baseline;
  letter-spacing: 0;
  font-feature-settings: normal;
}
/* When ™ appears literally in text without a wrapper, the @font-face
   stack above already covers it — Inter has the glyph. The fallback
   chain is the OS UI font, which renders ™ at body metrics. */

/* Force font-display: swap on the Inter @font-face declarations from rsms.me
   so first paint is not blocked when the network is slow. */
@font-face { font-family: 'Inter'; font-display: swap; src: local('Inter'); }

/* COPY: definition gloss list (what-def-gloss) */
.what-def-gloss {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 10px;
}
.what-def-gloss li {
  font-size: var(--type-14); color: var(--text); line-height: 1.55;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2);
}
.what-def-gloss li strong {
  display: inline-block; min-width: 88px; color: var(--accent);
  font-weight: 700; letter-spacing: -0.005em;
}
.what-def-gloss li em { color: var(--text); font-style: normal; font-weight: 600; }

/* COPY: how outcomes — explicit "your app does next" list */
.how-outcomes {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.how-outcomes li {
  font-size: var(--type-13); color: var(--text-muted); line-height: 1.55;
}
.how-outcomes .how-pill { margin-right: 6px; }
.how-pill.is-allow {
  color: var(--success); background: var(--success-soft); border-color: var(--success-line);
}
.how-pill.is-approve {
  color: var(--warning); background: var(--warning-soft); border-color: var(--warning-line);
}
.how-pill.is-deny {
  color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line);
}

/* COPY: persona ROI bullets */
.persona-roi {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.persona-roi li {
  position: relative; padding-left: 16px;
  font-size: var(--type-12); color: var(--text-muted); line-height: 1.5;
}
.persona-roi li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* HERO: persona-select chip row (audience-segmentation CTA) */
.persona-select {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; row-gap: 6px;
}
.persona-select-label {
  font-size: var(--type-12); color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.10em; font-weight: 600; margin-right: 4px;
}
.persona-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: var(--type-12); font-weight: 600; line-height: 1;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.persona-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.persona-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================================
   PROTOCOL-GRADE POLISH PASS — cards, tables, TM glyph, logos.
   Audited 2026-05-05 (post-rebrand QA sweep).
   ============================================================ */

/* TM / ® glyph baseline + cosmetic rules. The token system itself
   (--tm-em-* / --tm-rise-* / per-context bindings) lives in the
   single :root block further down — this section only handles
   cosmetic alignment helpers. */
:where(h1, h2, h3, h4, h5, .lede, .what-def, .ps-h, .h-section, .brand,
       .hero-pill, .eyebrow, .nav-cta, .qs-tab, .footer-bottom,
       .ps-tag, .persona-card h3, .sector-card h3,
       .assurance-card .h)::after { content: ""; }
.h-section, .lede, .what-def, .ps-h, h1, h2, h3, h4, h5 { font-variant-numeric: tabular-nums; }

/* === WHAT card === */
.what-card {
  padding: 28px 28px 26px;
}
@media (min-width: 720px) { .what-card { padding: 36px 40px 34px; } }
.what-card .def-tag { margin-bottom: 8px; }
.what-card .what-def { letter-spacing: -0.012em; }
.what-card .what-def-gloss { margin-top: 22px; }
.what-card .what-def-gloss li {
  display: grid; grid-template-columns: minmax(96px, 110px) 1fr; gap: 14px;
  align-items: baseline; padding: 12px 16px;
}
@media (max-width: 600px) {
  .what-card .what-def-gloss li { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
}
.what-card .what-def-gloss li strong { min-width: 0; }
.what-card .what-grid { margin-top: 24px; gap: 12px; }
.what-row { padding: 18px 18px 16px; }
.what-row .what-h { font-size: var(--type-14); line-height: 1.35; }
.what-row .what-b { font-size: var(--type-13); line-height: 1.55; margin-top: 2px; }

/* === Problem / Solution cards (with/without) === */
.ps-card { padding: 28px 28px 26px; }
@media (min-width: 720px) { .ps-card { padding: 32px 32px 30px; } }
.ps-card .ps-tag { margin-bottom: 14px; }
.ps-card .ps-h   { margin: 6px 0 16px; }
.ps-list li { padding: 0; }
.ps-list li::before { margin-top: 4px; }
.ps-card.solution .ps-list li strong { color: var(--text); }

/* === Quickstart (SDK card) text margin / line-height === */
.qs-card { padding: 0; }
.qs-tabs { padding: 0 18px; padding-top: 4px; }
.qs-tab  { padding: 14px 18px 12px; }
.qs-pane-wrap { padding: 0; position: relative; }
.qs-pane-wrap pre {
  margin: 0; padding: 26px 28px 24px;
}
@media (max-width: 600px) {
  .qs-tabs { padding: 0 8px; padding-top: 3px; }
  .qs-tab  { padding: 11px 12px 9px; }
  .qs-pane-wrap pre { padding: 18px 16px; }
}
.qs-copy { top: 12px; right: 14px; }

/* === Profile detail (capability/profile inventory) === */
.profile-detail { padding: 30px 30px 28px; }
@media (min-width: 720px) { .profile-detail { padding: 36px 40px 34px; } }
.profile-detail .grid { gap: 36px; row-gap: 24px; }
.profile-detail h3 { font-size: var(--type-22); margin: 6px 0 10px; }
.profile-detail .endpoints, .profile-detail .terms {
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.profile-detail .endpoints li {
  font-size: var(--type-12); padding: 7px 11px; line-height: 1.45;
}
.profile-detail .terms li {
  font-size: var(--type-13); line-height: 1.55; padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.profile-detail .terms li:last-child { border-bottom: none; }
.profile-detail .terms code {
  font-size: var(--type-12); padding: 2px 6px; border-radius: 4px;
  background: var(--info-soft); border: 1px solid var(--info-line);
}
.profile-detail p { margin: 0 0 6px; line-height: 1.65; }

/* === Logos strip — design partners (drop note onto new line) === */
.logos-strip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 24px;
}
.logos-strip-h { margin: 0; font-size: var(--type-14); color: var(--text); }
.logos-strip-h strong { font-weight: 700; letter-spacing: -0.01em; }
.logos-strip-b { margin: 0; font-size: var(--type-13); color: var(--text-dim); max-width: 60ch; }
.logos-strip-cta { margin: 6px 0 0; font-size: var(--type-13); color: var(--text-muted); }
.logos-strip-cta a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.logos-strip-cta a:hover { border-bottom-style: solid; }

/* === Hero CTA + persona-select alignment === */
.hero-cta { gap: 10px; }
.persona-select { margin-top: 16px; }

/* === Comparison & coverage tables — protocol-grade rhythm === */
.cmp th, .cmp td {
  padding: 11px 14px; vertical-align: middle;
  font-size: var(--type-13); line-height: 1.5;
}
.cmp th { font-weight: 600; }

/* === Protocol-grade theme refinements === */
.h-section {
  font-feature-settings: "ss01", "cv01", "cv11";
  letter-spacing: -0.018em;
}
.eyebrow {
  font-family: var(--font-mono); font-size: var(--type-11);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  display: inline-block; margin-bottom: 6px;
  padding: 4px 10px; border-radius: 5px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
}
/* Narrow type for the spec/RFC look */
.lede { letter-spacing: -0.005em; }

/* Ensure footer marks line stays one line on wide screens */
.footer-bottom > div:first-child { line-height: 1.55; }

/* ============================================================
   PROTOCOL-GRADE THEME — RFC/spec-document aesthetic + explicit
   dark-mode (data-theme=dark) overriding the OS-preference media
   query so users can pin the theme via the toggle in the nav.
   ============================================================ */

/* Explicit dark theme (set by toggle) — always wins over media query. */
:root[data-theme="dark"] {
  --bg: #0a0e1a;
  --surface: rgba(22, 28, 48, 0.78);
  --surface-solid: #131826;
  --surface-2: rgba(15, 20, 36, 0.92);
  --surface-3: #11162a;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.05);
  --text: #eef1f9;
  --text-muted: #aab2cc;
  --text-dim: #7a83a3;
  --accent: #818cf8;          /* violet-400 */
  --accent-2: #c4b5fd;        /* violet-300 */
  --accent-soft: rgba(167, 139, 250, 0.16);
  --accent-grad: linear-gradient(120deg, #f472b6 0%, #818cf8 30%, #818cf8 55%, #22d3ee 80%, #34d399 100%);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);
  --info-line: rgba(56, 189, 248, 0.30);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --success-line: rgba(52, 211, 153, 0.30);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --warning-line: rgba(251, 191, 36, 0.30);
  --danger: #f43f5e;
  --danger-soft: rgba(244, 63, 94, 0.14);
  --danger-line: rgba(244, 63, 94, 0.30);
  --focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.45);
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 8px 24px -10px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.30);
  --shadow-3: 0 24px 56px -20px rgba(167,139,250,.45), 0 4px 12px rgba(0,0,0,.35);
  color-scheme: dark;
}
/* Explicit light theme (toggle) — wins over media query too. */
:root[data-theme="light"] {
  color-scheme: light;
}
/* When OS prefers dark AND user hasn't toggled to light, mirror dark vars. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: var(--color-neutral-900);
    --surface: rgba(22, 28, 48, 0.78);
    --surface-solid: var(--color-neutral-800);
    --surface-2: rgba(15, 20, 36, 0.92);
    --surface-3: var(--color-neutral-800);
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);
    --line-soft: rgba(255, 255, 255, 0.05);
    --text: var(--color-neutral-100);
    --text-muted: #aab2cc;
    --text-dim: #7a83a3;
    --accent-soft: rgba(167, 139, 250, 0.16);
    --success-soft: rgba(52, 211, 153, 0.14);
    --info-soft: rgba(56, 189, 248, 0.14);
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger-soft: rgba(244, 63, 94, 0.14);
    color-scheme: dark;
  }
}

/* === Footer legal row (5 legal pages — TOS, Privacy, AUP, DPA, Sub-processors) === */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center;
  padding: 14px 0 4px; margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--type-12); color: var(--text-muted);
}
.footer-legal a { color: var(--text-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal .footer-sep { color: var(--text-dim); }

/* === Sign-in button (chrome, not a hub — see NAMING.md §7) === */
.signin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--accent); color: var(--color-paper);
  border: 1px solid var(--accent);
  font-size: var(--type-13); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  margin-left: 6px;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.signin-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--color-paper); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.signin-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.signin-btn .ms { font-size: var(--type-16); }
@media (max-width: 720px) {
  .signin-btn span:not(.ms) { display: none; }
  .signin-btn { padding: 7px 9px; }
}

/* === Theme toggle button === */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--line); cursor: pointer;
  margin-left: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* === Protocol-grade aesthetic =====================================
   Treat the site like an RFC reference page: section numbers in mono,
   small caps eyebrow plates, ruled lines between major sections,
   tabular numerals for stats, hairline borders on cards, more
   decisive text-block rhythm.
   ============================================================ */

/* Section dividers — hairline above each major section so the page
   reads as a sequence of plates rather than a marketing scroll. */
.section + .section { border-top: 1px solid var(--line-soft); }

/* Numbered eyebrows on protocol-content sections. We use the existing
   .eyebrow chip but pair it with a counter for sections that opt in
   via .protocol-numbered. Mostly visual reference — non-numbered
   sections still render like before. */
.section.protocol-numbered { counter-increment: section-num; }
.protocol-numbered .eyebrow::before {
  content: "§ " counter(section-num) " · ";
  font-feature-settings: "tnum";
}
body { counter-reset: section-num; }

/* Section heads — slightly tighter tracking, never centred */
.h-section {
  letter-spacing: -0.022em; font-feature-settings: "ss01","cv01","cv11","tnum";
  text-wrap: balance;
}
.h-section .accent { text-wrap: pretty; }

/* Stats and numeric content — tabular figures everywhere */
.assurance-card .c, .stat-cell .stat-num, .cov-pill, .compliance-pill,
.persona-roi, .footer-bottom, .cmp { font-variant-numeric: tabular-nums; }

/* Code-style identifiers in body copy: render with mono + soft tint. */
:where(p, li, dd, td, summary) code,
:where(p, li, dd, td, summary) kbd {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--accent-soft); color: var(--accent);
  padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}

/* Inline links inside prose — protocol grade: subtle dotted underline,
   solid on hover. */
:where(p, li, dd, td, summary) > a:not(.btn):not(.nav-cta):not(.persona-chip):not(.prof-pill):not(.compliance-pill):not(.version-pill):not(.theme-toggle) {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
:where(p, li, dd, td, summary) > a:not(.btn):hover { border-bottom-style: solid; }

/* Brand mark in dark mode — fall back to mono stroke */
:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .brand-mark { color: var(--accent-2); }

/* Hero pill in dark mode */
:root[data-theme="dark"] .hero-pill { color: var(--text); border-color: var(--line-strong); }

/* Mass-tinted surfaces should re-tint correctly in dark mode */
:root[data-theme="dark"] .what-card,
:root[data-theme="dark"] .ps-card,
:root[data-theme="dark"] .qs-card,
:root[data-theme="dark"] .how-card,
:root[data-theme="dark"] .persona-card,
:root[data-theme="dark"] .sector-card,
:root[data-theme="dark"] .state-card,
:root[data-theme="dark"] .assurance-card,
:root[data-theme="dark"] .what-row {
  background: var(--surface-solid);
  border-color: var(--line);
}
:root[data-theme="dark"] .what-row,
:root[data-theme="dark"] .what-def-gloss li {
  background: var(--surface-2);
}
:root[data-theme="dark"] .ps-card.solution {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.06), var(--surface-solid));
}
:root[data-theme="dark"] .ps-card.problem  { border-color: rgba(244, 63, 94, 0.30); }
:root[data-theme="dark"] .ps-card.solution { border-color: rgba(52, 211, 153, 0.32); }
:root[data-theme="dark"] .ps-card.problem .ps-tag  { background: rgba(244, 63, 94, 0.14); color: #fda4af; border-color: rgba(244, 63, 94, 0.32); }
:root[data-theme="dark"] .ps-card.solution .ps-tag { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.32); }

/* Quickstart code block — already dark in light theme, keep distinct in dark */
:root[data-theme="dark"] .qs-pane-wrap pre { background: #04060c; border: 1px solid var(--line); }
:root[data-theme="dark"] .qs-tabs { background: color-mix(in srgb, var(--color-scrim) 55%, transparent); }

/* Compliance / coverage pills — re-tint */
:root[data-theme="dark"] .cov-pill { background: rgba(167,139,250,0.12); color: var(--accent-2); border-color: rgba(167,139,250,0.22); }
:root[data-theme="dark"] .cov-pill.line { background: rgba(56,189,248,0.12); color: var(--info); border-color: rgba(56,189,248,0.22); }
:root[data-theme="dark"] .cov-pill.gov  { background: rgba(52,211,153,0.12); color: var(--success); border-color: rgba(52,211,153,0.22); }
:root[data-theme="dark"] .compliance-pill,
:root[data-theme="dark"] .version-pill {
  background: var(--success-soft); color: #6ee7b7; border-color: var(--success-line);
}

/* Footer in dark mode */
:root[data-theme="dark"] .footer { border-top-color: var(--line); }
:root[data-theme="dark"] .footer a { color: var(--text-muted); }
:root[data-theme="dark"] .footer a:hover { color: var(--accent); }

/* FAQ details */
:root[data-theme="dark"] .faq-item { background: var(--surface-solid); border-color: var(--line); }
:root[data-theme="dark"] .faq-item summary { color: var(--text); }

/* Hero gradients in dark mode */
:root[data-theme="dark"] .hero-bg { opacity: 0.55; mix-blend-mode: screen; }
:root[data-theme="dark"] .hero-grid { opacity: 0.18; }

/* RFC-style page rule: whitepaper uses a similar look for consistency */
.wp-body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .wp-body { background: var(--bg); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text); }

/* Deployed-at pill — visible production-deploy marker */
.deployed-pill {
  margin-left: 6px;
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-line);
}
.deployed-pill .dot { background: var(--info); box-shadow: 0 0 8px var(--info); }

/* ============================================================
   MOBILE RESPONSIVE — comprehensive fix pass for v1.0 sections
   added after the original layout. Scoped here so they win in
   the cascade and override earlier declarations.
   ============================================================ */

/* assurance-grid: 6 cards (was 4-col which orphaned rows) */
.assurance-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .assurance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .assurance-grid { grid-template-columns: 1fr; gap: 10px; } }
.assurance-card { padding: 18px 18px 16px; }
.assurance-card .c { font-size: clamp(20px, 5vw, 26px); line-height: 1.1; }
.assurance-card .b { font-size: var(--type-12); }

/* hero pills row: prevent overflow when deployed-pill + version-pill stack */
.hero-pill, .version-pill, .deployed-pill {
  max-width: 100%; box-sizing: border-box; white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden;
}
@media (max-width: 600px) {
  .hero-pill, .version-pill, .deployed-pill {
    margin-left: 0 !important; margin-top: 6px;
    font-size: var(--type-11);
  }
  .hero-pill { font-size: var(--type-11); }
}
@media (max-width: 380px) {
  .deployed-pill .dot ~ * , .version-pill { font-size: var(--type-11); }
}

/* persona-select chip row: align label + 7 chips on narrow screens */
@media (max-width: 600px) {
  .persona-select { gap: 6px; row-gap: 6px; align-items: flex-start; }
  .persona-select-label { width: 100%; margin-right: 0; margin-bottom: 2px; font-size: var(--type-11); }
  .persona-chip { font-size: var(--type-11); padding: 5px 10px; }
}

/* sector-grid + state-grid: tighten on narrow screens (already 1-col at 600) */
@media (max-width: 600px) {
  .sector-card { padding: 18px; }
  .sector-card h3 { font-size: var(--type-16); }
  .sector-card .sector-pain { font-size: var(--type-12); }
  .sector-card .prof-pill { font-size: var(--type-11); padding: 3px 8px; }
  .sector-card .sector-frameworks { font-size: var(--type-11); }
  .state-card { padding: 16px; gap: 8px; }
  .state-card .state-h { font-size: var(--type-12); padding: 3px 8px; }
  .state-card .state-desc { font-size: var(--type-13); }
  .state-card .state-vals li code { font-size: var(--type-11); padding: 2px 7px; }
  .state-card .state-emit { font-size: var(--type-11); }
}

/* what-card: ensure two-col gloss collapses cleanly */
@media (max-width: 700px) {
  .what-card { padding: 22px 22px 20px; }
  .what-card .what-def { font-size: clamp(16px, 4vw, 20px); }
  .what-card .what-def-gloss li {
    grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 14px !important;
  }
  .what-card .what-def-gloss li strong { min-width: 0 !important; }
}

/* problem-solution cards: padding tighten */
@media (max-width: 600px) {
  .ps-card { padding: 22px 20px; }
  .ps-h { font-size: var(--type-16); }
  .ps-list li { font-size: var(--type-13); }
}

/* how-grid: tighten + outcomes list mobile */
@media (max-width: 600px) {
  .how-card { padding: 22px 20px; }
  .how-card .how-h { font-size: var(--type-16); }
  .how-card .how-b { font-size: var(--type-13); }
  .how-outcomes li { font-size: var(--type-12); line-height: 1.5; }
  .how-pill { font-size: var(--type-11); padding: 3px 8px; }
}

/* persona-card ROI bullets readable on mobile */
@media (max-width: 600px) {
  .persona-card { padding: 22px 20px; }
  .persona-card h3 { font-size: var(--type-16); }
  .persona-card .pain { font-size: var(--type-12); }
  .persona-roi li { font-size: var(--type-11); line-height: 1.45; }
}

/* compliance pill row: don't overflow */
@media (max-width: 600px) {
  .compliance-row { gap: 6px; }
  .compliance-pill { font-size: var(--type-11); padding: 4px 9px; }
  .compliance-row .lbl { font-size: var(--type-11); }
}

/* footer-grid: ensure 1-col on mobile breaks cleanly */
@media (max-width: 600px) {
  .footer-grid { padding: 28px 0 16px; gap: 18px; }
  .footer-col h4 { font-size: var(--type-11); margin-bottom: 10px; }
  .footer-col a { font-size: var(--type-13); }
  .footer-bottom { font-size: var(--type-11); padding: 14px 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom > div { width: 100%; }
}

/* Nav: ensure theme-toggle stays visible on mobile + nav items don't crowd */
@media (max-width: 700px) {
  .nav-inner { gap: 6px; height: 56px; }
  .nav-links { gap: 12px; }
  .theme-toggle { width: 32px; height: 32px; margin-left: 4px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .nav-cta { padding: 6px 12px; font-size: var(--type-13); }
}
@media (max-width: 480px) {
  .nav-links { gap: 8px; font-size: var(--type-12); }
  .nav-cta { padding: 6px 10px; font-size: var(--type-12); }
}

/* Hero h1 + lede sized for very narrow */
@media (max-width: 380px) {
  .hero h1 { font-size: var(--type-28); line-height: 1.08; }
  .hero p.lede { font-size: var(--type-14); line-height: 1.5; }
}

/* Section eyebrow shouldn't be huge on mobile */
@media (max-width: 600px) {
  .eyebrow { font-size: var(--type-11); padding: 3px 8px; }
  .h-section { font-size: clamp(22px, 6vw, 30px); margin-bottom: 8px; }
  .lede { font-size: var(--type-14); line-height: 1.55; }
}

/* coverage / cmp tables — horizontal scroll on mobile */
@media (max-width: 600px) {
  .cmp th, .cmp td { padding: 9px 10px; font-size: var(--type-12); }
}

/* Quickstart code block — narrower padding on mobile */
@media (max-width: 480px) {
  .qs-pane-wrap pre { padding: 14px 12px; font-size: var(--type-11); line-height: 1.5; }
  .qs-tab { padding: 9px 10px; font-size: var(--type-11); }
}

/* Body min-width for very narrow screens */
body { min-width: 320px; }

/* Prevent horizontal scroll on the whole page */
html, body { overflow-x: hidden; }

/* ============================================================
   ENTERPRISE / PROTOCOL-GRADE THEME — final polish pass.
   Goals:
     - RFC / W3C aesthetic: less gradient, more hairline, monospace
       weight on identifiers, more whitespace.
     - Confident heading hierarchy: bigger H1, tighter H2, mono H3
       indices.
     - Restrained palette: graphite text, single-accent violet,
       neutral surfaces, no decorative gradients in body content.
     - Tight rules between sections (1px hairline).
     - Compliance-document body rhythm: max-width 72ch on prose,
       baseline grid implied.
   ============================================================ */

:root {
  /* Refined palette tokens (enterprise) */
  --ink: #0b0f1c;
  --ink-2: #1a2238;
  --ink-3: #3b4567;
  --paper: #fcfcfd;
  --paper-2: #f6f7fa;
  --rule: rgba(15, 23, 42, 0.10);
  --rule-soft: rgba(15, 23, 42, 0.06);
  --rule-strong: rgba(15, 23, 42, 0.16);
  --accent-ink: #4c1d95;       /* deeper violet for serious surfaces */
  /* Inherit, don't override existing tokens; map for clarity */
}

:root[data-theme="dark"] {
  --ink: #eef1f9;
  --ink-2: #d6dbeb;
  --ink-3: #aab2cc;
  --paper: #0a0e1a;
  --paper-2: #11162a;
  --rule: rgba(255,255,255,0.10);
  --rule-soft: rgba(255,255,255,0.06);
  --rule-strong: rgba(255,255,255,0.18);
  --accent-ink: #c4b5fd;
}

/* Body rhythm — RFC-document line-height + measure */
body {
  font-feature-settings: "ss01","cv01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lede, p.lede {
  max-width: 72ch;
}
.section p:not(.lede):not(.what-b):not(.how-b):not(.sector-pain):not(.pain) {
  max-width: 78ch;
}

/* Section border-top lives in the canonical block at line 193. */
.section.alt { background: var(--paper-2); }

/* Heading hierarchy — tighter tracking, more confident */
.h-section {
  letter-spacing: -0.024em;
  font-weight: 700;
  text-wrap: balance;
}
.h-section .accent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--accent) !important;
}
h3 { letter-spacing: -0.014em; font-weight: 650; }
h4 { letter-spacing: -0.008em; font-weight: 600; }

/* Eyebrow plate: monospace, small caps treatment, hairline border */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* Card baseline — subtle elevation, no glass blur in body */
.what-card, .ps-card, .how-card, .persona-card, .sector-card,
.state-card, .assurance-card, .evo-card, .repo-card, .what-row,
.what-def-gloss li {
  background: var(--surface-solid);
  border: 1px solid var(--rule);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.what-card { box-shadow: 0 1px 0 var(--rule-soft); }

/* Numeric stat treatment — monospace tabular figures, ink colour
   (no gradient), accent only on hover */
.assurance-card .c, .stat-num {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-feature-settings: "tnum";
}
:root[data-theme="dark"] .assurance-card .c,
:root[data-theme="dark"] .stat-num {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Hero — protocol-document style, less marketing gradient */
.hero h1 .accent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--accent) !important;
}
.hero p.lede { color: var(--ink-3); }

/* Buttons — enterprise restraint */
.btn-primary {
  background: var(--accent);
  color: white !important;
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-secondary {
  background: var(--surface-solid);
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent) !important; }
.btn-ghost {
  background: transparent;
  color: var(--ink-3) !important;
  border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--accent) !important; border-color: var(--rule); }

/* Pills — single visual language */
.hero-pill, .version-pill, .deployed-pill, .compliance-pill, .persona-chip,
.prof-pill, .cov-pill, .how-pill {
  border-radius: 6px;
  font-feature-settings: "tnum";
}

/* Identifiers / code in prose — graphite ink on tinted plate */
:where(p, li, dd, td, summary) code,
:where(p, li, dd, td, summary) kbd {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font-weight: 500;
}
:root[data-theme="dark"] :where(p, li, dd, td, summary) code {
  background: rgba(167,139,250,0.08);
  color: var(--accent-2);
}

/* Footnotes / dim copy */
.footer, .footer-bottom { background: var(--paper-2); }
.footer-bottom { color: var(--ink-3); }
.footer-col h4 { color: var(--ink-3); font-weight: 700; }

/* Tables — RFC-style: hairline grid, no zebra unless data-heavy */
.cmp {
  border: 1px solid var(--rule);
  border-collapse: collapse;
}
.cmp th, .cmp td {
  border-bottom: 1px solid var(--rule-soft);
}
.cmp th {
  background: var(--paper-2);
  text-align: left;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Profile / capability tabs — protocol-document tab strip */
.profile-tab {
  font-family: var(--font-mono);
  letter-spacing: -0.005em;
  border-radius: 4px;
}
.profile-tab.is-active {
  background: var(--ink);
  color: var(--paper) !important;
  border-color: var(--ink);
  box-shadow: none;
}
:root[data-theme="dark"] .profile-tab.is-active {
  background: var(--accent);
  color: var(--paper) !important;
  border-color: var(--accent);
}

/* Profile detail — monospaced endpoint plates */
.profile-detail .endpoints li {
  font-family: var(--font-mono);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--type-11);
  letter-spacing: -0.005em;
  padding: 8px 12px;
  border-radius: 4px;
}

/* "Trust & assurance" stat type — monospace pure */
.assurance-card .h {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  font-size: var(--type-11);
  color: var(--ink-3);
}

/* Compliance pills — neutral by default, semantic on context */
.compliance-pill {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Brand mark in nav — graphite ink */
.brand { color: var(--ink); }
.brand-mark { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .brand-mark { background: var(--accent); color: var(--paper); }

/* Subtle right-rail anchor styling */
:where(p, li, dd, td, summary) > a:not(.btn):not(.nav-cta):not(.persona-chip):not(.prof-pill):not(.compliance-pill):not(.version-pill):not(.theme-toggle):not(.deployed-pill):not(.persona-chip) {
  color: var(--accent-ink);
  border-bottom-color: var(--rule-strong);
}

/* Quickstart card frame — RFC code-listing aesthetic */
.qs-card {
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  box-shadow: none;
}
.qs-tabs {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

/* What-card baseline */
.what-card .what-def {
  color: var(--ink);
  font-weight: 500;
}
.what-card .what-def .accent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--accent) !important;
}

/* Section padding lives in the canonical block at line 193. */

/* Subtler CT elements */
.cov-pill { font-family: var(--font-mono); border-radius: 4px; }

/* Logos strip */
.logos-strip {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

/* ============================================================
   §END — FINAL CASCADE OVERRIDE
   Last block in the file so every previous rule is superseded.
   Removes marketing chrome (multi-stop gradients, glass blur on
   surfaces, rainbow text), restates enterprise palette, locks
   identifiers to monospace.
   ============================================================ */

/* Kill every accent-grad gradient text in body content */
.h-section .accent,
.hero h1 .accent,
.what-def .accent,
.evo-card.kye h3,
.assurance-card .c,
.stat-num,
.brand,
.brand span {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important;
}
.h-section .accent,
.hero h1 .accent,
.what-def .accent { color: var(--accent) !important; }
.assurance-card .c,
.stat-num         { color: var(--ink, var(--text)) !important; font-feature-settings: "tnum"; }
.evo-card.kye h3  { color: var(--accent) !important; }

/* Kill glass blur on body surfaces (keep only on the sticky nav) */
.what-card, .ps-card, .qs-card, .how-card, .persona-card, .sector-card,
.state-card, .assurance-card, .evo-card, .repo-card, .what-row,
.what-def-gloss li, .lc-card, .tg-info, .ba-stage, .cascade-stage,
.dash-counter, .fl-card, .seq-stage, .urn-out, .vocab-list, .vocab-cats,
.profile-detail, .qs-pane-wrap {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Make every surface use the solid paper color */
.what-card, .ps-card, .qs-card, .how-card, .persona-card, .sector-card,
.state-card, .assurance-card, .evo-card, .repo-card, .what-row,
.what-def-gloss li, .lc-card, .profile-detail {
  background-color: var(--surface-solid) !important;
  border: 1px solid var(--rule, var(--line)) !important;
  box-shadow: 0 1px 0 var(--rule-soft, var(--line-soft)) !important;
}
:root[data-theme="dark"] .what-card,
:root[data-theme="dark"] .ps-card,
:root[data-theme="dark"] .qs-card,
:root[data-theme="dark"] .how-card,
:root[data-theme="dark"] .persona-card,
:root[data-theme="dark"] .sector-card,
:root[data-theme="dark"] .state-card,
:root[data-theme="dark"] .assurance-card,
:root[data-theme="dark"] .evo-card,
:root[data-theme="dark"] .repo-card,
:root[data-theme="dark"] .what-row,
:root[data-theme="dark"] .what-def-gloss li,
:root[data-theme="dark"] .lc-card,
:root[data-theme="dark"] .profile-detail {
  background-color: var(--surface-solid) !important;
}

/* Hero pill row: protocol-document marker line */
.hero-pill {
  background: var(--paper-2) !important;
  color: var(--accent) !important;
  border: 1px solid var(--rule) !important;
  font-family: var(--font-mono);
  font-size: var(--type-11);
  letter-spacing: 0.06em;
}

/* Section background tint: alternate plates without thick fills */
.section.alt {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Section border-top lives in the canonical block at line 193;
 * .section + .section softer divider lives at line 1806. */

/* Buttons */
.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
}
.btn-secondary {
  background: var(--surface-solid) !important;
  color: var(--ink, var(--text)) !important;
  border: 1px solid var(--rule-strong, var(--line-strong)) !important;
}

/* Identifiers across body */
:where(p, li, dd, td, summary) code,
:where(p, li, dd, td, summary) kbd {
  font-family: var(--font-mono) !important;
  background: var(--paper-2) !important;
  color: var(--accent-ink, var(--accent)) !important;
  border: 1px solid var(--rule, var(--line)) !important;
  font-weight: 500 !important;
}

/* The brand mark in nav is graphite-on-paper, not gradient */
.brand-mark {
  background: var(--ink, var(--text)) !important;
  color: var(--paper, var(--bg)) !important;
}
:root[data-theme="dark"] .brand-mark {
  background: var(--accent) !important;
  color: var(--paper) !important;
}

/* === AUTHORITY FINALITY — category contrast plate === */
.af-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px;
}
@media (max-width: 900px) { .af-wrap { grid-template-columns: 1fr; } }
.af-card {
  background: var(--surface-solid); border: 1px solid var(--rule);
  border-radius: 10px; padding: 28px;
  position: relative;
}
.af-card.af-then { border-color: var(--rule-strong); }
.af-card.af-now  { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.af-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 4px;
  font-family: var(--font-mono); font-size: var(--type-11);
  font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--rule);
  margin-bottom: 14px;
}
.af-card.af-now .af-tag { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.af-h {
  font-size: var(--type-22); font-weight: 700; letter-spacing: -0.018em;
  margin: 8px 0 16px; color: var(--ink);
}
.af-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.af-list li {
  position: relative; padding-left: 22px;
  font-size: var(--type-14); line-height: 1.55; color: var(--text);
}
.af-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule-strong);
}
.af-card.af-now .af-list li::before { background: var(--accent); }
.af-card.af-now .af-list li strong  { color: var(--ink); }
.af-foot {
  margin-top: 24px; padding: 18px 22px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px;
  font-size: var(--type-14); color: var(--text-muted); line-height: 1.65;
  max-width: 900px;
}
@media (max-width: 600px) {
  .af-card { padding: 22px 20px; }
  .af-h { font-size: var(--type-18); }
  .af-list li { font-size: var(--type-13); }
  .af-foot { font-size: var(--type-13); padding: 14px 16px; }
}

/* ============================================================
   TM/® GLYPH — final size pass.
   The earlier rules (0.62em body / 0.52em display) read too large
   on dark surfaces and against monospace eyebrows. Tightened so
   the mark sits visually like a Word-doc superscript.
   ============================================================ */
:root {
  /* ============================================================
     ™ / ® token system — single source of truth.
     Five contexts, ratios calibrated so the mark renders at the
     same *visual* size regardless of surrounding font size.

       --tm-em-display  :  hero h1, section h2, lede, .h-section
       --tm-em-h3       :  h3 / h4 / h5 (card headings)
       --tm-em-body     :  default body text, paragraphs, list items
       --tm-em-chrome   :  eyebrows, pills, tabs, buttons (small UI)
       --tm-em-modal    :  contact modal + overlays (mid-weight)

     The cascade below maps each context to one of these tokens; any
     element NOT matched falls back to --tm-em-body via :root --tm-em.
     ============================================================ */
  --tm-em-display: 0.58em;   /* h1 / h2 / lede */
  --tm-em-h3:      0.72em;   /* h3 / h4 / h5  */
  --tm-em-body:    0.85em;   /* default body  */
  --tm-em-chrome:  0.92em;   /* eyebrows + pills + buttons */
  --tm-em-modal:   0.82em;   /* modals + dialogs */

  --tm-rise-display: 0.46em;
  --tm-rise-h3:      0.36em;
  --tm-rise-body:    0.30em;
  --tm-rise-chrome:  0.28em;
  --tm-rise-modal:   0.32em;

  /* Active values bound to context. Default = body. */
  --tm-em:   var(--tm-em-body);
  --tm-rise: var(--tm-rise-body);
  --tm-letterspacing: 0;
}
/* Display heads */
.h-section, .lede, .what-def, .ps-h, h1, h2, .hero h1, .wp-article h1 {
  --tm-em:   var(--tm-em-display);
  --tm-rise: var(--tm-rise-display);
}
/* h3 / h4 / h5 (card heads, profile heads, accordion labels) */
h3, h4, h5, .ps-tag {
  --tm-em:   var(--tm-em-h3);
  --tm-rise: var(--tm-rise-h3);
}
/* Small chrome — eyebrows, pills, tabs, buttons */
.eyebrow, .hero-pill, .version-pill, .deployed-pill, .compliance-pill,
.qs-tab, .profile-tab, .prof-pill, .cn-pill, .btn, .bd-head, .bd-chip,
.wk-tab, .wk-panel-h, .layer-num + .ms {
  --tm-em:   var(--tm-em-chrome);
  --tm-rise: var(--tm-rise-chrome);
}
/* Contact modal + overlays */
.contact-modal, .modal, .dialog, .kye-modal {
  --tm-em:   var(--tm-em-modal);
  --tm-rise: var(--tm-rise-modal);
}
/* The wrapping span itself uses font-size:inherit by default; explicit
   here so we can tune only the rise/scale via tokens. */
.tm, .reg {
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  font-size: var(--tm-em) !important;
  vertical-align: var(--tm-rise) !important;
  letter-spacing: var(--tm-letterspacing) !important;
  margin-left: 0.04em;
  margin-right: 0.02em;
  font-feature-settings: "tnum" 0, "ss01" 0, "ss02" 0;
}
/* Non-breaking glue group injected by glueTrademarkSpans() in
   components.js so the marked term + ™/® never wraps onto separate
   lines on narrow viewports. The wrapper lifts the last word of the
   preceding text node into a nowrap container alongside the .tm
   element, so the line-break opportunity between them disappears. */
.tm-glue {
  white-space: nowrap;
}

/* ============================================================
   MOBILE NAV — horizontal-scroll instead of progressive-hide.
   The previous rules hid items at each breakpoint, leaving the
   user with no way to reach them. New rule: keep every item, let
   the user swipe horizontally on narrow screens.
   ============================================================ */
@media (max-width: 1100px) {
  /* override every progressive-hide rule */
  .nav-links a[href*="Discussions"],
  .nav-links a[href="#evolution"],
  .nav-links a[href="#cmp"],
  .nav-links a[href="#faq"],
  .nav-links a[href="whitepaper.html"],
  .nav-links a[href="#problem-solution"],
  .nav-links a[href="#how"],
  .nav-links a[href="#what"],
  .nav-links a[href="#sectors"],
  .nav-links a[href="#profiles"],
  .nav-links a[href="#state-model"],
  .nav-links a[href="#authority-finality"],
  .nav-links a[href="#assurance"] {
    display: inline-flex !important;
  }
  .nav-links {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
    padding-right: 14px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; scroll-snap-align: start; flex-shrink: 0; }
  .nav-links .nav-cta { flex-shrink: 0; }
  .nav-links .theme-toggle { flex-shrink: 0; }
}
@media (max-width: 700px) {
  .nav-inner { gap: 8px; }
  .nav-links { gap: 14px; font-size: var(--type-13); }
  .nav-cta { padding: 6px 10px; font-size: var(--type-12); }
}
@media (max-width: 480px) {
  .nav-links { gap: 12px; font-size: var(--type-12); padding-left: 4px; }
}

/* ============================================================
   §FINAL — ENTERPRISE / PROTOCOL THEME PALETTE (definitive).
   Replaces the marketing violet+pink with a restrained
   slate-and-indigo palette. Single accent (indigo-700), single
   ink scale, single rule scale. No gradients in body content.
   ============================================================ */

/* Light theme (definitive) */
:root, :root[data-theme="light"] {
  --bg:            #fbfbfd;
  --paper:         #ffffff;
  --paper-2:       #f4f5f8;
  --paper-3:       #eceef3;
  --surface:       #ffffff;
  --surface-solid: #ffffff;
  --surface-2:     #f4f5f8;
  --surface-3:     #eceef3;
  --rule:          rgba(15, 23, 42, 0.10);
  --rule-soft:     rgba(15, 23, 42, 0.06);
  --rule-strong:   rgba(15, 23, 42, 0.18);
  --line:          rgba(15, 23, 42, 0.10);
  --line-soft:     rgba(15, 23, 42, 0.06);
  --line-strong:   rgba(15, 23, 42, 0.18);
  --ink:           #0a1224;       /* slate-950 */
  --ink-2:         #1f2a44;       /* slate-800 */
  --ink-3:         #4a566f;       /* slate-600 */
  --text:          #0a1224;
  --text-muted:    #4a566f;
  --text-dim:      #7c879a;
  --accent:        #3730a3;       /* indigo-800 — enterprise accent */
  --accent-2:      #4338ca;       /* indigo-700 */
  --accent-ink:    #312e81;       /* indigo-900 — for prose links */
  --accent-soft:   rgba(55, 48, 163, 0.10);
  --accent-line:   rgba(55, 48, 163, 0.22);
  --accent-grad:   #3730a3;       /* solid; was rainbow gradient */
  --info:          #0369a1;
  --info-soft:     rgba(3, 105, 161, 0.10);
  --info-line:     rgba(3, 105, 161, 0.22);
  --success:       #047857;
  --success-soft:  rgba(4, 120, 87, 0.10);
  --success-line:  rgba(4, 120, 87, 0.22);
  --warning:       #b45309;
  --warning-soft:  rgba(180, 83, 9, 0.10);
  --warning-line:  rgba(180, 83, 9, 0.22);
  --danger:        #b91c1c;
  --danger-soft:   rgba(185, 28, 28, 0.10);
  --danger-line:   rgba(185, 28, 28, 0.22);
  --shadow-1:      0 1px 0 rgba(15, 23, 42, 0.05);
  --shadow-2:      0 1px 0 rgba(15, 23, 42, 0.05), 0 4px 16px -8px rgba(15, 23, 42, 0.10);
  --shadow-3:      0 1px 0 rgba(15, 23, 42, 0.05), 0 12px 32px -16px rgba(15, 23, 42, 0.16);
  --focus-ring:    0 0 0 3px rgba(55, 48, 163, 0.30);
  color-scheme:    light;
}

/* Dark theme (definitive) */
:root[data-theme="dark"] {
  --bg:            #0a0e1a;
  --paper:         #0f1426;
  --paper-2:       #131a30;
  --paper-3:       #1a223b;
  --surface:       #0f1426;
  --surface-solid: #0f1426;
  --surface-2:     #131a30;
  --surface-3:     #1a223b;
  --rule:          rgba(255, 255, 255, 0.10);
  --rule-soft:     rgba(255, 255, 255, 0.05);
  --rule-strong:   rgba(255, 255, 255, 0.18);
  --line:          rgba(255, 255, 255, 0.10);
  --line-soft:     rgba(255, 255, 255, 0.05);
  --line-strong:   rgba(255, 255, 255, 0.18);
  --ink:           #eef1f9;
  --ink-2:         #c9d0e3;
  --ink-3:         #94a0bf;
  --text:          #eef1f9;
  --text-muted:    #94a0bf;
  --text-dim:      #6d7794;
  --accent:        #818cf8;       /* indigo-400 readable on dark */
  --accent-2:      #a5b4fc;       /* indigo-300 */
  --accent-ink:    #c7d2fe;       /* indigo-200 — for prose links */
  --accent-soft:   rgba(129, 140, 248, 0.14);
  --accent-line:   rgba(129, 140, 248, 0.30);
  --accent-grad:   #818cf8;
  --info:          #38bdf8;
  --info-soft:     rgba(56, 189, 248, 0.14);
  --info-line:     rgba(56, 189, 248, 0.30);
  --success:       #34d399;
  --success-soft:  rgba(52, 211, 153, 0.14);
  --success-line:  rgba(52, 211, 153, 0.30);
  --warning:       #fbbf24;
  --warning-soft:  rgba(251, 191, 36, 0.14);
  --warning-line:  rgba(251, 191, 36, 0.30);
  --danger:        #f87171;
  --danger-soft:   rgba(248, 113, 113, 0.14);
  --danger-line:   rgba(248, 113, 113, 0.30);
  --shadow-1:      0 1px 0 rgba(0, 0, 0, 0.40);
  --shadow-2:      0 1px 0 rgba(0, 0, 0, 0.40), 0 4px 16px -8px rgba(0, 0, 0, 0.55);
  --shadow-3:      0 1px 0 rgba(0, 0, 0, 0.40), 0 12px 32px -16px rgba(0, 0, 0, 0.65);
  --focus-ring:    0 0 0 3px rgba(165, 180, 252, 0.40);
  color-scheme:    dark;
}

/* Force final palette to win body-wide */
html, body { background-color: var(--bg) !important; color: var(--text) !important; }

/* Brand mark — solid ink fill, no gradient */
.brand-mark {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 6px;
}
:root[data-theme="dark"] .brand-mark {
  background: var(--accent) !important;
  color: var(--paper) !important;
}

/* Hero accent text — solid ink, no gradient */
.hero h1 .accent,
.h-section .accent,
.what-def .accent,
.evo-card.kye h3 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Stat numbers — solid ink with mono digits */
.stat-num, .assurance-card .c {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
  font-feature-settings: "tnum";
}

/* Section.alt — paper-2 plate with hairlines */
.section.alt {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Card baseline — flat paper, hairline border, micro-shadow only */
.what-card, .ps-card, .qs-card, .how-card, .persona-card, .sector-card,
.state-card, .assurance-card, .evo-card, .repo-card, .what-row,
.what-def-gloss li, .lc-card, .profile-detail, .af-card, .faq-item, .logos-strip {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: var(--shadow-1) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 8px !important;
}
.what-row, .what-def-gloss li { background: var(--paper-2) !important; }

/* Eyebrow — mono small caps on tinted plate, hairline border */
.eyebrow {
  font-family: var(--font-mono) !important;
  font-size: var(--type-11) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--accent-ink) !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* Headings — tighter tracking, ink colour */
.h-section, h1, h2 {
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--ink);
}

/* Buttons — restrained */
.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
  font-weight: 500;
  border-radius: 6px !important;
}
.btn-primary:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.btn-secondary {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 6px !important;
}
.btn-secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-ghost {
  background: transparent !important;
  color: var(--ink-3) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
}
.btn-ghost:hover { color: var(--accent) !important; border-color: var(--rule) !important; }

/* Pills — hairline + mono */
.hero-pill, .version-pill, .deployed-pill, .compliance-pill, .persona-chip,
.prof-pill, .cov-pill, .how-pill {
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum";
}
.hero-pill {
  background: var(--paper-2) !important;
  color: var(--accent) !important;
  border: 1px solid var(--rule) !important;
}
.version-pill, .deployed-pill {
  background: var(--paper-2) !important;
  color: var(--ink-3) !important;
  border: 1px solid var(--rule) !important;
}
.deployed-pill { color: var(--success) !important; border-color: var(--success-line) !important; background: var(--success-soft) !important; }
.compliance-pill {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong) !important;
}
.persona-chip {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}
.persona-chip:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.prof-pill {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
}

/* Inline code — mono on tinted plate */
:where(p, li, dd, td, summary) code,
:where(p, li, dd, td, summary) kbd {
  font-family: var(--font-mono) !important;
  background: var(--paper-2) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--rule) !important;
  font-weight: 500 !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
}

/* Profile tabs — protocol-doc tab strip */
.profile-tab {
  font-family: var(--font-mono) !important;
  border-radius: 4px !important;
  background: var(--paper-2) !important;
  color: var(--ink-3) !important;
  border: 1px solid var(--rule) !important;
}
.profile-tab.is-active {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
:root[data-theme="dark"] .profile-tab.is-active {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border-color: var(--accent) !important;
}

/* Endpoint plates — mono RFC look */
.profile-detail .endpoints li {
  font-family: var(--font-mono) !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  border-radius: 4px !important;
  padding: 7px 11px !important;
  font-size: var(--type-11) !important;
}

/* Tables — RFC hairline grid */
.cmp {
  border: 1px solid var(--rule);
  border-collapse: collapse;
  background: var(--paper);
}
.cmp th {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--rule-strong);
}
.cmp td { border-bottom: 1px solid var(--rule-soft); }

/* Hero gradients — neutralise */
.hero-bg { display: none !important; }
.hero-grid { opacity: 0.10 !important; }

/* Footer — paper-2 plate */
.footer { background: var(--paper-2) !important; border-top: 1px solid var(--rule); }
.footer-bottom { color: var(--ink-3); }

/* Authority Finality plate — make the active card stand out cleanly */
.af-card.af-now { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.af-card.af-now .af-tag { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent-line) !important; }
.af-card.af-then .af-tag { background: var(--paper-2) !important; color: var(--ink-3) !important; border-color: var(--rule) !important; }

/* Inline links in prose — protocol-doc style */
:where(p, li, dd, td, summary) > a:not(.btn):not(.nav-cta):not(.persona-chip):not(.prof-pill):not(.compliance-pill):not(.version-pill):not(.theme-toggle):not(.deployed-pill) {
  color: var(--accent-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed currentColor !important;
}
:where(p, li, dd, td, summary) > a:not(.btn):hover { border-bottom-style: solid !important; }

/* Selection */
::selection { background: var(--accent-soft); color: var(--ink); }

/* Scroll-bar tinting */
* { scrollbar-color: var(--rule-strong) transparent; }

/* === Compliance frameworks plate === */
.cf-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px;
}
@media (max-width: 900px) { .cf-wrap { grid-template-columns: 1fr; } }
.cf-card {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 28px;
  box-shadow: var(--shadow-1) !important;
}
.cf-card.cf-aia { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.cf-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 4px;
  font-family: var(--font-mono); font-size: var(--type-11);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--rule);
  margin-bottom: 12px;
}
.cf-card.cf-aia .cf-tag { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.cf-h {
  font-size: var(--type-22); font-weight: 700; letter-spacing: -0.018em;
  margin: 0 0 12px; color: var(--ink);
}
.cf-b { font-size: var(--type-14); color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.cf-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--type-13); color: var(--text);
}
.cf-list li { padding-left: 4px; }
.cf-list code {
  font-family: var(--font-mono); font-size: var(--type-12);
  background: var(--paper-2); color: var(--accent-ink);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 1px 6px; margin-right: 4px;
}
.cf-grid-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--type-13); color: var(--text-muted); line-height: 1.55;
}
.cf-grid-list strong { color: var(--ink); font-weight: 600; }
.cf-foot {
  margin: 16px 0 0; padding: 12px 14px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 6px; font-size: var(--type-13); color: var(--text-muted); line-height: 1.6;
}
.cf-disclaimer {
  margin: 24px auto 0; max-width: 80ch;
  font-size: var(--type-13); color: var(--text-dim); line-height: 1.65;
  text-align: center; padding: 14px 18px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px;
}
@media (max-width: 600px) {
  .cf-card { padding: 20px; }
  .cf-h { font-size: var(--type-18); }
  .cf-list { font-size: var(--type-12); }
  .cf-grid-list { font-size: var(--type-12); }
}

/* === Architecture principles plate (8-card grid) === */
.arch-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px;
}
@media (max-width: 1080px) { .arch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .arch-grid { grid-template-columns: 1fr; } }
.arch-card {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-1) !important;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.arch-card .arch-num {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-mono); font-size: var(--type-11);
  color: var(--ink-3); letter-spacing: 0.08em; font-weight: 600;
  background: var(--paper-2); padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--rule);
}
.arch-card .arch-h {
  font-size: var(--type-16); font-weight: 700; letter-spacing: -0.014em;
  margin: 0 0 4px; color: var(--ink);
}
.arch-card .arch-b {
  font-size: var(--type-13); line-height: 1.55; color: var(--text-muted); margin: 0;
}
.arch-card .arch-path {
  display: block; margin-top: auto; padding: 6px 9px;
  font-family: var(--font-mono); font-size: var(--type-11);
  color: var(--accent-ink) !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 3px !important;
}
@media (max-width: 600px) {
  .arch-card { padding: 18px; }
  .arch-card .arch-h { font-size: var(--type-14); }
  .arch-card .arch-b { font-size: var(--type-13); }
}

/* Tiered architecture: protocol semantics / implementation / commercial */
.arch-tier-h {
  margin: 32px 0 14px;
  font-size: var(--type-13);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-weight: 600;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.arch-tier-h:first-of-type { border-top: none; padding-top: 0; margin-top: 18px; }
.arch-tier-h em { font-style: normal; color: var(--text-dim); font-weight: 500; }
.arch-commercial {
  margin-top: 32px;
  padding: 24px 26px;
  border: 1px dashed var(--rule);
  border-radius: 14px;
  background: var(--paper-2);
}
.arch-commercial .arch-h { font-size: var(--type-18); }
.arch-commercial .arch-b { font-size: var(--type-14); color: var(--text-muted); line-height: 1.6; margin-top: 6px; }

/* Authority Graph / Decision Map landing section */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 1080px) { .ag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ag-grid { grid-template-columns: 1fr; } }
.ag-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px;
  background: var(--paper);
  transition: border-color .15s ease, transform .15s ease;
}
.ag-card:hover { border-color: var(--accent); }
.ag-card.ag-feature { border-color: var(--accent); background: var(--paper-2); }
.ag-tag {
  display: inline-block;
  font-size: var(--type-11);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.ag-h { font-size: var(--type-16); line-height: 1.4; margin: 0 0 10px; color: var(--text); }
.ag-h em { font-style: italic; color: var(--accent); }
.ag-b { font-size: var(--type-13); line-height: 1.6; color: var(--text-muted); margin: 0; }
.ag-b code { font-family: var(--font-mono); font-size: var(--type-12); background: var(--paper-2); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 4px; }

/* Audience toggle (nav) */
.audience-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 6px;
  background: var(--paper);
}
.aud-btn {
  padding: 5px 11px;
  font-size: var(--type-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.aud-btn.is-active { background: var(--accent); color: var(--color-paper); }
.aud-btn:not(.is-active):hover { color: var(--text); }
.nav-business {
  font-weight: 600;
  color: var(--accent) !important;
}

/* Audience filtering: hide technical sections in business view, vice versa */
body[data-audience="business"] .technical-only { display: none !important; }
body[data-audience="technical"] .audience-business { display: none !important; }

/* WHY-THIS-MATTERS plain-English persona grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 1080px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.why-card:hover { border-color: var(--accent); }
/* (.why-icon styling unified above with .sector-icon and .persona-icon) */
.why-card h3 { font-size: var(--type-14); line-height: 1.3; margin: 0 0 10px; color: var(--text); }
.why-pain { font-size: var(--type-13); line-height: 1.55; color: var(--text-muted); margin: 0 0 10px; font-style: italic; }
.why-out  { font-size: var(--type-13); line-height: 1.55; color: var(--text); margin: 0; }
.why-out strong { color: var(--accent); font-weight: 600; }
.why-foot {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: var(--type-14);
  line-height: 1.6;
  color: var(--text);
}
.why-foot a.why-cta {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 8px;
}
.why-foot a.why-cta:hover { text-decoration: underline; }

/* (.persona-icon styling unified above with .sector-icon and .why-icon) */

/* Business view (business.html) */
.biz-body .hero { padding-top: 60px; }
.biz-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}
.biz-list li {
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  font-size: var(--type-14);
  line-height: 1.6;
  color: var(--text);
}
.biz-list li strong { color: var(--accent); font-weight: 600; }
.faq-q {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 14px;
  background: var(--paper);
}
.faq-q summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--type-14);
  color: var(--text);
  list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before {
  content: "+ ";
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.faq-q[open] summary::before { content: "− "; }
.faq-q p {
  margin: 12px 0 0;
  font-size: var(--type-14);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ============================================================
   §FINAL-2 — palette harmonised with diagrams + table unification.
   Was indigo (#6366f1) to match the legacy diagram palette. Rolled
   to KYE brand green (#6366f1, §FINAL-17) but the indigo binding in
   this block survived with `:root[data-theme="light"]` specificity
   (0,2,0) — it beat §FINAL-17's `:root` (0,1,0) rebind. Result: every
   page that set data-theme="light" inline rendered indigo despite
   the brand-green refresh. This block now binds to brand green so
   the cascade is consistent end-to-end (see DESIGN-AUDIT.md note
   "green→blue jump"). The dark-mode block mirrors §FINAL-17's
   sage-green (#81C995) for parity.
   ============================================================ */

/* Light theme — brand-green accent (matches §FINAL-17 + tokens.css) */
:root, :root[data-theme="light"] {
  --accent:        #6366f1 !important;   /* KYE brand green */
  --accent-2:      #4338ca !important;   /* hover lift */
  --accent-ink:    #4338ca !important;   /* deeper green — prose links (9.06:1 on bg) */
  --accent-soft:   rgba(99, 102, 241, 0.10) !important;
  --accent-line:   rgba(99, 102, 241, 0.22) !important;
  --focus-ring:    0 0 0 3px rgba(99, 102, 241, 0.30) !important;
}
:root[data-theme="dark"] {
  --accent:        #81C995 !important;   /* Google green-200 — readable on dark */
  --accent-2:      #A8DAB5 !important;
  --accent-ink:    #A8DAB5 !important;   /* lift for prose-link contrast on dark */
  --accent-soft:   rgba(129, 201, 149, 0.16) !important;
  --accent-line:   rgba(129, 201, 149, 0.30) !important;
  --focus-ring:    0 0 0 3px rgba(129, 201, 149, 0.40) !important;
}

/* Brand mark stays graphite ink (light) / accent (dark) but the accent
   now matches the diagrams. */
.hero h1 .accent,
.h-section .accent,
.what-def .accent { color: var(--accent) !important; }

/* ============================================================
   TABLE + LIST FONT-SIZE UNIFICATION.
   Every table, every nested list, every endpoint plate, every
   compliance row, every comparison cell uses one of:
   - 13px       (body text inside cells)
   - 12px mono  (identifiers / endpoints / paths / pills)
   No more 11.5 / 12 / 12.5 / 13 / 13.5 zoo.
   ============================================================ */

/* Comparison table */
.cmp, .cmp th, .cmp td {
  font-size: var(--type-13) !important;
  line-height: 1.5 !important;
  vertical-align: middle;
}
.cmp th { font-family: var(--font-mono); font-size: var(--type-12) !important; letter-spacing: 0.04em; }
.cmp .product-col .ver { font-size: var(--type-11) !important; }
@media (max-width: 600px) {
  .cmp, .cmp th, .cmp td { font-size: var(--type-12) !important; padding: 8px 9px !important; }
  .cmp th { font-size: var(--type-11) !important; }
}

/* Profile detail — endpoint mono plate + terms list */
.profile-detail .endpoints li {
  font-family: var(--font-mono) !important;
  font-size: var(--type-12) !important;
  line-height: 1.5 !important;
}
.profile-detail .terms li,
.profile-detail .terms code,
.profile-detail p {
  font-size: var(--type-13) !important;
  line-height: 1.55 !important;
}
.profile-detail .terms code { font-family: var(--font-mono) !important; font-size: var(--type-12) !important; }

/* Compliance card lists */
.cf-list, .cf-grid-list, .af-list, .ps-list, .what-def-gloss li,
.persona-roi li, .state-card .state-desc, .state-card .state-emit {
  font-size: var(--type-13) !important;
  line-height: 1.55 !important;
}
.cf-list code, .af-list code, .state-card .state-vals li code {
  font-family: var(--font-mono) !important;
  font-size: var(--type-12) !important;
}

/* How-outcomes list */
.how-outcomes li { font-size: var(--type-13) !important; line-height: 1.55 !important; }

/* All pills (compliance, version, deployed, persona, prof, cov, how) */
.compliance-pill, .version-pill, .deployed-pill, .persona-chip,
.prof-pill, .cov-pill, .how-pill, .hero-pill {
  font-family: var(--font-mono) !important;
  font-size: var(--type-12) !important;
  letter-spacing: 0.02em !important;
}

/* Eyebrow plates — single rule */
.eyebrow {
  font-family: var(--font-mono) !important;
  font-size: var(--type-11) !important;
  letter-spacing: 0.16em !important;
}

/* Profile tabs */
.profile-tab {
  font-family: var(--font-mono) !important;
  font-size: var(--type-12) !important;
}

/* Footer columns */
.footer-col p, .footer-col a, .footer-col li { font-size: var(--type-13) !important; line-height: 1.55 !important; }
.footer-col h4 { font-size: var(--type-11) !important; letter-spacing: 0.14em !important; }
.footer-bottom { font-size: var(--type-12) !important; }

/* Vocabulary list */
.vocab-list li { font-size: var(--type-13) !important; }
.vocab-list code { font-family: var(--font-mono) !important; font-size: var(--type-12) !important; }

/* FAQ */
.faq-item summary { font-size: var(--type-14) !important; }
.faq-item p, .faq-item li { font-size: var(--type-13) !important; line-height: 1.6 !important; }

/* Architecture cards */
.arch-card .arch-h { font-size: var(--type-16) !important; }
.arch-card .arch-b { font-size: var(--type-13) !important; line-height: 1.55 !important; }
.arch-card .arch-path { font-family: var(--font-mono) !important; font-size: var(--type-11) !important; }
.arch-card .arch-num { font-family: var(--font-mono) !important; font-size: var(--type-11) !important; }

/* Sector cards */
.sector-card h3 { font-size: var(--type-16) !important; }
.sector-card .sector-pain { font-size: var(--type-13) !important; line-height: 1.55 !important; }
.sector-card .sector-frameworks { font-family: var(--font-mono) !important; font-size: var(--type-11) !important; }

/* Persona cards */
.persona-card h3 { font-size: var(--type-16) !important; }
.persona-card .pain { font-size: var(--type-13) !important; line-height: 1.55 !important; }
.persona-card p { font-size: var(--type-13) !important; line-height: 1.6 !important; }

/* Trust & assurance */
.assurance-card .h { font-family: var(--font-mono) !important; font-size: var(--type-11) !important; letter-spacing: 0.1em !important; }
.assurance-card .b { font-size: var(--type-13) !important; line-height: 1.5 !important; }

/* Compliance row label */
.compliance-row .lbl { font-family: var(--font-mono) !important; font-size: var(--type-11) !important; }

/* CF disclaimer */
.cf-disclaimer { font-size: var(--type-13) !important; line-height: 1.6 !important; }
.cf-foot       { font-size: var(--type-13) !important; line-height: 1.6 !important; }

/* ============================================================
   §FINAL-3 — Typographic scale (definitive, last-word).
   Unifies font sizes across every section, every card, every
   surface. Anything earlier in the file that sets a competing
   font-size is overridden here. The scale:
     H1 (hero)            clamp(40px, 6vw, 72px)
     H2 (.h-section)      clamp(28px, 4vw, 38px)
     Card / sub-section   17px
     Body / lede          16px (lede), 14px (body)
     Eyebrow              11px UPPERCASE 0.16em
     Code inline          12px monospace
     Pill / tag           11px UPPERCASE 0.12em
   ============================================================ */
.h-section            { font-size: clamp(28px, 4vw, 38px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.lede                 { font-size: var(--type-16) !important; line-height: 1.65 !important; }
.hero p.lede          { font-size: var(--type-18) !important; line-height: 1.55 !important; }
.eyebrow              { font-size: var(--type-11) !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 600 !important; }

/* Card / sub-section headings (unified to 17px) */
.what-card h3,
.what-card .what-h,
.ps-h, .af-h, .ps-card h3, .af-card h3,
.arch-h, .arch-card h3,
.ag-h, .ag-card h3,
.why-card h3,
.persona-card h3,
.sector-card h3,
.cf-h, .cf-card h3,
.ba-title,
.card-h,
.persona-card .card-h,
.evo-h,
.qs-card h3,
.how-card h3 {
  font-size: var(--type-16) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 10px !important;
}

/* Body / paragraph copy inside cards (unified to 14px) */
.what-card p, .what-card li,
.ps-list li, .af-list li, .ps-card p, .af-card p,
.arch-b, .arch-card p,
.ag-b, .ag-card p,
.why-pain, .why-out,
.persona-card p, .persona-card .pain,
.sector-pain, .sector-card p,
.cf-b, .cf-card p, .cf-list li,
.ba-sub, .card-sub,
.evo-b, .evo-card p,
.qs-card p, .how-card p,
.persona-roi li {
  font-size: var(--type-14) !important;
  line-height: 1.6 !important;
}

/* Inline code unified */
code, pre code, .what-card code, .arch-b code, .why-out code, .ag-b code, .ps-list code {
  font-family: var(--font-mono);
  font-size: var(--type-12);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Pills / tags unified */
.af-tag, .ps-tag, .ag-tag, .evo-tag, .def-tag, .hero-pill, .version-pill {
  font-size: var(--type-11) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Mobile typographic adjustments */
@media (max-width: 600px) {
  .h-section          { font-size: clamp(24px, 6vw, 32px) !important; }
  .lede               { font-size: var(--type-14) !important; }
  .hero p.lede        { font-size: var(--type-16) !important; }
  .what-card h3, .ps-h, .af-h, .arch-h, .ag-h, .why-card h3,
  .persona-card h3, .sector-card h3, .cf-h, .ba-title, .card-h {
    font-size: var(--type-16) !important;
  }
  .what-card p, .arch-b, .ag-b, .why-pain, .why-out,
  .persona-card p, .sector-pain, .cf-b, .ps-list li, .af-list li {
    font-size: var(--type-13) !important;
  }
}

/* ============================================================
   §FINAL-4 — Focus-visible accessibility (keyboard navigation).
   Every interactive element gets a visible focus ring on
   keyboard navigation. Mouse clicks suppress the ring via
   :focus-visible (vs. plain :focus).
   ============================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.aud-btn:focus-visible,
.theme-toggle:focus-visible,
.urn-sample:focus-visible,
.profile-tab:focus-visible,
.qs-tab:focus-visible,
.urn-input:focus-visible,
.vocab-input:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* Skip-link — visible on focus only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--color-paper);
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--type-13);
  text-decoration: none;
  outline: 2px solid var(--color-paper);
  outline-offset: 2px;
}

/* ============================================================
   §FINAL-5 — Mobile responsive polish: audience toggle, nav,
   CTA glyph consistency, sticky-pill spacing.
   ============================================================ */

/* Audience toggle: compact on tablets/mobile, hide on tiny phones */
@media (max-width: 900px) {
  .audience-toggle {
    margin-left: auto;
    margin-top: 4px;
  }
  .aud-btn { padding: 4px 9px; font-size: var(--type-11); }
}
@media (max-width: 600px) {
  .audience-toggle {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
  }
}

/* Nav-business link visibility tweak on mobile */
@media (max-width: 480px) {
  .nav-business { display: none; }
}

/* "Talk to us" persistent floating action — for both pages */
.float-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  background: var(--accent);
  color: var(--color-paper);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--type-13);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(99,102,241,0.30);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.float-cta:hover { background: var(--accent-2); transform: translateY(-2px); transition: transform .15s ease, background .15s ease; }
@media (max-width: 480px) { .float-cta { right: 14px; bottom: 14px; padding: 9px 13px; font-size: var(--type-12); } }

/* ============================================================
   §FINAL-6 — Universal typographic enforcement (last-word, v3).
   The §FINAL-3 block targeted named card classes. §FINAL-6
   broadens the net: every <h3> inside any .section, every <p>
   and every <li> inside any card-shaped block, every tag pill,
   every eyebrow — ALL get the canonical scale, no exceptions.
   This eliminates the residual "ps-card vs why-card" feel.
   ============================================================ */

/* Single CSS custom-property scale (used by overrides below) */
:root {
  --fs-display:    clamp(40px, 6vw, 72px);
  --fs-h2:         clamp(28px, 4vw, 38px);
  --fs-h3-card:    17px;
  --fs-body-card:  14px;
  --fs-body:       16px;
  --fs-eyebrow:    11px;
  --fs-pill:       11px;
  --fs-mono:       12px;
  --lh-h:          1.35;
  --lh-body:       1.6;
}

/* Every section H3 (regardless of card class) */
.section h3,
.section .section h3 {
  font-size: var(--fs-h3-card) !important;
  line-height: var(--lh-h) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* Every card body — paragraph, list item, list-item strong, list-item code */
.section .ps-list li,        .section .ps-list li strong,
.section .af-list li,        .section .af-list li strong,
.section .why-card p,        .section .why-card p strong,
.section .why-card li,
.section .ag-card p,         .section .ag-card p strong,
.section .arch-card p,       .section .arch-card p strong,
.section .what-card p,       .section .what-card li,
.section .persona-card p,    .section .persona-card li,
.section .sector-card p,
.section .ps-card p,         .section .ps-card li,
.section .af-card p,         .section .af-card li,
.section .cf-card p,         .section .cf-card li,
.section .evo-card p,        .section .evo-card li,
.section .qs-card p,         .section .qs-card li,
.section .how-card p,        .section .how-card li,
.section .ba-side p,         .section .ba-side li {
  font-size: var(--fs-body-card) !important;
  line-height: var(--lh-body) !important;
}

/* Every tag pill */
.section .ps-tag,
.section .af-tag,
.section .ag-tag,
.section .evo-tag,
.section .ba-tag,
.section .def-tag,
.section .cf-tag,
.section .why-card span:first-child,
.section .persona-card span:first-child {
  font-size: var(--fs-pill) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Inline code inside any card body */
.section .ps-list li code,
.section .af-list li code,
.section .arch-card p code, .section .arch-b code,
.section .ag-card p code,   .section .ag-b code,
.section .why-card p code,  .section .why-out code,
.section .what-card p code, .section .what-card li code {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-mono) !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

/* Every <strong> inside a card body — keep the size, just bold weight */
.section .ps-card  strong,
.section .af-card  strong,
.section .ag-card  strong,
.section .why-card strong,
.section .arch-card strong,
.section .what-card strong,
.section .persona-card strong,
.section .sector-card strong,
.section .evo-card strong,
.section .cf-card strong,
.section .qs-card strong,
.section .how-card strong {
  font-size: inherit !important;
  font-weight: 600 !important;
}

/* Every section eyebrow + lede (defensive — already in FINAL-3 but tightened here) */
.section .eyebrow,
section .eyebrow {
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.section p.lede,
section  p.lede {
  font-size: var(--fs-body) !important;
  line-height: 1.65 !important;
}
.hero p.lede {
  font-size: var(--type-18) !important;
  line-height: 1.55 !important;
}

/* Mobile sweep — 16px h3, 13px card body, 15px lede */
@media (max-width: 600px) {
  :root {
    --fs-h3-card:   16px;
    --fs-body-card: 13px;
    --fs-body:      15px;
  }
  .hero p.lede { font-size: var(--type-16) !important; }
}

/* Comparison table — last-word: tbody td matches card body, header pill style */
.cmp tbody td,
.cmp .product-col {
  font-size: var(--fs-body-card) !important;
  line-height: var(--lh-body) !important;
}
.cmp thead th,
.cmp .product-col .ver {
  font-size: var(--fs-pill) !important;
  letter-spacing: 0.10em !important;
}

/* ============================================================
   §FINAL-7 — Comparison table inner consistency.
   The .cmp tbody td cells have mixed weights (600/500/400) for
   yes/partial/no, and the prefix glyphs (●/◐/○) render at
   different visual densities. Unify to one weight, one size,
   one tabular layout. The COLOR of yes/partial/no still
   differentiates them — weight no longer.
   ============================================================ */

.cmp                         { font-variant-numeric: tabular-nums !important; }

.cmp tbody td.cell-yes,
.cmp tbody td.cell-partial,
.cmp tbody td.cell-no {
  font-size: var(--fs-body-card) !important;
  font-weight: 500 !important;
  line-height: var(--lh-body) !important;
  letter-spacing: 0 !important;
}

.cmp .cell-yes::before,
.cmp .cell-partial::before,
.cmp .cell-no::before {
  display: inline-block;
  font-size: var(--type-12) !important;
  width: 12px;
  text-align: center;
  margin-right: 4px;
  line-height: 1;
  vertical-align: middle;
}

/* Row header (left-most "Capability" column entries) — same body size */
.cmp tbody th,
.cmp tbody th.product-col {
  font-size: var(--fs-body-card) !important;
  font-weight: 600 !important;
  line-height: var(--lh-body) !important;
  text-align: left !important;
  white-space: normal !important;
}

/* Header cells — uppercase pill style with consistent letter-spacing */
.cmp thead th {
  font-size: var(--fs-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* The version label inside a header cell (rendered as a child <div>) */
.cmp thead th div {
  font-size: var(--type-11) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  margin-top: 2px;
}

/* The tabular caption */
.cmp + caption,
.cmp caption,
.cmp-wrap caption {
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: 0.04em !important;
}

/* ============================================================
   §FINAL-8 — Mega-menu nav (audience-grouped) + section accordion.
   The flat 14-link nav was overwhelming; redesigned to 5
   audience-keyed dropdowns (For developers / buyers / auditors /
   regulators / By sector) plus 4 quick links and the existing
   audience + theme toggles. Dropdowns use <details>/<summary> for
   accessibility (keyboard, screen reader, no JS required).
   ============================================================ */

.mega-nav { gap: 6px; }

.mega { position: relative; list-style: none; }
.mega summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--type-14);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  white-space: nowrap;
}
.mega summary::-webkit-details-marker { display: none; }
.mega summary::marker { content: ''; }
.mega summary:hover { background: var(--accent-soft); color: var(--accent); }
.mega[open] > summary { background: var(--accent-soft); color: var(--accent); }
.mega .caret { font-size: var(--type-11); transition: transform .15s ease; opacity: 0.7; }
.mega[open] .caret { transform: rotate(180deg); }

.mega-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(200px, 240px);
  gap: 8px 28px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--color-line) 10%, transparent), 0 4px 12px rgba(15, 23, 42, 0.04);
  z-index: 200;
  min-width: 480px;
}
.mega-panel .mega-col h4 {
  font-size: var(--type-11) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
  margin: 0 0 8px;
}
.mega-panel .mega-col a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: var(--type-13);
  color: var(--text);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.mega-panel .mega-col a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-quick {
  font-size: var(--type-14);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-muted);
}
.nav-quick:hover { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 1080px) {
  .mega-panel { min-width: 360px; grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mega summary { padding: 4px 8px; font-size: var(--type-13); }
  .nav-quick { font-size: var(--type-13); padding: 4px 8px; }
}
/* Mobile drawer behaviour: dropdowns expand inline rather than absolute */
@media (max-width: 760px) {
  .mega-panel {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 6px 12px;
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .mega-panel .mega-col a { padding: 6px 0; font-size: var(--type-14); }
}

/* ============================================================
   Section accordion — every .collapsible-section has a clickable
   header (eyebrow + h2) that toggles the body. Default state is
   based on data-default-open; user state persists in localStorage.
   ============================================================ */

.section.collapsible {
  padding: 0 !important;
  border-top: 1px solid var(--line);
}
.section.collapsible .section-toggle {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 36px 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--text);
  font-family: inherit;
}
.section.collapsible .section-toggle .container {
  flex: 1;
  display: block;
  padding: 0 var(--container-pad, 24px);
}
.section.collapsible .section-toggle .section-caret {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-11);
  margin: 38px 24px 0 0;
  transition: transform .2s ease, background .15s;
}
.section.collapsible[data-open="false"] .section-caret { transform: rotate(-90deg); }
.section.collapsible .section-toggle:hover .section-caret { background: var(--accent); color: var(--color-paper); }
.section.collapsible .section-body {
  padding: 0 0 64px;
  overflow: hidden;
  transition: max-height .28s ease;
}
.section.collapsible[data-open="false"] .section-body { display: none; }
.section.collapsible[data-open="false"] .section-toggle { padding-bottom: 28px; }

.accordion-controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px 0;
  font-size: var(--type-12);
}
.accordion-controls button {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: var(--type-12);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.accordion-controls button:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   §FINAL-9 — Google-aligned color palette (definitive).
   Eliminates the slate-blue --text-muted cast that read as
   "depressing dark blue". Replaces it with Google's grey-700
   neutral family so secondary text, body text, and footnotes
   don't fight the violet accent. Surfaces stay warm-neutral.
   ============================================================ */

:root {
  /* Google-aligned text scale */
  --text:           #1f2024 !important;  /* primary text — near-black, no blue cast */
  --text-muted:     #5f6368 !important;  /* secondary — Google grey-700 */
  --text-dim:       #80868b !important;  /* tertiary — Google grey-600 */
  --text-disabled:  #9aa0a6 !important;  /* disabled — Google grey-500 */

  /* Surface scale — neutral whites + greys */
  --paper:    #ffffff !important;
  --paper-2:  #f8f9fa !important;        /* Google grey-50 */
  --paper-3:  #f1f3f4 !important;        /* Google grey-100 */
  --rule:     #e8eaed !important;        /* Google grey-200 — borders */
  --rule-soft:#f1f3f4 !important;        /* lighter dividers */
  --line:     #e8eaed !important;
  --line-soft:#f1f3f4 !important;
  --line-strong:#dadce0 !important;      /* Google grey-300 */

  /* Accent — keep violet, just ensure it harmonises */
  --accent:        #6366f1 !important;   /* violet-600 (unchanged) */
  --accent-2:      #6d28d9 !important;   /* violet-700 hover */
  --accent-soft:   rgba(99, 102, 241, 0.08) !important;
  --accent-line:   rgba(99, 102, 241, 0.20) !important;

  /* Semantic */
  --success:    #1e8e3e !important;      /* Google green */
  --success-soft:rgba(30, 142, 62, 0.10) !important;
  --warning:    #f29900 !important;      /* Google amber */
  --warning-soft:rgba(242, 153, 0, 0.10) !important;
  --danger:     #d93025 !important;      /* Google red */
  --danger-soft:rgba(217, 48, 37, 0.10) !important;
}

:root[data-theme="dark"] {
  --text:           #e8eaed !important;
  --text-muted:     #bdc1c6 !important;  /* Google grey-400 */
  --text-dim:       #9aa0a6 !important;  /* Google grey-500 */
  --text-disabled:  #5f6368 !important;
  --paper:    #202124 !important;        /* Google dark-grey-900 */
  --paper-2:  #28292c !important;
  --paper-3:  #303134 !important;
  --rule:     #3c4043 !important;
  --rule-soft:#28292c !important;
  --line:     #3c4043 !important;
  --line-soft:#28292c !important;
  --line-strong:#5f6368 !important;
}

/* Reset any dark-blue cast on common foreground elements */
body, p, li, span, td, th, dt, dd { color: inherit; }

/* The hero, section heads, and lede now ride on the Google neutrals */
.hero, .section, .footer { color: var(--text); }
.lede, p.lede { color: var(--text-muted) !important; }
.eyebrow { color: var(--text-dim) !important; }

/* Card body copy unified to grey-700 */
.section .ps-list li, .section .af-list li,
.section .why-pain, .section .why-out,
.section .arch-b, .section .ag-b, .section .cf-b,
.section .persona-card p, .section .sector-pain,
.section .what-card p, .section .qs-card p, .section .how-card p,
.section .evo-card p, .section .ba-sub, .section .card-sub {
  color: var(--text-muted) !important;
}

/* Strong inside cards rides on the primary text color (not the muted) */
.section .ps-list li strong,
.section .why-out strong,
.section .arch-b strong,
.section .ag-b strong,
.section .why-card strong,
.section .ag-card strong,
.section .ps-card strong {
  color: var(--text) !important;
}

/* Code blocks — neutral surface */
code, pre code, .what-card code, .arch-b code, .why-out code, .ag-b code, .ps-list code {
  background: var(--paper-3) !important;
  border-color: var(--rule) !important;
  color: var(--text) !important;
}

/* Tables — Google-aligned neutrals */
.cmp { color: var(--text); }
.cmp thead th { background: var(--paper-2) !important; color: var(--text-muted) !important; border-bottom-color: var(--line-strong) !important; }
.cmp tbody td { border-bottom-color: var(--line-soft) !important; }
.cmp tbody td:not(.cell-yes):not(.cell-partial):not(.cell-no) { color: var(--text); }
.cmp .cell-yes     { color: var(--success) !important; }
.cmp .cell-partial { color: var(--warning) !important; }
.cmp .cell-no      { color: var(--text-dim) !important; }

/* Comparison table - subtle hover with neutral grey not violet */
.cmp tbody tr:hover { background: var(--paper-2) !important; }

/* Footer — neutral grey */
.footer { background: var(--paper-2) !important; color: var(--text-muted) !important; border-top: 1px solid var(--line); }

/* Pills / tags — keep accent color but on neutral surfaces */
.hero-pill, .version-pill { background: var(--paper-2); color: var(--text-muted); border-color: var(--rule); }

/* Mega-nav surfaces use Google paper */
.mega-panel { background: var(--paper) !important; border-color: var(--rule) !important; }
.mega-panel .mega-col h4 { color: var(--text-dim) !important; }
.mega-panel .mega-col a { color: var(--text) !important; }
.mega-panel .mega-col a:hover { background: var(--paper-2) !important; color: var(--accent) !important; }

/* ============================================================
   §FINAL-10 — Clean / modern / neat / clear pass.
   Strips visual noise: glass-blurs, gradient washes, decorative
   borders. Uses one accent, one neutral text, one neutral surface.
   Generous spacing. Inspired by Google / Stripe / Linear product
   pages (clarity over showmanship).
   ============================================================ */

/* --- Strip glass-blur and translucent washes (clean over flashy) --- */
.what-card, .ps-card, .af-card, .ag-card, .why-card,
.persona-card, .sector-card, .arch-card, .cf-card,
.evo-card, .qs-card, .how-card, .ba-side {
  background: var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 1px solid var(--rule) !important;
  border-radius: 12px !important;
}

/* Preserve the colour-coded borders on problem/solution / before/after */
.ps-card.problem  { border-color: rgba(217, 48, 37, 0.20) !important; }
.ps-card.solution { border-color: rgba(30, 142, 62, 0.22) !important; background: var(--paper) !important; }
.ba-side.before   { border-color: rgba(217, 48, 37, 0.20) !important; }
.ba-side.after    { border-color: rgba(30, 142, 62, 0.22) !important; }
.evo-card.legacy   { border-color: var(--line-strong) !important; }
.evo-card.emerging { border-color: rgba(242, 153, 0, 0.22) !important; background: var(--paper) !important; }
.evo-card.kye      { border-color: rgba(99, 102, 241, 0.30) !important; background: var(--paper) !important; }

/* Subtle hover lift only */
.what-card:hover, .ps-card:hover, .af-card:hover, .ag-card:hover, .why-card:hover,
.persona-card:hover, .sector-card:hover, .arch-card:hover, .cf-card:hover,
.evo-card:hover, .qs-card:hover, .how-card:hover {
  border-color: var(--line-strong) !important;
  transform: none !important;
}

/* Hero — clean, no gradient grid */
.hero { background: var(--paper) !important; }
.hero-grid, .hero-bg { display: none !important; }

/* Section dividers — superseded by the canonical rule near line 193.
 * Keep only the .alt background here; padding lives at lines 193-195. */
.section.alt { background: var(--paper-2); }

/* Buttons — cleaner */
.btn-primary {
  background: var(--accent) !important;
  color: var(--color-paper) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 8px !important;
  padding: 11px 18px !important;
  font-weight: 500 !important;
  font-size: var(--type-14) !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.btn-secondary {
  background: var(--paper) !important;
  color: var(--text) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 11px 18px !important;
  font-weight: 500 !important;
  font-size: var(--type-14) !important;
}
.btn-secondary:hover { border-color: var(--line-strong) !important; }
.btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  font-weight: 500 !important;
}
.btn-ghost:hover { color: var(--accent) !important; }

/* Pills — neutral baseline */
.hero-pill {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}
.hero-pill .dot { background: var(--accent); }

/* Audience toggle — cleaner */
.audience-toggle { border-color: var(--rule) !important; background: var(--paper-2) !important; }
.aud-btn { color: var(--text-muted) !important; }
.aud-btn.is-active { background: var(--accent) !important; color: var(--color-paper) !important; }

/* Tables — clean */
.cmp { border-collapse: separate !important; border-spacing: 0 !important; }
.cmp thead th { font-weight: 600 !important; }
.cmp tbody td { font-weight: 400 !important; }

/* Footer */
.footer { padding: 48px 0 40px !important; }
.footer .footer-inner, .footer .container { color: var(--text-muted) !important; }

/* Generous inter-card spacing */
.what-grid, .ps-wrap, .af-wrap, .ag-grid, .why-grid, .persona-grid,
.sector-grid, .arch-grid, .cf-wrap, .evo-grid, .qs-grid, .how-grid {
  gap: 16px !important;
}
@media (min-width: 900px) {
  .what-grid, .ps-wrap, .af-wrap, .ag-grid, .why-grid, .persona-grid,
  .sector-grid, .arch-grid, .cf-wrap, .evo-grid, .qs-grid, .how-grid {
    gap: 20px !important;
  }
}

/* Card padding: consistent 22px / 28px desktop */
.what-card, .ps-card, .af-card, .ag-card, .why-card,
.persona-card, .sector-card, .arch-card, .cf-card,
.evo-card, .qs-card, .how-card {
  padding: 22px !important;
}
@media (min-width: 900px) {
  .what-card, .ps-card, .af-card, .ag-card, .why-card,
  .persona-card, .sector-card, .arch-card, .cf-card,
  .evo-card, .qs-card, .how-card {
    padding: 28px !important;
  }
}

/* Eyebrow — neutral grey-dim, not violet */
.eyebrow { color: var(--text-dim) !important; }

/* Section h2 — slightly tighter weight */
.h-section { font-weight: 600 !important; color: var(--text) !important; }
.h-section .accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--accent) !important;
}

/* Section toggles — cleaner press affordance */
.section.collapsible .section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================
   §FINAL-11 — Native <details>/<summary> layout (HTML-valid).
   Sections are now collapsible via native <details>/<summary>
   for full a11y (keyboard / screen reader). The summary content
   model is phrasing + headings only — no <div> children.
   ============================================================ */

.section.collapsible details { display: block; }
.section.collapsible summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  width: 100%;
  max-width: 1180px;          /* match .container width */
  margin: 0 auto;
  padding: 40px 24px 16px;
}
.section.collapsible summary::-webkit-details-marker { display: none; }
.section.collapsible summary::marker { content: ''; }
.section.collapsible summary > .eyebrow,
.section.collapsible summary > .h-section {
  grid-column: 1;
}
.section.collapsible summary > .section-caret {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-11);
  transition: transform .2s ease, background .15s;
}
.section.collapsible details[open] .section-caret { transform: rotate(180deg); }
.section.collapsible summary:hover .section-caret { background: var(--accent); color: var(--color-paper); }

.section.collapsible details:not([open]) summary { padding-bottom: 28px; }
.section.collapsible .section-body {
  padding: 0 0 64px;
}

/* The <section.collapsible> itself uses no padding (the summary handles top
   padding when collapsed; the body provides bottom padding when open). */
.section.collapsible {
  padding: 0 !important;
}

/* Override §FINAL-10 padding for collapsible sections only */
.section.collapsible.alt { padding: 0 !important; }

/* ============================================================
   §FINAL-12 — Universal design tokens + dark-mode contrast.
   Single source of truth for: tables, widgets, cards, modals,
   tags, labels, buttons, diagrams, graphs, code blocks.
   ============================================================ */

:root {
  /* Radii */
  --radius-1: 6px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  /* Shadows (subtle, neutral) */
  --shadow-1: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-2: 0 2px 6px rgba(15,23,42,0.06);
  --shadow-3: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-mega: 0 16px 40px rgba(15,23,42,0.10);

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  /* Border weight */
  --bw: 1px;
}

:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.40);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.50);
  --shadow-mega: 0 16px 40px rgba(0,0,0,0.60);
}

/* --- Tables (universal, e.g. .ps-table, .cmp, .cf-list table, etc.) --- */
table { border-collapse: separate !important; border-spacing: 0; }
th, td { padding: 12px 16px; border-bottom: var(--bw) solid var(--rule); text-align: left; }
thead th {
  font-size: var(--fs-pill, 11px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  background: var(--paper-2) !important;
}
tbody tr:hover { background: var(--paper-2) !important; }

/* --- Widget surfaces (cards, modals, panels) --- */
.widget, .widget-card, .modal, .panel,
.what-card, .ps-card, .af-card, .ag-card, .why-card,
.persona-card, .sector-card, .arch-card, .cf-card,
.evo-card, .qs-card, .how-card, .ba-side, .biz-list li,
.faq-q, .faq-item {
  background: var(--paper) !important;
  border: var(--bw) solid var(--rule) !important;
  border-radius: var(--radius-3) !important;
  box-shadow: none !important;
}

/* --- Tag pills (universal) --- */
.tag, .pill, .badge, .label-pill,
.ps-tag, .af-tag, .ag-tag, .evo-tag, .ba-tag, .def-tag, .cf-tag,
.hero-pill, .version-pill, .prof-pill, .urn-sample, .sector-frameworks {
  font-size: var(--type-11) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  border: var(--bw) solid var(--rule) !important;
  background: var(--paper-2) !important;
  color: var(--text-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* --- Buttons (universal) --- */
.btn, .button, button.btn-primary, button.btn-secondary, button.btn-ghost,
a.btn, a.btn-primary, a.btn-secondary, a.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-2);
  font-size: var(--type-14);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: var(--bw) solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary, a.btn-primary, button.btn-primary {
  background: var(--accent) !important;
  color: var(--color-paper) !important;
  border-color: var(--accent) !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}
.btn-secondary, a.btn-secondary {
  background: var(--paper) !important;
  color: var(--text) !important;
  border-color: var(--rule) !important;
}
.btn-secondary:hover { border-color: var(--line-strong) !important; }
.btn-ghost, a.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-muted) !important;
}
.btn-ghost:hover { color: var(--accent) !important; }

/* --- Diagrams / graphs / SVG canvas --- */
svg { color: currentColor; }
.tg-svg, .flow-svg, .cascade-svg {
  background: var(--paper-2) !important;
  border: var(--bw) solid var(--rule) !important;
  border-radius: var(--radius-3) !important;
}

/* --- Inline code --- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--type-12) !important;
  background: var(--paper-3) !important;
  border: var(--bw) solid var(--rule) !important;
  border-radius: var(--radius-1) !important;
  padding: 1px 5px !important;
  color: var(--text) !important;
}
pre {
  background: var(--paper-3) !important;
  border: var(--bw) solid var(--rule) !important;
  border-radius: var(--radius-3) !important;
  padding: 16px 20px !important;
  overflow-x: auto;
}
pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ============================================================
   .cmp-table — comparison / spec tables on landing pages.
   Used on connector-profiles, build, status, integrations, etc.
   No bespoke CSS existed before, so first-column <th> fell to the
   browser default (bold) while <td> fell to body weight, producing
   a visible font-weight + font-size mismatch on mobile when the
   second column held <code>-styled entries. This block normalises
   the typography across cells and forces horizontal scroll inside
   a wrapper at narrow viewports rather than uneven cell shrink. */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: var(--type-14);
  line-height: 1.55;
}
.cmp-table th,
.cmp-table td {
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
  font-size: var(--type-14);
  font-weight: 400;
  border-top: 1px solid color-mix(in srgb, var(--text-muted, #888) 18%, transparent);
}
.cmp-table thead th {
  font-size: var(--type-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #6b7280);
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted, #888) 28%, transparent);
  border-top: 0;
  padding-bottom: 8px;
}
/* First-column header rows ('row headers' inside <tbody>): keep
   them visually distinct via colour but match the body font-size /
   weight of <td> so the first column doesn't look 'larger'. */
.cmp-table tbody th {
  font-weight: 600;
  color: var(--text, #111);
  white-space: nowrap;
}
.cmp-table code {
  font-size: var(--type-13);
  background: var(--paper-2, var(--color-neutral-100));
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-word;
}
@media (max-width: 720px) {
  .cmp-table { font-size: var(--type-13); min-width: 560px; }
  .cmp-table th, .cmp-table td { padding: 8px 10px; }
  .cmp-table code { font-size: var(--type-12); }
  /* Wrap any .cmp-table in a scroll container at narrow viewports
     so the table stays internally consistent rather than uneven. */
  .cmp-table-wrap, .container .cmp-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
}


   light border in the legacy CSS is overridden here so dark mode
   meets WCAG AA contrast (4.5:1 body text, 3:1 large text).
   ============================================================ */
:root[data-theme="dark"] {
  /* Lift accent so violet on dark surface contrasts 4.5:1+ */
  --accent:        #818cf8 !important;   /* violet-400 — readable on grey-900 */
  --accent-2:      #c4b5fd !important;   /* violet-300 hover */
  --accent-soft:   rgba(167, 139, 250, 0.15) !important;
  --accent-line:   rgba(167, 139, 250, 0.30) !important;

  /* Semantic in dark mode — lifted for contrast */
  --success:    #81c995 !important;
  --warning:    #fdd663 !important;
  --danger:     #f28b82 !important;
}

/* Dark-mode card/widget contrast */
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .widget-card,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .what-card,
:root[data-theme="dark"] .ps-card,
:root[data-theme="dark"] .af-card,
:root[data-theme="dark"] .ag-card,
:root[data-theme="dark"] .why-card,
:root[data-theme="dark"] .persona-card,
:root[data-theme="dark"] .sector-card,
:root[data-theme="dark"] .arch-card,
:root[data-theme="dark"] .cf-card,
:root[data-theme="dark"] .evo-card,
:root[data-theme="dark"] .qs-card,
:root[data-theme="dark"] .how-card,
:root[data-theme="dark"] .ba-side,
:root[data-theme="dark"] .biz-list li,
:root[data-theme="dark"] .faq-q,
:root[data-theme="dark"] .faq-item {
  background: var(--paper-2) !important;
  border-color: var(--rule) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .ps-card.problem,
:root[data-theme="dark"] .ba-side.before { border-color: rgba(242, 139, 130, 0.30) !important; }
:root[data-theme="dark"] .ps-card.solution,
:root[data-theme="dark"] .ba-side.after  { border-color: rgba(129, 201, 149, 0.30) !important; }

/* Dark-mode tags */
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .ps-tag,
:root[data-theme="dark"] .af-tag,
:root[data-theme="dark"] .ag-tag,
:root[data-theme="dark"] .evo-tag,
:root[data-theme="dark"] .ba-tag,
:root[data-theme="dark"] .hero-pill,
:root[data-theme="dark"] .version-pill,
:root[data-theme="dark"] .prof-pill,
:root[data-theme="dark"] .sector-frameworks {
  background: var(--paper-3) !important;
  border-color: var(--rule) !important;
  color: var(--text-muted) !important;
}

/* Dark-mode tables */
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] .cmp thead th { background: var(--paper-3) !important; color: var(--text-muted) !important; }
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .cmp tbody tr:hover { background: var(--paper-3) !important; }

/* Dark-mode mega-nav */
:root[data-theme="dark"] .mega-panel { background: var(--paper-2) !important; border-color: var(--rule) !important; }
:root[data-theme="dark"] .mega-panel .mega-col a:hover { background: var(--paper-3) !important; }
:root[data-theme="dark"] .mega summary:hover,
:root[data-theme="dark"] .mega[open] > summary { background: var(--accent-soft) !important; color: var(--accent) !important; }

/* Dark-mode hero — neutral-dark, accent text contrast lifted */
:root[data-theme="dark"] .hero { background: var(--paper) !important; }
:root[data-theme="dark"] .h-section .accent { color: var(--accent) !important; }

/* Dark-mode button */
:root[data-theme="dark"] .btn-secondary { background: var(--paper-2) !important; }
:root[data-theme="dark"] .btn-primary { color: #1f2024 !important; }   /* dark text on light-violet for contrast */

/* Dark-mode inline code */
:root[data-theme="dark"] code { background: var(--paper-3) !important; color: var(--text) !important; }

/* Dark-mode footer */
:root[data-theme="dark"] .footer { background: var(--paper-2) !important; color: var(--text-muted) !important; }

/* Dark-mode <details> caret + summary hover */
:root[data-theme="dark"] .section.collapsible summary:hover .section-caret { background: var(--accent) !important; color: #1f2024 !important; }

/* FAQ audience filter tabs */
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  width: fit-content;
}
.faq-filter {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--type-13);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.faq-filter:hover { color: var(--text); }
.faq-filter.is-active {
  background: var(--accent);
  color: var(--color-paper);
}
:root[data-theme="dark"] .faq-filter.is-active { color: #1f2024; }
.faq-list .faq-item.faq-hidden { display: none; }

/* ============================================================
   §FINAL-13 — Scroll-to-top: glass-effect, content-safe.
   Universal across all 6 pages. Won't obscure content because:
   • Hidden until user scrolls past 30% of viewport.
   • Positioned bottom-right with safe-area-inset-bottom.
   • Translucent + backdrop-blur — content visible underneath.
   • Auto-fades + drops down when at top.
   ============================================================ */
.scroll-top {
  position: fixed !important;
  right: max(20px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 60 !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.70) !important;
  border: 1px solid color-mix(in srgb, var(--color-line) 10%, transparent) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-line) 12%, transparent), 0 1px 3px color-mix(in srgb, var(--color-line) 6%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  backdrop-filter:         saturate(180%) blur(14px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.92) !important;
  transition: opacity .22s ease, transform .22s ease, background .15s, border-color .15s !important;
}
.scroll-top.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}
.scroll-top:hover {
  background: color-mix(in srgb, var(--color-paper) 96%, transparent) !important;
  border-color: var(--accent) !important;
}
.scroll-top:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
}
.scroll-top svg { display: block !important; }
.scroll-top .arrow {
  stroke: var(--text) !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke .15s !important;
}
.scroll-top .ring-bg {
  stroke: color-mix(in srgb, var(--color-line) 10%, transparent) !important;
  stroke-width: 3 !important;
  fill: none !important;
}
.scroll-top .ring-progress {
  stroke: var(--accent) !important;
  stroke-width: 3 !important;
  fill: none !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset .12s linear !important;
  transform: rotate(-90deg) !important;
  transform-origin: 50% 50% !important;
}
.scroll-top:hover .arrow { stroke: var(--accent) !important; }

/* Mobile: smaller + tighter spacing so it doesn't crowd narrow viewports */
@media (max-width: 480px) {
  .scroll-top {
    width: 42px !important;
    height: 42px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
  .scroll-top svg { width: 42px !important; height: 42px !important; }
}

/* Dark mode: tinted glass on dark surface */
:root[data-theme="dark"] .scroll-top {
  background: rgba(32, 33, 36, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30) !important;
}
:root[data-theme="dark"] .scroll-top:hover { background: rgba(48, 49, 52, 0.92) !important; }
:root[data-theme="dark"] .scroll-top .arrow      { stroke: var(--text) !important; }
:root[data-theme="dark"] .scroll-top .ring-bg    { stroke: rgba(255, 255, 255, 0.12) !important; }
:root[data-theme="dark"] .scroll-top:hover .arrow { stroke: var(--accent) !important; }

/* Reduced motion: skip the transform animation */
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity .15s ease !important; transform: none !important; }
  .scroll-top.is-visible { transform: none !important; }
}

/* Print: hide the scroll-top button (won't be useful on paper) */
@media print {
  .scroll-top { display: none !important; }
}

/* ============================================================
   §FINAL-14 — Kill the residual blue.
   Multiple "blue" sources survived previous passes:
     • --accent-grad gradient included #6366f1 indigo + #06b6d4 cyan
       which read as "dark blue" through -webkit-background-clip: text
       on h1/h2/h3/.what-def/.evo-card/.assurance-card .accent
     • --info (#0ea5e9 sky-500) on cascade-feed pill, profile-detail
       code, coverage line pills
     • urn-tok-prefix #6366f1 indigo
   ============================================================ */

:root {
  /* Solid-violet "gradient" — single colour so background-clip: text shows pure violet */
  --accent-grad: linear-gradient(120deg, var(--accent) 0%, var(--accent) 100%) !important;
  /* Replace bright sky-blue with a soft purple — same family as --accent */
  --info:        #a855f7 !important;
  --info-soft:   rgba(168, 85, 247, 0.10) !important;
  --info-line:   rgba(168, 85, 247, 0.22) !important;
}
:root[data-theme="dark"] {
  --accent-grad: linear-gradient(120deg, var(--accent) 0%, var(--accent) 100%) !important;
  --info:        #c084fc !important;
  --info-soft:   rgba(192, 132, 252, 0.16) !important;
  --info-line:   rgba(192, 132, 252, 0.30) !important;
}

/* All gradient-clipped accent text → solid violet */
.h-section .accent,
.hero h1 .accent,
.what-def .accent,
.evo-card.kye h3,
.assurance-card .c,
.qs-tabs .qs-tab.is-active::after,
.lifecycle-state.active::before {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--accent) !important;
}

/* Replace the lingering indigo on URN tokens (now on demos page anyway) */
.urn-tok-prefix {
  background: rgba(99, 102, 241, 0.10) !important;
  color: var(--accent) !important;
}

/* Cascade-feed audit pill, coverage line pills, profile-detail terms — purple, not sky-blue */
.cascade-feed .pill.audit,
.cov-pill.line,
.profile-detail .terms code {
  background: var(--info-soft) !important;
  color: var(--info) !important;
  border-color: var(--info-line) !important;
}

/* Quickstart sample-output token highlighting — was bright cyan */
.qs-pane pre .u { color: var(--accent) !important; }
.qs-pane pre .s { color: var(--success) !important; }
.qs-pane pre .c { color: var(--text-muted) !important; }

/* Brand-mark + nav: occasional blue cast through accent-2 in dark mode — pin to violet */
:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .brand-mark { color: var(--accent) !important; }

/* ============================================================
   §FINAL-15 — Material top app bar + drawer + stepper.
   Replaces the mega-menu with a flat, per-audience top bar
   styled like Google's Material 3 top app bar. Each link
   navigates to a real page (no more anchor-jumping).
   ============================================================ */

.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-18);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
  height: 64px;
}
.top-bar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  padding: 0 24px;
}
.top-bar .brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--type-14);
  color: var(--text); text-decoration: none;
  flex-shrink: 0;
}
.top-bar .brand-mark {
  display: inline-flex; width: 24px; height: 24px; color: var(--accent);
}
/* Wordmark variant must expand to fit the 3-letter "KYE" content.
   `white-space: nowrap` is critical — without it the 3 letters wrap
   onto separate lines whenever the flex container is narrow. */
.top-bar .brand-mark--wordmark {
  width: auto !important;
  height: auto !important;
  min-width: 48px;
  padding: 5px 10px;
  color: #fff;
  font-size: var(--type-13);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top-bar-nav {
  display: flex; gap: 4px; align-items: center;
  flex: 1; justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
}
.tb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: var(--type-14); font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
  flex-shrink: 0;
  text-overflow: clip;
  overflow: visible;
}
.tb-link .lbl { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
.tb-link .ms { font-size: var(--type-18); opacity: 0.85; }
.tb-link:hover { background: var(--paper-2); color: var(--text); }
.tb-link.is-active {
  background: var(--accent-soft); color: var(--accent);
}
.tb-link.is-active .ms { opacity: 1; }
.top-bar-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tb-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: var(--type-14); font-weight: 500;
  background: var(--accent); color: var(--color-paper) !important;
  text-decoration: none;
}
.tb-cta:hover { background: var(--accent-2); }
.tb-cta .ms { font-size: var(--type-16); }
.theme-toggle {
  width: 40px; height: 40px;
  background: transparent; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
}
.theme-toggle:hover { background: var(--paper-2); color: var(--text); }
.theme-toggle .icon-moon, .theme-toggle .icon-sun { font-size: var(--type-22); }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-sun  { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: inline-flex; }
.drawer-toggle {
  display: inline-flex;
  align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  font-size: var(--type-13); font-weight: 500;
  font-family: inherit;
}
.drawer-toggle:hover { background: var(--paper-2); border-color: var(--text-muted); }
.drawer-toggle .drawer-toggle-label {
  font-size: var(--type-13); font-weight: 500;
}

/* Below ~1500px we drop the hub labels and keep just the icons —
 * 8 icon hubs fit comfortably in any desktop top bar, and the
 * drawer ("All sections") button stays reachable for the full nav.
 * Above 1500px (wide laptops + monitors) the labels appear. */
@media (max-width: 1500px) {
  .tb-link .lbl { display: none; }
  .tb-link { padding: 8px; }
  .tb-link .ms { font-size: var(--type-22); opacity: 1; }
  .tb-cta span:not(.ms) { display: none; }
  .tb-cta { padding: 8px; }
  .drawer-toggle { padding: 0 8px; }
  .drawer-toggle-label { display: none; }
}
/* Mobile: drop the hub strip entirely; drawer is the single nav. */
@media (max-width: 760px) {
  .top-bar-nav { display: none; }
  .top-bar-actions .audience-toggle { display: none; }
}

.top-bar-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 200;
  display: flex; flex-direction: column;
  visibility: hidden;
}
.top-bar-drawer.is-open { transform: translateX(0); visibility: visible; }
.top-bar-drawer[aria-hidden="false"] { visibility: visible; }
.top-bar-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.top-bar-drawer-title {
  font-size: var(--type-14); font-weight: 600; letter-spacing: 0.02em;
  color: var(--text);
}
.drawer-close {
  width: 36px; height: 36px;
  background: transparent; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
}
.drawer-close:hover { background: var(--paper-2); color: var(--text); }
.top-bar-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.top-bar-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 199;
}
.top-bar-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
:root[data-theme="dark"] .top-bar-drawer-backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.top-bar-drawer .tb-link {
  width: 100%; justify-content: flex-start;
  padding: 11px 14px; border-radius: 10px;
  font-size: var(--type-14);
}
.top-bar-drawer .tb-link .lbl { display: inline; }
body.drawer-open { overflow: hidden; }

/* Mobile drawer: show group labels + dividers so the 32-item nav
 * reads as 7 groups (Protocol / Build / Compliance / By role /
 * By sector / Programme / Resources) instead of one long flat list.
 * Desktop hides these elements ≤1100px; the drawer overrides. */
.top-bar-drawer .tb-group-label {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 18px 6px;
  margin: 0;
}
.top-bar-drawer .tb-divider {
  display: block;
  height: 1px;
  background: var(--rule);
  margin: 6px 14px;
  border: 0;
}
/* The first divider (before the very first group label) is redundant
 * — drop it. */
.top-bar-drawer > .tb-divider:first-child { display: none; }
.top-bar-drawer .tb-link .ms { font-size: var(--type-22); }

/* Hide the legacy mega-menu on pages we've upgraded */
.top-bar ~ * .nav-links.mega-nav { display: none !important; }
header.nav { display: none !important; }   /* legacy nav hidden where top-bar present */

/* ============================================================
   Horizontal stepper (Material) for adoption timeline
   ============================================================ */
.stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  margin-top: 28px;
  counter-reset: stepper-num;
}
.stepper::before {
  content: ""; position: absolute;
  top: 22px; left: 6%; right: 6%;
  height: 2px; background: var(--rule);
  z-index: 0;
}
.step {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative; z-index: 1;
}
.step-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-weight: 600; font-size: var(--type-14);
  counter-increment: stepper-num;
}
.step-circle::before { content: counter(stepper-num); }
.step-circle .ms { font-size: var(--type-22); }
.step.done .step-circle { background: var(--accent); color: var(--color-paper); }
.step-when { font-size: var(--type-11); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim); }
.step-h { font-size: var(--type-14); font-weight: 600; line-height: 1.35; color: var(--text); margin: 0; }
.step-b { font-size: var(--type-13); line-height: 1.55; color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .stepper { grid-template-columns: 1fr; gap: 24px; }
  .stepper::before { display: none; }
  .step { flex-direction: row; align-items: flex-start; gap: 16px; }
  .step-circle { flex-shrink: 0; }
  .step-text { flex: 1; }
}

/* ============================================================
   Hero visual placeholder — clean SVG illustration on business.html
   ============================================================ */
.hero-with-visual { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero-with-visual { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.hero-visual {
  width: 100%; aspect-ratio: 1.2;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual svg { width: 100%; height: 100%; }

/* ============================================================
   §FINAL-16 — Accent → Material 3 purple (unambiguously purple)
                 + mobile top-bar overlap fix.
   ============================================================ */

:root {
  --accent:        #6750A4 !important;   /* Material 3 default primary */
  --accent-2:      #7E5DB3 !important;   /* hover lift */
  --accent-soft:   rgba(103, 80, 164, 0.10) !important;
  --accent-line:   rgba(103, 80, 164, 0.22) !important;
  --accent-grad:   linear-gradient(120deg, #6750A4 0%, #6750A4 100%) !important;
  --info:          #6750A4 !important;
  --info-soft:     rgba(103, 80, 164, 0.10) !important;
  --info-line:     rgba(103, 80, 164, 0.22) !important;
}
:root[data-theme="dark"] {
  --accent:        #D0BCFF !important;   /* Material 3 light purple-200 */
  --accent-2:      #B69DF8 !important;
  --accent-soft:   rgba(208, 188, 255, 0.16) !important;
  --accent-line:   rgba(208, 188, 255, 0.30) !important;
  --accent-grad:   linear-gradient(120deg, #D0BCFF 0%, #D0BCFF 100%) !important;
  --info:          #D0BCFF !important;
  --info-soft:     rgba(208, 188, 255, 0.16) !important;
  --info-line:     rgba(208, 188, 255, 0.30) !important;
}

/* Anywhere previous CSS still set a violet/indigo hex literal — neutralise to var(--accent) */
.urn-tok-prefix,
.urn-tok-class,
.urn-tok-td,
.urn-tok-sub {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.urn-tok-local { color: var(--text-dim) !important; background: var(--paper-2) !important; }

/* Favicon/logo inline SVGs use fill="%236366f1" which is fine — outside DOM,
   but the brand-mark SVG inside the page uses currentColor which now picks
   up the new purple. Same for hero illustration. */

/* ============================================================
   Mobile top-bar overlap fix
   On narrow viewports the GitHub CTA + theme toggle + drawer
   button were colliding with the brand name and each other.
   ============================================================ */
@media (max-width: 900px) {
  .top-bar-inner { gap: 12px; padding: 0 14px; }
  .top-bar { height: 56px; }
  .brand-name { display: none !important; }                /* logo only */
  .top-bar .brand-mark { width: 28px; height: 28px; }
  .top-bar .brand-mark--wordmark { width: auto !important; height: auto !important; min-width: 46px; padding: 4px 9px; font-size: var(--type-12); white-space: nowrap; flex-shrink: 0; }
  .tb-cta { padding: 8px 10px !important; }
}
@media (max-width: 760px) {
  .top-bar-nav { display: none !important; }
  .top-bar-actions .audience-toggle { display: none !important; }
  .top-bar-actions { gap: 4px; flex-shrink: 0; }
  /* Hide GitHub CTA on mobile — drawer has its own GitHub link */
  .top-bar .tb-cta { display: none !important; }
  /* Theme + drawer fit comfortably */
  .theme-toggle, .drawer-toggle {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  /* Brand left, drawer/theme right */
  .top-bar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 12px !important;
  }
}
@media (max-width: 380px) {
  .top-bar-inner { padding: 0 10px !important; gap: 8px !important; }
  .theme-toggle, .drawer-toggle { width: 36px !important; height: 36px !important; }
  .theme-toggle .ms, .drawer-toggle .ms { font-size: var(--type-18) !important; }
}

/* Drawer surface gets the GitHub link injected (since top-bar hides it on mobile).
   The drawer auto-clones top-bar-nav; we add the GitHub link manually via JS too. */
.top-bar-drawer .tb-link.tb-cta-mobile {
  background: var(--accent) !important;
  color: var(--color-paper) !important;
  margin-top: 8px;
}
:root[data-theme="dark"] .top-bar-drawer .tb-link.tb-cta-mobile { color: #1f2024 !important; }

/* ============================================================
   §FINAL-17 — Google logo GREEN accent + Material font load gate.
   User: "lets try google colours like google logo colours" +
   "shitty purple". Pivoting to Google brand green #34A853 — NOT
   blue, NOT purple. Distinct from --success (deeper #4338ca).
   Plus a font-load gate so the Material Symbols ligature text
   ('play_circle', 'dark_mode', etc) stays HIDDEN until the
   Google Fonts CDN delivers the icon font.
   ============================================================ */

:root {
  --accent:        #6366f1 !important;   /* Google brand green (medium-dark for contrast) */
  --accent-2:      #4338ca !important;   /* hover lift */
  --accent-soft:   rgba(99, 102, 241, 0.10) !important;
  --accent-line:   rgba(99, 102, 241, 0.22) !important;
  --accent-grad:   linear-gradient(120deg, #6366f1 0%, #6366f1 100%) !important;
  --info:          #6366f1 !important;
  --info-soft:     rgba(99, 102, 241, 0.10) !important;
  --info-line:     rgba(99, 102, 241, 0.22) !important;
  /* Move success a bit darker so cell-yes still differentiates from accent */
  --success:       #4338ca !important;
  --success-soft:  rgba(15, 81, 50, 0.10) !important;
}
:root[data-theme="dark"] {
  --accent:        #81C995 !important;   /* Google green-200 for dark surfaces */
  --accent-2:      #A8DAB5 !important;
  --accent-soft:   rgba(129, 201, 149, 0.16) !important;
  --accent-line:   rgba(129, 201, 149, 0.30) !important;
  --accent-grad:   linear-gradient(120deg, #81C995 0%, #81C995 100%) !important;
  --info:          #81C995 !important;
  --info-soft:     rgba(129, 201, 149, 0.16) !important;
  --info-line:     rgba(129, 201, 149, 0.30) !important;
}

/* Font-load gate — hide every <span class="ms"> until the Material
   Symbols font has loaded. This eliminates the "play_circle dark_mode"
   text-fallback flash the user reported. */
.ms { visibility: hidden; }
html.ms-loaded .ms { visibility: visible; }
/* Reserve space so layout doesn't shift while waiting */
.ms { display: inline-flex; width: 1em; min-width: 1em; height: 1em; }

/* Drawer link always shows label (independent of font load) */
.top-bar-drawer .tb-link {
  width: 100%;
  justify-content: flex-start !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.top-bar-drawer .tb-link .lbl { display: inline !important; }

/* ============================================================
   §FINAL-18 — Mobile responsiveness pass: business/buyers
   visuals + outcome cards + whitepaper.
   User: "fix visuals and outcome cards on mobile view" +
   "fix whitepaper on mobile view not responsive".
   ============================================================ */

/* Business / buyers hero-with-visual: ensure clean stack on mobile */
@media (max-width: 900px) {
  .hero-with-visual {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-visual {
    aspect-ratio: 1.4;
    padding: 18px !important;
  }
}
@media (max-width: 600px) {
  .hero-visual {
    aspect-ratio: 1.5;
    padding: 14px !important;
  }
  .hero-visual svg {
    /* allow it to scale within container */
    width: 100% !important; height: 100% !important;
  }
}

/* Outcome cards (.why-grid used by business/buyers/auditors etc.):
   2-col on tablet, 1-col on phone, tighter padding */
@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .why-card { padding: 18px !important; }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .why-card { padding: 16px !important; }
  .why-card .why-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .why-card h3   { font-size: var(--type-14) !important; }
  .why-card .why-pain, .why-card .why-out { font-size: var(--type-13) !important; line-height: 1.55 !important; }
}

/* Stepper on mobile: vertical stack, full-width step cards */
@media (max-width: 760px) {
  .stepper { gap: 16px !important; }
  .step { padding: 14px !important; gap: 12px; }
  .step-circle { width: 36px !important; height: 36px !important; font-size: var(--type-13) !important; }
  .step-h { font-size: var(--type-14) !important; }
  .step-b { font-size: var(--type-13) !important; }
}

/* biz-list (Executive summary, ROI, Sectors, FAQ on business/buyers/auditors etc) */
@media (max-width: 600px) {
  .biz-list { gap: 10px !important; margin-top: 18px !important; }
  .biz-list li { padding: 14px 16px !important; font-size: var(--type-13) !important; line-height: 1.55 !important; }
}

/* Hero pill / lede on mobile */
@media (max-width: 600px) {
  .hero-pill { font-size: var(--type-11) !important; padding: 4px 10px !important; }
  .hero h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  .hero p.lede { font-size: var(--type-14) !important; line-height: 1.55 !important; }
  .hero-cta { gap: 8px !important; flex-wrap: wrap; }
  .hero-cta .btn { font-size: var(--type-13) !important; padding: 9px 14px !important; }
}

/* ============================================================
   Whitepaper mobile responsiveness (override + hardening on
   top of whitepaper.css media queries)
   ============================================================ */
@media (max-width: 980px) {
  .wp-main { display: block !important; padding: 36px 16px 56px !important; }
  .wp-toc {
    position: static !important;
    margin-bottom: 24px;
    padding: 14px 16px !important;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper-2);
  }
  .wp-toc-title { font-size: var(--type-11) !important; }
  .wp-toc ol li a { font-size: var(--type-14) !important; }
  .wp-article { padding: 0 !important; }
  .wp-article h1 { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.15 !important; margin-top: 0; }
  .wp-article h2 { font-size: clamp(20px, 5vw, 26px) !important; margin-top: 36px !important; }
  .wp-article h3 { font-size: var(--type-16) !important; }
  .wp-article p, .wp-records li, .wp-principles li, .wp-refs li {
    font-size: var(--type-14) !important; line-height: 1.65 !important;
  }
  .wp-article pre { font-size: var(--type-12) !important; padding: 12px 14px !important; }
  .wp-article code { font-size: var(--type-12) !important; word-break: break-word; }
}
@media (max-width: 600px) {
  .wp-main { padding: 28px 12px 48px !important; }
  .wp-article h1 { font-size: var(--type-28) !important; }
  .wp-article h2 { font-size: var(--type-18) !important; }
  .wp-article p { font-size: var(--type-14) !important; }
  .wp-records li, .wp-principles li, .wp-refs li { font-size: var(--type-14) !important; }
  /* Tables overflow-x */
  .wp-article table, .wp-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap;
    font-size: var(--type-12) !important;
  }
}

/* Top-bar on whitepaper page — same fixes as other pages */
@media (max-width: 760px) {
  .wp-body .top-bar-inner { padding: 0 12px !important; }
  .wp-body .brand-name { display: none !important; }
}

/* ============================================================
   §FINAL-19 — Whitepaper mobile border / overflow fix.
   User: "whitepaper on mobile seem to be trimmed page borders
   text borders must be fixed". Long inline code, URLs, tables,
   pre blocks were exceeding the viewport on phones, causing
   horizontal cut-off and "borderless" feel.
   ============================================================ */

/* Constrain everything inside the wp-article to the viewport */
.wp-body, .wp-body main, .wp-main { overflow-x: hidden !important; }
.wp-article {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.wp-article p,
.wp-article li,
.wp-article h1,
.wp-article h2,
.wp-article h3,
.wp-article h4 {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.wp-article code,
.wp-article kbd,
.wp-article samp {
  word-break: break-all;
  white-space: normal;
}
.wp-article pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
}
.wp-article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile-specific: tighter padding + visible page borders */
@media (max-width: 760px) {
  .wp-main {
    padding: 24px 14px 56px !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .wp-article {
    padding: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }
  .wp-toc {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px !important;
  }
  /* Anything inline-code-like on mobile: 11px to fit */
  .wp-article code { font-size: var(--type-11) !important; padding: 1px 4px !important; }
  .wp-article pre  { font-size: var(--type-11) !important; padding: 10px 12px !important; line-height: 1.5; }
  .wp-article p, .wp-records li, .wp-principles li, .wp-refs li {
    font-size: var(--type-14) !important; line-height: 1.6 !important;
  }
}
@media (max-width: 480px) {
  .wp-main { padding: 20px 12px 48px !important; }
  .wp-article h1 { font-size: var(--type-22) !important; line-height: 1.18 !important; }
  .wp-article h2 { font-size: var(--type-18) !important; }
  .wp-article h3 { font-size: var(--type-16) !important; }
  .wp-article p, .wp-records li, .wp-principles li, .wp-refs li {
    font-size: var(--type-13) !important; line-height: 1.6 !important;
  }
  .wp-article code, .wp-article pre { font-size: var(--type-11) !important; }
}

/* Make sure body itself doesn't horizontal-scroll */
.wp-body { overflow-x: hidden; }

/* Section h2 long-string overflow on collapsible sections */
.section .h-section, .section .lede {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* ============================================================
   §FINAL-20 — Scroll-top guaranteed visibility on every page
   (especially whitepaper). User: "no going to top of page button
   on whitepaper (mobile+web)". Cause: stacking-context conflict
   with .wp-toc backdrop-filter + the button's z-index being
   below other fixed UI on certain pages. Force z-index high
   and pin the button to the body, not any ancestor.
   ============================================================ */

.scroll-top {
  z-index: 9999 !important;
  position: fixed !important;
}

/* Ensure the button isn't accidentally inside an overflow:hidden
   ancestor on whitepaper-body */
.wp-body { overflow-x: clip !important; }   /* clip != hidden, doesn't establish a new BFC for fixed pos */

/* On the whitepaper, give the button its own visible-state guard
   that doesn't depend on any earlier !important rule */
.wp-body .scroll-top { opacity: 0; pointer-events: none; }
.wp-body .scroll-top.is-visible { opacity: 1 !important; pointer-events: auto !important; }

/* ============================================================
   §FINAL-21 — Hero pill mobile fix
   "v1.0 · OPEN STANDARD · ENTITY AUTHORITY PROTOCOL FOR AI
   GOVERNANCE" was overflowing on phones. Allow wrap + shrink
   font + keep within container.
   ============================================================ */
.hero-pill {
  max-width: 100%;
  white-space: normal !important;
  text-align: left;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .hero-pill {
    font-size: var(--type-11) !important;
    letter-spacing: 0.10em !important;
    padding: 6px 12px !important;
    line-height: 1.45 !important;
  }
}
@media (max-width: 480px) {
  .hero-pill {
    font-size: var(--type-11) !important;
    letter-spacing: 0.08em !important;
    padding: 5px 10px !important;
  }
}
/* Also constrain the version-pill (release notes link) the same way */
.version-pill {
  max-width: 100%;
  white-space: normal !important;
}

/* ============================================================
   §FINAL-22 — Unify hero-pill + version-pill font size on
   every viewport. User: "V1.0 · OPEN STANDARD ... font size
   discrepancies" — the two adjacent pills used different
   sizes.
   ============================================================ */
.hero-pill,
.version-pill,
.deployed-pill {
  font-size: var(--type-11) !important;
  letter-spacing: 0.10em !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}
@media (max-width: 760px) {
  .hero-pill, .version-pill, .deployed-pill {
    font-size: var(--type-11) !important;
    letter-spacing: 0.08em !important;
    padding: 5px 10px !important;
  }
}
@media (max-width: 480px) {
  .hero-pill, .version-pill, .deployed-pill {
    font-size: var(--type-11) !important;
    letter-spacing: 0.06em !important;
    padding: 4px 9px !important;
  }
}

/* ============================================================
   §FINAL-23 — Pill dot visibility + card-icon consistency
   ============================================================ */

/* Hero pill needs the colored dot to be obvious at the start of
   the line, even when the pill wraps to multiple lines. */
.hero-pill,
.version-pill,
.deployed-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.hero-pill .dot,
.version-pill .dot,
.deployed-pill .dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Card-icon consistency — Material icons added to the card
   families that previously used only a tag pill. The tag + icon
   pair gives visual hierarchy uniform across why-cards,
   sector-cards, persona-cards, ps-cards, af-cards, ag-cards,
   arch-cards, evo-cards, what-card. */
.ps-card::before,
.af-card::before,
.ag-card::before,
.evo-card::before,
.what-card::before {
  content: var(--card-icon, "");
  font-family: 'Material Symbols Outlined';
  font-size: var(--type-22);
  line-height: 1;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  margin-bottom: 12px;
}
/* Per-card-type icon assignment via custom property */
.ps-card.problem  { --card-icon: "report"; }
.ps-card.solution { --card-icon: "verified"; }
.af-card.af-then  { --card-icon: "lock_open"; }
.af-card.af-now   { --card-icon: "shield_lock"; }
.ag-card          { --card-icon: "hub"; }
.ag-card.ag-feature { --card-icon: "stacked_line_chart"; }
.evo-card.legacy   { --card-icon: "history"; }
.evo-card.emerging { --card-icon: "auto_awesome"; }
.evo-card.kye      { --card-icon: "verified"; }
.what-card         { --card-icon: "menu_book"; }

/* arch-cards use their numeric badge; don't add an icon there */
.arch-card::before { content: none !important; }

/* Hide the icon block until the Material font has loaded so the
   literal text 'verified' / 'shield_lock' etc never flashes. */
html:not(.ms-loaded) .ps-card::before,
html:not(.ms-loaded) .af-card::before,
html:not(.ms-loaded) .ag-card::before,
html:not(.ms-loaded) .evo-card::before,
html:not(.ms-loaded) .what-card::before {
  visibility: hidden;
}

/* ============================================================
   §FINAL-24 — Punch-list pass: brand-mark contrast, theme-toggle
   visibility on mobile, whitepaper mobile borders + scroll-top,
   sector / persona / what-card layout cleanup, persona-chip
   icon support, contact modal, footer trademark notice layout.
   ============================================================ */

/* --- Top-bar brand-mark: SVG must inherit currentColor (not white).
       Earlier rule '.brand-mark svg { color: white; }' was meant for
       the gradient pill mark; the top-bar variant is transparent so
       the icon must take the parent green. */
.top-bar .brand-mark {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent) !important;
}
.top-bar .brand-mark svg { color: inherit !important; }
.top-bar .brand-mark svg path { stroke: currentColor !important; }
:root[data-theme="dark"] .top-bar .brand-mark { color: var(--accent) !important; }

/* Same fix for legacy '.nav' header used on 404.html / legal.html */
header.nav .brand-mark {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent) !important;
}
header.nav .brand-mark svg { color: inherit !important; }
header.nav .brand-mark svg path { stroke: currentColor !important; }

/* Footer brand-mark same treatment so the icon is always visible
   regardless of theme (footer surface is ink in dark, paper in light). */
.footer .brand-mark {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent) !important;
}
.footer .brand-mark svg { color: inherit !important; }
.footer .brand-mark svg path { stroke: currentColor !important; }

/* --- Theme toggle: guarantee visibility on EVERY breakpoint.
       Earlier rules hid icons by display:none until [data-theme] was
       set — but the page may load with no data-theme attr (system
       preference path). Force the moon to show in the default state. */
.theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.theme-toggle svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
/* Default (no theme attr OR light) → moon */
.theme-toggle .icon-moon { display: block !important; }
.theme-toggle .icon-sun  { display: none  !important; }
/* Dark → sun */
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none  !important; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block !important; }
@media (max-width: 600px) {
  .theme-toggle { width: 36px; height: 36px; }
}

/* --- Persona-chip: support inline Material icon variant. */
.persona-chip .ms {
  font-size: var(--type-14) !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  color: var(--accent);
}
.persona-chip:hover .ms { color: var(--accent-2); }

/* --- What-card row icons: render Material symbols cleanly. */
.what-row .what-icon { display: inline-flex; align-items: center; justify-content: center; }
.what-row .what-icon .ms {
  font-size: var(--type-18) !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  color: var(--accent);
}

/* --- Sector grid: prevent card content overflow on very narrow phones.
       Pills and frameworks string can push beyond viewport edge. */
@media (max-width: 600px) {
  .sector-grid { gap: 12px; }
  .sector-card { padding: 18px; min-width: 0; }
  .sector-card h3 { font-size: var(--type-16); }
  .sector-card .sector-pain { font-size: var(--type-12); }
  .sector-card .sector-profiles { gap: 4px; }
  .sector-card .prof-pill { font-size: var(--type-11); padding: 3px 8px; }
  .sector-card .sector-frameworks {
    font-size: var(--type-11);
    word-wrap: anywhere;
    overflow-wrap: anywhere;
  }
}

/* --- Persona-grid (Who-it's-for): visually differentiate from
       sector grid by giving each card a left accent rail and a
       different padding/typography rhythm. */
.persona-card {
  position: relative;
  padding-left: 22px;
}
.persona-card::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0.8;
}
.persona-card .persona-icon {
  background: transparent !important;
  border: none !important;
  margin-bottom: 8px !important;
  width: 36px !important;
  height: 36px !important;
}
.persona-card .persona-roi {
  font-size: var(--type-12);
  color: var(--text-muted);
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.persona-card .persona-roi li {
  padding-left: 18px;
  position: relative;
}
.persona-card .persona-roi li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* --- Whitepaper mobile: prevent every kind of horizontal overflow
       and guarantee the scroll-top button is visible. */
@media (max-width: 900px) {
  body.wp-body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }
  body.wp-body .wp-main {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    max-width: 100% !important;
  }
  body.wp-body .wp-toc { display: none !important; }
  body.wp-body .wp-article {
    max-width: 100% !important;
    word-wrap: anywhere;
    overflow-wrap: anywhere;
  }
  body.wp-body .wp-article p,
  body.wp-body .wp-article li,
  body.wp-body .wp-article h1,
  body.wp-body .wp-article h2,
  body.wp-body .wp-article h3 {
    word-wrap: anywhere;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  body.wp-body .wp-article pre,
  body.wp-body .wp-article table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.wp-body .wp-article code {
    word-wrap: anywhere;
    overflow-wrap: anywhere;
  }
}

/* Scroll-top — guaranteed visible across all pages including wp-body.
   z-index high, position fixed, no transform parent traps. */
#scroll-top.scroll-top {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center;
  width: 52px; height: 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  color: var(--accent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#scroll-top.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#scroll-top.scroll-top:hover { transform: translateY(-2px); }
#scroll-top.scroll-top svg .ring-bg {
  fill: none; stroke: var(--line); stroke-width: 2;
}
#scroll-top.scroll-top svg .ring-progress {
  fill: none; stroke: var(--accent); stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 26px 26px;
  transition: stroke-dashoffset .12s linear;
}
#scroll-top.scroll-top svg .arrow {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 600px) {
  #scroll-top.scroll-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

/* --- Footer-bottom layout (universal trademark notice) */
.footer-bottom {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--type-11);
  color: var(--text-dim);
  line-height: 1.55;
}
.footer-bottom > div:first-child { flex: 1; min-width: 0; }
.footer-bottom a { color: var(--accent); text-decoration: underline; }
@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; }
  .footer-bottom { font-size: var(--type-11); }
}

/* --- Contact modal (Talk to us / Drop us a line) */
.kye-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kye-modal-backdrop.is-open { display: flex; }
.kye-modal {
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
  max-width: 520px;
  width: 100%;
  padding: 28px;
  position: relative;
}
.kye-modal h3 { margin: 0 0 6px; font-size: var(--type-18); font-weight: 700; }
.kye-modal .kye-modal-sub { margin: 0 0 18px; color: var(--text-muted); font-size: var(--type-13); }
.kye-modal label {
  display: block;
  font-size: var(--type-12);
  font-weight: 600;
  color: var(--text-muted);
  margin: 12px 0 4px;
}
.kye-modal input,
.kye-modal textarea,
.kye-modal select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: var(--type-14);
  background: var(--paper, var(--color-paper));
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
}
.kye-modal textarea { min-height: 120px; resize: vertical; }
.kye-modal input:focus,
.kye-modal textarea:focus,
.kye-modal select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.kye-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.kye-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--type-22);
  line-height: 1;
}
.kye-modal-close:hover { background: var(--accent-soft); color: var(--accent); }
.kye-modal .kye-modal-meta {
  font-size: var(--type-11);
  color: var(--text-dim);
  margin-top: 12px;
}
.kye-modal .kye-modal-meta a { color: var(--accent); }
@media (max-width: 480px) {
  .kye-modal { padding: 22px; border-radius: 12px; }
  .kye-modal h3 { font-size: var(--type-16); }
}

/* Accept-terms checkbox row inside the contact modal */
.kye-modal-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 4px !important;
  font-size: var(--type-12);
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 400 !important;
  cursor: pointer;
}
.kye-modal-accept input[type="checkbox"] {
  width: auto !important;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.kye-modal-accept a { color: var(--accent); text-decoration: underline; }
.kye-modal [data-submit]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inline TOC for legal/legal-faq pages */
.wp-toc-inline {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px 14px 36px;
  margin: 18px 0 28px;
  font-size: var(--type-13);
}
.wp-toc-inline ol {
  margin: 0;
  padding: 0;
  list-style: decimal;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
}
.wp-toc-inline li { margin: 0; }
.wp-toc-inline a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.wp-toc-inline a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 600px) {
  .wp-toc-inline ol { grid-template-columns: 1fr; }
}

/* ============================================================
   §FINAL-25 — Break visual repetition between #authority-finality
   and #who. The original af-wrap (two big cards side by side
   with bullet lists) looked too much like the persona grid
   underneath. Replace it with a compact 3-column comparison
   table: one row per question, dim 'Then' column on the left,
   accented 'Now' column on the right.
   ============================================================ */
.af-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-size: var(--type-14);
}
.af-table thead th {
  text-align: left;
  font-size: var(--type-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 16px;
  background: var(--paper-2, var(--surface));
  border-bottom: 1px solid var(--line);
}
.af-table thead th.af-col-q    { width: 22%; }
.af-table thead th.af-col-then { width: 33%; color: var(--text-dim); }
.af-table thead th.af-col-now  { width: 45%; color: var(--accent); }
.af-table tbody th {
  text-align: left;
  font-weight: 600;
  font-size: var(--type-13);
  color: var(--text);
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.af-table tbody td {
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.af-table tbody td:first-of-type {
  color: var(--text-dim);
  font-size: var(--type-13);
}
.af-table tbody td:last-of-type {
  color: var(--text);
  background: var(--accent-soft);
  border-left: 1px solid var(--accent-line);
  font-weight: 500;
}
.af-table tbody tr:last-child th,
.af-table tbody tr:last-child td { border-bottom: none; }

/* Mobile: collapse the table into stacked rows so it stays readable. */
@media (max-width: 720px) {
  .af-table, .af-table thead, .af-table tbody, .af-table tr,
  .af-table th, .af-table td { display: block; width: 100% !important; }
  .af-table thead { display: none; }
  .af-table tbody tr {
    border-bottom: 1px solid var(--line);
    padding: 12px 14px;
  }
  .af-table tbody tr:last-child { border-bottom: none; }
  .af-table tbody th {
    padding: 0 0 6px;
    border: none;
    font-size: var(--type-14);
  }
  .af-table tbody td {
    padding: 8px 0 0 14px;
    border: none;
    position: relative;
    font-size: var(--type-13);
  }
  .af-table tbody td:first-of-type::before {
    content: "Then:";
    color: var(--text-dim);
    font-size: var(--type-11);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    display: block;
    margin: 6px 0 2px;
  }
  .af-table tbody td:last-of-type {
    background: transparent;
    border-left: 2px solid var(--accent);
    margin-top: 8px;
  }
  .af-table tbody td:last-of-type::before {
    content: "Now:";
    color: var(--accent);
    font-size: var(--type-11);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    display: block;
    margin: 0 0 2px;
  }
}

/* Hide the original af-wrap if any cached HTML still references it
   (defensive only — current index.html no longer has af-wrap). */
.af-wrap { display: none; }

/* ============================================================
   §FINAL-26 — Visual hierarchy + green/red semantic colour pass
   ============================================================
   Goals:
   • Break visual repetition between #authority-finality and #who.
     The af-table from §FINAL-25 was still 'grid of rows' — same
     gestalt as the persona grid. Replace with a numbered ordered
     list of comparison cards: red ✗ (Traditional IAM gaps) vs
     green ✓ (KYE coverage) per row. Eye reads it as 'check-list',
     not 'card grid'.
   • Colour-code sectors. The all-purple/green palette flattened
     12 distinct industries into one. Add per-sector accent colours
     (banking blue, payments orange, healthcare red, etc.) on the
     icon block and prof-pill borders.
   • Whitepaper prior-art table: green / red columns for
     'Solves' vs 'Doesn't solve' so the gap analysis reads at
     a glance.
   • Code-snippet semantic colouring across the whitepaper.
   ============================================================ */

/* === af-compare (replaces §FINAL-25 af-table) === */
.af-compare {
  list-style: none;
  margin: 28px 0 16px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.af-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}
.af-q {
  margin: 0;
  font-size: var(--type-16);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.af-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-12);
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.af-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.af-cell {
  position: relative;
  padding: 14px 14px 14px 44px;
  border-radius: 10px;
  font-size: var(--type-13);
  line-height: 1.55;
}
.af-cell .af-mark {
  position: absolute;
  left: 12px;
  top: 14px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.af-cell .af-mark .ms {
  font-size: var(--type-16) !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
}
.af-cell .af-tag {
  display: block;
  font-size: var(--type-11);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.af-cell p { margin: 0; color: var(--text); }
.af-cell.af-no {
  background: rgba(234, 67, 53, 0.06);
  border: 1px solid rgba(234, 67, 53, 0.22);
  color: var(--text-muted);
}
.af-cell.af-no .af-mark   { background: rgba(234, 67, 53, 0.16); color: #C5221F; }
.af-cell.af-no .af-tag    { color: #B31412; }
.af-cell.af-no p          { text-decoration: line-through; text-decoration-color: rgba(234, 67, 53, 0.45); text-decoration-thickness: 1px; color: var(--text-muted); }
.af-cell.af-yes {
  background: color-mix(in srgb, var(--color-accent-soft) 7%, transparent);
  border: 1px solid rgba(99, 102, 241, 0.26);
}
.af-cell.af-yes .af-mark  { background: rgba(99, 102, 241, 0.18); color: var(--accent); }
.af-cell.af-yes .af-tag   { color: var(--accent); }
.af-cell.af-yes p         { color: var(--text); font-weight: 500; }

@media (max-width: 720px) {
  .af-cells { grid-template-columns: 1fr; }
  .af-row { padding: 16px; }
}

/* === Sector colour coding ===
   Each sector card gets its own accent for the icon block + a
   thin accent border on the prof-pills. The card body stays neutral
   so 12 cards in the grid don't fight for attention; only the icon
   and the pill borders carry the colour. */
.sector-card[data-sector] .sector-icon {
  background: var(--sec-soft, var(--accent-soft)) !important;
  border-color: var(--sec-line, var(--accent-line)) !important;
  color: var(--sec, var(--accent)) !important;
}
.sector-card[data-sector] .prof-pill {
  border-color: transparent;
}
.sector-card[data-sector] .prof-pill:hover {
  border-color: var(--sec, var(--accent)) !important;
  color: var(--sec, var(--accent)) !important;
}
.sector-card[data-sector="banking"]      { --sec: #6366f1; --sec-soft: rgba(99, 102, 241, 0.10); --sec-line: rgba(99, 102, 241, 0.24); }
.sector-card[data-sector="payments"]     { --sec: #F4B400; --sec-soft: rgba(244, 180, 0, 0.12); --sec-line: rgba(244, 180, 0, 0.30); }
.sector-card[data-sector="healthcare"]   { --sec: #EA4335; --sec-soft: rgba(234, 67, 53, 0.10); --sec-line: rgba(234, 67, 53, 0.24); }
.sector-card[data-sector="treasury"]     { --sec: #3F51B5; --sec-soft: rgba(63, 81, 181, 0.10); --sec-line: rgba(63, 81, 181, 0.24); }
.sector-card[data-sector="custody"]      { --sec: #009688; --sec-soft: rgba(0, 150, 136, 0.10); --sec-line: rgba(0, 150, 136, 0.26); }
.sector-card[data-sector="insurance"]    { --sec: #8E24AA; --sec-soft: rgba(142, 36, 170, 0.10); --sec-line: rgba(142, 36, 170, 0.24); }
.sector-card[data-sector="ai-labs"]      { --sec: #00ACC1; --sec-soft: rgba(0, 172, 193, 0.10); --sec-line: rgba(0, 172, 193, 0.26); }
.sector-card[data-sector="public"]       { --sec: #5F6368; --sec-soft: rgba(95, 99, 104, 0.12); --sec-line: rgba(95, 99, 104, 0.26); }
.sector-card[data-sector="marketplaces"] { --sec: #D81B60; --sec-soft: rgba(216, 27, 96, 0.10); --sec-line: rgba(216, 27, 96, 0.24); }
.sector-card[data-sector="defence"]      { --sec: #455A64; --sec-soft: rgba(69, 90, 100, 0.12); --sec-line: rgba(69, 90, 100, 0.26); }
.sector-card[data-sector="energy"]       { --sec: #F57C00; --sec-soft: rgba(245, 124, 0, 0.10); --sec-line: rgba(245, 124, 0, 0.24); }
.sector-card[data-sector="manufacturing"]{ --sec: #6D4C41; --sec-soft: rgba(109, 76, 65, 0.12); --sec-line: rgba(109, 76, 65, 0.26); }

/* === Persona-chip colour coding (hero 'I'm building for' row) === */
.persona-chip[href="#sectors"]:nth-of-type(1) .ms { color: #6366f1; }
.persona-chip[href="#sectors"]:nth-of-type(2) .ms { color: #F4B400; }
.persona-chip[href="#sectors"]:nth-of-type(3) .ms { color: #00ACC1; }
.persona-chip[href="#sectors"]:nth-of-type(4) .ms { color: #EA4335; }
.persona-chip[href="#sectors"]:nth-of-type(5) .ms { color: #3F51B5; }
.persona-chip[href="#sectors"]:nth-of-type(6) .ms { color: #009688; }
.persona-chip[href="#sectors"]:nth-of-type(7) .ms { color: #5F6368; }

/* === Whitepaper prior-art green/red columns === */
.wp-prior-art {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--type-14);
}
.wp-prior-art thead th {
  background: var(--paper-2, var(--surface));
  padding: 12px 14px;
  text-align: left;
  font-size: var(--type-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}
.wp-prior-art thead th.wp-pa-yes { color: var(--accent); }
.wp-prior-art thead th.wp-pa-no  { color: #C5221F; }
.wp-prior-art tbody th {
  text-align: left;
  font-weight: 600;
  padding: 14px;
  vertical-align: top;
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  width: 26%;
}
.wp-prior-art tbody td {
  padding: 14px 14px 14px 44px;
  position: relative;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.wp-prior-art tbody td.wp-pa-yes {
  background: color-mix(in srgb, var(--color-accent-soft) 6%, transparent);
  color: var(--text);
}
.wp-prior-art tbody td.wp-pa-no {
  background: rgba(234, 67, 53, 0.05);
  color: var(--text-muted);
}
.wp-prior-art tbody tr:last-child th,
.wp-prior-art tbody tr:last-child td { border-bottom: none; }
.wp-pa-mark {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.wp-pa-mark .ms {
  font-size: var(--type-16) !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
}
.wp-pa-yes .wp-pa-mark { background: rgba(99, 102, 241, 0.18); color: var(--accent); }
.wp-pa-no  .wp-pa-mark { background: rgba(234, 67, 53, 0.18); color: #C5221F; }

@media (max-width: 720px) {
  .wp-prior-art, .wp-prior-art thead, .wp-prior-art tbody,
  .wp-prior-art tr, .wp-prior-art th, .wp-prior-art td {
    display: block; width: 100%;
  }
  .wp-prior-art thead { display: none; }
  .wp-prior-art tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .wp-prior-art tbody tr:last-child { border-bottom: none; }
  .wp-prior-art tbody th { padding: 0 0 6px; border: none; background: transparent; width: auto; }
  .wp-prior-art tbody td { border: none; padding: 8px 0 8px 30px; }
  .wp-prior-art tbody td.wp-pa-yes { background: transparent; }
  .wp-prior-art tbody td.wp-pa-no  { background: transparent; }
  .wp-pa-mark { left: 0; top: 8px; width: 20px; height: 20px; }
}

/* === Inline code-snippet semantic colouring (whitepaper) ===
   Tagged at runtime by initCodeSnippetColours() in main.js based
   on simple content patterns:
     [data-code="type"]     KYE*       (entity / record types)
     [data-code="field"]    snake_case (state / metadata fields)
     [data-code="endpoint"] HTTP verbs (POST /v1/...)
     [data-code="profile"]  kye.x.y    (profile names / schema_versions)
     [data-code="allow"]                allow / allow_with_constraints
     [data-code="deny"]                 deny / quarantine
     [data-code="condition"]            require_* / step-up / approval
*/
.wp-article code,
.wp-article p code,
.wp-article li code {
  background: var(--code-bg, rgba(95, 99, 104, 0.10));
  color: var(--code-fg, var(--text));
  border: 1px solid transparent;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: var(--type-12);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.wp-article code[data-code="type"]      { --code-bg: rgba(99, 102, 241, 0.10); --code-fg: #6D28D9; }
.wp-article code[data-code="field"]     { --code-bg: rgba(0, 172, 193, 0.10);  --code-fg: #007C91; }
.wp-article code[data-code="endpoint"]  { --code-bg: rgba(99, 102, 241, 0.10); --code-fg: #6366f1; }
.wp-article code[data-code="profile"]   { --code-bg: rgba(245, 124, 0, 0.10);  --code-fg: #C56000; }
.wp-article code[data-code="allow"]     { --code-bg: color-mix(in srgb, var(--color-accent-soft) 12%, transparent);  --code-fg: var(--accent); font-weight: 600; }
.wp-article code[data-code="deny"]      { --code-bg: rgba(234, 67, 53, 0.12);  --code-fg: #C5221F; font-weight: 600; }
.wp-article code[data-code="condition"] { --code-bg: rgba(244, 180, 0, 0.16);  --code-fg: #B47200; font-weight: 600; }

:root[data-theme="dark"] .wp-article code[data-code="type"]      { --code-bg: rgba(167, 139, 250, 0.18); --code-fg: #C4B5FD; }
:root[data-theme="dark"] .wp-article code[data-code="field"]     { --code-bg: rgba(0, 188, 212, 0.18);   --code-fg: #80DEEA; }
:root[data-theme="dark"] .wp-article code[data-code="endpoint"]  { --code-bg: rgba(66, 165, 245, 0.18);  --code-fg: #90CAF9; }
:root[data-theme="dark"] .wp-article code[data-code="profile"]   { --code-bg: rgba(255, 167, 38, 0.18);  --code-fg: #FFCC80; }
:root[data-theme="dark"] .wp-article code[data-code="allow"]     { --code-bg: rgba(129, 201, 149, 0.18); --code-fg: var(--color-brand-200); }
:root[data-theme="dark"] .wp-article code[data-code="deny"]      { --code-bg: rgba(244, 119, 110, 0.18); --code-fg: #FFAB91; }
:root[data-theme="dark"] .wp-article code[data-code="condition"] { --code-bg: rgba(255, 213, 79, 0.18);  --code-fg: #FFE082; }

/* ============================================================
   §FINAL-27 — Cohesive systematic fix
   ============================================================
   Closes four user-reported issues in one pass:
   1. Brand-mark icon was invisible on some pages — earlier rules
      (.brand-mark { background: ink !important }) competed at the
      same !important level. New highest-specificity rule pins
      the top-bar / header.nav / footer brand mark to a known
      good appearance: 24×24 transparent box, accent-coloured
      stylized monogram via stroke=currentColor.
   2. 6 of 18 sector cards had no data-sector attribute, so they
      fell back to the all-purple default. Added oil-gas, mining,
      automotive, maritime, logistics, aviation hues.
   3. #who section was a 6-card grid — visually identical gestalt
      to #sectors. Restructured as a vertical 'persona timeline':
      large avatar circle on the left, content panel cascading
      right, dividing line between rows. Different from any other
      section on the page.
   4. Persona-grid styles cleaned up so the legacy .persona-card
      shape doesn't bleed into the new .who-timeline. */

/* === BRAND-MARK BULLETPROOF (highest specificity, single rule) === */
header.top-bar a.brand .brand-mark,
header.nav     a.brand .brand-mark,
footer.footer  .brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  flex-shrink: 0 !important;
}
header.top-bar a.brand .brand-mark svg,
header.nav     a.brand .brand-mark svg,
footer.footer  .brand-mark svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: inherit !important;
  fill: none !important;
  overflow: visible !important;
}
header.top-bar a.brand .brand-mark svg path,
header.nav     a.brand .brand-mark svg path,
footer.footer  .brand-mark svg path {
  stroke: currentColor !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
  fill: none !important;
}
:root[data-theme="dark"] header.top-bar a.brand .brand-mark,
:root[data-theme="dark"] header.nav     a.brand .brand-mark,
:root[data-theme="dark"] footer.footer  .brand-mark { color: var(--accent) !important; }

/* === Sector colour pack (18 industries) === */
.sector-card[data-sector] .sector-icon {
  background: var(--sec-soft, var(--accent-soft)) !important;
  border-color: var(--sec-line, var(--accent-line)) !important;
  color: var(--sec, var(--accent)) !important;
}
.sector-card[data-sector] .prof-pill {
  border-color: transparent;
  color: var(--sec, var(--accent));
  background: var(--sec-soft, var(--accent-soft));
}
.sector-card[data-sector] .prof-pill:hover {
  border-color: var(--sec, var(--accent)) !important;
}
.sector-card[data-sector="banking"]      { --sec: #6366f1; --sec-soft: rgba(99, 102, 241, 0.10); --sec-line: rgba(99, 102, 241, 0.24); }
.sector-card[data-sector="payments"]     { --sec: #B47200; --sec-soft: rgba(244, 180, 0, 0.14); --sec-line: rgba(244, 180, 0, 0.32); }
.sector-card[data-sector="healthcare"]   { --sec: #EA4335; --sec-soft: rgba(234, 67, 53, 0.10); --sec-line: rgba(234, 67, 53, 0.24); }
.sector-card[data-sector="treasury"]     { --sec: #3F51B5; --sec-soft: rgba(63, 81, 181, 0.10); --sec-line: rgba(63, 81, 181, 0.24); }
.sector-card[data-sector="custody"]      { --sec: #009688; --sec-soft: rgba(0, 150, 136, 0.10); --sec-line: rgba(0, 150, 136, 0.26); }
.sector-card[data-sector="insurance"]    { --sec: #8E24AA; --sec-soft: rgba(142, 36, 170, 0.10); --sec-line: rgba(142, 36, 170, 0.24); }
.sector-card[data-sector="ai-labs"]      { --sec: #00838F; --sec-soft: rgba(0, 172, 193, 0.12); --sec-line: rgba(0, 172, 193, 0.30); }
.sector-card[data-sector="public"]       { --sec: #5F6368; --sec-soft: rgba(95, 99, 104, 0.12); --sec-line: rgba(95, 99, 104, 0.26); }
.sector-card[data-sector="marketplaces"] { --sec: #D81B60; --sec-soft: rgba(216, 27, 96, 0.10); --sec-line: rgba(216, 27, 96, 0.24); }
.sector-card[data-sector="defence"]      { --sec: #455A64; --sec-soft: rgba(69, 90, 100, 0.12); --sec-line: rgba(69, 90, 100, 0.26); }
.sector-card[data-sector="energy"]       { --sec: #F57C00; --sec-soft: rgba(245, 124, 0, 0.10); --sec-line: rgba(245, 124, 0, 0.24); }
.sector-card[data-sector="manufacturing"]{ --sec: #6D4C41; --sec-soft: rgba(109, 76, 65, 0.12); --sec-line: rgba(109, 76, 65, 0.26); }
.sector-card[data-sector="oil-gas"]      { --sec: #4E342E; --sec-soft: rgba(78, 52, 46, 0.12); --sec-line: rgba(78, 52, 46, 0.26); }
.sector-card[data-sector="mining"]       { --sec: #7B5E1A; --sec-soft: rgba(123, 94, 26, 0.12); --sec-line: rgba(123, 94, 26, 0.26); }
.sector-card[data-sector="automotive"]   { --sec: #C2185B; --sec-soft: rgba(194, 24, 91, 0.10); --sec-line: rgba(194, 24, 91, 0.24); }
.sector-card[data-sector="maritime"]     { --sec: #006064; --sec-soft: rgba(0, 96, 100, 0.12); --sec-line: rgba(0, 96, 100, 0.28); }
.sector-card[data-sector="logistics"]    { --sec: #5D4037; --sec-soft: rgba(93, 64, 55, 0.12); --sec-line: rgba(93, 64, 55, 0.26); }
.sector-card[data-sector="aviation"]     { --sec: #1565C0; --sec-soft: rgba(21, 101, 192, 0.10); --sec-line: rgba(21, 101, 192, 0.26); }

/* === #who: vertical persona timeline (replaces persona-grid) === */
.who-timeline {
  list-style: none;
  margin: 28px 0 16px;
  padding: 0;
  position: relative;
  display: grid;
  gap: 0;
}
.who-timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(99, 102, 241, 0.30) 0%,
    rgba(0, 172, 193, 0.30)  20%,
    rgba(234, 67, 53, 0.30)  40%,
    rgba(0, 150, 136, 0.30)  60%,
    rgba(142, 36, 170, 0.30) 80%,
    rgba(95, 99, 104, 0.30)  100%);
  border-radius: 2px;
}
.who-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0 22px 0;
  border-bottom: 1px dashed var(--line);
  align-items: start;
}
.who-row:last-child { border-bottom: none; }
.who-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--who-soft, var(--accent-soft));
  border: 2px solid var(--who, var(--accent));
  color: var(--who, var(--accent));
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.who-avatar svg { width: 26px; height: 26px; display: block; }
.who-content { padding-top: 6px; }
.who-content h3 {
  margin: 0 0 6px;
  font-size: var(--type-18);
  font-weight: 700;
  color: var(--text);
}
.who-content .pain {
  font-size: var(--type-13);
  color: var(--text-dim);
  font-style: italic;
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--who, var(--accent));
}
.who-content > p:not(.pain) {
  margin: 0 0 10px;
  font-size: var(--type-14);
  line-height: 1.6;
  color: var(--text);
}
.who-content .persona-roi {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: var(--type-12);
  color: var(--text-muted);
}
.who-content .persona-roi li {
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
.who-content .persona-roi li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--who, var(--accent));
  font-weight: 700;
}
.who-row[data-who="banks"]      { --who: #6366f1; --who-soft: rgba(99, 102, 241, 0.10); }
.who-row[data-who="ai-labs"]    { --who: #00838F; --who-soft: rgba(0, 172, 193, 0.12); }
.who-row[data-who="healthcare"] { --who: #EA4335; --who-soft: rgba(234, 67, 53, 0.10); }
.who-row[data-who="custody"]    { --who: #009688; --who-soft: rgba(0, 150, 136, 0.12); }
.who-row[data-who="regulators"] { --who: #8E24AA; --who-soft: rgba(142, 36, 170, 0.10); }
.who-row[data-who="platform"]   { --who: #5F6368; --who-soft: rgba(95, 99, 104, 0.12); }

/* The legacy persona-grid styling is no longer used on index.html;
   defensively neutralise the leftover persona-card left-rail
   pseudo-element from §FINAL-24 in case any other surface still
   renders it. */
.persona-card { padding-left: 0; }
.persona-card::before { content: none; }

@media (max-width: 720px) {
  .who-timeline::before { left: 22px; }
  .who-row { grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 0; }
  .who-avatar { width: 46px; height: 46px; }
  .who-avatar svg { width: 22px; height: 22px; }
  .who-content h3 { font-size: var(--type-16); }
}

/* ============================================================
   §FINAL-28 — kill the duplicate-section-style problem for good
   ============================================================
   The user kept reporting that #authority-finality and #who looked
   like the same kind of vertical-list-of-bordered-rows section,
   even after §FINAL-25 / 26 / 27. This pass replaces the inner
   markup of both sections with structurally different shapes:

     #authority-finality → side-by-side BEFORE → AFTER hero diagram:
        a dim left block (Traditional IAM, monochrome, line-list of
        gaps), a transition arrow with 'becomes' label, an accent
        right block (Authority Finality™) with a 6-tile dimension
        grid (Identity / Delegation / Capability / Authority /
        State / Audit). One graphic, not a list of comparable rows.

     #who → editorial magazine layout:
        each persona is a long-form story block with a 'Story 0X'
        eyebrow, large display headline, large pull-quote in a
        serif-style italic with quote marks, narrative body, and
        a single inline metadata line of dot-separated facts.
        No bullets, no avatar gutter, no card containers.

   The two are no longer 'card grid versus card grid'. They read as
   'comparison diagram' versus 'magazine spread'.
   ============================================================ */

/* === #authority-finality — side-by-side hero diagram === */
.af-diagram {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
  margin: 28px 0 16px;
  border-radius: 18px;
  overflow: hidden;
}
.af-block {
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.af-block-then {
  background: linear-gradient(180deg, rgba(95,99,104,0.06) 0%, rgba(95,99,104,0.10) 100%);
  border: 1px solid rgba(95,99,104,0.20);
  border-right: none;
  border-radius: 18px 0 0 18px;
}
.af-block-now {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-soft) 8%, transparent) 0%, color-mix(in srgb, var(--color-accent-soft) 16%, transparent) 100%);
  border: 1px solid rgba(99,102,241,0.30);
  border-left: none;
  border-radius: 0 18px 18px 0;
}
.af-block-eyebrow {
  font-size: var(--type-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.af-block-then .af-block-eyebrow { color: #5F6368; }
.af-block-now  .af-block-eyebrow { color: var(--accent); }
.af-block-h {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.af-block-then .af-block-h { color: var(--text-muted); }
.af-block-now  .af-block-h { color: var(--text); }
.af-block-sub {
  margin: 0;
  font-size: var(--type-14);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 36ch;
}
.af-block-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.af-block-points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  font-size: var(--type-13);
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(95,99,104,0.40);
  text-decoration-thickness: 1px;
}
.af-block-points li .ms {
  color: #9AA0A6 !important;
  font-size: var(--type-18) !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}
.af-arrow {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
}
.af-arrow svg { width: 100%; height: auto; max-width: 110px; display: block; }
.af-arrow .af-arrow-v { display: none; }
.af-arrow .af-arrow-h { display: block; }
.af-arrow-label {
  font-size: var(--type-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
/* Interactive state: AFTER dim cards become clickable; BEFORE pains
 * dim by default and light up when their matching dim is selected.
 * Cross-highlight: each AFTER dim has data-af-dim="<slug>" matching
 * a BEFORE pain's data-af-pain="<slug>". */
.af-diagram[data-af-interactive] .af-dim {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.af-diagram[data-af-interactive] .af-dim:hover,
.af-diagram[data-af-interactive] .af-dim:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(99,102,241,0.18);
  outline: none;
}
.af-diagram[data-af-interactive] .af-dim.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--color-accent-soft) 10%, transparent);
  box-shadow: 0 6px 18px rgba(99,102,241,0.22);
}
.af-diagram[data-af-interactive] .af-block-points li {
  transition: opacity 160ms ease, color 160ms ease, transform 160ms ease;
}
.af-diagram[data-af-interactive].has-selection .af-block-points li {
  opacity: 0.45;
}
.af-diagram[data-af-interactive] .af-block-points li.is-paired {
  opacity: 1;
  color: var(--accent);
  transform: translateX(2px);
}
.af-diagram[data-af-interactive] .af-block-points li.is-paired .ms {
  color: var(--accent) !important;
}
.af-diagram[data-af-interactive].has-selection .af-arrow .af-arrow-line {
  filter: drop-shadow(0 0 4px rgba(99,102,241,0.55));
}
.af-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--type-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.af-dim-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.af-dim {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(99,102,241,0.20);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: start;
}
.af-dim .ms {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--accent) !important;
  font-size: var(--type-18) !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}
.af-dim-h {
  font-size: var(--type-13);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.af-dim-b {
  font-size: var(--type-12);
  line-height: 1.45;
  color: var(--text-muted);
}

:root[data-theme="dark"] .af-block-then {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.07) 100%);
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .af-block-now {
  background: linear-gradient(180deg, rgba(129,201,149,0.10) 0%, rgba(129,201,149,0.18) 100%);
  border-color: rgba(129,201,149,0.32);
}
:root[data-theme="dark"] .af-dim {
  background: rgba(255,255,255,0.04);
  border-color: rgba(129,201,149,0.22);
}

@media (max-width: 800px) {
  .af-diagram { grid-template-columns: 1fr; }
  .af-block-then { border-right: 1px solid rgba(95,99,104,0.20); border-bottom: none; border-radius: 18px 18px 0 0; }
  .af-block-now  { border-left:  1px solid rgba(99,102,241,0.30);  border-top:    none; border-radius: 0 0 18px 18px; }
  /* Stacked layout: swap to a real vertical arrow so the SVG renders
     correctly and the "becomes" label stays upright (no rotate hack). */
  .af-arrow { padding: 12px 0; transform: none; }
  .af-arrow .af-arrow-h { display: none; }
  .af-arrow .af-arrow-v { display: block; max-width: 56px; margin: 0 auto; }
  .af-dim-grid { grid-template-columns: 1fr; }
}

/* === #who — editorial magazine spread === */
.who-stories {
  margin: 28px auto 16px;
  max-width: 720px;
  padding: 0;
  display: grid;
  gap: 0;
}
.who-story {
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.who-story:first-child { padding-top: 8px; }
.who-story:last-child  { border-bottom: none; padding-bottom: 12px; }
.who-story-num {
  margin: 0 0 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--who, var(--accent));
  font-weight: 700;
}
.who-story-h {
  margin: 0 0 18px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--text);
}
.who-story-quote {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--who, var(--accent));
  font-family: var(--font-ui);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.4;
  color: var(--text);
  quotes: "\201C" "\201D";
}
.who-story-body {
  margin: 0 0 16px;
  font-size: var(--type-16);
  line-height: 1.7;
  color: var(--text);
  max-width: 60ch;
}
.who-story-body code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-13);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
}
.who-story-meta {
  margin: 0;
  padding: 12px 16px;
  background: var(--who-soft, var(--accent-soft));
  border-radius: 8px;
  font-size: var(--type-12);
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.who-story[data-who="banks"]      { --who: #6366f1; --who-soft: rgba(99, 102, 241, 0.08); }
.who-story[data-who="ai-labs"]    { --who: #00838F; --who-soft: rgba(0, 172, 193, 0.08); }
.who-story[data-who="healthcare"] { --who: #EA4335; --who-soft: rgba(234, 67, 53, 0.08); }
.who-story[data-who="custody"]    { --who: #009688; --who-soft: rgba(0, 150, 136, 0.08); }
.who-story[data-who="regulators"] { --who: #8E24AA; --who-soft: rgba(142, 36, 170, 0.08); }
.who-story[data-who="platform"]   { --who: #5F6368; --who-soft: rgba(95, 99, 104, 0.10); }

/* Defensively neutralise the §FINAL-27 timeline rules in case any
   stale HTML still references them. */
.who-timeline { display: contents; }
.who-row { display: contents; }
.who-avatar { display: none; }

@media (max-width: 600px) {
  .who-story { padding: 28px 0; }
  .who-story-quote { padding-left: 14px; }
}

/* ============================================================
   §FINAL-29 — whitepaper chrome (icons, pager, indicator) +
                top-bar nav icon colour coding
   ============================================================
   User: 'all snippets still grey all icons same colour on
   whitepaper'. The snippet greyness was a cache problem (main.js
   wasn't cache-busted on whitepaper.html). The 'all icons same
   colour' was the top-bar nav and the unstyled section headings —
   nav icons all in green, h2 headings with no icons at all.
   Plus: 'pagination on whitepaper must be fixed'.
   ============================================================ */

/* === Top-bar nav icons: per-tab colour === */
.tb-link[data-tb="home"]       .ms { color: var(--color-brand-500) !important; }
.tb-link[data-tb="builders"]   .ms { color: #6366f1 !important; }
.tb-link[data-tb="buyers"]     .ms { color: #B47200 !important; }
.tb-link[data-tb="auditors"]   .ms { color: #009688 !important; }
.tb-link[data-tb="regulators"] .ms { color: #8E24AA !important; }
.tb-link[data-tb="sectors"]    .ms { color: #5F6368 !important; }
.tb-link[data-tb="demos"]      .ms { color: #EA4335 !important; }
.tb-link[data-tb="whitepaper"] .ms { color: #00838F !important; }

/* === Whitepaper section heading icons === */
.wp-article h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  scroll-margin-top: 96px;
  padding-left: 0;
  border-left: 4px solid var(--wp-h2-c, var(--accent));
  padding-left: 16px;
  border-radius: 0 6px 6px 0;
}
.wp-article h2 .wp-h2-icon {
  font-size: var(--type-28) !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  flex-shrink: 0;
}

/* === Whitepaper pager (prev / next sections, table-of-contents grid) === */
.wp-pager {
  margin: 56px 0 32px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.wp-pager::before {
  content: "Jump to section";
  display: block;
  margin-bottom: 14px;
  font-size: var(--type-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.wp-pager-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.wp-pager-list li { margin: 0; }
.wp-pager-list a {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: transparent;
  transition: background .12s, border-color .12s, transform .12s;
}
.wp-pager-list a:hover {
  background: var(--surface);
  border-color: var(--wp-h2-c, var(--accent));
  transform: translateX(2px);
}
.wp-pager-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wp-h2-c, var(--accent));
  background: rgba(0,0,0,0.03);
  padding: 4px 0;
  border-radius: 6px;
  text-align: center;
}
.wp-pager-t {
  font-size: var(--type-13);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Floating section progress indicator (whitepaper-only, fixed bottom-left) === */
.wp-section-indicator {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--type-12);
  color: var(--text-muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  max-width: calc(100vw - 36px);
}
.wp-section-indicator.is-visible { opacity: 1; }
.wp-section-indicator::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.wp-section-indicator-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--accent);
  font-size: var(--type-11);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.wp-section-indicator-t {
  color: var(--text);
  font-weight: 500;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .wp-section-indicator { left: 12px; bottom: 12px; padding: 6px 12px; font-size: var(--type-11); }
  .wp-section-indicator-t { max-width: 16ch; }
}

:root[data-theme="dark"] .wp-article h2 .wp-h2-icon { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .wp-pager-num { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .wp-section-indicator { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }

/* ============================================================
   §FINAL-30 — DARK-MODE READABILITY (emergency)
   ============================================================
   The §FINAL-28 / §FINAL-29 sections used semi-transparent tinted
   backgrounds with text colors set to var(--text-muted). In dark
   mode that resolved to medium grey-blue (#aab2cc) on a dim
   surface, which the user reported as 'no text readable'. This
   block forces high-contrast text colors and stronger surface
   backgrounds for every component introduced in §FINAL-26..29
   when dark mode is active. Light mode untouched.
   ============================================================ */

/* af-diagram blocks */
:root[data-theme="dark"] .af-block-then {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
:root[data-theme="dark"] .af-block-then .af-block-eyebrow { color: #B8C0D6 !important; }
:root[data-theme="dark"] .af-block-then .af-block-h       { color: #D4DAEA !important; }
:root[data-theme="dark"] .af-block-then .af-block-sub     { color: #AAB2CC !important; }
:root[data-theme="dark"] .af-block-then .af-block-points li {
  color: var(--color-neutral-300) !important;
  text-decoration-color: rgba(200,210,230,0.55) !important;
}
:root[data-theme="dark"] .af-block-then .af-block-points li .ms { color: var(--color-neutral-300) !important; }

:root[data-theme="dark"] .af-block-now {
  background: rgba(129,201,149,0.16) !important;
  border-color: rgba(129,201,149,0.40) !important;
}
:root[data-theme="dark"] .af-block-now .af-block-eyebrow { color: var(--color-brand-300) !important; }
:root[data-theme="dark"] .af-block-now .af-block-h       { color: var(--color-paper) !important; }
:root[data-theme="dark"] .af-block-now .af-block-sub     { color: var(--color-neutral-200) !important; }

:root[data-theme="dark"] .af-dim {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(129,201,149,0.30) !important;
}
:root[data-theme="dark"] .af-dim .af-dim-h { color: var(--color-paper) !important; }
:root[data-theme="dark"] .af-dim .af-dim-b { color: var(--color-neutral-300) !important; }
:root[data-theme="dark"] .af-dim .ms       { color: var(--color-brand-300) !important; }
:root[data-theme="dark"] .af-arrow-label   { color: var(--color-brand-300) !important; }

/* who-stories editorial */
:root[data-theme="dark"] .who-story          { border-bottom-color: rgba(255,255,255,0.10) !important; }
:root[data-theme="dark"] .who-story-h        { color: var(--color-paper) !important; }
:root[data-theme="dark"] .who-story-quote    { color: var(--color-neutral-100) !important; }
:root[data-theme="dark"] .who-story-body     { color: var(--color-neutral-200) !important; }
:root[data-theme="dark"] .who-story-body code {
  background: rgba(129,201,149,0.18) !important;
  color: var(--color-brand-200) !important;
}
:root[data-theme="dark"] .who-story-meta {
  background: rgba(255,255,255,0.05) !important;
  color: var(--color-neutral-300) !important;
}

/* whitepaper chrome */
:root[data-theme="dark"] .wp-pager {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
:root[data-theme="dark"] .wp-pager::before { color: #B8C0D6 !important; }
:root[data-theme="dark"] .wp-pager-list a {
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--color-neutral-100) !important;
}
:root[data-theme="dark"] .wp-pager-list a:hover { background: rgba(255,255,255,0.06) !important; }
:root[data-theme="dark"] .wp-pager-t   { color: var(--color-neutral-100) !important; }
:root[data-theme="dark"] .wp-pager-num { background: rgba(255,255,255,0.08) !important; }

:root[data-theme="dark"] .wp-section-indicator {
  background: color-mix(in srgb, var(--color-neutral-800) 95%, transparent) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--color-neutral-300) !important;
}
:root[data-theme="dark"] .wp-section-indicator-t { color: var(--color-paper) !important; }

:root[data-theme="dark"] .wp-article h2 .wp-h2-icon {
  background: rgba(255,255,255,0.08) !important;
}

/* sector cards in dark mode */
:root[data-theme="dark"] .sector-card[data-sector] .sector-icon {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
:root[data-theme="dark"] .sector-card[data-sector] .prof-pill {
  background: rgba(255,255,255,0.06) !important;
}

/* legacy persona-card defensive */
:root[data-theme="dark"] .persona-card .pain { color: var(--color-neutral-300) !important; }

/* contact modal in dark mode */
:root[data-theme="dark"] .kye-modal {
  background: var(--color-neutral-800) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
:root[data-theme="dark"] .kye-modal h3,
:root[data-theme="dark"] .kye-modal label,
:root[data-theme="dark"] .kye-modal-meta { color: var(--color-neutral-100) !important; }
:root[data-theme="dark"] .kye-modal input,
:root[data-theme="dark"] .kye-modal textarea,
:root[data-theme="dark"] .kye-modal select {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: var(--color-neutral-100) !important;
}

/* §FINAL-31 — code-snippet semantic colouring across every page
   (landing, audience pages, etc) — not only .wp-article. */
code[data-code] {
  background: var(--code-bg, rgba(95, 99, 104, 0.10));
  color: var(--code-fg, var(--text));
  border: 1px solid transparent;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: var(--type-12);
  font-family: var(--font-mono, ui-monospace, monospace);
}
code[data-code="type"]      { --code-bg: rgba(99, 102, 241, 0.10); --code-fg: #6D28D9; }
code[data-code="field"]     { --code-bg: rgba(0, 172, 193, 0.10);  --code-fg: #007C91; }
code[data-code="endpoint"]  { --code-bg: rgba(99, 102, 241, 0.10); --code-fg: #6366f1; }
code[data-code="profile"]   { --code-bg: rgba(245, 124, 0, 0.10);  --code-fg: #C56000; }
code[data-code="allow"]     { --code-bg: color-mix(in srgb, var(--color-accent-soft) 12%, transparent);  --code-fg: var(--accent); font-weight: 600; }
code[data-code="deny"]      { --code-bg: rgba(234, 67, 53, 0.12);  --code-fg: #C5221F; font-weight: 600; }
code[data-code="condition"] { --code-bg: rgba(244, 180, 0, 0.16);  --code-fg: #B47200; font-weight: 600; }
:root[data-theme="dark"] code[data-code="type"]      { --code-bg: rgba(167, 139, 250, 0.18); --code-fg: #C4B5FD; }
:root[data-theme="dark"] code[data-code="field"]     { --code-bg: rgba(0, 188, 212, 0.18);   --code-fg: #80DEEA; }
:root[data-theme="dark"] code[data-code="endpoint"]  { --code-bg: rgba(66, 165, 245, 0.18);  --code-fg: #90CAF9; }
:root[data-theme="dark"] code[data-code="profile"]   { --code-bg: rgba(255, 167, 38, 0.18);  --code-fg: #FFCC80; }
:root[data-theme="dark"] code[data-code="allow"]     { --code-bg: rgba(129, 201, 149, 0.18); --code-fg: var(--color-brand-200); }
:root[data-theme="dark"] code[data-code="deny"]      { --code-bg: rgba(244, 119, 110, 0.18); --code-fg: #FFAB91; }
:root[data-theme="dark"] code[data-code="condition"] { --code-bg: rgba(255, 213, 79, 0.18);  --code-fg: #FFE082; }

/* ============================================================
   §FINAL-32 — extended code-snippet semantic categories
   ============================================================
   User: 'paths still grey, all stuff with grey background must be
   colour coded'. Added URN, package, header, path and misc
   categories so every <code> on every page renders with a hue,
   never default grey. Light + dark palettes.
   ============================================================ */
code[data-code="urn"]      { --code-bg: rgba(216, 27, 96, 0.10);  --code-fg: #C2185B; }
code[data-code="package"]  { --code-bg: rgba(255, 87, 34, 0.10);  --code-fg: #BF360C; }
code[data-code="header"]   { --code-bg: rgba(56, 142, 60, 0.10);  --code-fg: #2E7D32; font-weight: 600; }
code[data-code="path"]     { --code-bg: rgba(96, 125, 139, 0.10); --code-fg: #455A64; }
code[data-code="misc"]     { --code-bg: rgba(63, 81, 181, 0.10);  --code-fg: #303F9F; }

:root[data-theme="dark"] code[data-code="urn"]     { --code-bg: rgba(244, 143, 177, 0.18); --code-fg: #F8BBD0; }
:root[data-theme="dark"] code[data-code="package"] { --code-bg: rgba(255, 138, 101, 0.18); --code-fg: #FFAB91; }
:root[data-theme="dark"] code[data-code="header"]  { --code-bg: rgba(129, 199, 132, 0.18); --code-fg: #A5D6A7; }
:root[data-theme="dark"] code[data-code="path"]    { --code-bg: rgba(176, 190, 197, 0.16); --code-fg: var(--color-neutral-300); }
:root[data-theme="dark"] code[data-code="misc"]    { --code-bg: rgba(159, 168, 218, 0.18); --code-fg: #C5CAE9; }

/* ============================================================
   §FINAL-33 — REVERTED. The full-bleed dark band for
   #authority-finality broke design cohesion (one inverted section
   amid a light page). Reverted to the standard .section.collapsible
   wrapper. The structural difference between #authority-finality
   (af-diagram BEFORE→AFTER hero) and #who (editorial magazine
   spread) from §FINAL-28 is sufficient on its own — no colour-
   temperature inversion needed.
   ============================================================ */

/* ============================================================
   §FINAL-39 — UNIFIED section header style
   ============================================================
   Removes §FINAL-34 / §FINAL-37 / §FINAL-38 chrome variants
   (left-rail / top-rule / dot / panel / pill / article-style).
   Replaces them with ONE consistent treatment used by every
   non-collapsible section across the site.

   Above-#who sections get a green dot prefix on the eyebrow.
   #who and below-#who sections get a red dot prefix.

   Sections are no longer wrapped in <details>/<summary> (only
   #faq is). The eyebrow + h2 + body simply render in document
   order, like a real article. No more universal collapse.
   ============================================================ */

.section .eyebrow,
.section > .container > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--type-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.section .eyebrow::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  /* default green for sections above #who; below-rule overrides to red */
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.section .h-section {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.section .h-section .accent  { color: var(--accent); }
.section .h-section em       { font-style: italic; color: var(--text-muted); font-weight: 600; }

/* Below-#who sections → red dot */
#who .eyebrow::before,
#who ~ .section .eyebrow::before {
  background: #EA4335 !important;
  box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.18) !important;
}

/* Restore the FAQ collapsible wrapper styling (still uses
   .section.collapsible / details/summary). */
.section.collapsible > details > summary {
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.section.collapsible > details > summary::-webkit-details-marker { display: none; }
.section.collapsible .section-caret {
  display: inline-block;
  margin-left: 12px;
  transition: transform .15s ease;
  color: var(--text-muted);
}
.section.collapsible > details[open] > summary .section-caret {
  transform: rotate(180deg);
}

/* Whitepaper / mobile pagination tightening — overflow-safe layout */
@media (max-width: 700px) {
  .wp-pager-list { grid-template-columns: 1fr !important; }
  .wp-section-indicator { font-size: var(--type-11) !important; padding: 6px 10px !important; max-width: calc(100vw - 24px); }
  .wp-section-indicator-t { max-width: 14ch !important; }
}

/* Universal mobile typography clamp — keep h-section consistent */
@media (max-width: 600px) {
  .section .h-section { font-size: var(--type-22) !important; }
  .section .eyebrow { font-size: var(--type-11) !important; letter-spacing: 0.14em !important; }
}

/* ============================================================
   §FINAL-40 — punch-list: dots, timeline, table, 87+, FAQ density,
   code-snippet visibility against legacy !important, modal CTA
   ============================================================ */

/* (1) Remove the eyebrow ::before dots from §FINAL-39 — they
    overlap with text and aren't necessary. Keep the eyebrow
    plain uppercase. */
.section .eyebrow::before {
  content: none !important;
}
.section .eyebrow {
  gap: 0 !important;
}

/* (2) KYC / KYB / KYA / KYE evolution timeline */
.kye-timeline {
  list-style: none;
  padding: 0;
  margin: 18px 0 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
}
.kye-timeline::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  top: 18px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(95,99,104,0.35) 0%,
    rgba(95,99,104,0.35) 33%,
    rgba(244,180,0,0.55) 50%,
    rgba(99,102,241,0.85) 75%,
    var(--kye-color-brand) 100%);
  z-index: 0;
}
.kt-step {
  position: relative;
  z-index: 1;
  background: var(--kye-color-surface);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--kye-type-small);
}
.kt-step::before {
  content: "";
  position: absolute;
  top: -7px; left: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 3px solid var(--kye-color-surface);
  background: var(--kt-color, var(--kye-color-text-muted));
}
.kt-step-legacy   { --kt-color: #5F6368; }
.kt-step-emerging { --kt-color: #F4B400; }
.kt-step-kye      { --kt-color: var(--kye-color-brand); border-color: var(--kye-color-brand-line); }
.kt-year {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--kt-color);
  text-transform: uppercase;
}
.kt-name {
  font-size: var(--type-18);
  font-weight: 700;
  color: var(--kye-color-text);
  letter-spacing: -0.005em;
}
.kt-sub {
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
  font-style: italic;
}
.kt-note {
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
  margin-top: 2px;
  line-height: 1.45;
}
@media (max-width: 800px) {
  .kye-timeline { grid-template-columns: 1fr 1fr; }
  .kye-timeline::before { display: none; }
}
@media (max-width: 480px) {
  .kye-timeline { grid-template-columns: 1fr; }
}

/* (3) Capability/concept ps-table first column — consistent strong */
.ps-table thead th,
.ps-table tbody td {
  font-size: var(--kye-type-small);
  vertical-align: top;
  line-height: 1.45;
  padding: 12px 14px;
}
.ps-table tbody td:first-child,
.ps-table tbody td:first-child strong {
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: var(--kye-type-small) !important;
  color: var(--kye-color-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}
.ps-table tbody td:first-child strong { display: inline; }

/* (6) Authority-first KYE* code visibility — defeat residual cascade.
   The §FINAL-35 used !important on code[data-code]; reinforce here
   with a higher-specificity rule scoped to <p class="arch-b">
   where the legacy `code, pre code, .arch-b code, ...` rule lives. */
.arch-b code[data-code],
.what-card code[data-code],
.cf-list code[data-code],
.af-list code[data-code],
p code[data-code], li code[data-code] {
  background: var(--code-bg, rgba(95, 99, 104, 0.10)) !important;
  color: var(--code-fg, var(--kye-color-text)) !important;
  border-color: transparent !important;
}

/* (7) Highlight 87+ endpoint numbers */
.kye-num {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: inherit;
  font-weight: 700;
  background: var(--kye-color-info, #6366f1);
  color: var(--color-paper);
  letter-spacing: 0.02em;
}

/* (9) FAQ titles condensed */
.faq-item {
  margin: 0 !important;
  border-bottom: 1px solid var(--kye-color-line);
}
.faq-item > summary {
  /* Block (not flex) so inline children — including the .tm ™ span —
   * stay on the same baseline as surrounding text. The earlier rule
   * at line 1164 set display:flex which split contiguous inline runs
   * across lines whenever the text wrapped, so on narrower viewports
   * "KYE" with its ™ span dropped to its own visual line. The +/−
   * marker is absolutely positioned (below) so it doesn't need to be
   * a flex sibling. */
  display: block !important;
  padding: 14px 32px 14px 22px !important;
  font-size: var(--kye-type-small);
  font-weight: 600;
  color: var(--kye-color-text);
  cursor: pointer;
  position: relative;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .faq-item > summary { padding: 14px 28px 14px 16px !important; }
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: var(--type-18);
  color: var(--kye-color-text-muted);
  transition: transform var(--kye-motion-fast);
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item > p,
.faq-item > div {
  padding: 0 0 14px;
  font-size: var(--kye-type-small);
  line-height: 1.55;
  color: var(--kye-color-text-muted);
  margin: 0;
}

/* Also tighten faq-grid wrapper spacing */
.faq-grid { gap: 0 !important; }

/* (universal consistency) Hero pill / version pill / deployed pill —
   all share the same height/scale via tokens */
.hero-pill, .version-pill, .deployed-pill {
  font-size: var(--kye-type-tiny) !important;
  padding: 4px 10px !important;
}

/* ============================================================
   §FINAL-41 — punch-list 2: ps-card mobile fonts, KYA contrast,
   capability-table fonts, horizontal-frameworks badges, eyebrow
   accidental dot fallback
   ============================================================ */

/* (3) KYA timeline yellow → readable amber on light bg */
.kt-step-emerging { --kt-color: #B47200; }   /* darker amber, AA contrast */
.kt-step-emerging .kt-year { color: #B47200; }

/* (1) ps-card mobile font consistency — match between problem and solution */
.ps-card,
.ps-card.problem,
.ps-card.solution {
  font-size: var(--kye-type-small);
}
.ps-card .ps-tag {
  font-size: var(--kye-type-tiny) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}
.ps-card .ps-h {
  font-size: clamp(17px, 2vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 8px 0 12px !important;
  color: var(--kye-color-text) !important;
}
.ps-card .ps-list {
  margin: 0;
  padding-left: 18px;
}
.ps-card .ps-list li {
  font-size: var(--kye-type-small) !important;
  line-height: 1.55 !important;
  color: var(--kye-color-text) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.ps-card .ps-list li strong {
  font-weight: 700;
  color: var(--kye-color-text);
}
@media (max-width: 600px) {
  .ps-card { padding: 16px !important; }
  .ps-card .ps-h { font-size: var(--type-16) !important; }
  .ps-card .ps-list li { font-size: var(--type-13) !important; }
}

/* (4) Capability/concept table — strict consistency, no <strong> font shifts */
.ps-table { font-size: var(--kye-type-small); }
.ps-table thead th {
  font-size: var(--kye-type-tiny);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kye-color-text-muted);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--kye-color-line);
}
.ps-table tbody td {
  font-size: var(--kye-type-small) !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  padding: 12px 14px !important;
  vertical-align: top;
  color: var(--kye-color-text) !important;
  border-bottom: 1px solid var(--kye-color-line);
}
.ps-table tbody td strong {
  font-weight: 700 !important;
  color: var(--kye-color-text) !important;
  font-size: inherit !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ps-table tbody td:first-child {
  width: 22%;
  white-space: nowrap;
}
.ps-table tbody td:nth-child(2) {
  width: 28%;
  color: var(--kye-color-text-muted) !important;
}
.ps-table tbody td:nth-child(3) {
  color: var(--kye-color-text-muted) !important;
}
@media (max-width: 700px) {
  .ps-table tbody td:first-child { white-space: normal; width: auto; }
  .ps-table thead th, .ps-table tbody td { padding: 10px 12px !important; font-size: var(--type-12) !important; }
}

/* (5) Horizontal frameworks list — badges instead of <strong>NAME</strong>
   Each .cf-grid-list li starts with a <strong>name</strong>. Style that
   strong as a coloured framework chip. */
.cf-grid-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.cf-grid-list li {
  font-size: var(--kye-type-small);
  line-height: 1.5;
  color: var(--kye-color-text-muted);
  padding-left: 6px;
}
.cf-grid-list li strong {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(95,99,104,0.12);
  color: #5F6368;
  border: 1px solid rgba(95,99,104,0.28);
}
/* Per-framework hue when the strong text matches a known mark.
   Uses :has() so we don't need JS to retag. */
@supports (selector(li:has(*))) {
  .cf-grid-list li:has(strong:first-child) strong { color: inherit; }
  .cf-grid-list li strong:first-child { /* default already set */ }
}
/* Explicit per-name overrides — apply via attribute on the <strong>
   added by JS in initFrameworkBadges-style tagger below. The JS
   walks .cf-grid-list strong:first-child and tags with the right hue. */

/* Eyebrow defensive: even if some legacy section ::before survives,
   force-no-content when the eyebrow has the standard chrome. */
.section .eyebrow::before { content: none !important; }

/* §FINAL-42 — defensive plain-text rendering for .fwk-list before
   the badge tagger runs (pre-hydration) and as a final fallback if
   the tagger fails. Browsers preserve the &middot; separator. */
.fwk-list:not(.sector-frameworks-badged) {
  font-size: var(--kye-type-small);
  color: var(--kye-color-text-muted);
  letter-spacing: 0.02em;
  word-spacing: 2px;
  line-height: 1.5;
}

/* §FINAL-43 — landing-page slim-down v3 helpers */

/* Compact who-mini grid (replaces the 6-row who-stories on landing —
   detailed version remains on each audience page). */
.who-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.who-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  background: var(--kye-color-surface);
  text-decoration: none;
  color: var(--kye-color-text);
  transition: border-color var(--kye-motion-fast), transform var(--kye-motion-fast);
}
.who-mini:hover {
  border-color: var(--who-c, var(--kye-color-brand));
  transform: translateY(-2px);
}
.who-mini .ms {
  font-size: var(--type-22) !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--who-c, var(--kye-color-brand));
}
.who-mini strong {
  font-size: var(--type-14);
  font-weight: 700;
  color: var(--kye-color-text);
}
.who-mini span:not(.ms) {
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
  line-height: 1.45;
}
.who-mini[data-who="buyers"]     { --who-c: #B47200; }
.who-mini[data-who="developers"] { --who-c: #6366f1; }
.who-mini[data-who="builders"]   { --who-c: #6366f1; } /* legacy alias */
.who-mini[data-who="usecases"]   { --who-c: #F4B400; }
.who-mini[data-who="frameworks"] { --who-c: #6366f1; }
.who-mini[data-who="oscal"]      { --who-c: #00838F; }
.who-mini[data-who="card"]       { --who-c: #009688; }
.who-mini[data-who="risk"]       { --who-c: #C5221F; }
.who-mini[data-who="readiness"]  { --who-c: var(--color-brand-500); }
.who-mini[data-who="auditors"]   { --who-c: #009688; }
.who-mini[data-who="regulators"] { --who-c: #8E24AA; }

/* §FINAL-44 — frameworks page card grid */
.fwk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--kye-space-4);
  margin-top: var(--kye-space-5);
}
.fwk-card {
  background: var(--kye-color-surface);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--kye-space-2);
}
.fwk-card .fwk-h {
  margin: 0 0 var(--kye-space-1);
  font-size: var(--type-16);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fwk-card .fwk-h .fwk-badge {
  /* use the same badge tagger style; no JS needed because the
     badge already has data-fwk on it. The framework-badge tagger
     in main.js (initFrameworkBadges step 1 with cf-grid-list) is
     sized for inline list items; for the .fwk-h heading we want
     a slightly larger, framework-coloured chip. */
  font-size: var(--type-11);
  padding: 3px 8px;
  border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
}
.fwk-card .fwk-b {
  margin: 0;
  font-size: var(--kye-type-small);
  line-height: 1.5;
  color: var(--kye-color-text-muted);
}
.fwk-card .fwk-mapped {
  margin: var(--kye-space-2) 0 0;
  font-size: var(--type-13);
  line-height: 1.55;
  color: var(--kye-color-text);
  background: var(--kye-color-paper-2);
  padding: var(--kye-space-3);
  border-radius: var(--kye-radius-2);
  border-left: 3px solid var(--kye-color-brand);
}
.fwk-card .fwk-src {
  margin: var(--kye-space-1) 0 0;
  font-size: var(--type-12);
}
.fwk-card .fwk-src a {
  color: var(--kye-color-brand);
  text-decoration: none;
  font-weight: 600;
}
.fwk-card .fwk-src a:hover { text-decoration: underline; }

/* ============================================================
   §FINAL-46 — usecases page grid + card
   Real-world business-application scenarios. Each .uc-card has a
   sector-tag header, framework chips, scenario lede, a six-step
   .uc-trace ordered list, and an .uc-outcome footer.
   ============================================================ */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--kye-space-4);
}
.uc-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--kye-space-2);
  position: relative;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.uc-card:hover {
  border-color: var(--kye-color-brand);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent-soft) 10%, transparent);
}
.uc-card .uc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.uc-card .uc-sector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
}
.uc-card .uc-sector .ms {
  font-size: var(--type-16) !important;
  width: 16px;
  color: var(--kye-color-brand) !important;
}
.uc-card .uc-fwk {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.uc-card .uc-fwk .fwk-badge {
  font-size: var(--type-11);
  padding: 2px 6px;
  border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
}
.uc-card .uc-h {
  margin: 0;
  font-size: var(--type-16);
  font-weight: 700;
  line-height: 1.32;
  color: var(--kye-color-text);
}
.uc-card .uc-scenario {
  margin: 0;
  font-size: var(--kye-type-small);
  line-height: 1.55;
  color: var(--kye-color-text-muted);
}
.uc-card .uc-trace {
  list-style: none;
  margin: var(--kye-space-1) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--kye-color-line);
  padding-top: var(--kye-space-2);
}
.uc-card .uc-trace li {
  font-size: var(--type-13);
  line-height: 1.5;
  color: var(--kye-color-text);
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 10px;
  align-items: baseline;
}
.uc-card .uc-step {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kye-color-brand);
  text-transform: uppercase;
  white-space: nowrap;
}
.uc-card .uc-outcome {
  margin: var(--kye-space-2) 0 0;
  padding: var(--kye-space-2) var(--kye-space-3);
  background: var(--kye-color-paper-2);
  border-left: 3px solid var(--kye-color-brand);
  border-radius: var(--kye-radius-2);
  font-size: var(--type-13);
  line-height: 1.55;
  color: var(--kye-color-text);
}
@media (max-width: 520px) {
  .uc-card { padding: var(--kye-space-3); }
  .uc-card .uc-trace li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .uc-card .uc-step {
    font-size: var(--type-11);
  }
}
:root[data-theme="dark"] .uc-card {
  background: var(--surface-solid);
  border-color: var(--line);
}
:root[data-theme="dark"] .uc-card .uc-outcome {
  background: rgba(255,255,255,0.04);
}

/* ============================================================
   §FINAL-47 — essentials shipment: oscal / compliance-card /
   risk / readiness pages
   ============================================================ */

/* --- shared status-row used by oscal.html + compliance-card.html --- */
.rd-status {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--kye-space-2);
}
.rd-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--kye-space-2);
  align-items: baseline;
  padding: var(--kye-space-2) var(--kye-space-3);
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  border-left: 3px solid var(--kye-color-line);
  font-size: var(--kye-type-small);
  line-height: 1.55;
  color: var(--kye-color-text);
}
.rd-row .rd-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kye-color-text-muted);
  text-transform: uppercase;
}
.rd-row-shipped  { border-left-color: var(--color-brand-500); }
.rd-row-progress { border-left-color: #B47200; }
.rd-row-planned  { border-left-color: #5F6368; }
@media (max-width: 520px) {
  .rd-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- oscal.html grid + cards --- */
.oscal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--kye-space-4);
}
.oscal-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
  display: flex; flex-direction: column; gap: var(--kye-space-2);
}
.oscal-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
}
.oscal-from { font-weight: 600; color: var(--kye-color-text); }
.oscal-arrow { color: var(--kye-color-brand); font-weight: 700; padding: 0 2px; }
.oscal-to    { font-weight: 600; color: var(--kye-color-text); }
.oscal-card .oscal-b {
  margin: 0;
  font-size: var(--kye-type-small);
  line-height: 1.55;
  color: var(--kye-color-text);
}
.oscal-card .oscal-src {
  margin: var(--kye-space-1) 0 0;
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
}
.oscal-card .oscal-src a {
  color: var(--kye-color-brand); text-decoration: none; font-weight: 600;
}
.oscal-card .oscal-src a:hover { text-decoration: underline; }

/* --- compliance-card.html: the rendered nutrition label --- */
.cc-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent-soft) 6%, transparent);
}
.cc-header {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: var(--kye-space-3);
  padding-bottom: var(--kye-space-3);
  border-bottom: 1px solid var(--kye-color-line);
}
.cc-eyebrow {
  display: inline-block;
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kye-color-brand);
  margin-bottom: 4px;
}
.cc-name {
  margin: 0;
  font-size: var(--type-22);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kye-color-text);
}
.cc-urn {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
}
.cc-trust {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.cc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--type-11); font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.cc-pill .ms { font-size: var(--type-14) !important; width: 14px; }
.cc-pill-ok  { background: color-mix(in srgb, var(--color-accent-soft) 12%, transparent); color: var(--color-brand-500); }
.cc-pill-key { background: var(--kye-color-paper-2); color: var(--kye-color-text-muted); }
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--kye-space-3);
  margin-top: var(--kye-space-3);
}
.cc-block {
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  padding: var(--kye-space-3);
  display: flex; flex-direction: column; gap: 8px;
}
.cc-block .cc-h {
  margin: 0; font-size: var(--type-12); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kye-color-brand);
}
.cc-kv {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) 1fr;
  gap: 4px 12px;
  font-size: var(--type-13);
  line-height: 1.5;
}
.cc-kv dt { color: var(--kye-color-text-muted); font-weight: 500; }
.cc-kv dd { margin: 0; color: var(--kye-color-text); font-weight: 500; }
.cc-fwk-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--type-13);
}
.cc-fwk-list .fwk-badge {
  font-size: var(--type-11); padding: 2px 6px; border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  margin-right: 6px;
}
.cc-bars {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-bars li {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) 1fr 44px;
  gap: 8px;
  align-items: center;
  font-size: var(--type-12);
}
.cc-bar-l { color: var(--kye-color-text-muted); }
.cc-bar {
  background: var(--kye-color-line);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.cc-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--color-brand-500), #2BA866);
  border-radius: 999px;
}
.cc-bar-v {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700; font-size: var(--type-11);
  color: var(--kye-color-text); text-align: right;
}
.cc-key {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); color: var(--kye-color-text-muted);
}
.cc-footer {
  margin-top: var(--kye-space-3);
  padding-top: var(--kye-space-3);
  border-top: 1px solid var(--kye-color-line);
}
.cc-disclaimer {
  margin: 0;
  font-size: var(--type-12);
  line-height: 1.55;
  color: var(--kye-color-text-muted);
}
.cc-aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--kye-space-3);
}
.cc-aud {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: var(--kye-space-3);
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: start;
  font-size: var(--type-13);
}
.cc-aud .ms {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--type-22) !important;
  width: 22px;
  color: var(--kye-color-brand) !important;
}
.cc-aud strong {
  font-size: var(--type-13);
  font-weight: 700;
  color: var(--kye-color-text);
}
.cc-aud span:last-child {
  color: var(--kye-color-text-muted);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .cc-header { flex-direction: column; align-items: flex-start; }
  .cc-trust  { align-items: flex-start; }
  .cc-bars li { grid-template-columns: 1fr; gap: 2px; }
  .cc-bar-v { text-align: left; }
}

/* --- risk.html grid + cards --- */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--kye-space-3);
}
.risk-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-left-width: 4px;
  border-radius: var(--kye-radius-2);
  padding: var(--kye-space-3) var(--kye-space-4);
  display: flex; flex-direction: column; gap: 8px;
}
.risk-card[data-sev="high"] { border-left-color: #C5221F; }
.risk-card[data-sev="med"]  { border-left-color: #B47200; }
.risk-card[data-sev="low"]  { border-left-color: var(--color-brand-500); }
.risk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.risk-sev {
  display: inline-block;
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.risk-sev-high { background: rgba(197,34,31,0.12);  color: #C5221F; }
.risk-sev-med  { background: rgba(180,114,0,0.14);  color: #B47200; }
.risk-sev-low  { background: color-mix(in srgb, var(--color-accent-soft) 14%, transparent);  color: var(--color-brand-500); }
.risk-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  color: var(--kye-color-text-muted);
  letter-spacing: 0.04em;
}
.risk-card .risk-h {
  margin: 0; font-size: var(--type-14); font-weight: 700;
  line-height: 1.35; color: var(--kye-color-text);
}
.risk-card .risk-b,
.risk-card .risk-m {
  margin: 0;
  font-size: var(--type-13);
  line-height: 1.55;
  color: var(--kye-color-text);
}
.risk-card .risk-m {
  background: var(--kye-color-paper-2);
  padding: var(--kye-space-2) var(--kye-space-3);
  border-radius: var(--kye-radius-2);
  border-left: 2px solid var(--kye-color-brand);
}

/* --- readiness.html quiz form + result --- */
.rd-form {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
}
.rd-list {
  list-style: none;
  counter-reset: rd-counter;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--kye-space-3);
}
.rd-q {
  padding: var(--kye-space-3) var(--kye-space-3);
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  border-left: 3px solid var(--kye-color-line);
}
.rd-q[data-rd-dim="identity"]   { border-left-color: #6366f1; }
.rd-q[data-rd-dim="delegation"] { border-left-color: #00ACC1; }
.rd-q[data-rd-dim="capability"] { border-left-color: #009688; }
.rd-q[data-rd-dim="decision"]   { border-left-color: var(--color-brand-500); }
.rd-q[data-rd-dim="audit"]      { border-left-color: #8E24AA; }
.rd-q[data-rd-dim="recovery"]   { border-left-color: #B47200; }
.rd-q .rd-h {
  margin: 0 0 6px;
  font-size: var(--type-14); font-weight: 700; line-height: 1.4;
  color: var(--kye-color-text);
}
.rd-q .rd-b {
  margin: 0 0 var(--kye-space-2);
  font-size: var(--type-13); line-height: 1.55;
  color: var(--kye-color-text-muted);
}
.rd-opts {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.rd-opts label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--type-13); font-weight: 500;
  padding: 6px 12px; border-radius: var(--kye-radius-2);
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.rd-opts label:hover {
  border-color: var(--kye-color-brand);
}
.rd-opts label:has(input:checked) {
  border-color: var(--kye-color-brand);
  background: color-mix(in srgb, var(--color-accent-soft) 8%, transparent);
}
.rd-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: var(--kye-space-4);
}

.rd-result {
  margin-top: var(--kye-space-4);
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-brand);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
}
.rd-result-head {
  display: flex; align-items: center; gap: var(--kye-space-3);
  padding-bottom: var(--kye-space-3);
  border-bottom: 1px solid var(--kye-color-line);
}
.rd-band {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  font-size: var(--type-28); font-weight: 800;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: white;
  flex-shrink: 0;
}
.rd-band-a { background: var(--color-brand-500); }
.rd-band-b { background: #2BA866; }
.rd-band-c { background: #B47200; }
.rd-band-d { background: #C5221F; }
.rd-result-h {
  margin: 0;
  font-size: var(--type-18); font-weight: 700;
  color: var(--kye-color-text);
}
.rd-result-h [data-rd-score] {
  color: var(--kye-color-brand);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.rd-result-sub {
  margin: 4px 0 0;
  font-size: var(--type-13); line-height: 1.55;
  color: var(--kye-color-text-muted);
}
.rd-gap-title {
  margin: var(--kye-space-3) 0 var(--kye-space-2);
  font-size: var(--type-13); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kye-color-brand);
}
.rd-gap-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--kye-space-2);
}
.rd-gap {
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  padding: var(--kye-space-3);
  border-left: 3px solid var(--kye-color-brand);
}
.rd-gap-clean { border-left-color: var(--color-brand-500); }
.rd-gap-h {
  display: flex; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
.rd-gap-dim {
  font-size: var(--type-13); font-weight: 700; color: var(--kye-color-text);
}
.rd-gap-pct {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-12); font-weight: 700;
  color: var(--kye-color-text-muted);
}
.rd-gap-advice {
  margin: 0 0 4px;
  font-size: var(--type-13); line-height: 1.55;
  color: var(--kye-color-text);
}
.rd-gap-profile {
  margin: 0 0 6px;
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
}
.rd-gap-items {
  margin: 0; padding-left: 1.2em;
  font-size: var(--type-12); line-height: 1.5;
  color: var(--kye-color-text-muted);
}
.rd-tag-partial {
  font-style: normal;
  font-size: var(--type-11);
  color: #B47200;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.rd-result-cta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--kye-space-3);
}
.rd-disclaimer {
  margin: var(--kye-space-3) 0 0;
  padding-top: var(--kye-space-2);
  border-top: 1px dashed var(--kye-color-line);
  font-size: var(--type-12);
  color: var(--kye-color-text-muted);
}

@media (max-width: 600px) {
  .rd-result-head { flex-direction: column; align-items: flex-start; }
  .rd-band { width: 52px; height: 52px; font-size: var(--type-28); }
}

:root[data-theme="dark"] .rd-form,
:root[data-theme="dark"] .cc-card,
:root[data-theme="dark"] .oscal-card,
:root[data-theme="dark"] .risk-card,
:root[data-theme="dark"] .cc-aud,
:root[data-theme="dark"] .rd-result {
  background: var(--surface-solid);
  border-color: var(--line);
}
:root[data-theme="dark"] .rd-q,
:root[data-theme="dark"] .cc-block,
:root[data-theme="dark"] .rd-gap,
:root[data-theme="dark"] .rd-row,
:root[data-theme="dark"] .risk-card .risk-m {
  background: rgba(255,255,255,0.04);
}

/* ============================================================
   §FINAL-48 — concept primitives, tech-quickstart, open-banking
   flow, concepts.html cards
   ============================================================ */

/* Landing: clickable primitive grid (#primitives section). Each
 * card is an anchor into concepts.html#<id>. Distinct from
 * .who-mini (audience cards) and .af-dim (interactive Authority
 * Finality cross-highlight) — this one screams "click for tech". */
.prim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--kye-space-3);
}
.prim-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px 12px;
  padding: var(--kye-space-3);
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  text-decoration: none;
  color: var(--kye-color-text);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.prim-card:hover {
  border-color: var(--kye-color-brand);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent-soft) 12%, transparent);
  transform: translateY(-1px);
}
.prim-card .ms {
  grid-row: 1 / span 3;
  align-self: start;
  font-size: var(--type-28) !important;
  width: 26px;
  color: var(--kye-color-brand) !important;
  margin-top: 2px;
}
.prim-card strong {
  font-size: var(--type-16);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.prim-card span {
  font-size: var(--type-13);
  line-height: 1.5;
  color: var(--kye-color-text-muted);
}
.prim-card em {
  font-style: normal;
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-brand);
  margin-top: 4px;
}
.prim-card[data-prim="obo"] { border-left: 3px solid #00ACC1; }
.prim-card[data-prim="obo"] .ms { color: #00ACC1 !important; }
.prim-card[data-prim="obo"] em  { color: #00ACC1; }

/* Tech-quickstart steps (#quickstart-tech section). */
.qs-steps {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-direction: column; gap: var(--kye-space-2);
  counter-reset: qs-counter;
}
.qs-steps li {
  padding: var(--kye-space-3);
  background: var(--kye-color-paper);
  border-left: 3px solid var(--kye-color-brand);
  border-radius: var(--kye-radius-2);
  font-size: var(--kye-type-small);
  line-height: 1.55;
}
.qs-steps li strong {
  color: var(--kye-color-text);
  font-weight: 700;
}
.qs-steps a {
  color: var(--kye-color-brand);
  text-decoration: none;
  font-weight: 600;
}
.qs-steps a:hover { text-decoration: underline; }

/* Open-banking flow (#open-banking section). Numbered steps with
 * a coloured step pill on the left. */
.ob-flow {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--kye-space-2);
}
.ob-flow li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: var(--kye-space-3);
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  font-size: var(--type-13);
  line-height: 1.55;
}
.ob-flow .ob-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kye-color-brand);
  color: white;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: var(--type-12);
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .ob-flow li { grid-template-columns: 1fr; }
}

/* concepts.html — pill quick-jump bar in hero */
.cn-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cn-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  font-size: var(--type-12);
  font-weight: 600;
  color: var(--kye-color-text);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.cn-pill:hover {
  border-color: var(--kye-color-brand);
  color: var(--kye-color-brand);
}
.cn-pill .ms { font-size: var(--type-14) !important; width: 14px; }

/* concepts.html — primitive heading icon */
.cn-h-icon {
  font-size: var(--type-22) !important;
  width: 22px;
  vertical-align: -3px;
  color: var(--kye-color-brand) !important;
  margin-right: 4px;
}

/* concepts.html — primitive card */
.cn-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
}
.cn-card-featured {
  border-left: 4px solid #00ACC1;
  background: linear-gradient(180deg, rgba(0,172,193,0.04), var(--kye-color-paper) 60%);
}
.cn-def {
  margin: 0 0 var(--kye-space-2);
  font-size: var(--kye-type-small);
  line-height: 1.6;
  color: var(--kye-color-text);
}
.cn-meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  margin: 0 0 var(--kye-space-2);
  padding: var(--kye-space-2) var(--kye-space-3);
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  font-size: var(--type-13);
  line-height: 1.55;
}
.cn-meta dt {
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
}
.cn-meta dd { margin: 0; color: var(--kye-color-text); }
.cn-ex-h {
  margin: var(--kye-space-2) 0 6px;
  font-size: var(--type-13);
  color: var(--kye-color-text);
}
.cn-ex-list {
  margin: 0; padding-left: 1.2em;
  font-size: var(--type-13);
  line-height: 1.6;
  color: var(--kye-color-text);
}
.cn-ex-list li { margin-bottom: 4px; }
.cn-flow {
  margin: 0; padding: 0; list-style: none;
  counter-reset: cn-flow-counter;
  display: flex; flex-direction: column; gap: 8px;
}
.cn-flow li {
  counter-increment: cn-flow-counter;
  padding: var(--kye-space-2) var(--kye-space-3) var(--kye-space-2) calc(var(--kye-space-3) + 18px);
  position: relative;
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  font-size: var(--type-13);
  line-height: 1.55;
}
.cn-flow li::before {
  content: counter(cn-flow-counter);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: var(--type-11);
  color: var(--kye-color-brand);
}
@media (max-width: 600px) {
  .cn-meta { grid-template-columns: 1fr; gap: 2px; }
}
:root[data-theme="dark"] .prim-card,
:root[data-theme="dark"] .qs-steps li,
:root[data-theme="dark"] .ob-flow li,
:root[data-theme="dark"] .cn-card,
:root[data-theme="dark"] .cn-pill {
  background: var(--surface-solid);
  border-color: var(--line);
}
:root[data-theme="dark"] .cn-meta,
:root[data-theme="dark"] .cn-flow li {
  background: rgba(255,255,255,0.04);
}

/* ============================================================
   §FINAL-49 — engage.html (engagement-model paths, working
   groups, certification ladder)
   ============================================================ */

.eg-stages {
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--kye-space-2);
  counter-reset: eg;
}
.eg-stages li {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: var(--kye-space-3);
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: start;
}
.eg-stages li .eg-step {
  grid-row: 1 / span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kye-color-brand);
  color: white;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: var(--type-12);
}
.eg-stages li strong {
  font-size: var(--type-14);
  font-weight: 700;
  color: var(--kye-color-text);
}
.eg-stages li span:not(.eg-step) {
  font-size: var(--type-12);
  line-height: 1.5;
  color: var(--kye-color-text-muted);
}

.eg-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-4);
  display: flex; flex-direction: column; gap: var(--kye-space-2);
}
.eg-who, .eg-want, .eg-do, .eg-out {
  margin: 0;
  font-size: var(--kye-type-small);
  line-height: 1.6;
  color: var(--kye-color-text);
}
.eg-who strong, .eg-want strong, .eg-do strong, .eg-out strong {
  color: var(--kye-color-brand);
  font-weight: 700;
}
.eg-questions, .eg-steps, .eg-pilot-list, .eg-pilot-deliv {
  margin: 0; padding-left: 1.4em;
  font-size: var(--type-13); line-height: 1.6;
  color: var(--kye-color-text);
}
.eg-questions li, .eg-steps li, .eg-pilot-list li, .eg-pilot-deliv li {
  margin-bottom: 4px;
}
.eg-tier-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.eg-tier-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: baseline;
  background: var(--kye-color-paper-2);
  padding: var(--kye-space-2) var(--kye-space-3);
  border-radius: var(--kye-radius-2);
  font-size: var(--type-13); line-height: 1.55;
}
.eg-tier {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 24px;
  border-radius: var(--kye-radius-1);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: var(--type-11);
  color: white;
}
.eg-tier-l1 { background: #5F6368; }
.eg-tier-l2 { background: #6366f1; }
.eg-tier-l3 { background: var(--color-brand-500); }
.eg-tier-l4 { background: #B47200; }
@media (max-width: 520px) {
  .eg-tier-list li { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .eg-stages li,
:root[data-theme="dark"] .eg-card {
  background: var(--surface-solid);
  border-color: var(--line);
}
:root[data-theme="dark"] .eg-tier-list li {
  background: rgba(255,255,255,0.04);
}

/* ============================================================
   §FINAL-50 — hero jump-to pill bar (landing only)
   ============================================================ */
.hero-jumpto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--kye-color-line);
}
.hero-jumpto-label {
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
  margin-right: 4px;
}
.hero-jumpto-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  font-size: var(--type-12);
  font-weight: 600;
  color: var(--kye-color-text);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.hero-jumpto-chip:hover {
  border-color: var(--kye-color-brand);
  color: var(--kye-color-brand);
}
.hero-jumpto-chip .ms { font-size: var(--type-13) !important; width: 13px; }
:root[data-theme="dark"] .hero-jumpto-chip {
  background: var(--surface-solid);
  border-color: var(--line);
}

/* ============================================================
   §FINAL-51 — animated use-case trace ("Play trace" per .uc-card)
   ============================================================ */
.uc-play {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  background: var(--kye-color-brand);
  color: white;
  border: none;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--type-12);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-bottom: var(--kye-space-2);
  transition: background 160ms ease, transform 160ms ease;
}
.uc-play:hover { background: var(--color-brand-600); transform: translateY(-1px); }
.uc-play .ms { font-size: var(--type-16) !important; width: 16px; }
.uc-play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
}
/* Idle state: dim every .uc-step bullet; the .uc-step prefix is the
   only coloured element so visitors immediately see it's an animated
   sequence not a static list. */
.uc-card .uc-trace li {
  position: relative;
  transition: opacity 220ms ease, background 220ms ease;
}
.uc-card.uc-playing .uc-trace li {
  opacity: 0.42;
  filter: saturate(0.6);
}
.uc-card.uc-playing .uc-trace li.is-on,
.uc-card.uc-playing .uc-trace li.is-done {
  opacity: 1;
  filter: none;
}
.uc-card .uc-trace li.is-on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-soft) 10%, transparent), transparent 60%);
  border-radius: var(--kye-radius-1);
  padding: 4px 8px;
  margin-left: -8px;
}
.uc-card .uc-trace li.is-on .uc-step {
  color: white;
  background: var(--kye-color-brand);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  animation: uc-pulse 700ms ease-out;
}
.uc-card .uc-trace li.is-done .uc-step::before {
  content: "✓ ";
  color: var(--color-brand-500);
  font-weight: 700;
}
@keyframes uc-pulse {
  0%   { transform: scale(0.82); box-shadow: 0 0 0 0 rgba(99,102,241,0.55); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(99,102,241,0.18); }
  100% { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.uc-card .uc-outcome {
  transition: border-left-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.uc-card .uc-outcome.is-done {
  border-left-color: var(--color-brand-500);
  border-left-width: 5px;
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.18);
  animation: uc-outcome-pulse 600ms ease-out;
}
@keyframes uc-outcome-pulse {
  0%   { background: color-mix(in srgb, var(--color-accent-soft) 10%, transparent); }
  100% { background: var(--kye-color-paper-2); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-card .uc-trace li,
  .uc-card.uc-playing .uc-trace li,
  .uc-card .uc-trace li.is-on .uc-step,
  .uc-card .uc-outcome,
  .uc-card .uc-outcome.is-done {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   §FINAL-52 — base .fwk-badge style + .fwk-list hydration layout
   The framework-badge tagger in main.js injects bare <span
   class="fwk-badge"> chips into .fwk-list / .sector-frameworks /
   .compliance-list at runtime. Until now those bare badges had
   only inline color/border (set by JS) and inherited zero
   padding/spacing — so on buyers.html they rendered as
   "SOC 2ISO 27001:2022PCI DSS 4.0..." (unspaced run-on).
   This block gives the badge a default chip look + makes the
   hydrated parent a flex-wrap row with gap.
   ============================================================ */
.fwk-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin: 0;
  border-radius: var(--kye-radius-1, 4px);
  border: 1px solid currentColor;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
}
.sector-frameworks-badged,
.fwk-list.sector-frameworks-badged,
.sector-frameworks.sector-frameworks-badged,
.compliance-list.sector-frameworks-badged {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  /* Cancel the pre-hydration plain-text colour from §FINAL-42
     once the tagger has run, so the chips read as primary content. */
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  word-spacing: 0;
}
/* Inside list items the badged container should sit on the same
   text baseline as the surrounding copy. */
li > .fwk-list.sector-frameworks-badged {
  vertical-align: middle;
  margin-right: 4px;
}

/* ============================================================
   §FINAL-53 — animated .ob-flow (open-banking + agent-purchasing)
   The "▶ Play flow" button injected by initObFlowAnimation() in
   main.js. Same idle/is-on/is-done states as the use-case trace.
   ============================================================ */
.ob-play {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kye-color-brand);
  color: white;
  border: none;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--type-12);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin: 0 0 var(--kye-space-2);
  transition: background 160ms ease, transform 160ms ease;
}
.ob-play:hover { background: var(--color-brand-600); transform: translateY(-1px); }
.ob-play .ms { font-size: var(--type-16) !important; width: 16px; }
.ob-play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
}

.ob-flow li {
  transition: opacity 220ms ease, background 220ms ease, transform 220ms ease;
}
.ob-flow.is-playing li {
  opacity: 0.42;
  filter: saturate(0.6);
}
.ob-flow.is-playing li.is-on,
.ob-flow.is-playing li.is-done {
  opacity: 1;
  filter: none;
}
.ob-flow li.is-on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-soft) 10%, transparent), transparent 60%);
  transform: translateX(2px);
}
.ob-flow li.is-on .ob-step {
  background: var(--kye-color-brand);
  color: white;
  animation: ob-pulse 700ms ease-out;
}
.ob-flow li.is-done .ob-step::before {
  content: "✓ ";
  font-weight: 700;
}
@keyframes ob-pulse {
  0%   { transform: scale(0.82); box-shadow: 0 0 0 0 rgba(99,102,241,0.55); }
  50%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(99,102,241,0.18); }
  100% { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ob-flow li, .ob-flow li.is-on, .ob-flow li.is-on .ob-step {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   §FINAL-54 — flow-viz: SVG actor-lane sequence diagrams
   Mounted on [data-flow-viz="<key>"] by initFlowViz() in
   assets/flow-viz.js. Used on open-banking.html and
   agent-purchasing.html. Auto-plays once on first viewport
   intersection (suppressed under prefers-reduced-motion).
   Keyboard: ←/→ step, Space pause/resume, Esc reset.
   ============================================================ */
[data-flow-viz] {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-3);
  outline: none;
  position: relative;
}
[data-flow-viz]:focus-visible {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
}

/* Controls bar */
.fv-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: var(--kye-space-2);
  border-bottom: 1px solid var(--kye-color-line);
  margin-bottom: var(--kye-space-2);
}
.fv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 10px;
  background: var(--kye-color-brand);
  color: white;
  border: none; border-radius: 999px;
  font-family: inherit; font-size: var(--type-12); font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.fv-btn:hover { background: var(--color-brand-600); transform: translateY(-1px); }
.fv-btn .ms { font-size: var(--type-16) !important; width: 16px; }
.fv-btn.fv-reset {
  background: transparent; color: var(--kye-color-text-muted);
  border: 1px solid var(--kye-color-line);
}
.fv-btn.fv-reset:hover { color: var(--kye-color-brand); border-color: var(--kye-color-brand); transform: none; background: transparent; }
.fv-speed {
  display: inline-flex; align-items: center;
  border: 1px solid var(--kye-color-line);
  border-radius: 999px;
  padding: 2px;
  margin-left: auto;
}
.fv-speed-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font: inherit;
  font-size: var(--type-11);
  font-weight: 700;
  color: var(--kye-color-text-muted);
  cursor: pointer;
  border-radius: 999px;
}
.fv-speed-btn.is-on {
  background: var(--kye-color-brand);
  color: white;
}
.fv-loop {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--type-12); color: var(--kye-color-text-muted);
  cursor: pointer;
}
.fv-loop input { margin: 0; }
.fv-progress {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); font-weight: 700;
  color: var(--kye-color-text-muted);
}

/* Stage (the SVG) */
.fv-stage {
  background: linear-gradient(180deg, rgba(99,102,241,0.04), rgba(0,172,193,0.04));
  border-radius: var(--kye-radius-2);
  padding: 14px 12px;
  overflow: visible;
}
.fv-stage svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Actor lanes */
.fv-actor-icon {
  font-size: var(--type-14);
  font-weight: 700;
  fill: white;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.fv-actor-label {
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Steps — idle / on / done.
 * Idle is intentionally readable (opacity 0.45) so the diagram makes
 * sense BEFORE the user presses Play — it should look like a faded
 * sequence diagram, not a blank canvas. Active state is then a clear
 * jump in opacity + colour pulse so the click is unmistakable. */
.fv-step .fv-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: 0.45;
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, stroke-width 220ms ease;
}
.fv-step .fv-arrow,
.fv-step .fv-payload {
  opacity: 0.45;
  transition: opacity 220ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fv-step .fv-step-label {
  font-size: var(--type-11);
  font-weight: 700;
  opacity: 0.55;
  transition: opacity 220ms ease;
  pointer-events: none;
}
/* Once the user hits Play, idle steps DIM further so the active step
 * stands out unmistakably. */
[data-flow-viz].fv-playing .fv-step:not(.is-on):not(.is-done) .fv-path,
[data-flow-viz].fv-playing .fv-step:not(.is-on):not(.is-done) .fv-arrow,
[data-flow-viz].fv-playing .fv-step:not(.is-on):not(.is-done) .fv-payload,
[data-flow-viz].fv-playing .fv-step:not(.is-on):not(.is-done) .fv-step-label {
  opacity: 0.18;
}
.fv-step .fv-payload-text {
  font-size: var(--type-11);
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.fv-step.is-on .fv-path,
.fv-step.is-done .fv-path {
  stroke-dashoffset: 0;
  opacity: 1;
}
.fv-step.is-on .fv-path {
  /* Active step: bumped stroke + drop-shadow glow so it's unmistakably
   * the current one even glanced at from across the room. */
  stroke-width: 4 !important;
  filter: drop-shadow(0 0 6px currentColor);
}
.fv-step.is-on .fv-arrow {
  opacity: 1;
  filter: drop-shadow(0 0 4px currentColor);
  animation: fv-arrow-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fv-step.is-done .fv-arrow,
.fv-step.is-on .fv-step-label,
.fv-step.is-done .fv-step-label {
  opacity: 1;
}
.fv-step.is-on .fv-step-label {
  /* Active label gets a gentle horizontal nudge so it stands apart from
   * the done labels. */
  font-weight: 800 !important;
}
.fv-step.is-on .fv-payload {
  opacity: 1;
  animation: fv-payload-glide 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fv-step.is-done .fv-payload {
  opacity: 0.55;
}

@keyframes fv-arrow-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes fv-payload-glide {
  0%   { transform: translateX(-12px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Detail strip */
.fv-detail {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: baseline;
  margin-top: var(--kye-space-2);
  padding: var(--kye-space-2) var(--kye-space-3);
  background: var(--kye-color-paper-2);
  border-radius: var(--kye-radius-2);
  border-left: 3px solid var(--kye-color-brand);
}
.fv-detail-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-brand);
}
.fv-detail-text {
  font-size: var(--type-13);
  line-height: 1.55;
  color: var(--kye-color-text);
}

/* Text-version fallback */
.fv-details > summary {
  cursor: pointer;
  font-size: var(--type-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
  list-style: none;
  padding: 8px 0;
}
.fv-details > summary::-webkit-details-marker { display: none; }
.fv-details > summary::before { content: "▸ "; color: var(--kye-color-brand); }
.fv-details[open] > summary::before { content: "▾ "; }

@media (max-width: 700px) {
  .fv-detail { grid-template-columns: 1fr; gap: 4px; }
  .fv-controls { font-size: var(--type-11); }
  .fv-actor-label { font-size: var(--type-11); }
}

/* Reduced-motion: drop animations, keep static highlight */
@media (prefers-reduced-motion: reduce) {
  .fv-step .fv-path { stroke-dashoffset: 0; opacity: 1; transition: none; }
  .fv-step .fv-arrow, .fv-step .fv-payload, .fv-step .fv-step-label { opacity: 1 !important; transition: none; animation: none !important; }
}

/* Dark theme */
:root[data-theme="dark"] [data-flow-viz] {
  background: var(--surface-solid);
  border-color: var(--line);
}
:root[data-theme="dark"] .fv-stage {
  background: rgba(255,255,255,0.03);
}
:root[data-theme="dark"] .fv-detail {
  background: rgba(255,255,255,0.05);
}

/* §FINAL-54b — flow-viz UX hardening */
.fv-btn.fv-pulse {
  animation: fv-btn-pulse 1.4s ease-out 0s 2;
}
@keyframes fv-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 14px rgba(99,102,241,0); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); transform: scale(1); }
}
.fv-speed-btn {
  min-width: 36px;
  min-height: 28px;
}
.fv-speed-btn:hover:not(.is-on) {
  background: var(--kye-color-paper-2);
  color: var(--kye-color-text);
}
.fv-speed-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-focus-ring) 45%, transparent);
}
/* Make the play button bigger + chunkier so it's an obvious hit target */
.fv-btn {
  min-height: 36px;
  font-size: var(--type-13) !important;
  padding: 7px 16px 7px 12px !important;
}
.fv-btn .ms { font-size: var(--type-18) !important; width: 18px !important; }

/* ============================================================
   §FINAL-55 — agent-backed purchasing simulator
   ============================================================ */
.aps-host {
  display: block;
  background: var(--kye-color-paper-2);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: var(--kye-space-3);
}
.aps-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--kye-space-4);
}
@media (max-width: 760px) {
  .aps-shell { grid-template-columns: 1fr; }
}
.aps-h {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
  margin: 0 0 var(--kye-space-2);
}
.aps-controls { display: flex; flex-direction: column; gap: 12px; }
.aps-fs {
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 10px 12px 12px;
  margin: 0;
  background: var(--kye-color-paper);
}
.aps-fs legend {
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kye-color-brand);
  padding: 0 6px;
}
.aps-fs select,
.aps-fs input[type="range"] {
  width: 100%;
  font: inherit;
  font-size: var(--type-13);
  padding: 6px 8px;
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  background: var(--kye-color-paper);
  color: var(--kye-color-text);
}
.aps-fs input[type="range"] { padding: 0; height: 28px; cursor: pointer; }
.aps-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-12);
  font-weight: 700;
  color: var(--kye-color-text);
  margin-left: 4px;
}
.aps-outputs { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aps-decision-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 14px 16px;
}
.aps-decision-badge {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-14);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  margin-top: 4px;
  background: rgba(95, 99, 104, 0.10);
  color: var(--kye-color-text);
}
.aps-decision-badge.is-allow   { background: color-mix(in srgb, var(--color-accent-soft) 14%, transparent);  color: var(--color-brand-500); }
.aps-decision-badge.is-approve { background: rgba(180, 114, 0, 0.14);  color: #B47200; }
.aps-decision-badge.is-deny    { background: rgba(197, 34, 31, 0.14);  color: #C5221F; }
.aps-decision-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 12px; font-size: var(--type-12);
}
@media (max-width: 520px) { .aps-decision-meta { grid-template-columns: 1fr; } }
.aps-meta-k {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
  margin-bottom: 2px;
}
.aps-decision-meta code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-12);
  background: rgba(95, 99, 104, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--kye-color-text);
  word-break: break-word;
}
.aps-output-block {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 0;
  overflow: hidden;
}
.aps-output-block > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: var(--type-12);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kye-color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.aps-output-block > summary::-webkit-details-marker { display: none; }
.aps-output-block > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--kye-color-text-muted);
}
.aps-output-block:not([open]) > summary::after { content: '▸'; }
.aps-output-block .codeblock {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--kye-color-line);
  max-height: 360px;
  overflow: auto;
  font-size: var(--type-11);
}
:root[data-theme="dark"] .aps-host { background: var(--surface-solid); border-color: var(--line); }
:root[data-theme="dark"] .aps-fs,
:root[data-theme="dark"] .aps-decision-card,
:root[data-theme="dark"] .aps-output-block { background: rgba(255,255,255,0.03); border-color: var(--line); }

/* ============================================================
   §FINAL-56 — "Choose your role" landing-page router
   ============================================================ */
.rr-host { display: block; }
.rr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.rr-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.rr-card:hover {
  border-color: var(--kye-color-brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-accent-soft) 10%, transparent);
}
.rr-head { display: flex; align-items: center; gap: 10px; }
.rr-ico {
  font-size: var(--type-22) !important;
  width: 22px;
  color: var(--kye-color-brand);
}
.rr-label {
  margin: 0;
  font-size: var(--type-14);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--kye-color-text);
}
.rr-you {
  margin: 0;
  font-size: var(--type-13);
  line-height: 1.5;
  color: var(--kye-color-text-muted);
  flex: 1;
}
.rr-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.rr-cta {
  font-size: var(--type-12);
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--kye-color-line);
  background: transparent;
  color: var(--kye-color-text-muted);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rr-cta:hover {
  background: var(--kye-color-paper-2);
  color: var(--kye-color-text);
  border-color: var(--kye-color-line);
}
.rr-cta.is-primary {
  background: var(--kye-color-brand);
  color: white;
  border-color: var(--kye-color-brand);
}
.rr-cta.is-primary:hover { background: var(--color-brand-600); border-color: var(--color-brand-600); color: white; }
:root[data-theme="dark"] .rr-card { background: var(--surface-solid); border-color: var(--line); }
:root[data-theme="dark"] .rr-card:hover { border-color: var(--kye-color-brand); }
:root[data-theme="dark"] .rr-cta { border-color: var(--line); }

/* ============================================================
   §FINAL-57 — Decision Map™ visual viewer
   ============================================================ */
.dm-host { display: block; }
.dm-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  background: var(--kye-color-paper-2);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-3);
  padding: 14px;
}
.dm-node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 10px 12px;
  margin: 6px;
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 260px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.dm-node:hover {
  border-color: var(--kye-color-brand);
  transform: translateY(-1px);
}
.dm-node + .dm-node::before {
  content: '→';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kye-color-text-muted);
  font-size: var(--type-14);
  font-weight: 700;
}
@media (max-width: 600px) {
  .dm-chain { flex-direction: column; }
  .dm-node { max-width: none; margin: 4px 0; }
  .dm-node + .dm-node::before {
    content: '↓';
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
  }
}
.dm-node-ico {
  font-size: var(--type-18) !important;
  width: 20px;
  color: var(--kye-color-brand);
  flex-shrink: 0;
}
.dm-node-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.dm-node-type {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
}
.dm-node-short {
  font-size: var(--type-13);
  font-weight: 700;
  color: var(--kye-color-text);
  word-break: break-word;
}
.dm-node-ref code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  background: rgba(95, 99, 104, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--kye-color-text-muted);
  word-break: break-all;
  display: inline-block;
  margin-top: 2px;
}
.dm-node-hint {
  font-size: var(--type-11);
  color: var(--kye-color-text-muted);
  font-style: italic;
}
.dm-decision {
  border-width: 2px;
  background: rgba(95, 99, 104, 0.06);
}
.dm-decision.is-allow {
  border-color: var(--color-brand-500);
  background: color-mix(in srgb, var(--color-accent-soft) 6%, transparent);
}
.dm-decision.is-allow .dm-node-ico { color: var(--color-brand-500); }
.dm-decision.is-approve {
  border-color: #B47200;
  background: rgba(180, 114, 0, 0.06);
}
.dm-decision.is-approve .dm-node-ico { color: #B47200; }
.dm-decision.is-deny {
  border-color: #C5221F;
  background: rgba(197, 34, 31, 0.06);
}
.dm-decision.is-deny .dm-node-ico { color: #C5221F; }
.dm-bindings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
}
.dm-binding {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-11);
}
.dm-binding .ms {
  font-size: var(--type-14) !important;
  width: 14px;
  color: var(--kye-color-brand);
}
.dm-binding-k {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
}
.dm-binding code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  background: rgba(95, 99, 104, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--kye-color-text);
}
:root[data-theme="dark"] .dm-chain,
:root[data-theme="dark"] .dm-node,
:root[data-theme="dark"] .dm-bindings {
  background: var(--surface-solid);
  border-color: var(--line);
}

/* ============================================================
   §FINAL-58 — Connector Hub™ explorer
   ============================================================ */
.ce-host { display: block; }
.ce-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.ce-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 10px 14px;
}
.ce-search .ms { font-size: var(--type-18) !important; width: 18px; color: var(--kye-color-text-muted); }
.ce-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--type-14);
  color: var(--kye-color-text);
  min-width: 0;
}
.ce-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  color: var(--kye-color-text-muted);
  white-space: nowrap;
}
.ce-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--type-12);
  font-weight: 700;
  color: var(--kye-color-text-muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ce-cat .ms { font-size: var(--type-14) !important; width: 14px; }
.ce-cat:hover { background: var(--kye-color-paper-2); color: var(--kye-color-text); }
.ce-cat.is-on {
  background: var(--kye-color-brand);
  border-color: var(--kye-color-brand);
  color: white;
}
.ce-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ce-row {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.ce-row:hover { border-color: var(--kye-color-brand); transform: translateY(-1px); }
.ce-row[hidden] { display: none; }
.ce-row-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ce-name { font-size: var(--type-14); font-weight: 800; color: var(--kye-color-text); }
.ce-tier {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(95, 99, 104, 0.10);
  color: var(--kye-color-text-muted);
}
.ce-tier-flagship  { background: color-mix(in srgb, var(--color-accent-soft) 14%, transparent);  color: var(--color-brand-500); }
.ce-tier-reference { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.ce-tier-partner   { background: rgba(180, 114, 0, 0.14);  color: #B47200; }
.ce-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--type-11); }
.ce-type {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  background: rgba(95, 99, 104, 0.10);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--kye-color-text);
}
.ce-status, .ce-side {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
}
.ce-status.is-active { background: color-mix(in srgb, var(--color-accent-soft) 14%, transparent);  color: var(--color-brand-500); }
.ce-status.is-draft  { background: rgba(95, 99, 104, 0.12); color: var(--kye-color-text-muted); }
.ce-status.is-warn   { background: rgba(180, 114, 0, 0.14); color: #B47200; }
.ce-status.is-deny   { background: rgba(197, 34, 31, 0.14); color: #C5221F; }
.ce-side.is-low  { background: color-mix(in srgb, var(--color-accent-soft) 10%, transparent); color: var(--color-brand-500); }
.ce-side.is-med  { background: rgba(180, 114, 0, 0.10); color: #B47200; }
.ce-side.is-high { background: rgba(197, 34, 31, 0.10); color: #C5221F; }
.ce-desc { margin: 0; font-size: var(--type-12); line-height: 1.5; color: var(--kye-color-text-muted); }
.ce-empty {
  margin-top: 16px;
  padding: 16px;
  text-align: center;
  background: var(--kye-color-paper);
  border: 1px dashed var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  color: var(--kye-color-text-muted);
  font-size: var(--type-13);
}
:root[data-theme="dark"] .ce-search,
:root[data-theme="dark"] .ce-cat,
:root[data-theme="dark"] .ce-row,
:root[data-theme="dark"] .ce-empty { background: var(--surface-solid); border-color: var(--line); }

/* ============================================================
   §FINAL-59 — Blast Radius Map™ visual viewer
   ============================================================ */
.br-host { display: block; }
.br-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--kye-space-4);
}
@media (max-width: 760px) { .br-shell { grid-template-columns: 1fr; } }
.br-h {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kye-color-text-muted);
  margin: 0 0 var(--kye-space-2);
}
.br-controls { display: flex; flex-direction: column; gap: 14px; }
.br-fs {
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 10px 12px 12px;
  margin: 0;
  background: var(--kye-color-paper);
}
.br-fs legend {
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.04em;
  color: var(--kye-color-brand); padding: 0 6px;
}
.br-fs select {
  width: 100%; font: inherit; font-size: var(--type-13);
  padding: 6px 8px;
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  background: var(--kye-color-paper);
  color: var(--kye-color-text);
}
.br-subject-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-left: 3px solid #C5221F;
  border-radius: var(--kye-radius-2);
  padding: 12px 14px;
}
.br-subject-type {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #C5221F;
}
.br-subject-ref code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); background: rgba(95, 99, 104, 0.08);
  padding: 2px 6px; border-radius: 4px;
  color: var(--kye-color-text); word-break: break-all;
  display: inline-block; margin-top: 4px;
}
.br-subject-hint {
  margin: 8px 0 0; font-size: var(--type-12); line-height: 1.5;
  color: var(--kye-color-text-muted);
}
.br-outputs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.br-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.br-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.br-card header { display: flex; align-items: center; gap: 8px; }
.br-card header .ms {
  font-size: var(--type-18) !important; width: 18px;
  color: var(--kye-color-brand);
}
.br-card header strong {
  font-size: var(--type-12); font-weight: 800; color: var(--kye-color-text);
}
.br-card ul, .br-card ol {
  margin: 0; padding-left: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.br-card li {
  font-size: var(--type-12); line-height: 1.4; color: var(--kye-color-text);
}
.br-card code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); background: rgba(95, 99, 104, 0.08);
  padding: 1px 5px; border-radius: 3px;
  color: var(--kye-color-text); word-break: break-word;
}
.br-revocations {
  border-left: 3px solid #B47200;
  grid-column: 1 / -1;
}
.br-revocations header strong { color: #B47200; }
.br-revocations header .ms { color: #B47200; }
:root[data-theme="dark"] .br-fs,
:root[data-theme="dark"] .br-subject-card,
:root[data-theme="dark"] .br-card { background: var(--surface-solid); border-color: var(--line); }

/* ============================================================
   §FINAL-60 — Evidence Pack Preview viewer
   ============================================================ */
.ep-host { display: block; }
.ep-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--kye-space-4);
}
@media (max-width: 760px) { .ep-shell { grid-template-columns: 1fr; } }
.ep-controls { display: flex; flex-direction: column; gap: 12px; }
.ep-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.ep-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  background: var(--kye-color-paper);
  color: var(--kye-color-text);
  font: inherit; font-size: var(--type-13); font-weight: 700;
  cursor: pointer; text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.ep-action-btn:hover {
  background: var(--kye-color-paper-2);
  border-color: var(--kye-color-brand);
  transform: translateY(-1px);
}
.ep-action-btn .ms {
  font-size: var(--type-18) !important; width: 18px;
  color: var(--kye-color-brand);
}
.ep-pack-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 12px 14px;
}
.ep-pack-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.04em;
  color: var(--kye-color-text-muted); text-transform: uppercase;
}
.ep-pack-id-val code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); background: rgba(95, 99, 104, 0.08);
  padding: 1px 5px; border-radius: 3px; color: var(--kye-color-text);
  word-break: break-all; display: inline-block; margin-top: 4px;
}
.ep-pack-meta { margin: 8px 0; font-size: var(--type-12); color: var(--kye-color-text-muted); }
.ep-output {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 14px 16px;
  min-height: 180px;
}
.ep-output h4 {
  margin: 0 0 8px; font-size: var(--type-13); font-weight: 800;
  display: flex; align-items: center; gap: 6px;
  color: var(--kye-color-text);
}
.ep-output h4 .ms { font-size: var(--type-18) !important; width: 18px; }
.ep-output.is-allow h4 .ms { color: var(--color-brand-500); }
.ep-output.is-fail  h4 .ms { color: #C5221F; }
.ep-output pre {
  margin: 0;
  background: rgba(95, 99, 104, 0.06);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 10px 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); line-height: 1.5;
  color: var(--kye-color-text);
  overflow: auto; max-height: 300px;
}
.ep-output ul, .ep-output ol {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.ep-output li { font-size: var(--type-12); line-height: 1.5; color: var(--kye-color-text); }
.ep-output code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); background: rgba(95, 99, 104, 0.08);
  padding: 1px 5px; border-radius: 3px; color: var(--kye-color-text);
}
.ep-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11); font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.ep-status.is-allow { background: color-mix(in srgb, var(--color-accent-soft) 14%, transparent); color: var(--color-brand-500); }
.ep-status.is-fail  { background: rgba(197, 34, 31, 0.14); color: #C5221F; }
:root[data-theme="dark"] .ep-action-btn,
:root[data-theme="dark"] .ep-pack-card,
:root[data-theme="dark"] .ep-output { background: var(--surface-solid); border-color: var(--line); }

/* §FINAL-61 — top-bar group dividers */
.top-bar-nav .tb-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--kye-color-line);
  margin: 0 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
@media (max-width: 1100px) { .top-bar-nav .tb-divider { display: none; } }

/* §FINAL-62 prim-card duplicates removed — superseded by §FINAL-64
 * below. Retained only the page-specific #build-with-kye CTA + lede
 * rules originally co-located with §FINAL-62. (v2 audit finding #4/#5)
 * --- legacy block removed ---
 * (Original §FINAL-62 hist note follows for context, no rules) */
/* The grid of prim-cards on the landing-page Build / Try-It /
   audience-routing sections was visually uneven because:
     - Card titles wrapped to 1 vs 2 lines depending on length
       ("SDKs" vs "KYE Plugin Marketplace™"), so card heights
       drifted and the grid looked ragged.
     - The ™ glyph inside .prim-card strong used the body default
       --tm-em (0.55) but appeared next to display titles using the
       display token (0.40) — visually inconsistent.
   Fixes:
     - Reserve at least 2 lines of title height so cards align.
     - Pin --tm-em / --tm-rise on .prim-card strong to a single
       consistent display value.
     - Clamp description span font-size + line-height.
     - Stretch grid items to equal heights via grid-auto-rows.
   (Rules removed; §FINAL-64 below is the canonical .prim-card pass.) */
/* Make sure CTA buttons in Build / Try-It rows render at one size */
#build-with-kye .hero-cta .btn,
#try-it       .hero-cta .btn {
  font-size: var(--type-13) !important;
}
/* The two ledes on the Build section should differ only by emphasis,
   not by size. */
#build-with-kye > .section-body > .container > .lede,
#build-with-kye > .section-body > .container > .lede + .lede {
  font-size: var(--type-16);
  line-height: 1.55;
}

/* ============================================================
   §FINAL-63 — runtime decision card overflow + landing-card
   white-space tightening
   ============================================================
   Two reports:
     - "runtime decision cards cut off out of frame" — the
       agent-purchase simulator's decision badge and the
       reason_code / obligations meta both overflowed when the
       label was long (allow_with_constraints, basket_hash_binding,
       merchant_category_pinned).
     - "too much white space in cards wasting real estate on
       landing" — the §FINAL-62 min-height that reserved 2 lines for
       every prim-card title was over-defensive: short titles
       ("SDKs", "Apps") inherited 2 lines of empty space.
   Fixes:
     - Decision badge wraps when long; meta code wraps inside its
       grid cell.
     - prim-card title min-height removed; prim-grid uses
       grid-auto-rows: 1fr so all cards in a row match the tallest
       card without forcing every title to reserve 2 lines.
     - prim-card vertical padding tightened. */

/* Decision card — clamp to host width, allow long labels to wrap */
.aps-decision-card {
  padding: 12px 14px;
  min-width: 0;
  overflow: hidden;
}
.aps-decision-badge {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: var(--type-13);
  padding: 7px 12px;
}
.aps-decision-meta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 520px) {
  .aps-decision-meta { grid-template-columns: minmax(0, 1fr); }
}
.aps-decision-meta > div { min-width: 0; }
.aps-decision-meta code {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.aps-meta-k { white-space: nowrap; }

/* §FINAL-63 prim-card duplicates removed — superseded by §FINAL-64
 * below. (v2 audit finding #4/#5) */

/* ============================================================
   §FINAL-64 — prim-card real-estate fix (overrides §FINAL-62/63)
   ============================================================
   Recurring complaint: "card heights too much white space looks so
   cluttered". Two prior passes over-defended:
     - §FINAL-62 reserved 2 lines of title height (wasted on short
       titles).
     - §FINAL-63 added grid-auto-rows: 1fr which forced every card
       to the tallest card's height (wasted at the bottom of short
       cards).
   Strategy: let cards size to their content. The default grid
   behaviour stretches cards within a row to match the tallest in
   that row; different rows can have different heights. That's the
   right rhythm — no phantom whitespace, still visually coherent. */
.prim-grid {
  grid-auto-rows: auto;       /* override the §FINAL-63 1fr forcing */
  align-items: stretch;       /* default — cards in same row match */
}
.prim-card {
  padding: 12px 14px;         /* tighter than the previous 14px 16px */
  gap: 2px 12px;
  align-self: stretch;
}
.prim-card .ms { margin-top: 0; }
.prim-card strong {
  min-height: 0;
  line-height: 1.25;
  margin-top: 2px;
  margin-bottom: 4px;
}
.prim-card span {
  line-height: 1.4;
  margin-bottom: 4px;
}
.prim-card em {
  margin-top: 4px;            /* was 6px */
  font-size: var(--type-11);          /* slightly tighter CTA */
}

/* ============================================================
   §FINAL-65 — dark-mode top-bar contrast (mobile + desktop)
   ============================================================
   Bug: ".top-bar" hardcodes background: rgba(255,255,255,0.92) which
   doesn't theme-switch. In dark mode the bar stayed near-white but
   .tb-link text used --text-muted (#aab2cc — light grey), making the
   menu invisible / un-tappable on mobile dark mode.
   Fix: theme-aware overrides for the bar background, link colour,
   hover/active states, brand colour, divider, and button surfaces. */
:root[data-theme="dark"] .top-bar {
  background: rgba(15, 20, 36, 0.92);     /* dark surface, blurred */
  border-bottom-color: var(--line);
}
:root[data-theme="dark"] .tb-link {
  color: var(--text-muted);                /* #aab2cc — readable on dark */
}
:root[data-theme="dark"] .tb-link:hover {
  background: var(--surface-3);            /* solid var(--color-neutral-800) */
  color: var(--text);                      /* var(--color-neutral-100) */
}
:root[data-theme="dark"] .tb-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);                    /* violet-400 — high contrast */
}
:root[data-theme="dark"] .tb-link.is-active .ms { color: var(--accent); }
:root[data-theme="dark"] .top-bar .brand,
:root[data-theme="dark"] .top-bar .brand-name {
  color: var(--text);
}
:root[data-theme="dark"] .top-bar-nav .tb-divider {
  background: var(--line);                 /* visible against dark bar */
}
/* Header right-side action buttons (GitHub, theme toggle, drawer
   toggle): make sure their borders + icons are visible on dark. */
:root[data-theme="dark"] .top-bar .tb-cta {
  color: var(--text-muted);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .top-bar .tb-cta:hover {
  background: var(--surface-3);
  color: var(--text);
}
:root[data-theme="dark"] .top-bar .theme-toggle,
:root[data-theme="dark"] .top-bar .drawer-toggle {
  color: var(--text);                      /* SVG strokes use currentColor */
}
:root[data-theme="dark"] .top-bar .theme-toggle:hover,
:root[data-theme="dark"] .top-bar .drawer-toggle:hover {
  background: var(--surface-3);
}
/* Mobile-specific: ensure the horizontally-scrollable nav strip is
   tap-target-readable when the OS prefers dark and the user hasn't
   toggled to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .top-bar {
    background: rgba(15, 20, 36, 0.92);
    border-bottom-color: var(--line);
  }
  :root:not([data-theme="light"]) .tb-link { color: var(--text-muted); }
  :root:not([data-theme="light"]) .tb-link.is-active {
    background: var(--accent-soft); color: var(--accent);
  }
}

/* ============================================================
   §FINAL-66 — clipboard copy buttons + widget code snippets
   ============================================================ */
.code-snippet {
  position: relative;
  margin-top: 14px;
}
.code-snippet pre {
  margin: 0;
  padding: 14px 16px;
  padding-right: 88px;          /* room for the absolute-positioned button */
  background: var(--kye-color-paper-2);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-12);
  line-height: 1.55;
  color: var(--kye-color-text);
  overflow-x: auto;
  max-height: 360px;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--kye-color-line);
  background: var(--kye-color-paper);
  color: var(--kye-color-text-muted);
  font: inherit;
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.copy-btn .ms {
  font-size: var(--type-14) !important;
  width: 14px;
}
.copy-btn:hover {
  background: var(--kye-color-paper-2);
  color: var(--kye-color-text);
  border-color: var(--kye-color-brand);
}
.copy-btn.is-copied {
  background: color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
  color: var(--color-brand-500);
  border-color: color-mix(in srgb, var(--color-focus-ring) 40%, transparent);
}
:root[data-theme="dark"] .code-snippet pre,
:root[data-theme="dark"] .copy-btn { background: var(--surface-solid); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .copy-btn { color: var(--text-muted); }
:root[data-theme="dark"] .copy-btn:hover { background: var(--surface-3); color: var(--text); }

/* Widget section "tabs" — language switcher for code snippets */
.widget-tabs {
  display: inline-flex;
  border: 1px solid var(--kye-color-line);
  border-radius: 999px;
  padding: 2px;
  margin-top: 12px;
  background: var(--kye-color-paper);
}
.widget-tab {
  padding: 5px 14px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--type-11);
  font-weight: 700;
  color: var(--kye-color-text-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
.widget-tab.is-on { background: var(--kye-color-brand); color: white; }
.widget-tab:hover:not(.is-on) { color: var(--kye-color-text); }
.code-snippet[hidden] { display: none !important; }
:root[data-theme="dark"] .widget-tabs { background: var(--surface-solid); border-color: var(--line); }

/* §FINAL-67 — top-bar group separator label (small caps, between
   dividers). Helps the user see the structure of a 32-item nav. */
.top-bar-nav .tb-group-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--kye-color-text-muted);
  padding: 0 4px;
  flex-shrink: 0;
  opacity: 0.65;
}
@media (max-width: 1100px) { .top-bar-nav .tb-group-label { display: none; } }
:root[data-theme="dark"] .top-bar-nav .tb-group-label { color: var(--text-muted); }

/* §FINAL-68 — widgets-page compression: collapsible code snippets +
   tighter section padding so the page reads as a flow not a wall. */
body .w-snippet {
  margin-top: 14px;
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  background: var(--kye-color-paper);
  overflow: hidden;
}
body .w-snippet > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-12);
  font-weight: 700;
  color: var(--kye-color-text);
  user-select: none;
}
body .w-snippet > summary::-webkit-details-marker { display: none; }
body .w-snippet > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--kye-color-text-muted);
  font-size: var(--type-11);
}
body .w-snippet:not([open]) > summary::after { content: '▸'; }
body .w-snippet[open] > summary {
  border-bottom: 1px solid var(--kye-color-line);
}
body .w-snippet > summary .ms {
  font-size: var(--type-16) !important;
  width: 16px;
  color: var(--kye-color-brand);
}
body .w-snippet .code-snippet {
  margin: 0;
  padding: 12px 14px;
}
body .w-snippet .code-snippet pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 88px 0 0;
}
body .w-snippet .copy-btn {
  top: 8px;
  right: 8px;
}
:root[data-theme="dark"] body .w-snippet { background: var(--surface-solid); border-color: var(--line); }

/* Compress widgets-page section vertical rhythm */
body[class] #role,
body[class] #sim,
body[class] #dm,
body[class] #explorer,
body[class] #blast,
body[class] #evidence {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* ============================================================
   §FINAL-69 — global flow compression
   ============================================================
   Caller report: "each and all pages must read as a flow not a wall".
   Root: .section had padding 96px 0 (192px stacked per section);
   with 5-8 sections per page that adds up to thousands of vertical
   pixels of dead chrome. Plus .hero padded 96/64. The pages literally
   read as a wall because the chrome dwarfs the content.

   Fix: compress every section to a tighter rhythm site-wide. This
   overrides the original 96px and the per-page §FINAL-68. Hero gets
   a lighter top/bottom too. h-section gets a tighter top margin so
   the eyebrow + heading land closer together.
   (.section padding lives at line 224 — single source of truth.) */
.section-body { padding-top: 8px; }
/* .hero padding lives at line 285 (canonical). Earlier 56px override
 * here was silently nuking the 96/64 design — measured on 15/15 priority
 * pages by the v2 CSS audit. Removed. */
.hero h1 { margin-top: 14px; }
.h-section { margin: 6px 0 10px; }
.lede { margin-top: 8px; }
.section .eyebrow { margin-top: 0; }
@media (max-width: 720px) {
  .section { padding: 36px 0; }
  .hero { padding: 44px 0 32px; }
  .h-section { font-size: var(--type-28); }
}
/* Tighter spacing inside common card rhythms */
.eg-card { padding: 16px 18px; }
.eg-card + .eg-card { margin-top: 14px !important; }
.who-mini { padding: 14px 16px; }
.section-body > .container > .lede + .prim-grid,
.section-body > .container > .lede + .who-bullets,
.section-body > .container > .lede + .eg-stages { margin-top: 14px; }

/* ============================================================
   §FINAL-70 — widgets-page aggressive compression
   ============================================================
   User: "widget cards flow still not fix on prod still showing as
   before too much waste of space". §FINAL-68 + §FINAL-69 hit section
   padding but the widget *hosts themselves* (.rr-host, .aps-host,
   .br-host, .ep-host, .ce-host, .dm-host) carry their own internal
   padding + gaps that compound. Tighten all six. */

/* The widgets-page sections sit closer to each other */
body #role, body #sim, body #dm,
body #explorer, body #blast, body #evidence {
  padding-top: 28px;
  padding-bottom: 28px;
}
body #role .section-body,
body #sim .section-body,
body #dm .section-body,
body #explorer .section-body,
body #blast .section-body,
body #evidence .section-body { padding-top: 4px; }

/* Role-router cards — tighter card padding + grid gap */
.rr-grid { gap: 10px; margin-top: 10px; }
.rr-card { padding: 12px 14px; gap: 6px; }
.rr-card .rr-you { font-size: var(--type-12); line-height: 1.4; }

/* Agent-purchase simulator shell — more compact */
.aps-host { padding: 14px; }
.aps-shell { gap: var(--kye-space-3); }
.aps-controls { gap: 8px; }
.aps-fs { padding: 8px 10px 10px; }
.aps-decision-card { padding: 10px 12px; }
.aps-decision-meta { margin-top: 8px; gap: 8px; }
.aps-output-block .codeblock { max-height: 240px; }
.aps-output-block > summary { padding: 9px 12px; font-size: var(--type-12); }

/* Decision Map™ — tighter chain padding */
.dm-chain { padding: 10px; }
.dm-node { padding: 8px 10px; margin: 4px; min-width: 140px; }
.dm-bindings { padding: 8px 12px; margin-top: 8px; }

/* Connector explorer — tighter rows */
.ce-controls { margin-bottom: 12px; gap: 8px; }
.ce-search { padding: 8px 12px; }
.ce-row { padding: 10px 12px; gap: 6px; }

/* Blast Radius — tighter cards */
.br-host .br-shell { gap: var(--kye-space-3); }
.br-fs { padding: 8px 10px 10px; }
.br-subject-card { padding: 10px 12px; }
.br-card { padding: 10px 12px; gap: 6px; }
.br-grid { gap: 10px; }

/* Evidence Pack viewer */
.ep-shell { gap: var(--kye-space-3); }
.ep-pack-card { padding: 10px 12px; }
.ep-action-btn { padding: 8px 12px; font-size: var(--type-12); }
.ep-output { padding: 12px 14px; min-height: 140px; }
.ep-output pre { max-height: 240px; padding: 9px 11px; }

/* Collapsed code snippets sit tight */
body .w-snippet { margin-top: 10px; }
body .w-snippet > summary { padding: 8px 12px; font-size: var(--type-12); }
body .w-snippet .code-snippet { padding: 8px 10px; }

/* Lede on widget sections is shorter */
body[class] #role  .lede,
body[class] #sim   .lede,
body[class] #dm    .lede,
body[class] #explorer .lede,
body[class] #blast .lede,
body[class] #evidence .lede { font-size: var(--type-14); line-height: 1.45; max-width: 720px; }

/* Mobile compress further */
@media (max-width: 720px) {
  body #role, body #sim, body #dm,
  body #explorer, body #blast, body #evidence {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

/* ============================================================
   §FINAL-71 — widget chrome strip + ecosystem colour-coding
   ============================================================
   User: "widgets boxes cards whatever its called is just wasting so
   much space its disproportionate to the amount of text inside them
   and is wrong … its as if there is a frame and these cards are
   inside that frame".

   Diagnosis: every widget host (.aps-host, .br-host, .ep-host) had
   its own background + border + padding. The internal cards
   (.aps-fs, .aps-decision-card, .br-card, .ep-pack-card) ALSO had
   background + border + padding. Two layers of chrome stacked. The
   inner cards looked like cards-inside-a-frame.

   Fix: strip the outer host chrome. The widgets are sections on a
   page that already has its own visual rhythm; they don't need
   their own frame. Inner cards stand alone, breathing on the page
   background. */
.aps-host,
.br-host,
.ep-host,
.dm-host,
.rr-host,
.ce-host {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* And the .aps-decision-card / .br-subject-card / .ep-pack-card —
   keep light-touch chrome (a thin bottom border + inner padding)
   instead of full bordered-box treatment so they read as a section
   not a card-in-a-frame. */
.aps-decision-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--kye-color-line);
  border-radius: 0;
  padding: 0 0 12px;
  margin-bottom: 12px;
}
.br-subject-card {
  background: transparent;
  border: none;
  border-left: 3px solid #C5221F;
  border-radius: 0;
  padding: 6px 0 6px 12px;
}
.ep-pack-card {
  background: transparent;
  border: none;
  border-left: 3px solid var(--kye-color-brand);
  border-radius: 0;
  padding: 6px 0 6px 12px;
}

/* Also reduce the boxiness of .aps-fs / .br-fs (control fieldsets) —
   keep the legend visible but thin out the surrounding box. */
.aps-fs,
.br-fs {
  background: transparent;
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 8px 10px 10px;
}

/* Output panels: light-touch border, no heavy bg */
.aps-output-block,
.br-card,
.ep-output {
  background: transparent !important;
  border: 1px solid var(--kye-color-line) !important;
}

/* ============================================================
   §FINAL-72 — ecosystem layer colour-coding (uniform across
   ecosystem.html, connector-profiles.html, and the index landing
   prim-cards in #build-with-kye / #try-it).

   Like hospital codes: every reference to a layer carries the same
   colour. Reduces cognitive load so a visitor sees orange and
   thinks "Connectors", sees teal and thinks "Profiles", etc.

   L1 Core Protocol  — brand green   (var(--color-brand-500))
   L2 Profiles       — cyan          (#00ACC1)
   L3 Connector Profiles — teal      (#009688)
   L4 Connectors     — orange        (#FF6D00)
   L5 Apps           — indigo        (#6366f1)
      Plugins        — violet        (#8E24AA)
      Widgets        — amber         (#F4B400)
      KYE Cloud™     — accent
   ============================================================ */
[data-layer="l1"], [data-layer="core"]    { --layer-c: var(--color-brand-500); }
[data-layer="l2"], [data-layer="profile"] { --layer-c: #00ACC1; }
[data-layer="l3"], [data-layer="connector-profile"] { --layer-c: #009688; }
[data-layer="l4"], [data-layer="connector"] { --layer-c: #FF6D00; }
[data-layer="l5"], [data-layer="app"]     { --layer-c: #6366f1; }
[data-layer="plugin"]                     { --layer-c: #8E24AA; }
[data-layer="widget"]                     { --layer-c: #F4B400; }
[data-layer]:is(.prim-card) {
  border-left: 3px solid var(--layer-c, var(--kye-color-brand));
}
[data-layer]:is(.prim-card) .ms { color: var(--layer-c, var(--kye-color-brand)) !important; }
[data-layer]:is(.prim-card) em  { color: var(--layer-c, var(--kye-color-brand)); }
[data-layer]:is(.prim-card):hover { border-color: var(--layer-c, var(--kye-color-brand)); }
/* Layer chip — small inline pill for "L1 Core" etc. */
.layer-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--layer-c, var(--kye-color-brand)) 14%, transparent);
  color: var(--layer-c, var(--kye-color-brand));
  margin-right: 6px;
  vertical-align: middle;
}

/* ============================================================
   §FINAL-73 — restore inner widget-card chrome (§FINAL-71 went too
   far). User: "those boxes was evidence pack previews but in widget
   3 all those cards are the ui of widget it seems".

   Keep §FINAL-71's outer-host strip (.aps-host / .br-host / .ep-host
   etc) — that fixed the genuine frame-in-frame. But restore the
   inner cards: those cards ARE the widget UI. The Decision Map
   chain nodes, the runtime-decision card, the evidence-pack output
   panels, the blast-radius output cards — without their borders +
   backgrounds they don't read as widget output, they read as bare
   inline text that happens to be near the page.
   ============================================================ */
.aps-decision-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-radius: var(--kye-radius-2);
  padding: 12px 14px;
  margin-bottom: 0;
}
.aps-output-block {
  background: var(--kye-color-paper) !important;
  border: 1px solid var(--kye-color-line) !important;
  border-radius: var(--kye-radius-2) !important;
}
.br-subject-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-left: 3px solid #C5221F;
  border-radius: var(--kye-radius-2);
  padding: 10px 12px;
}
.br-card {
  background: var(--kye-color-paper) !important;
  border: 1px solid var(--kye-color-line) !important;
  border-radius: var(--kye-radius-2) !important;
  padding: 10px 12px;
}
.ep-pack-card {
  background: var(--kye-color-paper);
  border: 1px solid var(--kye-color-line);
  border-left: 3px solid var(--kye-color-brand);
  border-radius: var(--kye-radius-2);
  padding: 10px 12px;
}
.ep-output {
  background: var(--kye-color-paper) !important;
  border: 1px solid var(--kye-color-line) !important;
  border-radius: var(--kye-radius-2) !important;
}
:root[data-theme="dark"] .aps-decision-card,
:root[data-theme="dark"] .aps-output-block,
:root[data-theme="dark"] .br-subject-card,
:root[data-theme="dark"] .br-card,
:root[data-theme="dark"] .ep-pack-card,
:root[data-theme="dark"] .ep-output {
  background: var(--surface-solid) !important;
  border-color: var(--line) !important;
}

/* §FINAL-74 — Decision Map™ node empty-space fix on mobile.
   Bug: .dm-node has `flex: 1 1 180px` which on a column flex
   container (mobile @ <600px) makes each card grow to fill
   available main-axis space. With 7 nodes in a single column the
   flex-grow distributes vertical space across them — every card
   stretches tall, content sits at the top, half the card is empty.
   Fix: cards size to content on mobile. */
@media (max-width: 600px) {
  .dm-chain { align-items: stretch; gap: 4px; }
  .dm-node {
    flex: 0 0 auto;        /* size to content, no grow / shrink */
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 8px 10px;     /* tighter */
  }
  .dm-bindings { padding: 8px 10px; gap: 6px; }
}
/* Desktop also benefits from clamped node height when the chain
   wraps to a 2nd row — the row-stretch can otherwise leave gaps. */
.dm-node { align-self: start; }

/* §FINAL-75 — extend data-layer colour-coding to .eg-card so the
   apps and connector-profiles pages get the same hospital-code
   visual rhythm as ecosystem.html and the landing. */
[data-layer]:is(.eg-card) {
  border-left: 3px solid var(--layer-c, var(--kye-color-brand));
}
[data-layer]:is(.eg-card) .uc-h .accent { color: var(--layer-c, var(--kye-color-brand)); }
[data-layer]:is(.eg-card):hover { border-color: var(--layer-c, var(--kye-color-brand)); }

/* ============================================================
   §FINAL-76 — inline entity colour-coding.

   Extends the hospital-code rhythm beyond cards, into prose: any
   first-prominent-use of an ecosystem entity (an App, Connector,
   Plugin, Profile name) is wrapped in <span class="layer-name"
   data-layer="..."> so it inherits the same --layer-c token used
   by .prim-card / .eg-card.

   Two helpers:
     .layer-name — inline coloured text (no chip), keeps weight,
                   adds a subtle underline-on-hover so the rhythm
                   reads as deliberate not as "broken link".
     .layer-tag  — small uppercase pill, used as a prefix label
                   ("APP", "CONNECTOR", "PLUGIN") in card headers
                   or list items where space allows.

   Scope rules (enforced by hand, not CSS):
     - Code snippets stay neutral — syntax highlighting wins.
     - Framework tags (SOC 2, PCI DSS, GDPR, ISO 27001…) stay
       neutral — those belong to a different taxonomy
       (regulatory) and conflating them dilutes the layer signal.
     - Audience / sector / role tags stay neutral for the same
       reason.
     - First-prominent-use per section, not every mention —
       otherwise the page becomes a rainbow.
   ============================================================ */
.layer-name {
  color: var(--layer-c, var(--kye-color-brand));
  font-weight: 600;
}
.layer-name:hover {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--layer-c, var(--kye-color-brand)) 60%, transparent);
  text-underline-offset: 2px;
}
.layer-tag {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--layer-c, var(--kye-color-brand)) 12%, transparent);
  color: var(--layer-c, var(--kye-color-brand));
  vertical-align: 1px;
  white-space: nowrap;
  margin-right: 4px;
}
/* Dark-mode lift: tint backgrounds need a touch more saturation. */
:root[data-theme="dark"] .layer-tag,
:root[data-theme="dark"] .layer-chip {
  background: color-mix(in srgb, var(--layer-c, var(--kye-color-brand)) 22%, transparent);
}

/* ============================================================
   §FINAL-77 — KYE badge system.

   Three categories, three sizes. Visual rule: badges describe
   capabilities or conformance, never imply third-party
   endorsement / regulatory approval / certification by another
   body. The CSS distinguishes the three categories so visitors
   can read trust at a glance.

   Categories (data-badge-cat):
     capability — what KYE supports (Decision Map™, MCP-ready, …)
     profile    — where KYE applies (Payment Profile™, Legal Profile™…)
     conformance — what has been verified (Core Conformant™, Certified™)

   Sizes (data-badge-size):
     sm — feature strips, hero rows
     md — profile cards
     lg — certification cards / trust marks

   The small disclaimer at the foot of every certification badge
   group reminds the reader that profile/capability badges are
   support-level, not regulatory approval.
   ============================================================ */
.kye-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}
.kye-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--kye-color-line);
  background: var(--kye-color-paper);
  color: var(--kye-color-text);
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.kye-badge .ms {
  font-size: var(--type-14);
  opacity: 0.85;
}
/* Sizes */
.kye-badge[data-badge-size="sm"]  { font-size: var(--type-11); padding: 4px 9px; line-height: 1.4; }
.kye-badge[data-badge-size="md"]  { font-size: var(--type-12); padding: 6px 11px; }
.kye-badge[data-badge-size="lg"]  { font-size: var(--type-13); padding: 8px 14px; }

/* Category accents */
.kye-badge[data-badge-cat="capability"] {
  border-color: color-mix(in srgb, var(--kye-color-brand) 30%, var(--kye-color-line));
  color: color-mix(in srgb, var(--kye-color-brand) 80%, var(--kye-color-text));
}
.kye-badge[data-badge-cat="capability"]:hover {
  border-color: var(--kye-color-brand);
  background: color-mix(in srgb, var(--kye-color-brand) 7%, var(--kye-color-paper));
}
.kye-badge[data-badge-cat="profile"] {
  border-color: color-mix(in srgb, #009688 30%, var(--kye-color-line));
  color: color-mix(in srgb, #009688 80%, var(--kye-color-text));
}
.kye-badge[data-badge-cat="profile"]:hover {
  border-color: #009688;
  background: color-mix(in srgb, #009688 7%, var(--kye-color-paper));
}
.kye-badge[data-badge-cat="conformance"] {
  border-color: color-mix(in srgb, #6366f1 30%, var(--kye-color-line));
  color: color-mix(in srgb, #6366f1 80%, var(--kye-color-text));
}
.kye-badge[data-badge-cat="conformance"]:hover {
  border-color: #6366f1;
  background: color-mix(in srgb, #6366f1 7%, var(--kye-color-paper));
}

/* Conformance ladder card layout (large + status rail) */
.kye-conformance-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.kye-conformance-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--kye-color-line);
  border-left: 3px solid #6366f1;
  border-radius: var(--kye-radius-2);
  background: var(--kye-color-paper);
}
.kye-conformance-card .name {
  font-weight: 700;
  font-size: var(--type-13);
}
.kye-conformance-card .desc {
  font-size: var(--type-12);
  color: var(--kye-color-muted);
  line-height: 1.45;
}
.kye-conformance-card .status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-11);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, #F4B400 16%, transparent);
  color: #B47200;
}
.kye-conformance-card[data-conformance-status="active"] .status {
  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
  color: var(--color-brand-500);
}

/* Disclaimer rail below certification badge groups. */
.kye-badge-disclaimer {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--kye-color-brand);
  background: color-mix(in srgb, var(--kye-color-brand) 6%, transparent);
  border-radius: 0 var(--kye-radius-2) var(--kye-radius-2) 0;
  font-size: var(--type-12);
  color: var(--kye-color-text);
}
.kye-badge-disclaimer strong { font-weight: 700; }

/* Dark mode lifts the badge backgrounds. */
:root[data-theme="dark"] .kye-conformance-card {
  background: var(--surface-solid, var(--kye-color-paper));
}
:root[data-theme="dark"] .kye-badge {
  background: color-mix(in srgb, var(--kye-color-paper) 70%, transparent);
}

/* ============================================================
   §FINAL-78 — URN code overflow fix on narrow viewports.
   User report: schema URN on compliance-card.html runs off the
   edge on mobile. URNs are deliberately long colon-separated
   tokens; word-break needs to be allowed at any character so
   they wrap inside their container instead of forcing a
   horizontal scroll on the whole page.
   ============================================================ */
.cc-urn,
code[data-code="urn"],
code[data-code="path"],
code[data-code="profile"],
code[data-code="endpoint"],
code[data-code="field"],
code[data-code="type"] {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 600px) {
  .cc-urn,
  code[data-code="urn"],
  code[data-code="path"],
  code[data-code="profile"],
  code[data-code="endpoint"] {
    word-break: break-all;
    white-space: normal;
  }
}

/* ============================================================
   Homepage "Where KYE™ fits" tabbed widget (index.html). Inline
   styles previously injected mid-page; moved here for HTML validity. */
      .wk-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
      .wk-tab {
        appearance:none; cursor:pointer; font:inherit; font-size: var(--type-13); font-weight:600;
        padding:10px 16px; border-radius:999px; border:1px solid color-mix(in srgb,var(--text-muted,#888) 28%, transparent);
        background:var(--paper,var(--color-paper)); color:var(--text-muted,#6b7280);
        display:inline-flex; align-items:center; gap:8px;
        transition:background .15s, color .15s, border-color .15s, transform .12s;
      }
      .wk-tab:hover { transform:translateY(-1px); }
      .wk-tab .wk-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
      .wk-tab[aria-selected="true"] { color:var(--color-paper); border-color:transparent; box-shadow:0 2px 8px color-mix(in srgb,var(--text,#111) 12%, transparent); }
      .wk-tab[data-color="grey"][aria-selected="true"]   { background:#5f6b78; }
      .wk-tab[data-color="blue"][aria-selected="true"]   { background:#6366f1; }
      .wk-tab[data-color="purple"][aria-selected="true"] { background:#8E24AA; }
      .wk-tab[data-color="red"][aria-selected="true"]    { background:#C5221F; }
      .wk-tab[data-color="grey"]   .wk-dot { background:#5f6b78; }
      .wk-tab[data-color="blue"]   .wk-dot { background:#6366f1; }
      .wk-tab[data-color="purple"] .wk-dot { background:#8E24AA; }
      .wk-tab[data-color="red"]    .wk-dot { background:#C5221F; }

      .wk-panel {
        display:none; padding:22px 24px; margin-top:14px;
        border-radius:12px;
        border:1px solid color-mix(in srgb,var(--text-muted,#888) 18%, transparent);
        background:var(--paper,var(--color-paper));
        animation:wk-fade .25s ease;
      }
      .wk-panel[data-active] { display:block; }
      @keyframes wk-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
      .wk-panel-h { display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size: var(--type-18); font-weight:700; }
      .wk-panel-h .wk-dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
      .wk-q { font-size: var(--type-13); color:var(--text-muted,#6b7280); margin:0 0 10px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
      .wk-row { margin:8px 0; font-size: var(--type-14); line-height:1.6; }
      .wk-row strong { color:var(--text,#111); }
      .wk-egs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
      .wk-egs span { font-size: var(--type-12); padding:3px 10px; border-radius:999px; background:var(--paper-2,var(--color-neutral-100)); color:var(--text-muted,#4b5563); }

      .wk-bridge {
        margin-top:18px; padding:20px 22px; border-radius:12px;
        border:1px solid color-mix(in srgb,var(--color-brand-500) 30%, transparent);
        background:color-mix(in srgb,var(--color-brand-500) 8%, transparent);
      }
      .wk-bridge-h { font-size: var(--type-16); font-weight:700; color:var(--color-brand-500); margin:0 0 8px; display:flex; align-items:center; gap:8px; }
      .wk-bridge p { margin:0; font-size: var(--type-14); line-height:1.6; }
      .wk-takeaway { margin-top:18px; font-size: var(--type-16); line-height:1.5; }
      .wk-takeaway strong { background:linear-gradient(transparent 60%, color-mix(in srgb,var(--color-brand-500) 28%, transparent) 60%); padding:0 2px; }

      @media (max-width:680px) {
        .wk-tabs { gap:6px; }
        .wk-tab { padding:8px 12px; font-size: var(--type-12); }
        .wk-panel { padding:18px; }
        .wk-bridge { padding:16px 18px; }
      }


      /* Layer system — number badge + icon (cross-page) */
      .layer-num {
        display:inline-flex; align-items:center; justify-content:center;
        min-width:22px; height:20px; padding:0 6px;
        border-radius:5px;
        font-family: var(--font-mono);
        font-size: var(--type-11); font-weight:700; letter-spacing:0.04em;
        background: color-mix(in srgb, var(--text,#111) 7%, transparent);
        color: var(--text,#111);
        border: 1px solid color-mix(in srgb, var(--text,#111) 12%, transparent);
        flex:0 0 auto;
      }
      .layer-num + .ms,
      .layer-num + .layer-ms,
      .layer-num + .wk-ms { margin-left:6px; }

      /* Glossary: eyebrow with layer badge + symbol */
      .layer-eyebrow {
        display:inline-flex; align-items:center; gap:8px;
        padding-left:0;
      }
      .layer-eyebrow .layer-num { letter-spacing:0.06em; }
      .layer-ms { font-size: var(--type-18) !important; line-height:1; opacity:0.85; }

      /* Quick-jump pills with layer numbers */
      .layer-quick .cn-pill { padding-left:8px; }
      .layer-quick .cn-pill .layer-num { background: color-mix(in srgb, var(--text,#111) 6%, transparent); }

      /* where-kye-fits tabs: layer-num adopts tab colour cue */
      .wk-tab .layer-num {
        background: color-mix(in srgb, var(--text,#111) 6%, transparent);
        color: var(--text,#111);
        border-color: color-mix(in srgb, var(--text,#111) 12%, transparent);
      }
      .wk-tab[aria-selected="true"] .layer-num {
        background: rgba(255,255,255,0.18);
        color:var(--color-paper);
        border-color: rgba(255,255,255,0.30);
      }
      .wk-tab[aria-selected="true"] .wk-ms { color:var(--color-paper); }
      .wk-ms { font-size: var(--type-16) !important; line-height:1; }
      .wk-panel-h .layer-num { background: color-mix(in srgb, var(--text,#111) 6%, transparent); }
      .wk-panel-h .wk-ms { font-size: var(--type-18) !important; opacity:0.85; }

      /* Dark-mode adjustments */
      [data-theme="dark"] .layer-num {
        background: color-mix(in srgb, var(--color-paper) 8%, transparent);
        color: var(--color-neutral-200);
        border-color: color-mix(in srgb, var(--color-paper) 16%, transparent);
      }


      /* "Honest about the boundary" — green/red contrast cards.
         No left-border-against-text. Each card has a coloured header
         band with circular icon badge + eyebrow + title; body is a
         tick/cross list. Mobile stacks single-column. */
      .bd-grid {
        display:grid; grid-template-columns:1fr 1fr; gap:18px;
        margin-top:18px;
      }
      .bd-card {
        position:relative;
        padding:0;
        border-radius:16px;
        overflow:hidden;
        border:1px solid color-mix(in srgb,var(--text,#111) 10%, transparent);
        background:var(--paper,var(--color-paper));
        box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -16px color-mix(in srgb, var(--color-line-strong) 18%, transparent);
        transition: transform .18s ease, box-shadow .18s ease;
      }
      .bd-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-line) 5%, transparent), 0 14px 32px -18px rgba(15,23,42,0.28); }
      .bd-card--yes { border-color: color-mix(in srgb,var(--color-brand-500) 30%, transparent); }
      .bd-card--no  { border-color: color-mix(in srgb,#C5221F 28%, transparent); }
      .bd-card-head {
        display:flex; align-items:center; gap:14px;
        padding:18px 22px;
        color:var(--color-paper);
      }
      .bd-card--yes .bd-card-head { background: linear-gradient(135deg,var(--color-brand-500) 0%, var(--color-brand-600) 100%); }
      .bd-card--no  .bd-card-head { background: linear-gradient(135deg,#C5221F 0%, #9b1814 100%); }
      .bd-badge {
        display:inline-flex; align-items:center; justify-content:center;
        width:42px; height:42px; flex:0 0 42px;
        border-radius:50%;
        background: rgba(255,255,255,0.18);
        border:1px solid rgba(255,255,255,0.28);
      }
      .bd-badge .ms { font-size: var(--type-22) !important; color:var(--color-paper); line-height:1; }
      .bd-card-eyebrow {
        margin:0; font-size: var(--type-11); font-weight:600; letter-spacing:0.14em;
        text-transform:uppercase; color: rgba(255,255,255,0.78);
      }
      .bd-card-title {
        margin:2px 0 0; font-size: var(--type-18); font-weight:700; line-height:1.2; color:var(--color-paper);
      }
      .bd-list {
        list-style:none; padding:14px 22px 20px; margin:0;
        display:flex; flex-direction:column; gap:8px;
      }
      .bd-list li {
        position:relative;
        display:block;
        padding-left:28px;
        font-size: var(--type-14); line-height:1.5; color:var(--text,#111);
      }
      .bd-list li em { font-style:normal; font-size: var(--type-12); color:var(--text-muted,#6b7280); margin-left:4px; white-space:nowrap; }
      .bd-tick, .bd-cross {
        position:absolute; left:0; top:2px;
        font-size: var(--type-18) !important; line-height:1.35;
      }
      .bd-tick  { color:var(--color-brand-500); }
      .bd-cross { color:#C5221F; }
      [data-theme="dark"] .bd-card { background: color-mix(in srgb,var(--color-paper) 3%, transparent); }
      [data-theme="dark"] .bd-list li { color:var(--color-neutral-200); }
      @media (max-width:720px) {
        .bd-grid { grid-template-columns:1fr; gap:14px; }
        .bd-card-head { padding:16px 18px; gap:12px; }
        .bd-badge { width:38px; height:38px; flex-basis:38px; }
        .bd-badge .ms { font-size: var(--type-22) !important; }
        .bd-card-title { font-size: var(--type-16); }
        .bd-list { padding:12px 18px 16px; }
        .bd-list li { font-size: var(--type-14); }
      }

      /* KYE Ontology Profile™ landing — semantic stack + mapping-type tabs */
      .ont-stack {
        display:flex; flex-direction:column; gap:8px;
        margin-top:18px;
      }
      .ont-stack-row {
        display:flex; align-items:flex-start; gap:14px;
        padding:14px 16px;
        border-radius:12px;
        background: var(--paper,var(--color-paper));
        border:1px solid color-mix(in srgb, var(--text,#111) 10%, transparent);
      }
      .ont-stack-row > div { display:flex; flex-direction:column; gap:2px; }
      .ont-stack-row strong { font-size: var(--type-14); font-weight:700; }
      .ont-stack-row span  { font-size: var(--type-13); color:var(--text-muted,#6b7280); line-height:1.5; }
      .ont-stack-num {
        display:inline-flex; align-items:center; justify-content:center;
        width:34px; height:34px; flex:0 0 34px;
        border-radius:50%;
        background: color-mix(in srgb, var(--text,#111) 6%, transparent);
        font-family: var(--font-mono);
        font-size: var(--type-13); font-weight:700;
        color: var(--text,#111);
      }
      .ont-stack-row--accent {
        background: color-mix(in srgb,var(--color-brand-500) 6%, var(--paper,var(--color-paper)));
        border-color: color-mix(in srgb,var(--color-brand-500) 30%, transparent);
      }
      .ont-stack-row--accent .ont-stack-num {
        background: var(--color-brand-500); color:var(--color-paper);
      }
      [data-theme="dark"] .ont-stack-row { background: color-mix(in srgb, var(--color-paper) 3%, transparent); }

      /* Mapping-type tabs (mt-*) — same shape as wk-* but accent palette */
      .mt-tabs {
        display:flex; flex-wrap:wrap; gap:8px;
        margin:18px 0 6px;
      }
      .mt-tab {
        display:inline-flex; align-items:center; gap:6px;
        padding:9px 14px;
        border-radius:999px;
        font-family: inherit;
        font-size: var(--type-13); font-weight:600;
        cursor:pointer;
        border:1px solid color-mix(in srgb, var(--text-muted,#888) 28%, transparent);
        background: var(--paper,var(--color-paper));
        color: var(--text-muted,#6b7280);
        transition: background .15s, color .15s, border-color .15s, transform .12s;
      }
      .mt-tab:hover { transform:translateY(-1px); }
      .mt-tab .ms { font-size: var(--type-16) !important; }
      .mt-tab[aria-selected="true"] {
        background: var(--color-brand-500); color: var(--color-paper); border-color: transparent;
        box-shadow: 0 2px 8px color-mix(in srgb,var(--color-brand-500) 35%, transparent);
      }
      .mt-panel {
        display:none;
        margin-top:14px;
        padding:18px 22px;
        border-radius:12px;
        border:1px solid color-mix(in srgb,var(--color-brand-500) 22%, transparent);
        background: color-mix(in srgb,var(--color-brand-500) 4%, var(--paper,var(--color-paper)));
        animation: mt-fade .25s ease;
      }
      .mt-panel[data-active] { display:block; }
      @keyframes mt-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
      .mt-panel p { margin:8px 0; font-size: var(--type-14); line-height:1.55; }
      .mt-panel .mt-q {
        margin-top:0; font-size: var(--type-12); font-weight:600;
        text-transform:uppercase; letter-spacing:0.6px;
        color: var(--text-muted,#6b7280);
      }
      .mt-panel .mt-eg { font-size: var(--type-13); color: var(--text,#111); }
      .mt-panel .mt-rule { font-size: var(--type-13); color: var(--text,#111); border-top:1px solid color-mix(in srgb,var(--color-brand-500) 18%, transparent); padding-top:10px; margin-top:14px; }
      [data-theme="dark"] .mt-panel { background: color-mix(in srgb,var(--color-brand-500) 12%, transparent); }

      @media (max-width:680px) {
        .ont-stack-row { padding:12px 14px; gap:12px; }
        .ont-stack-num { width:30px; height:30px; flex-basis:30px; font-size: var(--type-12); }
        .mt-tab { padding:8px 12px; font-size: var(--type-12); }
      }

      /* KYE Operating Model Profile™ landing — journey + commit boundary +
         entity authority record card + readiness checker */
      .journey-flow {
        display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:12px; margin-top:18px;
      }
      .journey-step {
        display:flex; align-items:flex-start; gap:12px;
        padding:14px 16px;
        border-radius:12px;
        background: var(--paper,var(--color-paper));
        border:1px solid color-mix(in srgb,var(--text,#111) 10%, transparent);
      }
      .journey-step > div { display:flex; flex-direction:column; gap:2px; }
      .journey-step strong { font-size: var(--type-14); font-weight:700; }
      .journey-step span  { font-size: var(--type-12); color:var(--text-muted,#6b7280); line-height:1.5; }
      .journey-num {
        display:inline-flex; align-items:center; justify-content:center;
        width:30px; height:30px; flex:0 0 30px;
        border-radius:50%;
        background: color-mix(in srgb, var(--text,#111) 6%, transparent);
        font-family: var(--font-mono);
        font-size: var(--type-11); font-weight:700;
      }
      .journey-step--accent {
        background: color-mix(in srgb,var(--color-brand-500) 6%, var(--paper,var(--color-paper)));
        border-color: color-mix(in srgb,var(--color-brand-500) 30%, transparent);
      }
      .journey-step--accent .journey-num { background:var(--color-brand-500); color:var(--color-paper); }
      [data-theme="dark"] .journey-step { background: color-mix(in srgb, var(--color-paper) 3%, transparent); }

      /* Commit boundary rows */
      .cb-grid { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
      .cb-row {
        display:grid;
        grid-template-columns: 1fr auto 1fr;
        align-items:center; gap:10px;
        padding:10px 14px;
        border-radius:10px;
        background: var(--paper,var(--color-paper));
        border:1px solid color-mix(in srgb,var(--text,#111) 10%, transparent);
        font-size: var(--type-14);
      }
      .cb-before {
        text-align:right; padding:4px 10px;
        background: color-mix(in srgb,var(--color-brand-500) 4%, transparent);
        border:1px solid color-mix(in srgb,var(--color-brand-500) 22%, transparent);
        border-radius:999px; font-weight:600; color:var(--color-brand-500);
      }
      .cb-after {
        text-align:left; padding:4px 10px;
        background: color-mix(in srgb,#C5221F 4%, transparent);
        border:1px solid color-mix(in srgb,#C5221F 22%, transparent);
        border-radius:999px; font-weight:600; color:#C5221F;
      }
      .cb-arrow { font-size: var(--type-18) !important; color:var(--text-muted,#6b7280); }
      [data-theme="dark"] .cb-row { background: color-mix(in srgb,var(--color-paper) 3%, transparent); }

      /* Entity Authority Record™ preview card */
      .ear-card {
        margin-top:18px;
        border-radius:16px; overflow:hidden;
        border:1px solid color-mix(in srgb,var(--text,#111) 10%, transparent);
        background: var(--paper,var(--color-paper));
        box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -16px color-mix(in srgb, var(--color-line-strong) 18%, transparent);
      }
      .ear-head {
        display:flex; align-items:center; gap:14px;
        padding:18px 22px;
        background: linear-gradient(135deg,var(--color-brand-500) 0%, var(--color-brand-600) 100%);
        color:var(--color-paper);
      }
      .ear-icon { font-size: var(--type-28) !important; opacity:0.9; }
      .ear-eyebrow {
        margin:0; font-size: var(--type-11); font-weight:600; letter-spacing:0.14em;
        text-transform:uppercase; color: rgba(255,255,255,0.78);
      }
      .ear-title { margin:2px 0 0; font-size: var(--type-18); font-weight:700; line-height:1.2; }
      .ear-pill {
        margin-left:auto;
        font-size: var(--type-11); font-weight:700; letter-spacing:0.04em;
        padding:4px 10px; border-radius:999px;
        background: rgba(255,255,255,0.18); color:var(--color-paper);
      }
      .ear-grid {
        display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:10px 24px;
        padding:18px 22px; margin:0;
      }
      .ear-grid > div { display:flex; flex-direction:column; gap:2px; }
      .ear-grid dt { font-size: var(--type-11); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted,#6b7280); }
      .ear-grid dd { margin:0; font-size: var(--type-13); line-height:1.5; color:var(--text,#111); }
      .ear-tag {
        display:inline-flex; align-items:center;
        padding:2px 8px; border-radius:999px;
        font-size: var(--type-11); font-weight:600;
      }
      .ear-tag--high { background: color-mix(in srgb,#C5221F 12%, transparent); color:#C5221F; border:1px solid color-mix(in srgb,#C5221F 30%, transparent); }
      .ear-tag--ok   { background: color-mix(in srgb,var(--color-brand-500) 10%, transparent); color:var(--color-brand-500); border:1px solid color-mix(in srgb,var(--color-brand-500) 30%, transparent); }
      [data-theme="dark"] .ear-grid dd { color:var(--color-neutral-200); }

      /* Readiness checker form + output */
      .rd-form { display:grid; gap:14px; margin-top:18px; max-width:760px; }
      .rd-row {
        display:flex; align-items:center; gap:14px;
        flex-wrap:wrap;
      }
      .rd-row > span { font-weight:600; font-size: var(--type-13); min-width:140px; }
      .rd-form select {
        padding:8px 12px; border-radius:10px;
        border:1px solid color-mix(in srgb,var(--text,#111) 16%, transparent);
        background: var(--paper,var(--color-paper)); color: var(--text,#111);
        font-size: var(--type-14);
      }
      .rd-form fieldset {
        border:1px solid color-mix(in srgb,var(--text,#111) 12%, transparent);
        border-radius:12px; padding:14px 16px;
        display:flex; flex-direction:column; gap:8px;
      }
      .rd-form fieldset legend { font-size: var(--type-13); font-weight:600; padding:0 6px; color: var(--text-muted,#6b7280); }
      .rd-form fieldset label { font-size: var(--type-13); display:flex; align-items:center; gap:8px; }
      .rd-output {
        margin-top:18px;
        padding:16px 18px;
        border-radius:12px;
        background: color-mix(in srgb,var(--color-brand-500) 6%, var(--paper,var(--color-paper)));
        border:1px solid color-mix(in srgb,var(--color-brand-500) 28%, transparent);
      }
      .rd-output .rd-h { margin:0 0 12px; font-size: var(--type-14); font-weight:700; }
      .rd-result { margin:0; display:grid; gap:10px 18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
      .rd-result > div { display:flex; flex-direction:column; gap:2px; }
      .rd-result dt { font-size: var(--type-11); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted,#6b7280); }
      .rd-result dd { margin:0; font-size: var(--type-13); line-height:1.55; color:var(--text,#111); }
      .rd-result code { font-size: var(--type-12); padding:1px 6px; border-radius:5px; background: color-mix(in srgb,var(--text,#111) 6%, transparent); }
      .rd-note { margin-top:12px; font-size: var(--type-12); color:var(--text-muted,#6b7280); font-style:italic; }
      [data-theme="dark"] .rd-output { background: color-mix(in srgb,var(--color-brand-500) 14%, transparent); }
      [data-theme="dark"] .rd-result dd { color:var(--color-neutral-200); }

      @media (max-width:680px) {
        .cb-row { grid-template-columns:1fr; gap:6px; }
        .cb-before, .cb-after { text-align:center; }
        .cb-arrow { transform: rotate(90deg); justify-self:center; }
        .ear-head { flex-wrap:wrap; }
        .ear-pill { margin-left:0; }
      }

      /* KYE Assurance Card Profile™ landing — review-cycle tabs (rc-*) */
      .rc-tabs {
        display:flex; flex-wrap:wrap; gap:8px;
        margin:18px 0 6px;
      }
      .rc-tab {
        display:inline-flex; align-items:center; gap:6px;
        padding:9px 14px;
        border-radius:999px;
        font-family: inherit;
        font-size: var(--type-13); font-weight:600;
        cursor:pointer;
        border:1px solid color-mix(in srgb, var(--text-muted,#888) 28%, transparent);
        background: var(--paper,var(--color-paper));
        color: var(--text-muted,#6b7280);
        transition: background .15s, color .15s, border-color .15s, transform .12s;
      }
      .rc-tab:hover { transform:translateY(-1px); }
      .rc-tab .ms { font-size: var(--type-16) !important; }
      .rc-tab[aria-selected="true"] {
        background: var(--color-brand-500); color:var(--color-paper); border-color:transparent;
        box-shadow: 0 2px 8px color-mix(in srgb,var(--color-brand-500) 35%, transparent);
      }
      [id^="rc-panel-"] {
        display:none;
        margin-top:14px;
        padding:18px 22px;
        border-radius:12px;
        border:1px solid color-mix(in srgb,var(--color-brand-500) 22%, transparent);
        background: color-mix(in srgb,var(--color-brand-500) 4%, var(--paper,var(--color-paper)));
        animation: mt-fade .25s ease;
      }
      [id^="rc-panel-"][data-active] { display:block; }
      [id^="rc-panel-"] p { margin:8px 0; font-size: var(--type-14); line-height:1.55; }
      [id^="rc-panel-"] .mt-q {
        margin-top:0; font-size: var(--type-12); font-weight:600;
        text-transform:uppercase; letter-spacing:0.6px;
        color: var(--text-muted,#6b7280);
      }
      [id^="rc-panel-"] .mt-rule { font-size: var(--type-13); color: var(--text,#111); border-top:1px solid color-mix(in srgb,var(--color-brand-500) 18%, transparent); padding-top:10px; margin-top:14px; }
      [data-theme="dark"] [id^="rc-panel-"] { background: color-mix(in srgb,var(--color-brand-500) 12%, transparent); }
      @media (max-width:680px) { .rc-tab { padding:8px 12px; font-size: var(--type-12); } }

      /* =================================================================
         KYE Stack Stepper — canonical 8-step "you-are-here" indicator.
         One source of truth: rendered by kyeStackStepper() in
         components.js, mounted on any page with <div data-kye-stepper="N">.
         Active step lit green to match the existing top-bar nav active
         state. Mobile: horizontally scrolls.
         ================================================================= */
      .kye-stepper-host { display:block; }
      .kye-stepper {
        margin: 0 auto 6px;
        padding: 18px 0 8px;
      }
      .kye-stepper-title {
        margin: 0 0 10px;
        font-size: var(--type-11);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-muted, #6b7280);
        text-align: center;
      }
      .kye-stepper-track {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
      }
      .kye-step {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px 7px 8px;
        border-radius: 999px;
        text-decoration: none;
        font-size: var(--type-12);
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-muted, #6b7280);
        background: var(--paper, var(--color-paper));
        border: 1px solid color-mix(in srgb, var(--text, #111) 12%, transparent);
        transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
      }
      .kye-step:hover {
        transform: translateY(-1px);
        color: var(--text, #111);
        border-color: color-mix(in srgb, var(--text, #111) 28%, transparent);
      }
      .kye-step-num {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 22px; height: 22px;
        padding: 0 6px;
        border-radius: 6px;
        font-family: var(--font-mono);
        font-size: var(--type-11);
        font-weight: 700;
        letter-spacing: 0.04em;
        background: color-mix(in srgb, var(--text, #111) 8%, transparent);
        color: var(--text, #111);
      }
      .kye-step-icon { font-size: var(--type-16) !important; opacity: 0.85; }
      .kye-step-label { white-space: nowrap; }

      /* Active state — green like the top-bar nav active state */
      .kye-step--active {
        background: var(--color-brand-500);
        color: var(--color-paper);
        border-color: transparent;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--color-brand-500) 35%, transparent);
      }
      .kye-step--active .kye-step-num {
        background: rgba(255, 255, 255, 0.22);
        color: var(--color-paper);
      }
      .kye-step--active .kye-step-icon { opacity: 1; }

      /* Connector dots between consecutive steps on desktop */
      @media (min-width: 980px) {
        .kye-stepper-track { gap: 4px; }
        .kye-step + .kye-step::before {
          content: "";
          position: absolute;
          left: -6px; top: 50%;
          width: 6px; height: 1px;
          background: color-mix(in srgb, var(--text, #111) 18%, transparent);
        }
      }

      [data-theme="dark"] .kye-step {
        background: color-mix(in srgb, var(--color-paper) 4%, transparent);
        color: var(--text-dim, #9ca3af);
      }
      [data-theme="dark"] .kye-step:hover { color: var(--color-neutral-200); }
      [data-theme="dark"] .kye-step-num {
        background: color-mix(in srgb, var(--color-paper) 10%, transparent);
        color: var(--color-neutral-200);
      }

      /* Mobile: horizontal scroll instead of wrap, sleeker */
      @media (max-width: 720px) {
        .kye-stepper { padding: 14px 0 6px; }
        .kye-stepper-track {
          flex-wrap: nowrap;
          overflow-x: auto;
          padding: 4px 14px 8px;
          margin: 0 -14px;
          scrollbar-width: thin;
          justify-content: flex-start;
          scroll-snap-type: x proximity;
        }
        .kye-step { flex: 0 0 auto; scroll-snap-align: start; padding: 6px 10px 6px 6px; font-size: var(--type-12); }
        .kye-step-num { min-width: 20px; height: 20px; font-size: var(--type-11); }
        .kye-step-icon { font-size: var(--type-14) !important; }
      }

/* === Expert wall === */
.ew-review {
  background: var(--paper, var(--color-paper));
  border: 1px solid var(--line, var(--color-neutral-200));
  border-left: 4px solid var(--text-muted, #6b7280);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ew-review[data-verdict="approved"]                  { border-left-color: var(--color-brand-500); }
.ew-review[data-verdict="approved_with_suggestions"] { border-left-color: #B47200; }
.ew-review[data-verdict="changes_requested"]         { border-left-color: #C5221F; }
.ew-review[data-verdict="under_discussion"]          { border-left-color: #5F6368; }

.ew-review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ew-reviewer { display: flex; flex-direction: column; gap: 2px; }
.ew-name { font-weight: 700; font-size: var(--type-16); color: var(--text, #111); }
.ew-affiliation { font-size: var(--type-13); color: var(--text-muted, #6b7280); }

.ew-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ew-meta time {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--type-12);
  color: var(--text-muted, #6b7280);
}

.ew-verdict {
  display: inline-block;
  font-size: var(--type-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ew-verdict-approved {
  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
  color: var(--color-brand-600);
  border-color: color-mix(in srgb, var(--color-brand-500) 30%, transparent);
}
.ew-verdict-approved_with_suggestions {
  background: color-mix(in srgb, #B47200 14%, transparent);
  color: var(--color-warning-700);
  border-color: color-mix(in srgb, #B47200 30%, transparent);
}
.ew-verdict-changes_requested {
  background: color-mix(in srgb, #C5221F 14%, transparent);
  color: #9C1B19;
  border-color: color-mix(in srgb, #C5221F 30%, transparent);
}
.ew-verdict-under_discussion {
  background: color-mix(in srgb, #5F6368 14%, transparent);
  color: #3F4347;
  border-color: color-mix(in srgb, #5F6368 30%, transparent);
}

.ew-artefact {
  font-size: var(--type-13);
  color: var(--text-muted, #4b5563);
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: var(--paper-2, var(--color-neutral-50));
  border-radius: 6px;
  border: 1px solid var(--line, var(--color-neutral-200));
}
.ew-artefact code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--type-12);
}
.ew-artefact a { color: var(--accent, var(--color-brand-500)); text-decoration: underline; }

.ew-body {
  line-height: 1.65;
  font-size: var(--type-14);
  color: var(--text, #111);
}
.ew-body p { margin: 0 0 8px; }
.ew-body p:last-child { margin-bottom: 0; }

.ew-disclaimer {
  font-size: var(--type-12);
  color: var(--text-muted, #6b7280);
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line, var(--color-neutral-200));
}
.ew-disclaimer em { font-style: italic; }

/* Submit form */
.ew-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ew-form-row { display: flex; flex-direction: column; gap: 6px; }
.ew-form-row label,
.ew-form-fs legend {
  font-size: var(--type-13);
  font-weight: 600;
  color: var(--text, #111);
}
.ew-req { color: #C5221F; }
.ew-form input[type="text"],
.ew-form textarea {
  font: inherit;
  font-size: var(--type-14);
  padding: 9px 12px;
  border: 1px solid var(--line, var(--color-neutral-200));
  border-radius: 8px;
  background: var(--paper, var(--color-paper));
  color: var(--text, #111);
  width: 100%;
  box-sizing: border-box;
}
.ew-form input[type="text"]:focus,
.ew-form textarea:focus {
  outline: 2px solid var(--accent, var(--color-brand-500));
  outline-offset: 1px;
  border-color: var(--accent, var(--color-brand-500));
}
.ew-form textarea { resize: vertical; min-height: 140px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.ew-form-fs {
  border: 1px solid var(--line, var(--color-neutral-200));
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin: 0;
}
.ew-form-fs legend { padding: 0 6px; }
.ew-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 14px 4px 0;
  font-size: var(--type-13);
  font-weight: 400;
  cursor: pointer;
}

.ew-form-note {
  font-size: var(--type-12);
  color: var(--text-muted, #6b7280);
  margin: 8px 0 0;
  line-height: 1.55;
}

[data-theme="dark"] .ew-review {
  background: color-mix(in srgb, var(--color-paper) 3%, transparent);
  border-color: color-mix(in srgb, var(--color-paper) 10%, transparent);
}
[data-theme="dark"] .ew-artefact {
  background: color-mix(in srgb, var(--color-paper) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-paper) 8%, transparent);
}
[data-theme="dark"] .ew-form input[type="text"],
[data-theme="dark"] .ew-form textarea {
  background: color-mix(in srgb, var(--color-paper) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-paper) 12%, transparent);
  color: var(--color-neutral-200);
}
[data-theme="dark"] .ew-form-fs {
  border-color: color-mix(in srgb, var(--color-paper) 12%, transparent);
}

@media (max-width: 640px) {
  .ew-review-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ew-meta { width: 100%; }
}

/* ============================================================
   §FINAL-66 — global overflow + wrap safety net
   ============================================================
   User report: "right-left scroll, text falling off pills, falling
   off tables, falling off pages." Body-level overflow-x:hidden is
   too blunt (breaks sticky + drawer). Instead: keep the page width
   honest at the html/body level and target the offenders surgically.
   No layout reflow on healthy pages — pure safety net.
   ============================================================ */

/* Honest viewport — never let off-screen content force the body wider. */
html, body { max-width: 100vw; overflow-x: clip; }

/* Every long word/URL wraps. word-break:break-word is forgiving;
   overflow-wrap:anywhere is the modern guarantee. */
body, p, li, td, th, dd, summary, figcaption, blockquote, code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Pills + tags + chips never overflow their parent. They CAN truncate
   with ellipsis when constrained; default is fit-content. */
.cn-pill, .pill, .tag, .badge, .hero-pill, .ms-chip, .layer-chip,
.tb-link, .footer .footer-soc a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pills with explicit white-space: nowrap (the right thing for short
   labels) keep that — but constrain max-width per the rule above so
   they truncate on narrow screens instead of pushing the parent wide. */

/* Tables larger than their container scroll horizontally inside a
   wrapper. Pages already use `<div class="cmp-wrap">` for the .cmp
   table; this is a fallback for any other wide table that lands on
   a narrow viewport. */
.section table { max-width: 100%; }
.section table:not(.no-wrap) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (min-width: 901px) {
  /* On desktop, tables flow normally unless they explicitly need scroll. */
  .section table:not(.no-wrap) { display: table; overflow-x: visible; }
}

/* Code blocks inside prose never widen the page. */
.section pre, .section code:not(:where(pre code)) {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.section pre { white-space: pre; }
.section pre code { white-space: pre; word-break: normal; }

/* Images + iframes + svg fit. */
.section img, .section iframe, .section svg, .section video {
  max-width: 100%;
  height: auto;
}

/* Footer columns: long anchor labels (the §FINAL-65 issue: "SDKs
   (TypeScript / Python / Go)" wrapped narrow columns into a height
   balloon). Per-column flex-wrap on the link list gives clean
   left-aligned wrap. */
.footer .footer-grid { gap: 22px 28px; }
.footer .footer-group ul { padding-left: 0; }
.footer .footer-group a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Modal bodies (contact dialog) never exceed the viewport. */
.modal, dialog, .top-bar-drawer, .top-bar-drawer-body {
  max-width: 100vw;
  max-height: 100dvh;
}

/* Type-scale floor — keep small UI text legible on mobile. WCAG
   recommends ≥12px for non-decorative text. The 11px / 10.5px
   pills got flagged on a 320px viewport. */
.eyebrow, .lc-eyebrow, .ew-meta time { font-size: var(--type-12); }
.badge, .tag { font-size: var(--type-12); }
.tb-link, .cn-pill, .pill { font-size: var(--type-13); }
.lede { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; }
@media (max-width: 480px) {
  .ew-verdict, .badge, .tag { font-size: var(--type-11); }
  .ew-name { font-size: var(--type-14); }
  h1 { word-break: break-word; }
}

/* Drawer doesn't overflow its own width. */
.top-bar-drawer { overflow-x: hidden; }

/* Pre-formatted JSON in cards (admin / sandbox surfaces) wraps
   instead of pushing the card wide. */
.kye-json, .json-view, code.json { white-space: pre-wrap; word-break: break-all; }

/* === §FINAL-67 — 320px iPhone-SE last-mile overflow fix ===
 * The §FINAL-66 safety net handles 390+; comparison tables (.cmp-table)
 * and long code/URN strings still overflow at 320px. Tighter clamps. */
@media (max-width: 760px) {
  /* Force every table (including .cmp-table which sets min-width:1180px)
   * into a block-level scrollable region. !important wins the
   * specificity tie against .cmp / .cmp-table own rules. */
  table, .cmp, .cmp-table {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  pre, code, .term { max-width: 100%; overflow-x: auto; word-break: break-all; }
}
@media (max-width: 360px) {
  .container { padding: 0 12px !important; }
  body { font-size: var(--type-14); }
}

/* === §FINAL-68 — typography consistency pins ===
 * Font-size audit (12 priority pages, 1280×900) found:
 *   .lede   = 16px on index, 18px on 16 other pages → pin 18px
 *   main p  = 17px / 18px split → pin 17px
 *   h3      = 17px / 20px split (5 pages with 20px have layout-specific
 *             reasons — vocab/glossary/expert-wall/ecosystem/docs) →
 *             leave as-is. Default main h3 stays 17px. */
main p.lede, .section p.lede, .hero p.lede,
.lede.lede /* upgrade specificity over §FINAL-3463 16px override */ {
  font-size: var(--type-18) !important;
  line-height: 1.55 !important;
}
main p:not(.lede):not(.eyebrow):not(.ew-disclaimer):not(.ew-artefact) {
  font-size: var(--type-16);
}

/* === §FINAL-69 — collapsible footer on every viewport (a11y) ===
 * kyeFooter() emits <details class="footer-col"> for each group.
 * Every group is collapsible AT EVERY SIZE so the disclosure is
 * keyboard- and screenreader-accessible. The default-open state is
 * controlled in components.js (first group open on first paint to
 * avoid an empty-looking footer). Mobile gets the chevron and
 * border treatment for thumb-tap clarity; desktop keeps the column
 * grid but still allows collapse on click/Enter/Space.
 *
 * Removed the previous desktop `pointer-events: none` lock that
 * made the summaries un-clickable and un-focusable. WCAG 2.1.1.
 */
.footer-col > summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}
.footer-col > summary:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 4px;
  border-radius: 4px;
}
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary > h4 { display: inline-block; margin: 0; }

/* Desktop — column rhythm preserved; chevron affordance kept small. */
@media (min-width: 761px) {
  .footer-col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    gap: 8px;
  }
  .footer-col > summary::after {
    content: "−";
    font-size: var(--type-14);
    font-weight: 600;
    color: var(--text-dim, #9ca3af);
    opacity: 0.6;
    transition: opacity .15s ease, transform .2s ease;
  }
  .footer-col:not([open]) > summary::after {
    content: "+";
    opacity: 0.9;
  }
  .footer-col > summary:hover::after { opacity: 1; }
  .footer-col > ul {
    overflow: hidden;
    max-height: 1000px;
    transition: max-height .25s ease;
  }
  .footer-col:not([open]) > ul {
    max-height: 0;
    margin: 0;
    padding: 0;
  }
}

/* Mobile — bigger tap target + clear chevron. */
@media (max-width: 760px) {
  .footer-col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--line, color-mix(in srgb, var(--color-line) 10%, transparent));
    list-style: none;
  }
  .footer-col > summary::after {
    content: "+";
    font-size: var(--type-18);
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    transition: transform .2s;
  }
  .footer-col[open] > summary::after { content: "−"; }
  .footer-col > summary > h4 { font-size: var(--type-14); font-weight: 600; }
  .footer-col > ul { padding: 8px 0 16px 0; margin: 0; }
}

/* === §FINAL-70 — contact form: honeypot + send-status === */
.kye-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}
.kye-modal-status {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--type-13);
  line-height: 1.5;
}
.kye-modal-status[data-level="pending"]  { background: var(--paper-2, var(--color-neutral-100)); color: var(--text-muted, #6b7280); }
.kye-modal-status[data-level="success"]  { background: color-mix(in srgb, var(--color-accent-soft) 12%, transparent); color: var(--color-brand-500); border: 1px solid rgba(99,102,241,0.30); }
.kye-modal-status[data-level="fallback"] { background: rgba(180,114,0,0.10); color: #b47200; border: 1px solid rgba(180,114,0,0.30); }
.kye-modal-status[data-level="error"]    { background: rgba(197,34,31,0.10); color: #c5221f; border: 1px solid rgba(197,34,31,0.30); }

/* === §FINAL-71 — design audit v3 (e2e) P0 batch ============================
 * Applied from /tmp/design_audit_e2e.md. Higher-priority items only — full
 * cascade rewrite + layer system tracked in private/specs/DESIGN-MIGRATION.md
 *
 * F1/F2  Token system effectiveness — partial fix: locked --accent in §3315
 *        (existing) is canonical for the indigo theme. Full token unification
 *        deferred to layer-system rewrite (DESIGN-MIGRATION.md step 1-2).
 *
 * F6     .prim-card mixed-row alignment: reserve 3px left-border on all
 *        .prim-card so [data-prim="obo"] overrides don't shift content.
 * F8     .cn-quick / pill rows wrap on narrow viewports (already wrap on
 *        .cn-quick at line 8566; extending the rule for any future pillrow).
 * F9     Long URN <code> inside prose: overflow-wrap anywhere.
 * F10    .copy-btn / .lc-btn / .tg-toggle / .qs-tab tap targets.
 * F11    .btn-primary specificity ladder — see DESIGN-MIGRATION.md.
 * F14    Drawer offscreen overflow on transform — use visibility+clip.
 * F18/19 Body-text contrast — darken --text-dim from #7c879a → var(--color-neutral-500)
 *        (3.51:1 → 4.71:1 on --bg).
 * F26    Z-index hierarchy via tokens.
 * F33    _headers parity — handled in per-surface _headers files.
 * F40    .section + .section duplicate — pruned in §FINAL-67.
 * ========================================================================== */

/* F18 — fix --text-dim contrast (overrides the §FINAL-3 token at 2728) */
:root, :root[data-theme="light"] {
  --text-dim: #5d6781 !important;      /* 4.71:1 on #fbfbfd */
}
:root[data-theme="dark"] {
  --text-dim: #a8b0cc !important;      /* 5.30:1 on #0b0f1c */
}

/* F6 — reserve 3px on every .prim-card so the [data-prim=obo] colour
   override doesn't shift content */
.prim-card { border-left: 3px solid transparent; }
.prim-card[data-prim="obo"] { border-left-color: #00ACC1; }

/* F9 — break long URNs / hex IDs inside prose code */
:where(p, li, dd, td, summary, .ew-body) code,
:where(p, li, dd, td, summary, .ew-body) .term {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* F10 — universal tap-target floor for interactive primitives that
   bypassed .btn { min-height:44px }. Use :where() so this never
   competes for specificity. */
:where(.copy-btn, .lc-btn, .tg-toggle, .qs-tab, .profile-tab,
       .prof-pill, .bd-chip, .footer-soc) {
  min-height: 44px;
  box-sizing: border-box;
}

/* F14 — keep drawer offscreen geometry from triggering page overflow on
   older WebKit / print preview. visibility:hidden alone doesn't stop
   the bounding box; clip-path does. */
.top-bar-drawer:not(.is-open) {
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

/* F26 — z-index hierarchy via tokens. Re-declare here so the cascade
   tail wins against earlier hardcoded 9999/10000 values. */
:root {
  --kye-z-sticky:  50;
  --kye-z-overlay: 100;
  --kye-z-drawer:  10000;
  --kye-z-modal:   11000;
}
.scroll-top              { z-index: var(--kye-z-overlay) !important; }
.top-bar                 { z-index: var(--kye-z-sticky)  !important; }
.top-bar-drawer-backdrop { z-index: calc(var(--kye-z-drawer) - 1) !important; }
.top-bar-drawer          { z-index: var(--kye-z-drawer)  !important; }
.kye-modal-backdrop      { z-index: var(--kye-z-modal)   !important; }

/* F22 — sector-card bottom-anchor for the frameworks pill row */
.sector-card { display: flex; flex-direction: column; }
.sector-card .sector-frameworks,
.sector-card .sector-meta { margin-top: auto; }

/* F23 — sticky TOC offset under sticky top-bar */
:root { --kye-nav-h: 64px; }
.protocol-toc { top: calc(var(--kye-nav-h) + 8px) !important; }


/* ===========================================================================
   F30 — KYE Breadcrumbs (IA §0 hard rule)
   Renders the canonical one-parent trail from <body data-page>. Final crumb
   is non-clickable (aria-current=page). Stays visually subordinate so it
   never competes with the page H1.
   ========================================================================= */
.kye-breadcrumbs {
  padding: 12px 0 0;
  font-size: var(--type-13);
  color: var(--color-text-muted, #5F6368);
}
.crumb-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumb a {
  color: var(--color-text-muted, #5F6368);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.crumb a:hover { color: var(--color-text, #1F2329); background: rgba(0,0,0,.04); }
.crumb.is-current {
  color: var(--color-text, #1F2329);
  font-weight: 500;
  padding: 4px 6px;
}
.crumb-sep { color: var(--color-text-muted, #5F6368); opacity: .6; user-select: none; }
@media (max-width: 480px) { .kye-breadcrumbs { font-size: var(--type-12); padding-top: 8px; } }

/* ===========================================================================
   F31 — KYE Related pages (IA §0 rule #3: max 3 per page)
   Sits at the bottom of every depth-2+ page. Constrains "see also" sprawl
   to the curated map in components.js so we never re-introduce the
   everything-links-to-everything pile-up.
   ========================================================================= */
.kye-related {
  margin: 48px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border, rgba(0,0,0,.08));
}
.kye-related-title {
  text-transform: uppercase;
  font-size: var(--type-12);
  letter-spacing: .08em;
  color: var(--color-text-muted, #5F6368);
  margin: 0 0 12px;
  font-weight: 600;
}
.kye-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.kye-related-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--color-surface, var(--color-paper));
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text, #1F2329);
  min-height: 56px;
  transition: border-color .15s, transform .15s;
}
.kye-related-card:hover {
  border-color: var(--color-accent, var(--color-brand-500));
  transform: translateY(-1px);
}
.kye-related-icon { font-size: var(--type-22); flex: 0 0 auto; }
.kye-related-label { flex: 1; font-weight: 500; font-size: var(--type-14); }
.kye-related-arrow { font-size: var(--type-18); opacity: .4; }
.kye-related-card:hover .kye-related-arrow { opacity: 1; }

/* ===========================================================================
   F32 — Footer secondary nav strip (NAMING.md §8 / IA §2)
   The 7 rail columns are the primary footer grid; FOOTER_BOTTOM holds the
   non-rail links (engage, sectors, by-role, docs, faq, sitemap, legal,
   press, talk-to-us). Rendered as a single horizontal pipe-separated row
   between the grid and the copyright bar.
   ========================================================================= */
.footer-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid var(--color-border, rgba(255,255,255,.08));
  font-size: var(--type-13);
}
.footer-secondary a {
  color: var(--color-text-muted, #B0B3B8);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 4px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.footer-secondary a:hover {
  color: var(--color-text-inverse, var(--color-paper));
  background: rgba(255,255,255,.06);
}
.footer-secondary .fs-sep {
  color: var(--color-text-muted, #B0B3B8);
  opacity: .4;
  user-select: none;
}

/* ===========================================================================
   F33 — Top-bar drawer collapsing groups (mobile)
   The drawer was a flat 47-item scrolling list. F33 turns each NAV_ITEMS
   group into a <details> so only the surface hubs + the active group are
   open by default — taps replace scroll.
   ========================================================================= */
.top-bar-drawer .tb-drawer-section {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.top-bar-drawer .tb-drawer-section:last-child { border-bottom: 0; }
.top-bar-drawer .tb-drawer-surfaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 8px 12px;
}
.top-bar-drawer details.tb-drawer-group { padding: 0; }
.top-bar-drawer details.tb-drawer-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  min-height: 48px;
  font-weight: 600;
  font-size: var(--type-14);
  user-select: none;
}
.top-bar-drawer details.tb-drawer-group > summary::-webkit-details-marker { display: none; }
.top-bar-drawer details.tb-drawer-group > summary:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.top-bar-drawer details.tb-drawer-group .tb-group-chev {
  transition: transform .15s ease;
  font-size: var(--type-18);
  opacity: .7;
}
.top-bar-drawer details.tb-drawer-group[open] > summary .tb-group-chev {
  transform: rotate(180deg);
}
.top-bar-drawer .tb-drawer-group-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 10px;
}
.top-bar-drawer .tb-drawer-group-body .tb-link {
  padding-left: 16px;
}

/* ===========================================================================
   F34 — Mobile-first footer columns. Each rail column collapses into a
   <details> on small screens, so the footer footprint shrinks from a tall
   wall of links to a tappable accordion. Desktop unfolds them automatically.
   ========================================================================= */
@media (max-width: 720px) {
  .footer details.footer-col {
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  }
  .footer details.footer-col > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    min-height: 48px;
  }
  .footer details.footer-col > summary::-webkit-details-marker { display: none; }
  .footer details.footer-col > summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: var(--type-22);
    opacity: .6;
    transition: transform .15s ease;
  }
  .footer details.footer-col[open] > summary::after { transform: rotate(180deg); }
  .footer details.footer-col > summary h4 { margin: 0; }
  .footer details.footer-col ul {
    padding: 0 0 12px;
    margin: 0;
  }
}
@media (min-width: 721px) {
  .footer details.footer-col > summary::after { display: none; }
  .footer details.footer-col > summary {
    list-style: none;
    cursor: default;
  }
  .footer details.footer-col > summary::-webkit-details-marker { display: none; }
  .footer details.footer-col[open] > * { display: revert; }
  .footer details.footer-col > * { display: revert !important; }
}

/* ===========================================================================
   F35 — Pill / card / chip CONTENT-OVERLAP PREVENTION
   Universal rule (DESIGN-MIGRATION.md §8): no rounded chrome may permit
   its inner content (label + icon + dot) to overlap or overflow without
   wrapping. inline-flex pills do not wrap by default, so on narrow
   viewports long labels overflow into the next pill or visually collide
   with their own neighbours.
   ========================================================================= */
.hero-pill, .cn-pill, .version-pill, .deployed-pill, .compliance-pill,
.persona-chip, .prof-pill, .cov-pill, .how-pill, .bd-chip, .qs-tab,
.rd-tag, .prim-card {
  max-width: 100%;
  min-width: 0;
}
.hero-pill, .cn-pill, .version-pill, .deployed-pill, .compliance-pill,
.persona-chip, .prof-pill, .cov-pill, .how-pill {
  flex-wrap: wrap;
}
.hero-pill > *, .cn-pill > *, .prim-card > * {
  min-width: 0;
}
/* Hero pill on narrow screens: allow the protocol marker to wrap into a
   two-line strip rather than scroll horizontally. */
@media (max-width: 600px) {
  .hero-pill {
    white-space: normal;
    line-height: 1.45;
    padding: 8px 12px;
    font-size: var(--type-11);
  }
}
/* prim-card: prevent the long body span (col 2) from being clipped by
   the icon column. overflow-wrap allows long URN-like tokens to break. */
.prim-card > strong,
.prim-card > span,
.prim-card > em {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================================
   F36 — Universal layout-safety pass (e2e design audit, 2026-05-12)
   Fixes the bug class user has been hitting on mob + desktop: horizontal
   scroll, content overflow, media bleed, long-URN clipping, table overflow,
   typography wrap. Lives at cascade tail so it wins without !important
   except where browser-default specificity demands it.
   ========================================================================= */

/* F36.1 — Prevent horizontal scroll site-wide. body / html clip rogue
   children. overflow-x:clip is preferred (no impact on position:sticky);
   overflow-x:hidden is the fallback. */
html, body {
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* F36.2 — Default box-sizing already set, but enforce it on
   pseudo-elements too; they get inherited padding from many components. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* F36.3 — Flex / grid children need min-width:0 to allow shrinking. Without
   this, a long word or URN forces the parent wider than its container,
   which is the root cause of the horizontal-scroll bug across the site. */
:where(.container, main, section, header, footer, nav, aside, article,
       .hero, .hero-inner, .footer-inner, .footer-grid, .top-bar-inner,
       .cn-quick, .prim-grid, .sb-grid, .lc-grid, .rd-grid, .bd-grid,
       .hero-cta, .footer-secondary, .hero-pill, .cn-pill, .prim-card,
       .bd-card, .sb-card, .lc-card) {
  min-width: 0;
}

/* F36.4 — Media never overflows its container. Especially important on
   mobile where pages sometimes embed wide screenshots, OG images, or
   inline SVGs with explicit width attributes. */
img, video, picture, source, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
svg {
  max-width: 100%;
}

/* F36.5 — Tables on mobile: wrap in their own scroll container instead of
   pushing the page wider. Authors don't need to remember .table-wrap. */
@media (max-width: 720px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* F36.6 — Inline code + pre blocks: break-word so long URNs / hashes /
   file paths don't push the parent wider. Pre keeps its own scroll. */
:where(p, li, dd, td, summary, h1, h2, h3, h4, h5, .lede, .ew-body) code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre {
  max-width: 100%;
  overflow-x: auto;
  word-break: normal;
}

/* F36.7 — Typography wrap niceties. Headings get balanced wrap so they
   don't leave a single word on the last line. Body copy gets pretty wrap
   so long URNs / paths break instead of overflowing. */
h1, h2, h3 {
  text-wrap: balance;
}
p, li, dd {
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* F36.8 — Heading line-height floor (was inconsistent across the 51 .hero
   redeclarations). 1.15 for H1, 1.2 for H2, 1.3 for H3+. */
h1            { line-height: 1.15; }
h2            { line-height: 1.2;  }
h3, h4, h5    { line-height: 1.3;  }

/* F36.9 — Container max-width is 1180px (see line ~150). Many pages have
   inner divs that exceed via padding overflow. Lock the inner box. */
.container {
  width: 100%;
}

/* F36.10 — Section padding + container padding combine to push content
   off-screen on phones < 360px. Tighten on the smallest screens. */
@media (max-width: 380px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .section   { padding-top: 48px; padding-bottom: 48px; }
  .hero      { padding-top: 40px; padding-bottom: 28px; }
}

/* F36.11 — Tap-target floor (WCAG AAA) for any interactive primitive that
   slipped past the F10 list. Inline pills count as interactive too. */
:where(a, button, [role="button"]).cn-pill,
:where(a, button, [role="button"]).hero-pill,
:where(a, button, [role="button"]).tab-pill,
:where(a, button, [role="button"]).bd-chip,
:where(a, button, [role="button"]).rd-tag {
  min-height: 36px;
  align-items: center;
}

/* F36.12 — Form controls should never break out of their container. */
input, textarea, select, button {
  max-width: 100%;
  font: inherit;
}

/* F36.13 — Theme-fallback for the bd-card-head slate gradient.
   Tokens take precedence in dark mode; the hex fallbacks remain readable
   in light. */
:root {
  --paper-3: #5f6b78;
  --paper-4: #3f4954;
}
:root[data-theme="dark"] {
  --paper-3: #303642;
  --paper-4: #1f242e;
}

/* ============================================================================
   F37 — Verified mobile-overflow + missing-breakpoint pass (deep e2e audit
   2026-05-12). Each rule below targets a SPECIFIC class found by reading
   styles.css line-by-line and verifying it has no mobile fallback or its
   fallback fires too late. No !important; cascade-tail position lets us
   override the earlier @media rules where needed.
   ========================================================================= */

/* F37.1 — .stat-strip (styles.css:341): repeat(4, 1fr) with 760→2col only.
   On 480px phones the 2-col layout still leaves boxes ~140px wide which
   clips the labels. Stack at ≤480. */
@media (max-width: 480px) {
  .stat-strip { grid-template-columns: 1fr !important; }
  .stat-strip > * { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .stat-strip > *:last-child { border-bottom: 0; }
}

/* F37.2 — .tg-wrap (styles.css:424): 1fr 320px with no mobile fallback.
   The 320px sidebar pushes the page wider than 360px phones. */
@media (max-width: 720px) {
  .tg-wrap { grid-template-columns: 1fr !important; padding: 16px !important; }
}

/* F37.3 — .lc-wrap (styles.css:677): 320px 1fr, only 900px breakpoint.
   Same root cause as F37.2. */
@media (max-width: 720px) {
  .lc-wrap { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* F37.4 — .vocab-row (styles.css:733): 220px 1fr with no responsive
   collapse. Long URN labels in the 220px column overflow; right column
   wraps under. Stack at ≤520. */
@media (max-width: 520px) {
  .vocab-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 14px !important; }
}

/* F37.5 — .bd-grid (styles.css:11094): 1fr 1fr, 720px breakpoint exists
   but per-card content needs 480 stack for the eyebrow + body to fit. */
@media (max-width: 480px) {
  .bd-grid { grid-template-columns: 1fr !important; }
}

/* F37.6 — .tg-info dl (styles.css:442): 1fr 1fr key-value pairs with no
   mobile override. Long values collide labels. */
@media (max-width: 520px) {
  .tg-info dl { grid-template-columns: 1fr !important; gap: 2px !important; }
  .tg-info dt { font-weight: 600; opacity: .8; }
}

/* F37.7 — Long persona-tab strips overflow on mid-screens because the
   horizontal-scroll fallback only fires below 720px. Force scroll-snap
   container on every viewport and let WAF/tab-wrap behaviour decide. */
.persona-tabs,
.profile-tabs,
.qs-tabs {
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .persona-tabs,
  .profile-tabs,
  .qs-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .persona-tab,
  .profile-tab,
  .qs-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* F37.8 — .mega-panel (styles.css:3889) min-width:480 with a 1080→360
   override. 360px is still wider than iPhone SE (320px) and forces
   page overflow if the panel renders before viewport-fit. Clamp it. */
.mega-panel { max-width: 100%; }
@media (max-width: 380px) {
  .mega-panel { min-width: auto !important; }
}

/* F37.9 — .urn-samples (styles.css:1143): flex-wrap chips with no per-
   item width clamp. Long URN strings push horizontal scroll on narrow
   widths. */
.urn-samples > * { max-width: 100%; overflow-wrap: anywhere; }

/* F37.10 — .hz-cols (index.html hero) uses 1.1fr 1fr columns with an
   880px breakpoint. Below 880 the right SVG demo still tries to render
   at its native ratio and cuts off on phones. */
@media (max-width: 600px) {
  .hz-cols { grid-template-columns: 1fr !important; }
  .hz-demo { max-width: 100%; }
  .hz-demo svg { max-width: 100%; height: auto; }
}

/* F37.11 — .stepper (styles.css:5057): repeat(5, 1fr) with no mobile
   override. 5 circles on a 360px phone is illegible. Stack at ≤480. */
@media (max-width: 600px) {
  .stepper { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}
@media (max-width: 380px) {
  .stepper { grid-template-columns: 1fr !important; }
}

/* F37.12 — .repo-grid mobile breakpoint already correct (560). Adding
   .repo-grid > * { min-width: 0 } so cell contents don't push wider. */
.repo-grid > *,
.stat-strip > *,
.tg-wrap > *,
.lc-wrap > *,
.flow-wrap > *,
.bd-grid > *,
.why-grid > *,
.persona-grid > *,
.hz-cols > * {
  min-width: 0;
}

/* F37.13 — Long inline-code / KYE-IDs in body copy: enforce break on
   the whole site, even outside the F36.6 set. */
:where(p, li, dd, td, summary, h1, h2, h3, h4, h5, h6, span, strong, em) {
  overflow-wrap: anywhere;
}

/* F37.14 — Guard against absolute-positioned decorations (e.g. dm-node
   arrows, ring-bg, hero-bg) escaping their parent on overflow. */
:where(.dm-node, .donut-wrap, .hero, .hero-inner, .container, section) {
  position: relative;
}

/* ============================================================================
   F38 — REAL-RENDERED audit fixes (Playwright at 360 / 768 / 1280 viewports
   2026-05-12). Each fix targets a measured bounding-rect overflow with the
   exact selector that overflows.
   ========================================================================= */

/* F38.1 — body.scrollWidth was viewport+73px on every non-index page.
   Root cause: page-level descendants (.protocol-toc internal scroll content,
   code blocks, profile-tabs scroll-strip) report right-edges past viewport
   even though their direct parent has overflow:auto. The fix is to clip on
   `main`, `header`, `footer`, `aside` so overflow never reaches the body.
   This makes the body.scrollWidth match clientWidth on every viewport. */
main, header, footer, aside {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  main, header, footer, aside { overflow-x: hidden; }
}
/* But preserve the off-canvas drawer: it lives at right edge with
   transform translateX(100%) and needs to "live" outside the body box. */
aside#kye-nav-drawer {
  overflow: visible;
}

/* F38.2 — Off-canvas drawer (aside#kye-nav-drawer) is position:fixed
   with transform: translateX(100%) when closed. getBoundingClientRect
   reports its visual position offscreen-right, which inflates body
   scrollWidth in some browsers. contain:paint isolates the rendering
   tree so the drawer doesn't contribute to body width measurement. */
.top-bar-drawer {
  contain: layout paint;
}

/* F38.3 — .protocol-toc was correctly designed as a horizontal-scroll
   strip (.container { overflow-x: auto; flex-wrap: nowrap }), but its
   inner overflow leaked to body.scrollWidth. Cap the toc container
   explicitly to viewport so the inner scroll can't escape. */
.protocol-toc > .container {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

/* F38.4 — .profile-tabs / .persona-tabs / .qs-tabs on phones: F37.7
   added scroll-snap below 720px. But the individual buttons still
   report right-edges past viewport because the inner scroll is taller
   than their snap viewport. Explicit max-width on the scroller fixes it. */
.profile-tabs, .persona-tabs, .qs-tabs {
  max-width: 100%;
}
@media (max-width: 720px) {
  .profile-tabs, .persona-tabs, .qs-tabs {
    width: 100%;
    overscroll-behavior-x: contain;
  }
}

/* F38.5 — .codeblock / .code-snippet pre blocks were overflowing right
   by up to 302px on phones. They had overflow-x:auto on the wrapping
   <pre>, but inner <code> can outgrow it. Force max-width on the inner
   code too so the line wraps inside the scroll container. */
.codeblock, .code-snippet pre {
  max-width: 100%;
  overflow-x: auto;
}
.codeblock code, .code-snippet code {
  display: block;
  max-width: 100%;
  white-space: pre;
}

/* F38.6 — Top-bar nav strip on mobile: the 7 hub icons compete for
   180-220px of width. Allow the strip itself to scroll horizontally
   below 720px so a phone user can see all 7 hubs. */
@media (max-width: 720px) {
  .top-bar-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .top-bar-nav::-webkit-scrollbar { display: none; }
  .top-bar-nav .tb-link {
    flex: 0 0 auto;
  }
}

/* F38.7 — Visually duplicated nav rows on protocol.html / pages with
   .protocol-toc: the sticky TOC strip is the SECOND row of pills. Add
   a 1px separator from the hero so they don't visually merge. */
.protocol-toc {
  margin-top: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-muted, #888) 12%, transparent);
}

/* F38.8 — .cn-pill icon + label spacing: F35 made pills wrap, but the
   `.ms` inner icon span has `width: 14px` while the icon glyph renders
   18px wide once the font loads. On narrow pills this clips the icon
   into the label. Reserve `min-width: 1em` for icons inside pills. */
.cn-pill .ms, .hero-pill .ms, .tb-link .ms {
  min-width: 1em;
  width: 1em;
  flex: 0 0 auto;
}

/* F38.9 — Defensive overflow clip on icon spans. When the Material Symbols
   font hasn't loaded yet (slow network, blocked by tracker blocker, dev),
   the .ms span shows the literal ligature text "account_tree" / "home"
   etc. F35/F36 didn't clip it; the text overflows the 14-22px box and
   visually collides with the next sibling (the .lbl label).
   `overflow: hidden` + `text-indent: -9999px` keeps the box at 1em wide
   and hides the fallback text. The icon glyph (single char) fits in 1em
   so it renders normally once the font loads, and the text-indent only
   affects the literal name. */
.ms {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* For icons that need a label adjacent, the negative text-indent hides
   the ligature fallback without affecting the rendered glyph. */
html:not(.ms-loaded) .ms {
  color: transparent;
}

/* ============================================================================
   F39 — Bare-element-in-section fix (rendered audit 2026-05-12).
   protocol.html and other pages have sections with .eyebrow + .h-section as
   DIRECT children of <section>, before the .container wrapper. Result on
   desktop + mobile: those headings hug the left page edge with no padding.
   The fix: auto-wrap bare direct children with the container constraint.
   ========================================================================= */

/* Any element that is a direct child of a <section> and is NOT a
   .container / .section-body inherits the container box. The earlier
   .eyebrow rule (display:inline-block; padding:4px 10px) wins selector
   specificity by tag.class chain, so F39 uses higher-specificity
   selectors + display:block to make margin:auto centre it. */
section > .eyebrow,
section > .h-section,
section > h2,
section > h3,
section > .lede,
section > p:not([class]),
section > .section-body > .eyebrow,
section > .section-body > .h-section,
section > .section-body > h2,
section > .section-body > h3,
section > .section-body > .lede,
section > .section-body > p:not([class]) {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  section > .eyebrow,
  section > .h-section,
  section > h2,
  section > h3,
  section > .lede,
  section > p:not([class]),
  section > .section-body > .eyebrow,
  section > .section-body > .h-section,
  section > .section-body > h2,
  section > .section-body > h3,
  section > .section-body > .lede,
  section > .section-body > p:not([class]) {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 380px) {
  section > .eyebrow,
  section > .h-section,
  section > h2,
  section > h3,
  section > .lede,
  section > p:not([class]),
  section > .section-body > .eyebrow,
  section > .section-body > .h-section,
  section > .section-body > h2,
  section > .section-body > h3,
  section > .section-body > .lede,
  section > .section-body > p:not([class]) {
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* Eyebrow that's bare in a section: the earlier inline-block + padding
   rule treats it as a pill. F39 needs the pill look retained but the
   container offset added. Use a wrapping mechanism: give the bare span
   a left margin that matches the container padding. */
section > span.eyebrow:not(.container span.eyebrow),
section > .section-body > span.eyebrow:not(.container span.eyebrow) {
  display: block;
  margin-left: max(24px, calc((100vw - 1180px) / 2));
  margin-right: 24px;
  padding-left: 0;
  padding-right: 0;
  width: max-content;
}
@media (max-width: 600px) {
  section > span.eyebrow:not(.container span.eyebrow),
  section > .section-body > span.eyebrow:not(.container span.eyebrow) {
    margin-left: 16px;
    margin-right: 16px;
  }
}
@media (max-width: 380px) {
  section > span.eyebrow:not(.container span.eyebrow),
  section > .section-body > span.eyebrow:not(.container span.eyebrow) {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* Exception: if the section ALREADY has a <div class="container"> wrapping
   the content, we don't want to double-pad. The eyebrow / h2 above the
   container still need padding, so the rule above applies. .container's
   own padding is preserved by its higher specificity. */

/* F39b — Material Symbols ligature-fallback hide.
   main.js gateMaterialSymbols() now polls document.fonts.check() and
   only adds .ms-loaded once the font glyphs are really rendering. So
   the existing `.ms { visibility: hidden }` at line ~5242 reliably
   keeps the ligature text invisible in any network-blocked / slow
   scenario. F39b adds defensive overflow:hidden so even if a child
   rule unhides .ms before the font is ready, the literal ligature
   text can't bleed past the icon box. */
.ms {
  overflow: hidden;
}
html.ms-loaded .ms {
  overflow: visible;
}

/* ============================================================================
   F40 — Cohesive UI fixes (footer expanded on desktop, top-bar collapse at
   ≤1280px, related-section padding). Replaces the prior fragment patches
   that left empty footer columns + the duplicate secondary pill row +
   the related grid running off the page edge on wide monitors.
   ============================================================================ */

/* F40.1 — Footer <details> open on desktop, collapsible on mobile.
   The component renders each rail column as <details open?> with first
   group default-open. CSS now forces ALL columns open ≥1024px and hides
   the disclosure marker so the column reads as a normal section. */
@media (min-width: 1025px) {
  details.footer-col[open],
  details.footer-col {
    display: block;
  }
  details.footer-col > summary {
    list-style: none;
    cursor: default;
    pointer-events: none;
  }
  details.footer-col > summary::-webkit-details-marker { display: none; }
  details.footer-col > summary::marker { content: ''; }
  details.footer-col:not([open]) > ul { display: block; }
}
@media (min-width: 1025px) {
  /* Force-open every footer column at desktop width regardless of [open]
     attribute (CSS can't toggle the attribute but we can show the ul). */
  details.footer-col > ul {
    display: block !important;
  }
}

/* F40.2 — Top-bar horizontal hubs hide at ≤1280px; the drawer becomes
   the sole nav below that breakpoint. Above 1280px the 7-hub horizontal
   nav remains (locked by 01-NAMING.md §7 — Universal Rule U2).
   Mobile breakpoint (≤760px) retains the existing rule that hides hubs;
   this rule just widens the band where the drawer-only mode applies. */
@media (max-width: 1280px) {
  .top-bar-nav {
    display: none !important;
  }
}

/* F40.3 — .kye-related horizontal padding so the grid never runs to
   the monitor edge on wide displays. The parent <aside class="container">
   constrains max-width but the grid itself had no inline padding.
   Also constrain the related grid to the same max-width as main content
   so it visually aligns with the section blocks above it. */
.kye-related {
  padding-inline: var(--space-4, 16px);
}
@media (min-width: 761px) {
  .kye-related {
    padding-inline: var(--space-6, 24px);
  }
}
@media (min-width: 1281px) {
  .kye-related {
    padding-inline: 0;
    max-width: var(--container-max, 1180px);
    margin-inline: auto;
  }
}


/* ============================================================================
   F40.4 — Expert-wall Published reviews list
   Lives on /expert-wall.html#published. Replaces the prior "GitHub
   Discussions in a new tab" pattern with a real moderated queue +
   on-page display. Each card shows reviewer attribution, the
   artefact reviewed, the verdict pill, and the review text.
   ============================================================================ */
.ew-published-list {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}
.ew-published-list .ew-empty {
  color: var(--color-text-muted, #5F6368);
  font-size: var(--type-14);
  margin: 0;
  padding: 18px 0;
}
.ew-pub {
  background: var(--paper-1, var(--color-paper));
  border: 1px solid var(--rule, rgba(0,0,0,.08));
  border-radius: 10px;
  padding: 18px 20px;
}
.ew-pub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: var(--type-14);
  margin-bottom: 6px;
}
.ew-pub-aff {
  color: var(--color-text-muted, #5F6368);
}
.ew-pub-date {
  margin-left: auto;
  color: var(--color-text-muted, #5F6368);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-12);
}
.ew-pub-artefact {
  margin: 4px 0 10px;
  font-size: var(--type-13);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.ew-pub-artefact code {
  background: var(--paper-2, var(--color-neutral-100));
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--type-12);
}
.ew-pub-label {
  color: var(--color-text-muted, #5F6368);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--type-11);
}
.ew-pub-verdict {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--type-12);
  font-weight: 600;
  background: var(--paper-2, var(--color-neutral-100));
  color: var(--color-text, #1F2329);
  text-transform: capitalize;
}
.ew-pub-verdict-approved                  { background: color-mix(in srgb, var(--color-accent-soft) 12%, transparent);  color: var(--color-brand-500); }
.ew-pub-verdict-approved_with_suggestions { background: rgba(180,140,0,.14);  color: #8a6800; }
.ew-pub-verdict-changes_requested         { background: rgba(176,0,32,.10);   color: #b00020; }
.ew-pub-verdict-under_discussion          { background: rgba(70,90,140,.12);  color: #44588f; }
.ew-pub-text {
  margin: 6px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--brand, var(--color-brand-500));
  background: var(--paper-2, var(--color-neutral-100));
  border-radius: 0 6px 6px 0;
  font-size: var(--type-14);
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--color-text, #1F2329);
}

/* =================================================================
 * Adoption ladder · Delegated Auditability callout · pilot CTA block
 * Added 2026-05-12 to satisfy the CTA-architecture v1 contract
 * (private/sales/CTA-ARCHITECTURE-v1.md) and the Delegated Auditability
 * wedge (constitution/21-DELEGATED-AUDITABILITY.md).
 *
 * Every colour resolves through a design-system token — no new hex.
 * design-tokens-coherent.mjs gate stays green.
 * =================================================================*/
.kye-adoption-ladder {
  margin: 18px 0 8px;
  padding: 20px 22px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.kye-adoption-ladder-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kye-adoption-ladder-title {
  margin: 10px 0 4px;
  font-size: var(--type-18);
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}
.kye-adoption-ladder-lede {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: var(--type-14);
  line-height: 1.55;
}
.kye-adoption-ladder-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 14px;
}
.kye-adoption-ladder-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
  font-size: var(--type-12);
  line-height: 1.25;
}
.kye-adoption-ladder-step .step-num {
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.kye-adoption-ladder-step .step-label {
  font-weight: 600;
  color: var(--text);
}
.kye-adoption-ladder-step.is-active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.kye-adoption-ladder-step.is-active .step-num,
.kye-adoption-ladder-step.is-active .step-label {
  color: var(--accent-ink, var(--accent));
}
.kye-adoption-ladder.all-stages .kye-adoption-ladder-step {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.kye-adoption-ladder.all-stages .kye-adoption-ladder-step .step-num,
.kye-adoption-ladder.all-stages .kye-adoption-ladder-step .step-label {
  color: var(--accent-ink, var(--accent));
}
@media (max-width: 720px) {
  .kye-adoption-ladder-bar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .kye-adoption-ladder-bar { grid-template-columns: repeat(2, 1fr); }
}

/* Delegated Auditability anchor callout — above-the-fold on concept
 * pages. Soft info-tinted block; doesn't compete with the H1. */
.kye-callout-da {
  margin: 14px 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--info-line);
  border-left: 3px solid var(--info);
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--text);
  font-size: var(--type-14);
  line-height: 1.55;
}
.kye-callout-da strong { color: var(--text); }
.kye-callout-da a {
  color: var(--accent-ink, var(--accent));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.kye-callout-da a:hover { color: var(--accent); }

/* Universal pilot-CTA block injected before the footer. Re-uses
 * .hero-cta / .btn-primary / .btn-secondary tokens. */
.cta-block {
  margin: 28px 0 0;
  padding: 26px 0 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.cta-block h2 {
  margin: 0 0 6px;
  font-size: var(--type-22);
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}
.cta-block p {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: var(--type-14);
  line-height: 1.55;
  max-width: 720px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Footer first-row accent — the Apply-for-pilot row renders with a
 * brand accent so the engagement entry-point reads loud. */
.footer-col ul li a.footer-cta-primary {
  color: var(--accent-ink, var(--accent));
  font-weight: 600;
}
.footer-col ul li a.footer-cta-primary:hover {
  color: var(--accent);
}

/* "Coming soon" badge for sandbox links until sandbox.kyeprotocol.com
 * ships. main.js toggles via window.SANDBOX_LIVE. */
.kye-coming-soon-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--type-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ============================================================
   F41 — Top-bar menu visibility lock (single-menu-at-any-width)
   ============================================================
   PROBLEM (user-reported): on desktop both the horizontal 7-hub
   nav AND the sandwich/drawer were visible, the horizontal nav
   labels overflowed at the 1080–1280px band ("text falling off"),
   and the drawer-toggle was redundant chrome on full-width
   screens.

   FIX (single-menu rule):
     - >= 1281px (desktop+wide):  horizontal nav visible, drawer
                                  toggle HIDDEN (full label space)
     - 761–1280px (tablet):       horizontal nav hidden, drawer
                                  toggle visible (label-less)
     - <= 760px (mobile):         drawer toggle visible
                                  (already handled by §4985)

   At desktop widths the horizontal nav gets full hub-label space
   (no `display:none` on .lbl) so 7 hubs read cleanly.
*/
@media (min-width: 1281px) {
  /* Desktop: only horizontal nav. Drawer toggle is dead chrome. */
  .top-bar .drawer-toggle {
    display: none !important;
  }
  /* Restore full hub labels at desktop (the 1500px rule hid them) */
  .top-bar-nav .tb-link .lbl {
    display: inline !important;
  }
  /* Tight kerning so all 7 hubs fit between brand + chrome actions
     without overflow. */
  .top-bar-nav .tb-link {
    padding: 6px 9px;
    font-size: var(--type-13);
    gap: 6px;
  }
  .top-bar-nav .tb-link .ms {
    font-size: var(--type-18);
  }
}

@media (max-width: 1280px) and (min-width: 761px) {
  /* Tablet: only drawer toggle. Horizontal nav hidden. */
  .top-bar .top-bar-nav {
    display: none !important;
  }
  .top-bar .drawer-toggle {
    display: inline-flex !important;
  }
}

/* ============================================================================
   §FINAL-28 — e2e P0 closures (mobile audit 2026-05-13)
   Three fixes that landed late so the cascade tail is the safest spot:

     1. --accent-ink and --accent-line never got re-bound when the
        accent rolled from indigo → brand green (§FINAL-17). The
        global `a { color: var(--accent-ink); }` at styles.css:200
        therefore still rendered every prose link as indigo-700,
        and `.section p a` border-bottoms used indigo-30%-line. Fix
        both tokens here so the whole prose-anchor cascade lights up
        brand green consistently in light AND dark.

     2. The `.heat` table on legal/sub-processors.html (and any other
        page using the `heat` class) had no overflow strategy. On
        narrow viewports the first column header "SUB-PROCESSOR"
        couldn't word-break inside its forced ~30px width and
        rendered as a vertical letter stack. Force horizontal scroll
        inside `.container` instead of breaking layout.

     3. Tiny safety net for any `<table>` directly inside `.section
        .container` that lacks its own wrap — same overflow-x rule.
   ========================================================================== */
:root, :root[data-theme="light"] {
  /* Deeper green so prose links hit WCAG AA (4.5:1+) on --bg #fbfbfd.
     #6366f1 is 4.38:1 — fails AA for body text — so use #4338ca
     (9.06:1) for ink-weight prose anchors. */
  --accent-ink:  #4338ca !important;
  --accent-line: var(--kye-color-brand-line) !important;
}
:root[data-theme="dark"] {
  /* On dark, brand-200 (#A8DAB5) over #0a0e1a clears 12:1 — use the
     brighter sage so links still read as "green" not "white-ish". */
  --accent-ink:  #A8DAB5 !important;
  --accent-line: var(--kye-color-brand-line) !important;
}

/* Tables: never let a long single-word column header force a
   single-character column. Wrap word-break inside cells, allow the
   table to overflow its container horizontally, and reset the
   collapsed-letter-stack failure mode. */
.section .container > table,
.section .container > .table-wrap,
table.heat {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
table.heat thead, table.heat tbody, table.heat tr { display: table; width: 100%; table-layout: auto; }
table.heat th, table.heat td {
  padding: 10px 12px;
  font-size: var(--type-13);
  line-height: 1.5;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  text-align: left;
  /* The KEY rule: a forced-narrow column with a 13-char single word
     MUST break the word rather than rebalance to a 1-char column. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
table.heat th {
  font-weight: 600;
  color: var(--text);
  background: var(--accent-soft);
  white-space: normal;
}
@media (max-width: 760px) {
  table.heat { font-size: var(--type-12); }
  table.heat th, table.heat td { padding: 8px 10px; }
}

/* === §FINAL-99 — defensive wordmark lock ============================
   User-reported regression on mobile Safari: the "KYE" wordmark inside
   .brand-mark--wordmark renders as three vertically-stacked letters
   (K above Y above E) despite earlier white-space:nowrap fixes. Root
   cause: the .brand-mark base rule applies width:28px at the 480px
   media query, which is narrower than the 3-letter wordmark content.
   The wordmark variant's earlier width:auto!important didn't always
   win the cascade across legacy rules at lines 2594 + 2889.

   This final rule has selector specificity (0,2,0) + the !important
   strap so it cannot be beaten by anything earlier in the cascade.
   Active at every viewport. ALWAYS keep this block last in the file. */
html .brand-mark--wordmark,
html .top-bar .brand-mark--wordmark,
.brand .brand-mark--wordmark {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  width: auto !important;
  height: auto !important;
  min-width: 46px !important;
  padding: 5px 10px !important;
  font-size: var(--type-13) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  html .brand-mark--wordmark,
  html .top-bar .brand-mark--wordmark,
  .brand .brand-mark--wordmark {
    min-width: 44px !important;
    padding: 4px 9px !important;
    font-size: var(--type-12) !important;
  }
}

/* === §FINAL-100 — top-bar nav/actions reserved gap + footer chevron visibility =
   User reports: (1) GitHub button overlaps the last hub label on desktop;
   (2) footer disclosure not visibly collapsible — the chevron is too dim
   to see, especially on dark mode.

   Fixes:
   - .top-bar-actions gets explicit margin-left so it can never crowd the
     hub bar; .top-bar-nav clamps its max-width to leave a 24px reserve.
   - .footer-col > summary::after bumped to var(--text) at full opacity so
     the +/- glyph is unambiguous in both themes. */
.top-bar-inner > .top-bar-actions { margin-left: 24px !important; }
.top-bar-inner > .top-bar-nav { max-width: calc(100% - 380px); }
@media (max-width: 1280px) {
  .top-bar-inner > .top-bar-actions { margin-left: 12px !important; }
}

@media (min-width: 761px) {
  .footer-col > summary::after {
    color: var(--text) !important;
    opacity: 0.85 !important;
    font-size: var(--type-18) !important;
    font-weight: 700 !important;
  }
  .footer-col:not([open]) > summary::after { opacity: 1 !important; }
  .footer-col > summary { padding-right: 4px; }
}

/* === §FINAL-101 — KYE wordmark ™ superscript ====================== */
.brand-mark--wordmark .brand-mark-tm {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  opacity: 0.92;
}