/* ============================================================================
   Curo QUIZ — light skin, matches the live site (Montserrat/Gotham + Inter,
   Curo blue #0098ff, white cards, navy ink). Shared by all four quiz pages.
   ============================================================================ */
:root{
  --brand-accent:#0098ff; --brand-accent-2:#0056b3; --brand-accent-soft:#eaf3ff;
  --brand-ink:#0b2340; --brand-body:#49535f; --brand-muted:#66768a;
  --brand-canvas:#f6f9fd; --brand-surface:#ffffff; --brand-line:#e4e9f0;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-pill:999px;
  --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --shadow-card:0 20px 44px -32px rgba(11,40,74,.40);
  --shadow-lift:0 30px 60px -30px rgba(11,40,74,.45);
  --t-fast:150ms; --t-base:220ms; --t-slow:320ms; --ease:cubic-bezier(.2,.7,.3,1);
  --font-display:"Plus Jakarta Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --font-text:"Inter","Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --max-w:600px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(120% 80% at 82% -8%, #dff0ff 0%, transparent 52%), var(--brand-canvas);
  color:var(--brand-ink); font:400 17px/1.5 var(--font-text);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}

/* ---- Curo header + progress ---- */
.quiz-top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--brand-line)}
.quiz-top .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:13px 24px}
.quiz-top .brand{display:inline-flex;align-items:center;height:34px}
.quiz-top .brand img{height:30px;width:auto;display:block}
.quiz-top .exit{font:700 12px var(--font-text);letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-muted);text-decoration:none;padding:8px 14px;border:1px solid var(--brand-line);border-radius:var(--r-pill);transition:all var(--t-fast) var(--ease)}
.quiz-top .exit:hover{color:var(--brand-ink);border-color:#c9d4e2}
.prog{height:4px;background:var(--brand-line)}
.prog i{display:block;height:100%;width:15%;background:linear-gradient(90deg,var(--brand-accent),#38b6ff);
  border-radius:0 4px 4px 0;transition:width var(--t-slow) var(--ease)}

.wrap{max-width:var(--max-w);margin:0 auto;padding:var(--sp-7) var(--sp-5) 110px}
@media(min-width:720px){.wrap{padding-top:8vh}}

.back{background:none;border:0;color:var(--brand-muted);font:600 13px var(--font-text);
  letter-spacing:.02em;padding:8px 0;cursor:pointer;margin-bottom:var(--sp-5)}
.back:hover{color:var(--brand-ink)} .back[hidden]{display:none}

h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.4vw,40px);line-height:1.08;
  letter-spacing:-.025em;color:var(--brand-ink);margin:0 0 var(--sp-3);text-transform:none}
.sub{color:var(--brand-body);font-size:15.5px;line-height:1.55;margin:0 0 var(--sp-5)}

