/* ══════════════════════════════════════════════════════════════════════════
   MEDBUS — FEATURE DETAIL PAGES
   Loaded after medbus-product.css, which supplies almost everything; this
   file adds only what a feature page has and a specialty page does not:

     01  Hero — framed photograph, dashboard window, floating chips
     02  Key takeaways
     03  Numbered workflow steps
     04  Detail figure (any aspect ratio)
     05  Related-feature cards
     06  Responsive

   Motion follows the same rules as the specialty pages: transform/opacity
   only, loops gated on [data-drift].is-visible, nothing under reduced motion
   (medbus-product.css already switches every .mpx animation off).
   ══════════════════════════════════════════════════════════════════════════ */

/* Every feature page uses the features page's brand blue, not a per-page
   tone — they read as one family with the page that links to them. */
.mfx {
  --sp: var(--mb-blue);
  --sp-soft: var(--mb-blue-100);
  --sp-ring: rgba(9, 106, 201, .22);
}

/* ── 01 · HERO ─────────────────────────────────────────────────────────── */
.mfx-hero__grid { align-items: center; }
.mfx .mpx-hero__copy { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.mfx-title { font-size: clamp(1.9rem, 1.2rem + 2.5vw, 2.9rem); }

/* The art column: photograph in a white frame, inset from the top and the
   inner edge so the dashboard window can sit behind its corner. */
.mfx-art {
  position: relative;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.mfx-art__photo {
  position: relative;
  z-index: 2;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 7px solid #fff;
  background: #fff;
  box-shadow: 0 30px 60px rgba(9, 50, 110, .16), 0 6px 16px rgba(9, 50, 110, .06);
  animation: mpx-lift 1s var(--mb-ease) .1s both;
}
.mfx-art__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* No frame: the module scenes are cut-outs on white, so the photo sits
   straight on the hero. multiply drops the white into the page tint (and lets
   the dashboard window behind show through it); a soft mask fades the desk
   edge instead of ending it on a hard line. */
.mfx-art__photo {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.mfx-art__photo img {
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.mfx-art__screen {
  top: 0;
  left: 0;
  width: 52%;
  z-index: 1;
}

.mfx-art__pulse {
  position: absolute;
  z-index: 0;
  right: -6%;
  top: 4%;
  width: clamp(150px, 17vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sp-soft) 45%, var(--sp-ring) 100%);
  pointer-events: none;
}
.mfx-art__pulse i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sp-ring);
  opacity: 0;
}
.is-visible .mfx-art__pulse { animation: mpx-zoom 4.5s ease-in-out infinite; }
.is-visible .mfx-art__pulse i { animation: mpx-ripple 4.5s ease-out infinite; }
.is-visible .mfx-art__pulse i:nth-child(2) { animation-delay: 2.25s; }

/* Floating app cards. */
.mfx-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem .65rem .65rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: 0 16px 36px rgba(9, 50, 110, .18);
  animation: mpx-pop .6s var(--mb-ease) .75s both;
}
.mfx-chip--1 { left: 0; bottom: 10%; }
.mfx-chip--2 { right: -2%; top: 18%; animation-delay: .95s; }
.mfx-chip__ico {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--sp);
  color: #fff;
}
.mfx-chip__ico svg { width: 18px; height: 18px; }
.mfx-chip small { display: block; font-size: .72rem; line-height: 1.2; color: var(--mb-muted); }
.mfx-chip b { display: block; font-family: var(--mb-font-head); font-size: .9rem; line-height: 1.3; color: var(--mb-ink); white-space: nowrap; }
.is-visible .mfx-chip--1 { animation: mpx-pop .6s var(--mb-ease) .75s both, mpx-float 6s var(--mb-ease) 1.5s infinite; }
.is-visible .mfx-chip--2 { animation: mpx-pop .6s var(--mb-ease) .95s both, mpx-float 6.8s var(--mb-ease) 2s infinite; }

/* ── 02 · KEY TAKEAWAYS ────────────────────────────────────────────────── */
.mfx-takeaways { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.mfx-takeaways li { font-size: .9rem; }

/* ── 03 · NUMBERED STEPS ───────────────────────────────────────────────── */
.mfx-step { font-family: var(--mb-font-head); font-size: 1rem; font-weight: 700; }

/* ── 04 · DETAIL FIGURE ────────────────────────────────────────────────── */
/* Placeholder photographs come in several shapes (4:3 scenes, 16:9 screen
   shots); a fixed 4:3 crop keeps every page's layout identical. */
.mfx-why__frame img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ── 05 · RELATED-FEATURE CARDS ────────────────────────────────────────── */
.mfx-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.mfx-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: .4rem .9rem;
  height: 100%;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mpx-card);
  text-decoration: none;
  transition: transform .28s var(--mb-ease), box-shadow .28s var(--mb-ease), border-color .28s var(--mb-ease);
}
.mfx-link:hover, .mfx-link:focus-visible { transform: translateY(-3px); border-color: var(--sp-ring); box-shadow: var(--mpx-card-hover); }
.mfx-link:hover .mpx-iconbox { background: var(--sp); color: #fff; }
.mfx-link__body b { display: block; margin-bottom: .2rem; font-family: var(--mb-font-head); font-size: 1rem; color: var(--mb-ink); }
.mfx-link__body span { display: block; font-size: .85rem; line-height: 1.55; color: var(--mb-muted); }
.mfx-link__go {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--mb-blue);
}
.mfx-link__go svg { transition: transform .25s var(--mb-ease); }
.mfx-link:hover .mfx-link__go svg { transform: translateX(3px); }

