/* ═══════════════════════════════════════════════════════════════════════════
   Tolemy Business Navigation Quiz — Styles
   Brand Guidelines v1.0 April 2025
   ─────────────────────────────────────────────────────────────────────────
   Fonts:      Georgia Italic (headings) · Open Sans (body)
   Brand:      Black #000000 · White #ffffff · Dark Grey #868686 · Warm Grey #ededed
   Elements:   Purple/Air #8c5996 · Teal/Earth #70bfad · Red/Fire #e8755e · Blue/Water #009ccf
   Gradient:   Purple → Blue → Teal → Red (clockwise on framework)
   Wind = Air = Purple  |  Current = Earth = Teal
═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  --black:      #000000;
  --white:      #ffffff;
  --dark-grey:  #868686;
  --warm-grey:  #ededed;

  --purple:     #8c5996;
  --teal:       #70bfad;
  --green:      #70bfad; /* legacy alias */
  --red:        #e8755e;
  --blue:       #009ccf;

  /* Wind / Current semantic tokens used in the product */
  --wind:       #8c5996; /* Air   — Part 1 */
  --current:    #70bfad; /* Earth — Part 2 */

  --gradient-bar: linear-gradient(to right, #8c5996, #009ccf, #70bfad, #e8755e);

  --bg:         #fafafa;
  --surface:    #ffffff;
  --border:     #e2e2e2;

  --text:       #1a1a1a;
  --text-mid:   #555555;
  --text-light: #868686;

  --radius:    12px;
  --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* ─── SCREENS ─────────────────────────────────────────────────────────────── */

.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ─── LOADING ─────────────────────────────────────────────────────────────── */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1.25rem;
  background: var(--black);
  color: var(--dark-grey);
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 2px solid #333;
  border-top-color: var(--wind);
  border-right-color: var(--current);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-container p {
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--dark-grey);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.error-text { color: var(--red); font-size: 0.9rem; }

/* ─── WELCOME SCREEN ──────────────────────────────────────────────────────── */

#screen-welcome {
  background: var(--black);
  position: relative;
  overflow: hidden;
  flex-direction: column;
}

/* Top navigation (landing page) — compass symbol + Georgia italic wordmark. */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.nav-logo {
  display: block;
  height: 36px;
  width: auto;
  background: transparent;
  border: none;
  padding: 0;
}

/* Hero wrapper — positions the SVG rings behind the content. */
.hero {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem 5rem;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG concentric rings — decorative background for the hero. */
.hero-rings {
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 620px;
  height: 620px;
  pointer-events: none;
  z-index: 1;
}

.hero-rings svg { width: 100%; height: 100%; display: block; }

/* Two rings rotate slowly (CW 80s, CCW 120s) to suggest navigation.
   transform-origin uses the SVG user coordinate space (centre of the 560×560 viewBox). */
.ring-spin-cw {
  animation: ringSpinCW 80s linear infinite;
  transform-origin: 280px 280px;
}

.ring-spin-ccw {
  animation: ringSpinCCW 120s linear infinite;
  transform-origin: 280px 280px;
}

@keyframes ringSpinCW  { from { transform: rotate(0deg);  } to { transform: rotate(360deg);  } }
@keyframes ringSpinCCW { from { transform: rotate(0deg);  } to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ring-spin-cw, .ring-spin-ccw { animation: none; }
}

/* ─── HERO TYPOGRAPHY ─────────────────────────────────────────────────────── */

.welcome-greeting {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--white);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.welcome-greeting #welcome-greeting-name { color: var(--purple); }

.eyebrow {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.welcome-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: normal;
  font-size: 62px;
  color: var(--white);
  line-height: 1.02;
  margin-bottom: 1.25rem;
}

.welcome-title span { display: block; }
.welcome-title .accent-purple { color: var(--purple); font-style: italic; }

.welcome-tagline {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--warm-grey);
  margin-bottom: 2.5rem;
  max-width: 520px;
  line-height: 1.55;
}

/* Thin divider between the CTA/stats area and the Part 1/Part 2 cards. */
.hero-divider {
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 2.25rem 0;
}

/* ─── STATS ROW ───────────────────────────────────────────────────────────── */

.welcome-meta {
  display: flex;
  gap: 0;
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0 1.75rem;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.meta-item:first-child { padding-left: 0; }
.meta-item:last-child  { border-right: none; }

.meta-icon {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--white);
  line-height: 1;
}

.meta-item span:last-child {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-grey);
}

/* ─── PART 1 / PART 2 CARDS ───────────────────────────────────────────────── */

.welcome-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 720px;
}

