/* Optional layer, loaded after brand.css and motion.css. No JS = no hiding. */
.mh-pending,.mh-wait{ opacity: 0; }
.mh-tagline{ position: relative; }
.mh-sheen{
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(110deg, #dbe5ff, #fff 50%, #dbe5ff);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}
.hero .mh-facts{ position: relative; border-top-color: transparent; }
.mh-facts::before{
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: rgba(255,255,255,.25);
  transform-origin: left;
}
.mh-facts.mh-line-in::before{ animation: mh-line 700ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes mh-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-cta .mh-ring-host{ position: relative; }
.mh-ring-host::after{
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.mh-ring-host.mh-ring::after{ animation: mh-ring 1200ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes mh-ring {
  0% { opacity: 0; transform: scale(1); }
  15% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.13,1.5); }
}

.wn.mh-number{ position: relative; }
.mh-number-fill{ position: absolute; inset: 0; color: var(--pine, #19251f); -webkit-text-stroke: 0; opacity: 0; pointer-events: none; }
@media (hover: hover) { .why article:hover .mh-number-fill{ opacity: 1; } }
/* Pause hero animations while the page or hero is not visible. */
.mh-hero-paused *,.mh-hero-paused *::before,.mh-hero-paused *::after{ animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .mh-pending,.mh-wait{ opacity: 1 !important; }
  .mh-sheen,.mh-number-fill{ display: none; }
  .mh-facts::before{ animation: none !important; transform: none; }
  .mh-ring-host::after{ animation: none !important; opacity: 0; }
  
}

/* Hero entrance: CSS only, ends fully visible. */
@keyframes mhIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .hero .kicker .pill{animation:mhIn .5s cubic-bezier(.2,.8,.2,1) both}
  .hero .kicker .pill:nth-child(2){animation-delay:.06s}.hero .kicker .pill:nth-child(3){animation-delay:.12s}
  .hero .tagline{animation:mhIn .55s cubic-bezier(.2,.8,.2,1) .3s both}
  .hero .lead{animation:mhIn .55s cubic-bezier(.2,.8,.2,1) .4s both}
  .hero .hero-cta{animation:mhIn .55s cubic-bezier(.2,.8,.2,1) .5s both}
  .hero .facts > div{animation:mhIn .55s cubic-bezier(.2,.8,.2,1) .62s both}
  .hero .facts > div:nth-child(2){animation-delay:.7s}.hero .facts > div:nth-child(3){animation-delay:.78s}
}