/* Threshold — shared site CSS.
 * Editorial paper-and-ink palette · Spectral display · Inter body · JetBrains mono.
 * All pages share one file; section components stack vertically.
 */

@font-face {
  font-family: 'Gestura Headline';
  src: url('fonts/GesturaHeadline-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gestura Headline';
  src: url('fonts/GesturaHeadline-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --paper:        #FFFFFF;
  --paper-soft:   #FAFAF8;
  --paper-warm:   #FAFAF8;
  --paper-cream:  #F5F2EC;

  --ink:          #0A0A0A;
  --ink-soft:     #1F1F1F;
  --ink-2:        #3A3A3A;

  --muted:        rgba(10,10,10,0.55);
  --muted-2:      rgba(10,10,10,0.40);
  --rule:         rgba(10,10,10,0.10);
  --rule-strong:  rgba(10,10,10,0.20);

  --accent:       #FE451C;
  --accent-deep:  #D93A17;
  --accent-tint:  rgba(254,69,28,0.08);
  --accent-2:     #E5A53A;
  --accent-2-tint:rgba(229,165,58,0.10);
  --accent-3:     #8B6FE8;
  --accent-3-tint:rgba(139,111,232,0.10);

  --dark:         #0A0A0A;
  --dark-soft:    #141414;

  --font-display: 'Spectral', 'Gestura Headline', Georgia, serif;
  --font-body:    'Inter', 'PP Neue Montreal', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }

/* ── Primitives ────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow.sm { font-size: 11.5px; gap: 8px; }
.eyebrow.dark { color: #FF7A52; }
.eyebrow .u { animation: tblink 1.1s linear infinite; display: inline-block; }
@keyframes tblink { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

.display {
  font-family: var(--font-display); font-weight: 300;
  letter-spacing: -0.022em; line-height: 0.96;
}
.display em {
  font-style: italic; font-weight: 300; color: var(--accent);
}

.mono-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.lede {
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55; color: var(--ink-soft); max-width: 60ch;
}

/* ── Pill buttons ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.primary { background: var(--accent); color: #fff; }
.pill.ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.pill.ghost:hover { background: var(--ink); color: var(--paper); }
.pill.ghost-light { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
.pill.ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.pill .arrow { transition: transform 200ms ease; display: inline-flex; }
.pill:hover .arrow { transform: translateX(3px); }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.t-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.t-nav.on-dark {
  background: rgba(10,10,10,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.t-nav__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.t-nav__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); line-height: 1; }
.t-nav.on-dark .t-nav__logo { color: #fff; }
.t-nav__logo .name {
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1;
  display: inline-flex; align-items: center;
}
.t-nav__logo .by {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding-left: 10px; border-left: 1px solid var(--rule-strong); margin-left: 2px;
  line-height: 1;
  display: inline-flex; align-items: center;
}

/* Footer logo — mirrors nav logo, adapted for dark background */
.t-footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; line-height: 1; }
.t-footer-logo .wm {
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1;
  display: inline-flex; align-items: center;
  color: #fff;
}
.t-footer-logo .by {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.20); margin-left: 2px;
  line-height: 1;
  display: inline-flex; align-items: center;
}
.t-nav__links {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-body);
}
.t-nav__links a, .t-nav__links button {
  background: transparent; border: 0; cursor: pointer;
  font: 400 15px/1 var(--font-body);
  color: inherit;
  padding: 9px 14px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 160ms ease;
}
.t-nav__links a:not(.t-nav__cta):hover, .t-nav__links button:hover { background: rgba(254,69,28,0.05); }
.t-nav.on-dark .t-nav__links a:not(.t-nav__cta):hover,
.t-nav.on-dark .t-nav__links button:hover { background: rgba(255,255,255,0.08); }
.t-nav__links .has-dropdown { position: relative; }
.t-nav__links .has-dropdown > button::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55; margin-left: 2px;
}
.t-nav__dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 10px; min-width: 380px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.6);
  opacity: 0; transform: translateX(-10px); pointer-events: none;
  transition: opacity 240ms cubic-bezier(.22, 1, .36, 1),
              transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.t-nav__links .has-dropdown.open .t-nav__dropdown {
  opacity: 1; transform: translateX(0); pointer-events: auto;
}
.t-nav__dropdown .head {
  padding: 10px 14px 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.t-nav__dropdown a {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px;
  align-items: center;
  padding: 12px 14px; border-radius: 8px;
}
.t-nav__dropdown a:hover { background: rgba(254,69,28,0.05); }
.t-nav__dropdown a .n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.14em;
}
.t-nav__dropdown a .t { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.t-nav__dropdown a .s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.t-nav__dropdown a .arr { color: var(--muted); font-family: var(--font-mono); }
.t-nav__links a.t-nav__cta,
.t-nav a.t-nav__cta {
  padding: 13px 24px; border-radius: 100px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 8px;
  border: 0;
}
.t-nav__cta .arrow { display: inline-flex; transition: transform 200ms ease; }
.t-nav__cta:hover .arrow { transform: translateX(3px); }
.t-nav__cta svg { width: 13px; height: 13px; }
.t-nav__menubtn {
  display: none; background: transparent; border: 0;
  padding: 8px; cursor: pointer; color: inherit; line-height: 0;
}
.t-nav__menubtn svg { display: block; }
.t-nav__menubtn .t-nav__menubtn-close { display: none; }
.t-nav__menubtn[aria-expanded="true"] .t-nav__menubtn-open { display: none; }
.t-nav__menubtn[aria-expanded="true"] .t-nav__menubtn-close { display: block; }
.t-nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  height: 100vh;
  padding: 88px 28px 32px;
  background: var(--paper);
  overflow-y: auto;
  z-index: 1;
}
.t-nav__mobile.open { display: flex; flex-direction: column; gap: 14px; }
.t-nav__mobile a:not(.pill) { color: var(--ink); font-size: 17px; padding: 4px 0; }
.t-nav__mobile .group-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* Tablet 2-column menu layout */
@media (min-width: 600px) and (max-width: 900px) {
  .t-nav__mobile.open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    column-gap: 64px;
    row-gap: 18px;
    padding: 104px 56px 64px;
    align-content: start;
    justify-items: start;
  }
  .t-nav__mobile a:not(.pill) { font-size: 20px; padding: 0; }
  .t-nav__mobile .group-label { font-size: 11px; margin-top: 0; padding-bottom: 4px; }
  .t-nav__mobile .pill { margin-top: 12px; }
}

@media (max-width: 900px) {
  .t-nav__links, .t-nav__cta { display: none; }
  .t-nav__menubtn { display: inline-flex; }
}

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.t-shell { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.t-shell--narrow { max-width: 920px; }
.t-section { padding: 120px 0; border-top: 1px solid var(--rule); }
.t-section:first-of-type { border-top: 0; }
.t-section.warm { background: var(--paper-warm); }
.t-section.soft { background: var(--paper-soft); }
.t-section.cream { background: var(--paper-cream); }
.t-section.dark { background: var(--dark); color: #fff; border-top: 0; }
.t-section.dark .lede { color: rgba(255,255,255,0.78); }
.t-section.dark .mono-meta { color: rgba(255,255,255,0.45); }
.t-section.dark .display em { color: var(--accent); }
.t-section.tight { padding: 88px 0; }

/* ── Page hero (sub-pages) ─────────────────────────────────────────────────── */
.t-page-hero {
  padding: 96px 0 88px;
}
.t-page-hero .eyebrow { margin-bottom: 28px; }
.t-page-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 0.98; letter-spacing: -0.028em;
  margin: 0; max-width: 18ch;
}
.t-page-hero h1 em { font-style: italic; font-weight: 300; color: var(--accent); }
.t-page-hero .lede { margin-top: 32px; max-width: 56ch; }
.t-page-hero .actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ── Email-capture (hero form) ─────────────────────────────────────────────── */
.email-form {
  display: inline-flex; align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 4px;
  max-width: 100%;
}
.t-section.dark .email-form {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.email-form input {
  background: transparent; border: 0; outline: 0;
  font: 400 15px/1 var(--font-body);
  padding: 12px 18px;
  width: 280px; max-width: 100%;
  color: inherit;
}
.email-form input::placeholder { color: var(--muted); }
.t-section.dark .email-form input::placeholder { color: rgba(255,255,255,0.55); }
.email-form button {
  background: var(--accent); color: #fff;
  border: 0; border-radius: 100px; cursor: pointer;
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 12px 22px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.email-form .arrow { display: inline-flex; }
.email-form .arrow svg { width: 13px; height: 13px; }
.email-form.full { width: 100%; max-width: 540px; }
.email-form.full input { width: 100%; flex: 1; }
.email-form .ok {
  display: inline-flex; align-items: center; padding: 12px 22px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}

/* ── Lead form: clear fixed nav + progressive reveal (name / company) ─────── */
#book { scroll-margin-top: 88px; }

.email-form { transition: border-radius 220ms ease, padding 220ms ease; }
.email-form.is-expanded {
  flex-direction: column;
  border-radius: 14px;
  padding: 6px;
  align-items: stretch;
}
.email-form__row {
  display: flex;
  align-items: stretch;
  flex: 1;
}
.email-form__expand { display: none; }
.email-form.is-expanded .email-form__expand {
  display: flex;
  flex-direction: column;
}
.email-form.is-expanded .email-form__expand input {
  background: transparent; border: 0; outline: 0;
  font: 400 15px/1.2 var(--font-body);
  padding: 14px 18px;
  color: inherit;
  width: 100%;
  appearance: none;
}
.email-form.is-expanded .email-form__expand input::placeholder { color: var(--muted); }
.email-form.is-expanded .email-form__expand input + input { border-top: 1px solid var(--rule); }
.email-form.is-expanded .email-form__row { border-top: 1px solid var(--rule); }

.t-section.dark .email-form.is-expanded .email-form__expand input::placeholder { color: rgba(255,255,255,0.55); }
.t-section.dark .email-form.is-expanded .email-form__expand input + input,
.t-section.dark .email-form.is-expanded .email-form__row { border-color: rgba(255,255,255,0.18); }

/* Honeypot — visible only to naive bots */
.email-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Success / error states */
.email-form.is-success, .email-form.is-error {
  background: rgba(254,69,28,0.05);
  border-color: rgba(254,69,28,0.30);
  border-radius: 14px;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.email-form__msg {
  padding: 18px 22px;
  font: 600 13px/1.5 var(--font-body);
  color: var(--ink);
  text-align: center;
  width: 100%;
}
.email-form__msg a { color: var(--accent); text-decoration: underline; }
.t-section.dark .email-form__msg { color: #fff; }
.t-section.dark .email-form.is-success,
.t-section.dark .email-form.is-error {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* ── Cluster blocks (homepage 01-04) ───────────────────────────────────────── */
.cluster {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
@media (min-width: 901px) {
  .cluster.reverse > .cluster__text { order: 2; }
  .cluster.reverse > .cluster__visual { order: 1; }
}
.cluster__numeral {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.cluster__numeral .slash { color: var(--muted); margin: 0 4px; }
.cluster__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 0.98; letter-spacing: -0.026em;
  margin: 18px 0 26px; max-width: 13ch;
}
.cluster__title em { font-style: italic; color: var(--accent); }
.cluster__problem {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.55vw, 26px); line-height: 1.4;
  color: var(--ink); margin: 26px 0 32px;
  padding: 20px 0 20px 24px;
  border-left: 2px solid var(--accent);
  max-width: 38ch;
}
.cluster__feature {
  display: grid; grid-template-columns: 20px 1fr; gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.cluster__feature:last-child { border-bottom: 1px solid var(--rule); }
.cluster__feature .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin-top: 8px; justify-self: center;
}
.cluster__feature p {
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}
.cluster__feature p strong {
  display: block; font-family: var(--font-body); font-weight: 600;
  color: var(--ink); margin-bottom: 4px; font-size: 16px;
}
.cluster__outcome {
  margin-top: 28px;
  font-family: var(--font-display); font-weight: 300;
  font-size: 19px; line-height: 1.45; color: var(--ink);
  max-width: 38ch;
}
.cluster__outcome em { font-style: italic; color: var(--accent); }
@media (max-width: 900px) {
  .cluster { grid-template-columns: 1fr; gap: 48px; }
  .cluster > .cluster__text   { order: 1; }
  .cluster > .cluster__visual { order: 2; }
}

/* ── Visual placeholders ───────────────────────────────────────────────────── */
.viz {
  position: relative; width: 100%;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
}
.viz.warm { background: var(--paper-warm); }
.viz.cream { background: var(--paper-cream); }
.viz.dark { background: var(--dark-soft); border-color: rgba(255,255,255,0.08); color: #fff; }
.viz__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.viz.dark .viz__grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}
.viz__tag {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.viz__tag .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.viz__corner {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
}
.viz.dark .viz__tag { color: rgba(255,255,255,0.6); }
.viz.dark .viz__corner { color: rgba(255,255,255,0.4); }
.viz__label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.85);
  border: 1px dashed var(--rule-strong);
  padding: 14px 22px;
  text-align: center;
  max-width: 78%;
}
.viz.dark .viz__label {
  color: rgba(255,255,255,0.85);
  background: rgba(10,10,10,0.55);
  border-color: rgba(255,255,255,0.28);
}
.viz__label .sub {
  display: block; margin-top: 6px;
  font-size: 10px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.14em;
}
.viz.dark .viz__label .sub { color: rgba(255,255,255,0.5); }

/* ── Stats band — code-built with count animation ────────────────────────── */
.stats-section { padding: 56px 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.stat-cell {
  padding: 56px 48px 52px;
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.stat-cell:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(58px, 6.4vw, 102px); line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  display: inline-flex; align-items: baseline;
  margin-bottom: 28px;
  white-space: nowrap;
}
.stat-num .prefix {
  font-size: 0.52em;
  color: var(--accent);
  margin-right: 4px;
  letter-spacing: -0.02em;
  opacity: 0.92;
}
.stat-num .suffix {
  font-size: 0.50em;
  color: var(--accent);
  margin-left: 4px;
  letter-spacing: -0.02em;
  opacity: 0.92;
}
.stat-num .suffix-sm {
  font-size: 0.28em;
  color: var(--accent);
  margin-left: 8px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono); font-weight: 600;
  align-self: center;
  opacity: 0.92;
}
.stat-num .count { font-variant-numeric: tabular-nums; display: inline-block; }
.stat-viz {
  width: 100%; height: 110px;
  margin: 4px 0 28px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.stat-viz svg { width: 100%; height: 100%; display: block; }
.stat-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.stat-desc {
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 28ch;
  margin: 0 auto;
}

/* Per-illustration animations — looping idle motion */
.stat-curve {
  stroke-dasharray: 280; stroke-dashoffset: 280;
  animation: draw-curve-loop 5.5s cubic-bezier(.5, 0, .2, 1) infinite;
}
@keyframes draw-curve-loop {
  0%   { stroke-dashoffset: 280; }
  45%  { stroke-dashoffset: 0;   }
  85%  { stroke-dashoffset: 0;   opacity: 1; }
  95%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 280; opacity: 0; }
}
.stat-dot--start { animation: dot-pulse 5.5s ease-in-out infinite; }
.stat-dot--end {
  opacity: 0;
  animation: dot-end 5.5s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}
@keyframes dot-end {
  0%, 40%  { opacity: 0; }
  50%, 85% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Key + particles — keep particles streaming outward */
.stat-particles circle {
  animation: particle-stream 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.stat-particles circle:nth-child(odd)  { animation-delay: 0.2s; }
.stat-particles circle:nth-child(3n)   { animation-delay: 0.5s; }
.stat-particles circle:nth-child(5n)   { animation-delay: 0.9s; }
.stat-particles circle:nth-child(7n)   { animation-delay: 1.3s; }
@keyframes particle-stream {
  0%   { transform: translate(-8px, 0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(10px, -3px); opacity: 0; }
}
.stat-key {
  animation: key-glow 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes key-glow {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* Audit rings — expanding sonar ripples */
.ring--1, .ring--2, .ring--3 { transform-origin: 100px 55px; transform-box: view-box; }
.ring--1 { animation: ring-sonar 3.6s ease-out infinite;        }
.ring--2 { animation: ring-sonar 3.6s ease-out 1.2s infinite;   }
.ring--3 { animation: ring-sonar 3.6s ease-out 2.4s infinite;   }
@keyframes ring-sonar {
  0%   { transform: scale(0.55); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
.stat-doc {
  transform-box: fill-box;
  transform-origin: center;
  animation: doc-pulse 2.8s ease-in-out infinite;
}
@keyframes doc-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}
.stat-check {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: check-draw 2.8s ease-in-out infinite;
}
@keyframes check-draw {
  0%, 30%  { stroke-dashoffset: 20; }
  50%, 80% { stroke-dashoffset: 0;  }
  100%     { stroke-dashoffset: 20; }
}

/* Latency wave + sparkle */
.stat-wave {
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: wave-flow 3.2s ease-in-out infinite;
}
@keyframes wave-flow {
  0%   { stroke-dashoffset: 220; }
  60%  { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: -220; }
}
.stat-sparkle {
  transform-origin: center; transform-box: fill-box;
  animation: sparkle-pulse 3.2s ease-in-out infinite;
}
@keyframes sparkle-pulse {
  0%, 100% { transform: scale(0.85);  opacity: 0.7; }
  50%      { transform: scale(1.10);  opacity: 1;   }
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10); padding: 36px 24px; }
  .stat-cell:last-child { border-bottom: 0; }
}

/* ── FAQ accordion ─────────────────────────────────────────────────────────── */
.faq { max-width: 900px; margin: 56px auto 0; }
.faq__item {
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 56px 1fr 32px; gap: 18px;
  align-items: center;
  padding: 28px 4px;
  transition: background 240ms ease;
}
.faq__item > summary:hover { background: rgba(254,69,28,0.03); }
/* ── FAQ accordion — grid-template-rows shell + inner-content easing ─────── */
.faq__item .a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 4px 0 78px;
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
  max-width: 62ch;
  pointer-events: none;
  transition: grid-template-rows 1300ms cubic-bezier(.16, 1, .3, 1) 280ms;
}
.faq__item .a > .a-inner {
  overflow: hidden;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 32px;
  opacity: 0;
  transform: translateY(-32px);
  transition:
    opacity 600ms cubic-bezier(.4, 0, .2, 1) 0ms,
    transform 700ms cubic-bezier(.4, 0, .2, 1) 0ms;
}
.faq__item.is-open .a {
  grid-template-rows: 1fr;
  pointer-events: auto;
  transition: grid-template-rows 1300ms cubic-bezier(.16, 1, .3, 1) 0ms;
}
.faq__item.is-open .a > .a-inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1000ms cubic-bezier(.16, 1, .3, 1) 280ms,
    transform 1150ms cubic-bezier(.16, 1, .3, 1) 220ms;
}
.faq__item[open] .plus::after,
.faq__item.is-open .plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq__item .plus {
  transition: transform 560ms cubic-bezier(.34, 1.56, .64, 1);
}
.faq__item.is-open .plus {
  transform: scale(0.88) rotate(45deg);
}
.faq__item .plus::before,
.faq__item .plus::after {
  transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1), opacity 380ms ease;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item .n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent);
}
.faq__item .q {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.faq__item .plus {
  width: 18px; height: 18px;
  position: relative;
  justify-self: end;
}
.faq__item .plus::before, .faq__item .plus::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--ink);
  transition: transform 240ms ease, opacity 240ms ease;
}
.faq__item .plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__item .plus::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq__item .a p { margin: 0 0 12px; }
.faq__item .a p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .faq__item > summary { grid-template-columns: 36px 1fr 20px; gap: 12px; padding: 22px 4px; }
  .faq__item .a { padding-left: 48px; }
}

/* ── Long-form essay (use-case / manifesto / about) ────────────────────────── */
.essay { max-width: 720px; margin: 0 auto; }
.essay h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.06; letter-spacing: -0.022em;
  margin: 80px 0 24px;
  max-width: 22ch;
}
.essay h2.eyebrow-h {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 88px 0 18px;
  max-width: none;
}
.essay h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; letter-spacing: -0.014em;
  margin: 40px 0 12px;
}
.essay p {
  font-size: 18px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.essay p > em { color: var(--accent); font-style: italic; }
.essay strong { color: var(--ink); font-weight: 600; }
.essay p:first-of-type::first-line { font-variant: small-caps; letter-spacing: 0.04em; }
.essay .first-graf {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.4;
  color: var(--ink); margin-bottom: 36px;
  max-width: 32ch;
}
.essay hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }
.essay ul, .essay ol { padding-left: 1.2em; margin: 0 0 18px; }
.essay li { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 8px 0; }
.essay .pullquote {
  margin: 56px 0; padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25;
  color: var(--ink); letter-spacing: -0.014em;
  max-width: none; text-align: center;
}
.essay .pullquote em { color: var(--accent); }

/* Inline diagram strip inside an essay (descending request, audit chain etc.) */
.diagram-strip {
  margin: 48px 0;
  padding: 28px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.diagram-strip .head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.diagram-strip .step {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 16px; align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.diagram-strip .step:first-of-type { border-top: 0; }
.diagram-strip .step .k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.12em;
}
.diagram-strip .step .v {
  font-size: 15.5px; line-height: 1.5; color: var(--ink-soft);
}
.diagram-strip .step .v code {
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(254,69,28,0.06); border: 1px solid var(--accent-tint);
  border-radius: 4px; padding: 2px 6px;
  color: var(--accent-deep);
  overflow-wrap: anywhere;
}
.diagram-strip .step .v .deny {
  color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Use-case nav strip (bottom of essay) ─────────────────────────────────── */
.uc-nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 96px 0 0;
}
.uc-nav a {
  display: block; padding: 28px;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper);
  transition: border-color 200ms ease, transform 200ms ease;
}
.uc-nav a:hover { border-color: var(--ink); }
.uc-nav a.active { border-color: var(--accent); background: var(--accent-tint); }
.uc-nav a .n {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.uc-nav a .t {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.15; margin-top: 10px;
  color: var(--ink);
}
.uc-nav a .s { margin-top: 6px; font-size: 14px; color: var(--muted); }
@media (max-width: 800px) { .uc-nav { grid-template-columns: 1fr; } }

/* ── Connector image (transparent PNG) ─────────────────────────────────── */
.connector-image {
  margin: 32px auto 0;
  max-width: 1280px;
  padding: 0 24px;
  display: flex; justify-content: center;
}
.connector-image img {
  width: 100%; height: auto; display: block;
  max-width: 1240px;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Money cluster image ─────────────────────────────────────────────────── */
.money-image {
  width: 100%;
  display: flex; justify-content: center;
}
.money-image img {
  width: 100%; height: auto; display: block;
  max-width: 560px;
  border-radius: 16px;
  background: #fff;
}

/* ── Money diagram — code-built cost-router flow ─────────────────────────── */
.money-diagram {
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 8px 4px;
  font-family: var(--font-body);
  color: var(--ink);
}
.money-diagram .md__top { display: flex; flex-direction: column; align-items: center; }
.money-diagram .md__label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 18px;
}
.money-diagram .md__rule {
  position: relative; width: 76%; height: 14px;
  border: 1px dashed var(--rule-strong);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: -8px;
}
.money-diagram .md__rule .dot {
  position: absolute; left: 50%; top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}
.money-diagram .md__inputs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  width: 100%;
}
.money-diagram .md__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  justify-content: center;
}
.money-diagram .md__pill svg { width: 14px; height: 14px; color: var(--ink-2); }

