/* Homepage sales content; shared theme and other pages retain their styling. */
/* Reassurance under the hero buttons: a lighter echo of the "Icecast & SHOUTcast" kicker above the title. */
#header.product_landing .intro_wrapper .sales-home-hero .sales-home-assurance {
    width: auto;
    margin: 24px 0 0;
    font-family: "Montserrat", "Montserrat Fallback", sans-serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
}
.sales-home-hero .intro_button { flex-wrap: wrap; gap: 12px; }
.sales-home-hero .intro_button .nav-link { margin: 0 !important; }
.sales-home-start { background: var(--vc-tint); scroll-margin-top: 100px; }
.sales-home-start .sub_title { margin-bottom: 46px; }
.sales-home-start .sub_title p { font-style: normal; }
.sales-home-steps { margin-bottom: 0; }
.sales-home-step { width: 100%; margin-bottom: 30px; padding: 32px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.sales-home-step .vc-badge { margin-bottom: 22px; }
.sales-home-step h3 { font-size: 22px; font-weight: 700; line-height: 1.4; margin-bottom: 14px; }
.sales-home-step p { margin: 0 0 20px; line-height: 1.75; }
.sales-home-step .vc-link { margin-top: auto; }
.sales-home-guide-links { margin-top: 10px; text-align: center; }
.sales-home-guide-links h3 { font-size: 20px; font-weight: 700; line-height: 1.45; margin: 0 0 14px; }
.sales-home-guide-links .vc-link { display: inline-block; margin: 4px 16px; }
.sales-home-guide-links p { color: var(--vc-text); font-size: 14px; margin: 12px 0 0; }
@media (max-width: 767px) {
    .sales-home-start { padding-left: 15px; padding-right: 15px; }
    .sales-home-start .sub_title h2 { font-size: 28px; line-height: 1.3; }
    .sales-home-step { padding: 26px 22px; }
    .sales-home-hero .intro_button .nav-link { padding-left: 20px !important; padding-right: 20px !important; }
}

/* On tablets the photo is shorter than its 650px band, so the hero text ran past its bottom edge. Fill the band instead. */
@media (min-width: 768px) and (max-width: 991px) {
    #header.product_landing::before { background-size: cover; }
}

/* Replace the legacy mobile background overlay and fixed-height buttons. */
@media (max-width: 767px) {
    /* Smaller copies of the hero photo; header-v3.php preloads the matching WebP. */
    #header.product_landing {
        background: linear-gradient(90deg, rgba(0, 32, 53, .88), rgba(0, 32, 53, .55)), url('../images/banner/product_banner2-1500.jpg') center / cover no-repeat;
        background-image: linear-gradient(90deg, rgba(0, 32, 53, .88), rgba(0, 32, 53, .55)), image-set(url('../images/banner/product_banner2-1500.webp') type("image/webp"), url('../images/banner/product_banner2-1500.jpg') type("image/jpeg"));
    }
    #header.product_landing::before { display: none; }
    #header.product_landing .intro_wrapper { min-height: 0; padding: 50px 0 0; }
    #header.product_landing .intro_wrapper .sales-home-hero {
        margin: 0; padding: 32px 10px 40px; background: none; box-shadow: none; border-radius: 0;
    }
    #header.product_landing .sales-home-hero h4 { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
    #header.product_landing .sales-home-hero h1 { font-size: 32px; line-height: 1.2; margin-bottom: 20px; }
    #header.product_landing .sales-home-hero p { max-width: none; width: 100%; font-size: 17px; line-height: 1.6; }
    #header.product_landing .sales-home-hero .intro_button { display: flex !important; align-items: stretch; }
    #header.product_landing .sales-home-hero .intro_button a {
        flex: 1 1 145px; display: flex; align-items: center; justify-content: center;
        width: auto !important; min-height: 50px; line-height: 1.4; padding: 14px 18px !important;
    }
}
@media (max-width: 479px) {
    /* Phones show only the middle of the photo, so they get a centre crop. */
    #header.product_landing {
        background-image: linear-gradient(90deg, rgba(0, 32, 53, .88), rgba(0, 32, 53, .55)), url('../images/banner/product_banner2-phone.jpg');
        background-image: linear-gradient(90deg, rgba(0, 32, 53, .88), rgba(0, 32, 53, .55)), image-set(url('../images/banner/product_banner2-phone.webp') type("image/webp"), url('../images/banner/product_banner2-phone.jpg') type("image/jpeg"));
    }
    /* One phrase per line instead of breaking mid-phrase. */
    #header.product_landing .sales-home-hero .sales-home-assurance span { display: block; }
    #header.product_landing .sales-home-hero .sales-home-assurance .sales-home-assurance-separator { display: none; }
}
@media (max-width: 359px) {
    #header.product_landing .sales-home-hero h1 { font-size: 28px; }
}

/* The product photo has width/height attributes so its space is reserved; keep its shape when CSS changes the width. */
#features_product .feature_banner img { height: auto; }

/* The feature strip headings are h2s (they follow the hero h1) but keep their former h3 size. */
.sercives_product .product_wrapper .signle_services h2 { font-size: 24px; line-height: 30px; margin-bottom: 16px; }
@media (max-width: 1200px) {
    .sercives_product .product_wrapper .signle_services h2 { font-size: 22px; line-height: 22px; }
}

/* Hero bottom on wide screens. At 100% width the photo is shorter than the 952px hero below about 1425px wide,
   which showed the blue fallback colour; cover fills it at every width. The feature strip overlaps the hero by 145px,
   so tint the strip's section below that line and the photo meets the tinted section directly instead of a white gap. */
@media (min-width: 1201px) {
    #header.product_landing { background-size: cover; background-position: center top; }
    .sercives_product { background: linear-gradient(to bottom, transparent 145px, var(--vc-tint) 145px); }
}

/* Even spacing (--vc-section-gap in css/sales.css) between the visible content of each section,
   including the tinted band's own edges. Offsets are inner space measured with the section padding at 0. */
#main .sales-home-start { padding-top: var(--vc-section-gap); padding-bottom: calc(var(--vc-section-gap) - 4px); } /* guide links: 4px below */
#features_product .single_features { align-items: center; }
#features_product .single_features .feature_intro { margin: 0 !important; }
#features_product .single_features .feature_banner { min-height: 0 !important; }
#main #features_product.features { padding-top: var(--vc-section-gap); padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
#main .testimonial_agency { padding-top: var(--vc-section-gap); padding-bottom: calc(var(--vc-section-gap) + 20px); margin-top: 0; margin-bottom: 0; } /* the carousel overhangs by 20px */
footer { margin-top: 0 !important; }
@media (max-width: 767px) {
    #features_product .single_features .feature_intro { margin-bottom: 30px !important; }
}