/* ============================================================
   Mound Ready — website tokens

   Mirrors components/ui/theme.ts in the app repo (inform-pitch).
   Dark is the designed default ("field at night"); light is the
   daylight paper mode. Values are copied exactly — if the app's
   theme moves, move these with it.

   Two laws encoded here rather than left to judgment:
   - Text on a solid tone fill is near-black ink, never white.
   - Dark separates with strokes, light separates with shadows.
     Never both. That's why --card-border and --card-shadow are
     tokens: each theme switches one on and the other off.
   ============================================================ */
:root {
  color-scheme: dark light;

  /* ---- Dark (canonical) ---- */
  --bg: #070c14;
  --surface: #0e1624;
  --surface-alt: #121c2b;
  --surface-raised: #16202f;
  --border: rgba(159, 176, 199, 0.2);
  --hairline: rgba(159, 176, 199, 0.16);
  --text: #f4f7fc;
  --text-muted: #9fb0c7;
  /* textDim is carried for parity with the app, but nothing on this site sets
     type in it: it measures 4.01:1 on surface / 4.34:1 on bg in dark and
     2.86:1 in light, under the flat 4.5:1 bar the app holds itself to. */
  --text-dim: #66788f;

  --accent: #339cff; /* as foreground / link */
  --accent-fill: #339cff; /* as a solid fill */
  --accent-pressed: #1e7fe0;
  --accent-soft: rgba(51, 156, 255, 0.14);
  --on-accent: #070c14; /* INK — never white */
  --on-accent-soft: #339cff;

  --ready: #2fd06b;
  --ready-soft: rgba(47, 208, 107, 0.14);
  --on-ready-soft: #2fd06b;
  --caution: #ffb020;
  --caution-soft: rgba(255, 176, 32, 0.14);
  --on-caution-soft: #ffb020;
  --stop: #ff4d4f;
  --stop-soft: rgba(255, 77, 79, 0.14);
  --on-stop-soft: #ff4d4f;

  --track: #16202f;
  --track-border: rgba(159, 176, 199, 0.55);

  /* Brand mark fills that differ between the two SVG masters */
  --mark-arc: #f5f7fa;
  --mark-clay: #c08f52;

  /* Depth law */
  --card-border: var(--hairline);
  --card-shadow: none;
  /* The single sanctioned atmospheric move. Dark only. */
  --glow: radial-gradient(closest-side, rgba(51, 156, 255, 0.14), transparent 70%);

  /* Type */
  --display: "Teko", "Oswald", "Arial Narrow", sans-serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale: 4 8 12 16 20 24 32 48 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;

  /* Radius scale: 12 16 20 28 pill */
  --r1: 12px;
  --r2: 16px;
  --r3: 20px;
  --r4: 28px;
  --pill: 999px;

  --wrap: 1120px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f5f9;
    --surface: #ffffff;
    --surface-alt: #f7f9fc;
    --surface-raised: #ffffff;
    --border: rgba(12, 21, 36, 0.12);
    --hairline: rgba(12, 21, 36, 0.08);
    --text: #0c1524;
    --text-muted: #51617a;
    --text-dim: #8393a9;

    /* The vivid values fail 4.5:1 as text on #F2F5F9, so text and fill
       are different values in light. Fills keep full chroma. */
    --accent: #096bc8;
    --accent-fill: #107fe8;
    --accent-pressed: #0967c2;
    --accent-soft: rgba(11, 124, 232, 0.1);
    --on-accent: #070c14;
    --on-accent-soft: #0963ba;

    --ready: #117c38;
    --ready-soft: rgba(23, 163, 74, 0.14);
    --on-ready-soft: #107033;
    --caution: #9b5d00;
    --caution-soft: rgba(199, 119, 0, 0.14);
    --on-caution-soft: #8d5400;
    --stop: #c43636;
    --stop-soft: rgba(220, 61, 61, 0.14);
    --on-stop-soft: #ae3030;

    --track: rgba(12, 21, 36, 0.08);
    --track-border: rgba(12, 21, 36, 0.48);

    --mark-arc: #0c1524;
    --mark-clay: #96682f;

    --card-border: transparent;
    --card-shadow: 0 2px 12px rgba(12, 21, 36, 0.08);
    --glow: none; /* light hero is clean paper */
  }
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s6);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Type roles ----
   Teko is instrument data, verdicts, and the tagline. Never body copy,
   never buttons, never section headings. That reservation is what makes
   it read as a scoreboard instead of a theme. */
