/* Home page — page-scoped layout on top of scroll.css (HomeV2 + HomeMobileV2). */

/* ── Hero ── */
.home-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* the location used to be pinned to the hero's top-left corner (.hero-tag);
   it sits beside the review pill now, and drops under it when the pair no longer fits */
.home-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.home-hero h1 { max-width: 1152px; text-wrap: initial; }
.home-hero__line { white-space: nowrap; }
.home-hero__lead { max-width: 74ch; }  /* two lines, not three */
.home-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 4px; }
.home-hero__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--slate); }
.home-hero__trust .stars svg { width: 12px; height: 12px; }
/* QA 3: 92px of dead space above the trust pill, inherited from the sitewide
   .hero-adwall. Trimming the padding on its own would only move the gap rather
   than remove it — the 900px floor is ~139px taller than this hero's content,
   so whatever comes off the top pools under the team card instead. Both come
   down together, and page-scoped: the dollar-offer and partner-program heroes
   carry more content and still want the sitewide 900/92.
   Deliberately above the 620px block below, which keeps rule 195's 560px phone
   floor — same specificity, so source order is the only thing protecting it. */
.home-hero.hero-adwall { min-height: 864px; padding-block-start: 56px; }

@media (max-width: 900px) {
  .home-hero__line { white-space: normal; }
}
@media (max-width: 620px) {
  .home-hero__content { gap: 18px; align-items: stretch; }
  .home-hero h1 br { display: none; }
  /* The global hero size wrapped this headline to six lines on a phone, pushing the
     lead and the proof link below the fold. Smaller here, not shorter: the sentence
     is what tells a visitor in the first second who this is for.
     9.4vw still ran to five lines, so the cap is four and the coefficient was
     measured rather than guessed: in a 319px box at 375px wide, 33px wraps to
     five lines and 32px to four, which puts the ceiling at 8.5vw. Checked at
     320, 375, 390 and 430 -- four lines at every one. */
  .home-hero h1 { font-size: clamp(26px, 8.5vw, 38px); line-height: 1.06; }
  /* One centred column on a phone, and the review pill moves out of the first
     screen. It sat above the headline in a hero that already offers a button, a
     route link and a team card, so it read as one more thing to tap before you
     had been told what the company does. It is supporting evidence, so it goes
     under the team card, where it backs the offer up instead of competing with
     it. Every child is ordered explicitly: a flex item with no order falls to 0
     and jumps ahead of the ones that have one. */
  .home-hero__content { text-align: center; }
  .home-hero__meta { order: 6; align-self: center; justify-content: center; margin-top: 2px; }
  .home-hero .trust-pill { align-self: center; justify-content: center; }
  .home-hero__team { justify-content: center; }
  /* display:contents lifts the CTA into the hero's flex column. Every lifted
     child is ordered explicitly: one with no order falls to 0 and jumps ahead
     of the ones that have one, which is how the old route link ended up above
     the book button. */
  .home-hero__ctas { display: contents; }
  .home-hero__book { order: 1; width: 100%; }
  .home-hero__team { order: 3; margin-top: 20px; }
  .home-hero__proof { order: 4; justify-content: center; }
  .home-hero__trust { order: 5; }
  /* Two things come out of the phone hero, both because they repeat something
     the visitor is about to get anyway.

     The lead paragraph lists the services, and the section under the hero does
     the same at length; on a phone it cost four lines between the headline and
     the only button.

     The pill's second claim is the duplicate Dan spotted: "500+ home service
     clients" here, and "Trusted by 500+ home service businesses" over the logo
     marquee one screen down. The marquee keeps it, because there the claim sits
     on top of the logos that evidence it. The rating stays, since nothing else
     on the page carries it. */
  .home-hero__lead { display: none; }
  .home-hero__clients { display: none; }
  /* scroll.css:712 gives every .hero-adwall a 700px floor on a phone, which was
     right when this hero carried a lead paragraph and a route link under the
     headline. Without them the content is ~410px and the floor left 265px of
     empty video below the team card. Overridden here rather than in scroll.css,
     because the dollar-offer and partner-program heroes still have their full
     content and still want the 700. */
  .home-hero.hero-adwall { min-height: 560px; }
  /* With one claim left there is nothing for the divider to divide. */
  .home-hero .trust-pill__sep { display: none; }
}

