/* ============================================================
   MB-NAV — shared hamburger navigation system, MidBank Tipping
   Full variant: marketing / owner / employee surfaces.
   (Minimal variant lives in mb-nav-minimal.css — guest surfaces.)
   ============================================================ */

:root{
  --mbnav-base:#0B0B14;
  --mbnav-primary:#6366f1;
  --mbnav-primary-press:#4f46e5;
  --mbnav-accent:#818cf8;
  --mbnav-ink:#ffffff;
  --mbnav-ink-2:rgba(255,255,255,.72);
  --mbnav-ink-3:rgba(255,255,255,.55);
  --mbnav-ink-4:rgba(255,255,255,.38);
  --mbnav-hairline:rgba(255,255,255,.08);
  --mbnav-hairline-strong:rgba(255,255,255,.14);
  --mbnav-font-ui:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mbnav-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --mbnav-ease-out:cubic-bezier(.22,1,.36,1);
  --mbnav-ease-in:cubic-bezier(.4,0,1,1);
  --mbnav-dur-fast:180ms;
  --mbnav-dur-base:350ms;
  --mbnav-dur-slow:450ms;
}

/* Self-contained box model: pages differ on whether they ship a
   `*{box-sizing:border-box}` reset (tipping-product ships none), which
   otherwise makes the same component render at different sizes. */
.mb-nav-header, .mb-nav-header *,
.mb-nav-scrim,
.mb-nav-panel, .mb-nav-panel *{
  box-sizing:border-box;
}

/* ---------- HEADER BAR ---------- */
/* z-index sits ABOVE the scrim (950) and panel (960) so the centred logo
   stays visible and the close (X) stays clickable while the menu is open. */
.mb-nav-header{
  position:fixed; top:0; left:0; right:0; z-index:970;
  height:calc(56px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:rgba(11,11,20,.72);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--mbnav-hairline);
  transition:background var(--mbnav-dur-base) var(--mbnav-ease-out);
}
/* While open, the bar goes solid so it reads as one sheet with the panel. */
body.mb-nav-locked .mb-nav-header{
  background:var(--mbnav-base);
  border-bottom-color:var(--mbnav-hairline-strong);
}
.mb-nav-bar{
  max-width:1120px; margin:0 auto; height:56px; padding:0 16px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
/* DELTA 1: MidBank marketing brand reads heavier than the tipping app —
   header grows to 64px from 768px up; panel top offsets already assume this.
   FIX: this block previously sat ABOVE the base `.mb-nav-bar` rule, so at
   equal specificity the later 56px declaration won and the bar stayed 56px
   inside a 64px header — logo/toggle/CTA rendered 4px above optical centre
   at every width >=768px. Order corrected. */
@media (min-width:768px){
  .mb-nav-header{ height:calc(64px + env(safe-area-inset-top)); }
  .mb-nav-bar{ height:64px; }
}
.mb-nav-toggle{
  justify-self:start;
  width:44px; height:44px; min-height:44px; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; background:none; border:0; padding:0; cursor:pointer; border-radius:8px;
}
.mb-nav-toggle span{
  display:block; width:20px; height:2px; border-radius:1px; background:rgba(255,255,255,.86);
  transition:transform var(--mbnav-dur-fast) var(--mbnav-ease-out), opacity var(--mbnav-dur-fast) var(--mbnav-ease-out);
}
.mb-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.mb-nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.mb-nav-toggle:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:2px; }

.mb-nav-logo{
  justify-self:center;
  display:flex; align-items:center; min-height:44px; padding:12px 6px;
}
.mb-nav-logo img{
  width:156px; height:26px; display:block; opacity:1; image-rendering:auto;
}
/* FIX: the bar is `1fr auto 1fr`, so the side tracks are forced equal and the
   CTA's min-content width sets BOTH. At 390px a 156px logo left only 95px per
   track against a ~106px CTA, so "Get started" wrapped to two lines and the
   pill closed right up against the MIDBANK wordmark. Dropping the lockup to
   132px on phone frees ~24px per track — enough for the CTA to sit on one
   line with clear air either side of a still-perfectly-centred logo. */