.num,
.t-hero,
.t-xl,
.t-l,
.t-m {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.t-hero {
  font-weight: 700;
  font-size: clamp(88px, 13vw, 148px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.t-xl {
  font-weight: 700;
  font-size: clamp(48px, 6vw, 64px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.t-l {
  font-weight: 600;
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.005em;
}
.t-m {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
}
.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.092em; /* +1.2 on 13px */
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.lead {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}
.caption {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}
h1,
h2,
h3 {
  font-family: var(--sans);
  margin: 0;
}
.h-section {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 28px);
  line-height: 34px;
  letter-spacing: 0;
}
.h-card {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
}
p {
  margin: 0;
}

/* ---- Surfaces: strokes in dark, shadows in light ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--r3);
  padding: var(--s6);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 15px var(--s6);
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent); /* dark ink on the fill, never white */
}
.btn-primary:hover {
  background: var(--accent-pressed);
  text-decoration: none;
}
.btn-quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-quiet:hover {
  background: var(--surface-alt);
  text-decoration: none;
}

/* ---- Status chips. Green/amber/red mean ready/caution/stop. Nothing else. ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 14px 3px;
  border-radius: var(--pill);
}
.chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-1px);
}
.chip-ready {
  background: var(--ready-soft);
  color: var(--on-ready-soft);
}
.chip-caution {
  background: var(--caution-soft);
  color: var(--on-caution-soft);
}
.chip-stop {
  background: var(--stop-soft);
  color: var(--on-stop-soft);
}

/* ---- Brand mark ---- */
.mark {
  width: 34px;
  height: auto;
  flex: none;
}
.mark .arc {
  fill: var(--mark-arc);
}
.mark .clay {
  fill: var(--mark-clay);
}
.mark .accent {
  fill: #1263e8;
}
.mark .rubber {
  fill: #f5f7fa;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s3) var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand:hover {
  text-decoration: none;
}
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s6);
}
/* :not(.btn) matters. Unscoped, `.nav-links a` (0-1-1) outranks `.btn-primary`
   (0-1-0) and repaints the nav button's ink muted grey on the accent fill —
   1.30:1, against the same button's 6.85:1 in the hero. */
.nav-links a:not(.btn) {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
}
.nav-links a:not(.btn):hover {
  color: var(--text);
  text-decoration: none;
}
.nav .btn {
  padding: 10px var(--s5);
  font-size: 15px;
}
@media (max-width: 780px) {
  .nav-links {
    gap: var(--s4);
  }
  .nav-links .nav-hide {
    display: none;
  }
}
/* Below this the bar is brand + one action, both on a single line. */
@media (max-width: 560px) {
  .nav-inner {
    padding: 10px var(--s5);
    gap: var(--s3);
  }
  .brand {
    gap: var(--s2);
    font-size: 16px;
    white-space: nowrap;
  }
  .brand .mark {
    width: 28px;
  }
  .nav-links a:not(.btn) {
    display: none;
  }
  .nav .btn {
    padding: 9px var(--s4);
    font-size: 13px;
    white-space: nowrap;
    min-height: 44px; /* touch target — padding alone lands at 33px */
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  border-top: 1px solid var(--hairline);
  background: var(--surface-alt);
  padding: var(--s8) 0;
  margin-top: var(--s8);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s7);
  justify-content: space-between;
  align-items: flex-start;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}
.foot-links a {
  color: var(--text-muted);
  font-size: 15px;
}
.foot-links a:hover {
  color: var(--text);
}
.foot-note {
  margin-top: var(--s6);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
  max-width: 60ch;
}

/* ============================================================
   LONG-FORM PAGES (privacy / terms / support)
   ============================================================ */
.doc {
  padding: var(--s8) 0 0;
}
.doc-head {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s6);
  margin-bottom: var(--s7);
}
.doc-body {
  max-width: 72ch;
}
.doc-body h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  margin: var(--s8) 0 var(--s3);
}
.doc-body h2:first-child {
  margin-top: 0;
}
.doc-body p,
.doc-body li {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 26px;
}
.doc-body p + p,
.doc-body ul + p,
.doc-body p + ul {
  margin-top: var(--s4);
}
.doc-body strong {
  color: var(--text);
  font-weight: 700;
}
.doc-body ul {
  margin: var(--s4) 0 0;
  padding-left: var(--s5);
}
.doc-body li + li {
  margin-top: var(--s3);
}
.callout {
  background: var(--accent-soft);
  border-radius: var(--r2);
  padding: var(--s5);
  margin-top: var(--s5);
}
.callout p {
  color: var(--text); /* body on a wash uses text, never the tone colour */
}

