@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+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-open-cb:focus-visible ~ .nav-burger {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.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-open-cb {
    display: block;
    position: absolute;
    right: 32px;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 51;
  }
  .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(120,134,255,.055);
  --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(110,125,210,.05);}
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;}
}
@media(max-width:1080px) {
/* Compact nav: reveal the hamburger before the primary links can crowd.
   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(--bg);
  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;}
}

/* ======================================================================
   SUPERVISION COMPONENTS
   The homepage and /how-it-works both use these: the outcome and evidence
   state lists, the path table, the selective-supervision funnel, the
   assurance ladder rungs, and the runtime loop. Moved here from the
   homepage's page-scoped block when the second page needed them.
   ====================================================================== */
.v4-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;}

/* draft ribbon */
.v4-flag{background:color-mix(in srgb,var(--cyan) 14%,var(--bg-1));border-bottom:1px solid var(--rule);font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:center;padding:6px 12px;position:relative;z-index:31;}
.v4-flag a{color:var(--cyan);}

/* ---- the supervision states, used identically wherever they appear ---- */
html.hp .pp.s-conf{color:var(--mint);border-color:rgba(70,224,192,.35);}
html.hp .pp.s-part{color:var(--cyan);border-color:rgba(70,184,255,.35);}
html.hp .pp.s-contra{color:var(--coral);border-color:rgba(255,122,102,.35);}
html.hp .pp.s-pend{color:var(--ink-3);border-color:var(--rule-2);}
html.hp .pp.s-unk{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,var(--rule-2));}
.v4-k-conf{color:var(--mint);}
.v4-k-part{color:var(--cyan);}
.v4-k-contra{color:var(--coral);}
.v4-k-pend{color:var(--ink-3);}
.v4-k-unk{color:var(--warn);}

/* hero console: evidence column + selected-row detail */
html.hp .v4-ev-count{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);white-space:nowrap;}
html.hp .pc-tbl tr.v4-sel{background:color-mix(in srgb,var(--warn) 9%,transparent);}
.v4-detail{border-top:1px solid var(--rule);background:var(--bg-1);padding:12px 14px 13px;font-family:var(--ff-mono);font-size:11px;flex:1 1 auto;}
.v4-dt-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;}
.v4-dt-head b{font-weight:600;color:var(--ink);}
.v4-dt-head span{color:var(--ink-3);}
.v4-dt-block{margin-bottom:9px;}
.v4-dt-k{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}
.v4-dt-v{color:var(--ink-2);}
.v4-obs{list-style:none;margin:0;padding:0;}
.v4-obs li{color:var(--ink-2);padding:1px 0;}
.v4-obs li i{font-style:normal;display:inline-block;width:14px;color:var(--mint);}
.v4-obs li.q i{color:var(--warn);}
.v4-dt-foot{display:flex;flex-wrap:wrap;gap:8px 22px;border-top:1px solid var(--rule);padding-top:9px;}

/* trace versus evidence */
.v4-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;}
.v4-panel{border:1px solid var(--rule-2);border-radius:12px;background:var(--panel);overflow:hidden;box-shadow:var(--card-shadow);}
.v4-panel-h{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--bg-1);}
.v4-panel.ev .v4-panel-h{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,var(--bg-1));}
.v4-rows{padding:6px 14px 12px;font-family:var(--ff-mono);font-size:11.5px;}
.v4-row{display:flex;justify-content:space-between;gap:14px;padding:5px 0;color:var(--ink-2);border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);}
.v4-row:last-child{border-bottom:0;}
.v4-row b{font-weight:600;color:var(--ink);}
.v4-vs-mid{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--rule));border-radius:999px;padding:7px 12px;background:color-mix(in srgb,var(--cyan) 8%,var(--panel));white-space:nowrap;}

/* the measure the buyer is scored on, above the work list */
.v4-rate{border-bottom:1px solid var(--rule);background:var(--bg-1);padding:10px 14px 11px;}
.v4-rt-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;}
.v4-rt-btm{display:flex;align-items:center;gap:12px;margin-top:8px;}
.v4-rt-bar{flex:1;min-width:60px;height:5px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--warn) 34%,var(--rule));display:block;}
.v4-rt-bar i{display:block;height:100%;background:color-mix(in srgb,var(--mint) 62%,var(--rule-2));border-radius:3px 0 0 3px;}
.v4-rt-k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);}
.v4-rt-fig{font-family:var(--ff-display);font-size:14px;color:var(--ink-2);}
.v4-rt-fig b{font-size:19px;color:var(--ink);font-weight:700;margin-right:4px;}
.v4-rt-sub{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap;}

/* the stage a workflow is in, and what holds it there. Scoped html.hp: the
   shared .loop-step / .loop-k rules are too, so a bare class loses to them. */
.v4-blk{color:var(--ink-3);}
html.hp .loop-step.v4-here{border-color:color-mix(in srgb,var(--mint) 42%,var(--rule));background:color-mix(in srgb,var(--mint) 7%,var(--panel));}
html.hp .v4-here .loop-k{color:var(--mint);}

/* the state vocabulary, one line each, on two axes */
.v4-axes{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.v4-ax-h{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.v4-states{border:1px solid var(--rule);border-radius:12px;background:var(--panel);overflow:hidden;max-width:820px;}
.v4-state{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:baseline;padding:11px 18px;border-bottom:1px solid var(--rule);}
.v4-state:last-child{border-bottom:0;}
.v4-state b{font-family:var(--ff-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;}
.v4-state span{color:var(--ink-2);font-size:14px;}

/* the one behavioural line worth a box */
.v4-callout{border:1px solid color-mix(in srgb,var(--warn) 40%,var(--rule));border-left-width:3px;border-radius:10px;background:color-mix(in srgb,var(--warn) 7%,var(--panel));padding:16px 20px;margin:18px 0 0;max-width:820px;}
.v4-callout b{color:var(--warn);}

/* selective supervision funnel */
.v4-funnel{display:flex;flex-direction:column;align-items:center;gap:0;}
.v4-fn-step{font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);border:1px solid var(--rule);border-radius:999px;background:var(--panel);padding:9px 20px;text-align:center;}
.v4-fn-step.top{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--ink);border-radius:10px;}
.v4-fn-drop{width:1px;height:20px;background:color-mix(in srgb,var(--cyan) 45%,var(--rule));}
.v4-fn-split{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:20px;}
.v4-branch{border:1px solid var(--rule);border-top-width:2px;border-radius:10px;background:var(--panel);padding:14px 16px;}
.v4-branch .lb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:6px;}
.v4-branch h4{font-family:var(--ff-display);font-size:14px;margin:0 0 5px;color:var(--ink);}
.v4-branch p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);}
.v4-branch.low{border-top-color:var(--mint);}
.v4-branch.low .lb{color:var(--mint);}
.v4-branch.med{border-top-color:var(--cyan);}
.v4-branch.med .lb{color:var(--cyan);}
.v4-branch.high{border-top-color:var(--warn);}
.v4-branch.high .lb{color:var(--warn);}

/* assurance ladder */
.v4-rung{flex:1;min-width:150px;}
.v4-rung .loop-s{font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);margin-top:6px;display:block;}
.v4-axis{display:flex;align-items:center;gap:12px;margin-top:14px;}
.v4-axis span.l{flex:1;border-top:1px dashed color-mix(in srgb,var(--cyan) 38%,var(--rule));}
.v4-axis span.t{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.05em;color:var(--cyan);white-space:nowrap;}

/* vertical flow, used for the completion question and the ambiguous effect */
.v4-tl{border:1px solid var(--rule);border-radius:12px;background:var(--panel);padding:18px 20px;font-family:var(--ff-mono);font-size:11.5px;max-width:820px;}
.v4-tl-step{display:flex;align-items:center;gap:10px;color:var(--ink-2);padding:4px 0;}
.v4-tl-step i{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:0 0 auto;}
.v4-tl-step.warn{color:var(--warn);}
.v4-tl-step.warn i{background:var(--warn);}
.v4-tl-step.ask{color:var(--ink);font-family:var(--ff-display);font-weight:700;font-size:14px;}
.v4-tl-line{display:block;width:1px;height:12px;margin-left:3px;background:color-mix(in srgb,var(--cyan) 40%,var(--rule-2));}
.v4-fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.v4-fork div{border:1px solid var(--rule);border-radius:9px;padding:11px 13px;background:var(--bg-1);}
.v4-fork div.hold{border-color:color-mix(in srgb,var(--warn) 40%,var(--rule));}
/* no colour here: the state helper on the label owns it, as everywhere else */
.v4-fork b{display:block;font-family:var(--ff-display);font-size:13px;margin-bottom:3px;}

@media (max-width:900px){
  .v4-vs{grid-template-columns:1fr;}
  .v4-vs-mid{justify-self:center;}
  .v4-axes{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .v4-rt-sub{margin-left:0;flex-basis:100%;white-space:normal;}
  .v4-rt-btm{flex-wrap:wrap;}
  .v4-rt{padding:30px 14px 18px 40px;}
  .v4-rt-return{left:14px;}
  .v4-rt-split{grid-template-columns:1fr;}
  .v4-rt-split span:last-child{margin-top:8px;}
  /* the path table becomes stacked blocks: four columns cannot survive 390px */
  .v4-path,.v4-path tbody,.v4-path tr,.v4-path td{display:block;width:100%;}
  .v4-path thead{display:none;}
  .v4-path tr{border-bottom:1px solid var(--rule);}
  .v4-path tr:last-child{border-bottom:0;}
  .v4-path td{border-bottom:0;padding:4px 16px;}
  .v4-path td.st{padding-top:14px;}
  .v4-path td.go{padding-bottom:14px;}
  .v4-fn-split{grid-template-columns:1fr;}
  .v4-fork{grid-template-columns:1fr;}
  .v4-state{grid-template-columns:1fr;gap:4px;}
  .v4-dt-foot{gap:8px 14px;}
  /* the console keeps the work, the evidence count and the state; the
     narrative column is already carried by the copy beside it */
  html.hp .pc-tbl{table-layout:fixed;font-size:11px;}
  html.hp .pc-tbl th:nth-child(2),html.hp .pc-tbl td:nth-child(2){display:none;}
  html.hp .pc-tbl .nm{white-space:normal;overflow-wrap:anywhere;}
  html.hp .pc-tbl .nm .an{min-width:0;}
  html.hp .pc-tbl th,html.hp .pc-tbl td{padding-left:9px;padding-right:9px;}
  .v4-detail{overflow-wrap:anywhere;}
  /* the axis caption is a sentence on a narrow screen, not a rule with a label */
  .v4-axis{flex-direction:column;align-items:stretch;gap:9px;}
  .v4-axis span.t{white-space:normal;text-align:center;}
  .v4-axis span.l{flex:none;width:100%;}
}
/* step number, so the page reads as one method rather than six features */
.v4-stepno{display:inline-block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--rule));border-radius:999px;padding:5px 12px;margin-bottom:14px;}

/* the path table: spine of the page and its table of contents */
.v4-path{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--panel);font-size:14px;}
.v4-path th{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:500;padding:11px 16px;background:var(--bg-1);border-bottom:1px solid var(--rule);}
.v4-path td{padding:13px 16px;color:var(--ink-2);border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5;}
.v4-path tr:last-child td{border-bottom:0;}
.v4-path td.st b{font-family:var(--ff-display);font-weight:700;color:var(--ink);font-size:14.5px;}
.v4-path td.go{font-family:var(--ff-mono);font-size:11.5px;white-space:nowrap;color:var(--ink-3);}
.v4-path td.go a{color:var(--cyan);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);}
.v4-path tr.v4-mark td{background:color-mix(in srgb,var(--mint) 5%,transparent);}
.v4-path tr.v4-mark td.st b{color:var(--mint);}
.v4-path tr.v4-dest td{background:color-mix(in srgb,var(--cyan) 7%,transparent);}
.v4-path tr.v4-dest td.st b{color:var(--cyan);}

/* secondary paragraph, lighter than a lede */
.v4-sub{max-width:820px;color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0 0 24px;}
/* the deepest-supervision rung, and the runtime loop it names */
html.hp .loop-step.v4-deep{border-color:color-mix(in srgb,var(--cyan) 55%,var(--rule));background:color-mix(in srgb,var(--cyan) 12%,var(--panel));box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 12%,transparent);}
html.hp .v4-deep .loop-k{color:var(--cyan);}
.v4-loopline{max-width:820px;font-family:var(--ff-display);font-weight:700;font-size:18px;line-height:1.45;color:var(--ink);margin:16px 0 0;}

/* the runtime panel: one durable context, with the return edge drawn */
.v4-rt{position:relative;border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--rule));border-radius:14px;background:color-mix(in srgb,var(--cyan) 5%,var(--panel));padding:30px 22px 22px 52px;margin-top:22px;max-width:820px;}
.v4-rt-label{position:absolute;top:-9px;left:22px;background:var(--bg-1);border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--rule));border-radius:999px;padding:2px 12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
.v4-rt-chain{display:flex;flex-direction:column;gap:0;}
.v4-rt-step{position:relative;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);border:1px solid var(--rule);border-radius:8px;background:var(--panel);padding:9px 14px;}
.v4-rt-step.exec{border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));color:var(--ink);}
.v4-rt-step.next{border-color:color-mix(in srgb,var(--mint) 42%,var(--rule));color:var(--ink);}
/* the connector between rows, drawn once so every gap matches */
.v4-rt-chain > * + *{margin-top:18px;}
.v4-rt-chain > * + *::before{content:"";position:absolute;left:50%;top:-19px;width:1px;height:18px;background:color-mix(in srgb,var(--cyan) 45%,var(--rule));}
.v4-rt-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.v4-rt-split span{font-family:var(--ff-mono);font-size:11px;border:1px solid var(--rule);border-radius:8px;padding:8px 12px;text-align:center;background:var(--panel);}
.v4-rt-split .est{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 35%,var(--rule));}
.v4-rt-split .unc{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--rule));}
/* return edge: runs up the left gutter from the next decision back to execution */
.v4-rt-return{position:absolute;left:22px;bottom:46px;top:96px;width:22px;border-left:1px dashed color-mix(in srgb,var(--cyan) 55%,var(--rule));border-bottom:1px dashed color-mix(in srgb,var(--cyan) 55%,var(--rule));border-bottom-left-radius:8px;}
.v4-rt-back{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.04em;color:var(--cyan);margin:14px 0 0;}
.v4-rt-return i{position:absolute;top:-1px;left:-4px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid color-mix(in srgb,var(--cyan) 70%,var(--rule));}

