/* ══════════════════════════════════════════════════════════════════════════
   MEDBUS — MODULES / FEATURES PAGE
   ──────────────────────────────────────────────────────────────────────────
   Loaded only by frontend/modules.blade.php, on top of medbus-home.css.
   Nothing here redefines a token or a shared component: every rule is either
   a new modules-only block (.mb-mhero, .mb-rbac, .mb-role) or a modifier on
   an existing one.

   Motion policy is inherited, not restated. medbus-home.css already carries
   the global `prefers-reduced-motion` block that collapses every animation
   and transition on `.mb *` to 0.001ms, so each keyframe below is written to
   END where it STARTS — one 0.001ms run then leaves the element exactly
   where the static layout puts it.

   #mb-hero is load-bearing: medbus-home.js watches it and toggles
   `.is-visible`, which starts and pauses the hero's floating chips.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · HERO ──────────────────────────────────────────────────────────
   Reuses .mb-hero for the gradient, the wave curves and the button
   choreography. Only the art column is new: the care-team photo with role
   labels pinned around it. */
/* Bottom-anchored, not centred. The team is a cut-out with the figures
   already cropped at the knee, so it has to STAND on the edge of the block —
   floating it in the middle reads as a mistake. `align-self: end` plus a
   negative margin that cancels the hero's own bottom padding is the same
   pairing the home and about heroes use, and it holds at every width because
   both halves come from the one --mb-hero-pb value.

   The top padding is what the glass cards sit in: it makes the art column
   taller than the photo so they have somewhere to float that is not on top
   of somebody's face. */
.mb-mhero__art {
  position: relative;
  align-self: end;
  margin-bottom: calc(-1 * var(--mb-hero-pb));
  padding-top: clamp(3.25rem, 6vw, 5.5rem);
  margin-top: clamp(1rem, 2vw, 1.75rem);
}

/* — Backdrop —
   The about page's arrangement: one blue disc the group stands on, with a
   paler disc overlapping its left shoulder. No hairline rings — outlined
   circles read as wireframe leftovers rather than as a designed ground. */
.mb-mhero__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.mb-mhero__blob {
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(48% 42% at 30% 20%, rgba(255, 255, 255, .5), transparent 62%),
    radial-gradient(70% 44% at 52% 104%, rgba(255, 255, 255, .3), transparent 68%),
    linear-gradient(158deg, #eaf5ff 0%, #cbe5fd 46%, #a8d2f8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 36px 70px -40px rgba(9, 106, 201, .26);
  animation: mb-mhero-breathe 18s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-mhero__disc {
  position: absolute;
  left: -2%;
  bottom: 14%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(46% 46% at 34% 28%, rgba(255, 255, 255, .82), transparent 66%),
    linear-gradient(160deg, #eef5fe 0%, #d8e9fd 100%);
  animation: mb-mhero-breathe 23s var(--mb-ease) infinite reverse;
  animation-play-state: paused;
}
.mb-hero.is-visible .mb-mhero__blob,
.mb-hero.is-visible .mb-mhero__disc { animation-play-state: running; }
/* Breathes rather than travels, and returns to its start so the
   reduced-motion collapse leaves it at its laid-out size. */
@keyframes mb-mhero-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -8px, 0) scale(1.035); }
}

/* Small glass beads riding over the backdrop, no outlines. */
.mb-mhero__bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mb-mhero__bubbles span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: mb-mhero-drift 16s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-hero.is-visible .mb-mhero__bubbles span { animation-play-state: running; }
.mb-mhero__bubbles span:nth-child(1),
.mb-mhero__bubbles span:nth-child(2) {
  background:
    radial-gradient(38% 38% at 32% 28%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .2) 100%);
}
.mb-mhero__bubbles span:nth-child(1) { width: 7%;   aspect-ratio: 1; left: 8%;   top: 34%; animation-duration: 17s; animation-delay: -2s; }
.mb-mhero__bubbles span:nth-child(2) { width: 4.5%; aspect-ratio: 1; right: 10%; top: 26%; animation-duration: 13s; animation-delay: -6s; }
.mb-mhero__bubbles span:nth-child(3),
.mb-mhero__bubbles span:nth-child(4) { background: #fff; opacity: .65; }
.mb-mhero__bubbles span:nth-child(3) { width: 1.6%; aspect-ratio: 1; left: 24%;  top: 20%; animation-duration: 11s; animation-delay: -3s; }
.mb-mhero__bubbles span:nth-child(4) { width: 1.2%; aspect-ratio: 1; right: 26%; top: 44%; animation-duration: 19s; animation-delay: -8s; }

@keyframes mb-mhero-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(9px, -13px, 0) scale(1.06); }
  66%      { transform: translate3d(-7px, -5px, 0) scale(.96); }
}

/* The photo gets its own box so the role tags below can be positioned as a
   percentage of the PICTURE, not of the column — the column is taller than
   the photo now that the glass cards need room above it. */
.mb-mhero__figure { position: relative; z-index: 2; }
.mb-mhero__figure img { display: block; width: 100%; height: auto; }

/* — Glass cards —
   The same .mb-card component the home and about heroes float, so they read
   as one family. They live in the padding band above the photo, which is the
   only place on this hero that is guaranteed to be free of faces. */
.mb-mhero__card {
  position: absolute;
  z-index: 4;
  animation: mb-drift 8s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-hero.is-visible .mb-mhero__card { animation-play-state: running; }
.mb-mhero__card--a { left: -2%;  top: 0;    width: min(216px, 40%); animation-delay: -1.4s; }
.mb-mhero__card--b { right: -1%; top: 10%;  width: min(206px, 38%); animation-delay: -4.8s; animation-duration: 9.2s; }

/* — Role labels —
   Pills naming who each figure is. Solid white rather than the page's
   translucent glass: they sit over a photograph, where a .28-alpha fill
   loses its edge and the label stops being readable. */
.mb-role-tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .75rem;
  border-radius: var(--mb-r-pill);
  background: #fff;
  box-shadow: 0 10px 26px rgba(11, 34, 56, .16), 0 2px 5px rgba(11, 34, 56, .06);
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--mb-ink);
  white-space: nowrap;
  animation: mb-tag-float 7s var(--mb-ease) infinite;
  animation-play-state: paused;
}
.mb-hero.is-visible .mb-role-tag { animation-play-state: running; }
.mb-role-tag span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--mb-tag-bg, var(--mb-a-blue));
  color: var(--mb-tag-fg, var(--mb-a-blue-fg));
  flex: none;
}
.mb-role-tag span svg { width: 13px; height: 13px; }

