.cap-hero {
  padding-block: clamp(56px, 7vw, 96px);
}

.cap-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
}

.cap-hero__copy {
  display: grid;
  gap: var(--sw-space-4);
  max-width: 660px;
}

.cap-hero__copy p {
  color: var(--sw-text-muted);
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
  line-height: 1.62;
}

.cap-hero__visual img {
  width: min(100%, 720px);
  justify-self: end;
}

.cap-main,
.cap-complement,
.cap-connection,
.cap-apps,
.cap-final {
  padding-block: 64px;
  border-top: 1px solid var(--sw-border);
}

.cap-heading {
  display: grid;
  grid-template-columns: 56px minmax(0, .9fr) minmax(280px, .7fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: var(--sw-space-8);
}

.cap-heading > span {
  width: 48px;
  height: 1px;
  background: var(--sw-teal);
  align-self: start;
  margin-top: .9rem;
}

.cap-heading h2,
.cap-complement h2,
.cap-connection h2,
.cap-apps h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.12;
  font-weight: 500;
}

.cap-heading p,
.cap-card p,
.cap-complement p,
.cap-connection p,
.cap-apps p {
  color: var(--sw-text-muted);
}

.cap-main__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cap-card {
  display: grid;
  align-content: start;
  gap: var(--sw-space-3);
  padding-inline: clamp(24px, 3vw, 40px);
}

.cap-card:first-child {
  padding-left: 0;
}

.cap-card:last-child {
  padding-right: 0;
}

.cap-card + .cap-card {
  border-left: 1px solid var(--sw-border);
}

.cap-card img {
  width: 100%;
  max-width: 320px;
  margin: 0;
  justify-self: center;
}

.cap-card h3,
.cap-complement h3,
.cap-apps h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

.cap-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--sw-teal);
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.cap-icon--assistant {
  -webkit-mask-image: url("/assets/icons/lucide/sparkles.svg");
  mask-image: url("/assets/icons/lucide/sparkles.svg");
}

.cap-icon--systems {
  -webkit-mask-image: url("/assets/icons/lucide/network.svg");
  mask-image: url("/assets/icons/lucide/network.svg");
}

.cap-icon--software {
  -webkit-mask-image: url("/assets/icons/lucide/window-code.svg");
  mask-image: url("/assets/icons/lucide/window-code.svg");
}

.cap-icon--training {
  -webkit-mask-image: url("/assets/icons/lucide/graduation-cap.svg");
  mask-image: url("/assets/icons/lucide/graduation-cap.svg");
}

.cap-icon--redesign {
  -webkit-mask-image: url("/assets/icons/lucide/blueprint.svg");
  mask-image: url("/assets/icons/lucide/blueprint.svg");
}

.cap-icon--automation {
  -webkit-mask-image: url("/assets/icons/lucide/build-blocks.svg");
  mask-image: url("/assets/icons/lucide/build-blocks.svg");
}

.cap-complement__inner {
  display: grid;
  grid-template-columns: minmax(240px, .45fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
}

.cap-complement__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cap-complement article,
.cap-apps article {
  display: grid;
  align-content: start;
  gap: var(--sw-space-3);
  padding-inline: clamp(24px, 3vw, 40px);
}

.cap-complement article:first-child,
.cap-apps article:first-child {
  padding-left: 0;
}

.cap-complement article:last-child,
.cap-apps article:last-child {
  padding-right: 0;
}

.cap-complement article + article,
.cap-apps article + article {
  border-left: 1px solid var(--sw-border);
}

.cap-connection__inner {
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, .58fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.cap-connection__visual img {
  width: min(100%, 620px);
  justify-self: center;
}

.cap-apps__inner {
  display: grid;
  gap: var(--sw-space-8);
}

.cap-apps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cap-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sw-space-6);
  align-items: center;
}

.cap-final h2 {
  max-width: 860px;
  font-family: var(--sw-font-editorial);
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.14;
}

@media (max-width: 999px) {
  .cap-hero__inner,
  .cap-heading,
  .cap-complement__inner,
  .cap-connection__inner,
  .cap-final__inner {
    grid-template-columns: 1fr;
  }

  .cap-apps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cap-apps article {
    padding: var(--sw-space-6);
  }

  .cap-apps article:first-child {
    padding-left: var(--sw-space-6);
  }

  .cap-apps article:last-child {
    padding-right: var(--sw-space-6);
  }

  .cap-apps article + article {
    border-left: 0;
  }

  .cap-apps article:nth-child(even) {
    border-left: 1px solid var(--sw-border);
  }

  .cap-apps article:nth-child(n + 3) {
    border-top: 1px solid var(--sw-border);
  }

  .cap-hero__visual img {
    justify-self: start;
  }
}

@media (max-width: 767px) {
  .cap-main__grid {
    grid-template-columns: 1fr;
  }

  .cap-main,
  .cap-complement,
  .cap-connection,
  .cap-apps,
  .cap-final,
  .cap-hero {
    padding-block: 48px;
  }

  .cap-card {
    padding: var(--sw-space-6) 0;
  }

  .cap-card + .cap-card {
    border-top: 1px solid var(--sw-border);
    border-left: 0;
  }
}

@media (max-width: 599px) {
  .cap-complement__grid,
  .cap-apps__grid {
    grid-template-columns: 1fr;
  }

  .cap-complement article,
  .cap-apps article,
  .cap-apps article:first-child,
  .cap-apps article:last-child {
    padding: var(--sw-space-6) 0;
  }

  .cap-complement article + article,
  .cap-apps article + article,
  .cap-apps article:nth-child(even) {
    border-top: 1px solid var(--sw-border);
    border-left: 0;
  }

  .cap-final .sw-button {
    width: 100%;
  }
}