/* Tokens mirrored from tradedesk.rbtrading.site so the funnel feels like one product */
:root{
  --gold:#f59e0b; --gold2:#fcd34d; --gold-deep:#d4880a;
  --gold-dim:rgba(245,158,11,0.12); --gold-border:rgba(245,158,11,0.32);
  --wc:255,255,255;
  --bg:#07070f; --surface:#16161f; --surface2:#21212e;
  --border:rgba(var(--wc),0.10); --border2:rgba(var(--wc),0.18);
  --text:#ffffff; --text2:#d5dbe5; --text3:#b0b9ca;
  --green:#22a06b; --green-dim:rgba(34,160,107,0.12); --green-border:rgba(34,160,107,0.25);
  --red:#c93b3b; --red-dim:rgba(201,59,59,0.12); --red-border:rgba(201,59,59,0.25);
  --blue:#3568d4; --blue-dim:rgba(53,104,212,0.12);
  --purple:#9966cc; --purple-dim:rgba(153,102,204,0.12);
  --serif:'Instrument Serif',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:clip;
}

/* single hero glow — the one depth effect on the page */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(245,158,11,.10), transparent 68%),
    radial-gradient(46% 38% at 88% 18%, rgba(53,104,212,.07), transparent 70%);
}

.container{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:20px;}
.mono{font-family:'DM Mono',monospace;}
.num{font-variant-numeric:tabular-nums;}

.svgi{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
      stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* ───────── Landing ───────── */
.landing-page{display:flex;flex-direction:column;align-items:center;justify-content:center;
              min-height:100vh;text-align:center;padding:48px 20px;}

.lp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--gold);
            text-transform:uppercase;margin-bottom:18px;}

.landing-page h1{font-family:var(--serif);font-size:60px;font-weight:400;line-height:1.05;
                 letter-spacing:-1px;margin-bottom:18px;}
.landing-page h1 em{font-style:italic;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.landing-page .subtitle{font-size:18px;color:var(--text2);max-width:560px;
                        line-height:1.6;margin-bottom:34px;}

.btn-gold{
  border:none;border-radius:13px;padding:17px 44px;font-size:16.5px;font-weight:700;
  color:#0a0a12;cursor:pointer;font-family:'Inter',sans-serif;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  box-shadow:0 6px 28px rgba(245,158,11,.30),inset 0 1px 0 rgba(var(--wc),.25);
  transition:transform .18s ease-out,box-shadow .18s ease-out;
}
.btn-gold::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(var(--wc),.28),transparent);
  transform:skewX(-20deg);transition:left .55s ease;}
.btn-gold:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 36px rgba(245,158,11,.42);}
.btn-gold:hover:not(:disabled)::before{left:140%;}
.btn-gold:active:not(:disabled){transform:scale(.98);}
.btn-gold:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}

.btn-ghost{background:none;border:none;color:var(--text3);font-size:13.5px;font-weight:600;
           font-family:'Inter',sans-serif;cursor:pointer;text-decoration:underline;
           text-underline-offset:3px;padding:8px;transition:color .18s;}
.btn-ghost:hover{color:var(--text2);}

.lp-note{font-size:13px;color:var(--text3);margin-top:14px;}

.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
          margin:38px auto 34px;max-width:480px;width:100%;}
.lp-stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 10px;}
.lp-stat b{display:block;font-family:'DM Mono',monospace;font-size:23px;font-weight:500;color:var(--gold);}
.lp-stat span{display:block;font-size:11.5px;color:var(--text3);margin-top:4px;}

.lp-learn{background:var(--surface);border:1px solid var(--border);border-radius:16px;
          padding:24px 26px;max-width:480px;width:100%;text-align:left;}
.lp-learn-h{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
            color:var(--gold);margin-bottom:15px;}
.lp-learn-i{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text2);
            padding:6px 0;line-height:1.5;}
.lp-learn-i .svgi{width:17px;height:17px;color:var(--green);margin-top:2px;}

/* ───────── Quiz ───────── */
.quiz-container{display:none;padding:32px 20px 60px;}
.quiz-container.active{display:block;}

