/**
 * Quiz Sites - Friendly & Approachable
 *
 * Target: People seeking answers, not therapy jargon
 * Vibe: BuzzFeed quiz meets Headspace
 * Approachable. Bouncy. Colorful. Zero intimidation.
 */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Typography - Friendly & Round */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Quicksand', sans-serif;

  /* Bright, Friendly Palette */
  --bg: #FEFCFB;
  --bg-soft: #FFF8F6;
  --bg-card: #FFFFFF;

  /* Default Primary - Coral/Peach (override per site) */
  --primary: #FF7B54;
  --primary-rgb: 255, 123, 84;
  --primary-hover: #FF6B3D;
  --primary-soft: rgba(255, 123, 84, 0.1);
  --primary-glow: rgba(255, 123, 84, 0.3);

  /* Accent Colors */
  --accent-mint: #7DD3C0;

  /* Text */
  --text: #2D2A32;
  --text-body: #4A4650;
  --text-muted: #7A7582;
  --text-light: #A8A3B0;

  /* Shadows - Soft & Playful */
  --shadow-sm: 0 2px 8px rgba(45, 42, 50, 0.06);
  --shadow-md: 0 4px 20px rgba(45, 42, 50, 0.08);
  --shadow-lg: 0 8px 40px rgba(45, 42, 50, 0.1);
  --shadow-btn: 0 4px 14px rgba(var(--primary-rgb), 0.35);
  --shadow-btn-hover: 0 6px 24px rgba(var(--primary-rgb), 0.45);

  /* Border Radius - Very Round */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 100px;

  /* Transitions - Bouncy */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 200ms var(--ease-smooth);
  --transition-bounce: 400ms var(--ease-bounce);

  /* Layout */
  --max-width: 1000px;
  --content-width: 640px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Fun gradient background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--primary-rgb), 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(125, 211, 192, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(184, 169, 232, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

::selection {
  background: var(--primary);
  color: white;
}

/* ==================== Container ==================== */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ==================== Header ==================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all var(--transition-fast);
}

.site-header.scrolled {
  background: rgba(254, 252, 251, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.logo small {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--primary);
  font-size: 0.7rem;
  padding: 3px 8px;
  background: var(--primary-soft);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.logo a {
  color: inherit;
  text-decoration: none;
}

.logo-peachy {
  text-decoration: none;
}

.logo-peachy:hover small {
  background: var(--primary);
  color: white;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.header-nav a:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

/* ==================== Hero ==================== */
.hero {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 90px 20px 40px;
  position: relative;
}

.hero-content {
  max-width: 600px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 16px;
  opacity: 0;
  animation: pop-in 0.5s var(--ease-bounce) 0.1s forwards;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--text);
  opacity: 0;
  animation: pop-in 0.5s var(--ease-bounce) 0.2s forwards;
}

.hero h1 em {
  font-style: normal;
  color: var(--primary);
  position: relative;
}

.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--primary-soft);
  border-radius: 4px;
  z-index: -1;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-body);
  margin: 0 auto 28px;
  line-height: 1.65;
  opacity: 0;
  animation: pop-in 0.5s var(--ease-bounce) 0.3s forwards;
}

.hero-cta {
  opacity: 0;
  animation: pop-in 0.5s var(--ease-bounce) 0.4s forwards;
}

.hero-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-meta span {
  margin: 0 8px;
  color: var(--accent-mint);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==================== Buttons ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition-bounce);
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--primary);
  color: white !important;
  box-shadow: var(--shadow-btn);
  font-weight: 800;
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-btn-hover);
}

.btn-primary:active {
  transform: translateY(-1px) scale(1);
}

.btn-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #FFFFFF !important;
  box-shadow: var(--shadow-btn);
  font-weight: 800;
}

.btn-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-btn-hover);
  color: #FFFFFF !important;
}

