.module-page .mh-mascot-host { position: relative; }
.module-page .mh-mascot {
  --mh-mascot-size: 76px;
  position: relative;
  z-index: 8;
  display: block;
  width: var(--mh-mascot-size);
  height: var(--mh-mascot-size);
  margin: 18px 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: rotate(var(--mh-mascot-tilt, 0deg));
  transition: transform 220ms ease;
}
.module-page .mh-mascot:hover,
.module-page .mh-mascot:focus-visible,
.module-page .mh-mascot.is-speaking {
  transform: translateY(-6px) rotate(calc(var(--mh-mascot-tilt, 0deg) - 4deg)) scale(1.06);
}
.module-page .mh-mascot:focus-visible { outline: 3px solid var(--mh-coral); outline-offset: 3px; }
.module-page .mh-mascot-sprite {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.module-page .mh-mascot[data-mascot-index="1"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-01.png"); }
.module-page .mh-mascot[data-mascot-index="2"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-02.png"); }
.module-page .mh-mascot[data-mascot-index="3"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-03.png"); }
.module-page .mh-mascot[data-mascot-index="4"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-04.png"); }
.module-page .mh-mascot[data-mascot-index="5"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-05.png"); }
.module-page .mh-mascot[data-mascot-index="6"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-06.png"); }
.module-page .mh-mascot[data-mascot-index="7"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-07.png"); }
.module-page .mh-mascot[data-mascot-index="8"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-08.png"); }
.module-page .mh-mascot[data-mascot-index="9"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-09.png"); }
.module-page .mh-mascot[data-mascot-index="10"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-10.png"); }
.module-page .mh-mascot[data-mascot-index="11"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-11.png"); }
.module-page .mh-mascot[data-mascot-index="12"] .mh-mascot-sprite { background-image: url("/assets/mascot/mascot-12.png"); }
.module-page .mh-mascot[data-mascot-index="1"] { --mh-mascot-size: 160px; --mh-mascot-tilt: -7deg; }
.module-page .mh-mascot[data-mascot-index="2"] { --mh-mascot-size: 124px; --mh-mascot-tilt: 8deg; margin-right: auto; margin-left: 0; }
.module-page .mh-mascot[data-mascot-index="3"] { --mh-mascot-size: 150px; --mh-mascot-tilt: -4deg; }
.module-page .mh-mascot[data-mascot-index="4"] { --mh-mascot-size: 138px; --mh-mascot-tilt: 7deg; margin-right: auto; margin-left: 0; }
.module-page .mh-mascot[data-mascot-index="5"] { --mh-mascot-size: 100px; --mh-mascot-tilt: -9deg; }
.module-page .mh-mascot[data-mascot-index="6"] { --mh-mascot-size: 112px; --mh-mascot-tilt: 5deg; margin-inline: auto; }
.module-page .mh-mascot[data-mascot-index="7"] { --mh-mascot-size: 96px; --mh-mascot-tilt: -6deg; margin-right: auto; margin-left: 0; }
.module-page .mh-mascot[data-mascot-index="8"] { --mh-mascot-size: 144px; --mh-mascot-tilt: 9deg; }
.module-page .mh-mascot[data-mascot-index="9"] { --mh-mascot-size: 88px; --mh-mascot-tilt: -5deg; margin-inline: auto; }
.module-page .mh-mascot[data-mascot-index="10"] { --mh-mascot-size: 120px; --mh-mascot-tilt: 6deg; margin-right: auto; margin-left: 0; }
.module-page .mh-mascot[data-mascot-index="11"] { --mh-mascot-size: 148px; --mh-mascot-tilt: -8deg; margin-right: auto; margin-left: 0; }
.module-page .mh-mascot[data-mascot-index="12"] { --mh-mascot-size: 104px; --mh-mascot-tilt: 5deg; }
.module-page .mh-mascot[data-mascot-index="2"] .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="4"] .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="7"] .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="10"] .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="11"] .mh-mascot-bubble {
  right: auto;
  left: calc(100% + 10px);
  border-radius: 12px 12px 12px 0;
  transform: translate(-8px,-50%);
}
.module-page .mh-mascot[data-mascot-index="2"].is-speaking .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="4"].is-speaking .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="7"].is-speaking .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="10"].is-speaking .mh-mascot-bubble,
.module-page .mh-mascot[data-mascot-index="11"].is-speaking .mh-mascot-bubble { transform: translate(0,-50%); }
.module-page .mh-mascot-bubble {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  width: max-content;
  max-width: min(210px, 58vw);
  padding: 9px 12px;
  border: 1px solid #000;
  border-radius: 12px 12px 0 12px;
  background: #fff;
  color: #000;
  font: 700 12px/1.35 "Inter", sans-serif;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px,-50%);
  transition: opacity 160ms ease, transform 160ms ease;
}
.module-page .mh-mascot.is-speaking .mh-mascot-bubble {
  opacity: 1;
  transform: translate(0,-50%);
}
.module-page .mh-mascot-host.is-mascot-active.mh-step { box-shadow: 0 0 0 3px var(--mh-lime); }
.module-page .mh-mascot-host.is-mascot-in-view .mh-mascot { animation: mh-mascot-arrive 520ms cubic-bezier(.2,.85,.3,1) both; }
.module-page .mh-hero-grid > .mh-mascot {
  position: absolute;
  top: 6px;
  left: calc(50% - 8px);
  right: auto;
  bottom: auto;
  margin: 0;
}
.module-page .mh-process-intro .mh-mascot {
  grid-column: 2;
  justify-self: end;
  margin-top: 0;
}

@keyframes mh-mascot-arrive {
  from { opacity: 0; transform: translateY(18px) rotate(8deg) scale(.82); }
  to { opacity: 1; transform: rotate(var(--mh-mascot-tilt, 0deg)); }
}

@media (max-width: 767.98px) {
  .module-page .mh-mascot {
    --mh-mascot-size: 58px;
    margin-top: 12px;
  }
  .module-page .mh-hero-grid > .mh-mascot {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1;
    justify-self: end;
    margin: -18px 10px 0 0;
  }
  .module-page .mh-process-intro .mh-mascot { grid-column: auto; }
  .module-page .mh-mascot[data-mascot-index="1"] { --mh-mascot-size: 112px; }
  .module-page .mh-mascot[data-mascot-index="2"] { --mh-mascot-size: 72px; }
  .module-page .mh-mascot[data-mascot-index="3"] { --mh-mascot-size: 116px; }
  .module-page .mh-mascot[data-mascot-index="4"] { --mh-mascot-size: 96px; }
  .module-page .mh-mascot[data-mascot-index="5"] { --mh-mascot-size: 78px; }
  .module-page .mh-mascot[data-mascot-index="6"] { --mh-mascot-size: 86px; }
  .module-page .mh-mascot[data-mascot-index="7"] { --mh-mascot-size: 74px; }
  .module-page .mh-mascot[data-mascot-index="8"] { --mh-mascot-size: 98px; }
  .module-page .mh-mascot[data-mascot-index="9"] { --mh-mascot-size: 68px; }
  .module-page .mh-mascot[data-mascot-index="10"] { --mh-mascot-size: 88px; }
  .module-page .mh-mascot[data-mascot-index="11"] { --mh-mascot-size: 102px; }
  .module-page .mh-mascot[data-mascot-index="12"] { --mh-mascot-size: 76px; }
  .module-page .mh-mascot-bubble { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .module-page .mh-mascot,
  .module-page .mh-mascot-bubble { transition-duration: .01ms; }
  .module-page .mh-mascot-host.is-mascot-in-view .mh-mascot { animation: none; }
}