/* ─── Mobile / responsive overrides ─────────────────────────────────
   The components ship desktop-first inline styles. This stylesheet narrows
   them on smaller viewports. Inline styles win specificity, so we rely on
   element targeting + !important where needed.

   Breakpoints:
     · ≤ 900px — tablet & phone (single column, padding shrink)
     · ≤ 600px — phone (typography scale, KPI grid 2×2, modal full)
*/

/* ============ ≤ 900px ============ */
@media (max-width: 900px) {

  /* ── Hero outer padding ── */
  .hero-inner {
    padding: 32px 24px 64px !important;
  }

  /* ── Nav (centered Amos in hero, sticky bar) ── */
  .hero-nav,
  .sticky-bar-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── TrustStrip: 4-up → 2×2 with thinner padding ── */
  .trust-strip {
    grid-template-columns: 1fr 1fr !important;
    padding: 28px 24px !important;
  }
  .trust-strip > div {
    padding: 14px 16px !important;
    border-left: none !important;
  }
  /* re-add divider on the right column only */
  .trust-strip > div:nth-child(2n) {
    border-left: 1px solid var(--border-soft) !important;
  }
  /* horizontal divider between rows */
  .trust-strip > div:nth-child(n+3) {
    border-top: 1px solid var(--border-soft) !important;
  }
  /* shrink KPI numbers */
  .trust-strip .kpi {
    font-size: 32px !important;
  }
  .trust-strip .kpi-unit {
    font-size: 14px !important;
  }

  /* ── Pillars (3-up → stacked) ── */
  .pillars-section {
    padding: 72px 24px 64px !important;
  }
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }
  .pillars-grid > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 28px 0 !important;
  }
  .pillars-grid > div:last-child { border-bottom: none !important; }

  /* ── Audience (3-up → stacked) ── */
  .audience-section {
    padding: 48px 24px 72px !important;
  }
  .audience-grid {
    grid-template-columns: 1fr !important;
  }
  .audience-grid > div {
    border-left: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 24px 0 !important;
  }
  .audience-grid > div:last-child { border-bottom: none !important; }

  /* ── Founder line ── */
  .founder-section {
    padding: 80px 24px 80px !important;
  }

  /* ── Footer ── */
  .footer-row {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-section {
    padding: 48px 24px 24px !important;
  }
  .footer-legal {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ============ ≤ 600px ============ */
@media (max-width: 600px) {

  /* ── Hero typography ── */
  .hero-h1 {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.05 !important;
  }
  .hero-lede {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
  }
  .hero-inner {
    padding: 16px 20px 56px !important;
  }
  .hero-cta {
    padding: 13px 22px !important;
    font-size: 15px !important;
  }

  /* ── Nav ── */
  .hero-nav {
    padding: 20px !important;
  }
  .sticky-bar-inner {
    padding: 12px 20px !important;
  }
  .sticky-bar-cta {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .sticky-bar-cta .arrow { display: none !important; }

  /* ── TrustStrip: collapse to 1 column ── */
  .trust-strip {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
  .trust-strip > div {
    border-left: none !important;
    border-top: 1px solid var(--border-soft) !important;
    padding: 16px 0 !important;
  }
  .trust-strip > div:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }

  /* ── Pillars / Audience eyebrows + headlines smaller ── */
  .pillars-h2,
  .audience-h2 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
  }
  .founder-quote {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.18 !important;
  }

  /* ── Form rows: label-input grid → stacked on phone ── */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* ── Modal — fill viewport on phone ── */
  .modal-card {
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .waitlist-dialog-body {
    padding: 24px 20px 32px 20px !important;
  }
  .modal-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ─── Viewport + safe areas (iOS / notched), all breakpoints ─────────
   Fills dynamic viewport height, extends hero paint into safe areas,
   keeps html/body chrome matching hero for overscroll. */
html {
  height: 100%;
  height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  background-color: var(--oat);
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html.inverse-page {
  background-color: var(--cacao);
}
body {
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: 100lvh;
  background-color: var(--oat);
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
body.inverse-page {
  background-color: var(--cacao);
  color: var(--linen);
}
.amos-hero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  min-height: 100lvh !important;
  min-height: -webkit-fill-available !important;
}

body.inverse-page ::selection {
  background: var(--saffron);
  color: var(--cacao);
}