@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   MEDBUS — HOME UI (v2)
   Hand-authored, framework-free stylesheet for the redesigned home page.

   Why not Tailwind: public/css/styled.css is a pre-compiled Tailwind build
   that only contains the utilities the OLD markup used. Rebuilding it needs
   npm, and shipping the whole framework would cost render-blocking CSS we
   do not need. This file is ~1 request, gzips small, and carries only the
   rules this page actually paints.

   Sections
     00  Webfonts (self-hosted)
     01  Tokens
     02  Base & reset
     03  Layout primitives
     04  Buttons, badges, pills
     05  Site header + navigation
     06  Hero
     07  Benefit strip
     08  Solution split
     09  Feature grid
     10  Clinic carousel
     11  Pricing
     12  Contact band
     13  FAQ
     14  Closing CTA
     15  Site footer
     16  Floating contact dock
     17  Motion & reveal
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 00 · WEBFONT (self-hosted) ────────────────────────────────
   Inter, served from our own origin so the critical path never has to reach
   fonts.googleapis.com for a render-blocking CSS round trip and then
   fonts.gstatic.com for a second TLS handshake. One variable file covers
   every weight the page uses, for headings and body alike — two families
   became one, which is one fewer request than the previous Rubik + Raleway
   pairing. Paths are relative to this file so the site still works when
   Laravel is mounted in a sub-directory.
   ────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  /* U+20B9 (₹) is deliberately left out: every price on the site would
     otherwise pull in this 85 KB file just for one glyph, and it arrives late
     enough to repaint the hero and delay LCP. The rupee sign renders from the
     system font instead (Roboto, Segoe UI and San Francisco all carry it). */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 01 · TOKENS ───────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --mb-blue: #096ac9;
  --mb-blue-600: #0a5cae;
  --mb-blue-700: #04498e;
  --mb-blue-400: #2e8bf0;
  --mb-blue-100: #e7f1fa;
  --mb-blue-50: #f4f9ff;

  /* Ink */
  --mb-ink: #0b2238;
  --mb-ink-soft: #33465c;
  --mb-muted: #5f7288;
  --mb-line: #e3edf9;

  /* Surfaces */
  --mb-surface: #ffffff;
  --mb-canvas: #f7fbff;

  /* Accent tiles */
  --mb-a-blue: #e8f1fe;
  --mb-a-blue-fg: #1668d8;
  --mb-a-green: #e6f7ee;
  --mb-a-green-fg: #0f7d4e;
  --mb-a-violet: #f0ecfe;
  --mb-a-violet-fg: #6d4de0;
  --mb-a-amber: #fff1e3;
  --mb-a-amber-fg: #ad5a0b;
  --mb-a-rose: #ffeaee;
  --mb-a-rose-fg: #c62a49;
  --mb-a-cyan: #e2f6fb;
  --mb-a-cyan-fg: #0d8ea8;

  /* Type */
  --mb-font-head: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mb-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  /* The shell runs edge-to-edge with responsive gutters rather than sitting
     in a narrow centred column. The cap only bites on very wide monitors, so
     the layout stays full-bleed on every normal screen; readability is held
     by the max-widths on .mb-head / .mb-lede, not by squeezing the whole
     page into a container. */
  --mb-shell: 1760px;
  --mb-gutter: clamp(1rem, 3.5vw, 3.5rem);
  --mb-section-y: clamp(3.25rem, 7vw, 5.75rem);

  /* Shape */
  --mb-r-sm: 10px;
  --mb-r-md: 14px;
  --mb-r-lg: 20px;
  --mb-r-xl: 26px;
  --mb-r-btn: 11px;
  --mb-r-pill: 999px;

  /* Elevation — blue-tinted so cards sit on the tinted canvas naturally */
  --mb-shadow-xs: 0 1px 2px rgba(11, 34, 56, .05);
  --mb-shadow-sm: 0 2px 10px rgba(9, 106, 201, .07);
  --mb-shadow-md: 0 10px 30px rgba(9, 106, 201, .10);
  --mb-shadow-lg: 0 18px 48px rgba(9, 106, 201, .16);

  --mb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── 02 · BASE & RESET ─────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/* The toast and other togglable nodes use the `hidden` attribute; make sure
   no component rule can out-specify it. */
.mb [hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.mb {
  margin: 0;
  font-feature-settings: "cv11";
  background: var(--mb-surface);
  color: var(--mb-ink-soft);
  font-family: var(--mb-font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* EVERY reset below is element-level on purpose. Written as `.mb h2` or
   `.mb p` a reset sits at specificity (0,1,1) and silently beats every
   single-class component rule — which had two consequences here:
     · `.mb a { color: inherit }` overrode `.mb-btn--primary { color: #fff }`,
       rendering every primary CTA dark-on-blue at 1.8:1;
     · `.mb p` / `.mb h1-h6` / `.mb ul` `{ margin: 0 }` overrode the
       `margin-bottom` on .mb-h2, .mb-lede, .mb-hero__title and friends, so
       headings and paragraphs across the whole page had no bottom spacing.
   Keep resets at (0,0,1) so any component class outranks them. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--mb-font-head);
  color: var(--mb-ink);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

/* Keyboard focus is never removed — only restyled. */
.mb :focus-visible {
  outline: 3px solid var(--mb-blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.mb-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible only when focused. */
.mb-skip {
  position: absolute;
  left: 50%;
  top: -100px;
  z-index: 999;
  transform: translateX(-50%);
  background: var(--mb-blue);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--mb-r-md) var(--mb-r-md);
  transition: top .2s var(--mb-ease);
}
.mb-skip:focus { top: 0; }

/* ── 03 · LAYOUT PRIMITIVES ────────────────────────────────────────────── */
.mb-shell {
  width: 100%;
  max-width: var(--mb-shell);
  margin-inline: auto;
  padding-inline: var(--mb-gutter);
}

.mb-section { padding-block: var(--mb-section-y); position: relative; }

/* For sections whose decoration bleeds past the shell (the solution split's
   gradient wash). `clip` rather than `hidden` so it never becomes a scroll
   container; `hidden` is the fallback for older Safari. */
.mb-section--clip { overflow-x: hidden; overflow-x: clip; }

/* Anchor targets clear the sticky header instead of hiding under it. */
.mb-section[id], .mb-hero[id] { scroll-margin-top: 84px; }
.mb-section--tint { background: var(--mb-blue-50); }
.mb-section--canvas { background: var(--mb-canvas); }

/* NOTE — `content-visibility: auto` was tried here and removed on purpose.
   Every section below is an in-page anchor target (#features, #pricing,
   #request-demo, #faq…). With an unrendered section the browser only has
   `contain-intrinsic-size` to go on, so the first jump to #request-demo lands
   ~1.5k pixels off and then snaps as the sections above it render. The hero's
   primary CTA uses that anchor, so correctness wins over a few ms of paint. */

.mb-eyebrow {
  display: block;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mb-blue);
  margin-bottom: .75rem;
}

/* The eyebrow with a short rule before it — used in place of the old pill
   badges above hero headings: no box, no shadow, no icon, just the label. */
.mb-eyebrow--rule {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  letter-spacing: .12em;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.mb-eyebrow--rule::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.mb-head--center .mb-eyebrow--rule { justify-content: center; }

.mb-head { max-width: 46rem; }
.mb-head--center { margin-inline: auto; text-align: center; }

.mb-h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.6rem);
  margin-bottom: .875rem;
}
.mb-h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3rem); }

.mb-lede {
  font-size: clamp(.975rem, .93rem + .2vw, 1.0625rem);
  color: var(--mb-muted);
  line-height: 1.7;
}

.mb-accent { color: var(--mb-blue); }

/* ── 04 · BUTTONS, BADGES, PILLS ───────────────────────────────────────── */
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--mb-r-btn);
  font-family: var(--mb-font-body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s var(--mb-ease), color .22s var(--mb-ease),
              border-color .22s var(--mb-ease), box-shadow .22s var(--mb-ease),
              transform .22s var(--mb-ease);
}
.mb-btn:hover { transform: translateY(-2px); }
.mb-btn:active { transform: translateY(0); }
.mb-btn svg { flex: none; }

/* Pill shape is reserved for the header CTA, the pricing segmented control
   and the solution section's primary CTA — everything else in the page body
   is a rounded rectangle. */
.mb-btn--pill { border-radius: var(--mb-r-pill); }

.mb-btn--primary {
  background: var(--mb-blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(9, 106, 201, .30);
}
.mb-btn--primary:hover { background: var(--mb-blue-600); box-shadow: 0 8px 22px rgba(9, 106, 201, .36); }

/* Neutral secondary — white with a hairline border. */
.mb-btn--ghost {
  background: #fff;
  color: var(--mb-ink);
  border-color: var(--mb-line);
  box-shadow: var(--mb-shadow-xs);
}
.mb-btn--ghost:hover { border-color: var(--mb-blue-400); color: var(--mb-blue); }

/* Blue secondary — the pricing "Get started" / "Contact sales" treatment.
   White fill rather than transparent so it holds up on tinted sections too. */
.mb-btn--outline {
  background: #fff;
  color: var(--mb-blue);
  border-color: #b9d6f5;
}
.mb-btn--outline:hover { background: var(--mb-blue); color: #fff; border-color: var(--mb-blue); }

.mb-btn--on-blue {
  background: #fff;
  color: var(--mb-blue);
  box-shadow: 0 4px 14px rgba(4, 40, 80, .18);
}
.mb-btn--on-blue:hover { background: var(--mb-blue-100); }

.mb-btn--wide { width: 100%; }

/* Circular glyph badge that sits inside a button, as on the reference's
   media-style secondary action. */
.mb-btn__badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -.4rem;
  border-radius: 50%;
  background: var(--mb-blue);
  color: #fff;
  flex: none;
}

.mb-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem .4375rem .5rem;
  border-radius: var(--mb-r-pill);
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-xs);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mb-ink);
}
.mb-chip__dot {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mb-a-blue);
  color: var(--mb-a-blue-fg);
}

/* Pastel icon tile used across benefit / feature cards. */
.mb-tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--mb-a-blue);
  color: var(--mb-a-blue-fg);
  flex: none;
}
.mb-tile--green  { background: var(--mb-a-green);  color: var(--mb-a-green-fg); }
.mb-tile--violet { background: var(--mb-a-violet); color: var(--mb-a-violet-fg); }
.mb-tile--amber  { background: var(--mb-a-amber);  color: var(--mb-a-amber-fg); }
.mb-tile--rose   { background: var(--mb-a-rose);   color: var(--mb-a-rose-fg); }
.mb-tile--cyan   { background: var(--mb-a-cyan);   color: var(--mb-a-cyan-fg); }

/* Check-mark list shared by the solution + feature sections. */
.mb-ticks { display: grid; gap: .75rem; }
.mb-ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .625rem;
  align-items: start;
  font-size: .9375rem;
  color: var(--mb-ink-soft);
}
.mb-ticks svg { margin-top: .18rem; color: var(--mb-blue); }

/* ── 05 · SITE HEADER + NAVIGATION ─────────────────────────────────────── */
.mb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--mb-ease), border-color .25s var(--mb-ease),
              box-shadow .25s var(--mb-ease);
}

/* Deliberately NOT `backdrop-filter`. Beyond the compositing cost, an element
   with a backdrop filter becomes the containing block for every
   `position: fixed` descendant — which traps the mobile drawer inside the
   68px header. A near-opaque white reads the same and costs nothing. */
.mb-header.is-stuck {
  background: #fff;
  border-bottom-color: var(--mb-line);
  box-shadow: 0 4px 20px rgba(9, 106, 201, .07);
}

.mb-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.mb-logo { flex: none; }
.mb-logo img { width: clamp(112px, 12vw, 138px); height: auto; }

.mb-nav { margin-left: auto; }
.mb-nav__label { display: none; }

.mb-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.35rem);
}

