/* ==========================================================================
   Сервисы для маркетинга и рекламы — components.css
   Все компоненты дизайн-системы (05-design.md). Один класс — один стиль везде,
   вариации через модификаторы. Раскладка конкретных страниц — в page-*.css.

   СПИСОК КОМПОНЕНТОВ И КЛАССОВ
   ------------------------------------------------------------------------
   Фирменный приём
     .mk-pop  (--main, --link, --flat, --tint)     рамка 2px + жёсткая тень
     .mk-sticker (--price, --free, --metric, --bonus, --score, --none, --l, --s)  наклейка
     .mk-stat (--cyan, --pink) + .mk-stats         плитка-метрика и ряд метрик
     .mk-burst (--pink)                            звезда-наклейка
   Мелкие элементы
     .mk-tile (--s, --l; data-tone="a|b|c")        плитка логотипа с буквой
     .mk-badge (--yes, --warn, --new, --note)      бейдж
     .mk-btn (--primary, --secondary, --text, --s, --xs, --l, --block)  кнопки
     .mk-linkbtn                                   кнопка-ссылка с пунктиром («Разбор», «Все параметры»)
     .mk-more                                      строка-ссылка 52px под списком
     .mk-yes / .mk-no                              «да» с галочкой / «—»
   Формы
     .mk-chip, .mk-chips                           чип-переключатель и ряд чипов
     .mk-seg, .mk-seg__btn                         сегменты
     .mk-switch                                    переключатель
     .mk-check                                     флажок
     .mk-input, .mk-select, .mk-field              поле, список, обёртка с подписью и ошибкой
   Каталог
     .mk-tabs, .mk-tab                             вкладки типов
     .mk-catalog (__bar, __foot)                   панель «фильтры + таблица»
     .mk-filters (__group, __head, __foot)         фильтры: строка от 1200px, лист до 1200px
     .mk-results, .mk-active                       «Найдено N», сортировка, выбранные условия
     .mk-table (--compact), .mk-table__wrap, .mk-table__item, .mk-table__row,
       .mk-table__details, .mk-th, .mk-rank, .mk-co, .mk-td   таблица рейтинга; до 1200px — карточки
     .mk-score                                     оценка в строке
     .mk-details, .mk-specs, .mk-weights, .mk-meter   «Все параметры» и разбивка оценки
     .mk-empty                                     пустое состояние
     .mk-disclosure                                раскрытие о вознаграждении
     .mk-card                                      карточка сервиса вне рейтинга
     .mk-cmpbar                                    панель сравнения (закреплена снизу)
     .mk-vs                                        таблица «бок о бок»
   Навигация и доверие
     .mk-crumbs                                    хлебные крошки
     .mk-answer                                    «короткий ответ» под H1
     .mk-meta                                      строка под H1: кто проверил, дата, методика
     .mk-trust                                     блок «автор и методика»
     .mk-faq                                       аккордеон вопросов
   Текст
     .mk-prose, .mk-prose__table, .mk-note (--important, --warn), .mk-quote,
     .mk-formula, .mk-proscons, .mk-toc            длинный текст и его врезки
   Блоки ссылок
     .mk-sections, .mk-sectile                     плитки разделов
     .mk-picks, .mk-pick                           подборки строками
     .mk-pair                                      пара «А или Б»
     .mk-post, .mk-post__cover                     карточка статьи
     .mk-tools, .mk-toolrow                        ссылки на инструменты
     .mk-review                                    мини-обзор сервиса: фраза, кому подходит, плюсы и минусы
     .mk-scenarios, .mk-scenario                   сценарии «как выбрать из списка»
     .mk-excluded                                  «кто не вошёл и почему»
     .mk-rule                                      рамка «как отобрано»
   Страницы сервиса и инструмента
     .mk-company-head                              шапка карточки сервиса
     .mk-tool (__form, __result)                   инструмент: форма и результат
     .mk-nf                                        «404»
   ========================================================================== */

/* ==========================================================================
   Фирменный приём
   ========================================================================== */
.mk-pop { border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); }
.mk-pop--main { border: var(--mk-border-heavy); }
.mk-pop--flat { box-shadow: none; }
.mk-pop--tint { background: var(--mk-surface-2); }
.mk-pop--link { position: relative; transition: transform var(--mk-motion), box-shadow var(--mk-motion); }
.mk-pop--link:hover { transform: translate(var(--mk-lift), var(--mk-lift)); box-shadow: var(--mk-shadow-l); }
.mk-pop--link:active { transform: translate(4px, 4px); box-shadow: var(--mk-shadow-none); }
@media (min-width: 1200px) { .mk-pop--main { box-shadow: var(--mk-shadow-l); } }

.mk-sticker {
  display: inline-flex; align-items: center; height: var(--mk-sticker-h); padding: 0 var(--mk-sticker-pad);
  border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow-xs);
  font: 700 var(--mk-fig-s)/1 var(--mk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--mk-ink);
}
.mk-sticker--price { background: var(--mk-accent); transform: rotate(var(--mk-tilt-price)); }
.mk-sticker--free { background: var(--mk-accent-2); }
.mk-sticker--metric { background: var(--mk-surface); }
.mk-sticker--bonus { background: var(--mk-accent-2-tint); }
.mk-sticker--score { background: var(--mk-black); color: var(--mk-on-black); box-shadow: none; justify-content: center; }
.mk-sticker--none {
  height: auto; min-height: var(--mk-sticker-h); padding: 4px var(--mk-sticker-pad);
  border: var(--mk-border-dash); background: none; box-shadow: none; transform: none;
  font: 500 var(--mk-micro-size)/1.3 var(--mk-font-body); color: var(--mk-muted); white-space: normal;
}
.mk-sticker--l { height: var(--mk-sticker-h-l); padding: 0 12px; font-size: 18px; }
.mk-sticker--s { height: var(--mk-sticker-h-s); padding: 0 6px; font-size: var(--mk-mono-small); box-shadow: none; }

.mk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-space-12); }
.mk-stat { border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); padding: 12px 16px; min-width: 0; }
.mk-stat--cyan { background: var(--mk-accent-2-tint); }
.mk-stat--pink { background: var(--mk-accent-tint); }
.mk-stat__num { display: block; font: var(--mk-fig-weight) var(--mk-fig-l)/var(--mk-fig-lh) var(--mk-font-mono); font-variant-numeric: tabular-nums; }
.mk-stat__num--xl { font-size: 36px; }
.mk-stat__label { display: block; margin-top: 6px; font: 600 var(--mk-micro-size)/1.3 var(--mk-font-body); }
@media (min-width: 768px) {
  .mk-stats { display: flex; flex-wrap: wrap; gap: var(--mk-space-20); padding: 4px 8px 8px 4px; }
  .mk-stats > .mk-stat:nth-child(3n+1) { transform: rotate(var(--mk-tilt-a)); }
  .mk-stats > .mk-stat:nth-child(3n+2) { transform: rotate(var(--mk-tilt-b)); }
  .mk-stats > .mk-stat:nth-child(3n) { transform: rotate(var(--mk-tilt-c)); }
  .mk-stat__num--xl { font-size: var(--mk-fig-xl); }
}

.mk-burst {
  display: grid; place-items: center; width: var(--mk-burst-size-s); height: var(--mk-burst-size-s); flex: none;
  background: var(--mk-burst) center/contain no-repeat;
  font: 700 var(--mk-mono-small)/1.15 var(--mk-font-mono); text-align: center;
}
.mk-burst--pink { background-image: var(--mk-burst-pink); }
@media (min-width: 768px) { .mk-burst { width: var(--mk-burst-size); height: var(--mk-burst-size); } }

/* ==========================================================================
   Мелкие элементы
   ========================================================================== */
