/* Hero pixels mockup: the bottom of the gray hero block breaks into pixels, and the pixels
   gather into the benefits. The title's audience word rotates with the same beat. */

/* Rotating word: clipped slide, no blur. "play." stays the only blue word. */
.hero__title { max-width: none; }
.rot { display: inline-block; vertical-align: top; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.rot__word { display: inline-block; }
.rot__ch { display: inline-block; transition: transform 640ms var(--ease); transition-delay: calc(var(--n) * 22ms); }
.rot__word.is-out .rot__ch { transform: translateY(-105%); transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1); transition-delay: 0ms; }
.rot__word.is-in .rot__ch { transform: translateY(105%); transition: none; }
@media (max-width: 700px) { .hero__br { display: none; } .rot { display: block; } }

/* The stage is the bottom band of the gray block itself, edge to edge. */
.hero.block { padding-bottom: 0; }
.hero__stage { position: relative; height: clamp(150px, 17vw, 260px); margin-top: clamp(40px, 5vw, 64px); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Problem, scroll-driven: the block stays put while four scroll steps move members from one
   stage to the next. The grids keep their layout; travelling members are drawn on a canvas. */
.problem-pin { position: relative; }
.problem-pin > .problem { position: sticky; }
.problem__steps { position: relative; }
.problem__canvas { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); pointer-events: none; }
.problem.is-scrub .dot.is-on { background: var(--line); }
.problem.is-scrub .problem__n, .problem.is-scrub .problem__label { transition: opacity 300ms var(--ease); }
.problem.is-scrub .problem__step:not(.is-current) .problem__n,
.problem.is-scrub .problem__step:not(.is-current) .problem__label { opacity: 0.45; }