/* ==========================================================================
   Google Ads Management
   Loaded only by src/pages/google-ads.njk (front matter: pageCss: google-ads).

   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.

   The page runs paper → coal → paper → coal → paper: the hero on the warm
   wash, closed by the .mf-wave arch; what the fee covers on coal; the six
   reasons and the pricing promise back on paper; what the ads themselves
   cost on coal again; who it suits and how long it takes on paper, closing
   on a dark panel floating on the wash. The .mf-horizon bands in the
   template do the ramps between.
   ========================================================================== */

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

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

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

/* .mf-lead is written for paper; on coal it needs the on-dark body colour. */
.mf-ga-sechead-dark .mf-lead { color: var(--ink-on-dark-body); }

/* A second heading partway down the same coal run. */
.mf-ga-sechead-mid { margin-block-start: 96px; }


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

.mf-ga-hero {
  position: relative;
  overflow: clip;
  padding: 116px 48px 76px;
}

/* The arch closes the hero onto coal: its dome is the colour What's
   included opens on, so there is no band between them. The hero itself
   sits on the page wash, so the glow's base stays transparent. */
.mf-ga-hero + .mf-wave { --wave-fill: var(--coal-900); }

.mf-ga-hero__glow {
  position: absolute;
  inset-block-start: -190px;
  inset-inline-end: -150px;
  inline-size: 760px;
  block-size: 760px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--flare-a12), transparent 62%);
}

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

.mf-ga-hero__wrap > * { min-inline-size: 0; }

.mf-ga-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-ga-hero__lead {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-inline-size: 54ch;
  margin: 24px 0 0;
}

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

.mf-ga-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-ga-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* --- Art column ----------------------------------------------------------
   The same search twice over: the results page on a desktop behind, and the
   phone in front, with the floating cards hung off the stage's own edges. */

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

/* A soft ember behind the stage, so the paper page and the dark phone both
   sit on something rather than on the bare wash. */
.mf-ga-hero__halo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: min(120%, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--flare-a20), var(--flare-a08) 38%, transparent 66%);
}

/* Sized to the results panel, so the phone and the floating cards hang off
   the panel's own edges rather than off the much wider column. */
.mf-ga-hero__stage {
  position: relative;
  inline-size: 100%;
  max-inline-size: 520px;
  /* The foot margin is the phone's overhang. */
  margin-block: 44px 110px;
}


/* ==========================================================================
   The search results panel

   Drawn, not screenshotted — a screenshot would date the moment Google
   changed its layout, and would carry a competitor's name. But drawn the way
   Google draws it, in Google's own colours (the --mock-* tokens in the
   theme), so it reads as the page a patient actually sees. Its type is the
   browser's Arial for the same reason.
   ========================================================================== */

.mf-ga-serp {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-stage);
  overflow: hidden;
  background: var(--mock-white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-stage), var(--shadow-card);
  font-family: var(--mock-font);
  color: var(--mock-ink);
}

/* The four-colour mark — an SVG in the template; the arcs are stroked here
   in Google's colours. */
.mf-ga-gmark {
  flex: none;
  display: block;
  inline-size: 26px;
  block-size: 26px;
}

.mf-ga-gmark svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.mf-ga-gmark path {
  fill: none;
  stroke-width: 10;
  stroke-linecap: butt;
}

.mf-ga-gmark__red { stroke: var(--mock-g-red); }
.mf-ga-gmark__yellow { stroke: var(--mock-g-yellow); }
.mf-ga-gmark__green { stroke: var(--mock-g-green); }
.mf-ga-gmark__blue { stroke: var(--mock-g-blue); }
.mf-ga-gmark__bar { fill: var(--mock-g-blue); }

.mf-ga-gmark-sm { inline-size: 18px; block-size: 18px; }

/* The status row only exists when the page is framed as a tablet — see the
   responsive block at the foot. The phone always has one. */
.mf-ga-serp__status { display: none; }

/* The right end of a status row: two signal dots and a battery. */
.mf-ga-status-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mf-ga-status-right i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--mock-ink);
}

.mf-ga-status-right b {
  position: relative;
  inline-size: 20px;
  block-size: 10px;
  margin-inline-start: 4px;
  border-radius: 3px;
  border: 1.5px solid var(--mock-ink);
}

.mf-ga-status-right b::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  inset-inline-end: 4px;
  border-radius: 1px;
  background: var(--mock-ink);
}

.mf-ga-serp__top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 10px;
}

.mf-ga-serp__box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--mock-line);
  box-shadow: 0 1px 6px rgb(32 33 36 / 0.18);
}

.mf-ga-serp__query {
  flex: 1;
  font-size: 15px;
  color: var(--mock-ink);
}

.mf-ga-serp__clear {
  font-size: 20px;
  line-height: 1;
  color: var(--mock-ink-dim);
  padding-inline-end: 12px;
  border-inline-end: 1px solid var(--mock-line);
}

.mf-ga-serp__go { display: inline-flex; color: var(--mock-action); }

.mf-ga-serp__avatar {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--grad-brand);
}