/* console detail: the four supervision inputs converging on one decision */
.v4-dt-mode{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--rule));border-radius:999px;padding:2px 8px;white-space:nowrap;}
.v4-inputs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:2px;}
.v4-in{border:1px solid var(--rule);border-radius:7px;background:var(--panel);padding:9px 12px;}
.v4-in-k{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}
.v4-in-v{display:block;color:var(--ink-2);line-height:1.6;}
.v4-in-v.dim{color:var(--ink-3);}
.v4-unify{display:flex;align-items:center;gap:9px;margin-top:9px;}
.v4-unify span.l{flex:1;border-top:1px dashed color-mix(in srgb,var(--cyan) 40%,var(--rule));}
.v4-unify span.t{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);white-space:nowrap;}
.v4-conv{display:flex;justify-content:center;align-items:center;height:16px;position:relative;}
.v4-conv::before{content:"";position:absolute;top:0;width:1px;height:10px;background:color-mix(in srgb,var(--cyan) 55%,var(--rule));}
.v4-conv i{position:absolute;top:9px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid color-mix(in srgb,var(--cyan) 70%,var(--rule));}
.v4-dt-foot span.wide{flex-basis:100%;}
@media (max-width:680px){
  /* the detail pane is 9.5px mono in four blocks: legible on a desktop hero,
     not on a phone, where it added ~500px of decoration before the next
     section. Mobile keeps the KPI and the work list, which carry the value
     story; the architecture story is told in copy further down the page. */
  .v4-inputs{grid-template-columns:1fr;}
  html.hp .pconsole .v4-detail{display:none;}
}

/* compact console rows: a label inline with its value, and the decision line */
.v4-dt-k.inline{display:inline;margin-right:8px;}
.v4-goal{color:var(--ink-2);padding:4px 0 10px;line-height:1.55;}
.v4-decide{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--rule);padding-top:12px;margin-top:6px;}
.v4-decide i{font-style:normal;color:var(--cyan);}

/* homepage: the four outcome states as one row, and the four sources as one strip */
.v4-states-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:26px;}
.v4-sr-k{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-right:4px;}
.v4-sources{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px;}
.v4-src{font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);border:1px solid var(--rule);border-radius:8px;background:var(--panel);padding:8px 12px;}
.v4-src.hl{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,var(--rule));background:color-mix(in srgb,var(--cyan) 8%,var(--panel));}
.v4-sources i{font-style:normal;color:var(--ink-3);font-family:var(--ff-mono);font-size:12px;}
.v4-sources i.arr{color:var(--cyan);margin:0 2px;}

/* homepage section two: copy beside the convergence diagram */
.v4-two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.v4-two p{color:var(--ink-2);line-height:1.7;margin:0 0 14px;}
html.hp .v4-vs.stack{grid-template-columns:1fr;justify-items:stretch;gap:10px;}
html.hp .v4-vs.stack .v4-vs-mid{justify-self:center;}
@media (max-width:900px){ .v4-two{grid-template-columns:1fr;gap:26px;} }

/* the capability that produces an outcome, inside the outcome card */
html.hp .card .card-how{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-3);}
html.hp .card .card-how b{color:var(--ink-2);font-weight:600;}

/* the closing block: one column, question first, both paths last */
html.hp .cta.cta-close{flex-direction:column;align-items:center;text-align:center;gap:0;padding:52px 40px 46px;}
html.hp .cta.cta-close h2{max-width:820px;margin-bottom:16px;}
html.hp .cta.cta-close p{max-width:760px;color:var(--ink-2);line-height:1.7;margin:0 0 26px;}
html.hp .cta.cta-close .cta-paths{margin:20px 0 0;font-size:14px;}

/* platform status: availability stated once, out of the value narrative */
.v4-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border:1px solid var(--rule);border-left-width:3px;border-radius:10px;background:var(--bg-1);padding:14px 18px;margin-top:20px;max-width:900px;font-size:14px;color:var(--ink-2);}
.v4-status-k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);}

/* the six questions a unit of delegated work answers */
html.hp ol.v4-qs{list-style:none;counter-reset:q;margin:0;padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--panel);overflow:hidden;max-width:900px;}
html.hp ol.v4-qs li{counter-increment:q;display:grid;grid-template-columns:34px 1fr;gap:4px 14px;padding:16px 20px;border-bottom:1px solid var(--rule);}
html.hp ol.v4-qs li:last-child{border-bottom:0;}
html.hp ol.v4-qs li::before{content:counter(q,decimal-leading-zero);font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);padding-top:3px;}
html.hp ol.v4-qs .q{font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--ink);}
html.hp ol.v4-qs .a{grid-column:2;color:var(--ink-2);font-size:14px;line-height:1.6;}
@media (max-width:680px){ html.hp ol.v4-qs li{grid-template-columns:1fr;} html.hp ol.v4-qs .a{grid-column:1;} }


/* =========================================================================
   V5 VISUAL GRAMMAR — three registers plus the rail signature.
   Namespaced v5-/rail- and scoped html.hp. Nothing above is modified, so a
   page migrates by switching its markup, and unmigrated pages are untouched.
   Work item 20260815-0823-un.
   ========================================================================= */

html.hp{
  /* status palette, promoted from the console so one accent stops doing four jobs */
  --v5-est:var(--mint);          /* established: the result is established        */
  --v5-held:#E8B45A;             /* held: waiting on a person or a reconciliation */
  --v5-unk:var(--coral);         /* unknown: the outcome is not established       */
  --v5-bind:var(--cyan);         /* Tanomis is in the path, the decision binds    */
  --v5-label:#7E8CB0;           /* quiet label that still clears AA on every
                                    v5 surface, including the raised artifact  */
  --v5-raise:#161F3E;            /* artifact register: raised above --panel       */
  --v5-raise-2:#1B2549;
  --v5-art-shadow:0 40px 90px -46px rgba(0,0,0,.92);
}
html.hp[data-theme="light"]{
  --v5-label:#5C6A80;
  --v5-held:#B67514;
  --v5-raise:#FFFFFF;
  --v5-raise-2:#F5F8FD;
  --v5-art-shadow:0 30px 64px -34px rgba(16,29,48,.30);
}

/* ---- register 1: statement -------------------------------------------- */
/* No surface, no border, no eyebrow. Used at most twice per page, for the
   claim the page turns on. */
html.hp .v5-statement{padding:clamp(52px,7vw,96px) 0;}
html.hp .v5-statement p{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(26px,3.9vw,52px);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);margin:0;max-width:26ch;text-wrap:balance;
}
/* the second clause steps down a size, so a long statement stays one gesture
   instead of seven lines at the same weight */
html.hp .v5-statement .v5-st-2{display:block;color:var(--v5-label);font-size:.78em;line-height:1.1;margin-top:.24em;letter-spacing:-.025em;}
html.hp .v5-statement .v5-st-note{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;color:var(--v5-label);
  margin:clamp(24px,3vw,40px) 0 0;max-width:52ch;line-height:1.7;
}

/* ---- register 2: artifact --------------------------------------------- */
/* The only place a border is allowed. Raised surface, real shadow, mono
   chrome. A box on the page now means: this is a real object. */
html.hp .v5-artifact{
  background:var(--v5-raise);border:1px solid var(--rule-2);border-radius:14px;
  box-shadow:var(--v5-art-shadow);overflow:hidden;margin:0;
}
html.hp .v5-artifact-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--bg-1);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--v5-label);
}
html.hp .v5-artifact-head .k{color:var(--ink-2);text-transform:uppercase;}
html.hp .v5-art-illus{
  margin-left:auto;border:1px solid var(--rule-2);border-radius:999px;
  padding:1px 9px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--v5-label);
}
html.hp .v5-artifact-body{padding:clamp(20px,3vw,34px) clamp(16px,3vw,34px);}
html.hp .v5-artifact-caption{
  font-family:var(--ff-mono);font-size:11.5px;line-height:1.7;color:var(--v5-label);
  margin:14px 0 0;max-width:74ch;
}
/* wider than the wrap: the artifact is allowed to be the biggest thing on the page */
html.hp .v5-bleed{
  width:min(1560px,calc(100vw - 40px));
  margin-left:50%;transform:translateX(-50%);
}

/* ---- register 3: ledger ------------------------------------------------ */
/* Density without boxes. Hairline rules only, mono labels, no card ever
   holds prose. */
html.hp .v5-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
html.hp .v5-ledger > li{
  display:grid;grid-template-columns:minmax(150px,4fr) 7fr;gap:clamp(14px,2.4vw,40px);
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:start;
}
html.hp .v5-ledger .k{
  font-family:var(--ff-display);font-weight:600;font-size:15.5px;color:var(--ink);
  letter-spacing:-.01em;
}
html.hp .v5-ledger .kx{
  display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--v5-label);margin-bottom:6px;
}
html.hp .v5-ledger .d{color:var(--ink-2);font-size:14.5px;line-height:1.65;}
html.hp .v5-ledger .d b{color:var(--ink);font-weight:600;}
html.hp .v5-ledger .d + .d{margin-top:8px;}
html.hp .v5-ledger .d-neg{color:var(--v5-label);}
html.hp .v5-ledger .d-neg b{color:var(--v5-held);font-weight:600;}
/* inline run of terms: what used to be a row of pills, without the pills */
html.hp .v5-terms{
  margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:11.5px;color:var(--v5-label);letter-spacing:.02em;
}
html.hp .v5-terms li{padding:2px 0;}
/* the separator trails its term, so a wrapped line never opens with a dot */
html.hp .v5-terms li:not(:last-child)::after{content:"·";padding:0 9px;color:var(--v5-label);opacity:.55;}

/* ---- composition: asymmetric split ------------------------------------ */
html.hp .v5-split{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4.4vw,72px);align-items:start;
}
html.hp .v5-split-head h2{margin-bottom:14px;}
html.hp .v5-split-head p{color:var(--ink-2);font-size:15.5px;margin:0;max-width:40ch;}
html.hp .v5-split-head p + p{margin-top:12px;}

/* section heads in the new grammar: no eyebrow, the heading carries it */
/* the section head is itself asymmetric: a short heavy heading on the narrow
   side, the argument on the wide side. Nothing starts at the same x twice. */
html.hp .v5-head{
  display:grid;grid-template-columns:6fr 5fr;
  column-gap:clamp(24px,4vw,64px);row-gap:14px;align-items:start;
  margin-bottom:clamp(30px,3.6vw,52px);
}
html.hp .v5-head .v5-index{grid-column:1;grid-row:1;margin-bottom:0;}
html.hp .v5-head h2{grid-column:1;grid-row:2;margin:0;max-width:22ch;}
html.hp .v5-head.wide h2{max-width:24ch;}
html.hp .v5-head-body{grid-column:2;grid-row:2;}
html.hp .v5-head p{grid-column:2;color:var(--ink-2);font-size:15.5px;margin:0;max-width:62ch;}
html.hp .v5-head-body p + p{margin-top:15px;}
html.hp .v5-head p:first-of-type{grid-row:2;}
html.hp .v5-note{color:var(--v5-label);font-size:14px;margin:22px 0 0;max-width:70ch;}
html.hp .v5-subhead{font-family:var(--ff-display);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink);}
html.hp .v5-note-h{display:block;color:var(--ink);font-family:var(--ff-display);font-size:18px;font-weight:600;margin-bottom:8px;}
html.hp .v5-stack{margin-top:clamp(48px,6vw,88px);}
html.hp .v5-gap{margin-top:clamp(40px,5vw,72px);}
html.hp .v5-terms.tight{margin:0;}
html.hp .v5-morelink{margin:14px 0 0;}
html.hp .v5-index{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v5-label);display:block;margin-bottom:16px;
}
html.hp .v5-index b{color:var(--v5-bind);font-weight:500;}

/* ---- the signature: a rail, a boundary, and what stops at it ----------- */
html.hp .rail{--rail-bx:47%;font-family:var(--ff-mono);}
html.hp .rail-head{
  display:grid;grid-template-columns:var(--rail-cols,18px minmax(120px,190px) 1fr minmax(96px,190px));
  gap:clamp(8px,1.4vw,16px);align-items:end;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--v5-label);
  padding-bottom:14px;
}
html.hp .rail-head .h-in{grid-column:2;}
html.hp .rail-head .h-b{grid-column:3;justify-self:start;margin-left:var(--rail-bx);transform:translateX(-50%);color:var(--v5-bind);white-space:nowrap;}
html.hp .rail-head .h-out{grid-column:4;text-align:right;}
html.hp .rail-lanes{list-style:none;margin:0;padding:0;}
html.hp .rail-lane{
  display:grid;grid-template-columns:var(--rail-cols,18px minmax(120px,190px) 1fr minmax(96px,190px));
  gap:clamp(8px,1.4vw,16px);align-items:center;padding:11px 0;color:var(--v5-label);
}
html.hp .rail-lane.is-est{color:var(--v5-est);}
html.hp .rail-lane.is-unk{color:var(--v5-unk);}
html.hp .rail-lane.is-held{color:var(--v5-held);}
html.hp .rail-mark{
  width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;
  box-shadow:0 0 10px -2px currentColor;
}
html.hp .is-est .rail-mark{background:currentColor;}
html.hp .is-unk .rail-mark{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);}
html.hp .is-held .rail-mark{background:transparent;}
html.hp .rail-name{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere;}
html.hp .rail-track{position:relative;height:14px;}
html.hp .rail-track::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-2);
}
/* every lane draws its own segment of the boundary, so the line is continuous
   and stays put at any width */
html.hp .rail-track::after{
  content:"";position:absolute;left:var(--rail-bx);top:-11px;bottom:-11px;width:1px;
  background:var(--v5-bind);opacity:.5;
}
html.hp .rail-fill{
  position:absolute;left:0;top:50%;height:2px;width:var(--to,100%);
  transform:translateY(-50%);border-radius:2px;
  background:linear-gradient(90deg,color-mix(in oklab,currentColor 18%,transparent),currentColor);
}
/* grid children default to min-width:auto, so a long outcome would widen the
   whole rail instead of wrapping. Both halves of the fix are required. */
html.hp .rail-lane > *{min-width:0;}
html.hp .rail-out{font-size:11.5px;text-align:right;line-height:1.45;}
html.hp .rail-foot{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:11px;line-height:1.8;color:var(--v5-label);letter-spacing:.02em;
}
html.hp .rail-foot b{font-weight:500;}
html.hp .rail-foot .est{color:var(--v5-est);}
html.hp .rail-foot .held{color:var(--v5-held);}
html.hp .rail-foot .unk{color:var(--v5-unk);}
html.hp .rail-foot .bind{color:var(--v5-bind);}

/* single-lane form: the same primitives at full fidelity, one unit of work */
html.hp .rail-one{--rail-cols:18px minmax(120px,230px) 1fr minmax(96px,230px);}
html.hp .rail-one .rail-lane{padding:9px 0;}
html.hp .rail-one .rail-stop{font-size:11.5px;color:var(--ink-2);}
html.hp .rail-one .rail-lane.is-unk .rail-stop,
html.hp .rail-one .rail-lane.is-held .rail-stop{color:currentColor;}
html.hp .rail-fork{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,22px);
  margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);
}
html.hp .rail-fork > div{font-size:12px;line-height:1.7;color:var(--ink-2);}
html.hp .rail-fork b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
html.hp .rail-fork .f-est b{color:var(--v5-est);}
html.hp .rail-fork .f-held b{color:var(--v5-held);}

/* ---- narrow viewports -------------------------------------------------- */
@media (max-width:900px){
  html.hp .v5-split{grid-template-columns:1fr;gap:26px;}
  html.hp .v5-head{grid-template-columns:1fr;row-gap:16px;}
  html.hp .v5-head .v5-index,html.hp .v5-head h2,
  html.hp .v5-head p,html.hp .v5-head p:first-of-type{grid-column:1;grid-row:auto;}
  html.hp .v5-head h2,html.hp .v5-head.wide h2{max-width:22ch;}
  html.hp .v5-split-head p{max-width:62ch;}
}
@media (max-width:760px){
  html.hp .v5-ledger > li{grid-template-columns:1fr;gap:8px;}
  html.hp .rail-head{display:none;}
  html.hp .rail-lane{grid-template-columns:14px 1fr auto;gap:12px;}
  html.hp .rail-track{display:none;}
  html.hp .rail-out{font-size:11px;}
  html.hp .rail-fork{grid-template-columns:1fr;}
  html.hp .v5-bleed{width:calc(100vw - 32px);}
  html.hp .v5-statement p{max-width:100%;}
}

