/* Страничные стили sravnenie. */

/* Две карточки-стороны. */
.cmp-head{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.cmp-card{ display:flex; flex-direction:column; gap:6px; }
.cmp-card b{
  font-family:var(--f-head); font-weight:600; font-size:30px;
  letter-spacing:-.02em; color:var(--accent-deep);
}
@media (max-width:520px){ .cmp-head{ grid-template-columns:1fr; } }

/* Первая колонка — подписи показателей, поэтому она уже и не переносится
   по словам; на мобильном таблица всё равно разворачивается в карточки. */
.cmp th:first-child, .cmp td:first-child{ width:210px; }
.cmp td i{ color:var(--ink-faint); }

/* География: колонка на фамилию. */
.cmp-geo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
@media (max-width:700px){ .cmp-geo{ grid-template-columns:1fr; } }
.cmp-col{ display:flex; flex-direction:column; gap:12px; }
.cmp-col h3{ font-family:var(--f-text); font-size:15px; font-weight:700; color:var(--ink-soft); }
.cmp-regions{ display:flex; flex-direction:column; gap:10px; }
/* Полоса тянется, название и процент — нет: так столбики процентов
   выстраиваются в линию у обеих фамилий и их можно сравнить взглядом. */
.cmp-regions li{ display:flex; align-items:center; gap:12px; font-size:15px; }
.cmp-regions li > span{ flex:none; width:44%; }
.cmp-regions .bar{ flex:1; min-width:0; }
.cmp-regions b{ flex:none; font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }