/* Base: mobile first */
.container {
  width: min(var(--container), calc(100% - 28px));
}

.header__inner {
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 0;
}

.footer__inner {
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}

.header__actions {
  display: none;
}

.hero {
  padding-top: 56px;
}

.hero__mockup {
  padding: 20px;
}

.hero__cards,
.platform__grid,
.audience__inner,
.use-cases__inner,
.features__grid,
.steps__grid {
  grid-template-columns: 1fr;
}

:root {
  --space-section: 72px;
}

.platform {
  min-height: auto;
  padding: 72px 0;
}

.platform__frame {
  padding: 26px 0;
}

.platform__inner {
  width: 100%;
  gap: 28px;
  flex-direction: column;
  align-items: stretch;
}

.platform__text,
.platform__grid {
  width: 100%;
}

.platform__title {
  max-width: 16ch;
}

.platform-card {
  min-height: 136px;
}

.audience {
  min-height: auto;
}

.audience__icon {
  width: 24px;
  height: 24px;
}

.steps__grid {
  margin-top: 40px;
}

.steps__grid::before {
  display: none;
}

.step__number {
  width: 48px;
  height: 48px;
}

.features {
  min-height: auto;
}

.features__card {
  min-height: auto;
}

.features__card li {
  padding-left: 24px;
}

.cta__box {
  padding: 38px 24px;
}

.cta__button {
  width: 100%;
}

/* >= 556px */
@media (min-width: 556px) {
  .container {
    width: min(var(--container), calc(100% - 48px));
  }

  .cta__button {
    min-height: 46px;
    padding: 10px 22px;
    width: auto;
  }
}

/* >= 768px */
@media (min-width: 768px) {
  .header__inner,
  .footer__inner {
    padding: 0;
  }

  .header__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .header__actions {
    display: flex;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .header__menu-toggle {
    display: none;
  }

  .header__mobile-menu {
    display: none;
  }

  .platform__inner {
    flex-direction: row;
    align-items: center;
  }

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

/* >= 992px */
@media (min-width: 992px) {
  :root {
    --space-section: 96px;
  }

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

  .hero {
    padding-top: var(--space-section);
  }

  .hero__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .platform {
    min-height: 700px;
    padding: 64px 0;
  }

  .platform__frame {
    padding: 52px 0;
  }

  .platform__text,
  .platform__grid {
    width: 50%;
  }

  .audience {
    min-height: 650px;
  }

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

  .steps__grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 68px;
  }

  .steps__grid::before {
    display: block;
  }

  .features {
    min-height: 750px;
  }

  .use-cases__inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}