@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* =========================================================
   SUBSTRATE — site styles
   Type:   Instrument Sans (body), Instrument Serif (italic accent), JetBrains Mono (technical)
   Palette: warm off-white surface, deep cool-ink text, single cyan accent, one dark band
   ========================================================= */

:root {
  /* Light theme — surfaces */
  --bg:           oklch(0.985 0.004 80);
  --bg-elev:     #ffffff;
  --bg-panel:    oklch(0.97 0.005 80);
  --bg-2:        oklch(0.97 0.005 80);
  --bg-3:        oklch(0.965 0.006 80);
  --bg-rule:     oklch(0.93 0.006 80);
  --bg-soft:     oklch(0.965 0.006 80);
  --rule:        oklch(0.93 0.006 80);

  /* Ink */
  --ink:         oklch(0.205 0.018 250);
  --ink-2:       oklch(0.36 0.012 250);
  --ink-3:       oklch(0.52 0.01 250);
  --ink-4:       oklch(0.68 0.008 250);
  --ink-5:       oklch(0.82 0.006 250);

  /* Accent (cool, primary hue) */
  --accent:      oklch(0.58 0.13 238);
  --accent-2:    oklch(0.46 0.13 238);
  --accent-soft: oklch(0.93 0.04 238);

  /* Accent (warm, secondary hue — used sparingly for rhythm) */
  --accent-warm:      oklch(0.62 0.12 60);
  --accent-warm-2:    oklch(0.5  0.12 60);
  --accent-warm-soft: oklch(0.94 0.04 70);

  /* States */
  --ok:          oklch(0.58 0.12 155);
  --teal:        oklch(0.54 0.13 195);
  --warn:        oklch(0.72 0.14 70);
  --bad:         oklch(0.6  0.18 25);

  /* Dark band emphasis (kept as fixed-dark in light theme) */
  --dark-bg:     oklch(0.17 0.018 250);
  --dark-bg-2:   oklch(0.13 0.018 250);
  --dark-ink:    oklch(0.95 0.005 250);
  --dark-ink-2:  oklch(0.78 0.01 250);
  --dark-ink-3:  oklch(0.6  0.012 250);
  --dark-rule:   oklch(0.27 0.018 250);

  /* Type */
  --ff-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --shadow-sm: 0 1px 0 rgba(20,20,30,0.04), 0 1px 2px rgba(20,20,30,0.03);
  --shadow-md: 0 1px 0 rgba(20,20,30,0.04), 0 12px 28px -16px rgba(20,20,30,0.10);
}

[data-theme="dark"] {
  --bg:           oklch(0.155 0.018 250);
  --bg-elev:      oklch(0.19 0.018 250);
  --bg-panel:     oklch(0.19 0.018 250);
  --bg-2:         oklch(0.19 0.018 250);
  --bg-3:         oklch(0.22 0.018 250);
  --bg-rule:      oklch(0.28 0.018 250);
  --bg-soft:      oklch(0.22 0.018 250);
  --rule:         oklch(0.28 0.018 250);

  --ink:          oklch(0.96 0.005 250);
  --ink-2:        oklch(0.82 0.01 250);
  --ink-3:        oklch(0.64 0.012 250);
  --ink-4:        oklch(0.52 0.012 250);
  --ink-5:        oklch(0.40 0.014 250);

  --accent:       oklch(0.72 0.14 238);
  --accent-2:     oklch(0.62 0.14 238);
  --accent-soft:  oklch(0.30 0.07 238);

  --accent-warm:      oklch(0.76 0.13 65);
  --accent-warm-2:    oklch(0.66 0.13 65);
  --accent-warm-soft: oklch(0.30 0.07 65);

  /* In dark theme the "dark band" becomes a slightly elevated panel */
  --dark-bg:      oklch(0.19 0.018 250);
  --dark-bg-2:    oklch(0.22 0.018 250);
  --dark-ink:     oklch(0.96 0.005 250);
  --dark-ink-2:   oklch(0.82 0.01 250);
  --dark-ink-3:   oklch(0.62 0.012 250);
  --dark-rule:    oklch(0.32 0.018 250);
  --teal:         oklch(0.70 0.14 195);

  --shadow-sm: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 1px 0 rgba(0,0,0,0.4), 0 12px 28px -16px rgba(0,0,0,0.5);
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--ink-3);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-4); background: var(--bg-2); }
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Accent washes — alternating cool/warm anchors down the page.
   Pushed harder for visible cadence. */
.section.problem {
  background-image:
    radial-gradient(60% 70% at 8% -5%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(40% 50% at 100% 100%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 65%);
  background-repeat: no-repeat;
}
#platform {
  background-image:
    radial-gradient(65% 60% at 95% 100%, color-mix(in oklab, var(--accent-warm) 14%, transparent), transparent 60%),
    radial-gradient(40% 45% at 0% 10%, color-mix(in oklab, var(--accent-warm) 8%, transparent), transparent 65%);
  background-repeat: no-repeat;
}
.section.deploy {
  background-image:
    radial-gradient(60% 65% at 95% 5%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(45% 50% at 0% 95%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 65%);
  background-repeat: no-repeat;
}
#intelligence {
  background-image:
    radial-gradient(55% 65% at 5% 95%, color-mix(in oklab, var(--accent-warm) 13%, transparent), transparent 60%),
    radial-gradient(40% 50% at 100% 5%, color-mix(in oklab, var(--accent-warm) 7%, transparent), transparent 65%);
  background-repeat: no-repeat;
}
[data-theme="dark"] .section.problem {
  background-image:
    radial-gradient(60% 70% at 8% -5%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(40% 50% at 100% 100%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 65%);
}
[data-theme="dark"] #platform {
  background-image:
    radial-gradient(65% 60% at 95% 100%, color-mix(in oklab, var(--accent-warm) 18%, transparent), transparent 60%),
    radial-gradient(40% 45% at 0% 10%, color-mix(in oklab, var(--accent-warm) 11%, transparent), transparent 65%);
}
[data-theme="dark"] .section.deploy {
  background-image:
    radial-gradient(60% 65% at 95% 5%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(45% 50% at 0% 95%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 65%);
}
[data-theme="dark"] #intelligence {
  background-image:
    radial-gradient(55% 65% at 5% 95%, color-mix(in oklab, var(--accent-warm) 17%, transparent), transparent 60%),
    radial-gradient(40% 50% at 100% 5%, color-mix(in oklab, var(--accent-warm) 11%, transparent), transparent 65%);
}
[data-theme="dark"] .section.cta-section {
  background-image:
    radial-gradient(70% 70% at 50% 0%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 65%);
  background-color: var(--dark-bg);
}

/* ----- base ----- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* clip prevents sideways scroll from wide decorative elements (e.g. the hero
   console mockup) on mobile, without breaking the sticky header or inner
   horizontal scrollers like .cap-table-wrap */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
button { font: inherit; cursor: pointer; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ----- shared atoms ----- */
.mono, .mono-label {
  font-family: var(--ff-mono);
  font-feature-settings: "ss01" on, "calt" off;
}
.mono-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.dim { color: var(--ink-4); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--ff-sans);
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-1);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(2px); }
.btn-lg { padding: 13px 20px; font-size: 15px; }
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: oklch(0.27 0.022 250); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-5);
}
.btn-ghost:hover { border-color: var(--ink-4); background: var(--bg-elev); }

.link-quiet {
  color: var(--ink-2);
  border-bottom: 1px solid var(--bg-rule);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
}
.link-quiet:hover { color: var(--ink); border-color: var(--ink-3); }
.link-quiet .arrow { font-family: var(--ff-mono); }

.tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-left: 6px;
  background: var(--accent-soft);
  color: var(--accent-2);
  border-radius: 3px;
  vertical-align: 2px;
}
/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bg-rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-mark { color: var(--ink); display: inline-flex; }
.brand-word { font-family: var(--ff-sans); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 12px;
  flex: 1;
}
.nav-links a {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
/* CTA that only appears inside the mobile dropdown menu */
.nav-links-cta { display: none; }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .link-quiet { border: none; padding: 0; font-size: 14px; }
/* Header CTA matches the homepage nav button: larger, bolder, cyan glow. */
.nav-cta .btn-primary { padding: 10px 18px; font-size: 14px; font-weight: 600; }
[data-style="plat"] .nav-cta .btn-primary { box-shadow: 0 8px 26px -12px rgba(70, 184, 255, 0.8); }

/* ── HAMBURGER / MOBILE NAV ── */
.nav-open-cb { display: none; }
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--r-1);
  transition: background 0.15s;
}
.nav-burger:hover { background: var(--bg-soft); }
.nav-burger span {
  display: block;
  height: 1.5px;
  width: 20px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.15s ease;
  transform-origin: center;
}
.nav-open-cb:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open-cb:checked ~ .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open-cb:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 85% 8%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(55% 45% at 6% 92%, color-mix(in oklab, var(--accent-warm) 16%, transparent), transparent 65%),
    var(--bg);
}
.hero::before { display: none; }
[data-theme="dark"] .hero::before { display: none; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.hero-copy { padding-top: 8px; }

.display {
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  font-weight: 600;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}
.display em { font-size: 0.78em; font-family: var(--ff-sans); font-style: normal; font-weight: 400; color: var(--ink-2); letter-spacing: -0.02em; display: block; margin-top: 6px; line-height: 1.2; }

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 0 32px;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }

.hero-meta {
  list-style: none;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--bg-rule);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0 32px;
}
.hero-meta li {
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* hero visual ----- */
.hero-vis {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hv-card {
  background: var(--bg-elev);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--bg-rule));
  border-radius: var(--r-2);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 10%, transparent),
    0 20px 50px -22px color-mix(in oklab, var(--accent) 35%, transparent),
    0 12px 28px -16px rgba(20,20,30,0.18);
  overflow: hidden;
  font-size: 13px;
  position: relative;
}
.hv-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-2);
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 50%, transparent) 0%,
    transparent 40%,
    transparent 60%,
    color-mix(in oklab, var(--accent-warm) 30%, transparent) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hv-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg-rule);
  background: var(--bg-soft);
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.hv-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok) 20%, transparent);
  animation: hv-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}
.hv-title { color: var(--ink-2); }
.hv-tail { margin-left: auto; color: var(--ink-3); }

.hv-body { padding: 6px 0; }
.hv-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 0.9fr 1.2fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 9px 16px 9px;
  border-top: 1px solid var(--bg-rule);
}
.hv-row:first-child { border-top: none; }
.hv-row-head {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: none;
  background: transparent;
}
.hv-name { font-weight: 500; }
.hv-drift {
  grid-column: 1 / -1;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-4);
}

.state {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
}
.state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.state-active { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.state-drain  { color: var(--warn); background: color-mix(in oklab, var(--warn) 16%, transparent); }
.state-susp   { color: var(--ink-3); background: var(--bg-soft); }

.bar {
  position: relative;
  height: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-rule);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}
.bar b { position: relative; font-weight: 500; }

.hv-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--bg-rule);
  background: var(--bg-soft);
  display: grid;
  gap: 4px;
}
.hv-foot-row { display: flex; align-items: baseline; gap: 12px; font-size: 12px; }
.hv-foot-row .mono-label { width: 50px; flex-shrink: 0; }
.evt { color: var(--ink-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt b { font-weight: 600; padding: 1px 5px; border-radius: 2px; margin-right: 4px; font-family: var(--ff-mono); font-size: 10.5px; }
.evt b.ok   { color: var(--ok);     background: color-mix(in oklab, var(--ok) 14%, transparent); }
.evt b.warn { color: var(--warn);   background: color-mix(in oklab, var(--warn) 16%, transparent); }
.evt b.bad  { color: var(--bad);    background: color-mix(in oklab, var(--bad) 14%, transparent); }
.evt b.drift { color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); }

.hv-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--bg-rule);
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--ink-2);
}

/* ============================================================
   SECTION SCAFFOLDING
   Sections separate by alternating surface tone, not hairlines.
   Hero is type-position 1; .section elements alternate from there.
   ============================================================ */
