/* THE DIFFERENCE: one statement, set left in the site's .h2 style (same as "Everything You Need to
   Grow Online": the setup muted, the punch bright), then the why and the button. As you scroll
   through it the words light up one by one and "I build the opposite." turns blue (js/pitch.js). */
.diff { padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 9vw, 120px); }
.pitch { max-width: 1180px; }
.pitch__say { max-width: 19em; }

.pitch__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(32px, 4vw, 48px);
}
.pitch__text { max-width: 60ch; color: var(--text-3); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.pitch__text mark { background: none; color: var(--text-1); font-weight: 600; }
.pitch__foot .sq-btn { flex: none; }

@media (max-width: 900px) {
  .pitch__foot { flex-direction: column; align-items: flex-start; gap: 26px; }
}
@media (max-width: 767px) {
  .pitch__text { font-size: 16px; }
}

/* scroll highlight: the words (split by js/motion.js) wait dim and light up as the scroll reaches them */
.pitch__say.is-reading .mw__in { opacity: 0.26; transition: translate 0.95s var(--m-ease) calc(0.1s + var(--i) * 55ms), opacity 0.35s var(--ease); }
.pitch__say.is-reading .mw__in.is-lit { opacity: 1; }
/* the setup in a lighter silver than the standard muted .grad, so it reads on the dark page */
.h2.pitch__say .grad, .h2.pitch__say .grad .mw__in { background-image: linear-gradient(180deg, #e2ebf7 10%, #a7bbd6 100%); }
[data-theme="light"] .h2.pitch__say .grad, [data-theme="light"] .h2.pitch__say .grad .mw__in { background-image: linear-gradient(180deg, #2b4466 10%, #536d91 100%); }
.pitch__say .pitch__hl .mw__in.is-lit { background-image: linear-gradient(180deg, #7fe0ff 0%, var(--accent) 100%); }
[data-theme="light"] .pitch__say .pitch__hl .mw__in.is-lit { background-image: linear-gradient(180deg, #1668ff 0%, #0a5fd0 100%); }