.app-section {
  padding: 0 0 112px;
}

.app-inner {
  display: block;
}

.app-inner h2 {
  margin: 0;
  max-width: 500px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -2px;
}

.app-inner > div > p:not(.eyebrow) {
  max-width: 470px;
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.app-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.app-features article {
  display: block;
  padding: 19px 20px;
  border: 1px solid #f2e3e8;
  border-radius: 14px;
  background: #fff;
}

.app-features strong {
  display: block;
  color: var(--purple);
  font-size: 15px;
  margin-bottom: 7px;
}

.app-features span {
  color: #746d77;
  font-size: 13px;
  line-height: 1.45;
}

.app-preview-clean {
  position: relative;
  width: min(100%, 330px);
  margin: 0;
  overflow: hidden;
  border: 8px solid #1f1a23;
  border-radius: 32px;
  background: #35253f;
  box-shadow: 0 24px 50px #47276e26;
}

.app-preview-clean::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 50%;
  width: 82px;
  height: 18px;
  border-radius: 99px;
  background: #1f1a23;
  transform: translateX(-50%);
}

.app-preview-clean img {
  display: block;
  width: 100%;
  height: auto;
}

.app-preview-clean figcaption {
  padding: 10px 13px 4px;
  color: #f5eefa;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 780px) {
  .app-section {
    padding-bottom: 56px;
  }

  .app-inner h2 {
    font-size: 34px;
  }

  .app-features article {
    padding: 17px 18px;
  }

  .app-features { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }

}