.money-diagram .md__funnel,
.money-diagram .md__branches {
  display: block; width: 100%;
}
.money-diagram .md__funnel { height: 130px; margin-top: 8px; }
.money-diagram .md__branches { height: 100px; margin-top: 4px; }
.money-diagram .md-strand {
  /* Dotted, flowing dashes for continuous animation */
  stroke-dasharray: 1.8 4;
  stroke-linecap: round;
  animation: md-flow 1.5s linear infinite;
}
@keyframes md-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -5.8; }
}

.money-diagram .md__router {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 28px;
  text-align: center;
  max-width: 360px; margin: 0 auto;
  box-shadow: 0 8px 24px -18px rgba(0,0,0,0.18);
}
.money-diagram .md__router-head {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0;
}
.money-diagram .md__router-head .md__pip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

.money-diagram .md__models {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.money-diagram .md__model {
  padding: 14px 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-align: center;
}
.money-diagram .md__glyph {
  width: 32px; height: 32px; margin: 0 auto 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.money-diagram .md__glyph svg { width: 100%; height: 100%; }
.money-diagram .md__glyph.orange { color: #FE451C; }
.money-diagram .md__glyph.gold   { color: #C58A20; }
.money-diagram .md__glyph.blue   { color: #4A8BD9; }
.money-diagram .md__glyph.purple { color: #7B58C8; }
.money-diagram .md__name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 4px;
}
.money-diagram .md__task { font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; }
.money-diagram .md__hr { height: 1px; background: var(--rule); margin: 8px 0; }
.money-diagram .md__price {
  font-family: var(--font-mono); font-weight: 700; font-size: 13.5px;
  color: var(--ink);
}
.money-diagram .md__per {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
}

.money-diagram .md__spends {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 8px; position: relative;
}
.money-diagram .md__spends::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: -4px;
  height: 1px; background: var(--rule-strong);
}
.money-diagram .md__spend {
  padding: 10px 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-align: center;
}
.money-diagram .md__spend-l {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.money-diagram .md__spend-v {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--ink);
}

.money-diagram .md__savings {
  margin-top: 14px;
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.money-diagram .md__sv-icon {
  width: 38px; height: 38px;
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.money-diagram .md__sv-icon svg { width: 100%; height: 100%; }
.money-diagram .md__sv-l {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
}
.money-diagram .md__sv-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.money-diagram .md__sv-divider { width: 1px; height: 36px; background: var(--rule); }
.money-diagram .md__sv-amount { text-align: right; }
.money-diagram .md__sv-num {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.money-diagram .md__sv-pct {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin-top: 2px;
}

@media (max-width: 520px) {
  .money-diagram .md__inputs,
  .money-diagram .md__models,
  .money-diagram .md__spends { grid-template-columns: repeat(2, 1fr); }
  .money-diagram .md__pill span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .money-diagram .md-strand { animation: none !important; stroke-dasharray: 0 !important; }
}

/* ── Generic cluster image (knowledge, etc.) ─────────────────────────────── */
.cluster-image {
  width: 100%;
  display: flex; justify-content: center;
}
.cluster-image img {
  width: 100%; height: auto; display: block;
  max-width: 560px;
  border-radius: 16px;
}

/* ── Knowledge diagram — code-built skill-registry flow ──────────────────── */
.knowledge-diagram {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 26px 0 22px;
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex; flex-direction: column;
  position: relative;
  overflow: visible;
}
.knowledge-diagram .kd__header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink);
}
.knowledge-diagram .kd__title { display: inline-flex; align-items: center; gap: 8px; }
.knowledge-diagram .kd__pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.knowledge-diagram .kd__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.knowledge-diagram .kd__col-label--left { text-align: left; padding-left: 4px; }
.knowledge-diagram .kd__col-label--right { text-align: right; padding-right: 4px; }

/* Stage canvas — fixed aspect, % positioning matches SVG viewBox 0 0 100 100 */
.knowledge-diagram .kd__stage {
  position: relative; width: 100%;
  aspect-ratio: 5/5.4;
  margin-top: 14px;
}
.knowledge-diagram .kd__streams {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.knowledge-diagram .kd-strand--in {
  animation: kd-flow-in 1.6s linear infinite;
}
.knowledge-diagram .kd-strand--in:nth-child(2n)   { animation-delay: -0.4s; }
.knowledge-diagram .kd-strand--in:nth-child(3n)   { animation-delay: -0.8s; }
.knowledge-diagram .kd-strand--in:nth-child(5n+1) { animation-delay: -1.2s; }
.knowledge-diagram .kd-strand--out {
  stroke-dasharray: 1.5 3;
  stroke-linecap: round;
  animation: kd-flow-out 1.5s linear infinite;
  /* All output lines animate in unison — no nth-child stagger */
}
@keyframes kd-flow-in {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -2.4; }
}
@keyframes kd-flow-out {
  from { stroke-dashoffset: 0;    }
  to   { stroke-dashoffset: -4.5; }
}

.knowledge-diagram .kd__tile {
  position: absolute;
  width: 12%; aspect-ratio: 1;
  min-width: 32px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 16px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(10,10,10,0.04);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  z-index: 2;
}
.knowledge-diagram .kd__tile svg { width: 52%; height: 52%; }

.knowledge-diagram .kd__registry {
  position: absolute;
  left: 39%; top: 30%;
  width: 22%; height: 40%;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 0 0 6px rgba(254,69,28,0.08), 0 18px 36px -22px rgba(254,69,28,0.32);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 10px;
  gap: 14px;
}
.knowledge-diagram .kd__burst {
  width: 36%; aspect-ratio: 1;
  color: var(--accent);
  display: block;
}
.knowledge-diagram .kd__registry-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
}

.knowledge-diagram .kd__stack {
  position: absolute;
  right: 0; top: 0;
  width: 30%;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 2;
}
.knowledge-diagram .kd__row {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: center;
  padding: 11px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 16px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(10,10,10,0.04);
}
.knowledge-diagram .kd__row-icon { width: 18px; height: 18px; color: var(--ink); }
.knowledge-diagram .kd__row-label {
  font-size: 13px; color: var(--ink); font-weight: 500;
}
.knowledge-diagram .kd__row-pip { display: none; }
.knowledge-diagram .kd__row:nth-child(1) .kd__row-pip { animation-delay: 0s; }
.knowledge-diagram .kd__row:nth-child(2) .kd__row-pip { animation-delay: 0.4s; }
.knowledge-diagram .kd__row:nth-child(3) .kd__row-pip { animation-delay: 0.8s; }
.knowledge-diagram .kd__row:nth-child(4) .kd__row-pip { animation-delay: 1.2s; }
.knowledge-diagram .kd__row:nth-child(5) .kd__row-pip { animation-delay: 1.6s; }
@keyframes kd-pip {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

.knowledge-diagram .kd__compare {
  display: flex; justify-content: space-between;
  gap: 32px;
  margin-top: 48px;
  padding: 0 32px;
}
.knowledge-diagram .kd__compare > div {
  flex: 0 1 28ch;
}
.knowledge-diagram .kd__compare-l {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 8px;
}
.knowledge-diagram .kd__compare p {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  margin: 0; max-width: 28ch;
}
.knowledge-diagram .kd__footer {
  margin: 28px 18px 0;
  padding: 14px 22px;
  background: #fff;
  border-radius: 100px;
  border: 1px solid var(--rule);
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
  font-size: 13.5px; color: var(--ink);
}
.knowledge-diagram .kd__burst--sm { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .knowledge-diagram .kd-strand,
  .knowledge-diagram .kd__row-pip { animation: none !important; }
}
/* ── Stats band image (legacy) ──────────────────────────────────────────── */
.stats-band-image {
  display: none;
}

/* ── Red accent words ── solid, no shimmer ────────────────────────────── */
.hero-home h1 em,
.cluster__title em,
.arch-preview h2 em,
.section-head h2 em,
.manifesto-pull .we-act {
  color: var(--accent);
  font-style: italic;
}
.t-section.dark .section-head h2 em { color: var(--accent); }

/* ── Manifesto pull quote (centered editorial) ────────────────────────────── */
.manifesto-pull {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.manifesto-pull .lede-display {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.45; letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 auto 44px;
  max-width: 52ch;
}
.manifesto-pull .lede-display .we-act {
  display: inline;
  font-style: italic; font-weight: 400;
  color: var(--accent);
}
.manifesto-pull .manifesto-body {
  margin: 0 auto 40px;
}
.manifesto-pull .manifesto-body p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17.5px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 auto 24px;
  max-width: 56ch;
}
.manifesto-pull .manifesto-body p:last-child { margin-bottom: 0; }
.manifesto-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 0;
  padding: 4px 0 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 0;
  transition: color 200ms ease;
}
.manifesto-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 520ms cubic-bezier(.7, 0, .25, 1);
}
.manifesto-link:hover::after {
  transform-origin: right center;
  animation: link-underline 700ms cubic-bezier(.7, 0, .25, 1) forwards;
}
@keyframes link-underline {
  0%   { transform-origin: right center; transform: scaleX(1); }
  50%  { transform-origin: right center; transform: scaleX(0); }
  51%  { transform-origin: left center;  transform: scaleX(0); }
  100% { transform-origin: left center;  transform: scaleX(1); }
}
.manifesto-link:hover { color: var(--accent-deep); gap: 8px; }

/* ── Scene: Any connector. One control plane. ─────────────────────────────── */
.scene-3d {
  position: relative; width: 100%;
  height: 780px;
  margin-top: 56px;
  user-select: none;
  overflow: visible;
}
.scene-3d__inner {
  position: relative; width: 100%; height: 100%;
  transform: scale(var(--scene-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Horizontal light streaks — thin wisps emanating from the device */
.scene-3d .streaks {
  position: absolute; left: 50%; top: 50%;
  width: 1500px; height: 360px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    /* upper left strands */
    radial-gradient(ellipse 36% 1px at 28% 28%, rgba(255,200,160,0.55), transparent 70%),
    radial-gradient(ellipse 42% 1px at 22% 34%, rgba(254,130,80,0.45), transparent 70%),
    radial-gradient(ellipse 30% 1px at 30% 40%, rgba(255,210,170,0.42), transparent 75%),
    radial-gradient(ellipse 38% 1px at 24% 46%, rgba(254,90,40,0.40), transparent 75%),
    /* lower left strands */
    radial-gradient(ellipse 32% 1px at 28% 56%, rgba(255,200,160,0.50), transparent 75%),
    radial-gradient(ellipse 40% 1px at 22% 64%, rgba(254,130,80,0.42), transparent 75%),
    radial-gradient(ellipse 28% 1px at 30% 72%, rgba(255,220,180,0.40), transparent 75%),
    /* upper right strands (mirrored) */
    radial-gradient(ellipse 36% 1px at 72% 28%, rgba(255,200,160,0.55), transparent 70%),
    radial-gradient(ellipse 42% 1px at 78% 34%, rgba(254,130,80,0.45), transparent 70%),
    radial-gradient(ellipse 30% 1px at 70% 40%, rgba(255,210,170,0.42), transparent 75%),
    radial-gradient(ellipse 38% 1px at 76% 46%, rgba(254,90,40,0.40), transparent 75%),
    /* lower right strands */
    radial-gradient(ellipse 32% 1px at 72% 56%, rgba(255,200,160,0.50), transparent 75%),
    radial-gradient(ellipse 40% 1px at 78% 64%, rgba(254,130,80,0.42), transparent 75%),
    radial-gradient(ellipse 28% 1px at 70% 72%, rgba(255,220,180,0.40), transparent 75%);
  filter: blur(1.5px);
  animation: streaks-breathe 5s ease-in-out infinite;
}
@keyframes streaks-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}

/* Bloom behind device */
.scene-3d .bloom {
  position: absolute; left: 50%; top: 50%;
  width: 760px; height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, rgba(254,69,28,0.45) 0%, rgba(254,69,28,0.10) 28%, transparent 60%);
  filter: blur(20px);
  animation: bloom-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bloom-pulse {
  0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* T-device — the central screen */
.t-device {
  position: absolute; left: 50%; top: 50%;
  width: 320px; height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 44px;
  background: linear-gradient(180deg, #1c1c1c 0%, #080808 100%);
  padding: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.04),
    0 70px 140px rgba(0,0,0,0.85),
    0 0 120px rgba(254,69,28,0.30);
  animation: t-device-breathe 4.5s ease-in-out infinite;
}
@keyframes t-device-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04), 0 70px 140px rgba(0,0,0,0.85), 0 0 100px rgba(254,69,28,0.28); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04), 0 70px 140px rgba(0,0,0,0.85), 0 0 160px rgba(254,69,28,0.50); }
}
.t-device__screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 30px;
  background: radial-gradient(ellipse at 50% 55%, #2a140a 0%, #0a0503 70%, #050202 100%);
  border: 1.5px solid rgba(254,69,28,0.7);
  box-shadow:
    inset 0 0 80px rgba(254,69,28,0.35),
    inset 0 0 0 1px rgba(254,140,80,0.25),
    0 0 50px rgba(254,69,28,0.55);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Concentric perspective grid (fisheye style) */
.t-device__screen .grid {
  position: absolute; inset: 0;
  display: block;
  pointer-events: none;
  opacity: 0.65;
}
.t-device__screen::after {
  /* scanline shimmer */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.025) 3px 4px);
  pointer-events: none;
}
.t-glyph {
  position: relative; z-index: 2;
  width: 120px; height: 120px;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.5))
    drop-shadow(0 0 18px rgba(254,69,28,0.95))
    drop-shadow(0 0 40px rgba(254,69,28,0.75))
    drop-shadow(0 0 80px rgba(254,69,28,0.5));
  animation: t-glyph-pulse 3.6s ease-in-out infinite;
}
@keyframes t-glyph-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,255,255,0.5)) drop-shadow(0 0 18px rgba(254,69,28,0.85)) drop-shadow(0 0 40px rgba(254,69,28,0.7)) drop-shadow(0 0 70px rgba(254,69,28,0.45)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,255,255,0.7)) drop-shadow(0 0 28px rgba(254,69,28,1))    drop-shadow(0 0 60px rgba(254,69,28,0.9))  drop-shadow(0 0 110px rgba(254,69,28,0.65)); }
}

/* Connector cards — dark obsidian glass */
.conn-card {
  position: absolute;
  left: calc(50% + var(--x, 0px));
  top: calc(50% + var(--y, 0px));
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 14px;
  min-width: 158px;
  background:
    linear-gradient(180deg, rgba(28,28,28,0.85) 0%, rgba(12,12,12,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 30px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  white-space: nowrap;
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease, transform 240ms ease;
  animation: card-float 6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
@keyframes card-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
.conn-card:hover {
  border-color: rgba(254,69,28,0.6);
  background: linear-gradient(180deg, rgba(40,20,12,0.9) 0%, rgba(20,10,6,0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 36px rgba(254,69,28,0.28),
    0 0 0 1px rgba(254,69,28,0.45);
}
.conn-card .logo {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.conn-card .logo svg { width: 100%; height: 100%; display: block; }
.conn-card .text { display: flex; flex-direction: column; line-height: 1.15; }
.conn-card .name { font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -0.005em; }
.conn-card .kind {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.20em; color: rgba(255,255,255,0.42);
  margin-top: 4px; text-transform: uppercase;
}
.conn-card.any {
  border: 1.5px dashed rgba(254,69,28,0.65);
  background: linear-gradient(180deg, rgba(40,20,12,0.6) 0%, rgba(20,10,6,0.6) 100%);
  padding: 14px 22px 14px 14px;
}
.conn-card.any .name { color: #fff; font-size: 15.5px; }
.conn-card.any .kind { color: var(--accent); font-weight: 700; }

/* Particles */
.scene-3d .particle {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(254,69,28,0.95), 0 0 14px rgba(254,69,28,0.45);
  pointer-events: none;
  animation: particle-drift linear infinite;
  opacity: 0;
}
@keyframes particle-drift {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0); }
  15%  { opacity: 0.95; }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(0, -280px, 0); }
}

/* Section-level scaling for narrower viewports */
@media (max-width: 1180px) { .scene-3d { --scene-scale: 0.85; height: 720px; } }
@media (max-width: 980px)  { .scene-3d { --scene-scale: 0.7;  height: 640px; } }
@media (max-width: 760px) {
  .scene-3d { --scene-scale: 1; height: auto; padding: 32px 0; }
  .scene-3d__inner { transform: none !important; height: auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }
  .scene-3d .streaks, .scene-3d .bloom, .scene-3d .particle { display: none; }
  .t-device { position: static; transform: none; width: 240px; height: 300px; padding: 16px; }
  .t-glyph { width: 84px; height: 84px; }
  .conn-card { position: static; transform: none !important; animation: none; left: auto; top: auto; min-width: 0; }
  .scene-3d__mobile-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    width: 100%; padding: 0 8px;
  }
}
@media (min-width: 761px) { .scene-3d__mobile-grid { display: contents; } }

/* ── Shimmer effect for CTAs ──────────────────────────────────────────────── */
.btn-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 25%,
    rgba(255,255,255,0.50) 50%,
    transparent 75%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 800ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 1;
}
.btn-shimmer:hover::after { transform: translateX(130%) skewX(-12deg); }
.btn-shimmer > * { position: relative; z-index: 2; }

/* Apply shimmer treatment by default to all primary book-a-demo surfaces */
.t-nav__links a.t-nav__cta,
.t-nav a.t-nav__cta,
.pill.primary,
.pill.ghost.shimmer-ghost,
.email-form button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.t-nav__links a.t-nav__cta::after,
.t-nav a.t-nav__cta::after,
.pill.primary::after,
.pill.ghost.shimmer-ghost::after,
.email-form button::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%);
  transform: translateX(-130%) skewX(-14deg);
  transition: transform 800ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 1;
}
.pill.ghost.shimmer-ghost::after {
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(0,0,0,0.10) 50%,
    transparent 70%);
}
.t-nav__links a.t-nav__cta:hover::after,
.t-nav a.t-nav__cta:hover::after,
.pill.primary:hover::after,
.pill.ghost.shimmer-ghost:hover::after,
.email-form button:hover::after {
  transform: translateX(130%) skewX(-14deg);
}
.t-nav__links a.t-nav__cta > *,
.t-nav a.t-nav__cta > *,
.pill.primary > *,
.pill.ghost.shimmer-ghost > *,
.email-form button > * { position: relative; z-index: 2; }
.pill.ghost.shimmer-ghost,
.pill.ghost.shimmer-ghost:hover {
  background: #fff !important; color: var(--ink) !important; border-color: var(--ink) !important;
}

/* ── Connector constellation (legacy symbolic visual) ─────────────────────── */
.constellation {
  position: relative;
  width: 100%; aspect-ratio: 16/9; max-height: 640px;
  background: var(--dark);
  border-radius: 0;
  overflow: hidden;
  color: #fff;
}
.constellation__grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, #000 0%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 50%, transparent 100%);
}
.constellation__orbit {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.constellation__node {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}
.constellation__node .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.7);
}
.constellation__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(254,69,28,0.35) 0%, rgba(254,69,28,0.05) 50%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
}
.constellation__center .mark {
  width: 88px; height: 88px;
  background: var(--dark); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(254,69,28,0.45);
}
.constellation__caption {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.constellation__caption strong { color: #fff; font-weight: 700; }

/* ── Testimonial ───────────────────────────────────────────────────────────── */
.testimonial {
  max-width: 920px; margin: 0 auto;
  text-align: left;
}
.testimonial blockquote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.18; letter-spacing: -0.018em;
  margin: 32px 0 40px; color: var(--ink);
}
.testimonial blockquote em { font-style: italic; color: var(--accent); }
.testimonial .who {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid var(--rule); padding-top: 24px;
}
.testimonial .who .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper-warm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
}
.testimonial .who .meta { font-family: var(--font-body); font-size: 14.5px; color: var(--ink); }
.testimonial .who .meta .role { color: var(--muted); }

/* ── Footer (4-col) ────────────────────────────────────────────────────────── */
.t-footer {
  background: var(--ink); color: #fff;
  padding: 96px 48px 36px;
}
@media (max-width: 700px) {
  .t-footer { padding: 80px 32px 32px; }
}
.t-footer__inner { max-width: 1320px; margin: 0 auto; }
.t-footer__top { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.10); margin-bottom: 56px; }
.t-footer__brand { display: flex; align-items: center; gap: 12px; }
.t-footer__brand .name {
  font-family: var(--font-display); font-weight: 400; font-size: 24px;
  letter-spacing: -0.005em; color: #fff;
}
.t-footer__brand .tag {
  margin-top: 16px; font-size: 14.5px; color: rgba(255,255,255,0.65);
  line-height: 1.55; max-width: 44ch;
}
.t-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px;
  margin-bottom: 80px;
}
.t-footer__grid .col h4 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin: 0 0 20px;
}
.t-footer__grid .col a {
  display: block; color: #fff; opacity: 0.85;
  font-size: 15px; margin: 10px 0;
  transition: color 160ms ease, opacity 160ms ease;
}
.t-footer__grid .col a:hover { color: var(--accent); opacity: 1; }
.t-footer__grid .brand .name {
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  letter-spacing: -0.005em; color: #fff; margin: 14px 0 16px;
}
.t-footer__grid .brand .tag {
  font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.68);
  max-width: 36ch;
}
.t-footer__bottom {
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
@media (max-width: 900px) { .t-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .t-footer__grid .brand { grid-column: span 2; } }
@media (max-width: 560px) { .t-footer__grid { grid-template-columns: 1fr; } .t-footer__grid .brand { grid-column: span 1; } }

/* ── Section utility ───────────────────────────────────────────────────────── */
.section-head { max-width: 880px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.98; letter-spacing: -0.026em;
  margin: 0; max-width: 18ch;
}
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head .sub {
  margin-top: 24px; font-size: 17px; line-height: 1.6;
  color: var(--ink-soft); max-width: 58ch;
}
.t-section.dark .section-head h2 { color: #fff; }
.t-section.dark .section-head .sub { color: rgba(255,255,255,0.78); }

/* ── Architecture preview block ────────────────────────────────────────────── */
.arch-preview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.arch-preview h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.026em;
  margin: 18px 0 28px; max-width: 14ch;
}
.arch-preview h2 em { font-style: italic; color: var(--accent); }
.arch-preview p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; max-width: 50ch; }
@media (max-width: 900px) { .arch-preview { grid-template-columns: 1fr; gap: 48px; } }

