/* =========================================================================
   agent-wire.com — splash
   The 5-second hook. No jargon. Same paper/ink/signal as the deep doc.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:         oklch(0.96 0.01 85);
  --ink-dim:     oklch(0.82 0.012 85);
  --ink-muted:   oklch(0.62 0.012 85);
  --ink-faint:   oklch(0.42 0.010 85);
  --ink-ghost:   oklch(0.28 0.008 85);
  --ink-void:    oklch(0.20 0.005 85);

  --paper:       oklch(0.13 0.006 75);
  --paper-1:     oklch(0.16 0.008 75);
  --paper-2:     oklch(0.20 0.010 75);

  --signal:      oklch(0.82 0.16 75);     /* amber */
  --signal-dim:  oklch(0.62 0.12 75);
  --signal-soft: oklch(0.82 0.16 75 / 0.12);

  --moss:        oklch(0.78 0.12 150);

  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --body:    'Space Grotesk', -apple-system, system-ui, sans-serif;

  --gutter: clamp(24px, 5vw, 80px);
  --max:    1320px;
}

/* ── Reveal animation system (ported from /contributions) ────────
   Elements tagged [data-in] start hidden + slightly below their
   final position; an IntersectionObserver in splash.html adds .in
   when they scroll into view, triggering a smooth fade + lift.
   Optional --d CSS variable per-element staggers cascade groups
   (e.g. the big-claim's line stack, the §07 verb list).
   prefers-reduced-motion disables the animation cleanly. */
[data-in] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
[data-in].in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-in] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

html, body { height: 100%; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "ss01", "ss02", "kern";
}

/* Same ambient wash + grain as the deep doc, dialed back a touch */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 700px at 50% 8%,  oklch(0.82 0.16 75 / 0.07), transparent 70%),
    radial-gradient(800px  600px at 85% 92%, oklch(0.72 0.14 330 / 0.03), transparent 70%);
}
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.05 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--signal); color: var(--paper); }

main { position: relative; z-index: 1; }

/* ── Top bar (matches index.html) ───────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-muted);
  background: color-mix(in oklch, var(--paper) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-ghost);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 14px;
}
.brand .glyph {
  width: 14px; height: 14px;
  border: 1.5px solid var(--signal);
  transform: rotate(45deg);
  position: relative;
}
.brand .glyph::before {
  content: '';
  position: absolute; inset: 3px;
  background: var(--signal);
}
.brand .domain {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  margin-left: 6px;
}
.tm {
  font-size: 0.55em;
  vertical-align: 0.4em;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 1px;
}
.topbar nav a {
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  transition: color 120ms ease;
}
.topbar nav a:hover { color: var(--signal); }

/* ── HOOK ───────────────────────────────────────────────── */
.hook {
  min-height: calc(100vh - 56px);
  padding: clamp(70px, 11vh, 140px) var(--gutter) clamp(60px, 8vh, 100px);
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.eyebrow .dot {
  width: 7px; height: 7px;
  background: var(--signal);
  display: inline-block;
  transform: rotate(45deg);
  box-shadow: 0 0 16px var(--signal);
}

.claim {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.claim .line {
  display: block;
  position: relative;
}
.claim .is-strike {
  color: var(--ink-faint);
  position: relative;
  width: max-content;
}
.claim .is-strike::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 56%;
  height: 0.07em;
  background: var(--ink-faint);
  transform: scaleX(0);
  transform-origin: left;
}
/* Strike animation deferred — fires when .claim picks up .is-revealed via
   the IntersectionObserver in splash.html, so the H1 doesn't burn its
   moment while still below the fold during the curated intro screen. */
.claim.is-revealed .is-strike::after {
  animation: strike 900ms cubic-bezier(.22,.61,.36,1) 200ms forwards;
}
@keyframes strike {
  to { transform: scaleX(1); }
}
.claim .is-signal {
  color: var(--signal);
}

.sub {
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 620px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink-dim);
}
.sub em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}