.mb-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .25rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--mb-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s var(--mb-ease);
}
.mb-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--mb-blue);
  transform: scaleX(0);
  transition: transform .24s var(--mb-ease);
}
.mb-nav__link:hover,
.mb-nav__link[aria-current="page"],
.mb-nav__link[aria-expanded="true"] { color: var(--mb-blue); }
.mb-nav__link:hover::after,
.mb-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.mb-nav__link svg { transition: transform .24s var(--mb-ease); }
.mb-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Duplicated CTAs that only belong in the mobile drawer. */
.mb-nav__cta { display: none; }

.mb-header__actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-left: clamp(.5rem, 1.5vw, 1.25rem);
}

.mb-iconbtn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mb-line);
  background: #fff;
  color: var(--mb-ink-soft);
  cursor: pointer;
  transition: color .2s var(--mb-ease), border-color .2s var(--mb-ease);
}
.mb-iconbtn:hover { color: var(--mb-blue); border-color: var(--mb-blue-400); }

/* Collapsed-to-icon search. The input keeps its box so no layout shifts
   when it opens — only its width animates. */
.mb-search { display: flex; align-items: center; gap: .375rem; }
.mb-search__input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--mb-r-pill);
  background: var(--mb-blue-50);
  font: inherit;
  font-size: .875rem;
  color: var(--mb-ink);
  opacity: 0;
  transition: width .28s var(--mb-ease), padding .28s var(--mb-ease),
              opacity .2s var(--mb-ease), border-color .2s var(--mb-ease);
}
.mb-search[data-open="true"] .mb-search__input,
.mb-search__input:focus {
  width: clamp(140px, 16vw, 210px);
  padding: .5rem .875rem;
  border-color: var(--mb-line);
  opacity: 1;
  outline: none;
}
.mb-search__input:focus { border-color: var(--mb-blue-400); }

/* — Mega menu (clinic specialties) — */
/* Near-full-width panel. Pinned with left/right insets rather than
   `width: 100vw` — 100vw includes the scrollbar and would push the page
   sideways on Windows. */
.mb-mega {
  position: absolute;
  left: clamp(.75rem, 1.6vw, 2rem);
  right: clamp(.75rem, 1.6vw, 2rem);
  top: calc(100% + 10px);
  z-index: 70;
  max-width: 1720px;
  margin-inline: auto;
  overflow: hidden;
  transform: translateY(-10px) scale(.995);
  /* Flat base. The two corner washes are separate layers below, because a
     background-image cannot be animated on the compositor — moving them as
     pseudo-elements keeps the whole effect off the paint path. */
  background: linear-gradient(160deg, #f7fbff 0%, #ffffff 46%, #f5f9ff 100%);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-xl);
  box-shadow: var(--mb-shadow-lg);
  padding: clamp(1.25rem, 2vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--mb-ease), transform .2s var(--mb-ease), visibility .2s;
}
.mb-mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Light-blue washes in the top-left and bottom-right corners, each drifting
   on its own slow clock so the panel never sits completely still.

   Transform only, and only while the panel is open — a paused animation on a
   hidden panel still keeps a compositor layer alive for every page on the
   site, and this markup is in the header of all of them. */
.mb-mega::before,
.mb-mega::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: mb-mega-wash 16s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-mega::before {
  top: -34%;
  left: -12%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(46, 139, 240, .22), transparent 72%);
}
.mb-mega::after {
  right: -14%;
  bottom: -38%;
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(46, 139, 240, .2), transparent 72%);
  animation-duration: 21s;
  animation-direction: reverse;
}
.mb-mega[data-open="true"]::before,
.mb-mega[data-open="true"]::after { animation-play-state: running; }

/* Returns to its start, so the reduced-motion collapse leaves both washes
   exactly where the static layout puts them. */
@keyframes mb-mega-wash {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6%, 5%, 0) scale(1.1); }
  66%      { transform: translate3d(-4%, 8%, 0) scale(.95); }
}

/* The panel's own children sit above the washes. */
.mb-mega__inner,
.mb-mega__foot { position: relative; z-index: 1; }

.mb-mega__inner {
  display: grid;
  grid-template-columns: minmax(260px, 22%) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  align-items: start;
}

/* ── Left rail ─────────────────────────────────────────────────────────── */
/* `z-index: 0` is load-bearing: it opens a stacking context so the backdrop
   disc below can sit at -1 and paint behind the rail's own text while still
   staying in front of the panel. Sizing the disc to dodge the copy (the
   previous approach) only held at one column width — this holds at all of
   them. */
.mb-mega__aside {
  position: relative;
  z-index: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* The disc, bled past the panel's left padding as in the comp. Anchored to
   the bottom so it frames the cut-out rather than the heading. */
.mb-mega__aside::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * clamp(1.25rem, 2vw, 2rem) - 4%);
  bottom: calc(-1 * clamp(1.25rem, 2vw, 2rem));
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 42% 32%, rgba(255, 255, 255, .85), transparent 62%),
    linear-gradient(158deg, #eaf4ff 0%, #d3e7fc 100%);
}

.mb-mega__eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .875rem;
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mb-blue);
}
/* The rule that leads the label in the comp. */
.mb-mega__eyebrow span {
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--mb-blue);
  flex: none;
}
.mb-mega__title {
  font-family: var(--mb-font-head);
  font-size: clamp(1.375rem, 1.05rem + .7vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
  color: var(--mb-ink);
}
.mb-mega__lede {
  margin-top: .625rem;
  font-size: .8125rem;
  color: var(--mb-muted);
  line-height: 1.55;
}

/* `margin-top: auto` drops the cut-out to the foot of the rail however tall
   the specialty grid makes the panel, and the negative margins let it bleed
   into the panel's padding on the left and bottom the way the comp does. */
.mb-mega__figure {
  position: relative;
  margin-top: auto;
  margin-left: calc(-1 * clamp(1.25rem, 2vw, 2rem));
  margin-bottom: calc(-1 * clamp(1.25rem, 2vw, 2rem));
  padding-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.mb-mega__figure img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* Inset from the rail's left edge rather than pinned to it — at left:-2% the
   card was landing under the panel's own rounded corner and getting sliced by
   its overflow clip. */
.mb-mega__badge {
  position: absolute;
  z-index: 2;
  left: 6%;
  bottom: 14%;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .8125rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: 0 12px 30px rgba(11, 34, 56, .12);
}
.mb-mega__badge-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--mb-a-blue);
  color: var(--mb-a-blue-fg);
}
.mb-mega__badge-ico svg { width: 17px; height: 17px; }
.mb-mega__badge-txt {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--mb-muted);
}
.mb-mega__badge-txt b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-ink);
}

/* ── Specialty grid ────────────────────────────────────────────────────── */
.mb-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, .9vw, .75rem);
  max-height: min(70vh, 620px);
  overflow-y: auto;
  /* Room for the card lift so the hover is not clipped by the scroll box. */
  padding: 2px;
}
/* NO per-card stagger. It was 22ms x 17, so the last card landed ~630ms after
   the panel opened and the whole thing read as content loading in rather than
   a menu appearing. The panel now fades as one object — .mb-mega's own opacity
   transition does that — and the cards are simply there. */
.mb-mega__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  gap: .75rem;
  align-items: center;
  padding: .75rem .8125rem;
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-md);
  text-decoration: none;
  transition: transform .22s var(--mb-ease), box-shadow .22s var(--mb-ease),
              border-color .22s var(--mb-ease);
}
.mb-mega__item:hover,
.mb-mega__item:focus-visible {
  transform: translateY(-2px);
  border-color: #cfe3fa;
  box-shadow: var(--mb-shadow-md);
}

.mb-mega__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--mb-blue-50);
  border: 1px solid #e7f1fd;
  color: var(--mb-blue);
  transition: background-color .22s var(--mb-ease), transform .22s var(--mb-ease);
}
/* The glyph is painted, not drawn: `background` supplies the colour and the
   artwork's alpha channel masks it. That is what lets the table's two-tone
   source render as one flat brand blue. -webkit-mask is carried for Safari,
   which still needs the prefix. */
.mb-mega__tile i {
  display: block;
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.mb-mega__item:hover .mb-mega__tile {
  background: var(--mb-blue-100);
  transform: scale(1.06);
}

.mb-mega__text { min-width: 0; }
.mb-mega__name {
  display: block;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-ink);
  line-height: 1.3;
  margin-bottom: .1875rem;
}
.mb-mega__desc {
  display: block;
  font-size: .75rem;
  color: var(--mb-muted);
  line-height: 1.45;
}
.mb-mega__go {
  display: grid;
  place-items: center;
  color: #9db6d0;
  transition: transform .22s var(--mb-ease), color .22s var(--mb-ease);
}
.mb-mega__item:hover .mb-mega__go,
.mb-mega__item:focus-visible .mb-mega__go {
  color: var(--mb-blue);
  transform: translateX(3px);
}

/* ── Footer bar ────────────────────────────────────────────────────────── */
.mb-mega__foot {
  margin-top: clamp(.875rem, 1.6vw, 1.25rem);
  padding-top: clamp(.875rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--mb-line);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  align-items: center;
  font-size: .8125rem;
  color: var(--mb-ink-soft);
}
/* The blue rule that leads the sentence in the comp. */
.mb-mega__foot > span {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.mb-mega__foot > span::before {
  content: "";
  width: 3px;
  height: 1.125rem;
  border-radius: 2px;
  background: var(--mb-blue);
  flex: none;
}

@media (max-width: 1280px) {
  /* The rail needs ~260px plus a readable three-up grid beside it. Below this
     the grid wins and the rail goes — it is the panel's decoration, the
     specialties are its job. */
  .mb-mega__inner { grid-template-columns: minmax(0, 1fr); }
  .mb-mega__aside { display: none; }
}

@media (max-width: 1080px) {
  .mb-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* — Mobile drawer trigger — */
/* Brand-blue, and the same 44px touch target as the dock buttons. One `color`
   drives all three bars via currentColor, so the open state only has to change
   the container. */
.mb-burger {
  display: none;
  place-items: center;
  /* align-content, not just align-items: the default stretches the three grid
     rows to fill the 44px box, which spreads the bars 14.7px apart and leaves
     the X transform below (a fixed 6px) short of the centre — the "close"
     glyph rendered as a chevron. Centring the row track keeps the bars at the
     6px the margins define, so the two strokes actually cross. */
  align-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  border: 1px solid var(--mb-blue-100);
  background: var(--mb-blue-50);
  color: var(--mb-blue);
  cursor: pointer;
  transition: background-color .22s var(--mb-ease), border-color .22s var(--mb-ease),
              box-shadow .22s var(--mb-ease);
}
.mb-burger:hover { background: var(--mb-blue-100); border-color: var(--mb-blue-400); }
.mb-burger span {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s var(--mb-ease), opacity .2s var(--mb-ease);
}
.mb-burger span + span { margin-top: 4px; }

/* Open: a blue X on white. z-index lifts it over the drawer — the panel is
   z-index 65 inside the header's own stacking context, so without this the
   close control slides underneath the very thing it closes and disappears,
   which is exactly what it used to do. */
.mb-burger[aria-expanded="true"] {
  position: relative;
  z-index: 70;
  background: #fff;
  border-color: var(--mb-blue-400);
  box-shadow: var(--mb-shadow-sm);
}
.mb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 06 · HERO ─────────────────────────────────────────────────────────── */
.mb-hero {
  position: relative;
  isolation: isolate;
  --mb-hero-pb: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4.25rem) var(--mb-hero-pb);
  background:
    radial-gradient(60rem 34rem at 88% -8%, rgba(46, 139, 240, .16), transparent 62%),
    radial-gradient(48rem 30rem at 4% 4%, rgba(9, 106, 201, .10), transparent 60%),
    linear-gradient(180deg, #eff6ff 0%, #f8fbff 68%, #ffffff 100%);
  overflow: hidden;
}

/* Blue wave curves behind everything. One inline SVG, no image request, and
   `pointer-events:none` so it never intercepts a click. */
.mb-hero__waves {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mb-hero__waves svg { width: 100%; height: 100%; }

/* Soft ribbon shapes echoing the reference layout. */
.mb-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -45% 55%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(9, 106, 201, .14), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.mb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}


.mb-hero__title {
  /* Fluid from phone to large monitor: ~32px at 375, ~55px at 1366,
     ~64px at 1920 — so the headline keeps its weight next to the art. */
  font-size: clamp(2rem, 1rem + 2.9vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.mb-hero__lede {
  font-size: clamp(1rem, .85rem + .35vw, 1.3rem);
  color: var(--mb-muted);
  max-width: 36em;
  margin-bottom: 2rem;
}

.mb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2.5rem;
}

/* ── Hero button behaviour ───────────────────────────────────────────────
   Scoped to the hero pair on purpose. .mb-btn--primary and .mb-btn--ghost
   are reused by the header, the pricing table and the closing CTA, and a
   colour inversion is too loud for a button that repeats five times down
   the page. Selectors sit at (0,3,0) so they beat the base :hover rules.
   ──────────────────────────────────────────────────────────────────────── */

/* Primary: colours invert, and the button lengthens with the arrow riding
   out to the new right edge. Only padding and gap change, so the label
   stays put instead of sliding under the cursor. */
.mb-hero__cta .mb-btn--primary {
  padding-right: 1.5rem;
  transition: background-color .22s var(--mb-ease), color .22s var(--mb-ease),
              border-color .22s var(--mb-ease), box-shadow .22s var(--mb-ease),
              transform .22s var(--mb-ease), padding-right .28s var(--mb-ease),
              gap .28s var(--mb-ease);
}
.mb-hero__cta .mb-btn--primary svg { transition: transform .28s var(--mb-ease); }

.mb-hero__cta .mb-btn--primary:hover,
.mb-hero__cta .mb-btn--primary:focus-visible {
  background: #fff;
  color: var(--mb-blue);
  border-color: var(--mb-blue);
  box-shadow: 0 8px 22px rgba(9, 106, 201, .22);
  gap: 1.15rem;
  padding-right: 2.15rem;
}
/* padding-right grows by 10.4px, so the arrow travels 11px — it ends up a
   shade tighter to the edge than at rest (23px vs 25px), which is what
   makes it read as riding out to the end rather than being pushed in. */
.mb-hero__cta .mb-btn--primary:hover svg,
.mb-hero__cta .mb-btn--primary:focus-visible svg { transform: translateX(11px); }

/* Secondary: the same inversion, and the badge flips with it. */
.mb-hero__cta .mb-btn--ghost:hover,
.mb-hero__cta .mb-btn--ghost:focus-visible {
  background: var(--mb-blue);
  color: #fff;
  border-color: var(--mb-blue);
  box-shadow: 0 8px 22px rgba(9, 106, 201, .28);
}
.mb-hero__cta .mb-btn--ghost .mb-btn__badge {
  transition: background-color .22s var(--mb-ease), color .22s var(--mb-ease);
}
.mb-hero__cta .mb-btn--ghost:hover .mb-btn__badge,
.mb-hero__cta .mb-btn--ghost:focus-visible .mb-btn__badge {
  background: #fff;
  color: var(--mb-blue);
}

/* Rings pulsing out from the play badge. Two of them, half a cycle apart,
   so there is always one mid-flight. transform + opacity only, and they are
   drawn on pseudo-elements of a wrapper rather than the badge itself so the
   badge can keep overflow visible without the glyph inheriting the scale. */
.mb-hero__cta .mb-btn__badge { position: relative; z-index: 0; }
.mb-hero__cta .mb-btn__badge::before,
.mb-hero__cta .mb-btn__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  /* Explicit colours, not currentColor: at rest the badge's own colour is
     white, so the rings vanished the moment they expanded past the badge
     onto the white button. They have to be keyed to what is behind them. */
  border: 2px solid rgba(9, 106, 201, .55);
  opacity: 0;
  animation: mb-ping 2.4s var(--mb-ease) infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.mb-hero__cta .mb-btn__badge::after { animation-delay: -1.2s; }
.mb-hero__cta .mb-btn--ghost:hover .mb-btn__badge::before,
.mb-hero__cta .mb-btn--ghost:hover .mb-btn__badge::after,
.mb-hero__cta .mb-btn--ghost:focus-visible .mb-btn__badge::before,
.mb-hero__cta .mb-btn--ghost:focus-visible .mb-btn__badge::after {
  border-color: rgba(255, 255, 255, .7);
}
.mb-hero.is-visible .mb-btn__badge::before,
.mb-hero.is-visible .mb-btn__badge::after { animation-play-state: running; }

@keyframes mb-ping {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(2.1);  opacity: 0; }
  100% { transform: scale(2.1);  opacity: 0; }
}

.mb-hero__usps {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1.25rem clamp(1rem, 2.4vw, 2rem);
  margin-bottom: 2.75rem;
}
.mb-usp {
  display: grid;
  justify-items: center;
  gap: .55rem;
  width: clamp(88px, 6.4vw, 124px);
  text-align: center;
}
.mb-usp__icon {
  display: grid;
  place-items: center;
  width: clamp(50px, 3.6vw, 68px); height: clamp(50px, 3.6vw, 68px);
  border-radius: 17px;
  background: linear-gradient(150deg, #ffffff 0%, var(--mb-a-blue) 100%);
  border: 1px solid #d3e4fb;
  box-shadow: 0 6px 16px rgba(9, 106, 201, .12), inset 0 1px 0 #fff;
  color: var(--mb-a-blue-fg);
  /* Compositor-only, and staggered per item by --i. */
  animation: mb-usp-float 5.5s var(--mb-ease) infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
  transition: transform .28s var(--mb-ease), box-shadow .28s var(--mb-ease);
}
.mb-usp:hover .mb-usp__icon {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 24px rgba(9, 106, 201, .2), inset 0 1px 0 #fff;
}
@keyframes mb-usp-float {
  from, to { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}
.mb-usp:hover .mb-usp__icon { animation-play-state: paused; }

.mb-usp__label {
  font-size: clamp(.8125rem, .7rem + .25vw, .95rem);
  font-weight: 600;
  color: var(--mb-ink-soft);
  line-height: 1.3;
}

.mb-proof { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem .875rem; }
/* Staff-role chips. These replaced photo avatars, and the old -12px overlap
   went with them: a face survives being two-thirds covered — you read it from
   an eye and a cheek — but a line icon clipped that hard is just noise. Icons
   need their whole disc, so the pile became a spaced row. */
.mb-proof__roles {
  --disc: clamp(32px, 7.6vw, 38px);
  display: flex;
  flex: none;
  gap: clamp(.25rem, 1vw, .375rem);
}
.mb-proof__role {
  display: grid;
  place-items: center;
  width: var(--disc); height: var(--disc);
  border-radius: 50%;
  background: var(--mb-blue-50);
  border: 1px solid var(--mb-line);
  color: var(--mb-blue);
  box-shadow: var(--mb-shadow-xs);
}
/* Sized off the disc so the optical padding holds at every clamp step. */
.mb-proof__role svg { width: 55%; height: 55%; }
.mb-proof__text { flex: 1 1 12rem; min-width: 0; font-size: clamp(.8125rem, .7rem + .25vw, .95rem); color: var(--mb-muted); line-height: 1.45; }
.mb-proof__text strong { color: var(--mb-ink); font-weight: 700; }

/* — Hero art: doctor cut-out + a live HTML dashboard mock —
   The cut-out is a tall 5:12 crop, so it is sized by HEIGHT and pinned to the
   baseline of the art box. Sizing it by width would blow the fold open. */
.mb-hero__art {
  position: relative;
  /* Bottom-anchored, not centred: with `align-items: center` on the grid the
     art's margin box gets split evenly, which left the cut-out hovering ~9px
     above the section edge whenever the text column was the taller one. */
  align-self: end;
  /* Sized by the screen's width and its height: the art grows on large
     monitors (up to 900px) but never runs taller than the window minus the
     header, so the doctor's head and the cards stay above the fold. */
  min-height: clamp(460px, min(54vw, calc(100svh - 140px)), 900px);
  /* Cancels the section's bottom padding so the cut-out stands ON the edge of
     the block instead of hovering above it. */
  margin-bottom: calc(-1 * var(--mb-hero-pb));
}

img.mb-hero__doctor {
  position: absolute;
  left: -5%;
  bottom: 0;
  /* In front of the dashboard, which now sits behind him as a backdrop. */
  z-index: 3;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 22px 34px rgba(11, 34, 56, .16));
}

/* The dashboard is a supplied UI mockup rather than an HTML re-creation, so
   the hero matches the design comp exactly. Served as WebP at three widths
   with a fixed aspect-ratio box, so it costs no layout shift. */
img.mb-mock {
  position: absolute;
  right: -3%;
  top: 16%;
  /* Behind the doctor: a backdrop he stands in front of, so it can be large
     without hiding him. Width follows the art column, which follows the screen. */
  z-index: 1;
  /* 15% smaller than the original min(780px, 90%) backdrop. */
  width: min(663px, 76.5%);
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 28px 70px rgba(11, 34, 56, .18), 0 2px 8px rgba(11, 34, 56, .05);
  animation: mb-drift 9s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-hero.is-visible img.mb-mock { animation-play-state: running; }

/* ── Floating detail cards ──────────────────────────────────────────────
   Shared by the hero and the "complete solution" split. Also sized in em so
   one font-size controls the whole card. */
/* ── Glassmorphism ────────────────────────────────────────────
   The supplied recipe, applied to every floating card on the page: the split
   section's three, the hero's two and the snippet over each feature photo.

   The heavy lifting is the last inset shadow — a 22px-blurred, 11px-spread
   white glow that floods the card inwards from all four edges. That is what
   keeps the copy legible at a .28 background; the fill alone would not.
   (The source used rgba(...,1.1); alpha is clamped to 1 by every engine, so
   it is written as 1 here to stay valid CSS.)

   ::before and ::after draw the lit top and left edges that sell the "pane
   of glass" read.
   ────────────────────────────────────────────────────────── */
.mb-card,
.mb-feature__overlay {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .1),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .1),
    inset 0 0 22px 11px rgba(255, 255, 255, 1);
  padding: .85em 1em;
  font-family: var(--mb-font-head);
  font-size: clamp(10px, .82vw, 12px);
  line-height: 1.4;
  color: var(--mb-ink);
}

/* Lit top edge. */
.mb-card::before,
.mb-feature__overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  pointer-events: none;
}

/* Lit left edge. */
.mb-card::after,
.mb-feature__overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), transparent, rgba(255, 255, 255, .3));
  pointer-events: none;
}

/* The card's own content has to sit above the inner glow. */
.mb-card > *,
.mb-feature__overlay > * { position: relative; z-index: 1; }

/* Fill by backdrop, the one place the recipe needs tuning.
   ------------------------------------------------------------------------
   .28 is gorgeous over a flat, light backdrop and unusable over a person.
   Measured worst-case contrast for the row labels at .28:

     over the hero gradient (L 0.92) ........ 9.11:1   ✓ keeps .28
     over the doctor cut-out (L 0.00) ....... 1.04:1   ✗
     over the split cut-out (L 0.001) ....... 1.20:1   ✗
     over the feature photos (L 0.004) ...... 1.34:1   ✗

   The inset glow reaches ~33px in from each edge, so on a short card the
   middle rows sit outside it and the fill alone has to carry them. .68 is
   the lowest value that clears AA against the darkest measured backdrop
   (4.66:1) and is still a third see-through. Every other property of the
   recipe — 6px blur, 20px radius, lit edges, inner glow, shadow — is
   untouched on every card. Delete this block for a uniform .28. */
.mb-feature__overlay,
.mb-split__card,
.mb-hero__card--b { background: rgba(255, 255, 255, .68); }

/* Dividers inside glass read as smoke rather than hairlines. */
.mb-card__head,
.mb-card__foot { border-color: rgba(11, 34, 56, .12) !important; }
.mb-card__row { border-top-color: rgba(11, 34, 56, .08); }

/* Head / body / foot give the card a real anatomy instead of a stack of
   rows: a titled header rule, the data, then a summary strip. */
.mb-card__head {
  display: flex;
  align-items: center;
  gap: .55em;
  padding-bottom: .6em;
  margin-bottom: .6em;
  border-bottom: 1px solid rgba(11, 34, 56, .09);
}
.mb-card__body { display: grid; gap: .05em; }

