/* Packages page styles (minimal and complementary to base.css) */

/* Comparison table */
.comparison-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-white);
}

.comparison-table thead th {
  background: var(--color-sand-beige-light);
  color: var(--color-gray-900);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  padding: var(--space-4) var(--space-6);
  white-space: nowrap;
}

.comparison-table tbody th,
.comparison-table tbody td {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  vertical-align: top;
}

.comparison-table tbody th {
  background: var(--color-gray-50);
  font-weight: var(--font-weight-medium);
  width: 32%;
}

.comparison-table tbody tr:nth-child(even) td {
  background: var(--color-cream);
}

/* Card spacing refinements */
.card .card-body ul {
  padding-left: 0;
}

/* Small enhancements for hero buttons on mobile */
@media (max-width: 768px) {
  .hero .flex { flex-direction: column; }
  .hero .btn { width: 100%; }
}