@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   MEDBUS — SPECIALTY PAGES (v3)
   /clinic-management-software/{slug}

   Loaded after medbus-home.css and medbus-pages.css, on the 17 specialty pages
   only. Namespaced `msp-`.

   Each page sets .msp--{tone} on its wrapper; every accent below reads
   --sp / --sp-soft / --sp-ring from that, so a specialty's colour is one class
   in config/specialties.php, never a second copy of this file. The colours
   themselves are the shared --mb-a-* accents; the ring alphas are those same
   hues at low opacity.

     01  Tone
     02  Hero (split / flip / stage)
     03  Product widgets
     04  Trust figures
     05  Complete-solution split
     06  Features (grid / bento / rows)
     07  Patient journey
     08  Outcomes
     09  Security
     10  Section heads with a trailing link
     11  Responsive
     12  Reduced motion
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · TONE ─────────────────────────────────────────────────────────── */
/* The site's brand blue — the same as the features page. Product pages no
   longer take a per-specialty tone; the modifiers below are kept only so an
   old class name in a cached page still resolves. */
.msp        { --sp: var(--mb-blue);        --sp-soft: var(--mb-blue-100); --sp-ring: rgba(9, 106, 201, .22); }
.msp--rose  { --sp: var(--mb-a-rose-fg);   --sp-soft: var(--mb-a-rose);   --sp-ring: rgba(198, 42, 73, .22); }
.msp--violet{ --sp: var(--mb-a-violet-fg); --sp-soft: var(--mb-a-violet); --sp-ring: rgba(109, 77, 224, .22); }
.msp--green { --sp: var(--mb-a-green-fg);  --sp-soft: var(--mb-a-green);  --sp-ring: rgba(15, 125, 78, .22); }
.msp--amber { --sp: var(--mb-a-amber-fg);  --sp-soft: var(--mb-a-amber);  --sp-ring: rgba(173, 90, 11, .22); }
.msp--cyan  { --sp: var(--mb-a-cyan-fg);   --sp-soft: var(--mb-a-cyan);   --sp-ring: rgba(13, 142, 168, .22); }

.msp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.msp-eyebrow__ico {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-eyebrow__ico svg { width: 15px; height: 15px; }

/* ── 02 · HERO ─────────────────────────────────────────────────────────── */
.msp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(4.5rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, #f2f8ff 0%, #fbfdff 100%);
}
/* The specialty's own tint, washed in from the art side. A pseudo-element
   rather than color-mix() so the tint degrades to nothing, not to a flat
   block, where color-mix is unsupported. */
.msp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 80% at 80% 30%, var(--sp-soft) 0%, transparent 70%);
  opacity: .85;
}
.msp-hero--flip::before  { background: radial-gradient(60% 80% at 20% 30%, var(--sp-soft) 0%, transparent 70%); }
.msp-hero--stage::before { background: radial-gradient(70% 70% at 50% 85%, var(--sp-soft) 0%, transparent 70%); }

.msp-crumbs { margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }

.msp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.msp-hero--flip .msp-hero__art { order: -1; }

.msp-hero--stage .msp-hero__grid { grid-template-columns: minmax(0, 1fr); }
.msp-hero--stage .msp-hero__copy { max-width: 48rem; margin-inline: auto; text-align: center; }
.msp-hero--stage .msp-checks,
.msp-hero--stage .msp-hero__cta { justify-content: center; }
.msp-hero--stage .msp-checks { flex-direction: row; flex-wrap: wrap; }
.msp-hero--stage .msp-hero__art { max-width: 64rem; width: 100%; margin-inline: auto; }
.msp-hero--stage .msp-hero__frame img { aspect-ratio: 21 / 9; }

.msp-hero__title {
  font-size: clamp(2rem, 1.2rem + 2.7vw, 3.15rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.msp-hero__title span { display: block; color: var(--sp); }
.msp-hero__lede {
  font-size: clamp(1rem, .95rem + .25vw, 1.0938rem);
  line-height: 1.72;
  color: var(--mb-muted);
  margin-bottom: 1.25rem;
  max-width: 38rem;
}
.msp-hero--stage .msp-hero__lede { margin-inline: auto; }
.msp-hero__cta { margin-top: 1.5rem; }

.msp-checks { display: flex; flex-direction: column; gap: .55rem 1.5rem; }
.msp-checks li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9063rem;
  font-weight: 600;
  color: var(--mb-ink-soft);
}
.msp-checks svg { flex: none; color: var(--sp); }

/* — Art — */
.msp-hero__art { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(.5rem, 2vw, 1.5rem); }
.msp-hero__frame {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--mb-r-xl);
  overflow: hidden;
  border: 6px solid #fff;
  background: var(--mb-canvas);
  box-shadow: var(--mb-shadow-lg);
}
.msp-hero__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Concentric rings breathing out from behind the photograph, in the
   specialty's tone. Transform + opacity only. */