.part-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.part-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
}

.part-card.wind::before    { background: var(--wind); }
.part-card.current::before { background: var(--current); }

.part-label {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
  line-height: 1.45;
}

.part-card.wind    .part-label { color: rgba(140, 89, 150, 0.65); }
.part-card.current .part-label { color: rgba(112, 191, 173, 0.65); }

.part-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.part-card.wind    .part-heading { color: var(--wind); }
.part-card.current .part-heading { color: var(--current); }

.part-card p {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--warm-grey);
  line-height: 1.65;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--white);
  color: var(--black);
  border: none;
  padding: 0.9rem 2.25rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}

.btn-primary:hover { background: var(--warm-grey); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Landing-page hero CTA */
.btn-hero {
  background: transparent;
  border: 1px solid var(--purple);
  color: var(--white);
  padding: 0.95rem 2.25rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-hero:hover, .btn-hero:focus-visible { background: var(--purple); color: var(--white); }
.btn-hero:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 3px; }

.btn-back {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--dark-grey);
  padding: 0.7rem 1.5rem;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 50px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn-back:hover { border-color: var(--dark-grey); color: var(--white); }

/* ─── QUIZ TOPBAR ─────────────────────────────────────────────────────────── */

.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--black);
}

/* Topbar variant of the nav brand (smaller than the landing-page hero). */
.quiz-topbar .nav-symbol,
.results-topbar .nav-symbol { height: 26px; }
.quiz-topbar .nav-wordmark,
.results-topbar .nav-wordmark { font-size: 18px; }

.quiz-progress-text {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
}

/* Gradient progress bar */
.progress-track { height: 3px; background: #1a1a1a; width: 100%; }
.progress-fill {
  height: 100%;
  background: var(--gradient-bar);
  transition: width 0.35s ease;
}

/* ─── QUIZ BODY ───────────────────────────────────────────────────────────── */

#screen-quiz { background: var(--bg); }

.quiz-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.question-card { max-width: 640px; width: 100%; }

/* Neutral instruction line shown beneath the question text. Replaces the
   previous per-question topic descriptor after the Apr 2026 UX refresh.
   `all-small-caps` (rather than plain `small-caps`) forces uppercase letters
   in the source — the leading "M" of "Make" — to render at small-cap height
   too, so every character matches. */
.question-instruction {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-light);
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

.question-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 1.75rem;
}

/* ─── OPTIONS ─────────────────────────────────────────────────────────────── */

.options-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.option-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  line-height: 1.55;
}

.option-btn:hover { border-color: var(--dark-grey); background: #f5f5f5; }

.option-btn.selected {
  border-color: var(--purple);
  background: rgba(140,89,150,0.04);
  font-weight: 400;
}

/* ─── QUIZ NAV ────────────────────────────────────────────────────────────── */

.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

#screen-quiz .btn-primary,
#screen-details .btn-primary,
#payment-section .btn-primary {
  background: var(--black);
  color: var(--white);
}

#screen-quiz .btn-primary:hover,
#screen-details .btn-primary:hover,
#payment-section .btn-primary:hover { background: #222; }

#screen-quiz .btn-back,
#screen-details .btn-back {
  border-color: var(--border);
  color: var(--text-light);
}

#screen-quiz .btn-back:hover,
#screen-details .btn-back:hover {
  border-color: var(--text);
  color: var(--text);
}

/* ─── DETAILS SCREEN ──────────────────────────────────────────────────────── */

#screen-details { background: var(--bg); }
#screen-details .quiz-topbar { background: var(--black); }

.details-card { max-width: 460px; }

.details-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.9rem;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.details-subtitle {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-mid);
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

#details-form { display: flex; flex-direction: column; gap: 0.7rem; }

#details-form input {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.18s;
}

#details-form input:focus { outline: none; border-color: var(--purple); }
#details-form .btn-primary { margin-top: 0.5rem; }

.details-privacy {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-light);
  margin-top: 1rem;
  text-align: center;
}

/* ─── ANALYZING SCREEN ────────────────────────────────────────────────────── */

#screen-analyzing {
  background: var(--black);
  color: var(--white);
  align-items: center;
  justify-content: center;
}

.analyzing-container {
  text-align: center;
  padding: 2rem;
  width: 100%;
  max-width: 540px;
}

.ship-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.ship {
  width: 160px;
  height: auto;
  animation: sail 5s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes sail {
  0%   { transform: translateX(-90px) rotate(-1.5deg); }
  50%  { transform: translateX(0)     rotate(0deg);    }
  100% { transform: translateX(90px)  rotate(1.5deg);  }
}

@media (prefers-reduced-motion: reduce) {
  .ship { animation: none; }
}

.analyzing-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--warm-grey);
  margin-top: 1.75rem;
  line-height: 1.4;
  min-height: 2em;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.analyzing-text.is-visible { opacity: 1; }

