/* ============================================
   RESPONSIVE — Mobile-first breakpoints
   ============================================ */

/* ---- Below 640px (mobile) ---- */

@media (max-width: 639px) {
  .container {
    padding-inline: var(--space-4);
  }

  /* Nav */
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  /* Hero */
  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__microcopy {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero__scroll-indicator {
    display: none;
  }

  /* PAS stats */
  .pas__stats {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }

  .pas__stats .pas__stat:nth-child(even) {
    display: none; /* hide dividers */
  }

  /* PAS solution grid */
  .pas__solution-grid {
    grid-template-columns: 1fr;
  }

  /* Timeline */
  .timeline__line {
    left: 12px;
  }

  .timeline__step {
    gap: var(--space-4);
  }

  .timeline__day {
    width: 24px;
    height: 24px;
    font-size: 0;
  }

  .timeline__day::after {
    content: attr(data-short);
    font-size: var(--text-xs);
  }

  .timeline__card {
    padding: var(--space-4);
  }

  /* Packages */
  .packages__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Differentiators */
  .diff__grid {
    grid-template-columns: 1fr;
  }

  /* Proof */
  .proof__grid {
    grid-template-columns: 1fr;
  }

  .proof__metrics {
    flex-direction: column;
    gap: var(--space-3);
  }

  .proof__metric-arrow {
    transform: rotate(90deg);
  }

  /* Guarantee */
  .guarantee__card {
    padding: var(--space-8) var(--space-6);
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  /* Mobile CTA bar */
  .mobile-cta {
    display: block;
  }

  /* Add bottom padding for mobile CTA bar */
  .footer {
    padding-bottom: calc(var(--space-8) + 72px);
  }
}

/* ---- 640px and up (large mobile / small tablet) ---- */

@media (min-width: 640px) {
  .packages__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ---- 768px and up (tablet) ---- */

@media (min-width: 768px) and (max-width: 1023px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .packages__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .packages__grid .package-card:last-child {
    grid-column: 1 / -1;
    max-width: 420px;
    margin-inline: auto;
  }

  .diff__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-inline: auto;
  }

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

  .proof__grid .proof__card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-inline: auto;
  }
}

/* ---- 1024px and up (desktop) ---- */

@media (min-width: 1024px) {
  .packages__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  /* Featured package slightly larger */
  .package-card--featured {
    transform: scale(1.03);
  }

  .package-card--featured:hover {
    transform: scale(1.03) translateY(-4px);
  }
}

/* ---- 1280px and up (large desktop) ---- */

@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-8);
  }

  .hero__title {
    font-size: var(--text-5xl);
  }
}