/* Start custom CSS */<style>

/* =========================================================
   HERDLENS — MASTER CONTENT WIDTH
   Full-width backgrounds, contained content
   ========================================================= */

/*
   Every major section's CONTENT is restricted to 1000px.
   Section backgrounds remain full browser width.
*/

body .hl-inner,
body .hl-hero__inner,
body .hl-process-strip__inner,
body .hl-final-cta__inner,
body .hl-footer__inner,
body .hl-footer__bottom > div {

    width: calc(100% - 96px) !important;
    max-width: 1000px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   HERO
   ========================================================= */

body .hl-hero__inner {
    gap: 45px !important;
}


/* =========================================================
   PROCESS STRIP
   ========================================================= */

body .hl-process-strip__item {
    padding-left: 18px !important;
    padding-right: 18px !important;
}


/* =========================================================
   FINAL CTA
   This was previously missing from the common width system.
   ========================================================= */

body .hl-final-cta__inner {
    max-width: 820px !important;
}


/* =========================================================
   FAQ
   Prevent answers stretching too wide
   ========================================================= */

body .hl-faq__items {
    max-width: 820px !important;
}


/* =========================================================
   SECTION HEADINGS
   Keep large copy comfortable to read
   ========================================================= */

body .hl-how__heading,
body .hl-features__top,
body .hl-faq__heading {
    max-width: 720px !important;
}

body .hl-pricing > .hl-inner > .hl-heading {
    max-width: 760px !important;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    body .hl-inner,
    body .hl-hero__inner,
    body .hl-process-strip__inner,
    body .hl-footer__inner,
    body .hl-footer__bottom > div {

        width: 1000px !important;
        max-width: 1000px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    body .hl-inner,
    body .hl-hero__inner,
    body .hl-process-strip__inner,
    body .hl-final-cta__inner,
    body .hl-footer__inner,
    body .hl-footer__bottom > div {

        width: calc(100% - 48px) !important;
        max-width: none !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    body .hl-inner,
    body .hl-hero__inner,
    body .hl-process-strip__inner,
    body .hl-final-cta__inner,
    body .hl-footer__inner,
    body .hl-footer__bottom > div {

        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

}

</style>/* End custom CSS */