.msp-hero__rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.msp-hero__rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid var(--sp-ring);
  opacity: 0;
}
.is-visible .msp-hero__rings i { animation: msp-ring 7s var(--mb-ease) infinite; }
.is-visible .msp-hero__rings i:nth-child(2) { animation-delay: 2.33s; }
.is-visible .msp-hero__rings i:nth-child(3) { animation-delay: 4.66s; }
@keyframes msp-ring {
  0%   { opacity: 0;  transform: scale(.6); }
  30%  { opacity: 1; }
  100% { opacity: 0;  transform: scale(1.18); }
}

/* The specialty's icon, floating off the photograph's corner. */
.msp-hero__glyph {
  position: absolute;
  z-index: 3;
  right: 4%;
  top: 2%;
  display: grid;
  place-items: center;
  width: clamp(48px, 5vw, 62px);
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--sp);
  color: #fff;
  box-shadow: 0 12px 28px var(--sp-ring);
}
.msp-hero__glyph svg { width: 52%; height: 52%; }
.msp-hero--flip .msp-hero__glyph { right: auto; left: 4%; }
.is-visible .msp-hero__glyph { animation: msp-bob 6s var(--mb-ease) infinite; }
@keyframes msp-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-8px) rotate(-4deg); }
}

/* The two widgets sit over the photo on a wide screen and fall into a row
   beneath it on a narrow one — the container switches, the widgets do not. */
.msp-hero__widgets { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.msp-hero__w1, .msp-hero__w2 { position: absolute; pointer-events: auto; }
.msp-hero__w1 { left: -3%; top: 14%; }
.msp-hero__w2 { right: -3%; bottom: 6%; }
.msp-hero--flip .msp-hero__w1 { left: auto; right: -3%; }
.msp-hero--flip .msp-hero__w2 { right: auto; left: -3%; }
.msp-hero--stage .msp-hero__w1 { left: -1%; top: 22%; }
.msp-hero--stage .msp-hero__w2 { right: -1%; bottom: 14%; }
.is-visible .msp-hero__w1 { animation: mbp-drift 7.5s var(--mb-ease) infinite; }
.is-visible .msp-hero__w2 { animation: mbp-drift 8.5s var(--mb-ease) 1.4s infinite; }

/* ── 03 · PRODUCT WIDGETS ──────────────────────────────────────────────── */
.msp-widget {
  width: clamp(200px, 17vw, 244px);
  padding: .85rem .95rem;
  border-radius: var(--mb-r-md);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
  font-size: .75rem;
  color: var(--mb-ink-soft);
}
.msp-widget__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.msp-widget__head b { font-size: .8125rem; font-weight: 700; color: var(--mb-ink); }
.msp-widget__ico {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-widget__ico svg { width: 15px; height: 15px; }

.msp-widget__list { display: grid; gap: .1rem; }
.msp-widget__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
  padding: .38rem 0;
  border-top: 1px solid var(--mb-line);
}
.msp-widget__list li:first-child { border-top: 0; }
.msp-widget__list span { color: var(--mb-muted); font-variant-numeric: tabular-nums; }
.msp-widget__list b { font-weight: 600; color: var(--mb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msp-widget__list em {
  font-style: normal;
  font-size: .6875rem;
  font-weight: 600;
  padding: .12rem .45rem;
  border-radius: var(--mb-r-pill);
  background: var(--sp-soft);
  color: var(--sp);
}

.msp-widget__vital { display: flex; align-items: baseline; gap: .3rem; color: var(--sp); }
.msp-widget__vital svg { align-self: center; }
.msp-widget__vital b { font-family: var(--mb-font-head); font-size: 1.6rem; line-height: 1; color: var(--sp); }
.msp-widget__vital span { font-size: .75rem; color: var(--sp); }
.msp-widget__vital em {
  margin-left: auto;
  font-style: normal;
  font-size: .6875rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-a-green);
  color: var(--mb-a-green-fg);
}
.msp-ecg { display: block; width: 100%; height: 38px; margin-top: .5rem; }
.msp-ecg polyline {
  fill: none;
  stroke: var(--sp);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 0;
}
.is-visible .msp-ecg polyline { animation: msp-trace 3.2s linear infinite; }
@keyframes msp-trace {
  0%   { stroke-dashoffset: 420; }
  70%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: .25; }
}

.msp-widget__label { display: flex; justify-content: space-between; gap: .5rem; color: var(--mb-ink-soft); }
.msp-widget__label b { color: var(--sp); }
.msp-widget__bar {
  display: block;
  height: 8px;
  margin: .5rem 0 .45rem;
  border-radius: var(--mb-r-pill);
  background: var(--mb-blue-50);
  overflow: hidden;
}
.msp-widget__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sp);
  transform: scaleX(var(--p, .5));
  transform-origin: left;
}
/* Fills from empty to its value when the hero first reveals. A keyframe
   with only `from` animates to the element's own resting transform. */
