/* Original App screenshots, with reduced perspective and a soft lavender halo. */
.hero-art {
  height: 100%;
  min-height: 0;
  margin-left: 0;
  align-self: stretch;
  justify-content: center;
  opacity: 1;
}
.phone-stage {
  position: relative;
  width: min(100%, 580px);
  height: min(100%, 660px);
  isolation: isolate;
  min-height: 0;
  perspective: 1200px;
}
.product-phone {
  position: absolute;
  box-sizing: content-box;
  height: calc(90% - 14px);
  padding: 7px;
  border-radius: 32px;
  background: linear-gradient(145deg, #4a454c, #26232b);
  box-shadow: 0 24px 42px -18px rgba(107, 65, 116, .34), inset 0 0 0 2px rgba(255,255,255,.23);
}
.product-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
.product-phone-screen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.product-phone-left {
  aspect-ratio: 459 / 1024;
  left: 6%;
  top: 7%;
  transform: rotateZ(-10deg);
  z-index: 1;
}
.product-phone-right {
  aspect-ratio: 481 / 1024;
  right: 6%;
  top: 2%;
  transform: rotateZ(10deg);
  z-index: 2;
}
@media (max-width: 760px) {
  .hero {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto auto auto;
    align-content: center;
    column-gap: 0;
    row-gap: 0;
    text-align: left;
    padding: 12px 0;
  }
  .hero-copy { display: contents; }
  .hero .eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 16px;
    font-size: 9.5px;
    letter-spacing: 1px;
  }
  .hero h1 {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    font-size: 32px;
    line-height: 1.22;
    letter-spacing: -1px;
  }
  .hero .hero-description {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-top: 17px;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .2px;
  }
  .hero-art {
    grid-column: 2;
    grid-row: 2 / 4;
    position: relative;
    inset: auto;
    z-index: auto;
    opacity: 1;
    height: 265px;
    width: 100%;
    margin: 0;
    align-self: center;
    justify-content: flex-end;
    overflow: visible;
  }
  .phone-stage { width: auto; height: 100%; aspect-ratio: 580 / 627; flex: none; align-self: flex-end; perspective: 700px; }
  .product-phone { height: calc(90% - 6px); padding: 3px; border-radius: 14px; box-shadow: 0 10px 17px -8px rgba(107,65,116,.3), inset 0 0 0 1px rgba(255,255,255,.25); }
  .product-phone-screen { border-radius: 11px; }
  .product-phone-left { left: 5%; aspect-ratio: 459 / 1024; transform: rotateZ(-8deg); }
  .product-phone-right { right: 5%; aspect-ratio: 481 / 1024; transform: rotateZ(8deg); }
  .hero .download-area {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-content: center;
    margin-top: 26px;
  }
  .hero .age-note {
    grid-column: 1 / -1;
    grid-row: 5;
    text-align: center;
    margin-top: 13px;
  }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 29px; }
  .hero .hero-description { font-size: 11px; }
  .hero-art { height: 240px; }
  .hero .eyebrow { font-size: 9px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .hero { padding: 8px 0; }
  .hero-art { height: 205px; }
  .hero h1 { font-size: 30px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero .hero-description { margin-top: 12px; }
  .hero .download-area { margin-top: 20px; }
  .hero .age-note { margin-top: 8px; }
}

@media(min-width:761px) and (min-height:820px){.product-phone-left{left:5%}.product-phone-right{right:5%}}

@media(max-width:380px) and (max-height:720px){.hero h1{font-size:29px}}
@media(min-width:761px) and (max-width:1100px) and (min-height:501px){.hero h1{font-size:clamp(48px,7vw,64px)}}

/* The glow belongs to the page, so there is no visible rectangular image background. */
.phone-stage::before {
  content: "";
  position: absolute;
  inset: -3% -10% -1%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(174, 140, 230, .38) 0%, rgba(206, 175, 244, .26) 30%, rgba(239, 209, 246, .12) 48%, transparent 65%);
  border-radius: 50%;
}
.product-phone {
  box-shadow: 0 24px 42px -20px rgba(91, 63, 126, .32), inset 0 0 0 2px rgba(255,255,255,.23);
}
@media (min-width: 761px) {
  .hero { grid-template-columns: 1fr 1.12fr; }
}
@media (max-width: 760px) {
  .phone-stage::before { inset: -8% 0; }
  .product-phone { box-shadow: 0 12px 22px -12px rgba(91,63,126,.32), inset 0 0 0 1px rgba(255,255,255,.25); }
}