.mf-ga-serp__tabs {
  list-style: none;
  margin: 0;
  padding: 0 20px 0 62px;
  display: flex;
  gap: 22px;
  border-block-end: 1px solid var(--mock-line);
  font-size: 13px;
  color: var(--mock-ink-dim);
}

.mf-ga-serp__tabs li { padding: 8px 0 10px; }

.mf-ga-serp__tabs li.is-on {
  color: var(--mock-action);
  box-shadow: inset 0 -3px 0 var(--mock-action);
}

/* Room on the left for the phone: the panel's lower-left quarter is grey
   placeholder rows, which is what the phone covers. */
.mf-ga-serp__body { padding: 20px 20px 24px 62px; }

/* --- The ad ------------------------------------------------------------- */

.mf-ga-ad__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mock-ink);
  margin: 0 0 12px;
}

.mf-ga-ad__src {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.mf-ga-ad__fav {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--mock-fill);
  border: 1px solid var(--mock-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--flare-700);
}

.mf-ga-ad__src-text { display: grid; line-height: 1.3; }
.mf-ga-ad__name { font-size: 13.5px; color: var(--mock-ink); }
.mf-ga-ad__url { font-size: 12px; color: var(--mock-ink-soft); }

.mf-ga-ad__title {
  font-size: 19px;
  line-height: 1.3;
  color: var(--mock-link);
  margin: 8px 0 0;
}

.mf-ga-ad__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mock-ink-soft);
  margin: 6px 0 0;
}

.mf-ga-ad__links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
  color: var(--mock-link);
}

/* --- Everything below it -------------------------------------------------
   Deliberately unreadable. Naming real competitors would be a claim, and
   inventing plausible clinic names would be worse. */

.mf-ga-serp__rest {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.mf-ga-serp__rest-src {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--mock-ink-soft);
  margin-block-end: 8px;
}

.mf-ga-serp__rest-fav {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--mock-fill);
  border: 1px solid var(--mock-line);
}

.mf-ga-serp__rest-title {
  display: block;
  inline-size: 58%;
  block-size: 11px;
  border-radius: var(--radius-pill);
  background: var(--mock-line);
  margin-block-end: 9px;
}

.mf-ga-serp__rest-line {
  display: block;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background: var(--mock-fill);
}

.mf-ga-serp__rest-line + .mf-ga-serp__rest-line { margin-block-start: 6px; }
.mf-ga-serp__rest-line-sm { inline-size: 70%; }

/* --- The same search on a phone ------------------------------------------
   Same frame as the newsletter hero's phone, hung off the panel's lower-left
   corner so it covers placeholder rows and nothing the panel is there to
   show. The ad on it is the desktop page's, with the buttons a phone adds —
   call and directions — which are the page's real point. */

.mf-ga-phone {
  position: absolute;
  z-index: 3;
  /* Hung far enough off the page's left edge that it stops short of the
     ad's text — the sitelinks are part of what the panel is showing — and
     covers only the page's left margin and the placeholder rows. */
  inset-inline-start: -122px;
  inset-block-end: -130px;
  inline-size: 180px;
  border-radius: 34px;
  padding: 8px;
  background: var(--coal-700);
  box-shadow: var(--shadow-card);
}

/* The buttons on the phone's sides: volume up and down on the left (one
   pseudo-element and its shadow), power on the right. */
.mf-ga-phone::before,
.mf-ga-phone::after {
  content: "";
  position: absolute;
  inline-size: 3px;
  background: var(--coal-700);
}

.mf-ga-phone::before {
  inset-inline-start: -3px;
  inset-block-start: 84px;
  block-size: 26px;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 36px 0 var(--coal-700);
}

.mf-ga-phone::after {
  inset-inline-end: -3px;
  inset-block-start: 104px;
  block-size: 42px;
  border-radius: 0 2px 2px 0;
}

/* A phone's proportions, with the search page starting at the top and the
   home bar across the foot. */
.mf-ga-phone__screen {
  position: relative;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
  border-radius: 27px;
  background: var(--mock-white);
  overflow: hidden;
  padding: 10px 12px 20px;
  font-family: var(--mock-font);
  color: var(--mock-ink);
}

.mf-ga-phone__screen::after {
  content: "";
  position: absolute;
  inset-block-end: 7px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 56px;
  block-size: 4px;
  border-radius: var(--radius-full);
  background: var(--mock-ink);
}

/* The camera island. */
.mf-ga-phone__notch {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 40px;
  block-size: 11px;
  border-radius: var(--radius-full);
  background: var(--mock-ink);
}

.mf-ga-phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 4px;
  margin-block-end: 12px;
  font-size: 9px;
  font-weight: 700;
}

.mf-ga-phone__status .mf-ga-status-right { gap: 3px; }
.mf-ga-phone__status .mf-ga-status-right i { inline-size: 4px; block-size: 4px; }
.mf-ga-phone__status .mf-ga-status-right b { inline-size: 15px; block-size: 8px; }

