*{box-sizing:border-box;margin:0;padding:0}
:root{--pink:#ff2d55;--ink:#2b3445;--mute:#7a7f8a}
html,body{min-height:100%}
body{font-family:"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:linear-gradient(#fde8ee 0,#fff 340px) #fff no-repeat;display:flex;flex-direction:column;align-items:center;padding:56px 20px 40px}
body.modal-open{overflow:hidden}
.bot-rule{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.logo{display:block;width:320px;max-width:90%;height:auto}
main{width:100%;max-width:580px;text-align:center;margin-top:90px}
.lead{display:flex;gap:10px;align-items:center;justify-content:center;font-size:23px;line-height:1.5;font-weight:300}
.badge{flex:none;width:42px;height:42px;border-radius:50%;background:#000;color:#fff;border:3px solid var(--pink);font-weight:700;font-size:14px;display:grid;place-items:center}
.cta{display:block;width:100%;margin-top:92px;padding:26px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-size:28px;font-weight:300;cursor:pointer;transition:.15s}
.cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.exit{display:inline-block;margin-top:36px;color:#000;font-size:20px;font-weight:300}
.legal{margin-top:42px;color:var(--mute);font-size:17px;line-height:1.45;font-weight:300}
.legal p+p{margin-top:22px}
.legal a{color:#000}
/* modal */
#modal{position:fixed;inset:0;background:rgba(20,16,28,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;z-index:9}
#modal[hidden]{display:none}
.card{width:100%;max-width:440px;background:#fff;border-radius:18px;padding:28px 24px 24px;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:pop .2s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.card h2{font-size:21px;font-weight:600;margin-bottom:6px}
.card .sub{color:var(--mute);font-size:15px;line-height:1.5;margin-bottom:18px}
.vbox{display:flex;align-items:center;gap:14px;border:1px solid #d5d8de;background:#f8f9fb;border-radius:8px;padding:14px 16px;cursor:pointer;user-select:none}
.vbox:focus-visible,.cta:focus-visible{outline:3px solid #ffb3c2}
.vbox .sq{width:28px;height:28px;border:2px solid #aab0bb;border-radius:5px;background:#fff;display:grid;place-items:center;flex:none}
.vbox.loading .sq{border-color:transparent;border-top-color:var(--pink);border-radius:50%;animation:spin .7s linear infinite}
.vbox.checked .sq{background:#22b358;border-color:#22b358}
.vbox.checked .sq::after{content:"";width:8px;height:14px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
@keyframes spin{to{transform:rotate(360deg)}}
.vbox span.t{font-size:16px}
.vbox small{margin-left:auto;color:#999;font-size:11px}
.agree{display:flex;gap:10px;margin:16px 0;font-size:14px;line-height:1.5;color:#444;cursor:pointer}
.agree input{margin-top:3px;width:18px;height:18px;accent-color:var(--pink);flex:none}
.msg{min-height:20px;font-size:14px;margin-bottom:8px}.msg.ok{color:#169a48}.msg.err{color:#d8283f}
.go{width:100%;padding:15px;border:0;border-radius:999px;background:var(--pink);color:#fff;font-size:18px;cursor:pointer}
.go:disabled{background:#e8c3cb;cursor:not-allowed}
.x{position:absolute;margin:-12px 0 0 0;right:22px;background:none;border:0;font-size:26px;color:#999;cursor:pointer}
.card{position:relative}
#fallback{margin-top:10px;font-size:14px;text-align:center}
@media(max-width:480px){.lead{font-size:19px}.cta{font-size:22px;padding:22px;margin-top:60px}main{margin-top:60px}.legal{font-size:15px}}