/* Reset, typography, page layout. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h,3.5rem) + 1rem)}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.55;min-height:100vh}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.band :focus-visible{outline-color:var(--focus-on-band)}
main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:var(--radius-control);font-size:.875rem;text-decoration:none}
.skip-link:focus{top:.5rem}

/* Hero band */
.band{background:var(--band);color:var(--band-ink)}
.hero{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.25rem);line-height:1.08;letter-spacing:-.02em}
.hero mark{background:var(--highlight);color:var(--band);padding:0 .15em;border-radius:4px}
.hero p{color:var(--band-muted);max-width:34rem;margin-top:.75rem}
.hero-stats{display:flex;gap:2rem;flex-shrink:0}
.hstat .num{font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.hstat .lbl{font-size:.875rem;color:var(--band-muted);margin-top:4px}

.panels{max-width:1100px;margin:0 auto;padding:1.5rem}
.layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:1.5rem;align-items:start}
.content-section{max-width:1100px;margin:0 auto;padding:3rem 1.5rem;border-top:1px solid var(--border-subtle)}
.content-section h2{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;margin-bottom:.5rem}
.content-section .lead{color:var(--muted);max-width:38rem;margin-bottom:2rem}

@media(max-width:760px){
  .hero{padding:1.5rem 1rem 1.75rem}
  .hero-stats{display:none}
  .panels{padding:1rem}
  /* Answer first, then inputs, then details. Only the visual order changes; DOM order stays inputs -> results. */
  .layout{grid-template-columns:minmax(0,1fr);row-gap:0}
  .results{display:contents}
  .answer{order:-1}
  .inputs{margin-bottom:1rem}
}

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