/*--------------------------------------------------------------
>>> FLEXIBLE PAGE TEMPLATE
----------------------------------------------------------------
Styles for every layout in the "Page Settings (New)" field group
(page_sections). Loaded on the homepage, the Flexible Page Template,
the contact page and the blog / search results.

1.0  Hero (layout: hero)
2.0  Intro with Tags (layout: intro_tags)
3.0  Pricing Cards (layout: pricing_cards)
4.0  Benefit Cards (layout: benefit_cards)
5.0  Trustpilot Review (layout: trustpilot_review)
6.0  Form CTA (layout: form_cta)
7.0  Phone layout for sections 1.0-6.0 (Figma Frame 68)
8.0  How To Reach (layout: how_to_reach)
9.0  Send Message (layout: send_message)
10.0 Hero options (Desktop Zoom, Hide ratings on phones)
11.0 Shared panel for sections 12.0-14.0
12.0 Feature Grid (layout: feature_grid)
13.0 Comparison Table (layout: comparison_table)
14.0 FAQ with CTA (layout: faq_cta)
15.0 Numbered Cards (layout: numbered_cards)
--------------------------------------------------------------*/

/* Regular body weight on every page that loads this file. "html body" so it
   beats global.css (body: medium), which loads after this file. */
/* No blue flash when tapping links, buttons, FAQ questions, plan toggles etc.
   on phones (this file loads on every Page Sections page). */
html {
    -webkit-tap-highlight-color: transparent;
}

html body {
    font-weight: var(--font-regular);
}


/* 1.0 Hero (layout: hero) */

.page-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-white);
}

.page-hero__container {
    position: relative;
    z-index: 2;
}

/* Section content sits in a --section-container-width container (root.css, centred on wider screens); section
   backgrounds and the hero photo (.page-hero__media, outside the container) stay full
   width. The header container is border-box, so it gets the 40px of padding on top to
   keep the logo on the same line as the hero content. */
@media (min-width: 1024px) {
    .container-lg {
        width: min(var(--section-container-width), calc(100% - 2 * var(--section-container-padding))) !important;
    }

    body:has(.page-hero) .site-header .container-lg,
    body .site-footer .container-lg {
        width: calc(var(--section-container-width) + 2 * var(--section-container-padding)) !important;
    }
}

/* The header is rendered by header.php and uses the same .container-lg as the
   sections below it, but header-footer-v2.css widens it to the full viewport
   (`.site-header .container-lg{max-width:100%}`). Under 1440px that leaves the
   header container wider than every page container, so the logo stops starting
   on the same line as the hero heading. Put the header container back on the
   global .container-lg geometry so the logo's left edge tracks the hero
   content. Applies to every page with the hero; the extra specificity is
   needed because this file is enqueued before header-footer-v2.css. */

.page-hero__content {
    padding: 5rem 0;
    max-width: 38rem;
}

.page-hero__title {
    margin: 0 0 1.25rem 0;
    font-size: var(--font-title-lg);
    font-weight: var(--font-semibold);
    line-height: 1.1;
    color: var(--color-heading);
}

.page-hero__title-accent {
    color: var(--color-primary);
}

.page-hero__subtitle {
    margin: 0 0 2rem 0;
    max-width: 32rem;
    font-size: var(--font-rg);
    line-height: 1.5;
    color: var(--color-heading);
}
.page-hero__subtitle strong {
    font-weight: var(--font-medium);
}

/* Hero buttons (Buttons repeater). Default look = the original homepage
   button. Weighted as two element selectors (html a:where(...)) so it beats
   the global a / a:hover colours. Dark is the default; Outline adds a border. */
:where(.page-hero__buttons) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

html a:where(.page-hero__btn) {
    display: inline-block;
    padding: var(--pad-button);
    border-radius: var(--radius-button);
    background-color: var(--color-button);
    color: var(--color-white);
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

html a:where(.page-hero__btn):is(:hover, :focus) {
    background-color: var(--color-grey-dark);
    color: var(--color-white);
}

html a:where(.page-hero__btn--outline) {
    /* Inner ring rather than a border, so Outline and Dark are the same size. */
    box-shadow: inset 0 0 0 2px var(--color-heading);
    background-color: transparent;
    color: var(--color-heading);
}

html a:where(.page-hero__btn--outline):is(:hover, :focus) {
    background-color: var(--color-button);
    color: var(--color-white);
}

/* Two or more buttons sit side by side: slimmer side padding so they fit
   (a single button keeps the wide look). Phones stack them full width. */
@media screen and (min-width: 769px) {
    .page-hero__buttons:has(> :nth-child(2)) > .page-hero__btn {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

/* Rating badges (Figma): one row each, logo then score then count, close together. */
.page-hero__ratings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0 0 0;
    padding: 0;
    list-style: none;
}

.page-hero__ratings > a,
.page-hero__ratings > span {
    display: block;
    color: inherit;
    text-decoration: none;
}

.page-hero__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-hero__rating-logo {
    width: auto;
    height: 24px;
    max-width: 100%;
}

/* The Trustpilot logo's star rises above the wordmark, so the word sits low in
   its box (caps at y 7.4-17.7 of 21): lift it 2px so it lines up with the text. */
.page-hero__rating--trustpilot .page-hero__rating-logo {
    position: relative;
    top: -2px;
}

.page-hero__rating-star {
    margin-right: 0.1em;
    color: var(--color-heading);
}

.page-hero__rating-score {
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    color: var(--color-heading);
    font-family: "Roboto", sans-serif;
}

.page-hero__rating-count {
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-heading);
    font-family: "Roboto", sans-serif;
}

.page-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width: 992px) {
    .page-hero {
        display: flex;
        align-items: center;
        /* min-height: 811px; */
    }

    .page-hero__container {
        width: 100%;
    }

    .page-hero__content {
        padding: 4rem 0;
        padding-bottom: 9rem;
    }

    .page-hero__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
}

@media screen and (max-width: 991px) {
    .page-hero__content {
        max-width: none;
        padding: 3rem 0 2rem;
    }

    .page-hero__title {
        font-size: var(--font-heading);
    }

    .page-hero__subtitle {
        max-width: none;
    }
}

@media screen and (max-width: 768px) {
    .page-hero__title {
        font-size: var(--font-subheading);
    }

    .page-hero__subtitle {
        font-size: var(--font-sm);
    }

    html a:where(.page-hero__btn) {
        display: block;
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Hero photo: one full-width background at every size, never a separate
   box.
   - 992px+: fills the hero behind the text, anchored right (Figma hero), with a
     white fade over the top (Figma: ~80% at the hero top, gone ~150px lower).
   - Below 1440px the people come closer to the text, so the text column is
     capped by screen width and a white fade from the left keeps the heading
     readable.
   - Tablets and phones: the photo runs edge to edge under the button, behind
     the ratings, fading in from white, cropped in around a focal point
     (Figma mobile). No padding or rounded corners.
   The photo sits above nothing but the hero background and below the text. */
@media screen and (min-width: 992px) {

    /* 680px as in Figma up to 1920px wide, then grows with the screen so very
       wide screens do not over-zoom the photo and crop heads. */
    .page-hero {
        min-height: max(680px, 35.4vw);
    }

    /* Vertical anchor: 30% by default, Desktop Focus Y field overrides. */
    .page-hero .page-hero__media img {
        object-position: right var(--hero-desktop-y, 30%);
    }

    .page-hero .page-hero__content {
        max-width: min(38rem, 44vw);
    }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
    .page-hero {
        min-height: 600px;
    }

    .page-hero .page-hero__content {
        max-width: 37vw;
        padding: 3.5rem 0 5rem;
    }

    .page-hero .page-hero__title {
        font-size: var(--font-title);
    }
}

@media screen and (max-width: 991px) {
    .page-hero .page-hero__media {
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
}

/* Phone/tablet crop: the photo covers a 375:260 box and is zoomed in around a
   focal point (% of the photo) that stays put. Defaults suit a photo with the
   subject right of centre (the Figma mobile hero); a hero can override them
   with the Mobile Zoom / Mobile Focus fields (inline CSS variables). */
@media screen and (max-width: 991px) {
    .page-hero .page-hero__media {
        aspect-ratio: 375 / 260;
    }

    .page-hero .page-hero__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: var(--hero-focus-x, 69.4%) var(--hero-focus-y, 19.6%);
        transform: scale(var(--hero-mobile-zoom, 1.65));
        transform-origin: var(--hero-focus-x, 69.4%) var(--hero-focus-y, 19.6%);
    }
}

/* Pull the photo up so it starts ~10px under the buttons and runs behind the
   ratings. The pull depends on how many rating rows there are (0, 1 or 2+). */
@media screen and (min-width: 769px) and (max-width: 991px) {
    .page-hero .page-hero__media {
        margin-top: -22px;
    }

    .page-hero:has(.page-hero__ratings > :nth-child(1)) .page-hero__media {
        margin-top: -67px;
    }

    .page-hero:has(.page-hero__ratings > :nth-child(2)) .page-hero__media {
        margin-top: -96px;
    }
}

@media screen and (max-width: 768px) {
    .page-id-33269 .page-hero {
        padding-bottom: 20px;
    }

    .page-id-33269 .page-hero .page-hero__media {
        display: none;
    }

    .page-hero .page-hero__media {
        margin-top: -46px;
    }

    .page-hero:has(.page-hero__ratings > :nth-child(1)) .page-hero__media {
        margin-top: -91px;
    }

    .page-hero:has(.page-hero__ratings > :nth-child(2)) .page-hero__media {
        margin-top: -120px;
    }
}

/* White fades: above the photo, below the text, never blocking clicks. */
.page-hero .page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--color-white) 0%, rgba(255, 255, 255, 0.85) 12%, rgba(255, 255, 255, 0.4) 28%, rgba(255, 255, 255, 0) 45%);
}

@media screen and (min-width: 992px) {
    .page-hero .page-hero__media::after {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 150px);
    }
}

@media screen and (min-width: 992px) and (max-width: 1439px) {
    .page-hero .page-hero__media::after {
        background:
            linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 150px),
            linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.85) 34%, rgba(255, 255, 255, 0) 52%);
    }
}

/* >=1440px: keep the left readability scrim (the 34%/52% version above is capped
   at 1439px, which left the hero title sitting over the bare photo on large
   screens). Use pixel stops so it covers the ~608px content column without
   whitening half of an ultra-wide viewport. */
@media screen and (min-width: 1440px) {
    .page-hero .page-hero__media::after {
        background:
            linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 150px),
            linear-gradient(to right, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.85) 460px, rgba(255, 255, 255, 0) 780px);
    }
}

/* White Fade switched off in the hero: no fades over the photo. */
.page-hero--no-overlay .page-hero__media::after {
    content: none;
}

/* Review cards over the full-width hero photo (Figma hero, bottom right).
   Shown from 1280px, where the photo is full width; hidden below. */
.page-hero__reviews {
    display: none;
}

@media screen and (min-width: 1280px) {

    /* Pinned to the page container (.container-lg: min(--section-container-width, 100% - 40px),
       centred), 60px in from its right edge: 80px from the screen edge at
       1440px as in Figma, and inside the container on wide screens. */
    .page-hero .page-hero__reviews {
        position: absolute;
        right: calc((100% - min(var(--section-container-width), 100% - 40px)) / 2 + 60px);
        bottom: 77px;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 382px;
    }

    .page-hero__review {
        display: flex;
        width: 318px;
        min-height: 104px;
        box-sizing: border-box;
        overflow: hidden;
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-card-sm);
        background-color: var(--color-white);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    /* Odd cards sit to the right, even cards 64px left and overlapping. */
    .page-hero__review:nth-child(odd) {
        margin-left: 64px;
    }

    .page-hero__review + .page-hero__review {
        margin-top: -40px;
    }

    .page-hero__review-badge {
        display: flex;
        flex: 0 0 64px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .page-hero__review-rating {
        font-size: var(--font-xs);
        line-height: 1;
        letter-spacing: 0.02em;
    }

    .page-hero__review-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        padding: 1rem;
    }

    .page-hero__review-title {
        margin: 0;
        font-size: var(--font-sm);
        font-weight: var(--font-semibold);
        line-height: 1.3;
        color: var(--color-heading);
    }

    .page-hero__review-text {
        margin: 0;
        font-size: var(--font-xs);
        line-height: 1.5;
        color: var(--color-heading);
    }
}

/* The Intro with Tags panel (section.intro-tags) is pulled up 61px over
   the hero, so lift the review cards by the same amount to keep the 77px gap
   below them visible (as on pages without the overlap). */
@media screen and (min-width: 1280px) {
    .page-hero:has(+ .intro-tags) .page-hero__reviews,
    .page-hero:has(+ .plans-cards) .page-hero__reviews {
        bottom: calc(77px + 61px);
    }
}

/* Search box (Show Search in the hero, Figma Support hero): rounded field
   with a dark Search button inside it. */
.page-hero__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 32rem;
    padding: 0.375rem 0.375rem 0.375rem 1.25rem;
    border: 1.5px solid var(--color-heading);
    border-radius: var(--radius-button);
    background-color: var(--color-white);
}

.page-hero__search:focus-within {
    border-color: var(--color-primary);
}

.page-hero__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.625rem 0;
    border: 0;
    background: transparent;
    font-size: var(--font-sm);
    color: var(--color-heading);
    outline: none;
}

/* No blue autofill background when the browser fills in an old search. */
.page-hero__search-input:-webkit-autofill,
.page-hero__search-input:-webkit-autofill:hover,
.page-hero__search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--color-white) inset;
    -webkit-text-fill-color: var(--color-heading);
    transition: background-color 600000s 0s;
}

.page-hero__search-input::placeholder {
    color: var(--color-text);
}

