:root{
  /* ── surfaces ─────────────────────────────────────── */
  --mb-base:#0B0B14;            /* near-black indigo page base */
  --mb-base-2:#07070E;          /* deeper, for gradient feet */
  --mb-surface:rgba(255,255,255,.04);
  --mb-surface-2:rgba(255,255,255,.065);
  --mb-hairline:rgba(255,255,255,.08);
  --mb-hairline-strong:rgba(255,255,255,.14);

  /* ── brand (MidBank indigo only — never lime/green) ── */
  --mb-primary:#6366f1;
  --mb-primary-press:#4f46e5;
  --mb-accent:#818cf8;
  --mb-accent-soft:#a5b4fc;

  /* ── ink ──────────────────────────────────────────── */
  --mb-ink:#ffffff;
  --mb-ink-2:rgba(255,255,255,.72);
  --mb-ink-3:rgba(255,255,255,.55);
  --mb-ink-4:rgba(255,255,255,.38);

  /* ── type ─────────────────────────────────────────── */
  --mb-font-display:'Playfair Display',Georgia,serif;
  --mb-font-ui:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mb-t-hero:clamp(2.6rem,7vw,4.5rem);      /* h1 display, lh 1.05, ls -.02em */
  --mb-t-name:clamp(2rem,8vw,3rem);          /* person name on tip page */
  --mb-t-amount:clamp(3.5rem,16vw,4.5rem);   /* Inter 200, tabular-nums, lh 1 */
  --mb-t-h2:2rem;
  --mb-t-h3:1.375rem;
  --mb-t-body:1rem;                          /* lh 1.6, max-width 62ch */
  --mb-t-small:.875rem;
  --mb-t-label:.8rem;                        /* 500, uppercase, ls .08em */

  /* ── spacing (8px base — ONLY these gaps) ─────────── */
  --mb-s1:8px; --mb-s2:16px; --mb-s3:24px; --mb-s4:40px; --mb-s5:64px;
  --mb-section-y:clamp(4rem,10vh,8rem);
  --mb-card-pad:clamp(20px,5vw,32px);

  /* ── radii (TWO values, no exceptions) ────────────── */
  --mb-r-card:16px;
  --mb-r-pill:999px;

  /* ── shadows (TWO values, no exceptions) ──────────── */
  --mb-shadow-ambient:0 1px 2px rgba(0,0,0,.4);
  --mb-shadow-glow:0 0 80px -20px rgba(99,102,241,.5); /* ONE hero element per screen ONLY */

  /* ── motion (every transition uses one of these) ──── */
  --mb-ease-spring:cubic-bezier(.34,1.56,.64,1);  /* entrances, presses, chips */
  --mb-ease-out:cubic-bezier(.22,1,.36,1);        /* reveals, slides, scroll-ins */
  --mb-ease-in:cubic-bezier(.4,0,1,1);            /* exits only */
  --mb-dur-fast:180ms;    /* hover, focus, colour */
  --mb-dur-base:350ms;    /* chip select, card lift, slide-up */
  --mb-dur-slow:450ms;    /* screen entrance */
  --mb-dur-ritual:900ms;  /* success choreography beat */

  /* ── containers ───────────────────────────────────── */
  --mb-w-page:1120px;
  --mb-w-phone:430px;     /* tip flow stays phone-shaped even on desktop */
}

/* Ambient field used behind every hero — depth via gradient, never shadow */
.mb-field{position:relative;isolation:isolate}
.mb-field::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(99,102,241,.25),transparent 60%)}

/* Base reset every tipping page inherits */
html,body{background-color:var(--mb-base-2);
  background-image:linear-gradient(180deg,var(--mb-base) 0%,var(--mb-base-2) 100%);
  background-attachment:fixed;color:var(--mb-ink);font-family:var(--mb-font-ui);
  -webkit-font-smoothing:antialiased;min-height:100vh}

/* Buttons — there is no unstyled button anywhere */
.mb-btn{font:600 1rem/1 var(--mb-font-ui);border:0;border-radius:var(--mb-r-pill);
  padding:18px 32px;min-height:56px;cursor:pointer;
  transition:transform var(--mb-dur-base) var(--mb-ease-spring),
             background var(--mb-dur-fast) var(--mb-ease-out)}
