@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#17161d; --muted:#706d78; --paper:#fffaf2; --card:#fff; --line:#e9e1d7; --coral:#ff6b55; --purple:#7659e8; --yellow:#ffcf62; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(#d8cfc3 .65px, transparent .65px); background-size:12px 12px; }
.shell { position:relative; width:min(100% - 32px, 680px); margin:0 auto; padding:56px 0 35px; }
.hero { padding:0 12px 28px; }
.eyebrow,.question-kicker,.share-label { margin:0 0 13px; color:var(--purple); font:500 12px/1 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.045em; }
h1 { max-width:620px; margin:0; font-size:clamp(42px,8vw,70px); line-height:.98; }
.lede { max-width:550px; margin:24px 0 16px; color:#56515c; font-size:18px; line-height:1.45; }
.hero-note { color:var(--muted); font:12px 'DM Mono',monospace; }
.hero-note span { color:var(--coral); font-size:18px; vertical-align:-2px; }
.card { border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.86); box-shadow:0 18px 55px rgba(45,32,20,.08); }
.quiz-card { padding:26px; }
.quiz-topline,.meter-label { display:flex; justify-content:space-between; color:var(--muted); font:12px 'DM Mono',monospace; }
.progress-track { height:7px; margin:13px 0 42px; overflow:hidden; border-radius:99px; background:#eee7dd; }
.progress-bar { width:10%; height:100%; border-radius:99px; background:var(--coral); transition:width .3s ease; }
.question-kicker { color:var(--coral); }
.question-wrap h2 { max-width:570px; margin:0 0 26px; font-size:clamp(28px,5vw,42px); line-height:1.04; }
.answers { display:grid; gap:11px; }
.answer { width:100%; padding:17px 18px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:#fff; font:500 16px 'DM Sans',sans-serif; text-align:left; cursor:pointer; transition:transform .15s, border-color .15s, background .15s; }
.answer:hover,.answer:focus-visible { transform:translateY(-2px); border-color:var(--purple); background:#faf8ff; outline:none; }
.answer.selected { border-color:var(--purple); background:#f1edff; }
.text-button { border:0; padding:15px 0 0; color:var(--muted); background:transparent; font:500 14px 'DM Sans',sans-serif; cursor:pointer; }
.text-button:hover { color:var(--ink); }
.result-card { padding:38px 30px 30px; text-align:center; }
.result-score { margin:5px 0 2px; font:700 clamp(74px,16vw,112px)/.9 'Space Grotesk',sans-serif; letter-spacing:-.08em; }
.score-denom { color:var(--muted); font-size:24px; letter-spacing:-.03em; }
.result-card h2 { margin:16px 0 12px; font-size:clamp(30px,6vw,45px); }
.result-blurb { max-width:490px; margin:0 auto 25px; color:#5b5760; font-size:17px; line-height:1.5; }
.result-meter { height:13px; overflow:hidden; border-radius:99px; background:#eee7dd; }
.result-meter div { width:0; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--yellow),var(--coral),var(--purple)); transition:width .8s ease; }
.meter-label { margin:8px 0 30px; font-size:10px; }
.share-box { margin:0 0 20px; padding:20px; border-radius:16px; background:#f7f2ea; text-align:left; }
.share-label { color:var(--muted); }
.share-box p:not(.share-label) { margin:0 0 16px; font-size:16px; line-height:1.45; }
.primary-button,.secondary-button { border:0; border-radius:10px; padding:14px 18px; font:600 15px 'DM Sans',sans-serif; cursor:pointer; }
.primary-button { width:100%; color:white; background:var(--ink); }
.primary-button:hover { background:var(--purple); }
.secondary-button { color:var(--ink); background:white; border:1px solid var(--line); }
.secondary-button:hover { border-color:var(--ink); }
.fine-print { margin:25px auto 0; max-width:510px; color:#8a8490; font-size:12px; line-height:1.5; }
.analytics-note { margin:10px auto 0; max-width:510px; color:#aaa3ad; font-size:11px; line-height:1.5; }
footer { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:28px 12px; color:#8a8490; font-size:12px; }
footer p { margin:0; } footer a { color:var(--ink); }
.footer-brand img { display:block; width:176px; height:auto; margin-bottom:9px; }
.footer-brand p { color:var(--muted); }
.footer-links { text-align:right; line-height:1.8; }
[hidden] { display:none !important; }
@media (max-width:520px) { .shell { padding-top:35px; } .quiz-card { padding:21px; border-radius:19px; } .hero { padding:0 4px 22px; } footer { display:block; line-height:1.8; } .footer-links { margin-top:18px; text-align:left; } }