.mb-card__foot {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-top: .6em;
  padding-top: .55em;
  border-top: 1px solid rgba(11, 34, 56, .09);
  font-size: .85em;
  color: var(--mb-ink-soft);
}
.mb-card__foot .mb-card__link { margin-left: auto; color: var(--mb-blue); font-weight: 700; }

/* Small trailing chip in the header (neutral) and count badge (alert). */
.mb-card__chip {
  margin-left: auto;
  padding: .12em .55em;
  border-radius: var(--mb-r-pill);
  background: var(--mb-blue-50);
  border: 1px solid rgba(11, 34, 56, .08);
  font-size: .8em;
  font-weight: 600;
  color: var(--mb-ink-soft);
  white-space: nowrap;
}
.mb-card__badge {
  margin-left: auto;
  display: grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding-inline: .3em;
  border-radius: var(--mb-r-pill);
  background: var(--mb-a-rose);
  color: var(--mb-a-rose-fg);
  font-size: .82em;
  font-weight: 700;
}

/* Completion meter on the appointments card. */
.mb-card__meter {
  flex: 1;
  height: .42em;
  border-radius: var(--mb-r-pill);
  background: rgba(11, 34, 56, .10);
  overflow: hidden;
}
.mb-card__meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mb-blue-400), var(--mb-blue));
}

/* Meta line with a leading glyph, used on the patient card. */
.mb-card__meta {
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: .85em;
  color: var(--mb-ink-soft);
  padding-block: .12em;
}
.mb-card__meta svg { width: 1em; height: 1em; flex: none; color: var(--mb-blue); }
.mb-card__head .mb-tile {
  width: 2.2em; height: 2.2em;
  border-radius: .6em;
}
.mb-card__head .mb-tile svg { width: 1.2em; height: 1.2em; }
.mb-card__title { font-size: 1.05em; font-weight: 600; }
.mb-card__sub { font-size: .85em; color: var(--mb-ink-soft); font-weight: 400; }

/* Status pill, e.g. the "Active" flag on the patient card. */
.mb-card__pill {
  margin-left: auto;
  padding: .15em .6em;
  border-radius: var(--mb-r-pill);
  background: var(--mb-a-green);
  color: var(--mb-a-green-fg);
  font-size: .8em;
  font-weight: 700;
}

/* One data row: coloured status dot, label, trailing value. */
.mb-card__row {
  display: flex;
  align-items: center;
  gap: .5em;
  padding-block: .3em;
  font-size: .92em;
  border-top: 1px solid rgba(11, 34, 56, .055);
}
.mb-card__row:first-child { border-top: 0; }
.mb-card__row span { color: var(--mb-ink-soft); }
.mb-card__row b { margin-left: auto; font-weight: 700; color: var(--mb-ink); }
/* Variant where the count leads the label instead of trailing it. */
.mb-card__row--lead b { margin-left: 0; margin-right: .25em; }
.mb-card__dot {
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--mb-blue);
  flex: none;
}
.mb-card__dot--green { background: var(--mb-a-green-fg); }
.mb-card__dot--amber { background: var(--mb-a-amber-fg); }
.mb-card__dot--rose  { background: var(--mb-a-rose-fg); }
.mb-card__row b.is-low  { color: var(--mb-a-rose-fg); }
.mb-card__row b.is-warn { color: #9c5109; }

/* Person block on the patient-record card. */
.mb-card__person { display: flex; gap: .65em; align-items: center; margin-bottom: .45em; }
.mb-card__person img {
  width: 2.9em; height: 2.9em;
  border-radius: .6em;
  object-fit: cover;
  flex: none;
}
.mb-card__person dl { display: grid; gap: .1em; margin: 0; min-width: 0; }
.mb-card__person dt { font-size: .85em; font-weight: 600; color: var(--mb-ink-soft); }
.mb-card__person dd { margin: 0; font-size: .85em; color: var(--mb-ink-soft); }
.mb-card__person dd.mb-card__name {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--mb-ink);
  margin-bottom: .1em;
}

/* Drives the accent glyphs on the mid-page band. */
@keyframes mb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Glass cards floating around the figure, filling the top-right and bottom
   corners the dashboard leaves open. Same .mb-card component as everywhere
   else; only placement and drift timing differ. */
.mb-hero__card { position: absolute; z-index: 4; font-size: clamp(10px, .45rem + .42vw, 15px); }
.mb-hero__card--a { right: 1%;  top: 1%;   width: min(18em, 39%); }
.mb-hero__card--b { left: 26%;  bottom: 3%; width: min(19.5em, 41%); }

.mb-hero__card {
  animation: mb-drift 8s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-hero.is-visible .mb-hero__card { animation-play-state: running; }
.mb-hero__card--a { animation-delay: -1.4s; }
.mb-hero__card--b { animation-delay: -4.8s; animation-duration: 9s; }

/* ── 07 · BENEFIT STRIP ────────────────────────────────────────────────── */
.mb-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.125rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.mb-benefit {
  display: grid;
  gap: .625rem;
  padding: 1.375rem 1.125rem;
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  box-shadow: var(--mb-shadow-xs);
  text-align: center;
  justify-items: center;
  transition: transform .28s var(--mb-ease), box-shadow .28s var(--mb-ease),
              border-color .28s var(--mb-ease);
}
.mb-benefit:hover {
  transform: translateY(-5px);
  box-shadow: var(--mb-shadow-md);
  border-color: #cfe3fa;
}
.mb-benefit h3 { font-size: .9375rem; font-weight: 600; }
.mb-benefit p { font-size: .8125rem; color: var(--mb-muted); line-height: 1.5; }

/* ── 08 · SOLUTION SPLIT ──────────────────────────────────── */
.mb-split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.mb-split__copy .mb-h2 { margin-bottom: 1.125rem; text-wrap: balance; }
.mb-split__copy .mb-lede { margin-bottom: 1.75rem; max-width: 30rem; }

/* The accent word carries a small flourish. nowrap keeps "Healthcare" whole so
   the mark never ends up orphaned on its own line, and the SVG is absolute so
   it contributes nothing to the line box it hangs off. */
.mb-split__word { position: relative; white-space: nowrap; }
.mb-split__flourish {
  position: absolute;
  top: -.22em;
  right: -.66em;
  width: .5em;
  height: .6em;
  color: var(--mb-blue-400);
  pointer-events: none;
}

/* The four points, 2x2. */
.mb-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.375rem 1.5rem;
  margin-top: 1.875rem;
}
.mb-perks li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .875rem;
  align-items: center;
}
.mb-perks .mb-tile svg { width: 24px; height: 24px; }
.mb-perks__label {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mb-ink);
  line-height: 1.4;
  /* Two-line labels of very different lengths sit side by side here, so let
     the browser even out the ragged edge rather than breaking at the box. */
  text-wrap: balance;
}

.mb-split__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}
.mb-split__explore { min-height: 54px; padding-inline: 1.875rem; }

/* Play button + its two-line caption. */
.mb-play {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
}
.mb-play__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  color: var(--mb-blue);
  /* Optical centring: a triangle's centre of mass sits left of its bounding
     box, so a glyph centred by the grid reads as sitting too far left. */
  padding-left: 3px;
  transition: transform .22s var(--mb-ease), box-shadow .22s var(--mb-ease);
}
/* Two rings pushing off the button, half a cycle apart so one is always
   travelling. They are the affordance — a 46px circle in a body of static
   copy needs to say "this does something" before it is hovered. They only
   ever draw at or outside the button's edge, so no z-index is needed to keep
   them off the glyph. Paused off-screen by the same .is-visible switch the
   floating cards use. */
.mb-play__btn::before,
.mb-play__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--mb-blue-400);
  opacity: 0;
  pointer-events: none;
  animation: mb-play-ping 2.8s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-play__btn::after { animation-delay: -1.4s; }
.mb-split.is-visible .mb-play__btn::before,
.mb-split.is-visible .mb-play__btn::after { animation-play-state: running; }

/* Ends invisible, so the reduced-motion rule collapses it to a single
   0.001ms run and simply leaves no ring behind. */
@keyframes mb-play-ping {
  0%   { transform: scale(1); opacity: .5; }
  60%  { opacity: .16; }
  100% { transform: scale(1.9); opacity: 0; }
}

.mb-play:hover .mb-play__btn { transform: scale(1.07); box-shadow: var(--mb-shadow-md); }
.mb-play__text { display: grid; gap: .1rem; line-height: 1.25; }
.mb-play__text b { font-size: .9375rem; font-weight: 700; color: var(--mb-ink); }
.mb-play__text small { font-size: .8125rem; color: var(--mb-muted); }

/* The photo is meant to run off the right of the section rather than stop
   mid-page. On every screen below the 1760px shell cap the gutter is the only
   inset, so pulling that back is the whole bleed; .mb-section--clip contains
   the overflow. The stacked layout below resets it via margin-inline. */
.mb-split__art {
  --bleed: var(--mb-gutter);
  position: relative;
  isolation: isolate;
  margin-right: calc(-1 * var(--bleed));
}

/* Soft wash behind the photo, bleeding past its corners the way the comp does.
   Blue leads it — the violet is down to a trace in the far corner, enough to
   keep the comp's lavender cast without moving the priority colour off blue.
   Pure CSS, so it costs no extra image request. */
.mb-split__art::before {
  content: "";
  position: absolute;
  inset: -16% -14% -20% -6%;
  z-index: -1;
  border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%;
  background:
    radial-gradient(46% 44% at 78% 14%, rgba(46, 139, 240, .34), transparent 70%),
    radial-gradient(50% 48% at 94% 74%, rgba(9, 106, 201, .26), transparent 72%),
    radial-gradient(56% 54% at 8% 92%, rgba(124, 92, 232, .16), transparent 74%);
  filter: blur(8px);
  pointer-events: none;
}

.mb-split__art img.mb-split__photo {
  display: block;
  width: 100%;
  /* The webp carries its own feathered edges in the alpha channel, so there is
     no frame, no radius and no shadow here — a drop-shadow on a feathered
     cut-out only smears a grey halo along the fade. It dissolves into the wash
     instead of sitting in a box. */
}

/* Placement only — the cards themselves are .mb-card. */
.mb-split__card { position: absolute; z-index: 2; }
/* Staggered so the three never collide, even where the photo is narrowest.
   The right-hand pair is measured from --bleed rather than the box: the art
   hangs off the section edge, so a plain right:-5% would put them off-screen. */
.mb-split__card--tl { left: -6%; top: 12%; width: min(228px, 44%); }
.mb-split__card--tr { top: 2%;  width: min(242px, 46%); right: calc(var(--bleed) + .5rem); }
.mb-split__card--br { top: 54%; width: min(248px, 47%); right: calc(var(--bleed) - .5rem); }

/* The hand-written aside that used to sit here is gone, along with its
   .mb-scribble markup on the home page. The script face was whatever the OS
   happened to supply — Segoe Script, Bradley Hand, or a generic cursive — so
   the same line rendered differently on every machine and matched nothing
   else in the type system. */

/* Trust strip over the foot of the photo. */
.mb-trust {
  position: absolute;
  z-index: 3;
  right: calc(var(--bleed) + 2%);
  bottom: 3%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .95rem;
  border-radius: var(--mb-r-lg);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
}
.mb-trust p {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mb-ink);
  line-height: 1.35;
}
.mb-trust__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mb-a-blue);
  color: var(--mb-a-blue-fg);
}
.mb-trust__mark svg { width: 19px; height: 19px; }
/* Faces overlap here, unlike the role chips in the hero: a photographed face
   still reads from a sliver, so the pile costs nothing and saves the width. */
.mb-trust__faces { display: flex; flex: none; align-items: center; }
.mb-trust__faces img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
.mb-trust__faces img + img,
.mb-trust__more { margin-left: -10px; }
.mb-trust__more {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mb-blue);
  border: 2px solid #fff;
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  font-style: normal;
}

/* ── Floating drift ─────────────────────────────────────────
   `transform` only, so the whole thing stays on the compositor and never
   triggers layout or paint. The animation is PAUSED by default and only runs
   while the section is on screen (medbus-home.js adds .is-visible), so a
   backdrop-filtered card is never being recomposited off-screen. */
