/* ============================================================
   ExamHK Finance · CAMS site — page & app styles (site.css)
   Loaded AFTER style.css (design tokens + buttons + base layout).
   ============================================================ */

/* ============== Generic layout ============== */
.page{padding:3.5rem 0}
.page-head{text-align:center;max-width:760px;margin:0 auto 2.5rem}
.page-head h1.display{
  color:var(--exam-primary);
  font-size:clamp(2rem,3.4vw,2.6rem);
  line-height:1.15;
  margin:.4rem 0 .9rem;
}
.page-head .lead{color:var(--gray-500);line-height:1.7;margin:0}
.page-head .kicker{margin-bottom:.4rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media (max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}

.hero-chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.4rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:800;letter-spacing:.07em;
  padding:.32rem .62rem;border-radius:999px;
  border:1px solid var(--border-medium);background:var(--gray-50);color:var(--exam-primary);
}
.chip svg{width:.9rem;height:.9rem}
.chip.gold{background:#fff7d6;border-color:#e8c766;color:var(--exam-accent-dark)}
.chip.gold svg{color:var(--exam-accent-dark)}
.chip.blue{background:#fff;color:var(--exam-primary)}
.chip.blue svg{color:var(--exam-primary)}

/* ============== Site header (injected) ============== */
#siteHeader .nav{position:sticky;top:0}
.site-brand-mono{display:block;line-height:1.05}
.site-brand-mono b{color:var(--exam-primary);font-family:Georgia,serif;font-size:1.02rem;letter-spacing:.01em;display:block}
.site-brand-mono span{color:var(--exam-accent-dark);font-size:.72rem;letter-spacing:.22em;font-weight:800}

.nav .links a.active{color:var(--exam-primary);background:var(--gold-tint)}

/* Language pill inside injected header */
.lang-pill{
  min-height:38px;color:var(--exam-primary);cursor:pointer;
  background:#fffdf8;border:1px solid #d9ccb0;border-radius:8px;
  align-items:center;gap:.4rem;padding:.24rem;display:inline-flex;
  font-size:.72rem;font-weight:900;box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.lang-pill:hover{border-color:var(--exam-accent);background:#fff}
.lang-pill .opt{color:#64748b;border-radius:6px;place-items:center;min-width:2.35rem;height:1.55rem;font-size:.68rem;display:grid}
.lang-pill .opt.on{background:var(--exam-primary);color:#fff}

/* User area */
.user-area{display:flex;align-items:center;gap:.55rem}
.user-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--exam-primary);background:var(--gray-50);border:1px solid var(--border);
  border-radius:8px;min-height:38px;padding:.35rem .85rem;font-weight:800;font-size:.85rem;
  cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s;
}
.user-btn:hover{border-color:var(--exam-accent);background:#fff}
.user-btn .avatar{
  width:1.45rem;height:1.45rem;border-radius:50%;
  background:linear-gradient(135deg,var(--exam-accent),var(--exam-accent-light));
  color:#111827;display:grid;place-items:center;font-size:.72rem;font-weight:900;
}
.user-wrap{position:relative}
.user-menu{
  position:absolute;right:0;top:calc(100% + .4rem);min-width:190px;
  background:#fff;border:1px solid var(--border-medium);border-radius:10px;
  box-shadow:0 14px 34px rgba(39,52,98,.16);padding:.35rem;z-index:80;
}
.user-menu a,.user-menu button{
  display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;
  padding:.55rem .7rem;border-radius:7px;border:0;background:transparent;
  color:var(--gray-700);font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:none;
}
.user-menu a:hover,.user-menu button:hover{background:var(--gray-50);color:var(--exam-primary)}
.user-menu hr{border:0;border-top:1px solid var(--border-soft);margin:.3rem .4rem}
.user-menu .muted{color:var(--gray-500);font-size:.75rem;padding:.4rem .7rem .15rem}
.user-menu button.danger:hover{background:var(--red-bg);color:#dc2626}
.user-menu button:disabled{cursor:wait;opacity:.65}
.user-menu button:disabled:hover{background:transparent;color:var(--gray-700)}

/* ============== HOME ============== */
.home-hero{position:relative;overflow:hidden;padding:3.2rem 0 3.6rem}
.home-hero .bg-blob{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.16),rgba(212,175,55,0) 65%);
  top:-160px;right:-120px;pointer-events:none;
}
.hero-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;position:relative}
.hero-copy h1.display{color:var(--exam-primary);font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.12;margin:.5rem 0 1.1rem}
.hero-copy .lead{color:var(--gray-500);font-size:1.05rem;line-height:1.75;max-width:540px;margin:0 0 1.4rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.hero-facts{margin-top:1.6rem;display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--gray-500);font-size:.85rem}
.hero-facts b{color:var(--exam-primary);display:block;font-size:1.25rem;font-family:Georgia,serif}
.hero-facts small{font-weight:700;color:var(--gray-500)}

/* Dashboard style mock */
.desk-card{
  background:#fff;border:1px solid var(--border-medium);border-radius:18px;
  box-shadow:var(--shadow-quiz);padding:1.3rem;
}
.desk-card .dc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.desk-card .dc-head b{color:var(--exam-primary);font-size:.95rem}
.desk-card .dc-head span{color:var(--gray-400);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.desk-card .big-num{font-family:Georgia,serif;font-size:2.4rem;color:var(--exam-primary);font-weight:700;line-height:1}
.desk-card .ring{font-family:Georgia,serif;font-size:1.9rem;color:var(--exam-accent-dark);font-weight:700;margin-top:.6rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.1rem}
.stat-box{background:var(--gray-50);border:1px solid var(--border-soft);border-radius:10px;padding:.75rem .85rem}
.stat-box b{display:block;color:var(--exam-primary);font-size:1.05rem}
.stat-box small{color:var(--gray-500);font-size:.72rem;font-weight:700}
.mini-bars{margin-top:1.1rem;display:grid;gap:.5rem}
.mini-bars div{font-size:.75rem;color:var(--gray-500);display:flex;align-items:center;gap:.6rem}
.mini-bars div i{background:#edf0f7;height:8px;border-radius:99px;flex:1;overflow:hidden}
.mini-bars div i em{display:block;height:100%;background:var(--exam-primary);border-radius:99px}

.section-block{padding:2.8rem 0}
.section-title{text-align:center;max-width:680px;margin:0 auto 2rem}
.section-title h2.display{color:var(--exam-primary);font-size:clamp(1.7rem,3vw,2.3rem);margin:.3rem 0 .6rem}
.section-title p{color:var(--gray-500);margin:0;line-height:1.7}

/* Exam route cards (home) */
.exam-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:860px;margin:0 auto}
@media (max-width:640px){.exam-grid{grid-template-columns:1fr}}
.exam-card{
  display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--border-medium);
  border-radius:12px;padding:1rem 1.1rem;text-decoration:none;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.exam-card:hover{border-color:var(--exam-accent);transform:translateY(-2px);box-shadow:var(--shadow-card-lg)}
.exam-card .tile{
  width:2.6rem;height:2.6rem;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--exam-primary),var(--exam-primary-light));
  color:#fff;display:grid;place-items:center;font-weight:900;font-family:Georgia,serif;font-size:.95rem;
}
.exam-card .tile.gold{background:linear-gradient(135deg,var(--exam-accent),var(--exam-accent-light));color:#111827}
.exam-card b{color:var(--exam-primary);display:block;font-size:1rem}
.exam-card small{color:var(--gray-500);font-size:.78rem;display:block;line-height:1.4}
.exam-card svg{width:1.05rem;height:1.05rem;color:var(--exam-accent-dark);flex:none}

/* Feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:820px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--border-medium);border-radius:14px;padding:1.2rem 1.15rem;transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-lg)}
.feat svg{width:1.5rem;height:1.5rem;color:var(--exam-accent-dark)}
.feat h3{color:var(--exam-primary);margin:.55rem 0 .25rem;font-size:1rem;letter-spacing:.01em}
.feat p{color:var(--gray-500);margin:0;font-size:.87rem;line-height:1.65}

.band-cta{
  margin-top:2rem;background:linear-gradient(135deg,var(--exam-primary),var(--exam-primary-light));
  border-radius:20px;padding:2.6rem 2rem;text-align:center;color:#fff;
}
.band-cta h2{font-family:Georgia,serif;margin:0 0 .6rem;font-size:clamp(1.6rem,2.8vw,2.2rem)}
.band-cta p{opacity:.85;margin:0 auto 1.3rem;max-width:560px;line-height:1.7}
.band-cta .btn{background:var(--exam-accent);color:#111827}
.band-cta .btn:hover{background:var(--exam-accent-light)}
.note-arch{font-size:.78rem;color:var(--gray-400);margin-top:1.4rem;text-align:center}

/* ============== PRICING ============== */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:stretch}
@media (max-width:900px){.price-grid{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}
.price-card{
  background:#fff;border:1px solid var(--border-medium);border-radius:16px;
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:.35rem;
  box-shadow:var(--shadow-card);position:relative;
}
.price-card.featured{
  border:2px solid var(--exam-accent);
  box-shadow:0 18px 40px rgba(212,175,55,.2);
}
.price-card .flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--exam-accent),var(--exam-accent-light));
  color:#111827;font-size:.68rem;font-weight:900;letter-spacing:.06em;
  padding:.28rem .8rem;border-radius:999px;white-space:nowrap;
}
.price-card h3{color:var(--exam-primary);margin:0;font-size:1.05rem}
.price-card .amount{font-family:Georgia,serif;font-size:2.1rem;color:var(--exam-primary);font-weight:700;margin:.3rem 0 .1rem}
.price-card .amount small{font-size:.95rem;color:var(--gray-500);font-family:Inter,sans-serif;font-weight:700}
.price-card .per{color:var(--gray-500);font-size:.85rem;margin-bottom:.8rem}
.price-card ul{list-style:none;margin:0 0 1.2rem;padding:0;flex:1}
.price-card ul li{color:var(--gray-700);font-size:.88rem;line-height:1.55;padding:.32rem 0 .32rem 1.5rem;position:relative}
.price-card ul li::before{content:"";position:absolute;left:0;top:.78rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--exam-accent)}
.price-card ul li.off{color:var(--gray-400)}
.price-card ul li.off::before{background:var(--border)}
.price-card .btn{width:100%}

.compact-list{max-width:820px;margin:0 auto;display:grid;gap:.7rem}
.compact-list li{display:flex;gap:.7rem;align-items:flex-start;background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:.85rem 1rem;color:var(--gray-700);font-size:.9rem}
.compact-list li svg{width:1.1rem;height:1.1rem;color:var(--exam-accent-dark);flex:none;margin-top:.1rem}
.note{font-size:.8rem;color:var(--gray-400);text-align:center;margin-top:1.3rem;line-height:1.6}