/* Placement is measured off the photo, not eyeballed. Reading the silhouette
   per x-band gives the only headroom there is:

     x  0-20%   figure starts at y 10.1%
     x 20-40%   figure starts at y 11.4%
     x 40-60%   figure starts at y  0.3%   <- centre doctor, no headroom
     x 60-80%   figure starts at y  4.2%
     x 80-100%  figure starts at y 12.7%

   and skin detection puts the face band at y 11-40% across the whole width.
   So every tag sits below 44%, where there is only torso. Nothing is in the
   11-40% band, which is what was covering faces before.

   The two top corners were used at first, but the glass cards own that band
   now — a pill and a card in the same corner just stack on each other. */
.mb-role-tag--1 { left: 1%;   top: 46%;    animation-delay: -.5s;  animation-duration: 7.4s; }
.mb-role-tag--2 { left: 33%;  top: 47%;    animation-delay: -2.2s; animation-duration: 8.2s; }
.mb-role-tag--3 { right: 1%;  top: 44%;    animation-delay: -3.9s; animation-duration: 7.8s; }
.mb-role-tag--4 { left: 2%;   bottom: 10%; animation-delay: -5.1s; animation-duration: 8.6s; }
.mb-role-tag--5 { right: 1%;  bottom: 15%; animation-delay: -6.3s; animation-duration: 7.2s; }

@keyframes mb-tag-float {
  from, to { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* The one filled pill — the page's thesis in four words. */
.mb-mhero__seal {
  position: absolute;
  z-index: 3;
  right: 13%;
  bottom: 31%;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1rem .625rem .625rem;
  border-radius: var(--mb-r-pill);
  background: linear-gradient(135deg, var(--mb-blue) 0%, var(--mb-blue-700) 100%);
  box-shadow: 0 14px 34px rgba(9, 106, 201, .38);
  color: #fff;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.25;
  animation: mb-tag-float 9s var(--mb-ease) infinite -1.4s;
  animation-play-state: paused;
}
.mb-hero.is-visible .mb-mhero__seal { animation-play-state: running; }
.mb-mhero__seal-txt { display: block; }
.mb-mhero__seal b { display: block; font-weight: 500; color: rgba(255, 255, 255, .85); }
.mb-mhero__seal i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  flex: none;
}
.mb-mhero__seal i svg { width: 18px; height: 18px; }

/* ── 02 · RBAC PANEL ────────────────────────────────────────────────────
   Three columns: the pitch, a role picker, and the permission set for the
   picked role.

   The picker is CSS-only. Each role is a radio input plus a label, and the
   matching permission panel is shown with a sibling selector — so the
   demonstration works with no JavaScript at all, which matters because this
   block IS the argument for the feature it is describing. */
.mb-rbac {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.85fr);
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(30rem 20rem at 2% 0%, rgba(46, 139, 240, .1), transparent 62%),
    linear-gradient(150deg, #f2f8ff 0%, #eaf3fe 100%);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-xl);
}
.mb-rbac__copy .mb-h2 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); margin-bottom: .75rem; }
.mb-rbac__copy .mb-lede { font-size: .875rem; margin-bottom: 1.375rem; }

.mb-rbac__ticks { display: grid; gap: .75rem; }
.mb-rbac__ticks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .625rem;
  align-items: center;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mb-ink);
}
.mb-rbac__ticks svg { color: var(--mb-blue); }

/* Panels. */
.mb-rbac__panel {
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  box-shadow: var(--mb-shadow-sm);
  overflow: hidden;
}
.mb-rbac__panel h3 {
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--mb-line);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-ink);
}

/* The two panels sit inside one wrapper so all six radios can share a parent
   with BOTH of them — `~` only reaches siblings, and the checked role has to
   drive the label on the left and the permission set on the right. */
.mb-rbac__picker {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: clamp(.875rem, 1.6vw, 1.25rem);
  align-items: start;
}

.mb-rbac__roles { display: grid; padding: .375rem; }
.mb-rbac__role { display: block; cursor: pointer; }
.mb-rbac__role > span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: .625rem;
  align-items: center;
  padding: .5625rem .75rem;
  border-radius: var(--mb-r-sm);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mb-ink-soft);
  transition: background-color .2s var(--mb-ease), color .2s var(--mb-ease);
}
.mb-rbac__role > span svg { width: 18px; height: 18px; color: var(--mb-blue); }
.mb-rbac__role:hover > span { background: var(--mb-blue-50); }

/* Active + focus state per role, written out because the role list is fixed
   at six.

   Same `:checked ~ sibling` shape as the permission rule below — no :has(),
   so support goes back as far as :checked itself. The index class exists
   only to give these six selectors something stable to point at. */
#mbr-1:checked ~ .mb-rbac__rolespanel .mb-rbac__role--1 > span,
#mbr-2:checked ~ .mb-rbac__rolespanel .mb-rbac__role--2 > span,
#mbr-3:checked ~ .mb-rbac__rolespanel .mb-rbac__role--3 > span,
#mbr-4:checked ~ .mb-rbac__rolespanel .mb-rbac__role--4 > span,
#mbr-5:checked ~ .mb-rbac__rolespanel .mb-rbac__role--5 > span,
#mbr-6:checked ~ .mb-rbac__rolespanel .mb-rbac__role--6 > span {
  background: var(--mb-blue-100);
  color: var(--mb-blue);
}
/* The inputs are clipped out of sight, so the focus ring has to be drawn on
   the label the keyboard user can actually see. */