.mk-tile {
  position: relative; display: grid; place-items: center; flex: none; overflow: hidden;
  width: var(--mk-tile); height: var(--mk-tile);
  border: var(--mk-border); background: var(--mk-accent-2-tint);
  font: var(--mk-weight-heavy) 20px/1 var(--mk-font-head); color: var(--mk-ink);
}
.mk-tile[data-tone="b"] { background: var(--mk-accent-tint); }
.mk-tile[data-tone="c"] { background: var(--mk-surface-2); }
.mk-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; background: var(--mk-surface); object-fit: contain; }
.mk-tile--s { width: var(--mk-tile-s); height: var(--mk-tile-s); font-size: 16px; }
.mk-tile--s .mk-tile__img { padding: 4px; }
.mk-tile--l { width: var(--mk-tile-l); height: var(--mk-tile-l); font-size: 32px; box-shadow: var(--mk-shadow-xs); }
.mk-tile--l .mk-tile__img { padding: 10px; }

.mk-badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px;
  border: var(--mk-border); background: var(--mk-surface);
  font: 600 var(--mk-micro-size)/1.2 var(--mk-font-body); white-space: nowrap;
}
.mk-badge--yes { background: var(--mk-success-tint); color: var(--mk-success); border-color: var(--mk-line-ink); }
.mk-badge--warn { background: var(--mk-warning-tint); color: var(--mk-warning); }
.mk-badge--new { background: var(--mk-black); color: var(--mk-on-black); }
.mk-badge--note { border: var(--mk-border-dash); background: none; color: var(--mk-muted); }
.mk-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--mk-control-h); padding: 0 20px;
  border: var(--mk-border); background: var(--mk-surface); color: var(--mk-ink);
  font: var(--mk-btn-weight) var(--mk-btn-size)/1.1 var(--mk-font-head); text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; transition: transform var(--mk-motion), box-shadow var(--mk-motion), background-color var(--mk-motion);
}
.mk-btn--primary { background: var(--mk-accent); color: var(--mk-on-accent); box-shadow: var(--mk-shadow-s); }
.mk-btn--primary:hover { background: var(--mk-accent-hover); transform: translate(var(--mk-hover-shift), var(--mk-hover-shift)); box-shadow: var(--mk-shadow-xs); }
.mk-btn--primary:active { background: var(--mk-accent-active); transform: translate(var(--mk-press-s), var(--mk-press-s)); box-shadow: var(--mk-shadow-none); }
.mk-btn--secondary { background: var(--mk-surface); box-shadow: var(--mk-shadow-s); }
.mk-btn--secondary:hover { background: var(--mk-accent-2); transform: translate(var(--mk-hover-shift), var(--mk-hover-shift)); box-shadow: var(--mk-shadow-xs); }
.mk-btn--secondary:active { transform: translate(var(--mk-press-s), var(--mk-press-s)); box-shadow: var(--mk-shadow-none); }
.mk-btn--text { min-height: var(--mk-control-h); padding: 0 8px; border-color: transparent; background: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mk-btn--text:hover { background: var(--mk-accent-2); }
.mk-btn--text:active { background: var(--mk-accent-2-hover); }
.mk-btn--l { min-height: var(--mk-control-h-l); padding: 0 24px; font-size: 16px; }
.mk-btn--block { display: flex; width: 100%; }
.mk-btn[disabled], .mk-btn[aria-disabled="true"] {
  background: var(--mk-disabled-bg); color: var(--mk-disabled-ink); border: var(--mk-border-off);
  box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none;
}
.mk-btn--on-black { background: none; color: var(--mk-on-black); border-color: var(--mk-on-black); box-shadow: none; }
.mk-btn--on-black:hover { background: var(--mk-on-black); color: var(--mk-ink); transform: none; box-shadow: none; }
@media (min-width: 1200px) {
  .mk-btn--s { min-height: var(--mk-control-h-s); padding: 0 14px; font-size: var(--mk-btn-size-s); }
  .mk-btn--xs { min-height: var(--mk-control-h-xs); padding: 0 8px; gap: 6px; font-size: var(--mk-btn-size-s); }
  .mk-btn--xs .mk-ico { width: 16px; height: 16px; stroke-width: 2.5; }
  .mk-btn--xs.mk-btn--primary { box-shadow: var(--mk-shadow-xs); }
  .mk-btn--xs.mk-btn--primary:hover { box-shadow: 1px 1px 0 var(--mk-shadow-color); }
  .mk-btn--xs.mk-btn--primary:active { transform: translate(var(--mk-press-xs), var(--mk-press-xs)); box-shadow: var(--mk-shadow-none); }
  .mk-btn--xs.mk-btn--secondary, .mk-btn--xs.mk-btn--secondary:hover, .mk-btn--xs.mk-btn--secondary:active { box-shadow: none; transform: none; }
}

.mk-linkbtn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0;
  font: 500 var(--mk-micro-size)/1.2 var(--mk-font-body); color: var(--mk-ink);
  text-decoration: underline dashed; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
.mk-linkbtn:hover, .mk-linkbtn[aria-expanded="true"] { background: var(--mk-accent-2); }
@media (min-width: 1200px) { .mk-linkbtn { min-height: 20px; } }

.mk-more {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 16px;
  font: var(--mk-btn-weight) var(--mk-btn-size)/1.2 var(--mk-font-head); text-decoration: none; text-align: center;
}
.mk-more:hover { background: var(--mk-accent-2); }

.mk-yes { display: inline-flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--mk-success); }
.mk-yes .mk-ico { margin-top: 2px; }
.mk-no { color: var(--mk-quiet); }

/* ==========================================================================
   Формы
   ========================================================================== */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--mk-space-8); }
.mk-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--mk-control-h); padding: 0 12px;
  border: var(--mk-border); background: var(--mk-surface);
  font: var(--mk-chip-weight) var(--mk-chip-size)/1.2 var(--mk-font-body); text-decoration: none; cursor: pointer;
}
.mk-chip:hover { background: var(--mk-surface-2); }
.mk-chip[aria-pressed="true"], .mk-chip.is-on { background: var(--mk-accent-2); font-weight: 600; }
.mk-chip[aria-pressed="true"]::before { content: ""; width: 16px; height: 16px; background: var(--mk-icon-check-ink) center/16px no-repeat; }
.mk-chip__x { width: 16px; height: 16px; }

.mk-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--mk-border); background: var(--mk-line-ink); gap: 2px; }
.mk-seg__btn {
  display: flex; align-items: center; justify-content: center; min-height: calc(var(--mk-control-h) - 4px); padding: 0 12px;
  background: var(--mk-surface); font: var(--mk-chip-weight) var(--mk-chip-size)/1.2 var(--mk-font-body); white-space: nowrap; text-align: center;
}
.mk-seg__btn:hover { background: var(--mk-surface-2); }
.mk-seg__btn[aria-pressed="true"] { background: var(--mk-black); color: var(--mk-on-black); font-weight: 600; }
.mk-seg__btn:focus-visible { position: relative; z-index: 1; }
@media (min-width: 768px) { .mk-seg { display: inline-flex; } .mk-seg__btn { flex: 1 0 auto; } }

.mk-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--mk-control-h); cursor: pointer; font: 500 var(--mk-chip-size)/1.2 var(--mk-font-body); }
.mk-switch input { position: absolute; left: 0; top: 50%; width: var(--mk-switch-w); height: var(--mk-switch-h); margin: -12px 0 0; opacity: 0; cursor: pointer; }
.mk-switch__track { position: relative; flex: none; width: var(--mk-switch-w); height: var(--mk-switch-h); border: var(--mk-border); background: var(--mk-surface); }
.mk-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--mk-black); transition: transform var(--mk-motion); }
.mk-switch input:checked + .mk-switch__track { background: var(--mk-accent-2); }
.mk-switch input:checked + .mk-switch__track::after { transform: translateX(20px); }
.mk-switch input:focus-visible + .mk-switch__track { outline: var(--mk-focus-ring); outline-offset: var(--mk-focus-offset); }

