/* =========================================================================
 | Public pages — mobile app polish
 |
 | The classic theme is laid out desktop-first, so on a phone it reads as a
 | shrunken web page rather than an app. This file only touches < 992px and
 | only tightens what the screenshots showed as wrong: the hero's vertical
 | rhythm, the off-canvas menu's tap targets, and safe-area insets. Desktop
 | is untouched.
 ========================================================================= */

@media (max-width: 991.98px) {

    /* ---------- Safe areas: notch above, home bar below ---------------- */

    body { padding-bottom: env(safe-area-inset-bottom, 0px); }

    .header-sticky,
    #header-sticky,
    .header-1 {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* ---------- Hero: app-style, one screen, no dead space ------------- */

    .hero-section.hero-1 {
        padding-block: 26px 34px;
        background-position: center top;
    }

    /* Decorative shapes cost bandwidth and crowd a narrow screen. */
    .hero-shape-1, .hero-shape-2, .hero-shape-3 { display: none; }

    .hero-content { text-align: center; }

    .hero-content h6 {
        font-size: 12px;
        letter-spacing: .16em;
        margin-bottom: 10px;
    }

    .hero-content h1 {
        font-size: clamp(28px, 8.4vw, 38px);
        line-height: 1.18;
        letter-spacing: -.02em;
        margin-bottom: 12px;
    }

    .hero-content p {
        font-size: 14.5px;
        line-height: 1.6;
        margin-bottom: 20px;
        /* Long measures are hard to read on a phone; cap the line length. */
        max-width: 34ch;
        margin-inline: auto;
    }

    /* One clear call to action, full width, thumb-height. */
    .hero-button { display: block; }
    .hero-button .theme-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 700;
    }

    /* Reserve the image's box before it loads so the CTA doesn't jump. */
    .hero-image { margin-top: 24px; }
    .hero-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: contain;
    }

    /* ---------- Section rhythm ---------------------------------------- */

    .page-section > section,
    section.space,
    .space { padding-block: 44px; }

    /* ---------- Off-canvas menu: app sheet ---------------------------- */

    .offcanvas__info {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-start-start-radius: 22px;
        border-end-start-radius: 22px;
    }

    .offcanvas__logo img { max-height: 34px; width: auto; }

    .offcanvas__top { margin-bottom: 22px !important; }

    /* Rows a thumb can hit without aiming. */
    .offcanvas__info .mobile-menu li > a {
        min-height: 50px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
    }

    .offcanvas__contact h4 { font-size: 17px; margin-bottom: 12px; }
    .offcanvas__contact ul li { margin-bottom: 10px; }
    .offcanvas__contact-text a { font-size: 14.5px; word-break: break-word; }

    /* Register / Login read as a pair of app buttons, not inline links. */
    .offcanvas__contact .header-button {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px !important;
    }
    .offcanvas__contact .header-button .theme-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        border-radius: 14px;
        font-size: 15.5px;
        font-weight: 700;
    }

    .offcanvas__contact .social-icon { justify-content: center; gap: 12px; margin-top: 20px; }

    /* ---------- Footer ------------------------------------------------- */

    .footer-bottom { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    .footer-attribution { margin: 6px 0 0; font-size: 12.5px; opacity: .85; }
    .footer-attribution a { font-weight: 700; text-decoration: none; }
}

/* Attribution line is part of the footer at every width. */
.footer-attribution { margin: 6px 0 0; font-size: 13px; opacity: .85; }
.footer-attribution a { font-weight: 700; text-decoration: none; }