/* =========================================================
   The problem: old way vs one build (Kong-style stacked cards)
   ========================================================= */
.vx { --vx-red: #D9574B; --vx-red-ink: #fff; --vx-green: #4FC97A; --vx-green-ink: #10241a; }
.vx-head { text-align: center; display: grid; justify-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.vx-head h2 { font-size: clamp(38px, 6vw, 84px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; max-width: 14ch; }
.vx-pill { display: inline-block; margin-top: .12em; padding: .02em .28em .1em; border-radius: .22em; background: var(--limestone); color: #1a1816;
  transform: rotate(-1.5deg); box-shadow: 0 0 60px rgba(194, 156, 106, .35), 0 10px 30px rgba(0, 0, 0, .35); }
.vx-head p { color: var(--stone); max-width: 58ch; font-size: 18px; }

.vx-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); max-width: 1120px; margin: 0 auto; }
.vx-col h3 { text-align: center; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; margin-bottom: var(--s3); }
.vx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.vx-list li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 20px 24px; border-radius: 22px; font: 600 clamp(16px, 1.45vw, 19px)/1.35 var(--body); min-height: 96px; }
.vx-list li + li::before { content: ""; position: absolute; left: 50%; top: -23px; width: 2px; height: 22px; }
.bad .vx-list li { background: var(--vx-red); color: var(--vx-red-ink); }
.bad .vx-list li + li::before { background: var(--vx-red); }
.good .vx-list li { background: var(--vx-green); color: var(--vx-green-ink); }
.good .vx-list li + li::before { background: var(--vx-green); }
.vx-ic { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.vx-out { margin-top: var(--s3); text-align: center; }
.vx-out span { display: inline-block; font: 600 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 12px 18px; border-radius: 999px; }
.vx-out.bad span { color: #F4A99F; background: rgba(217, 87, 75, .14); border: 1px solid rgba(217, 87, 75, .45); }
.vx-out.good span { color: #8FE3AE; background: rgba(79, 201, 122, .12); border: 1px solid rgba(79, 201, 122, .45); }

/* cards arrive one by one when the section fades in */
.js .reveal-sec .vx-list li { opacity: 0; }
.js .reveal-sec .bad .vx-list li { transform: translateX(-28px); }
.js .reveal-sec .good .vx-list li { transform: translateX(28px); }
.js .reveal-sec.in .vx-list li { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(.25s + var(--i) * .14s); }
.js .reveal-sec.in .good .vx-list li { transition-delay: calc(.32s + var(--i) * .14s); }
.js .reveal-sec:not(.pre):not(.in) .vx-list li { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .vx-cols { grid-template-columns: 1fr; gap: var(--s5); }
  .vx-list li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 18px; min-height: 0; border-radius: 18px; }
  .vx-ic { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-sec .vx-list li { opacity: 1; transform: none; }
}