/* 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 { padding: 90px 0 70px; 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: 60px 15px 40px; }
    .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; }
}
