/* ==========================================================================
   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. */
.mf-marquee {
  position: relative;
  inline-size: 100%;
  margin-block-start: 60px;
  overflow: hidden;
  padding-block-end: 56px;
}

.mf-marquee__label {
  text-align: center;
  /* base.css caps every <p> at 65ch. At this 11px size that resolves to
     ~459px, which shrink-wrapped the label box to the left of the rail and
     left justify-content nothing to centre against. Opt out of the measure. */
  max-inline-size: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mf-marquee__pulse {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--status-live);
  animation: mfPulseDot 2s ease-in-out infinite;
}

.mf-marquee__rails { position: relative; }

.mf-marquee__fade {
  position: absolute;
  inset-block: 0;
  inline-size: 200px;
  z-index: 2;
  pointer-events: none;
}

.mf-marquee__fade-start {
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--paper-600), transparent);
}

.mf-marquee__fade-end {
  inset-inline-end: 0;
  background: linear-gradient(270deg, var(--paper-600), transparent);
}

.mf-marquee__track {
  display: flex;
  gap: 48px;
  inline-size: max-content;
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-marquee__track-a { animation: mfMarqueeLeft 48s linear infinite; }
.mf-marquee__track-b { animation: mfMarqueeRight 48s linear infinite; margin-block-start: 12px; }

.mf-marquee:hover .mf-marquee__track { animation-play-state: paused; }

.mf-practice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-nav);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex: none;
  background: var(--ink-a06);
  border: 1px solid var(--ink-a10);
  color: var(--ink);
  transition: all 0.2s ease;
}

.mf-practice:hover {
  background: var(--flare-a08);
  border-color: var(--flare-a30);
  color: var(--flare-700);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--flare-a10);
}

/* Pill variants — driven by `variant` in practices.json. Three tiers keep the
   rail from reading as one uniform band of grey.

   Each variant carries its own :hover. At three compound selectors these
   outrank the generic .mf-practice:hover above, which is what stops a dark
   pill picking up the orange text treatment meant for the plain ones. */
.mf-practice.is-accent {
  background: var(--flare-a08);
  border-color: var(--flare-a30);
  color: var(--flare-700);
}

.mf-practice.is-accent:hover {
  background: var(--flare-a15);
  border-color: var(--flare-a40);
  color: var(--flare-700);
}

.mf-practice.is-dark {
  background: var(--coal-700);
  border-color: var(--coal-700);
  color: var(--ink-on-dark);
}

.mf-practice.is-dark:hover {
  background: var(--coal-600);
  border-color: var(--flare-a30);
  color: var(--ink-on-dark);
}

.mf-practice__dot {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--grad-brand-flat);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Both accented tiers take the dot to full strength. */
.mf-practice.is-accent .mf-practice__dot,
.mf-practice.is-dark .mf-practice__dot { opacity: 1; }


/* ==========================================================================
   Section dividers
   ========================================================================== */

/* --- Curved wave: hero → journey --- */
.mf-wave {
  position: relative;
  block-size: 230px;
  margin-block-end: -2px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(232 84 10 / 0) 0%,
    rgb(232 84 10 / 0.08) 42%,
    rgb(232 84 10 / 0.22) 76%,
    rgb(216 64 12 / 0.34) 100%
  );
}

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

.mf-wave__blur-lg { filter: blur(38px); }
.mf-wave__blur-md { filter: blur(14px); }
.mf-wave__blur-sm { filter: blur(3px); }
.mf-wave__fill { fill: var(--paper-500); }