/* Hook preface — opening epigraph between eyebrow and H1. Reads like a
   curator's note: a single italic line announcing "metaphors incoming"
   so the boulder/snowball/electricity beats land as deliberate teaching
   tools, not loose poetry. Marked with a small outlined diamond that
   echoes the eyebrow's filled diamond (hierarchy: filled = primary
   marker, outlined = secondary marker). No utilitarian sidebar bar —
   intentional, restrained, lets the typography do the work. */
.hook-preface {
  position: relative;
  margin-top: clamp(24px, 3.5vh, 44px);
  margin-bottom: clamp(48px, 7vh, 88px);
  padding-left: clamp(28px, 3vw, 40px);
  max-width: 640px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14.5px, 1.15vw, 17px);
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.hook-preface::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--signal);
  background: transparent;
  transform: rotate(45deg);
  box-shadow: 0 0 12px color-mix(in oklch, var(--signal) 45%, transparent);
}
.hook-preface .hook-welcome {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
}

.scroll-hint {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(28px, 5vh, 56px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Downward chevron — clear "scroll down" indicator. Two CSS borders
   rotated 45° form a clean chevron shape; gentle bounce animation
   conveys motion without being noisy. */
.scroll-hint .chevron {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--signal);
  border-bottom: 1.5px solid var(--signal);
  transform: rotate(45deg);
  animation: chevron-bounce 2.2s ease-in-out infinite;
}
@keyframes chevron-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0);   opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* ── Section scaffolding ────────────────────────────────── */
section {
  position: relative;
  border-top: 1px solid var(--ink-ghost);
}
.hook { border-top: none; }

/* The claim-section (H1 + sub) belongs to the same intro arc as the hook
   — no visible seam between them. The section-divider rule below adds a
   diamond glyph to any section that follows another section; we suppress
   both the border and the divider for the claim-section specifically. */
.claim-section { border-top: none; }
.hook + .claim-section::before { display: none; }

/* Section divider glyph — small diamond centered on the top border,
   echoing the brand mark. Skips the CTA (it has its own ::before
   gradient that wins on specificity, and the amber wash is already
   doing the visual-divider work for the page's final transition). */
section + section::before {
  content: '';
  position: absolute;
  top: -7px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink-faint);
  background: var(--paper);
  transform: rotate(45deg);
  z-index: 2;
}

/* Claim-section — H1 + sub revealed on scroll past the intro screen.
   Generous top padding so the H1 lands centered in the viewport (not
   jammed against the top edge) when the user scrolls. */
.claim-section {
  padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(60px, 10vh, 120px);
  max-width: var(--max);
  margin: 0 auto;
}

.num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--signal);
  display: inline-block;
  margin-right: 14px;
  vertical-align: 0.45em;
}

/* ── FLIP ───────────────────────────────────────────────── */
.flip {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.flip-head {
  margin-bottom: clamp(50px, 7vh, 88px);
}
.flip-head h2 {
  display: inline;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.conseq-head { margin-bottom: clamp(40px, 6vh, 64px); }
.conseq-head h2 {
  display: inline;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.flip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.flip-col {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 36px);
  border: 1px solid var(--ink-ghost);
  background: color-mix(in oklch, var(--paper-1) 60%, transparent);
  position: relative;
}
.flip-col.is-new {
  border-color: color-mix(in oklch, var(--signal) 40%, var(--ink-ghost));
  background:
    linear-gradient(180deg, var(--signal-soft), transparent 40%),
    color-mix(in oklch, var(--paper-1) 60%, transparent);
}
.col-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.col-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ink-muted);
  display: inline-block;
}
.is-new .col-label { color: var(--signal); }
.is-new .col-label::before { background: var(--signal); box-shadow: 0 0 10px var(--signal); }

.steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.steps li {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-dim);
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed color-mix(in oklch, var(--ink-ghost) 80%, transparent);
}
.steps li:last-child { border-bottom: none; padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  padding-top: 0.45em;
}
.is-new .steps li::before { color: var(--signal-dim); }

