.phone-device {
      position: relative;
      width: 100%;
      padding: 0.42rem;
      border-radius: 2.75rem;
      background: linear-gradient(
        165deg,
        #f5f5f7 0%,
        #d4d4da 22%,
        #9e9ea6 48%,
        #cbcbd3 72%,
        #ececf0 100%
      );
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 22px 44px -18px rgba(0, 0, 0, 0.28);
    }
    .phone-bezel {
      padding: 0.28rem;
      border-radius: 2.35rem;
      background: linear-gradient(180deg, #2c2c2e 0%, #121214 100%);
      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .phone-device::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 21%;
      z-index: 5;
      width: 2.5px;
      height: 6.5%;
      border-radius: 2px 0 0 2px;
      background: linear-gradient(180deg, #b0b0b8, #8a8a92);
      box-shadow:
        0 1.55rem 0 0 #8a8a92,
        0 3.1rem 0 0 #8a8a92;
    }
    .phone-device::after {
      content: "";
      position: absolute;
      right: -2px;
      top: 24%;
      z-index: 5;
      width: 2.5px;
      height: 11%;
      border-radius: 0 2px 2px 0;
      background: linear-gradient(180deg, #b0b0b8, #8a8a92);
      box-shadow: 0 3.35rem 0 0 #8a8a92;
    }
    .phone-screen {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 2.05rem;
      background: #000;
      aspect-ratio: 9 / 16;
      line-height: 0;
      isolation: isolate;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .phone-screen img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .phone-indicator {
      position: absolute;
      bottom: 0.35rem;
      left: 50%;
      z-index: 4;
      width: 32%;
      min-width: 2.75rem;
      height: 0.2rem;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
    }

    .screens-marquee {
      --marquee-width: min(960px, calc(100vw - 40px));
      --slides-visible: 3.15;
      --slide-width: calc(var(--marquee-width) / var(--slides-visible));
      overflow: hidden;
      width: var(--marquee-width);
      max-width: 100%;
      margin-inline: auto;
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    @media (min-width: 640px) {
      .screens-marquee {
        --slides-visible: 2.12;
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
      }
    }
    @media (min-width: 768px) {
      .screens-marquee {
        --slides-visible: 3.08;
        mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
      }
    }
    .screens-marquee__track {
      display: flex;
      width: max-content;
      animation: screens-scroll 32s linear infinite;
      will-change: transform;
    }
    .screens-marquee__track:hover {
      animation-play-state: paused;
    }
    .screens-marquee__slide {
      flex: 0 0 var(--slide-width);
      width: var(--slide-width);
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    @media (max-width: 639px) {
      .screens-marquee {
        --slide-width: 10.5rem;
      }
      .screens-marquee__slide {
        flex: 0 0 var(--slide-width);
        width: var(--slide-width);
        padding: 0 0.1rem;
      }
    }
    @media (min-width: 640px) {
      .screens-marquee__slide {
        padding: 0 0.15rem;
      }
    }
    @media (min-width: 768px) {
      .screens-marquee__slide {
        padding: 0 0.2rem;
      }
    }
    .screens-marquee__slide .phone-device {
      width: 100%;
      max-width: none;
      margin-inline: 0;
    }
    .hero-phones {
      position: relative;
      width: 100%;
      max-width: 28rem;
      margin-inline: auto;
      min-height: 30rem;
    }
    @media (min-width: 640px) {
      .hero-phones {
        max-width: 32rem;
        min-height: 34rem;
      }
    }
    @media (max-width: 639px) {
      .hero-phones {
        min-height: 26rem;
        overflow: hidden;
      }
    }
    @media (max-width: 389px) {
      .hero-phones {
        min-height: 22rem;
      }
      .hero-phones .phone-device--center {
        width: 56%;
        max-width: 11.5rem;
      }
      .hero-phones .phone-device--left,
      .hero-phones .phone-device--right {
        width: 48%;
        max-width: 10rem;
      }
      .hero-phones .phone-device--left {
        left: 0;
        top: 24%;
      }
      .hero-phones .phone-device--right {
        right: 0;
        top: 26%;
      }
    }
    .hero-phones .phone-device--center {
      left: 50%;
      top: 0.5rem;
      z-index: 30;
      width: 62%;
      max-width: 18.5rem;
      transform: translateX(-50%) rotate(2deg);
    }
    .hero-phones .phone-device--left {
      left: 2%;
      top: 22%;
      z-index: 20;
      width: 52%;
      max-width: 16.5rem;
      transform: rotate(-6deg);
    }
    .hero-phones .phone-device--right {
      right: 2%;
      left: auto;
      top: 24%;
      z-index: 10;
      width: 52%;
      max-width: 16.5rem;
      transform: rotate(6deg);
    }
    @media (min-width: 640px) {
      .hero-phones .phone-device--center {
        max-width: 20rem;
      }
      .hero-phones .phone-device--left,
      .hero-phones .phone-device--right {
        max-width: 17.5rem;
      }
    }
    @keyframes screens-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .screens-marquee__track {
        animation: none;
      }
    }

    @media (max-width: 639px) {
      .screens-marquee {
        --marquee-width: 100%;
        width: 100%;
      }
    }

    .cta-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      overflow: hidden;
    }
    .cta-card__content {
      position: relative;
      z-index: 10;
      text-align: center;
      margin-inline: auto;
    }
    .cta-card__content p {
      margin-inline: auto;
    }
    .cta-card__stores {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }
    .cta-card__stores a {
      display: flex;
      justify-content: center;
    }
    .cta-card__stores img {
      height: 2.75rem;
      width: auto;
      max-width: 100%;
    }
    .cta-card__art {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 15rem;
      margin-inline: auto;
      flex-shrink: 0;
    }
    .cta-card__art img {
      max-height: 7.5rem;
      margin-inline: auto;
      object-fit: contain;
      object-position: center bottom;
    }
    @media (min-width: 640px) {
      .cta-card__stores {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }
      .cta-card__stores a {
        display: inline-flex;
        justify-content: flex-start;
      }
      .cta-card__stores img {
        height: 2.5rem;
      }
      .cta-card__art img {
        max-height: none;
      }
    }
    @media (min-width: 768px) {
      .cta-card {
        display: block;
        overflow: visible;
      }
      .cta-card__content {
        text-align: left;
        margin-inline: 0;
      }
      .cta-card__content p {
        margin-inline: 0;
      }
      .cta-card__stores {
        flex-direction: row;
        flex-wrap: wrap;
      }
      .cta-card__stores a {
        justify-content: flex-start;
      }
      .cta-card__art {
        position: absolute;
        right: 0;
        top: -5.75rem;
        z-index: 2;
        width: min(50%, 28rem);
        max-width: none;
        margin-inline: 0;
      }
      .cta-card__art img {
        max-height: none;
        margin-inline: 0;
      }