.section { padding: 96px 0; background: var(--bg); position: relative; }
body > section.section:nth-of-type(even) { background: var(--bg-2); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .kicker { margin-bottom: 18px; }

/* Warm-keyed sections: kicker label takes the secondary accent so the
   page reads as a cool/warm cadence rather than one note. */
#platform .section-head .kicker .mono-label,
#intelligence .section-head .kicker .mono-label {
  color: var(--accent-warm-2);
}
[data-theme="dark"] #platform .section-head .kicker .mono-label,
[data-theme="dark"] #intelligence .section-head .kicker .mono-label {
  color: var(--accent-warm);
}
.h-display {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.h-display em {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.02em;
  display: block;
  margin-top: 12px;
  font-size: 0.78em;
}
[data-theme="dark"] .h-display em { color: var(--ink-3); }
.section-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}

/* ============================================================
   PROBLEM
   ============================================================ */
/* two-card problem layout (homepage gap section) */
.prob-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin: 40px 0 36px;
}
.prob-card {
  padding: 32px 28px 36px;
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
}
.prob-card .mono-label {
  display: block;
  margin-bottom: 20px;
  color: var(--accent);
}
[data-theme="dark"] .prob-card .mono-label { color: var(--accent); }
.prob-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.prob-conclusion {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 28px;
}

/* ============================================================
   ROLES
   ============================================================ */
.role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  border-top: 1px solid var(--bg-rule);
  border-left: 1px solid var(--bg-rule);
}
.role-list-three {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.role {
  padding: 34px 32px 36px;
  border-right: 1px solid var(--bg-rule);
  border-bottom: 1px solid var(--bg-rule);
}
.role header { margin-bottom: 18px; }
.role .mono-label { display: block; margin-bottom: 10px; }
.role h3 {
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  max-width: 28ch;
  text-wrap: pretty;
}
.role-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.role-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}
.role-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--ink-4);
}

/* ============================================================
   COMPARE
   ============================================================ */
.compare-wrap {
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.compare th, .compare td {
  padding: 14px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--bg-rule);
}
.compare thead th {
  background: var(--bg-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.3;
}
.compare thead th.us-col {
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 12%, var(--bg-soft));
  border-bottom: 2px solid var(--accent);
}
.compare .cap-col { width: 32%; }
.compare tbody td:first-child { color: var(--ink); font-weight: 500; }
.compare tbody tr:hover td { background: var(--bg-soft); }
.compare tbody tr:hover td.us { background: color-mix(in oklab, var(--accent) 14%, var(--bg-soft)); }

.cell-yes, .cell-no, .cell-partial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cell-yes::before { content: "●"; color: var(--ok); }
.cell-yes.us { font-weight: 600; color: var(--ink); }
.cell-yes.us::before { color: var(--accent); }
.cell-no { color: var(--ink-4); }
.cell-no::before { content: "—"; color: var(--ink-5); font-family: var(--ff-mono); }
.cell-partial { color: var(--warn); }
.cell-partial::before { content: "◐"; color: var(--warn); }

td.us { background: color-mix(in oklab, var(--accent) 6%, transparent); }

.compare-foot {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-3);
  max-width: 90ch;
  line-height: 1.5;
}

/* ============================================================
   CAPABILITY TABLE
   Text-heavy 3-column matrix (Capability | What it is |
   Why it matters for agents). Scrolls on tablet, stacks into
   labelled cards on phones.
   ============================================================ */
.cap-table-wrap {
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
  margin-top: 4px;
}
.cap-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.cap-table th, .cap-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bg-rule);
  line-height: 1.62;
}
.cap-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
.cap-table .cap-name-col { width: 22%; }
.cap-table thead th:last-child { color: var(--ink); }
.cap-table tbody tr:last-child td { border-bottom: none; }
.cap-table tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
  width: 22%;
}
.cap-table tbody td:nth-child(2) { color: var(--ink-2); width: 40%; }
.cap-table tbody td:last-child {
  color: var(--ink-3);
  border-left: 1px solid var(--bg-rule);
  background: color-mix(in oklab, var(--accent) 4%, transparent);
}
.cap-table tbody tr:hover td { background: var(--bg-soft); }
.cap-table tbody tr:hover td:last-child { background: color-mix(in oklab, var(--accent) 9%, var(--bg-soft)); }

.cap-closer {
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: color-mix(in oklab, var(--accent) 6%, var(--bg-elev));
  padding: 32px 34px;
  max-width: 900px;
}
.cap-closer p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 70ch;
}
.cap-closer-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Capability maturity status ----
   Each capability is labelled with what you get today so the page reads as an
   honest map, not a list of everything the platform may eventually become. */
.cap-status {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 9px 3px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cap-status.is-available {
  color: var(--ok);
  background: color-mix(in oklab, var(--ok) 15%, transparent);
  border-color: color-mix(in oklab, var(--ok) 34%, transparent);
}
.cap-status.is-preview {
  color: var(--warn);
  background: color-mix(in oklab, var(--warn) 15%, transparent);
  border-color: color-mix(in oklab, var(--warn) 34%, transparent);
}
.cap-status.is-planned {
  color: var(--ink-3);
  background: color-mix(in oklab, var(--ink-4) 13%, transparent);
  border-color: var(--bg-rule);
}

/* Legend that explains the three tiers at the top of the page. */
.cap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: flex-start;
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.cap-legend-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30ch;
}
.cap-legend-item .cap-status { margin-top: 0; flex: none; }

@media (max-width: 720px) {
  /* Stack each row into a labelled card; the wide matrix does not
     survive a phone width, so the header row is dropped and each
     cell carries its own label from data-label. */
  .cap-table-wrap { overflow-x: visible; }
  .cap-table { min-width: 0; }
  .cap-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cap-table, .cap-table tbody, .cap-table tr, .cap-table td { display: block; width: auto !important; }
  .cap-table tr {
    border-bottom: 1px solid var(--bg-rule);
    padding: 6px 0;
  }
  .cap-table tbody tr:last-child { border-bottom: none; }
  .cap-table td {
    border-bottom: none !important;
    border-left: none !important;
    background: none !important;
    padding: 10px 18px;
  }
  .cap-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 4px;
  }
  .cap-table tbody td:first-child::before { display: none; }
  .cap-table tbody td:first-child { font-size: 16px; padding-bottom: 4px; }
  .cap-closer { padding: 24px 22px; }
  .cap-closer p { font-size: 16px; }
}

/* ============================================================
   DEPLOY TIERS
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.tier {
  background: var(--bg-elev);
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.tier-feature {
  border-color: var(--ink);
  background: var(--bg);
  position: relative;
}
.tier-feature::after {
  content: "Primary configuration for regulated buyers";
  position: absolute;
  top: -12px; left: 22px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.tier header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.tier-tag {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  padding: 3px 7px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-rule);
  border-radius: 3px;
}
.tier h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.tier p {
  color: var(--ink-2);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
}
.tier-spec {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--bg-rule);
  display: grid;
  gap: 8px;
}
.tier-spec li {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 12px;
  font-size: 13px;
}
.tier-spec li span:first-child {
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  align-self: center;
}
.tier-spec li span:last-child { color: var(--ink-2); }

/* ============================================================
   COMPLIANCE
   ============================================================ */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  border-top: 1px solid var(--bg-rule);
  border-left: 1px solid var(--bg-rule);
}
.comp {
  padding: 28px 24px 30px;
  border-right: 1px solid var(--bg-rule);
  border-bottom: 1px solid var(--bg-rule);
  background: transparent;
}
.comp .mono-label { display: block; margin-bottom: 10px; }
.comp h3 {
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 8px;
}
.comp p { font-size: 13.5px; color: var(--ink-3); margin: 0; line-height: 1.5; }
.comp .tag { vertical-align: 1px; }

/* ============================================================
   CTA
   ============================================================ */
.cta-section { padding: 96px 0; }
.cta-card {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-3);
  padding: 56px 56px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 40%, transparent), transparent 70%);
  pointer-events: none;
}
.cta-copy { position: relative; }
.cta-copy .mono-label { color: var(--ink-5); display: block; margin-bottom: 20px; }
.cta-copy h2 { color: var(--bg); margin-bottom: 18px; }
.cta-copy em { color: var(--bg); }
.cta-copy p { margin: 0; color: var(--ink-5); font-size: 16px; line-height: 1.55; max-width: 46ch; }

.cta-contact { position: relative; }
.cta-contact .mono-label { color: var(--ink-5); display: block; margin-bottom: 14px; }
.cta-contact p { margin: 0 0 22px; color: var(--ink-5); font-size: 16px; line-height: 1.55; max-width: 46ch; }
.cta-contact .btn-primary { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.cta-contact .btn-primary:hover { background: oklch(0.95 0.005 80); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--bg-rule);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
}
.footer-brand p {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  max-width: 36ch;
  line-height: 1.5;
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-weight: 500;
  margin: 0 0 14px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--ink-2);
  font-size: 14px;
}
.footer-col a:hover { color: var(--ink); }

.footer-foot {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--bg-rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .tiers { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .role-list { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
  /* hamburger: hide the header CTA so brand + burger always fit; the CTA moves
     into the dropdown menu (.nav-links-cta). The burger is absolutely pinned to
     the right edge so it never gets pushed off-screen by flex sizing. */
  .nav-inner { position: relative; }
  .nav-burger { display: flex; position: absolute; right: 32px; top: 50%; transform: translateY(-50%); }
  .nav-cta { display: none; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 12px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--bg-rule);
    box-shadow: 0 8px 24px -8px rgba(20,20,30,0.10);
    margin-left: 0;
    flex: none;
    z-index: 49;
  }
  .nav-open-cb:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 10px 12px; font-size: 15px; border-radius: var(--r-1); display: block; }
  .nav-links a:hover { background: var(--bg-soft); }
  .nav-links a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
  .nav-links-cta { display: block; margin-top: 6px; text-align: center; font-weight: 600; background: var(--accent); color: var(--on-accent); }
  .nav-links-cta:hover { background: var(--accent-2); color: #fff; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0; }
  .display { font-size: 40px; }
  .h-display { font-size: 28px; }
  .section-lede { font-size: 16px; }
  .lede { font-size: 16px; }
  .comp-grid { grid-template-columns: 1fr; }
  .prob-cards { grid-template-columns: 1fr; margin: 28px 0 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 24px; }
  .hv-row { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.7fr 0.9fr; column-gap: 8px; row-gap: 3px; font-size: 12px; }
  .compare thead th, .compare td { padding: 12px 10px; }
  .nav-cta .link-quiet { display: none; }
  .nav-inner .btn { padding: 8px 12px; font-size: 13px; }
  /* keep detailed SVG diagrams legible on phones: render at a readable
     min-width and let the diagram (not the page) scroll horizontally */
  .markitecture svg { min-width: 700px; }
}

@media (max-width: 480px) {
  .hero-vis { display: none; }
  .hero-meta { grid-template-columns: 1fr; gap: 16px 0; }
  .display { font-size: 34px; }
  .cta-card { padding: 28px 20px; }
}

/* ============================================================
   IDENTITY ARCHITECTURE — within section 02
   ============================================================ */
.arch-identity {
  margin-top: 14px;
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  padding: 28px 28px 30px;
  box-shadow: var(--shadow-sm);
}
.arch-identity-head { margin-bottom: 24px; }
.arch-identity-head .mono-label { display: block; margin-bottom: 10px; }
.arch-identity-head h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.2;
}
.arch-identity-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 80ch;
}
.arch-identity-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  border-top: 1px solid var(--bg-rule);
  padding-top: 24px;
}
.arch-identity-col > .mono-label { display: block; margin-bottom: 14px; }
.arch-identity-items { display: grid; gap: 14px; }
.arch-identity-items p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.arch-identity-items strong { color: var(--ink); font-weight: 600; }
.arch-identity-items code, .arch-identity-claims code {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-rule);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-2);
}
.arch-identity-claims {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.arch-identity-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.arch-identity-split > div {
  background: var(--bg-soft);
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-1);
  padding: 14px 14px 16px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.arch-identity-split strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.arch-identity-split p { margin: 0; }
.arch-identity-foot {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  border-top: 1px solid var(--bg-rule);
  padding-top: 14px;
}

/* ============================================================
   PROSE — build-vs-buy page long-form layout
   ============================================================ */
.prose-page { max-width: 760px; margin: 0 auto; padding: 64px 32px 96px; }
.prose-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); margin-bottom: 48px; letter-spacing: 0.04em; }
.prose-back:hover { color: var(--ink); }
.prose-page h1 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 32px; }
.prose-page h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 48px 0 14px; border-top: 1px solid var(--bg-rule); padding-top: 32px; }
.prose-page h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 10px; }
.prose-page p { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin: 0 0 16px; }
.prose-page p strong { color: var(--ink); font-weight: 600; }
.prose-page ul { margin: 0 0 16px; padding-left: 20px; }
.prose-page li { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-bottom: 6px; }
.prose-page .closing { font-size: 17px; font-weight: 500; color: var(--ink); font-style: italic; border-left: 3px solid var(--accent); padding-left: 16px; margin: 40px 0; }
.prose-page .prose-cta { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bg-rule); }

