/* ==========================================================================
   OWNLY BY RAPIDO - RESTAURANT ONBOARDING SYSTEM
   Responsive & Mobile-First Optimizations (Deep Polish)
   ========================================================================== */

/* Large Tablets & Small Laptops (<= 1100px) */
@media (max-width: 1100px) {
    .container {
        padding: 0 20px;
    }

    .desktop-nav {
        gap: 18px;
    }

    .nav-link {
        font-size: 13.5px;
    }

    .traction-layout {
        grid-template-columns: 1fr 1.25fr;
        gap: 20px;
    }

    .docs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablets (<= 992px) */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero-content-col {
        text-align: center;
    }

    .hero-eyebrow-badge {
        margin: 0 auto 20px auto;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-notes-strip {
        justify-content: center;
    }

    .hero-visual-card {
        max-width: 440px;
        margin: 0 auto;
    }

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

    .why-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .traction-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .traction-subgrid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

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

    .video-card-item:last-child {
        grid-column: span 2;
        max-width: 380px;
        margin: 0 auto;
        width: 100%;
    }

    .nrai-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .meets-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .meet-card:last-child {
        grid-column: span 2;
    }

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

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

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

    .footer-brand {
        grid-column: span 2;
    }
}

/* Mobile & Small Tablets (<= 768px) */
@media (max-width: 768px) {
    /* Show Mobile Sticky CTA Bar */
    .mobile-sticky-cta {
        display: block;
    }

    /* Provide room at bottom so sticky CTA never covers footer or buttons */
    body {
        padding-bottom: 76px;
    }

    /* Hide desktop nav & top header CTA button */
    .desktop-nav,
    .btn-phone-header,
    .btn-header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-drawer.active {
        display: block;
    }

    .mobile-drawer-inner {
        padding: 22px 18px;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 22px;
    }

    .mobile-nav-link {
        font-size: 15px;
        font-weight: 600;
        color: #E2E8F0;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mobile-nav-link:hover {
        color: var(--primary-pink);
    }

    /* Section Spacing */
    .section-problem,
    .section-why-ownly,
    .section-visibility-delivery,
    .section-upside,
    .section-traction,
    .section-videos,
    .section-nrai,
    .section-meets,
    .section-target-fit,
    .section-how-it-works,
    .section-documents,
    .section-pricing-cta,
    .section-faq,
    .section-final-cta {
        padding: 68px 0;
    }

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

    /* Single column grids */
    .problem-grid,
    .why-grid,
    .vis-del-grid,
    .upside-grid,
    .target-grid,
    .ask-grid,
    .steps-grid,
    .meets-grid,
    .video-cards-grid {
        grid-template-columns: 1fr;
    }

    .video-card-item:last-child,
    .meet-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .video-card-item {
        max-width: 360px;
        margin: 0 auto;
        width: 100%;
    }

    .traction-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .traction-hero-card {
        padding: 30px 22px;
    }

    .traction-stat-box {
        padding: 20px 16px;
    }

    .why-card {
        padding: 30px 22px;
    }

    .meets-footer-quote {
        flex-direction: column;
        padding: 24px 20px;
        gap: 14px;
        text-align: center;
    }

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

    /* Pricing Section */
    .pricing-dominant-card {
        padding: 44px 22px;
    }

    .pricing-deliverables-list {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .deliv-item {
        width: 100%;
        max-width: 360px;
        text-align: left;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-brand {
        grid-column: span 1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    .footer-legal .sep {
        margin: 0 6px;
    }

    /* Form Wizard */
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .wizard-steps-header {
        padding: 14px 18px;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 14px;
    }

    .wizard-step-indicator {
        white-space: nowrap;
        font-size: 12px;
    }

    .wizard-form-body {
        padding: 24px 18px;
    }

    .form-control {
        font-size: 16px; /* Prevents auto-zoom in iOS Safari */
    }

    .thank-you-card {
        padding: 32px 20px;
        margin: 20px auto;
    }
}

/* Small Smart Phones (<= 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .top-announcement-bar {
        display: none;
    }

    .hero-section {
        padding: 44px 0 54px 0;
    }

    .hero-eyebrow-badge {
        font-size: 11px;
        padding: 5px 12px;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-group .btn {
        width: 100%;
    }

    .hero-notes-strip {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .problem-card {
        padding: 24px 20px;
    }

    .problem-stat-hero {
        font-size: 38px;
    }

    .why-card {
        padding: 26px 18px;
    }

    .why-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .why-card-title {
        font-size: 21px;
    }

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

    .traction-hero-card {
        padding: 24px 18px;
    }

    .traction-hero-number {
        font-size: 44px;
    }

    .stat-big-val {
        font-size: 32px;
    }

    .meet-img-wrap {
        height: 200px;
    }

    .meet-card-body {
        padding: 18px 16px;
    }

    .meets-footer-quote {
        padding: 20px 16px;
    }

    .btn-lg {
        padding: 14px 22px;
        font-size: 15px;
    }

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

    .trust-strip-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .trust-dot {
        display: none;
    }

    .pricing-price {
        font-size: 46px;
    }

    .pricing-buttons-row {
        flex-direction: column;
        width: 100%;
    }

    .pricing-buttons-row .btn {
        width: 100%;
    }

    .final-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .final-cta-buttons .btn {
        width: 100%;
    }

    .wizard-footer-nav {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .wizard-footer-nav .btn {
        width: 100%;
    }
}

/* Extra Compact Devices (<= 360px) */
@media (max-width: 360px) {
    .brand-ownly {
        font-size: 24px;
    }

    .brand-rapido {
        font-size: 13px;
        padding: 2px 6px;
    }

    .hero-heading {
        font-size: 29px;
    }
}