.mf-ga-phone__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mf-ga-phone__box {
  flex: 1;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  background: var(--mock-fill);
  font-size: 9.5px;
  color: var(--mock-ink);
}

.mf-ga-phone__tabs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
  border-block-end: 1px solid var(--mock-line);
  font-size: 8px;
  color: var(--mock-ink-dim);
}

.mf-ga-phone__tabs li { padding: 3px 0 5px; }
.mf-ga-phone__tabs li.is-on { color: var(--mock-action); box-shadow: inset 0 -2px 0 var(--mock-action); }

.mf-ga-phone__ad { margin-block-start: 10px; }

.mf-ga-phone__label {
  font-size: 8.5px;
  font-weight: 700;
  margin: 0 0 6px;
}

.mf-ga-phone__src {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  margin: 0;
}

.mf-ga-phone__src .mf-ga-ad__fav { inline-size: 16px; block-size: 16px; font-size: 8px; }

.mf-ga-phone__title {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--mock-link);
  margin: 5px 0 0;
}

.mf-ga-phone__desc {
  font-size: 8px;
  line-height: 1.5;
  color: var(--mock-ink-soft);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The two buttons an ad carries on a phone, drawn the way the app draws
   them: outlined, blue, side by side. */
.mf-ga-phone__ext {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mf-ga-phone__ext li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--mock-line);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--mock-action);
  white-space: nowrap;
}

.mf-ga-phone__rest { margin-block-start: 14px; gap: 12px; padding-inline: 2px; }
.mf-ga-phone__rest .mf-ga-serp__rest-src { font-size: 8px; gap: 6px; margin-block-end: 5px; }
.mf-ga-phone__rest .mf-ga-serp__rest-fav { inline-size: 14px; block-size: 14px; }
.mf-ga-phone__rest .mf-ga-serp__rest-title { block-size: 8px; margin-block-end: 5px; }
.mf-ga-phone__rest .mf-ga-serp__rest-line { block-size: 5px; }

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

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

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

/* Over the panel's upper-right corner — the search bar's empty end, not the
   word "Sponsored", which is the one word in the mock the section is about. */
.mf-ga-fcard-flag {
  inset-block-start: -22px;
  inset-inline-end: -40px;
  transition-delay: 0.15s;
}

/* Lower right, hanging off the panel's edge over the placeholder rows. */
.mf-ga-fcard-actions {
  inset-inline-end: -72px;
  inset-block-end: 6%;
  transition-delay: 0.3s;
}

.mf-ga-fcard-actions .mf-bob { animation-delay: 1.6s; }

.mf-ga-fcard__inner {
  inline-size: 206px;
  padding: 16px 18px;
  border-radius: var(--radius-tile);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
}

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

.mf-ga-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-ga-fcard__pill-text {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  white-space: nowrap;
}

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

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

/* Three bars, longest first: calls, bookings, directions. --fill is set per
   row in the markup from the data file. */
.mf-ga-fcard__bars {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mf-ga-fcard__bars li {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 8px;
}

.mf-ga-fcard__bar-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark-body);
}

.mf-ga-fcard__bar {
  display: block;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--coal-400);
  overflow: hidden;
}

.mf-ga-fcard__bar span {
  display: block;
  block-size: 100%;
  inline-size: var(--fill);
  border-radius: inherit;
  background: var(--grad-brand);
}

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


/* ==========================================================================
   Why choose us — six reasons, three across, ruled not boxed
   ========================================================================== */

.mf-ga-why { padding: 96px 40px 88px; }

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

/* Six reasons, three across. Pricing is not one of them: it is the whole of
   the "no nasty surprises" panel that follows. */
/* No cards: the six sit straight on the wash in a ruled grid — a hairline
   above each row and between the columns — so this section reads as a page
   of reasons rather than another run of tiles. The column rules are set per
   breakpoint below, since nth-child cannot follow a custom property. */
.mf-ga-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-end: 1px solid var(--border-light);
}

.mf-ga-card {
  position: relative;
  padding: 34px 32px 38px;
}

/* The rules are drawn, not set: each row's rule grows in from the left and
   each column's from the top as the grid arrives, with the chip and copy
   following — one reason after another, --i apart. Pseudo-elements so the
   rules can scale; the column rule only exists where there is a column. */
.mf-ga-card::before,
.mf-ga-card::after {
  content: "";
  position: absolute;
  background: var(--border-light);
  transition: transform 0.7s var(--ease);
  transition-delay: calc(var(--i) * 110ms);
}

