/* The Cost of Unseen Strain
   Isolated experience layer. Existing home instruments remain untouched. */

body[data-rx-page="why-now"] {
  --cost-red: #ff6b5e;
  --cost-amber: #f0a43c;
  --cost-cyan: #3fd6ea;
  --cost-cobalt: #3b6dff;
  background:
    radial-gradient(ellipse at 74% 8%, rgba(39, 76, 160, .13), transparent 38%),
    var(--bg);
  /* `hidden` on the document body creates a scroll container in Chromium and
     can silently disable the desktop story pin. `clip` prevents horizontal
     bleed without changing the page's vertical scroll container. */
  overflow-x: clip;
}

body[data-rx-page="why-now"] .rx-ambient { opacity: .24; }

.cost-hero {
  position: relative;
  min-height: 112svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--hairline);
}
.cost-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4,7,14,.98) 0%, rgba(4,7,14,.85) 42%, rgba(4,7,14,.22) 75%, rgba(4,7,14,.54) 100%),
    linear-gradient(180deg, rgba(4,7,14,.34), transparent 34%, rgba(4,7,14,.9));
}
.cost-hero::after {
  content: "";
  position: absolute;
  left: var(--shell-x);
  right: var(--shell-x);
  bottom: 8.5svh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,147,255,.62) 20%, rgba(63,214,234,.4) 68%, transparent);
  box-shadow: 0 0 34px rgba(59,109,255,.25);
}
.cost-hero-canvas {
  position: absolute;
  inset: var(--header-h) 0 0;
  width: 100%;
  height: calc(100% - var(--header-h));
  z-index: -2;
}
.cost-hero-grid {
  position: absolute;
  inset: var(--header-h) 0 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(109,147,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,147,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
  pointer-events: none;
}
.cost-hero-content {
  width: 100%;
  padding-top: calc(var(--header-h) + 8svh);
  padding-bottom: 15svh;
}
.cost-hero-content .page-hero-kicker { margin-bottom: 30px; }
.cost-hero-content h1 {
  max-width: 980px;
  font-size: clamp(58px, 8.5vw, 132px);
  line-height: .89;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.cost-hero-content h1 span {
  display: block;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(106deg, #ffffff 0%, #d9e3f3 34%, #7995cf 76%, #4c6cae 100%);
  filter: drop-shadow(0 20px 38px rgba(10, 36, 87, .32));
}
.cost-hero-deck {
  max-width: 760px;
  margin-top: 36px;
  color: var(--ink-dim);
  font-size: clamp(19px, 2.05vw, 28px);
  line-height: 1.42;
  text-wrap: balance;
}
.cost-hero-posture {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 34px;
  font: 500 10px var(--font-mono);
  letter-spacing: .16em;
  color: #91a4c2;
  text-transform: uppercase;
}
.cost-hero-posture i { width: 38px; height: 1px; background: rgba(109,147,255,.34); }
.cost-enter {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  color: var(--ink);
  text-decoration: none;
  font: 550 12px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cost-enter span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(109,147,255,.34);
  border-radius: 50%;
  color: var(--cyan);
  transition: transform var(--motion-signal) var(--ease-signal), border-color var(--motion-instant), box-shadow var(--motion-signal);
}
.cost-enter:hover span,
.cost-enter:focus-visible span { transform: translateY(5px); border-color: var(--cyan); box-shadow: 0 0 24px rgba(63,214,234,.16); }
.cost-hero-readout {
  position: absolute;
  right: var(--shell-x);
  bottom: 4svh;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 9px var(--font-mono);
  letter-spacing: .13em;
  color: var(--ink-faint);
}
.cost-hero-readout b { color: var(--cyan); font-weight: 550; }
.cost-hero-readout i { width: 64px; height: 1px; background: rgba(63,214,234,.34); }
.cost-hero-readout em { color: #7e8fa9; font-style: normal; }

.cost-thesis {
  position: relative;
  padding: clamp(100px, 14vw, 190px) 0 clamp(110px, 14vw, 180px);
  background:
    radial-gradient(ellipse at 85% 40%, rgba(59,109,255,.09), transparent 38%),
    linear-gradient(180deg, #050912, #04070e);
  border-bottom: 1px solid var(--hairline);
}
.cost-thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: start;
  margin-top: 46px;
}
.cost-thesis-grid h2,
.cost-evidence-head h2,
.cost-reconstruction-grid h2,
.cost-response h2 {
  font-size: clamp(44px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.052em;
}
.cost-thesis-grid h2 span,
.cost-evidence-head h2 span,
.cost-reconstruction-grid h2 span,
.cost-response h2 span { color: #7890b8; }
.cost-thesis-grid > div > p {
  color: var(--ink-dim);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.65;
}
.cost-thesis-grid .cost-thesis-callout {
  margin-top: 26px;
  padding: 22px 0 22px 24px;
  border-left: 2px solid var(--cobalt);
  color: var(--ink);
}
.cost-chain {
  --chain-accent: var(--cobalt-soft);
  --chain-accent-rgb: 109,147,255;
  --chain-progress: 0%;
  position: relative;
  margin-top: 86px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(var(--chain-accent-rgb),.09), transparent 38%),
    rgba(6,12,23,.82);
  box-shadow: 0 30px 90px -62px rgba(59,109,255,.66);
  font: 550 9px var(--font-mono);
  letter-spacing: .14em;
  color: #aab9ce;
  transition: border-color var(--motion-signal), background var(--motion-signal);
}
.cost-chain[data-chain-state="exposure"],
.cost-chain[data-chain-state="cost"],
.cost-chain[data-chain-state="turnover"],
.cost-chain[data-chain-state="capacity"] { --chain-accent: var(--amber); --chain-accent-rgb: 240,164,60; }
.cost-chain-head {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 13px 8px 18px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(8,15,28,.72);
}
.cost-chain-head > div { min-width: 0; display: flex; align-items: center; gap: 11px; color: var(--ink-faint); }
.cost-chain-head > div .lamp {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(63,214,234,.65);
}
.cost-chain-head > div b { color: #bac7d9; font-size: 9px; font-weight: 550; }
.cost-chain-head > div span:last-child { overflow: hidden; color: #61718a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cost-chain-replay {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(150,175,210,.18);
  border-radius: 4px;
  background: rgba(10,19,35,.88);
  color: #8494ab;
  cursor: pointer;
  font: 550 8px var(--font-mono);
  letter-spacing: .11em;
  white-space: nowrap;
  transition: color var(--motion-instant), border-color var(--motion-instant), background var(--motion-instant);
}
.cost-chain-replay span { color: var(--amber); font-size: 18px; line-height: 1; }
.cost-chain-replay b { font: inherit; }
.cost-chain-replay:hover,
.cost-chain-replay:focus-visible { border-color: rgba(63,214,234,.46); background: rgba(13,27,48,.96); color: var(--ink); outline: none; }
.cost-chain.is-replaying .cost-chain-replay span { animation: cost-chain-replay 680ms var(--ease-refract) 1; }
@keyframes cost-chain-replay { to { transform: rotate(-360deg); } }

.cost-chain-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 9px;
  padding: 24px 20px 19px;
}
.cost-chain-flow {
  position: absolute;
  z-index: 0;
  left: calc(8.333% + 10px);
  right: calc(8.333% + 10px);
  top: 50%;
  height: 1px;
  background: rgba(112,143,190,.19);
}
.cost-chain-flow i,
.cost-chain-flow b { position: absolute; display: block; }
.cost-chain-flow i {
  inset: 0 auto 0 0;
  width: var(--chain-progress);
  background: linear-gradient(90deg, var(--cobalt-soft), var(--chain-accent));
  box-shadow: 0 0 12px rgba(var(--chain-accent-rgb),.28);
  transition: width var(--motion-signal) var(--ease-signal), background var(--motion-signal);
}
.cost-chain-flow b {
  left: var(--chain-progress);
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chain-accent);
  box-shadow: 0 0 0 4px rgba(var(--chain-accent-rgb),.09), 0 0 18px rgba(var(--chain-accent-rgb),.78);
  transform: translate(-50%,-50%);
  transition: left var(--motion-signal) var(--ease-signal), background var(--motion-signal);
}
.cost-chain-track > button {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 78px;
  padding: 11px 12px;
  border: 1px solid rgba(150,175,210,.14);
  border-radius: 5px;
  background: rgba(6,13,25,.96);
  color: #66758c;
  cursor: pointer;
  text-align: left;
  transition: color var(--motion-instant), border-color var(--motion-instant), transform var(--motion-instant), box-shadow var(--motion-signal), background var(--motion-instant);
}
.cost-chain-track > button span,
.cost-chain-track > button b,
.cost-chain-track > button small { display: block; }
.cost-chain-track > button span { color: #5972a7; font: 550 8px var(--font-mono); letter-spacing: .12em; }
.cost-chain-track > button b { margin-top: 5px; color: #96a6bd; font: 550 10px var(--font-mono); letter-spacing: .09em; white-space: nowrap; }
.cost-chain-track > button small { margin-top: 5px; overflow: hidden; color: #53627a; font: 500 7px var(--font-mono); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.cost-chain-track > button.is-passed { border-color: rgba(var(--chain-accent-rgb),.22); background: rgba(9,19,35,.98); }
.cost-chain-track > button.is-passed span,
.cost-chain-track > button.is-passed b { color: #7f93b2; }
.cost-chain-track > button.is-active {
  border-color: rgba(var(--chain-accent-rgb),.76);
  background: linear-gradient(180deg, rgba(var(--chain-accent-rgb),.15), rgba(8,17,32,.98));
  color: var(--ink);
  box-shadow: 0 16px 36px -22px rgba(var(--chain-accent-rgb),.92), 0 0 0 1px rgba(var(--chain-accent-rgb),.08) inset;
  transform: translateY(-3px);
}
.cost-chain-track > button.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--chain-accent);
  box-shadow: 0 0 12px rgba(var(--chain-accent-rgb),.72);
}
.cost-chain-track > button.is-active span { color: var(--chain-accent); }
.cost-chain-track > button.is-active b { color: #eef3fa; }
.cost-chain-track > button.is-active small { color: #9fb0c8; }
.cost-chain-track > button:hover,
.cost-chain-track > button:focus-visible { border-color: rgba(63,214,234,.52); color: var(--ink); outline: none; }

.cost-chain-return {
  display: grid;
  grid-template-columns: minmax(80px,1fr) auto auto;
  align-items: center;
  gap: 13px;
  min-height: 29px;
  padding: 0 20px 10px;
  color: #56657c;
}
.cost-chain-return i { position: relative; height: 1px; background: rgba(240,164,60,.14); }
.cost-chain-return i::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-right: 6px solid var(--amber);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--motion-instant) 620ms;
}
.cost-chain-return i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(240,164,60,.32), var(--amber));
  box-shadow: 0 0 12px rgba(240,164,60,.35);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--motion-settle) var(--ease-signal);
}
.cost-chain-return span,
.cost-chain-return b { font: 550 7px var(--font-mono); letter-spacing: .11em; white-space: nowrap; }
.cost-chain-return b { color: #6f5834; }
.cost-chain.is-loop-complete { border-color: rgba(240,164,60,.3); }
.cost-chain.is-loop-complete .cost-chain-return { color: #b7853c; }
.cost-chain.is-loop-complete .cost-chain-return b { color: var(--amber); }
.cost-chain.is-loop-complete .cost-chain-return i::before { opacity: 1; }
.cost-chain.is-loop-complete .cost-chain-return i::after { transform: scaleX(1); }

.cost-chain-readout {
  min-height: 72px;
  display: grid;
  grid-template-columns: 118px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 20px 15px;
  border-top: 1px solid var(--hairline);
  background: rgba(4,9,18,.72);
}
.cost-chain-readout span { color: var(--chain-accent); font: 550 8px var(--font-mono); letter-spacing: .12em; }
.cost-chain-readout p { color: #c0cada; font: 450 14px var(--font-sans); letter-spacing: 0; line-height: 1.45; }
.cost-chain-readout em { color: #697a92; font: normal 550 7px var(--font-mono); letter-spacing: .11em; text-align: right; }

.cost-story {
  position: relative;
  height: 520svh;
  background: #03060c;
  border-bottom: 1px solid var(--hairline);
}
.cost-story-pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cost-story-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 43%, rgba(41,78,157,.15), transparent 37%),
    linear-gradient(90deg, rgba(59,109,255,.022) 1px, transparent 1px),
    linear-gradient(rgba(59,109,255,.022) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  pointer-events: none;
}
.cost-story-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: stretch;
  width: 100%;
  height: min(760px, calc(100svh - var(--header-h) - 38px));
  min-height: 580px;
}
.cost-narrative {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 14px 0;
}
.cost-story-meta {
  position: relative;
  z-index: 3;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(150,175,210,.12);
}
.rx-js .cost-story-meta i { transform: none; }
.cost-chapters {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.cost-chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 10px 0 18px;
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  visibility: hidden;
  transition: opacity var(--motion-signal), transform var(--motion-refract) var(--ease-signal), visibility 0s var(--motion-signal);
}
.cost-chapter.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--motion-signal), transform var(--motion-refract) var(--ease-signal);
}
.cost-code {
  color: var(--cyan);
  font: 550 10px var(--font-mono);
  letter-spacing: .16em;
}
.cost-chapter h3 {
  margin-top: 15px;
  max-width: 11ch;
  font-size: clamp(34px, 3.45vw, 54px);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.cost-chapter h3 span { display: block; color: #8195b7; }
.cost-chapter > p:not(.cost-code) {
  max-width: 48ch;
  margin-top: 20px;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.58;
}
.cost-chapter small {
  display: block;
  max-width: 58ch;
  margin-top: 20px;
  color: #62738e;
  font: 500 8px var(--font-mono);
  line-height: 1.55;
  letter-spacing: .13em;
}
.cost-story-nav {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 0 8px;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(7,14,26,.98), rgba(3,7,14,.96));
}
.cost-story-nav button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 3px;
  border: 0;
  border-top: 1px solid rgba(150,175,210,.14);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--motion-instant), color var(--motion-instant), background var(--motion-instant);
}
.cost-story-nav button span { display: block; font: 500 8px var(--font-mono); letter-spacing: .1em; }
.cost-story-nav button b { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; font-weight: 500; }
.cost-story-nav button:hover,
.cost-story-nav button.is-active { color: var(--ink); border-color: var(--cyan); background: linear-gradient(180deg, rgba(63,214,234,.07), transparent); }

.cost-artifact {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  background: rgba(4,9,18,.86);
  box-shadow: 0 48px 130px -70px rgba(59,109,255,.78), 0 0 0 1px rgba(13,26,47,.65) inset;
}
.cost-field {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 50%, rgba(28,62,129,.15), transparent 56%),
    #040914;
}
.cost-canvas { width: 100%; height: 100%; }
.cost-static-fallback { display: none; }
.cost-artifact.cost-fallback .cost-canvas { display: none; }
.cost-artifact.cost-fallback .cost-static-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 24px;
  color: #9db0cb;
  font: 550 8px var(--font-mono);
  letter-spacing: .08em;
  text-align: center;
}
.cost-artifact.cost-fallback .cost-static-fallback i { width: 18px; height: 1px; background: rgba(63,214,234,.38); }
.cost-instrument-deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.cost-instrument-deck > div {
  min-width: 0;
  padding: 11px 13px 12px;
  border-right: 1px solid var(--hairline);
}
.cost-instrument-deck > div:last-child { border-right: 0; }
.cost-instrument-deck span,
.cost-instrument-deck b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-instrument-deck span { color: var(--ink-faint); font: 500 7px var(--font-mono); letter-spacing: .14em; }
.cost-instrument-deck b { margin-top: 4px; color: #c8d4e7; font: 550 9px var(--font-mono); letter-spacing: .06em; }
.cost-evidence-pulse {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-faint);
  font: 500 7px var(--font-mono);
  letter-spacing: .12em;
}
.cost-evidence-pulse b { color: var(--cobalt-soft); font-weight: 550; }
.cost-evidence-pulse i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(59,109,255,.5), rgba(63,214,234,.18), transparent); }
.cost-evidence-pulse em { color: #71829c; font-style: normal; }
.cost-artifact[data-cost-state="expose"] .cost-evidence-pulse b,
.cost-artifact[data-cost-state="cost"] .cost-evidence-pulse b { color: var(--amber); }
.cost-artifact[data-cost-state="retain"] .cost-evidence-pulse b { color: var(--cyan); }

.cost-evidence {
  padding: clamp(120px, 15vw, 210px) 0;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(42,76,143,.11), transparent 38%),
    #050912;
  border-bottom: 1px solid var(--hairline);
}
.cost-evidence-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(42px, 7vw, 120px);
  align-items: end;
  margin-top: 48px;
}
.cost-evidence-head p {
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1.65;
  padding-left: 24px;
  border-left: 2px solid var(--amber);
}
.cost-ledger {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  margin-top: 76px;
}
.cost-ledger-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cost-ledger-tabs button {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: rgba(7,13,24,.58);
  color: var(--ink-faint);
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-instant), border-color var(--motion-instant), background var(--motion-instant), transform var(--motion-signal) var(--ease-signal);
}
.cost-ledger-tabs button:hover { color: var(--ink); transform: translateX(3px); }
.cost-ledger-tabs button.is-active { color: var(--ink); border-color: rgba(63,214,234,.44); background: linear-gradient(90deg, rgba(59,109,255,.13), rgba(8,15,28,.74)); }
.cost-ledger-tabs button span { color: var(--cyan); font: 500 9px var(--font-mono); }
.cost-ledger-tabs button b { font-size: 13px; font-weight: 550; }
.cost-ledger-panel { min-width: 0; background: rgba(5,10,19,.8); }
.cost-ledger-record {
  min-height: 430px;
  padding: clamp(28px, 4vw, 54px);
  position: relative;
  overflow: hidden;
}
.cost-ledger-record::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 58%;
  height: 160%;
  background: linear-gradient(125deg, transparent, rgba(59,109,255,.08), rgba(63,214,234,.025), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
}
.cost-ledger-record[hidden] { display: none; }
.cost-ledger-type { color: var(--cyan); font: 550 9px var(--font-mono); letter-spacing: .15em; }
.cost-ledger-record > strong {
  display: block;
  margin-top: 20px;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(180deg, #fff, #a8bad8 70%, #6384c5);
  font-size: clamp(62px, 8.7vw, 126px);
  line-height: .9;
  letter-spacing: -.065em;
}
.cost-ledger-record > strong i { color: #7890b8; font-size: .32em; font-style: normal; letter-spacing: -.02em; }
.cost-ledger-record h3 { max-width: 770px; margin-top: 24px; font-size: clamp(25px, 3.2vw, 44px); line-height: 1.05; }
.cost-ledger-record > p:not(.cost-ledger-type) { max-width: 820px; margin-top: 18px; color: var(--ink-dim); font-size: 16px; }
.cost-benchmark-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-top: 24px;
}
.cost-benchmark-matrix > div {
  padding: 14px 15px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: rgba(8,15,28,.58);
}
.cost-benchmark-matrix span,
.cost-benchmark-matrix b,
.cost-benchmark-matrix small { display: block; }
.cost-benchmark-matrix span { color: var(--cobalt-soft); font: 500 7px var(--font-mono); letter-spacing: .12em; }
.cost-benchmark-matrix b { margin-top: 5px; color: var(--ink); font-size: 19px; }
.cost-benchmark-matrix small { margin-top: 3px; color: var(--ink-faint); font-size: 9px; line-height: 1.4; }
.cost-ledger-record footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: #75869f;
  font: 500 9px var(--font-mono);
  letter-spacing: .07em;
}
.cost-ledger-record footer > span:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.cost-ledger-record footer a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.cost-ledger-record footer a b { color: var(--cyan); }
.cost-ledger-posture {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--hairline);
  color: #71819a;
  font: 500 7px var(--font-mono);
  letter-spacing: .11em;
}
.cost-ledger-posture i { flex: 1; height: 1px; background: rgba(109,147,255,.18); }
.cost-evidence-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}
.cost-evidence-links a {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: rgba(8,15,28,.54);
  text-decoration: none;
  transition: border-color var(--motion-instant), transform var(--motion-signal) var(--ease-signal), background var(--motion-instant);
}
.cost-evidence-links a:hover { transform: translateY(-3px); border-color: rgba(109,147,255,.42); background: rgba(12,22,40,.68); }
.cost-evidence-links span { color: var(--cobalt-soft); font: 500 8px var(--font-mono); letter-spacing: .13em; }
.cost-evidence-links b { margin-top: 11px; font-size: 16px; font-weight: 550; }
.cost-evidence-links em { margin-top: auto; color: var(--ink-faint); font-size: 12px; font-style: normal; }
.cost-evidence-qualifier {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(150,175,210,.12);
  border-radius: 6px;
  background: rgba(4,8,16,.5);
  color: #70819a;
  font-size: 12px;
  line-height: 1.65;
}

