.cost-page {
  --cost-line: var(--border-soft);
  --cost-line-strong: var(--border-medium);
  --cost-panel: var(--bg-1);
  --cost-deep: var(--bg-2);
  --cost-ink: var(--text-primary);
  --cost-muted: var(--text-secondary);
  --cost-gold: var(--gold-400);
  background: var(--bg-0);
  color: var(--cost-ink);
}
.cost-page * { box-sizing: border-box; }
.cost-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(18px); }
.cost-header nav { display: flex; gap: 24px; }
.cost-header nav a { color: var(--cost-muted); font-size: .8rem; text-decoration: none; transition: color .2s ease; }
.cost-header nav a:hover { color: var(--cost-ink); }
.cost-shell { width: min(100%,1440px); margin-inline: auto; padding-inline: clamp(20px,5vw,76px); }
.cost-kicker { margin: 0; color: var(--blue-300); font: 700 .7rem/1.4 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.section-number { margin-bottom: 28px; color: var(--cost-gold); font: 700 .75rem var(--font-mono); }
.text-link,.button { transition: transform .2s ease,color .2s ease; }
.text-link:active,.button:active { transform: translateY(1px); }

.cost-hero { min-height: calc(100dvh - 72px); padding-top: clamp(90px,11vw,160px); padding-bottom: clamp(105px,12vw,175px); display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: clamp(60px,9vw,140px); align-items: center; }
.hero-copy h1 { max-width: 1100px; margin: 24px 0 0; font-size: clamp(4rem,7.1vw,7.7rem); line-height: .9; letter-spacing: -.068em; text-wrap: balance; }
.hero-copy h1 span { color: var(--cost-gold); }
.cost-lead { max-width: 800px; margin: 34px 0; color: var(--cost-muted); font-size: clamp(1.08rem,1.5vw,1.32rem); line-height: 1.65; text-wrap: pretty; }
.text-link { color: var(--cost-ink); font-weight: 650; text-underline-offset: 5px; }
.hero-proof { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.hero-proof > div:not(.not-equal) { padding: 26px; border: 1px solid var(--cost-line); background: var(--cost-deep); }
.hero-proof span { color: var(--cost-muted); font: 650 .66rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-proof p { margin: 12px 0 0; font: 700 1rem/1.5 var(--font-mono); }
.hero-proof > div.workflow-box { border-color: var(--cost-gold); background: var(--gold-wash); }
.hero-proof > div.workflow-box p { color: var(--cost-gold); }
.not-equal { color: var(--cost-muted); font: 300 2rem var(--font-mono); text-align: center; }

.workflow-section,.runtime-section { scroll-margin-top: 76px; padding-top: clamp(105px,11vw,165px); padding-bottom: clamp(115px,12vw,180px); border-top: 1px solid var(--cost-line); }
.section-intro { margin-bottom: 64px; display: grid; grid-template-columns: 1.25fr .55fr; gap: 70px; align-items: end; }
.section-intro h2,.runtime-head h2 { margin: 16px 0 0; font-size: clamp(3.2rem,5.8vw,6.2rem); line-height: .93; letter-spacing: -.064em; text-wrap: balance; }
.section-intro > p,.runtime-head > p { margin: 0; color: var(--cost-muted); line-height: 1.7; text-wrap: pretty; }
.graph { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.graph article { position: relative; min-height: 230px; padding: 22px 18px; display: grid; align-content: space-between; gap: 28px; border-top: 2px solid var(--blue-300); background: var(--cost-panel); }
.graph article:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; z-index: 2; width: 13px; color: var(--cost-gold); font: 700 .8rem var(--font-mono); }
.graph article:nth-child(even) { transform: translateY(20px); }
.graph .graph-critical { border-color: var(--cost-gold); background: radial-gradient(circle at 90% 0,var(--gold-wash),transparent 42%),var(--cost-panel); }
.graph span { color: var(--cost-muted); font: 650 .63rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.graph strong { align-self: end; font-size: clamp(.92rem,1.4vw,1.18rem); line-height: 1.2; }
.graph small { color: var(--cost-muted); font-size: .7rem; line-height: 1.5; }
.graph-caption { max-width: 760px; margin: 56px 0 0 auto; color: var(--cost-muted); font-size: .84rem; line-height: 1.65; text-align: right; }

.runtime-head { display: grid; grid-template-columns: 1fr; }
.runtime-head h2 span { color: var(--cost-gold); }
.runtime-head > p { max-width: 720px; margin-top: 30px; font-size: 1.05rem; }
.runtime-rail { margin: 75px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--cost-line); border-left: 1px solid var(--cost-line); }
.runtime-rail li { min-height: 310px; padding: 24px; display: grid; align-content: space-between; border-right: 1px solid var(--cost-line); border-bottom: 1px solid var(--cost-line); background: var(--cost-panel); }
.runtime-rail li > span { color: var(--cost-gold); font: 700 .7rem var(--font-mono); }
.runtime-rail strong { font-size: 1rem; line-height: 1.3; }
.runtime-rail p { margin: 13px 0 0; color: var(--cost-muted); font-size: .74rem; line-height: 1.6; }

.rail-close { padding-top: clamp(110px,12vw,185px); padding-bottom: clamp(120px,13vw,200px); display: grid; grid-template-columns: .35fr 1fr; gap: 70px; border-top: 1px solid var(--cost-line); }
.rail-close h2 { margin: 0; font-size: clamp(3.4rem,6.7vw,7.4rem); line-height: .9; letter-spacing: -.068em; }
.rail-close h2 span { color: var(--cost-gold); }
.rail-close div p { max-width: 760px; margin: 28px 0 34px; color: var(--cost-muted); font-size: 1.06rem; line-height: 1.7; }
.method { padding-top: 28px; padding-bottom: 42px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; border-top: 1px solid var(--cost-line); color: var(--cost-muted); font-size: .68rem; line-height: 1.6; }
.method p { margin: 0; max-width: 850px; }
.method strong { color: var(--cost-ink); }
.source-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px 16px; }
.source-links a { color: var(--cost-muted); }

@media (max-width: 1120px) {
  .cost-header nav { display: none; }
  .cost-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-proof { max-width: 720px; grid-template-columns: 1fr auto 1.2fr; }
  .graph { grid-template-columns: repeat(3,1fr); }
  .graph article:nth-child(even) { transform: none; }
  .graph article:nth-child(3)::after { display: none; }
  .runtime-rail { grid-template-columns: repeat(2,1fr); }
  .runtime-rail li:last-child { grid-column: span 2; min-height: 220px; }
}
@media (max-width: 760px) {
  .cost-header nav { display: none; }
  .cost-hero { padding-top: 70px; }
  .hero-copy h1 { font-size: clamp(3.2rem,15vw,5.2rem); }
  .hero-proof { grid-template-columns: 1fr; }
  .section-intro,.rail-close { grid-template-columns: 1fr; gap: 30px; }
  .graph { grid-template-columns: 1fr; }
  .graph article { min-height: 175px; }
  .graph article:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -13px; width: auto; }
  .graph-caption { margin-top: 38px; text-align: left; }
  .runtime-rail { grid-template-columns: 1fr; }
  .runtime-rail li,.runtime-rail li:last-child { grid-column: auto; min-height: 230px; }
  .method { grid-template-columns: 1fr; }
  .source-links { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) { .text-link,.button,.cost-header nav a { transition: none; } }