/* Agrim marketing — responsive layer.
   Loaded after styles.css on every marketing page. Uses !important + attribute
   selectors because the section/grid/width values are authored as inline React
   styles (rendered into the element's style attribute), which a normal rule
   can't override. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Nav: comfortable desktop padding (moved off inline so it can flex). */
.mktnav { padding: 20px 48px; }

/* ── Tablet / phone ────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Nav → hamburger. */
  .mktnav-links, .mktnav-cta { display: none !important; }
  .mktnav-mobile { display: flex !important; }
  .mktnav-panel  { display: block !important; }
  .mktnav        { padding: 12px 18px !important; }

  /* Every multi-column grid collapses to a single column so nothing is
     squeezed into unreadable slivers. minmax(0,1fr) — NOT plain 1fr — so the
     track can shrink below its content's min-width; without this, a child with
     white-space:nowrap (e.g. the inbox-mock message lines) inflates the track
     and pushes the whole card past the viewport edge. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Grid/flex children may keep an implicit min-width:auto (= min-content) that
     defeats the shrink above — force them to be allowed to shrink. */
  [style*="grid-template-columns"] > * { min-width: 0 !important; }

  /* Sticky mockups (phone/copy columns) shouldn't stay pinned once the layout
     is a single column — that's what makes content slide under other content. */
  section [style*="position: sticky"] { position: static !important; }

  /* Fixed-width chat/phone/card mockups shrink to fit the screen, and
     center themselves once the surrounding grid is a single column. */
  [style*="width: 440px"],
  [style*="width: 380px"],
  [style*="width: 340px"] {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Pull the big desktop section padding in — both axes. The huge 120–160px
     vertical padding otherwise leaves enormous empty gaps between sections. */
  section, footer {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Footer → two columns per row instead of one long stack. (Placed after the
     grid-collapse rule above so it wins.) */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }

  /* Team photos → two per row on mobile (instead of one). */
  .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Announcement bar: drop the long descriptive clause on mobile — keep the
     headline + "See how it works" link only. */
  .ann-detail { display: none !important; }

  /* Final-CTA buttons stack one below the other, like the hero. */
  .cta-btn-row {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ── Small phones ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Cap oversized display headings so long words (e.g. "conversation")
     don't overflow — several headlines have a clamp() minimum that's still
     too large for a narrow screen. */
  h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  h2 { font-size: clamp(28px, 8vw, 44px) !important; }
  h3 { font-size: clamp(22px, 6vw, 32px) !important; }
}

@media (max-width: 560px) {
  section, footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  /* Footer inline row (copyright / legal) stacks instead of overflowing. */
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}