/* ---------- Comparison pages ---------- */

/* Table */
.cmp-table-wrapper {
  overflow-x: auto;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}

.cmp-table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--pf-text-p);
  padding: var(--pf-space-4);
  border-bottom: 1px solid var(--pf-border-md);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cmp-table thead th:first-child {
  width: 28%;
}

.cmp-table tbody td {
  padding: var(--pf-space-3) var(--pf-space-4);
  border-bottom: 0.5px solid var(--pf-border);
  color: var(--pf-text-s);
  vertical-align: top;
  line-height: 1.6;
}

.cmp-table tbody td:first-child {
  font-weight: 500;
  color: var(--pf-text-p);
  font-size: var(--t-body-sm);
}

.cmp-table tbody tr:last-child td {
  border-bottom: none;
}

/* Choose section */
.cmp-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pf-space-12);
}

@media (max-width: 760px) {
  .cmp-choose {
    grid-template-columns: 1fr;
    gap: var(--pf-space-8);
  }
}

.cmp-choose-column {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-8);
}

.cmp-choose-column h3 {
  font-size: var(--t-h4);
  font-weight: 500;
  margin-bottom: var(--pf-space-5);
  padding-bottom: var(--pf-space-4);
  border-bottom: 0.5px solid var(--pf-border);
  color: var(--pf-text-p);
}

.cmp-choose-column ul {
  list-style: none;
  display: grid;
  gap: var(--pf-space-3);
}

.cmp-choose-column li {
  display: flex;
  gap: var(--pf-space-3);
  align-items: flex-start;
  color: var(--pf-text-s);
  font-size: var(--t-body);
  line-height: 1.6;
}

.cmp-choose-column li svg {
  flex: none;
  margin-top: 3px;
}

.cmp-choose-us {
  border-color: var(--pf-cyan-border);
}

.cmp-choose-us li svg {
  color: var(--pf-green);
}

.cmp-choose-them li svg {
  color: var(--pf-text-t);
}