/* ==========================================================================
   Homepage
   Loaded only by src/pages/index.njk (front matter: pageCss: home).

   Colour, type, radius and shadow all come from tokens — see
   theme-mediflare.css and framework/tokens.css. No raw hex below except
   inside multi-stop gradient ramps, where the stops are the design itself.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.mf-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 150px 48px 56px;
}

.mf-hero__wrap {
  position: relative;
  z-index: 1;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mf-hero__eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--flare-600);
  font-weight: var(--weight-semibold);
  margin: 0 0 22px;
}

.mf-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 60px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.mf-hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-inline-size: 540px;
  margin: 24px 0 0;
}

.mf-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-start: 34px;
}

.mf-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.mf-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mf-hero__trust svg { flex: none; }

/* --- Art column --- */
.mf-hero__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-block-size: 600px;
}

.mf-hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mf-hero__glow-lg {
  inline-size: 560px;
  block-size: 560px;
  inset-inline-start: 72%;
  inset-block-start: 42%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(232 84 10 / 0.6) 0%,
    rgb(240 120 40 / 0.4) 32%,
    rgb(248 178 112 / 0.18) 56%,
    rgb(248 178 112 / 0) 74%
  );
  filter: blur(80px);
}

.mf-hero__glow-sm {
  inline-size: 290px;
  block-size: 290px;
  inset-inline-start: 80%;
  inset-block-start: 66%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(250 192 142 / 0.24) 0%,
    rgb(250 200 155 / 0.12) 45%,
    rgb(250 200 155 / 0) 72%
  );
  filter: blur(75px);
}

.mf-hero__cutout {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 560px;
  block-size: auto;
  display: block;
}

/* --- Floating cards --- */
.mf-fcard {
  position: absolute;
  z-index: 3;
  opacity: 0;
}

.mf-fcard.is-in { animation: mfCardIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.mf-fcard.is-in .mf-bob { animation: mfFloat 5s ease-in-out infinite alternate; }

.mf-fcard-stat { inset-block-start: -2%; inset-inline-end: -8%; }
.mf-fcard-included { inset-block-start: 2%; inset-inline-start: -4%; animation-delay: 0.6s; }
.mf-fcard-pill { inset-block-start: 46%; inset-inline-start: -9%; animation-delay: 1.2s; }
.mf-fcard-answered { inset-block-end: 5%; inset-inline-end: -6%; animation-delay: 1.8s; }

.mf-fcard-included .mf-bob { animation-delay: 1.3s; }
.mf-fcard-pill .mf-bob { animation-delay: 0.6s; }
.mf-fcard-answered .mf-bob { animation-delay: 1.9s; }

.mf-fcard__inner {
  background: var(--ink-on-dark);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  padding: 18px 22px;
}

.mf-fcard__inner-dark {
  background: var(--panel-dark);
  border-color: var(--coal-400);
  box-shadow: var(--shadow-card-dark);
}

.mf-fcard__inner-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card-sm);
  padding: 11px 18px;
}

.mf-fcard__stat {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 38px;
  line-height: 1;
  margin: 0;
}

.mf-fcard__stat-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 6px 0 0;
  max-inline-size: 150px;
}

.mf-fcard-included .mf-fcard__inner { inline-size: 236px; padding: 18px 20px; }

.mf-fcard__title {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 14px;
  color: var(--ink-on-dark);
  margin: 0 0 12px;
}

.mf-fcard__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-inc {
  display: flex;
  gap: 9px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-on-dark-body);
  opacity: 0;
}

.mf-fcard.is-in .mf-inc { animation: mfIncIn 0.5s ease forwards; }
.mf-inc:nth-child(1) { animation-delay: 0.3s; }
.mf-inc:nth-child(2) { animation-delay: 0.5s; }
.mf-inc:nth-child(3) { animation-delay: 0.7s; }
.mf-inc:nth-child(4) { animation-delay: 0.9s; }

.mf-inc svg { flex: none; }

.mf-fcard__pill-text {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  white-space: nowrap;
}

.mf-fcard-answered .mf-fcard__inner { padding: 14px 18px; box-shadow: var(--shadow-card-dark-sm); }

.mf-fcard__row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.mf-fcard__row-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  white-space: nowrap;
}

.mf-fcard__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-on-dark-body);
  padding-inline-start: 35px;
  margin: 2px 0 0;
}


/* ==========================================================================
   Practice marquee
   ========================================================================== */

/* Full-bleed without the 100vw trick — <main> already spans the body, and
   100vw would overrun by the scrollbar width. */
/* ==========================================================================
   Section dividers
   ========================================================================== */

/* --- Arch glow: journey → dark --- */
.mf-arch {
  position: relative;
  block-size: 280px;
  margin-block-start: -2px;
  pointer-events: none;
  background: var(--coal-900);
  overflow: hidden;
}

.mf-arch svg {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 280px;
  display: block;
  overflow: visible;
}

/* The dip is drawn at 1200 × 280 and stretched to the width, so on a phone
   it is four times as steep — a bowl rather than a horizon. Shortening the
   band (and the SVG with it) with the width flattens the curve in step. */
@media (max-width: 900px) {
  .mf-arch,
  .mf-arch svg { block-size: clamp(100px, 26vw, 280px); }
}

.mf-arch__blur-xl { filter: blur(38px); }
.mf-arch__blur-lg { filter: blur(20px); }
.mf-arch__blur-md { filter: blur(9px); }
.mf-arch__blur-sm { filter: blur(2px); }
.mf-arch__fill { fill: var(--paper-500); }

/* ==========================================================================
   Patient journey
   ========================================================================== */

.mf-journey {
  position: relative;
  background: var(--paper-500);
  padding: 50px 56px 40px;
  overflow: hidden;
}

.mf-journey__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 26% 20% at 6% 12%, rgb(245 150 90 / 0.2) 0%, rgb(245 150 90 / 0) 70%),
    radial-gradient(ellipse 22% 18% at 96% 30%, rgb(232 110 70 / 0.18) 0%, rgb(232 110 70 / 0) 70%),
    radial-gradient(ellipse 30% 22% at 50% 58%, rgb(248 190 150 / 0.2) 0%, rgb(248 190 150 / 0) 70%),
    radial-gradient(ellipse 24% 20% at 12% 88%, rgb(248 190 150 / 0.2) 0%, rgb(248 190 150 / 0) 70%),
    radial-gradient(ellipse 22% 18% at 90% 90%, rgb(245 150 90 / 0.18) 0%, rgb(245 150 90 / 0) 70%);
}

