/* ==========================================================================
   School Insight ERP — Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .apps-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .app-side-left,
    .app-side-right {
        text-align: center;
        max-width: 360px;
        margin: 0 auto;
    }

    .app-side-icon { margin: 0 auto; }

    .app-checklist {
        display: inline-block;
        text-align: left;
    }

    .phones-cluster {
        height: 390px;
        margin: 0.5rem 0 1rem;
    }

    .cta-banner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .cta-copy p { margin: 0 auto; }
}

@media (max-width: 991.98px) {
    :root { --header-height: 76px; }

    .section-padding { padding: 72px 0; }

    .brand-logo-img {
        max-height: 48px;
        max-width: min(220px, 48vw);
    }

    .navbar-collapse {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 1rem;
        margin-top: 0.75rem;
        box-shadow: var(--shadow-md);
    }

    .navbar-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--border);
    }

    .navbar-actions .btn { width: 100%; }

    .hero-section { padding-top: calc(var(--header-height) + 36px); }

    .why-row { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }

    .ai-insight-card { left: 4%; max-width: 240px; }

    .pricing-explainer {
        grid-template-columns: 1fr;
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-nav {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .section-padding { padding: 56px 0; }

    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }

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

    .ai-insight-card { position: relative; left: auto; bottom: auto; margin-top: 1rem; max-width: 100%; }

    .dashboard-mockup { animation: none; min-height: auto; }

    .why-row { grid-template-columns: repeat(2, 1fr); }
    .stats-row { grid-template-columns: 1fr; }

    .phones-cluster { height: 360px; }

    .phone { width: 150px; }
    .phone-screen { min-height: 290px; }
    .phone-back { transform: translate(-34px, -12px) rotate(-6deg); }
    .phone-front { transform: translate(36px, 0) rotate(5deg); }

    .quote-card { min-height: auto; padding: 1.6rem; }
    .school-illustration { height: 280px; margin-top: 0.5rem; }

    .pricing-card { padding: 1.6rem; }

    .cta-banner { padding: 1.8rem 1.2rem; }
    .cta-actions { width: 100%; flex-direction: column; }
    .cta-actions .btn { width: 100%; }

    .contact-info-card,
    .contact-form { padding: 1.4rem; }

    .footer-desc { max-width: 100%; }

    .billing-switcher {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .billing-option { flex: 0 0 auto; }

    .legal-content { padding: 1.25rem; }

    .footer-bottom {
        align-items: center;
        text-align: center;
    }

    .footer-legal-links { justify-content: center; }
}

@media (max-width: 575.98px) {
    .brand-logo-img {
        max-height: 42px;
        max-width: min(190px, 55vw);
    }

    .hero-title { font-size: 1.9rem; }

    .hero-trust-row {
        flex-direction: column;
        gap: 0.7rem;
    }

    .why-row { grid-template-columns: 1fr 1fr; }

    .phone-back { display: none; }
    .phone-front {
        position: relative;
        transform: none;
        left: auto;
    }
    .phones-cluster {
        height: auto;
        justify-content: center;
    }

    .page-breadcrumb-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .breadcrumb-badge {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html { scroll-behavior: auto; }
    .logo-marquee-track { animation: none; }
}