/* ==========================================================================
   MidBank home — "Introducing MidBank Tipping" launch series  (2026-09-15)
   Loaded LAST. Scoped entirely under .mbt-* / #mbt-* so it cannot leak into
   the hero wizard, the nav, the brands strip or the footer.

   Direction: institutional ledger. White paper, near-black bands, navy as the
   structural colour, ONE red CTA per section. Money is set in tabular
   figures with dotted leaders so every number reads like a printed receipt —
   that motif is the page's signature, carried from the product itself.
   ========================================================================== */

.mbt{
  --ink:#0E1526; --body:#454C5C; --muted:#6B7280;
  --navy:#2C2E83; --navy-d:#1E2160; --navy-l:#4A4DA8;
  --red:#DD1726; --red-d:#B5121F;
  --ok:#0F8A5F;
  --line:#E3E6EC; --line-2:#CFD5DF; --soft:#F6F7F9; --dark:#0B0B14;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --pad:clamp(140px, 10.5vw, 156px);
  --gut:clamp(20px, 5vw, 40px);
  position:relative;
  font-family:var(--ui);
  padding:var(--pad) var(--gut);
  border-top:1px solid var(--line);
  background:#fff;
  overflow-x:clip;
}
.mbt *{box-sizing:border-box;}
.mbt-soft{background:var(--soft);}

/* Dark bands — the two moments the page raises its voice. */
.mbt-dark{
  background:
    radial-gradient(120% 90% at 78% -20%, rgba(44,46,131,.34), transparent 58%),
    radial-gradient(90% 70% at 0% 110%, rgba(221,23,38,.13), transparent 60%),
    var(--dark);
  border-top:0;
  color:#fff;
}
/* Dark-band text colour is set in one place at the end of this file — see
   "Dark bands, resolved". Putting it here loses to the base type rules
   below on source order at equal specificity. */
/* Hairline grid — texture, not decoration: it reads as ruled ledger paper. */
.mbt-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:100% 46px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.mbt-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;}