/* ---- single / multi options ---- */
.opts{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.opt{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:64px;
  padding:var(--sp-4) var(--sp-5);background:var(--brand-surface);border:1.5px solid var(--brand-line);
  border-radius:var(--r-md);font:600 16px/1.35 var(--font-text);color:var(--brand-ink);text-align:left;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.opt:hover{border-color:var(--brand-accent);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.opt:focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px}
.opt[aria-pressed="true"]{border-color:var(--brand-accent);background:var(--brand-accent-soft);box-shadow:inset 0 0 0 1px var(--brand-accent)}
.opt .tick{margin-left:auto;width:22px;height:22px;flex:0 0 22px;border-radius:var(--r-pill);
  border:1.5px solid var(--brand-line);display:grid;place-items:center;transition:all var(--t-fast) var(--ease)}
.opt[aria-pressed="true"] .tick{background:var(--brand-accent);border-color:var(--brand-accent)}
.opt .tick svg{width:12px;height:12px;opacity:0;transition:opacity var(--t-fast)}
.opt[aria-pressed="true"] .tick svg{opacity:1}

/* ---- visual grid ---- */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(min-width:640px){.vgrid{grid-template-columns:repeat(5,1fr)}}
.vcard{padding:var(--sp-3);border:1.5px solid var(--brand-line);border-radius:var(--r-md);
  background:var(--brand-surface);cursor:pointer;color:var(--brand-muted);transition:all var(--t-fast) var(--ease)}
.vcard svg{width:100%;height:auto;display:block}
.vcard span{display:block;font:600 12px/1.3 var(--font-text);text-align:center;margin-top:6px;color:var(--brand-body)}
.vcard:hover{border-color:var(--brand-accent);color:var(--brand-accent)}
.vcard[aria-pressed="true"]{border-color:var(--brand-accent);background:var(--brand-accent-soft);
  transform:scale(1.03);box-shadow:var(--shadow-lift);color:var(--brand-accent)}

/* ---- scale / fields ---- */
.scale{display:flex;gap:8px}
.scale button{flex:1;min-height:56px;border:1.5px solid var(--brand-line);background:var(--brand-surface);
  border-radius:var(--r-sm);font:700 17px var(--font-text);color:var(--brand-ink);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.scale button[aria-pressed="true"]{background:var(--brand-accent);border-color:var(--brand-accent);color:#fff}
.scale-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--brand-muted);margin-top:8px}
.field{display:block;margin-bottom:var(--sp-4)}
.field span{display:block;font:600 13px var(--font-text);letter-spacing:.02em;color:var(--brand-body);margin-bottom:6px}
.field input,.field select{width:100%;min-height:56px;padding:0 var(--sp-4);font-size:16px;font-family:var(--font-text);
  border:1.5px solid var(--brand-line);border-radius:var(--r-md);background:var(--brand-surface);color:var(--brand-ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand-accent)}

/* ---- primary CTA ---- */
.cta{width:100%;min-height:60px;margin-top:var(--sp-5);border:0;border-radius:var(--r-pill);
  background:var(--brand-accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.01em;
  cursor:pointer;box-shadow:0 16px 30px -14px rgba(0,152,255,.6);transition:transform var(--t-fast) var(--ease),background var(--t-fast),opacity var(--t-fast)}
.cta:hover{transform:translateY(-2px);background:#38b6ff}
.cta:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.trust{margin-top:var(--sp-6);font-size:12px;color:var(--brand-muted);text-align:center}

.stage{animation:enter var(--t-base) var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- interstitial ---- */
.ring{width:46px;height:46px;margin:0 auto var(--sp-5);border:3px solid var(--brand-line);
  border-top-color:var(--brand-accent);border-radius:var(--r-pill);animation:spin 1.05s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{list-style:none;padding:0;margin:0 0 var(--sp-6)}
.steps li{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--brand-muted);opacity:.45;transition:opacity var(--t-base)}
.steps li.on{opacity:1;color:var(--brand-ink)}
.steps li i{width:22px;height:22px;flex:0 0 22px;border-radius:var(--r-pill);border:1.5px solid var(--brand-line);
  display:grid;place-items:center;font-size:11px;color:#fff;background:#fff}
.steps li.on i{background:var(--brand-accent);border-color:var(--brand-accent)}

/* ---- result ---- */
.verdict{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,5vw,44px);line-height:1.06;
  letter-spacing:-.025em;text-transform:none;color:var(--brand-ink);margin:0 0 var(--sp-3)}
.q-shot{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#f2f7fe,#e9f0f9);
  border:1px solid var(--brand-line);aspect-ratio:16/10;display:grid;place-items:center;margin:0 0 var(--sp-5);box-shadow:var(--shadow-card)}
.q-shot img{width:auto;height:80%;max-width:80%;object-fit:contain;filter:drop-shadow(0 24px 26px rgba(11,40,74,.22))}
.q-shot--none span{font:800 11px var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted);
  border:1px dashed rgba(10,40,74,.24);border-radius:var(--r-md);padding:22px 26px;text-align:center;line-height:1.7}
.echo{background:var(--brand-accent-soft);border:1px solid rgba(0,152,255,.18);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);font-style:italic;color:var(--brand-ink);margin:var(--sp-5) 0}
.reasons{list-style:none;padding:0;margin:var(--sp-5) 0}
.reasons li{display:flex;gap:12px;padding:11px 0;align-items:flex-start;color:var(--brand-body);border-top:1px solid var(--brand-line)}
.reasons li:first-child{border-top:0}
.reasons li b{color:var(--brand-accent);flex:0 0 auto}
.plans{display:flex;gap:8px;margin:var(--sp-6) 0 var(--sp-4)}
.plans button{flex:1;min-height:70px;border:1.5px solid var(--brand-line);background:var(--brand-surface);
  border-radius:var(--r-md);cursor:pointer;font-family:var(--font-text);color:var(--brand-ink);transition:all var(--t-fast) var(--ease);position:relative}
.plans button:hover{border-color:var(--brand-accent)}
.plans button[aria-pressed="true"]{border-color:var(--brand-accent);background:var(--brand-accent-soft);box-shadow:inset 0 0 0 1px var(--brand-accent)}
.plans button em{display:block;font-style:normal;font-size:13px;color:var(--brand-muted);margin-top:2px}
.plans button strong{display:block;font-size:16px;font-family:var(--font-display);font-weight:700}
.plans .badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--brand-accent);color:#fff;
  font:700 10px var(--font-text);letter-spacing:.04em;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.price{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--brand-accent);margin:var(--sp-4) 0 2px}
.price small{font:400 14px var(--font-text);color:var(--brand-muted);display:block;margin-top:4px}
.result-h2{font-family:var(--font-display);font-weight:700;font-size:18px;text-transform:none;letter-spacing:-.01em;color:var(--brand-ink);margin-top:var(--sp-7)}
.legal{font-size:12px;line-height:1.55;color:var(--brand-muted);margin-top:var(--sp-6)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:1ms!important}}
::selection{background:rgba(0,152,255,.22)}

