/* ── Homepage (2026-08 redesign) ──────────────────────────────────────────────
   Scoped under .psf-home throughout. Extends the design system proven on the
   school pages; adds no tokens of its own. Light theme only — dark mode was
   removed site-wide; see the "No school-page dark theme" note at the end of
   main.css. (No line number on purpose: this read "main.css:1882" until a
   56-line deletion in main.css moved the note, leaving the citation past the
   end of the file.) */

.psf-home { background: var(--psf-paper); }

/* ── Controls ────────────────────────────────────────────────────────────────
   main.css paints every .psf-btn in the legacy #1a56db, which left the hero CTA
   sitting directly beside the gold rug in a blue that belongs to no part of
   this palette. These overrides are scoped to .psf-home ONLY: main.css's
   .psf-btn is shared by every other template on the site, including the 147
   school pages, and --psf-blue is deliberately left alone there.
   The fill/on-fill pairing is the same one school.css already uses for solid
   surfaces that carry white text (.psf-tablewrap th, .psf-mark--y), so this
   adds no second dialect and no new token. */
.psf-home .psf-btn--primary { background: var(--psf-fill); color: var(--psf-on-fill); border-color: var(--psf-fill); }
.psf-home .psf-btn--primary:hover { background: color-mix(in srgb, var(--psf-fill) 85%, #000); border-color: color-mix(in srgb, var(--psf-fill) 85%, #000); color: var(--psf-on-fill); }
.psf-home .psf-btn--outline { background: transparent; color: var(--psf-fill); border-color: var(--psf-fill); }
.psf-home .psf-btn--outline:hover { background: var(--psf-fill); color: var(--psf-on-fill); border-color: var(--psf-fill); }
.psf-home .psf-btn--white { background: var(--psf-on-fill); color: var(--psf-fill); }
.psf-home .psf-btn--white:hover { background: var(--psf-paper); color: var(--psf-fill); }

/* Hero — LEFT aligned, matching the school-page hero.
   main.css inherits three separate centring declarations onto this section and
   none of them belong here: `.psf-home-hero { text-align: center }` (main.css
   ~348), `.psf-home-hero__inner { max-width: 720px; margin: 0 auto }` (~353)
   and `.psf-home-hero__actions { justify-content: center }` (~367). Left
   unreset they fought the 20ch title and 56ch subtitle boxes below, which are
   left-flushed, so the hero read as three competing alignments at once.
   The __inner reset restores .psf-container's OWN values rather than
   `max-width: none`: that element carries both classes, and main.css's
   .psf-container (max-width: var(--psf-container); margin: 0 auto) is what
   keeps the hero's measure in step with every other section on the page. */
.psf-home .psf-home-hero { background: var(--psf-surface-2); border-bottom: 1px solid var(--psf-rule-warm); padding: 56px 0 48px; text-align: left; }
.psf-home .psf-home-hero__inner { max-width: var(--psf-container); margin: 0 auto; }
/* The badge declared a colour but no background, so main.css's legacy
   `background: #1a2b5e` pill survived underneath and put gold on navy at
   3.03:1 — an above-the-fold AA regression, down from #fff's 12.1:1. It is a
   warm chip now: --psf-gold-bright as a FILL (never as text, per the token),
   with --psf-ink on it at 11.41:1. */
.psf-home .psf-home-hero__badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--psf-ink); margin-bottom: 18px;
  background: color-mix(in srgb, var(--psf-gold-bright) 18%, transparent);
  border-radius: 100px; padding: 5px 13px;
}
.psf-home .psf-home-hero__title {
  font-family: var(--psf-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--psf-ink); text-wrap: balance; margin: 0 0 14px; max-width: 20ch;
}
.psf-home .psf-home-hero__subtitle {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--psf-text-muted);
  max-width: 56ch; margin: 0 0 28px;
}
.psf-home .psf-home-hero__actions { display: flex; align-items: center; justify-content: flex-start; gap: 22px; flex-wrap: wrap; }
/* Both the rug and its plain-sentence fallback now sit BELOW .psf-home-hero__actions
   as its sibling (front-page.php), not beside the 58px CTA button inside it —
   at unequal heights that read as a stray barcode next to a button rather
   than a designed element. The top margin is shared here so the two states
   (rug present / rug absent) land in the same spot. */
.psf-home .psf-home-hero__note { display: block; font-size: 13px; color: var(--psf-text-muted); margin-top: 22px; }

