/* Subhead, proof band, results card and disclaimer for the quiz page. Needs tokens.css + base.css first. */
.quiz-page .subhead { max-width: 28em; margin: -8px auto 20px; font-weight: 600; color: var(--color-text-secondary); text-wrap: balance; }
.quiz-page .subhead span { display: block; }
/* /roofing: guarantee line first (accent mono), then the plain sentence */
.quiz-page .subhead .guar { font: 700 clamp(0.95rem, 3.8vw, 1.15rem)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 8px; }
.quiz-page .subhead .guar + span { font: inherit; text-transform: none; letter-spacing: normal; color: inherit; margin-top: 0; }
.quiz-page .subhead span + span { font: 500 0.82rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-top: 6px; }
@media (min-width: 700px) { .quiz-page .subhead { font-size: 1.15rem; margin-bottom: 28px; } }

/* Dark stat band: three across from tablet up. */
.proof .wrap { text-align: center; grid-template-columns: 1fr; }
.proof .stat b { font-size: clamp(1.6rem, 5vw, 2.4rem); }

/* Results */
.results { text-align: center; }
.results h2 { margin-bottom: 24px; }
.cta-row { margin: 32px 0 0; }
.cta-row .btn { min-width: min(100%, 320px); }

.site-foot .disclaimer { max-width: 60em; font-size: 0.78rem; line-height: 1.5; margin-bottom: 16px; }

/* Field checks (lp.js): inline message under a box, red border while it is wrong. */
.field-err { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.4; color: var(--color-error); }
.field-err:empty { display: none; }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.field-fix { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--color-accent); font: 700 0.88rem var(--font-sans); text-decoration: underline; cursor: pointer; }
.fine.commit { margin: 12px 0 0; color: var(--color-text-secondary); }
.quiz form > h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: 0.8em; }

/* Single-form page (/roofing): every question on one card, radio rows, boxed inputs with the label as placeholder. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.quiz .single { display: block; }
.single .q { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.single legend, .single .q-title { padding: 0; margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.single .q-title { margin-bottom: 14px; }
.radios { display: grid; gap: 4px; }
.radios.inline { display: flex; gap: 8px 32px; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 14px; min-height: 48px; font-size: 1.05rem; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.radio input { appearance: none; -webkit-appearance: none; flex: none; width: 28px; height: 28px; margin: 0; border: 2px solid var(--color-border-strong); border-radius: 50%; background: #fff; cursor: pointer; }
.radio input:checked { border-color: var(--color-accent); background: radial-gradient(circle, var(--color-accent) 0 8px, #fff 9px); }
.radio input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.single .field.ph { margin-bottom: 14px; }
.single .field.ph input { min-height: 56px; padding: 12px 16px; font-size: 1.05rem; }
.single .field.ph input::placeholder { color: var(--color-border-strong); opacity: 1; }
.single .phone-wrap input { padding-left: 16px; }
.btn-3d { margin: 20px 0 5px; padding: 16px 24px; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; box-shadow: 0 5px 0 var(--color-accent-ink); }
.btn-3d:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--color-accent-ink); }
.quiz + .fine { max-width: 640px; margin: 14px auto 0; text-align: center; }
.quiz + .fine.commit { margin-top: 18px; }

/* Results card: centered label, then three big stacked numbers with a caption each. */
.case { max-width: 760px; margin: 0 auto; padding: 28px 24px; text-align: center; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.case .eyebrow { margin: 0 0 14px; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; }
.big-stat { margin: 0 0 20px; }
.big-stat b { display: block; font: 800 clamp(2.3rem, 9vw, 3.75rem)/1.02 var(--font-sans); letter-spacing: -0.03em; color: var(--color-accent); }
.big-stat span { display: block; margin-top: 4px; font-size: 1.15rem; color: var(--color-text-secondary); }
.case .fine { margin: 6px 0 0; }
.proof .stars { color: #f2b01e; letter-spacing: 0.1em; }

/* Client message screenshots: two columns on tablet and up, one on phones. */
.gallery-title { margin: 40px 0 16px; font-size: 1.4rem; }
.gallery { columns: 1; column-gap: 16px; max-width: 900px; margin: 0 auto; text-align: left; }
@media (min-width: 700px) { .gallery { columns: 2; } }
.gallery img { width: 100%; height: auto; margin: 0 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius); break-inside: avoid; background: #1b1d21; }
.gallery-note { margin: 0; }

/* Desktop and tablet: a smaller form. Phones keep the full-size version above. */
@media (min-width: 700px) {
  .quiz-single { max-width: 480px; padding: 20px 24px; }
  .single .q { margin-bottom: 16px; }
  .single legend, .single .q-title { font-size: 1rem; margin-bottom: 6px; }
  .single .q-title { margin-bottom: 10px; }
  .radio { min-height: 34px; gap: 10px; font-size: 0.95rem; }
  .radio input { width: 22px; height: 22px; }
  .radio input:checked { background: radial-gradient(circle, var(--color-accent) 0 6px, #fff 7px); }
  .single .field.ph { margin-bottom: 10px; }
  .single .field.ph input { min-height: 44px; padding: 8px 14px; font-size: 0.95rem; }
  .btn-3d { margin-top: 14px; padding: 12px 20px; font-size: 1.1rem; }
  .field-err { font-size: 0.82rem; }
}

/* Very narrow phones (320px class): keep the longest placeholder from clipping. */
@media (max-width: 359px) { .single .field.ph input { padding: 12px; font-size: 16px; } }

/* Hero eyebrow ("Roofing companies only"): a bold pill so it reads at a glance. */
.quiz-page .eyebrow { display: inline-block; margin: 4px 0 16px; padding: 9px 18px; border-radius: 99px; background: var(--color-accent-subtle); color: var(--color-accent-ink); font: 700 clamp(0.95rem, 3.6vw, 1.2rem)/1.2 var(--font-mono); letter-spacing: 0.1em; }
.single .field.ph[hidden] { display: none; }
/* Opt-in / consent disclosure under the forms. */
.fine.consent { max-width: 640px; margin: 12px auto 0; font-size: 0.74rem; line-height: 1.5; text-align: center; }
.fine.consent a { color: inherit; text-decoration: underline; }