@media (max-width: 1080px) {
  .arch-identity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .arch-identity-split { grid-template-columns: 1fr; }
  .prose-page { padding: 40px 20px 64px; }
}

@media (max-width: 1080px) {
  .role-list-three { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .role-list-three { grid-template-columns: 1fr; }
}

/* Per-pillar progressive disclosure — collapsible technical detail */
.pillar-detail {
  max-width: 860px;
  border: 1px solid var(--bg-rule);
  border-radius: var(--r-2);
  background: var(--bg-soft);
  margin-top: 6px;
}
.pillar-detail > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 20px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color 0.15s ease;
}
.pillar-detail > summary::-webkit-details-marker { display: none; }
.pillar-detail > summary::before {
  content: '+';
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
  font-weight: 600;
}
.pillar-detail[open] > summary::before { content: '\2013'; }
.pillar-detail[open] > summary { border-bottom: 1px solid var(--bg-rule); color: var(--ink-2); }
.pillar-detail > summary:hover { color: var(--ink); }
.pillar-detail > :not(summary) { padding: 22px 20px; }

/* ============================================================
   HOMEPAGE PASS 2 — content blocks that had no CSS, plus rhythm accents
   ============================================================ */

/* Section kicker: aligned to the homepage eyebrow — accent-colored mono
   label, no leading bar, sitting flush at the content edge. */