.steps .aside {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--signal);
}
.steps .punch {
  color: var(--ink);
  font-weight: 500;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-ghost);
  border-bottom: none;
}
.is-new .steps .punch {
  color: var(--signal);
  border-top-color: color-mix(in oklch, var(--signal) 40%, var(--ink-ghost));
}

/* ── CONSEQUENCE / FLYWHEEL ─────────────────────────────── */
.consequence,
.flywheel {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.big-claim {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  max-width: 1080px;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: clamp(28px, 4vh, 44px);
}
.big-claim .line { display: block; }
.big-claim .is-signal { color: var(--signal); }

/* Rotor — single rotating word inside the big-claim, cycling through
   contribution-shaped artifacts (mechanism / method / process /
   workflow / analysis / playbook / etc). The .rotor slot's min-width
   is locked to the widest word (set by JS on init + resize) so the
   layout doesn't shift word-to-word. The fill underline lives on
   .rotor-word so it matches the actual word's width — it tracks the
   word, not the slot. */
.big-claim .rotor {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  color: var(--ink);
  /* min-width set by JS = max-word-width */
}

.big-claim .rotor-word {
  display: inline-block;
  position: relative;
  padding-bottom: 0.18em;          /* room for the fill underline */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms cubic-bezier(.4,0,.2,1),
              transform 280ms cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
/* Fill underline — width matches the word (not the slot). Animates
   from scaleX(0) → scaleX(1) over the dwell. Reset via class toggle. */
.big-claim .rotor-word::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.55;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--signal) 50%, transparent));
}
.big-claim .rotor.is-filling .rotor-word::after {
  animation: rotor-fill 2500ms linear forwards;
}
@keyframes rotor-fill {
  from { transform: scaleX(0); opacity: 0.45; }
  to   { transform: scaleX(1); opacity: 0.75; }
}
.big-claim .rotor-word.is-out {
  opacity: 0;
  transform: translateY(-0.4em);
}
.big-claim .rotor-word.is-in {
  opacity: 0;
  transform: translateY(0.4em);
  transition: none;
}

.small-claim {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 720px;
  text-wrap: pretty;
}
.small-claim em {
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
}

/* ── ELECTRICITY MOMENT ─────────────────────────────────── */
.electricity {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.elec-body {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 30px);
  margin-top: clamp(12px, 2vh, 24px);
}
.elec-lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
}
.elec-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--signal);
  margin: clamp(12px, 2vh, 20px) 0 clamp(20px, 3vh, 32px);
}
.elec-prose {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.elec-list {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: clamp(14px, 2.5vh, 22px) 0;
  border-top: 1px solid var(--ink-ghost);
  border-bottom: 1px solid var(--ink-ghost);
  margin: clamp(8px, 1.5vh, 14px) 0;
}
.elec-pivot {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--signal);
  margin: clamp(28px, 4.5vh, 56px) 0 clamp(10px, 1.6vh, 22px);
}
.elec-stamp {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: clamp(32px, 5vh, 56px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid color-mix(in oklch, var(--signal) 40%, var(--ink-ghost));
  text-wrap: balance;
}
.elec-brand {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--signal);
  margin-right: 0.2em;
}
.elec-stamp .tm {
  font-size: 0.45em;
  vertical-align: 0.6em;
  color: var(--signal-dim);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.05em;
}
.whynow {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.why-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.why-left h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 12px;
  text-wrap: balance;
}
.why-right p {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 22px;
  max-width: 580px;
}
.why-right p.closer {
  color: var(--signal);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  margin-top: 14px;
}

