/* ==========================================================
   Responsive — Purrchase.ai
   ========================================================== */

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  /* Nav */
  .top-nav__links {
    display: none;
  }

  /* Hero */
  .hero {
    min-height: 85vh;
    min-height: 85dvh;
  }

  .hero__content {
    padding: 0 var(--content-padding);
    min-height: 85vh;
    min-height: 85dvh;
  }

  .hero__scroll-hint {
    display: none;
  }

  /* Section nav: scrollable */
  .section-nav__link {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-caption);
  }

  /* Cards */
  .card-grid--2,
  .card-grid--3 {
    grid-template-columns: 1fr;
  }

  .card--horizontal {
    display: block;
    grid-template-columns: 1fr;
  }

  /* Steps */
  .steps__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  /* Metrics */
  .metrics-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  /* Proof */
  .proof-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .proof-item {
    max-width: 100%;
  }

  /* Stats */
  .stats-showcase {
    grid-template-columns: 1fr;
  }

  /* CTA card */
  .cta-card__inner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-2xl);
  }

  .cta-card__title,
  .cta-card__desc {
    max-width: 100%;
  }

  .cta-card__actions {
    flex-direction: column;
    align-items: center;
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    text-align: center;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }
}

/* ---- Small tablet (768px - 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .card-grid--3 {
    grid-template-columns: 1fr 1fr;
  }

  .card-grid--3 > :last-child {
    grid-column: 1 / -1;
  }

  .steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Desktop (1024px+) ---- */
@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}