/* ============== ABOUT ============== */
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;max-width:960px;margin:0 auto}
@media (max-width:720px){.about-grid{grid-template-columns:1fr}}
.about-card{background:#fff;border:1px solid var(--border-medium);border-radius:14px;padding:1.5rem}
.about-card svg{width:1.6rem;height:1.6rem;color:var(--exam-accent-dark)}
.about-card h3{color:var(--exam-primary);margin:.6rem 0 .35rem;font-size:1.05rem}
.about-card p{color:var(--gray-500);margin:0;font-size:.9rem;line-height:1.75}

/* ============== CONTACT ============== */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;max-width:980px;margin:0 auto;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:#fff;border:1px solid var(--border-medium);border-radius:16px;padding:1.6rem 1.5rem}
.contact-card h3{color:var(--exam-primary);margin:0 0 .6rem;font-size:1.05rem}
.contact-card .support-line{display:flex;gap:.6rem;align-items:flex-start;margin:.8rem 0;color:var(--gray-700);font-size:.92rem}
.contact-card .support-line svg{width:1.15rem;height:1.15rem;color:var(--exam-accent-dark);flex:none;margin-top:.1rem}

.field{display:grid;gap:.3rem;margin-bottom:1rem}
.field label{font-size:.82rem;font-weight:800;color:var(--exam-primary)}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;border:1px solid var(--border-strong);border-radius:8px;
  padding:.65rem .8rem;font-size:.92rem;font-family:inherit;color:var(--fg);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--exam-accent);box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.field .err{color:#dc2626;font-size:.76rem;font-weight:700;min-height:0}
.field.invalid input,.field.invalid textarea{border-color:#fca5a5}
.inline-err{color:#dc2626;font-size:.8rem;font-weight:800;background:var(--red-bg);border:1px solid var(--red-bd);border-radius:8px;padding:.6rem .8rem;margin-bottom:1rem;display:none}
.inline-err.show{display:block}

/* ============== AUTH ============== */
.auth-wrap{max-width:430px;margin:0 auto}
.auth-card{
  background:#fff;border:1px solid var(--border-medium);border-radius:18px;
  box-shadow:var(--shadow-quiz);padding:2rem 1.8rem;
}
.auth-card .brand-mark{
  width:2.5rem;height:2.5rem;border-radius:10px;display:grid;place-items:center;margin:0 auto .9rem;
  background:linear-gradient(135deg,var(--exam-primary),var(--exam-primary-light));color:#fff;font-weight:900;font-family:Georgia,serif;
}
.auth-card h1{color:var(--exam-primary);font-family:Georgia,serif;text-align:center;font-size:1.6rem;margin:0 0 .35rem}
.auth-card .sub{color:var(--gray-500);text-align:center;font-size:.9rem;margin:0 0 1.5rem}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--gray-50);border:1px solid var(--border-soft);border-radius:10px;padding:.25rem;margin-bottom:1.4rem;gap:.2rem}
.auth-tabs button{border:0;background:transparent;border-radius:8px;min-height:38px;font-weight:800;font-size:.9rem;color:var(--gray-500);cursor:pointer}
.auth-tabs button.on{background:#fff;color:var(--exam-primary);box-shadow:0 1px 3px rgba(15,23,42,.1)}
.auth-link-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;margin:.6rem 0 1.1rem}
.auth-link-row a{color:var(--exam-accent-dark);font-weight:800;text-decoration:none}
.auth-alt{text-align:center;font-size:.82rem;color:var(--gray-500);margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--border-soft)}
.auth-alt a{color:var(--exam-primary);font-weight:800;text-decoration:none}
.demo-note{
  margin-top:1rem;background:var(--blue-bg-2);border:1px solid var(--border-medium);
  border-radius:10px;padding:.75rem .9rem;color:var(--gray-700);font-size:.78rem;line-height:1.6;
}

