/* ============================================================================
   THE LEDGER — student site theme
   ----------------------------------------------------------------------------
   A price board, not a landing page. Dark ground, hairline rules, oversized
   tabular numerals. Three rules the whole file obeys:

     red  (--red)    action only  — button fills, never body text on dark
     volt (--volt)   live data only — speed bars, availability, the split number
     ink/dim         everything else

   This file is self-contained: it does not depend on styles.css.
   ============================================================================ */

:root {
  --void:   #08090b;
  --panel:  #101216;
  --panel2: #15181d;
  --rule:   #23262d;
  --rule2:  #2f333c;
  --ink:    #f4f5f7;
  --dim:    #9298a3;  /* 8.6:1 on void */
  --dimmer: #7a808a;  /* 5.0:1 on void — the smallest text on the page uses this */
  /* Tech Ed red, deepened just enough that white text on a small button clears
     4.5:1 (the brand #ed1c24 lands at 4.38). Visually indistinguishable. */
  --red:      #d81219;
  --red-dark: #b00d14;
  --volt:     #c8f04a;
  --band-ink: #14161a;
  --paper:    #f7f7f5;
  --paper-ink:#14161a;

  /* Four steps. Nothing between them. */
  --s1: 24px;
  --s2: 56px;
  --s3: 104px;
  --s4: 168px;

  --rail: min(1240px, 100% - 2 * clamp(20px, 5vw, 96px));
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: "Space Grotesk", Inter, sans-serif; margin: 0; letter-spacing: -.04em; font-weight: 700; }
p { margin: 0; }

.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;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; z-index: 200; left: 16px; top: -70px;
  padding: 14px 20px; border-radius: 10px;
  background: var(--volt); color: #14180a; font-weight: 700;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 16px; }

.rail { width: var(--rail); margin-inline: auto; }

/* --- Type ----------------------------------------------------------------- */

.label {
  margin: 0 0 18px;
  font-size: 11px; font-weight: 800; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dimmer);
}
.label .dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 9px;
  border-radius: 50%; background: var(--volt);
  box-shadow: 0 0 0 4px #c8f04a1f;
}
.label--volt { color: var(--volt); }

.statement { font-size: clamp(38px, 4.4vw, 68px); line-height: .98; }
.statement--lg { font-size: clamp(46px, 6.2vw, 96px); line-height: .9; letter-spacing: -.05em; }

