@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   MEDBUS — PAGE SUITE (v3)
   Integrations · Pricing · FAQ · Contact

   One stylesheet rather than four. These four pages link to each other
   constantly (pricing → FAQ → contact → integrations), so a single file is
   fetched once and then served from cache for every hop between them; four
   separate files would pay a fresh request on each. It loads AFTER
   medbus-home.css and only on these pages, so nothing here sits on the home
   page's critical path.

   Everything below is namespaced `mbp-` so it can never collide with the
   shared `mb-` components, and every colour, radius, shadow and easing comes
   from the tokens in medbus-home.css — there are no new palette values.

   Sections
     01  Page hero (one shell, four configurations)
     02  Motion primitives
     03  Toolbar — search + filter rail
     04  Integration catalogue
     05  Step flow
     06  Data-sharing notice
     07  Pricing — plans, compare table, calculator, testimonials
     08  FAQ — two-column layout, sidebar, accordions
     09  Contact — form card, channels, office, resources
     10  Closing bands
     11  Responsive
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · PAGE HERO ─────────────────────────────────────────────────────
   A single hero shell the four pages configure rather than four heroes.
   `--mbp-art` is the width of the right-hand column; a page with no artwork
   uses .mbp-hero--center and the grid collapses to one centred column. */
.mbp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 5vw, 4.25rem) clamp(2.5rem, 6vw, 4.75rem);
  background:
    radial-gradient(120% 80% at 78% 0%, #eaf3ff 0%, rgba(234, 243, 255, 0) 62%),
    linear-gradient(180deg, #f2f8ff 0%, #fbfdff 100%);
}

/* Soft wave floor, drawn rather than fetched. */
.mbp-hero__waves {
  position: absolute;
  inset: auto 0 -1px 0;
  z-index: -1;
  pointer-events: none;
  line-height: 0;
}
.mbp-hero__waves svg { width: 100%; height: clamp(90px, 14vw, 190px); }

.mbp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--mbp-art, .82fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.mbp-hero--center .mbp-hero__grid { grid-template-columns: minmax(0, 1fr); }
/* Wider than the split hero's column so a centred headline breaks into two or
   three lines rather than four, but the lede underneath keeps a readable
   measure of its own. */
.mbp-hero--center .mbp-hero__copy { margin-inline: auto; text-align: center; max-width: 52rem; }
.mbp-hero--center .mbp-hero__lede { max-width: 44rem; margin-inline: auto; }

.mbp-hero__copy { max-width: 40rem; }
.mbp-hero__title {
  font-size: clamp(2rem, 1.2rem + 2.9vw, 3.35rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.mbp-hero__lede {
  font-size: clamp(1rem, .95rem + .28vw, 1.125rem);
  line-height: 1.72;
  color: var(--mb-muted);
  margin-bottom: 1.5rem;
}

/* Inline reassurance row: quick setup · secure · every plan. */
.mbp-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-top: 1.5rem;
}
.mbp-hero--center .mbp-checks { justify-content: center; }
.mbp-checks li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mb-ink-soft);
}
.mbp-checks svg { flex: none; color: var(--mb-blue); }

/* ── Hero artwork ─────────────────────────────────────────────────────
   The cut-out sits on a soft blue disc; tool logos orbit it on their own
   drift keyframes. Every decorative layer is aria-hidden in the markup, so
   this is purely a paint concern. */
.mbp-hero__art {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(300px, 34vw, 480px);
  /* The float cards sit outside the figure's own box; without this the one
     nearest the top is clipped by the section edge. */
  padding-block: .75rem;
}

/* The soft disc the cut-out stands on. Sized off the art box rather than off
   the figure, so it holds still while the figure scales with the column, and
   pushed slightly below the baseline so the figure's flat bottom edge lands
   inside it rather than in open white. */
.mbp-hero__art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5%;
  translate: -50% 0;
  width: min(102%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #d8e7fa 0%, #e7f1ff 54%, rgba(231, 241, 255, 0) 71%);
  z-index: 0;
}
.mbp-hero__figure {
  position: relative;
  z-index: 1;
  width: min(100%, 350px);
  height: auto;
  filter: drop-shadow(0 22px 40px rgba(9, 106, 201, .16));
  /* The waist-up cut-outs end in a straight horizontal cut at the hip. Fading
     the last stretch dissolves that edge, instead of leaving a torso sitting
     on a hard line in the middle of the page. */
  -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 87%, transparent 100%);
}

/* ── Full-body variant ────────────────────────────────────────────────
   A standing figure trims to roughly 1:2.4, so sizing it by width would ask
   the row for twice the height it has. These are sized by HEIGHT and left to
   find their own width — and they need no bottom fade, because the shoes are
   already a natural edge rather than a cut. */
.mbp-hero__art--tall { min-height: clamp(360px, 40vw, 520px); }
.mbp-hero__figure--tall {
  width: auto;
  max-width: 100%;
  height: clamp(340px, 37vw, 500px);
  -webkit-mask-image: none;
          mask-image: none;
}

/* Soft contact shadow so the figure stands on the page instead of hovering
   over it. */
.mbp-hero__shadow {
  position: absolute;
  left: 50%;
  bottom: 3%;
  translate: -50% 0;
  z-index: 0;
  width: min(62%, 220px);
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(9, 106, 201, .2) 0%, rgba(9, 106, 201, 0) 70%);
}

/* Expanding halo rings behind the figure — a slow outward signal pulse, which
   is the right motif for the page whose whole job is "get in touch". Two
   rings, offset by half the cycle, so one is always mid-flight. Both are
   transform/opacity only, so the whole effect stays on the compositor. */
.mbp-hero__pulse {
  position: absolute;
  left: 50%;
  bottom: 6%;
  translate: -50% 0;
  z-index: 0;
  width: min(92%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(9, 106, 201, .38);
  opacity: 0;
}
.is-visible .mbp-hero__pulse { animation: mbp-halo 5.4s var(--mb-ease) infinite; }
.is-visible .mbp-hero__pulse--2 { animation-delay: 2.7s; }
@keyframes mbp-halo {
  0%   { opacity: 0;   transform: scale(.55); }
  30%  { opacity: .9; }
  100% { opacity: 0;   transform: scale(1.15); }
}

/* Orbiting third-party logo chips. Positions come from --x / --y set on the
   element, so the markup stays declarative and the CSS carries no per-logo
   rules that would need editing when the catalogue changes. */
.mbp-orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(38px, 4.4vw, 54px);
  aspect-ratio: 1;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
  translate: -50% -50%;
}
.mbp-orb img { width: 58%; height: 58%; object-fit: contain; }
.mbp-orb svg { width: 56%; height: 56%; }
.is-visible .mbp-orb {
  animation: mbp-drift 7s var(--mb-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1s);
}
@keyframes mbp-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Dashed ring behind the orbit, purely decorative. */
.mbp-hero__ring {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  width: min(96%, 425px);
  aspect-ratio: 1;
  border: 1.5px dashed rgba(9, 106, 201, .22);
  border-radius: 50%;
  z-index: 0;
}
.is-visible .mbp-hero__ring { animation: mbp-spin 46s linear infinite; }
@keyframes mbp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Small status card pinned to the artwork. */
.mbp-float {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .7rem .9rem;
  border-radius: var(--mb-r-md);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
  translate: -50% -50%;
  white-space: nowrap;
}
.is-visible .mbp-float {
  animation: mbp-drift 8.5s var(--mb-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1s);
}
.mbp-float b { display: block; font-size: .8125rem; font-weight: 700; color: var(--mb-ink); }
/* The :not() matters. Unqualified, this rule also matches the icon disc — it
   is a <span> too — and `display: block` beats the disc's own `display: grid`
   on specificity, which quietly knocks its glyph off centre. */