.section-head .kicker .mono-label {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ----------------------------------------------------------------
   HOW KYC — "In practice" worked-example callout
   ---------------------------------------------------------------- */
.how-kyc {
  margin-top: 32px;
  padding: 28px 32px 30px;
  border: 1px solid var(--bg-rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.how-kyc-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}
[data-theme="dark"] .how-kyc-label { color: var(--accent); }
.how-kyc p {
  margin: 0 0 12px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.how-kyc p:last-child { margin-bottom: 0; }
.how-kyc p:nth-child(2) { font-size: 16px; color: var(--ink); font-weight: 500; }
.how-kyc code {
  font-family: var(--ff-mono);
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-rule);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink-2);
  line-height: 1.9;
  word-spacing: -0.05em;
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .how-kyc { padding: 22px 22px 24px; }
}

/* ============================================================
   HOMEPAGE-SPECIFIC ADDITIONS — moved here so the homepage can
   link styles.css instead of carrying its own embedded block
   ============================================================ */

/* ============================================================
   HOMEPAGE DIAGRAMS — markitecture (SVG) + six-step flow (HTML)
   Use site tokens via CSS variables; dark-mode picks up via
   [data-theme="dark"] overrides on the same tokens.
   ============================================================ */

/* ---- shared diagram framing ---- */
.diagram {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 40px 0 24px;
}
/* ---- MARKITECTURE SVG ---- */
.markitecture {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.markitecture svg { width: 100%; height: auto; display: block; }
.markitecture svg text { font-family: var(--ff-sans); }
.mk-fg { fill: var(--ink); }
.mk-muted { fill: var(--ink-3); }
.mk-line { stroke: var(--bg-rule); }
.mk-arrow { stroke: var(--ink-3); fill: none; }
.mk-plane { fill: none; stroke: var(--accent); }
.mk-neutral { fill: var(--bg-soft); stroke: var(--bg-rule); }
.mk-pillar { fill: var(--accent-soft); stroke: var(--accent); }
.mk-pillar-foundation { fill: color-mix(in oklab, var(--accent) 18%, var(--bg-elev)); stroke: var(--accent); }
.mk-pillar-text { fill: var(--accent-2); }
[data-theme="dark"] .mk-pillar-text { fill: var(--accent); }
[data-theme="dark"] .mk-pillar-foundation { fill: color-mix(in oklab, var(--accent) 24%, var(--bg-elev)); }
/* semantic pillar variants — ok (green) for runtime, warn (amber) for lifecycle */
.mk-ok-box    { fill: color-mix(in oklab, var(--ok)   12%, var(--bg-elev)); stroke: var(--ok); }
.mk-ok-text   { fill: var(--ok); }
.mk-teal-box  { fill: color-mix(in oklab, var(--teal) 12%, var(--bg-elev)); stroke: var(--teal); }
.mk-teal-text { fill: var(--teal); }
.mk-warn-box  { fill: color-mix(in oklab, var(--warn)  12%, var(--bg-elev)); stroke: var(--warn); }
.mk-warn-text { fill: var(--warn); }
[data-theme="dark"] .mk-teal-box  { fill: color-mix(in oklab, var(--teal) 24%, var(--bg-elev)); }

/* ---- PILLAR TEASER CARDS ---- */
.cap-index {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.cap-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--bg-rule);
}
.cap-num {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.cap-body { max-width: 72ch; }
.cap-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.2;
}
.cap-desc {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}
.cap-row:hover .cap-num { color: var(--accent); }
@media (max-width: 640px) {
  .cap-row { grid-template-columns: 1fr; row-gap: 8px; padding: 24px 0; }
  .cap-num { order: -1; }
}

/* Print niceties */
@media print {
  .nav, .cta-section, .footer { display: none; }
  .section { page-break-inside: avoid; padding: 24px 0; }
  body { background: #fff; }
}


/* =========================================================================
   PLAT-CONSOLE  —  style alternative (site default). Toggle to "substrate"
   for the original look. Adds a `data-style` axis orthogonal to `data-theme`
   so all four combinations (plat/substrate x light/dark) resolve from tokens.
   Scoped entirely under [data-style="plat"]; Substrate is left untouched.
   ========================================================================= */

/* ---- tokens: Plat light (also carries fonts + radii for both plat themes) ---- */
:root[data-style="plat"] {
  --bg:#F3F6FB; --bg-elev:#FFFFFF; --bg-panel:#EAEFF6; --bg-2:#EAEFF6; --bg-3:#EEF2F8;
  --bg-rule:#D3DCEA; --bg-soft:#EEF2F8; --rule:#D3DCEA;
  --ink:#101D30; --ink-2:#3E4E67; --ink-3:#66748C; --ink-4:#8592A8; --ink-5:#AAB4C6;
  --ok:#0C9A70; --teal:#0C9A70; --warn:#B67514; --bad:#D9492F;
  --accent:#0E7CC0; --accent-2:#0A5F97; --accent-soft:#DCEBFA;
  --accent-warm:#D9492F; --accent-warm-2:#B23A25; --accent-warm-soft:#FBE3DD;
  --violet:#5B49C8;
  --on-accent:#FFFFFF;
  --dark-bg:#111832; --dark-bg-2:#0F1630; --dark-ink:#DEE5F5; --dark-ink-2:#A2AECC; --dark-ink-3:#77839F; --dark-rule:#263050;
  --ff-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif:"Schibsted Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ff-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ff-display:"Schibsted Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --r-1:5px; --r-2:8px; --r-3:12px;
  --shadow-sm:0 1px 0 rgba(16,29,48,.04), 0 1px 2px rgba(16,29,48,.05);
  --shadow-md:0 1px 0 rgba(16,29,48,.04), 0 20px 44px -24px rgba(16,29,48,.22);
}
/* ---- tokens: Plat dark (colours only; fonts/radii inherit from the block above) ---- */
[data-theme="dark"][data-style="plat"] {
  --bg:#090D1A; --bg-elev:#111832; --bg-panel:#0F1630; --bg-2:#0F1630; --bg-3:#131B33;
  --bg-rule:#263050; --bg-soft:#121A31; --rule:#263050;
  --ink:#DEE5F5; --ink-2:#A2AECC; --ink-3:#77839F; --ink-4:#59637F; --ink-5:#3E465F;
  --ok:#46E0C0; --teal:#46E0C0; --warn:#E8B45A; --bad:#FF6B5E;
  --accent:#46B8FF; --accent-2:#2E97E4; --accent-soft:#16233F;
  --accent-warm:#FF7A66; --accent-warm-2:#E0523B; --accent-warm-soft:#2A1A22;
  --violet:#9E86FF;
  --on-accent:#06172A;
  --shadow-sm:0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 1px 0 rgba(0,0,0,.4), 0 24px 60px -30px rgba(0,0,0,.75);
}

/* ---- component treatments ---- */
/* subtle top glow; retire the Substrate radial section washes for a flatter plane */
[data-style="plat"] body{
  background-image:radial-gradient(75% 45% at 50% -8%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%);
  background-repeat:no-repeat;
}
[data-style="plat"] .hero,
[data-style="plat"] .section,
[data-style="plat"] #platform,
[data-style="plat"] #intelligence{ background-image:none !important; }
[data-theme="dark"][data-style="plat"] .section.cta-section{ background-color:var(--dark-bg) !important; }

/* headings use the Schibsted display face; retire the serif-italic accent */
[data-style="plat"] .display,
[data-style="plat"] .h-display,
[data-style="plat"] .brand-word,
[data-style="plat"] h1, [data-style="plat"] h2, [data-style="plat"] h3{
  font-family:var(--ff-display); letter-spacing:-0.02em;
}
[data-style="plat"] em{ font-family:inherit; font-style:normal; }
[data-style="plat"] .display em,
[data-style="plat"] .h-display em{ font-family:var(--ff-display); color:var(--ink-2); }

[data-style="plat"] .mono-label{ letter-spacing:.12em; }

/* buttons: signal-cyan primary + sharper radius */
[data-style="plat"] .btn{ border-radius:8px; }
[data-style="plat"] .btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
[data-style="plat"] .btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }

/* gradient accent for a hero phrase (matches the Plat-Console concept) */
[data-style="plat"] .grad{
  background:linear-gradient(100deg, var(--accent), var(--violet) 62%, var(--accent-warm));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* bolder Schibsted headings in Plat (match the concept's weight) */
[data-style="plat"] .display,
[data-style="plat"] .h-display{ font-weight:700; }

/* compact type scale + spacing to match the concept homepage exactly */
[data-style="plat"] .display{ font-size:clamp(38px,5vw,60px); line-height:1.02; letter-spacing:-0.03em; margin:0 0 20px; }
[data-style="plat"] .h-display{ font-size:clamp(26px,3.5vw,42px); line-height:1.08; letter-spacing:-0.02em; margin:0 0 16px; }
[data-style="plat"] .section{ padding:60px 0; }
[data-style="plat"] .lede{ font-size:17px; }
[data-style="plat"] .section-lede{ font-size:16px; }
[data-style="plat"] .prob-card .pc-title{ font-size:20px; }
[data-style="plat"] .prob-card p{ font-size:15px; }

/* hero eyebrow (Plat only), cyan mono, matching the concept */
.hero-eyebrow{ display:none; }
.hero-eyebrow .mono-label{ color:var(--accent); }
[data-style="plat"] .hero-eyebrow{ display:block; margin-bottom:16px; }

/* brand mark in signal cyan on the Plat style */
[data-style="plat"] .brand-mark{ color:var(--accent); }

/* brand icon: rounded mark in Plat, classic 3-square mark in Substrate */
.brand-mark .ic-classic{ display:none; }
[data-style="substrate"] .brand-mark .ic-plat{ display:none; }
[data-style="substrate"] .brand-mark .ic-classic{ display:block; }

/* feature cards: concept's via-trace module header (schematic in Plat) */
.prob-card .pc-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.prob-card .pc-head .mono-label{ display:inline; margin:0; color:var(--accent); }
.prob-card .pc-title{ font-size:21px; font-weight:600; letter-spacing:-0.01em; margin:0 0 14px; color:var(--ink); }
.prob-card .via, .prob-card .tr, .prob-card .ix{ display:none; }
[data-style="plat"] .prob-card{ border-radius:8px; transition:border-color .16s; }
[data-style="plat"] .prob-card .pc-title{ font-family:var(--ff-display); font-weight:700; }
[data-style="plat"] .prob-card .via{ display:block; width:8px; height:8px; border-radius:2px; flex-shrink:0; box-shadow:0 0 8px currentColor; }
[data-style="plat"] .prob-card .tr{ display:block; height:1px; background:var(--rule); flex:1; min-width:8px; }
[data-style="plat"] .prob-card .ix{ display:block; font-family:var(--ff-mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; }
[data-style="plat"] .prob-cards .prob-card:nth-child(1) .via{ background:var(--accent); color:var(--accent); }
[data-style="plat"] .prob-cards .prob-card:nth-child(2) .via{ background:var(--accent-warm); color:var(--accent-warm); }
[data-style="plat"] .prob-cards .prob-card:nth-child(3) .via{ background:var(--ok); color:var(--ok); }
[data-style="plat"] .prob-cards .prob-card:nth-child(1):hover{ border-color:var(--accent); }
[data-style="plat"] .prob-cards .prob-card:nth-child(2):hover{ border-color:var(--accent-warm); }
[data-style="plat"] .prob-cards .prob-card:nth-child(3):hover{ border-color:var(--ok); }

/* the visual-style switch reuses the .theme-toggle chrome */
.style-toggle svg{ width:15px; height:15px; }


/* =========================================================================
   HOMEPAGE (Plat-Console concept) — scoped under html.hp so it never
   collides with the Substrate/other-page rules above. Moved here from the
   index.html inline <style> for a single source of truth.
   ========================================================================= */
html.hp{--bg:#090D1A;--bg-1:#0C1122;--panel:#111832;--rule:#1E2748;--rule-2:#2B3760;
  --ink:#DEE5F5;--ink-2:#93A1C4;--ink-3:#606E93;
  --cyan:#46B8FF;--coral:#FF7A66;--mint:#46E0C0;--violet:#9E86FF;
  --nav-bg:rgba(9,13,26,.8);--card-shadow:0 30px 70px -34px rgba(0,0,0,.8);
  --glow-a:rgba(70,184,255,.12);--glow-b:rgba(255,122,102,.08);
  --ff-display:"Schibsted Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;}
html.hp[data-theme="light"]{--bg:#F3F6FB;--bg-1:#E9EEF6;--panel:#FFFFFF;--rule:#DCE3EE;--rule-2:#C4CFDF;
  --ink:#101D30;--ink-2:#44546C;--ink-3:#6B7A90;
  --cyan:#0E7CC0;--coral:#D9492F;--mint:#0C9A70;--violet:#5B49C8;
  --nav-bg:rgba(243,246,251,.82);--card-shadow:0 24px 50px -30px rgba(16,29,48,.26);
  --glow-a:rgba(70,140,220,.10);--glow-b:rgba(230,110,90,.07);}
html.hp[data-theme="light"] .btn-primary{color:#fff;}
html.hp[data-theme="light"] .btn-primary:hover{color:#06172a;}
html.hp *{box-sizing:border-box;}
html.hp{scroll-behavior:smooth;}
html.hp body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
html.hp body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 44% at 72% 6%, var(--glow-a), transparent 62%),radial-gradient(46% 40% at 12% 96%, var(--glow-b), transparent 62%);}
html.hp a{color:inherit;text-decoration:none;}
html.hp img, html.hp svg{display:block;max-width:100%;}
html.hp .wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:1;}
html.hp .mono{font-family:var(--ff-mono);}
html.hp .eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
html.hp .nav{position:sticky;top:0;z-index:30;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);}
html.hp .nav-inner{display:flex;align-items:center;gap:28px;height:62px;}
html.hp .brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:700;font-size:20px;letter-spacing:-.02em;}
html.hp .brand svg{color:var(--cyan);}
html.hp .nav-links{display:flex;gap:24px;font-size:14px;color:var(--ink-2);}
html.hp .nav-links a:hover{color:var(--cyan);}
html.hp .nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;}
html.hp .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:transparent;border:1px solid var(--rule-2);border-radius:8px;color:var(--ink-3);transition:.15s;flex-shrink:0;cursor:pointer;}
html.hp .theme-toggle:hover{color:var(--ink);border-color:var(--cyan);}
html.hp .theme-toggle svg{width:16px;height:16px;}
html.hp .theme-toggle .icon-sun{display:none;}
html.hp .theme-toggle .icon-moon{display:block;}
html.hp[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
html.hp[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
html.hp .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:10px 18px;border-radius:8px;border:1px solid var(--rule-2);color:var(--ink);transition:.16s;white-space:nowrap;}
html.hp .btn:hover{border-color:var(--cyan);color:var(--cyan);}
html.hp .btn-primary{background:var(--cyan);color:#06172a;border-color:var(--cyan);font-weight:600;box-shadow:0 8px 26px -12px rgba(70,184,255,.8);}
html.hp .btn-primary:hover{background:#6cc7ff;color:#06172a;}
html.hp .btn-lg{padding:13px 22px;font-size:15px;}
html.hp .hero{padding:56px 0 32px;}
html.hp .hero-grid{display:grid;grid-template-columns:1fr 1.22fr;gap:36px;align-items:stretch;}
html.hp .hero .eyebrow{display:block;margin-bottom:18px;font-size:13.5px;letter-spacing:.14em;}
html.hp h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance;}
html.hp h1 .g{background:linear-gradient(100deg,var(--cyan),var(--violet) 70%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent;}
html.hp .lede{font-size:17px;color:var(--ink-2);max-width:56ch;margin:0 0 26px;}
html.hp .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
html.hp .hero-note{margin:24px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:48ch;}
html.hp .hero-note strong{color:var(--ink);font-weight:600;}
html.hp .hero-note b{color:var(--cyan);font-weight:600;}
html.hp .pconsole{border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:var(--card-shadow);display:flex;flex-direction:column;}
html.hp .pc-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--bg-1);font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);}
html.hp .pc-bar .d1{width:9px;height:9px;border-radius:50%;background:var(--rule-2);}
html.hp .pc-path{margin-left:6px;}
html.hp .pc-tenant{margin-left:auto;color:var(--cyan);}
html.hp .pc-tbl{width:100%;border-collapse:collapse;font-family:var(--ff-mono);font-size:12px;}
html.hp .pc-tbl th{text-align:left;padding:9px 10px;color:var(--ink-3);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:10px;border-bottom:1px solid var(--rule);}
html.hp .pc-tbl td{padding:9px 10px;border-bottom:1px solid var(--rule);color:var(--ink-2);}
html.hp .pc-tbl .nm{color:var(--ink);}
html.hp .pc-tbl .dim{color:var(--ink-3);}
html.hp .pp{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid;}
html.hp .pp.on{color:var(--mint);border-color:rgba(70,224,192,.35);}
html.hp .pp.dr{color:var(--cyan);border-color:rgba(70,184,255,.35);}
html.hp .pp.su{color:var(--coral);border-color:rgba(255,122,102,.35);}
html.hp .pc-log{padding:12px 14px;font-family:var(--ff-mono);font-size:11px;line-height:1.95;color:var(--ink-3);background:var(--bg-1);border-top:1px solid var(--rule);flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;}
html.hp .pc-log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.hp .pc-log b{font-weight:600;}
html.hp .pc-log .ok{color:var(--mint);}
html.hp .pc-log .es{color:var(--violet);}
html.hp .pc-log .bad{color:var(--coral);}
html.hp .pc-log .seal{color:var(--cyan);}
html.hp .hero-meta{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:36px 0 0;padding:0;border:1px solid var(--rule);background:var(--rule);border-radius:8px;overflow:hidden;}
html.hp .hero-meta li{background:var(--bg);padding:16px;}
html.hp .hero-meta .k{font-family:var(--ff-mono);font-size:10.5px;color:var(--cyan);letter-spacing:.05em;display:block;margin-bottom:5px;text-transform:uppercase;}
html.hp .hero-meta .d{font-size:13px;color:var(--ink-2);}
html.hp section{padding:60px 0;position:relative;z-index:1;}
html.hp .band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg-1);}
html.hp .sec-head{max-width:900px;margin-bottom:38px;}
html.hp .sec-head .eyebrow{display:block;margin-bottom:14px;}
html.hp h2{font-family:var(--ff-display);font-weight:700;font-size:clamp(26px,3.5vw,42px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;}
html.hp h2 em{font-family:var(--ff-display);font-style:normal;font-weight:500;color:var(--ink-3);display:block;font-size:.62em;margin-top:6px;letter-spacing:-.01em;}
html.hp .sec-head p{color:var(--ink-2);font-size:16px;margin:0;max-width:720px;}
html.hp .sec-head p + p{margin-top:14px;}
html.hp .quiet-link{color:var(--cyan);font-family:var(--ff-mono);font-size:13px;}
html.hp .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
html.hp .mod{border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);padding:0 22px 24px;position:relative;transition:border-color .16s;}
html.hp .mod-h{display:flex;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid var(--rule);margin-bottom:18px;}
html.hp .mod .via{width:8px;height:8px;border-radius:2px;flex-shrink:0;box-shadow:0 0 8px currentColor;}
html.hp .mod .tr{height:1px;background:var(--rule-2);flex:1;min-width:8px;}
html.hp .mod .lb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);flex-shrink:0;}
html.hp .mod .ix{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);flex-shrink:0;}
html.hp .mod h3{font-family:var(--ff-display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);}
html.hp .mod p{color:var(--ink-2);font-size:14px;line-height:1.65;margin:0;}
html.hp .mod:nth-child(1) .via{background:var(--cyan);color:var(--cyan);}
html.hp .mod:nth-child(2) .via{background:var(--coral);color:var(--coral);}
html.hp .mod:nth-child(3) .via{background:var(--mint);color:var(--mint);}
html.hp .mod:nth-child(1):hover{border-color:var(--cyan);}
html.hp .mod:nth-child(2):hover{border-color:var(--coral);}
html.hp .mod:nth-child(3):hover{border-color:var(--mint);}
html.hp .conclusion{max-width:760px;margin:26px 0 0;color:var(--ink-2);font-size:16px;}
html.hp /* how-it-fits layer stack */
.stack{max-width:720px;}
html.hp .layer{border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);padding:16px 20px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
html.hp .layer .lt{font-family:var(--ff-display);font-weight:700;font-size:15px;}
html.hp .layer .ls{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);}
html.hp .layer.hl{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(70,184,255,.22);}
html.hp .layer.hl .lt{color:var(--cyan);}
html.hp .conn{display:flex;flex-direction:column;align-items:center;padding:2px 0;}
html.hp .conn i{width:1px;height:12px;background:var(--rule-2);}
html.hp .conn span{font-family:var(--ff-mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.05em;padding:2px 0;}
html.hp /* cta */
.cta{border:1px solid var(--rule-2);border-radius:16px;background:linear-gradient(150deg,var(--panel),var(--bg-1));padding:46px 40px;display:flex;gap:36px;justify-content:space-between;align-items:center;flex-wrap:wrap;}
html.hp .cta h2{margin-bottom:10px;}
html.hp .cta p{color:var(--ink-2);max-width:52ch;margin:0;}
html.hp .midcta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--rule);border-radius:12px;background:var(--panel);padding:24px 28px;}
html.hp .midcta p{margin:0;color:var(--ink);font-size:16px;max-width:60ch;}
html.hp /* footer */
.foot{border-top:1px solid var(--rule);padding:48px 0 30px;}
html.hp .foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(120px,1fr));gap:32px;}
html.hp .foot .fb{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:700;font-size:18px;}
html.hp .foot .fb svg{color:var(--cyan);}
html.hp .foot .blurb{color:var(--ink-3);font-size:13px;max-width:34ch;margin:14px 0 0;line-height:1.55;}
html.hp .foot h4{font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 14px;}
html.hp .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
html.hp .foot li a{color:var(--ink-2);font-size:14px;}
html.hp .foot li a:hover{color:var(--cyan);}
html.hp .foot-btm{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em;display:flex;align-items:center;justify-content:space-between;gap:16px;}
html.hp .foot-btm .theme-toggle{width:30px;height:30px;}
html.hp .foot-btm .theme-toggle svg{width:15px;height:15px;}
html.hp .footer-foot .theme-toggle{width:30px;height:30px;}
html.hp .footer-foot .theme-toggle svg{width:15px;height:15px;}
@media(max-width:900px) {
html.hp .hero-grid{grid-template-columns:1fr;}
html.hp .hero-meta{grid-template-columns:repeat(2,1fr);}
html.hp .feat{grid-template-columns:1fr;}
html.hp .foot-grid{grid-template-columns:1fr 1fr;}
/* mobile nav: reveal the hamburger and collapse the links into a dropdown.
   The header CTA is hidden so brand + burger always fit; it reappears as the
   last item in the dropdown (.nav-links-cta). */
html.hp .nav-inner{gap:12px;}
html.hp .nav-burger{display:flex; position:absolute; right:32px; top:50%; transform:translateY(-50%);}
html.hp .nav-cta{display:none;}
html.hp .nav-links{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  flex-direction:column; align-items:stretch; gap:2px;
  padding:8px; margin:0;
  background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  box-shadow:var(--card-shadow);
  z-index:49;
}
html.hp .nav-open-cb:checked ~ .nav-links{display:flex;}
html.hp .nav-links a{padding:11px 12px; font-size:15px; border-radius:8px; display:block; width:100%;}
html.hp .nav-links a:hover{background:var(--panel); color:var(--cyan);}
html.hp .nav-links-cta{display:block; margin-top:6px; text-align:center; font-weight:600; background:var(--cyan); color:#06172a;}
html.hp .nav-links-cta:hover{background:#6cc7ff; color:#06172a;}
}


/* console: budget progress bars + row action controls (homepage) */
html.hp .pc-bud{white-space:nowrap;color:var(--ink-3);}
html.hp .pbar{position:relative;display:inline-block;vertical-align:middle;width:56px;height:5px;border-radius:3px;background:var(--rule);overflow:hidden;margin-right:8px;}
html.hp .pbar i{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);}
html.hp .pbar.hot i{background:var(--coral);}
html.hp .pc-act{white-space:nowrap;}
html.hp .act{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--rule-2);border-radius:5px;color:var(--ink-3);margin-right:4px;transition:.15s;}
html.hp .act svg{width:12px;height:12px;}
html.hp .act:hover{color:var(--cyan);border-color:var(--cyan);}
html.hp .act.stop:hover{color:var(--coral);border-color:var(--coral);}

