/* Quiz visual system: aligned with the current MIR landing page. */
:root {
  --quiz-bg: #eaf4f8;
  --quiz-ink: #18364c;
  --quiz-ink-soft: #537083;
  --quiz-accent: #3d9fbd;
  --quiz-accent-deep: #20748f;
  --quiz-control-ink: #06384d;
  --quiz-line: rgba(53, 128, 154, .20);
  --quiz-surface: rgba(255, 255, 255, .76);
  --quiz-surface-strong: rgba(249, 253, 255, .92);
  --quiz-shadow: 0 24px 50px -30px rgba(37, 105, 131, .48), 0 4px 12px rgba(74, 137, 159, .12);
}

html[data-theme="dark"] {
  --quiz-bg: #07142c;
  --quiz-ink: #edfaff;
  --quiz-ink-soft: #b7d0dc;
  --quiz-accent: #6bd9ea;
  --quiz-accent-deep: #a2eff6;
  --quiz-control-ink: #052f43;
  --quiz-line: rgba(157, 230, 246, .22);
  --quiz-surface: rgba(8, 27, 55, .76);
  --quiz-surface-strong: rgba(12, 35, 67, .90);
  --quiz-shadow: 0 24px 54px -30px rgba(0, 0, 0, .78), 0 4px 12px rgba(0, 0, 0, .24);
}

html[data-page="quiz"],
html[data-page="quiz"] body {
  min-height: 100%;
  background: var(--quiz-bg);
}

html[data-page="quiz"] body {
  color: var(--quiz-ink);
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  background:
    linear-gradient(180deg, rgba(244, 251, 253, .78) 0%, rgba(234, 246, 250, .62) 44%, rgba(225, 241, 247, .86) 100%),
    url("../assets/landing-sunrise.png") center top / cover fixed;
}

html[data-page="quiz"][data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(3, 13, 34, .72) 0%, rgba(5, 18, 44, .62) 48%, rgba(4, 14, 34, .90) 100%),
    url("../assets/landing-night.png") center top / cover fixed;
}

html[data-page="quiz"] main,
html[data-page="quiz"] .quiz.quiz-standalone,
html[data-page="quiz"] .quiz.quiz-standalone .page {
  min-height: 100vh;
}

html[data-page="quiz"] .quiz.quiz-standalone .page {
  width: min(100% - 32px, 1060px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 52px) 0;
}

html[data-page="quiz"] .quiz.quiz-standalone .card {
  width: min(100%, 940px);
  min-height: min(740px, calc(100vh - 64px));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 62px) clamp(30px, 4vw, 48px) !important;
  border: 1px solid var(--quiz-line) !important;
  border-radius: 22px !important;
  background: var(--quiz-surface) !important;
  box-shadow: var(--quiz-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-page="quiz"] .quiz.quiz-standalone .step-header {
  margin-bottom: clamp(24px, 3vw, 38px);
}

html[data-page="quiz"] .form-title,
html[data-page="quiz"] .pricing-title {
  color: var(--quiz-ink) !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.13 !important;
  letter-spacing: 0 !important;
  text-align: left;
}

html[data-page="quiz"] .form-hint,
html[data-page="quiz"] .form-hint-small,
html[data-page="quiz"] .pricing-subtitle,
html[data-page="quiz"] .report-summary {
  color: var(--quiz-ink-soft) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

html[data-page="quiz"] .form label,
html[data-page="quiz"] .form-label {
  color: var(--quiz-ink) !important;
  font-weight: 700 !important;
}

html[data-page="quiz"] .form input:not([type="checkbox"]),
html[data-page="quiz"] .form textarea,
html[data-page="quiz"] .form select {
  color: var(--quiz-ink) !important;
  border: 1px solid var(--quiz-line) !important;
  border-radius: 12px !important;
  background: var(--quiz-surface-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}

html[data-page="quiz"] .form input:focus,
html[data-page="quiz"] .form textarea:focus,
html[data-page="quiz"] .form select:focus {
  border-color: var(--quiz-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quiz-accent) 20%, transparent) !important;
}

html[data-page="quiz"] .btn {
  min-height: 50px;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html[data-page="quiz"] .btn-primary,
html[data-page="quiz"] .btn.btn-primary {
  color: var(--quiz-control-ink) !important;
  border: 1px solid var(--quiz-accent-deep) !important;
  background: linear-gradient(135deg, var(--quiz-accent), var(--quiz-accent-deep)) !important;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--quiz-accent-deep) 74%, transparent) !important;
}