/* ── Mark utility ─────────────────────────────────────────────────────────── */
.tmark { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ── Hero (homepage centered) ─────────────────────────────────────────────── */
.hero-home {
  position: relative; overflow: hidden;
  background: var(--paper);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 28px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 800px) { .hero-home { padding: 64px 24px 0; } }
.hero-home .bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-home .bg video {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.32;
}
.hero-home .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.65) 100%);
  pointer-events: none;
}
.hero-home .inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; text-align: center;
}
.hero-home .eyebrow { justify-content: center; }
.hero-home h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3.2rem, 9vw, 9rem); line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 28px auto 0; max-width: 14ch;
}
.hero-home h1 em { font-style: italic; font-weight: 300; color: var(--accent); }
.hero-home .sub {
  margin: 36px auto 0;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55;
  color: var(--ink-soft); max-width: 56ch;
}
.hero-home .email-form.full,
.hero-home form.email-form {
  margin-top: 72px;
}
.hero-home .actions {
  margin: 48px auto 0;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
}
.hero-home .trust {
  margin-top: 28px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Reveal helper (CSS-only) ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
 * TIER 1 + 2 SIZZLE
 * Subtle motion. Compound effects. Performance-budget aware.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1.1 · Hero headline word-by-word reveal ──────────────────────────────── */
.hero-home h1 .word {
  display: inline-block;
  white-space: nowrap;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 720ms cubic-bezier(.2, .7, .2, 1),
    filter  720ms cubic-bezier(.2, .7, .2, 1),
    transform 720ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.hero-home h1.pre-reveal .word {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
}
.hero-home h1.in .word {
  opacity: 1; filter: blur(0); transform: translateY(0);
}
/* Reset em so JS-wrapped child word inherits accent + italic */
.hero-home h1 em { display: inline; white-space: nowrap; }

/* Sub + form fade slightly after the headline (defaults visible — JS adds .lit) */
.hero-home .sub,
.hero-home .email-form,
.hero-home .trust {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 800ms cubic-bezier(.2, .7, .2, 1),
    transform 800ms cubic-bezier(.2, .7, .2, 1);
}
.hero-home.lit .sub   { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.hero-home.lit .email-form { opacity: 1; transform: translateY(0); transition-delay: 760ms; }
.hero-home.lit .trust { opacity: 1; transform: translateY(0); transition-delay: 880ms; }

/* ── 1.2 · Email form focus state + button arrow ──────────────────────────── */
.email-form {
  transition: border-color 280ms ease, box-shadow 360ms cubic-bezier(.2, .7, .2, 1);
}
.email-form:focus-within {
  border-color: rgba(254,69,28,0.55);
  box-shadow: 0 0 0 4px rgba(254,69,28,0.10), 0 8px 24px -10px rgba(254,69,28,0.25);
}
.t-section.dark .email-form:focus-within {
  border-color: rgba(254,140,80,0.7);
  box-shadow: 0 0 0 4px rgba(254,69,28,0.18), 0 8px 28px -10px rgba(254,69,28,0.45);
}
.email-form button .arrow {
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}
.email-form:focus-within button .arrow,
.email-form button:hover .arrow {
  transform: translateX(4px);
}

/* ── 1.3 · Hero video gentle parallax (JS sets --pY) ──────────────────────── */
.hero-home .bg video {
  transform: translate3d(0, var(--pY, 0px), 0);
  transition: transform 80ms linear;
  will-change: transform;
}

/* ── 1.4 · Nav T-mark breath ──────────────────────────────────────────────── */
.t-nav__logo .tmark rect:first-child {
  transform-origin: center; transform-box: fill-box;
  animation: tmark-bar-breath 5.2s ease-in-out infinite;
}
.t-nav__logo:hover .tmark rect:first-child {
  animation: tmark-bar-breath 2.4s ease-in-out infinite;
}
@keyframes tmark-bar-breath {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.6px); }
}

/* ── 1.5 · Scroll progress hairline — REMOVED ─────────────────────────────── */
.scroll-progress { display: none !important; }

/* ── 1.6 · Nav compression on scroll ──────────────────────────────────────── */
.t-nav { transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease, box-shadow 360ms ease; }
.t-nav__inner { transition: padding 320ms cubic-bezier(.4, 0, .2, 1); }
.t-nav.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.18);
}
.t-nav.scrolled .t-nav__inner { padding: 12px 28px; }

/* ── 2.7 · Cluster numerals — tick on enter ──────────────────────────────── */
.cluster__numeral { display: inline-flex; align-items: baseline; }
.cluster__numeral .num-flip {
  display: inline-block;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 480ms cubic-bezier(.22, 1, .36, 1), opacity 480ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0ms);
}
.cluster__numeral.lit .num-flip {
  transform: translateY(0); opacity: 1;
}

/* ── 2.8 · Feature dot vertical thread ───────────────────────────────────── */
.cluster__text { position: relative; }
.cluster__features {
  position: relative;
}
.cluster__features::before {
  content: '';
  position: absolute;
  left: 9px; top: 18px; bottom: 18px; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(254,69,28,0.45) 18%, rgba(254,69,28,0.45) 82%, transparent 100%);
  transform-origin: top center;
  transform: scaleY(var(--thread, 0));
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

/* ── 2.9 · Problem quote — left border draws on enter ────────────────────── */
.cluster__problem {
  position: relative;
  border-left: 0;
  padding-left: 26px;
}
.cluster__problem::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform-origin: top center; transform: scaleY(0);
  transition: transform 820ms cubic-bezier(.22, 1, .36, 1);
}
.cluster__problem.lit::before { transform: scaleY(1); }

/* ── 2.10 · Cluster images — Ken Burns ───────────────────────────────────── */
.money-image img,
.cluster-image img {
  animation: kenburns 18s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}
.cluster.reverse .cluster-image img { animation-direction: alternate-reverse; }
@keyframes kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.035) translate(-4px, -3px); }
}

/* ── 2.11 · Outcome lift on enter + em color resolve ─────────────────────── */
.cluster__outcome {
  position: relative;
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.38; letter-spacing: -0.013em;
  color: var(--ink);
  max-width: 38ch;
  margin: 40px 0 0;
  padding: 22px 0 22px 28px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 720ms cubic-bezier(.22, 1, .36, 1),
    transform 720ms cubic-bezier(.22, 1, .36, 1);
}
.cluster__outcome::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--accent);
  transform-origin: top center; transform: scaleY(0);
  transition: transform 820ms cubic-bezier(.22, 1, .36, 1) 200ms;
}
.cluster__outcome.lit {
  opacity: 1; transform: translateY(0);
}
.cluster__outcome.lit::before { transform: scaleY(1); }
.cluster__outcome em {
  font-style: italic; font-weight: 400;
  color: var(--ink-2);
  transition: color 600ms cubic-bezier(.4, 0, .2, 1);
  transition-delay: 420ms;
}
.cluster__outcome.lit em { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
 * TIER 5 · INTERACTION POLISH
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 18 · Pressure depression on all pills + nav CTA */
.pill,
.t-nav__cta,
.email-form button,
.manifesto-link {
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1),
              background-color 200ms ease,
              color 200ms ease,
              border-color 200ms ease;
}
.pill:active,
.t-nav__cta:active,
.email-form button:active,
.manifesto-link:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* 19 · Cursor halo — small orange dot that follows the cursor, grows on interactive hover */
.cursor-halo {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(254,69,28,0.55);
  box-shadow: 0 0 12px rgba(254,69,28,0.35);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  opacity: 0;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    width 220ms cubic-bezier(.22, 1, .36, 1),
    height 220ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
  z-index: 999;
  mix-blend-mode: normal;
}
.cursor-halo.visible { opacity: 1; }
.cursor-halo.over {
  width: 36px; height: 36px;
  border-color: rgba(254,69,28,0.8);
  background: rgba(254,69,28,0.06);
}
@media (hover: none), (pointer: coarse) { .cursor-halo { display: none !important; } }

/* 20 · Underline-whip on in-body links (essay, manifesto-link already covered) */
.essay a,
.faq__item .a a {
  position: relative;
  color: var(--accent);
  padding-bottom: 2px;
}
.essay a::after,
.faq__item .a a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 520ms cubic-bezier(.7, 0, .25, 1);
}
.essay a:hover::after,
.faq__item .a a:hover::after {
  transform-origin: right center;
  animation: link-underline 700ms cubic-bezier(.7, 0, .25, 1) forwards;
}

/* 21 · Page transition fade — JS toggles body.is-leaving on internal nav */
body { transition: opacity 220ms ease; }
body.is-leaving { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * TIER 6 · LUXURY LAYER
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 24 · Slow eyebrow blink (1.4s, was 1.1s) */
.eyebrow .u { animation-duration: 1.4s !important; }

/* 25 · Footer brand wordmark heartbeat */
.t-footer .brand .name,
.t-footer .brand > div > span {
  display: inline-block;
  animation: footer-pulse 5.2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes footer-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.992); opacity: 0.92; }
}

/* 26 · Mouse-position ambient light on dark sections (JS sets --lx, --ly) */
.t-section.dark { position: relative; isolation: isolate; }
.t-section.dark::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    600px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(255,255,255,0.045),
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 480ms ease;
  z-index: 0;
}
.t-section.dark:hover::before { opacity: 1; }
.t-section.dark > * { position: relative; z-index: 1; }

/* ── prefers-reduced-motion — kill Tier 5/6 motion as well ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pill, .t-nav__cta, .email-form button, .manifesto-link,
  .cursor-halo, .t-footer .brand .name, .t-footer .brand > div > span,
  .t-section.dark::before {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home h1 .word,
  .hero-home .sub,
  .hero-home .email-form,
  .hero-home .trust,
  .cluster__numeral .num-flip,
  .cluster__features::before,
  .cluster__problem::before,
  .cluster__outcome,
  .cluster__outcome em,
  .stat-num .count,
  .stat-cell::after,
  .connector-image img,
  .arch-preview img,
  .arch-preview .manifesto-link .arr {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TIER 3 · STATS BAND POLISH
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 12 · Light-bar sweep along the bottom of each cell on intersection */
.stat-cell { position: relative; }
.stat-cell::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--sweep-d, 0ms);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(254,69,28,0.55));
}
.stats-section.lit .stat-cell::after { transform: scaleX(1); }

/* 13 · Count blurs in, resolves to focus */
.stat-num .count {
  filter: blur(0);
  transition: filter 1.4s cubic-bezier(.22, 1, .36, 1);
}
.stat-num .count.resolving { filter: blur(8px); }

/* 14 · Cell hover — focus the hovered, dim the others */
.stats-grid:hover .stat-cell {
  transition: opacity 360ms cubic-bezier(.22, 1, .36, 1), transform 360ms cubic-bezier(.22, 1, .36, 1);
  opacity: 0.55;
}
.stats-grid:hover .stat-cell:hover {
  opacity: 1;
}
.stats-grid:hover .stat-cell:hover .stat-num { transform: translateY(-2px); }
.stat-num { transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }

/* ═══════════════════════════════════════════════════════════════════════════
 * TIER 4 · CONNECTOR IMAGE + ARCHITECTURE
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 15 · Connector PNG — slow orbital drift */
.connector-image img {
  animation: connector-drift 22s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes connector-drift {
  0%   { transform: rotate(-0.4deg) translate(-3px, 2px); }
  50%  { transform: rotate(0.2deg)  translate(2px, -2px); }
  100% { transform: rotate(0.4deg)  translate(3px,  2px); }
}

/* 16 · Cursor-aware parallax (JS sets --mx, --my on parent section) */
.cluster__visual .money-image img,
.cluster__visual .cluster-image img,
.arch-preview .viz {
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}
[data-parallax] .money-image img,
[data-parallax] .cluster-image img {
  transform: translate3d(
    calc(var(--mx, 0) * 8px),
    calc(var(--my, 0) * 6px),
    0
  );
}
[data-parallax] .viz {
  transform: translate3d(
    calc(var(--mx, 0) * 10px),
    calc(var(--my, 0) * 8px),
    0
  );
}

/* 17 · Manifesto arrow — looping nudge */
.arch-preview .manifesto-link .arr,
.manifesto-link .arr {
  display: inline-block;
  animation: arrow-nudge 2.6s ease-in-out infinite;
}
@keyframes arrow-nudge {
  0%, 60%, 100% { transform: translateX(0); opacity: 1; }
  30%           { transform: translateX(4px); opacity: 0.85; }
}
/* Kickers on sub-pages — blinking underscore + slide-in on reveal */
.editorial-split .copy .kicker,
.editorial-single .kicker,
.chapter__body .kicker {
  position: relative;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 620ms cubic-bezier(.22, 1, .36, 1),
    transform 620ms cubic-bezier(.22, 1, .36, 1);
}
.editorial-split .copy.in .kicker,
.editorial-single.in .kicker,
.chapter.in .chapter__body .kicker {
  opacity: 1;
  transform: translateX(0);
}
/* Blinking underscore prefix replaces literal "_" — animates like eyebrows */
.editorial-split .copy .kicker::before,
.editorial-single .kicker::before,
.chapter__body .kicker::before {
  content: '_';
  display: inline-block;
  margin-right: 4px;
  animation: tblink 1.4s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SIZZLE — apply homepage scroll reveals to sub-pages
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Page-hero headline — word-by-word reveal (matches homepage h1 treatment) */
.page-hero h1 .word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition:
    opacity 720ms cubic-bezier(.2, .7, .2, 1),
    filter  720ms cubic-bezier(.2, .7, .2, 1),
    transform 720ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.page-hero h1.in .word { opacity: 1; filter: blur(0); transform: translateY(0); }
.page-hero h1 em { display: inline; }

/* Hero supporting content cascade */
.page-hero .lede,
.page-hero .email-form {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 800ms cubic-bezier(.2, .7, .2, 1),
    transform 800ms cubic-bezier(.2, .7, .2, 1);
}
.page-hero.lit .lede { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.page-hero.lit .email-form { opacity: 1; transform: translateY(0); transition-delay: 760ms; }

/* Generic [data-reveal] — fade + lift on intersection */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 880ms cubic-bezier(.22, 1, .36, 1),
    transform 880ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* Editorial blocks reveal smoothly */
.editorial-split .copy,
.editorial-split .placeholder-frame,
.editorial-split .interactive-diagram,
.editorial-split .creative-diagram,
.editorial-single,
.big-pullquote,
.doctrine,
.feature-card,
.metric-tile,
.diagram-strip,
.interactive-diagram,
.creative-diagram,
.uc-nav a,
.final-cta,
.chapter,
.signature,
.inline-cta-quiet {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 820ms cubic-bezier(.22, 1, .36, 1),
    transform 820ms cubic-bezier(.22, 1, .36, 1);
}
.editorial-split .copy.in,
.editorial-split .placeholder-frame.in,
.editorial-split .interactive-diagram.in,
.editorial-split .creative-diagram.in,
.editorial-single.in,
.big-pullquote.in,
.doctrine.in,
.feature-card.in,
.metric-tile.in,
.diagram-strip.in,
.interactive-diagram.in,
.creative-diagram.in,
.uc-nav a.in,
.final-cta.in,
.chapter.in,
.signature.in,
.inline-cta-quiet.in {
  opacity: 1; transform: translateY(0);
}
.page-hero .creative-diagram.in,
.creative-diagram.in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Chapter numeral — drop and tilt slightly when chapter intersects */
.chapter .chapter__num {
  opacity: 0;
  transform: translateY(-30px) rotate(-3deg);
  transition: opacity 920ms cubic-bezier(.22, 1, .36, 1), transform 1080ms cubic-bezier(.22, 1, .36, 1);
}
.chapter.in .chapter__num { opacity: 1; transform: translateY(0) rotate(0); }

/* Diagram-strip steps stagger in */
.diagram-strip.in .step {
  animation: step-in 620ms cubic-bezier(.22, 1, .36, 1) both;
}
.diagram-strip.in .step:nth-child(1) { animation-delay: 80ms; }
.diagram-strip.in .step:nth-child(2) { animation-delay: 160ms; }
.diagram-strip.in .step:nth-child(3) { animation-delay: 240ms; }
.diagram-strip.in .step:nth-child(4) { animation-delay: 320ms; }
.diagram-strip.in .step:nth-child(5) { animation-delay: 400ms; }
.diagram-strip.in .step:nth-child(6) { animation-delay: 480ms; }
.diagram-strip.in .step:nth-child(7) { animation-delay: 560ms; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Feature grid + metric grid — stagger by child */
.feature-grid .feature-card:nth-child(1) { transition-delay: 0ms; }
.feature-grid .feature-card:nth-child(2) { transition-delay: 80ms; }
.feature-grid .feature-card:nth-child(3) { transition-delay: 160ms; }
.feature-grid .feature-card:nth-child(4) { transition-delay: 240ms; }
.feature-grid .feature-card:nth-child(5) { transition-delay: 320ms; }
.feature-grid .feature-card:nth-child(6) { transition-delay: 400ms; }
.metric-grid .metric-tile:nth-child(1) { transition-delay: 0ms; }
.metric-grid .metric-tile:nth-child(2) { transition-delay: 100ms; }
.metric-grid .metric-tile:nth-child(3) { transition-delay: 200ms; }
.uc-nav a:nth-child(1) { transition-delay: 0ms; }
.uc-nav a:nth-child(2) { transition-delay: 90ms; }
.uc-nav a:nth-child(3) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .page-hero h1 .word, .page-hero .lede, .page-hero .email-form,
  [data-reveal],
  .editorial-split .copy, .editorial-split .placeholder-frame, .editorial-split .interactive-diagram, .editorial-split .creative-diagram,
  .editorial-single, .big-pullquote, .doctrine, .feature-card, .metric-tile,
  .diagram-strip, .interactive-diagram, .creative-diagram, .uc-nav a, .final-cta, .chapter, .signature, .inline-cta-quiet,
  .chapter .chapter__num {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important; animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MANIFESTO — essay-style chapter layout
 * ═══════════════════════════════════════════════════════════════════════════ */

.chapter {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 48px;
  max-width: 1080px; margin: 0 auto;
}
.chapter__num {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(64px, 8vw, 128px); line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-align: right;
  position: sticky; top: 120px; align-self: start;
}
.chapter__body { max-width: 640px; }
.chapter__body .kicker {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.chapter__body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.06; letter-spacing: -0.02em;
  margin: 0 0 32px;
  max-width: 22ch;
}
.chapter__body h2 em { font-style: italic; color: var(--accent); }
.chapter__body p {
  font-size: 18px; line-height: 1.68; color: var(--ink-soft);
  margin: 0 0 22px;
}
.chapter__body p > em { color: var(--accent); font-style: italic; }
.chapter__body strong { color: var(--ink); font-weight: 600; }

/* Drop-cap on the first paragraph of a chapter */
.chapter__body .drop-cap::first-letter {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 5.2em; line-height: 0.88;
  float: left;
  padding: 0.04em 0.08em 0 0;
  color: var(--accent);
}

/* Small-caps opening (works alongside drop-cap) */
.chapter__body .drop-cap::first-line {
  font-variant: small-caps; letter-spacing: 0.04em;
}

/* Marginalia — floats RIGHT inside the body column (no overlap with sticky numeral) */
.chapter__body .margin-note {
  display: block;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 14px; line-height: 1.45;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 14px;
  margin: 8px 0 18px 32px;
  max-width: 220px;
  float: right;
  clear: both;
  shape-outside: margin-box;
}
.chapter__body .margin-note::before {
  content: '— ';
  font-style: normal;
  color: var(--accent);
}

@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; gap: 0; }
  .chapter__num {
    position: static; text-align: left;
    font-size: clamp(56px, 12vw, 80px);
    margin-bottom: 18px;
  }
  .chapter__body { max-width: 100%; }
  .chapter__body .margin-note {
    float: none; margin: 28px 0;
    max-width: 100%;
  }
}

/* Doctrine — dark/inverted variant */
.doctrine.invert {
  max-width: 1080px;
  padding: 24px;
  background: transparent;
  border-radius: 0;
  margin: 0 auto;
}
.t-section.dark .doctrine.invert blockquote { color: #fff; }
.t-section.dark .doctrine.invert .attribution { color: rgba(255,255,255,0.55); }

/* Manifesto signature (replaces final CTA's loud band) */
.signature {
  max-width: 760px; margin: 0 auto; text-align: center;
}
.signature::before {
  content: '';
  display: block;
  width: 56px; height: 1.5px;
  background: var(--accent);
  margin: 0 auto 32px;
}
.signature p {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.32; letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 16px;
}
.signature p:last-child { margin-bottom: 0; }
.signature p em { font-style: italic; color: var(--accent); }
.signature .signoff {
  margin-top: 36px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* Manifesto cleanup: quieter essay treatments, scoped away from use-case pullquotes */
.manifesto-page {
  background: var(--paper-cream);
}
.manifesto-page .t-section:not(.dark) {
  background: var(--paper-cream);
}
.manifesto-page .t-section.warm,
.manifesto-page .t-section.soft {
  background: var(--paper-cream);
}
.manifesto-page .placeholder-frame,
.manifesto-page .feature-card,
.manifesto-page .uc-nav a {
  background-color: rgba(255,255,255,0.68);
}
.manifesto-page .feature-card,
.manifesto-page .uc-nav a,
.manifesto-page .placeholder-frame {
  box-shadow: 0 16px 40px -34px rgba(10,10,10,0.38);
}
.manifesto-hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  min-height: 480px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}
.manifesto-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@media (max-width: 960px) {
  .manifesto-hero-art { min-height: 360px; aspect-ratio: 5/4; }
}
.manifesto-page .chapter__num {
  font-size: clamp(52px, 6vw, 92px);
  letter-spacing: -0.025em;
  color: rgba(254,69,28,0.82);
}
.manifesto-page .chapter__body .drop-cap::first-letter {
  float: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-style: inherit;
  color: inherit;
}
.manifesto-page .chapter__body .drop-cap::first-line {
  font-variant: normal;
  letter-spacing: 0;
}
.manifesto-page .doctrine::before {
  display: none;
}
.manifesto-page .doctrine {
  max-width: 860px;
}
.manifesto-page .doctrine blockquote {
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.manifesto-page .doctrine .attribution {
  display: none;
}
.manifesto-page .doctrine.invert {
  padding: 8px 0;
}
.manifesto-page .signature {
  max-width: 700px;
  text-align: left;
}
.manifesto-page .signature::before {
  width: 40px;
  margin-left: 0;
  margin-bottom: 24px;
}
.manifesto-page .signature p {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* Inline CTA (quiet alternative to .final-cta) */
.inline-cta-quiet {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 28px 36px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.inline-cta-quiet .text {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  line-height: 1.3; color: var(--ink);
  flex: 1;
}
.inline-cta-quiet .text em { font-style: italic; color: var(--accent); }
.inline-cta-quiet .email-form { flex: 0 1 auto; }
.inline-cta-quiet .email-form input { width: 200px; }
@media (max-width: 700px) {
  .inline-cta-quiet { flex-direction: column; gap: 18px; padding: 24px; }
  .inline-cta-quiet .email-form input { width: 100%; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * USE CASES v2 — Code · Infrastructure · Analyst
 * Typed lines · flow stages · metric tiles · doctrine pullquotes
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Typed-mono opening line */
.typed-line {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(254,69,28,0.06);
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent-tint);
  margin-bottom: 28px;
  max-width: 56ch;
  white-space: normal;
  overflow: hidden;
}
.typed-line .caret {
  display: inline-block;
  width: 7px; height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: caret-blink 1.05s steps(2, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Doctrine pull-quote (orange dot + quote) */
.doctrine {
  max-width: 1080px; margin: 0 auto; text-align: center;
}
.doctrine::before {
  content: ''; display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  margin: 0 auto 28px;
  box-shadow: 0 0 0 6px rgba(254,69,28,0.10);
}
.doctrine blockquote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--ink); margin: 0; border: 0; padding: 0;
}
.doctrine blockquote em { font-style: italic; font-weight: 300; color: var(--accent); }
.doctrine .attribution {
  margin-top: 28px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* Metric tiles — 3-up in "What this unlocks" */
.metric-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 48px;
}
@media (max-width: 800px) { .metric-grid { grid-template-columns: 1fr; } }
.metric-tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: border-color 320ms ease, transform 320ms ease, box-shadow 320ms ease;
}
.metric-tile:hover {
  border-color: var(--ink); transform: translateY(-2px);
  box-shadow: 0 20px 40px -28px rgba(0,0,0,0.16);
}
.metric-tile .m-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(44px, 4.4vw, 64px); line-height: 1;
  letter-spacing: -0.024em;
  color: var(--accent);
  display: inline-flex; align-items: baseline;
  margin-bottom: 16px;
  white-space: nowrap;
}
.metric-tile .m-num .pfx,
.metric-tile .m-num .sfx { font-size: 0.45em; opacity: 0.85; }
.metric-tile .m-num .pfx { margin-right: 3px; }
.metric-tile .m-num .sfx { margin-left: 4px; }
.metric-tile .m-num .count { font-variant-numeric: tabular-nums; }
.metric-tile .m-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.metric-tile .m-cap {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}

/* Flow stage — shared signature-visual container */
.flow-stage {
  position: relative; width: 100%;
  aspect-ratio: 4/5;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.flow-stage.warm { background: var(--paper-warm); }
.flow-stage .fs-tag {
  position: absolute; top: 16px; left: 20px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.flow-stage .fs-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(254,69,28,0.12);
}
.flow-stage .fs-meta {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2);
}
.flow-stage .fs-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 85%);
}
.flow-stage svg.fs-svg {
  position: relative; z-index: 1;
  width: 92%; height: auto; max-height: 80%;
}

/* ── Code-agent signature: capability mint flow ──────────────────────────── */
.cap-flow {
  position: relative; width: 92%; height: 80%;
}
.cap-flow .node {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 138px; padding: 18px 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,0.12);
  text-align: center;
}
.cap-flow .node .lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.cap-flow .node .name {
  font-family: var(--font-display); font-weight: 400; font-size: 17px;
  letter-spacing: -0.012em; color: var(--ink);
}
.cap-flow .node .empty {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--accent);
  margin-top: 8px; padding: 4px 8px; border: 1px dashed var(--accent-tint);
  border-radius: 4px;
  background: rgba(254,69,28,0.04);
}
.cap-flow .node.agent { left: 0; }
.cap-flow .node.gate  { left: 50%; transform: translate(-50%, -50%); background: var(--ink); color: #fff; border-color: var(--ink); }
.cap-flow .node.gate .lbl { color: rgba(255,255,255,0.55); }
.cap-flow .node.gate .name { color: #fff; }
.cap-flow .node.dest  { right: 0; }
.cap-flow .rail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: linear-gradient(90deg,
    transparent 0%, rgba(254,69,28,0.35) 10%, rgba(254,69,28,0.35) 90%, transparent 100%);
  z-index: 0;
}
.cap-flow .token {
  position: absolute; top: 50%;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--accent); color: #fff;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(254,69,28,0.55);
  transform: translate(-50%, -50%);
  animation: token-fly 6s cubic-bezier(.5, 0, .3, 1) infinite;
  opacity: 0;
}
.cap-flow .token:nth-child(5) { animation-delay: 0s; }
.cap-flow .token:nth-child(6) { animation-delay: 2s; }
.cap-flow .token:nth-child(7) { animation-delay: 4s; }
@keyframes token-fly {
  0%    { left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  8%    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%   { left: calc(100% - 70px); opacity: 1; }
  100%  { left: calc(100% - 70px); opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
.cap-flow .below {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.cap-flow .below strong { color: var(--accent); }

/* ── Infrastructure-agent signature: budget envelope ─────────────────────── */
.envelope {
  position: relative; width: 88%;
  padding: 32px 28px 24px;
}
.envelope .frame {
  position: relative;
  height: 64px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.envelope .bars { position: absolute; inset: 6px; display: flex; gap: 3px; }
.envelope .bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: bar-grow 8s ease-in-out infinite;
}
.envelope .bar.a { width: 4%;  animation-delay: 0.6s; background: #FFC4AC; }
.envelope .bar.b { width: 38%; animation-delay: 1.2s; background: var(--accent); }
.envelope .bar.c { width: 16%; animation-delay: 2.0s; background: #FFA585; }
.envelope .bar.d { width: 2%;  animation-delay: 2.6s; background: #FFC4AC; }
@keyframes bar-grow {
  0%, 8%   { opacity: 0; transform: scaleX(0); }
  18%      { opacity: 1; transform: scaleX(1); }
  80%      { opacity: 1; transform: scaleX(1); }
  90%      { opacity: 1; }
  100%     { opacity: 0; transform: scaleX(1); }
}
.envelope .axis {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.envelope .legend {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
}
.envelope .legend-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.envelope .legend-item .swatch {
  width: 12px; height: 12px; border-radius: 3px;
}
.envelope .legend-item .cost { margin-left: auto; color: var(--accent); font-weight: 700; }
.envelope .running {
  margin-top: 22px;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 18px; border-top: 1px dashed var(--rule-strong);
}
.envelope .running .lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.envelope .running .val {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  color: var(--accent);
}

/* ── Analyst-agent signature: sealed enclave ─────────────────────────────── */
.enclave {
  position: relative; width: 92%; height: 86%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.enclave .pane {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.enclave .pane .pl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.enclave .pane .pl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.enclave .pane.sealed { background: var(--ink); border-color: var(--ink); color: #fff; }
.enclave .pane.sealed .pl { color: rgba(255,255,255,0.5); }
.enclave .pane.sealed .pl::before { background: #FFE3CE; }
.enclave .col {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft);
  padding: 5px 8px;
  background: var(--paper-soft);
  border-radius: 3px;
  display: flex; justify-content: space-between;
}
.enclave .pane.sealed .col {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.78);
}
.enclave .col .ty {
  color: var(--accent); font-weight: 700; font-size: 9px;
  letter-spacing: 0.10em;
}
.enclave .pane.sealed .col .ty { color: #FFB791; }
.enclave .row {
  font-family: var(--font-mono); font-size: 10px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  filter: blur(4px);
  user-select: none;
  display: flex; justify-content: space-between;
  color: rgba(255,255,255,0.65);
}
.enclave .row .redact {
  display: inline-block; height: 8px; width: 60px;
  background: rgba(255,255,255,0.2); border-radius: 2px;
}
.enclave .plan-chip {
  position: absolute; top: 50%; left: 22%;
  transform: translate(-50%, -50%);
  padding: 7px 12px;
  background: var(--accent); color: #fff;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(254,69,28,0.55);
  z-index: 3;
  opacity: 0;
  animation: plan-fly 7s ease-in-out infinite;
}
.enclave .result-chip {
  position: absolute; top: 65%; left: 78%;
  transform: translate(-50%, -50%);
  padding: 7px 12px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--accent);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.18);
  z-index: 3;
  opacity: 0;
  animation: result-fly 7s ease-in-out infinite;
  animation-delay: 3s;
}
@keyframes plan-fly {
  0%   { left: 22%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 78%; opacity: 1; }
  55%  { left: 78%; opacity: 0; }
  100% { left: 22%; opacity: 0; }
}
@keyframes result-fly {
  0%   { left: 78%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 22%; opacity: 1; }
  55%  { left: 22%; opacity: 0; }
  100% { left: 78%; opacity: 0; }
}

/* ── Customer-facing-agent signature: policy gate ────────────────────────── */
.policy-gate {
  position: relative;
  width: 88%;
  height: 84%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.policy-gate .gate-stack {
  width: min(290px, 76%);
  display: grid;
  gap: 14px;
}
.policy-gate .gate-row {
  position: relative;
  height: 52px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.policy-gate .gate-row::before,
.policy-gate .gate-row::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--rule-strong);
}
.policy-gate .gate-row::before { left: -24px; }
.policy-gate .gate-row::after { right: -24px; }
.policy-gate .gate-row.deny {
  border-color: var(--accent);
  background: rgba(254,69,28,0.08);
  color: var(--accent);
  box-shadow: 0 0 0 6px rgba(254,69,28,0.05);
}
.policy-gate .gate-row.muted {
  opacity: 0.42;
}
.policy-gate .ticket {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.25);
}
.policy-gate .ticket.trusted {
  background: var(--ink);
  color: #fff;
  animation: ticket-pass 7s ease-in-out infinite;
}
.policy-gate .ticket.untrusted {
  background: var(--accent);
  color: #fff;
  animation: ticket-deny 7s ease-in-out infinite;
}
.policy-gate .policy-caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes ticket-pass {
  0%, 8% { top: 20px; opacity: 0; }
  14% { opacity: 1; }
  70% { top: calc(100% - 108px); opacity: 1; }
  84%, 100% { top: calc(100% - 108px); opacity: 0; }
}
@keyframes ticket-deny {
  0%, 12% { top: 20px; opacity: 0; }
  18% { opacity: 1; }
  52% { top: 50%; opacity: 1; }
  62% { top: 50%; opacity: 1; transform: translateX(-50%) scale(1.06); }
  76%, 100% { top: 50%; opacity: 0; transform: translateX(-50%) scale(0.96); }
}

/* ── PR-review-agent signature: skill registry ───────────────────────────── */
.skill-registry {
  position: relative;
  width: 86%;
  display: grid;
  gap: 14px;
}
.skill-registry .skill-card {
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px -18px rgba(0,0,0,0.22);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.skill-registry .skill-card.muted {
  transform: scale(0.96);
  opacity: 0.66;
}
.skill-registry .skill-card.active {
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: 0 18px 40px -20px rgba(254,69,28,0.45);
}
.skill-registry .skill-card.active::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  pointer-events: none;
  animation: registry-pulse 3s ease-in-out infinite;
}
.skill-registry .skill-name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.skill-registry .skill-card.active span {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skill-registry .registry-caption {
  margin-top: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes registry-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(254,69,28,0.2); }
  50% { box-shadow: 0 0 0 8px rgba(254,69,28,0.04); }
}

/* ── Feature-flag-agent signature: conditional ramp ─────────────────────── */
.ramp-stage {
  position: relative;
  width: 88%;
  display: grid;
  gap: 28px;
}
.ramp-stage .ramp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ramp-stage .ramp-steps span {
  position: relative;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.ramp-stage .ramp-steps span:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.ramp-stage .ramp-steps .held {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(254,69,28,0.08);
}
.ramp-stage .ramp-chart {
  position: relative;
  height: 150px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.ramp-stage .threshold-line {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 46px;
  border-top: 1px dashed var(--accent);
}
.ramp-stage .ramp-chart svg {
  position: absolute;
  inset: 12px 12px 18px;
  width: calc(100% - 24px);
  height: calc(100% - 30px);
  overflow: visible;
}
.ramp-stage .ramp-chart path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.ramp-stage .ramp-ok {
  stroke: var(--ink);
}
.ramp-stage .ramp-spike {
  stroke: var(--accent);
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: spike-draw 5s ease-in-out infinite;
}
.ramp-stage .ramp-chart circle {
  fill: var(--ink);
}
.ramp-stage .ramp-chart .spike-dot {
  fill: var(--accent);
  animation: dot-pulse 5s ease-in-out infinite;
}
.ramp-stage .chart-label {
  position: absolute;
  top: 30px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ramp-stage .ramp-caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes spike-draw {
  0%, 20% { stroke-dashoffset: 180; opacity: 0; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  78% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes dot-pulse {
  0%, 38% { opacity: 0; transform: scale(0.8); transform-origin: center; }
  48% { opacity: 1; transform: scale(1.25); }
  78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .typed-line .caret,
  .cap-flow .token,
  .envelope .bar,
  .enclave .plan-chip,
  .enclave .result-chip,
  .policy-gate .ticket,
  .skill-registry .skill-card.active::after,
  .ramp-stage .ramp-spike,
  .ramp-stage .ramp-chart .spike-dot { animation: none !important; }
  .cap-flow .token,
  .enclave .plan-chip,
  .enclave .result-chip,
  .policy-gate .ticket { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SUB-PAGE REBUILD — full-bleed sections matching homepage rhythm
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Placeholder image frame */
.placeholder-frame {
  position: relative; width: 100%;
  background: var(--paper-soft);
  border: 1px dashed var(--rule-strong);
  border-radius: 16px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--muted);
  overflow: hidden;
  aspect-ratio: var(--ar, 16/9);
}
.placeholder-frame.warm  { background: var(--paper-warm); }
.placeholder-frame.cream { background: var(--paper-cream); }
.placeholder-frame.dark  {
  background: var(--dark-soft);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.55);
}
.placeholder-frame .ph-cross {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(10,10,10,0.10) calc(50% - 0.5px), rgba(10,10,10,0.10) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top right,    transparent calc(50% - 0.5px), rgba(10,10,10,0.10) calc(50% - 0.5px), rgba(10,10,10,0.10) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  opacity: 0.6;
}
.placeholder-frame.dark .ph-cross {
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(255,255,255,0.08) calc(50% - 0.5px), rgba(255,255,255,0.08) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top right,    transparent calc(50% - 0.5px), rgba(255,255,255,0.08) calc(50% - 0.5px), rgba(255,255,255,0.08) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.placeholder-frame .ph-label {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 18px;
  background: rgba(255,255,255,0.85);
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  text-align: center;
  max-width: 78%;
  line-height: 1.5;
}
.placeholder-frame.dark .ph-label {
  background: rgba(10,10,10,0.55);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
}
.placeholder-frame .ph-label .sub {
  display: block; margin-top: 8px; font-weight: 500;
  font-size: 10px; letter-spacing: 0.14em; color: var(--muted);
}
.placeholder-frame.dark .ph-label .sub { color: rgba(255,255,255,0.5); }
.placeholder-frame .ph-tag {
  position: absolute; top: 16px; left: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.placeholder-frame .ph-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.placeholder-frame .ph-meta {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2);
}
.placeholder-frame.dark .ph-meta { color: rgba(255,255,255,0.4); }

/* Interactive diagrams replacing placeholder frames */
.interactive-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4/5);
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 20%, rgba(254,69,28,0.10), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(250,250,248,0.78));
  box-shadow: 0 22px 70px -52px rgba(10,10,10,0.42);
  color: var(--ink);
}
.t-section.dark .interactive-diagram {
  background:
    radial-gradient(circle at 20% 18%, rgba(254,69,28,0.18), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}
.idg--wide { min-height: 320px; }
.idg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 26%, transparent 88%);
  pointer-events: none;
}
.t-section.dark .idg__grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
}
.idg__tag,
.idg__meta {
  position: absolute; top: 16px; z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.idg__tag {
  left: 20px;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.idg__tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(254,69,28,0.10);
}
.idg__meta {
  right: 20px;
  color: var(--muted-2);
}
.t-section.dark .idg__meta { color: rgba(255,255,255,0.44); }
.idg__panel {
  position: absolute;
  inset: 52px 24px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}
.idg__header {
  max-width: 88%;
}
.idg__header span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.idg__header strong {
  display: block;
  margin-top: 8px;
  max-width: 42ch;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}
.t-section.dark .idg__header strong { color: rgba(255,255,255,0.58); }
.idg__canvas {
  position: relative;
  min-height: 190px;
}
.idg__rail {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 52%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
  transform-origin: center;
  animation: idg-rail 5s ease-in-out infinite;
}
.idg__rail--b {
  top: 58%;
  transform: rotate(-18deg);
  opacity: 0.28;
  animation-delay: -1.8s;
}
.idg__node {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  width: clamp(112px, 24%, 150px);
  min-height: 72px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,0.88);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 12px 30px -24px rgba(10,10,10,0.38);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 180ms ease;
}
.idg__node:hover,
.idg__node:focus-visible,
.idg__node.is-active {
  border-color: var(--accent);
  box-shadow: 0 14px 36px -22px rgba(254,69,28,0.55), 0 0 0 3px rgba(254,69,28,0.10);
  transform: translate(-50%, -50%) scale(1.04);
  outline: 0;
}
.t-section.dark .idg__node {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.idg__node-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.idg__node-detail {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
.t-section.dark .idg__node-detail { color: rgba(255,255,255,0.58); }
.idg__node--ok .idg__node-label,
.idg__node--trusted .idg__node-label { color: #16824A; }
.idg__node--warn .idg__node-label { color: #B46E00; }
.idg__node--danger .idg__node-label,
.idg__node--deny .idg__node-label { color: var(--accent); }
.idg__node--deny,
.idg__node--danger {
  background: rgba(254,69,28,0.09);
  border-color: rgba(254,69,28,0.42);
}
.idg__node--muted { opacity: 0.72; }
.idg__caption {
  position: relative;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--muted);
}
.t-section.dark .idg__caption {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.60);
}
.idg--risk .idg__rail { background: linear-gradient(90deg, transparent, #B46E00, var(--accent), transparent); }
.idg--architecture .idg__rail,
.idg--hero .idg__rail { opacity: 0.56; }
.idg--flag-hero .idg__canvas::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; bottom: 17%;
  height: 52px;
  border-top: 1px dashed var(--accent);
  background:
    linear-gradient(90deg, rgba(22,130,74,0.16) 0 48%, rgba(254,69,28,0.18) 48% 100%);
  border-radius: 0 0 12px 12px;
  opacity: 0.72;
}
.idg--flag-hero .idg__node--deny {
  animation: idg-deny-pulse 3.8s ease-in-out infinite;
}
@keyframes idg-rail {
  0%, 100% { opacity: 0.22; transform: scaleX(0.78); }
  50% { opacity: 0.58; transform: scaleX(1); }
}
@keyframes idg-deny-pulse {
  0%, 100% { box-shadow: 0 12px 30px -24px rgba(10,10,10,0.38), 0 0 0 0 rgba(254,69,28,0); }
  50% { box-shadow: 0 14px 36px -22px rgba(254,69,28,0.65), 0 0 0 7px rgba(254,69,28,0.08); }
}
@media (max-width: 720px) {
  .interactive-diagram { min-height: 390px; }
  .idg--wide { aspect-ratio: 4/5 !important; }
  .idg__panel { inset: 50px 18px 18px; }
  .idg__header { max-width: 100%; }
  .idg__header span { font-size: 25px; }
  .idg__node {
    width: 128px;
    min-height: 70px;
    padding: 10px;
  }
  .idg__node-detail { font-size: 11.5px; }
  .idg__caption { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .idg__rail,
  .idg--flag-hero .idg__node--deny {
    animation: none !important;
  }
}

/* Creative diagram families: distinct metaphors per use case */
.creative-diagram {
  position: relative;
  width: 100%;
  min-height: 580px;
  aspect-ratio: 4/5;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.editorial-split.reverse .creative-diagram,
.cd--risk { aspect-ratio: 5/4; min-height: 420px; }
.cd__tag,
.cd__meta {
  position: absolute; top: 16px; z-index: 5;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.cd__tag {
  left: 0; color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
}
.cd__tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(254,69,28,0.10);
}
.cd__meta { right: 0; color: var(--muted-2); }
.cd__title {
  position: absolute; left: 0; right: 0; top: 52px; z-index: 4;
  max-width: 90%;
}
.cd__title span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.cd__title strong {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  line-height: 1.5; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted);
}
.cd__stage {
  position: absolute; inset: 180px 0 72px;
}
.cd__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase;
  color: var(--muted);
}
.cd__point {
  position: absolute; z-index: 4;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  min-width: 104px; max-width: 150px;
  padding: 10px 11px;
  border: 1px solid rgba(10,10,10,0.12);
  border-radius: 9px;
  background: rgba(255,255,255,0.88);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 32px -25px rgba(10,10,10,0.45);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.cd__point:hover,
.cd__point:focus-visible,
.cd__point.is-active {
  outline: 0;
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 16px 36px -22px rgba(254,69,28,0.58), 0 0 0 3px rgba(254,69,28,0.10);
}
.cd__point span {
  display: block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.cd__point small {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.3; color: var(--muted);
}
.cd__point--ok span,
.cd__point--trusted span { color: #16824A; }
.cd__point--warn span { color: #A66400; }
.cd__point--danger span,
.cd__point--deny span { color: var(--accent); }
.cd__point--danger,
.cd__point--deny { background: rgba(254,69,28,0.10); border-color: rgba(254,69,28,0.38); }
.cd__point--muted { opacity: 0.72; }

.branch-diagram {
  background:
    linear-gradient(90deg, rgba(250,250,248,0.92), rgba(255,255,255,0.92)),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(10,10,10,0.035) 25px);
}
.branch-art { position: absolute; inset: 0; }
.branch-art span {
  position: absolute; left: 6%; right: 6%; height: 31%;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
}
.branch-art span:first-child { top: 17%; }
.branch-art span:nth-child(2) { bottom: 12%; border-color: rgba(254,69,28,0.38); background: rgba(254,69,28,0.055); }
.branch-art i {
  position: absolute; top: 18%; bottom: 13%; left: 52%; width: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(254,69,28,0.08);
}
.branch-diagram .cd__point { border-radius: 999px; }

.blast-map,
.blast-diagram {
  background:
    radial-gradient(circle at 50% 55%, rgba(254,69,28,0.14), transparent 32%),
    radial-gradient(circle at 74% 28%, rgba(10,10,10,0.06), transparent 24%),
    var(--paper-soft);
}
.blast-art { position: absolute; inset: 4% 6% 0; }
.blast-art span {
  position: absolute; width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(10,10,10,0.12);
  background: rgba(255,255,255,0.68);
}
.blast-art span:nth-child(1){ left:8%; top:26%; }
.blast-art span:nth-child(2){ left:42%; top:8%; }
.blast-art span:nth-child(3){ right:8%; top:36%; }
.blast-art span:nth-child(4){ left:30%; bottom:10%; }
.blast-art span:nth-child(5){ right:22%; bottom:18%; }
.blast-art i {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px;
  transform: translate(-50%,-50%);
  border: 1px dashed rgba(254,69,28,0.46);
  border-radius: 50%;
  animation: blast-ring 4.8s ease-in-out infinite;
}
.blast-map .cd__point,
.blast-diagram .cd__point { border-radius: 50%; min-width: 94px; min-height: 94px; text-align: center; }

.sealed-chamber,
.sealed-diagram {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.95) 0 45%, rgba(10,10,10,0.92) 45% 100%);
}
.sealed-chamber .cd__title span,
.sealed-diagram .cd__title span { color: var(--ink); }
.sealed-chamber .cd__stage,
.sealed-diagram .cd__stage { inset-right: 18px; }
.sealed-art { position: absolute; inset: 0; }
.sealed-art span {
  position: absolute; left: 45%; top: 4%; bottom: 4%; width: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 10px rgba(254,69,28,0.10);
}
.sealed-art i {
  position: absolute; right: 9%; top: 20%; width: 42%; height: 54%;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 8px, transparent 8px 18px);
}
.sealed-art b {
  position: absolute; left: 42%; top: 48%; width: 48px; height: 18px;
  border-radius: 999px; background: var(--accent);
}
.sealed-chamber .cd__point:nth-of-type(n+3),
.sealed-diagram .cd__point:nth-of-type(n+3) { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.18); }
.sealed-chamber .cd__point:nth-of-type(n+3) small,
.sealed-diagram .cd__point:nth-of-type(n+3) small { color: rgba(255,255,255,0.64); }

.inbox-gate,
.inbox-diagram {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,242,236,0.8));
}
.inbox-art {
  position: absolute; left: 8%; right: 8%; top: 25%; bottom: 24%;
  display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px;
}
.inbox-art span {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.inbox-art span:nth-child(3) { border-color: rgba(254,69,28,0.55); color: var(--accent); }
.inbox-gate .cd__point,
.inbox-diagram .cd__point { border-radius: 6px; }

.skill-memory,
.skill-diagram {
  background:
    radial-gradient(circle at 22% 26%, rgba(254,69,28,0.11), transparent 28%),
    linear-gradient(135deg, #fff, var(--paper-cream));
}
.skill-art { position: absolute; inset: 12% 10% 10%; }
.skill-art span {
  position: absolute; left: 22%; right: 12%; height: 72px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(255,255,255,0.74);
  box-shadow: 0 16px 36px -32px rgba(10,10,10,0.5);
  transform: rotate(var(--r, -2deg));
}
.skill-art span:nth-child(1){ top: 5%; --r:-5deg; }
.skill-art span:nth-child(2){ top: 25%; left:16%; --r:3deg; }
.skill-art span:nth-child(3){ top: 45%; left:24%; --r:-1deg; border-color: rgba(254,69,28,0.4); }
.skill-art span:nth-child(4){ top: 65%; left:12%; --r:4deg; }
.skill-memory .cd__point,
.skill-diagram .cd__point { border-radius: 12px; }

.rollout-cockpit,
.cockpit-diagram {
  background:
    linear-gradient(180deg, #111, #0A0A0A);
  color: #fff;
}
.rollout-cockpit .cd__title strong,
.rollout-cockpit .cd__meta,
.cockpit-diagram .cd__title strong,
.cockpit-diagram .cd__meta { color: rgba(255,255,255,0.55); }
.cockpit-art { position: absolute; inset: 5% 7% 4%; }
.cockpit-art .screen {
  position: absolute; left: 0; right: 0; top: 12%; height: 48%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(22,130,74,0.22) 0 54%, rgba(254,69,28,0.24) 54% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px);
}
.cockpit-art .meter {
  position: absolute; bottom: 10%; width: 30%; height: 72px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
  background: rgba(255,255,255,0.06);
}
.cockpit-art .m1 { left: 0; }
.cockpit-art .m2 { left: 34%; }
.cockpit-art .switch {
  position: absolute; right: 0; bottom: 10%; width: 30%; height: 72px;
  border: 1px solid rgba(254,69,28,0.55);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent);
}
.rollout-cockpit .cd__point,
.cockpit-diagram .cd__point {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}
.rollout-cockpit .cd__point small,
.cockpit-diagram .cd__point small { color: rgba(255,255,255,0.62); }
.rollout-cockpit .cd__caption,
.cockpit-diagram .cd__caption {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.65);
}

.runtime-boundary,
.boundary-diagram {
  background:
    linear-gradient(90deg, #fff 0 48%, #0A0A0A 48% 100%);
}
.boundary-art { position: absolute; inset: 9% 9% 6%; display: grid; grid-template-columns: 1fr 16px 1fr; align-items: center; gap: 18px; }
.boundary-art span {
  height: 58%;
  border: 1px solid var(--rule);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.boundary-art span:last-child { color: #fff; border-color: rgba(255,255,255,0.16); }
.boundary-art i {
  height: 88%; background: var(--accent);
  box-shadow: 0 0 0 12px rgba(254,69,28,0.12);
}
.runtime-boundary .cd__point:nth-of-type(n+3),
.boundary-diagram .cd__point:nth-of-type(n+3) {
  background: rgba(255,255,255,0.10);
  color: #fff; border-color: rgba(255,255,255,0.18);
}
.runtime-boundary .cd__point:nth-of-type(n+3) small,
.boundary-diagram .cd__point:nth-of-type(n+3) small { color: rgba(255,255,255,0.64); }
.runtime-boundary .cd__caption,
.boundary-diagram .cd__caption { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.68); border-color: rgba(255,255,255,0.12); }

@keyframes blast-ring {
  0%, 100% { transform: translate(-50%,-50%) scale(0.86); opacity: 0.35; }
  50% { transform: translate(-50%,-50%) scale(1.05); opacity: 0.75; }
}
@media (max-width: 720px) {
  .creative-diagram,
  .editorial-split.reverse .creative-diagram,
  .cd--risk {
    aspect-ratio: 4/5;
    min-height: 400px;
  }
  .cd__title { max-width: 100%; }
  .cd__title span { font-size: 24px; }
  .cd__stage { inset: 130px 16px 86px; }
  .cd__point { min-width: 94px; max-width: 125px; padding: 9px; }
  .cd__point small { font-size: 11px; }
  .cd__caption { font-size: 9.3px; }
}
@media (prefers-reduced-motion: reduce) {
  .blast-art i { animation: none !important; }
}

/* Sub-page hero (full-bleed split) */
.page-hero { padding: 120px 0 96px; }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px; align-items: center;
}
.page-hero__grid > * { min-width: 0; }
@media (max-width: 960px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: 56px; }
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 0.98; letter-spacing: -0.028em;
  margin: 28px 0 0; max-width: 16ch;
}
.page-hero h1 em { font-style: italic; font-weight: 300; color: var(--accent); }
.page-hero .lede { margin-top: 32px; max-width: 52ch; }

/* Editorial section — text + image split */
.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
@media (min-width: 961px) {
  .editorial-split.reverse > :first-child { order: 2; }
  .editorial-split.reverse > :last-child  { order: 1; }
}
@media (max-width: 960px) {
  .editorial-split { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .editorial-split > .copy       { order: 1; }
  .editorial-split > :not(.copy) { order: 2; }
}
.editorial-split .copy h2,
.editorial-single h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.04; letter-spacing: -0.022em;
  margin: 0 0 24px;
  max-width: 22ch;
}
.editorial-split .copy h2 em,
.editorial-single h2 em { font-style: italic; color: var(--accent); }
.editorial-split .copy .kicker,
.editorial-single .kicker {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.editorial-split .copy p,
.editorial-single p {
  font-size: 17.5px; line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 20px; max-width: 60ch;
}
.editorial-split .copy p > em,
.editorial-single p > em { color: var(--accent); font-style: italic; }
.editorial-split .copy strong,
.editorial-single strong { color: var(--ink); font-weight: 600; }
.editorial-single .lede-line {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.4; color: var(--ink);
  margin: 0 0 32px; max-width: 38ch;
}
.editorial-single { max-width: 960px; margin: 0 auto; }

/* Big pullquote — used as section divider */
.big-pullquote {
  max-width: 1080px; margin: 0 auto; text-align: center;
}
.big-pullquote blockquote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.10; letter-spacing: -0.022em;
  color: var(--ink); margin: 0; border: 0; padding: 0;
}
.big-pullquote blockquote em {
  font-style: italic; font-weight: 300; color: var(--accent);
}
.big-pullquote .attribution {
  margin-top: 32px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.t-section.dark .big-pullquote blockquote { color: #fff; }

/* Feature card grid */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  padding: 36px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  display: flex; flex-direction: column;
  transition: border-color 320ms ease, transform 320ms ease, box-shadow 320ms ease;
}
.feature-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,0.18);
}
.feature-card .num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px;
}
.feature-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.18; letter-spacing: -0.014em;
  margin: 0 0 12px;
}
.feature-card p {
  font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}

/* Final CTA */
.final-cta { text-align: center; max-width: 920px; margin: 0 auto; }
.final-cta .eyebrow { justify-content: center; }
.final-cta h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.98; letter-spacing: -0.026em;
  margin: 22px auto 0; max-width: 18ch;
  color: var(--ink);
}
.final-cta h2 em { font-style: italic; color: var(--accent); }
.final-cta .lede {
  margin: 32px auto 0; color: var(--ink-soft); max-width: 52ch;
}
.final-cta .email-form { margin: 40px auto 0; }
/* Dark variant (legacy) */
.t-section.dark .final-cta h2 { color: #fff; }
.t-section.dark .final-cta .lede { color: rgba(255,255,255,0.78); }

/* Final-CTA section provides a clean visual break before the dark footer */
.final-cta-section { border-bottom: 1px solid var(--rule); }

/* Dark section text overrides */
.t-section.dark .editorial-single p,
.t-section.dark .editorial-split .copy p { color: rgba(255,255,255,0.78); }
.t-section.dark .editorial-single h2,
.t-section.dark .editorial-split .copy h2 { color: #fff; }
.t-section.dark .editorial-single strong,
.t-section.dark .editorial-split .copy strong { color: #fff; }
.t-section.dark .editorial-single .lede-line { color: #fff; }

/* ────────────────────────────────────────────────────────────────────────────
   USE-CASE DIAGRAMS — bespoke per-section visuals
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Code agent · Scenario — side-branch git graph held at authority ───── */
.codeagent-scenario .cas-svg { width: 100%; height: 100%; display: block; }
.codeagent-scenario .cas-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.codeagent-scenario .cas-lbl--accent { fill: var(--accent); }
.codeagent-scenario .cas-branch {
  fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.4;
}
.codeagent-scenario .cas-flow {
  opacity: 1; stroke-dasharray: 2 6;
  animation: casFlow 1.6s linear infinite;
}
@keyframes casFlow { to { stroke-dashoffset: -16; } }
.codeagent-scenario .cas-node { fill: var(--accent); }
.codeagent-scenario .cas-node-lbl {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-anchor: middle;
}
.codeagent-scenario .cas-blocked {
  stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 3;
}
.codeagent-scenario .cas-auth-box {
  fill: #fff; stroke: var(--accent); stroke-width: 1.2;
}
.codeagent-scenario .cas-auth-tx {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--accent); text-anchor: middle;
}
.codeagent-scenario .cas-lock-body {
  fill: none; stroke: var(--accent); stroke-width: 1.1;
}
.codeagent-scenario .cas-lock-shackle {
  fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round;
}
.codeagent-scenario .cas-faded {
  stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55;
}
.codeagent-scenario .cas-main {
  stroke: var(--rule-strong); stroke-width: 1.6;
}
.codeagent-scenario .cas-main-nodes circle { fill: var(--muted-2); }

/* ── Code agent · Risk — credential bus radiating to every surface ───── */
.codeagent-risk .car-svg { width: 100%; height: 100%; display: block; }
.codeagent-risk .car-bus {
  stroke: var(--accent); stroke-width: 1.8;
  opacity: 0.4;
}
.codeagent-risk .car-bus-flow {
  opacity: 1; stroke-dasharray: 3 7;
  animation: carBusFlow 2s linear infinite;
}
@keyframes carBusFlow { to { stroke-dashoffset: -20; } }
.codeagent-risk .car-branch {
  stroke: var(--accent); stroke-width: 1.2; opacity: 0.55;
}
.codeagent-risk .car-chip {
  fill: #fff; stroke: var(--accent); stroke-width: 1.2;
}
.codeagent-risk .car-chip-tx {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-anchor: middle;
  dominant-baseline: middle;
}
.codeagent-risk .car-dots circle { fill: var(--accent); }
.codeagent-risk .car-token {
  fill: var(--accent); stroke: none;
}
.codeagent-risk .car-token-name {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.10em; fill: #fff; text-anchor: middle;
}
.codeagent-risk .car-token-meta {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: rgba(255,255,255,0.78); text-anchor: middle;
}
.codeagent-risk .car-corner {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}

/* ── Code agent · Architecture — vertical capability pipeline ───── */
.codeagent-arch .caa-svg { width: 100%; height: 100%; display: block; }
.codeagent-arch .caa-stage-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.codeagent-arch .caa-stage-lbl--accent { fill: var(--accent); }
.codeagent-arch .caa-card {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.codeagent-arch .caa-code {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  fill: var(--ink);
}
.codeagent-arch .caa-code-dim {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  fill: var(--muted);
}
.codeagent-arch .caa-flow {
  stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 3 4;
  animation: caaFlow 1.8s linear infinite;
}
.codeagent-arch .caa-flow--accent {
  stroke: var(--accent); stroke-width: 1.6;
}
@keyframes caaFlow { to { stroke-dashoffset: -14; } }
.codeagent-arch .caa-arrow { fill: var(--muted); }
.codeagent-arch .caa-arrow--accent { fill: var(--accent); }
.codeagent-arch .caa-check-bubble {
  fill: rgba(254,69,28,0.10); stroke: var(--accent); stroke-width: 1;
}
.codeagent-arch .caa-check-mark {
  fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round;
  stroke-linejoin: round;
}
.codeagent-arch .caa-check-tx {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  fill: var(--ink);
}
.codeagent-arch .caa-mint-card {
  fill: var(--accent); stroke: none;
  animation: caaMintPulse 3s ease-in-out infinite;
}
@keyframes caaMintPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(254,69,28,0)); }
  50% { filter: drop-shadow(0 0 16px rgba(254,69,28,0.55)); }
}
.codeagent-arch .caa-mint-name {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; fill: #fff; text-anchor: middle;
}
.codeagent-arch .caa-mint-meta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: rgba(255,255,255,0.85); text-anchor: middle;
}
.codeagent-arch .caa-exec {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  fill: var(--ink);
}
.codeagent-arch .caa-exec-meta {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--muted); text-transform: uppercase;
}

/* ── Infrastructure agent · Scenario — command → resource envelope ──── */
.infra-scenario .ifs-svg { width: 100%; height: 100%; display: block; }
.infra-scenario .ifs-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.infra-scenario .ifs-lbl--accent { fill: var(--accent); }
.infra-scenario .ifs-cmd {
  fill: var(--accent); stroke: none;
}
.infra-scenario .ifs-cmd-tx {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; fill: #fff;
}
.infra-scenario .ifs-cmd-tx-dim {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  fill: rgba(255,255,255,0.82);
}
.infra-scenario .ifs-flow {
  stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 3 4;
  animation: ifsFlow 1.8s linear infinite;
}
.infra-scenario .ifs-flow--accent { stroke: var(--accent); stroke-width: 1.6; }
@keyframes ifsFlow { to { stroke-dashoffset: -14; } }
.infra-scenario .ifs-arrow { fill: var(--muted); }
.infra-scenario .ifs-arrow--accent { fill: var(--accent); }
.infra-scenario .ifs-env {
  fill: rgba(254,69,28,0.04);
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.infra-scenario .ifs-stamp {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent);
}
.infra-scenario .ifs-res {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.infra-scenario .ifs-icon {
  fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round;
}
.infra-scenario .ifs-icon-line {
  fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round;
  stroke-linejoin: round;
}
.infra-scenario .ifs-icon-dot { fill: var(--accent); }
.infra-scenario .ifs-res-lbl {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--ink); text-anchor: middle;
}
.infra-scenario .ifs-url {
  fill: rgba(10,10,10,0.04); stroke: var(--rule-strong); stroke-width: 1;
}
.infra-scenario .ifs-url-tx {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; fill: var(--ink); text-anchor: middle;
  dominant-baseline: middle;
}

/* ── Infrastructure agent · Risk — IAM badge radiating to cloud ───── */
.infra-risk .ifr-svg { width: 100%; height: 100%; display: block; }
.infra-risk .ifr-line {
  stroke: var(--accent); stroke-width: 1; opacity: 0.35;
}
.infra-risk .ifr-line-flow {
  stroke: var(--accent); stroke-width: 1.2; fill: none;
  stroke-dasharray: 2 6;
  animation: ifrFlow 2s linear infinite;
}
@keyframes ifrFlow { to { stroke-dashoffset: -16; } }
.infra-risk .ifr-chip {
  fill: #fff; stroke: var(--accent); stroke-width: 1.2;
}
.infra-risk .ifr-chip-tx {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-anchor: middle;
  dominant-baseline: middle;
}
.infra-risk .ifr-badge {
  fill: var(--accent); stroke: none;
}
.infra-risk .ifr-badge-name {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; fill: #fff; text-anchor: middle;
}
.infra-risk .ifr-badge-meta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; fill: rgba(255,255,255,0.80); text-anchor: middle;
}
.infra-risk .ifr-corner {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.infra-risk .ifr-corner--accent { fill: var(--accent); }

/* ── Infrastructure agent · Architecture — envelope + nested capability ──── */
.infra-arch .ifa-svg { width: 100%; height: 100%; display: block; }
.infra-arch .ifa-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.infra-arch .ifa-lbl--accent { fill: var(--accent); }
.infra-arch .ifa-req {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.infra-arch .ifa-req-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  fill: var(--ink);
}
.infra-arch .ifa-flow {
  stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 3 4;
  animation: ifaFlow 1.8s linear infinite;
}
.infra-arch .ifa-flow--accent { stroke: var(--accent); stroke-width: 1.6; }
@keyframes ifaFlow { to { stroke-dashoffset: -14; } }
.infra-arch .ifa-arrow { fill: var(--muted); }
.infra-arch .ifa-arrow--accent { fill: var(--accent); }
.infra-arch .ifa-env {
  fill: rgba(254,69,28,0.04);
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.infra-arch .ifa-stamp {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent);
}
.infra-arch .ifa-nested-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted); text-anchor: middle;
}
.infra-arch .ifa-cap {
  fill: var(--accent); stroke: none;
  animation: ifaCapPulse 3s ease-in-out infinite;
}
@keyframes ifaCapPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(254,69,28,0)); }
  50% { filter: drop-shadow(0 0 16px rgba(254,69,28,0.55)); }
}
.infra-arch .ifa-cap-name {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.12em; fill: #fff; text-anchor: middle;
}
.infra-arch .ifa-cap-meta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: rgba(255,255,255,0.85); text-anchor: middle;
}
.infra-arch .ifa-exec {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  fill: var(--ink);
}
.infra-arch .ifa-exec-meta {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--muted); text-transform: uppercase;
}