#mbr-1:focus-visible ~ .mb-rbac__rolespanel .mb-rbac__role--1 > span,
#mbr-2:focus-visible ~ .mb-rbac__rolespanel .mb-rbac__role--2 > span,
#mbr-3:focus-visible ~ .mb-rbac__rolespanel .mb-rbac__role--3 > span,
#mbr-4:focus-visible ~ .mb-rbac__rolespanel .mb-rbac__role--4 > span,
#mbr-5:focus-visible ~ .mb-rbac__rolespanel .mb-rbac__role--5 > span,
#mbr-6:focus-visible ~ .mb-rbac__rolespanel .mb-rbac__role--6 > span {
  outline: 2px solid var(--mb-blue);
  outline-offset: 1px;
}

/* Permission sets. All are in the DOM; the checked radio reveals one. The
   `~` combinator only looks forward, which is why every input sits before
   every panel in the markup. */
.mb-rbac__perms { position: relative; }
.mb-rbac__set { display: none; padding: .375rem; }
#mbr-1:checked ~ .mb-rbac__perms .mb-rbac__set--1,
#mbr-2:checked ~ .mb-rbac__perms .mb-rbac__set--2,
#mbr-3:checked ~ .mb-rbac__perms .mb-rbac__set--3,
#mbr-4:checked ~ .mb-rbac__perms .mb-rbac__set--4,
#mbr-5:checked ~ .mb-rbac__perms .mb-rbac__set--5,
#mbr-6:checked ~ .mb-rbac__perms .mb-rbac__set--6 { display: grid; }

.mb-rbac__set li {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5625rem .75rem;
  font-size: .8125rem;
  color: var(--mb-ink-soft);
  border-radius: var(--mb-r-sm);
  /* Rows fade up as the set swaps, which is what makes switching role read
     as the permissions CHANGING rather than the panel just redrawing. */
  animation: mb-perm-in .32s var(--mb-ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.mb-rbac__set li + li { border-top: 1px solid var(--mb-line); border-radius: 0; }
.mb-rbac__set b { margin-left: auto; flex: none; }

/* Ends at its resting state, so the reduced-motion collapse lands on a
   fully-drawn list rather than a blank panel. */
@keyframes mb-perm-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Allowed / denied marks. */
.mb-rbac__yes,
.mb-rbac__no {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
}
.mb-rbac__yes { background: var(--mb-blue); color: #fff; }
.mb-rbac__no  { background: #eef3f8; border: 1px solid var(--mb-line); }
.mb-rbac__yes svg { width: 12px; height: 12px; }

/* ── 03 · ROLE / MODULE CARDS ───────────────────────────────────────────
   The page's main body, and its main SEO surface: one card per role, each
   naming the module and the tasks it covers in the words a clinic would
   search for. */
/* The closing block's art column runs to the shell edge on this page, so the
   shared right-hand orbit at -12% lands outside the section and the section's
   own overflow clip cuts it in half. Scoped here rather than in the shared
   sheet, where the home page's narrower art column places it correctly. */
.mb-closing .mb-orbit--3 { right: 1%; }

/* ═══════════════════════════════════════════════════════════════════════
   GET STARTED BANNER
   Copy left, a composed scene right. Everything in the scene is markup, so it
   scales without going soft, and the whole thing collapses to a single column
   with the scene's furniture dropped rather than shrunk to illegibility.
   ═══════════════════════════════════════════════════════════════════════ */
.mb-start__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.75rem, 3vw, 3rem) 0;
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(112deg, #eef6ff 0%, #f7fbff 44%, #e8f2fd 100%);
}

/* — Background furniture — */
.mb-start__orb,
.mb-start__disc {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.mb-start__orb {
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 139, 240, .16), transparent 70%);
  animation: mb-start-orb 15s var(--mb-ease) infinite;
}
.mb-start__orb--1 { left: -5%;  top: -26%;    width: 34%; aspect-ratio: 1; }
.mb-start__orb--2 { left: 34%;  bottom: -34%; width: 30%; aspect-ratio: 1;
                    animation-duration: 19s; animation-delay: -7s; }
/* The disc behind the figure, as in the comp. */
.mb-start__disc {
  right: 2%;
  top: -14%;
  width: 30%;
  aspect-ratio: 1;
  background: linear-gradient(168deg, #dfeefc 0%, #cbe2fa 100%);
  opacity: .8;
}
.mb-start__dots {
  position: absolute;
  z-index: 0;
  right: 5.5%;
  bottom: 12%;
  width: 84px;
  height: 60px;
  background-image: radial-gradient(circle, rgba(9, 106, 201, .26) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
  pointer-events: none;
}
.mb-start__spark {
  position: absolute;
  z-index: 1;
  right: 26%;
  top: 8%;
  width: clamp(26px, 2.4vw, 40px);
  color: var(--mb-blue-400);
  opacity: .75;
  animation: mb-start-spark 5.5s var(--mb-ease) infinite;
}
.mb-start__spark svg { display: block; width: 100%; height: auto; }
/* Both return to the opening frame, so a reduced-motion render is the design. */
@keyframes mb-start-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
@keyframes mb-start-spark {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* — Copy — */
.mb-start__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-bottom: clamp(1.75rem, 3vw, 3rem);
}

/* The accent phrase is colour only — the swoosh under it is not drawn. */
.mb-start__hl { color: var(--mb-blue); }
.mb-start__hl svg { display: none; }
.mb-start__copy .mb-lede { font-size: clamp(.875rem, .84rem + .16vw, .9375rem); }

.mb-start__cta { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: clamp(1.125rem, 1.8vw, 1.5rem); }
.mb-start__cta .mb-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform .24s var(--mb-ease), box-shadow .24s var(--mb-ease),
              background-color .24s var(--mb-ease), color .24s var(--mb-ease),
              border-color .24s var(--mb-ease);
}
.mb-start__cta .mb-btn {
  padding: .625rem 1.0625rem;
  font-size: .8125rem;
}
.mb-start__cta .mb-btn svg { width: 16px; height: 16px; flex: none; }
.mb-start__cta .mb-btn--ghost { background: #fff; border-color: transparent; box-shadow: var(--mb-shadow-xs); }
.mb-start__cta .mb-btn--ghost svg { color: var(--mb-blue); }
.mb-start__cta .mb-btn:hover { transform: translateY(-2px); }
.mb-start__cta .mb-btn--primary:hover { box-shadow: 0 10px 24px rgba(9, 106, 201, .34); }
.mb-start__cta .mb-btn--ghost:hover { box-shadow: var(--mb-shadow-md); }
/* The arrow runs on ahead when you reach for the button. */
.mb-start__arrow { transition: transform .24s var(--mb-ease); }
.mb-start__cta .mb-btn--primary:hover .mb-start__arrow { transform: translateX(4px); }

.mb-start__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(.875rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.125rem, 1.8vw, 1.5rem);
}
.mb-start__trust li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--mb-muted);
}
.mb-start__trust li + li { padding-left: clamp(.875rem, 1.6vw, 1.5rem); border-left: 1px solid #d3e4f6; }
.mb-start__trust svg { width: 20px; height: 20px; flex: none; color: var(--mb-blue); }

/* — The scene — */
.mb-start__art { position: relative; z-index: 1; align-self: end; aspect-ratio: 1.62; }

.mb-start__arc {
  position: absolute;
  left: 1%;
  top: 6%;
  width: 42%;
  height: 88%;
  color: #a9cdf3;
}
/* The dash marches one full period, so the last frame is pixel-identical to
   the first — which is what a reduced-motion render collapses to. */
.mb-start__arc path { animation: mb-start-march 2.4s linear infinite; }
@keyframes mb-start-march { to { stroke-dashoffset: -14; } }

/* — The three glass panels — */
.mb-start__wins { position: absolute; inset: 0; z-index: 3; }
.mb-win {
  position: absolute;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: .5rem;
  width: 32%;
  padding: .6875rem .8125rem;
  border-radius: 16px;
  /* Glass: translucent white over the panel's gradient, blurred, with a bright
     inner edge. Solid white if the browser cannot blur — see the @supports. */
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px rgba(11, 34, 56, .10);
  animation: mb-start-float 7s var(--mb-ease) infinite;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mb-win { background: rgba(255, 255, 255, .94); }
}
.mb-win--collab { left: 2%; top: 1%; }
.mb-win--care   { left: 0;  top: 37%; animation-duration: 8.5s; animation-delay: -2.4s; }
.mb-win--speed  { left: 3%; top: 72%; animation-duration: 9.5s; animation-delay: -4.8s; }
@keyframes mb-start-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}
.mb-win__ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
}
.mb-win--care  .mb-win__ico { background: #e4f6ec; color: #0e7a48; }
.mb-win--speed .mb-win__ico { background: #eae7fd; color: #5b46d6; }
.mb-win__ico svg { width: 19px; height: 19px; }
.mb-win__txt { min-width: 0; }
.mb-win__txt b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--mb-ink);
  line-height: 1.3;
}
.mb-win__txt > span {
  display: block;
  margin-top: .125rem;
  font-size: .75rem;
  color: var(--mb-muted);
  line-height: 1.4;
}

