/* Final phone and tablet safeguards shared by every public page. */
html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img,
video{
    max-width:100%;
}

@media(max-width:720px){
    body{
        font-size:16px;
    }

    .eeap-hero,
    .page-hero{
        min-height:500px;
        padding:72px 24px;
    }

    .eeap-hero h1,
    .page-hero h1{
        font-size:clamp(2.25rem, 10.5vw, 3.25rem);
    }

    .hero .eyebrow{
        display:block;
        max-width:100%;
        white-space:normal;
        text-align:center;
    }

    .hero .description,
    .resources-hero > p:last-child,
    .section-intro > p:last-child,
    .resource-card > p{
        overflow-wrap:anywhere;
    }

    .about,
    .feature,
    .feature-section,
    .info-section{
        grid-template-columns:1fr;
        gap:28px;
        margin:56px auto;
        padding-right:24px;
        padding-left:24px;
    }

    .feature-section.reverse .feature-image,
    .feature-section.reverse .feature-content,
    .feature.reverse .feature-image,
    .feature.reverse .feature-text{
        order:initial;
    }

    .feature-image img,
    .about-image img,
    .about .playground-photo{
        height:auto;
        max-height:380px;
        aspect-ratio:4 / 3;
        object-fit:cover;
        border-radius:16px;
    }

    .benefit-grid,
    .info-section,
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        padding-right:0;
        padding-left:0;
    }

    .stat{
        padding:26px 18px;
    }

    .benefits,
    .gallery,
    .cta{
        padding:60px 24px;
    }

    .gallery-grid,
    .otl-experience-gallery .gallery-grid{
        gap:16px;
    }

    .gallery-grid img,
    .gallery-item img,
    .otl-experience-gallery .gallery-grid img{
        height:auto;
        min-height:0;
        aspect-ratio:4 / 3;
        object-fit:cover;
    }

    .cta h2,
    .benefits h2,
    .section-heading h2,
    .about h2,
    .feature-content h2,
    .feature-text h2{
        font-size:clamp(2rem, 9vw, 2.65rem);
    }

    .cta a{
        width:100%;
        max-width:330px;
        box-sizing:border-box;
        padding-right:20px;
        padding-left:20px;
    }

    .resource-document-list a{
        align-items:flex-start;
        gap:12px;
        padding:14px;
    }

    .resource-document-list b{
        max-width:78px;
        white-space:normal;
        line-height:1.3;
        text-align:right;
    }
}

@media(max-width:390px){
    .navbar .brand-text h2{
        font-size:.94rem;
    }

    .navbar .brand-text p{
        font-size:.62rem;
    }

    .eeap-hero,
    .page-hero{
        padding-right:18px;
        padding-left:18px;
    }

    .hero-btn,
    .cta a{
        max-width:none;
    }

    .stats{
        grid-template-columns:1fr;
    }
}