/* ── Analyst agent · Scenario — sealed chamber, rows stay inside ───── */
.analyst-scenario .ans-svg { width: 100%; height: 100%; display: block; }
.analyst-scenario .ans-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.analyst-scenario .ans-lbl--accent { fill: var(--accent); }
.analyst-scenario .ans-q {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.analyst-scenario .ans-q-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink);
}
.analyst-scenario .ans-q-tx-dim {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--muted);
}
.analyst-scenario .ans-flow {
  stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 3 4;
  animation: ansFlow 1.8s linear infinite;
}
.analyst-scenario .ans-flow--accent { stroke: var(--accent); stroke-width: 1.6; }
@keyframes ansFlow { to { stroke-dashoffset: -14; } }
.analyst-scenario .ans-arrow { fill: var(--muted); }
.analyst-scenario .ans-arrow--accent { fill: var(--accent); }
.analyst-scenario .ans-chamber {
  fill: rgba(254,69,28,0.03);
  stroke: var(--accent); stroke-width: 1.2;
}
.analyst-scenario .ans-seal {
  fill: var(--accent); stroke: none;
}
.analyst-scenario .ans-seal-tx {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}
.analyst-scenario .ans-section {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.analyst-scenario .ans-schema-row {
  fill: rgba(10,10,10,0.04); stroke: var(--rule-strong); stroke-width: 0.8;
}
.analyst-scenario .ans-col {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  fill: var(--ink);
}
.analyst-scenario .ans-rows rect {
  fill: var(--accent); opacity: 0.18;
}
.analyst-scenario .ans-rows rect:nth-child(2) { opacity: 0.15; }
.analyst-scenario .ans-rows rect:nth-child(3) { opacity: 0.20; }
.analyst-scenario .ans-rows rect:nth-child(4) { opacity: 0.14; }
.analyst-scenario .ans-rows rect:nth-child(5) { opacity: 0.17; }
.analyst-scenario .ans-compute {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-anchor: middle;
  text-transform: uppercase;
  animation: ansPulse 1.6s ease-in-out infinite;
}
@keyframes ansPulse { 50% { opacity: 0.45; } }
.analyst-scenario .ans-result {
  fill: var(--accent); stroke: none;
}
.analyst-scenario .ans-result-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}

/* ── Analyst agent · Risk — model context bloated with PII tags ────── */
.analyst-risk .anr-svg { width: 100%; height: 100%; display: block; }
.analyst-risk .anr-corner {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.analyst-risk .anr-corner--accent { fill: var(--accent); }
.analyst-risk .anr-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.analyst-risk .anr-q { fill: #fff; stroke: var(--rule-strong); stroke-width: 1; }
.analyst-risk .anr-q-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink);
}
.analyst-risk .anr-q-tx-dim {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--muted);
}
.analyst-risk .anr-flow {
  stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 6;
  animation: anrFlow 1.8s linear infinite;
}
@keyframes anrFlow { to { stroke-dashoffset: -18; } }
.analyst-risk .anr-arrow { fill: var(--accent); }
.analyst-risk .anr-flow-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-transform: uppercase;
}
.analyst-risk .anr-ctx {
  fill: rgba(254,69,28,0.04); stroke: var(--accent); stroke-width: 1.2;
}
.analyst-risk .anr-tag {
  fill: #fff; stroke: var(--accent); stroke-width: 1;
}
.analyst-risk .anr-tag-kind {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-anchor: middle;
}
.analyst-risk .anr-tag-meta {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.10em; fill: var(--muted); text-anchor: middle;
}