/* ---- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  html.hp .rail-fill{animation:v5-rail-in .7s cubic-bezier(.2,.7,.3,1) both;}
  html.hp .rail-lane:nth-child(2) .rail-fill{animation-delay:.06s;}
  html.hp .rail-lane:nth-child(3) .rail-fill{animation-delay:.12s;}
  html.hp .rail-lane:nth-child(4) .rail-fill{animation-delay:.18s;}
  html.hp .rail-lane:nth-child(5) .rail-fill{animation-delay:.24s;}
  html.hp .rail-lane:nth-child(6) .rail-fill{animation-delay:.30s;}
}
@keyframes v5-rail-in{from{width:0;opacity:0;}to{width:var(--to,100%);opacity:1;}}

/* ---- the rail in its stage form: a climb rather than a crossing ---------
   Used where the content is a progression the reader is somewhere inside
   (the adoption path, the depth ladder). Same marks, same meanings. */
html.hp .rail-stages{position:relative;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
html.hp .rail-stages::before{
  content:"";position:absolute;left:5px;top:26px;bottom:26px;width:1px;background:var(--rule-2);
}
html.hp .rail-stages-head{
  display:grid;grid-template-columns:12px minmax(130px,1fr) 1.5fr 1.3fr auto;
  gap:clamp(12px,1.8vw,26px);padding:0 0 12px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--v5-label);
}
html.hp .rail-stages-head span:first-child{grid-column:2;}
html.hp .rail-stage{
  display:grid;grid-template-columns:12px minmax(130px,1fr) 1.5fr 1.3fr auto;
  gap:clamp(12px,1.8vw,26px);align-items:start;
  padding:18px 0;border-bottom:1px solid var(--rule);color:var(--v5-label);
  font-size:14px;line-height:1.6;
}
html.hp .rail-stage .rail-mark{margin-top:4px;width:11px;height:11px;}
html.hp .rail-stage.is-held{color:var(--v5-held);}
html.hp .rail-stage.is-est{color:var(--v5-est);}
html.hp .rail-stage .st-k{font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em;}
html.hp .rail-stage .st-d{color:var(--ink-2);}
html.hp .rail-stage .st-h{color:var(--v5-label);}
html.hp .rail-stage .st-go{font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;white-space:nowrap;}
html.hp .rail-stage .st-go a{color:var(--v5-bind);}
html.hp .rail-stage .st-go a:hover{text-decoration:underline;}
html.hp .rail-stage .st-dest{grid-column:3 / -1;color:var(--v5-bind);}

/* the step index: the page is one climb, and every step says where it sits */
html.hp .v5-step{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v5-label);margin-bottom:16px;
}
html.hp .v5-step b{color:var(--v5-bind);font-weight:500;}
html.hp .v5-step .of{color:var(--v5-label);opacity:.7;}
html.hp .v5-head .v5-step{grid-column:1;grid-row:1;margin-bottom:0;}

/* a lead sentence that used to be a bordered callout */
html.hp .v5-lead{
  border-left:2px solid var(--v5-bind);padding-left:18px;margin:clamp(24px,3vw,40px) 0 0;
  max-width:72ch;color:var(--ink-2);font-size:15.5px;line-height:1.65;
}
html.hp .v5-lead b{color:var(--ink);font-weight:600;}

/* two ledgers side by side, for content that is genuinely two axes */
html.hp .v5-axes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,56px);}
html.hp .v5-axes .ax-h{
  display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--v5-label);margin-bottom:6px;
}
html.hp .v5-ledger.compact > li{grid-template-columns:minmax(110px,1fr) 1.6fr;padding:13px 0;}
html.hp .v5-ledger .k-conf{color:var(--v5-est);}
html.hp .v5-ledger .k-part,html.hp .v5-ledger .k-pend{color:var(--v5-held);}
html.hp .v5-ledger .k-unk,html.hp .v5-ledger .k-contra{color:var(--v5-unk);}

@media (max-width:900px){
  html.hp .v5-axes{grid-template-columns:1fr;}
}
@media (max-width:760px){
  html.hp .rail-stages-head{display:none;}
  html.hp .rail-stage{grid-template-columns:12px 1fr;gap:6px 12px;}
  html.hp .rail-stage .st-k{grid-column:2;}
  html.hp .rail-stage .st-d,html.hp .rail-stage .st-h,
  html.hp .rail-stage .st-go,html.hp .rail-stage .st-dest{grid-column:2;}
  html.hp .rail-stages::before{display:none;}
}

/* an artifact holds one object: its internal parts are separated by rules and
   colour, never by more boxes nested inside the box */
html.hp .v5-artifact .v4-panel{border:0;background:transparent;box-shadow:none;}
html.hp .v5-artifact .v4-branch{border:0;background:transparent;border-left:2px solid currentColor;border-radius:0;}
html.hp .v5-artifact .v4-branch.low{color:var(--v5-est);}
html.hp .v5-artifact .v4-branch.med{color:var(--v5-held);}
html.hp .v5-artifact .v4-branch.high{color:var(--v5-unk);}
html.hp .v5-artifact .v4-branch h4{color:var(--ink);}
html.hp .v5-artifact .v4-branch p{color:var(--ink-2);}
/* the spine sits under the marks and reads as one climb */
html.hp .rail-stages::before{left:5px;background:var(--rule-2);z-index:0;}
html.hp .rail-stage .rail-mark{position:relative;z-index:1;background-color:var(--bg-1);}
html.hp .rail-stage.is-est .rail-mark{background:currentColor;}

/* ---- the capability catalogue -----------------------------------------
   This page is an inventory, so it keeps its tables. What it gets instead
   is an inventory's chrome: a sticky category index, the counts, and a
   status filter, plus tables that read as a catalogue rather than as ten
   more boxes. */
html.hp .cap-index{
  position:sticky;top:62px;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
html.hp .cap-index-inner{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  min-height:52px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;
}
html.hp .cap-cats{display:flex;flex-wrap:wrap;gap:2px 16px;font-family:var(--ff-mono);font-size:11.5px;}
html.hp .cap-cats a{color:var(--v5-label);letter-spacing:.03em;padding:3px 0;}
html.hp .cap-cats a:hover{color:var(--v5-bind);}
html.hp .cap-filter{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;}
html.hp .cap-count{font-family:var(--ff-mono);font-size:11px;color:var(--v5-label);margin-right:8px;}
html.hp .cap-count b{color:var(--ink);font-weight:600;}
html.hp .cap-count .sep{opacity:.5;}
html.hp .cap-filter button{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;
  padding:4px 11px;border-radius:999px;border:1px solid var(--rule-2);
  background:transparent;color:var(--v5-label);cursor:pointer;transition:.15s;
}
html.hp .cap-filter button:hover{color:var(--ink);border-color:var(--ink-3);}
html.hp .cap-filter button.is-on{color:var(--v5-bind);border-color:var(--v5-bind);}
html.hp .cap-filter button:focus-visible{outline:2px solid var(--v5-bind);outline-offset:2px;}

/* a filter that hides rows, and the sections those rows were the whole of */
html.hp[data-cap-filter="available"] .capstat-row:not(.is-available),
html.hp[data-cap-filter="preview"]   .capstat-row:not(.is-preview),
html.hp[data-cap-filter="planned"]   .capstat-row:not(.is-planned){display:none;}
html.hp[data-cap-filter="available"] section:has(.capstat-row):not(:has(.capstat-row.is-available)),
html.hp[data-cap-filter="preview"]   section:has(.capstat-row):not(:has(.capstat-row.is-preview)),
html.hp[data-cap-filter="planned"]   section:has(.capstat-row):not(:has(.capstat-row.is-planned)){display:none;}

/* tables read as a catalogue: rules, not a box around every category */
html.hp .cap-table-wrap{border:0;background:transparent;border-radius:0;}
html.hp .cap-table thead th{border-bottom:1px solid var(--rule-2);}
html.hp .cap-table tbody tr:last-child td{border-bottom:1px solid var(--rule);}
html.hp section[id] .cap-table{margin-top:0;}
html.hp .cap-index + section,html.hp .cap-index + .cap-index + section{scroll-margin-top:120px;}
html.hp section[id]{scroll-margin-top:120px;}

@media (max-width:760px){
  html.hp .cap-index{position:static;}
  html.hp .cap-cats{font-size:11px;gap:2px 12px;}
  html.hp .cap-filter{margin-left:0;}
}
/* a three-column matrix is the one place extra width is readability, so the
   catalogue tables take the bleed the other pages give their artifacts */
@media (min-width:1180px){
  html.hp .cap-table-wrap{width:min(1560px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%);}
}

/* progression marks. A rail that shows a climb uses these; a rail that shows
   outcomes uses established / unknown / held. The two vocabularies never mix. */
html.hp .rail-lane.is-step,html.hp .rail-stage.is-step{color:var(--v5-label);}
html.hp .rail-lane.is-dest,html.hp .rail-stage.is-dest{color:var(--v5-bind);}
html.hp .is-dest .rail-mark{background:currentColor;}
html.hp .is-step .rail-mark{background:transparent;}

/* ---- consistency rules -------------------------------------------------
   Three defects the first pass shipped: two section-head components used
   interchangeably, one component rendering at three widths, and artifacts
   three times apart in scale. These are the rules that close them. */

/* An artifact is either the full bleed or the wrap. There is no third size. */
html.hp .v5-artifact:not(.v5-bleed){width:100%;}
html.hp .v4-rt{width:100%;max-width:none;}

/* The ledger's label column is a fixed measure, so labels line up down the
   page and across pages instead of re-flowing per container width. */
html.hp .v5-ledger > li{grid-template-columns:minmax(0,270px) 1fr;}
html.hp .v5-split .v5-ledger > li{grid-template-columns:minmax(0,190px) 1fr;}
html.hp .v5-ledger.compact > li{grid-template-columns:minmax(0,190px) 1fr;}

/* The CTA aligns with everything else rather than centring itself. */
html.hp .cta.cta-close{align-items:flex-start;text-align:left;}
html.hp .cta.cta-close h2{max-width:24ch;margin-left:0;}
html.hp .cta.cta-close p,html.hp .cta.cta-close .cta-paths{max-width:70ch;margin-left:0;}

/* In a content split the wide column always carries the primary object and the
   narrow one the commentary. The first pass had that inverted twice, which is
   why a five-row ledger and a runtime diagram rendered at 464px. */

/* ---- artifact scale --------------------------------------------------
   The first cut let every artifact take the full bleed. At 1920 that put a
   five-row rail inside a 1560px box, so hairlines stretched across 1100px of
   nothing. The bleed is now reserved for content that is genuinely wide (the
   capability matrices). Everything else sits at the wrap, and the rail holds
   its own measure so the lanes stop stretching. */
html.hp .v5-artifact.v5-bleed{
  width:100%;margin-left:0;transform:none;max-width:100%;
}
html.hp .v5-artifact-body{padding:clamp(16px,2vw,26px) clamp(14px,2vw,26px);}
html.hp .rail,html.hp .rail-stages{max-width:1000px;}
html.hp .rail-lane{padding:8px 0;}
html.hp .rail-one .rail-lane{padding:7px 0;}
html.hp .rail-stage{padding:14px 0;}
html.hp .rail-fork{margin-top:14px;padding-top:14px;}
html.hp .rail-foot{margin-top:12px;padding-top:11px;}
/* the funnel is a narrow object: it was floating three chips in a 1490px box */
html.hp .v5-artifact .v4-funnel{max-width:900px;}
html.hp .v5-artifact .v4-fn-step,
html.hp .v5-artifact .v4-fn-drop{margin-left:0;}

/* A bordered box now means "this looks like product output": the console, a
   readings panel, a funnel. A rail is a diagram drawn in the page's own voice,
   so it loses the box and keeps only its label. That also stops two near
   identical boxed rails reading as the same picture twice. */
html.hp .v5-diagram{margin:0;}
html.hp .v5-diagram .v5-artifact-head{
  padding:0 0 12px;border-bottom:0;background:transparent;border-top:1px solid var(--rule);padding-top:12px;
}
html.hp .v5-diagram .v5-artifact-body{padding:6px 0 0;}
html.hp .rail-stages{max-width:1120px;}

/* =========================================================================
   NARROW VIEWPORTS, LAST WORD
   Two bugs put this here rather than in the blocks above. The consistency
   pass appended `.v5-ledger > li` grid rules after the media query that
   collapses them, so the later rule won and the ledger stayed two columns on
   a phone. And `.v5-head-body` carries `grid-column:2`, which creates an
   implicit second track even when the grid is set to one column, so the head
   never collapsed either. Anything that has to hold on a phone belongs in
   this block, at the end, where nothing later can override it.
   ========================================================================= */
@media (max-width:900px){
  html.hp .v5-head{grid-template-columns:1fr;row-gap:14px;}
  html.hp .v5-head .v5-index,
  html.hp .v5-head .v5-step,
  html.hp .v5-head h2,
  html.hp .v5-head p,
  html.hp .v5-head p:first-of-type,
  html.hp .v5-head-body{grid-column:1;grid-row:auto;}
  html.hp .v5-head h2,html.hp .v5-head.wide h2{max-width:100%;}
  html.hp .v5-split{grid-template-columns:1fr;gap:26px;}
  html.hp .v5-axes{grid-template-columns:1fr;}
}
@media (max-width:760px){
  html.hp .v5-ledger > li,
  html.hp .v5-split .v5-ledger > li,
  html.hp .v5-ledger.compact > li{grid-template-columns:1fr;gap:6px;}
  html.hp .v5-ledger .kx{margin-bottom:2px;}
  html.hp .rail-lane{grid-template-columns:14px 1fr;gap:4px 12px;}
  html.hp .rail-track{display:none;}
  html.hp .rail-out{grid-column:2;text-align:left;font-size:11px;}
  html.hp .rail-one .rail-stop{grid-column:2;}
  html.hp .rail-stage{grid-template-columns:12px 1fr;gap:4px 12px;}
  html.hp .rail-stage .st-k,html.hp .rail-stage .st-d,
  html.hp .rail-stage .st-h,html.hp .rail-stage .st-go,
  html.hp .rail-stage .st-dest{grid-column:2;}
  html.hp .v5-statement p{max-width:100%;}
  html.hp .v5-statement{padding:44px 0;}
  html.hp .v5-artifact-body{padding:16px 14px;}
  html.hp .rail,html.hp .rail-stages{max-width:100%;}
}


/* ── Hero claim triplet, the control-plane promise ──────────────────────── */
html.hp .hero-claims{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;}
html.hp .hero-claims li{position:relative;padding-left:20px;font-size:16px;color:var(--ink);line-height:1.5;}
html.hp .hero-claims li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border:1px solid var(--cyan);background:transparent;}
html.hp .hero-claims li:last-child::before{background:var(--cyan);}

