/* Comparison page styles */

.breadcrumb { font-size: .85rem; color: var(--gray-500); margin-bottom: 16px; }
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--primary); }

.compare-hero {
  padding: 120px 0 80px;
  background: linear-gradient(to bottom, var(--gray-100), var(--white));
  text-align: center;
}
.compare-hero h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.compare-hero h1 span { color: var(--primary); }
.compare-hero-sub {
  font-size: 1.15rem; color: var(--gray-700); max-width: 660px;
  margin: 0 auto 32px; line-height: 1.7;
}

/* Problem cards */
.compare-problems { padding: 80px 0; }
.compare-problems .problem-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.compare-problems .problem-card { text-align: center; }
.problem-icon { font-size: 2rem; margin-bottom: 12px; }

/* Comparison table */
.table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--gray-300);
}
.compare-table th, .compare-table td {
  padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--gray-300);
}
.compare-table thead th {
  background: var(--dark); color: var(--white); font-weight: 600; font-size: .9rem;
}
.compare-table thead th.col-us { background: var(--primary); }
.compare-table td:first-child { font-weight: 600; }
.col-them { color: var(--gray-500); }
.col-us { color: var(--dark); }
.compare-table tbody tr:hover { background: var(--gray-100); }

/* Why switch */
.why-switch { background: var(--gray-100); }

/* Final CTA */
.final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--dark) 0%, var(--gray-900) 100%);
}
.final-cta .section-title { color: var(--white); }
.final-cta .section-sub { color: var(--gray-300); }

/* Compare FAQ */
.compare-faq { background: var(--gray-100); }

@media (max-width: 768px) {
  .compare-hero h1 { font-size: 1.75rem; }
  .compare-hero { padding: 80px 0 50px; }
  .compare-table { font-size: .85rem; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
}