/* How it works, impact, and proof. Uses the tokens and type scale from styles.css so these
   bands read as the same product as the hero and the console, not as bolted-on sections. */

/* The sticky topbar is 70px tall and sits 12px down, so every anchor target needs to clear it.
   Without this, clicking a nav link scrolls the heading you asked for underneath the header. */
#why, #command, #how, #impact, #proof, #sources, #developer-api { scroll-margin-top: 92px; }

/* ---- Above the fold: the autonomy claim as numbers, in the same voice as the map cards ---- */
.hero-claims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 15px; padding: 0; list-style: none; max-width: 680px; }
.hero-claims li { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.hero-claims b { display: block; color: var(--blue); font: 600 19px/1 "Geist Mono", monospace; letter-spacing: -.02em; }
.hero-claims span { display: block; margin-top: 4px; color: var(--faint); font-size: 9.5px; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Shared: a mono sub-heading in the same register as .kicker ---- */
.subhead { margin: 60px 0 18px; color: var(--cyan); font: 600 10px/1.4 "Geist Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }

/* ---- How it works ---- */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pipeline li { min-height: 196px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-content: start; }
.pipeline li::before { counter-increment: step; content: counter(step, decimal-leading-zero); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font: 600 12px "Geist Mono", monospace; }
.pipeline li b { font-size: 17px; line-height: 1.15; letter-spacing: -.03em; }
.pipeline li span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.pipeline li.human { border-color: var(--amber); }
.pipeline li.human::before { border-color: var(--amber); color: var(--amber); }

.fleet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 11px; margin: 0; padding: 0; list-style: none; }
.fleet-grid li { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 7px; align-content: start; }
.fleet-grid code { color: var(--blue); font: 600 12px "Geist Mono", monospace; }
.fleet-grid span { color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.fleet-grid li.planner { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.fleet-grid li.planner code { color: var(--cyan); }
.fleet-note { margin: 13px 0 0; max-width: 900px; color: var(--faint); font-size: 11.5px; line-height: 1.65; }

.stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.stack-grid li { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; align-content: start; }
.stack-grid b { font-size: 11.5px; letter-spacing: -.01em; }
.stack-grid span { color: var(--faint); font-size: 10px; line-height: 1.55; }

.how-figure { margin: 32px 0 0; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.how-figure img { display: block; width: 100%; min-width: 760px; height: auto; }
.how-figure figcaption { margin-top: 13px; color: var(--faint); font-size: 10.5px; }

/* ---- Impact: what we claim, and the refusal, given equal weight ---- */
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 13px; }
.impact-grid article { min-height: 218px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-rows: auto auto 1fr; gap: 9px; align-content: start; }
.impact-grid small { color: var(--cyan); font: 600 9px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.impact-grid b { font-size: 20px; line-height: 1.12; letter-spacing: -.04em; }
.impact-grid span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.impact-grid article:last-child { border-color: var(--amber); border-style: dashed; }
.impact-grid article:last-child small { color: var(--amber); }

/* ---- Prove it: numbers fetched from this deployment, never typed into the page ---- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)); gap: 13px; }
.proof-card { min-height: 200px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-rows: auto auto 1fr auto; gap: 9px; align-content: start; text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; }
.proof-card:hover { border-color: var(--line2); transform: translateY(-2px); }
.proof-card small { color: var(--cyan); font: 600 9px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.proof-card b { font: 600 40px/1 "Geist Mono", monospace; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--faint); }
.proof-card span { color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.proof-card code { color: var(--faint); font: 500 9.5px "Geist Mono", monospace; }
.proof-card[data-state="checking"] b { animation: proof-pulse 1.4s ease-in-out infinite; }
.proof-card[data-state="pass"] { border-color: var(--blue); }
.proof-card[data-state="pass"] b { color: var(--blue); }
.proof-card[data-state="fail"] { border-color: var(--red); }
.proof-card[data-state="fail"] b { color: var(--red); }
.proof-card[data-state="unavailable"] { border-color: var(--amber); }
.proof-card[data-state="unavailable"] b { color: var(--amber); }
@keyframes proof-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

.proof-note { margin: 22px 0 0; max-width: 900px; color: var(--faint); font-size: 11.5px; line-height: 1.7; }
.proof-note a { color: var(--blue); }

@media (min-width: 1660px) {
  .pipeline li b, .impact-grid b { font-size: 19px; }
  .pipeline li span, .impact-grid span { font-size: 13px; }
  .fleet-grid span, .stack-grid span, .fleet-note, .proof-note, .proof-card span { font-size: 12.5px; }
  .stack-grid b, .fleet-grid code { font-size: 13px; }
  .hero-claims b { font-size: 22px; }
  .hero-claims span { font-size: 10.5px; }
}

@media (max-width: 760px) {
  .hero-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subhead { margin-top: 42px; }
  .pipeline li, .impact-grid article, .proof-card { min-height: 0; padding: 20px; }
  .proof-card b { font-size: 34px; }
  .how-figure { padding: 13px; }
  .how-figure img { min-width: 620px; }
}