:root {
  --color-abyssal: #0c2a36;
  --color-terracotta: #c2410c;
  --color-paper: #f7f3ee;
  --color-muted: #4f646c;
  --color-on-dark: rgba(247, 243, 238, .75);
  /* Terracotta reads at 2.9:1 on abyssal — below AA. Same hue, lifted to 5.1:1,
     used only on the dark decision panel. */
  --color-accent-on-dark: #e8763f;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --hairline: 1px solid rgba(12, 42, 54, .08);
  --hairline-strong: 1px solid rgba(12, 42, 54, .16);
  --hairline-dark: 1px solid rgba(247, 243, 238, .14);
  --shadow: 0 4px 24px rgba(12, 42, 54, .06);
  --ease: cubic-bezier(.25, .1, .25, 1);

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 48px; --s6: 96px;
  --measure: 62ch;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-abyssal);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-terracotta); color: var(--color-paper); }

a { color: var(--color-terracotta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
  border-radius: 1px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; }
p { margin: 0; }

code, .mono { font-family: var(--font-mono); font-size: .92em; font-variant-ligatures: none; }

.kicker {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-muted);
  margin: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-abyssal); color: var(--color-paper);
  padding: var(--s2) var(--s3); text-decoration: none;
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(247, 243, 238, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--hairline);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
.wordmark {
  font-family: var(--font-mono); font-weight: 500; font-size: 1rem;
  color: var(--color-abyssal); text-decoration: none; letter-spacing: .02em;
}
.wordmark:hover { color: var(--color-terracotta); }
.topbar nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted); text-decoration: none;
}
.topbar nav a:hover { color: var(--color-terracotta); }

/* Keep the sticky bar to one row on a phone — two rows eat the viewport. */
@media (max-width: 560px) {
  .topbar-inner { padding: var(--s2) var(--s3); gap: var(--s3); }
  .topbar nav { flex-wrap: nowrap; gap: 12px; }
  .topbar nav a { font-size: .7rem; letter-spacing: .05em; white-space: nowrap; }
}

/* ---------- layout ---------- */

main { max-width: 1180px; margin: 0 auto; padding: 0 var(--s4); }
@media (max-width: 560px) { main { padding: 0 var(--s3); } }

.section { padding: var(--s6) 0; border-top: var(--hairline); }
@media (max-width: 560px) { .section { padding: var(--s5) 0; } .hero { padding: var(--s5) 0 var(--s4); } }
.section-head { max-width: var(--measure); margin-bottom: var(--s5); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: var(--s2) 0 var(--s3); }
.section-lede { color: var(--color-muted); font-size: 1.05rem; }

/* ---------- hero ---------- */

.hero { padding: var(--s6) 0 var(--s5); max-width: 46rem; }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); margin: var(--s3) 0 var(--s4); }
.lede { font-size: 1.15rem; color: var(--color-muted); max-width: var(--measure); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }

.btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  padding: 12px var(--s4);
  border: 1px solid var(--color-terracotta);
  transition: background .2s var(--ease), color .2s var(--ease);
  cursor: pointer;
}
.btn-primary { background: var(--color-terracotta); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-abyssal); border-color: var(--color-abyssal); }
.btn-ghost { background: transparent; color: var(--color-terracotta); }
.btn-ghost:hover { background: var(--color-terracotta); color: var(--color-paper); }

.stats {
  list-style: none; padding: 0; margin: var(--s5) 0 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: var(--hairline); padding-top: var(--s4);
}
.stats li { display: flex; flex-direction: column; gap: var(--s1); }
.stat-value { font-family: var(--font-mono); font-weight: 500; font-size: .95rem; }
#stat-lift { color: var(--color-terracotta); }
.stat-label { font-size: .85rem; color: var(--color-muted); }

/* ---------- router ---------- */

