/* ─────────────────────────────────────────────
   NICPrep — Direction A design system
   Editorial-SaaS · Fraunces serif + Inter body
   Shared across every page.
   ───────────────────────────────────────────── */

:root {
  /* Ground */
  --bg: #fbf7f4;
  --card: #ffffff;
  --cream: #f4ebe2;

  /* Ink */
  --ink: #1c1410;
  --ink-2: #5a4e48;
  --ink-3: #8a7d75;

  /* Rose accent */
  --rose: #b8264a;
  --rose-ink: #8a0f33;
  --rose-soft: #f8dde4;
  --rose-tint: #fbeaed;

  /* Utility */
  --line: #ece4dd;
  --line-soft: #f4ece4;
  --sage: #5e7558;
  --gold: #b8905a;
  --good: #2d6a4f;
  --good-bg: #e8f1ea;
  --warn: #a05a30;
  --warn-bg: #fbeedf;

  /* Type */
  --display: 'Fraunces', 'Instrument Serif', Georgia, serif;
  --body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(40, 20, 30, 0.04);
  --shadow-md: 0 14px 36px -18px rgba(60, 30, 40, 0.18);
  --shadow-lg: 0 30px 60px -30px rgba(40, 20, 30, 0.20);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

/* ────── Reset ────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ────── Utilities ────── */

/* One content measure site-wide: 1200 - 2x48 = 1104px, the same as
   .nav-inner and .section. .wrap was 1240/40, which put every band that
   used it 28px wider than the nav above it — most visible on texas and
   california, where every section overhung the header. */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 40px; }
.wrap-tight { max-width: 680px; margin: 0 auto; padding: 0 40px; }

.mono {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--ink-3); text-transform: uppercase;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--rose-soft); color: var(--rose-ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px;
  text-transform: uppercase; font-weight: 600;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--rose);
}
.eyebrow.dark { background: var(--ink); color: #fbf7f4; }

/* ────── Buttons ────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-rose { background: var(--rose); color: #fff; }
.btn-rose:hover { background: var(--rose-ink); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink-3); background: var(--card); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); }
.btn-lg { padding: 14px 24px; font-size: 14.5px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c211c; }
.btn-pill { border-radius: 999px; padding: 10px 18px; font-size: 13.5px; }

/* ────── Nav ────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  height: 68px;
  background: rgba(251, 247, 244, 0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 40px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }

/* ─── NICPREP WORDMARK ───────────────────────────────────────────
   Replaces the [N] tile + serif "NICPrep". From the sister-identity
   design: nicprep moves to the same heavy geometric lowercase as
   btygoat at matched x-height, and takes one signature detail — a
   crimson dot on the i, carrying the colour over from the old badge.

   The dot is drawn rather than typed: the i is a DOTLESS ı (U+0131)
   with a positioned circle over it, so the dot's size, colour and
   position are ours rather than the typeface's. Same technique the
   design uses.

   Poppins is the geometric face; the fallback stack is geometric too,
   so a failed font load degrades to the right shape rather than to a
   serif. */
.np-wm { font-family: 'Poppins', 'Century Gothic', 'Avenir Next', 'Futura',
         system-ui, sans-serif;
         font-weight: 800; font-size: 20px; letter-spacing: -.02em;
         line-height: 1; color: var(--ink); white-space: nowrap;
         display: inline-block; }
.np-i  { position: relative; display: inline-block; }
.np-dot{ position: absolute; left: 50%; top: .075em;
         width: .17em; height: .17em; margin-left: -.085em;
         background: var(--rose); border-radius: 50%; }
/* The scope label sits to the wordmark's right, matching the
   "state exams" label btygoat already carries on its side. */
/* The sister mark inside btygoat's lockup: the same wordmark, set
   smaller and slightly back so the host brand stays dominant. */
.np-wm-sm{font-size:14px;opacity:.85}
.np-scope { font-family: var(--body); font-size: 10px; letter-spacing: .04em;
            text-transform: uppercase; color: var(--ink-3); opacity: .8;
            white-space: nowrap; }

.brand-mark {
  width: 26px; height: 26px; border-radius: 6px; background: var(--rose);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.brand-wordmark {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  letter-spacing: -0.3px; color: var(--ink);
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 14px; color: var(--ink-2); font-weight: 500;
  transition: color .14s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-cta a.login { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.hamburger {
  display: none; width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card);
  align-items: center; justify-content: center;
}

/* ────── Footer ────── */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg); padding: 48px 0 32px;
  margin-top: 80px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
}
.footer-col h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 13.5px; color: var(--ink-2);
  padding: 4px 0;
}
.footer-col a:hover { color: var(--ink); }
.footer-desc {
  font-size: 13px; color: var(--ink-3); line-height: 1.6;
  margin-top: 12px; max-width: 280px;
}
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-3);
}
.footer-bottom .legal { display: flex; gap: 20px; }

/* ────── Cards / section primitives ────── */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
}
.card-soft {
  background: var(--rose-tint); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 28px;
}
.divider { height: 1px; background: var(--line); margin: 48px 0; }

.section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.section-title {
  font-size: clamp(32px, 4vw, 44px); font-family: var(--display);
  letter-spacing: -0.04em; line-height: 1.05; color: var(--ink);
  margin-top: 14px; text-wrap: balance;
}
.section-lede {
  font-size: 17px; color: var(--ink-2); line-height: 1.6;
  margin-top: 14px; max-width: 640px; text-wrap: pretty;
}

/* ────── Forms ────── */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.1px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-size: 14px;
  outline: none; transition: border-color .14s, box-shadow .14s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-soft);
}
.field textarea { resize: vertical; min-height: 110px; }
.feedback { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-top: 10px; }
.feedback.good { background: var(--good-bg); color: var(--good); }
.feedback.bad { background: var(--warn-bg); color: var(--warn); }

/* ────── Status pills ────── */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  font-family: var(--mono); letter-spacing: 0.3px;
  text-transform: uppercase;
}
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.rose { background: var(--rose-soft); color: var(--rose-ink); }
.pill.muted { background: var(--line-soft); color: var(--ink-3); }

/* ────── Responsive ────── */

@media (max-width: 900px) {
  .wrap, .wrap-narrow, .wrap-tight { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .section { padding: 48px 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .nav-cta a.login { display: none; }
}

/* ────── Print ────── */
@media print {
  .nav, .footer { display: none; }
}

/* ── Test + flashcard title treatment ── */
.test-title .modality-name,
.deck-header-title .modality-name {
  font-style: italic;
  color: var(--rose);
  font-weight: 500;
}

/* ── Site nav (shared across all pages) ── */
nav.site-nav, nav.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,247,244,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: 68px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark, .brand .brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--rose); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.brand-word, .brand-wordmark { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a, .exams-dd-toggle { font-size: 14px; color: var(--ink-2); font-weight: 500; text-decoration: none; }
.nav-links a:hover, .exams-dd-toggle:hover { color: var(--ink); }
.nav-actions, .nav-cta { display: flex; gap: 14px; align-items: center; }
.nav-actions .login, .nav-cta .login { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.nav-actions .login:hover, .nav-cta .login:hover { color: var(--ink); }

/* Exams dropdown */
.exams-dd { position: relative; }
.exams-dd-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--body);
}
.exams-dd-toggle .caret { font-size: 9px; transition: transform .18s; }
.exams-dd.open .exams-dd-toggle .caret { transform: rotate(180deg); }
.exams-dd-menu {
  position: absolute; top: calc(100% + 12px); left: -12px; min-width: 230px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 20px 60px -20px rgba(40,20,30,.18);
  display: none; z-index: 60;
}
.exams-dd.open .exams-dd-menu { display: block; }
.exams-dd-menu a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--ink);
  white-space: nowrap; text-decoration: none;
}
.exams-dd-menu a:hover { background: var(--cream); }

/* Hamburger + mobile menu */
.hamburger {
  display: none; flex-direction: column; gap: 4px; cursor: pointer;
  padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.hamburger span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.mobile-menu { display: none; flex-direction: column; padding: 12px 24px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 4px; font-size: 14.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); text-decoration: none; }
.mobile-menu a:last-child { border-bottom: none; }

@media (max-width: 1024px) {
  .nav-inner { padding: 0 24px; }
}
@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-actions .login { display: none; }
  .nav-actions .btn { display: none; }   /* "Your Access →" pill — mobile menu covers this */
  .hamburger { display: flex; }
  .nav-inner { padding: 0 20px; height: 60px; }
}

/* Footer mobile padding safety — applied to .footer, .footer .wrap,
   AND .footer-grid / .footer-bottom directly so the gutter survives
   any page-specific override. */