/* Clear (x) button: swap the browser's blue cross for a theme-coloured one. */
.page-hero__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0 0.25rem 0 0.5rem;
    background-color: var(--color-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.page-hero__search-input::-webkit-search-cancel-button:hover {
    background-color: var(--color-heading);
}

.page-hero__search-button {
    flex: 0 0 auto;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: var(--radius-field);
    background-color: var(--color-button);
    color: var(--color-white);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.page-hero__search-button:hover,
.page-hero__search-button:focus {
    background-color: var(--color-grey-dark);
}

.page-hero__buttons + .page-hero__search {
    margin-top: 1rem;
}

/* /1.0 Hero (layout: hero) */

/* Layering: the hero keeps its photo / text layers to itself (isolation), and
   every section after it, plus the footer, sits on its own layer in page order.
   So each panel's rounded top and upward shadow are drawn over the section
   above it, with no per-section z-index. */
.page-hero {
    isolation: isolate;
}

.page-hero ~ section,
.page-hero ~ div.plans-cards,
.page-hero ~ .site-footer {
    position: relative;
}

/* Card slider arrows (phones; assets/js/sections/card-slider.js): round white
   buttons centred on the edges of the centred card. Hidden on larger screens. */
.pricing-cards__slider {
    position: relative;
}

.card-slider__arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle);
    background-color: var(--color-white);
    box-shadow: 0 4px 14px rgba(22, 22, 22, 0.12);
    cursor: pointer;
    transform: translateY(-50%);
}

.card-slider__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--color-heading);
    border-left: 2px solid var(--color-heading);
    transform: translate(-30%, -50%) rotate(-45deg);
}

/* The centred card starts 16px in from the slider (32px from the screen edge,
   minus the 16px gutter); the 40px button is centred on that edge. */
.card-slider__arrow--prev {
    left: calc(16px - 1.25rem);
}

.card-slider__arrow--next {
    right: calc(16px - 1.25rem);
}

.card-slider__arrow--next::before {
    transform: translate(-70%, -50%) rotate(135deg);
}

.card-slider__arrow:disabled {
    cursor: default;
}

.card-slider__arrow:disabled::before {
    opacity: 0.25;
}

/* 2.0 Intro with Tags (layout: intro_tags) */

/* Figma Frame 13: the service intro + cover plans are one white panel — 64px
   top radius, 64px top padding, and an upward drop shadow that reads over the
   hero photo it overlaps. The pricing-cards row carries the panel's 140px tail. */
section.intro-tags {
    position: relative;
    z-index: 2;
    padding: 4rem 0 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}

/* Only curve up over the hero photo; mid-page (e.g. Our Services after another
   white panel) it sits below with a normal gap instead of overlapping it. */
.page-hero + section.intro-tags {
    margin-top: -61px;
}

.intro-tags__container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
}

.intro-tags__content {
    flex: 1 1 52%;
    min-width: 0;
}

/* No service chips: let the heading and copy use the full width instead of
   sitting in the left 52% with an empty right half. */
.intro-tags--no-chips .intro-tags__content {
    flex-basis: 100%;
}

.intro-tags__title {
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    color: var(--color-heading);
    margin: 0 0 1rem 0;
}

.intro-tags__title-accent {
    color: var(--color-primary);
}

.intro-tags__body {
    font-size: var(--font-sm);
    line-height: 28px;
    color: var(--color-text);
    max-width: 46rem;
}

.intro-tags__body p {
    margin: 0;
    font-size: var(--font-lg);
}

/* Intro CTA button (optional) — new-design dark button. */
.intro-tags__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.75rem;
    padding: var(--pad-button);
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1;
    color: var(--color-white);
    background: var(--color-button);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.intro-tags__button:hover,
.intro-tags__button:focus {
    background: var(--color-grey-dark);
    color: var(--color-white);
}