/* — Figure, app card and chips — */
.mb-start__stage { position: absolute; right: 0; bottom: 0; width: 64%; height: 100%; }

.mb-start__ui {
  position: absolute;
  left: 0;
  top: 8%;
  z-index: 1;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: .5rem;
  width: 78%;
  padding: .625rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 40px rgba(11, 34, 56, .12);
}
.mb-ui__side { display: grid; gap: .1875rem; align-content: start; }
.mb-ui__brand {
  display: flex;
  align-items: center;
  gap: .3125rem;
  margin-bottom: .3125rem;
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 800;
  color: var(--mb-ink);
}
.mb-ui__brand svg { width: 16px; height: 16px; color: var(--mb-blue); }
.mb-ui__nav {
  display: flex;
  align-items: center;
  gap: .3125rem;
  padding: .25rem .375rem;
  border-radius: 7px;
  font-size: .625rem;
  color: var(--mb-muted);
}
.mb-ui__nav svg { width: 13px; height: 13px; flex: none; }
.mb-ui__nav.is-on { background: #e3effd; color: var(--mb-blue); font-weight: 700; }

.mb-ui__main { display: grid; gap: .375rem; align-content: start; }
.mb-ui__stat {
  padding: .375rem .5rem;
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--mb-shadow-xs);
}
.mb-ui__stat span { display: block; font-size: .5625rem; color: var(--mb-muted); }
.mb-ui__stat b {
  display: block;
  margin-top: .0625rem;
  font-family: var(--mb-font-head);
  font-size: .9375rem;
  font-weight: 800;
  color: var(--mb-ink);
}
.mb-ui__stat i { font-size: .5625rem; font-style: normal; font-weight: 700; color: #0e7a48; }
.mb-ui__chart {
  padding: .375rem .5rem;
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--mb-shadow-xs);
  color: var(--mb-blue);
}
.mb-ui__chart svg { display: block; width: 100%; height: 34px; }

.mb-start__doc {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 58%;
  height: auto;
}

.mb-start__chip {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .1875rem .5rem;
  padding: .625rem .75rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 28px rgba(11, 34, 56, .12);
  animation: mb-start-float 8s var(--mb-ease) infinite;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mb-start__chip { background: rgba(255, 255, 255, .95); }
}
.mb-start__chip--stat   { right: -5%; top: 9%; width: 43%; }
.mb-start__chip--secure { right: -5%; bottom: 3%; width: 52%;
                          animation-duration: 9.5s; animation-delay: -3.5s; }
.mb-chipico {
  grid-row: span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
}
.mb-chipico--green { background: #e4f6ec; color: #0e7a48; }
.mb-chipico svg { width: 17px; height: 17px; }
.mb-start__chip b {
  align-self: end;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 800;
  color: var(--mb-ink);
  line-height: 1.2;
}
.mb-start__chip > span:last-child {
  align-self: start;
  font-size: .75rem;
  color: var(--mb-muted);
  line-height: 1.35;
}

/* Side by side only while the copy column can still hold the three buttons on
   one row AND leave the scene enough width to compose in. Below that the panel
   stacks and the scene takes the full width back, which keeps both intact
   instead of squeezing both. */
@media (max-width: 1300px) {
  .mb-start__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2rem);
  }
  .mb-start__art { width: min(100%, 700px); margin-inline: auto; aspect-ratio: 1.55; }
  .mb-start__orb--2 { left: 8%; }
}

