/* ==========================================================================
   VettedSec — Responsive rules
   Breakpoints target real device ranges rather than arbitrary numbers:
   >=1024   Laptops, desktops, iPad Pro landscape (1194) — full layout
   881-1023 iPad landscape (1024), small laptops in split view
   769-880  Large tablets in portrait-ish widths, foldables
   641-768  iPad / Android tablets in portrait (768, 800, 810, 820, 834)
   481-640  Large phones in landscape, small tablets
   381-480  Standard phones portrait (iPhone 12-15, Pixel, Galaxy: 390-430)
   <=380    Compact phones (iPhone SE: 320-375)
   ========================================================================== */

/* Safe-area support for notched / rounded-corner phones */
.navbar-inner,
.announce-inner,
.mobile-menu {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}

/* ---- iPad landscape / small laptop ---- */
@media (max-width: 1023px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        gap: 18px;
    }

    .persona-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .roadmap-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .roadmap-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }
}

/* ---- Tablet landscape / large tablets: stack hero & enterprise ---- */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
    }

    .hero-content { max-width: 620px; margin: 0 auto; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-proof { justify-content: center; }

    .hero-visual { order: -1; }

    .product-card { max-width: 560px; margin: 0 auto; }

    .enterprise-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .enterprise-content { text-align: center; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .pricing-card.featured {
        transform: none;
    }
}

/* ---- Tablet portrait & below: mobile nav takes over ---- */
@media (max-width: 880px) {
    .desktop-menu { display: none; }
    .navbar-actions .btn-primary { display: none; }
    .mobile-toggle { display: flex; }
}

@media (min-width: 881px) {
    .mobile-menu { display: none !important; }
}

/* ---- iPad / Android tablet portrait ---- */
@media (max-width: 768px) {
    .announce-inner {
        font-size: 0.75rem;
        gap: 8px;
    }

    .announce-inner span { display: none; }

    .hero { padding: 48px 0 56px; }

    .product-sidebar { width: 108px; }

    .section { padding: 72px 0; }

    .section-header { margin-bottom: 44px; }

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

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

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

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .social-proof-grid { gap: 16px 28px; }

    .social-proof-grid span { font-size: 1rem; }

    .footer-inner {
        flex-direction: column;
        gap: 32px;
        text-align: left;
    }
}

/* ---- Large phones landscape / small tablets ---- */
@media (max-width: 640px) {
    .feature-grid { grid-template-columns: 1fr; }

    .trust-strip { padding: 28px 0 32px; }

    .trust-track { gap: 10px; }

    .trust-track span { font-size: 0.8125rem; }

    .waitlist-card { padding: 44px 28px; }

    .footer-cols {
        gap: 32px;
        flex-wrap: wrap;
    }
}

/* ---- Standard phones portrait ---- */
@media (max-width: 480px) {
    html { scroll-padding-top: 90px; }

    .container { padding: 0 18px; }

    .hero { padding: 40px 0 48px; }

    .hero-title { line-height: 1.18; }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-actions .btn { justify-content: center; }

    .hero-proof {
        flex-direction: column;
        gap: 10px;
    }

    .hero-proof p { max-width: 100%; text-align: center; }

    .product-card { border-radius: var(--radius-md); }

    .product-sidebar { display: none; }

    .product-main { padding: 18px; }

    .pm-question { font-size: 0.8125rem; }

    .section { padding: 56px 0; }

    .section-header { margin-bottom: 36px; }

    .feature-card { padding: 24px; }

    .step-card { padding: 26px 22px; }

    .persona-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

    .persona-card { padding: 20px 16px; }

    .roadmap-card { padding: 22px 20px; }

    .pricing-card { padding: 26px 22px; }

    .pricing-amount { font-size: 1.875rem; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .stat-item strong { font-size: 1.875rem; }

    .enterprise-card { padding: 26px; }

    .checklist li {
        flex-wrap: wrap;
        gap: 8px;
    }

    .checklist em { margin-left: 34px; }

    .faq-item { padding: 2px 18px; }

    .waitlist-card { padding: 36px 20px; }

    .waitlist-form { flex-direction: column; }

    .footer-cols {
        flex-direction: column;
        gap: 28px;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ---- Compact phones (iPhone SE / small Android) ---- */
@media (max-width: 380px) {
    .navbar-actions { gap: 10px; }

    .theme-toggle { width: 34px; height: 34px; }

    .logo-text { font-size: 1rem; }

    .logo-img { height: 34px; width: 34px; }

    .badge-soft { font-size: 0.7rem; padding: 5px 12px; }

    .btn-lg { padding: 12px 20px; font-size: 0.875rem; }

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

    .trust-track span { font-size: 0.75rem; }
}

/* ---- Short-height mobile landscape (phones rotated) ---- */
@media (max-height: 480px) and (orientation: landscape) {
    .announce-bar { display: none; }

    .hero { padding: 28px 0 36px; }

    .hero-proof { display: none; }

    .section { padding: 44px 0; }
}

/* ---- Large / ultra-wide desktop refinement ---- */
@media (min-width: 1600px) {
    .hero { padding: 104px 0 112px; }

    .section { padding: 120px 0; }
}