/* ==========================================================================
   Service-page template (packages + product pages)
   BUZZOID-DESIGN-SPEC.md sections 4.8, 6, 7, 8. Uses mf-ds.css tokens only.
   Markup: app/Views/frontend/packages_page.php, product_page.php,
           app/Views/partials/mf_service_body.php
   ========================================================================== */

/* Font fallbacks: the metric-matched "MF Display/Body Fallback" faces and the
   --font-* tokens come from mf-ds.css (no service-page duplicates, D-24). */

/* ---- Hero -------------------------------------------------------------- */
.mf-svc { background: var(--bg); }
.mf-svc .mf-svc-hero {
  position: relative;
  padding: 28px 0 48px;
  background:
    radial-gradient(60% 70% at 0% 0%, #FFF1F6 0%, rgba(255, 241, 246, 0) 70%),
    radial-gradient(50% 60% at 100% 10%, #FFF4EC 0%, rgba(255, 244, 236, 0) 70%),
    var(--bg);
}
@media (min-width: 992px) { .mf-svc .mf-svc-hero { padding: 56px 0 88px; } }

.mf-svc .mf-svc-hero__grid { display: grid; gap: 20px; grid-template-areas: "intro" "buy" "aside"; }
.mf-svc .mf-svc-hero__intro { grid-area: intro; min-width: 0; }
.mf-svc .mf-svc-hero__aside { grid-area: aside; min-width: 0; }
.mf-svc .mf-svc-buy { grid-area: buy; min-width: 0; }
@media (min-width: 992px) {
  .mf-svc .mf-svc-hero__grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "intro buy" "aside buy";
    grid-template-rows: auto 1fr;
    column-gap: 56px; row-gap: 8px;
  }
  .mf-svc .mf-svc-hero__intro { padding-top: 24px; }
}
@media (min-width: 1200px) { .mf-svc .mf-svc-hero__grid { column-gap: 80px; } }

.mf-svc .mf-svc-hero .mf-eyebrow { gap: 10px; color: var(--heading); }
.mf-svc .mf-svc-hero .mf-eyebrow .mf-plat { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; font-size: .8rem; letter-spacing: 0; }
.mf-svc .mf-svc-hero .mf-eyebrow .mf-plat i { color: #fff; }
.mf-svc .mf-svc-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); margin-bottom: 14px; overflow-wrap: anywhere; text-wrap: balance; }
/* D-24: a title that sits near the line edge can wrap to 2 lines in the
   fallback font and 1 line in Plus Jakarta Sans (or the reverse), moving the
   buy card when the web font arrives. Balanced wrapping keeps the break away
   from the edge, and from 576px the title always reserves two lines (+.3em:
   the fallback font's taller line box around the inline platform icon). */
@media (min-width: 576px) { .mf-svc .mf-svc-title { min-height: calc(2lh + .3em); } }
.mf-svc .mf-svc-hero__lead { margin-bottom: 0; }
.mf-svc .mf-svc-hero__ticks { margin: 4px 0 0; }
@media (min-width: 576px) and (max-width: 991.98px) { .mf-svc .mf-svc-hero__ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
  .mf-svc .mf-svc-hero__aside { padding: 18px; border-radius: var(--r-card-lg); background: var(--surface); }
}

/* ---- Buy card ---------------------------------------------------------- */
.mf-svc .mf-svc-buy {
  position: relative;
  background: #fff;
  border-radius: var(--r-card-xl);
  box-shadow: var(--float-shadow);
  padding: 20px 16px;
}
@media (min-width: 576px) { .mf-svc .mf-svc-buy { padding: 28px; } }
.mf-svc .mf-svc-buy > * + * { margin-top: 18px; }

.mf-svc .mf-svc-quick__title { font: 800 1.375rem/1.25 var(--font-display); color: var(--heading); margin: 0 0 6px; letter-spacing: -.02em; }
.mf-svc .mf-svc-quick__copy p { margin: 0; color: var(--body); font-size: .9375rem; line-height: 1.6; }

.mf-svc .mf-svc-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 .9375rem/1.3 var(--font-display); color: var(--heading); }
.mf-svc .mf-svc-step__n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--heading); color: #fff; font: 800 .8125rem/1 var(--font-display); }
.mf-svc .mf-svc-step__aside { margin-left: auto; font: 500 .8125rem/1.3 var(--font-body); color: var(--muted); }

