:root {
  --ink:#0e1218; --ink2:#161d28; --ink3:#1e2836;
  --paper:#f8f5f0; --cream:#f0ebe0; --white:#ffffff;
  --gold:#c8922a; --gold2:#e8b84b; --gold3:#fdf5e4; --gold-b:rgba(200,146,42,0.25);
  --sage:#27594a; --sage2:#e8f4ee;
  --rust:#b83828; --rust2:#fdf0ec;
  --navy:#18355a; --navy2:#e8f0f8;
  --purple:#5a3a8a; --purple2:#f0eaf8;
  --border:#ddd6c8; --muted:#7a7060;
  --shadow:0 4px 32px rgba(14,18,24,0.1);
  --shadow-lg:0 16px 64px rgba(14,18,24,0.15);
  /* Mobile-first - chủ doanh nghiệp lớn tuổi, đọc trên điện thoại */
  --fs-xs:16px; --fs-sm:20px; --fs-md:22px; --fs-lg:28px;
  --fs-xl:36px; --fs-2xl:48px; --fs-3xl:62px;
  --fs-hero:clamp(38px,7vw,78px); --fs-q:clamp(26px,5vw,44px);
  --fs-report:22px;   /* body text trong báo cáo */
  --fs-label:15px;    /* nhãn nhỏ */
  --fs-number:32px;   /* số tiền, KPI nổi bật */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:72px; --s8:96px;
  --ease:cubic-bezier(0.4,0,0.2,1); --dur:0.3s;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{font-family:'Outfit',sans-serif;font-size:var(--fs-md);line-height:1.75;background:var(--paper);color:var(--ink);min-height:100vh;overflow-x:hidden;}
button,input,textarea,select{font-family:inherit;}
a{color:inherit;text-decoration:none;}

/* SCREENS */
.screen{display:none;min-height:100vh;animation:fadeIn 0.3s var(--ease);}
.screen.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* TOP NAV */
.topnav{position:sticky;top:0;z-index:900;background:rgba(14,18,24,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.07);padding:0 var(--s4);height:60px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);font-weight:700;color:var(--white);letter-spacing:0.02em;cursor:pointer;}
.nav-logo em{color:var(--gold);font-style:normal;}
.nav-right{display:flex;align-items:center;gap:var(--s2);}
.nav-lang{display:flex;gap:2px;background:rgba(255,255,255,0.07);padding:3px;border-radius:20px;}
.lang-btn{padding:5px 12px;border:none;border-radius:16px;font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,0.45);transition:all 0.2s;}
.lang-btn.active{background:rgba(255,255,255,0.15);color:var(--white);}
.nav-bell{position:relative;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.12);border-radius:50%;transition:all 0.2s;}
.nav-bell:hover{border-color:var(--gold);}
.bell-badge{position:absolute;top:4px;right:4px;width:10px;height:10px;background:var(--rust);border-radius:50%;border:2px solid var(--ink2);display:none;}
.bell-badge.show{display:block;}
.nav-user{display:flex;align-items:center;gap:var(--s1);cursor:pointer;padding:6px 14px;border:1px solid rgba(255,255,255,0.15);border-radius:24px;transition:all 0.2s;}
.nav-user:hover{border-color:var(--gold);}
.nav-avatar{width:28px;height:28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink);}
.nav-uname{font-size:14px;font-weight:500;color:var(--white);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-login-btn{padding:8px 20px;border:none;border-radius:2px;background:var(--gold);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;}
.nav-login-btn:hover{background:var(--gold2);}

/* READING PROGRESS */
.reading-prog-bar{position:fixed;top:60px;left:0;right:0;height:3px;background:rgba(255,255,255,0.08);z-index:700;}
.reading-prog-fill{height:100%;background:var(--gold);width:0%;transition:width 0.15s;}

/* SMART CTA BAR */
.smart-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:700;background:var(--ink2);border-top:1px solid rgba(255,255,255,0.1);padding:var(--s2) var(--s4);display:none;align-items:center;gap:var(--s3);justify-content:space-between;}
.smart-cta-bar.show{display:flex;}
.scta-msg{font-size:var(--fs-sm);color:rgba(255,255,255,0.7);}
.scta-msg strong{color:var(--gold2);}
.scta-btn{padding:14px 28px;border:none;border-radius:2px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;background:var(--gold);color:var(--ink);transition:all 0.2s;}
.scta-btn:hover{background:var(--gold2);}
.scta-close{color:rgba(255,255,255,0.3);cursor:pointer;font-size:20px;flex-shrink:0;background:none;border:none;}