.mf-journey__intro {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin: 0 auto 20px;
  text-align: center;
}

.mf-journey__intro .mf-eyebrow { margin-block-end: 22px; }
.mf-journey__intro .mf-h2 { font-size: 48px; }
.mf-journey__intro .mf-lead { max-inline-size: 680px; }

.mf-journey__steps {
  position: relative;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-journey__rail {
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 0;
  inline-size: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgb(226 217 206 / 0) 0%,
    var(--border-light) 12%,
    var(--border-light) 88%,
    rgb(226 217 206 / 0) 100%
  );
  z-index: 1;
}

.mf-journey__progress {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  inline-size: 2px;
  block-size: 0;
  transform: translateX(-50%);
  background: var(--grad-brand-v);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  z-index: 2;
  transition: height 0.3s ease;
}

.mf-jstep {
  position: relative;
  min-block-size: 56vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.mf-jstep__media { padding-inline-end: 90px; }
.mf-jstep__body { padding-inline-start: 90px; }

/* Odd steps flip: copy left, demo right */
.mf-jstep-flip .mf-jstep__media {
  order: 2;
  padding-inline: 90px 0;
}

.mf-jstep-flip .mf-jstep__body {
  order: 1;
  padding-inline: 0 90px;
}

/* The demo column trails the copy in */
.mf-jstep__media .mf-reveal { transition-delay: 0.1s; }

.mf-jstep__eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--flare-600);
  font-weight: var(--weight-semibold);
  margin: 0 0 14px;
}

.mf-jstep__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 42px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
}

.mf-jstep__blurb {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 20px;
  max-inline-size: 420px;
}

/* --- Demo frame --- */
.mf-demo {
  border-radius: var(--radius-panel);
  overflow: hidden;
  position: relative;
  aspect-ratio: 600 / 510;
  inline-size: 100%;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-demo);
  background: var(--coal-800);
}

.mf-demo-engagement { background: var(--ink-on-dark); }
.mf-demo-arrival,
.mf-demo-consultation { background: #000; }
.mf-demo-followup { background: var(--paper-800); }

.mf-demo iframe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 600px;
  block-size: 510px;
  border: 0;
  transform-origin: top left;
}

/* Placeholder for a demo whose asset has not been supplied yet */
.mf-demo-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-dark-deep);
}

.mf-demo-pending__mark {
  color: var(--flare-a30);
  display: flex;
}

/* --- Feature list --- */
.mf-featlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mf-feat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.mf-feat__tick {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--flare-a16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 2px;
}

.mf-feat__text {
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-body);
}

.mf-feat .mf-badge { margin-block-start: 3px; }

/* --- Rail dot --- */
.mf-jstep__dot {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  background: var(--paper-600);
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all 0.4s ease;
  color: var(--journey-dot-idle);
}

.mf-jstep__dot.is-reached {
  background: linear-gradient(135deg, var(--flare-400), var(--flare-warm));
  border-color: transparent;
  box-shadow: 0 0 0 5px var(--flare-a15), 0 0 18px var(--flare-a30);
  color: var(--ink-on-dark);
}


/* ==========================================================================
   Why this matters — before / after
   ========================================================================== */

.mf-compare {
  position: relative;
  padding: 150px 40px 340px;
  overflow-x: clip;
  background: var(--coal-900);
  margin-block-start: -2px;
}

/* --- Drifting glows --- */
/* Flare blooms with no edge to them, where the brand mark and its rings used
   to pulse. Each holds its place and breathes — the light comes up and eases back, on a cadence
   long enough to be felt rather than watched; sized past the section's clip
   so its own edge never shows. */
.mf-glow {
  position: absolute;
  inline-size: 1200px;
  block-size: 1200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--flare-a30) 0%, var(--flare-a15) 22%, var(--flare-a05) 42%, transparent 62%);
  animation: mfGlowBreathe 9s ease-in-out infinite;
}

/* Off the right edge of the comparison, level with the two panels. */
.mf-glow-compare {
  inset-block-start: -120px;
  inset-inline-end: -420px;
}

/* Off the left edge behind the bento, straddling the ramp above it — and
   out of step with the first, so the two never breathe together. */
.mf-glow-compliance {
  inset-block-start: 40px;
  inset-inline-start: -520px;
  animation-duration: 11s;
  animation-delay: -4s;
}

/* --- Horizon fade into the next section --- */
.mf-compare__horizon {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 360px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    var(--coal-900) 0%,
    var(--coal-900) 6%,
    #2a1509 15%,
    #6e2e11 25%,
    #a84517 35%,
    #da641c 45%,
    #ec8531 55%,
    #f2a24c 65%,
    #f4be78 74%,
    #f3d3a2 83%,
    #f1e1cc 91%,
    var(--paper-600) 100%
  );
}

.mf-compare__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

/* Centred, like the two columns and the bottom line under it. */
.mf-compare__head { margin-block-end: 70px; text-align: center; display: grid; justify-items: center; }
.mf-compare__head .mf-eyebrow { margin-block-end: 20px; }
.mf-compare__head .mf-h2 { line-height: 1.12; max-inline-size: 820px; text-wrap: balance; }

.mf-compare__lead-strong {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  color: var(--ink-on-dark-strong);
  max-inline-size: 640px;
  margin: 24px auto 0;
}

.mf-compare__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-on-dark-dim);
  max-inline-size: 900px;
  margin: 14px auto 0;
}

/* --- The two columns ---
   Level, read left to right: what it is like without, then with. The
   "without" column is set back (a flat, darker panel, muted crosses); the
   "with" column carries the brand border and, once lit, a bloom behind it,
   so the eye lands on the right-hand side without anything pointing there.

   The lighting is a sequence, run by home.js adding .js-cmp (will animate,
   so start dark) and then .is-in (go). Without either the two columns sit
   there, lit — that is also the reduced-motion and no-JS state. */
.mf-cmp {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-inline-size: 1100px;
  margin-inline: auto;
  align-items: stretch;
}

/* The bloom behind the "with" column, sized past it. A sibling of the
   columns rather than a child, so it can sit behind the panel's background
   and not just behind its text. */
.mf-cmp::before {
  content: "";
  position: absolute;
  inset: -30% -22% -30% 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--flare-a25) 0%, var(--flare-a10) 35%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.mf-cmp__col {
  position: relative;
  z-index: 1;
  padding: 34px 36px 30px;
  border-radius: var(--radius-panel);
}

/* Set back from the lit column by its surface alone — a flat, darker
   panel with no border glow — and read in full. */
