.hero-demo-button {
  font-size: 28px;
  letter-spacing: -.035em;
}

.apply-button {
  display: flex;
  width: min(760px, 100%);
  min-height: 92px;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  padding: 0 34px;
  border: 0;
  border-radius: 5px;
  background: var(--green);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-decoration: none;
}

.journey-stage {
  min-height: 680px;
  background: #f5f7f6;
}

.journey {
  height: 620px;
}

.journey .phone {
  left: 42px;
  top: 44px;
  z-index: 4;
  width: 310px;
  border-width: 6px;
  border-radius: 27px;
  box-shadow: 0 10px 28px #00000017;
  transform: scale(.88);
  transform-origin: top left;
}

.journey .talk-body {
  min-height: 390px;
}

.journey .mini-store {
  right: 34px;
  top: 210px;
  z-index: 2;
  width: 400px;
  border-color: #adb4b7;
  box-shadow: 0 24px 55px #00000029;
  transform: translateY(24px);
}

.journey .mini-detail {
  min-height: 310px;
}

.journey .buy-button {
  height: 48px;
  font-size: 14px;
}

.motion-stage.play .journey .mini-store {
  animation: storeEnter .55s 3.1s forwards;
}

@media (max-width: 850px) {
  .journey-stage {
    min-height: 800px;
  }

  .journey {
    height: 750px;
  }

  .journey .phone {
    left: 50%;
    top: 26px;
    width: 300px;
    transform: translateX(-50%) scale(.86);
    transform-origin: top center;
  }

  .journey .mini-store {
    left: 50%;
    right: auto;
    top: 390px;
    width: min(410px, 90%);
    transform: translateX(-50%) translateY(22px);
  }

  .motion-stage.play .journey .mini-store {
    animation: mobileStoreEnter .55s 3.1s forwards;
  }
}

@media (max-width: 520px) {
  .hero-demo-button {
    font-size: 24px;
  }

  .apply-button {
    min-height: 76px;
    font-size: 19px;
  }

  .journey-stage {
    min-height: 700px;
    padding: 0;
  }

  .journey {
    width: 100%;
    height: 660px;
  }

  .journey .phone {
    top: 12px;
    width: 280px;
    border-width: 5px;
    border-radius: 24px;
    transform: translateX(-50%) scale(.78);
  }

  .journey .talk-body {
    min-height: 360px;
  }

  .journey .mini-store {
    top: 325px;
    width: calc(100% - 24px);
    box-shadow: 0 18px 38px #0000002b;
  }

  .journey .mini-detail {
    grid-template-columns: 38% 62%;
    min-height: 270px;
  }

  .journey .mini-copy {
    padding: 18px 14px;
  }

  .journey .stock-option {
    margin: 14px 0 9px;
  }

  .journey .buy-button {
    height: 46px;
  }
}

@keyframes mobileStoreEnter {
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}