/* =============================================
   BA Stack — Shared Brand System
   ============================================= */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand palette */
  --purple: #7C4DFF;
  --purple-dark: #5c35cc;
  --purple-light: #f4f1ff;
  --purple-glow: rgba(124, 77, 255, 0.15);
  --dark: #0A0814;
  --dark-card: #13111A;
  --dark-card2: #1A1725;
  --dark-border: #2A2535;
  --text-light: #E8E0FF;
  --text-muted: #A89CC8;
  --orange: #FF9800;

  /* Neutral palette */
  --white: #FFFFFF;
  --off-white: #F9F9FB;
  --grey-100: #f0f0f0;
  --grey-200: #e5e5e5;
  --grey-300: #d4d4d4;
  --grey-500: #888888;
  --grey-700: #444444;
  --grey-900: #1a1a1a;

  /* Semantic */
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;

  /* Layout */
  --max-w: 1120px;
  --max-w-narrow: 760px;
  --radius: 12px;
  --radius-lg: 20px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.7;
  color: var(--grey-700);
  background: var(--off-white);
}

a { color: var(--purple); font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.85; }

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

h1, h2, h3, h4, h5, h6 {
  color: var(--dark);
  line-height: 1.25;
  font-weight: 700;
}

/* --- Typography Scale --- */
.t-hero { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; }
.t-h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; }
.t-h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
.t-h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
.t-body { font-size: 1rem; }
.t-small { font-size: 0.875rem; }
.t-micro { font-size: 0.75rem; }

/* --- Layout --- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-lg); }
.container--narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--sp-lg); }
.section { padding: var(--sp-3xl) 0; }
.section--dark { background: var(--dark); color: var(--text-light); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: var(--text-muted); }
.section--purple { background: var(--purple-light); }

/* --- Navigation --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--dark-border);
  padding: 0 var(--sp-lg);
}
.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
}
.nav__logo svg { flex-shrink: 0; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  list-style: none;
}
.nav__links a {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav__links a:hover, .nav__links a.active { color: var(--white); opacity: 1; }
.nav__cta {
  background: var(--purple);
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
}
.nav__cta:hover { opacity: 0.9; }
.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-light);
  margin: 6px 0;
  transition: all 0.3s;
}
.nav__mobile {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--dark);
  z-index: 99;
  padding: var(--sp-xl) var(--sp-lg);
}
.nav__mobile.open { display: flex; flex-direction: column; gap: var(--sp-md); }
.nav__mobile a {
  color: var(--text-light);
  font-size: 1.1rem;
  font-weight: 500;
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--dark-border);
}

@media (max-width: 768px) {
  .nav__links { display: none !important; }
  .nav__burger { display: block !important; }
}
@media (max-width: 480px) {
  .nav__logo svg { width: 130px; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 14px 32px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn--primary { background: var(--purple); color: var(--white); }
.btn--white { background: var(--white); color: var(--purple); }
.btn--outline { background: transparent; color: var(--purple); border: 2px solid var(--purple); }
.btn--dark-outline { background: transparent; color: var(--text-light); border: 2px solid var(--dark-border); }
.btn--full { width: 100%; }
.btn--sm { padding: 10px 20px; font-size: 0.875rem; }
.btn--lg { padding: 18px 40px; font-size: 1.05rem; }

/* --- Cards --- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-xl);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.card--dark {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
}
.card--dark:hover { border-color: var(--purple); }
.card--highlight {
  background: var(--purple-light);
  border-left: 4px solid var(--purple);
}

/* --- Badge --- */
.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge--purple { background: var(--purple-glow); color: var(--purple); }
.badge--green { background: rgba(34,197,94,0.1); color: var(--green); }
.badge--orange { background: rgba(255,152,0,0.1); color: var(--orange); }