.mb-btn:active{transform:scale(.97)}
.mb-btn--primary{background:var(--mb-primary);color:#fff}
.mb-btn--primary:active{background:var(--mb-primary-press)}
.mb-btn--ghost{background:var(--mb-surface);color:var(--mb-ink-2);
  box-shadow:inset 0 0 0 1px var(--mb-hairline)}

/* Focus — custom ring, never the browser default */
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--mb-base),0 0 0 4px var(--mb-accent)}

.mb-card{background:var(--mb-surface);border:1px solid var(--mb-hairline);
  border-radius:var(--mb-r-card);padding:var(--mb-card-pad)}
.mb-label{font:500 var(--mb-t-label)/1 var(--mb-font-ui);text-transform:uppercase;
  letter-spacing:.08em;color:var(--mb-ink-3)}
.mb-serif{font-family:var(--mb-font-display);font-weight:600;letter-spacing:-.02em}
.mb-num{font-variant-numeric:tabular-nums;font-weight:200}

/* Sandbox disclosure — elegant, never apologetic. Required on every money screen. */
.mb-sandbox{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:var(--mb-r-pill);background:var(--mb-surface-2);
  border:1px solid var(--mb-hairline);font:500 12px/1 var(--mb-font-ui);
  color:var(--mb-ink-3);letter-spacing:.01em}
.mb-sandbox::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--mb-accent);box-shadow:0 0 8px var(--mb-accent)}

/* Demo-data tag — every unverified figure carries one */
.mb-demotag{font:500 10px/1 var(--mb-font-ui);text-transform:uppercase;
  letter-spacing:.1em;color:var(--mb-ink-4);vertical-align:super;margin-left:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── The receipt voice (added 2026-08-25) ─────────────────────────────
   ONE monospace, tabular numerals, used for money, fees, dates and refs
   and for nothing else. If a number is a dollar figure, it is .mb-fig. */
:root{
  --mb-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --mb-t-fig:clamp(2.75rem,9vw,4.5rem);
}
.mb-mono{font-family:var(--mb-font-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;letter-spacing:-.01em}
.mb-fig{font-family:var(--mb-font-mono);font-variant-numeric:tabular-nums;
  font-weight:500;font-size:var(--mb-t-fig);line-height:.95;letter-spacing:-.03em}

/* Receipt motif: hairline rules + dotted leaders + a scalloped tear edge. */
.mb-receipt{background:var(--mb-surface);border:1px solid var(--mb-hairline);
  border-radius:var(--mb-r-card);padding:var(--mb-card-pad);position:relative}
.mb-receipt .row{display:flex;align-items:baseline;gap:10px;padding:10px 0;
  font:400 var(--mb-t-small)/1.4 var(--mb-font-ui);color:var(--mb-ink-3)}
.mb-receipt .row .lead{flex:1;border-bottom:1px dotted var(--mb-hairline-strong);
  transform:translateY(-4px)}
.mb-receipt .row .amt{font-family:var(--mb-font-mono);font-variant-numeric:tabular-nums;
  color:var(--mb-ink-2)}
.mb-receipt .row.total{border-top:1px solid var(--mb-hairline-strong);margin-top:6px;
  padding-top:14px;color:var(--mb-ink)}
.mb-receipt .row.total .amt{color:var(--mb-accent-soft);font-weight:600}
.mb-tear{height:10px;background-image:radial-gradient(circle at 6px 0,transparent 6px,
  var(--mb-base-2) 6.5px);background-size:12px 10px;background-repeat:repeat-x}
.mb-ref{font-family:var(--mb-font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--mb-ink-4);text-transform:uppercase}

/* Grain — atmosphere without an image request. One layer, page-level only. */
.mb-grain::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* SEO-SAFE REVEAL — see L1. Visible by default; JS opts in. */
.reveal{opacity:1;transform:none}
html.js-reveal-ready .reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--mb-dur-slow) var(--mb-ease-out),
             transform var(--mb-dur-slow) var(--mb-ease-out)}
html.js-reveal-ready .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-reveal-ready .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}
@media print{ .reveal{opacity:1 !important;transform:none !important} }

/* Sticky mobile CTA bar — phones only, thumb-reachable, 56px target. */
.mb-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(7,7,14,0),rgba(7,7,14,.94) 38%);
  backdrop-filter:blur(10px)}
.mb-stickycta a{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px}
.mb-stickycta .fine{display:block;text-align:center;margin-top:6px;
  font-family:var(--mb-font-mono);font-size:11px;color:var(--mb-ink-4)}
@media (max-width:760px){ .mb-stickycta.on{display:block} body{padding-bottom:96px} }