/* PopUsIn public type scale, 2026.
 *
 * The page was built with section headings at 50-60px and weight 700-720,
 * which made every band shout and left the H2s larger than the H1 above
 * them. Body copy sat at 15-15.5px underneath, so the ratio between the
 * shout and the substance was roughly four to one.
 *
 * This sets one scale for the whole public site. It is typography only -
 * no layout, no colour system, no component structure - so it can be
 * dropped or tuned without touching anything that renders.
 *
 * Loaded before the header, mega and hero sheets so those keep the last
 * word on their own components.
 */

/* ---- page headings ---- */
.public-site main section:not(.home-hero-2026) h1 {
  font-size: clamp(30px, 3.2vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: #0b1f3a;
}

.public-site main section:not(.home-hero-2026) h2 {
  font-size: clamp(24px, 2.5vw, 34px) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: #0f2138;
}

.public-site main section:not(.home-hero-2026) h3 {
  font-size: clamp(15.5px, 1.3vw, 17px) !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
  letter-spacing: -0.006em !important;
}

/* ---- body ---- */
.public-site main section:not(.home-hero-2026) p { font-size: 15.5px; line-height: 1.62; font-weight: 400; color: #52657e; }
.public-site main section:not(.home-hero-2026) > p,
.public-site main section:not(.home-hero-2026) > div > p { max-width: 68ch; }

/* ---- eyebrows: quiet labels, not second headlines ---- */
.public-site main section:not(.home-hero-2026) [class*="eyebrow"],
.public-site main section:not(.home-hero-2026) [class*="-kicker"],
.public-site main section:not(.home-hero-2026) [class*="section-label"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* ---- breathing room: 104px between bands was set for 60px headings ---- */
.public-site main section:not(.home-hero-2026) { padding-top: 76px; padding-bottom: 76px; }

@media (max-width: 720px) {
  .public-site main section:not(.home-hero-2026) { padding-top: 52px; padding-bottom: 52px; }
  .public-site main section:not(.home-hero-2026) p { font-size: 15px; }
}

/* Dark bands keep their own ink. */
.public-site main section[class*="conversion"] h2,
.public-site main section[class*="final-cta"] h2 { color: #ffffff; }