/* ── Unattended-completion value model ─────────────────────────────────── */
html.hp .ucr{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;margin-top:26px;}
html.hp .ucr-in{margin:0;padding:22px 22px 20px;border:1px solid var(--rule);background:var(--panel);
  border-radius:2px;display:grid;gap:15px;align-content:start;}
html.hp .ucr-legend{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:0 0 4px;}
html.hp .ucr-f{display:grid;gap:6px;}
html.hp .ucr-k{font-size:14px;color:var(--ink-2);}
html.hp .ucr-ctl{display:flex;align-items:center;gap:6px;border:1px solid var(--rule-2);background:var(--bg-1);
  border-radius:2px;padding:0 11px;transition:border-color .15s ease;}
html.hp .ucr-ctl:focus-within{border-color:var(--cyan);}
html.hp .ucr-ctl input{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--ink);
  font-family:var(--ff-mono);font-size:19px;font-weight:600;padding:11px 0;outline:none;
  -moz-appearance:textfield;appearance:textfield;}
html.hp .ucr-ctl input::-webkit-outer-spin-button,
html.hp .ucr-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
html.hp .ucr-u{font-family:var(--ff-mono);font-size:16px;color:var(--ink-3);font-style:normal;}
html.hp .ucr-u.pre{order:-1;}
html.hp .ucr-assume{padding-top:14px;border-top:1px dashed var(--rule-2);}
html.hp .ucr-assume .ucr-k{color:var(--cyan);}
html.hp .ucr-hint{font-size:12.5px;line-height:1.5;color:var(--ink-3);}

html.hp .ucr-out{padding:24px;border:1px solid var(--rule-2);border-radius:2px;
  background:linear-gradient(180deg,var(--panel),var(--bg-1));display:flex;flex-direction:column;
  justify-content:center;}
html.hp .ucr-out-k{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);}
html.hp .ucr-big{display:block;font-family:var(--ff-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(44px,7vw,72px);line-height:1.02;color:var(--cyan);margin-top:10px;}
html.hp .ucr-big-sub{font-size:15px;color:var(--ink-2);margin-top:2px;}
html.hp .ucr-rows{list-style:none;margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);
  display:grid;gap:13px;}

html.hp .ucr-rows li{display:flex;align-items:baseline;gap:12px;}
html.hp .ucr-rows b{font-family:var(--ff-mono);font-size:19px;font-weight:600;color:var(--ink);
  min-width:74px;flex:0 0 auto;}
html.hp .ucr-rows span{font-size:14px;color:var(--ink-2);line-height:1.45;}

/* ── Control-plane scope grid ──────────────────────────────────────────── */
html.hp .scope-grid{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);}
html.hp .scope-grid li{background:var(--bg);padding:18px 17px 19px;display:grid;gap:7px;align-content:start;}
html.hp .scope-grid .k{font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--ink);
  letter-spacing:-.01em;}
html.hp .scope-grid .d{font-size:13.5px;line-height:1.5;color:var(--ink-2);}

@media (max-width:1024px){
  html.hp .ucr{grid-template-columns:1fr;}
  html.hp .scope-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  html.hp .scope-grid{grid-template-columns:1fr;}
  html.hp .ucr-rows b{min-width:62px;}
}

/* =========================================================================
   HOMEPAGE NARRATIVE. Agents act, production is hard, AgentOps, the run is
   not the work, work as the unit, where this goes. Scoped under html.hp with
   the same tokens as the rest of the homepage, so both themes follow the
   existing overrides and nothing here needs a second colour definition.
   ========================================================================= */

/* The ladder: what agents used to do and what they do now. Vertical, because
   the hero's visual column is wide but the rungs need room for a description. */
html.hp .ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
html.hp .ladder li{
  position:relative;display:grid;grid-template-columns:34px 1fr;gap:0 14px;align-items:baseline;
  border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:14px 16px;
}
html.hp .ladder li + li::before{
  content:"";position:absolute;left:33px;top:-11px;width:1px;height:10px;background:var(--rule-2);
}
html.hp .ladder .s{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);
}
html.hp .ladder .n{
  font-family:var(--ff-display);font-weight:700;font-size:17px;line-height:1.1;color:var(--ink-2);
}
html.hp .ladder .d{grid-column:2;font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:5px;}
html.hp .ladder li.now{
  border-color:color-mix(in srgb,var(--cyan) 52%,var(--rule));
  background:color-mix(in srgb,var(--cyan) 7%,var(--panel));
}
html.hp .ladder li.now .s{color:var(--cyan);}
html.hp .ladder li.now .n{color:var(--ink);}
html.hp .ladder li.now .d{color:var(--ink-2);}
html.hp .ladder-foot{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--cyan);
  margin:12px 0 0;text-align:right;
}

/* The eight things every team assembles around one agent. */
html.hp .assemble{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none;
}
html.hp .assemble li{
  border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:14px 15px;min-width:0;
}
html.hp .assemble li .k{
  display:block;font-family:var(--ff-display);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2;
}
html.hp .assemble li .d{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-3);}
html.hp .assemble li.core{
  border-color:color-mix(in srgb,var(--coral) 50%,var(--rule));
  background:color-mix(in srgb,var(--coral) 8%,var(--panel));
  display:flex;flex-direction:column;justify-content:center;text-align:center;
}
html.hp .assemble li.core .k{font-size:17px;color:var(--coral);}
html.hp .assemble li.core .d{color:var(--ink-2);}

/* The four verbs. One operating environment, stated as what it does. */
html.hp .verbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;padding:0;list-style:none;
  border:1px solid var(--rule);background:var(--rule);border-radius:12px;overflow:hidden;}
html.hp .verbs li{background:var(--bg);padding:22px 20px 24px;min-width:0;}
html.hp .verbs .v{
  display:block;font-family:var(--ff-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
html.hp .verbs .k{display:block;font-family:var(--ff-display);font-weight:700;font-size:16px;line-height:1.2;color:var(--ink);}
html.hp .verbs .d{display:block;margin-top:9px;font-size:13px;line-height:1.55;color:var(--ink-2);}

/* Agent-shaped management today, work-shaped management next. */
html.hp .unit-shift{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);}
html.hp .unit-col{border:1px solid var(--rule);border-radius:12px;background:var(--panel);padding:20px 20px 22px;}
html.hp .unit-col.next{border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));background:color-mix(in srgb,var(--cyan) 6%,var(--panel));}
html.hp .unit-col .when{
  display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
html.hp .unit-col.next .when{color:var(--cyan);}
html.hp .unit-chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
html.hp .unit-chain li{
  font-family:var(--ff-mono);font-size:12px;border:1px solid var(--rule);border-radius:7px;
  background:var(--bg-1);padding:7px 11px;color:var(--ink-2);
}
html.hp .unit-col.next .unit-chain li{border-color:color-mix(in srgb,var(--cyan) 35%,var(--rule));color:var(--ink);}
html.hp .unit-chain li.sep{border:none;background:none;padding:0 1px;color:var(--ink-3);}
html.hp .unit-col .why{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}

/* Demo II: an objective, and what the platform does with it. */
html.hp .brief{
  border:1px solid color-mix(in srgb,var(--cyan) 42%,var(--rule));border-radius:12px;
  background:color-mix(in srgb,var(--cyan) 6%,var(--panel));padding:20px 22px;margin:0 0 26px;
}
html.hp .brief .k{
  display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
}
html.hp .brief p{margin:0;font-family:var(--ff-display);font-weight:600;font-size:clamp(17px,2vw,23px);
  line-height:1.3;color:var(--ink);letter-spacing:-.015em;}
html.hp .brief .terms{margin:12px 0 0;font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);}
html.hp .objective{list-style:none;margin:0;padding:0;}
html.hp .objective > li{position:relative;display:grid;grid-template-columns:118px 1fr;gap:0 20px;
  padding:16px 0;border-top:1px solid var(--rule);}
html.hp .objective > li:last-child{border-bottom:1px solid var(--rule);}
html.hp .objective .p{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding-top:2px;
}
html.hp .objective li.settle .p{color:var(--cyan);}
html.hp .objective .b{min-width:0;}
html.hp .objective .b .h{font-family:var(--ff-display);font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.25;}
html.hp .objective .b .d{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}
html.hp .objective .reads{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
html.hp .objective .reads li{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-family:var(--ff-mono);font-size:12px;
  border:1px solid var(--rule);border-radius:8px;background:var(--bg-1);padding:9px 12px;color:var(--ink-2);
}
html.hp .objective .reads b{font-weight:600;}
html.hp .objective .reads .no b{color:var(--coral);}
html.hp .objective .reads .yes b{color:var(--mint);}

/* Today, next, later. Stated as three horizons with an honest label on each. */
html.hp .horizon{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,32px);margin:0;padding:0;list-style:none;}
html.hp .horizon li{border-top:2px solid var(--rule);padding-top:18px;}
html.hp .horizon li.today{border-top-color:var(--cyan);}
html.hp .horizon .w{
  display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
html.hp .horizon li.today .w{color:var(--cyan);}
html.hp .horizon .k{display:block;font-family:var(--ff-display);font-weight:700;font-size:21px;line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);}
html.hp .horizon .o{display:block;margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-2);}
html.hp .horizon .steps{display:block;margin-top:12px;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-3);}

/* Demo I: what Tanomis does while the agent is running. */
html.hp .mediate{list-style:none;margin:0;padding:0;}
html.hp .mediate > li{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  padding:14px 0;border-top:1px solid var(--rule);}
html.hp .mediate > li:last-child{border-bottom:1px solid var(--rule);}
html.hp .mediate .from,html.hp .mediate .to{min-width:0;font-size:13.5px;line-height:1.5;}
html.hp .mediate .from{color:var(--ink-2);}
html.hp .mediate .to{color:var(--ink);}
html.hp .mediate .who{
  display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}
html.hp .mediate .to .who{color:var(--cyan);}
html.hp .mediate .arr{font-family:var(--ff-mono);color:var(--cyan);font-size:13px;}
html.hp .mediate .to b{font-weight:600;}
html.hp .mediate .to b.ok{color:var(--mint);}
html.hp .mediate .to b.no{color:var(--coral);}
html.hp .mediate .to b.hold{color:var(--v5-held);}

@media (max-width: 980px){
  html.hp .verbs{grid-template-columns:repeat(2,1fr);}
  html.hp .assemble{grid-template-columns:repeat(2,1fr);}
  html.hp .horizon{grid-template-columns:1fr;}
  html.hp .horizon li + li{margin-top:22px;}
  html.hp .unit-shift{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  html.hp .verbs{grid-template-columns:1fr;}
  html.hp .assemble{grid-template-columns:1fr;}
  html.hp .objective > li{grid-template-columns:1fr;gap:10px;}
  html.hp .objective .p{padding-top:0;}
  html.hp .mediate > li{grid-template-columns:1fr;gap:8px;}
  html.hp .mediate .arr{display:none;}
  html.hp .ladder li{grid-template-columns:1fr;gap:0;}
  html.hp .ladder .d{grid-column:1;}
  html.hp .ladder li + li::before{left:50%;}
  html.hp .ladder-foot{text-align:left;}
}

/* Market map on /compare: what a platform manages, against what it is bound to.
   A grid rather than an SVG, so it reflows on a phone and the labels stay text. */
html.hp .map{display:grid;grid-template-columns:26px 1fr;gap:0 14px;}
html.hp .map-y{
  grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;align-self:stretch;
}
html.hp .map-y i{display:block;font-style:normal;color:var(--ink-3);opacity:.75;letter-spacing:.04em;text-transform:none;font-size:11px;margin-top:4px;}
html.hp .map-grid{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
html.hp .map-x{
  grid-column:2;grid-row:2;margin:12px 0 0;text-align:center;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
html.hp .map-x i{display:block;font-style:normal;opacity:.75;letter-spacing:.04em;text-transform:none;font-size:11px;margin-top:4px;}
html.hp .map-grid .q{
  border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:16px 17px;min-width:0;
}
html.hp .map-grid .q .pos{
  display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;
}
html.hp .map-grid .q .qk{display:block;font-family:var(--ff-display);font-weight:700;font-size:15.5px;line-height:1.2;color:var(--ink);}
html.hp .map-grid .q .qd{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--ink-2);}
html.hp .map-grid .q.us{
  border-color:color-mix(in srgb,var(--cyan) 55%,var(--rule));
  background:color-mix(in srgb,var(--cyan) 8%,var(--panel));
}
html.hp .map-grid .q.us .qk,html.hp .map-grid .q.us .pos{color:var(--cyan);}
@media (max-width: 760px){
  html.hp .map{grid-template-columns:1fr;}
  html.hp .map-y{grid-column:1;grid-row:auto;writing-mode:horizontal-tb;transform:none;text-align:left;margin-bottom:12px;}
  html.hp .map-grid{grid-column:1;grid-row:auto;grid-template-columns:1fr;}
  html.hp .map-x{grid-column:1;grid-row:auto;text-align:left;}
}

/* =========================================================================
   AGENTOPS HOMEPAGE. The product that exists today, stated first: a live
   agent in production, the stack it would otherwise need, the four pillars,
   and only then the work thesis. Scoped under html.hp, tokens only.
   ========================================================================= */

/* The hero's live agent: a product surface, not an architecture diagram. */
html.hp .agentcard{border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);
  overflow:hidden;box-shadow:var(--card-shadow);}
html.hp .ac-bar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--rule);
  background:var(--bg-1);font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);}
html.hp .ac-bar .nm{color:var(--ink);font-weight:500;}
html.hp .ac-bar .live{display:inline-flex;align-items:center;gap:6px;color:var(--mint);margin-left:auto;}
html.hp .ac-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--mint);display:block;}
html.hp .ac-bar .illus{border:1px solid var(--rule-2);border-radius:999px;padding:1px 8px;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--v5-label);}
html.hp .ac-rows{padding:4px 0;}
html.hp .ac-row{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:baseline;
  padding:9px 15px;border-bottom:1px solid var(--rule);}
html.hp .ac-row:last-child{border-bottom:none;}
html.hp .ac-row .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
html.hp .ac-row .v{font-size:13px;color:var(--ink-2);line-height:1.45;min-width:0;}
html.hp .ac-row .v b{color:var(--ink);font-weight:600;}
html.hp .ac-row .v b.ok{color:var(--mint);}
html.hp .ac-row .v .mono{font-family:var(--ff-mono);font-size:12px;}
html.hp .ac-row .tag{display:inline-block;font-family:var(--ff-mono);font-size:11px;border:1px solid var(--rule);
  border-radius:6px;background:var(--bg-1);padding:2px 8px;margin:2px 5px 2px 0;color:var(--ink-2);}
html.hp .ac-row .bar{display:block;height:4px;border-radius:2px;background:var(--rule-2);margin-top:6px;overflow:hidden;max-width:220px;}
html.hp .ac-row .bar i{display:block;height:100%;background:var(--cyan);border-radius:2px;}
html.hp .ac-foot{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 15px;border-top:1px solid var(--rule);
  background:var(--bg-1);font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);}
html.hp .ac-foot b{color:var(--cyan);font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
html.hp .ac-wrap-note{font-family:var(--ff-mono);font-size:11px;color:var(--v5-label);margin:12px 0 0;text-align:right;}

/* Assistant then agent: what actually changed in the shape of the thing. */
html.hp .shift2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,36px);}
html.hp .shift2 > div{border:1px solid var(--rule);border-radius:12px;background:var(--panel);padding:20px 20px 22px;}
html.hp .shift2 > div.now{border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));
  background:color-mix(in srgb,var(--cyan) 6%,var(--panel));}
