/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · pages/managed-ads.css
   Managed ads (done for you): Meta Ads and Google Ads management on one landing, one quote.html with a
   platform selector and one thank-you.html.
   Part A: Meta components, part B: Google components (both carried over unchanged), part C: the merged page.
   ===================================================================== */

/* ---------- A. Meta Ads components ---------- */
/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · Done-For-You Meta Ads management (page styles)
   Loaded after site.css + services.css on meta-ads-management/*.html only.
   Tokens only (--y --ink --n* --r-* --gap --pad --ease-out --spring-pop).

   Contents
    1  Landing hero: H1 variants, platform badge stickers on the portrait tile
    2  Proof: logo ribbon sizes, the "$5,000/day" stat tile
    3  Sound familiar? latching symptom keys + the live tally (the page's one authored moment)
    4  What I take off your plate (bento)
    5  How we work, price, testimonials, about, fit, safety net
    6  quote.html: intro line, option grids, summary extras
    7  thank-you.html: route headlines, the review ticket (stamped), route C card
    8  Motion + reduced motion
   ===================================================================== */

/* ---------- 1. Landing hero ---------- */

/* Meta, Facebook, Instagram as three round stickers on the portrait tile: the channel, at a glance */
.meta-badges {
  position: absolute; z-index: 5; left: 14px; bottom: 14px;
  list-style: none; padding: 0; margin: 0; display: flex;
}
.meta-badges li {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -6px;
  background: #fff; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(var(--rot, 0deg));
}
.meta-badges img { width: 72%; height: auto; }
@media (min-width: 768px) {
  .meta-badges { left: 18px; bottom: 18px; }
  .meta-badges li { width: 52px; height: 52px; }
}

/* ---------- 2. Proof ---------- */
/* this ribbon carries 7 logos (not the homepage's 11), so sizes come from classes, not nth-child */
.meta-ribbons .ribbon--logos li img { height: 24px; }
.meta-ribbons .ribbon--logos li.is-tall img { height: 32px; }
.meta-ribbons .ribbon--logos li.is-mark img { height: 38px; }
@media (min-width: 768px) {
  .meta-ribbons .ribbon--logos li img { height: 30px; }
  .meta-ribbons .ribbon--logos li.is-tall img { height: 40px; }
  .meta-ribbons .ribbon--logos li.is-mark img { height: 48px; }
}

/* 320-379px: the tilted case sticker wraps instead of pushing the page 3px wider */
@media (max-width: 379px) {
  .case__eyebrow { height: auto; min-height: 32px; padding-block: 5px; white-space: normal; max-width: calc(100% - 8px); }
}

/* the "$5,000/day" stat is the shared fourth slot of the track-record strip (services.css §3) */

/* ---------- 3. Sound familiar? The symptom picker is shared: services.css §4k (.sym). ---------- */

