/**
 * ============================================
 * MOBILE RESPONSIVENESS FIX
 * Priority: CRITICAL - Mobile First Overrides
 * ============================================
 * 
 * This file fixes mobile responsiveness issues by:
 * 1. Preventing horizontal overflow
 * 2. Ensuring fluid typography
 * 3. Fixing grid layouts for mobile
 * 4. Ensuring proper touch targets
 * 5. Safe area insets for notched devices
 */

/* ============================================
   1. GLOBAL OVERFLOW PROTECTION
   ============================================ */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  min-width: 320px;
}

/* Prevent any element from causing horizontal scroll - MOBILE ONLY */
@media (max-width: 1023px) {
  *:not(.header__toggle):not(.header__toggle span):not(.header__toggle *):not(.partners-grid):not(.partners-grid img),
  *:not(.header__toggle)::before,
  *:not(.header__toggle)::after {
    max-width: 100%;
  }
}

/* Images and media must fit container */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ============================================
   2. SAFE AREA INSETS (Notch/Dynamic Island)
   ============================================ */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.container {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ============================================
   3. TYPOGRAPHY - FLUID SIZING
   ============================================ */
@media (max-width: 767px) {
  /* Hero Headlines */
  .hero__headline,
  .hero-headline,
  .hero h1,
  [class*="hero"] h1 {
    font-size: clamp(1.75rem, 7vw, 3rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word;
    hyphens: auto;
  }
  
  /* Section Headlines */
  h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  
  h3 {
    font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
    line-height: 1.3 !important;
  }
  
  /* Body text */
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  p, .lead, .text-body {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem) !important;
    line-height: 1.65 !important;
  }
  
  /* Small text remains readable */
  small, .text-small, .text-sm {
    font-size: 0.8125rem !important;
  }
}

/* ============================================
   4. HERO SECTION MOBILE FIXES
   ============================================ */
@media (max-width: 767px) {
  /* Hero Grid - Stack vertically */
  .hero-grid,
  .hero__grid,
  [class*="hero"] .grid,
  .hero .container > div[style*="grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  /* Hero Content */
  .hero-content,
  .hero__content {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }
  
  /* Hero Stats Grid */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Hero Stat Items */
  .hero-stat {
    padding: 16px 8px !important;
    min-width: 0 !important;
  }
  
  .hero-stat__value {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  
  .hero-stat__label {
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  
  /* Hero Actions - Stack buttons */
  .hero-actions,
  .hero__actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .hero-actions > *,
  .hero__actions > * {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Hero Badge */
  .hero__badge,
  .badge {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }
  
  /* Hero image container */
  .hero-image,
  .hero__image {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ============================================
   5. GRID LAYOUTS - MOBILE FIRST
   ============================================ */
@media (max-width: 639px) {
  /* Force single column on mobile */
  .grid,
  .bento-grid,
  .service-cards,
  .feature-grid,
  .benefits-grid,
  .stats-grid,
  [class*="-grid"],
  [style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* 2-column grids stay 2 columns (stats, etc.) */
  .grid--2-mobile,
  .hero-stats,
  .stats-grid--2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  /* Tablet - 2 columns */
  .grid,
  .service-cards,
  .feature-grid,
  [class*="-grid"]:not(.hero-stats) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   6. CARDS - MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 767px) {
  .card,
  .service-card,
  .feature-card,
  .testimonial-card,
  [class*="card"] {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }
  
  /* Card icons */
  .card__icon,
  .card-icon,
  [class*="card"] [class*="icon"] {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Card titles */
  .card__title,
  .card-title,
  [class*="card"] h3 {
    font-size: 1.125rem !important;
  }
  
  /* Card text */
  .card__text,
  .card-text,
  [class*="card"] p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   7. TOUCH TARGETS - ACCESSIBILITY
   ============================================ */
@media (max-width: 1023px) {
  /* All interactive elements need minimum touch target */
  a, button, 
  [role="button"], 
  input[type="submit"], 
  input[type="button"],
  .btn,
  [class*="btn"],
  .header__link,
  .mobile-nav__link,
  .faq-question,
  summary {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Links in lists/navigation */
  nav a,
  .footer__links a,
  .mobile-nav__link {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Buttons */
  .btn,
  [class*="btn-"],
  button {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
  }
  
  /* Mobile CTA - Full width */
  .mobile-nav__cta,
  .cta-btn,
  .hero .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   8. SECTIONS - MOBILE PADDING
   ============================================ */
@media (max-width: 767px) {
  section,
  .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Reduce excessive padding */
  .hero {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Section headers */
  .section__header,
  .section-header {
    margin-bottom: 2rem !important;
    text-align: center !important;
  }
  
  /* Center section titles */
  .section__title,
  .section-title {
    text-align: center !important;
  }
}

/* ============================================
   9. NAVIGATION - MOBILE FIXES
   ============================================ */
@media (max-width: 1023px) {
  /* Header fixes */
  .header {
    height: 72px !important; /* Increased for better touch targets */
    padding: 0 20px !important;
    z-index: 100001 !important; /* Extreme z-index to ensure top */
    position: fixed !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  }
  
  .header__inner {
    height: 72px !important;
    padding: 0 !important;
  }
  
  /* Logo sizing - Increased per user request */
  .header__logo img {
    height: 48px !important; /* Significantly larger */
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
  }
  
  /* Hide desktop nav */  
  .header__nav {
    display: none !important;
  }
  
  /* Hide desktop CTA */
  .header__cta {
    display: none !important;
  }
  
  /* ==========================================
     HAMBURGER MENU TOGGLE - PROFESSIONAL
     ========================================== */
  .header__toggle {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 52px !important; /* Slightly larger touch target */
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: none !important;
    background: var(--accent, #0369a1) !important;
    border: none !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 100002 !important; /* Must be higher than header */
    box-shadow: 0 4px 15px rgba(3, 105, 161, 0.4) !important;
    transition: all 0.3s ease !important;
  }
  
  .header__toggle:hover {
    background: var(--accent-dark, #075985) !important;
    transform: scale(1.05) !important;
  }
  
  /* Hamburger bars wrapper */
  .header__toggle span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    width: 24px !important; /* Slightly wider */
    min-width: 24px !important;
    height: 3px !important;
    min-height: 3px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center center !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
  
  /* Default state: 3 horizontal bars */
  .header__toggle span:nth-child(1) {
    top: 17px !important;
  }
  
  .header__toggle span:nth-child(2) {
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
  }
  
  .header__toggle span:nth-child(3) {
    bottom: 17px !important;
  }
  
  /* Active state - X icon (centered) */
  .header__toggle.active span:nth-child(1) {
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) rotate(45deg) !important;
  }
  
  .header__toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-50%) scaleX(0) !important;
  }
  
  .header__toggle.active span:nth-child(3) {
    bottom: auto !important;
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg) !important;
  }
  
  /* Mobile nav overlay - FULL SCREEN */
  .mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    z-index: 100000 !important; /* Very high, but LOWER than header/toggle */
    display: flex !important;
    flex-direction: column !important;
    padding: 110px 24px 40px !important; /* Top padding clears the header */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(100%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* GLOBAL BREADCRUMB REMOVAL - User Request */
  .city-hero__breadcrumb,
  .breadcrumb,
  .breadcrumbs,
  nav[aria-label="breadcrumb"],
  [class*="breadcrumb"] {
    display: none !important;
  }
  
  .mobile-nav.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }
  
  /* Mobile nav links */
  .mobile-nav__links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .mobile-nav__link {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
  }
  
  .mobile-nav__link:hover,
  .mobile-nav__link:active {
    color: #fff !important;
    background: rgba(3, 105, 161, 0.2) !important;
    transform: translateX(8px) !important;
  }
  
  .mobile-nav__cta {
    display: block !important;
    margin-top: 24px !important;
    padding: 18px 32px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--accent, #0369a1) !important;
    text-decoration: none !important;
    border-radius: 16px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(3, 105, 161, 0.4) !important;
  }
  
  /* Main content offset for fixed header */
  .main-content,
  main {
    padding-top: 64px !important;
  }
}

/* Extra small devices */
@media (max-width: 359px) {
  .header {
    height: 56px !important;
  }
  
  .header__inner {
    height: 56px !important;
    padding: 0 12px !important;
  }
  
  .header__logo img {
    height: 28px !important;
  }
  
  .mobile-nav {
    top: 56px !important;
    padding: 1rem !important;
  }
  
  .main-content,
  main {
    padding-top: 56px !important;
  }
}

/* ============================================
   10. FORMS - MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 767px) {
  input, 
  textarea, 
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
  }
  
  /* Form groups */
  .form-group,
  .input-group {
    margin-bottom: 1rem !important;
  }
  
  /* Labels */
  label {
    font-size: 0.9375rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ============================================
   11. TABLES - RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  
  th, td {
    padding: 10px 12px !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================
   12. IMAGES & MEDIA - RESPONSIVE
   ============================================ */
img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent SVG overflow */
svg {
  max-width: 100%;
  height: auto;
}

/* Video embeds responsive */
.video-container,
.embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   13. FOOTER - MOBILE FIXES
   ============================================ */
@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  
  .footer__brand {
    text-align: center !important;
  }
  
  .footer__social {
    justify-content: center !important;
  }
  
  .footer__links {
    align-items: center !important;
  }
  
  .footer__bottom-inner {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .footer__legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ============================================
   14. TRUST BAR & LOGOS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  .trust-bar,
  .partners-section {
    padding: 1.5rem 0 !important;
  }
  
  .trust-bar__logo-img,
  .partners-grid img {
    height: 24px !important;
  }
  
  .trust-bar__logos,
  .partners-grid {
    gap: 30px !important;
  }
}

/* ============================================
   15. FAQ - MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 767px) {
  .faq-item,
  .faq-details {
    margin-bottom: 0.75rem !important;
    border-radius: 12px !important;
  }
  
  .faq-question,
  .faq-details summary {
    padding: 1rem !important;
    font-size: 1rem !important;
    gap: 1rem !important;
  }
  
  .faq-answer__inner,
  .faq-details > div {
    padding: 0 1rem 1rem !important;
    font-size: 0.9375rem !important;
  }
}

/* ============================================
   16. CTA SECTIONS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  .cta-section {
    padding: 3rem 0 !important;
    text-align: center !important;
  }
  
  .cta-section__title {
    font-size: 1.5rem !important;
  }
  
  .cta-section__text {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .cta-btn {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ============================================
   17. TESTIMONIALS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  .testimonials__grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  .testimonial,
  .testimonial-card {
    padding: 1.25rem !important;
  }
  
  .testimonial__text {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  .testimonial__avatar,
  .testimonial__avatar-placeholder {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* ============================================
   18. PROCESS/STEPS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  .process-steps,
  .steps-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .step-card,
  .process-step {
    padding: 1.25rem !important;
  }
  
  .step-num {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================
   19. ANIMATION PERFORMANCE - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Reduce animations on mobile for performance */
  .animate-on-scroll,
  [class*="animate"] {
    animation-duration: 0.3s !important;
  }
  
  /* Disable complex transforms on mobile */
  .service-card:hover,
  .testimonial-card:hover,
  .card:hover {
    transform: translateY(-4px) !important;
  }
  
  /* Disable cursor spotlight on mobile */
  .cursor-spotlight {
    display: none !important;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   20. PRINT STYLES - MOBILE
   ============================================ */
@media print {
  body {
    font-size: 12pt !important;
  }
  
  .header,
  .footer,
  .mobile-nav,
  .cta-section,
  .floating-cta,
  [class*="cookie"] {
    display: none !important;
  }
  
  main {
    padding-top: 0 !important;
  }
}

/* ============================================
   FINAL CRITICAL OVERRIDES (DO NOT REMOVE)
   Ensure these win specificity wars
   ============================================ */
@media (max-width: 1023px) {
    /* Force Logo Size */
    .header__logo img {
        height: 48px !important;
        width: auto !important;
        max-height: 48px !important;
        min-height: 48px !important;
        object-fit: contain !important;
    }
    
    /* Force Header & Toggle Z-Index Layering */
    .header {
        z-index: 100001 !important;
        height: 72px !important;
    }
    
    .header__toggle {
        z-index: 100002 !important; /* Highest */
        position: relative !important; 
        display: flex !important;
        width: 52px !important;
        height: 52px !important;
    }
    
    .mobile-nav {
         z-index: 100000 !important; /* Below toggle */
         padding-top: 100px !important;
    }
}

/* ============================================
   URGENT DESIGN & INTERACTIVITY FIXES
   (Icons, Clickability, Transparency)
   ============================================ */

/* 1. FORCE SOLID BACKGROUND & FULL SIZE - MOBILE ONLY */
@media (max-width: 1023px) {
  #mobileNav, .mobile-nav {
    background: #0F172A !important;
    background-color: #0F172A !important;
    backdrop-filter: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding-top: 80px !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out !important;
    z-index: 100000 !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.mobile-nav-active #mobileNav,
  body.mobile-nav-active .mobile-nav {
    transform: translateX(0) !important;
  }

  .mobile-nav svg,
  .mobile-nav img,
  .mobile-nav i,
  .mobile-nav__contact svg,
  .mobile-nav__social svg {
    max-width: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav__contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 16px !important;
    padding: 10px 0 !important;
  }

  .mobile-nav__link,
  .mobile-nav__item a {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
    width: 100% !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
}

@media (min-width: 1024px) {
  #mobileNav, .mobile-nav {
    display: none !important;
  }
}

/* 4. RESET PAGE-SPECIFIC WEIRDNESS - MOBILE ONLY */
@media (max-width: 1023px) {
  body, html {
    overflow-x: hidden !important;
  }
}

/* Ensure Close Button area is safe & VISIBLE - MOBILE ONLY */
@media (max-width: 1023px) {
  .header__toggle {
    background: var(--accent, #0369a1) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .header__toggle {
    display: none !important;
  }
}


/* ============================================
   URGENT FIX: RESTORE HORIZONTAL SCROLLING LOGOS
   (Fixes "Huge White Space" & Stacked Logos)
   ============================================ */
.trust-bar__logos,
.partners-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important; /* Allow content to exceed screen width for scrolling */
    max-width: none !important; /* Override global max-width constraint */
    min-width: 100% !important;
    gap: 30px !important;
    transform: translate3d(0,0,0); /* Force hardware accel */
}

/* Override the dangerous [class*="-grid"] global rule for partners */
.partners-grid {
    grid-template-columns: none !important;
}

/* Ensure images inside don't shrink or break layout */
.trust-bar__logo-item,
.partners-grid img {
    flex-shrink: 0 !important;
    width: auto !important;
    height: 32px !important; /* Consistent small size */
    max-width: none !important;
    display: block !important;
}

/* Restore animations if they were paused/broken */
.trust-bar__logos,
.partners-grid {
    animation-play-state: running !important;
}

/* ============================================
   FUNNEL PAGE MOBILE FIXES
   (Fix squished 2x2 grid on small screens)
   ============================================ */
@media (max-width: 600px) {
    .funnel-options {
        grid-template-columns: 1fr !important; /* Stack vertically for larger touch targets */
        gap: 12px !important;
    }
    
    .funnel-option {
        min-height: 80px !important; /* Reduce height slightly if needed, but 1fr width fixes space */
        flex-direction: row !important; /* Horizontal layout for stacked options looks better */
        justify-content: flex-start !important;
        padding: 16px !important;
        text-align: left !important;
        gap: 16px !important;
    }
    
    .funnel-option__icon {
        margin-bottom: 0 !important; /* Remove bottom margin for row layout */
        flex-shrink: 0 !important;
    }
    
    .funnel-option__title {
        text-align: left !important;
        font-size: 16px !important;
    }
}