.q-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;}
.q-count{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--text3);}
.q-right{display:flex;align-items:center;gap:10px;}

.streak-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  background:var(--gold-dim);border:1px solid var(--gold-border);font-size:11.5px;font-weight:800;
  color:var(--gold);letter-spacing:.3px;opacity:0;transform:scale(.85);
  transition:opacity .25s ease-out,transform .25s ease-out;}
.streak-pill.on{opacity:1;transform:scale(1);}
.streak-pill .svgi{width:13px;height:13px;}

.score-chip{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text2);
            background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px;}
.score-chip b{color:var(--gold);}
.score-chip.bump{animation:chipBump .45s ease;}
@keyframes chipBump{0%{transform:scale(1);}35%{transform:scale(1.16);}100%{transform:scale(1);}}

/* milestone dots — shows exactly how much is left */
.dots{display:flex;gap:6px;margin-bottom:26px;}
.dot{flex:1;height:5px;border-radius:3px;background:rgba(var(--wc),.09);transition:background .35s ease,box-shadow .35s ease;}
.dot.correct{background:var(--green);}
.dot.wrong{background:var(--red);}
.dot.current{background:var(--gold);box-shadow:0 0 10px rgba(245,158,11,.55);}

.question-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
               padding:38px;margin-bottom:22px;animation:cardIn .35s ease-out;}
@keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.diff-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;padding:5px 11px;border-radius:20px;margin-bottom:16px;}
.diff-easy{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border);}
.diff-tricky{background:var(--blue-dim);color:#7b9ff0;border:1px solid rgba(53,104,212,.28);}
.diff-hard{background:var(--purple-dim);color:#bb92e0;border:1px solid rgba(153,102,204,.28);}
.diff-expert{background:var(--red-dim);color:#e0716f;border:1px solid var(--red-border);}

.question-text{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.25;
               letter-spacing:-.3px;margin-bottom:24px;}

.context-hint{background:var(--gold-dim);border:1px solid var(--gold-border);border-radius:12px;
  padding:15px 18px;margin-bottom:24px;font-size:13.5px;line-height:1.6;color:var(--text2);
  display:flex;gap:11px;align-items:flex-start;}
.context-hint .svgi{width:17px;height:17px;color:var(--gold);margin-top:2px;}

.chart-image{width:100%;border-radius:14px;margin-bottom:26px;border:1px solid var(--border2);
             display:block;transition:opacity .3s ease;}
.chart-image.swap{opacity:0;}

.options{display:flex;flex-direction:column;gap:11px;}
.option{padding:17px 19px;background:rgba(7,9,15,.55);border:1px solid var(--border2);
  border-radius:13px;cursor:pointer;font-size:15.5px;font-weight:500;line-height:1.45;
  text-align:left;color:var(--text2);display:flex;gap:13px;align-items:flex-start;
  transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out,transform .12s ease-out;}
.option:hover:not(.locked){border-color:var(--gold-border);background:var(--surface2);color:var(--text);}
.option:active:not(.locked){transform:scale(.995);}
.option-key{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;color:var(--text3);
  border:1px solid var(--border2);border-radius:7px;width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:-1px;transition:.18s;}
.option.selected{border-color:var(--gold);background:var(--gold-dim);color:var(--text);}
.option.selected .option-key{border-color:var(--gold);color:var(--gold);}
.option.correct{border-color:var(--green);background:var(--green-dim);color:var(--text);}
.option.correct .option-key{border-color:var(--green);color:var(--green);}
.option.incorrect{border-color:var(--red);background:var(--red-dim);color:var(--text);}
.option.incorrect .option-key{border-color:var(--red);color:var(--red);}
.option.locked{cursor:default;}

.submit-btn{width:100%;border:none;border-radius:13px;padding:17px;font-size:16px;font-weight:700;
  color:#0a0a12;cursor:pointer;font-family:'Inter',sans-serif;margin-top:22px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  box-shadow:0 6px 24px rgba(245,158,11,.28),inset 0 1px 0 rgba(var(--wc),.25);
  transition:transform .18s,box-shadow .18s,opacity .18s;}
.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 32px rgba(245,158,11,.40);}
.submit-btn:active:not(:disabled){transform:scale(.98);}
.submit-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;}

/* the open loop that pulls them to the next question */
.teaser{text-align:center;font-size:13px;color:var(--text3);margin-top:13px;
        display:none;animation:cardIn .3s ease-out;}
.teaser.show{display:block;}
.teaser b{color:var(--gold);font-weight:600;}

.feedback{margin-top:20px;padding:19px 21px;border-radius:13px;font-size:14.5px;
          line-height:1.65;color:var(--text2);display:none;}
.feedback.show{display:block;animation:cardIn .3s ease-out;}
.feedback.correct{background:var(--green-dim);border:1px solid var(--green-border);}
.feedback.incorrect{background:var(--red-dim);border:1px solid var(--red-border);}
.verdict{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:7px;}
.feedback.correct .verdict{color:var(--green);}
.feedback.incorrect .verdict{color:var(--red);}
.feedback em{color:var(--text3);font-style:normal;}

/* ───────── Email gate ───────── */
.email-gate{display:none;padding:40px 20px;}
.email-gate.active{display:block;}

.gate-card{background:var(--surface);border:1px solid var(--gold-border);border-radius:20px;
  padding:46px 40px;max-width:560px;margin:30px auto;text-align:center;position:relative;overflow:hidden;
  animation:cardIn .4s ease-out;}
.gate-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;}

