/* ============================================================
   FAFFLY — Responsive Styles
   Mobile-first breakpoints
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ============================================================ */

/* ---- Tablet (≥ 768px) ---- */
@media (min-width: 768px) {
  .hero__form {
    max-width: 460px;
  }
}

/* ---- Below tablet (< 768px) ---- */
@media (max-width: 767px) {

  /* Nav */
  .navbar__nav { display: none; }
  .navbar__hamburger { display: flex; }

  /* Hero */
  .hero {
    padding-top: calc(var(--nav-height) + var(--space-10));
    padding-bottom: var(--space-16);
    padding-inline: var(--space-4);
  }

  .hero__form {
    flex-direction: column;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .hero__form-input {
    width: 100%;
    text-align: center;
  }

  .hero__form .btn { width: 100%; }

  /* Sections */
  .section { padding: var(--space-16) 0; }

  .problem,
  .features,
  .roles,
  .shopify,
  .waitlist,
  .faq,
  .footer-section {
    padding: var(--space-16) 0;
  }

  /* Two-column grids → single column */
  .problem__grid,
  .features__grid,
  .shopify__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Problem: visual goes below text */
  .problem__grid .problem__visual { order: 2; }

  .problem__cards {
    grid-template-columns: 1fr;
  }

  /* Features: list goes above visual */
  .features__grid .features__visual { order: 2; }

  /* Role panel */
  .role-panel {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .role-panel .role-mockup { order: 2; }

  /* Shopify */
  .shopify__grid .shopify__visual { order: 2; }

  /* Footer card */
  .footer-card__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-card {
    padding: var(--space-8) var(--space-6);
  }

  /* Waitlist form */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Container padding */
  .container {
    padding-inline: var(--space-4);
  }
}

/* ---- Below desktop (< 1024px) ---- */
@media (max-width: 1023px) {

  .split { gap: var(--space-10); }

  .hero__dashboard { max-width: 100%; }

  .footer-card__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-card__brand {
    grid-column: 1 / -1;
  }
}

/* ---- Large screens (≥ 1280px) ---- */
@media (min-width: 1280px) {
  .hero__content { max-width: 1040px; }
}

/* ---- Print styles ---- */
@media print {
  .navbar,
  .hero__form,
  .marquee,
  .waitlist,
  .footer-section {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  h1, h2, h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
}