html.hp .shift2 .w{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;}
html.hp .shift2 > div.now .w{color:var(--cyan);}
html.hp .shift2 .flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
html.hp .shift2 .flow li{font-family:var(--ff-mono);font-size:12px;border:1px solid var(--rule);border-radius:7px;
  background:var(--bg-1);padding:7px 11px;color:var(--ink-2);}
html.hp .shift2 > div.now .flow li{border-color:color-mix(in srgb,var(--cyan) 35%,var(--rule));color:var(--ink);}
html.hp .shift2 .flow li.sep{border:none;background:none;padding:0 1px;color:var(--ink-3);}
html.hp .shift2 .touches{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
html.hp .shift2 .touches li{font-family:var(--ff-mono);font-size:11.5px;color:var(--coral);
  border:1px solid color-mix(in srgb,var(--coral) 32%,var(--rule));border-radius:6px;padding:4px 9px;}
html.hp .shift2 .why{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}

/* What a team assembles instead, as a wall of parts. */
html.hp .parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
html.hp .parts li{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:7px;background:var(--panel);padding:8px 13px;}
html.hp .parts li.team{border-color:color-mix(in srgb,var(--coral) 45%,var(--rule));color:var(--coral);
  background:color-mix(in srgb,var(--coral) 7%,var(--panel));}

/* The assembly, and the alternative. */
html.hp .versus{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.4vw,28px);align-items:center;}
html.hp .versus .side{border:1px solid var(--rule);border-radius:12px;background:var(--panel);padding:20px;min-width:0;}
html.hp .versus .side.us{border-color:color-mix(in srgb,var(--cyan) 50%,var(--rule));
  background:color-mix(in srgb,var(--cyan) 7%,var(--panel));display:flex;flex-direction:column;justify-content:center;}
html.hp .versus .w{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;}
html.hp .versus .side.us .w{color:var(--cyan);}
html.hp .versus .side.us .big{font-family:var(--ff-display);font-weight:700;font-size:clamp(19px,2.1vw,30px);
  line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0;}
html.hp .versus .side.us .verbline{margin:14px 0 0;font-family:var(--ff-mono);font-size:12.5px;color:var(--cyan);letter-spacing:.06em;}
html.hp .versus .mid{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v5-label);white-space:nowrap;}

/* Why the integrated version is not the same as the sum of the parts. */
html.hp .chain2{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
html.hp .chain2 li{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:7px;background:var(--panel);padding:8px 12px;}
html.hp .chain2 li.sep{border:none;background:none;padding:0;color:var(--cyan);}

/* The four pillars, in the depth the product deserves. */
html.hp .pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2.2vw,26px);}
html.hp .pillars > li{border:1px solid var(--rule);border-radius:12px;background:var(--panel);
  padding:24px 24px 26px;display:flex;flex-direction:column;min-width:0;}
html.hp .pillars .v{display:block;font-family:var(--ff-mono);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:12px;}
html.hp .pillars .k{display:block;font-family:var(--ff-display);font-weight:700;font-size:20px;line-height:1.16;
  letter-spacing:-.015em;color:var(--ink);}
html.hp .pillars .d{display:block;margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}
html.hp .pillars ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px;}
html.hp .pillars ul li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:var(--ink-2);}
html.hp .pillars ul li::before{content:"";position:absolute;left:0;top:.56em;width:5px;height:5px;
  border-radius:1px;background:color-mix(in srgb,var(--cyan) 70%,var(--rule-2));}
html.hp .pillars .msg{display:block;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:13.5px;line-height:1.55;color:var(--ink);font-weight:600;}
html.hp .pillars .stat{display:inline-block;margin-top:12px;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--v5-label);
  border:1px solid var(--rule-2);border-radius:999px;padding:2px 9px;align-self:flex-start;}

/* One run, start to finish, with the pillar each step belongs to. */
html.hp .seq{list-style:none;margin:0;padding:0;}
html.hp .seq > li{position:relative;display:grid;grid-template-columns:92px 1fr;gap:0 18px;padding:13px 0;}
html.hp .seq > li + li::before{content:"";position:absolute;left:45px;top:-7px;width:1px;height:14px;
  background:color-mix(in srgb,var(--cyan) 45%,var(--rule));}
html.hp .seq .p{font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);padding-top:3px;}
html.hp .seq .s{border:1px solid var(--rule);border-radius:9px;background:var(--panel);padding:11px 14px;min-width:0;}
html.hp .seq .s .h{font-size:14px;color:var(--ink);line-height:1.35;}
html.hp .seq .s .h b{font-weight:600;}
html.hp .seq .s .h b.ok{color:var(--mint);}
html.hp .seq .s .h b.no{color:var(--coral);}
html.hp .seq .s .h code{font-family:var(--ff-mono);font-size:12.5px;color:var(--cyan);}
html.hp .seq .s .d{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3);}

/* From a repository to a governed deployment. */
html.hp .ship{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.4vw,30px);align-items:center;}
html.hp .ship .box{border:1px solid var(--rule);border-radius:12px;background:var(--panel);padding:20px;min-width:0;}
html.hp .ship .box.out{border-color:color-mix(in srgb,var(--mint) 42%,var(--rule));
  background:color-mix(in srgb,var(--mint) 6%,var(--panel));}
html.hp .ship .w{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;}
html.hp .ship .box.out .w{color:var(--mint);}
html.hp .ship .box p{margin:0 0 6px;font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2);}
html.hp .ship .box ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
html.hp .ship .box ul li{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2);}
html.hp .ship .box.out ul li::before{content:"\2713\00a0\00a0";color:var(--mint);}
html.hp .ship .cmd{font-family:var(--ff-mono);font-size:13px;color:var(--cyan);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--cyan) 45%,var(--rule));border-radius:8px;
  background:color-mix(in srgb,var(--cyan) 8%,var(--panel));padding:10px 14px;}

@media (max-width: 980px){
  html.hp .pillars{grid-template-columns:1fr;}
  html.hp .shift2{grid-template-columns:1fr;}
  html.hp .versus,html.hp .ship{grid-template-columns:1fr;}
  html.hp .versus .mid,html.hp .ship .cmd{justify-self:start;}
}
@media (max-width: 720px){
  html.hp .ac-row{grid-template-columns:1fr;gap:4px;}
  html.hp .seq > li{grid-template-columns:1fr;gap:8px;}
  html.hp .seq > li + li::before{left:12px;}
  html.hp .seq .p{padding-top:0;}
  html.hp .ac-wrap-note{text-align:left;}
}

/* The AgentOps hero carries a two-sentence headline beside a product card, so it
   sits a size below the display scale the other pages use. */
html.hp .hero.agentops h1{font-size:clamp(33px,3.9vw,49px);line-height:1.04;}
html.hp .hero.agentops .lede{font-size:16.5px;max-width:52ch;}

/* =========================================================================
   HERO, SECOND PASS. The claim is that Tanomis removes an infrastructure
   project, so the visual has to show a run being governed rather than a
   configuration table. The card is the protagonist; the copy is the caption.
   ========================================================================= */

html.hp .hero.agentops .hero-grid{grid-template-columns:1fr 1.52fr;gap:clamp(28px,3.4vw,52px);align-items:start;}
html.hp .hero.agentops h1{font-size:clamp(31px,3.35vw,44px);line-height:1.06;margin-bottom:20px;max-width:15ch;}
html.hp .hero.agentops h1 .g{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--cyan);display:block;}
html.hp .hero.agentops .lede{font-size:16.5px;max-width:46ch;margin-bottom:20px;}
html.hp .hero.agentops .proofline{
  margin:0 0 26px;font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);
  border-left:2px solid var(--cyan);padding-left:14px;
}
html.hp .hero.agentops .proofline b{color:var(--ink);font-weight:500;}

/* Repo to production, stated once and compactly, above the run itself. */
html.hp .deploystrip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;
  font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-3);
}
html.hp .deploystrip i{font-style:normal;color:var(--cyan);}
html.hp .deploystrip code{font-family:var(--ff-mono);color:var(--cyan);
  border:1px solid color-mix(in srgb,var(--cyan) 42%,var(--rule));border-radius:6px;
  background:color-mix(in srgb,var(--cyan) 8%,var(--panel));padding:4px 9px;}
html.hp .deploystrip b{color:var(--mint);font-weight:500;}
html.hp .deploystrip em{flex-basis:100%;font-style:normal;color:var(--ink-3);opacity:.85;}

/* The run card. */
html.hp .runcard{border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);
  overflow:hidden;box-shadow:var(--card-shadow);}
html.hp .rc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;
  border-bottom:1px solid var(--rule);background:var(--bg-1);
  font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-3);}
html.hp .rc-bar .nm{color:var(--ink);font-weight:500;font-size:12.5px;}
html.hp .rc-bar .illus{border:1px solid var(--rule-2);border-radius:999px;padding:1px 8px;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--v5-label);}
html.hp .rc-bar .live{display:inline-flex;align-items:center;gap:6px;color:var(--mint);margin-left:auto;}
html.hp .rc-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--mint);display:block;}
html.hp .rc-body{display:grid;grid-template-columns:168px 1fr;}

/* The rail: the four verbs, live, against this one run. */
html.hp .rc-rail{border-right:1px solid var(--rule);background:var(--bg-1);padding:6px 0;
  display:flex;flex-direction:column;}
html.hp .rc-rail > div{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:12px 16px;border-bottom:1px solid var(--rule);}
html.hp .rc-rail > div:last-child{border-bottom:none;}
html.hp .rc-rail .v{display:flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:600;}
html.hp .rc-rail .v::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;}
html.hp .rc-rail .s{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--ink-2);}

/* The run, as a sequence of governed moments. */
html.hp .rc-flow{list-style:none;margin:0;padding:6px 0;min-width:0;}
html.hp .rc-flow > li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:9px 16px;border-bottom:1px solid var(--rule);}
html.hp .rc-flow > li:last-child{border-bottom:none;}
html.hp .rc-flow .k{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;}
html.hp .rc-flow .d{display:block;font-size:13px;line-height:1.4;color:var(--ink-2);min-width:0;}
html.hp .rc-flow .d b{color:var(--ink);font-weight:600;}
html.hp .rc-flow .d code{font-family:var(--ff-mono);font-size:12.5px;color:var(--ink);}
html.hp .rc-flow .n{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--ink-3);}
html.hp .rc-flow .f{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;border-radius:999px;padding:3px 10px;border:1px solid var(--rule-2);color:var(--ink-3);}
html.hp .rc-flow .f.ok{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,var(--rule));
  background:color-mix(in srgb,var(--mint) 8%,transparent);}
html.hp .rc-flow .f.held{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 55%,var(--rule));
  background:color-mix(in srgb,var(--coral) 10%,transparent);}
html.hp .rc-flow .f.lock{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--rule));
  background:color-mix(in srgb,var(--cyan) 8%,transparent);}
html.hp .rc-flow > li.stop{background:color-mix(in srgb,var(--coral) 6%,transparent);}
html.hp .rc-flow > li.stop .k{color:var(--coral);}
html.hp .rc-flow > li.human{background:color-mix(in srgb,var(--cyan) 5%,transparent);}

html.hp .rc-caption{
  margin:16px 0 0;font-family:var(--ff-display);font-weight:700;font-size:clamp(15px,1.25vw,19px);
  line-height:1.3;letter-spacing:-.015em;color:var(--ink);
}
html.hp .rc-caption span{color:var(--cyan);}

/* The hero ends here. The next section is a different argument, so it reads as one. */
html.hp #got-hands{position:relative;border-top:1px solid var(--rule-2);
  padding-top:clamp(64px,8vw,112px);}
html.hp #got-hands::before{
  content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:clamp(180px,28vw,420px);height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}

@media (max-width: 1100px){
  html.hp .rc-body{grid-template-columns:1fr;}
  html.hp .rc-rail{border-right:none;border-bottom:1px solid var(--rule);
    display:grid;grid-template-columns:repeat(2,1fr);padding:0;}
  html.hp .rc-rail > div{border-bottom:1px solid var(--rule);}
  html.hp .rc-rail > div:nth-child(odd){border-right:1px solid var(--rule);}
}
@media (max-width: 900px){
  html.hp .hero.agentops .hero-grid{grid-template-columns:1fr;}
  html.hp .hero.agentops .lede{max-width:none;}
}
@media (max-width: 620px){
  html.hp .rc-rail{grid-template-columns:1fr;}
  html.hp .rc-rail > div:nth-child(odd){border-right:none;}
  html.hp .rc-flow > li{grid-template-columns:1fr;gap:6px;}
  html.hp .rc-flow .f{justify-self:start;}
}

/* =========================================================================
   HERO, THIRD PASS. Bigger product surface, the four verbs grouped against
   the run steps they actually contribute, and each row carrying the
   consequence rather than the mechanism.
   ========================================================================= */

html.hp .hero.agentops .hero-grid{grid-template-columns:1fr 1.66fr;gap:clamp(20px,2.4vw,38px);}
html.hp .hero.agentops h1{max-width:16ch;}
html.hp .hero.agentops .proofline{font-size:13px;}

/* Repo to production: one of the larger commercial claims on the page, sized like it. */
html.hp .deploystrip{gap:9px 12px;margin:0 0 16px;font-size:14.5px;color:var(--ink-2);}
html.hp .deploystrip span,html.hp .deploystrip b{font-weight:600;}
html.hp .deploystrip span{color:var(--ink);}
html.hp .deploystrip code{font-size:13.5px;padding:6px 12px;}
html.hp .deploystrip em{font-size:12px;color:var(--ink-3);}

/* The card body is one grid, so each verb sits level with the steps it owns. */
html.hp .rc-bar{font-size:12.5px;padding:13px 18px;}
html.hp .rc-bar .nm{font-size:13.5px;}
html.hp .rc-body{display:grid;grid-template-columns:186px 1fr;align-items:stretch;}
html.hp .rc-verb{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:14px 18px;background:var(--bg-1);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule-2);
}
html.hp .rc-verb:last-of-type{border-bottom:none;}
html.hp .rc-verb .v{display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:600;}
html.hp .rc-verb .v::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;}
html.hp .rc-verb .val{font-family:var(--ff-display);font-weight:700;font-size:15px;line-height:1.2;color:var(--ink);margin-top:5px;}
html.hp .rc-verb .det{font-family:var(--ff-mono);font-size:11.5px;line-height:1.4;color:var(--ink-3);margin-top:4px;}

html.hp .rc-flow{list-style:none;margin:0;padding:0;min-width:0;border-bottom:1px solid var(--rule-2);}
html.hp .rc-flow:last-of-type{border-bottom:none;}
html.hp .rc-flow > li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--rule);}
html.hp .rc-flow > li:last-child{border-bottom:none;}
html.hp .rc-flow .k{font-size:11px;letter-spacing:.14em;margin-bottom:5px;}
html.hp .rc-flow .d{font-size:15px;line-height:1.38;}
html.hp .rc-flow .d code{font-size:14px;}
html.hp .rc-flow .n{margin-top:4px;font-size:12.5px;color:var(--ink-2);}
html.hp .rc-flow .n b{color:var(--ink);font-weight:600;}
html.hp .rc-flow > li.stop .n b{color:var(--coral);}
html.hp .rc-flow .f{font-size:11.5px;padding:4px 12px;}

