/**
 * Media Queries - Mobile First Design
 * All responsive styles consolidated from main.css
 * Organized in mobile-first order
 *
 * Canonical runtime file (loaded after `main.css`).
 * Contract: breakpoint overrides live here; avoid unnecessary `!important`.
 */

/* ========================================
   ACCESSIBILITY QUERIES
   ======================================== */

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html:focus-within { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Theme switching animation (enabled only during user toggle) */
    html.msn-theme-switching,
    html.msn-theme-switching *,
    html.msn-theme-switching *::before,
    html.msn-theme-switching *::after {
        transition: none !important;
        will-change: auto !important;
    }

    .feature-expanded-content {
        transition: none;
    }
    .features-stat-value {
        transition: none;
    }
    .platform-marquee__viewport { overflow-x: auto; }

    /* Docked (bottom) personalization bar */
    .msn-docked-selector { transition: none; }

    /* Respect reduced motion: ambient layer */
    #pain-solution-ambient::before {
        animation: none;
        opacity: 0.10;
        transform: translate3d(-50%, -50%, 0);
    }

    /* Avoid expensive blur effects for reduced-motion users (background already provides fallback). */
    #main-header,
    #stats-bar,
    #industry-dropdown-btn,
    #industry-dropdown-menu,
    html.msn-mobile-menu-open body::before,
    .msn-exit-intent__backdrop,
    .msn-entry-industry__backdrop,
    .msn-ajax-modal__backdrop {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* LED ring */
    .msn-led-ring::before,
    .msn-led-ring::after { animation: none !important; }

    /* Animations (definitions live in `animations.css`; overrides centralized here) */
    .msn-wobble { animation: none; }
    .msn-swipe-hint .msn-swipe-anim { animation: none; }
    .platform-marquee--active .platform-marquee__inner { animation: none; }
    .msn-unified-arch__anim { display: none; }
    .msn-covnet-dot__bubble { animation: none; }
    .msn-process-wow { display: none; }

    /* Burger menu: remove motion */
    .msn-burger-menu-btn { animation: none; }
    .msn-burger-icon { transition: none; }
    .msn-burger-line { transition: none; }
}

/* ========================================
   INPUT METHOD QUERIES
   ======================================== */

/* Pointer Fine (mouse/trackpad) - Only used nested within max-width queries */

/* ========================================
   MAX-WIDTH QUERIES (Mobile-specific overrides)
   ======================================== */

/* Max Width 520px - Small Mobile */
/* Exit Intent Popup - Small mobile padding */
@media (max-width: 520px) {
    .msn-exit-intent__panel { padding: 1.5rem 1.25rem 1.25rem; }
    .msn-entry-industry__panel { padding: 1.5rem 1.25rem 1.25rem; }
}

/* Max Width 639.98px - Mobile */
/* Mobile: ensure the visible button fill matches the full-width LED ring */
@media (max-width: 639.98px) {
    .msn-led-ring { width: 100%; }
    .msn-led-ring__inner { width: 100%; }
}