@media (max-width: 700px) {
  /* Below this the app card's own type would be under 7px, so the scene keeps
     only the figure and the panels move under the copy as a plain list. */
  .mb-start__panel { padding: clamp(1.25rem, 5vw, 1.75rem); }
  .mb-start__art { display: flex; flex-direction: column-reverse; gap: 1rem; aspect-ratio: auto; }
  .mb-start__wins { position: static; display: grid; gap: .5rem; }
  .mb-win { position: static; width: 100%; animation: none; }
  .mb-start__stage { position: relative; right: auto; bottom: auto; width: min(280px, 76%); margin: 0 auto; height: auto; }
  .mb-start__ui { display: none; }
  .mb-start__doc { position: static; width: 100%; }
  .mb-start__chip { animation-duration: 8s; }
  .mb-start__chip--stat { top: 4%; right: -6%; width: 62%; }
  .mb-start__chip--secure { bottom: 2%; right: auto; left: -6%; width: 70%; }
  .mb-start__arc, .mb-start__dots, .mb-start__spark { display: none; }
  .mb-start__trust li + li { padding-left: 0; border-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SPECIALTY GRID
   ═══════════════════════════════════════════════════════════════════════ */
.mb-specs { position: relative; overflow: hidden; background: #f7fafe; }
.mb-specs__wash {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -18%;
  width: min(900px, 90%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(9, 106, 201, .08), transparent 68%);
  pointer-events: none;
}
.mb-specs .mb-shell { position: relative; z-index: 1; }

/* The pill above the heading. */
.mb-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  margin-bottom: .875rem;
  padding: .375rem .875rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d9e8fa;
  box-shadow: var(--mb-shadow-xs);
  color: var(--mb-blue);
  font-size: .75rem;
  font-weight: 700;
}

.mb-specs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.2vw, 1.125rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.mb-spec {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 20px;
  gap: .75rem;
  align-items: start;
  height: 100%;
  padding: clamp(.875rem, 1.2vw, 1.125rem);
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: 16px;
  box-shadow: var(--mb-shadow-xs);
  text-decoration: none;
  transition: transform .26s var(--mb-ease), box-shadow .26s var(--mb-ease),
              border-color .26s var(--mb-ease);
}
.mb-spec:hover {
  transform: translateY(-3px);
  border-color: #cfe3fa;
  box-shadow: var(--mb-shadow-md);
}
.mb-spec__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  transition: transform .26s var(--mb-ease), background-color .26s var(--mb-ease);
}
/* Mask, not <img>: the artwork is two-tone and a mask uses only its alpha, so
   the glyph paints in one flat blue. */
.mb-spec__tile i {
  display: block;
  width: 30px;
  height: 30px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.mb-spec:hover .mb-spec__tile { transform: scale(1.07); background: #d9e8fa; }

.mb-spec__txt { min-width: 0; }
.mb-spec__txt b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--mb-ink);
  line-height: 1.3;
}
/* The short rule under the name, which grows on hover — the one moving part. */
/* The table's nav copy, held to two lines: it is written for the Products
   menu and runs to ninety characters on some rows. */
.mb-spec__sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin-top: .4375rem;
  font-size: .75rem;
  color: var(--mb-muted);
  line-height: 1.45;
}
/* Full width, so it reads as a divider between the name and its description
   rather than a stub of underline. Hover deepens it instead of stretching it. */
.mb-spec__rule {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: .4375rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mb-blue) 0%, #cfe3fa 100%);
  opacity: .75;
  transition: opacity .3s var(--mb-ease);
}
.mb-spec:hover .mb-spec__rule { opacity: 1; }

.mb-spec__go {
  width: 20px;
  height: 20px;
  color: var(--mb-blue-400);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .26s var(--mb-ease), transform .26s var(--mb-ease);
}
.mb-spec__go svg { width: 100%; height: 100%; }
.mb-spec:hover .mb-spec__go { opacity: 1; transform: translateX(0); }

.mb-specs__note { margin-top: clamp(1.25rem, 2vw, 1.75rem); font-size: .8125rem; text-align: center; }
.mb-specs__note a { color: var(--mb-blue); font-weight: 600; }

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

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE BENTO
   A four-column grid with the device mock pinned to the middle two columns
   of rows two and three. Everything else auto-places around it, which is why
   the cards need no explicit coordinates: grid places definite items first,
   then flows the rest into what is left.
   ═══════════════════════════════════════════════════════════════════════ */
.mb-featgrid { position: relative; overflow: hidden; }
/* One soft wash behind the middle of the grid, so the white section does not
   read as a flat sheet under eleven white cards. */
.mb-featgrid__wash {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 42%;
  width: min(1180px, 96%);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(9, 106, 201, .09), transparent 70%);
  pointer-events: none;
}
.mb-featgrid .mb-shell { position: relative; z-index: 1; }
.mb-featgrid__note {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  font-size: .8125rem;
  text-align: center;
}
.mb-featgrid__note a { color: var(--mb-blue); font-weight: 600; }

.mb-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.2vw, 1.125rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* — Feature card —
   Tile, title and subtitle on one row, then the keyword points. Everything is
   blue on ink: the card is a feature index, and a palette per row would make
   eleven of them read as eleven unrelated things. */
.mb-bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: clamp(1rem, 1.3vw, 1.25rem);
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: 20px;
  box-shadow: var(--mb-shadow-xs);
  transition: transform .28s var(--mb-ease), box-shadow .28s var(--mb-ease),
              border-color .28s var(--mb-ease);
}
.mb-bcard:hover {
  transform: translateY(-3px);
  border-color: #cfe3fa;
  box-shadow: var(--mb-shadow-md);
}

.mb-bcard__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .625rem;
  align-items: center;
  padding-bottom: .625rem;
  border-bottom: 1px solid #eef4fc;
}
.mb-bcard__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  transition: transform .28s var(--mb-ease);
}
.mb-bcard__ico svg { width: 23px; height: 23px; }
.mb-bcard:hover .mb-bcard__ico { transform: scale(1.07) rotate(-4deg); }

.mb-bcard__name { min-width: 0; }
.mb-bcard__name h3 {
  margin: 0;
  font-family: var(--mb-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--mb-ink);
  line-height: 1.25;
}
.mb-bcard__name p {
  margin: .0625rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mb-blue);
  line-height: 1.35;
}

