/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --ink:       #0d1117;
  --ink-80:    #1c2333;
  --ink-60:    #2d3748;
  --slate:     #4a5568;
  --muted:     #718096;
  --line:      #e2e8f0;
  --bg:        #f7f8fc;
  --white:     #ffffff;

  --brand:     #1a56db;
  --brand-d:   #1a56db;
  --brand-l:   #1a56db;
  --brand-pale:#eff6ff;

  --gold:      #f59e0b;
  --gold-l:    #fbbf24;
  --gold-pale: #fffbeb;

  --green:     #059669;
  --green-l:   #10b981;
  --green-pale:#ecfdf5;

  --rose:      #e11d48;
  --rose-l:    #f43f5e;
  --rose-pale: #fff1f2;

  --amber:     #d97706;

  --font-h:    'Sora', system-ui, sans-serif;
  --font-b:    'Sora', system-ui, sans-serif;
  --font-serif:'Lora', Georgia, serif;
  --font-mono: 'Courier New', monospace;

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full:9999px;

  --sh-sm: 0 1px 4px rgba(0,0,0,.07);
  --sh-md: 0 4px 20px rgba(0,0,0,.09);
  --sh-lg: 0 12px 48px rgba(0,0,0,.13);
  --sh-xl: 0 24px 80px rgba(0,0,0,.16);

  --ease: cubic-bezier(0.16,1,0.3,1);
  --bounce: cubic-bezier(0.34,1.56,0.64,1);

  --nav-h: 64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink);overscroll-behavior-y:none}
body{font-family:var(--font-b);background:var(--ink);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit}
a{text-decoration:none;color:inherit}
ul{list-style:none}
input,select{font-family:inherit}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap-sm{max-width:720px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;border-radius:var(--r-full);border:none;cursor:pointer;
  transition:all .2s var(--ease);white-space:nowrap;font-family:var(--font-h);}
.btn:active{transform:scale(.97)}

.btn-primary{background:var(--brand);color:#fff;height:52px;padding:0 28px;font-size:.9375rem;
  box-shadow:0 4px 20px rgba(26,86,219,.35);}
.btn-primary:hover{background:var(--brand-d);transform:translateY(-1px);box-shadow:0 8px 30px rgba(26,86,219,.45)}
#nav.home-study-nav #auth-btn.btn.btn-ghost.btn-sm{
  background:#1a56db !important;
  color:#fff !important;
  border:2px solid #1a56db !important;
  box-shadow:0 4px 20px rgba(26,86,219,.35) !important;
}
#nav.home-study-nav #auth-btn.btn.btn-ghost.btn-sm:hover{
  background:var(--brand) !important;
  color:#fff !important;
  border-color:var(--brand) !important;
}
#nav.home-study-nav #mobile-auth-link.mobile-menu-link{
  background:#1a56db !important;
  color:#fff !important;
  border:1px solid #1a56db !important;
}
#nav.home-study-nav #mobile-auth-link.mobile-menu-link:hover{background:var(--brand) !important}

.btn-cta{background:var(--gold);color:var(--ink);height:60px;padding:0 40px;font-size:1.0625rem;
  box-shadow:0 6px 24px rgba(245,158,11,.4);}
.btn-cta:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 12px 36px rgba(245,158,11,.5)}
.btn-cta[data-free-text="Take a Free Practice Test"]{color:#fff}

.btn-ghost{background:transparent;color:var(--slate);border:2px solid var(--line);
  height:44px;padding:0 20px;font-size:.875rem;}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-pale)}

.btn-sm{height:40px;padding:0 20px;font-size:.8375rem;border-radius:var(--r-full)}
.btn-full{width:100%;height:56px;font-size:1rem}
.ui-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;color:currentColor}
.ui-icon svg{width:100%;height:100%;display:block}
.ui-icon-xs{width:12px;height:12px}
.ui-icon-sm{width:14px;height:14px}
.ui-icon-md{width:18px;height:18px}
.ui-icon-lg{width:22px;height:22px}
.ui-icon-xl{width:26px;height:26px}
.ui-inline{display:inline-flex;align-items:center;gap:8px}

/* NAV styles handled by shared-navbar-styles in navbar.html */

/* ============================================================
   HERO
   ============================================================ */
#landing,#landing-screen{padding-top:var(--nav-h)}
#landing-screen{background:#131822;position:relative;isolation:isolate}
#landing-screen::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 82% 54% at 50% -8%, rgba(26,86,219,.35) 0%, transparent 60%),
    radial-gradient(ellipse 42% 30% at 16% 38%, rgba(37,99,235,.12) 0%, transparent 54%),
    radial-gradient(ellipse 44% 34% at 88% 88%, rgba(245,158,11,.09) 0%, transparent 58%),
    radial-gradient(ellipse 52% 36% at 72% 58%, rgba(245,158,11,.07) 0%, transparent 56%);
}
#landing-screen::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
}
.hero{
  padding:45px 0 74px;
  background:transparent;
  position:relative;overflow:hidden;
}
.hero-content{position:relative;z-index:1;text-align:center;max-width:782px;margin:0 auto}
.hero-pill{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-full);padding:7px 18px;margin-bottom:28px;
  color:rgba(255,255,255,.9);font-size:.934rem;font-weight:600;letter-spacing:.04em}