/* ── 06 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .mfx-art { max-width: 40rem; margin-inline: auto; }
  .mfx-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mfx-art { padding: 2rem 0 1.5rem 1.25rem; }
  .mfx-art__screen { width: 60%; }
  .mfx-chip { padding: .5rem .7rem .5rem .5rem; }
  .mfx-chip__ico { width: 30px; height: 30px; }
  .mfx-chip b { font-size: .8rem; }
  .mfx-chip--1 { left: -.25rem; bottom: 4%; }
  .mfx-chip--2 { display: none; }
  .mfx-art__pulse { width: 120px; }
}

/* ── 07 · PHOTO BANNER HERO ────────────────────────────────────────────────
   For feature pages with their own wide photograph (config 'banner'). The
   photo covers the right ~62% of the band and fades into the page tint
   behind the copy, so the headline always sits on a clean background. */
.mfx-banner {
  position: relative;
  overflow: hidden;
  overflow: clip;
  /* Reduced from clamp(520px, 42vw, 640px) along with the photo width, so
     the photo keeps its 3:2 shape while taking less of the band. */
  min-height: clamp(420px, 33vw, 540px);
  display: flex;
  align-items: center;
  background: #f4f8ff;
  border-bottom: 1px solid #e3edf9;
}
.mfx-banner__media {
  position: absolute;
  inset: 0 0 0 auto;
  /* 64% → 56% → 50%: a smaller photo, with the band's spacing tightened
     below so its height drops too and the photo keeps close to 3:2. */
  width: 50%;
  margin: 0;
}
.mfx-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
/* The fade from the page tint into the photo. */
.mfx-banner__media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #f4f8ff 0%, rgba(244, 248, 255, .82) 14%, rgba(244, 248, 255, .25) 32%, rgba(244, 248, 255, 0) 46%);
  pointer-events: none;
}

.mfx-banner__shell { position: relative; z-index: 2; width: 100%; padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.75rem, 3.5vw, 2.5rem); }
.mfx-banner__crumbs { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.mfx-banner__copy { max-width: min(40rem, 50%); }

.mfx-banner__title {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, .9rem + 2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--mb-ink);
}
/* Balanced wrapping: "Clinic Appointment / Scheduling Software" rather than
   one long line and an orphaned last word. */
.mfx-banner__title, .mfx-banner__title span { text-wrap: balance; }
.mfx-banner__title span { display: block; margin-top: .15rem; color: var(--mb-blue); }
.mfx-banner__lede { max-width: 34rem; margin-bottom: 1.35rem; font-size: clamp(.97rem, .93rem + .2vw, 1.06rem); line-height: 1.7; color: var(--mb-muted); }

.mfx-banner__video { gap: .6rem; }
.mfx-banner__play {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mb-blue);
  color: #fff;
}
.mfx-banner__play svg { margin-left: 2px; }

.mfx-banner__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 1.35rem;
}
.mfx-banner__trust li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--mb-ink-soft);
}
.mfx-banner__trustico {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--mb-line);
  color: var(--mb-blue);
  box-shadow: 0 1px 2px rgba(11, 34, 56, .05);
}
.mfx-banner__trustico svg { width: 16px; height: 16px; }

/* Floating app cards over the photo — kept clear of the face and screen. */
.mfx-bcard {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .95rem .7rem .7rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 16px 36px rgba(9, 50, 110, .18);
  animation: mpx-pop .6s var(--mb-ease) .8s both;
}
.mfx-bcard--1 { left: 40%; top: 9%; }
.mfx-bcard--2 { right: 3%; top: 38%; animation-delay: 1s; }
/* Inset from the right so it never sits under the fixed WhatsApp / call dock. */
.mfx-bcard--3 { right: 13%; bottom: 8%; animation-delay: 1.2s; }
.mfx-bcard__ico {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--mb-blue-100);
  color: var(--mb-blue);
}
.mfx-bcard__ico svg { width: 18px; height: 18px; }
.mfx-bcard b { display: block; font-family: var(--mb-font-head); font-size: .85rem; line-height: 1.25; color: var(--mb-ink); white-space: nowrap; }
.mfx-bcard small { display: block; font-size: .75rem; line-height: 1.3; color: var(--mb-muted); white-space: nowrap; }
.is-visible .mfx-bcard--1 { animation: mpx-pop .6s var(--mb-ease) .8s both, mpx-float 6.4s var(--mb-ease) 1.6s infinite; }
.is-visible .mfx-bcard--2 { animation: mpx-pop .6s var(--mb-ease) 1s both, mpx-float 7s var(--mb-ease) 2s infinite; }
.is-visible .mfx-bcard--3 { animation: mpx-pop .6s var(--mb-ease) 1.2s both, mpx-float 6.8s var(--mb-ease) 2.4s infinite; }

