.choose-quiz{max-width:760px}
.choose-result [hidden],.choose-result-media[hidden]{display:none !important}
.choose-steps{list-style:none;margin:0;padding:0}
.choose-step{display:none}
.choose-step.is-active{display:block}
.choose-step h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:8px 0 26px;max-width:24ch}
.choose-options{display:grid;gap:12px}
.choose-options label{display:flex;align-items:flex-start;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm,16px);padding:18px 20px;cursor:pointer;
  min-height:72px;transition:border-color 140ms ease,transform 140ms ease}
.choose-options label:hover{transform:translateY(-2px)}
.choose-options input{margin:4px 0 0;width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}
.choose-options label:has(input:checked){border-color:var(--deep);background:var(--white)}
.choose-options strong{display:block;font-size:1.02rem}
.choose-options small{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
.choose-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.choose-actions .fine{margin:0;flex:1 1 180px}
.choose-result{max-width:760px}
.choose-result h2{font-size:clamp(2.1rem,4vw,3.4rem);margin:8px 0 16px}
.choose-result>p{color:var(--muted);max-width:52ch}
.choose-result-media{background:var(--surface);border-radius:var(--radius);margin:24px 0;
  display:grid;place-items:center;padding:24px}
.choose-result-media img{width:min(340px,70vw);height:auto;object-fit:contain}
.choose-result .card-actions{margin-top:4px}
.choose-fallback{padding-top:0}
@media(max-width:780px){
  .choose-options label{padding:16px}
  .choose-actions .button{width:100%}
  .choose-actions .fine{order:3}
}

/* cycle 18: the hero's "Help me choose" button is now a link to this section; stop the sticky header covering its top. */
#choose { scroll-margin-top: 96px; }