/* Mobile-only horizontal card slider + swipe hint */
@media (max-width: 767.98px) {
    .msn-mobile-slider {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        gap: 1rem;
        padding-inline: 1rem;
        margin-inline: -1rem;
        align-items: stretch;
        touch-action: pan-x;
    }
    .msn-mobile-slider::-webkit-scrollbar { display: none; }
    .msn-mobile-slider { scrollbar-width: none; }

    /* Desktop/trackpad: prevent selection + show grab cursor */
    @media (pointer: fine) {
        .msn-mobile-slider {
            cursor: grab;
            -webkit-user-select: none;
            user-select: none;
        }
        .msn-mobile-slider.msn-dragging { cursor: grabbing; }
        .msn-mobile-slider.msn-dragging * {
            -webkit-user-select: none;
            user-select: none;
        }
    }

    .msn-mobile-slide {
        flex: 0 0 80%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Variant: show ~2 cards + peek of the 3rd */
    .msn-mobile-slider[data-mobile-slider-layout="two-up"] .msn-mobile-slide {
        flex-basis: 45%;
    }

    /* Trust points: icon above text on mobile */
    .msn-mobile-slider[data-mobile-slider="trust-points"] .msn-mobile-slide {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .msn-swipe-hint {
        height: 44px; /* reserved space to prevent layout shift */
        margin-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted-foreground);
        opacity: 0;
        transition: opacity 420ms ease;
        pointer-events: none;
    }
    .msn-swipe-hint svg { width: 180px; height: 44px; }
    .msn-swipe-hint .msn-swipe-anim {
        transform-origin: 50% 50%;
    }

    /* Trust slider: bring hint up, push next content down (override base) */
    .msn-swipe-hint.trust-swipe-hint {
        margin-top: -1rem;
        margin-bottom: 2.25rem;
    }

    .msn-mobile-slider-hydrated .msn-swipe-hint { opacity: 1; }
}

/* ========================================
   SPACING ADJUSTMENTS FOR 768px AND BELOW
   ======================================== */

/* Tablet/Mobile: reduce section padding (py-24) site-wide at 768px and below */
@media (max-width: 767.98px) {
    .py-24 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Tablet/Mobile: reduce spacing between pain-points and solution sections */
@media (max-width: 767.98px) {
    section.msn-mobile-slider-scope.py-24 {
        padding-bottom: 3rem;
    }
    #solution.py-24 {
        padding-top: 3rem;
    }
}

/* Tablet/Mobile: reduce spacing between network-explainer and demo sections */
@media (max-width: 767.98px) {
    #network-explainer.py-24 {
        padding-bottom: 3rem;
    }
    #demo.py-24 {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }
}

/* Tablet/Mobile: reduce spacing between demo and how-it-works sections */
@media (max-width: 767.98px) {
    #how-it-works.py-24 {
        padding-top: 3rem;
    }
}

/* Tablet/Mobile: reduce spacing between location-visualizer and coverage-network sections */
@media (max-width: 767.98px) {
    #location-visualizer.py-24 {
        padding-bottom: 3rem;
    }
    #coverage-network.py-24 {
        padding-top: 3rem;
    }
}

/* Tablet/Mobile: reduce spacing for features, unified-system, long-term-value, and pricing sections */
@media (max-width: 767.98px) {
    #features.py-24 {
        padding-bottom: 3rem;
    }
    #unified-system.py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    #long-term-value.py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    #pricing.py-24 {
        padding-top: 3rem;
    }
    /* Reduce large margin above "How We Compare" table at 768px and below */
    #pricing > div > div.mt-20 {
        margin-top: 3rem;
    }
}

/* Tablet/Mobile: reduce spacing for case-studies and trust-section */
@media (max-width: 767.98px) {
    #case-studies.py-24 {
        padding-bottom: 3rem;
    }
    section.py-24.msn-mobile-slider-scope:has([data-mobile-slider="trust-points"]) {
        padding-top: 3rem;
    }
}

/* Mobile: reduce overly-tall section padding (py-24) site-wide */
@media (max-width: 639.98px) {
    .py-24 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* Mobile: further tighten top padding specifically for The Solution */
    #solution.py-24 {
        padding-top: 3rem;
    }

    /* Mobile: tighten top padding specifically for Live Demo */
    #demo.py-24 {
        padding-top: 2rem;
    }

    /* Mobile: tighten bottom padding above Live Demo */
    #network-explainer.py-24 {
        padding-bottom: 2.5rem;
    }

    /* Mobile: keep section spacing consistent (How It Works) */
    #demo.py-24 {
        padding-bottom: 2.5rem;
    }
    #how-it-works.py-24 {
        padding-top: 3rem;
    }

    /* Mobile: tighten space above Local Domination / Long-Term Value / ROI Calculator */
    #location-visualizer.py-24 {
        padding-bottom: 2.5rem;
    }
    #coverage-network.py-24 { padding-top: 3rem; }
    #long-term-value.py-24 { padding-top: 3rem; }
    #pricing.py-24 { padding-top: 3rem; }

    /* Mobile: tighten Long-Term Value section spacing */
    #unified-system.py-24 { padding-bottom: 2.5rem; }
    #long-term-value.py-24 { padding-bottom: 2.5rem; padding-top: 2.5rem; }
    #long-term-value .ltv-header { margin-bottom: 2.5rem; }
    #long-term-value .ltv-tabs { margin-bottom: 1.5rem; }

    /* Mobile: keep Solution key metrics on a single line */
    .msn-solution-metrics {
        flex-wrap: nowrap;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .msn-solution-metric {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 0;
    }
    .msn-solution-metric__value {
        font-size: 1.75rem; /* smaller than text-4xl */
        line-height: 1.1;
    }
    .msn-solution-metric__label {
        font-size: 0.75rem; /* smaller than text-sm */
        line-height: 1.1;
    }

    /* Live Demo: keep suburb selector responsive (never expands page width) */
    /* Ensure long suburb names can't create layout overflow */
    #demo-suburb-selector .demo-suburb-btn { max-width: 70vw; }

    /* Mobile: feature cards are always expanded (avoids click conflict with slider UX) */
    #features .feature-chevron { display: none; }
    #features .feature-expanded-content {
        max-height: none !important;
        opacity: 1 !important;
    }

    /* ROI: allow long currency ranges to wrap on mobile */
    .msn-roi-range {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .msn-roi-results-grid {
        grid-template-columns: 1fr;
    }

    /* Case studies: prevent revenue stat overflow on mobile */
    .msn-revenue-stat {
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.05;
        font-size: 2.25rem; /* slightly smaller than text-3xl */
    }
}