/* --- 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;
}

.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;
}

/* --- Pulsing brand mark --- */
.mf-pulse {
  position: absolute;
  inset-block-start: 60px;
  inset-inline-end: -360px;
  inline-size: 900px;
  block-size: 900px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.mf-pulse__ring {
  position: absolute;
  inline-size: 270px;
  block-size: 270px;
  border-radius: 50%;
  background: var(--grad-pulse);
  opacity: 0;
  animation: mfPulseRing 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.mf-pulse__ring-a { --pulse-to: 1.7; }
.mf-pulse__ring-b { --pulse-to: 2.6; animation-delay: 0.35s; }
.mf-pulse__ring-c { --pulse-to: 3.5; animation-delay: 0.7s; }
.mf-pulse__ring-d { --pulse-to: 4.4; animation-delay: 1.05s; }

.mf-pulse__core {
  position: relative;
  z-index: 10;
  inline-size: 270px;
  block-size: 270px;
  border-radius: 50%;
  background: var(--grad-pulse);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-on-dark);
  animation: mfBreathe 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* Rings-only variant, centred behind the compliance bento. Same cadence and
   stagger as the compare mark; the difference is that these are hollow
   outlines with no core, so the tiles stay readable on top of them. */
.mf-pulse-rings {
  /* Offset past the trailing edge, the same trick the compare mark uses: the
     bento tiles are opaque, so rings centred behind them would be swallowed
     whole. Out here the arcs sweep through the dark margin instead. */
  inset-block-start: 60px;
  inset-inline-end: -300px;
  inline-size: 1040px;
  block-size: 1040px;
  opacity: 0.85;
}

.mf-pulse-rings .mf-pulse__ring {
  inline-size: 320px;
  block-size: 320px;
  /* Punches the disc out to a 3px outline. The colour here is a stencil for
     the mask channel, not a brand value — only its alpha matters. */
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

/* --- 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;
}

.mf-compare__head { margin-block-end: 70px; }
.mf-compare__head .mf-eyebrow { margin-block-end: 20px; }
.mf-compare__head .mf-h2 { line-height: 1.12; max-inline-size: 820px; }

.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 0 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 0 0;
}

/* --- Terminals --- */
.mf-compare__stage {
  position: relative;
  max-inline-size: 1180px;
  margin-inline: auto;
  min-block-size: 520px;
}

.mf-connector {
  position: absolute;
  inset-inline-start: 520px;
  inset-block-start: 88px;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

.mf-connector [data-mf-conn-head] { opacity: 0; transition: opacity 0.16s ease; }

.mf-terminal {
  position: absolute;
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.mf-terminal-without {
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 520px;
  background: var(--panel-dark);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-terminal);
  z-index: 1;
}

.mf-terminal-with {
  inset-block-start: 180px;
  inset-inline-end: 0;
  inline-size: 680px;
  background:
    var(--panel-dark) padding-box,
    var(--grad-border) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-panel);
  z-index: 2;
}

.mf-terminal__bar {
  block-size: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 18px;
  border-block-end: 1px solid var(--coal-400);
}

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

.mf-terminal-without .mf-terminal__body { padding: 26px 48px 26px 26px; }
.mf-terminal-with .mf-terminal__body { padding: 26px 26px 30px; }

.mf-terminal__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 20px;
}

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

.mf-terminal__cross {
  color: var(--status-cross);
  margin-inline-end: 8px;
  display: inline-block;
}

.mf-terminal__line-typed {
  font-size: 14px;
  min-block-size: 1.6em;
}

/* One marker slot per typed line: a plus while the line is still being
   typed, swapped for a tick once it finishes. Fixed width so the swap
   does not nudge the text. */
.mf-terminal__mark {
  display: inline-block;
  inline-size: 1em;
  margin-inline-end: 8px;
  text-align: center;
}

/* No JS means every line is already complete, so the tick is the default. */
.mf-terminal__mark::before {
  content: "✓";
  color: var(--status-live);
}

.js-typing .mf-terminal__mark::before {
  content: "+";
  color: var(--flare-600);
}

.js-typing .mf-terminal__line-typed.is-typed .mf-terminal__mark::before {
  content: "✓";
  color: var(--status-live);
}

.mf-terminal__caret {
  color: var(--flare-600);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Typewriter only engages once JS takes over */
.js-typing .mf-terminal__line-typed { white-space: nowrap; }

/* The caret rides only the line currently being typed, so nothing is left
   sitting mid-type once the last line lands. */
.js-typing .mf-terminal__line-typed.is-typing .mf-terminal__caret { opacity: 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;
  /* The 300px .mf-horizon ramp directly below is the visual break into the
     dark section, so this only needs to clear the panel, not stage a gap.
     At 100px the two together read as dead space after the panel. */
  padding: 40px 40px 24px;
  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; }

/* --- Pinned scrub track ---
   The pin is pure CSS: a tall parent plus a sticky child. Nothing in JS
   positions the panel, sets this height, or decides when to pin — the
   browser handles stick and release natively off the bottom of this box.

   home.js only reads the geometry this produces (to map scroll position onto
   the service tabs) and scales the stage down when it would not fit the
   viewport. Both are covered further down. */
.mf-svc-track {
  position: relative;

  /* Clears the sticky .mf-nav (top: 16px) so the pinned panel never slides
     under it. home.js reads this value rather than duplicating it. */
  --svc-pin-top: 80px;

  /* Scroll runway per service, as a fraction of the viewport — 0.62 is the
     figure the design uses. Multiplied by the gaps between services (one
     fewer than the service count), this is the whole cost of the effect in
     page length. --svc-steps comes from the template so it stays in step
     with services.json rather than being hardcoded here. */
  --svc-step: 62vh;
  --svc-scrub: calc(var(--svc-steps, 7) * var(--svc-step));

  /* The tall parent. One viewport for the panel to hold still in, plus the
     scrub distance it holds still *for*. Sticky needs this room to travel
     through — with a parent no taller than the panel there is nothing to
     stick through and the pin is a no-op. */
  min-block-size: calc(100vh + var(--svc-scrub));
}

.mf-svc-sticky {
  position: sticky;
  inset-block-start: var(--svc-pin-top);
}

/* Per the design: no pin below 820px, and none under reduced-motion, where
   tying the panel swap to scroll position is exactly the sort of
   scroll-linked effect to opt out of. Both fall back to a plain click-driven
   tab panel. */
@media (max-width: 819px), (prefers-reduced-motion: reduce) {
  .mf-svc-track { min-block-size: 0; }
  .mf-svc-sticky { position: static; }
}

/* home.js sets this when it cannot scale the stage small enough to fit the
   viewport without the type going unreadable — which is what happens between
   820px and 1000px, where the grid has stacked into one very tall column.
   Without it the CSS would pin a panel whose lower half is unreachable. */
.mf-svc-track[data-svc-fit="off"] { min-block-size: 0; }
.mf-svc-track[data-svc-fit="off"] .mf-svc-sticky { position: static; }

.mf-svc-stage {
  position: relative;
  /* home.js scales this to fit the viewport so the pin always engages, having
     first widened it by the inverse of the scale. Anchor top left, not top
     centre: the widened box starts at the parent's left edge and overflows to
     the right, so centre-scaling would leave it sitting right of the section.
     Scaling from the left edge lands it back at exactly the section width. */
  transform-origin: top left;
  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);
}

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

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

/* --- 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); }

/* --- Panels --- */
.mf-svc-panels {
  /* Top padding matches .mf-svc-tab's 22px so the panel title lines up with
     the first tab's text instead of starting 30px below it. */
  padding: 14px 56px 20px;
  background: var(--coal-760);
}

.mf-svc-panel { position: relative; }
.mf-svc-panel[hidden] { display: none; }
.mf-svc-panel.is-entering { animation: mfPanelIn 0.45s ease both; }

.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: 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__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-block-start: 0;
  inset-inline-end: 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 --- */
.mf-svc-notes {
  margin-block-start: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-inline-size: 740px;
}

.mf-svc-notes-wide { grid-template-columns: 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 {
  margin-block-start: 12px;
  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);
}

.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__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);
}

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

