*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
/* Dark theme — rewind-scorequiz runs against a black canvas so the brand reads
as premium/longevity. Adjust token values, not hardcoded colours, so themed
surfaces stay consistent. */
--bg:#030810;--bg2:#0A1428;--bg3:#0F1D33;
--cy:#2ED7FF;--cy2:#00FFC2;--bl:#2196D6;
--cyd:rgba(46,215,255,.10);--cyg:rgba(46,215,255,.32);
--am:#F59E0B;--amd:rgba(245,158,11,.08);
--rd:#F87171;--rdd:rgba(248,113,113,.08);
--tx:#FFFFFF;--g:#C1CDD9;--gd:#8899AB;
--brd:rgba(255,255,255,.08);
/* --on-cyan: text colour used on cyan-gradient fills. Stays dark regardless of
theme — white-on-cyan gradient has poor contrast. */
--on-cyan:#030810;
/* 2026-05-04 — switched the type stack from DM Sans / DM Mono /
Instrument Serif to Apple's high-retina system fonts (SF Pro Text,
SF Pro Display, SF Mono, New York). Per Ben Bradshaw's TestFlight
feedback the app should read as native iOS — Apple's HIG type
makes that consistent across the app and the score quiz. The
Google Fonts tags in quiz.html were removed in the same
commit so we don't pay the network cost.
`-apple-system` resolves to SF on iOS/macOS Safari, BlinkMacSystemFont
gets us SF in Chrome/Edge on macOS, system-ui covers Windows / Linux
/ Android (Segoe UI / Cantarell / Roboto), and sans-serif is the
final fallback. Same pattern for mono (`ui-monospace` → SF Mono)
and serif (`ui-serif` → New York). */
--s:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,sans-serif;
--m:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--f:ui-serif,'New York',Georgia,serif;
--e:cubic-bezier(.22,1,.36,1)
}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--tx);font-family:var(--s);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-weight:400;min-height:100vh}
/* Force form controls to inherit body colour AND drop the iOS/Android native
control chrome. The combination is what actually kills the blue-text-on-black
bug — `-webkit-appearance:none` removes iOS Safari's automatic "this is a
button/link, paint it accent-blue" behaviour, which sometimes leaks through
to nested children despite `color: inherit`. */
button,input,textarea,select{color:inherit;font-family:inherit;font-size:inherit;background:transparent;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
/* Children of buttons need explicit inherit too — iOS can recolour inner spans
independently of the button element itself. */
button *{color:inherit}
input::placeholder,textarea::placeholder{color:var(--gd)}
/* Nuclear fallback for the one stubborn iOS case — force white on every choice
label and descendant. Uses !important because user-agent CSS on buttons
sometimes wins specificity despite our resets above. */
.choice,.choice *,.choice-label{color:#FFFFFF!important}
.choice-desc{color:#8899AB!important}
::selection{background:rgba(46,215,255,.22);color:#fff}
/* HEADER — minimal, just the logo centered at the top, in normal flow */
.q-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:8px 16px}
.q-header-logo{height:40px;object-fit:contain;display:block;filter:brightness(0) invert(1)}
/* PROGRESS BAR */
.progress-wrap{position:relative;z-index:2;background:var(--bg);border-bottom:1px solid var(--brd);padding:0 48px;margin-top:8px}
.progress-bar{height:3px;background:var(--bg2);border-radius:2px;overflow:hidden;margin:12px 0}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--cy),var(--cy2));border-radius:2px;transition:width .4s var(--e)}
.progress-text{display:flex;justify-content:space-between;padding-bottom:10px;font-size:12px;font-family:var(--m);color:var(--gd);letter-spacing:.04em}
/* QUIZ CONTAINER */
.quiz-wrap{max-width:640px;margin:0 auto;padding:32px 24px 80px;min-height:calc(100vh - 80px);display:flex;flex-direction:column;justify-content:center}
.quiz-wrap.intro-mode{max-width:720px;padding-top:24px;justify-content:flex-start}
.quiz-card{opacity:0;transform:translateY(16px) scale(.99);transition:opacity .28s var(--e),transform .28s var(--e)}
.quiz-card.active{opacity:1;transform:translateY(0) scale(1)}
.quiz-card.exit{opacity:0;transform:translateY(-12px) scale(.99);transition:opacity .12s ease-in,transform .12s ease-in}
/* PAGE TYPES */
.page-title{font-size:clamp(24px,5vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:10px;color:var(--tx)}
.page-subtitle{font-size:15px;color:var(--gd);line-height:1.6;margin-bottom:36px;font-weight:400}
.page-title em{font-family:var(--f);font-style:italic;font-weight:400}
.page-helper{font-size:14px;color:var(--gd);margin-bottom:28px;line-height:1.5}
/* QUESTION ENTRANCE ANIMATIONS */
.q-title{opacity:0;transform:translateY(12px);transition:opacity .22s var(--e),transform .22s var(--e)}
.q-title.enter{opacity:1;transform:translateY(0)}
.q-sub{opacity:0;transform:translateY(8px);transition:opacity .2s var(--e),transform .2s var(--e)}
.q-sub.enter{opacity:1;transform:translateY(0)}
/* CHOICES */
.choices{display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.choice{background:var(--bg2);color:var(--tx);font-family:var(--s);border:1.5px solid var(--brd);border-radius:14px;padding:18px 22px;cursor:pointer;font-size:16px;font-weight:500;text-align:left;display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .2s var(--e),transform .2s var(--e),border-color .2s,box-shadow .2s,background .2s;-webkit-tap-highlight-color:transparent}
.choice.enter{opacity:1;transform:translateY(0) scale(1)}
.choice.enter:hover{border-color:rgba(46,215,255,.3);box-shadow:0 4px 20px var(--cyd);transform:translateY(-2px) scale(1.01)}
.choice.selected{border-color:var(--cy);background:var(--cyd);box-shadow:0 6px 28px var(--cyd);transform:scale(1.02)!important;opacity:1}
.choice.dismissed{opacity:.2;transform:scale(.97)!important;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.choice-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--brd);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .3s}
.choice.selected .choice-check{border-color:var(--cy);background:var(--cy);transform:scale(1.1)}
.choice.selected .choice-check::after{content:'';width:8px;height:8px;border-radius:50%;background:white}
.choice-multi .choice-check{border-radius:6px}
.choice-multi.selected .choice-check::after{content:'';width:12px;height:12px;border-radius:3px;background:white;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5 2 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5 2 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.choice-cta{background:linear-gradient(135deg,var(--cy),var(--cy2))!important;border-color:transparent!important;color:var(--on-cyan)!important;font-weight:700!important;justify-content:center!important;font-size:16px!important;padding:18px 32px!important}
.choice-cta:hover{box-shadow:0 0 50px rgba(46,215,255,.35)!important;transform:translateY(-1px) scale(1.03)!important}
.choice-note{font-size:13px;color:var(--gd);text-align:center;margin-top:14px;line-height:1.5;font-weight:500}
.choice-content{display:flex;flex-direction:column;text-align:left;min-width:0}
.choice-label{font-weight:600}
.choice-desc{font-size:13px;color:var(--gd);font-weight:400;line-height:1.4;margin-top:2px}
/* AGE STEPPER */
.age-stepper{display:flex;align-items:center;justify-content:center;gap:28px;margin:40px 0 44px}
.age-btn{width:56px;height:56px;border-radius:50%;border:2px solid var(--brd);background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s var(--e);color:var(--g);font-size:24px;font-weight:300;user-select:none}
.age-btn:hover{border-color:var(--cy);color:var(--cy);box-shadow:0 4px 16px var(--cyd)}
.age-btn:active{transform:scale(.92)}
.age-val{font-size:64px;font-weight:800;letter-spacing:-.04em;min-width:100px;text-align:center;line-height:1;background:linear-gradient(135deg,var(--tx),var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:transform .15s var(--e)}
.age-val.bump{transform:scale(1.08)}
.age-unit{font-size:14px;font-family:var(--m);color:var(--gd);text-align:center;letter-spacing:.08em;text-transform:uppercase;margin-top:-8px;margin-bottom:36px}
/* WEIGHT / HEIGHT INPUT */
.measure-wrap{margin:32px 0 40px;text-align:center}
.measure-toggle{display:inline-flex;border-radius:100px;border:1.5px solid var(--brd);overflow:hidden;margin-bottom:28px}
.measure-tog-btn{padding:10px 24px;font-size:14px;font-weight:600;background:transparent;border:none;color:var(--g);cursor:pointer;transition:all .25s var(--e);font-family:var(--s)}
.measure-tog-btn.active{background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan)}
.measure-input-row{display:flex;align-items:baseline;justify-content:center;gap:12px}
.measure-field{width:120px;padding:16px 0;border:none;border-bottom:2px solid var(--brd);font-size:48px;font-weight:700;text-align:center;font-family:var(--s);outline:none;background:transparent;transition:border-color .3s;color:var(--tx)}
.measure-field:focus{border-color:var(--cy)}
.measure-field-sm{width:80px;font-size:36px}
.measure-unit-label{font-size:16px;font-weight:500;color:var(--gd)}
.measure-sep{font-size:36px;font-weight:300;color:var(--brd)}
/* NUMERIC INPUT */
.num-input{width:100%;padding:18px 22px;border:1.5px solid var(--brd);border-radius:14px;font-size:18px;font-family:var(--s);font-weight:500;outline:none;transition:border-color .3s;background:var(--bg);margin-bottom:36px}
.num-input:focus{border-color:var(--cy);box-shadow:0 0 0 3px var(--cyd)}
.num-hint{font-size:13px;color:var(--gd);margin-top:-28px;margin-bottom:36px;font-family:var(--m)}
/* LEAD CAPTURE */
.lc{text-align:center;max-width:440px;margin:0 auto}
/* Locked result preview */
.lc-preview{position:relative;margin:0 auto 28px;width:140px;height:140px}
.lc-preview-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(46,215,255,.2)}
.lc-preview-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(46,215,255,.08) 0%,transparent 65%)}
.lc-preview-num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:48px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:blur(8px)}
.lc-preview-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;color:var(--cy);opacity:.7}
.lc-preview-label{font-size:11px;font-family:var(--m);color:var(--gd);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;text-align:center}
/* Animated elements */
.lc-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.lc-el.enter{opacity:1;transform:translateY(0)}
/* Badge */
.lc-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(46,215,255,.08);border:1px solid rgba(46,215,255,.15);border-radius:100px;padding:6px 16px;font-size:12px;font-family:var(--m);color:var(--cy);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.lc-badge svg{width:14px;height:14px}
/* Value strip */
.lc-values{display:flex;justify-content:center;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.lc-val-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--g);font-weight:500}
.lc-val-item svg{width:16px;height:16px;color:var(--cy);flex-shrink:0}
/* Form */
.lc-form{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;text-align:left}
.lc-input{padding:16px 20px;border:1.5px solid var(--brd);border-radius:12px;font-size:16px;font-family:var(--s);outline:none;transition:border-color .3s,box-shadow .3s;background:var(--bg);width:100%}
.lc-input:focus{border-color:var(--cy);box-shadow:0 0 0 3px var(--cyd)}
.lc-input::placeholder{color:var(--gd)}
/* CTA */
.lc .btn-next{width:100%;padding:18px;font-size:17px}
/* Trust line */
.lc-trust{display:flex;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.lc-trust span{font-size:11px;color:var(--gd);display:flex;align-items:center;gap:4px;font-family:var(--m)}
.lc-trust svg{width:12px;height:12px;color:var(--cy)}
/* Legacy compat */
.lead-form{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
.lead-field{display:flex;flex-direction:column;gap:6px}
.lead-label{font-size:13px;font-weight:600;color:var(--g);text-transform:uppercase;letter-spacing:.06em}
.lead-input{padding:16px 20px;border:1.5px solid var(--brd);border-radius:12px;font-size:16px;font-family:var(--s);outline:none;transition:border-color .3s}
.lead-input:focus{border-color:var(--cy);box-shadow:0 0 0 3px var(--cyd)}
/* INTERSTITIAL / INTRO VIDEO */
.intro-video{width:100%;aspect-ratio:16/9;border-radius:16px;background:var(--bg2);border:1px solid var(--brd);margin-bottom:32px;overflow:hidden}
.intro-video iframe,.intro-video video{width:100%;height:100%;border:0}
/* INTRO HERO */
.intro-hero{text-align:center;padding:20px 0 0}
.intro-hero .page-title{font-size:clamp(32px,6vw,48px);margin-bottom:16px;line-height:1.1}
.intro-hero .page-subtitle{max-width:440px;margin:0 auto 48px;font-size:18px;line-height:1.6}
/* INTRO ANIMATION STAGE */
.intro-stage{position:relative;width:100%;max-width:480px;height:320px;margin:0 auto 48px;overflow:visible}
/* PERSON FIGURE */
.intro-figure{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .8s,transform .8s var(--e)}
.intro-figure.on{opacity:1}
.intro-figure svg{display:block}
.figure-glow{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(46,215,255,.12) 0%,transparent 70%);filter:blur(20px);opacity:0;transition:opacity 1s}
.intro-figure.on .figure-glow{opacity:1}
/* FLOATING QUESTION CARDS */
.intro-questions{position:absolute;inset:0;pointer-events:none}
.q-card{position:absolute;background:var(--bg2);border:1px solid var(--brd);border-radius:10px;padding:8px 14px;font-size:12px;font-weight:500;color:var(--g);box-shadow:0 2px 12px rgba(0,0,0,.45);opacity:0;transform:scale(.7);transition:opacity .5s var(--e),transform .5s var(--e);white-space:nowrap;display:flex;align-items:center;gap:6px}
.q-card .q-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.q-card.on{opacity:1;transform:scale(1)}
.q-card.converge{transition:all .8s var(--e)}
/* ANALYSIS RING */
.intro-analysis{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .6s}
.intro-analysis.on{opacity:1}
.analysis-ring{width:160px;height:160px;border-radius:50%;border:2px solid transparent;position:relative}
.analysis-ring::before{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--cy);animation:ringSpin 1.2s linear infinite}
.analysis-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;border:1.5px solid transparent;border-bottom-color:var(--cy2);animation:ringSpinR 1.6s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes ringSpinR{to{transform:rotate(-360deg)}}
.analysis-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--m);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cy);white-space:nowrap}
/* AGE REVEAL */
.intro-reveal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .8s,transform .8s var(--e)}
.intro-reveal.on{opacity:1}
.reveal-age{font-size:72px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.reveal-unit{font-size:14px;font-family:var(--m);color:var(--gd);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.reveal-compare{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:16px}
.reveal-col{text-align:center}
.reveal-col-val{font-size:28px;font-weight:700;letter-spacing:-.02em}
.reveal-col-lbl{font-size:11px;font-family:var(--m);color:var(--gd);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.reveal-col-val.chrono{color:var(--g)}
.reveal-col-val.bio{color:var(--cy)}
.reveal-arrow{color:var(--brd);font-size:20px}
.reveal-ring{position:absolute;left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--cy);opacity:.15}
/* INTRO TRUST ROW */
.intro-trust{display:flex;justify-content:center;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.intro-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gd);font-weight:500}
.intro-trust-item svg{width:16px;height:16px;color:var(--cy);flex-shrink:0}
/* INTRO CTA */
.intro-cta-wrap{text-align:center;position:relative;z-index:10}
/* TIMELINE DOTS */
.intro-steps{display:flex;justify-content:center;gap:8px;margin-bottom:32px}
.intro-step-dot{width:8px;height:8px;border-radius:50%;background:var(--brd);transition:background .5s,transform .5s var(--e)}
.intro-step-dot.active{background:var(--cy);transform:scale(1.3)}
.intro-step-dot.done{background:var(--cy2)}
/* ANALYSIS SCREEN */
.analysis-screen{text-align:center;padding:20px 0 0;max-width:480px;margin:0 auto}
.analysis-screen .page-title{font-size:clamp(24px,5vw,30px);opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.analysis-screen .page-title.enter{opacity:1;transform:translateY(0)}
.analysis-screen .page-subtitle{opacity:0;transform:translateY(12px);transition:opacity .5s var(--e),transform .5s var(--e);max-width:360px;margin:0 auto 40px}
.analysis-screen .page-subtitle.enter{opacity:1;transform:translateY(0)}
/* Analysis orb */
.analysis-orb-wrap{position:relative;width:220px;height:220px;margin:0 auto 40px}
.analysis-orb{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .8s}
.analysis-orb.on{opacity:1}
.analysis-orb-bg{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(46,215,255,.06) 0%,transparent 70%)}
.analysis-orb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(46,215,255,.15)}
.analysis-orb-ring-spin{position:absolute;inset:-4px;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--cy);animation:ringSpin 2s linear infinite}
.analysis-orb-ring-spin2{position:absolute;inset:8px;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--cy2);animation:ringSpinR 2.8s linear infinite}
.analysis-orb-ring-spin3{position:absolute;inset:20px;border-radius:50%;border:1.5px solid transparent;border-left-color:rgba(46,215,255,.3);animation:ringSpin 3.5s linear infinite}
/* Scan line */
.analysis-scan{position:absolute;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--cy),transparent);opacity:0;border-radius:1px;filter:blur(0.5px)}
.analysis-orb.scanning .analysis-scan{animation:scanDown 2.5s var(--e) infinite;opacity:1}
@keyframes scanDown{0%{top:15%;opacity:0}10%{opacity:.7}90%{opacity:.7}100%{top:85%;opacity:0}}
/* Body silhouette inside orb */
.analysis-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 1s}
.analysis-orb.on .analysis-body{opacity:.5}
.analysis-orb.scanning .analysis-body{opacity:.7}
.analysis-body svg{width:60px;height:100px}
/* Floating data particles */
.analysis-particles{position:absolute;inset:-30px;pointer-events:none}
.a-particle{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0}
.analysis-orb.particles .a-particle{animation:particleIn 1.8s var(--e) forwards}
@keyframes particleIn{0%{opacity:0;transform:scale(0)}20%{opacity:.8;transform:scale(1)}80%{opacity:.6}100%{opacity:0;transform:scale(0) translate(0,0)}}
/* Result teaser */
.analysis-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .8s var(--e),transform .8s var(--e);text-align:center}
.analysis-result.on{opacity:1}
.analysis-result-num{font-size:56px;font-weight:800;letter-spacing:-.04em;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:blur(8px);transition:filter .6s}
.analysis-result-label{font-size:12px;font-family:var(--m);color:var(--gd);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.analysis-result-lock{margin-top:8px;display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--gd);font-family:var(--m)}
.analysis-result-lock svg{width:12px;height:12px}
/* Phase labels */
.analysis-phase{font-size:13px;font-family:var(--m);color:var(--cy);letter-spacing:.1em;text-transform:uppercase;height:20px;margin-bottom:32px;opacity:0;transition:opacity .4s}
.analysis-phase.on{opacity:1}
/* Ready state */
.analysis-ready{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.analysis-ready.on{opacity:1;transform:translateY(0)}
.analysis-ready-text{font-size:20px;font-weight:700;margin-bottom:4px}
.analysis-ready-sub{font-size:15px;color:var(--gd);margin-bottom:28px}
/* CTA area */
.analysis-cta{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.analysis-cta.on{opacity:1;transform:translateY(0)}
.analysis-cta .btn-next{padding:20px 48px;font-size:17px}
.analysis-reassure{font-size:12px;color:var(--gd);margin-top:14px;font-family:var(--m)}
/* Checkmark burst */
.analysis-check{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s}
.analysis-check.on{opacity:1}
.analysis-check svg{width:48px;height:48px;color:var(--cy2)}
@media(max-width:768px){
.analysis-orb-wrap{width:180px;height:180px}
.analysis-result-num{font-size:44px}
.analysis-body svg{width:48px;height:80px}
}
/* CHECKOUT — Plan Selection */
.ck{max-width:860px;margin:0 auto}
.ck-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.ck-el.enter{opacity:1;transform:translateY(0)}
.ck-social{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px}
.ck-social .ck-avatars{display:flex}
.ck-social .ck-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 9px var(--s);color:#fff;border:2px solid var(--bg)}
.ck-social .ck-av+.ck-av{margin-left:-6px}
.ck-social .ck-social-text{font-size:13px;color:var(--gd)}
.ck-social .ck-social-text strong{color:var(--g)}
.ck-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.ck-single{max-width:520px;margin:0 auto}
.ck-single .ck-inc{margin-bottom:14px}
.ck-plan-static{cursor:default;border:1px solid var(--brd);background:var(--bg2)}
.ck-plan-static:hover{transform:none;box-shadow:none;background:var(--bg2)}
.ck-plan{background:var(--bg2);border:none;border-radius:16px;padding:18px 20px;margin-bottom:10px;cursor:pointer;transition:all .3s var(--e);display:flex;align-items:flex-start;gap:12px;text-align:left;position:relative}
.ck-plan:hover{background:var(--bg3);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.45)}
.ck-plan.sel{border-color:var(--cy);background:var(--bg3);box-shadow:0 0 0 2px var(--cy),0 4px 12px rgba(46,215,255,.18)}
.ck-plan-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--brd);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .25s}
.ck-plan.sel .ck-plan-radio{border-color:var(--cy);background:var(--cy)}
.ck-plan.sel .ck-plan-radio::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.ck-plan-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.ck-plan-price{font-size:17px;font-weight:800;white-space:nowrap}
.ck-plan-price span{font-size:12px;font-weight:400;color:var(--gd)}
.ck-plan-desc{font-size:13px;color:var(--g);line-height:1.45;margin-top:3px}
.ck-plan-badge{position:absolute;top:-9px;right:16px;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);font:700 8px var(--m);letter-spacing:.14em;text-transform:uppercase;padding:4px 14px;border-radius:100px;box-shadow:0 2px 8px rgba(46,215,255,.25)}
.ck-plan-accent{font-weight:600}
.ck-proof{text-align:center;font-size:13px;color:var(--gd);margin:12px 0 4px}
.ck-proof strong{color:var(--tx);font-weight:600}
.ck-precision{margin:12px 0 0;padding:14px 16px;background:var(--bg2);border:1px solid var(--brd);border-radius:12px}
.ck-precision-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ck-precision-label{font-size:12px;color:var(--gd)}
.ck-precision-val{font:700 14px var(--s);background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ck-precision-bar{height:5px;background:var(--bg3,#F2F4F7);border-radius:3px;overflow:hidden}
.ck-precision-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cy),var(--cy2));transition:width .9s var(--e)}
.ck-inc{background:var(--bg2);border-radius:14px;padding:24px;transition:all .4s var(--e)}
.ck-inc-title{font-size:16px;font-weight:700;margin-bottom:2px;letter-spacing:-.02em}
.ck-inc-sub{font-size:12px;color:var(--gd);margin-bottom:12px}
.ck-inc-list{list-style:none;padding:0}
.ck-inc-list li{padding:3px 0;font-size:12px;color:var(--g);display:flex;align-items:center;gap:7px;line-height:1.4}
.ck-inc-list li .ck-ic{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:7px;font-weight:700;background:rgba(46,215,255,.05);color:var(--cy)}
.ck-inc-div{height:0;border:none;margin:3px 0;border-top:1px solid var(--brd)}
.ck-inc-value{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--bg3,#F2F4F7)}
.ck-inc-vlabel{font:500 11px var(--m);color:var(--gd);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.ck-inc-strike{font-size:16px;font-weight:700;color:var(--gd);text-decoration:line-through;text-decoration-color:var(--rd)}
.ck-inc-price{font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ck-inc-per{font-size:12px;color:var(--gd)}
.ck-inc-save{font:700 10px var(--m);letter-spacing:.1em;text-transform:uppercase;color:#0EA371;margin-top:4px}
.ck-cta-wrap{text-align:center;margin-top:20px}
.ck-trust{display:flex;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.ck-trust span{font-size:11px;color:var(--gd);display:flex;align-items:center;gap:4px;font-family:var(--m)}
.ck-trust svg{width:12px;height:12px;color:var(--cy)}
/* CHECKOUT — Payment Phase */
.ckp{max-width:860px;margin:0 auto}
.ckp-stats{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px;padding:16px 24px;background:var(--bg2);border-radius:12px;flex-wrap:wrap}
.ckp-stat{text-align:center}
.ckp-stat-num{font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ckp-stat-label{font-size:11px;color:var(--gd);margin-top:1px}
.ckp-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ckp-plan{background:var(--bg2);border-radius:14px;padding:22px}
.ckp-plan-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.ckp-plan-name{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ckp-plan-badge{font:700 8px var(--m);letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);padding:3px 12px;border-radius:100px}
.ckp-plan-tag{font-size:13px;color:var(--g);margin-bottom:14px}
.ckp-plan-price{display:flex;align-items:baseline;gap:5px;margin-bottom:2px}
.ckp-plan-amt{font-size:32px;font-weight:800;letter-spacing:-.03em}
.ckp-plan-per{font-size:13px;color:var(--gd)}
.ckp-plan-daily{font-size:12px;color:var(--gd);margin-bottom:14px}
.ckp-plan-list{list-style:none;padding:0;padding-top:12px}
.ckp-plan-list li{padding:3px 0;font-size:13px;color:var(--g);display:flex;align-items:center;gap:7px}
.ckp-plan-list li .ckp-ck{width:14px;height:14px;border-radius:50%;background:rgba(46,215,255,.06);color:var(--cy);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0}
.ckp-change{display:inline-block;font-size:12px;color:var(--cy);cursor:pointer;margin-top:10px;font-weight:500;transition:opacity .2s}
.ckp-change:hover{opacity:.7}
.ckp-form{background:var(--bg2);border-radius:16px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.4);border:1px solid var(--brd)}
.ckp-form h3{font-size:17px;font-weight:700;margin-bottom:18px;letter-spacing:-.01em}
.ckp-field{margin-bottom:12px}
.ckp-label{font-size:12px;font-weight:600;color:var(--g);margin-bottom:4px;display:block}
.ckp-input{width:100%;padding:12px 14px;border:1px solid var(--brd);border-radius:10px;font:400 14px var(--s);color:var(--tx);background:var(--bg);transition:border-color .2s,box-shadow .2s;outline:none}
.ckp-input:focus{border-color:var(--cy);box-shadow:0 0 0 4px rgba(46,215,255,.15)}
.ckp-input::placeholder{color:var(--gd)}
.ckp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ckp-divider{height:1px;background:var(--brd);margin:18px 0}
.ckp-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.ckp-total-label{font-size:14px;color:var(--g)}
.ckp-total-amt{font-size:20px;font-weight:800}
.ckp-savings{text-align:right;font-size:11px;color:#0EA371;font-weight:600;margin-bottom:14px}
.ckp-urgency{text-align:center;font-size:11px;color:var(--gd);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:4px}
.ckp-urgency .ckp-dot{width:5px;height:5px;border-radius:50%;background:#0EA371;animation:p 2s ease-in-out infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.2}}
.ckp-submit{display:block;width:100%;padding:15px;border-radius:14px;font:700 15px var(--s);cursor:pointer;border:none;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);transition:all .3s var(--e);text-align:center}
.ckp-submit:hover{box-shadow:0 4px 16px rgba(46,215,255,.18);transform:translateY(-1px)}
.ckp-submit:active{transform:scale(.98)}
.ckp-secure{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:var(--gd);margin-top:10px}
.ckp-secure svg{width:12px;height:12px}
.ckp-guarantee{text-align:center;font-size:12px;color:var(--gd);margin-top:8px}
@media(max-width:768px){
.ck-split{grid-template-columns:1fr}
.ckp-split{grid-template-columns:1fr}
}
/* BIO RESULT */
.br{text-align:center;max-width:480px;margin:0 auto;padding:10px 0 0}
.br-el{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.br-el.enter{opacity:1;transform:translateY(0)}
/* Hero gauge */
.br-gauge{position:relative;width:240px;height:240px;margin:0 auto 20px}
.br-gauge svg{width:100%;height:100%}
.br-gauge-track{fill:none;stroke:var(--brd);stroke-width:10;stroke-linecap:round}
.br-gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;stroke:url(#brGrad);stroke-dasharray:0 999;transition:stroke-dasharray 2s var(--e)}
.br-gauge-glow{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,rgba(46,215,255,.1) 0%,transparent 60%);opacity:0;transition:opacity 1s}
.br-gauge.revealed .br-gauge-glow{opacity:1}
/* Center content inside gauge */
.br-center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .8s var(--e)}
.br-center.on{opacity:1}
.br-age{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.br-age-label{font-size:12px;font-family:var(--m);color:var(--gd);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
/* Delta badge */
.br-delta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:100px;font-size:14px;font-weight:600;margin-bottom:24px}
.br-delta.older{background:rgba(224,90,79,.08);color:var(--rd);border:1px solid rgba(224,90,79,.15)}
.br-delta.younger{background:rgba(0,255,194,.08);color:#00c98d;border:1px solid rgba(0,255,194,.15)}
.br-delta svg{width:16px;height:16px}
/* Comparison */
.br-compare{display:flex;justify-content:center;gap:32px;margin-bottom:28px}
.br-compare-col{text-align:center}
.br-compare-val{font-size:24px;font-weight:700;letter-spacing:-.02em}
.br-compare-val.chrono{color:var(--g)}
.br-compare-val.bio{color:var(--cy)}
.br-compare-lbl{font-size:11px;font-family:var(--m);color:var(--gd);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.br-compare-arrow{color:var(--brd);font-size:20px;display:flex;align-items:center}
/* Insight */
.br-insight{background:var(--bg2);border:1px solid var(--brd);border-radius:14px;padding:18px 20px;margin-bottom:28px;text-align:left}
.br-insight p{font-size:14px;color:var(--g);line-height:1.6}
.br-insight p strong{color:var(--tx)}
/* Next section */
.br-next{margin-bottom:28px}
.br-next-head{font-size:18px;font-weight:700;margin-bottom:8px}
.br-next-sub{font-size:14px;color:var(--gd);line-height:1.5;margin-bottom:18px;max-width:380px;margin-left:auto;margin-right:auto}
.br-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.br-next-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--g);line-height:1.4;padding:10px 12px;border:1px solid var(--brd);border-radius:10px;background:var(--bg)}
.br-next-item svg{width:16px;height:16px;color:var(--cy);flex-shrink:0;margin-top:1px}
/* CTA */
.br .btn-next{width:100%;padding:20px;font-size:17px}
.br-cta-sub{font-size:12px;color:var(--gd);margin-top:10px;font-family:var(--m);max-width:340px;margin-left:auto;margin-right:auto}
@media(max-width:768px){
.br-gauge{width:200px;height:200px}
.br-age{font-size:52px}
.br-next-grid{grid-template-columns:1fr}
}
/* ACCOUNT SETUP */
.acct{text-align:center;max-width:480px;margin:0 auto;padding:40px 0}
.acct-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.acct-el.enter{opacity:1;transform:translateY(0)}
.acct-heading{font-size:clamp(28px,5vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--tx);margin-bottom:14px}
.acct-sub{font-size:16px;color:var(--g);line-height:1.6;margin-bottom:32px;max-width:400px;margin-left:auto;margin-right:auto}
.acct-btns{display:flex;flex-direction:column;gap:12px;max-width:380px;margin:0 auto}
.acct-auth-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 24px;border:1.5px solid var(--brd);border-radius:60px;background:var(--bg);font:600 15px var(--s);color:var(--tx);cursor:pointer;transition:all .25s var(--e);-webkit-tap-highlight-color:transparent}
.acct-auth-btn:hover{border-color:rgba(46,215,255,.35);box-shadow:0 2px 12px rgba(0,0,0,.4);transform:translateY(-1px);background:var(--bg2)}
.acct-auth-btn:active{transform:scale(.98)}
.acct-auth-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.acct-auth-btn svg{flex-shrink:0}
.acct-note{font-size:13px;color:var(--gd);margin-top:20px;line-height:1.5}
.acct-status{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500;text-align:center;margin-bottom:16px}
.acct-status.success{background:rgba(16,185,129,.08);color:#10B981;border:1px solid rgba(16,185,129,.15)}
.acct-status.error{background:rgba(239,68,68,.08);color:#EF4444;border:1px solid rgba(239,68,68,.15)}
/* PROTOCOL INSIGHTS */
.pi-wrap{text-align:center;max-width:520px;margin:0 auto}
.pi-heading{font-size:clamp(26px,5vw,36px);font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--tx);margin-bottom:10px}
.pi-sub{font-size:15px;color:var(--g);line-height:1.6;margin-bottom:28px}
.pi-cards{text-align:left;margin-bottom:24px}
.pi-card{position:relative;background:var(--bg);border:1px solid var(--brd);border-radius:14px;padding:20px 22px 18px;margin-bottom:14px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--e),transform .5s var(--e)}
.pi-card.enter{opacity:1;transform:translateY(0)}
.pi-card::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:2px;background:var(--brd)}
.pi-card-cat{font:600 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--rd);margin-bottom:6px}
.pi-card-title{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:4px;letter-spacing:-.01em}
.pi-card-desc{font-size:14px;color:var(--g);line-height:1.55}
.pi-accel{background:var(--bg);border:1.5px solid var(--brd);border-radius:16px;padding:22px 24px;text-align:left;margin-bottom:28px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--e),transform .5s var(--e)}
.pi-accel.enter{opacity:1;transform:translateY(0)}
.pi-accel-cat{font:600 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--rd);margin-bottom:8px}
.pi-accel-val{font-size:clamp(28px,6vw,36px);font-weight:800;color:var(--rd);letter-spacing:-.03em;margin-bottom:6px}
.pi-accel-desc{font-size:14px;color:var(--g);line-height:1.55}
.pi-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.pi-el.enter{opacity:1;transform:translateY(0)}
/* MULTI ROW CHOICE */
.mrc-wrap{max-width:540px;margin:0 auto;text-align:center}
.mrc-heading{font-size:clamp(24px,5vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--tx);margin-bottom:8px}
.mrc-accuracy{margin:0 auto 28px}
.mrc-accuracy-label{font:500 10px var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--gd);margin-bottom:6px}
.mrc-accuracy-label span{color:var(--cy)}
.mrc-accuracy-bar{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.mrc-accuracy-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cy),var(--cy2));transition:width 1s var(--e)}
.mrc-rows{text-align:left;margin-bottom:28px}
.mrc-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--brd)}
.mrc-row:last-child{border-bottom:none}
.mrc-row-label{font-size:15px;font-weight:600;color:var(--tx);flex-shrink:0;margin-right:16px}
.mrc-row-opts{display:flex;gap:6px;flex-wrap:wrap}
.mrc-pill{padding:8px 18px;border:1.5px solid var(--brd);border-radius:100px;font:500 13px var(--s);cursor:pointer;transition:all .25s var(--e);background:var(--bg);color:var(--g);-webkit-tap-highlight-color:transparent}
.mrc-pill:hover{border-color:rgba(46,215,255,.3);background:var(--bg2)}
.mrc-pill:active{transform:scale(.96)}
.mrc-pill.sel{background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);border-color:transparent;font-weight:600}
.mrc-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.mrc-el.enter{opacity:1;transform:translateY(0)}
@media(max-width:500px){.mrc-row{flex-direction:column;align-items:flex-start;gap:8px}.mrc-row-label{margin-right:0}}
/* BUILDING PROTOCOL INTERSTITIAL */
.bp-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;position:relative;z-index:2}
.bp-label{font:500 10px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--cy);margin-bottom:12px;opacity:0;transition:opacity .8s ease}
.bp-label.enter{opacity:1}
.bp-heading{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.12;color:var(--tx);opacity:0;transition:opacity .8s ease .2s}
.bp-heading.enter{opacity:1}
.bp-phase{font-size:15px;color:var(--gd);margin-top:12px;height:22px;opacity:0;transition:opacity .6s ease .4s}
.bp-phase.enter{opacity:1}
/* BUILDING PROTOCOL RESULT INTERSTITIAL */
.bpr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;position:relative;z-index:2}
.bpr-label{font:500 10px var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--cy);margin-bottom:12px;opacity:0;transition:opacity .8s ease}
.bpr-label.enter{opacity:1}
.bpr-heading{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.12;color:var(--tx);opacity:0;transition:opacity .8s ease .2s}
.bpr-heading.enter{opacity:1}
.bpr-domains{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;opacity:0;transition:opacity .6s ease .4s}
.bpr-domains.enter{opacity:1}
.bpr-domain{padding:8px 18px;border:1.5px solid var(--brd);border-radius:100px;font:500 12px var(--s);color:var(--g);transition:all .5s var(--e);background:var(--bg)}
.bpr-domain.lit{border-color:var(--cy);color:var(--cy);background:rgba(46,215,255,.08);box-shadow:0 0 16px rgba(46,215,255,.15)}
/* PROTOCOL RESULT */
.pr-wrap{max-width:600px;margin:0 auto;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:20px;padding:32px 28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pr-badge{display:inline-block;padding:5px 14px;border-radius:100px;font:600 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);border:1.5px solid rgba(46,215,255,.3);background:rgba(46,215,255,.06);margin-bottom:14px}
.pr-heading{font-size:clamp(24px,5vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--tx);margin-bottom:28px}
.pr-section{background:var(--bg);border:1px solid var(--brd);border-radius:14px;padding:20px 22px;margin-bottom:16px}
.pr-section h3{font:600 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);margin-bottom:14px}
.pr-mode-title{font-size:20px;font-weight:700;color:var(--tx);margin-bottom:6px}
.pr-mode-desc{font-size:14px;color:var(--g);line-height:1.55}
.pr-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pr-stat:last-child{border-bottom:none}
.pr-stat-label{font-size:14px;color:var(--g);font-weight:500}
.pr-stat-value{font-size:18px;font-weight:700;color:var(--tx);letter-spacing:-.02em}
.pr-bar-wrap{margin-bottom:14px}
.pr-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pr-bar-name{font-size:14px;font-weight:600;color:var(--tx)}
.pr-bar-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.pr-bar-status.low{color:var(--rd)}
.pr-bar-status.moderate{color:#f59e0b}
.pr-bar-status.good{color:#22c55e}
.pr-bar{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}
.pr-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cy),var(--cy2));transition:width 1.2s var(--e);width:0%}
.pr-layer{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.pr-layer:last-child{margin-bottom:0}
.pr-layer-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--cy),var(--cy2));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--bg);flex-shrink:0}
.pr-layer-content{flex:1}
.pr-layer-title{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:4px}
.pr-layer-desc{font-size:13px;color:var(--g);line-height:1.5}
.pr-timeline{position:relative;padding-left:24px;margin-bottom:18px}
.pr-timeline:last-child{margin-bottom:0}
.pr-timeline::before{content:'';position:absolute;left:5px;top:12px;bottom:-18px;width:2px;background:var(--brd)}
.pr-timeline:last-child::before{display:none}
.pr-timeline-dot{position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px rgba(46,215,255,.3)}
.pr-timeline-phase{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:2px}
.pr-timeline-weeks{font-size:11px;font-weight:600;color:var(--cy);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.pr-timeline-desc{font-size:13px;color:var(--g);line-height:1.5}
.pr-projection{text-align:center;padding:12px 0}
.pr-projection-value{font-size:clamp(28px,5vw,36px);font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.pr-projection-value.positive{color:#22c55e}
.pr-projection-value.negative{color:var(--rd)}
.pr-projection-label{font-size:12px;color:var(--g);font-weight:500}
.pr-coach{background:linear-gradient(135deg,rgba(46,215,255,.06),rgba(0,255,194,.06));border:1px solid rgba(46,215,255,.15);border-radius:14px;padding:20px 22px;margin-bottom:20px}
.pr-coach h3{font:600 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);margin-bottom:10px}
.pr-coach p{font-size:14px;color:var(--g);line-height:1.6}
.pr-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.pr-el.enter{opacity:1;transform:translateY(0)}
@media(max-width:500px){.pr-wrap{padding:24px 18px}.pr-section{padding:16px 18px}}
/* APP HANDOFF */
.ah{text-align:center;max-width:460px;margin:0 auto}
.ah-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.ah-el.enter{opacity:1;transform:translateY(0)}
/* Success badge */
.ah-success{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,var(--cy),var(--cy2));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 40px var(--cyg)}
.ah-success svg{width:36px;height:36px;color:white}
/* Store buttons */
.ah-stores{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.ah-store{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);padding:14px 28px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:all .3s var(--e);border:none;cursor:pointer}
.ah-store:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--cyg)}
.ah-store svg{width:22px;height:22px}
.ah-store-sub{font-size:10px;font-weight:400;opacity:.7;display:block;text-align:left;line-height:1}
.ah-store-main{display:block;text-align:left;line-height:1.2}
/* QR code area */
.ah-qr{margin:0 auto 24px;padding:20px;border:1px solid var(--brd);border-radius:16px;background:var(--bg);display:inline-block}
.ah-qr canvas{display:block}
.ah-qr-label{font-size:11px;font-family:var(--m);color:var(--gd);margin-top:10px;letter-spacing:.06em}
/* Magic link */
.ah-magic{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1.5px solid var(--brd);border-radius:100px;font-size:14px;font-weight:500;color:var(--g);cursor:pointer;transition:all .25s var(--e);background:var(--bg);margin-bottom:24px}
.ah-magic:hover{border-color:var(--cy);color:var(--cy)}
.ah-magic svg{width:16px;height:16px}
.ah-magic.sent{border-color:var(--cy2);color:#00c98d;pointer-events:none}
/* What's next grid */
.ah-next{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;text-align:left}
.ah-next-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--g);line-height:1.4;padding:12px 14px;border:1px solid var(--brd);border-radius:10px;background:var(--bg)}
.ah-next-item svg{width:16px;height:16px;color:var(--cy);flex-shrink:0;margin-top:1px}
/* Fallback */
.ah-fallback{font-size:12px;color:var(--gd);line-height:1.6;max-width:320px;margin:0 auto}
.ah-fallback strong{color:var(--g)}
@media(max-width:768px){
.ah-next{grid-template-columns:1fr}
.ah-stores{flex-direction:column;align-items:center}
}
/* OPEN / HANDOFF LANDING PAGE
Rendered when the score-quiz domain receives /open?token=… from a
handoff email. Mirrors the marketing-site /open layout but in the
quiz's dark palette. The "Open My Protocol" button fires the
rewind:// custom scheme to hand off to the mobile app.
See quiz.js → renderOpenLandingPage / wireOpenLandingPage. */
.op-page{text-align:center;max-width:420px;margin:0 auto;padding:20px 0}
.op-el{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.op-el.enter{opacity:1;transform:translateY(0)}
/* Headline + body copy */
.op-title{font-size:clamp(24px,5vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 12px;color:var(--tx)}
.op-sub{font-size:14px;color:var(--gd);line-height:1.6;margin:0 0 28px}
/* Store-button stack — disabled cards because TestFlight isn't public yet.
Visually de-emphasised (dim background, muted text) so they're clearly
not the primary action. The "Open My Protocol" CTA below is. */
.op-stores{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.op-store{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--bg2);color:var(--g);padding:14px 24px;border-radius:12px;border:1px solid var(--brd);text-decoration:none;font-size:15px;font-weight:700;cursor:not-allowed;opacity:.85}
.op-store svg{width:20px;height:20px;flex-shrink:0}
.op-store-soon{font-size:10px;font-weight:600;opacity:.55;margin-left:4px;letter-spacing:.04em}
/* Divider between "install" and "open" sections */
.op-divider{border:0;border-top:1px solid var(--brd);margin:0 0 24px}
/* Section label above the deep-link CTA */
.op-section-label{font-size:12px;color:var(--gd);margin:0 0 14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
/* Primary CTA — fires the rewind:// deep link.
Cyan-gradient on dark to match the rest of the quiz's primary actions. */
.op-cta{display:inline-block;padding:14px 40px;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);font-size:15px;font-weight:700;text-decoration:none;border-radius:100px;border:none;cursor:pointer;font-family:var(--s);transition:transform .2s var(--e),box-shadow .2s var(--e)}
.op-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--cyg)}
/* Footer — TTL + copyright */
.op-foot{font-size:11px;color:var(--gd);margin-top:32px;line-height:1.6}
/* Error variant for missing/invalid token. */
.op-error{font-size:14px;color:var(--gd);line-height:1.6;margin:0 0 24px}
/* Checkout payment section */
.ck-payment{border:1px solid var(--brd);border-radius:14px;padding:20px;margin-bottom:20px;background:var(--bg)}
.ck-payment-head{font-size:14px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ck-payment-head svg{width:16px;height:16px;color:var(--cy)}
.ck-payment-info{font-size:13px;color:var(--gd);line-height:1.5;margin-bottom:16px}
.ck-stripe-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--m);color:var(--gd);margin-top:10px;letter-spacing:.04em}
.ck-stripe-badge svg{width:14px;height:14px}
/* DISCLAIMER */
.disclaimer-box{background:var(--bg2);border:1px solid var(--brd);border-radius:14px;padding:24px;font-size:15px;color:var(--g);line-height:1.7;margin-bottom:36px}
/* BUTTONS */
.btn-row{display:flex;gap:12px;margin-top:8px}
.btn-next{flex:1;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);padding:18px 36px;border-radius:100px;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:all .35s var(--e);font-family:var(--s)}
.btn-next:hover:not(:disabled){box-shadow:0 0 50px rgba(46,215,255,.45);transform:translateY(-2px) scale(1.03)}
.btn-next:disabled{opacity:.4;cursor:not-allowed}
.btn-back{background:transparent;border:1.5px solid var(--brd);color:var(--g);padding:18px 28px;border-radius:100px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s var(--e);font-family:var(--s)}
.btn-back:hover{border-color:var(--tx);color:var(--tx)}
/* LOADING / ERROR */
.quiz-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:20px}
.spinner{width:40px;height:40px;border-radius:50%;border:3px solid var(--brd);border-top-color:var(--cy);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.quiz-error{text-align:center;padding:80px 24px}
.quiz-error h2{font-size:28px;font-weight:700;margin-bottom:12px}
.quiz-error p{color:var(--g);font-size:17px;margin-bottom:32px}
.quiz-error a{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);padding:14px 32px;border-radius:100px;font-size:16px;font-weight:600;text-decoration:none;transition:all .35s var(--e)}
.quiz-error a:hover{box-shadow:0 6px 32px var(--cyg);transform:translateY(-2px)}
/* TEASER RESULT */
.teaser{text-align:center;padding:10px 0 0;max-width:500px;margin:0 auto}
.teaser .page-title{font-size:clamp(22px,4.5vw,28px)}
/* Data cards floating */
.teaser-data{position:relative;width:100%;max-width:400px;height:60px;margin:0 auto 20px}
.t-data-card{position:absolute;background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:5px 12px;font-size:11px;font-weight:500;color:var(--g);box-shadow:0 1px 8px rgba(0,0,0,.4);opacity:0;transform:scale(.8);transition:opacity .4s var(--e),transform .4s var(--e);white-space:nowrap;display:flex;align-items:center;gap:5px}
.t-data-card .t-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.t-data-card.on{opacity:1;transform:scale(1)}
.t-data-card.converge{transition:all .8s var(--e);opacity:0!important}
/* Scanner gauge */
.teaser-gauge-wrap{position:relative;width:260px;height:260px;margin:0 auto 24px}
.teaser-gauge{position:relative;width:100%;height:100%}
.teaser-gauge svg{width:100%;height:100%}
.gauge-track{fill:none;stroke:var(--brd);stroke-width:8;stroke-linecap:round}
.gauge-arc{fill:none;stroke-width:10;stroke-linecap:round;stroke:url(#gaugeGrad);stroke-dasharray:0 999;transition:stroke-dasharray 1.5s var(--e)}
.gauge-tick{fill:none;stroke:var(--brd);stroke-width:1}
.gauge-label{font-family:var(--m);font-size:9px;fill:var(--gd);text-anchor:middle}
.gauge-glow{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,rgba(46,215,255,.06) 0%,transparent 65%);opacity:0;transition:opacity 1s}
.teaser-gauge-wrap.revealed .gauge-glow{opacity:1}
/* Center result inside gauge */
.teaser-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .8s var(--e)}
.teaser-center.on{opacity:1}
.teaser-range{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,var(--cy),var(--cy2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.teaser-range-label{font-size:11px;font-family:var(--m);color:var(--gd);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.teaser-chrono{font-size:12px;color:var(--gd);margin-top:8px}
.teaser-chrono span{color:var(--g);font-weight:600}
/* Body silhouette in gauge */
.teaser-body{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);opacity:0;transition:opacity .8s}
.teaser-body.on{opacity:.3}
.teaser-body.scanning{opacity:.5}
.teaser-body svg{width:50px;height:85px}
.teaser-scan-line{position:absolute;left:30%;right:30%;height:2px;background:linear-gradient(90deg,transparent,var(--cy),transparent);opacity:0;border-radius:1px}
.teaser-body.scanning .teaser-scan-line{animation:scanDown 2s var(--e) infinite;opacity:1}
/* Scan rings */
.teaser-ring-pulse{position:absolute;left:50%;top:48%;width:100px;height:100px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--cy);opacity:0}
.teaser-ring-pulse.on{animation:ringPulse 2s ease-out infinite}
@keyframes ringPulse{0%{opacity:.4;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
/* Phase label */
.teaser-phase{font-size:12px;font-family:var(--m);color:var(--cy);letter-spacing:.1em;text-transform:uppercase;height:18px;margin-bottom:24px;opacity:0;transition:opacity .4s}
.teaser-phase.on{opacity:1}
/* Messaging below gauge */
.teaser-insight{opacity:0;transform:translateY(12px);transition:opacity .5s var(--e),transform .5s var(--e);margin-bottom:24px}
.teaser-insight.on{opacity:1;transform:translateY(0)}
.teaser-insight-text{font-size:15px;color:var(--g);line-height:1.6;max-width:380px;margin:0 auto}
.teaser-insight-text strong{color:var(--tx);font-weight:600}
/* CTA */
.teaser-cta{opacity:0;transform:translateY(12px);transition:opacity .5s var(--e),transform .5s var(--e)}
.teaser-cta.on{opacity:1;transform:translateY(0)}
.teaser-cta .btn-next{padding:18px 40px;font-size:16px}
.teaser-cta-sub{font-size:12px;color:var(--gd);margin-top:10px;font-family:var(--m)}
/* App teaser */
.teaser-app{opacity:0;transform:translateY(10px);transition:opacity .5s var(--e),transform .5s var(--e);margin-top:28px;padding:16px 20px;border:1px solid var(--brd);border-radius:14px;background:var(--bg2)}
.teaser-app.on{opacity:1;transform:translateY(0)}
.teaser-app-text{font-size:13px;color:var(--gd);line-height:1.5}
.teaser-app-text strong{color:var(--g);font-weight:600}
.teaser-app-icons{display:flex;justify-content:center;gap:16px;margin-top:8px}
.teaser-app-icons span{font-size:11px;font-family:var(--m);color:var(--gd);display:flex;align-items:center;gap:4px}
.teaser-app-icons svg{width:14px;height:14px;color:var(--cy)}
@media(max-width:768px){
.teaser-gauge-wrap{width:220px;height:220px}
.teaser-range{font-size:34px}
.teaser-data{height:50px}
.t-data-card{font-size:10px;padding:4px 9px}
}
/* COMPLETION */
.complete-card{text-align:center;padding:40px 0}
.complete-icon{width:64px;height:64px;margin:0 auto 24px;border-radius:50%;background:linear-gradient(135deg,var(--cy),var(--cy2));display:flex;align-items:center;justify-content:center}
.complete-icon svg{width:32px;height:32px;color:white}
/* PROTOCOL PREVIEW */
.pp{padding:8px 0 0}
.pp-disclaimer{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:14px;background:var(--amd);border:1px solid rgba(217,142,0,.12);margin-bottom:32px}
.pp-disclaimer svg{width:18px;height:18px;flex-shrink:0;color:var(--am);margin-top:2px}
.pp-disclaimer p{font-size:13px;color:var(--g);line-height:1.55}
.pp-section-label{font-family:var(--m);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--gd);margin-bottom:14px}
.pp-focus{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.pp-focus-card{padding:16px 20px;border-radius:14px;border:1px solid var(--brd);background:var(--bg);transition:all .35s var(--e)}
.pp-focus-card:hover{border-color:rgba(46,215,255,.25);box-shadow:0 4px 20px rgba(46,215,255,.06)}
.pp-focus-label{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.pp-focus-label::before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--cy),var(--cy2));flex-shrink:0}
.pp-focus-desc{font-size:13px;color:var(--gd);line-height:1.5;padding-left:16px}
.pp-reports{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.pp-report{padding:10px 18px;border-radius:100px;background:var(--bg2);border:1px solid var(--brd);font-size:13px;font-weight:600;color:var(--tx);font-family:var(--s);transition:all .3s var(--e)}
.pp-report:hover{border-color:rgba(46,215,255,.3);background:var(--cyd)}
.pp-timeline{position:relative;padding-left:24px;margin-bottom:32px}
.pp-timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--cy),var(--cy2));border-radius:1px}
.pp-tl-item{position:relative;padding:10px 0 10px 0;display:flex;align-items:flex-start;gap:12px}
.pp-tl-item::before{content:'';position:absolute;left:-20px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2.5px solid var(--cy);z-index:1}
.pp-tl-day{font-family:var(--m);font-size:12px;font-weight:500;color:var(--cy);white-space:nowrap;min-width:52px;letter-spacing:.02em}
.pp-tl-label{font-size:14px;color:var(--tx);font-weight:500;line-height:1.4}
.pp-coach{padding:20px 22px;border-radius:16px;background:linear-gradient(135deg,rgba(46,215,255,.06),rgba(0,255,194,.04));border:1px solid rgba(46,215,255,.15);margin-bottom:32px}
.pp-coach-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pp-coach-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--cy),var(--cy2));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pp-coach-icon svg{width:20px;height:20px;color:white}
.pp-coach-title{font-size:15px;font-weight:700;color:var(--tx)}
.pp-coach-body{font-size:14px;color:var(--g);line-height:1.6}
.pp .btn-next{width:100%;padding:20px;font-size:17px;margin-top:8px}
/* RESPONSIVE */
@media(max-width:768px){
.q-header{padding:6px 16px}
.progress-wrap{padding:0 20px}
.quiz-wrap{padding:24px 20px 60px}
.quiz-wrap.intro-mode{padding-top:20px}
.btn-row{flex-direction:column-reverse}
.btn-back{width:100%}
.intro-stage{height:260px;max-width:340px}
.reveal-age{font-size:56px}
.reveal-col-val{font-size:22px}
.intro-trust{gap:20px}
.intro-trust-item{font-size:12px}
.q-card{font-size:11px;padding:6px 10px}
}
/* ================================================================
WAITLIST LANDING PAGE
----------------------------------------------------------------
Rendered when the user lands on the bare /score subdomain root
with no flow slug. Mirrors the mobile welcome screen design:
full-bleed hero video → dark gradient overlay → centered content
with brand logo (header.q-header), eyebrow, headline, and form.
Class prefix `wl-` — kept distinct from `lc-` (lead-capture mid-
quiz) and `pp-` (protocol preview). Body class `.wl-active` gates
the hero video stack so this stack doesn't paint on quiz pages.
================================================================ */
#wl-hero-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg)}
.wl-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Vertical gradient: lighter in the middle so the video reads, darker top
(under header) and bottom (behind the form) for legibility. Matches the
gradient used in mobile/src/app/(public)/welcome.tsx. */
.wl-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,16,.62) 0%,rgba(3,8,16,.42) 32%,rgba(3,8,16,.72) 70%,rgba(3,8,16,.96) 100%)}
/* Soft cyan vignette to lean into the brand palette without losing the
underlying footage. Kept low-opacity so it doesn't muddy the video. */
.wl-hero-overlay::after{content:'';position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 35%,rgba(46,215,255,.06),transparent 60%);pointer-events:none}
/* Hide the canvas-based animated bg and the bottom gradient mask on the
waitlist page — they were designed for the quiz pages and would compete
with the hero video. */
body.wl-active #bg-anim-canvas{display:none!important}
/* Wrap layout — wider and top-aligned so the hero copy sits below the
logo and the form can breathe. */
.quiz-wrap.wl-wrap{max-width:520px;padding:24px 24px 80px;justify-content:flex-start;min-height:calc(100vh - 80px)}
.wl{position:relative;text-align:center;color:var(--tx);padding-top:8px}
.wl-el{opacity:0;transform:translateY(14px);transition:opacity .55s var(--e),transform .55s var(--e)}
.wl-el.enter{opacity:1;transform:translateY(0)}
.wl-eyebrow-row{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;padding:6px 14px;border-radius:100px;background:rgba(46,215,255,.06);border:1px solid rgba(46,215,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wl-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy)}
.wl-eyebrow{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:500}
.wl-headline{font-size:clamp(34px,7vw,52px);line-height:1.05;letter-spacing:-.025em;font-weight:700;margin:0 0 18px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.wl-headline em{font-family:var(--f);font-style:italic;font-weight:400;color:var(--cy)}
.wl-sub{font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 auto 32px;max-width:420px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
/* FORM CARD — semi-transparent dark glass over the video bg. */
.wl-form{display:flex;flex-direction:column;gap:14px;text-align:left;padding:22px;border-radius:20px;background:rgba(7,14,28,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 30px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(46,215,255,.04) inset}
.wl-field{display:flex;flex-direction:column;gap:6px}
.wl-label{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gd);font-weight:500;padding-left:2px}
.wl-input{width:100%;padding:14px 18px;border:1.5px solid var(--brd);border-radius:12px;font-size:16px;font-family:var(--s);font-weight:500;outline:none;transition:border-color .25s,box-shadow .25s,background .25s;background:rgba(3,8,16,.55);color:var(--tx)}
.wl-input::placeholder{color:var(--gd)}
.wl-input:focus,.wl-input:focus-visible{border-color:var(--cy);box-shadow:0 0 0 3px var(--cyd);background:rgba(3,8,16,.75)}
/* COUNTRY DROPDOWN */
/* z-index lifts the entire .wl-country atom above the form's submit CTA.
Without it, .wl-cta (position:relative, z:auto, later in DOM order)
paints on top of the absolutely-positioned panel: only the top ~70px
of options remained clickable, everything below sat behind the CTA
so hover never fired and clicks routed to the submit button. */
.wl-country{position:relative;z-index:5}
.wl-country-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left;font-weight:500;color:var(--tx)}
.wl-country-value{flex:1;color:var(--gd);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-country-value-selected{color:var(--tx)}
.wl-country-caret{width:12px;height:8px;color:var(--gd);flex-shrink:0;transition:transform .25s var(--e)}
.wl-country-trigger[aria-expanded="true"] .wl-country-caret{transform:rotate(180deg);color:var(--cy)}
.wl-country-trigger[aria-expanded="true"]{border-color:var(--cy);box-shadow:0 0 0 3px var(--cyd)}
/* Panel is body-portaled (moved out of .wl-form on open) — JS sets
position:fixed and computes top/left/width from the trigger. We
declare position:fixed up front too so the styles aren't dependent
on the inline JS reading. z-index lives at the page level (9999)
to dominate everything else: form, header logo, hero overlay. */
.wl-country-panel{position:fixed;background:rgba(7,14,28,.96);border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.75);z-index:9999;overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-height:320px;display:flex;flex-direction:column}
.wl-country-panel[hidden]{display:none}
.wl-country-search-wrap{position:relative;border-bottom:1px solid rgba(255,255,255,.06);padding:8px 12px}
.wl-country-search-icon{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--gd);pointer-events:none}
.wl-country-search{width:100%;padding:10px 12px 10px 30px;border:1px solid var(--brd);border-radius:10px;font-size:14px;background:rgba(3,8,16,.65);color:var(--tx);font-family:var(--s);outline:none;transition:border-color .2s}
.wl-country-search:focus{border-color:var(--cy)}
.wl-country-search::placeholder{color:var(--gd)}
.wl-country-list{overflow-y:auto;max-height:240px;padding:6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.wl-country-list::-webkit-scrollbar{width:8px}
.wl-country-list::-webkit-scrollbar-track{background:transparent}
.wl-country-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
.wl-country-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
.wl-country-section{font-family:var(--m);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gd);padding:10px 14px 6px}
.wl-country-opt{display:block;width:100%;text-align:left;padding:11px 14px;background:transparent;border:none;border-radius:8px;font-size:15px;color:var(--tx);font-family:var(--s);font-weight:500;cursor:pointer;transition:background .15s;line-height:1.3}
.wl-country-opt:hover{background:rgba(46,215,255,.10)}
.wl-country-empty{padding:20px;text-align:center;color:var(--gd);font-size:14px}
/* CTA */
.wl-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;margin-top:6px;background:linear-gradient(135deg,var(--cy),var(--cy2));color:var(--on-cyan);font-size:16px;font-weight:700;border:none;border-radius:100px;cursor:pointer;font-family:var(--s);transition:transform .2s var(--e),box-shadow .35s var(--e),opacity .2s;letter-spacing:.01em}
.wl-cta:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 12px 40px rgba(46,215,255,.3)}
.wl-cta:active{transform:translateY(0) scale(.99)}
.wl-cta:disabled{cursor:wait;opacity:.85}
.wl-cta-spinner{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(3,8,16,.25);border-top-color:var(--on-cyan);animation:wl-spin .7s linear infinite}
.wl-cta-loading .wl-cta-label{opacity:.55}
.wl-cta-loading .wl-cta-spinner{display:inline-block}
@keyframes wl-spin{to{transform:rotate(360deg)}}
.wl-error{padding:11px 14px;border-radius:10px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#FCA5A5;font-size:13px;line-height:1.4}
.wl-finepri{font-size:11px;color:var(--gd);text-align:center;margin:8px 0 0;line-height:1.5;font-family:var(--m)}
/* SUCCESS */
.wl-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 22px;border-radius:20px;background:rgba(7,14,28,.72);border:1px solid rgba(46,215,255,.18);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);opacity:0;transform:translateY(8px);transition:opacity .5s var(--e),transform .5s var(--e)}
.wl-success.enter{opacity:1;transform:translateY(0)}
.wl-success-ring{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(46,215,255,.18),rgba(46,215,255,.04));border:1px solid rgba(46,215,255,.4);color:var(--cy);margin-bottom:18px;box-shadow:0 0 32px rgba(46,215,255,.18)}
.wl-success-ring svg{width:38px;height:38px}
.wl-success-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--tx)}
.wl-success-sub{font-size:15px;color:rgba(255,255,255,.78);line-height:1.5;margin:0;max-width:340px}
.wl-success-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;padding:12px 22px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--tx);text-decoration:none;background:rgba(46,215,255,.08);border:1px solid rgba(46,215,255,.32);transition:background .2s var(--e),border-color .2s var(--e),transform .15s var(--e)}
.wl-success-cta:hover{background:rgba(46,215,255,.16);border-color:rgba(46,215,255,.55)}
.wl-success-cta:active{transform:translateY(1px)}
/* Make the HTML `hidden` attribute actually hide these flex containers.
The UA `[hidden]{display:none}` rule loses to class selectors that
set explicit `display: flex / block`, so JS toggling `el.hidden = true`
was a no-op before this. Class+attribute selector beats the bare
class rule on specificity. Same fix for the form, success card, and
error block so every show/hide stays consistent. */
.wl-form[hidden],
.wl-success[hidden],
.wl-error[hidden]{display:none}
/* Lift the header logo on the waitlist page so it floats over the video
without a background stripe — the existing dark canvas behind the logo
isn't appropriate when the video is showing. */
body.wl-active .q-header{padding-top:18px;background:transparent}
@media(max-width:520px){
.quiz-wrap.wl-wrap{padding:16px 18px 60px}
.wl-headline{font-size:36px}
.wl-form{padding:18px;border-radius:18px}
.wl-success{padding:26px 18px}
}
/* ── Post-signup share card ─────────────────────────────────────
Replaces the .wl-form / .wl-success card after a successful
POST /api/v1/waitlist/signup. Reuses the same glass + cyan
colour stack as .wl-success so it sits naturally in the
waitlist landing surface. Variables: --cy, --tx, --gd, --on-cyan.
Added 2026-05-18 for the viral-loop build. See
brain/05-tasks/viral-loop-build-2026-05-18.md. */
.wl-share-card{
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:32px 22px;border-radius:20px;
background:rgba(7,14,28,.72);
border:1px solid rgba(46,215,255,.18);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
opacity:0;transform:translateY(8px);
transition:opacity .5s var(--e),transform .5s var(--e);
gap:14px;
}
.wl-share-card.enter{opacity:1;transform:translateY(0)}
.wl-share-headline{
font-size:32px;font-weight:700;letter-spacing:-.02em;
margin:0;color:var(--tx);
}
.wl-share-pill{
display:inline-flex;align-items:center;justify-content:center;
padding:8px 16px;border-radius:999px;
background:rgba(46,215,255,.1);
border:1px solid rgba(46,215,255,.35);
color:var(--cy);
font-family:var(--m);font-size:13px;font-weight:600;
letter-spacing:.04em;
}
.wl-share-body{
font-size:15px;color:rgba(255,255,255,.78);line-height:1.5;
margin:0;max-width:340px;
}
.wl-share-link{width:100%;max-width:380px}
.wl-share-link-input{
width:100%;padding:12px 14px;border-radius:12px;
border:1px solid rgba(255,255,255,.12);
background:rgba(3,8,16,.55);
color:var(--tx);font-family:var(--m);font-size:13px;
text-align:center;outline:none;
}
.wl-share-link-input:focus{border-color:rgba(46,215,255,.45)}
.wl-share-actions{
display:flex;flex-direction:column;gap:10px;
width:100%;max-width:380px;
}
.wl-share-copy{margin-top:0}
.wl-share-native{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 22px;border-radius:999px;
background:rgba(46,215,255,.08);
border:1px solid rgba(46,215,255,.32);
color:var(--tx);font-family:var(--s);font-size:14px;font-weight:600;
letter-spacing:.01em;cursor:pointer;
transition:background .2s var(--e),border-color .2s var(--e),transform .15s var(--e);
}
.wl-share-native:hover{background:rgba(46,215,255,.16);border-color:rgba(46,215,255,.55)}
.wl-share-native:active{transform:translateY(1px)}
.wl-share-skip{
font-size:13px;color:rgba(255,255,255,.72);line-height:1.5;
margin:6px 0 0;max-width:380px;font-family:var(--m);
}
.wl-share-code{
font-size:12px;color:var(--gd);margin:8px 0 0;font-family:var(--m);
letter-spacing:.04em;
}
.wl-share-code strong{color:var(--tx);font-weight:600}
@media(max-width:520px){
.wl-share-card{padding:26px 18px}
.wl-share-headline{font-size:28px}
}
/* ── Existing-user "Sign in instead" banner ───────────────────
Rendered above the active quiz card when the API surfaces
systemResult.existingUser=true at lead_capture / account_setup
(returning customer / reinstall / retake). Tap "Sign in instead"
fires POST /api/v1/auth/restore-login → emailed handoff link. */
.existing-user-banner{
margin:12px auto 14px;
max-width:560px;
padding:12px 14px;
border-radius:14px;
background:rgba(46,215,255,.08);
border:1px solid rgba(46,215,255,.32);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
font-family:var(--s);
color:var(--tx);
}
.existing-user-banner .eub-inner{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.existing-user-banner .eub-msg{
flex:1 1 220px;
font-size:13.5px;
line-height:1.45;
color:rgba(255,255,255,.86);
}
.existing-user-banner .eub-msg strong{color:var(--tx);font-weight:600}
.existing-user-banner .eub-btn{
flex:0 0 auto;
padding:9px 16px;
border:1px solid rgba(46,215,255,.55);
border-radius:999px;
background:rgba(46,215,255,.12);
color:var(--tx);
font-family:var(--s);
font-size:13px;
font-weight:600;
letter-spacing:.01em;
cursor:pointer;
transition:background .2s var(--e),border-color .2s var(--e),transform .15s var(--e);
}
.existing-user-banner .eub-btn:hover{background:rgba(46,215,255,.22);border-color:rgba(46,215,255,.75)}
.existing-user-banner .eub-btn:active{transform:translateY(1px)}
.existing-user-banner .eub-btn:disabled{opacity:.65;cursor:wait}
.existing-user-banner .eub-dismiss{
flex:0 0 auto;
width:28px;
height:28px;
border-radius:50%;
border:none;
background:transparent;
color:rgba(255,255,255,.55);
font-size:18px;
line-height:1;
cursor:pointer;
transition:color .2s,background .2s;
}
.existing-user-banner .eub-dismiss:hover{color:var(--tx);background:rgba(255,255,255,.08)}
.existing-user-banner .eub-success{
font-size:13.5px;
line-height:1.45;
color:rgba(255,255,255,.86);
}
.existing-user-banner .eub-success strong{color:var(--tx)}
.existing-user-banner[data-state="sent"]{border-color:rgba(0,255,194,.45);background:rgba(0,255,194,.06)}
.existing-user-banner [hidden]{display:none}
/* ── City Challenge — /apply/[city] + /application/[code] ────────
Surfaces:
- .cc-form : application form (extends .wl-form pattern)
- .cc-city-grid : picker landing when no/invalid city in URL
- .cc-status-card : status page state container
Reuses .wl-* primitives (.wl-input, .wl-label, .wl-cta, .wl-error,
.wl-finepri, .wl-success-* glass card) so visual consistency is
inherited rather than re-implemented. Added 2026-05-20 for City
Challenge Season 1 P2.6 — see brain/05-tasks/city-challenge-s1-
build-plan.md § P2.6. */
/* Picker landing: list of all 10 cities. Each row is an anchor styled
like a choice button — same hover/active feel as the quiz .choice
primitive, but kept namespaced so future quiz changes don't ripple. */
.cc-city-grid{
display:flex;flex-direction:column;gap:10px;
margin:18px 0 8px;width:100%;max-width:520px;
}
.cc-city-opt{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:16px 20px;border-radius:14px;
background:rgba(7,14,28,.6);
border:1px solid rgba(46,215,255,.18);
color:var(--tx);text-decoration:none;font-family:var(--s);font-weight:600;
letter-spacing:.01em;font-size:16px;
transition:background .2s var(--e),border-color .2s var(--e),transform .15s var(--e);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.cc-city-opt:hover{background:rgba(46,215,255,.08);border-color:rgba(46,215,255,.45);transform:translateY(-1px)}
.cc-city-opt:active{transform:translateY(0)}
.cc-city-opt-name{flex:1 1 auto}
.cc-city-opt-arrow{width:16px;height:16px;color:var(--cy);flex-shrink:0}
/* Form inherits .wl-form glass + spacing. Adds optional-label badge,
radio + checkbox affordances, field-help microcopy. */
.cc-optional{
font-weight:400;color:var(--gd);font-size:12px;
letter-spacing:.04em;text-transform:uppercase;margin-left:6px;
}
.cc-field-help{
font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;
margin:6px 0 0;font-family:var(--m);
}
/* Radio + checkbox groups — fieldsets without browser default borders.
Stacked, full-width, with visible custom radios/boxes that work even
with native input default styles disabled. */
.cc-radio-group,
.cc-checkbox-group{
border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;
}
.cc-radio-group legend,
.cc-checkbox-group legend{
padding:0;margin:0 0 8px;
}
.cc-radio,
.cc-checkbox{
display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
border-radius:12px;border:1px solid rgba(255,255,255,.08);
background:rgba(3,8,16,.45);cursor:pointer;
transition:background .2s var(--e),border-color .2s var(--e);
}
.cc-radio:hover,
.cc-checkbox:hover{background:rgba(46,215,255,.06);border-color:rgba(46,215,255,.28)}
.cc-radio input,
.cc-checkbox input{
flex-shrink:0;margin-top:2px;width:18px;height:18px;
accent-color:var(--cy);cursor:pointer;
}
.cc-radio-label,
.cc-checkbox-label{
flex:1;color:var(--tx);font-family:var(--s);font-size:14px;
line-height:1.45;font-weight:500;
}
.cc-radio-label strong,
.cc-checkbox-label strong{color:var(--tx);font-weight:700}
/* Failed-eligibility list — also used on the rejected_ineligible
status state. Punchy, visible list of blockers. */
.cc-fail-list{
list-style:none;padding:0;margin:0 0 22px;
display:flex;flex-direction:column;gap:10px;
}
.cc-fail-item{
padding:12px 14px;border-radius:12px;
background:rgba(248,113,113,.06);
border:1px solid rgba(248,113,113,.28);
color:#FCA5A5;font-size:14px;line-height:1.5;
}
/* Status page card — glass panel container. All state variants
(pending, accepted, rejected, closed) wrap themselves in this. */
.cc-status-card{
display:flex;flex-direction:column;
padding:28px 24px;border-radius:20px;
background:rgba(7,14,28,.72);
border:1px solid rgba(46,215,255,.18);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
opacity:0;transform:translateY(8px);
transition:opacity .5s var(--e),transform .5s var(--e);
gap:14px;width:100%;max-width:520px;margin:0 auto;
}
.cc-status-card.enter{opacity:1;transform:translateY(0)}
/* Two-up stat grid for spots-remaining + total-applicants. Wraps to
a single column on narrow screens. */
.cc-stat-grid{
display:grid;grid-template-columns:1fr 1fr;gap:18px;
margin-top:4px;
}
@media(max-width:420px){
.cc-stat-grid{grid-template-columns:1fr}
}
.cc-stat{
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:14px 10px;border-radius:14px;
background:rgba(3,8,16,.45);
border:1px solid rgba(46,215,255,.12);
}
.cc-stat-num{
font-size:26px;font-weight:700;color:var(--cy);
letter-spacing:-.01em;line-height:1.15;
}
.cc-stat-lbl{
font-size:12px;color:rgba(255,255,255,.68);font-family:var(--m);
margin-top:4px;line-height:1.4;letter-spacing:.02em;
}
.cc-divider{
height:1px;background:rgba(46,215,255,.14);margin:6px 0;
}
.cc-status-meta{
font-size:14px;color:rgba(255,255,255,.84);line-height:1.5;margin:0;
text-align:center;
}
.cc-status-meta strong{color:var(--tx);font-weight:700}
.cc-status-body{
font-size:15px;color:rgba(255,255,255,.78);line-height:1.55;margin:0;
text-align:center;
}
.cc-status-choice-label{
font-size:15px;color:var(--cy);text-align:center;margin:0;
}
/* Share row on pending/eligible + rejected_full. Stacks input + CTA. */
.cc-share-row{
display:flex;flex-direction:column;gap:10px;
margin-top:8px;
}
.cc-share-input{margin:0}
.cc-share-copy{margin-top:0}
/* Accepted state — bigger headline, cyan accent CTA. */
.cc-accepted-headline{
font-size:34px;font-weight:700;letter-spacing:-.02em;
margin:0;text-align:center;color:var(--tx);
}
.cc-accepted-headline em{font-family:var(--f);font-style:italic;font-weight:400;color:var(--cy)}
.cc-accepted-deadline{
font-size:13px;color:rgba(255,255,255,.7);text-align:center;
margin:6px 0 0;font-family:var(--m);
}
.cc-pay-cta{margin-top:6px}
/* Rejected states — same headline weight as accepted but neutral colour
(the fail-list rows carry the warning visual). */
.cc-rejected-headline{
font-size:28px;font-weight:700;letter-spacing:-.02em;
margin:0;text-align:center;color:var(--tx);
}
.cc-update-cta{
text-decoration:none;text-align:center;
}
.cc-closed-form{
display:flex;flex-direction:column;gap:10px;margin-top:6px;
}
.cc-closed-submit{margin-top:6px}
/* Per-city status counter widget — currently stubbed (commented out
in JS pending W2-A endpoint confirmation). Styles ready so the
widget can light up the moment the data arrives. */
.cc-city-counter{
display:flex;align-items:center;gap:10px;padding:10px 14px;
border-radius:999px;background:rgba(46,215,255,.08);
border:1px solid rgba(46,215,255,.28);
font-family:var(--m);font-size:12.5px;color:var(--tx);
letter-spacing:.02em;margin:14px auto 0;width:fit-content;
}
.cc-city-counter[data-state="below"]{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.32);color:#FCA5A5}
.cc-city-counter strong{color:var(--cy);font-weight:700}
@media(max-width:520px){
.cc-status-card{padding:24px 18px}
.cc-accepted-headline{font-size:30px}
.cc-rejected-headline{font-size:24px}
}