/* Fixes for the Act page (/product) and its manifesto. Their markup is generated from presentations/common-sense-site-2026-10 by
   script/product_pull.rb, so what the page itself gets wrong lives here and survives a pull. This file is also bundled with the
   record's pages, so every selector is scoped to something only those pages have. */

/* phones, portrait: the demo tucks up under the headline; keep the headline's last line clear of it */
@media (max-width: 920px) {
  .hero h1 { padding-bottom: 18px; font-size: clamp(48px, min(19vw, 8.5svh), 140px); }
}
/* phones, landscape or any short window: no sticky headline with a demo growing over it, since there is no room for both.
   The headline, the demo and the line under it simply stack and the page scrolls. */
@media (max-width: 920px) and (max-height: 560px) {
  .hero .hero-grid { height: auto !important; padding-bottom: 24px; }
  .hero .stage { position: static; height: auto; display: block; }
  .hero h1 { position: static; opacity: 1 !important; padding: 20px 0 0; font-size: clamp(44px, 9vw, 84px); }
  .hero .phone { position: relative; left: auto; bottom: auto !important; transform: none; height: 280px !important; margin: 20px auto 0; }
  .hero .copy { position: static; margin: 20px -28px 0; }
}
@media (max-width: 920px) and (max-height: 560px) and (max-width: 560px) {
  .hero .copy { margin-left: -16px; margin-right: -16px; }
}

/* the page's small grey labels: the lightest greys were under 4.5:1 on its paper */
:root { --muted: #5a5f63; }