/* Narrow screens: copy first, then the whole photo — no fade, no crop.
   1100px, not 900: between the two the copy column is so narrow and tall
   that the side-by-side photo lost 40% of its width to cropping. */
@media (max-width: 1100px) {
  .mfx-banner { display: flex; flex-direction: column-reverse; min-height: 0; }
  .mfx-banner__media { position: relative; inset: auto; width: 100%; }
  .mfx-banner__media img { height: auto; aspect-ratio: 3 / 2; }
  .mfx-banner__media::before { background: linear-gradient(180deg, #f4f8ff 0%, rgba(244, 248, 255, 0) 18%); }
  .mfx-banner__copy { max-width: none; }
  .mfx-banner__shell { padding-bottom: 1.75rem; }
  .mfx-bcard--1 { left: 4%; top: 12%; }
  .mfx-bcard--2 { display: none; }
  .mfx-bcard--3 { right: 4%; bottom: 6%; }
}
/* Tablets: the stacked photo is capped and framed rather than full-bleed,
   so it reads as a picture beside the copy, not a second hero. */
@media (min-width: 641px) and (max-width: 1100px) {
  .mfx-banner__media {
    align-self: center;
    width: min(calc(100% - 2 * var(--mb-gutter, 1.5rem)), 720px);
    margin-bottom: 2rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(9, 50, 110, .14);
  }
  .mfx-banner__media::before,
  .mfx-banner--fade-short .mfx-banner__media::before { display: none; }
}
@media (max-width: 480px) {
  .mfx-bcard { padding: .5rem .7rem .5rem .5rem; }
  .mfx-bcard__ico { width: 28px; height: 28px; }
  .mfx-bcard b { font-size: .75rem; }
  .mfx-bcard small { font-size: .68rem; }
  .mfx-banner__trust { gap: .6rem 1rem; }
  .mfx-banner__cta .mb-btn { flex: 1 1 100%; }
}

/* Short fade, for photos whose subject sits on the left (EMR): the tint only
   softens the photo's edge instead of washing over the person. */
.mfx-banner--fade-short .mfx-banner__media::before {
  background: linear-gradient(90deg, #f4f8ff 0%, rgba(244, 248, 255, .55) 6%, rgba(244, 248, 255, 0) 16%);
}

/* Cards placed for a specific photo (config 'cards' 4th item → --l/--r/--t/--b). */
.mfx-bcard--placed { left: var(--l, auto); right: var(--r, auto); top: var(--t, auto); bottom: var(--b, auto); }

@media (max-width: 1100px) {
  .mfx-banner--fade-short .mfx-banner__media::before { background: linear-gradient(180deg, #f4f8ff 0%, rgba(244, 248, 255, 0) 14%); }
  /* The phone layout's own positions win over per-photo placement. */
  .mfx-bcard--placed { left: auto; right: auto; top: auto; bottom: auto; }
  .mfx-bcard.mfx-bcard--1 { left: 4%; top: 8%; }
  /* A photo that needed its own card placement has a subject the phone's
     top-left spot would cover (the EMR doctor's face) — drop that card. */
  .mfx-bcard--placed.mfx-bcard--1 { display: none; }
  .mfx-bcard.mfx-bcard--3 { right: 4%; bottom: 6%; }
}

/* ── 08 · MODULE HERO: PHOTO TO THE RIGHT EDGE ──────────────────────────
   Most module scenes are cropped on their right side (a monitor, a shelf),
   so the art column runs past the shell to the window's right border and
   the crop reads as the edge of the screen rather than a cut. --bleed is the
   distance from the shell's content edge to the viewport edge. */
.mfx-art {
  --bleed: calc(var(--mb-gutter) + max(0px, (100vw - var(--mb-shell)) / 2));
  margin-right: calc(-1 * var(--bleed));
}
.mfx-art__photo img { object-position: right bottom; }
/* Keep the right-hand card and the pulse inside the shell, not on the edge. */
.mfx-chip--2 { right: calc(var(--bleed) + 1rem); }
.mfx-art__pulse { right: calc(var(--bleed) - 2rem); }
@media (max-width: 980px) {
  .mfx-art { max-width: none; margin-left: auto; width: min(40rem + var(--bleed), 100% + var(--bleed)); }
}