.quiz-header { padding: 20px 0; }
.quiz-page { padding-bottom: 80px; }
.quiz-container { max-width: 680px; }

.quiz-progress {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  overflow: hidden;
  margin-bottom: 32px;
}
.quiz-progress-bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width .2s ease;
}

.quiz-question-label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-ink) 60%, transparent);
  margin-bottom: 8px;
}
.quiz-question h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 24px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: 12px;
  font-size: 15px;
  transition: background .15s ease, border-color .15s ease;
}
.quiz-option:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.quiz-option.is-selected {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: var(--color-accent);
}

.quiz-textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: 12px;
  font: inherit;
  resize: vertical;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.quiz-nav .btn[hidden] { display: none; }
.quiz-btn-back { background: transparent; border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent); }

.result-panel { margin-top: 40px; }
.result-text { margin: 16px 0 32px; font-size: 17px; line-height: 1.6; }

.contact-form { display: grid; gap: 16px; max-width: 420px; }
.quiz-field { display: grid; gap: 6px; font-size: 13px; color: color-mix(in srgb, var(--color-ink) 70%, transparent); }
.quiz-field input {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);
  border-radius: 8px;
  background: var(--color-cream-text);
}
.quiz-honeypot { display: none; }
.form-error { color: var(--color-accent); font-size: 13px; margin-top: 4px; }

.thank-you-panel { margin-top: 40px; }
.thank-you-panel p { margin: 12px 0 20px; }