/* =========================================================
   PLAN COMPARISON GRID
   Shared by /pricing and the homepage (where it replaces the
   seat calculator above 980px). Base rules live in styles.css;
   these are the refinements that were previously pricing-only.
   ========================================================= */

.comparison-section {
  padding: 5rem 0 4rem;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
}
.comparison-table {
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--slate-200);
}
.comparison-table thead th {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: white;
  padding: 1.125rem 1rem;
}
.comparison-table thead th.comparison-plan-popular {
  background: var(--navy-950);
  color: white;
}
.comparison-table thead .comparison-popular-badge {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-top: 3px;
  opacity: 0.85;
}
.comparison-table tbody td.comparison-plan-popular {
  background: rgba(11, 35, 58, 0.035);
}
.comparison-table tbody tr:hover td.comparison-plan-popular {
  background: rgba(11, 35, 58, 0.06);
}
.comparison-table .comparison-group-header td {
  background: var(--slate-100);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 0.75rem 1rem;
}

@media (max-width: 768px) {
  /* `overflow: hidden` above rounds the table's corners, but it also clips the
     sticky header out of existence — a sticky element cannot escape a clipping
     ancestor. On mobile the sticky plan names matter more than rounded corners
     on a table that now spans the full width anyway. */
  .comparison-table {
    overflow: visible;
    border-radius: 0;
  }

  .comparison-table-wrapper {
    border-radius: 0;
  }

  /* Chrome will not stick a table header while border-collapse is `collapse`,
     so the table switches to `separate` on mobile. Row borders live on `tr`,
     which `separate` does not paint — they move to the cells to survive. */
  .comparison-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .comparison-table tbody tr { border-bottom: 0; }

  .comparison-table tbody td {
    border-bottom: 1px solid var(--slate-100);
  }

  /* `separate` drops the collapsed bottom border, so restate it. */
  .comparison-table thead th {
    border-bottom: 2px solid var(--slate-100);
  }
}

/* Column key repeated in each group band, mobile only.
   A sticky header is not available here — a global `body { overflow-y: auto }`
   makes body the scrolling ancestor, so a sticky row anchors to a box that
   never scrolls. Rather than fight that site-wide, the plan names are repeated
   at each of the seven group bands, so a tick 30 rows down always has a
   reference within a screen or so. Widths mirror the plan columns beneath. */
.comparison-group-key { display: none; }

@media (max-width: 768px) {
  /* Absolutely positioned, so the key cannot widen the cell — making the cell
     a flex container takes it out of table layout and the whole table stops
     fitting the screen again. Percentages resolve against the full-width
     banner cell, so they land exactly over the two plan columns below. */
  .comparison-table .comparison-group-header td {
    position: relative;
  }

  .comparison-group-key {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 54%;
  }

  .comparison-group-key > span {
    display: inline-block;
    width: 50%;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--slate-500);
  }
}