.router { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
/* Phone reading order: pick a scenario, see the decision, then adjust. */
.cases-block { order: 1; }
.decision-wrap { order: 2; }
.adjust-block { order: 3; }

@media (min-width: 1000px) {
  .router { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .cases-block { grid-column: 1; grid-row: 1; }
  .adjust-block { grid-column: 1; grid-row: 2; }
  .decision-wrap { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 76px; }
}

.panel-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 var(--s1); }
.hint { color: var(--color-muted); font-size: .9rem; margin: 0 0 var(--s3); }
.hint.on-dark { color: var(--color-on-dark); }
.helper { color: var(--color-muted); font-size: .82rem; margin: var(--s1) 0 0; }

.cases { display: flex; flex-direction: column; border-top: var(--hairline); }

.case {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: var(--hairline);
  padding: 12px var(--s2) 12px 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: background .15s var(--ease), padding-left .15s var(--ease);
}
.case:hover { background: rgba(12, 42, 54, .03); padding-left: var(--s2); }
.case[aria-pressed="true"] { border-left: 2px solid var(--color-terracotta); padding-left: var(--s3); }
.case[aria-pressed="true"] .case-title { color: var(--color-terracotta); }
.case-n { font-family: var(--font-mono); font-size: .75rem; color: var(--color-muted); }
.case-title { font-weight: 500; display: block; }
.case-meta { font-family: var(--font-mono); font-size: .75rem; color: var(--color-muted); display: block; margin-top: 2px; }

.adjust { border-top: var(--hairline); padding-top: var(--s4); }
.adjust .panel-title { margin-bottom: var(--s4); }
.field { margin: 0 0 var(--s4); border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.field label, .field legend { display: block; font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); margin: 0 0 var(--s2); padding: 0; }
.field .value { color: var(--color-terracotta); text-transform: none; letter-spacing: 0; }

input[type="number"], input[type="text"], select {
  width: 100%; font-family: var(--font-mono); font-size: .95rem;
  padding: 9px 10px; color: var(--color-abyssal);
  background: transparent; border: var(--hairline-strong); border-radius: 2px;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input:hover, select:hover { border-color: rgba(12, 42, 54, .32); }
input[aria-invalid="true"] { border-color: var(--color-terracotta); }

input[type="range"] { width: 100%; appearance: none; background: transparent; margin: var(--s2) 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: rgba(12, 42, 54, .24); }
input[type="range"]::-moz-range-track { height: 1px; background: rgba(12, 42, 54, .24); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--color-terracotta); margin-top: -7.5px; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--color-terracotta); }

.range-ends { display: flex; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }

.checks { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.check { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: .85rem; cursor: pointer; }
.check input { accent-color: var(--color-terracotta); width: 15px; height: 15px; cursor: pointer; }

.err {
  font-size: .88rem; color: #8a2c08;
  border-left: 2px solid var(--color-terracotta);
  padding: var(--s2) var(--s3); margin: var(--s3) 0 0;
  background: rgba(194, 65, 12, .05);
}

/* ---------- decision panel ---------- */

.decision {
  background: var(--color-abyssal); color: var(--color-paper);
  padding: var(--s4); border-radius: 2px;
}
@media (min-width: 640px) { .decision { padding: var(--s5) var(--s4); } }

.decision .kicker { color: var(--color-on-dark); }
.decision a { color: var(--color-paper); }

.route-head { border-bottom: var(--hairline-dark); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.route-psp { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5.4vw, 3rem); line-height: 1.05; margin: var(--s2) 0 0; }
.route-psp span { color: var(--color-accent-on-dark); }
.seg-line {
  font-family: var(--font-mono); font-size: .78rem; color: var(--color-on-dark);
  margin-top: var(--s2);
}
.seg-line::before { content: 'segment '; opacity: .6; }
.psp-stats [title] { border-bottom: 1px dotted rgba(247, 243, 238, .3); cursor: help; }
.flag {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-paper); border: 1px solid rgba(247, 243, 238, .35);
  padding: 3px var(--s2);
}

.psp-list { display: flex; flex-direction: column; gap: var(--s4); margin: 0 0 var(--s4); }
.psp { display: block; }
.psp-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-family: var(--font-mono); font-size: .88rem; }
.psp-id { font-weight: 500; }
.psp.win .psp-id, .psp.win .psp-net { color: var(--color-accent-on-dark); }
.psp.out .psp-id, .psp.out .psp-net { color: var(--color-on-dark); text-decoration: line-through; }
.psp-net { font-variant-numeric: tabular-nums; white-space: nowrap; }
.psp-delta { color: var(--color-on-dark); font-weight: 400; }
.bar { height: 3px; background: rgba(247, 243, 238, .14); margin: var(--s2) 0; }
.bar > span { display: block; height: 100%; background: var(--color-on-dark); transition: width .35s var(--ease); }
.psp.win .bar > span { background: var(--color-accent-on-dark); }

.psp-stats { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; font-family: var(--font-mono); font-size: .74rem; }
.psp-stats > div { display: flex; gap: 6px; align-items: baseline; }
.psp-stats dt { color: var(--color-on-dark); text-transform: uppercase; letter-spacing: .06em; }
.psp-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.thin { color: var(--color-accent-on-dark); border: 1px solid rgba(232, 118, 63, .55); padding: 0 5px; text-transform: uppercase; letter-spacing: .06em; }

.retry { border-top: var(--hairline-dark); padding-top: var(--s4); margin-top: var(--s4); }
.retry-line { font-family: var(--font-mono); font-size: .86rem; margin: var(--s2) 0 0; line-height: 1.7; }
.retry-line .step { color: var(--color-accent-on-dark); }
.retry-line .arrow { color: var(--color-on-dark); padding: 0 6px; }
.retry-note { color: var(--color-on-dark); font-size: .85rem; margin-top: var(--s2); }

.trail { border-top: var(--hairline-dark); padding-top: var(--s4); margin-top: var(--s4); }
.trail summary { font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--color-on-dark); cursor: pointer; list-style: none; }
.trail summary::-webkit-details-marker { display: none; }
.trail summary::after { content: ' +'; }
.trail[open] summary::after { content: ' −'; }
.trail summary:hover { color: var(--color-paper); }
.trail ol { margin: var(--s3) 0 0; padding-left: 1.6em; }
.trail li { font-family: var(--font-mono); font-size: .78rem; line-height: 1.75; color: var(--color-on-dark); margin-bottom: var(--s2); overflow-wrap: anywhere; }
.trail li::marker { color: var(--color-accent-on-dark); }

/* ---------- what if ---------- */

.whatif { margin-top: var(--s5); border-top: var(--hairline); padding-top: var(--s4); }
.whatif-block { margin-top: var(--s4); }
.sweep { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); margin-top: var(--s3); }
#down-scenarios { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
.cell { border: var(--hairline); padding: var(--s2) 10px; font-family: var(--font-mono); font-size: .73rem; }
.cell .cell-k { color: var(--color-muted); display: block; }
.cell .cell-v { display: block; font-weight: 500; margin-top: 3px; }
.cell .cell-n { color: var(--color-muted); display: block; font-variant-numeric: tabular-nums; }
.cell.changed { border-color: var(--color-terracotta); }
.cell.changed .cell-v { color: var(--color-terracotta); }

/* ---------- normalizer ---------- */

.normalizer { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .normalizer { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.own { margin: 0 0 var(--s4); border-top: var(--hairline); padding-top: var(--s3); }
.own summary { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); cursor: pointer; margin-bottom: var(--s3); }
.own summary:hover { color: var(--color-terracotta); }

.norm-result { border-top: 2px solid var(--color-abyssal); padding-top: var(--s4); }
.norm-class { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4.6vw, 2.4rem); margin: var(--s2) 0 var(--s3); overflow-wrap: anywhere; }
.badge {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 10px; border: 1px solid;
}
.badge-table { border-color: rgba(12, 42, 54, .28); color: var(--color-abyssal); }
.badge-llm { border-color: var(--color-terracotta); background: var(--color-terracotta); color: var(--color-paper); }
.badge-fallback { border-color: rgba(79, 100, 108, .4); color: var(--color-muted); }
.badge-conf { opacity: .8; text-transform: none; letter-spacing: 0; }
.norm-raw { font-family: var(--font-mono); font-size: .8rem; color: var(--color-muted); overflow-wrap: anywhere; }
.norm-reason { color: var(--color-muted); font-size: .9rem; margin-top: var(--s3); max-width: var(--measure); }
.norm-policy { border-top: var(--hairline); margin-top: var(--s4); padding-top: var(--s4); max-width: var(--measure); }

/* ---------- how it works ---------- */

.diagram { margin: 0 0 var(--s6); }
.diagram svg { width: 100%; height: auto; max-width: 720px; color: rgba(12, 42, 54, .45); }
.diagram .dbox rect { fill: none; stroke: rgba(12, 42, 54, .22); stroke-width: 1; }
.diagram .dbox.accent rect { stroke: var(--color-terracotta); }
.diagram .dbox.accent .dt { fill: var(--color-terracotta); }
.diagram line { stroke: rgba(12, 42, 54, .45); stroke-width: 1; }
.diagram text { font-family: var(--font-mono); text-anchor: middle; }
.diagram .dt { font-size: 11px; fill: var(--color-abyssal); }
.diagram .ds { font-size: 8.5px; fill: var(--color-muted); }
.diagram .lane-label text { font-size: 8.5px; fill: var(--color-muted); text-anchor: start; text-transform: uppercase; letter-spacing: .12em; }

.cols { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .cols { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.cols article { border-top: var(--hairline-strong); padding-top: var(--s3); }
.cols h3 { font-size: 1.3rem; margin: var(--s2) 0 var(--s3); }
.cols p { color: var(--color-muted); font-size: .93rem; margin-bottom: var(--s3); }
.cols .links { display: flex; gap: var(--s4); font-family: var(--font-mono); font-size: .8rem; }

/* ---------- footer ---------- */

.footer {
  border-top: var(--hairline); margin-top: var(--s6);
  padding: var(--s5) var(--s4) var(--s6);
  max-width: 1180px; margin-left: auto; margin-right: auto;
}
.footer-lede { font-family: var(--font-display); font-size: 1.25rem; max-width: var(--measure); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin: var(--s4) 0; font-family: var(--font-mono); font-size: .82rem; }
.footer-note { color: var(--color-muted); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}