/* ── Outcomes (cream cards) ── */
.home-outcome { gap: 10px; padding-bottom: 36px; }
.home-outcome .icon-tile { margin-bottom: 12px; }
@media (max-width: 620px) { .home-outcome .icon-tile { margin-bottom: 0; } .home-outcome { padding-bottom: 20px; } }

/* ── System ──
   Each step is one column: the live example on a stage, then that phase's details
   right beneath it, so "the ad runs" and "creative system" read as one thing. */
.home-system { --step-gap: 48px; --stage-h: 440px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--step-gap); margin: 0 0 24px; padding: 0; list-style: none; }
.home-step { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--c-card); border: 1px solid var(--c-card-border); border-radius: var(--radius-card); }
.home-step__label { padding: 24px 26px 0; }
.home-step__stage { display: flex; height: var(--stage-h); margin: 16px 14px 0; padding: 18px; border-radius: 12px; background: radial-gradient(120% 70% at 50% 0%, rgba(234,165,114,0.13), transparent 62%), rgba(149,173,197,0.05); border: 1px solid var(--hair); }
.home-step__stage > .ui-card { flex: 1; min-width: 0; min-height: 0; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
/* the three mockups stretch to the same height so their footers line up */
.home-step .ui-feed__media { flex: 1; min-height: 0; aspect-ratio: auto; }
.home-step .ui-sms__thread { flex: 1; }
.home-step .ui-cal__grid { flex: 1; grid-auto-rows: minmax(18px, 1fr); }
.home-step .ui-card__rule { margin-top: auto; }
.home-step__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 26px 26px 30px; }
.home-phase__title { margin-top: 2px; }
.home-phase__text { font-size: 15px; line-height: 1.65; min-height: 75px; }
.home-step .list-arrow { margin-top: 4px; }
/* connector sits in the gutter, level with the middle of the stage */
.home-step__arrow { position: absolute; z-index: 1; left: 100%; top: calc(24px + 23px + 16px + var(--stage-h) / 2); width: var(--step-gap); display: flex; justify-content: center; color: var(--coral); transform: translate(1px, -50%); }
.home-step__arrow svg { width: 36px; height: 20px; }
.home-inside__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.home-inside .link-card { flex: none; white-space: nowrap; }
.home-inside p { font-size: 15px; line-height: 1.6; }