/* ============== ACCOUNT ============== */
.account-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:#fff;border:1px solid var(--border-medium);border-radius:16px;padding:1.4rem 1.6rem;margin-bottom:1.4rem}
.account-head .who{display:flex;align-items:center;gap:1rem}
.account-head .who .big-av{
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--exam-accent),var(--exam-accent-light));
  color:#111827;font-size:1.2rem;font-weight:900;
}
.account-head h2{color:var(--exam-primary);margin:0;font-size:1.15rem}
.account-head p{color:var(--gray-500);margin:.15rem 0 0;font-size:.85rem}
.acct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1.6rem}
@media (max-width:760px){.acct-grid{grid-template-columns:1fr}}
.acct-stat{background:#fff;border:1px solid var(--border-medium);border-radius:14px;padding:1.1rem 1.2rem}
.acct-stat b{font-family:Georgia,serif;font-size:1.7rem;color:var(--exam-primary);display:block;line-height:1.15}
.acct-stat small{display:block;margin-top:.15rem;color:var(--gray-500);font-weight:800;font-size:.78rem}
.acct-panel{background:#fff;border:1px solid var(--border-medium);border-radius:14px;padding:1.2rem}
.acct-panel h3{color:var(--exam-primary);margin:0 0 .8rem;font-size:1rem}
.acct-table{width:100%;border-collapse:collapse;font-size:.88rem}
.acct-table th{text-align:left;color:var(--gray-400);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:.45rem .5rem;border-bottom:1px solid var(--border-soft)}
.acct-table td{padding:.65rem .5rem;border-bottom:1px solid var(--border-soft);color:var(--gray-700)}
.acct-table tr:last-child td{border-bottom:0}
.empty-note{color:var(--gray-400);font-size:.9rem;padding:1rem 0;text-align:center}

/* ============== Toast ============== */
#toastWrap{position:fixed;right:1rem;bottom:1rem;z-index:300;display:grid;gap:.5rem}
.toast{
  background:var(--exam-primary);color:#fff;border-radius:10px;padding:.8rem 1rem;
  font-size:.9rem;font-weight:700;box-shadow:0 12px 30px rgba(15,23,42,.25);
  animation:toastIn .25s ease;max-width:360px;line-height:1.45;
}
.toast.ok{background:#1f7a4d}
.toast.warn{background:#b7791f}
.toast.err{background:#b42318}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(8px);opacity:0}}

/* Placeholder markers */
.ph-tag{
  display:inline-block;margin-left:.45rem;vertical-align:middle;
  background:var(--gold-tint);color:var(--exam-accent-dark);border:1px solid #e8c766;
  font-size:.6rem;font-weight:900;letter-spacing:.08em;padding:.12rem .4rem;border-radius:999px;
}

/* ============== Responsive: home hero must never overflow small screens ============== */
.hero-layout > *{min-width:0}
.desk-card{min-width:0}
.desk-card .stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-bars div,
.mini-bars div > span{min-width:0}
@media (max-width:900px){
  .hero-layout{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:480px){
  .stat-row{gap:.5rem}
  .stat-box{padding:.6rem .55rem}
  .stat-box small{font-size:.62rem;white-space:nowrap}
  .mini-bars div{flex-wrap:wrap;gap:.3rem .6rem}
  .mini-bars div > span{flex:1 1 100%}
  .desk-card .dc-head{flex-wrap:wrap;gap:.3rem}
}

/* full-bank resume bar (practice page) */
.resume-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;padding:.6rem .95rem;margin:0 0 .9rem;border:1px solid var(--border-medium,#e5e7eb);border-left:4px solid var(--exam-accent,#b98f0e);border-radius:10px;background:var(--gold-tint,#fdf6dd);font-size:.92rem;color:var(--exam-primary,#111827);line-height:1.5}
.resume-bar svg{flex:none;color:var(--exam-accent-dark,#7a5b00)}
.resume-bar #resumeText{flex:1 1 260px}
.resume-discard{flex:none;background:#fff;border:1px solid var(--border,#d8d4c5);border-radius:99px;padding:.3rem .95rem;font-size:.86rem;color:var(--exam-primary,#111827);cursor:pointer;font-family:inherit}
.resume-discard:hover{border-color:var(--exam-accent,#b98f0e)}
@media (max-width:560px){.resume-discard{margin-left:0}}

/* ============== Responsive: site header must never overflow small screens ============== */
@media (max-width:720px){
  .nav-inner{flex-wrap:wrap;row-gap:.35rem;min-height:auto;padding-block:.55rem}
  .logo-wrap{width:auto;min-width:0;padding:.4rem .55rem}
  .links{display:none}
}
@media (max-width:560px){
  .nav-controls{gap:.4rem}
  .nav .btn-accent.start{padding:.5rem .85rem;font-size:.8rem}
  .nav .btn-accent.start svg{display:none}
  .user-btn{padding:.35rem .6rem;font-size:.8rem}
  .lang-pill{min-height:34px}
  .lang-pill .opt{min-width:2.1rem;height:1.4rem}
  .site-brand-mono b{font-size:.95rem}
  .site-brand-mono span{font-size:.64rem;letter-spacing:.16em}
}

/* ============================================================
   Free practice (home) — stacked question paper
   ============================================================ */
.fp-facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.fp-facts div{background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:.55rem .9rem;min-width:112px}
.fp-facts b{display:block;font-family:Georgia,serif;font-size:1.15rem;color:var(--exam-primary);line-height:1.2}
.fp-facts small{color:var(--gray-500);font-size:.72rem;font-weight:700}

.fp-progress{
  position:sticky;top:72px;z-index:5;
  display:flex;align-items:center;gap:.9rem;
  background:rgba(255,255,255,.96);border:1px solid var(--border-medium);
  border-radius:12px;padding:.6rem .9rem;margin:.4rem 0 1rem;
  box-shadow:0 6px 18px rgba(39,52,98,.06);
}
.fp-progress>span:first-child{font-size:.8rem;color:var(--gray-500);font-weight:700;white-space:nowrap}
.fp-progress>span:first-child b{color:var(--exam-primary);font-size:.95rem}
.fp-progress>span:first-child em{font-style:normal;margin-left:.3rem}
.fp-progress>i{flex:1;height:6px;min-width:60px;background:var(--gray-50);border:1px solid var(--border-soft);border-radius:99px;overflow:hidden}
.fp-progress>i>em{display:block;height:100%;width:0;background:var(--exam-accent);border-radius:99px;transition:width .25s}
.fp-score{font-size:.8rem;font-weight:800;color:var(--exam-primary);white-space:nowrap}

.q-list{display:grid;gap:1rem}
.q-item{
  background:#fff;border:1px solid var(--border-medium);border-radius:14px;
  padding:1.15rem 1.25rem 1.1rem;box-shadow:0 6px 20px rgba(39,52,98,.05);
}
.q-item.answered{border-color:var(--border-strong)}
.q-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.7rem}
.q-num{
  font-family:Georgia,serif;font-weight:700;font-size:.82rem;color:#fff;
  background:var(--exam-primary);border-radius:6px;padding:.18rem .5rem;
}
.q-num.small{font-size:.72rem;padding:.14rem .42rem}
.q-tag{font-size:.7rem;font-weight:800;letter-spacing:.02em;color:var(--exam-primary);background:var(--gold-tint);border:1px solid #f0e2b6;border-radius:6px;padding:.16rem .45rem}
.q-topic{font-size:.72rem;font-weight:700;color:var(--gray-500)}
.q-set{font-size:.7rem;font-weight:700;color:var(--gray-400);margin-left:auto}
.q-stem{font-size:1rem;line-height:1.65;color:var(--fg);margin:0 0 .8rem;font-weight:600}
.multi-hint{font-size:.78rem;color:var(--exam-accent-dark);font-weight:700;margin:-.4rem 0 .7rem}
.q-opts{display:grid;gap:.5rem}
.q-opt{
  display:flex;align-items:flex-start;gap:.7rem;width:100%;text-align:left;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:.65rem .8rem;cursor:pointer;font-size:.92rem;line-height:1.55;color:var(--gray-700);
  transition:border-color .15s,background .15s;
}
.q-opt:hover:not(:disabled){border-color:var(--exam-accent);background:#fffdf5}
.q-opt b{
  flex:none;width:1.4rem;height:1.4rem;border-radius:6px;background:var(--gray-50);
  border:1px solid var(--border-medium);display:grid;place-items:center;
  font-size:.78rem;color:var(--exam-primary);font-weight:800;
}
.q-opt span{flex:1;white-space:pre-line}
.q-opt .mark{display:none;flex:none;width:1.05rem;height:1.05rem;margin-top:.18rem}
.q-opt.picked{border-color:var(--exam-accent);background:#fffdf5}
.q-opt.picked b{background:var(--exam-accent);border-color:var(--exam-accent);color:#111827}
.q-opt:disabled{cursor:default}
.q-opt.correct{border-color:var(--green-bd);background:var(--green-bg)}
.q-opt.correct b{background:#16a34a;border-color:#16a34a;color:#fff}
.q-opt.correct .mark.ok{display:block;color:#16a34a}
.q-opt.wrong{border-color:var(--red-bd);background:var(--red-bg)}
.q-opt.wrong b{background:#dc2626;border-color:#dc2626;color:#fff}
.q-opt.wrong .mark.no{display:block;color:#dc2626}
.q-foot{display:flex;align-items:center;gap:.8rem;margin-top:.9rem}
.q-check{
  background:var(--exam-primary);color:#fff;border:0;border-radius:9px;
  padding:.55rem 1.1rem;font-size:.84rem;font-weight:800;cursor:pointer;
}
.q-check:hover:not(:disabled){background:var(--exam-primary-light)}
.q-check:disabled{opacity:.45;cursor:not-allowed}
.q-status{font-size:.82rem;font-weight:800}
.q-status.is-correct{color:#16a34a}
.q-status.is-wrong{color:#dc2626}
.q-explain{margin-top:.9rem;border:1px solid var(--border-soft);border-radius:11px;background:var(--gray-50);padding:.9rem 1rem}
.q-explain.is-correct{border-color:var(--green-bd);background:var(--green-bg)}
.q-explain.is-wrong{border-color:var(--red-bd);background:var(--red-bg)}
.ex-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:.6rem}
.ex-head b{font-size:.85rem;color:var(--exam-primary)}
.ex-head span{font-size:.8rem;color:var(--gray-700);font-weight:700}
.ex-block h4{margin:0 0 .3rem;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500)}
.ex-block p{margin:0;font-size:.9rem;line-height:1.7;color:var(--gray-700)}
.ex-block p.is-pending{color:var(--gray-400);font-style:italic}
.ex-text{margin:0;font-size:.9rem;line-height:1.85;color:var(--gray-700)}
.ex-text.is-pending{color:var(--gray-400);font-style:italic}

.fp-upsell{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;text-align:left;margin-top:1.6rem}
.fp-upsell .band-copy{flex:1;min-width:240px}
.fp-upsell h2{font-family:Georgia,serif;margin:0 0 .4rem;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.fp-upsell p{opacity:.85;margin:0;max-width:520px;line-height:1.7}
.fp-upsell .band-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.fp-upsell .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}

/* ============================================================
   Full Question Bank
   ============================================================ */
.gate-card{
  max-width:640px;margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--border-medium);border-radius:18px;padding:2.4rem 2rem;
  box-shadow:0 14px 40px rgba(39,52,98,.08);
}
.gate-icon{
  width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.1rem;
  background:var(--gold-tint);border:1px solid #f0e2b6;color:var(--exam-accent-dark);
}
.gate-icon svg{width:1.4rem;height:1.4rem}
.gate-card h1{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .7rem}
.gate-card .lead{margin:0 auto 1.3rem;max-width:460px}
.gate-points{list-style:none;margin:0 auto 1.6rem;padding:0;display:grid;gap:.55rem;max-width:380px;text-align:left}
.gate-points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--gray-700)}
.gate-points svg{width:1.05rem;height:1.05rem;color:var(--exam-accent-dark);flex:none;margin-top:.15rem}
.gate-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.gate-foot{margin-top:1.2rem;font-size:.8rem}

.bank-sub{color:var(--gray-500);font-size:.88rem;margin:.6rem 0 0}
.bank-stats{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 1.4rem}
.bank-stat{flex:1;min-width:120px;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:.8rem 1rem}
.bank-stat b{display:block;font-family:Georgia,serif;font-size:1.4rem;color:var(--exam-primary);line-height:1.2}
.bank-stat small{color:var(--gray-500);font-size:.74rem;font-weight:700}

.bank-tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--border);margin-bottom:1.2rem}
.bank-tab{
  display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:0;
  border-bottom:2px solid transparent;padding:.6rem .9rem;cursor:pointer;
  color:var(--gray-500);font-weight:800;font-size:.9rem;
}
.bank-tab.active{color:var(--exam-primary);border-bottom-color:var(--exam-accent)}
.bank-tab em{
  font-style:normal;background:var(--gray-50);border:1px solid var(--border-medium);
  border-radius:99px;padding:.05rem .45rem;font-size:.72rem;color:var(--gray-700);
}
.bank-hint{margin-top:1rem;font-size:.8rem}

.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem}
/* Loading state for the set grid while bank.js waits for Auth.progress() to
   resolve on first boot; prevents the user from opening a runner with a
   stale empty state.progress and seeing previously-saved answers vanish. */
.set-grid.is-pre-boot{position:relative;opacity:.55;pointer-events:none;cursor:progress}
.set-grid.is-pre-boot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,.4),rgba(255,255,255,0))}
.set-card{background:#fff;border:1px solid var(--border-medium);border-radius:14px;padding:1rem 1.1rem;display:grid;gap:.65rem}
.set-card.is-done{border-color:var(--green-bd)}
.set-head{display:flex;align-items:center;gap:.7rem}
.set-no{
  width:2.3rem;height:2.3rem;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--exam-primary);color:#fff;font-family:Georgia,serif;font-weight:700;font-size:1rem;
}
.set-title b{display:block;color:var(--exam-primary);font-size:.95rem}
.set-title small{color:var(--gray-500);font-size:.76rem;font-weight:700}
.set-bar{display:grid;gap:.35rem}
.set-bar i{display:block;height:6px;background:var(--gray-50);border:1px solid var(--border-soft);border-radius:99px;overflow:hidden}
.set-bar i em{display:block;height:100%;background:var(--exam-accent);border-radius:99px}
.set-bar span{font-size:.74rem;color:var(--gray-500);font-weight:700}
.set-acc{font-size:.82rem;font-weight:800;margin:0}
.set-acc.good{color:#16a34a}
.set-acc.bad{color:#dc2626}
.set-acc.muted{color:var(--gray-400)}
.set-actions{display:flex;gap:.5rem}
.btn.sm{padding:.45rem .85rem;font-size:.8rem;min-height:0}
.btn.xs{padding:.3rem .6rem;font-size:.74rem;min-height:0;border-radius:7px}

.wrong-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem;flex-wrap:wrap}
.wrong-list{display:grid;gap:.7rem}
.wrong-item{background:#fff;border:1px solid var(--border-medium);border-left:3px solid var(--red-bd);border-radius:12px;padding:.9rem 1rem}
.wrong-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.5rem}
.wrong-set,.wrong-topic{font-size:.72rem;font-weight:700;color:var(--gray-500)}
.wrong-stem{font-size:.92rem;line-height:1.6;color:var(--gray-700);margin:0 0 .6rem}
.wrong-foot{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap}
.wrong-pick{font-size:.78rem;color:var(--gray-500);font-weight:700}
.wrong-btns{display:flex;gap:.4rem}

.runner-head{display:grid;gap:.7rem;margin-bottom:1.1rem}
.runner-head h2{font-family:Georgia,serif;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--exam-primary);margin:0}
.runner-head .fp-progress{position:static;box-shadow:none}
.link-back{
  display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:0;
  color:var(--exam-primary);font-weight:800;font-size:.85rem;cursor:pointer;padding:0;
}
.link-back svg{width:1rem;height:1rem}

/* ============================================================
   Pricing: comparison, FAQ, owned band, checkout modal
   ============================================================ */
.owned-band{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--green-bg);border:1px solid var(--green-bd);border-radius:14px;
  padding:1rem 1.2rem;margin-bottom:1.6rem;
}
.owned-band b{display:block;color:#15803d;font-size:1rem}
.owned-band span{color:var(--gray-700);font-size:.88rem}
.price-card .per-day{font-size:.78rem;font-weight:800;color:var(--exam-accent-dark);margin:-.4rem 0 .8rem}

.compare-wrap{overflow-x:auto;background:#fff;border:1px solid var(--border-medium);border-radius:14px}
.compare-table{width:100%;border-collapse:collapse;min-width:520px}
.compare-table th,.compare-table td{padding:.75rem 1rem;text-align:left;font-size:.88rem;border-bottom:1px solid var(--border-soft)}
.compare-table thead th{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500);background:var(--gray-50)}
.compare-table thead th.hi{color:var(--exam-primary)}
.compare-table tbody th{font-weight:700;color:var(--gray-700);width:44%}
.compare-table td{color:var(--gray-700)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table .yes svg{width:1.1rem;height:1.1rem;color:#16a34a}
.compare-table .no svg{width:1.1rem;height:1.1rem;color:var(--gray-300)}

.faq{display:grid;gap:.6rem;max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border-soft);border-radius:11px;padding:.85rem 1rem}
.faq-item summary{cursor:pointer;font-weight:800;color:var(--exam-primary);font-size:.92rem}
.faq-item p{margin:.6rem 0 .1rem;font-size:.88rem;line-height:1.75;color:var(--gray-700)}

.ck-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem}
.ck-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.ck-card{
  position:relative;width:min(420px,100%);background:#fff;border-radius:16px;
  padding:1.6rem 1.5rem;box-shadow:0 24px 60px rgba(15,23,42,.28);
}
.ck-x{position:absolute;top:.7rem;right:.7rem;background:transparent;border:0;color:var(--gray-400);cursor:pointer}
.ck-x svg{width:1.1rem;height:1.1rem}
.ck-card h3{margin:0 0 1rem;color:var(--exam-primary);font-family:Georgia,serif;font-size:1.25rem}
.ck-rows{margin:0 0 1rem;display:grid;gap:.5rem}
.ck-rows>div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem}
.ck-rows dt{color:var(--gray-500);font-weight:700}
.ck-rows dd{margin:0;color:var(--gray-700);font-weight:700}
.ck-amount{font-family:Georgia,serif;font-size:1.05rem;color:var(--exam-primary)!important}
.ck-note{font-size:.78rem;color:var(--gray-500);line-height:1.6;margin:0 0 1rem}
.ck-pay{width:100%}
.ck-err{margin:.7rem 0 0;font-size:.82rem;color:#dc2626;font-weight:700}

/* unlock page */
.unlock-card{max-width:520px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--border-medium);border-radius:18px;padding:2.6rem 2rem}
.unlock-spin{
  width:2.4rem;height:2.4rem;border-radius:50%;margin:0 auto 1.2rem;
  border:3px solid var(--border);border-top-color:var(--exam-accent);animation:ck-spin 1s linear infinite;display:block;
}
@keyframes ck-spin{to{transform:rotate(360deg)}}
.unlock-card h1{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 .6rem}
.unlock-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}

/* rail links rendered as anchors */
a.rail-item,a.rail-secondary,a.rail-primary{text-decoration:none}
.rail-primary{gap:.4rem}

@media (max-width:720px){
  .fp-progress{position:static}
  .set-grid{grid-template-columns:1fr}
  .gate-card{padding:1.8rem 1.2rem}
}

/* ============================================================
   Exam isolation UI — exam switcher (header) + rail additions
   Added with the multi-exam isolation refactor.
   ============================================================ */
.exam-switch{position:relative}
.exam-switch-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--border-medium);background:#fff;border-radius:9px;
  padding:.38rem .6rem;cursor:pointer;color:var(--exam-primary);
  font-weight:800;font-size:.82rem;letter-spacing:.02em;
}
.exam-switch-btn:hover{border-color:var(--exam-accent);background:var(--gray-50)}
.exam-switch-btn .exam-abbr{
  background:var(--exam-primary);color:#fff;border-radius:6px;
  padding:.1rem .38rem;font-size:.72rem;font-weight:900;letter-spacing:.03em;
}
.exam-menu{
  position:absolute;right:0;top:calc(100% + .45rem);min-width:290px;max-width:min(360px,88vw);
  background:#fff;border:1px solid var(--border-medium);border-radius:12px;
  box-shadow:0 18px 40px rgba(39,52,98,.18);padding:.4rem;z-index:90;
  max-height:min(70vh,520px);overflow:auto;
}
.exam-menu-head{
  color:var(--gray-500);font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:.45rem .7rem .3rem;
}
.exam-row{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:8px;
  text-decoration:none;color:var(--gray-700);
}
.exam-row:hover{background:var(--gray-50)}
.exam-row.is-active{background:var(--gold-tint)}
.exam-row .exam-abbr{
  flex:0 0 auto;min-width:2.6rem;text-align:center;
  background:var(--gray-50);border:1px solid var(--border-medium);color:var(--exam-primary);
  border-radius:6px;padding:.18rem .35rem;font-size:.68rem;font-weight:900;letter-spacing:.03em;
}
.exam-row.is-active .exam-abbr{background:var(--exam-primary);color:#fff;border-color:var(--exam-primary)}
.exam-row .exam-copy{display:block;min-width:0}
.exam-row .exam-copy b{display:block;font-size:.86rem;font-weight:800;line-height:1.25;white-space:normal}
.exam-row .exam-copy small{display:block;color:var(--gray-500);font-size:.74rem;margin-top:.1rem}
.exam-row .exam-ph{
  font-style:normal;color:var(--exam-accent-dark);font-weight:800;margin-left:.35rem;
}
.exam-row.exam-sub{padding-left:1.5rem}
.exam-row.exam-sub .exam-abbr{visibility:hidden;min-width:0;width:0;padding:0;border:0}

/* rail: paper list + placeholder note */
.rail-papers{margin-top:.5rem;padding-top:.55rem;border-top:1px solid var(--border-soft)}
.rail-paper .rail-copy b{font-weight:700;font-size:.82rem;line-height:1.3}
.rail-note{
  margin:.55rem 0 0;padding:.5rem .6rem;border-radius:8px;
  background:var(--gold-tint);border:1px solid #e8c766;
  color:var(--exam-accent-dark);font-size:.75rem;line-height:1.45;
}

/* ============================================================
   >>> GENERATED FILE - DO NOT EDIT <<<
   site.css = _build_multi/css/site.base.css + _build_multi/css/theme.css
   Edit _build_multi/css/theme.css and run:  python _build_multi/merge_theme.py
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400..700&family=Noto+Serif+TC:wght@500;700&display=swap");

/* ============================================================
   ExamHK Finance — "Examination Desk" theme layer
   ------------------------------------------------------------
   Loaded AFTER style.css + site.css. Pure override: no class
   names, DOM shapes or JS hooks are changed, so every QA script
   and both question renderers (practice.js / bank.js) keep working.

   WHY THIS EXISTS
   The previous look leaned on gold gradients, pills and eleven
   different corner radii, which read as a promotional site rather
   than a study instrument. This layer rebuilds the visual system
   around the subject: a formal examination paper.

     1. Structure is ruled, not bubbled — hairline borders, square
        (4px) tags, and a printed question-number margin on every
        question card.
     2. Colour is ink + brass. Brass is a *signal* (CTA, active
        marker, accent rule), never a surface wash. All gradients
        are removed.
     3. One type pairing: Newsreader (editorial serif) for display,
        Inter for UI and body, Noto Serif TC for Chinese headings.
        Inter is now actually loaded — previously it was declared
        in the font stack but never fetched, so every visitor saw a
        different fallback face.

   Design tokens below are a superset of the legacy ones; the old
   names are all remapped so nothing that still references them
   (--gold-tint, --blue-bg, …) breaks.
   ============================================================ */

/* ============================================================
   1 · TOKENS
   ============================================================ */
:root{
  /* --- brand: ink --- */
  --exam-primary:#16324F;          /* deep navy — headings, primary button, footer */
  --exam-primary-light:#24486B;    /* hover / lighter navy */
  --ink-2:#1D3E60;

  /* --- brand: brass (signal only) --- */
  --exam-accent:#C1912F;           /* flat brass — CTA fill, active markers */
  --exam-accent-light:#D3AA55;     /* hover */
  --exam-accent-dark:#8A6516;      /* readable brass for small text on light (5.4:1) */

  /* --- surfaces --- */
  --bg:#F7F8FA;                    /* page: cool near-white */
  --fg:#101828;
  --muted:#59636F;
  --surface:#EFF2F6;
  --white:#FFFFFF;

  /* --- one border family (was five ad-hoc values) --- */
  --border:#E4E8EE;
  --border-soft:#EDF0F4;
  --border-medium:#DCE1E8;
  --border-strong:#C7CFD9;

  /* --- neutrals --- */
  --gray-50:#F8FAFC;
  --gray-300:#B7BFC9;
  --gray-400:#6E7887;              /* 4.5:1 on white — was #94a3b8 (2.9:1, failed) */
  --gray-500:#59636F;              /* 6.0:1 on white */
  --gray-700:#2F3947;

  /* --- semantic --- */
  --green-bg:#EFF8F2;
  --green-bd:#9CCFAC;
  --green-fg:#13724A;
  --red-bg:#FDF1F0;
  --red-bd:#EEB1AC;
  --red-fg:#AF2A20;
  --blue-bg:#F2F5F9;
  --blue-bg-2:#EEF2F7;
  --picked-bg:rgba(22,50,79,.045);
  --gold-tint:rgba(193,145,47,.10);

  /* --- elevation: three steps only --- */
  --shadow-card:0 1px 2px rgba(16,24,40,.05);
  --shadow-quiz:0 1px 3px rgba(16,24,40,.05),0 10px 26px -16px rgba(16,24,40,.22);
  --shadow-card-lg:0 1px 2px rgba(16,24,40,.04),0 6px 16px -12px rgba(16,24,40,.18);
  --shadow-pop:0 16px 40px -12px rgba(16,24,40,.24);
  --shadow-rail:none;              /* brand no longer floats on a card */

  /* --- spacing scale (4px base) --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* --- radius scale (was 6/7/8/9/10/11/12/14/16/18/20px) --- */
  --r-1:4px;   /* tags, badges, letter boxes */
  --r-2:6px;   /* buttons, inputs */
  --r-3:8px;   /* option rows, small panels */
  --r-4:12px;  /* cards, modals */
  --r-pill:999px;

  /* --- type --- */
  --font-sans:'Inter','Noto Sans TC','PingFang TC','Microsoft JhengHei','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Newsreader','Noto Serif TC','Songti TC','STSong',Georgia,'Times New Roman',serif;

  --header-h:64px;
  --measure:68ch;                  /* max reading line length */
}

/* ============================================================
   2 · BASE + TYPOGRAPHY
   ============================================================ */
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
  font-variant-numeric:proportional-nums;
}
::selection{background:rgba(193,145,47,.24)}

.display,
.site-brand-mono b,
.logo-text strong{

  font-family:var(--font-display);
  font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-.011em;
}

/* Headings: deeper ink, tighter leading, honest sizes. */
.page-head h1.display,
.hero-copy h1.display,
.test-header h1.display{
  color:var(--exam-primary);
  font-size:clamp(1.95rem,3.2vw,2.55rem);
  line-height:1.14;
  letter-spacing:-.018em;
  margin:var(--sp-2) 0 var(--sp-3);
}
.page-head .lead,
.test-header .lead{
  color:var(--muted);
  font-size:1.0625rem;
  line-height:1.72;
  max-width:var(--measure);
}
.page-head{max-width:720px;margin:0 auto var(--sp-10)}

/* The eyebrow is a ruled label, not a floating word: a short brass
   rule in front of it does the work a colour wash used to do. */
.eyebrow,.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  color:var(--exam-accent-dark);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
}
.eyebrow::before,.section-kicker::before{
  content:"";
  width:22px;height:2px;
  background:var(--exam-accent);
  flex:none;
}
.eyebrow{margin-bottom:var(--sp-2)}

.muted{color:var(--muted);line-height:1.72}
.container{width:min(1240px,100% - 2rem);padding-inline:1rem}

/* Numbers that sit in a stat context must not jitter between frames. */
.big-num,.ring,.hero-facts b,.stat-box b,.fp-facts b,.acct-stat b,
.bank-stat b,.price-card .amount,.plan-button b,.set-no,.q-num,
.fp-score,.result h2,.account-head .who .big-av,
#fpDone,#fpTotal,#factFree,#factBank{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ============================================================
   3 · FOCUS / MOTION
   ============================================================ */
:focus-visible{
  outline:2px solid var(--exam-accent);
  outline-offset:2px;
  border-radius:var(--r-1);
}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--exam-accent);
  outline-offset:2px;
}
/* Keyboard users get the brass ring; mouse users keep the quiet look. */
.q-opt:focus-visible,.btn:focus-visible{outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================
   4 · BUTTONS
   Four variants, one geometry. Gradients and the hover "lift"
   are gone: state is expressed with fill and border, which is
   calmer and does not reflow neighbouring rows.
   ============================================================ */
.btn{
  font-family:inherit;
  font-weight:600;
  font-size:.9375rem;
  border-radius:var(--r-2);
  min-height:44px;
  padding:.7rem 1.35rem;
  gap:var(--sp-2);
  border:1px solid transparent;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn:active{transform:none}

.btn-accent{
  background:var(--exam-accent);
  color:#1B1405;
  border-color:var(--exam-accent);
}
.btn-accent:hover:not(:disabled){
  background:var(--exam-accent-light);
  border-color:var(--exam-accent-light);
  box-shadow:none;
  transform:none;
}

.btn-primary{
  background:var(--exam-primary);
  color:#fff;
  border-color:var(--exam-primary);
}
.btn-primary:hover:not(:disabled){
  background:var(--exam-primary-light);
  border-color:var(--exam-primary-light);
  transform:none;
}

/* .btn-ghost was used in bank.js / pricing but never defined, so those
   buttons rendered as unstyled text. This is the missing variant. */
.btn-ghost{
  background:#fff;
  color:var(--exam-primary);
  border-color:var(--border-strong);
}
.btn-ghost:hover:not(:disabled){
  background:var(--gray-50);
  border-color:var(--exam-primary);
}

.btn.sm{padding:.5rem .95rem;font-size:.8125rem;min-height:36px}
.btn.xs{padding:.35rem .7rem;font-size:.75rem;min-height:30px;border-radius:var(--r-1)}

/* ============================================================
   5 · HEADER
   Slimmer, hairline-ruled. The brand loses its white floating
   card (which read as a sticker) and becomes plain type with a
   brass wordmark underneath. Active nav is a brass rule, not a
   filled chip — so the eye finds "where am I" without noise.
   ============================================================ */
.nav{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:none;
}
.nav-inner{min-height:var(--header-h);gap:var(--sp-4)}
.logo-wrap{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  min-height:0;
  width:auto;
  padding:0;
}
.site-brand-mono b{
  color:var(--exam-primary);
  font-size:1.1875rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
}
.site-brand-mono span{
  color:var(--exam-accent-dark);
  font-size:.625rem;
  letter-spacing:.26em;
  font-weight:700;
  margin-top:.22rem;
}

.links{gap:var(--sp-1)}
.links a{
  position:relative;
  color:var(--gray-700);
  font-weight:500;
  font-size:.9375rem;
  padding:.55rem .7rem;
  border-radius:0;
  background:transparent;
  transition:color .16s ease;
}
.links a:hover{color:var(--exam-primary);background:transparent}
.links a::after{
  content:"";
  position:absolute;left:.7rem;right:.7rem;bottom:.15rem;height:2px;
  background:var(--exam-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease;
}
.links a:hover::after{transform:scaleX(1)}
.links a.active{color:var(--exam-primary);font-weight:600;background:transparent}
.links a.active::after{transform:scaleX(1)}
.nav .links a.active{background:transparent}

/* segmented language control, neutral until selected */
.lang-pill,.language-toggle{
  min-height:34px;
  border:1px solid var(--border-medium);
  border-radius:var(--r-2);
  background:#fff;
  box-shadow:none;
  padding:3px;
  gap:2px;
}
.lang-pill:hover,.language-toggle:hover{border-color:var(--border-strong);background:#fff}
.lang-pill .opt,.language-choice{
  min-width:2.2rem;height:1.5rem;
  border-radius:var(--r-1);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--gray-500);
}
.lang-pill .opt.on,.language-choice.is-active{
  background:var(--exam-primary);
  color:#fff;
}

.user-btn{
  min-height:36px;
  border-radius:var(--r-2);
  border-color:var(--border-medium);
  background:#fff;
  color:var(--exam-primary);
  font-weight:600;
  font-size:.875rem;
  transition:border-color .16s ease,background-color .16s ease;
}
.user-btn:hover{border-color:var(--border-strong);background:var(--gray-50)}
.user-btn .avatar{
  border-radius:var(--r-1);
  background:var(--exam-primary);
  color:#fff;
  font-size:.6875rem;
  width:1.35rem;height:1.35rem;
}
.user-menu{
  border-radius:var(--r-3);
  border-color:var(--border-medium);
  box-shadow:var(--shadow-pop);
  padding:var(--sp-1);
}
.user-menu .muted{
  color:var(--gray-400);
  font-size:.75rem;
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
}

/* exam switcher */
.exam-switch-btn{
  border-radius:var(--r-2);
  border-color:var(--border-medium);
  font-weight:600;
  font-size:.8125rem;
  padding:.4rem .55rem;
  transition:border-color .16s ease,background-color .16s ease;
}
.exam-switch-btn:hover{border-color:var(--border-strong);background:var(--gray-50)}
.exam-switch-btn .exam-abbr{
  border-radius:var(--r-1);
  font-size:.6875rem;
  letter-spacing:.04em;
}
.exam-menu{
  border-radius:var(--r-3);
  border-color:var(--border-medium);
  box-shadow:var(--shadow-pop);
  padding:var(--sp-1);
}
.exam-row{border-radius:var(--r-2)}
.exam-row:hover{background:var(--gray-50)}
.exam-row.is-active{background:var(--gray-50)}
.exam-row .exam-abbr,.exam-row.is-active .exam-abbr{border-radius:var(--r-1)}

/* ============================================================
   6 · STUDY RAIL
   ============================================================ */
.rail{background:#fff;border-right:1px solid var(--border)}
.rail.desktop{width:16rem;min-height:calc(100vh - var(--header-h));top:var(--header-h)}
.rail-head{border-bottom:1px solid var(--border-soft);padding:var(--sp-4) var(--sp-5)}
.rail-head h3{color:var(--exam-primary);font-size:.9375rem;font-weight:600}
.rail-head p{color:var(--gray-400);font-size:.6875rem;margin-top:.2rem}
.rail-nav{padding:var(--sp-2) 0}
.rail-item{
  gap:var(--sp-3);
  padding:.62rem var(--sp-5);
  font-weight:500;
  font-size:.8125rem;
  border-right:2px solid transparent;
  color:var(--gray-700);
}
.rail-item:hover:not(.blocked){background:var(--gray-50);color:var(--exam-primary)}
.rail-item.active{
  background:var(--gray-50);
  color:var(--exam-primary);
  font-weight:600;
  border-right-color:var(--exam-accent);
}
.rail-icon svg:not(.lock){color:var(--exam-primary);opacity:.9}
.rail-copy b{font-weight:inherit;font-size:.8125rem}
.rail-copy small{color:var(--gray-400);font-size:.6875rem}
.rail-actions{border-top:1px solid var(--border-soft);padding:var(--sp-4);gap:var(--sp-2)}
.rail-secondary,.rail-primary{border-radius:var(--r-2);font-size:.75rem;font-weight:600}
.rail-secondary{border-color:var(--border-medium);background:#fff;color:var(--exam-primary)}
.rail-secondary:hover{background:var(--gray-50);border-color:var(--border-strong)}
.rail-primary{background:var(--exam-accent);color:#1B1405;border:1px solid var(--exam-accent)}
.rail-primary:hover{background:var(--exam-accent-light);opacity:1}
.rail-note{
  background:var(--blue-bg);
  border:1px solid var(--border-medium);
  border-radius:var(--r-2);
  color:var(--gray-500);
  font-size:.75rem;
}
.rail-papers{border-top:1px solid var(--border-soft)}
.rail-paper .rail-copy b{font-weight:inherit}
.collapse{color:var(--gray-400)}
.collapse:hover{color:var(--exam-primary)}

/* ============================================================
   7 · HOME / PROGRAM SURFACES
   The 520px brass radial blob is gone — it was decoration that
   competed with the headline. The hero is now pure type + a
   ruled stat block, which is what a study product should lead
   with.
   ============================================================ */
.home-hero{padding:var(--sp-12) 0 var(--sp-12);border-bottom:1px solid var(--border)}
.home-hero .bg-blob{display:none}
.hero-layout{gap:var(--sp-12);grid-template-columns:1.08fr .92fr}
.hero-copy .lead{max-width:48ch;font-size:1.0625rem;line-height:1.72;color:var(--muted)}
.hero-cta{gap:var(--sp-3);margin-top:var(--sp-5)}

.hero-facts{
  margin-top:var(--sp-8);
  padding-top:var(--sp-5);
  border-top:1px solid var(--border);
  gap:var(--sp-10);
}
.hero-facts b{color:var(--exam-primary);font-size:1.5rem;font-weight:600;line-height:1.1}
.hero-facts small{color:var(--gray-500);font-weight:500;font-size:.75rem;letter-spacing:.01em}

.desk-card{
  border-radius:var(--r-4);
  border-color:var(--border);
  box-shadow:var(--shadow-quiz);
  padding:var(--sp-5);
  background:#fff;
}
.desk-card .dc-head{margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-soft)}
.desk-card .dc-head b{font-size:.9375rem;font-weight:600}
.desk-card .dc-head span{color:var(--gray-400);font-size:.625rem;letter-spacing:.14em;font-weight:700}
.desk-card .big-num{font-family:var(--font-display);font-size:2.5rem;font-weight:600;color:var(--exam-primary)}
.desk-card .ring{font-family:var(--font-display);font-size:1.75rem;font-weight:600;color:var(--exam-accent-dark)}
.stat-row{gap:var(--sp-2);margin-top:var(--sp-4)}
.stat-box{
  background:var(--gray-50);
  border:1px solid var(--border-soft);
  border-radius:var(--r-2);
  padding:var(--sp-3);
}
.stat-box b{color:var(--exam-primary);font-size:1rem;font-weight:600}
.stat-box small{color:var(--gray-500);font-size:.6875rem;font-weight:500}
.mini-bars{gap:var(--sp-2);margin-top:var(--sp-4)}
.mini-bars div{font-size:.75rem;color:var(--gray-500)}
.mini-bars div i{height:4px;background:var(--border-soft);border-radius:0}
.mini-bars div i em{background:var(--exam-primary);border-radius:0}

.section-block{padding:var(--sp-16) 0;border-bottom:1px solid var(--border)}
.section-title{max-width:620px;margin-bottom:var(--sp-10)}
.section-title h2.display{font-size:clamp(1.55rem,2.5vw,2rem);margin:var(--sp-2) 0 var(--sp-3)}

/* exam route cards */
.exam-grid{gap:var(--sp-3);max-width:860px}
.exam-card{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-4) var(--sp-5);
  gap:var(--sp-4);
  transition:border-color .16s ease,background-color .16s ease;
}
.exam-card:hover{
  border-color:var(--exam-primary);
  background:#fff;
  transform:none;
  box-shadow:none;
}
.exam-card .tile{
  border-radius:var(--r-1);
  background:var(--exam-primary);
  font-family:var(--font-sans);
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.02em;
  width:2.4rem;height:2.4rem;
}
.exam-card .tile.gold{background:var(--exam-accent);color:#1B1405}
.exam-card b{font-size:.9375rem;font-weight:600}
.exam-card small{font-size:.8125rem;color:var(--gray-500)}
.exam-card svg{color:var(--gray-400);transition:transform .16s ease}
.exam-card:hover svg{transform:translateX(2px);color:var(--exam-primary)}

/* feature grid */
.feat-grid{gap:var(--sp-4)}
.feat{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-5);
  transition:border-color .16s ease;
}
.feat:hover{transform:none;box-shadow:none;border-color:var(--border-strong)}
.feat svg{color:var(--exam-primary);width:1.35rem;height:1.35rem}
.feat h3{font-size:.9375rem;font-weight:600;margin:var(--sp-3) 0 var(--sp-1)}
.feat p{font-size:.875rem;line-height:1.68}

/* The conversion band was a navy→blue gradient with a gold button.
   Flat navy with a hairline brass top rule is calmer and lets the
   accent button be the only bright thing on the page. */
.band-cta{
  background:var(--exam-primary);
  border-radius:var(--r-4);
  border-top:3px solid var(--exam-accent);
  padding:var(--sp-12) var(--sp-8);
  margin-top:var(--sp-10);
}
.band-cta h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:var(--sp-2)}
.band-cta p{opacity:.84;line-height:1.72;max-width:56ch}
.band-cta .btn{background:var(--exam-accent);border-color:var(--exam-accent);color:#1B1405}
.band-cta .btn:hover{background:var(--exam-accent-light);border-color:var(--exam-accent-light)}
.note-arch{color:var(--gray-400)}

/* fp-upsell shares the band-cta skin */
.fp-upsell{gap:var(--sp-6)}
.fp-upsell h2{font-family:var(--font-display);font-weight:600}
.fp-upsell .btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}
.fp-upsell .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8)}

/* ============================================================
   8 · TAGS, BADGES, CHIPS
   Square-ish, ruled, uppercase. Pills are reserved for genuinely
   pill-shaped controls, which is why these read as labels on a
   form rather than marketing bubbles.
   ============================================================ */
.chip,.badge,.hero-badges .badge,.q-tag,.ph-tag,.topic-weight{
  border-radius:var(--r-1);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.28rem .5rem;
  background:#fff;
  border:1px solid var(--border-medium);
  color:var(--gray-500);
  line-height:1.2;
}
.chip svg,.badge svg{width:.8rem;height:.8rem}
.hero-badges{gap:var(--sp-2);margin-bottom:var(--sp-4)}

/* the first badge is the product label: ink fill makes it the anchor */
.badge-gold,.chip.gold{
  background:var(--exam-primary);
  border-color:var(--exam-primary);
  color:#fff;
}
.badge-gold svg,.chip.gold svg{color:rgba(255,255,255,.85)}
.badge-blue,.chip.blue{
  background:#fff;
  border-color:var(--border-medium);
  color:var(--gray-500);
}
.badge-blue svg,.chip.blue svg{color:var(--gray-400)}

.ph-tag{
  background:var(--gray-50);
  border-color:var(--border-medium);
  color:var(--gray-500);
  margin-left:var(--sp-2);
}
.topic-weight{
  color:var(--exam-accent-dark);
  border-color:rgba(193,145,47,.4);
  background:var(--gold-tint);
  font-family:var(--font-sans);
  letter-spacing:.04em;
}

/* ============================================================
   9 · SYLLABUS / TOPIC / SET CARDS
   ============================================================ */
.syllabus-panel{margin:var(--sp-12) 0}
.syllabus-head{margin-bottom:var(--sp-8)}
.syllabus-head h2.display{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.syllabus-head p{max-width:var(--measure)}
.syllabus-grid{gap:var(--sp-4)}

.topic-card{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-5);
  gap:var(--sp-3);
  transition:border-color .16s ease;
}
.topic-card:hover{border-color:var(--border-strong);box-shadow:none}
.topic-head{gap:var(--sp-3)}
.topic-icon{
  width:1.75rem;height:1.75rem;
  border-radius:var(--r-1);
  background:var(--exam-primary);
  color:#fff;
}
.topic-icon svg{width:.95rem;height:.95rem}
.topic-card h3{font-size:.9375rem;font-weight:600;line-height:1.35}
.topic-card ul{font-size:.875rem;line-height:1.72;color:var(--gray-500);padding-left:1.05rem}
.topic-card ul li+li{margin-top:.2rem}

/* Syllabus bullets inside generated set-cards carry no icon, so they
   get the same hairline rule the section eyebrows use.
   site.css scopes .gate-points to the centred "unlock" card with
   max-width:380px + margin:auto; inside a set-card that produced a
   narrow, floating list, so it is reset to the card's full width. */
.set-card .gate-points{
  max-width:none;
  width:100%;
  margin:0;
  gap:.15rem;
}
.set-card .gate-points li{
  position:relative;
  padding-left:1rem;
  font-size:.875rem;
  line-height:1.68;
  color:var(--gray-500);
}
.set-card .gate-points li+li{margin-top:.15rem}
.set-card .gate-points li::before{
  content:"";
  position:absolute;
  left:0;top:.68em;
  width:.6rem;height:1px;
  background:var(--exam-accent);
}

.set-grid{gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.set-card{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-5);
  gap:var(--sp-4);
  transition:border-color .16s ease;
}
.set-card:hover{border-color:var(--border-strong)}
.set-card.is-done{border-color:var(--green-bd);background:#fff}
.set-head{gap:var(--sp-3)}
.set-no{
  width:2.5rem;height:2.5rem;
  border-radius:var(--r-1);
  background:var(--exam-primary);
  font-family:var(--font-sans);
  font-weight:700;
  font-size:.875rem;
  letter-spacing:.02em;
}
.set-title b{font-size:.9375rem;font-weight:600;color:var(--exam-primary);line-height:1.3}
.set-title small{font-size:.75rem;color:var(--gray-500);font-weight:500}
.set-bar i{height:5px;border:0;background:var(--border-soft);border-radius:0}
.set-bar i em{background:var(--exam-accent);border-radius:0}
.set-bar span{font-size:.75rem;color:var(--gray-500);font-weight:500}
.set-acc{font-size:.8125rem;font-weight:600}
.set-acc.good{color:var(--green-fg)}
.set-acc.bad{color:var(--red-fg)}
.set-actions{gap:var(--sp-2)}

/* ============================================================
   10 · QUESTION CARD  —  the core reading surface
   The signature move of this redesign: every question is set as
   a slip from an examination paper, with its number printed in a
   dedicated left margin instead of floating as a pill. The number
   is the scan target; the tags recede.
   ============================================================ */
/* The reading column is narrower than the syllabus grid above it, which is
   right — but it used to be centred, so its left edge did not line up with
   the breadcrumb and heading above and the page read as two different
   layouts. Align it to the same left rhythm instead. */
.quiz{max-width:820px;margin:0}
.q-list{gap:var(--sp-4)}

.q-item{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-4);
  padding:var(--sp-6) var(--sp-6) var(--sp-5) 5.25rem;
  box-shadow:var(--shadow-card);
  transition:border-color .16s ease;
}
.q-item.answered{border-color:var(--border-medium)}

/* the printed question number, sitting in the ruled margin */
.q-item .q-num{
  position:absolute;
  left:var(--sp-6);
  top:calc(var(--sp-6) - .15rem);
  width:2.5rem;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--exam-accent-dark);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.125rem;
  line-height:1;
  letter-spacing:-.01em;
  text-align:left;
  display:block;
  white-space:nowrap;
}

.q-item-head{gap:var(--sp-2);margin-bottom:var(--sp-3)}
.q-tag{
  background:var(--gray-50);
  border-color:var(--border-medium);
  color:var(--gray-500);
}
.q-topic{
  font-size:.75rem;
  font-weight:500;
  color:var(--gray-400);
  letter-spacing:.01em;
}
.q-set{font-size:.75rem;color:var(--gray-400);font-weight:500}

/* the stem is the thing being read — give it real size and air */
.q-stem{
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:500;
  color:var(--fg);
  max-width:var(--measure);
  margin:0 0 var(--sp-4);
}
.multi-hint{
  font-size:.8125rem;
  font-weight:500;
  color:var(--exam-accent-dark);
  margin:calc(var(--sp-1) * -1) 0 var(--sp-3);
}

.q-opts{gap:var(--sp-2)}
.q-opt{
  border-radius:var(--r-3);
  border:1px solid var(--border-medium);
  background:#fff;
  padding:.8rem .95rem;
  gap:var(--sp-3);
  font-size:.9375rem;
  line-height:1.62;
  color:var(--gray-700);
  min-height:52px;
  transition:border-color .16s ease,background-color .16s ease;
}
.q-opt:hover:not(:disabled){
  border-color:var(--exam-primary);
  background:var(--picked-bg);
}
.q-opt b{
  width:1.75rem;height:1.75rem;
  border-radius:var(--r-1);
  background:var(--gray-50);
  border:1px solid var(--border-medium);
  color:var(--exam-primary);
  font-size:.8125rem;
  font-weight:700;
  margin-top:.1rem;
}
.q-opt span{line-height:1.62}

/* selection (pre-check) reads as ink; correctness is semantic */
.q-opt.picked{border-color:var(--exam-primary);background:var(--picked-bg)}
.q-opt.picked b{background:var(--exam-primary);border-color:var(--exam-primary);color:#fff}

.q-opt.correct{border-color:var(--green-bd);background:var(--green-bg)}
.q-opt.correct b{background:var(--green-fg);border-color:var(--green-fg);color:#fff}
.q-opt.correct .mark.ok{color:var(--green-fg)}
.q-opt.wrong{border-color:var(--red-bd);background:var(--red-bg)}
.q-opt.wrong b{background:var(--red-fg);border-color:var(--red-fg);color:#fff}
.q-opt.wrong .mark.no{color:var(--red-fg)}

.q-foot{gap:var(--sp-4);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border-soft)}
.q-check{
  background:var(--exam-primary);
  color:#fff;
  border:0;
  border-radius:var(--r-2);
  padding:.6rem 1.2rem;
  font-size:.875rem;
  font-weight:600;
  min-height:40px;
  transition:background-color .16s ease;
}
.q-check:hover:not(:disabled){background:var(--exam-primary-light)}
.q-status{font-size:.8125rem;font-weight:600}
.q-status.is-correct{color:var(--green-fg)}
.q-status.is-wrong{color:var(--red-fg)}

/* Explanation: a ruled note, not a coloured cloud. A 3px semantic
   rule on the left carries the result; the body stays neutral so
   the prose is the only thing competing for attention. */
.q-explain{
  margin-top:var(--sp-4);
  border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:0 var(--r-3) var(--r-3) 0;
  background:var(--gray-50);
  padding:var(--sp-5);
}
.q-explain.is-correct{border-color:var(--border);border-left-color:var(--green-fg);background:#fff}
.q-explain.is-wrong{border-color:var(--border);border-left-color:var(--red-fg);background:#fff}
.ex-head{
  gap:var(--sp-3);
  align-items:baseline;
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-soft);
}
.ex-head b{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gray-500);
}
.q-explain.is-correct .ex-head b{color:var(--green-fg)}
.q-explain.is-wrong .ex-head b{color:var(--red-fg)}
.ex-head span{font-size:.8125rem;font-weight:600;color:var(--exam-primary)}
.ex-block h4{
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gray-400);
  font-weight:700;
  margin-bottom:var(--sp-2);
}
.ex-text,.ex-block p{
  font-size:1rem;
  line-height:1.85;
  color:var(--gray-700);
  max-width:var(--measure);
}
.ex-text.is-pending,.ex-block p.is-pending{color:var(--gray-400)}

/* ============================================================
   11 · PROGRESS STRIP
   ============================================================ */
.fp-progress{
  top:calc(var(--header-h) + var(--sp-2));
  border-radius:var(--r-3);
  border-color:var(--border);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-card-lg);
  padding:var(--sp-3) var(--sp-4);
  gap:var(--sp-4);
  margin:var(--sp-3) 0 var(--sp-4);
}
.fp-progress>span:first-child{font-size:.8125rem;font-weight:500;color:var(--gray-500)}
.fp-progress>span:first-child b{font-size:.9375rem;font-weight:600;color:var(--exam-primary)}
.fp-progress>i{height:4px;border:0;background:var(--border-soft);border-radius:0}
.fp-progress>i>em{background:var(--exam-accent);border-radius:0;transition:width .25s ease}
.fp-score{font-size:.8125rem;font-weight:600;color:var(--exam-primary)}
.runner-head h2{font-family:var(--font-display);font-weight:600}

/* ============================================================
   12 · MODE PICKER / RESUME BAR
   ============================================================ */
.mode-picker{
  border-radius:var(--r-3);
  border-color:var(--border);
  box-shadow:var(--shadow-card);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-5);
}
.mode-picker b{font-size:.9375rem;font-weight:600}
.mode-picker span{font-size:.8125rem;color:var(--gray-500)}
.mode-picker select{
  border-radius:var(--r-2);
  border-color:var(--border-strong);
  font-weight:500;
  font-size:.9375rem;
  color:var(--fg);
  min-height:44px;
}
.mode-picker select:focus{border-color:var(--exam-primary)}

.resume-bar{
  border-radius:var(--r-2);
  border:1px solid var(--border-medium);
  border-left:3px solid var(--exam-accent);
  background:var(--gray-50);
  color:var(--fg);
  font-size:.875rem;
  padding:var(--sp-3) var(--sp-4);
}
.resume-discard{border-color:var(--border-strong);border-radius:var(--r-1);color:var(--exam-primary)}
.resume-discard:hover{border-color:var(--exam-primary)}

/* ============================================================
   13 · FULL BANK (tabs, gate, wrong book, runner)
   ============================================================ */
.gate-card{
  border-radius:var(--r-4);
  border-color:var(--border);
  box-shadow:var(--shadow-quiz);
  padding:var(--sp-12) var(--sp-10);
  max-width:620px;
}
.gate-icon{
  width:2.75rem;height:2.75rem;
  border-radius:var(--r-1);
  background:var(--exam-primary);
  border:0;
  color:#fff;
}
.gate-icon svg{width:1.25rem;height:1.25rem}
.gate-card h1{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:600}
.gate-points{gap:var(--sp-2);max-width:400px}
.gate-points li{font-size:.9375rem;color:var(--gray-700);line-height:1.65}
.gate-points svg{color:var(--green-fg)}

.bank-stats{gap:var(--sp-3)}
.bank-stat{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-4) var(--sp-5);
}
.bank-stat b{font-family:var(--font-display);font-weight:600;font-size:1.5rem}
.bank-stat small{font-size:.75rem;color:var(--gray-500);font-weight:500}
.bank-sub{font-size:.9375rem}

.bank-tabs{gap:var(--sp-1);border-bottom:1px solid var(--border);margin-bottom:var(--sp-6)}
.bank-tab{
  border-radius:0;
  padding:.7rem 1rem;
  font-weight:500;
  font-size:.9375rem;
  color:var(--gray-500);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .16s ease,border-color .16s ease;
}
.bank-tab:hover{color:var(--exam-primary)}
.bank-tab.active{color:var(--exam-primary);font-weight:600;border-bottom-color:var(--exam-accent)}
.bank-tab em{
  border-radius:var(--r-1);
  background:var(--gray-50);
  border-color:var(--border-medium);
  font-size:.6875rem;
  color:var(--gray-500);
}
.bank-tab.active em{background:var(--exam-primary);border-color:var(--exam-primary);color:#fff}

.wrong-list{gap:var(--sp-3)}
.wrong-item{
  border-radius:var(--r-3);
  border-color:var(--border);
  border-left:3px solid var(--red-bd);
  padding:var(--sp-4) var(--sp-5);
}
.wrong-meta{gap:var(--sp-2);margin-bottom:var(--sp-2)}
.wrong-item .q-num.small{
  background:var(--gray-50);
  border:1px solid var(--border-medium);
  border-radius:var(--r-1);
  color:var(--exam-primary);
  font-family:var(--font-sans);
  font-size:.6875rem;
  font-weight:700;
  padding:.15rem .35rem;
  width:auto;
  position:static;
}
.wrong-set,.wrong-topic{font-size:.75rem;color:var(--gray-400);font-weight:500}
.wrong-stem{font-size:.9375rem;line-height:1.68;color:var(--gray-700);max-width:var(--measure)}
.wrong-pick{font-size:.8125rem;color:var(--gray-500);font-weight:600}
.link-back{color:var(--exam-primary);font-weight:600;font-size:.875rem}

/* ============================================================
   14 · PRICING
   ============================================================ */
.price-grid{gap:var(--sp-5)}
.price-card{
  border-radius:var(--r-4);
  border-color:var(--border);
  padding:var(--sp-8) var(--sp-6);
  box-shadow:var(--shadow-card);
}
.price-card.featured{
  border:1px solid var(--exam-primary);
  box-shadow:var(--shadow-card-lg);
}
.price-card .flag{
  background:var(--exam-primary);
  color:#fff;
  border-radius:var(--r-1);
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.1em;
  padding:.25rem .55rem;
  top:-11px;
}
.price-card h3{font-size:1rem;font-weight:600}
.price-card .amount{
  font-family:var(--font-display);
  font-weight:600;
  font-size:2.25rem;
  letter-spacing:-.02em;
  margin:var(--sp-2) 0 0;
}
.price-card .amount small{font-family:var(--font-sans);font-size:.9375rem;font-weight:500;color:var(--gray-500)}
.price-card .per{font-size:.875rem;color:var(--gray-500);margin-bottom:var(--sp-4)}
.price-card .per-day{
  font-size:.75rem;
  font-weight:600;
  color:var(--exam-accent-dark);
  margin:calc(var(--sp-1) * -1) 0 var(--sp-4);
}
.price-card ul{margin-bottom:var(--sp-6)}
.price-card ul li{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--gray-700);
  padding:.3rem 0 .3rem 1.4rem;
}
.price-card ul li::before{
  content:"";
  position:absolute;
  left:.05rem;top:.58rem;
  width:.4rem;height:.72rem;
  border:solid var(--green-fg);
  border-width:0 1.5px 1.5px 0;
  background:none;
  border-radius:0;
  transform:rotate(40deg);
}
.price-card ul li.off{color:var(--gray-400)}
.price-card ul li.off::before{
  left:.05rem;top:.95rem;
  width:.6rem;height:0;
  border-width:0 0 1.5px 0;
  border-color:var(--gray-300);
  transform:none;
}

.owned-band{
  border-radius:var(--r-3);
  border-color:var(--green-bd);
  background:var(--green-bg);
  padding:var(--sp-4) var(--sp-5);
}
.owned-band b{color:var(--green-fg);font-weight:600}
.owned-band span{color:var(--gray-700);font-size:.875rem}

.compare-wrap{border-radius:var(--r-3);border-color:var(--border)}
.compare-table th,.compare-table td{padding:.7rem 1rem;font-size:.875rem}
.compare-table thead th{
  font-size:.6875rem;
  letter-spacing:.09em;
  color:var(--gray-500);
  background:var(--gray-50);
  font-weight:700;
}
.compare-table thead th.hi{color:var(--exam-primary)}
.compare-table tbody th{font-weight:600;color:var(--gray-700)}
.compare-table .yes svg{color:var(--green-fg)}

.faq{gap:var(--sp-2);max-width:760px}
.faq-item{
  border-radius:var(--r-2);
  border-color:var(--border);
  padding:var(--sp-4) var(--sp-5);
}
.faq-item[open]{border-color:var(--border-medium)}
.faq-item summary{
  font-weight:600;
  font-size:.9375rem;
  color:var(--exam-primary);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--gray-400);font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-item p{font-size:.9375rem;line-height:1.78;color:var(--gray-700);max-width:var(--measure)}

.compact-list{gap:var(--sp-2);max-width:760px}
.compact-list li{
  border-radius:var(--r-2);
  border-color:var(--border);
  padding:var(--sp-4) var(--sp-5);
  font-size:.9375rem;
  color:var(--gray-700);
}
.compact-list li svg{color:var(--green-fg)}
.note{font-size:.8125rem;color:var(--gray-400)}

/* ============================================================
   15 · ABOUT / CONTACT / FORMS
   ============================================================ */
.about-grid{gap:var(--sp-5);max-width:940px}
.about-card{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-6);
}
.about-card svg{color:var(--exam-primary);width:1.45rem;height:1.45rem}
.about-card h3{font-size:1rem;font-weight:600;margin:var(--sp-3) 0 var(--sp-2)}
.about-card p{font-size:.9375rem;line-height:1.78}