.mf-ga-card::before {
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.mf-ga-card::after {
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 1px;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.mf-ga-card:nth-child(3n + 1)::after { display: none; }

.mf-ga-cards.is-in .mf-ga-card::before { transform: scaleX(1); }
.mf-ga-cards.is-in .mf-ga-card::after { transform: scaleY(1); }

.mf-ga-card .mf-chip-icon,
.mf-ga-card__title,
.mf-ga-card__body,
.mf-ga-card__n {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s ease, translate 0.6s var(--ease), scale 0.6s var(--ease-spring, var(--ease));
  transition-delay: calc(var(--i) * 110ms + 180ms);
}

.mf-ga-card .mf-chip-icon { scale: 0.6; margin-block-end: 20px; }
.mf-ga-card__title { transition-delay: calc(var(--i) * 110ms + 260ms); }
.mf-ga-card__body { transition-delay: calc(var(--i) * 110ms + 340ms); }

.mf-ga-cards.is-in .mf-ga-card .mf-chip-icon,
.mf-ga-cards.is-in .mf-ga-card__title,
.mf-ga-cards.is-in .mf-ga-card__body,
.mf-ga-cards.is-in .mf-ga-card__n {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* A faint ember rises behind the reason under the pointer. */
.mf-ga-card > * { position: relative; }

.mf-ga-card:hover { background: radial-gradient(ellipse 80% 70% at 50% 100%, var(--flare-a08), transparent 70%); }
.mf-ga-card:hover .mf-chip-icon { rotate: -6deg; }
.mf-ga-card .mf-chip-icon { transition: opacity 0.6s ease, translate 0.6s var(--ease), scale 0.6s var(--ease), rotate 0.3s var(--ease); }

/* The number, large and faint in the corner. */
.mf-ga-card__n {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 28px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--flare-a15);
}

.mf-ga-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

.mf-ga-card__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 11px 0 0;
}


/* ==========================================================================
   No nasty surprises — a dark panel floating on the wash

   The pricing promise is the part of this page most likely to be doubted, so
   it gets its own surface rather than being one more card in the grid above.
   ========================================================================== */

.mf-ga-surprises { padding: 0 40px 96px; }

.mf-ga-surprises__panel {
  position: relative;
  overflow: hidden;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding: 60px 48px 52px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.mf-ga-surprises__glow {
  position: absolute;
  inset-block-start: -45%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 700px;
  block-size: 700px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(232 84 10 / 0.2), transparent 60%);
}

.mf-ga-surprises__body { position: relative; z-index: 1; }
.mf-ga-surprises__body .mf-eyebrow { margin-block-end: 22px; }
.mf-ga-surprises__body .mf-h2 { max-inline-size: 640px; margin-inline: auto; }

.mf-ga-surprises__lead {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 18px auto 0;
  max-inline-size: 760px;
}

/* --- The bill: the work drifts past, the fee stands still ---------------- */

.mf-ga-bill {
  position: relative;
  display: grid;
  /* One column the width of the box, not of the rail: the rail is far wider
     and overflows it, and the tag centres on the box. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 26px;
  margin: 40px -48px 0;
  padding-block: 4px 20px;
  overflow: hidden;
  /* The rail fades out at both edges of the panel. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Margin, not gap, between items: the track is then exactly twice one pass
   wide, and the -50% loop lands on the seam. */
.mf-ga-bill__track {
  justify-self: start;
  display: flex;
  inline-size: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: mfMarqueeLeft 36s linear infinite;
}

.mf-ga-bill:hover .mf-ga-bill__track { animation-play-state: paused; }

.mf-ga-bill__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: 14px;
  padding: 10px 18px 10px 10px;
  border-radius: var(--radius-pill);
  background: var(--coal-500);
  border: 1px solid var(--coal-400);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark-body);
  white-space: nowrap;
}

.mf-ga-bill__item .mf-chip-icon { inline-size: 26px; block-size: 26px; }

/* The fee, above the rail. Lit, so it reads as the thing standing still. */
.mf-ga-bill__tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 16px;
  border-radius: var(--radius-pill);
  background: var(--coal-900);
  border: 1px solid var(--flare-a40);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.4), 0 0 36px var(--flare-a20);
  white-space: nowrap;
}

.mf-ga-bill__pulse {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--flare-500);
  box-shadow: 0 0 12px var(--flare-500);
  animation: mfPulseDot 2s ease-in-out infinite;
}

.mf-ga-bill__tag-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark-body);
}

.mf-ga-bill__tag-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.mf-ga-surprises__items {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: start;
}

/* Three columns divided by rules, not three tiles inside the panel: one
   surface here, not a box of boxes. */
.mf-ga-surprises__items li { padding: 4px 28px; }
.mf-ga-surprises__items li + li { border-inline-start: 1px solid var(--coal-400); }
.mf-ga-surprises__items li:first-child { padding-inline-start: 0; }
.mf-ga-surprises__items li:last-child { padding-inline-end: 0; }

.mf-ga-surprises__items .mf-chip-icon { margin-block-end: 16px; }

.mf-ga-surprises__item-title {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  margin: 0;
}

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

.mf-ga-surprises__foot {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-on-dark-strong);
  margin: 32px auto 0;
  max-inline-size: 620px;
}


/* ==========================================================================
   What's included + what it doesn't cover — the dark run
   ========================================================================== */

.mf-ga-included {
  position: relative;
  overflow: clip;
  padding: 92px 40px 104px;
  background: var(--coal-900);
  /* Closes the hairline the arch or horizon band above can leave at some
     zoom levels — the same margin the other pages' coal sections carry. */
  margin-block-start: -2px;
}