.mf-mock__pip {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--status-live);
  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
   ========================================================================== */

.mf-compliance {
  position: relative;
  padding: 50px 40px 110px;
  /* Clipped on both axes, not just x: the pulse rings grow to ~1400px and
     would otherwise spill onto the light section below. */
  overflow: clip;
  background: var(--coal-900);
  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;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.mf-btile.is-in { opacity: 1; transform: translateY(0); }

.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;
}

/* The "we track the guidelines" tile uses a flat wash, not the gradient */
.mf-bento > .mf-btile:last-of-type .mf-chip-icon-sq { background: var(--flare-a10); }

.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;
}

.mf-testimonials__stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  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); }
}

@keyframes mfPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes mfMarqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mfMarqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes mfPulseRing {
  0% { transform: scale(0.55); opacity: 0; }
  12% { opacity: 0.9; }
  55% { opacity: 0.28; }
  100% { transform: scale(var(--pulse-to, 1.7)); opacity: 0; }
}

@keyframes mfBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

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


/* ==========================================================================
   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-compare__stage {
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .mf-terminal { position: static; inline-size: 100%; }
  .mf-connector { display: none; }

  .mf-svc-grid { grid-template-columns: 1fr; }
  .mf-svc-tabs { border-inline-end: 0; border-block-end: 1px solid var(--coal-400); display: flex; overflow-x: auto; }
  .mf-svc-tabs__indicator { display: none; }
  .mf-svc-tab { inline-size: auto; min-inline-size: 220px; border-block-end: 0; border-inline-end: 1px solid var(--flare-a12); }
  .mf-svc-panels { padding: 36px 28px; }
  .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;
  }

  .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 { margin-block-end: 26px; }

  .mf-compare { padding: 80px 20px 200px; }
  .mf-pulse { 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; }
  .mf-marquee__fade { inline-size: 80px; }
}

@media (max-width: 560px) {
  .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-pulse__ring,
  .mf-pulse__core,
  .mf-fcard.is-in,
  .mf-fcard.is-in .mf-bob,
  .mf-fcard.is-in .mf-inc,
  .mf-svc-panel.is-entering { 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; }
}