/* ==========================================================================
   Quiz CSS — Dominance Scorecard
   Pixel-perfect vanilla CSS port of React/Tailwind components.
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
  --quiz-primary: #0d71b9;
  --quiz-primary-dark: #04446e;
  --quiz-accent: #0170bb;
  --quiz-text: #121212;
  --quiz-text-muted: rgba(4, 68, 110, 0.8);
  --quiz-card-bg: #e6f4fd;
  --quiz-white: #ffffff;
  --quiz-bg-gradient: linear-gradient(180deg, #EDF5FF 0%, #F5F7FA 100%);
  --quiz-selected-gradient: linear-gradient(95deg, rgb(4, 68, 110) 13.5%, rgb(1, 112, 187) 75.2%);
  --quiz-progress-gradient: linear-gradient(108deg, rgb(13, 113, 185) 13.5%, rgb(54, 168, 250) 75.2%);
  --quiz-cta-gradient: linear-gradient(135deg, rgb(255, 173, 0), rgb(255, 205, 18));
  --quiz-cta-gradient-results: linear-gradient(103deg, rgb(255, 173, 0) 13.5%, rgb(255, 205, 18) 75.2%);
}

/* ---------- Reset for quiz scope ---------- */
.quiz-page *,
.quiz-page *::before,
.quiz-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Page background ---------- */
.quiz-page {
  background: var(--quiz-bg-gradient);
  min-height: 100vh;
  font-family: 'Archivo', sans-serif;
  color: var(--quiz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Container ---------- */
.quiz-container {
  max-width: 1520px;
  margin: 0 auto;
  padding: 150px var(--lma-container-padding, 200px);
}

/* ---------- Section spacing (progress -> question area) ---------- */
.quiz-sections {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* ---------- Question area (question text + answers + back) ---------- */
.quiz-question-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ==========================================================================
   PROGRESS BAR (QuizProgress.tsx)
   ========================================================================== */
.quiz-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Track area — 82px tall to fit the thumb */
.quiz-progress__track-area {
  position: relative;
  height: 82px;
}

/* Track bar — full width, centered vertically */
.quiz-progress__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: rgba(18, 18, 18, 0.1);
  overflow: hidden;
}

/* Fill — inside the track */
.quiz-progress__fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--quiz-progress-gradient);
  transition: width 0.3s ease;
}

/* Start circle — ON TOP of track, left edge */
.quiz-progress__start {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 10;
  width: 41px;
  height: 41px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--quiz-progress-gradient);
}

/* End circle — ON TOP of track, right edge */
.quiz-progress__end {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 10;
  width: 41px;
  height: 41px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #D7E0E6;
}

/* Thumb / percentage badge — 82px, highest z-index */
.quiz-progress__thumb-wrapper {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  transition: left 0.3s ease;
}

.quiz-progress__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--quiz-progress-gradient);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.quiz-progress__percent {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.72px;
  color: var(--quiz-white);
}

/* Labels below the track */
.quiz-progress__labels {
  display: flex;
  justify-content: space-between;
}

.quiz-progress__label {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

/* ==========================================================================
   QUESTION CARD (QuestionCard.tsx)
   ========================================================================== */

/* Animated wrapper — applies slide in/out */
.quiz-question-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.quiz-question-content.is-entering {
  animation: slideIn 0.25s ease-out forwards;
}

.quiz-question-content.is-exiting {
  animation: slideOut 0.25s ease-out forwards;
}

/* Question text */
.quiz-question__text {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -1.04px;
  color: var(--quiz-text);
}

/* Question hint */
.quiz-question__hint {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-text-muted);
}

/* 3-column answer grid */
.quiz-answer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ==========================================================================
   ANSWER CARD (AnswerCard.tsx)
   ========================================================================== */
.quiz-answer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 21px;
  border-radius: 20px;
  border: 1px solid var(--quiz-primary);
  background: rgba(54, 168, 250, 0.1);
  padding: 40px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--quiz-primary-dark);
  font-family: 'Archivo', sans-serif;
  width: 100%;
}

.quiz-answer:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.quiz-answer:focus-visible {
  outline: 2px solid var(--quiz-primary);
  outline-offset: 2px;
}

/* Selected state */
.quiz-answer.is-selected {
  border-color: transparent;
  background: var(--quiz-selected-gradient);
  color: var(--quiz-white);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Letter (A. B. C.) */
.quiz-answer__letter {
  flex-shrink: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.28px;
}

/* Label + tag wrapper */
.quiz-answer__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding-right: 24px;
}

.quiz-answer__label {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.96px;
}

.quiz-answer__tag {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

.quiz-answer.is-selected .quiz-answer__tag {
  color: rgba(255, 255, 255, 0.75);
}

/* Radio circle — top-right */
.quiz-answer__radio {
  position: absolute;
  right: 20px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--quiz-primary);
  transition: border-color 0.2s ease;
}

