/* ============================================================================
   Australian Citizenship Test Practice — Core Stylesheet
   Design direction: approachable, warm, professional education-brand feel
   (Duolingo/Khan Academy-adjacent) grounded in a confident blue primary
   and warm neutral backgrounds — built for an Australian civic context,
   so it stays credible and calm rather than playful/gamified.
   Headings: Poppins (rounded, friendly, confident).
   Body/UI: DM Sans (neutral, dependable — the "safe for civic/government
   context" workhorse). Loaded via Google Fonts (one link, cached
   globally) — the one deliberate external dependency in this project,
   justified by how much heading typography drove the "unprofessional"
   feedback this redesign responds to.
   ============================================================================ */

:root {
  /* --- Colour tokens --- */
  --ink:            #17233F;   /* warm near-black navy, not pure black */
  --ink-soft:       #4E5A78;   /* secondary text */
  --ink-faint:      #8A93AC;   /* tertiary / placeholder text */
  --blue:           #1E5FE8;   /* primary brand / action colour — confident, warm-leaning blue */
  --blue-dark:      #123FA8;   /* hover/active state for blue */
  --blue-pale:      #EAF1FE;   /* pale blue background wash */
  --bg:             #FFFFFF;
  --bg-subtle:      #F8F5EF;   /* warm off-white — replaces the old cold grey banding */
  --bg-sand:        #FBF7F0;   /* even lighter warm wash for large sections */
  --border:         #E7E1D6;   /* warm-neutral border, pairs with the sand backgrounds */
  --border-cool:    #E2E6F0;   /* cooler border for use on pure-white / blue-tinted areas */
  --red:            #E0303F;   /* incorrect / warnings / errors only — softened from harsh alarm-red */
  --red-pale:       #FCEAEB;
  --green:          #12A150;   /* correct / success / passed only — warmer, friendlier green */
  --green-pale:     #E4F8EC;

  /* --- Type --- */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Layout --- */
  --max-width: 1120px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 6px rgba(23, 35, 63, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 35, 63, 0.09);
  --shadow-lg: 0 16px 48px rgba(23, 35, 63, 0.14);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible keyboard focus everywhere — accessibility floor per spec section 30 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-narrow {
  max-width: 640px;
  margin: 3rem auto;
  padding: 0 1.5rem 4rem;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  min-height: 44px; /* mobile tap target, section 30 */
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 95, 232, 0.25);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 14px rgba(30, 95, 232, 0.32);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: #fff;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-secondary:hover { background: var(--blue-pale); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-subtle); }

.btn-block { width: 100%; }
.btn-lg { padding: 0.95rem 2rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(23, 35, 63, 0.02), var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo .logo-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(30, 95, 232, 0.3);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.main-nav a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--blue);
  text-decoration: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-height: 44px;
  min-width: 44px;
}
.nav-toggle svg { display: block; }

/* Mobile nav must be hidden by default at ALL widths, not just inside
   the mobile media query below — otherwise it falls back to normal
   block display on desktop and renders as a second, unstyled-looking
   list of links stacked under the real desktop nav. */