/* ---------- Type ------------------------------------------------------- */
.mbt-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);margin:0 0 20px;
}
.mbt-dark .mbt-eyebrow{color:#C9CCE0;}
.mbt-eyebrow::before{
  content:"";width:22px;height:2px;background:currentColor;border-radius:2px;flex:none;
}
.mbt h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(31px,4.6vw,56px);line-height:1.04;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 18px;max-width:19ch;
}
.mbt h2 em{font-style:italic;color:var(--navy);}
.mbt-dark h2 em{color:#fff;font-style:italic;}
.mbt h3{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(20px,2.2vw,26px);line-height:1.18;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 10px;
}
.mbt-lede{
  font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;color:var(--body);
  margin:0 0 30px;max-width:56ch;
}
.mbt p{font-size:15.5px;line-height:1.66;color:var(--body);margin:0 0 12px;}
.mbt-head{max-width:820px;margin-bottom:clamp(40px,5vw,64px);}

/* ---------- Buttons ---------------------------------------------------- */
.mbt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;border:1px solid transparent;
  font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:.005em;
  cursor:pointer;text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.mbt-btn-primary{background:var(--red);color:#fff;}
.mbt-btn-primary:hover{background:var(--red-d);color:#fff;}
.mbt-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.mbt-btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.mbt-dark .mbt-btn-ghost{color:#fff;border-color:rgba(255,255,255,.34);}
.mbt-dark .mbt-btn-ghost:hover{border-color:#fff;color:#fff;}
.mbt-btn-navy{background:var(--navy);color:#fff;}
.mbt-btn-navy:hover{background:var(--navy-d);color:#fff;}
.mbt-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ---------- Device frames (honest: real screenshots, plain bezels) ------ */
.mbt-laptop{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#0f1018;
  box-shadow:0 44px 100px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.07) inset;
}
.mbt-light .mbt-laptop,.mbt:not(.mbt-dark) .mbt-laptop{
  border-color:var(--line);background:#fff;
  box-shadow:0 30px 70px rgba(14,21,38,.13);
}
.mbt-bar{
  display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:#15161f;border-bottom:1px solid rgba(255,255,255,.1);
}
.mbt:not(.mbt-dark) .mbt-bar{background:var(--soft);border-bottom-color:var(--line);}
.mbt-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);flex:none;}
.mbt:not(.mbt-dark) .mbt-bar i{background:var(--line-2);}
.mbt-bar span{
  margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:rgba(255,255,255,.4);
}
.mbt:not(.mbt-dark) .mbt-bar span{color:var(--muted);}
.mbt-laptop img{display:block;width:100%;height:auto;}

.mbt-phone{
  position:relative;width:100%;max-width:304px;margin:0 auto;
  border:10px solid #14151d;border-radius:38px;overflow:hidden;background:#14151d;
  box-shadow:0 26px 60px rgba(14,21,38,.22);
}
.mbt-dark .mbt-phone{box-shadow:0 30px 70px rgba(0,0,0,.55);}
.mbt-phone::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:96px;height:20px;background:#14151d;border-radius:0 0 12px 12px;z-index:2;
}
.mbt-phone img{display:block;width:100%;height:auto;border-radius:28px;}
.mbt-cap{
  display:block;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted);
  text-align:center;
}
.mbt-dark .mbt-cap{color:rgba(255,255,255,.5);}

/* ---------- 1 · Launch band -------------------------------------------- */
.mbt-launch-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,72px);align-items:center;
}
.mbt-pill{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#fff;
  margin-bottom:22px;
}
.mbt-pill b{
  width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 0 0 rgba(221,23,38,.55);animation:mbt-ping 2.6s ease-out infinite;
}
@keyframes mbt-ping{
  0%{box-shadow:0 0 0 0 rgba(221,23,38,.5);}
  70%{box-shadow:0 0 0 11px rgba(221,23,38,0);}
  100%{box-shadow:0 0 0 0 rgba(221,23,38,0);}
}
/* Inline "notify me" — one field, sits right under the CTA row. */
.mbt-inline{margin-top:26px;max-width:460px;}
.mbt-inline-row{display:flex;gap:9px;flex-wrap:wrap;}
.mbt-inline input[type=email]{
  flex:1 1 210px;min-width:0;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#fff;font-family:var(--ui);font-size:15px;font-weight:500;
}
.mbt-inline input[type=email]::placeholder{color:rgba(255,255,255,.44);}
.mbt-inline input[type=email]:focus{
  outline:none;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.1);
}
.mbt-inline button{
  padding:14px 22px;border:0;border-radius:12px;background:#fff;color:var(--ink);
  font-family:var(--ui);font-weight:800;font-size:14.5px;cursor:pointer;white-space:nowrap;
  transition:background .18s ease;
}
.mbt-inline button:hover{background:#E8EAEF;}
.mbt-inline button[disabled]{opacity:.62;cursor:default;}
.mbt-note{margin:10px 0 0;font-size:13px;min-height:1.35em;color:rgba(255,255,255,.62);}
.mbt-note[data-state=ok]{color:#7BE3B6;}
.mbt-note[data-state=err]{color:#FFA9B0;}

.mbt-facts{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
}
.mbt-fact{
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.17);
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);
}
.mbt-fact b{font-family:var(--mono);font-weight:700;color:#fff;}

/* ---------- 2 · How it works ------------------------------------------- */
.mbt-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,44px);}
.mbt-step{display:flex;flex-direction:column;}
.mbt-step-n{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--navy);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.mbt-step .mbt-phone{margin:22px auto 0;}

/* ---------- 3 · Dashboard feature grid --------------------------------- */
.mbt-dash-lead{margin-bottom:clamp(28px,3.4vw,48px);}
.mbt-feat{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
}
.mbt-card{
  grid-column:span 2;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mbt-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 44px rgba(14,21,38,.09);}
.mbt-card-wide{grid-column:span 3;}
.mbt-card-full{grid-column:span 6;}
.mbt-shot{
  background:var(--soft);border-bottom:1px solid var(--line);overflow:hidden;
  /* Top-anchored so the meaningful chrome of each screen stays visible. */
  max-height:320px;
}
.mbt-card-full .mbt-shot{max-height:620px;}
.mbt-shot img{display:block;width:100%;height:auto;}
.mbt-card-body{padding:22px 24px 26px;}
.mbt-card-body h3{font-size:19px;margin-bottom:8px;}
.mbt-card-body p{font-size:14.5px;margin:0;}