.mf-cmp__col-without {
  background: var(--coal-780);
  border: 1px solid var(--coal-300);
}

.mf-cmp__col-with {
  background:
    var(--panel-dark) padding-box,
    var(--grad-border) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-panel), 0 0 70px var(--flare-a15);
}

.mf-cmp__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 22px;
}

.mf-cmp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.mf-cmp__list li {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
}

.mf-cmp__col-without li { color: var(--ink-on-dark-body); }
.mf-cmp__col-with li { color: var(--ink-on-dark-strong); }

.mf-cmp__x {
  display: inline-block;
  inline-size: 1.2em;
  margin: 0.1em 10px 0 0;
  color: var(--status-cross);
  text-align: center;
  flex: none;
}

.mf-cmp__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  margin: 0.15em 12px 0 0;
  border-radius: 50%;
  background: var(--grad-brand);
  flex: none;
}

/* --- The lighting sequence ---
   0.0s  the "without" column arrives, its lines one after another — then
         a beat, long enough to read them
   3.2s  the "with" panel ignites: rises into place over a second and a
         half with a slow flash off its border, the bloom opening behind it
   3.9s  its lines land one at a time — nearly half a second between
         them, each rising and fading in over most of a second, its tick
         popping as it settles — the last one at about seven seconds */
.js-cmp .mf-cmp::before { opacity: 0; scale: 0.5; }
.js-cmp .mf-cmp__col-without { opacity: 0; translate: 0 18px; }
.js-cmp .mf-cmp__col-without li { opacity: 0; }
.js-cmp .mf-cmp__col-with { opacity: 0; scale: 0.96; translate: 0 34px; }
.js-cmp .mf-cmp__col-with li { opacity: 0; translate: 0 14px; filter: blur(3px); }
.js-cmp .mf-cmp__tick { scale: 0; }

.js-cmp.is-in .mf-cmp__col-without {
  animation: mfCmpArrive 0.9s var(--ease-out) forwards;
}
.js-cmp.is-in .mf-cmp__col-without li {
  animation: mfCmpLine 0.7s ease forwards;
  animation-delay: calc(0.3s + var(--i) * 170ms);
}
.js-cmp.is-in .mf-cmp__col-with {
  animation: mfCmpIgnite 1.6s cubic-bezier(0.22, 1, 0.36, 1) 3.2s forwards;
}
.js-cmp.is-in .mf-cmp::before {
  animation: mfCmpBloom 2.2s cubic-bezier(0.22, 1, 0.36, 1) 3.3s forwards, mfGlowBreathe 9s ease-in-out 5.5s infinite;
}
.js-cmp.is-in .mf-cmp__col-with li {
  animation: mfCmpLand 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(3.9s + var(--i) * 440ms);
}
.js-cmp.is-in .mf-cmp__tick {
  animation: mfCmpPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(4.2s + var(--i) * 440ms);
}

@keyframes mfCmpArrive {
  to { opacity: 1; translate: 0 0; }
}

@keyframes mfCmpLine {
  to { opacity: 1; }
}

@keyframes mfCmpIgnite {
  0% { opacity: 0; scale: 0.96; translate: 0 34px; box-shadow: var(--shadow-panel), 0 0 0 0 var(--flare-a40); }
  35% { opacity: 1; scale: 1; translate: 0 0; box-shadow: var(--shadow-panel), 0 0 40px 4px var(--flare-a25); }
  60% { scale: 1.008; box-shadow: var(--shadow-panel), 0 0 130px 16px var(--flare-a40); }
  100% { opacity: 1; scale: 1; translate: 0 0; box-shadow: var(--shadow-panel), 0 0 70px var(--flare-a15); }
}

@keyframes mfCmpBloom {
  to { opacity: 1; scale: 1; }
}

@keyframes mfCmpLand {
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes mfCmpPop {
  0% { scale: 0; }
  60% { scale: 1.25; }
  100% { scale: 1; }
}

/* --- Bottom line --- */
.mf-bottomline {
  max-inline-size: 1100px;
  margin: 64px auto 0;
  padding-block-end: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.mf-bottomline__rule {
  inline-size: 44px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--grad-brand-flat);
}

.mf-bottomline__label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
  margin: 0;
}

.mf-bottomline__quote {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
  margin: 0;
}


/* ==========================================================================
   Services
   ========================================================================== */

.mf-services {
  position: relative;
  /* .mf-svc-grid and the stage bar carry z-index: 1 for their own internal
     layering. Isolating keeps that local rather than letting it escape the
     section and outrank later siblings, which are z-index auto — so plain DOM
     order decides between sections. */
  isolation: isolate;
  /* The 300px .mf-horizon ramp directly below is the visual break into the
     dark section, so the panel does not have to stage the whole gap itself —
     but it does need to clear it. At 24px the panel's bottom edge sat almost
     on the ramp, with the shadow bleeding into the orange, and the window
     read as falling into the next section rather than ending. */
  padding: 40px 40px 72px;
  background: var(--paper-600);
}

.mf-services__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 22% 16% at 5% 10%, rgb(245 150 90 / 0.18) 0%, rgb(245 150 90 / 0) 70%),
    radial-gradient(ellipse 20% 15% at 95% 22%, rgb(232 110 70 / 0.16) 0%, rgb(232 110 70 / 0) 70%),
    radial-gradient(ellipse 26% 18% at 52% 60%, rgb(248 190 150 / 0.16) 0%, rgb(248 190 150 / 0) 70%),
    radial-gradient(ellipse 20% 16% at 8% 84%, rgb(248 190 150 / 0.18) 0%, rgb(248 190 150 / 0) 70%),
    radial-gradient(ellipse 20% 15% at 92% 88%, rgb(245 150 90 / 0.16) 0%, rgb(245 150 90 / 0) 70%);
}

.mf-services__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

/* 40px of breathing room under the lead, on top of the 28px that separates
   the head from the stage — the description shouldn't butt up against the
   services panel. */
.mf-services__head { text-align: center; margin-block-end: 28px; padding-block-end: 40px; }
.mf-services__head .mf-eyebrow { margin-block-end: 20px; }
.mf-services__head .mf-h2 { line-height: 1.1; }

/* The services window, and the track it sticks inside.

   The head and the window hold still together while the page scrolls, and each
   service gets its own stretch of that scroll: pass into the next stretch and
   the window turns to the next service, a page at a time. One scroll, the
   page's own, and no second scrollbar. home.js sets the track's height to the
   pinned piece plus those stretches, so it lets go once the last service has
   had its turn.

   Pinning is opt-in via data-svc-pin, which home.js sets only when the head
   and the window fit between the nav and the fold. Without it (narrow, short,
   or no JS) the stage is an ordinary block and none of this applies. */