.btn-secondary {
  background: white;
  color: var(--text);
  border: 2px solid #E8E5EC;
  font-weight: 700;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.btn-large {
  padding: 16px 36px;
  font-size: 1.05rem;
}

/* ==================== Sections ==================== */
section {
  padding: 30px 0;
}

/* ==================== Features ==================== */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.feature {
  background: var(--bg-card);
  padding: 18px 16px;
  text-align: center;
  border-radius: var(--radius-md);
  border: 2px solid #F0EDF3;
  transition: all var(--transition-bounce);
}

.feature:hover {
  transform: translateY(-3px);
  border-color: var(--primary-soft);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  display: block;
}

.feature h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.feature p {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .feature {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 14px 16px;
  }

  .feature-icon {
    margin-bottom: 0;
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .feature h3 {
    margin-bottom: 2px;
    font-size: 0.95rem;
  }

  .feature p {
    font-size: 0.8rem;
  }
}

/* ==================== Cards ==================== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border: 2px solid #F0EDF3;
}

.card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--text);
}

.card h3:first-of-type {
  margin-top: 16px;
}

.card p {
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 12px;
}

.card ul {
  margin: 12px 0 12px 20px;
  color: var(--text-body);
}

.card li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.card li::marker {
  color: var(--primary);
}

.card a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.card a:hover {
  text-decoration: underline;
}

/* ==================== Quiz Options ==================== */
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 24px 0;
  align-items: stretch;
}

.quiz-option {
  background: var(--bg-card);
  border: 3px solid #F0EDF3;
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  text-align: center;
  transition: all var(--transition-bounce);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.quiz-option:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.quiz-option h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 700;
}

.quiz-option .time {
  color: var(--primary);
  font-size: 0.85rem;
  margin-bottom: 12px;
  font-weight: 700;
}

.quiz-option p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
  line-height: 1.5;
  flex-grow: 1;
}

.quiz-option .btn {
  margin-top: auto;
}

@media (max-width: 600px) {
  .quiz-options {
    grid-template-columns: 1fr;
  }
}

/* ==================== Footer ==================== */
.site-footer {
  background: #FAFAFA;
  padding: 50px 0 35px;
  margin-top: 50px;
  border-top: 2px solid #F0EDF3;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--primary);
}

.footer-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 0.9rem;
}

.footer-seo {
  text-align: center;
  color: var(--text-light);
  font-size: 0.75rem;
  margin-bottom: 18px;
}

.footer-brand {
  text-align: center;
  color: var(--primary);
  font-size: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ==================== Disclaimer ==================== */
.disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 24px 0;
  padding: 0 4px;
  line-height: 1.5;
}

.disclaimer strong {
  color: var(--text-muted);
  font-weight: 600;
}

/* ==================== CTA Banner ==================== */
.cta-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  padding: 36px 24px;
  border-radius: var(--radius-lg);
  text-align: center;
  margin: 30px 0;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  top: -100px;
  right: -80px;
}

.cta-banner::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  bottom: -60px;
  left: -40px;
}

.peachy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.cta-banner h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 12px 0 8px;
  position: relative;
  z-index: 1;
}

.cta-banner p {
  opacity: 0.95;
  margin-bottom: 18px;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.cta-banner .btn-primary {
  background: white;
  color: var(--primary) !important;
  position: relative;
  z-index: 1;
  font-weight: 800;
}

.cta-banner .btn-primary:hover {
  background: #FFF8F6;
  transform: translateY(-3px) scale(1.02);
}

/* White button variant for CTA banners */
.cta-banner .btn-white {
  background: white;
  color: var(--text);
  font-weight: 800;
}

/* ==================== Quiz Interface ==================== */
.progress-bar {
  height: 8px;
  background: #F0EDF3;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 24px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-mint) 0%, var(--primary) 100%);
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-smooth);
}

.question-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-md);
  border: 2px solid #F0EDF3;
}

.question-number {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 12px;
}

.question-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text);
  line-height: 1.4;
}

.answer-options,
.multi-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-option {
  padding: 16px 20px;
  border: 3px solid #F0EDF3;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-bounce);
  color: var(--text-body);
  background: white;
  font-size: 1rem;
  font-weight: 600;
}

.answer-option:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateX(4px);
}

.answer-option.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

/* Forced Choice */
.forced-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.forced-choice .answer-option {
  text-align: center;
  padding: 20px 16px;
  line-height: 1.5;
}

.forced-choice .answer-option:hover {
  transform: translateY(-3px);
}

@media (max-width: 600px) {
  .forced-choice {
    grid-template-columns: 1fr;
  }
}

/* ==================== Results ==================== */
.results-header {
  text-align: center;
  padding: 44px 32px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
}

.results-header h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
}

