/* calculator.css — /college-chances-calculator only (CR-027, CR-030,
   CR-031). Split out of marketing.css, which had crossed CLAUDE.md
   S1's 400-line cap; linked from that page's extra_head the same way
   auth.css is linked from the sign-in pages. Depends on tokens.css,
   base.css and components.css being loaded first (base.html does). */

/* ---------------------------------------------------------------
   Anonymous band preview on /college-chances-calculator (CR-027,
   layout rebuilt CR-030). Own classes throughout: an earlier version
   reused .split, whose align-items:center and 56px gap are tuned for
   an image beside a paragraph, and a generic `.preview-form > div`
   rule then overrode its grid with a column flex — so the two-field
   rows collapsed into a centred stack. Field styling still mirrors
   .intake-field (intake.css) so the preview and the intake it leads
   into read as one product.
   --------------------------------------------------------------- */
.preview-form {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}
.preview-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
}
.preview-form__row + .preview-form__row,
.preview-form__row + .preview-form__field,
.preview-form__field + .preview-form__row { margin-top: var(--space-3); }
.preview-form__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.preview-form__field--wide { max-width: 420px; }
.preview-form label { font-size: var(--text-small); font-weight: 600; color: var(--ink); }
.preview-form input,
.preview-form select {
  font-family: var(--font-sans); font-size: var(--text-body-lg);
  padding: 13px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  width: 100%;
}
.preview-form input:focus,
.preview-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.preview-form .btn { margin-top: var(--space-2); }
.preview-form .auth-errors { margin-bottom: var(--space-3); }
@media (max-width: 560px) {
  .preview-form { padding: var(--space-4); }
  .preview-form__row { grid-template-columns: 1fr; }
}
.u-muted { color: var(--ink-soft); font-size: var(--text-small); }

.preview-results { margin: var(--space-5) 0; }
/* The table is the one element allowed to scroll sideways on a narrow
   screen rather than reflow — five columns of figures stay comparable
   that way, where stacked cards would lose the comparison. */
.preview-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; display: block; overflow-x: auto; }
.preview-table th, .preview-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top; font-size: var(--text-small);
}
.preview-table thead th {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px solid var(--border-strong); white-space: nowrap;
}
.preview-table tbody th { font-weight: 600; }

/* ===============================================================
   /college-chances-calculator paid-landing layout (CR-031).
   First screen: the homepage's own .hero-band (navy, accent rule),
   headline + four-field form on the left, a real sample panel on the
   right. Phone: form first, sample second. All colours are tokens the
   rest of the site already uses; band badges are components.css's own
   .badge--reach/target/likely so a band looks the same here as on the
   report a visitor later pays for.
   =============================================================== */
.calc-hero__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 26px 40px 44px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 40px; align-items: start;
}
.calc-hero__pill {
  display: inline-flex; border: 1px solid rgb(6 182 212 / .5); background: rgb(6 182 212 / .18);
  color: var(--accent-border); font-family: var(--font-sans); font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px;
}
/* Sized so the headline is two lines on a laptop, not three: on a
   1366x768 screen every line here pushes the form's first field
   further under the fold, and the fold is the whole point of the page. */
.calc-hero h1 { color: var(--on-ink); font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.1; margin-top: 12px; }
.calc-hero__lead { font-size: 1rem; line-height: 1.5; color: var(--on-ink-muted); max-width: 42em; margin: 12px 0 0; }
.calc-hero__lead strong { color: var(--on-ink); }
.calc-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.calc-hero__chip-note { font-size: 12px; font-weight: 600; color: var(--on-ink-faint); }