.mbp-float span:not(.mbp-float__dot) { display: block; font-size: .6875rem; color: var(--mb-muted); }
.mbp-float__dot {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--mb-a-green);
  color: var(--mb-a-green-fg);
}

/* Tile glyphs. One rule so every tile on these pages centres its icon at the
   same optical size, whatever width/height the inline SVG happens to carry —
   and, more importantly, so an <svg> that has only a viewBox gets a size at
   all. Without an intrinsic size such an SVG lays out at the SVG default of
   300×150 and spills straight out of its 46px tile, which is what the FAQ
   sidebar's lightbulb was doing.

   Height is `auto`, not a second percentage: a percentage height on a grid
   item resolves against a track that is itself sized by its content, and the
   browser then centres the glyph using the pre-resolution height — which
   pinned the sidebar icons to the top of their tiles. The viewBox supplies the
   aspect ratio, so width alone is enough. */
.mb-tile > svg,
.mb-tile > img { width: 48%; height: auto; object-fit: contain; }

/* Open-hours note under the contact hero copy. Replaces the hand-written
   aside that used to sit there. */
.mbp-hours {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.75rem;
  padding: .7rem 1.1rem .7rem .9rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--mb-muted);
}
.mbp-hours b { display: block; font-size: .875rem; font-weight: 700; color: var(--mb-ink); }

/* Metric strip under a centred hero. */
.mbp-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.25rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.mbp-stats li { text-align: center; }
.mbp-stats b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem);
  font-weight: 700;
  color: var(--mb-ink);
  letter-spacing: -.02em;
}
.mbp-stats span { font-size: .8125rem; color: var(--mb-muted); }

/* ── 02 · MOTION PRIMITIVES ────────────────────────────────────────────
   Cheap, composited-only effects. Nothing here animates layout. */
.mbp-lift {
  transition: transform .24s var(--mb-ease), box-shadow .24s var(--mb-ease),
              border-color .24s var(--mb-ease);
}
.mbp-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--mb-shadow-md);
  border-color: rgba(9, 106, 201, .28);
}

@keyframes mbp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── 03 · TOOLBAR — SEARCH + FILTER RAIL ───────────────────────────────── */
.mbp-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 26rem);
}
.mbp-search--wide { width: min(100%, 40rem); margin-inline: auto; }
.mbp-search__icon {
  position: absolute;
  left: .95rem;
  display: grid;
  place-items: center;
  color: var(--mb-muted);
  pointer-events: none;
}
.mbp-search__input {
  width: 100%;
  min-height: 48px;
  padding: .7rem 2.75rem;
  border-radius: var(--mb-r-pill);
  border: 1px solid var(--mb-line);
  background: #fff;
  box-shadow: var(--mb-shadow-xs);
  font-family: var(--mb-font-body);
  font-size: .9375rem;
  color: var(--mb-ink);
  transition: border-color .2s var(--mb-ease), box-shadow .2s var(--mb-ease);
}
.mbp-search--wide .mbp-search__input { min-height: 58px; box-shadow: var(--mb-shadow-sm); }
.mbp-search__input::placeholder { color: var(--mb-muted); }
.mbp-search__input:focus {
  outline: none;
  border-color: var(--mb-blue-400);
  box-shadow: 0 0 0 4px rgba(46, 139, 240, .14);
}
.mbp-search__input::-webkit-search-cancel-button { display: none; }
.mbp-search__clear {
  position: absolute;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--mb-blue-50);
  color: var(--mb-blue);
  cursor: pointer;
}
.mbp-search__hint {
  margin-top: .85rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--mb-muted);
}

/* Pill rail. Scrolls sideways on a phone instead of stacking four rows. */
.mbp-rail {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  /* Padding, not margin: the mask below is sized to this box, so a focus ring
     drawn outside it would be masked away rather than merely overflowing. */
  padding: .3rem .35rem .625rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mbp-rail::-webkit-scrollbar { display: none; }
/* The scrollbar is hidden, so the fade at the right edge is the only signal
   that the rail continues past the viewport. Wrapping rails keep every pill
   on screen and need no such hint. */
.mbp-rail:not(.mbp-rail--wrap) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3rem), transparent 100%);
}
.mbp-rail--wrap { flex-wrap: wrap; overflow: visible; justify-content: center; }
.mbp-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: var(--mb-r-pill);
  border: 1px solid var(--mb-line);
  background: #fff;
  font-family: var(--mb-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mb-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--mb-ease), color .2s var(--mb-ease),
              border-color .2s var(--mb-ease), transform .2s var(--mb-ease);
}
.mbp-pill:hover { border-color: var(--mb-blue-400); color: var(--mb-blue); transform: translateY(-1px); }
/* aria-pressed is the single source of truth for the selected state, so the
   visible selection and the announced one can never disagree. */
.mbp-pill[aria-pressed="true"] {
  background: var(--mb-blue);
  border-color: var(--mb-blue);
  color: #fff;
  box-shadow: var(--mb-shadow-sm);
}
.mbp-pill svg { flex: none; }
.mbp-pill__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: .3rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  font-size: .75rem;
  font-weight: 700;
}
.mbp-pill[aria-pressed="true"] .mbp-pill__n { background: rgba(255, 255, 255, .22); color: #fff; }

/* Empty state shared by the catalogue and the FAQ. */
.mbp-empty {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: clamp(2.5rem, 6vw, 4rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-canvas);
  border: 1px dashed var(--mb-line);
  text-align: center;
  color: var(--mb-muted);
}
.mbp-hide { display: none !important; }

/* Section head with a trailing control (search box, sort select). */
.mbp-sectionbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ── 04 · INTEGRATION CATALOGUE ────────────────────────────────────────── */
.mbp-cats { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.mbp-cat__head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1rem;
}
.mbp-cat__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--mb-line), rgba(227, 237, 249, 0));
  transform-origin: left;
}
.is-in .mbp-cat__rule { animation: mbp-grow .8s var(--mb-ease) both; }
.mbp-cat__count { font-size: .75rem; font-weight: 600; color: var(--mb-muted); white-space: nowrap; }

.mbp-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(.875rem, 1.6vw, 1.25rem);
}

.mbp-int {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
}
.mbp-int__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mbp-int__logo {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 15px;
  background: var(--mb-canvas);
  border: 1px solid var(--mb-line);
  transition: transform .24s var(--mb-ease);
}
.mbp-int:hover .mbp-int__logo { transform: scale(1.06) rotate(-3deg); }
.mbp-int__logo img { width: 30px; height: 30px; object-fit: contain; }
.mbp-int h3, .mbp-int h4 { font-size: 1rem; font-weight: 700; }
.mbp-int p { font-size: .875rem; line-height: 1.62; color: var(--mb-muted); }
.mbp-int__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--mb-line);
}
.mbp-int__status {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--mb-a-green-fg);
}
.mbp-int__arrow { color: var(--mb-blue); transition: transform .24s var(--mb-ease); }
.mbp-int:hover .mbp-int__arrow { transform: translateX(4px); }