/* Max Width 768px - Mobile/Tablet */
/* Testimonials Carousel - Mobile sizing */
@media (max-width: 768px) {
    .testimonial-card {
        width: 280px; /* smaller cards on mobile */
    }
    #testimonial-viewport {
        width: 100%;
        max-width: calc(3 * 280px + 48px); /* 888px */
    }
}

/* Max Width 1023.98px - Mobile/Tablet */
/* Mobile header separation + open-menu backdrop */
@media (max-width: 1023.98px) {
    #main-header {
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    }
    html.msn-mobile-menu-open #main-header {
        box-shadow: none;
        position: fixed;
        z-index: 50;
    }
    html.msn-mobile-menu-open body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 40; /* below header (50) / above page */
    }
}

/* Desktop (1024px+): force-hide burger + mobile panel.
   Note: `main.css` sets `.msn-burger-menu-btn { display: flex; }` and is loaded after Tailwind,
   so we must explicitly override that here (this file loads last). */
@media (min-width: 1024px) {
    #mobile-menu-btn { display: none; }
    #mobile-menu { display: none; }
}

/* Max Width 1023.98px - Mobile/Tablet */
/* Show burger menu, keep industry selector/buttons visible (until 650px) */
@media (max-width: 1023.98px) {
    /* Hide desktop navigation menu items - target only the nav in the main header row */
    /* This overrides lg:flex which shows nav at 1024px+ */
    /* Be specific to avoid hiding mobile menu nav */
    #main-header > div > div > div.flex.items-center.justify-between > nav {
        display: none;
    }
    /* Show mobile menu button - override lg:hidden which hides it at 1024px+ */
    #mobile-menu-btn {
        display: block;
    }
    /* Group right side elements together - industry, buttons, and burger */
    /* Change parent flex container from justify-between to allow tight grouping on right */
    /* When nav is hidden, we want: logo (left) | [right side group] (right) */
    #main-header > div > div > div.flex.items-center.justify-between {
        justify-content: flex-start;
    }
    /* Push logo to left */
    #main-header > div > div > div.flex.items-center.justify-between > a:first-child {
        margin-right: auto;
    }
    /* Ensure right side container (industry + buttons) is visible and grouped with burger */
    /* Keep visible until 650px - override hidden lg:flex */
    #main-header > div > div > div.flex.items-center.justify-between > div:has(#industry-dropdown),
    #main-header > div > div > div.flex.items-center.justify-between > div.hidden.lg\:flex {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        margin-right: 0.75rem;
    }
    /* Ensure burger button is right next to the right side container */
    #main-header > div > div > div.flex.items-center.justify-between > #mobile-menu-btn {
        margin-left: 0;
    }
    /* Mobile menu slide animation */
    #mobile-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease 0.05s;
    }
    
    #mobile-menu.hidden {
        max-height: 0;
        opacity: 0;
    }
    
    #mobile-menu:not(.hidden) {
        max-height: 1000px;
        opacity: 1;
    }
    /* Ensure mobile menu and all its content is visible when open */
    #mobile-menu:not(.hidden) nav {
        display: flex;
        flex-direction: column;
    }
    #mobile-menu:not(.hidden) .mobile-nav-link,
    #mobile-menu:not(.hidden) a.mobile-nav-link {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    /* Ensure all mobile menu sections are visible */
    #mobile-menu:not(.hidden) > div,
    #mobile-menu:not(.hidden) > div > nav > * {
        display: block;
        visibility: visible;
    }
    /* Show industry dropdown text - override hidden xl:inline */
    /* This shows the full industry name at 750px-1279px */
    #industry-dropdown-text {
        display: inline;
    }
}

