@layer components {
  /* Consumer Hero Section */
  .consumer-hero {
    position: relative;
    min-height: var(--consumer-hero-min-height);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  
  .consumer-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  
  .consumer-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .consumer-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right, 
      var(--color-page-bg) 0%, 
      hsla(0, 0%, 100%, 0.9) 50%, 
      hsla(0, 0%, 100%, 0.6) 100%
    );
    z-index: 2;
  }
  
  .consumer-hero-content {
    position: relative;
    z-index: 3;
    max-width: 600px;
  }
  
  /* Activity Grid */
  .activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  @media (min-width: 768px) {
    .activity-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6);
    }
  }
  
  .activity-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base);
  }
  
  .activity-item:hover {
    transform: scale(1.05);
  }
  
  .activity-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .activity-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
  }
  
  .activity-label {
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
  }
  
  /* Step Cards */
  .step-card {
    text-align: center;
    padding: var(--space-6);
  }
  
  .step-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--color-surface);
    border-radius: 50%;
    margin-bottom: var(--space-4);
  }
  
  .step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
  }
  
  /* Consumer Sections */
  .consumer-section {
    padding: var(--consumer-section-padding-sm);
  }
  
  @media (min-width: 768px) {
    .consumer-section {
      padding: var(--consumer-section-padding);
    }
  }
  
  .consumer-section.bg-sage {
    background: var(--color-surface);
  }
  
  .consumer-section.bg-cream {
    background: var(--color-border-decorative);
  }
  
  /* FAQ Accordion */
  .faq-accordion {
    max-width: 768px;
    margin: 0 auto;
  }
  
  .faq-item {
    border-bottom: 1px solid var(--color-border-decorative);
    margin-bottom: var(--space-4);
  }
  
  .faq-question {
    background: none;
    border: none;
    width: 100%;
    padding: var(--space-4) 0;
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .faq-answer {
    padding-bottom: var(--space-4);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
  }
  
  /* Scroll Reveal Animation */
  .scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: all var(--consumer-animation-duration) ease-out;
  }
  
  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Consumer Button Variants */
  .btn-consumer-outline {
    display: inline-block;
    padding: var(--space-4) var(--space-6);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    text-decoration: none;
    border-radius: var(--radius-round);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-base);
  }
  
  .btn-consumer-outline:hover {
    background: var(--color-primary);
    color: white;
  }
  
  /* Progressive Enhancement - Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
      transition: none;
      opacity: 1;
      transform: none;
    }
    
    .activity-item:hover {
      transform: none;
    }
    
    .consumer-hero-overlay,
    .step-icon-wrapper,
    .faq-question i {
      transition: none;
    }
  }
  
  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
    .consumer-hero-overlay {
      background: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0.6) 50%, 
        rgba(0, 0, 0, 0.4) 100%
      );
    }
    
    .activity-overlay {
      background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.5));
    }
  }

  /* Mobile Responsive Typography */
  @media (max-width: 768px) {
    /* Reduce hero title size for tablet and mobile */
    .consumer-hero h1 {
      font-size: 2.25rem !important; /* Down from 3.2rem to 2.25rem (36px) */
    }
    
    /* Reduce subtitle and description text */
    .consumer-hero p,
    .consumer-section h2 + p {
      font-size: 1.25rem !important; /* Down from 1.6rem to 1.25rem (20px) */
    }
  }

  @media (max-width: 480px) {
    /* Further reduce for small mobile screens */
    .consumer-hero h1 {
      font-size: 1.8rem !important; /* Down to 1.8rem (28.8px) */
      line-height: 1.2;
    }
    
    .consumer-hero p,
    .consumer-section h2 + p {
      font-size: 1.125rem !important; /* Down to base size (18px) */
    }
    
    /* Reduce section headings */
    .consumer-section h2 {
      font-size: 1.6rem !important; /* Down from default h2 size */
    }
    
    /* Adjust step card content */
    .step-card h3 {
      font-size: 1.125rem !important;
    }
  }

  @media (max-width: 360px) {
    /* Extra small screens - further optimization */
    .consumer-hero h1 {
      font-size: 1.6rem !important; /* Down to 1.6rem (25.6px) */
    }
    
    .consumer-hero p,
    .consumer-section h2 + p {
      font-size: 1rem !important; /* Down to 16px */
      line-height: 1.5;
    }
    
    .consumer-section h2 {
      font-size: 1.4rem !important;
    }
    
    /* Reduce icon sizes and spacing for tiny screens */
    .step-icon-wrapper {
      width: 64px;
      height: 64px;
    }
    
    .step-number {
      width: 24px;
      height: 24px;
      font-size: 0.75rem;
    }
  }
}