/* Large screens — canonical landing typography (see variables.css) */
@media (min-width: 64rem) {
  :root {
    --text-landing-size: 4.5rem;
    --text-landing-leading: 140%;
    --text-landing-tracking: -0.18rem;
  }
}

@media (max-width: 63.99rem) {
  :root {
    --text-landing-size: clamp(1.35rem, 6.5vw, 3.25rem);
    --text-landing-tracking: -0.08rem;
  }
}

@media (max-width: 47.99rem) {
  :root {
    --text-landing-size: clamp(1.25rem, 6.2vw, 2.5rem);
    --text-landing-tracking: -0.06rem;
  }

  /* Gap is 3× previous values; card width targets ~2.8 tiles visible (see mobile override below) */
  .screens__track {
    gap: clamp(1.35rem, 5.4vw, 2.25rem);
    padding-inline: clamp(1rem, 7vw, 1.7rem);
  }

  .screens__image {
    width: calc(
      (100vw - 2 * clamp(1rem, 4vw, 3rem) - 2 * clamp(1.35rem, 5.4vw, 2.25rem)) / 2.8
    );
    max-width: 12rem;
    min-width: 6rem;
  }
}

@media (max-width: 23.4375rem) {
  .screens__image {
    width: calc(
      (100vw - 2 * clamp(1rem, 5vw, 1.7rem) - 2 * clamp(1.35rem, 5.4vw, 2.25rem)) / 2.8
    );
    max-width: 10rem;
    min-width: 5.5rem;
  }

  .screens__track {
    gap: clamp(1.35rem, 5.4vw, 2.25rem);
    padding-inline: clamp(1rem, 7vw, 1.7rem);
    scroll-padding-inline: clamp(1rem, 5vw, 1.7rem);
  }

  .hero__brand {
    gap: 1rem;
  }

  .hero__icon {
    width: 6.5rem;
  }

  .hero__wordmark {
    width: 11rem;
  }

  .store-button__badge {
    height: clamp(2rem, 10.5vw, 2.65rem);
    width: auto;
  }
}

/* Tablet ≥ 768px — icon and wordmark side by side */
@media (min-width: 48rem) {
  .main__container {
    gap: clamp(4rem, 7vw, 7rem);
  }

  .hero__brand {
    flex-wrap: nowrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-button:not(.store-button--disabled) {
    transition: none;
  }
}