:root{--blue:#1d4ed8;--blue-d:#1e3a8a;--yel:#ffd60a;--yel-d:#f5c400;--ink:#0b1220;--muted:#475569;--line:#e2e8f0;--ok:#16a34a;--bg:#f1f5ff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh}
a{color:var(--blue)}
.hide{display:none!important}
/* top progress */
.topbar{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 1px 0 var(--line)}
.tprog{height:8px;background:#dbe4ff}.tprog>i{display:block;height:100%;width:0;background:var(--yel-d);transition:width .3s}
.brandrow{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:14px}
.brandrow b{font-weight:900}
.wrap{max-width:520px;margin:0 auto;padding:18px 16px 24px}
/* hero */
.hero{background:var(--blue);color:#fff;padding:26px 18px 30px;border-radius:0 0 28px 28px}
.hero h1{font-size:40px;line-height:1.04;margin:10px 0 10px;letter-spacing:-.03em;font-weight:900}
.hero h1 mark{background:var(--yel);color:var(--ink);padding:0 6px;border-radius:6px}
.hero p{margin:0;font-size:18px;opacity:.95}
.stat{display:inline-block;background:rgba(255,255,255,.16);border-radius:99px;padding:5px 12px;font-size:14px;font-weight:700}
h2.q{font-size:28px;line-height:1.15;margin:6px 0 18px;letter-spacing:-.02em;font-weight:900}
.qn{font-size:14px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.04em}
.opts{display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:20px;font-weight:800;padding:18px;border:3px solid #c7d2fe;border-radius:18px;background:#fff;color:var(--ink);cursor:pointer;min-height:66px}
.opt .e{font-size:26px}
.opt[aria-pressed=true]{border-color:var(--blue);background:#e0e7ff}
.grid2{grid-template-columns:1fr 1fr}
select,input[type=text],input[type=email],input[type=tel]{width:100%;font:inherit;font-size:19px;padding:16px;border:3px solid #c7d2fe;border-radius:16px;background:#fff;min-height:62px}
select:focus,input:focus{outline:none;border-color:var(--blue)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields{display:grid;gap:10px}
.btn{display:block;width:100%;text-align:center;font:inherit;font-size:21px;font-weight:900;padding:18px;border:0;border-radius:18px;background:var(--yel);color:var(--ink);cursor:pointer;text-decoration:none;min-height:66px;box-shadow:0 4px 0 var(--yel-d)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--yel-d)}
.btn[disabled]{background:#e2e8f0;box-shadow:none;color:#64748b;cursor:default}
.btn.blue{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-d)}
.skip{display:block;margin:14px auto 0;background:none;border:0;font:inherit;font-size:16px;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px}
.micro{font-size:14px;color:var(--muted);text-align:center;margin:10px 0 0}
.err{color:#b91c1c;font-size:15px;font-weight:700;display:none;margin-top:4px}
/* consent: compact but readable */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;color:#1e293b;background:#fff;border:2px solid #c7d2fe;border-radius:14px;padding:12px;margin:14px 0}
.consent input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--blue)}
.turnstile{border:1px dashed #94a3b8;border-radius:10px;padding:6px;font-size:12px;color:var(--muted);text-align:center;margin:0 0 12px}
.foot{font-size:13px;color:var(--muted);padding:18px 16px 28px;max-width:520px;margin:0 auto}
.foot p{margin:4px 0}.foot a{color:var(--muted)}
/* search status bar */
.sbar{padding:10px 16px 12px;background:#0b1220;color:#fff;font-size:15px}
.sbar b{display:block;font-size:15px}
.sbar small{opacity:.8;font-size:13px}
.indet{height:6px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin:7px 0 4px;position:relative}
.indet::after{content:"";position:absolute;inset:0;width:35%;background:var(--yel);border-radius:99px;animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{left:-35%}100%{left:100%}}
.sbar.done{background:var(--ok)}
.sbar.err{background:#7c2d12}
.sbar button{float:right;margin-top:-2px;background:var(--yel);border:0;border-radius:10px;font:inherit;font-weight:900;padding:6px 12px;cursor:pointer}
.proto{display:inline-block;font-size:11px;font-weight:800;background:#fde68a;color:#78350f;border-radius:6px;padding:2px 7px;margin-bottom:6px}
/* checklist progress */
.cprog{padding:10px 16px 0;max-width:520px;margin:0 auto}
.cprog .t{display:flex;justify-content:space-between;font-size:14px;font-weight:800}
.cbar{height:12px;background:#dbe4ff;border-radius:99px;overflow:hidden;margin-top:5px}.cbar>i{display:block;height:100%;width:0;background:var(--ok);transition:width .4s}
/* step card */
.step{background:#fff;border-radius:26px;padding:26px 20px 18px;box-shadow:0 8px 30px rgba(29,78,216,.12);text-align:center;margin-top:14px;animation:pop .35s ease-out}
@keyframes pop{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.step .icon{font-size:64px;line-height:1}
.step .eb{font-size:14px;font-weight:900;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px}
.step h2{font-size:32px;line-height:1.08;margin:0 0 10px;letter-spacing:-.02em;font-weight:900}
.step p.l{font-size:19px;color:#334155;margin:0 0 20px}
.step .small{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.chip{display:inline-block;font-size:13px;font-weight:800;background:#dcfce7;color:#14532d;border-radius:99px;padding:4px 10px}
.ph{display:inline-block;font-size:12px;font-weight:800;background:#fef3c7;color:#92400e;border-radius:8px;padding:3px 8px;margin-bottom:6px}
.alltoggle{display:block;text-align:center;font-size:14px;margin:14px 0 0;color:var(--muted)}
/* result */
.result h2{font-size:30px}
.match{background:#f0fdf4;border:2px solid #86efac;border-radius:16px;padding:12px;text-align:left;font-size:15px;margin:0 0 16px}
.match div+div{border-top:1px solid #bbf7d0;margin-top:8px;padding-top:8px}
/* list view */
.list .it{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;margin:8px 0;font-weight:800}
.list .it .e{font-size:26px}.list .it span.s{margin-left:auto;font-size:13px;color:var(--muted);font-weight:700}
.list .it.done span.s{color:var(--ok)}
.list .it a,.list .it button{margin-left:auto;font-size:14px}
/* welcome + confetti */
.banner{position:fixed;left:12px;right:12px;bottom:14px;z-index:20;background:var(--ink);color:#fff;border-radius:16px;padding:14px 44px 14px 16px;font-weight:800;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:pop .3s}
.banner button{position:absolute;right:6px;top:6px;background:none;border:0;color:#fff;font-size:24px;width:36px;height:36px;cursor:pointer}
.burst{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.burst i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:fall 1.3s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}
.checkmark{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.5);z-index:31;width:110px;height:110px;border-radius:50%;background:var(--ok);color:#fff;font-size:64px;font-weight:900;display:flex;align-items:center;justify-content:center;opacity:0;animation:chk .9s ease-out forwards;pointer-events:none}
@keyframes chk{20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.checkmark{opacity:0}}
/* v3 */
.flowh{font-size:26px;line-height:1.15;margin:4px 4px 2px;color:var(--ink);font-weight:900}
.flows{margin:0 4px 10px;color:var(--muted);font-size:16px}
.gsteps{text-align:left;font-size:16px;line-height:1.45;padding-left:22px;margin:4px 0 16px}
.gsteps li{margin:6px 0}
.gh{text-align:left;font-size:19px;margin:20px 0 6px}
.prog{display:flex;gap:10px;text-align:left;background:#f8fafc;border-radius:14px;padding:12px;margin:8px 0;font-size:15px}
.prog .e{font-size:24px}.prog a{font-weight:800}.prog small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.match .amt{font-size:24px;font-weight:900;color:var(--ok)}
.list .it.gi{border:2px solid var(--ok)}
.alltoggle.mini{font-size:12px;opacity:.75;margin-top:10px}
.xpop{position:fixed;inset:0;z-index:50;background:rgba(11,18,32,.72);display:flex;align-items:center;justify-content:center;padding:16px;animation:pop .25s}
.xin{background:#fff;border-radius:22px;padding:26px 20px 18px;max-width:440px;width:100%;max-height:92vh;overflow:auto;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.xin h2{font-size:27px;line-height:1.15;margin:6px 0 8px}
.xin .btn{margin-top:14px}
.cares{text-align:left;margin:12px 0;padding:12px;border-radius:14px;background:#f0fdf4;border:2px solid #86efac}
.cares .cah{color:#15803d;font-size:17px}
.cares .match{margin:10px 0 6px;border:0;padding:0;background:none}
.cares a.go2{display:inline-block;font-weight:800;margin:4px 0}
.xin .icon{font-size:46px;line-height:1}
.wm{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:900;font-size:20px;letter-spacing:-.02em;color:#fff;line-height:1}
.wm svg{width:22px;height:22px}
.wm b{color:var(--yel);font-weight:900}
.hero .wm{display:flex;width:max-content;margin-bottom:14px}
.wm.dark{color:var(--ink)}.wm.dark b{color:var(--blue)}.wm.dark svg circle,.wm.dark svg path{stroke:var(--blue)}
.brandrow{background:var(--ink);padding:8px 16px 0}.brandrow .wm{font-size:17px}.brandrow .wm svg{width:18px;height:18px}
.brandrow+.sbar{padding-top:6px}
/* v4 */
.react{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:52vh;padding:20px 12px;animation:pop .25s ease-out}
.react .rk{width:58px;height:58px;border-radius:50%;background:var(--ok);color:#fff;font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.react p{font-size:24px;line-height:1.25;font-weight:900;color:var(--ink);margin:0;max-width:360px}
.formfound{margin:-4px 0 12px;font-weight:800;color:var(--ok);font-size:17px}
.plan{max-width:520px;margin:0 auto;padding:10px 16px 0}
.plan .ph1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px}
.plan .ph1 b{font-weight:900}
.plan #waysN{font-size:13px;font-weight:900;color:#fff;background:var(--blue);border-radius:99px;padding:3px 9px;white-space:nowrap}
.cats{display:flex;justify-content:space-between;gap:4px;padding:8px 0 2px}
.cat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--muted);text-align:center;white-space:nowrap;letter-spacing:-.01em}
.cat i{font-style:normal;font-size:17px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:2px solid #dbe4ff}
.cat.on{color:var(--blue-d)}.cat.on i{border-color:var(--blue);box-shadow:0 0 0 3px #dbeafe}
.cat.ok{color:#14532d}.cat.ok i{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:900;font-size:16px}
.step h2.pain{font-size:31px}
.step .stat{font-size:15px;font-weight:800;color:var(--ink);background:#fef9c3;border-radius:12px;padding:8px 10px;margin:-8px 0 18px}
.step .mom{font-size:13.5px;font-weight:800;color:var(--ok);margin:12px 0 0}
.teaser{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:12px 0 0;background:#fff;border:2px dashed #93c5fd;border-radius:16px;padding:12px 14px;font:inherit;font-size:16px;font-weight:800;color:var(--blue-d);text-align:left;cursor:pointer}
.teaser span{font-size:24px;line-height:1}