/* Comparison + migration landing pages.
 *
 * Used by templates/compare/{vs_*,from_delighted}.html. These were inline
 * <style> blocks in each page; centralized here so a tweak to .hero-gradient
 * or .price-card lands across all 6 SEO pages at once.
 */

.hero-gradient {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 30%, #faf8f5 70%, #faf8f5 100%);
}

.price-card {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #fce7f3 100%);
}

.sunset-callout {
  background: linear-gradient(135deg, #fef2f2 0%, #fef9f0 100%);
  border: 1px solid #fecaca;
}

.urgency-bar {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  flex-shrink: 0;
}

.price-shock {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #fce7f3 100%);
}

@media (max-width: 639px) {
  .comp-table { font-size: 12px; }
  .comp-table th,
  .comp-table td { padding: 8px 6px; }
}