/* The mascot is a separate, non-interactive figure outside the 3D phone tree. */
.page-home .hero-3d .hero-stage.has-mascot {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 34px 0;
  min-height: 0;
  padding: 24px 0 26px;
}
.hero-stage.has-mascot .hero-phone-rig {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: center;
  margin: 0 0 0 34px;
}
.hero-stage.has-mascot .hero-mascot {
  display: block;
  grid-area: 1 / 1;
  justify-self: end;
  align-self: end;
  position: relative;
  z-index: 4;
  width: 230px;
  max-width: 45%;
  margin: 0 0 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.hero-stage.has-mascot .hero-mascot picture { display: block; width: 100%; }
.hero-stage.has-mascot .hero-mascot img {
  display: block;
  width: 150%;
  max-width: none;
  height: auto;
  margin-left: -22.5%;
  object-fit: contain;
  pointer-events: none;
}
.page-home .hero-3d .hero-stage.has-mascot .hero-pedestal {
  grid-area: 1 / 1;
  justify-self: stretch;
  align-self: end;
  position: relative;
  z-index: -1;
  top: auto;
  right: auto;
  bottom: -19px;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 80px;
  margin: 0;
}
.hero-stage.has-mascot .hero-pedestal::after {
  inset: 22px 9% 18px;
  opacity: .8;
}
.page-home .hero-3d .hero-stage.has-mascot .hero-side {
  display: grid;
  grid-area: 2 / 1;
  grid-template-columns: minmax(90px, .65fr) minmax(0, 3fr);
  align-items: center;
  gap: 12px;
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  max-width: none;
  margin: -7px 0 0;
}
.hero-stage.has-mascot .hero-side .handwritten {
  margin: 0;
  font-size: .72rem;
  line-height: 1.45;
}
.hero-stage.has-mascot .hero-side .handwritten br { display: none; }
.hero-stage.has-mascot .hero-feature-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: none;
}
.hero-stage.has-mascot .hero-feature-card {
  align-items: flex-start;
  gap: 7px;
  height: 100%;
  padding: 10px 8px;
  border-radius: 12px;
}
.hero-stage.has-mascot .hero-feature-card .icon-circle { width: 25px; height: 28px; }
.hero-stage.has-mascot .hero-feature-card .icon { width: 16px; height: 16px; }
.hero-stage.has-mascot .hero-feature-card strong { font-size: .61rem; }
.hero-stage.has-mascot .hero-feature-card small { font-size: .54rem; }
.hero-stage.has-mascot .hero-side:not(:has(.handwritten)) { grid-template-columns: minmax(0, 1fr); }
.hero-stage.has-mascot .hero-side:has(.hero-feature-cards:empty):not(:has(.handwritten)) { display: none; }
.hero-stage.has-mascot .hero-aura { width: 480px; max-width: 100%; top: 60px; }
.hero-stage.has-mascot .hero-orbit { max-width: 90%; }
.hero-stage.has-mascot .chip-one { top: 55px; left: -8px; width: 49px; height: 49px; border-radius: 15px; }
.hero-stage.has-mascot .chip-one .icon { width: 28px; height: 28px; }
.hero-stage.has-mascot .chip-two { display: none; }

