/* ===========================================================
   Отдельный CSS для таблицы из 2 столбцов
   Стиль совместим с общей таблицей, но использует префикс compare2-
   =========================================================== */

:root{
  --brand:#e53935; --brand-2:#3949ab; --text:#1f2937; --muted:#6b7280;
  --bg:#ffffff; --row:#f8fafc; --border:#e5e7eb; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
}

/* === ОБЁРТКА === */
.compare2-wrap{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:0; /* прямые углы */
  overflow:hidden;
  box-shadow:0 6px 24px rgb(0 0 0 / 6%);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Inter",Arial,sans-serif;
}

/* === ШАПКА (2 колонки) === */
.compare2-head{
  display:grid;
  grid-template-columns: 1fr 1fr; /* две равные колонки */
  background:#f9bb38;
  color:#000;
  position:sticky;
  top:0;
  z-index:2;
}
.compare2-head > div{
  padding:18px 16px;
  font-weight:700;
  letter-spacing:.2px;
  justify-self:center;
  text-align:center;
}
.compare2-head > div:first-child{
  justify-self:start;
  text-align:left;
}

/* === ТАБЛИЦА === */
.compare2-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.compare2-table th,
.compare2-table td{
  padding:14px 16px;
  vertical-align:top;
  border-bottom:1px dashed var(--border);
  color:var(--text);
}
.compare2-table tbody tr:nth-child(odd){ background:var(--row); }

.compare2-table td:nth-child(2) {
  text-align: center;
}

/* Левый столбец */
.compare2-feature{
  font-weight:600;
  line-height:1.35;
  text-align:left;
}
.compare2-feature a{
  color:inherit;
  text-decoration:underline dotted;
  text-underline-offset:3px;
}

/* === БЕЙДЖИ === */
.badge2{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  border:1px solid var(--border);
  background:#fff0;
  color:var(--text);
}
.badge2.ok{   background:rgb(16 185 129 / 12%); color:var(--ok);   border-color:rgb(16 185 129 / 25%); }
.badge2.warn{ background:rgb(245 158 11 / 12%); color:var(--warn); border-color:rgb(245 158 11 / 25%); }
.badge2.paid{ background:rgb(229 57 53 / 12%); color:var(--bad);  border-color:rgb(229 57 53 / 25%); }

.note2{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
  display:block;
}

/* === МОБИЛЬНАЯ АДАПТАЦИЯ === */
@media (max-width:820px){
  .compare2-head{ display:none; }
  .compare2-table,
  .compare2-table tbody,
  .compare2-table tr,
  .compare2-table th,
  .compare2-table td{ display:block; width:100%; }
  .compare2-table tr{ border-bottom:1px solid var(--border); }
  .compare2-table th.compare2-feature{
    background:var(--row);
    border-bottom:none;
    border-top:1px solid var(--border);
  }
  .compare2-table td{
    position:relative;
    padding-top:28px;
    margin-top:6px;
    text-align:left;
  }
  .compare2-table td::before{
    content:attr(data-label);
    position:absolute;
    top:6px;
    left:16px;
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
  }
}