/* ==========================================================================
   Your Health Digital
   Loaded only by src/pages/your-health-digital.njk (front matter:
   pageCss: your-health).

   Shared furniture (.mf-h2, .mf-lead, .mf-btn*, .mf-eyebrow*, .mf-reveal,
   .mf-horizon, .mf-chip-icon, .mf-bob) comes from framework/components.css
   and framework/animations.css. Colour, type, radius and shadow all come
   from tokens — see theme-mediflare.css and framework/tokens.css. No raw hex
   below except inside gradient ramps, where the stops are the design itself.

   Hero, problem, benefits and the RACGP notice run on the warm wash; from
   there the page alternates a section at a time — how it works on coal,
   what's included on paper, heritage on coal, the comparison on paper,
   pricing on coal, the FAQ on paper — closing on a dark panel floating on
   the wash. The .mf-horizon bands in the template take each change of
   ground. Every section carries --yh-section above and below its content,
   so the gaps between sections are one figure.
   ========================================================================== */

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.mf-yh-sechead {
  text-align: center;
  max-inline-size: 780px;
  margin: 0 auto 56px;
}

.mf-yh-sechead .mf-eyebrow { margin-block-end: 20px; }

/* The lead under a dark heading needs the on-coal body colour; .mf-lead is
   written for paper. */
.mf-yh-sechead-dark .mf-lead { color: var(--ink-on-dark-body); }


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

/* ==========================================================================
   The arch under the hero

   On :root rather than on the hero: the wave divider is the hero's sibling
   and cannot read a property scoped to it, and the dome's fill and the seam
   the hero fades to must never disagree.
   ========================================================================== */

:root {
  --yh-seam: var(--paper-500);
  /* Space above and below each section's content. Two paper sections in a
     row get it twice, which is the gap; a ramp stands in for one of them. */
  --yh-section: var(--space-2xl);
}

/* The dome and the band behind the glow both take the seam, so the arch
   starts and ends on the colour either side of it. */
/* Inside the section's content column, so it has to break out to the full
   width to run edge to edge like the other heroes' arches. */
.mf-yh-cal .mf-wave {
  --wave-fill: var(--yh-seam);
  --wave-base: var(--yh-seam);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block-end: 40px;
}

/* Shallower on a short screen, so the arch, the heading and the year still
   fit under the fold together and the block can pin (your-health.js). */
.mf-yh-cal .mf-wave,
.mf-yh-cal .mf-wave svg { block-size: min(230px, 24vh); }

/* The seam colour continues under the dome and dissolves into the wash —
   hung off the arch rather than off the section, because once the section
   pins the arch travels with the stage and the section's own fade stays
   put, which left the dome's flat foot drawing a line against the wash.
   Behind the content (z-index -1 inside the inner column's stacking
   context), so the eyebrow and heading sit on it, not under it. */
.mf-yh-cal .mf-wave::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: 360px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--yh-seam) 0%, var(--yh-seam) 18%, transparent 100%);
}

/* On a phone the three only fit with the spacing between them pulled in. */
@media (max-width: 760px) {
  .mf-yh-cal .mf-wave { margin-block-end: 16px; }
  .mf-yh-cal .mf-yh-sechead { margin-block-end: 24px; }
  .mf-yh-cal .mf-lead { font-size: 15px; line-height: 1.6; margin-block-start: 12px; }
  .mf-yh-cal .mf-year__month { min-block-size: 96px; }
}

/* The page wash is fixed, so a flat dome butted against it steps — and the
   step slides as the page scrolls. These two resolve the surfaces either
   side of the arch to the seam and then hand the wash back:

   the hero fades its last stretch down to the seam, and the section below
   opens on the seam and fades out of it. Weighted late in both directions:
   the eye reads the start of an even paper fade as a band of its own, so
   most of the travel happens in the last third. */
.mf-yh-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 320px;
  pointer-events: none;
  background: var(--yh-seam);
  -webkit-mask-image: linear-gradient(
    180deg, transparent 0%, rgb(0 0 0 / 0.3) 24%,
    rgb(0 0 0 / 0.74) 44%, rgb(0 0 0 / 0.95) 58%, #000 68%
  );
  mask-image: linear-gradient(
    180deg, transparent 0%, rgb(0 0 0 / 0.3) 24%,
    rgb(0 0 0 / 0.74) 44%, rgb(0 0 0 / 0.95) 58%, #000 68%
  );
}

/* Only the top of the section: with the pinned track the section runs
   several screens tall, and a mask stretched over all of it would leave a
   flat band of seam colour across the pin. */
.mf-yh-problem::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 720px;
  z-index: 0;
  pointer-events: none;
  background: var(--yh-seam);
  -webkit-mask-image: linear-gradient(
    180deg, #000 0%, #000 42%, rgb(0 0 0 / 0.7) 68%, transparent 100%
  );
  mask-image: linear-gradient(
    180deg, #000 0%, #000 42%, rgb(0 0 0 / 0.7) 68%, transparent 100%
  );
}

.mf-yh-problem__inner { position: relative; z-index: 1; }


.mf-yh-hero {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  padding: 120px 48px 72px;
}

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

.mf-yh-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 20px 0 0;
  text-wrap: balance;
}

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

.mf-yh-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-start: 32px;
}

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

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

/* --- Art column --------------------------------------------------------- */

.mf-yh-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sized to the sheet, so the phone and the floating cards hang off the
   sheet's own edges rather than off the much wider column. */
.mf-yh-hero__stage {
  position: relative;
  inline-size: min(100%, 480px);
  /* At the start of the column rather than its middle: the information
     sheet behind needs the room on the right. */
  margin-inline-end: auto;
}

.mf-yh-hero__glow {
  position: absolute;
  z-index: 0;
  inline-size: min(560px, 120%);
  aspect-ratio: 1;
  inset-inline-start: 52%;
  inset-block-start: 48%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(232 84 10 / 0.32) 0%,
    rgb(240 120 40 / 0.18) 36%,
    rgb(248 178 112 / 0.07) 60%,
    rgb(248 178 112 / 0) 76%
  );
  filter: blur(80px);
  pointer-events: none;
}

/* --- The newsletter, in print ---
   Page one of a real edition (bin/capture-yh-hero), on a card the shape of
   the A4 sheet it prints on. */

.mf-yh-sheet {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* The practice information sheet, behind the newsletter and turned a little,
   showing past its right-hand edge: the two go out together. Cropped to its
   top like the newsletter, so the two sheets are the same shape. */
.mf-yh-sheet__info {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-tile);
  border: 1px solid var(--border-light);
  background: var(--ink-on-dark);
  rotate: 2deg;
  /* Stepped up and out behind the newsletter, about 30% of it showing past
     the right edge — a sheet on the pile, not a second column. */
  translate: 30% -56px;
  box-shadow: 0 24px 50px -28px rgb(80 50 15 / 0.3);
}

.mf-yh-sheet__card {
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--ink-on-dark);
  border: 1px solid var(--border-light);
  box-shadow: 0 34px 70px -26px rgb(80 50 15 / 0.34);
}

/* The foot of an A4 page is white space and the small print; the sheet stops
   short of it, so the hero is not held open by an empty quarter-page. */
.mf-yh-sheet__page {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 880 / 1080;
  object-fit: cover;
  object-position: top;
}

/* Set to the end of the strip: the print pill floats over its start. */
.mf-yh-sheet__credit {
  padding: 12px 16px 12px 76px;
  text-align: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-block-start: 1px solid var(--paper-800);
  background: var(--paper-200);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: end;
}

/* --- The same edition on a phone --- */

.mf-yh-phone {
  position: absolute;
  z-index: 3;
  /* Over the sheet's lower corner, where the page is running text — the
     masthead, the photo and the lead article above it are what the sheet is
     there to show. Hung well past the edge so it takes a strip of the page,
     not a column of it. */
  /* Off the sheet's lower-left corner, most of it past the edge, so it
     covers a corner of running text and nothing more. */
  inset-inline-start: -88px;
  inset-block-end: -36px;
  inline-size: 150px;
  border-radius: 26px;
  padding: 6px;
  background: var(--coal-700);
  box-shadow: var(--shadow-card);
}

.mf-yh-phone__screen {
  position: relative;
  border-radius: 20px;
  background: var(--ink-on-dark);
  overflow: hidden;
}

.mf-yh-phone__notch {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 38px;
  block-size: 4px;
  border-radius: var(--radius-full);
  background: var(--paper-800);
}

/* Who it is from and what it is called, the way a mail app heads a message. */
.mf-yh-phone__head {
  display: grid;
  gap: 2px;
  padding: 20px 12px 9px;
  border-block-end: 1px solid var(--paper-800);
}

/* One line each, whatever the practice is called and however small the
   phone is drawn. */
.mf-yh-phone__from,
.mf-yh-phone__subject {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mf-yh-phone__from {
  font-family: var(--font-ui);
  font-size: 7.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flare-600);
  margin: 0;
}