/* Live pulse on the "active" dot — 2px of motion on one composited layer. */
.mbp-pulse {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mb-a-green-fg);
  flex: none;
}
.mbp-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--mb-a-green-fg);
  opacity: 0;
}
.is-in .mbp-pulse::after { animation: mbp-ping 2.6s var(--mb-ease) infinite; }
@keyframes mbp-ping {
  0%   { opacity: .7; transform: scale(.75); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* Editorial promo card that shares a row with the integration cards. */
.mbp-promo {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(.875rem, 2vw, 1.25rem);
  align-items: center;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: var(--mb-r-lg);
  background: linear-gradient(135deg, var(--mb-blue-50) 0%, #eef6ff 100%);
  border: 1px solid var(--mb-line);
  overflow: hidden;
}
/* A promo sits beside a lone integration card (span 2 of a 3-up row) or
   runs the full width beneath a row that is already full. Both collapse to a
   single column below 1024px, where the grid itself is no longer 3-up. */
.mbp-promo--span2 { grid-column: span 2; }
.mbp-promo--full  { grid-column: 1 / -1; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); }
.mbp-promo--full h3, .mbp-promo--full h4 { font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); }
.mbp-promo--full p { font-size: .9375rem; }
.mbp-promo img { border-radius: var(--mb-r-md); box-shadow: var(--mb-shadow-sm); width: 100%; }
.mbp-promo h3, .mbp-promo h4 { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); margin-bottom: .4rem; }
.mbp-promo p { font-size: .875rem; line-height: 1.62; color: var(--mb-muted); }
.mbp-promo a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .7rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-blue);
}
.mbp-promo a svg { transition: transform .2s var(--mb-ease); }
.mbp-promo a:hover svg { transform: translateX(3px); }

/* ── 05 · STEP FLOW ────────────────────────────────────────────────────── */
.mbp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.mbp-step {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
}
.mbp-step__n {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: .875rem;
  border-radius: 50%;
  background: var(--mb-blue);
  color: #fff;
  font-family: var(--mb-font-head);
  font-size: .875rem;
  font-weight: 700;
}
.mbp-step h3, .mbp-step h4 { font-size: 1rem; margin-bottom: .4rem; }
.mbp-step p { font-size: .875rem; line-height: 1.62; color: var(--mb-muted); }
/* Connector drawn on the card rather than between cards, so it disappears by
   itself when the grid wraps to a single column. */
.mbp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(clamp(1.25rem, 2.4vw, 1.75rem) + 17px);
  right: calc(-1 * clamp(1rem, 2vw, 1.5rem) - 1px);
  width: clamp(1rem, 2vw, 1.5rem);
  border-top: 2px dashed rgba(9, 106, 201, .35);
}

/* ── 06 · DATA-SHARING NOTICE ──────────────────────────────────────────── */
.mbp-notice {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-blue-50);
  border: 1px solid var(--mb-line);
}
.mbp-notice > .mb-tile { flex: none; }
.mbp-notice p { font-size: .9375rem; line-height: 1.7; color: var(--mb-muted); margin-top: .7rem; }
.mbp-notice strong { color: var(--mb-ink); font-weight: 600; }
.mbp-notice a { color: var(--mb-blue); text-decoration: underline; text-underline-offset: 2px; }
.mbp-notice__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: .75rem;
  margin-top: 1.1rem;
}
.mbp-notice__grid li {
  display: grid;
  gap: .25rem;
  padding: .875rem 1rem;
  border-radius: var(--mb-r-md);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
}
.mbp-notice__grid b { font-size: .875rem; font-weight: 700; color: var(--mb-ink); }
.mbp-notice__grid span { font-size: .75rem; line-height: 1.55; color: var(--mb-muted); }

/* ── 07 · PRICING ──────────────────────────────────────────────────────── */
/* Four columns: three tiers plus the "talk to us" panel, exactly as the
   plans read on the page. `auto-fit` handles every width below that. */
.mbp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: clamp(.875rem, 1.6vw, 1.25rem);
  align-items: stretch;
}
.mbp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  transition: transform .25s var(--mb-ease), box-shadow .25s var(--mb-ease);
}
.mbp-plan:hover { transform: translateY(-5px); box-shadow: var(--mb-shadow-md); }
.mbp-plan--featured {
  border-color: var(--mb-blue);
  box-shadow: var(--mb-shadow-lg);
}
.mbp-plan--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--mb-blue);
  pointer-events: none;
}
.mbp-plan__flag {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  padding: .3rem .85rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-blue);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mbp-plan__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: .35rem;
  border-radius: 12px;
  background: var(--mb-a-blue);
  color: var(--mb-a-blue-fg);
}
.mbp-plan__name {
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-ink);
}
.mbp-plan__for { font-size: .8125rem; line-height: 1.55; color: var(--mb-muted); min-height: 2.5rem; }
.mbp-plan__price {
  font-family: var(--mb-font-head);
  font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--mb-ink);
  line-height: 1.1;
  margin-top: .35rem;
}
.mbp-plan__price span { font-size: .8125rem; font-weight: 500; color: var(--mb-muted); letter-spacing: 0; }
.mbp-plan__note { font-size: .75rem; color: var(--mb-muted); margin-bottom: .5rem; }
.mbp-plan__list { display: grid; gap: .55rem; margin: .35rem 0 1.25rem; }
.mbp-plan__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .55rem;
  align-items: start;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--mb-ink-soft);
}
.mbp-plan__list svg { margin-top: .2rem; color: var(--mb-blue); }
.mbp-plan .mb-btn { margin-top: auto; }
.mbp-plan--talk {
  background: linear-gradient(160deg, var(--mb-blue-50) 0%, #eaf3ff 100%);
  align-items: flex-start;
  text-align: left;
}

/* Reassurance strip beneath the plans. */
.mbp-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem clamp(1.25rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--mb-line);
}
.mbp-assure li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mb-ink-soft);
}
.mbp-assure svg { flex: none; color: var(--mb-blue); }

/* Icon row: "what is in every plan". */
.mbp-included {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}
.mbp-included li { display: grid; justify-items: center; gap: .55rem; }
.mbp-included h3, .mbp-included h4 { font-size: .9375rem; }
.mbp-included p { font-size: .8125rem; line-height: 1.55; color: var(--mb-muted); }

/* Comparison table. Scrolls inside its own container on narrow screens so the
   page body never scrolls sideways. */