/* console: drift cell + one-agent trace waterfall (homepage) */
html.hp .pc-drift{white-space:nowrap;font-size:11px;color:var(--ink-3);}
html.hp .pc-drift.warn{color:var(--coral);}
html.hp .pc-trace{padding:11px 14px 6px;background:var(--bg-1);border-top:1px solid var(--rule);font-family:var(--ff-mono);font-size:11px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;}
html.hp .pt-head{display:flex;justify-content:space-between;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-size:9.5px;margin-bottom:10px;}
html.hp .pt-head .pt-agent{color:var(--cyan);}
html.hp .pt-row{display:grid;grid-template-columns:190px 1fr 96px;align-items:center;gap:12px;padding:3px 0;color:var(--ink-2);}
html.hp .pt-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.hp .pt-name.i1{padding-left:16px;color:var(--ink-3);}
html.hp .pt-track{position:relative;height:6px;background:var(--rule);border-radius:3px;}
html.hp .pt-bar{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--ink-4);}
html.hp .pt-bar.root{background:var(--ink-4);}
html.hp .pt-bar.model{background:var(--violet);}
html.hp .pt-bar.tool{background:var(--mint);}
html.hp .pt-bar.esc{background:var(--coral);}
html.hp .pt-bar.seal{background:var(--cyan);}
html.hp .pt-t{text-align:right;color:var(--ink-3);white-space:nowrap;}
html.hp .pt-t .esc{color:var(--coral);}

/* console: tighter rows, session chip, single-line estate footer (homepage) */
html.hp .pc-tbl td{padding:7px 10px;}
html.hp .pc-tbl .nm{white-space:nowrap;}
html.hp .pc-tbl .nm .an{display:inline-block;min-width:112px;}
html.hp .sess{display:inline-block;margin-left:8px;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);background:var(--rule);border-radius:999px;padding:0 7px;vertical-align:middle;}
html.hp .pc-estate{border-top:1px solid var(--rule);background:var(--bg-1);padding:13px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:11px 18px;align-items:baseline;font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);}
html.hp .pe-kpi b{font-family:var(--ff-display);color:var(--ink);font-weight:700;font-size:14px;margin-right:5px;}
html.hp .pe-kpi.warn b{color:var(--coral);}
html.hp .pe-bar{margin-left:auto;display:flex;height:7px;width:190px;border-radius:4px;overflow:hidden;background:var(--rule);}
html.hp .pe-bar i.on{background:var(--mint);}
html.hp .pe-bar i.dr{background:var(--cyan);}
html.hp .pe-bar i.su{background:var(--coral);}

/* ============ Control-at-every-layer chokepoint diagram (homepage) ============ */
html.hp .cq-eyebrow-top{display:block;margin-bottom:22px;}
html.hp .cq-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:start;}
html.hp .cq-copy{max-width:none;margin-bottom:0;}
html.hp .cq-copy h2{margin-top:0;}
@media (max-width:900px){html.hp .cq-layout{grid-template-columns:1fr;gap:30px;}}

html.hp .cq{position:relative;max-width:none;margin:0;border:1px dashed color-mix(in srgb,var(--cyan) 34%,var(--rule-2));border-radius:16px;background:var(--bg-1);padding:34px 30px 30px;}
html.hp .cq-runtime-tag{position:absolute;top:-8px;left:22px;background:var(--bg);padding:0 10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan);}
html.hp .cq-stage{display:flex;flex-direction:column;align-items:center;gap:0;}

html.hp .cq-agent{display:inline-block;margin:8px auto 2px;padding:9px 22px;border:1px solid var(--rule-2);border-radius:9px;background:var(--bg-1);text-align:center;}
html.hp .cq-agent .cq-at{display:block;font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--ink);}
html.hp .cq-agent .cq-as{display:block;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;}

html.hp .cq-choke{position:relative;width:100%;border-radius:12px;border:1px solid color-mix(in srgb,var(--cyan) 50%,var(--rule-2));background:var(--panel);padding:15px 20px;text-align:center;}
html.hp .cq-eyebrow{display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);}
html.hp .cq-choke .cq-title{display:block;font-family:var(--ff-display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ink);margin:7px 0 12px;}
html.hp .cq-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
html.hp .cq-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:11px;border:1px solid var(--rule-2);border-radius:999px;padding:5px 11px;color:var(--ink-2);background:color-mix(in srgb,var(--panel) 55%,transparent);}
html.hp .cq-chip i{width:6px;height:6px;border-radius:50%;background:var(--cyan);}
html.hp .cq-chip.id i{background:var(--violet);}
html.hp .cq-chip.ev i{background:var(--mint);}

html.hp .cq-fan{position:relative;width:100%;height:34px;}
html.hp .cq-fan span{position:absolute;top:0;width:2px;height:100%;overflow:hidden;}
html.hp .cq-fan span::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--cyan) 45%,transparent) 0 6px,transparent 6px 14px);}
html.hp .cq-fan span:nth-child(1){left:12.5%;} html.hp .cq-fan span:nth-child(2){left:37.5%;} html.hp .cq-fan span:nth-child(3){left:62.5%;} html.hp .cq-fan span:nth-child(4){left:87.5%;}

html.hp .cq-surfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;}
html.hp .cq-surface{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:13px 12px;text-align:center;}
html.hp .cq-surface .cq-st{display:block;font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--ink);}
html.hp .cq-v{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--ff-mono);font-size:10.5px;border:1px solid var(--rule-2);border-radius:999px;padding:3px 9px;}
html.hp .cq-v i{width:6px;height:6px;border-radius:50%;}
html.hp .cq-v.ok{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,var(--rule-2));}
html.hp .cq-v.ok i{background:var(--mint);}
html.hp .cq-v.no{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 45%,var(--rule-2));}
html.hp .cq-v.no i{background:var(--coral);}

html.hp .cq-evals{width:100%;margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:12px 16px;}
html.hp .cq-evals .cq-e{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);}
html.hp .cq-evals .cq-ed{color:var(--ink-2);font-size:13.5px;}
html.hp .cq-evals .cq-gate{margin-left:auto;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);}

html.hp .cq-spine{max-width:860px;margin:20px auto 0;text-align:center;font-size:13.5px;color:var(--ink-3);line-height:1.7;}
html.hp .cq-spine b{font-weight:600;}
html.hp .cq-spine b.id{color:var(--violet);} html.hp .cq-spine b.pol{color:var(--cyan);} html.hp .cq-spine b.beh{color:var(--coral);} html.hp .cq-spine b.ev{color:var(--mint);}

@media (max-width:640px){
  html.hp .cq-surfaces{grid-template-columns:repeat(2,1fr);}
  html.hp .cq-evals .cq-gate{margin-left:0;}
}
html.hp .cq-note{max-width:860px;margin:12px auto 0;text-align:center;font-family:var(--ff-mono);font-size:11px;letter-spacing:.02em;color:var(--ink-3);}

/* ===== compare.html: whose environment the control point lives in (inner-page tokens) ===== */
.cqx{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;}
.cqx-panel{border:1px solid var(--rule);border-radius:14px;background:var(--bg-elev,#fff);padding:0 18px 18px;display:flex;flex-direction:column;align-items:center;}
.cqx-panel.owned{border-color:color-mix(in srgb,var(--accent) 50%,var(--rule));box-shadow:0 20px 50px -34px color-mix(in srgb,var(--accent) 75%,transparent);}
.cqx-ribbon{width:calc(100% + 36px);margin:0 -18px 18px;padding:11px 16px;border-bottom:1px solid var(--rule);border-radius:14px 14px 0 0;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--ink-3);}
.cqx-panel.owned .cqx-ribbon{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);}
.cqx-panel.vendor .cqx-ribbon{background:color-mix(in srgb,var(--ink-3) 8%,transparent);}
.cqx-row{width:100%;text-align:center;border:1px solid var(--rule);border-radius:9px;padding:10px 12px;font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--ink);background:var(--bg-panel,var(--bg-elev));}
.cqx-row.control{border-style:dashed;}
.cqx-panel.owned .cqx-row.control{border-color:color-mix(in srgb,var(--accent) 55%,var(--rule));border-style:solid;color:var(--accent);}
.cqx-panel.vendor .cqx-row.control{color:var(--ink-2);}
.cqx-row span{display:block;font-family:var(--ff-mono);font-weight:400;font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);margin-top:4px;text-transform:none;}
.cqx-arrow{width:2px;height:20px;background:repeating-linear-gradient(180deg,var(--ink-3) 0 5px,transparent 5px 10px);opacity:.5;}
.cqx-panel.owned .cqx-arrow{background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 10px);opacity:.8;}
.cqx-ev{width:100%;text-align:center;margin-top:16px;border-radius:9px;padding:11px 12px;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.01em;border:1px solid var(--rule);}
.cqx-ev.bad{color:var(--accent-warm);border-color:color-mix(in srgb,var(--accent-warm) 40%,var(--rule));background:color-mix(in srgb,var(--accent-warm) 6%,transparent);}
.cqx-ev.ok{color:var(--ok,var(--teal));border-color:color-mix(in srgb,var(--ok,var(--teal)) 42%,var(--rule));background:color-mix(in srgb,var(--ok,var(--teal)) 7%,transparent);}
.cqx-panel.vendor{opacity:.92;}
@media (max-width:640px){.cqx{grid-template-columns:1fr;}}