/* ── CTA ────────────────────────────────────────────────── */
.cta {
  padding: clamp(100px, 16vh, 180px) var(--gutter) clamp(80px, 12vh, 140px);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 50% 20%, var(--signal-soft), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 4vh, 40px);
}
.cta-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.cta-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ink-ghost);
  transition: all 180ms ease;
  color: var(--ink);
  background: var(--paper-1);
}
.btn .arrow {
  font-family: var(--display);
  font-size: 16px;
  transition: transform 180ms ease;
}
.btn:hover .arrow { transform: translateX(4px); }
.btn.is-primary {
  background: var(--signal);
  color: var(--paper);
  border-color: var(--signal);
  font-weight: 600;
}
.btn.is-primary:hover {
  background: color-mix(in oklch, var(--signal) 90%, white);
}
.btn.is-ghost {
  background: transparent;
}
.btn.is-ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
}

.cta-foot {
  margin-top: clamp(16px, 3vh, 28px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cta-foot .sep { color: var(--ink-ghost); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 880px) {
  .flip-grid { grid-template-columns: 1fr; }
  .why-grid  { grid-template-columns: 1fr; }
  .topbar nav a { font-size: 12px; }
}
@media (max-width: 520px) {
  .claim .is-strike { width: auto; }
  .scroll-hint { left: var(--gutter); }
}

/* ── CHAIN ──────────────────────────────────────────────── */
.chain {
  padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(80px, 12vh, 140px);
  max-width: var(--max);
  margin: 0 auto;
}
.chain-head {
  margin-bottom: clamp(28px, 4vh, 44px);
}
.chain-head h2 {
  display: inline;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.chain-lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--ink-dim);
  max-width: 820px;
  margin-bottom: clamp(40px, 7vh, 72px);
  text-wrap: balance;
}
.chain-lede .is-signal { color: var(--signal); }

.chain-viz {
  position: relative;
  padding: clamp(24px, 4vh, 48px) clamp(8px, 2vw, 24px);
  border: 1px solid var(--ink-ghost);
  background:
    radial-gradient(800px 300px at 50% 50%, var(--signal-soft), transparent 70%),
    color-mix(in oklch, var(--paper-1) 50%, transparent);
}
.chain-viz svg {
  width: 100%;
  height: auto;
  max-height: 640px;
  display: block;
  overflow: visible;
}

/* Tier annotation text at the bottom of the diagram */
.tier-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}

/* Left-side tier labels — pyramids-style annotations along each row */
.tier-side-tag {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-muted);
  opacity: 0;
  transition: opacity 600ms ease;
}
.tier-side-tag.is-shown { opacity: 0.85; }

/* Restart button — top-right of the viz */
.chain-restart {
  position: absolute;
  top: clamp(16px, 2.5vh, 28px);
  right: clamp(16px, 2.5vw, 28px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper-1);
  border: 1px solid var(--ink-ghost);
  cursor: pointer;
  transition: all 180ms ease;
}
.chain-restart:hover {
  color: var(--signal);
  border-color: var(--signal);
}
.chain-restart .restart-icon {
  display: inline-block;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  transition: transform 380ms cubic-bezier(.4,.05,.4,1);
}
.chain-restart:hover .restart-icon { transform: rotate(-180deg); }

/* Node grow-in — applied transiently when revealing during growth */
.node.is-growing-in .node-shape {
  animation: node-grow-in 520ms cubic-bezier(.2,.7,.3,1.4);
}
@keyframes node-grow-in {
  0%   { opacity: 0; transform: rotate(45deg) scale(0.3); }
  55%  { opacity: 1; transform: rotate(45deg) scale(1.22); }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}
