/* Rotating hero headline. See headline.js. */
.hl-eyebrow { font-size: 17px; font-weight: 700; opacity: .6; margin: 0 0 6px; }
.hl-h1 { position: relative; }
.hl-h1 .hl { display: none; font-weight: 700; }
/* Once the script has built the headline, the static sentence stays for search
   engines and screen readers but is hidden visually. */
.hl-h1.hl-ready .hl { display: block; }
.hl-h1.hl-ready .hl-static {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hl .hl-row { display: block; white-space: nowrap; }
.hl .hl-half { display: inline-block; vertical-align: top; white-space: nowrap; }
.hl.hl-stacked .hl-half { display: block; }
.hl .hl-part { display: inline-block; position: relative; vertical-align: top; }
.hl .hl-clip { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.hl .hl-word { position: absolute; left: 0; right: 0; top: 0; white-space: pre;
               transition: transform .35s ease; transform: translateY(0); }
.hl .hl-before .hl-word { text-align: end; }
.hl .hl-slot .hl-word { text-align: center; color: #70A030; } /* brand green at 3.1:1 (large text) */
.hl .hl-after .hl-word { text-align: start; }
.hl .hl-word.hl-in { transform: translateY(100%); transition: none; }
.hl .hl-word.hl-out { transform: translateY(-100%); }
/* Gray words and the underline take the page's own text colour (light or dark theme). */
.hl .hl-underline { position: absolute; left: 0; right: 0; background: currentColor; border-radius: 2px; }
.hl .hl-probe { position: absolute; visibility: hidden; white-space: nowrap; }
.hl .hl-mark { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
@media (max-width: 768px) { .hl-h1 .hl { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .hl .hl-word { transition: none; } }