/* Sits on the card's top edge, so a long title never has to make room for it. */
.mb-bcard__badge {
  position: absolute;
  top: -.5625rem;
  right: 1rem;
  border: 2px solid #fff;
  padding: .1875rem .5rem;
  border-radius: 999px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mb-bcard__desc {
  margin: 0;
  font-size: .875rem;
  color: var(--mb-muted);
  line-height: 1.55;
}

/* The points carry the search terms, so they sit last and stay full phrases —
   pushed to the foot so they line up across a row whatever the description
   above them does. */
.mb-bcard__pts { display: grid; gap: .375rem; margin-top: auto; padding-top: .125rem; }
.mb-bcard__pts li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: .4375rem;
  align-items: start;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--mb-ink-soft);
}
.mb-bcard__pts svg { width: 15px; height: 15px; margin-top: .125rem; color: var(--mb-blue-400); }

/* "View more" — sits at the foot of every card, under the points. */
.mb-bcard__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .375rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid #cfe3fa;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s var(--mb-ease), color .25s var(--mb-ease), border-color .25s var(--mb-ease);
}
.mb-bcard__more svg { transition: transform .25s var(--mb-ease); }
.mb-bcard__more:hover, .mb-bcard__more:focus-visible { background: var(--mb-blue); border-color: var(--mb-blue); color: #fff; }
.mb-bcard__more:hover svg, .mb-bcard__more:focus-visible svg { transform: translateX(3px); }
.mb-bcard__more:focus-visible { outline: 2px solid var(--mb-blue); outline-offset: 2px; }

/* — Two-column feature card — the points split into two columns so it is
   the same height as its single-width neighbours. */
.mb-bcard--span2 { grid-column: span 2; }
.mb-bcard--span2 .mb-bcard__pts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
@media (max-width: 640px) {
  .mb-bcard--span2 { grid-column: auto; }
  .mb-bcard--span2 .mb-bcard__pts { grid-template-columns: minmax(0, 1fr); }
}

/* — Wide feature card —
   Spans the whole row: a bigger head and a readable description on the left,
   the points laid out in columns on the right so the extra detail doesn't
   turn into one long list. */
.mb-bcard--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: .875rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: linear-gradient(135deg, #fff 55%, var(--mb-blue-100) 160%);
}
.mb-bcard--wide .mb-bcard__head { grid-column: 1; }
.mb-bcard--wide .mb-bcard__desc { grid-column: 1; font-size: .9375rem; }
.mb-bcard--wide .mb-bcard__more { grid-column: 1; justify-self: start; }
.mb-bcard--wide .mb-bcard__pts {
  grid-column: 2;
  grid-row: 1 / span 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1.25rem;
  margin-top: 0;
  padding-top: 0;
}
.mb-bcard--wide .mb-bcard__pts li { font-size: .875rem; }
.mb-bcard--wide .mb-bcard__name h3 { font-size: 1.1875rem; }
.mb-bcard--wide .mb-bcard__name p { font-size: .875rem; }
@media (max-width: 860px) {
  .mb-bcard--wide { grid-template-columns: minmax(0, 1fr); }
  .mb-bcard--wide .mb-bcard__pts { grid-column: 1; grid-row: auto; }
}
@media (max-width: 480px) {
  .mb-bcard--wide .mb-bcard__pts { grid-template-columns: minmax(0, 1fr); }
}

/* — The device mock — */
.mb-bento__hub {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  min-height: 320px;
  padding: clamp(1rem, 2vw, 2rem);
}
.mb-hub__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: 96%;
  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%);
  animation: mb-hub-glow 9s var(--mb-ease) infinite;
  animation-play-state: paused;
  /* On wide screens this circle is taller than the hub and spills over the
     cards above it — it must never swallow their "View more" clicks. */
  pointer-events: none;
}
.mb-bento__hub.is-in .mb-hub__glow { animation-play-state: running; }
/* Rests at its laid-out size, so a paused or reduced-motion frame is the
   design frame rather than a half-faded one. */
@keyframes mb-hub-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.07); opacity: .8; }
}

.mb-hub__stage { position: relative; z-index: 1; width: 100%; max-width: 480px; }
.mb-hub__laptop { width: 88%; }
.mb-hub__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);
}
.mb-hub__screen img { display: block; width: 100%; height: auto; border-radius: 7px 7px 1px 1px; }
.mb-hub__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);
}
.mb-hub__phone {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: 25%;
  padding: 4px;
  background: linear-gradient(160deg, #2b3f55 0%, #16283a 100%);
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(11, 34, 56, .22);
}
.mb-hub__phone img { display: block; width: 100%; height: auto; border-radius: 10px; }

.mb-hub__cap {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: .75rem;
  color: var(--mb-muted);
  text-align: center;
  line-height: 1.5;
}
.mb-hub__cap b { color: var(--mb-ink); font-weight: 700; }

@media (max-width: 1080px) {
  /* The device gives up its pinned cell and takes a full row of its own —
     at two columns there is no middle to pin it to. */
  .mb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-bento__hub { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .mb-hub__stage { max-width: 460px; }
}

@media (max-width: 640px) {
  .mb-bento { grid-template-columns: minmax(0, 1fr); }
  .mb-hub__stage { max-width: 340px; }
}

/* Three across, with the scene reduced to a thumbnail in the card's
   bottom-right on a circle that runs off the corner. A full-width scene band
   made the card mostly photograph; a full-height column made it a colour
   block. This keeps the copy as the card and the picture as an accent. */
.mb-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.875rem, 1.6vw, 1.375rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.mb-role {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-xl);
  box-shadow: var(--mb-shadow-xs);
  overflow: hidden;
  transition: transform .28s var(--mb-ease), box-shadow .28s var(--mb-ease),
              border-color .28s var(--mb-ease);
}
.mb-role:hover {
  transform: translateY(-4px);
  border-color: #cfe3fa;
  box-shadow: var(--mb-shadow-md);
}

/* — Thumbnail —
   Absolute, so it costs the copy no layout; the list reserves the space it
   needs on its own last rows below. */
.mb-role__media {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: clamp(156px, 45%, 222px);
  aspect-ratio: 1;
}
/* The circle, larger than the picture and centred low and right of it, so the
   card's corner crops it into a quarter-round ground. */
.mb-role__blob {
  position: absolute;
  right: -12%;
  bottom: -12%;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(52% 52% at 38% 30%, rgba(255, 255, 255, .85), transparent 68%),
    linear-gradient(160deg, #e4f0fd 0%, #cde2fa 100%);
  animation: mb-role-blob 16s var(--mb-ease) infinite;
  animation-play-state: paused;
}
/* Only runs while the grid is on screen — fifteen always-animating shapes is
   fifteen live compositor layers on a page nobody may have scrolled to. */
.mb-roles.is-visible .mb-role__blob { animation-play-state: running; }
.mb-role:nth-child(3n+2) .mb-role__blob { animation-duration: 19s; animation-delay: -6s; }
.mb-role:nth-child(3n)   .mb-role__blob { animation-duration: 14s; animation-delay: -10s; }
/* Returns to its start, so reduced motion leaves the shape as laid out. */
@keyframes mb-role-blob {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(1.5%, -1.5%, 0) scale(1.05); }
  66%      { transform: translate3d(-1.5%, 1%, 0) scale(.97); }
}
.mb-role__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  /* Every file is padded to the same square, so contain seats each subject on
     the box floor at one shared scale. */
  object-fit: contain;
  object-position: center bottom;
  transition: transform .4s var(--mb-ease);
}
.mb-role:hover .mb-role__media img { transform: scale(1.06); }