.quiz-answer.is-selected .quiz-answer__radio {
  border-color: var(--quiz-white);
}

.quiz-answer__radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--quiz-white);
  display: none;
}

.quiz-answer.is-selected .quiz-answer__radio-dot {
  display: block;
}

/* ==========================================================================
   BACK BUTTON + HINT ROW (QuizShell.tsx)
   ========================================================================== */
.quiz-nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.quiz-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--quiz-text-muted);
  transition: color 0.2s ease;
  padding: 0;
}

.quiz-back-btn:hover {
  color: var(--quiz-primary-dark);
}

.quiz-nav-separator {
  color: rgba(4, 68, 110, 0.3);
}

.quiz-nav-hint {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-text-muted);
}

/* ==========================================================================
   LEAD CAPTURE FORM (LeadCaptureForm.tsx)
   ========================================================================== */
.quiz-lead-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 20px;
  border: 1px solid rgba(13, 113, 185, 0.3);
  background: var(--quiz-white);
  padding: 40px;
}

/* Form header */
.quiz-lead-form__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-lead-form__title {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -1.6px;
  color: var(--quiz-text);
}

.quiz-lead-form__title-accent {
  color: var(--quiz-accent);
}

.quiz-lead-form__subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

/* Form rows */
.quiz-lead-form__row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.quiz-lead-form__row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* Field group */
.quiz-lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-lead-form__label {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.96px;
  color: var(--quiz-primary-dark);
}

.quiz-lead-form__input {
  width: 100%;
  height: 52px;
  border-radius: 100px;
  border: 2px solid var(--quiz-primary);
  background: var(--quiz-card-bg);
  padding-left: 30px;
  padding-right: 16px;
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  color: var(--quiz-primary-dark);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.quiz-lead-form__input::placeholder {
  color: rgba(4, 68, 110, 0.6);
}

.quiz-lead-form__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 113, 185, 0.3);
}

/* Description text (repeated below form fields) */
.quiz-lead-form__desc {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

/* Privacy notes */
.quiz-lead-form__privacy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 20px;
  color: var(--quiz-primary-dark);
  opacity: 0.8;
}

.quiz-lead-form__privacy-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quiz-lead-form__privacy-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: currentColor;
}

/* Error message */
.quiz-error {
  padding: 12px 16px;
  border-radius: 8px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  font-size: 14px;
}

/* ==========================================================================
   CTA BUTTON (shared)
   ========================================================================== */
.quiz-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 9999px;
  padding: 10px 25px;
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--quiz-text);
  background: var(--quiz-cta-gradient);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.quiz-cta:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.quiz-cta:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.quiz-cta--results {
  background: var(--quiz-cta-gradient-results);
}

/* Inline spinner for CTA */
.quiz-cta__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--quiz-text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ==========================================================================
   CALCULATING SCREEN (CalculatingScreen.tsx)
   ========================================================================== */