@media (min-width: 951px) and (max-width: 1100px) {
  .hero-stage.has-mascot .hero-phone-rig { margin-left: 27px; }
  .hero-stage.has-mascot .hero-mascot { width: 145px; max-width: 34%; }
  .page-home .hero-3d .hero-stage.has-mascot .hero-side { display: none; }
  .page-home .hero-3d .hero-stage.has-mascot { grid-template-rows: auto; }
}
@media (max-width: 950px) {
  .page-home .hero-3d .hero-grid:has(> .has-mascot) { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .page-home .hero-3d .hero-stage.has-mascot { grid-template-rows: auto; width: 100%; max-width: 600px; margin: 10px auto 0; padding: 24px 0 26px; }
  .hero-stage.has-mascot .hero-phone-rig { width: 264px; margin-left: 33px; }
  .hero-stage.has-mascot .hero-mascot { width: 218px; max-width: 43%; }
  .page-home .hero-3d .hero-stage.has-mascot .hero-side { display: none; }
}
@media (min-width: 601px) and (max-width: 700px) {
  .hero-stage.has-mascot .hero-mascot { width: 200px; }
}
@media (max-width: 600px) {
  .page-home .hero-3d .hero-stage.has-mascot {
    width: min(400px, calc(100% + 36px));
    max-width: none;
    justify-self: center;
    margin: 10px 0 0;
    padding: 20px 12px 26px;
    gap: 0;
    perspective: 1500px;
    perspective-origin: 47% 45%;
  }
  .page-home .hero-stage.has-mascot .hero-phone-rig {
    width: 164px;
    margin: 0 0 0 17px;
    transform: translateY(-7px) rotateX(4deg) rotateY(-5deg) rotateZ(1deg);
  }
  .page-home .hero-stage.has-mascot .hero-mascot { width: 135px; max-width: 40%; margin: 0 5px 0 0; }
  .page-home .hero-3d .hero-stage.has-mascot .hero-pedestal { height: 58px; bottom: -16px; }
  .page-home .hero-3d .hero-stage.has-mascot .phone-device { border-radius: 28px; }
  .page-home .hero-3d .hero-stage.has-mascot .phone-screen { min-height: 0; padding-bottom: 15px; border-radius: 20px; }
  .page-home .hero-stage.has-mascot .phone-device::after { border-radius: 20px; }
  .page-home .hero-stage.has-mascot .phone-device::before { width: 52px; height: 14px; left: calc(50% - 26px); }
  .page-home .hero-stage.has-mascot .phone-depth,
  .page-home .hero-stage.has-mascot .phone-back { border-radius: 28px; }
  .page-home .hero-stage.has-mascot .phone-back::before { border-radius: 23px; }
  .page-home .hero-stage.has-mascot .phone-turntable::before,
  .page-home .hero-stage.has-mascot .phone-turntable::after { top: 27px; bottom: 27px; }
  .page-home .hero-stage.has-mascot .phone-volume { top: 72px; height: 30px; }
  .page-home .hero-stage.has-mascot .phone-volume::after { top: 36px; height: 30px; }
  .page-home .hero-stage.has-mascot .phone-power { top: 104px; height: 42px; }
  .page-home .hero-stage.has-mascot .phone-content { padding: 4px 8px 0; }
  .page-home .hero-stage.has-mascot .phone-content .phone-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 2px;
    text-align: center;
    font-size: 7.7px;
  }
  .page-home .hero-stage.has-mascot .phone-content .phone-app img { width: 28px; height: 28px; border-radius: 8px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-category { display: flex; justify-content: center; }
  .page-home .hero-stage.has-mascot .phone-status { height: 27px; }
  .page-home .hero-stage.has-mascot .phone-top { padding: 7px 10px 9px; gap: 5px; }
  .page-home .hero-stage.has-mascot .phone-top > img { width: 20px; height: 20px; }
  .page-home .hero-stage.has-mascot .phone-top strong { font-size: 10px; }
  .page-home .hero-stage.has-mascot .phone-top-mark { display: none; }
  .page-home .hero-stage.has-mascot .phone-banner { display: none; }
  .page-home .hero-stage.has-mascot .phone-banner .phone-banner-kicker { font-size: 7px; letter-spacing: .06em; }
  .page-home .hero-stage.has-mascot .phone-banner strong { font-size: 16px; }
  .page-home .hero-stage.has-mascot .phone-banner .phone-banner-icon { width: 33px; height: 33px; right: 4px; bottom: 7px; opacity: .5; }
  .page-home .hero-stage.has-mascot .phone-banner-icon .icon { width: 33px; height: 33px; }
  .page-home .hero-stage.has-mascot .phone-banner > span:not(.phone-banner-kicker):not(.phone-banner-icon) { font-size: 8px; max-width: 125px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-guide { display: none; }
  .page-home .hero-stage.has-mascot .phone-guide-icon { width: 27px; height: 29px; }
  .page-home .hero-stage.has-mascot .phone-guide strong { font-size: 9px; }
  .page-home .hero-stage.has-mascot .phone-guide small { font-size: 7px; }
  .page-home .hero-stage.has-mascot .phone-guide > .icon { width: 12px; height: 12px; }
  .page-home .hero-stage.has-mascot .phone-section-heading h3 { font-size: 10px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-preview-label { display: none; }
  .page-home .hero-stage.has-mascot .phone-screen.has-custom-artwork { min-height: 238px; padding-bottom: 0; }
  .page-home .hero-stage.has-mascot .phone-custom-screen { max-height: 255px; }
  .page-home .hero-stage.has-mascot .phone-camera-island { grid-template-columns: repeat(2, 28px); grid-template-rows: repeat(2, 28px); width: 78px; height: 78px; padding: 7px; gap: 6px; top: 17px; left: 15px; border-radius: 18px; }
  .page-home .hero-stage.has-mascot .phone-camera-lens { width: 28px; height: 28px; }
  .page-home .hero-stage.has-mascot .phone-camera-flash { width: 14px; height: 14px; }
  .page-home .hero-stage.has-mascot .phone-back-brand { gap: 8px; left: 16px; right: 16px; }
  .page-home .hero-stage.has-mascot .phone-back-brand > img { width: 38px; height: 38px; }
  .page-home .hero-stage.has-mascot .phone-back-brand strong { font-size: 12px; }
  .page-home .hero-stage.has-mascot .phone-back-brand small { font-size: 5px; }
  .page-home .hero-stage.has-mascot .phone-back-line { bottom: 25px; }
  .page-home .hero-stage.has-mascot .hero-aura { top: 8px; left: 5%; width: 340px; max-width: 90%; }
  .page-home .hero-stage.has-mascot .hero-orbit { top: 35px; left: 5%; width: 330px; height: 270px; max-width: 86%; }
  .page-home .hero-stage.has-mascot .orbit-front { top: 110px; height: 120px; }
  .page-home .hero-stage.has-mascot .chip-one { top: 35px; left: 3px; width: 30px; height: 30px; border-radius: 10px; }
  .page-home .hero-stage.has-mascot .chip-one .icon { width: 21px; height: 21px; }
}
@media (max-width: 440px) {
  .page-home .hero-stage.has-mascot .hero-phone-rig { width: 154px; margin-left: 6px; }
  .page-home .hero-stage.has-mascot .hero-mascot { width: 128px; max-width: 40%; margin-right: 1px; }
}
@media (max-width: 390px) {
  .page-home .hero-3d .hero-stage.has-mascot { width: calc(100% + 28px); margin-inline: 0; }
}
@media (max-width: 359px) {
  .page-home .hero-3d .hero-stage.has-mascot { padding-inline: 8px; }
  .page-home .hero-stage.has-mascot .hero-phone-rig { width: 146px; margin-left: 1px; }
  .page-home .hero-stage.has-mascot .hero-mascot { width: 120px; max-width: 40%; margin-right: 0; }
  .page-home .hero-stage.has-mascot .phone-content { padding-inline: 8px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-app { font-size: 7.5px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-app img { width: 28px; height: 28px; }
  .page-home .hero-stage.has-mascot .phone-top strong { font-size: 10px; }
  .page-home .hero-stage.has-mascot .phone-banner strong { font-size: 15px; }
  .page-home .hero-stage.has-mascot .phone-banner .phone-banner-kicker { font-size: 6px; }
  .page-home .hero-stage.has-mascot .phone-banner > span:not(.phone-banner-kicker):not(.phone-banner-icon) { max-width: 109px; font-size: 7.5px; }
  .page-home .hero-stage.has-mascot .phone-content .phone-guide { gap: 5px; padding-inline: 5px; }
  .page-home .hero-stage.has-mascot .phone-guide-icon { width: 24px; height: 27px; }
}
@media print {
  .hero-stage.has-mascot .hero-mascot { display: none; }
}