.gate-score{display:inline-flex;align-items:center;gap:8px;background:var(--gold-dim);
  border:1px solid var(--gold-border);border-radius:20px;padding:7px 15px;font-size:12.5px;
  font-weight:700;color:var(--gold);margin-bottom:20px;}
.gate-score .svgi{width:15px;height:15px;}

.gate-card h2{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.15;
              letter-spacing:-.4px;margin-bottom:14px;}
.gate-card h2 em{font-style:italic;color:var(--gold);}
.gate-card > p{font-size:14.5px;color:var(--text2);line-height:1.65;margin-bottom:22px;}

.gate-list{list-style:none;text-align:left;max-width:400px;margin:0 auto 26px;}
.gate-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text2);
              padding:7px 0;line-height:1.5;}
.gate-list .svgi{width:17px;height:17px;color:var(--gold);margin-top:2px;}
.gate-list b{color:var(--text);font-weight:600;}

.gate-card input{width:100%;background:rgba(7,9,15,.7);border:1px solid var(--border2);
  border-radius:12px;padding:15px 18px;font-size:15px;color:var(--text);outline:none;
  font-family:'Inter',sans-serif;margin-bottom:12px;transition:border-color .2s,box-shadow .2s;}
.gate-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.12);}
.gate-card input::placeholder{color:var(--text3);}
.gate-card input.shake{animation:shake .35s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-9px);}
                 60%{transform:translateX(7px);}80%{transform:translateX(-3px);}}

.gate-err{color:var(--red);font-size:13px;font-weight:600;margin-top:9px;display:none;}
.gate-fine{font-size:12.5px;color:var(--text3);margin-top:15px;line-height:1.6;}
.gate-fine a{color:var(--text2);}

/* ───────── Results ───────── */
.results-page{display:none;padding:40px 20px 70px;text-align:center;}
.results-page.active{display:block;}

.rank-badge{display:inline-flex;align-items:center;gap:9px;border-radius:22px;padding:8px 18px;
  font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:22px;
  background:var(--gold-dim);border:1px solid var(--gold-border);color:var(--gold);}
.rank-badge .svgi{width:16px;height:16px;}

.final-score{font-family:'DM Mono',monospace;font-size:78px;font-weight:500;color:var(--gold);
  line-height:1;margin-bottom:14px;text-shadow:0 0 70px rgba(245,158,11,.45);}
.final-score span{font-size:38px;color:var(--text3);}

.score-label{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:-.4px;margin-bottom:14px;}
.score-sub{font-size:15px;color:var(--text2);max-width:520px;margin:0 auto 20px;line-height:1.7;}