.node.is-origin.is-growing-in .node-shape {
  animation: origin-grow-in 760ms cubic-bezier(.2,.7,.3,1.5);
}
@keyframes origin-grow-in {
  0%   { opacity: 0; transform: rotate(45deg) scale(0.15); }
  55%  { opacity: 1; transform: rotate(45deg) scale(1.3); }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* Pre-growth states — hidden until the section enters view, revealed in waves */
.node {
  transition: opacity 480ms ease;
}
.node.pre-growth { opacity: 0; }
.node.pre-growth-origin .node-shape,
.node.pre-growth-origin .node-label {
  opacity: 0;
}
.node.pre-growth-origin .node-shape {
  transition: opacity 700ms ease;
}
.node.pre-growth-origin .node-label {
  transition: opacity 600ms ease 250ms;
}

.edge {
  stroke: var(--ink-faint);
  stroke-width: 1.3;
  stroke-dasharray: 3 4;
  transition: stroke-dashoffset 800ms cubic-bezier(.4,.05,.4,1), opacity 400ms ease, stroke 700ms ease, stroke-width 700ms ease;
}
.edge.is-lit {
  stroke: var(--signal);
  stroke-width: 2;
  transition: stroke 220ms ease, stroke-width 220ms ease;
}

/* Nodes */
.node { cursor: pointer; }
.node .node-shape {
  fill: var(--paper);
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  transition: fill 200ms ease, stroke 200ms ease, transform 200ms ease;
  transform-origin: center;
  transform-box: fill-box;
}
.node:hover .node-shape {
  stroke: var(--signal);
}
.node.is-origin .node-shape {
  stroke: var(--signal);
  stroke-width: 2;
}
.node.is-origin .node-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--signal);
}
.node.is-leaf .node-shape {
  stroke: var(--ink-faint);
}
.node.is-leaf:hover .node-shape {
  stroke: var(--signal);
}
.node.is-used .node-shape {
  fill: var(--signal);
  stroke: var(--signal);
  filter: url(#glow);
  animation: leaf-pop 700ms ease-out;
}
@keyframes leaf-pop {
  0%   { transform: rotate(45deg) scale(1); }
  35%  { transform: rotate(45deg) scale(1.7); }
  100% { transform: rotate(45deg) scale(1); }
}
.node.is-head .node-shape {
  fill: var(--paper-1);
  stroke: var(--signal-dim);
}
.node.is-lit .node-shape {
  fill: var(--signal);
  stroke: var(--signal);
  filter: url(#glow);
}
.node.is-pulse .node-shape {
  animation: node-pulse 540ms ease-out;
}
@keyframes node-pulse {
  0%   { transform: rotate(45deg) scale(1); }
  40%  { transform: rotate(45deg) scale(1.55); }
  100% { transform: rotate(45deg) scale(1); }
}

.node-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-muted);
  transition: fill 200ms ease;
}
.node.is-origin .node-label,
.node.is-head .node-label { fill: var(--signal); }