/* tablet: steps stack, each one a row with the example beside its details */
@media (max-width: 1100px) {
  .home-system { --step-gap: 44px; --stage-h: 380px; grid-template-columns: minmax(0, 1fr); row-gap: var(--step-gap); max-width: 820px; margin-inline: auto; }
  .home-step { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .home-step__label { grid-column: 1 / -1; }
  .home-step__stage { grid-row: 2; margin: 16px 0 16px 16px; }
  .home-step__body { grid-row: 2; padding: 20px 26px 26px 28px; }
  .home-phase__text { min-height: 0; }
  .home-step__arrow { left: 50%; top: 100%; width: auto; height: var(--step-gap); align-items: center; transform: translateX(-50%); }
  .home-step__arrow svg { transform: rotate(90deg); }
}
/* phone: example on top, details below */
@media (max-width: 700px) {
  .home-system { --step-gap: 40px; max-width: 460px; }
  .home-step { display: flex; }
  .home-step__stage { height: auto; margin: 14px 12px 0; padding: 14px; }
  .home-step .ui-feed__media { flex: none; aspect-ratio: 16 / 10; }
  .home-step__body { padding: 22px 20px 24px; }
}
@media (max-width: 620px) {
  .home-step__label { padding: 20px 20px 0; }
  .home-inside { background: rgba(92,140,230,0.06); border-color: rgba(92,140,230,0.25); }
  .home-inside__title { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Comparison ── */
.home-compare__title { max-width: 980px; }

/* ── Services ── */
.home-services .card__corner + .icon-tile { margin-right: 96px; }
@media (max-width: 620px) {
  .home-services .card { gap: 8px; }
  .home-services .icon-tile { display: none; }
  .home-services .card:not(.home-services__wrx) .list-arrow { display: none; }
  .home-services__wrx .card__corner { order: 0; position: absolute; top: 20px; right: 20px; }
  .home-services .card__foot { padding-top: 2px; }
}

/* ── Calculator teaser ── */
.home-calc { display: flex; flex-direction: column; gap: 16px; }
.home-calc__field { display: flex; flex-direction: column; gap: 8px; padding: 28px 32px; background: var(--placeholder); border: 1px dashed rgba(149,173,197,0.25); border-radius: 12px; cursor: text; transition: border-color .2s ease; }
.home-calc__field:focus-within { border-color: var(--coral); border-style: solid; }
.home-calc__label { font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }
.home-calc__input { display: flex; align-items: baseline; gap: 10px; font: 700 32px/1.1 var(--font-display); color: var(--cream); }
.home-calc__input > span { color: var(--coral); }
.home-calc__input input { flex: 1; min-width: 0; padding: 0; background: none; border: 0; font: inherit; color: var(--cream); letter-spacing: .5px; -moz-appearance: textfield; appearance: textfield; }
.home-calc__input input::placeholder { color: #4a4a4a; }
.home-calc__input input::-webkit-outer-spin-button, .home-calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.home-calc__input input:focus { outline: none; }
@media (max-width: 620px) { .home-calc__field { padding: 22px 20px; } .home-calc__input { font-size: 36px; } }

/* ── Process ── */
@media (max-width: 620px) {
  .home-process__title { font-size: clamp(32px, 9.8vw, 38px); line-height: .95; }
}

/* ── Team band ── */
.home-team__btn { margin-top: 8px; }
@media (max-width: 900px) { .home-team__copy { order: 0; } }
@media (max-width: 620px) { .home-team__btn { order: 5; width: 100%; } }

/* ── Final CTA ── */
.home-cta__copy { gap: 26px; }
.home-cta__copy .checklist-box { margin-top: 0; }
@media (min-width: 901px) {
  .home-cta__copy { position: sticky; top: calc(var(--navh) + 48px); }
}
@media (max-width: 620px) {
  .home-cta__copy { gap: 20px; }
  .home-cta__copy .btn { padding: 20px 24px; font-size: 15px; }
}

/* ── Google reviews ──
   QA 11: this was written when the reviews sat as a block *under* the result
   quotes inside another section, which is what the margin, the reduced top
   padding and the rule line were for. It is its own <section class="panel"> now,
   so all three were wrong: every other panel on the page is 8px from its
   neighbour and this one was 56px, with a stray hairline across the top of a
   cream panel that nobody had reported. Removed, so .panel's own 112px padding
   and the 8px rhythm apply like everywhere else. */
.home-reviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; }
.home-reviews__score { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.home-reviews__n { font: 700 40px/1 var(--font-display); color: var(--cream); }
.home-reviews__score .stars svg { width: 16px; height: 16px; }
.home-reviews__count { font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }
.home-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-review { padding: 26px 26px 24px; }
.home-review__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--quote); }
@media (max-width: 1024px) {
  .home-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* phone: one swipeable row instead of six stacked cards */
@media (max-width: 620px) {
  .home-reviews__n { font-size: 34px; }
  .home-reviews__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .home-reviews__grid::-webkit-scrollbar { display: none; }
  .home-review { flex: 0 0 84%; scroll-snap-align: start; padding: 22px 20px; }
  .home-review__text { font-size: 14px; }
}

/* ── Process (container yard) ── */
.home-process__head { --flow-gap: 18px; }
.home-steps { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(26,26,26,0.12); }
.home-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(26,26,26,0.12); }
.home-steps__n { font: 700 36px/1 var(--font-display); color: var(--coral-ink); }
.home-steps li > div { display: flex; flex-direction: column; gap: 6px; }
.home-steps__t { font: 600 18px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.home-steps p { font-size: 15px; line-height: 1.6; color: var(--ink-body); }
@media (max-width: 1024px) {
  .home-process .yard__band { margin-top: 36px; margin-bottom: calc(-1 * var(--pad-y)); }
}
@media (max-width: 620px) {
  .home-steps { margin-top: 24px; }
  .home-steps li { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; }
  .home-steps__n { font-size: 28px; }
  .home-steps__t { font-size: 16px; }
  .home-steps p { font-size: 14px; }
  .home-process .yard__band { margin-top: 20px; }
}

/* ── Proof: the two numbers we manage to (featured above the stat band) ── */
.home-kpis { margin: 8px 0 72px; }
.home-kpis__eyebrow { margin-bottom: 20px; }
.home-kpis__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 32px; padding: 40px 44px; background: rgba(42, 40, 38, 0.72); border: 1px solid rgba(234,165,114,0.22); border-radius: var(--radius-card); }
.home-kpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-kpi__n { font: 700 clamp(72px, 9.6vw, 148px)/.9 var(--font-display); color: var(--coral); white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-kpi__label { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--cream); }
.home-kpi__meta { max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--slate); }
.home-kpis__arrow { align-self: center; margin-top: -40px; color: var(--coral); }
.home-kpis__arrow svg { width: 56px; height: 24px; }
.home-proof__more { margin-top: 40px; }
@media (max-width: 900px) {
  .home-kpis__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 24px; }
  .home-kpis__arrow { margin: 0; }
  .home-kpis__arrow svg { transform: rotate(90deg); width: 40px; }
}
@media (max-width: 620px) {
  .home-kpis { margin-bottom: 44px; }
  .home-kpi__n { font-size: clamp(56px, 18vw, 72px); }
  .home-kpi__label { font-size: 16px; }
  .home-kpi__meta { font-size: 14px; }
  .home-proof__more { margin-top: 28px; }
}

/* ── Home result quotes: the quote is the point, so it carries the card ── */
.home-quotes .card { padding: 34px 30px 28px; gap: 20px; }
.home-quotes .quote-card__text { font-size: clamp(30px, 3.4vw, 49px); line-height: 1.12; letter-spacing: -.5px; text-wrap: pretty; color: var(--cream); }
.home-quotes .card__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hair-2); }
.home-quotes .quote-card__name { font-size: 16px; }
.home-quotes .stars svg { width: 15px; height: 15px; }
@media (max-width: 1024px) {
  .home-quotes .quote-card__text { font-size: clamp(26px, 3.6vw, 36px); }
}
@media (max-width: 620px) {
  .home-quotes .card { padding: 24px 20px 22px; gap: 14px; }
  .home-quotes .quote-card__text { font-size: 27px; line-height: 1.18; letter-spacing: -.3px; }
  .home-quotes .card__foot { padding-top: 14px; }
}

/* ─ Case study cards ────────────────────────────────────────────────────────
   Was a scroll-driven sticky pile (fx/stack.js). Now a plain grid: six cards,
   equal height, media flush to the card edge, footer pinned to the bottom. */
.home-cases__grid { --grid-gap: 22px; }
.pcard {
  margin: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #FFFFFF; color: var(--ink);
  border: 1px solid rgba(26,26,26,0.08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20,16,10,.05), 0 26px 54px -34px rgba(30,24,16,.4);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20,16,10,.05), 0 34px 64px -32px rgba(30,24,16,.5); }

.pcard__media { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--charcoal); }
.pcard__cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pcard__cover--logo {
  background-color: var(--charcoal);
  background-image: radial-gradient(60% 50% at 50% 55%, rgba(234,165,114,0.18), rgba(26,26,26,0) 70%);
}
.pcard__cover--logo::after { content: ''; position: absolute; inset: 0; background: var(--logo) center / 58% auto no-repeat; }
.pcard__chip {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 999px; background: rgba(17,17,17,0.66); border: 1px solid rgba(242,241,237,0.2);
  color: var(--cream); font: 600 10.5px/1 var(--font-body); letter-spacing: 1.8px; text-transform: uppercase;
}
.pcard__chip::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent var(--coral); }

.pcard__body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 0; }
.pcard__client { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--ink-muted); }
.pcard__client b { color: var(--ink); font-weight: 600; }
.pcard__stat { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; line-height: .95; }
.pcard__n { font: 700 clamp(40px, 3.4vw, 54px)/1 var(--font-display); text-transform: uppercase; color: var(--coral-ink); }
.pcard__u { font: 600 12px/1 var(--font-body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-muted); }
.pcard__text { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pcard__quote { margin: 16px 0 0; padding-left: 13px; border-left: 2px solid var(--coral); font-size: 14px; line-height: 1.55; font-style: italic; color: var(--ink-muted); }
.pcard__quote b { display: block; margin-top: 5px; font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--coral-ink); }
.pcard__facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.pcard__facts li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border: 1px solid rgba(26,26,26,0.1); border-radius: 10px; font-size: 12.5px; line-height: 1.2; color: var(--ink-muted); }
.pcard__facts b { font: 700 16px/1 var(--font-display); color: var(--ink); }

.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 22px; }
.pcard__tag { padding: 8px 13px; border-radius: 999px; background: #ECEAE4; color: var(--ink-muted); font: 600 11px/1 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.pcard__go { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 11.5px/1 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.pcard__go .pcard__arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream); transition: background .22s ease, color .22s ease, transform .18s ease; }
.pcard__go:hover .pcard__arrow { background: var(--coral); color: var(--ink); transform: scale(1.06); }
.pcard__go:active .pcard__arrow { transform: scale(.94); }
.pcard__go svg { width: 17px; height: 17px; }
.pcard__go:focus-visible { outline: none; }
.pcard__go:focus-visible .pcard__arrow { outline: 2px solid var(--coral-ink); outline-offset: 3px; }

@media (max-width: 620px) {
  .home-cases__grid { --grid-gap: 14px; }
  .pcard__body { padding: 20px 18px 0; }
  .pcard__foot { padding: 18px 18px 18px; }
  .pcard__n { font-size: 42px; }
  .pcard__go .pcard__label { display: none; }
}

/* ── Lead result: the first thing after the promise is a real number ── */
.home-lead { padding-block: clamp(44px, 6vw, 76px); }
.home-lead__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.home-lead__n { font: 700 clamp(58px, 9vw, 128px)/0.92 var(--font-display); letter-spacing: -1px; color: var(--coral-ink); }
.home-lead__unit { margin-top: 10px; max-width: 18ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; font-weight: 600; color: var(--ink); }
.home-lead__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.home-lead__text { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.55; color: var(--ink); }
.home-lead__text b { color: var(--coral-ink); }
.home-lead__quote { margin: 0; padding-left: 18px; border-left: 3px solid var(--coral); }
.home-lead__quote p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; font-style: italic; color: var(--ink); }
.home-lead__quote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: .3px; color: var(--ink-muted); }
@media (max-width: 760px) {
  .home-lead__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .home-lead__unit { max-width: none; }
  .home-lead__body { gap: 16px; }
}

/* the yard section is now the homepage's whole "how it works": the long version,
   with the lead-journey mockups, lives on /how-it-works/ */
.home-process__lead { max-width: 46ch; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--c-text); }
.home-process__more { margin-top: 26px; }

/* the yard section is now the homepage's whole "how it works"; the long version,
   with the lead-journey mockups, lives on /how-it-works/ */
.home-process__lead { max-width: 46ch; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--c-text); }
.home-process__more { margin-top: 26px; }
.home-cases__more { margin-top: 34px; }
.home-cases__more .link-arrow { justify-content: center; }
.home-cases__more { margin-top: 34px; }
.home-cases__more .link-arrow { justify-content: center; }

/* package comparison: reuses the .compare component from the hosting page */
.home-compare .compare--plans col.compare__label-col { width: 18%; }
.home-compare .compare td { font-size: 14px; line-height: 1.5; }
.home-compare .compare td b { color: var(--coral); font-weight: 700; }
.home-compare .compare .link-arrow { font-size: 12.5px; }
@media (max-width: 1100px) {
  .home-compare .compare { overflow-x: auto; }
  .home-compare .compare table { min-width: 900px; }
}
@media (max-width: 620px) {
  /* The shared component stacks each row into a 2-up grid on phones. With five
     columns that made this section 1,900px tall, and comparing four packages is
     exactly the case where you want them side by side. Scroll it sideways instead. */
  .home-compare .compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .home-compare .compare table { display: table; min-width: 740px; }
  .home-compare .compare thead { display: table-header-group; }
  .home-compare .compare tbody { display: table-row-group; }
  .home-compare .compare tr { display: table-row; }
  .home-compare .compare thead td:first-child { display: table-cell; }
  .home-compare .compare tbody th { display: table-cell; grid-column: auto; }
  .home-compare .compare td { display: table-cell; }
  .home-compare .compare tbody tr.compare__group th { display: table-cell; }
  .home-compare__hint { margin-top: 12px; font-size: 12.5px; color: var(--meta); }
}
.home-compare__hint { display: none; }
@media (max-width: 620px) { .home-compare__hint { display: block; } }
.home-compare__sub { margin-top: 56px; margin-bottom: 22px; font: 600 12px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--meta); }
@media (max-width: 620px) { .home-compare__sub { margin-top: 38px; } }
.home-calc__help { margin-top: -4px; font-size: 12.5px; color: var(--meta); }

/* ── Hero: routing links + the logo row folded in from the deleted band ── */
@media (max-width: 620px) {
}

/* .cs-card__shot--name moved to scroll.css: /proof/ uses it too. */

/* ── Hero background video ──────────────────────────────────────────────────
   Replaces the ad-wall image grid. Vimeo's background player letterboxes inside
   its iframe, so the iframe itself has to carry the video's ratio and be sized
   past the hero on both axes. The source is 16:9 (426x240 per Vimeo's oEmbed),
   not the 4:3 its share snippet implies. The .hero-adwall gradients darken it. */
.home-hero .hero-video { position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background: var(--ground) url('/assets/img/hero-video-poster.jpg') center / cover no-repeat; }
.home-hero .hero-video iframe {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* aspect-ratio plus both minimums resolves to a true cover box against the
     hero itself, which viewport units cannot do: the hero runs taller than the
     viewport at 1440 and a vh-keyed iframe left a gap at the bottom. */
  width: auto; height: auto; min-width: 100%; min-height: 100%;
  aspect-ratio: 16 / 9;
  max-width: none; max-height: none; border: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.home-hero .hero-video.is-playing iframe { opacity: 1; }

/* a still frame, no motion, for anyone who asked not to see any */
/* video is busier than the stills it replaced, so the home hero darkens further
   than the shared .hero-adwall gradient; other pages using that hero are untouched */
/* 15% lighter than it was (0.82/0.88), per Dan. White hero copy still measures
   about 13:1 over the lightened overlay, so nothing drops below AA. */
.home-hero.hero-adwall::before { background: linear-gradient(180deg, rgba(17,17,17,0.70) 0%, rgba(17,17,17,0.75) 60%, #111111 100%); }

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-video iframe { display: none; }
}

/* ── The Problem: the scrollwrx reel beside the copy ──
   Source is 9:16 vertical (240x426 per oEmbed), so the card is portrait and the
   iframe carries that ratio, oversized on both axes so the player covers it. */
.home-problem__lead { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
/* QA 6: the reel is a 9/16 box (340px wide -> 604.4px tall) and the copy column
   beside it runs 631px, so the two ended 26.6px apart with no relationship
   between them. Stretching the column and letting the reel fill it ties the
   bottoms together at every width. The iframe inside is already a cover box, so
   it crops rather than distorts when the ratio drifts. Both axes are set on
   purpose: with only height:100% the 9/16 ratio stays live and starts driving
   the *width* off the new height (631px tall became 355px wide in a 340px
   column, and 710 became 399). Setting both takes aspect-ratio out of play.
   In one column the row has no definite height, 100% resolves to auto, and the
   ratio takes back over to give the reel its shape. */
.home-problem__video .hero-video {
  position: relative; inset: auto; width: 100%; height: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 18px; background: var(--charcoal) url('/assets/img/problem-video-poster.jpg') center / cover no-repeat;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.75);
}
.home-problem__video .hero-video iframe {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; min-width: 100%; min-height: 100%; aspect-ratio: 9 / 16;
  max-width: none; max-height: none; border: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.home-problem__video .hero-video.is-playing iframe { opacity: 1; }
.home-problem__copy { margin-inline: 0; }
@media (prefers-reduced-motion: reduce) { .home-problem__video .hero-video iframe { display: none; } }
@media (max-width: 860px) {
  .home-problem__lead { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .home-problem__video { max-width: 300px; }
}
@media (max-width: 620px) {
  /* The reel ran 300px wide above the headline, so on a phone the first thing in
     the section was a portrait video most of a screen tall, and the sentence that
     explains it was pushed under the fold. Half the width, centred, with the
     copy centred to match. */
  .home-problem__video { width: min(150px, 100%); max-width: none; margin-inline: auto; }
  .home-problem__copy .section-head--left { align-items: center; text-align: center; }
}

/* ── Services: the choice is between two offers ──
   Every other service is listed inside the offer that contains it, so nothing
   reads as separately purchasable. The two that genuinely are, plus the one
   add-on, sit below in their own labelled strips. */
.home-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 26px; }
.home-offer { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 30px; }
.home-offer--featured { border-color: rgba(234,165,114,0.5); background: rgba(234,165,114,0.05); }
/* The tag straddles the card's top border, and at 14% opacity that border and
   the card behind it showed straight through the middle of the word: it read as
   a pill someone had sliced in half. Opaque, and a size up from the 10px the
   generic pill uses, since this one has to be read at a glance. */
.home-offer__tag { position: absolute; top: -14px; left: 28px; background: var(--charcoal); padding: 5px 13px; font-size: 11px; }
.home-offer__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.home-offer__name { font: 700 clamp(23px, 2.3vw, 31px)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .5px; color: var(--c-heading); }
.home-offer__price { font-size: 14px; color: var(--slate); }
.home-offer__price b { font: 700 clamp(19px, 1.8vw, 24px)/1 var(--font-display); color: var(--coral); }
.home-offer__price span { font-size: 13px; color: var(--slate); }
.home-offer__text { font-size: 15.5px; line-height: 1.55; color: var(--c-text); }
.home-offer__list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.home-offer__list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.home-offer__list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 2px; background: var(--coral); }
.home-offer__list b { display: block; font-weight: 700; color: var(--cream); }
.home-offer__note { font-size: 13.5px; line-height: 1.5; color: var(--meta); }
.home-offer__btn { margin-top: auto; }

.home-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-extra { padding: 22px 24px 24px; border: 1px solid var(--c-rule); border-radius: 14px; background: rgba(255,255,255,0.03); }
.home-extra__label { font: 600 11px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral); }
.home-extra__text { margin-top: 11px; font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.home-extra__text b { color: var(--cream); font-weight: 700; }
.home-extra__text a { display: inline-block; margin-top: 4px; margin-right: 14px; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.home-extra__text a:hover { color: var(--coral); }

/* These two grids are declared above, so the single-column override has to come
   after them. It used to sit ~60 lines earlier and lost the cascade, which left
   two columns on every phone: 121px per card at 320px. */
@media (max-width: 620px) {
  .home-offers, .home-extras { grid-template-columns: minmax(0, 1fr); }
  .home-offer { padding: 28px 20px 22px; gap: 12px; }
  .home-offer__tag { left: 18px; }
  .home-offer__btn { width: 100%; }
  .home-extra { padding: 20px 18px 22px; }
  /* The Services header centres with everything else on a phone. .section-head
     forces left alignment below 620 sitewide, so this has to say so again. */
  .home-services .section-head { align-items: center; text-align: center; }
  /* The final CTA is a plain flow block, not a .section-head, so it centres
     here rather than through the keep-center modifier. The ticked list stays
     left: check marks down a centred column read as a ragged edge. */
  .home-cta__copy { text-align: center; }
  .home-cta__copy .checklist-box { text-align: left; }
}

/* the three problems stack beside the video instead of sitting in a row below it,
   which leaves the tall portrait card with no empty column next to it */
.home-problem__cards { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.home-problem__cards .card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px 22px; }
.home-problem__cards .icon-tile { grid-row: 1 / span 2; margin: 0; }
.home-problem__cards h3 { font-size: clamp(16px, 1.5vw, 19px); }
.home-problem__cards p { margin-top: 5px; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) {
  .home-problem__cards { margin-top: 22px; }
}

/* ── "I've tried Meta ads before" (ported from scrollwrx.com) ── */
.home-tried__title { max-width: 900px; margin-inline: auto; }
.home-tried__grid { align-items: stretch; margin-top: 8px; }
.home-tried__card { gap: 0; padding: 32px 30px; }
.home-tried__card--us { border-color: rgba(234,165,114,0.28); }
.home-tried__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--c-rule); }
.home-tried__name { font: 700 19px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .5px; color: var(--c-heading); }
.home-tried__list { margin-top: 20px; gap: 12px; }
.home-tried__list > li { font-size: 15px; }
/* no red in the palette: this tile is the only negative signal on the page */
.icon-tile--neg { background: rgba(214,110,98,0.14); color: #D98A80; }
/* The two comparison cards sit on white now, to break a long run of dark
   sections. #D98A80 is a dark-surface red and washes out on white, so the light
   card gets the ink version, same pattern as --coral-ink. */
.on-light .icon-tile--neg { background: rgba(179,68,58,0.1); color: var(--red-ink); }
.on-light .list-dash > li::before { background: var(--red-ink); }
.on-light.home-tried__card--us { border-color: rgba(169,87,31,0.35); }
.list-dash > li { padding-left: 22px; }
.list-dash > li::before { content: ''; position: absolute; left: 0; top: .72em; width: 11px; height: 1.5px; border-radius: 1px; background: #D98A80; }
.home-tried__foot { max-width: 780px; margin: 40px auto 0; font-size: 15px; line-height: 1.65; text-align: center; color: var(--c-text); }
.home-tried__foot b { color: var(--c-strong); font-weight: 700; }
@media (max-width: 900px) { .home-tried__grid.grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .home-tried__card { padding: 24px 20px; }
  .home-tried__name { font-size: 17px; }
  .home-tried__foot { margin-top: 28px; font-size: 14px; text-align: left; }
}

/* ── Objection section background reel ──
   A 9:16 clip covering a full-width band crops hard, which is fine for a
   background. It sits under a heavy gradient so the two cards stay readable,
   and it is dropped entirely for reduced motion. */
.home-tried { position: relative; isolation: isolate; overflow: clip; }
.home-tried > .container { position: relative; z-index: 1; }
/* The hero and the problem reel already sit on a poster; this one did not, so a
   Vimeo failure (or reduced motion, which skips the mount entirely) left a flat
   charcoal band. The poster is behind the iframe either way. */
.home-tried__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background: var(--charcoal) url('/assets/img/problem-video-poster.jpg') center / cover no-repeat; }
.home-tried__bg iframe {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; min-width: 100%; min-height: 100%;
  aspect-ratio: 9 / 16; max-width: none; max-height: none;
  border: 0; pointer-events: none;
}
.home-tried::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,26,0.90) 0%, rgba(26,26,26,0.84) 45%, rgba(26,26,26,0.92) 100%);
}
@media (prefers-reduced-motion: reduce) { .home-tried__bg iframe { display: none; } }

/* ── The bright hairline around every video ──────────────────────────────────
   QA 2, 7 and 8 reported "shining lines" on three different videos. It is one
   bug in three places. Each of these iframes is centred with a transform, which
   puts it on its own compositing layer, and that layer stops a hair short of the
   box it is sized to cover. A ~1px band of whatever is painted underneath
   survives along the top edge and around each rounded corner — and underneath is
   always a poster image, lighter than the video, so the band reads as a bright
   line tracing the curve. The fractional box heights make it worse: 300px wide
   at 9/16 is 533.33px tall, so the seam never lands on a device pixel.

   Confirmed by painting a backdrop red and watching the band come back red, then
   go away under this rule. One pixel of overshoot on each side, so the clip cuts
   through video instead of through a gap. Sizing, not colour: do not "fix" this
   by darkening the posters, which only hides it on dark footage. */
.home-hero .hero-video iframe,
.home-problem__video .hero-video iframe,
.home-tried__bg iframe { min-width: calc(100% + 2px); min-height: calc(100% + 2px); }

/* ── Reviews ── */
.home-reviews__sub { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.home-reviews__sub .stars svg { width: 14px; height: 14px; }
.home-reviews .section-head { margin-bottom: clamp(32px, 4vh, 48px); }
.home-reviews__more { margin-top: clamp(24px, 3vh, 36px); }