/* =========================================================================
   ZIM Studies with Captain 37 — design tokens
   Display: Fraunces (editorial, academic gravitas)
   Body/UI: Plus Jakarta Sans (friendly, mobile-legible)
   Data/Utility: Space Mono (fees, codes, levels — ledger feel)
   ========================================================================= */
:root{
  --ink:#0E1F3C;
  --ink-soft:#3A4B6B;
  --blue:#3B6EC9;
  --blue-deep:#28508F;
  --orange:#F47920;
  --orange-deep:#D9650F;
  --gold:#C9A227;
  --paper:#F5F7FB;
  --paper-deep:#EAEFF8;
  --white:#FFFFFF;
  --line:#DCE3F0;
  --success:#1E8A5F;
  --danger:#C8402F;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Space Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(14,31,60,0.06);
  --shadow-md: 0 10px 30px rgba(14,31,60,0.10);
  --shadow-lg: 0 20px 50px rgba(14,31,60,0.16);
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--display); margin:0 0 .5em; line-height:1.12; font-weight:600; color:var(--ink);}
p{margin:0 0 1em;}
.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

.eyebrow{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color:var(--orange-deep); font-weight:700;
}
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:14px; }
.back-link:hover{ color:var(--ink); }
.section{padding:64px 0;}
.section--tight{padding:40px 0;}
.section--alt{background:var(--white);}
.section-head{max-width:680px; margin:0 0 36px;}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem);}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  padding:13px 22px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn--cta{ background:var(--orange); color:var(--white); box-shadow:0 6px 18px rgba(244,121,32,.35); }
.btn--cta:hover{ background:var(--orange-deep); transform:translateY(-2px); }
.btn--navy{ background:var(--ink); color:var(--white); }
.btn--navy:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.btn--outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--white); }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn--sm{ padding:9px 16px; font-size:.85rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------------- Topbar ---------------- */
.topbar{ background:var(--ink); color:#cfd9f0; font-size:.82rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 20px; }
.topbar__msg{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar__whatsapp{ color:var(--gold); font-weight:700; flex-shrink:0; }

/* ---------------- Header / Nav ---------------- */
.site-header{ background:#fff; position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
  width:42px; height:42px; border-radius:10px; background:var(--ink); color:var(--orange);
  font-family:var(--display); font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand__mark--img{ background:none; object-fit:contain; border-radius:0; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text strong{ font-family:var(--display); font-size:1.05rem; color:var(--ink); }
.brand__text small{ font-size:.68rem; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > a{ padding:10px 14px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--ink-soft); }
.main-nav > a:hover, .main-nav > a.active{ background:var(--paper-deep); color:var(--ink); }
.nav-cta{ margin-left:6px; }
.nav-search-link{ font-size:1.05rem; padding:8px 10px !important; border-radius:50%; line-height:1; }
.nav-search-link:hover, .nav-search-link.active{ background:var(--paper-deep); }

.nav-dropdown{ position:relative; }
.nav-dropdown__toggle{
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  padding:10px 14px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--ink-soft); font-family:var(--body);
}
.nav-dropdown__toggle:hover, .nav-dropdown.active .nav-dropdown__toggle{ background:var(--paper-deep); color:var(--ink); }
.nav-dropdown__panel{
  position:absolute; top:calc(100% + 8px); left:0; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:8px; min-width:200px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease;
}
.nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown__panel a{ display:block; padding:9px 12px; border-radius:6px; font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.nav-dropdown__panel a:hover{ background:var(--paper); color:var(--ink); }

@media (max-width: 980px){
  .nav-toggle{ display:flex; }
  .topbar__msg{ font-size:.74rem; }
  .main-nav{
    position:fixed;
    top:0; bottom:0; left:0; right:auto;
    width:80%; max-width:320px;
    background:var(--white); flex-direction:column; align-items:stretch;
    padding:90px 24px 24px; gap:4px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto; overflow-x:hidden;
    z-index:8000;
  }
  .main-nav.open{ transform:translateX(0); box-shadow:20px 0 40px rgba(0,0,0,.15); }
  /* Dim backdrop behind the open drawer */
  .main-nav.open::before{
    content:'';
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    z-index:-1;
    pointer-events:none;
  }
  .main-nav > a{ padding:14px 16px; font-size:1.05rem; }
  .nav-dropdown__toggle{ width:100%; justify-content:space-between; padding:14px 16px; font-size:1.05rem; }
  .nav-dropdown__panel{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; padding:0 0 0 12px; }
  .nav-dropdown.open .nav-dropdown__panel{ display:block; }
  .nav-cta{ margin:10px 16px 0; text-align:center; }
}

/* ---------------- Hero / Qualification Ladder ---------------- */
.hero{ position:relative; overflow:hidden; padding:56px 0 24px; background:
  radial-gradient(900px 420px at 85% -10%, rgba(244,121,32,.12), transparent 60%),
  radial-gradient(700px 380px at -5% 110%, rgba(59,110,201,.14), transparent 60%), var(--paper);
}
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero__copy h1{ font-size:clamp(2.1rem,5vw,3.4rem); }
.hero__copy h1 em{ font-style:italic; color:var(--orange-deep); }
.hero__copy p{ font-size:1.1rem; color:var(--ink-soft); max-width:480px; }
.hero__cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.hero__stats{ display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; }
.hero__stat strong{ display:block; font-family:var(--mono); font-size:1.5rem; color:var(--ink); }
.hero__stat span{ font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

/* The Ladder: signature element. A diagonal ascent of 4 stage cards. */
.ladder{ position:relative; padding:10px; }
.ladder__step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px; box-shadow:var(--shadow-sm); margin-bottom:14px; display:flex; gap:14px; align-items:flex-start;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  opacity:0; transform:translateY(16px); animation:ladderIn .5s ease forwards;
}
.ladder__step:nth-child(1){ margin-left:0%; animation-delay:.05s; }
.ladder__step:nth-child(2){ margin-left:8%; animation-delay:.18s; }
.ladder__step:nth-child(3){ margin-left:16%; animation-delay:.31s; }
.ladder__step:nth-child(4){ margin-left:24%; animation-delay:.44s; }
@keyframes ladderIn{ to{ opacity:1; transform:translateY(0); } }
.ladder__step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.ladder__num{
  font-family:var(--mono); font-weight:700; font-size:.95rem; color:var(--white); background:var(--ink);
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ladder__step:nth-child(4) .ladder__num{ background:var(--gold); color:var(--ink); }
.ladder__body{ flex:1; min-width:0; }
.ladder__body .level{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--blue-deep); }
.ladder__body h3{ font-size:1.05rem; margin:2px 0 4px; }
.ladder__body p{ font-size:.85rem; color:var(--ink-soft); margin:0; }
.ladder__promo{
  font-family:var(--mono); font-size:.68rem; font-weight:700; background:var(--orange); color:var(--white);
  padding:3px 9px; border-radius:999px; flex-shrink:0; white-space:nowrap;
}

@media (max-width: 980px){
  .hero__inner{ grid-template-columns:1fr; }
  .ladder__step:nth-child(1){ margin-left:0%; }
  .ladder__step:nth-child(2){ margin-left:4%; }
  .ladder__step:nth-child(3){ margin-left:8%; }
  .ladder__step:nth-child(4){ margin-left:12%; }
}
@media (max-width: 560px){
  .ladder__step{ margin-left:0 !important; padding:14px; }
  .ladder__body p{ display:none; }
}

/* ---------------- Promo countdown ---------------- */
.promo-countdown{ font-weight:700; }
.promo-countdown--urgent{ color:var(--danger); animation:promoCountdownPulse 1.6s ease-in-out infinite; }
@keyframes promoCountdownPulse{ 0%, 100% { opacity:1; } 50% { opacity:.55; } }

/* ---------------- Testimonials ---------------- */
.testimonial-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; position:relative;
}
.testimonial-card__mark{ font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--orange); opacity:.5; }
.testimonial-card__stars{ color:var(--gold); font-size:.95rem; letter-spacing:2px; margin-top:-8px; }
.testimonial-card__quote{ font-size:.96rem; color:var(--ink-soft); font-style:italic; line-height:1.6; flex:1; }
.testimonial-card__name{ font-weight:700; color:var(--ink); font-size:.92rem; margin:0; padding-top:10px; border-top:1px solid var(--line); }
.testimonial-card__name span{ display:block; font-weight:500; color:var(--ink-soft); font-size:.8rem; margin-top:2px; }

/* ---------------- Partners ---------------- */
.partner-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:36px; margin-top:18px; }
.partner-logo{
  display:flex; align-items:center; justify-content:center; height:48px; filter:grayscale(1); opacity:.65;
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
}
.partner-logo:hover{ filter:grayscale(0); opacity:1; transform:translateY(-2px); }
.partner-logo img{ max-height:42px; max-width:140px; object-fit:contain; }
.partner-logo__text{ font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink-soft); }

/* ---------------- Promo strip ---------------- */
.promo-strip{ background:var(--ink); color:var(--white); padding:14px 0; overflow:hidden; }
.promo-strip__track{ display:flex; gap:40px; white-space:nowrap; animation:scrollPromo 22s linear infinite; }
.promo-strip:hover .promo-strip__track{ animation-play-state:paused; }
.promo-strip__item{ font-family:var(--mono); font-size:.85rem; color:#FFD896; display:flex; align-items:center; gap:8px; }
@keyframes scrollPromo{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------- Program cards ---------------- */
.program-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.program-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.program-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.program-card__stage{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--blue-deep); margin-bottom:6px; }
.program-card h3{ font-size:1.25rem; margin-bottom:4px; }
.program-card p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:0; }
.program-card__tagline{ margin-bottom:14px; }
.program-card__foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.program-card__meta{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); margin-bottom:6px; }
.program-card__fee{ font-family:var(--mono); font-size:1.3rem; color:var(--ink); line-height:1.1; }
.program-card__fee small{ font-family:var(--body); font-size:.7rem; color:var(--ink-soft); font-weight:600; }
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge--orange{ background:#FDE7D6; color:var(--orange-deep); }
.badge--gold{ background:#F5EBC8; color:#8a6c10; }
.badge--blue{ background:#DDE7FA; color:var(--blue-deep); }
.badge--green{ background:#D9F0E5; color:var(--success); }
.program-card__promo{ position:absolute; top:14px; right:-34px; transform:rotate(40deg); background:var(--orange); color:#fff; font-family:var(--mono); font-size:.65rem; font-weight:700; padding:4px 40px; }

/* ---- Anchor tab nav ---- */
.prog-tabs{ display:flex; gap:8px; padding:14px 0; max-width:var(--w); margin:0 auto; position:sticky; top:0; background:var(--white); z-index:10; border-bottom:1px solid var(--line); padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); justify-content:center; flex-wrap:wrap; }
.prog-tab{ font-family:var(--mono); font-size:.78rem; font-weight:700; padding:7px 16px; border-radius:999px; border:1.5px solid var(--line); color:var(--ink-soft); transition:all .15s; white-space:nowrap; }
.prog-tab:hover{ border-color:var(--blue-deep); color:var(--blue-deep); }

/* ---- Combo card badge (different from SALE ribbon) ---- */
.program-card--combo{ border-color:var(--orange-deep); }
.program-card--combo .program-card__promo-tag{ font-family:var(--mono); font-size:.7rem; font-weight:700; color:var(--orange-deep); margin-bottom:6px; }
.combo-deadline{ font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--orange-deep); background:#FFF5EC; border:1px solid var(--orange); border-radius:6px; padding:5px 10px; margin-top:6px; display:inline-block; }
.combo-deadline-banner{ background:#FFF5EC; border:1.5px solid var(--orange-deep); border-radius:var(--radius-sm); padding:12px 18px; font-size:.9rem; color:var(--orange-deep); margin:14px 0; }
.combo-deadline-banner strong{ color:var(--ink); }

/* ---- Revision section ---- */
.revision-grid{ display:flex; flex-direction:column; gap:24px; }
.revision-stage__label{ font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--blue-deep); font-weight:700; margin-bottom:10px; }
.revision-subject-list{ display:flex; flex-direction:column; gap:2px; }
.revision-subject{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--white); border:1px solid var(--line); border-radius:10px; transition:box-shadow .15s; }
.revision-subject:hover{ box-shadow:var(--shadow-sm); }
.revision-subject__info{ display:flex; align-items:baseline; gap:14px; flex:1; }
.revision-subject__name{ font-weight:600; font-size:.95rem; }
.revision-subject__fee{ font-family:var(--mono); font-size:.95rem; color:var(--blue-deep); white-space:nowrap; }
.revision-subject__fee small{ font-family:var(--body); font-size:.7rem; color:var(--ink-soft); }

/* ---- Revision apply picker ---- */
.revision-pick-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; margin-bottom:6px; transition:border-color .15s, background .15s; }
.revision-pick-row:hover{ border-color:var(--blue-deep); }
.revision-pick-row--selected{ border-color:var(--blue-deep); background:#F0F5FF; }
.revision-pick-row input[type=checkbox]{ flex-shrink:0; width:18px; height:18px; accent-color:var(--blue-deep); cursor:pointer; }
.revision-pick-row__name{ flex:1; font-size:.92rem; font-weight:500; }
.revision-pick-row__fee{ font-family:var(--mono); font-size:.92rem; color:var(--blue-deep); white-space:nowrap; }

/* ---------------- What's Next After ZIM ---------------- */
.whats-next{
  background:var(--ink); color:var(--white); border-radius:var(--radius);
  padding:clamp(28px,5vw,52px); position:relative; overflow:hidden;
}
.whats-next::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 110% 0%, rgba(201,162,39,.18) 0%, transparent 65%),
             radial-gradient(ellipse 50% 70% at -10% 100%, rgba(59,110,201,.14) 0%, transparent 60%);
  pointer-events:none;
}
.whats-next__eyebrow{
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--gold); font-weight:700; display:block; margin-bottom:10px;
}
.whats-next__inner{ display:grid; grid-template-columns:1fr auto; gap:28px; align-items:start; position:relative; }
@media(max-width:680px){ .whats-next__inner{ grid-template-columns:1fr; } }
.whats-next h2{ font-size:clamp(1.5rem,3.5vw,2.1rem); color:var(--white); margin-bottom:10px; }
.whats-next__body{ color:rgba(255,255,255,.72); font-size:.95rem; line-height:1.65; margin-bottom:18px; max-width:560px; }
.whats-next__meta{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:24px; }
.whats-next__meta-item{ display:flex; flex-direction:column; gap:2px; }
.whats-next__meta-label{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); }
.whats-next__meta-value{ font-size:.88rem; color:var(--white); font-weight:600; }
.whats-next__card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); padding:20px 22px; min-width:200px; text-align:center;
}
.whats-next__card-label{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-bottom:6px; }
.whats-next__card-value{ font-family:var(--display); font-size:1.6rem; color:var(--gold); line-height:1; margin-bottom:3px; }
.whats-next__card-sub{ font-size:.72rem; color:rgba(255,255,255,.5); }
.btn--gold-outline{
  background:transparent; border:1.5px solid var(--gold); color:var(--gold);
  font-weight:700; transition:background .18s,color .18s;
}
.btn--gold-outline:hover{ background:var(--gold); color:var(--ink); }

