/* ==================================================================
   Guided — heading scale  (LOCAL PREVIEW ONLY)

   Loaded LAST. apple.css sets section h2 at clamp(40px, 5.2vw, 80px),
   which on a wide desktop renders at a full 80px — big enough that a
   28-character headline breaks to three lines inside a narrow column
   ("Mastery before momentum." was landing on three).

   Two changes:
     1. bring the ceiling down to 46px, so headlines sit on one or two
        lines at the widths they actually occupy
     2. `text-wrap: balance`, so when a headline does take two lines the
        break falls near the middle rather than leaving one orphan word

   The hero is untouched — it is an h1 over a photograph and is meant to
   be the largest thing on the page.
   ================================================================== */

section h2,
.gs-value-head,
.gs-subjects-head,
.gs-ret-head,
.gs-values-head,
.gs-reviews-head {
  font-size: clamp(28px, 3.1vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
  text-wrap: balance;
}

/* a headline reads badly past about twenty-odd characters a line, and
   balance only helps once the box is not forcing the break */
section h2,
.gs-value-head,
.gs-subjects-head,
.gs-values-head,
.gs-reviews-head {
  max-width: 22ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* the two left-aligned headlines keep their edge */
.gs-ret-head { max-width: 15ch; }

/* section body copy comes down with it */
section > div > p,
.gs-value-body,
.gs-subjects-body,
.gs-ret-lede,
.gs-values-stand,
.gs-reviews-sub {
  font-size: 19px !important;
  line-height: 1.55 !important;
  text-wrap: pretty;
}

/* sub-headings inside the columns were sized against the old scale */
.gs-stage-head { font-size: 23px !important; }
.gs-age-num    { font-size: 21px !important; }

@media (max-width: 1024px) {
  section h2,
  .gs-value-head,
  .gs-subjects-head,
  .gs-ret-head,
  .gs-values-head,
  .gs-reviews-head {
    font-size: clamp(26px, 6.4vw, 34px) !important;
    max-width: none;
  }

  section > div > p,
  .gs-value-body,
  .gs-subjects-body,
  .gs-ret-lede,
  .gs-values-stand { font-size: 17px !important; }
}