/* LANDING */
.hero{background:var(--ink2);padding:var(--s8) var(--s4) var(--s7);position:relative;overflow:hidden;text-align:center;}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(200,146,42,0.14),transparent);}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-b),transparent);}
.hero-tag{font-family:'JetBrains Mono',monospace;font-size:24px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4);display:inline-flex;align-items:center;gap:10px;font-weight:600;}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:var(--fs-hero);font-weight:700;line-height:1.06;color:var(--white);margin-bottom:var(--s3);max-width:900px;margin-left:auto;margin-right:auto;}
.hero h1 em{color:var(--gold2);font-style:italic;}
.hero-sub{font-size:var(--fs-lg);color:rgba(255,255,255,0.5);max-width:620px;margin:0 auto var(--s6);line-height:1.75;}
.hero-actions{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap;}
.btn-primary{display:inline-flex;align-items:center;gap:12px;padding:22px 48px;border:none;border-radius:2px;background:var(--gold);color:var(--ink);font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:all 0.25s var(--ease);}
.btn-primary:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 16px 48px rgba(200,146,42,0.4);}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{display:inline-flex;align-items:center;gap:12px;padding:22px 32px;border:2px solid rgba(255,255,255,0.2);border-radius:2px;background:transparent;color:rgba(255,255,255,0.7);font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:all 0.2s;}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);}
.stat-cell{background:var(--white);padding:var(--s5) var(--s3);text-align:center;}
.stat-n{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--gold);line-height:1;}
.stat-l{font-size:var(--fs-xs);color:var(--muted);margin-top:6px;}
.tiers-wrap{padding:var(--s7) var(--s4);max-width:1000px;margin:0 auto;}
.tiers-head{text-align:center;margin-bottom:var(--s6);}
.tiers-head h2{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;margin-bottom:10px;}
.tiers-head p{font-size:var(--fs-md);color:var(--muted);}
.tier-grid{display:grid;gap:var(--s3);}
.tier-card{background:var(--white);border:2px solid var(--border);padding:var(--s5);cursor:pointer;transition:all 0.22s var(--ease);position:relative;overflow:hidden;}
.tier-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;}
.tier-card.t1::before{background:var(--sage);}
.tier-card.t2::before{background:var(--gold);}
.tier-card.t3::before{background:var(--navy);}
.tier-card:hover{transform:translateX(4px);box-shadow:var(--shadow);}
.tier-card-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);}
.tier-badge-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:10px;display:block;}
.t1 .tier-badge-label{color:var(--sage);}
.t2 .tier-badge-label{color:var(--gold);}
.t3 .tier-badge-label{color:var(--navy);}
.tier-name{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;margin-bottom:8px;}
.tier-desc{font-size:var(--fs-sm);color:var(--muted);line-height:1.65;margin-bottom:var(--s2);}
.tier-chips{display:flex;gap:10px;flex-wrap:wrap;}
.tier-chip{font-size:13px;color:var(--muted);background:var(--cream);padding:4px 12px;}
.tier-price-block{text-align:right;flex-shrink:0;min-width:120px;}
.tier-price{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;line-height:1;}
.tp-free{color:var(--sage);} .tp-499{color:var(--gold);} .tp-750{color:var(--navy);}
.tier-price-note{font-size:12px;color:var(--muted);margin-top:4px;}
.tier-btn{display:block;width:100%;padding:18px;border:none;font-size:var(--fs-md);font-weight:700;cursor:pointer;margin-top:var(--s3);border-radius:2px;transition:all 0.22s;}
.t1 .tier-btn{background:var(--sage);color:var(--white);}
.t1 .tier-btn:hover{background:#1e4538;}
.t2 .tier-btn{background:var(--gold);color:var(--ink);}
.t2 .tier-btn:hover{background:var(--gold2);}
.t3 .tier-btn{background:var(--navy);color:var(--white);}
.t3 .tier-btn:hover{background:#0f2440;}
.testimonials{background:var(--ink2);padding:var(--s7) var(--s4);}
.test-head{text-align:center;margin-bottom:var(--s6);font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;color:var(--white);}
.test-grid{display:grid;gap:var(--s3);max-width:900px;margin:0 auto;}
.test-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);padding:var(--s4);}
.test-quote{font-size:var(--fs-md);color:rgba(255,255,255,0.75);line-height:1.7;margin-bottom:var(--s2);font-style:italic;}
.test-who{font-size:14px;color:var(--gold);font-weight:600;}
.aff-banner{background:var(--cream);border-top:1px solid var(--border);padding:var(--s6) var(--s4);}
.aff-banner-inner{max-width:800px;margin:0 auto;text-align:center;}
.aff-banner h3{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;margin-bottom:10px;}
.aff-banner p{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--s4);}
.aff-tiers-row{display:flex;justify-content:center;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap;}
.aff-tier-chip{background:var(--white);border:1px solid var(--border);padding:var(--s3);min-width:160px;text-align:center;}
.aff-pct{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--gold);}
.aff-tier-name{font-size:13px;color:var(--muted);margin-top:4px;}
footer{background:var(--ink);padding:var(--s4);text-align:center;}
footer p{font-size:13px;color:rgba(255,255,255,0.25);}

/* AUTH */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink2);padding:var(--s4);}
.auth-card{background:var(--white);padding:var(--s7) var(--s6);max-width:480px;width:100%;text-align:center;}
.auth-logo{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--ink);margin-bottom:var(--s2);}
.auth-logo em{color:var(--gold);font-style:normal;}
.auth-sub{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--s6);line-height:1.6;}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px 24px;border:2px solid var(--border);border-radius:2px;background:var(--white);color:var(--ink);font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:all 0.2s;margin-bottom:var(--s3);}
.btn-google:hover{border-color:var(--ink);box-shadow:var(--shadow);}
.auth-divider{height:1px;background:var(--border);margin:var(--s4) 0;position:relative;}
.auth-divider::before{content:'hoặc';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--white);padding:0 var(--s2);font-size:13px;color:var(--muted);}
.btn-guest{width:100%;padding:16px;border:none;background:var(--ink);color:var(--white);font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:all 0.2s;}
.btn-guest:hover{background:var(--ink3);}
.auth-trust{font-size:13px;color:var(--muted);margin-top:var(--s3);}

