
:root{--ink:#101828;--cob:#1d4ed8;--deep:#1e3a8a;--sun:#ffd23f;--coral:#ff5d73;--paper:#fffdf2;--mint:#10b981;--wa:#16a34a}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:'Mulish',system-ui,sans-serif;font-size:17px;line-height:1.75;
background-image:radial-gradient(#e9e2c8 1.1px,transparent 1.1px);background-size:26px 26px}
h1,h2,h3{font-family:'Archivo Black',sans-serif;line-height:1.08;letter-spacing:-.01em}
a{color:var(--cob)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.sticker svg{width:100%;height:auto;display:block;transform:rotate(var(--rot,-3deg))}

/* top strap + header */
.strap{background:var(--ink);color:#fde68a;text-align:center;font-size:.78rem;font-weight:700;padding:8px 14px}
header.site{background:var(--cob);border-bottom:5px solid var(--ink);position:sticky;top:0;z-index:60}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .bubble{background:var(--sun);border:4px solid var(--ink);border-radius:18px 18px 18px 4px;padding:6px 14px;font-family:'Archivo Black',sans-serif;font-size:1.3rem;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.logo small{color:#dbeafe;font-weight:800;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.hcta{display:flex;gap:8px}
.callb,.wab{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:.85rem;padding:10px 16px;border-radius:999px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.callb{background:var(--sun);color:var(--ink)}
.wab{background:var(--wa);color:#fff}
.callb svg{width:15px;height:15px;fill:var(--ink)}
.wab svg{width:15px;height:15px;fill:#fff}
.callb:active,.wab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.tabs a{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--ink);font-weight:800;font-size:.78rem}
.tabs a.on{background:var(--sun)}
.tabs a:hover{background:var(--coral);color:#fff}
@media(max-width:820px){.hcta .callb span,.hcta .wab span{display:none}}

/* cover */
.cover{background:var(--cob);color:#fff;border:5px solid var(--ink);border-radius:26px;margin:28px 0;padding:38px 34px;position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;box-shadow:8px 8px 0 var(--ink)}
@media(max-width:820px){.cover{grid-template-columns:1fr}}
.cover .qmark{display:inline-block;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:5px 14px;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-2deg)}
.cover h1{font-size:clamp(1.9rem,4.8vw,3.1rem);margin:14px 0 12px;color:#fff}
.cover h1 mark{background:var(--sun);color:var(--ink);padding:0 8px;border-radius:8px}
.cover p{color:#dbeafe;font-weight:600;max-width:56ch}
.cover .mini{margin-top:14px;font-size:.75rem;color:#bfdbfe;font-weight:700}

/* sticky note */
.note{background:var(--sun);border:4px solid var(--ink);padding:20px 22px;max-width:640px;margin:26px auto;transform:rotate(-1.2deg);box-shadow:6px 6px 0 rgba(16,24,40,.2);font-weight:600}
.note b.t{display:block;font-family:'Archivo Black',sans-serif;font-size:.95rem;margin-bottom:6px}
.note.pink{background:var(--coral);color:#fff;transform:rotate(1deg)}
.note.pink b.t{color:#fff}
.note.ink{background:var(--ink);color:#fde68a;transform:rotate(-.6deg)}
.note.ink b.t{color:var(--sun)}
.note.ink a{color:var(--sun)}

/* Q&A stream */
.qa{margin:34px 0}
.q{display:flex;gap:12px;align-items:flex-start;margin:34px 0 14px}
.q .who{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--coral);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;color:#fff}
.q h2{font-size:clamp(1.2rem,3vw,1.7rem);background:#fff;border:4px solid var(--ink);border-radius:22px 22px 22px 4px;padding:14px 20px;box-shadow:5px 5px 0 var(--ink)}
.a{margin-left:24px;border-left:4px dotted var(--ink);padding-left:26px}
@media(max-width:680px){.a{margin-left:8px;padding-left:16px}}
.a .short{display:inline-block;background:var(--mint);color:#fff;border:3px solid var(--ink);border-radius:12px;padding:8px 16px;font-weight:800;margin:4px 0 10px;box-shadow:3px 3px 0 var(--ink)}
.a p{margin:10px 0;max-width:64ch}
.a ul,.a ol{margin:10px 0 10px 22px;max-width:62ch}
.a li{margin-bottom:8px}
.a h3{font-size:1.05rem;margin:16px 0 6px}

/* checklists */
.check{list-style:none;margin:12px 0!important}
.check li{margin:0 0 10px!important;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px 16px 12px 46px;position:relative;font-weight:600}
.check li::before{content:"✓";position:absolute;left:14px;top:10px;font-family:'Archivo Black',sans-serif;color:var(--mint);font-size:1.1rem}
.check.x li::before{content:"✗";color:var(--coral)}

/* tickets (steps) */
.tickets{counter-reset:tk;margin:14px 0}
.tickets li{list-style:none;counter-increment:tk;background:#fff;border:3px solid var(--ink);border-radius:14px;margin:0 0 12px!important;padding:14px 16px 14px 64px;position:relative;font-weight:600}
.tickets li::before{content:counter(tk);position:absolute;left:14px;top:12px;width:34px;height:34px;border-radius:10px;background:var(--sun);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif}
.tickets b{display:block;margin-bottom:2px}
.tickets p{margin:0!important;font-size:.92rem;font-weight:500}

/* verdict rows */
.verdict{margin:12px 0;border:4px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff}
.verdict .row{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-bottom:3px solid var(--ink);font-weight:600}
.verdict .row:last-child{border-bottom:none}
.verdict .row .v{flex-shrink:0;font-family:'Archivo Black',sans-serif;border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-size:.8rem}
.verdict .row.up .v{background:var(--mint);color:#fff}
.verdict .row.down .v{background:var(--coral);color:#fff}

/* mini table */
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9rem;background:#fff;border:4px solid var(--ink);border-radius:16px;overflow:hidden;display:block;overflow-x:auto}
th{background:var(--ink);color:var(--sun);text-align:left;padding:11px 14px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;min-width:110px}
td{padding:11px 14px;border-top:3px solid var(--ink);min-width:110px;vertical-align:top;font-weight:600}

/* two-up with sticker */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:14px 0}
@media(max-width:720px){.duo{grid-template-columns:1fr}}

/* ring band */
.ring{background:var(--coral);border:5px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:32px 30px;margin:44px 0 10px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
@media(max-width:820px){.ring{grid-template-columns:1fr}}
.ring h2{color:#fff;font-size:clamp(1.4rem,3.4vw,2rem)}
.ring p{margin-top:8px;font-weight:600;color:#ffe4e6;max-width:52ch}
.ring small{display:block;margin-top:12px;font-size:.72rem;font-weight:700;color:#ffd0d6;max-width:60ch}
.ring .rb{display:flex;flex-direction:column;gap:10px}
.ring .callb,.ring .wab{font-size:.95rem;padding:14px 22px;justify-content:center}

/* more questions */
.more{margin:26px 0 8px}
.more h4{font-family:'Archivo Black',sans-serif;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.more a{display:inline-block;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 16px;margin:6px 8px 0 0;text-decoration:none;color:var(--ink);font-weight:800;font-size:.8rem;box-shadow:3px 3px 0 var(--ink)}
.more a:hover{background:var(--sun)}

/* footer */
footer.site{background:var(--ink);color:#cbd5e1;margin-top:48px;border-top:6px solid var(--sun)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;padding:38px 0 24px}
@media(max-width:640px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h4{color:var(--sun);font-family:'Archivo Black',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
footer.site .cols a{display:block;color:#94a3b8;text-decoration:none;font-size:.85rem;padding:3px 0;font-weight:600}
footer.site .cols a:hover{color:var(--sun)}
footer.site .legal{border-top:3px solid #334155;padding:20px 0 34px;font-size:.78rem;line-height:1.7;color:#8b98ad}
footer.site .legal p{margin-bottom:10px;max-width:92ch}
footer.site .legal b{color:#fde68a}
footer.site .cpy{margin-top:12px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* bottom-center dock */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:70;display:flex;gap:10px;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:8px;box-shadow:5px 5px 0 var(--ink)}
.dock a{width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
.dock .dc{background:var(--sun)}
.dock .dc svg{width:22px;height:22px;fill:var(--ink)}
.dock .dw{background:var(--wa)}
.dock .dw svg{width:22px;height:22px;fill:#fff}

/* cookie top bar */
.ckbar{background:var(--sun);border-bottom:4px solid var(--ink);padding:10px 16px;font-size:.82rem;font-weight:700;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.ckbar button{border:3px solid var(--ink);border-radius:999px;font-weight:800;font-size:.74rem;padding:7px 14px;cursor:pointer;background:#fff}
.ckbar button.yes{background:var(--ink);color:var(--sun)}