html[data-page="quiz"] .btn-primary:hover,
html[data-page="quiz"] .btn.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

html[data-page="quiz"] .btn-secondary,
html[data-page="quiz"] .btn-outline {
  color: var(--quiz-accent-deep) !important;
  border: 1px solid var(--quiz-line) !important;
  background: rgba(255,255,255,.48) !important;
}

html[data-page="quiz"] .step-tracker__dot {
  color: var(--quiz-ink-soft) !important;
  border-color: var(--quiz-line) !important;
  background: var(--quiz-surface-strong) !important;
}

html[data-page="quiz"] .step-tracker__step--done .step-tracker__dot,
html[data-page="quiz"] .step-tracker__step--current .step-tracker__dot {
  color: var(--quiz-control-ink) !important;
  border-color: var(--quiz-accent) !important;
  background: var(--quiz-accent) !important;
  box-shadow: 0 4px 12px -6px var(--quiz-accent-deep);
}

html[data-page="quiz"] .step-tracker__label {
  color: var(--quiz-ink-soft) !important;
  font-weight: 700 !important;
}

html[data-page="quiz"] .step-tracker__step--done .step-tracker__label,
html[data-page="quiz"] .step-tracker__step--current .step-tracker__label {
  color: var(--quiz-accent-deep) !important;
}

html[data-page="quiz"] .step-tracker__line,
html[data-page="quiz"] .step-tracker__line--done {
  background: var(--quiz-line) !important;
}

html[data-page="quiz"] .step-tracker__line--done {
  background: color-mix(in srgb, var(--quiz-accent) 70%, var(--quiz-line)) !important;
}

html[data-page="quiz"] .balance-card,
html[data-page="quiz"] .pricing-card,
html[data-page="quiz"] .report-personal-card,
html[data-page="quiz"] .report-section,
html[data-page="quiz"] .trial-summary,
html[data-page="quiz"] .trial-info p,
html[data-page="quiz"] .pricing-info {
  border-color: var(--quiz-line) !important;
  background: var(--quiz-surface-strong) !important;
  box-shadow: 0 12px 26px -22px rgba(37, 105, 131, .36) !important;
}

html[data-page="quiz"] .balance-card.is-active,
html[data-page="quiz"] .pricing-card--featured {
  border-color: var(--quiz-accent) !important;
  box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--quiz-accent) 54%, transparent) !important;
}

html[data-page="quiz"] .rating-value,
html[data-page="quiz"] .kpi-value,
html[data-page="quiz"] .pricing-amount,
html[data-page="quiz"] .section-title {
  color: var(--quiz-accent-deep) !important;
}

html[data-page="quiz"] .rating-dot.is-active,
html[data-page="quiz"] .rating-dot:hover,
html[data-page="quiz"] .segmented-btn.is-active {
  color: var(--quiz-control-ink) !important;
  background: var(--quiz-accent) !important;
}

html[data-page="quiz"] .rating-dot {
  color: var(--quiz-accent-deep) !important;
  border-color: var(--quiz-line) !important;
  background: transparent !important;
}

html[data-page="quiz"] .rating-dot.is-active,
html[data-page="quiz"] .rating-dot:hover {
  border-color: var(--quiz-accent) !important;
  box-shadow: 0 6px 14px -10px var(--quiz-accent-deep);
}

html[data-page="quiz"] .balance-card-title,
html[data-page="quiz"] .pricing-plan-name,
html[data-page="quiz"] .section-title,
html[data-page="quiz"] .trial-summary__value {
  color: var(--quiz-ink) !important;
}

html[data-page="quiz"] .balance-card-subtitle,
html[data-page="quiz"] .pricing-currency,
html[data-page="quiz"] .pricing-feature,
html[data-page="quiz"] .pricing-info__text,
html[data-page="quiz"] .trial-info p,
html[data-page="quiz"] .trial-summary__label {
  color: var(--quiz-ink-soft) !important;
}

html[data-page="quiz"] .balance-card-emoji,
html[data-page="quiz"] .balance-card-emoji .mir-icon {
  color: var(--quiz-accent-deep) !important;
}

html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
  color: var(--quiz-control-ink) !important;
  border: 1px solid var(--quiz-accent-deep) !important;
  background: var(--quiz-accent) !important;
  box-shadow: 0 10px 22px -14px var(--quiz-accent-deep) !important;
}