/* ─── RESULTS SCREEN ──────────────────────────────────────────────────────── */

#screen-results { background: var(--bg); }

.results-topbar {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--black);
}

.results-hero {
  background: var(--black);
  color: var(--white);
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.results-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(140,89,150,0.2) 0%, rgba(112,191,173,0.14) 40%, transparent 70%);
  pointer-events: none;
}

.results-hero-inner { position: relative; z-index: 1; }

/* Scenario illustration (navigation scene), centred below the scenario
   tagline on the results hero. The illustrations are light-coloured on a
   near-white background, so the frame gives them a dark rounded backdrop
   to sit comfortably against the hero. Gracefully hides via onerror if
   the PNG is missing. */
.scenario-illustration-frame {
  max-width: 300px;
  width: 100%;
  margin: 0 auto 2rem;
  padding: 1rem;
  background: rgba(0,0,0,0.4);
  border-radius: 16px;
  box-sizing: border-box;
}

.scenario-illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.scenario-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: normal;
  font-size: 2.4rem;
  color: var(--white);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.scenario-tagline {
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Gradient bar between tagline and scores */
.scenario-gradient-bar {
  width: 80px;
  height: 2px;
  background: var(--gradient-bar);
  margin: 0 auto 2rem;
}

.scores-display {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.score-block { text-align: center; }

.score-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-grey);
  margin-bottom: 0.4rem;
}

.score-value {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 2.2rem;
  color: var(--white);
  line-height: 1;
}

.score-value.wind    { color: var(--wind); }
.score-value.current { color: var(--current); }
.score-value.total   { color: var(--white); }

.score-band {
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dark-grey);
  margin-top: 0.3rem;
}

/* ─── RESULTS CONTENT ─────────────────────────────────────────────────────── */

.results-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  width: 100%;
}

.results-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1.25rem;
}

.summary-heading {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.1rem;
  color: var(--text);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.summary-heading:first-child { margin-top: 0; }

.onscreen-summary p {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 0.5rem;
  color: var(--text-mid);
}

.summary-bullet { padding-left: 0.5rem; }

.level2-notice {
  text-align: center;
  padding: 0.85rem;
  background: rgba(112,191,173,0.08);
  border: 1px solid rgba(112,191,173,0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--text-mid);
}

/* ─── LEVEL 3 UPSELL ──────────────────────────────────────────────────────── */

.level3-upsell {
  background: var(--black);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}

.level3-upsell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-bar);
}

.level3-upsell h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.level3-upsell p {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--dark-grey);
  margin-bottom: 1rem;
  line-height: 1.65;
}

.level3-upsell .upsell-tagline {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 1.5rem;
}

/* ─── PAYMENT ─────────────────────────────────────────────────────────────── */

.payment-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1.25rem;
}

.payment-section h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 1rem;
}

#stripe-card-element {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.card-errors { color: var(--red); font-size: 0.82rem; min-height: 1.2rem; margin-bottom: 0.5rem; }
.payment-status { color: var(--red); font-size: 0.88rem; margin-top: 0.75rem; text-align: center; }

.payment-success {
  background: rgba(112,191,173,0.07);
  border: 1px solid rgba(112,191,173,0.25);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.payment-success h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.payment-success p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-mid);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .welcome-title { font-size: 44px; }
}

@media (max-width: 600px) {
  .nav { padding: 1rem 1.25rem; }
  .hero { padding: 1rem 1.25rem 4rem; }
  .welcome-title { font-size: 34px; }
  .welcome-tagline { font-size: 1rem; }
  .welcome-parts { grid-template-columns: 1fr; }
  .welcome-meta { gap: 0; }
  .meta-item { padding: 0 1.1rem; }
  .scenario-illustration-frame { max-width: 220px; padding: 0.75rem; }

  /* Pull the ring cluster off to the right so it doesn't dominate
     the hero content on small screens. */
  .hero-rings {
    width: 380px;
    height: 380px;
    right: -180px;
    top: 38%;
    opacity: 0.8;
  }

  .question-text { font-size: 1.2rem; }
  .scores-display { gap: 1.5rem; }
  .scenario-name { font-size: 1.75rem; }
  .results-hero { padding: 2rem 1.25rem; }
  .results-content { padding: 1.5rem 1.1rem; }
  .level3-upsell { padding: 1.75rem 1.25rem; }
}