/* ── Analyst agent · Architecture — PLAN above seal, EXECUTE below ── */
.analyst-arch .ana-svg { width: 100%; height: 100%; display: block; }
.analyst-arch .ana-zone-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.analyst-arch .ana-zone-lbl--accent { fill: var(--accent); }
.analyst-arch .ana-zone-box {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.analyst-arch .ana-zone-box--plan { fill: rgba(254,69,28,0.025); }
.analyst-arch .ana-zone-box--exec { fill: rgba(254,69,28,0.05); stroke: var(--accent); stroke-width: 1.2; }
.analyst-arch .ana-section {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.analyst-arch .ana-schema-row {
  fill: rgba(10,10,10,0.04); stroke: var(--rule-strong); stroke-width: 0.8;
}
.analyst-arch .ana-col {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; fill: var(--ink);
}
.analyst-arch .ana-plan {
  fill: rgba(10,10,10,0.04); stroke: var(--rule); stroke-width: 0.8;
}
.analyst-arch .ana-code {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--ink);
}
.analyst-arch .ana-seal-line {
  stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 5 4;
}
.analyst-arch .ana-seal-badge {
  fill: var(--accent); stroke: none;
}
.analyst-arch .ana-seal-tx {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}
.analyst-arch .ana-rows rect { fill: var(--accent); opacity: 0.20; }
.analyst-arch .ana-rows rect:nth-child(even) { opacity: 0.16; }
.analyst-arch .ana-compute {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-anchor: middle; text-transform: uppercase;
  animation: anaPulse 1.6s ease-in-out infinite;
}
@keyframes anaPulse { 50% { opacity: 0.45; } }
.analyst-arch .ana-flow {
  stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 4;
  animation: anaFlow 1.8s linear infinite;
}
@keyframes anaFlow { to { stroke-dashoffset: -14; } }
.analyst-arch .ana-arrow { fill: var(--accent); }
.analyst-arch .ana-result {
  fill: var(--accent); stroke: none;
}
.analyst-arch .ana-result-tx {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}

/* ── Customer-facing agent · Scenario — inbox + $48K refund ───────── */
.cfa-scenario .cfs-svg { width: 100%; height: 100%; display: block; }
.cfa-scenario .cfs-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.cfa-scenario .cfs-lbl--accent { fill: var(--accent); }
.cfa-scenario .cfs-ticket {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.cfa-scenario .cfs-ticket--bad {
  stroke: var(--accent); stroke-width: 1.6;
}
.cfa-scenario .cfs-from {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--muted); text-transform: uppercase;
}
.cfa-scenario .cfs-from--bad { fill: var(--accent); }
.cfa-scenario .cfs-subj {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; fill: var(--ink);
}
.cfa-scenario .cfs-subj--bad { fill: var(--accent); font-weight: 600; }
.cfa-scenario .cfs-time {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; fill: var(--muted);
}
.cfa-scenario .cfs-time--bad { fill: var(--accent); }
.cfa-scenario .cfs-pick {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--accent); text-transform: uppercase;
}
.cfa-scenario .cfs-flow {
  stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 4;
  animation: cfsFlow 1.8s linear infinite;
}
@keyframes cfsFlow { to { stroke-dashoffset: -14; } }
.cfa-scenario .cfs-arrow { fill: var(--accent); }
.cfa-scenario .cfs-action {
  fill: var(--accent); stroke: none;
  animation: cfsActionPulse 3s ease-in-out infinite;
}
@keyframes cfsActionPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(254,69,28,0)); }
  50% { filter: drop-shadow(0 0 16px rgba(254,69,28,0.5)); }
}
.cfa-scenario .cfs-action-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; fill: #fff; text-anchor: middle;
}
.cfa-scenario .cfs-action-amount {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; fill: #fff; text-anchor: middle;
}

/* ── Customer-facing agent · Risk — shared interpretation space ───── */
.cfa-risk .cfr-svg { width: 100%; height: 100%; display: block; }
.cfa-risk .cfr-corner {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.cfa-risk .cfr-corner--accent { fill: var(--accent); }
.cfa-risk .cfr-src {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.cfa-risk .cfr-src--bad { stroke: var(--accent); stroke-width: 1.4; }
.cfa-risk .cfr-src-lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--ink); text-anchor: middle;
}
.cfa-risk .cfr-src-lbl--bad { fill: var(--accent); }
.cfa-risk .cfr-src-meta {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.12em; fill: var(--muted); text-anchor: middle; text-transform: uppercase;
}
.cfa-risk .cfr-src-meta--bad { fill: var(--accent); }
.cfa-risk .cfr-flow {
  stroke: var(--rule-strong); stroke-width: 1.2; fill: none;
  stroke-dasharray: 2 5;
  animation: cfrFlow 2s linear infinite;
}
.cfa-risk .cfr-flow--bad { stroke: var(--accent); stroke-width: 1.4; }
@keyframes cfrFlow { to { stroke-dashoffset: -14; } }
.cfa-risk .cfr-ctx {
  fill: rgba(254,69,28,0.05); stroke: var(--accent); stroke-width: 1.2;
}
.cfa-risk .cfr-ctx-lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--accent); text-anchor: middle;
}
.cfa-risk .cfr-ctx-meta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--muted); text-anchor: middle; text-transform: uppercase;
}
.cfa-risk .cfr-ctx-meta--bad { fill: var(--accent); }
.cfa-risk .cfr-out-flow {
  stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 4;
  animation: cfrFlow 1.8s linear infinite;
}
.cfa-risk .cfr-out-arrow { fill: var(--accent); }
.cfa-risk .cfr-out {
  fill: var(--accent); stroke: none;
}
.cfa-risk .cfr-out-name {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; fill: #fff; text-anchor: middle;
}
.cfa-risk .cfr-out-meta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; fill: #fff; text-anchor: middle;
}

/* ── Customer-facing agent · Architecture — tag travels through ──── */
.cfa-arch .cfaa-svg { width: 100%; height: 100%; display: block; }
.cfa-arch .cfaa-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.cfa-arch .cfaa-lbl--accent { fill: var(--accent); }
.cfa-arch .cfaa-card {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.cfa-arch .cfaa-card-name {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink);
}
.cfa-arch .cfaa-card-meta {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--muted);
}
.cfa-arch .cfaa-tag {
  fill: var(--accent); stroke: none;
}
.cfa-arch .cfaa-tag-tx {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}
.cfa-arch .cfaa-flow {
  stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 3 4;
  animation: cfaaFlow 1.8s linear infinite;
}
.cfa-arch .cfaa-flow--accent { stroke: var(--accent); stroke-width: 1.6; }
@keyframes cfaaFlow { to { stroke-dashoffset: -14; } }
.cfa-arch .cfaa-arrow { fill: var(--muted); }
.cfa-arch .cfaa-arrow--accent { fill: var(--accent); }
.cfa-arch .cfaa-flow-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-transform: uppercase;
}
.cfa-arch .cfaa-refuse {
  fill: var(--accent); stroke: none;
}
.cfa-arch .cfaa-refuse-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; fill: #fff; text-anchor: middle;
}
.cfa-arch .cfaa-refuse-meta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; fill: rgba(255,255,255,0.85); text-anchor: middle; text-transform: uppercase;
}

/* ── PR review agent · Scenario — queue + Marcus ─────────────────── */
.pr-scenario .prs-svg { width: 100%; height: 100%; display: block; }
.pr-scenario .prs-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.pr-scenario .prs-lbl--accent { fill: var(--accent); }
.pr-scenario .prs-pr {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.pr-scenario .prs-pr-meta {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-transform: uppercase;
}
.pr-scenario .prs-pr-title {
  font-family: var(--font-body); font-size: 12px; font-weight: 500; fill: var(--ink);
}
.pr-scenario .prs-pr-wait {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; fill: var(--muted);
}
.pr-scenario .prs-pr-wait--slow { fill: var(--accent); }
.pr-scenario .prs-funnel {
  fill: rgba(254,69,28,0.10); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3;
}
.pr-scenario .prs-marcus {
  fill: var(--accent); stroke: none;
}
.pr-scenario .prs-marcus-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: rgba(255,255,255,0.82);
}
.pr-scenario .prs-marcus-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 400;
  fill: #fff; text-anchor: middle; font-style: italic;
}
.pr-scenario .prs-marcus-meta {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: rgba(255,255,255,0.78); text-anchor: middle; text-transform: uppercase;
}
.pr-scenario .prs-bar-bg {
  fill: rgba(10,10,10,0.06);
}
.pr-scenario .prs-bar-fg {
  fill: var(--accent);
}
.pr-scenario .prs-bar-tx {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}

/* ── PR review agent · Risk — generic AI vs Marcus side-by-side ──── */
.pr-risk .prr-svg { width: 100%; height: 100%; display: block; }
.pr-risk .prr-pr-lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--ink);
}
.pr-risk .prr-side-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.pr-risk .prr-side-lbl--accent { fill: var(--accent); }
.pr-risk .prr-panel {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.pr-risk .prr-panel--accent {
  stroke: var(--accent); stroke-width: 1.2;
}
.pr-risk .prr-bullet--ok { fill: var(--muted-2); }
.pr-risk .prr-bullet--warn { fill: var(--accent); }
.pr-risk .prr-comment-tx {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500; fill: var(--ink);
}
.pr-risk .prr-verdict--approve {
  fill: rgba(10,10,10,0.05); stroke: var(--rule-strong); stroke-width: 1;
}
.pr-risk .prr-verdict--changes {
  fill: var(--accent); stroke: none;
}
.pr-risk .prr-verdict-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted); text-anchor: middle; dominant-baseline: middle;
}
.pr-risk .prr-verdict-tx--neg { fill: #fff; }
.pr-risk .prr-divider {
  stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4;
}
.pr-risk .prr-gap-badge {
  fill: var(--accent); stroke: none;
}
.pr-risk .prr-gap-tx {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}

/* ── PR review agent · Architecture — the skill card ─────────────── */
.pr-arch .pra-svg { width: 100%; height: 100%; display: block; }
.pr-arch .pra-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.pr-arch .pra-lbl--accent { fill: var(--accent); }
.pr-arch .pra-skill {
  fill: #fff; stroke: var(--accent); stroke-width: 1.2;
}
.pr-arch .pra-skill-head {
  fill: rgba(254,69,28,0.07); stroke: none;
}
.pr-arch .pra-skill-file {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; fill: var(--accent);
}
.pr-arch .pra-skill-ver {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; fill: var(--muted);
}
.pr-arch .pra-stamp {
  fill: var(--accent);
}
.pr-arch .pra-stamp-tx {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}
.pr-arch .pra-author {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; fill: var(--muted);
}
.pr-arch .pra-heur-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.pr-arch .pra-h-bullet { fill: var(--accent); }
.pr-arch .pra-h-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  fill: var(--ink);
}
.pr-arch .pra-hash {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  fill: var(--muted);
}
.pr-arch .pra-flow {
  stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 3 4;
  animation: praFlow 1.8s linear infinite;
}
.pr-arch .pra-flow--accent { stroke: var(--accent); stroke-width: 1.6; }
@keyframes praFlow { to { stroke-dashoffset: -14; } }
.pr-arch .pra-arrow { fill: var(--muted); }
.pr-arch .pra-arrow--accent { fill: var(--accent); }
.pr-arch .pra-flow-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--accent); text-transform: uppercase;
}
.pr-arch .pra-applied {
  fill: var(--accent);
}
.pr-arch .pra-applied-pr {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; fill: #fff;
}
.pr-arch .pra-applied-result {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; fill: rgba(255,255,255,0.85);
}

/* ── Feature-flag agent · HERO (LIGHT) — rollout cockpit ─────────── */
.ff-hero { background: #fff; color: var(--ink); }
.ff-hero .ffh-svg { width: 100%; height: 100%; display: block; }
.ff-hero .ffh-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.ff-hero .ffh-lbl--accent { fill: var(--accent); }
.ff-hero .ffh-bar-bg { fill: rgba(10,10,10,0.06); }
.ff-hero .ffh-bar-fg { fill: var(--accent); }
.ff-hero .ffh-bar-ghost { fill: rgba(254,69,28,0.25); }
.ff-hero .ffh-bar-ticks line { stroke: rgba(10,10,10,0.20); stroke-width: 1; }
.ff-hero .ffh-tick-lbl {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; fill: var(--muted);
}
.ff-hero .ffh-tick-lbl--accent { fill: var(--accent); }
.ff-hero .ffh-inst {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.ff-hero .ffh-inst--accent { fill: var(--accent); stroke: none; }
.ff-hero .ffh-inst-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted); text-anchor: middle;
}
.ff-hero .ffh-inst-lbl--inv { fill: rgba(255,255,255,0.85); }
.ff-hero .ffh-inst-val {
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  fill: var(--ink); text-anchor: middle;
}
.ff-hero .ffh-inst-val--inv { fill: #fff; }
.ff-hero .ffh-inst-meta {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: var(--muted); text-anchor: middle; text-transform: uppercase;
}
.ff-hero .ffh-inst-meta--inv { fill: rgba(255,255,255,0.78); }
.ff-hero .ffh-inst-line {
  fill: none; stroke: var(--accent); stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
}
.ff-hero .ffh-pulse {
  fill: #fff;
  animation: ffhPulseDot 1.4s ease-in-out infinite;
}
@keyframes ffhPulseDot { 50% { opacity: 0.35; } }
.ff-hero .ffh-steward {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.ff-hero .ffh-steward-avatar {
  fill: var(--accent);
}
.ff-hero .ffh-steward-i {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  fill: #fff; text-anchor: middle;
}
.ff-hero .ffh-steward-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.ff-hero .ffh-steward-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink);
}
.ff-hero .ffh-status { fill: rgba(254,69,28,0.10); stroke: var(--accent); stroke-width: 1; }
.ff-hero .ffh-status-tx {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--accent); text-anchor: middle; dominant-baseline: middle;
}
.ff-hero .ffh-propose {
  fill: var(--accent); stroke: none;
  animation: ffhProposePulse 3s ease-in-out infinite;
}
@keyframes ffhProposePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(254,69,28,0)); }
  50% { filter: drop-shadow(0 0 16px rgba(254,69,28,0.55)); }
}
.ff-hero .ffh-propose-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: rgba(255,255,255,0.85); text-anchor: middle;
}
.ff-hero .ffh-propose-val {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; fill: #fff; text-anchor: middle;
}
.ff-hero .ffh-propose-meta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; fill: rgba(255,255,255,0.82); text-anchor: middle;
}

/* ── Feature-flag agent · Scenario — 48h timeline of manual events ─ */
.ff-scenario .ffs-svg { width: 100%; height: 100%; display: block; }
.ff-scenario .ffs-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.ff-scenario .ffs-lbl--accent { fill: var(--accent); }
.ff-scenario .ffs-axis { stroke: var(--rule-strong); stroke-width: 1; }
.ff-scenario .ffs-dot { fill: var(--accent); }
.ff-scenario .ffs-dot--alert { fill: var(--accent); stroke: var(--accent); stroke-width: 4; opacity: 0.6; }
.ff-scenario .ffs-time {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; fill: var(--accent);
}
.ff-scenario .ffs-event {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; fill: var(--ink);
}
.ff-scenario .ffs-event--alert { fill: var(--accent); font-weight: 600; }
.ff-scenario .ffs-meta {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; fill: var(--muted);
}
.ff-scenario .ffs-meta--alert { fill: var(--accent); }
.ff-scenario .ffs-total {
  fill: var(--accent);
}
.ff-scenario .ffs-total-tx {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}

/* ── Feature-flag agent · Risk — boolean vs runtime gate ─────────── */
.ff-risk .ffr-svg { width: 100%; height: 100%; display: block; }
.ff-risk .ffr-side-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted);
}
.ff-risk .ffr-side-lbl--accent { fill: var(--accent); }
.ff-risk .ffr-panel {
  fill: #fff; stroke: var(--rule-strong); stroke-width: 1;
}
.ff-risk .ffr-panel--accent {
  stroke: var(--accent); stroke-width: 1.2;
}
.ff-risk .ffr-field-lbl {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; fill: var(--muted);
}
.ff-risk .ffr-field {
  fill: rgba(10,10,10,0.04); stroke: var(--rule); stroke-width: 0.8;
}
.ff-risk .ffr-field-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink);
}
.ff-risk .ffr-field-val {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--muted);
}
.ff-risk .ffr-field-val--green { fill: #4a9b5a; }
.ff-risk .ffr-verdict--ok {
  fill: rgba(10,10,10,0.05); stroke: var(--rule-strong); stroke-width: 1;
}
.ff-risk .ffr-verdict--hold {
  fill: var(--accent); stroke: none;
}
.ff-risk .ffr-verdict-tx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; fill: var(--muted); text-anchor: middle; dominant-baseline: middle;
}
.ff-risk .ffr-verdict-tx--inv { fill: #fff; font-size: 9.5px; }
.ff-risk .ffr-foot {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; fill: var(--muted); text-transform: uppercase;
}
.ff-risk .ffr-divider {
  stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4;
}
.ff-risk .ffr-gap {
  fill: var(--accent);
}
.ff-risk .ffr-gap-tx {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}
.ff-risk .ffr-pip { fill: var(--accent); }
.ff-risk .ffr-pip--pending { fill: rgba(254,69,28,0.45); }
.ff-risk .ffr-cond {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink);
}
.ff-risk .ffr-cond-val {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; fill: var(--accent);
}
.ff-risk .ffr-cond-val--pending { fill: var(--muted); }

/* ── Feature-flag agent · Architecture — capability as a program ──── */
.ff-arch .ffa-svg { width: 100%; height: 100%; display: block; }
.ff-arch .ffa-cap {
  fill: #fff; stroke: var(--accent); stroke-width: 1.2;
}
.ff-arch .ffa-cap-head {
  fill: rgba(254,69,28,0.07); stroke: none;
}
.ff-arch .ffa-cap-file {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.04em; fill: var(--accent);
}
.ff-arch .ffa-cap-ver {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; fill: var(--muted);
}
.ff-arch .ffa-stamp {
  fill: var(--accent);
}
.ff-arch .ffa-stamp-tx {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; fill: #fff; text-anchor: middle; dominant-baseline: middle;
}
.ff-arch .ffa-code-key {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--accent);
}
.ff-arch .ffa-code-val {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--ink);
}
.ff-arch .ffa-code-section {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--muted);
}
.ff-arch .ffa-code-cond {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--ink);
}
.ff-arch .ffa-code-live {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; fill: var(--accent);
}
.ff-arch .ffa-code-live--pending { fill: var(--muted); }
.ff-arch .ffa-pip--ok { fill: var(--accent); }
.ff-arch .ffa-pip--pending {
  fill: rgba(254,69,28,0.40);
  animation: ffaPipPulse 1.4s ease-in-out infinite;
}
@keyframes ffaPipPulse { 50% { opacity: 0.5; } }
.ff-arch .ffa-hash {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; fill: var(--muted);
}
.ff-arch .ffa-verdict {
  fill: var(--accent);
}
.ff-arch .ffa-verdict-name {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; fill: #fff; text-anchor: middle;
}
.ff-arch .ffa-verdict-meta {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; fill: rgba(255,255,255,0.85); text-anchor: middle;
}

/* Diagram strip — wider variant for new layout */
.diagram-strip.wide {
  max-width: 1100px; margin: 0 auto;
  padding: 40px;
  background: var(--paper);
  border-radius: 20px;
}
.diagram-strip.wide .step .v { font-size: 16px; line-height: 1.55; }

@media (max-width: 700px) {
  .page-hero { padding: 96px 0 56px; }
  .eyebrow .eyebrow__trail { display: block; }
}

@media (max-width: 520px) {
  .page-hero .eyebrow {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }
  .page-hero .eyebrow span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .page-hero .email-form,
  .final-cta .email-form {
    width: 100%;
  }
  .page-hero .email-form input,
  .final-cta .email-form input {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }
  .page-hero .email-form button,
  .final-cta .email-form button {
    flex: 0 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  .diagram-strip.wide {
    padding: 24px 20px;
  }
  .diagram-strip .step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .diagram-strip .head {
    overflow-wrap: anywhere;
  }
}

/* Use-case nav — bigger cards now that we have the room */
.t-section .uc-nav { margin-top: 0; max-width: 1100px; margin-left: auto; margin-right: auto; }
.uc-nav a { padding: 32px 28px; }
.uc-nav a .t { font-size: 22px; }

/* Sub-page hero CTA strip — a final inline form near the bottom */
.inline-cta {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center;
  padding: 44px; border-radius: 20px;
  background: var(--paper-soft); border: 1px solid var(--rule);
}
.t-section.warm  .inline-cta { background: var(--paper); }
.t-section.cream .inline-cta { background: var(--paper); }
.inline-cta h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.02em;
  margin: 14px 0 0; max-width: 24ch;
}
.inline-cta h3 em { font-style: italic; color: var(--accent); }
.inline-cta .email-form { width: 100%; }
@media (max-width: 900px) { .inline-cta { grid-template-columns: 1fr; gap: 28px; padding: 32px; } }

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


/* ── Safety diagram — code-built policy-gate flow ────────────────────────── */
.safety-diagram {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 32px 24px 26px;
  min-height: 864px;
  font-family: var(--font-body);
  color: var(--ink);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.safety-diagram .sd__header {
  display: flex; justify-content: center; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.safety-diagram .sd__title { display: inline-flex; align-items: center; gap: 8px; }
.safety-diagram .sd__pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.safety-diagram .sd__chapter { color: var(--muted); }

/* Input cards */
.safety-diagram .sd__inputs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.safety-diagram .sd__icard {
  padding: 16px 6px 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(10,10,10,0.04);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 6px;
}
.safety-diagram .sd__icon {
  width: 24px; height: 24px; color: var(--accent);
  animation: sd-icon-pulse 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(254,69,28,0.3));
}
.safety-diagram .sd__icard:nth-child(1) .sd__icon { animation-delay: 0s; }
.safety-diagram .sd__icard:nth-child(2) .sd__icon { animation-delay: -0.5s; }
.safety-diagram .sd__icard:nth-child(3) .sd__icon { animation-delay: -1s; }
.safety-diagram .sd__icard:nth-child(4) .sd__icon { animation-delay: -1.5s; }
.safety-diagram .sd__icard:nth-child(5) .sd__icon { animation-delay: -2s; }
@keyframes sd-icon-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(254,69,28,0.25)); }
  50%      { transform: scale(1.10); filter: drop-shadow(0 0 8px rgba(254,69,28,0.55)); }
}
.safety-diagram .sd__ittl {
  font-family: var(--font-display); font-weight: 500;
  font-size: 12px; line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink);
}
.safety-diagram .sd__idesc {
  font-size: 9.5px; line-height: 1.35; color: var(--muted);
  max-width: 14ch;
}

/* Trunk / branch SVG connectors */
.safety-diagram .sd__trunk { width: 100%; height: 70px; display: block; margin-top: 10px; }
.safety-diagram .sd__branches { width: 100%; height: 56px; display: block; margin-top: 8px; }
.safety-diagram .sd__trunk .sd-line,
.safety-diagram .sd__branches .sd-line { filter: drop-shadow(0 0 3px rgba(254,69,28,0.35)); }
.safety-diagram .sd-line {
  stroke-dasharray: 1.5 3;
  stroke-linecap: round;
  animation: sd-flow 1.5s linear infinite;
}
.safety-diagram .sd-line:nth-child(2n) { animation-delay: -0.5s; }
.safety-diagram .sd-line:nth-child(3n) { animation-delay: -1s; }
@keyframes sd-flow {
  from { stroke-dashoffset: 0;    }
  to   { stroke-dashoffset: -4.5; }
}

/* Policy gate card */
.safety-diagram .sd__gate {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 28px 22px;
  margin: 0 5%;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  animation: sd-gate-aura 5s ease-in-out infinite;
}
@keyframes sd-gate-aura {
  0%, 100% { box-shadow: 0 0 0 6px rgba(254,69,28,0.05), 0 14px 32px -22px rgba(254,69,28,0.18); }
  50%      { box-shadow: 0 0 0 10px rgba(254,69,28,0.10), 0 18px 40px -22px rgba(254,69,28,0.30); }
}
.safety-diagram .sd__lock {
  width: 26px; height: 26px;
  color: var(--accent);
  margin-bottom: 8px;
  animation: sd-lock-breath 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(254,69,28,0.4));
}
@keyframes sd-lock-breath {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(254,69,28,0.3)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(254,69,28,0.55)); }
}
.safety-diagram .sd__gttl {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink);
}
.safety-diagram .sd__gsub {
  font-size: 12px; color: var(--muted); margin-top: 4px;
}
.safety-diagram .sd__gdiv {
  width: 100%; height: 1px; background: var(--rule); border: 0;
  margin: 14px 0 10px;
}
.safety-diagram .sd__glist {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  font-size: 13px; color: var(--ink);
  align-self: stretch;
}
.safety-diagram .sd__glist li {
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0;
  transform: translateX(-6px);
  animation: sd-check-in 480ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.safety-diagram .sd__glist li:nth-child(1) { animation-delay: 0.2s; }
.safety-diagram .sd__glist li:nth-child(2) { animation-delay: 0.32s; }
.safety-diagram .sd__glist li:nth-child(3) { animation-delay: 0.44s; }
.safety-diagram .sd__glist li:nth-child(4) { animation-delay: 0.56s; }
.safety-diagram .sd__glist li:nth-child(5) { animation-delay: 0.68s; }
@keyframes sd-check-in {
  to { opacity: 1; transform: translateX(0); }
}
.safety-diagram .sd__check {
  width: 14px; height: 14px; color: var(--accent); flex-shrink: 0;
}

/* Outcome cards */
.safety-diagram .sd__outcomes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.safety-diagram .sd__ocard {
  padding: 20px 12px 22px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(10,10,10,0.04);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 8px;
}
.safety-diagram .sd__oicon {
  width: 28px; height: 28px;
  animation: sd-oicon-pulse 3.5s ease-in-out infinite;
}
.safety-diagram .sd__ocard--refused .sd__oicon { color: #E11D2A; }
.safety-diagram .sd__ocard--review  .sd__oicon { color: #E8A21A; animation-delay: -1.2s; }
.safety-diagram .sd__ocard--ok      .sd__oicon { color: #16A34A; animation-delay: -2.4s; }
@keyframes sd-oicon-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.9; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.safety-diagram .sd__ottl {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--ink);
}
.safety-diagram .sd__odesc {
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* Caption */
.safety-diagram .sd__caption {
  margin-top: auto;
  padding-top: 22px;
  text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.safety-diagram .sd__cdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: sd-cdot-blink 1.8s ease-in-out infinite;
}
@keyframes sd-cdot-blink {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .safety-diagram .sd-line,
  .safety-diagram .sd__lock,
  .safety-diagram .sd__glist li,
  .safety-diagram .sd__oicon,
  .safety-diagram .sd__cdot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ── Accountability / audit-chain diagram ───────────────────────────────── */
.accountability-diagram {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 32px 24px 26px;
  font-family: var(--font-body);
  color: var(--ink);
  display: flex; flex-direction: column;
  position: relative;
}
.accountability-diagram .ad__header {
  display: flex; justify-content: flex-start; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}
.accountability-diagram .ad__title { display: inline-flex; align-items: center; gap: 8px; }
.accountability-diagram .ad__pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* Vertical chain */
.accountability-diagram .ad__chain {
  position: relative;
  padding-left: 4px;
}
.accountability-diagram .ad__rail {
  position: absolute;
  left: 90px;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent) 50%, transparent 50%) repeat-y center top / 2px 6px;
  animation: ad-rail-flow 1.2s linear infinite;
  z-index: 0;
}
@keyframes ad-rail-flow {
  from { background-position-y: 0;     }
  to   { background-position-y: -6px;  }
}
.accountability-diagram .ad__comet {
  position: absolute;
  left: 87px;
  top: 10%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(254,69,28,0.9), 0 0 10px rgba(254,69,28,0.5);
  animation: ad-comet-travel 7s ease-in-out infinite;
  z-index: 2;
}
@keyframes ad-comet-travel {
  0%   { top: 10%; opacity: 0; }
  4%   { top: 10%; opacity: 1; }
  20%  { top: 10%; opacity: 1; }
  28%  { top: 30%; opacity: 1; }
  40%  { top: 30%; opacity: 1; }
  48%  { top: 50%; opacity: 1; }
  60%  { top: 50%; opacity: 1; }
  68%  { top: 70%; opacity: 1; }
  80%  { top: 70%; opacity: 1; }
  88%  { top: 90%; opacity: 1; }
  96%  { top: 90%; opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* Step row */
.accountability-diagram .ad__step {
  display: grid;
  grid-template-columns: 44px 60px 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  position: relative;
  z-index: 1;
}
.accountability-diagram .ad__num {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--accent);
  text-align: right;
}

.accountability-diagram .ad__card {
  width: 60px; height: 60px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(10,10,10,0.04);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: box-shadow 360ms ease, transform 360ms ease;
}
.accountability-diagram .ad__icon { width: 28px; height: 28px; color: var(--accent); }

/* Card glow pulse — staggered per step */
.accountability-diagram .ad__step .ad__card { animation: ad-card-aura 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.4s); }
@keyframes ad-card-aura {
  0%, 22%, 100% { box-shadow: 0 6px 14px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(10,10,10,0.04); transform: scale(1); }
  10%, 14%      { box-shadow: 0 8px 20px -10px rgba(254,69,28,0.40), 0 0 0 4px rgba(254,69,28,0.20), 0 0 0 1px rgba(254,69,28,0.45); transform: scale(1.04); }
}

/* Info column */
.accountability-diagram .ad__info {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.accountability-diagram .ad__ttl {
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--ink);
}
.accountability-diagram .ad__desc {
  font-size: 13.5px; line-height: 1.4; color: var(--muted);
}
.accountability-diagram .ad__hash {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--accent);
  opacity: 0.85;
  padding: 3px 8px;
  background: rgba(254,69,28,0.06);
  border: 1px solid rgba(254,69,28,0.16);
  border-radius: 4px;
  width: max-content; max-width: 100%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.accountability-diagram .ad__hash::before { content: '→ '; opacity: 0.55; }

/* Footer band */
.accountability-diagram .ad__band {
  margin-top: 28px;
  padding: 20px 24px 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.accountability-diagram .ad__band-ttl {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: center;
}
.accountability-diagram .ad__band-ttl .ad__sep { color: var(--accent); }
.accountability-diagram .ad__band-ttl span:not(.ad__sep) {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 44%, var(--accent) 50%, var(--ink) 56%, var(--ink) 100%);
  background-size: 400% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ad-band-shimmer 6s linear infinite;
}
.accountability-diagram .ad__band-ttl span:not(.ad__sep):nth-child(3) { animation-delay: -2s; }
.accountability-diagram .ad__band-ttl span:not(.ad__sep):nth-child(5) { animation-delay: -4s; }
@keyframes ad-band-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.accountability-diagram .ad__band-sub {
  margin-top: 12px;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  font-family: var(--font-display); font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .accountability-diagram .ad__rail,
  .accountability-diagram .ad__comet,
  .accountability-diagram .ad__step .ad__card,
  .accountability-diagram .ad__band-ttl span {
    animation: none !important;
  }
  .accountability-diagram .ad__band-ttl span:not(.ad__sep) {
    -webkit-text-fill-color: var(--ink); color: var(--ink); background: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Sizzle additions for Money / Knowledge / Safety diagrams
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── SAFETY ─── */
.safety-diagram .sd__inputs { position: relative; }
.safety-diagram .sd__icard {
  position: relative;
  transition: box-shadow 320ms ease, transform 320ms ease;
  animation: sd-input-cycle 8s steps(5, jump-none) infinite;
}
.safety-diagram .sd__icard:nth-child(1) { animation-delay: 0s; }
.safety-diagram .sd__icard:nth-child(2) { animation-delay: -1.6s; }
.safety-diagram .sd__icard:nth-child(3) { animation-delay: -3.2s; }
.safety-diagram .sd__icard:nth-child(4) { animation-delay: -4.8s; }
.safety-diagram .sd__icard:nth-child(5) { animation-delay: -6.4s; }
@keyframes sd-input-cycle {
  0%, 100%   { box-shadow: 0 6px 14px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(10,10,10,0.04); transform: scale(1); }
  5%, 15%    { box-shadow: 0 8px 24px -8px rgba(254,69,28,0.45), 0 0 0 3px rgba(254,69,28,0.18), 0 0 0 1px rgba(254,69,28,0.50); transform: scale(1.04); }
}

.safety-diagram .sd__outcomes { position: relative; }
.safety-diagram .sd__ocard {
  position: relative;
  transition: box-shadow 320ms ease, transform 320ms ease;
}
.safety-diagram .sd__ocard--refused { animation: sd-out-red    9s ease-in-out infinite; }
.safety-diagram .sd__ocard--review  { animation: sd-out-yellow 9s ease-in-out infinite 3s; }
.safety-diagram .sd__ocard--ok      { animation: sd-out-green  9s ease-in-out infinite 6s; }
@keyframes sd-out-red {
  0%, 88%, 100% { box-shadow: 0 6px 14px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(10,10,10,0.04); transform: scale(1); }
  8%, 22%       { box-shadow: 0 10px 26px -10px rgba(225,29,42,0.45), 0 0 0 3px rgba(225,29,42,0.16), 0 0 0 1px rgba(225,29,42,0.45); transform: scale(1.05); }
}
@keyframes sd-out-yellow {
  0%, 88%, 100% { box-shadow: 0 6px 14px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(10,10,10,0.04); transform: scale(1); }
  8%, 22%       { box-shadow: 0 10px 26px -10px rgba(232,162,26,0.45), 0 0 0 3px rgba(232,162,26,0.18), 0 0 0 1px rgba(232,162,26,0.45); transform: scale(1.05); }
}
@keyframes sd-out-green {
  0%, 88%, 100% { box-shadow: 0 6px 14px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(10,10,10,0.04); transform: scale(1); }
  8%, 22%       { box-shadow: 0 10px 26px -10px rgba(22,163,74,0.45), 0 0 0 3px rgba(22,163,74,0.18), 0 0 0 1px rgba(22,163,74,0.45); transform: scale(1.05); }
}

/* Stronger lock pulse */
.safety-diagram .sd__lock {
  animation: sd-lock-strong 3.6s ease-in-out infinite;
}
@keyframes sd-lock-strong {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(254,69,28,0.4)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(254,69,28,0.85)); }
}

/* Check item ripple — flash bright orange in sequence */
.safety-diagram .sd__glist li .sd__check {
  animation: sd-check-flash 6s ease-in-out infinite;
}
.safety-diagram .sd__glist li:nth-child(1) .sd__check { animation-delay: 0s; }
.safety-diagram .sd__glist li:nth-child(2) .sd__check { animation-delay: -1.2s; }
.safety-diagram .sd__glist li:nth-child(3) .sd__check { animation-delay: -2.4s; }
.safety-diagram .sd__glist li:nth-child(4) .sd__check { animation-delay: -3.6s; }
.safety-diagram .sd__glist li:nth-child(5) .sd__check { animation-delay: -4.8s; }
@keyframes sd-check-flash {
  0%, 88%, 100% { filter: none; transform: scale(1); }
  4%, 16%       { filter: drop-shadow(0 0 6px rgba(254,69,28,0.95)) brightness(1.4); transform: scale(1.4); }
}

/* Trunk comet — travels down center of trunk SVG band */
.safety-diagram .sd__trunk { position: relative; }
.safety-diagram .sd__trunk::after {
  content: '';
  position: absolute;
  left: calc(50% - 4px);
  top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(254,69,28,0.9), 0 0 14px rgba(254,69,28,0.45);
  animation: sd-trunk-comet 1.6s linear infinite;
  pointer-events: none;
}
@keyframes sd-trunk-comet {
  0%   { top: 0;        opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}

/* Branches comet — exits gate, lands at outcome */
.safety-diagram .sd__branches { position: relative; }
.safety-diagram .sd__branches::after {
  content: '';
  position: absolute;
  left: calc(50% - 4px);
  top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(254,69,28,0.9), 0 0 14px rgba(254,69,28,0.45);
  animation: sd-branch-comet 1.6s linear infinite;
  pointer-events: none;
}
@keyframes sd-branch-comet {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}

/* ─── MONEY ─── */
.money-diagram .md__model {
  position: relative;
  transition: box-shadow 320ms ease, transform 320ms ease;
  animation: md-model-cycle 6s steps(4, jump-none) infinite;
}
.money-diagram .md__model:nth-child(1) { animation-delay: 0s;    }
.money-diagram .md__model:nth-child(2) { animation-delay: -1.5s; }
.money-diagram .md__model:nth-child(3) { animation-delay: -3s;   }
.money-diagram .md__model:nth-child(4) { animation-delay: -4.5s; }
@keyframes md-model-cycle {
  0%, 100%  { box-shadow: 0 4px 10px -8px rgba(0,0,0,0.14), 0 0 0 1px var(--rule); transform: scale(1); }
  6%, 17%   { box-shadow: 0 8px 22px -8px rgba(254,69,28,0.40), 0 0 0 3px rgba(254,69,28,0.16), 0 0 0 1px rgba(254,69,28,0.45); transform: scale(1.03); }
}

/* Cost router emit-pulse — a ring expanding outward */
.money-diagram .md__router { position: relative; }
.money-diagram .md__router::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 14px;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: md-router-emit 3s ease-out infinite;
  pointer-events: none;
}
@keyframes md-router-emit {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Total savings number — solid red by default; shimmer plays once on scroll-in */
.money-diagram .md__sv-num {
  color: var(--accent);
}
.money-diagram .md__sv-num.shimmered {
  background: linear-gradient(
    100deg,
    var(--accent) 0%, var(--accent) 40%,
    #FFD7C2 50%,
    var(--accent) 60%, var(--accent) 100%
  );
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: md-savings-shimmer 2.4s cubic-bezier(.4, 0, .2, 1) 1 forwards;
}
@keyframes md-savings-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0;   }
}

/* ─── KNOWLEDGE ─── */
.knowledge-diagram .kd__tile {
  transition: box-shadow 320ms ease, transform 320ms ease;
  animation: kd-tile-cycle 10s steps(6, jump-none) infinite;
}
.knowledge-diagram .kd__tile:nth-child(1) { animation-delay: 0s;     }
.knowledge-diagram .kd__tile:nth-child(2) { animation-delay: -1.66s; }
.knowledge-diagram .kd__tile:nth-child(3) { animation-delay: -3.33s; }
.knowledge-diagram .kd__tile:nth-child(4) { animation-delay: -5s;    }
.knowledge-diagram .kd__tile:nth-child(5) { animation-delay: -6.66s; }
.knowledge-diagram .kd__tile:nth-child(6) { animation-delay: -8.33s; }
@keyframes kd-tile-cycle {
  0%, 100% { box-shadow: 0 8px 16px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(10,10,10,0.04); transform: scale(1); }
  4%, 12%  { box-shadow: 0 10px 22px -8px rgba(254,69,28,0.45), 0 0 0 3px rgba(254,69,28,0.16), 0 0 0 1px rgba(254,69,28,0.45); transform: scale(1.08); }
}

/* Registry: T-burst slow rotation + stronger aura sync */
.knowledge-diagram .kd__burst {
  animation: kd-burst-rotate 24s linear infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(254,69,28,0.4));
}
@keyframes kd-burst-rotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.knowledge-diagram .kd__registry {
  animation: kd-registry-aura 5s ease-in-out infinite;
}
@keyframes kd-registry-aura {
  0%, 100% { box-shadow: 0 0 0 6px rgba(254,69,28,0.08), 0 16px 32px -22px rgba(254,69,28,0.32); }
  50%      { box-shadow: 0 0 0 10px rgba(254,69,28,0.14), 0 20px 40px -22px rgba(254,69,28,0.45); }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .safety-diagram .sd__icard,
  .safety-diagram .sd__ocard,
  .safety-diagram .sd__lock,
  .safety-diagram .sd__glist li .sd__check,
  .safety-diagram .sd__trunk::after,
  .safety-diagram .sd__branches::after,
  .money-diagram .md__model,
  .money-diagram .md__router::before,
  .money-diagram .md__sv-num,
  .knowledge-diagram .kd__tile,
  .knowledge-diagram .kd__burst,
  .knowledge-diagram .kd__registry {
    animation: none !important;
  }
}


/* ── Architecture diagram — four-layer runtime with denial flow ────────── */
.arch-diagram {
  position: relative;
  width: 100%; max-width: 580px; margin: 0 auto;
  padding: 28px 0 24px;
  font-family: var(--font-body);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.arch-diagram .arch__grid { display: none; }
.arch-diagram > * { position: relative; z-index: 1; }
.arch-diagram .arch__header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.arch-diagram .arch__title { display: inline-flex; align-items: center; gap: 8px; }
.arch-diagram .arch__pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.arch-diagram .arch__sub { color: var(--muted); }

/* Agent card */
.arch-diagram .arch__agent {
  max-width: 240px; margin: 0 auto;
  padding: 12px 18px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.18);
  text-align: center;
}
.arch-diagram .arch__alabel {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 6px;
}
.arch-diagram .arch__areq {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
}

/* Chain */
.arch-diagram .arch__chain {
  position: relative;
  margin-top: 6px;
  padding-top: 14px;
}
.arch-diagram .arch__rail,
.arch-diagram .arch__comet { display: none; }
@keyframes arch-rail-flow {
  from { background-position-y: 0;    }
  to   { background-position-y: -6px; }
}
.arch-diagram .arch__comet {
  position: absolute;
  left: calc(60px + 12px - 3px);
  top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(254,69,28,0.9), 0 0 10px rgba(254,69,28,0.5);
  animation: arch-comet 8s ease-in-out infinite;
  z-index: 3;
}
@keyframes arch-comet {
  0%   { top: 0;    opacity: 0; }
  4%   { top: 0;    opacity: 1; }
  16%  { top: 12%;  opacity: 1; }
  24%  { top: 12%;  opacity: 1; }
  30%  { top: 38%;  opacity: 1; }
  40%  { top: 38%;  opacity: 1;   filter: brightness(1.4) drop-shadow(0 0 8px rgba(254,69,28,0.9)); transform: scale(1.4); }
  50%  { top: 38%;  opacity: 1;   filter: brightness(1.4) drop-shadow(0 0 8px rgba(254,69,28,0.9)); transform: scale(1.4); }
  56%  { top: 64%;  opacity: 0.4; transform: scale(0.85); }
  68%  { top: 64%;  opacity: 0.4; transform: scale(0.85); }
  78%  { top: 90%;  opacity: 1;   transform: scale(1); filter: none; }
  90%  { top: 90%;  opacity: 1; }
  100% { top: 90%;  opacity: 0; }
}

/* Layer cycle highlight — only the active row is fully visible (5-step: 4 layers + summary) */
.arch-diagram .arch__layer,
.arch-diagram .arch__summary {
  opacity: 0.32;
  animation: arch-row-cycle 10s linear infinite;
}
.arch-diagram .arch__layer {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 0;
}
.arch-diagram .arch__layer:nth-of-type(1) { animation-delay: 0s; }
.arch-diagram .arch__layer:nth-of-type(2) { animation-delay: -8s; }
.arch-diagram .arch__layer:nth-of-type(3) { animation-delay: -6s; }
.arch-diagram .arch__layer:nth-of-type(4) { animation-delay: -4s; }
.arch-diagram .arch__summary { animation-delay: -2s; }
@keyframes arch-row-cycle {
  0%       { opacity: 0.32; }
  1%       { opacity: 1; }
  17%      { opacity: 1; }
  18%      { opacity: 0.32; }
  100%     { opacity: 0.32; }
}
/* Card highlight cycles in sync with the row opacity */
.arch-diagram .arch__lcard {
  width: 60px; height: 60px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 10px -8px rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  animation: arch-card-cycle 10s linear infinite;
}
.arch-diagram .arch__layer:nth-of-type(1) .arch__lcard { animation-delay: 0s; }
.arch-diagram .arch__layer:nth-of-type(2) .arch__lcard { animation-delay: -8s; }
.arch-diagram .arch__layer:nth-of-type(3) .arch__lcard { animation-delay: -6s; }
.arch-diagram .arch__layer:nth-of-type(4) .arch__lcard { animation-delay: -4s; }
@keyframes arch-card-cycle {
  0%       { border-color: var(--rule);   box-shadow: 0 4px 10px -8px rgba(0,0,0,0.18); transform: scale(1); }
  1%       { border-color: var(--accent); box-shadow: 0 8px 22px -8px rgba(254,69,28,0.45), 0 0 0 3px rgba(254,69,28,0.15); transform: scale(1.04); }
  17%      { border-color: var(--accent); box-shadow: 0 8px 22px -8px rgba(254,69,28,0.45), 0 0 0 3px rgba(254,69,28,0.15); transform: scale(1.04); }
  18%      { border-color: var(--rule);   box-shadow: 0 4px 10px -8px rgba(0,0,0,0.18); transform: scale(1); }
  100%     { border-color: var(--rule);   box-shadow: 0 4px 10px -8px rgba(0,0,0,0.18); transform: scale(1); }
}
.arch-diagram .arch__lcard svg { width: 26px; height: 26px; }
.arch-diagram .arch__lcopy { min-width: 0; }
.arch-diagram .arch__lnum {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; color: var(--accent);
  display: inline-block; margin-right: 8px;
}
.arch-diagram .arch__lttl {
  display: inline;
  font-family: var(--font-display); font-weight: 500;
  font-size: 16.5px; letter-spacing: -0.012em;
  color: var(--ink);
}
.arch-diagram .arch__ldesc {
  margin-top: 6px;
  font-size: 12px; line-height: 1.5;
  color: var(--muted);
}
.arch-diagram .arch__lstatus {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.arch-diagram .arch__sttl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.arch-diagram .arch__stms {
  margin-top: 4px;
  font-size: 11px; color: var(--muted);
}
.arch-diagram .arch__lstatus--ok    .arch__sttl { color: #16A34A; }
.arch-diagram .arch__lstatus--alert .arch__sttl { color: var(--accent); }
.arch-diagram .arch__lstatus--skip  .arch__sttl { color: var(--muted); }

/* Skipped row — visibly muted */
.arch-diagram .arch__layer--skipped { opacity: 0.4; }
.arch-diagram .arch__layer--skipped .arch__lcard { background: var(--paper-soft); }

/* Alert row — denial flash */
.arch-diagram .arch__layer--alert .arch__lcard {
  border-color: var(--accent);
  animation: arch-alert-flash 8s ease-in-out infinite;
}
@keyframes arch-alert-flash {
  0%, 30%, 60%, 100% { box-shadow: 0 4px 10px -8px rgba(0,0,0,0.18); }
  40%, 50%           { box-shadow: 0 10px 24px -8px rgba(254,69,28,0.50), 0 0 0 4px rgba(254,69,28,0.18); }
}
.arch-diagram .arch__layer--alert .arch__lstatus--alert .arch__sttl {
  animation: arch-status-pulse 8s ease-in-out infinite;
}
@keyframes arch-status-pulse {
  0%, 32%, 58%, 100% { opacity: 0.88; }
  40%, 50%           { opacity: 1; text-shadow: 0 0 8px rgba(254,69,28,0.55); }
}

/* Summary card */
.arch-diagram .arch__summary {
  margin-top: 16px;
  padding: 16px 22px;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.6);
}
.arch-diagram .arch__scheck {
  width: 24px; height: 24px;
  color: var(--accent);
  flex-shrink: 0;
  animation: arch-check-pulse 3.5s ease-in-out infinite;
}
@keyframes arch-check-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.85; }
  50%      { transform: scale(1.04); opacity: 1;   filter: drop-shadow(0 0 6px rgba(254,69,28,0.5)); }
}
.arch-diagram .arch__stext {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--ink);
}
.arch-diagram .arch__stotal { color: var(--accent); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .arch-diagram .arch__rail,
  .arch-diagram .arch__comet,
  .arch-diagram .arch__layer--alert .arch__lcard,
  .arch-diagram .arch__layer--alert .arch__sttl,
  .arch-diagram .arch__scheck { animation: none !important; }
}

