Feature Matrix

<!--
  The grown-up version of comparison-table: many rows, sorted into groups.
  The group heading is a <th scope="colgroup"> spanning the width inside its own
  <tbody> - that is what makes "Security" a heading for the rows beneath it
  rather than a stray cell. A styled <tr> of divs cannot express it.
  <thead> repeats on print and on paginated AT output for free, which is most of
  the reason a long matrix should be a table and not a grid.
-->
<div class="matrix">
  <table class="matrix__table">
    <caption class="matrix__caption">Feature availability by plan</caption>
    <thead>
      <tr>
        <th class="matrix__col matrix__col--feature" scope="col">Feature</th>
        <th class="matrix__col" scope="col">Starter</th>
        <th class="matrix__col matrix__col--accent" scope="col">
          Pro
          <span class="matrix__badge">Popular</span>
        </th>
        <th class="matrix__col" scope="col">Enterprise</th>
      </tr>
    </thead>

    <tbody class="matrix__group">
      <tr>
        <th class="matrix__group-head" scope="colgroup" colspan="4">Collaboration</th>
      </tr>
      <tr>
        <th class="matrix__row-head" scope="row">Team members</th>
        <td class="matrix__cell">1</td>
        <td class="matrix__cell matrix__cell--accent">10</td>
        <td class="matrix__cell">Unlimited</td>
      </tr>
      <tr>
        <th class="matrix__row-head" scope="row">Guest access</th>
        <td class="matrix__cell">
          <span class="matrix__no" aria-hidden="true">✗</span><span class="matrix__sr">Not included</span>
        </td>
        <td class="matrix__cell matrix__cell--accent">
          <span class="matrix__yes" aria-hidden="true">✓</span><span class="matrix__sr">Included</span>
        </td>
        <td class="matrix__cell">
          <span class="matrix__yes" aria-hidden="true">✓</span><span class="matrix__sr">Included</span>
        </td>
      </tr>
    </tbody>

    <tbody class="matrix__group">
      <tr>
        <th class="matrix__group-head" scope="colgroup" colspan="4">Security</th>
      </tr>
      <tr>
        <th class="matrix__row-head" scope="row">SSO & SAML</th>
        <td class="matrix__cell">
          <span class="matrix__no" aria-hidden="true">✗</span><span class="matrix__sr">Not included</span>
        </td>
        <td class="matrix__cell matrix__cell--accent">
          <span class="matrix__no" aria-hidden="true">✗</span><span class="matrix__sr">Not included</span>
        </td>
        <td class="matrix__cell">
          <span class="matrix__yes" aria-hidden="true">✓</span><span class="matrix__sr">Included</span>
        </td>
      </tr>
      <tr>
        <th class="matrix__row-head" scope="row">Audit log retention</th>
        <td class="matrix__cell">7 days</td>
        <td class="matrix__cell matrix__cell--accent">90 days</td>
        <td class="matrix__cell">Unlimited</td>
      </tr>
    </tbody>

    <tbody class="matrix__group">
      <tr>
        <th class="matrix__group-head" scope="colgroup" colspan="4">Support</th>
      </tr>
      <tr>
        <th class="matrix__row-head" scope="row">Response time</th>
        <td class="matrix__cell">Community</td>
        <td class="matrix__cell matrix__cell--accent">24 hours</td>
        <td class="matrix__cell">1 hour</td>
      </tr>
      <tr>
        <th class="matrix__row-head" scope="row">Dedicated manager</th>
        <td class="matrix__cell">
          <span class="matrix__no" aria-hidden="true">✗</span><span class="matrix__sr">Not included</span>
        </td>
        <td class="matrix__cell matrix__cell--accent">
          <span class="matrix__no" aria-hidden="true">✗</span><span class="matrix__sr">Not included</span>
        </td>
        <td class="matrix__cell">
          <span class="matrix__yes" aria-hidden="true">✓</span><span class="matrix__sr">Included</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>