/* EMERGENCY STYLING FIXES - How It Works Pages ONLY */

/* Only apply to How It Works pages - check for body class or data attribute */
/* This prevents breaking other pages like homepage */

/* Scope all fixes to pages with .how-it-works class on body */
body.how-it-works {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* Remove constraints ONLY on How It Works pages */
body.how-it-works > *,
body.how-it-works main,
body.how-it-works main > *,
body.how-it-works .page-wrapper,
body.how-it-works .container,
body.how-it-works [class*="container"] {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero section - full width background - ONLY on How It Works pages */
body.how-it-works section[class*="hero"],
body.how-it-works .hero-section,
body.how-it-works .hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 60px 20px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

/* Hero content container */
body.how-it-works section[class*="hero"] > div,
body.how-it-works .hero-section > div,
body.how-it-works .hero-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Hero text color */
body.how-it-works section[class*="hero"] *,
body.how-it-works .hero-section *,
body.how-it-works .hero * {
  color: white !important;
}

/* Hero typography - CORRECTED SIZES */
body.how-it-works section[class*="hero"] h1,
body.how-it-works .hero-section h1,
body.how-it-works .hero h1 {
  font-size: 2rem !important; /* 32px - NOT 48px */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

body.how-it-works section[class*="hero"] h2,
body.how-it-works .hero-section h2,
body.how-it-works .hero h2,
body.how-it-works section[class*="hero"] .subtitle,
body.how-it-works .hero .subtitle {
  font-size: 1.125rem !important; /* 18px - NOT 24px */
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin-bottom: 1.5rem !important;
}

/* Body typography - REDUCED from previous - ONLY on How It Works pages */
body.how-it-works h2 {
  font-size: 1.75rem !important; /* 28px - NOT 36px */
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

body.how-it-works h3 {
  font-size: 1.25rem !important; /* 20px - NOT 24px */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

body.how-it-works h4 {
  font-size: 1.125rem !important; /* 18px - NOT 20px */
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

body.how-it-works p,
body.how-it-works li {
  font-size: 1rem !important; /* 16px - NOT 18px */
  line-height: 1.6 !important;
}

/* Mobile responsive - ONLY on How It Works pages */
@media (max-width: 768px) {
  body.how-it-works section[class*="hero"],
  body.how-it-works .hero-section,
  body.how-it-works .hero {
    padding: 40px 16px !important;
  }

  body.how-it-works section[class*="hero"] h1,
  body.how-it-works .hero-section h1,
  body.how-it-works .hero h1 {
    font-size: 1.5rem !important; /* 24px mobile */
  }

  body.how-it-works section[class*="hero"] h2,
  body.how-it-works .hero-section h2,
  body.how-it-works .hero h2,
  body.how-it-works section[class*="hero"] .subtitle,
  body.how-it-works .hero .subtitle {
    font-size: 1rem !important; /* 16px mobile */
  }

  body.how-it-works h2 {
    font-size: 1.5rem !important; /* 24px mobile */
  }

  body.how-it-works h3 {
    font-size: 1.125rem !important; /* 18px mobile */
  }

  body.how-it-works h4 {
    font-size: 1rem !important; /* 16px mobile */
  }

  body.how-it-works p,
  body.how-it-works li {
    font-size: 0.9375rem !important; /* 15px mobile */
  }
}

/* Section styling - ONLY on How It Works pages */
body.how-it-works section,
body.how-it-works .section {
  padding: 60px 20px;
}

/* Alternating backgrounds - NEW - ONLY on How It Works pages */
body.how-it-works section:not([class*="hero"]):nth-of-type(odd) {
  background-color: #ffffff;
}

body.how-it-works section:not([class*="hero"]):nth-of-type(even) {
  background-color: #f7fafc;
}

body.how-it-works .section-alt {
  background-color: #f8f9fa !important;
}

/* Content containers - ONLY on How It Works pages */
body.how-it-works section > div:not([class*="hero"]) {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons - ONLY on How It Works pages */
body.how-it-works .btn-primary-lg,
body.how-it-works .btn-cta,
body.how-it-works .cta-button,
body.how-it-works button[class*="cta"],
body.how-it-works a[class*="cta"] {
  font-size: 1rem !important;
  padding: 12px 24px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

/* Hero buttons - ONLY on How It Works pages */
body.how-it-works section[class*="hero"] .btn-primary-lg,
body.how-it-works section[class*="hero"] .btn-cta,
body.how-it-works .hero-section .btn-primary-lg,
body.how-it-works .hero .btn-primary-lg {
  background-color: white !important;
  color: #667eea !important;
}

/* Mobile spacing - ONLY on How It Works pages */
@media (max-width: 768px) {
  body.how-it-works section,
  body.how-it-works .section {
    padding: 40px 16px !important;
  }

  body.how-it-works section > div {
    padding: 0 16px !important;
  }
}