.results-header p {
  opacity: 0.95;
  margin-top: 10px;
  font-size: 1.05rem;
}

.score-bar {
  background: #F0EDF3;
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 10px 0;
}

.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-mint) 0%, var(--primary) 100%);
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-smooth);
}

.result-item {
  padding: 20px 0;
  border-bottom: 2px solid #F0EDF3;
}

.result-item:last-child {
  border-bottom: none;
}

.result-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--text);
}

.result-brief {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ==================== Responsive ==================== */
@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  section {
    padding: 20px 0;
  }

  .hero {
    min-height: auto;
    padding: 80px 16px 30px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .hero-meta {
    font-size: 0.8rem;
  }

  .card {
    padding: 20px 18px;
    border-radius: var(--radius-md);
  }

  .card h2 {
    font-size: 1.15rem;
  }

  .question-card {
    padding: 22px 18px;
  }

  .question-text {
    font-size: 1.1rem;
  }

  .cta-banner {
    padding: 28px 18px;
    border-radius: var(--radius-md);
  }

  .cta-banner h3 {
    font-size: 1.2rem;
  }

  .btn-large {
    padding: 14px 28px;
    font-size: 0.95rem;
  }
}

/* ==================== Reduced Motion ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== Focus States ==================== */
.btn:focus-visible,
.answer-option:focus-visible,
a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ==================== Dark Mode ==================== */
/* THE VISITOR'S DEVICE DECIDES (KP 2026-07-20). Previously these rules hung off a
   .dark-mode class set by sites/shared/dark-mode.html — but that file is only
   referenced through `<!--# include -->` SSI directives, and nothing in this stack
   processes SSI (Express sendFile serves these pages verbatim). The class was
   therefore NEVER applied and every spoke was permanently light, whatever the
   phone asked for. Both selectors are kept on each rule: the media query is what
   actually fires, and .dark-mode is retained so anything that does set the class
   still works. Do not "simplify" by dropping one half. */
:root.dark-mode,
.dark-mode {
  --bg: #1A1A2E;
  --bg-soft: #1E1E34;
  --bg-card: #252540;

  --text: #E8E6ED;
  --text-body: #C5C1CD;
  --text-muted: #908C99;
  --text-light: #6B6775;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1A2E;
    --bg-soft: #1E1E34;
    --bg-card: #252540;

    --text: #E8E6ED;
    --text-body: #C5C1CD;
    --text-muted: #908C99;
    --text-light: #6B6775;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3);
  }

  body::before {
    background:
      radial-gradient(ellipse at 0% 0%, rgba(var(--primary-rgb), 0.06) 0%, transparent 50%),
      radial-gradient(ellipse at 100% 100%, rgba(125, 211, 192, 0.04) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(184, 169, 232, 0.03) 0%, transparent 60%);
  }

  .site-header.scrolled { background: rgba(26, 26, 46, 0.95); }

  .card, .feature, .quiz-option, .question-card, .answer-option { border-color: #3A3852; }
  .result-item { border-bottom-color: #3A3852; }

  .btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border-color: #3A3852;
  }

  .answer-option { background: var(--bg-card); }
  .answer-option:hover { background: var(--primary-soft); }

  .site-footer { background: #151528; border-top-color: #3A3852; }
  .cta-banner .btn-primary:hover { background: #F0ECE8; }
  .progress-bar, .score-bar { background: #3A3852; }

  ::-webkit-scrollbar-track { background: #1A1A2E; }
  ::-webkit-scrollbar-thumb { background: #3A3852; border-color: #1A1A2E; }
}

.dark-mode body::before {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--primary-rgb), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(125, 211, 192, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(184, 169, 232, 0.03) 0%, transparent 60%);
}

/* Header */
.dark-mode .site-header.scrolled {
  background: rgba(26, 26, 46, 0.95);
}

/* Borders - replace hardcoded light borders */
.dark-mode .card,
.dark-mode .feature,
.dark-mode .quiz-option,
.dark-mode .question-card,
.dark-mode .answer-option {
  border-color: #3A3852;
}

.dark-mode .result-item {
  border-bottom-color: #3A3852;
}

/* Buttons */
.dark-mode .btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: #3A3852;
}

.dark-mode .answer-option {
  background: var(--bg-card);
}

.dark-mode .answer-option:hover {
  background: var(--primary-soft);
}

/* Footer */
.dark-mode .site-footer {
  background: #151528;
  border-top-color: #3A3852;
}

/* CTA banner buttons */
.dark-mode .cta-banner .btn-primary:hover {
  background: #F0ECE8;
}

/* Score / progress bars */
.dark-mode .progress-bar,
.dark-mode .score-bar {
  background: #3A3852;
}

/* Dark mode scrollbar (needs separate selector, can't nest under .dark-mode) */
.dark-mode ::-webkit-scrollbar-track {
  background: #1A1A2E;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #3A3852;
  border-color: #1A1A2E;
}

/* ==================== References ==================== */
.references {
  font-size: 0.9rem;
  line-height: 1.6;
  padding-left: 1.5em;
  list-style-type: decimal;
}

.references li {
  margin-bottom: 0.75em;
}

.references a {
  word-break: break-word;
}

/* ==================== Social Proof ==================== */
.social-proof {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 16px 0;
}

.social-proof .counter {
  font-weight: 700;
  color: var(--primary);
}

/* ==================== Language Picker ==================== */
.lang-picker {
  position: relative;
  margin-left: 12px;
}

.lang-picker-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-picker-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.lang-picker-btn svg {
  width: 14px;
  height: 14px;
}

.lang-picker-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 140px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
}

.lang-picker:hover .lang-picker-dropdown,
.lang-picker:focus-within .lang-picker-dropdown {
  display: block;
}

.lang-picker-dropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}

.lang-picker-dropdown a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.lang-picker-dropdown a.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.dark-mode .lang-picker-dropdown {
  background: var(--bg-elevated);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ==================== Custom Scrollbar ==================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #E0DCE6;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ==================== Mid-quiz commercial (KP 2026-07-20) ====================
   The "commercial break" shown once between Q5 and Q6. It is built entirely from
   the existing design tokens (--primary is set per-site by each quiz page's inline
   <style>), so it inherits BOTH the site's colour and the visitor's light/dark
   automatically — there is no second palette to maintain here.
   Rendered by quiz-app.js renderAdBreak(); gated behind window.QUIZ_AD. */
.qad {
  background: var(--bg-card);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 26px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: qad-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Soft wash of the site colour so the break reads as a different "channel"
   from the question cards without introducing a hard-coded background. */
.qad::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--primary-soft) 0%, transparent 70%);
  pointer-events: none;
}
.qad > * { position: relative; }

@keyframes qad-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.qad-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-full);
  padding: 5px 13px;
  margin-bottom: 18px;
}

