/* Layout: plain survey page — logo, yellow notice, progress bar, "Question N", full-width blue buttons */
:root{
  --bg:#FFFFFF; --ink:#2E2E2E; --muted:#555; --blue:#2F6FC6; --blue-d:#2860AE; --notice:#F9E4A3; --bar:#E1E1E1; --fill:#F2B744; --red:#E85A54; --orange:#F7861A; --green:#2E8B3E;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font);margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 32px}
.wrap{max-width:600px;margin:0 auto;display:grid;gap:22px}
.logo{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:6px}
.logo .o{width:54px;height:54px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 34%,#FFB13B,#F7861A 60%,#D9620B)}
.logo .o::after{content:"";position:absolute;top:-8px;left:28px;width:20px;height:12px;background:var(--green);border-radius:0 100% 0 100%;transform:rotate(-15deg)}
.logo .t{font-weight:800;font-size:clamp(24px,6.4vw,34px);line-height:1;color:var(--blue);letter-spacing:-.01em}
.logo .t small{display:block;font-size:.5em;font-weight:700;color:var(--orange);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.notice{background:var(--notice);border-radius:6px;padding:14px 16px;text-align:center;font-size:clamp(16px,4.2vw,19px);line-height:1.4;color:var(--muted)}
.bar{height:10px;border-radius:6px;background:var(--bar);overflow:hidden}
.bar i{display:block;height:100%;background:var(--fill);transition:width .35s}
.step{display:grid;gap:18px;text-align:center}
.step h2{font-size:clamp(26px,6.5vw,34px);margin:0;font-weight:800}
.step .q{font-size:clamp(20px,5.4vw,26px);margin:0;color:var(--muted);line-height:1.3;text-wrap:balance}
.btns{display:grid;gap:16px}
.btn{width:100%;min-height:64px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:inherit;font-size:clamp(19px,5vw,23px);cursor:pointer;padding:14px}
.btn:hover,.btn:active{background:var(--blue-d)}
.btn:focus-visible{outline:3px solid var(--fill);outline-offset:3px}
.btn:disabled{opacity:.7}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pick{aspect-ratio:1;max-width:100%;border:2px solid #E8EEF7;border-radius:10px;background:#F4F7FC;cursor:pointer;display:grid;place-items:center;position:relative;padding:0}
.pick:hover{border-color:var(--blue)}
.pick:focus-visible{outline:3px solid var(--fill);outline-offset:2px}
.orn{width:66%;aspect-ratio:1;border-radius:50%;position:relative;margin-top:8%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55) 0 6%,transparent 18%),
             radial-gradient(rgba(150,60,0,.18) .8px,transparent 1.2px) 0 0/5px 5px,
             radial-gradient(circle at 40% 35%,#FFB13B 0%,#F7861A 55%,#D9620B 100%);
  box-shadow:inset -7px -9px 0 rgba(150,60,0,.18)}
.orn::after{content:"";position:absolute;top:-14%;left:52%;width:40%;height:22%;background:linear-gradient(135deg,#4FB24A,#21762E);border-radius:0 100% 0 100%;transform:rotate(-12deg)}
.pick.popped .orn{animation:pop .45s forwards}
@keyframes pop{40%{transform:scale(1.2)}100%{transform:scale(0);opacity:0}}
.pick .gift{position:absolute;font-size:40px;opacity:0;transform:scale(.4);transition:.35s .3s}
.pick.popped .gift{opacity:1;transform:scale(1)}
.deadline{justify-self:center;background:var(--red);color:#fff;border-radius:6px;padding:12px 20px;font-size:17px}
.fine{font-size:12.5px;line-height:1.5;color:#777;text-align:center;margin:8px 0 0}
.fine a{color:inherit}
@media (prefers-reduced-motion:reduce){.pick.popped .orn{animation:none;opacity:0}}