.is-in .msp-widget__bar i { animation: msp-fill 1.4s var(--mb-ease) .4s both; }
@keyframes msp-fill { from { transform: scaleX(0); } }

.msp-widget__big {
  font-family: var(--mb-font-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mb-ink);
  line-height: 1.2;
}
.msp-widget__sub { margin-top: .2rem; font-size: .6875rem; color: var(--mb-muted); }

.msp-widget__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.msp-widget__chips span {
  padding: .25rem .6rem;
  border-radius: var(--mb-r-pill);
  background: var(--sp-soft);
  color: var(--sp);
  font-weight: 600;
  font-size: .6875rem;
}

/* ── 04 · TRUST FIGURES ────────────────────────────────────────────────── */
/* Overlaps the hero's foot, as in the reference. */
.msp-statsband { position: relative; z-index: 2; margin-top: calc(-1 * clamp(3rem, 6vw, 4.5rem)); }
.msp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--mb-r-xl);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
}
.msp-stats > li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
}
.msp-stats > li + li { border-left: 1px solid var(--mb-line); }
.msp-stats__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 13px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-stats__ico svg { width: 22px; height: 22px; }
.msp-stats b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mb-ink);
  line-height: 1.15;
}
.msp-stats span span { display: block; font-size: .8125rem; color: var(--mb-muted); }

/* ── 05 · COMPLETE-SOLUTION SPLIT ──────────────────────────────────────── */
.msp-solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.msp-solution__media { position: relative; padding-bottom: 1.5rem; }
.msp-solution__frame {
  margin: 0;
  border-radius: var(--mb-r-xl);
  overflow: hidden;
  box-shadow: var(--mb-shadow-lg);
}
.msp-solution__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--mb-ease); }
.msp-solution__media:hover .msp-solution__frame img { transform: scale(1.04); }
.msp-solution__card {
  position: absolute;
  left: clamp(.75rem, 3vw, 1.5rem);
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1rem;
  border-radius: var(--mb-r-md);
  background: #fff;
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
  font-size: .8125rem;
  color: var(--mb-ink);
}
.msp-solution__cardico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-solution__cardico svg { width: 18px; height: 18px; }

.msp-ticks { display: grid; gap: .6rem; margin: 1.25rem 0 1.5rem; }
.msp-ticks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .9063rem;
  line-height: 1.55;
  color: var(--mb-ink-soft);
}
.msp-ticks svg { margin-top: .12rem; color: var(--sp); }
.msp-ticks--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .75rem 1.5rem; margin: 0; }

/* ── 06 · FEATURES ─────────────────────────────────────────────────────── */
.msp-feats { display: grid; gap: clamp(.875rem, 1.6vw, 1.25rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.msp-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  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);
  overflow: hidden;
}
.msp-feat h3 { font-size: 1rem; line-height: 1.35; }
.msp-feat p { font-size: .875rem; line-height: 1.62; color: var(--mb-muted); }
.msp-feat__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  margin-bottom: .25rem;
  border-radius: 12px;
  background: var(--sp-soft);
  color: var(--sp);
  transition: transform .3s var(--mb-ease);
}
.msp-feat__ico svg { width: 22px; height: 22px; }
.msp-feat:hover .msp-feat__ico { transform: scale(1.08) rotate(-4deg); }

/* Grid: three even columns. */
.msp-feats--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* Bento: four columns, the first card taking a 2×2 block — nine cards fill
   exactly three rows of four. */