/* Quantity tiles (spec 4.8): qty big, price; selected = solid coral */
.mf-svc .mf-qty-tiles { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
@media (min-width: 576px) { .mf-svc .mf-qty-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; } }
.mf-svc .mf-qty-tiles > li { display: flex; min-width: 0; }
.mf-svc .mf-qty-tile {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 76px; padding: 14px 6px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); color: var(--heading); text-align: center; text-decoration: none;
  box-shadow: 0 2px 0 var(--border);
  cursor: pointer; touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .12s ease, transform .12s ease;
}
.mf-svc .mf-qty-tile:hover { border-color: var(--border-strong); background: #fff; color: var(--heading); text-decoration: none; }
.mf-svc .mf-qty-tile:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border); }
.mf-svc .mf-qty-tile__qty { font: 800 1.3125rem/1.1 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.mf-svc .mf-qty-tile__price { font: 600 .875rem/1.25 var(--font-body); color: var(--body); font-variant-numeric: tabular-nums; }
.mf-svc .mf-qty-tile__unit { font: 500 .75rem/1.3 var(--font-body); color: var(--muted); text-wrap: balance; }
.mf-svc .mf-qty-tile[aria-current="true"],
.mf-svc .mf-qty-tile[aria-current="true"]:hover {
  background: var(--cta-strong); border-color: var(--cta-edge); color: #fff; box-shadow: 0 3px 0 var(--cta-press);
}
.mf-svc .mf-qty-tile[aria-current="true"] .mf-qty-tile__price,
.mf-svc .mf-qty-tile[aria-current="true"] .mf-qty-tile__unit { color: #fff; }
.mf-svc .mf-qty-tile__ribbon {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--heading); color: #fff;
  font: 700 .75rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: 0 0 0 2px #fff;
}
.mf-svc .mf-qty-tile__ribbon--best { background: #146C49; }
.mf-svc .mf-qty-tiles { padding-top: 14px; row-gap: 18px; }
@media (max-width: 575.98px) { .mf-svc .mf-qty-tiles { column-gap: 10px; } .mf-svc .mf-qty-tile__ribbon { padding: 1px 6px; } }
@media (max-width: 380px) {
  .mf-svc .mf-qty-tile__qty { font-size: 1.1875rem; }
}
/* M-06: below 360px three tiles are 80px wide, too narrow for a 12px
   "Recommended" ribbon, so the grid goes to two even columns instead of
   shrinking the text. */
@media (max-width: 359.98px) {
  .mf-svc .mf-qty-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .mf-svc .mf-qty-tile { transition: none; } }

/* Price box */
.mf-svc .mf-pricebox { margin-top: 20px; padding: 18px; border-radius: var(--r-card-lg); background: var(--surface-blue); box-shadow: inset 0 0 0 1px #E4EDF8; }
@media (min-width: 576px) { .mf-svc .mf-pricebox { padding: 22px; } }
.mf-svc .mf-pricebox__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mf-svc .mf-pricebox__name { font: 700 .9375rem/1.35 var(--font-display); color: var(--heading); }
.mf-svc .mf-pricebox__rec { font-size: .75rem; padding: 3px 10px; }
.mf-svc .mf-pricebox__rec i { color: var(--cta-on-dark); font-size: .6875rem; }
.mf-svc .mf-pricebox__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.mf-svc .mf-pricebox__amount { font: 800 2.5rem/1.05 var(--font-display); color: var(--heading); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mf-svc .mf-pricebox__unit { font: 500 .875rem/1.3 var(--font-body); color: var(--muted); }
.mf-svc .mf-pricebox__feats { margin: 0 0 18px; gap: 8px; }
.mf-svc .mf-pricebox__feats li { font-size: .9063rem; }
.mf-svc .mf-pricebox__feats[hidden] { display: none; }
/* B-02: on narrow phones this line wraps to 2 lines ("One-time purchase. No
   subscription." doesn't fit in ~256px at 13px -- live-measured, no font
   size that stays legible closes that gap). align-items: center then
   centres the icon on the whole wrapped block's height, i.e. between the two
   text lines instead of next to the first one (live-reported as "icon and
   text look disconnected"). flex-start keeps the icon pinned to the top of
   the line box; the small margin-top nudges it down to the visual centre of
   that first line instead of its ascent. */
.mf-svc .mf-pricebox__note { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--muted); text-align: center; }
.mf-svc .mf-pricebox__note i { flex: 0 0 auto; margin-top: .2em; color: var(--success); }
.mf-svc .mf-pricebox__note[hidden], .mf-svc .mf-pricebox__rec[hidden] { display: none; }

/* Trust row (product + packages). Even grid, never an orphan row, every label on
   one line. Sized by its own width (container query), not the viewport, because
   the buy column changes width at every breakpoint:
   < 380px  two content-sized columns (short claims left, long claims right)
   >= 380px two equal columns   >= 560px three equal columns (6-item rows only)
   Icons are calm brand accents: coral glyph on a soft pink tile. */
.mf-svc .mf-svc-trust-wrap { container-type: inline-size; margin-top: 22px; }
.mf-svc .mf-svc-trust { list-style: none; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 12px 10px; }
.mf-svc .mf-svc-trust li { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 .78125rem/1.25 var(--font-body); color: var(--heading); white-space: nowrap; }
.mf-svc .mf-svc-trust i { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; background: var(--cta-tint); box-shadow: inset 0 0 0 1px rgba(248, 58, 90, .16); color: var(--cta-edge); font-size: .65rem; }
@container (min-width: 380px) {
  .mf-svc .mf-svc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 14px 20px; }
  .mf-svc .mf-svc-trust li { gap: 9px; font-size: .8125rem; }
  .mf-svc .mf-svc-trust i { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; font-size: .6875rem; }
}
@container (min-width: 560px) { .mf-svc .mf-svc-trust:not(.mf-svc-trust--4) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 299px) {
  /* M-02: at 320 two nowrap columns needed 326px; one even column always fits */
  .mf-svc .mf-svc-trust { grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; }
  .mf-svc .mf-svc-trust li { font-size: .8125rem; }
}
.mf-svc .mf-svc-trust { max-width: 100%; }
.mf-svc .mf-svc-buy .mfuk-free-likes-promo { margin: 26px 0 0; }
.mf-svc .mf-svc-empty { padding: 32px 16px; border-radius: var(--r-card-lg); background: var(--surface); text-align: center; }
.mf-svc .mf-svc-empty p { margin: 0; color: var(--body); }

/* ---- Sections (mf_service_body.php) ------------------------------------ */
.mf-svc .mf-svc-sec { overflow-x: clip; }
.mf-svc .mf-svc-sec--blue { background: var(--surface-blue); }
.mf-svc .mf-svc-lucky { margin-top: -20px; margin-bottom: 8px; position: relative; }
@media (min-width: 992px) { .mf-svc .mf-svc-lucky { margin-top: -44px; } }
.mf-svc .mf-svc-lucky .mf-promo { align-items: flex-start; padding: 18px 20px; box-shadow: 0 0 0 1px rgba(41, 47, 59, .06); }
.mf-svc .mf-svc-lucky__title { font: 700 1.0625rem/1.35 var(--font-display); color: var(--heading); margin: 0 0 4px; }
.mf-svc .mf-svc-lucky__text p { margin: 0; font-size: .9375rem; color: var(--body); }

.mf-svc .mf-svc-lead p { margin: 0 0 12px; }
.mf-svc .mf-svc-lead p:last-child { margin-bottom: 0; }
.mf-svc .mf-section__head .mf-svc-lead { max-width: 680px; }
.mf-svc .mf-section__head--left .mf-svc-lead { margin-left: 0; }

/* Readable prose (DB copy) */
.mf-svc .mf-svc-prose { color: var(--body); font-size: 1rem; line-height: 1.7; }
.mf-svc .mf-svc-prose p { margin: 0 0 14px; }
.mf-svc .mf-svc-prose > :last-child, .mf-svc .mf-svc-prose p:last-child { margin-bottom: 0; }
.mf-svc .mf-svc-prose a, .mf-svc .mf-acc__body a, .mf-svc .mf-svc-lead a, .mf-svc .mf-svc-quick a, .mf-svc .mf-review a, .mf-svc .mf-svc-card a, .mf-svc .mf-guarantee a {
  color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.mf-svc .mf-svc-prose a:hover, .mf-svc .mf-acc__body a:hover, .mf-svc .mf-svc-lead a:hover { text-decoration-color: var(--heading); }
.mf-svc .mf-svc-sec a:not([class]), .mf-svc .mf-svc-hero a:not([class]), .mf-svc .mf-svc-compare th a, .mf-svc .mf-steps a, .mf-svc .mf-step a {
  color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.mf-svc .mf-svc-sec a:not([class]):hover, .mf-svc .mf-svc-compare th a:hover, .mf-svc .mf-steps a:hover { color: var(--heading); text-decoration-color: var(--cta-edge); }
/* Comparison header links are block-level targets (M-07: were 36px tall) */
.mf-svc .mf-svc-compare th a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 2px 4px; }
.mf-svc .mf-svc-prose strong { color: var(--heading); }
.mf-svc .mf-svc-prose em { color: var(--muted); }
.mf-svc .mf-svc-sub { margin: 24px 0 8px; }
.mf-svc .mf-svc-ticks { margin: 16px 0; }
.mf-svc .mf-svc-ticks--big li { font-size: 1rem; }
.mf-svc .mf-svc-article + .mf-svc-article { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); }
.mf-svc .mf-svc-article .mf-h3 { color: var(--heading); }

/* Two-column: sticky heading + content */
.mf-svc .mf-svc-two { display: grid; gap: 24px; }
@media (min-width: 992px) {
  .mf-svc .mf-svc-two { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .mf-svc .mf-svc-two__side { position: sticky; top: 110px; }
}
.mf-svc .mf-svc-two .mf-section__head { margin-bottom: 0; }

/* Titled list items -> small feature cards */
.mf-svc .mf-svc-cards { display: grid; gap: 12px; margin: 20px 0; }
@media (min-width: 768px) { .mf-svc .mf-svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.mf-svc .mf-svc-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-card-lg); background: #fff; box-shadow: var(--card-shadow); }
.mf-svc .mf-bg-surface .mf-svc-card { background: #fff; }
.mf-svc .mf-svc-card .mf-feature__icon { background: var(--card-lilac); color: var(--heading-alt); }
.mf-svc .mf-svc-card__title { font: 700 1rem/1.35 var(--font-display); color: var(--heading); margin: 0 0 4px; }
.mf-svc .mf-svc-card__text { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--body); }

/* Why choose us: icon accordions + art */
.mf-svc .mf-svc-split { align-items: start; }
@media (min-width: 992px) { .mf-svc .mf-svc-split .mf-split__visual { position: sticky; top: 110px; } }
.mf-svc .mf-svc-acc .mf-acc > summary { font-size: 1rem; }
.mf-svc .mf-svc-acc .mf-acc__body { padding-left: 52px; }
@media (max-width: 575.98px) { .mf-svc .mf-svc-acc .mf-acc__body { padding-left: 0; padding-right: 0; } }
.mf-svc .mf-svc-art { max-width: 440px; }
.mf-svc .mf-svc-sec--included .mf-art__blob { background: var(--band-peach); opacity: 1; }
.mf-svc .mf-svc-sec--included .mf-art__blob--alt { background: var(--card-lilac); opacity: .8; }
@media (max-width: 991.98px) { .mf-svc .mf-svc-sec--included .mf-split__visual { display: none; } }

/* How it works */
.mf-svc .mf-svc-steps-card { padding: 12px 20px; }
@media (min-width: 576px) { .mf-svc .mf-svc-steps-card { padding: 16px 28px; } }
.mf-svc .mf-svc-steps-card > p { margin: 14px 0; }
.mf-svc .mf-svc-steps .mf-step__text { line-height: 1.6; }
.mf-svc .mf-step__text--solo { margin-top: 7px !important; color: var(--heading) !important; }
.mf-svc .mf-svc-steps-card .mf-svc-steps + .mf-svc-steps { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Reviews: one .mf-svc-review per `reviews` row (partials/mf_service_body.php).
   Tokens are site_style.css's (--ink*, --bg-*, --line-*, --green*). Flat white
   card, hairline border, no shadow; nothing here uses the brand red. */
.mf-svc .mf-svc-review {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; margin: 0; padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-soft);
  box-shadow: none;
  color: var(--ink-soft);
}
.mf-svc .mf-svc-review__head { display: flex; align-items: flex-start; gap: 12px; }
.mf-svc .mf-svc-review__avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font: 700 1.0625rem/1 var(--font-display); text-transform: uppercase;
}
.mf-svc .mf-svc-review__id { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mf-svc .mf-svc-review__name { font: 700 1rem/1.3 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.mf-svc .mf-svc-review__verified {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-ink);
  font: 600 .75rem/1.3 var(--font-body); text-align: left;
}
.mf-svc .mf-svc-review__verified i { font-size: .625rem; }
.mf-svc .mf-svc-review__plat {
  flex: 0 0 auto; margin-left: auto; display: inline-grid; place-items: center;
  width: 24px; height: 24px; color: var(--ink-muted); font-size: 1.125rem; line-height: 1;
}
.mf-svc .mf-svc-review__plat svg { width: 16px; height: 16px; fill: currentColor; }
.mf-svc .mf-svc-review__rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mf-svc .mf-svc-review__stars { color: var(--green); letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.mf-svc .mf-svc-review__time { font-size: .8125rem; line-height: 1.3; color: var(--ink-muted); white-space: nowrap; }
.mf-svc .mf-svc-review__quote { margin: 0; padding: 0; border: 0; font: 400 .9688rem/1.65 var(--font-body); color: var(--ink-soft); overflow-wrap: anywhere; }
.mf-svc .mf-svc-review__quote p { margin: 0; }
.mf-svc .mf-svc-review__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-hair); }
.mf-svc .mf-svc-review__bought {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: calc(var(--radius-soft) - 8px);
  background: var(--bg-dark); font-size: .8125rem; line-height: 1.4; color: var(--ink-soft);
}
.mf-svc .mf-svc-review__bought i { flex: 0 0 auto; color: var(--ink-muted); font-size: .8125rem; }
.mf-svc .mf-svc-review__bought strong { font-weight: 700; color: var(--ink); }
/* Below the tablet breakpoint the shared .mf-reviews carousel column is ~82% wide;
   at 375px that leaves the name block too little room for the verified badge,
   so the service-page cards take a little more of the row (next card still peeks). */
@media (max-width: 767.98px) { .mf-svc .mf-svc-reviews { grid-auto-columns: minmax(280px, 88%); } }
@media (min-width: 992px) { .mf-svc .mf-svc-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mf-svc .mf-svc-more { margin-top: 20px; }
.mf-svc .mf-svc-more > summary { list-style: none; display: flex; width: fit-content; min-height: 44px; margin: 0 auto; }
.mf-svc .mf-svc-more > summary::-webkit-details-marker { display: none; }
.mf-svc .mf-svc-more[open] > summary { display: none; }
.mf-svc .mf-svc-after { margin-top: 24px; }

/* FAQ */
.mf-svc .mf-svc-faq-help { margin: 16px 0 0; }
.mf-svc .mf-svc-sec--faq .mf-acc__q { font: 700 1rem/1.4 var(--font-display); }

/* Comparison + pricing tables */
.mf-svc .mf-svc-compare-card { padding: 8px 12px; }
@media (min-width: 576px) { .mf-svc .mf-svc-compare-card { padding: 16px 24px; } }
.mf-svc .mf-svc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mf-svc .mf-svc-compare { min-width: 520px; }
.mf-svc .mf-svc-compare td.is-them { color: var(--muted); }
.mf-svc .mf-svc-compare th.is-us { color: var(--heading); }
.mf-svc .mf-svc-compare .is-us { background: var(--cta-soft); }
.mf-svc .mf-svc-compare .mf-yes { margin-right: 4px; }
.mf-svc .mf-svc-compare td:first-child, .mf-svc .mf-svc-compare th:first-child { width: 40%; }

.mf-svc .mf-svc-price { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; background: #fff; border-radius: var(--r-card-lg); box-shadow: var(--card-shadow); overflow: hidden; }
.mf-svc .mf-svc-price th { padding: 14px 16px; background: var(--surface-2); font: 700 .8125rem/1.3 var(--font-display); color: var(--heading); text-align: left; }
.mf-svc .mf-svc-price td { padding: 14px 16px; border-top: 1px solid var(--border); color: var(--body); vertical-align: middle; }
.mf-svc .mf-svc-price td:first-child { font-weight: 700; color: var(--heading); white-space: nowrap; }
.mf-svc .mf-svc-price td a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-btn); background: #fff; box-shadow: 0 0 0 1px var(--border-strong), var(--press); color: var(--heading); font-weight: 700; font-size: .8125rem; text-decoration: none; white-space: nowrap; }
.mf-svc .mf-svc-price td a:hover { background: var(--surface); }
.mf-svc .mf-svc-price tbody tr:hover td { background: #FCFCFD; }
@media (max-width: 767.98px) {
  .mf-svc .mf-svc-price, .mf-svc .mf-svc-price tbody, .mf-svc .mf-svc-price tr, .mf-svc .mf-svc-price td { display: block; width: 100%; }
  .mf-svc .mf-svc-price { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .mf-svc .mf-svc-price thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mf-svc .mf-svc-price tr { margin-bottom: 12px; padding: 6px 16px; border-radius: var(--r-card-lg); background: #fff; box-shadow: var(--card-shadow); }
  .mf-svc .mf-svc-price td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; text-align: right; white-space: normal !important; }
  .mf-svc .mf-svc-price tr td:first-child { border-top: 0; }
  .mf-svc .mf-svc-price td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; font: 600 .8125rem/1.3 var(--font-body); color: var(--muted); text-align: left; }
  .mf-svc .mf-svc-price tbody tr:hover td { background: transparent; }
}
.mf-svc .mf-svc-pricing > p { margin: 16px 0 0; font-size: .9375rem; color: var(--muted); text-align: center; }

/* Safety (dark indigo) */
/* Safety (dark indigo): heading beside ONE panel of stacked rows, hairline
   separated, so uneven chunks never leave stretched half-empty cards. */
.mf-svc .mf-svc-safety { border-radius: var(--r-card-lg); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.mf-svc .mf-svc-safety__item { display: flex; gap: 16px; align-items: flex-start; padding: 24px 28px; }
.mf-svc .mf-svc-safety__item + .mf-svc-safety__item { border-top: 1px solid rgba(255, 255, 255, .09); }
.mf-svc .mf-dark .mf-svc-safety__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 143, 163, .12); color: var(--cta-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 143, 163, .2); }
.mf-svc .mf-svc-safety__item .mf-svc-prose { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.mf-svc .mf-svc-safety .mf-svc-ticks, .mf-svc .mf-svc-safety .mf-svc-cards { margin: 14px 0 0; }
.mf-svc .mf-svc-safety .mf-svc-cards { grid-template-columns: 1fr; gap: 14px; }
/* Sub-points inside a safety row: flat, coral edge, no second icon */
.mf-svc .mf-dark .mf-svc-safety .mf-svc-card { padding: 2px 0 2px 16px; border-radius: 0; background: none; box-shadow: inset 2px 0 0 rgba(255, 143, 163, .55); }
.mf-svc .mf-svc-safety .mf-svc-card .mf-feature__icon { display: none; }
.mf-svc .mf-svc-safety__art { display: none; }
@media (min-width: 992px) { .mf-svc .mf-svc-safety__art { display: block; max-width: 300px; margin: 40px 0 0; } }
@media (max-width: 575.98px) { .mf-svc .mf-svc-safety__item { flex-direction: column; gap: 12px; padding: 20px 18px; } .mf-svc .mf-dark .mf-svc-safety__icon { flex-basis: 36px; width: 36px; height: 36px; font-size: .875rem; } .mf-svc .mf-svc-safety__item .mf-svc-prose { padding-top: 0; } }

/* Every text element inside a dark section: light-on-dark palette, AA or better
   on --dark-indigo / --dark-charcoal (body #D3D5E0 ~ 11:1, muted #B8BACB ~ 8:1). */
.mf-svc .mf-dark .mf-svc-prose, .mf-svc .mf-dark .mf-svc-prose :is(p, li, td, dd, dt, blockquote, figcaption, span),
.mf-svc .mf-dark .mf-ticks li, .mf-svc .mf-dark .mf-svc-card__text { color: #D3D5E0; }
.mf-svc .mf-dark :is(h3, h4, h5, th, strong, b), .mf-svc .mf-dark .mf-svc-card__title, .mf-svc .mf-dark .mf-svc-prose strong { color: #fff; }
.mf-svc .mf-dark em, .mf-svc .mf-dark .mf-svc-prose em, .mf-svc .mf-dark small { color: #B8BACB; }
.mf-svc .mf-dark a:not(.mf-btn), .mf-svc .mf-dark .mf-svc-prose a { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.mf-svc .mf-dark a:not(.mf-btn):hover { text-decoration-color: var(--cta-on-dark); }
.mf-svc .mf-dark :is(table, td, th) { border-color: rgba(255, 255, 255, .12); background-color: transparent; }
.mf-svc .mf-dark blockquote { border-left-color: var(--cta-on-dark); }
.mf-svc .mf-dark .mf-svc-card { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.mf-svc .mf-dark .mf-svc-card .mf-feature__icon { background: rgba(255, 143, 163, .12); color: var(--cta-on-dark); }

/* Guarantees */
.mf-svc .mf-svc-sec--guarantees .mf-guarantee__text { font-size: .9375rem; line-height: 1.65; }
.mf-svc .mf-svc-sec--guarantees .mf-guarantee__text p { margin: 0 0 10px; }

/* Boost your presence (related services) */
.mf-svc .mf-svc-boost { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .mf-svc .mf-svc-boost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mf-svc .mf-svc-boost { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mf-svc .mf-svc-boost > li { display: flex; min-width: 0; }
.mf-svc .mf-svc-boost__row {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: var(--r-card-lg); background: #fff; box-shadow: 0 0 0 1px var(--border), 0 3px 0 var(--border);
  color: var(--heading); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.mf-svc .mf-svc-boost__row:hover { color: var(--heading); text-decoration: none; box-shadow: 0 0 0 1px var(--border-strong), 0 3px 0 var(--border-strong); }
.mf-svc .mf-svc-boost__row:hover .mf-arrow-btn { background: var(--cta); color: #fff; }
.mf-svc .mf-svc-boost__row:active { transform: translateY(2px); box-shadow: 0 0 0 1px var(--border-strong), 0 1px 0 var(--border-strong); }
.mf-svc .mf-svc-boost__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; color: #fff; font-size: 1rem; }
.mf-svc .mf-svc-boost__copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mf-svc .mf-svc-boost__copy strong { font: 700 .9688rem/1.3 var(--font-display); }
.mf-svc .mf-svc-boost__copy span { font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.mf-svc .mf-svc-boost__row .mf-arrow-btn { margin-left: auto; }
.mf-svc .mf-svc-boost__plain { padding: 16px; border-radius: var(--r-card-lg); background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: .9375rem; }
.mf-svc .mf-svc-reading__title { margin-top: 36px; }
.mf-svc .mf-svc-reading { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf-svc .mf-svc-reading li { position: relative; padding-left: 28px; font-size: .9375rem; color: var(--body); }
.mf-svc .mf-svc-reading li::before { content: "\f02d"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--heading-alt); font-size: .85rem; }
.mf-svc .mf-svc-reading a { color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.mf-svc .mf-svc-footnote { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .9375rem; color: var(--muted); }

/* Section rhythm on phones: a little tighter than the home page bands */
@media (max-width: 767.98px) {
  .mf-svc .mf-svc-sec.mf-section { padding-block: 48px; }
  .mf-svc .mf-svc-sec .mf-section__head { margin-bottom: 24px; }
}

/* ---- Refinements ------------------------------------------------------- */
/* Package bullets sit as a compact wrap row inside the price box */
.mf-svc .mf-pricebox__feats { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mf-svc .mf-pricebox__feats li { padding-left: 24px; font-size: .875rem; }
.mf-svc .mf-pricebox__feats li::before { width: 16px; height: 16px; top: 2px; }
.mf-svc .mf-pricebox__feats li::after { left: 4.5px; top: 6px; width: 7px; height: 4px; }

/* Hero art: desktop only, fills the left column under the ticks */
.mf-svc .mf-svc-hero-art { display: none; }
@media (min-width: 992px) {
  .mf-svc .mf-svc-hero-art { display: block; max-width: 420px; margin: 28px 0 0; }
  .mf-svc .mf-svc-hero-art .mf-art__blob { background: var(--band-peach); opacity: 1; }
  .mf-svc .mf-svc-hero-art .mf-art__blob--alt { background: var(--band-lavender); opacity: .7; }
  .mf-svc .mf-svc-hero-art .mf-art__disc { width: 40%; font-size: 4.25rem; }
}
.mf-svc .mf-svc-sec--included .mf-art__phone-row { font-size: .8125rem; }
.mf-svc .mf-svc-sec--included .mf-art__phone-row.is-done i { background: var(--success); }
.mf-svc .mf-svc-art__plat { left: auto; right: 2%; top: 8%; }
.mf-svc .mf-svc-art__plat .mf-plat { width: 26px; height: 26px; flex-basis: 26px; font-size: .75rem; border-radius: 8px; }
.mf-svc .mf-svc-art__plat .mf-plat i { background: none; width: auto; height: auto; color: #fff; }

/* Reviews: three-up grid on desktop (beats mf-ds auto-fit) */
@media (min-width: 992px) {
  .mf-svc .mf-reviews.mf-svc-reviews { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
.mf-svc .mf-svc-more .mf-svc-reviews { margin-top: 16px; }
.mf-svc .mf-svc-pricing > p a { color: var(--heading); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.mf-svc .mf-svc-cell { display: inline; }

/* Phones: the hero tick list repeats the buy card's trust row, so it hides */
@media (max-width: 991.98px) { .mf-svc .mf-svc-hero__aside { display: none; } }
/* M-09: body copy stays >= 15px on phones (was 14px) */
@media (max-width: 575.98px) { .mf-svc .mf-svc-quick__copy p { font-size: .9375rem; } }

/* Phones: comparison table becomes one card per row (no sideways scroll) */
@media (max-width: 767.98px) {
  .mf-svc .mf-svc-compare-card { padding: 0; background: transparent; box-shadow: none; }
  .mf-svc .mf-svc-compare { min-width: 0; display: block; }
  /* M-07: header row removed on phones (each card row carries its own data-label);
     a 1px-clipped thead still left its service links focusable but invisible */
  .mf-svc .mf-svc-compare thead { display: none; }
  .mf-svc .mf-svc-compare tbody, .mf-svc .mf-svc-compare tr, .mf-svc .mf-svc-compare td { display: block; width: 100% !important; }
  .mf-svc .mf-svc-compare tr { margin-bottom: 12px; padding: 14px 16px; border-radius: var(--r-card-lg); background: #fff; box-shadow: var(--card-shadow); }
  .mf-svc .mf-svc-compare td { padding: 8px 0; border: 0 !important; border-radius: 0 !important; text-align: left; background: transparent; }
  .mf-svc .mf-svc-compare td:first-child { padding-top: 0; font: 700 .9688rem/1.35 var(--font-display); }
  .mf-svc .mf-svc-compare td.is-us, .mf-svc .mf-svc-compare td.is-them { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: baseline; font-size: .9375rem; }
  .mf-svc .mf-svc-compare td.is-us { margin-top: 4px; padding: 8px 10px; border-radius: 10px !important; background: var(--cta-soft); box-shadow: inset 0 0 0 1.5px var(--cta-edge); }
  .mf-svc .mf-svc-compare td.is-them { padding: 8px 10px; }
  .mf-svc .mf-svc-compare td.is-us::before, .mf-svc .mf-svc-compare td.is-them::before { content: attr(data-label); font: 600 .75rem/1.3 var(--font-body); color: var(--muted); }
  .mf-svc .mf-svc-compare td.is-us::before { color: var(--heading); }
  .mf-svc .mf-svc-compare td.is-us .mf-yes { display: none; }
}
.mf-svc .mf-svc-sec--related .mf-section__head .mf-svc-lead { max-width: 760px; }
.mf-svc .mf-svc-art__plat { top: auto; right: auto; left: 2%; bottom: 8%; }
@media (min-width: 992px) { .mf-svc .mf-svc-hero__aside { margin-top: 16px; } }

/* ==========================================================================
   Mega Followers signature details (owner direction):
   - the logo's lightning-arrow, used subtly (tick markers, eyebrow glyph,
     section rule, selected-tile accent)
   - the logo's pink -> orange gradient (#FA1593 -> #FB5C06): the action
     colour on primary buttons (mf-ds.css --cta-gradient), and elsewhere a
     small accent only: underline, top edge, glow, badge edge. Never body text.
   ========================================================================== */
.mf-svc {
  --mf-grad: var(--cta-gradient);
  --mf-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5 20.6 10.9 17.9 8.2 12.9 13.4 14.8 14.7 3 21.5 10.1 12.4 8.3 11.3 15.7 6.1 13.1 3.4Z'/%3E%3C/svg%3E");
}

/* Lightning-arrow tick markers */
.mf-svc .mf-ticks li { padding-left: 28px; }
.mf-svc .mf-ticks li::before {
  top: 2px; width: 18px; height: 18px; border-radius: 0;
  background: var(--cta);
  -webkit-mask: var(--mf-bolt) center / contain no-repeat; mask: var(--mf-bolt) center / contain no-repeat;
}
.mf-svc .mf-ticks li::after { content: none; }
.mf-svc .mf-ticks--green li::before { background: var(--success); }
.mf-svc .mf-pricebox__feats li { padding-left: 22px; }
.mf-svc .mf-pricebox__feats li::before { width: 15px; height: 15px; top: 2px; }

/* Eyebrow glyph: the bolt in the brand gradient */
.mf-svc .mf-bolt { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; background: var(--mf-grad); -webkit-mask: var(--mf-bolt) center / contain no-repeat; mask: var(--mf-bolt) center / contain no-repeat; }
.mf-svc .mf-bolt--lg { width: 22px; height: 22px; flex-basis: 22px; }

/* H1 highlight word: gradient underline stroke */
.mf-svc .mf-svc-title .mf-hl { position: relative; display: inline-block; }
.mf-svc .mf-svc-title .mf-hl::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -.02em; height: .11em; min-height: 4px;
  border-radius: 99px; background: var(--mf-grad); opacity: .9;
}

/* Buy card: gradient top edge + soft brand glow behind it */
.mf-svc .mf-svc-hero__grid { isolation: isolate; }
.mf-svc .mf-svc-buy::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--mf-grad);
}
.mf-svc .mf-svc-buy::after {
  content: ""; position: absolute; z-index: -1; inset: 18% 8% -4% 8%; border-radius: 40px;
  background: linear-gradient(120deg, rgba(250, 21, 147, .20), rgba(251, 92, 6, .20)); filter: blur(40px);
}

/* Selected quantity tile: tiny white lightning-arrow in the corner */
.mf-svc .mf-qty-tile[aria-current="true"]::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 13px; height: 13px; background: #fff; opacity: .9;
  -webkit-mask: var(--mf-bolt) center / contain no-repeat; mask: var(--mf-bolt) center / contain no-repeat;
}

/* Ribbons: dark pill with a gradient edge */
.mf-svc .mf-qty-tile__ribbon {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--heading), var(--heading)) padding-box, var(--mf-grad) border-box;
  box-shadow: 0 0 0 2px #fff;
}
.mf-svc .mf-qty-tile__ribbon--best { background: linear-gradient(#146C49, #146C49) padding-box, var(--mf-grad) border-box; }

/* Section rule: hairline with the lightning-arrow in a gradient-edged disc */
.mf-svc .mf-svc-rule { position: relative; height: 1px; margin: 0 0 48px; background: var(--border); }
.mf-svc .mf-svc-rule::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--mf-grad) border-box;
}
.mf-svc .mf-svc-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%);
  background: var(--mf-grad); -webkit-mask: var(--mf-bolt) center / contain no-repeat; mask: var(--mf-bolt) center / contain no-repeat;
}
.mf-svc .mf-bg-surface .mf-svc-rule::before { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--mf-grad) border-box; }

/* Payment logos under the CTA (shared partial, when present) */
.mf-svc .mf-svc-pay { margin-top: 12px; display: flex; justify-content: center; container-type: inline-size; }
/* Never leave a 2-logo orphan row under the CTA: 10 in one row when they fit, else an even 5 + 5 */
@container (max-width: 439px) { .mf-svc .mf-svc-pay .mf-paymethods__list { display: grid; grid-template-columns: repeat(5, var(--pm-w)); } }

/* ---- Product unavailable ---------------------------------------------- */
.mf-svc .mf-unavail { padding-block: 64px 96px; }
.mf-svc .mf-unavail__card { position: relative; max-width: 640px; margin: 0 auto; padding: 40px 24px; border-radius: var(--r-card-xl); background: #fff; box-shadow: var(--float-shadow); text-align: center; }
@media (min-width: 576px) { .mf-svc .mf-unavail__card { padding: 48px 40px; } }
.mf-svc .mf-unavail__card::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--mf-grad); }
.mf-svc .mf-unavail__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 18px; color: #fff; font-size: 1.75rem; }
.mf-svc .mf-unavail__icon svg { width: 1em; height: 1em; }
.mf-svc .mf-unavail__notice { margin: 20px 0 28px; padding: 20px; border-radius: var(--r-card-lg); background: var(--band-butter); }
.mf-svc .mf-unavail__notice p { margin: 0; color: var(--body); }
.mf-svc .mf-unavail__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 575.98px) { .mf-svc .mf-unavail__actions .mf-btn { width: 100%; } }

/* ---- QA fixes (M-06 / M-07) ------------------------------------------- */
/* "Free bonus" tag on the 50-free-likes perk card: 11px -> 12px here */
.mf-svc .mfuk-free-likes-promo__tag { font-size: .75rem; }
/* M-09: perk-card copy line (mf-extras.css sets 13px) -> 15px on service pages */
.mf-svc .mfuk-free-likes-promo__copy > span { font-size: .9375rem; }
/* M-07: the FAQ "Contact our support team" link sat 3px under the last
   question; give it a full 44px target and clear space */
.mf-svc .mf-svc-faq-help { margin-top: 20px; }
.mf-svc .mf-svc-faq-help a { display: inline-flex; align-items: center; min-height: 44px; }
/* Selected tile with a ribbon: the corner bolt moves to the bottom corner so it
   never touches the (now larger, 12px) ribbon */
.mf-svc .mf-qty-tile[aria-current="true"]:has(.mf-qty-tile__ribbon)::after { top: auto; bottom: 8px; }