/* Quick Score (Proposed funnel). Mobile first: Facebook traffic is almost all phones. Builds on site.css tokens.
   Page accents follow the 2026-10-19 redesign (navy #12303F, amber CTAs); the chart keeps Aaron's report colors. */
.qs-wrap { --qs-navy: #12303F; --qs-red: #8B0000; padding-block: 1.25rem 3rem; padding-inline: 16px; }
.qs-in-w { max-inline-size: 36rem; margin-inline: auto; display: grid; gap: 1.25rem; }
.qs-top h1 { font-family: var(--font-head); color: var(--qs-navy); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem); line-height: 1.1; margin: 0.2rem 0 0.4rem; text-wrap: balance; }
.qs-top .lead { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
.qs-in-w.going .qs-top .lead { display: none; }
.qs-top .eyebrow { margin: 0; }

.qs { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem; display: grid; gap: 1rem; box-shadow: 0 6px 24px oklch(20% 0.02 245 / 0.06); }
.qs-prog { display: grid; gap: 0.35rem; font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qs-bar { display: block; block-size: 8px; border-radius: 99px; background: color-mix(in oklch, var(--qs-navy) 12%, white); overflow: clip; }
.qs-bar i { display: block; block-size: 100%; inline-size: 0; background: var(--gold); border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) { .qs-bar i { transition: inline-size 240ms ease-out; } }
.qs:not(.stepped) .qs-prog { display: none; }

.qs-step { border: 0; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.qs:not(.stepped) .qs-step + .qs-step { border-block-start: 1px solid var(--line); padding-block-start: 1rem; }
.qs.stepped .qs-step:not(.on) { display: none; }
.qs-step legend { font-family: var(--font-head); font-weight: 600; color: var(--qs-navy); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.9rem); line-height: 1.15; padding: 0; margin-block-end: 0.6rem; float: left; inline-size: 100%; text-wrap: balance; }
.qs-step legend + * { clear: both; }
.qs-n { margin: 0; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--qs-red); }
.qs-help { margin: 0; color: var(--muted); }
.qs-in { font: inherit; font-size: 1.15rem; min-block-size: 56px; padding: 0.6rem 0.9rem; border: 1px solid color-mix(in oklch, var(--ink) 30%, white); border-radius: var(--radius-md); background: var(--white); color: var(--ink); inline-size: 100%; }
.qs-in:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--qs-navy); }
.qs-in[aria-invalid="true"] { border-color: var(--qs-red); }

.qs-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.qs-sc, .qs-pill { position: relative; }
.qs-sc input, .qs-pill input { position: absolute; opacity: 0; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.qs-sc span, .qs-pill span { display: grid; place-items: center; min-block-size: 60px; border: 1.5px solid color-mix(in oklch, var(--qs-navy) 30%, white); border-radius: var(--radius-md); background: var(--white); font-family: var(--font-ui); font-weight: 700; font-size: 1.35rem; color: var(--qs-navy); font-variant-numeric: tabular-nums; }
.qs-sc input:checked + span, .qs-pill input:checked + span { background: var(--qs-navy); border-color: var(--qs-navy); color: var(--white); }
.qs-sc input:focus-visible + span, .qs-pill input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.qs-sc span:active, .qs-pill span:active { transform: scale(0.96); }
@media (prefers-reduced-motion: no-preference) { .qs-sc span, .qs-pill span { transition: transform 140ms ease-out, background-color 160ms ease-out; } }
@media (hover: hover) and (pointer: fine) { .qs-sc span:hover, .qs-pill span:hover { border-color: var(--qs-navy); } }
.qs-ends { display: flex; justify-content: space-between; gap: 1rem; margin: -0.3rem 0 0; font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); }
.qs-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.qs-pill span { font-size: 1.15rem; }
.qs-step .btn.lg { inline-size: 100%; min-block-size: 56px; font-size: 1.05rem; }
.qs-nav { display: flex; justify-content: flex-start; min-block-size: 44px; }
.qs:not(.stepped) .qs-nav, .qs:not(.stepped) .qs-next, .qs:not(.stepped) .qs-need { display: none; }
.qs-need { display: none; margin: 0; }
.qs-next:disabled { opacity: 0.55; cursor: not-allowed; }
.qs-next:disabled + .qs-need { display: block; }
.qs-prov { margin: 0; }