/* The signature moment — the programs distribution under the hero CTA.
   Same rug vocabulary as the school pages, with no mark: the homepage is not
   about one program, it is about the spread. Now a standalone block below
   the actions row rather than a flex sibling of the CTA button: it no
   longer needs to negotiate width against the button, so this constrains it
   directly instead of via `flex: 1 1 300px`. The 300–420px band keeps the
   147-tick rug's density readable without letting it sprawl edge-to-edge on
   a wide viewport. */
.psf-home .psf-home-mark {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; max-width: 420px; margin-top: 22px;
}
.psf-home .psf-home-mark__rug { display: block; width: 100%; height: 26px; overflow: visible; }
.psf-home .psf-home-mark__rug .psf-tick { stroke: var(--psf-rug); stroke-width: 1.1; }
.psf-home .psf-home-mark__rug .psf-axis { stroke: var(--psf-rule-warm); stroke-width: 1; }
/* The rug's viewBox is 0 0 240 26 with preserveAspectRatio="none", rendered
   420px wide here (scaleX ~1.75). Tick strokes scale harmlessly, but the
   $5k/$87k caption glyphs smear horizontally at that ratio. They are also
   redundant with .psf-home-mark__read's exact $5,464–$86,580 line directly
   beneath, so this hides them for the homepage rug only. psf_render_rug()
   itself is untouched — the 147 school pages render this same SVG at ~1.1x,
   where the captions are fine, and still need them since those pages have
   no equivalent "read" line stating the range in words. */
.psf-home .psf-home-mark__rug .psf-cap { fill: var(--psf-text-muted); font-size: 9.5px; font-weight: 600; display: none; }
.psf-home .psf-home-mark__read { font-size: 12.5px; line-height: 1.45; color: var(--psf-text-muted); margin: 0; }
.psf-home .psf-home-mark__read b { color: var(--psf-text); font-weight: 650; }

/* Section rhythm */
.psf-home .psf-section { padding: 58px 0; }
.psf-home .psf-section-title {
  font-family: var(--psf-display); font-stretch: 110%; font-weight: 750;
  font-size: clamp(24px, 2.6vw, 33px); line-height: 1.12; letter-spacing: -.015em;
  color: var(--psf-ink); text-wrap: balance; margin: 0 0 10px;
}
.psf-home .psf-label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--psf-gold); margin-bottom: 8px;
}
/* …but NOT inside the dark editorial section. main.css:501 already gives that
   section's eyebrow `color: rgba(255,255,255,.45); display: block;
   margin-bottom: 24px`, and the rule above has equal specificity (0,2,0) and
   wins on source order alone — it was retinting the eyebrow gold on #1a1f36
   (3.63:1) and flipping both display and margin. This rule is (0,3,0) so the
   dark section keeps its own light label with its original block display and
   24px margin. The alpha is .55 rather than main.css's .45 because .45
   composites to #818490, which measures 4.36:1 on #1a1f36 — under AA. .55
   composites to #989AA5 at 5.80:1, and matches the alpha this section already
   uses for its own body copy. */
.psf-home .psf-home-pharmd-dark .psf-label {
  color: rgba(255,255,255,.55); display: block; margin-bottom: 24px;
}

/* Browse by state */
.psf-home .psf-home-states { background: var(--psf-paper); border-top: 1px solid var(--psf-rule-warm); }
/* main.css:376-380 grounds this whole block in a hardcoded pale blue (#e8eef8),
   which is the largest surviving patch of the legacy palette on the page and
   sat directly under the new warm cards. It becomes the section's one white
   plane, delineated by a warm rule the way school.css delineates .psf-facts
   and .psf-metrics — by hairlines, not by competing fills. */
.psf-home .psf-home-states__outer {
  background: var(--psf-surface-2); border: 1px solid var(--psf-rule-warm);
  border-radius: 14px; padding: 26px;
}
/* The map is no longer a card of its own: it now sits on that plane directly,
   so a second white fill inside a white fill would only add a stray rule. */
.psf-home .psf-home-states__map-card { background: transparent; border: none; border-radius: 0; padding: 0; }
.psf-home .psf-home-states__panel {
  background: var(--psf-surface-2); border: 1px solid var(--psf-rule-warm); border-radius: 12px; padding: 22px;
}
/* The 51 state tiles are this section's main visual and main.css paints them
   #3b5bdb on a translucent white that is invisible against the new white
   plane. Warm paper chips, navy letters (12.39:1), navy fill on hover. */