.calc-form {
  background: var(--surface); color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel); padding: 20px 22px 18px; margin-top: 20px;
}
.calc-form__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.calc-form h2 { font-size: 18px; }
.calc-form__sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.calc-form__ticks { display: flex; gap: 6px; }
.calc-form__ticks span { width: 28px; height: 8px; border-radius: 99px; background: var(--border-strong); transition: background .15s; }
.calc-form__ticks span.is-on { background: var(--likely); }
.calc-form .auth-errors { margin-top: 16px; }
.calc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; align-items: start; }
.calc-form__field--wide { grid-column: 1 / -1; }
.calc-form label { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.calc-form label span { font-weight: 500; color: var(--ink-soft); }
.calc-form input, .calc-form select {
  width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 12px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; background: var(--surface); color: var(--ink);
}
.calc-form input:focus, .calc-form select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.calc-form__hint { font-size: 14px; color: var(--ink-soft); align-self: end; padding-bottom: 12px; margin: 0; }
.calc-form__money { position: relative; }
.calc-form__money-sign { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-weight: 600; pointer-events: none; }
.calc-form__money input { padding-left: 26px; }
.calc-form__submit { width: 100%; height: 46px; margin-top: 14px; font-size: 16px; }
.calc-form__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-muted); }
.calc-form__checks li::before { content: "\2713"; color: var(--likely); margin-right: 8px; font-weight: 700; }

.calc-panel { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); overflow: hidden; }
.calc-panel__head { background: var(--bg); border-bottom: 1px solid var(--border); padding: 14px 20px; }
.calc-panel__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.calc-panel__profile { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.calc-panel__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.calc-panel__row:last-of-type { border-bottom: 0; }
.calc-panel__row h3 { font-size: 14px; display: inline; margin-right: 6px; }
.calc-panel__meta { font-size: 12px; color: var(--ink-soft); margin: 2px 0 0; }
.calc-panel__why { font-size: 12px; color: var(--ink-muted); margin: 4px 0 0; line-height: 1.4; }
.calc-panel__price { font-family: var(--font-sans); font-weight: 800; font-size: 14px; text-align: right; white-space: nowrap; }
.calc-panel__price small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.calc-panel__foot { background: var(--bg); padding: 12px 20px; font-size: 12px; color: var(--ink-muted); }
/* CR-101: the Full Report / Essay Coach pair at the foot of the sample
   panel - same card, below the muted source note, set apart with a
   divider so it reads as the next step rather than more example data. */
.calc-panel__cta { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--border); }
.calc-panel__cta .btn--block { flex: 1 1 140px; }

.calc-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.calc-steps { list-style: none; padding: 0; margin: 0; }
.calc-plain { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.calc-plain h2, .calc-plain h3 { font-size: 16px; }
.calc-plain h3 { margin-top: 8px; font-size: 18px; }
.calc-plain p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.calc-step-k { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); }
.calc-below__h2 { margin: 56px 0 20px; font-size: 28px; }
.calc-cta { margin-top: 56px; background: var(--brand); color: var(--on-ink); border-radius: 12px; padding: 32px; display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; }
.calc-cta h2 { color: var(--on-ink); font-size: 28px; }
.calc-cta p { margin: 8px 0 0; color: var(--on-ink-muted); max-width: 36em; font-size: 14px; }
.calc-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.calc-cta__ghost { background: transparent; color: var(--on-ink); border: 1px solid var(--on-ink-faint); }
.calc-cta__ghost:hover { background: var(--brand-soft); color: var(--on-ink); }
.calc-below + .u-muted { margin-top: 16px; }
.calc-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 12px; z-index: 30; }

@media (max-width: 900px) {
  .calc-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 40px; }
  .calc-form { margin-top: 24px; padding: 20px; }
  .calc-form__grid, .calc-form__checks, .calc-three { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .calc-form__ticks span { transition: none; } }

/* Results hand-off (CR-032): what to do about the six colleges just
   shown. Three rungs, one button. The button is the one step the paid
   campaign now turns on, so it gets the primary colour and nothing
   competes with it. */