.mf-svc-track { position: relative; }

/* What sticks is the head and the window as one piece — the heading and the
   description stay over the window for as long as it is held, rather than
   scrolling off under the nav while the services turn. */
.mf-svc-track[data-svc-pin="on"] .mf-svc-pin {
  position: sticky;
  /* Centres the piece in the band under the nav — supplied by home.js, since
     it depends on its measured height. */
  inset-block-start: var(--svc-pin-top, 116px);
}

/* Fitting the head and the window under the nav at once.

   Full size, the pair needs about 1100px of viewport height, which most
   laptops don't have. So when it pins, home.js steps the head and the rail
   down until the pair fits (data-svc-head / data-svc-rail — absent means full
   size, which is also what an unpinned section gets). The head gives up its
   spacing and a type step first, then the eyebrow and the heading's line
   break; the rail gives up padding, then its taglines. Whatever that frees
   goes to the cards. */
.mf-svc-track[data-svc-head] .mf-services__head { margin-block-end: 20px; padding-block-end: 0; }
.mf-svc-track[data-svc-head] .mf-services__head .mf-eyebrow { margin-block-end: 12px; }
.mf-svc-track[data-svc-head] .mf-services__head .mf-h2 { font-size: 38px; }
.mf-svc-track[data-svc-head] .mf-services__head .mf-lead {
  font-size: 16px;
  line-height: 1.6;
  margin-block-start: 12px;
}

/* The eyebrow can go because the window's title bar, directly underneath,
   carries the same words. */
.mf-svc-track[data-svc-head="tight"] .mf-services__head .mf-eyebrow,
.mf-svc-track[data-svc-head="tight"] .mf-services__head .mf-h2 br { display: none; }

.mf-svc-track[data-svc-rail] .mf-svc-tab { padding-block: 10px; }
.mf-svc-track[data-svc-rail="tight"] .mf-svc-tab__tagline { display: none; }

.mf-svc-stage {
  position: relative;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  overflow: hidden;
  box-shadow: var(--shadow-stage);
}

.mf-svc-stage__bar {
  position: relative;
  z-index: 1;
  block-size: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 22px;
  background: var(--coal-800);
  border-block-end: 1px solid var(--coal-400);
}

/* Direct children only — the bar's title is a <p>, but scoping this keeps the
   dot rule from reaching anything that lands inside it later. */
.mf-svc-stage__bar > span {
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: var(--coal-300);
}

/* Centred in the bar the way a window title is, and absolutely positioned so
   it centres against the stage rather than against the space left over by the
   dots. The inline padding keeps it clear of them at narrow widths. */
.mf-svc-stage__title {
  position: absolute;
  inset-inline: 0;
  margin: 0;
  padding-inline: 96px;
  /* base.css caps every <p> at 65ch, which would shrink-wrap this off-centre. */
  max-inline-size: none;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Below this the title has less room than the dots take, so it goes rather
   than sitting on top of them. */
@media (max-width: 700px) {
  .mf-svc-stage__title { display: none; }
}

.mf-svc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 340px 1fr;

  /* Whether the layout is wide enough for the rail to sit beside the column
     and the window to pin. Off once the grid stacks. CSS owns the breakpoint,
     home.js reads it rather than duplicating the number. */
  --svc-scroller: 1;
}

/* --- Tabs --- */
.mf-svc-tabs {
  position: relative;
  border-inline-end: 1px solid var(--coal-400);
  background: var(--coal-850);
}

.mf-svc-tabs__indicator {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 3px;
  block-size: 0;
  background: var(--grad-brand-v);
  border-radius: 0 3px 3px 0;
  transition:
    top 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  pointer-events: none;
}

.mf-svc-tab {
  display: block;
  inline-size: 100%;
  text-align: start;
  background: none;
  border: none;
  border-block-end: 1px solid var(--flare-a12);
  cursor: pointer;
  padding: 14px 24px;
  transition: background 0.2s ease;
}

.mf-svc-tab:hover { background: var(--flare-a05); }
.mf-svc-tab:focus-visible { outline: 2px solid var(--flare-600); outline-offset: -2px; }

.mf-svc-tab.is-active {
  background: linear-gradient(135deg, var(--coal-740) 0%, var(--coal-900) 100%);
}

.mf-svc-tab__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mf-svc-tab__num {
  flex: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.mf-svc-tab__name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

.mf-svc-tab.is-active .mf-svc-tab__name {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mf-svc-tab__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted);
  margin-block-start: 3px;
}

.mf-svc-tab.is-active .mf-svc-tab__tagline { color: var(--ink-on-dark-body); }

/* --- The panel column ---
   All eight panels are stacked in here, each a page of the window rather
   than a card of its own.

   Pinned, the column is clipped to the window frame (height from home.js) and
   every card is floored at the frame's height, so exactly one service is in
   view. home.js sets --svc-y to the offset of the service that is up and the
   cards slide there; the one in view is opaque and the rest are faded out, so
   a turn reads as one page leaving and the next arriving rather than a strip
   being dragged past. overflow: hidden, not auto, so the wheel is never
   captured here — the page is the only thing that scrolls.

   Not pinned, it is a plain block showing one service at a time (home.js hides
   the rest) and the rail works as tabs. */