.mf-yh-phone__subject {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

/* A phone's screen of the email, which scrolls down the edition and back
   on its own: the image is cropped to the screen and its object-position
   is animated from the top of the capture to the bottom (animations.css). */
.mf-yh-phone__mail {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 420 / 690;
  object-fit: cover;
  object-position: 50% 0%;
  animation: mfPhoneScroll 18s ease-in-out 2s infinite alternate;
}

/* --- Floating cards ----------------------------------------------------- */

.mf-yh-fcard {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.mf-yh-fcard.is-in { opacity: 1; transform: none; }
.mf-yh-fcard.is-in .mf-bob { animation: mfFloat 5s ease-in-out infinite alternate; }

/* Anchored to the sheet's own edges, and only ever hanging a little way
   past them — the hero clips its overflow, so a card pushed further out
   than the art column is simply cut in half. */
/* Each card hangs off an edge of the sheet and laps it by a few pixels at
   most, so the masthead, the photo and the lead article stay clear: the
   sheet is the thing being shown, the cards are the captions. */
/* Mostly over the information sheet behind, lapping the newsletter's edge
   by a sliver: the newsletter is the thing being shown. */
/* Lower right, mostly over the information sheet behind, lapping the
   newsletter's corner by a sliver: the newsletter is the thing being shown. */
.mf-yh-fcard-sent {
  inset-inline-end: -172px;
  inset-block-end: 5%;
  transition-delay: 0.1s;
}

/* Wide enough that "October edition sent" — or September's — stays on a line. */
.mf-yh-fcard-sent .mf-yh-fcard__inner { inline-size: 214px; }

/* Upper right, hanging off the information sheet's edge — and dark, so it
   does not blend into the white of the sheet behind it. */
.mf-yh-fcard-print {
  inset-inline-end: -180px;
  inset-block-start: 7%;
  transition-delay: 0.4s;
}

.mf-yh-fcard-print .mf-yh-fcard__inner-pill {
  background: var(--coal-720);
  border-color: var(--coal-400);
  box-shadow: var(--shadow-card-dark-sm);
}

.mf-yh-fcard-print .mf-yh-fcard__pill-text { color: var(--ink-on-dark); }

.mf-yh-fcard-print .mf-bob { animation-delay: 1.6s; }


.mf-yh-fcard__inner {
  inline-size: 190px;
  padding: 16px 18px;
  border-radius: var(--radius-tile);
  background: var(--ink-on-dark);
  border: 1px solid var(--paper-800);
  box-shadow: var(--shadow-card-sm);
}

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

.mf-yh-fcard__inner-pill {
  inline-size: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 12px;
  border-radius: var(--radius-pill);
}

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

.mf-yh-fcard__title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark);
}

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

.mf-yh-fcard__inner:not(.mf-yh-fcard__inner-dark) .mf-yh-fcard__note { color: var(--ink-soft); }

.mf-yh-fcard__status {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 9px;
  border-radius: var(--radius-nav);
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--status-live);
  background: var(--status-live-soft);
  border: 1px solid var(--status-live-line);
}

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

.mf-yh-fcard__stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 7px 0 0;
}

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


/* ==========================================================================
   The problem — the sentence beside the SWPE chain
   ========================================================================== */

.mf-yh-problem { position: relative; padding: 0 40px var(--yh-section); }