.mk-check { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.mk-check input { position: absolute; left: 0; top: 50%; width: var(--mk-check); height: var(--mk-check); margin: -10px 0 0; opacity: 0; cursor: pointer; }
.mk-check__box { flex: none; width: var(--mk-check); height: var(--mk-check); border: var(--mk-border); background: var(--mk-surface); }
.mk-check input:checked + .mk-check__box { background: var(--mk-black) var(--mk-icon-check) center/14px no-repeat; }
.mk-check input:focus-visible + .mk-check__box { outline: var(--mk-focus-ring); outline-offset: var(--mk-focus-offset); }
.mk-check input:disabled + .mk-check__box { background: var(--mk-disabled-bg); border: var(--mk-border-off); }
@media (min-width: 1200px) { .mk-check { min-height: 20px; } }

.mk-field { display: grid; gap: 6px; min-width: 0; }
.mk-field__label { color: var(--mk-quiet); }
.mk-field__error { display: flex; align-items: center; gap: 6px; font-size: var(--mk-micro-size); color: var(--mk-error); }
.mk-input, .mk-select {
  display: block; width: 100%; min-width: 0; height: var(--mk-control-h); padding: 0 12px;
  border: var(--mk-border); background-color: var(--mk-surface);
  font: 400 16px/1.2 var(--mk-font-body); color: var(--mk-ink);
  -webkit-appearance: none; appearance: none;
}
.mk-select { padding-right: 36px; background-image: var(--mk-icon-chevron); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.mk-input::placeholder { color: var(--mk-quiet); opacity: 1; }
.mk-input:focus-visible, .mk-select:focus-visible { box-shadow: var(--mk-shadow-s); }
.mk-input[aria-invalid="true"] { border-color: var(--mk-error); }
.mk-input--mono { font-family: var(--mk-font-mono); font-size: 15px; }
@media (min-width: 1200px) { .mk-chip { min-height: var(--mk-control-h-s); } .mk-seg__btn { min-height: calc(var(--mk-control-h-s) - 4px); } .mk-filters .mk-select { height: var(--mk-control-h-s); font-size: 14px; } .mk-filters .mk-switch { min-height: var(--mk-control-h-s); } }

/* ==========================================================================
   Вкладки
   ========================================================================== */
.mk-tabs { display: flex; gap: var(--mk-space-12); overflow-x: auto; padding: 0 4px 4px 0; margin-right: calc(var(--mk-gutter) * -1); scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tabs::after { content: ""; flex: 0 0 var(--mk-gutter); }
.mk-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: var(--mk-control-h); padding: 0 14px;
  border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow-s);
  font: var(--mk-nav-weight) var(--mk-nav-size)/1.1 var(--mk-font-head); white-space: nowrap; text-decoration: none;
  transition: transform var(--mk-motion), box-shadow var(--mk-motion);
}
.mk-tab:hover { background: var(--mk-accent-2); transform: translate(var(--mk-hover-shift), var(--mk-hover-shift)); box-shadow: var(--mk-shadow-xs); }
.mk-tab[aria-selected="true"] { background: var(--mk-black); color: var(--mk-on-black); transform: translate(var(--mk-press-s), var(--mk-press-s)); box-shadow: var(--mk-shadow-none); }
.mk-tab[aria-selected="true"] .mk-sticker { background: var(--mk-accent); color: var(--mk-on-accent); border-color: var(--mk-accent); }
@media (min-width: 768px) {
  .mk-tabs { flex-wrap: wrap; overflow: visible; margin-right: 0; }
  .mk-tabs::after { content: none; }
}
@media (min-width: 1200px) { .mk-tab { padding: 0 12px; } }

/* ==========================================================================
   Каталог: панель, фильтры, «Найдено»
   ========================================================================== */
/* до 1200px панель — только полоса «Найдено», карточки стоят отдельно; от 1200px — одна главная панель с таблицей */
.mk-catalog { min-width: 0; }
.mk-catalog__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-space-12) var(--mk-space-20); margin-bottom: 28px; padding: 12px 16px; background: var(--mk-surface-2); border: var(--mk-border); box-shadow: var(--mk-shadow); }
.mk-catalog__foot { border: var(--mk-border); background: var(--mk-surface); }
.mk-catalog__foot .mk-more + .mk-more { border-top: var(--mk-border-row); }
@media (min-width: 1200px) {
  .mk-catalog { border: var(--mk-border-heavy); background: var(--mk-surface); box-shadow: var(--mk-shadow-l); }
  .mk-catalog__bar { margin-bottom: 0; border: 0; border-bottom: var(--mk-border); box-shadow: none; }
  .mk-catalog__foot { border: 0; border-top: var(--mk-border); }
}

.mk-results { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-space-8); flex: 1 1 100%; min-width: 0; }
.mk-results__count { font: 600 15px/1.2 var(--mk-font-body); margin-right: auto; white-space: nowrap; }
.mk-results__count b { font: 700 18px/1 var(--mk-font-mono); font-variant-numeric: tabular-nums; }
.mk-results__count span { display: none; }
.mk-results__sort { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.mk-results__sort .mk-label { display: none; flex: none; color: var(--mk-quiet); }
.mk-results__open { flex: 0 1 auto; padding: 0 10px; margin: 0 3px 3px 0; }
.mk-results__reset { display: none; }
.mk-active { display: flex; flex-wrap: wrap; gap: var(--mk-space-8); flex: 1 1 100%; }
.mk-active:empty { display: none; }

/* до 1200px фильтры — лист: на весь экран, от 768px — справа 400px */
.mk-filters { display: none; }
.mk-filters.is-open {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: var(--mk-z-menu);
  background: var(--mk-bg); overflow-y: auto; overscroll-behavior: contain;
}
.mk-filters__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--mk-space-12); min-height: var(--mk-header-h); padding: 0 var(--mk-gutter); background: var(--mk-bg); border-bottom: var(--mk-border-heavy); }
.mk-filters__body { flex: 1 1 auto; padding: 0 var(--mk-gutter); }
.mk-filters__group { display: grid; gap: var(--mk-space-8); min-width: 0; margin: 0; padding: var(--mk-space-16) 0; border: 0; border-bottom: var(--mk-border); }
.mk-filters__group > .mk-label, .mk-filters__group > legend { padding: 0; color: var(--mk-quiet); }
.mk-filters__group > legend { margin-bottom: var(--mk-space-8); }
.mk-filters__foot { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mk-space-8); padding: var(--mk-space-12) var(--mk-gutter); background: var(--mk-bg); border-top: var(--mk-border-heavy); }
.mk-filters__more { display: grid; gap: 0; }
@media (min-width: 768px) {
  .mk-filters.is-open { inset: 0 0 0 auto; width: 400px; border-left: var(--mk-border-heavy); }
  .mk-results__count span { display: inline; }
  .mk-results { gap: var(--mk-space-8) var(--mk-space-16); }
  .mk-results__sort { flex: 0 1 400px; } /* «Сначала с высокой оценкой» помещается целиком */
  .mk-results__sort .mk-label { display: block; }
  .mk-results__open { flex: 0 0 auto; padding: 0 20px; }
}
@media (min-width: 1200px) {
  .mk-filters, .mk-filters.is-open {
    display: flex; flex-flow: row wrap; align-items: flex-start; gap: var(--mk-space-12) var(--mk-space-24);
    position: static; width: auto; flex: 1 1 auto; min-width: 0; background: none; border: 0; overflow: visible;
  }
  .mk-filters__head, .mk-filters__foot { display: none; }
  .mk-filters__body, .mk-filters__more { display: contents; }
  .mk-filters__group { padding: 0; border: 0; gap: 6px; }
  .mk-filters__group > legend { margin-bottom: 6px; }
  .mk-results { flex: 0 0 auto; margin-left: auto; align-self: flex-end; min-height: var(--mk-control-h-s); }
  .mk-filters .mk-select { width: 210px; }
  .mk-results__sort, .mk-results__open, .mk-active { display: none; }
  .mk-results__reset { display: inline-flex; }
  .mk-results__reset { min-height: var(--mk-control-h-s); }
}

