/* Shared conversion buttons retain the landing page's original styling. */
button.button { font-family: var(--font); cursor: pointer; }
button.button:focus-visible,
.quiz-modal button:focus-visible,
.quiz-modal input:focus-visible,
.quiz-modal textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

/* Native dialog supplies the backdrop and makes the page behind it inert. */
html.quiz-is-open { overflow: hidden; }
.quiz-modal { width: min(36rem, calc(100% - 1.5rem)); max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); background: var(--paper); color: var(--charcoal); box-shadow: 0 20px 70px rgb(23 50 77 / 20%); font-family: var(--font); }
.quiz-modal[open] { display: flex; flex-direction: column; }
.quiz-modal::backdrop { background: rgb(15 30 44 / 55%); }
.quiz-modal [hidden], .quiz-honeypot { display: none !important; }
.quiz-topbar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem 0.75rem 1.5rem; border-bottom: 1px solid var(--line); }
.quiz-topbar .eyebrow { font-size: 0.5625rem; letter-spacing: 0.12em; }
.quiz-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--navy); font: 1.8rem/1 var(--font); cursor: pointer; transition: background 160ms ease; }
.quiz-close:hover { background: var(--surface); }
.quiz-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; scroll-behavior: auto; }
.quiz-heading { margin-bottom: 1.5rem; }
.quiz-heading h2 { font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.035em; text-wrap: pretty; }
.quiz-heading h2:focus { outline: none; }
.quiz-heading p { margin-top: 0.875rem; color: #535b59; font-size: 0.9375rem; line-height: 1.65; }

/* Six focused steps, with comfortable touch targets and native radio controls. */
.quiz-progress-region { position: sticky; top: 0; z-index: 1; margin-bottom: 1.5rem; padding-block: 0.25rem 0.75rem; background: var(--paper); }
.quiz-progress-label { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; color: var(--navy); font-size: 0.75rem; font-weight: 600; }
.quiz-progress-label span:last-child { color: var(--muted); font-size: 0.5rem; letter-spacing: 0.1em; }
.quiz-modal progress { display: block; appearance: none; width: 100%; height: 3px; border: 0; border-radius: 0; background: var(--line); accent-color: var(--navy); }
.quiz-modal progress::-webkit-progress-bar { background: var(--line); }
.quiz-modal progress::-webkit-progress-value { background: var(--navy); transition: width 160ms ease; }
.quiz-modal progress::-moz-progress-bar { background: var(--navy); }
.quiz-answer-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz-options { display: grid; gap: 0.625rem; }
.quiz-option { display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.75rem 0.875rem; border: 1px solid #c5cbc3; border-radius: var(--radius); font-size: 0.9375rem; line-height: 1.4; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.quiz-option:hover { border-color: var(--navy); }
.quiz-option:has(input:checked) { border-color: var(--navy); background: #e8ede9; box-shadow: inset 0 0 0 1px var(--navy); color: var(--navy); }
.quiz-option input { appearance: auto; width: 18px; height: 18px; flex-shrink: 0; margin: 0; accent-color: var(--navy); }
.quiz-other { margin-top: 0.875rem; }
.quiz-input-label { display: block; margin-bottom: 0.5rem; color: var(--navy); font-size: 0.8125rem; font-weight: 600; }
.quiz-text-input { display: block; width: 100%; min-width: 0; min-height: 50px; padding: 0.875rem; border: 1px solid #9ba79c; border-radius: var(--radius); background: var(--white); color: var(--charcoal); font: 1rem/1.5 var(--font); }
.quiz-text-input::placeholder { color: #687169; opacity: 1; }
textarea.quiz-text-input { min-height: 110px; resize: vertical; }
.quiz-text-input[aria-invalid="true"] { border-color: #9b3629; }
.quiz-hint { min-height: 1.25rem; margin-top: 0.75rem; color: var(--muted); font-size: 0.75rem; }
.quiz-hint.is-invalid { color: #9b3629; }

/* Actions and asynchronous submission feedback. */
.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.quiz-actions-stacked { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.quiz-modal .button { min-height: 52px; padding: 0.875rem 1.25rem; }
.quiz-secondary { min-height: 46px; padding: 0.75rem 0.875rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--navy); font: 600 0.875rem/1.4 var(--font); cursor: pointer; transition: background 160ms ease; }
.quiz-secondary:hover { background: var(--surface); }
.quiz-review { font-size: 0.75rem; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.quiz-modal button:disabled { cursor: not-allowed; }
.quiz-modal .button:disabled { background: #deded4; color: #626862; transform: none; box-shadow: none; }
.quiz-modal .quiz-secondary:disabled { opacity: 0.6; }
.quiz-status, .quiz-error { font-size: 0.8125rem; line-height: 1.6; }
.quiz-status:not(:empty), .quiz-error:not(:empty) { margin-top: 1rem; }
.quiz-status { color: var(--navy); }
.quiz-error { color: #9b3629; }
.quiz-modal form[aria-busy="true"] { cursor: progress; }

@media (min-width: 600px) {
  .quiz-scroll { padding: 2rem 2.5rem; }
  .quiz-topbar { padding-inline: 2.5rem 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .quiz-modal[open] .quiz-heading,
  .quiz-modal[open] [data-quiz-view]:not([hidden]),
  .quiz-modal[open] .quiz-options { animation: quiz-appear 160ms ease; }
  @keyframes quiz-appear { from { opacity: 0.65; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-modal *, .quiz-modal *::before, .quiz-modal *::after { transition: none !important; animation: none !important; }
}
@media print { .quiz-modal { display: none !important; } }