.intro-tags__chips {
    flex: 1 1 34%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.intro-tags__chip {
    padding: 0.625rem 1rem;
    border-radius: var(--radius-pill);
    background-color: #F5F5F5;
    color: var(--color-black);
    font-size: var(--font-sm);
    line-height: 1.2;
    white-space: nowrap;
}

@media screen and (max-width: 991px) {
    .intro-tags__container {
        gap: 24px;
    }

    .intro-tags__title {
        font-size: var(--font-subheading);
    }
}

@media screen and (max-width: 768px) {
    section.intro-tags {
        padding: 3rem 0;
    }

    .intro-tags__container {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .intro-tags__title {
        font-size: var(--font-subheading-small);
    }

    .intro-tags__body {
        font-size: var(--font-xs);
        max-width: none;
    }

    .intro-tags__chips {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .intro-tags__chip {
        padding: 0.625rem 1rem;
        font-size: var(--font-xxs);
        white-space: normal;
    }
}

/* /2.0 Intro with Tags (layout: intro_tags) */

/* 3.0 Pricing Cards (layout: pricing_cards) */

/* Figma Frame 13: 80px gap between the intro and the cards, 140px tail below
   them. No radius/shadow of its own — it continues the intro-tags panel. */
.pricing-cards {
    margin-top: 5rem;
    padding-bottom: 6rem;
    background-color: var(--color-white);
}

.pricing-cards__list {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-cards__item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.pricing-cards__card {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    padding: var(--pad-card);
    border-radius: var(--radius-card);
    background-color: var(--color-white);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.06);
}

.pricing-cards__head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pricing-cards__icon {
    display: block;
    /* align-self keeps the icon at its own width — as a column flex item it
       would otherwise stretch and render centred. */
    align-self: flex-start;
    width: auto;
    height: 40px;
}

.pricing-cards__intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pricing-cards__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.pricing-cards__price {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pricing-cards__price-label {
    font-size: var(--font-sm);
    line-height: 1.75;
    letter-spacing: -0.03em;
    color: #888888;
}

.pricing-cards__price-value {
    margin: 0;
    font-size: var(--font-xxl);
    font-weight: var(--font-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.pricing-cards__price-unit {
    font-size: var(--font-lg);
    font-weight: var(--font-extrabold);
    letter-spacing: normal;
}

.pricing-cards__body {
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

/* The design emphasises key phrases with the heading colour, not extra weight. */
.pricing-cards__body strong {
    font-weight: inherit;
    color: var(--color-heading);
}

.pricing-cards__body p {
    margin: 0;
}

.pricing-cards__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: auto;
    padding: var(--pad-button);
    border-radius: var(--radius-button);
    background-color: var(--color-button);
    color: var(--color-white);
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.pricing-cards__button:hover,
.pricing-cards__button:focus {
    background-color: var(--color-grey-dark);
    color: var(--color-white);
}

@media screen and (max-width: 1199px) {
    .pricing-cards__title {
        font-size: var(--font-subheading-small);
    }

    .pricing-cards__body {
        font-size: var(--font-rg);
    }

    .pricing-cards__button {
        font-size: var(--font-rg);
    }
}

@media screen and (max-width: 991px) {
    .pricing-cards {
        padding-bottom: 5rem;
    }

    .pricing-cards__list {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .pricing-cards__item {
        flex: 1 1 calc(50% - 0.75rem);
    }

    .pricing-cards__card {
        min-height: 0;
        gap: 2rem;
        padding: 1.75rem;
    }
}

@media screen and (max-width: 768px) {
    .pricing-cards {
        padding-bottom: 3rem;
    }

    .pricing-cards__item {
        flex: 1 1 100%;
    }

    .pricing-cards__card {
        gap: 1.5rem;
        padding: 1.5rem;
        border-radius: var(--border-radius-md);
    }

    .pricing-cards__body {
        font-size: var(--font-sm);
    }

    .pricing-cards__price-value {
        font-size: var(--font-xl);
    }

    .pricing-cards__button {
        font-size: var(--font-sm);
        padding: 0.9375rem 1.5rem 1rem;
        border-radius: var(--border-radius-xs);
    }
}

/* /3.0 Pricing Cards (layout: pricing_cards) */

/* 4.0 Benefit Cards (layout: benefit_cards) */

/* Figma Frame 20: a white panel with a 64px top radius and an upward drop
   shadow, 64px above the intro and 140px below the cards. */
.benefit-cards {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.benefit-cards__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 588px;
    margin: 0 0 4rem 0;
}

.benefit-cards__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.27;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.benefit-cards__accent {
    color: var(--color-primary);
}

.benefit-cards__subtitle {
    margin: 0;
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.benefit-cards__list {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit-cards__item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.benefit-cards__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    width: 100%;
    min-height: 237px;
    padding: var(--pad-card);
    border: 2px solid #F5F5F5;
    border-radius: var(--radius-card);
}

/* Dormant until an illustration is set: 10% opacity behind the copy. */
.benefit-cards__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: auto;
    max-width: calc(100% - 4rem);
    max-height: calc(100% - 4rem);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.benefit-cards__card-title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: var(--font-subtitle);
    font-weight: var(--font-semibold);
    line-height: 1.417;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.benefit-cards__card-text {
    position: relative;
    z-index: 2;
    margin: auto 0 0 0;
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

@media screen and (max-width: 1199px) {
    .benefit-cards__list {
        flex-wrap: wrap;
    }

    .benefit-cards__item {
        flex: 1 1 calc(50% - 1rem);
    }

    .benefit-cards__title {
        font-size: var(--font-heading);
    }

    .benefit-cards__card {
        min-height: 0;
    }
}

@media screen and (max-width: 991px) {
    .benefit-cards {
        padding: 3rem 0 5rem;
    }

    .benefit-cards__intro {
        margin-bottom: 3rem;
    }

    .benefit-cards__title {
        font-size: var(--font-subheading);
    }

    .benefit-cards__list {
        gap: 1.5rem;
    }

    .benefit-cards__item {
        flex: 1 1 calc(50% - 0.75rem);
    }

    .benefit-cards__card {
        gap: 1.5rem;
        padding: 1.75rem;
    }

    .benefit-cards__card-title {
        font-size: var(--font-rg);
    }

    .benefit-cards__card-text {
        font-size: var(--font-sm);
    }
}

@media screen and (max-width: 768px) {
    .benefit-cards {
        padding: 2rem 0 3rem;
    }

    .benefit-cards__intro {
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

    .benefit-cards__title {
        font-size: var(--font-subheading-small);
    }

    .benefit-cards__subtitle {
        font-size: var(--font-sm);
    }

    .benefit-cards__item {
        flex: 1 1 100%;
    }

    .benefit-cards__card {
        gap: 1rem;
        padding: 1.5rem;
        border-radius: var(--border-radius-md);
    }

    .benefit-cards__card-text {
        font-size: var(--font-xs);
    }
}

/* /4.0 Benefit Cards (layout: benefit_cards) */

/* 5.0 Trustpilot Review (layout: trustpilot_review) */

/* Figma Frame 19: white panel, 64px top radius + upward shadow, 64px top /
   120px bottom padding. */
.trust-reviews {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.trust-reviews__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
    margin-bottom: 64px;
}

.trust-reviews__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 510px;
    margin: 0 0 4rem 0;
}

.trust-reviews__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.27;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.trust-reviews__accent {
    color: var(--color-primary);
}

.trust-reviews__subtitle {
    margin: 0;
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.trust-reviews__logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.trust-reviews__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-reviews__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* /5.0 Trustpilot Review (layout: trustpilot_review) */
/* 6.0 Form CTA (layout: form_cta) */

/* Figma Frame 16: white panel, 64px top radius + upward shadow, 64px above the
   content and 140px below it. */
.form-cta {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

/* Desktop: when the form panel is the first section it must overlap the hero so
   its 64px top curve cuts into the hero photo (mobile already does this at -32px,
   see 1.0 hero). Without the pull-up the rounded corners reveal the white page
   background and the curve is invisible. */
@media screen and (min-width: 769px) {
    .page-hero + .form-cta {
        margin-top: -64px;
    }
}

.form-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 120px;
}

.form-cta__content {
    width: 100%;
    max-width: 588px;
}

.form-cta__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.27;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.form-cta__accent {
    color: var(--color-primary);
}

.form-cta__subtitle {
    margin: 1rem 0 0 0;
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.form-cta__media {
    flex: 0 1 492px;
    min-width: 0;
}

.form-cta__image {
    display: block;
    width: 100%;
    height: auto;
}

/* No image: the form is a single centered column (used for long forms, e.g. the
   engineer application). */
.form-cta--no-image .form-cta__inner {
    justify-content: center;
}

.form-cta--no-image .form-cta__content {
    max-width: 820px;
}

/* The engineer form sits in a grey card like the contact page's "Send us a
   message" section. */
.form-cta__form:has(.gform_legacy_markup_wrapper) {
    margin-top: 1.5rem;
    padding: 2.5rem;
    background: var(--color-grey-light);
    border-radius: var(--border-radius-md);
}

/* No image: the card is a single centered column. */
.form-cta--no-image .form-cta__form:has(.gform_legacy_markup_wrapper) {
    max-width: 760px;
    margin: 2rem auto 0;
}

/* With an image: the (long) form takes the main column and the image sits in a
   narrower, sticky side column. */
.form-cta:has(.gform_legacy_markup_wrapper):not(.form-cta--no-image) .form-cta__inner {
    gap: 3rem;
    align-items: start;
}

.form-cta:has(.gform_legacy_markup_wrapper):not(.form-cta--no-image) .form-cta__content {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.form-cta:has(.gform_legacy_markup_wrapper):not(.form-cta--no-image) .form-cta__media {
    flex: 0 0 400px;
    position: sticky;
    top: 7rem;
    align-self: flex-start;
}

.form-cta:has(.gform_legacy_markup_wrapper) .form-cta__image {
    border-radius: var(--border-radius-md);
}

/* Legacy-markup Gravity Forms (engineer application, form 1) styled to match the
   "Send us a message" form: white fields on the grey card, orange focus + submit. */
.form-cta__form .gform_legacy_markup_wrapper,
.form-cta__form .gform_legacy_markup_wrapper form {
    margin: 0;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_required {
    display: none;
}

.form-cta__form .gform_legacy_markup_wrapper input[type="text"],
.form-cta__form .gform_legacy_markup_wrapper input[type="email"],
.form-cta__form .gform_legacy_markup_wrapper input[type="tel"],
.form-cta__form .gform_legacy_markup_wrapper select,
.form-cta__form .gform_legacy_markup_wrapper textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    padding: 1rem 1.25rem !important;
    border: 2px solid var(--color-border-light) !important;
    border-radius: var(--border-radius-sm) !important;
    background-color: var(--color-white) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-rg) !important;
    line-height: 1.4 !important;
    color: var(--color-heading) !important;
    transition: border-color 0.2s ease;
}

.form-cta__form .gform_legacy_markup_wrapper textarea {
    min-height: 140px;
    resize: vertical;
}

.form-cta__form .gform_legacy_markup_wrapper input::placeholder {
    color: var(--color-grey);
    opacity: 1;
}

.form-cta__form .gform_legacy_markup_wrapper input:focus,
.form-cta__form .gform_legacy_markup_wrapper select:focus,
.form-cta__form .gform_legacy_markup_wrapper textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-cta__form .gform_legacy_markup_wrapper .gfield {
    margin-bottom: 1rem;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_label,
.form-cta__form .gform_legacy_markup_wrapper legend.gfield_label {
    font-family: var(--font-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_checkbox label,
.form-cta__form .gform_legacy_markup_wrapper .gfield_radio label {
    color: var(--color-text);
    font-size: var(--font-rg);
}

.form-cta__form .gform_legacy_markup_wrapper .gform_footer {
    margin-top: 1.5rem;
    padding: 0;
}

.form-cta__form .gform_legacy_markup_wrapper input[type="submit"] {
    min-width: 150px;
    padding: var(--pad-button);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.form-cta__form .gform_legacy_markup_wrapper input[type="submit"]:hover,
.form-cta__form .gform_legacy_markup_wrapper input[type="submit"]:focus {
    background-color: var(--color-primary-dark) !important;
}

/* --- Field question labels (shown ones: checkbox / consent questions) --- */
.form-cta__form .gform_legacy_markup_wrapper .gfield_label,
.form-cta__form .gform_legacy_markup_wrapper legend.gfield_label {
    font-size: var(--font-rg) !important;
    font-weight: var(--font-medium) !important;
    line-height: 1.4 !important;
    color: var(--color-heading) !important;
    margin-bottom: 0.5rem !important;
}

/* --- Checkboxes / radios --- */
.form-cta__form .gform_legacy_markup_wrapper .gfield_checkbox,
.form-cta__form .gform_legacy_markup_wrapper .gfield_radio {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-cta__form .gform_legacy_markup_wrapper .gchoice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield-choice-input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
}

.form-cta__form .gform_legacy_markup_wrapper .gchoice label,
.form-cta__form .gform_legacy_markup_wrapper .gform-field-label--type-inline {
    margin: 0 !important;
    font-size: var(--font-rg) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
}

/* --- Consent (Terms & Conditions) --- */
.form-cta__form .gform_legacy_markup_wrapper .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_container_consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 3px 0 0 !important;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_consent_label {
    font-size: var(--font-rg);
    color: var(--color-text);
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_consent_description {
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: var(--font-sm) !important;
    color: var(--color-text) !important;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_consent_description a {
    color: var(--color-primary);
}

/* --- Validation: subtle (match the contact form — per-field red text only) --- */
.form-cta__form .gform_legacy_markup_wrapper .validation_error,
.form-cta__form .gform_legacy_markup_wrapper .gform_validation_errors {
    display: none !important;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield.gfield_error {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_error input,
.form-cta__form .gform_legacy_markup_wrapper .gfield_error select,
.form-cta__form .gform_legacy_markup_wrapper .gfield_error textarea {
    border-color: #c0392b !important;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield_error .gfield_label,
.form-cta__form .gform_legacy_markup_wrapper .gfield_error .gform-field-label,
.form-cta__form .gform_legacy_markup_wrapper .gfield_error label {
    color: var(--color-heading) !important;
}

.form-cta__form .gform_legacy_markup_wrapper .validation_message,
.form-cta__form .gform_legacy_markup_wrapper .gfield_validation_message {
    margin-top: 0.4rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #c0392b !important;
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
}

/* --- Uniform field spacing + composite (address / name) layout --- */
.form-cta__form .gform_legacy_markup_wrapper .gform_fields {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield {
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
    clear: both;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield:last-child {
    margin-bottom: 0 !important;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_complex {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    width: 100%;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.ginput_full {
    flex: 0 0 100%;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.ginput_left,
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.ginput_right,
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.name_first,
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.name_last {
    flex: 0 1 calc(50% - 0.625rem);
}

/* Hide the composite sub-labels (they are set to hidden but reserve space). */
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex label {
    display: none !important;
}

/* --- Checkbox / radio alignment --- */
.form-cta__form .gform_legacy_markup_wrapper .gchoice {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield-choice-input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
}

/* Zero GF's own container/input margins so the only vertical spacing is the
   uniform 1.25rem gap (gfield margin-bottom for top-level fields, ginput_complex
   gap inside the address/name composites). */
.form-cta__form .gform_legacy_markup_wrapper .ginput_container {
    margin: 0 !important;
    padding: 0 !important;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_complex {
    gap: 1.25rem !important;
}

.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span > input,
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span > select,
.form-cta__form .gform_legacy_markup_wrapper .gfield input,
.form-cta__form .gform_legacy_markup_wrapper .gfield select {
    margin: 0 !important;
}

.form-cta__form .gform_legacy_markup_wrapper .gfield--type-honeypot,
.form-cta__form .gform_legacy_markup_wrapper .gform_validation_container {
    display: none !important;
}

/* GF's float-clear + hidden inputs inside a composite become empty flex rows
   (adding a stray gap, e.g. after Postcode on mobile) — drop them from the flow. */
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > .gf_clear,
.form-cta__form .gform_legacy_markup_wrapper .ginput_complex > .gform_hidden {
    display: none !important;
}

/* Tighten the spacing between radio/checkbox choices (Yes / No). */
.form-cta__form .gform_legacy_markup_wrapper .gchoice {
    margin: 0 !important;
    padding: 0 !important;
}

/* Gravity Form ("Boiler Cover", id 16) styled to the Figma field spec. The
   selectors carry .gform_wrapper.gravity-theme so they outrank the plugin's own
   grid and input rules. */
.form-cta__form {
    max-width: 522px;
    margin-top: 2rem;
}

.form-cta__form .gform_wrapper.gravity-theme,
.form-cta__form .gform_wrapper.gravity-theme form {
    margin: 0;
}

.form-cta__form .gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 1rem;
    row-gap: 1rem;
}

.form-cta__form .gform_wrapper.gravity-theme .gform_required_legend,
.form-cta__form .gform_wrapper.gravity-theme .gfield_required {
    display: none;
}

.form-cta__form .gform_wrapper.gravity-theme input[type="text"],
.form-cta__form .gform_wrapper.gravity-theme input[type="email"],
.form-cta__form .gform_wrapper.gravity-theme input[type="tel"] {
    width: 100%;
    height: 58px;
    padding: 10px 16px;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-button);
    background-color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--font-lg);
    color: var(--color-heading);
    transition: border-color 0.2s ease;
}

.form-cta__form .gform_wrapper.gravity-theme input::placeholder {
    color: var(--color-text);
    opacity: 1;
}

.form-cta__form .gform_wrapper.gravity-theme input[type="text"]:focus,
.form-cta__form .gform_wrapper.gravity-theme input[type="email"]:focus,
.form-cta__form .gform_wrapper.gravity-theme input[type="tel"]:focus {
    outline: none;
    border-color: var(--color-heading);
}

.form-cta__form .gform_wrapper.gravity-theme .gform_footer {
    display: flex;
    margin: 1.5rem 0 0;
    padding: 0;
}

.form-cta__form .gform_wrapper.gravity-theme input[type="submit"] {
    min-width: 130px;
    height: 58px;
    padding: var(--pad-button);
    border: 0;
    border-radius: var(--radius-button);
    /* !important beats the global .button rule in theme/helpers.css — Gravity Forms
       gives the submit a `button` class. */
    background-color: var(--color-button) !important;
    color: var(--color-white) !important;
    font-family: var(--font-primary);
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.form-cta__form .gform_wrapper.gravity-theme input[type="submit"]:hover,
.form-cta__form .gform_wrapper.gravity-theme input[type="submit"]:focus {
    background-color: var(--color-grey-dark) !important;
    color: var(--color-white) !important;
}

.form-cta__form .gform_wrapper.gravity-theme .gform_validation_errors {
    display: none;
}

@media screen and (max-width: 1199px) {
    .form-cta__inner {
        gap: 3rem;
    }

    .form-cta__title {
        font-size: var(--font-heading);
    }
}

@media screen and (max-width: 991px) {
    .form-cta {
        padding: 3rem 0 5rem;
    }

    .form-cta__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2.5rem;
    }

    .form-cta__content,
    .form-cta__media {
        max-width: none;
    }

    .form-cta__title {
        font-size: var(--font-subheading);
    }

    .form-cta__media {
        flex: 0 0 auto;
    }

    .form-cta__image {
        margin: 0 auto;
        max-width: 492px;
    }
}

@media screen and (max-width: 768px) {
    .form-cta {
        padding: 2rem 0 3rem;
    }

    .form-cta__title {
        font-size: var(--font-subheading-small);
    }

    .form-cta__subtitle {
        font-size: var(--font-sm);
    }

    .form-cta__form {
        margin-top: 1.5rem;
    }

    .form-cta__form .gform_wrapper.gravity-theme input[type="submit"] {
        width: 100%;
        font-size: var(--font-sm);
    }
}

/* /6.0 Form CTA (layout: form_cta) */

/* 7.0 Phone layout for sections 1.0-6.0 (Figma Frame 68, 375px) */

/* Deliberately the last block in the file so it refines the per-section mobile
   rules above. Frame 68 spec: page background #FAF9F7, each section a white
   panel with 32px rounded top corners, 16px gutters, 32px top / 120px bottom
   padding, and the two card rows as horizontal scrollers (8px gap, next card
   peeking). The Trustpilot section is the client's own widget, so it is left
   exactly as it is. */

@media screen and (max-width: 768px) {

    /* ---------------------------------------------- page and panels ---- */

    /* Frame 68: the mobile page is off-white so the white rounded panels read
       as separate cards. */
    body.home {
        background-color: #FAF9F7;
    }

    .page-hero,
    .intro-tags,
    .pricing-cards,
    .benefit-cards,
    .form-cta {
        background-color: var(--color-white);
    }

    /* Figma uses 16px gutters; the theme containers ship 20px. */
    .page-hero > [class*="container-"],
    .intro-tags > [class*="container-"],
    .pricing-cards > [class*="container-"],
    .benefit-cards > [class*="container-"],
    .form-cta > [class*="container-"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Header container takes the same 16px gutters, so the logo keeps tracking
       the hero content on mobile as well. */
    body:has(.page-hero) .site-header .container-lg {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Frame 68: the upward panel shadows carry over from the base rules (their
       values match Frame 68), and the desktop 64px top radius is re-set to 32
       per section below. Each rounded panel overlaps the one above by 32px so
       the shadow does the separating — no empty strip. pricing-cards is the lower
       half of the service panel, so it just continues (margin 0). */
    .pricing-cards {
        margin-top: 0;
    }

    .benefit-cards,
    .trust-reviews,
    .form-cta,
    .faq-cta,
    .feature-grid,
    .compare-section {
        margin-top: -32px;
    }

    /* ------------------------------------------------------- 1.0 hero ---- */

    .page-hero {
        padding: 0;
    }

    .page-hero__content {
        max-width: none;
        padding: 32px 0 56px;
    }

    .page-hero__title {
        margin-bottom: 1rem;
        font-size: 32px;
        line-height: 1.125;
        font-weight: var(--font-semibold);
    }

    .page-hero__subtitle {
        margin-bottom: 2rem;
        max-width: none;
        font-size: 16px;
        line-height: 1.625;
    }

    html a:where(.page-hero__btn) {
        display: block;
        padding: 1.0625rem 1.5rem;
        font-size: 18px;
        text-align: center;
    }

    .page-hero__ratings {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    /* ---------------------------------------- 2.0 service intro panel ---- */

    /* Service intro and cover plans are one panel in the mobile design, so the
       rounded top and the 120px tail live on the outer two edges only. */
    section.intro-tags {
        position: relative;
        z-index: 2;
        margin-top: -32px;
        padding: 32px 0 0;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .intro-tags__container {
        gap: 2rem;
    }

    .intro-tags__title,
    .benefit-cards__title,
    .form-cta__title {
        font-size: 32px;
        line-height: 1.286;
    }

    .intro-tags__body,
    .benefit-cards__subtitle,
    .form-cta__subtitle {
        font-size: 16px;
        line-height: 1.625;
    }

    .intro-tags__chips {
        gap: 0.75rem;
    }

    .intro-tags__chip {
        padding: 0.5rem 1rem;
        font-size: var(--font-sm);
        white-space: nowrap;
    }

    /* --------------------------------------------- card row scrollers ---- */

    /* Native horizontal scrolling with snap — no JS. The negative margin lets
       the row bleed to the screen edges while the first card still lines up
       with the 16px gutter. */
    .pricing-cards__list,
    .benefit-cards__list {
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pricing-cards__list::-webkit-scrollbar,
    .benefit-cards__list::-webkit-scrollbar {
        display: none;
    }

    .pricing-cards__item,
    .benefit-cards__item {
        scroll-snap-align: start;
    }

    /* Pricing cards (Figma): one card centred, 24px of the next / previous
       showing either side, room above and below for the card shadow, and round
       arrows over the card edges (assets/js/sections/card-slider.js). */
    .pricing-cards__list {
        margin: -24px -16px -32px;
        padding: 24px 32px 32px;
        scroll-padding: 0 32px;
    }

    .pricing-cards__item {
        flex: 0 0 calc(100vw - 64px);
        scroll-snap-align: center;
    }

    .pricing-cards__slider .card-slider__arrow {
        display: block;
    }

    .benefit-cards__item {
        flex: 0 0 220px;
    }

    /* ------------------------------------------------ 3.0 cover plans ---- */

    .pricing-cards {
        padding: 48px 0 100px;
    }

    .pricing-cards__card {
        gap: 1.5rem;
        min-height: 0;
        padding: 24px;
        border-radius: var(--radius-card-sm);
    }

    .pricing-cards__title {
        font-size: 24px;
    }

    .pricing-cards__price-label {
        font-size: var(--font-xs);
    }

    .pricing-cards__price-value {
        font-size: 28px;
    }

    .pricing-cards__price-unit {
        font-size: var(--font-sm);
    }

    .pricing-cards__body {
        font-size: 16px;
        line-height: 1.625;
    }

    .pricing-cards__button {
        padding: 1rem 1.5rem 1.0625rem;
        border-radius: var(--radius-button);
        font-size: var(--font-sm);
    }

    /* ------------------------------------------------- 4.0 why choose ---- */

    .benefit-cards {
        padding: 32px 0 100px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .benefit-cards__intro {
        gap: 1rem;
        margin-bottom: 48px;
    }

    .benefit-cards__card {
        gap: 1rem;
        min-height: 280px;
        padding: 16px;
        border-radius: var(--radius-card-sm);
    }

    .benefit-cards__card-title {
        font-size: 24px;
        line-height: 1.417;
    }

    .benefit-cards__card-text {
        font-size: 16px;
        line-height: 1.625;
    }

    /* ----------------------------------------------- 6.0 solution CTA ---- */

    .form-cta {
        padding: 32px 0 0px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .form-cta__inner {
        gap: 0;
    }

    /* The mobile design drops the masked photo. */
    .form-cta__media {
        display: none;
    }

    .form-cta__subtitle {
        margin-top: 1rem;
    }

    .form-cta__form {
        max-width: none;
    }

    .form-cta__form .gform_wrapper.gravity-theme input[type="submit"] {
        width: 100%;
    }

    /* ------------------------------------------------- 5.0 trustpilot ---- */

    /* Chrome only: panel, gutters and a stacked header. The review cards come
       from the client's TrustBox iframe, which is left exactly as it is. */
    /* 40px, not 100px: the TrustBox iframe already has ~40px of white space
       under its content, and the next panel overlaps this one by 32px. */
    .trust-reviews {
        padding: 32px 0 40px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .trust-reviews > [class*="container-"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    .trust-reviews__header {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 48px;
    }

    .trust-reviews__intro {
        gap: 1rem;
        max-width: none;
        margin: 0;
    }

    .trust-reviews__title {
        font-size: 28px;
        line-height: 1.286;
    }

    .trust-reviews__subtitle {
        font-size: 16px;
        line-height: 1.625;
    }

    /* Logos spread across the full width. */
    .trust-reviews__logos {
        width: 100%;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .trust-reviews__logo {
        flex-shrink: 1;
        min-width: 0;
    }

    .trust-reviews__logo img {
        max-height: 24px;
    }
}

/* /7.0 Phone layout for sections 1.0-6.0 (Figma Frame 68, 375px) */

@media screen and (min-width: 769px) {
    .form-cta__form .gform_wrapper.gravity-theme .gform_fields {
        column-gap: 1rem;
        grid-column-gap: 1rem;
    }

    .form-cta__form .gform_wrapper.gravity-theme .gfield.name,
    .form-cta__form .gform_wrapper.gravity-theme .gfield.telephone {
        grid-column: span 6;
    }

    .form-cta__form .gform_wrapper.gravity-theme .gfield.email {
        grid-column: span 12;
    }
}

/* 8.0 How To Reach (layout: how_to_reach) */
.how-to-reach {
    position: relative;
    z-index: 2;
    margin-top: -61px;
    padding: 4rem 0 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}

/* Followed by another panel (e.g. Feature Grid): leave room for its rounded top,
   like the other panels. Before Email List (contact page) no gap is needed, as that
   section sits 100px lower on its own. */
.how-to-reach:has(+ section:not(.send-message)) {
    padding-bottom: 6rem;
}

@media screen and (max-width: 768px) {
    .how-to-reach:has(+ section:not(.send-message)) {
        padding-bottom: 80px;
    }
}

/* Last section (footer follows, not a <section>): give it its own bottom padding. */
.how-to-reach:not(:has(+ section)) {
    padding-bottom: 6rem;
}

@media screen and (max-width: 768px) {
    .how-to-reach:not(:has(+ section)) {
        padding-bottom: 80px;
    }
}

.how-to-reach__header {
    max-width: 640px;
    margin-bottom: 3rem;
}

.how-to-reach__title {
    margin: 0 0 0.75rem;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    color: var(--color-heading);
}

.how-to-reach__title-accent {
    color: var(--color-primary);
}

.how-to-reach__subtitle {
    margin: 0;
    font-size: var(--font-lg);
    line-height: 1.5;
    color: var(--color-text);
}

.how-to-reach__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.how-to-reach__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3.5rem;
    min-height: 320px;
    padding: var(--pad-card);
    border-radius: var(--border-radius-md);
}

.how-to-reach__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.how-to-reach__icon img {
    width: auto;
    height: 40px;
}

.how-to-reach__badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    margin-bottom: 0.75rem;
}

.how-to-reach__card-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--font-lg);
}

.how-to-reach__card-heading {
    display: inline-block;
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    line-height: 1.2;
    text-decoration: none;
    color: inherit;
}

a.how-to-reach__card-heading:hover,
a.how-to-reach__card-heading:focus {
    text-decoration: none;
}

.how-to-reach__card-content {
    margin-top: 0.5rem;
    font-size: var(--font-rg);
    line-height: 1.6;
}

/* --- Light card (default) --- */
.how-to-reach__card--light {
    background: var(--color-white);
    box-shadow: 0px 0px 32.6px 0px #0000000F;
    color: var(--color-heading);
}

.how-to-reach__card--light .how-to-reach__card-label,
.how-to-reach__card--light .how-to-reach__card-content {
    color: var(--color-text);
}

/* --- Orange card --- */
.how-to-reach__card--orange {
    background: var(--color-primary);
    color: var(--color-white);
}

.how-to-reach__card--orange .how-to-reach__card-label,
.how-to-reach__card--orange .how-to-reach__card-content {
    color: var(--color-subdued-white);
}

/* --- Card button (shown when the link has a label) --- */
.how-to-reach__card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    align-self: stretch;
    width: 100%;
    margin-top: 1.5rem;
    padding: var(--pad-button);
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1;
    color: var(--color-white);
    background: var(--color-button);
    border: 0;
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.how-to-reach__card-button:hover,
.how-to-reach__card-button:focus {
    background: var(--color-grey-dark);
    color: var(--color-white);
}

/* Cards that have a button: flow content from the top (icon -> title -> copy)
   so titles line up across the row, and pin the button to the bottom. */
.how-to-reach__card:has(.how-to-reach__card-button) {
    justify-content: flex-start;
    gap: 1.5rem;
}

.how-to-reach__card:has(.how-to-reach__card-button) .how-to-reach__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.how-to-reach__card:has(.how-to-reach__card-button) .how-to-reach__card-content {
    margin-bottom: 1.5rem;
}

.how-to-reach__card:has(.how-to-reach__card-button) .how-to-reach__card-button {
    margin-top: auto;
}

.how-to-reach__card--orange .how-to-reach__card-button,
.how-to-reach__card--dark .how-to-reach__card-button {
    color: var(--color-heading);
    background: var(--color-white);
}

.how-to-reach__card--orange .how-to-reach__card-button:hover,
.how-to-reach__card--orange .how-to-reach__card-button:focus,
.how-to-reach__card--dark .how-to-reach__card-button:hover,
.how-to-reach__card--dark .how-to-reach__card-button:focus {
    color: var(--color-heading);
    background: var(--color-subdued-white);
}

/* --- Dark card --- */
.how-to-reach__card--dark {
    background: var(--color-heading);
    color: var(--color-white);
}

.how-to-reach__card--dark .how-to-reach__card-label,
.how-to-reach__card--dark .how-to-reach__card-content {
    color: var(--color-subdued-white);
}

@media screen and (max-width: 991px) {
    .how-to-reach__grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .how-to-reach {
        position: relative;
        z-index: 2;
        margin-top: -32px;
        padding: 32px 0 0;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .how-to-reach__header {
        margin-bottom: 2rem;
    }

    .how-to-reach__title {
        font-size: var(--font-subheading);
    }

    .how-to-reach__subtitle,
    .how-to-reach__card-label,
    .how-to-reach__card-content {
        font-size: 16px;
        line-height: 1.625;
    }

    .how-to-reach__card {
        min-height: 0;
        gap: 2.5rem;
    }

    .how-to-reach__card-heading {
        font-size: 26px;
        font-weight: var(--font-semibold);
    }
}

/* /8.0 How To Reach (layout: how_to_reach) */

/* 9.0 Send Message (layout: send_message)
   Left: Zoho Desk feedback widget in a grey card.  Right: email list card. */
.send-message {
    position: relative;
    z-index: 2;
    margin-top: 100px;
    padding: 4rem 0 5rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}

/* --- Full-width header --- */
.send-message__header {
    max-width: 760px;
    margin-bottom: 2rem;
}

.send-message__title {
    margin: 0 0 0.5rem;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    color: var(--color-heading);
}

.send-message__title-accent {
    color: var(--color-primary);
}

.send-message__subtitle {
    margin: 0;
    font-size: var(--font-lg);
    color: var(--color-text);
}

/* --- Two columns: form (wide, left) + emails (narrow, right) --- */
.send-message__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* --- Left: form card (grey) --- */
.send-message__form {
    padding: 2.5rem;
    background: var(--color-grey-light);
    border-radius: var(--border-radius-md);
}

/* --- Right: email list card (white, bordered) --- */
.send-message__emails {
    padding: 2.5rem 2rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
}

.send-message__emails-title {
    margin: 0 0 1.25rem;
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    color: var(--color-heading);
}

.send-message__email-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.send-message__email-item {
    padding: 0.875rem 1.25rem;
    background: #F6F6F6;
    border-radius: var(--border-radius-rg);
}

.send-message__email-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--font-xxs);
    color: var(--color-text);
}

.send-message__email-address {
    display: inline-block;
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1.3;
    color: var(--color-heading);
    text-decoration: none;
    word-break: break-word;
}

.send-message__email-address:hover,
.send-message__email-address:focus {
    color: var(--color-primary);
}

/* --- Zoho Desk feedback widget overrides --- */
#zsfeedbackwidgetdiv div#zsfeedbkrpanel,
#advwebForm {
    max-width: none;
    width: auto;
    background: transparent !important;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    font-family: var(--font-primary) !important;
}

#zsfeedbackwidgetdiv div#popupTitle {
    display: none;
}

#advwebForm {
    max-width: none !important;
}

/* Name + Email on one row */
#advwebForm .WF_NameEmailDiv {
    display: flex;
    gap: 1rem;
}

#advwebForm .WF_NameEmailDiv > div {
    flex: 1;
    min-width: 0;
}

#advwebForm .WF_NameEmailDiv .ml15 {
    margin-left: 0 !important;
}

div#screenshotTrigger {
    display: none !important;
}

.zspreattscreendiv .posrel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zspreattscreendiv {
    padding-top: 20px !important;
}

/* Field labels — the Zoho widget renders none, so inject them above each field. */
#advwebForm .WF_NameEmailDiv > div:first-child::before,
#advwebForm .WF_NameEmailDiv > div.ml15::before,
#advwebForm .feedbackformmdiv .mt15:has(#feedbackSubject)::before,
#advwebForm .feedbackformmdiv .mt15:has(#feedbackDescription)::before {
    content: "";
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    line-height: 1.2;
    color: var(--color-heading);
}

#advwebForm .WF_NameEmailDiv > div:first-child::before {
    content: "Name";
}

#advwebForm .WF_NameEmailDiv > div.ml15::before {
    content: "Email";
}

#advwebForm .feedbackformmdiv .mt15:has(#feedbackSubject)::before {
    content: "Subject";
}

#advwebForm .feedbackformmdiv .mt15:has(#feedbackDescription)::before {
    content: "Message";
}

#advwebForm #feedbNameTxtField,
#advwebForm #feedbEmailTxtField,
#advwebForm #feedbackSubject,
#advwebForm #feedbackDescription {
    width: 100%;
    height: auto;
    font-family: var(--font-primary) !important;
    font-size: var(--font-rg) !important;
    color: var(--color-heading) !important;
    background: var(--color-white) !important;
    border: 2px solid var(--color-border-light) !important;
    border-radius: var(--border-radius-sm) !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 1rem 1.25rem !important;
}

#advwebForm #feedbNameTxtField::placeholder,
#advwebForm #feedbEmailTxtField::placeholder,
#advwebForm #feedbackSubject::placeholder,
#advwebForm #feedbackDescription::placeholder {
    color: var(--color-grey);
}

#advwebForm #feedbNameTxtField:focus,
#advwebForm #feedbEmailTxtField:focus,
body #advwebForm #feedbackSubject:focus,
#advwebForm #feedbackDescription:focus {
    border-color: var(--color-primary) !important;
}

#advwebForm .feedbackformmdiv .mt15 {
    margin-top: 1rem;
}

body #advwebForm .feedtxtarea {
    min-height: 140px;
    padding: 1rem 1.25rem !important;
    resize: vertical;
}

#advwebForm .redtxt {
    font-size: var(--font-xxs) !important;
}

/* Captcha */
#advwebForm #zsCaptcha {
    margin-top: 1rem;
}

/* Submit button — the widget floats its container (.fright) to the right */
body #zsfeedbackwidgetdiv .dt-blue-btn {
    min-width: 150px;
    font: var(--font-medium) 1rem var(--font-primary) !important;
    text-transform: none;
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    padding: 1rem 2.5rem !important;
    cursor: pointer;
    box-shadow: none !important;
}

body #zsfeedbackwidgetdiv .dt-blue-btn:hover,
body #zsfeedbackwidgetdiv .dt-blue-btn:focus {
    color: var(--color-white);
    background: var(--color-primary-dark);
}

.feedbackformmdiv,
#advwebForm {
    padding: 0 !important;
}

@media screen and (max-width: 991px) {
    .send-message__grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .send-message {
        padding: 32px 0 0px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .send-message__form {
        padding: 1.5rem;
    }

    .send-message__emails {
        padding: 1.5rem;
    }

    .send-message__title {
        font-size: var(--font-subheading);
    }

    .send-message__subtitle {
        font-size: 16px;
        line-height: 1.625;
    }

    #advwebForm .WF_NameEmailDiv {
        flex-direction: column;
        gap: 1rem;
    }

    .feedbackformmdiv,
    #advwebForm {
        padding: 0 !important;
    }

    #advwebForm #feedbNameTxtField {
        padding: 0.875rem 1rem !important;
        font-size: 16px !important;
        font-weight: var(--font-regular) !important;
    }

    #advwebForm .zsfbbdrtop {
        display: flex;
        flex-direction: column;
    }

    body #zsfeedbackwidgetdiv .dt-blue-btn {
        width: 100% !important;
    }

    #sm-attach-note {
        font-size: 14px;
    }

    .zspreattscreendiv {
        padding: 20px 0 0 !important;
    }

    .send-message__email-address {
        font-size: 16px !important;
    }
}

/* Attach-file spam-filtering note (injected next to the Zoho attach control) */
#sm-attach-note {
    font-size: var(--font-sm);
    color: var(--color-text);
}

/* /9.0 Send Message (layout: send_message) */

/* 10.0 Hero options: Desktop Zoom and Hide ratings on phones (hero fields) */
@media screen and (min-width: 992px) {

    /* Desktop Zoom: the photo layer is widened from the left edge, so the
       right-anchored photo grows and its right side is cropped. */
    .page-hero .page-hero__media {
        width: calc(100% * var(--hero-desktop-zoom, 1));
    }
}

@media screen and (max-width: 768px) {
    .page-hero--hide-ratings-mobile .page-hero__ratings {
        display: none;
    }

    /* No visible ratings: pull the photo up only as far as the buttons. */
    .page-hero.page-hero--hide-ratings-mobile:has(.page-hero__ratings > :nth-child(1)) .page-hero__media {
        margin-top: -46px;
    }
}

/* /10.0 Hero options */

/* Desktop (Figma): the hero photo runs up behind the header instead of starting
   below it. On hero pages the header is see-through and the hero is pulled up by
   the header's height (header-footer-v2.css: 78px, 66px up to 1000px), with the
   same amount added as top padding so the content does not move. */
@media screen and (min-width: 1024px) {
    body:has(.page-hero) {
        --ph-header-h: 78px;
    }

    body:has(.page-hero) .site-header {
        background: transparent;
    }

    /* White fade at the top of the photo, behind the header, so the menu and
       buttons stay readable (Figma). Follows the hero's White Fade setting, like
       the other fades (.page-hero__media::after). */
    .page-hero .page-hero__media::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: calc(var(--ph-header-h) + 120px);
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.75) var(--ph-header-h), rgba(255, 255, 255, 0) 100%);
    }

    .page-hero--no-overlay .page-hero__media::before {
        content: none;
    }

    /* Header buttons see-through over the photo too (hover keeps its fill). */
    body:has(.page-hero) .site-header .site-btn:not(:hover) {
        background: transparent;
    }

    .page-hero {
        margin-top: calc(-1 * var(--ph-header-h));
        padding-top: var(--ph-header-h);
    }

    /* The photo starts a little below the top edge (Figma), behind the header. */
    .page-hero .page-hero__media {
        top: 1rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1000px) {
    body:has(.page-hero) {
        --ph-header-h: 66px;
    }
}

