:root {
    --site-nav-height: 6rem;
    --app-height: 100vh;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
}

@media (max-width: 767px) {
    :root {
        --site-nav-height: 5rem;
    }

    body > header {
        padding-top: calc(var(--site-nav-height) + 1.5rem) !important;
    }

    section[id] {
        scroll-margin-top: calc(var(--site-nav-height) + 1rem) !important;
    }

    nav .h-24 {
        height: var(--site-nav-height) !important;
    }

    nav .space-x-5 {
        gap: 0.75rem !important;
    }

    nav .w-14.h-14 {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }

    nav .text-2xl {
        font-size: 1.375rem !important;
    }

    #mobile-menu {
        max-height: calc(var(--app-height) - var(--site-nav-height));
        overflow-y: auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    header h1.serif,
    main h1.serif {
        font-size: clamp(2.25rem, 10vw, 3.5rem) !important;
        line-height: 1.1 !important;
    }

    section h2.serif {
        font-size: clamp(1.875rem, 8vw, 2.75rem) !important;
        line-height: 1.15 !important;
    }

    .step-card,
    .trust-card,
    .team-card {
        padding: 1.5rem !important;
    }

    .policy-section,
    .faq-item,
    .feature-grid-item {
        word-break: break-word;
    }

    .policy-section {
        padding-left: 1rem !important;
    }

    .policy-section li {
        align-items: flex-start !important;
    }

    #waitlist .bg-gray-50,
    #security .bg-white,
    #faq .faq-item,
    #principles .trust-card,
    #methodology .step-card {
        padding: 1.5rem !important;
    }

    #waitlist input,
    #waitlist button,
    #optin-form input,
    #optin-form button {
        min-height: 3.25rem;
        font-size: 16px;
    }

    .profile-img-container {
        width: clamp(96px, 32vw, 132px) !important;
        height: clamp(96px, 32vw, 132px) !important;
    }

    footer a[href^="mailto:"] {
        overflow-wrap: anywhere;
        word-break: break-word;
        text-align: center;
    }
}

html.site-mobile-menu-open,
html.site-mobile-menu-open body {
    overflow: hidden;
}