.msp-feats--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.msp-feats--bento .msp-feat:first-child {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(150deg, var(--sp-soft) 0%, #fff 75%);
}
.msp-feats--bento .msp-feat:first-child h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); }
.msp-feats--bento .msp-feat:first-child p { font-size: .9375rem; max-width: 26rem; }
.msp-feats--bento .msp-feat:first-child .msp-feat__ico { width: 54px; height: 54px; }
.msp-feat__watermark {
  position: absolute;
  right: -6%;
  top: -8%;
  width: 58%;
  aspect-ratio: 1;
  color: var(--sp);
  opacity: .08;
  pointer-events: none;
}
.msp-feat__watermark svg { width: 100%; height: 100%; }

/* Rows: the section head holds the left column, the cards run as a
   numbered two-column list on the right. */
.msp-featrows {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.msp-featrows__head { position: sticky; top: 100px; }
.msp-feats--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; counter-reset: none; }
.msp-feats--rows .msp-feat { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .5rem .9rem; }
.msp-feats--rows .msp-feat h3 { flex: 1 1 60%; align-self: center; }
.msp-feats--rows .msp-feat p { flex: 1 1 100%; }
.msp-feat__n {
  position: absolute;
  right: 1rem;
  top: .85rem;
  font-family: var(--mb-font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--sp);
  opacity: .6;
}
.msp-more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; margin-top: .75rem; }

/* ── 07 · PATIENT JOURNEY ──────────────────────────────────────────────── */
.msp-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.msp-journey li { position: relative; padding-top: .25rem; }
/* The connector runs from each step's number to the next one, drawn on the
   step itself so it disappears when the grid wraps. */
.msp-journey li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(.25rem + 22px);
  left: 52px;
  right: calc(-1 * clamp(1rem, 2vw, 1.5rem));
  border-top: 2px dashed var(--sp-ring);
  transform-origin: left;
}
.is-in.msp-journey li::after,
.msp-journey .is-in::after { animation: mbp-grow .9s var(--mb-ease) .3s both; }
.msp-journey__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--sp);
  color: #fff;
  font-family: var(--mb-font-head);
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--sp-soft);
}
.msp-journey h3 { font-size: 1rem; margin-bottom: .4rem; }
.msp-journey p { font-size: .875rem; line-height: 1.62; color: var(--mb-muted); }

/* ── 08 · OUTCOMES ─────────────────────────────────────────────────────── */
.msp-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(.875rem, 1.6vw, 1.25rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.msp-outcome {
  display: grid;
  gap: .5rem;
  padding: clamp(1.25rem, 2.4vw, 1.65rem);
  border-radius: var(--mb-r-lg);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-sm);
  border-top: 3px solid var(--sp);
}
.msp-outcome__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-outcome__ico svg { width: 21px; height: 21px; }
.msp-outcome h3 { font-size: 1rem; }
.msp-outcome p { font-size: .875rem; line-height: 1.62; color: var(--mb-muted); }

/* ── 09 · SECURITY ─────────────────────────────────────────────────────── */
.msp-secure {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--mb-r-xl);
  background: linear-gradient(135deg, var(--mb-blue-50) 0%, #fff 100%);
  border: 1px solid var(--mb-line);
}
.msp-secure p { margin-top: .6rem; font-size: .9063rem; line-height: 1.7; color: var(--mb-muted); }
.msp-secure__ico {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: .875rem;
  border-radius: 14px;
  background: var(--mb-a-green);
  color: var(--mb-a-green-fg);
}
.msp-secure__ico svg { width: 25px; height: 25px; }

/* ── 10 · SECTION HEAD WITH A TRAILING LINK ────────────────────────────── */
.msp-othershead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.msp-othershead .mb-h2 { margin-bottom: 0; }

/* ── 11 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .msp-feats--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msp-feats--bento .msp-feat:first-child { grid-row: auto; }
  .msp-featrows { grid-template-columns: minmax(0, 1fr); }
  .msp-featrows__head { position: static; }
}

@media (max-width: 980px) {
  .msp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msp-stats > li:nth-child(3) { border-left: 0; }
  .msp-stats > li:nth-child(n + 3) { border-top: 1px solid var(--mb-line); }
  .msp-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .msp-journey li:nth-child(2)::after { display: none; }
}

@media (max-width: 900px) {
  .msp-hero__grid,
  .msp-solution,
  .msp-secure { grid-template-columns: minmax(0, 1fr); }
  .msp-hero--flip .msp-hero__art { order: 0; }
  .msp-hero__art { max-width: 40rem; margin-inline: auto; width: 100%; }
  /* Widgets leave the photo and line up beneath it. */
  .msp-hero__widgets {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: .75rem;
    margin-top: 1rem;
  }
  .msp-hero__w1, .msp-hero__w2 { position: static; width: auto; }
  .is-visible .msp-hero__w1,
  .is-visible .msp-hero__w2 { animation: none; }
  .msp-hero--stage .msp-hero__frame img { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .msp-feats--rows,
  .msp-feats--bento { grid-template-columns: minmax(0, 1fr); }
  .msp-feats--bento .msp-feat:first-child { grid-column: auto; }
  .msp-journey { grid-template-columns: minmax(0, 1fr); }
  .msp-journey li::after { display: none; }
  .msp-stats > li { padding: .9rem; gap: .6rem; }
  .msp-stats__ico { width: 38px; height: 38px; }
  .msp-hero__glyph { right: 2%; top: 0; }
}