.mf-yh-problem__inner {
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

/* --- The heading and the year, pinned while the year plays out -------------
   Static until armed: your-health.js adds .is-live when the pair fits under
   the nav, which makes the stage stick and gives the track a tail to scroll
   through. The tail is the distance the chip takes to cross the year — long
   enough that a flick of the wheel moves it a few months, not twelve. */
.mf-yh-cal { position: relative; }

/* The tail is a spacer in the flow rather than padding: a sticky child is
   held inside its parent's content box, so padding would be ground it could
   not travel over. */
.mf-yh-cal.is-live::after { content: ""; display: block; block-size: 110svh; }

.mf-yh-cal.is-live .mf-yh-cal__stage {
  position: sticky;
  /* Centred in the band under the nav — set by your-health.js from the
     stage's measured height. */
  inset-block-start: var(--yh-cal-top, var(--yh-pin-top, 110px));
}

/* --- The year of "next month" ---------------------------------------------
   Twelve months on one rule. The chip ships inside December, where the story
   ends. your-health.js lifts it onto the strip (.is-gliding) and slides it
   from month to month as one continuous move — it is carried along the rule,
   never taken away and put back. */

.mf-yh-year {
  position: relative;
  margin: 12px auto 0;
  max-inline-size: 1180px;
  /* How far below a month's top edge the chip hangs. */
  --yh-chip-drop: 44px;
}

.mf-yh-year__months {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-block-start: 2px solid var(--border-light);
}

.mf-yh-year__month {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-block-size: 124px;
  padding-block-start: 18px;
}

.mf-yh-year__month::before {
  content: "";
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: 50%;
  inline-size: 12px;
  block-size: 12px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--paper-100);
  border: 2px solid var(--border-light-strong);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mf-yh-year__mname {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-yh-year__miss {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  color: var(--status-cross);
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 0.3s ease, translate 0.3s var(--ease-out);
}

.mf-yh-year__month.is-skipped::before { background: var(--paper-800); border-color: var(--status-cross); }
.mf-yh-year__month.is-skipped .mf-yh-year__mname { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--status-cross); }
.mf-yh-year__month.is-skipped .mf-yh-year__miss { opacity: 1; translate: 0 0; }

.mf-yh-year__month.is-current::before,
.mf-yh-year__month:has(.mf-yh-year__chip)::before {
  background: var(--flare-600);
  border-color: var(--paper-100);
  box-shadow: 0 0 0 2px var(--flare-a40), 0 0 0 8px var(--flare-a08);
}

.mf-yh-year__month.is-current .mf-yh-year__mname,
.mf-yh-year__month:has(.mf-yh-year__chip) .mf-yh-year__mname { color: var(--ink); text-decoration: none; }
.mf-yh-year__month.is-current .mf-yh-year__miss,
.mf-yh-year__month:has(.mf-yh-year__chip) .mf-yh-year__miss { opacity: 0; }

.mf-yh-year__chip {
  position: absolute;
  inset-block-start: var(--yh-chip-drop);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 6px;
  padding: 8px 12px 8px 10px;
  border-radius: var(--radius-tile);
  background: var(--grad-cta);
  box-shadow: 0 10px 22px -8px var(--flare-a40);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  white-space: nowrap;
}

.mf-yh-year__chip small {
  grid-column: 2;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  opacity: 0.85;
}

/* On the strip rather than in a month: --x / --y are where along the year
   the scroll has carried it, set by your-health.js on every frame. The
   transition is only there to smooth the steps between frames — any longer
   and the chip trails the scroll instead of riding it. */
.mf-yh-year__chip.is-gliding {
  inset-block-start: 0;
  inset-inline-start: 0;
  translate: calc(var(--x, 0px) - 50%) calc(var(--y, 0px) + var(--yh-chip-drop));
  transition: translate 0.12s linear;
}

/* Placed without the glide — first paint and resizes. */
.mf-yh-year__chip.is-snapped { transition: none; }

/* --- The sentence, then the chain beside it (pinned) --------------------

   Static until armed: your-health.js adds .is-live, which makes the track
   tall and the stage sticky, and moves is-on through the endings. The chain
   column stays hidden until the fourth ending has landed (.is-chain), then
   arrives and builds a link at a time over the rest of the track. */

.mf-yh-rd { position: relative; margin-block-start: 8px; }
.mf-yh-rd.is-live { block-size: calc(100vh + 320vh); }

.mf-yh-rd__stage {
  max-inline-size: var(--section-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 96px;
  align-items: center;
}

.mf-yh-rd.is-live .mf-yh-rd__stage {
  position: sticky;
  inset-block-start: var(--yh-pin-top, 110px);
  block-size: calc(100svh - var(--yh-pin-top, 110px) - 16px);
}

/* --- Left: the sentence --- */

.mf-yh-rd__lead-in {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  color: var(--ink);
}

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

.mf-yh-rd__endings li {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

/* Each line of an ending carries the whole flare sweep (clone), so a
   two-line ending does not run orange on its first line and fade into the
   gradient's tail on the second. */
.mf-yh-rd__ending {
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mf-yh-rd__cross {
  margin-inline-end: 12px;
  font-family: var(--font-ui);
  font-size: 0.7em;
  font-weight: var(--weight-bold);
  color: var(--status-cross);
  vertical-align: 0.12em;
}

/* Live, the endings share one cell and replace each other in place, set
   large enough to be the thing on screen. */
.mf-yh-rd.is-live .mf-yh-rd__endings {
  grid-template-areas: "end";
  min-block-size: 3.6em;
  align-items: start;
}

.mf-yh-rd.is-live .mf-yh-rd__endings li {
  grid-area: end;
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 1.15;
  opacity: 0;
  translate: 0 0.5em;
  transition: opacity 0.4s ease, translate 0.5s var(--ease-out);
}

.mf-yh-rd.is-live .mf-yh-rd__endings li.is-on { opacity: 1; translate: 0 0; }

/* Held back until the calendar above has finished (see your-health.js).
   Fades in place: the stage is pinned, so a lift here reads as the whole
   block sliding down the page against the scroll. */
.mf-yh-rd__stage { transition: opacity 0.6s ease; }
.mf-yh-rd.is-waiting .mf-yh-rd__stage { opacity: 0; }
.mf-yh-rd.is-live .mf-yh-rd__endings li.is-past { translate: 0 -0.5em; }
.mf-yh-rd.is-live .mf-yh-rd__cross { display: none; }

.mf-yh-rd__pips { display: none; }

.mf-yh-rd.is-live .mf-yh-rd__pips {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.mf-yh-rd__pips li {
  inline-size: 28px;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--border-light-strong);
  transition: background 0.3s ease;
}

.mf-yh-rd__pips li.is-on { background: var(--flare-600); }

/* Stacked (not live), the endings and the chain links arrive one after
   another as the block scrolls into view, in place of the pinned turn-taking
   a wide screen gets. --i is each item's place in the order (set below). */
.mf-yh-rd:not(.is-live) .mf-yh-rd__endings li,
.mf-yh-rd:not(.is-live) .mf-yh-rd__links li {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.5s ease calc(var(--i, 0) * 0.12s),
    translate 0.6s var(--ease-out) calc(var(--i, 0) * 0.12s);
}

.mf-yh-rd:not(.is-live) .is-in .mf-yh-rd__endings li,
.mf-yh-rd:not(.is-live) .is-in .mf-yh-rd__links li { opacity: 1; translate: 0 0; }

.mf-yh-rd__endings li:nth-child(2), .mf-yh-rd__links li:nth-child(2) { --i: 1; }
.mf-yh-rd__endings li:nth-child(3), .mf-yh-rd__links li:nth-child(3) { --i: 2; }
.mf-yh-rd__endings li:nth-child(4), .mf-yh-rd__links li:nth-child(4) { --i: 3; }

@media (prefers-reduced-motion: reduce) {
  .mf-yh-rd:not(.is-live) .mf-yh-rd__endings li,
  .mf-yh-rd:not(.is-live) .mf-yh-rd__links li { opacity: 1; translate: 0 0; transition: none; }
}

/* --- Right: a picture per ending, then the chain --- */

/* The pictures and the chain share the column's one cell: while the
   endings run the picture for the one on show is up, and once the fourth
   has landed the chain takes the cell over. Stacked (not live), only the
   chain is there. */
.mf-yh-rd__stage > * { grid-column: 1; }
.mf-yh-rd__stage > .mf-yh-rd__pics,
.mf-yh-rd__stage > .mf-yh-rd__chain { grid-column: 2; grid-row: 1; }

.mf-yh-rd__pics { display: none; }

.mf-yh-rd.is-live .mf-yh-rd__pics {
  display: grid;
  align-self: center;
  transition: opacity 0.5s ease, translate 0.6s var(--ease-out);
}

/* The chain's turn: the pictures go, the chain arrives. */
.mf-yh-rd.is-live.is-chain .mf-yh-rd__pics {
  opacity: 0;
  translate: 0 -24px;
  pointer-events: none;
}

/* A drawn scene standing in for the photograph, with the ending's label
   as a chip in its corner. The same frame the photograph will take. */
.mf-yh-rd__pic {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-light);
  background: var(--paper-300);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  opacity: 0;
  scale: 0.96;
  transition: opacity 0.45s ease, scale 0.6s var(--ease-out);
}

.mf-yh-rd__pic.is-on { opacity: 1; scale: 1; }

.mf-yh-rd__scene,
.mf-yh-rd__scene svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* .mf-yh-rd__pic-label is styled with .mf-yh-tag, under What's included. */

.mf-yh-rd__chain {
  padding-inline-start: 56px;
  border-inline-start: 1px solid var(--border-light-strong);
}

.mf-yh-rd__kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flare-700);
}

.mf-yh-rd__chainlead {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-inline-size: 40ch;
}

.mf-yh-rd__links {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.mf-yh-rd__links li {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-block: 15px;
  border-block-end: 1px solid var(--border-light);
}

.mf-yh-rd__links li:first-child { border-block-start: 1px solid var(--border-light); }

.mf-yh-rd__num {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--flare-700);
}

.mf-yh-rd__word {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
}

.mf-yh-rd.is-live .mf-yh-rd__chain {
  opacity: 0;
  translate: 32px 0;
  transition: opacity 0.6s ease, translate 0.7s var(--ease-out);
}

.mf-yh-rd.is-live.is-chain .mf-yh-rd__chain { opacity: 1; translate: 0 0; }

.mf-yh-rd.is-live .mf-yh-rd__links li {
  opacity: 0.2;
  transition: opacity 0.45s ease;
}

.mf-yh-rd.is-live .mf-yh-rd__links li.is-on { opacity: 1; }

/* --- The closing, a line at a time ---------------------------------------
   Four beats stacked. your-health.js splits each into its rendered lines and
   raises them out of a mask in order; the flare sits on the two accent
   lines, and "Until now." gets a stroke drawn under it (--draw, 0–1). */
.mf-yh-problem__close {
  display: grid;
  justify-items: center;
  gap: 0.18em;
  margin: 80px auto 0;
  max-inline-size: 1000px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.mf-yh-line { display: block; }
.mf-yh-line__text { display: inline-block; }

/* The flare runs the length of each accent line as one even sweep. Once the
   text is split the gradient has to sit on the line that moves, not on its
   parent: a gradient clipped to text does not follow a transformed child. */
.mf-yh-line.is-accent .mf-yh-line__text,
.mf-yh-line.is-accent .mf-split-line {
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mf-yh-line.is-tail .mf-yh-line__text { position: relative; }

.mf-yh-line.is-tail .mf-yh-line__text::after {
  content: "";
  position: absolute;
  inset-inline: 0.02em;
  inset-block-end: -0.02em;
  block-size: 0.09em;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  transform: scaleX(var(--draw, 1));
  transform-origin: left center;
}

/* --- Split lines (GSAP SplitText) -----------------------------------------
   SplitText wraps every rendered line in a mask the line rises out of. The
   mask is cut to the line box, and at display line-heights the line box is
   shorter than the letters: the tails of g, j, p, q and y hang below it and
   were being sliced off. So the mask reaches further down than the line, and
   a matching negative margin gives the room back so the spacing between
   lines does not change. Any new split text on the site should use
   linesClass "mf-split-line" to get this. */
/* .mf-split-line-mask itself lives in components.css. */


/* ==========================================================================
   Benefits — the pinned deck
   Un-armed it is a heading over a ruled list. Armed (.is-live, wide screens
   only), the stage is two columns, the slides share one cell, and
   ScrollTrigger pins the stage while the four take turns.
   ========================================================================== */

.mf-yh-benefits { padding: var(--yh-section) 40px; }

.mf-yh-deck {
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-yh-deck__head .mf-eyebrow { margin-block-end: 20px; }

.mf-yh-deck__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
  max-inline-size: 18ch;
}

.mf-yh-deck__lead {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-inline-size: 36ch;
}

.mf-yh-deck__count,
.mf-yh-deck__pips { display: none; }

.mf-yh-deck__slides {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
}

.mf-yh-deck__slide { padding-block: 36px; border-block-start: 1px solid var(--border-light-strong); }

.mf-yh-deck__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 68px);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.mf-yh-deck__body {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-inline-size: 58ch;
}

.mf-yh-benefits.is-live .mf-yh-deck {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 72px;
  align-items: center;
  min-block-size: 460px;
}

.mf-yh-benefits.is-live .mf-yh-deck__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.mf-yh-deck__count small {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.mf-yh-benefits.is-live .mf-yh-deck__pips {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.mf-yh-deck__pips li {
  inline-size: 34px;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--border-light-strong);
  transition: background 0.3s ease;
}

.mf-yh-deck__pips li.is-on { background: var(--flare-600); }

.mf-yh-benefits.is-live .mf-yh-deck__slides {
  margin: 0;
  grid-template-areas: "slide";
  padding-inline-start: 72px;
  border-inline-start: 1px solid var(--border-light-strong);
}

.mf-yh-benefits.is-live .mf-yh-deck__slide {
  grid-area: slide;
  align-self: center;
  padding-block: 0;
  border-block-start: 0;
  visibility: hidden;
}


/* ==========================================================================
   RACGP 6th Edition notice
   ========================================================================== */

.mf-yh-racgp { position: relative; padding: var(--yh-section) 40px calc(var(--yh-section) * 1.25); }

.mf-yh-racgp__panel {
  position: relative;
  overflow: hidden;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding: 48px 44px;
  border-radius: var(--radius-stage);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 44px;
  align-items: center;

  /* Gradient ring painted into the border box so the panel keeps its warm
     paper fill, the same treatment the featured pricing plan uses. */
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, var(--paper-100), var(--paper-400)) padding-box,
    var(--grad-border) border-box;
  box-shadow: var(--shadow-card-sm);
}

.mf-yh-racgp__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 45% 70% at 96% 0%, var(--flare-a15), transparent 62%);
}

.mf-yh-racgp__body { position: relative; z-index: 1; }

.mf-yh-racgp__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: var(--ink-on-dark);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mf-yh-racgp__title { margin-block-start: 20px; font-size: 38px; }

.mf-yh-racgp__text {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 18px 0 0;
}

.mf-yh-racgp__text-strong { color: var(--ink-body); font-weight: var(--weight-semibold); }

.mf-yh-racgp__cta { margin-block-start: 28px; }

.mf-yh-racgp__points {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.mf-yh-racgp__points li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-tile);
  background: rgb(255 255 255 / 0.6);
  border: 1px solid var(--border-light);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}


/* ==========================================================================
   How it works — three steps on a scroll-filled rail (dark)
   ========================================================================== */

.mf-yh-how {
  position: relative;
  padding: var(--yh-section) 40px;
  overflow: clip;
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-yh-how__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 4% 12%, rgb(232 84 10 / 0.18), transparent 62%),
    radial-gradient(ellipse 50% 45% at 98% 78%, rgb(160 50 8 / 0.14), transparent 62%);
}

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

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

/* The stack. Each step pins at a slightly lower offset than the one before,
   so the panels come to rest as a deck with the earlier ones showing as a
   band above the current one, and the next scrolls up over the top.

   --stack-top clears the sticky site header; --stack-step is how much of
   each earlier panel stays visible. Both are single figures so the whole
   deck retunes from two numbers. */
.mf-yh-steps {
  /* Centre the pinned panel rather than parking it under the header. A card
     is ~500px tall at this width, so half of it above the middle of the
     viewport puts it on the centre line; the clamp keeps it clear of the
     sticky nav (which bottoms out at 100px) on short screens and stops it
     drifting too low on tall ones. */
  --stack-top: clamp(124px, calc(50vh - 250px), 320px);
  --stack-step: 22px;

  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-inline-size: var(--section-max);
  display: grid;
  gap: 0;
}