.score-breakdown{display:inline-flex;gap:20px;margin-bottom:38px;font-size:13px;color:var(--text3);}
.score-breakdown b{font-family:'DM Mono',monospace;color:var(--text);font-weight:500;}

/* Leak Report on the results screen */
.leak-card{max-width:580px;margin:0 auto 26px;text-align:left;background:var(--surface);
  border:1px solid var(--border2);border-radius:20px;padding:34px 32px;position:relative;overflow:hidden;
  animation:cardIn .45s ease-out;}
.leak-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;}
.leak-kicker{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.leak-kicker .svgi{width:15px;height:15px;}
.leak-card h2{font-family:var(--serif);font-size:33px;font-weight:400;line-height:1.14;
  letter-spacing:-.4px;margin-bottom:14px;text-wrap:pretty;}
.leak-card h2 em{font-style:italic;color:#f0716d;}
.leak-card h2 em.clean{color:var(--green);}
.leak-empathy{font-size:15.5px;line-height:1.7;color:var(--text);margin-bottom:24px;}
.skills{margin-bottom:6px;}
.skill{display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:center;margin-bottom:14px;}
.skill-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--text2);}
.skill-score{font-family:'DM Mono',monospace;font-size:13px;color:var(--text3);}
.skill-bar{grid-column:1/-1;height:6px;border-radius:4px;background:rgba(var(--wc),.08);overflow:hidden;}
.skill-fill{height:100%;border-radius:4px;background:var(--gold);width:0;transition:width .9s ease-out;}
.skill.is-leak .skill-name{color:#f0716d;}
.skill.is-leak .skill-fill{background:var(--red);}
.skill.is-strong .skill-fill{background:var(--green);}
.skill-tag{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;
  border-radius:20px;white-space:nowrap;}
.skill.is-leak .skill-tag{background:var(--red-dim);border:1px solid var(--red-border);color:#f0716d;}
.skill.is-strong .skill-tag{background:var(--green-dim);border:1px solid var(--green-border);color:#3fd98a;}
.leak-block{border-top:1px solid var(--border);padding-top:18px;margin-top:18px;}
.leak-block h3{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text3);margin-bottom:8px;}
.leak-block p{font-size:14.5px;line-height:1.72;color:var(--text2);}
.leak-links{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.leak-links a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--gold);text-decoration:none;}
.leak-links a:hover{color:var(--gold2);}
.leak-links .svgi{width:16px;height:16px;}
.leak-sent{display:flex;gap:9px;align-items:flex-start;margin-top:20px;padding:12px 14px;border-radius:12px;
  background:rgba(var(--wc),.04);border:1px solid var(--border);font-size:13px;color:var(--text3);line-height:1.55;}
.leak-sent .svgi{width:16px;height:16px;color:var(--gold);margin-top:1px;}
.leak-sent b{color:var(--text2);font-weight:600;}

.founder-note{max-width:580px;margin:0 auto 30px;text-align:left;border-left:3px solid var(--gold);
  padding:4px 0 4px 20px;}
.founder-note p{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--text);margin-bottom:10px;}
.founder-note .sign{font-size:13px;color:var(--text3);font-weight:600;}

.offer-fix{font-size:14.5px;line-height:1.65;color:var(--text);background:var(--gold-dim);
  border:1px solid var(--gold-border);border-radius:12px;padding:14px 16px;margin-bottom:20px;}
.offer-fix b{color:var(--gold);}

/* Trade Desk slideshow on the results screen */
.desk-show{max-width:580px;margin:0 auto 26px;text-align:left;}
.desk-show-h{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
             color:var(--gold);margin-bottom:12px;text-align:center;}
.desk-frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--gold-border);
            aspect-ratio:16/10.2;background:var(--surface);}
.desk-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
                opacity:0;transition:opacity .6s ease;}
.desk-frame img.on{opacity:1;}
.desk-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-size:12.5px;
          font-weight:600;color:var(--text);text-align:center;
          background:linear-gradient(180deg,transparent,rgba(7,7,15,.92));}