.mf-svc-panels {
  padding: 8px 8px 8px 0;
  background: var(--coal-850);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mf-svc-track[data-svc-pin="on"] .mf-svc-panels { overflow: hidden; }

.mf-svc-track[data-svc-pin="on"] .mf-svc-panels > .mf-svc-panel {
  min-block-size: var(--svc-card-min, 0);
  transform: translateY(calc(var(--svc-y, 0px) * -1));
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.mf-svc-track[data-svc-pin="on"] .mf-svc-panels > .mf-svc-panel.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mf-svc-track[data-svc-pin="on"] .mf-svc-panels > .mf-svc-panel { transition: none; }
}

/* flex: 0 0 auto because a flex column would otherwise shrink the cards to fit
   the frame they are supposed to overflow. */
.mf-svc-panels > .mf-svc-panel {
  --svc-card-block: 24px;
  --svc-card-inline: 40px;
  flex: 0 0 auto;
  padding: var(--svc-card-block) var(--svc-card-inline);
  /* No chrome of its own: the window frames it, and the notes and the
     mock-up inside it are boxes enough. */
  /* The notes and the mock-up decide between one row and two by the card's
     own width (see .mf-svc-panel__extras). */
  container: svc-panel / inline-size;
}

/* Fitting the card inside the frame.

   The frame is whatever the band under the nav has left once the head and
   the rail are in, and the cards have to fit it whole — a card that runs
   past the frame has to be panned to be read, which is the one thing the
   window is not supposed to do. So when the tallest card does not fit,
   home.js steps the cards down too (data-svc-card): first the spacing
   inside them, then the paragraph under the lead and the air inside the
   mock-ups — the lead, the ticks and the notes still say what the service
   is, and the service page has the rest. */
.mf-svc-track[data-svc-card] .mf-svc-panels > .mf-svc-panel { --svc-card-block: 20px; }
.mf-svc-track[data-svc-card] .mf-svc-panel__title { font-size: 30px; }
.mf-svc-track[data-svc-card] .mf-svc-panel__lead { margin-block-start: 10px; font-size: 19px; }
.mf-svc-track[data-svc-card] .mf-svc-panel__desc { margin-block-start: 8px; }
.mf-svc-track[data-svc-card] .mf-svc-panel__features { margin-block-start: 8px; gap: 6px 22px; }
.mf-svc-track[data-svc-card] .mf-svc-panel__extras { margin-block-start: 12px; gap: 12px; }
.mf-svc-track[data-svc-card] .mf-svc-notes { gap: 10px; }
.mf-svc-track[data-svc-card] .mf-svc-note { padding: 12px 14px; }
.mf-svc-track[data-svc-card] .mf-svc-note__body { font-size: 12.5px; line-height: 1.6; }
.mf-svc-track[data-svc-card] .mf-mock { padding: 15px; }
.mf-svc-track[data-svc-card] .mf-mock__head { margin-block-end: 10px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-panel__desc { display: none; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-panels > .mf-svc-panel { --svc-card-block: 16px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-panel__title { font-size: 28px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-panel__lead { margin-block-start: 8px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-panel__features { margin-block-start: 6px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-panel__extras { margin-block-start: 10px; gap: 10px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-notes { gap: 8px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-note { padding: 10px 13px; }
.mf-svc-track[data-svc-card="tight"] .mf-svc-note__body { font-size: 12px; line-height: 1.55; }
.mf-svc-track[data-svc-card="tight"] .mf-mock { padding: 13px; }
.mf-svc-track[data-svc-card="tight"] .mf-mock__head { margin-block-end: 8px; }
.mf-svc-track[data-svc-card="tight"] .mf-mock__box { padding: 10px; }
.mf-svc-track[data-svc-card="tight"] .mf-mock__row { padding: 9px 11px; }
.mf-svc-track[data-svc-card="tight"] .mf-mock__divider { margin-block: 8px; }
.mf-svc-track[data-svc-card="tight"] .mf-mock__foot { margin-block-start: 8px; }

@media (max-width: 1000px) {
  .mf-svc-grid { --svc-scroller: 0; }
}

/* --- The pager — the rail's stand-in once the grid stacks ---
   A strip of eight tabs scrolled sideways on a phone, with the one in view
   half off the edge; this says where you are and moves one service at a
   time instead. Hidden where the rail is beside the column. */
.mf-svc-pager {
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--coal-850);
  border-block-end: 1px solid var(--coal-400);
}

.mf-svc-pager__btn {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--coal-300);
  background: var(--coal-800);
  color: var(--ink-on-dark);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.mf-svc-pager__btn:hover { border-color: var(--flare-500); background: var(--flare-a10); }
.mf-svc-pager__btn:focus-visible { outline: 2px solid var(--flare-500); outline-offset: 2px; }
.mf-svc-pager__btn:disabled { opacity: 0.3; cursor: default; }
.mf-svc-pager__btn[data-svc-step="-1"] svg { rotate: 180deg; }

.mf-svc-pager__label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-inline-size: 0;
  text-align: center;
}

.mf-svc-pager__num {
  flex: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.mf-svc-pager__name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mf-svc-pager__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.mf-svc-pager__dots i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--coal-300);
  transition: background 0.2s ease, scale 0.2s ease;
}

.mf-svc-pager__dots i.is-on { background: var(--flare-500); scale: 1.3; }

.mf-svc-panel[hidden] { display: none; }

.mf-svc-panel { position: relative; }

.mf-svc-panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline-end: 180px;
}

.mf-svc-panel__num {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.mf-svc-panel__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(26px, 1.3rem + 0.9vw, 34px);
  color: var(--ink-on-dark);
  margin: 0;
}

.mf-svc-panel__badge {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
  background: var(--flare-a12);
  border: 1px solid var(--flare-a25);
  border-radius: var(--radius-nav);
  padding: 4px 12px;
  white-space: nowrap;
}

.mf-svc-panel__badge-soon {
  color: var(--status-soon);
  background: var(--status-soon-soft);
  border-color: var(--status-soon-line);
}

.mf-svc-panel__badge-beta {
  color: var(--status-beta);
  background: var(--status-beta-soft);
  border-color: var(--status-beta-line);
}

.mf-svc-panel__lead {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  margin: 14px 0 0;
}

.mf-svc-panel__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 10px 0 0;
  max-inline-size: 900px;
}

.mf-svc-panel__features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.mf-svc-panel__features li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-on-dark-body);
}

.mf-svc-panel__features svg { flex: none; margin-block-start: 4px; }

.mf-svc-panel__more {
  position: absolute;
  /* Inset by the card's own padding — the panel is the positioning ancestor,
     so a flat 0 would park this in the card's corner, on top of its border. */
  inset-block-start: var(--svc-card-block, 0);
  inset-inline-end: var(--svc-card-inline, 0);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: transform 0.2s;
}

.mf-svc-panel__more:hover { transform: translateY(-2px); text-decoration: none; }

/* --- Notes and the mock-up ---
   Stacked by default: the notes two-up, the mock-up under them. Once the card
   is wide enough for both, they share a row — the notes down the left, the
   mock-up beside them — which is what keeps the card inside the frame on a
   laptop: the column has the width to spare and not the height. */
.mf-svc-panel__extras {
  margin-block-start: 16px;
  display: grid;
  gap: 16px;
}

.mf-svc-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-inline-size: 740px;
}

.mf-svc-notes-wide { grid-template-columns: 1fr; }

@container svc-panel (min-width: 700px) {
  .mf-svc-panel__extras {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
  .mf-svc-notes { grid-template-columns: 1fr; max-inline-size: none; }
  .mf-mock-grid { margin-block-start: 0; max-inline-size: none; }
}

/* The long notes are what runs past the frame on a 768-tall laptop: at the
   tightest step they get an even share of the row — once the row is wide
   enough that the two-up mock-ups survive the narrower half. */
@container svc-panel (min-width: 840px) {
  .mf-svc-track[data-svc-card="tight"] .mf-svc-panel__extras {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.mf-svc-note {
  background: var(--flare-a05);
  border: 1px solid var(--flare-a20);
  border-radius: var(--radius-inset);
  padding: 16px 18px;
}

.mf-svc-note__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--flare-500);
  margin: 0 0 7px;
}

.mf-svc-note__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-on-dark-dim);
  margin: 0;
}

