/* Features (Figma frame 20:813). The header row and the rows size their
   columns differently, as the design does: the rows' plan chip is only as
   wide as its words, so their middle column runs wider. */
.checks .c-check { flex: none; width: 250px; font-size: 14px; font-weight: 600; line-height: var(--lh); }
.checks .c-what { flex: 1 0 0; min-width: 0; }
.checks .tbl-row .c-what { color: var(--body); font-size: 14px; line-height: 1.5; }
.checks .c-under { flex: none; width: 150px; }
.checks .tbl-row .c-under { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: var(--lh); }
.checks .tbl-head .c-plans { flex: none; width: 130px; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

.sources .cardlet { min-height: 165px; }
.where .cardlet { min-height: 125px; }

/* grid view: the checks as cards, four across */
.checks.as-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border: 0; border-radius: 0; background: none; overflow: visible; }
.checks.as-grid .tbl-head { display: none; }
.checks.as-grid .tbl-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid #e8e0d5; border-radius: 14px; background: #fff; }
.checks.as-grid .c-check, .checks.as-grid .c-under { width: auto; }
.checks.as-grid .c-what { flex: none; font-size: 13px; line-height: 1.55; }
.checks.as-grid .chip-plan { margin-top: auto; }

[data-plan][hidden], .tbl-row[hidden] { display: none; }
.none { color: var(--body); font-size: 14px; }

@media (max-width: 1180px) {
  .checks.as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .checks .tbl-row .c-check { width: 100%; }
  .checks .tbl-row .c-what { flex-basis: 100%; }
  .checks .tbl-row .c-under { width: auto; }
}
@media (max-width: 640px) {
  .checks.as-grid { grid-template-columns: minmax(0, 1fr); }
}