/* QuizPop design system — mobile-first, no frameworks */
*{box-sizing:border-box;margin:0;padding:0}
:root{--brand:#4f46e5;--ink:#1e293b;--muted:#475569;--faint:#64748b;--line:#e2e8f0;--bg:#fff;--soft:#f8fafc}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%}

/* Header / nav */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:10}
.nav{max-width:720px;margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:1.25rem;color:var(--brand);text-decoration:none}
.nav-links{display:flex;align-items:center}
.nav-links a{margin-left:.9rem;color:var(--muted);text-decoration:none;font-size:.9rem}
.nav-links a:hover{color:var(--brand)}

/* Layout */
main{max-width:720px;margin:0 auto;padding:1.25rem 1rem 3rem}
.hero h1{font-size:1.7rem;line-height:1.25;margin:.5rem 0}
.hero p{color:var(--muted);margin-bottom:1rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:2rem 0 .75rem}
.section-head h2{font-size:1.25rem}
.section-head a{font-size:.85rem;color:var(--brand);text-decoration:none}

/* Quiz card grid */
.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:.5rem 0 1rem}
.qcard{border:1px solid var(--line);border-radius:12px;padding:1rem;text-decoration:none;color:var(--ink);display:block;background:#fff}
.qcard:hover{border-color:var(--brand)}
.qcard .kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:700}
.qcard h3{font-size:1rem;margin:.3rem 0;line-height:1.35}
.qcard p{font-size:.82rem;color:var(--muted)}
.qcard.soon{background:var(--soft);border-style:dashed;cursor:default}
.soon-badge{display:inline-block;font-size:.7rem;font-weight:700;color:#92400e;background:#fef3c7;border-radius:99px;padding:.15rem .6rem;margin-top:.4rem}

/* Quiz widget */
.quiz-card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:1.25rem;margin:1rem 0}
.progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:1rem}
.progress>div{height:100%;background:var(--brand);width:0;transition:width .3s}
.q-text{font-size:1.15rem;font-weight:700;margin-bottom:.9rem}
.opt{display:block;width:100%;text-align:left;padding:.85rem 1rem;margin:.5rem 0;border:2px solid var(--line);border-radius:10px;background:#fff;font-size:1rem;cursor:pointer;min-height:48px;font-family:inherit;color:var(--ink)}
.opt:active{transform:scale(.98)}
.opt.correct{border-color:#16a34a;background:#f0fdf4}
.opt.wrong{border-color:#dc2626;background:#fef2f2}
.opt:disabled{opacity:.85;cursor:default}
.quiz-nav{margin-top:1rem;text-align:right}
.next-btn{background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.8rem 1.8rem;font-size:1rem;font-weight:700;cursor:pointer;min-height:48px;font-family:inherit}
.result-card{display:none;background:#eef2ff;border:2px solid var(--brand);border-radius:14px;padding:1.5rem;margin:1.5rem 0;text-align:center}
.result-card h2{color:var(--brand);margin-bottom:.5rem}
.share-row{margin-top:1rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.share-row button{border:1px solid #cbd5e1;background:#fff;border-radius:999px;padding:.55rem 1rem;font-size:.9rem;cursor:pointer;min-height:44px;font-family:inherit}
.entertainment-note{font-size:.78rem;color:#94a3b8;margin-top:1rem}

/* Sponsored CTA block */
.sponsored-block{margin:2rem 0;padding:1.25rem;border:1px dashed #cbd5e1;border-radius:12px;background:var(--soft);text-align:center}
.sponsored-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ftc-note{font-size:.75rem;color:var(--faint);margin:.25rem 0 .75rem}
.cta-btn{display:inline-block;padding:.9rem 2.2rem;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;font-size:1.05rem;min-height:48px}
.cta-btn:active{transform:scale(.97)}

/* Related + FAQ */
.related{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0}
.related a{border:1px solid var(--line);border-radius:10px;padding:.9rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.related div.soon{border:1px dashed var(--line);border-radius:10px;padding:.9rem;color:var(--faint);font-size:.95rem;background:var(--soft)}
.faq{margin:2rem 0}.faq h3{margin-bottom:.5rem}.faq p{color:var(--muted);margin-bottom:1rem;font-size:.95rem}

/* How it works steps */
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin:1rem 0}
.step{border:1px solid var(--line);border-radius:12px;padding:1rem;text-align:center;background:var(--soft)}
.step .n{display:inline-block;width:2rem;height:2rem;line-height:2rem;border-radius:99px;background:var(--brand);color:#fff;font-weight:800;margin-bottom:.5rem}
.step p{font-size:.88rem;color:var(--muted)}

/* Email signup */
.signup{background:#eef2ff;border:1px solid var(--brand);border-radius:14px;padding:1.5rem;margin:2rem 0;text-align:center}
.signup h2{margin-bottom:.4rem}
.signup p{color:var(--muted);font-size:.92rem;margin-bottom:1rem}
.signup form{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.signup input[type=email]{flex:1;min-width:200px;padding:.8rem 1rem;border:1px solid #cbd5e1;border-radius:999px;font-size:1rem;font-family:inherit}
.signup button{background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.8rem 1.6rem;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}

/* Search */
.search-input{width:100%;padding:.9rem 1.1rem;border:2px solid var(--line);border-radius:12px;font-size:1.05rem;font-family:inherit;margin:1rem 0}
.search-input:focus{outline:none;border-color:var(--brand)}

/* Legal / prose pages */
.prose h1{font-size:1.6rem;margin:.5rem 0 1rem}
.prose h2{font-size:1.15rem;margin:1.5rem 0 .5rem}
.prose p,.prose li{color:var(--muted);margin-bottom:.8rem;font-size:.96rem}
.prose ul{padding-left:1.2rem}

/* Trending list */
.trend-row{display:flex;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.6rem 0;text-decoration:none;color:var(--ink)}
.trend-row .rank{font-size:1.6rem;font-weight:800;color:var(--brand);min-width:2.2rem;text-align:center}
.trend-row h3{font-size:1.02rem}
.trend-row p{font-size:.82rem;color:var(--muted)}

/* Contact form */
.contact-form{max-width:480px;margin:1rem 0}
.contact-form label{display:block;font-weight:600;margin:.9rem 0 .3rem;font-size:.92rem}
.contact-form input,.contact-form textarea{width:100%;padding:.8rem 1rem;border:1px solid #cbd5e1;border-radius:10px;font-size:1rem;font-family:inherit}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form button{margin-top:1rem;background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.85rem 2rem;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}

/* Footer */
footer{border-top:1px solid var(--line);padding:1.5rem 1rem;text-align:center;font-size:.85rem;color:var(--faint)}
footer a{color:var(--faint);margin:0 .5rem;text-decoration:none}
footer a:hover{color:var(--brand)}
.seo-foot{max-width:720px;margin:0 auto;padding:0 1rem 2rem;font-size:.8rem;color:#94a3b8}

/* Small screens */
@media (max-width:420px){
  .steps{grid-template-columns:1fr}
  .nav-links a{margin-left:.6rem;font-size:.82rem}
}