/* ============================================================
   Quiz, Design B: full-screen, one question, matches landing B.
   Near-black ground, no card, big type, slim progress, hidden keys,
   flat lists, sentence-case display, slide-in per question.
   Tokens only. John 2026-10-22 ("show me the upgraded design").
   ============================================================ */
.sc-qb { background: var(--near-black); color: var(--surface-light); }
.sc-qb {
  --qb-line: rgba(245,246,248,0.14);
  --qb-line-hi: rgba(245,246,248,0.38);
  --qb-fill: rgba(245,246,248,0.04);
  --qb-mute: rgba(245,246,248,0.66);
}

/* Nav: same glass bar as landing */
.sc-qb .nav { background: rgba(20,22,28,0.6) !important; }
.sc-qb .nav-logo { background: var(--surface-light) !important; }

/* No repeated page header: the question is the page */
.sc-qb .ap-head { display: none !important; }
.sc-qb .ap { padding: 132px 0 96px !important; min-height: 100dvh; }
.sc-qb .ap-card { max-width: 720px !important; padding: 0 24px !important; }
.sc-qb .ap-shell { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.sc-qb .qghost, .sc-qb .qkeys { display: none !important; }

/* Progress: one slim full-width bar pinned under the nav, small count */
.sc-qb .ap-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 99; margin: 0 !important; display: block; }
.sc-qb .ap-bar { height: 3px !important; border-radius: 0 !important; background: rgba(245,246,248,0.08) !important; width: 100%; }
.sc-qb .ap-bar i { background: var(--blue-light) !important; border-radius: 0 !important; transition: width .5s var(--ease); }
.sc-qb .ap-count { position: fixed; top: 94px; left: 50%; transform: translateX(-50%); width: min(720px, 100%); padding: 0 24px; text-align: left; font-size: 13px !important; color: var(--qb-mute) !important; letter-spacing: .01em; }

/* Section line ("About you · 3 of 6") reads as quiet context, not a label */
.sc-qb .as-sec { font-size: 13px !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--blue-light) !important; font-weight: 500; margin-bottom: 14px !important; }

/* Question */
.sc-qb .qstep h2 { font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1.1 !important; letter-spacing: -0.015em; color: var(--surface-light) !important; margin: 0 0 14px !important; text-wrap: balance; max-width: 20ch; }
.sc-qb .qstep .qsub { font-size: 17px !important; line-height: 1.55; color: var(--qb-mute) !important; margin: 0 0 32px !important; max-width: 52ch; }
.sc-qb .qstep .qsub .sc-care { color: var(--qb-mute) !important; }

