/* Tier comparison matrix.
   ⭐ The card shape, the tinted header row and the hairline rows come from her
   Lovable comp. ⛔ The marks are text glyphs, not icons, so they inherit colour
   and scale with the text and need no icon asset. */
.tier-matrix {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 6px 16px -4px rgba(57, 94, 161, .18);
  overflow: hidden;
  margin-block: 1rem;
}

.tier-matrix__table {
  inline-size: 100%;
  border-collapse: collapse;
  margin: 0;
}

.tier-matrix__table thead th {
  background: #edf6fc;
  padding: 1rem 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4D6EAA;
  text-align: center;
}

.tier-matrix__standard-head { text-align: start !important; }

.tier-matrix__table tbody tr + tr { border-block-start: 1px solid rgba(8, 13, 23, .07); }

.tier-matrix__standard {
  padding: 1rem 1.25rem;
  font-weight: 400;
  color: #080D17;
  text-align: start;
}

.tier-matrix__cell { padding: 1rem 1.25rem; text-align: center; }

.tier-matrix__mark { font-size: 1.125rem; line-height: 1; }
.tier-matrix__mark--yes { color: #395EA1; }
.tier-matrix__mark--no  { color: #97a3b6; }

@media (max-width: 575.98px) {
  .tier-matrix__standard,
  .tier-matrix__cell,
  .tier-matrix__table thead th { padding: .75rem .5rem; font-size: .875rem; }
}

/* THE FOOTNOTE, 2026-08-27. Kashmere's caveat under the table.

   Muted and small on purpose: it qualifies the table, it does not compete with
   it. The colour is the same #97a3b6 the "no" marks already use, so the quiet
   parts of this component agree with each other rather than introducing a
   third grey. */
.tier-matrix__footnote {
  margin: 0;
  padding: .875rem 1.25rem 1rem;
  color: #97a3b6;
  font-size: .8125rem;
  line-height: 1.5;
  border-block-start: 1px solid rgba(8, 13, 23, .07);
}

@media (max-width: 575.98px) {
  .tier-matrix__footnote { padding: .75rem .5rem .875rem; }
}