.app-highlight {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(35px, 7vw, 110px);
  align-items: center;
  padding: 100px clamp(22px, 7vw, 110px);
  background: linear-gradient(135deg, #eaf5fb 0%, #fff 62%);
  overflow: hidden;
}
.app-highlight-copy h2 {
  font-family: Oswald, sans-serif;
  color: var(--navy);
  text-transform: uppercase;
  font-size: clamp(2.45rem, 4.5vw, 5rem);
  line-height: 1.02;
  margin: .2em 0 .35em;
}
.app-highlight-lead { max-width: 650px; color: #3a5268; font-size: 1.05rem; }
.app-benefits { display: grid; gap: 11px; margin: 25px 0 30px; color: #173c58; font-weight: 700; }
.app-benefits span { display: flex; gap: 10px; align-items: flex-start; }
.app-benefits b { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #19a9df; color: #fff; line-height: 1; }
.app-highlight-media { justify-self: center; position: relative; width: min(410px, 100%); }
.app-highlight-media:before { content: ''; position: absolute; inset: 7% -8% -5%; background: #0b72ad; border-radius: 45% 45% 12% 12%; transform: rotate(5deg); opacity: .13; }
.app-highlight-media img { position: relative; display: block; width: 100%; max-height: 660px; object-fit: cover; object-position: top center; border: 8px solid #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(3, 34, 61, .22); }
@media (max-width: 800px) { .app-highlight { grid-template-columns: 1fr; padding: 75px 22px; } .app-highlight-media { width: min(390px, 92vw); order: -1; } .app-highlight-copy h2 { font-size: 3rem; } }