/* ---------- 4 · Owners / staff ----------------------------------------- */
.mbt-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);}
.mbt-col{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,3vw,40px);
}
.mbt-soft .mbt-col{background:#fff;}
.mbt-col-kicker{
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.mbt-list{list-style:none;margin:20px 0 0;padding:0;}
.mbt-list li{
  position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.55;color:var(--body);
}
.mbt-list li:first-child{border-top:0;padding-top:0;}
.mbt-list li strong{color:var(--ink);font-weight:650;}
.mbt-list li::before{
  content:"";position:absolute;left:4px;top:21px;width:8px;height:8px;
  border-radius:2px;background:var(--navy);
}
.mbt-list li:first-child::before{top:7px;}
.mbt-staff-shot{margin-top:28px;}

/* ---------- 5 · Fee transparency (the receipt) -------------------------- */
.mbt-fee-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.4vw,72px);align-items:center;
}
.mbt-rule{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,2.6vw,30px);line-height:1.25;letter-spacing:-.015em;color:#fff;
  margin:0 0 14px;
}
.mbt-receipt{
  background:#fff;color:var(--ink);border-radius:16px;padding:26px 28px;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.mbt-receipt + .mbt-receipt{margin-top:16px;}
.mbt-receipt-t{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;
}
.mbt-row{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;border-top:1px dotted var(--line-2);
  font-size:14.5px;color:var(--body);
}
.mbt-row:first-of-type{border-top:0;}
.mbt-row .l{flex:1 1 auto;}
.mbt-row .v{
  font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mbt-row-total{border-top:1px solid var(--ink);margin-top:4px;}
.mbt-row-total .l{font-weight:700;color:var(--ink);}
.mbt-row-total .v{font-size:19px;font-weight:800;color:var(--ok);}
.mbt-receipt-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);}

/* ---------- 6 · Industries --------------------------------------------- */
.mbt-inds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);}
.mbt-ind{
  padding:24px 22px 26px;border-radius:16px;border:1px solid var(--line-2);
  background:#fff;transition:border-color .18s ease, transform .18s ease;
}
.mbt-ind:hover{border-color:var(--navy);transform:translateY(-2px);}
.mbt-ind h3{font-size:17px;margin-bottom:7px;}
.mbt-ind p{font-size:14px;line-height:1.55;margin:0;}

/* ---------- 7 · Waitlist form ------------------------------------------ */
.mbt-wl-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4.6vw,72px);align-items:start;
}
.mbt-form{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,3vw,40px);box-shadow:0 22px 56px rgba(14,21,38,.07);
}
.mbt-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;}
.mbt-f{display:flex;flex-direction:column;gap:7px;}
.mbt-f-full{grid-column:1 / -1;}
.mbt-f label{
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.mbt-f label .opt{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted);}
.mbt-f input,.mbt-f select{
  width:100%;padding:14px 15px;border-radius:12px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);font-family:var(--ui);font-size:15.5px;font-weight:500;
  transition:border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance:none;appearance:none;
}
.mbt-f select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;
}
.mbt-f input:focus,.mbt-f select:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(44,46,131,.14);
}
.mbt-consent{
  margin:20px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);
  padding-top:18px;border-top:1px solid var(--line);
}
.mbt-form .mbt-btn{margin-top:18px;width:100%;}
.mbt-form .mbt-note{color:var(--body);}
.mbt-form .mbt-note[data-state=ok]{color:var(--ok);}
.mbt-form .mbt-note[data-state=err]{color:var(--red-d);}
.mbt-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* Success state — replaces the form in place. */
.mbt-done{
  text-align:center;padding:clamp(34px,5vw,64px) clamp(20px,3vw,40px);
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 22px 56px rgba(14,21,38,.07);
}
.mbt-done-mark{
  width:62px;height:62px;margin:0 auto 20px;border-radius:50%;
  background:rgba(15,138,95,.1);color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.mbt-done h3{font-size:clamp(24px,3vw,32px);margin-bottom:10px;}
.mbt-done p{max-width:46ch;margin:0 auto;}

/* ---------- MidPay band ------------------------------------------------- */
.mbt-midpay{
  padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--dark);
}
.mbt-midpay-in{
  position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  min-height:520px;align-items:stretch;
}
.mbt-midpay-copy{
  position:relative;z-index:2;
  padding:clamp(52px,6vw,88px) clamp(24px,4vw,72px);
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg, #0B0B14 0%, #0B0B14 72%, rgba(11,11,20,.86) 100%);
}
.mbt-midpay-photo{position:relative;overflow:hidden;background:#0B0B14;min-height:320px;}
.mbt-midpay-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
/* Navy scrim ties the photo to the band instead of letting it sit as a tile. */
.mbt-midpay-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(11,11,20,.96) 0%, rgba(11,11,20,.42) 34%, rgba(11,11,20,.06) 100%),
    linear-gradient(200deg, rgba(44,46,131,.42), transparent 62%);
}
.mbt-midpay-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:14px;padding:14px 20px;margin-bottom:26px;
  width:fit-content;box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.mbt-midpay-logo img{display:block;height:44px;width:auto;}
