/* Smartphone-specific adjustments loaded after the TOP page stylesheet. */
@media (max-width: 900px) {
  .flow > .pill,
  .news > .pill {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    left: auto;
    translate: none;
  }

  .contact {
    height: auto;
    min-height: 0;
    padding: 72px 18px 0;
  }

  .contact-card {
    padding: 44px 12px 110px;
    margin: 0 auto -150px;
  }

  .contact-photo {
    width: min(74vw, 340px);
    height: 320px;
    margin: 0 auto;
  }

  .contact-play {
    display: none;
  }

  .contact-bubble {
    top: -78px;
  }

  .split {
    position: relative;
    overflow: visible;
  }

  .flow .flow-person {
    display: none;
  }

  .flow-person-mobile {
    z-index: 5;
    display: block;
    width: min(270px, 66vw);
    height: auto;
    margin: -155px auto -130px;
    filter: drop-shadow(14px 10px 18px rgba(0, 0, 0, 0.25));
    pointer-events: none;
  }

  .news {
    padding-top: 220px;
  }

  .hero {
    height: 790px;
    padding: 82px 18px 48px;
  }

  .hero-card {
    height: 660px;
    min-height: 660px;
  }

  .hero-word {
    left: 3%;
    top: 13%;
    width: 94%;
    height: 40%;
  }

  .hero-top-person {
    left: 62%;
    top: 2%;
    width: 17%;
    height: 31%;
  }

  .hero-cta {
    z-index: 5;
    top: 61%;
    bottom: auto;
    width: min(410px, calc(100% - 38px));
    max-width: none;
  }

  .hero-left {
    z-index: 3;
    left: 0;
    top: 73%;
    width: 31%;
    height: 29%;
  }

  .hero-right {
    z-index: 3;
    right: -1%;
    top: 73%;
    width: 40%;
    height: 27%;
  }

  .hero-card .decor {
    z-index: 2;
    display: block;
    opacity: 0.92;
  }

  .hero-card .decor-heart {
    left: 7%;
    top: 3%;
    width: 54px;
    height: 55px;
  }

  .hero-card .decor-heart img {
    width: 794.12%;
    height: 754.19%;
    left: 0;
    top: -166.48%;
  }

  .hero-card .decor-headphone {
    left: 31%;
    top: 4%;
    width: 72px;
    height: 58px;
  }

  .hero-card .decor-headphone img {
    width: 475.77%;
    height: 754.19%;
    left: -63%;
    top: -166.48%;
  }

  .hero-card .decor-like {
    left: 23%;
    right: auto;
    top: 13%;
    width: 38px;
    height: 40px;
  }

  .hero-card .decor-like img {
    width: 1636.36%;
    height: 2288.14%;
    left: -1475.66%;
    top: -1123.89%;
  }

  .hero-card .decor-phone {
    z-index: 2;
    left: 28%;
    top: 50%;
    width: 39px;
    height: 48px;
    transform: rotate(-6deg);
  }

  .hero-card .decor-phone img {
    width: 900%;
    height: 1250%;
    left: 0;
    top: -437.04%;
  }

  .hero-card .decor-camera {
    left: 59%;
    top: 52%;
    width: 65px;
    height: 43px;
  }

  .hero-card .decor-camera img {
    width: 590.16%;
    height: 1607.14%;
    left: -21.86%;
    top: -841.67%;
  }

  .hero-card .decor-sparkles {
    z-index: 4;
    left: 50%;
    top: 79%;
    width: 64px;
    height: 53px;
    transform: translateX(-50%);
  }

  .hero-card .decor-sparkles img {
    width: 495.41%;
    height: 978.26%;
    left: -395.41%;
    top: -479.71%;
  }

  .catch-desktop {
    display: none;
  }

  .catch-mobile {
    display: block;
    font-size: clamp(23px, 6.5vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .catch-mobile strong,
  .catch-mobile em {
    color: var(--hot);
    font-style: normal;
    font-weight: 700;
  }

  .about {
    padding: 72px 16px 34px;
    overflow: hidden;
  }

  .about-card {
    min-height: 790px;
    padding: 50px 20px 190px;
  }

  .about-card .section-title {
    font-size: clamp(70px, 20vw, 92px);
  }

  .catch {
    margin: 30px auto 32px;
  }

  .catch > img {
    display: none;
  }

  .about-copy {
    font-size: 14px;
    line-height: 1.75;
  }

  .about-copy p {
    margin: 0 0 16px;
  }

  .about-mic {
    left: 20px;
    top: 205px;
    width: 92px;
    height: 126px;
    transform: rotate(-8deg);
  }

  .about-heart {
    right: 10px;
    top: -48px;
    width: 96px;
    height: 86px;
    transform: rotate(8deg);
  }

  .about-headphone {
    z-index: 2;
    display: block;
    left: 50%;
    bottom: 24px;
    width: 126px;
    height: 132px;
    transform: translateX(-50%) rotate(-10deg);
  }

  .about-duo {
    right: 8px;
    bottom: 20px;
    width: 145px;
    height: 220px;
  }

  .about-purple {
    left: 8px;
    bottom: 20px;
    width: 135px;
    height: 205px;
  }
}

@media (max-width: 420px) {
  .hero {
    height: 735px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-card {
    height: 610px;
    min-height: 610px;
  }

  .hero-cta {
    font-size: 15px;
  }
}