/* Approved mascot artwork, animated without video or an animation library. */
.how.haven-companions { padding-top:32px; padding-bottom:24px; }
.haven-companions .steps article { grid-template-columns:40px minmax(0,1fr); align-content:start; }
.haven-companions .steps .haven-mascot { grid-column:1/-1; grid-row:1; justify-self:center; width:160px; height:160px; margin-bottom:4px; position:relative; animation:haven-mascot-float var(--float-duration,4.8s) ease-in-out infinite; animation-play-state:paused; transform-origin:50% 75%; }
.haven-companions .steps article>span { grid-column:1; grid-row:2/4; }
.haven-companions .steps h3 { grid-column:2; grid-row:2; }
.haven-companions .steps p { grid-column:2; grid-row:3; }
.haven-mascot img { display:block; width:100%; height:auto; }
.haven-mascot-eye { position:absolute; left:var(--eye-left); top:var(--eye-top); width:var(--eye-width); height:var(--eye-height); background-image:var(--mascot-image); background-size:var(--crop-size); background-position:var(--blank-position); pointer-events:none; visibility:hidden; }
.haven-mascot[data-loaded="true"] .haven-mascot-eye { visibility:visible; }
.haven-mascot-eye::after { content:""; display:block; width:100%; height:100%; background-image:var(--mascot-image); background-size:var(--crop-size); background-position:var(--eye-position); transform-origin:50% 50%; animation:haven-mascot-blink var(--blink-duration,5.4s) ease-in-out infinite; animation-play-state:paused; }
.haven-companions .steps .haven-mascot[data-running="true"],.haven-mascot[data-running="true"] .haven-mascot-eye::after { animation-play-state:running; }
@keyframes haven-mascot-float { 0%,100% { transform:translateY(2px) rotate(-1.4deg); } 50% { transform:translateY(-5px) rotate(1.4deg); } }
@keyframes haven-mascot-blink { 0%,35%,41%,100% { transform:scaleY(1); } 37.5%,38.5% { transform:scaleY(.08); } }
@media(max-width:760px) {
 .haven-companions .steps { gap:22px; }
 .haven-companions .steps article { grid-template-columns:76px minmax(0,1fr); gap:5px 16px; }
 .haven-companions .steps .haven-mascot { grid-column:1; grid-row:1/4; width:88px; height:88px; align-self:center; margin:0; }
 .haven-companions .steps article>span { grid-column:2; grid-row:1; width:26px; height:26px; font-size:.8125rem; }
 .haven-companions .steps h3 { grid-column:2; grid-row:2; }
 .haven-companions .steps p { grid-column:2; grid-row:3; }
}
@media(prefers-reduced-motion:reduce) {
 .haven-companions .steps .haven-mascot,.haven-mascot-eye::after { animation:none; transform:none; }
 .haven-mascot-eye { display:none; }
}