/* The plan comparison table. /pricing/ and the homepage's Compare Plans panel
   both render it through ws_pricing_compare_table() in includes/pricing-plans.php,
   so its styles live here rather than in either page's sheet. */

/* The table is one plate: a hairline card with the Pro column tinted the whole
   way down, so the eye reads a column rather than eight separate rows. */
.pr-table-wrap { margin-top: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.pr-table { width: 100%; border-collapse: collapse; text-align: left; }
.pr-table thead th { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); font-family: var(--font-body); font-size: 12px; font-weight: var(--font-bold); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink); vertical-align: bottom; }
.pr-table thead th:not(:first-child) { width: 132px; text-align: center; }
.pr-table__price { display: block; margin-top: var(--space-1); font-family: var(--font-heading); font-size: 17px; font-weight: var(--font-semibold); letter-spacing: -0.01em; text-transform: none; color: var(--color-ink); }
.pr-table tbody th[scope="row"] { padding: var(--space-4) var(--space-6); font-weight: var(--font-normal); font-size: 15.5px; line-height: 1.4; color: var(--color-ink); }
.pr-table tbody td { padding: var(--space-4) var(--space-6); text-align: center; }
.pr-table tbody tr + tr th, .pr-table tbody tr + tr td { border-top: 1px solid var(--color-border); }
.pr-table tbody tr:hover th[scope="row"] { color: var(--brand-ink); }

/* The Pro column, banded top to bottom. Its own hairline on the left keeps the
   band from reading as a highlight that ran off the row. */
.pr-table__pro { background: var(--brand-tint); box-shadow: inset 1px 0 0 var(--brand-soft); }
.pr-table thead .pr-table__pro { color: var(--brand-ink); }
.pr-table thead .pr-table__pro .pr-table__price { color: var(--brand-ink); }

.pr-yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.pr-table__pro .pr-yes { background: var(--brand-ink); color: var(--text-inverse); }
.pr-yes .material-symbols-outlined { font-size: 16px; }
.pr-no { color: var(--gray-400); }

@media (max-width: 860px) {
  .pr-table thead th:not(:first-child) { width: 76px; }
  .pr-table thead th, .pr-table tbody th[scope="row"], .pr-table tbody td { padding-left: var(--space-4); padding-right: var(--space-4); }
  .pr-table tbody th[scope="row"] { font-size: 14px; }
  /* Three plan columns have to fit beside the row names on a phone. */
  .pr-table--team thead th:not(:first-child) { width: 62px; }
  .pr-table--team thead th:not(:first-child), .pr-table--team tbody td { padding-left: var(--space-1); padding-right: var(--space-1); }
  .pr-table--team tbody th[scope="row"] { padding-right: var(--space-2); }
  .pr-table--team thead th { letter-spacing: 0.06em; }
  .pr-table--team .pr-table__price { font-size: 14px; }
}