/* Arrow, in the card's own top-right. */
.mb-role__go {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  transition: transform .28s var(--mb-ease), background-color .28s var(--mb-ease),
              color .28s var(--mb-ease);
}
.mb-role:hover .mb-role__go { transform: translateX(3px); background: var(--mb-blue); color: #fff; }

/* Linked cards: the title link stretches over the card, so a click anywhere —
   the arrow included — opens the module page, with one link per card for
   keyboard and screen-reader users. */
.mb-role__link { color: inherit; text-decoration: none; }
.mb-role__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.mb-role--link { cursor: pointer; }
.mb-role__link:focus-visible { outline: none; }
.mb-role__link:focus-visible::after { outline: 3px solid var(--mb-blue); outline-offset: 3px; }
.mb-role--link:focus-within .mb-role__go { background: var(--mb-blue); color: #fff; }

/* — Copy — */
.mb-role__body {
  flex: 1;
  padding: clamp(1.125rem, 1.5vw, 1.5rem);
  min-width: 0;
}

.mb-role__head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  /* Clear of the arrow parked in the corner. */
  padding-right: 2.75rem;
  margin-bottom: 1.125rem;
}
.mb-role__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  transition: transform .28s var(--mb-ease), background-color .28s var(--mb-ease);
}
.mb-role__ico svg { width: 25px; height: 25px; }
.mb-role:hover .mb-role__ico { transform: scale(1.06) rotate(-4deg); }

.mb-role__name { min-width: 0; }
.mb-role__name b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.016em;
  color: var(--mb-ink);
  line-height: 1.25;
}
.mb-role__name > span {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  color: var(--mb-muted);
  line-height: 1.4;
}

/* — Point list —
   One column: each label is the keyword a clinic searches for, so wrapping it
   mid-phrase to save vertical space is the wrong trade on this page. */
/* The thumbnail is out of flow, so the last rows carve out its column
   themselves. Every card carries exactly six points, which is what makes a
   fixed count safe here. */
.mb-role__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.mb-role__list li:nth-last-child(-n+3) { padding-right: 52%; }
.mb-role__list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: .625rem;
  align-items: start;
}
.mb-role__pin {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
  transition: transform .24s var(--mb-ease);
}
.mb-role__pin svg { width: 17px; height: 17px; }
.mb-role__list li:hover .mb-role__pin { transform: translateY(-2px); }

.mb-role__txt { min-width: 0; }
.mb-role__txt b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mb-ink);
  line-height: 1.35;
}
.mb-role__txt span {
  display: block;
  margin-top: .0625rem;
  font-size: .75rem;
  color: var(--mb-muted);
  line-height: 1.45;
}

/* A module spotlight above the grid: one dashboard shot carrying the point
   that every module reports into the same place. */
.mb-spotlight {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(26rem 18rem at 96% 8%, rgba(46, 139, 240, .12), transparent 62%),
    linear-gradient(150deg, #ffffff 0%, #f4f9ff 100%);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-xl);
  box-shadow: var(--mb-shadow-xs);
}
.mb-spotlight h3 {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .75rem;
}
.mb-spotlight > div > p { font-size: .9375rem; color: var(--mb-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.mb-spotlight .mb-ticks li { font-size: .875rem; }

/* Proof row under the tick list. Same shape as the home page's .mb-facts,
   scoped here so it can sit tighter inside the panel. */
.mb-spotlight__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mb-line);
}
.mb-spotlight__facts li { display: grid; gap: .1rem; }
.mb-spotlight__facts b {
  font-family: var(--mb-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mb-blue);
  line-height: 1.15;
}
.mb-spotlight__facts span { font-size: .75rem; color: var(--mb-muted); line-height: 1.4; }
.mb-spotlight__note { margin-top: 1.125rem; font-size: .8125rem; color: var(--mb-muted); line-height: 1.6; }
.mb-spotlight__note a { font-weight: 600; }

/* The copy column is much taller now, so pin the shot to the top of the row
   rather than centring it against a column it can no longer match. */
.mb-spotlight { align-items: start; }
.mb-spotlight__art { position: sticky; top: 96px; }

.mb-spotlight__art { position: relative; }
.mb-spotlight__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mb-r-lg);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
}
/* Two small stat chips over the shot, drifting on the shared keyframe. */
.mb-spotlight__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(11, 34, 56, .14);
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--mb-ink);
  white-space: nowrap;
  animation: mb-tag-float 8s var(--mb-ease) infinite;
}
.mb-spotlight__chip svg { color: var(--mb-blue); flex: none; }
.mb-spotlight__chip--a { left: -3%; top: 12%; }
.mb-spotlight__chip--b { right: -3%; bottom: 14%; animation-delay: -4s; animation-duration: 9.4s; }

