/* How we work: the "Scopes can't predict" card goes dark, like the lane heroes, with white text. */
.why.field-dark { background: linear-gradient(165deg, var(--vio-900) 0%, var(--vio-700) 80%, #2f2790 120%); color: #fff; }
.why.field-dark .why-quote, .why.field-dark .benefits h3 { color: #fff; }
.why.field-dark .why-lead, .why.field-dark .benefits p { color: rgba(255,255,255,.78); }
.why.field-dark .icon .ix { stroke: var(--vio-300); }
/* The same drifting coral and teal glow as the homepage's dark statement card. */
.why.field-dark { isolation: isolate; }
.why.field-dark::before {
  content: ""; position: absolute; inset: -6%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 34% 26% at var(--g1x, 20%) var(--g1y, 72%), rgba(255, 111, 89, var(--g1a, .42)), transparent 70%),
    radial-gradient(ellipse 32% 24% at var(--g2x, 78%) var(--g2y, 68%), rgba(20, 184, 166, var(--g2a, .36)), transparent 70%),
    radial-gradient(ellipse 20% 16% at var(--g3x, 52%) var(--g3y, 78%), rgba(255, 111, 89, .18), transparent 70%);
  animation: glowDrift 30s ease-in-out infinite alternate;
}
.why.field-dark > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .why.field-dark::before { animation: none; } }