/* ── 12 · REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .is-visible .msp-hero__rings i,
  .is-visible .msp-hero__glyph,
  .is-visible .msp-hero__w1,
  .is-visible .msp-hero__w2,
  .is-visible .msp-ecg polyline,
  .is-in .msp-widget__bar i { animation: none !important; }
  .msp-solution__media:hover .msp-solution__frame img,
  .msp-feat:hover .msp-feat__ico { transform: none; }
}

/* ── 13 · HERO REASSURANCE ─────────────────────────────────────────────── */
.msp-assure {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-top: 1.1rem;
  font-size: .8125rem;
  color: var(--mb-muted);
}
.msp-assure li { display: inline-flex; align-items: center; gap: .35rem; }
.msp-assure svg { width: 15px; height: 15px; color: var(--mb-a-green-fg); }

/* ── 14 · ON-THIS-PAGE BAR ─────────────────────────────────────────────── */
/* Sticks under the 68px site header (62px below 980px). */
.msp-toc {
  position: sticky;
  top: 68px;
  z-index: 40;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, .96);
  border-block: 1px solid var(--mb-line);
}
.msp-toc__bar { display: flex; align-items: center; gap: 1rem; min-height: 56px; }
.msp-toc__list {
  display: flex;
  gap: .25rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.msp-toc__list::-webkit-scrollbar { display: none; }
.msp-toc__list a {
  display: block;
  padding: .45rem .85rem;
  border-radius: var(--mb-r-pill);
  font-size: .875rem;
  font-weight: 600;
  color: var(--mb-muted);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s var(--mb-ease), color .2s var(--mb-ease);
}
.msp-toc__list a:hover { color: var(--mb-ink); background: var(--mb-canvas); }
.msp-toc__list a.is-active { color: var(--sp); background: var(--sp-soft); }
.msp-toc__cta { flex: none; padding-block: .55rem; font-size: .875rem; }

/* Every anchored section clears the header plus the bar. */
.msp-anchor { scroll-margin-top: 132px; }

/* ── 15 · OVERVIEW — quick answer, needs, how Medbus helps ─────────────── */
.msp-overview { padding-top: clamp(2.5rem, 5vw, 4rem); }

.msp-answer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  border-radius: var(--mb-r-xl);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
  overflow: hidden;
}
.msp-answer__main { position: relative; padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.msp-answer__main::before {
  content: "";
  position: absolute;
  left: 0; top: clamp(1.5rem, 3.5vw, 2.75rem);
  width: 4px; height: 3.25rem;
  border-radius: 0 4px 4px 0;
  background: var(--sp);
}
.msp-answer .mb-h2 { margin-top: .5rem; }
.msp-answer__text {
  margin-top: .9rem;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.175rem);
  line-height: 1.75;
  color: var(--mb-ink-soft);
}
.msp-answer__aside {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: linear-gradient(160deg, var(--sp-soft) 0%, var(--mb-canvas) 100%);
  border-left: 1px solid var(--mb-line);
}
.msp-answer__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mb-muted);
}
.msp-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .9rem 0 1rem; }
.msp-modules li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border-radius: var(--mb-r-md);
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--mb-line);
  font-size: .8438rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mb-ink);
}
.msp-modules__ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-modules__ico svg { width: 16px; height: 16px; }
.msp-answer__aside .msp-more { margin-top: auto; }

.msp-needhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem;
}
.msp-needhead__count { font-size: .8438rem; font-weight: 600; color: var(--sp); }