.mobile-nav {
  display: none;
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-actions .btn-secondary { display: none; }
  .nav-toggle { display: flex; align-items:center; justify-content:center; }

  .mobile-nav {
    flex-direction: column;
    border-top: 1px solid var(--border);
    background: #fff;
    padding: 1rem 1.5rem 1.5rem;
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-weight: 500;
  }
  .mobile-nav a:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #C9D2E8;
  padding: 3.5rem 0 2rem;
  font-size: 0.9rem;
}
.site-footer a { color: #C9D2E8; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-grid h4 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.6rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: #8D97B8;
  font-size: 0.82rem;
}
.footer-disclaimer {
  max-width: 640px;
  color: #8D97B8;
  font-size: 0.8rem;
  line-height: 1.6;
  margin-top: 1rem;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Signature element: the Pass Bar
   A segmented threshold indicator — not a generic progress bar. It always
   shows the fixed 75% pass line as a physical notch, and treats the values
   gate as a separate, discrete, all-or-nothing segment rather than folding
   it into one blended percentage. This is the one visual idea the whole
   product is organised around, echoing the test's actual pass rule.
   --------------------------------------------------------------------------- */
.pass-bar {
  --fill: 0%;
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  overflow: visible;
  margin: 1.75rem 0 2.25rem;
}
.pass-bar .pass-bar-fill {
  position: absolute;
  inset: 0;
  width: var(--fill);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pass-bar.is-pass .pass-bar-fill { background: linear-gradient(90deg, #1FBE68, var(--green)); }
.pass-bar.is-fail .pass-bar-fill { background: linear-gradient(90deg, #EC5A67, var(--red)); }

.pass-bar .pass-threshold {
  position: absolute;
  left: 75%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--ink);
  opacity: 0.55;
}
.pass-bar .pass-threshold::after {
  content: "75% to pass";
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.values-gate {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.values-gate .gate-dots { display: flex; gap: 5px; }
.values-gate .gate-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--border);
  border: 1.5px solid var(--ink-faint);
}
.values-gate .gate-dot.correct { background: var(--green); border-color: var(--green); }
.values-gate .gate-dot.incorrect { background: var(--red); border-color: var(--red); }
.values-gate .gate-label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; }
.values-gate .gate-label strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Cards / generic content blocks
   --------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge-blue { background: var(--blue-pale); color: var(--blue-dark); }
.badge-green { background: var(--green-pale); color: var(--green); }
.badge-red { background: var(--red-pale); color: var(--red); }
.badge-neutral { background: var(--bg-subtle); color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Utility
   --------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.error-block { text-align: center; padding: 3rem 0; }
.error-block .btn { margin: 0.5rem; }

/* Homepage hero — soft radial/linear wash instead of a flat block colour,
   reads as intentional rather than a plain background-fill. */
.hero-section {
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, var(--blue-pale) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* ---------------------------------------------------------------------------
   Motion system
   Deliberately restrained: a hero load-in sequence, scroll-triggered
   reveals for section content, and hover micro-interactions. No ambient
   background motion or parallax — those read as decoration rather than
   something serving this subject. Everything here degrades to instant/
   static under prefers-reduced-motion (handled globally above).
   --------------------------------------------------------------------------- */

/* Hero load-in: staggered fade-and-rise for headline, subhead, CTAs.
   Applied via a small number of hand-placed classes, not automated —
   this is a single orchestrated moment, not a page-wide effect. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.load-in {
  animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.load-in-1 { animation-delay: 0.05s; }
.load-in-2 { animation-delay: 0.16s; }
.load-in-3 { animation-delay: 0.27s; }
.load-in-4 { animation-delay: 0.38s; }

/* Scroll reveal: sections fade/rise into place as they enter the
   viewport. JS toggles .is-visible on intersection; the reveal itself
   is pure CSS so nothing depends on JS for first paint (content is
   already visible without JS — this only adds the entrance motion). */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children within a revealed group (cards, list items) */
.reveal-group.is-visible > * {
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .load-in, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hover polish for cards — subtle lift, not a bounce */
.card-hover {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-pale);
}

/* ---------------------------------------------------------------------------
   Thumbnail / image placeholder blocks
   Used sparingly on a few key pages so real photography can be dropped in
   later with a one-line swap. Styled so they read as intentional content
   blocks now, not broken images. Replace by swapping the <div class=
   "thumb-placeholder"> for an <img> with the same wrapping class removed.
   --------------------------------------------------------------------------- */
.thumb-placeholder {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-pale) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 220px;
}
.thumb-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
}
.thumb-placeholder-label {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.82);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}
.thumb-placeholder-label svg { display: block; margin: 0 auto 0.5rem; opacity: 0.6; }

.thumb-16-9 { aspect-ratio: 16 / 9; }
.thumb-4-3 { aspect-ratio: 4 / 3; }
.thumb-1-1 { aspect-ratio: 1 / 1; }
.thumb-3-4 { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------------------
   Legal / long-form content pages (Privacy, Terms, Refund Policy, etc.)
   --------------------------------------------------------------------------- */
.legal-page { padding-top: 2.5rem; }
.legal-page h1 { margin-top: 0.75rem; }
.legal-intro { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 2.5rem; }
.legal-page h2 { font-size: 1.15rem; margin-top: 2.25rem; margin-bottom: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.legal-page h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-page ul, .legal-page ol { color: var(--ink-soft); padding-left: 1.25rem; line-height: 1.8; }
.legal-page li { margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------------------
   Blog listing cards — thumbnail bleeds to the card edge, text is padded
   below. A variant on .card rather than reusing it directly, since .card's
   uniform padding doesn't suit a full-bleed image at the top.
   --------------------------------------------------------------------------- */
.blog-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
.blog-card:hover { text-decoration: none; }
.blog-card-thumb {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.blog-card-body { padding: 1.5rem 1.75rem 1.75rem; }

/* Featured pricing card — keeps its blue emphasis on hover instead of
   card-hover's default pale border, since this card should always read
   as "the highlighted option," hover or not. */
.pricing-card-featured {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-md);
  position: relative;
}
.pricing-card-featured:hover {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-lg);
}

/* Account dashboard stat cards */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 780px) {
  .dashboard-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Homepage layout grids — mobile-first, stacking below 780px per spec
   section 30 (mobile experience must avoid horizontal scrolling and keep
   tap targets comfortable).
   --------------------------------------------------------------------------- */
.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.pricing-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 780px) {
  .how-it-works-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .feature-cards-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .two-col-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pricing-preview-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 480px) {
  .how-it-works-grid { grid-template-columns: 1fr; }
}

.category-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 560px) {
  .category-select-grid { grid-template-columns: 1fr; }
}

/* Visual selected-state for the category picker cards — without this,
   selecting a category (including via a deep link like
   /practice?category=...) only shows in the tiny radio dot, easy to miss. */
.category-select-grid label:has(input:checked),
.category-select-grid label.is-selected {
  border-color: var(--blue);
  background: var(--blue-pale);
}

/* ===========================================================================
   PERSONALISATION COMPONENTS
   Used by the dashboard, the results pages and the practice session screen.
   Kept in the global stylesheet (rather than a dashboard-only file) because
   several of these — .focus-next, .session-mode-banner — appear on pages
   outside /account, and a missing stylesheet on one of them would be a
   silent visual break.
   =========================================================================== */

/* --- Readiness card: the dashboard's headline answer ---------------------- */
.readiness-card {
  background: linear-gradient(160deg, var(--blue-pale) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.readiness-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.readiness-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  flex-wrap: wrap;
}
.readiness-pct { font-size: 0.5em; }
.readiness-word {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.55rem;
  letter-spacing: 0.02em;
}
.readiness-ready    { color: var(--green); }
.readiness-almost   { color: var(--blue); }
.readiness-building { color: #C77700; }
.readiness-early    { color: var(--ink-soft); }

.readiness-headline {
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0.9rem 0 0;
  max-width: 52ch;
}
.readiness-weak {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}
.readiness-weak-pct { margin-left: auto; font-weight: 700; }
.readiness-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.readiness-reason {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
  max-width: 60ch;
}

/* --- Stat tiles ----------------------------------------------------------- */
.stat-num {
  font-size: 1.55rem;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1.1;
}
.stat-cap { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.2rem; }

/* --- Section headers inside cards ----------------------------------------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.section-title { font-size: 1.15rem; margin: 0; }

/* --- Topic performance rows (the traffic-light weak-area list) ------------- */
.topic-list { display: flex; flex-direction: column; }
.topic-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px 3.2rem auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.topic-row:last-child { border-bottom: none; }

.topic-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-faint);
}
.topic-dot-weak    { background: var(--red); }
.topic-dot-ok      { background: #E0A02C; }
.topic-dot-strong  { background: var(--green); }
.topic-dot-unknown { background: var(--border); border: 1px solid var(--ink-faint); }

.topic-name { font-weight: 500; font-size: 0.95rem; min-width: 0; }
.topic-bar {
  display: block;
  height: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.topic-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-faint);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.topic-bar-weak   { background: var(--red); }
.topic-bar-ok     { background: #E0A02C; }
.topic-bar-strong { background: var(--green); }

.topic-pct { font-weight: 700; font-size: 0.9rem; text-align: right; }
.topic-pct-muted { color: var(--ink-faint); font-weight: 500; }
.topic-go { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 620px) {
  .topic-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dot name pct"
      "bar bar  bar"
      "go  go   go";
    row-gap: 0.55rem;
  }
  .topic-dot { grid-area: dot; }
  .topic-name { grid-area: name; }
  .topic-pct { grid-area: pct; }
  .topic-bar { grid-area: bar; }
  .topic-go  { grid-area: go; justify-self: start; }
}

/* --- Locked Full Access previews ------------------------------------------
   Deliberately shows the SHAPE of the feature (real topic names, a real
   row layout) with only the numbers obscured. A completely hidden feature
   can't be evaluated; a blurred one can, which is the whole point of
   previewing it rather than just describing it. */
.locked-block { position: relative; margin-top: 0.25rem; }
.locked-rows {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.94) 55%);
  border-radius: var(--radius-md);
}
.locked-overlay span { font-size: 0.85rem; color: var(--ink-soft); }
.locked-overlay .btn { margin-top: 0.5rem; }
.locked-icon { color: var(--blue); }

.locked-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.locked-inline .locked-icon { flex-shrink: 0; margin-top: 1px; }

.tier-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.9rem 0 0; }

/* --- Mistake summary chips ------------------------------------------------ */
.mistake-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mistake-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.mistake-chip strong { color: var(--ink); }

/* --- Compact stat row (mock summary) -------------------------------------- */
.mini-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.mini-stats > div { display: flex; flex-direction: column; }
.mini-val { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.mini-cap { font-size: 0.78rem; color: var(--ink-soft); }
.mini-locked .mini-val { color: var(--ink-faint); letter-spacing: 0.05em; }

/* --- "Focus on next" block on results pages ------------------------------- */
.focus-next {
  background: var(--blue-pale);
  border: 1px solid var(--border-cool);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  margin-bottom: 2rem;
}
.focus-next-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-dark);
  margin-bottom: 0.35rem;
}
.focus-next-topic { margin: 0 0 0.4rem; font-size: 1.25rem; }
.focus-next-detail { font-size: 0.92rem; margin-bottom: 1rem; }

