/* ============================================================================
   Section headings — startup-program page

   One recipe for every section <h2> on the page. Lifted verbatim from
   anchorbrowser.io's "Secure & Reliable by design" heading (#Humanized), which
   is a classless <h2> inside .home-stages-step_h2: its type is site.css's base
   h2 rules, and its wrapper contributes the 52ch measure and the 479px
   centring. Restated here rather than left to the base h2 because three of the
   four headings carry classes of their own and would otherwise each own a
   second copy of these numbers — which is exactly how they drifted apart.

   Loaded AFTER bento.css, how.css and who.css so this file is the only owner of
   section-heading type. The section sheets keep their layout: margins, the
   gutter .hw-title--land hands out, the --mid centring.

   Ordering matters: the @media blocks live at the very END of this file. Rules
   appended after them would silently win over the breakpoint overrides.
   ========================================================================== */

.sp-bento-title,          /* What you get     — bento.css */
.hw-title,                /* How it works     — how.css   */
.wf-title,                /* Who this is for  — who.css   */
.sp-title {               /* Apply — bare Webflow h2, carries this class alone */
  max-width: 52ch;
  font-family: var(--font--saans);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--semantic--c-foreground);
}

/* ============================================================================
   Breakpoints. The same three steps site.css gives the base h2, including the
   step UP at 991 — a tablet heading on the live site is larger than a desktop
   one, and matching that is the point of this file.
   ========================================================================== */

@media screen and (max-width: 991px) {
  .sp-bento-title,
  .hw-title,
  .wf-title,
  .sp-title {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-bento-title,
  .hw-title,
  .wf-title,
  .sp-title {
    font-size: 1.5rem;
    line-height: 1.25;
  }
}

@media screen and (max-width: 479px) {
  .sp-bento-title,
  .hw-title,
  .wf-title,
  .sp-title {
    text-align: center;
  }
}