.mbp-tablewrap {
  overflow-x: auto;
  border-radius: var(--mb-r-lg);
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.mbp-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .875rem; }
.mbp-table th, .mbp-table td { padding: .8rem 1rem; text-align: center; }
.mbp-table thead th {
  position: sticky;
  top: 0;
  background: var(--mb-blue-50);
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  color: var(--mb-ink);
  border-bottom: 1px solid var(--mb-line);
}
.mbp-table thead th:first-child, .mbp-table tbody th { text-align: left; }
.mbp-table tbody th {
  font-weight: 500;
  color: var(--mb-ink-soft);
  font-size: .875rem;
}
.mbp-table tbody tr + tr th, .mbp-table tbody tr + tr td { border-top: 1px solid var(--mb-line); }
.mbp-table tbody tr:hover th, .mbp-table tbody tr:hover td { background: var(--mb-blue-50); }
/* The recommended column is tinted the whole way down and its header is
   filled solid, so the eye lands on it before reading a single row. */
.mbp-table__col--hot { background: rgba(9, 106, 201, .05); }
.mbp-table thead th.mbp-table__col--hot { background: var(--mb-blue); color: #fff; }
.mbp-table thead th.mbp-table__col--hot .mbp-table__price { color: rgba(255, 255, 255, .8); }
.mbp-table tbody tr:hover td.mbp-table__col--hot { background: rgba(9, 106, 201, .1); }
.mbp-table__price { display: block; font-size: .75rem; font-weight: 500; color: var(--mb-muted); }
.mbp-table__yes { color: var(--mb-a-green-fg); }
.mbp-table__no { color: #b6c4d4; }

/* Value calculator + supporting panels. */
.mbp-value {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.mbp-panel {
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
}
.mbp-panel--tint { background: linear-gradient(160deg, var(--mb-blue-50) 0%, #eaf3ff 100%); }
.mbp-panel--blue {
  background: linear-gradient(150deg, var(--mb-blue) 0%, var(--mb-blue-700) 100%);
  border-color: transparent;
  color: #fff;
}
.mbp-panel--blue h3, .mbp-panel--blue b { color: #fff; }
.mbp-panel--blue p { color: rgba(255, 255, 255, .84); }

.mbp-stepper {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: .5rem;
}
.mbp-stepper button {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--mb-line);
  background: #fff;
  color: var(--mb-blue);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s var(--mb-ease), border-color .18s var(--mb-ease);
}
.mbp-stepper button:hover { background: var(--mb-blue-50); border-color: var(--mb-blue-400); }
.mbp-stepper output {
  min-width: 3.25rem;
  text-align: center;
  font-family: var(--mb-font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mb-ink);
}
.mbp-calc__label { font-size: .8125rem; font-weight: 600; color: var(--mb-ink-soft); }
.mbp-calc__out {
  font-family: var(--mb-font-head);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--mb-a-green-fg);
  line-height: 1.15;
}
.mbp-calc__foot { font-size: .75rem; line-height: 1.5; color: var(--mb-muted); margin-top: .9rem; }

/* Testimonials. */
.mbp-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.mbp-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
}
.mbp-quote blockquote { margin: 0; font-size: .9375rem; line-height: 1.68; color: var(--mb-ink-soft); }
.mbp-quote__by { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.mbp-quote__by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.mbp-quote__by b { display: block; font-size: .875rem; font-weight: 700; color: var(--mb-ink); }
.mbp-quote__by span { display: block; font-size: .75rem; color: var(--mb-muted); }
.mbp-stars { display: flex; gap: .1rem; color: #f6a609; }

/* ── 08 · FAQ ──────────────────────────────────────────────────────────── */
.mbp-faqlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.mbp-faqside { display: grid; gap: 1rem; position: sticky; top: 90px; }

.mbp-side {
  padding: clamp(1.25rem, 2.4vw, 1.65rem);
  border-radius: var(--mb-r-lg);
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow-sm);
}
.mbp-side--tint { background: linear-gradient(160deg, var(--mb-blue-50) 0%, #eaf3ff 100%); }
.mbp-side h2, .mbp-side h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.mbp-side p { font-size: .8125rem; line-height: 1.6; color: var(--mb-muted); }
.mbp-side__links { display: grid; gap: .5rem; margin-top: .875rem; }
.mbp-side__link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  border-radius: var(--mb-r-md);
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
  transition: border-color .2s var(--mb-ease), transform .2s var(--mb-ease);
}
.mbp-side__link:hover { border-color: var(--mb-blue-400); transform: translateX(3px); }
.mbp-side__link b { display: block; font-size: .8125rem; font-weight: 700; color: var(--mb-ink); }
/* Excludes the icon tile, which is also a <span>: `display: block` here beats
   .mb-tile's own `display: grid` on specificity and pins the glyph to the top
   of its tile instead of centring it. */
.mbp-side__link span:not(.mb-tile) { display: block; font-size: .75rem; color: var(--mb-muted); }
.mbp-side__contact { display: grid; gap: .75rem; margin-top: 1rem; }
.mbp-side__contact a { display: flex; align-items: center; gap: .65rem; font-size: .875rem; font-weight: 600; color: var(--mb-blue); }
.mbp-side__contact span { display: block; font-size: .75rem; font-weight: 500; color: var(--mb-muted); }

/* FAQ groups. */
.mbp-groups { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.mbp-group {
  border-radius: var(--mb-r-lg);
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow-sm);
  overflow: hidden;
}
.mbp-group__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem clamp(1rem, 2vw, 1.35rem);
  background: var(--mb-blue-50);
  border-bottom: 1px solid var(--mb-line);
}
.mbp-group__head h2, .mbp-group__head h3 { font-size: 1rem; }
.mbp-group__head .mb-tile { width: 34px; height: 34px; border-radius: 10px; }
.mbp-group__head .mb-tile svg { width: 18px; height: 18px; }
.mbp-group__n { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--mb-muted); white-space: nowrap; }

.mbp-qa { border-top: 1px solid var(--mb-line); }
.mbp-qa:first-child { border-top: 0; }
.mbp-qa > summary {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem clamp(1rem, 2vw, 1.35rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--mb-font-head);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mb-ink);
  transition: background-color .18s var(--mb-ease);
}
.mbp-qa > summary::-webkit-details-marker { display: none; }
.mbp-qa > summary:hover { background: var(--mb-blue-50); }
.mbp-qa__n { flex: none; font-size: .8125rem; font-weight: 700; color: var(--mb-blue); min-width: 1.6rem; }
.mbp-qa__q { flex: 1; line-height: 1.5; }
.mbp-qa__sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mb-blue-50);
  color: var(--mb-blue);
  transition: transform .25s var(--mb-ease), background-color .2s var(--mb-ease);
}
.mbp-qa[open] > summary { background: var(--mb-blue-50); }
.mbp-qa[open] .mbp-qa__sign { transform: rotate(45deg); background: var(--mb-blue); color: #fff; }
.mbp-qa__a {
  padding: 0 clamp(1rem, 2vw, 1.35rem) 1.1rem calc(clamp(1rem, 2vw, 1.35rem) + 2.35rem);
  font-size: .875rem;
  line-height: 1.72;
  color: var(--mb-muted);
}
.mbp-qa__a a { color: var(--mb-blue); font-weight: 600; }
/* The answer fades and settles rather than snapping into place. Deliberately
   NOT an open/close height animation: <details> gives no closing state to
   animate, so a height transition would play on the way in and jump on the
   way out. Fading only the panel's own content reads the same and costs one
   composited layer for 280ms. */
.mbp-qa[open] .mbp-qa__a { animation: mbp-fade .28s var(--mb-ease) both; }
@keyframes mbp-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Popular-search chips under the FAQ hero. */
.mbp-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.mbp-tags > span { font-size: .75rem; color: var(--mb-muted); }
.mbp-tag {
  padding: .35rem .8rem;
  border-radius: var(--mb-r-pill);
  border: 1px solid var(--mb-line);
  background: #fff;
  font-family: var(--mb-font-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--mb-ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--mb-ease), color .2s var(--mb-ease);
}
.mbp-tag:hover { border-color: var(--mb-blue-400); color: var(--mb-blue); }

/* ── 09 · CONTACT ──────────────────────────────────────────────────────── */
.mbp-contactgrid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, .7fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
/* The figure is bottom-aligned to the form card rather than centred beside it,
   so the cut-out stands on the same line the card ends on. */
.mbp-contactgrid > .mbp-hero__art { align-self: end; }

/* The form is the page's job, so it is a white card on the tinted hero
   rather than a section further down. */
.mbp-formcard {
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-lg);
}
.mbp-formcard h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); margin-bottom: .35rem; }
.mbp-formcard > p { font-size: .8125rem; color: var(--mb-muted); margin-bottom: 1.1rem; }
.mbp-form { display: grid; gap: .875rem; }
.mbp-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .875rem; }
.mbp-field { display: grid; gap: .35rem; margin: 0; }
.mbp-field label { font-size: .75rem; font-weight: 600; color: var(--mb-ink-soft); }
.mbp-field label i { color: #c62a49; font-style: normal; }
.mbp-inp {
  width: 100%;
  min-height: 46px;
  padding: .65rem .85rem;
  border-radius: var(--mb-r-btn);
  border: 1px solid var(--mb-line);
  background: var(--mb-canvas);
  font-family: var(--mb-font-body);
  font-size: .875rem;
  color: var(--mb-ink);
  transition: border-color .18s var(--mb-ease), box-shadow .18s var(--mb-ease), background-color .18s var(--mb-ease);
}
.mbp-inp::placeholder { color: #9aabbd; }
.mbp-inp:focus {
  outline: none;
  background: #fff;
  border-color: var(--mb-blue-400);
  box-shadow: 0 0 0 4px rgba(46, 139, 240, .13);
}
textarea.mbp-inp { min-height: 92px; resize: vertical; }
select.mbp-inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f7288' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.25rem;
}
/* Phone field: fixed dial-code select welded to the number input. */
/* The dial-code box is sized to its three characters, not to a share of the
   row: at 5.5rem it ate enough of a narrow column that the number field could
   only show half a phone number. */
.mbp-phone { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .45rem; }
.mbp-form__msg { display: none; font-size: .8125rem; color: #c62a49; }
/* The lock glyph sits on the first line and the sentence wraps normally
   beneath it, rather than the two sharing a centred flex row where a
   two-word link gets pushed into its own column. */
.mbp-form__legal {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--mb-muted);
}
.mbp-form__legal svg { flex: none; margin-top: .18rem; }

/* Contact channel cards. */
.mbp-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(.875rem, 1.8vw, 1.25rem);
}
.mbp-channel {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 1.1rem;
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  text-align: center;
}
.mbp-channel .mb-tile { width: 50px; height: 50px; border-radius: 50%; margin-bottom: .35rem; transition: transform .24s var(--mb-ease); }
.mbp-channel:hover .mb-tile { transform: scale(1.08); }
.mbp-channel h3, .mbp-channel h4 { font-size: .9375rem; }
.mbp-channel b { font-family: var(--mb-font-head); font-size: 1rem; font-weight: 700; color: var(--mb-blue); }
.mbp-channel p { font-size: .75rem; color: var(--mb-muted); }
.mbp-channel .mb-btn { margin-top: .9rem; width: 100%; min-height: 44px; font-size: .8125rem; }

