@media (max-width: 64rem) {
    :root {
        --mobile-shell-pad: clamp(1rem, 4vw, 1.25rem);
        --mobile-card-pad: clamp(1.125rem, 4vw, 1.5rem);
    }

    .header,
    .ds-header {
        padding-inline: var(--mobile-shell-pad);
    }

    .header-inner,
    .ds-header-inner {
        gap: 1rem 1.25rem;
    }

    .container,
    .section-inner,
    .hero-inner {
        min-width: 0;
    }

    .info-panel,
    .free-utility-grid,
    .support-grid,
    .proof-grid,
    .trust-grid,
    .two-col,
    .footer-inner,
    .hub-grid,
    .kb-grid,
    .compact-grid,
    .pricing-grid,
    .footer-grid,
    .how-grid,
    .faq-grid {
        grid-template-columns: 1fr !important;
    }

    .hub-grid {
        gap: 1.5rem;
        margin-top: 1.75rem;
    }
}

@media (max-width: 48rem) {
    body {
        overflow-x: hidden;
    }

    body::before {
        animation: none !important;
    }

    .header,
    .ds-header {
        padding: 0.875rem var(--mobile-shell-pad);
    }

    .header-inner,
    .ds-header-inner {
        flex-wrap: wrap;
        align-items: center;
    }

    .header-inner > *,
    .ds-header-inner > *,
    .nav > *,
    .hero-ctas > *,
    .cta-actions > *,
    .hero-actions > *,
    .info-links > * {
        min-width: 0;
    }

    .logo {
        max-width: calc(100% - 4rem);
        font-size: 1rem;
    }

    .nav {
        width: 100%;
        justify-content: space-between;
        gap: 0.75rem 1rem;
        flex-wrap: wrap;
    }

    .nav-links {
        display: none !important;
    }

    .nav .btn {
        width: 100%;
        min-height: 3rem;
        padding-inline: 1rem;
    }

    .hero {
        min-height: auto !important;
        padding: 8rem var(--mobile-shell-pad) 3.5rem !important;
    }

    section {
        padding-inline: var(--mobile-shell-pad) !important;
        padding-block: clamp(2.75rem, 10vw, 4.5rem);
    }

    .container {
        padding-inline: var(--mobile-shell-pad) !important;
    }

    .hero h1,
    .faq-header h2,
    h1.page-title {
        font-size: clamp(1.95rem, 8vw, 2.75rem) !important;
        line-height: 1.05 !important;
    }

    .hero p,
    .hero p.subtitle,
    .hero-sub,
    .subtitle,
    .section-subtitle,
    .empower-note {
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
    }

    .hero-ctas,
    .cta-actions,
    .hero-actions,
    .final-cta-buttons,
    .info-links {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 0.75rem;
    }

    .hero-ctas .btn,
    .cta-actions .btn,
    .hero-actions .hero-action,
    .mobile-sticky-cta .btn,
    .pricing-card .btn,
    .final-cta-buttons .btn,
    .support-card .btn,
    .cta-card .btn,
    .upgrade-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 3rem;
    }

    .info-card,
    .utility-card,
    .support-card,
    .cta-card,
    .guide-card,
    .card {
        padding: var(--mobile-card-pad) !important;
        border-radius: 1.25rem !important;
    }

    .faq-summary {
        padding: 1rem 1.125rem !important;
        gap: 1rem;
        align-items: flex-start;
        font-size: 1rem !important;
    }

    .faq-content {
        padding: 0 1.125rem 1.125rem !important;
        overflow-x: auto;
    }

    .faq-item[open] .faq-content {
        padding-top: 1rem !important;
    }

    .faq-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .hub-sidebar {
        position: static !important;
        order: 0 !important;
    }

    .header-spacer {
        display: none !important;
    }

    .concierge-section {
        margin-top: 3.5rem !important;
        padding: 2rem 1.25rem !important;
    }

    .concierge-item {
        padding: 1.5rem !important;
    }

    .mobile-sticky-cta {
        left: var(--mobile-shell-pad) !important;
        right: var(--mobile-shell-pad) !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
    }

    .app-shell-footer-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .btn:hover,
    .hero-action:hover,
    .guide-card:hover,
    .support-card:hover,
    .utility-card:hover,
    .info-card:hover,
    .pricing-card:hover,
    .concierge-item:hover {
        transform: none !important;
    }

    .proof-icon::after,
    .feature-icon::after,
    .step-icon::after {
        content: none !important;
    }
}