/*
 * Page-specific glue between the standalone quiz component (quiz.css/quiz.js,
 * unmodified) and this site's design system (styles.css). Loaded after both,
 * so its rules win the cascade without editing either file directly.
 */

/* ── Retint the quiz to the site's teal/coral palette instead of its own default red ── */
.quiz {
  --quiz-bg: var(--paper);
  --quiz-surface: var(--mist);
  --quiz-border: var(--line);
  --quiz-text: var(--ink);
  --quiz-muted: var(--muted);
  --quiz-accent: var(--coral);
  --quiz-accent-soft: rgba(238, 107, 87, 0.12);
  --quiz-positive: var(--teal-deep);
  --quiz-positive-soft: rgba(0, 124, 120, 0.12);
  --quiz-caution: #9a6b16;
  --quiz-caution-soft: rgba(197, 155, 53, 0.16);
  --quiz-radius: 8px;
  padding: 0;
  font-family: inherit;
}

.quiz__button {
  font-weight: 850;
}

.quiz__button--primary {
  box-shadow: 0 16px 34px rgba(238, 107, 87, 0.26);
}

/* ── Fit the quiz into the "contact" section in place of the old form ── */

.contact--quiz {
  display: block;
}

.contact-intro {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 5vw, 44px);
  text-align: center;
}

.contact-intro h2 {
  margin-bottom: 16px;
}

.contact-intro p {
  color: var(--muted);
  font-size: 1.06rem;
}

.contact--quiz .quiz {
  max-width: 46rem;
  margin: 0 auto;
}

.contact--quiz .quiz__stage {
  background: var(--mist);
  border-color: var(--line);
  box-shadow: var(--soft-shadow);
}

.contact--quiz .direct-contact {
  margin-top: clamp(32px, 6vw, 56px);
}

@media (max-width: 620px) {
  .contact-intro {
    text-align: left;
  }
}