/* ============================================================
   HOME — hero
   ============================================================ */
.hero {
  position: relative;
  padding: var(--s8) 0 var(--s8);
  overflow: hidden;
}
/* The one atmospheric move: a single radial accent wash behind the
   instrument. Dark only — --glow is `none` in light. */
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 780px;
  height: 780px;
  max-width: 120vw;
  background: var(--glow);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(380px, 460px);
  gap: var(--s8);
  /* Not `center`: centring a short column against the 914px instrument pushed
     the primary CTA to y=685 on a 720px viewport, i.e. below the fold. */
  align-items: start;
}
.hero h1 {
  margin: var(--s4) 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-sub {
  margin: var(--s5) 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 26px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s7);
}
.hero-meta {
  margin-top: var(--s5);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 20px;
}

/* ---- The instrument panel: the signature ---- */
.panel {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--r4);
  padding: var(--s6);
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
}
.panel-preset {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  text-align: right;
}

/* ---- Preset switcher. League names are prose, so DM Sans — not Teko, and
   never a status colour: the tabs are a control, not a verdict. ---- */
/* Tabs then picker, stacked: association names are long enough that a
   side-by-side select truncates them, and "NYSPHSA…" is worse than nothing on
   a page whose argument is that it names its sources. */
.preset-picker {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}
.preset-state {
  display: block;
}
.preset-state select {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--pill);
  padding: 9px 14px;
  cursor: pointer;
}
.preset-tabs {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--surface-alt);
  border-radius: var(--pill);
}
.preset-tab {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
  padding: 7px 6px;
  border-radius: var(--pill);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.preset-tab:hover {
  color: var(--text);
}
.preset-tab[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--text);
  font-weight: 700;
  /* Depth law again: the ring shows in dark, the shadow shows in light. */
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-border);
}
.panel-band {
  margin-top: var(--s3);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}
/* Shown when the chosen rulebook has more than one chart, or counts rest in
   nights, or sets caps by roster level — so a simplified single chart is never
   presented as the whole rule. */
.panel-note {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--accent-soft);
  border-radius: var(--r1);
  font-size: 12px;
  line-height: 17px;
  color: var(--text);
}
.panel-note[hidden] {
  display: none;
}
.panel-cite {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 18px;
  color: var(--text);
  font-weight: 500;
}
/* A cap that only some rulebooks carry — hidden unless the preset has one. */
.cost .cap[hidden] {
  display: none;
}
.cap-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}

/* ============================================================
   HOME — the rules engine section
   ============================================================ */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* labels share a baseline even though "Custom" isn't a numeral */
  gap: var(--s8);
  margin-top: var(--s7);
  padding: var(--s6) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* "Custom" is the fourth beat, not a number — so it isn't set like one. */
.stat b.word {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.stat span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}
.proofs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  margin-top: var(--s7);
}
.proof {
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--r3);
  padding: var(--s6);
}
.proof .who {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}
.proof h3 {
  margin: var(--s2) 0 var(--s3);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
}
.proof p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 23px;
}
.state-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}
/* These are pills because they are genuinely clickable — each one loads that
   association's chart into the widget. A pill that does nothing is a false
   affordance; if these ever go static, they become plain text. */