.contact-grid{gap:var(--sp-10);max-width:960px}
.contact-card{
  border-radius:var(--r-4);
  border-color:var(--border);
  padding:var(--sp-6);
}
.contact-card h3{font-size:1rem;font-weight:600;margin-bottom:var(--sp-3)}
.contact-card .support-line{font-size:.9375rem;color:var(--gray-700);gap:var(--sp-3);margin:var(--sp-4) 0}
.contact-card .support-line svg{color:var(--exam-primary)}

.field{gap:var(--sp-2);margin-bottom:var(--sp-5)}
.field label{font-size:.8125rem;font-weight:600;color:var(--exam-primary);letter-spacing:.01em}
.field input,.field select,.field textarea{
  border-radius:var(--r-2);
  border-color:var(--border-strong);
  min-height:46px;
  padding:.7rem .85rem;
  font-size:.9375rem;
  color:var(--fg);
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--exam-primary);
  box-shadow:0 0 0 3px rgba(22,50,79,.12);
  outline:none;
}
.field textarea{min-height:140px}
.field .err{font-size:.75rem;color:var(--red-fg)}
.field.invalid input,.field.invalid textarea{border-color:var(--red-bd)}
.inline-err{
  background:var(--red-bg);
  border-color:var(--red-bd);
  color:var(--red-fg);
  border-radius:var(--r-2);
  font-size:.8125rem;
  padding:var(--sp-3) var(--sp-4);
}