@media (max-width:430px){
  .mb-nav-logo img{ width:132px; height:22px; }
}
.mb-nav-logo:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:3px; border-radius:6px; }

.mb-nav-cta-rail{ justify-self:end; }
/* DELTA 2: lead-gen site cannot hide its only header conversion affordance on
   phone — visible at ALL widths (sibling app hides this below 600px). */
.mb-nav-cta{
  display:inline-flex;
  height:36px; min-height:36px; flex:0 0 auto;
  padding:0 18px; border-radius:999px; align-items:center;
  white-space:nowrap;
  background:linear-gradient(135deg,var(--mbnav-primary),var(--mbnav-primary-press));
  font:600 13px/1 var(--mbnav-font-ui); color:#fff; text-decoration:none;
}
@media (max-width:380px){
  .mb-nav-cta{ padding:0 14px; }
}
.mb-nav-cta:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:2px; }

/* ---------- SCRIM ---------- */
.mb-nav-scrim{
  position:fixed; inset:0; z-index:950;
  background:rgba(3,3,8,.72);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
  opacity:0; transition:opacity var(--mbnav-dur-base) var(--mbnav-ease-out);
}
.mb-nav-scrim[hidden]{ display:none; }
.mb-nav-scrim.mb-nav-open{ opacity:1; }

/* ---------- PANEL ---------- */
.mb-nav-panel{
  position:fixed; z-index:960;
  background-color:var(--mbnav-base);
  background-image:radial-gradient(120% 90% at 50% -12%, rgba(99,102,241,.16), transparent 62%);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.mb-nav-panel[hidden]{ display:none; }

.mb-nav-panel-inner{
  height:100%; display:flex; flex-direction:column;
  padding:20px 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.mb-nav-group{ margin-bottom:28px; }
.mb-nav-group:first-child{ margin-top:0; }
.mb-nav-group + .mb-nav-group{ border-top:1px solid var(--mbnav-hairline); padding-top:16px; }
.mb-nav-group-label{
  font:500 11px/1 var(--mbnav-font-ui); text-transform:uppercase; letter-spacing:.14em;
  color:var(--mbnav-ink-4); margin-bottom:8px; height:18px;
}
/* height + min-height + flex are pinned so host-page blanket rules
   (e.g. mobile-first-apple.css `a,button{min-height:48px}`) cannot
   inflate items and push the panel into an inner scrollbar. */
.mb-nav-item{
  position:relative;
  height:44px; min-height:44px; max-height:44px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-start; text-align:left;
  margin:0 -24px; padding:0 24px;
  font:400 17px/1 var(--mbnav-font-ui); color:var(--mbnav-ink-2); text-decoration:none;
  border-radius:8px;
}
.mb-nav-item:hover{ color:var(--mbnav-ink); }
.mb-nav-item[aria-current="page"]{ color:var(--mbnav-ink); }
.mb-nav-item[aria-current="page"]::before{
  content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:2px; background:var(--mbnav-primary);
}
.mb-nav-item:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:-2px; }

/* DELTA 3: 4th group (MidBank) spans the full width on the 3-col sheet
   instead of leaving an empty bottom-right quadrant; on phone it collapses
   back to the normal stacked column via the flex-direction override below. */
.mb-nav-group-wide{
  display:flex; flex-wrap:wrap; gap:8px 40px; align-items:baseline;
}
@media (min-width:768px){
  .mb-nav-group-wide{
    grid-column:1 / -1; margin-top:24px; padding-top:20px;
    border-top:1px solid var(--mbnav-hairline);
  }
}
@media (max-width:767px){
  .mb-nav-group-wide{ flex-direction:column; align-items:stretch; gap:0; }
}

/* DELTA 4: replaces the 85x-inline-styled SOON superscript, which wrapped
   the item onto two lines on phone and broke the pinned 44px item height. */
.mb-nav-badge{
  display:inline-block;
  font:800 9px/1 var(--mbnav-font-ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--mbnav-accent);
  border:1px solid rgba(129,140,248,.4); border-radius:999px;
  padding:3px 6px; margin-left:8px; vertical-align:middle;
}

.mb-nav-panel-cta{
  margin-top:24px; height:52px; min-height:52px; flex:0 0 auto;
  border-radius:999px; padding:0 32px;
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  background:linear-gradient(135deg,var(--mbnav-primary),var(--mbnav-primary-press));
  font:600 15px/1 var(--mbnav-font-ui); color:#fff; text-decoration:none;
  box-shadow:0 0 40px -12px rgba(99,102,241,.55);
}
.mb-nav-panel-cta:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:2px; }