@media (max-width: 720px) {
  .footer { padding-left: 20px !important; padding-right: 20px !important; }
  .footer .wrap { padding-left: 0; padding-right: 0; }
  .footer-grid { gap: 32px; padding-left: 0; padding-right: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 0; padding-right: 0; }
}
@media (max-width: 480px) {
  .footer { padding-left: 16px !important; padding-right: 16px !important; padding-top: 36px; padding-bottom: 28px; }
  .footer-grid { gap: 24px; padding-left: 0; padding-right: 0; }
  .footer-col h4 { margin-bottom: 10px; }
}


/* Mobile: hide every "Try free preview" CTA on the site so only the
   inline widget in the hero (<section id="preview-section">) remains.
   Covers: anchors pointing to /<modality>-exam.html?preview=1 routes;
   the .btn-preview small sub-links under pricing cards; the dark
   .cta-section "Not sure yet? Start with the free preview" closer on
   the modality pages and home; and .hero-btns, whose children are all
   preview- or pricing-route links that the inline widget supersedes. */
@media (max-width: 720px) {
  a[href*="?preview=1"]                { display: none !important; }
  a[href*="-exam.html?preview"]        { display: none !important; }
  a[href*="-flashcards-"][href*="preview"] { display: none !important; }
  /* Only hide btn-preview when it points to a preview route; state pages
     reuse .btn-preview for "Already purchased? Find my access" links. */
  .btn-preview[href*="preview"]        { display: none !important; }
  .cta-section                         { display: none !important; }
  .hero-btns                           { display: none !important; }
}

/* Subtle language-availability callout for state-guide modality sections.
   Self-contained so it renders consistently on every page, even on
   single-modality state pages that don't define .notice-good locally. */
.lang-note {
  background: #f4f0eb;
  border-left: 3px solid var(--rose);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px 12px 18px;
  margin: 20px 0 28px;
  max-width: 70ch;
}
.lang-note p {
  font-size: 14px !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  max-width: none !important;
}
.lang-note a {
  color: var(--rose);
  font-weight: 500;
  border-bottom: 1px solid var(--rose-soft);
  padding-bottom: 1px;
}
.lang-note a:hover {
  color: var(--rose-ink);
  border-bottom-color: var(--rose);
}

/* Language toggle pill — EN/ES on cosmetology exam + flashcard pages */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 0.15s;
  margin-left: 12px;
}
.lang-pill:hover {
  border-color: var(--rose);
  color: var(--rose);
}

/* Available-in-language pill — Cosmetology Español badge */
.lang-available-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 12px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.lang-available-pill:hover { opacity: 0.85; }

/* Retake button — clears localStorage progress on exam + flashcard pages */
.btn-retake {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; padding: 6px 14px;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; margin-left: 12px;
  transition: color .15s, border-color .15s;
  vertical-align: middle;
}
.btn-retake:hover { color: var(--rose); border-color: var(--rose); }

