/* ============================================================
   CDI-FIXES.CSS — loaded LAST, resolves conflicts between
   main.css, cdi-app.css and cdi-premium.css.
   Keep site-wide overrides here instead of adding more
   !important rules to the other three files.
   ============================================================ */

/* ---------- 1. Kill horizontal overflow (empty gap on the right) ---------- */
html{ overflow-x:clip; }
body{ overflow-x:clip !important; }
.fw{ max-width:100%; }

/* ---------- 2. Header layout: sticky nav, no dead space at the top ----------
   main.css made .topnav position:fixed, but header.php printed the
   util bar + urgency strip BEFORE the nav and the spacer AFTER them,
   which produced a tall empty band under the header on every page.
   Sticky nav takes up its own space, so the spacer is removed. */
.topnav{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:9900;
  background:var(--navy, #0B1F3D) !important;
  /* CRITICAL: backdrop-filter creates a stacking context that clips child position:fixed elements */
  /* Removed backdrop-filter to allow mega dropdowns to render above the nav correctly */
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  /* Must be visible to allow dropdowns to overflow below */
  overflow:visible !important;
}
.topnav .row{ overflow:visible !important; }
.topnav-spacer{ display:block !important; height:64px !important; }
@media(min-width:680px){ .topnav-spacer{ height:68px !important; } }

/* ---------- 3. White logo image (header, mobile drawer, footer) ----------
   logo-white-v2.png is already white-on-transparent, so no filters needed.
   These rules override the img filter/size rules in the other stylesheets. */
.brand-logo{ display:inline-flex; align-items:center; }
img.brand-logo-img{
  width:auto !important;
  height:44px !important;
  max-height:none !important;
  object-fit:contain !important;
  filter:none !important;
  display:block;
}
.topnav.scrolled img.brand-logo-img{ transform:scale(.9); transform-origin:left center; transition:transform .2s ease; }
img.brand-logo-img.drawer-logo{ height:34px !important; }
img.brand-logo-img.foot-logo{ height:52px !important; margin-bottom:14px; }
@media (max-width:760px){
  img.brand-logo-img{ height:36px !important; }
  img.brand-logo-img.foot-logo{ height:46px !important; }
}

/* ---------- 4. Default text colours on light backgrounds ----------
   (replaces the forced !important colours removed from cdi-app.css)
   :where() keeps specificity at zero so any component class —
   e.g. .fh, .ibh, .cband h2 — overrides these defaults normally. */
:where(body:not(.admin-body)) :where(h1,h2,h3){ color:var(--cdi-ink, #0C1F38); }
:where(body:not(.admin-body)) :where(p,li){ color:var(--cdi-muted, #4A5A70); }

/* ---------- 5. Readable text on dark sections ---------- */
.cband h2{ color:#fff !important; }
.cband p{ color:rgba(255,255,255,.65) !important; }
.cband .eye{ color:var(--skyl, #9CD9FB) !important; }

.iband[style*="navyd"] h2,
.iband[style*="navyd"] .ibh{ color:#fff !important; }
.iband[style*="navyd"] p,
.iband[style*="navyd"] .ibp{ color:rgba(255,255,255,.7) !important; }
.iband[style*="navyd"] .ibli{ color:rgba(255,255,255,.85) !important; }
.iband[style*="navyd"] .eye{ color:rgba(255,255,255,.55) !important; }

.site-footer,
.site-footer p,
.site-footer li{ color:rgba(255,255,255,.55) !important; }
.site-footer a{ color:rgba(255,255,255,.6) !important; }
.site-footer a:hover{ color:#fff !important; }
.site-footer h4{ color:rgba(255,255,255,.4) !important; }

/* ---------- 6. Hero trust ticks + stat boxes (premium treatment) ----------
   Frosted-glass pills with badge checks, and elevated stat cards.
   (Old class "trust-strip" collided with a legacy card grid in
   cdi-app.css — renamed to .hero-ticks in index.php.) */
.hero-ticks{
  display:flex;
  flex-wrap:wrap;
  gap:10px 10px;
  margin-top:22px;
}
.hero-ticks .htick{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:650;
  letter-spacing:-.01em;
  color:#0C1F38;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:999px;
  padding:8px 15px 8px 9px;
  box-shadow:0 4px 16px rgba(7,20,38,.09), inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-ticks .htick::before{
  content:'\2713';
  width:17px; height:17px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green, #00B074), #009463);
  color:#fff;
  font-size:9px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,176,116,.35);
}

.hero-ticks + .tboxes{ margin-top:18px; gap:12px; }
.tbox{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #FFFFFF 0%, #F5FAFE 100%) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  border-radius:16px !important;
  padding:14px 16px 14px 19px !important;
  box-shadow:0 10px 28px rgba(7,20,38,.12), inset 0 1px 0 #fff !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tbox::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, #2F80ED, var(--green, #00B074));
}
.tbox:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(7,20,38,.16), inset 0 1px 0 #fff !important;
}
.tbox strong{
  font-size:14px !important;
  letter-spacing:-.015em;
}
.tbox span{
  font-size:11.5px !important;
  color:rgba(7,20,38,.55) !important;
}

@media (max-width:760px){
  .hero-ticks{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:8px !important;
    padding-bottom:4px !important;
  }
  .hero-ticks::-webkit-scrollbar{ display:none; }
  .hero-ticks .htick{
    flex:0 0 auto !important;
    scroll-snap-align:start;
    font-size:11.5px;
    padding:7px 13px 7px 8px;
    white-space:nowrap;
  }
}

/* toast: fully hidden until triggered (was peeking below the top edge) */
.toast-wrap{ visibility:hidden; opacity:0; transition:transform .3s ease, opacity .3s ease; }
.toast-wrap.show{ visibility:visible; opacity:1; }

/* utility + urgency strips now flow normally above/below the sticky nav */
.util{ position:relative; z-index:1; }
.urg{ position:relative; z-index:1; }

/* ============================================================
   7. MOBILE UX PASS
   ============================================================ */

/* ---------- 7a. Segmented pill control (reusable form pattern) ----------
   Replaces native selects with tappable pills, NLG-style.
   Markup: .hs-pills > label.hs-pill > input[type=radio] + span */
.hs-pills{
  display:flex;
  gap:4px;
  background:#EEF4FA;
  border:1px solid #E2EAF3;
  border-radius:999px;
  padding:4px;
  flex-shrink:0;
}
.hs-pill{ position:relative; flex:1; }
.hs-pill input{
  position:absolute; inset:0;
  opacity:0; margin:0;
  cursor:pointer;
}
.hs-pill span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#41546E;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hs-pill input:checked + span{
  background:var(--navy, #0B1F3D);
  color:#fff;
  box-shadow:0 4px 12px rgba(11,31,61,.28);
}
.hs-pill input:focus-visible + span{ outline:2px solid #2F80ED; outline-offset:2px; }

/* ---------- 7b. Hero search: never overflow the viewport ---------- */
.hero-search{ width:100%; max-width:100%; }
.hero-search *{ min-width:0; }
.hero-search .hs-in{ width:100%; }

/* ---------- 7b2. Hero grid: collapse to single column on mobile ----------
   .hgrid is the two-column desktop split (text left, slideshow right).
   Without a mobile rule .hl was being squeezed to ~50% width, causing
   the search box, transmission pills and tick badges to overflow the
   right edge of the screen. On mobile: hide the slideshow, let the
   text/search column go full-width. */
@media (max-width:760px){
  .hgrid{
    display:block !important;
  }
  .hr{
    display:none !important;
  }
  .hl{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .hero-search{
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .hs-pills{
    width:100% !important;
    box-sizing:border-box !important;
  }
  .hs-in{
    width:100% !important;
    box-sizing:border-box !important;
  }
  .hs-btn{
    width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ---------- 7c. Contact us pill (FAQ section) ---------- */
.fq-contact{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto !important;
  padding:13px 26px !important;
  margin:6px 0 30px !important;
  border-radius:999px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border:1.5px solid rgba(255,255,255,.22) !important;
}
.fq-contact:hover{ background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.4) !important; }

/* ---------- 7d. Footer: single divider, no double line ---------- */
.site-footer .foot-grid{ border-bottom:0 !important; padding-bottom:26px !important; gap:30px !important; }
.site-footer .foot-bottom{
  border-top:1px solid rgba(255,255,255,.1) !important;
  margin-top:0 !important;
  padding:18px 0 28px !important;
  gap:8px !important;
}

/* ---------- 7e. Mobile drawer: light premium theme ----------
   main.css styled it dark (white text) but cdi-premium forces a white
   background — white-on-white. Restyle coherently, and stop the FAQ
   accordion's white-card `details summary` rule leaking in here. */
.mobile-drawer{ background:#fff !important; }
.mobile-drawer .dtop{
  background:var(--navy, #0B1F3D) !important;
  border-bottom:0 !important;
  padding:0 18px !important;
}
.mobile-drawer .dclose{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
}
.mobile-drawer .mmenu-group{ border-bottom:1px solid rgba(12,31,56,.08) !important; }
.mobile-drawer .mmenu-group summary,
.mobile-drawer details summary{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:0 !important;
  padding:16px 4px !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:#0C1F38 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.mobile-drawer details summary::after{ content:none !important; }
.mobile-drawer .mmenu-chevron{ color:rgba(12,31,56,.45) !important; }
.mobile-drawer .mmenu-grid a,
.mobile-drawer .mmenu-panel > a{
  color:#41546E !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  padding:11px 10px !important;
  border-radius:10px !important;
  background:#F4F8FC !important;
  border:1px solid #E8EFF6 !important;
  margin-bottom:6px;
  opacity:1 !important;
  transform:none !important;
}
.mobile-drawer .mmenu-grid a:active,
.mobile-drawer .mmenu-panel > a:active{ background:#E8F1FA !important; color:#0C1F38 !important; }
.mobile-drawer .mmenu-viewall{ color:#2F80ED !important; font-weight:700 !important; }
.mobile-drawer .mmenu-flat{
  color:#0C1F38 !important;
  border-bottom:1px solid rgba(12,31,56,.08) !important;
  font-weight:700 !important;
}
.mobile-drawer nav a{ opacity:1 !important; transform:none !important; }

/* ---------- 7f. Mobile header + hamburger + section spacing ---------- */
@media (max-width:760px){
  /* one pill only, one line: hide "List your profile", keep "Free listing" */
  .topnav .nav-actions .hide-mobile{ display:none !important; }
  .nav-cta-mobile{
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:10px 16px !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  /* hamburger: exactly 3 clean bars (cdi-app added ::before/::after = 5-6 bars) */
  .hamburger::before,
  .hamburger::after{ content:none !important; display:none !important; }
  .hamburger span{ width:18px !important; }
  .hamburger span:nth-child(2){ width:18px !important; margin:0 !important; align-self:center !important; }

  /* breathing room: 20px side padding instead of 12px */
  .cw{ width:calc(100% - 40px) !important; }
  body:not(.admin-body) .container{ width:calc(100% - 40px) !important; }
  .hl{ padding-left:20px !important; padding-right:20px !important; }

  /* dead band between quick tiles and "How it works": hide the logo
     marquee on mobile and tighten the section paddings around it */
  .marq{ display:none !important; }
  .aeo-sec{ padding-bottom:36px !important; }

  /* segmented pills go full-width in the stacked mobile search */
  .hero-search .hs-pills{ width:100%; }
  .hero-search .hs-pill span{ padding:11px 8px; font-size:13.5px; }
}

/* ---------- 8. Instructor band: proof rail beside the pricing card ----------
   Fills the empty right side of the "list your profile" section with
   live platform stats (only rendered when real data exists) and
   truthful value-prop cards, styled to match the dark pricing card. */
.ib-right{
  display:flex;
  gap:16px;
  align-items:stretch;
  justify-content:flex-end;
}
.ib-proof{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:256px;
  flex-shrink:0;
}
.ibp-stat{
  background:linear-gradient(160deg, #0C1F38, #10273F);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 12px 30px rgba(7,20,38,.22);
}
.ibp-stat b{
  display:block;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  line-height:1;
}
.ibp-stat span{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.55);
}
.ibp-card{
  flex:1;
  display:flex;
  gap:11px;
  align-items:flex-start;
  background:rgba(12,31,56,.92);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 12px 30px rgba(7,20,38,.22);
}
.ibp-ic{
  width:30px; height:30px;
  flex-shrink:0;
  border-radius:9px;
  background:rgba(65,188,244,.14);
  border:1px solid rgba(65,188,244,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
.ibp-card b{
  display:block;
  font-size:13px;
  font-weight:750;
  color:#fff;
  letter-spacing:-.01em;
  margin-bottom:3px;
}
.ibp-card p{
  font-size:11.5px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.55) !important;
  margin:0 !important;
}
@media (max-width:1180px){
  .ib-proof{ display:none; }
  .ib-right{ justify-content:center; }
}

/* ---------- 9. Ask AI chat panel ----------
   Panel was inline-styled display:none while the JS toggled a class —
   plus the JS selectors never matched the markup, so the button was
   dead. Rebuilt: desktop floating card, mobile bottom sheet. */
.chat-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(4,11,24,.45);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.chat-overlay.open{ opacity:1; pointer-events:auto; }
.chat-panel{
  position:fixed; bottom:84px; right:16px; z-index:501;
  width:360px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:20px;
  box-shadow:0 24px 64px rgba(4,11,24,.3);
  overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transform:translateY(12px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
}
.chat-panel.open{ opacity:1; pointer-events:auto; transform:none; }
.chat-head{
  background:var(--navy, #0B1F3D);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.chat-head-title{ display:flex; align-items:center; gap:8px; color:#fff; font-size:14px; font-weight:700; }
.chat-dot{ width:8px; height:8px; border-radius:50%; background:var(--green, #00B074); }
.chat-close{
  width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:17px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.chat-msgs{
  height:300px; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  background:#F7FAFD;
}
.chat-bubble{
  max-width:85%;
  padding:10px 14px;
  border-radius:16px;
  font-size:13.5px; line-height:1.55;
}
.chat-bubble.bot{
  align-self:flex-start;
  background:#fff; color:#22334B;
  border:1px solid #E5EDF5;
  border-bottom-left-radius:6px;
  box-shadow:0 2px 8px rgba(12,31,56,.05);
}
.chat-bubble.user{
  align-self:flex-end;
  background:var(--navy, #0B1F3D); color:#fff;
  border-bottom-right-radius:6px;
}
.chat-links{ display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start; max-width:90%; }
.chat-links a{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  background:#EAF3FC;
  border:1px solid #CFE3F5;
  color:#1B62C4 !important;
  font-size:12.5px; font-weight:700;
  text-decoration:none;
}
.chat-links a:active{ background:#DBEBFA; }
.chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:#fff; border:1px solid #E5EDF5; border-radius:16px; border-bottom-left-radius:6px; }
.chat-typing i{ width:6px; height:6px; border-radius:50%; background:#9FB4CB; animation:chatDot 1s infinite; }
.chat-typing i:nth-child(2){ animation-delay:.15s; }
.chat-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes chatDot{ 0%,100%{ opacity:.35; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
.chat-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 14px 10px; background:#F7FAFD;
  flex-shrink:0;
}
.chat-chips:empty{ padding:0; }
.chat-chip{
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid #DCE7F2;
  color:#22334B;
  font-size:12.5px; font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.chat-chip:active{ background:#EAF3FC; border-color:#9CC4EA; }
.chat-inputbar{ padding:10px; border-top:1px solid #E5EDF5; background:#fff; flex-shrink:0; }
.chat-inputbar form{ display:flex; gap:8px; }
.chat-inputbar input{
  flex:1; min-width:0;
  border:1.5px solid #DCE7F2; border-radius:999px;
  padding:11px 16px; font-size:14px; font-family:inherit;
  outline:none;
}
.chat-inputbar input:focus{ border-color:#2F80ED; }
.chat-send{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%; border:none;
  background:var(--green, #00B074); color:#fff;
  font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:600px){
  .chat-panel{
    right:0; left:0; bottom:0;
    width:100%; max-width:100%;
    border-radius:20px 20px 0 0;
    transform:translateY(24px);
  }
  .chat-panel.open{ transform:none; }
  .chat-msgs{ height:min(46vh, 380px); }
  .chat-inputbar input{ font-size:16px; } /* prevents iOS zoom-on-focus */
}

/* ============================================================
   10. MOBILE-FIRST POLISH PASS 2
   ============================================================ */

/* ---------- 10a. Sane mobile typography (kills the giant fonts) ----------
   cdi-app.css forces h1 up to 46px / 10vw on phones, which made the
   terms page, blog and tables look blown up. Recalibrated. */
@media (max-width:760px){
  body:not(.admin-body) h1{ font-size:clamp(25px,6.6vw,32px) !important; line-height:1.12 !important; letter-spacing:-.035em !important; }
  body:not(.admin-body) h2{ font-size:clamp(20px,5.4vw,25px) !important; line-height:1.16 !important; letter-spacing:-.03em !important; }
  body:not(.admin-body) h3{ font-size:17px !important; line-height:1.25 !important; }
  body:not(.admin-body) p,
  body:not(.admin-body) li{ font-size:14.5px !important; line-height:1.62 !important; }
}

/* ---------- 10b. Legal / long-form pages (terms, privacy) ---------- */
.cdi-premium .dcard{ font-size:14.5px !important; line-height:1.72 !important; }
.cdi-premium .dcard h2{ font-size:19px !important; margin:26px 0 10px !important; }
.cdi-premium .dcard h3{ font-size:16px !important; margin:20px 0 8px !important; }
.cdi-premium .dcard p{ margin-bottom:12px !important; }

/* ---------- 10c. One CTA colour system ----------
   Primary action = brand blue. Light-sky buttons are retired. */
.btn-sky,
a.btn-sky,
.cta-blue{
  background:#2F80ED !important;
  color:#fff !important;
  border-color:#2F80ED !important;
}
.btn-sky:hover{ background:#1C6BD9 !important; color:#fff !important; }
.btn-ghost-sky{
  background:transparent !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.35) !important;
}
.btn-ghost-sky:hover{ border-color:#fff !important; }
/* big CTAs: never let text blow out of the pill on phones */
@media (max-width:760px){
  .btn,
  .btn-lg{
    font-size:13.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;   /* CTAs are always ONE line */
    padding:13px 18px !important;
    text-align:center;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ---------- 10d. Tables: compact, scrollable, premium ---------- */
@media (max-width:760px){
  .cdi-premium table th{ font-size:10.5px !important; padding:10px 12px !important; letter-spacing:.06em; }
  .cdi-premium table td{ font-size:13px !important; padding:11px 12px !important; line-height:1.45 !important; }
  .cdi-premium table td b, .cdi-premium table td strong{ font-size:13.5px !important; }
}
/* comparison table: sticky label column + smooth snap scrolling */
.ct-wrap, .cwrap, .ct-scroll{ -webkit-overflow-scrolling:touch; }
.ct th:first-child,
.ct td:first-child{
  position:sticky; left:0; z-index:3;
  background:#F7FAFD;
  box-shadow:2px 0 6px rgba(12,31,56,.06);
}
.ct thead th:first-child{ background:var(--navyd, #08182D); }
@media (max-width:760px){
  .ct{ min-width:560px; }
  .ct thead{ top:56px; }
  .ct thead th{ padding:12px 10px !important; }
}

/* ---------- 10e. Instructor / school card carousels on mobile ----------
   Cards were cut off mid-screen. Full-width snap cards instead. */
@media (max-width:760px){
  .car-cont{ padding:0 16px !important; scroll-snap-type:x mandatory; }
  .carc{
    min-width:calc(100vw - 72px) !important;
    max-width:calc(100vw - 72px) !important;
    scroll-snap-align:center;
  }
  .tcards{ grid-template-columns:1fr !important; max-width:100% !important; }
}

/* ---------- 10f. Pill form controls (auto-applied by cdi-pills.js) ---------- */
.cdi-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 4px;
}
.cdi-pills-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.cdi-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  background:#fff;
  border:1.5px solid #DCE7F2;
  color:#22334B;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.01em;
  text-align:center;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.cdi-pill:active{ transform:scale(.98); }
.cdi-pill.on{
  background:var(--navy, #0B1F3D);
  border-color:var(--navy, #0B1F3D);
  color:#fff;
  box-shadow:0 6px 16px rgba(11,31,61,.24);
}
.cdi-pills-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}

/* ---------- 10g. Drawer: premium accordion behaviour ---------- */
.mobile-drawer .mmenu-chevron{
  font-size:0 !important;             /* hide the text glyph */
  width:26px; height:26px;
  border-radius:8px;
  background:#F1F6FB;
  border:1px solid #E2EAF3;
  position:relative;
  transition:transform .22s ease, background .22s ease;
  flex-shrink:0;
}
.mobile-drawer .mmenu-chevron::after{
  content:'';
  position:absolute; inset:0;
  margin:auto;
  width:7px; height:7px;
  border-right:2px solid #41546E;
  border-bottom:2px solid #41546E;
  transform:translateY(-2px) rotate(45deg);
}
.mobile-drawer .mmenu-group[open] .mmenu-chevron{
  transform:rotate(180deg);
  background:var(--navy, #0B1F3D);
  border-color:var(--navy, #0B1F3D);
}
.mobile-drawer .mmenu-group[open] .mmenu-chevron::after{ border-color:#fff; }
.mobile-drawer .mmenu-panel{ animation:mmenuIn .24s ease; }
@keyframes mmenuIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }
.mobile-drawer .mmenu-group[open] > summary{ color:var(--navy, #0B1F3D) !important; }

/* ---------- 10h. Forms never overflow the viewport ---------- */
@media (max-width:760px){
  .cms-grid,
  .contact-form-grid{ grid-template-columns:1fr !important; }
}
.cdi-premium form{ min-width:0; max-width:100%; }
.cdi-premium form > *{ min-width:0; }
.cdi-premium input,
.cdi-premium select,
.cdi-premium textarea{ max-width:100%; }
.cdi-pills-grid .cdi-pill{ min-width:0; white-space:normal; line-height:1.3; }

/* ============================================================
   11. PHASE 1 — LISTING STATUS FOUNDATION
   ============================================================ */

/* trust badges (featured stays a separate concept/badge) */
.lstb{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.02em;
}
.lstb-unclaimed{ background:#F1F4F8; border:1px solid #DDE5EE; color:#5B6B80; }
.lstb-claimed{ background:#EAF3FC; border:1px solid #CFE3F5; color:#1B62C4; }
.lstb-verified{ background:#E7F7F0; border:1px solid #BFE9D6; color:#0B7D53; }
.lstb-ic{
  width:13px; height:13px; border-radius:50%;
  background:#00B074; color:#fff; font-size:8px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* soft availability chips */
.avchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px;
  font-size:10.5px; font-weight:800;
}
.avchip .avdot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }
.avchip-green{ background:#E7F7F0; border:1px solid #BFE9D6; color:#0B7D53; }
.avchip-amber{ background:#FFF7E8; border:1px solid #F5E3BC; color:#9A6B00; }
.avchip-sky{ background:#EAF3FC; border:1px solid #CFE3F5; color:#1B62C4; }
.avchip-slate{ background:#F1F4F8; border:1px solid #DDE5EE; color:#5B6B80; }

.phero-badges{ display:flex; gap:7px; flex-wrap:wrap; margin:8px 0 2px; }

/* unclaimed transparency banner + owner claim strip */
.unclaimed-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#F1F4F8; border:1px solid #DDE5EE; border-radius:14px;
  padding:12px 16px; margin:14px 0 10px;
  font-size:13px; font-weight:600; color:#41546E;
}
.unclaimed-banner .ub-left{ display:flex; align-items:center; gap:10px; }
.unclaimed-banner .ub-ic{
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  background:#5B6B80; color:#fff; font-size:11px; font-weight:800; font-style:italic;
  display:inline-flex; align-items:center; justify-content:center;
}
.claim-strip{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#EAF3FC; border:1px solid #CFE3F5; border-radius:14px;
  padding:13px 16px; margin:0 0 16px;
}
.claim-strip .cs-text{ font-size:13px; color:#22334B; line-height:1.5; }
.claim-strip .cs-btn{ flex-shrink:0; }
@media (max-width:640px){
  .unclaimed-banner, .claim-strip{ flex-direction:column; align-items:flex-start; }
  .claim-strip .cs-btn{ width:100%; justify-content:center; }
}

/* "Are you already listed?" finder */
.claim-finder{
  background:#fff; border:1px solid #E5EDF5; border-radius:20px;
  padding:26px 24px; box-shadow:0 12px 32px rgba(12,31,56,.07);
}
.cf-form{ display:flex; gap:10px; }
.cf-in{ flex:1; min-width:0; }
.cf-btn{ flex-shrink:0; }
@media (max-width:560px){ .cf-form{ flex-direction:column; } .cf-btn{ width:100%; justify-content:center; } }
.cf-results{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.cf-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#F7FAFD; border:1px solid #E5EDF5; border-radius:14px;
  padding:12px 14px;
}
.cf-name{ font-weight:800; font-size:14px; color:#0C1F38; }
.cf-meta{ font-size:12px; color:#5B6B80; margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:560px){ .cf-row{ flex-direction:column; align-items:flex-start; } .cf-row .btn{ width:100%; justify-content:center; } }
.cf-empty{
  margin-top:16px; background:#F7FAFD; border:1px dashed #CBD8E6;
  border-radius:14px; padding:18px; font-size:13.5px; color:#41546E;
}

/* claim page listing preview */
.claim-preview{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid #E5EDF5; border-radius:16px;
  padding:16px; margin:6px 0 18px;
}
.claim-preview .cp-av{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:var(--navy, #0B1F3D); color:#fff;
  font-weight:800; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.claim-preview .cp-name{ font-weight:800; font-size:15.5px; color:#0C1F38; }
.claim-preview .cp-meta{ font-size:12.5px; color:#5B6B80; margin:2px 0 6px; }

/* ---------- 11b. Claim-first layer (Phase 1.1) ---------- */
.chome-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:30px; align-items:start; }
.chome-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.chome-points{ display:flex; flex-direction:column; gap:12px; }
.chp{
  display:flex; gap:12px; align-items:flex-start;
  background:#F7FAFD; border:1px solid #E5EDF5; border-radius:14px;
  padding:13px 15px;
}
.chp-ic{
  width:32px; height:32px; flex-shrink:0; border-radius:10px;
  background:#EAF3FC; border:1px solid #CFE3F5;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.chp b{ display:block; font-size:13.5px; color:#0C1F38; margin-bottom:2px; }
.chp p{ font-size:12.5px !important; color:#5B6B80 !important; margin:0 !important; line-height:1.5 !important; }
@media (max-width:820px){ .chome-grid{ grid-template-columns:1fr; } }

.cd-towns{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.cd-town{
  padding:7px 13px; border-radius:999px;
  background:#fff; border:1.5px solid #DCE7F2;
  font-size:12px; font-weight:700; color:#41546E; text-decoration:none;
}
.cd-town.on{ background:var(--navy, #0B1F3D); border-color:var(--navy, #0B1F3D); color:#fff; }
.cd-claimed{ font-size:12px; color:#5B6B80; white-space:nowrap; }
.cd-claimed a{ color:#1B62C4; font-weight:700; }
.cd-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; }
.cd-pgnum{ font-size:12.5px; font-weight:700; color:#5B6B80; }

/* ---------- 11c. "Get listed" — premium dual-path panel ---------- */
.glsec{
  background:linear-gradient(180deg, var(--navyd, #08182D), var(--navy, #0B1F3D));
  padding:74px 0;
  position:relative;
  overflow:hidden;
}
.glsec::before{
  content:'';
  position:absolute; inset:auto -140px -220px auto;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(65,188,244,.14), transparent 65%);
  pointer-events:none;
}
.gl-head{ text-align:center; max-width:660px; margin:0 auto 30px; }
.glsec .gl-title{ color:#fff !important; margin-bottom:12px !important; }
.gl-sub{ color:rgba(255,255,255,.62) !important; font-size:15px !important; line-height:1.65 !important; }
.gl-search{
  display:flex; gap:8px;
  background:#fff;
  border-radius:999px;
  padding:8px;
  max-width:640px; margin:0 auto 26px;
  box-shadow:0 20px 50px rgba(0,0,0,.32), inset 0 1px 0 #fff;
}
.gl-search input{
  flex:1; min-width:0;
  border:0; outline:none; background:transparent;
  padding:12px 18px;
  font-size:14.5px; font-family:inherit; color:#0C1F38;
}
.gl-search input::placeholder{ color:#7C8CA1; }
.gl-search .btn{ flex-shrink:0; }
.gl-paths{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-width:860px; margin:0 auto;
}
.gl-path{
  border-radius:20px;
  padding:26px 26px 24px;
  display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.gl-claim{ background:linear-gradient(165deg, rgba(65,188,244,.13), rgba(65,188,244,.04)); }
.gl-add{ background:linear-gradient(165deg, rgba(0,176,116,.14), rgba(0,176,116,.04)); }
.glp-eye{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:10px; padding:5px 12px; border-radius:999px;
}
.gl-claim .glp-eye{ background:rgba(65,188,244,.16); color:#8FD8FA; border:1px solid rgba(65,188,244,.28); }
.gl-add .glp-eye{ background:rgba(0,176,116,.16); color:#7FE0BC; border:1px solid rgba(0,176,116,.3); }
.gl-path h3{ color:#fff !important; font-size:19px !important; margin-bottom:8px !important; letter-spacing:-.02em !important; }
.gl-path p{ color:rgba(255,255,255,.6) !important; font-size:13.5px !important; line-height:1.62 !important; margin-bottom:18px !important; flex:1; }
.glp-btn{ width:100%; justify-content:center; }
.gl-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  margin-top:26px;
}
.gltick{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  font-size:12px; font-weight:700;
}
.gltick::before{
  content:'✓';
  width:15px; height:15px; border-radius:50%;
  background:var(--green, #00B074); color:#fff;
  font-size:8px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width:760px){
  .glsec{ padding:52px 0; }
  .gl-paths{ grid-template-columns:1fr; }
  .gl-search{ flex-direction:column; border-radius:20px; padding:10px; }
  .gl-search input{ padding:12px 12px; text-align:center; }
  .gl-search .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   12. INSTRUCTOR CARD — PREPLY ANATOMY
   portrait/logo · identity + icon rows + highlight · wide rail
   with big price, stats trio, tall CTAs. Green = trust colour.
   ============================================================ */
.ic{
  grid-template-columns:196px 1fr 300px !important;
  gap:0 24px;
  background:#fff !important;
  border:1px solid #E3EBF3 !important;
  border-radius:16px !important;
  padding:22px !important;
  box-shadow:0 1px 3px rgba(12,31,56,.04);
  align-items:start;
  overflow:visible !important;
  transition:box-shadow .18s ease, border-color .18s ease !important;
}
.ic:hover{ box-shadow:0 16px 40px rgba(12,31,56,.12); border-color:#CBDDEE !important; }
.ic+.ic{ margin-top:16px !important; }
.ic.featured{ border-color:rgba(0,176,116,.5) !important; box-shadow:0 4px 20px rgba(0,176,116,.10); }
.ic .ic-featured-badge{ background:var(--green, #00B074) !important; color:#fff !important; }

.ic .ic-ph{
  width:196px !important; height:196px !important;
  border-radius:12px !important;
  overflow:hidden !important;
  border:1px solid #E9F0F6;
  background:#F4F8FC;
  display:block;
}
.ic .ic-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ic .ic-ph-logo{ padding:18px; }
.ic .ic-ph-logo img{ object-fit:contain; }
.ic .ic-av{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; font-weight:800; color:#fff;
  background:linear-gradient(150deg, var(--navy, #0B1F3D), #16385F);
}

/* middle: identity */
.ic-namerow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.icname-link{ text-decoration:none; }
.ic .icname{ font-size:21px !important; font-weight:800 !important; letter-spacing:-.025em; color:#121F33 !important; }
.icvtick{
  width:19px; height:19px; border-radius:50%; flex-shrink:0;
  background:var(--green, #00B074); color:#fff;
  font-size:10px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.ic-match{
  font-size:11px; font-weight:800; color:var(--gd, #009060);
  background:var(--gm, #E6F9F3); border:1px solid rgba(0,176,116,.22);
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.ic-creds{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:7px 0 12px; }
.ic-cred{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#31435C; }
.ic-ci{ font-size:13px; }
.ic-dot{ color:#B7C6D6; }
.ic-creds .lstb{ font-size:10px; padding:3px 10px; }

/* icon detail rows */
.ic-rows{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.ic-row{ display:flex; align-items:center; gap:9px; font-size:14px; color:#41546E; }
.ic-ri{ width:18px; text-align:center; font-size:14px; opacity:.85; }

/* single pastel highlight chip */
.ic-hl{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:9px;
  font-size:12.5px; font-weight:750;
  margin-bottom:12px;
}
.ic-hldot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.avtone-green{ background:linear-gradient(90deg,#E4F8EF,#EDFBF4); color:#0B7D53; }
.avtone-amber{ background:linear-gradient(90deg,#FFF4E0,#FFF9EC); color:#9A6B00; }
.avtone-sky{ background:linear-gradient(90deg,#E7F2FD,#F0F8FF); color:#1B62C4; }
.avtone-slate{ background:linear-gradient(90deg,#F0F4F8,#F6F9FC); color:#5B6B80; }

.ic .icsum{ font-size:14px !important; line-height:1.6 !important; color:#41546E !important; margin:0 !important; }
.ic .icsum b{ color:#121F33; }
.ic-more{ color:#121F33 !important; font-weight:750; text-decoration:underline !important; text-underline-offset:3px; white-space:nowrap; }

/* right rail */
.ic .ic-act{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:16px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  height:100%;
}
.ic-pricebox{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.ic .icprice{ font-size:31px !important; font-weight:800 !important; letter-spacing:-.03em; color:#121F33 !important; }
.ic .icper{ font-size:13px; font-weight:600; color:#7C8CA1; margin-top:5px; }
.ic-stats{ display:flex; gap:22px; }
.ic-stat{ display:flex; flex-direction:column; gap:3px; }
.ic-stat b{ font-size:15.5px; font-weight:800; color:#121F33; letter-spacing:-.01em; }
.ic-star{ color:var(--green, #00B074); }
.ic-stat span{ font-size:12px; color:#7C8CA1; font-weight:600; }
.ic-ctas{ display:flex; flex-direction:column; gap:9px; margin-top:auto; }
.ic-cta-main{
  width:100%; justify-content:center;
  padding:14px 18px !important;
  font-size:14.5px !important;
  border-radius:11px !important;
}
.ic-cta-ghost{
  width:100%; justify-content:center;
  padding:13px 18px !important;
  font-size:14px !important;
  border-radius:11px !important;
  background:#fff !important;
  border:1.5px solid #DCE7F2 !important;
  color:#31435C !important;
}
.ic-cta-ghost:hover{ border-color:#9FB9D4 !important; color:#121F33 !important; }
.ic-ctas .cmpchk{ align-self:flex-end; font-size:12px; color:#8CA0B6; }

/* mobile */
@media (max-width:920px){
  .ic{
    grid-template-columns:96px 1fr !important;
    grid-template-rows:auto auto !important;
    gap:14px 16px;
    padding:16px !important;
  }
  .ic .ic-ph{ width:96px !important; height:96px !important; }
  .ic .ic-av{ font-size:26px; }
  .ic .icname{ font-size:17.5px !important; }
  .ic-rows{ gap:6px; margin-bottom:10px; }
  /* ic-row: two items (transmission + location) were overflowing right edge.
     Wrap to a second line rather than clipping real info. */
  .ic-row{
    font-size:13px;
    flex-wrap:wrap !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .ic-row > *{ min-width:0; }
  .ic .ic-act{
    grid-column:1 / -1;
    border-top:1px solid #EDF3F9 !important;
    padding-top:14px !important;
    gap:13px;
  }
  .ic-price-stats, .ic-pricebox{ }
  .ic .ic-act{ flex-direction:column !important; }
  .ic-pricebox{ flex-direction:row; align-items:baseline; gap:8px; }
  .ic .icprice{ font-size:25px !important; }
  .ic-stats{ gap:18px; }
  /* ic-ctas: side-by-side buttons clipped "Send Message" on narrow screens.
     Stack vertically so both buttons are always fully visible. */
  .ic-ctas{ flex-direction:column !important; gap:8px !important; }
  .ic-ctas .btn{ flex:none !important; width:100% !important; }
  .ic-ctas .cmpchk{ display:none; }
}

/* ---------- green-infused "Get listed" panel ---------- */
.glsec::before{ background:radial-gradient(circle, rgba(0,176,116,.16), transparent 65%) !important; }
.glsec::after{
  content:'';
  position:absolute; inset:-180px auto auto -140px;
  width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(65,188,244,.10), transparent 65%);
  pointer-events:none;
}
.gl-title .glfree{ color:var(--green, #00B074); }
.gl-search .btn{ background:var(--green, #00B074) !important; border-color:var(--green, #00B074) !important; }
.gl-search .btn:hover{ background:#009463 !important; }

/* restore true green CTAs — cdi-app.css line 3862 was force-painting
   every .btn-green blue. Green is the trust/action colour on cards,
   claim flows and the Get Listed panel. (Header nav keeps its own rule.) */
a.btn.btn-green,
.btn.btn-green,
.btn-green{
  background:var(--green, #00B074) !important;
  border-color:var(--green, #00B074) !important;
  color:#fff !important;
}
a.btn.btn-green:hover,
.btn.btn-green:hover,
.btn-green:hover{
  background:#009463 !important;
  border-color:#009463 !important;
  color:#fff !important;
}

/* ---------- 13. Homepage colour rhythm (premium alternation) ----------
   Was: FAQ dark → sky → schools dark → Get Listed dark → CTA dark.
   Now: dark → sky → LIGHT → dark hero moment → LIGHT finale → dark footer. */
.iband-light{ background:#fff !important; }
.iband-light .ibli::before{ background:var(--green, #00B074); }

/* ---------- iband mobile: ibgrid had no responsive rules so the
   two-column layout collapsed into a single misaligned left column.
   Stack to single column, centre content, and let the pricing card
   go full-width on small screens. */
@media (max-width:900px){
  .ibgrid{
    display:flex !important;
    flex-direction:column !important;
    gap:32px !important;
  }
  .ib-right{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
  }
  .tcards{
    max-width:100% !important;
    width:100% !important;
  }
  .tc{
    max-width:100% !important;
    width:100% !important;
  }
  .ibbtns{
    flex-direction:column !important;
    gap:10px !important;
  }
  .ibbtns .btn{
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
  }
}

.cband-light{ background:#F4F8FC !important; }
.cband-light h2{ color:#0C1F38 !important; }
.cband-light p{ color:#5B6B80 !important; }
.cband-light .eye{ color:#1B62C4 !important; }
.cband-light .eye::before{ background:#1B62C4 !important; }

/* unclaimed card: owner-facing claim link under the learner CTAs */
.ic-claimlink{
  display:block;
  margin-top:4px;
  text-align:center;
  font-size:12px;
  color:#7C8CA1 !important;
  text-decoration:none;
}
.ic-claimlink b{ color:#1B62C4; }
.ic-claimlink:hover b{ text-decoration:underline; }

/* ---------- 14. Preply-grade profile page ---------- */
/* booking card in the rail */
.pbook{ text-align:left !important; }
.pb-price{ display:flex; align-items:baseline; gap:9px; margin-bottom:12px; }
.pbook .ppr{ font-size:30px !important; font-weight:800 !important; letter-spacing:-.03em; color:#121F33 !important; }
.pb-per{ font-size:13px; color:#7C8CA1; font-weight:600; }
.pb-stats{ display:flex; gap:20px; margin-bottom:16px; }
.pb-stat{ display:flex; flex-direction:column; gap:2px; }
.pb-stat b{ font-size:15px; color:#121F33; }
.pb-stat span{ font-size:11.5px; color:#7C8CA1; font-weight:600; }
.pb-main{ padding:14px 18px !important; font-size:14.5px !important; border-radius:11px !important; margin-bottom:9px; }
.pb-msg{ background:#fff !important; border:1.5px solid #DCE7F2 !important; color:#31435C !important; border-radius:11px !important; padding:13px 18px !important; }
.pb-msg:hover{ border-color:#9FB9D4 !important; color:#121F33 !important; }
.pb-note{
  display:flex; gap:8px; align-items:flex-start;
  margin-top:12px; padding:11px 13px;
  background:var(--gm, #E6F9F3); border:1px solid rgba(0,176,116,.2);
  border-radius:10px;
  font-size:12px; line-height:1.55; color:#0B6B49;
}
.pb-tick{
  width:15px; height:15px; flex-shrink:0; margin-top:1px;
  border-radius:50%; background:var(--green, #00B074); color:#fff;
  font-size:8px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* hero: highlights + callouts */
.ph-highlights{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
.ph-hlbl{ font-size:12.5px; font-weight:800; color:#31435C; margin-right:2px; }
.ph-pill{
  padding:5px 13px; border-radius:8px;
  font-size:12px; font-weight:750;
  background:linear-gradient(90deg,#E4F8EF,#EAF3FC);
  color:#0B6B49; border:1px solid rgba(0,176,116,.16);
}
.ph-calls{ display:flex; flex-direction:column; gap:10px; margin:14px 0 6px; }
.ph-call{ display:flex; gap:11px; align-items:flex-start; }
.ph-ci{
  width:30px; height:30px; flex-shrink:0; border-radius:9px;
  background:#F2F7FB; border:1px solid #E2EBF4;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ph-ci-green{ background:var(--gm, #E6F9F3); border-color:rgba(0,176,116,.25); }
.ph-ci-gold{ background:#FFF6DE; border-color:#F2E2AE; color:#B8860B; }
.ph-call b{ display:block; font-size:13.5px; color:#121F33; }
.ph-call span{ font-size:12.5px; color:#5B6B80; line-height:1.5; }

/* SEO cross-link matrices (Preply-style) */
.seo-links{ background:#F4F8FC; border-top:1px solid #E6EDF4; padding:48px 0 54px; }
.sl-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:34px; }
.sl-h{ font-size:12px !important; font-weight:800 !important; letter-spacing:.12em; text-transform:uppercase; color:#7C8CA1 !important; margin-bottom:14px !important; }
.sl-col{ display:flex; flex-direction:column; }
.sl-col a{
  font-size:13.5px; font-weight:600; color:#31435C;
  text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent;
  width:fit-content;
}
.sl-col a:hover{ color:var(--gd, #009060); }
.sl-more{ color:var(--gd, #009060) !important; font-weight:800 !important; margin-top:6px; }
@media (max-width:760px){ .sl-grid{ grid-template-columns:1fr; gap:26px; } }

/* ---------- 15. Branded placeholder + Get Listed header dropdown ---------- */
.ic-avimg{ width:100%; height:100%; object-fit:cover; display:block; }
.pav-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

.getlisted{ position:relative; }
.getlisted .gl-toggle{ list-style:none; cursor:pointer; user-select:none; }
.getlisted .gl-toggle::-webkit-details-marker{ display:none; }
.gl-car{ font-size:10px; margin-left:5px; transition:transform .18s ease; display:inline-block; }
.getlisted[open] .gl-car{ transform:rotate(180deg); }
.gl-pop{
  position:absolute; top:calc(100% + 10px); right:0; z-index:420;
  width:290px;
  background:#fff;
  border:1px solid #E3EBF3;
  border-radius:16px;
  box-shadow:0 22px 54px rgba(4,11,24,.22);
  padding:8px;
  animation:mmenuIn .18s ease;
}
.gl-opt{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 12px;
  border-radius:11px;
  text-decoration:none;
}
.gl-opt:hover{ background:#F4F9FD; }
.gl-oi{
  width:34px; height:34px; flex-shrink:0;
  border-radius:10px;
  background:#EAF3FC; border:1px solid #CFE3F5;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.gl-oi-green{ background:var(--gm, #E6F9F3); border-color:rgba(0,176,116,.28); }
.gl-opt b{ display:block; font-size:13.5px; color:#121F33; margin-bottom:2px; }
.gl-opt small{ font-size:12px; color:#5B6B80; line-height:1.45; display:block; }
/* keep the FAQ accordion's white-card summary rule out of this component */
.getlisted summary{ background:transparent !important; border:0 !important; box-shadow:none !important; min-height:0 !important; }
.getlisted summary.btn{ background:var(--green, #00B074) !important; }

/* ---------- 16. Profile page: sleek premium type scale ----------
   Detail pages must read denser than marketing pages. Scoped to
   .pg-profile so the homepage hero scale is untouched. */
.cdi-premium.pg-profile h1{ font-size:clamp(23px,2.4vw,29px) !important; line-height:1.15 !important; letter-spacing:-.03em !important; margin-bottom:6px !important; }
.cdi-premium.pg-profile h2{ font-size:clamp(17px,1.7vw,20px) !important; line-height:1.25 !important; letter-spacing:-.02em !important; margin-bottom:10px !important; }
.cdi-premium.pg-profile h3{ font-size:15.5px !important; margin-bottom:8px !important; }
.cdi-premium.pg-profile p, .cdi-premium.pg-profile li{ font-size:14px !important; line-height:1.68 !important; }
.pg-profile .ptab{ font-size:13px !important; padding:11px 16px !important; }
.pg-profile .sec{ padding:34px 0 !important; }
.pg-profile .prat{ font-size:14px !important; }
.pg-profile .ptopics span{ font-size:11.5px !important; padding:5px 12px !important; }
.pg-profile .sim-card strong{ font-size:13px !important; }
.pg-profile .icrole, .pg-profile .phero-sub{ font-size:13.5px !important; }

/* ---------- 17. "Driving lessons offered" (Preply specialties) ---------- */
.lo-card{ margin-top:16px; }
.lo-list{ display:flex; flex-direction:column; }
.lo-item{ border-bottom:1px solid #EDF3F9; }
.lo-item summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; cursor:pointer; list-style:none;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  min-height:0 !important; border-radius:0 !important;
}
.lo-item summary::-webkit-details-marker{ display:none; }
.lo-name{ font-size:14px; font-weight:750; color:#121F33; }
.lo-chev{
  width:22px; height:22px; border-radius:7px; flex-shrink:0;
  background:#F2F7FB; border:1px solid #E2EBF4; position:relative;
  transition:transform .2s ease, background .2s ease;
}
.lo-chev::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:6px; height:6px;
  border-right:2px solid #41546E; border-bottom:2px solid #41546E;
  transform:translateY(-1px) rotate(45deg);
}
.lo-item[open] .lo-chev{ transform:rotate(180deg); background:var(--gm, #E6F9F3); border-color:rgba(0,176,116,.3); }
.lo-item[open] .lo-chev::after{ border-color:var(--gd, #009060); }
.lo-desc{ padding:0 2px 14px; font-size:13.5px !important; color:#5B6B80 !important; line-height:1.6 !important; }
.lo-cta{ margin-top:16px; display:inline-flex; }

/* ============================================================
   18. PREMIUM SHARP PASS — geometry, breathing, leak fixes
   ============================================================ */

/* A. FAQ accordion icon must never leak into other components */
.getlisted summary::after,
.lo-item summary::after,
.cf-row summary::after{ content:none !important; display:none !important; }
.getlisted[open] summary::after{ content:none !important; }

/* D. Sharp button system: slimmer, squarer, one line, no bulk */
.btn, a.btn, button.btn{
  border-radius:12px !important;
  padding:11px 20px !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.005em !important;
  box-shadow:none !important;
}
.btn-sm{ padding:9px 15px !important; font-size:12.5px !important; border-radius:10px !important; }
.btn-lg{ padding:13px 24px !important; font-size:14px !important; border-radius:12px !important; }
@media (max-width:760px){
  .btn, .btn-lg{ padding:12px 18px !important; font-size:13.5px !important; border-radius:12px !important; }
}
/* card + rail CTAs adopt the system (undo earlier chunky paddings) */
.ic-cta-main, .ic-cta-ghost{ padding:12px 16px !important; font-size:13.5px !important; border-radius:12px !important; }
.pb-main, .pb-msg{ padding:12px 16px !important; font-size:13.5px !important; border-radius:12px !important; }
.gl-toggle{ border-radius:12px !important; }
.lo-cta{ margin:18px 0 2px !important; }
.hs-btn, .gl-search .btn, .cf-btn{ border-radius:12px !important; }

/* C. Directory filter bar: calm native selects, never pill-jammed */
.fp form{ gap:10px !important; align-items:center; }
.fp form input[type="text"]{ min-width:0; }
select.fp-sel{
  appearance:none; -webkit-appearance:none;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2341546E' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  border:1.5px solid #E2EAF3; border-radius:12px;
  padding:11px 34px 11px 14px;
  font:600 13.5px/1 inherit; color:#31435C;
  flex-shrink:0; cursor:pointer;
}
select.fp-sel:focus{ outline:none; border-color:#2F80ED; }

/* E. Profile: breathing room everywhere */
.cdi-premium.pg-profile .pcard{
  padding:26px !important;
  margin-bottom:18px !important;
  border-radius:16px !important;
  box-shadow:0 1px 3px rgba(12,31,56,.05) !important;
  border:1px solid #E6EDF4 !important;
}
.cdi-premium.pg-profile .phero-grid{ gap:28px !important; }
.cdi-premium.pg-profile .tab-section{ padding-top:8px; }
.lo-item summary{ padding:15px 18px !important; }
.pb-stats{ margin-bottom:18px !important; }
.pbook{ padding:22px !important; }

/* F. Enquiry form: air between fields, clean labels, pill groups spaced */
#enquire form .ff{
  margin-bottom:12px !important;
  padding:13px 15px !important;
  font-size:14px !important;
  border-radius:12px !important;
}
#enquire .fq-lbl{
  display:block;
  font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:#8CA0B6; margin:4px 0 7px;
}
#enquire .cdi-pills{ margin:0 0 16px !important; gap:7px; }
#enquire .cdi-pill{ padding:10px 14px; font-size:13px; border-radius:11px; white-space:nowrap; }
#enquire .cdi-pills-grid{ grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); }

/* B/G. Homepage carousel photos + calmer stat tiles */
.imarq-photo{ overflow:hidden; }
.imarq-img{ width:100%; height:100%; object-fit:cover; display:block; }
.tbox{
  padding:12px 15px 12px 18px !important;
  border-radius:13px !important;
  box-shadow:0 5px 16px rgba(7,20,38,.08), inset 0 1px 0 #fff !important;
}
.tbox strong{ font-size:13.5px !important; }
.tbox span{ font-size:11px !important; }

/* sharp geometry must beat every legacy 2-class pill rule */
a.btn[class], button.btn[class],
.btn.btn-navy, .btn.btn-green, .btn.btn-sky, .btn.btn-ghost, .btn.btn-ghost-sky, .btn.btn-ghost-dark{
  border-radius:12px !important;
}
a.btn.btn-sm[class], .btn.btn-sm{ border-radius:10px !important; }

/* ---------- 19. Soft premium placeholders + calm carousel ----------
   Placeholder artwork renders as a small contained mark on a soft
   tile — never a loud full-bleed illustration. Real photos still
   fill the frame. Uniform borders across all carousel cards. */
/* is-ph fallback marker kept for onerror handling, but images render
   full-bleed like the primary photos — no contain/pad treatment. */
img.is-ph{ object-fit:cover !important; }
.imarq-card, .carc{
  border:1px solid #E6EDF4 !important;
  border-radius:16px !important;
  box-shadow:0 1px 3px rgba(12,31,56,.05) !important;
  background:#fff !important;
}
.imarq-card:hover, .carc:hover{ box-shadow:0 12px 30px rgba(12,31,56,.10) !important; }
.imarq-photo{
  border-radius:12px 12px 0 0 !important;
  border-bottom:1px solid #EDF3F9;
}
/* slimmer, quieter carousel CTA */
.imarq-cta, .imarq-card .btn, .carc .btn{
  display:block !important;
  padding:9px 16px !important;
  font-size:12.5px !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1.5px solid #CFE0EF !important;
  color:#0B7D53 !important;
  font-weight:750 !important;
  margin:10px 14px 14px !important;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.imarq-cta:hover, .imarq-card .btn:hover, .carc .btn:hover{
  background:var(--green, #00B074) !important;
  border-color:var(--green, #00B074) !important;
  color:#fff !important;
}

/* ---------- 20. Get Listed header button: win the specificity war ----------
   main.css has `.nav-actions .btn-green{ background:#2F80ED !important }` from
   an older blue-CTA convention. That compound selector beats our plain
   `.btn-green` rule, so the Get Listed pill was rendering blue. Match and
   exceed its specificity here (loaded last, and more specific). */
.nav-actions .getlisted .btn-green,
.nav-actions details.getlisted summary.btn-green,
.nav-actions .gl-toggle{
  background:var(--green, #00B074) !important;
  border-color:var(--green, #00B074) !important;
  color:#fff !important;
}
.nav-actions .getlisted .btn-green:hover,
.nav-actions .gl-toggle:hover{
  background:#009463 !important;
  border-color:#009463 !important;
}

/* Popover rows: reinforce Claim = blue/info, Add = green/action, matching
   the pairing used everywhere else on the site (homepage Get Listed panel,
   drawer CTAs). */
.gl-opt:nth-child(2):hover{ background:var(--gm, #E6F9F3) !important; }
.gl-opt:nth-child(2) .gl-oi-green{ background:var(--gm, #E6F9F3); border-color:rgba(0,176,116,.3); }

/* ============================================================
   21. MOBILE: swipeable carousels instead of long vertical stacks
   Desktop/tablet grids are untouched (still real CSS grid). Below
   760px, candidate sections become horizontal scroll-snap strips
   with a peeking next-card to signal swipeability. Zero JS.
   ============================================================ */
@media (max-width:760px){
  .sg, .steps, .lg, .tboxes{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch;
    gap:12px !important;
    padding:4px 4px 14px !important;
    margin:0 -4px !important;
    scrollbar-width:none;
  }
  .sg::-webkit-scrollbar, .steps::-webkit-scrollbar,
  .lg::-webkit-scrollbar, .tboxes::-webkit-scrollbar{ display:none; }

  .sg > *, .steps > .step, .lg > *, .tboxes > *{
    flex:0 0 auto !important;
    scroll-snap-align:center;
    width:78% !important;      /* next card peeks at the edge = swipe affordance */
    max-width:280px !important;
  }
  .tboxes > *{ width:44% !important; max-width:170px !important; }

  /* swipe hint label, auto-injected via ::before on the section wrapper */
  .sg-wrap, .steps-wrap, .lg-wrap{ position:relative; }
  .swipe-hint{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#7C8CA1; margin:-6px 0 12px;
  }
  .swipe-hint::before{ content:'↔'; font-size:13px; }
}

/* ---------- comparison table: keep horizontal scroll (correct pattern
   for wide tabular data) but make it feel intentional, not broken ---------- */
@media (max-width:760px){
  .ct-swipehead{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#7C8CA1; margin-bottom:8px;
  }
  .ct-swipehead::before{ content:'↔'; font-size:13px; }
  .ct-wrap, .cwrap{ position:relative; }
  .ct-wrap::after, .cwrap::after{
    content:'';
    position:absolute; top:0; right:0; bottom:0; width:28px;
    background:linear-gradient(to right, transparent, rgba(244,248,252,.9));
    pointer-events:none;
  }
}
@media (max-width:760px){ .swipe-hint{ display:flex !important; } }

/* ---------- 22. Profile tabs: guaranteed baseline alignment ---------- */
.prof-tabs-inner{ align-items:center !important; }
.ptab{ display:flex !important; align-items:center !important; line-height:1.2 !important; }

/* ---------- 23. FAQ accordions: consistent everywhere, homepage +/- style ----------
   20+ landing pages share the .fi/.fq/.fa classes but each page adds its own
   inline overrides (hardcoded "+" spans, ad-hoc borders/padding, no dark
   wrapper), so every page's FAQ looks different. This forces one consistent
   look sitewide without touching each page's unique markup: kills any
   redundant inline +/arrow glyphs, relies purely on the shared rotating
   ::after icon, and gives every FAQ item the same card treatment. Pages
   already inside the dark homepage-style .fqs keep that treatment
   (untouched); everywhere else gets a light-premium equivalent. */
.fi{
  border-bottom:1px solid #EDF3F9 !important;
  padding:0 !important;
  margin:0 !important;
}
.fi .fq > span, .fi .fq > i, .fi .fq > em{ display:none !important; } /* kill hardcoded inline +/arrow glyphs */
/* Base (light-context) FAQ look — applies everywhere by default. The
   existing homepage rule `.fqs .fi .fq{...}` in cdi-premium.css is MORE
   specific (three classes vs. two) so it naturally keeps winning inside
   the dark homepage section regardless of CSS load order — no :not()
   fragility needed. */
.fi .fq{
  cursor:pointer; list-style:none;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:16px 4px !important;
  font-size:14.5px !important; font-weight:700 !important;
  color:#121F33 !important;
  background:transparent !important;
}
.fi .fq::after{
  content:'+'; font-size:21px; font-weight:300;
  color:#7C8CA1; flex-shrink:0; transition:.2s;
}
.fi.o .fq::after{ transform:rotate(45deg); color:var(--green, #00B074); }
.fi.o .fq{ color:#0C1F38 !important; }
.fi .fa{
  display:none;
  font-size:13.5px !important; color:#5B6B80 !important; line-height:1.65 !important;
  padding:0 4px 16px !important;
}
.fi.o .fa{ display:block !important; }

/* Dark-context FAQ (.fqs — homepage, for-instructors, location pages):
   restore the original white text. Using !important here too, but with
   higher specificity (.fqs .fi .fq beats .fi .fq), so this correctly
   wins back over the light-mode base rule above. This is the fix for
   the "FAQ text invisible, needs to be white" regression — the light
   rule's !important was winning everywhere, including dark sections. */
.fqs .fi .fq{ color:rgba(255,255,255,.8) !important; }
.fqs .fi.o .fq{ color:#fff !important; }
.fqs .fi .fq::after{ color:rgba(255,255,255,.4) !important; }
.fqs .fi.o .fq::after{ color:var(--green, #00B074) !important; }
.fqs .fi .fa{ color:rgba(255,255,255,.55) !important; }
.fqs .fi{ border-bottom:1px solid rgba(255,255,255,.08) !important; }

/* ============================================================
   24. Mega menu — featured category card (NLG "Home Schooling"
   pattern applied to Female Instructors). A distinctly-styled
   callout inside the Locations column: bold title + description,
   with a subtle lift + arrow-slide microanimation on hover.
   ============================================================ */
.cdi-mega-feature-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:13px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, #FDF2F8, #FCE7F3);
  border:1px solid #F9D3E5;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.cdi-mega-feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(219,39,119,.16);
  border-color:#F4A9CB;
}
.cdi-mfc-ic{
  width:34px; height:34px; flex-shrink:0;
  border-radius:10px;
  background:#fff;
  border:1px solid #F9D3E5;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#DB2777;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.cdi-mega-feature-card:hover .cdi-mfc-ic{ transform:scale(1.08) rotate(-4deg); }
.cdi-mfc-txt{ flex:1; display:flex; flex-direction:column; gap:2px; }
.cdi-mfc-txt b{ font-size:13.5px; color:#831843; font-weight:800; letter-spacing:-.01em; }
.cdi-mfc-txt small{ font-size:11.5px; color:#BE185D; opacity:.85; }
.cdi-mfc-arrow{
  font-size:15px; color:#DB2777; flex-shrink:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.cdi-mega-feature-card:hover .cdi-mfc-arrow{ transform:translateX(4px); }

/* ============================================================
   25. MEGA MENU SYSTEM v5 — real header implementation
   Shared centered panel, drill-down for Driving Lessons, flat
   rich menus for Test Centres/Locations/For Instructors,
   spotlight card for Female Instructors, SVG arrows throughout.
   Namespaced with cdi- prefix; old .cdi-mega-v2/.location-mega-v9
   classes are now dead/unused (left in place, harmless).
   ============================================================ */
.navbtn2{
  background:none; border:0; color:rgba(255,255,255,.82);
  font:500 13.5px 'Poppins',sans-serif; padding:12px 14px; border-radius:9px;
  cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:background .15s ease, color .15s ease;
}
.navbtn2:hover, .navbtn2.active{ background:rgba(255,255,255,.08); color:#fff; }
.navchev{ width:9px; height:9px; flex-shrink:0; color:currentColor; transition:transform .25s cubic-bezier(.4,0,.2,1); }
.navbtn2.active .navchev{ transform:rotate(180deg); }
.gl-toggle .navchev{ margin-left:2px; }
.getlisted[open] .navchev{ transform:rotate(180deg); }

.cdi-overlay{ position:fixed; inset:0; z-index:9800; display:none; }
.cdi-overlay.on{ display:block; }

.cdi-megawrap{ position:static; }
.cdi-mega{
  position:fixed;
  /* top is set dynamically by cdiPositionMega() in main.js */
  /* DO NOT set top here - JS calculates from nav bottom position */
  left:50%; transform:translateX(-50%) translateY(-8px);
  width:920px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:20px; box-shadow:0 30px 70px rgba(4,11,24,.32);
  border:1px solid var(--line, #E6EDF4); overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; display:flex;
  z-index:9950;
}
.cdi-mega.open{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

.cdi-navpane{ width:58%; position:relative; background:#fff; }
.cdi-navpane::after{ content:''; position:absolute; top:0; right:0; bottom:0; width:1px; background:var(--line, #E6EDF4); }
.cdi-level{ position:relative; padding:26px 28px; display:none; flex-direction:column; }
.cdi-level.showing{ display:flex; }
.cdi-eyebrow{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green,#00B074); margin-bottom:8px; }
.cdi-eyebrow::before{ content:''; width:14px; height:2px; background:var(--green,#00B074); border-radius:2px; }
.cdi-h1{ font-size:19px; font-weight:700; letter-spacing:-.01em; color:#121F33; margin-bottom:4px; font-family:'Poppins',sans-serif; }
.cdi-sub{ font-size:12.5px; color:#5B6B80; font-weight:400; margin-bottom:18px; }
.cdi-backrow{ display:flex; align-items:center; gap:9px; margin-bottom:16px; cursor:pointer; width:fit-content; }
.cdi-backarrow{ width:28px; height:28px; border-radius:9px; background:#F1F6FB; border:1px solid var(--line,#E6EDF4); display:flex; align-items:center; justify-content:center; transition:background .15s ease, transform .15s ease; }
.cdi-backarrow svg{ width:12px; height:12px; }
.cdi-backrow:hover .cdi-backarrow{ background:#E8F1FA; transform:translateX(-2px); border-color:#CFE3F5; }
.cdi-backlbl{ font-size:12.5px; font-weight:600; color:#5B6B80; }

.cdi-catlist{ display:flex; flex-direction:column; gap:10px; }
.cdi-catgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cdi-catcard{
  display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:14px;
  cursor:pointer; text-align:left; border:1px solid transparent; text-decoration:none;
  font-family:'Poppins',sans-serif; background:none; width:100%;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
  position:relative; overflow:hidden;
}
.cdi-catcard::before{ content:''; position:absolute; inset:0; opacity:.5; transition:opacity .22s ease; }
.cdi-catcard:hover{ transform:translateY(-2px) translateX(2px); }
.cdi-catcard:hover::before{ opacity:.85; }
.cdi-cc1::before{ background:linear-gradient(120deg,#EAF3FC,#F7FBFF); }
.cdi-cc1:hover{ box-shadow:0 14px 30px rgba(47,128,237,.14); border-color:#CFE3F5; }
.cdi-cc2::before{ background:linear-gradient(120deg,#FDF2F8,#FFF7FB); }
.cdi-cc2:hover{ box-shadow:0 14px 30px rgba(219,39,119,.14); border-color:#F9D3E5; }
.cdi-cc3::before{ background:linear-gradient(120deg,#E6F9F3,#F3FCF8); }
.cdi-cc3:hover{ box-shadow:0 14px 30px rgba(0,176,116,.14); border-color:#BFE9D6; }
.cdi-cc4::before{ background:linear-gradient(120deg,#FFF7E8,#FFFBF2); }
.cdi-cc4:hover{ box-shadow:0 14px 30px rgba(217,155,0,.14); border-color:#F5E3BC; }
.cdi-cc5::before{ background:linear-gradient(120deg,#F3F0FF,#FAF9FF); }
.cdi-cc5:hover{ box-shadow:0 14px 30px rgba(124,58,237,.14); border-color:#E3D9FC; }
.cdi-cic{ position:relative; z-index:1; width:44px; height:44px; flex-shrink:0; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 6px 16px rgba(12,31,56,.10); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.cdi-catcard:hover .cdi-cic{ transform:scale(1.1) rotate(-5deg); }
.cdi-ctxt{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; }
.cdi-ctxt b{ font-size:14px; font-weight:600; color:#121F33; margin-bottom:2px; }
.cdi-ctxt small{ font-size:11.5px; font-weight:400; color:#5B6B80; }
.cdi-cchev{ position:relative; z-index:1; margin-left:auto; color:#8CA0B6; flex-shrink:0; transition:transform .22s ease; }
.cdi-catcard:hover .cdi-cchev{ transform:translateX(4px); color:var(--blue,#2F80ED); }

.cdi-footlinks{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line,#E6EDF4); display:flex; gap:20px; }
.cdi-footlinks a{ font-size:12.5px; font-weight:600; color:var(--blue,#2F80ED); text-decoration:none; display:flex; align-items:center; gap:5px; }
.cdi-footlinks a:hover{ text-decoration:underline; }

.cdi-itemlist{ display:flex; flex-direction:column; gap:8px; }
.cdi-item{
  display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:13px;
  border:1px solid var(--line,#E6EDF4); text-decoration:none; color:inherit;
  font-family:'Poppins',sans-serif;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.cdi-item:hover{ transform:translateX(3px); box-shadow:0 10px 22px rgba(12,31,56,.09); }
.cdi-iic{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform .22s cubic-bezier(.2,.8,.2,1); box-shadow:0 4px 10px rgba(12,31,56,.06); }
.cdi-item:hover .cdi-iic{ transform:scale(1.1) rotate(-5deg); }
.cdi-itxt{ flex:1; display:flex; flex-direction:column; }
.cdi-itxt b{ font-size:13.5px; font-weight:600; color:#121F33; margin-bottom:1px; }
.cdi-itxt span{ font-size:11.5px; font-weight:400; color:#5B6B80; line-height:1.4; }
.cdi-iarrow{ margin-left:auto; color:#8CA0B6; flex-shrink:0; transition:transform .22s ease; }
.cdi-item:hover .cdi-iarrow{ transform:translateX(3px); }

.cdi-tone-blue .cdi-iic{ background:#EAF3FC; color:var(--blue,#2F80ED); }
.cdi-tone-blue:hover{ border-color:#CFE3F5; background:#FAFCFF; }
.cdi-tone-green .cdi-iic{ background:#E6F9F3; color:var(--green,#00B074); }
.cdi-tone-green:hover{ border-color:#BFE9D6; background:#FAFDFB; }
.cdi-tone-amber .cdi-iic{ background:#FFF7E8; color:#B8860B; }
.cdi-tone-amber:hover{ border-color:#F5E3BC; background:#FFFDF8; }
.cdi-tone-purple .cdi-iic{ background:#F3F0FF; color:#7C3AED; }
.cdi-tone-purple:hover{ border-color:#E3D9FC; background:#FBFAFF; }

/* spotlight card — Female Instructors, real CTA button */
.cdi-spotlight{
  display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:16px;
  background:linear-gradient(135deg,#FDF2F8,#FEFAFC); border:1px solid #F9D3E5;
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.cdi-spotlight:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(219,39,119,.14); border-color:#F4A9CB; }
.cdi-spot-ic{ width:46px; height:46px; flex-shrink:0; border-radius:13px; background:#fff; color:#DB2777; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(219,39,119,.14); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.cdi-spotlight:hover .cdi-spot-ic{ transform:scale(1.08) rotate(-5deg); }
.cdi-spot-body{ flex:1; display:flex; flex-direction:column; font-family:'Poppins',sans-serif; }
.cdi-spot-body b{ font-size:14.5px; font-weight:700; color:#831843; margin-bottom:4px; }
.cdi-spot-body > span{ font-size:12px; font-weight:400; color:#BE185D; line-height:1.55; margin-bottom:12px; }
.cdi-spot-btn{
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  background:#DB2777; color:#fff; text-decoration:none; font-size:12.5px; font-weight:600;
  padding:9px 15px; border-radius:10px; box-shadow:0 8px 18px rgba(219,39,119,.28);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cdi-spot-btn:hover{ background:#BE185D; transform:translateY(-1px); box-shadow:0 10px 22px rgba(219,39,119,.36); }
.cdi-spot-btn svg path{ stroke:#fff; }

/* persistent right feature panel */
.cdi-featurepane{
  width:42%; background:linear-gradient(155deg, var(--navyd,#08182D), var(--navy,#0B1F3D));
  padding:28px 26px; display:flex; flex-direction:column; position:relative; overflow:hidden;
  font-family:'Poppins',sans-serif;
}
.cdi-featurepane::before{ content:''; position:absolute; inset:auto -80px -100px auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(65,188,244,.18), transparent 65%); }
.cdi-featurepane::after{ content:''; position:absolute; top:-60px; left:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(0,176,116,.14), transparent 65%); }
.cdi-ft{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.cdi-ft span{ background:rgba(65,188,244,.16); border:1px solid rgba(65,188,244,.3); color:#8FD8FA; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px; }
.cdi-ft b{ color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.04em; }
.cdi-featurepane h3{ position:relative; z-index:1; color:#fff; font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin-bottom:10px; }
.cdi-featurepane p{ position:relative; z-index:1; color:rgba(255,255,255,.6); font-size:12.5px; font-weight:400; line-height:1.65; margin-bottom:18px; }
.cdi-tips{ position:relative; z-index:1; display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.cdi-tip{ display:flex; gap:9px; align-items:flex-start; font-size:12px; color:rgba(255,255,255,.7); font-weight:400; line-height:1.5; }
.cdi-dot{ width:16px; height:16px; flex-shrink:0; border-radius:50%; background:rgba(0,176,116,.2); border:1px solid rgba(0,176,116,.4); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.cdi-dot svg{ width:8px; height:8px; }
.cdi-chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.cdi-chip{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.85); font-size:11.5px; font-weight:500; padding:7px 13px; border-radius:999px; }
.cdi-cta{
  position:relative; z-index:1; margin-top:auto; background:var(--green,#00B074); color:#fff;
  text-align:center; font-size:13.5px; font-weight:600; padding:13px; border-radius:12px;
  text-decoration:none; box-shadow:0 10px 24px rgba(0,176,116,.28);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cdi-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,176,116,.36); }

/* Get Listed popover: SVG arrow + refined layout */
.gl-arrow2{ margin-left:auto; color:#8CA0B6; flex-shrink:0; transition:transform .2s ease; align-self:center; }
.gl-opt:hover .gl-arrow2{ transform:translateX(3px); }
.gl-divider2{ height:1px; background:var(--line,#E6EDF4); margin:4px 8px; }

@media (max-width:1040px){
  .cdi-mega{ width:calc(100vw - 32px); }
}

/* ============================================================
   26. Get Listed → replaced with always-visible side-by-side tabs
   No dropdown, no JS dependency — nothing to fail to "open".
   Desktop: two plain buttons. Mobile: single link straight to
   /for-instructors, which already has both Claim/Add paths.
   ============================================================ */
.gl-tabs{ display:flex; align-items:stretch; gap:2px; background:rgba(255,255,255,.08); border-radius:12px; padding:3px; }
.gl-tab{
  display:flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:9px;
  font:600 12.5px 'Poppins',sans-serif; text-decoration:none; white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .12s ease;
}
.gl-tab-claim{ color:rgba(255,255,255,.85); }
.gl-tab-claim:hover{ background:rgba(255,255,255,.1); color:#fff; }
.gl-tab-add{ background:var(--green,#00B074); color:#fff; box-shadow:0 4px 12px rgba(0,176,116,.3); }
.gl-tab-add:hover{ background:#009d68; transform:translateY(-1px); }

.nav-cta-mobile{
  display:none;
  background:var(--green,#00B074); color:#fff; text-decoration:none;
  font:600 13px 'Poppins',sans-serif; padding:9px 18px; border-radius:10px;
}
@media (max-width:900px){
  .nav-cta-mobile{ display:inline-flex; align-items:center; }
  .hide-mobile{ display:none !important; }
}

/* ============================================================
   27. MOBILE — force true 2-column pill layout (was relying on
   flex-wrap, which collapses to 1-per-row when pill text is long
   on narrow Android/iPhone widths — reported specifically on
   instructor profile highlight pills and card spec chips).
   ============================================================ */
@media (max-width:480px){
  .ph-highlights{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }
  .ph-hlbl{ grid-column:1 / -1; margin-bottom:2px; }
  .ph-pill{
    display:flex; align-items:center; justify-content:center;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding:7px 8px !important; font-size:11px !important;
  }
  .ptopics{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }
  .ptopics span{
    display:flex; align-items:center; justify-content:center;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding:6px 8px !important; font-size:10.5px !important;
  }
  .ic-rows{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important; }
}

/* ============================================================
   28. Auto-scrolling carousels (no jerk) — homepage sections that
   were finger-swipe-only now gently auto-advance too. Pauses on
   touch/hover and resumes after a pause, so it never fights the
   user. Pure progressive enhancement: if JS fails, plain swipe
   still works exactly as before.
   ============================================================ */

/* ============================================================
   29. Driving schools filter bar - was crammed into the 99px-radius
   .mps "simple search pill" component (designed for one input + one
   button), which is why it read as thick/clunky with 3 selects +
   checkbox + button stuffed inside. Calm rounded-rect bar instead,
   reusing the same .fp-sel native select styling already proven on
   the main /driving-instructors directory.
   ============================================================ */
.schfilter{
  background:#fff; border:1px solid var(--line, #E6EDF4); border-radius:16px;
  padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  box-shadow:0 4px 20px rgba(7,20,38,.08); max-width:900px;
}
.schfilter input[type="text"]{
  flex:1 1 180px; min-width:0;
  border:1.5px solid var(--line, #E6EDF4); border-radius:12px;
  padding:11px 14px; font-size:13.5px; font-family:inherit; outline:none;
}
.schfilter input[type="text"]:focus{ border-color:var(--blue,#2F80ED); }
.schfilter label{ flex-shrink:0; }
.schfilter .btn{ flex-shrink:0; }
@media (max-width:760px){
  .schfilter{ flex-direction:column; align-items:stretch; border-radius:14px; }
  .schfilter select.fp-sel, .schfilter input[type="text"]{ width:100%; }
  .schfilter .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   30. MOBILE HOMEPAGE — comprehensive spacing + carousel pass
   ============================================================ */

/* A) The master bug: .is-mobile .sec{} override NEVER fires because
   nothing in the codebase ever adds .is-mobile to any element — every
   phone has been getting the full 72px desktop section padding this
   whole time (144px dead space at every section boundary). Real
   media-query override instead, applied to every section wrapper. */
@media (max-width:760px){
  .sec{ padding:30px 0 !important; }
  .aeo-sec{ padding:22px 0 0 !important; }
  .marq{ padding:10px 0 !important; }
}

/* B) Hero mini tiles (Manual/Automatic/ADI-PDI): were a cramped 3-col
   grid forcing horizontal overflow past the hero's right padding.
   Same slim auto-scroll carousel treatment as the other tile strips. */
@media (max-width:760px){
  .tboxes{
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto !important; scroll-snap-type:x mandatory !important;
    gap:8px !important; padding:2px 2px 4px !important; margin:0 !important;
  }
  .tboxes::-webkit-scrollbar{ display:none; }
  .tbox{
    flex:0 0 auto !important; scroll-snap-align:start;
    width:auto !important; min-width:112px;
    padding:9px 14px !important; border-radius:11px !important;
  }
  .tbox strong{ font-size:12.5px !important; }
  .tbox span{ font-size:10px !important; }
}

/* C) At-a-glance stats: 5 items — use 2-col grid so cards fill evenly.
   Last card spans both columns so no orphaned blank cell appears. */
@media (max-width:760px){
  .aeo-stats{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .aeo-stat{ padding:12px 10px !important; }
  .aeo-stat strong{ font-size:18px !important; }
  .aeo-stat span{ font-size:11px !important; line-height:1.3; }
  .aeo-stat:last-child:nth-child(odd){ grid-column:1 / -1; max-width:50%; margin:0 auto; }
}

/* D) Featured instructor marquee: 40s per cycle read as sluggish.
   Faster loop, still smooth and pausable on touch. */
.imarq-track{ animation-duration:20s !important; }

/* E) Placeholder image inside the marquee card was full-bleed with
   zero breathing room top/bottom. Real photos stay full-bleed cover;
   only the branded placeholder gets padding + contain. */
.imarq-photo img.is-ph{
  object-fit:contain !important;
  padding:22px 28px !important;
  background:linear-gradient(155deg,#F4F8FC,#E9F1F8) !important;
}

/* F) Location tiles: 4 stacked lines made each card too tall and
   forced awkward one-per-screen swiping. Slimmer horizontal layout —
   name + one condensed stat line — on mobile only. */
@media (max-width:760px){
  .lg{
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto !important; scroll-snap-type:x mandatory !important;
    gap:10px !important; padding:2px 2px 6px !important;
  }
  .lg::-webkit-scrollbar{ display:none; }
  .lc{
    flex:0 0 auto !important; scroll-snap-align:center;
    width:76% !important; max-width:250px !important;
    flex-direction:row !important; align-items:center !important;
    flex-wrap:wrap !important; gap:2px 10px !important;
    padding:13px 15px !important;
  }
  .lct{ font-size:14px !important; flex:1 1 100%; }
  .lcc{ font-size:11px !important; }
  .lcf{ font-size:11px !important; }
  .lca{ margin-top:0 !important; margin-left:auto; font-size:11px !important; }
}

/* G) Dot indicators for auto-scrolling strips (added by JS below) */
.cdi-dots{
  display:flex; justify-content:center; gap:6px; margin-top:10px;
}
.cdi-dots .cdi-dotm{
  width:6px; height:6px; border-radius:50%;
  background:#D6E3F0; transition:background .25s ease, transform .25s ease;
}
.cdi-dots .cdi-dotm.on{ background:var(--green,#00B074); transform:scale(1.3); }

/* ============================================================
   31. "WHY COMPARE BEFORE BOOKING" section — mobile carousel
   The section uses an inline style: display:grid;grid-template-columns:repeat(3,1fr)
   so the 3 cards never collapsed on mobile: card 3 orphaned bottom-left,
   cards too tall/clunky. Convert to slim swipeable horizontal strip.
   ============================================================ */
@media (max-width:760px){
  .services-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px !important;
    padding:4px 4px 12px !important;
    margin:0 -4px !important;
  }
  .services-grid::-webkit-scrollbar{ display:none; }
  .services-grid > .svc{
    flex:0 0 auto !important;
    scroll-snap-align:center;
    width:72% !important;
    max-width:260px !important;
    /* slimmer cards — reduce the huge vertical padding */
    padding:16px !important;
  }
  /* Make the card icon + heading + body more compact */
  .services-grid > .svc .svc-ic{
    width:40px !important; height:40px !important;
    font-size:20px !important;
    border-radius:12px !important;
    margin-bottom:10px !important;
  }
  .services-grid > .svc h3{
    font-size:15px !important;
    margin-bottom:6px !important;
  }
  .services-grid > .svc p{
    font-size:12.5px !important;
    line-height:1.45 !important;
  }
}

/* ============================================================
   32. RELATED SEARCHES — /driving-instructors page sidebar
   Raw <a> links were stacking as a single column of full-width
   blocks with no visual treatment. Convert to a wrap of compact
   pill links that flow naturally and look intentional.
   Target the section by its heading text proximity — use the
   .seo-links wrapper or .sl-col if present; otherwise scope
   with a dedicated class the PHP should add (see note below).
   ============================================================ */

/* If the related searches section uses .seo-links > .cw already */
.seo-links .sl-col a{
  display:inline-flex !important;
  align-items:center;
  padding:8px 16px !important;
  background:#F0F5FA !important;
  border:1px solid #DDE8F2 !important;
  border-radius:999px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:#31435C !important;
  white-space:nowrap;
  border-bottom:none !important;
  transition:background .15s ease, border-color .15s ease;
}
.seo-links .sl-col a:hover{
  background:#E2EEF8 !important;
  border-color:#AECDE8 !important;
  color:var(--gd, #009060) !important;
}
.seo-links .sl-col{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

/* Mobile: sl-grid was 3-col → single col stack. Make it 1 col of
   wrapped pill rows instead so it reads as a tag cloud not a list. */
@media (max-width:760px){
  .seo-links{ padding:28px 0 32px !important; }
  .sl-grid{ grid-template-columns:1fr !important; gap:20px !important; }
  .sl-h{ margin-bottom:10px !important; }
  .seo-links .sl-col{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:7px !important;
  }
  .seo-links .sl-col a{
    font-size:12px !important;
    padding:7px 14px !important;
  }
}

/* ============================================================
   33. fm-hero-pills — /for-instructors page stat cards
   On mobile the hero grid collapses to 1 col but fm-hero-pills
   kept repeat(3,1fr). With 4 items: 3 in row 1, 1 orphaned
   bottom-left, right half totally empty. Fat tall cards with
   too much padding made them look broken and oversized.
   Fix: 2×2 grid with slimmer cards. Hero grid hides the right
   panel (dashboard mockup) so collapse that too.
   ============================================================ */
@media (max-width:760px){
  /* Collapse the 2-col hero layout to single column */
  .fm-hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  /* Hide the right-side dashboard mockup — too complex for mobile */
  .fm-dashboard-card{
    display:none !important;
  }
  /* Search card: stack inputs vertically */
  .fm-search-card{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:12px !important;
    border-radius:18px !important;
  }
  /* 2×2 grid for 4 stat pills — no orphan, balanced layout */
  .fm-hero-pills{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:8px !important;
    max-width:100% !important;
    margin-top:14px !important;
  }
  /* Slimmer, less imposing cards */
  .fm-hero-pills div{
    padding:10px 12px !important;
    border-radius:12px !important;
  }
  .fm-hero-pills strong{
    font-size:13px !important;
    line-height:1.2 !important;
  }
  .fm-hero-pills span{
    font-size:10.5px !important;
    margin-top:3px !important;
  }
  /* Hero heading tighter on mobile */
  .fm-hero h1{
    font-size:clamp(30px,8vw,42px) !important;
    letter-spacing:-.04em !important;
    margin:14px 0 10px !important;
  }
  .fm-hero p{
    font-size:15px !important;
  }
  .fm-hero{
    padding:28px 0 36px !important;
  }
}

/* ============================================================
   34. HERO SLIDESHOW — illustration background overlays
   Each .slide now contains a real SVG illustration instead of
   a tiny inline icon. Positioned to fill the upper portion of
   the card with a strong bottom fade keeping text readable.
   ============================================================ */
.slide-illus{
  position:absolute;
  top:-5%;
  right:-5%;
  width:95%;
  height:78%;
  object-fit:contain;
  object-position:center top;
  pointer-events:none;
  user-select:none;
  opacity:.32;
  /* subtle scale breathe */
  animation:illustDrift 10s ease-in-out infinite alternate;
  transform-origin:center top;
}

@keyframes illustDrift{
  0%  { transform:scale(1)    translateY(0);   }
  100%{ transform:scale(1.04) translateY(-8px); }
}

/* Strengthen the bottom gradient in .sov so text always pops
   regardless of which illustration sits behind it */
.sov{
  background:linear-gradient(
    to top,
    rgba(7,20,38,.97) 0%,
    rgba(7,20,38,.85) 38%,
    rgba(7,20,38,.45) 62%,
    rgba(7,20,38,.0)  100%
  ) !important;
}

/* ============================================================
   35. SAVED FAVOURITES — instructor cards
   Save button on each card, persisted to localStorage.
   ============================================================ */
.ic-cta-row2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}
.ic-save-btn{
  background:none;
  border:1.5px solid var(--line);
  border-radius:99px;
  padding:5px 12px;
  font-size:12.5px;
  font-weight:700;
  color:var(--slate);
  cursor:pointer;
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:5px;
  transition:border-color .15s,color .15s,background .15s;
}
.ic-save-btn:hover{
  border-color:var(--red,#E5484D);
  color:var(--red,#E5484D);
}
.ic-save-btn.saved{
  border-color:var(--red,#E5484D);
  background:rgba(229,72,77,.08);
  color:var(--red,#E5484D);
}
.ic-save-btn.saved .ic-save-ic{ content:'♥'; }
.ic-save-ic{ font-size:14px; }
/* ============================================================
   CDI Mobile-First Global Fix
   Loaded via header.php <style> block
   Fixes: tables, grids, fixed widths, tap targets, spacing
   ============================================================ */

/* ── 1. Tables — always scrollable on mobile ── */
.table-wrap,
.upg-credit-log,
.admin-table-wrap,
.rpt-table-wrap,
.ct-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--line, #E6E9EE);
}

/* Wrap ALL bare tables automatically */
table {
  min-width: 100%;
  border-collapse: collapse;
}

/* Admin tables */
.admin-table,
.rpt-table,
.upg-table,
.ct {
  min-width: 560px; /* forces scroll on mobile rather than squishing */
  width: 100%;
}

.admin-table th,
.admin-table td,
.rpt-table th,
.rpt-table td,
.upg-table th,
.upg-table td {
  padding: 10px 14px;
  font-size: 13px;
  white-space: nowrap;
  text-align: left;
  border-bottom: 1px solid var(--line, #E6E9EE);
}

.admin-table th,
.rpt-table th,
.upg-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate, #5B6072);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--mist, #F5F7FA);
}

/* ── 2. Content page grids → stack on mobile ── */
@media (max-width: 768px) {

  /* Any inline max-width on section containers should be 100% on mobile */
  .cw [style*="max-width"],
  section [style*="max-width"],
  .sec [style*="max-width"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Content grids */
  [style*="grid-template-columns"],
  .info-grid,
  .feat-grid,
  .cms-grid,
  .two-col,
  .three-col,
  .four-col,
  .stats-grid,
  .cards-grid,
  .features-grid,
  .benefits-grid,
  .pros-cons,
  .content-grid,
  .tc-grid,
  .cdi-stats-grid,
  .comp-grid,
  .rpt-grid,
  .upg-boost-grid,
  .upg-packs {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Keep 2-col for small items like pill grids */
  .rg-type-grid,
  .mmenu-grid,
  .filter-pills {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tables — horizontal scroll on mobile */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* But comparison table cells should wrap text */
  .ct td, .ct th {
    white-space: normal;
    min-width: 120px;
  }

  /* Fixed widths → fluid on mobile */
  [style*="width:860px"],
  [style*="width:820px"],
  [style*="width:780px"],
  [style*="width:760px"],
  [style*="width:720px"],
  [style*="width:680px"],
  [style*="width:640px"],
  [style*="width:620px"],
  [style*="width:600px"],
  [style*="width:580px"],
  [style*="width:560px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sections full width */
  .sec, .section, section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Typography scale down */
  h1 { font-size: clamp(24px, 7vw, 40px) !important; }
  h2 { font-size: clamp(20px, 5.5vw, 32px) !important; }
  h3 { font-size: clamp(17px, 4.5vw, 24px) !important; }

  /* Hero sections */
  .hero-block,
  .cdi-hero,
  .saas-hero,
  .page-hero {
    padding: 40px 16px !important;
    text-align: center;
  }

  /* CTA buttons full width on mobile */
  .hero-ctas, .cdi-hero-ctas, .cta-row, .btn-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-ctas .btn,
  .cdi-hero-ctas .btn,
  .cta-row .btn,
  .btn-row .btn,
  .hero-ctas a,
  .cdi-hero-ctas a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Instructor search form */
  .search-form,
  .cdi-search-bar,
  .hero-search {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .search-form select,
  .search-form input,
  .cdi-search-bar input,
  .cdi-search-bar select {
    width: 100% !important;
  }

  /* Stat boxes — 2 col on mobile */
  .stat-boxes,
  .kpi-grid,
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Dashboard cards */
  .dash-card {
    padding: 16px !important;
  }

  /* Instructor card full width */
  .ic, .instructor-card {
    width: 100% !important;
  }

  /* Tap targets minimum 44px */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  select,
  .pill,
  .filter-pill,
  .rg-toggle-pill,
  .spec-chip {
    min-height: 44px !important;
  }

  /* Nav top bar utility row readable on small screens */
  .cdi-util-bar,
  .topbar-info {
    display: none !important; /* hide on very small — shown on tablet+ */
  }

  /* Upgrade page credit packs */
  .upg-packs,
  .credit-pack-grid {
    grid-template-columns: 1fr !important;
  }

  /* Boost options */
  .upg-boost-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard availability grid */
  .av-grid {
    font-size: 11px !important;
  }

  .av-grid th,
  .av-grid td {
    padding: 6px 4px !important;
    font-size: 11px !important;
  }
}

/* ── 3. Tablet adjustments (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {

  .three-col,
  .four-col,
  .features-grid,
  .cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .cdi-stats-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 4. Table scroll indicator on mobile ── */
@media (max-width: 768px) {
  .table-scroll-hint {
    display: block;
    font-size: 11.5px;
    color: var(--slate, #5B6072);
    margin-bottom: 6px;
    text-align: right;
  }
  .table-scroll-hint::before {
    content: '← scroll →';
    font-weight: 600;
  }
}

@media (min-width: 769px) {
  .table-scroll-hint { display: none; }
}

/* ── 5. Admin tables — always scrollable ── */
.adm-content table,
.admin-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-radius: 8px;
}

/* ── 6. Contact / content page tables ── */
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.content-table th,
.content-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #E6E9EE);
  text-align: left;
}

.content-table th {
  background: var(--mist, #F5F7FA);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate, #5B6072);
}

/* ── 7. Dashboard mobile sidebar — already handled by dsb-wrap ── */
/* ── 8. Remove scroll on body when mobile drawer open ── */
body.drawer-open {
  overflow: hidden !important;
}

/* ── 9. Make upgrade payment note readable ── */
.upg-payment-note {
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── 10. Comparison table on mobile → card layout ── */
@media (max-width: 600px) {
  .ct {
    display: block;
    min-width: unset;
  }

  .ct thead { display: none; }

  .ct tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--line, #E6E9EE);
    border-radius: 12px;
    overflow: hidden;
  }

  .ct td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line, #E6E9EE);
    white-space: normal;
    font-size: 13.5px;
  }

  .ct td:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   MOBILE-FIRST GLOBAL FIXES — appended to cdi-fixes.css
   Fixes all responsive issues across every page without
   touching individual PHP files. Mobile-first approach.
   ============================================================ */

/* ── 1. Tables — responsive wrapper everywhere ── */
table,
table.ct,
.table-wrap table,
.cms-table table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse;
}

/* Scrollable table wrapper — prevents horizontal page scroll */
table.ct,
.cms-section table,
.dcard table,
.cdi-section table,
section table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

table.ct thead,
table.ct tbody,
table.ct tr {
  min-width: 0;
}

/* Table cells — readable on mobile */
table th,
table td {
  font-size: 13px !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  min-width: 80px;
}

table th:first-child,
table td:first-child {
  min-width: 100px;
}

/* ── 2. Fixed widths → fluid ── */
@media (max-width: 768px) {
  /* Any inline width over 500px becomes 100% */
  [style*="width:600px"],
  [style*="width:700px"],
  [style*="width:800px"],
  [style*="width:900px"],
  [style*="width:1000px"],
  [style*="width: 600px"],
  [style*="width: 700px"],
  [style*="width: 800px"],
  [style*="max-width:600px"],
  [style*="max-width:700px"],
  [style*="max-width:800px"],
  [style*="max-width:900px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── 3. Grids → single column ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Two-column grids on content pages */
  .dcard > div[style*="display:grid"],
  .cms-section > div[style*="display:grid"],
  section > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 4. Content page hero sections ── */
  .cdi-hero,
  .page-hero,
  .hero-block {
    padding: 28px 16px !important;
  }

  .cdi-hero h1,
  .page-hero h1,
  .hero-block h1 {
    font-size: clamp(24px, 7vw, 38px) !important;
    line-height: 1.15 !important;
  }

  /* ── 5. Section cards → full-width ── */
  .dcard,
  .cdi-section,
  .cms-section,
  .content-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px !important;
    border-radius: 14px !important;
  }

  /* ── 6. Dashboard stats grid → 2 cols on mobile ── */
  .dsb-stats-grid,
  .ph1-stat-grid,
  .dash-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .dash-stat b {
    font-size: 22px !important;
  }

  /* ── 7. Dashboard sidebar → hide on mobile (we have topbar) ── */
  .dsb-sidebar,
  .adm-sidebar {
    display: none !important;
  }

  .dsb-wrap,
  .adm-wrap {
    grid-template-columns: 1fr !important;
  }

  .dsb-content,
  .adm-content {
    padding: 14px !important;
  }

  /* ── 8. Checklist items → stack ── */
  .ph1-ci {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .ph1-ci strong {
    font-size: 13px !important;
  }

  /* ── 9. Availability grid → scrollable ── */
  .availability-matrix {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 10. Dashboard topbar ── */
  .dsb-topbar,
  .adm-topbar {
    padding: 0 14px !important;
  }

  .dsb-topbar-title,
  .adm-topbar-title {
    font-size: 14px !important;
  }

  .dsb-topbar-right .btn-ghost,
  .adm-topbar-right .btn-ghost {
    display: none !important; /* hide secondary actions on mobile */
  }

  /* ── 11. Compare page table ── */
  .compare-table,
  #compareTable {
    display: block !important;
    overflow-x: auto !important;
    font-size: 12px !important;
  }

  /* ── 12. Cost calculator sliders → stack ── */
  .calc-grid,
  .slider-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 13. For-instructors page → stack pricing cards ── */
  .pricing-grid,
  .plan-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 14. Instructor card actions → stack ── */
  .market-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .market-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── 15. Upgrade page credits/plans → stack ── */
  .upgrade-plans,
  .credit-packs {
    grid-template-columns: 1fr !important;
  }

  /* ── 16. Leads page → full width cards ── */
  .lead-card,
  .enquiry-card {
    padding: 14px !important;
  }

  .lead-card .lead-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .lead-card .lead-actions .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── 17. Flex rows that need to wrap ── */
  .foot-grid,
  .cdi-footer-grid {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ── 18. Admin tables → scrollable ── */
  .admin-table-wrap,
  .adm-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 10px !important;
  }

  /* ── 19. Filter pills → horizontal scroll ── */
  .filter-pills,
  .quick-filters,
  .pill-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  .filter-pills::-webkit-scrollbar,
  .quick-filters::-webkit-scrollbar {
    display: none !important;
  }

  /* ── 20. Test centres page ── */
  .tc-grid,
  .test-centre-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Tablet (769–1024px) — 2-col grids ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .dsb-sidebar,
  .adm-sidebar {
    width: 180px !important;
    min-width: 180px !important;
  }

  .dsb-wrap,
  .adm-wrap {
    grid-template-columns: 180px 1fr !important;
  }

  .dsb-nav-item span,
  .adm-nav .dsb-nav-item span {
    font-size: 12px !important;
  }
}

/* ── Global utility — always ── */
/* Prevent any element from overflowing the viewport */
.cdi-wrap,
.page-wrap,
main,
.dsb-content,
.adm-content {
  overflow-x: hidden !important;
}

/* Ensure all images are fluid */
img {
  max-width: 100% !important;
  height: auto;
}

/* Ensure buttons never overflow */
.btn {
  max-width: 100%;
  white-space: normal !important;
  word-break: break-word;
}

/* Text size never too small */
p, li, td, th, span.body-text {
  font-size: max(13px, 0.8125rem);
  line-height: 1.6;
}

/* ── Location city pills — premium thick style ── */
.loc-city-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border: 1.5px solid var(--line, #E6E9EE) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: var(--ink, #14171F) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: border-color .15s, box-shadow .15s, transform .1s !important;
  min-height: 52px !important;
}
.loc-city-card:hover {
  border-color: var(--navy, #0B1F3D) !important;
  box-shadow: 0 4px 16px rgba(11,31,61,.1) !important;
  transform: translateY(-1px) !important;
}
.loc-city-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink, #14171F) !important;
}
.loc-city-meta {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.loc-city-meta span {
  font-size: 12px !important;
  color: var(--slate, #5B6072) !important;
  font-weight: 500 !important;
}
.loc-city-arrow {
  color: var(--slate-light, #8B91A1) !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.loc-city-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.loc-region {
  margin-bottom: 32px !important;
}
.loc-region-h {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink, #14171F) !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--line, #E6E9EE) !important;
}
@media(max-width: 560px) {
  .loc-city-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .loc-city-card {
    padding: 10px 12px !important;
    min-height: 48px !important;
  }
  .loc-city-name {
    font-size: 13px !important;
  }
}

/* ── Scrollable pill rows ── */
.qf-pills,
.qf-bar,
.cdi-pills-row,
.filter-row {
  display: flex !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.qf-pills::-webkit-scrollbar,
.qf-bar::-webkit-scrollbar,
.cdi-pills-row::-webkit-scrollbar {
  display: none !important;
}

/* ── Content max-width container — desktop centred, full-width sections ──
   Header, footer, hero bands = full width (fw class or no .cw)
   All body content inside .cw = max 1180px centred
   This is the standard SaaS layout pattern ── */

/* Desktop content wrapper */
.cw,
.cdi-container,
.container,
.page-container {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Full-width sections override (hero bands, nav, footer) */
.fw > .cw,
.topnav .cw,
.mphero .cw,
.foot-inner .cw {
  max-width: 1180px !important;
}

/* The topnav .row already handles its own width */
.topnav .row {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ── Typography scale ── */
@media (max-width: 768px) {
  h1 { font-size: clamp(22px, 6.5vw, 36px) !important; }
  h2 { font-size: clamp(18px, 5vw, 26px) !important; }
  h3 { font-size: clamp(15px, 4vw, 20px) !important; }
}

/* ── Mobile drawer must sit above topnav ── */
.mobile-drawer {
  z-index: 9999 !important;
}

/* ── Nav mega panel - ensure above topnav ── */
.nav-mega-panel,
.nav-mega-trigger.is-open .nav-mega-panel {
  z-index: 9950 !important;
  top: 68px !important;
}