.cost-reconstruction {
  padding: clamp(120px, 15vw, 210px) 0;
  background: #04070e;
  border-bottom: 1px solid var(--hairline);
}
.cost-reconstruction-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
  margin-top: 54px;
}
.cost-reconstruction-grid > div:first-child > p:not(.eyebrow) { max-width: 65ch; margin-top: 28px; color: var(--ink-dim); font-size: 18px; line-height: 1.68; }
.cost-source-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; }
.cost-source-row a { color: #9db0ce; font: 500 10px var(--font-mono); letter-spacing: .07em; text-decoration: none; }
.cost-source-row a span { color: var(--cyan); }
.cost-context-artifact { background: rgba(5,10,19,.86); }
.cost-context-layers { padding: 16px; }
.cost-context-layers > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
.cost-context-layers span,
.cost-context-layers b { font: 500 9px var(--font-mono); letter-spacing: .09em; }
.cost-context-layers span { color: #899ab4; }
.cost-context-layers b { color: var(--amber); }
.cost-context-layers i { grid-column: 1 / -1; height: 2px; background: linear-gradient(90deg, rgba(59,109,255,.45), rgba(59,109,255,.08) 64%, transparent); }
.cost-context-layers > div:nth-child(n+3) i { background: linear-gradient(90deg, rgba(240,164,60,.34), transparent 38%); }
.cost-context-artifact > p { padding: 12px 16px; border-top: 1px solid var(--hairline); color: #677892; font: 500 8px var(--font-mono); letter-spacing: .12em; }

.cost-response {
  position: relative;
  padding: clamp(120px, 16vw, 220px) 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(43,84,177,.18), transparent 48%),
    linear-gradient(180deg, #050a14, #03060c);
}
.cost-response::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cobalt), var(--cyan), transparent);
  filter: blur(.2px);
  opacity: .32;
}
.cost-response .shell { position: relative; text-align: center; }
.cost-response h2 { max-width: 1100px; margin: 24px auto 0; }
.cost-response h2 span { display: block; color: #90a5c8; }
.cost-response-spine {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-top: 78px;
  text-align: left;
}
.cost-response-spine > div {
  min-height: 148px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: rgba(7,13,24,.82);
  box-shadow: 0 28px 70px -55px rgba(63,214,234,.66);
}
.cost-response-spine > div span { color: var(--cyan); font: 500 9px var(--font-mono); }
.cost-response-spine > div b { display: block; margin-top: 24px; font-size: 17px; }
.cost-response-spine > div small { display: block; margin-top: 6px; color: var(--ink-faint); }
.cost-response-spine > i { width: clamp(14px, 2vw, 36px); height: 1px; background: linear-gradient(90deg, var(--cobalt), var(--cyan)); box-shadow: 0 0 16px rgba(63,214,234,.22); }
.cost-response-guardrail { max-width: 820px; margin: 44px auto 0; color: #8596b0; font-size: 14px; }
.cost-response .hero-ctas { justify-content: center; margin-top: 38px; }

/* Homepage compression of the same causal field. */
.cost-home-teaser {
  position: relative;
  height: 210svh;
  background: #03060c;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cost-home-pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  align-items: center;
}
.cost-home-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 48%, rgba(43,82,169,.18), transparent 44%),
    linear-gradient(90deg, rgba(59,109,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(59,109,255,.025) 1px, transparent 1px);
  background-size: auto, 70px 70px, 70px 70px;
}
.cost-home-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 6vw, 92px);
  align-items: center;
  width: 100%;
}
.cost-home-copy h2 { margin-top: 30px; font-size: clamp(48px, 6.5vw, 96px); line-height: .94; letter-spacing: -.057em; }
.cost-home-copy h2 span { display: block; color: #7e94b8; }
.cost-home-beats { position: relative; min-height: 150px; margin-top: 28px; }
.cost-home-beat {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(-18px,0,0);
  visibility: hidden;
  transition: opacity var(--motion-signal), transform var(--motion-refract) var(--ease-signal), visibility 0s var(--motion-signal);
}
.cost-home-beat.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity var(--motion-signal), transform var(--motion-refract) var(--ease-signal); }
.cost-home-beat p { max-width: 54ch; color: var(--ink-dim); font-size: 17px; line-height: 1.6; }
.cost-home-beat small { display: block; margin-top: 18px; color: var(--cyan); font: 500 8px var(--font-mono); letter-spacing: .13em; }
.cost-home-cta { margin-top: 22px; }
.cost-home-artifact { background: rgba(4,9,18,.84); box-shadow: 0 46px 120px -70px rgba(59,109,255,.75); }
.cost-home-field { height: clamp(380px, 58vh, 620px); }
.cost-home-canvas { width: 100%; height: 100%; }
.cost-home-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.cost-home-status div { padding: 11px 13px; border-right: 1px solid var(--hairline); }
.cost-home-status div:last-child { border-right: 0; }
.cost-home-status span,
.cost-home-status b { display: block; font-family: var(--font-mono); }
.cost-home-status span { color: var(--ink-faint); font-size: 7px; letter-spacing: .12em; }
.cost-home-status b { margin-top: 4px; color: #c7d4e7; font-size: 9px; }
.cost-home-progress { display: flex; gap: 5px; margin-top: 24px; }
.cost-home-progress i { width: 42px; height: 2px; background: rgba(109,147,255,.16); transition: background var(--motion-instant), width var(--motion-signal) var(--ease-signal); }
.cost-home-progress i.is-active { width: 68px; background: linear-gradient(90deg, var(--cobalt), var(--cyan)); }

@media (max-width: 1180px) {
  .cost-story-layout { grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 28px; }
  .cost-field { height: auto; }
  .cost-chapter h3 { font-size: clamp(32px, 3.65vw, 48px); }
  .cost-response-spine { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .cost-response-spine > i { display: none; }
  .cost-response-spine > div:nth-of-type(4),
  .cost-response-spine > div:nth-of-type(5) { grid-column: span 1; }
}

@media (max-width: 980px) {
  .cost-hero { min-height: 105svh; }
  .cost-hero-content { padding-top: calc(var(--header-h) + 7svh); }
  .cost-hero-content h1 { font-size: clamp(52px, 11.5vw, 92px); max-width: 820px; }
  .cost-thesis-grid,
  .cost-evidence-head,
  .cost-reconstruction-grid { grid-template-columns: 1fr; }
  .cost-thesis-grid { gap: 34px; }
  .cost-chain { margin-top: 66px; }
  .cost-chain-head > div span:last-child { display: none; }
  .cost-chain-track { grid-template-columns: 1fr; gap: 8px; padding: 18px 14px 18px 52px; }
  .cost-chain-flow { left: 30px; right: auto; top: 47px; bottom: 47px; width: 1px; height: auto; }
  .cost-chain-flow i { inset: 0 0 auto; width: 100%; height: var(--chain-progress); transition: height var(--motion-signal) var(--ease-signal), background var(--motion-signal); }
  .cost-chain-flow b { left: 50%; top: var(--chain-progress); transition: top var(--motion-signal) var(--ease-signal), background var(--motion-signal); }
  .cost-chain-track > button { min-height: 56px; display: grid; grid-template-columns: 36px 150px minmax(0,1fr); align-items: center; padding: 8px 12px; }
  .cost-chain-track > button span,
  .cost-chain-track > button b,
  .cost-chain-track > button small { margin: 0; }
  .cost-chain-track > button small { text-align: right; }
  .cost-chain-track > button.is-active { transform: translateX(3px); }
  .cost-chain-track > button.is-active::after { inset: 8px auto 8px 0; width: 2px; height: auto; }
  .cost-chain-return { grid-template-columns: minmax(30px,1fr) auto; padding: 0 15px 12px 29px; }
  .cost-chain-return b { grid-column: 2; }
  .cost-chain-return span { grid-column: 2; grid-row: 1; }
  .cost-chain-readout { grid-template-columns: 1fr; gap: 7px; min-height: 108px; }
  .cost-chain-readout em { text-align: left; }
  .cost-thesis { padding-bottom: 56px; }

  .cost-story { height: auto; }
  .cost-story-pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    padding: 24px 0 84px;
  }
  .cost-story-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: auto;
    min-height: 0;
  }
  .cost-narrative { position: relative; z-index: 2; display: block; padding: 0; order: 2; }
  .cost-story-meta { margin-bottom: 8px; padding-bottom: 22px; }
  .cost-chapters { position: relative; min-height: clamp(350px, 44dvh, 480px); overflow: hidden; }
  .cost-chapter {
    position: absolute;
    inset: 0;
    display: none;
    min-height: 0;
    padding: 30px 0 38px;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-18px,0,0);
    transition: opacity var(--motion-signal), transform var(--motion-signal) var(--ease-signal);
  }
  .cost-chapter.is-active { display: flex; opacity: 1; visibility: visible; transform: none; }
  .cost-chapter h3 { max-width: 13ch; margin-top: 10px; font-size: clamp(38px, 7vw, 60px); }
  .cost-chapter > p:not(.cost-code) { max-width: 66ch; margin-top: 17px; font-size: 16px; line-height: 1.58; }
  .cost-chapter small { max-width: 66ch; margin-top: 17px; font-size: 8px; }
  .cost-story-nav {
    display: flex;
    gap: 4px;
    padding: 0 7px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .cost-story-nav button { flex: 0 0 104px; min-height: 50px; padding: 7px 5px; scroll-snap-align: center; }
  .cost-story-nav button span { font-size: 8px; }
  .cost-story-nav button b { font-size: 9px; letter-spacing: 0; }
  .cost-artifact {
    position: relative;
    top: auto;
    z-index: 5;
    order: 1;
    height: min(620px, 70svh);
    height: clamp(460px, 70dvh, 620px);
    min-height: 460px;
    box-shadow: 0 34px 90px -48px rgba(59,109,255,.92), 0 0 0 1px rgba(13,26,47,.72) inset;
  }
  .cost-field { height: auto; min-height: 0; }
  .cost-instrument-deck > div { padding: 8px 9px; }
  .cost-evidence-pulse { min-height: 31px; }

  .cost-ledger { grid-template-columns: 1fr; }
  .cost-ledger-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .cost-ledger-tabs button { flex: 0 0 150px; min-height: 54px; }
  .cost-ledger-record { min-height: 450px; }
  .cost-evidence-links { grid-template-columns: 1fr; }
  .cost-reconstruction-grid { gap: 52px; }
  .cost-context-artifact { max-width: 720px; width: 100%; }

  .cost-home-teaser { height: 245svh; }
  .cost-home-layout { grid-template-columns: 1fr; grid-template-rows: minmax(230px, 38svh) minmax(0, 49svh); gap: 14px; align-content: center; }
  .cost-home-copy h2 { margin-top: 12px; font-size: clamp(40px, 8.7vw, 68px); }
  .cost-home-beats { min-height: 100px; margin-top: 13px; }
  .cost-home-beat p { font-size: 14px; }
  .cost-home-beat small { margin-top: 8px; }
  .cost-home-cta { position: absolute; left: var(--shell-x); bottom: 14px; z-index: 3; }
  .cost-home-field { height: calc(49svh - 78px); min-height: 260px; }
}