/* Max Width 750px - Switch industry selector to icon-only */
@media (max-width: 750px) {
    /* Hide industry dropdown text, show icon only */
    #industry-dropdown-text {
        display: none;
    }
}

/* Min Width 650px - Show buttons container (between 650px and 1024px) */
@media (min-width: 650px) and (max-width: 1023.98px) {
    /* Show the right side buttons container - override hidden lg:flex */
    #main-header > div > div > div.flex.items-center.justify-between > div:has(#industry-dropdown),
    #main-header > div > div > div.flex.items-center.justify-between > div.hidden.lg\:flex {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        margin-right: 0.75rem;
    }
}

/* Max Width 650px - Hide buttons, show mobile menu only */
@media (max-width: 650px) {
    /* Hide the right side buttons container (industry + Watch Demo + Get Started) */
    #main-header > div > div > div.flex.items-center.justify-between > div:has(#industry-dropdown),
    #main-header > div > div > div.flex.items-center.justify-between > div.hidden.lg\:flex {
        display: none !important;
    }
}

/* Hero: prevent search query from wrapping - prevent layout shift */
@media (max-width: 1279.98px) {
    /* Prevent the search query span from wrapping */
    #hero-search-query {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
        min-width: 0;
    }
    /* Prevent parent container div from wrapping - use :has() for modern browsers */
    div:has(> #hero-search-query) {
        white-space: nowrap !important;
        min-width: 0;
    }
    /* Ensure the google.com/search?q= span doesn't wrap */
    div:has(> #hero-search-query) > span:first-of-type {
        white-space: nowrap !important;
        flex-shrink: 0;
    }
    /* Ensure flex-1 container allows truncation */
    .flex-1.mx-4 {
        min-width: 0;
    }
    /* Fallback: target container by class pattern */
    .bg-background.rounded-md.px-3.py-1\.5 {
        white-space: nowrap !important;
        min-width: 0;
    }
    /* Ensure first span in container doesn't wrap */
    .bg-background.rounded-md.px-3.py-1\.5 > span:first-of-type {
        white-space: nowrap !important;
        flex-shrink: 0;
    }
}

