/* =========================================================
   RESPONSIVE STYLES
   Mobile-first overrides for tablet (≤960px) and phone (≤640px).
   Each breakpoint cascades — phone styles inherit tablet ones.
   ========================================================= */

/* ---------- Tablet & smaller (≤ 960px) ---------- */
@media (max-width: 960px) {

  /* Hide the desktop nav links and CTA, show the hamburger */
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }

  /* Hero collapses to single column */
  .hero {
    padding: 7rem 0 var(--space-6);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* Shrink visual column on tablet to keep page balance */
  .hero__visual { height: 380px; }
  .hero__fern { width: 240px; }

  /* Process grid: stack to 1 col on tablet, hide connector line */
  .process__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .process__grid::before { display: none; }

  /* Stats: switch to a single column for clean alignment */
  .stats {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* About grid stacks */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Final CTA stacks form below copy */
  .cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Footer stacks into one column, left-aligned */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    text-align: left;
  }
  .footer__copy { text-align: left; }

  /* Case study list goes to single column on tablet */
  .case-study__list {
    grid-template-columns: 1fr;
  }
}


/* ---------- Phone (≤ 640px) ---------- */
@media (max-width: 640px) {

  /* Reduce vertical rhythm for shorter scrolls on phones */
  :root {
    --space-7: 4rem;
    --space-6: 3rem;
    --space-5: 2.25rem;
  }

  /* Tighter container padding so cards have edge breathing room */
  .container { padding: 0 var(--space-2); }

  /* Logo scales down so it doesn't dominate the small nav */
  .nav__logo img { height: 38px; }

  /* Hero title needs slightly looser scale on small screens */
  .hero { padding: 6rem 0 var(--space-5); }
  .hero__title { font-size: 2.1rem; line-height: 1.1; }
  .hero__sub { font-size: 1.05rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  /* Trust strip wraps nicely; remove dividers when wrapping */
  .hero__trust {
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
  }
  .trust__divider { display: none; }
  .trust__item strong { font-size: 1.3rem; }

  /* Hero visual: smaller floating cards, fern shrinks */
  .hero__visual { height: 340px; }
  .hero__fern { width: 200px; }
  .hero__card { min-width: 130px; padding: 0.75rem 1rem; }
  .hero__card strong { font-size: 1.1rem; }
  .hero__card-label { font-size: 0.65rem; }
  .hero__card small { font-size: 0.75rem; }

  /* Single-column problem grid for better readability */
  .problems__grid { grid-template-columns: 1fr; }
  .problems__solution { padding: var(--space-3) var(--space-2); }

  /* Pricing card: simplify and remove decorative fern */
  .pricing { padding: var(--space-3); }
  .pricing__fern { display: none; }
  .pricing h3 { font-size: 1.4rem; }

  /* Form: stack the two-column row */
  .form { padding: var(--space-3); }
  .form__grid { grid-template-columns: 1fr; }

  /* Stats numbers shrink slightly so they don't break layout */
  .stat__num { font-size: 3rem; }

  /* Why-card icon shrinks a touch */
  .why-card { padding: var(--space-2); }
  .why-card__icon { width: 48px; height: 48px; font-size: 1.6rem; }

  /* Case study heading scales down */
  .case-study { padding: var(--space-3); }
  .case-study__head h3 { font-size: 1.3rem; }

  /* FAQ: tighter padding on mobile */
  .faq-item__btn { padding: var(--space-2); font-size: 0.98rem; }
  .faq-item.is-open .faq-item__body { padding: 0 var(--space-2) var(--space-2); }
}


/* ---------- Very small phones (≤ 380px) ---------- */
@media (max-width: 380px) {
  /* Ensure floating cards never overlap on tiny screens */
  .hero__card--1 { left: -10px; }
  .hero__card--3 { left: 0; }
}