.quiz-calculating {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.quiz-calculating__card {
  max-width: 1298px;
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  border-radius: 20px;
  border: 1px solid var(--quiz-primary);
  background: var(--quiz-card-bg);
  padding: 40px;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: calcFadeIn 0.3s ease-out forwards;
}

/* Spinner — 185x185 SVG */
.quiz-calculating__spinner {
  width: 185px;
  height: 185px;
  animation: spin 1.5s linear infinite;
}

/* Title */
.quiz-calculating__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quiz-calculating__heading {
  font-size: 65px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -2.6px;
}

.quiz-calculating__heading-dark {
  color: var(--quiz-text);
}

.quiz-calculating__heading-accent {
  letter-spacing: -0.64px;
  color: var(--quiz-accent);
}

/* Body text */
.quiz-calculating__body {
  font-size: 35px;
  line-height: 1.8;
  letter-spacing: -1.4px;
  color: var(--quiz-text-muted);
}

/* ==========================================================================
   RESULTS / SCORE OVERVIEW (ScoreOverview.tsx)
   ========================================================================== */
/* ==========================================================================
   RESUME PROMPT (Welcome back modal)
   ========================================================================== */
.quiz-resume {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: 20px;
  border: 1px solid var(--quiz-primary);
  background: var(--quiz-white);
  padding: 60px 40px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.quiz-resume__heading {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -1.28px;
  color: var(--quiz-text);
}

.quiz-resume__desc {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

.quiz-resume__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   RESULTS / SCORE OVERVIEW (ScoreOverview.tsx)
   ========================================================================== */
.quiz-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  border: 1px solid var(--quiz-primary);
  background: var(--quiz-white);
  padding: 40px;
  text-align: center;
}

.quiz-results__label {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.96px;
  color: var(--quiz-primary-dark);
}

.quiz-results__score {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -1.6px;
  animation: scorePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.quiz-results__score-value {
  color: var(--quiz-text);
}

.quiz-results__score-max {
  color: var(--quiz-accent);
}

.quiz-results__tier {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

.quiz-results__tier-name {
  font-weight: 700;
}

.quiz-results__summary {
  font-size: 20px;
  line-height: 1.6;
  color: var(--quiz-primary-dark);
}

/* Actions row */
.quiz-results__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Microcopy below CTA */
.quiz-results__microcopy {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--quiz-text-muted);
  opacity: 0.8;
}

/* Restart link */
.quiz-results__restart {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--quiz-text-muted);
  text-decoration: underline;
  transition: color 0.2s ease;
  padding: 0;
}

.quiz-results__restart:hover {
  color: var(--quiz-primary-dark);
}

.quiz-results__error {
  font-size: 14px;
  color: #DC2626;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes calcFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scorePopIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

/* ==========================================================================
   RESPONSIVE — Mobile (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .quiz-container {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .quiz-question__text {
    font-size: 22px;
  }

  .quiz-answer-grid {
    grid-template-columns: 1fr;
  }

  .quiz-lead-form__row-3 {
    grid-template-columns: 1fr;
  }

  .quiz-lead-form__row-2 {
    grid-template-columns: 1fr;
  }

  .quiz-lead-form__title {
    font-size: 28px;
  }

  .quiz-calculating__heading {
    font-size: 40px;
  }

  .quiz-calculating__body {
    font-size: 20px;
  }
}

/* ==========================================================================
   Quiz Landing Page — Hero + Intro
   ========================================================================== */

/* --- Hero Section --- */
.quiz-landing-hero {
  padding: 80px var(--lma-container-padding, 200px) 40px;
  text-align: center;
  position: relative;
  background: #fff url('../images/page-hero-bg.png') center bottom / 100% auto no-repeat;
  overflow: hidden;
}

.quiz-landing-hero__inner {
  max-width: 1520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.quiz-landing-hero__heading {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: -1.6px;
  color: #121212;
}

.quiz-landing-hero__subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(4, 68, 110, 0.8);
  max-width: 700px;
}

.quiz-landing-hero__badges {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.quiz-landing-hero__badge {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #04446e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quiz-landing-hero__cta {
  background: linear-gradient(95deg, #ffad00 13.5%, #ffcd12 75.2%);
  border: none;
  border-radius: 100px;
  padding: 14px 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.8px;
  color: #121212;
  cursor: pointer;
  transition: opacity 0.2s;
}
.quiz-landing-hero__cta:hover {
  opacity: 0.9;
}

/* --- Intro Section --- */
.quiz-landing-intro {
  padding: 150px var(--lma-container-padding, 200px);
}

.quiz-landing-intro__inner {
  max-width: 1520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
}

.quiz-landing-intro__card {
  background: white;
  border: 1px solid #0d71b9;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.quiz-landing-intro__icon {
  font-size: 56px;
  line-height: 1;
}

.quiz-landing-intro__title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -1.6px;
  line-height: 1.4;
  color: #121212;
  text-align: center;
}

.quiz-landing-intro__desc {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #04446e;
  text-align: center;
}

.quiz-landing-intro__health {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  width: 100%;
}

.quiz-landing-intro__health-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -1.6px;
  line-height: 1.4;
  color: #121212;
}

.quiz-landing-intro__health-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(4, 68, 110, 0.8);
}

.quiz-landing-intro__checks {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.quiz-landing-intro__check {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: #04446e;
  opacity: 0.8;
}

.quiz-landing-intro__check svg {
  flex-shrink: 0;
}

.quiz-landing-intro__begin {
  background: linear-gradient(93deg, #ffad00 13.5%, #ffcd12 75.2%);
  border: none;
  border-radius: 100px;
  padding: 10px 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.8px;
  color: #121212;
  cursor: pointer;
  transition: opacity 0.2s;
}
.quiz-landing-intro__begin:hover {
  opacity: 0.9;
}

/* --- Mobile Landing --- */
@media (max-width: 768px) {
  .quiz-landing-hero {
    padding: 50px 14px 40px;
  }
  .quiz-landing-hero__heading {
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 1.2;
  }
  .quiz-landing-hero__subtitle {
    font-size: 16px;
  }
  .quiz-landing-hero__badges {
    flex-direction: column;
    gap: 10px;
  }
  .quiz-landing-hero__cta {
    font-size: 18px;
    width: 100%;
  }

  .quiz-landing-intro {
    padding: 50px 14px;
  }
  .quiz-landing-intro__inner {
    gap: 50px;
  }
  .quiz-landing-intro__title {
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 1.2;
  }
  .quiz-landing-intro__desc {
    font-size: 16px;
  }
  .quiz-landing-intro__health-title {
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 1.2;
  }
  .quiz-landing-intro__health-subtitle {
    font-size: 16px;
    line-height: 1.2;
  }
  .quiz-landing-intro__checks {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .quiz-landing-intro__check {
    font-size: 16px;
    line-height: 1.2;
  }
}