.desk-dots{display:flex;gap:8px;justify-content:center;margin-top:12px;}
.desk-dot{width:22px;height:5px;border-radius:3px;background:rgba(var(--wc),.12);
          border:none;cursor:pointer;padding:0;transition:background .3s;}
.desk-dot.on{background:var(--gold);}

.offer-card{background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--gold-border);border-radius:20px;padding:40px 36px;text-align:left;
  max-width:580px;margin:0 auto;position:relative;overflow:hidden;}
.offer-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.75;}

.offer-badge{display:inline-block;background:var(--gold-dim);border:1px solid var(--gold-border);
  color:var(--gold);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  padding:6px 13px;border-radius:20px;margin-bottom:16px;}

.offer-card h2{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.15;
               letter-spacing:-.4px;margin-bottom:12px;}
.offer-card h2 em{font-style:italic;color:var(--gold);}
.offer-lede{font-size:14.5px;color:var(--text2);line-height:1.65;margin-bottom:24px;}

.offer-list{list-style:none;margin-bottom:26px;}
.offer-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text2);
               line-height:1.55;padding:8px 0;border-bottom:1px solid var(--border);}
.offer-list li:last-child{border-bottom:none;}
.offer-list .svgi{width:18px;height:18px;color:var(--gold);margin-top:2px;}
.offer-list b{color:var(--text);font-weight:600;}

.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.price-now{font-family:'DM Mono',monospace;font-size:34px;font-weight:500;color:var(--text);}
.price-was{font-family:'DM Mono',monospace;font-size:17px;color:var(--text3);text-decoration:line-through;}
.price-save{background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);
  font-size:11.5px;font-weight:800;letter-spacing:.6px;padding:4px 10px;border-radius:20px;}
.price-day{font-size:13.5px;color:var(--text3);margin-bottom:22px;}
.price-day b{color:var(--text2);font-weight:600;}

.offer-cta{display:block;width:100%;border:none;border-radius:13px;padding:18px;
  font-size:16.5px;font-weight:700;color:#0a0a12;text-align:center;text-decoration:none;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  box-shadow:0 6px 26px rgba(245,158,11,.32),inset 0 1px 0 rgba(var(--wc),.25);
  transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;}
.offer-cta::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(var(--wc),.3),transparent);
  transform:skewX(-20deg);transition:left .55s ease;}
.offer-cta:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(245,158,11,.45);}
.offer-cta:hover::before{left:140%;}

.offer-under{text-align:center;font-size:12.5px;color:var(--text3);margin-top:13px;}
.offer-sample{display:block;text-align:center;margin-top:16px;font-size:13.5px;color:var(--text2);
  text-decoration:underline;text-underline-offset:3px;transition:color .18s;}
.offer-sample:hover{color:var(--gold);}

.social-share{margin-top:44px;}
.social-share h3{font-size:13.5px;color:var(--text3);font-weight:600;margin-bottom:14px;}
.share-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--surface);
  border:1px solid var(--border2);border-radius:11px;color:var(--text2);font-weight:600;font-size:13.5px;
  font-family:'Inter',sans-serif;cursor:pointer;transition:border-color .18s,color .18s;}
.share-btn:hover{border-color:var(--gold-border);color:var(--text);}
.share-btn .svgi{width:16px;height:16px;}

.retry-line{margin-top:26px;}

/* landing FAQ + guide links */
.lp-faq{max-width:560px;width:100%;margin:44px auto 0;text-align:left;}
.lp-faq-h{font-family:var(--serif);font-size:27px;font-weight:400;letter-spacing:-.3px;
          text-align:center;margin-bottom:16px;}
.lp-faq details{background:var(--surface);border:1px solid var(--border);border-radius:13px;
                margin-bottom:10px;overflow:hidden;}
.lp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
                gap:14px;align-items:center;padding:15px 18px;font-size:14.5px;
                font-weight:600;color:var(--text);}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:'+';color:var(--gold);font-size:18px;flex:none;}
.lp-faq details[open] summary::after{content:'\2212';}
.lp-faq .faq-a{padding:0 18px 16px;font-size:13.5px;line-height:1.7;color:var(--text2);
               text-align:left;}