/* Office + map row. */
.mbp-office {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.mbp-office__card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-blue-50);
  border: 1px solid var(--mb-line);
}
.mbp-office__card img { border-radius: var(--mb-r-lg); box-shadow: var(--mb-shadow-sm); width: 100%; }
.mbp-office__list { display: grid; gap: .55rem; margin: .875rem 0 1.1rem; }
.mbp-office__list li { display: flex; gap: .55rem; font-size: .875rem; color: var(--mb-ink-soft); }
.mbp-office__list svg { flex: none; margin-top: .22rem; color: var(--mb-blue); }
.mbp-map {
  position: relative;
  border-radius: var(--mb-r-xl);
  overflow: hidden;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  min-height: 260px;
  background: var(--mb-canvas);
}
.mbp-map iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }

/* Resource cards. */
.mbp-resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(.875rem, 1.8vw, 1.25rem);
}
.mbp-resource {
  display: grid;
  gap: .35rem;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
}
.mbp-resource h3, .mbp-resource h4 { font-size: .9375rem; }
.mbp-resource p { font-size: .8125rem; color: var(--mb-muted); }
/* Excludes the icon tile, which is also a <span>: unqualified, this rule turns
   the tile inline-flex and left-aligns the glyph inside it. */
.mbp-resource span:not(.mb-tile) {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .6rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-blue);
}
.mbp-resource:hover span svg { transform: translateX(3px); }
.mbp-resource span svg { transition: transform .2s var(--mb-ease); }

/* ── 10 · CLOSING BANDS ────────────────────────────────────────────────── */
.mbp-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--mb-r-xl);
  background: linear-gradient(135deg, var(--mb-blue) 0%, var(--mb-blue-700) 100%);
  color: #fff;
}
.mbp-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--mbp-bandart, .5fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
/* A band that carries a cut-out figure: copy takes the width it needs and
   the figure sits in a narrow column beside it. */
.mbp-band--figure .mbp-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .3fr); }
.mbp-band h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: .6rem; }
.mbp-band p { color: rgba(255, 255, 255, .85); font-size: .9375rem; line-height: 1.68; max-width: 44rem; }

/* Three-beat "what happens next" strip. Gives a band something to say in the
   space beside the figure instead of leaving a field of empty blue. */
.mbp-band__next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.mbp-band__next li { display: flex; gap: .7rem; }
.mbp-band__next b {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 700;
}
.mbp-band__next p { margin: 0; font-size: .8125rem; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.mbp-band__next strong { display: block; font-weight: 700; color: #fff; }
.mbp-band .mb-eyebrow { color: rgba(255, 255, 255, .72); }
.mbp-band__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Ghost button ON a blue band. .mb-btn--ghost fills solid white, which is
   exactly wrong here — white text on a white fill — so this is its own
   modifier rather than three inline colour overrides per page. */
.mb-btn--wire {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  box-shadow: none;
}
.mb-btn--wire:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
/* The figure is capped by HEIGHT, not width. Left to its natural size a
   692px-tall cut-out sets the band's height and leaves a field of empty blue
   beside 200px of copy — which is exactly what it did. Capping the height
   hands the band back to its content. */
.mbp-band__figure { align-self: end; }
.mbp-band__figure img {
  /* A definite height rather than max-height: the image is lazy-loaded, and a
     max-height leaves it 0px tall until it arrives, so the band jumps taller
     the moment it does. With height fixed, the width/height attributes give a
     definite width up front and the box is reserved before the bytes land. */
  height: clamp(240px, 24vw, 330px);
  width: auto;
  max-width: 100%;
  display: block;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.mbp-band__meta { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.mbp-band__meta li { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: rgba(255, 255, 255, .9); }
.mbp-band__meta svg { flex: none; }
/* Faint world-map / grid wash behind the band. */
.mbp-band__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .55) 1px, transparent 0);
  background-size: 22px 22px;
  /* Prefixed first: Safari still needs -webkit-mask-image, and without it the
     dot grid covers the whole band edge to edge instead of fading out. */
  -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 70% 40%, #000 0%, transparent 72%);
}
/* Floating app tiles inside the band. */
.mbp-band__orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: -1;
  display: grid;
  place-items: center;
  width: clamp(30px, 3.2vw, 42px);
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  translate: -50% -50%;
}
.is-visible .mbp-band__orb {
  animation: mbp-drift 9s var(--mb-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1s);
}
.mbp-band__orb svg { width: 55%; height: 55%; }