html.hp .rc-caption{
  margin:20px 0 0;font-size:clamp(17px,1.45vw,23px);line-height:1.28;
}
html.hp .rc-caption b{display:block;font-weight:700;color:var(--ink);}
html.hp .rc-caption span{display:block;color:var(--cyan);}

@media (max-width: 1100px){
  html.hp .rc-body{grid-template-columns:1fr;}
  html.hp .rc-verb{border-right:none;border-bottom:1px solid var(--rule);
    flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:6px 14px;}
  html.hp .rc-verb .val,html.hp .rc-verb .det{margin-top:0;}
  html.hp .rc-flow{border-bottom:1px solid var(--rule-2);}
}
@media (max-width: 620px){
  html.hp .deploystrip{font-size:13px;}
  html.hp .rc-caption{font-size:17px;}
}
/* Break the proof line between its claims, never inside one. */
html.hp .hero.agentops .proofline b{white-space:nowrap;}

/* The third-pass grid above is unconditional, so the narrow-width collapse has to be
   restated after it. Without this the hero keeps two columns on a phone and the copy
   column is squeezed to nothing; scrollWidth stays correct while the text is unreadable,
   so an overflow check alone does not catch it. */
@media (max-width: 900px){
  html.hp .hero.agentops .hero-grid{grid-template-columns:1fr;gap:34px;}
  html.hp .hero.agentops h1{max-width:none;}
  html.hp .hero.agentops .lede{max-width:none;}
}

/* Hero left column: the commercial argument, in three beats, while the card on
   the right carries the proof. Skip the platform build, keep your agent stack,
   get to production quickly. */
html.hp .valueblocks{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px;}
html.hp .valueblocks li{position:relative;padding-left:18px;}
html.hp .valueblocks li::before{
  content:"";position:absolute;left:0;top:.32em;width:3px;height:calc(100% - .5em);
  border-radius:2px;background:var(--cyan);
}
html.hp .valueblocks .k{
  display:block;font-family:var(--ff-display);font-weight:700;font-size:16.5px;line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);
}
html.hp .valueblocks .d{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--ink-2);}
html.hp .valueblocks .d b{color:var(--ink);font-weight:600;}
html.hp .hero.agentops .lede{margin-bottom:26px;}

/* =========================================================================
   AGENTOPS HOMEPAGE. Six capabilities of one operating layer, and the two
   halves of "open by design".
   ========================================================================= */
html.hp .pillars.six{grid-template-columns:repeat(3,1fr);}
html.hp .pillars .open-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:18px;}
html.hp .pillars .open-chips li{padding:5px 10px;font-size:11.5px;}
html.hp .pillars .open-chips li::before{content:none;}

/* The hero ends here; the operating layer is a different argument, so it reads as one. */
html.hp #layer{position:relative;border-top:1px solid var(--rule-2);padding-top:clamp(64px,8vw,112px);}
html.hp #layer::before{
  content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:clamp(180px,28vw,420px);height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}

@media (max-width: 1100px){ html.hp .pillars.six{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 980px){ html.hp .pillars.six{grid-template-columns:1fr;} }

/* =========================================================================
   HERO DIAGRAM. The thesis, not the architecture: one control layer, every
   capability anchored to the same delegated work, fitted around the stack the
   customer already runs.
   ========================================================================= */
html.hp .cl{margin:0;border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);
  box-shadow:var(--card-shadow);padding:22px 22px 20px;}
html.hp .cl-head{display:flex;flex-direction:column;gap:5px;margin-bottom:18px;}
html.hp .cl-title{font-family:var(--ff-mono);font-size:12.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);}
html.hp .cl-sub{font-family:var(--ff-display);font-weight:700;font-size:17px;line-height:1.25;color:var(--ink);}

html.hp .cl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
html.hp .cl-node{border:1px solid var(--rule);border-radius:10px;background:var(--bg-1);padding:11px 14px;min-width:0;}
html.hp .cl-node b,html.hp .cl-base b{display:block;font-family:var(--ff-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
html.hp .cl-node span{display:block;margin-top:5px;font-size:13px;color:var(--ink-2);}
html.hp .cl-node i,html.hp .cl-base i{display:block;margin-top:5px;font-style:normal;font-family:var(--ff-mono);
  font-size:11.5px;line-height:1.5;color:var(--ink-3);}
html.hp .cl-node .cl-gate{display:inline-block;margin:0 0 7px;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px dashed color-mix(in srgb,var(--cyan) 55%,var(--rule));
  border-radius:999px;padding:2px 9px;}
html.hp .cl-node.human{border-color:color-mix(in srgb,var(--mint) 40%,var(--rule));}
html.hp .cl-node.human b{color:var(--mint);}

html.hp .cl-link{height:16px;width:1px;margin:0 auto;background:color-mix(in srgb,var(--cyan) 55%,var(--rule));}

html.hp .cl-core{position:relative;border:1.5px solid color-mix(in srgb,var(--cyan) 55%,var(--rule));border-radius:12px;
  background:color-mix(in srgb,var(--cyan) 5%,var(--panel));padding:26px 14px 14px;}
html.hp .cl-core-label{position:absolute;top:-10px;left:16px;padding:1px 10px;border-radius:999px;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--cyan) 55%,var(--rule));
  font-family:var(--ff-mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);}
html.hp .cl-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;grid-template-areas:"c1 w c6" "c2 w c5" "c3 w c4";
  gap:10px 18px;}
html.hp .cl-cap{position:relative;border:1px solid var(--rule);border-radius:9px;background:var(--panel);padding:10px 12px;min-width:0;}
html.hp .cl-cap em{display:block;font-style:normal;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);letter-spacing:.1em;}
html.hp .cl-cap b{display:block;margin-top:2px;font-family:var(--ff-mono);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
html.hp .cl-cap span{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--ink-2);}
/* every capability is tied to the work in the middle */
html.hp .cl-cap::after{content:"";position:absolute;top:50%;width:18px;height:1px;
  background:color-mix(in srgb,var(--cyan) 60%,var(--rule));}
html.hp .cl-cap.l::after{right:-19px;}
html.hp .cl-cap.r::after{left:-19px;}
html.hp .cl-work{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;
  border:1.5px solid var(--cyan);border-radius:12px;padding:16px 12px;
  background:color-mix(in srgb,var(--cyan) 11%,var(--panel));
  box-shadow:0 0 0 6px color-mix(in srgb,var(--cyan) 7%,transparent),0 0 36px color-mix(in srgb,var(--cyan) 18%,transparent);}
html.hp .cl-work-k{font-family:var(--ff-display);font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);line-height:1.1;}
html.hp .cl-work ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
html.hp .cl-work li{font-family:var(--ff-mono);font-size:11px;color:var(--ink);border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--rule));
  border-radius:6px;padding:3px 8px;background:var(--panel);}
html.hp .cl-loop{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}

html.hp .cl-base{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-top:1px solid var(--rule);}
html.hp .cl-base > div{padding:13px 12px 2px 0;min-width:0;}
html.hp .cl-base > div + div{padding-left:14px;border-left:1px solid var(--rule);}
html.hp .cl-base b{font-size:10.5px;color:var(--ink-2);}

@media (max-width: 640px){
  html.hp .cl{padding:18px 14px 16px;}
  html.hp .cl-row{grid-template-columns:1fr;}
  html.hp .cl-grid{grid-template-columns:1fr;grid-template-areas:"w" "c1" "c2" "c3" "c4" "c5" "c6";}
  html.hp .cl-cap::after{content:none;}
  html.hp .cl-base{grid-template-columns:1fr;}
  html.hp .cl-base > div + div{padding-left:0;border-left:none;border-top:1px solid var(--rule);}
}

/* Homepage only: a wider container, and a hero whose copy column is centred
   against the diagram, with the line under the diagram in its own row. */
html.hp body.home .wrap{max-width:1440px;}
html.hp .hero.agentops .hero-grid.hg2{
  grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);
  grid-template-areas:"copy fig";
  column-gap:clamp(32px,4.2vw,72px);row-gap:24px;align-items:start;
}
html.hp .hg2 .hg-copy{grid-area:copy;align-self:center;}
html.hp .hg2 .hg-fig{grid-area:fig;}
html.hp .hg2 .hg-cap{grid-area:cap;margin:0;}
html.hp .hg2 .valueblocks{margin-bottom:34px;gap:20px;}
html.hp .hg2 .hg-cta{margin:0;}
html.hp .hero.agentops .hg2 h1{max-width:none;font-size:clamp(34px,3.5vw,56px);line-height:1.04;}
html.hp .hero.agentops .hg2 .lede{max-width:48ch;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.55;}
html.hp .hg2 .valueblocks .k{font-size:clamp(16.5px,1.15vw,18.5px);}
html.hp .hg2 .valueblocks .d{font-size:clamp(13.5px,.95vw,15px);}

@media (max-width: 900px){
  html.hp .hero.agentops .hero-grid.hg2{grid-template-columns:1fr;grid-template-areas:"copy" "fig";row-gap:28px;}
  html.hp .hero.agentops .hg2 .lede{max-width:none;}
}

/* The closing line belongs to the diagram, so it closes it rather than floating below. */
html.hp .cl-close{margin:16px -22px -20px;padding:16px 22px 18px;border-top:1px solid var(--rule);
  border-radius:0 0 14px 14px;background:color-mix(in srgb,var(--cyan) 6%,var(--panel));
  font-family:var(--ff-display);font-weight:700;font-size:clamp(16px,1.25vw,20px);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);}
html.hp .cl-close span{color:var(--cyan);}
@media (max-width: 640px){ html.hp .cl-close{margin:14px -14px -16px;padding:14px;} }

/* =========================================================================
   LAB WHITE. The site theme: cool lab-white, black type, one electric blue,
   a hairline grid with signal dots, and the Tanomis mark repeated faintly
   behind the content at several sizes. Light is the default; dark keeps the
   same type and background system in its own colours.
   ========================================================================= */
html.hp{
  --ff-display:"Geist",system-ui,sans-serif;
  --ff-body:"Geist",system-ui,sans-serif;
  --ff-mono:"Geist Mono",ui-monospace,monospace;
}
html.hp[data-theme="light"]{
  --bg:#FFFFFF;--bg-1:#F5F5F3;--panel:#FFFFFF;--rule:#E2E5EB;--rule-2:#CDD3DC;
  --ink:#0B0D12;--ink-2:#474C57;--ink-3:#686D79;
  --cyan:#1A5CFF;--coral:#D23A2E;--mint:#12A150;--violet:#6B4EE6;
  --nav-bg:rgba(255,255,255,.88);--card-shadow:0 24px 50px -32px rgba(11,13,18,.20);
  --glow-a:transparent;--glow-b:transparent;
  --v5-label:#5E6470;--v5-raise:#FFFFFF;--v5-raise-2:#F9FAFB;
  --v5-art-shadow:0 30px 64px -36px rgba(11,13,18,.22);
}

html.hp[data-theme="light"] body::before{display:none;}

/* type: Geist, set tighter */
html.hp h1,html.hp h2,html.hp h3{letter-spacing:-.035em;}
html.hp .hero.agentops h1{font-weight:600;letter-spacing:-.045em;}

