:root{
  --paper:#EEF0FA; --panel:#FFFFFF; --field:#F6F7FC; --ink:#1B1B2F; --muted:#565A73; --line:#D3D7E6;
  --blue:#2F5BFF; --blue2:#1D3FD8; --pink:#FF3D7F; --orange:#FF7A1A; --yellow:#FFD23F; --teal:#00C2B2; --good:#12935F; --bad:#D6336C;
  --legend:#B8860B;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#13141C; --panel:#1D1F2D; --field:#262838; --ink:#F1F2F9; --muted:#A4A7BE; --line:#34374B; --good:#3DD598; --bad:#FF7AA2; --legend:#FFD23F; }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.5}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* nav */
.nav{background:var(--blue);color:#fff}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.logo{font-weight:800;font-size:24px;letter-spacing:-0.02em;text-decoration:none;color:#fff;margin-right:auto}
.logo span{display:inline-block;background:var(--yellow);color:#1B1B2F;padding:0 8px;border-radius:8px;margin-left:4px;transform:rotate(-4deg)}
.nav a.link{color:#fff;text-decoration:none;font-weight:600;font-size:16px}
.nav a.link:hover{text-decoration:underline}

/* buttons */
.btn{display:inline-block;font:inherit;font-weight:800;font-size:17px;cursor:pointer;border-radius:14px;padding:12px 20px;border:2px solid #1B1B2F;background:var(--yellow);color:#1B1B2F;text-decoration:none;box-shadow:0 5px 0 #1B1B2F;transform:translateY(-3px)}
.btn:active{box-shadow:0 1px 0 #1B1B2F;transform:translateY(1px)}
.btn.ghost{background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* hero */
.hero{background:var(--blue);color:#fff;position:relative;overflow:hidden;padding:40px 0 64px}
.hero::before{content:"";position:absolute;inset:-50%;background:repeating-linear-gradient(60deg,transparent 0 110px,rgba(29,63,216,.55) 110px 200px);pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
@media (min-width:880px){.hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
.hero h1{font-size:clamp(44px,8vw,88px);line-height:.95;letter-spacing:-0.035em;margin:0 0 18px;font-weight:800}
.hero p.lede{font-size:20px;max-width:34ch;margin:0 0 26px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}

/* playable card */
.play{background:#fff;color:#1B1B2F;border:3px solid #1B1B2F;border-radius:28px;padding:22px;box-shadow:0 12px 0 #1B1B2F}
.play-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.play-tag{background:#1B1B2F;color:var(--yellow);font-weight:800;border-radius:999px;padding:4px 14px;font-size:15px}
.timer{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:24px;background:conic-gradient(var(--yellow) calc(var(--p,1)*360deg),#E6E8F2 0);position:relative}
.timer::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.timer b{position:relative;z-index:1}
.play h2{font-size:32px;line-height:1.1;margin:4px 0 18px;letter-spacing:-0.02em}
.play-opts{display:grid;gap:10px}
.play-opts button{font:inherit;font-size:19px;font-weight:600;text-align:left;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;border:2px solid #1B1B2F;background:#fff;color:#1B1B2F;cursor:pointer}
.play-opts button b{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.play-opts button.right{background:#19C37D;color:#fff}
.play-opts button.right b{background:#1B1B2F}
.play-opts button.wrong{opacity:.4}
.play-opts button.picked.wrong{opacity:1;background:#FFE3EC}
.play-msg{min-height:1.5em;margin:14px 0 0;font-weight:600}
.play-msg a{font-weight:800}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.play-opts button.right{animation:pop .45s ease-out}

/* sections */
section.band{padding:64px 0}
section.band h2.big{font-size:clamp(32px,5vw,52px);line-height:1;letter-spacing:-0.03em;margin:0 0 12px}
section.band p.sub{color:var(--muted);font-size:19px;max-width:56ch;margin:0 0 30px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.steps li{background:var(--panel);border:2px solid var(--ink);border-radius:20px;padding:20px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:#1B1B2F;font-weight:800;font-size:22px;margin-bottom:10px;border:2px solid #1B1B2F}
.steps h3{margin:0 0 4px;font-size:21px}
.steps p{margin:0;color:var(--muted)}

/* forms */
.formcard{background:var(--panel);border:2px solid var(--ink);border-radius:24px;padding:22px;max-width:760px}
.grid2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f{margin-bottom:14px}
.f label,.f .lbl{display:block;font-weight:700;font-size:15px;margin-bottom:5px}
.f .help{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:4px}
input[type=text],input[type=email],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px}
textarea{resize:vertical;min-height:84px}
.answers{display:grid;gap:10px;margin-bottom:6px}
.ans{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}
.ans .ltr{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--ink);color:var(--panel)}
.ans label.c{display:flex;gap:6px;align-items:center;font-size:14px;font-weight:700;color:var(--muted);margin:0;white-space:nowrap}
.ans input[type=radio]{width:20px;height:20px;accent-color:#19C37D}
.checks{display:grid;gap:10px;margin:8px 0 18px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:500}
.checks input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--blue)}
.hidden{display:none!important}
.radios{display:grid;gap:8px}
.radios label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);background:var(--field);border-radius:12px;padding:10px 12px;font-weight:500;font-size:16px;cursor:pointer}
.radios label b{display:block}
.radios input{margin-top:4px;accent-color:var(--blue)}
.err{color:var(--bad);font-weight:600;min-height:1.4em;margin:0 0 10px}

/* operator */
.operator{background:#1B1B2F;color:#F1F2F9}
.operator .formcard{background:#24263A;border-color:#3A3D55;color:#F1F2F9}
section.band.operator p.sub{color:#C4C7DB}
.operator input,.operator select,.operator textarea{background:#2E3047;border-color:#43465F;color:#F1F2F9}
.operator .radios label{background:#2E3047;border-color:#43465F}
.operator .help{color:#B8BBD1}
.offer{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px;max-width:640px}
.offer li{padding-left:34px;position:relative;font-size:18px}
.offer li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#1B1B2F;font-weight:800;font-size:15px;display:grid;place-items:center}

footer{padding:30px 0 50px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap}

/* simple pages */
.page{max-width:720px;margin:0 auto;padding:48px 16px 70px}
.page h1{font-size:clamp(36px,6vw,58px);line-height:1;letter-spacing:-0.03em;margin:0 0 16px}
.page h2{font-size:24px;margin:30px 0 8px}
.page p,.page li{font-size:18px}
.page ol li{margin-bottom:8px}

/* sponsor */
.sponsor{background:var(--yellow);color:#1B1B2F}
section.band.sponsor p.sub{color:#3A3B52}
.sponsor .formcard{border-color:#1B1B2F;background:#fff;color:#1B1B2F}
.sponsor input,.sponsor select,.sponsor textarea{background:#F6F7FC;border-color:#C9CDDD;color:#1B1B2F}
.sponsor .radios label{background:#F6F7FC;border-color:#C9CDDD}
.sponsor .help{color:#565A73}
.sponsor .offer li::before{background:#1B1B2F;color:var(--yellow)}
.price{margin-left:auto;font-weight:800;font-size:20px;white-space:nowrap;padding-left:10px}
.sponsor .btn{background:#1B1B2F;color:#fff}
.picks{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.f .pick{margin:0;font-weight:500;display:flex;gap:10px;align-items:center;border:1.5px solid #C9CDDD;background:#F6F7FC;border-radius:12px;padding:10px 12px;cursor:pointer;font-size:16px}
.pick b{display:block}
.pick .sw{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid #1B1B2F}
.pick input{accent-color:#1B1B2F}
.pick:has(input:checked),.sponsor .radios label:has(input:checked){border-color:#1B1B2F;background:#fff;box-shadow:0 3px 0 #1B1B2F}
.qblock{border:1.5px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}
.qblock h3{margin:0 0 10px;font-size:18px}

/* live preview */
.buy-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.buy-grid{grid-template-columns:minmax(0,1fr) 280px}.phone-wrap{position:sticky;top:20px}}
.phone-wrap{margin:0;display:grid;gap:10px;justify-items:center}
.phone{width:min(260px,70vw);aspect-ratio:9/16;border:4px solid #1B1B2F;border-radius:28px;overflow:hidden;background:#1B1B2F;box-shadow:0 10px 0 #1B1B2F}
.phone canvas{width:100%;height:100%;display:block}
.phone-wrap figcaption{width:min(260px,70vw);background:#fff;color:#1B1B2F;border:2px solid #1B1B2F;border-radius:14px;padding:8px 12px;font-size:14px;overflow-wrap:anywhere}
.phone-wrap figcaption b{display:block;font-size:12px;color:#565A73}
.brief-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.brief-grid{grid-template-columns:minmax(0,1fr) 280px}}
.page.wide{max-width:1100px}