/* ── Use case · Before/After split (dark band beneath hero) ──────────── */
.t-section.uc-split {
  padding: 96px 0;
  background: var(--ink);
  color: #fff;
  border-top: 0;
}
.uc-split .uc-split__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 56px;
  align-items: stretch;
}
.uc-split .uc-split__rule {
  position: relative;
  background: var(--accent);
  width: 1px;
  min-height: 100%;
}
/* Threshold T-mark: a small horizontal serif at the top of the vertical rule */
.uc-split .uc-split__rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 26px;
  height: 1px;
  background: var(--accent);
}
.uc-split .uc-split__col {
  padding: 4px 0;
}
.uc-split .uc-split__col.before { padding-right: 32px; }
.uc-split .uc-split__col.after  { padding-left: 32px; }
.uc-split .uc-split__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.uc-split .uc-split__col.before .uc-split__label { color: rgba(255,255,255,0.5); }
.uc-split .uc-split__col.after  .uc-split__label { color: var(--accent); }
.uc-split .uc-split__body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.uc-split .uc-split__col.before .uc-split__body { color: rgba(255,255,255,0.75); }
.uc-split .uc-split__col.after  .uc-split__body { color: #FFFFFF; }
.uc-split .uc-split__body em { font-style: italic; }
.uc-split .uc-split__col.before .uc-split__body em { color: rgba(255,255,255,0.55); }
.uc-split .uc-split__col.after  .uc-split__body em { color: var(--accent); }

@media (max-width: 820px) {
  .t-section.uc-split { padding: 64px 0; }
  .uc-split .uc-split__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .uc-split .uc-split__rule {
    width: 100%;
    height: 1px;
    min-height: 0;
  }
  .uc-split .uc-split__rule::before {
    top: -11px;
    left: 0;
    transform: none;
    width: 1px;
    height: 22px;
  }
  .uc-split .uc-split__col.before,
  .uc-split .uc-split__col.after {
    padding: 0;
  }
  .uc-split .uc-split__body { max-width: none; }
}

/* ── Inversed emblem image (replaces SVG t-mark) ──────────────────────────── */
.t-nav__logo .emblem,
.t-footer-logo .emblem {
  width: 17px; height: 17px;
  flex-shrink: 0; vertical-align: middle;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
}
.t-nav__logo .emblem {
  transition: transform 240ms ease;
}
.t-nav__logo:hover .emblem {
  transform: scale(1.06);
}

/* ── Layered flow diagram (homepage second section) ───────────────────────── */
.flow-section { padding: 110px 0; }
.flow-diagram {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.flow-col {
  display: flex; flex-direction: column;
  gap: 12px;
  padding-top: 36px;
}
.flow-col__label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
}
.flow-stack {
  display: flex; flex-direction: column; gap: 10px;
}
.flow-chip {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 11px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  color: var(--ink);
  text-align: center;
  position: relative;
  transition: border-color 240ms ease, transform 240ms ease;
}
.flow-chip:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.flow-col--right .flow-chip:hover { transform: translateX(-2px); }

.flow-core {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 24px 48px -28px rgba(0,0,0,0.18);
}
.flow-core__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.flow-core__title .pip {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.flow-layer {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.flow-layer:first-of-type { border-top: none; padding-top: 8px; }
.flow-layer .n {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  padding-top: 2px;
}
.flow-layer .ttl {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.flow-layer .desc {
  font-family: var(--font-body);
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2);
  margin-top: 3px;
}

/* Connector arrows between columns */
.flow-diagram::before,
.flow-diagram::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.6;
  pointer-events: none;
}
.flow-diagram::before { left: calc(1/3.5 * 100% - 6px); }
.flow-diagram::after  { left: calc(2.5/3.5 * 100% - 6px); }

@media (max-width: 860px) {
  .flow-diagram { grid-template-columns: 1fr; gap: 24px; }
  .flow-diagram::before, .flow-diagram::after { display: none; }
  .flow-col { padding-top: 0; }
  .flow-col__label { margin-bottom: 2px; }
  .flow-stack {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  }
}

/* ── Flow section on dark background ──────────────────────────────────────── */
.t-section.dark .flow-col__label {
  color: rgba(255,255,255,0.55);
}
.t-section.dark .flow-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}
.t-section.dark .flow-chip:hover {
  border-color: var(--accent);
  background: rgba(254,69,28,0.06);
}
.t-section.dark .flow-core {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,0.5);
}
.t-section.dark .flow-layer {
  border-top-color: rgba(255,255,255,0.10);
}
.t-section.dark .flow-layer .ttl {
  color: rgba(255,255,255,0.95);
}
.t-section.dark .flow-layer .desc {
  color: rgba(255,255,255,0.65);
}
.t-section.dark .flow-section .sub,
.t-section.dark.flow-section .sub {
  color: rgba(255,255,255,0.70);
}

/* ── Connector image (moved section, between Accountability and Money) ───── */
.connector-relocated { padding: 90px 0; }
.connector-relocated .section-head { margin-bottom: 36px; }

/* ─────────────────────────────────────────────────────────────────────────────
   HEXUS — central nexus diagram (replaces flow-diagram in "How Threshold works")
   ─────────────────────────────────────────────────────────────────────────── */
.hexus {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 36px;
  align-items: stretch;
  max-width: 1300px;
  margin: 0 auto;
}

.hexus__col {
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 0;
  position: relative;
}
.hexus__col-label {
  position: absolute;
  top: -32px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hexus__chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(254,69,28,0.28);
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  transition: border-color 240ms ease, background 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  min-height: 48px;
}
.hexus__chip:hover {
  border-color: var(--accent);
  background: rgba(254,69,28,0.06);
  box-shadow: 0 0 0 1px rgba(254,69,28,0.4), 0 8px 28px -10px rgba(254,69,28,0.5);
}
.hexus__col--agents .hexus__chip:hover { transform: translateX(2px); }
.hexus__col--connectors .hexus__chip:hover { transform: translateX(-2px); }

.hexus__chip-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.hexus__chip-icon svg { width: 100%; height: 100%; }
.hexus__chip-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hexus__chip-logo--light { filter: brightness(0) invert(1); }
.hexus__chip-logo--warm {
  filter: brightness(0) saturate(100%) invert(73%) sepia(62%) saturate(662%) hue-rotate(346deg) brightness(96%) contrast(91%);
}
.hexus__chip-logo--hermes {
  width: 28px;
  height: 28px;
  margin-left: -3px;
}

/* Color zones — three distinct identities so agents (purple) and connectors (amber)
   read as clearly separate FROM Threshold itself (orange core/rings/satellites). */

/* Agents (left): purple */
.hexus__col--agents .hexus__chip-icon { color: var(--accent-3); }
.hexus__col--agents .hexus__chip-icon:not(.hexus__chip-icon--fallback) { color: inherit; }
.hexus__col--agents .hexus__chip { border-color: rgba(139,111,232,0.32); }
.hexus__col--agents .hexus__chip:hover {
  border-color: var(--accent-3);
  background: rgba(139,111,232,0.06);
  box-shadow: 0 0 0 1px rgba(139,111,232,0.4), 0 8px 28px -10px rgba(139,111,232,0.5);
}

/* Connectors (right): amber */
.hexus__col--connectors .hexus__chip-icon { color: var(--accent-2); }
.hexus__col--connectors .hexus__chip-icon:not(.hexus__chip-icon--fallback) { color: inherit; }
.hexus__col--connectors .hexus__chip { border-color: rgba(229,165,58,0.32); }
.hexus__col--connectors .hexus__chip:hover {
  border-color: var(--accent-2);
  background: rgba(229,165,58,0.06);
  box-shadow: 0 0 0 1px rgba(229,165,58,0.4), 0 8px 28px -10px rgba(229,165,58,0.5);
}
.hexus__chip-name {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hexus__stage {
  position: relative;
  aspect-ratio: 1000 / 700;
  width: 100%;
}
.hexus__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}

/* Twinkling stars */
.hexus__stars circle {
  opacity: 0.5;
  animation: hexusStar 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes hexusStar {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.85; }
}

/* Particle streams — dashed flow */
.hexus__streams .hexus__stream {
  stroke-dasharray: 2 7;
  animation: hexusFlow var(--s, 3s) linear infinite;
}
@keyframes hexusFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -90; }
}

/* Concentric rings */
.hexus__ring--1 {
  transform-origin: 500px 350px;
  animation: hexusPulse1 5.4s ease-in-out infinite;
}
.hexus__ring--2 {
  transform-origin: 500px 350px;
  animation: hexusPulse2 7.8s ease-in-out infinite, hexusSpin 60s linear infinite;
}
.hexus__ring--3 {
  transform-origin: 500px 350px;
  animation: hexusPulse3 9s ease-in-out infinite;
}
@keyframes hexusPulse1 {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.04); opacity: 0.78; }
}
@keyframes hexusPulse2 {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.55; }
}
@keyframes hexusPulse3 {
  0%, 100% { transform: scale(1);    opacity: 0.25; }
  50%      { transform: scale(1.02); opacity: 0.45; }
}
@keyframes hexusSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Satellite halos — slow counter-spin */
.hexus__halos circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: hexusSpin 24s linear infinite reverse;
}

/* Core breathing — synced to packet arrival cadence (~3.2s average) with
   a sharp brightness spike at the peak that mimics "packet absorbed". */
.hexus__core-disk {
  transform-origin: center;
  transform-box: fill-box;
  animation: hexusBreath 3.2s cubic-bezier(.22,1,.36,1) infinite;
}
.hexus__core-aura {
  transform-origin: center;
  transform-box: fill-box;
  animation: hexusAura 3.2s ease-in-out infinite;
}
@keyframes hexusBreath {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(254,69,28,0.55)); }
  78%  { transform: scale(1.02); filter: drop-shadow(0 0 12px rgba(254,69,28,0.70)); }
  90%  { transform: scale(1.07); filter: drop-shadow(0 0 28px rgba(254,200,160,1)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(254,69,28,0.55)); }
}
@keyframes hexusAura {
  0%   { transform: scale(1);    opacity: 0.65; }
  78%  { transform: scale(1.10); opacity: 0.85; }
  90%  { transform: scale(1.25); opacity: 1;    }
  100% { transform: scale(1);    opacity: 0.65; }
}

/* Satellite disc glow on icons */
.hexus__sat circle {
  transition: transform 320ms ease;
}
.hexus__sat {
  filter: drop-shadow(0 0 6px rgba(254,69,28,0.35));
}

/* ── Satellite nodes: label (always visible) + info panel (hover/tap) ─────── */
.hexus__node {
  position: absolute;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
/* Node positions — anchored at each satellite, with the label sitting at
   the appropriate offset away from the central core. */
.hexus__node--top {
  left: 50%; top: calc(140 / 700 * 100% - 64px);
  transform: translate(-50%, 0);
  flex-direction: column;
}
.hexus__node--bottom {
  left: 50%; top: calc(560 / 700 * 100% + 32px);
  transform: translate(-50%, 0);
  flex-direction: column;
}
.hexus__node--right {
  top: 50%; left: calc(710 / 1000 * 100% + 32px);
  transform: translate(0, -50%);
  flex-direction: row;
}
.hexus__node--left {
  top: 50%; right: calc((1000 - 290) / 1000 * 100% + 32px);
  transform: translate(0, -50%);
  flex-direction: row-reverse;
}

/* Label button — looks like text, behaves as a clickable affordance */
.hexus__label {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 220ms ease;
}
.hexus__label:hover,
.hexus__label:focus-visible {
  color: var(--accent);
  outline: none;
}
.hexus__node--right .hexus__label { text-align: left; }
.hexus__node--left .hexus__label { text-align: right; flex-direction: row-reverse; }

.hexus__info-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.hexus__node:hover .hexus__info-dot,
.hexus__node:focus-within .hexus__info-dot {
  opacity: 1;
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(254,69,28,0.8);
}

/* Invisible hit-zone bridge from label to satellite icon —
   hovering anywhere over the label OR the satellite area opens the panel. */
.hexus__node::before {
  content: '';
  position: absolute;
  pointer-events: auto;
  /* background: rgba(0,255,0,0.18); */ /* debug */
}
.hexus__node--top::before {
  left: 50%; top: 100%;
  transform: translateX(-50%);
  width: 100px; height: 80px;
}
.hexus__node--bottom::before {
  left: 50%; bottom: 100%;
  transform: translateX(-50%);
  width: 100px; height: 80px;
}
.hexus__node--left::before {
  top: 50%; left: 100%;
  transform: translateY(-50%);
  width: 90px; height: 80px;
}
.hexus__node--right::before {
  top: 50%; right: 100%;
  transform: translateY(-50%);
  width: 90px; height: 80px;
}

/* The info panel — hidden by default, revealed on hover/tap */
.hexus__panel {
  position: absolute;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(254,69,28,0.45);
  border-radius: 10px;
  padding: 16px 18px;
  width: 240px;
  box-shadow:
    0 0 0 1px rgba(254,69,28,0.18),
    0 20px 48px -16px rgba(0,0,0,0.7),
    0 0 30px -8px rgba(254,69,28,0.4);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transform-origin: center;
  transition: opacity 240ms cubic-bezier(.22,1,.36,1),
              visibility 240ms,
              transform 240ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 5;
}
.hexus__node:hover .hexus__panel,
.hexus__node:focus-within .hexus__panel {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

/* Panel position — anchored to its node, pushed away from the central core. */
.hexus__node--top .hexus__panel    { top: calc(100% + 12px); left: 50%; transform: translateX(-50%) scale(0.95); transform-origin: top center; }
.hexus__node--top:hover .hexus__panel,
.hexus__node--top:focus-within .hexus__panel { transform: translateX(-50%) scale(1); }

.hexus__node--bottom .hexus__panel { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) scale(0.95); transform-origin: bottom center; }
.hexus__node--bottom:hover .hexus__panel,
.hexus__node--bottom:focus-within .hexus__panel { transform: translateX(-50%) scale(1); }

.hexus__node--right .hexus__panel  { left: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(0.95); transform-origin: left center; }
.hexus__node--right:hover .hexus__panel,
.hexus__node--right:focus-within .hexus__panel { transform: translateY(-50%) scale(1); }

.hexus__node--left .hexus__panel   { right: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(0.95); transform-origin: right center; }
.hexus__node--left:hover .hexus__panel,
.hexus__node--left:focus-within .hexus__panel { transform: translateY(-50%) scale(1); }

.hexus__panel-h {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.hexus__panel-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin: 0 0 12px;
}
.hexus__panel-bullets {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.hexus__panel-bullets li {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  padding-left: 14px;
  position: relative;
}
.hexus__panel-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* ── Energy packets — bright sparks flying along streams ──────────────────── */
.hexus__packets circle {
  filter: drop-shadow(0 0 4px rgba(254,154,111,0.95));
}

/* ── First-paint reveal sequence ─────────────────────────────────────────── */
/* Initial hidden state (before .is-revealed is added by JS) */
.hexus:not(.is-revealed) .hexus__chip {
  opacity: 0;
  transform: translateY(8px);
}
.hexus:not(.is-revealed) .hexus__col--connectors .hexus__chip {
  transform: translateY(8px);
}
.hexus:not(.is-revealed) .hexus__col-label {
  opacity: 0;
}
.hexus:not(.is-revealed) .hexus__core-inner {
  opacity: 0;
  transform: scale(0.7);
  transform-origin: center;
  transform-box: fill-box;
}
.hexus:not(.is-revealed) .hexus__rings circle,
.hexus:not(.is-revealed) .hexus__halos circle {
  opacity: 0;
}
.hexus:not(.is-revealed) .hexus__sats {
  opacity: 0;
}
.hexus:not(.is-revealed) .hexus__streams,
.hexus:not(.is-revealed) .hexus__under,
.hexus:not(.is-revealed) .hexus__packets,
.hexus:not(.is-revealed) .hexus__stars {
  opacity: 0;
  visibility: hidden;
}
.hexus:not(.is-revealed) .hexus__node {
  opacity: 0;
  transform-origin: center;
}

/* Revealed state — animate in with staggered delays */
.hexus.is-revealed .hexus__core-inner {
  animation: hexusRevealCore 700ms cubic-bezier(.22,1,.36,1) 200ms both;
}
.hexus.is-revealed .hexus__rings circle {
  animation: hexusRevealFade 600ms ease-out 400ms both;
}
.hexus.is-revealed .hexus__halos circle {
  animation: hexusRevealFade 600ms ease-out 700ms both;
}
.hexus.is-revealed .hexus__sats {
  animation: hexusRevealFade 600ms ease-out 600ms both;
}
.hexus.is-revealed .hexus__col-label {
  animation: hexusRevealFade 500ms ease-out 800ms both;
}
.hexus.is-revealed .hexus__chip {
  animation: hexusRevealChip 600ms cubic-bezier(.22,1,.36,1) both;
}
/* Stagger each chip — agents from top down, connectors from top down too */
.hexus.is-revealed .hexus__col--agents .hexus__chip:nth-child(2)     { animation-delay: 800ms; }
.hexus.is-revealed .hexus__col--agents .hexus__chip:nth-child(3)     { animation-delay: 860ms; }
.hexus.is-revealed .hexus__col--agents .hexus__chip:nth-child(4)     { animation-delay: 920ms; }
.hexus.is-revealed .hexus__col--agents .hexus__chip:nth-child(5)     { animation-delay: 980ms; }
.hexus.is-revealed .hexus__col--agents .hexus__chip:nth-child(6)     { animation-delay: 1040ms; }
.hexus.is-revealed .hexus__col--agents .hexus__chip:nth-child(7)     { animation-delay: 1100ms; }
.hexus.is-revealed .hexus__col--connectors .hexus__chip:nth-child(2) { animation-delay: 800ms; }
.hexus.is-revealed .hexus__col--connectors .hexus__chip:nth-child(3) { animation-delay: 860ms; }
.hexus.is-revealed .hexus__col--connectors .hexus__chip:nth-child(4) { animation-delay: 920ms; }
.hexus.is-revealed .hexus__col--connectors .hexus__chip:nth-child(5) { animation-delay: 980ms; }
.hexus.is-revealed .hexus__col--connectors .hexus__chip:nth-child(6) { animation-delay: 1040ms; }
.hexus.is-revealed .hexus__col--connectors .hexus__chip:nth-child(7) { animation-delay: 1100ms; }

.hexus.is-revealed .hexus__under {
  animation: hexusRevealUnder 800ms ease-out 1200ms both;
}
.hexus.is-revealed .hexus__streams {
  animation: hexusRevealFade 800ms ease-out 1400ms both;
}
.hexus.is-revealed .hexus__packets {
  animation: hexusRevealFade 600ms ease-out 1800ms both;
}
.hexus.is-revealed .hexus__node {
  animation: hexusRevealFade 600ms ease-out 1600ms both;
}
.hexus.is-revealed .hexus__stars {
  animation: hexusRevealFade 600ms ease-out 1500ms both;
}

@keyframes hexusRevealCore {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hexusRevealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Underlay fades to its soft target opacity, not full 1 — keeps the streams
   reading as thin dashed lines with a faint glow rather than thick solid bars. */
@keyframes hexusRevealUnder {
  from { opacity: 0; }
  to   { opacity: 0.22; }
}
@keyframes hexusRevealChip {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion — skip the reveal animations */
@media (prefers-reduced-motion: reduce) {
  .hexus:not(.is-revealed) .hexus__chip,
  .hexus:not(.is-revealed) .hexus__col-label,
  .hexus:not(.is-revealed) .hexus__core,
  .hexus:not(.is-revealed) .hexus__rings circle,
  .hexus:not(.is-revealed) .hexus__halos circle,
  .hexus:not(.is-revealed) .hexus__sats,
  .hexus:not(.is-revealed) .hexus__streams,
  .hexus:not(.is-revealed) .hexus__under,
  .hexus:not(.is-revealed) .hexus__packets,
  .hexus:not(.is-revealed) .hexus__node {
    opacity: 1;
    transform: none;
  }
  .hexus.is-revealed * {
    animation: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hexus__stars circle,
  .hexus__streams .hexus__stream,
  .hexus__ring--1, .hexus__ring--2, .hexus__ring--3,
  .hexus__halos circle,
  .hexus__core-disk, .hexus__core-aura {
    animation: none !important;
  }
}

/* Responsive: tablet — compress chips, shrink label fonts */
@media (max-width: 1100px) {
  .hexus {
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    gap: 24px;
  }
  .hexus__chip { padding: 10px 12px; font-size: 13px; gap: 10px; min-height: 44px; }
  .hexus__chip-name { font-size: 13px; }
}

/* Mobile: stack vertically — chips on top, stage in middle, chips on bottom */
@media (max-width: 760px) {
  .hexus {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .hexus__col {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 8px;
    padding: 28px 0 0;
  }
  .hexus__col-label {
    top: 0;
  }
  .hexus__chip {
    flex: 0 1 auto;
    padding: 8px 12px; min-height: 38px;
    font-size: 12.5px;
  }
  .hexus__chip-icon { width: 18px; height: 18px; }
  .hexus__chip-name { font-size: 12.5px; }
  .hexus__label {
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }
}


/* ── Logo wordmark (Inversed lockup SVG) ─────────────────────────────────── */
.t-nav__logo .wordmark {
  height: 22px;
  width: auto;
  display: block;
}
.t-footer-logo .wordmark {
  height: 20px;
  width: auto;
  display: block;
  /* Invert the ink-dark glyphs to white while preserving the orange channel */
}
/* The footer wordmark's orange "I" mark would be killed by brightness:0; layer a
   color-preserving copy beneath using a CSS mask trick is overkill. Cleanest:
   render the SVG inline. Until we do that, accept a pure-white wordmark in the
   footer — it still reads as the Inversed mark + word. */

/* ── Functionalities section ─────────────────────────────────────────────── */
.functionalities .func-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.functionalities .func-head .eyebrow { justify-content: center; }
.functionalities .func-head h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.04; letter-spacing: -0.022em;
  margin: 22px 0 18px;
}
.functionalities .func-head h2 em {
  font-style: italic; font-weight: 300; color: var(--accent);
}
.functionalities .func-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.func-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .func-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .func-grid { grid-template-columns: 1fr; } }

.func-card {
  position: relative;
  padding: 28px 26px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.func-card__top {
  display: flex; align-items: center; justify-content: space-between;
}
.func-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: rgba(254,69,28,0.08);
  border-radius: 8px;
}
.func-icon svg { width: 20px; height: 20px; }
.func-status {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  line-height: 1;
}
.func-status--live {
  background: var(--accent); color: #fff;
}
.func-status--beta {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.func-status--planned {
  background: transparent; color: var(--muted);
  border: 1px solid var(--rule-strong);
}
.func-name {
  margin: 4px 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.func-desc {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft);
}

/* Hover: accent border + soft accent glow + subtle lift */
.func-card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 38px -28px rgba(254,69,28,0.45), 0 0 0 1px var(--accent);
  transform: translateY(-2px);
}

/* ── FAQ sub-group head ──────────────────────────────────────────────────── */
.faq-group-head {
  margin: 32px 0 14px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.faq-group-head span {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.faq-group-head + .faq__item { border-top: 1px solid var(--rule); }