/* pill actions; in light the primary is ink, turning blue on hover */
html.hp .btn{border-radius:999px;}
html.hp[data-theme="light"] .btn{background:#FFFFFF;}
html.hp[data-theme="light"] .btn-primary{background:var(--ink);border-color:var(--ink);color:#FFFFFF;box-shadow:0 10px 24px -14px rgba(11,13,18,.5);}
html.hp[data-theme="light"] .btn-primary:hover{background:var(--cyan);border-color:var(--cyan);color:#FFFFFF;}
html.hp[data-theme="light"] .btn:not(.btn-primary):hover{border-color:var(--ink);color:var(--ink);}

/* the legacy hero painted its own opaque ground with a warm glow, which hid the
   grid and clashed with Lab White; let the page background through instead */
html.hp .hero{background:radial-gradient(48% 60% at 86% 0%, color-mix(in srgb,var(--cyan) 7%,transparent), transparent 66%);}

/* =========================================================================
   HERO, LAB WHITE SKETCH. Copy and actions on the left, the control layer on
   the right with the mark behind its corner. Nothing else competes.
   ========================================================================= */
html.hp .hero.agentops.lab{padding:clamp(56px,7vw,104px) 0 clamp(64px,8vw,120px);}
html.hp .hero.agentops.lab .hero-grid.hg2{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(32px,4.5vw,72px);align-items:center;}
html.hp .hero.agentops.lab .hg2 .eyebrow{font-size:13px;letter-spacing:.2em;margin-bottom:22px;}
html.hp .hero.agentops.lab .hg2 h1{font-size:clamp(40px,4.9vw,72px);line-height:1.0;font-weight:600;letter-spacing:-.05em;max-width:15ch;margin:0 0 26px;}
html.hp .hero.agentops.lab .hg2 h1 .g{display:inline;}
html.hp .hero.agentops.lab .hg2 .lede{font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;max-width:34em;color:var(--ink-2);margin:0 0 34px;}
html.hp .hero.agentops.lab .hg2 .hero-ctas{gap:12px;flex-wrap:wrap;}
html.hp .hero.agentops.lab .hg2 .btn-lg{padding:15px 26px;font-size:16px;font-weight:600;}

html.hp .hero.agentops.lab .hg2 .hg-fig{position:relative;}
html.hp .hero.agentops.lab .hg2 .cl{position:relative;z-index:1;padding:24px 24px 18px;border-color:var(--rule);box-shadow:0 30px 70px -30px rgba(11,13,18,.22);}
html.hp .hero.agentops.lab .hg2 .cl-head{margin-bottom:18px;}
html.hp .hero.agentops.lab .hg2 .cl-title{font-size:13px;letter-spacing:.24em;}
html.hp .hero.agentops.lab .hg2 .cl-sub{font-size:clamp(17px,1.35vw,20px);font-weight:600;}
html.hp .hero.agentops.lab .hg2 .cl-grid{grid-template-columns:1fr 1.05fr 1fr;gap:12px;}
html.hp .hero.agentops.lab .hg2 .cl-cap{padding:12px 14px;border-color:var(--rule);background:var(--panel);}
html.hp .hero.agentops.lab .hg2 .cl-cap::after{content:none;}
html.hp .hero.agentops.lab .hg2 .cl-cap b{font-size:12.5px;}
html.hp .hero.agentops.lab .hg2 .cl-cap span{font-size:13.5px;color:var(--ink);}
html.hp .hero.agentops.lab .hg2 .cl-work{box-shadow:none;background:var(--panel);border:1.5px solid var(--cyan);border-radius:12px;}
html.hp .hero.agentops.lab .hg2 .cl-work-k{font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:.02em;}
html.hp .hero.agentops.lab .hg2 .cl-work li{background:var(--panel);border-color:var(--rule);font-size:11.5px;}
html.hp .hero.agentops.lab .hg2 .cl-loop{color:var(--mint);font-size:11.5px;}
html.hp .hero.agentops.lab .hg2 .cl-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding-top:14px;
  border-top:1px solid var(--rule);font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);}
@media (max-width: 900px){ html.hp .hero.agentops.lab .hg2 h1{max-width:none;} }
@media (max-width: 640px){ html.hp .hero.agentops.lab .hg2 .cl-foot{flex-direction:column;gap:6px;} }

/* Background, after Ramp: a plain white page, a faint dot field around the hero
   that fades out toward the copy, and the product visual set on a soft warm-grey
   panel. No grid, no repeated marks. */
html.hp .hero.agentops.lab{position:relative;background:none;}
html.hp .hero.agentops.lab::before{content:"";display:block;position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 24%,transparent) 1.1px, transparent 0);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 60% 66% at 50% 45%, rgba(0,0,0,.08) 30%, #000 100%);
          mask-image:radial-gradient(ellipse 60% 66% at 50% 45%, rgba(0,0,0,.08) 30%, #000 100%);}
/* the diagram floats on its own shadow, no panel behind it */
html.hp .hero.agentops.lab .hg2 .cl{box-shadow:0 1px 2px rgba(11,13,18,.04),0 34px 80px -34px rgba(26,50,120,.30);}

/* a stronger ground: a cool blue wash rising behind the diagram, a faint mint
   note low on the left, and the dot field over both */
html.hp .hero.agentops.lab{
  background:
    radial-gradient(62% 85% at 80% 55%, rgb(var(--p-rgb) / .22), rgb(var(--p-rgb) / 0) 72%),
    radial-gradient(45% 60% at 20% 0%, rgb(var(--h-rgb) / .24), rgb(var(--h-rgb) / 0) 70%),
    radial-gradient(40% 55% at 0% 100%, rgb(var(--h-rgb) / .20), rgb(var(--h-rgb) / 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--tint) 100%);
}
html.hp[data-theme="dark"] .hero.agentops.lab{
  background:
    radial-gradient(52% 70% at 78% 42%, rgba(70,140,255,.16), rgba(70,140,255,0) 70%),
    radial-gradient(40% 55% at 4% 100%, rgba(61,214,140,.08), rgba(61,214,140,0) 70%);
}

/* Hero refinements: a larger, bolder eyebrow; the centre title on two lines;
   capability titles carry the card now that the numbers are gone. */
html.hp .hero.agentops.lab .hg2 .eyebrow{font-size:clamp(14px,1.1vw,16px);font-weight:600;letter-spacing:.18em;margin-bottom:24px;
  display:inline-block;}
html.hp .hero.agentops.lab .hg2 .cl-work-k{font-size:clamp(22px,1.9vw,28px);line-height:1.08;letter-spacing:.01em;}
html.hp .hero.agentops.lab .hg2 .cl-cap{padding:14px 16px;}
html.hp .hero.agentops.lab .hg2 .cl-cap b{margin-top:0;font-size:clamp(14px,1.05vw,15.5px);font-weight:700;letter-spacing:.1em;}
html.hp .hero.agentops.lab .hg2 .cl-cap span{margin-top:7px;}

/* A second accent for the points that should stop the eye: signal magenta.
   It sits opposite the electric blue and next to the violet in the hero glow,
   and clears 4.9:1 on white, so it can carry small labels. */
html.hp{--hot:#FF5C9A;}
html.hp[data-theme="light"]{--hot:#D61F69;}
html.hp .hero.agentops.lab .hg2 .eyebrow{color:#0B0D12;background:var(--sun-fill);font-weight:700;padding:.32em .6em;border-radius:4px;}
html.hp .hero.agentops.lab .hg2 .cl-loop{color:#0B0D12;background:var(--sun-fill);font-weight:700;padding:.32em .6em;border-radius:4px;line-height:1.3;}
html.hp body.home .v5-index{display:inline-block;font-size:12.5px;letter-spacing:.16em;width:max-content;max-width:100%;justify-self:start;align-self:flex-start;color:#0B0D12;background:var(--sun-fill);font-weight:700;padding:.32em .6em;border-radius:4px;}

/* =========================================================================
   HOMEPAGE GROUND, TOP TO BOTTOM. The hero's blue fades into the platform
   section; each later section carries a quiet gradient with one blue and one
   magenta light; the close is a dark panel lit in both accents. Magenta marks
   the points that should stop the eye, never a whole surface.
   ========================================================================= */
html.hp[data-theme="light"] body.home{
  --grad-line:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--sun) 70%,transparent);
}
/* the seam under the hero, now blue into magenta */
html.hp[data-theme="light"] body.home #layer::before{background:var(--grad-line);height:2px;}

/* 2 · platform: continues the hero's tint, then settles to white */
html.hp[data-theme="light"] body.home #layer{
  border-top:none;
  background:
    radial-gradient(38% 46% at 100% 100%, rgb(var(--h-rgb) / 0.17), rgba(214,31,105,0) 70%),
    linear-gradient(180deg,var(--tint) 0%,var(--tint-2) 34%,#FFFFFF 70%);
}
/* each capability card opens with a short blue-to-magenta rule */
html.hp body.home .pillars.six > li{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
html.hp body.home .pillars.six > li::before{content:"";position:absolute;left:24px;top:0;width:44px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--cyan),var(--sun));}
html.hp[data-theme="light"] body.home .pillars.six > li:hover{transform:translateY(-2px);box-shadow:0 22px 44px -30px rgba(26,50,120,.35);}

/* 3 · why one layer: white, dots at the edges, a magenta light behind Tanomis */
html.hp[data-theme="light"] body.home #one-layer{position:relative;
  background:radial-gradient(34% 40% at 86% 30%, rgb(var(--h-rgb) / 0.19), rgba(214,31,105,0) 70%),
             radial-gradient(30% 40% at 0% 90%, rgb(var(--p-rgb) / .07), rgb(var(--p-rgb) / 0) 70%),#FFFFFF;}
html.hp body.home #one-layer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--ink) 18%,transparent) 1px, transparent 0);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, transparent 45%, #000 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, transparent 45%, #000 100%);}
html.hp body.home #one-layer .wrap{position:relative;z-index:1;}
html.hp[data-theme="light"] body.home .versus .side.us{border:1.5px solid transparent;
  background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(135deg,var(--cyan),var(--sun)) border-box;
  box-shadow:0 26px 60px -34px rgb(var(--h-rgb) / 0.60);}
html.hp body.home .versus .side.us .w{color:var(--ink);}
html.hp body.home .versus .parts li.team{color:#0B0D12;border-color:var(--sun);background:var(--sun-fill);font-weight:600;}
html.hp body.home .chain2 li.sep{color:var(--cyan);font-weight:700;}

/* 4 · open by design: a faint lavender band, blue light high on the left */
html.hp[data-theme="light"] body.home #open{
  background:radial-gradient(36% 50% at 0% 0%, rgb(var(--p-rgb) / .08), rgb(var(--p-rgb) / 0) 70%),
             radial-gradient(30% 45% at 100% 100%, rgb(var(--h-rgb) / 0.14), rgba(214,31,105,0) 70%),
             linear-gradient(180deg,var(--tint) 0%,var(--cream) 100%);}
html.hp body.home .pillars .open-chips li:nth-child(odd){border-color:color-mix(in srgb,var(--cyan) 30%,var(--rule));}

/* 5 · the close: a dark panel lit blue and magenta */
html.hp[data-theme="light"] body.home #demo{background:#FFFFFF;}
html.hp body.home #demo .cta.cta-close{position:relative;overflow:hidden;border:none;color:#FFFFFF;
  background:radial-gradient(60% 90% at 0% 0%, rgb(var(--p-rgb) / .55), rgb(var(--p-rgb) / 0) 60%),
             radial-gradient(55% 90% at 100% 100%, rgb(var(--h-rgb) / 0.60), rgba(214,31,105,0) 62%),
             #0B0D12;
  padding:clamp(44px,5vw,72px) clamp(28px,4vw,64px);}
html.hp body.home #demo .cta.cta-close::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);background-size:14px 14px;}
html.hp body.home #demo .cta.cta-close > *{position:relative;}
html.hp body.home #demo .cta.cta-close h2{color:#FFFFFF;}
html.hp body.home #demo .cta.cta-close p{color:#C9CDD8;}
html.hp body.home #demo .cta.cta-close .btn-primary{background:#FFFFFF;border-color:#FFFFFF;color:#0B0D12;box-shadow:none;}
html.hp body.home #demo .cta.cta-close .btn-primary:hover{background:var(--sun-fill);border-color:var(--sun);color:#0B0D12;}
html.hp body.home #demo .cta.cta-close .quiet-link{color:#A9C0FF;}
html.hp body.home #demo .cta.cta-close .quiet-link:hover{color:var(--sun);}

/* footer: a hairline of both accents on top */
html.hp body.home .foot{position:relative;border-top:none;}
html.hp body.home .foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad-line,var(--rule));}

/* =========================================================================
   LAB DARK. The dark counterpart of Lab White: neutral near-black instead of
   navy, the same electric blue and magenta lifted for contrast, the primary
   action in white (light mode uses ink), and every homepage gradient restated
   for the dark ground.
   ========================================================================= */