html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn:hover,
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn:focus-visible {
  background: var(--quiz-accent) !important;
  color: var(--quiz-control-ink) !important;
  filter: brightness(1.06);
}

html[data-page="quiz"] .segmented {
  padding: 4px;
  border: 1px solid var(--quiz-line);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
}

html[data-page="quiz"] .segmented-btn {
  border-radius: 999px !important;
  color: var(--quiz-ink-soft) !important;
  font-weight: 700 !important;
}

html[data-page="quiz"] .pricing-badge,
html[data-page="quiz"] .report-personal-card__eyebrow {
  color: var(--quiz-accent-deep) !important;
  background: color-mix(in srgb, var(--quiz-accent) 14%, transparent) !important;
}

html[data-page="quiz"] .form a,
html[data-page="quiz"] .pricing-terms-link a {
  color: var(--quiz-accent-deep) !important;
  font-weight: 700;
}

@media (max-width: 640px) {
  html[data-page="quiz"] body {
    background-attachment: scroll;
  }

  html[data-page="quiz"] .quiz.quiz-standalone .page {
    width: 100%;
    padding: 0;
  }

  html[data-page="quiz"] .quiz.quiz-standalone .card {
    min-height: 100dvh;
    border-width: 0 !important;
    border-radius: 0 !important;
    padding: 24px 18px 92px !important;
    box-shadow: none !important;
  }

  html[data-page="quiz"] .form-title,
  html[data-page="quiz"] .pricing-title {
    font-size: 28px !important;
  }

  html[data-page="quiz"] .form-hint,
  html[data-page="quiz"] .pricing-subtitle,
  html[data-page="quiz"] .report-summary {
    font-size: 15px !important;
    overflow-wrap: anywhere;
  }

  html[data-page="quiz"] .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-page="quiz"] .form-actions .btn {
    width: 100%;
  }
}

/* Keep the quiz in the landing page's cool blue palette. The base stylesheet
   is shared with older pages and still defines a burgundy accent. */
html[data-page="quiz"] {
  --accent: var(--quiz-accent);
  --accentHover: var(--quiz-accent-deep);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--quiz-accent) 16%, transparent),
    0 18px 40px color-mix(in srgb, var(--quiz-accent-deep) 12%, transparent);
}

html[data-page="quiz"] .progress-inner,
html[data-page="quiz"] .step-tracker__line--done {
  background: linear-gradient(
    90deg,
    var(--quiz-accent-deep),
    color-mix(in srgb, var(--quiz-accent) 72%, #d9f4f8)
  ) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--quiz-accent-deep) 34%, transparent) !important;
}

html[data-page="quiz"] .step-header-row .step-label {
  color: var(--quiz-accent-deep) !important;
  background: color-mix(in srgb, var(--quiz-accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--quiz-accent) 28%, transparent) !important;
}

html[data-page="quiz"] .step-tracker__step--done .step-tracker__dot {
  border-color: var(--quiz-accent) !important;
  color: var(--quiz-control-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quiz-accent) 16%, transparent),
    0 4px 12px color-mix(in srgb, var(--quiz-accent-deep) 18%, transparent) !important;
}

html[data-page="quiz"] .step-tracker__dot .mir-icon {
  color: inherit !important;
  filter: none !important;
}

html[data-page="quiz"] input[type="range"]::-webkit-slider-thumb {
  background-color: var(--quiz-accent) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--quiz-accent-deep) 36%, transparent) !important;
}

html[data-page="quiz"] input[type="range"]::-moz-range-thumb {
  background-color: var(--quiz-accent) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--quiz-accent-deep) 36%, transparent) !important;
}

html[data-page="quiz"] .quiz .card {
  border-color: color-mix(in srgb, var(--quiz-accent) 12%, transparent) !important;
  background: radial-gradient(
    900px 300px at 0% 0%,
    color-mix(in srgb, var(--quiz-accent) 7%, transparent),
    transparent 60%
  ), var(--quiz-surface) !important;
}

/* Filled controls always use a dark foreground; white text disappears on the
   light cyan accent, especially in the dark theme. */
html[data-page="quiz"] .rating-dot.is-filled,
html[data-page="quiz"] .rating-dot.is-active,
html[data-page="quiz"] .rating-dot:hover,
html[data-page="quiz"] .segmented-btn.is-active,
html[data-page="quiz"] .messenger-btn.is-active,
html[data-page="quiz"] .btn-outline:hover {
  color: var(--quiz-control-ink) !important;
}