@keyframes mb-drift {
  from { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -9px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.mb-split__card {
  animation: mb-drift 7s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-split.is-visible .mb-split__card { animation-play-state: running; }
.mb-split__card--tl { animation-delay: -.6s; }
.mb-split__card--tr { animation-delay: -3.1s; animation-duration: 8s; }
.mb-split__card--br { animation-delay: -5.2s; animation-duration: 7.6s; }

/* ── 09 · FEATURE GRID ─────────────────────────────────────────────────── */
.mb-featurehead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.mb-features {
  --mb-features-gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mb-features-gap);
}

/* Seven cards leave one alone on the last row. Rather than stretch it, centre
   it at the same size as its siblings. The :nth-child test fires only when the
   final card actually starts a fresh row, so this keeps working if a feature
   is added or removed later. */
.mb-features > .mb-feature:last-child:nth-child(3n + 1) { grid-column: 2; }

.mb-feature {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  overflow: hidden;
  box-shadow: var(--mb-shadow-xs);
  transition: transform .3s var(--mb-ease), box-shadow .3s var(--mb-ease),
              border-color .3s var(--mb-ease);
}
.mb-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--mb-shadow-lg);
  border-color: #cfe3fa;
}

.mb-feature__media {
  position: relative;
  /* Wider and shorter than the old 3:2 — more room for the copy beneath. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(160deg, #f2f8ff 0%, #e4effb 100%);
}
.mb-feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* The floating snippet over each photo is the same glass card used in the
   solution split, just smaller — one component, one look. */
.mb-feature__overlay {
  position: absolute;
  right: .8rem;
  top: .8rem;
  width: min(178px, 52%);
  font-size: clamp(9.5px, .72vw, 11px);
  padding: .7em .8em;
  border-radius: 16px;
  animation: mb-drift 8s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-features.is-visible .mb-feature__overlay { animation-play-state: running; }
.mb-feature:nth-child(2n) .mb-feature__overlay { animation-delay: -2.6s; animation-duration: 9s; }
.mb-feature:nth-child(3n) .mb-feature__overlay { animation-delay: -5.1s; animation-duration: 8.5s; }

.mb-feature__overlay .mb-card__head {
  gap: .45em;
  padding-bottom: .45em;
  margin-bottom: .4em;
}
.mb-feature__overlay .mb-tile {
  width: 1.9em; height: 1.9em;
  border-radius: .55em;
}
.mb-feature__overlay .mb-tile svg { width: 1.05em; height: 1.05em; }
.mb-feature__overlay .mb-card__title { font-size: 1em; }
.mb-feature__overlay .mb-card__row { padding-block: .2em; font-size: .95em; }
.mb-feature__overlay .mb-card__dot { width: .5em; height: .5em; }

.mb-feature__body { padding: 1.125rem 1.25rem 1.375rem; display: grid; gap: .625rem; }
.mb-feature__title { display: flex; align-items: center; gap: .625rem; }
.mb-feature__title .mb-tile { width: 34px; height: 34px; border-radius: 10px; }
.mb-feature__title h3 { font-size: 1rem; font-weight: 600; }
.mb-feature__body > p { font-size: .875rem; color: var(--mb-muted); line-height: 1.6; }
.mb-feature .mb-ticks { gap: .4rem; }
.mb-feature .mb-ticks li { font-size: .8125rem; }

/* ── 10 · CLINIC CAROUSEL ──────────────────────────────────────────────── */
.mb-carousel { position: relative; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.mb-carousel__track {
  display: grid;
  grid-auto-flow: column;
  /* Fixed-ish card width rather than 1fr: inside a scroll container 1fr would
     collapse to the min anyway, and an explicit clamp keeps the card legible
     enough to carry a title plus a three-line subtitle. */
  grid-auto-columns: clamp(230px, 21vw, 292px);
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: .25rem;
  padding-block: .25rem .75rem;
  /* Hide the native bar — the arrow buttons and swipe are the affordances. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mb-carousel__track::-webkit-scrollbar { display: none; }

/* At this size the card carries real content, so it gets the same white-card
   treatment as the feature grid rather than bare text under a photo. */
.mb-clinic {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  overflow: hidden;
  box-shadow: var(--mb-shadow-xs);
  transition: transform .3s var(--mb-ease), box-shadow .3s var(--mb-ease),
              border-color .3s var(--mb-ease);
}
.mb-clinic:hover {
  transform: translateY(-5px);
  box-shadow: var(--mb-shadow-md);
  border-color: #cfe3fa;
}

.mb-clinic__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mb-blue-100);
}
.mb-clinic__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--mb-ease);
}
.mb-clinic:hover .mb-clinic__media img { transform: scale(1.05); }

.mb-clinic__body {
  display: grid;
  gap: .375rem;
  padding: .875rem 1rem 1.125rem;
}
.mb-clinic__name {
  font-family: var(--mb-font-head);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mb-ink);
  line-height: 1.35;
}
/* Clamped so a long specialty line cannot make one card taller than the
   rest of the row. */
.mb-clinic__desc {
  font-size: .8125rem;
  color: var(--mb-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mb-carousel__btn {
  position: absolute;
  top: 42%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mb-line);
  background: #fff;
  color: var(--mb-ink);
  box-shadow: var(--mb-shadow-md);
  cursor: pointer;
  transition: color .2s var(--mb-ease), border-color .2s var(--mb-ease), opacity .2s;
}
.mb-carousel__btn:hover { color: var(--mb-blue); border-color: var(--mb-blue-400); }
.mb-carousel__btn[disabled] { opacity: .35; cursor: default; }
.mb-carousel__btn--prev { left: clamp(-1.25rem, -1vw, 0rem); }
.mb-carousel__btn--next { right: clamp(-1.25rem, -1vw, 0rem); }

/* ── 11 · PRICING ──────────────────────────────────────────────────────── */
.mb-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}

.mb-toggle {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  border-radius: var(--mb-r-pill);
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-xs);
}
.mb-toggle__btn {
  padding: .55rem 1.25rem;
  border: 0;
  border-radius: var(--mb-r-pill);
  background: transparent;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mb-muted);
  cursor: pointer;
  transition: background-color .22s var(--mb-ease), color .22s var(--mb-ease);
}
.mb-toggle__btn[aria-pressed="true"] { background: var(--mb-blue); color: #fff; }
.mb-toggle__save {
  padding: .35rem .75rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-a-green);
  color: var(--mb-a-green-fg);
  font-size: .75rem;
  font-weight: 700;
}

.mb-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
}

.mb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  box-shadow: var(--mb-shadow-xs);
  transition: transform .3s var(--mb-ease), box-shadow .3s var(--mb-ease);
}
.mb-plan:hover { transform: translateY(-5px); box-shadow: var(--mb-shadow-md); }

.mb-plan--featured {
  border-color: var(--mb-blue);
  box-shadow: var(--mb-shadow-lg);
}
/* Footnote under the plan grid — the caveats that apply to every tier, so
   they belong once beneath the whole set rather than in each card. */
.mb-plans__foot {
  max-width: 46rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--mb-muted);
}

.mb-plan__flag {
  position: absolute;
  top: -.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .85rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-blue);
  color: #fff;
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.mb-plan__name {
  font-family: var(--mb-font-head);
  font-size: .875rem;
  font-weight: 600;
  color: var(--mb-blue);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mb-plan__price {
  font-family: var(--mb-font-head);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 700;
  color: var(--mb-ink);
  line-height: 1.1;
}
.mb-plan__price span {
  font-size: .875rem;
  font-weight: 500;
  color: var(--mb-muted);
}
.mb-plan__note { font-size: .8125rem; color: var(--mb-muted); }
.mb-plan .mb-ticks { flex: 1; }
.mb-plan .mb-ticks li { font-size: .875rem; }

.mb-plan--custom {
  background: linear-gradient(160deg, var(--mb-blue-100), #fff 70%);
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.mb-plan--custom .mb-tile { width: 52px; height: 52px; border-radius: 16px; }

/* ── 12 · CONTACT BAND ─────────────────────────────────────────────────── */
.mb-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: clamp(0px, 2vw, 28px);
  /* Pattern built from DARKER blues, not lighter ones. White washes over the
     band read nicely but they lift the backdrop: a .16 wash over #096ac9 drops
     white body copy to 4.01:1, under AA. Darkening shapes raise contrast
     instead (5.4:1 and up), so the pattern can be as strong as it likes.
     The single light wash is confined to the right, behind the cut-out, where
     no text sits. All CSS — no image request, no tiling seam. */
  background:
    radial-gradient(64% 96% at 16% 6%,   rgba(3, 40, 82, .26), transparent 62%),
    radial-gradient(52% 84% at 78% 104%, rgba(3, 40, 82, .30), transparent 64%),
    radial-gradient(40% 70% at 46% 96%,  rgba(3, 40, 82, .18), transparent 66%),
    radial-gradient(26% 62% at 96% 26%,  rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--mb-blue) 0%, var(--mb-blue-700) 100%);
}

/* Long sweeping arcs, drawn as oversized ellipse outlines. Darker blue, so
   they add depth without touching text contrast. */
.mb-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 150% at -8% 118%, transparent 57%, rgba(3, 40, 82, .20) 58%, rgba(3, 40, 82, .20) 63%, transparent 64%),
    radial-gradient(112% 145% at 6% -28%, transparent 61%, rgba(3, 40, 82, .16) 62%, rgba(3, 40, 82, .16) 66%, transparent 67%),
    radial-gradient(96% 132% at 110% 18%, transparent 54%, rgba(255, 255, 255, .10) 55%, rgba(255, 255, 255, .10) 60%, transparent 61%);
}

/* Fine dot grid. Masked to the right half so the densest texture sits behind
   the cut-out rather than under the copy. */
.mb-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, .14) 1.3px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
}

.mb-band__grid {
  position: relative;
  z-index: 1;
  --mb-band-pb: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) auto;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
  padding-block: var(--mb-band-pb);
}

.mb-band h2 { color: #fff; font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.25rem); margin-bottom: .875rem; }
.mb-band p { color: rgba(255, 255, 255, .86); font-size: .9375rem; }

.mb-band__meta { display: grid; gap: .75rem; margin-top: 1.5rem; }
.mb-band__meta a,
.mb-band__meta span {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .92);
}
.mb-band__meta a:hover { color: #fff; text-decoration: underline; }

.mb-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.mb-social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  transition: background-color .2s var(--mb-ease), transform .2s var(--mb-ease);
}
.mb-social a:hover { background: #fff; color: var(--mb-blue); transform: translateY(-2px); }

/* Form on the blue band, inside its own translucent panel — the framed
   treatment from the reference comp. */
.mb-form {
  display: grid;
  gap: .75rem;
  padding: clamp(1.125rem, 2vw, 1.75rem);
  border-radius: 20px;
  /* .08 not .10: a .10 white panel over the lightest point of the band puts
     white labels at 4.48:1, a hair under AA. At .08 the worst case is 4.65:1
     and the border plus shadow still carry the framed look. */
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 12px 40px rgba(3, 40, 82, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.mb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mb-field { display: grid; gap: .3rem; }
.mb-field > label { font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.mb-input {
  width: 100%;
  padding: .8125rem .9375rem;
  border-radius: var(--mb-r-sm);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  transition: border-color .2s var(--mb-ease), background-color .2s var(--mb-ease);
}
.mb-input::placeholder { color: rgba(255, 255, 255, .78); }
.mb-input:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, .2);
  outline: none;
}
textarea.mb-input { resize: vertical; min-height: 92px; }

.mb-form__msg {
  display: none;
  padding: .625rem .875rem;
  border-radius: var(--mb-r-sm);
  background: rgba(255, 255, 255, .95);
  color: #b3261e;
  font-size: .8125rem;
}

.mb-band__art {
  position: relative;
  align-self: end;
  display: flex;
  align-items: flex-end;
  /* Cancels the grid's bottom padding so the cut-out stands on the floor of
     the blue box instead of hovering in the middle of it. */
  margin-bottom: calc(-1 * var(--mb-band-pb));
}

/* Boxed glyphs around the cut-out. Glass on blue, so they use a white tint
   rather than the light-backdrop treatment used elsewhere. */
.mb-band__orbit {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .17);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 8px 24px rgba(3, 40, 82, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: #fff;
  animation: mb-bob 7s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-band.is-visible .mb-band__orbit { animation-play-state: running; }
.mb-band__orbit svg { width: 20px; height: 20px; }
/* Kept inside the art column so none of them lands on the form. */
.mb-band__orbit--a { top: 4%;  left: -6%;  animation-delay: -.7s; }
.mb-band__orbit--b { top: 42%; left: -10%; animation-delay: -3.2s; animation-duration: 8s; }
.mb-band__orbit--c { top: 18%; right: -7%; animation-delay: -5.1s; animation-duration: 7.6s; }
/* Sized by height so the tall 1:4 cut-out cannot stretch the band open. */
.mb-band__art img {
  height: clamp(260px, 28vw, 380px);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .22));
}

/* ── 13 · FAQ ──────────────────────────────────────────────────────────── */
.mb-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}
.mb-faq__col { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); align-content: start; }

