/* ─────────────────────────────────────────────
   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;
}

/* ────── 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 ────── */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.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; }
.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 <section class="preview-section"> interactive widget 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; the .hero-btns on index.html (whose
   children are all preview-route links). */
@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. */
.exams-dd-menu.exams-dd-grouped {
  grid-template-columns: max-content max-content;
  gap: 4px 28px;
  min-width: 0;
  padding: 14px 16px;
}
.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; }
}

/* ── 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;
  }
}