/* Shared landing styles for homepage + onboarding teardown pages */

@media (min-width: 1025px) {
  .hero {
    max-width: 620px;
  }
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
}

.hero-sub {
  font-family: var(--sans);
  font-size: 1.25rem;
  color: #000;
  margin-top: 1.75rem;
  max-width: 540px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-shadow:
    0.7px 0 0 var(--hero-outline),
    -0.7px 0 0 var(--hero-outline),
    0 0.7px 0 var(--hero-outline),
    0 -0.7px 0 var(--hero-outline);
}

.hero-price-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.hero-price-headline {
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
}

.hero-price-guarantee {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.45;
  text-shadow: none;
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  body:not(.tools-page)::before {
    background: url('/img/Mobile.webp') no-repeat center calc(50% - 10px);
    background-size: cover;
  }

  .hero h1,
  .hero-sub {
    text-shadow: none;
  }
}

@media (max-width: 768px) {
  nav[aria-label="Primary"] {
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: flex-start;
  }

  .nav-links {
    gap: 1.1rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 2rem 0 2rem;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  .hero-sub {
    font-size: 1.1rem;
    margin-top: 1.1rem;
  }
}