.lp-links{max-width:560px;width:100%;margin:40px auto 0;text-align:left;}
.lp-links-h{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
            color:var(--gold);margin-bottom:12px;text-align:center;}
.lp-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;}
.lp-links a{font-size:13px;color:var(--text3);text-decoration:none;padding:5px 0;
            line-height:1.45;display:block;}
.lp-links a:hover{color:var(--text);}
.lp-footnote{margin-top:34px;font-size:11.5px;color:var(--text3);line-height:1.6;
             max-width:560px;}
.lp-footnote a{color:var(--text3);}

@media (max-width:768px){
    .container{padding:14px;}
    .landing-page{padding:36px 16px;}
    .lp-links-grid{grid-template-columns:1fr;}
    .landing-page h1{font-size:40px;}
    .landing-page .subtitle{font-size:16px;}
    .btn-gold{width:100%;max-width:360px;padding:17px 30px;}
    .question-card{padding:24px 20px;}
    .question-text{font-size:23px;}
    .option{font-size:15px;padding:15px 16px;}
    .gate-card{padding:34px 22px;}
    .gate-card h2{font-size:27px;}
    .final-score{font-size:60px;}
    .score-label{font-size:29px;}
    .offer-card{padding:30px 22px;}
    .leak-card{padding:26px 20px;}
    .leak-card h2{font-size:27px;}
    .founder-note p{font-size:18.5px;}
    .offer-card h2{font-size:26px;}
}

.hidden{display:none !important;}
    /* autofill never paints the email gate white: the page colours win over the browser autofill paint (owner, 23 Sep 2026) */input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface) inset;box-shadow:0 0 0 1000px var(--surface) inset;caret-color:var(--text);transition:background-color 600000s 0s}
/* ── Glass layer (ui-ux-pro-max pass, 24 Sep 2026) ─────────────────
   Liquid-glass surfaces inside the brand tokens: gold stays the one
   accent, the canvas stays blue-black. The ambient light behind the
   glass is the page's one hero effect. Blur is dropped on phones. */
:root{
  --glass:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  --glass-border:rgba(255,255,255,.11);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.09);
  --glass-shadow:0 24px 70px -28px rgba(0,0,0,.8);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
body::before{
  inset:-15%;
  background:
    radial-gradient(38% 30% at 50% 8%,rgba(245,158,11,.16),transparent 70%),
    radial-gradient(30% 28% at 86% 30%,rgba(53,104,212,.13),transparent 72%),
    radial-gradient(34% 30% at 10% 72%,rgba(245,158,11,.07),transparent 72%);
  animation:ambient 28s ease-in-out infinite alternate;
}
@keyframes ambient{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-3%,2%,0) scale(1.06);}}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.question-card,.gate-card,.leak-card,.offer-card,.lp-stat,.lp-learn,.lp-faq details,.share-btn,.score-chip,.streak-pill{
  background:var(--glass);border-color:var(--glass-border);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--glass-hi),var(--glass-shadow);
}
.gate-card{background:radial-gradient(90% 60% at 50% 0%,rgba(245,158,11,.13),transparent 65%),var(--glass);border-color:var(--gold-border);}
.offer-card{background:radial-gradient(90% 60% at 100% 0%,rgba(245,158,11,.14),transparent 60%),var(--glass);border-color:var(--gold-border);}
.leak-card{background:radial-gradient(90% 60% at 100% 0%,rgba(201,59,59,.12),transparent 60%),var(--glass);}
.streak-pill{background:var(--gold-dim);border-color:var(--gold-border);}
.lp-faq details[open]{border-color:var(--gold-border);}

/* headline pop: a soft light under the one gold phrase */
.landing-page h1 em,.gate-card h2 em{filter:drop-shadow(0 0 22px rgba(245,158,11,.28));}
.final-score{text-shadow:0 0 70px rgba(245,158,11,.5),0 0 18px rgba(245,158,11,.25);}