/* ============ rewrite v2 shared dark components ============ */
/* Diagram A — execution trajectory (hero) */
html.hp .trj{background:var(--panel);border:1px solid var(--rule-2);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;}
html.hp .trj-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
html.hp .trj-eyebrow{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);}
html.hp .trj-run{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);}
html.hp .trj-flow{display:flex;flex-direction:column;}
html.hp .trj-step{position:relative;display:flex;align-items:center;gap:12px;padding:9px 0;}
html.hp .trj-step:not(:last-child)::after{content:"";position:absolute;left:4px;top:27px;bottom:-3px;width:2px;background:var(--rule-2);}
html.hp .trj-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex-shrink:0;margin-left:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 16%,transparent);z-index:1;}
html.hp .trj-dot.seal{background:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 16%,transparent);}
html.hp .trj-label{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--ink);flex:1;}
html.hp .trj-tag{font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);border:1px solid var(--rule-2);border-radius:999px;padding:2px 9px;white-space:nowrap;}
html.hp .trj-tag.ok,html.hp .trj-tag.ev{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 40%,var(--rule-2));}
html.hp .trj-tag.warn{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 40%,var(--rule-2));}
html.hp .trj-ctx{border-top:1px solid var(--rule);padding-top:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
html.hp .trj-ctx-lead{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);width:100%;margin-bottom:3px;}
html.hp .trj-chip{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-2);background:var(--bg-1);border:1px solid var(--rule-2);border-radius:6px;padding:3px 8px;}

/* 2-column comparison */
html.hp .cmp2{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--panel);}
html.hp .cmp2-head,html.hp .cmp2-row{display:grid;grid-template-columns:0.85fr 1.15fr;}
html.hp .cmp2-head span{padding:12px 18px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
html.hp .cmp2-head span:last-child{color:var(--cyan);border-left:1px solid var(--rule);background:color-mix(in srgb,var(--cyan) 7%,transparent);}
html.hp .cmp2-row{border-top:1px solid var(--rule);font-size:14px;align-items:center;}
html.hp .cmp2-row:nth-child(even){background:color-mix(in srgb,var(--ink) 3%,transparent);}
html.hp .cmp2-row span{padding:13px 18px;color:var(--ink-2);}
html.hp .cmp2-row span:last-child{color:var(--ink);border-left:1px solid var(--rule);background:color-mix(in srgb,var(--cyan) 4%,transparent);}

/* fragment grid + core */
html.hp .frag{display:flex;flex-direction:column;gap:14px;}
html.hp .frag-ring{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
html.hp .frag-chip{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-family:var(--ff-display);font-weight:600;font-size:13.5px;color:var(--ink-2);}
html.hp .frag-chip em{font-family:var(--ff-mono);font-style:normal;font-size:10.5px;font-weight:400;color:var(--ink-3);}
html.hp .frag-core{border:1px solid color-mix(in srgb,var(--cyan) 45%,var(--rule));border-radius:12px;background:color-mix(in srgb,var(--cyan) 9%,var(--panel));padding:18px 20px;text-align:center;display:flex;flex-direction:column;gap:6px;}
html.hp .frag-core-lb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
html.hp .frag-core-t{font-family:var(--ff-display);font-weight:700;font-size:17px;color:var(--ink);}
html.hp .frag-core-s{font-family:var(--ff-mono);font-size:11px;color:var(--ink-2);}

/* Diagram D — eval / lifecycle loop */
html.hp .loop-block{margin-top:30px;border-top:1px solid var(--rule);padding-top:26px;}
html.hp .loop{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;}
html.hp .loop-step{flex:1;min-width:165px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
html.hp .loop-step .loop-k{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--ink);}
html.hp .loop-step .loop-d{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);}
html.hp .loop-arrow{align-self:center;color:var(--cyan);font-family:var(--ff-mono);}
html.hp .loop-arrow::before{content:"\2192";}
html.hp .loop-copy{margin:16px 0 0;color:var(--ink-2);font-size:14.5px;max-width:840px;}

/* chip label lists on cards */
html.hp .mod-labels{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
html.hp .mod-labels li{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-2);background:var(--bg-1);border:1px solid var(--rule-2);border-radius:6px;padding:4px 9px;}
html.hp .wide-labels{margin-top:22px;}

/* horizontal step flow */
html.hp .flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;}
html.hp .flow-step{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px;font-family:var(--ff-display);font-weight:600;font-size:13.5px;color:var(--ink-2);}
html.hp .flow-step.wide{flex:1.7;}
html.hp .flow-step.hl{border-color:color-mix(in srgb,var(--cyan) 50%,var(--rule));background:color-mix(in srgb,var(--cyan) 10%,var(--panel));color:var(--ink);}

/* callout / definition */
html.hp .callout{margin-top:26px;border:1px solid var(--rule);border-left:3px solid var(--cyan);border-radius:10px;background:var(--bg-1);padding:18px 22px;max-width:900px;}
html.hp .callout-lead{font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--ink);margin:0 0 8px;}
html.hp .callout p{color:var(--ink-2);font-size:14px;margin:0;}

/* lifecycle cycle steps */
html.hp .cycle{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;}
html.hp .cycle-step{position:relative;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:9px 12px;}
html.hp .cycle-step:not(:last-child)::after{content:"\2192";position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--cyan);font-size:12px;}

/* four differentiators */
html.hp .diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
html.hp .diff{background:var(--panel);border:1px solid var(--rule);border-radius:11px;padding:16px;display:flex;flex-direction:column;gap:10px;}
html.hp .diff-n{font-family:var(--ff-mono);font-size:11px;color:var(--cyan);}
html.hp .diff p{margin:0;font-family:var(--ff-display);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.35;}

/* one production contract -> environments */
html.hp .contract{margin-top:30px;}
html.hp .contract-core{border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--rule-2));border-radius:14px;background:color-mix(in srgb,var(--cyan) 6%,var(--panel));padding:20px 24px 18px;text-align:center;}
html.hp .contract-lb{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px;}
html.hp .contract-props{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:780px;margin:0 auto;}
html.hp .contract-props span{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--ink);padding:10px 10px;border:1px solid var(--rule);border-radius:9px;background:var(--bg-1);}
html.hp .contract-tech{display:block;font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);margin-top:16px;letter-spacing:.02em;}
html.hp .contract-fan{position:relative;width:100%;height:30px;}
html.hp .contract-fan span{position:absolute;top:0;width:2px;height:100%;}
html.hp .contract-fan span::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--cyan) 45%,transparent) 0 6px,transparent 6px 14px);}
html.hp .contract-fan span:nth-child(1){left:12.5%;} html.hp .contract-fan span:nth-child(2){left:37.5%;} html.hp .contract-fan span:nth-child(3){left:62.5%;} html.hp .contract-fan span:nth-child(4){left:87.5%;}
html.hp .contract-envs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
html.hp .contract-env{border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:14px 12px;text-align:center;font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--ink);}

/* lifecycle control loop */
html.hp .cloop{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:900px;margin:32px auto 0;}
html.hp .cloop-node{border:1px solid var(--rule-2);border-radius:12px;background:var(--panel);padding:16px 18px;text-align:center;}
html.hp .cloop-node.cloop-dec{border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule-2));background:color-mix(in srgb,var(--cyan) 8%,var(--panel));}
html.hp .cloop-k{display:block;font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:7px;}
html.hp .cloop-dec .cloop-k{color:var(--cyan);}
html.hp .cloop-d{display:block;font-family:var(--ff-mono);font-size:11px;line-height:1.55;color:var(--ink-3);}
html.hp .cloop-arrow{position:absolute;font-family:var(--ff-mono);font-size:20px;line-height:1;color:var(--cyan);transform:translate(-50%,-50%);}
html.hp .cloop-arrow.a-top{left:50%;top:calc(25% - 8px);}
html.hp .cloop-arrow.a-bottom{left:50%;top:calc(75% + 8px);}
html.hp .cloop-arrow.a-left{left:25%;top:50%;}
html.hp .cloop-arrow.a-right{left:75%;top:50%;}
html.hp .scope-line{text-align:center;font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);margin:26px 0 0;letter-spacing:.03em;}
html.hp .scope-line .scope-lb{color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;margin-right:12px;}
html.hp .cloop-close{color:var(--ink);font-family:var(--ff-display);font-weight:600;font-size:17px;max-width:820px;}
@media (max-width:760px){
  html.hp .contract-props,html.hp .contract-envs{grid-template-columns:1fr 1fr;}
  html.hp .cloop{grid-template-columns:1fr;gap:16px;}
  html.hp .cloop-arrow{display:none;}
}

@media (max-width:760px){
  html.hp .frag-ring{grid-template-columns:repeat(2,1fr);}
  html.hp .diffs{grid-template-columns:repeat(2,1fr);}
  html.hp .loop{flex-direction:column;}
  html.hp .loop-arrow{transform:rotate(90deg);}
}
@media (max-width:640px){
  html.hp .cmp2-head span,html.hp .cmp2-row span{padding:11px 13px;font-size:12.5px;}
}

/* ============ inner-page shared components ============ */
html.hp .pagehero{padding:60px 0 20px;}
html.hp .pagehero-copy{max-width:940px;}
html.hp .pagehero .lede{max-width:780px;}
html.hp .pagehero-copy > p:not(.lede){font-size:16px;color:var(--ink-2);max-width:76ch;margin:0 0 18px;line-height:1.62;}
html.hp .pagehero-copy > p:not(.lede) a{color:var(--accent);text-decoration:none;}
html.hp .pagehero-copy > p:not(.lede) a:hover{text-decoration:underline;}
html.hp .cap-note{font-size:14px;color:var(--ink-3);max-width:78ch;border-left:2px solid var(--bg-rule);padding-left:16px;margin:20px 0 4px;line-height:1.6;}
html.hp .section-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;}

/* bullet lists */
html.hp .bullets{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
html.hp .bullets li{position:relative;padding-left:22px;color:var(--ink-2);font-size:14.5px;line-height:1.5;}
html.hp .bullets li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--cyan);}
html.hp .bullets.two{grid-template-columns:1fr 1fr;gap:9px 30px;}
html.hp .bullets.ok li::before{background:var(--mint);}

/* generic titled cards */
html.hp .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px;}
html.hp .cards.c2{grid-template-columns:repeat(2,1fr);}
html.hp .cards.c3{grid-template-columns:repeat(3,1fr);}
html.hp .card{background:var(--panel);border:1px solid var(--rule);border-radius:11px;padding:18px 20px;}
html.hp .card .card-lb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:8px;}
html.hp .card h3{font-family:var(--ff-display);font-weight:700;font-size:16px;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink);}
html.hp .card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55;}
html.hp .card.hl{border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));background:color-mix(in srgb,var(--cyan) 8%,var(--panel));}
@media (max-width:680px){html.hp .cards.c2,html.hp .cards.c3{grid-template-columns:1fr;}html.hp .bullets.two{grid-template-columns:1fr;}}

/* two-panel split (X owns / Y owns) */
html.hp .split{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
html.hp .split-panel{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;}
html.hp .split-panel.hl{border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));}
html.hp .split-panel h3{font-family:var(--ff-display);font-weight:700;font-size:16px;margin:0 0 14px;color:var(--ink);}
html.hp .split-panel.hl h3{color:var(--cyan);}
@media (max-width:680px){html.hp .split{grid-template-columns:1fr;}}
html.hp .minihead{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 13px;}