.mb-faq__item {
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-md);
  box-shadow: var(--mb-shadow-xs);
  overflow: hidden;
  transition: border-color .25s var(--mb-ease), box-shadow .25s var(--mb-ease);
}
.mb-faq__item[open] { border-color: #cfe3fa; box-shadow: var(--mb-shadow-sm); }

.mb-faq__q {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1.0625rem 1.125rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--mb-font-head);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--mb-ink);
  line-height: 1.45;
}
.mb-faq__q::-webkit-details-marker { display: none; }
.mb-faq__num { color: var(--mb-blue); font-weight: 600; flex: none; }
.mb-faq__sign {
  margin-left: auto;
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--mb-blue);
  transition: transform .25s var(--mb-ease);
}
.mb-faq__item[open] .mb-faq__sign { transform: rotate(45deg); }

.mb-faq__a {
  padding: 0 1.125rem 1.125rem 2.6rem;
  font-size: .875rem;
  color: var(--mb-muted);
  line-height: 1.7;
}

/* ── 14 · CLOSING CTA ──────────────────────────────────────────────────── */
.mb-closing {
  position: relative;
  overflow: hidden;
  /* Base: tinted ground plus a soft glow that lifts the cut-out off it. */
  background:
    radial-gradient(38% 60% at 82% 34%, rgba(46, 139, 240, .20), transparent 66%),
    var(--mb-blue-50);
}

/* Concentric halo rings radiating from behind the figure.

   Every mask in this section is cut so the pattern stops before the copy
   column does. Measured: the right-most inked text (the stat row) ends at
   55.8% of the section width, so the decoration fades out by ~57%. That is
   a contrast constraint, not a taste one — muted body text sits at 4.67:1
   on the flat tint, and even a 10%-alpha hairline crossing a glyph stem
   drops it to 4.07:1, under AA. Keeping the texture off the text is the
   only way to have both. */
.mb-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 80% 52%,
    transparent 0 46px,
    rgba(9, 106, 201, .10) 46px 48px);
  -webkit-mask-image: radial-gradient(28% 100% at 80% 52%, #000 20%, transparent 66%);
          mask-image: radial-gradient(28% 100% at 80% 52%, #000 20%, transparent 66%);
  /* Breathe the whole ring field from the same point the gradient is
     centred on, so the rings widen and settle instead of sliding. It is a
     transform on one composited layer — the gradient is never repainted. */
  transform-origin: 80% 52%;
  will-change: transform;
  animation: mb-rings-breathe 12s var(--mb-ease) infinite;
}

/* Sonar rings: single hairlines that expand out from behind the figure and
   fade. They carry the same mask as the static field, so they stop well
   short of the copy column for the contrast reason given above. */
.mb-closing__rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(28% 100% at 80% 52%, #000 20%, transparent 66%);
          mask-image: radial-gradient(28% 100% at 80% 52%, #000 20%, transparent 66%);
}
.mb-closing__rings span {
  position: absolute;
  left: 80%;
  top: 52%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 1.5px solid rgba(9, 106, 201, .30);
  opacity: 0;
  will-change: transform, opacity;
  animation: mb-ring-ping 9s var(--mb-ease) infinite;
}
/* A third of a cycle apart, so one ring is always mid-flight. */
.mb-closing__rings span:nth-child(2) { animation-delay: -3s; }
.mb-closing__rings span:nth-child(3) { animation-delay: -6s; }

@keyframes mb-rings-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
/* Ends where it starts — invisible — so the reduced-motion rule below can
   collapse it to a single 0.001ms run and simply leave no ring behind. */
@keyframes mb-ring-ping {
  0%   { transform: scale(.3); opacity: 0; }
  10%  { opacity: .9; }
  70%  { opacity: .28; }
  100% { transform: scale(6); opacity: 0; }
}

/* Keep the content above the pattern layer. */
.mb-closing__grid { position: relative; z-index: 1; }
.mb-closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.mb-closing__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* The left column is wide now, so cap the measure — 860px lines are hard to
   track back from. */
.mb-closing .mb-lede { max-width: 40rem; }
.mb-steps li > span:last-child { max-width: 34rem; }

/* Numbered onboarding steps. */
.mb-steps {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  counter-reset: step;
}
.mb-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .875rem;
  align-items: start;
  font-size: .875rem;
  color: var(--mb-muted);
  line-height: 1.6;
}
.mb-steps__n {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mb-blue);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
}
.mb-steps strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mb-ink);
  margin-bottom: .1rem;
}

/* Compact proof row. */
.mb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mb-line);
}
.mb-facts li { display: grid; gap: .1rem; }
.mb-facts b {
  font-family: var(--mb-font-head);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--mb-blue);
  line-height: 1.15;
}
.mb-facts span { font-size: .75rem; color: var(--mb-muted); line-height: 1.4; }
.mb-closing__art {
  position: relative;
  justify-self: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Stretch plus a negative margin on both ends: the column's margin box
     still matches the grid row (so it does not stretch the section), but its
     border box spans the block edge to edge. That makes the block's own
     height the percentage basis, so the figure can be sized as a plain share
     of it and still stand on the floor. */
  align-self: stretch;
  margin-block: calc(-1 * var(--mb-section-y));
}
.mb-closing__art img { width: auto; height: 75%; max-width: 100%; }

/* Orbiting accent icons around the closing artwork. */
.mb-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  color: var(--mb-blue);
  will-change: transform;
}
/* A soft halo that swells with the chip. Absolutely positioned so the grid
   above still centres the icon on its own. */
.mb-orbit::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  /* A ring, not a disc. The pseudo paints over the chip's own white fill, so
     the hole is cut to 58% of the 76px box — exactly the chip's half-width —
     and the glow only ever lands on the ground outside it. */
  background: radial-gradient(circle,
    transparent 0 58%, rgba(46, 139, 240, .30) 70%, transparent 88%);
  opacity: 0;
  animation: mb-orbit-glow 7s var(--mb-ease) infinite;
}
/* Each chip gets its own path and its own period. Three different durations
   that share no small common multiple, so the group never falls into step
   and starts reading as one rigid object. Drift is small — 20px at the
   widest — because these sit beside a photographed figure, and anything
   larger stops looking like it belongs in the same space. */
/* The art column spans the whole block, with the figure filling its bottom
   75%, so these are seated against that band rather than the column: 25% is
   the top of the figure, 100% its feet. */
.mb-orbit--1 { left: -12%; top: 33%; animation: mb-orbit-a 7s   var(--mb-ease) infinite -0.5s; }
.mb-orbit--2 { left: -10%; top: 66%; animation: mb-orbit-b 9.5s var(--mb-ease) infinite -2.5s; }
.mb-orbit--3 { right: -12%; top: 29%; animation: mb-orbit-c 8.2s var(--mb-ease) infinite -4s; }
.mb-orbit--1::before { animation-delay: -0.5s; }
.mb-orbit--2::before { animation-duration: 9.5s; animation-delay: -2.5s; }
.mb-orbit--3::before { animation-duration: 8.2s; animation-delay: -4s; }

/* The icon inside breathes a half-step behind its chip, which reads as the
   glyph settling into the move rather than being welded to the frame. */
.mb-orbit svg { animation: mb-orbit-icon 7s var(--mb-ease) infinite; }
.mb-orbit--2 svg { animation-duration: 9.5s; animation-delay: -1.2s; }
.mb-orbit--3 svg { animation-duration: 8.2s; animation-delay: -3s; }

/* Rise-and-lean: up, drifts right, tips back on the way down. */
@keyframes mb-orbit-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(7px, -11px, 0) rotate(3.5deg); }
  50%      { transform: translate3d(-3px, -18px, 0) rotate(-2deg); }
  75%      { transform: translate3d(-8px, -7px, 0) rotate(-3.5deg); }
}
/* Wider, slower figure-eight for the low-left chip, which has the most room. */
@keyframes mb-orbit-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  20%      { transform: translate3d(-9px, -8px, 0) rotate(-4deg) scale(1.04); }
  45%      { transform: translate3d(4px, -16px, 0) rotate(2deg) scale(1); }
  70%      { transform: translate3d(10px, -6px, 0) rotate(4deg) scale(.98); }
}
/* Mirrored lean for the right-hand chip so the pair does not drift as one. */
@keyframes mb-orbit-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%      { transform: translate3d(-8px, -13px, 0) rotate(-3deg); }
  55%      { transform: translate3d(2px, -20px, 0) rotate(2.5deg); }
  80%      { transform: translate3d(8px, -8px, 0) rotate(4deg); }
}
@keyframes mb-orbit-glow {
  0%, 100% { opacity: 0; transform: scale(.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}
@keyframes mb-orbit-icon {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.09) rotate(-3deg); }
}

/* ── 14b · LONG-FORM PROSE ─────────────────────────────────────────────── */
/* Policy and terms copy. Deliberately styles bare elements rather than asking
   for classes: these documents are edited by people (and by lawyers), and the
   markup has to survive being pasted around without carrying a class list.
   Selectors are depth-independent so the source can keep its own grouping
   wrappers. */
.mb-prose {
  max-width: 52rem;
  color: var(--mb-ink-soft);
  font-size: .9375rem;
  line-height: 1.75;
}
.mb-prose p,
.mb-prose ul,
.mb-prose ol,
.mb-prose table { margin: 0 0 1rem; }
.mb-prose h2 {
  font-family: var(--mb-font-head);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--mb-ink);
  margin: 2.5rem 0 .75rem;
  scroll-margin-top: 90px;
}
.mb-prose h3 {
  font-family: var(--mb-font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--mb-blue);
  margin: 1.5rem 0 .5rem;
}
.mb-prose ul,
.mb-prose ol { padding-left: 1.2rem; }
.mb-prose li { margin-bottom: .45rem; }
.mb-prose ul > li { list-style: disc; }
.mb-prose ol > li { list-style: decimal; }
.mb-prose strong { color: var(--mb-ink); font-weight: 600; }
.mb-prose a {
  color: var(--mb-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mb-prose table { border-collapse: collapse; font-size: .875rem; }
.mb-prose th,
.mb-prose td { border: 1px solid var(--mb-line); padding: .6rem .7rem; text-align: left; }
.mb-prose th { background: var(--mb-blue-50); color: var(--mb-ink); font-weight: 600; }
/* Wide tables scroll in their own box rather than pushing the page sideways. */
.mb-prose__scroll { overflow-x: auto; }

/* ── 15 · SITE FOOTER ──────────────────────────────────────────────────── */
.mb-footer {
  background: #fff;
  border-top: 1px solid var(--mb-line);
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 1.5rem;
}
.mb-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.mb-footer__brand img { width: 132px; margin-bottom: .875rem; }
.mb-footer__brand p { font-size: .875rem; color: var(--mb-muted); max-width: 22rem; }

.mb-footer h2 {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mb-ink);
  margin-bottom: .875rem;
}
.mb-footer li + li { margin-top: .5rem; }
.mb-footer__link,
.mb-footer address a,
.mb-footer address span {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--mb-muted);
  font-style: normal;
  transition: color .2s var(--mb-ease);
}
.mb-footer__link:hover,
.mb-footer address a:hover { color: var(--mb-blue); }
.mb-footer address { display: grid; gap: .5rem; }