/* The dwell. A pinned panel has to be readable before the next one starts
   covering it, and what buys that is distance in the flow — so each step
   carries empty space below its card. Without it the deck works but every
   panel is half-covered the moment it lands. */
.mf-yh-step {
  position: sticky;
  inset-block-start: calc(var(--stack-top) + var(--i) * var(--stack-step));
  padding-block-end: clamp(110px, 20vh, 200px);

  /* Later panels sit above earlier ones as they scroll over the top. */
  z-index: calc(var(--i) + 1);
}

/* Nothing follows the last one, so it only needs enough tail to be read
   before the whole deck releases together.

   That tail is empty space, and once the deck lets go it scrolls up into view
   as a hole under the last card. The list gives it back with a negative
   margin: the hold is measured off the list's own box, which the margin does
   not change, so the dwell is the same — only what follows moves up. */
.mf-yh-steps { --stack-tail: clamp(100px, 18vh, 180px); margin-block-end: calc(-1 * var(--stack-tail)); }
.mf-yh-step:last-child { padding-block-end: var(--stack-tail); }

/* An opaque card, not a translucent one: the whole point is that it hides
   the panel it is covering. */
.mf-yh-step__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
  padding: 34px 36px;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card-dark);

  /* Coal on coal, so a panel would have no edge to be read by — the band of
     an earlier one peeking above the current panel would simply vanish. The
     gradient is painted into the border box behind an opaque coal fill, the
     same treatment the pricing plan wears, which gives a 1px brand rule all
     the way round rather than a bar across the top. */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--coal-720), var(--coal-720)) padding-box,
    var(--grad-border) border-box;
}

.mf-yh-step__copy { min-inline-size: 0; }

.mf-yh-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.mf-yh-step__node {
  inline-size: var(--yh-node, 46px);
  block-size: var(--yh-node, 46px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-icon);
  flex: none;
}

/* The flare gradient clipped to the glyphs — .mf-grad-text on the span does
   the colour, so nothing here sets one. It reads brighter than the faint
   --flare-a20 wash it replaces, which is what a step number counting a
   sequence is for. */
.mf-yh-step__num {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 40px;
  line-height: 1;
}

/* --- The screenshot ----------------------------------------------------- */

/* A fixed frame with the image cropped into it, so three captures of
   different heights still read as one set. Top-anchored: the useful part of
   a product screenshot is always the top of it.

   Landscape rather than 4:3 — these are wide captures, and the taller frame
   was what made each panel 574px, which in a deck is scroll distance between
   one panel and the next. */
.mf-yh-step__shot {
  margin: 0;
  min-inline-size: 0;
}

.mf-yh-step__shot img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-inset);
  border: 1px solid var(--coal-300);
  background: var(--ink-on-dark);
  box-shadow: var(--shadow-card-dark-sm);
}

.mf-yh-step__shot figcaption {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
  margin-block-start: 12px;
}

.mf-yh-step__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 21px;
  color: var(--ink-on-dark);
  margin: 0;
}

.mf-yh-step__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 12px 0 0;
  max-inline-size: 62ch;
}

.mf-yh-step__callout {
  margin-block-start: 20px;
  padding: 16px 18px;
  border-radius: var(--radius-inset);
  background: var(--flare-a08);
  border: 1px solid var(--flare-a20);
}

.mf-yh-step__callout-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  color: var(--flare-500);
  margin: 0;
}

.mf-yh-step__callout-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 9px 0 0;
}

.mf-yh-step__time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 20px 0 0;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--coal-300);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-on-dark-dim);
}


/* ==========================================================================
   The walkthrough video — at the foot of How It Works, same coal
   ========================================================================== */

.mf-yh-demo {
  position: relative;
  padding: 0 40px var(--yh-section);
  background: var(--coal-900);
}

.mf-yh-demo__inner {
  max-inline-size: 1040px;
  margin-inline: auto;
}

.mf-yh-demo__head {
  text-align: center;
  max-inline-size: 720px;
  margin: 0 auto 40px;
}

.mf-yh-demo__head .mf-eyebrow { margin-block-end: 20px; }

.mf-yh-demo__lead {
  margin: 18px auto 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
}

/* The frame: the video on a stage, the play control over its poster until
   it is pressed. */
.mf-yh-demo__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-stage);
  background: var(--coal-760);
  box-shadow: 0 0 0 1px var(--border-on-dark), var(--shadow-stage), 0 40px 90px -40px var(--flare-a40);
}

.mf-yh-demo__video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1150 / 720;
  background: var(--coal-900);
}

.mf-yh-demo__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgb(18 14 8 / 0.1), rgb(18 14 8 / 0.45));
  color: var(--ink-on-dark);
  transition: opacity 0.3s ease;
}

.mf-yh-demo__frame.is-playing .mf-yh-demo__play { opacity: 0; pointer-events: none; }

/* The browser's controls only once it is playing — before that the poster
   and the play button are the whole frame. */
.mf-yh-demo__frame.is-playing .mf-yh-demo__video { pointer-events: auto; }

.mf-yh-demo__play-btn {
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  border-radius: 50%;
  background: var(--grad-cta);
  box-shadow: 0 0 0 10px var(--flare-a20), 0 20px 50px -10px var(--flare-a60);
  transition: scale 0.25s var(--ease-out), box-shadow 0.25s ease;
}

.mf-yh-demo__play-btn svg { margin-inline-start: 4px; }
.mf-yh-demo__play:hover .mf-yh-demo__play-btn { scale: 1.06; box-shadow: 0 0 0 14px var(--flare-a25), 0 24px 60px -10px var(--flare-a60); }
.mf-yh-demo__play:focus-visible { outline: 3px solid var(--flare-500); outline-offset: -6px; }

.mf-yh-demo__play-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgb(18 14 8 / 0.6);
  backdrop-filter: blur(8px);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mf-yh-demo__play-label small {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-on-dark-dim);
}

@media (max-width: 700px) {
  .mf-yh-demo { padding-inline: 16px; }
  .mf-yh-demo__frame { border-radius: var(--radius-tile); }
  .mf-yh-demo__play-btn { inline-size: 64px; block-size: 64px; }
}


/* ==========================================================================
   What's included — editorial rows on a warm gradient
   ========================================================================== */

/* Paper at both edges, so the ramps either side (paper-600 at their ends)
   meet it without a seam; the flare washes and the warm middle band are the
   gradient. */
/* Clipped sideways: the cards hung off the spreads can reach past the
   column on a phone, and must not give the page a sideways scroll. */
.mf-yh-features {
  position: relative;
  overflow-x: clip;
  padding: 40px 40px var(--yh-section);
  margin-block-start: -2px;
  background:
    radial-gradient(ellipse 60% 40% at 0% 30%, var(--flare-a15), transparent 70%),
    radial-gradient(ellipse 55% 40% at 100% 70%, var(--flare-a12), transparent 70%),
    linear-gradient(180deg, var(--paper-600) 0%, var(--paper-300) 30%, var(--paper-800) 60%, var(--paper-600) 100%);
}

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

.mf-yh-features__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 18px auto 0;
  max-inline-size: 620px;
}

.mf-yh-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Copy on the left, screenshot on the right, every row: the reading starts
   in the same place each time rather than zig-zagging down the section. */
.mf-yh-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-areas: "copy art";
  gap: 40px 72px;
  align-items: center;
  padding-block: 72px;
  border-block-start: 1px solid var(--border-light-strong);
}

.mf-yh-row:last-child { border-block-end: 1px solid var(--border-light-strong); }

/* Deeper at the foot: the cards hang further below the capture than
   above it, and the row has to hold them clear of the rule beneath. */
.mf-yh-row__art {
  grid-area: art;
  position: relative;
  margin: 0;
  padding: 28px 28px 150px;
}

.mf-yh-row__disc {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 86%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--flare-a30) 0%, var(--flare-a08) 45%, transparent 70%);
}

/* The spread: the main capture, sized to a share of the column (--size),
   with the floating cards hung off its edges. Each card is placed by a
   share of the capture's box — --x/--y from its top-left or --xe/--ye from
   its bottom-right, negative to hang past the edge — so where it sits is
   decided by the thing it captions, as in the hero; a capture or drawn
   panel among them takes --w of the capture's width. The cards arrive one
   after another once the row is in view, then bob. */
.mf-yh-spread {
  position: relative;
  inline-size: calc(var(--size) * 1%);
  margin-inline: auto;
  container-type: inline-size;
}

.mf-yh-main {
  position: relative;
  border-radius: var(--radius-tile);
  background: var(--ink-on-dark);
  box-shadow: 0 0 0 1px var(--border-light), var(--shadow-card);
}

.mf-yh-main__shot {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--crop, auto);
  object-fit: cover;
  object-position: top;
  border-radius: inherit;
}

.mf-yh-float {
  position: absolute;
  z-index: 2;
  inset-inline-start: calc(var(--x) * 1%);
  inset-inline-end: calc(var(--xe) * 1%);
  inset-block-start: calc(var(--y) * 1%);
  inset-block-end: calc(var(--ye) * 1%);
  inline-size: calc(var(--w) * 1%);
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease, translate 0.7s var(--ease-out);
  transition-delay: calc(var(--i) * 160ms + 240ms);
}

.mf-yh-float:not([style*="--w"]) { inline-size: max-content; }

.mf-yh-row.is-in .mf-yh-float {
  opacity: 1;
  translate: 0 0;
}

.mf-yh-row.is-in .mf-yh-float .mf-bob {
  animation: mfFloat 5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 1.3s);
}

.mf-yh-float-pill .mf-yh-fcard__inner-pill {
  background: var(--coal-720);
  border-color: var(--coal-400);
  box-shadow: var(--shadow-card-dark-sm);
}

