/* The card is the INNER div, not the <fieldset>.

   A rendered <legend> is anchored to its fieldset's top border and straddles
   it, and no amount of `float`, `display` or `position` moves it — the browser
   ignores all three on that box. So a question long enough to wrap on a phone
   (which is most of these seven) has the border drawn straight through it and
   the frame reads as broken. Giving the border to a wrapper instead puts the
   question above a clean card, renders the same in every browser, and keeps
   the <fieldset>/<legend> pairing a screen reader needs to say which options
   belong to which question. */
.survey fieldset{border:0;padding:0;margin:0 0 1.35rem;min-width:0}
.survey legend{padding:0;margin:0 0 .5rem;font-weight:600;color:var(--fg);
line-height:1.45}
.survey .opts{border:1px solid var(--line);border-radius:.5rem;
padding:.7rem 1.1rem .8rem;background:var(--card)}
.survey .opt{display:flex;align-items:flex-start;gap:.6rem;margin:.45rem 0;
min-height:34px;cursor:pointer}
.survey .opt input{margin-top:.35rem;width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.survey .opt span{color:#d6d8db}
.survey input[type=email]{width:100%;background:var(--card);color:var(--fg);
border:1px solid var(--line);border-radius:.4rem;padding:.7rem .8rem;font:inherit}
.survey label.mail{display:block;margin:1.4rem 0 .4rem;font-size:.92rem;color:var(--muted)}
.survey button{margin-top:1.4rem;min-height:44px;padding:.65rem 1.8rem;
background:var(--accent);color:#14161a;border:0;border-radius:.4rem;
font:600 1rem/1 inherit;cursor:pointer}
.survey button:hover{filter:brightness(1.08)}
.survey .req{font-size:.86rem;color:var(--muted);margin:0 0 1.25rem}
.survey .intro{font-size:1.02rem}
.thanks{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
padding:1.1rem 1.2rem;border-radius:.5rem;margin-bottom:2rem}
.thanks p{margin:.3rem 0}