.msp-needtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.msp-needtiles li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-radius: var(--mb-r-md);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  font-size: .9063rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mb-ink);
  transition: border-color .25s var(--mb-ease), box-shadow .25s var(--mb-ease), transform .25s var(--mb-ease);
}
.msp-needtiles li:hover { border-color: var(--sp-ring); box-shadow: var(--mb-shadow-sm); transform: translateY(-2px); }
.msp-needtiles__ico {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-needtiles__ico svg { width: 19px; height: 19px; }

.msp-helps {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--mb-r-xl);
  background: var(--sp-soft);
  border: 1px solid var(--sp-ring);
}
.msp-helps__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: .8rem;
  border-radius: 14px;
  background: var(--sp);
  color: #fff;
}
.msp-helps__ico svg { width: 24px; height: 24px; }
.msp-helps__head p { margin-top: .4rem; font-size: .875rem; color: var(--mb-ink-soft); }
.msp-helps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.5rem; margin: 0; }
.msp-helps__list li { color: var(--mb-ink); font-weight: 500; }

/* ── 16 · BENEFITS — light card and dark card ──────────────────────────── */
.msp-adv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.msp-adv__card {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--mb-r-xl);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow-md);
}
.msp-adv__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.1rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--mb-line);
}
.msp-adv__head h3 { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.msp-adv__head p { margin-top: .15rem; font-size: .8438rem; color: var(--mb-muted); }
.msp-adv__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--sp-soft);
  color: var(--sp);
}
.msp-adv__ico svg { width: 24px; height: 24px; }
.msp-adv__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .7rem;
  padding: .8rem 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--mb-ink-soft);
}
.msp-adv__list li + li { border-top: 1px dashed var(--mb-line); }
.msp-adv__list svg { margin-top: .2rem; color: var(--sp); }

.msp-adv__card--dark {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(22, 104, 216, .45) 0%, transparent 60%), var(--mb-ink);
  border-color: var(--mb-ink);
}
.msp-adv__card--dark .msp-adv__head { border-bottom-color: rgba(255, 255, 255, .14); }
.msp-adv__card--dark h3 { color: #fff; }
.msp-adv__card--dark .msp-adv__head p { color: rgba(255, 255, 255, .7); }
.msp-adv__card--dark .msp-adv__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.msp-adv__card--dark .msp-adv__list li { color: rgba(255, 255, 255, .86); }
.msp-adv__card--dark .msp-adv__list li + li { border-top-color: rgba(255, 255, 255, .14); }
.msp-adv__card--dark .msp-adv__list svg { color: #7fd4a8; }

/* ── 17 · SECURITY POINTS ──────────────────────────────────────────────── */
.msp-secpoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.msp-secpoints li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  border-radius: var(--mb-r-md);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--mb-line);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--mb-ink);
}
.msp-secpoints li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.msp-secpoints__ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--mb-a-green);
  color: var(--mb-a-green-fg);
}
.msp-secpoints__ico svg { width: 17px; height: 17px; }

/* ── 18 · RELATED LINKS + LAST UPDATED ─────────────────────────────────── */
.msp-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.msp-related__label { font-size: .8125rem; font-weight: 700; color: var(--mb-ink); margin-right: .25rem; }
.msp-related a {
  padding: .4rem .85rem;
  border-radius: var(--mb-r-pill);
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
  font-size: .8125rem;
  color: var(--mb-ink-soft);
  text-decoration: none;
  transition: border-color .2s var(--mb-ease), color .2s var(--mb-ease);
}
.msp-related a:hover,
.msp-related a:focus-visible { border-color: var(--sp); color: var(--sp); }

.msp-reviewed { margin-top: 1.5rem; font-size: .8125rem; color: var(--mb-muted); text-align: center; }

/* ── 19 · RESPONSIVE + MOTION FOR 13–18 ────────────────────────────────── */
@media (max-width: 1180px) {
  .msp-needtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .msp-toc { top: 62px; }
  .msp-anchor { scroll-margin-top: 124px; }
  .msp-answer { grid-template-columns: minmax(0, 1fr); }
  .msp-answer__aside { border-left: 0; border-top: 1px solid var(--mb-line); }
  .msp-needtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msp-helps { grid-template-columns: minmax(0, 1fr); }
  .msp-adv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .msp-toc__cta { display: none; }
  .msp-toc__bar { min-height: 50px; }
  .msp-needtiles,
  .msp-helps__list,
  .msp-secpoints { grid-template-columns: minmax(0, 1fr); }
  .msp-modules { gap: .45rem; }
  .msp-modules li { gap: .45rem; padding: .5rem; font-size: .78rem; }
  .msp-modules__ico { width: 26px; height: 26px; border-radius: 8px; }
  .msp-modules__ico svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .msp-needtiles li:hover { transform: none; }
}