/* ==========================================================================
   Orgalytics.ai — responsive.css
   All @media rules for the whole site, one block per breakpoint.

   Breakpoints (max-width): 1100 · 1024 · 960 (nav) · 900 (tablet) · 640 (phone)
   Plus prefers-reduced-motion.

   Rules migrate here from inline styles / style.css as each section is
   converted; while a section still carries inline styles, its responsive
   overrides stay in style.css (they need !important to beat inline styles).
   ========================================================================== */

/* ----- ≤ 1100px ----- */
@media (max-width: 1100px) {
}

/* ----- ≤ 1024px ----- */
@media (max-width: 1024px) {
  /* Platforms strip */
  .plat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Platform cards */
  .g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- ≤ 960px: navigation switches to hamburger ----- */
@media (max-width: 960px) {
  .nav-links,
  .nav-login {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .mnav:not([hidden]) {
    display: block;
  }
  .nav-inner {
    justify-content: space-between;
  }
}

/* ----- ≤ 900px: tablet ----- */
@media (max-width: 900px) {
  /* Final CTA */
  .cta-box {
    padding: 64px 32px;
  }
  .cta-h2 {
    font-size: 40px;
  }

  /* How it works */
  .how-line {
    display: none;
  }

  /* Problem flow */
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow-arrow {
    height: 40px;
  }
  .flow-arrow svg {
    transform: rotate(90deg);
  }

  /* Pricing */
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Footer */
  .foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .foot-grid > :first-child {
    grid-column: 1/-1;
  }
  .foot-bottom {
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* Why (feature bento) */
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento > * {
    grid-column: auto;
  }

  /* SEO + AIO */
  .seo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .seo-mid {
    flex-direction: row;
    padding: 16px 0;
  }
  .seo-mid .seo-line {
    width: auto;
    height: 1px;
    flex-grow: 1;
  }
}

/* ----- ≤ 640px: phone ----- */
@media (max-width: 640px) {
  /* Navigation */
  .nav-inner {
    height: 60px;
    gap: var(--sp-3);
  }
  .nav-inner > a:first-child img {
    height: 24px;
  }
  .nav-cta {
    padding: 0 14px;
    font-size: 14px;
  }

  /* Final CTA */
  .sec-cta {
    padding-bottom: 48px;
  }
  .cta-box {
    padding: 40px 20px;
    border-radius: var(--r-xl);
  }
  .cta-h2 {
    font-size: 28px;
    line-height: 1.15;
  }

  /* SEO + AIO */
  .seo-card {
    padding: 22px;
  }

  /* Platforms strip */
  .plat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Platform cards */
  .g4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Footer */
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
}