.calc-next { margin-top: var(--space-5); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.calc-next h2 { font-size: 24px; margin-bottom: var(--space-2); }
.calc-next__steps { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.calc-next__steps li { border-left: 3px solid var(--accent-strong); padding-left: 14px; }
.calc-next__steps p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.calc-next .btn { height: 48px; font-size: 16px; padding: 0 24px; }
.calc-next .u-muted { margin-top: 10px; }
@media (max-width: 760px) { .calc-next__steps { grid-template-columns: 1fr; } .calc-next .btn { width: 100%; } }

/* C4 summary tiles (CR-038): verdict-first row above the results table.
   Band colour as 4 px left border; big number, small label. No
   percentages, no probabilities (CLAUDE.md S6). */
.calc-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.calc-summary__tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.calc-summary__tile--likely  { border-left: 4px solid var(--likely); }
.calc-summary__tile--target  { border-left: 4px solid var(--target); }
.calc-summary__tile--reach   { border-left: 4px solid var(--reach); }
.calc-summary__tile--budget  { border-left: 4px solid var(--accent); }
.calc-summary__num   { font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink); }
.calc-summary__label { font-size: 13px; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) { .calc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Early keep-my-list prompt (CR-044): directly under the summary tiles,
   where the value lands. Same green as the hand-off card so the two
   asks read as one decision, not two offers. */
.calc-keep { background: var(--likely-bg); border: 1px solid var(--likely-border); border-radius: var(--radius-lg); padding: 16px 20px; margin: 0 0 var(--space-4); }
.calc-keep__text { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 52em; }

/* CR-048: the registration form itself, inline in the keep prompt and
   the hand-off card (_calc_register_fields.html). Name, email and the
   button on one row at desktop width, stacked on a phone; the Terms
   line beneath. Green is still the one next-step colour on the page. */
.calc-reg__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 0 0 10px; }
.calc-reg__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.calc-reg__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.calc-reg__input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius); }
.calc-reg__input:focus-visible { border-color: var(--good); }
.calc-reg__btn { background: var(--good); color: #fff; border: none; font-size: 16px; font-weight: 700; height: 48px; padding: 0 22px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: filter .15s; }
.calc-reg__btn:hover, .calc-reg__btn:focus-visible { filter: brightness(1.1); color: #fff; }
/* CR-061: the Google button inside the keep forms, and the divider
   under it. Drawn here, not loaded from Google - no asset of theirs is
   fetched by a page children use. */
.calc-reg__google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin: 0 0 4px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--border-strong); border-radius: var(--radius); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.calc-reg__google:hover, .calc-reg__google:focus-visible { border-color: var(--ink); }
.calc-reg__google-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); font-weight: 800; font-size: 14px; }
.calc-reg__or { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--ink-soft); font-size: 13px; }
.calc-reg__or::before, .calc-reg__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* CR-055: the email-only row - one field and the button, so the field
   gets the width the two used to share; the Terms line is prose now. */
.calc-reg__fields--email { grid-template-columns: minmax(0, 1fr) auto; }
.calc-reg__tos--line { display: block; cursor: auto; }
.calc-reg__tos { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); cursor: pointer; max-width: 52em; }
.calc-reg__tos input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--good); flex: none; }
.calc-reg__tos a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) { .calc-reg__fields, .calc-reg__fields--email { grid-template-columns: minmax(0, 1fr); } .calc-reg__btn { width: 100%; } }
/* CR-046: rows four to six of the results table show the college name
   only; the band, reason, price and dates sit behind the free keep step.
   The blurred span is a fixed placeholder sentence, never real figures,
   so a reader of the page source learns nothing the screen hides. */
.calc-row--locked th, .calc-row--locked td { background: var(--bg-band); }
.calc-locked { position: relative; }
.calc-locked__blur { display: block; filter: blur(5px); user-select: none; pointer-events: none; color: var(--ink-muted); white-space: nowrap; }
.calc-locked__text { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--likely-border); border-radius: var(--radius); padding: 6px 12px; white-space: nowrap; }
.calc-locked__text a { color: var(--good); text-decoration: underline; }
.calc-locked__text a:hover, .calc-locked__text a:focus-visible { color: var(--accent-strong); }

/* CR-049: the college the visitor named, first in the results and fully
   open (_calc_named.html). Neutral surface, not the green of the keep
   step — this is the answer, not an ask. The "check another college"
   row reuses the hero form's input look. */