/* ---------------- Subjects table ---------------- */
.subject-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.subject-table th, .subject-table td{ padding:13px 16px; text-align:left; font-size:.92rem; border-bottom:1px solid var(--line); }
.subject-table th{ background:var(--paper-deep); font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.subject-table td.fee{ font-family:var(--mono); }
.subject-table .was{ text-decoration:line-through; color:#9aa6bd; margin-right:6px; font-size:.85em; }
.subject-table tr:last-child td{ border-bottom:none; }

.qual-box{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:var(--radius-sm); padding:18px 20px; font-size:.92rem; color:var(--ink-soft); }
.qual-box strong{ color:var(--ink); }

/* ---------------- Calculator ---------------- */
.calc-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
.calc-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.calc-card h3{ font-size:1.1rem; }
.field-group{ margin-bottom:18px; }
.field-group label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; }
.field-hint{ font-size:.78rem; color:var(--ink-soft); margin-top:4px; }
select, input[type=text], input[type=email], input[type=tel], textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:var(--body);
  font-size:.95rem; background:var(--white); color:var(--ink); transition:border-color .15s;
}
select:focus, input:focus, textarea:focus{ border-color:var(--blue); }
.subject-picker{ display:grid; gap:10px; max-height:340px; overflow-y:auto; padding-right:4px; }
.subject-picker__group-label{
  font-family:var(--mono); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--blue-deep); padding:10px 2px 2px; border-top:1px dashed var(--line); margin-top:4px;
}
.subject-picker__group-label:first-child{ border-top:none; margin-top:0; padding-top:0; }

