/* Keep decorative illustration bounds local to their own visual stages. */
body { overflow-x: visible; }

.hero-stage,
.phone-visual {
  overflow: hidden;
}

.phone-visual {
  isolation: isolate;
}

.phone-visual > img {
  z-index: 0;
}

.phone-shell {
  position: relative;
  z-index: 1;
}

.composer .send-affordance {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  background: #9b8dff;
  color: #161426;
  font-size: 15px;
}

.phone-screen .phone-preview {
  color: #b7b0ff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .hero-art { width: min(105%, 440px); }
  .phone-visual > img { width: min(140%, 440px); }
}

@media (max-width: 390px) {
  .chat-area {
    width: 55%;
    min-width: 0;
  }

  .chat-bubble {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}