/* evidence block — one evidence figure + short explainer (the persona page's
 * proof moment). The SDS .sph-chart-panel carries the figure surface; this adds
 * the two-column layout and the explainer type. The SVG is inlined by the
 * partial, so its var(--sph-*) tokens flip with the theme like every other
 * evidence figure. @layer web sorts above the SDS layers. */
@layer web {
  .ev__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
  }
  @media (max-width: 52rem) {
    .ev__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  }

  .ev__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: clamp(1.6rem, 4vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: 0.5rem 0 0;
    max-width: 16ch;
  }
  .ev__title .sph-accent { color: var(--sph-primary); }

  .ev__lead {
    margin: 1rem 0 0;
    color: var(--sph-text-soft);
    font-size: var(--sph-fs-md);
    line-height: var(--sph-lh-relaxed, 1.7);
  }

  .ev__figure { margin: 0; }
  .ev__figure svg { width: 100%; height: auto; display: block; }

  .ev__caption {
    margin: 0;
    font-size: var(--sph-fs-xs);
    letter-spacing: var(--sph-tracking-wide);
    text-transform: uppercase;
    color: var(--sph-text-muted);
  }
}