/* DELTA 5: Item stagger reveal, 4 groups, spring easing (declared by the
   sibling as --mbnav-ease-spring but never used there). */
.mb-nav-panel.mb-nav-open .mb-nav-item,
.mb-nav-panel.mb-nav-open .mb-nav-group-label{
  animation:mbNavItemIn var(--mbnav-dur-base) var(--mbnav-ease-spring) both;
}
.mb-nav-panel.mb-nav-open .mb-nav-panel-cta{ animation:mbNavItemIn var(--mbnav-dur-base) var(--mbnav-ease-spring) both; animation-delay:260ms; }
@keyframes mbNavItemIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.mb-nav-group:nth-child(1) .mb-nav-item, .mb-nav-group:nth-child(1) .mb-nav-group-label{ animation-delay:20ms; }
.mb-nav-group:nth-child(2) .mb-nav-item, .mb-nav-group:nth-child(2) .mb-nav-group-label{ animation-delay:80ms; }
.mb-nav-group:nth-child(3) .mb-nav-item, .mb-nav-group:nth-child(3) .mb-nav-group-label{ animation-delay:140ms; }
.mb-nav-group:nth-child(4) .mb-nav-item, .mb-nav-group:nth-child(4) .mb-nav-group-label{ animation-delay:200ms; }

/* DELTA 6: five nav links are same-page hash links; without this they land
   under the fixed header bar. */
#services, #testimonials, #contact, #midbank-app{ scroll-margin-top:76px; }

@media (prefers-reduced-motion:reduce){
  .mb-nav-toggle span, .mb-nav-scrim, .mb-nav-panel.mb-nav-open .mb-nav-item,
  .mb-nav-panel.mb-nav-open .mb-nav-group-label, .mb-nav-panel.mb-nav-open .mb-nav-panel-cta{
    animation:none !important; transition:none !important;
  }
}

/* ---------- PHONE (<768px): full-bleed sheet ---------- */
@media (max-width:767px){
  .mb-nav-panel{
    top:calc(56px + env(safe-area-inset-top)); left:0; right:0; bottom:0;
  }
}

/* The trailing group's bottom margin is dead space above the CTA on phone —
   the CTA carries its own margin-top. Reclaiming it buys 28px of fit. */
@media (max-width:767px){
  .mb-nav-group:last-of-type{ margin-bottom:0; }
}

/* Short-viewport compression, phone only.
   FIX: tier 1 was bounded at <=800px tall on the assumption 390x844 fit at
   full spacing. Measured on the live sheet it does not — the inner stack is
   847px against an 788px sheet, so the panel took a 59px inner scrollbar and
   the "Get started" CTA sat below the fold (bottom 875 > viewport 844).
   Raised to <=940px so every mainstream phone (390x844, 393x852, 414x896,
   430x932) compresses instead of scrolling; compression reclaims ~90px,
   which clears the 59px deficit with room to spare. */
@media (max-width:767px) and (max-height:940px){
  .mb-nav-panel-inner{ padding-top:12px; }
  .mb-nav-group{ margin-bottom:16px; }
  .mb-nav-group + .mb-nav-group{ padding-top:12px; }
  .mb-nav-group-label{ height:14px; margin-bottom:6px; }
  .mb-nav-panel-cta{ margin-top:14px; }
  /* Item heights are pinned at 44px for tap-target compliance, so on a short
     phone (e.g. 360x640) the stack can still exceed the sheet. Pin the CTA so
     the primary action can never scroll out of reach; the list scrolls under it. */
  .mb-nav-panel-cta{
    position:sticky; bottom:0;
    box-shadow:0 0 40px -12px rgba(99,102,241,.55), 0 -14px 22px -6px var(--mbnav-base);
  }
}
/* Tier 2 at <=700px tall (iPhone SE 375x667 and shorter): the group labels
   go, the hairline dividers keep the grouping legible. */
