/* ===== Lead-magnet quiz engine — executive visual system ===== */
:root{
  --bg1:#0b1220; --bg2:#12203a; --accent:#3b82f6; --accent2:#22d3ee;
  --ink:#f5f7fa; --ink-dim:rgba(245,247,250,.68); --ink-mute:rgba(245,247,250,.45);
  --panel:rgba(255,255,255,.035); --panel-line:rgba(255,255,255,.10);
  --card:#ffffff; --card-ink:#0f172a; --card-sub:#5b6472; --card-line:#e6e8ec;
  --good:#16a34a; --bad:#dc2626;
  --sans:"Inter",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --serif:"Fraunces","Georgia",serif;
  --head:var(--sans); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg1);
  background-image:radial-gradient(1400px 700px at 70% -20%,var(--bg2),transparent 60%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:24px 22px 40px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4px 18px}
.brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.01em}
.brand i{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.blogo{display:block;object-fit:contain}
.blogo.mark{width:22px;height:22px;border-radius:5px}
.blogo.wordmark{height:20px;width:auto;max-width:170px}
.blogo.chip{background:#fff;padding:3px;box-sizing:border-box}
.blogo.wordmark.chip{padding:3px 6px;border-radius:5px}
.blogo.tile{background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.13)}
.blogo.emblem{height:22px;width:auto;max-width:70px;border-radius:4px}
.intrologo{margin:0 0 16px}
.cta-logo{margin:0 0 14px}
.blogo.lg.mark{width:54px;height:54px;border-radius:13px}
.blogo.lg.wordmark{height:44px;max-width:290px}
.blogo.lg.emblem{height:48px;max-width:160px;border-radius:9px}
.blogo.lg.chip{padding:7px}
.blogo.md.mark{width:40px;height:40px;border-radius:10px}
.blogo.md.wordmark{height:32px;max-width:220px}
.blogo.md.emblem{height:34px;max-width:112px;border-radius:7px}
.blogo.md.chip{padding:5px}
@media (max-width:640px){
  .blogo.lg.mark{width:46px;height:46px}.blogo.lg.wordmark{height:36px;max-width:220px}.blogo.lg.emblem{height:40px;max-width:130px}
  .blogo.md.mark{width:34px;height:34px}.blogo.md.wordmark{height:27px;max-width:180px}.blogo.md.emblem{height:29px;max-width:96px}
}
@media (max-width:640px){.blogo.wordmark{height:17px;max-width:130px}.blogo.mark{width:20px;height:20px}.blogo.emblem{height:19px;max-width:58px}}
.meta{font-size:12.5px;color:var(--ink-mute);display:flex;gap:18px;align-items:center}
.meta b{color:var(--ink-dim);font-weight:600}

.panel{position:relative;background:var(--panel);border:1px solid var(--panel-line);border-radius:22px;padding:28px 32px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.screen{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both;transition:opacity .18s ease,transform .18s ease}
.screen.leaving{opacity:0;transform:translateY(-4px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* progress */
.progress{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--panel-line);font-size:13px;color:var(--ink-dim)}
.steps{display:flex;gap:8px;align-items:center}
.step{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--panel-line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-mute);transition:all .3s}
.step.on{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.step.done{background:var(--good);border-color:var(--good);color:#fff}
.step.miss{background:var(--bad);border-color:var(--bad);color:#fff}
.stepline{width:14px;height:1.5px;background:var(--panel-line)}
.score-live b{color:var(--ink);font-weight:700}

/* buttons */
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;border-radius:10px;padding:14px 22px;font-size:15px;
  background:var(--accent);color:#fff;transition:transform .15s ease,box-shadow .15s ease,filter .15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  box-shadow:0 8px 24px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--panel-line);box-shadow:none}
.btn.big{font-size:16px;padding:16px 28px}
.btn .arr{opacity:.7}
.link{background:none;border:0;color:var(--ink-dim);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}

/* intro */
.intro{display:grid;grid-template-columns:1.3fr .8fr;gap:40px;align-items:center;min-height:440px}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px}
.intro h1{font-family:var(--head);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px}
.intro h1 em{font-style:normal;color:var(--accent)}
.intro .lead{font-size:16.5px;line-height:1.55;color:var(--ink-dim);margin:0 0 22px;max-width:560px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 26px;padding:0;list-style:none;max-width:560px}
.facts li{border:1px solid var(--panel-line);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.35;color:var(--ink-dim)}
.facts li b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.sources{font-size:11.5px;line-height:1.55;color:var(--ink-mute);margin:0 0 22px;letter-spacing:.005em}
.sources b{color:var(--ink-dim);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
.hint{font-size:12.5px;color:var(--ink-mute);margin-top:12px}

/* guide (character) */
.guide{display:flex;flex-direction:column;align-items:center;gap:12px}
.guide .avatar{width:100%;max-width:230px;aspect-ratio:1/1.1;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--panel-line);display:grid;place-items:end center;overflow:hidden;position:relative}
.guide .avatar .char{width:78%;margin-bottom:-4px}
.guide .who{text-align:center}
.guide .who b{display:block;font-size:14px;font-weight:600}
.guide .who span{font-size:12px;color:var(--ink-mute)}
.bubble{width:100%;max-width:230px;background:var(--card);color:var(--card-ink);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.4;position:relative;animation:pop .35s cubic-bezier(.2,1,.3,1) both;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:var(--card);transform:translateX(-50%) rotate(45deg);border-radius:2px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* round */
.round{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.qlabel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.q{font-family:var(--head);font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}
.q em{font-style:normal;color:var(--accent)}
.ctx{font-size:15px;line-height:1.55;color:var(--ink-dim);margin:0 0 14px;max-width:720px}
.task{transition:background .35s ease,border-color .35s ease;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);padding:8px 12px;border-radius:8px;border:1px solid var(--panel-line);background:rgba(255,255,255,.04);margin-bottom:18px}
.task i{width:18px;height:18px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff}

.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-auto-rows:auto;gap:14px}
.opt{position:relative;display:flex;align-items:stretch;text-align:left;cursor:pointer;border:0;font:inherit;background:transparent;padding:0;border-radius:var(--radius);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);animation:cardIn .4s cubic-bezier(.2,.8,.2,1) both}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.opt .halo{position:absolute;inset:-1.5px;border-radius:calc(var(--radius) + 1.5px);opacity:0;transition:opacity .25s;
  background:conic-gradient(from var(--ang,0deg),transparent 0 55%,var(--accent) 75%,transparent 95%);animation:spin 3.2s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.opt:hover .halo,.opt:focus-visible .halo{opacity:1}
.opt:hover{transform:translateY(-2px)}
.opt .inner{position:relative;z-index:1;flex:1;width:100%;background:var(--card);color:var(--card-ink);border-radius:var(--radius);border:1px solid var(--card-line);padding:16px 16px 16px;min-height:118px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:10px;transition:box-shadow .2s,border-color .2s;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.opt:hover .inner{box-shadow:0 14px 30px -14px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--accent) 45%,var(--card-line))}
.opt .num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--card-sub)}
.opt .pick{position:absolute;top:12px;right:14px;font-size:11px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .2s}
.opt:hover .pick{opacity:1}
.opt .head{display:flex;gap:12px;align-items:flex-start}
.opt .mail,.opt .code,.opt .chat,.opt .stat{flex:1}
.opt .ico{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,#fff);color:color-mix(in srgb,var(--accent) 75%,#000)}
.opt .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.opt .ico.emoji{font-size:20px}
.opt .t{font-weight:600;font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
.opt .s{font-size:13.5px;color:var(--card-sub);line-height:1.45;margin-top:2px}
/* rich options */
.opt .mail{border:1px solid var(--card-line);border-radius:10px;background:#fafafa;padding:10px 12px;font-size:12.5px;line-height:1.4}
.opt .mail .from{display:flex;justify-content:space-between;gap:8px;color:#111;font-weight:600}
.opt .mail .from span:last-child{color:#888;font-weight:400;font-size:11.5px}
.opt .mail .addr{color:#6b7280;font-size:11.5px;word-break:break-all}
.opt .mail .subj{font-weight:600;margin:6px 0 3px;color:#111}
.opt .mail .body{color:#374151;white-space:pre-line}
.opt .mail .body u{color:#1d4ed8}
.opt .code{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:11px 12px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.opt .code .hl{color:#fbbf24}
.opt .chat{display:flex;flex-direction:column;gap:6px}
.opt .chat .msg{background:#f1f3f6;border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.4;color:#1f2937}
.opt .chat .msg.me{background:color-mix(in srgb,var(--accent) 14%,#fff);align-self:flex-end}
.opt .stat{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.opt .stat div{background:#f6f7f9;border:1px solid var(--card-line);border-radius:8px;padding:7px 9px;font-size:11.5px;color:#6b7280}
.opt .stat div b{display:block;font-size:14px;color:#111;font-weight:600;margin-bottom:1px}
.opt .t.center{text-align:left}

/* answer states */
.grid.locked .opt{pointer-events:none}
.grid.locked .opt .pick,.grid.locked .opt .halo{opacity:0!important}
.opt.correct .inner{border-color:var(--good);box-shadow:0 0 0 2px var(--good),0 16px 34px -14px color-mix(in srgb,var(--good) 60%,transparent)}
.opt.correct{animation:none;z-index:2}
.opt.wrong .inner{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.opt.wrong{animation:none}
.opt.reveal .inner{border-color:var(--good);box-shadow:0 0 0 2px var(--good)}
.opt.dim{opacity:.45}
.opt .mark{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;z-index:3;transform:scale(0);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.opt.correct .mark,.opt.reveal .mark{background:var(--good);transform:scale(1)}
.opt.wrong .mark{background:var(--bad);transform:scale(1)}
.opt .tag{position:absolute;left:14px;bottom:-11px;transform:scale(0);padding:4px 10px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;z-index:3;white-space:nowrap;transition:transform .3s cubic-bezier(.2,1.4,.4,1) .08s}
.opt.correct .tag,.opt.reveal .tag{background:var(--good);transform:scale(1)}
.opt.wrong .tag{background:var(--bad);transform:scale(1)}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes lift{0%{transform:scale(1)}50%{transform:translateY(-4px) scale(1.015)}100%{transform:scale(1.01)}}

.foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid var(--panel-line);font-size:12.5px;color:var(--ink-mute)}

/* result */
.result{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.gauge{position:relative;width:184px;height:184px;margin:4px auto 12px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:10}
.gauge .fill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:565;stroke-dashoffset:565;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.gauge .n{position:absolute;inset:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.gauge .n b{font-size:44px;line-height:1;display:block;font-weight:600;letter-spacing:-.03em}
.gauge .n small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);line-height:1.2;max-width:110px}
.bench{font-size:12.5px;color:var(--ink-mute);text-align:center;margin-bottom:14px}
.tier{display:inline-block;padding:5px 10px;border-radius:6px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--ink);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.result h2{font-family:var(--head);font-size:clamp(24px,2.8vw,34px);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}
.result .lead{font-size:15.5px;line-height:1.55;color:var(--ink-dim);margin:0 0 18px;max-width:640px}
.recap{display:grid;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.recap li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--panel-line);border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.45}
.recap li i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;font-size:11px;margin-top:1px}
.recap li.ok i{background:var(--good)}.recap li.no i{background:var(--bad)}
.recap li b{display:block;font-weight:600;color:var(--ink)}
.recap li span{color:var(--ink-dim)}
/* six-point checklist */
.checklist{position:relative;border-radius:18px;padding:22px 22px 18px;margin:0 0 22px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%);overflow:hidden;box-shadow:0 0 40px -14px color-mix(in srgb,var(--accent) 45%,transparent)}
.ck-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px}
.ck-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:4px}
.ck-title{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ck-intro{font-size:13.5px;color:var(--ink-dim);line-height:1.5;margin:-6px 0 14px;max-width:640px}
.ck-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--panel-line);font-size:12.5px;color:var(--ink-mute);flex-wrap:wrap}
.ck-foot .btn{padding:10px 16px;font-size:13.5px}
.ck-foot .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.ck{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:11px 14px;border-radius:12px;border:1px solid var(--panel-line);background:rgba(255,255,255,.03);
  opacity:0;transform:translateY(8px);animation:ckIn .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ckIn{to{opacity:1;transform:none}}
.ck-box{width:22px;height:22px;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);display:grid;place-items:center;position:relative;margin-top:2px}
.ck-body b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.ck-body span{display:block;font-size:12.5px;color:var(--ink-dim);line-height:1.4;margin-top:2px}
.ck-body em{display:block;font-style:normal;font-size:12px;color:var(--ink-dim);margin-top:5px;line-height:1.45}
.ck-body em b{color:var(--accent);font-weight:700;font-size:15px;margin-right:4px}
@media (max-width:900px){.ck{grid-template-columns:24px 1fr}.verdict .ev{flex-direction:column;align-items:flex-start;gap:8px}.verdict .ev .fig{text-align:left}}

.cta{border-radius:16px;padding:24px 26px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.cta-kick{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:9px}
.cta-kick i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:dotPulse 2.2s ease-out infinite}
.cta-end{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:-4px 0 4px;padding:14px 18px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cta-end span{font-size:14px;color:var(--ink-dim);font-weight:600}
.cta h3{font-family:var(--head);font-size:clamp(20px,2.2vw,26px);margin:0 0 8px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.cta p{margin:0 0 18px;color:var(--ink-dim);font-size:14.5px;line-height:1.55;max-width:640px}
.cta-who{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.cta-face{width:58px;height:58px;border-radius:50%;flex:0 0 auto;background-image:var(--face,none);background-size:cover;background-position:center 18%;border:2px solid rgba(255,255,255,.92);box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.cta-who-t{font-size:12.5px;line-height:1.35;color:var(--ink-mute)}
.cta-who-t b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.cta .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta .proof{font-size:12.5px;color:var(--ink-mute);margin-top:14px}

/* confetti */
#confetti{position:fixed;inset:0;z-index:6;pointer-events:none}

/* ===== character rig (restrained) ===== */
.char{overflow:visible}
.char *{transform-box:view-box}
.char .ch{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.char .ch-eye{animation:blink 5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.char .ch-eye-happy,.char .ch-mouth-frown,.char .ch-mouth-o,.char .ch-mouth-grin,.char .ch-finger,.char .ch-tear,.char .ch-sweat{opacity:0}
.char .ch-brow{transition:transform .25s}
.char .ch-arm{transition:transform .4s cubic-bezier(.2,.9,.3,1.1)}
.char .ch-head{transition:transform .3s}
.char.st-wave .ch-arm-r{animation:wave 1.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-150deg)}50%{transform:rotate(-128deg)}}
.char.st-wag .ch-arm-r,.char.st-gloat .ch-arm-r{transform:rotate(-160deg)}
.char.st-wag .ch-finger,.char.st-gloat .ch-finger{opacity:1}
.char.st-wag .ch-hand-r,.char.st-gloat .ch-hand-r{animation:wag .38s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.char.st-wag .ch-head{animation:headshake .55s ease-in-out 3}
@keyframes headshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.char.st-wag .ch-mouth-smile{opacity:0}.char.st-wag .ch-mouth-frown{opacity:1}
.char.st-wag .ch-brow-l{transform:rotate(14deg) translateY(2px)}.char.st-wag .ch-brow-r{transform:rotate(-14deg) translateY(2px)}
.char.st-clap .ch-arm-l{animation:clapL .4s ease-in-out infinite alternate}
.char.st-clap .ch-arm-r{animation:clapR .4s ease-in-out infinite alternate}
@keyframes clapL{from{transform:rotate(98deg)}to{transform:rotate(124deg)}}
@keyframes clapR{from{transform:rotate(-98deg)}to{transform:rotate(-124deg)}}
.char.st-clap .ch-eye{opacity:0}.char.st-clap .ch-eye-happy{opacity:1}
.char.st-cheer .ch{animation:jump 1s cubic-bezier(.3,.8,.3,1) infinite}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
.char.st-cheer .ch-arm-l{transform:rotate(155deg)}.char.st-cheer .ch-arm-r{transform:rotate(-155deg)}
.char.st-cheer .ch-eye{opacity:0}.char.st-cheer .ch-eye-happy{opacity:1}
.char.st-cheer .ch-mouth-smile{opacity:0}.char.st-cheer .ch-mouth-grin{opacity:1}
.char.st-busted .ch-arm-l{transform:rotate(160deg)}.char.st-busted .ch-arm-r{transform:rotate(-160deg)}
.char.st-busted .ch-mouth-smile{opacity:0}.char.st-busted .ch-mouth-o{opacity:1}
.char.st-busted .ch-eye{transform:scale(1.25)}
.char.st-busted .ch-brow-l{transform:rotate(-12deg) translateY(-4px)}.char.st-busted .ch-brow-r{transform:rotate(12deg) translateY(-4px)}
.char.st-busted .ch-sweat{opacity:1;animation:sweat 1.1s ease-in infinite}
@keyframes sweat{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}
.char.st-gloat .ch-mouth-smile{opacity:0}.char.st-gloat .ch-mouth-grin{opacity:1}
.char.st-gloat .ch-brow-l{transform:rotate(14deg) translateY(2px)}.char.st-gloat .ch-brow-r{transform:rotate(-14deg) translateY(2px)}
.char.st-note .ch-arm-r{transform:rotate(-138deg)}
.char.st-note .ch-finger{opacity:1}
.char.st-note .ch-head{animation:nodOnce .9s ease-in-out 1}
@keyframes nodOnce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.char.st-note .ch-brow-l{transform:rotate(-6deg) translateY(-2px)}.char.st-note .ch-brow-r{transform:rotate(6deg) translateY(-2px)}
.char.st-slump .ch-head{transform:translateY(6px) rotate(5deg)}
.char.st-slump .ch-mouth-smile{opacity:0}.char.st-slump .ch-mouth-frown{opacity:1}
.char.st-slump .ch-brow-l{transform:rotate(-10deg)}.char.st-slump .ch-brow-r{transform:rotate(10deg)}

@media (max-width:640px){
  .cta-kick{align-items:flex-start;line-height:1.35}
  .cta-kick i{margin-top:5px;flex:none}
  .ck-head{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:640px){
  .link{display:inline-flex;align-items:center;min-height:40px;padding:8px 0}
  .tk-row{gap:6px 14px}
  .ck-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .cta-end{flex-direction:column;align-items:stretch;text-align:left}
  .cta-end .btn{justify-content:center}
  .subs{flex-direction:column}
}
@media (max-width:640px){
  .progress{flex-wrap:wrap;gap:10px 12px;padding-bottom:14px;margin-bottom:18px;font-size:12.5px}
  .progress>div:first-child{order:1}
  .score-live{order:2;margin-left:auto}
  .steps{order:3;flex:1 1 100%;justify-content:space-between;gap:0;min-width:0}
  .stepline{flex:1 1 auto;width:auto;min-width:4px}
  .step{width:24px;height:24px;min-width:24px;font-size:11px}
}
@media (max-width:900px){
  .wrap{padding:16px 14px 32px}
  .intro,.round,.result{grid-template-columns:1fr;gap:22px;min-height:0}
  .guide{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 14px}
  .guide .avatar{width:84px;max-width:84px;aspect-ratio:1;border-radius:14px}
  .guide .avatar .char{width:84%}
  .guide .who{text-align:left;flex:1}
  .bubble{order:3;flex:1 1 100%;max-width:none;margin-top:2px}
  .bubble::after{left:30px;bottom:auto;top:-6px;transform:rotate(45deg)}
  .panel{padding:18px 16px;border-radius:16px}
  .grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .verdict{flex-wrap:wrap}.verdict .next{margin-left:0;width:100%}
  .foot{flex-direction:column;align-items:flex-start}
  .bar{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media print{ body{background:#fff;color:#111} .wrap{padding:0} .bar,.progress,.result>div:first-child,.cta,.foot,.ck-foot,#confetti{display:none!important} .panel{border:0;box-shadow:none;background:none;padding:0} .checklist{border:1px solid #ddd;background:none;animation:none;box-shadow:none;color:#111} .ck{opacity:1;transform:none;animation:none;border-color:#ddd;background:none;color:#111} .ck-body span,.ck-intro{color:#444} .tier{color:#111;background:none;border-color:#999} .result h2,.result .lead{color:#111} }

/* ===== PDF preview modal ===== */
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,8,16,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeUp .25s both}
.modal .box{width:min(960px,100%);max-height:92vh;display:grid;grid-template-columns:1fr 260px;gap:18px;background:var(--bg1);border:1px solid var(--panel-line);border-radius:18px;padding:18px;overflow:hidden}
.modal .paper-wrap{overflow:auto;border-radius:10px;background:#3a3f4b;padding:18px;display:flex;justify-content:center}
.paper{width:612px;min-height:792px;background:#fff;color:#111;padding:54px 56px;box-shadow:0 20px 50px rgba(0,0,0,.5);font-family:var(--sans);position:relative;flex:none}
.paper .bar{position:absolute;top:0;left:0;right:0;height:8px;background:var(--accent);padding:0}
.paper .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.paper h1{font-size:22px;margin:0 0 8px;letter-spacing:-.02em;line-height:1.15;font-weight:700}
.paper .i{font-size:11.5px;color:#444;line-height:1.5;margin:0 0 18px}
.paper ol{list-style:none;padding:0;margin:0 0 20px}
.paper li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid #e5e7eb}
.paper li:last-child{border-bottom:1px solid #e5e7eb}
.paper .bx{flex:none;width:16px;height:16px;border:1.5px solid #9ca3af;border-radius:4px;margin-top:2px;display:grid;place-items:center;font-size:11px;color:#fff}
.paper .bx.on{background:#16a34a;border-color:#16a34a}
.paper li b{display:block;font-size:12.5px;margin-bottom:2px}
.paper li span{display:block;font-size:11px;color:#444;line-height:1.45}
.paper li em{display:block;font-style:normal;font-size:10px;color:#6b7280;margin-top:4px;line-height:1.4}
.paper .f{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#555;border-top:2px solid var(--accent);padding-top:10px;margin-top:6px}
.paper .f b{color:#111;display:block;font-size:11px}
.modal .side{display:flex;flex-direction:column;gap:12px}
.modal .side h4{margin:0;font-size:16px;font-weight:600}
.modal .side p{margin:0;font-size:13px;color:var(--ink-dim);line-height:1.5}
.modal .side .btn{justify-content:center}
.modal .side .sp{flex:1}
@media (max-width:900px){.modal{padding:10px}.modal .box{grid-template-columns:1fr;max-height:94vh}.modal .paper-wrap{padding:8px}.paper{width:100%;min-height:0;padding:28px 22px}.modal .side{order:-1;flex-direction:row;flex-wrap:wrap}.modal .side h4,.modal .side p{width:100%}.paper .f{flex-direction:column;gap:8px}.paper .f div{text-align:left!important;min-width:0;overflow-wrap:anywhere}.paper ol li{overflow-wrap:anywhere}}


/* ===== answer stage: options and data takeaway share one footprint ===== */
.stage{display:grid;position:relative}
.stage>.grid,.stage>.tk{grid-area:1/1}
.stage>.grid{transition:opacity .4s ease,transform .4s ease}
.stage>.tk{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .5s ease .15s,transform .5s ease .15s,visibility 0s linear .65s;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:18px;padding:26px 28px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(255,255,255,.02) 65%);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center;align-self:start}
.stage.done>.grid{opacity:0;transform:scale(.985);pointer-events:none;visibility:hidden;transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.stage.done>.tk{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .2s,transform .5s ease .2s,visibility 0s}
.stage.done.review>.grid{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .35s ease,transform .35s ease,visibility 0s}
.stage.done.review>.tk{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.task.good{border-color:color-mix(in srgb,var(--good) 55%,transparent);background:color-mix(in srgb,var(--good) 12%,transparent)}
.task.good i{background:var(--good)}
.task.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.task.bad i{background:var(--bad)}
.task .pickd{font-weight:500;color:var(--ink-mute);margin-left:6px}
.task .pickd.nol{margin-left:0}
.tk-figwrap{position:relative;display:grid;place-items:center;gap:10px;padding:14px 10px;min-width:170px;max-width:300px}
.tk-figwrap::before{content:"";position:absolute;left:50%;top:50%;width:78%;height:70%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);filter:blur(28px);opacity:.28;animation:glowBreathe 3.6s ease-in-out infinite;pointer-events:none}
@keyframes glowBreathe{0%,100%{opacity:.22;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.4;transform:translate(-50%,-50%) scale(1.06)}}
.stage.done .tk-figwrap::after{content:"";position:absolute;inset:6px;border-radius:22px;border:1.5px solid var(--accent);opacity:0;animation:ping 1.2s ease-out .78s 1}
.stage.done .tk-figwrap::before{animation:glowHit 1.2s ease-out .55s 1,glowBreathe 3.6s ease-in-out 1.75s infinite}
@keyframes glowHit{0%{opacity:.18;transform:translate(-50%,-50%) scale(.8)}35%{opacity:.75;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:.22;transform:translate(-50%,-50%) scale(.92)}}
.stage.done .tk-fig{animation:figIn .8s cubic-bezier(.2,.9,.25,1) .5s both}
@keyframes figIn{0%{opacity:0;transform:scale(1.14) translateY(8px);filter:blur(12px)}55%{opacity:1;filter:blur(0)}75%{transform:scale(.985) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
.stage.done .tk-year{animation:pop .5s ease 1.05s both}
@media (prefers-reduced-motion:reduce){.stage.done .tk-fig,.stage.done .tk-year,.stage.done .tk-figwrap::before,.stage.done .tk-figwrap::after{animation:none}}
@keyframes ping{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.18)}}
.tk-eyebrow{position:relative;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;display:inline-flex;gap:8px;align-items:center}
.tk-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:dotPulse 2s ease-out infinite}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.tk-fig{position:relative;font-size:clamp(56px,7vw,96px);font-weight:700;letter-spacing:-.045em;line-height:1;white-space:nowrap;text-align:center;
  background:linear-gradient(180deg,#fff 0%,var(--accent) 48%,color-mix(in srgb,var(--accent) 72%,#000) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-fig.f1{font-size:clamp(58px,7.2vw,100px)}
.tk-fig.f2{font-size:clamp(48px,5.8vw,80px)}
.tk-fig.f3{font-size:clamp(36px,4.2vw,58px);white-space:normal;line-height:1.05}
.tk-fig.f4{font-size:clamp(28px,3.1vw,42px);white-space:normal;overflow-wrap:anywhere;line-height:1.1}
.tk-unit{position:relative;margin-top:2px;font-size:12.5px;line-height:1.3;letter-spacing:.03em;color:var(--ink-dim);font-weight:600;text-align:center;max-width:230px}
.tk-year{position:relative;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-dim);border:1px solid var(--panel-line);border-radius:999px;padding:4px 9px;background:rgba(255,255,255,.04)}
.tk-body{min-width:0}
.tk-res{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:24px}
.tk-res .chip{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:5px 10px;border-radius:999px;white-space:nowrap}
.tk-res{flex-wrap:wrap}
.tk-res .chip.good{background:var(--good)}.tk-res .chip.bad{background:var(--bad)}
.tk-res .pickd{font-size:12.5px;color:var(--ink-mute)}
.tk-head{font-family:var(--head);font-size:clamp(19px,2vw,24px);line-height:1.25;letter-spacing:-.015em;margin:0 0 10px;font-weight:600}
.tk-stat{font-size:14.5px;line-height:1.55;color:var(--ink-dim);margin:0 0 4px}
.tk-src{font-size:12px;color:var(--ink-mute);margin:0 0 18px}
.tk-src a{color:var(--ink-dim)}
.grid-note{grid-column:1/-1;display:none;font-size:13.5px;line-height:1.5;color:var(--ink-dim);padding:12px 14px;border:1px solid var(--panel-line);border-radius:12px;background:rgba(255,255,255,.03)}
.stage.review .grid-note{display:block;animation:fadeUp .3s both}
.tk-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){.stage>.tk{grid-template-columns:1fr;gap:14px;padding:20px 18px}.tk-figwrap{justify-items:start;place-items:start;padding:6px 0;min-width:0}.tk-fig{text-align:left;min-width:0;font-size:clamp(48px,14vw,76px);white-space:normal;overflow-wrap:anywhere}.tk-figwrap::before{left:30%}}

/* ── fx layer: opt-in motion, scoped to configs with fx:true ───────────────── */
.fx .opt{transition:transform .28s cubic-bezier(.22,1,.36,1);animation:fxCardIn .52s cubic-bezier(.22,1.05,.36,1) both}
.fx .opt:nth-child(1){animation-delay:.02s}.fx .opt:nth-child(2){animation-delay:.08s}
.fx .opt:nth-child(3){animation-delay:.14s}.fx .opt:nth-child(4){animation-delay:.2s}
@keyframes fxCardIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.fx .opt .inner{transition:box-shadow .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.fx .opt:hover{transform:translateY(-3px)}
.fx .opt:active{transform:translateY(-1px) scale(.99);transition-duration:.09s}
.fx .opt:hover .inner{box-shadow:0 20px 40px -20px rgba(0,0,0,.55)}

/* a soft light that follows the cursor across the card */
.fx .opt .inner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 10%,transparent),transparent 58%)}
.fx .opt:hover .inner::after{opacity:1}

/* the halo breathes instead of racing */
.fx .opt .halo{animation-duration:7s;transition:opacity .38s ease}
.fx .opt:hover .halo{opacity:.85}

/* the cue slides in rather than blinking on */
.fx .opt .pick{transform:translateX(5px);transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1)}
.fx .opt:hover .pick{transform:none}
.fx .opt .ico{transition:transform .32s cubic-bezier(.22,1.1,.36,1)}
.fx .opt:hover .ico{transform:translateY(-1px) scale(1.05)}

/* the answer: chosen card settles, the rest step back in sequence */
.fx .opt.correct,.fx .opt.wrong{animation:fxChosen .5s cubic-bezier(.22,1.05,.36,1) both}
@keyframes fxChosen{0%{transform:scale(1)}42%{transform:scale(1.014)}100%{transform:scale(1)}}
.fx .opt.dim{opacity:.4;transform:scale(.99);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.fx .opt:nth-child(2).dim{transition-delay:.05s}.fx .opt:nth-child(3).dim{transition-delay:.1s}
.fx .opt:nth-child(4).dim{transition-delay:.15s}
.fx .opt .mark,.fx .opt .tag{transition:transform .46s cubic-bezier(.3,1.4,.4,1)}

/* the reveal arrives in sequence, not all at once */
.fx .stage.done .tk-head{animation:fxRise .55s cubic-bezier(.22,1,.36,1) .34s both}
.fx .stage.done .tk-stat{animation:fxRise .55s cubic-bezier(.22,1,.36,1) .42s both}
.fx .stage.done .tk-src{animation:fxRise .55s cubic-bezier(.22,1,.36,1) .5s both}
.fx .stage.done .tk-row{animation:fxRise .55s cubic-bezier(.22,1,.36,1) .58s both}
@keyframes fxRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* progress: the line fills toward the step you just finished */
.fx .stepline{position:relative;overflow:hidden}
.fx .stepline::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.fx .stepline.fill::after{transform:scaleX(1)}
.fx .step{transition:transform .45s cubic-bezier(.3,1.35,.4,1),background .3s ease,border-color .3s ease,color .3s ease}
.fx .step.done,.fx .step.miss{transform:scale(1.06)}

/* buttons: lift, press, and the arrow leans into the click */
.fx .btn{transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,background .2s ease}
.fx .btn:hover{transform:translateY(-2px)}
.fx .btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.fx .btn .arr{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.fx .btn:hover .arr{transform:translateX(4px)}
.fx .link{transition:color .22s ease,opacity .22s ease}

/* screens hand over instead of cutting */
.fx .screen{animation:fxScreenIn .5s cubic-bezier(.22,1,.36,1) both;transition:opacity .2s ease,transform .2s ease}
@keyframes fxScreenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx .screen.leaving{opacity:0;transform:translateY(-5px) scale(.995)}

/* the checklist arrives as you reach it */
.fx .ck{animation:none;opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),border-color .3s ease}
.fx .ck.inview{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .06s)}
.fx .ck:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--panel-line))}

/* keyboard users get the same care */
.fx .opt:focus-visible .inner{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.fx .btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}

@media (prefers-reduced-motion:reduce){
  .fx .opt,.fx .screen,.fx .ck,.fx .stage.done .tk-head,.fx .stage.done .tk-stat,
  .fx .stage.done .tk-src,.fx .stage.done .tk-row{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .fx .opt .inner::after{display:none}
}
.gn-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--panel-line)}

/* the guide column is shorter than the options, so centre it to balance the row */
@media (min-width:901px){ .round .guide{align-self:center} }

/* ── beach layer: light, sunlit treatment, enabled per client by the beach flag ── */
.beach{
  --sticky-bg:rgba(255,252,246,.98);
  --ink:#123038; --ink-dim:rgba(18,48,56,.74); --ink-mute:rgba(18,48,56,.52);
  --panel:rgba(255,252,246,.88); --panel-line:rgba(18,48,56,.12);
  --card:#fffdf8; --card-ink:#123038; --card-sub:#6d7f7f; --card-line:#ece3d2;
  --sun:#ffd27a; --sand:#fdf6ea;
}
.beach body{
  color:var(--ink);
  background:var(--sand);
  background-image:
    radial-gradient(1100px 380px at 76% -70px, rgba(255,209,122,.60), rgba(255,209,122,0) 68%),
    linear-gradient(180deg, rgba(253,246,234,0) 0, rgba(253,246,234,0) 32%, rgba(253,246,234,.60) 54%, var(--sand) 74%),
    var(--hero, none);
  background-size:auto, auto, 100% auto;
  background-position:center top, center top, center top;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-attachment:scroll, scroll, scroll;
}
/* sun-warmed light across the top of the page */
.beach .wrap::before{
  content:''; position:fixed; inset:0 0 auto 0; height:340px; pointer-events:none; z-index:0;
  background:radial-gradient(620px 300px at 78% -110px, rgba(255,196,84,.42), rgba(255,196,84,0) 66%);
}
.beach .wrap>*{position:relative;z-index:1}
.beach .wrap{padding-top:16px}
.beach .panel{margin-top:clamp(24px,5vh,64px)}
@media (max-height:860px){ .beach .panel{margin-top:20px} }
.beach .bar{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.beach .bar .meta{color:rgba(255,255,255,.88)}
.beach .bar .meta b{color:#fff}
.beach .bar .meta span{color:rgba(255,255,255,.88)}
.beach .panel{
  background:rgba(255,252,246,.90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.92); box-shadow:0 30px 70px -30px rgba(120,96,48,.34), 0 2px 0 rgba(255,255,255,.8) inset;
}
.beach .kicker{color:#0a7f8c}
.beach .guide .avatar{background:linear-gradient(180deg,#ffeec4,#d6efef); border:1px solid rgba(18,48,56,.10)}
.beach .bubble{background:#fff; color:var(--ink); border:1px solid rgba(18,48,56,.10); box-shadow:0 12px 30px -16px rgba(9,60,70,.45)}
.beach .bubble::after{background:#fff; border:1px solid rgba(18,48,56,.10)}
.beach .facts li{background:rgba(255,252,245,.74); border-color:rgba(18,48,56,.11)}
.beach .sources{color:rgba(18,48,56,.6)}
.beach .sources b{color:rgba(18,48,56,.72)}
.beach .opt .inner{box-shadow:0 10px 26px -18px rgba(9,60,70,.5)}
.beach .opt:hover .inner{box-shadow:0 20px 40px -22px rgba(9,60,70,.55)}
.beach .task{background:rgba(255,251,242,.80);border-color:rgba(18,48,56,.13)}
.beach .step{border-color:rgba(18,48,56,.18);color:rgba(18,48,56,.5)}
.beach .stepline{background:rgba(18,48,56,.16)}
.beach .stage>.tk{background:rgba(255,252,246,.92);border:1px solid rgba(18,48,56,.11);box-shadow:0 24px 60px -34px rgba(120,96,48,.38)}
.beach .tk-fig{background:linear-gradient(180deg,#0f9aa8 0%,#17b0a2 52%,#e0a326 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.beach .tk-unit{color:rgba(18,48,56,.6)}
.beach .gauge .track{stroke:rgba(18,48,56,.12)}
.beach .checklist{
  border-color:rgba(18,48,56,.12);
  background:linear-gradient(160deg, rgba(255,253,247,.96), rgba(255,240,208,.82) 55%, rgba(226,244,244,.9));
  box-shadow:0 26px 60px -34px rgba(120,96,48,.38);
}
.beach .ck{background:rgba(255,253,248,.88);border-color:rgba(18,48,56,.10)}
.beach .cta{
  border-color:rgba(18,48,56,.12);
  background:linear-gradient(135deg, rgba(255,253,246,.95), rgba(255,231,181,.80) 45%, rgba(204,238,240,.86)), var(--room, none);
  background-size:cover; background-position:center;
  box-shadow:0 26px 60px -34px rgba(9,60,70,.45);
}
.beach .cta-end{background:rgba(255,252,244,.84);border-color:rgba(18,48,56,.13)}
.beach .tier{color:#8a5a08;background:rgba(240,181,60,.22)}
.beach .foot{color:rgba(18,48,56,.55);border-top-color:rgba(18,48,56,.12)}
.beach .btn.ghost{color:var(--ink);border-color:rgba(18,48,56,.2)}
.beach .link{color:#0a7f8c}
@media (max-width:640px){
  /* Naples only: a slim strip of the beach photo above the panel */
  .beach body{ background-size:auto, auto, auto 190px; background-attachment:scroll, scroll, scroll; }
  .beach .wrap::before{height:170px}
  .beach .panel{margin-top:40px}

  /* Compact phone layout, switched on per quiz with compact:true in the config.
     The goal on every screen: the thing to tap is visible without scrolling. */
  .compact .panel{padding:22px 18px}
  .compact .bar .meta{display:none}

  /* intro: kicker, headline, one paragraph, then Start. The detail moves below the button. */
  .compact .intro > div:first-child{display:flex;flex-direction:column}
  .compact .intrologo{display:none}
  .compact .intro .kicker{margin-bottom:8px}
  .compact .intro h1{font-size:28px;margin-bottom:10px}
  .compact .intro .lead{font-size:15px;line-height:1.5;margin-bottom:18px}
  .compact .intro #start{order:5;align-self:stretch;justify-content:center}
  .compact .intro .hint{order:6;margin-top:8px;text-align:center}
  .compact .intro .facts{order:7;margin:26px 0 14px}
  .compact .intro .sources{order:8}

  /* questions: Flip shrinks to one row beside his line, and the framing paragraph goes */
  .compact .round .guide{flex-wrap:nowrap;align-items:center;gap:10px}
  .compact .round .guide .avatar{order:0;width:54px;max-width:54px;flex:0 0 54px;border-radius:12px}
  .compact .round .guide .who{display:none}
  .compact .round .bubble{order:1;flex:1 1 auto;margin:0;padding:9px 12px;font-size:13.5px}
  .compact .round .bubble::after{left:-6px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}
  .compact .round .ctx{display:none}
  .compact .q{font-size:22px;margin-bottom:12px}
  .compact .task{margin-bottom:12px}

  /* option cards: letter in the corner, no sub-line, sized to their content */
  .compact .opt .inner{min-height:0;padding:12px 40px 12px 14px}
  .compact .opt .num{position:absolute;top:11px;right:13px;margin:0}
  .compact .opt .s{display:none}
  .compact .opt .ico{display:none}   /* the text needs the width more than the card needs the glyph */

  /* one column of four: size each card to its own content. The desktop repeat(2,1fr) rows
     would otherwise stretch A and B to fill the height reserved for the answer card. */
  .compact .grid{grid-template-rows:none;grid-auto-rows:auto;align-content:start}

  /* the answer card: tighter type, both controls on one row, and that row pinned to the
     bottom of the screen so Continue is reachable without hunting for it */
  .compact .stage>.tk{padding:16px 16px 0;gap:8px}
  .compact .tk-fig{font-size:52px}
  .compact .tk-head{font-size:17px;line-height:1.3}
  .compact .tk-stat{font-size:13.5px;line-height:1.45}
  .compact .tk-row{flex-wrap:nowrap;align-items:center;gap:16px;position:sticky;bottom:0;z-index:3;
    margin:6px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--sticky-bg,#fff) 72%,transparent);border-radius:0 0 var(--radius) var(--radius)}

  /* result: the ring already reports the score, so the question-progress row can go */
  .compact .panel:has(.result) .progress{display:none}
  /* result: a smaller score ring and Flip on one row, then the verdict, then Dana, then the explanation */
  .compact .result{gap:12px}
  .compact .gauge{width:104px;height:104px;margin:0 auto 6px}
  .compact .gauge .n{inset:12px;gap:2px}
  .compact .gauge .n b{font-size:29px}
  .compact .bench{margin-bottom:8px}
  .compact .result .guide{flex-wrap:nowrap;align-items:center;gap:10px}
  .compact .result .guide .avatar{order:0;width:54px;max-width:54px;flex:0 0 54px;border-radius:12px}
  .compact .result .guide .who{display:none}
  .compact .result .bubble{order:1;flex:1 1 auto;margin:0;padding:9px 12px;font-size:13.5px}
  .compact .result .bubble::after{left:-6px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}
  .compact .result > div:last-child{display:flex;flex-direction:column}
  .compact .result .tier{order:1;align-self:flex-start}
  .compact .result h2{order:2;font-size:24px}
  .compact .result .cta{order:3;margin-bottom:18px}
  .compact .result .lead{order:4;font-size:14.5px}
  .compact .result .checklist{order:5}
  .compact .result .cta-end{order:6}
  .compact .cta{padding:16px}
  .compact .cta-logo,.compact .cta-kick{display:none}
  .compact .cta h3{font-size:21px}
  .compact .cta p{font-size:14px;line-height:1.5;margin-bottom:14px}
  .compact .cta .row .btn{flex:1 1 100%;justify-content:center}

  /* checklist on screen: the practice, not the full citation. The PDF still carries every source. */
  .compact .ck-body em{display:none}
}

/* ---------------------------------------------------------------------------
   Healthy Italia brand layer (skin:'hi'), from the Healthy Italia brand guide.
   Corporate colors: Pantone 7532 C #63513D (brown) and Pantone 7529 C #B7A99A (taupe).
   The guide sanctions three pairings: brown ground with taupe logo, taupe ground
   with brown logo, white ground with brown logo. This layer uses the last two:
   a taupe band behind the header, white paper for everything people read.
   Taupe is only 2.3:1 against white, so it is never used for text here.
   --------------------------------------------------------------------------- */
.skin-hi{
  --sticky-bg:#fff;
  --hi-brown:#63513D; --hi-taupe:#B7A99A; --hi-deep:#4A3C2D; --hi-tint:#EFE9E2; --hi-pale:#F6F2ED;
  --ink:#4A3C2D; --ink-dim:rgba(74,60,45,.84); --ink-mute:rgba(74,60,45,.76);
  --panel:#FFFDFB; --panel-line:rgba(99,81,61,.16);
  --card:#FFFFFF; --card-ink:#3F3326; --card-sub:#7A6A58; --card-line:#E6DED4;
  --accent:#63513D; --accent2:#B7A99A;
  --good:#5B7A48; --bad:#A6472E;
}
.skin-hi body{
  color:var(--ink); background:var(--hi-tint);
  background-image:linear-gradient(180deg,var(--hi-taupe) 0,var(--hi-taupe) 150px,#D6CCC0 290px,var(--hi-tint) 520px);
  background-attachment:scroll;
}
/* header sits on the taupe band: brown mark on taupe is a sanctioned pairing.
   The mark stands alone, because the guide marks the mark beside the name as wrong use. */
.skin-hi .bar .brand{font-size:0;gap:0}
.skin-hi .blogo.chip{background:transparent;padding:0}
.skin-hi .blogo.mark{width:30px;height:30px}
.skin-hi .bar .meta{color:var(--hi-deep)}
.skin-hi .bar .meta b{color:#3F3326}
.skin-hi .panel{background:var(--panel);border:1px solid rgba(99,81,61,.14);
  box-shadow:0 30px 70px -34px rgba(74,60,45,.45),0 1px 0 rgba(255,255,255,.9) inset}
.skin-hi .kicker,.skin-hi .qlabel{color:var(--hi-brown)}
.skin-hi .guide .avatar{background:linear-gradient(180deg,var(--hi-pale),#E9E1D7);border:1px solid rgba(99,81,61,.14)}
.skin-hi .bubble{background:#fff;color:var(--ink);border:1px solid rgba(99,81,61,.14);box-shadow:0 12px 28px -16px rgba(74,60,45,.4)}
.skin-hi .bubble::after{background:#fff}
.skin-hi .facts li{background:var(--hi-pale);border-color:rgba(99,81,61,.14)}
.skin-hi .sources{color:var(--ink-mute)} .skin-hi .sources b{color:var(--ink-dim)}
.skin-hi .opt .inner{box-shadow:0 10px 24px -18px rgba(74,60,45,.5)}
.skin-hi .opt:hover .inner{box-shadow:0 18px 36px -22px rgba(74,60,45,.55);border-color:rgba(99,81,61,.35)}
.skin-hi .opt .ico{background:var(--hi-pale);color:var(--hi-brown)}
.skin-hi .task{background:var(--hi-pale);border-color:rgba(99,81,61,.16)}
.skin-hi .step{border-color:rgba(99,81,61,.3);color:rgba(74,60,45,.78)}
.skin-hi .step.on{background:rgba(183,169,154,.35);border-color:var(--hi-brown);color:var(--hi-deep)}
.skin-hi .stepline{background:rgba(99,81,61,.18)}
.skin-hi .stage>.tk{background:#fff;border:1px solid rgba(99,81,61,.14);box-shadow:0 24px 56px -34px rgba(74,60,45,.45)}
.skin-hi .tk-fig{background:linear-gradient(180deg,#7E6751 0%,var(--hi-brown) 55%,var(--hi-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.skin-hi .tk-unit{color:var(--ink-mute)}
.skin-hi .gauge .track{stroke:rgba(183,169,154,.45)}
.skin-hi .tier{color:var(--hi-deep);background:rgba(183,169,154,.32);border-color:rgba(99,81,61,.2)}
.skin-hi .checklist{border-color:rgba(99,81,61,.14);background:linear-gradient(160deg,#fff,var(--hi-pale));box-shadow:0 24px 56px -34px rgba(74,60,45,.4)}
.skin-hi .ck{background:#fff;border-color:rgba(99,81,61,.12)}
/* the offer: brown ground with light type, the guide's first pairing */
.skin-hi .cta{border-color:var(--hi-brown);background:var(--hi-brown);color:#FBF7F2;box-shadow:0 26px 56px -30px rgba(74,60,45,.6)}
.skin-hi .cta h3{color:#fff}
.skin-hi .cta p{color:rgba(251,247,242,.86)}
.skin-hi .cta .proof{color:rgba(251,247,242,.72)}
.skin-hi .cta-kick{color:#DCD2C6} .skin-hi .cta-kick i{background:var(--hi-taupe)}   /* taupe itself is 3.3:1 on brown; this lighter tint clears 4.5 */
.skin-hi .cta .btn.big{background:#FBF7F2;color:var(--hi-deep);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.skin-hi .cta .btn.ghost{color:#FBF7F2;border-color:rgba(251,247,242,.45)}
.skin-hi .cta-logo .blogo{filter:brightness(0) invert(.86) sepia(.25)}
.skin-hi .cta-end{background:var(--hi-pale);border-color:rgba(99,81,61,.18)}
.skin-hi .foot{color:var(--ink-mute);border-top-color:rgba(99,81,61,.14)}
.skin-hi .btn.ghost{color:var(--ink);border-color:rgba(99,81,61,.3)}
.skin-hi .link{color:var(--hi-brown)}
.skin-hi .bench{color:var(--ink-mute)}