/* ── /boost-sales/ — overrides on the 5-reasons layout ───────────────────────
   Loaded AFTER 5-reasons-uk.css. The Growth Plan offer card in the hero's right
   rail is replaced by the agencies glass deck, and the byline/intro stack is
   tightened (at the original rhythm the title, byline and intro read as three
   unrelated blocks). */
/* the rail takes real width from the copy, so the display size steps down a
   notch here to keep the title at three or four lines rather than five */
.rz-hero--stage .rz-hero-title { font-size: clamp(32px, 3.6vw, 46px); margin: 0 0 14px; }
/* .rz-hero-name / .rz-hero-meta are <p>s that the base sheet styles for font and
   colour but never for margin, so they were still carrying the UA default 1em
   top+bottom — that is the gap that split the byline apart and pushed the intro
   down. Zero them and let the flex gap do the spacing. */
.rz-hero--stage .rz-hero-name, .rz-hero--stage .rz-hero-meta { margin: 0; }
.rz-hero--stage .rz-hero-who { gap: 3px; }
.rz-hero--stage .rz-hero-byline { margin-bottom: 20px; }
.rz-hero--stage .rz-hero-p { margin: 0; }

/* The deck is authored against a fixed stage: the cards are 560px wide and the
   flanking ones sit ±190px out at .84, so the composition needs ~880px of stage
   to sit inside its tinted panel. Squeezing the stage to the rail width instead
   pushes the centre card's edges out past that panel — which is the clipping
   this page had. So the stage keeps its authored geometry and the WHOLE thing is
   scaled to the rail, with the wrapper given the resulting visual height (a
   transform doesn't shrink layout box, so the row would otherwise reserve the
   full 480px). --bs-s must always equal (rail width / 900). */
.rz-hero-stage {
    --bs-s: .54;
    min-width: 0;
    display: flex; align-items: center; justify-content: flex-end;
    height: calc(480px * var(--bs-s));
}
.rz-hero--stage .ag-stage {
    flex: 0 0 auto;
    width: 900px; height: 480px; margin: 0;
    transform: scale(var(--bs-s));
    transform-origin: center right;
}

@media (min-width: 960px) {
    .rz-hero--stage .rz-hero-in { grid-template-columns: minmax(0, 1fr) 486px; gap: 30px; align-items: center; }
    .rz-hero-stage { --bs-s: .54; }
}
@media (min-width: 1200px) {
    .rz-hero--stage .rz-hero-in { grid-template-columns: minmax(0, 1fr) 594px; }
    .rz-hero-stage { --bs-s: .66; }
}
/* Below the two-column breakpoint the deck stacks under the copy, full width. */
@media (max-width: 959px) {
    .rz-hero-stage { height: auto; display: block; margin-top: clamp(28px, 5vw, 44px); }
    .rz-hero--stage .ag-stage { width: 100%; height: 460px; transform: none; }
}

.bs-getlbl { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; }
.bs-ticks { margin: 0 0 16px; }
.bs-getnote { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); margin: 0 0 26px; }

/* The ™ glyph already sits high in its em box, so it only needs shrinking and a
   small lift — a full <sup> would push it clear of the cap height. */
/* In display type the mark must scale WITH the heading, not sit at body-copy
   proportions — .9em of a 50px serif line is a 45px 'TM'. */
h1 .tm, h2 .tm, h3 .tm { font-size: .34em; top: -.9em; }
.tm { font-size: .9em; vertical-align: baseline; position: relative; top: -.34em; line-height: 0; letter-spacing: 0; }

/* Reviews band — no rules above or below it; the two cards are the separation. */
.bs-reviews { padding: clamp(26px, 3.4vw, 44px) 20px clamp(32px, 4.2vw, 54px); }
.bs-reviews + .gsm-serp, .bs-reviews + .gsm-five { border-top: 0; }
.bs-quotes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
    width: min(1120px, 100%); margin: 0 auto;
}
.bs-quote {
    display: flex; align-items: center; gap: 18px;
    margin: 0; padding: 22px 28px 22px 26px; text-align: left;
    background: #fff; border: 1px solid var(--card-border); border-left: 3px solid #6000ff;
    border-radius: 18px; box-shadow: var(--shadow-tile);
}
.bs-quote__face { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; }
.bs-quote__body { min-width: 0; flex: 1; }
.bs-quote__logo { flex: 0 0 auto; width: auto; height: 30px; }
/* fatjoe ships on a solid black tile, so it gets soft corners like elsewhere */
.bs-quote__logo--tile { height: 38px; border-radius: 9px; }
.bs-quote blockquote { margin: 0 0 7px; }
.bs-quote blockquote p { margin: 0; font-size: clamp(16px, 1.25vw, 18.5px); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.bs-quote figcaption { font-size: 13.5px; font-weight: 300; line-height: 1.4; color: var(--ink-mute); }
.bs-quote figcaption b { font-weight: 600; color: var(--ink-soft); }
@media (max-width: 1000px) and (min-width: 761px) { .bs-quote__logo { display: none; } }
@media (max-width: 760px) {
    .bs-quotes { grid-template-columns: minmax(0, 1fr); }
    .bs-quote { gap: 14px; padding: 18px 20px 18px 17px; }
    .bs-quote__face { width: 52px; height: 52px; }
    .bs-quote__logo { display: none; }
}

/* The heading now sits above the two columns rather than inside the left one, and
   follows the centred section-head recipe the /l/ landers use (.gsm-offer__head)
   — serif display size, centred, measure-capped. */
.bs-serp-head { text-align: center; max-width: 74ch; margin: 0 auto clamp(30px, 4vw, 54px); }
.bs-serp-head h2 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(32px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 12px; }
.bs-serp-head .lead { font-size: clamp(16.5px, 1.25vw, 19.5px); font-weight: 300; line-height: 1.55;
    color: var(--ink-soft); margin: 0 auto; max-width: 62ch; }
.bs-serp-head + .gsm-serp__grid { align-items: start; }

/* Reassurance ticks under the "How to get started" lead. */
.bs-startticks { margin: 14px 0 20px; }

/* Offer visual — replaces the Growth Plan mock. An inset panel (never white on
   white, per the card recipe) carrying the Google Partner mark and the setup
   value. The badge is the one piece of colour, which the offer is allowed. */
.bs-offervis {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px;
    padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
    background: var(--panel);
    border: 1px solid rgba(17,17,16,.05);
    border-radius: 20px;
}
/* The source PNG is the Google Partner lock-up; only the G mark is wanted, so the
   wordmark half is cropped off and our own label sits underneath. */
.bs-offervis__mark { display: block; width: clamp(84px, 9vw, 112px); height: clamp(84px, 9vw, 112px); overflow: hidden; }
.bs-offervis__mark img { width: 155%; height: auto; margin: -14% 0 0 -27%; max-width: none; }
.bs-offervis__brand { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.015em;
    color: var(--ink); margin: 8px 0 0; }
.bs-offervis__lbl { font-size: 14px; font-weight: 300; color: var(--ink-mute); margin: 2px 0 14px; }
.bs-offervis__val { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; }
.bs-offervis__val s { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(22px, 2vw, 28px); color: var(--ink-mute); text-decoration-thickness: 1px; }
.bs-offervis__val b { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.02em; color: var(--ink); }
.bs-offervis__note { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--ink-mute); margin: 10px 0 0; max-width: 30ch; }