/* ============================================================
   16 · AUTH / ACCOUNT
   ============================================================ */
.auth-wrap{max-width:420px}
.auth-card{
  border-radius:var(--r-4);
  border-color:var(--border);
  box-shadow:var(--shadow-quiz);
  padding:var(--sp-10) var(--sp-8);
}
.auth-card .brand-mark{
  width:2.4rem;height:2.4rem;
  border-radius:var(--r-1);
  background:var(--exam-primary);
  font-family:var(--font-sans);
  font-weight:700;
  font-size:.9375rem;
}
.auth-card h1{font-family:var(--font-display);font-weight:600;font-size:1.6rem;letter-spacing:-.015em}
.auth-card .sub{font-size:.9375rem;color:var(--gray-500)}
.auth-tabs{
  border-radius:var(--r-2);
  border-color:var(--border);
  background:var(--gray-50);
  padding:3px;
  gap:2px;
}
.auth-tabs button{border-radius:var(--r-1);font-weight:600;font-size:.875rem;min-height:36px}
.auth-tabs button.on{background:#fff;color:var(--exam-primary);box-shadow:var(--shadow-card)}
.auth-link-row a,.auth-alt a{color:var(--exam-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.auth-link-row a:hover,.auth-alt a:hover{text-decoration-color:var(--exam-accent)}
.auth-alt{border-top-color:var(--border-soft)}
.demo-note{
  border-radius:var(--r-2);
  background:var(--gray-50);
  border-color:var(--border);
  color:var(--gray-500);
  font-size:.75rem;
}

.account-head{
  border-radius:var(--r-4);
  border-color:var(--border);
  padding:var(--sp-6);
  margin-bottom:var(--sp-5);
}
.account-head .who{gap:var(--sp-4)}
.account-head .who .big-av{
  border-radius:var(--r-1);
  background:var(--exam-primary);
  color:#fff;
  width:2.75rem;height:2.75rem;
  font-size:1.0625rem;
  font-weight:700;
}
.account-head h2{font-size:1.125rem;font-weight:600}
.acct-grid{gap:var(--sp-4)}
.acct-stat{
  border-radius:var(--r-3);
  border-color:var(--border);
  padding:var(--sp-5);
}
.acct-stat b{font-family:var(--font-display);font-weight:600;font-size:1.75rem}
.acct-stat small{font-size:.75rem;font-weight:500;color:var(--gray-500)}
.acct-panel{border-radius:var(--r-3);border-color:var(--border);padding:var(--sp-5)}
.acct-panel h3{font-size:1rem;font-weight:600}
.acct-table th{
  font-size:.6875rem;
  letter-spacing:.09em;
  font-weight:700;
  color:var(--gray-400);
  border-bottom-color:var(--border);
}
.acct-table td{font-size:.875rem;border-bottom-color:var(--border-soft)}
.empty-note{color:var(--gray-400);font-size:.9375rem}

/* ============================================================
   17 · FOOTER
   ============================================================ */
.site-footer{background:var(--exam-primary);color:rgba(255,255,255,.76)}
.site-footer .footer-grid{
  /* footerHTML emits two children (brand + quick links); a third column
     left an empty gap the width of a link list, so this is two columns. */
  grid-template-columns:minmax(0,1fr) minmax(0,220px);
  gap:var(--sp-12);
  padding-top:var(--sp-16);
  padding-bottom:var(--sp-12);
}
.site-footer .footer-grid h3{
  color:#fff;
  font-family:var(--font-sans);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:var(--sp-4);
}
.site-footer .footer-grid a{color:rgba(255,255,255,.72);font-size:.875rem;line-height:1.5}
.site-footer .footer-grid a:hover{color:var(--exam-accent-light)}
.site-footer .logo-wrap{background:transparent;box-shadow:none;padding:0;width:auto;min-height:0}
.site-footer .site-brand-mono b{color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.1875rem}
.site-footer .site-brand-mono span{color:var(--exam-accent-light);font-size:.625rem;letter-spacing:.26em}
.site-footer .legal{
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.5);
  font-size:.75rem;
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-8);
}
.site-footer .legal p{max-width:820px;line-height:1.65}

/* ============================================================
   18 · TOAST / CHECKOUT MODAL / UNLOCK
   ============================================================ */
.toast{
  border-radius:var(--r-3);
  background:var(--exam-primary);
  box-shadow:var(--shadow-pop);
  font-size:.875rem;
  font-weight:500;
  padding:var(--sp-4) var(--sp-5);
  border-left:3px solid rgba(255,255,255,.35);
}
.toast.ok{background:#14563A;border-left-color:var(--green-bd)}
.toast.warn{background:#6B4A0E;border-left-color:var(--exam-accent-light)}
.toast.err{background:#7A1D16;border-left-color:var(--red-bd)}

.ck-card{
  border-radius:var(--r-4);
  box-shadow:var(--shadow-pop);
  padding:var(--sp-8);
}
.ck-card h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem}
.ck-rows>div{font-size:.9375rem}
.ck-rows dt{color:var(--gray-500);font-weight:500}
.ck-rows dd{color:var(--fg);font-weight:600}
.ck-amount{font-family:var(--font-display);font-weight:600;font-size:1.125rem}
.ck-note{font-size:.75rem;color:var(--gray-500)}
.ck-backdrop{background:rgba(16,24,40,.55)}

.unlock-card{
  border-radius:var(--r-4);
  border-color:var(--border);
  box-shadow:var(--shadow-quiz);
  padding:var(--sp-12) var(--sp-10);
}
.unlock-spin{border-color:var(--border);border-top-color:var(--exam-accent);border-radius:50%}

/* ============================================================
   19 · RESPONSIVE
   Below 600px the printed margin collapses: the question number
   returns to the flow so the stem keeps its full column width.
   ============================================================ */
@media (max-width:1024px){
  .rail.desktop{width:100%;min-height:auto;top:0;border-right:0;border-bottom:1px solid var(--border)}
  .hero-layout{grid-template-columns:1fr;gap:var(--sp-10)}
}
@media (max-width:900px){
  .syllabus-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr;max-width:440px}
  .hero-layout{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* The header carried five controls and overflowed 390px screens, so the
     "Unlock" button wrapped onto two lines and the sign-in label was
     squeezed. `display:contents` promotes the control children into the
     header row so they can be ordered explicitly; the zero-height ::after
     forces the break that keeps the grouping tidy:
        row 1  brand ............ Unlock full bank
        row 2  exam switcher ... language ... sign in
     Controls show their icon-less form to save width. */
  .nav-inner{flex-wrap:wrap;min-height:auto;padding-block:.5rem;row-gap:.4rem;column-gap:.5rem}
  .nav .brand{order:1;flex:1 1 auto;min-width:0}
  .nav-controls{display:contents}
  .nav .btn-accent.start{
    order:1;margin-left:auto;
    white-space:nowrap;
    padding:.5rem .8rem;
    font-size:.8125rem;
    min-height:38px;
  }
  .nav .btn-accent.start svg{display:none}
  .nav-inner::after{content:"";order:1;flex-basis:100%;width:100%;height:0}
  .exam-switch{order:2}
  .lang-pill{order:2;min-height:32px}
  .lang-pill .opt{min-width:2rem;height:1.4rem}
  .user-area{order:2;margin-left:auto}
  .user-btn{min-height:32px;padding:.3rem .6rem;font-size:.8125rem}
  .exam-switch-btn{padding:.35rem .5rem;font-size:.75rem}

  /* The study rail is the whole navigation on mobile and used to eat the
     first screen. Two columns fit the same links in half the height. */
  .rail-head{padding:var(--sp-3) var(--sp-4)}
  .rail-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px;
    padding:var(--sp-2) var(--sp-3);
  }
  .rail-item{
    padding:.55rem .6rem;
    border-right:0;
    border-left:2px solid transparent;
    gap:var(--sp-2);
  }
  .rail-item:hover:not(.blocked){background:var(--gray-50)}
  .rail-item.active{
    border-right-color:transparent;
    border-left-color:var(--exam-accent);
  }
  .rail-copy b{font-size:.75rem}
  .rail-copy small{font-size:.625rem}
  .rail-icon{flex-basis:1rem}
  .rail-icon svg:not(.lock){width:.9rem;height:.9rem}
  .rail-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:var(--sp-3) var(--sp-4);
  }
  .rail-actions .rail-secondary,.rail-actions .rail-primary{font-size:.6875rem;padding:.5rem .4rem}
  .rail-note{margin:var(--sp-2) var(--sp-3) 0}
}

@media (max-width:760px){
  .container{padding-inline:.875rem}
  .q-item{padding:var(--sp-5) var(--sp-4)}
  .q-item .q-num{
    position:static;
    width:auto;
    font-size:1rem;
    color:var(--exam-accent-dark);
  }
  .q-item-head{align-items:baseline;gap:var(--sp-2) var(--sp-3)}
  .q-stem{font-size:1rem;line-height:1.72}
  .ex-text,.ex-block p{font-size:.9375rem;line-height:1.8}
  .fp-progress{position:static;flex-wrap:wrap;row-gap:var(--sp-2)}
  .fp-progress>i{min-width:100%;order:3}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .acct-grid{grid-template-columns:1fr}
  .gate-card,.unlock-card,.auth-card{padding:var(--sp-8) var(--sp-5)}
  .band-cta{padding:var(--sp-8) var(--sp-5)}
  .section-block{padding:var(--sp-10) 0}
  .page-head h1.display,.hero-copy h1.display,.test-header h1.display{font-size:1.75rem}
  .hero-facts{gap:var(--sp-6)}
}
@media (max-width:480px){
  .stat-row{gap:var(--sp-2)}
  .stat-box{padding:var(--sp-2) var(--sp-3)}
  .stat-box small{font-size:.625rem}
  .fp-facts div{min-width:calc(50% - .3rem);flex:1 1 calc(50% - .3rem)}
  .q-opt{padding:.7rem .8rem;font-size:.9375rem}
  .bank-stats{gap:var(--sp-2)}
  .bank-stat{min-width:calc(50% - .25rem)}
}