/* =====================================================================
   MOBILE OPTIMIZATIONS - Dedicated Mobile Stylesheet
   Loaded after all other styles for mobile-specific overrides
   Breakpoint: max-width 768px (tablet and below)
   ===================================================================== */

@media (max-width: 768px) {

    /* ==========================================
       TYPOGRAPHY - Larger, more readable
       ========================================== */

    body {
        font-size: var(--text-md); /* 16px base for mobile */
        -webkit-text-size-adjust: 100%;
    }

    /* Increase line height for better readability */
    p, li, dd {
        line-height: 1.7;
    }


    /* ==========================================
       HERO SECTIONS - Simplified, no heavy images
       ========================================== */

    /* Home Hero - Solid background on mobile */
    .home-hero {
        background-image: none !important;
        background-color: var(--color-header-bg);
        min-height: auto;
        padding: var(--space-12) var(--space-5);
    }

    .home-hero .hero-overlay {
        display: none;
    }

    .home-hero .hero-content {
        align-items: center;
        text-align: center;
    }

    .home-hero .hero-headline {
        font-size: var(--text-3xl);
        line-height: 1.15;
    }

    .home-hero .hero-subheadline {
        font-size: var(--text-base);
        max-width: 100%;
    }

    .home-hero .hero-cta-buttons {
        justify-content: center;
        width: 100%;
    }

    .home-hero .cta-button {
        flex: 1;
        min-width: 140px;
        padding: var(--space-4) var(--space-5);
        font-size: var(--text-base);
    }

    /* Pricing Hero */
    .pricing-hero {
        padding: var(--space-10) var(--space-5);
    }

    .pricing-hero-title {
        font-size: var(--text-2xl);
    }

    .pricing-hero-subtitle {
        font-size: var(--text-base);
    }


    /* ==========================================
       BUTTONS - Larger touch targets (min 44px)
       ========================================== */

    .btn-primary,
    .btn-secondary,
    .cta-button,
    .footer-cta-button {
        min-height: 48px;
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
    }

    /* Full-width buttons on mobile */
    .plan-cta .btn-primary {
        padding: var(--space-4) var(--space-5);
    }


    /* ==========================================
       SPACING - More breathing room
       ========================================== */

    .section {
        padding: var(--space-12) var(--space-5);
    }

    .section-container {
        padding: 0;
    }

    /* Increase gap between major sections */
    .section + .section {
        margin-top: 0;
    }


    /* ==========================================
       CARDS & GRIDS - Stack vertically
       ========================================== */

    /* Plan cards - single column */
    .plan-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        max-width: 400px;
        margin: 0 auto;
    }

    .plan-card {
        padding: var(--space-6);
    }

    .plan-name {
        font-size: var(--text-xl);
    }

    .plan-price {
        font-size: var(--text-2xl);
    }

    /* Usage categories - single column */
    .usage-categories-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .usage-category-card {
        padding: var(--space-5);
    }

    /* Industry cards - single column on small mobile */
    .industry-cards {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .industry-card {
        padding: var(--space-5);
    }

    /* OS Pillars - single column */
    .os-pillars-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }


    /* ==========================================
       SAMPLE BILL - Stack on mobile
       ========================================== */

    .sample-bill-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .sample-bill-heading {
        font-size: var(--text-xl);
        text-align: center;
    }

    .sample-bill-paragraph {
        text-align: center;
    }

    .sample-invoice {
        max-width: 100%;
    }

    .invoice-body {
        padding: var(--space-4);
        font-size: var(--text-xs);
    }


    /* ==========================================
       RESERVED BILLING
       ========================================== */

    .reserved-billing-card {
        padding: var(--space-6);
    }

    .reserved-billing-heading {
        font-size: var(--text-xl);
    }

    .reserved-billing-discount {
        font-size: var(--text-base);
        padding: var(--space-2) var(--space-4);
    }


    /* ==========================================
       FAQs - Larger tap targets
       ========================================== */

    .section-faqs {
        padding: var(--space-12) var(--space-5);
    }

    .faqs-headline {
        font-size: var(--text-xl);
        text-align: center;
    }

    .section-faqs .faq-question {
        font-size: var(--text-base);
        padding: var(--space-5) 0;
        min-height: 48px;
    }

    .section-faqs .faq-answer p {
        font-size: var(--text-sm);
        line-height: 1.7;
    }


    /* ==========================================
       FOOTER - Simplified layout
       ========================================== */

    .footer-container {
        padding: 0 var(--space-5);
    }

    .footer-cta {
        padding: var(--space-10) 0;
    }

    .footer-cta-title {
        font-size: var(--text-xl);
    }

    .footer-cta-description {
        font-size: var(--text-sm);
    }

    .footer-content {
        padding: var(--space-10) 0;
        gap: var(--space-10);
    }

    .footer-links {
        gap: var(--space-6);
    }

    .footer-column-title {
        font-size: var(--text-sm);
        margin-bottom: var(--space-4);
    }

    .footer-link {
        font-size: var(--text-base);
        padding: var(--space-1) 0;
    }

    .footer-bottom {
        padding: var(--space-5) 0;
    }


    /* ==========================================
       HIDE DECORATIVE ELEMENTS
       ========================================== */

    /* Hide decorative images/illustrations on mobile */
    .hero-illustration,
    .decorative-image,
    .background-pattern {
        display: none;
    }


    /* ==========================================
       BILLING TOGGLE - Touch friendly
       ========================================== */

    .billing-toggle {
        width: 100%;
        max-width: 320px;
    }

    .billing-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        min-height: 44px;
    }

    .billing-savings {
        display: block;
        font-size: var(--text-xs);
    }


    /* ==========================================
       BRIDGE NOTE
       ========================================== */

    .bridge-note-section {
        padding: var(--space-6) var(--space-5);
    }

    .bridge-note {
        font-size: var(--text-base);
        line-height: 1.5;
    }



    /* ==========================================
       PRODUCT PAGES - Simplified hero, stacked layouts
       ========================================== */

    /* Product Hero - Clean, no heavy images */
    .product-hero {
        padding: var(--space-10) var(--space-5) var(--space-12);
    }

    .product-hero .hero-grid {
        gap: var(--space-6);
    }

    .product-hero .hero-content {
        order: 1;
    }

    .product-hero .hero-illustration {
        order: 2;
        display: none; /* Hide hero image on mobile */
    }

    .product-hero .hero-headline {
        font-size: var(--text-2xl);
        line-height: 1.2;
        text-align: center;
    }

    .product-hero .hero-subheadline {
        font-size: var(--text-base);
        text-align: center;
        max-width: 100%;
    }

    .product-hero .btn-primary {
        width: 100%;
        justify-content: center;
        padding: var(--space-4) var(--space-5);
        font-size: var(--text-base);
        min-height: 48px;
    }

    /* Feature Sections - Stack vertically */
    .section-features {
        padding: var(--space-10) var(--space-5);
    }

    .feature-row {
        padding: var(--space-8) 0;
        gap: var(--space-6);
    }

    /* Hide feature visuals/animations on mobile */
    .feature-visual {
        display: none;
    }

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

    .feature-title {
        font-size: var(--text-xl);
        margin-bottom: var(--space-3);
    }

    .feature-description {
        font-size: var(--text-base);
        line-height: 1.7;
    }

    /* Show simplified visual indicator instead of animation */
    .feature-row::before {
        content: none;
    }


    /* ==========================================
       WORKERS & APPS PAGES
       ========================================== */

    .workers-hero,
    .apps-hero {
        padding: var(--space-10) var(--space-5);
    }

    .workers-grid,
    .apps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .worker-card,
    .app-card {
        padding: var(--space-5);
    }


    /* ==========================================
       ENTERPRISE PAGE
       ========================================== */

    .enterprise-hero {
        padding: var(--space-10) var(--space-5);
    }

    .enterprise-hero .hero-illustration {
        display: none;
    }
}


/* ==========================================
   EXTRA SMALL SCREENS (< 480px)
   ========================================== */

@media (max-width: 480px) {

    /* Even larger headlines for small screens */
    .home-hero .hero-headline {
        font-size: var(--text-2xl);
    }

    .home-hero .hero-subheadline {
        font-size: var(--text-sm);
    }

    /* Stack CTA buttons vertically */
    .home-hero .hero-cta-buttons {
        flex-direction: column;
        gap: var(--space-3);
    }

    .home-hero .cta-button {
        width: 100%;
    }

    /* Plan cards take full width */
    .plan-grid {
        max-width: 100%;
    }

    /* Smaller section titles */
    .faqs-headline,
    .sample-bill-heading,
    .reserved-billing-heading {
        font-size: var(--text-lg);
    }

    /* Footer columns full width */
    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-link-list {
        align-items: center;
    }

    /* Product pages - extra small */
    .product-hero .hero-headline {
        font-size: var(--text-xl);
    }

    .product-hero .hero-subheadline {
        font-size: var(--text-sm);
    }

    .feature-title {
        font-size: var(--text-lg);
    }

    .feature-description {
        font-size: var(--text-sm);
    }

}