/* ==========================================================================
   Таблица рейтинга. База (до 1200px) — карточки; от 1200px — таблица
   ========================================================================== */
.mk-table__wrap { min-width: 0; }
.mk-table { display: block; width: 100%; font-size: var(--mk-table-size); line-height: var(--mk-table-lh); }
.mk-table caption, .mk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mk-table__item { display: block; position: relative; margin: 0 0 var(--mk-card-gap); border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); }
.mk-table__item.is-match { border-left-width: var(--mk-mark-w); border-left-color: var(--mk-accent-2); }
.mk-table__row {
  position: relative; display: grid; grid-template-columns: var(--mk-tile) minmax(0, 1fr) auto; column-gap: 12px;
  padding: 20px 16px 8px;
}
.mk-table__row > td { min-width: 0; }
.mk-table__main, .mk-co, .mk-co__body { display: contents; }
.mk-table__rank { position: absolute; top: -12px; left: 12px; }
.mk-rank { display: inline-flex; align-items: center; height: var(--mk-sticker-h-s); padding: 0 6px; background: var(--mk-black); color: var(--mk-on-black); font: 700 var(--mk-mono-small)/1 var(--mk-font-mono); font-variant-numeric: tabular-nums; }
.mk-rank::before { content: "№\00a0"; }
.mk-co > .mk-tile { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.mk-co__name { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; font: 700 17px/1.2 var(--mk-font-head); text-decoration: none; }
.mk-co__name:hover { background: var(--mk-accent-2); }
.mk-co__kind { grid-column: 2; grid-row: 2; font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-quiet); }
.mk-table__score { grid-column: 3; grid-row: 1 / 3; }
.mk-co__short { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); }
.mk-co__why { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); }
.mk-table__price { grid-column: 1 / -1; grid-row: 5; padding: 14px 0 12px; }
.mk-table__cell { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 12px; align-items: start; min-height: 44px; padding: 10px 0; border-top: var(--mk-border-soft); }
.mk-table__cell::before { content: attr(data-label); padding-top: 2px; font: var(--mk-label-weight) var(--mk-label-size)/var(--mk-label-lh) var(--mk-font-mono); letter-spacing: var(--mk-label-track); text-transform: uppercase; color: var(--mk-quiet); }
.mk-table__cell--1 { grid-row: 6; } .mk-table__cell--2 { grid-row: 7; } .mk-table__cell--3 { grid-row: 8; }
.mk-table__actions { grid-column: 1 / -1; grid-row: 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 4px 8px 0; border-top: var(--mk-border-soft); }
.mk-co__meta { grid-column: 1 / -1; grid-row: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--mk-space-16); font: 500 var(--mk-mono-small)/1.3 var(--mk-font-mono); color: var(--mk-quiet); }
.mk-co__meta .mk-check { color: var(--mk-ink); }
.mk-co__meta .mk-linkbtn { font: inherit; color: var(--mk-ink); margin-left: auto; }
.mk-td { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.mk-td__main { font-weight: 600; }
.mk-td__note { font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-muted); }
.mk-table__price .mk-td { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.mk-score { display: grid; justify-items: center; gap: 4px; }
.mk-score .mk-sticker--score { width: var(--mk-score-w); height: var(--mk-score-h); padding: 0; font: var(--mk-fig-weight) var(--mk-fig-m)/1 var(--mk-font-mono); }
.mk-score__of { font: 500 var(--mk-mono-small)/1 var(--mk-font-mono); color: var(--mk-quiet); }
.mk-score .mk-linkbtn { display: none; }
.mk-score--none .mk-sticker--score { background: none; color: var(--mk-quiet); border: var(--mk-border-dash); }

.mk-table__details { display: block; }
.mk-table__details > td { display: block; padding: 16px; background: var(--mk-bg); border-top: var(--mk-border-dash); }
.mk-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-24); }
.mk-details > * { min-width: 0; }
.mk-details__title { margin-bottom: var(--mk-space-8); color: var(--mk-quiet); }

@media (min-width: 768px) {
  .mk-table__row { grid-template-columns: var(--mk-tile) repeat(3, minmax(0, 1fr)) 168px; column-gap: 16px; padding: 20px 20px 8px; }
  .mk-co__name { grid-column: 2 / 5; }
  .mk-co__kind { grid-column: 2 / 5; }
  .mk-table__score { grid-column: 5; justify-self: end; }
  .mk-co__short { grid-column: 1 / 5; }
  .mk-co__why { grid-column: 1 / 5; }
  .mk-table__price { grid-column: 1 / 5; }
  .mk-table__cell { display: block; grid-row: 6; border-top: var(--mk-border-soft); }
  .mk-table__cell::before { display: block; margin-bottom: 6px; padding: 0; }
  .mk-table__cell--1 { grid-column: 1 / 3; } .mk-table__cell--2 { grid-column: 3; } .mk-table__cell--3 { grid-column: 4; }
  .mk-table__actions { grid-column: 5; grid-row: 3 / 7; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 12px 4px 0 0; border-top: 0; }
  .mk-co__meta { grid-row: 7; border-top: var(--mk-border-soft); margin-top: 4px; }
  .mk-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .mk-table__wrap { border-top: 0; }
  .mk-table { display: table; table-layout: fixed; }
  .mk-table caption { position: absolute; }
  .mk-table thead { position: sticky; top: 0; z-index: var(--mk-z-sticky); width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-header-group; }
  .mk-table th { height: var(--mk-thead-h); padding: 0 12px; background: var(--mk-surface-2); border-bottom: var(--mk-border); vertical-align: middle; font: var(--mk-label-weight) var(--mk-th-size)/var(--mk-th-lh) var(--mk-font-mono); letter-spacing: var(--mk-label-track); text-transform: uppercase; color: var(--mk-ink); }
  .mk-table__c-rank { width: 44px; } .mk-table__c-score { width: 80px; } .mk-table__c-price { width: 158px; }
  .mk-table__c-bill { width: 152px; } .mk-table__c-free { width: 150px; } .mk-table__c-extra { width: 140px; } .mk-table__c-act { width: 136px; }
  .mk-table__price .mk-sticker--price { padding: 0 6px; font-size: 13px; }
  .mk-th { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: 0 -6px; padding: 0 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
  .mk-th:hover { background: var(--mk-accent-2-hover); }
  .mk-th .mk-ico { width: 14px; height: 14px; opacity: .55; }
  th[aria-sort="ascending"] .mk-th, th[aria-sort="descending"] .mk-th { background: var(--mk-accent-2); }
  th[aria-sort="ascending"] .mk-th .mk-ico, th[aria-sort="descending"] .mk-th .mk-ico { opacity: 1; }
  th[aria-sort="ascending"] .mk-th .mk-ico { transform: scaleY(-1); }

  .mk-table__item { display: table-row-group; position: static; margin: 0; border: 0; box-shadow: none; background: none; }
  .mk-table__item:hover > .mk-table__row { background: var(--mk-surface-2); }
  .mk-table__item.is-match > .mk-table__row > td:first-child { box-shadow: inset var(--mk-mark-w) 0 0 var(--mk-accent-2); }
  .mk-table__row { display: table-row; position: static; padding: 0; height: var(--mk-row-h); }
  .mk-table__row > td { display: table-cell; padding: 10px 12px; vertical-align: top; border-top: var(--mk-border-row); border-bottom: 0; min-height: 0; }
  .mk-table__item:first-of-type > .mk-table__row > td { border-top: 0; }
  .mk-table__cell::before { content: none; }
  .mk-table__rank { position: static; }
  .mk-rank { height: auto; padding: 0; background: none; color: var(--mk-ink); font: var(--mk-fig-weight) var(--mk-fig-m)/1.2 var(--mk-font-mono); }
  .mk-rank::before { content: none; }
  .mk-co { display: flex; align-items: flex-start; gap: 12px; }
  .mk-co__body { display: block; min-width: 0; flex: 1 1 auto; }
  .mk-co__name { font-size: 16px; }
  .mk-co__kind { display: block; margin-top: 1px; }
  .mk-co__short { margin-top: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .mk-co__why { margin-top: 4px; }
  .mk-co__meta { margin-top: 6px; gap: 0 var(--mk-space-12); border-top: 0; }
  .mk-co__meta .mk-linkbtn { margin-left: 0; }
  .mk-table__price .mk-td { display: grid; gap: 6px; }
  .mk-table__actions { display: table-cell; }
  .mk-table__actions .mk-btn { display: flex; width: calc(100% - 2px); }
  .mk-table__actions .mk-btn + .mk-btn { margin-top: 8px; }
  .mk-score .mk-linkbtn { display: inline-flex; }
  .mk-table .mk-score__of { display: none; }

  .mk-table__details { display: table-row; }
  .mk-table__details > td { display: table-cell; padding: 20px 24px 24px 68px; }
  .mk-details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mk-space-40); }

  /* короткий рейтинг на главной: фраза в одну строку, уточнения в одну строку */
  .mk-table--compact .mk-table__row { height: var(--mk-row-h-compact); }
  .mk-table--compact .mk-table__row > td { padding: 8px 12px; }
  .mk-table--compact .mk-co__kind { display: inline; margin-left: 8px; }
  .mk-table--compact .mk-co__short { -webkit-line-clamp: 1; }
  .mk-table--compact .mk-td__note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .mk-table--compact .mk-table__actions .mk-btn + .mk-btn { margin-top: 6px; }
}

/* «Все параметры» и разбивка оценки */
.mk-specs { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--mk-space-32); }
.mk-specs__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 12px; min-height: 44px; padding: 10px 0; border-bottom: var(--mk-border-soft); font-size: 15px; line-height: 1.4; }
.mk-specs__row dt { color: var(--mk-quiet); }
.mk-specs__row dd { font-weight: 600; }
.mk-specs__row dd .mk-micro { display: block; font-weight: 400; color: var(--mk-muted); }
@media (min-width: 768px) { .mk-specs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mk-weights { display: grid; gap: var(--mk-space-12); }
.mk-weights__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.mk-weights__name { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 600 var(--mk-small-size)/1.3 var(--mk-font-body); }
.mk-weights__w { font: 500 var(--mk-mono-small)/1 var(--mk-font-mono); color: var(--mk-quiet); }
.mk-weights__val { font: 700 13px/1 var(--mk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-weights__why { grid-column: 1 / -1; font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-muted); }
.mk-weights__sum { padding-top: var(--mk-space-12); border-top: var(--mk-border-soft); font: 500 13px/1.5 var(--mk-font-mono); }
.mk-meter { height: var(--mk-meter-h); border: var(--mk-border); background: var(--mk-surface); }
.mk-meter__fill { display: block; height: 100%; background: var(--mk-accent-2); border-right: var(--mk-border); }
@media (min-width: 768px) {
  .mk-weights__row { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; }
  .mk-weights__name { grid-column: 1; }
}

.mk-empty { margin: 16px; padding: 24px 16px; border: var(--mk-border-dash); text-align: center; display: grid; gap: var(--mk-space-12); justify-items: center; }
.mk-empty__title { font: 700 18px/1.25 var(--mk-font-head); }
.mk-disclosure { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--mk-space-20); padding: 12px 14px; border: var(--mk-border-dash); font-size: var(--mk-micro-size); line-height: 1.5; color: var(--mk-muted); max-width: 980px; }
.mk-disclosure .mk-ico { margin-top: 1px; color: var(--mk-ink); }

/* ==========================================================================
   Карточка сервиса вне рейтинга
   ========================================================================== */
.mk-card { display: flex; flex-direction: column; gap: var(--mk-space-12); padding: var(--mk-space-16); min-width: 0; }
.mk-card__head { display: flex; align-items: flex-start; gap: 12px; }
.mk-card__head > div { flex: 1 1 auto; min-width: 0; }
.mk-card__title { font: 700 18px/1.2 var(--mk-font-head); }
.mk-card__link { text-decoration: none; }
.mk-card__link::after { content: ""; position: absolute; inset: 0; }
.mk-card__kind { display: block; margin-top: 2px; font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-quiet); }
.mk-card__text { font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); }
.mk-card__stickers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 2px 4px 2px 0; }
.mk-card__facts { display: grid; }
.mk-card__facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 12px; padding: 8px 0; border-top: var(--mk-border-soft); font-size: var(--mk-small-size); line-height: 1.4; }
.mk-card__facts dt { color: var(--mk-quiet); }
.mk-card__facts dd { font-weight: 600; }
.mk-card__actions { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; padding: 4px 4px 4px 0; }
@media (min-width: 1200px) { .mk-card { padding: var(--mk-space-20); } }

/* ==========================================================================
   Панель сравнения и таблица «бок о бок»
   ========================================================================== */
.mk-cmpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--mk-z-bar); background: var(--mk-black); color: var(--mk-on-black); border-top: 3px solid var(--mk-accent-2); }
.mk-cmpbar :focus-visible { outline-color: var(--mk-focus-on-black); }
.mk-cmpbar__in { display: flex; align-items: center; gap: var(--mk-space-12); min-height: var(--mk-bar-h); }
.mk-cmpbar__count { font: 700 15px/1.2 var(--mk-font-head); white-space: nowrap; }
.mk-cmpbar__hint { display: none; font-size: var(--mk-micro-size); color: var(--mk-on-black-muted); }
.mk-cmpbar__list { display: none; flex: 1 1 auto; min-width: 0; gap: var(--mk-space-12); overflow: hidden; }
.mk-cmpbar__item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.2 var(--mk-font-body); white-space: nowrap; }
.mk-cmpbar__x { display: grid; place-items: center; width: 28px; height: 28px; color: var(--mk-on-black); }
.mk-cmpbar__x:hover { background: var(--mk-on-black); color: var(--mk-ink); }
.mk-cmpbar__actions { display: flex; align-items: center; gap: var(--mk-space-8); margin-left: auto; }
.mk-cmpbar .mk-btn--text { color: var(--mk-on-black); display: none; }
.mk-cmpbar .mk-btn--text:hover { background: none; text-decoration-color: var(--mk-accent-2); }
.mk-cmpbar .mk-btn--primary { box-shadow: none; }
.mk-cmpbar .mk-btn[aria-disabled="true"] { background: none; color: var(--mk-on-black-muted); border-color: var(--mk-on-black-muted); }
body.has-cmpbar { padding-bottom: var(--mk-bar-h); }
@media (min-width: 768px) {
  .mk-cmpbar__list { display: flex; }
  .mk-cmpbar__hint { display: block; }
  .mk-cmpbar .mk-btn--text { display: inline-flex; }
}

.mk-vs__wrap { overflow-x: auto; border: var(--mk-border-heavy); background: var(--mk-surface); box-shadow: var(--mk-shadow); }
.mk-vs { width: 100%; min-width: 440px; font-size: 15px; line-height: 1.4; }
.mk-vs th, .mk-vs td { padding: 12px; border-top: var(--mk-border-row); vertical-align: top; min-width: 160px; }
.mk-vs tr:first-child > * { border-top: 0; }
.mk-vs thead th { border-bottom: var(--mk-border); background: var(--mk-surface); }
.mk-vs tbody th { position: sticky; left: 0; z-index: 1; width: 120px; min-width: 120px; background: var(--mk-surface-2); border-right: var(--mk-border); font: var(--mk-label-weight) var(--mk-label-size)/var(--mk-label-lh) var(--mk-font-mono); letter-spacing: var(--mk-label-track); text-transform: uppercase; }
.mk-vs thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--mk-surface-2); border-right: var(--mk-border); }
.mk-vs__head { display: grid; gap: 8px; justify-items: start; }
.mk-vs__name { font: 700 17px/1.2 var(--mk-font-head); }
.mk-vs td.is-diff { background: var(--mk-accent-2-tint); }
.mk-vs__best { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 600 var(--mk-micro-size)/1.2 var(--mk-font-body); color: var(--mk-success); }
@media (min-width: 1200px) { .mk-vs__wrap { overflow: visible; box-shadow: var(--mk-shadow-l); } .mk-vs tbody th { width: 160px; } }