.state-chip {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--pill);
  padding: 5px 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.state-chip:hover {
  color: var(--text);
  background: var(--accent-soft);
}
.footnote {
  margin-top: var(--s5);
  max-width: 68ch;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .proofs {
    grid-template-columns: 1fr;
  }
  .stat-row {
    gap: var(--s6) var(--s7);
  }
  .stat b {
    font-size: 44px;
  }
}
.panel-count {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-top: var(--s4);
}
.panel-count .t-hero {
  color: var(--text);
}
.panel-of {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.panel-unit {
  margin-top: 2px;
}
.limit {
  margin-top: var(--s6);
}
.limit-bar {
  position: relative;
  height: 10px;
  border-radius: var(--pill);
  background: var(--track);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
/* The 80% warning threshold the preset carries, marked where it falls. */
.limit-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 80%;
  width: 2px;
  background: var(--bg);
  opacity: 0.9;
}
.limit-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--pill);
  background: var(--ready);
  transition: width 0.2s ease, background 0.2s ease;
}
.limit-fill[data-state="caution"] {
  background: var(--caution);
}
.limit-fill[data-state="stop"] {
  background: var(--stop);
}
.limit-legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s2);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.panel-verdict {
  margin-top: var(--s5);
}
.cost {
  margin: var(--s5) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s3) var(--s4);
  align-items: baseline;
}
.cost dt {
  font-size: 15px;
  color: var(--text-muted);
}
.cost dd {
  margin: 0;
  text-align: right;
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.panel-slider {
  display: block;
  margin-top: var(--s6);
}
.panel-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.panel-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--pill);
  background: var(--track-border);
}
.panel-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--pill);
  background: var(--track-border);
}
.panel-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--surface);
}
.panel-slider input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-fill);
}
.panel-hint {
  margin-top: var(--s2);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}
/* Sits below the card, not inside it — the card's height is what drives the
   hero's vertical rhythm, and the methodology note is the least urgent thing
   in it. It stays directly adjacent so the advisory still rides the chart. */
.panel-advisory {
  margin-top: var(--s3);
  padding: 0 var(--s5);
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }
  .hero::before {
    top: -220px;
    right: -30%;
  }
}
@media (max-width: 560px) {
  .panel {
    padding: var(--s5);
  }
  /* The tabs already say "three rulebooks" — the caption is redundant here. */
  .panel-head .panel-preset {
    display: none;
  }
  .preset-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .preset-tabs::-webkit-scrollbar {
    display: none;
  }
  .preset-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 7px 12px;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
  }
}

/* ============================================================
   HOME — sections
   ============================================================ */
.section {
  padding: var(--s8) 0;
}
.section-head {
  max-width: 62ch;
  margin-bottom: var(--s7);
}
.section-head p {
  margin-top: var(--s3);
  color: var(--text-muted);
}

/* The loop is a real sequence — count, consequence, record — so the
   rail encodes order. Anywhere else, numbering would be decoration. */
.loop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  counter-reset: beat;
}
.beat {
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--r3);
  padding: var(--s6);
}
.beat .step {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text-muted);
}
.beat .step::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--hairline);
}
.beat h3 {
  margin: var(--s4) 0 var(--s2);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
}
.beat p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 23px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.grid .card h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: var(--s2);
}
.grid .card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 23px;
}
@media (max-width: 860px) {
  .loop,
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Honesty: the trust section. Deliberately no status colour —
   green/amber/red are reserved for ready/caution/stop. ---- */
.honesty {
  background: var(--surface-alt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.honesty-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s8);
  align-items: center;
}
.pull {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 29px;
  border-left: 3px solid var(--accent-fill);
  padding-left: var(--s5);
  color: var(--text);
}
.pull cite {
  display: block;
  margin-top: var(--s3);
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
}
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ledger li {
  padding: var(--s5) 0;
  border-top: 1px solid var(--hairline);
}
.ledger li:first-child {
  border-top: 0;
  padding-top: 0;
}
.ledger b {
  display: block;
  font-size: 17px;
  line-height: 24px;
  margin-bottom: var(--s1);
}
.ledger span {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 23px;
}
@media (max-width: 860px) {
  .honesty-grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
@media (max-width: 720px) {
  .two {
    grid-template-columns: 1fr;
  }
}

.closer {
  text-align: center;
  padding: var(--s8) 0;
}
.closer h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: var(--s5);
}
.closer .hero-cta {
  justify-content: center;
}

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