.lede { max-width: 62ch; color: var(--dim); }
.fine { font-size: 15px; color: var(--dimmer); }
/* --dimmer is tuned for the dark ground; the paper sections need a darker grey. */
.store .fine, .request .fine { color: #666b74; }

.num {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -.045em;
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 15px; cursor: pointer; text-align: center;
  transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { background: var(--red); color: #fff; }
.button-primary:hover { background: var(--red-dark); }
.button-volt { background: var(--volt); color: #14180a; }
.button-volt:hover { background: #d5f96a; }
.button-light { background: transparent; color: var(--ink); border: 1px solid var(--rule2); }
.button-light:hover { border-color: var(--dim); background: #ffffff08; }
.button-small { min-height: 44px; padding: 0 18px; font-size: 13px; }
.button-full { width: 100%; }
.button:disabled { opacity: .55; cursor: wait; transform: none; }

.underlink {
  font-weight: 700; font-size: 15px;
  border-bottom: 1px solid var(--rule2); padding-bottom: 4px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.underlink:hover { border-color: var(--volt); color: var(--volt); }

/* --- Header --------------------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: #08090bd9; backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.hdr-in {
  width: var(--rail); margin-inline: auto;
  min-height: 74px; display: flex; align-items: center; gap: 28px;
}
.hdr-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.hdr-brand img { width: 96px; height: 41px; object-fit: contain; }
.hdr-brand span {
  padding-left: 12px; border-left: 1px solid var(--rule2);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
}
.hdr-nav { display: flex; gap: 30px; font-size: 15px; font-weight: 600; }
.hdr-nav a { position: relative; padding: 6px 0; color: var(--dim); transition: color .18s var(--ease); }
.hdr-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--volt); transition: right .22s var(--ease);
}
.hdr-nav a:hover, .hdr-nav a[aria-current="page"] { color: var(--ink); }
.hdr-nav a:hover::after, .hdr-nav a[aria-current="page"]::after { right: 0; }
/* Leaving the student section is a different kind of move than moving within it,
   so it sits after a divider rather than reading as a fourth peer tab. */
.hdr-nav-back {
  margin-left: 6px; padding-left: 24px;
  border-left: 1px solid var(--rule2);
}
.hdr-nav-back::after { display: none; }
.hdr-nav-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

.hdr-call { display: flex; align-items: center; gap: 14px; }

.menu-toggle {
  display: none; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 14px;
  background: transparent; border: 1px solid var(--rule2); border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.menu-toggle .bars { display: grid; gap: 4px; width: 15px; }
.menu-toggle .bars i { height: 2px; background: currentColor; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  display: none; border-top: 1px solid var(--rule); background: var(--panel);
}
.menu-panel[data-open="true"] { display: block; }
.menu-panel ul { list-style: none; margin: 0; padding: 8px 0; width: var(--rail); margin-inline: auto; }
.menu-panel a {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--rule);
  font-size: 18px; font-weight: 600;
}
.menu-panel li:last-child a { border-bottom: 0; }

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: var(--s3) 0 var(--s2); border-bottom: 1px solid var(--rule); }
.hero-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--volt); }
.hero .lede { margin-top: var(--s1); }

/* The hero's first interactive element is the qualifying question, not a button. */
.check { margin-top: var(--s2); }
.check-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.check-row { display: flex; gap: 10px; flex-wrap: wrap; }
.check-row input {
  flex: 1 1 260px; min-height: 58px; padding: 0 20px;
  background: var(--panel); border: 1px solid var(--rule2); border-radius: 999px;
  font-size: 16px;
  transition: border-color .18s var(--ease);
}
.check-row input::placeholder { color: var(--dimmer); }
.check-row input:hover { border-color: var(--dim); }

.check-out {
  display: none; margin-top: 18px; padding: 18px 20px;
  border: 1px solid var(--rule); border-left: 3px solid var(--volt); border-radius: 4px;
  background: var(--panel); font-size: 15px; line-height: 1.55;
}
.check-out[data-state] { display: block; }
.check-out[data-state="checking"] { border-left-color: var(--rule2); color: var(--dim); }
.check-out[data-state="error"] { border-left-color: var(--red); }
.check-out strong { color: var(--volt); }
.check-out .then { display: block; margin-top: 6px; color: var(--dim); }

/* Price board — the LCP element. Text, never an image. */
.board {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--rule); border-radius: 6px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  position: relative;
}
.board::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--volt);
}
.board-chip {
  display: inline-block; margin-bottom: 22px; padding: 5px 12px;
  border: 1px solid var(--rule2); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.board-label {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.board-price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; }
.board-num {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: clamp(80px, 11vw, 150px); line-height: .78; letter-spacing: -.055em;
}
.board-per { font-size: 20px; font-weight: 600; color: var(--dim); }
.board-lock { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--dim); }
.board-split { margin-top: 12px; font-size: 15px; color: var(--dim); }
.board-split strong { color: var(--volt); font-family: "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }

/* --- Split bar — the signature moment ------------------------------------- */

.split {
  padding: var(--s3) 0;
  background: var(--volt); color: var(--band-ink);
  border-bottom: 1px solid var(--rule);
}
.split-in { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: center; }
.split-eq {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -.05em;
  font-size: clamp(38px, 6vw, 86px); line-height: 1;
}
/* .label defaults to --dimmer, tuned for the dark ground; on the bright band it
   has to invert or it lands near 1.2:1. */
.split .label,
.split-eq .op { color: var(--band-ink); opacity: .78; }
.split-eq .each {
  font-size: clamp(64px, 12vw, 168px); line-height: .82;
  padding: 0 2px;
}
/* Keeps the caption tied to the per-person figure when the equation wraps. */
.split-eq .each-group { display: inline-grid; }
.split-eq .unit { font-family: Inter, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0; margin-top: 4px; }
.split-note { margin-top: var(--s1); max-width: 46ch; font-size: 16px; color: var(--band-ink); opacity: .82; }
.split-note a { border-bottom: 1px solid currentColor; }

.stepper { display: grid; gap: 12px; justify-items: center; }
.stepper-label {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--band-ink); opacity: .82;
}
.stepper-row {
  display: flex; align-items: center; gap: 4px;
  border: 2px solid #14161a; border-radius: 999px; padding: 4px;
  background: #ffffff5c;
}
.stepper-row button {
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: transparent; color: #14161a;
  font-size: 24px; line-height: 1; cursor: pointer;
  transition: background .15s var(--ease);
}
.stepper-row button:hover:not(:disabled) { background: #14161a17; }
.stepper-row button:disabled { opacity: .3; cursor: default; }
.stepper-row output {
  min-width: 52px; text-align: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 30px;
  font-variant-numeric: tabular-nums;
}

/* --- Sections ------------------------------------------------------------- */

.sec { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.sec-head { max-width: 34ch; margin-bottom: var(--s2); }
.sec-head .lede { margin-top: var(--s1); }
.sec-head--wide { max-width: 52ch; }

/* --- The ledger ----------------------------------------------------------- */

.ledger-scroll { overflow-x: auto; margin-inline: calc(-1 * clamp(12px, 2vw, 20px)); padding-inline: clamp(12px, 2vw, 20px); }
.ledger { width: 100%; border-collapse: collapse; text-align: left; min-width: 900px; }
.ledger thead th {
  padding: 0 16px 14px; border-bottom: 1px solid var(--rule2);
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer);
  vertical-align: bottom;
}
.ledger-row { border-bottom: 1px solid var(--rule); transition: background .2s var(--ease); }
.ledger-row > * { padding: 34px 16px; vertical-align: top; position: relative; }
.ledger-row:hover { background: #ffffff05; }
.ledger-row::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--volt); transform: scaleY(0); transform-origin: top;
  transition: transform .22s var(--ease);
}
.ledger-row { position: relative; }
.ledger-row:hover::after, .ledger-row:focus-within::after { transform: scaleY(1); }
.ledger-row.is-featured { background: #ffffff07; }
.ledger-row.is-alternate > * { padding-block: 26px; }
.ledger-row.is-alternate .ledger-speed { font-size: 22px; color: var(--dim); }

.ledger-plan { width: 200px; }
.ledger-speed {
  display: block; font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 30px; letter-spacing: -.03em; color: var(--ink);
}
.ledger-flag {
  display: inline-block; margin-top: 10px; padding: 4px 10px;
  border-radius: 999px; background: var(--volt); color: #14180a;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.speed-bars { display: flex; gap: 3px; margin-top: 12px; }
.speed-bars .bar { width: 16px; height: 5px; border-radius: 1px; background: var(--rule2); }
.speed-bars .bar.on { background: var(--volt); }

.ledger-price, .ledger-split { white-space: nowrap; }
.ledger-price .num { font-size: 44px; line-height: 1; }
.ledger-price .num.small { font-size: 26px; }
.ledger-split .num { font-size: 34px; line-height: 1; color: var(--volt); }
.ledger-price .per, .ledger-split .per { display: block; margin-top: 6px; font-size: 13px; color: var(--dimmer); }
.ledger-lock { width: 140px; font-size: 14px; color: var(--dim); }
.ledger-includes { max-width: 380px; }
.ledger-blurb { color: var(--dim); font-size: 15px; }
.ledger-includes ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ledger-includes li { font-size: 14px; color: var(--dim); padding-left: 20px; position: relative; }
.ledger-includes li::before { content: "+"; position: absolute; left: 0; color: var(--volt); font-weight: 700; }
.ledger-act { width: 200px; }
.ledger-act .button { white-space: nowrap; }

/* --- Student offer -------------------------------------------------------- */

.offer {
  display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap;
  margin-top: var(--s2); padding: clamp(24px, 3vw, 36px);
  border: 1px dashed var(--rule2); border-radius: 6px;
}
.offer-num {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.05em;
  font-size: clamp(48px, 6vw, 76px); line-height: .85; color: var(--volt);
}
.offer-copy { max-width: 46ch; }
.offer-copy strong { display: block; font-size: 19px; margin-bottom: 6px; }
.offer-copy p { color: var(--dim); font-size: 15px; }

/* --- StreamSaver ---------------------------------------------------------- */

.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list li {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--s1); align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.ss-list li:last-child { border-bottom: 1px solid var(--rule); }
.ss-price {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 38px;
  font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -.045em;
}
.ss-price em { font-style: normal; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; color: var(--dimmer); letter-spacing: 0; }
.ss-services { color: var(--dim); font-size: 16px; }

/* --- Timeline ------------------------------------------------------------- */

.timeline-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.date-field { margin-top: var(--s1); }
.date-field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.date-field input {
  width: 100%; max-width: 320px; min-height: 56px; padding: 0 18px;
  background: var(--panel); border: 1px solid var(--rule2); border-radius: 6px;
  font-size: 16px;
}
.date-field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; cursor: pointer; }

.stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.stops li {
  counter-increment: stop;
  display: grid; grid-template-columns: 72px 1fr; gap: var(--s1);
  padding: 30px 0; border-top: 1px solid var(--rule);
}
.stops li:last-child { border-bottom: 1px solid var(--rule); }
.stops li::before {
  content: counter(stop, decimal-leading-zero);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--volt); padding-top: 4px;
}
.stops h3 { font-size: 23px; margin-bottom: 8px; }
.stops p { color: var(--dim); font-size: 15px; }
.stop-when {
  display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--rule2);
  font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stop-when:empty { display: none; }

/* --- Storefront ----------------------------------------------------------- */

.store { background: var(--paper); color: var(--paper-ink); border-bottom: 0; }
.store h2, .store h3 { color: var(--paper-ink); }
.store .label { color: #5c6068; }
.store .lede { color: #4b5058; }
.store-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.store-photo { border-radius: 6px; overflow: hidden; }
.store-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.store-facts { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 0; }
.store-facts li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid #d8d8d3; font-size: 15px; }
.store-facts li:last-child { border-bottom: 1px solid #d8d8d3; }
.store-facts dt, .store-facts .k {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #6b6f77; padding-top: 3px;
}
.store-note {
  display: block; margin-top: 8px; padding-left: 12px;
  border-left: 2px solid var(--red);
  font-style: normal; font-size: 13.5px; font-weight: 600; color: #4b5058;
}
.store-facts a { border-bottom: 1px solid #b9bcc2; font-weight: 600; }
.store-facts a:hover { border-color: var(--red); color: var(--red); }

.map { width: 100%; height: auto; border-radius: 6px; background: #ececE6; }
.map-note { margin-top: 14px; font-size: 14px; color: #5c6068; }

/* --- Answers (details/summary) -------------------------------------------- */

.answers { list-style: none; margin: 0; padding: 0; }
.answers details { border-top: 1px solid var(--rule); }
.answers details:last-of-type { border-bottom: 1px solid var(--rule); }
.answers summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s1);
  padding: 28px 0; cursor: pointer; list-style: none;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(19px, 2vw, 25px); letter-spacing: -.025em;
  transition: color .18s var(--ease);
}
.answers summary::-webkit-details-marker { display: none; }
.answers summary:hover { color: var(--volt); }
.answers summary::after {
  content: ""; flex: none; width: 13px; height: 13px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .22s var(--ease);
}
.answers details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.answers details > div { padding: 0 0 30px; max-width: 68ch; color: var(--dim); }
.answers details > div p + p { margin-top: 14px; }
.answers a:not(.button) { color: var(--volt); border-bottom: 1px solid #c8f04a4d; }

.faq-group { margin-bottom: var(--s3); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: var(--s1); }

/* --- Request form --------------------------------------------------------- */

.request { background: var(--paper); color: var(--paper-ink); }
.request h2, .request h3 { color: var(--paper-ink); }
.request .label { color: #5c6068; }
.request .lede { color: #4b5058; }
.request-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.request-aside { position: sticky; top: 100px; }
.request-why { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 14px; }
.request-why li { padding-left: 26px; position: relative; font-size: 15px; color: #4b5058; }
.request-why li::before { content: "→"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

.form { display: grid; gap: 20px; }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-size: 13px; font-weight: 700; color: #3d424a; }
.form label .opt { font-weight: 500; color: #666b74; }
.form input, .form select, .form textarea {
  width: 100%; margin-top: 8px; min-height: 52px; padding: 14px 16px;
  background: #fff; color: var(--paper-ink);
  border: 1px solid #cfd0cb; border-radius: 6px;
  transition: border-color .18s var(--ease);
}
.form textarea { min-height: 96px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #a9aba5; }
.form input[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: var(--red); }
.field-error { display: block; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--red-dark); }
.field-error:empty { display: none; }

.form .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 500; line-height: 1.5; color: #4b5058; }
.form .consent input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--red); }
.form-status { min-height: 22px; font-size: 15px; line-height: 1.5; color: #4b5058; }
.form-status.is-ok { color: #1a6b3c; font-weight: 600; }
.form-status.is-bad { color: var(--red-dark); font-weight: 600; }

.receipt {
  padding: 26px; border: 1px solid #cfd0cb; border-left: 3px solid #1a6b3c;
  border-radius: 6px; background: #fff;
}
.receipt h3 { font-size: 24px; margin-bottom: 10px; }
.receipt .ref {
  display: inline-block; margin: 4px 0 16px; padding: 6px 12px; border-radius: 4px;
  background: #eef2ea; font-family: "Space Grotesk", sans-serif; font-weight: 700;
  letter-spacing: .04em;
}
.receipt ol { margin: 0; padding-left: 20px; color: #4b5058; font-size: 15px; display: grid; gap: 8px; }

/* --- Disclosure + footer -------------------------------------------------- */

.disclosure-block {
  margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid var(--rule);
  font-size: 12.5px; line-height: 1.65; color: var(--dimmer); max-width: 92ch;
}
.store .disclosure-block, .request .disclosure-block { border-top-color: #d8d8d3; color: #6b6f77; }
.disclosure-stamp {
  display: inline-block; margin-right: 10px; padding: 3px 9px; border-radius: 3px;
  border: 1px solid currentColor;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--volt); vertical-align: 1px;
}
.store .disclosure-stamp, .request .disclosure-stamp { color: #4a5f10; }

.ftr { padding: var(--s3) 0 var(--s2); }
.ftr-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s2); }
.ftr-brand img { width: 140px; }
.ftr-brand p { margin-top: 18px; font-size: 14px; color: var(--dim); max-width: 34ch; }
.ftr h2 { font-family: Inter, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
/* Padding rather than gap, so each link clears the 24px minimum target size. */
.ftr ul a { display: inline-block; padding: 4px 0; color: var(--dim); transition: color .18s var(--ease); }
.ftr ul a:hover { color: var(--volt); }
.ftr address { font-style: normal; font-size: 15px; color: var(--dim); line-height: 1.7; }
.ftr-legal {
  margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid var(--rule);
  font-size: 12.5px; line-height: 1.65; color: var(--dimmer); max-width: 92ch;
}

/* --- Mobile action bar ---------------------------------------------------- */

.actionbar {
  display: none; position: fixed; z-index: 95; left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  background: #08090bf2; backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
}
.actionbar .button { flex: 1; }

/* --- Motion --------------------------------------------------------------- */

/* Content is visible by default. students.js adds .motion to <html> only once it
   has an observer running, so a failed script, a background tab, or no JS at all
   can never leave a section invisible. */
.motion .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.motion .rise.seen { opacity: 1; transform: none; }
.d1 { --d: 90ms; } .d2 { --d: 180ms; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-grid, .timeline-grid, .store-grid, .request-grid { grid-template-columns: 1fr; }
  .request-aside { position: static; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .split-in { grid-template-columns: 1fr; gap: var(--s1); }
  .stepper { justify-items: start; }
}

@media (max-width: 860px) {
  .hdr-nav, .hdr-call .underlink { display: none; }
  .menu-toggle { display: inline-flex; }
  :root { --s3: 80px; --s4: 104px; --s2: 44px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hdr-brand span { display: none; }
  .hdr-in { min-height: 64px; gap: 12px; }
  /* The persistent bottom bar owns the CTA here, so the header keeps only the menu. */
  .hdr-call .button { display: none; }
  .actionbar { display: flex; }
  main { padding-bottom: 84px; }
  .hero { padding-top: var(--s2); }
  .board { padding: 24px 20px; }
  .board-num { font-size: clamp(64px, 22vw, 104px); }
  .split-eq { font-size: clamp(28px, 9vw, 44px); }
  .split-eq .each { font-size: clamp(56px, 24vw, 104px); }
  .form .pair { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; gap: var(--s1); }
  .stops li { grid-template-columns: 44px 1fr; gap: 14px; }
  .store-facts li { grid-template-columns: 1fr; gap: 6px; }
}

@media (min-width: 1600px) {
  :root { --rail: min(1480px, 100% - 2 * 96px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
  .button:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   School themes. Only the token values change — every rule below keeps working,
   and the roles stay fixed: --volt is live data, --red is action.

   Button ink flips dark on orange and green: white on those is 3.6:1 and 3.4:1,
   under the 4.5 minimum. Red is not bright enough to carry dark ink, so the
   default (no school) keeps white-on-red and a dark split band.
   --------------------------------------------------------------------------- */
:root[data-school="uiuc"] {
  --band-ink:#08101f;
  --void:#0a1428; --panel:#122040; --panel2:#16274c; --rule:#22345c; --rule2:#2d4272;
  --dim:#a8b8d2; --dimmer:#8ea2c2;
  --volt:#ff6a13; --red:#ff6a13; --red-dark:#e35a08; --action-ink:#0a1428;
}
:root[data-school="parkland"] {
  --band-ink:#050a04;
  --void:#080d09; --panel:#101710; --panel2:#141d14; --rule:#202c20; --rule2:#2b3a2b;
  --dim:#a6b6a4; --dimmer:#8b9c89;
  --volt:#5bc236; --red:#5bc236; --red-dark:#4aa82b; --action-ink:#0b140a;
}
:root[data-school] .button-primary { color: var(--action-ink, #fff); }
:root[data-school] .button-volt { color: var(--action-ink, #14180a); }

html { transition: background-color .4s var(--ease); }
body, .hdr, .board, .split, .sec, .ftr { transition: background-color .4s var(--ease), border-color .4s var(--ease); }

/* The chooser. A slim bar, never a modal — the hero's address field is the
   conversion moment and nothing should sit in front of it. */
.school-bar { border-bottom:1px solid var(--rule); background:var(--panel); }
.school-in { width:var(--rail); margin-inline:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; }
.school-in p { margin:0; font-size:14px; font-weight:600; color:var(--dim); }
.school-opts { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.school-opts button {
  min-height:38px; padding:0 15px; border-radius:999px; border:1px solid var(--rule2);
  background:transparent; color:var(--ink); font:700 13px Inter,sans-serif; cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.school-opts button:hover { border-color:var(--volt); color:var(--volt); }
.school-opts button[aria-pressed="true"] { background:var(--volt); border-color:var(--volt); color:var(--action-ink,#14180a); }
.school-dismiss { background:none; border:0; color:var(--dimmer); font-size:13px; cursor:pointer; text-decoration:underline; padding:8px; }
@media (max-width:620px) {
  .school-in { gap:10px; padding:10px 0; }
  .school-in p { flex-basis:100%; font-size:13px; }
  .school-opts { margin-left:0; }
}