.calc-named { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 18px 20px 16px; margin: 0 0 var(--space-4); }
.calc-named__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.calc-named__h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: var(--ink); margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.calc-named__badge { font-size: 14px; }
.calc-named__sub { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 52em; }
.calc-named .preview-table { margin: 0 0 var(--space-3); }
.calc-named__choices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--space-3); }
.calc-named__choices-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.calc-named__choice { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: 99px; padding: 8px 14px; cursor: pointer; text-align: left; }
.calc-named__choice:hover, .calc-named__choice:focus-visible { border-color: var(--brand); outline: none; }
.calc-named__choice .u-muted { font-weight: 500; }
/* CR-052: the held second lookup — a neutral "ready" badge (no band colour
   leaks) and the keep form inside the named card, with no bottom gap. */
.calc-named__badge--held { background: var(--bg); color: var(--ink-2); border: 1px solid var(--border-strong); }
.calc-keep--named { margin: 0; }
.calc-named__again { border-top: 1px solid var(--border); padding-top: 12px; }
.calc-named__again-label { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 0 0 6px; }
.calc-named__again-label span { font-weight: 500; color: var(--ink-soft); }
.calc-named__again-row { display: flex; gap: 10px; flex-wrap: wrap; }
.calc-named__again-row input { flex: 1 1 260px; height: 44px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 12px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; background: var(--surface); color: var(--ink); min-width: 0; }
.calc-named__again-row input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.calc-named__again-row .btn { height: 44px; white-space: nowrap; }

/* Replaces two inline style attributes in _calc_charts.html that the
   Content Security Policy (style-src 'self') was blocking on every
   results render. Cosmetic only, but two console errors per visit. */
.calc-charts__legend-badge { font-size: 11px; padding: 1px 6px; }
.calc-charts__footnote { margin-top: 8px; font-size: 13px; }

/* Source <details> (CR-038): tuck the source link inside a disclosure so
   it does not function as a column of exits while the fact stays present. */
.src-details summary { cursor: pointer; font-size: 13px; color: var(--ink-muted); list-style: none; }
.src-details summary::-webkit-details-marker { display: none; }
.src-details[open] a { display: inline-block; margin-top: 6px; font-size: 13px; }

/* Hand-off card (CR-038 §4.2). Green is the one next-step colour; nothing
   else on the page uses it, so the button is unmistakeable. */
