/* Mobile hero treatment for the product/blog pages.
   Loaded site-wide from app/(site)/layout.tsx; every selector below belongs to one
   of those five heroes, so nothing else is affected.

   On desktop each hero is a rounded, coloured panel inset 1rem from the page edge.
   Phones repeat that inset on a much narrower screen, which leaves the hero
   fighting the floating nav for room. Below 768px the hero goes full-bleed: no
   inset, no rounding, and it runs to the very top so the nav floats over it.
   The nav itself is unchanged; the hero simply gains the breathing room. */
@media screen and (max-width: 767px) {
  .section_blog-hero-2,
  .secion_blog-details-hero,
  .section_cards-hero,
  .section_direct-account-hero,
  .section_usd-account-hero {
    padding: 0;
  }
  .blog-hero_inner,
  .blog-details_hero-inner,
  .card-hero_inner,
  .direct-account-hero_inner,
  .usd-account-hero_inner {
    border-radius: 0;
  }
  /* Global Accounts hero subtext: the authored line break splits one thought in
     two on a narrow column, where the text already wraps. Let it run on. */
  br.ga-hero-sub-break {
    display: none;
  }
}