/* QUIZ ENGINE */
.quiz-topbar{position:sticky;top:60px;z-index:800;background:var(--white);border-bottom:1px solid var(--border);padding:12px var(--s4);}
.qtb-inner{display:flex;align-items:center;gap:var(--s3);max-width:760px;margin:0 auto;}
.qtb-tier{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:6px 14px;color:var(--white);flex-shrink:0;border-radius:2px;}
.qtb-prog{flex:1;}
.prog-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.prog-fill{height:100%;border-radius:3px;transition:width 0.5s var(--ease);}
.prog-pct{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:5px;text-align:right;}
.qtb-save{font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;}
.qtb-save:hover{color:var(--ink);}
.honesty-bar{background:var(--navy);padding:var(--s3) var(--s4);display:flex;gap:16px;align-items:flex-start;}
.hb-icon{font-size:26px;flex-shrink:0;}
.hb-title{font-size:var(--fs-sm);font-weight:700;color:var(--white);margin-bottom:4px;}
.hb-body{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.65;}
.hb-body strong{color:var(--gold2);}
.section-header-bar{background:var(--ink);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:14px;display:none;}
.section-header-bar.show{display:flex;}
.shb-icon{font-size:24px;}
.shb-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);font-weight:700;color:var(--white);}
.shb-count{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold);margin-left:auto;}
.qwrap{max-width:760px;margin:0 auto;padding:var(--s7) var(--s4);}
.qcard{display:none;}
.qcard.active{display:block;animation:slideUp 0.32s var(--ease) both;}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.encourage{padding:14px 20px;margin-bottom:var(--s3);background:var(--sage2);border-left:4px solid var(--sage);font-size:var(--fs-sm);color:var(--sage);font-weight:600;animation:fadeIn 0.3s ease;}
.qnum{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);display:flex;align-items:center;gap:10px;}
.qnum::before{content:'';display:block;width:24px;height:1px;background:var(--muted);}
.psych-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;margin-bottom:var(--s2);background:var(--gold3);border:1px solid var(--gold-b);font-size:13px;color:var(--gold);font-weight:600;font-family:'JetBrains Mono',monospace;border-radius:2px;}
.qtext{font-family:'Cormorant Garamond',serif;font-size:var(--fs-q);font-weight:600;line-height:1.22;color:var(--ink);margin-bottom:12px;}
.qhint{font-size:var(--fs-sm);color:var(--muted);line-height:1.7;margin-bottom:var(--s5);padding-left:16px;border-left:3px solid var(--border);}
.inp-text,.inp-area{width:100%;font-size:var(--fs-lg);padding:20px 24px;border:2px solid var(--border);background:var(--white);color:var(--ink);outline:none;border-radius:2px;transition:border-color 0.2s,box-shadow 0.2s;-webkit-appearance:none;}
.inp-text:focus,.inp-area:focus{border-color:var(--gold);box-shadow:0 0 0 5px rgba(200,146,42,0.1);}
.inp-area{min-height:130px;resize:vertical;line-height:1.65;}
.money-wrap{position:relative;}
.money-inp{width:100%;font-size:32px;font-weight:700;padding:20px 80px 20px 20px;border:2px solid var(--border);background:var(--white);color:var(--ink);outline:none;border-radius:2px;-moz-appearance:textfield;transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box;}
.money-inp::-webkit-outer-spin-button,.money-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.money-inp:focus{border-color:var(--gold);box-shadow:0 0 0 5px rgba(200,146,42,0.1);}
.money-unit{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--muted);font-weight:600;pointer-events:none;white-space:nowrap;}
.money-display{margin-top:10px;padding:14px 20px;border-radius:2px;background:var(--gold3);border:1px solid var(--gold-b);font-size:var(--fs-sm);color:var(--gold);font-weight:700;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:8px;min-height:52px;transition:all 0.2s;}
.money-guide{font-size:13px;color:var(--muted);margin-top:8px;}
.choices{display:flex;flex-direction:column;gap:14px;}
.choice{display:flex;align-items:center;gap:18px;padding:20px 24px;background:var(--white);border:2px solid var(--border);border-radius:2px;cursor:pointer;transition:all 0.18s var(--ease);font-size:var(--fs-lg);text-align:left;color:var(--ink);min-height:72px;-webkit-tap-highlight-color:transparent;}
.choice:hover{border-color:var(--gold);background:var(--gold3);}
.choice:active{transform:scale(0.99);}
.choice.selected{border-color:var(--gold);background:var(--gold3);font-weight:600;}
.c-check{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.18s;background:var(--white);}
.choice.selected .c-check{background:var(--gold);border-color:var(--gold);color:var(--white);}
.slider-disp{font-family:'Cormorant Garamond',serif;font-size:72px;font-weight:700;color:var(--gold);text-align:center;line-height:1;margin:var(--s2) 0;}
.slider-inp{width:100%;height:8px;appearance:none;-webkit-appearance:none;background:var(--border);outline:none;cursor:pointer;border-radius:4px;margin:var(--s2) 0;}
.slider-inp::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;border-radius:50%;background:var(--gold);border:4px solid var(--white);box-shadow:0 2px 12px rgba(200,146,42,0.5);cursor:pointer;}
.slider-inp::-moz-range-thumb{width:38px;height:38px;border-radius:50%;background:var(--gold);border:4px solid var(--white);cursor:pointer;}
.slider-lbls{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--muted);}
.qnav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border);gap:var(--s2);}
.btn-back{padding:16px 28px;border:2px solid var(--border);background:transparent;color:var(--muted);font-size:var(--fs-md);font-weight:500;cursor:pointer;border-radius:2px;transition:all 0.2s;flex-shrink:0;}
.btn-back:hover{border-color:var(--ink);color:var(--ink);}
.btn-next{flex:1;padding:20px 32px;border:none;border-radius:2px;font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:all 0.22s var(--ease);display:flex;align-items:center;justify-content:center;gap:12px;}
.btn-next:active{transform:scale(0.98);}
.btn-sage{background:var(--sage);color:var(--white);}
.btn-sage:hover{background:#1e4538;box-shadow:0 8px 28px rgba(39,89,74,0.4);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold2);box-shadow:0 8px 28px rgba(200,146,42,0.4);}
.btn-navy{background:var(--navy);color:var(--white);}
.btn-navy:hover{background:#0f2440;box-shadow:0 8px 28px rgba(24,53,90,0.4);}

/* EMAIL CAPTURE MODAL */
.email-modal-overlay{position:fixed;inset:0;background:rgba(14,18,24,0.85);z-index:2000;display:flex;align-items:center;justify-content:center;padding:var(--s4);backdrop-filter:blur(4px);animation:fadeIn 0.25s ease;}
.email-modal-overlay.hidden{display:none;}
.email-modal{background:var(--white);padding:var(--s6);max-width:520px;width:100%;position:relative;}
.email-modal-close{position:absolute;top:var(--s2);right:var(--s2);background:none;border:none;font-size:24px;color:var(--muted);cursor:pointer;}
.email-modal-close:hover{color:var(--ink);}
.em-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.em-h{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;margin-bottom:10px;line-height:1.2;}
.em-sub{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s4);line-height:1.65;}
.em-input-wrap{display:flex;gap:var(--s2);margin-bottom:var(--s2);}
.em-input{flex:1;font-size:var(--fs-md);padding:16px 20px;border:2px solid var(--border);outline:none;border-radius:2px;transition:border-color 0.2s;}
.em-input:focus{border-color:var(--gold);}
.em-submit{padding:16px 24px;border:none;border-radius:2px;background:var(--gold);color:var(--ink);font-size:var(--fs-md);font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.2s;}
.em-submit:hover{background:var(--gold2);}
.em-submit:disabled{opacity:0.6;cursor:not-allowed;}
.em-trust{font-size:13px;color:var(--muted);}
.em-success{display:none;text-align:center;padding:var(--s3);}
.em-success.show{display:block;}
.em-error{font-size:13px;color:var(--rust);margin-top:8px;display:none;}
.em-error.show{display:block;}

/* PAYWALL - MB Bank style */
.paywall-wrap{min-height:100vh;background:var(--ink2);display:flex;align-items:center;justify-content:center;padding:var(--s7) var(--s4);flex-direction:column;}
.pw-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);padding:var(--s7) var(--s6);max-width:640px;width:100%;}
.pw-tier-badge{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s3);}
.pw-h{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--white);line-height:1.1;margin-bottom:12px;}
.pw-hook{background:rgba(200,146,42,0.08);border:1px solid rgba(200,146,42,0.25);padding:var(--s4);margin-bottom:var(--s4);}
.pw-hook-title{font-size:var(--fs-md);font-weight:700;color:var(--gold2);margin-bottom:10px;}
.pw-hook-body{font-size:var(--fs-sm);color:rgba(255,255,255,0.75);line-height:1.75;}
.pw-hook-body ul{list-style:none;margin-top:10px;}
.pw-hook-body ul li{padding:6px 0;display:flex;gap:10px;}
.pw-hook-body ul li::before{content:'→';color:var(--gold2);}
.pw-features{list-style:none;margin-bottom:var(--s5);}
.pw-features li{font-size:var(--fs-md);color:rgba(255,255,255,0.7);padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;gap:14px;}
.pw-features li::before{content:'✓';color:var(--gold2);font-weight:700;flex-shrink:0;}
.pw-features li:last-child{border-bottom:none;}