.psf-home .psf-tile-map__state {
  background: var(--psf-paper); border: 1px solid var(--psf-rule-warm); color: var(--psf-fill);
}
.psf-home .psf-tile-map__state:hover {
  background: var(--psf-fill); color: var(--psf-on-fill); border-color: var(--psf-fill);
}
.psf-home .psf-home-states__panel-title {
  font-family: var(--psf-display); font-stretch: 106%; font-weight: 700;
  font-size: 18px; color: var(--psf-ink); margin: 0 0 14px;
}
.psf-home .psf-home-states__stat-row { display: flex; gap: 1px; background: var(--psf-rule-warm); border: 1px solid var(--psf-rule-warm); border-radius: 10px; overflow: hidden; }
.psf-home .psf-home-states__stat-small { background: var(--psf-surface-2); padding: 14px 16px; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.psf-home .psf-home-states__stat-small strong {
  font-family: var(--psf-display); font-stretch: 106%; font-weight: 800;
  font-size: 27px; line-height: 1; color: var(--psf-ink);
}
.psf-home .psf-home-states__stat-small span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--psf-text-muted); }

/* For prospective students */
.psf-home .psf-home-why { background: var(--psf-surface-2); border-top: 1px solid var(--psf-rule-warm); padding: 58px 0; }
.psf-home .psf-home-why__intro { font-size: 17px; line-height: 1.6; color: var(--psf-text-muted); max-width: 62ch; margin: 0 0 26px; }
.psf-home .psf-home-why__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--psf-rule-warm); border: 1px solid var(--psf-rule-warm); border-radius: 12px; overflow: hidden; margin: 0 0 26px; }
.psf-home .psf-home-why__card { background: var(--psf-surface-2); padding: 22px; }
/* The two figures are the section's whole point and main.css:447 leaves them
   in --psf-blue; the "View source" link at :449 the same. */
.psf-home .psf-home-why__card strong {
  font-family: var(--psf-display); font-stretch: 106%; font-weight: 800;
  color: var(--psf-ink);
}
.psf-home .psf-home-why__card a { color: var(--psf-fill); text-decoration: underline; }
.psf-home .psf-home-why__body { font-size: 16px; line-height: 1.68; color: var(--psf-text); max-width: 68ch; margin: 0 0 14px; }

/* CTA banner */
.psf-home .psf-home-cta-banner { background: var(--psf-fill); color: var(--psf-on-fill); padding: 40px 0; }
.psf-home .psf-home-cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Guides — main.css:478-492 builds these columns out of --psf-white and the
   cool-grey --psf-border, which reads as a foreign card once it sits on warm
   paper, and hovers both the column title and every link to --psf-blue. */
.psf-home .psf-home-guides { background: var(--psf-paper); border-top: 1px solid var(--psf-rule-warm); }
.psf-home .psf-guide-col { background: var(--psf-surface-2); border-color: var(--psf-rule-warm); }
.psf-home .psf-guide-col__title { color: var(--psf-ink); border-bottom-color: var(--psf-rule-warm); }
.psf-home .psf-guide-col__title:hover { color: var(--psf-fill); }
.psf-home .psf-guide-col__list li a:hover { color: var(--psf-ink); }

/* Compare table — same treatment school.css gives .psf-tablewrap th. */
.psf-home .psf-compare-table th { background: var(--psf-fill); color: var(--psf-on-fill); border-color: var(--psf-fill); }
.psf-home .psf-compare-table td { border-color: var(--psf-rule-warm); }
.psf-home .psf-compare-table tr:nth-child(even) td { background: var(--psf-paper); }

/* Search bar — the button, the field's rule and the results dropdown are one
   component; leaving any of the three blue re-imports the legacy palette into
   the last section of the page. */
.psf-home .psf-searchbar__form { border-color: var(--psf-rule-warm); background: var(--psf-surface-2); }
.psf-home .psf-searchbar__form:focus-within { border-color: var(--psf-fill); }
.psf-home .psf-searchbar__btn { background: var(--psf-fill); color: var(--psf-on-fill); }
.psf-home .psf-searchbar__btn:hover { background: color-mix(in srgb, var(--psf-fill) 85%, #000); }
.psf-home .psf-searchbar__results { border-color: var(--psf-rule-warm); }
.psf-home .psf-search-results li a { border-bottom-color: var(--psf-rule-warm); }
.psf-home .psf-search-results li a:hover { background: var(--psf-paper); color: var(--psf-ink); }

/* Dark editorial section keeps its own ground; only the type changes */
.psf-home .psf-home-pharmd-dark__lead { font-size: 18px; line-height: 1.6; max-width: 68ch; }
.psf-home .psf-home-pharmd-dark__body { font-size: 15.5px; line-height: 1.7; max-width: 68ch; }

@media (max-width: 900px) {
  .psf-home .psf-home-hero { padding: 40px 0 34px; }
  .psf-home .psf-section { padding: 40px 0; }
  .psf-home .psf-home-hero__actions { gap: 16px; }
}