/* Travelling payment dot */
.pay-dot {
  fill: var(--signal);
  filter: url(#glow);
  pointer-events: none;
}

/* "that's you" anchor label */
.chain-anchor {
  position: absolute;
  left: clamp(28px, 5%, 70px);
  top: clamp(18px, 4vh, 36px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}
.chain-anchor-arrow {
  font-family: var(--display);
  font-size: 22px;
  color: var(--signal);
  margin-left: 8px;
  line-height: 1;
}

.chain-hint {
  margin-top: clamp(16px, 3vh, 28px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.chain-hint-dot {
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--signal);
  animation: hint-pulse 1.6s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

.chain-caption {
  margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 640px;
  font-style: italic;
}

/* Inline CTA after the chain — catches the convinced-already reader
   who's seen the proof and is ready to act without scrolling through
   the rest of the page. Discreet (mono, muted, dashed underline),
   not competing with the big final CTA. */
.chain-early-cta {
  margin-top: clamp(20px, 3vh, 32px);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chain-early-cta a {
  color: var(--ink-muted);
  border-bottom: 1px dashed color-mix(in oklch, var(--signal) 50%, transparent);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}
.chain-early-cta a:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

/* ── BREATHER · pause between §03 chain and §04 boulders ───
   Centered, generous vertical space, two beats:
     - question (muted, conversational, "I see you")
     - punch (signal, confident, sets up §04's relief) */
.breather {
  padding: clamp(80px, 14vh, 160px) var(--gutter);
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.breather-question {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  max-width: 820px;
  margin: 0 auto clamp(24px, 4vh, 44px);
  text-wrap: balance;
}
.breather-punch {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--signal);
  text-wrap: balance;
}

/* AI system tag — small mono chip with subtle amber tint + outline.
   Grounds the floaty boulder/snowball metaphor in §04 by anchoring the
   one literal AI reference. Reads as an inline system label —
   distinctly different from prose, signals "this is the technical
   thing the metaphor is about." Only applied to literal "AI" mentions
   (not "intelligence" / "agent" / "composable intelligence" — those
   stay as the elevated/conversational forms). */
.ai-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62em;
  letter-spacing: 0.2em;
  color: var(--signal);
  font-weight: 600;
  padding: 0.22em 0.55em 0.18em;
  background: color-mix(in oklch, var(--signal) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--signal) 35%, transparent);
  border-radius: 3px;
  vertical-align: 0.22em;
  margin-right: 0.25em;
  text-indent: 0.05em; /* visual centering compensation for letter-spacing */
}

/* ── BOULDERS TO SNOWBALLS ──────────────────────────────── */
.snowball {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.snowball-body {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
  margin-top: clamp(12px, 2vh, 24px);
}
.snowball-prose {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.snowball-pivot {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--signal);
  margin: clamp(28px, 4.5vh, 56px) 0 clamp(10px, 1.6vh, 24px);
}
.snowball-prose.snowball-punch {
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.018em;
  margin-top: clamp(20px, 3vh, 36px);
}
.snowball-coda {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(20px, 3.2vh, 32px);
  border-top: 1px solid var(--ink-ghost);
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: uppercase;
  max-width: 560px;
}

.snowball-lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 38px);
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: clamp(8px, 1.5vh, 16px);
}

/* The animatic — two side-by-side hills */
.snowball-viz {
  margin: clamp(28px, 4vh, 48px) 0 clamp(24px, 4vh, 40px);
  padding: clamp(16px, 2.5vh, 28px) 0;
  border-top: 1px solid var(--ink-ghost);
  border-bottom: 1px solid var(--ink-ghost);
}
.snowball-viz svg {
  width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
  overflow: visible;
}
.sb-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}
.sb-scene-new .sb-label { fill: var(--signal); }
.sb-hill {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sb-ground {
  stroke: var(--ink-ghost);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.sb-boulder {
  fill: var(--ink-muted);
  stroke: var(--ink-dim);
  stroke-width: 1;
}
.sb-snowball {
  fill: var(--signal);
  stroke: var(--signal);
  stroke-width: 1;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--signal) 60%, transparent));
}
.flywheel-viz {
  position: relative;
  margin-top: clamp(48px, 8vh, 88px);
  padding: clamp(24px, 4vh, 48px) clamp(8px, 2vw, 24px);
  border: 1px solid var(--ink-ghost);
  background:
    radial-gradient(800px 300px at 50% 12%, var(--signal-soft), transparent 70%),
    color-mix(in oklch, var(--paper-1) 50%, transparent);
}
.flywheel-viz svg {
  width: 100%;
  height: auto;
  max-height: 760px;
  display: block;
  overflow: visible;
}

.flywheel-caption {
  margin-top: clamp(24px, 4vh, 40px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 760px;
  font-style: italic;
}
.flywheel-caption .is-signal {
  color: var(--signal);
  font-weight: 500;
  font-style: normal;
}

/* Market bar */
.fw-market {
  cursor: default;
}
.market-bar {
  fill: color-mix(in oklch, var(--paper-2) 70%, transparent);
  stroke: var(--signal-dim);
  stroke-width: 1.2;
  transition: fill 220ms ease, stroke 220ms ease;
}
.market-label {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--signal-dim);
  transition: fill 220ms ease;
}
.fw-market.is-lit .market-bar {
  fill: color-mix(in oklch, var(--signal) 35%, var(--paper-1));
  stroke: var(--signal);
}
.fw-market.is-lit .market-label { fill: var(--signal); }
.fw-market.is-pulse .market-bar {
  animation: market-pulse 580ms ease-out;
}
@keyframes market-pulse {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

/* Pre-growth market — invisible bar + label */
.fw-market.pre-growth-market .market-bar,
.fw-market.pre-growth-market .market-label {
  opacity: 0;
  transition: opacity 600ms ease;
}
.fw-market:not(.pre-growth-market) .market-bar,
.fw-market:not(.pre-growth-market) .market-label {
  opacity: 1;
  transition: opacity 600ms ease, fill 220ms ease, stroke 220ms ease;
}
.fw-market.is-growing-in .market-bar {
  animation: market-grow-in 700ms cubic-bezier(.2,.7,.3,1.4);
}
@keyframes market-grow-in {
  0%   { opacity: 0; filter: brightness(0.4); }
  60%  { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; filter: brightness(1); }
}

/* Tier-specific node coloring — base palette */
.fw-node.is-trail .node-shape   { stroke: var(--ink-faint); stroke-width: 1.4; }
.fw-node.is-curator .node-shape { stroke: var(--ink-muted); stroke-width: 1.5; }
.fw-node.is-model .node-shape   { stroke: var(--ink-muted); stroke-width: 1.5; }
.fw-node.is-user .node-shape    { stroke: var(--ink-faint); stroke-width: 1.4; }

.fw-node.is-user:hover .node-shape,
.fw-node.is-trail:hover .node-shape { stroke: var(--signal); }

/* Position the flywheel restart button */
.flywheel-restart {
  position: absolute;
  top: clamp(12px, 2vh, 22px);
  right: clamp(12px, 2vw, 22px);
  z-index: 2;
}

/* Pause beat between §06's stamp ("AGENT WIRE™ is the wiring.") and
   §07's reveal ("You're early."). Quiet, italic, slightly muted —
   reads as the page slowing down to address the reader directly
   before §07's H2 lands as the held-breath payoff. */
.opp-pause {
  margin-bottom: clamp(40px, 6vh, 80px);
  max-width: 720px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  font-style: italic;
  text-wrap: pretty;
}

/* ── §07 OPPORTUNITY · You're early ─────────────────────────
   Bridge between §06's electricity stamp ("AGENT WIRE™ is the
   wiring.") and the CTA ("Plug in."). Names the reader's role:
   they're early; here's what that means; here's what to do.
   Draws prose from the v15 deck closes (especially "the biggest
   challenge is imagining how things could be if the past weren't
   predictive of the future"). */
.opportunity {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.opp-body {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
  margin-top: clamp(12px, 2vh, 24px);
}
.opp-lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
}
.opp-prose {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  text-wrap: pretty;
}
/* Closing question — the moment the page turns to the reader.
   Sized to land as a true reveal (significantly larger than the
   prose around it) so it reads as the §07 visual peak. */
.opp-question {
  margin-top: clamp(20px, 3vh, 40px);
  margin-bottom: clamp(8px, 1.5vh, 16px);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.opp-do {
  margin: clamp(28px, 4.5vh, 56px) 0 clamp(20px, 3vh, 32px);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.opp-do .line {
  display: block;
  padding: 0.18em 0;
}
/* Small amber diamond before each verb — echoes the brand glyph and
   the AI chip's signal accent. Adds visual rhythm to the cascade
   without being decorative noise. */
.opp-do .line::before {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.55em;
  border: 1.5px solid var(--signal);
  background: transparent;
  transform: rotate(45deg) translateY(-0.15em);
  vertical-align: middle;
  box-shadow: 0 0 8px color-mix(in oklch, var(--signal) 35%, transparent);
}
.opp-close {
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid color-mix(in oklch, var(--signal) 40%, var(--ink-ghost));
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.opp-close .is-signal {
  color: var(--signal);
  font-weight: 600;
}

/* ── PILOT LIGHT ────────────────────────────────────────── */
.pilot {
  padding: clamp(100px, 14vh, 160px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.pilot-body {
  max-width: 880px;
}
.pilot-intro {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
  margin: clamp(8px, 1.5vh, 16px) 0 clamp(44px, 7vh, 72px);
}
.pilot-bridge {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--signal);
  margin: 0 0 clamp(20px, 3vh, 32px);
}
.pilot-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: clamp(12px, 2vh, 24px) 0 clamp(36px, 6vh, 60px);
}
.pilot-list li {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-left: 28px;
  position: relative;
}
.pilot-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 14px;
  height: 1px;
  background: var(--ink-faint);
}

.pilot-stamp {
  margin: clamp(36px, 6vh, 60px) 0 clamp(40px, 7vh, 72px);
  position: relative;
}
.pilot-stamp-pre {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.005em;
  color: var(--ink-muted);
  margin-bottom: clamp(14px, 2vh, 22px);
}
.pilot-stamp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vh, 6px);
}
.pilot-stamp-list li {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 78px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  transition: transform 220ms ease, color 220ms ease;
}
.pilot-stamp-list li:hover {
  transform: translateX(6px);
}
.pilot-stamp-list li.is-live {
  color: var(--signal);
  font-size: clamp(54px, 9vw, 120px);
  letter-spacing: -0.035em;
  margin-top: clamp(28px, 4.5vh, 56px);
  padding-top: clamp(20px, 2.5vh, 32px);
  position: relative;
}
.pilot-stamp-list li.is-live::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 1px;
  background: var(--signal);
  opacity: 0.65;
}