/* MB Bank payment section */
.mb-bank-section{background:var(--white);padding:var(--s4);margin-bottom:var(--s4);}
.mb-bank-title{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-bottom:var(--s3);display:flex;align-items:center;gap:10px;}
.mb-bank-logo{background:#cc0000;color:var(--white);font-size:12px;font-weight:800;padding:4px 10px;border-radius:2px;letter-spacing:0.05em;}
.mb-bank-info{display:flex;flex-direction:column;gap:12px;}
.mb-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.mb-row:last-child{border-bottom:none;}
.mb-label{font-size:14px;color:var(--muted);}
.mb-value{font-size:var(--fs-md);font-weight:700;color:var(--ink);font-family:'JetBrains Mono',monospace;}
.mb-copy{padding:6px 14px;border:1px solid var(--border);background:var(--cream);font-size:13px;cursor:pointer;border-radius:2px;transition:all 0.2s;}
.mb-copy:hover{border-color:var(--gold);color:var(--gold);}
.mb-amount-highlight{font-size:var(--fs-2xl);font-weight:700;color:var(--rust);font-family:'Cormorant Garamond',serif;}
.mb-transfer-ref{background:var(--gold3);border:2px solid var(--gold-b);padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:var(--fs-md);font-weight:700;color:var(--gold);letter-spacing:0.05em;}

/* Payment buttons */
.btn-transferred{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:22px;border:none;border-radius:2px;background:var(--sage);color:var(--white);font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:all 0.22s;margin-bottom:12px;}
.btn-transferred:hover{background:#1e4538;}
.btn-transferred.loading{opacity:0.7;cursor:not-allowed;}
.pw-pending{display:none;background:rgba(200,146,42,0.1);border:1px solid rgba(200,146,42,0.3);padding:var(--s4);text-align:center;margin-bottom:var(--s3);}
.pw-pending.show{display:block;}
.pw-pending-title{font-size:var(--fs-md);font-weight:700;color:var(--gold2);margin-bottom:8px;}
.pw-pending-body{font-size:var(--fs-sm);color:rgba(255,255,255,0.65);line-height:1.65;}
.pw-trust{font-size:13px;color:rgba(255,255,255,0.25);display:flex;align-items:center;gap:8px;justify-content:center;margin-top:var(--s3);}
.pw-upgrade-note{font-size:14px;color:var(--gold2);padding:10px;background:rgba(200,146,42,0.1);border-radius:2px;margin-bottom:var(--s3);display:none;}
.pw-back{margin-top:var(--s3);font-size:14px;color:rgba(255,255,255,0.35);cursor:pointer;background:none;border:none;}
.pw-back:hover{color:rgba(255,255,255,0.6);}
.btn-test-pay{width:100%;padding:14px;border:1px solid rgba(255,255,255,0.15);background:transparent;color:rgba(255,255,255,0.4);font-size:var(--fs-sm);cursor:pointer;border-radius:2px;transition:all 0.2s;margin-top:10px;}
.btn-test-pay:hover{border-color:var(--gold);color:var(--gold);}

/* LOADING */
.loading-wrap{min-height:100vh;background:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s7) var(--s4);}
.loading-ring{width:80px;height:80px;border-radius:50%;border:3px solid rgba(200,146,42,0.15);border-top-color:var(--gold);animation:spin 1s linear infinite;margin-bottom:var(--s6);}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-h{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);color:var(--white);text-align:center;margin-bottom:var(--s5);}
.loading-steps{width:100%;max-width:380px;}
.l-step{font-family:'JetBrains Mono',monospace;font-size:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.2);transition:color 0.4s;display:flex;align-items:center;gap:12px;}
.l-step.active{color:var(--gold);}
.l-step.done{color:rgba(255,255,255,0.4);}
.l-step.done::before{content:'✓  ';}

/* REPORT */
.report-hero{background:var(--ink2);padding:var(--s7) var(--s4);position:relative;overflow:hidden;}
.report-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.rh-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold2);margin-bottom:16px;}
.rh-h1{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--white);line-height:1.1;margin-bottom:10px;}
.rh-sub{font-size:var(--fs-sm);color:rgba(255,255,255,0.4);}
.report-body{max-width:860px;margin:0 auto;padding:32px 20px;}
.scores-section{margin-bottom:var(--s7);}
.scores-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--s4);}
.scores-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);}
.score-card{background:var(--white);border:1px solid var(--border);padding:var(--s3);position:relative;overflow:hidden;}
.score-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;}
.sc-domain{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:8px;}
.sc-score{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:700;line-height:1;}
.sc-label{font-size:13px;color:var(--muted);margin-top:6px;}
.sc-bar{height:5px;background:var(--border);margin-top:12px;border-radius:3px;overflow:hidden;}
.sc-fill{height:100%;border-radius:3px;transition:width 1.4s var(--ease);}
.analysis-box{background:var(--white);border:1px solid var(--border);border-top:4px solid var(--gold);padding:var(--s5);margin-bottom:var(--s5);}
.ab-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-report-lg,26px);font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:12px;line-height:1.3;}
.ab-content{font-size:var(--fs-report,22px);line-height:var(--lh-report,2.2);word-break:break-word;}
.insights-grid{display:grid;grid-template-columns:1fr;gap:var(--s2);margin-bottom:var(--s5);}
@media(min-width:640px){.insights-grid{grid-template-columns:1fr 1fr;}}
.insight-card{padding:var(--s4);background:var(--white);border:1px solid var(--border);position:relative;overflow:hidden;}
.insight-card::before{content:attr(data-n);position:absolute;top:-10px;right:12px;font-family:'Cormorant Garamond',serif;font-size:80px;font-weight:700;color:var(--border);line-height:1;pointer-events:none;}
.ic-type{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:10px;}
.ic-opp{color:var(--sage);}
.ic-warn{color:var(--rust);}
.ic-txt{font-size:var(--fs-md);line-height:1.7;}

