/*
 * Page-title scale, ported from the live ridegrade.app build of 2026-10-01
 * (styles/hero-scale.7b075b452288.css). One clamp() token sizes the h1 of every
 * page hero the same way at each breakpoint, so no page title out-sizes another.
 * Loaded last on every page (src/lib/render.mjs), after platform-icons.css.
 */

:root {
  --rg-page-title-size: clamp(55px,7.7vw,73px);
}

body[data-page] #main .tr-hero-copy>h1,
body[data-page] #main .home-hero-lead>h1,
body[data-page] #main .features-hero-copy>h1,
body[data-page] #main .hero-copy>h1,
body[data-page] #main .faq-heading-copy>h1,
body[data-page] #main .account-intro-copy>h1,
body[data-page] #main .account-intro>h1,
body[data-page] #main #how-story .hs-intro>h1,
body[data-page="pricing"] #main .pricing-value-intro>h1 {
  font-size: var(--rg-page-title-size)!important;
  line-height: 1.06!important;
  text-wrap: balance;
}

@media (min-width:1181px) {
  :root {
    --rg-page-title-size: clamp(68px,6vw,86px);
  }
}

@media (min-width:981px) and (max-width:1180px) {
  :root {
    --rg-page-title-size: clamp(54px,5.6vw,66px);
  }
}

@media (max-width:620px) {
  :root {
    --rg-page-title-size: 65px;
  }
  body[data-page] #main .tr-hero-copy>h1,
body[data-page] #main .home-hero-lead>h1,
  body[data-page] #main .features-hero-copy>h1,
  body[data-page] #main .hero-copy>h1,
  body[data-page] #main .faq-heading-copy>h1,
  body[data-page] #main .account-intro-copy>h1,
  body[data-page] #main .account-intro>h1,
  body[data-page] #main #how-story .hs-intro>h1,
  body[data-page="pricing"] #main .pricing-value-intro>h1 {
    width: 100%;
    max-width: calc(100vw - 48px)!important;
    margin-inline: auto;
  }
  body[data-page="roadmap"] #main .hero-copy>h1 .headline-nowrap {
    white-space: normal;
  }
}

@media (max-width:430px) and (orientation:portrait) {
  :root {
    --rg-page-title-size: clamp(58px,15.2vw,64px);
  }
}

@media (max-width:360px) {
  :root {
    --rg-page-title-size: 58px;
  }
}