/* ==========================================================================
   Landing Page Styles (Map Pack + shared)
   ========================================================================== */

@layer components {

/* Shared landing page styles (map-pack + consultation) */
.map-pack-offer .benefit-card h3,
.consultation-offer .benefit-card h3 {
    color: var(--primary-color);
}

.map-pack-offer .how-to-section .darken-overlay,
.consultation-offer .how-to-section .darken-overlay {
    filter: brightness(0.35);
}

.map-pack-offer .how-to-section,
.consultation-offer .how-to-section {
    padding-top: 130px;
}

/* Map-pack specific */
.map-pack-offer .benefit-card .p-6 {
    padding: 1.75rem 2rem;
}

.map-pack-offer .benefit-card .card-footer-text {
    color: var(--text-color);
    opacity: 0.7;
    font-style: italic;
}

.map-pack-offer .how-to-section {
    margin-bottom: 0;
}

/* Email form section */
.map-pack-offer #email-form {
    padding: 3rem 0 8rem;
    margin: 0;
    background-color: var(--accent-color);
}

.map-pack-offer #email-form h2 {
    color: var(--text-color);
}

.map-pack-offer #email-form .form-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

/* How-to section check icons */
.map-pack-offer .how-to-section .fa-check {
    color: var(--accent-color);
}

} /* end @layer components */

/* Remove gaps between last section and footer (unlayered to beat global margins) */
body.page-template-page-webpack-offer .site-content,
body.page-template-page-webpack-offer .site,
body.page-template-page-webpack-offer .map-pack-offer,
body.page-template-page-webpack-offer main {
    margin-bottom: 0;
    padding-bottom: 0;
}

body.page-template-page-webpack-offer footer#footer {
    margin-top: 0;
}