/* ---------------- Calculator level accordion ---------------- */
.level-accordion{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.level-accordion__item{ border-bottom:1px solid var(--line); }
.level-accordion__item:last-child{ border-bottom:none; }
.level-accordion__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper); border:none; padding:14px 16px; cursor:pointer; text-align:left; font-family:var(--body);
  transition:background .15s;
}
.level-accordion__head:hover{ background:var(--paper-deep); }
.level-accordion__item.open .level-accordion__head{ background:#FFF5EC; }
.level-accordion__title{ font-weight:700; font-size:.92rem; color:var(--ink); }
.level-accordion__title small{ font-weight:500; color:var(--ink-soft); }
.level-accordion__meta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.level-accordion__count{ font-family:var(--mono); font-size:.7rem; font-weight:700; background:var(--orange); color:#fff; padding:3px 9px; border-radius:999px; }
.level-accordion__meta .icon{ font-family:var(--mono); color:var(--orange); transition:transform .2s; font-size:1.1rem; }
.level-accordion__item.open .level-accordion__meta .icon{ transform:rotate(45deg); }
.level-accordion__body{ max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--white); }
.level-accordion__item.open .level-accordion__body{ max-height:1400px; }
.level-accordion__body-inner{ padding:12px 16px; display:grid; gap:8px; max-height:280px; overflow-y:auto; }
.subject-pick{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 14px; cursor:pointer; transition:border-color .15s, background .15s;
}
.subject-pick:has(input:checked){ border-color:var(--orange); background:#FFF5EC; }
.subject-pick input{ width:18px; height:18px; accent-color:var(--orange); flex-shrink:0; }
.subject-pick__name{ flex:1; font-weight:600; font-size:.92rem; }
.subject-pick__fee{ font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); white-space:nowrap; text-align:right; }
.subject-pick__fee .was{ text-decoration:line-through; color:#b6bfd4; margin-right:5px; }
.subject-pick__fee .now{ color:var(--orange-deep); font-weight:700; }
.subject-pick__promo-end{ display:block; font-family:var(--body); font-size:.65rem; font-weight:700; color:var(--orange-deep); white-space:nowrap; }

.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:#D5DCEC; border-radius:999px; cursor:pointer; transition:.2s; }
.switch .slider::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .slider{ background:var(--orange); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

.summary-card{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:26px; position:sticky; top:96px; }
.summary-card h3{ color:#fff; font-size:1.05rem; }
.summary-line{ display:flex; justify-content:space-between; gap:10px; font-size:.88rem; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#C7D2EA; }
.summary-line strong{ color:#fff; font-family:var(--mono); }
.summary-line.discount strong{ color:#8FE3B5; }
.summary-hero{
  background:rgba(244,121,32,.12); border:1px solid rgba(244,121,32,.3); border-radius:var(--radius-sm);
  padding:16px 18px; margin:12px 0; text-align:center;
}
.summary-hero__label{ display:block; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:#FFD896; }
.summary-hero__amount{ display:block; font-family:var(--mono); font-size:2.1rem; font-weight:700; color:#fff; margin:4px 0 2px; line-height:1.1; }
.summary-hero__note{ display:block; font-size:.72rem; color:#C7D2EA; }
.summary-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.2); }
.summary-total span{ font-size:.78rem; color:#9fb0d6; }
.summary-total strong{ font-family:var(--mono); font-size:1.05rem; color:#C7D2EA; font-weight:700; }
.summary-savings{ background:rgba(143,227,181,.14); color:#8FE3B5; border-radius:var(--radius-sm); padding:10px 14px; font-size:.85rem; font-weight:700; margin-top:14px; display:flex; justify-content:space-between; }
.summary-cap-note{ font-size:.72rem; color:#9fb0d6; margin-top:8px; }
.summary-unlock{ background:rgba(255,216,150,.14); color:#FFD896; border-radius:var(--radius-sm); padding:9px 12px; font-size:.78rem; font-weight:600; margin:4px 0 8px; }
.summary-estimate-note{ font-size:.74rem; color:#9fb0d6; margin-top:6px; line-height:1.5; }
.promo-msg{ font-size:.8rem; margin-top:8px; padding:8px 10px; border-radius:8px; }
.promo-msg.valid{ background:rgba(143,227,181,.16); color:#8FE3B5; }
.promo-msg.invalid{ background:rgba(255,150,140,.16); color:#FFB3A8; }

@media (max-width: 980px){
  .calc-layout{ grid-template-columns:1fr; }
  .summary-card{ position:static; }
}

/* ---------------- Application form / payment panel ---------------- */
.apply-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
.payment-panel{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:sticky; top:96px; }
.payment-panel h3{ font-size:1.05rem; }
.payment-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.payment-row span:first-child{ color:var(--ink-soft); }
.payment-row span:last-child{ font-family:var(--mono); font-weight:700; }
.payment-note{ background:#FFF5EC; border-radius:var(--radius-sm); padding:12px 14px; font-size:.82rem; color:var(--orange-deep); margin-top:14px; }
@media (max-width: 980px){ .apply-layout{ grid-template-columns:1fr; } .payment-panel{ position:static; order:-1; } }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.member-box{ border:1.5px dashed var(--gold); background:#FBF6E6; border-radius:var(--radius-sm); padding:16px; margin:18px 0; }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-category-heading{ font-size:1rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.07em; font-family:var(--mono); margin:32px 0 4px; padding-bottom:8px; border-bottom:2px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:18px 4px; font-family:var(--display); font-size:1.05rem; font-weight:600; color:var(--blue-deep); display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; transition:color .15s; }
.faq-q:hover{ color:var(--orange-deep); }
.faq-item.open .faq-q{ color:var(--orange-deep); }
.faq-q span.icon{ font-family:var(--mono); color:var(--orange); transition:transform .2s; flex-shrink:0; }
.faq-item.open .faq-q span.icon{ transform:rotate(45deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; overflow:hidden; }
.faq-a > .faq-a__inner{ min-height:0; }
.faq-item.open > .faq-a{ grid-template-rows:1fr; }
.faq-a__inner{ padding:0 4px 18px; color:var(--ink-soft); font-size:.94rem; }

/* ── Public FAQ redesign ── */
.faq-public .faq-item{
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  margin-bottom:8px;
  background:var(--white);
  transition:border-color .2s, box-shadow .2s;
  overflow:hidden; /* belt-and-suspenders clip on the card */
}
.faq-public .faq-item:last-child{ margin-bottom:0; }
.faq-public .faq-item.open{
  border-color:var(--blue-deep);
  box-shadow:var(--shadow-sm);
}
.faq-public .faq-q{
  padding:16px 20px;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:transparent;
  border-bottom:1.5px solid transparent;
  transition:color .15s, border-color .15s, background .15s;
}
.faq-public .faq-item.open .faq-q{
  color:var(--blue-deep);
  background:var(--paper);
  border-bottom-color:var(--line);
}
.faq-public .faq-q span.icon{
  font-size:.9rem;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--paper-deep);
  display:inline-flex;
  align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform .25s, background .15s, color .15s;
  color:var(--blue-deep);
  font-weight:700;
}
.faq-public .faq-item.open .faq-q span.icon{
  background:var(--blue-deep);
  color:var(--white);
}

/* Answer panel — max-height approach ensures NOTHING shows when collapsed.
   Background-only distinction (no border) because borders render at the
   box level and can bleed through even at height:0. */
.faq-public .faq-a{
  display:block !important;          /* override grid-based approach for public FAQ */
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-public .faq-item.open .faq-a{
  max-height:1200px;                 /* tall enough for any FAQ answer */
}
.faq-public .faq-a__inner{
  padding:0 !important;              /* reset any inherited padding that could bleed */
}
.faq-public .faq-a > .faq-a__inner > .faq-answer-body{
  padding:18px 20px 22px 24px;
  background:var(--paper);          /* different from question (white) — clear visual distinction */
  font-size:.93rem;
  line-height:1.75;
  color:var(--ink-soft);
}
.faq-public .faq-a > .faq-a__inner > .faq-answer-body a{ color:var(--blue); text-decoration:underline; }
.faq-public .faq-a > .faq-a__inner > .faq-answer-body ol,
.faq-public .faq-a > .faq-a__inner > .faq-answer-body ul{ margin:8px 0; padding-left:20px; }
.faq-public .faq-a > .faq-a__inner > .faq-answer-body li{ margin-bottom:5px; }

/* ---------------- Media library ---------------- */
.media-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }

/* ---- Guide image grid ---- */
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.guide-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:0; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .18s,box-shadow .18s; text-align:left; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.guide-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.guide-card__badge{ position:absolute; top:8px; right:8px; background:var(--orange); color:#fff; font-family:var(--mono); font-size:.65rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.guide-card__badge--price{ background:var(--blue-deep); }
.guide-card__badge--free{ background:var(--green,#1E8A5F); }
.guide-card__cover{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:var(--radius) var(--radius) 0 0; }
.guide-card__placeholder{ width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-size:3rem; background:var(--bg); border-radius:var(--radius) var(--radius) 0 0; }
.guide-card__title{ font-weight:700; font-size:.88rem; padding:10px 12px 2px; line-height:1.3; }
.guide-card__subject{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); padding:0 12px 4px; }
.guide-card__price{ font-family:var(--mono); font-size:.82rem; color:var(--orange-deep); font-weight:700; padding:0 12px 12px; margin-top:auto; }

/* ---- Exam papers — full redesign ---- */

/* Stage filter bar */
.ep-stage-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.ep-stage-btn{ font-family:var(--mono); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:6px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft); cursor:pointer; transition:all .15s; }
.ep-stage-btn:hover{ border-color:var(--blue-deep); color:var(--blue-deep); }
.ep-stage-btn.active{ background:var(--blue-deep); border-color:var(--blue-deep); color:var(--white); }

/* Stage badges */
.ep-badge{ font-family:var(--mono); font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:999px; display:inline-block; letter-spacing:.06em; }
.ep-badge--l1{ background:#EBF0FF; color:var(--blue-deep); }
.ep-badge--l2{ background:#E8F4FF; color:#1565C0; }
.ep-badge--l3{ background:#E8F5E9; color:#2E7D32; }
.ep-badge--l4{ background:#FFF8E1; color:#F57F17; }
.ep-badge--l0{ background:var(--line); color:var(--ink-soft); }

/* Subject cards grid */
.ep-subjects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.ep-subject-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s; }
.ep-subject-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ep-subject-card__top{ margin-bottom:14px; }
.ep-subject-card__name{ font-size:1rem; font-weight:700; margin:6px 0 4px; color:var(--ink); line-height:1.3; }
.ep-subject-card__meta{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin:0; }

/* Paper chips */
.ep-papers-row{ display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:14px; }
.ep-chip{ font-family:var(--mono); font-size:.74rem; font-weight:700; padding:6px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .15s; }
.ep-chip:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }
.ep-chip--latest{ border-color:var(--blue); color:var(--blue-deep); background:#EBF0FF; }
.ep-chip--latest:hover{ background:var(--blue-deep); color:#fff; }

/* Reader backdrop */
.ep-reader-backdrop{ position:fixed; inset:0; background:rgba(14,31,60,0.55); backdrop-filter:blur(3px); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.ep-reader-backdrop.open{ opacity:1; pointer-events:all; }

/* Reader panel */
.ep-reader{ background:var(--white); border-radius:var(--radius); width:100%; max-width:720px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; max-height:calc(100vh - 48px); overflow:hidden; position:relative; }

/* Reader header — looks like an actual exam cover */
.ep-reader__header{ background:var(--ink); color:var(--white); padding:28px 32px 20px; flex-shrink:0; position:relative; }
.ep-reader__close{ position:absolute; top:16px; right:16px; background:rgba(255,255,255,.12); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.ep-reader__close:hover{ background:rgba(255,255,255,.24); }
.ep-reader__institution{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:8px; }
.ep-reader__subject{ font-family:var(--display); font-size:1.5rem; font-weight:700; margin:0 0 6px; line-height:1.2; }
.ep-reader__meta{ font-family:var(--mono); font-size:.75rem; opacity:.7; margin:0; }
.ep-reader__rule{ border:none; border-top:1px solid rgba(255,255,255,.2); margin:16px 0 12px; }
.ep-reader__simulated-badge{ display:inline-block; background:var(--gold); color:var(--ink); font-family:var(--mono); font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.04em; }

/* Reader body — scrollable */
.ep-reader__body{ flex:1; overflow-y:auto; padding:28px 32px; scroll-behavior:smooth; }

/* Question formatting inside the reader */
.ep-section-head{ font-family:var(--mono); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--blue-deep); margin:24px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--line); }
.ep-question-head{ font-weight:700; font-size:.97rem; color:var(--ink); margin:18px 0 6px; }
.ep-subq{ padding-left:20px; margin-bottom:5px; font-size:.92rem; color:var(--ink-soft); line-height:1.65; }
.ep-line{ font-size:.92rem; line-height:1.7; color:var(--ink); margin-bottom:4px; }
.ep-spacer{ height:10px; }
.ep-rule{ border:none; border-top:1px dashed var(--line); margin:16px 0; }
.ep-disclaimer{ font-family:var(--mono); font-size:.74rem; color:var(--gold); font-weight:700; background:#FFF9EC; border:1px solid var(--gold); border-radius:6px; padding:8px 12px; margin-bottom:16px; display:none; } /* hidden inside reader — already shown in header */

/* Reader footer */
.ep-reader__foot{ display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:16px 28px; border-top:1px solid var(--line); flex-shrink:0; }
.media-tab{ padding:10px 18px; border-radius:999px; border:1.5px solid var(--line); font-weight:700; font-size:.88rem; background:var(--white); }
.media-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.media-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.media-card__type{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; color:var(--blue-deep); letter-spacing:.06em; }
.media-card h4{ font-family:var(--body); font-weight:700; font-size:1rem; margin:6px 0 8px; }
.media-card audio, .media-card video{ width:100%; border-radius:8px; margin-top:8px; }
.media-card iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:8px; margin-top:8px; }
.media-card__meta{ font-size:.78rem; color:var(--ink-soft); margin-top:6px; }

/* ---------------- Misc blocks ---------------- */
.steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:860px){ .steps-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps-row{ grid-template-columns:1fr; } }
.step-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.step-card .num{ font-family:var(--mono); font-size:.78rem; color:var(--orange-deep); font-weight:700; }
.step-card h4{ font-size:1rem; margin:6px 0; }
.step-card p{ font-size:.85rem; color:var(--ink-soft); margin:0; }

.alert{ padding:14px 18px; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:20px; }
.alert--success{ background:#D9F0E5; color:#11643f; }
.alert--error{ background:#FBE2DE; color:#8c2c1f; }
.alert--info{ background:#DDE7FA; color:var(--blue-deep); }

.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }

.ref-card{ background:var(--white); border:2px dashed var(--gold); border-radius:var(--radius); padding:28px; text-align:center; }
.ref-card .ref-code{ font-family:var(--mono); font-size:1.8rem; font-weight:700; color:var(--ink); letter-spacing:.04em; margin:8px 0; }

/* ---------------- Fee breakdown on light cards (thank-you, status) ---------------- */
/* Distinct from .summary-line/.summary-total, which are tuned for the dark
   .summary-card sidebar on the calculator — those are unreadably faint on a
   white background, which is exactly the bug this fixes. */
.fee-hero{ background:linear-gradient(135deg, var(--ink), var(--blue-deep)); border-radius:var(--radius); padding:26px 24px; text-align:center; margin:18px 0; }
.fee-hero__label{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:#9fb0d6; }
.fee-hero__amount{ font-family:var(--mono); font-size:2.6rem; font-weight:700; color:#fff; margin:6px 0 2px; line-height:1.1; }
.fee-hero__note{ font-size:.78rem; color:#C7D2EA; max-width:380px; margin:4px auto 0; }
.fee-line{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); }
.fee-line strong{ color:var(--ink); font-family:var(--mono); font-weight:700; }
.fee-line--discount{ color:var(--success); }
.fee-line--discount strong{ color:var(--success); }
.fee-line--total{ border-top:2px solid var(--line); border-bottom:none; margin-top:4px; padding-top:14px; }
.fee-line--total strong{ font-size:1.05rem; }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--ink); color:#AEBBDA; padding:56px 0 0; margin-top:60px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:40px; }
.footer__col h4{ color:#fff; font-family:var(--body); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer__col a{ display:block; padding:5px 0; font-size:.88rem; color:#AEBBDA; }
.footer__col a:hover{ color:#fff; }
.footer__about{ font-size:.86rem; margin-top:14px; max-width:280px; }
.brand--footer .brand__mark{ background:var(--orange); color:var(--ink); }
.brand--footer .brand__text strong{ color:#fff; }
.brand--footer .brand__text small{ color:#8a9ac1; }
.footer__small{ display:block; font-size:.78rem; padding:5px 0; color:#8a9ac1; }
.footer__disclaimer{ border-top:1px solid rgba(255,255,255,.12); padding:20px 20px 26px; font-size:.76rem; color:#8a9ac1; line-height:1.6; }
.footer__copyright{ margin-top:10px; font-size:.76rem; }
.footer__maintainer-link{ background:none; border:none; padding:0; font:inherit; color:var(--gold); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.footer__maintainer-link:hover{ color:#fff; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

.whatsapp-fab{
  position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.45); z-index:60;
}

/* utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.flex{ display:flex; }
.gap-8{ gap:8px; }

/* Search result highlight — flashes around the exact element a search
   result links to, so it's unmistakable which one matched. */
@keyframes searchHighlightPulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(244,121,32,0); }
  20% { box-shadow:0 0 0 5px rgba(244,121,32,.35); }
}
.search-highlight{
  animation:searchHighlightPulse 1.3s ease-in-out 3;
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:8px;
  background-color:#FFF5EC;
}

/* ---------------- Public modal (Recommend Us, etc.) ---------------- */
.a-modal-backdrop{ position:fixed; inset:0; background:rgba(14,31,60,.6); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }
.a-modal-backdrop.open{ display:flex; }
.a-modal{ background:var(--white); border-radius:var(--radius); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:28px; position:relative; box-shadow:var(--shadow-lg); }
.a-modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink-soft); line-height:1; }
.a-modal h3{ margin-bottom:8px; }

/* ── Combo cards (redesigned) ── */
.combo-grid{ display:flex; flex-direction:column; gap:20px; }
.combo-card{ background:var(--white); border:2px solid var(--orange-deep); border-radius:var(--radius); box-shadow:var(--shadow-sm); display:grid; grid-template-columns:1fr 280px; overflow:hidden; transition:box-shadow .18s; }
.combo-card:hover{ box-shadow:var(--shadow-md); }
.combo-card__left{ padding:28px 28px 24px; display:flex; flex-direction:column; gap:0; }
.combo-card__badge{ font-family:var(--mono); font-size:.7rem; font-weight:700; color:var(--orange-deep); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.combo-card__name{ font-size:1.3rem; font-weight:700; color:var(--ink); margin:0 0 6px; }
.combo-card__tagline{ color:var(--blue-deep); font-weight:600; font-size:.95rem; margin:0 0 8px; }
.combo-card__desc{ color:var(--ink-soft); font-size:.88rem; margin:0 0 12px; line-height:1.55; }
.combo-card__pricing{ margin:14px 0 18px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.combo-card__price{ font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1; }
.combo-card__price small{ font-family:var(--body); font-size:.72rem; color:var(--ink-soft); font-weight:600; }
.combo-card__exam{ font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); margin-top:5px; }
.combo-card__exam span{ opacity:.7; }
.combo-card__right{ background:linear-gradient(145deg,#FFF5EC,#FFF9F5); border-left:1px solid var(--orange); padding:24px 22px; }
.combo-card__subj-label{ font-family:var(--mono); font-size:.74rem; font-weight:700; color:var(--orange-deep); text-transform:uppercase; letter-spacing:.07em; margin:0 0 12px; }
.combo-card__subj-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.combo-card__subj-list li{ font-size:.88rem; color:var(--ink); padding-left:16px; position:relative; line-height:1.4; }
.combo-card__subj-list li::before{ content:'✓'; position:absolute; left:0; color:var(--orange-deep); font-weight:700; font-size:.75rem; }
.combo-card__saving{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--orange); }
.combo-card__saving-original{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); text-decoration:line-through; margin-bottom:4px; }
.combo-card__saving-amount{ font-family:var(--mono); font-size:1rem; font-weight:700; color:var(--orange-deep); letter-spacing:.02em; }
@media(max-width:680px){ .combo-card{ grid-template-columns:1fr; } .combo-card__right{ border-left:none; border-top:1px solid var(--orange); } }

/* ═══════════════════════════════════════════════════════════════════
   HOVER HIGHLIGHTS — append these rules to the bottom of style.css
   Cards, steps, subject picks, and info stacks all lift gently on hover.
   Transitions are kept short (0.15–0.18s) so they feel instant, not sluggish.
   ═══════════════════════════════════════════════════════════════════ */

/* Programme cards */
.program-card {
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.program-card:hover {
  box-shadow: 0 8px 28px rgba(14,31,60,.13);
  transform: translateY(-4px);
  border-color: #c0cde8;
}

/* Step cards (How it works) */
.step-card {
  transition: box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.step-card:hover {
  box-shadow: 0 6px 22px rgba(14,31,60,.1);
  transform: translateY(-3px);
  background: var(--white);
}

/* Subject picker rows (calculator / apply) */
.subject-pick {
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.subject-pick:hover {
  box-shadow: 0 4px 14px rgba(14,31,60,.09);
  transform: translateY(-2px);
  border-color: var(--orange);
}

/* Guide cards */
.guide-card {
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.guide-card[data-guide-id]:hover {
  box-shadow: 0 8px 28px rgba(14,31,60,.14);
  transform: translateY(-5px);
  border-color: var(--orange);
}

/* Media cards (audio / video) */
.media-card {
  transition: box-shadow .16s ease, transform .16s ease;
}
.media-card:hover {
  box-shadow: 0 6px 22px rgba(14,31,60,.1);
  transform: translateY(-3px);
}

/* Testimonial cards */
.testimonial-card {
  transition: box-shadow .16s ease, transform .16s ease;
}
.testimonial-card:hover {
  box-shadow: 0 6px 22px rgba(14,31,60,.1);
  transform: translateY(-3px);
}

/* Combo cards */
.combo-card {
  transition: box-shadow .16s ease, transform .16s ease;
}
.combo-card:hover {
  box-shadow: 0 8px 28px rgba(14,31,60,.12);
  transform: translateY(-4px);
}

/* Ladder steps (homepage) */
.ladder__step {
  transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.ladder__step:hover {
  box-shadow: 0 6px 20px rgba(14,31,60,.15);
  transform: translateY(-3px);
}

/* What's Next card */
.whats-next {
  transition: box-shadow .16s ease;
}
.whats-next:hover {
  box-shadow: 0 10px 36px rgba(14,31,60,.1);
}

/* Generic .card utility (used on calculator, status, contact pages) */
.calc-card {
  transition: box-shadow .16s ease;
}
.calc-card:hover {
  box-shadow: 0 6px 22px rgba(14,31,60,.09);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE ADDITIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Root overflow fix ──────────────────────────────────────────
   overflow-x:hidden on html clips position:fixed children (like the
   nav drawer) that body's overflow cannot reach.
   The nav drawer fix above (right:0 + max-width:100vw) is the primary
   cure; this is the belt-and-suspenders backstop.                   */
/* overflow-x on html intentionally omitted — it breaks position:fixed in Chrome/Android.
   Body overflow-x:hidden is enough for non-fixed content. */
body { overflow-x: hidden; max-width: 100%; }

/* ── 2. Promo strip containment ── */
.promo-strip { overflow: hidden; max-width: 100vw; }
.ladder      { overflow: hidden; }

/* ── 3. Buttons at narrow widths ── */
@media (max-width: 480px) {
  .btn              { white-space: normal; text-align: center; }
  .hero__cta-row    { flex-direction: column; align-items: stretch; }
  .hero__cta-row .btn { width: 100%; justify-content: center; }
}

/* ── 4. Section padding ── */
@media (max-width: 640px) {
  .section        { padding: 44px 0; }
  .section--tight { padding: 26px 0; }
  .section-head   { margin-bottom: 24px; }
  .hero           { padding: 36px 0 16px; }
}

/* ── 5. Subject table ── */
@media (max-width: 640px) {
  .subject-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .subject-table td, .subject-table th { white-space: normal; min-width: 90px; }
  .subject-table td.fee                { white-space: nowrap; min-width: 70px; }
}

/* ── 6. Calculator / Apply layout ── */
@media (max-width: 980px) {
  .calc-layout   { grid-template-columns: 1fr; }
  .apply-layout  { grid-template-columns: 1fr; }
  .summary-card  { position: static; }
  .payment-panel { position: static; order: -1; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ── 7. Inline grid overrides (program.php qual-boxes) ── */
@media (max-width: 640px) {
  .section--tight .container > div[style*="grid-template-columns"],
  .section--alt   .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 8. Combo card ── */
@media (max-width: 680px) {
  .combo-card            { grid-template-columns: 1fr; }
  .combo-card__right     { border-left: none; border-top: 1px solid var(--orange); padding: 18px 16px; }
  .combo-card__left      { padding: 20px 18px 18px; }
  .combo-card__name      { font-size: 1.1rem; }
}

/* ── 9. What's Next ── */
@media (max-width: 680px) {
  .whats-next__inner { grid-template-columns: 1fr; }
  .whats-next        { padding: 24px 20px; }
  .whats-next__card  { min-width: 0; }
}

/* ── 10. Steps row ── */
@media (max-width: 860px) { .steps-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-row { grid-template-columns: 1fr; } }

/* ── 11. Footer ── */
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer__grid       { grid-template-columns: 1fr; gap: 22px; }
  .site-footer        { padding-top: 40px; }
  .footer__disclaimer { padding: 16px 16px 20px; }
}

/* ── 12. Programme grid ── */
@media (max-width: 480px) {
  .program-grid { grid-template-columns: 1fr; }
}

/* ── 13. Tab bars: scroll horizontally, never wrap ── */
.prog-tabs, .media-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.prog-tabs::-webkit-scrollbar,
.media-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 480px) {
  .prog-tab  { font-size: .72rem; padding: 6px 12px; }
  .media-tab { font-size: .82rem; padding: 8px 14px; white-space: nowrap; }
}

/* ── 14. Revision rows ── */
@media (max-width: 520px) {
  .revision-subject      { flex-direction: column; align-items: flex-start; gap: 10px; }
  .revision-subject__info{ flex-direction: column; gap: 2px; }
  .revision-subject__fee { white-space: normal; }
}
@media (max-width: 400px) {
  .revision-pick-row     { padding: 9px 10px; }
  .revision-pick-row__fee{ font-size: .82rem; white-space: normal; }
}

/* ── 15. Clamp large numbers ── */
.summary-hero__amount { font-size: clamp(1.4rem, 6vw, 2.1rem); }
.fee-hero__amount     { font-size: clamp(1.6rem, 7vw, 2.6rem); }
.ref-card .ref-code   { font-size: clamp(1.1rem, 5vw, 1.8rem); }

/* ── 16. Media / guide grids ── */
@media (max-width: 580px) { .media-grid { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .guide-grid { grid-template-columns: 1fr; } }

/* ── 17. Exam paper reader ── */
@media (max-width: 560px) {
  .ep-reader-backdrop { padding: 0; align-items: flex-end; }
  .ep-reader          { border-radius: var(--radius) var(--radius) 0 0; max-height: 92vh; }
  .ep-reader__header  { padding: 20px 18px 16px; }
  .ep-reader__body    { padding: 20px 18px; }
  .ep-reader__foot    { padding: 14px 18px; flex-wrap: wrap; }
  .ep-reader__subject { font-size: 1.2rem; }
}
@media (max-width: 480px) { .ep-subjects { grid-template-columns: 1fr; } }

/* ── 18. Payment / fee rows ── */
@media (max-width: 400px) {
  .payment-row { flex-direction: column; gap: 2px; }
  .fee-line    { flex-direction: column; gap: 2px; }
}

/* ── 19. Card padding ── */
@media (max-width: 480px) {
  .calc-card     { padding: 18px 16px; }
  .summary-card  { padding: 20px 16px; }
  .payment-panel { padding: 18px 16px; }
}

/* ── 20. Topbar on tiny screens ── */
@media (max-width: 400px) {
  .topbar__msg   { display: none; }
  .topbar__inner { justify-content: flex-end; }
}

/* ── 21. FAQ ── */
@media (max-width: 640px) {
  .faq-category-heading { margin-top: 22px; }
  .faq-q                { font-size: .97rem; }
  .faq-public .faq-q    { padding: 14px 16px; }
}

/* ── 22. Accordion body height ── */
@media (max-width: 480px) {
  .level-accordion__body-inner { max-height: 220px; }
}

/* ── 23. Partner strip ── */
@media (max-width: 480px) {
  .partner-strip    { gap: 22px; }
  .partner-logo img { max-height: 34px; max-width: 100px; }
}

/* ── 24. WhatsApp FAB ── */
@media (max-width: 400px) {
  .whatsapp-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; }
}

/* ── Nav overlay backdrop (injected by main.js) ── */
.nav-overlay {
  display: none;
  position: fixed;
  /* Only cover the area to the RIGHT of the nav drawer (nav is 80%, max 320px wide).
     This way overlay never sits over the nav links at all — no z-index fight. */
  top: 0; bottom: 0;
  left: min(80vw, 320px);
  right: 0;
  background: rgba(0,0,0,.4);
  z-index: 7000;
}
.nav-overlay.open { display: block; }

/* ── Ensure nav-toggle spans are clearly visible ── */
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
/* Animate to X when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }