/* Страница «Сравнение» (/compare/). Общие детали — landing.css и features.css; здесь — плашка даты, карточки
   отличий и таблица сравнения: на узком экране она прокручивается сама, а первая колонка стоит на месте */

.c-date { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13.5px; }
.c-date b { font-weight: 600; }

.c-edges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.c-edge { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--ld-line, #e6ebf2); }
.c-edge__big { font-size: 26px; font-weight: 600; color: #2c7be5; line-height: 1.15; margin-bottom: 8px; }
.c-edge h4 { font-size: 15.5px; margin-bottom: 6px; }
.c-edge p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4d5969; }

.c-scenario { max-width: 860px; margin: 0 auto 22px; padding: 14px 18px; border-radius: 12px; background: #f4f8fe; font-size: 14px;
  color: #344050; line-height: 1.55; }

.c-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--ld-line, #e6ebf2); background: #fff; }
.c-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #344050; }
.c-table th, .c-table td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid #eef2f7; text-align: left; }
.c-table tbody tr:last-child td, .c-table tbody tr:last-child th { border-bottom: 0; }
.c-table thead th { background: #f7f9fc; font-weight: 600; color: #0e1b2c; font-size: 13.5px; }
.c-table thead th small { display: block; font-weight: 400; color: #8a97a8; font-size: 12px; margin-top: 1px; }
.c-table tbody th { font-weight: 600; color: #0e1b2c; width: 15%; }
/* Первая колонка стоит на месте при прокрутке — иначе на телефоне непонятно, что сравниваем */
.c-table th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #eef2f7; }
.c-table thead th:first-child { background: #f7f9fc; }
.c-table .is-us { background: #f2f7ff; }
.c-table thead th.is-us { background: #e3eefd; color: #1d62c4; }

.c-cell { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.c-cell i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background-position: center; background-repeat: no-repeat;
  background-size: 11px; }
.c-cell--yes i { background-color: #e3f6ee; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8a5c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12l5 5L20 7'/%3e%3c/svg%3e"); }
.c-cell--paid i { background-color: #fdf1dc; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b06e00' stroke-width='3' stroke-linecap='round'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e"); }
.c-cell--no i { background-color: #eef1f5; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748194' stroke-width='3' stroke-linecap='round'%3e%3cpath d='M6 12h12'/%3e%3c/svg%3e"); }
.c-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 2px 0; font-size: 12.5px; color: #5e6e82; }
.c-legend .c-cell { align-items: center; }

.c-fine { margin-top: 16px; font-size: 12.5px; color: #748194; line-height: 1.55; }
.c-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.c-sources h4 { font-size: 14px; margin-bottom: 6px; }
.c-sources ul { list-style: none; padding: 0; margin: 0; font-size: 12.5px; line-height: 1.7; }
.c-sources a { color: #4d5969; word-break: break-all; }

@media (max-width: 991.98px) {
  .c-edges, .c-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .c-edges, .c-sources { grid-template-columns: minmax(0, 1fr); }
  .c-table { font-size: 12.5px; }
  .c-table tbody th { width: 120px; }
}