.mf-yh-float-pill .mf-yh-fcard__pill-text { color: var(--ink-on-dark); }

.mf-yh-float-card .mf-yh-fcard__inner { inline-size: 214px; }

.mf-yh-float__shot {
  position: relative;
  border-radius: var(--radius-inset);
  aspect-ratio: var(--ar, auto);
  box-shadow: 0 0 0 1px var(--border-light), var(--shadow-card-sm);
}

.mf-yh-float__shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The captures say what they are: the chip used for the drift pictures,
   hung off the capture's foot. */
.mf-yh-tag,
.mf-yh-rd__pic-label {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--coal-900);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-dark);
  white-space: nowrap;
}

/* In the spreads the chip is a caption, not a sticker: it sits clear under
   the piece, in the brand gradient so it reads as ours against whatever the
   piece is. */
.mf-yh-spread .mf-yh-tag {
  inset-block-end: auto;
  inset-block-start: 100%;
  inset-inline-start: 1.2em;
  translate: 0 0.85em;
  padding: 0.6em 1.05em;
  /* Sized against the column, not the spread — the first row's spread is
     narrower (--size) and its captions would otherwise come out smaller
     than the other rows'. */
  font-size: clamp(7.5px, 1.9cqi * (100 / var(--size, 100)), 11.5px);
  background: var(--grad-cta);
  box-shadow: var(--shadow-card-sm);
}

/* The main capture's caption sits clear above it: its foot is where the
   cards hang. */
.mf-yh-main .mf-yh-tag {
  inset-block-start: auto;
  inset-block-end: 100%;
  translate: 0 -0.85em;
}

/* The drawn pieces. The sign-up widget is the embed as it sits on a practice
   website, so it is light, on paper; the delivery figures come from the app,
   so they are on coal like the captures around them. Everything in them is
    set in em off a size taken from the capture's width, so they shrink with
   it instead of outgrowing the spread on a phone. */
.mf-yh-float-draw { font-size: clamp(7px, 2.4cqi, 13px); }

.mf-yh-signup {
  position: relative;
  display: grid;
  gap: 0.6em;
  padding: 1.5em 1.5em 1.7em;
  border-radius: var(--radius-tile);
  background: var(--paper-100);
  box-shadow: var(--shadow-card-sm);
  font-family: var(--font-body);
}

.mf-yh-signup__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45em;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
}

.mf-yh-signup__blurb {
  margin: 0 0 0.45em;
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--ink-muted);
}

.mf-yh-signup__field {
  display: block;
  padding: 0.7em 0.9em;
  border: 1px solid var(--border-light-strong);
  border-radius: 0.3em;
  background: var(--mock-white);
  font-size: 0.95em;
  color: var(--ink-faint);
}

.mf-yh-signup__btn {
  display: block;
  margin-block-start: 0.3em;
  padding: 0.8em 0.9em;
  border-radius: 0.3em;
  background: var(--grad-brand-flat);
  font-family: var(--font-ui);
  font-size: 0.95em;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-on-dark);
}

.mf-yh-delivery {
  position: relative;
  display: grid;
  gap: 0.45em;
  padding: 1.25em 1.4em 1.4em;
  border-radius: var(--radius-tile);
  background: var(--panel-dark-deep);
  box-shadow: var(--shadow-card-dark-sm);
  font-family: var(--font-body);
}

.mf-yh-delivery__title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.6em;
  padding-block-end: 0.8em;
  border-block-end: 1px solid var(--coal-400);
  font-family: var(--font-ui);
  font-size: 0.9em;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
}

.mf-yh-delivery__row {
  display: grid;
  grid-template-columns: 0.6em 1fr auto;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  font-size: 1em;
  color: var(--ink-on-dark-body);
}

.mf-yh-delivery__row b {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
}

.mf-yh-delivery__title svg {
  inline-size: 1.1em;
  block-size: 1.1em;
}

.mf-yh-delivery__dot {
  inline-size: 0.6em;
  block-size: 0.6em;
  border-radius: 50%;
  background: var(--mock-g-green);
}

.mf-yh-delivery__row.is-warn .mf-yh-delivery__dot { background: var(--mock-g-yellow); }

.mf-yh-row__copy { grid-area: copy; }

.mf-yh-row__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  background: var(--grad-brand-flat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mf-yh-row__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-700);
}

.mf-yh-row__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
  margin: 10px 0 0;
  text-wrap: balance;
}

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

.mf-yh-row__ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mf-yh-row__ticks li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 11px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-body);
}

.mf-yh-row__ticks svg { margin-block-start: 5px; }

.mf-yh-row__copy .mf-btn { margin-block-start: 28px; }


/* ==========================================================================
   Heritage — the horizontal timeline, 1996 → 2026 (coal)
   The stage pins and vertical scroll pans the reel sideways; a ruler under
   it tracks the pan. Without the script nothing pins and the reel swipes.
   ========================================================================== */

.mf-yh-heritage {
  position: relative;
  overflow: clip;
  padding: var(--yh-section) 0 calc(var(--yh-section) / 2);
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-yh-heritage__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 96% 10%, rgb(232 84 10 / 0.16), transparent 62%),
    radial-gradient(ellipse 50% 45% at 2% 88%, rgb(160 50 8 / 0.14), transparent 62%);
}

.mf-yh-reel { --p: 1; --pan: 0px; position: relative; z-index: 1; }
.mf-yh-reel.is-live { block-size: calc(600px + 240vh); }

/* The stage keeps its own height rather than filling the screen. The
   section heading is its first child, so it pins with the reel and stays
   on screen for the whole pan; the stage pins just under the nav. */
.mf-yh-reel__stage {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
  padding-block: 8px 20px;
}

.mf-yh-reel__stage > .mf-yh-sechead {
  margin-block-end: 0;
  padding-inline: 40px;
}

.mf-yh-reel.is-live .mf-yh-reel__stage {
  position: sticky;
  inset-block-start: var(--yh-pin-top, 110px);
}

/* On a short screen the pinned stage would run under the fold, so it gives
   up what it can: the lead, some gap, and a shallower image. */
@media (max-height: 860px) {
  .mf-yh-reel.is-live .mf-yh-reel__stage { gap: 24px; }
  .mf-yh-reel.is-live .mf-yh-reel__stage > .mf-yh-sechead .mf-lead { display: none; }
  .mf-yh-reel.is-live .mf-yh-reel__img { aspect-ratio: 16 / 9; }
}

/* Without the script the reel is a swipeable strip. */
.mf-yh-reel:not(.is-live) .mf-yh-reel__slides {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.mf-yh-reel:not(.is-live) .mf-yh-reel__slide { scroll-snap-align: start; }

.mf-yh-reel__slides {
  list-style: none;
  margin: 0;
  padding: 0 max(40px, calc((100vw - var(--section-max)) / 2 + 40px));
  display: flex;
  translate: var(--pan) 0;
  will-change: translate;
}

/* A frame on the reel: the image beside its copy, divided from the next
   frame by a rule rather than a box. */
.mf-yh-reel__slide {
  flex: none;
  inline-size: min(84vw, 1040px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-inline-end: 72px;
  margin-inline-end: 72px;
  border-inline-end: 1px solid var(--coal-400);
}

.mf-yh-reel__slide:last-child { border-inline-end: 0; margin-inline-end: 0; }

/* PLACEHOLDER frame — the shape a 4:3 image will take. */
.mf-yh-reel__img {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--radius-stage);
  border: 1.5px dashed var(--coal-400);
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%, var(--flare-a08), transparent 70%),
    var(--coal-720);
  color: var(--ink-on-dark-dim);
}

.mf-yh-reel__slide.is-now .mf-yh-reel__img { border-color: var(--flare-a40); }

.mf-yh-reel__img figcaption {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mf-yh-reel__when {
  margin: 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--ink-on-dark);
}

.mf-yh-reel__tag {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
}

.mf-yh-reel__slide.is-now .mf-yh-reel__tag { color: var(--flare-500); }

.mf-yh-reel__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--ink-on-dark);
  margin: 12px 0 0;
}

.mf-yh-reel__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 14px 0 0;
  max-inline-size: 46ch;
}

/* --- The ruler: 31 ticks, one a year. --p (0–1) is the marker. --- */

.mf-yh-ruler {
  position: relative;
  inline-size: calc(100% - 80px);
  max-inline-size: calc(var(--section-max) - 80px);
  margin-inline: auto;
  padding-block-start: 14px;
}

.mf-yh-ruler__ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  block-size: 34px;
  border-block-start: 1px solid var(--coal-400);
}

.mf-yh-ruler__ticks span {
  position: relative;
  inline-size: 1px;
  block-size: 6px;
  background: var(--coal-400);
}

.mf-yh-ruler__ticks span.is-major { block-size: 11px; background: var(--ink-on-dark-dim); }

.mf-yh-ruler__ticks em {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-start: 50%;
  translate: -50% 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--ink-on-dark-dim);
}

.mf-yh-ruler__ticks span:first-child em { translate: 0 0; inset-inline-start: 0; }
.mf-yh-ruler__ticks span:last-child em { translate: -100% 0; inset-inline-start: 100%; color: var(--flare-500); }

.mf-yh-ruler__fill {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: calc(var(--p) * 100%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--coal-400), var(--flare-600));
}

.mf-yh-ruler__fill::after {
  content: "";
  position: absolute;
  inset-inline-end: -7px;
  inset-block-start: -5px;
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background: var(--grad-cta);
  border: 2px solid var(--coal-900);
  box-shadow: 0 0 0 1px var(--flare-a40);
}


/* ==========================================================================
   What changed — four shifts, each with its image (coal)
   ========================================================================== */