/* --- Footer --- */
.footer {
  background: var(--dark);
  color: var(--text-muted);
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-xl);
  border-top: 1px solid var(--dark-border);
}
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-xl);
}
.footer__brand p { font-size: 0.85rem; line-height: 1.6; margin-top: var(--sp-md); color: var(--text-muted); }
.footer__col h4 { color: var(--white); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-md); }
.footer__col a { display: block; color: var(--text-muted); font-size: 0.85rem; font-weight: 400; margin-bottom: var(--sp-sm); }
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  max-width: var(--max-w);
  margin: var(--sp-xl) auto 0;
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--dark-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.footer__disclaimer {
  max-width: var(--max-w);
  margin: var(--sp-lg) auto 0;
  font-size: 0.68rem;
  color: var(--text-muted);
  opacity: 0.6;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-xl) var(--sp-lg); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; gap: var(--sp-sm); text-align: center; }
}
@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-muted { color: var(--text-muted); }
.text-purple { color: var(--purple); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: var(--sp-2xl) 0; }
}

/* --- Animations --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
.fade-up-d1 { animation-delay: 0.1s; }
.fade-up-d2 { animation-delay: 0.2s; }
.fade-up-d3 { animation-delay: 0.3s; }
.fade-up-d4 { animation-delay: 0.4s; }

/* Never let suppressed animation leave content invisible: .fade-up starts at
   opacity 0, so without this the whole hero disappears for these users. */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Focus --- */
:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
  border-radius: 3px;
}
/* The dark bands are near-black, so a purple ring is too low contrast there. */
.section--dark :focus-visible,
.nav :focus-visible,
.footer :focus-visible,
.sim-section :focus-visible,
.final-cta :focus-visible,
.quiz-header :focus-visible {
  outline-color: var(--white);
}

/* --- Testimonial quotes ---
   Moved here from the page-local <style> in index.html on 22 Aug 2026 so
   /pro/ can use the same component. Same reason as the block below: one
   system, not a copy per page. Quiet by design: a customer's words carry
   more when they are not wrapped in stars and badges. */
.quotes { display: flex; flex-direction: column; gap: 14px; }
.quote {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-left: 3px solid var(--purple);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
}
.quote blockquote {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--grey-900);
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--grey-500);
  font-weight: 500;
}

/* --- Elimination Logic block ---
   The worked-question hero. Lives here rather than in a page-local <style>
   because the 7 Aug critique flagged /pro/ for running 57 lines of its own
   CSS that re-declared patterns already in this file. One system. */
.elim__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
  margin-top: var(--sp-2xl);
  margin-bottom: var(--sp-md);
}
.elim {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-lg), 4vw, var(--sp-xl));
}
.elim__q {
  color: var(--white);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--sp-lg);
}
.elim__opt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-sm) var(--sp-md);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: var(--sp-sm);
}
.elim__opt:last-child { margin-bottom: 0; }
.elim__opt-text { font-size: 1rem; font-weight: 700; }
.elim__why { font-size: 0.85rem; line-height: 1.5; }

/* Wrong answers are struck through AND colour-coded AND labelled, so the
   meaning never depends on colour alone. */