/* REPORT GATE - blur effect */
.report-gate-wrap{position:relative;}
.report-locked{position:relative;}
.report-locked-content{filter:blur(4px);pointer-events:none;user-select:none;opacity:0.6;}
.report-gate-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,transparent,var(--paper) 40%);}
.report-gate-card{max-width:600px;width:90%;background:var(--white);border:2px solid var(--gold-b);padding:var(--s5);text-align:center;box-shadow:var(--shadow-lg);}
.rgc-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2);}
.rgc-h{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;margin-bottom:10px;color:var(--ink);}
.rgc-sub{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s4);line-height:1.65;}
.rgc-price{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--rust);line-height:1;margin-bottom:4px;}
.rgc-price-note{font-size:13px;color:var(--muted);margin-bottom:var(--s3);}
.rgc-btn{display:block;width:100%;padding:20px;border:none;border-radius:2px;font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:all 0.22s;}
.rgc-btn-gold{background:var(--gold);color:var(--ink);}
.rgc-btn-gold:hover{background:var(--gold2);}
.rgc-btn-navy{background:var(--navy);color:var(--white);margin-top:10px;}
.rgc-btn-navy:hover{background:#0f2440;}

/* REPORT SECTIONS */
.report-section-wrap{margin-bottom:var(--s3);}
.rs-toggle{background:var(--ink);color:var(--white);padding:var(--s3) var(--s4);cursor:pointer;display:flex;align-items:center;gap:14px;border:none;width:100%;text-align:left;transition:background 0.2s;}
.rs-toggle:hover{background:var(--ink3);}
.rs-icon{font-size:22px;}
.rs-title-txt{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);font-weight:700;flex:1;}
.rs-chevron{margin-left:auto;font-size:18px;transition:transform 0.3s;}
.rs-toggle.open .rs-chevron{transform:rotate(180deg);}
.rs-body{padding:24px 20px;background:var(--white);border:1px solid var(--border);border-top:none;display:none;}
.rs-body.open{display:block;}
.rs-body-content{font-size:var(--fs-report,22px);line-height:2.0;}
.action-table-wrap{overflow-x:auto;margin-top:var(--s3);}
.action-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.action-table th{background:var(--ink);color:var(--white);padding:14px 16px;text-align:left;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;}
.action-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;}
.action-table tr:last-child td{border-bottom:none;}
.action-table tr:nth-child(even) td{background:var(--cream);}
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px;}
.checklist-item{display:flex;align-items:flex-start;gap:14px;padding:var(--s3);border:1px solid var(--border);cursor:pointer;transition:all 0.2s;}
.checklist-item:hover{border-color:var(--gold);}
.checklist-item.done{opacity:0.5;}
.check-box{width:24px;height:24px;border:2px solid var(--border);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.2s;margin-top:2px;}
.checklist-item.done .check-box{background:var(--sage);border-color:var(--sage);color:var(--white);}
.check-txt{font-size:var(--fs-sm);line-height:1.6;}
.check-week{font-size:12px;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono',monospace;}

/* NOTIFICATION PANEL */
.notif-panel{position:fixed;top:68px;right:var(--s3);z-index:800;width:340px;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-lg);display:none;}
.notif-panel.open{display:block;animation:fadeIn 0.2s ease;}
.notif-header{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-title{font-size:var(--fs-sm);font-weight:700;}
.notif-close{cursor:pointer;font-size:20px;color:var(--muted);background:none;border:none;}
.notif-list{max-height:400px;overflow-y:auto;}
.notif-item{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);display:flex;gap:12px;cursor:pointer;transition:background 0.2s;}
.notif-item:hover{background:var(--cream);}
.notif-item.unread{background:var(--gold3);}
.notif-icon{font-size:22px;flex-shrink:0;}
.notif-body-title{font-size:var(--fs-sm);font-weight:600;margin-bottom:4px;}
.notif-body-txt{font-size:13px;color:var(--muted);line-height:1.5;}
.notif-body-time{font-size:12px;color:var(--muted);margin-top:4px;}

/* USER DASHBOARD */
.dashboard-wrap{max-width:1100px;margin:0 auto;padding:var(--s6) var(--s4);}
.dash-header{margin-bottom:var(--s6);}
.dash-greeting{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;margin-bottom:8px;}
.dash-sub{font-size:var(--fs-md);color:var(--muted);}
.dash-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:var(--s5);flex-wrap:wrap;}
.dash-tab{padding:14px var(--s4);font-size:var(--fs-sm);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--muted);transition:all 0.2s;white-space:nowrap;}
.dash-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.dash-tab-content{display:none;}
.dash-tab-content.active{display:block;animation:fadeIn 0.25s ease;}
.dash-grid{display:grid;grid-template-columns:1fr;gap:var(--s4);}
@media(min-width:900px){.dash-grid{grid-template-columns:2fr 1fr;}}
.d-card{background:var(--white);border:1px solid var(--border);}
.d-card-header{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.d-card-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);font-weight:700;display:flex;align-items:center;gap:10px;}
.d-card-body{padding:var(--s4);}
.d-card-link{font-size:14px;color:var(--gold);cursor:pointer;font-weight:600;}
.d-card-link:hover{text-decoration:underline;}
.health-overview{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s4);flex-wrap:wrap;}
.health-score-big{font-family:'Cormorant Garamond',serif;font-size:88px;font-weight:700;color:var(--gold);line-height:1;}
.health-score-label{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;}
.health-status{font-size:var(--fs-lg);font-weight:700;margin-bottom:8px;}
.health-status.good{color:var(--sage);}
.health-status.medium{color:var(--gold);}
.health-status.bad{color:var(--rust);}
.health-desc{font-size:var(--fs-sm);color:var(--muted);line-height:1.65;max-width:400px;}
.top-issues{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4);}
.issue-item{display:flex;align-items:flex-start;gap:14px;padding:var(--s3);border:1px solid var(--border);background:var(--cream);}
.issue-num{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--white);background:var(--rust);width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.issue-text{font-size:var(--fs-sm);line-height:1.6;}
.issue-severity{font-size:12px;margin-top:4px;font-weight:600;}
.sev-high{color:var(--rust);}.sev-med{color:var(--gold);}
.survey-list{display:flex;flex-direction:column;gap:var(--s2);}
.survey-item{padding:var(--s3);border:1px solid var(--border);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:var(--s3);}
.survey-item:hover{border-color:var(--gold);background:var(--gold3);}
.si-tier{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;flex-shrink:0;}
.si-t1{background:var(--sage2);color:var(--sage);}
.si-t2{background:var(--gold3);color:var(--gold);}
.si-t3{background:var(--navy2);color:var(--navy);}
.si-info{flex:1;}
.si-date{font-size:13px;color:var(--muted);}
.si-score{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);font-weight:700;color:var(--gold);}
.si-action{font-size:13px;color:var(--gold);font-weight:600;}
.aff-dash{}
.aff-link-box{background:var(--cream);border:1px solid var(--border);padding:var(--s3);display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap;}
.aff-link-txt{flex:1;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--ink);background:none;border:none;outline:none;word-break:break-all;}
.aff-copy-btn{padding:10px 20px;border:none;background:var(--ink);color:var(--white);font-size:14px;font-weight:700;cursor:pointer;border-radius:2px;transition:all 0.2s;white-space:nowrap;}
.aff-copy-btn:hover{background:var(--gold);color:var(--ink);}
.aff-stats-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);}
.aff-stat{flex:1;min-width:100px;text-align:center;padding:var(--s3);border:1px solid var(--border);background:var(--white);}
.aff-stat-n{font-family:'Cormorant Garamond',serif;font-size:var(--fs-xl);font-weight:700;color:var(--gold);}
.aff-stat-l{font-size:13px;color:var(--muted);margin-top:4px;}

/* ADMIN */
.admin-wrap{max-width:1200px;margin:0 auto;padding:var(--s6) var(--s4);}
.admin-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;margin-bottom:var(--s5);}
.admin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3);margin-bottom:var(--s5);}
.kpi-card{background:var(--white);border:1px solid var(--border);padding:var(--s4);}
.kpi-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:10px;}
.kpi-value{font-family:'Cormorant Garamond',serif;font-size:var(--fs-2xl);font-weight:700;color:var(--ink);}
.kpi-sub{font-size:13px;color:var(--muted);margin-top:6px;}
.kpi-up{color:var(--sage);}.kpi-dn{color:var(--rust);}
.funnel-wrap{background:var(--white);border:1px solid var(--border);padding:var(--s5);margin-bottom:var(--s5);}
.funnel-title{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s4);}
.funnel-steps{display:flex;flex-direction:column;gap:10px;}
.funnel-step{display:flex;align-items:center;gap:var(--s3);}
.funnel-bar-wrap{flex:1;height:40px;background:var(--cream);position:relative;}
.funnel-bar-fill{height:100%;transition:width 1s var(--ease);display:flex;align-items:center;padding-left:var(--s2);}
.funnel-bar-label{font-size:14px;font-weight:600;color:var(--white);white-space:nowrap;}
.funnel-step-name{font-size:var(--fs-sm);font-weight:600;min-width:200px;}
.funnel-step-pct{font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);font-weight:700;min-width:60px;text-align:right;}
.admin-table-wrap{background:var(--white);border:1px solid var(--border);overflow:hidden;}
.admin-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.admin-table th{background:var(--ink);color:var(--white);padding:14px 16px;text-align:left;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;}
.admin-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:var(--cream);}
.badge-tier{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;}
.b-t1{background:var(--sage2);color:var(--sage);}
.b-t2{background:var(--gold3);color:var(--gold);}
.b-t3{background:var(--navy2);color:var(--navy);}
.b-pending{background:var(--rust2);color:var(--rust);}

