/*--------------------------------------------------------------
>>> 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)
--------------------------------------------------------------*/

/* Regular body weight on every page that loads this file. "html body" so it
   beats global.css (body: medium), which loads after this file. */
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;
}

@media (min-width: 992px) {
    .container-lg {
        width: min(2100px, calc(100% - 40px)) !important;
    }

    body:has(.page-hero) .hfv2-header .container-lg {
        width: 2139px !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
   (`.hfv2-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: #161616;
}

/* 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: 1.125rem 5.5rem;
    border-radius: 1rem;
    background-color: var(--color-black);
    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-heading);
    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: 2.25rem;
        padding-left: 2.25rem;
    }
}

.page-hero__ratings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0 0 0;
    padding: 0;
    list-style: none;
}

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

/* Rating rows are an ACF repeater, so the logo is sized generically rather
   than per brand. */
.page-hero__rating-logo {
    width: auto;
    height: 20px;
    max-width: 100%;
}

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

.page-hero__rating-score {
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    color: var(--color-heading);
}

.page-hero__rating-count {
    font-size: var(--font-xxs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-grey-dark);
    font-family: roboto;
}

.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-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, #fff 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%);
    }
}

/* 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(2100px, 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(2100px, 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: 1.5rem;
        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: -51px;
    }

    .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 {
        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: 1rem;
    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;
}

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

.page-hero__search-button {
    flex: 0 0 auto;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: var(--color-black);
    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) */

/* 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;
    margin-top: -61px;
    padding: 4rem 0 0;
    border-radius: 64px 64px 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}

.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;
}

.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-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: 999px;
    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: 2rem;
    border-radius: 2rem;
    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: 1rem 2rem 1rem;
    border-radius: 1rem;
    background-color: var(--color-heading);
    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: 64px 64px 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: 2rem;
    border: 2px solid #F5F5F5;
    border-radius: 2rem;
}

/* 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: 64px 64px 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: 64px 64px 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -24px 39.8px -6px rgba(0, 0, 0, 0.04);
}

.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;
}

/* 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: 1rem;
    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: 1rem 2rem 1.125rem;
    border: 0;
    border-radius: 1rem;
    /* !important beats the global .button rule in theme/helpers.css — Gravity Forms
       gives the submit a `button` class. */
    background-color: var(--color-heading) !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) .hfv2-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 {
        margin-top: -32px;
    }

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

    .page-hero {
        padding: 0;
    }

    .page-hero__content {
        max-width: none;
        padding: 70px 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: 32px 32px 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__item {
        flex: 0 0 280px;
    }

    .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: 24px;
    }

    .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: 1rem;
        font-size: var(--font-sm);
    }

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

    .benefit-cards {
        padding: 32px 0 100px;
        border-radius: 32px 32px 0 0;
    }

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

    .benefit-cards__card {
        gap: 1rem;
        min-height: 280px;
        padding: 16px;
        border-radius: 24px;
    }

    .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: 32px 32px 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. */
    .trust-reviews {
        padding: 32px 0 100px;
        border-radius: 32px 32px 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;
    }

    .trust-reviews__logos {
        justify-content: flex-start;
        gap: 1rem;
    }

    .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: 64px 64px 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -32px 46.6px -6px rgba(0, 0, 0, 0.05);
}

.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: 2rem;
    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: 56px;
}

.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: 70px;
    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: underline;
}

.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);
}

/* --- 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: 32px 32px 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: 64px 64px 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;
}

/* 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-size: var(--font-lg);
    font-weight: var(--font-medium);
    line-height: 1.2;
    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: 32px 32px 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;
    }

    .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-xs);
    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 */

/* 11.0 Shared panel for sections 12.0-14.0 */
.feature-grid,
.compare-section,
.faq-cta {
    padding: 4rem 0 6rem;
    border-radius: 64px 64px 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;
}

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

.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: 80px;
}

/* 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.5rem;
    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: 999px;
    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: 32px 32px 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: 1.25rem;
    }

    .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: 2rem 2rem 0 0;
}

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

.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: 50%;
    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: 50%;
    background-color: var(--color-primary);
}

.compare-table__button {
    display: block;
    padding: 1rem;
    border-radius: 1rem;
    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: 0.75rem;
        font-size: var(--font-rg);
    }
}

/* /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 > :last-child {
    margin-bottom: 0;
}

.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: 2rem;
    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;
}

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

.faq-cta__card-button {
    display: block;
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--color-heading);
    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__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) */