/* Straight under the arch, whose dome already is this section's coal: the
   arch is the breath, so the section opens close to it. */
.mf-wave + .mf-ga-included { padding-block-start: 36px; }

.mf-ga-included__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 88% 20%, rgb(232 84 10 / 0.18), transparent 62%),
    radial-gradient(ellipse 45% 40% at 8% 88%, rgb(160 50 8 / 0.14), transparent 62%);
  /* Fades in from the top: the arch's dome and the horizon band above both
     end on flat coal, and a glow that started at full strength on the
     section's first pixel drew the section's edge as a rectangle. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 260px);
  mask-image: linear-gradient(180deg, transparent 0, #000 260px);
}

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

/* The list on the left, a picture of each item on the right. */
/* The two columns stand the same height: whichever is taller sets the row,
   and the other fills it — the list by spreading its items, the deck by its
   slides stretching (captions stay pinned to the foot). */
.mf-ga-included__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.mf-ga-included__grid > * { min-inline-size: 0; }
.mf-ga-included__list { display: flex; }

.mf-ga-inclist {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

/* Each item is the button that picks its slide. */
.mf-ga-inc {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  border-radius: var(--radius-tile);
  background: var(--panel-dark);
  border: 1px solid var(--coal-400);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.mf-ga-inc:hover,
.mf-ga-inc.is-on { border-color: var(--flare-a30); }

.mf-ga-inc.is-on { background: var(--coal-620); }

.mf-ga-inc .mf-chip-icon { flex: none; }

.mf-ga-inc__title {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--ink-on-dark-strong);
}

/* A hairline along the foot of the current item that fills over the hold,
   so the deck's pace is visible — only while it is walking on its own. */
.mf-ga-inc__timer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.is-walking .mf-ga-inc.is-on .mf-ga-inc__timer {
  animation: mfGaTimer 4.5s linear forwards;
}

@keyframes mfGaTimer { to { transform: scaleX(1); } }

/* Said on the same surface as the inclusions, under them and no wider:
   the one thing the fee does not cover, in a line. */
.mf-ga-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius-tile);
  background: var(--flare-a08);
  border: 1px solid var(--flare-a25);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-on-dark-body);
  max-inline-size: none;
}

.mf-ga-note .mf-chip-icon { flex: none; margin-block-start: 1px; }
.mf-ga-note strong { color: var(--ink-on-dark); font-weight: var(--weight-bold); }

/* --- The deck ------------------------------------------------------------
   One paper card; the slides are stacked in it and crossfade. Without the
   script none of them carries .is-on, so they all show — stacked down the
   card rather than hidden. */
.mf-ga-deck {
  position: relative;
  display: grid;
  padding: 26px 28px 28px;
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-stage), var(--shadow-card);
}

.mf-ga-slide {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
}

/* Pinned to the foot of the card whatever the slide above it needs, so
   every slide ends on the same line. */
.mf-ga-slide__caption {
  max-inline-size: none;
  margin: 20px 0 0;
  margin-block-start: auto;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.mf-ga-slide > :not(.mf-ga-slide__label):not(.mf-ga-slide__caption) { margin-block-end: 20px; }

.is-live .mf-ga-slide {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
  pointer-events: none;
}

.is-live .mf-ga-slide.is-on {
  opacity: 1;
  translate: none;
  pointer-events: auto;
}

.mf-ga-slide__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--border-light);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--ink);
}

.mf-ga-slide__period {
  margin-inline-start: auto;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--paper-500);
  border: 1px solid var(--border-light);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--ink-body);
  white-space: nowrap;
}

/* Keyword plan: a term, how much it is searched, what it is for. */
.mf-ga-kw {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mf-ga-kw li {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.mf-ga-kw li.is-off { opacity: 0.5; }
.mf-ga-kw li.is-off .mf-ga-kw__text { text-decoration: line-through; }

.mf-ga-kw__text {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-ga-kw__bar,
.mf-ga-report__bar {
  display: block;
  block-size: 9px;
  border-radius: var(--radius-pill);
  background: var(--paper-600);
  overflow: hidden;
}

.mf-ga-kw__bar span,
.mf-ga-report__bar span {
  display: block;
  block-size: 100%;
  inline-size: var(--fill);
  border-radius: inherit;
  background: var(--grad-brand);
}

.mf-ga-kw__tag {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--flare-a08);
  border: 1px solid var(--flare-a20);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  color: var(--flare-700);
  white-space: nowrap;
}

/* Ad editor: the fields an ad is written in. */
.mf-ga-copy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* The description runs the full width under the three headlines. */
.mf-ga-copy li:last-child { grid-column: 1 / -1; }

.mf-ga-copy li {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  border-radius: var(--radius-inset);
  background: var(--paper-300);
  border: 1px solid var(--border-light);
}

.mf-ga-copy__name {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-ga-copy__value {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
}

.mf-ga-copy__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
}

.mf-ga-copy__strength {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--status-live-soft);
  border: 1px solid var(--status-live-line);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--status-live);
  margin-inline-end: auto;
}