/* 11.0 Shared panel for sections 12.0-14.0 */
.feature-grid,
.compare-section,
.faq-cta {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

/* The theme leaves box-sizing at content-box, so min-heights and the grid
   cells would otherwise grow by their padding and borders. Scoped inside the
   container so .container-lg keeps the same geometry as the other sections. */
.feature-grid .container-lg *,
.compare-section .container-lg *,
.faq-cta .container-lg * {
    box-sizing: border-box;
}

.feature-grid__intro,
.compare-section__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
    margin: 0 0 3rem 0;
}

.feature-grid__title,
.compare-section__title,
.faq-cta__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.27;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.feature-grid__accent,
.compare-section__accent,
.faq-cta__accent {
    color: var(--color-primary);
}

.feature-grid__subtitle,
.compare-section__subtitle {
    margin: 0;
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

/* /11.0 Shared panel */

/* 12.0 Feature Grid (layout: feature_grid) */

.feature-grid__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* A grid of exactly four standard cards sits in a single 4-up row on desktop
   (e.g. the landlord "What's covered" section); the normal responsive cascade
   (2-up <=991, 1-up <=768) still applies below. */
@media screen and (min-width: 992px) {
    .feature-grid__list:has(> :nth-child(4)):not(:has(> :nth-child(5))):not(:has(.feature-grid__card--wide)):not(:has(.feature-grid__card--full)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A grid of exactly five standard cards sits in a single 5-up row on desktop
   (e.g. the PlusHeat Promise). */
@media screen and (min-width: 992px) {
    .feature-grid__list:has(> :nth-child(5)):not(:has(> :nth-child(6))):not(:has(.feature-grid__card--wide)):not(:has(.feature-grid__card--full)) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* 5-up cards (e.g. the Promise) carry just an icon + title, so drop the soft
   card min-height and let them size to content. */
.feature-grid__list:has(> :nth-child(5)):not(:has(> :nth-child(6))) .feature-grid__card--soft {
    min-height: 0;
}

/* 5-up compact cards (e.g. Promise) stay multi-column on mobile instead of stacking 1-up */
@media screen and (max-width: 768px) {
    .feature-grid__list:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}
@media screen and (max-width: 480px) {
    .feature-grid__list:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smaller category title in the 4-up "What's covered" cards. */
.feature-grid__list:has(> :nth-child(4)):not(:has(> :nth-child(5))):not(:has(.feature-grid__card--wide)):not(:has(.feature-grid__card--full)) .feature-grid__card-title {
    font-size: var(--font-lg);
    line-height: 1.25;
    color: var(--color-primary);
}

/* Tidy the stacked "term + description" copy inside feature-grid cards: each bold
   term starts its own line with consistent spacing, no stray <br> gaps. */
.feature-grid__card-text strong {
    display: block;
    margin-top: 1.1rem;
    margin-bottom: 0.15rem;
    color: var(--color-heading);
    font-weight: var(--font-semibold);
}

.feature-grid__card-text strong:first-child {
    margin-top: 0;
}

.feature-grid__card-text br {
    display: none;
}

.feature-grid__card-text ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.feature-grid__card-text li {
    list-style: disc;
}

.feature-grid__card-text li::marker {
    color: var(--color-primary);
}

/* Dense grids (7+ cards) use four columns on wide desktops so they read as tidy
   rows (e.g. the 8-card "Why partner with PlusHeat?" grid -> 4 + 4). Below 1200px
   the normal cascade takes over: 3 cols, then 2 (<=991), then 1 (<=768). */
@media screen and (min-width: 1200px) {
    /* Only for plain grids of standard cards (e.g. the 8-card "Why partner with
       PlusHeat?"). Bento grids that use wide/full cards keep their 3-col layout. */
    .feature-grid__list:has(> *:nth-child(7)):not(:has(.feature-grid__card--wide)):not(:has(.feature-grid__card--full)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.feature-grid__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 240px;
    padding: var(--pad-card);
    border: 2px solid transparent;
    border-radius: var(--radius-card);
}

.feature-grid__card--wide {
    grid-column: span 2;
}

/* Themes */
.feature-grid__card--light {
    background-color: #F5F5F5;
}

.feature-grid__card--outline {
    min-height: 300px;
    border-color: var(--color-primary);
    background-color: var(--color-white);
}

.feature-grid__card--orange {
    min-height: 300px;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.feature-grid__card--soft {
    justify-content: flex-end;
    min-height: 200px;
    background-color: var(--color-secondary);
}

/* The tags card sits on white with the same faint border as the homepage cards. */
.feature-grid__card--tags.feature-grid__card--light {
    border-color: #F5F5F5;
    background-color: var(--color-white);
}

/* Content cards */
.feature-grid__icon {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
}

.feature-grid__icon img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 50px;
}

/* Light cards box the icon in a small white square. */
.feature-grid__card--light .feature-grid__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}

.feature-grid__card--light .feature-grid__icon img {
    height: 28px;
}

.feature-grid__card-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-grid__card-title {
    margin: 0;
    font-size: var(--font-subheading-small);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-heading);
}

.feature-grid__card-text {
    margin: 0;
    font-size: var(--font-rg);
    line-height: 1.45;
    color: var(--color-text);
}

.feature-grid__card--outline .feature-grid__card-title {
    max-width: 560px;
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--color-primary);
}

.feature-grid__card--outline .feature-grid__card-text {
    color: var(--color-heading);
}

.feature-grid__card--soft .feature-grid__card-title,
.feature-grid__card--soft .feature-grid__card-text,
.feature-grid__card--orange .feature-grid__card-title,
.feature-grid__card--orange .feature-grid__card-text {
    color: inherit;
}

.feature-grid__card--soft {
    color: var(--color-primary);
}

/* Rating card */
.feature-grid__stars {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    line-height: 1;
}

.feature-grid__score {
    display: block;
    font-size: 6rem;
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: -0.03em;
}

.feature-grid__score-label {
    margin: 0;
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1.4;
}

.feature-grid__card--light .feature-grid__score,
.feature-grid__card--outline .feature-grid__score {
    color: var(--color-primary);
}

/* Tags card */
.feature-grid__card--tags {
    justify-content: flex-start;
    gap: 1rem;
    min-height: 200px;
}

.feature-grid__tags-label {
    margin: 0;
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1.4;
    color: var(--color-text);
}

.feature-grid__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-grid__tag {
    padding: 0.625rem 1rem;
    border-radius: var(--radius-pill);
    background-color: #F5F5F5;
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    line-height: 1.2;
    color: var(--color-heading);
}

@media screen and (max-width: 1199px) {

    .feature-grid__title,
    .compare-section__title,
    .faq-cta__title {
        font-size: var(--font-heading);
    }

    .feature-grid__card--outline .feature-grid__card-title {
        font-size: 2rem;
    }

    .feature-grid__score {
        font-size: 4.5rem;
    }
}

@media screen and (max-width: 991px) {

    .feature-grid,
    .compare-section,
    .faq-cta {
        padding: 3rem 0 5rem;
    }

    .feature-grid__title,
    .compare-section__title,
    .faq-cta__title {
        font-size: var(--font-subheading);
    }

    .feature-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-grid__card--wide {
        grid-column: span 2;
    }

    .feature-grid__card-title {
        font-size: var(--font-subtitle);
    }
}

@media screen and (max-width: 768px) {

    .feature-grid,
    .compare-section,
    .faq-cta {
        padding: 2rem 0 3rem;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .feature-grid__intro,
    .compare-section__intro {
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

    .feature-grid__title,
    .compare-section__title,
    .faq-cta__title {
        font-size: var(--font-subheading-small);
    }

    .feature-grid__subtitle,
    .compare-section__subtitle {
        font-size: var(--font-sm);
    }

    .feature-grid__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .feature-grid__card--wide {
        grid-column: auto;
    }

    .feature-grid__card,
    .feature-grid__card--outline,
    .feature-grid__card--orange {
        min-height: 0;
        padding: 1.5rem;
        border-radius: var(--border-radius-md);
    }

    .feature-grid__card--outline .feature-grid__card-title {
        font-size: var(--font-subtitle);
    }

    .feature-grid__card-title {
        font-size: var(--font-lg);
    }

    .feature-grid__card-text,
    .feature-grid__score-label {
        font-size: var(--font-sm);
    }

    .feature-grid__icon img {
        height: 56px;
    }

    .feature-grid__score {
        font-size: 3.5rem;
    }
}

/* Phones (Figma mobile): tighter stack, light cards without icons, and the
   rating card laid out across: score on the left, stars and label on the
   right. Last block in the section, so it wins over the earlier phone rules. */
@media screen and (max-width: 768px) {
    .feature-grid__list {
        gap: 0.75rem;
    }

    .feature-grid__card,
    .feature-grid__card--outline,
    .feature-grid__card--orange,
    .feature-grid__card--soft,
    .feature-grid__card--tags {
        gap: 0.75rem;
        min-height: 0;
        padding: 1.25rem;
        border-radius: var(--radius-card);
    }

    .feature-grid__card-bottom {
        gap: 0.375rem;
    }

    .feature-grid__card--light .feature-grid__icon {
        display: none;
    }

    .feature-grid__card-title {
        font-size: var(--font-rg);
        line-height: 1.35;
    }

    .feature-grid__card-text {
        font-size: var(--font-xs);
        line-height: 1.5;
    }

    /* Gas Safe card */
    .feature-grid__card--outline .feature-grid__icon img {
        height: 44px;
    }

    .feature-grid__card--outline .feature-grid__card-title {
        font-size: 1.375rem;
        line-height: 1.25;
    }

    /* Rating card: score | stars over label */
    .feature-grid__card--rating {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 1rem;
        row-gap: 0.25rem;
    }

    .feature-grid__card--rating .feature-grid__card-bottom {
        display: contents;
    }

    .feature-grid__card--rating .feature-grid__score {
        grid-row: 1 / span 2;
        grid-column: 1;
        font-size: 3.25rem;
    }

    .feature-grid__card--rating .feature-grid__stars {
        grid-row: 1;
        grid-column: 2;
        align-self: end;
        font-size: var(--font-sm);
    }

    .feature-grid__card--rating .feature-grid__score-label {
        grid-row: 2;
        grid-column: 2;
        align-self: start;
        font-size: var(--font-xs);
        line-height: 1.3;
    }

    /* Tags card */
    .feature-grid__tags-label {
        font-size: var(--font-xs);
    }

    .feature-grid__tags {
        gap: 0.5rem;
    }

    .feature-grid__tag {
        padding: 0.5rem 0.75rem;
        font-size: var(--font-xxs);
    }
}

/* /12.0 Feature Grid (layout: feature_grid) */

/* 13.0 Comparison Table (layout: comparison_table) */

/* Columns come from an inline grid-template-columns set by the template.
   Grid rows: cap, header, body rows, button row. The grey panel is painted on
   the non-highlighted cells; the highlighted column is white with a single
   orange outline made from per-cell borders. */
.compare-table {
    display: grid;
    align-items: stretch;
}

.compare-table__cap {
    height: 1.5rem;
}

.compare-table__cell {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 0.75rem 1rem;
    background-color: #F5F5F5;
    border-bottom: 1px solid #EAEAEA;
    font-size: var(--font-sm);
    color: var(--color-heading);
}

.compare-table__cell--value {
    justify-content: center;
    text-align: center;
}

.compare-table__cell--label {
    gap: 1.25rem;
    padding-left: 2rem;
}

.compare-table__cell--head {
    min-height: 88px;
    font-weight: var(--font-medium);
}

.compare-table__cell.is-last-row {
    border-bottom: 0;
}

/* Grey panel corners */
.compare-table__cell--label.compare-table__cell--head {
    border-top-left-radius: 2rem;
}

.compare-table__cell--label.is-last-row {
    border-bottom-left-radius: 2rem;
}

.compare-table__cell--head.is-last {
    border-top-right-radius: 2rem;
}

.compare-table__cell.is-last.is-last-row {
    border-bottom-right-radius: 2rem;
}

/* Highlighted column */
.compare-table__cap.is-highlight,
.compare-table__cell.is-highlight,
.compare-table__foot.is-highlight {
    border-right: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    border-radius: 0;
    background-color: var(--color-white);
}

.compare-table__cap.is-highlight {
    border-top: 2px solid var(--color-primary);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.compare-table__foot.is-highlight {
    padding: 0.75rem 1.5rem 2rem;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.compare-table__cell.is-highlight.is-last-row {
    border-bottom: 1px solid #EAEAEA;
}

.compare-table__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70px;
}

.compare-table__name {
    font-weight: var(--font-semibold);
}

.compare-table__number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    background-color: var(--color-white);
    font-size: var(--font-xxxs);
    color: var(--color-heading);
}

.compare-table__text {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.compare-table__cell.is-highlight .compare-table__text {
    color: var(--color-heading);
}

/* Tick and cross icons (assets/images/icons/compare/). In the highlighted
   column the white tick sits inside an orange circle. */
.compare-table__tick,
.compare-table__cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.compare-table__tick img,
.compare-table__cross img {
    display: block;
    width: 12px;
    height: auto;
}

.compare-table__cell.is-highlight .compare-table__tick {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background-color: var(--color-primary);
}

.compare-table__button {
    display: block;
    padding: 1rem;
    border-radius: var(--radius-button);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.compare-table__button:hover,
.compare-table__button:focus {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.compare-table__button--mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .compare-table__foot.is-highlight .compare-table__button {
        display: none;
    }

    .compare-table__button--mobile {
        display: block;
        margin-top: 1.5rem;
    }

    .compare-table__cell {
        min-height: 52px;
        padding: 0.5rem;
        font-size: var(--font-xs);
    }

    .compare-table__cell--label {
        gap: 0.5rem;
        padding-left: 1rem;
    }

    .compare-table__cell--head {
        min-height: 64px;
    }

    .compare-table__number {
        display: none;
    }

    .compare-table__logo {
        max-height: 28px;
    }

    .compare-table__text {
        font-size: var(--font-xs);
    }

    .compare-table__cell.is-highlight .compare-table__tick {
        width: 26px;
        height: 26px;
    }

    /* Empty on phones (button moved below), just closes the orange outline. */
    .compare-table__foot.is-highlight {
        height: 1rem;
        padding: 0;
    }

    .compare-table__cell--label.compare-table__cell--head {
        border-top-left-radius: 1.25rem;
    }

    .compare-table__cell--label.is-last-row {
        border-bottom-left-radius: 1.25rem;
    }

    .compare-table__cell--head.is-last {
        border-top-right-radius: 1.25rem;
    }

    .compare-table__cell.is-last.is-last-row {
        border-bottom-right-radius: 1.25rem;
    }

    .compare-table__cap.is-highlight {
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .compare-table__foot.is-highlight {
        border-radius: 0 0 1.25rem 1.25rem;
    }
}

/* Compact logo marks: phones only. */
.compare-table__icon {
    display: none;
}

/* Phones (Figma mobile): one grey panel, compact logo marks, no column
   heading, no orange outline and no row numbers, scores without stars, and
   the button full width under the table. Last block in the section, so it
   wins over the earlier phone rules. */
@media screen and (max-width: 768px) {
    .compare-table {
        grid-template-columns: minmax(0, 1fr) repeat(3, 48px) !important;
    }

    .compare-table__cap,
    .compare-table__foot {
        display: none;
    }

    .compare-table__logo,
    .compare-table__column-label,
    .compare-table__star {
        display: none;
    }

    .compare-table__icon {
        display: block;
        width: auto;
        height: 16px;
    }

    .compare-table__cell,
    .compare-table__cell.is-highlight {
        min-height: 0;
        padding: 0.875rem 0.25rem;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid #EAEAEA;
        border-radius: 0;
        background-color: #F5F5F5;
        font-size: var(--font-xs);
        line-height: 1.4;
    }

    .compare-table__cell--label {
        padding-right: 0.75rem;
        padding-left: 0.875rem;
    }

    .compare-table__cell--head {
        min-height: 48px;
    }

    .compare-table__cell.is-last-row {
        border-bottom: 0;
    }

    /* Panel corners */
    .compare-table__cell--label.compare-table__cell--head {
        border-top-left-radius: 1.25rem;
    }

    .compare-table__cell--head.is-last {
        border-top-right-radius: 1.25rem;
    }

    .compare-table__cell--label.is-last-row {
        border-bottom-left-radius: 1.25rem;
    }

    .compare-table__cell.is-last.is-last-row {
        border-bottom-right-radius: 1.25rem;
    }

    .compare-table__text {
        font-size: var(--font-sm);
    }

    .compare-table__cell.is-highlight .compare-table__tick {
        width: 24px;
        height: 24px;
    }

    .compare-table__tick img,
    .compare-table__cross img {
        width: 11px;
    }

    .compare-table__button--mobile {
        margin-top: 1.5rem;
        padding: 1rem;
        border-radius: var(--radius-field);
        font-size: var(--font-rg);
    }

    /* Same bottom space as the other phone panels (100px): the next panel
       overlaps this one by 32px, which left the button almost touching it. */
    .compare-section {
        padding-bottom: 100px;
    }
}

/* /13.0 Comparison Table (layout: comparison_table) */

/* 14.0 FAQ with CTA (layout: faq_cta) */

.faq-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: start;
    gap: 2rem;
}

.faq-cta__inner--full {
    grid-template-columns: minmax(0, 1fr);
}

.faq-cta__title {
    margin-bottom: 2rem;
}

.faq-cta__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-cta__item {
    border: 2px solid #F5F5F5;
    border-radius: 1.5rem;
    background-color: var(--color-white);
}

.faq-cta__question {
    position: relative;
    display: block;
    padding: 1.5rem 4.5rem 1.5rem 2rem;
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1.4;
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
}

.faq-cta__question::-webkit-details-marker {
    display: none;
}

/* Plus / minus icon: the vertical bar is hidden when the item is open. */
.faq-cta__question::before,
.faq-cta__question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 16px;
    height: 2px;
    background-color: var(--color-heading);
    transform: translateY(-50%);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.faq-cta__question::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-cta__item[open] .faq-cta__question::before {
    background-color: var(--color-primary);
}

.faq-cta__item[open] .faq-cta__question::after {
    transform: translateY(-50%) rotate(0deg);
    background-color: var(--color-primary);
    opacity: 0;
}

.faq-cta__answer {
    padding: 0 2rem 1.5rem;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--color-text);
}

.faq-cta__answer > :first-child {
    margin-top: 0;
}

.faq-cta__answer > :last-child {
    margin-bottom: 0;
}

/* Open item: the answer sits just under the question. */
.faq-cta__item[open] .faq-cta__question {
    padding-bottom: 0.75rem;
}

.faq-cta__more {
    display: inline-block;
    margin-top: 2rem;
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    color: var(--color-heading);
    text-decoration: none;
}

.faq-cta__more::after {
    content: " \2192";
}

.faq-cta__more:hover,
.faq-cta__more:focus {
    color: var(--color-primary);
}

.faq-cta__card {
    position: sticky;
    top: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem;
    border-radius: var(--radius-card);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.faq-cta__card-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.faq-cta__card-text {
    font-size: var(--font-rg);
    line-height: 1.45;
    margin: 0;
}

.faq-cta__card-text p {
    margin: 0;
}

/* Contact rows (Card > Contacts): icon tile, small label, number / address. */
.faq-cta__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.faq-cta__contact {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

a.faq-cta__contact:hover,
a.faq-cta__contact:focus {
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

.faq-cta__contact-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: var(--color-white);
    color: var(--color-primary);
}

.faq-cta__contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.faq-cta__contact-label {
    font-size: var(--font-xxs);
    line-height: 1.3;
    opacity: 0.9;
}

.faq-cta__contact-value {
    font-size: var(--font-rg);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.faq-cta__card-button {
    display: block;
    padding: var(--pad-button);
    border-radius: var(--radius-button);
    background-color: var(--color-button);
    color: var(--color-white);
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.faq-cta__card-button:hover,
.faq-cta__card-button:focus {
    background-color: var(--color-grey-dark);
    color: var(--color-white);
}

.faq-cta__card-phone {
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--color-white);
    text-decoration: none;
}

.faq-cta__card-phone:hover,
.faq-cta__card-phone:focus {
    color: var(--color-white);
    text-decoration: underline;
}

@media screen and (max-width: 1199px) {
    .faq-cta__inner {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .faq-cta__card-title {
        font-size: 2rem;
    }
}

@media screen and (max-width: 991px) {
    .faq-cta__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-cta__card {
        position: static;
    }
}

@media screen and (max-width: 768px) {
    .faq-cta__title {
        margin-bottom: 1.5rem;
    }

    .faq-cta__item {
        border-radius: 1.25rem;
    }

    .faq-cta__question {
        padding: 1.25rem 3.5rem 1.25rem 1.25rem;
        font-size: var(--font-sm);
    }

    .faq-cta__question::before,
    .faq-cta__question::after {
        right: 1.25rem;
    }

    .faq-cta__answer {
        padding: 0 1.25rem 1.25rem;
        font-size: var(--font-xs);
    }

    .faq-cta__item[open] .faq-cta__question {
        padding-bottom: 0.5rem;
    }

    /* The footer's own 48px top margin doubled the space under the last panel. */
    .faq-cta + .site-footer,
    .feature-grid + .site-footer,
    .compare-section + .site-footer {
        margin-top: 0;
    }

    /* Feature Grid: +32px so the Comparison panel's 32px overlap keeps the same
       visible gap (48px padding + 32px). */
    .feature-grid {
        padding-bottom: 80px;
    }

    .faq-cta__card {
        gap: 1.25rem;
        padding: 1.75rem;
        border-radius: var(--border-radius-md);
    }

    .faq-cta__card-title {
        font-size: var(--font-subtitle);
    }

    .faq-cta__card-text {
        font-size: var(--font-sm);
    }
}

/* /14.0 FAQ with CTA (layout: faq_cta) */

/* 15.0 Numbered Cards (layout: numbered_cards) */

/* Same white panel as the other sections (11.0): rounded top, upward shadow. */
.numbered-cards {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.numbered-cards .container-lg * {
    box-sizing: border-box;
}

.numbered-cards__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
    margin: 0 0 3rem 0;
}

.numbered-cards__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.27;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.numbered-cards__accent,
.numbered-cards__card-accent {
    color: var(--color-primary);
}

.numbered-cards__subtitle {
    margin: 0;
    font-size: var(--font-lg);
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.numbered-cards__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.numbered-cards__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: var(--pad-card);
    border: 2px solid #F5F5F5;
    border-radius: var(--radius-card);
    background-color: var(--color-white);
}

.numbered-cards__number {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-field);
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-size: var(--font-rg);
    font-weight: var(--font-semibold);
    line-height: 1;
}

.numbered-cards__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.numbered-cards__card-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--font-medium);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-heading);
}

.numbered-cards__card-text {
    margin: 0;
    font-size: var(--font-rg);
    line-height: 1.45;
    color: var(--color-text);
}

@media screen and (max-width: 1199px) {
    .numbered-cards__list {
        gap: 1.5rem;
    }

    .numbered-cards__card {
        padding: 1.5rem;
    }
}

@media screen and (max-width: 991px) {
    .numbered-cards {
        padding: 3rem 0 5rem;
    }

    .numbered-cards__title {
        font-size: var(--font-subheading);
    }

    .numbered-cards__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones (Figma): cards stacked, number on the left of the text, card titles
   without the orange word. Overlaps the panel above by 32px like the others,
   and leaves 80px below for the next panel's overlap. */
@media screen and (max-width: 768px) {
    .numbered-cards {
        margin-top: -32px;
        padding: 2rem 0 80px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .numbered-cards__intro {
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

    .numbered-cards__title {
        font-size: var(--font-subheading-small);
    }

    .numbered-cards__subtitle {
        font-size: var(--font-sm);
        line-height: 1.6;
    }

    .numbered-cards__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .numbered-cards__card {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
        border-radius: var(--radius-card-sm);
    }

    .numbered-cards__text {
        gap: 0.25rem;
    }

    .numbered-cards__card-title {
        font-size: var(--font-rg);
        letter-spacing: 0;
    }

    .numbered-cards__card-accent {
        color: inherit;
    }

    .numbered-cards__card-text {
        font-size: var(--font-xs);
        line-height: 1.55;
    }

    .numbered-cards + .site-footer {
        margin-top: 0;
    }
}

/* /15.0 Numbered Cards (layout: numbered_cards) */

/* Document Downloads: compact download cards (layout `document_downloads`).
   Same white panel as Feature Grid / Numbered Cards. */
.doc-downloads {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.doc-downloads .container-lg * {
    box-sizing: border-box;
}

.doc-downloads__header {
    max-width: 640px;
    margin-bottom: 3rem;
}

.doc-downloads__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    color: var(--color-heading);
}

.doc-downloads__title-accent {
    color: var(--color-primary);
}

.doc-downloads__subtitle {
    margin: 0.75rem 0 0;
    font-size: var(--font-lg);
    line-height: 1.5;
    color: var(--color-text);
}

.doc-downloads__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.doc-downloads__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 1.25rem;
    row-gap: 1.5rem;
    padding: var(--pad-card);
    border: 1px solid #efefef;
    border-radius: var(--border-radius-md);
    background: var(--color-white);
    color: var(--color-heading);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.doc-downloads__card:hover,
.doc-downloads__card:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
}

.doc-downloads__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #fff3e8;
}

.doc-downloads__icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.doc-downloads__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
}

.doc-downloads__type {
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.06em;
    color: var(--color-text);
}

.doc-downloads__name {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    line-height: 1.3;
}

.doc-downloads__button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-field);
    background: #f4f4f4;
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    color: var(--color-heading);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.doc-downloads__card:hover .doc-downloads__button,
.doc-downloads__card:focus-visible .doc-downloads__button {
    background: var(--color-primary);
    color: var(--color-white);
}

@media screen and (max-width: 991px) {
    .doc-downloads {
        padding: 3rem 0 5rem;
    }

    .doc-downloads__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .doc-downloads {
        margin-top: -32px;
        padding: 2rem 0 80px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .doc-downloads__header {
        margin-bottom: 2rem;
    }

    .doc-downloads__title {
        font-size: var(--font-subheading);
    }

    .doc-downloads__card {
        padding: 1.25rem;
        row-gap: 1rem;
    }

    .doc-downloads__icon {
        width: 52px;
        height: 52px;
    }

    .doc-downloads__icon img {
        width: 30px;
        height: 30px;
    }
}

/* Grouped List: groups of short items in balanced columns (layout `grouped_list`).
   Same white panel as Feature Grid / Numbered Cards. Marker: cross or tick. */
.grouped-list {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.grouped-list .container-lg * {
    box-sizing: border-box;
}

.grouped-list__header {
    max-width: 640px;
    margin-bottom: 3rem;
}

.grouped-list__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    color: var(--color-heading);
}

.grouped-list__title-accent {
    color: var(--color-primary);
}

.grouped-list__subtitle {
    margin: 0.75rem 0 0;
    font-size: var(--font-lg);
    line-height: 1.5;
    color: var(--color-text);
}

/* Columns rather than a grid, so short and long groups pack without gaps. */
.grouped-list__columns {
    column-count: 3;
    column-gap: 1.5rem;
}

.grouped-list__group {
    display: inline-block;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 1.75rem;
    border: 1px solid #efefef;
    border-radius: var(--border-radius-md);
    background: #fafafa;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.grouped-list__group-title {
    margin: 0;
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    color: var(--color-heading);
}

.grouped-list__note {
    margin: 0.35rem 0 0;
    font-size: var(--font-sm, 14px);
    line-height: 1.4;
    color: var(--color-text);
}

.grouped-list__items {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.grouped-list__item {
    position: relative;
    margin: 0;
    padding: 0 0 0 2rem;
    font-size: var(--font-rg);
    line-height: 1.45;
    color: var(--color-heading);
}

.grouped-list__item + .grouped-list__item {
    margin-top: 0.75rem;
}

.grouped-list__item::before {
    content: '';
    position: absolute;
    top: 0.1em;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-circle);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

.grouped-list--cross .grouped-list__item::before {
    background-color: #ececec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='%23707070' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.grouped-list--tick .grouped-list__item::before {
    background-color: #fff3e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.2l2.2 2.2 4.2-4.6' fill='none' stroke='%23f07c00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media screen and (max-width: 991px) {
    .grouped-list {
        padding: 3rem 0 5rem;
    }

    .grouped-list__columns {
        column-count: 2;
    }
}

@media screen and (max-width: 768px) {
    .grouped-list {
        margin-top: -32px;
        padding: 2rem 0 80px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }

    .grouped-list__header {
        margin-bottom: 2rem;
    }

    .grouped-list__title {
        font-size: var(--font-subheading);
    }

    .grouped-list__columns {
        column-count: 1;
    }

    .grouped-list__group {
        margin-bottom: 1rem;
        padding: 1.25rem;
    }
}

/* Single plan pages (body.page-single-plan): the hero title's second part
   ("Basic boiler & controls") goes on its own line, a little smaller. */
.page-single-plan .page-hero__title-accent,
.page-single-plan .page-hero__title-rest {
    display: block;
}

.page-single-plan .page-hero__title-rest {
    margin-top: 0.2em;
    font-size: 0.7em;
    line-height: 1.15;
}

/* Grouped List with only a few groups: lay them side by side (aligned at the top)
   instead of stacking in the first balanced column. 4+ groups keep column balancing. */
.grouped-list--groups-1 .grouped-list__columns,
.grouped-list--groups-2 .grouped-list__columns,
.grouped-list--groups-3 .grouped-list__columns {
    column-count: auto;
    display: grid;
    align-items: start;
}

.grouped-list--groups-1 .grouped-list__columns { grid-template-columns: minmax(0, 480px); }
.grouped-list--groups-2 .grouped-list__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grouped-list--groups-3 .grouped-list__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grouped-list--groups-1 .grouped-list__group,
.grouped-list--groups-2 .grouped-list__group,
.grouped-list--groups-3 .grouped-list__group {
    margin-bottom: 0;
}

@media screen and (max-width: 991px) {
    .grouped-list--groups-3 .grouped-list__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .grouped-list--groups-1 .grouped-list__columns,
    .grouped-list--groups-2 .grouped-list__columns,
    .grouped-list--groups-3 .grouped-list__columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Numbered Cards with fewer than 4 cards: match the column count to the cards so
   they fill the width evenly instead of leaving an empty slot. 4+ keeps 4 across. */
.numbered-cards--count-1 .numbered-cards__list { grid-template-columns: minmax(0, 360px); justify-content: center; }
.numbered-cards--count-2 .numbered-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numbered-cards--count-3 .numbered-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media screen and (max-width: 991px) {
    .numbered-cards--count-3 .numbered-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 768px) {
    .numbered-cards--count-1 .numbered-cards__list,
    .numbered-cards--count-2 .numbered-cards__list,
    .numbered-cards--count-3 .numbered-cards__list { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
}

/* Numbered Cards with only a title (no description): center the number tile and
   title together, so a one-line title doesn't sit top-aligned beside the number.
   Row layout is the stacked/mobile one; the desktop column layout is unaffected. */
@media screen and (max-width: 768px) {
    .numbered-cards__card:not(:has(.numbered-cards__card-text)) {
        align-items: center;
    }
}

/* ==========================================================================
   3.1 FAQ (Categorised) — layout `faq`
   Two-level accordion: category (.faq__category) opens to reveal its FAQ items
   (.faq-cta__item, reusing the FAQ-with-CTA question/answer styling).
   ========================================================================== */
.faq {
    padding: 4rem 0 6rem;
    background-color: var(--color-white);
}

.faq .container-lg * {
    box-sizing: border-box;
}

.faq .faq-cta__title {
    margin-bottom: 2rem;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Category accordion (level 1) — a rounded card whose radius grows when open.
   The FAQ items (.faq-cta__item) inside keep their own 1.5rem radius. */
.faq__category {
    border: 2px solid #F5F5F5;
    border-radius: 1.5rem;
    background-color: var(--color-white);
    overflow: hidden;
    transition: border-radius 0.2s ease;
}

.faq__category[open] {
    border-radius: 24px;
}

.faq__category-title {
    position: relative;
    display: block;
    padding: 1.4rem 3.5rem 1.4rem 1.5rem;
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    line-height: 1.3;
    color: var(--color-primary);
    list-style: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.faq__category-title::-webkit-details-marker {
    display: none;
}

/* Chevron */
.faq__category-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-grey-dark);
    border-bottom: 2px solid var(--color-grey-dark);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}

.faq__category[open] > .faq__category-title {
    background-color: #F5F5F5;
}

.faq__category[open] > .faq__category-title::after {
    transform: translateY(-35%) rotate(-135deg);
}

/* FAQ items inside a category (level 2) — inset from the category edges. */
.faq__category-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Sub-items: a flat divider list (no box-in-box cards). Rows are separated by
   hairlines; the open row lifts into a soft orange-tinted panel with a 3px
   orange left accent, so the active question reads clearly without a heavy box. */
.faq__category-items {
    gap: 0.75rem;
}

/* Closed: a soft outlined card (border only, no fill) so each question reads as
   a defined card even when there's just one. Open: lifts to a white card with a
   shadow and a 3px orange left accent. */
.faq__category-items .faq-cta__item {
    border: 0;
    border-left: 2px solid #E2E2E2;
    border-radius: 12px 0 0 12px;
    background-color: transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.faq__category-items .faq-cta__item:hover {
    border-left-color: var(--color-primary);
}

.faq__category-items .faq-cta__item[open] {
    background-color: var(--color-white);
    border-color: transparent;
    border-radius: 14px;
    box-shadow: inset 3px 0 0 0 var(--color-primary), 0 10px 30px -12px rgba(0, 0, 0, 0.18);
}

.faq__category-items .faq-cta__question {
    padding: 1rem 3.5rem 1rem 1rem;
}

/* Remove the black browser outline shown when the question is clicked; keep an
   orange focus ring for keyboard users only. */
.faq-cta__question:focus {
    outline: none;
}

.faq-cta__question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .faq {
        padding: 2.5rem 0;
    }

    /* Gentler corners on narrow cards so the items don't poke past the curve. */
    .faq__category,
    .faq__category[open] {
        border-radius: 1.25rem;
    }

    .faq__category-title {
        padding: 1.2rem 3rem 1.2rem 1.25rem;
        font-size: var(--font-rg);
    }

    .faq__category-items {
        padding: 0.85rem 1.25rem .85rem;
    }
}

/* Feature Grid content cards: flow icon -> title -> copy from the top so the
   titles line up across the row, instead of pinning the text to the bottom
   (which pushed titles to different heights when copy lengths differ). */
.feature-grid__card--content {
    justify-content: flex-start;
}

/* Feature Grid: full-width card (width = "full") spans the whole row. */
.feature-grid__card--full {
    grid-column: 1 / -1;
}

/* Feature Grid as the first section after the hero (e.g. Our Story): pull the
   white panel up so its rounded top + shadow curve over the hero photo, instead
   of meeting it with an abrupt straight edge. */
.page-hero + .feature-grid,
.page-hero + .faq-cta,
.page-hero + .compare-section {
    position: relative;
    z-index: 2;
    margin-top: -61px;
}

@media screen and (max-width: 768px) {
    .page-hero + .feature-grid,
    .page-hero + .faq-cta,
    .page-hero + .compare-section {
        margin-top: -32px;
    }
}


/* Our Promise: lay the feature-grid cards with flex so a short last row centres
   instead of leaving an empty slot. */
.page-our-promise .feature-grid__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.page-our-promise .feature-grid__card {
    flex: 0 1 calc((100% - 3rem) / 3);
}
.page-our-promise .feature-grid__card--wide {
    flex: 0 1 calc((100% - 3rem) / 3 * 2 + 1.5rem);
}
.page-our-promise .feature-grid__card--full {
    flex-basis: 100%;
}
@media screen and (max-width: 991px) {
    .page-our-promise .feature-grid__card,
    .page-our-promise .feature-grid__card--wide {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
    .page-our-promise .feature-grid__card--full { flex-basis: 100%; }
}
@media screen and (max-width: 768px) {
    .page-our-promise .feature-grid__card,
    .page-our-promise .feature-grid__card--wide,
    .page-our-promise .feature-grid__card--full { flex-basis: 100%; }
}

/* Principle Cards: designed value cards (layout `principle_cards`). */
.principle-cards {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.principle-cards .container-lg * {
    box-sizing: border-box;
}

.principle-cards__header {
    max-width: 680px;
    margin-bottom: 3rem;
}

.principle-cards__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    color: var(--color-heading);
}

.principle-cards__accent {
    color: var(--color-primary);
}

.principle-cards__subtitle {
    margin: 0.75rem 0 0;
    font-size: var(--font-lg);
    line-height: 1.5;
    color: var(--color-text);
}

.principle-cards__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.principle-cards__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 3rem) / 3);
    padding: var(--pad-card);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid #efefef;
    border-radius: var(--radius-card);
    box-shadow: 0 6px 24px -14px rgba(22, 22, 22, 0.10);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.principle-cards__card:hover {
    border-color: #f3c89f;
    box-shadow: 0 14px 34px -16px rgba(242, 123, 5, 0.18);
    transform: translateY(-3px);
}

.principle-cards__num {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    font-size: 3.25rem;
    font-weight: var(--font-bold);
    line-height: 1;
    color: #fbe3d0;
    letter-spacing: -0.03em;
    pointer-events: none;
}

.principle-cards__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-circle);
    background: #fff3e8;
}

.principle-cards__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.principle-cards__card-title {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    color: var(--color-heading);
}

.principle-cards__divider {
    display: block;
    width: 40px;
    height: 3px;
    margin: 1rem 0 1.25rem;
    border-radius: 3px;
    background: var(--color-primary);
}

.principle-cards__text {
    font-size: var(--font-rg);
    line-height: 1.6;
    color: var(--color-text);
}

.principle-cards__text p { margin: 0; }

@media screen and (max-width: 991px) {
    .principle-cards {
        padding: 3rem 0 5rem;
    }
    .principle-cards__card {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media screen and (max-width: 768px) {
    .principle-cards {
        margin-top: -32px;
        padding: 2rem 0 80px;
        border-radius: var(--radius-panel-mobile) var(--radius-panel-mobile) 0 0;
    }
    .principle-cards__header {
        margin-bottom: 2rem;
    }
    .principle-cards__title {
        font-size: var(--font-subheading);
    }
    .principle-cards__card {
        flex-basis: 100%;
        padding: 1.75rem;
    }
    .principle-cards__num {
        font-size: 2.75rem;
    }
}

/* Our Promise: the orange "Always there for you" statement card hugs its content
   (no forced tall min-height leaving empty orange below the text). */
.page-our-promise .feature-grid__card--orange {
    min-height: 0;
}

/* Our Promise: the principle section continues the white "Our promise" section
   above it (no separate rounded-top panel edge / shadow starting abruptly). */
.page-our-promise .principle-cards {
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    padding-top: 1rem;
}

/* Section stacking (global): every flexible-template section shares one stacking
   level, so each panel's upward curve + top shadow (the grey gradient transition)
   paints over the previous section in DOM order. The overlap amount is set per
   section via margin-top; this rule only governs paint order. Add new section
   classes here rather than giving them their own z-index. */
.intro-tags,
.pricing-cards,
.benefit-cards,
.feature-grid,
.compare-section,
.plans-cards,
.faq-cta,
.faq,
.numbered-cards,
.doc-downloads,
.grouped-list,
.principle-cards,
.how-to-reach,
.form-cta,
.send-message,
.trust-reviews,
.content-media,
.content-slider {
    position: relative;
    z-index: 2;
}

/* FAQ list section (.faq) as the first section after the hero: it has no panel
   styling of its own, so give it the rounded top + shadow + curve-up here. */
.page-hero + .faq {
    position: relative;
    z-index: 2;
    margin-top: -61px;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 768px) {
    .page-hero + .faq {
        margin-top: -32px;
    }
    /* Pricing cards as the last section (before the footer): trim the big mobile
       bottom padding so there isn't a large gap before the footer. */
    .pricing-cards:last-child {
        padding-bottom: 2.5rem;
    }
}


/* ==========================================================================
   Global section spacing
   One rule keeps the bottom padding of the common content panels uniform:
   6rem on desktop, 80px on phones. These match the long-standing per-section
   norm; the intentional outliers (trust-reviews, benefit-cards, pricing-cards,
   compare-section, faq-cta) keep their own designed values, and sections that
   flow into the next (intro -> cover plans) are excluded.
   ========================================================================== */
section.intro-tags:not(:has(+ .pricing-cards)),
.feature-grid,
.numbered-cards,
.grouped-list,
.doc-downloads,
.principle-cards,
.content-media,
.content-slider {
    padding-bottom: 6rem
}

@media screen and (max-width: 768px) {
    section.intro-tags:not(:has(+ .pricing-cards)),
    .feature-grid,
    .numbered-cards,
    .grouped-list,
    .doc-downloads,
    .principle-cards,
    .content-media,
    .content-slider {
        padding-bottom: 80px
    }
}


/* --- Engineer form section: mobile padding + bottom spacing --- */
@media screen and (max-width: 768px) {
    .form-cta {
        padding-bottom: 80px;
    }

    .form-cta__form:has(.gform_legacy_markup_wrapper) {
        padding: 1.5rem;
    }

    .form-cta--no-image .form-cta__form:has(.gform_legacy_markup_wrapper) {
        margin-top: 1.5rem;
    }

    /* All fields full width on mobile: stack the address/name halves. */
    .form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.ginput_left,
    .form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.ginput_right,
    .form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.name_first,
    .form-cta__form .gform_legacy_markup_wrapper .ginput_complex > span.name_last {
        flex: 0 0 100%;
    }
}


/* ==========================================================================
   3.2 Content + Media (layout `content_media`) — photo + copy, reversible.
   ========================================================================== */
.content-media {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.content-media .container-lg * {
    box-sizing: border-box;
}

.content-media__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.content-media--image-right .content-media__media {
    order: 2;
}

.content-media__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
}

.content-media__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    background: var(--color-grey-light);
    border-radius: 18px;
}

.content-media__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.content-media__title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    color: var(--color-heading);
}

.content-media__accent {
    color: var(--color-primary);
}

.content-media__subtitle {
    margin: 1rem 0 0;
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--color-heading);
}

.content-media__text {
    margin-top: 1rem;
    font-size: var(--font-rg);
    line-height: 1.7;
    color: var(--color-text);
}

.content-media__text > :first-child { margin-top: 0; }
.content-media__text > :last-child { margin-bottom: 0; }
.content-media__text p { margin: 0 0 1rem; }
.content-media__text strong { color: var(--color-heading); }

.content-media__text ul {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.content-media__text li {
    position: relative;
    padding-left: 2.1rem;
    color: var(--color-heading);
}

.content-media__text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.4rem;
    height: 1.4rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23F27B05'/%3E%3Cpath d='M6.8 12.4l3.1 3.1 7.1-7.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.content-media__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.75rem;
    padding: var(--pad-button);
    font-size: var(--font-rg);
    font-weight: var(--font-medium);
    line-height: 1;
    color: var(--color-white);
    background: var(--color-button);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.content-media__button:hover,
.content-media__button:focus {
    background: var(--color-grey-dark);
    color: var(--color-white);
}

@media screen and (max-width: 991px) {
    .content-media__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .content-media--image-right .content-media__media {
        order: 0;
    }
}

@media screen and (max-width: 768px) {
    .content-media {
        padding: 2rem 0 80px;
    }
    .content-media__title {
        font-size: var(--font-subheading);
    }
}


/* ==========================================================================
   3.3 Story Slider (layout `story_slider`) — copy + photo + testimonial carousel
   ========================================================================== */
.content-slider {
    padding: 4rem 0 6rem;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.content-slider .container-lg * { box-sizing: border-box; }

.content-slider__head { margin-bottom: 2rem; }
.content-slider__heading {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    color: var(--color-heading);
}
.content-slider__heading-accent { color: var(--color-primary); }

.content-slider__viewport { overflow: hidden; }

.content-slider__track {
    display: flex;
    transition: transform 0.45s ease;
}

.content-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 1.5rem;
    align-items: stretch;
}

.content-slider__copy {
    padding: 2.5rem;
    background: var(--color-grey-light);
    border-radius: var(--border-radius-md);
}

.content-slider__title {
    margin: 0 0 1rem;
    font-size: var(--font-subheading);
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--color-primary);
}

.content-slider__text {
    font-size: var(--font-rg);
    line-height: 1.7;
    color: var(--color-text);
}
.content-slider__text > :first-child { margin-top: 0; }
.content-slider__text > :last-child { margin-bottom: 0; }
.content-slider__text p { margin: 0 0 1rem; }
.content-slider__text strong { color: var(--color-heading); }
.content-slider__text ul { margin: 1rem 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.content-slider__text li { list-style: disc; color: var(--color-text); }
.content-slider__text li::marker { color: var(--color-primary); }

.content-slider__media {
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.content-slider__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.content-slider__quote {
    position: relative;
    overflow: hidden;
    min-height: 440px;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--border-radius-md);
}

.content-slider__quote-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.content-slider__quote::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(242, 123, 5, 0.9);
    z-index: 1;
}

.content-slider__quote-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.5rem;
}
.content-slider__quote-mark {
    font-size: 5rem;
    line-height: 0.8;
    font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.55);
}
.content-slider__quote-text {
    margin: 0.5rem 0 1.25rem;
    font-size: var(--font-rg);
    line-height: 1.55;
    color: var(--color-white);
}
.content-slider__quote-person {
    margin: 0;
    font-weight: var(--font-bold);
    color: var(--color-white);
}
.content-slider__quote-brand {
    margin: auto 0 0;
    padding-top: 1.5rem;
    font-size: var(--font-sm);
    color: var(--color-subdued-white);
}
.content-slider__quote-brand strong { color: var(--color-white); }

/* Case-study variant of the story card (shown when a slide has a label):
   a labelled story with an optional link, not a customer quote. */
.content-slider__quote-label {
    align-self: flex-start;
    margin-bottom: 1.25rem;
    padding: 0.35rem 0.85rem;
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
}
.content-slider__quote-link {
    align-self: flex-start;
    margin: auto 0 0;
    padding-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--font-bold);
    color: var(--color-white);
    text-decoration: none;
}
.content-slider__quote-link:hover { text-decoration: underline; }

/* --- Nav --- */
.content-slider__nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.content-slider__arrow {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--color-heading);
    background: var(--color-white);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-circle);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.content-slider__arrow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.content-slider__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.content-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle);
    background: #D9D9D9;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.content-slider__dot.is-active {
    width: 24px;
    border-radius: 6px;
    background: var(--color-primary);
}

