/* Blog comparison tables — Halo charcoal / teal
   Selectors: .w-richtext table / thead / th / td / tbody tr
   Phone (<=767px): each tbody tr stacks as a card; thead hidden.
   JS (ss-blog-table-js) copies thead th into td/th[data-label].
   Desktop: left-aligned charcoal header, teal rule. No text-align:center.
*/

.w-richtext figure[data-rt-type="table"],
.w-richtext .cms-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
}

.w-richtext table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  border-spacing: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: inherit;
  color: #2c2c2c;
}

.w-richtext table caption {
  caption-side: top;
  text-align: left !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #25282a;
  padding: 0 16px 12px;
}

.w-richtext table thead th {
  text-align: left !important;
  vertical-align: bottom;
  background: #25282a;
  color: #f7f8f8;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 14px 16px;
  border: 0;
  border-bottom: 3px solid #2dd4bf;
  white-space: nowrap;
}

.w-richtext table tbody th,
.w-richtext table td {
  text-align: left !important;
  vertical-align: top;
  font-weight: 400;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: transparent;
}

.w-richtext table tbody th {
  font-weight: 500;
  color: #25282a;
  letter-spacing: -0.02em;
}

.w-richtext table tbody tr:nth-child(even) td,
.w-richtext table tbody tr:nth-child(even) th {
  background: #f7f8f8;
}

.w-richtext table tbody tr:last-child td,
.w-richtext table tbody tr:last-child th {
  border-bottom: 0;
}

.w-richtext table a {
  color: inherit;
}

.w-richtext table .cms-mark-yes {
  color: #0f766e;
  font-weight: 600;
}

.w-richtext table .cms-mark-no {
  color: #b45353;
  font-weight: 600;
}

@media (max-width: 767px) {
  .w-richtext figure[data-rt-type="table"],
  .w-richtext figure.w-richtext-align-fullwidth[data-rt-type="table"],
  .w-richtext .cms-table-wrap {
    overflow-x: hidden;
    -webkit-overflow-scrolling: auto;
    max-width: 100%;
    width: 100% !important;
    margin: 20px 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .w-richtext table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    font-size: 1rem;
    table-layout: fixed;
  }

  .w-richtext table thead {
    display: none;
  }

  .w-richtext table tbody {
    display: block;
  }

  .w-richtext table tbody tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #eee;
    border-left: 3px solid #2dd4bf;
    border-radius: 12px;
    background: #fff;
  }

  .w-richtext table tbody tr:nth-child(even) td,
  .w-richtext table tbody tr:nth-child(even) th,
  .w-richtext table tbody tr:last-child td,
  .w-richtext table tbody tr:last-child th {
    background: transparent;
    border-bottom: 0;
  }

  .w-richtext table tbody th,
  .w-richtext table td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    text-align: left !important;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #eee;
    background: transparent;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .w-richtext table tbody tr > *:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .w-richtext table tbody tr > *:first-child {
    font-weight: 600;
    color: #25282a;
    letter-spacing: -0.02em;
    font-size: 1.05rem;
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
  }

  .w-richtext table tbody th::before,
  .w-richtext table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #25282a;
    margin-bottom: 4px;
  }

  .w-richtext table tbody tr > *:first-child::before {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .w-richtext figure[data-rt-type="table"],
  .w-richtext .cms-table-wrap {
    background: var(--dark-grey-bg, #2c2c2c);
    border-color: var(--dark-border, #555);
  }

  .w-richtext table {
    color: var(--dark-text, #e0e0e0);
  }

  .w-richtext table caption {
    color: var(--dark-headings, #f0f0f0);
  }

  .w-richtext table thead th {
    background: #1f1f1f;
    color: var(--dark-headings, #f0f0f0);
    border-bottom-color: #2dd4bf;
  }

  .w-richtext table tbody th {
    color: var(--dark-headings, #f0f0f0);
  }

  .w-richtext table tbody th,
  .w-richtext table td {
    border-bottom-color: var(--dark-border, #555);
  }

  .w-richtext table tbody tr:nth-child(even) td,
  .w-richtext table tbody tr:nth-child(even) th {
    background: #333;
  }

  .w-richtext table tbody tr:nth-child(odd) td,
  .w-richtext table tbody tr:nth-child(odd) th {
    background: transparent;
  }

  .w-richtext table a {
    color: var(--dark-links, #9db4ff);
  }

  .w-richtext table a:hover {
    color: var(--dark-links-hover, #c5d7ff);
  }

  .w-richtext table .cms-mark-yes {
    color: #2dd4bf;
  }

  .w-richtext table .cms-mark-no {
    color: #f0a0a0;
  }

  @media (max-width: 767px) {
    .w-richtext figure[data-rt-type="table"],
    .w-richtext .cms-table-wrap {
      background: transparent;
      border: 0;
    }

    .w-richtext table tbody tr {
      background: var(--dark-grey-bg, #2c2c2c);
      border-color: var(--dark-border, #555);
      border-left-color: #2dd4bf;
    }

    .w-richtext table tbody th,
    .w-richtext table td,
    .w-richtext table tbody tr:nth-child(even) td,
    .w-richtext table tbody tr:nth-child(even) th {
      background: transparent;
      border-bottom-color: var(--dark-border, #555);
    }

    .w-richtext table tbody tr > *:first-child {
      color: var(--dark-headings, #f0f0f0);
    }

    .w-richtext table tbody th::before,
    .w-richtext table td::before {
      color: var(--dark-headings, #f0f0f0);
    }
  }
}