/* ===================================================================
   COMPLETE DEVICE COVERAGE - All Mobile & Tablet Devices
   Tested for: iPhone SE to 15 Pro Max, All iPads, Samsung Galaxy,
   Pixel phones, Foldables, and all common tablets
   =================================================================== */

/* ===================================================================
   SMALL PHONES (iPhone SE, older Android phones)
   =================================================================== */
@media (max-width: 375px) {
    .hero-content {
        padding: 5px 16px 20px 16px !important; /* Only 5px top padding */
    }
    
    .hero-headline {
        font-size: 36px !important;
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
    }
    
    .hero-subheadline {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 24px !important;
    }
    
    .hero-app-badges {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    
    .app-badge img {
        height: 44px !important;
        max-width: 160px !important;
    }
    
    .hero-brand-logos {
        gap: 8px 12px !important;
        margin-bottom: 16px !important;
    }
    
    .hero-brand-logo {
        height: 14px !important;
    }
    
    .credibility-row {
        font-size: 0.7rem !important;
        gap: 4px 8px !important;
    }
    
    /* How it works section */
    .how-step {
        padding: 24px 16px !important;
    }
    
    .premium-mockup {
        /* Make phone mockups big enough that the in-screen camera UI fits */
        max-width: min(520px, 92vw) !important;
    }
    
    .step-title {
        font-size: 1.125rem !important;
    }
    
    .step-desc {
        font-size: 0.8rem !important;
    

    /* Hero CTA stack: consistent widths + safe-area breathing room */
    .hero-content {
        padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
    }

    .hero-beta-cta {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        transform: translateY(-4px) !important;
    }

    .hero-beta-cta .beta-primary-btn,
    .hero-beta-cta .beta-secondary-btn {
        width: min(340px, 92vw) !important;
        justify-content: center !important;
    }
}

/* ===================================================================
   STANDARD PHONES (iPhone 12-15, Samsung Galaxy S series, Pixels)
   =================================================================== */
@media (min-width: 376px) and (max-width: 430px) {
    .hero-content {
        padding: 10vh 24px 60px !important;
    }
    
    .hero-headline {
        font-size: clamp(38px, 10vw, 48px) !important;
        margin-bottom: 18px !important;
    }
    
    .hero-subheadline {
        font-size: 15px !important;
        margin-bottom: 28px !important;
        max-width: 90%;
    }
    
    .hero-app-badges {
        gap: 12px !important;
        margin-bottom: 24px !important;
    }
    
    .app-badge img {
        height: 46px !important;
    }
    
    /* Fix brand logos wrapping */
    .hero-brand-logos {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 10px 16px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-brand-logo {
        height: 16px !important;
    }
    
    /* Hide dividers on mobile for clean wrapping */
    .brand-divider {
        display: none !important;
    }
    
    .credibility-row {
        font-size: 0.75rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 12px !important;
    }

    /* Curated Discovery: bigger mockups + tighter padding on mobile */
    .how-works { padding: 84px 0 92px !important; }

    .how-step {
        max-width: min(560px, 94vw) !important;
        padding: 44px 16px 48px !important;
    }

    .premium-mockup,
    .phone-screen-wrapper {
        max-width: min(560px, 94vw) !important;
    }

    /* Hero CTA stack: consistent widths + safe-area breathing room */
    .hero-content {
        padding-bottom: calc(44px + env(safe-area-inset-bottom)) !important;
    }

    .hero-beta-cta {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        transform: translateY(-6px) !important;
    }

    .hero-beta-cta .beta-primary-btn,
    .hero-beta-cta .beta-secondary-btn {
        width: min(360px, 88vw) !important;
        justify-content: center !important;
    }
}

/* ===================================================================
   LARGE PHONES & PHABLETS (Pro Max models, Plus models)
   =================================================================== */
@media (min-width: 431px) and (max-width: 480px) {
    .hero-content {
        padding: 12vh 30px 80px !important;
    }
    
    .hero-headline {
        font-size: clamp(42px, 11vw, 52px) !important;
    }
    
    .hero-subheadline {
        font-size: 16px !important;
        margin-bottom: 32px !important;
    }
    
    .hero-brand-logos {
        gap: 12px 18px !important;
    }
    
    .hero-brand-logo {
        height: 18px !important;
    

    /* Curated Discovery: bigger mockups + tighter padding on large phones */
    .how-works { padding: 92px 0 104px !important; }

    .how-step {
        padding: 52px 18px 54px !important;
    }

    .how-works .premium-mockup,
    .how-works .phone-screen-wrapper {
        max-width: min(580px, 92vw) !important;
    }

    /* Hero CTA stack: consistent widths + safe-area breathing room */
    .hero-content {
        padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
    }

    .hero-beta-cta {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        transform: translateY(-6px) !important;
    }

    .hero-beta-cta .beta-primary-btn,
    .hero-beta-cta .beta-secondary-btn {
        width: min(380px, 86vw) !important;
        justify-content: center !important;
    }
}

/* ===================================================================
   LANDSCAPE PHONES (All phones in landscape)
   =================================================================== */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 430px) {
    .hero {
        min-height: 100vh !important;
    }
    
    .hero-content {
        padding: 4vh 40px !important;
    }
    
    .hero-headline {
        font-size: 32px !important;
        margin-bottom: 12px !important;
    }
    
    .hero-subheadline {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        max-width: 70%;
    }
    
    .hero-app-badges {
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    
    .app-badge img {
        height: 36px !important;
    }
    
    /* Hide non-essential elements in landscape */
    .hero-brand-logos,
    .app-badges-subtext,
    .scroll-cta {
        display: none !important;
    }
    
    .credibility-row {
        font-size: 0.7rem !important;
        margin-bottom: 0 !important;
    }
}

/* ===================================================================
   FOLDABLE PHONES (Galaxy Z Fold, Z Flip, Surface Duo)
   =================================================================== */
/* Folded state */
@media (min-width: 280px) and (max-width: 360px) and (min-height: 600px) {
    .hero-content {
        padding: 8vh 16px !important;
    }
    
    .hero-headline {
        font-size: 34px !important;
    }
    
    .hero-brand-logos {
        gap: 8px 12px !important;
    }
    
    .hero-brand-logo {
        height: 14px !important;
    }
}

/* Unfolded state (tablet-like) */
@media (min-width: 768px) and (max-width: 884px) and (min-height: 1000px) {
    .hero-content {
        padding: 10vh 50px !important;
    }
    
    .hero-main {
        max-width: 700px !important;
    }
    
    .hero-headline {
        font-size: 56px !important;
    }
    
    .hero-subheadline {
        font-size: 20px !important;
    }
}

/* ===================================================================
   iPAD MINI (Portrait & Landscape)
   =================================================================== */
@media (width: 768px) and (height: 1024px), 
       (width: 1024px) and (height: 768px),
       (width: 744px) and (height: 1133px),
       (width: 1133px) and (height: 744px) {
    .hero-content {
        padding: 8vh 40px !important;
    }
    
    .hero-headline {
        font-size: clamp(48px, 7vw, 64px) !important;
    }
    
    .hero-subheadline {
        font-size: 19px !important;
        margin-bottom: 36px !important;
    }
    
    .hero-brand-logos {
        gap: 16px 24px !important;
    }
    
    .hero-brand-logo {
        height: 22px !important;
    }
}

/* ===================================================================
   iPAD AIR & STANDARD iPAD (Portrait & Landscape)
   =================================================================== */
@media (width: 820px) and (height: 1180px),
       (width: 1180px) and (height: 820px),
       (width: 810px) and (height: 1080px),
       (width: 1080px) and (height: 810px) {
    .hero-content {
        padding: 10vh 50px !important;
    }
    
    .hero-headline {
        font-size: 60px !important;
    }
    
    .hero-subheadline {
        font-size: 20px !important;
    }
    
    .app-badge img {
        height: 50px !important;
    }
}

/* ===================================================================
   iPAD PRO 11" & 12.9" (Portrait & Landscape)
   =================================================================== */
@media (width: 834px) and (height: 1194px),
       (width: 1194px) and (height: 834px),
       (width: 1024px) and (height: 1366px),
       (width: 1366px) and (height: 1024px) {
    .hero-content {
        padding: 12vh 60px !important;
    }
    
    .hero-main {
        max-width: 800px !important;
    }
    
    .hero-headline {
        font-size: clamp(56px, 6vw, 72px) !important;
    }
    
    .hero-subheadline {
        font-size: 22px !important;
        margin-bottom: 40px !important;
    }
    
    .hero-brand-logos {
        gap: 20px 30px !important;
    }
    
    .hero-brand-logo {
        height: 26px !important;
    }
}

/* ===================================================================
   ANDROID TABLETS (Samsung Galaxy Tab, Pixel Tablet, etc.)
   =================================================================== */
/* Galaxy Tab A */
@media (width: 800px) and (height: 1280px),
       (width: 1280px) and (height: 800px) {
    .hero-content {
        padding: 8vh 45px !important;
        text-align: center !important;
    }
    
    .hero-main {
        align-items: center !important;
    }
    
    .hero-headline {
        font-size: 54px !important;
        text-align: center !important;
    }
    
    .hero-text-section {
        align-items: center !important;
    }
    
    .hero-app-badges {
        justify-content: center !important;
    }
}

/* Pixel Tablet & Galaxy Tab S series */
@media (width: 1600px) and (height: 2560px),
       (width: 2560px) and (height: 1600px) {
    .hero-content {
        padding: 10vh 80px !important;
    }
    
    .hero-headline {
        font-size: 80px !important;
    }
    
    .hero-subheadline {
        font-size: 26px !important;
    }
    
    .hero-brand-logo {
        height: 32px !important;
    }
}

/* ===================================================================
   ULTRA-WIDE & TALL PHONES (20:9, 21:9 aspect ratios)
   =================================================================== */
@media (max-width: 480px) and (min-aspect-ratio: 2.1) {
    .hero {
        min-height: 100vh !important;
        max-height: none !important;
    }
    
    .hero-content {
        min-height: 100vh !important;
        padding-top: 10vh !important;
        padding-bottom: 10vh !important;
    }
    
    /* Adjust scanner UI for tall phones */
    .scan-frame {
        height: 40% !important;
    }
}

/* ===================================================================
   FIXES FOR ALL DEVICES - Universal improvements
   =================================================================== */
/* Ensure text is always readable */
@media (max-width: 1024px) {
    /* Fix text cutoff issues */
    .hero-headline br {
        display: none !important;
    }
    
    .hero-headline {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Ensure buttons are touchable */
    .app-badge,
    .scroll-cta,
    button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Fix overflow issues */
    body,
    .hero,
    section {
        overflow-x: hidden !important;
    }
    
    /* Ensure video background works everywhere */
    .hero-video {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Fix z-index issues on mobile */
    .hero-content {
        z-index: 20 !important;
    }
    
    .gradient-overlay {
        z-index: 10 !important;
    }
    
    /* Ensure sections have proper spacing */
    section {
        padding: 60px 20px !important;
    }
    
    .container {
        padding: 0 20px !important;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-left)) {
    .hero-content,
    .container,
    section {
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
    }
    
    .hero-content {
        padding-top: 20px !important; /* Remove safe area inset */
    }
    
    .footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
}

/* High resolution displays */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
    .hero-brand-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Prevent horizontal scroll and double scrollbar */
html {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important; /* Let HTML handle scrolling */
}

body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Don't create second scrollbar */
}

/* Ensure footer is the last element */
.footer {
    margin-bottom: 0 !important;
    padding-bottom: 24px !important; /* Final padding inside footer */
}

/* Remove any extra space after footer */
body > *:last-child {
    margin-bottom: 0 !important;
}

/* Ensure body ends at footer */
body::after {
    display: none !important;
}

/* Remove any phantom spacing */
html, body {
    height: auto !important; /* Don't force 100% height */
}

/* Ensure footer is truly the end */
.footer + * {
    display: none !important;
}

/* Fix for devices with rounded corners */
@media (max-width: 480px) {
    .hero,
    .hero-content {
        border-radius: 0 !important;
    }
}

/* ===================================================================
   FINAL EDGE CASE FIXES
   =================================================================== */

/* Fix for Surface Duo dual screen */
@media (width: 540px) and (height: 720px) {
    .hero-content {
        padding: 6vh 30px !important;
    }
    
    .hero-headline {
        font-size: 40px !important;
    }
}

/* Nintendo Switch Browser */
@media (width: 1280px) and (height: 720px) {
    .hero-content {
        padding: 4vh 40px !important;
    }
    
    .hero-headline {
        font-size: 48px !important;
    }
    
    .hero-subheadline {
        font-size: 18px !important;
    }
}

/* Fix white space at bottom on some devices */
@media (max-width: 1024px) {
    .hero {
        min-height: 100vh !important;
        min-height: 100dvh !important; /* Dynamic viewport height */
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    
    /* Fix for when keyboard appears */
    .hero:has(input:focus, textarea:focus) {
        min-height: auto !important;
    }
}

/* Fix brand logos alignment on all mobile devices */
@media (max-width: 768px) {
    .hero-brand-logos {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Remove all dividers on mobile */
    .brand-divider {
        display: none !important;
    }
    
    /* Ensure consistent logo sizes */
    .hero-brand-logo {
        flex-shrink: 0 !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    /* Special handling for problem logos */
    .hero-brand-logos img[src="asos-white.png"] {
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
    }
    
    .hero-brand-logos img[src="uniqlo-logo-transparent.png"] {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
    }
    
    .hero-brand-logos img[src="farfetch-white.png"] {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
    }
}

/* Ensure touch targets are accessible */
@media (pointer: coarse) {
    .app-badge,
    button,
    a {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .scroll-cta {
        padding: 12px 24px !important;
    }
}

/* Fix for PWA and standalone mode */
@media (display-mode: standalone) {
    .hero-content {
        padding-top: max(10vh, 44px) !important;
    }
}

/* Performance optimization for low-end devices */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .hero-video {
        display: none !important;
    }
    
    .hero-background {
        background: #000 url('sidewalk.png') center/cover !important;
    }
}

/* Dark mode support for better visibility */
@media (prefers-color-scheme: dark) {
    .hero-brand-logo {
        opacity: 0.95 !important;
    }
}

/* Fix testimonial cards on tablets */
@media (min-width: 600px) and (max-width: 1024px) {
    .testimonials-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .testimonial-card.featured {
        grid-column: 1 !important;
    }
    
    .author-avatar {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Fix section padding consistency */
@media (max-width: 768px) {
    .how-works,
    .testimonials-section,
    .why-remode {
        padding: 60px 20px !important;
    }
    
    .how-works h2,
    .testimonials-section h2,
    .why-remode h2 {
        font-size: 2rem !important;
        margin-bottom: 16px !important;
    }
}

/* Ensure footer is readable on all devices */
@media (max-width: 480px) {
    .footer {
        padding: 40px 20px 20px !important;
    }
    
    .footer-privacy-statement {
        font-size: 0.875rem !important;
        margin-bottom: 30px !important;
    }
    
    .footer-logo {
        font-size: 1.5rem !important;
    }
    
    .footer-apps {
        margin-top: 20px !important;
    }
    
    .footer-app-badge img {
        height: 36px !important;
    }
}

/* Profile picture responsive fixes */
@media (max-width: 480px) {
    .author-avatar {
        width: 40px !important;
        height: 40px !important;
        border-width: 2px !important;
    }
    
    .testimonial-author {
        gap: 10px !important;
    }
    
    .author-name {
        font-size: 0.9rem !important;
    }
}

/* Extra small devices */
@media (max-width: 375px) {
    .author-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .testimonial-author {
        gap: 8px !important;
    }
}

/* ===================================================================
   FINISH-LINE MOBILE OVERRIDES (CTA + MOCKUP SCALE)
   =================================================================== */

/* Standard phones (iPhone 12/13/14/15 Pro, etc.) */
@media (min-width: 376px) and (max-width: 430px) {
  /* CTA sizing/centering (avoid overly-wide pills) */
  .hero-beta-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 40px !important;
  }

  .hero-beta-cta .beta-primary-btn,
  .hero-beta-cta .beta-secondary-btn {
    width: min(320px, calc(100vw - 48px)) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mockups: ensure these rules beat earlier 520px caps */
  .how-works .how-step {
    max-width: min(720px, 96vw) !important;
    width: 100% !important;
    padding: 32px 14px 40px !important;
  }

  .how-works .premium-mockup,
  .how-works .phone-screen-wrapper,
  .how-works .mockup-glass-wrapper {
    max-width: min(720px, 96vw) !important;
    width: 100% !important;
  }

  /* Override base 400px cap from styles.css */
  .premium-mockup,
  .mockup-glass-wrapper,
  .phone-screen-wrapper {
    max-width: min(720px, 96vw) !important;
  }
}

/* Small phones (SE / Mini) */
@media (max-width: 375px) {
  .hero-beta-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 36px !important;
  }

  .hero-beta-cta .beta-primary-btn,
  .hero-beta-cta .beta-secondary-btn {
    width: min(300px, calc(100vw - 40px)) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .how-works .how-step {
    max-width: min(680px, 96vw) !important;
    width: 100% !important;
    padding: 28px 12px 36px !important;
  }

  .how-works .premium-mockup,
  .how-works .phone-screen-wrapper,
  .how-works .mockup-glass-wrapper {
    max-width: min(680px, 96vw) !important;
    width: 100% !important;
  }

  .premium-mockup,
  .mockup-glass-wrapper,
  .phone-screen-wrapper {
    max-width: min(680px, 96vw) !important;
  }
}

/* Large phones (Pro Max) */
@media (min-width: 431px) and (max-width: 480px) {
  .hero-beta-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 44px !important;
  }

  .hero-beta-cta .beta-primary-btn,
  .hero-beta-cta .beta-secondary-btn {
    width: min(340px, calc(100vw - 56px)) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .how-works .how-step {
    max-width: min(760px, 96vw) !important;
    width: 100% !important;
    padding: 36px 16px 44px !important;
  }

  .how-works .premium-mockup,
  .how-works .phone-screen-wrapper,
  .how-works .mockup-glass-wrapper {
    max-width: min(760px, 96vw) !important;
    width: 100% !important;
  }

  .premium-mockup,
  .mockup-glass-wrapper,
  .phone-screen-wrapper {
    max-width: min(760px, 96vw) !important;
  }
}


/* ===================================================================
   TOUCH DEVICE OVERRIDE (wins over styles.css hover:none rules)
   =================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* CTAs */
  .hero-beta-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 40px !important;
  }

  .hero-beta-cta .beta-primary-btn,
  .hero-beta-cta .beta-secondary-btn {
    width: min(320px, calc(100vw - 48px)) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mockups: force larger than the 520px cap in styles.css */
  .how-step {
    max-width: min(720px, 96vw) !important;
    width: 100% !important;
  }

  .premium-mockup,
  .mockup-glass-wrapper,
  .phone-screen-wrapper,
  .how-works .premium-mockup,
  .how-works .mockup-glass-wrapper,
  .how-works .phone-screen-wrapper {
    max-width: min(720px, 96vw) !important;
    width: 100% !important;
  }
}


/* ===================================================================
   VIEWPORT-BASED MOBILE OVERRIDE (works on simulators + real devices)
   =================================================================== */
@media (max-width: 500px) {
  /* Force CTAs to stack vertically - AGGRESSIVE */
  .hero-beta-cta {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 40px !important;
    flex-wrap: nowrap !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  .hero-beta-cta .beta-primary-btn,
  .hero-beta-cta .beta-secondary-btn {
    display: flex !important;
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mockups: force larger */
  .how-step {
    max-width: min(720px, 96vw) !important;
    width: 100% !important;
  }

  .premium-mockup,
  .mockup-glass-wrapper,
  .phone-screen-wrapper {
    max-width: min(720px, 96vw) !important;
    width: 100% !important;
  }
}