@media screen and (max-width: 991px) {
    .content-slider__slide {
        grid-template-columns: 1fr;
    }
    .content-slider__media { order: -1; }
    .content-slider__media img { min-height: 220px; }
}

@media screen and (max-width: 768px) {
    .content-slider { padding: 2rem 0 80px; }
    .content-slider__copy, .content-slider__quote-inner { padding: 1.5rem; }
    .content-slider__heading { font-size: var(--font-subheading); }
}

/* Official Trustpilot star/logo assets replacing the hand-made glyphs
   (star.svg = single green tile, stars-5.svg = official 5-star bar). */
img.page-hero__rating-star {
    width: auto;
    height: 1.05em;
    vertical-align: -0.17em;
}
img.compare-table__star {
    display: inline-block;
    width: auto;
    height: 1em;
    vertical-align: -0.15em;
    margin-left: 0.25em;
}

/* Hero review cards can now be links (to the Trustpilot review). */
a.page-hero__review {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Hero promo strip (full-width bar at the top) + hero benefit ticks. */
.page-hero__promo {
    width: 100%;
    background: rgba(22, 22, 22, 0.8);
    color: var(--color-white);
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: var(--font-sm);
    font-weight: var(--font-regular);
    line-height: 1.3;
}
.page-hero__promo strong { font-weight: var(--font-semibold); }
.page-hero__benefits {
    list-style: none;
    margin: 1.25rem 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.page-hero__benefit {
    position: relative;
    padding-left: 2.1rem;
    font-size: var(--font-rg);
    color: var(--color-heading);
    line-height: 1.3;
}
.page-hero__benefit strong {
    font-weight: var(--font-medium);
}
.page-hero__benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.4rem;
    height: 1.4rem;
    background: url('/wp-content/uploads/2026/10/tick-heatable.svg') no-repeat center / contain;
}

/* Desktop: the hero is display:flex, so keep the promo strip out of the flex flow
   (it is a full-width bar pinned to the top, not a flex column). */
@media screen and (min-width: 992px) {
    .page-hero__promo { /* promo out of the hero flex, pinned just below the header */
        position: absolute;
        top: var(--ph-header-h, 78px);
        left: 0;
        right: 0;
        z-index: 9;
    }
    .page-hero:has(.page-hero__promo) .page-hero__content { padding-top: 5.5rem; }
}

/* Hero pill/badge above the title (e.g. "Gas Safe Registered Engineers"). */
.page-hero__pill {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(242, 123, 5, 0.12);
    color: var(--color-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Story slider: text-only slides (no right-hand story) go full width */
.content-slider__slide--text-only { grid-template-columns: 1fr; }

/* Story slider: image-only slides show the photo cleanly (no orange story overlay) */
.content-slider__quote--media::before { display: none; }
.content-slider__quote--media { background: var(--color-grey-light); }

/* Section subtitles (the grey line under each section heading): one size on every
   section. 20px/28px on desktop, 16px/26px on tablets and phones. The hero subtitle and
   the Content & Media sub-heading are styled separately on purpose. */
body :is(
    .plans-cards .plan-section-subtitle,
    .intro-tags__body,
    .benefit-cards__subtitle,
    .compare-section__subtitle,
    .doc-downloads__subtitle,
    .feature-grid__subtitle,
    .form-cta__subtitle,
    .grouped-list__subtitle,
    .how-to-reach__subtitle,
    .numbered-cards__subtitle,
    .principle-cards__subtitle,
    .send-message__subtitle,
    .trust-reviews__subtitle
) {
    font-size: 20px;
    line-height: 28px;
}

@media screen and (max-width: 768px) {
    body :is(
        .plans-cards .plan-section-subtitle,
        .intro-tags__body,
        .benefit-cards__subtitle,
        .compare-section__subtitle,
        .doc-downloads__subtitle,
        .feature-grid__subtitle,
        .form-cta__subtitle,
        .grouped-list__subtitle,
        .how-to-reach__subtitle,
        .numbered-cards__subtitle,
        .principle-cards__subtitle,
        .send-message__subtitle,
        .trust-reviews__subtitle
    ) {
        font-size: 16px;
        line-height: 26px;
    }
}