.handoff { background: var(--likely-bg); border: 1px solid var(--likely-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-4); margin: var(--space-5) 0; }
.handoff__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--likely); margin: 0 0 10px; }
.handoff__h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); color: var(--ink); margin: 0 0 12px; }
.handoff__body { font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 var(--space-3); max-width: 52em; }
.handoff__pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.handoff__pill { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 99px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.handoff__pill--likely { border-color: var(--likely); color: var(--likely); }
.handoff__pill--target { border-color: var(--target); color: var(--target); }
.handoff__pill--reach  { border-color: var(--reach);  color: var(--reach); }
.handoff__cta { background: var(--good); color: #fff; border: none; font-size: 17px; font-weight: 700; height: 52px; padding: 0 28px; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; transition: filter .15s; }
.handoff__cta:hover, .handoff__cta:focus-visible { filter: brightness(1.1); color: #fff; }
.handoff__trust { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--ink-muted); }
.handoff__trust li::before { content: "\2713\00a0"; color: var(--good); font-weight: 700; }

/* Sticky bar at every width (shows once results are in view, hides when
   the hand-off card is visible — IntersectionObserver in the partial).
   This rule out-ranks the display:none above by specificity, so it is
   not phone-only; the comment used to say it was. */
.calc-sticky:not([hidden]) { display: block; }
.calc-sticky__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }
.calc-sticky__tally { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-sticky__btn { font-size: 14px; height: 40px; padding: 0 16px; white-space: nowrap; }
@media (max-width: 640px) { .handoff { padding: var(--space-4); } }

/* ===============================================================
   CR-066 — the results page people actually look at.

   Owner's verdict on 2026-10-13, looking at the live page: bland, and
   the one thing that matters was at the bottom. Three deliberate
   changes, no new libraries and no images.

     1. Colour carries meaning. Every verdict is already green, blue or
        red in the tokens; here those colours fill the tiles and the
        band pills instead of hiding in a 4-pixel border, so the answer
        is readable from across the room.
     2. The ask is a card that looks like a card: a thick accent edge,
        a heading that is a heading, and a button that is the biggest
        element on the screen.
     3. Size does the ranking. College names, prices and bands step up;
        plumbing text steps down.

   Still no gradient blobs, no glassmorphism and no dark page
   background (CLAUDE.md S8) - saturation comes from the tokens that
   already passed the contrast scan.
   =============================================================== */

/* The results page's own masthead: bright, high-contrast, and it
   repeats the answers so the page stands alone at its own address. */
.calc-result-head { background: var(--surface); border-bottom: 4px solid var(--accent); }
.calc-result-head__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 26px 40px 22px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.calc-result-head__eyebrow {
  font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-strong); margin: 0 0 6px;
}
.calc-result-head__h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.12; margin: 0; color: var(--ink); }
.calc-result-head__answers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.calc-result-head__answers span {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: var(--bg-band); border: 1.5px solid var(--border-strong); border-radius: 99px; padding: 6px 12px;
}
.calc-result-head__edit {
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--accent-strong);
  border: 2px solid var(--accent-border); border-radius: var(--radius); padding: 10px 16px; white-space: nowrap;
}
.calc-result-head__edit:hover, .calc-result-head__edit:focus-visible { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
@media (max-width: 760px) { .calc-result-head__inner { padding: 20px; } }

/* Tally tiles: filled, not outlined. The number is the loudest thing
   in each tile and it carries its own band colour. */
.calc-summary { gap: 14px; }
.calc-summary__tile { border: 2px solid var(--border); border-left-width: 2px; padding: 18px 20px; gap: 6px; }
.calc-summary__tile--likely { background: var(--likely-bg); border-color: var(--likely-border); }
.calc-summary__tile--target { background: var(--target-bg); border-color: var(--target-border); }
.calc-summary__tile--reach  { background: var(--reach-bg);  border-color: var(--reach-border); }
.calc-summary__tile--budget { background: #ECFEFF; border-color: var(--accent-border); }
.calc-summary__num { font-family: var(--font-sans); font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.calc-summary__tile--likely .calc-summary__num { color: var(--likely); }
.calc-summary__tile--target .calc-summary__num { color: var(--target); }
.calc-summary__tile--reach  .calc-summary__num { color: var(--reach); }
.calc-summary__tile--budget .calc-summary__num { color: var(--accent-strong); }
.calc-summary__label { font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ink-2); }

/* The ask. One card, unmissable: a thick accent edge, a real heading,
   and the widest button on the page. */
.handoff { border: 2px solid var(--likely-border); border-left: 6px solid var(--likely); border-radius: var(--radius-lg); background: var(--likely-bg); }
.handoff__h2 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.9rem); line-height: 1.15; color: var(--ink); }
.handoff__eyebrow { color: var(--likely); font-weight: 800; letter-spacing: .14em; }
.calc-keep { border: 2px solid var(--likely-border); border-left: 6px solid var(--likely); }
.calc-keep__text { font-size: 16px; }
.calc-keep__text strong, .handoff__body strong { color: var(--ink); }

/* Buttons in the keep forms: taller, louder, full width on the ask. */
.calc-reg__btn { height: 54px; font-size: 17px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 2px 0 rgb(2 122 72 / .35); }
.calc-reg__google { height: 54px; font-size: 16px; border-width: 2px; }
.calc-reg__google-mark { background: var(--accent-strong); }

/* Band pills in the table and the named-college card: filled, bold,
   readable at a glance rather than a quiet outline. */
