/**
 * Bridges legacy splash-static card classes to VPDS tokens.
 * Loaded after splash-*.css so variables unify the live marketing site.
 */

.vp-why-card,
.vp-field-ops-card,
.vp-problem-card,
.vp-comms-card-rich,
.vp-analytics-card,
.vp-pricing-card,
.vp-ai-card,
.vp-dash-readiness-block {
  border-radius: var(--vp-radius-card) !important;
  backdrop-filter: var(--vp-glass-blur);
  -webkit-backdrop-filter: var(--vp-glass-blur);
  box-shadow: var(--vp-shadow-float);
}

.vp-why-card,
.vp-field-ops-card,
.vp-analytics-card,
.vp-comms-card-rich {
  border: var(--vp-glass-border) !important;
  background: var(--vp-glass-bg) !important;
}

.vp-why-card:hover,
.vp-analytics-card:hover,
.vp-comms-card-rich:hover {
  border-color: color-mix(in srgb, var(--vp-primary) 45%, transparent) !important;
  transform: translateY(-2px);
  transition: transform var(--vp-duration) var(--vp-ease), border-color var(--vp-duration) var(--vp-ease);
}

.vp-pricing-card {
  border-radius: var(--vp-radius-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.vp-pricing-card-popular {
  border-color: color-mix(in srgb, var(--vp-primary) 50%, transparent) !important;
  box-shadow: 0 0 40px color-mix(in srgb, var(--vp-primary) 20%, transparent);
}

/* Typography alignment */
.vp-why-card h3,
.vp-field-ops-card h3,
.vp-analytics-card h3,
.vp-comms-card-rich h3 {
  font-size: var(--vp-text-card);
  font-weight: 600;
  line-height: var(--vp-leading-tight);
}

.vp-why-card p,
.vp-field-ops-card p,
.vp-analytics-card p,
.vp-comms-card-rich p {
  font-size: var(--vp-text-caption);
  line-height: var(--vp-leading-normal);
}

/* CTA buttons on splash */
.vp-cta-primary,
a.vp-btn-primary-splash {
  min-height: 56px;
  padding: 0 var(--vp-space-6);
  border-radius: var(--vp-radius-button);
  font-weight: 600;
  font-size: var(--vp-text-caption);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vp-cta), var(--vp-cta-hover));
  color: #fff;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--vp-cta) 35%, transparent);
  transition: transform var(--vp-duration-fast) var(--vp-ease);
}

.vp-cta-primary:hover,
a.vp-btn-primary-splash:hover {
  transform: translateY(-1px);
}

/* Section entrance */
.vp-story-section,
.vp-animate-on-scroll {
  animation: vp-fade-up var(--vp-duration-slow) var(--vp-ease) both;
}