.mf-ga-copy__ext {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--paper-500);
  border: 1px solid var(--border-light);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-body);
}

/* Monitoring: the line, with the month's changes flagged on it. */
.mf-ga-monitor { position: relative; }

.mf-ga-monitor__chart {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 400 / 150;
}

.mf-ga-monitor__mark {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink-on-dark);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card-sm);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-body);
  white-space: nowrap;
  inset-inline-start: calc(10% + var(--i) * 28%);
  inset-block-start: calc(58% - var(--i) * 20%);
}

.mf-ga-monitor__mark i {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
}

/* Landing page review: a wireframe beside what was checked. */
.mf-ga-landing {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  align-items: center;
}

.mf-ga-landing__page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-inset);
  background: var(--paper-300);
  border: 1px solid var(--border-light);
}

.mf-ga-landing__nav {
  grid-column: 1 / -1;
  block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--paper-800);
}

.mf-ga-landing__h {
  block-size: 9px;
  border-radius: var(--radius-pill);
  background: var(--ink-dim);
  align-self: end;
}

.mf-ga-landing__h-sm { inline-size: 70%; align-self: start; }

.mf-ga-landing__cta {
  grid-column: 1;
  justify-self: start;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--grad-brand);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  box-shadow: 0 0 0 3px var(--flare-a20);
}

.mf-ga-landing__img {
  grid-column: 2;
  grid-row: 2 / 5;
  border-radius: var(--radius-inset);
  background: var(--paper-700);
  min-block-size: 96px;
}

/* A checklist, shared by the landing review and the compliance slide. */
.mf-ga-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-body);
}

.mf-ga-checks li { display: flex; align-items: flex-start; gap: 9px; }
.mf-ga-checks svg { flex: none; margin-block-start: 4px; }

.mf-ga-checks-lg { gap: 12px; font-size: 15px; }

.mf-ga-checks-lg li {
  padding: 11px 14px;
  border-radius: var(--radius-inset);
  background: var(--paper-300);
  border: 1px solid var(--border-light);
}

/* Monthly report: the line that goes up and to the right, then bars. */
.mf-ga-report__chart {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 400 / 120;
}

.mf-ga-report__stats {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mf-ga-report__stats li {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  gap: 12px;
}

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

/* --- Ad spend ------------------------------------------------------------ */

/* No panels: the figure is the picture here, set big on the coal, and the
   caveat stands beside it as a column of prose behind an orange rule. */
.mf-ga-spend {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
  max-inline-size: 1080px;
  margin-inline: auto;
}

.mf-ga-spend__figure {
  display: flex;
  flex-direction: column;
}

.mf-ga-spend__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(72px, 8vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}

.mf-ga-spend__unit {
  display: block;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-start: 14px;
}

.mf-ga-spend__label {
  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);
  margin: 20px 0 0;
}

.mf-ga-spend__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 12px 0 0;
}

/* The "why nobody can quote you a click price" panel. Marked as an aside and
   drawn as one — this is the honest caveat, and it should read as the page
   stepping aside to explain rather than as another feature. */
.mf-ga-callout {
  padding: 4px 0 4px 32px;
  border-inline-start: 1px solid var(--flare-a40);
}

.mf-ga-callout__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: var(--weight-bold);
  color: var(--ink-on-dark);
  margin: 0;
}

.mf-ga-callout__mark {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--flare-a20);
  color: var(--flare-500);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-bold);
  font-style: italic;
}

.mf-ga-callout__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-on-dark-body);
  margin: 16px 0 0;
  max-inline-size: 68ch;
}


/* ==========================================================================
   What to expect
   ========================================================================== */

.mf-ga-results { padding: 96px 40px 72px; }

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

/* The five positions down the left, who it is built for beside them — one
   screen rather than a list with a card a long way under it. */
.mf-ga-results__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.mf-ga-results__grid > * { min-inline-size: 0; }

/* Rows on a hairline, not cards. These are five positions a reader checks
   themselves against one at a time, and boxes would invite them to skim the
   set instead of finding their own. */
.mf-ga-triggers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.mf-ga-triggers li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  border-block-end: 1px solid var(--border-light);
}

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

.mf-ga-triggers .mf-chip-icon { flex: none; }

.mf-ga-triggers__title {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-body);
}

.mf-ga-fits {
  display: grid;
  gap: 24px;
  position: relative;
  overflow: hidden;
  padding: 38px 36px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-panel);
}

/* A faint ember in the card's top corner, the way the other dark panels
   on the page are lit. */
.mf-ga-fits::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -20%;
  inline-size: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--flare-a20), transparent 62%);
}

.mf-ga-fits > * { position: relative; }

.mf-ga-fits__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink-on-dark);
  margin: 0;
}

.mf-ga-fits__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-on-dark-body);
  margin: 12px 0 0;
}

.mf-ga-fits__types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mf-ga-fits__types li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--coal-400);
  border: 1px solid var(--coal-300);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--ink-on-dark-strong);
}

.mf-ga-fits__note {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-on-dark-dim);
  margin: 14px 0 0;
}