/* ---------- 4. What I take off your plate ---------- */
.inc__flag { margin-top: 14px; }
.inc__grid { margin-top: 36px; }
.inc__tile { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; }
.inc__h { display: flex; align-items: center; gap: 10px; }
.inc__h .i { width: 24px; height: 24px; }
.tile--ink .inc__h .i { color: var(--y); }
.inc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 16px; line-height: 1.5; }
.tile--ink .inc__list { color: var(--n300); }
.tile--ink .inc__list b { color: #fff; }
.inc__list--icons { gap: 18px; }
.inc__list--icons li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.inc__list--icons li > .i { width: 42px; height: 42px; padding: 9px; border: 2px solid var(--ink); border-radius: 12px; background: var(--n100); }
.inc__list--icons li > span { padding-top: 8px; }
.inc__tools { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.inc__tools li { display: grid; place-items: center; width: 52px; height: 52px; background: #fff; border-radius: 12px; }
.inc__tools img { width: 58%; height: auto; }
.inc__report { font-size: clamp(19px, 0.5vw + 16px, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.inc__spend { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.inc__spend .i { width: 24px; height: 24px; margin-top: 1px; }
@media (min-width: 768px) {
  .inc__tile--first { grid-column: 1 / 4; grid-row: 1; }
  .inc__tile--report { grid-column: 4 / 7; grid-row: 1; }
  .inc__tile--build { grid-column: 1 / -1; grid-row: 2; }
  .inc__spend { grid-row: 3; }
}
@media (min-width: 1024px) {
  .inc__tile--first { grid-column: 1 / 6; grid-row: 1; }
  .inc__tile--report { grid-column: 1 / 6; grid-row: 2; }
  .inc__tile--build { grid-column: 6 / 13; grid-row: 1 / 3; padding: 32px; gap: 24px; }
  .inc__spend { grid-column: 1 / -1; grid-row: 3; align-items: center; padding-block: 22px; font-size: 17px; }
  .inc__list--icons { gap: 22px; }
}

/* ---------- 5a. How we work: a placeholder where a numeral would be ---------- */
.how2__time--ph { align-content: flex-start; min-height: calc(clamp(52px, 2.4vw + 34px, 72px) + 22px); }
.how2__time--ph .ph-inline { font-size: 12px; line-height: 1.45; }

/* ---------- 5b. Price (white here: the testimonials band below is the paper one) ---------- */
.price.meta-price { background: #fff; }
.meta-price__k { color: var(--ink-3); }
.meta-price__mgmt { display: grid; gap: 4px; padding: 14px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.meta-price__q { font-size: clamp(24px, 0.8vw + 19px, 30px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.meta-price__mgmt .ph-inline { background: var(--n100); color: var(--ink-3); border-color: var(--n500); }
.meta-price__body { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }
.meta-levers { display: grid; gap: 16px; }
.meta-levers__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.meta-levers__list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.meta-levers__i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--y); }
.meta-levers__i .i { width: 20px; height: 20px; }

/* ---------- 5c. Testimonials ---------- */
.meta-quotes .quote__tag { align-self: flex-start; height: auto; min-height: 28px; padding: 3px 12px; font-size: 11px; }
.meta-quotes .quote--lead .quote__tag { position: absolute; top: 26px; right: 24px; }
.meta-quotes__ph { min-height: 120px; }
.meta-next { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.meta-next__micro { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.meta-next__micro .i { width: 18px; height: 18px; }
@media (max-width: 559px) { .meta-next .btn { display: flex; width: calc(100% - 4px); } }
@media (min-width: 1024px) {
  .meta-quotes__ph { grid-column: 1 / -1; grid-row: 3; min-height: 96px; }
  .meta-quotes .quote--lead .quote__tag { top: 36px; right: 36px; }
}
/* 1024-1279: the shared 5/3/4 split leaves the small cards ~220px wide (names wrap word by word).
   Here the client quote takes the full row and the other three pair up with the placeholder. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .meta-quotes .quote--lead { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .meta-quotes .quotes__grid > .quote:nth-child(2) { grid-column: 1 / 7; grid-row: 2; }
  .meta-quotes .quotes__grid > .quote:nth-child(3) { grid-column: 7 / 13; grid-row: 2; }
  .meta-quotes .quotes__grid > .quote:nth-child(4) { grid-column: 1 / 7; grid-row: 3; }
  .meta-quotes__ph { grid-column: 7 / 13; grid-row: 3; }
}
/* wide screens: Nimra's line is short, so it can carry the tall lead tile at display size */
@media (min-width: 1280px) {
  .meta-quotes .quote--lead blockquote p { font-size: clamp(30px, 1.5vw + 12px, 36px); line-height: 1.22; letter-spacing: -0.02em; }
}

/* FAQ aside, 1024-1279: the WhatsApp button is wider than the 4-column tile; let it fill the tile instead */
@media (min-width: 1024px) and (max-width: 1279px) {
  .faq__side .btn { align-self: stretch; --bp: 12px; }
  .faq__side .btn__face { font-size: 15px; }
}

/* ---------- 5d. About: the specialist + one Meta-course student review ---------- */
.meta-about__team { margin-top: 14px; }

/* ---------- 5e. Fit: inline next steps on the ink tile ---------- */
.meta-fit__link {
  color: #fff; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* ---------- 5f. The review "ticket" (thank-you page). Flat: in this system only stickers, ribbons, the ring and the stamp tilt. ---------- */
.ticket {
  position: relative; z-index: 1; max-width: 420px; margin: 20px 8px 8px 0; padding: 34px 24px 0; align-self: start;
  background: #fff; color: var(--ink); --focus: var(--ink); --halo: var(--y);
  border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
}
.ticket__tag { position: absolute; top: -17px; left: 20px; }
.ticket__h { margin: 0; }
.ticket__list li { font-weight: 600; }
.ticket__then { margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
/* the tear-off stub: a perforation with two punch holes */
.ticket__due {
  position: relative; margin: 20px -24px 0; padding: 16px 24px 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  border-top: 2px dashed var(--ink); font-size: 14px; font-weight: 700;
}
.ticket__due::before, .ticket__due::after {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--y);
}
.ticket__due::before { left: 10px; }
.ticket__due::after { right: 10px; }
.ticket__due > span { padding-left: 14px; }
.ticket__due .num { padding-right: 14px; font-size: 30px; }

/* ---------- 5g. Safety net ---------- */
.meta-safety .safety__row { display: grid; gap: 0; }
.meta-safety__line { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }
.meta-safety__line .link { margin-right: 20px; color: var(--ink); }
@media (min-width: 1024px) {
  .meta-safety .safety__row { grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; }
  .meta-safety .safety__label { grid-row: 1 / 4; padding-top: 12px; }
  .meta-safety__line { grid-column: 2; }
}

/* ---------- 5h. Narrow phones: the one CTA label stays on one line inside tiles ---------- */
@media (max-width: 419px) {
  main .btn--lg { --bp: 16px; --bf: 16px; }
  main .btn--lg .btn__face { gap: 8px; }
}

/* ---------- 6. quote.html ---------- */
.step__head .step__sub { max-width: 62ch; }
.meta-step__lines { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; list-style: none; padding: 0; }
.meta-step__lines .chip { gap: 6px; background: #fff; font-size: 14px; }
.meta-step__lines .i { width: 16px; height: 16px; stroke-width: 2.5; }
.fx .meta-opts .opt__face { min-height: 58px; font-size: 16px; }
.fx .meta-opts--3 { grid-template-columns: minmax(0, 1fr); }
.meta-label b { font-weight: 800; }
.sum__price .num { letter-spacing: -0.035em; }
/* the error summary links carry each field's full error sentence (brief §5), so they wrap:
   inline links keep the bullet on the first line instead of the last */
.fx .fx-summary a { display: inline; padding: 0; line-height: 1.5; }
.fx .fx-summary li { padding-block: 5px; }

/* ---------- 7. thank-you.html ---------- */

/* the same ticket as the landing page's closing slide, now carrying the visitor's reference and a stamp */
.ticket--ty { max-width: 460px; margin-top: 28px; }
.ticket__stamp { position: absolute; top: -16px; right: 18px; height: auto; min-height: 30px; padding: 4px 12px; }
.ticket--ty .ticket__due b { padding-right: 14px; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.meta-ty-side { display: grid; gap: 28px; justify-items: start; }
.meta-ty-side > .fx-cal, .meta-ty-side > .cal-intro { width: 100%; }

.meta-ty-c { background: var(--n100); }
.meta-ty-c__grid { margin-top: 36px; display: grid; gap: 20px; align-items: start; }
.meta-ty-c__card { padding: 30px 24px 26px; margin-right: 8px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink); }
.meta-ty-c__card .h3 { max-width: 22ch; }
.meta-ty-c__card > p:not(.sticker) { max-width: 52ch; }
@media (min-width: 1024px) {
  .meta-ty-c__grid { max-width: 760px; }
  .meta-ty-c__card { padding: 40px 36px 34px; }
}

/* ---------- 8. Motion (transform / opacity only) + reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the thank-you stamp lands on the ticket (a sticker: the one place the spring overshoot belongs) */
  .js .ticket__stamp { animation: stamp 320ms var(--spring-pop) 200ms both; }
}



/* ---------- B. Google Ads components ---------- */
/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · google-ads-management.css
   Page styles for the Google Ads management journey only (landing,
   quote.html, thank-you.html). Loads after site.css + services.css and
   uses their tokens. Nothing here is shared with other services.

   Contents
    1  Hero: deal-tile chip sizing (the tile itself is shared: services.css §2); the fact list (pricing card)
    2  Dashboard wall (the Google Ads screenshots, black band)
    3  Leak check: the shared symptom picker (services.css §4k)
    4  Scope, how it works, the small Meta cross-proof
    5  Pricing split, testimonials, fit links, FAQ ground, safety net
    6  Quote form extras (step page)
    7  Thank-you extras
    8  Motion + reduced motion
   ===================================================================== */

/* ---------- 1. Hero ---------- */
/* the Price / Format / For facts sit in the pricing card */
.gfacts { display: grid; gap: 10px; margin: 0; }
.gfacts > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.gfacts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600); }
.gfacts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.gfacts .ph-inline { display: inline; font-size: 12px; line-height: 1.7; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the brief's micro-trust is one line; 48ch split it after "within 3" on desktop */
@media (min-width: 1024px) {
  .gads-hero .svc-hero__trust { max-width: none; }
}
@media (min-width: 1200px) {
  .gdeal .svc-chips { gap: 5px; flex-wrap: nowrap; }
  .gdeal .svc-chips .chip { gap: 5px; min-height: 32px; padding: 3px 9px; font-size: 12.5px; white-space: nowrap; }
  .gdeal .svc-chips .i { width: 14px; height: 14px; }
}

/* ---------- 2. Dashboard wall ---------- */
.gwall .case__lead { max-width: 52ch; }
.gwall__grid { margin-top: 44px; }
.gwall__grid > *, .gwall__rest > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
/* phones: the three screenshots and the quote are one swipe row (the homepage testimonial pattern) */
@media (max-width: 767px) {
  .gwall__rest {
    margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px;
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin;
  }
  .gwall__rest > * { flex: 0 0 86%; scroll-snap-align: start; }
  .js .gwall__rest > .reveal { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) { .gwall__rest { display: contents; } }
.gwall__num {
  background: var(--ink-2); min-height: 280px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; container-type: inline-size;
}
.gwall__big { display: block; font-size: clamp(88px, 34cqi, 176px); color: var(--y); letter-spacing: -0.055em; line-height: 0.86; }
.gwall__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.gwall__facts .num { font-size: clamp(22px, 7.4cqi, 32px); letter-spacing: -0.04em; }
.gwall__when { font-size: 13px; font-weight: 600; color: var(--n400); font-variant-numeric: tabular-nums; }

.gwall__shot { display: flex; flex-direction: column; gap: 12px; padding: 10px; background: var(--ink-2); }
/* a neutral white mat so Google's own colours sit inside a frame, not on the page */
.gwall__frame { display: block; padding: 6px; background: #fff; border-radius: 14px; }
.gwall__frame img { width: 100%; border-radius: 9px; }
.gwall__shot figcaption { padding: 0 6px 4px; font-size: 13px; line-height: 1.5; color: var(--n300); font-variant-numeric: tabular-nums; }

.gwall__quote { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; background: var(--ink-3); }
.gwall__quote blockquote { margin: 0; }
.gwall__quote blockquote p { font-size: clamp(19px, 0.6vw + 15px, 24px); font-weight: 700; line-height: 1.32; letter-spacing: -0.015em; }
.gwall__quote .quote__av { border-color: #fff; }
.gwall__quote .quote__by span span { color: var(--n400); }

.gwall__cta { color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 22px; }
.gwall__ask { font-size: clamp(26px, 1.4vw + 18px, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase; max-width: 12ch; }
.gwall__gets { margin-top: 0; }
.gwall__gets li { font-weight: 600; line-height: 1.4; }
.gwall__gets .tick { background: var(--ink); color: var(--y); }
.gwall__go { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gwall__micro { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
.gwall__micro .i { flex: none; width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 559px) { .gwall__go .btn { display: flex; width: calc(100% - 4px); } .gwall__go { align-self: stretch; } }

@media (min-width: 768px) {
  .gwall__grid .gwall__shot--shop { grid-column: 1 / 4; }
  .gwall__grid .gwall__quote { grid-column: 4 / 7; }
}
@media (min-width: 1024px) {
  .gwall__grid > .gwall__num { grid-column: 1 / 5; grid-row: 1; }
  .gwall__grid .gwall__shot--main { grid-column: 5 / 13; grid-row: 1; }
  .gwall__grid .gwall__shot--strip { grid-column: 1 / 8; grid-row: 2; }
  .gwall__grid .gwall__quote { grid-column: 8 / 13; grid-row: 2; padding: 28px; }
  .gwall__grid .gwall__shot--shop { grid-column: 1 / 7; grid-row: 3; }
  .gwall__grid > .gwall__cta { grid-column: 7 / 13; grid-row: 3; padding: 32px; }
  .gwall__num { padding: 28px; }
}

/* ---------- 3. Leak check: the shared symptom picker (services.css §4k, .sym). ---------- */
/* small laptops: the three about-stat numerals shrink so "$12M+" and "$72M+" stop touching */
@media (min-width: 1024px) and (max-width: 1199px) {
  .svc-about__stats .num { font-size: 40px; }
}

/* ---------- 4. Scope, how it works, Meta cross-proof ---------- */
.gscope { background: var(--n100); }
.gscope__tag { margin-top: 16px; }
.gscope__tools { margin-top: 24px; }
.leave__ph { grid-column: 1 / -1; }

.ghow .how2__time { min-height: 40px; }
.how2__ph {
  display: inline-block; margin-top: 4px; padding: 4px 8px; border: 1px dashed var(--n600); border-radius: 6px;
  background: var(--n900); color: var(--n400); font-family: var(--mono); font-size: 12px; line-height: 1.5;
}
.ghow .how2__time .num { font-size: clamp(44px, 2vw + 30px, 64px); }

.xmeta { padding-block: calc(var(--sec) * 0.8); }
.xmeta__grid { display: grid; gap: 28px; align-items: center; }
.xmeta__chip { margin-bottom: 20px; }
.xmeta__h { max-width: 17ch; }
.xmeta__cap { margin-top: 16px; font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--n600); max-width: 44ch; font-variant-numeric: tabular-nums; }
.xmeta__bars { margin-top: 26px; max-width: 460px; }
.xmeta__shot { margin: 0; padding: 12px; }
.xmeta__shot img { width: 100%; border-radius: 10px; border: 2px solid var(--ink); }
@media (min-width: 1024px) {
  .xmeta__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .xmeta__shot { padding: 16px; }
}

/* ---------- 5. Pricing, testimonials, fit, FAQ, safety ---------- */
.gprice__big {
  font-size: clamp(46px, 2.8vw + 34px, 84px); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em;
  text-transform: uppercase; text-wrap: balance;
}
.price__card .gfacts { margin-top: 2px; }
.price__card .gfacts dt { color: var(--ink-3); }
.gprice__factors { padding: 24px 22px; }
.gprice__factors .ticks { margin-top: 14px; }
.gsplit { display: grid; gap: 12px; }
.gsplit__cell { display: flex; flex-direction: column; gap: 12px; min-height: 150px; }
.gsplit__t { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
@media (min-width: 480px) { .gsplit { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gprice__factors { padding: 30px 32px; } .gsplit__cell { padding: 24px 26px; } }

/* Phones: "Get my free Google Ads review" is 270px at 17px. Inside the three card CTAs (proof wall, leak tally,
   pricing) it broke onto a second line with "review" alone. Keep one line: tighter padding and 16px, drop the arrow
   in those cards, and 15px below 380px. At 320px a two-line label is balanced instead of orphaned.
   (This file loads only on the three google-ads-management pages, so the rule is safe unscoped.) */
@media (max-width: 419px) {
  .btn--lg { --bp: 16px; --bf: 16px; }
  .btn--lg .btn__face { text-wrap: balance; }
  .gwall__cta .btn__arrow, .sym__go .btn__arrow, .price__card .btn__arrow, .next-offer .btn__arrow { display: none; }
}
@media (max-width: 379px) {
  .btn--lg { --bf: 15px; }
  .hdr__cta { --bf: 14px; }
  .hdr__cta .btn__face { padding: 0 12px; }
  .faq__side .btn { --bp: 14px; }
}

.gquotes { background: #fff; }
.gquotes .tile--paper { background: var(--n100); }
.gquotes .quote--lead blockquote p { font-size: clamp(18px, 0.45vw + 14.5px, 22px); line-height: 1.38; }
.gquotes__ph { min-height: 180px; padding: 24px; }
.gquotes__ph .ph__label { max-width: 34ch; }
/* four tiles here (three quotes + the Google client slot): no orphan cell at tablet, and Ambreen's quote gets the
   wider of the two lower cells on desktop (the slot is only a label) */
@media (min-width: 768px) and (max-width: 1023px) {
  .gquotes .gquotes__ph { grid-column: 1 / -1; min-height: 120px; }
}
@media (min-width: 1024px) {
  .gquotes .quotes__grid > .quote:nth-child(3) { grid-column: 6 / 10; }
  .gquotes .quotes__grid > .quote:nth-child(4) { grid-column: 10 / 13; }
}

.gfit__link { font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.gfaq { background: var(--n100); }

.gsafety__grid { display: grid; gap: 22px; }
.gsafety__group { display: flex; flex-direction: column; align-items: flex-start; }
.gsafety .safety__label { flex-basis: auto; margin-bottom: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--n600); }
.gsafety .link { min-height: 44px; padding-block: 10px; font-size: 15px; }
@media (min-width: 1024px) {
  .gsafety__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3.5fr) minmax(0, 2.5fr); gap: 32px; }
}

/* ---------- 6. Quote form extras ---------- */
.gq-sum__covers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.gq-sum__covers li { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border: 2px solid var(--n600); border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; }
.gq-sum__what { font-size: 15px; line-height: 1.5; color: var(--n300); }
.gq-sum__leaks { padding: 10px 12px; border-radius: 12px; background: var(--ink-2); font-size: 14px; font-weight: 600; color: var(--n300); }
.gq-sum__leaks b { color: #fff; }
/* .fx-note is a grid, which split this sentence into three rows around the <b>; it is one line of prose */
.gq-carried { display: block; margin-top: 12px; }
.fx .fx-chips + .fx-note { margin-top: 14px; }
/* error summary: the links are inline-blocks, so the marker sat on the last line of a wrapped link */
.fx-summary a { vertical-align: top; }

/* ---------- 7. Thank-you extras ---------- */
.gty-steps .tl__what .ph-inline { display: inline; line-height: 1.8; }
.gty-access { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.gty-access li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.gty-access .tick { width: 22px; height: 22px; margin-top: 0; }
.gty-access .tick .i { width: 12px; height: 12px; }
.gty-offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.gty-offer__price .cur { font-size: 16px; font-weight: 800; }
.gty-offer__price .num { font-size: clamp(44px, 2vw + 32px, 60px); letter-spacing: -0.045em; }
.gty-offer__price span:last-child { font-size: 15px; font-weight: 600; color: var(--n600); }
.gty-offer__price s { text-decoration-thickness: 2px; }
.gty-review { margin: 4px 0 0; padding: 16px 18px; border-radius: var(--r-in); background: var(--n100); display: grid; gap: 8px; }
.gty-review blockquote { margin: 0; }
.gty-review blockquote p { font-size: 16px; font-weight: 600; line-height: 1.45; }
.gty-review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; font-weight: 600; color: var(--n600); }
.gty-stars { display: inline-flex; gap: 2px; }
.gty-stars svg { width: 14px; height: 14px; fill: var(--ink); }
.gty-community__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 14px; background: var(--y); }
.gty-community__icon .i { width: 26px; height: 26px; }
.gty-quote { margin: 0; padding-top: 16px; border-top: 1px solid var(--n200); display: grid; gap: 12px; }
.gty-quote blockquote { margin: 0; }
.gty-quote blockquote p { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
body[data-route="c"] .ty2-more { padding-block: 8px 40px; background: #fff; }
body[data-route="c"] .ty2-more .help-line { margin-top: 0; }
.gty-cta-under { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 559px) { .next-offer .btn { display: flex; width: calc(100% - 4px); } }

/* ---------- 8. Motion (transform / opacity / clip-path only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* dashboard wall: each screenshot wipes up out of its mat, once, as it enters */
  .js .gwall__shot.reveal .gwall__frame img { clip-path: inset(0 0 100% 0 round 9px); transition: clip-path 420ms var(--ease-out); }
  .js .gwall__shot.reveal.is-in .gwall__frame img { clip-path: inset(0 0 0 0 round 9px); }
  /* Meta cross-proof: the two bars grow from the left when the copy enters */
  .js .xmeta__copy .hbar__bar { transform: scaleX(0); transition: transform 600ms var(--ease-out) 160ms; }
  .js .xmeta__copy .hbar__row + .hbar__row .hbar__bar { transition-duration: 760ms; transition-delay: 260ms; }
  .js .xmeta__copy.is-in .hbar__bar { transform: none; }
}
html.motion-paused .gwall__frame img { clip-path: none !important; transition: none !important; }
html.motion-paused .xmeta__copy .hbar__bar { transform: none !important; transition: none !important; }



/* ---------- C. The merged page ---------- */
/* hero: the two platform plates on one ink tile, in the portrait's grid slot (no photo on this page) */
.mads-brands { overflow: visible; display: grid; place-items: center; }
.mads-brands .ring { overflow: visible; }
.mads-brands__stage {
  position: relative; display: grid; gap: 18px; justify-items: center; padding: 28px 16px;
  background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.14) 1px, transparent 0); background-size: 18px 18px;
  width: 100%; height: 100%; align-content: center; border-radius: inherit; overflow: hidden;
}
.mads-brands__p--meta .pbrand__plate { --rot: -3deg; }
.mads-brands__p--gads .pbrand__plate { --rot: 3deg; }
.mads-brands .pbrand__plate { box-shadow: 6px 6px 0 var(--y); border-color: #fff; }
@media (max-width: 767px) {
  .mads-brands { height: auto; min-height: 0; }
  .mads-brands__stage { grid-template-columns: repeat(2, auto); justify-content: center; padding: 34px 12px 26px; gap: 12px; }
  .mads-brands .pbrand__plate { padding: 10px 14px 10px 12px; gap: 8px; }
  .mads-brands .pbrand__mark { height: 30px; }
  .mads-brands .pbrand__word { font-size: 19px; }
  .mads-brands .ring { width: 78px; height: 78px; top: -24px; right: 10px; }
  .mads-brands .ring__num { font-size: 14px; }
}
@media (min-width: 768px) {
  .mads-brands__stage { grid-template-columns: repeat(2, auto); align-items: center; justify-content: center; gap: 22px; }
  .mads-brands__p--gads { margin-top: 64px; }
  .mads-brands__p--meta { margin-bottom: 64px; }
}
@media (min-width: 1200px) {
  .mads-brands .pbrand__plate { min-width: 0; padding: 22px 22px 18px; }
  .mads-brands .pbrand__mark { height: 92px; }
  .mads-brands .pbrand__word { font-size: 28px; }
}
@media (min-width: 1440px) {
  .mads-brands .pbrand__mark { height: 104px; }
}
/* the second plate lands a beat after the first (services.css owns the entrance keyframes) */
@media (prefers-reduced-motion: no-preference) {
  .js .mads-brands__p--gads .pbrand__plate { animation-delay: 380ms; }
}

/* the two platform cards: white, the platform in the card's own words (no brand colour outside the logos) */
.mads-opt .offer__name { display: flex; align-items: center; gap: 10px; }
.mads-both { color: #fff; }
.mads-both p b { color: var(--y); }
.mads-both .btn { flex: none; }

/* the proof wall's big number is the 12-year average, set as text */
.mads-hero ~ .gwall .gwall__big { letter-spacing: -0.05em; }
/* phones: the two logos come straight after the promise (first screen), then the price tile */
@media (max-width: 767px) {
  .mads-hero .mads-brands { order: 0; }
}