.preview-table .badge, .calc-named__badge {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 12px; border-width: 2px;
}
.preview-table .badge--likely { background: var(--likely); color: #fff; border-color: var(--likely); }
.preview-table .badge--target { background: var(--target); color: #fff; border-color: var(--target); }
.preview-table .badge--reach  { background: var(--reach);  color: #fff; border-color: var(--reach); }

/* The table itself: bigger names, bigger prices, clearer rows. */
.preview-table th[scope="row"], .preview-table td:first-child { font-size: 16px; }
.preview-table .preview-table__college { font-family: var(--font-sans); font-weight: 800; font-size: 16px; color: var(--ink); }
.preview-table tbody tr:nth-child(odd) td, .preview-table tbody tr:nth-child(odd) th { background: var(--bg-band-soft); }
.preview-table .preview-table__price { font-family: var(--font-sans); font-weight: 800; font-size: 16px; color: var(--ink); }

/* The named college, when the visitor typed one: the loudest card on
   the page, because it answers the search they arrived on. */
.calc-named { border: 2px solid var(--accent-border); border-top: 6px solid var(--accent); }
.calc-named__h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }

/* CR-067: Google and email side by side, one row, equal weight. The
   stacked version put the email box below the fold on a laptop, so
   half the offer was invisible at the moment of decision. */
.calc-reg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); gap: 16px; align-items: end; margin: 0 0 12px; }
.calc-reg__row .calc-reg__google { margin: 0; }
.calc-reg__row .calc-reg__fields { margin: 0; }
.calc-reg__row .calc-reg__or { margin: 0; flex-direction: column; align-self: center; color: var(--ink-soft); font-weight: 700; }
.calc-reg__row .calc-reg__or::before, .calc-reg__row .calc-reg__or::after { width: 1px; height: 18px; flex: none; }
@media (max-width: 900px) {
  .calc-reg__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .calc-reg__row .calc-reg__or { flex-direction: row; }
  .calc-reg__row .calc-reg__or::before, .calc-reg__row .calc-reg__or::after { width: auto; height: 1px; flex: 1; }
}

/* CR-067 fix: the Terms line is prose, not a checkbox row. The base
   .calc-reg__tos rule sets display:flex for the old checkbox layout and
   wins on source order, which broke the sentence into two columns. */
.calc-reg__tos.calc-reg__tos--line { display: block; max-width: none; font-size: 12.5px; }
.calc-reg__tos.calc-reg__tos--line a { color: var(--ink-2); }

/* ===============================================================
   CR-072 — the results on one screen, phone first.

   Owner, 2026-10-13: "In single page things should be visible...
   most people are coming from Instagram so they would be using on
   mobile." The page is laid out for a 390-pixel phone and widened
   from there; on a laptop the table and the ask sit side by side so
   the decision and the evidence are visible at the same time.
   =============================================================== */
.calc-result { padding: 18px 0 40px; }
.calc-result__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr); gap: 20px; align-items: start; }
.calc-result__side { position: sticky; top: 86px; }
@media (max-width: 1040px) {
  .calc-result__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* On a phone the ask comes first: the tally has already told them
     the answer, and the table is the detail they scroll for. */
  .calc-result__side { position: static; order: -1; }
}

/* The masthead compresses to two lines on a phone. */
.calc-result-head__inner { padding: 16px 40px 14px; align-items: center; }
.calc-result-head__h1 { font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem); }
.calc-result-head__eyebrow { font-size: 11px; margin-bottom: 4px; }
.calc-result-head__answers { margin-top: 10px; align-items: center; gap: 6px; }
.calc-result-head__answers span { font-size: 12px; padding: 4px 10px; }
.calc-result-head__edit { font-size: 12px; padding: 5px 12px; border-width: 1.5px; }
@media (max-width: 760px) { .calc-result-head__inner { padding: 14px 16px 12px; } }

/* Tally: one compact row, four across even on a phone. */
.calc-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.calc-summary__tile { padding: 10px 12px; gap: 2px; border-width: 1.5px; }
.calc-summary__num { font-size: 26px; }
.calc-summary__label { font-size: 10.5px; letter-spacing: .06em; }
@media (max-width: 640px) {
  .calc-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .calc-summary__tile { padding: 8px 6px; text-align: center; align-items: center; }
  .calc-summary__num { font-size: 21px; }
  .calc-summary__label { font-size: 9.5px; }
}

/* The ask, as a side card: tighter, and the pills are a count rather
   than six full college names eating the height. */