/* ── 12 · CLINIC SPECIALTIES HUB ───────────────────────────────────────────
   /medbus-different-clinic-management-software-services. Kept in this file
   rather than a sixth stylesheet: the page shares the hero, floats, pills,
   band and FAQ with the other four, and is linked from all of them. */

/* Framed hero photograph. The float cards pin to the frame's box. */
.mbp-photoart { position: relative; padding: clamp(.75rem, 2vw, 1.5rem); }
.mbp-frame {
  margin: 0;
  border-radius: var(--mb-r-xl);
  overflow: hidden;
  background: var(--mb-canvas);
  border: 6px solid #fff;
  box-shadow: var(--mb-shadow-lg);
}
.mbp-frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.mbp-photoart .mbp-float { z-index: 3; }

/* Trust row under the hero CTAs. */
.mbp-trust { display: flex; align-items: center; gap: .875rem; margin-top: 1.75rem; }
.mbp-trust__faces { display: flex; flex: none; }
.mbp-trust__faces img {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  background: var(--mb-blue-50);
  box-shadow: var(--mb-shadow-xs);
}
.mbp-trust__faces img + img { margin-left: -10px; }
.mbp-trust p { font-size: .8125rem; line-height: 1.5; color: var(--mb-muted); }
.mbp-trust b { display: block; font-size: .875rem; color: var(--mb-ink); }

/* Media + copy split, used twice. --flip puts the media on the right. */
.mbp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.mbp-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

.mbp-shot {
  border-radius: var(--mb-r-xl);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-lg);
  padding: clamp(.35rem, 1vw, .6rem);
  transition: transform .5s var(--mb-ease);
}
.mbp-shot:hover { transform: translateY(-4px); }
.mbp-shot img { width: 100%; height: auto; display: block; border-radius: calc(var(--mb-r-xl) - 8px); }

/* Six key benefits. */
.mbp-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(.875rem, 1.6vw, 1.25rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.mbp-benefit {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: clamp(1.25rem, 2.4vw, 1.6rem) 1rem;
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  text-align: center;
}
.mbp-benefit .mb-tile { margin-bottom: .25rem; transition: transform .3s var(--mb-ease); }
.mbp-benefit:hover .mb-tile { transform: scale(1.08) rotate(-4deg); }
.mbp-benefit h3 { font-size: .9375rem; }
.mbp-benefit p { font-size: .8125rem; line-height: 1.55; color: var(--mb-muted); }

/* The specialty grid — photograph cards, each a single link. */
.mbp-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.mbp-spec {
  display: flex;
  flex-direction: column;
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  overflow: hidden;
  transition: transform .26s var(--mb-ease), box-shadow .26s var(--mb-ease),
              border-color .26s var(--mb-ease);
}
.mbp-spec:hover {
  transform: translateY(-5px);
  box-shadow: var(--mb-shadow-md);
  border-color: rgba(9, 106, 201, .3);
}
.mbp-spec__media { position: relative; display: block; overflow: hidden; background: var(--mb-canvas); }
.mbp-spec__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--mb-ease);
}
.mbp-spec:hover .mbp-spec__media img { transform: scale(1.06); }
/* A soft scrim at the photo's foot so the chip reads over any image. */
.mbp-spec__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(11, 34, 56, .28), rgba(11, 34, 56, 0));
  pointer-events: none;
}
.mbp-spec__chip {
  position: absolute;
  left: .875rem;
  bottom: .75rem;
  z-index: 1;
  padding: .3rem .7rem;
  border-color: transparent;
  box-shadow: none;
  font-size: .75rem;
  font-weight: 700;
}
.mbp-spec__chip--blue   { background: var(--mb-a-blue);   color: var(--mb-a-blue-fg); }
.mbp-spec__chip--violet { background: var(--mb-a-violet); color: var(--mb-a-violet-fg); }
.mbp-spec__chip--green  { background: var(--mb-a-green);  color: var(--mb-a-green-fg); }
.mbp-spec__chip--cyan   { background: var(--mb-a-cyan);   color: var(--mb-a-cyan-fg); }

.mbp-spec__body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  padding: clamp(1.05rem, 2vw, 1.35rem);
}
.mbp-spec__name {
  font-family: var(--mb-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mb-ink);
  line-height: 1.3;
  transition: color .2s var(--mb-ease);
}
.mbp-spec:hover .mbp-spec__name { color: var(--mb-blue); }
.mbp-spec__desc { font-size: .875rem; line-height: 1.6; color: var(--mb-muted); }
.mbp-spec__go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .875rem;
  border-top: 1px solid var(--mb-line);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-blue);
}
.mbp-spec__go svg { transition: transform .22s var(--mb-ease); }
.mbp-spec:hover .mbp-spec__go svg { transform: translateX(4px); }

/* Two-column tick list. */
.mbp-ticks2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: .7rem 1.25rem;
  margin-top: 1.25rem;
}
.mbp-ticks2 li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .55rem;
  align-items: start;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--mb-ink-soft);
}
.mbp-ticks2 svg { margin-top: .12rem; color: var(--mb-blue); }

/* Laptop + phone device pair. The same construction as .mb-hub__* on the
   features page, carried here so this page need not load medbus-modules.css
   (58 KB) for thirty lines of it. */
.mbp-section--clip { overflow-x: hidden; overflow-x: clip; }
.mbp-devices {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem);
}
.mbp-devices__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 139, 240, .16), transparent 68%);
}
.is-visible .mbp-devices__glow { animation: mbp-devglow 9s var(--mb-ease) infinite; }
/* Rests at its laid-out size, so a paused or reduced-motion frame is the
   design frame rather than a half-faded one. */
