/* ── Comparison Pages ─────────────────────────────────────── */

.compare-hero {
  background: var(--color-gray-900, #1a1a2e);
}

/* Feature comparison table */
.compare-table-section {
  padding: 48px 16px;
}

.compare-table-section h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 32px;
}

.table-wrap {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.compare-table thead th {
  background: var(--color-gray-900, #1a1a2e);
  color: var(--text-white, #fff);
  padding: 12px 16px;
  text-align: center;
  font-weight: var(--font-weight-semibold, 600);
}

.compare-table thead th:first-child {
  text-align: left;
}

.compare-table thead th.highlight {
  background: var(--color-primary, #e67e22);
}

.compare-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color-light, #e5e7eb);
  text-align: center;
}

.compare-table tbody td:first-child {
  text-align: left;
  font-weight: var(--font-weight-semibold, 600);
}

.compare-table tbody td.highlight {
  background: rgba(230, 126, 34, 0.06);
  font-weight: var(--font-weight-semibold, 600);
}

.compare-table tbody tr:hover {
  background: var(--bg-light, #f8f9fa);
}

/* Why section */
.why-section {
  padding: 48px 16px;
  background: var(--bg-light, #f8f9fa);
}

.why-section h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 32px;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.why-card {
  background: var(--text-white, #fff);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.why-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--text-primary, #1a1a2e);
}

.why-card p {
  font-size: 0.9rem;
  color: var(--text-secondary, #6c757d);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .compare-table-section h2,
  .why-section h2 {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .compare-table-section,
  .why-section {
    padding: 64px 16px;
  }

  .compare-table-section h2,
  .why-section h2 {
    font-size: 2rem;
  }
}