.qad-mascots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 16px;
}
.qad-mascots img { height: clamp(52px, 15vw, 72px); width: auto; display: block; }

.qad h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 10px;
}
.qad h3 .qad-hl { color: var(--primary); }

.qad p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 20px;
}

.qad-free {
  font-size: 0.95rem;
  color: var(--text-body);
  margin: 0 auto 22px;
}
.qad-free strong { color: var(--primary); }

/* The primary action deliberately CONTINUES the quiz — see renderAdBreak(). */
.qad .qad-continue { width: 100%; justify-content: center; color: #fff; }

.qad-secondary {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qad-secondary:hover { color: var(--primary); }

.qad-resume {
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--text-light);
}

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

/* Kill the square grey flash on tap (KP 2026-07-20). Mobile browsers paint a
   RECTANGULAR highlight over the element box on press, which reads as a square
   behind these fully-rounded pills. Removing it and giving :active/:focus their
   own rounded treatment keeps the press feedback on-shape. */
.btn,
.answer-option,
.qad-continue,
button {
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible,
.answer-option:focus-visible {
  outline: 3px solid var(--primary-glow);
  outline-offset: 3px;
}

/* ==================== Halfway encouragement beat ====================
   The lighter of the two interruptions: no pitch, just Peachy telling them
   they're over the hump. Shown at the midpoint of the LONG assessments only. */
.qhalf { text-align: center; padding: 26px 22px 22px; }
.qhalf img {
  height: clamp(64px, 20vw, 92px);
  width: auto;
  display: block;
  margin: 0 auto 14px;
  animation: qad-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.qhalf h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  color: var(--text);
  margin: 0 0 8px;
}
.qhalf h3 .qad-hl { color: var(--primary); }
.qhalf p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto 22px;
}