/* ==========================================================================
   Навигация и доверие
   ========================================================================== */
.mk-crumbs { padding-top: var(--mk-space-12); font: 500 var(--mk-mono-small)/1.4 var(--mk-font-mono); color: var(--mk-quiet); }
.mk-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; }
.mk-crumbs__item { display: none; align-items: center; }
.mk-crumbs__item--up { display: inline-flex; }
.mk-crumbs__item--up a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.mk-crumbs__item a { color: inherit; text-underline-offset: 3px; }
.mk-crumbs__item a:hover { color: var(--mk-ink); background: var(--mk-accent-2); }
.mk-crumbs__item .mk-ico { transform: scaleX(-1); }
.mk-crumbs__item[aria-current="page"] { color: var(--mk-ink); font-weight: 700; }
@media (min-width: 768px) {
  .mk-crumbs { padding-top: var(--mk-space-20); font-size: 13px; }
  .mk-crumbs__item { display: inline-flex; }
  .mk-crumbs__item--up a { min-height: 0; }
  .mk-crumbs__item .mk-ico { display: none; }
  .mk-crumbs__item + .mk-crumbs__item::before { content: "/"; margin: 0 8px; color: var(--mk-quiet); font-weight: 500; }
}

.mk-answer { position: relative; max-width: 860px; padding: 22px 16px 16px; border: var(--mk-border); background: var(--mk-accent-2-tint); }
.mk-answer__kicker { position: absolute; top: -12px; left: 12px; margin: 0; }
.mk-answer p + p { margin-top: var(--mk-space-8); }
@media (min-width: 768px) { .mk-answer { padding: 24px 20px 20px; } }

.mk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--mk-micro-size); line-height: 1.5; color: var(--mk-muted); }
.mk-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.mk-meta .mk-ico { color: var(--mk-ink); }

.mk-trust { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--mk-surface-2); border: var(--mk-border); box-shadow: var(--mk-shadow); }
.mk-trust__part { min-width: 0; padding: var(--mk-space-16); }
.mk-trust__part + .mk-trust__part { border-top: var(--mk-border); }
.mk-trust__label { margin-bottom: var(--mk-space-12); color: var(--mk-quiet); }
.mk-trust__who { display: flex; align-items: flex-start; gap: 12px; }
.mk-trust__ava { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: var(--mk-border); background: var(--mk-accent); font: 800 20px/1 var(--mk-font-head); }
.mk-trust__name { font: 700 17px/1.25 var(--mk-font-head); }
.mk-trust__role { margin-top: 2px; font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); }
.mk-trust__text { font-size: var(--mk-small-size); line-height: 1.5; color: var(--mk-muted); }
.mk-trust__part > * + .mk-trust__text { margin-top: var(--mk-space-12); }
.mk-trust__part > .mk-trust__text + .mk-trust__text { margin-top: var(--mk-space-8); }
.mk-trust__list { display: grid; }
.mk-trust__list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: var(--mk-border-soft); font-size: var(--mk-small-size); line-height: 1.35; font-weight: 600; }
.mk-trust__list li span:last-child { flex: none; font: 700 13px/1.5 var(--mk-font-mono); }
.mk-trust__list li small { display: block; font-size: var(--mk-micro-size); font-weight: 400; color: var(--mk-muted); }
.mk-trust__actions { display: flex; flex-wrap: wrap; gap: var(--mk-space-12); margin-top: var(--mk-space-16); padding: 0 4px 4px 0; }
@media (min-width: 768px) { .mk-trust__part { padding: var(--mk-space-20); } }
@media (min-width: 1200px) {
  .mk-trust { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); }
  .mk-trust__part { padding: var(--mk-space-24); }
  .mk-trust__part + .mk-trust__part { border-top: 0; border-left: var(--mk-border); }
}

.mk-faq { max-width: var(--mk-prose); }
h2 + .mk-faq { margin-top: var(--mk-space-20); } /* заголовок «Вопросы и ответы» не прилипает к первому вопросу */
.mk-faq__item { border: var(--mk-border); background: var(--mk-surface); }
.mk-faq__item + .mk-faq__item { margin-top: -2px; }
.mk-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 16px; list-style: none; font: 700 16px/1.3 var(--mk-font-head); }
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::after { content: ""; flex: none; width: 28px; height: 28px; border: var(--mk-border); background: var(--mk-surface) var(--mk-icon-plus) center/16px no-repeat; }
.mk-faq__q:hover { background: var(--mk-surface-2); }
.mk-faq__item[open] > .mk-faq__q { background: var(--mk-accent-2-tint); border-bottom: var(--mk-border); }
.mk-faq__item[open] > .mk-faq__q::after { background-color: var(--mk-accent-2); background-image: var(--mk-icon-minus); }
.mk-faq__a { padding: 16px; font-size: 16px; line-height: 1.6; }
.mk-faq__a p + p { margin-top: var(--mk-space-12); }
@media (min-width: 768px) { .mk-faq__q { font-size: 17px; } }

/* ==========================================================================
   Длинный текст
   ========================================================================== */
.mk-prose { max-width: var(--mk-prose); font-size: var(--mk-prose-size); line-height: var(--mk-prose-lh); }
.mk-prose > * + * { margin-top: var(--mk-space-16); }
.mk-prose h2 { margin-top: var(--mk-space-40); }
.mk-prose h3 { margin-top: 28px; margin-bottom: -4px; }
.mk-prose h4 { margin-top: var(--mk-space-24); margin-bottom: -8px; }
.mk-prose > :first-child { margin-top: 0; }
.mk-prose ul > li { position: relative; padding-left: 24px; }
.mk-prose ul > li::before { content: ""; position: absolute; left: 4px; top: .62em; width: var(--mk-bullet); height: var(--mk-bullet); background: var(--mk-black); }
.mk-prose ol { counter-reset: mk-ol; }
.mk-prose ol > li { position: relative; padding-left: 36px; counter-increment: mk-ol; }
.mk-prose ol > li::before { content: counter(mk-ol); position: absolute; left: 0; top: .12em; display: grid; place-items: center; width: 24px; height: 24px; border: var(--mk-border); background: var(--mk-surface); font: 700 13px/1 var(--mk-font-mono); }
.mk-prose li + li { margin-top: var(--mk-space-8); }
.mk-prose__tablewrap { overflow-x: auto; border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); }
.mk-prose__table { width: 100%; font-size: 15px; line-height: 1.4; }
.mk-prose__table th, .mk-prose__table td { padding: 10px 12px; border-top: var(--mk-border-row); vertical-align: top; }
.mk-prose__table--wide { min-width: 760px; }
.mk-prose__table tbody th { font-weight: 600; white-space: nowrap; }
.mk-prose__table thead th { vertical-align: middle; border-top: 0; border-bottom: var(--mk-border); background: var(--mk-surface-2); white-space: nowrap; font: var(--mk-label-weight) var(--mk-th-size)/var(--mk-th-lh) var(--mk-font-mono); letter-spacing: var(--mk-label-track); text-transform: uppercase; }
.mk-prose__table tbody tr:first-child > * { border-top: 0; }
.mk-prose__table .is-num { text-align: right; font-family: var(--mk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-prose__table th[aria-sort] .mk-th { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: 0 -6px; padding: 0 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.mk-prose__table th[aria-sort] .mk-th:hover { background: var(--mk-accent-2-hover); }
.mk-prose__table th[aria-sort] .mk-th .mk-ico { width: 14px; height: 14px; opacity: .55; }
.mk-prose__table th[aria-sort="ascending"] .mk-th, .mk-prose__table th[aria-sort="descending"] .mk-th { background: var(--mk-accent-2); }
.mk-prose__table th[aria-sort="ascending"] .mk-th .mk-ico { transform: scaleY(-1); opacity: 1; }
.mk-prose__table th[aria-sort="descending"] .mk-th .mk-ico { opacity: 1; }
.mk-note { position: relative; margin-top: 28px; padding: 20px 16px 16px; border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); }
.mk-note__title { position: absolute; top: -12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; height: var(--mk-sticker-h-s); padding: 0 6px; border: var(--mk-border); background: var(--mk-accent-2-tint); font: 700 var(--mk-mono-small)/1 var(--mk-font-mono); }
.mk-note--important .mk-note__title { background: var(--mk-accent-tint); }
.mk-note--warn .mk-note__title { background: var(--mk-warning-tint); }
.mk-note p + p { margin-top: var(--mk-space-8); }
.mk-quote { padding-left: 16px; border-left: var(--mk-mark-w) solid var(--mk-black); font: 700 18px/1.35 var(--mk-font-head); }
.mk-formula { padding: 12px 14px; border: var(--mk-border); background: var(--mk-surface-2); font: 500 15px/1.5 var(--mk-font-mono); overflow-x: auto; }
.mk-proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-12); }
.mk-proscons__col { min-width: 0; border: var(--mk-border); background: var(--mk-surface); }
.mk-proscons__title { padding: 8px 12px; border-bottom: var(--mk-border); background: var(--mk-accent-2-tint); font: 700 16px/1.3 var(--mk-font-head); }
.mk-proscons__col--cons .mk-proscons__title { background: var(--mk-accent-tint); }
.mk-proscons__list { padding: 10px 12px; display: grid; gap: var(--mk-space-8); }
.mk-proscons__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.4; }
.mk-proscons__list .mk-ico { margin-top: 2px; color: var(--mk-success); }
.mk-proscons__col--cons .mk-ico { color: var(--mk-error); }
.mk-toc { border: var(--mk-border); background: var(--mk-surface); padding: 12px; }
.mk-toc__title { margin-bottom: 8px; color: var(--mk-quiet); }
.mk-toc a { display: block; padding: 6px 8px; font-size: var(--mk-small-size); line-height: 1.35; text-decoration: none; }
.mk-toc a:hover, .mk-toc a[aria-current="true"] { background: var(--mk-accent-2); }
@media (min-width: 768px) {
  .mk-prose h2 { margin-top: var(--mk-space-48); }
  .mk-prose h3 { margin-top: var(--mk-space-32); }
  .mk-quote { font-size: 20px; }
  .mk-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .mk-prose h2 { margin-top: 56px; } }

/* ==========================================================================
   Блоки ссылок
   ========================================================================== */
.mk-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-card-gap); }
.mk-sectile { display: flex; flex-direction: column; min-width: 0; padding: var(--mk-space-16); }
.mk-sectile__head { display: flex; align-items: flex-start; gap: 12px; }
.mk-sectile__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: var(--mk-border); background: var(--mk-accent-2); }
.mk-sectile:nth-child(3n+2) .mk-sectile__ico { background: var(--mk-accent); }
.mk-sectile:nth-child(3n) .mk-sectile__ico { background: var(--mk-surface-2); }
.mk-sectile__title { font: 700 17px/1.2 var(--mk-font-head); }
.mk-sectile__link { text-decoration: none; }
.mk-sectile__link::after { content: ""; position: absolute; inset: 0; }
.mk-sectile__count { display: block; margin-top: 4px; font: 700 var(--mk-mono-small)/1.3 var(--mk-font-mono); font-variant-numeric: tabular-nums; color: var(--mk-quiet); }
.mk-sectile__text { margin-top: var(--mk-space-12); font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); }
.mk-sectile__picks { position: relative; z-index: 1; margin-top: var(--mk-space-12); padding-top: var(--mk-space-8); border-top: var(--mk-border-soft); display: grid; }
.mk-sectile__picks a { display: flex; align-items: center; min-height: 44px; font-size: var(--mk-small-size); line-height: 1.3; text-underline-offset: 3px; }
.mk-sectile__picks a:hover { background: var(--mk-accent-2); }
@media (min-width: 768px) { .mk-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mk-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mk-sectile { padding: var(--mk-space-20); } .mk-sectile__picks a { min-height: 32px; } }

.mk-picks { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 0 2px; }
.mk-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 56px; margin: 0 0 -2px; padding: 8px 12px 8px 14px; border: var(--mk-border); background: var(--mk-surface); font: 600 15px/1.3 var(--mk-font-body); text-decoration: none; }
.mk-pick:hover { background: var(--mk-accent-2); position: relative; }
.mk-pick .mk-sticker { flex: none; }
@media (min-width: 768px) { .mk-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-pick { margin-right: -2px; } }
@media (min-width: 1200px) { .mk-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mk-pair { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; text-decoration: none; }
.mk-pair__or { flex: none; font: 700 var(--mk-mono-small)/1 var(--mk-font-mono); color: var(--mk-quiet); }
.mk-pair__side { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; font: 700 15px/1.2 var(--mk-font-head); }
.mk-pair__side:last-child { justify-content: flex-end; text-align: right; }

.mk-post { display: flex; flex-direction: column; min-width: 0; }
.mk-post__cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-bottom: var(--mk-border); background: var(--mk-surface-2); }
.mk-post__body { display: flex; flex-direction: column; gap: var(--mk-space-8); padding: var(--mk-space-16); flex: 1 1 auto; }
.mk-post__rubric { color: var(--mk-accent-text); }
.mk-post__title { font: 700 18px/1.25 var(--mk-font-head); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.mk-post__link { text-decoration: none; }
.mk-post__link::after { content: ""; position: absolute; inset: 0; }
.mk-post__text { font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mk-post__meta { margin-top: auto; padding-top: 4px; font: 500 var(--mk-mono-small)/1.4 var(--mk-font-mono); color: var(--mk-quiet); }
@media (min-width: 1200px) { .mk-post__title { font-size: 20px; } }

.mk-tools { display: grid; grid-template-columns: minmax(0, 1fr); border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); }
.mk-toolrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 14px 16px; text-decoration: none; }
.mk-toolrow + .mk-toolrow { border-top: var(--mk-border); }
.mk-toolrow:hover { background: var(--mk-accent-2); }
.mk-toolrow__ico { display: grid; place-items: center; width: 44px; height: 44px; border: var(--mk-border); background: var(--mk-surface); }
.mk-toolrow__title { font: 700 17px/1.25 var(--mk-font-head); }
.mk-toolrow__text { grid-column: 2; font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); }
.mk-toolrow:hover .mk-toolrow__text { color: var(--mk-ink); }
.mk-toolrow__go { display: none; }
@media (min-width: 768px) {
  .mk-toolrow { grid-template-columns: 44px minmax(0, 4fr) minmax(0, 7fr) auto; gap: 16px; padding: 16px 20px; }
  .mk-toolrow__text { grid-column: auto; }
  .mk-toolrow__go { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--mk-font-head); white-space: nowrap; }
}

/* ==========================================================================
   Страницы сервиса и инструмента
   ========================================================================== */
