@media (width >= 768px) {
  .page-viewport {
    width: min(100%, 1100px);
  }

  .site-shell {
    --page-container-width: min(100vw, 1100px);
  }
}

.hero-title-column {
  flex-basis: 720px;
  max-width: 720px;
}

.hero-row h1 {
  font-size: 48px;
  line-height: 50px;
}

.features h2,
.download-title,
.download-card--vertical .download-title {
  font-size: var(--ui-title-32-font-size);
  letter-spacing: var(--ui-title-32-letter-spacing);
  line-height: 36px;
}

#download .download-subtitle {
  line-height: 1.4;
  text-wrap: pretty;
}

.download-card-curious-avatar {
  margin-top: calc(var(--ui-space-44) + var(--ui-space-24));
}

.hero-cta,
.download-cta {
  background: var(--foreground);
  border-radius: 999px;
  overflow: visible;
  scale: 1;
  transition-property: scale;
  transition-duration: 420ms;
  transition-timing-function: linear(
    0,
    0.454 12.7%,
    0.828 22.7%,
    1.043 35.4%,
    1.057 43.1%,
    1.027 54%,
    1.006 67%,
    0.999 82%,
    1
  );
}

.hero-cta > span[aria-hidden="true"],
.download-cta > span[aria-hidden="true"] {
  display: none;
}

@media (hover: hover) {
  .hero-cta:hover,
  .download-cta:hover {
    opacity: 1;
    scale: 1.04;
  }
}

.hero-cta:active,
.download-cta:active {
  scale: 0.96;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

@media (width <= 767px) {
  .hero-title-column {
    flex: 0 auto;
    max-width: none;
  }

  .hero-row h1 {
    font-size: var(--ui-title-32-font-size);
    letter-spacing: var(--ui-title-32-letter-spacing);
    line-height: var(--ui-title-32-line-height);
  }

  .features h2,
  .download-title,
  .download-card:not(.download-card--vertical) .download-title,
  .download-card--vertical .download-title {
    font-size: var(--ui-title-24-font-size);
    letter-spacing: var(--ui-title-24-letter-spacing);
    line-height: var(--ui-title-24-line-height);
  }

  .download-card:not(.download-card--vertical) .download-title {
    color: var(--primary-50);
    font-size: var(--ui-title-20-font-size);
    font-weight: 600;
    letter-spacing: var(--ui-title-20-letter-spacing);
    line-height: var(--ui-title-20-line-height);
  }

  .download-card-curious-avatar {
    margin-top: calc(var(--ui-space-32) + var(--ui-space-24));
  }

  .download-card-avatar {
    scale: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta,
  .download-cta,
  .hero-cta:hover,
  .download-cta:hover,
  .hero-cta:active,
  .download-cta:active {
    scale: 1;
    transition-duration: 0ms;
  }
}