/* answer tiles: glass, a lift on hover, a coloured edge for state */
.option{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);
  transition:transform .2s var(--ease-out),border-color .2s,background .2s,box-shadow .2s,color .2s;}
.option:hover:not(.locked){transform:translateY(-1px);box-shadow:0 12px 30px -18px rgba(245,158,11,.5);}
.option.selected{box-shadow:inset 3px 0 0 var(--gold),0 12px 30px -18px rgba(245,158,11,.55);}
.option.correct{box-shadow:inset 3px 0 0 var(--green);}
.option.incorrect{box-shadow:inset 3px 0 0 var(--red);}
.chart-image{box-shadow:0 24px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05);}

/* keyboard focus is always visible, in the accent */
button:focus-visible,a:focus-visible,summary:focus-visible,.option:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:10px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* 16px stops iOS zooming the page when the email field is tapped */
.gate-card input{font-size:16px;min-height:50px;}

/* skill bars grow with transform, not width */
.skill-fill{width:100%;transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-out);}

/* slideshow dots: 5px bars inside a 44px-tall tap target */
.desk-dots{gap:2px;}
.desk-dot{width:34px;height:44px;background:none;border:none;padding:0;position:relative;cursor:pointer;}
.desk-dot::before{content:'';position:absolute;left:5px;right:5px;top:19px;height:5px;border-radius:3px;
  background:rgba(var(--wc),.16);transition:background .3s;}
.desk-dot.on{background:none;}
.desk-dot.on::before{background:var(--gold);}

/* landing sections arrive in a short stagger */
.landing-page > *{animation:cardIn .6s var(--ease-out) both;}
.landing-page > *:nth-child(2){animation-delay:.05s;}
.landing-page > *:nth-child(3){animation-delay:.1s;}
.landing-page > *:nth-child(4){animation-delay:.15s;}
.landing-page > *:nth-child(n+5){animation-delay:.2s;}

@media (max-width:680px){
  .question-card,.gate-card,.leak-card,.offer-card,.lp-stat,.lp-learn,.lp-faq details,.share-btn,.score-chip,.streak-pill{
    -webkit-backdrop-filter:none;backdrop-filter:none;}
  .question-card,.lp-stat,.lp-learn,.lp-faq details,.share-btn,.score-chip{background:rgba(24,24,34,.82);}
  .gate-card{background:radial-gradient(90% 60% at 50% 0%,rgba(245,158,11,.13),transparent 65%),rgba(24,24,34,.86);}
  .offer-card{background:radial-gradient(90% 60% at 100% 0%,rgba(245,158,11,.14),transparent 60%),rgba(24,24,34,.86);}
  .leak-card{background:radial-gradient(90% 60% at 100% 0%,rgba(201,59,59,.12),transparent 60%),rgba(24,24,34,.86);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* type-mode (personality quiz) pieces */
.dot.done{background:var(--gold);opacity:.6;}
.type-list{list-style:none;padding:0;margin:0;}
.type-list li{position:relative;padding:6px 0 6px 20px;font-size:14.5px;line-height:1.6;color:var(--text2);}
.type-list li::before{content:'';position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--gold);}

/* other-quizzes hub on every quiz landing */
.lp-quizzes{max-width:560px;width:100%;margin:40px auto 0;text-align:left;}
.lp-quizzes-h{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;text-align:center;}
.lp-quiz-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:8px;
  border-radius:13px;text-decoration:none;background:var(--glass);border:1px solid var(--glass-border);
  box-shadow:var(--glass-hi);transition:border-color .2s,transform .2s var(--ease-out);}
.lp-quiz-card:hover{border-color:var(--gold-border);transform:translateY(-1px);}
.lp-quiz-card b{display:block;font-size:14.5px;color:var(--text);font-weight:700;}
.lp-quiz-card span{display:block;font-size:12.5px;color:var(--text3);margin-top:2px;}
.lp-quiz-card .svgi{width:17px;height:17px;color:var(--gold);}


/* ── Motion layer (24 Sep 2026) ──────────────────────────────────────
   Transform and opacity only, ease-out entrances, nothing longer than
   ~600ms. The reduced-motion rule above switches all of it off. */
