/* v0.25.4 sitewide mobile hero typography correction.
   Real-device Samsung QA showed technically valid H1s still consuming too much
   of the first viewport. This layer loads after every page stylesheet so all
   coded routes share one mobile H1 scale and first-section rhythm. */
@media (max-width: 820px) {
  .hod-coded main > section:first-child {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }

  .hod-coded main > section:first-child .hod-eyebrow {
    margin-bottom: 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .115em !important;
  }

  .hod-coded main h1 {
    font-size: clamp(32px, 5vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    text-wrap: pretty !important;
  }

  .hod-coded main > section:first-child p[class*="hero-lede"],
  .hod-coded main > section:first-child .hod-hero-lede {
    margin-top: 16px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hod-coded main > section:first-child [class*="actions"] {
    margin-top: 22px !important;
  }
}

@media (max-width: 520px) {
  .hod-coded main > section:first-child {
    padding-top: 28px !important;
    padding-bottom: 34px !important;
  }

  .hod-coded main h1 {
    font-size: clamp(29px, 8vw, 32px) !important;
    line-height: 1.045 !important;
  }

  /* Keep the homepage's intentional three-line composition, but at the same
     restrained scale as every other coded route. */
  .hod-coded .hod-home-hero-title {
    font-size: clamp(29px, 8vw, 32px) !important;
    line-height: 1.045 !important;
  }
}

@media (max-width: 340px) {
  .hod-coded main h1,
  .hod-coded .hod-home-hero-title {
    font-size: 27px !important;
  }
}

@media (max-width: 300px) {
  .hod-coded main h1,
  .hod-coded .hod-home-hero-title {
    font-size: 25px !important;
  }
}