@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --section-y: 92px;
  }

  .container {
    width: min(100% - 48px, 880px);
  }

  .header__nav {
    gap: 18px;
  }

  .header__link {
    font-size: 13px;
  }

  .hero {
    min-height: 100vh;
    padding-top: 140px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__visual {
    display: none;
  }

  .hero__subtitle,
  .hero__actions {
    margin-inline: auto;
    justify-content: center;
  }

  .hero__device-img {
    width: min(74vw, 500px);
  }

  .features__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .features__card--primary {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .callout__inner,
  .collab__inner,
  .cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .callout__title,
  .callout__text,
  .features__intro,
  .collab__text,
  .cta__title,
  .cta__subtitle {
    margin-inline: auto;
  }

  .intelligence__strip {
    flex-wrap: wrap;
    border-radius: 30px;
  }

  .cta__actions {
    justify-content: center;
  }

  .screens__intro {
    font-size: 17px;
  }

  .sync-stage {
    margin-top: 36px;
  }

  .sync-stage__panel {
    padding: 28px 22px 24px;
    border-radius: 28px;
  }

  .sync-stage__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 16px;
  }

  .sync-stage__col {
    gap: 12px;
  }

  .sync-stage__beam {
    height: 48px;
  }

  .sync-stage__device {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 20px;
    padding: 20px;
    min-height: auto;
  }

  .sync-stage__device-head {
    align-items: flex-start;
    gap: 14px;
  }

  .sync-stage__device-title {
    font-size: 22px;
  }

  .sync-stage__device-desc {
    font-size: 14px;
  }

  .sync-stage__device-visual,
  .sync-stage__device-visual--phone {
    grid-column: 2;
    grid-row: 1;
    min-height: auto;
    align-self: center;
    align-items: center;
    padding-top: 0;
  }

  .sync-stage__asset,
  .sync-stage__asset--mac,
  .sync-stage__asset--ipad {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .sync-stage__asset--iphone {
    width: min(42vw, 220px);
    max-width: 220px;
    margin-inline: auto;
  }

  .footer__inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}