@media(max-width:600px){
  :root{
  /* ── TYPOGRAPHY - mobile-first, large for older users ── */
  --fs-xs:14px;
  --fs-sm:16px;
  --fs-md:20px;        /* base body text - was 19px */
  --fs-lg:24px;        /* headings */
  --fs-xl:32px;
  --fs-2xl:42px;
  --fs-hero:clamp(36px,8vw,68px);
  --fs-q:clamp(28px,6vw,40px);   /* quiz questions */
  --fs-report:22px;    /* report body text - big for readability */
  --fs-report-lg:26px; /* report section titles */
  --lh-report:2.2;     /* generous line-height for readability */
}
  .topnav{padding:0 var(--s3);}
  .stats-row{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:clamp(36px,10vw,60px);}
  .pw-card{padding:var(--s5) var(--s3);}
  .smart-cta-bar{flex-direction:column;gap:10px;}
  .em-input-wrap{flex-direction:column;}
}

/* ═══════════════════════════════════════════════
   QUIZ CLICK FIX - ensure all interactive elements
   are always clickable, no overlay interference
═══════════════════════════════════════════════ */
/* Active question card sits above everything */
.qcard.active { position:relative; z-index:1; }

/* Choice buttons: parent gets click, children don't intercept */
.choice { position:relative; z-index:2; cursor:pointer !important; }
.choice * { pointer-events:none; }

/* Nav buttons always clickable */
.btn-next { position:relative; z-index:2; cursor:pointer !important; }
.btn-back { position:relative; z-index:2; cursor:pointer !important; }

/* Input elements */
.inp-text, .inp-area, .money-inp, .slider-inp {
  position:relative; z-index:2; pointer-events:auto !important;
}

/* Quiz wrapper: isolated stacking context */
#qwrap { position:relative; z-index:1; isolation:isolate; }

/* Section/honesty bars sit below quiz controls */
.honesty-bar { position:relative; z-index:1; }
.section-header-bar { position:relative; z-index:1; }

/* Demo banner: highest z but doesn't block quiz (bottom of page) */
#demo-banner { z-index:800 !important; } /* below smart-cta (z:700) wait no, should be above */
/* Fix: demo banner and smart-cta both fixed at bottom - demo-banner gets lower z so smart-cta shows */
#demo-banner { z-index:600 !important; }
.smart-cta-bar { z-index:700; }

/* Report gate: only blur locked content, not entire screen */
.report-gate-wrap { position:relative; }
.report-locked { position:relative; }
.report-locked-content {
  filter:blur(4px);
  pointer-events:none;
  user-select:none;
  opacity:0.55;
}
.report-gate-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, transparent 0%, var(--paper) 35%);
  pointer-events:none; /* overlay itself non-blocking */
}
/* But the card inside IS clickable */
.report-gate-card { pointer-events:auto; }

/* PDF download button */
#pdf-download-zone button { cursor:pointer !important; }
#pdf-download-zone button:hover { opacity:0.85; }

/* rgc buttons */
.rgc-btn { width:100%; padding:18px; border:none; border-radius:2px;
  font-size:17px; font-weight:700; cursor:pointer !important;
  transition:all 0.2s; margin-top:10px; }