/* --- Mock test history chart ----------------------------------------------
   A plain CSS bar chart: no charting library, no canvas. At this size
   (10 bars, one metric) a library would be more code than the feature.
   The 75% pass line is drawn as a dashed rule so "am I above the line?"
   is answerable at a glance, which is the only question this chart
   actually needs to answer. */
/* The bars and the 75% rule must be measured against the SAME box, so
   the plot area is its own element and the top padding for value labels
   lives on the outer wrapper. Putting the padding on the plot itself
   would make `bottom: 75%` (padding-box) disagree with a bar's
   `height: 75%` (content-box) and draw the pass line in the wrong place. */
.mock-chart {
  position: relative;
  padding-top: 1.5rem;
}
.mock-chart-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 150px;
  border-bottom: 2px solid var(--border);
}
.mock-bar-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mock-bar {
  width: 100%;
  max-width: 42px;
  background: var(--blue);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 3px;
}
.mock-bar-pass { background: var(--green); }
.mock-bar-value {
  position: absolute;
  top: -1.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}
/* Pass-mark rule, positioned by percentage of the plot area. The chart's
   1.5rem top padding is value-label space, so the line sits inside the
   bar area proper: bars are measured against the same 100% box. */
.mock-chart-threshold {
  position: absolute;
  left: 0; right: 0;
  bottom: 75%;
  border-top: 2px dashed var(--ink-faint);
  opacity: 0.7;
  pointer-events: none;
}
.mock-chart-threshold span {
  position: absolute;
  right: 0;
  top: -1.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fff;
  padding: 0 0.3rem;
}