.mb-footer__social { display: flex; gap: .5rem; margin-top: .25rem; }
.mb-footer__social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  transition: background-color .2s var(--mb-ease), color .2s var(--mb-ease);
}
.mb-footer__social a:hover { background: var(--mb-blue); color: #fff; }

.mb-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--mb-line);
  font-size: .8125rem;
  color: var(--mb-muted);
}
.mb-footer__bar a:hover { color: var(--mb-blue); }

/* Breadcrumb — small, above the footer credit, and mirrored in JSON-LD. */
/* align-items: center keeps the links, the "/" separators and the current
   page on one baseline — on touch screens the links are 44px tall tap
   targets, and with the default stretch the plain-text items rode up to the
   top of that box. */
.mb-crumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 .4rem; min-width: 0; font-size: .8125rem; color: var(--mb-muted); }
/* Always one line: the parent links keep their width and the current page
   — the last item, also the page's H1 just below — shortens with an
   ellipsis when the trail is wider than a narrow phone. */
.mb-crumbs > * { flex: none; white-space: nowrap; }
.mb-crumbs > [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── 15b · SUCCESS TOAST ───────────────────────────────────────────────── */
.mb-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: min(380px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid #cfe3fa;
  border-radius: 16px;
  box-shadow: var(--mb-shadow-lg);
  padding: .875rem 1.125rem;
}
.mb-toast p { font-size: .875rem; line-height: 1.45; color: var(--mb-ink); }
.mb-toast p span { color: var(--mb-muted); }
.mb-toast > svg { flex: none; }
.mb-toast__close {
  margin-left: auto;
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mb-muted);
}
.mb-toast__close:hover { color: var(--mb-ink); }

/* ── 16 · FLOATING CONTACT DOCK ────────────────────────────────────────── */
.mb-dock {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.25rem);
  bottom: clamp(.75rem, 2vw, 1.25rem);
  z-index: 50;
  display: grid;
  gap: .625rem;
}
.mb-dock__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--mb-shadow-md);
  transition: transform .22s var(--mb-ease);
}

/* Each button carries its own ring colour, so the halo reads as coming off
   that button rather than as a stray blue outline on a green circle. */
.mb-dock__btn--wa   { background: #25d366;        --mb-ring: rgba(37, 211, 102, .85); }
.mb-dock__btn--call { background: var(--mb-blue); --mb-ring: rgba(9, 106, 201, .80); }

/* Two rings per button, half a cycle apart so one is always travelling.
   1.6 is a deliberate ceiling: the dock sits clamp(.75rem, 2vw, 1.25rem) off
   the right edge, and 48px * (1.6 - 1) / 2 = 14px of overhang still clears
   the 12px gutter on the narrowest phones. */
.mb-dock__btn::before,
.mb-dock__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--mb-ring, rgba(255, 255, 255, .7));
  opacity: 0;
  pointer-events: none;
  animation: mb-dock-ping 2.6s var(--mb-ease) infinite;
}
.mb-dock__btn::after { animation-delay: -1.3s; }

/* A short beat every five seconds rather than perpetual motion. This dock is
   fixed over every page, and something that never stops moving in the corner
   of the eye is a nuisance to read past — so both keyframe sets do their work
   in the first fifth of the cycle and hold still for the rest. The two are
   offset by half a cycle so they never fire together. */
.mb-dock__btn--wa   { animation: mb-dock-pop  5s var(--mb-ease) infinite; }
.mb-dock__btn--call { animation: mb-dock-tilt 5s var(--mb-ease) infinite -2.5s; }

/* Dropping the animation outright, rather than pausing it, hands `transform`
   back to the rule below — an animation would otherwise keep overriding it.
   The idle keyframes sit at identity for most of the cycle, so there is
   nothing to jump from. Pseudo-elements do not inherit `animation`, so the
   rings keep pulsing while the button is hovered. */
.mb-dock__btn:hover { animation: none; transform: scale(1.08); }

/* All three end where they started — identity or invisible — so the
   reduced-motion rule can collapse them to a single 0.001ms run and leave
   the dock sitting perfectly still. */
@keyframes mb-dock-ping {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { opacity: .14; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes mb-dock-pop {
  0%, 16%, 100% { transform: scale(1); }
  4%            { transform: scale(1.14); }
  8%            { transform: scale(.96); }
  12%           { transform: scale(1.05); }
}
@keyframes mb-dock-tilt {
  0%, 18%, 100% { transform: rotate(0deg); }
  2%            { transform: rotate(-15deg); }
  5%            { transform: rotate(13deg); }
  8%            { transform: rotate(-10deg); }
  11%           { transform: rotate(7deg); }
  14%           { transform: rotate(-4deg); }
}

/* ── 17 · MOTION & REVEAL ──────────────────────────────────────────────── */
/* The hidden state is gated behind the `js` class that the inline snippet in
   <head> sets. If the script never runs — blocked, failed, or an unsupported
   browser — the page simply renders, rather than staying invisible behind an
   animation that will never be triggered. */
.mb-reveal { transition: opacity .55s var(--mb-ease), transform .55s var(--mb-ease); }
.js .mb-reveal { opacity: 0; transform: translateY(18px); }
.js .mb-reveal.is-in { opacity: 1; transform: none; }

/* Stagger children without per-element inline styles. */
.mb-reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mb *,
  .mb *::before,
  .mb *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .mb-reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — desktop-down. Every breakpoint below only relaxes the grid;
   the components themselves are fluid, so there is nothing else to restate.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .mb-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mb-band__art { display: none; }
}

@media (max-width: 980px) {
  .mb-header__bar { min-height: 62px; }

  .mb-burger { display: grid; margin-left: auto; }
  .mb-header__actions { display: none; }

  /* Off-canvas drawer */
  .mb-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    margin: 0;
    padding: 5rem 1.125rem 1.5rem;
    background: #fff;
    /* Rounded on the leading edge only — it reads as a panel sliding over the
       page rather than a second screen butted against it. */
    border-radius: 22px 0 0 22px;
    box-shadow: -24px 0 60px rgba(11, 34, 56, .18);
    transform: translateX(102%);
    transition: transform .34s var(--mb-ease);
    overflow-y: auto;
    z-index: 65;
  }
  .mb-nav[data-open="true"] { transform: none; }

  .mb-nav__label {
    display: block;
    position: absolute;
    top: 1.9rem;
    left: 1.5rem;
    margin: 0;
    font-family: var(--mb-font-head);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mb-muted);
  }

  .mb-nav__list { flex-direction: column; align-items: stretch; gap: .125rem; }
  /* Pill rows instead of ruled ones: dividers plus a hover fill reads busy at
     this size, and a filled row gives the current page somewhere to live. */
  .mb-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: .8rem .875rem;
    border-bottom: 0;
    border-radius: 12px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--mb-ink);
    transition: background-color .2s var(--mb-ease), color .2s var(--mb-ease);
  }
  .mb-nav__link:hover,
  .mb-nav__link[aria-current="page"] { background: var(--mb-blue-50); color: var(--mb-blue); }
  .mb-nav__link::after { display: none; }

  .mb-nav__cta {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mb-line);
    display: grid;
    gap: .625rem;
  }

  /* Rows settle in behind the panel. Gated on [data-open] so the hidden state
     only ever applies to a drawer that is off-screen anyway. */
  .mb-nav__list > li,
  .mb-nav__cta {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .32s var(--mb-ease), transform .32s var(--mb-ease);
  }
  .mb-nav[data-open="true"] .mb-nav__list > li,
  .mb-nav[data-open="true"] .mb-nav__cta { opacity: 1; transform: none; }
  .mb-nav[data-open="true"] .mb-nav__list > li:nth-child(1) { transition-delay: .07s; }
  .mb-nav[data-open="true"] .mb-nav__list > li:nth-child(2) { transition-delay: .11s; }
  .mb-nav[data-open="true"] .mb-nav__list > li:nth-child(3) { transition-delay: .15s; }
  .mb-nav[data-open="true"] .mb-nav__list > li:nth-child(4) { transition-delay: .19s; }
  .mb-nav[data-open="true"] .mb-nav__list > li:nth-child(5) { transition-delay: .23s; }
  .mb-nav[data-open="true"] .mb-nav__list > li:nth-child(6) { transition-delay: .27s; }
  .mb-nav[data-open="true"] .mb-nav__cta { transition-delay: .31s; }

  /* The mega menu becomes an inline accordion panel inside the drawer. */
  .mb-mega {
    position: static;
    left: auto;
    right: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: .5rem 0 .75rem;
    display: none;
  }
  .mb-mega[data-open="true"] { display: block; transform: none; }
  .mb-mega__grid { grid-template-columns: 1fr; max-height: 42vh; }
  .mb-mega__foot { display: none; }

  /* Below the header's own stacking context (z-index 60) — the drawer lives
     inside that context, so a scrim above it would grey the drawer out. This
     also keeps the burger clickable to close. */
  .mb-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(11, 34, 56, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--mb-ease), visibility .3s;
  }
  .mb-scrim[data-open="true"] { opacity: 1; visibility: visible; }

  body.mb-locked { overflow: hidden; }
}

@media (max-width: 1080px) {
  .mb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-features > .mb-feature:last-child:nth-child(3n + 1) { grid-column: auto; }
  .mb-features > .mb-feature:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--mb-features-gap)) / 2);
  }
}

@media (max-width: 900px) {
  .mb-hero__grid { grid-template-columns: 1fr; }
  .mb-hero__art {
    min-height: 0;
    margin-top: 2rem;
    /* Same trick the desktop rule uses: cancel the section's bottom padding so
       the cut-out stands ON the block's edge. margin-bottom:0 here was what
       left it hovering in the middle of the hero at tablet and phone sizes. */
    margin-bottom: calc(-1 * var(--mb-hero-pb));
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 1rem;
  }
  img.mb-hero__doctor {
    position: relative;
    z-index: 3;
    align-self: end;
    height: auto;
    width: clamp(110px, 30vw, 230px);
    /* Deliberately still. The cut-out reads as a person standing on the floor
       of the block, and a figure that floats off its own baseline breaks that
       — the motion in this banner belongs to the cards and the mock. */
  }
  /* Card --b is anchored to the bottom-left, which is where the cut-out now
     stands; only the top-right one has anywhere to go once the art is two
     columns. It keeps its drift, so the banner still moves here. */
  .mb-hero__card--b { display: none; }
  .mb-hero__card--a { right: 0; top: 0; width: min(190px, 54%); }

  img.mb-mock {
    /* The dashboard slides left under the doctor by --ov and grows by the
       same amount, so he stands in front of its edge (as on desktop) while
       it still reaches the right of its column. A negative margin on the
       doctor would not work: the grid sizes his track from his width alone. */
    --ov: clamp(28px, 9vw, 72px);
    position: relative;
    z-index: 1;
    width: calc(100% + var(--ov));
    max-width: calc(560px + var(--ov));
    margin-inline: calc(-1 * var(--ov)) auto;
    /* The mock is a floating panel, not a figure standing on the floor, so it
       lifts clear of the edge the cut-out sits on — and its shadow stays
       inside the hero's overflow:hidden rather than being sliced off. */
    margin-bottom: clamp(1.25rem, 4vw, 2.25rem);
  }

  .mb-split { grid-template-columns: 1fr; }
  .mb-split__art {
    --bleed: 0px;
    order: -1;
    /* Without a cap the art fills the row and the percentage-positioned
       cards drift far away from the photo they belong to. */
    max-width: 620px;
    margin-inline: auto;
    width: 100%;
  }

  .mb-closing__grid { grid-template-columns: 1fr; }
  .mb-closing__art { order: -1; align-self: auto; margin-block: 0; }
  /* No block height to take a percentage of once the columns stack. */
  .mb-closing__art img { height: auto; width: clamp(230px, 58vw, 330px); }
  /* The ring mask is cut horizontally; once the columns stack it no longer
     keeps the pattern off the copy, so it comes off entirely. */
  .mb-closing::before,
  .mb-closing__rings { display: none; }
  .mb-facts { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }

  .mb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* WCAG 2.5.8 wants 24x24 CSS px on a pointer target. These are single
     lines of .875rem text, so they measured 23-25px tall — under it, and
     genuinely fiddly to hit on a phone. min-height rather than padding, so
     the icon stays optically centred against the label. */
  .mb-footer__link,
  .mb-footer address a,
  .mb-band__meta a,
  .mb-crumbs a,
  .mb-footer__bar p a { min-height: 36px; }
  .mb-footer li + li { margin-top: .125rem; }

  /* Backdrop blur is the most expensive thing on this page for a low-end
     phone, and at this size the glass edge is barely visible. Swap it for a
     near-opaque fill — same colour, none of the compositing cost. */
  .mb-card,
  .mb-feature__overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .92);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, .1),
      inset 0 1px 0 rgba(255, 255, 255, .5);
  }

  .mb-features { grid-template-columns: minmax(0, 1fr); }
  /* The two-column rule above centres a lone last card at half width. Its
     :nth-child test makes it a (0,4,0) selector, so a plain :last-child reset
     at (0,3,0) loses to it regardless of source order and the last feature
     stayed half width in a single column. Match the specificity instead. */
  .mb-features > .mb-feature:last-child,
  .mb-features > .mb-feature:last-child:nth-child(2n + 1) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
  .mb-band__grid { grid-template-columns: 1fr; }
  .mb-band { border-radius: 0; }
  .mb-featurehead { align-items: flex-start; }
  .mb-carousel__btn--prev { left: 0; }
  .mb-carousel__btn--next { right: 0; }
}

