/*
 * Keeps every inner-page gradient behind the floating header.
 * Home already has this composition in catalog-mfo.css and is intentionally untouched.
 */
body.finpick-inner,
body.mfo-detail {
    position: relative;
}

body.finpick-inner > .site-header,
body.mfo-detail > .site-header {
    position: absolute;
    z-index: 30;
    inset: 0 0 auto;
    border: 0;
    background: transparent;
}

/* Preserve the former content position after taking the header out of document flow. */
body.editorial-index-page main > .publication-index {
    padding-top: 130px;
}

body.editorial-article-page main > .publication-page {
    padding-top: 124px;
}

body.content-document-page main > .content-page-hero,
body.submit-lender-page main > .submit-card-hero,
body.compare-page main > .page-heading {
    padding-top: 172px;
}

body.about-page main > .about-hero {
    padding-top: 182px;
}

body.not-found-page main > .not-found {
    min-height: 710px;
    padding-top: 90px;
}

/* The lender hero owns a custom per-lender gradient and must begin at the viewport top. */
body.mfo-detail main > .lender-hero {
    padding-top: 116px;
}

@media (max-width: 980px) {
    body.editorial-index-page main > .publication-index,
    body.editorial-article-page main > .publication-page {
        padding-top: 118px;
    }

    body.content-document-page main > .content-page-hero,
    body.submit-lender-page main > .submit-card-hero,
    body.compare-page main > .page-heading,
    body.about-page main > .about-hero {
        padding-top: 154px;
    }
}

@media (max-width: 700px) {
    body.editorial-index-page main > .publication-index,
    body.editorial-article-page main > .publication-page {
        padding-top: 98px;
    }

    body.content-document-page main > .content-page-hero,
    body.submit-lender-page main > .submit-card-hero,
    body.compare-page main > .page-heading,
    body.about-page main > .about-hero {
        padding-top: 136px;
    }

    body.not-found-page main > .not-found {
        min-height: 680px;
        padding-top: 76px;
    }

    body.mfo-detail main > .lender-hero {
        padding-top: 92px;
    }
}