/* Hero: hide google.com/search?q= and prevent overflow at 428px and below */
@media (max-width: 428px) {
    /* Hide horizontal scrollbars for mobile overflow widgets */
    #floating-industry-selector .flex.flex-wrap,
    div:has(.quick-industry-btn),
    #case-tabs { scrollbar-width: none; }

    #floating-industry-selector .flex.flex-wrap::-webkit-scrollbar,
    div:has(.quick-industry-btn)::-webkit-scrollbar,
    #case-tabs::-webkit-scrollbar { display: none; }

    /* Constrain hero section container */
    section.relative.min-h-screen .max-w-7xl {
        max-width: 100%;
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        box-sizing: border-box;
    }
    
    /* Constrain grid container */
    section.relative.min-h-screen .grid {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    /* Constrain left content container */
    section.relative.min-h-screen .grid > div:first-child {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        min-width: 0;
    }
    
    /* Fix h1 - prevent long suburbs from expanding */
    section.relative.min-h-screen h1 {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    
    /* Force suburb span to be on a new line and prevent expansion */
    section.relative.min-h-screen h1 span.inline-block.whitespace-nowrap {
        display: block !important;
        white-space: normal !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
        margin-top: 0.25rem;
    }
    
    /* Override inline style min-width that's set dynamically */
    section.relative.min-h-screen h1 span[style*="min-width"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure suburb text can wrap but stays on its line */
    section.relative.min-h-screen #hero-typed-suburb {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: inline;
        max-width: 100%;
    }
    
    /* Ensure h1 parent container is constrained */
    section.relative.min-h-screen .space-y-8,
    section.relative.min-h-screen .space-y-6 {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Fix social proof section - avatars, stars, and text */
    section.relative.min-h-screen .flex.items-center.gap-4 {
        flex-wrap: wrap;
        gap: 0.75rem !important;
        max-width: 100%;
        overflow: hidden;
        align-items: flex-start;
    }
    
    /* Stack avatars and text vertically if needed */
    @media (max-width: 375px) {
        section.relative.min-h-screen .flex.items-center.gap-4 {
            flex-direction: column;
            align-items: flex-start;
        }
        
        section.relative.min-h-screen .flex.items-center.gap-4 > div.text-sm {
            width: 100%;
        }
    }
    
    /* Prevent avatars from overflowing - limit visible avatars */
    section.relative.min-h-screen .flex.-space-x-3 {
        max-width: 100%;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    /* Limit number of visible avatars to prevent overflow */
    section.relative.min-h-screen .flex.-space-x-3 > div:nth-child(n+6) {
        display: none;
    }
    
    /* Ensure text section doesn't expand */
    section.relative.min-h-screen .flex.items-center.gap-4 > div.text-sm {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Make stars and text stack vertically on very small screens */
    section.relative.min-h-screen .flex.items-center.gap-4 > div.text-sm > div.flex.items-center {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Ensure "Powering X+ Active Sites" text wraps */
    section.relative.min-h-screen .flex.items-center.gap-4 > div.text-sm p {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Make "dominating their local markets" wrap properly */
    section.relative.min-h-screen .flex.items-center.gap-4 > div.text-sm > p.text-muted-foreground {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        line-height: 1.4;
    }
    
    /* Reduce gap between avatars and text section */
    section.relative.min-h-screen .flex.items-center.gap-4 {
        gap: 0.75rem !important;
    }
    
    /* Reduce avatar size slightly if needed */
    section.relative.min-h-screen .flex.-space-x-3 img {
        width: 2rem;
        height: 2rem;
    }
    
    /* Reduce star size */
    section.relative.min-h-screen .flex.items-center.gap-0\.5 svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    /* Fix floating industry selector - make scrollable, 1 item per slide */
    #floating-industry-selector {
        position: relative;
    }
    
    /* Make the container relative for absolute positioning of nav arrows */
    #floating-industry-selector > div.container {
        position: relative;
        padding-left: 2.75rem;
        padding-right: 2.75rem;
    }
    
    /* Make the flex row container scrollable */
    #floating-industry-selector > div.container > div.flex.flex-col {
        position: relative;
    }
    
    /* Make the buttons container scrollable instead of flex-wrap */
    #floating-industry-selector .flex.flex-wrap {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.5rem;
        gap: 0.5rem;
        padding: 0.5rem 0;
        max-width: 100%;
        width: 100%;
    }
    
    /* Make each button take ~85% width (1 per slide with peek) */
    #floating-industry-selector .floating-industry-btn {
        flex: 0 0 85%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 85%;
        max-width: 85%;
    }
    
    /* Hide text label on small screens */
    #floating-industry-selector .flex.flex-col > div:first-child {
        display: none;
    }
    
    /* Stack vertically on small screens */
    #floating-industry-selector > div.container > div.flex.flex-col {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Fix quick industry buttons - make scrollable */
    div:has(.quick-industry-btn) {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.5rem;
        gap: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-width: 100%;
    }
    
    /* Quick industry buttons - 1 per slide */
    .quick-industry-btn {
        flex: 0 0 85%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 85%;
        max-width: 85%;
    }
    
    /* Hide "Popular:" label on small screens */
    div:has(.quick-industry-btn) > span.text-sm.text-muted-foreground {
        display: none;
    }
    
    /* If nav arrows exist (added by JS), position them outside scroll area */
    #floating-industry-selector button[data-dir="prev"],
    #floating-industry-selector button[data-dir="next"],
    div:has(.quick-industry-btn) button[data-dir="prev"],
    div:has(.quick-industry-btn) button[data-dir="next"] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        background: var(--background);
        border: 1px solid var(--border);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }
    
    #floating-industry-selector button[data-dir="prev"],
    div:has(.quick-industry-btn) button[data-dir="prev"] {
        left: 0.5rem;
    }
    
    #floating-industry-selector button[data-dir="next"],
    div:has(.quick-industry-btn) button[data-dir="next"] {
        right: 0.5rem;
    }
    
    /* Live demo suburb selector: navigation arrows (≤428px) */
    div.space-y-6.min-w-0:has(#demo-suburb-selector) {
        padding-left: 2.75rem;
        padding-right: 2.75rem;
    }
    
    #demo-suburb-selector {
        max-width: 100%;
        width: 100%;
        position: relative;
        scroll-padding-left: 2.75rem;
        scroll-padding-right: 2.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    #demo-suburb-selector .demo-suburb-nav {
        position: sticky;
        flex-shrink: 0;
        z-index: 30;
        background: var(--background);
        border: 1px solid var(--border);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }
    
    #demo-suburb-selector .demo-suburb-nav[data-dir="prev"] {
        left: 0;
        margin-right: 0.5rem;
    }
    
    #demo-suburb-selector .demo-suburb-nav[data-dir="next"] {
        right: 0;
        margin-left: 0.5rem;
    }
    
    /* Adjust slider padding at small screens */
    .msn-mobile-slider {
        scroll-padding-inline: 0.75rem;
        padding-inline: 0.75rem;
    }
    
    /* Hero SERP mock browser: overflow constraints (≤428px) */
    /* Constrain right content container */
    section.relative.min-h-screen .relative.lg\:pl-8 {
        max-width: 100%;
        width: 100%;
        padding-left: 0 !important;
        box-sizing: border-box;
    }
    
    /* Hide the google.com/search?q= prefix - it's implied this is a search bar */
    .bg-background.rounded-md.px-3.py-1\.5 > span:first-of-type,
    div:has(> #hero-search-query) > span:first-of-type {
        display: none !important;
    }
    
    /* Ensure the entire browser window container doesn't expand */
    .bg-card.rounded-xl.border {
        max-width: 100%;
        width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }
    
    /* Ensure search bar container doesn't overflow */
    .bg-background.rounded-md.px-3.py-1\.5 {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        min-width: 0;
        flex: 1 1 auto;
    }
    
    /* Ensure the flex-1 container doesn't expand beyond viewport */
    .flex-1.mx-4 {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        flex: 1 1 auto;
    }
    
    /* Ensure search query text truncates properly - prevent expansion during typing */
    #hero-search-query {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        flex: 1 1 auto;
        min-width: 0;
        display: block;
    }
    
    /* Prevent browser chrome container from expanding */
    .bg-secondary.px-4 {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* Reduce padding on browser chrome at small screens */
    .bg-secondary.px-4.py-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Reduce gap between browser dots and search bar */
    .bg-secondary.px-4.py-3.flex.items-center.gap-2 {
        gap: 0.5rem;
    }
    
    /* Reduce margin on flex-1 container */
    .flex-1.mx-4 {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    /* Reduce padding inside search bar */
    .bg-background.rounded-md.px-3.py-1\.5 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Ensure gap in search bar is smaller */
    .bg-background.rounded-md.px-3.py-1\.5.flex.items-center.gap-2 {
        gap: 0.25rem;
    }
    
    /* Prevent SERP results container from expanding - ensure equal padding */
    .bg-background.min-h-\[420px\] {
        max-width: 100%;
        width: 100%;
        overflow: visible;
        box-sizing: border-box;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important; /* Equal padding on both sides */
    }
    
    /* Ensure SERP result items don't expand - use relative positioning for badges */
    .bg-background.min-h-\[420px\] > div {
        max-width: 100%;
        width: 100%;
        overflow: visible;
        box-sizing: border-box;
        position: relative;
    }
    
    /* Position badges inside container instead of outside to prevent cutoff */
    .bg-background.min-h-\[420px\] > div.relative > .absolute.-top-2.-right-2,
    .bg-background.min-h-\[420px\] > div.relative > .absolute.-top-1.-right-2 {
        right: 0.5rem !important;
        top: 0.5rem !important;
        left: auto !important;
        z-index: 10;
    }
    
    /* Ensure relative containers for badges have proper overflow */
    .bg-background.min-h-\[420px\] > div.relative {
        overflow: visible;
        padding-right: 2.75rem !important; /* Make room for badge */
        box-sizing: border-box;
    }
    
    /* Ensure SERP result content containers don't expand - but allow badges to show */
    .bg-background.min-h-\[420px\] > div > div:not(.absolute) {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* Ensure flex containers inside SERP results are constrained */
    .bg-background.min-h-\[420px\] > div > div.flex {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* SERP: shared truncation baseline */
    #hero-result-title,
    .hero-competitor-title,
    #hero-result-url,
    .hero-competitor-url {
        display: block;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box;
    }

    /* SERP: force titles to single line + full-width truncation */
    #hero-result-title,
    .hero-competitor-title {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Ensure parent containers of SERP titles are constrained */
    .bg-background.min-h-\[420px\] .min-w-0 {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* Ensure flex containers don't allow expansion */
    .bg-background.min-h-\[420px\] > div > div.flex.items-start {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    
    /* Ensure min-w-0 containers work properly */
    .min-w-0 {
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* Ensure flex containers in SERP results don't expand */
    .bg-background.min-h-\[420px\] .flex.items-start {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* Ensure all text elements in SERP are constrained */
    .bg-background.min-h-\[420px\] p,
    .bg-background.min-h-\[420px\] span {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Prevent horizontal scrolling on body */
    body {
        overflow-x: hidden !important;
        max-width: 100vw;
        width: 100%;
    }
    
    html {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    /* Ensure the entire hero section doesn't expand */
    section.relative.min-h-screen {
        max-width: 100vw;
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure all direct children of hero grid are constrained */
    section.relative.min-h-screen .grid > * {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    
    /* Reduce padding in SERP results at small screens - ensure equal padding */
    .bg-background.min-h-\[420px\] > div.p-4 {
        padding: 0.75rem !important;
        box-sizing: border-box;
    }
    
    .bg-background.min-h-\[420px\] > div.p-3 {
        padding: 0.5rem !important;
        box-sizing: border-box;
    }
    
    /* Reduce gap in flex containers */
    .bg-background.min-h-\[420px\] .flex.items-start.gap-3 {
        gap: 0.75rem;
    }
    
    /* SERP: URL truncation */
    #hero-result-url,
    .hero-competitor-url {
        max-width: 100%;
    }
    
    /* Ensure description doesn't expand beyond container */
    #hero-result-desc,
    .hero-competitor-desc {
        max-width: 100%;
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    
    /* Ensure the entire SERP section container is constrained */
    .bg-card.rounded-xl.border .bg-background {
        max-width: 100%;
        width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }
    
    /* Ensure SERP items have consistent padding - reduce to match left padding visually */
    .bg-background.min-h-\[420px\] > div.p-4 {
        padding: 0.75rem !important;
        padding-right: 0.75rem !important; /* Equal padding, badges extend outside */
        box-sizing: border-box;
    }
    
    .bg-background.min-h-\[420px\] > div.p-3 {
        padding: 0.5rem !important;
        padding-right: 0.5rem !important; /* Equal padding, badges extend outside */
        box-sizing: border-box;
    }
}

/* Stats bar: ensure stats always stay right-aligned */
#stats-bar > div > div.flex.items-center.justify-between {
    justify-content: space-between !important;
}
#stats-bar > div > div.flex.items-center.justify-between > div:last-child {
    margin-left: auto;
}

/* Case studies: prevent revenue stat from breaking outside container */
@media (max-width: 1279.98px) {
    .msn-revenue-stat {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow-wrap: normal;
        display: block;
        max-width: 100%;
    }
    /* Ensure parent card container handles overflow - target by containing revenue stat */
    div:has(.msn-revenue-stat) {
        overflow: hidden;
        min-width: 0;
    }
}

/* Max Width 1200px - Custom Breakpoint */
/* Testimonials Carousel - Responsive width */
@media (max-width: 1200px) {
    .testimonial-card {
        width: calc((100vw - 80px) / 3); /* viewport - padding - gaps, divided by 3 */
    }
}

/* ========================================
   MIN-WIDTH QUERIES (Mobile-first progression)
   ======================================== */

/* Min Width 640px - Small Tablet */
@media (min-width: 640px) {
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:text-left { text-align: left; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:gap-10 { gap: 2.5rem; }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .platform-marquee { --pm-gap: 1rem; --pm-speed: 30s; }
}

/* Min Width 768px - Tablet */
/* Desktop: ensure slider doesn't interfere with grid layout and hide swipe hint */
@media (min-width: 768px) {
    .msn-swipe-hint {
        display: none; /* Hide swipe hint on desktop */
        height: 0;
        margin: 0;
        opacity: 0;
    }
    /* Ensure mobile slider styles don't interfere with grid on desktop */
    .msn-mobile-slider {
        overflow: visible;
        scroll-snap-type: none;
        scroll-padding-inline: 0;
        padding-inline: 0;
        margin-inline: 0;
        touch-action: auto;
    }
    .msn-mobile-slide {
        flex: none;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
    .md\:grid { display: grid; }
    .md\:flex { display: flex; }
    .md\:flex-col { flex-direction: column; }
    .md\:gap-4 { gap: 1rem; }
    .md\:gap-6 { gap: 1.5rem; }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:w-96 { width: 24rem; }
}

/* Min Width 1024px - Desktop */
@media (min-width: 1024px) {
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:text-left { text-align: left; }
    .lg\:text-right { text-align: right; }
    .lg\:space-y-24 > :not([hidden]) ~ :not([hidden]) { margin-top: 6rem; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:gap-12 { gap: 3rem; }
    .lg\:gap-16 { gap: 4rem; }
    .lg\:text-5xl { font-size: 3rem; line-height: 1; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:p-6 { padding: 1.5rem; }
    .lg\:p-8 { padding: 2rem; }
    .lg\:pl-16 { padding-left: 4rem; }
    .lg\:pr-16 { padding-right: 4rem; }
    .lg\:order-2 { order: 2; }
    /* ROI Calculator: slightly narrower left column on desktop */
    .roi-layout {
        grid-template-columns: 0.85fr 1.15fr;
    }
    .roi-layout > * {
        min-width: 0;
    }
    .platform-marquee { --pm-gap: 1.5rem; --pm-speed: 34s; }
    
    /* Desktop: reduce spacing between pain-points and solution sections */
    section.msn-mobile-slider-scope.py-24 {
        padding-bottom: 4rem; /* reduced from 6rem to 4rem */
    }
    #solution.py-24 {
        padding-top: 4rem; /* reduced from 6rem to 4rem */
    }
    
    /* Desktop: ensure proper spacing between Live Demo and How It Works sections */
    #demo.py-24 {
        padding-bottom: 4rem !important; /* override main.css !important rule */
    }
    #how-it-works.py-24 {
        padding-top: 4rem !important; /* override main.css !important rule */
    }
    
    /* Desktop: fix spacing between Location Targeting and Local Domination */
    #location-visualizer.py-24 {
        padding-bottom: 4rem !important; /* override main.css !important rule */
    }
    #coverage-network.py-24 {
        padding-top: 4rem !important; /* override main.css !important rule */
    }
    
    /* Desktop: fix spacing between Long-Term Value and ROI Calculator */
    #long-term-value.py-24 {
        padding-bottom: 4rem !important; /* override main.css !important rule */
    }
    #pricing.py-24 {
        padding-top: 4rem !important; /* override main.css !important rule */
    }
    
    /* Desktop: add more space above "How We Compare" table */
    #pricing > div > div.mt-20 {
        margin-top: 6rem; /* increased from 5rem (mt-20) to 6rem on desktop */
    }
}

/* Min Width 1280px - Large Desktop */
@media (min-width: 1280px) {
    .xl\:inline { display: inline; }
}

/* ========================================
   MAX-WIDTH 428px (Small mobile) fixes
   ======================================== */

/* Case studies: keep tabs scrollable; arrows stay on-screen */
@media (max-width: 428px) {
    #case-studies .flex.items-center.justify-center.gap-4.mb-12 {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    #case-prev,
    #case-next {
        flex: 0 0 auto;
        width: 2.25rem;
        height: 2.25rem;
    }

    #case-tabs {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.5rem;
        padding-inline: 0.25rem;
    }

    #case-tabs .case-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
}

/* All mobile sliders: show 1 slide at a time */
@media (max-width: 428px) {
    .msn-mobile-slider .msn-mobile-slide {
        flex: 0 0 calc(100% - 2rem); /* account for slider padding-inline */
    }

    .msn-mobile-slider[data-mobile-slider-layout="two-up"] .msn-mobile-slide {
        flex-basis: calc(100% - 2rem);
    }
}