.mk-company-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-20); padding: var(--mk-space-16); }
.mk-company-head__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; min-width: 0; }
.mk-company-head__kind { margin-top: 4px; font-size: var(--mk-small-size); color: var(--mk-quiet); }
.mk-company-head__short { grid-column: 1 / -1; font-size: var(--mk-lead-size); line-height: var(--mk-lead-lh); max-width: 70ch; }
.mk-company-head__stickers { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 24px; }
.mk-company-head__stickers > div { display: grid; gap: 8px; justify-items: start; }
.mk-company-head__stickers .mk-label { color: var(--mk-quiet); }
.mk-company-head__side { display: grid; gap: var(--mk-space-12); align-content: start; min-width: 0; }
.mk-company-head__score { display: flex; align-items: center; gap: 14px; }
.mk-company-head__num { display: grid; place-items: center; flex: none; min-width: 72px; height: 72px; padding: 0 8px; background: var(--mk-black); color: var(--mk-on-black); font: var(--mk-fig-weight) 36px/1 var(--mk-font-mono); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .mk-company-head { padding: var(--mk-space-20); }
  .mk-company-head__num { min-width: var(--mk-score-l); height: var(--mk-score-l); font-size: var(--mk-fig-xl); }
}
@media (min-width: 1200px) {
  .mk-company-head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--mk-space-32); padding: var(--mk-space-24); }
  .mk-company-head__side { padding-left: var(--mk-space-32); border-left: var(--mk-border); }
}

.mk-tool { display: grid; grid-template-columns: minmax(0, 1fr); }
.mk-tool__form { min-width: 0; padding: var(--mk-space-16); display: grid; gap: var(--mk-space-20); align-content: start; }
.mk-tool__result { min-width: 0; padding: var(--mk-space-16); background: var(--mk-surface-2); border-top: var(--mk-border-heavy); display: grid; gap: var(--mk-space-16); align-content: start; }
.mk-tool__step { color: var(--mk-quiet); }
.mk-tool__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-8); }
/* Калькулятор показателей рекламы: поля слева, пять строк результата справа */
.mk-calc__title { margin-top: 6px; font: 700 18px/1.25 var(--mk-font-head); }
.mk-calc__hint { margin-top: 6px; font-size: var(--mk-small-size); line-height: var(--mk-small-lh); color: var(--mk-muted); }
.mk-calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-space-12); }
.mk-field--wide { grid-column: 1 / -1; }
.mk-calc__note { font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-error); }
.mk-calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--mk-space-12); align-items: center; padding: 10px 0; border-top: 1px solid var(--mk-line); }
.mk-calc__row:first-child { padding-top: 0; border-top: 0; }
.mk-calc__name { grid-column: 1; font: 700 15px/1.3 var(--mk-font-head); }
.mk-calc__what { grid-column: 1; font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-muted); }
.mk-calc__val { grid-column: 2; grid-row: 1 / span 2; font: var(--mk-fig-weight) var(--mk-fig-m)/1 var(--mk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 768px) {
  .mk-tool__form, .mk-tool__result { padding: var(--mk-space-20); }
  .mk-tool__copy { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1200px) {
  .mk-tool { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mk-tool__form, .mk-tool__result { padding: var(--mk-space-24); }
  .mk-tool__result { border-top: 0; border-left: var(--mk-border-heavy); }
}

.mk-nf { display: grid; gap: var(--mk-space-32); justify-items: start; padding: var(--mk-space-40) 0; }
.mk-nf__code { display: inline-block; padding: 8px 20px; border: var(--mk-border-heavy); background: var(--mk-accent); box-shadow: var(--mk-shadow); transform: rotate(-2deg); font: 800 96px/1 var(--mk-font-mono); }
@media (min-width: 768px) { .mk-nf__code { font-size: 128px; box-shadow: var(--mk-shadow-l); } }
@media (min-width: 1200px) { .mk-nf { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--mk-space-64); } .mk-nf__code { font-size: 160px; } }

/* ==========================================================================
   Блоки подборки и раздела
   ========================================================================== */
.mk-rule { display: flex; align-items: flex-start; gap: 10px; max-width: 860px; padding: 12px 14px; border: var(--mk-border-dash); font-size: 15px; line-height: 1.5; }
.mk-rule .mk-ico { margin-top: 2px; }
.mk-rule b { font-weight: 700; }

.mk-review { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-16); padding: var(--mk-space-16); min-width: 0; }
.mk-review > * { min-width: 0; }
.mk-review__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
.mk-review__head .mk-tile { grid-row: 1 / 3; }
.mk-review__title { font: 700 20px/1.2 var(--mk-font-head); }
.mk-review__title a { text-decoration: none; }
.mk-review__title a:hover { background: var(--mk-accent-2); }
.mk-review__kind { grid-column: 2; font-size: var(--mk-micro-size); line-height: var(--mk-micro-lh); color: var(--mk-quiet); }
.mk-review__head .mk-score { grid-column: 3; grid-row: 1 / 3; }
.mk-review__text { font-size: 16px; line-height: 1.55; }
.mk-review__for { font-size: var(--mk-small-size); line-height: 1.5; color: var(--mk-muted); }
.mk-review__for b { color: var(--mk-ink); }
.mk-review__stickers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 2px 4px 2px 0; }
.mk-review .mk-proscons { align-self: start; }
.mk-review__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 4px 4px 0; }
@media (min-width: 768px) {
  .mk-review { padding: var(--mk-space-20); }
  .mk-review__actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1200px) {
  .mk-review { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mk-space-20) var(--mk-space-32); padding: var(--mk-space-24); }
  .mk-review__intro { display: grid; gap: var(--mk-space-16); align-content: start; }
}
.mk-review__intro { display: grid; gap: var(--mk-space-16); align-content: start; }

.mk-scenarios { display: grid; grid-template-columns: minmax(0, 1fr); border: var(--mk-border); background: var(--mk-surface); box-shadow: var(--mk-shadow); counter-reset: mk-sc; }
.mk-scenario { position: relative; min-width: 0; padding: 16px 16px 16px 60px; counter-increment: mk-sc; }
.mk-scenario + .mk-scenario { border-top: var(--mk-border); }
.mk-scenario::before { content: counter(mk-sc); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border: var(--mk-border); background: var(--mk-accent-2); font: 800 16px/1 var(--mk-font-mono); }
.mk-scenario__if { font: 700 17px/1.3 var(--mk-font-head); }
.mk-scenario__then { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mk-muted); }
.mk-scenario__then a { color: var(--mk-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mk-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mk-scenario__then a:hover { background: var(--mk-accent-2); }
@media (min-width: 1200px) {
  .mk-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-scenario { padding: 20px 20px 20px 68px; }
  .mk-scenario::before { left: 20px; top: 20px; }
  .mk-scenario:nth-child(2) { border-top: 0; }
  .mk-scenario:nth-child(even) { border-left: var(--mk-border); }
}

.mk-excluded { display: grid; max-width: 980px; }
.mk-excluded__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border: var(--mk-border-dash); background: none; }
.mk-excluded__row + .mk-excluded__row { margin-top: -2px; }
.mk-excluded__row .mk-tile { grid-row: 1 / 3; }
.mk-excluded__name { font: 700 16px/1.25 var(--mk-font-head); }
.mk-excluded__name a { text-underline-offset: 3px; }
.mk-excluded__name a:hover { background: var(--mk-accent-2); }
.mk-excluded__why { grid-column: 2; font-size: var(--mk-small-size); line-height: 1.45; color: var(--mk-muted); }

/* Обложка статьи: плоский фон по рубрике, крупные фигуры с рамкой 2px, значок рубрики */
.mk-post__cover--1 { background: var(--mk-accent-tint); }
.mk-post__cover--2 { background: var(--mk-accent-2-tint); }
.mk-post__cover--3 { background: var(--mk-surface-2); }
.mk-post__cover--4 { background: var(--mk-accent-2); }
.mk-post__cover--5 { background: var(--mk-accent); }
.mk-post__cover * { vector-effect: non-scaling-stroke; }
.mk-post__cover .mk-cv { stroke: var(--mk-line-ink); stroke-width: 2; }
.mk-post__cover .mk-cv--a { fill: var(--mk-accent); }
.mk-post__cover .mk-cv--b { fill: var(--mk-accent-2); }
.mk-post__cover .mk-cv--c { fill: var(--mk-surface); }
.mk-post__cover .mk-cv--d { fill: var(--mk-black); }
.mk-post__cover .mk-cv--e { fill: var(--mk-surface-2); }
.mk-post__cover .mk-cv--n { fill: none; stroke-linecap: square; }