@media (max-width: 560px) {
  .mb-split__card--tl,
  .mb-split__card--tr,
  .mb-split__card--br,
  .mb-trust { display: none; }
  .mb-split__art::before { inset: -4%; }
  /* Tile plus a two-line label needs more than half of a 560px column. */
  .mb-perks { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

  .mb-form__row { grid-template-columns: 1fr; }
  .mb-hero__cta .mb-btn { flex: 1 1 100%; }

  /* Three stat tiles side by side clip "₹24,500" at phone widths, and the
     chart needs the full width to stay readable. */
  .mb-hero__usps { margin-bottom: 2.5rem; }

  /* The cut-out stays at phone widths. Both columns get tighter rather than
     one being dropped: the doctor takes ~27vw and the mock the rest, so the
     banner keeps the same two-part composition it has everywhere else. */
  .mb-hero__art { gap: .625rem; }
  /* A ~130px card over a ~215px mock is unreadable, so the drift moves to the
     mock alone down here — still motion, nothing illegible. */
  .mb-hero__card--a { display: none; }

  /* The four USPs are a shrinking flex row on wide screens. Below this they
     were being squeezed to 72px each, which broke "Dedicated Support" onto
     two cramped lines and pushed it into the corner the contact dock sits
     in. auto-fit lets the row find its own column count instead: two on a
     375px phone, three by 560px, without another hard breakpoint. */
  .mb-hero__usps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem 1rem;
  }
  .mb-usp { width: auto; }
  .mb-footer__grid { grid-template-columns: 1fr; }
  .mb-plan__flag { font-size: .75rem; }

  /* The dock is fixed over the copy, and on a 375px screen a 48px button
     plus its halo covers a real share of the line it lands on. 42px still
     clears the 24px touch minimum with room to spare. */
  .mb-dock { gap: .5rem; }
  .mb-dock__btn { width: 42px; height: 42px; }
  .mb-dock__btn svg { width: 21px; height: 21px; }
}

@media (max-width: 400px) {
  /* Three segments instead of two — trim the padding before the control
     starts wrapping out of the centred head block. */
  .mb-toggle__btn { padding-inline: .8rem; font-size: .8125rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   99 · RESPONSIVE QUALITY LAYER
   Site-wide rules from a measured audit (11 page types × 360–1920px).
   Loaded by every page, the blog included, so they apply everywhere.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · No iOS auto-zoom. Safari zooms into any field set below 16px the
   moment it is tapped, and the page stays zoomed after the keyboard closes.
   !important because form fields are styled in several sheets at higher
   specificity, and this is an accessibility floor, not a style choice. */
@media (max-width: 767px) {
  .mb input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  .mb select,
  .mb textarea { font-size: 16px !important; }
}

/* 2 · 44px touch targets wherever the pointer is a finger. Desktop mouse
   users keep the compact sizes; phones, tablets and touch laptops get
   controls that can be hit without zooming. */
@media (max-width: 1023px), (pointer: coarse) {
  .mb-logo { display: inline-flex; align-items: center; min-height: 44px; }
  /* `.mb` prefix: page sheets that load later set their own min-heights
     (40px on the contact page's action buttons) at equal specificity. */
  .mb .mb-btn,
  .mb .mb-toggle__btn,
  .mb .mbp-tag,
  .mb .mbp-pill,
  .mb .mbp-inp,
  .mb .mb-bcard__more,
  .mb .mpx-tabs button { min-height: 44px; }
  .mb-carousel__btn,
  .mb-dock__btn,
  .mb .mbp-stepper button { width: 44px; height: 44px; }
  .mb-social a,
  .mb-footer__social a { width: 44px; height: 44px; }
  .mb-footer__link,
  .mb-footer address a,
  .mb-band__meta a,
  .mb-crumbs a,
  .mpx-related a,
  .mpx-link,
  .mb .mbp-promo a { display: inline-flex; align-items: center; min-height: 44px; }
  /* The integration cards' arrow is an 18px glyph; pad it out to a full
     target without moving the glyph. */
  .mb .mbp-int__arrow { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -15px -13px; }
}

/* 3 · A readable measure. Long paragraphs are capped near 70 characters a
   line; centred notes re-centre themselves once they are narrower than
   their container. */
.mb-lede { max-width: 68ch; }
.mb-head--center .mb-lede,
.mb-shell > .mb-lede { margin-inline: auto; }
.mbp-promo p,
.mbp-notice p,
.mbp-form__legal,
.mbp-calc__foot,
.mpx-about__text,
.mpx-lede,
.legal-section p,
.highlight-box p { max-width: 72ch; }
.mpx-reviewed { max-width: 72ch; margin-inline: auto; }

/* The wide feature card and the dashboard spotlight copy run past a
   comfortable measure on large monitors. */
.mb-bcard--wide .mb-bcard__desc,
.mb-bcard--span2 .mb-bcard__desc,
.mb-spotlight p { max-width: 64ch; }

/* ── Hero on phones ─────────────────────────────────────────────────────
   Below 640px the background waves and the blurred ribbon read as stray
   shapes behind a stacked layout, so they go; the hero keeps its soft
   gradient. The dashboard is narrowed so it sits fully inside the content
   edge (it was overhanging the screen and clipping its own corner), and
   the doctor drops the desktop's leftward nudge. */
@media (max-width: 640px) {
  .mb-hero__waves,
  .mb-hero::after { display: none; }

  img.mb-hero__doctor { left: 0; }
  img.mb-mock {
    --ov: 22px;
    width: calc(100% - 6px);
    max-width: 420px;
    margin-inline: calc(-1 * var(--ov)) 0;
    /* Clears the hero's bottom edge even at the low point of its drift
       animation, so the last row of the dashboard is never clipped. */
    margin-bottom: 2.5rem;
    justify-self: start;
    border-radius: 14px;
  }
}

/* "One platform for the whole clinic": icons on one line, the caption on
   the next — at every width, instead of the caption squeezing in beside
   the icons and wrapping into a narrow column. */
.mb-proof { flex-direction: column; align-items: flex-start; gap: .75rem; }
.mb-proof__text { flex: none; }

/* ── Hero fits one screen (desktop) ───────────────────────────────────────
   Header (69px) + hero must not exceed the window height, so on two-column
   layouts every vertical size is capped by the viewport HEIGHT as well as
   its width: a 1920×945 or 1366×650 laptop screen shows the whole banner,
   USP row and doctor without scrolling. */
@media (min-width: 901px) {
  .mb-hero {
    --mb-hero-pb: clamp(1.25rem, 3.2vh, 2.5rem);
    padding-block: clamp(1.25rem, 3.6vh, 2.75rem) var(--mb-hero-pb);
  }
  .mb-hero .mb-eyebrow { margin-bottom: clamp(.5rem, 1.6vh, 1rem); }
  .mb-hero__title {
    font-size: clamp(2rem, min(1rem + 2.6vw, 6.4vh), 3.6rem);
    margin-bottom: clamp(.625rem, 1.6vh, 1.1rem);
  }
  .mb-hero__lede {
    font-size: clamp(.95rem, min(.85rem + .35vw, 2.05vh), 1.2rem);
    margin-bottom: clamp(1rem, 2.6vh, 1.75rem);
  }
  .mb-hero__cta   { margin-bottom: clamp(1rem, 3vh, 2rem); }
  .mb-hero__usps  { margin-bottom: clamp(1rem, 3vh, 2rem); gap: .75rem clamp(1rem, 2.4vw, 2rem); }
  .mb-usp__icon   { width: clamp(44px, min(3.4vw, 6.2vh), 62px); height: clamp(44px, min(3.4vw, 6.2vh), 62px); }
  .mb-hero__art {
    min-height: clamp(400px, min(50vw, calc(100svh - 69px - 2.5rem)), 860px);
  }
}
/* Short laptop screens (1366×657 and similar): the text column is the tall
   one, so it gives up a little air rather than spill past the fold. */
@media (min-width: 901px) and (max-height: 720px) {
  .mb-hero { padding-top: .875rem; }
  .mb-hero__lede  { font-size: .9375rem; line-height: 1.5; margin-bottom: .875rem; }
  .mb-hero__cta   { margin-bottom: .875rem; }
  .mb-hero__usps  { margin-bottom: .875rem; }
  .mb-usp         { gap: .35rem; }
  .mb-usp__icon   { width: 42px; height: 42px; border-radius: 13px; }
}

/* ── Video lightbox (built by medbus-home.js on [data-video]) ──────────── */
.mb-video {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.mb-video::backdrop {
  background: rgba(6, 18, 31, .82);
  backdrop-filter: blur(4px);
}
.mb-video[open] { animation: mb-video-in .28s var(--mb-ease, ease) both; }
@keyframes mb-video-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.mb-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Keeps the whole 16:9 frame on screen in landscape phones. */
  max-height: calc(100vh - 96px);
  margin-inline: auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.mb-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mb-video__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mb-video-spin .8s linear infinite;
}
.mb-video__frame.is-loaded .mb-video__spinner { display: none; }
@keyframes mb-video-spin { to { transform: rotate(360deg); } }
.mb-video__close {
  position: absolute;
  top: -48px;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.mb-video__close:hover,
.mb-video__close:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
@media (prefers-reduced-motion: reduce) {
  .mb-video[open], .mb-video__spinner { animation: none; }
}

/* ── Custom-quote band (partials/custom-quote) — full width under a plan grid ── */
.mb-quote {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 2.6vw, 1.85rem) clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  background: linear-gradient(120deg, var(--mb-blue-100) 0%, #fff 75%);
}
.mb-quote__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--mb-blue);
  color: #fff;
}
.mb-quote__copy .mb-h3 { margin: 0 0 .3rem; }
.mb-quote__copy p { margin: 0; font-size: .9375rem; color: var(--mb-ink-soft); max-width: 58ch; }
.mb-quote__actions { display: flex; flex-wrap: wrap; gap: .625rem; justify-content: flex-end; }

.mb-btn--wa {
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .30);
}
.mb-btn--wa:hover { background: #1ebe5b; box-shadow: 0 8px 22px rgba(37, 211, 102, .36); }

@media (max-width: 1080px) {
  .mb-quote { grid-template-columns: auto 1fr; }
  .mb-quote__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .mb-quote { grid-template-columns: 1fr; }
  .mb-quote__actions { flex-direction: column; }
  .mb-quote__actions .mb-btn { width: 100%; }
}

/* Taglines differ in length, so pin each card's CTA to the bottom to keep the row aligned. */
.mb-plan > .mb-btn:last-child { margin-top: auto; }