@keyframes mbp-devglow {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.07); opacity: .8; }
}
.mbp-devices__stage { position: relative; z-index: 1; width: 100%; max-width: 520px; }
.mbp-devices__laptop { width: 86%; }
.mbp-devices__screen {
  padding: 5px;
  background: linear-gradient(160deg, #2b3f55 0%, #16283a 100%);
  border-radius: 11px 11px 3px 3px;
  box-shadow: 0 16px 34px rgba(11, 34, 56, .18);
}
.mbp-devices__screen img { display: block; width: 100%; height: auto; border-radius: 7px 7px 1px 1px; }
.mbp-devices__base {
  display: block;
  width: 116%;
  height: 9px;
  margin: 0 0 0 -8%;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #e2eaf3 0%, #bccbdc 100%);
  box-shadow: 0 8px 16px rgba(11, 34, 56, .12);
}
.mbp-devices__phone {
  position: absolute;
  right: 0;
  bottom: -8%;
  width: 24%;
  padding: 4px;
  background: linear-gradient(160deg, #2b3f55 0%, #16283a 100%);
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(11, 34, 56, .22);
}
.mbp-devices__phone img { display: block; width: 100%; height: auto; border-radius: 10px; }
.mbp-devices .mbp-float { z-index: 3; }

/* Closing band with a group figure: the team shot is near square, so it gets
   a wider column than the standing single figures the other bands carry.

   Specificity is raised to (0,3,0) on purpose. Section 11 below restates
   `.mbp-band--figure .mbp-band__grid` at (0,2,0) inside its 1180px block, and
   being later in the file it would otherwise shrink this column back to .34fr
   on every laptop. The 900px rule further down restates the single column at
   the same (0,3,0), so the phone layout still wins where it should. */
.mbp-band.mbp-band--wide-figure .mbp-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }

/* The band figure is height-capped with width:auto and max-width:100%. When
   max-width does bite — as it can for a wide shot like the team photo — the
   width shrinks while the height holds, which squashes the image. Contain
   letterboxes inside the box instead; bottom keeps the figure standing on
   the band's floor. Harmless for the tall single figures, which never hit it. */
.mbp-band__figure img { object-fit: contain; object-position: center bottom; }

@media (max-width: 1180px) {
  .mbp-band.mbp-band--wide-figure .mbp-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .44fr); }
}

@media (max-width: 900px) {
  .mbp-split,
  .mbp-split--flip { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the dashboard shot follows its copy, not leads it. */
  .mbp-split > .mbp-shot { order: 2; }
  .mbp-band.mbp-band--wide-figure .mbp-band__grid { grid-template-columns: minmax(0, 1fr); }
  .mbp-photoart { max-width: 36rem; margin-inline: auto; width: 100%; }
}

@media (max-width: 620px) {
  /* The float cards are pinned by percentage to the photo and the device
     pair; at phone widths they would cover most of what they annotate. */
  .mbp-photoart .mbp-float,
  .mbp-devices .mbp-float { display: none; }
  .mbp-photoart { padding: 0; }
  .mbp-trust { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .is-visible .mbp-devices__glow { animation: none !important; }
  .mbp-spec:hover,
  .mbp-shot:hover { transform: none; }
  .mbp-spec:hover .mbp-spec__media img { transform: none; }
}

/* ── 13 · STAGE HERO — specialties hub ────────────────────────────────────
   Content left and right, the care team in the middle, and the background
   alive behind them: a soft glow, three sonar rings breathing out from behind
   the team, and specialty icons drifting above their heads. */
.mbp-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2rem, 4.5vw, 3.25rem);
  background:
    radial-gradient(55% 75% at 50% 100%, #d6e8fc 0%, rgba(214, 232, 252, 0) 72%),
    linear-gradient(180deg, #f2f8ff 0%, #fbfdff 100%);
}
.mbp-stage__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(9, 106, 201, .16) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(50% 70% at 50% 60%, #000 0%, transparent 75%);
          mask-image: radial-gradient(50% 70% at 50% 60%, #000 0%, transparent 75%);
}
.mbp-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
}
/* Both columns paint above the glow and rings rising behind the team. */
.mbp-stage__left,
.mbp-stage__right { position: relative; z-index: 3; grid-row: 1; }
.mbp-stage__left  { grid-column: 1; }
.mbp-stage__right { grid-column: 3; justify-self: end; width: 100%; max-width: 26.5rem; }
.mbp-stage__title {
  font-size: clamp(2rem, 1.2rem + 1.65vw, 2.75rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
.mbp-stage__lede { font-size: 1.0625rem; line-height: 1.7; color: var(--mb-muted); max-width: 34rem; }
.mbp-stage__right .mbp-checks { flex-direction: column; margin-top: 0; gap: .8rem; }
.mbp-stage__right .mbp-checks li { font-size: 1rem; }
.mbp-stage__right .mb-closing__cta { margin-top: 1.6rem; }
.mbp-stage__right .mbp-trust { margin-top: 1.6rem; }
.mbp-stage__right .mbp-trust b { font-size: 1rem; }
.mbp-stage__right .mbp-trust p { font-size: .875rem; }

/* The whole team in one row across the page. Capped at 1280px so on a wide
   screen the eleven stay a group rather than a frieze, and so the 1914px
   source still covers a 1.5x display at full size. The negative top margin
   lets the centre heads rise into the space between the two columns. */
.mbp-stage__team {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: 100%;
  max-width: 1280px;
  margin: clamp(-2.25rem, -2vw, -1rem) 0 0;
}
.mbp-stage__team > img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  /* Two fades, intersected. Bottom: the photograph ends mid-leg, so it
     dissolves into the page instead of stopping on a hard edge. Sides: a
     narrow fade softens the two people the original crops at its frame. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
          mask-composite: intersect;
  filter: drop-shadow(0 18px 36px rgba(9, 106, 201, .14));
}
.mbp-stage__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 12%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 139, 240, .24), rgba(46, 139, 240, 0));
}
.is-visible .mbp-stage__glow { animation: mbp-stage-breathe 9s var(--mb-ease) infinite; }
@keyframes mbp-stage-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.08); opacity: .75; }
}
.mbp-stage__ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 32%;
  width: 56%;
  aspect-ratio: 1;
  translate: -50% 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(9, 106, 201, .26);
  opacity: 0;
}
.is-visible .mbp-stage__ring { animation: mbp-halo 7.2s var(--mb-ease) infinite; }
.is-visible .mbp-stage__ring--2 { animation-delay: 2.4s; }
.is-visible .mbp-stage__ring--3 { animation-delay: 4.8s; }
.mbp-stage__team .mbp-orb { z-index: 3; }
.mbp-stage__badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -26%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem .45rem .5rem;
  border-radius: var(--mb-r-pill);
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-ink);
  white-space: nowrap;
}
.mbp-stage__badge i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mb-blue);
  color: #fff;
  font-style: normal;
  font-size: .75rem;
}
.is-visible .mbp-stage__badge { animation: mbp-drift 8s var(--mb-ease) infinite; }

/* ── 14 · DEMO BAND — closing CTA with an inline form ──────────────────── */
.mbp-demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--mb-r-xl);
  background:
    radial-gradient(60% 90% at 50% 100%, rgba(46, 139, 240, .55) 0%, rgba(46, 139, 240, 0) 70%),
    linear-gradient(135deg, var(--mb-blue) 0%, var(--mb-blue-700) 100%);
  color: #fff;
  box-shadow: var(--mb-shadow-lg);
}
.mbp-demo__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .2;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .6) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 90% at 30% 20%, #000 0%, transparent 70%);
          mask-image: radial-gradient(90% 90% at 30% 20%, #000 0%, transparent 70%);
}
.mbp-demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: stretch;
}

