@media (prefers-reduced-motion: no-preference) {
    .hero-copy,
    .phone-main,
    .phone-left,
    .phone-right,
    .watch-card,
    .feature-preview {
      animation: rise-in 640ms ease both;
    }

    .phone-left {
      animation-delay: 90ms;
    }

    .phone-right {
      animation-delay: 160ms;
    }

    .watch-card,
    .feature-preview {
      animation-delay: 230ms;
    }
  }

  @keyframes rise-in {
    from {
      opacity: 0;
      translate: 0 24px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @media (max-width: 940px) {
    .site-header {
      grid-template-columns: 1fr auto;
    }

    .site-header nav {
      display: none;
    }

    .hero {
      grid-template-columns: 1fr;
      min-height: 0;
      padding-top: 54px;
    }

    .device-stage {
      min-height: 540px;
    }

    .phone {
      width: 34vw;
      max-width: 230px;
    }

    .phone-main {
      width: 39vw;
      max-width: 270px;
    }

    .feature-row,
    .feature-row-flip {
      grid-template-columns: 160px 58px minmax(0, 1fr);
      gap: 22px;
      padding: 24px;
    }

    .feature-row img {
      width: 150px;
    }

    .feature-icon {
      width: 58px;
      height: 58px;
    }
  }

  @media (max-width: 720px) {
    .site-header,
    .hero,
    .feature-preview,
    .features,
    .faq,
    .site-footer {
      width: min(100% - 28px, 1180px);
    }

    .site-header {
      grid-template-columns: 1fr;
      gap: 14px;
      position: relative;
    }

    .app-store-header {
      justify-self: start;
    }

    .hero {
      padding-top: 34px;
    }

    .hero h1 {
      font-size: clamp(3.2rem, 16vw, 4.45rem);
    }

    .hero-actions {
      align-items: flex-start;
      flex-direction: column;
    }

    .device-stage {
      min-height: 430px;
      margin-top: 6px;
    }

    .phone-left,
    .phone-right {
      top: 60px;
    }

    .phone-left {
      left: 0;
    }

    .phone-right {
      right: 0;
    }

    .phone-main {
      width: 46vw;
      max-width: 220px;
    }

    .phone {
      width: 38vw;
      max-width: 180px;
    }

    .watch-card {
      right: 0;
      bottom: 28px;
      width: 128px;
      padding: 16px;
    }

    .feature-preview,
    .faq-grid {
      grid-template-columns: 1fr;
    }

    .section-heading {
      display: grid;
    }

    .feature-row,
    .feature-row-flip {
      grid-template-columns: 1fr;
      gap: 18px;
      min-height: 0;
    }

    .feature-row-flip > img,
    .feature-row-flip > .feature-photo,
    .feature-row-flip .feature-icon,
    .feature-row-flip > div:last-child {
      order: initial;
    }

    .feature-row img {
      width: 170px;
      margin-top: -38px;
      justify-self: start;
    }

    .feature-icon {
      width: 52px;
      height: 52px;
    }

    .site-footer {
      grid-template-columns: 1fr;
    }

    .site-footer .brand {
      grid-row: auto;
    }

    .site-footer p {
      text-align: left;
    }
  }

  @media (max-width: 420px) {
    .brand span {
      font-size: 1.15rem;
    }

    .hero h1 {
      font-size: 3rem;
    }

    .platforms {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
    }

    .platforms span {
      justify-content: center;
    }

    .device-stage {
      min-height: 380px;
    }

    .watch-card {
      display: none;
    }
  }