/* Straight on from the timeline's coal, with no ramp between. */
.mf-yh-changed {
  position: relative;
  overflow: clip;
  padding: calc(var(--yh-section) / 2) 40px var(--yh-section);
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-yh-changed__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 100% 30%, rgb(232 84 10 / 0.14), transparent 62%),
    radial-gradient(ellipse 45% 40% at 0% 90%, rgb(160 50 8 / 0.12), transparent 62%);
}

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

.mf-yh-changed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 56px;
}

/* One shift: the image, then what it was, struck through, and what it is
   now. .is-flipped is the finished state and what ships in the HTML; the
   script takes it off and puts it back as the shift crosses the reading
   line. */
.mf-yh-flip {
  display: grid;
  align-content: start;
  gap: 8px;
  transition-delay: calc(var(--i) * 80ms);
}

/* The picture: a 16:10 frame on the section's own coal, so the composed
   captures (already on coal) sit in it without an edge. */
.mf-yh-flip__img {
  aspect-ratio: 16 / 10;
  margin: 0 0 18px;
  border-radius: var(--radius-stage);
  overflow: hidden;
  background: var(--coal-720);
  box-shadow: 0 0 0 1px var(--coal-400), var(--shadow-card-dark-sm);
}

.mf-yh-flip__img img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mf-yh-flip__from {
  position: relative;
  justify-self: start;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-body);
  transition: color 0.5s ease;
}

/* The strike is drawn, not a text-decoration, so it can travel across. */
.mf-yh-flip__from::after {
  content: "";
  position: absolute;
  inset-inline: -2px;
  inset-block-start: 55%;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background: var(--status-cross);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

.mf-yh-flip__to {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--ink-on-dark);
  opacity: 0;
  translate: -12px 0;
  transition: opacity 0.45s ease 0.3s, translate 0.45s var(--ease-out) 0.3s;
}

.mf-yh-flip__arrow { display: inline-flex; flex: none; }

.mf-yh-flip__note {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--flare-500);
  opacity: 0;
  transition: opacity 0.4s ease 0.45s;
}

.mf-yh-flip.is-flipped .mf-yh-flip__from { color: var(--ink-on-dark-dim); }
.mf-yh-flip.is-flipped .mf-yh-flip__from::after { transform: scaleX(1); }

.mf-yh-flip.is-flipped .mf-yh-flip__to,
.mf-yh-flip.is-flipped .mf-yh-flip__note { opacity: 1; translate: 0 0; }

.mf-yh-changed__close {
  max-inline-size: 780px;
  margin: 72px auto 0;
  text-align: center;
}

.mf-yh-changed__closing {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink-on-dark-body);
  margin: 0 0 26px;
}


/* ==========================================================================
   How it compares
   ========================================================================== */

.mf-yh-compare { position: relative; padding: 40px 40px var(--yh-section); }

.mf-yh-compare__inner {
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

/* Only worth saying while the two panels don't both fit; above that the
   table sits still and the hint would be a lie. */
.mf-yh-matrix__hint {
  display: none;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* Scrolls inside its own container on narrow screens rather than shrinking
   the type — a comparison you have to squint at proves nothing. The panels
   are the two columns themselves now, so this wrapper carries no card of its
   own; the negative margin cancels the border-spacing at the outer edges. */
.mf-yh-matrix__scroll {
  overflow-x: auto;
  padding-block: 4px;
}

/* Separate borders, not collapsed: a collapsed table cannot round a cell,
   and the two answers are rounded panels here rather than columns of a grid.
   The spacing opens the channel between them that the row labels sit in. */
.mf-yh-matrix {
  inline-size: 100%;
  min-inline-size: 760px;
  border-collapse: separate;
  border-spacing: 14px 0;
  margin-inline: -14px;
  font-family: var(--font-body);
}

/* A declared height rather than padding alone: one head carries a mark and
   the other doesn't, and bottom-aligned cells would set the two labels on
   different baselines. */
.mf-yh-matrix thead th {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
  padding: 0 24px;
  block-size: 60px;
  vertical-align: middle;
}

.mf-yh-matrix__col {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.mf-yh-matrix__col > svg { color: var(--flare-600); }

/* --- The light side: ours ---------------------------------------------- */

/* Painted as one panel top to bottom rather than eight tinted cells, and
   ringed the way the pricing plan is — this is the answer the section is
   arguing for, so it should look like the answer.

   A flat flare border rather than the gradient one the pricing card wears:
   the ring here is assembled from nine separate cells, and a gradient would
   restart in each of them and band down the edge. */
.mf-yh-matrix .is-ours {
  background: var(--paper-100);
  border-inline: 1.5px solid var(--flare-a30);
}

.mf-yh-matrix thead th.is-ours {
  color: var(--flare-700);
  border-block-start: 1.5px solid var(--flare-a30);
  border-start-start-radius: var(--radius-stage);
  border-start-end-radius: var(--radius-stage);
}

.mf-yh-matrix tbody tr:last-child td.is-ours {
  border-block-end: 1.5px solid var(--flare-a30);
  border-end-start-radius: var(--radius-stage);
  border-end-end-radius: var(--radius-stage);
}

/* --- The dark side: theirs --------------------------------------------- */

/* Coal, because coal is already what this page calls the other way of doing
   it — the pricing section's cost panel wears the same. Against the light
   panel beside it the column reads before a word of it is read. */
.mf-yh-matrix .is-theirs {
  background: var(--coal-700);
  color: var(--ink-on-dark-body);
}

.mf-yh-matrix thead th.is-theirs {
  color: var(--ink-on-dark-dim);
  border-start-start-radius: var(--radius-stage);
  border-start-end-radius: var(--radius-stage);
}

.mf-yh-matrix tbody tr:last-child td.is-theirs {
  border-end-start-radius: var(--radius-stage);
  border-end-end-radius: var(--radius-stage);
}

/* --- The spine --------------------------------------------------------- */

.mf-yh-matrix tbody th {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-align: start;
  padding: 18px 4px;
  inline-size: 22%;
  vertical-align: top;
}

.mf-yh-matrix td {
  padding: 18px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  vertical-align: top;
}

.mf-yh-matrix td.is-ours { color: var(--ink-body); font-weight: var(--weight-semibold); }

/* The mark and the text are gridded by this inner span rather than by the
   cell: the reset sets svg to display:block, so inline they would break onto
   two lines — and a <td> made into a grid stops behaving as a table cell. */
.mf-yh-matrix__cell {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 11px;
  align-items: start;
}

.mf-yh-matrix__cell > svg { margin-block-start: 3px; }

/* Not a brand colour: a cross that wears the flare reads as a feature. */
.mf-yh-matrix__no {
  font-weight: var(--weight-bold);
  color: var(--status-cross);
  text-align: center;
}

/* Row rules live inside each panel, so each side rules in its own ink — a
   paper hairline on the light column, a coal one on the dark. */
.mf-yh-matrix tbody tr + tr th { border-block-start: 1px solid var(--border-light); }
.mf-yh-matrix tbody tr + tr td.is-ours { border-block-start: 1px solid var(--paper-800); }
.mf-yh-matrix tbody tr + tr td.is-theirs { border-block-start: 1px solid var(--coal-400); }


.mf-yh-compare__footnote {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

.mf-yh-compare__notes {
  margin-block-start: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.mf-yh-note {
  padding: 26px 26px;
  border-radius: var(--radius-tile);
  border: 1px dashed var(--flare-a30);
  background: var(--flare-a05);
}

.mf-yh-note__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  color: var(--ink);
  margin: 0;
}

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

/* The cost of standing still belongs on the dark side of the argument. */
.mf-yh-note.is-dark {
  border: 1px solid var(--coal-400);
  background: var(--panel-dark-deep);
  box-shadow: var(--shadow-card-dark);
}

.mf-yh-note.is-dark .mf-yh-note__title { color: var(--ink-on-dark); }
.mf-yh-note.is-dark .mf-yh-note__body { color: var(--ink-on-dark-body); }


/* ==========================================================================
   Pricing
   ========================================================================== */

.mf-yh-pricing {
  position: relative;
  overflow: clip;
  padding: calc(var(--yh-section) + 50px) 40px;
  background: var(--coal-900);
  margin-block-start: -2px;
}

.mf-yh-pricing__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 50% at 80% 40%, rgb(232 84 10 / 0.2), transparent 62%),
    radial-gradient(ellipse 45% 40% at 0% 90%, rgb(160 50 8 / 0.12), transparent 62%);
}

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

/* Heading and the comparison on the left, the plan on the right — the same
   two-rail split the practice-websites pricing section uses. The contrast is
   the argument the heading is making, so the two share a column of prose
   against a column of price.

   Areas rather than source order: the markup runs heading → plan →
   comparison, which is the order they stack in once the split collapses,
   while the grid puts the comparison under the heading up here. */
.mf-yh-pricing__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head  plan"
    "note  plan";
  align-content: start;
  gap: 30px 60px;
}

/* Left-aligned only in this section — .mf-yh-sechead is centred everywhere
   else on the page, so the override is scoped rather than turned into a
   modifier nothing else would take. */
.mf-yh-pricing .mf-yh-sechead {
  grid-area: head;
  text-align: start;
  max-inline-size: none;
  margin: 0;
}

.mf-yh-pricing .mf-yh-sechead .mf-lead { margin-inline: 0; }

.mf-yh-plans {
  grid-area: plan;
  display: grid;
  align-items: stretch;
}

.mf-yh-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 34px 34px;
  border-radius: var(--radius-stage);

  /* Gradient ring painted into the border box so the card keeps its paper
     fill — the same treatment the practice-websites featured plan uses. */
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--paper-100), var(--paper-100)) padding-box,
    var(--grad-border) border-box;
  /* Paper on coal: the plan is the one bright surface in the section. */
  box-shadow: var(--shadow-card-dark), 0 0 80px -20px var(--flare-a40);
}

