/* The plan chooser (/subscribe). Needs tokens.css, base.css, components.css, header.css and public.css. Mobile first.
   Three parts: the family (grade per student, monthly or annual), the quote (one line per school, the family discount, the total,
   the trial and the enrollment charge), the three schools with their features; then the door to /signup and the small print. */
.chooser { display: grid; gap: var(--s-5); margin-bottom: var(--block); }
@media (min-width: 900px) { .chooser { grid-template-columns: 5fr 6fr; gap: var(--s-7); align-items: start; } }
.panel { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-3); padding: 7px; }
.panel-inner { border: 1px solid var(--line); border-radius: 1px; padding: clamp(18px, 3vw, 32px); }
.panel h2 { font-family: var(--font-display); font-size: var(--fs-0); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin: 0 0 var(--s-4); }
.panel .hint { font-family: var(--font-text); font-style: italic; font-size: var(--fs-1); color: var(--muted); margin: 0 0 var(--s-4); max-width: none; }

/* Students: one row each, a grade select and a remove button. Fields never under 16 px, targets never under 44 px. */
.students { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.student-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2); align-items: center; }
.student-row .n { font-family: var(--font-display); font-size: var(--fs-0); letter-spacing: .12em; color: var(--gold-text); min-width: 2.6em; }
.student-row select { width: 100%; min-width: 0; }
.student-row .remove { min-width: 44px; padding: 10px 12px; font-size: var(--fs-0); }
.student-row .remove:disabled { visibility: hidden; }
.students-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-5); }
.students-foot .count { font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: .06em; color: var(--muted); }

/* Period: a two-stop segmented control. */
.seg { display: inline-flex; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }
.seg button { flex: 1 1 50%; flex-direction: column; gap: 2px; min-height: 56px; padding: 6px 12px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: .06em; font-size: var(--fs-2); }
.seg button:first-child { border-left: 0; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--parchment); }
:root[data-theme="dark"] .seg button[aria-checked="true"] { background: var(--parchment); color: var(--ink); }
.seg small { display: block; font-family: var(--font-ui); font-variant-caps: normal; letter-spacing: 0; font-size: var(--fs-0); opacity: .8; }

/* The quote: a ledger. */
.quote-lines { list-style: none; padding: 0; margin: 0 0 var(--s-4); border-top: 1px solid var(--line-strong); }
.quote-lines li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; font-family: var(--font-text); font-variant-numeric: lining-nums tabular-nums; }
.quote-lines li .l { color: var(--text); }
.quote-lines li .d { display: block; font-family: var(--font-ui); font-size: var(--fs-0); color: var(--muted); }
.quote-lines li .r { white-space: nowrap; color: var(--text); }
.quote-lines li.discount .r, .quote-lines li.discount .l { color: var(--ok); }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.quote-total .t { font-family: var(--font-display); font-size: var(--fs-0); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.quote-total .amount { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--text); font-variant-numeric: lining-nums; }
.quote-total .amount small { font-family: var(--font-text); font-style: italic; font-size: var(--fs-2); color: var(--muted); margin-left: 6px; }
.quote-note { font-family: var(--font-text); font-size: var(--fs-1); color: var(--text-soft); margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: none; }
.quote-note b { color: var(--text); font-weight: 600; }
.quote-cta { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.quote-cta .btn { width: 100%; min-height: 54px; }
.quote-cta .btn-ink { background: var(--ink); color: var(--parchment); border-color: var(--ink); font-family: var(--font-display); letter-spacing: .16em; text-transform: uppercase; font-size: var(--fs-0); font-weight: 600; }
.quote-cta .btn-ink:hover { background: var(--gold-text); border-color: var(--gold-text); }
:root[data-theme="dark"] .quote-cta .btn-ink { background: var(--parchment); color: var(--ink); border-color: var(--parchment); }
.quote-cta .fine { font-family: var(--font-ui); font-size: var(--fs-0); color: var(--muted); text-align: center; margin: 0; max-width: none; }
.quote-cta .fine a { color: inherit; }

/* The three schools. */
.schools-head { width: min(100%, var(--narrow)); margin: 0 auto var(--s-6); text-align: center; }
.schools-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 var(--s-3); }
.schools-head p { margin: 0 auto; }
.plans { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; margin-bottom: var(--block); }
.plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-6) var(--s-5) var(--s-5); text-align: center; }
.plan.highlight { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--line); }
.plan.draft::after { content: 'Draft'; position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.plan h3 { font-family: var(--font-display); font-size: var(--fs-1); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); margin: 0 0 var(--s-2); }
.plan .tagline { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-3); color: var(--text); margin: 0 0 var(--s-4); }
.plan .price { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--text); margin: 0; font-variant-numeric: lining-nums; }
.plan .period { font-family: var(--font-text); font-style: italic; font-size: var(--fs-1); color: var(--muted); margin: 6px 0 var(--s-4); }
.plan .avail { align-self: center; font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: .1em; font-size: var(--fs-1); color: var(--gold-text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; margin: 0 0 var(--s-5); min-width: 120px; }
.plan ul { list-style: none; padding: 0; margin: 0; flex: 1; text-align: left; }
.plan li { position: relative; padding-left: 20px; margin: 8px 0; font-family: var(--font-text); font-size: var(--fs-1); color: var(--text-soft); }
.plan li::before { content: ''; position: absolute; left: 2px; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.plan .pick { margin-top: var(--s-5); width: 100%; }

/* How it works: headed entries on hairlines. */
.how { display: grid; gap: var(--s-5) var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: var(--block); }
.how .entry { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.how h3 { font-family: var(--font-text); font-variant-caps: small-caps; letter-spacing: .08em; font-weight: 600; font-size: var(--fs-3); margin: 0 0 var(--s-2); }
.how p { font-family: var(--font-text); color: var(--text-soft); margin: 0; max-width: none; }
.how p a { color: inherit; }
.fallback { font-family: var(--font-ui); font-size: var(--fs-1); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .plan, .seg button { transition: none; } }