@media (max-width:767px) and (max-height:700px){
  .mb-nav-group-label{ display:none; }
  .mb-nav-panel-inner{ padding-top:10px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .mb-nav-group{ margin-bottom:10px; }
  .mb-nav-group + .mb-nav-group{ border-top:1px solid var(--mbnav-hairline); padding-top:10px; }
  .mb-nav-panel-cta{ margin-top:10px; }
}

/* ---------- TABLET (768–1023px): centred sheet, 3-col ---------- */
/* 3 groups into 2 columns left an empty bottom-right quadrant — a visible
   dead void in an otherwise tight card. Three columns matches the desktop
   layout exactly, so the menu reads as one shape from 768px up. At the
   narrowest tablet width the columns are still ~197px, wider than the
   longest label ("Set up my tip page", ~152px at 17px Inter). */
@media (min-width:768px) and (max-width:1023px){
  .mb-nav-panel{
    top:calc(68px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    width:100%; max-width:720px; border-radius:16px;
    box-shadow:0 24px 80px -24px rgba(0,0,0,.8);
  }
  .mb-nav-panel-inner{
    display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:32px; row-gap:0;
    padding:28px 32px 32px; max-height:calc(100vh - 100px); overflow-y:auto;
  }
  .mb-nav-group{ margin-bottom:0; }
  .mb-nav-group + .mb-nav-group{ border-top:0; padding-top:0; }
  .mb-nav-panel-cta{ grid-column:1 / -1; width:100%; max-width:320px; margin-left:auto; margin-right:auto; }
}

/* ---------- DESKTOP (>=1024px): centred sheet, 3-col ---------- */
@media (min-width:1024px){
  .mb-nav-panel{
    top:calc(68px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    width:100%; max-width:860px; border-radius:16px;
    box-shadow:0 24px 80px -24px rgba(0,0,0,.8);
  }
  .mb-nav-panel-inner{
    display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:56px; row-gap:0;
    padding:32px 40px 36px; max-height:calc(100vh - 120px); overflow-y:auto;
  }
  .mb-nav-group{ margin-bottom:0; }
  .mb-nav-group + .mb-nav-group{ border-top:0; padding-top:0; }
  .mb-nav-panel-cta{ grid-column:1 / -1; width:100%; max-width:320px; margin-left:auto; margin-right:auto; }
}

/* Body scroll lock helper */
body.mb-nav-locked{ position:fixed; left:0; right:0; width:100%; }

/* Horizontal-overflow guard.
   Decorative homepage elements (.gradient-orb.orb-1, .mbk-app-blob,
   .story-stats-card) extend past the right edge. On desktop that is only a
   24px phantom scrollbar, but under mobile emulation the overflowing content
   widens the LAYOUT viewport (390px viewport reported innerWidth 490px), and
   the fixed header — sized to that widened viewport — pushed its "Get
   started" CTA clean off the visible screen. Clipping on the root element
   fixes both. `clip` is used where supported because, unlike `hidden`, it
   does not turn <html> into a scroll container and therefore cannot break
   position:sticky descendants; `hidden` is the fallback. Applied to <html>
   only — never <body>, which the menu sets to position:fixed while locked. */
html{ overflow-x:hidden; overflow-x:clip; }

/* Float-above-everything page widgets (Mira chat FAB, z-index 99998) must
   not sit on top of the open menu panel. */
body.mb-nav-locked [id^="mira-"],
body.mb-nav-locked #mira-fab{
  visibility:hidden !important;
  pointer-events:none !important;
}

@media print{
  .mb-nav-header, .mb-nav-scrim, .mb-nav-panel{ display:none !important; }
}