/* ==================================================================
   Guided — mobile rhythm  (LOCAL PREVIEW ONLY)

   Loaded LAST, after apple.css, so it can settle the vertical spacing
   of the middle of the page on a phone.

   The dead space had three causes:

     1. apple.css sets `.gs-reviews { padding: 130px 24px !important }`
        with no mobile override. Its own mobile rule is `section`
        (0,0,1), which loses to a class (0,1,0) at every width — so the
        testimonials kept full desktop padding on a phone: 260px of
        nothing around three cards.

     2. Adjacent sections each contribute 84px, so any two of them meet
        with 168px between the last line of one and the first of the next.

     3. In "Learning doesn't happen once." the three body paragraphs sat
        48px apart — a 26px grid gap plus a 22px margin on each <p> —
        which reads as three unrelated blocks rather than one argument.
   ================================================================== */

@media (max-width: 1024px) {

  /* 1 — the testimonials, back in proportion */
  .gs-reviews {
    padding: 56px 22px !important;
  }

  /* 2 — close the seam between the three middle sections */
  #research,
  .gs-retention {
    padding-top: 58px !important;
    padding-bottom: 50px !important;
  }

  /* 3 — one argument, not three blocks */
  .gs-retention p {
    margin-top: 0 !important;
  }

  /* the photographs, close enough to the heading to belong to it */
  .gs-ret {
    margin-bottom: 16px;
  }

  /* bigger cards, with the next one peeking to invite the swipe */
  .gs-ret-card {
    flex: 0 0 78vw;
    max-width: 330px;
    scroll-snap-align: center;
  }
}

@media (max-width: 640px) {
  .gs-reviews {
    padding: 48px 18px !important;
  }
}