/* ==========================================================================
   How long it takes — three phases, each with a picture of itself

   The account being built, the data settling, the line levelling out into
   something to plan around. Drawn rather than charted: no figures, because
   the shape is the claim.
   ========================================================================== */

.mf-ga-ramp { padding: 40px 40px 40px; }

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

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

.mf-ga-phase {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 28px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-panel);
}

/* The picture box: the same 3:2 window on each card. A shade lighter than
   the card it sits in, with a faint ember low in it, so it reads as a lit
   screen on the dark card rather than a hole in it. */
.mf-ga-phase__pic {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-tile);
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, var(--flare-a20), transparent 70%),
    var(--panel-dark);
  border: 1px solid var(--coal-400);
  overflow: hidden;
  padding: 18px;
}

.mf-ga-phase__svg {
  inline-size: 100%;
  block-size: 100%;
}

.mf-ga-phase__dots circle { fill: var(--ink-on-dark-dim); }

/* The account tree: one campaign, its ad groups, their keywords and ads. */
.mf-ga-tree {
  display: grid;
  gap: 12px;
  justify-items: center;
  inline-size: 100%;
}

.mf-ga-tree__node,
.mf-ga-tree__leaf {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.mf-ga-tree__node {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--coal-400);
  border: 1px solid var(--coal-300);
  font-size: 12px;
  color: var(--ink-on-dark-strong);
}

.mf-ga-tree__node-root {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--ink-on-dark);
}

.mf-ga-tree__row {
  position: relative;
  display: flex;
  gap: 28px;
  padding-block-start: 12px;
}

/* The connectors: a stem down from the row above, a bar across the row. */
.mf-ga-tree__row::before {
  content: "";
  position: absolute;
  inset-block-start: -12px;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 12px;
  background: var(--coal-300);
}

.mf-ga-tree__row::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 22%;
  block-size: 1px;
  background: var(--coal-300);
}

.mf-ga-tree__row-leaf { gap: 10px; }

.mf-ga-tree__leaf {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--flare-a15);
  border: 1px solid var(--flare-a30);
  font-size: 10px;
  color: var(--flare-400);
}

.mf-ga-phase__when {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 12px 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flare-400);
}

.mf-ga-phase__when .mf-chip-icon { inline-size: 26px; block-size: 26px; }

.mf-ga-phase__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink-on-dark);
  margin: 12px 12px 0;
}

.mf-ga-phase__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 10px 12px 0;
}

/* margin-inline: auto is load-bearing. base.css caps every <p> at 65ch, so a
   centred paragraph centres inside a box narrower than its parent and lands
   left of the page's centre line unless the box itself is centred too. */
.mf-ga-ramp__figure {
  text-align: center;
  margin-inline: auto;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block: 56px 0;
}

.mf-ga-ramp__figure .mf-grad-text {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-bold);
  letter-spacing: normal;
  vertical-align: -3px;
  margin-inline-end: 4px;
}


/* ==========================================================================
   Closing CTA + the trust rail
   ========================================================================== */

.mf-ga-cta { padding: 60px 40px 120px; }

.mf-ga-cta__panel {
  position: relative;
  overflow: hidden;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding: 68px 48px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.mf-ga-cta__glow {
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 720px;
  block-size: 720px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(232 84 10 / 0.22), transparent 60%);
}

.mf-ga-cta__body { position: relative; z-index: 1; }
.mf-ga-cta__body .mf-eyebrow { margin-block-end: 24px; }
.mf-ga-cta__body .mf-h2 { max-inline-size: 700px; margin-inline: auto; }

.mf-ga-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: 560px;
}

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

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

/* Why trust us — a rail under the panel rather than a section of its own. It
   is the last word on the page and earns its place by being short. */
.mf-ga-trust {
  max-inline-size: var(--section-max);
  margin: 48px auto 0;
  text-align: center;
}

/* Same 65ch cap as the ramp figure above — centred, so the box needs
   centring as well as the text inside it. */
.mf-ga-trust__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 auto 24px;
}

.mf-ga-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 36px;
  text-align: start;
}

.mf-ga-trust__list li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 13px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-body);
}

.mf-ga-trust__list svg { margin-block-start: 5px; }


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

@media (max-width: 1180px) {
  .mf-ga-hero { padding-inline: 32px; }
  .mf-ga-hero__wrap { grid-template-columns: 1fr; gap: 72px; }
  .mf-ga-hero__lead { max-inline-size: 62ch; }
  .mf-ga-hero__stage { max-inline-size: 520px; margin-inline: auto; }

  .mf-ga-why, .mf-ga-surprises, .mf-ga-included,
  .mf-ga-results, .mf-ga-ramp, .mf-ga-cta { padding-inline: 32px; }

  .mf-ga-spend { grid-template-columns: 1fr; gap: 44px; }
  .mf-ga-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-ga-card:nth-child(3n + 1)::after { display: block; }
  .mf-ga-card:nth-child(2n + 1)::after { display: none; }
  .mf-ga-included__grid { grid-template-columns: 1fr; gap: 36px; }
  .mf-ga-results__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Between phone and desktop widths the results page is framed as a tablet:
   a dark bezel round the same page, and a status row across the top of the
   screen, with the phone still in front of it — the two devices a patient
   actually searches on. On a desktop the page is a page, so no frame. */
@media (min-width: 701px) and (max-width: 1180px) {
  .mf-ga-serp {
    border: 11px solid var(--coal-700);
    border-radius: 30px;
  }

  .mf-ga-serp__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mock-ink);
  }

  .mf-ga-serp__top { padding-block-start: 10px; }
}