/* --- Focus Practice entry card + divider ----------------------------------
   The personalised entry point on the practice page. Named "Your Focus
   Practice" rather than "Smart Practice" in the UI so it reads as being
   about the user, not about the algorithm. */
.smart-practice-card,
.focus-practice {
  background: linear-gradient(160deg, var(--blue-pale) 0%, #fff 70%);
  border-color: var(--border-cool);
}

/* The named weak topic, shown as evidence for why these questions were
   chosen. Seeing the topic and the number is what makes the session feel
   selected rather than random. */
.focus-topic {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.focus-topic-body { min-width: 0; flex: 1; }
.focus-topic-name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.focus-topic-meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.15rem; }
.focus-topic-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}
.focus-explain { font-size: 0.92rem; margin-bottom: 1.15rem; }

/* Buttons that carry a small "N questions" line under the label, so the
   session length is known before clicking and no setup screen is needed. */
.btn-stack {
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.25;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.btn-qty { font-size: 0.72rem; font-weight: 500; opacity: 0.85; }
.practice-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 1.5rem;
  color: var(--ink-faint);
  font-size: 0.82rem;
}
.practice-divider::before,
.practice-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------------------------------------------------------------------------
   CHALLENGE ZONE
   Visually lighter than practice and the mock test on purpose: the three
   experiences must not feel interchangeable. Warmer background, playful
   icons, personal bests front and centre. Still the same restrained
   palette, this is a professional exam-prep product, not an arcade.
   --------------------------------------------------------------------------- */