/* The offer CTA is the commercial moment — the one button allowed the brand
   gradient. Everything else on the page stays ink. */
.bs-btn-brand { background: var(--brand-grad); color: #fff; border: 0;
    box-shadow: 0 10px 30px -12px rgba(96,0,255,.55); }
.bs-btn-brand:hover { background: var(--brand-grad); filter: brightness(1.06);
    box-shadow: 0 14px 38px -12px rgba(96,0,255,.65); }

/* Offer block: visual on the LEFT, the pitch on the right. The flag straddles the
   top edge of the VISUAL panel, centred over the Google mark. */
.ofr__vis { position: relative; }
.bs-ofr__flag {
    position: absolute; z-index: 2;
    top: 0; left: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center;
    padding: 8px 18px; border-radius: 999px; white-space: nowrap;
    background: var(--ink); color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
    box-shadow: 0 8px 22px -12px rgba(17,17,16,.6);
}
/* Narrower visual rail, and top clearance so the flag on the shell edge never
   lands on the rating line. */
.bs-ofr__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; padding-top: 18px; }
.bs-ofr__grid .ofr__vis { order: 1; }
.bs-ofr__grid .ofr__deal { order: 2; }

.bs-ofr__rating { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 14px; font-weight: 300; color: var(--ink-mute); }
.bs-ofr__stars { color: #f2b400; font-size: 14px; letter-spacing: 2px; }
.bs-ofr__h { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(28px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 20px; }
/* The two reassurance lines under the CTA read as one pair: same size, same
   weight, a thin outline tick each — not a bold claim followed by fine print. */
.bs-ofr__assure { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.bs-ofr__assure li { display: flex; align-items: center; gap: 9px;
    font-size: 14.5px; font-weight: 300; line-height: 1.45; color: var(--ink-soft); }
.bs-ofr__assure svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink); }

@media (max-width: 900px) {
    .bs-ofr__grid { grid-template-columns: minmax(0, 1fr); }
    .bs-ofr__grid .ofr__vis { order: 2; }
    .bs-ofr__grid .ofr__deal { order: 1; }
}

/* "Pays for itself" — a quiet, centred message band directly above the offer.
   No numbers or price furniture here on purpose: it sets up the offer, it does
   not compete with it. The cue line points at the offer that follows. */
.bs-pays {
    max-width: 74ch;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 84px) 20px clamp(30px, 4vw, 48px);
    text-align: center;
}
.bs-pays h2 {
    font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.025em;
    color: var(--ink); margin: 0 0 20px;
}
.bs-pays p {
    font-size: clamp(16.5px, 1.2vw, 19px); font-weight: 300; line-height: 1.65;
    color: var(--ink-soft); margin: 0 auto 16px; max-width: 62ch;
}
.bs-pays p b { font-weight: 600; color: var(--ink); }
.bs-pays__cue {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 14px auto 0 !important;
    padding: 10px 20px; border-radius: 999px;
    background: #fff; border: 1px solid var(--card-border); box-shadow: var(--shadow-tile);
    font-size: 15px !important; font-weight: 500 !important; color: var(--ink) !important;
}
.bs-pays__cue span { font-size: 17px; line-height: 1; }

/* Section label — a solid ink pill, the same object as the offer's "Best In Class
   Results" flag. A tinted ground was too close to the page colour to register. */
.bs-pays__lbl {
    display: inline-block;
    padding: 9px 20px; border-radius: 999px;
    background: var(--ink);
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: .005em;
    color: #fff !important; margin: 0 0 20px !important;
    box-shadow: 0 8px 22px -12px rgba(17,17,16,.6);
}

/* The rule under the pricing band is .gsm-offer's own border-top. Dropped only
   where the band precedes it, so every other page using .gsm-offer keeps it. */
.bs-pays + .gsm-offer { border-top: 0; }