.calc-result__side .handoff { margin: 0; padding: 16px 18px; }
.calc-result__side .handoff__h2 { font-size: 1.25rem; margin-bottom: 8px; }
.calc-result__side .handoff__body { font-size: 13.5px; line-height: 1.45; margin-bottom: 10px; }
.calc-result__side .handoff__pills { gap: 5px; margin-bottom: 12px; }
.calc-result__side .handoff__pills li { font-size: 11.5px; padding: 4px 9px; }
.calc-result__side .calc-reg__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.calc-result__side .calc-reg__or { flex-direction: row; margin: 2px 0; }
.calc-result__side .calc-reg__or::before, .calc-result__side .calc-reg__or::after { width: auto; height: 1px; flex: 1; }
.calc-result__side .calc-reg__fields--email { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.calc-result__side .calc-reg__google, .calc-result__side .calc-reg__btn { height: 48px; font-size: 15px; }
.calc-result__side .handoff__trust { font-size: 11.5px; gap: 6px; }
.calc-result__side .calc-reg__tos.calc-reg__tos--line { font-size: 11px; }

/* The charts fold away. They are evidence, not the decision. */
.calc-extras { margin-top: 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.calc-extras > summary {
  cursor: pointer; padding: 12px 16px; font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; color: var(--ink-2); list-style: none;
}
.calc-extras > summary::-webkit-details-marker { display: none; }
.calc-extras > summary::before { content: "▸ "; color: var(--accent-strong); font-weight: 800; }
.calc-extras[open] > summary::before { content: "▾ "; }
.calc-extras > summary:hover { color: var(--accent-strong); }
.calc-extras .calc-chart { margin: 0 16px 16px; }

/* The results table on a phone: the three columns that matter, the
   rest hidden rather than pushed into a sideways scroll nobody finds. */
@media (max-width: 760px) {
  .preview-table { font-size: 13px; }
  /* College, Band, Why, Yearly price stay. Within budget, Key dates
     and Verified source go: the first four are the answer, the last
     three are the audit trail, and a phone has room for one of those
     two things. The full table is a tap away on a laptop. */
  .preview-table th:nth-child(5), .preview-table td:nth-child(5),
  .preview-table th:nth-child(6), .preview-table td:nth-child(6),
  .preview-table th:nth-child(7), .preview-table td:nth-child(7) { display: none; }
  .preview-table th, .preview-table td { padding: 10px 8px; }
  .preview-table .preview-table__college { font-size: 14px; }
  .calc-result { padding: 12px 0 28px; }
}

/* CR-072: the named-college card on a phone - the one row that answers
   the search they arrived on, with no wasted frame around it. */
@media (max-width: 760px) {
  .calc-named { padding: 14px 14px 12px; }
  .calc-named__h2 { font-size: 1.15rem; }
  .calc-named__sub { font-size: 13.5px; margin-bottom: 10px; }
  .calc-named__again-label { font-size: 13px; }
  .calc-named__again-row input, .calc-named__again-row .btn { height: 44px; }
  .handoff { padding: 14px 16px; }
  .handoff__h2 { font-size: 1.2rem; }
  .handoff__body { font-size: 13.5px; }
  .handoff__trust { font-size: 11.5px; }
  .calc-extras > summary { font-size: 13px; padding: 10px 12px; }
}

/* CR-074: the named-college card wore a thick accent top edge. That edge
   is this site's action colour - it belongs on the button inside the
   card, not wrapped around the card, where it shouted louder than the
   answer. The card now reads as a quiet frame with the brand navy on
   its leading edge, and the only accent left on it is the button. */
.calc-named { border: 1.5px solid var(--border-strong); border-top: 1.5px solid var(--border-strong); border-left: 5px solid var(--brand); }

/* CR-086 — the one locked line on an otherwise open row.
   A visible, named gap beats a blurred block: the visitor must know
   exactly what they do not have, or there is nothing to want. */
.calc-lockrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.calc-lockrow__label {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
  color: var(--ink-soft);
}
.calc-lockrow__cta {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 800;
  color: var(--accent-strong); text-decoration: none;
  border: 1px solid var(--accent-border); border-radius: 999px;
  padding: 1px 8px; background: var(--brand-tint-bg); white-space: nowrap;
}
.calc-lockrow__cta:hover,
.calc-lockrow__cta:focus-visible { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }