:root {
    --display: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
    --ds-bg: #F6F8FB;
    --ds-ink: #0B1220;
    --ds-soft: #566072;
    --ds-muted: #8A92A0;
    --ds-line: #E6E8EC;
    --ds-line-2: #DDE1E7;
    --ds-green: #15803D;
    --ds-green-hover: #166534;
    --ds-green-tint: #EAF4EC;
    --ds-shadow: 0 1px 2px rgba(20,30,60,0.04), 0 10px 30px rgba(20,30,60,0.06);
    --ds-shadow-hover: 0 1px 2px rgba(20,30,60,0.05), 0 20px 44px -12px rgba(20,30,60,0.14);
  }

  /* page + section backgrounds -> one calm light surface */
  body { background: var(--ds-bg); }
  .pricing-hero, .tiers, .compare-table-section, .how-it-works, .true-cost,
  .plan-finder, .guarantee-bar, .honest-note, .faq {
    background: var(--ds-bg) !important;
    border-top-color: var(--ds-line) !important;
    border-bottom-color: var(--ds-line) !important;
  }

  /* HERO: light with classy green glow at the top */
  .pricing-hero {
    background:
      radial-gradient(1200px 600px at 50% -14%, rgba(22,163,74,0.26) 0%, rgba(22,163,74,0.10) 34%, transparent 66%),
      linear-gradient(180deg, rgba(22,163,74,0.10) 0%, transparent 320px),
      var(--ds-bg) !important;
  }
  .pricing-hero::before, .pricing-hero::after { display: none !important; }

  /* HEADINGS: Inter, tight, no serif flourish */
  .pricing-hero h1 { font-weight: 700 !important; letter-spacing: -0.038em !important; }
  section h2, .section-title { font-weight: 700 !important; letter-spacing: -0.03em !important; }
  .serif-accent {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-style: normal !important; color: var(--ds-green) !important;
    font-size: inherit !important; letter-spacing: -0.01em !important; font-weight: 700 !important;
  }

  /* EYEBROW PILLS */
  .section-eyebrow, .hero-page-kicker, .eyebrow, .plan-finder-result-eyebrow {
    background: var(--ds-green-tint) !important; color: var(--ds-green) !important;
    border: 1px solid rgba(21,128,61,0.14) !important; border-radius: 999px !important;
  }

  /* PRIMARY BUTTONS -> green pill */
  .cta-primary, .tier-pay-btn, .btn-book, .plan-finder-cta {
    background: var(--ds-green) !important; color: #fff !important;
    border: none !important; border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(21,128,61,0.25), 0 8px 20px -8px rgba(21,128,61,0.45) !important;
  }
  .cta-primary:hover, .tier-pay-btn:hover, .btn-book:hover, .plan-finder-cta:hover {
    background: var(--ds-green-hover) !important; transform: translateY(-1px) !important;
  }

  /* CARDS -> white, hairline border, soft shadow, 16px */
  .tier-card, .faq-item, .true-cost-card, .step-card, .plan-finder-wrap,
  .honest-note-inner, .guarantee-card, .compare-table-wrap {
    background: #FFFFFF !important; border: 1px solid var(--ds-line) !important;
    border-radius: 16px !important; box-shadow: var(--ds-shadow) !important;
  }
  .tier-card:hover { box-shadow: var(--ds-shadow-hover) !important; transform: translateY(-3px) !important; border-color: var(--ds-line-2) !important; }

  /* featured tier -> white with green ring, green button */
  .tier-card--popular { background: #FFFFFF !important; border: 2px solid var(--ds-green) !important; }
  .tier-card--popular .tier-pay-btn { background: var(--ds-green) !important; color: #fff !important; }
  /* popular card: restore dark text (was white-on-green) */
  .tier-card--popular h3, .tier-card--popular .tier-price,
  .tier-card--popular .tier-card-head, .tier-card--popular .tier-card-head * { color: var(--ds-ink) !important; }
  .tier-card--popular .tier-best-for, .tier-card--popular p,
  .tier-card--popular li, .tier-card--popular li span { color: var(--ds-soft) !important; }
  .tier-card--popular .tier-price-meta, .tier-card--popular .tier-price-per { color: var(--ds-muted) !important; }
  .tier-card--popular .tier-includes-label, .tier-card--popular .tier-name { color: var(--ds-green) !important; }
  .tier-card--popular .tier-price-card { background: #F4FBF6 !important; border: 1px solid var(--ds-line) !important; }

  /* FINAL CTA -> light card */
  .final {
    background: radial-gradient(760px 320px at 50% -10%, rgba(22,163,74,0.10) 0%, transparent 60%), var(--ds-bg) !important;
    color: var(--ds-ink) !important; padding: 24px 0 80px !important;
  }
  .final::before, .final::after { display: none !important; }
  .final-inner {
    background: #FFFFFF; border: 1px solid var(--ds-line); border-radius: 24px;
    box-shadow: var(--ds-shadow); padding: 48px 32px; max-width: 760px; margin: 0 auto;
  }
  .final-title { color: var(--ds-ink) !important; font-weight: 700 !important; }
  .final-sub { color: var(--ds-soft) !important; }
  .final .section-eyebrow { background: var(--ds-green-tint) !important; color: var(--ds-green) !important; }
  .final .cta-primary { background: var(--ds-green) !important; color: #fff !important; border: none !important; }
  .final .cta-meta { color: var(--ds-muted) !important; }
  .final-callout { background: var(--ds-bg) !important; border: 1px solid var(--ds-line) !important; }
  .final-callout-label { color: var(--ds-green) !important; }
  .final-callout p { color: var(--ds-soft) !important; }

  @media (min-width: 768px) { .final-inner { padding: 56px 48px; } }

  /* ============ GENERALISATION FOR ALL INNER TEMPLATES ============ */
  /* re-theme the old tokens so tinted sections/boxes become the calm light surface */
  :root {
    --paper-soft: #F6F8FB;
    --paper-blue: #FFFFFF;
    --paper-blue-2: #FFFFFF;
    --brand-soft: #EAF4EC;
    --line: #E6E8EC;
    --line-soft: #EEF1F5;
  }

  /* all inner-page heroes -> light with the classy green glow */
  .page-hero, .pricing-hero, .sector-hero {
    background:
      radial-gradient(1200px 600px at 50% -14%, rgba(22,163,74,0.26) 0%, rgba(22,163,74,0.10) 34%, transparent 66%),
      linear-gradient(180deg, rgba(22,163,74,0.10) 0%, transparent 320px),
      var(--ds-bg) !important;
  }
  .page-hero::before, .page-hero::after,
  .pricing-hero::before, .pricing-hero::after,
  .sector-hero::before, .sector-hero::after { display: none !important; }
  .sector-hero h1, .page-hero h1 { font-weight: 700 !important; letter-spacing: -0.038em !important; }

  /* section backgrounds -> one calm light surface (inner templates only) */
  .tiers, .compare-table-section, .how-it-works, .true-cost, .plan-finder,
  .guarantee-bar, .honest-note, .faq,
  .case-body, .example-client, .experience, .next-step, .related-sectors,
  .why, .sectors, .proof-7y, .lifecycle, .logos, .featured-case, .countries,
  .testimonials, .case-note {
    background: var(--ds-bg) !important;
  }

  /* generic cards across inner templates -> white, hairline, soft shadow */
  .tier-card, .faq-item, .true-cost-card, .step-card, .plan-finder-wrap,
  .honest-note-inner, .guarantee-card, .compare-table-wrap,
  .sector-card, .five-card, .ingredients-card, .example-client-inner,
  .experience-stat, .featured-case-card, .proof-card, .why-card,
  .lifecycle-card, .case-note-inner, .related-card, .next-step-card {
    background: #FFFFFF !important; border: 1px solid var(--ds-line) !important;
    border-radius: 16px !important; box-shadow: var(--ds-shadow) !important;
  }

  /* case study: restore readable contrast on example-client text */
  .example-client-lede, .example-client-note-text, .example-client-stat-sub { color: var(--ds-soft) !important; }
  .example-client-note-title, .example-client-stat-num { color: var(--ds-ink) !important; }
  .example-client-tag, .example-client-stat-label { color: var(--ds-green) !important; }
  .example-client-note { background: #F6F8FB !important; border: 1px solid var(--ds-line) !important; }

  /* ============ HOMEPAGE ============ */
  /* light sections (portal-showcase stays dark on purpose; final handled above) */
  .service, .stats, .five, .case, .sectors, .testimonials, .pullquote,
  .compare, .guarantee-section, .focus, .ingredients, .not-for, .how, .team, .the-call {
    background: var(--ds-bg) !important;
  }
  .service { background-image: none !important; }
  /* homepage hero -> light with classy green glow */
  .hero {
    background:
      radial-gradient(1300px 640px at 50% -10%, rgba(22,163,74,0.24) 0%, rgba(22,163,74,0.09) 36%, transparent 66%),
      linear-gradient(180deg, rgba(22,163,74,0.10) 0%, transparent 340px),
      var(--ds-bg) !important;
  }
  .hero::before, .hero::after { display: none !important; }
  .hero h1 { font-weight: 700 !important; letter-spacing: -0.04em !important; }
  .hero h1 .blue { font-family: 'Inter', -apple-system, sans-serif !important; font-style: normal !important; color: var(--ds-green) !important; }
  /* homepage cards */
  .t-card, .stamp-card, .stat-tile, .not-for-card, .team-card, .lead-portal-card {
    background: #FFFFFF !important; border: 1px solid var(--ds-line) !important;
    border-radius: 16px !important; box-shadow: var(--ds-shadow) !important;
  }

  /* ============================================================
     CRAFT LAYER — elevate component detail across the whole site
     (polish only: no content or layout changes)
     ============================================================ */
  :root { --ds-ease: cubic-bezier(.16,1,.3,1); }

  /* richer, layered card depth + crafted top edge */
  .tier-card, .faq-item, .true-cost-card, .step-card, .plan-finder-wrap,
  .honest-note-inner, .guarantee-card, .compare-table-wrap,
  .sector-card, .five-card, .ingredients-card, .example-client-inner,
  .featured-case-card, .proof-card, .why-card, .lifecycle-card, .case-note-inner,
  .related-card, .next-step-card, .t-card, .stamp-card, .stat-tile,
  .not-for-card, .team-card, .lead-portal-card {
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 2px 8px rgba(16,24,40,0.03), 0 22px 44px -24px rgba(16,24,40,0.20) !important;
    transition: transform .24s var(--ds-ease), box-shadow .24s var(--ds-ease), border-color .22s var(--ds-ease) !important;
  }
  /* interactive (link) cards get a crafted hover lift */
  a.sector-card:hover, a.tier-card:hover, a.related-card:hover,
  a.next-step-card:hover, a.featured-case-card:hover, a.t-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 2px 4px rgba(16,24,40,0.05), 0 34px 60px -28px rgba(16,24,40,0.30) !important;
    border-color: rgba(21,128,61,0.26) !important;
  }

  /* primary buttons: inner highlight + arrow slide */
  .cta-primary, .tier-pay-btn, .btn-book, .plan-finder-cta, .sector-card-cta {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(21,128,61,0.22), 0 10px 22px -10px rgba(21,128,61,0.5) !important;
    transition: transform .18s var(--ds-ease), background .18s, box-shadow .18s !important;
  }
  .cta-primary:hover, .tier-pay-btn:hover, .btn-book:hover, .plan-finder-cta:hover { transform: translateY(-1px) !important; }
  .cta-primary .arrow, .btn-book .arrow { display: inline-block; transition: transform .2s var(--ds-ease); }
  .cta-primary:hover .arrow, .btn-book:hover .arrow { transform: translateX(3px); }

  /* eyebrow pills: subtle crafted highlight */
  .section-eyebrow, .hero-page-kicker, .eyebrow {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
  }

  /* green inline links: nicer underline + arrow nudge on hover */
  .read-case, .sector-card a, a.text-link { transition: color .15s; }

  /* FAQ accordions: interactive polish */
  .faq-item { transition: box-shadow .2s var(--ds-ease), border-color .2s var(--ds-ease); }
  .faq-item:hover { border-color: rgba(21,128,61,0.22) !important; box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 18px 36px -22px rgba(16,24,40,0.2) !important; }

  /* comparison tables: gentle row hover */
  .compare-row:hover, .true-cost-row:hover, .compare-table tbody tr:hover { background: #F2F6FB !important; }

  /* green number badges: subtle depth */
  .step-num, .lifecycle-step-num, .hiw-step-num, .next-step-num,
  .service-beat-num, .call-cover-num {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 10px -4px rgba(21,128,61,0.4) !important;
  }

  /* green-tint square icon chips: add crafted depth */
  .ingredients-card-icon, .lifecycle-step-icon {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 14px -8px rgba(21,128,61,0.35) !important;
  }

  /* dark accent cards (track record / portal showcase): refined edge */
  .hero-stats, .portal-showcase .lead-portal-card {
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -28px rgba(4,24,16,0.6) !important;
  }

  /* final CTA accent words were white for the old dark band -> make green on the light card */
  /* final CTA headline all-black on the light card (matches contact + pricing); dark footer keeps green via .footer-hero-title */
  .final .serif-accent { color: var(--ds-ink) !important; }

  /* ============================================================
     V18: CASE-STUDY DETAIL CRAFT + FIXES
     Scoped to case-study-only classes (safe for other pages).
     ============================================================ */

  /* FIX: example-client headline was white (left over from the old dark
     panel) and sat invisible on the now-light card. Make it ink so the
     full line reads, with the green serif accent intact. */
  .example-client-title { color: var(--ds-ink) !important; }
  .example-client-note {
    background: var(--ds-bg) !important;
    border: 1px solid var(--ds-line) !important;
  }
  .example-client-note-icon { color: var(--ds-green) !important; }

  /* Section dividers: fading centre hairline instead of a hard rule */
  .case-divider {
    border: 0 !important;
    height: 1px !important;
    margin: 46px 0 !important;
    background: linear-gradient(90deg, transparent, var(--ds-line) 14%, var(--ds-line) 86%, transparent) !important;
  }

  /* On-this-page nav: smoother motion + a touch of travel on hover */
  .side-nav-link {
    transition: color .25s var(--ds-ease), border-color .25s var(--ds-ease), padding-left .25s var(--ds-ease) !important;
  }
  .side-nav-link:hover { padding-left: 20px !important; }
  .side-nav-link.is-active { border-left-width: 2px !important; }

  /* Lead-type chips: carry a shadow lift on hover (not just a nudge) */
  .lead-types-list li {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.04), 0 14px 32px -24px rgba(22,101,52,0.22) !important;
    transition: transform .3s var(--ds-ease), border-color .3s var(--ds-ease), box-shadow .3s var(--ds-ease) !important;
  }
  .lead-types-list li:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.04), 0 22px 44px -22px rgba(22,101,52,0.3) !important;
  }

  /* "What's different" cards: a green edge wipes in on hover */
  .differences-list li:hover {
    box-shadow: inset 3px 0 0 var(--ds-green), inset 0 1px 0 rgba(255,255,255,0.9), 0 22px 44px -22px rgba(22,101,52,0.3) !important;
  }

  /* Next-step rows: were static; give them a gentle slide + lift */
  .next-step-list li {
    transition: transform .3s var(--ds-ease), box-shadow .3s var(--ds-ease), border-color .3s var(--ds-ease) !important;
  }
  .next-step-list li:hover {
    transform: translateX(4px) !important;
    border-color: #C6E9D1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 38px -22px rgba(22,101,52,0.3) !important;
  }

  /* Related/other case cards: arrow slides out on hover */
  .sector-card-link .arrow {
    display: inline-block;
    transition: transform .3s var(--ds-ease);
  }
  .sector-card:hover .sector-card-link .arrow { transform: translateX(5px); }

  /* Hero results card (dark): add a glass top highlight over the existing edge */
  .hero-stats {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 5px rgba(21,128,61,0.07), 0 34px 70px -26px rgba(6,46,25,0.5) !important;
  }

  /* Final "fit" callouts: a touch of lift so they feel live */
  .final-callout {
    transition: transform .3s var(--ds-ease), border-color .3s var(--ds-ease), box-shadow .3s var(--ds-ease);
  }
  .final-callout:hover {
    transform: translateY(-2px);
    border-color: #C6E9D1;
  }

  /* ============================================================
     V19: BRING CASE-STUDY DETAIL IN KEEPING WITH CONTACT/PRICING
     Light everything: no dark results card, no green-tinted cards,
     no green section band. Green stays an accent only.
     All selectors here are case-study-only in markup.
     ============================================================ */

  /* Hero results card: dark navy -> clean white bordered card */
  .hero-stats {
    background: #FFFFFF !important;
    border: 1px solid var(--ds-line) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 2px 8px rgba(16,24,40,0.03), 0 22px 44px -24px rgba(16,24,40,0.16) !important;
  }
  .hero-stats-label { color: var(--ds-green) !important; }
  .hero-stats-label::before {
    background: var(--ds-green) !important;
    box-shadow: 0 0 10px rgba(21,128,61,0.5) !important;
  }
  .hero-stats-cell-num { color: var(--ds-ink) !important; }
  .hero-stats-cell-label { color: var(--ds-soft) !important; }
  .hero-stats-cell, .hero-stats-pair { border-color: var(--ds-line) !important; }
  .hero-stats-note { color: var(--ds-muted) !important; border-color: var(--ds-line) !important; }

  /* Card families: drop the faint green gradient -> pure white */
  .lead-types-list li,
  .differences-list li,
  .experience-stat { background: #FFFFFF !important; }

  /* "Book a free discovery call" band: green wash -> cool-light bg */
  .next-step { background: var(--ds-bg) !important; }

  /* Ghost numerals on the "what's different" cards: green -> neutral whisper */
  .differences-num {
    -webkit-text-stroke-color: rgba(11,18,32,0.07) !important;
  }

  /* ============================================================
     V20: "OTHER CASE STUDIES" CARDS - unify to one brand tile
     (was 4 mismatched pastel colours; icons corrected in markup)
     ============================================================ */
  .related-sectors .sector-card-img {
    background: linear-gradient(160deg, #EFF6F1 0%, #DDEEE4 100%) !important;
  }
  .related-sectors .sector-card-icon { color: var(--ds-green) !important; }
  .related-sectors .sector-card-img::after { opacity: .5; }

  /* ============================================================
     V21: hero H1 reads solid black (matches contact/pricing/detail
     heroes). A per-page script had been greening the last word of
     the case-studies overview hero only.
     ============================================================ */
  .page-hero h1 .serif-accent,
  .sector-hero h1 .serif-accent { color: var(--ds-ink) !important; }

  /* ============================================================
     V22: FIX sector-card hover badge. Cards also carry .glow-card,
     whose ::after sets inset:0 and collides with the arrow-badge
     ::after, dragging it to the top-left and stretching it. Pin the
     badge back to a 34px circle in the top-right corner.
     ============================================================ */
  .sector-card::after {
    left: auto !important;
    bottom: auto !important;
    width: 34px !important;
    height: 34px !important;
  }

  /* ============================================================
     V23: "Every business is different" (case-note) section brought
     in line with the rest of the page: centered like other sections,
     and the two intro paragraphs unified (the first was heavy
     semibold-dark and cramped against a light second paragraph).
     ============================================================ */
  .case-note-inner { text-align: center !important; max-width: 1060px !important; }
  .case-note-inner > p:first-of-type,
  .case-note-inner > p {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--ds-soft) !important;
    line-height: 1.65 !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
  }
  .case-note-subhead { text-align: center !important; margin-top: 36px !important; }

  /* ============================================================
     V24: case-note card had border/shadow/radius (from the card
     layer) but padding:0, so content touched the edges. Give the
     card real internal padding.
     ============================================================ */
  .case-note-inner { padding: 56px 60px !important; }
  @media (max-width: 760px) {
    .case-note-inner { padding: 36px 24px !important; }
  }

  /* ============================================================
     V25: overview final CTA styled like the pricing page - a flat
     white closing band, not a card. Scoped via .final--wide.
     ============================================================ */
  .final { background: #FFFFFF !important; border-top: 1px solid var(--ds-line) !important; }
  .final::before, .final::after { display: none !important; }
  .final .container::before, .final .container::after { display: none !important; }
  .final-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .final-title,
  .final-title .serif-accent { color: #0B1220 !important; }

  /* ============================================================
     V26: homepage hero reads solid black (legacy .blue span was
     green); dark client-portal showcase lightened to match the
     rest of the site.
     ============================================================ */
  .hero h1 .blue { color: var(--ds-ink) !important; }

  .portal-showcase { background: var(--ds-bg) !important; }
  .portal-showcase::before, .portal-showcase::after { opacity: .35 !important; }
  .portal-showcase h2 { color: var(--ds-ink) !important; }
  .portal-showcase h2 .serif-accent { color: var(--ds-green) !important; }
  .portal-showcase p { color: var(--ds-soft) !important; }
  .portal-showcase .section-eyebrow,
  .portal-showcase .eyebrow,
  .portal-showcase .portal-kicker { color: var(--ds-green) !important; }

  /* ============================================================
     V27: homepage pale-blue leftovers from the old blue theme ->
     on-brand. Ghost numerals go neutral; icon chips go green-tint.
     ============================================================ */
  .five-card::before { color: rgb(238, 241, 246) !important; }
  .faq-plus, .stamp-icon { background: var(--ds-green-tint) !important; }

  /* ============================================================
     V28: FIX - portal showcase feature list was white text (left
     over from the dark section) and invisible after lightening.
     ============================================================ */
  .portal-showcase .ps-features li { color: var(--ds-soft) !important; }
  .portal-showcase .ps-features strong,
  .portal-showcase strong { color: var(--ds-ink) !important; }
  .portal-showcase .ps-url { border-color: var(--ds-line) !important; }

  /* ============================================================
     V29: homepage fixes
     - the-call eyebrow was white (dark-band leftover) -> green
     - "Our service" intro now shares the white of the beats below
     - "Our Portal" (beat 4) screenshot frame
     ============================================================ */
  .the-call .eyebrow, .the-call .section-eyebrow { color: var(--ds-green) !important; }
  .the-call .eyebrow::before, .the-call .section-eyebrow::before { background: var(--ds-green) !important; }

  .service { background: #FFFFFF !important; }

  .service-beat--support { border-bottom: none !important; }
  .service-beat--portal { background: #FFFFFF; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
  .service-beat--portal .service-beat-watermark { color: var(--ds-green); opacity: 0.05; }

  .portal-shot-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.03), 0 26px 52px -24px rgba(16,24,40,.28);
  }
  .portal-shot-img { width: 100%; height: auto; display: block; }

  /* ============================================================
     V30: hero headline - smaller, sentence case, green accent
     ============================================================ */
  .hero h1 { font-size: clamp(34px, 5vw, 72px) !important; letter-spacing: -0.025em !important; }
  .hero h1 .hero-accent-green { color: var(--ds-green) !important; }

  /* ============================================================
     V31: pricing + case-studies heroes matched to the contact hero
     (headline size & layout + background). Legal pages don't use
     .page-hero, so they're unaffected.
     ============================================================ */
  .pricing-hero h1, .page-hero h1 {
    font-weight: 700 !important;
    font-size: clamp(38px, 7vw, 60px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    margin: 22px auto 18px !important;
    max-width: 15ch !important;
  }
  .pricing-hero::before, .page-hero::before { display: none !important; }
  .pricing-hero, .page-hero {
    padding: 118px 0 60px !important;
    background:
      radial-gradient(1200px 600px at 50% -14%, rgba(22,163,74,0.26) 0%, rgba(22,163,74,0.10) 34%, transparent 66%),
      linear-gradient(180deg, rgba(22,163,74,0.10) 0%, transparent 320px),
      var(--ds-bg) !important;
  }
  @media (min-width: 768px) {
    .pricing-hero, .page-hero { padding: 158px 0 78px !important; }
  }

  /* ============================================================
     V32: match pricing + case-studies hero eyebrow, spacing and
     subtext to the contact hero exactly.
     ============================================================ */
  .pricing-hero .hero-page-kicker, .page-hero .hero-page-kicker {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 6px 13px 6px 11px !important;
    margin-bottom: 0 !important;
  }
  .pricing-hero p, .page-hero p {
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: rgb(86, 96, 114) !important;
  }

  /* ============================================================
     V33: FIX - example-client "Example Client" eyebrow rendered as
     a solid green pill with green text (invisible). Make it a proper
     green-tint pill like the other eyebrows.
     ============================================================ */
  .example-client-tag {
    background: var(--ds-green-tint) !important;
    color: var(--ds-green) !important;
  }
  .example-client-tag::before { background: var(--ds-green) !important; }

  /* ============================================================
     V34: real client logos in the brands marquee
     ============================================================ */
  .logos-marquee .brand-logo { display: inline-flex; align-items: center; }
  .logos-marquee .brand-logo img {
    height: 30px; width: auto; max-width: 160px;
    object-fit: contain; display: block;
    /* logos supplied as white/reversed; render uniform dark-grey on the light strip */
    filter: brightness(0) saturate(100%) invert(18%);
    opacity: 0.72;
    transition: opacity .2s ease;
  }
  .logos-marquee .brand-logo:hover img { opacity: 1; }

  /* ============================================================
     V35: brands marquee - wider spacing + bigger logos so fewer
     show at once and they stream past continuously; slower scroll.
     ============================================================ */
  .logos-marquee-set { gap: 130px !important; padding-right: 130px !important; }
  .logos-marquee-inner { animation-duration: 46s !important; }
  .logos-marquee .brand-logo img { height: 36px !important; max-width: 180px !important; }
  @media (max-width: 760px) {
    .logos-marquee-set { gap: 84px !important; padding-right: 84px !important; }
    .logos-marquee .brand-logo img { height: 30px !important; }
  }

  /* ============================================================
     V36: stronger left/right fade on the brands marquee so logos
     only read clearly through the middle.
     ============================================================ */
  .logos-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 14%, #000 32%, #000 68%, rgba(0,0,0,0.15) 86%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 14%, #000 32%, #000 68%, rgba(0,0,0,0.15) 86%, transparent 100%) !important;
  }

  /* ============================================================
     V37: brands marquee keeps scrolling on hover (was pausing).
     ============================================================ */
  .logos-marquee:hover .logos-marquee-inner { animation-play-state: running !important; }


  /* ============================================================
     V39: "Skin in the game" ad-spend receipt (case studies)
     ============================================================ */
  .ad-spend { background: var(--ds-bg); padding: 90px 0; }
  .ad-spend .container { text-align: center; }
  .ad-spend-head { max-width: 680px; margin: 0 auto 46px; }
  .ad-spend h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; color: var(--ds-ink); margin: 16px auto 14px; max-width: 16ch; }
  .ad-spend-lede { font-size: 18px; line-height: 1.62; color: var(--ds-soft); margin: 0 auto; max-width: 600px; }

  .ad-receipt {
    position: relative; max-width: 440px; margin: 0 auto; text-align: left;
    background: #fff; border: 1px solid var(--ds-line); border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 10px rgba(16,24,40,.04), 0 44px 80px -34px rgba(16,24,40,.32);
    padding: 28px 30px 32px; overflow: hidden;
  }
  .ad-receipt::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, #4ADE80 0%, var(--ds-green) 100%); }
  .ad-receipt-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
  .ad-receipt-brand { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--ds-ink); letter-spacing:-0.01em; }
  .ad-receipt-mark { width:22px; height:22px; border-radius:6px; background: linear-gradient(135deg,#4ADE80,var(--ds-green)); flex:none; }
  .ad-receipt-live { display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ds-green); background:var(--ds-green-tint); padding:4px 10px; border-radius:999px; }
  .ad-receipt-dot { width:7px; height:7px; border-radius:50%; background:var(--ds-green); animation: adPulse 2s infinite; }
  @keyframes adPulse { 0%{box-shadow:0 0 0 0 rgba(21,128,61,.45);} 70%{box-shadow:0 0 0 7px rgba(21,128,61,0);} 100%{box-shadow:0 0 0 0 rgba(21,128,61,0);} }
  .ad-receipt-rows { display:flex; flex-direction:column; gap:10px; }
  .ad-receipt-row { display:flex; justify-content:space-between; font-size:13.5px; }
  .ad-receipt-row span:first-child { color:var(--ds-muted); }
  .ad-receipt-row span:last-child { color:var(--ds-ink); font-weight:600; font-variant-numeric:tabular-nums; }
  .ad-receipt-divider { border-top:1.5px dashed var(--ds-line-2); margin:18px -6px; }
  .ad-receipt-total { text-align:center; padding:2px 0; }
  .ad-receipt-total-label { display:block; font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ds-muted); margin-bottom:10px; }
  .ad-receipt-amount { display:block; font-size:clamp(30px,6.5vw,46px); font-weight:800; letter-spacing:-0.03em; color:var(--ds-ink); font-variant-numeric:tabular-nums; }
  .ad-receipt-stamp { width:fit-content; margin:22px auto 0; display:flex; align-items:center; gap:8px; color:var(--ds-green); border:2px solid var(--ds-green); border-radius:10px; padding:7px 15px; font-size:11.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; transform:rotate(-3deg); opacity:.92; }
  .ad-spend-foot { margin:26px auto 0; font-size:13px; color:var(--ds-muted); max-width:460px; line-height:1.55; }
  @media (max-width:520px){ .ad-receipt{ padding:24px 20px 28px; } }

  /* ============================================================
     V40: ad-spend receipt - glow + supporting skin-in-the-game stats
     ============================================================ */
  .ad-receipt-wrap { position: relative; width: fit-content; margin: 0 auto; }
  .ad-receipt-wrap::before {
    content:''; position:absolute; inset:-50px -40px;
    background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(21,128,61,0.12) 0%, transparent 70%);
    z-index:0; pointer-events:none;
  }
  .ad-receipt-wrap .ad-receipt { position: relative; z-index: 1; }
  .ad-spend-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 640px; margin: 34px auto 0; }
  .ad-spend-stat {
    background: #fff; border: 1px solid var(--ds-line); border-radius: 14px; padding: 20px 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.03), 0 20px 40px -26px rgba(16,24,40,.18);
  }
  .ad-spend-stat-num { font-size: 24px; font-weight: 800; color: var(--ds-green); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .ad-spend-stat-label { font-size: 12.5px; color: var(--ds-soft); margin-top: 5px; line-height: 1.35; }
  @media (max-width: 560px) {
    .ad-spend-stats { grid-template-columns: 1fr; max-width: 440px; }
  }

/* =====================================================================
   V41: ad-spend "Skin in the game" -> two-column layout.
   Message + stats on the left, receipt as hero proof on the right.
   Tighter, denser, drives the number home next to the claim.
   ===================================================================== */
.ad-spend .container { text-align: left !important; }
.ad-spend-grid {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 420px);
  gap: 60px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.ad-spend-copy { text-align: left !important; }
.ad-spend-copy .section-eyebrow { margin: 0 0 18px !important; }
.ad-spend-head { max-width: none !important; margin: 0 !important; text-align: left !important; }
.ad-spend h2 {
  text-align: left !important;
  max-width: 15ch !important;
  margin: 0 0 16px !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.06 !important;
}
.ad-spend-lede {
  text-align: left !important;
  margin: 0 !important;
  max-width: 46ch !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ds-soft) !important;
}
/* stats become a tight row inside the left column */
.ad-spend-stats {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  max-width: none !important;
  margin: 30px 0 0 !important;
}
.ad-spend-stat { padding: 16px 14px !important; }
.ad-spend-stat-num { font-size: 21px !important; }
.ad-spend-stat-label { font-size: 12px !important; }
/* receipt column: keep hero, no extra top margin from old centred layout */
.ad-spend-grid .ad-receipt-wrap { margin: 0 !important; }
.ad-spend-grid .ad-receipt { margin: 0 !important; }
/* the foot line is now redundant with the denser layout -> hide it */
.ad-spend-foot { display: none !important; }

@media (max-width: 860px) {
  .ad-spend-grid { grid-template-columns: 1fr; gap: 40px; max-width: 460px; }
  .ad-spend .container { text-align: center !important; }
  .ad-spend-copy, .ad-spend-copy .section-eyebrow, .ad-spend-head,
  .ad-spend h2, .ad-spend-lede { text-align: center !important; }
  .ad-spend h2 { margin-left: auto !important; margin-right: auto !important; }
  .ad-spend-lede { margin-left: auto !important; margin-right: auto !important; }
  .ad-spend-grid .ad-receipt-wrap { margin: 0 auto !important; }
}
@media (max-width: 480px) {
  .ad-spend-stats { grid-template-columns: 1fr !important; max-width: 420px; margin-left: auto !important; margin-right: auto !important; }
}

/* =====================================================================
   V42: ad-spend polish pass -> clean 2-line headline, bold belief
   closer, accented stat tiles, highlighted hero total.
   ===================================================================== */
.ad-spend h2 {
  font-size: clamp(27px, 3vw, 38px) !important;
  max-width: none !important;
  line-height: 1.08 !important;
}
.ad-spend h2 .serif-accent { display: block; margin-top: 2px; }
/* tighter lede + a bold closer that drives the point home */
.ad-spend-lede { margin: 0 0 0 !important; max-width: 44ch !important; }
.ad-spend-close {
  margin: 16px 0 0 !important;
  max-width: 42ch !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--ds-ink) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
}
/* stat tiles get a green top accent so they read as intentional */
.ad-spend-stat { position: relative; overflow: hidden; }
.ad-spend-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ds-green); opacity: 0.92;
}
.ad-spend-stat-num { font-size: 22px !important; }
/* frame the hero number so it pops as the centre of gravity */
.ad-receipt-total {
  background: var(--ds-green-tint) !important;
  margin: 6px -10px !important;
  padding: 15px 12px 16px !important;
  border-radius: 12px !important;
}
@media (max-width: 860px) {
  .ad-spend-close { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* =====================================================================
   V43: ad-spend copy expansion -> middle "they spend clients' money,
   we spend ours" paragraph between lede and bold closer.
   ===================================================================== */
.ad-spend-mid {
  margin: 14px 0 0 !important;
  max-width: 46ch !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: var(--ds-soft) !important;
}
@media (max-width: 860px) {
  .ad-spend-mid { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* =====================================================================
   V44: acorn mark inside the receipt's green square.
   ===================================================================== */
.ad-receipt-mark { display: inline-flex !important; align-items: center; justify-content: center; }
.ad-receipt-mark-img { height: 13px; width: auto; display: block; }

/* =====================================================================
   V45: hero headline was overflowing/clipping on small phones.
   Scale it down below 480px so the two forced lines fit cleanly.
   ===================================================================== */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(22px, 6.2vw, 34px) !important; letter-spacing: -0.02em !important; line-height: 1.08 !important; }
}

/* =====================================================================
   V46: stats tiles were rendering as uneven columns on phones (grid
   items couldn't shrink below content, so the wider tile overflowed to
   the screen edge). Force equal, shrinkable 2-up columns below 861px.
   ===================================================================== */
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stats-grid .stat-tile { min-width: 0 !important; }
}

/* =====================================================================
   V47: final / the-call eyebrow kept display:inline-block from the old
   dark-band design, which killed the flex gap so the dot sat flush
   against the text. Restore inline-flex + gap to match every other
   eyebrow (green-tint pill, spaced green dot).
   ===================================================================== */
.final .eyebrow, .final .section-eyebrow,
.the-call .eyebrow, .the-call .section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* =====================================================================
   V48: on mobile the ad-spend receipt stayed at its natural (narrow)
   content width while the copy and stat tiles went full-width, so it
   looked shrunken and misaligned. Make it fill the stacked column.
   ===================================================================== */
@media (max-width: 860px) {
  .ad-spend-grid .ad-receipt-wrap { width: 100% !important; max-width: 440px !important; margin: 0 auto !important; }
  .ad-spend-grid .ad-receipt { width: 100% !important; max-width: 440px !important; margin: 0 auto !important; }
}

/* =====================================================================
   V49: on mobile, hide the 3 ad-spend stat blocks ($/day, year, 100%).
   The headline, copy and receipt carry the point; the tiles add clutter
   on a narrow screen.
   ===================================================================== */
@media (max-width: 767px) {
  .ad-spend-stats { display: none !important; }
}

/* =====================================================================
   V50: when the ad-spend grid stacks (<=860px) it kept its 460px
   max-width but no auto margins, so on tablet it sat left-aligned with
   a big empty right gutter. Center the stacked column.
   ===================================================================== */
@media (max-width: 860px) {
  .ad-spend-grid { margin-left: auto !important; margin-right: auto !important; }
}