@media (max-width: 900px) {
  .mf-ga-fits { padding: 30px 26px; }

  .mf-ga-phases { grid-template-columns: 1fr; max-inline-size: 520px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .mf-ga-hero { padding: 96px 20px 56px; }
  .mf-ga-why { padding: 76px 20px 68px; }
  .mf-ga-surprises { padding: 0 20px 76px; }
  .mf-ga-surprises__panel { padding: 44px 24px 40px; }
  .mf-ga-included { padding: 76px 20px 84px; }
  .mf-ga-results { padding: 76px 20px 56px; }
  .mf-ga-ramp { padding: 32px 20px; }
  .mf-ga-cta { padding: 48px 20px 96px; }
  .mf-ga-cta__panel { padding: 46px 24px; }

  .mf-ga-sechead { margin-block-end: 40px; }
  .mf-ga-sechead-mid { margin-block-start: 72px; }
  .mf-ga-card { padding: 26px 4px 30px; }
  .mf-ga-callout { padding-inline-start: 20px; }

  .mf-ga-cards { grid-template-columns: 1fr; }
  /* :nth-child(n) matches everything; it is there to outweigh the per-column
     rules above, which carry the same specificity. */
  .mf-ga-card:nth-child(n)::after { display: none; }
  .mf-ga-card__n { inset-block-start: 22px; inset-inline-end: 4px; font-size: 32px; }
  .mf-ga-bill {
    margin-inline: -24px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .mf-ga-bill__tag { padding: 10px 16px 10px 14px; }
  .mf-ga-bill__tag-value { font-size: 16px; }
  .mf-ga-surprises__items { grid-template-columns: 1fr; }
  .mf-ga-surprises__items li { padding: 22px 0; }
  .mf-ga-surprises__items li + li { border-inline-start: 0; border-block-start: 1px solid var(--coal-400); }

  /* On a phone the stage is the phone: the desktop page goes, and the phone
     that hung off its corner becomes the whole picture, scaled up from the
     size it was drawn at so its type is readable. The two cards hang off
     the phone's edges the way they hung off the page's. The stage keeps
     side room so what hangs out is not clipped by the section. */
  .mf-ga-hero__stage { max-inline-size: 320px; margin-block: 28px 44px; }
  .mf-ga-serp { display: none; }
  .mf-ga-phone {
    position: relative;
    inset: auto;
    margin-inline: auto;
    zoom: 1.6;
  }
  /* Extra room under the phone's last rows: the actions card covers the
     phone's lower-right corner, and must cover placeholder, not the Call and
     Directions buttons that are the point of the phone. */
  .mf-ga-fcard-flag { inset-inline-end: -16px; inset-block-start: -20px; }
  .mf-ga-fcard-actions { inset-inline-end: -16px; inset-block-end: -30px; }
  .mf-ga-fcard-actions .mf-ga-fcard__inner { inline-size: 164px; padding: 11px 13px; }
  .mf-ga-hero__ctas .mf-btn { inline-size: 100%; justify-content: center; }

  .mf-ga-deck { padding: 20px 18px 22px; }
  .mf-ga-copy { grid-template-columns: 1fr; }
  /* The flags had no room to sit on the line; they list under it. */
  .mf-ga-monitor { display: grid; gap: 8px; }
  .mf-ga-monitor__mark { position: static; justify-self: start; }
  .mf-ga-report__stats li { grid-template-columns: 96px 1fr; }
  .mf-ga-landing { grid-template-columns: 1fr; }
  .mf-ga-kw li { grid-template-columns: minmax(0, 1fr) auto; }
  .mf-ga-kw__bar { display: none; }
}

@media (max-width: 480px) {
  .mf-ga-spend__value { font-size: 64px; }
}

/* The narrowest phones: the scaled phone would overrun the stage. */
@media (max-width: 360px) {
  .mf-ga-phone { zoom: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-ga-fcard.is-in .mf-bob { animation: none; }
  .mf-ga-bill__track { animation: none; flex-wrap: wrap; inline-size: auto; justify-content: center; gap: 10px 0; }
  .mf-ga-bill__pulse { animation: none; }
  .mf-ga-card::before, .mf-ga-card::after,
  .mf-ga-card .mf-chip-icon, .mf-ga-card__title, .mf-ga-card__body, .mf-ga-card__n { transition: none; }
  .is-live .mf-ga-slide { transition: none; }
  .mf-ga-phase:hover { transform: none; }
}