body{background:var(--bg)}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(rgba(17,17,17,.07) 1.5px,transparent 1.7px);background-size:26px 26px;pointer-events:none;z-index:-1}
.top .by{font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none}
.top .by:hover{text-decoration:underline}
.start-wrap{width:min(1100px,100%);margin:0 auto;padding:28px 16px 70px;display:grid;gap:26px}
.eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
h1{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:-.035em;max-width:760px}
.slab{display:inline-block;background:var(--accent);padding:0 .12em .04em;box-shadow:6px 0 0 var(--accent),-6px 0 0 var(--accent);transform:rotate(-1.2deg);margin-top:6px}
.lead{margin-top:16px;font-size:1.05rem;color:#333;max-width:620px}
.start-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
@media(max-width:880px){.start-grid{grid-template-columns:minmax(0,1fr)}.preview-col{display:none!important}}
.form{display:grid;gap:16px}
.slug{display:flex;align-items:center;border:2px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.slug:focus-within{border-color:var(--ink)}
.slug span{padding:0 4px 0 10px;color:var(--muted);font-size:.9rem;white-space:nowrap}
.slug span:last-child{padding:0 10px 0 0}
.slug input{border:0!important;padding-left:0;padding-right:0;min-width:60px;flex:1}
.slug input:focus{outline:none}
small.ok{color:var(--green);font-weight:600}
small.no{color:var(--red);font-weight:600}
.types{border:0;display:grid;gap:8px}
.types>span{font-size:.8rem;font-weight:600}
.type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:560px){.type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.type{position:relative;border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;display:grid;gap:2px}
.type input{position:absolute;opacity:0;pointer-events:none}
.type b{font-size:.9rem}
.type small{font-size:.75rem;color:var(--muted)}
.type:has(input:checked){border-color:var(--ink);background:var(--accent-lt);box-shadow:3px 3px 0 var(--ink)}
.type:has(input:focus-visible){outline:3px solid #2B6BFF;outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ts:empty{display:none}
.btn.big{min-height:52px;font-size:1rem}
.fine{font-size:.8rem;color:var(--muted);text-align:center}
.done{display:grid;gap:12px;justify-items:center;text-align:center;padding:36px 22px}
.done h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.6rem;letter-spacing:-.02em}
.done p{max-width:440px;color:#333}
.big-ico{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:var(--accent);display:grid;place-items:center;font-size:1.6rem;box-shadow:4px 4px 0 var(--ink)}
.linkish{border:0;background:none;padding:4px 0;font-size:.85rem;font-weight:600;text-decoration:underline;cursor:pointer;color:var(--ink)}
.preview-col{position:sticky;top:84px}
.preview-col .phone{height:620px;width:100%}
.hand{font-family:'Caveat',cursive;font-size:1.6rem;text-align:center;margin-top:12px;transform:rotate(-3deg)}
.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:760px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perks div{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r);padding:14px;display:grid;gap:4px}
.perks b{font-size:.92rem}
.perks span{font-size:.8rem;color:var(--muted)}
.done .linkish{justify-self:center}