/* Get Access dropdown — modality picker CTA in nav */
.access-dd { position: relative; }
.access-dd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-family: var(--body);
}
.access-dd-toggle .caret { font-size: 9px; transition: transform .18s; }
.access-dd.open .access-dd-toggle .caret { transform: rotate(180deg); }
.access-dd-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 420px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 20px 60px -20px rgba(40,20,30,.18);
  display: none; z-index: 60;
}
.access-dd.open .access-dd-menu { display: block; }
.access-dd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; border-radius: 8px;
}
.access-dd-row + .access-dd-row { border-top: 1px solid var(--line); border-radius: 0; }
.access-dd-row .modality-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.access-dd-tiers { display: flex; gap: 4px; }
.access-dd-tier {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line); text-decoration: none;
  white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
}
.access-dd-tier:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.access-dd-tier.bundle { background: var(--rose-soft); color: var(--rose-ink); border-color: var(--rose-soft); }
.access-dd-tier.bundle:hover { background: var(--rose); color: #fff; border-color: var(--rose); }
@media (max-width: 540px) {
  .access-dd-menu { min-width: 280px; right: -8px; }
  .access-dd-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── Nav fit: keep every link on one line + tighten/unify spacing so the
   full item set fits without wrapping. !important overrides the per-page
   inline .nav-links rules (which vary 28px/32px and lack nowrap). ── */
.nav-links { gap: 18px !important; }
.nav-links a, .exams-dd-toggle, .mobile-menu a { white-space: nowrap !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.nav-links a.nav-current, .mobile-menu a.nav-current { font-weight: 700 !important; }

/* ── Legacy on-page trackers: hidden here, not from JS. ──────────────────
   The dashboard (access.html) is the single source of truth for progress;
   study pages show only the "My dashboard →" pill from _progress-strip.js.
   These rules previously lived in that script, but it loads with `defer`, so
   it ran only AFTER first paint — every study page painted the full-width
   dark progress card and then collapsed it, a visible flash plus a layout
   shift on 213 pages. A stylesheet in <head> is render-blocking, so the card
   never paints at all. _progress-strip.js keeps its copy as a fallback for
   clients holding a cached stylesheet; remove it once the cache-bust has
   rolled out. */
.progress-card { display: none !important; }
.fc-bar-wrap { display: none !important; }
.fc-toolbar .fc-stat-label,
.fc-toolbar .fc-stat-val { display: none !important; }

/* ── Mobile: stop pinning every question card to the tallest one ─────────
   Exam pages run a measure() pass that renders all questions off-screen,
   takes the tallest, and injects `.q-card{min-height:<max>px}` into <head>.
   That prevents the Next button jumping between questions, which is right on
   desktop. On a phone the longest stem wraps to many lines, so max blows up
   and EVERY question — including one-liners — inherits it: dead space below
   the options and a mandatory scroll to reach Next on almost every question.

   The injected rule carries no !important, so this beats it regardless of
   source order. Cards size to their own content again, and the nav is made
   sticky so Next stays reachable without scrolling — which solves the jump
   the pin existed to prevent, rather than reintroducing it. */
/* 768px matches the single breakpoint the exam pages already use — a different
   value here would leave a band where their mobile styles apply but this
   doesn't. */
@media (max-width: 768px) {
  .q-card {
    min-height: 0 !important;
    /* 32px all round is desktop padding; it survives on mobile untouched and
       is ~40px of pure height on a screen that has none to spare. */
    padding: 20px !important;
  }

  .q-nav {
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    padding-bottom: 12px;
    background: var(--card, #fff);
    /* clear the iOS Safari home indicator */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Free-preview widgets, platform-wide. These live on index.html and every
     modality landing page as well as california.html — all use .quiz/.quiz-nav,
     and several reserve a min-height so their own Next button can't drift.
     Same trade-off as the exam cards, same fix. Deliberately NOT scoped to
     #preview-section, which only existed on california.html. */
  .quiz { min-height: 0 !important; }
  .quiz-nav {
    position: sticky;
    bottom: 0;
    background: var(--card, #fff);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* Flashcard decks (70 pages) use .fc-nav for the same prev/next row. No
     min-height pin on these, so they only need the sticky treatment. */
  .fc-nav {
    position: sticky;
    bottom: 0;
    background: var(--card, #fff);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Grouped Exams dropdown ──────────────────────────────────────────────
   Two columns: NIC National, and California + language landing pages. The
   selector deliberately chains both classes — every page defines its own
   `.exams-dd-menu { min-width: 230px }` in an inline <style> that loads AFTER
   this file, so a single-class rule here would lose. Two classes outranks it
   without needing !important. */
/* CRITICAL: do NOT set `display` on this selector unconditionally. Pages hide
   the menu with `.exams-dd-menu { display: none }` and reveal it with
   `.exams-dd.open .exams-dd-menu { display: block }`. Because
   `.exams-dd-menu.exams-dd-grouped` is two classes, a bare `display: grid`
   here outranks BOTH and pins the dropdown permanently open on every page.
   The grid must therefore be applied only in the open state, at a specificity
   that still beats the page-level `.exams-dd.open .exams-dd-menu` rule. */
/* WIDTH: a DEFINITE width first, then split it. This is the second attempt and
   the first one is worth recording, because the failure was not obvious.

   Attempt 1 used `grid-template-columns: repeat(2, minmax(0,250px))` plus a
   max-width. That collapsed both menus to ~40px columns with the text
   overlapping. The reason: .exams-dd-menu is position:absolute with width:auto,
   so its width is SHRINK-TO-FIT — the box is sized from its contents. Tracks
   whose maximum is a fixed length contribute nothing content-derived for that
   algorithm to measure, and min-width:0 removed the floor, so the box shrank
   toward nothing and the content spilled out of it.

   `width` breaks the circularity: the box is 560px because it is told to be,
   the two 1fr tracks divide that, and long labels wrap inside their column
   rather than setting the width themselves. box-sizing:border-box is global
   (line 52), so the 16px padding is inside the 560.

   100vw - 32px caps it on a narrow viewport; below 860px the media query at the
   bottom of this block drops it to a single column anyway. */
.exams-dd-menu.exams-dd-grouped {
  width: min(560px, calc(100vw - 32px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  min-width: 0;
  padding: 14px 16px;
}
/* !important, and it is not decoration — without it this rule loses.
   Line 514 of this file sets

       .nav-links a, .exams-dd-toggle, .mobile-menu a { white-space: nowrap !important; ... }

   and every link in this dropdown is a descendant of .nav-links. An !important
   declaration cannot be beaten by specificity alone, so the labels here could
   never wrap no matter how the tracks were sized — which is why the earlier
   attempt to narrow this panel produced a row overflowing into the next column
   ("...adds its own block to the NIC exam  see guide →" landing between Texas'
   Esthetician and Barber) rather than a wrapped label.

   Both !important, so specificity decides: two classes plus an element beats
   one class plus an element, and this wins. Scoped to the grouped menu, so the
   top-level nav links keep their nowrap, which they should. */
.exams-dd-menu.exams-dd-grouped a { white-space: normal !important; }
/* The language pills and the trailing metas must never be what wraps or
   shrinks — they read as broken long before a label does. */
.exams-dd-menu.exams-dd-grouped .dd-langs { flex: none; white-space: nowrap; }
.exams-dd.open .exams-dd-menu.exams-dd-grouped { display: grid; }
.exams-dd-grouped .dd-col { display: flex; flex-direction: column; }
.exams-dd-grouped .dd-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3, #8a7d75);
  padding: 6px 12px 4px;
}
.exams-dd-grouped .dd-label-2 { margin-top: 10px; border-top: 1px solid var(--line, #ece4dd); padding-top: 10px; }
.exams-dd-grouped a {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.exams-dd-grouped .dd-langs {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .06em;
  color: var(--rose, #b8264a);
  background: var(--rose-tint, #fbeaed);
  border-radius: 999px; padding: 2px 7px;
}
@media (max-width: 860px) {
  .exams-dd-menu.exams-dd-grouped { grid-template-columns: 1fr; gap: 2px; }
  .exams-dd.open .exams-dd-menu.exams-dd-grouped { display: grid; }
}

/* ── Exam page, narrow viewports ─────────────────────────────────────────
   Measured on an iPhone-sized viewport (402 x 874) against the live page.

   1. THE MODE ROW WRAPPED. Four controls — Study mode 104, Exam mode 101,
      ✦ Hint 122, Rationale 86 — need 413px inside a 354px row, so Rationale
      dropped to a second line on its own. The single biggest lever is the
      tutor pill's min-width:122px, which exists to stop the pill resizing as
      its label cycles Hint/Explain/AI Tutor; on a phone that stability is
      worth less than the row fitting, so it is released and the padding
      tightened.

   2. THE CHAT BUBBLE COVERED "NEXT". Fixed at bottom:20px right:20px, it
      overlapped the Next button by 31px horizontally and 47px vertically —
      the button was still tappable at its left edge, but the label read
      "Nex". Lifted above the question nav on the pages that have one.

   Both rules are more specific than the per-page inline <style> that would
   otherwise win by load order: .mode-row .mode-toggle .mode-btn is three
   classes against that file's two. */
@media (max-width: 560px) {
  /* 3. THE QUESTION NAV HAD NO ROOM. Previous 100 + counter 135 + Next 77 =
     312px in a 312px row: the three sat edge to edge with nothing between
     them, so the counter wrapped to two lines and read as colliding with both
     buttons. On a phone the counter is the least urgent of the three, so it
     moves to its own line underneath and the buttons get the row to
     themselves.

     .q-card .q-nav rather than .q-nav, because the per-page inline <style>
     defines .q-nav and loads after this file — two classes beat one. */
  .q-card .q-nav { flex-wrap: wrap; gap: 12px; }
  .q-card .q-nav .q-nav-info { order: 3; flex: 0 0 100%; text-align: center; }

  .mode-row .mode-toggle .mode-btn { padding: 8px 10px; font-size: 13px; }
  .mode-row .mode-toggle .ncp-tutor-pill { min-width: 0; }
  #nicprep-chat-bubble.ncp-lift { bottom: 96px; }
}

/* ── Catalogue dividers: NIC vs non-NIC (state-specific) ─────────────────
   California uses its own PSI exam, not the NIC. Mixing those products into
   one grid implies they are interchangeable, which is the single most costly
   misunderstanding a candidate can have here — they buy the wrong prep. */
.catalog-divider { margin: 44px 0 20px; max-width: 760px; }
.catalog-divider-first { margin-top: 8px; }
.catalog-divider-h {
  font-family: var(--display, Georgia, serif);
  font-size: 26px; font-weight: 500; letter-spacing: -0.015em;
  margin: 8px 0 0; color: var(--ink, #1c1410);
}
.catalog-divider-p { font-size: 15px; color: var(--ink-2, #5a4e48); line-height: 1.6; margin: 8px 0 0; }
.exam-grid-ca { margin-top: 4px; }
/* Single-price products show one tier chip, not three. */
.exam-tier.ca-single { display: inline-flex; flex-direction: column; align-items: flex-start; }


/* ── Checkout modal ──────────────────────────────────────────────────────
   Lifted out of california.html, which was the only page defining it inline.
   /es.html, /vi.html and /ko.html now host their own checkout so they can sell
   in their own language, and without these rules the modal renders as
   unstyled markup sitting permanently in the page flow — there is no
   display:none to hide it. Shared here rather than copied into three pages. */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(28, 20, 16, 0.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
  .modal-backdrop.show { display: flex; }
  .modal { background: var(--card); border-radius: var(--radius-lg); padding: 36px 32px; max-width: 460px; width: 100%; box-shadow: 0 24px 64px -16px rgba(40,20,30,0.3); }
  .modal-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--rose); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
  .modal h2 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 12px; }
  .modal p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 18px; }
  .modal-actions { display: flex; gap: 10px; margin-top: 8px; }
  .btn-cancel { background: transparent; color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; font-weight: 500; font-size: 14px; font-family: var(--body); cursor: pointer; }
  .feedback { font-size: 13px; padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; }
  .feedback.bad { background: var(--rose-tint); color: var(--rose-ink); }

/* ── Nav dropdowns open on hover (mouse only) ────────────────────────────
   Scoped to (hover: hover) and (pointer: fine) so touch devices keep the
   existing click toggle — on a touchscreen a tap registers as both hover and
   click, which would open and immediately close the menu. :focus-within keeps
   it reachable by keyboard. The click handler stays in place for both. */
@media (hover: hover) and (pointer: fine) {
  .exams-dd:hover .exams-dd-menu,
  .exams-dd:focus-within .exams-dd-menu { display: block; }
  .exams-dd:hover .exams-dd-menu.exams-dd-grouped,
  .exams-dd:focus-within .exams-dd-menu.exams-dd-grouped { display: grid; }
  .exams-dd:hover .exams-dd-toggle .caret,
  .exams-dd:focus-within .exams-dd-toggle .caret { transform: rotate(180deg); }

  /* The menu sits ~12px below the toggle. Without something spanning that gap
     the pointer crosses dead space on its way down and the menu closes before
     it can be reached. This invisible bridge keeps :hover alive across it. */
  .exams-dd::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────
   FREE-PREVIEW WIDGET  (§12a)

   Markup comes from /_preview-widget.js and deliberately reuses the paid
   pages' class names. These rules are ported from <modality>-exam*.html
   (.q-card, .opt-btn, .rationale, .q-nav) and <modality>-flashcards-*.html
   (.fc-toolbar, .fc-card-wrap, .fc-face, .fc-fmt), with those files'
   --font-display / --font-sans / --font-mono / --shadow-card mapped onto the
   tokens this stylesheet defines.

   Everything is scoped to #preview-section: the exam and flashcard apps ship
   these same class names for real, and an unscoped copy here would reach them.
   ───────────────────────────────────────────────────────────── */

/* Placement — full-width section under the hero. */
#preview-section #preview { margin: 24px 0 0; color: var(--ink); }
#preview-section .preview-head { max-width: 720px; }

/* The two-column hero variant (texas/california, until they follow). */
.ca-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ca-hero-copy { min-width: 0; }
.ca-hero-preview { min-width: 0; }
.eyebrow-on-dark { color: var(--rose-soft, #f8dde4); }
.ca-hero-preview-lede { font-size: 14px; line-height: 1.6; opacity: .78; margin: 10px 0 0; max-width: 46ch; }
#preview-section .ca-hero-preview #preview { max-width: 560px; margin: 14px 0 0; }
@media (max-width: 980px) {
  .ca-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  #preview-section .ca-hero-preview #preview { max-width: 640px; margin: 14px auto 0; }
}

/* Mode toggle — Practice Test / Flashcard */
#preview-section .preview-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: clip; background: var(--card); }
#preview-section .preview-toggle button { padding: 9px 26px; border: none; background: transparent; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: .15s; }
#preview-section .preview-toggle button.active { background: var(--ink); color: #fff; }

/* ── Quiz — .q-card, ported from the paid exam pages ── */
#preview-section .q-card { display: flex; flex-direction: column; margin-top: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); padding: 32px; box-shadow: var(--shadow-md); }
#preview-section .q-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
#preview-section .q-num { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
#preview-section .q-domain { display: inline-block; border-radius: 999px; background: var(--rose-soft); padding: 4px 12px; font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rose-ink); margin-left: 12px; }
#preview-section .q-stem { margin-top: 24px; font-family: var(--display); font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
#preview-section .options { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
#preview-section .opt-btn { display: flex; align-items: center; gap: 16px; width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 16px; text-align: left; cursor: pointer; transition: all .15s; color: var(--ink); font-family: var(--body); -webkit-appearance: none; appearance: none; }
#preview-section .opt-btn:hover:not(:disabled) { border-color: var(--ink-3); background: rgba(244,235,226,0.4); }
#preview-section .opt-btn:disabled { cursor: default; }
#preview-section .opt-btn.correct { border-color: var(--sage); background: rgba(94,117,88,0.1); }

/* NICPREP_PREVIEW_EXAM_MODE — the preview gains the Study/Exam pair the paid
   pages have, so "the same study modes you get after checkout" is true. Exam
   mode shows the pick without grading it, and runs a clock. Ported here the same
   way the rest of the exam component was, scoped to the preview. */
#preview-section .opt-btn.selected { border-color: var(--ink-2); background: var(--cream, rgba(244,235,226,0.6)); }
#preview-section .opt-btn.selected .opt-letter { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
/* The preview's own dialog — a marketing page must never raise a browser
   confirm(), which renders unstyled at the top of the window. */
#preview-section ~ .pv-dlg-wrap, .pv-dlg-wrap { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28,20,16,.45); }
.pv-dlg { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; max-width: 440px; width: 100%; box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.pv-dlg-text { font-size: 15.5px; line-height: 1.55; color: var(--ink); font-family: var(--body); }
.pv-dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.pv-dlg-btn { font-family: var(--body); font-size: 14px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.pv-dlg-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Right-aligned so the pill's right edge lines up with the question card,
   as the control row does on the paid pages. */
#preview-section .preview-top-row { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
#preview-section .preview-top-row .preview-toggle { margin-left: auto; }
/* The control row has to fit the preview's ~686px column on one line: at the
   paid pages' sizing it needs ~710px and flex-wrap drops the clock onto its own
   row. Scaled down here rather than allowed to wrap. */
#preview-section .preview-top-row .preview-toggle button { padding: 8px 16px; font-size: 12.5px; }
#preview-section .preview-top-row .preview-toggle .pv-tutor { padding: 8px 14px; font-size: 12.5px; }
/* Slimmer than the pill and lifted clear of it, per the design call: opts out
   of the row's stretch so its height is its own. */
#preview-section .preview-top-row .exam-timer { align-self: flex-start; height: 27px; box-sizing: border-box; padding: 0 12px; gap: 8px; position: relative; top: 5px; }
#preview-section .preview-top-row .exam-timer-label { font-size: 10px; }
#preview-section .preview-top-row .exam-timer-val { font-size: 13.5px; }
/* One pill holds every toggle — format, study/exam and the tutor — the way the
   paid pages group Study / Exam / Hint / Rationale together. */
#preview-section .preview-toggle { align-items: center; }
#preview-section .preview-toggle button[data-qmode].active { background: var(--ink); color: #fff; }
#preview-section .preview-toggle .pv-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
#preview-section .preview-toggle .pv-tutor { padding: 9px 22px; border: none; background: transparent; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--rose, #b8264a); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#preview-section .preview-toggle .pv-tutor:hover { background: var(--rose-tint, #fdf2f5); }
/* Five nowrap buttons make the pill ~385px, wider than a phone's content
   column, and the pill was the one thing on the page pushing every page into
   a sideways scroll at 390px. Below 520px it wraps into two rows instead. */
@media (max-width: 520px) {
  #preview-section .preview-toggle { flex-wrap: wrap; max-width: 100%; border-radius: 18px; justify-content: center; }
  #preview-section .preview-toggle .pv-sep { display: none; }
}
#preview-section .exam-timer { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
#preview-section .exam-timer-label { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
#preview-section .exam-timer-val { font-family: var(--mono, ui-monospace, monospace); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
#preview-section .exam-timer.crit, #preview-section .exam-timer.over { background: var(--rose, #b8264a); border-color: var(--rose, #b8264a); }
#preview-section .exam-timer.crit .exam-timer-label, #preview-section .exam-timer.over .exam-timer-label { color: rgba(255,255,255,.8); }
#preview-section .exam-timer.crit .exam-timer-val, #preview-section .exam-timer.over .exam-timer-val { color: #fff; }
#preview-section .opt-btn.wrong { border-color: var(--rose); background: var(--rose-tint); }
#preview-section .opt-letter { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
#preview-section .opt-btn.correct .opt-letter { background: var(--sage); color: #fff; border-color: var(--sage); }
#preview-section .opt-btn.wrong .opt-letter { background: var(--rose); color: #fff; border-color: var(--rose); }
#preview-section .opt-text { flex: 1; font-size: 15px; }
#preview-section .opt-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
#preview-section .opt-tag.correct { color: var(--sage); }
#preview-section .opt-tag.wrong { color: var(--rose); }
#preview-section .rationale { margin-top: 20px; border-radius: 12px; padding: 20px; border-left: 2px solid; }
#preview-section .rationale.is-correct { border-color: var(--sage); background: rgba(94,117,88,0.05); }
#preview-section .rationale.is-wrong { border-color: var(--rose); background: rgba(251,234,238,0.4); }
#preview-section .rationale-label { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
#preview-section .rationale-label.correct { color: var(--sage); }
#preview-section .rationale-label.wrong { color: var(--rose); }
#preview-section .rationale-text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
#preview-section .q-nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
#preview-section .q-nav-info { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
#preview-section .btn-prev, #preview-section .btn-next { border: none; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 500; font-family: var(--body); cursor: pointer; transition: all .15s; }
#preview-section .btn-prev { border: 1px solid var(--line); background: transparent; color: var(--ink); }
#preview-section .btn-prev:disabled { opacity: 0.4; cursor: default; }
#preview-section .btn-next { background: var(--ink); color: #fff; }
#preview-section .btn-next:hover:not(:disabled) { background: #2c211c; }
#preview-section .btn-next:disabled { opacity: 0.4; cursor: default; }

/* Score + email capture */
#preview-section .quiz-score { text-align: center; padding: 24px 0 8px; }
#preview-section .quiz-score .score-num { font-family: var(--display); font-size: 36px; font-weight: 600; color: var(--ink); }
#preview-section .quiz-score .score-label { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
#preview-section .quiz-score .score-msg { font-size: 14px; color: var(--ink-2); margin-top: 12px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.5; }
#preview-section .quiz-score .score-cta { display: inline-block; margin-top: 16px; padding: 12px 24px; background: var(--rose); color: #fff; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none; }
#preview-section .quiz-score .score-domain-table { width: 100%; border-collapse: collapse; margin: 14px 0 0; text-align: left; }
#preview-section .quiz-score .score-domain-table td { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
#preview-section .quiz-score .score-domain-table td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
#preview-section .ec-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-top: 20px; text-align: left; }
#preview-section .ec-row { display: flex; gap: 10px; margin-top: 14px; }
#preview-section .ec-input { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-family: var(--body); color: var(--ink); outline: none; min-width: 0; background: var(--card); }
#preview-section .ec-input:focus { border-color: var(--rose); }
#preview-section .ec-submit { padding: 10px 18px; background: var(--rose); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: var(--body); cursor: pointer; white-space: nowrap; transition: background .14s; }
#preview-section .ec-submit:hover { background: var(--rose-ink); }
#preview-section .ec-submit:disabled { opacity: .6; cursor: default; }
#preview-section .ec-note { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 10px; letter-spacing: .04em; }
#preview-section .ec-confirm { color: #5e7558; font-size: 14px; margin-top: 10px; display: none; }

/* ── Deck — .fc-* ported from the paid flashcard pages ── */
#preview-section .flash-preview { display: none; }
#preview-section .flash-preview.visible { display: block; }
#preview-section .fc-toolbar { margin-top: 24px; border-radius: 20px; background: var(--ink); padding: 20px 24px; color: #fbf7f4; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
#preview-section .fc-toolbar .fc-num { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(251,247,244,.72); }
#preview-section .fc-fmt { display: inline-flex; background: rgba(251,247,244,.12); border-radius: 999px; padding: 3px; gap: 2px; }
#preview-section .fc-fmt-opt { appearance: none; border: 0; cursor: pointer; font-family: var(--body); font-size: 12.5px; font-weight: 600; color: rgba(251,247,244,.72); background: transparent; border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
#preview-section .fc-fmt-opt:hover { color: #fbf7f4; }
#preview-section .fc-fmt-opt.is-active { background: #fbf7f4; color: var(--ink); }

#preview-section .fc-card-wrap { margin-top: 20px; perspective: 1200px; cursor: pointer; }
#preview-section .fc-card-inner { display: grid; grid-template-areas: "stack"; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
#preview-section .fc-card-wrap.is-flipped .fc-card-inner { transform: rotateY(180deg); }
#preview-section .fc-face { grid-area: stack; border-radius: 20px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-md); padding: 40px; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 340px; }
#preview-section .fc-face.back { transform: rotateY(180deg); padding-top: 28px; }
#preview-section .fc-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
#preview-section .fc-sub { display: inline-block; border-radius: 999px; background: var(--rose-soft); padding: 4px 12px; font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rose-ink); }
#preview-section .fc-q-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 0 12px; }
#preview-section .fc-q-eyebrow, #preview-section .fc-ans-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--rose-ink); }
/* The term carries the display treatment wherever it lands — front in Learn,
   back in Guess. The definition is supporting text either way. */
#preview-section .fc-q, #preview-section .fc-ans-primary { font-family: var(--body); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ink-2); letter-spacing: 0; max-width: 720px; }
#preview-section .fc-q.is-term, #preview-section .fc-ans-primary.is-term { font-family: var(--display); font-size: clamp(28px, 3.4vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
#preview-section .fc-hint { margin-top: 24px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); text-align: center; }
#preview-section .fc-ans { margin-top: 18px; flex: 1; display: flex; flex-direction: column; }
#preview-section .fc-ans-primary { margin-top: 8px; }
#preview-section .fc-mn { margin-top: 20px; border-radius: 12px; padding: 18px 20px; border-left: 2px solid var(--rose); background: var(--rose-tint); }
#preview-section .fc-mn-label { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rose-ink); }
#preview-section .fc-mn-hook { margin-top: 8px; font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--ink); }
#preview-section .fc-nav { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#preview-section .flash-cta-row { text-align: center; margin-top: 18px; }
#preview-section .flash-cta-row a { font-size: 13.5px; font-weight: 600; color: var(--rose); }

@media (max-width: 720px) {
  #preview-section .q-card, #preview-section .fc-face { padding: 24px; }
  #preview-section .q-stem { font-size: 22px; }
  #preview-section .ec-row { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT CARDS — the dark catalog tile (§13)

   Scoped to .prep-grid on purpose. index.html used to ship a different,
   unrelated .exam-card (the homepage tile with mini price buttons); that tile
   is gone, but the scope stays so a page-level .exam-card can never collide
   with the catalog tile on class name alone.
   ───────────────────────────────────────────────────────────── */
.prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
/* A lone product is the page's whole offer, so it is one horizontal card
   across the row rather than a 480px tower beside an empty column. On a wide
   screen its checklist flows in two columns; the list must be a block for
   multi-column to apply, so the flex gap becomes a margin. */
@media (min-width: 820px) {
  .prep-grid > .exam-card:only-child .exam-checklist { display: block; columns: 2; column-gap: 30px; }
  .prep-grid > .exam-card:only-child .exam-checklist li { break-inside: avoid; margin-bottom: 10px; }
}

.prep-grid .exam-card { background: #1f150f; color: #f2e9e3; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-xl); padding: 34px 32px; box-shadow: 0 40px 80px -50px rgba(20,8,12,0.7); position: relative; display: flex; flex-direction: column; }
.prep-grid .exam-card .domain-label { font-family: var(--mono); font-size: 11px; color: #9d8d83; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.prep-grid .exam-card h3 { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -0.018em; margin: 6px 0 0; line-height: 1.1; color: #fdf8f5; }
.prep-grid .exam-card .ca-price { background: var(--rose); border-radius: 12px; padding: 13px 20px; margin: 18px 0 0; align-self: flex-start; display: flex; align-items: baseline; gap: 8px; }
.prep-grid .exam-card .ca-price-num { font-family: var(--display); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.prep-grid .exam-card .ca-price-note { color: rgba(255,255,255,0.85); font-size: 12px; }
/* The price pill is a flex row of amount + note. The note was wrapping to a
   second line on every card in every language — most visibly in Spanish,
   where "un solo pago · acceso de por vida" is twice the length of the
   English. Keep it on one line and let the pill size to its content. */
.ca-price, .exam-card .ca-price { flex-wrap: nowrap; max-width: 100%; }
/* The price pill is now the card's second buy control — it was the most
   prominent thing on the card and did nothing when clicked. Each one mirrors
   its own card's btn-buy: a <button> running the same openCheckout where the
   card has one, an <a> to the same href where the card links out instead. It is
   never guessed from a product id.

   These reset what the element type brings with it; the look still comes from
   .prep-grid .exam-card .ca-price above, which sets background and padding and
   is more specific than both. */
button.ca-price, a.ca-price { border: 0; font: inherit; cursor: pointer; text-align: left; text-decoration: none; }
button.ca-price:hover, a.ca-price:hover { filter: brightness(1.08); }
button.ca-price:focus-visible, a.ca-price:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ca-price-note { white-space: nowrap; }

/* .exam-tier stacks its label above the amount because the grid was built for
   three tiers side by side. Where only one tier is offered — every card on the
   language pages — that stacking reads as a price broken across two lines. With
   nothing to align to, lay the single tier out as a row. */
.exam-tiers:has(> .exam-tier:only-child) { grid-template-columns: max-content; }
.exam-tier:only-child { flex-direction: row; align-items: baseline; gap: 9px; padding: 10px 18px; }
.exam-tier:only-child .tier-price { margin-top: 0; }

/* The buy label carries the price, and a long product name pushed it onto a
   second line — "Comprar Texas Cosmetología · $59" then broke before the
   arrow. Let the label shrink a little rather than wrap. */
.exam-card .btn-buy { white-space: nowrap; font-size: clamp(13px, 1.15vw, 15px); padding-inline: 14px; }
@media (max-width: 520px) { .exam-card .btn-buy { white-space: normal; font-size: 14px; } }
@media (max-width: 460px) { .ca-price { padding: 11px 14px; gap: 6px; }
  .ca-price-num { font-size: 27px; } .ca-price-note { font-size: 11px; } }
.prep-grid .exam-card .exam-meta { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; color: #9d8d83; letter-spacing: 0.06em; text-transform: uppercase; }
/* Every pill-shaped label on a card is the same sage: the outline badge, the
   availability badge and the language pills. Owner, 16 Sep 2026: "make them all
   the same" — the badge had been maroon while the pills were green. */
.prep-grid .exam-card .freshness-badge { background: var(--sage); color: #fff; margin-top: 14px; }
.prep-grid .exam-card .freshness-badge::before { background: rgba(255,255,255,0.85); }
.prep-grid .exam-card .exam-checklist { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.prep-grid .exam-card .exam-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.prep-grid .exam-card .exam-checklist .check { width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0; margin-top: 1px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.prep-grid .exam-card .exam-checklist li .text { color: #cdbfb6; }
.prep-grid .exam-card .grow { flex: 1; }
.prep-grid .exam-card .ca-lang-pills { margin: 16px 0 2px; }
.prep-grid .exam-card .lang-available-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--sage); color: #fff; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 8px 14px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.prep-grid .exam-card .lang-available-pill:hover { background: #6d8767; color: #fff; }
/* font-size is a clamp here, not 15px. `.exam-card .btn-buy` above sets
   clamp(13px,1.15vw,15px) precisely so a long label can shrink to fit, but this
   rule is more specific AND later, so it silently pinned the size back to 15px
   while white-space:nowrap stayed in force — "Get PSI National Manicurist Prep
   · $59" then overflowed its own button and was clipped at the card edge.
   Same clamp, applied where it actually wins. */
.prep-grid .exam-card .btn-buy { width: 100%; box-sizing: border-box; cursor: pointer; background: var(--rose); color: #fff; margin-top: 22px; padding: 15px 14px; font-size: clamp(12.5px, 1.05vw, 15px); font-family: var(--body); font-weight: 600; border: none; border-radius: 12px; text-align: center; display: block; }
.prep-grid .exam-card .btn-buy:hover { background: var(--rose-ink); }
.prep-grid .exam-card .btn-preview { margin-top: 12px; text-align: center; text-decoration: underline; padding: 6px; font-size: 12.5px; font-weight: 500; color: #f2e9e3; display: block; }
.prep-grid .exam-card .btn-preview:hover { color: #fff; }

/* Availability badges + the "coming soon" variant */
.prep-grid .avail-badge { position: absolute; top: 22px; right: 24px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.prep-grid .avail-badge.live { background: var(--sage); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
.prep-grid .avail-badge.soon { background: rgba(255,255,255,0.08); color: #cdbfb6; border: 1px solid rgba(255,255,255,0.14); }
/* The badge is pinned top-right, so a long domain label ("Texas · Cosmetology
   Operator", "California · Esthetician") ran underneath it. Reserve the badge's
   width on the label and let the label wrap instead. */
.prep-grid .exam-card:has(> .avail-badge) .domain-label { padding-right: 140px; }
.prep-grid .exam-card.soon { background: #1a120d; box-shadow: 0 30px 70px -55px rgba(20,8,12,0.6); }

/* Shared-features strip under a .prep-grid. Every card in a family shares the
   same rationales / tutor / preview / language promise; printing it on each
   card made three-card grids read as three copies of one list. The card keeps
   only what differs (bank, counts, structure, weights); the strip states the
   common part once, directly under the grid. */
.prep-includes { margin-top: 18px; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.prep-includes .prep-includes-label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); flex-basis: 100%; }
.prep-includes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 8px 26px; }
.prep-includes li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.prep-includes li::before { content: "✓"; width: 16px; height: 16px; border-radius: 999px; flex-shrink: 0; margin-top: 2px; background: var(--rose); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (min-width: 700px) { .prep-includes .prep-includes-label { flex-basis: auto; } .prep-includes ul { flex: 1; } }

/* Waitlist on a "not covered" product card. The card already says why there
   is no bank; this is the one thing a visitor can do about it, so it sits on
   the card in the prep section — not in the newsletter band at the foot of
   the page. Submit handling is _waitlist.js (source ends in _waitlist, which
   the capture endpoint files as a notify signup). */
.prep-notify { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.price-card.featured .prep-notify { border-top-color: rgba(251,247,244,.16); }
.prep-notify-t { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 9px; }
.prep-notify form { display: flex; gap: 8px; }
.prep-notify input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.prep-notify input:focus { outline: none; border-color: var(--rose); }
.prep-notify button { padding: 10px 14px; background: var(--rose); color: #fff; border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.prep-notify button:hover { background: var(--rose-ink); }
.prep-notify-msg { font-size: 13px; margin: 8px 0 0; min-height: 16px; color: var(--ink-3); }
.prep-notify-msg.is-good { color: var(--sage); }
.prep-notify-msg.is-bad { color: var(--rose); }
.prep-grid .exam-card.soon h3 { color: #ece0d8; }
/* Coming-soon cards carry the launch price, but muted rather than the solid
   rose of a card you can actually buy — the price is a promise, not an offer. */
.prep-grid .exam-card.soon .ca-price { background: rgba(184,38,74,0.2); border: 1px solid rgba(184,38,74,0.42); }
.prep-grid .exam-card.soon .ca-price-note { color: #e3d2d6; }
/* Language pills on a coming-soon card are labels, not links: these editions
   are not purchasable yet, so nothing to click through to. */
.prep-grid .exam-card.soon .lang-planned-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.07); color: #cdbfb6; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; padding: 8px 14px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.prep-grid .exam-card.soon .exam-checklist .check { background: rgba(255,255,255,0.1); color: #cdbfb6; }
.prep-grid .exam-card.soon .btn-buy { background: rgba(255,255,255,0.09); color: #f2e9e3; border: 1px solid rgba(255,255,255,0.16); }
.prep-grid .exam-card.soon .btn-buy:hover { background: rgba(255,255,255,0.16); }
.prep-grid .exam-card.soon .btn-preview { color: #b7a89f; }
.prep-grid .exam-card.soon .btn-preview:hover { color: #fff; }

/* Wordmark attribution — product name plus the company behind it. Kept inline
   with the logo at a smaller size and body weight so "NICPrep" still reads as
   the logo and "by PassAllPrep" as its subtitle. Dropped on narrow phones,
   where the nav bar has no room to spare. */
.brand-word .brand-by,
.brand-wordmark .brand-by {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .brand-word .brand-by,
  .brand-wordmark .brand-by { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   EXAM ROUTER — "Which exam are you taking?"

   Sits between the hero and the product cards on modality pages. A candidate
   searching "cosmetology practice test" shouldn't have to work out whether they
   need NIC, CA or TX prep; this sorts them before they buy the wrong one.

   State-specific products carry a badge so they read as different exams, not
   different tiers of the same one.
   ───────────────────────────────────────────────────────────── */
.router-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: 26px; }

.router-card { display: flex; flex-direction: column; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px 20px; transition: border-color .14s, box-shadow .14s, transform .14s; }
a.router-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.router-name { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.router-scope { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 7px; }
.router-facts { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 12px; }
.router-langs { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 5px; }
.router-card .grow { flex: 1; }
.router-cta { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--rose); }
a.router-card:hover .router-cta { color: var(--rose-ink); }

/* State-specific: a different exam, not a different tier. */
.router-badge { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--rose-soft); color: var(--rose-ink); }
.router-card.is-state { border-color: var(--rose-soft); background: linear-gradient(var(--card), var(--card)) padding-box, var(--card); }
.router-card.is-state .router-name { padding-right: 96px; }

/* Not purchasable yet — muted, and not a link. */
.router-card.is-soon { background: var(--bg); border-style: dashed; }
.router-card.is-soon .router-name { color: var(--ink-2); }
.router-card.is-soon .router-badge { background: var(--line); color: var(--ink-3); }

.router-foot { margin-top: 20px; font-size: 13.5px; color: var(--ink-2); }
.router-foot a { color: var(--rose); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.router-foot a:hover { color: var(--rose-ink); }

/* Modalities with no state-specific edition yet — a note, not a grid. */
.router-note { margin-top: 26px; background: var(--cream); border-left: 3px solid var(--rose); border-radius: 0 10px 10px 0; padding: 18px 22px; }
.router-note h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.router-note p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.router-note a { color: var(--rose); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Hero stats grouped by exam.

   A modality page that covers more than one exam was listing every figure in
   one wrapping row, so "8 CA practice tests" landed on the NIC line and "880 CA
   questions" wrapped alone underneath — the reader couldn't tell which number
   belonged to which exam, which is the one thing these pages exist to answer.
   Each exam now gets its own labelled row. */
.hero-dark-meta.by-exam { flex-direction: column; align-items: stretch; gap: 14px; }
.hero-dark-meta .meta-row { display: flex; align-items: baseline; gap: 30px; flex-wrap: wrap; }
.hero-dark-meta .meta-row-label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-soft, #f8dde4); flex: 0 0 auto; min-width: 74px; }
@media (max-width: 520px) {
  .hero-dark-meta .meta-row { gap: 20px; }
  .hero-dark-meta .meta-row-label { flex-basis: 100%; min-width: 0; margin-bottom: -6px; }
}

/* Hero CTA row.

   The modality pages gained .hero-btns markup without the rule texas/california
   carry inline, so the button sat flush against the stat row above it — worst on
   the by-exam layout, where the last row's labels run right into it. */
.hero-dark .hero-btns { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-dark .hero-dark-meta.by-exam + .hero-btns { margin-top: 30px; }

/* Nav collapse threshold.

   The nav carries nine links plus the brand and the access pill — about 1030px
   of content — but only collapsed to the hamburger at 720px. Between 721px and
   ~1020px it overflowed its container and forced the whole document to 1020px
   wide, so the page scrolled horizontally on tablets, small laptops, and any
   window at browser zoom. Collapse before that band instead of inside it.

   !important because each page repeats .nav-links in its own inline <style>,
   which loads after this file and would otherwise win. */
@media (max-width: 1040px) {
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
}

/* Full-width hero proportions.

   .hero-dark h1 is sized for a half-width column (clamp(48px,7vw,84px)); at
   84px across a 900px measure with nothing beside it, the same type reads about
   twice as large as it does on the pages that still split the hero. Scale the
   headline back and give the supporting copy a real measure so the block reads
   as one column rather than three ragged ones. Scoped to the full-width variant
   so the two-column pages are untouched. */
.hero-dark-inner:not(.ca-hero-grid) h1 { font-size: clamp(38px, 4.4vw, 62px); max-width: 20ch; }
.hero-dark-inner:not(.ca-hero-grid) .lede { max-width: 62ch; }
.hero-dark-inner:not(.ca-hero-grid) .hero-dark-meta { max-width: 680px; }

/* ─────────────────────────────────────────────────────────────
   HERO ASIDE — the exam router, moved into the hero's right column

   Copy keeps its left-aligned measure and the space beside it carries the
   routing decision, rather than the reader having to scroll to find it. Same
   shape as the tools panel on the homepage: ink card, compact rows.
   ───────────────────────────────────────────────────────────── */
.hero-dark-inner.has-aside { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hero-dark-inner.has-aside .hero-copy-col { min-width: 0; }
.hero-dark-inner.has-aside h1 { max-width: 15ch; }

.hero-router { background: rgba(251,247,244,0.045); border: 1px solid rgba(251,247,244,0.10); border-radius: var(--radius-xl, 24px); padding: 28px 26px; }
/* The shared .eyebrow is a rose-soft pill with rose-ink text — on ink the pill
   disappears and the label would match its own background. Drop the pill. */
.hero-router .eyebrow { background: transparent; padding: 0; color: var(--rose-soft, #f8dde4); }
.hero-router .eyebrow::before { background: var(--rose); }
.hero-router h2 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.15; color: #fdf8f5; margin: 10px 0 8px; }
.hero-router h2 .italic-rose { font-style: italic; color: var(--rose); font-weight: 400; }
.hero-router .hero-router-lede { font-size: 13px; line-height: 1.55; color: #b7a89f; margin-bottom: 16px; }
.hero-router ul { list-style: none; margin: 0; padding: 0; }
.hero-router li { padding: 13px 0; border-top: 1px solid rgba(251,247,244,0.10); }
.hero-router li:first-child { border-top: 0; padding-top: 0; }
.hero-router .r-name { display: block; font-size: 14.5px; font-weight: 600; color: #fdf8f5; }
.hero-router .r-badge { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(184,38,74,0.24); color: #fbe6ea; vertical-align: 2px; }
.hero-router .r-badge.soon { background: rgba(255,255,255,0.08); color: #cdbfb6; }
.hero-router .r-scope { display: block; font-size: 12.5px; line-height: 1.5; color: #b7a89f; margin-top: 3px; }
.hero-router .r-facts { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: #9d8d83; margin-top: 5px; }
.hero-router a.r-cta { display: inline-block; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--rose-soft, #f8dde4); }
.hero-router a.r-cta:hover { color: #fff; }
.hero-router .hero-router-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(251,247,244,0.10); font-size: 12.5px; color: #b7a89f; }
.hero-router .hero-router-foot a { color: var(--rose-soft, #f8dde4); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .hero-dark-inner.has-aside { grid-template-columns: 1fr; gap: 32px; }
  .hero-dark-inner.has-aside h1 { max-width: 18ch; }
}


/* ─────────────────────────────────────────────────────────────
   STATE GUIDE — prep cards lifted to the top

   The per-licence product cards used to sit at the bottom of each modality
   section, so a visitor met four identical blocks at four different scroll
   depths and had to read a whole section to learn prep existed. They now sit
   together near the top, and each modality section links down to its own card.
   ───────────────────────────────────────────────────────────── */
.state-prep { border-bottom: 1px solid var(--line); }
.state-prep .wrap-narrow { padding-top: 40px; padding-bottom: 44px; }
.state-prep-h { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 8px 0 22px; }

/* ── Product card: the state-page "price-card" ───────────────────────────
   The card every state guide sells with — label, name, kind, price line,
   description, checklist, pills, actions — and, from 15 Sep 2026, the card
   the homepage catalogue sells with too. Was a byte-identical 32-rule copy
   in 59 state pages; lives here once now. Grid columns are set by the
   wrapper that uses it (.state-prep, .cat-fam), not here. */
.state-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:40px auto 32px; max-width:1100px; padding:0 48px; }
.state-pricing .price-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; position:relative; }
.state-pricing .price-card.featured { background:var(--ink); color:#fbf7f4; border-color:var(--ink); box-shadow:0 16px 48px -24px rgba(40,20,30,.4); }
.state-pricing .featured-tag { position:absolute; top:-10px; left:24px; font-family:var(--mono); font-size:10px; font-weight:600; color:#fff; background:var(--rose); letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.state-pricing .product-label { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.state-pricing .price-card.featured .product-label { color:#a89890; }
.state-pricing .price-card h3 { font-family:var(--display); font-size:26px; font-weight:500; letter-spacing:-.018em; margin-top:8px; line-height:1.1; color:inherit; max-width:none !important; }
.state-pricing .price-line { display:flex; align-items:baseline; gap:10px; margin-top:14px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.state-pricing .price-card.featured .price-line { border-bottom-color:rgba(251,247,244,.16); }
.state-pricing .price-num { font-family:var(--display); font-size:38px; font-weight:600; letter-spacing:-.028em; line-height:1; color:inherit; }
.state-pricing .price-note { font-size:12.5px; color:var(--ink-3); }
.state-pricing .price-card.featured .price-note { color:#a89890; }
.state-pricing .product-desc { font-size:14px !important; color:var(--ink-2) !important; line-height:1.55 !important; margin:18px 0 !important; max-width:none !important; }
.state-pricing .price-card.featured .product-desc { color:#c9b9b1 !important; }
.state-pricing .checklist { list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 !important; padding:0 !important; max-width:none !important; }
.state-pricing .checklist li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--ink-2); margin-bottom:0 !important; }
.state-pricing .price-card.featured .checklist li { color:#ece4dd; }
.state-pricing .checklist .check { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--rose-soft); color:var(--rose-ink); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; margin-top:1px; }
.state-pricing .price-card.featured .checklist .check { background:var(--rose); color:#fff; }
.state-pricing .grow { flex:1; }
.state-pricing .actions { margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.state-pricing .actions .btn-buy { background:var(--ink); color:#fff !important; border:none; border-radius:10px; padding:12px 18px; font-weight:600; font-size:14px; font-family:var(--body); cursor:pointer; text-align:center; text-decoration:none !important; border-bottom:0 !important; }
.state-pricing .price-card.featured .actions .btn-buy { background:var(--rose); }
.state-pricing .actions .btn-buy:hover { opacity:.9; }
.state-pricing .actions .btn-preview { color:var(--rose) !important; font-size:13.5px; font-weight:500; text-align:center; padding:6px 0; text-decoration:none !important; border-bottom:0 !important; }
.state-pricing .price-card.featured .actions .btn-preview { color:#fbf7f4 !important; }
.state-pricing .actions .btn-preview:hover { color:var(--rose-ink) !important; text-decoration:underline !important; }
.state-pricing .price-card.featured .actions .btn-preview:hover { color:#fff !important; }
@media (max-width:960px) { .state-pricing { grid-template-columns:1fr; max-width:540px; margin-left:auto; margin-right:auto; } }
@media (max-width: 480px) {
  .state-pricing { padding: 0 16px; gap: 12px; }
  .state-pricing .price-card { padding: 24px 20px; }
  .state-pricing .price-card h3 { font-size: 22px; }
  .state-pricing .price-num { font-size: 32px; }
}

/* .state-pricing stays on the wrapper because the page's card CSS is scoped to
   it; these override its own 3-column, max-width-1100, padded layout, which was
   written for a standalone band rather than a column inside .wrap-narrow. */
/* Every state guide carries exactly four licence cards, so auto-fit gave three
   across with the fourth orphaned on its own row. Two-by-two instead. */
.state-prep .state-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; max-width: none; margin: 0; padding: 0; }
@media (max-width: 680px) { .state-prep .state-pricing { grid-template-columns: 1fr; } }
.state-prep .price-card { max-width: none !important; }

/* The licence is the heading, the product name ("Practice Test + Flashcards")
   the supporting line — on the state guides and on the homepage catalogue
   alike, since 15 Sep 2026 the same card. A plain (not-covered) card keeps
   ink text; only the featured card goes to paper. */
.state-pricing .price-card .product-label { font-size: 10px; letter-spacing: .14em; color: #8c7d76; }
.state-pricing .price-card h3 { font-size: 27px; margin-top: 6px; }
.state-pricing .price-card.featured h3 { color: var(--paper, #fbf7f4); }
.state-pricing .price-card .product-kind { margin-top: 6px; font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.state-pricing .price-card.featured .product-kind { color: #a89890; }
@media (max-width: 760px) { .state-pricing .price-card h3 { font-size: 23px; } }
/* Language pills sit inline and wrap, not one full-width bar per language:
   the card is a column flex box, so a bare pill was stretched to the card's
   width. The pill stays SAGE on the dark card too: the 15 Sep redesign swapped
   it for a translucent grey outline and the owner asked for the green back —
   it is the one colour on the card that says "this edition exists". */
/* The price itself is the shortest path to checkout: a button on the homepage
   (opens the checkout modal), a link on the state guides (to the storefront).
   Same look as the static price line, plus a hand cursor and a hover lift. */
button.price-line, a.price-line { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 18px; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.state-pricing .price-card.featured button.price-line, .state-pricing .price-card.featured a.price-line { border-bottom-color: rgba(251,247,244,.16); }
button.price-line:hover .price-num, a.price-line:hover .price-num { color: var(--rose); }
.state-pricing .price-card .price-line + .checklist { margin-top: 18px !important; }
.state-pricing .price-card .ca-lang-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.state-pricing .price-card .ca-lang-pills .lang-available-pill { margin: 0; }
.state-pricing .price-card.featured .lang-available-pill { background: var(--sage); color: #fff; border: 1px solid rgba(255,255,255,0.08); padding: 8px 14px; font-size: 10.5px; letter-spacing: 0.05em; }
.state-pricing .price-card.featured .lang-available-pill:hover { background: #6d8767; color: #fff; opacity: 1; }



/* The hero's table of contents routes to the licence sections; this sends the
   visitor to the free preview instead, before they've read anything. Sits on
   the dark hero, so it can't borrow .mod-prep-cta's light-background colours. */
.state-hero .toc-preview-cta { display: inline-block; margin-top: 14px; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--rose); border-bottom: 1px solid rgba(199,62,90,.45); padding-bottom: 2px; }
.state-hero .toc-preview-cta:hover { color: #fff; border-bottom-color: rgba(251,247,244,.6); }

/* Free preview, directly under the product cards. */
.state-preview .lede { max-width: 68ch; }
.state-preview .state-prep-h { margin-bottom: 14px; }

/* The index ran the preview across the full 1104px content column, where the
   state guides run it at 800. A question card that wide stretches four answer
   rows across a measure they don't need and reads nothing like the paid page.
   Same proportions as the state guides. */
.preview-narrow .section { max-width: 880px; }
@media (max-width: 900px) { .preview-narrow .section { max-width: none; } }
/* At 800px the two-column head strands the lede in a 360px column with half the
   row empty, and the mode buttons wrap "Practice Test" onto two lines. */
.preview-narrow .section-head { display: block; }
.preview-narrow .section-head .lede { max-width: 62ch; margin-top: 10px; }
.preview-narrow .preview-toggle button { white-space: nowrap; }


/* The verification note spells out the board's URL inline; a few of them are
   long enough to push the page sideways on a phone (Maine, Nebraska). */
.disclaimer { overflow-wrap: anywhere; }



.mod-prep-cta { margin-top: 26px; }
.mod-prep-cta a { font-size: 14.5px; font-weight: 600; color: var(--rose); border-bottom: 1px solid var(--rose-soft); padding-bottom: 2px; }
.mod-prep-cta a:hover { color: var(--rose-ink); border-bottom-color: var(--rose); }

/* ── Study-in-your-language band ─────────────────────────────────────────
   Shared, because it goes on the selling pages AND the 61 state guides, and
   those are two different design systems. Only the custom properties above
   are common to both, so this borrows no page component and defines its own
   layout from tokens. Generated markup: scripts/build_tutor_band.py */
.tutor-langs{border-top:1px solid var(--line);background:var(--card)}
.tl-inner{max-width:1080px;margin:0 auto;padding:56px 32px}
.tl-eyebrow{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);font-weight:600}
.tl-h{font-family:var(--display);font-size:clamp(25px,3vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:12px 0 0}
.tl-h em{font-style:italic;color:var(--rose);font-weight:400}
.tl-p{font-family:var(--body);font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:16px 0 0;max-width:760px}
.tl-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.tl-list li{display:flex;align-items:baseline;gap:6px;background:var(--rose-tint);border:1px solid var(--rose-soft);border-radius:999px;padding:7px 14px}
.tl-native{font-family:var(--body);font-size:14.5px;font-weight:600;color:var(--rose-ink)}
.tl-en{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tl-note{font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:18px 0 0;max-width:760px}
.tl-note a{color:var(--rose);font-weight:600;text-decoration:none}
.tl-note a:hover{text-decoration:underline}
@media(max-width:640px){.tl-inner{padding:40px 20px}}

/* ── Tutor hero — build_tutor_band.py writes it under the page's own hero on
   the homepage and the nine product hubs. Cream on purpose: the hub heroes are
   dark, and a second dark block would read as part of the first. Tokens only,
   no page component, so index (light hero) and the hubs (dark) share it. ── */
.tutor-hero{background:var(--cream);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:clip;padding:60px 24px}
.tutor-hero::before{content:'';position:absolute;top:-220px;right:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(184,38,74,.14),transparent 70%);pointer-events:none}
.th-inner{max-width:1160px;margin:0 auto;padding:44px 44px 40px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start;position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md)}
.th-eyebrow{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);font-weight:600}
.th-h{font-family:var(--display);font-size:clamp(34px,4.6vw,56px);font-weight:500;line-height:1.02;letter-spacing:-.024em;color:var(--ink);margin:14px 0 0;font-variation-settings:'opsz' 144}
.th-h em{font-style:italic;color:var(--rose);font-weight:400}
.th-p{font-family:var(--body);font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:22px 0 0;max-width:60ch}
.th-p strong{color:var(--ink);font-weight:600}
.th-lang{margin-top:14px}
.th-value{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-ink);margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.th-btns{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:22px}
.th-btn{display:inline-block;background:var(--rose);color:#fff;font-family:var(--body);font-weight:600;font-size:15px;padding:13px 22px;border-radius:10px;text-decoration:none}
.th-btn:hover{background:var(--rose-ink)}
.th-link{font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--rose-soft)}
.th-link:hover{border-color:var(--rose)}
/* "How it works" is a popover so a visitor is not sent off the product page.
   Hover or keyboard/tap focus opens it; nothing to script. */
.th-how{position:relative;display:inline-block}
.th-how-btn{background:none;border:0;border-bottom:1.5px solid var(--rose-soft);padding:0;cursor:pointer;line-height:inherit}
.th-how-btn:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.th-how-pop{display:none;position:absolute;left:0;bottom:calc(100% + 12px);z-index:40;width:min(380px,calc(100vw - 48px));padding:16px 18px;background:var(--card,#fff);color:var(--ink-2);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 48px -18px rgba(28,20,16,.35);font-family:var(--body);font-size:14px;line-height:1.55;font-weight:400;text-align:left}
.th-how-pop strong{color:var(--ink)}
.th-how:hover .th-how-pop,.th-how:focus-within .th-how-pop{display:block}
.th-langs{padding-top:6px}
.th-langs-label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:14px}
.th-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.th-list li{display:flex;align-items:baseline;gap:7px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.th-native{font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink)}
.th-en{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:900px){.th-inner{grid-template-columns:1fr;gap:34px;padding:30px 22px 28px;border-radius:16px}}
@media(max-width:640px){.th-inner{padding:44px 20px 40px}.th-h{font-size:clamp(30px,8.5vw,40px)}}


/* ── Rebrand lockup in the nav ─────────────────────────────────────────────
   Replaces "by PassAllPrep" until the December move. The wordmark is the black
   file rather than the currentColor one: an <img> renders the SVG as its own
   document, so currentColor has nothing to inherit and falls back to black
   anyway — naming the variant makes that explicit instead of accidental. */
/* .brand-word had no rule at all, so it was a plain block: "NICPrep" and the
   lockup beside it could break onto separate lines the moment the nav ran out
   of room. One row, no wrapping, both marks on the same line at any width that
   shows them. */
.brand-word { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.brand-rename { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.brand-arrow { opacity: .45; font-size: 11px; line-height: 1; }
/* 46px sits the wordmark's x-height against NICPrep's cap height rather than
   overpowering it; the mark is wider than it is tall, so it reads at this size. */
.brand-btg { width: 46px; height: auto; display: block; opacity: .82; flex: 0 0 auto; }
.brand-when { font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
              color: var(--ink-3); opacity: .8; white-space: nowrap; }
/* The nav carries eight links plus a long announcement label, so the lockup
   sheds parts before the row can buckle: the date first, then the mark. */
@media (max-width: 1180px) { .brand-when { display: none; } }
@media (max-width: 1024px) { .brand-rename { display: none; } }

/* The announcement link. It is the one nav item advertising something with a
   date on it, so it carries weight the others do not — and a slow pulse that
   stops for anyone who has asked motion to stop. */
.nav-rename { font-weight: 700 !important; color: var(--rose) !important; }
.nav-rename:hover { color: var(--rose-deep, #8a0f33) !important; }
.nav-rename::before { content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--rose); margin-right: 6px;
  vertical-align: middle; animation: nav-rename-pulse 2.4s ease-in-out infinite; }
@keyframes nav-rename-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-rename::before { animation: none; }
}