/* ── 04 · COMMITMENT ────────────────────────────────────────────────────
   Four centred marks. Deliberately lighter than the About page's version of
   this block — there it is a section with copy, here it is a reassurance
   strip between the modules and the FAQ. */
/* The section sits on its own ground rather than the page's, with two soft
   washes drifting behind the cards. They are pseudo-elements, not background
   layers, because a background-image cannot animate on the compositor. */
.mb-pledgesec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #f6faff 0%, #eef6ff 52%, #f5f9ff 100%);
}
.mb-pledgesec::before,
.mb-pledgesec::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  animation: mb-pledge-wash 20s var(--mb-ease) infinite;
}
.mb-pledgesec::before {
  left: -10%; top: -40%;
  width: 38%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(46, 139, 240, .18), transparent 72%);
}
.mb-pledgesec::after {
  right: -12%; bottom: -46%;
  width: 42%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(46, 139, 240, .16), transparent 72%);
  animation-duration: 25s;
  animation-direction: reverse;
}
/* Returns to its start, so reduced motion leaves both washes put. */
@keyframes mb-pledge-wash {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(5%, 6%, 0) scale(1.12); }
  66%      { transform: translate3d(-4%, 9%, 0) scale(.94); }
}

.mb-pledgestrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.875rem, 1.6vw, 1.25rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  counter-reset: pledge;
}
.mb-pledgestrip li {
  position: relative;
  display: grid;
  gap: .6875rem;
  align-content: start;
  padding: 1.625rem 1.375rem 1.5rem;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-r-lg);
  box-shadow: var(--mb-shadow-xs);
  overflow: hidden;
  transition: transform .3s var(--mb-ease), box-shadow .3s var(--mb-ease),
              border-color .3s var(--mb-ease);
}
.mb-pledgestrip li:hover {
  transform: translateY(-5px);
  border-color: #cfe3fa;
  box-shadow: var(--mb-shadow-md);
}
/* Rail across the top, drawn in from the left on hover. */
.mb-pledgestrip li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mb-blue-400), var(--mb-blue));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .32s var(--mb-ease);
}
.mb-pledgestrip li:hover::before { transform: scaleX(1); }
/* Ghost numeral. Drawn by a counter rather than sitting in the DOM, so a
   screen reader never announces it. */
.mb-pledgestrip li::after {
  counter-increment: pledge;
  content: "0" counter(pledge);
  position: absolute;
  right: .5rem;
  top: .125rem;
  font-family: var(--mb-font-head);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mb-blue);
  opacity: .07;
  pointer-events: none;
  transition: opacity .32s var(--mb-ease);
}
.mb-pledgestrip li:hover::after { opacity: .13; }

.mb-pledgestrip .mb-tile {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  transition: transform .3s var(--mb-ease);
}
.mb-pledgestrip .mb-tile svg { width: 26px; height: 26px; }
.mb-pledgestrip li:hover .mb-tile { transform: translateY(-3px) scale(1.07) rotate(-5deg); }
.mb-pledgestrip b {
  font-family: var(--mb-font-head);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--mb-ink);
  line-height: 1.35;
  text-wrap: balance;
}
.mb-pledgestrip p { font-size: .8125rem; color: var(--mb-muted); line-height: 1.6; }

/* ── 05 · CLOSING CTA ───────────────────────────────────────────────────
   Nothing here: the closing block is the home page's .mb-closing, styled
   entirely by medbus-home.css. The page-specific .mb-mcta rules it replaced
   are gone rather than left behind — dead CSS for a block that no longer
   exists is a trap for whoever edits this next. */

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  /* The pitch stacks above the picker rather than being squeezed beside it. */
  .mb-rbac { grid-template-columns: minmax(0, 1fr); }
  .mb-spotlight { grid-template-columns: minmax(0, 1fr); }
  .mb-spotlight__art { position: static; }
  /* Full-width shot: no gutter for the chips to hang into, so they sit just
     inside its edges instead of pushing the page wider than the screen. */
  .mb-spotlight__chip--a { left: 2%; }
  .mb-spotlight__chip--b { right: 2%; }

  .mb-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mb-pledgestrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The seal sits over the middle of the photo once the art column is full
     width, where it lands on faces. */
  .mb-mhero__seal { right: 4%; bottom: 8%; }
}

@media (max-width: 720px) {
  .mb-rbac__picker { grid-template-columns: minmax(0, 1fr); }
  /* The chips hang off the shot's edges; at this width there is no gutter
     left for them to hang into. */
  .mb-spotlight__chip { display: none; }
  .mb-roles { grid-template-columns: minmax(0, 1fr); }
  /* One card per row is wide enough that the thumbnail needs a smaller share
     and only the last two rows have to step around it. */
  .mb-role__media { width: clamp(150px, 42%, 200px); }
  .mb-role__list li:nth-last-child(-n+3) { padding-right: 52%; }

  /* Five pills over a photo this size is confetti — keep the two that name
     the roles the page leads with, and the seal. */
  .mb-role-tag--2,
  .mb-role-tag--4,
  .mb-role-tag--5 { display: none; }

  /* And move the survivors clear of the faces. The pills are a fixed height,
     so on a photo this much shorter they stopped being a thin strip and
     started reaching into the 11-40% face band — a tag that clears a face at
     729px wide does not automatically clear it at 345px. */
  .mb-role-tag--1 { top: auto; bottom: 34%; left: 0; }
  .mb-role-tag--3 { top: auto; bottom: 12%; right: 0; }

  /* The glass cards go entirely. They are a fixed height too, and the band
     above the photo shrinks faster than they do — at this width they were
     sitting squarely on the faces. A ~150px card over a 345px photo is not
     readable anyway, which is the same call the about page makes. */
  .mb-mhero__card { display: none; }
  /* Without them the top band is dead space, so give it back to the photo. */
  .mb-mhero__art { padding-top: 0; }
}

@media (max-width: 560px) {
  .mb-pledgestrip { grid-template-columns: minmax(0, 1fr); }
  .mb-mhero__seal { font-size: .75rem; }
}