html.hp[data-theme="dark"]{
  --bg:#0A0B10;--bg-1:#101218;--panel:#13151D;--rule:#232631;--rule-2:#2F3340;
  --ink:#EDEFF4;--ink-2:#A9AEBB;--ink-3:#7A8090;
  --cyan:#6B93FF;--coral:#FF6B5E;--mint:#3DD68C;--violet:#9B87FF;--hot:#FF5C9A;
  --nav-bg:rgba(10,11,16,.84);--card-shadow:0 30px 70px -34px rgba(0,0,0,.85);
  --glow-a:transparent;--glow-b:transparent;
  --v5-label:#8A90A0;--v5-raise:#171A23;--v5-raise-2:#1C1F2A;
  --grad-line:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--sun) 70%,transparent);
}
html.hp[data-theme="dark"] body::before{display:none;}
html.hp[data-theme="dark"] .btn-primary{background:#FFFFFF;border-color:#FFFFFF;color:#0A0B10;box-shadow:0 10px 30px -14px rgb(var(--pd-rgb) / .55);}
html.hp[data-theme="dark"] .btn-primary:hover{background:var(--sun-fill);border-color:var(--sun);color:#0B0D12;}
html.hp[data-theme="dark"] .btn:not(.btn-primary):hover{border-color:var(--ink);color:var(--ink);}
html.hp[data-theme="dark"] .band{background:var(--bg-1);}

/* hero */
html.hp[data-theme="dark"] .hero.agentops.lab{
  background:
    radial-gradient(62% 85% at 80% 55%, rgb(var(--pd-rgb) / .20), rgb(var(--pd-rgb) / 0) 72%),
    radial-gradient(45% 60% at 20% 0%, rgb(var(--h-rgb) / .10), rgb(var(--h-rgb) / 0) 70%),
    radial-gradient(40% 55% at 0% 100%, rgb(var(--h-rgb) / .08), rgb(var(--h-rgb) / 0) 70%),
    linear-gradient(180deg,#0A0B10 0%,var(--dtint) 100%);
}
html.hp[data-theme="dark"] .hero.agentops.lab .hg2 .cl{background:#13151D;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 40px 90px -40px rgb(var(--pd-rgb) / .45);}
html.hp[data-theme="dark"] .hero.agentops.lab .hg2 .cl-cap,
html.hp[data-theme="dark"] .hero.agentops.lab .hg2 .cl-work,
html.hp[data-theme="dark"] .hero.agentops.lab .hg2 .cl-work li{background:#171A23;}

/* sections */
html.hp[data-theme="dark"] body.home #layer::before{background:var(--grad-line);height:2px;}
html.hp[data-theme="dark"] body.home #layer{border-top:none;
  background:radial-gradient(38% 46% at 100% 100%, rgb(var(--h-rgb) / 0.06), rgba(255,92,154,0) 70%),
             linear-gradient(180deg,var(--dtint) 0%,var(--dtint-2) 40%,#0A0B10 75%);}
html.hp[data-theme="dark"] body.home .pillars.six > li:hover{transform:translateY(-2px);box-shadow:0 24px 50px -30px rgb(var(--pd-rgb) / .35);}
html.hp[data-theme="dark"] body.home #one-layer{position:relative;
  background:radial-gradient(34% 40% at 86% 30%, rgb(var(--h-rgb) / 0.08), rgba(255,92,154,0) 70%),
             radial-gradient(30% 40% at 0% 90%, rgb(var(--pd-rgb) / .09), rgb(var(--pd-rgb) / 0) 70%),#0A0B10;}
html.hp[data-theme="dark"] body.home .versus .side.us{border:1.5px solid transparent;
  background:linear-gradient(#13151D,#13151D) padding-box,linear-gradient(135deg,var(--cyan),var(--sun)) border-box;
  box-shadow:0 30px 70px -36px rgb(var(--h-rgb) / 0.36);}
html.hp[data-theme="dark"] body.home #open{
  background:radial-gradient(36% 50% at 0% 0%, rgb(var(--pd-rgb) / .10), rgb(var(--pd-rgb) / 0) 70%),
             radial-gradient(30% 45% at 100% 100%, rgb(var(--h-rgb) / 0.06), rgba(255,92,154,0) 70%),
             linear-gradient(180deg,var(--dtint) 0%,var(--dcream) 100%);}
html.hp[data-theme="dark"] body.home #demo{background:#0A0B10;}
html.hp[data-theme="dark"] body.home #demo .cta.cta-close{border:1px solid var(--rule-2);
  background:radial-gradient(60% 90% at 0% 0%, rgb(var(--pd-rgb) / .45), rgb(var(--pd-rgb) / 0) 60%),
             radial-gradient(55% 90% at 100% 100%, rgb(var(--h-rgb) / 0.34), rgba(255,92,154,0) 62%),#13151D;}

/* Solar: the second accent is a highlighter, used as a fill behind ink and
   never as a text colour, so it keeps full contrast on light and dark alike. */
html.hp{--sun:#FFE14D;}

/* =========================================================================
   HERO ON SMALL SCREENS. The desktop hero rules are scoped .agentops.lab and
   outrank the older collapse rules, so the collapse is restated here at the
   same specificity: one column, copy then diagram. On phones the diagram
   keeps its shape instead of becoming a tall list: the work context on top,
   the six capabilities in two columns beneath it.
   ========================================================================= */
@media (max-width: 900px){
  html.hp .hero.agentops.lab .hero-grid.hg2{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "fig";row-gap:40px;}
  html.hp .hero.agentops.lab .hg2 h1{max-width:none;}
  html.hp .hero.agentops.lab .hg2 .lede{max-width:none;}
}
@media (max-width: 640px){
  html.hp .hero.agentops.lab{padding:36px 0 48px;}
  html.hp .hero.agentops.lab .hg2 .eyebrow{font-size:12px;letter-spacing:.14em;margin-bottom:18px;}
  html.hp .hero.agentops.lab .hg2 h1{font-size:clamp(34px,10vw,44px);line-height:1.02;letter-spacing:-.045em;margin-bottom:18px;}
  html.hp .hero.agentops.lab .hg2 .lede{font-size:16px;margin-bottom:26px;}
  html.hp .hero.agentops.lab .hg2 .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;}
  html.hp .hero.agentops.lab .hg2 .hero-ctas .btn{justify-content:center;width:100%;}

  html.hp .hero.agentops.lab .hg2 .cl{padding:18px 14px 14px;border-radius:14px;}
  html.hp .hero.agentops.lab .hg2 .cl-head{margin-bottom:14px;}
  html.hp .hero.agentops.lab .hg2 .cl-title{font-size:11px;letter-spacing:.18em;}
  html.hp .hero.agentops.lab .hg2 .cl-sub{font-size:16px;}
  html.hp .hero.agentops.lab .hg2 .cl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"w w" "c1 c6" "c2 c5" "c3 c4";gap:8px;}
  html.hp .hero.agentops.lab .hg2 .cl-work{padding:16px 12px;gap:10px;}
  html.hp .hero.agentops.lab .hg2 .cl-work-k{font-size:22px;}
  html.hp .hero.agentops.lab .hg2 .cl-work-k br{display:none;}
  html.hp .hero.agentops.lab .hg2 .cl-work li{font-size:11px;padding:3px 7px;}
  html.hp .hero.agentops.lab .hg2 .cl-loop{font-size:10.5px;}
  html.hp .hero.agentops.lab .hg2 .cl-cap{padding:11px 12px;}
  html.hp .hero.agentops.lab .hg2 .cl-cap b{font-size:12px;letter-spacing:.08em;}
  html.hp .hero.agentops.lab .hg2 .cl-cap span{font-size:12.5px;margin-top:5px;}
  html.hp .hero.agentops.lab .hg2 .cl-foot{flex-direction:column;gap:4px;font-size:11px;margin-top:14px;padding-top:12px;}
}

/* =========================================================================
   THE PRODUCTION GAP. Right after the hero: the agent in the middle, the four
   organisational gates around it, the verdict, then the turn into Tanomis.
   This section now carries the seam under the hero and continues its tint;
   the operating layer below it becomes a plain white section.
   ========================================================================= */
html.hp body.home #gap{position:relative;padding:clamp(64px,8vw,112px) 0 clamp(64px,8vw,104px);}
html.hp body.home #gap::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:clamp(180px,28vw,420px);height:2px;background:var(--grad-line);}
html.hp[data-theme="light"] body.home #gap{background:
  radial-gradient(40% 50% at 100% 100%, rgb(var(--h-rgb) / .18), rgb(var(--h-rgb) / 0) 70%),
  linear-gradient(180deg,var(--tint) 0%,var(--tint-2) 34%,#FFFFFF 72%);}
html.hp[data-theme="dark"] body.home #gap{background:
  radial-gradient(40% 50% at 100% 100%, rgb(var(--h-rgb) / .07), rgb(var(--h-rgb) / 0) 70%),
  linear-gradient(180deg,var(--dtint) 0%,var(--dtint-2) 40%,#0A0B10 75%);}
/* the operating layer no longer sits on the seam */
html.hp body.home #layer::before{display:none;}
html.hp[data-theme="light"] body.home #layer{border-top:1px solid var(--rule);
  background:radial-gradient(36% 46% at 0% 0%, rgb(var(--p-rgb) / .06), rgb(var(--p-rgb) / 0) 70%),
             radial-gradient(38% 46% at 100% 100%, rgb(var(--h-rgb) / .16), rgb(var(--h-rgb) / 0) 70%),#FFFFFF;}
html.hp[data-theme="dark"] body.home #layer{border-top:1px solid var(--rule);
  background:radial-gradient(36% 46% at 0% 0%, rgb(var(--pd-rgb) / .07), rgb(var(--pd-rgb) / 0) 70%),
             radial-gradient(38% 46% at 100% 100%, rgb(var(--h-rgb) / .06), rgb(var(--h-rgb) / 0) 70%),var(--bg);}

/* the diagram: gates on either side, the agent in the middle, joined by dashed links */
html.hp .gap-vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,1fr);
  grid-template-areas:"sec agent comp" "fin agent ops";gap:18px clamp(28px,3.4vw,52px);align-items:stretch;}
html.hp .gap-gate{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--rule);
  border-radius:14px;background:var(--panel);box-shadow:0 18px 44px -34px rgba(11,13,18,.35);}
html.hp .gap-gate::after{content:"";position:absolute;top:50%;width:clamp(28px,3.4vw,52px);border-top:1.5px dashed color-mix(in srgb,var(--cyan) 55%,var(--rule));}
html.hp .gap-gate[style*="sec"]::after,html.hp .gap-gate[style*="fin"]::after{right:calc(-1 * clamp(28px,3.4vw,52px) - 1px);}
html.hp .gap-gate[style*="comp"]::after,html.hp .gap-gate[style*="ops"]::after{left:calc(-1 * clamp(28px,3.4vw,52px) - 1px);}
html.hp .gap-ic{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--cyan) 10%,var(--panel));color:var(--cyan);margin-bottom:4px;}
html.hp .gap-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
html.hp .gap-who{font-family:var(--ff-mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
html.hp .gap-q{font-family:var(--ff-display);font-weight:600;font-size:clamp(17px,1.35vw,20px);line-height:1.25;letter-spacing:-.015em;color:var(--ink);}
html.hp .gap-note{font-size:13.5px;line-height:1.5;color:var(--ink-2);}
html.hp .gap-req{margin-top:auto;padding-top:8px;font-family:var(--ff-mono);font-size:11.5px;line-height:1.6;color:var(--ink-3);}

html.hp .gap-agent{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
  padding:28px 20px;border-radius:18px;border:1.5px solid var(--ink);background:var(--panel);
  box-shadow:0 30px 70px -36px rgba(26,50,120,.45);}
html.hp[data-theme="dark"] .gap-agent{border-color:#FFFFFF;}
html.hp .gap-agent-k{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
html.hp .gap-agent-t{font-family:var(--ff-display);font-weight:700;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;color:var(--ink);}
html.hp .gap-agent-ok{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);}
html.hp .gap-agent-ok i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 18%,transparent);}
html.hp .gap-agent-ask{margin-top:8px;font-family:var(--ff-mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#0B0D12;background:var(--sun-fill);padding:.4em .7em;border-radius:4px;}

html.hp .gap-verdict{margin:clamp(44px,5vw,68px) auto 0;text-align:center;max-width:none;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(28px,3.6vw,48px);line-height:1.08;letter-spacing:-.04em;color:var(--ink);text-wrap:balance;}
html.hp .gap-verdict span{display:block;color:var(--cyan);}

html.hp .gap-turn{margin-top:clamp(40px,4.6vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:stretch;}
html.hp .gap-turn h3{margin:0 0 12px;font-family:var(--ff-display);font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);}
html.hp .gap-turn p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:52ch;}
html.hp .gap-answer{display:flex;flex-direction:column;gap:10px;padding:24px 26px;border-radius:16px;color:inherit;text-decoration:none;
  border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--cyan),var(--sun)) border-box;
  box-shadow:0 26px 60px -36px rgba(26,50,120,.45);transition:transform .18s ease;}
html.hp .gap-answer:hover{transform:translateY(-2px);}
html.hp .gap-answer-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;font-size:17px;color:var(--cyan);}
html.hp .gap-answer-t{font-family:var(--ff-display);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);}
html.hp .gap-answer-d{font-size:15px;line-height:1.6;color:var(--ink-2);}
html.hp .gap-answer-d b{color:var(--cyan);}

@media (max-width: 900px){
  html.hp .gap-vis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"agent agent" "sec comp" "fin ops";gap:14px;}
  html.hp .gap-gate::after{content:none;}
  html.hp .gap-turn{grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 560px){
  html.hp .gap-vis{grid-template-columns:minmax(0,1fr);grid-template-areas:"agent" "sec" "comp" "fin" "ops";}
  html.hp .gap-gate{padding:16px 18px;}
}

/* The Tanomis turn is a statement, not another card: no frame, a short
   blue-to-solar rule above it, and the key phrase under the highlighter. */
html.hp .gap-answer{position:relative;border:none;background:none;box-shadow:none;border-radius:0;padding:26px 0 0;gap:12px;}
html.hp .gap-answer::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--sun));}
html.hp .gap-answer:hover{transform:none;}
html.hp .gap-answer-t{font-size:clamp(22px,2vw,28px);line-height:1.22;letter-spacing:-.025em;}
html.hp .gap-answer-t mark{background:linear-gradient(transparent 12%,var(--sun) 12%,var(--sun) 88%,transparent 88%);
  color:#0B0D12;padding:0 .12em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
html.hp .gap-answer-d{font-size:16px;}
html.hp .gap-answer-d b{display:inline-block;transition:transform .18s ease;}
html.hp .gap-answer:hover .gap-answer-d b{transform:translateX(4px);}
html.hp .gap-answer:hover .gap-answer-t{color:var(--ink);}

/* =========================================================================
   ONE DARK BAND IN LIGHT MODE. "Why one layer" is the page's central argument,
   so in light mode it inverts: the dark theme's tokens are restated on the
   section itself, and everything inside it follows. Dark mode is unchanged.
   ========================================================================= */
html.hp[data-theme="light"] body.home #one-layer{
  --bg:#0A0B10;--bg-1:#101218;--panel:#13151D;--rule:#262A36;--rule-2:#333846;
  --ink:#EDEFF4;--ink-2:#A9AEBB;--ink-3:#7A8090;--cyan:var(--cyan-d);--v5-label:#8A90A0;
  color:var(--ink);border-top:none;
  background:
    radial-gradient(38% 55% at 88% 30%, rgb(var(--h-rgb) / .12), rgb(var(--h-rgb) / 0) 70%),
    radial-gradient(40% 60% at 0% 100%, rgb(var(--pd-rgb) / .22), rgb(var(--pd-rgb) / 0) 70%),
    radial-gradient(50% 60% at 50% 0%, rgb(var(--pd-rgb) / .10), rgb(var(--pd-rgb) / 0) 70%),
    var(--band);
}
html.hp[data-theme="light"] body.home #one-layer .versus .side.us{
  background:linear-gradient(#13151D,#13151D) padding-box,linear-gradient(135deg,var(--cyan),var(--sun)) border-box;
  box-shadow:0 30px 70px -36px rgb(var(--h-rgb) / .35);}
html.hp[data-theme="light"] body.home #one-layer h2,
html.hp[data-theme="light"] body.home #one-layer h3{color:var(--ink);}
html.hp[data-theme="light"] body.home #one-layer .quiet-link{color:var(--cyan);}
/* the light sections on either side meet the band with a clean edge */
html.hp[data-theme="light"] body.home #open{border-top:none;}

/* "The Tanomis answer" sits between two white sections, so in light mode it
   takes a cool grey ground with a fine, even dot texture; the white capability
   cards lift off it. */
html.hp[data-theme="light"] body.home #layer{position:relative;border-top:1px solid var(--rule);
  background:
    radial-gradient(40% 50% at 0% 0%, rgb(var(--p-rgb) / .07), rgb(var(--p-rgb) / 0) 70%),
    radial-gradient(38% 46% at 100% 100%, rgb(var(--h-rgb) / .16), rgb(var(--h-rgb) / 0) 70%),
    var(--sec);}
html.hp[data-theme="light"] body.home #layer::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(11,13,18,.11) 1px, transparent 0);background-size:10px 10px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 100%);}
html.hp body.home #layer > .wrap{position:relative;z-index:1;}
html.hp[data-theme="light"] body.home #layer .pillars.six > li{background:#FFFFFF;border-color:#DCE1EA;
  box-shadow:0 1px 2px rgba(11,13,18,.04),0 18px 40px -30px rgba(26,50,120,.30);}

/* The Tanomis answer, compact: one title and one line per capability; the
   depth lives on the capability page. */
html.hp body.home .pillars.six.compact > li{padding:24px 24px 26px;}
html.hp body.home .pillars.six.compact .k{font-size:clamp(18px,1.4vw,21px);margin-top:2px;}
html.hp body.home .pillars.six.compact .d{margin-top:10px;font-family:var(--ff-mono);font-size:12.5px;line-height:1.6;color:var(--ink-3);}
html.hp body.home #layer .v5-note{margin-top:22px;}
/* value statement, one sentence of what Tanomis does, then the keywords */
html.hp body.home .pillars.six.compact .s{display:block;margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2);}
html.hp body.home .pillars.six.compact .d{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);}


/* =========================================================================
   PALETTES. Every accent, glow and tint on the site reads from these tokens.
   The default is Electric Blue + Solar; three alternatives are switched from
   the footer and remembered per visitor (html[data-palette]).
   ========================================================================= */
html.hp{
  --sun-fill:var(--sun);
  --p-rgb:26 92 255;--pd-rgb:107 147 255;--h-rgb:255 225 77;
  --tint:#EEF3FF;--tint-2:#F8FAFF;--sec:#EEF1F6;--cream:#FFFBE6;
  --dtint:#0D1020;--dtint-2:#0B0C14;--dcream:#12110C;
  --cyan-d:#6B93FF;--band:#0A0B10;
}
html.hp[data-palette="forest"]{
  --sun:#C8F547;--p-rgb:17 100 63;--pd-rgb:95 211 154;--h-rgb:200 245 71;
  --tint:#ECF4EF;--tint-2:#F6FAF7;--sec:#EDF1EE;--cream:#F7FCE8;
  --dtint:#0C1A14;--dtint-2:#0A120E;--dcream:#11140A;--cyan-d:#5FD39A;--band:#0A120E;
}
html.hp[data-palette="forest"][data-theme="light"]{--cyan:#11643F;}
html.hp[data-palette="forest"][data-theme="dark"]{--cyan:#5FD39A;}
html.hp[data-palette="neon"]{
  --sun:#EEFF3D;--h-rgb:228 255 61;--cream:#FBFFE0;--dcream:#12140A;
}
/* the switch: a small swatch button beside the theme toggle */
html.hp .palette-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin-left:8px;
  background:transparent;border:1px solid var(--rule-2);border-radius:8px;cursor:pointer;flex-shrink:0;transition:border-color .15s;}
html.hp .palette-toggle:hover{border-color:var(--ink);}
html.hp .palette-toggle i{display:block;width:16px;height:16px;border-radius:50%;
  background:conic-gradient(var(--cyan) 0 50%,var(--sun) 50% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
html.hp .theme-toggle + .palette-toggle,html.hp .palette-toggle + .theme-toggle{margin-left:8px;}
html.hp .foot-tools{display:inline-flex;align-items:center;gap:8px;}
html.hp .foot-tools .palette-toggle,html.hp .foot-tools .theme-toggle{margin:0;}
html.hp .foot-tools .palette-toggle,html.hp .foot-tools .theme-toggle{width:34px;height:34px;}

/* The hero owns the first screen: at least the viewport minus the nav, content
   centred vertically, capped so very tall screens do not open an empty band.
   Phones and small tablets keep their natural height. */
@media (min-width: 901px){
  html.hp .hero.agentops.lab{display:flex;align-items:center;
    min-height:min(calc(78svh - 62px),800px);padding:clamp(56px,7vh,96px) 0 clamp(64px,8vh,112px);}
  html.hp .hero.agentops.lab > .wrap{width:100%;}
}

/* Hero diagram, story order: Run, Connect, Control down the left; Supervise,
   Evaluate & improve, Prove down the right. On phones the pairs read in the
   same order, left to right. */
@media (max-width: 640px){
  html.hp .hero.agentops.lab .hg2 .cl-grid{grid-template-areas:"w w" "c1 c2" "c3 c6" "c5 c4";}
}