/* Homepage colors only. Keep viewport insets and menu geometry in the base styles. */
@media (max-width: 767px), (max-height: 600px) and (pointer: coarse) {
    html.benix-home-safe-area,
    html.benix-home-safe-area body {
        background-color: #000000;
    }

    /* Keep the content below the hero white, including transparent gaps. */
    html.benix-home-safe-area body > article {
        background-color: #fff;
    }

    /* Use the same opaque black before and after scrolling and in the open menu. */
    html.benix-home-safe-area nav#menu.menu-mainpage,
    html.benix-home-safe-area #menu-mobile-box {
        background-color: #000000;
    }
}