.challenge-zone {
  margin-top: 3rem;
  padding: 1.75rem;
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.challenge-intro { font-size: 0.92rem; margin-bottom: 1.5rem; }

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 620px) {
  .challenge-grid { grid-template-columns: 1fr; }
}

.challenge-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.challenge-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-cool);
}
.challenge-card-recommended { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.challenge-card-done { opacity: 0.72; }
.challenge-card-done:hover { transform: none; box-shadow: none; }

.challenge-flag {
  position: absolute;
  top: -9px; right: 1rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.challenge-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 0.5rem; }
.challenge-name { font-size: 1.05rem; margin: 0 0 0.35rem; }
.challenge-desc { font-size: 0.86rem; margin-bottom: 0.9rem; flex: 1; }
.challenge-best {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.5rem 0.7rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
}
.challenge-best strong { color: var(--ink); }
.challenge-best-empty { color: var(--ink-faint); }
.challenge-done-tick { color: var(--green); font-weight: 600; }

/* --- Live streak meter (Streak Challenge session) -------------------------- */
.streak-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.streak-meter.streak-hot { background: #FFF4E2; border-color: #F0D6A8; }
.streak-meter.streak-broken { background: var(--red-pale); border-color: #F5C4C8; }

.streak-current { display: flex; align-items: baseline; gap: 0.45rem; }
.streak-flame { font-size: 1.25rem; line-height: 1; display: inline-block; }
.streak-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
}
.streak-word { font-size: 0.85rem; color: var(--ink-soft); }
.streak-best { font-size: 0.85rem; color: var(--ink-soft); }

@keyframes streak-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.streak-pop { animation: streak-pop 0.34s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Challenge results summary -------------------------------------------- */
.challenge-summary {
  position: relative;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--bg-sand);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.challenge-stat { display: flex; flex-direction: column; }
.challenge-stat-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
}
.challenge-stat-cap { font-size: 0.78rem; color: var(--ink-soft); }
.challenge-badge {
  margin-left: auto;
  align-self: center;
  background: var(--green-pale);
  color: var(--green);
  border: 1px solid #B4E8C6;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

/* --- XP & achievements -----------------------------------------------------
   Locked achievements show a progress bar rather than just a grey box:
   "34/50" is a reason to do another session, an unexplained locked badge
   is only a nag. */
.xp-breakdown { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.25rem; }

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
@media (max-width: 700px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .achievement-grid { grid-template-columns: 1fr; } }

.achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 0.9rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.achievement-unlocked {
  background: var(--green-pale);
  border-color: #B4E8C6;
}
.achievement-icon { font-size: 1.5rem; line-height: 1; filter: grayscale(1); opacity: 0.45; }
.achievement-unlocked .achievement-icon { filter: none; opacity: 1; }
.achievement-name { font-size: 0.85rem; font-weight: 600; line-height: 1.2; }
.achievement-state { font-size: 0.72rem; color: var(--ink-faint); }
.achievement-unlocked .achievement-state { color: var(--green); font-weight: 600; }
.achievement-note { line-height: 1.3; }

.achievement-progress { display: flex; align-items: center; gap: 0.4rem; width: 100%; }
.achievement-bar {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.achievement-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.achievement-count { font-size: 0.7rem; color: var(--ink-faint); white-space: nowrap; }

/* --- Practice-session mode banner ----------------------------------------- */
.session-mode-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.session-mode-blurb { font-size: 0.85rem; color: var(--ink-soft); }

/* ===========================================================================
   LEARN CENTRE COMPONENTS
   =========================================================================== */

/* --- Learning Pathway Stepper -------------------------------------------- */
.learn-pathway {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pathway-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.pathway-step.active {
  color: var(--ink);
}
.pathway-step.active .step-icon {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.pathway-arrow {
  color: var(--border);
}

/* --- Layout ------------------------------------------------------------- */
.learn-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .learn-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --- Sidebar Navigation -------------------------------------------------- */
.learn-sidebar {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.learn-sidebar h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--ink);
  font-family: var(--font-body);
}
.learn-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.learn-toc li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.learn-toc a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.4;
  flex: 1;
}
.learn-toc a:hover, .learn-toc a.active {
  color: var(--blue);
}
.learn-toc a.active {
  font-weight: 600;
}
.learn-section-check {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}
.learn-section-check.incomplete {
  color: var(--border);
}

/* --- Section Content ----------------------------------------------------- */
.learn-section {
  scroll-margin-top: 90px; /* Offset for sticky header */
  margin-bottom: 2rem;
}
.learn-section .card {
  padding: 2.25rem;
}
.learn-section h2 {
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}
.learn-section p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.learn-section ul {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.learn-section li { margin-bottom: 0.5rem; }

/* --- Special Callouts ---------------------------------------------------- */
.learn-keyterm {
  font-weight: 600;
  color: var(--blue-dark);
  background: var(--blue-pale);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.learn-remember {
  background: var(--bg-subtle);
  border-left: 4px solid #E0A02C; /* Warm gold for "remember" */
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.learn-remember-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #A6731B;
  margin-bottom: 0.4rem;
}

/* --- Section Navigation -------------------------------------------------- */
.learn-section-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  gap: 1rem;
}

/* --- Topic Progress Bar -------------------------------------------------- */
.learn-progress-wrap {
  margin: 1rem 0 1.5rem;
}
.learn-progress-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.learn-progress-bar {
  height: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.learn-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.learn-progress-fill.complete {
  background: linear-gradient(90deg, var(--green), #0fa34e);
}

/* ===========================================================================
   REVIEWS / SUCCESS STORIES PAGE
   =========================================================================== */
.review-wall {
  column-count: 3;
  column-gap: 1.25rem;
}
@media (max-width: 900px) {
  .review-wall { column-count: 2; }
}
@media (max-width: 560px) {
  .review-wall { column-count: 1; }
}
.review-card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.review-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.review-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
}
.review-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.2;
}
.review-date {
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.review-msg {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}
.review-card[data-hidden="true"] {
  display: none;
}
.review-stats-bar {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}
.review-stat { text-align: center; }
.review-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1;
}
.review-stat-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.review-form-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.review-form-toggle:hover { background: var(--blue-dark); }
.review-form-card {
  max-width: 520px;
  margin: 1.5rem auto 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: none;
}
.review-form-card.is-open { display: block; }
.review-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.75rem 2rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.review-load-more:hover {
  background: var(--blue);
  color: #fff;
}