/* Options: big rows, hairline, sentence case, key hidden */
.sc-qb .opt {
  display: flex; align-items: center; gap: 14px;
  padding: 19px 22px !important; margin: 0 0 10px !important; border-radius: 12px !important;
  background: var(--qb-fill) !important; border: 1px solid var(--qb-line) !important;
  font-size: 17px !important; color: var(--surface-light) !important; cursor: pointer;
  transition: border-color .18s ease-out, background .18s ease-out, transform .18s ease-out !important;
}
.sc-qb .opt .key { display: none !important; }
.sc-qb .opt .txt { font-size: 17px !important; line-height: 1.35; color: var(--surface-light) !important; flex: 1; }
.sc-qb .opt .txt::first-letter { text-transform: uppercase; }
.sc-qb .opt small { display: block; font-size: 14px !important; color: var(--qb-mute) !important; margin-top: 3px; }
.sc-qb .opt b { color: var(--surface-light) !important; font-weight: 600; }
.sc-qb .opt::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--qb-line-hi); transition: all .18s ease-out; }
.sc-qb .opt:has(input[type=checkbox])::after { border-radius: 6px; }
@media (hover: hover) { .sc-qb .opt:hover { border-color: var(--qb-line-hi) !important; background: rgba(245,246,248,0.07) !important; } }
.sc-qb .opt:has(input:checked) { background: var(--surface-light) !important; border-color: var(--surface-light) !important; }
.sc-qb .opt:has(input:checked) .txt, .sc-qb .opt:has(input:checked) b { color: var(--ink) !important; }
.sc-qb .opt:has(input:checked) small { color: rgba(18,20,26,0.65) !important; }
.sc-qb .opt:has(input:checked)::after {
  border-color: var(--blue-deep); background: var(--blue-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.sc-qb .opt:active { transform: scale(.995); }

/* Symptom group: flat list, no box inside a box */
.sc-qb .sc-list { background: none !important; border: 0 !important; padding: 0 !important; margin: -10px 0 28px !important; gap: 9px !important; }
.sc-qb .sc-list li { font-size: 16px !important; color: rgba(245,246,248,0.86) !important; padding-left: 20px !important; }
.sc-qb .sc-list li::before { width: 6px !important; height: 6px !important; top: .6em !important; background: var(--blue-light) !important; }

/* Per-symptom rating rows (full audit) */
.sc-qb .sc-row { background: none !important; border: 0 !important; border-top: 1px solid var(--qb-line) !important; border-radius: 0 !important; padding: 18px 0 !important; }
.sc-qb .sc-row-t { font-size: 17px !important; }
.sc-qb .sc-pill { border-radius: 100px !important; padding: 9px 16px !important; font-size: 14px !important; }

/* Nav row */
.sc-qb .qnav { margin-top: 28px !important; align-items: center; }
.sc-qb .qnav-center { justify-content: flex-start !important; }
.sc-qb .qback { font-size: 15px !important; color: var(--qb-mute) !important; padding: 10px 0; }
.sc-qb .qback:hover { color: var(--surface-light) !important; }
.sc-qb .qnext, .sc-qb #qsubmit {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cta) 88%, #fff), var(--cta)) !important; color: var(--near-black) !important; border: 0 !important;
  border-radius: 10px !important; padding: 15px 28px !important; font-weight: 600 !important; font-size: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -6px color-mix(in srgb, var(--cta) 60%, transparent) !important;
  transition: transform .15s ease-out, box-shadow .15s ease-out !important;
}
.sc-qb .qnext:hover, .sc-qb #qsubmit:hover { transform: translateY(-1px); }
.sc-qb .qnext:active, .sc-qb #qsubmit:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.27) !important; }

/* Age */
.sc-qb .age-read { text-align: left !important; }
.sc-qb .age-read b { font-size: 96px !important; color: var(--surface-light) !important; }
.sc-qb .age-read span { color: var(--qb-mute) !important; letter-spacing: .02em !important; text-transform: none !important; font-size: 14px !important; }

/* Contact fields */
.sc-qb .fld input, .sc-qb .fld textarea { background: var(--qb-fill) !important; border: 1px solid var(--qb-line) !important; border-radius: 10px !important; color: var(--surface-light) !important; font-size: 17px !important; padding: 15px 16px !important; }
.sc-qb .fld input:focus, .sc-qb .fld textarea:focus { border-color: var(--blue-light) !important; outline: none; }
.sc-qb .fld__k { color: var(--qb-mute) !important; font-size: 14px !important; }

/* Interstitials: left aligned, larger */
.sc-qb .as-int .as-int-h, .sc-qb .as-int h2 { font-size: clamp(30px, 3.4vw, 46px) !important; }
.sc-qb .as-int .as-int-p { font-size: 17px !important; color: var(--qb-mute) !important; }
.sc-qb .as-int .as-hole { background: none !important; border-top: 1px solid var(--qb-line) !important; border-radius: 0 !important; padding: 16px 0 !important; }

/* Motion: each question slides in */
@keyframes qbIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.sc-qb .qstep.qb-in { animation: qbIn .26s cubic-bezier(.2,.7,.2,1) both; }
.sc-qb .qstep.on .opt { animation: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .sc-qb .qstep.qb-in { animation: none; } }

/* Mobile */
@media (max-width: 640px) {
  .sc-qb .ap { padding: 112px 0 80px !important; }
  .sc-qb .ap-count { top: 82px; }
  .sc-qb .qstep h2 { font-size: 29px !important; }
  .sc-qb .qstep .qsub { font-size: 16px !important; margin-bottom: 24px !important; }
  .sc-qb .opt { padding: 17px 18px !important; }
  .sc-qb .opt .txt { font-size: 16px !important; }
  .sc-qb .qnext, .sc-qb #qsubmit { flex: 1; text-align: center; }
}
html:has(.sc-qb), body.sc-qb, .sc-qb .ap, .sc-qb main { background: var(--near-black) !important; }
/* One progress system: the bar + the section line; the "n of 43" count is hidden */
.sc-qb .ap-count { display: none !important; }
.sc-qb .qnav { gap: 18px; }
.sc-qb .qback { flex: none; }
.sc-qb .opt small::first-letter { text-transform: uppercase; }