.elim__opt--wrong { background: rgba(255,255,255,0.03); }
.elim__opt--wrong .elim__opt-text {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.elim__opt--wrong .elim__why { color: var(--text-muted); }

.elim__opt--trap { background: rgba(239,68,68,0.10); }
.elim__opt--trap .elim__opt-text {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.elim__opt--trap .elim__why { color: #ff8b8b; font-weight: 600; }

.elim__opt--right { background: rgba(34,197,94,0.12); }
.elim__opt--right .elim__opt-text { color: var(--white); }
.elim__opt--right .elim__opt-text::before {
  content: "\2713\00a0\00a0";
  color: var(--green);
  font-weight: 800;
}
.elim__opt--right .elim__why { color: var(--green); font-weight: 600; }

/* --- Pricing tiers --- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  /* NOT align-items:start. Cards must stretch to equal height, otherwise
     margin-top:auto on .tier__note has no slack and the buy buttons sit at
     three different heights. */
}
.tier {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier--featured {
  border: 2px solid var(--purple);
  box-shadow: 0 8px 30px rgba(124,77,255,0.12);
}
.tier__flag {
  position: absolute;
  top: -12px; left: var(--sp-xl);
  background: var(--purple);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}
/* min-height so a two-line name does not push its price out of line with the
   other cards. Prices at different heights reads as sloppy on a price table. */
.tier__name { font-size: 1.15rem; font-weight: 800; color: var(--dark); min-height: 2.8em; }
.tier__blurb {
  font-size: 0.875rem;
  color: var(--grey-500);
  margin-top: var(--sp-xs);
  min-height: 2.6em;
}
.tier__price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  margin: var(--sp-md) 0 var(--sp-lg);
}
.tier__list { list-style: none; padding: 0; margin: 0 0 var(--sp-lg); }
.tier__list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.875rem;
  color: var(--grey-700);
  line-height: 1.6;
  margin-bottom: 10px;
}
.tier__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--purple);
  font-weight: 800;
}
.tier__note {
  font-size: 0.8rem;
  color: var(--grey-500);
  line-height: 1.6;
  /* auto pushes the note-plus-button block to the bottom of the card;
     min-height keeps the three notes the same depth so the buy buttons
     line up rather than sitting at three heights. */
  margin-top: auto;
  min-height: 3.4em;
}
.tier__note a { color: var(--purple); }
/* Fixed height and centred, so a label that wraps to two lines in a narrow
   card does not leave one buy button taller than the other two. Chasing
   shorter labels does not solve this: the card width decides the wrap. */
.tier .btn {
  white-space: nowrap;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .tier__blurb { min-height: 0; }
  .tier__flag { left: var(--sp-lg); }
}

/* --- Footer static fallback (visible only if shared.js does not run) --- */
.footer__fallback {
  background: var(--dark);
  color: var(--text-muted);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.7;
}
.footer__fallback p + p { margin-top: var(--sp-md); }
.footer__fallback a { color: var(--white); text-decoration: underline; }

/* --- Buy-point terms --- */
.buy-terms {
  max-width: 480px;
  margin: var(--sp-md) auto 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--grey-700);
}
.buy-terms a { color: inherit; text-decoration: underline; }
.buy-terms--dark { color: var(--text-muted); }
.buy-terms--dark a { color: var(--white); }
.buy-terms--left { margin-left: 0; text-align: left; }

/* --- Video embed --- */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- Mobile Readability --- */
@media (max-width: 600px) {
  html { font-size: 17px; }
  body { line-height: 1.75; }
  .t-small { font-size: 0.95rem; }
  .t-micro { font-size: 0.82rem; }
  .t-body { font-size: 1.05rem; }
  p { font-size: 1rem; }
  .card { padding: var(--sp-lg); }
  .badge { font-size: 0.75rem; padding: 5px 14px; }
  .btn { padding: 16px 28px; font-size: 1rem; }
  .btn--sm { padding: 12px 20px; font-size: 0.9rem; }
  .footer__col a { font-size: 0.9rem; margin-bottom: var(--sp-sm); }
  .footer__brand p { font-size: 0.9rem; }
  .footer__disclaimer { font-size: 0.75rem; }
  .nav__mobile a { font-size: 1.15rem; padding: var(--sp-md) 0; }
}

/* ==========================================================================
   FREE MINI MOCK  (/mock/)
   Moved out of the React app on 11 Aug 2026. A free preview sitting behind
   app.bastack.com was doing no acquisition work; on the site it is the top
   of the funnel and the proof behind the homepage claim.

   Options are real radio inputs, visually hidden, driven by their labels.
   That buys arrow-key navigation, the correct screen-reader role and form
   semantics for free. Do NOT swap these for divs with click handlers.
   ========================================================================== */