.hero-pill span{background:var(--gold);color:#fff;padding:2px 9px;border-radius:20px;font-size:.8625rem;font-weight:800}
.hero h1{font-family:var(--font-h);font-size:clamp(2.3rem,8.05vw,4.3125rem);font-weight:800;
  line-height:1.08;letter-spacing:-.03em;color:#fff;margin-bottom:21px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{color:rgba(255,255,255,.68);font-size:clamp(1.0925rem,2.875vw,1.29375rem);
  line-height:1.7;margin-bottom:41px;max-width:621px;margin-left:auto;margin-right:auto}
.hero-sub-student{display:inline-block;padding:0 .32em;border-radius:7px;background:rgba(225,29,72,.92);color:#fff;font-weight:700}
.hero-sub-robots{position:relative;display:inline-block;color:rgba(255,255,255,.88);font-weight:700;padding-bottom:.144em}
.hero-sub-robots::after{content:'';position:absolute;left:-.05em;right:-.09em;bottom:.02em;height:.16em;background:currentColor;border-radius:999px 999px 999px 999px;transform:rotate(-3deg);transform-origin:center;opacity:.92;z-index:-1}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:46px}
.hero .btn-cta{height:69px;padding:0 46px;font-size:1.221875rem}
.hero-proof{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.hero-proof-item{text-align:center}
.hero-proof-n{font-family:var(--font-b);font-size:2.0125rem;font-weight:700;color:#fff;line-height:1}
.hero-proof-l{font-size:.8625rem;color:rgba(255,255,255,.5);margin-top:4px;font-weight:500}
.hero-proof-divider{width:1px;height:41px;background:rgba(255,255,255,.15)}

/* Mock phone preview */
.hero-phone{
  position:relative;z-index:1;max-width:391px;margin:55px auto 0;
  background:var(--white);border-radius:28px;
  box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;animation:phoneFloat 5s ease-in-out infinite;
}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.phone-bar{background:var(--ink-80);padding:12px 18px;display:flex;align-items:center;justify-content:space-between}
.phone-logo{font-size:.8rem;font-weight:800;color:#fff}
.phone-timer{font-family:var(--font-mono);font-size:.8125rem;color:var(--gold-l);font-weight:600}
.phone-body{padding:20px;position:relative}
.phone-q-label{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.phone-q{font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.5;margin-bottom:16px}
.phone-opts{display:flex;flex-direction:column;gap:8px}
.phone-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:10px;border:1.5px solid var(--line);font-size:.8125rem;color:var(--slate);font-weight:500}
.phone-opt.sel{border-color:var(--brand);background:var(--brand-pale);color:var(--brand);font-weight:700}
.phone-opt.correct{border-color:var(--green);background:var(--green-pale);color:var(--green);animation:demoPulse .35s var(--ease)}
.phone-opt.wrong{border-color:var(--rose);background:var(--rose-pale);color:var(--rose);animation:demoPulse .35s var(--ease)}
.phone-opt-k{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0}
#demo-stage,.phone-demo-analytics,.phone-demo-grading{transition:opacity .24s var(--ease),transform .24s var(--ease)}
#demo-stage{opacity:1;transform:translateY(0)}
.phone-demo-analytics{position:absolute;left:20px;right:20px;top:20px;display:flex;flex-direction:column;gap:12px;padding-top:2px;opacity:0;transform:translateY(8px);pointer-events:none}
.phone-demo-grading{position:absolute;left:20px;right:20px;top:20px;bottom:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(8px);pointer-events:none;text-align:center}
.phone-body.analytics-active #demo-stage{opacity:0;transform:translateY(-8px);pointer-events:none}
.phone-body.analytics-active .phone-demo-analytics{opacity:1;transform:translateY(0);pointer-events:auto}
.phone-body.grading-active #demo-stage,.phone-body.grading-active .phone-demo-analytics{opacity:0;transform:translateY(-8px);pointer-events:none}
.phone-body.grading-active .phone-demo-grading{opacity:1;transform:translateY(0);pointer-events:auto}
.phone-demo-spinner{width:34px;height:34px;border-radius:999px;border:3px solid #dbe4f0;border-top-color:var(--brand);animation:demoSpin .8s linear infinite}
.phone-demo-grading-title{font-size:.84rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.phone-demo-grading-copy{font-size:.75rem;line-height:1.55;color:var(--slate);max-width:210px}
@keyframes demoSpin{to{transform:rotate(360deg)}}
.phone-demo-analytics-celebrate{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#f6f8fc}
.phone-demo-analytics-icon{width:51px;height:51px;display:block;flex-shrink:0;object-fit:contain;object-position:center}
.phone-demo-analytics-message{font-size:.657rem;line-height:1.5;color:var(--slate)}
.phone-demo-analytics-message strong{display:block;font-size:.702rem;color:var(--ink);margin-bottom:2px}
.phone-demo-analytics-title{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.phone-demo-analytics-copy{font-size:.72rem;line-height:1.45;color:var(--slate)}
.phone-analytics-bars{display:flex;flex-direction:column;gap:12px}
.phone-analytics-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:#f6f8fc}
.phone-analytics-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.phone-analytics-label{font-size:.68rem;font-weight:800;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}
.phone-analytics-score{font-size:.7rem;font-weight:800;color:var(--muted);text-align:right}
.phone-analytics-track{width:100%;height:14px;border-radius:999px;background:#dbe4f0;overflow:hidden}
.phone-analytics-fill{height:100%;width:0;border-radius:999px;transition:width .55s var(--ease)}
.phone-analytics-fill.english{background:#f43f5e}
.phone-analytics-fill.math{background:#10b981}
.phone-analytics-fill.overall{background:var(--brand)}
.phone-prog-row{padding:14px 20px 20px;display:flex;align-items:center;gap:7px}
.phone-prog{flex:1;display:flex;justify-content:center;gap:7px}
.phone-prog.phone-prog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prog-dot{width:28px;height:28px;border-radius:7px;background:var(--line);color:var(--slate);cursor:pointer;transition:transform .15s var(--ease),background .2s var(--ease),color .2s var(--ease);opacity:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;border:none}
.prog-dot.done{background:var(--green);color:#fff}
.prog-dot.cur{background:var(--brand);color:#fff;transform:translateY(0)}
.prog-dot.wrong{background:var(--rose);color:#fff}
.prog-dot:active{transform:scale(.94)}
.phone-done-btn,.phone-action-btn{min-height:28px;border:none;border-radius:7px;font-size:.74rem;font-weight:800;cursor:pointer;transition:transform .15s var(--ease),background .18s var(--ease),color .18s var(--ease),opacity .18s var(--ease)}
.phone-done-btn:active,.phone-action-btn:active{transform:scale(.97)}
.phone-done-btn{height:28px;min-width:70px;padding:0 14px;background:#d9e0ea;color:#7b8797;flex-shrink:0}
.phone-done-btn.ready{background:var(--brand);color:#fff}
.phone-done-btn:disabled{cursor:not-allowed}
.phone-action-btn.retry{background:#1a56db;color:#fff}
.phone-action-btn.full{background:var(--gold);color:#fff}
.phone-exp{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:.72rem;line-height:1.45;background:var(--bg);border-left:3px solid var(--line);color:var(--slate);opacity:0;transform:translateY(4px);transition:all .22s var(--ease)}
.phone-exp.show{opacity:1;transform:translateY(0)}
.phone-exp.good{border-left-color:var(--green);background:var(--green-pale)}
.phone-exp.bad{border-left-color:var(--rose);background:var(--rose-pale)}
@keyframes demoPulse{0%{transform:scale(.98)}100%{transform:scale(1)}}

/* ============================================================
   $40M IMPACT BAND
   ============================================================ */
.impact-band {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 48px 0;
  position: relative;
}
.impact-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.impact-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 240px;
  flex-shrink: 0;
  text-align: center;
}
.impact-kicker {
  display: flex;
  justify-content: center;
  font-size: 2.28rem;
  font-weight: 800;
  letter-spacing: .0896em;
  line-height: 1;
  color: var(--brand);
  margin-bottom: 8px;
  align-self: stretch;
  width: 100%;
  text-align: center;
}
.impact-num {
  display: inline-flex;
  justify-content: center;
  min-width: 5.5ch;
  font-family: var(--font-h);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.impact-lbl {
  font-size: .875rem;
  color: rgba(240,244,255,.55);
  font-weight: 600;
  margin-top: 8px;
  max-width: 200px;
  text-align: center;
}
.impact-divider {
  width: 1px;
  height: 80px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
.impact-copy {
  flex: 1;
  min-width: 260px;
}
.impact-copy p {
  font-size: 1.0625rem;
  color: rgba(240,244,255,.72);
  line-height: 1.7;
}
.impact-copy strong {
  color: #fff;
  font-weight: 800;
}
@media(max-width: 600px) {
  .impact-inner { flex-direction: column; gap: 24px; text-align: center; }
  .impact-stat { flex-basis: auto; width: 100%; }
  .impact-divider { width: 80px; height: 1px; }
  .impact-copy { text-align: center; }
  .impact-lbl { max-width: 100%; }
}

/* ============================================================
   MARQUEE (University logos)
   ============================================================ */
.cred-section{
  padding:56px 0;
  background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.cred-section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 68% 54% at 14% 18%, rgba(37,99,235,.12) 0%, transparent 60%),
    radial-gradient(ellipse 58% 46% at 86% 82%, rgba(245,158,11,.09) 0%, transparent 62%);
}
.cred-section::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,235,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.055) 1px, transparent 1px);
  background-size:40px 40px;
}
.cred-section .wrap{position:relative;z-index:1}
.cred-label{text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:12px}
.cred-label::before,.cred-label::after{content:'';flex:1;max-width:80px;height:1px;background:var(--line)}
.marquee-outer{overflow:hidden;position:relative}
.marquee-outer::before,.marquee-outer::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.cred-section .marquee-outer::before{left:0;background:linear-gradient(90deg,#f7fbff,transparent)}
.cred-section .marquee-outer::after{right:0;background:linear-gradient(-90deg,#f0f6ff,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 52s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.school-logo-wrap{display:flex;align-items:center;justify-content:center;padding:0 32px;height:60px;flex-shrink:0}
.school-logo-text{
  font-family:var(--font-serif);font-size:1rem;font-weight:700;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(100,116,139,.38);
  letter-spacing:.04em;white-space:nowrap;
  filter:grayscale(1);opacity:.5;
  transition:opacity .3s,color .3s,-webkit-text-stroke .3s;
  user-select:none;
}
.school-logo-wrap:hover .school-logo-text{opacity:.9;-webkit-text-stroke:1.5px rgba(26,86,219,.6)}
/* Shield SVG logos, purely decorative grayscale */
.school-shield{width:44px;height:52px;opacity:.28;filter:grayscale(1);flex-shrink:0}

/* ============================================================
   FEATURES
   ============================================================ */
.section{padding:88px 0;position:relative}
.section-bg{background:var(--bg)}
.landing-dark-section .sec-head,
.landing-dark-section .sec-sub,
.landing-dark-section .test-name,
.landing-dark-section .solution-card h3,
.landing-dark-section .faq-btn,
.landing-dark-section .faq-body-inner{color:#f0f4ff}
.landing-dark-section .sec-eyebrow{color:var(--gold-l)}
.landing-dark-section .sec-sub,
.landing-dark-section .faq-body-inner,
.landing-dark-section .test-body,
.landing-dark-section .test-meta,
.landing-dark-section .solution-card p{color:rgba(240,244,255,.62)}
.landing-dark-section .feat-card,
.landing-dark-section .test-card,
.landing-dark-section .solution-card,
.landing-dark-section .faq-item{
  background:rgba(20,28,43,.82);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
}
.landing-dark-section .feat-card:hover,
.landing-dark-section .test-card:hover,
.landing-dark-section .solution-card:hover{border-color:rgba(59,130,246,.34);box-shadow:0 18px 52px rgba(0,0,0,.24)}
.landing-dark-section .feat-card h3{color:#f0f4ff}
.landing-dark-section .feat-card p{color:rgba(240,244,255,.62)}
.landing-dark-section .faq-btn:hover{background:rgba(255,255,255,.04)}
.landing-dark-section .faq-arrow{background:rgba(255,255,255,.08);color:rgba(240,244,255,.68)}
.landing-dark-section .faq-btn.open{color:#f0f4ff}
.landing-dark-section .faq-btn.open .faq-arrow{background:rgba(26,86,219,.22);color:var(--brand)}
.landing-dark-section .solution-preview{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.faq-section{background:transparent}
.how-section{
  background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.how-section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 18% 12%, rgba(37,99,235,.14) 0%, transparent 58%),
    radial-gradient(ellipse 62% 52% at 84% 86%, rgba(245,158,11,.10) 0%, transparent 62%);
}
.how-section::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size:40px 40px;
}
.how-section .wrap{position:relative;z-index:1}
.sec-eyebrow{display:inline-flex;align-items:center;color:var(--brand);
  font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.sec-head{font-family:var(--font-h);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;
  line-height:1.12;letter-spacing:-.025em;margin-bottom:14px}
.sec-sub{color:var(--muted);font-size:1rem;line-height:1.7;max-width:560px}
.section-center{text-align:center}
.section-center .sec-sub{margin:0 auto}

.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:52px}
.feat-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:all .25s var(--ease)}
.feat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:rgba(26,86,219,.15)}
.feat-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px}
.fi-blue{color:var(--brand)}
.fi-gold{color:var(--amber)}
.fi-green{color:var(--green)}
.fi-rose{color:var(--rose)}
.feat-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.feat-card p{font-size:.875rem;color:var(--muted);line-height:1.65}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:52px}
.how-step{text-align:center;position:relative}
.how-step::after{content:'→';position:absolute;right:-20px;top:22px;font-size:1.25rem;color:var(--line);
  display:none}
@media(min-width:768px){.how-step::after{display:block}}
.how-step:last-child::after{display:none!important}
.how-num{width:52px;height:52px;background:var(--brand);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.125rem;
  margin:0 auto 16px;box-shadow:0 4px 16px rgba(26,86,219,.35)}
.how-step h3{font-size:.9375rem;font-weight:700;margin-bottom:8px}
.how-step p{font-size:.875rem;color:var(--muted);line-height:1.6}
@media(max-width:640px){.how-steps{grid-template-columns:1fr}}

/* ============================================================
   PRICING  ← THE CENTREPIECE
   ============================================================ */
.pricing{background:transparent;padding:96px 0;position:relative}
.pricing .sec-eyebrow{color:var(--gold-l)}
.pricing .sec-head{color:#fff}
.pricing .sec-sub{color:rgba(255,255,255,.55)}

.billing-toggle{
  display:inline-flex;align-items:center;gap:0;
  background:rgba(255,255,255,.08);border-radius:var(--r-full);
  padding:4px;margin:0;
}
.billing-toggle label{
  padding:9px 22px;border-radius:var(--r-full);font-size:.8375rem;font-weight:700;
  color:rgba(255,255,255,.55);cursor:pointer;transition:all .22s;white-space:nowrap;
}
.billing-toggle input[type=radio]{display:none}
.billing-toggle input:checked + label{background:var(--brand);color:#fff;box-shadow:var(--sh-sm)}
.billing-toggle label.billing-toggle-trial{background:rgba(245,158,11,.16);color:var(--gold-l);box-shadow:inset 0 0 0 1px rgba(245,158,11,.26)}
.billing-toggle input#b-trial:checked + label{background:var(--gold);color:#fff;box-shadow:0 8px 24px rgba(245,158,11,.28)}
.save-chip{display:inline-block;background:var(--gold);color:var(--ink);font-size:.7rem;
  font-weight:800;padding:2px 8px;border-radius:20px;margin-left:6px}
.pricing-toggle-row{
  display:flex;justify-content:center;align-items:center;gap:18px;
  flex-wrap:wrap;margin-top:32px;
}
.billing-toggle-trial-wrap{margin-left:10px}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;align-items:stretch}
.price-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);padding:32px;position:relative;
  transition:all .25s var(--ease);height:100%;display:flex;flex-direction:column;
}
.price-card:hover{background:rgba(255,255,255,.09);transform:translateY(-3px)}
.price-card.trial-focus{border-color:rgba(245,158,11,.42);box-shadow:0 10px 34px rgba(245,158,11,.18);transform:translateY(-3px)}
.price-card.free-tier .pf-item.locked{color:rgba(254,202,202,.94)}
.price-card.featured{
  background:var(--brand);border-color:var(--brand-l);
  box-shadow:0 8px 40px rgba(26,86,219,.5);
  transform:scale(1.03);
}
.price-card.featured:hover{transform:scale(1.03) translateY(-3px)}
.price-card.featured.annual-tier{
  animation:phoneFloat 5s ease-in-out infinite;
  box-shadow:0 16px 48px rgba(26,86,219,.46);
}
.price-card.featured.annual-tier:hover{
  background:#2563eb;
  box-shadow:0 22px 58px rgba(26,86,219,.58);
}
.best-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--ink);font-size:.7rem;font-weight:800;
  padding:4px 16px;border-radius:var(--r-full);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.price-tier{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:10px}
.price-featured .price-tier{color:rgba(255,255,255,.8)}
.price-per-week{font-family:var(--font-h);font-size:2.5rem;font-weight:800;color:#fff;line-height:1}
.price-per-week sup{font-size:1.1rem;vertical-align:super;font-weight:700}
.price-unit{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.56);margin-top:8px}
.price-billed{font-size:.8rem;color:rgba(255,255,255,.45);margin-top:8px}
.price-billed strong{color:rgba(255,255,255,.75)}
.price-divider{height:1px;background:rgba(255,255,255,.1);margin:24px 0}
.price-features{display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
.pf-item{display:flex;align-items:flex-start;gap:9px;font-size:.875rem;color:rgba(255,255,255,.75)}
.pf-check{width:17px;height:17px;flex-shrink:0;margin-top:2px}
.pf-check.y{color:var(--green-l)}
.pf-check.n{color:rgba(255,255,255,.2)}
.price-card.free-tier .pf-check.n{color:#f43f5e}
.pf-item.locked{color:rgba(255,255,255,.3)}
.btn-price-solid{width:100%;height:48px;background:#fff;color:var(--brand);
  font-weight:800;border-radius:var(--r-full);border:none;font-size:.9rem;cursor:pointer;
  transition:all .2s;font-family:var(--font-h)}
.btn-price-solid:hover{background:var(--brand-pale);transform:translateY(-1px)}
.btn-price-ghost{width:100%;height:48px;background:transparent;color:rgba(255,255,255,.8);
  font-weight:700;border-radius:var(--r-full);border:2px solid rgba(255,255,255,.2);
  font-size:.9rem;cursor:pointer;transition:all .2s;font-family:var(--font-h)}
.btn-price-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff}
.btn-price-trial{width:100%;height:48px;background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#fff;
  font-weight:800;border-radius:var(--r-full);border:none;font-size:.9rem;cursor:pointer;transition:all .2s;font-family:var(--font-h);
  box-shadow:0 8px 22px rgba(245,158,11,.26), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-price-trial:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.28)}
.price-note{text-align:center;margin-top:20px;font-size:.8125rem;color:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;gap:8px}

@media(max-width:1024px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .price-grid{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}
  .price-card.featured{transform:scale(1)}
  .price-card.featured.annual-tier{animation:none;transform:scale(1)}
}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.solution-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.solution-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:rgba(26,86,219,.2)}
.solution-card h3{font-size:.92rem;font-weight:800;margin-bottom:7px}
.solution-card p{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:10px}
.solution-preview{height:84px;border-radius:12px;background:linear-gradient(180deg,#0f172a,#1e293b);padding:10px;display:flex;flex-direction:column;gap:7px;overflow:hidden;position:relative}
.solution-preview::before{content:'';position:absolute;inset:-30% -20%;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.28),transparent 45%);opacity:.45;transition:opacity .25s var(--ease)}
.solution-card:hover .solution-preview::before{opacity:.8}
.sp-row{height:8px;border-radius:5px;background:rgba(148,163,184,.28);position:relative;overflow:hidden}
.sp-row::after{content:'';position:absolute;left:-45%;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
.solution-card:hover .sp-row::after{animation:scan 1.1s linear infinite}
.sp-chip{width:42%;height:12px;border-radius:999px;background:rgba(16,185,129,.8)}
.solution-card.blank .solution-preview{display:flex;align-items:center;justify-content:center;color:rgba(226,232,240,.6);font-size:.78rem;font-weight:700}
@keyframes scan{from{left:-45%}to{left:120%}}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.test-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:all .22s var(--ease)}
.test-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.test-stars{color:var(--gold);display:flex;align-items:center;gap:4px;margin-bottom:12px}
.test-body{font-size:.9rem;color:var(--slate);line-height:1.65;margin-bottom:18px;font-style:italic}
.test-author{display:flex;align-items:center;gap:12px}
.test-avi{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.8125rem;color:#fff;flex-shrink:0}
.test-name{font-size:.875rem;font-weight:700;color:var(--ink)}
.test-meta{font-size:.775rem;color:var(--muted)}
@media(max-width:980px){.test-grid,.solution-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.test-grid,.solution-grid{grid-template-columns:1fr}}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  padding:80px 0;text-align:center;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand) 100%);
  position:relative;overflow:hidden;
}
.cta-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(245,158,11,.18) 0%,transparent 65%)}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;margin-bottom:14px;position:relative}
.cta-band p{color:rgba(255,255,255,.72);font-size:1rem;margin-bottom:32px;position:relative}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:660px;margin:48px auto 0;display:flex;flex-direction:column;gap:8px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-size:.9375rem;font-weight:600;color:var(--ink);
  background:none;cursor:pointer;text-align:left;transition:background .15s}
.faq-btn:hover{background:var(--bg)}
.faq-btn.open{color:var(--brand)}
.faq-arrow{width:22px;height:22px;border-radius:50%;background:var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.875rem;
  flex-shrink:0;transition:transform .25s var(--ease),background .15s;color:var(--muted)}
.faq-btn.open .faq-arrow{transform:rotate(180deg);background:var(--brand-pale);color:var(--brand)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-body.open{max-height:300px}
.faq-body-inner{padding:0 22px 18px;font-size:.875rem;color:var(--muted);line-height:1.7}

/* ============================================================
   MODALS
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:1000;background:rgba(13,17,23,.7);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:linear-gradient(180deg,#162033 0%,#0f1728 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  width:100%;max-width:480px;max-height:92vh;overflow-y:auto;
  transform:translateY(20px) scale(.97);transition:transform .35s var(--ease)}
.overlay.open .modal{transform:translateY(0) scale(1)}
.modal.paywall-modal-shell{max-width:430px;max-height:84vh;overflow:hidden;position:relative}
.modal-hd{padding:28px 28px 0;display:flex;justify-content:space-between;align-items:flex-start}
.modal-hd-text h2{font-size:1.25rem;font-weight:800;color:#f0f4ff}
.modal-hd-text p{font-size:.875rem;color:rgba(240,244,255,.58);margin-top:4px}
.modal-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(240,244,255,.58);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:all .15s;flex-shrink:0;margin-top:2px}
.modal-close:hover{background:rgba(255,255,255,.14);color:#fff}
.modal-bd{padding:24px 28px}
.modal-ft{padding:0 28px 28px;display:flex;justify-content:flex-end;gap:10px}
.modal .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(240,244,255,.74)}
.modal .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff}
.modal-eyebrow-inline{display:inline-flex;align-items:center;gap:8px;color:inherit}
.modal-eyebrow-inline svg{width:14px;height:14px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modal-actions-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
.modal-actions-even .btn{width:100%;min-height:46px;justify-content:center;padding-inline:14px;text-align:center}

/* Onboarding step dots */
.step-dots{display:flex;gap:6px;margin-bottom:24px}
.step-dot{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .3s}
.step-dot.on{background:var(--brand)}

/* Form */
.fg{margin-bottom:18px}
.fl{display:block;font-size:.8375rem;font-weight:700;color:rgba(240,244,255,.74);margin-bottom:7px}
.fi{width:100%;height:48px;padding:0 14px;
  border:1.5px solid rgba(255,255,255,.12);border-radius:var(--r-md);
  font-size:.9375rem;color:#f0f4ff;background:rgba(255,255,255,.05);
  transition:border-color .18s,box-shadow .18s;outline:none}
.fi:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.fi-sel{width:100%;height:48px;padding:0 14px;
  border:1.5px solid rgba(255,255,255,.12);border-radius:var(--r-md);
  font-size:.9375rem;color:#f0f4ff;background:rgba(255,255,255,.05);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .18s,box-shadow .18s;outline:none}
.fi-sel:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,86,219,.1)}

/* Section picker */
.sec-pick{display:flex;flex-direction:column;gap:10px}
.sec-opt{border:2px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
  cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:12px}
.sec-opt:hover{border-color:var(--brand-l);background:rgba(26,86,219,.14)}
.sec-opt.sel{border-color:var(--brand);background:rgba(26,86,219,.18)}
.sec-opt-icon{flex-shrink:0;margin-top:1px;color:#93c5fd}
.sec-opt h4{font-size:.9375rem;font-weight:700;color:#f0f4ff;margin-bottom:3px}
.sec-opt.sel h4{color:var(--brand)}
.sec-opt p{font-size:.8125rem;color:rgba(240,244,255,.58)}

/* Ready summary */
.ready-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:11px}
.rb-row{display:flex;align-items:center;gap:10px;font-size:.875rem}
.rb-lbl{min-width:90px;color:rgba(240,244,255,.56);font-weight:500}
.rb-val{font-weight:700;color:#f0f4ff}
.rb-chip{background:var(--brand-pale);color:var(--brand);padding:2px 12px;border-radius:var(--r-full);font-size:.8125rem;font-weight:800}
.tip{background:linear-gradient(135deg,rgba(26,86,219,.18),rgba(15,23,40,.9));border:1px solid rgba(59,130,246,.22);
  border-radius:var(--r-md);padding:14px 16px;margin-top:14px;font-size:.8375rem;color:rgba(240,244,255,.72);line-height:1.6}
.tip strong{color:var(--brand)}

/* Paywall modal */
.paywall-icon{width:72px;height:72px;background:transparent;
  border-radius:0;display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;box-shadow:none;color:#fff}
.paywall-modal{text-align:center}
.paywall-modal h2{font-size:1.375rem;font-weight:800;margin-bottom:10px}
.paywall-modal p{font-size:.9rem;color:rgba(240,244,255,.62);line-height:1.65;margin-bottom:24px}
.paywall-perks{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;text-align:left}
.pw-perk{display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:#f0f4ff}
.pw-perk-icon{width:28px;display:inline-flex;align-items:center;justify-content:center;color:#fbbf24}
.paywall-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(240,244,255,.62);font-size:1rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.paywall-close:hover{color:#fff;border-color:rgba(255,255,255,.24)}

/* Leave test modal */
.leave-test-modal{max-width:396px}
.leave-test-modal .modal-hd,
.action-confirm-modal.is-compact .modal-hd{padding:24px 24px 0}
.leave-test-modal .modal-bd,
.action-confirm-modal.is-compact .modal-bd{padding:14px 24px 18px}
.leave-test-modal .modal-ft,
.action-confirm-modal.is-compact .modal-ft{padding:0 24px 24px}
.leave-test-modal .modal-hd-text p,
.action-confirm-modal.is-compact .modal-hd-text p{margin:0}
.leave-test-copy h2{font-size:1.25rem;font-weight:800;color:#f0f4ff;margin-bottom:8px}
.leave-test-copy p{font-size:.9rem;line-height:1.65;color:rgba(240,244,255,.62)}
.leave-test-copy .leave-test-alert-title{position:relative;display:flex;align-items:center;justify-content:center;color:#fca5a5;text-align:center}
.leave-test-copy .leave-test-alert-title-text{display:block;width:100%;text-align:center}
.leave-test-copy .leave-test-alert{width:24px;height:24px;border-radius:999px;border:1.5px solid rgba(244,63,94,.72);display:inline-flex;align-items:center;justify-content:center;
  color:#fb7185;font-size:.95rem;font-weight:900;line-height:1;flex-shrink:0}
.leave-test-copy .leave-test-alert-title .leave-test-alert{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.action-confirm-modal{max-width:460px}
.action-confirm-modal.is-compact{max-width:404px}
.action-confirm-icon{width:56px;height:56px;border-radius:0;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--gold);font-size:1.5rem;font-weight:900;
  box-shadow:none;margin-bottom:16px}
.action-confirm-copy p{font-size:.9rem;line-height:1.65;color:rgba(240,244,255,.62)}
.action-confirm-note{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(26,86,219,.12);
  border:1px solid rgba(59,130,246,.24);font-size:.8125rem;font-weight:700;color:#93c5fd}
.action-confirm-note.hidden{display:none}
.action-confirm-icon.hidden,.action-confirm-close.hidden{display:none}
.action-confirm-confirm-btn.is-gold{background:var(--gold);color:var(--ink)}
.action-confirm-confirm-btn.is-gold:hover{background:#fbbf24}
.action-confirm-confirm-btn.is-danger{background:#7f1d1d;border-color:#be123c;color:#fff}
.action-confirm-confirm-btn.is-danger:hover{background:#9f1239}

/* ============================================================
   LOADING
   ============================================================ */
#loading-screen{position:fixed;inset:0;z-index:1100;background:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;display:none}
#loading-screen.show{display:flex}
.spin{width:52px;height:52px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes budyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.load-msg{font-size:.9375rem;font-weight:600;color:var(--muted)}

/* ============================================================
   TEST ENGINE
   ============================================================ */
#test-screen{position:fixed;inset:0;z-index:950;display:none;isolation:isolate;
  background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%)}
#test-screen.show{display:flex;flex-direction:column}
#test-screen::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;
  background-image:linear-gradient(rgba(37,99,235,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.045) 1px,transparent 1px);
  background-size:32px 32px}
#test-screen::after{content:'';position:absolute;right:24px;bottom:94px;width:72px;height:72px;pointer-events:none;z-index:-1;
  background:url('/assets/budy-logo.png') center/contain no-repeat;opacity:.12;animation:budyFloat 6s ease-in-out infinite}
.tb{height:70px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;flex-shrink:0;position:relative;
  border-bottom:1px solid rgba(148,163,184,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(15,23,42,.06)}
.tb-left,.tb-right{display:flex;align-items:center;gap:12px;min-width:0}
.tb-logo{display:inline-flex;align-items:center;gap:8px;font-family:'Sora',system-ui,sans-serif;font-size:1.125rem;font-weight:800;color:#11203d;line-height:1;text-decoration:none;min-width:0}
.tb-logo-wordmark{display:inline-flex;align-items:baseline;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.tb-logo-study{color:#f59e0b}
.tb-logo-img{width:28px;height:28px;object-fit:contain;object-position:center;display:block;flex-shrink:0}
.tb-sec{font-size:.75rem;font-weight:700;color:#36517a;
  padding:3px 10px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.1);border-radius:var(--r-full)}
.tb-timer{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:#1d4ed8;
  display:flex;align-items:center;gap:0;position:absolute;left:50%;transform:translateX(-50%)}
.tb-timer-icon,.tb-timer-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}
.tb-timer-icon{margin-right:4px}
#timer-txt{display:inline-block;min-width:5ch;text-align:center;margin-right:4px}
.tb-timer-btn{padding:0;border:none;background:transparent;color:#1d4ed8;cursor:pointer;transition:opacity .15s,transform .15s}
.tb-timer-btn:hover{opacity:.85}
.tb-timer-btn:active{transform:scale(.94)}
.tb-timer-icon svg,.tb-timer-btn svg{width:14px;height:14px;display:block}
.tb-timer.warn{color:#fca5a5;animation:pulse 1s ease-in-out infinite}
.tb-timer.warn .tb-timer-btn{color:#fca5a5}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.tb-prog{width:80px;height:4px;background:rgba(26,86,219,.12);border-radius:2px;overflow:hidden}
.tb-prog-fill{height:100%;background:linear-gradient(90deg,#1a56db 0%,#60a5fa 100%);border-radius:2px;transition:width .4s}
.tb-submit{font-size:.75rem;font-weight:700;color:#36517a;padding:6px 12px;border-radius:20px;border:1px solid rgba(37,99,235,.18);background:rgba(255,255,255,.9);cursor:pointer;transition:all .15s}
.tb-submit:hover{color:#1a56db;background:#fff;border-color:rgba(37,99,235,.34)}

.test-body{flex:1;display:flex;min-height:0;background:transparent}
.q-nav{width:180px;flex-shrink:0;background:rgba(255,255,255,.72);border-right:1px solid rgba(148,163,184,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow-y:auto;overflow-x:hidden;padding:14px;transition:width .2s var(--ease),padding .2s var(--ease),border-color .2s var(--ease);
  position:relative}
.q-nav.collapsed{width:0;padding:0;border-right-color:transparent;overflow:visible;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.qn-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.q-nav.collapsed .qn-head{justify-content:center}
.qn-title{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#64748b;margin-bottom:10px}
.q-nav .qn-title{margin-bottom:0}
.q-nav.collapsed .qn-title{display:none}
.qn-toggle{height:26px;min-width:46px;padding:0 10px;border-radius:999px;border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.88);color:#36517a;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.q-nav.collapsed .qn-toggle{min-width:40px;padding:0 8px}
.qn-toggle{width:34px;min-width:34px;height:34px;padding:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.q-nav.collapsed .qn-toggle{width:34px;min-width:34px;padding:0}
.qn-toggle svg{width:16px;height:16px;display:block}
.q-nav.collapsed .qn-head{position:absolute;left:10px;top:12px;z-index:30}
.qn-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:10px 8px;width:100%;max-width:164px;margin:0 auto}
.qn-btn{width:28px;min-width:28px;height:28px;min-height:28px;border-radius:8px;font-size:.7rem;font-weight:700;
  cursor:pointer;border:none;box-sizing:border-box;transition:all .15s;
  background:#e2e8f0;color:#475569;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.qn-btn.complete{background:rgba(16,185,129,.18);color:#047857;box-shadow:inset 0 0 0 1px rgba(16,185,129,.35)}
.qn-btn.cur{background:rgba(245,158,11,.22);color:#b45309;box-shadow:inset 0 0 0 1px rgba(245,158,11,.45)}
.qn-btn.admin-future{background:rgba(225,29,72,.16);color:#be123c;box-shadow:inset 0 0 0 1px rgba(225,29,72,.3)}
.qn-btn.locked{background:#cbd5e1;color:#94a3b8;box-shadow:inset 0 0 0 1px rgba(148,163,184,.35);cursor:not-allowed;pointer-events:none}
.qn-btn.flag{background:#fef3c7;color:var(--amber);outline:2px solid var(--amber);outline-offset:0}
.qn-legend{margin-top:16px;display:flex;flex-direction:column;gap:7px;max-width:164px;margin-left:auto;margin-right:auto}
.q-nav.collapsed .qn-grid,.q-nav.collapsed .qn-legend{display:none}
.leg-row{display:flex;align-items:center;gap:7px;font-size:.7rem;color:#64748b}
.leg-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.leg-dot.complete{background:rgba(16,185,129,.6);border:1px solid rgba(16,185,129,.65)}
.leg-dot.current{background:rgba(245,158,11,.6);border:1px solid rgba(245,158,11,.7)}
.leg-dot.locked{background:#cbd5e1;border:1px solid rgba(148,163,184,.6)}
.leg-dot.admin{background:rgba(225,29,72,.45);border:1px solid rgba(225,29,72,.6)}

.q-main{flex:1;overflow-y:auto;padding:28px 24px;position:relative}
.q-nav.collapsed + .q-main{padding-left:78px}
.q-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px;padding:14px 16px;border-radius:22px;
  background:rgba(255,255,255,.84);border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 38px rgba(15,23,42,.06)}
.q-badge{background:var(--brand-pale);color:var(--brand);font-size:.75rem;font-weight:800;
  padding:4px 12px;border-radius:var(--r-full)}
.q-skill{font-size:.75rem;color:#64748b;font-weight:700}
.q-passage{background:rgba(255,255,255,.92);border-left:4px solid var(--brand);border-radius:20px;
  padding:18px 20px;margin-bottom:20px;font-size:.9rem;line-height:1.75;color:#334155;
  max-height:220px;overflow-y:auto;border:1px solid rgba(148,163,184,.14);box-shadow:0 18px 38px rgba(15,23,42,.06)}
.q-text{font-size:1rem;font-weight:700;color:#10203a;line-height:1.65;margin-bottom:22px}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opt{display:flex;align-items:flex-start;gap:12px;border:2px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;cursor:pointer;transition:all .15s;font-size:.9rem;line-height:1.5;
  color:#334155;position:relative;overflow:hidden;background:rgba(255,255,255,.9);border-color:rgba(148,163,184,.22);box-shadow:0 14px 30px rgba(15,23,42,.05)}
.q-opt:hover{border-color:rgba(26,86,219,.34);background:#fff}
.q-opt.sel{border-color:var(--brand);background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%);color:#0f172a;box-shadow:0 18px 34px rgba(26,86,219,.12)}
.q-opt.disabled{opacity:.62;cursor:not-allowed;background:rgba(226,232,240,.55);border-color:rgba(148,163,184,.3)}
.q-opt.disabled:hover{border-color:rgba(148,163,184,.3);background:rgba(226,232,240,.55)}
.q-opt-k{min-width:26px;height:26px;border-radius:50%;border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;
  flex-shrink:0;color:#64748b;background:rgba(241,245,249,.9)}
.q-opt.sel .q-opt-k{border-color:var(--brand);color:var(--brand)}
.q-spr-inp{width:100%;max-width:260px;height:50px;padding:0 14px;
  border:2px solid rgba(148,163,184,.18);border-radius:18px;font-size:1.125rem;
  font-family:var(--font-mono);color:var(--ink);background:rgba(255,255,255,.9);outline:none;transition:border-color .18s,box-shadow .18s;box-shadow:0 14px 28px rgba(15,23,42,.05)}
.q-spr-inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.q-spr-lbl{font-size:.8125rem;color:#64748b;margin-bottom:9px;font-weight:700}

/* Ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(26,86,219,.12);
  transform:scale(0);animation:rip .5s var(--ease);pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

.test-ft{padding:12px 24px;border-top:1px solid rgba(148,163,184,.18);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  flex-wrap:wrap;gap:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden}
#test-screen.q-nav-open .test-ft::before{content:'';position:absolute;left:0;top:0;bottom:0;width:180px;background:rgba(255,255,255,.72);border-right:1px solid rgba(148,163,184,.16);z-index:0}
.test-ft>*{position:relative;z-index:1}
.flag-btn{display:flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;
  color:#64748b;padding:7px 14px;border-radius:var(--r-full);
  border:1.5px solid rgba(148,163,184,.22);background:rgba(255,255,255,.88);transition:all .15s}
.flag-btn:hover,.flag-btn.on{color:var(--amber);border-color:var(--amber);background:var(--gold-pale)}
.test-nav-btns{display:flex;align-items:center;gap:8px}
.test-prog-txt{font-size:.8125rem;color:#64748b}
.test-color-key{display:flex;align-items:center;gap:14px;font-size:.75rem;color:#64748b;flex:1 1 100%;padding-top:2px}
.test-color-key .key-item{display:inline-flex;align-items:center;gap:6px}
.test-color-key .key-dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.test-color-key .key-dot.complete{background:rgba(16,185,129,.72);border:1px solid rgba(16,185,129,.8)}
.test-color-key .key-dot.current{background:rgba(245,158,11,.72);border:1px solid rgba(245,158,11,.85)}
.admin-test-tools{display:flex;align-items:center;gap:10px;flex:1 1 280px;min-width:0}
.admin-test-tools .btn{height:36px;min-height:36px;padding:0 12px;flex-shrink:0}
.admin-adaptive-note{font-size:.74rem;font-weight:700;color:#1e3a8a;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:999px;padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:600px){
  .tb{height:auto;padding:12px 14px 10px;flex-wrap:wrap;align-items:flex-start}
  .tb-left,.tb-right{width:100%;justify-content:space-between}
  .tb-right{order:2}
  .tb-timer{position:static;left:auto;transform:none;order:3;width:100%;justify-content:center;padding-top:2px}
  .q-nav{display:none}
  .q-main{padding:20px 16px}
  .q-nav.collapsed + .q-main{padding-left:16px}
  .q-hd{padding:12px 14px;border-radius:18px}
  .q-opt{padding:12px 14px}
  .test-ft{padding:10px 16px}
  #test-screen.q-nav-open .test-ft::before{display:none}
  .admin-test-tools{order:3;flex:1 1 100%;justify-content:space-between}
  .admin-adaptive-note{max-width:100%;white-space:normal;border-radius:14px;line-height:1.35}
  .test-color-key{order:4;flex:1 1 100%;justify-content:flex-start;padding-top:0}
  #test-screen::after{right:14px;bottom:88px;width:56px;height:56px}
}

/* ============================================================
   RESULTS
   ============================================================ */
#results-screen{display:none;min-height:100vh;background:var(--bg);padding-top:var(--nav-h)}
#results-screen.show{display:block}
.res-header{background:var(--ink);padding:44px 0 72px;position:relative;overflow:hidden}
.res-header::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(26,86,219,.35) 0%,transparent 65%)}
.res-header h1{color:#fff;font-size:clamp(1.4rem,4vw,2rem);font-weight:800;text-align:center;position:relative}
.res-header p{color:rgba(255,255,255,.55);text-align:center;margin-top:6px;position:relative}

.res-score-card{max-width:420px;margin:-52px auto 0;position:relative;z-index:10;
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-xl);padding:36px;text-align:center}
.big-num{font-family:var(--font-h);font-size:4.5rem;font-weight:800;line-height:1;margin-bottom:6px}
.big-num.gr{color:var(--green)}
.big-num.bl{color:var(--brand)}
.big-num.or{color:var(--amber)}
.score-lbl{font-size:.8125rem;color:var(--muted);margin-bottom:12px}
.pct-badge{display:inline-block;background:var(--brand-pale);color:var(--brand);
  font-size:.875rem;font-weight:800;padding:5px 18px;border-radius:var(--r-full);margin-bottom:20px}
.score-ticks{display:flex;gap:28px;justify-content:center}
.score-tick-n{font-size:1.25rem;font-weight:800;color:var(--ink)}
.score-tick-l{font-size:.75rem;color:var(--muted);margin-top:2px}

.res-content{max-width:820px;margin:32px auto;padding:0 20px}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media(max-width:640px){.res-grid{grid-template-columns:1fr}}
.res-card{background:#fff;border-radius:var(--r-lg);padding:24px;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.res-card h3{font-size:.9375rem;font-weight:800;margin-bottom:16px;color:var(--ink)}

.skill-row{margin-bottom:12px}
.skill-row-hd{display:flex;justify-content:space-between;font-size:.8125rem;margin-bottom:5px}
.skill-row-nm{font-weight:700;color:var(--ink-60)}
.skill-row-sc{font-weight:800;color:var(--ink)}
.skill-track{height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.skill-fill{height:100%;border-radius:4px;width:0;transition:width 1.2s var(--ease)}

/* Review */
.review-item{background:#fff;border-radius:var(--r-md);padding:18px 20px;
  border:1px solid var(--line);margin-bottom:10px}
.rev-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rev-badge{font-size:.7rem;font-weight:800;padding:2px 10px;border-radius:var(--r-full)}
.rev-badge.c{background:var(--green-pale);color:var(--green)}
.rev-badge.w{background:var(--rose-pale);color:var(--rose)}
.rev-badge.s{background:var(--bg);color:var(--muted)}
.rev-q{font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.5}
.rev-ans{display:flex;gap:20px;margin-top:8px;font-size:.8125rem;flex-wrap:wrap}
.ra-yours{color:var(--rose);font-weight:700}
.ra-yours.ok{color:var(--green)}
.ra-correct{color:var(--green);font-weight:700}

/* Explanation with paywall blur */
.exp-wrap{margin-top:10px;position:relative}
.exp-btn{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;
  color:var(--brand);background:var(--brand-pale);border:none;border-radius:var(--r-full);
  padding:5px 14px;cursor:pointer;transition:all .15s;font-family:var(--font-h)}
.exp-btn:hover{background:var(--brand);color:#fff}
.exp-btn:disabled{opacity:.5;cursor:default}
.exp-box{margin-top:10px;background:var(--bg);border-radius:var(--r-md);padding:12px 16px;
  font-size:.8375rem;color:var(--slate);line-height:1.7;border-left:3px solid var(--brand)}
/* Locked explanation */
.exp-locked{position:relative;margin-top:10px}
.exp-locked-preview{
  font-size:.8375rem;color:var(--slate);line-height:1.7;padding:12px 16px;
  border-radius:var(--r-md);border-left:3px solid var(--line);background:var(--bg);
  filter:blur(5px);user-select:none;pointer-events:none}
.exp-lock-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.75);backdrop-filter:blur(2px);border-radius:var(--r-md);gap:8px}
.exp-lock-icon{display:inline-flex;align-items:center;justify-content:center;color:#fbbf24}
.exp-lock-text{font-size:.8125rem;font-weight:700;color:var(--ink-60)}
.exp-unlock-btn{font-size:.75rem;font-weight:800;color:var(--brand);background:var(--brand-pale);
  padding:4px 14px;border-radius:var(--r-full);border:none;cursor:pointer;
  font-family:var(--font-h);transition:all .15s}
.exp-unlock-btn:hover{background:var(--brand);color:#fff}

/* Free test limit banner */
.limit-banner{
  background:linear-gradient(135deg,var(--gold-pale),#fef9c3);border:1px solid #fde68a;
  border-radius:var(--r-lg);padding:18px 20px;margin-bottom:24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.limit-banner-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#b45309}
.limit-banner-text h4{font-size:.9375rem;font-weight:800;color:var(--ink);margin-bottom:3px}
.limit-banner-text p{font-size:.8125rem;color:var(--slate)}
.limit-banner-actions{display:flex;gap:8px;margin-left:auto}

.res-actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* ============================================================
  MY ACCOUNT
  ============================================================ */
#dash-screen{display:none;min-height:100vh;background:#131822;padding-top:var(--nav-h);color:#f0f4ff}
#dash-screen.show{display:block}
#dash-screen::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 50% -5%, rgba(26,86,219,.35) 0%, transparent 60%),radial-gradient(ellipse 40% 35% at 90% 100%, rgba(245,158,11,.08) 0%, transparent 60%)}
#dash-screen::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px}

#dash-screen .dash-hd,#dash-screen .dash-body{position:relative;z-index:1}
#dash-screen .dash-hd{padding-top:calc(64px + 36px);padding-bottom:0;position:relative;overflow:hidden}
#dash-screen .dash-hd-inner{display:flex;flex-direction:column;gap:20px}
#dash-screen .dash-greeting{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
#dash-screen .dash-greet{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;line-height:1.05;color:#f0f4ff;letter-spacing:-.03em}

#dash-screen .acct-status{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
#dash-screen .acct-status.free{background:rgba(5,150,105,.15);border:1px solid rgba(16,185,129,.25);color:#10b981}
#dash-screen .acct-status.pro{background:rgba(26,86,219,.18);border:1px solid rgba(59,130,246,.3);color:var(--brand)}
#dash-screen .acct-status-icon{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor;animation:acctPulse 1.5s ease infinite;line-height:1;text-indent:-9999px;overflow:hidden}
@keyframes acctPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

#dash-screen .acct-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:24px;max-width:560px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.03);overflow:visible}
#dash-screen .acct-tab{height:44px;width:100%;padding:0 14px;border-radius:14px;font-size:.875rem;font-weight:700;color:rgba(240,244,255,.38);background:transparent;border:1px solid transparent;transition:all .2s var(--ease);white-space:nowrap}
#dash-screen .acct-tab:hover{color:rgba(240,244,255,.72);background:rgba(255,255,255,.06)}
#dash-screen .acct-tab.active{color:#f0f4ff;background:linear-gradient(180deg,rgba(59,130,246,.2),rgba(26,34,53,.95));border-color:rgba(59,130,246,.45);box-shadow:0 6px 20px rgba(26,86,219,.25)}

#dash-screen .dash-body{padding:24px 0 60px}
#dash-screen .acct-pane{display:none}
#dash-screen .acct-pane.active{display:block;animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

#dash-screen .dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
#dash-screen .d-stat{background:#1a2235;border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:20px;position:relative;overflow:hidden;transition:border-color .2s}
#dash-screen .d-stat:hover{border-color:rgba(255,255,255,.14)}
#dash-screen .d-stat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,86,219,.06) 0%,transparent 60%);pointer-events:none}
#dash-screen .d-stat-lbl{font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,244,255,.38);margin-bottom:10px}
#dash-screen .d-stat-v{font-size:2rem;font-weight:800;color:#f0f4ff;font-family:var(--font-h);line-height:1}
#dash-screen .d-stat-sub{font-size:.72rem;color:rgba(240,244,255,.38);margin-top:6px}
#dash-screen .d-stat-v.pos{color:#10b981}
#dash-screen .d-stat-v.neg{color:#f43f5e}
#dash-screen .d-stat-v.neu{color:rgba(240,244,255,.38)}

#dash-screen .dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
#dash-screen .d-card{background:#1a2235;border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:22px}
#dash-screen .d-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:8px}
#dash-screen .d-card h3{font-size:.875rem;font-weight:800;color:#f0f4ff;letter-spacing:.01em;margin-bottom:0}
#dash-screen .d-card-tag{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
#dash-screen .tag-brand{background:rgba(26,86,219,.18);color:var(--brand)}
#dash-screen .tag-gold{background:rgba(245,158,11,.15);color:#fbbf24}
#dash-screen .admin-qbank-panel{margin-top:14px}
#dash-screen .admin-qbank-grid{display:grid;grid-template-columns:1fr;gap:14px}
#dash-screen .admin-qbank-block{background:rgba(15,23,42,.28);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:14px 14px 10px}
#dash-screen .admin-qbank-kicker{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,244,255,.55);margin-bottom:10px}
#dash-screen .admin-qbank-table{width:100%;border-collapse:collapse}
#dash-screen .admin-qbank-table th{padding:0 8px 8px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,244,255,.4);text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
#dash-screen .admin-qbank-table td{padding:8px;font-size:.8rem;color:rgba(240,244,255,.78);border-bottom:1px solid rgba(255,255,255,.04)}
#dash-screen .admin-qbank-table tr:last-child td{border-bottom:none}
#dash-screen .admin-qbank-loading{font-size:.85rem;color:rgba(240,244,255,.58)}

#dash-screen .sessions-tbl{width:100%;border-collapse:collapse}
#dash-screen .sessions-tbl th{text-align:left;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,244,255,.38);padding:0 10px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
#dash-screen .sessions-tbl td{padding:10px;font-size:.8125rem;color:rgba(240,244,255,.65);border-bottom:1px solid rgba(255,255,255,.04)}
#dash-screen .sessions-tbl tr:last-child td{border-bottom:none}
#dash-screen .sessions-tbl tr:hover td{background:rgba(255,255,255,.03);color:#f0f4ff}
#dash-screen .sc-pill{display:inline-block;font-size:.7rem;font-weight:800;padding:2px 10px;border-radius:999px}
#dash-screen .sc-hi{background:rgba(16,185,129,.18);color:#10b981}
#dash-screen .sc-mid{background:rgba(59,130,246,.18);color:var(--brand)}
#dash-screen .sc-lo{background:rgba(245,158,11,.15);color:#fbbf24}
#dash-screen .empty-s{text-align:center;padding:40px;color:rgba(240,244,255,.38);font-size:.875rem}
#dash-screen .empty-s-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:rgba(240,244,255,.62)}
#dash-screen .score-chart-wrap{position:relative}
#dash-screen #score-chart{display:block;width:100% !important;height:230px !important;max-height:230px}
#dash-screen .score-hover-card{position:absolute;left:0;top:0;min-width:188px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(12,18,32,.96),rgba(17,25,42,.96));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(0,0,0,.34);pointer-events:none;opacity:0;transform:translate(-50%,-100%) translateY(6px);transition:opacity .14s ease,transform .14s ease;z-index:3}
#dash-screen .score-hover-card.show{opacity:1;transform:translate(-50%,-100%) translateY(-4px)}
#dash-screen .score-hover-date{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,244,255,.48);margin-bottom:10px}
#dash-screen .score-hover-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.8rem;color:rgba(240,244,255,.72);padding:4px 0}
#dash-screen .score-hover-row strong{font-size:.85rem;color:#f0f4ff}
#dash-screen .score-hover-row.total{margin-top:4px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
#dash-screen .score-hover-row.total strong{color:#fbbf24}

#dash-screen .expl-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(26,86,219,.22);border:1px solid rgba(59,130,246,.3);border-radius:999px;padding:4px 12px;font-size:.7rem;font-weight:700;color:var(--brand);letter-spacing:.03em}
#dash-screen .billing-wrap{display:flex;flex-direction:column;gap:14px}
#dash-screen .billing-plan-card{background:#1a2235;border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:24px 28px;position:relative;overflow:hidden}
#dash-screen .billing-plan-card.pro{border-color:rgba(26,86,219,.4);background:linear-gradient(135deg,rgba(26,86,219,.1) 0%,#1a2235 60%)}
#dash-screen .billing-plan-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,86,219,.04),transparent 70%);pointer-events:none}
#dash-screen .plan-label{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,244,255,.38);margin-bottom:6px}
#dash-screen .plan-name{font-size:1.6rem;font-weight:800;color:#f0f4ff;line-height:1}
#dash-screen .plan-price{font-size:.9rem;color:rgba(240,244,255,.65);margin-top:4px}

#dash-screen .billing-rows,#dash-screen .settings-section{background:#1a2235;border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden}
#dash-screen .billing-row,#dash-screen .settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.04);font-size:.875rem}
#dash-screen .billing-row:last-child,#dash-screen .settings-row:last-child{border-bottom:none}
#dash-screen .billing-k{font-weight:700;color:rgba(240,244,255,.38);font-size:.8rem;letter-spacing:.02em}
#dash-screen .billing-v{color:#f0f4ff;font-weight:600}
#dash-screen .billing-actions{display:flex;gap:8px;flex-wrap:wrap}
#dash-screen .settings-section{margin-bottom:14px}
#dash-screen .settings-section-hd{padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,244,255,.38)}
#dash-screen .settings-k{font-weight:600;color:rgba(240,244,255,.65);font-size:.85rem}
#dash-screen .settings-v{color:#f0f4ff;font-weight:700;font-size:.85rem}

#dash-screen .toggle-wrap{display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(240,244,255,.38)}
#dash-screen .toggle{position:relative;width:42px;height:24px;flex-shrink:0}
#dash-screen .toggle input{opacity:0;width:0;height:0}
#dash-screen .toggle-track{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:background .2s;cursor:pointer}
#dash-screen .toggle input:checked + .toggle-track{background:#1a56db}
#dash-screen .toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s var(--bounce);pointer-events:none}
#dash-screen .toggle input:checked ~ .toggle-thumb{transform:translateX(18px)}

#dash-screen .btn-ghost-dark{background:rgba(255,255,255,.08);color:rgba(240,244,255,.65);border:1.5px solid rgba(255,255,255,.14);height:38px;padding:0 18px;font-size:.84rem}
#dash-screen .btn-ghost-dark:hover{background:rgba(255,255,255,.14);color:#f0f4ff}
#dash-screen .btn-primary{background:#1a56db;color:#fff;height:38px;padding:0 20px;font-size:.84rem}
#dash-screen .btn-primary:hover{background:var(--brand);transform:translateY(-1px);box-shadow:0 6px 24px rgba(26,86,219,.5)}
#dash-screen .btn-gold{background:#f59e0b;color:#0d1117;height:38px;padding:0 20px;font-size:.84rem;font-weight:800}
#dash-screen .btn-gold:hover{background:#fbbf24;transform:translateY(-1px);box-shadow:0 6px 24px rgba(245,158,11,.45)}
#dash-screen .btn-outline-dark{background:transparent;border:1.5px solid rgba(255,255,255,.14);color:rgba(240,244,255,.65);height:36px;padding:0 16px;font-size:.8125rem;font-weight:700;border-radius:999px;transition:all .2s}
#dash-screen .btn-outline-dark:hover{border-color:var(--brand);color:#f0f4ff;background:rgba(26,86,219,.1)}
#dash-screen .btn-danger{background:transparent;border:1.5px solid rgba(225,29,72,.3);color:rgba(244,63,94,.8);height:36px;padding:0 16px;font-size:.8125rem;font-weight:700;border-radius:999px;transition:all .2s}
#dash-screen .btn-danger:hover{background:rgba(225,29,72,.12);color:#f43f5e}

@media(max-width:980px){#dash-screen .dash-stats{grid-template-columns:1fr 1fr}}
@media(max-width:700px){#dash-screen .dash-grid{grid-template-columns:1fr}#dash-screen .dash-stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){#dash-screen .dash-stats{grid-template-columns:1fr}#dash-screen .acct-tab{font-size:.8rem}}

/* ============================================================
   TOAST
   ============================================================ */
#toasts{position:fixed;bottom:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--ink-80);color:#fff;padding:10px 18px;border-radius:var(--r-md);
  font-size:.875rem;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:8px;
  max-width:320px;pointer-events:all;animation:tin .3s var(--ease)}
.toast.ok{background:var(--green)}
.toast.er{background:var(--rose)}
.toast.wn{background:var(--amber);color:var(--ink)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes tout{from{opacity:1}to{opacity:0;transform:translateY(6px)}}
.toast.out{animation:tout .25s ease forwards}

.checkout-status{max-width:980px;margin:18px auto 0;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-md)}
.checkout-status.success{border-color:rgba(5,150,105,.3);background:var(--green-pale)}
.checkout-status.pending{border-color:rgba(217,119,6,.3);background:var(--gold-pale)}
.checkout-status.cancel{border-color:rgba(225,29,72,.2);background:#fff7f7}
.checkout-status-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.checkout-status-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:9999px;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.checkout-status.success .checkout-status-chip{background:rgba(5,150,105,.14);color:var(--green)}
.checkout-status.pending .checkout-status-chip{background:rgba(217,119,6,.16);color:var(--amber)}
.checkout-status.cancel .checkout-status-chip{background:rgba(225,29,72,.1);color:var(--rose)}
.checkout-status h3{margin-top:8px;font-size:1.02rem;font-weight:800;line-height:1.3}
.checkout-status p{margin-top:6px;color:var(--slate);font-size:.9rem;line-height:1.55}
.checkout-status-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.checkout-status-close{border:1px solid var(--line);background:#fff;color:var(--muted);width:30px;height:30px;border-radius:9999px;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}
.checkout-status-close:hover{color:var(--ink);border-color:#b8c5d6}

#aria-live{position:absolute;left:-9999px;height:1px;overflow:hidden}
#confetti-c{position:fixed;inset:0;z-index:1500;pointer-events:none;display:none}

/* ============================================================
   PAGE ENTER
   ============================================================ */
.p-enter{animation:penter .38s var(--ease)}
@keyframes penter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   SAFE AREA INSETS (iPhone notch / Dynamic Island / home bar)
   ============================================================ */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* Nav notch handled by shared-navbar-styles */

/* Landing page accounts for taller nav */
#landing,#landing-screen { padding-top: calc(var(--nav-h) + var(--sat)); }

/* Test topbar */
.tb { padding-top: var(--sat); height: calc(58px + var(--sat)); padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }
.test-body { padding-bottom: var(--sab); }
.test-ft { padding-bottom: calc(12px + var(--sab)); padding-left: calc(24px + var(--sal)); padding-right: calc(24px + var(--sar)); }

/* Modals clear the home bar */
.modal { margin-bottom: var(--sab); }
.overlay { padding-bottom: calc(20px + var(--sab)); }

/* Toasts above home bar */
#toasts { bottom: calc(20px + var(--sab)); right: calc(20px + var(--sar)); }

/* Results/Dash screens */
#results-screen, #dash-screen {
  padding-top: calc(var(--nav-h) + var(--sat));
}

/* ============================================================
   TOUCH OPTIMIZATIONS
   ============================================================ */
/* Prevent text resize on orientation change */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Prevent rubber-band scroll on body, allow in scrollable containers */
body { overscroll-behavior: none; }
.q-main, .modal, .q-passage { overscroll-behavior: contain; }

/* Remove 300ms tap delay everywhere */
* { touch-action: manipulation; }
/* Re-allow pan/zoom on scrollable containers */
.q-main, .modal, .q-passage, #results-screen, #dash-screen { touch-action: pan-y; }

/* Tap highlight, keep for accessibility, just make it subtle */
* { -webkit-tap-highlight-color: rgba(26,86,219,.12); }
button, a, .q-opt, .sec-opt, .feat-card { -webkit-tap-highlight-color: rgba(26,86,219,.08); }

/* Minimum 44×44px touch targets (Apple HIG) */
.btn, button { min-height: 44px; }
.qn-btn { min-width: 36px; min-height: 36px; }
.q-nav .qn-grid { max-width: 164px; gap: 10px 8px; }
.q-nav .qn-btn { width: 28px; min-width: 28px; height: 28px; min-height: 28px; }
.faq-btn { min-height: 52px; }
.flag-btn { min-height: 44px; }
.modal-close { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }

/* Prevent accidental zoom on input focus (iOS zooms if font-size < 16px) */
.fi, .fi-sel, .q-spr-inp, input, select, textarea {
  font-size: 16px !important; /* iOS won't zoom if exactly 16px */
}

/* Smooth scrolling on iOS */
.q-main, .modal, #results-screen { -webkit-overflow-scrolling: touch; }

/* Active states feel native on mobile */
.btn:active, .q-opt:active, .sec-opt:active { opacity: .82; transform: scale(.97); }
.qn-btn:active { transform: scale(.93); }

/* Disable hover effects on touch devices (prevents sticky hover state) */
@media(hover:none) {
  .btn-primary:hover, .btn-cta:hover, .btn-ghost:hover { transform: none; box-shadow: revert; }
  .feat-card:hover, .test-card:hover, .price-card:hover { transform: none; box-shadow: none; }
  .q-opt:hover { border-color: var(--line); background: transparent; }
  .faq-btn:hover { background: transparent; }
}

/* ============================================================
   MOBILE BOTTOM ACTION BAR (test engine)
   ============================================================ */
@media(max-width:600px) {
  .test-ft {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + var(--sab));
    z-index: 50;
    gap: 8px;
  }
  .test-nav-btns { gap: 6px; }
  /* Make nav buttons full-width friendly */
  .test-nav-btns .btn { flex: 1; }
  #submit-btn { flex: 1; }
}

/* ============================================================
   RESPONSIVE MISC
   ============================================================ */
@media(max-width:480px){
  .checkout-status{margin:12px auto 0;padding:14px}
  .checkout-status-actions .btn{width:100%}
  .hero h1{font-size:1.875rem;letter-spacing:-.02em}
  .hero{padding:40px 0 52px}
  .hero-sub{font-size:.9375rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn,.hero-actions button{width:100%;justify-content:center}
  .hero-proof{gap:16px}
  .hero-proof-divider{display:none}
  .hero-proof-item{flex:1;text-align:center}
  .hero-phone{max-width:100%;border-radius:20px;margin-top:32px}

  /* Billing toggle wraps on very small screens */
  .pricing-toggle-row{gap:12px}
  .billing-toggle{flex-wrap:wrap;gap:4px;border-radius:16px}
  .billing-toggle label{padding:8px 12px;font-size:.75rem}
  .billing-toggle-trial-wrap{margin-left:0}

  /* Sections less padding */
  .section{padding:60px 0}
  .cred-section{padding:40px 0}
  .pricing{padding:64px 0}
  .cta-band{padding:56px 0}

  /* Features single col */
  .feat-grid{grid-template-columns:1fr}

  /* Pricing */
  .price-grid{max-width:100%}
  .price-card{padding:24px 20px}
  .price-per-week{font-size:2rem}

  /* FAQ */
  .faq-btn{font-size:.875rem;padding:16px 18px}
  .faq-body-inner{padding:0 18px 16px}

  /* Modal full-screen feel on small phones */
  .overlay{align-items:flex-end;padding:0}
  .modal{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:96vh;padding-bottom:var(--sab)}
  .modal-hd{padding:24px 22px 0}
  .modal-bd{padding:20px 22px}
  .modal-ft{padding:0 22px calc(20px + var(--sab))}

  /* Paywall modal */
  .paywall-icon{width:60px;height:60px;font-size:1.6rem}

  /* Results */
  .res-score-card{margin:0;border-radius:0;border-left:none;border-right:none;padding:28px 20px}
  .res-content{padding:0 16px}
  .res-actions{flex-direction:column;align-items:stretch}
  .res-actions .btn{width:100%}
  .limit-banner{flex-direction:column;gap:10px;text-align:center}
  .limit-banner-actions{margin-left:0;width:100%}
  .limit-banner-actions .btn{width:100%}

  /* Dashboard */
  .dash-stats{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr}
  .sessions-tbl th:last-child,.sessions-tbl td:last-child{display:none}

  /* Test nav area */
  .q-main{padding:16px 14px}
  .q-main::before{font-size:.68rem;letter-spacing:.06em}
  .q-passage{max-height:160px;padding:16px 16px;border-radius:18px}
  .tb-sec{display:none}

  /* Score ticks */
  .score-ticks{gap:16px}

  /* CTA band */
  .cta-band h2{font-size:1.375rem}

  /* Toasts full width */
  #toasts{left:12px;right:12px;bottom:calc(16px + var(--sab))}
  .toast{max-width:100%}

  /* Wraps */
  .wrap,.wrap-sm{padding:0 16px}
}