/* --- Mock widgets --- */
.mf-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-inline-size: 740px;
}

.mf-mock-grid-single { grid-template-columns: 1fr; }

.mf-mock {
  background: var(--coal-720);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-tile);
  padding: 20px;
}

.mf-mock__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-mock__box {
  background: var(--coal-780);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-chip);
  padding: 13px;
}

.mf-mock__box-flush { padding: 0; overflow: hidden; }

.mf-mock__field {
  background: var(--coal-780);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-chip);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-on-dark-dim);
  margin-block-end: 10px;
}

.mf-mock__field-sm {
  background: var(--coal-600);
  border-radius: 7px;
  padding: 6px 9px;
  gap: 7px;
  font-size: 10px;
  color: var(--ink-muted);
}

.mf-mock__adtag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--flare-600);
  border: 1px solid var(--flare-a50);
  border-radius: 4px;
  padding: 2px 6px;
}

.mf-mock__adtitle {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-on-dark);
  margin: 7px 0 0;
}

.mf-mock__adurl {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--status-url);
  margin: 2px 0 0;
}

.mf-mock__caption {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-on-dark-dim);
  margin: 0;
}

.mf-mock__figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-semibold);
}

.mf-mock__figure > span:first-child:not(.mf-grad-text) {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-mock__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--status-live-on-dark);
}

.mf-mock__spark {
  inline-size: 100%;
  block-size: 38px;
  margin-block-start: 12px;
  display: block;
}

.mf-mock__row {
  background: var(--coal-780);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-chip);
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-on-dark-dim);
  margin-block-start: 8px;
}

.mf-mock__box .mf-mock__row { margin-block-start: 10px; }
.mf-mock__row > span:first-child { white-space: nowrap; }

.mf-mock__ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--status-live-on-dark);
}

.mf-mock__ok-end { margin-inline-start: auto; }

.mf-mock__pip {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--status-live-on-dark);
  box-shadow: 0 0 0 3px rgb(45 158 107 / 0.2);
}

.mf-mock__value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-semibold);
}

.mf-mock__value-sm {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-mock__kicker {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--flare-600);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.mf-mock__divider {
  display: block;
  block-size: 1px;
  background: var(--flare-a20);
  margin-block: 12px;
}

.mf-mock__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-on-dark-dim);
}

.mf-mock__tag {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--flare-500);
}

.mf-mock__btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
  border: 1px solid var(--coal-400);
  border-radius: var(--radius-nav);
  padding: 6px 14px;
}

.mf-mock__btn-yes {
  color: var(--ink-on-dark);
  background: var(--grad-cta);
  border-color: transparent;
}

/* Site before/after */
.mf-mock__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mf-mock__site {
  background: var(--coal-780);
  border: 1px solid var(--coal-400);
  border-radius: 9px;
  overflow: hidden;
}

.mf-mock__site-before { opacity: 0.6; }
.mf-mock__site-after { border-color: var(--flare-a30); }
.mf-mock__site .mf-mock__sitebar { display: block; block-size: 16px; background: var(--coal-500); }
.mf-mock__site-after .mf-mock__sitebar { background: var(--grad-cta); }
.mf-mock__sitebody { padding: 9px; display: flex; flex-direction: column; gap: 4px; }
.mf-mock__site-after .mf-mock__sitebody .mf-mock__bar:first-child { background: var(--grad-cta); block-size: 6px; }

.mf-mock__sitelabel {
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  text-align: center;
  margin: 0;
  padding-block-end: 8px;
}

.mf-mock__site-after .mf-mock__sitelabel { color: var(--flare-600); }

.mf-mock__bar {
  display: block;
  block-size: 5px;
  inline-size: var(--w, 80%);
  border-radius: 3px;
  background: var(--coal-400);
}

.mf-mock__cta {
  align-self: flex-start;
  margin-block-start: 4px;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  background: var(--grad-cta);
  border-radius: 4px;
  padding: 3px 7px;
}

.mf-mock__stat { flex: 1; }
.mf-mock__statval {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  margin: 4px 0 0;
}

/* Newsletter / hub */
.mf-mock__mailhead {
  block-size: 30px;
  background: var(--grad-cta);
  display: flex;
  align-items: center;
  padding-inline: 11px;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

.mf-mock__mailmark {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.9);
}

.mf-mock__mailbody { padding: 13px; display: flex; flex-direction: column; gap: 5px; }
.mf-mock__mailbody .mf-mock__adtitle { margin-block-end: 6px; }

.mf-mock__browser {
  block-size: 24px;
  background: var(--coal-600);
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 10px;
}

.mf-mock__browser span {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--coal-300);
}

.mf-mock__browserbody { padding: 11px; }
.mf-mock__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mf-mock__cards-3 { grid-template-columns: repeat(3, 1fr); }

.mf-mock__card {
  background: var(--coal-600);
  border: 1px solid var(--coal-400);
  border-radius: 7px;
  overflow: hidden;
}

.mf-mock__card > div { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mf-mock__card .mf-mock__bar { block-size: 4px; }

.mf-mock__cardtop { display: block; block-size: 22px; background: var(--grad-icon); opacity: 0.85; }
.mf-mock__cardtop-alt { background: linear-gradient(135deg, var(--flare-500), var(--flare-600)); opacity: 0.7; }

/* Chat bubbles */
.mf-bubble {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: var(--radius-chip);
  padding: 9px 12px;
  margin: 0;
  max-inline-size: 80%;
}

.mf-bubble-in {
  background: var(--coal-600);
  color: var(--ink-on-dark-body);
}

.mf-bubble-out {
  background: var(--grad-cta);
  color: var(--ink-on-dark);
  margin: 8px 0 0 auto;
}


/* ==========================================================================
   Compliance bento
   ========================================================================== */

/* Wrapper over the horizon ramp and the section, so the pulse rings can be
   positioned across the seam. It carries the coal ground and the clip the
   section used to own: the rings grow to ~1400px and still must not spill
   onto the light section below, but they are free to bleed up through the
   ramp. The section itself is transparent so they read through it. */
/* The coal starts partway down the horizon, not at the zone's top: the
   ramp opens transparent so the body's wash shows through its first stops,
   and coal behind that read as a dark bar across the seam. 150px is well
   inside the ramp's opaque middle at any width. */
.mf-compliance-zone {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, transparent 150px, var(--coal-900) 150px);
}