@keyframes qIn{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes optIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
@keyframes popGlow{0%{box-shadow:inset 3px 0 0 var(--green),0 0 0 0 rgba(34,160,107,.55);}
  70%{box-shadow:inset 3px 0 0 var(--green),0 0 0 12px rgba(34,160,107,0);}
  100%{box-shadow:inset 3px 0 0 var(--green),0 0 0 0 rgba(34,160,107,0);}}
@keyframes shakeX{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}45%{transform:translateX(5px);}70%{transform:translateX(-3px);}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 8px rgba(245,158,11,.45);}50%{box-shadow:0 0 16px rgba(245,158,11,.8);}}
@keyframes badgeIn{from{opacity:0;transform:scale(.86);}to{opacity:1;transform:none;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.question-card.q-enter .diff-tag,
.question-card.q-enter .question-text,
.question-card.q-enter .context-hint,
.question-card.q-enter #chartContainer{animation:qIn .5s var(--ease-out) both;}
.question-card.q-enter .question-text{animation-delay:.04s;}
.question-card.q-enter .context-hint{animation-delay:.08s;}
.question-card.q-enter #chartContainer{animation-delay:.1s;}
.option{animation:optIn .42s var(--ease-out) backwards;}
.option.pop{animation:popGlow .7s ease-out 1;}
.option.shake{animation:shakeX .38s ease-out 1;}
.option:active:not(.locked){transform:scale(.98);}
.dot.current{animation:dotPulse 1.8s ease-in-out infinite;}
.feedback.show{animation:qIn .42s var(--ease-out) both;}
.submit-btn:not(:disabled){transition:transform .18s,box-shadow .18s,opacity .25s,background .25s;}

.quiz-container.active,.email-gate.active{animation:fadeUp .45s var(--ease-out) both;}
.results-page.results-enter .rank-badge{animation:badgeIn .5s var(--ease-out) both;}
.results-page.results-enter .final-score{animation:fadeUp .55s var(--ease-out) .08s both;}
.results-page.results-enter .score-label{animation:fadeUp .55s var(--ease-out) .18s both;}
.results-page.results-enter .score-sub{animation:fadeUp .55s var(--ease-out) .26s both;}
.results-page.results-enter .score-breakdown{animation:fadeUp .55s var(--ease-out) .32s both;}
.rise{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.rise.in{opacity:1;transform:none;}

/* glass that reacts: a soft gold edge lights up under the pointer */
.lp-quiz-card,.lp-stat,.lp-faq details{transition:border-color .25s,transform .25s var(--ease-out),box-shadow .25s;}
.lp-stat:hover{transform:translateY(-2px);border-color:var(--gold-border);}
.lp-faq details:hover{border-color:rgba(245,158,11,.22);}
.gate-card:focus-within{box-shadow:var(--glass-hi),0 0 0 1px rgba(245,158,11,.35),0 30px 90px -30px rgba(245,158,11,.25);}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;}}


/* ── Curtain reveal: frosted glass over the future, lifted on answer ── */
.chart-wrap{position:relative;margin-bottom:26px;border-radius:14px;overflow:hidden;border:1px solid var(--border2);}
.chart-wrap .chart-image{margin-bottom:0;border:0;border-radius:0;}
.chart-curtain{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,rgba(7,7,15,.88),rgba(7,7,15,.96));
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  border-left:1px solid var(--gold-border);box-shadow:-18px 0 40px -18px rgba(245,158,11,.35);
  transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);}
.chart-curtain::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);animation:dotPulse 2.2s ease-in-out infinite;}
.chart-curtain span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:22px;
  font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);
  background:rgba(245,158,11,.1);border:1px solid var(--gold-border);white-space:nowrap;}
.chart-curtain .svgi{width:14px;height:14px;}
.chart-wrap.revealed .chart-curtain{transform:translateX(100%);opacity:0;pointer-events:none;}
@media (max-width:680px){
  .chart-curtain{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(7,7,15,.94);}
  .chart-curtain span{font-size:10px;padding:7px 11px;letter-spacing:1px;}
}