/* ==========================================================================
   MidBank — Institutional light theme (2026-09-15)
   White-predominant surfaces, near-black header/footer, navy primary,
   MidBank red as a sparse accent. Loaded LAST; overrides only, no new copy.
   Palette sampled from images/midbank-logo-color.png.
   ========================================================================== */

:root{
  --mb-red:#DD1726; --mb-red-dark:#B5121F;
  --mb-navy:#2C2E83; --mb-navy-dark:#1E2160; --mb-navy-light:#4A4DA8; --mb-navy-deep:#0E3350;
  --mb-ink:#0E1526; --mb-header:#0B0B14;
  --mb-body:#454C5C; --mb-muted:#6B7280;
  --mb-line:#E3E6EC; --mb-line-strong:#CFD5DF; --mb-soft:#F6F7F9;
}

/* ---------- Base surface ------------------------------------------------ */
html{background:#fff;}
body{
  background:#fff;
  color:var(--mb-ink);
  -webkit-font-smoothing:antialiased;
}
body::before,body::after{display:none !important;}

h1,h2,h3,h4,h5,h6{color:var(--mb-ink);}
p,li,dd,td{color:var(--mb-body);}
small{color:var(--mb-muted);}

a{color:var(--mb-navy);}
a:hover{color:var(--mb-navy-dark);}

hr{border:0;border-top:1px solid var(--mb-line);}

::selection{background:rgba(44,46,131,.14);color:var(--mb-ink);}

/* Focus — visible on white */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--mb-navy);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------- Header / nav: stays near-black ------------------------------ */
.mb-nav-header,.nav{
  background:var(--mb-header) !important;
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:none;
}
.mb-nav-header a,.nav a,.nav .nav-link{color:rgba(255,255,255,.86);}
.nav .nav-link:hover,.mb-nav-header a:hover{color:#fff;}
/* The mega-panel is a WHITE institutional sheet (2026-09-15) — it is no
   longer part of the dark chrome, so none of the near-black nav overrides
   below may reach inside it. Typography and colour live in mb-nav.css. */
.mb-nav-panel{background:#fff !important;}
.mb-nav-panel-inner{background:transparent !important;}
.mb-nav-panel a,.mb-nav-item{color:inherit;}
.mb-nav-group-label{letter-spacing:.14em;}
.mb-nav-cta,.nav .nav-btn,.mb-nav-header .nav-btn{
  background:var(--mb-navy) !important;
  background-image:none !important;
  color:#fff !important;
  border-radius:4px;
  box-shadow:none !important;
}
.mb-nav-cta:hover,.nav .nav-btn:hover,.mb-nav-header .nav-btn:hover{
  background:var(--mb-navy-dark) !important;transform:none !important;
}
/* .nav-btn is reused as an in-page primary button on several pages:
   red stays the header accent, in-page primaries are navy. */
.nav-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--mb-navy) !important;background-image:none !important;
  color:#fff !important;border:1px solid var(--mb-navy) !important;
  border-radius:4px !important;box-shadow:none !important;
}
.nav-btn:hover{background:var(--mb-navy-dark) !important;border-color:var(--mb-navy-dark) !important;transform:none !important;}
.mb-nav-header .mb-nav-login{color:rgba(255,255,255,.82) !important;}
.nav-dropdown-content,.nav-mega{
  background:var(--mb-header) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:6px;
  box-shadow:0 20px 44px rgba(0,0,0,.35);
}
.nav-mega-heading{color:rgba(255,255,255,.55) !important;}
.nav-dropdown-content a{color:rgba(255,255,255,.85) !important;}
.nav-dropdown-content a:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;transform:none !important;}
.nav-toggle span,.mb-nav-toggle span{background:#fff;}

/* Body content must clear the fixed header */
body{padding-top:0;}

/* ---------- Kill the purple/indigo atmosphere --------------------------- */
.gradient-orb,.orb-1,.orb-2,.orb-3,.particles,.particle,
.shimmer,.glow-border,.cinematic-blur::before,.hero::before,
.security-shield,.shield-layer{display:none !important;}

.gradient-text,.shine-text{
  background:none !important;
  -webkit-text-fill-color:var(--mb-navy) !important;
  color:var(--mb-navy) !important;
}

/* ---------- Hero -------------------------------------------------------- */
.hero{
  min-height:auto;
  background:#fff;
  padding:clamp(120px,14vw,168px) 0 clamp(56px,7vw,88px);
  border-bottom:1px solid var(--mb-line);
}
.hero-background{background:#fff;}
.hero-background::after{opacity:.10;filter:grayscale(.35) contrast(.92);}
/* REGRESSION FIX (2026-09-18). The rule above turned .hero-background into an
   OPAQUE WHITE sheet. That layer is position:absolute; z-index:0, while the
   hero's .container is position:static — and a static element paints UNDER a
   positioned one. Result: the white sheet covered every H1 and subtitle on 13
   pages (services/*, get-started, schedule-consultation). Only the icon and the
   CTA survived, because their animations gave them their own stacking context.
   Lifting the container above the layer fixes all 13 at once. position:relative
   with no offsets does not move the container at all. */
.hero-background ~ .container{position:relative;z-index:2;}
.hero-title,.hero h1{color:var(--mb-ink);}
.hero-description,.hero p{color:var(--mb-body);}
.hero-badge,.section-badge{
  background:#fff;
  border:1px solid var(--mb-line-strong);
  color:var(--mb-navy);
  border-radius:3px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.72rem;
}
.badge-dot{background:var(--mb-navy);}
.hero-scroll,.scroll-indicator{color:var(--mb-muted);}

/* ---------- Sections ---------------------------------------------------- */
section{background:transparent;}
.services,.testimonials,.trust-section,.brands-section,.platform,.story-section{background:#fff;}
.features,.security,.enterprise-stats{background:var(--mb-soft);border-block:1px solid var(--mb-line);}
.section-title{color:var(--mb-ink);}
.section-description{color:var(--mb-body);}

/* ---------- Cards: hairline, not glow ----------------------------------- */
.feature-card,.service-card,.testimonial-card,.luxury-card,.dashboard-card,
.stat-block,.story-stats-card,.glass-effect,.balance-card,.platform-screen,
.transaction-item,.stat-block-luxury{
  background:#fff !important;
  border:1px solid var(--mb-line) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.feature-card:hover,.service-card:hover,.testimonial-card:hover,.luxury-card:hover,
.stat-block:hover,.story-stat:hover{
  border-color:var(--mb-line-strong) !important;
  box-shadow:0 8px 24px -12px rgba(14,21,38,.22) !important;
  transform:translateY(-2px) !important;
}
.feature-title,.service-title,.card-value,.stat-value,.stat-number,
.story-stat-number,.balance-amount,.premium-counter,.luxury-heading{color:var(--mb-ink) !important;}
.feature-description,.service-description,.testimonial-text,.card-label,
.stat-label,.stat-detail,.story-stat-label,.balance-label,.transaction-date{color:var(--mb-body) !important;}

/* Stat rows: navy numerals on white */
.stat-number,.stat-value,.story-stat-number,.premium-counter{
  color:var(--mb-navy) !important;
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
}
.stat-divider{background:var(--mb-line);}

.feature-icon,.service-icon,.card-icon,.stat-icon,.platform-feature-icon,.author-avatar{
  background:rgba(44,46,131,.07) !important;
  background-image:none !important;
  color:var(--mb-navy) !important;
  border:1px solid rgba(44,46,131,.14) !important;
  border-radius:5px !important;
  box-shadow:none !important;
}
.card-icon.success,.transaction-icon.success{background:rgba(15,123,84,.09) !important;color:#0F7B54 !important;border-color:rgba(15,123,84,.18) !important;}

.feature-link,.service-link{color:var(--mb-navy) !important;}
.feature-link:hover,.service-link:hover{color:var(--mb-navy) !important;}

.testimonial-rating{color:var(--mb-navy);}
.author-name{color:var(--mb-ink) !important;}
.author-title{color:var(--mb-muted) !important;}

/* ---------- Buttons ----------------------------------------------------- */
.btn,.btn-premium{border-radius:4px;font-weight:600;letter-spacing:.01em;}
.btn-primary,.btn-premium{
  background:var(--mb-navy) !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid var(--mb-navy) !important;
  box-shadow:none !important;
}
.btn-primary:hover,.btn-premium:hover{
  background:var(--mb-navy-dark) !important;
  border-color:var(--mb-navy-dark) !important;
  transform:none !important;box-shadow:none !important;
}
.btn-premium::before{display:none !important;}
.btn-secondary{
  background:#fff !important;
  color:var(--mb-navy) !important;
  border:1px solid var(--mb-line-strong) !important;
  box-shadow:none !important;
}
.btn-secondary:hover{
  background:var(--mb-soft) !important;
  border-color:var(--mb-navy) !important;
  color:var(--mb-navy) !important;
  transform:none !important;
}

/* ---------- Trust / brand tiles (keep white tiles) ---------------------- */
.trust-section{background:#fff;border-block:1px solid var(--mb-line);}
.trust-text,.brands-title{color:var(--mb-muted) !important;}
.trust-logo{filter:none;opacity:.75;}
.trust-logo:hover{opacity:1;}
.brand-tile{background:#fff !important;border:1px solid var(--mb-line) !important;box-shadow:none !important;}

/* ---------- Dark feature bands (kept, restyled navy/ink) ---------------- */
.cta-section,.midpay-section{
  background:var(--mb-navy-dark) !important;
  background-image:none !important;
  border-block:0;
}
.cta-section::before,.midpay-section::before{display:none !important;}
.cta-title,.cta-description,.midpay-title,.midpay-subtitle,
.cta-section h2,.cta-section p,.midpay-section h2,.midpay-section p,
.midpay-details p,.midpay-cta-text{color:#fff !important;}
.cta-description,.midpay-subtitle{color:rgba(255,255,255,.80) !important;}
.cta-section .btn-primary{background:#fff !important;color:var(--mb-navy-dark) !important;border-color:#fff !important;}
.cta-section .btn-primary:hover{background:#F0F1F6 !important;color:var(--mb-navy-dark) !important;}
.cta-section .btn-secondary{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.45) !important;}
.cta-section .btn-secondary:hover{background:rgba(255,255,255,.10) !important;color:#fff !important;}

/* ---------- Footer: near-black ------------------------------------------ */
.footer{
  background:var(--mb-header) !important;
  background-image:none !important;
  border-top:3px solid var(--mb-red);
  color:rgba(255,255,255,.72);
}
.footer h1,.footer h2,.footer h3,.footer h4,.footer-heading{color:#fff !important;}
.footer p,.footer-description,.footer-text,.footer-copyright,
.footer-copyright-main,.footer-disclaimer,.footer-license{color:rgba(255,255,255,.66) !important;}
.footer-link,.legal-link{color:rgba(255,255,255,.72) !important;}
.footer-link:hover,.legal-link:hover{color:#fff !important;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12) !important;}
.social-link{background:rgba(255,255,255,.08) !important;color:#fff !important;border:1px solid rgba(255,255,255,.14) !important;}
.social-link:hover{background:var(--mb-navy) !important;border-color:var(--mb-navy) !important;}

/* ---------- Forms ------------------------------------------------------- */
input,select,textarea{
  background:#fff;
  color:var(--mb-ink);
  border:1px solid var(--mb-line-strong);
  border-radius:4px;
}
input::placeholder,textarea::placeholder{color:#9AA1AE;}
input:focus,select:focus,textarea:focus{border-color:var(--mb-navy);box-shadow:0 0 0 3px rgba(44,46,131,.12);outline:none;}
label,.form-label{color:var(--mb-ink);}

/* Application wizard (home page + apply) */
.wizard,.form-wizard,.wizard-card,.wizard-step,.fw-card,.fw-panel{
  background:#fff !important;
  border:1px solid var(--mb-line) !important;
  box-shadow:none !important;
  color:var(--mb-ink) !important;
}
.wizard h1,.wizard h2,.wizard h3,.form-wizard h1,.form-wizard h2,.form-wizard h3{color:var(--mb-ink) !important;}
.wizard p,.form-wizard p,.wizard label,.form-wizard label{color:var(--mb-body) !important;}
.wizard-progress,.fw-progress{background:var(--mb-line) !important;}
.wizard-progress-bar,.fw-progress-bar,.fw-progress > span{background:var(--mb-navy) !important;}

/* ---------- Tables ------------------------------------------------------ */
table{border-collapse:collapse;width:100%;}
th{background:var(--mb-soft);color:var(--mb-ink);border:1px solid var(--mb-line);}
td{border:1px solid var(--mb-line);color:var(--mb-body);}

/* ---------- Motion: restrained ------------------------------------------ */
.fade-in-scroll{opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- Overflow guard --------------------------------------------- */
html,body{overflow-x:hidden;max-width:100%;}
img,svg,video,iframe,table,pre{max-width:100%;}

@media (max-width:480px){
  .container{padding-left:1.25rem;padding-right:1.25rem;}
}

/* ---------- No-JS safety: never leave content invisible ----------------- */
.animate-on-scroll,.reveal,.fade-up,[data-animate]{opacity:1 !important;transform:none !important;}

/* ---------- Display headings: solid ink, no gradient fill ---------------- */
.luxury-heading,.shine-text,.gradient-text,.gradient-text-animate,.premium-counter{
  background:none !important;background-image:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  animation:none !important;
}
.luxury-heading{color:var(--mb-ink) !important;}
.hero-title{color:var(--mb-ink) !important;}
.hero-title .gradient-text,.hero-title .shine-text{color:var(--mb-navy) !important;}
.section-title .gradient-text,h2 .gradient-text,h2 .shine-text{color:var(--mb-navy) !important;}
.premium-counter,.counter{color:var(--mb-navy) !important;}
.section-divider{background:var(--mb-line) !important;}
.section-divider::before{background:var(--mb-navy) !important;width:5px;height:5px;border-radius:50%;}

/* ---------- Client transformation stories: white band ------------------- */
.transformations-section{
  background:var(--mb-soft) !important;
  background-image:none !important;
  min-height:auto !important;
  padding:clamp(56px,7vw,92px) 0 !important;
  border-block:1px solid var(--mb-line);
}
.transformations-section::before{display:none !important;}
.transformations-grid{gap:28px !important;margin:48px 0 !important;}
.transformation-card{
  background:#fff !important;background-image:none !important;
  border:1px solid var(--mb-line) !important;
  border-radius:8px !important;
  gap:32px !important;
  box-shadow:none !important;
}
.transformation-card::before{display:none !important;}
.transformation-card:hover{
  border-color:var(--mb-line-strong) !important;
  box-shadow:0 10px 28px -14px rgba(14,21,38,.20) !important;
  transform:none !important;
}
.transformation-title{color:var(--mb-ink) !important;}
.transformation-description,.transformation-meta,.cta-note{color:var(--mb-body) !important;}
.client-info strong{color:var(--mb-ink) !important;}
.client-info span{color:var(--mb-muted) !important;}
.stat-badge,.service-badge{
  background:#fff !important;background-image:none !important;
  border:1px solid var(--mb-line-strong) !important;
  color:var(--mb-navy) !important;
  border-radius:3px !important;
}
.video-placeholder{
  background:var(--mb-soft) !important;background-image:none !important;
  border:1px solid var(--mb-line) !important;
}
.video-placeholder i,.video-placeholder p{color:var(--mb-muted) !important;}
.transformations-cta h3{color:var(--mb-ink) !important;}

/* ---------- Glass / premium leftovers ----------------------------------- */
.glass-effect{
  background:#fff !important;
  border:1px solid var(--mb-line) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
.hover-glow:hover{box-shadow:0 8px 24px -14px rgba(14,21,38,.25) !important;}
.hover-shine::before{display:none !important;}
.skeleton{background:var(--mb-soft) !important;}
.progress-bar{background:var(--mb-line) !important;}
.progress-bar::after{background:var(--mb-navy) !important;}

/* ---------- Security / platform bands ----------------------------------- */
.security,.platform{background:var(--mb-soft) !important;background-image:none !important;}
.security-feature,.platform-feature{color:var(--mb-body) !important;}
.security-feature i,.platform-feature i{color:var(--mb-navy) !important;}
.platform-feature-content h4{color:var(--mb-ink) !important;}
.platform-feature-content p{color:var(--mb-body) !important;}
.screen-header{background:var(--mb-soft) !important;border-bottom:1px solid var(--mb-line) !important;}
.screen-body{background:#fff !important;}
.quick-actions .action-btn{background:#fff !important;border:1px solid var(--mb-line) !important;color:var(--mb-navy) !important;}
.action-btn:hover{background:var(--mb-soft) !important;}
.transaction-name{color:var(--mb-ink) !important;}
.transaction-amount{color:var(--mb-ink) !important;}
.transaction-amount.positive,.balance-change.positive{color:#0F7B54 !important;}

/* ---------- Story section ----------------------------------------------- */
.story-section{background:#fff !important;background-image:none !important;}
.story-paragraph,.story-text{color:var(--mb-body) !important;}
.story-paragraph strong{color:var(--mb-ink) !important;}
.story-tagline{color:var(--mb-navy) !important;}

/* ---------- Tipping App band: keep dark, brand it ----------------------- */
#midbank-app{
  background:var(--mb-header) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:3px solid var(--mb-navy) !important;
}
#midbank-app .mbk-app-blob{display:none !important;}
#midbank-app h1,#midbank-app h2,#midbank-app h3,#midbank-app strong{color:#fff !important;}
#midbank-app p,#midbank-app li{color:rgba(255,255,255,.74) !important;}

/* ---------- No-JS safety: nothing stays invisible ----------------------- */
.animate-on-scroll,.animate-on-scroll.fade-up,.animate-on-scroll.fade-left,
.animate-on-scroll.fade-right,.animate-on-scroll.scale,
.reveal,.fade-in-scroll,.testimonial-card,.feature-card,.service-card,
.transformation-card,[data-animate],[data-aos]{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}

/* ---------- Brand tiles: white tiles preserved -------------------------- */
.brands-section{background:#fff !important;border-block:1px solid var(--mb-line);}
.brand-tile img{filter:none !important;opacity:1 !important;}

/* Great Brands row: tiles must read as tiles on the white section */
.brand-logo{
  background:#F6F7F9 !important;
  border:1px solid #E6E8EF !important;
  border-radius:14px !important;
  padding:1.25rem 1.5rem !important;
  box-shadow:none !important;
}
.brand-logo:hover{
  transform:none !important;
  background:#fff !important;
  border-color:var(--mb-line-strong) !important;
  box-shadow:0 8px 22px -14px rgba(14,21,38,.22) !important;
}
.brand-tile{
  background:#fff !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
.brands-grid{
  grid-template-columns:repeat(2,minmax(0,180px)) !important;
  justify-content:center !important;
  gap:1.25rem !important;
}
@media (min-width:600px){.brands-grid{grid-template-columns:repeat(3,minmax(0,180px)) !important;gap:1.5rem !important;}}
@media (min-width:900px){.brands-grid{grid-template-columns:repeat(4,minmax(0,190px)) !important;}}
@media (max-width:480px){
  .brands-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:1rem !important;}
  .brand-logo{min-width:0 !important;padding:1rem !important;}
}
.brands-title{color:var(--mb-ink) !important;font-style:normal !important;}

/* ==========================================================================
   Product / service page template (page-hero · page-section · feature-card ·
   step-card · info-list · final-cta) and its per-page variants.
   These pages shipped as dark-only inline <style> blocks; flipped here.
   ========================================================================== */

.page-hero,.portal-hero,.re-hero,.edu-hero,.ac-hero,.eg-hero,.ml-hero,.c-hero{
  background:var(--mb-soft) !important;
  background-image:none !important;
  border-bottom:1px solid var(--mb-line) !important;
  padding-top:clamp(112px,13vw,150px) !important;
}
.page-hero h1,.portal-hero h1,.re-hero h1,.edu-hero h1,.ac-hero h1,.eg-hero h1,
.ml-hero h1,.c-hero h1{color:var(--mb-ink) !important;}
.page-hero p,.portal-hero p,.re-hero p,.edu-hero p,.ac-hero p,.eg-hero p,
.ml-hero p,.c-hero p{color:var(--mb-body) !important;}
.page-hero h1 .grad,.page-hero .grad,h1 .grad,h2 .grad{
  background:none !important;background-image:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:var(--mb-navy) !important;color:var(--mb-navy) !important;
}
.page-hero .breadcrumb{color:var(--mb-muted) !important;}
.page-hero .breadcrumb a{color:var(--mb-navy) !important;}
.page-hero .breadcrumb a:hover{color:var(--mb-navy) !important;}

/* Section shells */
.page-section,.portal-section,.re-section,.edu-section,.ac{
  border-top:1px solid var(--mb-line) !important;
  background:#fff;
}
.page-section-head h2,.portal-section-head h2,.re-section-head h2,
.edu-section h2,.ac h2,.ac-alt h2{color:var(--mb-ink) !important;}
.page-section-head p,.portal-section-head p,.re-section-head p{color:var(--mb-body) !important;}
.edu-section strong{color:var(--mb-ink) !important;}

/* Cards */
.feature-card,.step-card,.portal-feature-card,.gateway-card,.loan-card,
.why-card,.crypto-embed-frame,.cta-box,.eligibility-stat,.ac-row{
  background:#fff !important;background-image:none !important;
  border:1px solid var(--mb-line) !important;
  border-radius:6px !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.feature-card:hover,.step-card:hover,.portal-feature-card:hover,
.loan-card:hover,.why-card:hover,.gateway-card:hover{
  transform:none !important;
  border-color:var(--mb-line-strong) !important;
  box-shadow:0 8px 22px -14px rgba(14,21,38,.22) !important;
}
.feature-card h3,.step-card h3,.portal-feature-card h3,.gateway-card h3,
.loan-card h3,.why-card h3,.ac-row h4{color:var(--mb-ink) !important;}
.feature-card p,.step-card p,.portal-feature-card p,.gateway-card p,
.loan-card p,.why-card p,.crypto-embed-frame p,.crypto-embed-frame small,
.cta-box p{color:var(--mb-body) !important;}

/* Icon chips + numerals */
.feature-card .icon,.portal-feature-icon,.loan-icon,.why-card .why-icon,
.pillar-icon,.step-num,.mb-author .ic{
  background:rgba(44,46,131,.07) !important;background-image:none !important;
  color:var(--mb-navy) !important;
  border:1px solid rgba(44,46,131,.16) !important;
  border-radius:5px !important;
}
.step-num{border-radius:50% !important;}

/* Lists / terms */
.info-list li,.loan-terms li{
  background:var(--mb-soft) !important;
  border-left:3px solid var(--mb-navy) !important;
  color:var(--mb-body) !important;
  border-radius:0 4px 4px 0 !important;
}
.info-list li strong,.loan-terms li strong{color:var(--mb-ink) !important;}
.eligibility-stat .label,.eligibility-stat .sub{color:var(--mb-muted) !important;}
.eligibility-stat .value{color:var(--mb-navy) !important;}
.price-strip,.tier-flag,.stat{
  background:#fff !important;background-image:none !important;
  border:1px solid var(--mb-line-strong) !important;
  color:var(--mb-navy) !important;
  border-radius:3px !important;
}
.disclaimer{color:var(--mb-muted) !important;}
table.enr th{background:var(--mb-soft) !important;color:var(--mb-ink) !important;}

/* Buttons on these pages */
.btn-pink,.ac-btn,.edu-cta a,.ac-cta a{
  background:var(--mb-navy) !important;background-image:none !important;
  color:#fff !important;border:1px solid var(--mb-navy) !important;
  border-radius:4px !important;
}
.btn-pink:hover,.ac-btn:hover{
  background:var(--mb-navy-dark) !important;transform:none !important;filter:none !important;
}
.btn-ghost,.btn.ghost,.ac-alt a{
  background:#fff !important;background-image:none !important;
  color:var(--mb-navy) !important;
  border:1px solid var(--mb-line-strong) !important;
  border-radius:4px !important;
}
.btn-ghost:hover,.btn.ghost:hover{background:var(--mb-soft) !important;border-color:var(--mb-navy) !important;}

/* Closing CTA bands: navy, white type */
.final-cta,.portal-final-cta,.re-final-cta,.ac-cta,.edu-cta,.eg-cta{
  background:var(--mb-navy-dark) !important;
  background-image:none !important;
  border-top:0 !important;
}
.final-cta h2,.portal-final-cta h2,.re-final-cta h2,.ac-cta h2,.edu-cta h2,.eg-cta h2{color:#fff !important;}
.final-cta p,.portal-final-cta p,.re-final-cta p,.ac-cta p,.edu-cta p,.eg-cta p{color:rgba(255,255,255,.80) !important;}
.final-cta .btn-pink,.portal-final-cta .btn-pink,.re-final-cta .btn-pink,
.ac-cta a,.edu-cta a{background:#fff !important;color:var(--mb-navy-dark) !important;border-color:#fff !important;}
.final-cta .btn-ghost,.portal-final-cta .btn-ghost,.re-final-cta .btn-ghost{
  background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.45) !important;
}
.final-cta .disclaimer{color:rgba(255,255,255,.60) !important;}

/* Section alternation for readability */
.page-section:nth-of-type(even),.re-section:nth-of-type(even){background:var(--mb-soft);}

/* Misc leftovers */
.gateway-logo{color:var(--mb-navy) !important;}
.slow-state h2{color:var(--mb-ink) !important;}
.redirect-link{color:var(--mb-navy) !important;}
.topbar{background:var(--mb-header) !important;}

/* ==========================================================================
   App shells — auth (login/signup/acceso/auth-callback) and dashboard/admin.
   Structure and Clerk mounting untouched; surfaces only.
   ========================================================================== */
:root{
  --dash-bg:#F6F7F9;
  --dash-panel:#ffffff;
  --dash-border:#E3E6EC;
  --dash-border-strong:#CFD5DF;
  --dash-text:#0E1526;
  --dash-muted:#6B7280;
  --dash-accent:#2C2E83;
}
body.dashboard-body,body.auth-body{
  background:var(--mb-soft) !important;
  background-image:none !important;
  color:var(--mb-ink) !important;
}
.auth-shell,.dashboard-shell{background:transparent;}
.auth-card,.dash-panel,.dash-card,.admin-card,.card{
  background:#fff !important;
  border:1px solid var(--mb-line) !important;
  border-radius:8px !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  color:var(--mb-ink) !important;
}
.auth-card h1,.auth-card h2,.auth-card p,.auth-card label{color:var(--mb-ink) !important;}
.auth-card p,.auth-gate{color:var(--mb-body) !important;}
.auth-gate .auth-spinner{border-color:var(--mb-line) !important;border-top-color:var(--mb-navy) !important;}
.dash-sidebar,.dash-topbar,.admin-topbar{
  background:#fff !important;
  border-color:var(--mb-line) !important;
  color:var(--mb-ink) !important;
}
.dash-sidebar a,.dash-nav a,.dash-bottombar a{color:var(--mb-body) !important;}
.dash-sidebar a.is-active,.dash-nav a.is-active,.dash-bottombar a.is-active{
  color:var(--mb-navy) !important;background:rgba(44,46,131,.07) !important;
}
.dashboard-body table th,.admin-table th{background:var(--mb-soft) !important;color:var(--mb-ink) !important;}
.dashboard-body table td,.admin-table td{color:var(--mb-body) !important;border-color:var(--mb-line) !important;}
.dashboard-body h1,.dashboard-body h2,.dashboard-body h3{color:var(--mb-ink) !important;}
/* Clerk widget stays on its own light default */
.cl-rootBox,.cl-card{box-shadow:none !important;}

/* App-shell nav states + logo sizing on light chrome */
.dash-logo img,.topbar .logo img,.nav-logo .logo-image{height:34px;width:auto;}
.dash-nav-item,.dash-sidebar-link,.bottom-tab{color:var(--mb-body) !important;}
.dash-nav-item:hover,.dash-sidebar-link:hover{background:var(--mb-soft) !important;color:var(--mb-navy) !important;}
.dash-nav-item.is-active,.bottom-tab.is-active{
  background:rgba(44,46,131,.08) !important;background-image:none !important;
  color:var(--mb-navy) !important;
  border-left:2px solid var(--mb-navy) !important;
  border-radius:0 4px 4px 0 !important;
}
.dash-nav-item.is-active i,.bottom-tab.is-active i{color:var(--mb-navy) !important;}
.dash-sidebar-footer{border-top:1px solid var(--mb-line) !important;}
.dash-avatar,.user-avatar{background:var(--mb-navy) !important;background-image:none !important;color:#fff !important;}
.dash-empty,.dash-placeholder{border:1px dashed var(--mb-line-strong) !important;color:var(--mb-muted) !important;background:#fff !important;}
.dash-error,.auth-error{color:var(--mb-red-dark) !important;}

/* ---------- Residual fixes after the light conversion ------------------- */
/* Links must never be navy-on-near-black inside the dark chrome */
.mb-nav-header a,.footer a,.footer-link,.legal-link,
.cta-section a,.final-cta a,.midpay-section a,#midbank-app a{color:inherit;}
.footer a:not(.social-link){color:rgba(255,255,255,.72) !important;}
.footer a:not(.social-link):hover{color:#fff !important;}

.category-title,.section-title,.page-section h2,.page-section h3{color:var(--mb-ink) !important;}
.gateway-logo{color:#fff !important;}
.ac-tag,.edu-tag,.fc-assumption-tag,.price-strip{
  background:#fff !important;border:1px solid var(--mb-line-strong) !important;color:var(--mb-navy) !important;
}
.lead{color:var(--mb-body) !important;}

.faq-question,.fc-breakdown-value,.merchant-note{color:var(--mb-ink) !important;}
.merchant-note,.fc-breakdown-label{color:var(--mb-body) !important;}
.admin-pill{background:#fff !important;border:1px solid var(--mb-line-strong) !important;color:var(--mb-navy) !important;}

/* Card/section headings that inherited the old dark-theme white */
.service-card h3,.service-card h4,.faq-item h3,.faq-item h4,.cta-box h3,
.section-head h2,.section-head h3,.pillar h3,.grid-card h3,.col-card h3,
.offer-card h3,.plan-card h3,.tier-card h3,.value-card h3,.principle h3{
  color:var(--mb-ink) !important;
}
.service-card p,.faq-item p,.cta-box p,.section-head p{color:var(--mb-body) !important;}

/* Headings inside light boxes / heroes that kept the old white */
.cta-box h1,.cta-box h2,.cta-box h3,.cta-box h4{color:var(--mb-ink) !important;}
.section-header h1,.section-header h2,.section-header h3{color:var(--mb-ink) !important;}
/* grow-with-midbank + any page whose h1/h2 sit directly on the white body */
body > h1,body > h2,main > h1,main > h2,
section > .container > h1,section > .container > h2,
section > h1,section > h2{color:var(--mb-ink);}
/* Internal ops pages (growth/admin consoles) shipped on a dark palette */
.kw-table td,.kw-table a,table td,table a{color:var(--mb-body) !important;}
.dashboard-body .bottom-tab{color:var(--mb-body) !important;}
.dashboard-body .bottom-tab.is-active{color:var(--mb-navy) !important;background:rgba(44,46,131,.10) !important;}
.dash-bottombar{background:#fff !important;border-top:1px solid var(--mb-line) !important;}

.grow-hero,.grow-section{background:#fff !important;background-image:none !important;}
.grow-hero h1,.grow-hero h2,.grow-hero h3,.grow-section h2,.grow-section h3,
.grow-card h3,.grow-hero-inner h1{color:var(--mb-ink) !important;}
.grow-hero p,.lede,.grow-section p,.grow-card p{color:var(--mb-body) !important;}

/* Final tail: badges, tabs, revealed panels */
.section-badge span,.hero-badge span,.page-hero .badge span{color:var(--mb-navy) !important;}
.dash-bottom-tabs{background:#fff !important;border-top:1px solid var(--mb-line) !important;}
/* Calculator result panels are JS-revealed: hide them outright rather than
   leaving opacity:0 content in the accessibility tree. */
.results-box{display:none !important;}
.results-box.show{display:block !important;opacity:1 !important;transform:none !important;
  background:var(--mb-soft) !important;border:1px solid var(--mb-line) !important;border-radius:6px !important;}

/* Photo bands keep a dark scrim; their type stays white */
.transformations-cta{background:var(--mb-navy-dark) !important;background-image:none !important;}
.transformations-cta h1,.transformations-cta h2,.transformations-cta h3{color:#fff !important;}
.transformations-cta p{color:rgba(255,255,255,.80) !important;}
.transformations-cta .btn-primary,.transformations-cta .btn-premium{
  background:#fff !important;color:var(--mb-navy-dark) !important;border-color:#fff !important;
}

/* Any inline pill/badge variant: white chip, hairline, navy label */
.crypto-badge,.re-badge,.portal-badge,.edu-badge,.ac-badge,.grow-badge,
.offers-badge,.badge,.pill,.tag{
  background:#fff !important;background-image:none !important;
  border:1px solid var(--mb-line-strong) !important;
  color:var(--mb-navy) !important;
  border-radius:3px !important;
}
.crypto-badge span,.re-badge span,.portal-badge span,.badge span,.pill span,.tag span,
.crypto-badge i,.badge i,.pill i{color:var(--mb-navy) !important;}

/* Success/positive tone must clear AA on white */
.positive,.is-positive,.text-success{color:#0F7B54 !important;}
.dash-bottom-tabs .bottom-tab.is-active{background:transparent !important;color:var(--mb-navy) !important;border-top:2px solid var(--mb-navy) !important;border-left:0 !important;}

@media (max-width:480px){
  .brands-grid .brand-logo > span:not(.brand-tile){font-size:19px !important;}
  .brands-grid .brand-logo > span:not(.brand-tile) + span{font-size:13px !important;}
}

/* Nav badge + active rail in brand red/navy, not indigo */
.mb-nav-badge{color:var(--mb-navy) !important;border-color:rgba(44,46,131,.45) !important;border-radius:3px !important;}
/* The inset rail rendered as a stray "|" floating before the active item in
   the white panel. Active state is now weight + ink (see mb-nav.css). */
.mb-nav-item[aria-current]{box-shadow:none !important;color:var(--mb-ink) !important;font-weight:600 !important;}
/* The panel takes programmatic focus when it opens; the global
   [tabindex]:focus-visible ring drew a stray outline over the menu. */
.mb-nav-panel:focus,.mb-nav-panel:focus-visible{outline:none !important;}
.mb-nav-toggle:focus-visible,.mb-nav-cta:focus-visible,.mb-nav-login:focus-visible{outline:2px solid #fff !important;outline-offset:3px;}

/* Round icon medallions (our-story Golden Circle etc.) */
.circle-icon,.icon-circle,.value-icon,.mvv-icon{
  background:rgba(44,46,131,.07) !important;background-image:none !important;
  border:1px solid rgba(44,46,131,.16) !important;
  color:var(--mb-navy) !important;
  border-radius:50% !important;
  box-shadow:none !important;
}
/* Our Approach pill sits on a photo: keep it readable */
.our-story-photo-pill{background:#fff !important;}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-FIRST PASS — 2026-09-17
   Loaded last on every page, so these apply site-wide, not just the home.

   Audited at 390 / 820 / 1440 with a script that measures real rendered
   boxes. Horizontal overflow was already zero at all three; what it found
   was touch targets and type sizes that are fine under a mouse and hostile
   under a thumb. Fixed here rather than per-page so every page inherits it.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Touch targets -----------------------------------------------------
   Apple and Google both put the minimum around 44px. These were 26–36px:
   reachable with a cursor, a coin-toss with a thumb. Height is added with
   padding and flex centring so nothing reflows or changes its type size. */
@media (max-width:1024px){
  .mb-nav-login,
  .mb-nav-cta{
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .footer-link{
    min-height:44px;
    display:flex;align-items:center;
  }
  /* Quiet secondary links ("Try a brief demo") were the smallest target on
     the page at 27px, and they sit right beside the primary CTA. */
  .mbh-quiet{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  /* Footer legal row and the credit line: small, closely-spaced links are
     the easiest thing on a page to mis-tap. Give them room without
     changing how the row looks. */
  .footer-legal .legal-link{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  .footer-bottom p a,
  .footer-credit a,
  .footer > p a{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
}

/* --- Legibility --------------------------------------------------------
   Eyebrows and field labels were set at 11–11.5px. That is under the 12px
   floor where small type starts costing people with average eyesight real
   effort, and iOS zooms any input under 16px on focus — which yanks the
   layout sideways mid-form. Both fixed. */
@media (max-width:1024px){
  .mbt-eyebrow,
  .mbh-eyebrow{font-size:12px !important;letter-spacing:.10em;}
  label{font-size:12.5px !important;}
  /* Menu section headings ("Borrow", "Credit", "Company") — these sit inside
     the touch menu, where 11px uppercase is the hardest thing on screen to
     read at arm's length. */
  .mb-nav-group-label{font-size:12px !important;}
  /* Fine print is still print. These are the lines that carry the terms and
     the reference number — the ones a person most needs to be able to read. */
  .mb-nav-card p,
  .mb-nav-card span,
  .apply-step small,
  .apply-ref-code span,
  small{font-size:12px !important;}
  /* Stop iOS auto-zooming the page when a field takes focus. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea{font-size:16px !important;}
}

/* --- Tables and wide blocks -------------------------------------------
   Anything genuinely wider than a phone should scroll inside its own box
   rather than pushing the whole page sideways. */
@media (max-width:760px){
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* --- Media ------------------------------------------------------------
   A stray fixed-width image is the usual cause of a page that scrolls
   sideways on a phone. Belt and braces. */
@media (max-width:760px){
  img,svg,video,canvas,iframe{max-width:100%;}
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND CALLS TO ACTION, SITEWIDE — 2026-09-18
   Italo: "Round CTA buttons everywhere." Our Story's pill CTA is the
   standard. Scoped to things that are actually buttons: .mb-cta is a
   container <div> on 78 pages, and rounding a container would look broken,
   so it is deliberately not listed. !important is needed because several
   buttons carry an inline border-radius, and an !important author rule is
   the only thing that outranks an inline style.
   ═══════════════════════════════════════════════════════════════════════ */
.btn, a.btn, button.btn,
.btn-primary, .btn-secondary, .btn-pink, .btn-premium,
.btn-ghost, .btn-white, .btn-sm, .btn-lg, .btn-large,
.hero-cta, .ac-btn, .nav-btn, .nav-cta,
.mb-nav-cta, .mb-nav-login,
a.mb-nav-panel-cta, .mb-nav-panel-cta > a,
.mbh-btn, .mbh-quiet, .mbt-btn, .mbt-btn-primary,
.form-submit,
button[type="submit"], input[type="submit"],
.mb-cine-cta, .story-hero-cta{
  border-radius:999px !important;
}
/* A square email field beside a pill button reads as two different systems.
   Round the inline sign-up fields to match their buttons. */
.mbh-notify input[type="email"],
.mbh-notify input[type="text"],
.mbh-notify button{
  border-radius:999px !important;
}
/* Pills need a little more side padding than squares to look balanced. */
.btn, .btn-primary, .btn-secondary, .btn-pink, .btn-premium,
.btn-ghost, .btn-white, .hero-cta{
  padding-left:max(1.6em, 22px);
  padding-right:max(1.6em, 22px);
}