.mbt-midpay-copy h2{color:#fff;font-size:clamp(28px,3.9vw,46px);max-width:15ch;}
.mbt-midpay-copy .mbt-lede{color:rgba(255,255,255,.78);max-width:46ch;}
.mbt-aud{display:grid;gap:18px;margin:4px 0 28px;max-width:48ch;}
.mbt-aud > div{padding-left:18px;border-left:2px solid rgba(255,255,255,.30);}
.mbt-aud h3{color:#fff;font-size:16px;font-family:var(--ui);font-weight:700;margin-bottom:5px;letter-spacing:.005em;}
.mbt-aud p{color:rgba(255,255,255,.72);font-size:14.5px;margin:0;}
.mbt-midpay .mbt-facts{border-top-color:rgba(255,255,255,.14);margin-top:26px;}

/* ---------- Scroll reveal ----------------------------------------------
   JS adds .mbt-js to <html>. WITHOUT it every element is fully visible at
   rest — nothing on this page depends on script to be readable.           */
.mbt-js .mbt-r{opacity:0;transform:translateY(22px);}
.mbt-js .mbt-r.is-in{
  opacity:1;transform:none;
  transition:opacity .72s cubic-bezier(.22,.7,.3,1), transform .72s cubic-bezier(.22,.7,.3,1);
}
.mbt-js .mbt-r.is-in[data-d="1"]{transition-delay:.09s;}
.mbt-js .mbt-r.is-in[data-d="2"]{transition-delay:.18s;}
.mbt-js .mbt-r.is-in[data-d="3"]{transition-delay:.27s;}
.mbt-js .mbt-r.is-in[data-d="4"]{transition-delay:.36s;}

@media (prefers-reduced-motion:reduce){
  .mbt-js .mbt-r{opacity:1 !important;transform:none !important;}
  .mbt-pill b{animation:none;}
  .mbt-card:hover{transform:none;}
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width:1024px){
  .mbt-feat{grid-template-columns:repeat(4,minmax(0,1fr));}
  .mbt-card{grid-column:span 2;}
  .mbt-card-wide{grid-column:span 2;}
  .mbt-card-full{grid-column:span 4;}
  .mbt-midpay-in{min-height:0;}
}
@media (max-width:860px){
  .mbt-launch-grid,.mbt-fee-grid,.mbt-two,.mbt-wl-grid{grid-template-columns:minmax(0,1fr);}
  .mbt-steps{grid-template-columns:minmax(0,1fr);gap:44px;}
  .mbt h2{max-width:none;}
  .mbt-midpay-in{grid-template-columns:minmax(0,1fr);}
  .mbt-midpay-photo{order:-1;min-height:260px;aspect-ratio:16/10;}
  .mbt-midpay-photo::after{
    background:
      linear-gradient(180deg, rgba(11,11,20,.30) 0%, rgba(11,11,20,.30) 55%, #0B0B14 100%),
      linear-gradient(200deg, rgba(44,46,131,.38), transparent 62%);
  }
  .mbt-midpay-copy{background:#0B0B14;padding-top:clamp(32px,6vw,52px);}
}
@media (max-width:620px){
  .mbt-feat{grid-template-columns:minmax(0,1fr);}
  .mbt-card,.mbt-card-wide,.mbt-card-full{grid-column:span 1;}
  .mbt-fields{grid-template-columns:minmax(0,1fr);}
  .mbt-inline-row{flex-direction:column;}
  /* The row stacks here, so flex-basis would set the input's HEIGHT. */
  .mbt-inline input[type=email]{flex:0 0 auto;width:100%;}
  .mbt-inline button{width:100%;}
  .mbt-cta-row .mbt-btn{width:100%;}
  .mbt-shot{max-height:260px;}
  .mbt-card-full .mbt-shot{max-height:340px;}
}

/* ---------- 2b · Three ways in ------------------------------------------ */
.mbt-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);}
.mbt-way{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
}
.mbt-dark .mbt-way{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);}
.mbt-dark .mbt-way h3{color:#fff;}
.mbt-way-n{
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin-bottom:16px;
}
.mbt-dark .mbt-way-n{color:#C9CCE0;}
.mbt-way p{flex:1 1 auto;}
.mbt-way-tag{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted);
}
.mbt-dark .mbt-way-tag{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.6);}
.mbt-kiosk{
  margin-top:clamp(36px,4.4vw,60px);border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:var(--soft);
}
.mbt-dark .mbt-kiosk{border-color:rgba(255,255,255,.16);background:#0f1018;}
.mbt-kiosk img{display:block;width:100%;height:auto;}

/* ---------- 8 · Questions ----------------------------------------------- */
.mbt-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4.4vw,72px);}
.mbt-q{padding:26px 0;border-top:1px solid var(--line);}
.mbt-q h3{font-size:18px;margin-bottom:9px;}
.mbt-q p{font-size:15px;margin:0;}
@media (max-width:860px){
  .mbt-ways{grid-template-columns:minmax(0,1fr);}
  .mbt-qa{grid-template-columns:minmax(0,1fr);}
}

/* ---------- Tablet: one column, full-size product shots ----------------- */
@media (max-width:1100px){
  .mbt-launch-grid,.mbt-fee-grid,.mbt-two,.mbt-wl-grid,
  .mbt-ways,.mbt-qa{grid-template-columns:minmax(0,1fr) !important;}
  .mbt-qa{gap:0;}
  .mbt-feat{grid-template-columns:minmax(0,1fr) !important;}
  .mbt-card,.mbt-card-wide,.mbt-card-full{grid-column:span 1 !important;}
  .mbt-shot{max-height:460px;}
  .mbt-card-full .mbt-shot{max-height:700px;}
  .mbt-inds{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .mbt-phone{max-width:none;}
  /* On a phone a cropped screenshot is worse than the whole one — uncap. */
  .mbt-shot,.mbt-card-full .mbt-shot{max-height:none;}
  /* A phone screenshot used as a card face fills the card here. */
  .mbt-shot-phone img{width:100%;max-height:none;}
  .mbt-inds{grid-template-columns:minmax(0,1fr);}
  .mbt-steps{gap:56px;}
}

/* ---------- Dark bands, resolved ----------------------------------------
   These must out-rank the base .mbt h2 / .mbt h3 / .mbt p rules above, which
   carry the same specificity and come later in source order. The doubled
   .mbt.mbt-dark class settles it without reaching for !important.          */
.mbt.mbt-dark h2,
.mbt.mbt-dark h3,
.mbt.mbt-dark .mbt-lede{color:#fff;}
.mbt.mbt-dark p,
.mbt.mbt-dark li,
.mbt.mbt-dark .mbt-way p,
.mbt.mbt-dark .mbt-q p{color:rgba(255,255,255,.76);}
.mbt.mbt-dark .mbt-rule{color:#fff;}
.mbt.mbt-dark h2 em{color:#fff;font-style:italic;}
.mbt.mbt-dark .mbt-cap{color:rgba(255,255,255,.5);}
.mbt.mbt-dark .mbt-eyebrow{color:#C9CCE0;}
/* The receipts are white paper sitting on the dark band — their own ink. */
.mbt.mbt-dark .mbt-receipt p,
.mbt.mbt-dark .mbt-receipt .mbt-row{color:var(--body);}
.mbt.mbt-dark .mbt-receipt .mbt-receipt-t,
.mbt.mbt-dark .mbt-receipt .mbt-receipt-note{color:var(--muted);}
.mbt.mbt-dark .mbt-receipt .mbt-row .v{color:var(--ink);}
.mbt.mbt-dark .mbt-receipt .mbt-row-total .l{color:var(--ink);}
.mbt.mbt-dark .mbt-receipt .mbt-row-total .v{color:var(--ok);}
/* MidPay band keeps its own tuned values. */
.mbt.mbt-midpay .mbt-midpay-copy h2{color:#fff;}
.mbt.mbt-midpay .mbt-midpay-copy .mbt-lede{color:rgba(255,255,255,.78);}
.mbt.mbt-midpay .mbt-aud h3{color:#fff;}
.mbt.mbt-midpay .mbt-aud p{color:rgba(255,255,255,.72);}

/* ---------- Quiet sandbox-demo link (the app is not public yet) --------- */
.mbt-demo{
  display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:20px;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.72);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.26);
  padding-bottom:3px;transition:color .18s ease, border-color .18s ease;
}
.mbt-demo:hover{color:#fff;border-bottom-color:#fff;}
.mbt-demo small{font-weight:500;color:rgba(255,255,255,.52);font-size:12.5px;}
/* A phone screenshot used as a card face sits on its own ground. */
.mbt-shot-phone{background:var(--soft);display:flex;justify-content:center;}
.mbt-shot-phone img{width:auto;max-height:100%;}

/* ==========================================================================
   Homepage hero — cinematic background video (2026-09-15)
   The wizard card is the point of this hero, so the video sits behind a
   heavy navy-to-black scrim and the card stays a plain white sheet on top.
   Loaded last, so these win without reaching for !important except where an
   earlier rule already used it.
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:#0B0B14;
  /* The poster paints immediately, so the headline — not the video — is LCP. */
  background-image:url('/images/our-story-hero-poster.jpg');
  background-size:cover;
  background-position:center;
  border-bottom:0;
}
.mb-hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;border:0;pointer-events:none;
}
.mb-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,20,.82) 0%, rgba(11,11,20,.62) 38%, rgba(11,11,20,.76) 100%),
    linear-gradient(90deg, rgba(44,46,131,.62) 0%, rgba(44,46,131,.30) 58%, rgba(11,11,20,.55) 100%);
}
.hero .hero-background{background:transparent !important;z-index:1;}
.hero .container{position:relative;z-index:2;}

/* --- Copy flips to light. Scoped to .hero-content so the white wizard
       card in .hero-visual is untouched. --------------------------------- */
.hero .hero-content .hero-title,
.hero .hero-content h1{color:#fff !important;}
.hero .hero-content .hero-title .gradient-text,
.hero .hero-content .hero-title .shine-text{
  background:none !important;background-image:none !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  font-style:italic;
}
.hero .hero-content .hero-description,
.hero .hero-content .hero-description strong,
.hero .hero-content p{color:rgba(255,255,255,.86) !important;}
.hero .hero-content .hero-description strong{color:#fff !important;}
.hero .hero-content .hero-badge{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
}
.hero .hero-content .hero-badge .badge-dot{background:#fff !important;}
.hero .hero-content .hero-stats .stat-number,
.hero .hero-content .hero-stats .premium-counter{color:#fff !important;}
.hero .hero-content .hero-stats .stat-label{color:rgba(255,255,255,.72) !important;}
.hero .hero-content .hero-stats .stat-divider{background:rgba(255,255,255,.22) !important;}

/* --- Buttons: primary stays navy-filled, secondary becomes white outline -- */
.hero .hero-content .hero-cta .btn-primary{
  background:var(--mb-navy,#2C2E83) !important;
  border:1px solid var(--mb-navy,#2C2E83) !important;
  color:#fff !important;
}
.hero .hero-content .hero-cta .btn-primary:hover{
  background:#1E2160 !important;border-color:#1E2160 !important;
}
.hero .hero-content .hero-cta .btn-secondary{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.55) !important;
  color:#fff !important;
}
.hero .hero-content .hero-cta .btn-secondary:hover{
  background:rgba(255,255,255,.12) !important;border-color:#fff !important;
}

/* The wizard card keeps its own white surface and dark ink. */
.hero .hero-visual .apply-card{
  background:#fff;
  box-shadow:0 40px 100px rgba(0,0,0,.42);
}

@media (prefers-reduced-motion:reduce){
  .mb-hero-video{display:none !important;}
}

/* --- Hero over video: three earlier !important rules still reach in ------
   .hero-badge span, and the gradient-clipped .stat-number, both defeat a
   rule set on their parent. They have to be addressed directly.          */
.hero .hero-content .hero-badge span,
.hero .hero-content .hero-badge span:last-child{
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
.hero .hero-content .hero-stats .stat{background:transparent !important;box-shadow:none !important;border:0 !important;}
.hero .hero-content .hero-stats .stat-number,
.hero .hero-content .hero-stats .stat-value,
.hero .hero-content .hero-stats .premium-counter{
  background:none !important;background-image:none !important;background-color:transparent !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
.hero .hero-scroll,.hero .scroll-indicator{color:rgba(255,255,255,.62) !important;}

/* A phone screenshot used as a card face fills the card on phones. This has
   to sit at the very end: the base .mbt-shot-phone rule above is declared
   after the 620px block, so an earlier copy of this loses on source order. */
@media (max-width:620px){
  .mbt-shot-phone{display:block;max-height:none;}
  .mbt-shot-phone img{width:100%;max-height:none;}
}