.rgc-btn-gold { background:var(--gold); color:var(--ink); }
.rgc-btn-gold:hover { background:var(--gold2); }
.rgc-btn-navy { background:var(--navy); color:var(--white); }
.rgc-btn-navy:hover { background:#0f2440; }

/* ── END QUIZ CLICK FIX ── */

/* ── REPORT SECTION RICH FORMATTING ─────────────────────── */
.rs-body-content { word-break:break-word; }
.rs-body-content strong { font-weight:800; }
.rs-body.open { animation:rsIn 0.3s ease; }
@keyframes rsIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
/* ── END REPORT RICH FORMAT ──────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST REPORT & QUIZ - Tối ưu cho điện thoại
   Chủ doanh nghiệp 40-60 tuổi đọc trên màn hình nhỏ
   ═══════════════════════════════════════════════════════════ */

/* Base mobile scaling */
@media (max-width: 768px) {
  :root {
    --fs-xs:17px; --fs-sm:21px; --fs-md:23px; --fs-lg:28px;
    --fs-xl:34px; --fs-2xl:44px; --fs-report:23px; --fs-number:30px;
  }
  body { font-size: 23px; }

  /* Quiz - to, dễ đọc, dễ bấm */
  .qcard { padding: 28px 20px; }
  .qnum { font-size: 14px; }
  .qtext { font-size: clamp(22px,5vw,28px) !important; line-height: 1.55 !important; }
  .qhint { font-size: 17px !important; }
  .c-btn { padding: 18px 16px !important; font-size: 20px !important; min-height: 60px; }
  .inp-text { font-size: 22px !important; padding: 18px !important; }
  .inp-area { font-size: 22px !important; padding: 18px !important; min-height: 140px; }
  .btn-next, .btn-back { font-size: 20px !important; padding: 18px 24px !important; min-height: 58px; }
  .prog-pct { font-size: 16px; }

  /* Report sections */
  .ab-title { font-size: 24px !important; }
  .ab-content { font-size: 22px !important; line-height: 2.0 !important; }
  .rs-head { padding: 20px 18px !important; }
  .rs-title { font-size: 22px !important; }
  .rs-body { padding: 20px 18px !important; }
  .rs-body-content { font-size: 22px !important; line-height: 2.0 !important; }
  .analysis-box { padding: 24px 20px !important; }

  /* Score cards */
  .score-card { padding: 16px 12px !important; }
  .sc-domain { font-size: 14px !important; }
  .sc-score { font-size: 36px !important; }

  /* Landing */
  .hero h1 { font-size: clamp(34px,8vw,52px) !important; }
  .hero-sub { font-size: 20px !important; }
  .btn-primary { padding: 20px 32px !important; font-size: 22px !important; }
  .tier-name { font-size: 28px !important; }
  .tier-price { font-size: 32px !important; }

  /* Report header numbers */
  .summary-value, [class*="summary-value"] { font-size: 30px !important; }

  /* Paywall / email gate */
  .rgc-h { font-size: 24px !important; }
  .rgc-btn { font-size: 20px !important; padding: 20px !important; }

  /* Radar chart container */
  #report-radar { overflow-x: auto; }
  #report-radar svg { min-width: 300px; }
}

/* Very small screens */
@media (max-width: 400px) {
  :root { --fs-md: 21px; --fs-report: 21px; }
  .qtext { font-size: 21px !important; }
  .c-btn { font-size: 19px !important; }
}

/* Tablet and larger - keep comfortable */
@media (min-width: 769px) {
  .qtext { font-size: clamp(26px,3vw,34px) !important; }
  .qhint { font-size: 19px !important; }
  .c-btn { font-size: 20px !important; min-height: 56px; }
  .ab-content { font-size: 22px !important; }
  .rs-body-content { font-size: 22px !important; }
}

/* Touch targets - minimum 44px height for all interactive elements */
button, .c-btn, input, textarea, select {
  min-height: 44px;
  touch-action: manipulation; /* no 300ms tap delay */
}

/* Score summary numbers in report */
.summary-value { font-size: var(--fs-number, 32px); font-weight: 900; }
.summary-label { font-size: var(--fs-label, 15px); text-transform: uppercase; letter-spacing: 0.1em; }



/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST REPORT - Optimized for older users / small screens
   Base design is mobile, desktop gets refinements
   ═══════════════════════════════════════════════════════════ */

/* Report section content - large, readable */
.rs-body-content {
  font-size: 20px !important;
  line-height: 2.1 !important;
  word-break: break-word;
}

/* Score cards - bigger on mobile */
.score-card { min-height: 90px; }
.sc-score { font-size: 32px !important; }
.sc-domain { font-size: 16px !important; }
.sc-label { font-size: 14px !important; }

/* Analysis boxes */
.analysis-box { padding: 20px 18px; margin-bottom: 20px; }

/* Quiz cards - bigger for touch */
.qcard { padding: 28px 20px; }
.qnum { font-size: 15px; }
.qtext { font-size: clamp(20px, 4.5vw, 26px); line-height: 1.55; font-weight: 600; }
.qhint { font-size: 16px; line-height: 1.6; }

/* Choice buttons - big tap targets */
.choice-btn { 
  padding: 16px 18px; 
  font-size: 18px !important;
  min-height: 58px;
  border-radius: 6px;
  margin-bottom: 10px !important;
}

/* Money inputs - large */
.inp-money { font-size: 28px !important; }
.money-val { font-size: 28px !important; }

/* Text inputs */
.inp-text, .inp-area { font-size: 18px !important; }

/* Next/Back buttons - very large */
.btn-next, .btn-sage, .btn-gold, .btn-navy {
  font-size: 20px !important;
  padding: 18px 28px !important;
  min-height: 60px;
}

/* Report locked preview */
.report-locked-content { filter: blur(5px); pointer-events: none; }

/* Report header */
#rh-h1 { font-size: clamp(22px, 5vw, 32px); }
#rh-sub { font-size: 16px; }

/* PDF zone */
#pdf-download-zone button { font-size: 20px !important; padding: 18px 32px !important; }

/* Responsive adjustments for desktop */
@media (min-width: 640px) {
  .rs-body-content { font-size: 21px !important; }
  .qtext { font-size: 24px; }
  .choice-btn { font-size: 19px !important; padding: 16px 22px !important; }
  .report-body { padding: 40px 32px; }
}

@media (min-width: 900px) {
  .rs-body-content { font-size: 22px !important; }
  .qtext { font-size: 26px; }
}

/* ── REPORT RICH FORMATTING ─── */
.report-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #f8f5f0;
  border-left: 3px solid #c8922a;
  border-radius: 2px;
  font-size: 19px;
  line-height: 1.7;
}
.report-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #c8922a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.report-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.75;
  border-left: 2px solid #ddd6c8;
}
.report-bullet-icon {
  flex-shrink: 0;
  font-size: 18px;
  margin-top: 2px;
}
.report-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ddd6c8;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1.65;
  cursor: pointer;
  transition: background 0.15s;
}
.report-check-item:hover { background: #f8f5f0; }
.report-check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #ddd6c8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.report-lever-block {
  background: #fff;
  border: 1px solid #ddd6c8;
  border-left: 5px solid #c8922a;
  padding: 20px 22px;
  margin-bottom: 16px;
  border-radius: 2px;
}
.report-lever-title {
  font-size: 20px;
  font-weight: 800;
  color: #c8922a;
  margin-bottom: 10px;
  line-height: 1.3;
}
.report-lever-body {
  font-size: 19px;
  line-height: 1.85;
  color: #2a2a2a;
}
.report-kpi-badge {
  display: inline-block;
  background: #e8f4ee;
  color: #27594a;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  margin: 4px 4px 0 0;
}
.report-timeline-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed #ddd6c8;
}
.report-timeline-item:last-child { border-bottom: none; }
.report-timeline-dot {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.report-timeline-content { font-size: 19px; line-height: 1.8; }
.report-timeline-label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }

/* Hidden Loss cards */
.loss-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #fff8f8;
  border: 1px solid #f5c6c6;
  border-left: 4px solid #b83828;
  margin-bottom: 10px;
  border-radius: 2px;
}
.loss-amount { font-size: 24px; font-weight: 900; color: #b83828; min-width: 80px; }
.loss-label { font-size: 17px; line-height: 1.5; color: #2a2a2a; }


/* ─── Hybrid choice_with_exact styling ─────────────────── */
.choice-exact {
  border-left: 3px solid #c8922a !important;
  background: #fdf8ef;
}
.choice-exact:hover {
  background: #faf0dc;
}
.choice-exact.selected {
  background: linear-gradient(135deg, #fdf8ef, #f5e6c4) !important;
  border-left: 3px solid #c8922a !important;
}
.choice-unknown {
  border-left: 3px solid #a0a0a0 !important;
  opacity: 0.75;
  font-style: italic;
}
.choice-unknown:hover {
  opacity: 1;
}
.exact-wrap {
  margin: 4px 0 8px 0;
  padding: 14px 16px !important;
  background: #fdf8ef;
  border: 1px dashed #c8922a;
  border-radius: 4px;
}
.exact-wrap .money-inp {
  width: 100%;
  box-sizing: border-box;
}


/* When only T1 is visible on landing, center it nicely */
.tier-grid {
  justify-content: center;
}
.tier-card.t1 {
  max-width: 480px;
  margin: 0 auto;
}


/* Hero tag - responsive: tránh chữ quá to trên mobile */
@media (max-width: 600px) {
  .hero-tag { font-size: 18px; letter-spacing: 0.14em; }
}


/* Mobile - money input smaller font to fit */
@media (max-width: 600px) {
  .money-inp { font-size: 22px !important; padding: 14px 60px 14px 14px !important; }
  .money-unit-badge, .m-unit { font-size: 11px !important; padding: 4px 8px !important; }
  .inp-text, .inp-area { font-size: 16px !important; padding: 14px !important; }
}


/* ── Self-score sliders (7P + 4M, 1-10 với anchor text) ── */
.slider-wrap { padding: 8px 0; }
.slider-value-row { text-align: center; margin-bottom: 12px; }
.slider-disp { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 700; color: var(--gold); line-height: 1; display: inline-flex; align-items: baseline; gap: 4px; }
.slider-max { font-size: 22px; color: rgba(0,0,0,0.3); font-weight: 500; }
.slider-lbls { display: flex; justify-content: space-between; font-size: 11px; color: rgba(0,0,0,0.5); margin-top: 8px; padding: 0 4px; }
.slider-lbls span { max-width: 45%; line-height: 1.3; }
.slider-lbls span:first-child { text-align: left; }
.slider-lbls span:last-child { text-align: right; }
.slider-anchor {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(200, 146, 42, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Enhance slider track for better mobile UX */
.slider-inp { height: 12px !important; border-radius: 6px !important; }
.slider-inp::-webkit-slider-thumb { width: 44px !important; height: 44px !important; }
.slider-inp::-moz-range-thumb { width: 44px !important; height: 44px !important; }

@media (max-width: 600px) {
  .slider-disp { font-size: 54px; }
  .slider-max { font-size: 18px; }
  .slider-anchor { font-size: 14px; padding: 12px 14px; }
  .slider-lbls { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════
   MOBILE UX IMPROVEMENTS - Audit-based (April 2026)
   ═══════════════════════════════════════════════════ */

/* Hero features - 3 cards below hero CTA */
.hero-features {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-width: 110px;
  text-align: center;
}
.hf-icon { font-size: 28px; line-height: 1; }
.hf-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  font-weight: 500;
}

/* Mobile: hero features nhỏ gọn hơn */
@media (max-width: 600px) {
  .hero-features { gap: 8px; margin-top: 24px; }
  .hero-feat { min-width: 98px; padding: 12px 10px; }
  .hf-icon { font-size: 22px; }
  .hf-text { font-size: 11px; }
}

/* Better tap targets - 44×44 minimum (Apple HIG) */
@media (max-width: 768px) {
  .choice { min-height: 56px !important; padding: 14px 16px !important; font-size: 16px !important; }
  .c-check { width: 28px !important; height: 28px !important; }
  .btn-primary, .tier-btn, .scta-btn, .rgc-btn {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 16px 24px !important;
  }
  .nav-login-btn { min-height: 40px !important; padding: 10px 16px !important; }
  .lang-btn { min-height: 32px !important; min-width: 40px !important; }
}

/* Readable body copy on mobile */
@media (max-width: 600px) {
  body { font-size: 17px; line-height: 1.65; -webkit-text-size-adjust: 100%; }
  .hero-sub { font-size: 17px !important; line-height: 1.7 !important; }
  .tier-desc { font-size: 15px !important; line-height: 1.6 !important; }
  .qtext { font-size: 20px !important; line-height: 1.45 !important; }
  .qhelp { font-size: 14px !important; line-height: 1.6 !important; }
}

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
textarea, select {
  font-size: 16px !important;
}
@media (max-width: 600px) {
  .inp-text, .inp-area { font-size: 16px !important; }
}

/* Smoother scroll for anchor navigation */
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Fix: Input white-on-white issue on some Android */
input, textarea { background-color: #ffffff; color: #0e1218; }

/* Fix: Buttons disabled state on mobile */
button:disabled, button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Remove :hover effects on touch devices */
@media (hover: none) {
  .btn-primary:hover, .tier-btn:hover, .choice:hover,
  .nav-bell:hover, .nav-user:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Progress bar: make it sticky on mobile quiz so user knows where they are */
@media (max-width: 768px) {
  .progress-wrap {
    position: sticky;
    top: 60px;  /* Below nav bar */
    z-index: 800;
    background: var(--paper);
    padding: 10px var(--s4);
    border-bottom: 1px solid var(--border);
    margin: 0 calc(-1 * var(--s4));
  }
}

/* Better visibility for section headers when scrolling */
#section-header-bar {
  scroll-margin-top: 80px;
}

/* Landing CTA button - prominent on mobile */
@media (max-width: 600px) {
  .btn-primary {
    width: 100% !important;
    max-width: 340px !important;
    justify-content: center !important;
    font-size: 17px !important;
    padding: 18px 24px !important;
  }
  .hero-actions { flex-direction: column; gap: 10px; align-items: center; }
  .btn-secondary {
    width: 100%;
    max-width: 340px;
    text-align: center;
  }
}

/* Better form field spacing */
@media (max-width: 600px) {
  .qc_ { padding: 20px 16px !important; margin-bottom: 16px !important; }
  .choices { gap: 10px !important; }
}


/* ═══════════════════════════════════════════════════
   CHART/RADAR FIX - Prevent text overlap on mobile
   ═══════════════════════════════════════════════════ */

/* Radar chart container - fits all screens */
#report-radar, .radar-wrap, .chart-radar-wrap {
  overflow: visible !important;
  margin: 16px 0;
  padding: 12px 8px;
}
#report-radar svg, .radar-wrap svg, .chart-radar-wrap svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Radar text labels - readable, no overlap */
#report-radar svg text,
.chart-radar-wrap svg text {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500;
  pointer-events: none;
}

/* Mobile: smaller text + more padding around chart */
@media (max-width: 600px) {
  #report-radar svg text,
  .chart-radar-wrap svg text {
    font-size: 11px !important;
  }
  #report-radar, .radar-wrap, .chart-radar-wrap {
    padding: 16px 4px;
  }
}

/* Gauge chart (bán nguyệt) - fix label position */
.gauge-wrap, .gauge-svg-wrap {
  text-align: center;
  margin: 20px 0;
  padding: 8px;
  position: relative;
}
.gauge-wrap svg, .gauge-svg-wrap svg {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Bar chart - keep labels separated from bars */
.bar-chart, .chart-bars {
  margin: 16px 0;
}
.bar-chart .bar-row, .chart-bars .bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.bar-chart .bar-label, .chart-bars .bar-label {
  min-width: 80px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.bar-chart .bar-track, .chart-bars .bar-track {
  flex: 1;
  height: 24px;
  background: #f0ebe0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.bar-chart .bar-fill, .chart-bars .bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.bar-chart .bar-value, .chart-bars .bar-value {
  min-width: 50px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Waterfall chart fix */
.waterfall-chart svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}
.waterfall-chart svg text {
  font-size: 12px !important;
  font-family: -apple-system, sans-serif !important;
}
@media (max-width: 600px) {
  .waterfall-chart svg text {
    font-size: 10px !important;
  }
}

/* Score cards grid - better mobile layout */
.score-cards-grid, .scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
@media (max-width: 480px) {
  .score-cards-grid, .scores-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* Make sure no text gets cut off in cards */
.score-card {
  overflow: hidden;
  word-wrap: break-word;
}

/* PDF/print-specific: prevent chart overlap when downloading */
@media print {
  svg text { font-size: 11px !important; }
  .radar-wrap, .chart-radar-wrap { page-break-inside: avoid; }
}