.mf-yh-plan__flag {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 34px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: var(--ink-on-dark);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mf-yh-plan__name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-700);
  margin: 0;
}

.mf-yh-plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.mf-yh-plan__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
}

.mf-yh-plan__unit {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
}

.mf-yh-plan__summary {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 16px 0 0;
}

.mf-yh-plan__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 26px 0 0;
  border-block-start: 1px solid var(--border-light);
  display: grid;
  gap: 13px;
}

.mf-yh-plan__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-body);
}

.mf-yh-plan__list li > svg { margin-block-start: 4px; }

.mf-yh-plan__cta { margin-block-start: 30px; align-self: flex-start; }

.mf-yh-plan__note {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

.mf-yh-contrast {
  grid-area: note;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 32px;
  border-radius: var(--radius-stage);
  background: var(--coal-720);
  border: 1px solid var(--coal-400);
}

.mf-yh-contrast__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-500);
  margin: 0;
}

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

.mf-yh-contrast__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 44px;
  line-height: 1.05;
  color: var(--ink-on-dark);
  margin: 16px 0 0;
}

.mf-yh-contrast__note {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-on-dark-dim);
  margin: 8px 0 0;
}

.mf-yh-contrast__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-on-dark-body);
  margin: 20px 0 0;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--coal-400);
}


/* ==========================================================================
   FAQ
   ========================================================================== */

.mf-yh-faq { position: relative; padding: 40px 40px var(--yh-section); }

/* Side by side: the heading and the photo hold the left column, the questions
   run down the right. The questions are ruled lines rather than ten separate
   cards, which is most of what brings the section's height down. */
.mf-yh-faq__inner {
  max-inline-size: var(--section-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "head  acc"
    "photo acc";
  grid-template-rows: auto 1fr;
  gap: 32px 80px;
  align-items: start;
}

.mf-yh-faq__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.mf-yh-faq__head .mf-eyebrow { margin-block-end: 18px; }

.mf-yh-faq__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 16px 0 22px;
  max-inline-size: 44ch;
}

/* PLACEHOLDER frame — keeps the space and the shape a photo will take. */
.mf-yh-faq__photo {
  grid-area: photo;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: var(--radius-stage);
  border: 1.5px dashed var(--border-light-strong);
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, var(--flare-a08), transparent 70%),
    var(--paper-300);
}

.mf-yh-faq__photo-mark { display: flex; color: var(--flare-a30); }

.mf-yh-faq__photo figcaption {
  position: absolute;
  inset-block-end: 16px;
  inset-inline: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-yh-acc {
  grid-area: acc;
  border-block-start: 1px solid var(--border-light-strong);
}

/* base.css boxes every <details>; these are ruled lines, so the box goes. */
.mf-yh-acc__item {
  padding: 0;
  border: 0;
  border-radius: 0;
  border-block-end: 1px solid var(--border-light-strong);
}

.mf-yh-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 4px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  list-style: none;
}

/* Safari still draws the disclosure triangle without this. */
.mf-yh-acc__q::-webkit-details-marker { display: none; }

.mf-yh-acc__q:hover,
.mf-yh-acc__item[open] .mf-yh-acc__q { color: var(--flare-700); }
.mf-yh-acc__q:focus-visible { outline: 2px solid var(--flare-600); outline-offset: 3px; }

.mf-yh-acc__mark {
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--flare-600);
  background: var(--flare-a08);
  transition: rotate 0.25s ease, background 0.25s ease;
}

.mf-yh-acc__item[open] .mf-yh-acc__mark { rotate: 180deg; background: var(--flare-a15); }

.mf-yh-acc__a { padding: 0 48px 18px 4px; }

.mf-yh-acc__a p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
  max-inline-size: 62ch;
}

.mf-yh-acc__item[open] .mf-yh-acc__a { animation: yhAccOpen 0.28s var(--ease-out) both; }


/* ==========================================================================
   Closing CTA
   ========================================================================== */

.mf-yh-cta { position: relative; padding: var(--yh-section) 40px 120px; }

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

.mf-yh-cta__glow {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -40%;
  block-size: 120%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 40%,
    rgb(232 84 10 / 0.28),
    transparent 66%
  );
}

.mf-yh-cta__body { position: relative; z-index: 1; }
.mf-yh-cta__body .mf-eyebrow { margin-block-end: 22px; }

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

.mf-yh-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 34px;
}

.mf-yh-cta__watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
  color: var(--flare-500);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.mf-yh-cta__watch:hover { color: var(--flare-400); text-decoration: underline; }

.mf-yh-cta__note {
  max-inline-size: none;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-on-dark-dim);
  margin: 26px 0 0;
}

/* Reassurance to be scanned, so it sits on the wash below the panel rather
   than inside it as another row of boxes. */
.mf-yh-cta__trust {
  list-style: none;
  margin: 38px auto 0;
  padding: 0;
  max-inline-size: var(--section-max);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
}

.mf-yh-cta__trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  transition-delay: calc(var(--i) * 60ms);
}


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

/* The rails grow from nothing to their datum. The width is declared on the
   element, so the keyframe only supplies the start — a page with no JS never
   arms this and simply shows the finished bars. */
@keyframes yhRailFill {
  from { inline-size: 0; }
}

@keyframes yhAccOpen {
  from { opacity: 0; translate: 0 -6px; }
}


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

@media (max-width: 1180px) {
  .mf-yh-row { gap: 40px 56px; }
}

/* Below this the step card cannot hold two columns — the copy and the
   screenshot each get about 140px, which is neither. The card goes to one
   column, and with the screenshot under the copy a panel is taller than the
   screen, so the deck stops pinning and becomes an ordinary list: a sticky
   panel you cannot see the bottom of is worse than no deck at all. */
@media (max-width: 900px) {
  .mf-yh-step__card { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mf-yh-step {
    position: static;
    padding-block-end: 0;
  }
  .mf-yh-step:last-child { padding-block-end: 0; }
  .mf-yh-steps { gap: 20px; margin-block-end: 0; }
}

/* Measured, not derived: the table is 760px wide, so the two panels stop
   both fitting at 824px. Below that it is restacked: each row is a card
   with its label on top and the two answers one under the other, each
   headed by its column's name. The markup stays a table for screen readers;
   only the painting changes. */
@media (max-width: 824px) {
  .mf-yh-matrix__scroll { overflow: visible; }

  .mf-yh-matrix,
  .mf-yh-matrix tbody,
  .mf-yh-matrix th,
  .mf-yh-matrix td { display: block; }

  .mf-yh-matrix thead { display: none; }

  .mf-yh-matrix {
    min-inline-size: 0;
    margin-inline: 0;
    border-spacing: 0;
  }

  /* Each row is a light card: its label centred on top, the two answers
     side by side under it with a rule between. All on one light ground —
     the dark panel for "doing it yourself" read as a hard block here. */
  .mf-yh-matrix tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-block-start: 14px;
    padding: 0 10px 20px;
    border-radius: var(--radius-tile);
    overflow: hidden;
    border: 1.5px solid var(--flare-a30);
    background: var(--paper-100);
    text-align: center;
  }

  .mf-yh-matrix tbody tr:first-child { margin-block-start: 0; }

  /* The row's label is a dark strip across the top of its card. */
  .mf-yh-matrix tbody th {
    grid-column: 1 / -1;
    inline-size: auto;
    margin: 0 -10px 14px;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: var(--ink-on-dark);
    background: var(--coal-800);
    border: 0;
  }

  .mf-yh-matrix td {
    padding: 4px 10px 0;
    border: 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-body);
  }

  .mf-yh-matrix .is-ours,
  .mf-yh-matrix .is-theirs { background: none; border-inline: 0; color: var(--ink-body); }
  .mf-yh-matrix td.is-ours { font-weight: var(--weight-semibold); }
  .mf-yh-matrix td.is-theirs { border-inline-start: 1px solid var(--border-light-strong); }
  .mf-yh-matrix tbody tr:last-child td.is-ours,
  .mf-yh-matrix tbody tr:last-child td.is-theirs { border-radius: 0; }
  .mf-yh-matrix tbody tr + tr th,
  .mf-yh-matrix tbody tr + tr td.is-ours,
  .mf-yh-matrix tbody tr + tr td.is-theirs { border-block-start: 0; }

  /* The mark and the text stack, centred, rather than sitting in a row. */
  .mf-yh-matrix__cell { display: block; }
  .mf-yh-matrix__cell > svg { display: none; }
  .mf-yh-matrix__no { display: none; }

  /* Which side each answer is: the column heading is gone, so each cell
     carries its own. */
  .mf-yh-matrix td::before {
    content: attr(data-col);
    display: block;
    margin-block-end: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--ink);
  }

  .mf-yh-matrix td.is-ours::before {
    background: var(--grad-brand-flat);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
}

/* Less far past the edge where the column is narrower: the hero clips its
   overflow, and at 1280 the cards hung off the side of the page. */
@media (max-width: 1439px) {
  .mf-yh-fcard-sent { inset-inline-end: -100px; }
  .mf-yh-fcard-print { inset-inline-end: -90px; }
}

/* Two columns, but narrow ones: a smaller sheet, so the phone still has the
   gap between the columns to hang into. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mf-yh-hero__stage { inline-size: min(100%, 340px); }
  /* The "sent" card has the right-hand edge here, so the phone takes the
     left — and sits up off the strip, which carries the print pill. */
  .mf-yh-phone { inset-inline-start: -62px; inline-size: 132px; }
}

