body {
    font-family: var(--font-family);
}

html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;

    /*
     * `clip`, not `hidden`. Per CSS Overflow 3 a non-visible value on one axis forces the other to compute as `auto`,
     * so `overflow-x: hidden` here turned BODY into the scroll container instead of the viewport — and Chrome's
     * fragment navigation scrolls the viewport, so every in-page anchor (#faq, #how, …) either stopped short or did
     * nothing. `clip` is the one non-visible value that leaves `overflow-y: visible` alone, so the viewport scrolls
     * again and anchors land where they should. `min-height` for the same reason: a fixed 100% height on a body whose
     * content is taller is what makes it scrollable in the first place.
     */
    overflow-x: clip;
}

main {
    flex: 1;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px;
}

@media (max-width: 980px) {
    .container:not(.cb-header__inner.container) {
        padding: 40px 20px;
    }
}