/* Shared public-page layout safeguards. Keep wide data inside local scrollers. */
.cch-public-content :is(.grid, .flex) > *,
footer :is(.grid, .flex) > * {
    min-width: 0;
}

.cch-public-content :is(h1, h2, h3, h4, p, li, a, label),
footer :is(p, li, a, span) {
    overflow-wrap: anywhere;
}

.cch-public-content :is(img, video, iframe) {
    max-width: 100%;
}

.cch-public-content pre {
    max-width: 100%;
    overflow-x: auto;
}

.cch-public-content :is(input, textarea, select) {
    min-width: 0;
    max-width: 100%;
}

.cch-public-content .cch-contact-caption {
    position: static;
    margin-top: 1rem;
}

/* Keep closed navigation out of both the viewport and keyboard focus. */
#mobileMenu[class~="left-[-100%]"] {
    visibility: hidden;
    pointer-events: none;
}

#mobileMenu.left-0 {
    visibility: visible;
    pointer-events: auto;
}

#mobileMenu {
    max-height: calc(100dvh - 72px);
    overscroll-behavior: contain;
}

/* Decorative background shapes should never widen the document. */
.cch-public-content .blob-1,
.cch-public-content .blob-2 {
    max-width: 100%;
    pointer-events: none;
}
.cch-public-content .blob-1 { right: 0; }
.cch-public-content .blob-2 { left: 0; }

@media (max-width: 1023px) {
    .cch-public-content .home-security-art {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .75rem;
    }
    .cch-public-content .home-security-art img { flex-basis: 100%; }
    .cch-public-content .home-security-badge {
        position: static;
        transform: none;
        animation: none;
        max-width: 100%;
    }
    .cch-public-content .cch-contact-caption {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 767px) {
    .site-header nav {
        gap: .75rem;
        min-height: 72px;
    }
    .site-header nav > a:first-child {
        margin-left: 0;
        min-width: 0;
    }
    .site-header nav > a:first-child img {
        max-width: min(65vw, 220px);
        height: auto;
        max-height: 56px;
        top: 0;
        transform: none;
    }
    #mobileMenuButton { flex-shrink: 0; min-width: 44px; min-height: 44px; }

    .cch-public-content h1:not(.inline-flex) {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    .cch-public-content h2 {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
        line-height: 1.3 !important;
    }
    .cch-public-content h3 { font-size: clamp(1.125rem, 5vw, 1.5rem) !important; }

    .cch-public-content .billing-toggle-dark {
        max-width: 100%;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .cch-public-content .billing-toggle-dark .billing-btn {
        min-height: 44px;
        min-width: 0;
        white-space: normal;
        padding: .65rem .75rem;
        font-size: .8125rem;
        line-height: 1.4;
    }
    .cch-public-content .plan-price-row { flex-wrap: wrap; row-gap: .25rem; }
    .cch-public-content .plan-card > .absolute:has(> span) {
        position: static;
        transform: none;
        margin-bottom: 1rem;
    }

    /* Show the full artwork on phones, including images with fixed-height utilities. */
    .cch-public-content img {
        height: auto !important;
        object-fit: contain !important;
        transform: none !important;
        animation: none !important;
    }
    .cch-public-content .section-hero { min-height: 0; height: auto; }
    .cch-public-content > section.h-screen {
        height: auto;
        min-height: 0;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .cch-public-content .cch-contact-photo { aspect-ratio: auto; }
    .cch-public-content .cch-contact-caption {
        align-items: flex-start;
        padding: .875rem;
    }
    .cch-public-content .cch-contact-caption-icon { flex-shrink: 0; }
    .cch-public-content :is(.cch-contact-actions, .nj-hero-actions) {
        align-items: stretch;
        flex-direction: column;
    }
    .cch-public-content .cch-contact-chat { justify-content: center; }
    .cch-public-content .cch-contact-email { white-space: normal; }

    footer h3 { font-size: 1.125rem !important; }
    footer li { font-size: .875rem !important; }
}

@media (max-width: 374px) {
    footer > .container > .grid {
        grid-template-columns: minmax(0, 1fr);
    }
    footer > .container > .grid > * { grid-column: auto; }
    .cch-public-content .cch-contact { padding: 1rem; }
}