@media (max-width: 1023px) {
  .mf-yh-hero { padding: 90px 32px 48px; }

  /* minmax(0, …): a plain 1fr track grows to the widest thing in it — the
     credit strip's one-line text — and on a phone that is wider than the
     screen, which pushed the heading and lead off the right edge. */
  .mf-yh-hero__wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .mf-yh-hero__lead { max-inline-size: none; }

  /* One column: the chain sits under the sentence, its rule turned to run
     along the top. Nothing pins below this width (see your-health.js). */
  .mf-yh-rd__stage { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mf-yh-rd__stage > .mf-yh-rd__chain { grid-column: 1; grid-row: auto; }
  .mf-yh-rd__chain { padding: 40px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--border-light-strong); }
  .mf-yh-racgp__panel { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
  .mf-yh-racgp__title { font-size: 32px; }


  .mf-yh-year__months { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 20px; border-block-start: 0; }
  .mf-yh-year__month { border-block-start: 2px solid var(--border-light); }

  /* Copy first, then the picture of it: stacked, a screenshot with no
     heading over it is a picture of nothing yet. */
  .mf-yh-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "art";
    padding-block: 52px;
  }

  /* The frame stacks: copy over its image, and the frame narrows so the
     next one still peeks in from the right. */
  .mf-yh-reel__slide { grid-template-columns: minmax(0, 1fr); gap: 24px; inline-size: min(78vw, 560px); padding-inline-end: 40px; margin-inline-end: 40px; }
  .mf-yh-reel__slide .mf-yh-reel__img { order: 2; }
  .mf-yh-reel__img { aspect-ratio: 16 / 10; }
  .mf-yh-reel__when { font-size: 44px; }
  .mf-yh-reel__title { font-size: 25px; }

  /* One rail. The heading re-centres with every other section header on the
     page — left-aligned made sense against a column of price, not on its
     own above it. */
  .mf-yh-pricing__split {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "plan" "note";
    gap: 40px;
  }

  .mf-yh-pricing .mf-yh-sechead {
    text-align: center;
    max-inline-size: 780px;
    margin-inline: auto;
  }

  .mf-yh-pricing .mf-yh-sechead .mf-lead { margin-inline: auto; }


  .mf-yh-faq__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "acc" "photo"; grid-template-rows: none; gap: 28px; }

  .mf-yh-how,
  .mf-yh-features,
  .mf-yh-changed { padding-inline: 28px; }

  .mf-yh-cta__panel { padding: 60px 32px; }
}

/* .mf-h2 is a fixed 46px in framework/components.css, which outruns the
   column once the section headers go single-column. home.css makes the same
   reduction at the same width. */
@media (max-width: 860px) {
  .mf-yh-racgp__title { font-size: 30px; }
  .mf-yh-problem__close { font-size: 34px; margin-block-start: 56px; }

}

@media (max-width: 780px) {
  .mf-yh-hero { padding: 72px 22px 40px; }

  /* Benefits: one column, the rules running between the rows. */

  .mf-yh-changed__list { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mf-yh-flip__to { font-size: 23px; }

  /* Pull the art back over itself — there is no longer room beside the
     sheet, and half a card hanging off the viewport edge reads as a bug. */
  .mf-yh-hero__stage { inline-size: min(100%, 380px); }

  .mf-yh-phone { inset-inline-start: -20px; inline-size: 132px; }
  /* Out over the information sheet, clear of most of the newsletter. */
  .mf-yh-fcard-sent { inset-inline-end: -120px; }
  .mf-yh-fcard-print { inset-inline-end: -130px; }

  /* Less of the information sheet shows past the edge where the column is
     narrow — enough to read as a second page, not a second column. */
  .mf-yh-sheet__info { translate: 18% -40px; }

  .mf-yh-problem,
  .mf-yh-benefits,
  .mf-yh-racgp,
  .mf-yh-heritage,
  .mf-yh-compare,
  .mf-yh-pricing,
  .mf-yh-faq { padding-inline: 22px; }

  .mf-yh-how,
  .mf-yh-features,
  .mf-yh-changed { padding-inline: 22px; }

  .mf-yh-reel__stage > .mf-yh-sechead { padding-inline: 22px; }
  /* Pinned on a phone, the heading plus a stacked frame runs under the
     fold; the frame's image gives way so the copy and ruler stay on screen.
     The swipeable fallback keeps its images. */
  .mf-yh-reel.is-live .mf-yh-reel__img { display: none; }
  .mf-yh-reel__slides { padding-inline: 22px; }
  .mf-yh-reel__slide { inline-size: 84vw; padding-inline-end: 24px; margin-inline-end: 24px; }
  .mf-yh-reel__when { font-size: 36px; }
  .mf-yh-reel__title { font-size: 22px; }
  .mf-yh-reel__body { font-size: 15.5px; line-height: 1.65; }
  .mf-yh-ruler { inline-size: calc(100% - 44px); }
  .mf-yh-ruler__ticks span:not(:first-child):not(:last-child) em { display: none; }

  .mf-yh-year { --yh-chip-drop: 68px; }
  .mf-yh-year__chip { padding: 6px 9px; font-size: 11px; }
  .mf-yh-year__chip small, .mf-yh-year__chip svg { display: none; }
  .mf-yh-year__miss { font-size: 9.5px; }
  .mf-yh-year__month { min-block-size: 112px; }

  .mf-yh-row__art { padding: 12px 12px 110px; }

  /* The spread fills more of the narrow column and the cards hung off it
     come down to suit, so the thing being shown is still the biggest thing
     in it. */
  .mf-yh-spread { inline-size: min(88%, calc(var(--size) * 1.5%)); }
  /* Hung no further than a twelfth of the capture past its sides: further
     out than that is off the screen. */
  .mf-yh-float {
    inset-inline-start: max(calc(var(--x) * 1%), -6%);
    inset-inline-end: max(calc(var(--xe) * 1%), -6%);
  }
  .mf-yh-spread .mf-yh-fcard__inner:not(.mf-yh-fcard__inner-pill) { inline-size: 150px; padding: 12px 14px; }
  .mf-yh-spread .mf-yh-fcard__inner-pill { padding: 8px 13px 8px 9px; gap: 8px; }
  .mf-yh-spread .mf-yh-fcard__pill-text, .mf-yh-spread .mf-yh-fcard__title { font-size: 11px; }
  .mf-yh-spread .mf-yh-fcard__note { font-size: 10.5px; margin-block-start: 5px; }
  .mf-yh-spread .mf-yh-fcard__stat { font-size: 26px; }
  .mf-yh-spread .mf-yh-fcard__stat-label { font-size: 9.5px; }

  .mf-yh-row__num { font-size: 52px; }
  .mf-yh-row__title { font-size: 26px; }
  .mf-yh-row__body { font-size: 16px; }
  .mf-yh-row__ticks li { font-size: 14px; }

  .mf-yh-cta { padding: 50px 22px 90px; }


  .mf-yh-step__card { padding: 26px 22px 24px; }
  .mf-yh-step__node { inline-size: 40px; block-size: 40px; }
  .mf-yh-steps { gap: 20px; }


}

@media (max-width: 560px) {
  /* At this width the sheet, a phone and three cards is more than the column
     can hold without everything shrinking past legibility — the newsletter
     alone still tells the story. */
  .mf-yh-phone { display: none; }

  /* Not the pill: that sizes to its text, and this rule — later in the
     file at the same weight — was squashing it to a card's width with a
     card's padding, so the icon and the label ran into its ends. */
  .mf-yh-fcard__inner:not(.mf-yh-fcard__inner-pill) { inline-size: 152px; padding: 13px 15px; }

  /* The newsletter is the whole of it here. The information sheet is a
     sliver behind its top-right corner, and the two cards sit on the
     sheet's corners — the print pill over the top right, the edition card
     over the bottom left, on the credit strip — so nothing covers the page
     itself and nothing hangs past the hero's edge to be cut off. */
  .mf-yh-hero__stage { margin-inline: auto; }
  .mf-yh-sheet__info { display: none; }
  .mf-yh-sheet__credit { padding: 12px 16px; text-align: end; }

  .mf-yh-fcard-sent { inset-inline-end: auto; inset-inline-start: -6px; inset-block-end: -28px; }
  .mf-yh-fcard-sent .mf-yh-fcard__inner { inline-size: 196px; padding: 12px 14px; }
  .mf-yh-fcard-print { inset-inline-end: 6px; inset-block-start: -16px; }




  .mf-yh-plan { padding: 34px 22px 26px; }
  .mf-yh-plan__figure { font-size: 44px; }
  .mf-yh-plan__cta { inline-size: 100%; }
  .mf-yh-contrast { padding: 26px 22px; }

  .mf-yh-cta__panel { padding: 48px 22px; }
  .mf-yh-cta__actions .mf-btn { inline-size: 100%; }
}


/* ==========================================================================
   Reduced motion
   The rail fills on its own, the bars are simply drawn, and the floating
   cards arrive without the bob.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mf-yh-fcard,
  .mf-yh-fcard.is-in .mf-bob { animation: none; transition: none; }
  .mf-yh-phone__mail { animation: none; }

  .mf-yh-fcard { opacity: 1; transform: none; }


  /* The deck is layout, not animation, but panels sliding over each other is
     exactly the kind of movement this preference is asking us not to make. */
  .mf-yh-step { position: static; }
  .mf-yh-step:last-child { padding-block-end: 0; }
  .mf-yh-steps { margin-block-end: 0; }
  .mf-yh-acc__item[open] .mf-yh-acc__a { animation: none; }

  .mf-yh-flip *,
  .mf-yh-flip__from::after,
  .mf-yh-line,
  .mf-yh-line__text::after { transition: none; }
  .mf-yh-year__chip.is-gliding { transition: none; }

  .mf-yh-step,
  .mf-yh-cta__trust li { transition-delay: 0s; }
}