.mf-compliance {
  position: relative;
  padding: 50px 40px 110px;
  margin-block-start: -2px;
}

.mf-compliance__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 38% at 2% 100%, rgb(180 60 10 / 0.11) 0%, rgb(180 60 10 / 0) 62%),
    radial-gradient(ellipse 45% 38% at 50% 100%, rgb(180 60 10 / 0.11) 0%, rgb(180 60 10 / 0) 62%),
    radial-gradient(ellipse 45% 38% at 98% 100%, rgb(180 60 10 / 0.11) 0%, rgb(180 60 10 / 0) 62%),
    radial-gradient(ellipse 40% 35% at 98% 2%, rgb(180 60 10 / 0.1) 0%, rgb(180 60 10 / 0) 60%);
}

.mf-compliance__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-compliance__head { text-align: center; margin-block-end: 48px; }
.mf-compliance__head .mf-eyebrow { margin-block-end: 20px; }
.mf-compliance__head .mf-h2 { font-size: 42px; max-inline-size: 900px; margin-inline: auto; }

.mf-compliance__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 18px auto 0;
  max-inline-size: 620px;
}

.mf-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: minmax(210px, auto);
  gap: 20px;
}

.mf-btile {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--coal-640), var(--coal-760));
  border: 1px solid var(--flare-a16);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.mf-btile.is-in { opacity: 1; }

.mf-btile[data-mf-btile="light"]:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-tile-hover);
}

.mf-btile-lead {
  grid-row: span 2;
  padding: 38px;
  justify-content: flex-start;
}

.mf-btile__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, var(--flare-a06), transparent 60%);
  pointer-events: none;
}

.mf-btile__body {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

.mf-btile__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink-on-dark);
  margin: 0 0 8px;
}

.mf-btile__title-lg { font-size: 26px; margin-block-end: 10px; }

.mf-btile__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-dim);
  margin: 0;
}

.mf-btile-lead .mf-btile__text { font-size: 15px; line-height: 1.65; }

.mf-btile .mf-chip-icon-sq {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 12px;
  margin-block-end: 16px;
}

.mf-btile__checks {
  margin-block-start: auto;
  padding-block-start: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
}

.mf-btile__checks li {
  display: flex;
  gap: 11px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-on-dark-strong);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.mf-btile__checks li.is-in { opacity: 1; transform: translateX(0); }
.mf-btile__checks svg { flex: none; }

.mf-btile-img {
  background: var(--coal-720);
  padding: 0;
  align-items: center;
  justify-content: center;
}

.mf-btile-img__mark { color: var(--flare-a20); display: flex; }


/* ==========================================================================
   Testimonials
   ========================================================================== */

.mf-testimonials {
  position: relative;
  padding: 110px 40px 420px;
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-testimonials::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 360px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    var(--coal-900) 0%,
    var(--coal-900) 6%,
    #2a1509 15%,
    #6e2e11 25%,
    #a84517 35%,
    #da641c 45%,
    #ec8531 55%,
    #f2a24c 65%,
    #f4be78 74%,
    #f3d3a2 83%,
    #f1e1cc 91%,
    var(--paper-600) 100%
  );
}

.mf-testimonials__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: stretch;
}

.mf-testimonials__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mf-testimonials__intro .mf-eyebrow { margin-block-end: 22px; }
.mf-testimonials__intro .mf-h2 { font-size: 52px; line-height: 1.08; }

.mf-testimonials__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 22px 0 0;
  max-inline-size: 400px;
}

/* The label is two lines, so it sits centred on the figure rather than
   hanging from its baseline with the second line below. */
.mf-testimonials__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
}

.mf-testimonials__stat-value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 52px;
  line-height: 1;
}

.mf-testimonials__stat-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-inline-size: 12ch;
  line-height: 1.35;
}

.mf-testimonials__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mf-tcard {
  background: linear-gradient(160deg, var(--coal-640), var(--coal-760));
  border: 1px solid var(--flare-a16);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.35);
  margin: 0;
}

.mf-tcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 18px;
}

.mf-tcard__avatar {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  flex: none;
  background: var(--grad-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

.mf-tcard__who { flex: 1; }

.mf-tcard__name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
  margin: 0;
}

.mf-tcard__role {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 2px 0 0;
}

.mf-tcard__stars {
  display: flex;
  gap: 3px;
  margin: 0;
  color: var(--flare-500);
}

/* Override the base.css blockquote treatment — the design has no rule or italic */
.mf-tcard__quote {
  margin: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
  font-style: normal;
}

.mf-tcard__quote p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 0 0 18px;
}

.mf-tcard__date {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
}


/* ==========================================================================
   Why Mediflare
   ========================================================================== */

.mf-why {
  position: relative;
  background: var(--paper-600);
  padding: 72px 40px 96px;
  overflow: hidden;
}

.mf-why__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-why__head { margin-block-end: 52px; text-align: center; }
.mf-why__head .mf-eyebrow { margin-block-end: 22px; }

.mf-why__head .mf-lead {
  font-size: 18px;
  line-height: 1.6;
  max-inline-size: 640px;
  margin: 20px auto 0;
}

.mf-wtimeline {
  position: relative;
  block-size: 26px;
  margin: 0 0 34px;
}

.mf-wtimeline__rail {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  border-block-start: 1.5px dotted var(--flare-a40);
}

.mf-wtimeline__fill {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1.5px;
  transform: translateY(-50%);
  background: var(--grad-brand-flat);
  transition: width 0.2s linear;
}

.mf-wtimeline__node {
  position: absolute;
  inset-block-start: 0;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--flare-400), var(--flare-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

.mf-wtimeline__node:nth-child(3) { inset-inline-start: 0; }
.mf-wtimeline__node:nth-child(4) { inset-inline-start: 33.333%; }
.mf-wtimeline__node:nth-child(5) { inset-inline-start: 66.666%; }

.mf-why__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-wstep { padding-inline-end: 24px; }

.mf-wstep__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 12px;
}

.mf-wstep__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.75;
  margin: 0;
}


/* ==========================================================================
   Final CTA + stats
   ========================================================================== */