/* result */
.qs-card, .qs-result, .qs-offer, .qs-share { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem; }
.qs-card .fine { margin: 0.5rem 0 0; }
.qs-ch svg { display: block; inline-size: 100%; block-size: auto; max-inline-size: 32rem; margin-inline: auto; }
.qs-k { margin: 0; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qs-red); }
.qs-area { font-family: var(--font-head); color: var(--qs-navy); font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem); margin: 0.1rem 0 0.3rem; line-height: 1.15; }
.qs-result p { margin-block: 0.3rem; }
.qs-tip { margin-block-start: 0.9rem; padding: 0.9rem 1rem; border-inline-start: 4px solid var(--gold); background: color-mix(in oklch, var(--gold) 9%, white); border-radius: var(--radius-md); }
.qs-tip p { margin: 0.25rem 0; }
.qs-under { margin-block-start: 0.9rem !important; }
.qs-offer { background: var(--qs-navy); border-color: var(--qs-navy); color: var(--white); }
.qs-offer h2 { font-family: var(--font-head); font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); line-height: 1.15; margin: 0.2rem 0 0.5rem; color: var(--white); }
.qs-offer .qs-k { color: var(--gold); }
.qs-offer .fine { color: color-mix(in oklch, var(--white) 80%, transparent); }
.qs-offer .qs-cta { inline-size: 100%; min-block-size: 56px; white-space: normal; }
.qs-offer.calm { background: var(--white); color: var(--ink); border-color: var(--line); }
.qs-offer.calm h2 { color: var(--qs-navy); }
.qs-offer.calm .fine { color: var(--muted); }
.qs-share h2 { margin: 0 0 0.3rem; color: var(--qs-navy); }
.qs-share .btn { inline-size: 100%; min-block-size: 52px; }
.qs-link { display: block; margin-block-start: 0.6rem; }
.qs-link input { inline-size: 100%; font: inherit; font-size: 0.85rem; padding: 0.55rem 0.7rem; min-block-size: 44px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--muted); }
.qs-link input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.qs-safety { border-radius: var(--radius-lg); }
.qs-safety .btn { inline-size: 100%; min-block-size: 56px; margin-block: 0.4rem; }

/* Header over an AI ambient loop (pages.ambient), under a navy scrim. The video is absolutely placed, so the header keeps its size. */
.qs-top.has-amb { position: relative; isolation: isolate; overflow: clip; border-radius: var(--radius-lg); padding: 1.1rem 1.1rem 2.4rem; background: var(--brand-deep); }
.qs-top.has-amb h1 { color: var(--white); }
.qs-top.has-amb .lead { color: color-mix(in oklch, var(--white) 88%, transparent); }
.qs-top.has-amb .eyebrow { color: var(--gold); }
.qs-top.has-amb .amb video { object-position: 80% 40%; }
.qs-top.has-amb .amb::after { background: linear-gradient(90deg, color-mix(in oklch, var(--brand-deep) 88%, transparent) 0%, color-mix(in oklch, var(--brand-deep) 55%, transparent) 70%, color-mix(in oklch, var(--brand-deep) 30%, transparent) 100%); }
.qs-in-w.going .qs-top.has-amb { padding-block-end: 2.2rem; }
/* The home page pick ("What worries you most?"), named back on the quiz */
.qs-picked { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.45; color: var(--white); background: oklch(0% 0 none / 0.3); border-inline-start: 3px solid var(--gold); border-radius: var(--radius-md); padding: 0.55rem 0.8rem; }
.qs-in-w.going .qs-picked { display: none; }
.qs-path { margin: 0.5rem 0 1rem; padding-inline-start: 1.3rem; display: grid; gap: 0.35rem; }