.pilot-close {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--ink-dim);
  max-width: 780px;
  margin-bottom: clamp(32px, 5vh, 48px);
}
.pilot-close .is-signal {
  color: var(--signal);
  font-weight: 500;
}

.pilot-foot {
  font-family: var(--mono);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  border-top: 1px solid var(--ink-ghost);
  padding-top: 22px;
  max-width: 620px;
}

/* ── ELECTRICITY ↔ INTELLIGENCE UTILITY VIZ (§06) ──────── */
.utility-viz {
  margin: clamp(28px, 4vh, 48px) 0 clamp(20px, 3vh, 32px);
  padding: clamp(18px, 3vh, 32px) clamp(12px, 2vw, 24px);
  border-top: 1px solid var(--ink-ghost);
  border-bottom: 1px solid var(--ink-ghost);
}
.utility-viz svg {
  width: 100%;
  height: auto;
  max-height: 400px;
  display: block;
  overflow: visible;
}
.util-label {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}
.util-scene-now .util-label { fill: var(--signal); }
.util-sublabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}
.util-ceiling {
  stroke: var(--ink-ghost);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.util-ceiling-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}
.util-pre {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.util-post {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--signal) 45%, transparent));
}
/* Intelligence post-arrival curve is dashed because it's projected,
   not observed — the implied ~20-yr asymptotic ramp to saturation.
   Butt linecap so dash gaps render cleanly (round caps would fill them). */
.util-post-now {
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
}
.util-inflect {
  fill: var(--paper);
  stroke: var(--signal);
  stroke-width: 1.5;
}
.util-inflect-now {
  fill: var(--signal);
  filter: drop-shadow(0 0 8px var(--signal));
}
.util-inflect-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}
.util-divider {
  stroke: var(--ink-ghost);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.util-now-dot {
  fill: var(--signal);
  stroke: var(--signal);
  filter: drop-shadow(0 0 10px var(--signal));
  transform-box: fill-box;
  transform-origin: center;
  animation: util-now-pulse 2s ease-in-out infinite;
}
@keyframes util-now-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1);   }
  50%      { opacity: 1;   transform: scale(1.3); }
}
.util-now-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--signal);
  font-weight: 500;
}
.utility-caption {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.4;
  color: var(--ink-muted);
  font-style: italic;
  max-width: 720px;
}