/* OVERPAID web quiz. Dark and lit like the app's cards; the CSP forbids inline styles, so everything lives here. */
@font-face{font-family:Geist;src:url(/overpaid/quiz/fonts/Geist-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Geist;src:url(/overpaid/quiz/fonts/Geist-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--bg:#08090A;--card:#15171A;--card2:#1D2024;--line:#2A2D32;--text:#F4F4F2;--muted:#A3A39E;--faint:#6E6E69;--green:#3DD68C;--on-green:#04140B;--radius:18px;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.quiz-page{margin:0;min-height:100vh;background:radial-gradient(120% 60% at 50% 0,rgba(34,199,111,.16),transparent 60%),linear-gradient(#1B1D21,#07080A 70%) fixed;background-color:var(--bg);color:var(--text);font:600 16px/1.45 Geist,system-ui,-apple-system,sans-serif}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:9;background:var(--green);color:var(--on-green);padding:8px 12px;border-radius:8px}
.qheader{display:flex;justify-content:space-between;align-items:center;max-width:720px;margin:0 auto;padding:18px 16px}
.qheader .wordmark{font-weight:700;text-decoration:none;letter-spacing:-.02em}
.qheader nav{display:flex;gap:16px;font-size:14px;color:var(--muted)}
.qheader nav a{text-decoration:none}.qheader nav a:hover{color:var(--text)}
.quiz{max-width:720px;margin:0 auto;padding:8px 16px 140px}
.step h1,.step h2{margin:0;letter-spacing:-.03em;line-height:1.05;outline:none}
.step h1{font-size:clamp(40px,9vw,64px);font-weight:700}
.step h2{font-size:clamp(30px,6vw,40px);font-weight:700}
.kicker{margin:0 0 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.lead{font-size:19px;color:var(--muted);margin:18px 0 28px;max-width:34em}
.hint{color:var(--muted);margin:10px 0 18px}
.muted{color:var(--muted);margin:6px 0 0}
.fine{font-size:13px;color:var(--faint);margin:12px 0 0}
.intro{padding-top:8vh}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{border-color:#3a3e44}
.btn:disabled{opacity:.4;cursor:default}
.btn-accent{background:var(--green);border-color:var(--green);color:var(--on-green)}
.btn-accent:hover{filter:brightness(1.07);border-color:var(--green)}
.btn-ghost{background:transparent}
.btn-big{min-height:56px;padding:0 28px;font-size:18px;width:100%;max-width:360px}
.btn:focus-visible,.chip:focus-visible,.tile:focus-visible,.select:focus-visible,.search:focus-visible,.price:focus-visible,.back:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.back{background:none;border:0;color:var(--muted);font:inherit;padding:0;margin:0 0 14px;cursor:pointer}
.country{display:flex;align-items:center;gap:10px;margin-top:28px;color:var(--muted);font-size:14px}
.select{appearance:none;-webkit-appearance:none;background:var(--card2) url(/overpaid/quiz/chevron.svg) no-repeat right 12px center;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:10px 34px 10px 12px;font:inherit;font-size:15px;max-width:100%}
.search{width:100%;min-height:50px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:17px;padding:0 16px}
.search::placeholder{color:var(--faint)}
.chips{display:flex;gap:8px;overflow-x:auto;margin:14px -16px 0;padding:2px 16px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.card .chips,.questions .chips{flex-wrap:wrap;overflow:visible;margin:12px 0 0;padding:0}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-size:15px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--text);border-color:var(--text);color:#0B0C0D}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
@media (max-width:520px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;border-radius:16px;border:1px solid transparent;background:var(--card);color:var(--text);font:inherit;font-size:13px;cursor:pointer;min-width:0}
.tile:hover{background:var(--card2)}
.tile[aria-pressed=true]{border-color:var(--green);background:rgba(61,214,140,.1)}
.tile-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick{position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--on-green);font-size:13px;line-height:22px;opacity:0;transform:scale(.6);transition:.15s}
.tile[aria-pressed=true] .tick{opacity:1;transform:none}
.logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:14px;overflow:hidden;background:#fff;font-weight:700;color:#fff;font-size:18px}
.logo-s{width:40px;height:40px;border-radius:11px;font-size:15px}
.logo img{width:100%;height:100%;object-fit:cover}
.logo-mark svg{width:56%;height:56%}
.logo-dark{background:#111}
.logo-mono{color:#fff}
.plans{display:flex;flex-direction:column;gap:10px}
.plan-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:var(--radius);background:var(--card)}
.plan-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.plan-main .select{width:100%}
.plan-price{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--faint)}
.price-wrap{display:flex;align-items:baseline;gap:4px}
.price{width:84px;min-height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit;font-size:17px;text-align:right;padding:0 10px}
.per{color:var(--muted);font-size:13px}
@media (max-width:520px){.plan-row{grid-template-columns:auto 1fr}.plan-price{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:linear-gradient(transparent,rgba(8,9,10,.92) 30%);padding:28px 16px calc(14px + env(safe-area-inset-bottom))}
.bar-inner{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(29,32,36,.92);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bar-text{display:flex;flex-direction:column;line-height:1.2;font-size:14px;color:var(--muted)}
.bar-text strong{color:var(--text);font-size:16px}
.card{padding:18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
.card p{margin:8px 0 0}
.questions{display:flex;flex-direction:column;gap:10px}
.found{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;padding:14px 18px;border-radius:var(--radius);background:rgba(61,214,140,.1);color:var(--muted)}
.found strong{color:var(--green);font-size:20px}
.calc{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;color:var(--muted)}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result{display:flex;flex-direction:column;gap:14px}
.summary{padding:26px 22px;border-radius:24px;background:radial-gradient(90% 80% at 50% 0,rgba(34,199,111,.22),transparent 70%),#111316;border:1px solid var(--line);text-align:center}
.summary .amount{font-size:clamp(52px,13vw,84px)}
.summary .kicker{color:var(--muted)}
.save{display:inline-flex;flex-direction:column;margin-top:18px;padding:12px 20px;border-radius:16px;background:rgba(61,214,140,.12);color:var(--muted)}
.save strong{color:var(--green);font-size:28px;letter-spacing:-.02em}
.rec{border-color:rgba(61,214,140,.4)}
.rec .kicker{margin-bottom:6px}
.rec-amount{color:var(--green);font-size:20px}
.locked ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.locked li{display:flex;justify-content:space-between;color:var(--green)}
.blur{color:var(--faint);filter:blur(5px);user-select:none}
.pending{text-align:center}
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:8px}
.have .btn{margin-top:12px}
.row-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}.tick{transition:none}}