/* Responsive overrides — T1-specific hero breakpoints */

@layer components {
  /* --- 768px+ --- */

  @media (min-width: 768px) {
    .hero h1 {
      font-size: 3.25rem;
    }
    .hero__tagline {
      font-size: 1.25rem;
    }
  }

  /* --- 1024px+ --- */

  @media (min-width: 1024px) {
    .hero {
      padding: var(--space-3xl) 0 var(--space-3xl);
    }
    .hero h1 {
      font-size: 4rem;
    }
  }
}