@media (max-width: 680px) {
  .cost-hero { min-height: 100svh; align-items: end; }
  .cost-hero::before { background: linear-gradient(180deg, rgba(4,7,14,.42) 0%, rgba(4,7,14,.78) 44%, rgba(4,7,14,.98) 100%); }
  .cost-hero-content { padding-top: calc(var(--header-h) + 6svh); padding-bottom: 16svh; }
  .cost-hero-content .page-hero-kicker { margin-bottom: 22px; }
  .cost-hero-content h1 { font-size: clamp(50px, 15vw, 76px); line-height: .92; }
  .cost-hero-deck { margin-top: 24px; font-size: 18px; }
  .cost-hero-posture { gap: 8px; margin-top: 22px; }
  .cost-hero-posture i { width: 18px; }
  .cost-enter { margin-top: 28px; }
  .cost-hero-readout { left: var(--shell-x); right: var(--shell-x); justify-content: flex-end; }
  .cost-hero-readout span,
  .cost-hero-readout i,
  .cost-hero-readout em { display: none; }

  .cost-thesis,
  .cost-evidence,
  .cost-reconstruction,
  .cost-response { padding-top: 100px; padding-bottom: 100px; }
  .cost-thesis-grid h2,
  .cost-evidence-head h2,
  .cost-reconstruction-grid h2,
  .cost-response h2 { font-size: clamp(39px, 11vw, 58px); }
  .cost-chain { margin-top: 54px; }
  .cost-chain-head { padding-left: 13px; }
  .cost-chain-head > div b { font-size: 8px; }
  .cost-chain-replay { min-height: 38px; padding: 0 9px; }
  .cost-chain-replay b { display: none; }
  .cost-chain-track { padding-left: 46px; }
  .cost-chain-flow { left: 26px; }
  .cost-chain-track > button { grid-template-columns: 30px minmax(92px,auto) minmax(0,1fr); }
  .cost-chain-track > button b { font-size: 9px; }
  .cost-chain-track > button small { font-size: 6.5px; }
  .cost-chain-return { padding-left: 25px; }
  .cost-chain-return span,
  .cost-chain-return b { font-size: 6.5px; }
  .cost-chain-readout { padding-inline: 14px; }

  .cost-thesis { padding-bottom: 44px; }
  .cost-story-pin { padding: 16px 0 68px; }
  .cost-story-layout { gap: 14px; }
  .cost-story-meta { margin-bottom: 0; }
  .cost-story-meta b { font-size: 8px; }
  .cost-chapters { min-height: 390px; }
  .cost-chapter,
  .cost-chapter.is-active { min-height: 0; padding: 28px 0 34px; }
  .cost-chapter h3 { max-width: 12ch; font-size: clamp(36px, 11.2vw, 52px); }
  .cost-chapter h3 span { display: block; }
  .cost-chapter > p:not(.cost-code) { font-size: 14px; line-height: 1.52; }
  .cost-chapter small { font-size: 7px; line-height: 1.55; }
  .cost-artifact {
    top: auto;
    height: min(540px, 72svh);
    height: clamp(440px, 72dvh, 540px);
    min-height: 440px;
  }
  .cost-field { height: auto; min-height: 0; }
  .cost-artifact .artifact-bar span:not(.lamp):not(.spacer) { display: none; }
  .cost-instrument-deck { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cost-instrument-deck > div:nth-child(2) { border-right: 0; }
  .cost-instrument-deck > div:nth-child(n+3) { border-top: 1px solid var(--hairline); }

  .cost-evidence-head { gap: 26px; }
  .cost-evidence-head p { font-size: 16px; }
  .cost-ledger { margin-top: 48px; }
  .cost-ledger-tabs button { flex-basis: 128px; grid-template-columns: 24px 1fr; }
  .cost-ledger-record { min-height: 520px; padding: 28px 20px; }
  .cost-ledger-record > strong { font-size: clamp(58px, 19vw, 82px); }
  .cost-ledger-record h3 { font-size: 26px; }
  .cost-ledger-record footer { flex-direction: column; align-items: flex-start; font-size: 8px; }
  .cost-ledger-record footer > span:last-child { justify-content: flex-start; }
  .cost-benchmark-matrix { grid-template-columns: 1fr; }
  .cost-ledger-posture { align-items: flex-start; flex-direction: column; }
  .cost-ledger-posture i { display: none; }

  .cost-context-layers > div { min-height: 50px; padding: 9px 10px; }
  .cost-context-layers span,
  .cost-context-layers b { font-size: 7px; }
  .cost-response-spine { grid-template-columns: 1fr; }
  .cost-response-spine > div { min-height: 112px; }
  .cost-response-spine > div b { margin-top: 14px; }
  .cost-response .hero-ctas { align-items: stretch; }

  .cost-home-teaser { height: 250svh; }
  .cost-home-layout { grid-template-rows: minmax(248px, 43svh) minmax(0, 45svh); }
  .cost-home-copy h2 { font-size: clamp(38px, 11.4vw, 56px); }
  .cost-home-beats { min-height: 108px; }
  .cost-home-field { height: calc(45svh - 72px); min-height: 235px; }
  .cost-home-status div { padding: 8px; }
  .cost-home-status b { font-size: 8px; }
  .cost-home-cta { bottom: 8px; }
  .cost-home-cta .btn { min-height: 44px; padding: 0 18px; }
}

@media (max-height: 720px) and (min-width: 981px) {
  .cost-story-layout { height: calc(100svh - var(--header-h) - 16px); min-height: 510px; }
  .cost-narrative { padding: 8px 0; }
  .cost-story-meta { margin-bottom: 10px; padding-bottom: 11px; }
  .cost-chapter { padding-block: 6px 10px; }
  .cost-chapter h3 { margin-top: 8px; font-size: 32px; }
  .cost-chapter > p:not(.cost-code) { font-size: 13px; }
  .cost-chapter small { margin-top: 10px; }
  .cost-story-nav { margin-top: 0; }
  .cost-story-nav button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cost-chain-flow i,
  .cost-chain-flow b,
  .cost-chain-return i::before,
  .cost-chain-return i::after,
  .cost-chain-track > button { transition: none; }
  .cost-chain.is-replaying .cost-chain-replay span { animation: none; }
  .cost-enter span,
  .cost-chapter,
  .cost-home-beat,
  .cost-ledger-tabs button,
  .cost-evidence-links a { transition: none; }
  .cost-story,
  .cost-home-teaser { height: auto; }
  .cost-story-pin,
  .cost-home-pin { position: relative; top: auto; height: auto; overflow: visible; padding: 90px 0; }
  .cost-story-layout,
  .cost-home-layout { display: block; min-height: 0; }
  .cost-chapters,
  .cost-home-beats { min-height: 0; }
  .cost-chapter,
  .cost-home-beat {
    position: relative;
    inset: auto;
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .cost-story-nav,
  .cost-home-progress { display: none; }
  .cost-artifact,
  .cost-home-artifact { margin-top: 38px; }
  .cost-canvas,
  .cost-home-canvas { display: none; }
  .cost-field,
  .cost-home-field { height: auto; min-height: 0; }
  .cost-static-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 240px;
    padding: 30px;
    color: #a7b6cc;
    font: 500 8px var(--font-mono);
    letter-spacing: .1em;
  }
  .cost-static-fallback i { width: 28px; height: 1px; background: linear-gradient(90deg, var(--cobalt), var(--cyan)); }
  .cost-home-cta { position: relative; left: auto; bottom: auto; margin-top: 28px; }
}

@media (forced-colors: active) {
  .cost-ledger-record > strong,
  .cost-hero-content h1 span { color: CanvasText; background: none; }
  .cost-chain i,
  .cost-response-spine > i { background: CanvasText; }
}

/* Static-first Why Now release.
   The opening argument and causal sequence remain complete without canvas,
   scroll observers, or JavaScript. Motion is enhancement only. */
.cost-hero {
  min-height: auto;
  display: block;
  align-items: initial;
}
.cost-hero::before {
  background:
    radial-gradient(ellipse at 82% 48%, rgba(37,83,174,.18), transparent 44%),
    linear-gradient(90deg, rgba(4,7,14,.98) 0%, rgba(4,7,14,.9) 52%, rgba(4,7,14,.55) 100%);
}
.cost-hero::after { bottom: 0; }
.cost-hero-grid {
  opacity: .72;
  -webkit-mask-image: radial-gradient(ellipse at 72% 48%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse at 72% 48%, #000 0%, transparent 76%);
}
.cost-hero-layout {
  min-height: clamp(720px, 92svh, 900px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(72px, 9vw, 126px));
  padding-bottom: clamp(80px, 9vw, 132px);
}
.cost-hero-content {
  width: auto;
  min-width: 0;
  padding: 0;
}
.cost-hero-content h1 {
  max-width: 12ch;
  font-size: clamp(58px, 6.8vw, 108px);
  line-height: .91;
}
.cost-hero-content h1 span {
  display: block;
  color: #8fa8d4;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}
.cost-hero-deck {
  max-width: 680px;
  margin-top: 30px;
  color: #aebbd0;
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.5;
  text-wrap: pretty;
}

.cost-hero-signal {
  position: relative;
  min-width: 0;
  padding: 28px 0 22px;
  isolation: isolate;
}
.cost-hero-signal::before {
  content: "";
  position: absolute;
  inset: 0 -5vw;
  z-index: -1;
  background:
    radial-gradient(ellipse at 54% 48%, rgba(59,109,255,.13), transparent 58%),
    linear-gradient(90deg, transparent, rgba(109,147,255,.035) 48%, transparent);
  pointer-events: none;
}
.cost-signal-axis {
  display: grid;
  grid-template-columns: 1fr auto minmax(38px, .38fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 34px;
  color: #71829d;
  font: 500 8px var(--font-mono);
  letter-spacing: .14em;
}
.cost-signal-axis span { color: #93a6c4; }
.cost-signal-axis i { height: 1px; background: rgba(109,147,255,.3); }
.cost-signal-axis b { color: #b4c4dc; font-weight: 500; }
.cost-signal-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(120px, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 82px;
  border-top: 1px solid rgba(150,175,210,.14);
  color: #93a6c4;
  font: 500 9px var(--font-mono);
  letter-spacing: .13em;
}
.cost-signal-row > i {
  position: relative;
  display: block;
  height: 2px;
  overflow: visible;
}
.cost-signal-row strong {
  color: #c7d4e7;
  font-size: 9px;
  font-weight: 550;
  white-space: nowrap;
}
.cost-signal-row--demand > i {
  background: linear-gradient(90deg, rgba(59,109,255,.32), #527dff 58%, #3fd6ea);
  box-shadow: 0 0 18px rgba(63,214,234,.18);
}
.cost-signal-row--demand > i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 58px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(63,214,234,.58), transparent 72%);
  transform: translate(-50%,-50%);
  animation: cost-demand-pass 3.8s linear infinite;
}
.cost-signal-row--demand > i b {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8f6ff;
  box-shadow: 0 0 14px rgba(63,214,234,.75);
  transform: translate(-50%,-50%);
}
.cost-signal-row--demand > i b:nth-child(1) { left: 17%; }
.cost-signal-row--demand > i b:nth-child(2) { left: 54%; }
.cost-signal-row--demand > i b:nth-child(3) { left: 88%; }
.cost-signal-row--demand strong { color: var(--cyan); }
.cost-signal-row--execution > i {
  background:
    radial-gradient(circle at 12% 50%, #a7b7cf 0 3px, transparent 4px),
    radial-gradient(circle at 38% 50%, #a7b7cf 0 3px, transparent 4px),
    radial-gradient(circle at 64% 50%, #a7b7cf 0 3px, transparent 4px),
    radial-gradient(circle at 90% 50%, #a7b7cf 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(167,183,207,.22), rgba(167,183,207,.22));
}
.cost-signal-row--margin > i {
  height: 14px;
  background: linear-gradient(90deg, rgba(240,164,60,.74), rgba(240,164,60,.12));
  clip-path: polygon(0 10%, 100% 46%, 100% 54%, 0 90%);
}
.cost-signal-row--margin strong { color: var(--amber); }
.cost-signal-equation {
  display: grid;
  grid-template-columns: 1fr auto 1.45fr;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(240,164,60,.34);
  border-bottom: 1px solid rgba(240,164,60,.16);
  color: #c7d4e7;
  font: 550 10px var(--font-mono);
  letter-spacing: .12em;
}
.cost-signal-equation b { color: var(--amber); font-size: 20px; font-weight: 500; }
.cost-hero-signal > p {
  margin-top: 18px;
  color: #7e8fa9;
  font: 500 8px var(--font-mono);
  letter-spacing: .14em;
  text-align: right;
}
@keyframes cost-demand-pass {
  from { left: 0%; opacity: 0; }
  12%, 82% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

.cost-causal {
  position: relative;
  padding: clamp(100px, 13vw, 180px) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse at 88% 15%, rgba(59,109,255,.09), transparent 38%),
    linear-gradient(180deg, #04070e, #050a13);
}
.cost-causal-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .55fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  margin-top: 42px;
}
.cost-causal-intro h2 {
  max-width: 12ch;
  font-size: clamp(44px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.052em;
}
.cost-causal-intro h2 span { color: #8198bf; }
.cost-causal-intro p {
  color: #aebbd0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
}
.cost-causal-track {
  position: relative;
  list-style: none;
  margin: clamp(62px, 8vw, 108px) 0 0;
  padding: 0;
}
.cost-causal-track::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 34px;
  bottom: 34px;
  width: 1px;
  background: linear-gradient(180deg, var(--cobalt), rgba(109,147,255,.24) 72%, var(--cyan));
}
.cost-causal-track li {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(160px, .35fr);
  gap: clamp(22px, 3.2vw, 48px);
  align-items: start;
  min-height: 154px;
  padding: 30px 0;
  border-top: 1px solid var(--hairline);
}
.cost-causal-track li:last-child { border-bottom: 1px solid var(--hairline); }
.cost-causal-index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(109,147,255,.4);
  border-radius: 50%;
  background: #050a13;
  color: #9bb0d1;
  font: 550 10px var(--font-mono);
  box-shadow: 0 0 0 8px #050a13;
}
.cost-causal-track small {
  color: var(--cobalt-soft);
  font: 500 9px var(--font-mono);
  letter-spacing: .15em;
}
.cost-causal-track h3 {
  max-width: 28ch;
  margin-top: 9px;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.08;
}
.cost-causal-track p {
  max-width: 72ch;
  margin-top: 14px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.65;
}
.cost-causal-track li > strong {
  align-self: center;
  color: #8191aa;
  font: 500 8px var(--font-mono);
  letter-spacing: .13em;
  text-align: right;
}
.cost-causal-track .cost-causal-response {
  background: linear-gradient(90deg, transparent, rgba(63,214,234,.045), transparent);
}
.cost-causal-response .cost-causal-index {
  border-color: rgba(63,214,234,.72);
  color: var(--cyan);
  box-shadow: 0 0 0 8px #050a13, 0 0 24px rgba(63,214,234,.14);
}
.cost-causal-response small,
.cost-causal-response > strong { color: var(--cyan); }
.cost-causal-guardrail {
  margin: 24px 0 0 68px;
  color: #718098;
  font: 500 8px/1.6 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .cost-hero-layout {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 54px;
    padding-top: calc(var(--header-h) + 70px);
    padding-bottom: 82px;
  }
  .cost-hero-content h1 {
    max-width: 11ch;
    font-size: clamp(56px, 10.7vw, 86px);
  }
  .cost-hero-signal { width: min(760px, 100%); }
  .cost-causal-intro { grid-template-columns: 1fr; gap: 28px; }
  .cost-causal-intro p { max-width: 68ch; }
}

@media (max-width: 680px) {
  .cost-hero-layout {
    gap: 40px;
    padding-top: calc(var(--header-h) + 54px);
    padding-bottom: 68px;
  }
  .cost-hero-content .page-hero-kicker { margin-bottom: 20px; }
  .cost-hero-content h1 {
    max-width: 10.5ch;
    font-size: clamp(48px, 13.2vw, 64px);
    line-height: .94;
  }
  .cost-hero-deck { margin-top: 22px; font-size: 17px; line-height: 1.52; }
  .cost-hero-posture { margin-top: 20px; font-size: 8px; letter-spacing: .12em; }
  .cost-enter { margin-top: 26px; font-size: 10px; }
  .cost-hero-signal { padding-top: 18px; }
  .cost-signal-axis { margin-bottom: 18px; }
  .cost-signal-row {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    min-height: 78px;
    padding: 14px 0;
  }
  .cost-signal-row > i { grid-column: 1 / -1; }
  .cost-signal-row strong { text-align: right; }
  .cost-signal-equation {
    grid-template-columns: 1fr auto 1.35fr;
    gap: 9px;
    font-size: 8px;
    letter-spacing: .08em;
  }
  .cost-hero-signal > p { text-align: left; }
  .cost-causal { padding: 94px 0; }
  .cost-causal-intro { margin-top: 30px; }
  .cost-causal-intro h2 { max-width: 11ch; font-size: clamp(40px, 11vw, 54px); }
  .cost-causal-track { margin-top: 56px; }
  .cost-causal-track::before { left: 17px; }
  .cost-causal-track li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 28px 0;
  }
  .cost-causal-index {
    width: 36px;
    height: 36px;
    box-shadow: 0 0 0 7px #050a13;
    font-size: 9px;
  }
  .cost-causal-track h3 { font-size: 25px; }
  .cost-causal-track p { font-size: 14px; line-height: 1.58; }
  .cost-causal-track li > strong {
    grid-column: 2;
    justify-self: start;
    margin-top: -8px;
    text-align: left;
  }
  .cost-causal-guardrail { margin-left: 54px; }
}

@media (max-width: 380px) {
  .cost-hero-content h1 { font-size: 45px; }
  .cost-signal-axis span { max-width: 18ch; }
  .cost-signal-equation { font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cost-signal-row--demand > i::after { animation: none; left: 72%; opacity: .72; }
}

/* Version 35: one continuous operational field.
   The completed state is the HTML default. JavaScript may replay the interval,
   but the explanation never depends on a canvas, observer, or sticky scene. */
.cost-operational-section {
  position: relative;
  padding: clamp(104px, 13vw, 184px) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse at 84% 18%, rgba(59,109,255,.11), transparent 38%),
    radial-gradient(ellipse at 18% 82%, rgba(63,214,234,.05), transparent 34%),
    linear-gradient(180deg, #04070e, #050a13 64%, #04070e);
}
.cost-operational-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(310px, .56fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  margin-top: 42px;
}
.cost-operational-intro h2 {
  max-width: 12ch;
  font-size: clamp(44px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.052em;
}
.cost-operational-intro h2 span { color: #8198bf; }
.cost-operational-intro p {
  color: #aebbd0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
}
.cost-operational-intro .cost-operational-callout {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(63,214,234,.24);
  color: #d3dde9;
}

.cost-operational-field {
  --field-accent: var(--cyan);
  position: relative;
  margin-top: clamp(62px, 8vw, 108px);
  overflow: hidden;
  border-top: 1px solid rgba(132,159,201,.24);
  border-bottom: 1px solid rgba(132,159,201,.18);
  background:
    linear-gradient(180deg, rgba(11,20,36,.9), rgba(5,10,19,.96)),
    radial-gradient(ellipse at 72% 32%, rgba(59,109,255,.14), transparent 52%);
  box-shadow: 0 46px 130px -92px rgba(59,109,255,.9);
}
.cost-field-head {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
}
.cost-field-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding-left: 18px;
  color: #61718a;
  font: 500 8px var(--font-mono);
  letter-spacing: .12em;
}
.cost-field-head .lamp {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(63,214,234,.72);
}
.cost-field-head b { color: #c1cddd; font-size: 9px; font-weight: 550; }
.cost-field-replay {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid var(--hairline);
  background: transparent;
  color: #91a3be;
  cursor: pointer;
  font: 550 8px var(--font-mono);
  letter-spacing: .11em;
}
.cost-field-replay span { color: var(--cyan); font-size: 18px; line-height: 1; }
.cost-field-replay b { font: inherit; }
.cost-field-replay:hover,
.cost-field-replay:focus-visible {
  background: rgba(63,214,234,.055);
  color: #eef5fb;
  outline: none;
}
.cost-operational-field.is-replaying .cost-field-replay span { animation: cost-field-replay 680ms var(--ease-refract) 1; }
@keyframes cost-field-replay { to { transform: rotate(-360deg); } }

.cost-field-plot {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 62% 48%, rgba(30,67,142,.11), transparent 52%),
    linear-gradient(90deg, rgba(109,147,255,.018) 1px, transparent 1px),
    linear-gradient(rgba(109,147,255,.018) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
.cost-field-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cost-field-svg--mobile { display: none; }
.cost-field-grid path {
  fill: none;
  stroke: rgba(109,147,255,.085);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cost-field-axis text,
.cost-field-label,
.cost-field-note,
.cost-field-mobile-copy {
  fill: #6f819d;
  font: 550 11px var(--font-mono);
  letter-spacing: .12em;
}
.cost-field-axis text { font-size: 10px; }
.cost-field-axis text:nth-child(2),
.cost-field-axis text:last-child { fill: #9cabc1; }
.cost-field-capacity-base {
  fill: none;
  stroke: #aab9ce;
  stroke-width: 3;
  opacity: .64;
  vector-effect: non-scaling-stroke;
}
.cost-field-demand-line {
  fill: none;
  stroke: #6d93ff;
  stroke-width: 5;
  filter: url(#cost-field-glow);
  vector-effect: non-scaling-stroke;
}
.cost-field-gap { fill: url(#cost-field-gap-fill); stroke: none; }
.cost-field-threshold {
  fill: none;
  stroke: rgba(240,164,60,.64);
  stroke-width: 1.5;
  stroke-dasharray: 5 8;
  vector-effect: non-scaling-stroke;
}
.cost-field-decision-band {
  fill: rgba(63,214,234,.07);
  stroke: rgba(63,214,234,.38);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cost-field-observe-path {
  fill: none;
  stroke: rgba(240,164,60,.78);
  stroke-width: 3;
  stroke-dasharray: 7 9;
  vector-effect: non-scaling-stroke;
}
.cost-field-support-path {
  fill: none;
  stroke: #3fd6ea;
  stroke-width: 5;
  filter: url(#cost-field-glow);
  vector-effect: non-scaling-stroke;
}
.cost-field-recovery-area { fill: url(#cost-field-recovery-fill); stroke: none; }
.cost-field-trace {
  fill: none;
  stroke: rgba(63,214,234,.58);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.cost-field-node {
  fill: #08101e;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.cost-field-node--demand { stroke: #6d93ff; }
.cost-field-node--threshold { stroke: var(--amber); fill: rgba(240,164,60,.16); }
.cost-field-node--decision,
.cost-field-node--support { stroke: var(--cyan); fill: rgba(63,214,234,.13); filter: url(#cost-field-glow); }
.cost-field-label { fill: #9eafc7; font-size: 11px; }
.cost-field-label--demand { fill: #86a3ff; }
.cost-field-label--amber { fill: var(--amber); }
.cost-field-label--cyan { fill: var(--cyan); }
.cost-field-large {
  fill: #e1a64d;
  font: 650 24px var(--font-sans);
  letter-spacing: -.02em;
}
.cost-field-large--cyan { fill: var(--cyan); }
.cost-field-note { fill: #71839e; font-size: 9px; }
.cost-field-note--trace { fill: rgba(163,229,239,.64); }
.cost-field-mobile-axis {
  fill: none;
  stroke: rgba(109,147,255,.28);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-index {
  fill: #07101d;
  stroke: #6d93ff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-index--cyan { stroke: var(--cyan); }
.cost-field-svg--mobile .cost-field-phase > text:not(.cost-field-mobile-title):not(.cost-field-mobile-copy) {
  fill: #a8b9d0;
  font: 550 10px var(--font-mono);
  text-anchor: middle;
}
.cost-field-mobile-title {
  fill: #c7d4e6;
  font: 650 18px var(--font-sans);
  letter-spacing: -.01em;
}
.cost-field-mobile-title--amber { fill: var(--amber); }
.cost-field-mobile-title--cyan { fill: var(--cyan); }
.cost-field-mobile-copy { fill: #788ba7; font-size: 8.5px; }
.cost-field-mobile-copy--amber { fill: rgba(240,164,60,.8); }
.cost-field-mobile-demand {
  fill: none;
  stroke: #6d93ff;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-capacity {
  fill: none;
  stroke: rgba(199,212,230,.66);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-gap-shape { fill: url(#cost-field-mobile-gap); stroke: rgba(240,164,60,.48); stroke-width: 1; }
.cost-field-mobile-decision {
  fill: none;
  stroke: rgba(63,214,234,.56);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-observe {
  fill: none;
  stroke: rgba(240,164,60,.72);
  stroke-width: 2.5;
  stroke-dasharray: 6 7;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-support {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.cost-field-mobile-trace {
  fill: none;
  stroke: rgba(63,214,234,.58);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.rx-js .cost-operational-field .cost-field-phase {
  opacity: 0;
  transform: translate3d(0,8px,0);
  transform-origin: center;
  transition: opacity 520ms var(--ease-signal), transform 720ms var(--ease-refract);
}
.rx-js .cost-operational-field[data-field-stage="0"] .cost-field-phase--demand,
.rx-js .cost-operational-field[data-field-stage="1"] .cost-field-phase--demand,
.rx-js .cost-operational-field[data-field-stage="1"] .cost-field-phase--threshold,
.rx-js .cost-operational-field[data-field-stage="2"] .cost-field-phase--demand,
.rx-js .cost-operational-field[data-field-stage="2"] .cost-field-phase--threshold,
.rx-js .cost-operational-field[data-field-stage="2"] .cost-field-phase--decision,
.rx-js .cost-operational-field[data-field-stage="3"] .cost-field-phase {
  opacity: 1;
  transform: none;
}

.cost-field-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cost-field-status > div {
  min-width: 0;
  padding: 15px 18px;
  border-right: 1px solid var(--hairline);
}
.cost-field-status > div:last-child { border-right: 0; }
.cost-field-status span,
.cost-field-status b { display: block; font-family: var(--font-mono); letter-spacing: .1em; }
.cost-field-status span { color: #5f708a; font-size: 7px; }
.cost-field-status b {
  margin-top: 6px;
  color: #c7d3e4;
  font-size: 10px;
  font-weight: 550;
  transition: color var(--motion-signal);
}
.cost-operational-field[data-field-stage="1"] #cost-field-aging,
.cost-operational-field[data-field-stage="1"] #cost-field-capacity { color: var(--amber); }
.cost-operational-field[data-field-stage="2"] #cost-field-capacity,
.cost-operational-field[data-field-stage="3"] #cost-field-aging,
.cost-operational-field[data-field-stage="3"] #cost-field-capacity,
.cost-operational-field[data-field-stage="3"] #cost-field-context { color: var(--cyan); }

.cost-field-controls {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  padding: 0 18px;
}
.cost-field-controls::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: rgba(109,147,255,.15);
}
.cost-field-controls button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #687b98;
  cursor: pointer;
  text-align: left;
}
.cost-field-controls button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: transparent;
  transform: scaleX(.2);
  transition: background var(--motion-signal), transform var(--motion-signal);
}
.cost-field-controls button span { font: 550 8px var(--font-mono); letter-spacing: .12em; }
.cost-field-controls button b { font-size: 12px; font-weight: 550; }
.cost-field-controls button:hover,
.cost-field-controls button:focus-visible,
.cost-field-controls button.is-active { color: #edf4fa; outline: none; }
.cost-field-controls button.is-active span { color: var(--cyan); }
.cost-field-controls button.is-active::after {
  background: linear-gradient(90deg, var(--cobalt), var(--cyan));
  transform: scaleX(1);
}
.cost-field-readout {
  display: grid;
  grid-template-columns: minmax(140px,.28fr) minmax(0,1fr) minmax(180px,.3fr);
  gap: 22px;
  align-items: center;
  min-height: 92px;
  padding: 20px 30px;
}
.cost-field-readout span { color: var(--cyan); font: 550 9px var(--font-mono); letter-spacing: .12em; }
.cost-field-readout p { color: #c2cddd; font-size: 15px; line-height: 1.5; }
.cost-field-readout em { color: #6f819b; font: normal 550 8px var(--font-mono); letter-spacing: .11em; text-align: right; }
.cost-operational-guardrail {
  margin-top: 24px;
  color: #718098;
  font: 500 8px/1.6 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.cost-signal-row--execution > i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8e1ef;
  box-shadow: 0 0 12px rgba(216,225,239,.48);
  transform: translate(-50%,-50%);
  animation: cost-execution-pass 5.2s steps(4,end) infinite;
}
.cost-signal-row--margin > i {
  transform-origin: left center;
  animation: cost-margin-compress 5.2s var(--ease-signal) infinite;
}
@keyframes cost-execution-pass {
  0%, 12% { left: 12%; }
  36% { left: 38%; }
  62% { left: 64%; }
  86%, 100% { left: 90%; }
}
@keyframes cost-margin-compress {
  0%, 12% { transform: scaleX(1); opacity: .86; }
  74%, 92% { transform: scaleX(.18); opacity: .72; }
  100% { transform: scaleX(1); opacity: .86; }
}

.cost-response-deck {
  max-width: 790px;
  margin: 30px auto 0;
  color: #a9b6c9;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
}
.cost-response-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 68px;
  color: #9eafc5;
  font: 550 9px var(--font-mono);
  letter-spacing: .11em;
}
.cost-response-line span { white-space: nowrap; }
.cost-response-line span:first-child { color: #c6d2e3; }
.cost-response-line span:last-child { color: var(--cyan); }
.cost-response-line i {
  flex: 1 1 72px;
  max-width: 110px;
  height: 1px;
  margin: 0 15px;
  background: linear-gradient(90deg, rgba(109,147,255,.3), rgba(63,214,234,.72));
}

@media (max-width: 980px) {
  .cost-operational-intro { grid-template-columns: 1fr; gap: 28px; }
  .cost-operational-intro p { max-width: 68ch; }
  .cost-field-plot { min-height: 0; }
  .cost-field-svg--desktop { display: none; }
  .cost-field-svg--mobile { display: block; }
  .cost-field-head > div span:last-child { display: none; }
  .cost-field-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cost-field-controls::before { display: none; }
  .cost-field-controls button { border-bottom: 1px solid var(--hairline); }
  .cost-field-readout { grid-template-columns: 1fr; gap: 8px; }
  .cost-field-readout em { text-align: left; }
  .cost-response-line {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0 16px;
    max-width: 440px;
    margin-inline: auto;
    text-align: left;
  }
  .cost-response-line span { grid-column: 2; padding: 9px 0; }
  .cost-response-line i {
    grid-column: 1;
    align-self: stretch;
    width: 1px;
    height: auto;
    min-height: 24px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(109,147,255,.3), rgba(63,214,234,.72));
  }
}

@media (max-width: 680px) {
  .cost-operational-section { padding: 94px 0; }
  .cost-operational-intro { margin-top: 30px; }
  .cost-operational-intro h2 { max-width: 11ch; font-size: clamp(40px, 11vw, 54px); }
  .cost-operational-field { margin-top: 56px; }
  .cost-field-head > div { padding-left: 13px; }
  .cost-field-head > div b { font-size: 8px; }
  .cost-field-replay { padding: 0 12px; }
  .cost-field-replay b { display: none; }
  .cost-field-svg--mobile { min-height: 560px; }
  .cost-field-mobile-axis {
    fill: none;
    stroke: rgba(109,147,255,.28);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-index {
    fill: #07101d;
    stroke: #6d93ff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-index--cyan { stroke: var(--cyan); }
  .cost-field-svg--mobile .cost-field-phase > text:not(.cost-field-mobile-title):not(.cost-field-mobile-copy) {
    fill: #a8b9d0;
    font: 550 10px var(--font-mono);
    text-anchor: middle;
  }
  .cost-field-mobile-title {
    fill: #c7d4e6;
    font: 650 18px var(--font-sans);
    letter-spacing: -.01em;
  }
  .cost-field-mobile-title--amber { fill: var(--amber); }
  .cost-field-mobile-title--cyan { fill: var(--cyan); }
  .cost-field-mobile-copy { fill: #788ba7; font-size: 8.5px; }
  .cost-field-mobile-copy--amber { fill: rgba(240,164,60,.8); }
  .cost-field-mobile-demand {
    fill: none;
    stroke: #6d93ff;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-capacity {
    fill: none;
    stroke: rgba(199,212,230,.66);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-gap-shape { fill: url(#cost-field-mobile-gap); stroke: rgba(240,164,60,.48); stroke-width: 1; }
  .cost-field-mobile-decision {
    fill: none;
    stroke: rgba(63,214,234,.56);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-observe {
    fill: none;
    stroke: rgba(240,164,60,.72);
    stroke-width: 2.5;
    stroke-dasharray: 6 7;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-support {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-mobile-trace {
    fill: none;
    stroke: rgba(63,214,234,.58);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .cost-field-status { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cost-field-status > div:nth-child(2) { border-right: 0; }
  .cost-field-status > div:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .cost-field-status > div { padding: 13px; }
  .cost-field-controls { padding: 0; }
  .cost-field-controls button { min-height: 58px; padding-inline: 13px; }
  .cost-field-controls button b { font-size: 11px; }
  .cost-field-readout { min-height: 132px; padding: 18px 14px 22px; }
  .cost-field-readout p { font-size: 14px; }
  .cost-signal-row { grid-template-columns: minmax(0,1fr) auto; }
  .cost-signal-row > span { grid-column: 1; grid-row: 1; }
  .cost-signal-row > strong { grid-column: 2; grid-row: 1; }
  .cost-signal-row > i { grid-column: 1 / -1; grid-row: 2; }
  .cost-response-line { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .cost-operational-field .cost-field-phase,
  .cost-field-controls button::after,
  .cost-field-status b { transition: none; }
  .cost-operational-field.is-replaying .cost-field-replay span,
  .cost-signal-row--execution > i::after,
  .cost-signal-row--margin > i { animation: none; }
}