.mbp-demo__copy { align-self: center; }
.mbp-demo__copy .mb-eyebrow { color: rgba(255, 255, 255, .75); }
.mbp-demo__copy h2 { color: #fff; font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.15rem); line-height: 1.18; margin-bottom: .75rem; }
.mbp-demo__copy > p { color: rgba(255, 255, 255, .86); font-size: .9375rem; line-height: 1.7; }
.mbp-demo__points { display: grid; gap: .7rem; margin-top: 1.4rem; }
.mbp-demo__points li { display: flex; align-items: center; gap: .7rem; font-size: .875rem; font-weight: 600; color: #fff; }
.mbp-demo__points span {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
}
.mbp-demo__reach {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.mbp-demo__reach a { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; font-weight: 600; color: #fff; }
.mbp-demo__reach a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The specialist stands on the band's floor: the negative bottom margin
   cancels the band's padding so his feet meet its edge. */
.mbp-demo__figure {
  position: relative;
  display: grid;
  place-items: end center;
  align-self: end;
  min-height: 380px;
  margin-bottom: calc(-1 * clamp(1.5rem, 3.5vw, 2.75rem));
}
.mbp-demo__figure > img {
  position: relative;
  z-index: 2;
  height: clamp(320px, 30vw, 440px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* A soft floor shadow under his feet, drawn as its own element. The image
   itself carries no filter or mask (its bottom fade is baked into the file),
   so it paints on the plainest path, with nothing that can outline its box. */
.mbp-demo__figure::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: 26px;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2, 22, 64, .5), rgba(2, 22, 64, 0));
}
.mbp-demo__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: 120%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64, 160, 255, .42), rgba(24, 110, 220, .16) 58%, rgba(24, 110, 220, 0));
}
.is-visible .mbp-demo__glow { animation: mbp-stage-breathe 8s var(--mb-ease) infinite; }
.mbp-demo__ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 118%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .42);
  opacity: 0;
}
.is-visible .mbp-demo__ring { animation: mbp-halo 6.6s var(--mb-ease) infinite; }
.is-visible .mbp-demo__ring--2 { animation-delay: 2.2s; }
.is-visible .mbp-demo__ring--3 { animation-delay: 4.4s; }
.mbp-demo__orbit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 86%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .3);
}
.is-visible .mbp-demo__orbit { animation: mbp-spin 40s linear infinite; }
.mbp-demo__badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 14%;
  translate: -50% 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  align-items: center;
  padding: .6rem .9rem;
  border-radius: var(--mb-r-md);
  background: #fff;
  box-shadow: 0 12px 28px rgba(3, 30, 70, .25);
  white-space: nowrap;
}
.mbp-demo__badge .mbp-pulse { grid-row: span 2; }
.mbp-demo__badge b { font-size: .8125rem; color: var(--mb-ink); }
.mbp-demo__badge span { font-size: .75rem; color: var(--mb-muted); }
.is-visible .mbp-demo__badge { animation: mbp-drift 7.5s var(--mb-ease) infinite; }
/* The pulse ring only runs under .is-in, which a badge inside the figure
   never gets on its own; start it with the band. */
.is-visible .mbp-demo__badge .mbp-pulse::after { animation: mbp-ping 2.6s var(--mb-ease) infinite; }

.mbp-demo__form { align-self: center; color: var(--mb-ink-soft); }
.mbp-formcard h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); margin-bottom: .3rem; }
.mbp-formcard > p { font-size: .8125rem; color: var(--mb-muted); margin-bottom: 1rem; }
.mbp-demo .mbp-form { gap: .75rem; }
.mbp-demo .mbp-inp { min-height: 44px; }
.mbp-demo textarea.mbp-inp { min-height: 64px; }

/* The fixed "+91" prefix welded to a phone input. Shared now that the demo
   band carries a phone field on every specialty page, not just the contact
   page's local style block. */
.mbp-inp--static {
  display: grid;
  place-items: center;
  background: var(--mb-blue-50);
  color: var(--mb-ink-soft);
  font-weight: 600;
}

@media (max-width: 1180px) {
  /* The figure goes first: with two columns the pitch and the form are what
     the width is for. */
  .mbp-demo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mbp-demo__figure { display: none; }
}

@media (max-width: 1100px) {
  .mbp-stage__grid { grid-template-columns: minmax(0, 1fr); }
  .mbp-stage__left,
  .mbp-stage__right { grid-column: 1; grid-row: auto; max-width: 40rem; }
  .mbp-stage__right { order: 3; justify-self: start; padding: 1.5rem 0 clamp(2rem, 5vw, 3rem); }
  /* Edge to edge: at this width every pixel goes to the eleven. The top
     padding is room for the badge and the rings above the heads. */
  .mbp-stage__team {
    order: 2;
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: 1.25rem calc(-1 * var(--mb-gutter)) 0;
    padding-top: 3.75rem;
  }
  .mbp-stage__team .mbp-orb { display: none; }
  .mbp-stage__badge { top: .5rem; }
}

@media (max-width: 860px) {
  .mbp-demo__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .is-visible .mbp-stage__glow,
  .is-visible .mbp-stage__ring,
  .is-visible .mbp-stage__badge,
  .is-visible .mbp-demo__glow,
  .is-visible .mbp-demo__ring,
  .is-visible .mbp-demo__orbit,
  .is-visible .mbp-demo__badge,
  .is-visible .mbp-demo__badge .mbp-pulse::after { animation: none !important; }
}

/* ── 11 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mbp-contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .mbp-contactgrid > .mbp-hero__art { display: none; }
  .mbp-band--figure .mbp-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); }
}

@media (max-width: 1024px) {
  .mbp-faqlayout { grid-template-columns: minmax(0, 1fr); }
  .mbp-faqside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .mbp-promo--span2, .mbp-promo--full { grid-column: span 1; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .mbp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .mbp-hero__copy { max-width: none; }
  /* The artwork is decoration on a phone and costs layout height the copy
     needs; the orbiting logos are already named in the catalogue below. */
  .mbp-hero__art { display: none; }
  .mbp-contactgrid { grid-template-columns: minmax(0, 1fr); }
  /* .mbp-band--figure is restated, not left to the media order: it carries
     (0,2,0) from the 1180px block above and would otherwise keep its second
     column here — an empty 68px strip that squeezed the copy on a phone. */
  .mbp-band__grid,
  .mbp-band--figure .mbp-band__grid { grid-template-columns: minmax(0, 1fr); }
  .mbp-band__figure { display: none; }
  /* Once the figure is gone the copy fills the band edge to edge, so there is
     no open channel left for the floating tiles — they land on the paragraph
     rather than beside it. */
  .mbp-band__orb { display: none; }
  .mbp-promo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .mbp-plan__for { min-height: 0; }
  .mbp-office__card { text-align: left; }
  .mbp-stats { gap: 1rem 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mbp-hero__ring,
  .is-visible .mbp-orb,
  .is-visible .mbp-float,
  .is-visible .mbp-hero__pulse,
  .is-visible .mbp-band__orb,
  .is-in .mbp-pulse::after,
  .is-in .mbp-cat__rule { animation: none !important; }
  .mbp-lift:hover { transform: none; }
}