/* ============================================================
   ClearStride Tools — Responsive
   Breakpoints:
     sm:  640px
     md:  768px
     lg:  960px
     xl:  1140px
   ============================================================ */

/* ── Large (≤1140px) ── */
@media (max-width: 1140px) {
  :root { --max-width: 960px; }
}

/* ── Desktop (≤960px) ── */
@media (max-width: 960px) {
  :root {
    --section-padding: 72px;
  }

  /* Nav: hide links, show toggle */
  .nav__links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: rgba(14, 23, 42, 0.99);
    border-bottom: 1px solid var(--border-dark);
    flex-direction: column;
    padding: var(--space-4) var(--space-6) var(--space-6);
    gap: var(--space-1);
  }
  .nav__links.is-open { display: flex; }
  .nav__link { width: 100%; padding: var(--space-3) var(--space-4); }
  .nav__cta { margin-top: var(--space-2); text-align: center; justify-content: center; }
  .nav__toggle { display: flex; }

  /* Products */
  .products__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Workflow */
  .workflow__grid { grid-template-columns: 1fr; }

  /* Rally */
  .rally__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }

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

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
  :root { --section-padding: 60px; }

  .hero__logo img { height: 44px; }

  .product-strip {
    height: auto;
    padding: var(--space-3) var(--space-6);
    gap: var(--space-4);
  }

  .rally {
    padding: var(--space-10) var(--space-6);
  }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  :root {
    --section-padding: 52px;
  }

  section { padding: var(--section-padding) var(--space-6); }
  .container { padding: 0 var(--space-6); }
  .container--narrow { padding: 0 var(--space-6); }

  .nav { padding: 0 var(--space-6); }

  .hero { padding: calc(var(--nav-height) + 40px) var(--space-6) var(--space-16); }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  .product-strip { display: none; } /* Too cramped on small mobile */

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; text-align: center; }

  .rally__inner { padding: var(--space-6); }
  .rally__actions { flex-direction: column; align-items: flex-start; }

  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

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

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Print ── */
@media print {
  .nav, .hero__scroll-hint, .product-strip { display: none; }
  .hero { min-height: auto; padding: var(--space-8) 0; }
  body { background: white; color: black; }
  .workflow, .cta-section { background: #f5f5f5 !important; color: black !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; }
}