/* ---- loader = the black animated Curo logo (heartbeat draws itself inside the SVG) ---- */
.q-loadlogo{width:min(230px,60vw);height:auto;display:block;margin:0 auto 6px}
.q-loading .steps{opacity:.95}

/* ---- 2-column result (screenshot layout, Curo theme) ---- */
body.is-result .wrap{max-width:920px}
.q-result{display:grid;grid-template-columns:.92fr 1.08fr;gap:38px;align-items:start}
.q-res-media{position:sticky;top:24px}
.q-result .q-shot{aspect-ratio:4/5;border-radius:22px;margin:0;box-shadow:var(--shadow-lift);position:relative;overflow:hidden}
.q-result .q-shot img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:80%;max-height:84%;
  object-fit:contain;filter:drop-shadow(0 26px 30px rgba(11,40,74,.24))}
.q-badge{display:inline-block;background:var(--brand-accent);color:#fff;font:800 10.5px var(--font-text);
  letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px}
.q-result .verdict{font-size:clamp(28px,3.4vw,40px);margin-bottom:8px}
.q-spec{font:700 12px var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--brand-accent-2);margin:0 0 14px}
.q-res-body .sub{font-size:15px;margin-bottom:var(--sp-5)}
.q-panel{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:18px 20px;margin:0 0 var(--sp-4);box-shadow:var(--shadow-card)}
.q-panel--soft{background:var(--brand-accent-soft);border-color:rgba(0,152,255,.18);box-shadow:none}
.q-panel-h{font-family:var(--font-display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--brand-ink);margin:0 0 12px}
.q-panel .reasons{margin:0}
.q-panel .reasons li{border-top:0;padding:7px 0;align-items:flex-start;font-size:13.5px;line-height:1.45}
.q-panel--soft p{font-size:13.5px;line-height:1.5;color:var(--brand-body);margin:0}
.q-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:var(--sp-5) 0 var(--sp-4)}
.q-actions .cta{margin-top:0;min-height:54px;font-size:15px}
.q-ghost{background:var(--brand-surface);color:var(--brand-ink);border:1.5px solid var(--brand-line);box-shadow:none;font-family:var(--font-text);font-weight:700}
.q-ghost:hover{background:#f2f7fe;border-color:var(--brand-accent);color:var(--brand-accent-2)}
.q-result .legal{margin-top:var(--sp-4)}
@media(max-width:760px){
  .q-result{grid-template-columns:1fr;gap:22px}
  .q-res-media{position:static;max-width:280px;margin:0 auto}
  .q-actions{grid-template-columns:1fr}
}

/* ---- embed mode: quiz runs inside the homepage modal ---- */
body.embed{background:transparent}
body.embed .quiz-top{background:transparent;border-bottom:0;position:relative}
body.embed .quiz-top .in{display:none}
body.embed .wrap{padding:var(--sp-6) var(--sp-5) 60px}
@media(min-width:720px){body.embed .wrap{padding-top:var(--sp-6)}}

/* ============ QUIZ POLISH v3 — glass + branding + motion (2026-07-30) ============ */
body{background:
 radial-gradient(90% 60% at 85% 0%, rgba(0,152,255,.10), rgba(0,152,255,0) 60%),
 radial-gradient(80% 60% at 10% 100%, rgba(77,134,240,.10), rgba(77,134,240,0) 60%),
 linear-gradient(180deg,#F2F7FD 0%,#EAF3FC 100%) fixed}
.quiz-top{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid rgba(180,205,230,.35)}
.prog{background:rgba(0,152,255,.12)}
.prog i{background:linear-gradient(90deg,#0098FF,#4d9aff);transition:width .55s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 10px rgba(0,152,255,.5)}
.stage{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(22px) saturate(1.65);backdrop-filter:blur(22px) saturate(1.65);border:1px solid rgba(255,255,255,.85);border-radius:24px;box-shadow:0 24px 60px rgba(12,48,96,.10),0 3px 10px rgba(12,48,96,.05),inset 0 1px 0 rgba(255,255,255,.9);padding:34px 34px 30px;animation:qStageIn .38s cubic-bezier(.16,1,.3,1) both}
@keyframes qStageIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.opts .opt{background:rgba(255,255,255,.72);border:1px solid #E4E9F0;border-radius:14px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s,background .22s;position:relative}
.opts .opt:hover{transform:translateY(-2px);border-color:rgba(0,152,255,.55);box-shadow:0 10px 24px rgba(11,110,240,.12)}
.opts .opt::after{content:"\203A";position:absolute;right:18px;top:50%;transform:translateY(-50%) translateX(-6px);font-size:20px;color:#0098FF;opacity:0;transition:opacity .2s,transform .2s}
.opts .opt:hover::after{opacity:.9;transform:translateY(-50%) translateX(0)}
.opts .opt[aria-pressed="true"]{background:linear-gradient(135deg,#0b6ef0,#009dff);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:0 10px 26px rgba(11,110,240,.32)}
.opts .opt[aria-pressed="true"]::after{opacity:0}
.opts li{animation:qOptIn .4s cubic-bezier(.16,1,.3,1) both}
.opts li:nth-child(1){animation-delay:.04s}.opts li:nth-child(2){animation-delay:.08s}.opts li:nth-child(3){animation-delay:.12s}.opts li:nth-child(4){animation-delay:.16s}.opts li:nth-child(5){animation-delay:.2s}.opts li:nth-child(6){animation-delay:.24s}.opts li:nth-child(7){animation-delay:.28s}.opts li:nth-child(8){animation-delay:.32s}.opts li:nth-child(9){animation-delay:.36s}.opts li:nth-child(10){animation-delay:.4s}.opts li:nth-child(11){animation-delay:.44s}
@keyframes qOptIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cta{background:linear-gradient(135deg,#0b6ef0,#009dff);box-shadow:0 10px 26px rgba(11,110,240,.3),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .22s,box-shadow .22s}
.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px rgba(11,110,240,.38),inset 0 1px 0 rgba(255,255,255,.3)}
.q-tip{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(180,205,230,.4);font-size:13.5px;color:#33475e;animation:qTipIn .5s .3s cubic-bezier(.16,1,.3,1) both}
.q-tip i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#7ff0b2,#22c07a 58%,#128a54);animation:qDot 2.4s ease-out infinite}
@keyframes qDot{0%{box-shadow:0 0 0 0 rgba(34,192,122,.5)}70%{box-shadow:0 0 0 8px rgba(34,192,122,0)}100%{box-shadow:0 0 0 0 rgba(34,192,122,0)}}
@keyframes qTipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* intro splash */
.q-intro{text-align:center;padding:9vh 24px 60px;animation:qStageIn .4s cubic-bezier(.16,1,.3,1) both}
.q-intro .tile{display:inline-flex;flex-direction:column;align-items:center;gap:22px;padding:44px 56px;border-radius:28px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 70px rgba(12,48,96,.12),inset 0 1px 0 #fff}
.q-intro img{height:40px}
.q-intro .ring{width:52px;height:52px;border-radius:50%;background:conic-gradient(#0098FF 0 25%,rgba(0,152,255,.12) 25% 100%);-webkit-mask:radial-gradient(farthest-side,transparent 62%,#000 64%);mask:radial-gradient(farthest-side,transparent 62%,#000 64%);animation:qSpin 1s linear infinite}
@keyframes qSpin{to{transform:rotate(360deg)}}
.q-intro h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:900;letter-spacing:-.02em;color:#0A1628;font-size:24px;margin:0}
.q-intro p{color:#4A5A6E;font-size:14.5px;margin:0;max-width:300px}
.q-panel,.q-panel--soft{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(180,205,230,.4);border-radius:16px}
@media (prefers-reduced-motion:reduce){
 .stage,.opts li,.q-tip,.q-intro{animation:none !important}
 .q-tip i,.q-intro .ring{animation:none !important}
 .prog i{transition:none}}

/* Hims-style worded transition screens */
.q-words{min-height:58vh;display:flex;flex-direction:column;justify-content:center;max-width:680px;margin:0 auto;padding:0 26px;perspective:900px}
.q-words .l1{color:#0098FF;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;line-height:1.2;opacity:0;animation:qLine .75s .25s cubic-bezier(.16,1,.3,1) forwards}
.q-words .l2{color:#0A1628;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1.16;margin-top:16px;opacity:0;animation:qLine .75s .95s cubic-bezier(.16,1,.3,1) forwards}
@keyframes qLine{from{opacity:0;transform:translateY(22px) rotateX(8deg);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
/* mid-quiz reassure step rendered as a worded screen */
.stage[data-q="reassure_g"]{background:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:10vh;max-width:680px}
.stage[data-q="reassure_g"] h1{color:var(--brand-ink);font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;animation:qLine .7s .15s cubic-bezier(.16,1,.3,1) both}
.stage[data-q="reassure_g"] .sub{color:#0A1628;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.02em;animation:qLine .7s .7s cubic-bezier(.16,1,.3,1) both}
.stage[data-q="reassure_g"] .opts .opt{max-width:280px;background:linear-gradient(135deg,#0b6ef0,#009dff);color:#fff;border:none;box-shadow:0 10px 26px rgba(11,110,240,.3);animation:qLine .6s 1.3s cubic-bezier(.16,1,.3,1) both}
.stage[data-q="reassure_g"] .q-tip,.stage[data-q="reassure_g"] .trust{display:none}
@media (prefers-reduced-motion:reduce){.q-words .l1,.q-words .l2,.stage[data-q="reassure_g"] h1,.stage[data-q="reassure_g"] .sub,.stage[data-q="reassure_g"] .opts .opt{animation:none !important;opacity:1}}

/* v3: single result CTA + quiet restart (client: one destination, no option pile) */
.q-actions--solo{grid-template-columns:1fr}
.q-restart{display:block;margin:2px auto 0;padding:9px 14px;background:none;border:0;cursor:pointer;font-family:var(--font-text);font-size:13px;font-weight:600;color:#7A8798;text-decoration:underline;text-underline-offset:3px}
.q-restart:hover{color:#0b6ef0}

/* ===== CURO-R216 : stated denominator under the progress bar (2026-09-03) =====
   The bar alone reads as open ended, which is the single biggest driver of mid-quiz
   abandonment. Questions hidden by showIf are excluded from the count, so it never
   overstates. Survives embed mode, where .quiz-top .in is hidden but .prog is not. */
.prog-n{display:block;text-align:center;font-family:var(--font-text);font-size:12px;
  font-weight:600;letter-spacing:.07em;color:#7A8798;padding:9px 16px 0;
  font-variant-numeric:tabular-nums}
.prog-n:empty{display:none}
@media(max-width:520px){.prog-n{font-size:12.5px;padding-top:8px}}

/* ===== CURO-R217 : quiz feel (2026-09-03) =====
   The stage, hover lift and gradient selection were already good. What was missing was
   momentum: everything arrived at once and every screen looked identical, so a 10 question
   flow read as a form. Four changes, all CSS. The reduced-motion kill at line 139 covers
   every animation added here. */

/* 1. options arrive in sequence rather than as a block. 45ms apart is enough to read as
      deliberate and short enough that it never delays a fast answerer. */
.opts .opt{animation:qOptIn .34s cubic-bezier(.16,1,.3,1) both}
.opts li:nth-child(1) .opt{animation-delay:.05s}
.opts li:nth-child(2) .opt{animation-delay:.095s}
.opts li:nth-child(3) .opt{animation-delay:.14s}
.opts li:nth-child(4) .opt{animation-delay:.185s}
.opts li:nth-child(5) .opt{animation-delay:.23s}
.opts li:nth-child(6) .opt{animation-delay:.275s}
.opts li:nth-child(n+7) .opt{animation-delay:.32s}
@keyframes qOptIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* hover must still win over the entrance transform once it has landed */
.opts .opt:hover{animation:none}

/* 2. the answer confirms itself before the screen moves on. The engine waits 200ms after a
      tap; this fills that gap so the choice feels registered rather than skipped. */
.opts .opt[aria-pressed="true"]{animation:qPick .2s cubic-bezier(.34,1.4,.64,1) both}
@keyframes qPick{0%{transform:scale(1)}45%{transform:scale(1.014)}100%{transform:scale(1)}}
.opts .opt[aria-pressed="true"]::after{opacity:0}

/* 3. the reassurance beats stop looking like questions. These are the screens with a single
      Continue button, and they are the only warm moment in the flow, so they get their own
      surface: no card chrome, centred, bigger type, calmer. */
.stage[data-q^="reassure"]{background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center;padding-top:44px}
.stage[data-q^="reassure"] h1{font-size:clamp(26px,4.4vw,38px);line-height:1.15;max-width:17ch;margin-inline:auto}
.stage[data-q^="reassure"] .sub{max-width:44ch;margin-inline:auto;font-size:16.5px;line-height:1.6}
.stage[data-q^="reassure"] .opts{max-width:280px;margin:26px auto 0}
.stage[data-q^="reassure"] .opt{justify-content:center;min-height:56px;font-weight:600}
.stage[data-q^="reassure"] .opt .tick,.stage[data-q^="reassure"] .opt::after{display:none}
.stage[data-q^="reassure"] .back{opacity:.55}

/* 4. the keyboard shortcut already works and nobody knows. Desktop only, and only where a
      pointer is coarse-free, so it never shows on a phone. */
@media(hover:hover) and (pointer:fine) and (min-width:760px){
  .opts .opt::before{content:counter(qopt);counter-increment:qopt;position:absolute;left:-26px;
    top:50%;transform:translateY(-50%);font:500 11px/1 var(--font-text);color:#AEB8C6;
    opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums}
  .opts{counter-reset:qopt}
  .stage:hover .opts .opt::before{opacity:1}
  .stage[data-q^="reassure"] .opts .opt::before{display:none}
}

/* CURO-R233: quiz on the site's display face, sentence case, dark logo */
.quiz-top .brand img{height:26px}