/* mandatory technical panels (details/summary) */
html.hp .tpanel{border:1px solid var(--rule);border-radius:11px;background:var(--panel);margin-top:14px;overflow:hidden;}
html.hp .tpanel>summary{cursor:pointer;list-style:none;padding:15px 20px;display:flex;align-items:center;gap:12px;font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--ink);}
html.hp .tpanel>summary::-webkit-details-marker{display:none;}
html.hp .tpanel>summary::before{content:"+";font-family:var(--ff-mono);color:var(--cyan);font-size:16px;width:14px;text-align:center;}
html.hp .tpanel[open]>summary::before{content:"\2013";}
html.hp .tpanel>summary .tp-tag{margin-left:auto;font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
html.hp .tpanel-body{padding:2px 20px 20px;border-top:1px solid var(--rule);}
html.hp .tpanel-body p{color:var(--ink-2);font-size:14px;margin:13px 0 0;line-height:1.6;}
html.hp .tpanel-body .minihead{margin:18px 0 11px;}
html.hp .tpanel-body .scope{margin-top:16px;border-left:3px solid var(--cyan);padding:4px 0 4px 14px;color:var(--ink-2);font-size:13.5px;}

/* Diagram C — labeled layer stack */
html.hp .lstack{display:flex;flex-direction:column;gap:10px;}
html.hp .llayer{border:1px solid var(--rule);border-radius:11px;background:var(--panel);padding:16px 20px;display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start;}
html.hp .llayer.hl{border-color:color-mix(in srgb,var(--cyan) 40%,var(--rule));}
html.hp .llayer .ll-h{display:flex;flex-direction:column;gap:4px;}
html.hp .llayer .ll-n{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);}
html.hp .llayer .ll-t{font-family:var(--ff-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);}
html.hp .llayer .ll-labels{display:flex;flex-wrap:wrap;gap:6px;}
html.hp .llayer .ll-labels span{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-2);background:var(--bg-1);border:1px solid var(--rule-2);border-radius:6px;padding:4px 9px;}
@media (max-width:680px){html.hp .llayer{grid-template-columns:1fr;gap:10px;}}

/* comparison table */
html.hp .ctable-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;}
html.hp .ctable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:860px;}
html.hp .ctable th,html.hp .ctable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top;}
html.hp .ctable tr:last-child td{border-bottom:none;}
html.hp .ctable thead th{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--bg-1);white-space:nowrap;}
html.hp .ctable td{color:var(--ink-2);}
html.hp .ctable td:first-child{font-family:var(--ff-display);font-weight:600;color:var(--ink);}
html.hp .ctable tr.us td{background:color-mix(in srgb,var(--cyan) 9%,transparent);}
html.hp .ctable tr.us td:first-child{color:var(--cyan);}

/* =========================================================================
   HOMEPAGE — converged-governance components. Lifted out of the page's inline
   <style> when this version was promoted to index.html, so the homepage has
   no inline CSS and every rule lives here. All selectors are html.hp-scoped
   or .v2-* prefixed, so nothing here reaches the other pages. The .v2-
   prefix is historical: it dates from the side-by-side draft, not from a
   second design system.
   ========================================================================= */

/* Text equivalents for the aria-hidden diagrams. Visually hidden, exposed to
   assistive tech, so removing the owner cards did not remove the information. */
.v2-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}


/* ----------------------------------------------------------------------
   Shared runtime object. Used by BOTH diagrams so the reader recognises
   the same runtime in the hero and in the converged-governance section:
   same shape, border treatment, colour, label, and trajectory wording.
   ---------------------------------------------------------------------- */
.v2-diagram{border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);box-shadow:var(--card-shadow);padding:26px 22px 22px;}
.v2-runtime-obj{position:relative;border:1.5px dashed color-mix(in srgb,var(--cyan) 58%,var(--rule-2));border-radius:14px;background:color-mix(in srgb,var(--cyan) 6%,var(--bg-1));box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 6%,transparent);padding:22px 18px 16px;}
.v2-runtime-tag{position:absolute;top:-9px;left:18px;background:var(--panel);padding:0 10px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:500;}
.v2-runtime-sub{display:block;text-align:center;font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;}

/* runtime boundary diagram (foundation section) ---------------------------------------------- */
.v2-foundation-diagram{max-width:880px;margin:0 auto;}
/* Hero: the control-plane console nested inside the shared runtime object, so
   the reader recognises the same boundary here and in the convergence diagram. */
.v2-hero-diagram{align-self:stretch;padding:20px 12px 14px;display:flex;}
.v2-hero-diagram .v2-runtime-obj{display:flex;flex-direction:column;width:100%;}
html.hp .v2-hero-diagram .pconsole{flex:1 1 auto;display:flex;flex-direction:column;gap:0;}
.v2-tconn{position:relative;flex:1 1 auto;min-height:20px;display:flex;align-items:center;justify-content:center;margin:0 12px;}
.v2-tconn::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--coral) 50%,transparent) 0 4px,transparent 4px 9px);}
.v2-tconn span{position:relative;background:var(--panel);padding:0 10px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);}
.v2-hero-diagram .v2-runtime-obj{padding:22px 8px 12px;}
html.hp .v2-hero-diagram .pconsole{box-shadow:none;}
/* the one action that leaves the boundary, called out in the trace */
.v2-rt-agent{border:1px solid var(--rule-2);border-radius:9px;background:var(--panel);padding:10px 18px;text-align:center;margin-bottom:12px;}
.v2-rt-agent .v2-rt-at{display:block;font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--ink);}
.v2-rt-agent .v2-rt-as{display:block;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;}
/* Inside the boundary: the substrate the runtime holds. */
.v2-rt-lb{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.v2-rt-holds{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.v2-rt-holds li{display:flex;align-items:center;gap:8px;border:1px solid var(--rule-2);border-radius:7px;background:color-mix(in srgb,var(--panel) 70%,transparent);padding:8px 11px;font-family:var(--ff-mono);font-size:10.5px;line-height:1.35;color:var(--ink-2);}
.v2-rt-holds li i{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--ink-4);}
.v2-rt-holds li.wide{grid-column:1 / -1;}

/* The boundary crossing. */
.v2-rt-gate{border-top:1px dashed color-mix(in srgb,var(--cyan) 40%,var(--rule-2));padding-top:13px;text-align:center;}
.v2-rt-gk{display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);}
.v2-rt-acts{display:block;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);margin:5px 0 11px;}
.v2-rt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;margin-top:12px;font-family:var(--ff-mono);font-size:9.5px;color:var(--ink-3);opacity:.75;}

.v2-rt-flow{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 6px 10px;}
.v2-leg{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.v2-leg b{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;}
.v2-leg i{position:relative;width:1px;height:26px;}
.v2-leg span{font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);}
.v2-leg.out b{color:var(--coral);}
.v2-leg.out i{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--coral) 60%,transparent) 0 4px,transparent 4px 9px);}
.v2-leg.out i::after{content:"";position:absolute;left:-3.5px;bottom:-2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--coral);}
.v2-leg.back b{color:var(--mint);}
.v2-leg.back i{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--mint) 60%,transparent) 0 4px,transparent 4px 9px);}
.v2-leg.back i::after{content:"";position:absolute;left:-3.5px;top:-2px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--mint);}

.v2-rt-ext{border:1px solid var(--rule-2);border-radius:10px;background:var(--bg-1);padding:11px 16px;text-align:center;}
.v2-ext-k{display:block;font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--ink-2);}
.v2-ext-d{display:block;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);margin-top:2px;}

/* convergence diagram (converged-governance section) -------------------- */
.v2-cvg-lead{display:block;text-align:center;font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
.v2-lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.v2-lane{border:1px solid var(--rule-2);border-radius:9px;background:var(--panel);padding:12px 14px;}
.v2-lane .v2-lo{display:block;font-family:var(--ff-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;}
.v2-lane .v2-lk{display:flex;align-items:center;gap:7px;font-family:var(--ff-display);font-weight:700;font-size:13.5px;color:var(--ink);}
.v2-lane .v2-lk i{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.v2-lane .v2-ld{display:block;font-family:var(--ff-mono);font-size:10px;line-height:1.55;color:var(--ink-3);margin-top:6px;}
.v2-lane.sec .v2-lk i{background:var(--violet);}
.v2-lane.pol .v2-lk i{background:var(--cyan);}
.v2-lane.int .v2-lk i{background:var(--coral);}
.v2-lane.evi .v2-lk i{background:var(--mint);}

.v2-fan{position:relative;height:38px;}
.v2-fan span{position:absolute;top:0;width:1px;height:50%;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--cyan) 80%,transparent) 0 4px,transparent 4px 9px);}
.v2-fan .v2-bus{position:absolute;top:50%;left:12.5%;right:12.5%;height:1px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--cyan) 80%,transparent) 0 4px,transparent 4px 9px);}
.v2-fan .v2-drop{position:absolute;top:50%;bottom:0;left:50%;width:1px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--cyan) 80%,transparent) 0 4px,transparent 4px 9px);}

/* Section 3 sheds the outer panel: the dashed runtime boundary is the only
   container that means anything here, and three nested boxes read as weight
   rather than structure.
   The diagram sits on the page grid, edge to edge with the questions list,
   the loop cards, and the comparison table. Capping the whole diagram instead
   put it 88px inside every other block on the page, aligned to nothing.
   Convergence is expressed by narrowing what comes after the lanes, so the
   shape funnels: four wide inputs, one narrower decision. */
.v2-cvg-diagram{border:0;background:none;box-shadow:none;padding:0;}
.v2-cvg-core,.v2-cvg-diagram .v2-disp,.v2-cvg-diagram .v2-issued{max-width:840px;margin-left:auto;margin-right:auto;}
.v2-cvg-core{text-align:center;}
.v2-ladder{display:grid;gap:1px;max-width:580px;margin:16px auto 10px;text-align:left;}
.v2-lw{max-width:580px;margin:0 auto 12px;padding-left:12px;color:var(--cyan);font-family:var(--ff-mono);font-size:10px;letter-spacing:.04em;text-align:left;}
.v2-ladder div{display:grid;grid-template-columns:62px 1fr 150px;align-items:baseline;gap:10px;padding:5px 12px;border-radius:7px;font-family:var(--ff-mono);font-size:11px;color:var(--ink-2);}
.v2-lc{color:var(--ink-3);}
.v2-la{color:var(--ink);}
.v2-la::before{content:"\2192";color:var(--ink-4);margin-right:9px;}
.v2-lv.bad{color:var(--coral);}
.v2-lv.ok{color:var(--mint);}
.v2-ladder div.on{background:color-mix(in srgb,var(--cyan) 10%,transparent);}
.v2-ladder div.on .v2-lv,.v2-ladder div.on .v2-la{color:var(--cyan);}
.v2-cvg-core .v2-ct{display:block;font-family:var(--ff-display);font-weight:700;font-size:17px;letter-spacing:-.015em;color:var(--ink);}
.v2-cvg-core .v2-cs{display:block;font-family:var(--ff-mono);font-size:10px;line-height:1.7;color:var(--ink-3);margin:0 auto;max-width:580px;text-align:left;padding-left:12px;}

.v2-step{position:relative;height:26px;}
.v2-step::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--cyan) 80%,transparent) 0 4px,transparent 4px 9px);}

.v2-disp{border:1px solid var(--rule-2);border-radius:11px;background:var(--panel);padding:14px 16px;text-align:center;}
.v2-disp .v2-dk{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;}
.v2-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.v2-chips span{font-family:var(--ff-mono);font-size:11px;border:1px solid var(--rule-2);border-radius:999px;padding:4px 11px;color:var(--ink-2);}
.v2-chips span.hot{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule-2));}

.v2-issued{display:flex;align-items:center;gap:10px;margin:16px 0;}
.v2-issued i{flex:1;border-top:1px dashed var(--rule-2);}
.v2-issued span{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);white-space:nowrap;}

/* the current step's execution detail, nested like the trajectory strip */
.v2-hero-diagram .pc-trace{margin:6px 12px 0;border:1px solid var(--rule);border-radius:9px;padding:9px 12px 7px;flex:0 0 auto;}
.v2-hero-diagram .pt-row{grid-template-columns:150px 1fr 74px;}

