@layer modules {
  #compare-table {
    padding: 1rem max((100% - 1200px) / 2 + 2rem, 2rem) 2rem;
    margin: 0 auto;
    max-width: 1200px;
    /* The heading joins the page's text column rather than sitting at the
       table's own left edge. The table body is wider than the reading measure
       on purpose, but its heading is still prose, and at the figure's edge it
       read as a second, competing left edge for text. */
    h2 {
      max-width: 46rem;
      margin-block: 0 1.2rem;
      margin-inline: auto;
      font-size: 1.6rem;
    }
    .compare-table-scroll {
      max-width: var(--figure-width, 900px);
      margin-inline: auto;
      overflow-x: auto;
    }
    table {
      width: 100%;
      min-width: 640px;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: .95rem;
    }
    th, td {
      padding: .8rem 1rem;
      text-align: left;
      overflow-wrap: break-word;
      border-bottom: 1px solid #e5e7f5;
    }
    th:first-child, td:first-child { width: 34%; }
    th:not(:first-child), td:not(:first-child) { width: 33%; }
    thead th {
      font-weight: 600;
      color: #245aff;
      border-bottom-width: 2px;
    }
    tbody th {
      font-weight: 500;
      color: #1a1a2e;
    }
    tbody tr:last-child th,
    tbody tr:last-child td {
      border-bottom: none;
    }
  }
}