/* Sticky status bar. The timer and progress must stay visible while scrolling
   a long question, or people lose track of the clock on mobile. */
.mock-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark); border-bottom: 1px solid var(--dark-border);
  padding: var(--sp-md) 0;
}
.mock-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
.mock-bar__count { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; }

/* tabular-nums stops the layout jittering as the digits tick over. */
.mock-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.1rem; color: var(--text-light);
  background: var(--dark-card2); border: 1px solid var(--dark-border);
  border-radius: var(--radius); padding: 6px 14px;
}
.mock-timer--low { color: #fff; background: var(--red); border-color: var(--red); }

.mock-progress { height: 4px; background: var(--dark-border); border-radius: 2px; overflow: hidden; margin-top: var(--sp-sm); }
.mock-progress__fill { height: 100%; background: var(--purple); width: 0; transition: width 0.25s ease; }

.mock-q { font-size: 1.15rem; line-height: 1.6; color: var(--grey-900); font-weight: 600; }

.mock-opts { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.mock-opts input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.mock-opt {
  display: flex; align-items: flex-start; gap: var(--sp-md);
  border: 2px solid var(--grey-200); border-radius: var(--radius);
  padding: var(--sp-md); cursor: pointer; background: var(--white);
  transition: border-color 0.15s, background 0.15s;
}
.mock-opt:hover { border-color: var(--purple); background: var(--purple-light); }
.mock-opt__key {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--grey-100); color: var(--grey-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}
.mock-opt__text { flex: 1; color: var(--grey-900); line-height: 1.5; }

input[type="radio"]:checked + .mock-opt { border-color: var(--purple); background: var(--purple-light); }
input[type="radio"]:checked + .mock-opt .mock-opt__key { background: var(--purple); color: var(--white); }
/* Focus must be visible on the label, because the input itself is hidden. */
input[type="radio"]:focus-visible + .mock-opt { outline: 3px solid var(--purple); outline-offset: 2px; }

.mock-nav { display: flex; gap: var(--sp-md); margin-top: var(--sp-xl); }
.mock-nav .btn { flex: 1; }

/* --- Results --- */
.mock-score { font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--white); }
.mock-score__of { font-size: 1.25rem; font-weight: 600; color: var(--text-muted); }

/* Review list. Colour never carries the verdict alone: every row also has a
   text label, for colour-blind readers and for anyone printing this. */
.mock-review { display: flex; flex-direction: column; gap: var(--sp-xl); }
.mock-review__item { border-left: 4px solid var(--grey-300); padding-left: var(--sp-lg); }
.mock-review__item--right { border-left-color: var(--green); }
.mock-review__item--wrong { border-left-color: var(--red); }
/* The review items are <details>/<summary> since 16 Aug 2026. Correct ones
   render collapsed, wrong ones open. Keep the summary a real summary element:
   swapping it for a div with a click handler loses keyboard access and
   find-in-page. */
.mock-review__verdict { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
summary.mock-review__verdict {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: var(--sp-sm); padding: 2px 0;
}
summary.mock-review__verdict::-webkit-details-marker { display: none; }
/* Chevron drawn in CSS so the control reads as expandable without an icon
   font or twenty inline SVGs. */
summary.mock-review__verdict::after {
  content: ''; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease; opacity: 0.65;
}
details[open] > summary.mock-review__verdict::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
summary.mock-review__verdict:focus-visible {
  outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  summary.mock-review__verdict::after { transition: none; }
}

/* Area summary, above the ask. Deliberately plain: it is a scannable list,
   not a second results panel competing with the score. */
.mock-areas__list { list-style: none; margin: 0; padding: 0; }
.mock-areas__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-md); padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--grey-200);
}
.mock-areas__item:last-child { border-bottom: none; }
.mock-areas__name { font-weight: 600; color: var(--grey-900); }
.mock-areas__count {
  font-size: 0.85rem; color: var(--text-muted); white-space: nowrap;
}
/* Explicit route down to the explanations, which sit below the ask. */
.mock-areas__jump {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--purple); text-decoration: none;
}
.mock-areas__jump::after { content: '\2193'; }
.mock-areas__jump:hover { text-decoration: underline; }
.mock-review__verdict--right { color: #15803d; }
.mock-review__verdict--wrong { color: #b91c1c; }
.mock-review__ans { font-size: 0.95rem; color: var(--grey-700); margin-top: var(--sp-sm); }
.mock-review__ans strong { color: var(--grey-900); }
.mock-explain {
  background: var(--purple-light); border-radius: var(--radius);
  padding: var(--sp-md); margin-top: var(--sp-md);
  font-size: 0.95rem; line-height: 1.65; color: var(--grey-700);
}

/* The not-an-official-BCS-exam notice. Deliberately inline rather than a
   modal: a dialog before a free mock adds friction exactly where the page
   promises none, and gets dismissed unread, which protects nobody. This sits
   inside the pre-start card that everyone passes to reach the button. */
.mock-notice {
  border-left: 3px solid var(--amber);
  background: rgba(245, 158, 11, 0.08);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-md);
  margin-top: var(--sp-lg);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}
/* The element selector is load-bearing, not tidiness that can be removed.
   `.section--dark p` is 0,1,1 and would otherwise outrank a bare
   `.mock-notice`, leaving the disclaimer the same muted grey as the bullets
   above it. This lifts it to --text-light so it reads as a notice rather than
   more body copy. Measured 14.7:1 against the dark card, 18.7:1 for the
   bold lead. Both comfortably AAA. */
p.mock-notice { color: var(--text-light); }
.mock-notice strong { color: var(--white); }

@media (max-width: 600px) {
  /* The exam view is density-first. The global mobile type scale is tuned for
     reading prose and it pushed the options past the bottom of the screen:
     measured at 414x896 on 11 Aug 2026 the last option sat 63px below the
     fold, and 414 is a large phone. Reported from a real device as "I
     couldn't see the question and the options on the same screen".

     Two fixes work together. First, reclaim the wasted vertical space.
     Second, make the question itself sticky, so scrolling to the options
     never takes the question off screen. */
  .mock-bar { padding: var(--sp-sm) 0; }
  .mock-timer { font-size: 1rem; padding: 4px 10px; }
  .mock-bar__count { font-size: 0.78rem; }

  #mock-exam .section { padding: var(--sp-md) 0 var(--sp-xl); }
  #mock-exam .card { padding: var(--sp-md); }

  .mock-q { font-size: 0.98rem; line-height: 1.45; }

  /* Sticky question. #mock-question only, never .mock-q, because the review
     list reuses that class for 20 more questions and sticking all of them
     would be chaos.
     --mock-bar-h is written by the page on start; the fallback covers the
     moment before that runs. The negative margin lets the white background
     span the card's padding so options scroll cleanly underneath. */
  #mock-question {
    position: sticky;
    top: var(--mock-bar-h, 72px);
    z-index: 5;
    background: var(--white);
    margin: 0 calc(var(--sp-md) * -1);
    padding: var(--sp-sm) var(--sp-md);
    max-height: 40vh;
    overflow-y: auto;
    box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.18);
  }

  .mock-opts { gap: 6px; margin-top: var(--sp-md); }
  .mock-opt { padding: 11px 12px; gap: 10px; }
  .mock-opt__key { width: 24px; height: 24px; font-size: 0.78rem; }
  .mock-opt__text { font-size: 0.95rem; line-height: 1.4; }

  /* Stays stacked. Side by side looks tighter but "Finish and see answers"
     wraps to three lines in half a 375px screen. */
  .mock-nav { flex-direction: column-reverse; margin-top: var(--sp-lg); }
  #mock-exam .mock-nav .btn { padding: 13px 20px; }

  .mock-score { font-size: 2.75rem; }
}