/* the trajectory the judgments are reading */
.v2-traj{margin:8px 12px 0;border:1px solid var(--rule);border-radius:9px;background:var(--bg-1);overflow:hidden;}
.v2-th b{color:var(--cyan);font-weight:500;}
.v2-th{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-bottom:1px solid var(--rule);font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.v2-tr{display:grid;grid-template-columns:56px 66px 1fr;gap:10px;align-items:baseline;padding:4px 12px;font-family:var(--ff-mono);font-size:10px;color:var(--ink-2);border-top:1px solid color-mix(in srgb,var(--rule) 45%,transparent);}
.v2-tr:first-of-type{border-top:0;}
.v2-tt{color:var(--ink-3);}
.v2-tk{color:var(--cyan);}
.v2-td b.ok{color:var(--mint);font-weight:400;}
.v2-tr.now{background:color-mix(in srgb,var(--coral) 9%,transparent);}
.v2-tr.now .v2-tk{color:var(--coral);}
.v2-tr.now .v2-td{color:var(--ink);}

/* how the four compose */
.v2-vprec{display:flex;justify-content:space-between;gap:10px;padding:5px 12px;border-top:1px solid color-mix(in srgb,var(--rule) 60%,transparent);font-family:var(--ff-mono);font-size:9.5px;color:var(--ink-3);}
.v2-vprec span:first-child{letter-spacing:.1em;text-transform:uppercase;}

/* the record the customer keeps */
.v2-seal{display:flex;justify-content:space-between;gap:10px;margin:5px 12px 0;padding-top:6px;border-top:1px solid var(--rule);font-family:var(--ff-mono);font-size:9.5px;color:var(--ink-3);}
.v2-sealv{color:var(--cyan);}

/* hero focal action: four verdicts resolving into one disposition */
.v2-verdict{border:1px solid color-mix(in srgb,var(--coral) 40%,var(--rule-2));border-radius:9px;background:var(--bg-1);margin:11px 12px 0;overflow:hidden;}
.v2-vh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 12px;border-bottom:1px solid var(--rule);font-family:var(--ff-mono);font-size:10.5px;color:var(--ink);background:color-mix(in srgb,var(--coral) 7%,transparent);}
.v2-vamt{color:var(--ink-3);}
.v2-vrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 12px;border-top:1px solid color-mix(in srgb,var(--rule) 60%,transparent);font-family:var(--ff-mono);font-size:10.5px;}
.v2-vrow:first-of-type{border-top:0;}
.v2-vk{display:flex;align-items:center;gap:7px;color:var(--ink-2);}
.v2-vk i{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.v2-vrow.sec .v2-vk i{background:var(--violet);}
.v2-vrow.pol .v2-vk i{background:var(--cyan);}
.v2-vrow.int .v2-vk i{background:var(--coral);}
.v2-vrow.evi .v2-vk i{background:var(--mint);}
.v2-vv{white-space:nowrap;}
.v2-vv.ok{color:var(--mint);}
.v2-vv.need{color:var(--cyan);}
.v2-vv.bad{color:var(--coral);}
.v2-vfinal{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 12px;border-top:1px solid color-mix(in srgb,var(--coral) 38%,var(--rule-2));background:color-mix(in srgb,var(--coral) 10%,transparent);font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.v2-vfinal b{color:var(--coral);font-size:11.5px;letter-spacing:.1em;}

.v2-vctx{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:6px 12px;border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--ink) 3%,transparent);font-family:var(--ff-mono);font-size:9.5px;color:var(--ink-2);}
.v2-vctx .wide{grid-column:1 / -1;}
.v2-vctx b{color:var(--ink-3);font-weight:400;margin-right:6px;text-transform:uppercase;letter-spacing:.05em;}

/* evaluation acting back on the runtime */
.v2-evalfb{display:grid;gap:3px;margin:6px 12px 0;padding:7px 12px;border:1px dashed color-mix(in srgb,var(--mint) 38%,var(--rule-2));border-radius:8px;font-family:var(--ff-mono);font-size:10px;}
.v2-evalfb div{display:flex;gap:9px;flex-wrap:wrap;}
.v2-ek{color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.v2-ek.rt{color:var(--mint);}
.v2-ev{color:var(--ink-2);}

/* adaptive-control section: two timescales, side by side */
.v2-loop2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.v2-loop2 > div{border:1px solid var(--rule-2);border-radius:12px;background:var(--panel);padding:20px 22px 22px;}
.v2-l2k{display:block;font-family:var(--ff-display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ink);}
.v2-l2s{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:5px 0 16px;}
.v2-loop2 ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.v2-loop2 li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink-2);}
.v2-loop2 li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;}
.v2-loop2 .rt li::before{background:var(--coral);}
.v2-loop2 .lc li::before{background:var(--cyan);}

/* Two-column section band. The hero pairs copy with a visual; every section
   after it stacked narrow copy over a full-width block, five times running,
   which is what made the page read as repetitive. This restores the pairing
   where the visual survives half a column, alternating which side it sits on
   so consecutive two-column sections do not repeat the same shape. */
.v2-split{display:grid;grid-template-columns:1fr 1.06fr;gap:56px;align-items:start;}
.v2-split .sec-head{margin-bottom:0;max-width:none;}
.v2-split .sec-head p{max-width:none;}
.v2-split .v2-foundation-diagram{max-width:none;}
.v2-loop2.stacked{grid-template-columns:1fr;gap:14px;}

/* the reframe: trajectory as the unit of control */
.v2-primitive{border-left:2px solid var(--cyan);padding:2px 0 2px 24px;max-width:820px;}
.v2-pk{margin:0 0 10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
.v2-pt{margin:0 0 14px;font-family:var(--ff-display);font-weight:700;font-size:clamp(21px,2.8vw,30px);line-height:1.18;letter-spacing:-.02em;color:var(--ink-3);}
.v2-pt b{color:var(--ink);font-weight:700;}
.v2-pd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:70ch;}

/* five questions ------------------------------------------------------- */
.v2-qs-lb{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 10px;}
.v2-qs-lb.after{color:var(--mint);margin-top:22px;}
.v2-qs.after{border-color:color-mix(in srgb,var(--mint) 38%,var(--rule));}
.v2-qs.after .v2-n{color:var(--mint);}
.v2-qs{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--panel);}
.v2-qs li{display:grid;grid-template-columns:34px 1fr 274px;gap:16px;align-items:baseline;padding:16px 20px;border-top:1px solid var(--rule);}
.v2-qs li:first-child{border-top:0;}
.v2-qs .v2-n{font-family:var(--ff-mono);font-size:11px;color:var(--cyan);}
.v2-qs .v2-q{font-family:var(--ff-display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);}
.v2-qs .v2-o{font-family:var(--ff-mono);font-size:10.5px;line-height:1.55;color:var(--ink-3);text-align:right;}
.v2-qs .v2-o b{display:block;color:var(--ink-2);font-weight:500;}

/* four dimension cards ------------------------------------------------- */

/* before / after the action -------------------------------------------- */
.v2-pull{margin:26px 0 0;font-family:var(--ff-display);font-weight:700;font-size:clamp(20px,2.6vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);max-width:24ch;}
.v2-pull b{color:var(--cyan);font-weight:700;}
.v2-pull.center{max-width:none;text-align:center;margin:30px auto 0;}

/* the vendor cannot build ---------------------------------------------- */

/* availability rows ---------------------------------------------------- */

/* misc ------------------------------------------------------------------ */
html.hp .hero-ctas{margin-bottom:0;}
.v2-support{margin:22px 0 0;font-family:var(--ff-display);font-weight:700;font-size:19px;line-height:1.4;color:var(--ink);}

@media (max-width:1050px){
    .v2-lanes{grid-template-columns:repeat(2,1fr);}
  /* 2x2 lanes: the four-stub fan cannot align, so use one connector. */
  .v2-fan span,.v2-fan .v2-bus{display:none;}
  .v2-fan .v2-drop{top:0;}
  .v2-fan{height:30px;}
}
@media (max-width:900px){
  .v2-split{grid-template-columns:1fr;gap:34px;}
  .v2-qs li{grid-template-columns:26px 1fr;}
  .v2-qs .v2-o{grid-column:2;text-align:left;}
  .v2-rt-holds{grid-template-columns:1fr;}
}
/* ---- Narrow viewports -------------------------------------------------
   Grid items default to min-width:auto, so the fixed inner columns in the
   trace and trajectory set a floor wider than a phone viewport and push the
   whole page sideways. Release the floor, then make each component fit. */
@media (max-width:560px){
  html.hp .wrap{padding:0 18px;}
  html.hp .hero-grid > *{min-width:0;}
  .v2-diagram,.v2-hero-diagram{padding:18px 8px 12px;min-width:0;}
  /* the section-3 diagram has no panel, so its padding only pushed the lanes
     8px off the grid every other block sits on */
  .v2-cvg-diagram{padding:0;}
  .v2-hero-diagram .v2-runtime-obj{padding:20px 6px 10px;}
  .v2-runtime-sub{font-size:9px;letter-spacing:.06em;}
  .v2-runtime-tag{left:12px;font-size:9.5px;}

  /* console chrome */
  html.hp .pc-bar{flex-wrap:wrap;gap:4px 8px;font-size:9.5px;padding:9px 10px;}
  html.hp .pc-tenant{margin-left:0;}

  /* trajectory strip: let the columns size to content, wrap the detail */
  .v2-traj,.v2-hero-diagram .pc-trace,.v2-verdict,.v2-evalfb{margin-left:8px;margin-right:8px;}
  .v2-tr{grid-template-columns:auto auto;gap:2px 8px;padding:6px 10px;font-size:9.5px;}
  .v2-td{grid-column:1 / -1;color:var(--ink-2);}
  .v2-th{flex-wrap:wrap;gap:2px 8px;padding:7px 10px;}

  /* trace: the waterfall bars are decorative at this width */
  html.hp .v2-hero-diagram .pc-trace{padding:8px 10px 6px;}
  html.hp .pt-row{grid-template-columns:1fr auto;gap:8px;}
  html.hp .pt-track{display:none;}
  html.hp .pt-name{white-space:normal;}
  html.hp .pt-head{flex-wrap:wrap;gap:2px 8px;}

  /* the decision */
  .v2-vh{flex-wrap:wrap;gap:2px 8px;padding:8px 10px;font-size:9.5px;}
  .v2-vctx{grid-template-columns:1fr;gap:3px;padding:8px 10px;}
  .v2-vctx .wide{grid-column:auto;}
  .v2-vrow{padding:6px 10px;gap:6px;}
  .v2-vk{min-width:0;}
  .v2-vv{white-space:normal;text-align:right;}
  .v2-vprec,.v2-vfinal,.v2-seal{flex-wrap:wrap;gap:2px 8px;padding-left:10px;padding-right:10px;}
  .v2-evalfb{padding:8px 10px;}
  .v2-evalfb div{gap:2px 8px;}

  /* five questions and the rest */
  .v2-issued{flex-wrap:wrap;}
  .v2-issued span{white-space:normal;text-align:center;flex:1 1 100%;order:-1;}
  .v2-qs li{padding:14px 14px;}
  .v2-lanes,.v2-loop2,.v2-rt-holds{grid-template-columns:1fr;}
  .v2-ladder div{grid-template-columns:auto 1fr;gap:2px 8px;padding:5px 10px;}
  .v2-la{grid-column:1 / -1;}
  .v2-chips span{font-size:10px;}
  html.hp .cmp2-head,html.hp .cmp2-row{grid-template-columns:1fr;}
  html.hp .cmp2-row span:last-child,html.hp .cmp2-head span:last-child{border-left:0;border-top:1px solid var(--rule);}
}

@media (max-width:620px){
  /* Boundary diagram simplifies to boundary, what it holds, action out,
     outcome back. Secondary telemetry and the representative-action line are
     dropped rather than rendered unreadably. */
  .v2-rt-meta,.v2-rt-acts{display:none;}
  .v2-rt-holds{grid-template-columns:1fr;}
      .v2-loop2{grid-template-columns:1fr;}
    /* Convergence diagram becomes a single vertical sequence. */
  .v2-lanes{grid-template-columns:1fr;}
  .v2-fan span,.v2-fan .v2-bus{display:none;}
  .v2-fan .v2-drop{top:0;}
  .v2-fan{height:26px;}
}