/* ==========================================================================
   Adentra AI — responsive.css
   Mobile-first overrides at sm 640 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* ---------- sm ≥ 640px ---------- */
@media (min-width: 640px) {
  :root { --side-pad: 48px; }

  .hero__actions .btn,
  .closing .btn { width: auto; }

  .modules-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .card { padding: 32px; }
}

/* ---------- md ≥ 768px ---------- */
@media (min-width: 768px) {
  :root { --section-pad: 96px; }

  .h4 { font-size: 22px; }
  .body-lg { font-size: 20px; }
  .small { font-size: 15px; }

  /* How it works: horizontal steps with a route connector */
  .how__steps {
    flex-direction: row; gap: 48px;
  }
  .how__steps::before {
    left: 24px; right: 24px; top: 23px; bottom: auto;
    width: auto; height: 2px;
    background-image: linear-gradient(90deg, var(--sage-400) 50%, transparent 50%);
    background-size: 10px 2px;
  }
  .how__step { flex: 1; padding-left: 0; padding-top: 72px; }
  .how__num { top: 0; left: 0; }

  /* Roadmap: horizontal timeline */
  .roadmap__timeline { flex-direction: row; gap: 24px; margin-top: 48px; }
  .roadmap__timeline::before {
    left: 24px; right: 24px; top: 8px; bottom: auto;
    width: auto; height: 2px;
  }
  .roadmap__phase { flex: 1; padding-left: 0; padding-top: 40px; }
  .roadmap__node { top: 0; left: 0; }
  .roadmap__card { height: 100%; }

  /* Footer rows inline */
  .footer__rows { flex-direction: row; justify-content: space-between; align-items: center; }
  .footer__meta { flex-direction: row; justify-content: space-between; gap: 24px; }
}

/* ---------- lg ≥ 1024px ---------- */
@media (min-width: 1024px) {
  :root { --section-pad: 128px; }

  /* Type scale — desktop */
  .h1, .hero__title { font-size: 64px; }
  .h2 { font-size: 44px; }
  .h3 { font-size: 30px; }
  .eyebrow-chip { font-size: 13px; }
  body { font-size: 17px; }

  /* Nav: full links + CTA, no hamburger */
  .nav__links { display: flex; gap: 32px; }
  .nav__cta { display: inline-flex; }
  .nav__toggle, .mobile-menu { display: none; }

  /* Hero: asymmetric two-column, ~88vh */
  .hero {
    min-height: min(88vh, 900px);
    padding-top: calc(var(--nav-height) + 96px);
    padding-bottom: 96px;
  }
  .hero__inner {
    flex-direction: row; align-items: center; gap: 64px;
  }
  .hero__content { flex: 0 0 52%; }
  .hero__media { flex: 1; }
  .hero__overlay {
    background:
      linear-gradient(97deg, rgba(15,61,46,0.74) 0%, rgba(15,61,46,0.46) 44%, rgba(15,61,46,0.06) 72%),
      rgba(20,32,26,0.16);
  }

  /* Solution band: roomier */
  .solution .narrow-col { max-width: 820px; }
  .text-center-md { text-align: center; }

  /* Platform ecosystem at 80% width */
  .platform__figure { max-width: 80%; margin-left: auto; margin-right: auto; }
  .modules-grid { grid-template-columns: repeat(3, 1fr); }

  /* Capability rows: two columns, media/text alternating */
  .capabilities .container > * + * { margin-top: 128px; }
  .feature-row {
    flex-direction: row; align-items: center; gap: 64px;
  }
  .feature-row__text { flex: 0 0 calc(50% - 32px); }
  .feature-row__media { flex: 1; }
  .feature-row--flip { flex-direction: row-reverse; }
  .feature-row--wide .feature-row__text { flex-basis: calc(44% - 32px); }
  .feature-row__text .body-lg { margin-top: 20px; }

  /* Audience: 3-up grid */
  .audience-grid { grid-template-columns: repeat(3, 1fr); }

  /* Waitlist: pitch + form side by side */
  .waitlist__inner { flex-direction: row; align-items: center; gap: 64px; }
  .waitlist__pitch { flex: 1; }
  .waitlist__form-wrap { flex: 0 0 480px; }
  .form-card { padding: 40px; }

  /* Closing CTA: taller for impact */
  .closing { padding: 160px 0 128px; }
  .closing__title { font-size: 52px; }

  /* Sticky mobile CTA never shows on desktop */
  .sticky-cta { display: none; }

  .footer { padding-top: 96px; }
}

/* ---------- xl ≥ 1280px ---------- */
@media (min-width: 1280px) {
  .hero__content { flex-basis: 55%; }
}