/* Comparison table for /youper-alternatives and /woebot-alternatives.
 * Own file so the 170+ guides keep their article.css version. Tokens only,
 * so both themes come from tokens.css. Under 680px each row becomes a card. */
.cmp-wrap{margin:22px 0}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-small);overflow:hidden}
.cmp-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:.5px solid var(--border);color:var(--muted);line-height:1.5}
.cmp-table thead th{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--surface-2)}
.cmp-table tbody th{width:17%;font-weight:600;color:var(--head)}
.cmp-table tbody tr:last-child>*{border-bottom:0}
@media(max-width:680px){
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block}
  .cmp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp-table tbody tr{padding:6px 0;border-bottom:.5px solid var(--border)}
  .cmp-table tbody tr:last-child{border-bottom:0}
  .cmp-table tbody th{width:auto;padding:12px 16px 2px;border:0;font-size:17px}
  .cmp-table td{padding:6px 16px;border:0}
  .cmp-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
}