/* =============================================================================
   Packages page — Sonchoy pricing cards + detailed comparison table.
   (.pricing-grid / .pricing-card live in components.css.)
   ============================================================================= */

.packages-page__title,
.packages-compare__title {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--color-navy-900);
  margin: 0 auto var(--space-4);
  padding-block-end: var(--space-2);
  position: relative;
  width: max-content;
  max-width: 100%;
}

.packages-page__title::after,
.packages-compare__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  left: 50%;
  transform: translateX(-50%);
  inline-size: 60px;
  block-size: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-cyan-500), var(--color-cyan-700));
}

/* ----------------------------------------------------------------------------
   Comparison table
   ---------------------------------------------------------------------------- */
.packages-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.packages-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.packages-table th,
.packages-table td {
  border-block-end: 1px solid var(--color-gray-200);
  border-inline-end: 1px solid var(--color-gray-200);
  padding: var(--space-2) var(--space-3);
  text-align: center;
}

.packages-table tbody tr:last-child td {
  border-block-end: none;
}

.packages-table th:last-child,
.packages-table td:last-child {
  border-inline-end: none;
}

.packages-table thead th {
  font-size: 1rem;
}

.packages-table thead th:first-child,
.packages-table tbody td:first-child {
  text-align: start;
  background: var(--color-gray-100);
  font-weight: 700;
  color: var(--color-navy-900);
}

.packages-table tbody tr:hover td {
  background: var(--color-cyan-100);
}

.packages-table tbody tr:hover td:first-child {
  background: var(--color-cyan-100);
}

.packages-table__tier {
  font-weight: 800;
}

.packages-table__tier.tier-navy {
  background: var(--color-navy-900);
  color: var(--color-white);
}

.packages-table__tier.tier-bronze {
  background: var(--color-bronze-500);
  color: var(--color-white);
}

.packages-table__tier.tier-silver {
  background: var(--color-silver-500);
  color: var(--color-white);
}

.packages-table__tier.tier-gold {
  background: var(--color-gold-500);
  color: var(--color-navy-900);
}

.packages-table__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: #e3f6e9;
  color: #1a8a4a;
}

.packages-table__check svg {
  inline-size: 16px;
  block-size: 16px;
}

.packages-table__cell.is-excluded {
  color: var(--color-gray-300);
}

.packages-table__detail {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--color-gray-500);
  margin-block-start: .2rem;
  line-height: 1.5;
}