/* Separate the silhouettes without changing either phone's rotation. */
.product-phone {
  background: linear-gradient(115deg, #827783 0%, #403944 12%, #29242e 72%, #635969 100%);
  box-shadow: 3px 4px 0 #453c4c, 7px 9px 0 -2px #6b5c74,
    14px 26px 30px -14px rgba(67, 38, 87, .42),
    0 36px 56px -24px rgba(104, 66, 140, .36),
    inset 1px 1px 0 2px rgba(255,255,255,.32);
}
.product-phone-screen { box-shadow: 0 0 0 1px #18141c, inset 0 0 0 1px rgba(255,255,255,.35); }
@media (min-width: 761px) {
  .product-phone-left { left: 1%; }
  .product-phone-right { right: 6%; }
}
@media (max-width: 760px) {
  .product-phone-left { left: -16%; }
  .product-phone-right { right: 1%; }
  .product-phone {
    box-shadow: 1px 2px 0 #453c4c, 3px 4px 0 -1px #6b5c74,
      5px 12px 16px -7px rgba(67,38,87,.42),
      0 18px 28px -13px rgba(104,66,140,.32),
      inset 1px 1px 0 1px rgba(255,255,255,.32);
  }
}

/* Match the small avatar to the dimmed call screen. */
.product-phone-right .product-phone-screen { position: relative; }
.product-phone-right .product-phone-screen::after {
  content: "";
  position: absolute;
  left: 32.7%;
  top: 6.05%;
  width: 7.8%;
  height: 3.65%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  pointer-events: none;
}
@media (min-width: 761px) {
  .product-phone-left { left: -1%; }
  .product-phone-right { right: 4%; }
}
@media (max-width: 760px) {
  .product-phone-left { left: -1%; transform: rotateZ(-10deg); }
  .product-phone-right { right: 4%; transform: rotateZ(10deg); }
}

/* Increase the channel introduction by one pixel at each breakpoint. */
.hero .eyebrow { font-size: 14px; }
@media (max-width: 1100px) { .hero .eyebrow { font-size: 13px; } }
@media (min-width: 761px) and (max-height: 500px) { .hero .eyebrow { font-size: 11px; } }
@media (max-width: 760px) { .hero .eyebrow { font-size: 10.5px; } }
@media (max-width: 380px) { .hero .eyebrow { font-size: 10px; } }

/* Place the supplied photograph directly in the existing call card. */
.call-portrait {
  position: absolute;
  left: 10.395%;
  top: 23.828%;
  width: 79.834%;
  height: 46.387%;
  border-radius: 5.73% / 4.63%;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: #332c24;
}
.product-phone-screen .call-portrait img {
  object-fit: cover;
  object-position: center 10%;
}
.call-invite {
  position: absolute;
  top: 2.3%;
  left: 2.6%;
  padding: 3cqw 2.8cqw;
  border-radius: 5cqw;
  background: linear-gradient(110deg, rgba(110,186,215,.74), rgba(133,87,196,.7));
  color: white;
  font-size: 3.8cqw;
  line-height: 1.3;
  white-space: nowrap;
}
.call-meta {
  position: absolute;
  left: 5.2%;
  bottom: 4%;
  display: grid;
  gap: 1.7cqw;
  color: white;
  font-size: 3.8cqw;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.call-price { display: flex; align-items: center; gap: 1.5cqw; font-size: 3.3cqw; }
.call-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6cqw;
  height: 6cqw;
  border: .5cqw solid #ffdc6d;
  border-radius: 50%;
  background: #ffc33d;
  color: #ea9a23;
  font-weight: 700;
  font-size: 4.1cqw;
  text-shadow: none;
}

/* WebP with the original PNG retained as the compatibility fallback. */
.product-phone-screen picture { display: block; width: 100%; height: 100%; }

/* Lightweight edge highlights; the photograph itself stays unchanged. */
.call-portrait::before,
.call-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.call-portrait::before {
  background: linear-gradient(110deg, transparent 30%, rgba(255,237,253,.18) 48%, transparent 64%);
  transform: translateX(-140%);
  animation: portrait-sheen 8s ease-in-out infinite;
}
.call-portrait::after {
  box-shadow: inset 0 0 0 1px rgba(255,235,251,.62), inset 0 0 5cqw rgba(233,123,212,.26);
  animation: portrait-glow 5.6s ease-in-out infinite;
}
.portrait-effects { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.portrait-effects i {
  position: absolute;
  width: 3.6cqw;
  height: 3.6cqw;
  background: linear-gradient(135deg, #fff, #ffe7fa);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  opacity: .25;
  animation: portrait-sparkle 4.8s ease-in-out infinite;
}
.portrait-effects i:nth-child(1) { left: 8%; top: 23%; }
.portrait-effects i:nth-child(2) { right: 9%; top: 14%; animation-delay: -1.3s; }
.portrait-effects i:nth-child(3) { right: 6%; bottom: 22%; width: 2.6cqw; height: 2.6cqw; animation-delay: -2.7s; }
.portrait-effects i:nth-child(4) { left: 5%; top: 51%; width: 2.4cqw; height: 2.4cqw; animation-delay: -.7s; }
.call-invite, .call-meta { z-index: 2; }
@keyframes portrait-sheen {
  0%, 55% { transform: translateX(-140%); }
  85%, 100% { transform: translateX(140%); }
}
@keyframes portrait-glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes portrait-sparkle {
  0%, 100% { opacity: .2; transform: scale(.6) rotate(0deg); }
  45% { opacity: .85; transform: scale(1.15) rotate(15deg); }
  70% { opacity: .35; transform: scale(.8) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .call-portrait::before { display: none; }
  .call-portrait::after, .portrait-effects i { animation: none; }
  .call-portrait::after { opacity: .6; }
  .portrait-effects i { opacity: .3; }
}

/* Subtle whole-portrait breathing, preserving the original proportions. */
.call-portrait > picture {
  transform-origin: 50% 55%;
  animation: portrait-breathe 4.5s ease-in-out infinite;
}
@keyframes portrait-breathe {
  0%, 100% { transform: scale(1.05) rotate(-2.5deg); }
  50% { transform: scale(1.14) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .call-portrait > picture { animation: none; transform: none; }
}

/* Highlight the invitation control shown within the App preview. */
.product-phone-right .product-phone-screen { container-type: inline-size; }
.call-answer {
  position: absolute;
  left: 52%;
  top: 71.9%;
  width: 38.2%;
  height: 6.1%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 42%, #e268f8 0%, #e68afb 55%, #f0c0ff 100%);
  color: #fff;
  font-size: clamp(5.5px, 4.6cqw, 14px);
  font-weight: 600;
  line-height: 1;
  box-shadow: inset 0 1px 3px rgba(255,255,255,.5), 0 0 3cqw rgba(221,73,241,.22);
  transform-origin: center;
  isolation: isolate;
  pointer-events: none;
}
.call-answer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 0 3cqw rgba(221,73,241,.2);
  transform-origin: center;
  animation: answer-pulse 2.8s ease-in-out infinite;
}
.call-answer svg { width: 5.6cqw; height: 5.6cqw; fill: white; stroke-width: 1.5; }
@keyframes answer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .call-answer::before { animation: none; transform: none; }
}