/* ============================================================
   v7_39 — Responsive QA pass (2026-06-10)
   Purpose: remove horizontal overflow on index.html and books.html.
   Layout/spacing only. No content, pricing, spec, or claim changes.
   All selectors are page-scoped; no effect on other pages.
   ============================================================ */

/* INDEX — #uno two-column block collapses before its 500px+620px
   minimum columns can exceed the viewport (was overflowing <~1200px). */
@media (max-width: 1200px) {
  #uno .wrap.two-col {
    grid-template-columns: 1fr !important;
    gap: clamp(1.5rem, 4vw, 2.75rem) !important;
    align-items: start !important;
  }
}

/* INDEX — "Core pathway" heading grid must fill its container
   instead of sizing a max-content column wider than the screen. */
.core-pathway-stage {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 100% !important;
}
.core-pathway-stage > * { max-width: 100% !important; overflow-wrap: break-word; }

/* BOOKS — author panel must be a single column on small screens so the
   copy and "About the author" eyebrow stay on-screen (was forced to 2-col). */
@media (max-width: 760px) {
  .author-panel {
    grid-template-columns: 1fr !important;
    gap: clamp(1.5rem, 5vw, 2.5rem) !important;
  }
  .author-copy,
  .author-copy .eyebrow,
  .author-rhythm-title { max-width: 100% !important; }
}

/* INDEX — hero copy block is sized to ~100vw on phones, 14px wider than its
   padded wrap, so it overflowed at <=390px. Let it shrink to the wrap. */
@media (max-width: 560px) {
  #top .hero-copy {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #top .hero-copy h1,
  #top .hero-copy .hero-wide-header,
  #top .hero-copy .hero-tagline-lockup,
  #top .hero-copy .hero-tagline-line {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #top .hero-copy h1 { overflow-wrap: break-word; }
}

/* INDEX — hero .button-row grid column sizes to the longest (nowrap) button
   label (~390px), overflowing its container on phones. Fill the row and wrap. */
@media (max-width: 560px) {
  #top .button-row { grid-template-columns: minmax(0, 1fr) !important; }
  #top .button-row .button {
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}