.mf-cta {
  position: relative;
  margin: 64px auto 0;
  padding: 20px 40px 220px;
}

.mf-cta__panel {
  position: relative;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--coal-740) 0%, var(--coal-900) 55%, #231206 100%);
  padding: 80px 64px;
  text-align: center;
  box-shadow: 0 40px 90px -44px rgb(18 14 8 / 0.6);
}

.mf-cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--flare-a22), transparent 60%);
  pointer-events: none;
}

.mf-cta__body { position: relative; z-index: 1; }
.mf-cta__body .mf-eyebrow { margin-block-end: 24px; }
.mf-cta__body .mf-h2 { font-size: 52px; line-height: 1.08; max-inline-size: 720px; margin-inline: auto; }

.mf-cta__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 20px auto 0;
  max-inline-size: 560px;
}

.mf-cta__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: 36px;
}

.mf-cta__actions .mf-btn { padding: 16px 32px; }

.mf-statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-inline-size: var(--section-max);
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}

.mf-stat {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 6px 26px rgb(180 100 20 / 0.07);
  border-radius: 20px;
  padding: 34px 30px;
}

.mf-stat__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 125%, var(--flare-a06), transparent 70%);
  pointer-events: none;
}

.mf-stat > div { position: relative; }

.mf-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(48px, 4.4vw, 70px);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}

.mf-stat__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 16px 0 0;
}

.mf-stat__note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 10px 0 0;
}


/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes mfCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mfIncIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}




/* Nothing moves, not even the edge: the glow only brightens and dims, so
   it reads as light coming up rather than a shape changing size. */
@keyframes mfGlowBreathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .mf-statrow { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .mf-bento { grid-template-columns: 1fr 1fr; }
  .mf-bento .mf-btile-lead { grid-row: auto; grid-column: span 2; }
}

@media (max-width: 1000px) {
  .mf-cmp { grid-template-columns: 1fr; }
  .mf-cmp::before { inset: 40% -20% -15%; }

  .mf-svc-grid { grid-template-columns: 1fr; }
  /* The rail goes, the pager takes its place. */
  .mf-svc-tabs { display: none; }
  .mf-svc-pager { display: grid; }
  /* Stacked: one card, so the gutter only has to frame it. The card keeps
     its own padding — narrower here, where the column is full width. */
  .mf-svc-panels { padding: 14px; }
  .mf-svc-panels > .mf-svc-panel { --svc-card-inline: 24px; }
  .mf-svc-panel__head { padding-inline-end: 0; flex-wrap: wrap; }
  .mf-svc-panel__more { position: static; margin-block-start: 22px; }

  .mf-testimonials__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .mf-hero { padding: 90px 24px 36px; min-block-size: 0; }
  .mf-hero__wrap { grid-template-columns: 1fr; gap: 48px; }
  /* Single column: cap the measure, since no grid column bounds it here. */
  .mf-hero__title { font-size: 42px; max-inline-size: 600px; }
  .mf-hero__art { min-block-size: 0; }
  .mf-fcard { display: none; }
}

@media (max-width: 860px) {
  .mf-h2 { font-size: 30px; }
  .mf-h2-xl { font-size: 34px; }
  .mf-journey__intro .mf-h2 { font-size: 30px; }
  .mf-compliance__head .mf-h2,
  .mf-testimonials__intro .mf-h2,
  .mf-cta__body .mf-h2 { font-size: 32px; }
  .mf-jstep__title { font-size: 30px; }
  .mf-bottomline__quote { font-size: 22px; }

  .mf-journey {
    margin-inline: 14px;
    border-radius: 18px;
    padding: 40px 24px 24px;
  }

  .mf-journey__rail,
  .mf-journey__progress,
  .mf-jstep__dot { display: none; }

  .mf-jstep {
    grid-template-columns: 1fr;
    min-block-size: 0;
    padding-block: 32px;
  }

  /* One column: the words first, then the picture of them. The media led
     on a wide screen only because it sat beside the copy; stacked, a
     screenshot with no heading over it is a picture of nothing yet. */
  .mf-jstep__media,
  .mf-jstep__body,
  .mf-jstep-flip .mf-jstep__media,
  .mf-jstep-flip .mf-jstep__body {
    padding-inline: 0;
    order: initial;
  }

  .mf-jstep__media,
  .mf-jstep-flip .mf-jstep__media { order: 2; margin-block-start: 26px; }

  .mf-compare { padding: 80px 20px 200px; }
  .mf-glow { display: none; }
  .mf-services { padding: 32px 20px 60px; }
  .mf-compliance,
  .mf-testimonials { padding-inline: 20px; }
  .mf-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mf-bento .mf-btile-lead { grid-column: auto; }
  .mf-mock-grid { grid-template-columns: 1fr; }
  .mf-svc-notes { grid-template-columns: 1fr; }
  .mf-why { padding: 48px 20px 64px; }
  .mf-why__steps { grid-template-columns: 1fr; gap: 28px; }
  .mf-wstep { padding-inline-end: 0; }
  .mf-wtimeline { display: none; }
  .mf-cta { padding: 20px 20px 120px; }
  .mf-cta__panel { padding: 48px 24px; border-radius: 18px; }
  .mf-statrow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  /* The journey heading's accent is held on one line on a desktop, but at
     30px it is ~400px wide — wider than a phone, where it ran off the right
     edge and was cut mid-word. */
  .mf-journey__intro .mf-nowrap { white-space: normal; }

  .mf-statrow { grid-template-columns: 1fr; }
  .mf-hero__title { font-size: 34px; }
  .mf-testimonials__inner { gap: 32px; }
}


/* ==========================================================================
   Reduced motion
   Kill looping/decorative motion; keep everything visible.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mf-marquee__track,
  .mf-marquee__pulse,
  .mf-glow,
  .mf-fcard.is-in,
  .mf-fcard.is-in .mf-bob,
  .mf-fcard.is-in .mf-inc { animation: none; }

  .mf-reveal,
  .mf-btile,
  .mf-btile__checks li,
  .mf-journey__progress,
  .mf-wtimeline__fill,
  .mf-jstep__dot,
  .mf-svc-tabs__indicator,
  .mf-btn,
  .mf-practice { transition: none; }

  .mf-reveal,
  .mf-fcard,
  .mf-inc,
  .mf-btile,
  .mf-btile__checks li {
    opacity: 1;
    transform: none;
  }

  .mf-btn-primary:hover,
  .mf-practice:hover,
  .mf-btile[data-mf-btile="light"]:hover,
  .mf-svc-panel__more:hover { transform: none; }
}