/* ==========================================================================
   Банковские карты — components.css
   Все компоненты дизайн-системы «Пластик на тёмном столе» (05-design.md, разделы 6–8).
   Один класс — один стиль на всех страницах, вариации — модификаторами «--». Раскладка страниц — в page-*.css.
   Правила системы: плоско, границы 1px, углы 0 или 4px; карточная форма (угол 4% и торец) — только у .kt-card;
   мятный — действие и расчёт сайта, янтарный — только кэшбэк и процент на остаток.
   Медиазапросы только min-width: 768px и min-width: 1200px.

   СПИСОК КОМПОНЕНТОВ
    1. Иконка                .kt-ico  --m --l
    2. Плитка логотипа       .kt-logo  --xs --s --m --l · __img (.is-loaded ставит site.js)
    3. Карта-плитка          .kt-card  --s --m --virtual --off · .is-compared · __chip __fig __cap __bank __name __figs __foot
    4. Полоса условий        .kt-fine  --noyear --stack · __cap __list __year __yearcap __src
    5. Список и строка       .kt-list  __more __empty · .kt-row  __main __head __rank __rank-word __name __kind __what __params __cmp __actions
    6. Предложение (карта M) .kt-offers · .kt-offer  __what
    7. Оценка                .kt-score  --l --none · __num __of __bar __text
    8. Разбор оценки         .kt-breakdown  --compact · __row __name __w __bar __bar--b __val __note
    9. Кнопки                .kt-btn  --primary --text --s --l --block · .kt-actions
   10. Чипы                  .kt-chips  --wrap · .kt-chip  __input __n · .is-on
   11. Поле и флажки         .kt-field  --error · __label __box __input __input--num __unit __error · .kt-check __input · .kt-radio __input
   12. Вкладки               .kt-tabs · .kt-tab  __n
   13. Счётчик               .kt-count
   14. Первый экран          .kt-hero  --calc · __text __aside · .kt-pick  __more __extra __status __sort-m · .kt-calc  __hint
   15. Таблица рейтинга      .kt-table-wrap · .kt-table  __num __gain __id __date __types __score __of __bank __name __kind __actions __key
                             __c-name __c-score __c-wide __c-actions · .kt-sort
   16. Бейдж                 .kt-badge  --accent --gain --ok --warn --ad
   17. Панель сравнения      .kt-cmpbar  __in __count __list __item __x __hint · .kt-stickycta
   18. Вопросы и ответы      .kt-faq  __item __q __a __ico--plus __ico--minus
   19. Хлебные крошки        .kt-crumbs
   20. Автор и методика      .kt-trust  __who __name __role __facts __links __how __title __formula
   21. Длинный текст         .kt-prose  __table · .kt-callout  --warn --calc · __title __list
   22. Карточка статьи       .kt-posts · .kt-post  --lead · __rubric __title __lead __meta
   23. Раскрытие             .kt-disclosure
   24. Строка-ссылка         .kt-linkrows  --cols · .kt-linkrow  __lead __rank __body __name __n __meta __note --plus --warn __value __cap __go
   25. Ключевые цифры        .kt-keyfigs  __cell __label __fig --long __card __src
   26. Бок о бок             .kt-vs-wrap · .kt-vs  __row __row--head __label __cell __val __src
   27. Таблица условий       .kt-finetable  __note __val
   28. Плюсы и минусы, шаги  .kt-proscons  __col __title __list --plus --minus · .kt-steps  __item __n __title __text
   29. Банки                 .kt-banks  __item __name __lic
   30. Переход               .kt-teaser  __text
   31. Оглавление, страницы  .kt-toc · .kt-pager  __item
   32. Шапка банка           .kt-bankhead  __main __meta __legal __side
   33. Сравнить два банка    .kt-cmpform  __or __error
   34. Отзывы                .kt-review  __head __name __score __text
   35. Знак №                .kt-no — всегда шрифтом текста
   36. Реклама и статус      .kt-ad · .kt-fine__ad · .kt-ad-mark · .kt-row__status  __status-note · .kt-table__status
   37. Поиск по названию     .kt-search  __input · .kt-pick__filters · .kt-pick__links
   38. Почему подходит       .kt-why — строка под фразой банка на странице подбора (вопросы подбора — в page-podbor.css,
                             выбор банков и таблица на 2–4 колонки — в page-company.css, раздел 3)
   ========================================================================== */

/* ---------- 1. Иконка ---------- */

.kt-ico {
  flex: none;
  width: var(--kt-icon-s);
  height: var(--kt-icon-s);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kt-ico--m { width: var(--kt-icon-m); height: var(--kt-icon-m); }
.kt-ico--l { width: var(--kt-icon-l); height: var(--kt-icon-l); }

/* ---------- 2. Плитка логотипа с буквой ---------- */

.kt-logo {
  --kt-logo-size: var(--kt-logo-m);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--kt-logo-size);
  height: var(--kt-logo-size);
  overflow: hidden;
  background: var(--kt-plate);
  color: var(--kt-on-plate);
  border-radius: var(--kt-radius);
  font-family: var(--kt-font-head);
  font-size: calc(var(--kt-logo-size) * 0.46);
  font-weight: var(--kt-weight-bold);
  line-height: 1;
}
.kt-logo--xs { --kt-logo-size: var(--kt-logo-xs); }
.kt-logo--s { --kt-logo-size: var(--kt-logo-s); }
.kt-logo--m { --kt-logo-size: var(--kt-logo-m); }
.kt-logo--l { --kt-logo-size: var(--kt-logo-l); }
.kt-logo__img {
  position: absolute;
  top: 18.75%;
  left: 18.75%;
  width: 62.5%;
  height: 62.5%;
  background: var(--kt-plate);     /* закрывает букву, когда значок загрузился */
  object-fit: contain;
}
.kt-js .kt-logo__img:not(.is-loaded) { visibility: hidden; }   /* пока значок грузится или не загрузился, видна буква */

/* ---------- 3. Карта-плитка: единственный предмет с углом карты и торцом ---------- */

.kt-card {
  display: grid;
  aspect-ratio: var(--kt-card-ratio);
  min-width: 0;
  overflow: hidden;
  background: var(--kt-plastic);
  color: var(--kt-ink);
  border: var(--kt-line-w) solid var(--kt-plastic-edge);
  border-bottom-width: var(--kt-edge-w);
  border-radius: var(--kt-radius-card);
  transition: transform var(--kt-ease), border-color var(--kt-ease);
}
a.kt-card:hover {
  transform: translateY(var(--kt-lift));
  border-color: var(--kt-accent);
}
.kt-card__chip {
  width: var(--kt-chip-w-s);
  height: auto;
  aspect-ratio: var(--kt-chip-ratio);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--kt-quiet);
}
.kt-card .kt-fig { display: block; }
.kt-card__cap {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  color: var(--kt-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Малая: иллюстрация в строке списка */
.kt-card--s {
  flex: none;
  width: var(--kt-card-s);
  padding: var(--kt-card-pad-s);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.kt-card--s .kt-card__chip { grid-area: 1 / 1; }
.kt-card--s .kt-logo { --kt-logo-size: var(--kt-card-logo); grid-area: 1 / 2; }
.kt-card--s .kt-card__fig { grid-area: 3 / 1 / 4 / 3; min-width: 0; }
.kt-card--s .kt-fig {
  font-size: var(--kt-fig-s);
  font-stretch: var(--kt-mono-wdth-tight);
}
.kt-card--s .kt-fig--long { font-size: calc(var(--kt-fig-s) - 2px); }

/* Средняя: страница банка, сравнение, статья */
.kt-card--m {
  width: 100%;
  max-width: var(--kt-card-m-max);
  padding: var(--kt-card-pad-m);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
}
.kt-card--m .kt-card__chip { width: var(--kt-chip-w-m); grid-area: 1 / 1; }
.kt-card__bank {
  grid-area: 1 / 2;
  overflow: hidden;
  font-family: var(--kt-font-head);
  font-size: 15px;
  font-weight: var(--kt-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kt-card--m .kt-logo { --kt-logo-size: var(--kt-logo-s); grid-area: 1 / 3; }
.kt-card__name {
  grid-column: 1 / -1;
  overflow: hidden;
  font-size: var(--kt-small-size);
  line-height: 1.3;
  color: var(--kt-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kt-card__figs {
  grid-column: 1 / -1;
  display: grid;
  align-content: center;
  gap: 6px;
}
.kt-card__figs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kt-space-12);
}
.kt-card__figs dt {
  overflow: hidden;
  font-size: var(--kt-micro-size);
  line-height: 1.4;
  color: var(--kt-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kt-card__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kt-space-12);
}
.kt-card__score {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  font-weight: var(--kt-weight-semibold);
  white-space: nowrap;
}

/* Варианты */
.kt-card--virtual {
  background: transparent;
  border: var(--kt-line-w) dashed var(--kt-line-strong);
}
.kt-card--virtual .kt-card__chip { display: none; }
.kt-card--off,
.kt-card--off .kt-fig--gain,
.kt-card--off .kt-card__cap,
.kt-card--off .kt-card__figs dt { color: var(--kt-quiet); }
.kt-card.is-compared { border-color: var(--kt-accent); }
.kt-card.is-compared .kt-card__chip { color: var(--kt-accent); }

@media (prefers-reduced-motion: reduce) {
  a.kt-card:hover,
  .kt-row__main:hover .kt-card { transform: none; }
}

/* ---------- 4. Полоса условий «мелким шрифтом» — крупно, под каждой строкой и картой ---------- */

.kt-fine {
  display: grid;
  grid-template-columns: var(--kt-fine-cols);
  grid-template-areas: "cap" "list" "year" "src";
  gap: var(--kt-space-8) var(--kt-space-16);
  padding: var(--kt-space-12);
  background: var(--kt-surface);
  color: var(--kt-ink);
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-fine-wdth);
  font-size: var(--kt-fine-size);
  font-weight: var(--kt-fine-weight);
  line-height: var(--kt-fine-lh);
}
.kt-fine__cap {
  grid-area: cap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-fine__cap .kt-ico { color: var(--kt-accent); }
.kt-fine__list {
  grid-area: list;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}
.kt-fine__year {
  grid-area: year;
  min-width: 0;
}
.kt-fine__year dl {
  display: grid;
  gap: var(--kt-space-4);
}
.kt-fine__year dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--kt-space-12);
}
.kt-fine__year dt { color: var(--kt-muted); }
.kt-fine__year dd {
  margin-left: auto;
  font-size: inherit;
  font-stretch: inherit;
  font-weight: var(--kt-weight-semibold);
  line-height: inherit;
  white-space: nowrap;
}
.kt-fine__yearcap { margin-bottom: var(--kt-space-4); }
.kt-fine__src {
  grid-area: src;
  font-size: 12px;
  color: var(--kt-muted);
}
.kt-fine__src a {
  color: var(--kt-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kt-fine__src a:hover { color: var(--kt-accent-hover); }
.kt-fine--noyear { grid-template-areas: "cap" "list" "src"; }

@media (min-width: 768px) {
  .kt-fine {
    grid-template-areas: "cap cap" "list year" "src src";
    padding: var(--kt-space-12) var(--kt-space-16);
  }
  .kt-fine--noyear,
  .kt-fine--stack {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cap" "list" "src";
  }
  .kt-fine--stack { grid-template-areas: "cap" "list" "year" "src"; }
  .kt-fine--stack.kt-fine--noyear { grid-template-areas: "cap" "list" "src"; }
}

@media (min-width: 1200px) {
  .kt-fine {
    grid-template-rows: auto 1fr;
    grid-template-areas: "cap list year" "src list year";
  }
  .kt-fine--noyear {
    grid-template-columns: 156px minmax(0, 1fr);
    grid-template-areas: "cap list" "src list";
  }
  .kt-fine--stack,
  .kt-fine--stack.kt-fine--noyear {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "cap" "list" "year" "src";
  }
  .kt-fine--stack.kt-fine--noyear { grid-template-areas: "cap" "list" "src"; }
}

/* ---------- 5. Список и строка — главный вид листинга ---------- */

.kt-list { border-top: var(--kt-border); }
.kt-row {
  padding: var(--kt-space-16) 0;
  border-bottom: var(--kt-border);
}
.kt-row__main {
  position: relative;
  display: grid;
  grid-template-columns: var(--kt-row-cols);
  grid-template-areas: "card head" "what what" "params params" "score cmp" "actions actions";
  align-items: start;
  gap: var(--kt-row-gap);
  padding-bottom: var(--kt-space-12);
  transition: background-color var(--kt-ease);
}
.kt-row__main:hover { background: var(--kt-surface); }
.kt-row__main:hover .kt-card {
  transform: translateY(var(--kt-lift));
  border-color: var(--kt-accent);
}
.kt-row .kt-card { grid-area: card; }
.kt-row__head { grid-area: head; min-width: 0; }
.kt-row__rank { display: block; margin-bottom: var(--kt-space-4); }
.kt-row__name {
  font-family: var(--kt-font-head);
  font-size: 17px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.25;
}
.kt-row__name a::after {            /* строка кликабельна целиком */
  content: "";
  position: absolute;
  inset: 0;
}
.kt-row__main:hover .kt-row__name a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kt-row__kind {
  margin-top: var(--kt-space-4);
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-row__what {
  grid-area: what;
  max-width: 760px;
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}
.kt-row__params {
  grid-area: params;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kt-space-12);
}
.kt-row__params > div { min-width: 0; }
.kt-row__params dt {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-row__params dd {
  margin-top: var(--kt-space-2);
  font-stretch: var(--kt-mono-wdth-tight);
  line-height: 1.3;
}
.kt-row .kt-score { grid-area: score; align-self: center; }
.kt-row__cmp {
  grid-area: cmp;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: end;
}
.kt-row__actions {
  grid-area: actions;
  position: relative;
  z-index: 1;
}
.kt-list__more {
  display: grid;
  padding-top: var(--kt-space-16);
}
.kt-list__empty {
  display: grid;
  justify-items: start;
  gap: var(--kt-space-12);
  padding: var(--kt-space-32) 0;
  border-bottom: var(--kt-border);
}

@media (min-width: 768px) {
  .kt-row__main {
    grid-template-areas: "card head score actions" "card what what actions" "params params params cmp";
    padding-bottom: var(--kt-space-16);
  }
  /* Подписи — в первом ряду, значения — во втором: цифры стоят на одной линии, даже если подпись в две строки */
  .kt-row__params {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: var(--kt-space-2) var(--kt-space-16);
  }
  .kt-row__params > div { display: contents; }
  .kt-row__params dt { align-self: end; }
  .kt-row__params dd { margin-top: 0; }
  .kt-row .kt-score { align-self: start; }
  .kt-row__cmp { align-self: end; justify-self: start; }
  .kt-row .kt-row__actions { grid-template-columns: minmax(0, 1fr); }   /* кнопки столбцом справа */
  .kt-list__more { justify-content: start; }
}

@media (min-width: 1200px) {
  .kt-row__main {
    grid-template-areas: none;
    padding-left: 36px;
  }
  .kt-row .kt-card { grid-area: 1 / 1 / span 3 / 2; }
  .kt-row__head { grid-area: 1 / 2 / 2 / 3; }
  .kt-row__params { grid-area: 1 / 3 / 2 / 7; grid-template-columns: subgrid; }
  .kt-row .kt-score { grid-area: 1 / 7 / 2 / 8; }
  .kt-row__actions { grid-area: 1 / 8 / span 2 / 9; }      /* кнопки занимают два ряда: фраза стоит сразу под названием */
  .kt-row__what { grid-area: 2 / 2 / span 2 / 7; }        /* фраза в две строки делит высоту с рядом «Сравнить» */
  .kt-row__cmp { grid-area: 3 / 8 / 4 / 9; align-self: start; }
  /* Место — цифрой слева в поле 36px, слово скрыто для глаз */
  .kt-row__rank {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    margin: 0;
    font-family: var(--kt-font-head);
    font-stretch: normal;
    font-size: 22px;
    font-weight: var(--kt-weight-bold);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
  }
  .kt-row__rank-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- 6. Предложение вокруг карты M: одна–три карты ---------- */

.kt-offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-24);
}
.kt-offer {
  display: grid;
  align-content: start;
  gap: var(--kt-space-12);
  min-width: 0;
}
.kt-offer__what {
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}

@media (min-width: 768px) {
  .kt-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .kt-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 7. Оценка: цифра всегда цветом текста, шкала — доля от десяти ---------- */

.kt-score {
  --kt-score-k: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kt-space-2) var(--kt-space-4);
  min-width: 0;
}
.kt-score__num {
  font-family: var(--kt-font-head);
  font-size: var(--kt-score-size);
  font-weight: var(--kt-weight-heavy);
  line-height: 1;
  color: var(--kt-ink);
}
.kt-score__of {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  font-weight: var(--kt-weight-medium);
  line-height: 1.3;
  color: var(--kt-quiet);
  white-space: nowrap;
}
.kt-score__bar {
  position: relative;
  flex: 0 0 100%;
  height: var(--kt-score-bar-h);
  margin-top: var(--kt-space-4);
}
.kt-score__bar::before,
.kt-score__bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.kt-score__bar::before { width: var(--kt-score-bar-w); background: var(--kt-line); }
.kt-score__bar::after { width: calc(var(--kt-score-bar-w) * var(--kt-score-k)); background: var(--kt-accent); }
.kt-score__text {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-score--l { --kt-score-bar-w: 96px; --kt-score-bar-h: 4px; }
.kt-score--l .kt-score__num { font-size: var(--kt-score-size-l); }

/* ---------- 8. Разбор оценки по критериям ---------- */

.kt-breakdown { display: grid; gap: var(--kt-space-16); }
.kt-breakdown__row {
  --kt-k: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name val" "bar bar" "note note";
  align-items: baseline;
  gap: 6px var(--kt-space-12);
}
.kt-breakdown__name {
  grid-area: name;
  font-size: var(--kt-ui-size);
  line-height: var(--kt-ui-lh);
}
.kt-breakdown__w {
  margin-left: 6px;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  font-weight: var(--kt-weight-medium);
  color: var(--kt-quiet);
  white-space: nowrap;
}
.kt-breakdown__bar {
  grid-area: bar;
  position: relative;
  align-self: center;
  height: 6px;
  background: var(--kt-line);
}
.kt-breakdown__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% * var(--kt-k));
  background: var(--kt-accent);
}
.kt-breakdown__bar--b::after { background: var(--kt-ink); }      /* второй банк в сравнении */
.kt-breakdown__val {
  grid-area: val;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 15px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
.kt-breakdown__note {
  grid-area: note;
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}

@media (min-width: 768px) {
  .kt-breakdown__row {
    grid-template-columns: 220px minmax(0, 1fr) 56px;
    grid-template-areas: "name bar val" "note note note";
  }
  .kt-breakdown--compact .kt-breakdown__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name val" "bar bar" "note note";
  }
}

/* ---------- 9. Кнопки ---------- */

.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--kt-control-h);
  padding: 0 var(--kt-space-16);
  background: transparent;
  color: var(--kt-ink);
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  font-family: var(--kt-font-body);
  font-size: var(--kt-ui-size);
  font-weight: var(--kt-weight-semibold);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--kt-ease), border-color var(--kt-ease), color var(--kt-ease);
}
.kt-btn:hover { background: var(--kt-surface-2); border-color: var(--kt-ink); }
.kt-btn:active { background: var(--kt-surface); }

.kt-btn--primary {
  background: var(--kt-accent);
  border-color: var(--kt-accent);
  color: var(--kt-on-accent);
}
.kt-btn--primary:hover { background: var(--kt-accent-hover); border-color: var(--kt-accent-hover); }
.kt-btn--primary:active { background: var(--kt-accent-active); border-color: var(--kt-accent-active); }

.kt-btn--text {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--kt-accent);
  font-weight: var(--kt-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kt-btn--text:hover { background: none; color: var(--kt-accent-hover); }
.kt-btn--text:active { background: none; color: var(--kt-accent-active); }

.kt-btn--s { min-height: var(--kt-control-h-s); padding: 0 var(--kt-space-12); }
.kt-btn--l { min-height: var(--kt-control-h-l); padding: 0 var(--kt-space-20); font-size: 16px; }
.kt-btn--block { width: 100%; }

.kt-btn:disabled,
.kt-btn[aria-disabled="true"] {
  background: var(--kt-disabled-bg);
  border-color: var(--kt-disabled-bg);
  color: var(--kt-disabled-ink);
  cursor: not-allowed;
}

.kt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kt-space-8);
}
.kt-actions > :only-child { grid-column: 1 / -1; }

/* ---------- 10. Чипы и ряд чипов ---------- */

.kt-chips {
  display: flex;
  gap: var(--kt-space-8);
  min-width: 0;
  margin: -4px calc(var(--kt-gutter) * -1) -4px -4px;
  padding: 4px var(--kt-gutter) 4px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kt-chips::-webkit-scrollbar { display: none; }
.kt-chips--wrap {
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.kt-chip {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: var(--kt-control-h-s);
  max-width: 100%;
  padding: 0 var(--kt-space-12);
  background: transparent;
  color: var(--kt-ink);
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  font-family: var(--kt-font-body);
  font-size: var(--kt-small-size);
  font-weight: var(--kt-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--kt-ease), border-color var(--kt-ease);
}
.kt-chip:hover { background: var(--kt-surface-2); border-color: var(--kt-ink); }
.kt-chip.is-on,
.kt-chip[aria-current]:not([aria-current="false"]),
.kt-chip:has(> .kt-chip__input:checked) {
  background: var(--kt-accent-dim);
  border-color: var(--kt-accent);
}
.kt-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.kt-chip:has(> .kt-chip__input:focus-visible) {
  outline: var(--kt-focus-ring);
  outline-offset: var(--kt-focus-offset);
}
.kt-chip > .kt-ico { display: none; color: var(--kt-accent); }
.kt-chip:has(> .kt-chip__input:checked) > .kt-ico { display: block; }
.kt-chip__n {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  color: var(--kt-quiet);
}
select.kt-chip {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: var(--kt-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
}
select.kt-chip option { background: var(--kt-surface-2); color: var(--kt-ink); }

@media (min-width: 768px) {
  .kt-chips {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* ---------- 11. Поле, флажок, радиокнопка ---------- */

.kt-field { display: grid; gap: 6px; min-width: 0; }
.kt-field__label {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-muted);
}
.kt-field__box {
  display: flex;
  align-items: center;
  min-height: var(--kt-control-h);
  background: var(--kt-well);
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  transition: border-color var(--kt-ease);
}
.kt-field__box:hover { border-color: var(--kt-ink); }
.kt-field__box:has(:focus-visible) {
  outline: var(--kt-focus-ring);
  outline-offset: var(--kt-focus-offset);
}
.kt-field__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--kt-control-h) - 2px);
  padding: 0 var(--kt-space-12);
  background: transparent;
  color: var(--kt-ink);
  border: 0;
  border-radius: var(--kt-radius);
  font-size: var(--kt-ui-size);
  line-height: 1.2;
  outline: none;
}
.kt-field__input--num {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-weight: var(--kt-weight-medium);
}
select.kt-field__input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: var(--kt-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
  cursor: pointer;
}
select.kt-field__input option { background: var(--kt-surface-2); color: var(--kt-ink); }
textarea.kt-field__input { min-height: 120px; padding: var(--kt-space-12); line-height: 1.5; resize: vertical; }
.kt-field__unit { flex: none; padding-right: var(--kt-space-12); color: var(--kt-quiet); }
.kt-field--error .kt-field__box { border-color: var(--kt-error); }
.kt-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-error);
}

.kt-check,
.kt-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--kt-space-8);
  font-size: var(--kt-small-size);
  line-height: 1.3;
  color: var(--kt-muted);
  cursor: pointer;
  transition: color var(--kt-ease);
}
.kt-check:hover,
.kt-radio:hover { color: var(--kt-ink); }
.kt-check__input,
.kt-radio__input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: transparent center / 16px 16px no-repeat;
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  cursor: pointer;
  transition: background-color var(--kt-ease), border-color var(--kt-ease);
}
.kt-check__input:hover,
.kt-radio__input:hover { border-color: var(--kt-ink); }
.kt-check__input:checked {
  background-color: var(--kt-accent);
  background-image: var(--kt-icon-check);
  border-color: var(--kt-accent);
}
.kt-check__input:disabled { background-color: var(--kt-disabled-bg); border-color: var(--kt-line); cursor: not-allowed; }
.kt-radio__input { border-radius: var(--kt-radius-round); }
.kt-radio__input:checked {
  background-color: var(--kt-on-accent);
  border: 6px solid var(--kt-accent);
}

/* ---------- 12. Вкладки ---------- */

.kt-tabs {
  display: flex;
  min-width: 0;
  margin-right: calc(var(--kt-gutter) * -1);
  overflow-x: auto;
  scrollbar-width: none;
}
.kt-tabs::-webkit-scrollbar { display: none; }
.kt-tabs::after {                      /* нижняя линия продолжается до правого края */
  content: "";
  flex: 1 0 var(--kt-gutter);
  border-bottom: var(--kt-border);
}
.kt-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 var(--kt-space-20) 0 0;
  background: none;
  color: var(--kt-muted);
  border: 0;
  border-bottom: var(--kt-border);
  border-radius: 0;
  font-family: var(--kt-font-body);
  font-size: var(--kt-ui-size);
  font-weight: var(--kt-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--kt-ease);
}
.kt-tab:hover { color: var(--kt-ink); }
.kt-tab:focus-visible { outline-offset: -2px; }
.kt-tab[aria-current]:not([aria-current="false"]) { color: var(--kt-ink); }
.kt-tab[aria-current]:not([aria-current="false"])::after {    /* линия 2px поверх нижней */
  content: "";
  position: absolute;
  left: 0;
  right: var(--kt-space-20);
  bottom: -1px;
  height: var(--kt-line-w-2);
  background: var(--kt-accent);
}
.kt-tab__n {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  color: var(--kt-quiet);
}

@media (min-width: 768px) {
  .kt-tabs { margin-right: 0; }
  .kt-tabs::after { flex-basis: 0; }
}

/* ---------- 13. Счётчик «Найдено N из M» ---------- */

.kt-count {
  font-size: var(--kt-small-size);
  line-height: 1.3;
  color: var(--kt-muted);
  white-space: nowrap;
}
.kt-count b {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-weight-semibold);
  color: var(--kt-ink);
}

/* ---------- 14. Первый экран: заголовок, инструмент подбора, расчёт «за год» ---------- */

.kt-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-16);
  padding-top: var(--kt-space-24);
}
.kt-hero > * { min-width: 0; }
.kt-hero__text {
  display: grid;
  align-content: start;
  gap: var(--kt-space-12);
}
.kt-hero__aside { align-self: start; }

.kt-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-12);
}
.kt-pick > * { min-width: 0; }
.kt-pick__more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--kt-control-h-s);
  color: var(--kt-accent);
  font-size: var(--kt-small-size);
  font-weight: var(--kt-weight-medium);
  list-style: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kt-pick__more > summary::-webkit-details-marker { display: none; }
.kt-pick__more > summary:hover { color: var(--kt-accent-hover); }
.kt-pick__more[open] > summary .kt-ico { transform: rotate(180deg); }
.kt-pick__extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--kt-space-12);
  padding-top: var(--kt-space-8);
}
.kt-pick__extra > .kt-calc { justify-self: stretch; }
.kt-pick__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kt-space-8) var(--kt-space-20);
  min-height: 32px;
  font-size: var(--kt-small-size);
}
.kt-pick__status > .kt-link { margin-left: auto; }
.kt-pick__status > .kt-pick__sort-m { flex: 1 1 100%; }        /* на телефоне — отдельной строкой под счётчиком, во всю ширину */

.kt-calc {
  display: grid;
  gap: var(--kt-space-8);
  padding: var(--kt-space-16);
  background: var(--kt-well);
  border: var(--kt-border);
}
.kt-calc .kt-field__input,
.kt-calc .kt-field__unit {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 20px;
  font-weight: var(--kt-weight-semibold);
}
.kt-calc .kt-field__input { min-height: 46px; }
.kt-calc__hint {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-muted);
}

@media (min-width: 768px) {
  .kt-hero {
    grid-template-columns: repeat(var(--kt-cols), minmax(0, 1fr));
    gap: var(--kt-space-24) var(--kt-gap);
    padding-top: var(--kt-space-32);
  }
  .kt-hero > * { grid-column: 1 / -1; }
  .kt-hero > .kt-hero__text { grid-column: 1 / span 5; }
  .kt-hero > .kt-hero__aside { grid-column: 6 / -1; }
  /* Поле остатка лежит в разметке внутри details (на телефоне оно свёрнуто), а стоит справа от заголовка */
  .kt-hero--calc > .kt-hero__text { min-height: 204px; }
  .kt-hero--calc .kt-calc {
    position: absolute;
    top: var(--kt-space-32);
    right: 0;
    width: calc((100% - 7 * var(--kt-gap)) / 8 * 3 + 2 * var(--kt-gap));
  }

  .kt-pick { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--kt-space-16); }
  .kt-pick > .kt-tabs,
  .kt-pick > .kt-pick__status { grid-column: 1 / -1; }
  .kt-pick__more[open] > summary { display: none; }
  .kt-pick__extra { padding-top: 0; }
  .kt-pick__extra > select.kt-chip { max-width: 260px; }
  .kt-pick .kt-pick__sort-m { display: none; }      /* от 768px таблицу сортируют заголовки столбцов */
}

@media (min-width: 1200px) {
  .kt-hero { padding-top: var(--kt-space-40); }
  .kt-hero > .kt-hero__text { grid-column: 1 / span 8; }
  .kt-hero > .kt-hero__aside { grid-column: 9 / -1; }
  .kt-hero--calc > .kt-hero__text { min-height: 168px; }
  .kt-hero--calc .kt-calc {
    top: var(--kt-space-40);
    width: calc((100% - 11 * var(--kt-gap)) / 12 * 4 + 3 * var(--kt-gap));
  }
}

/* ---------- 15. Таблица рейтинга: до 768px — карточки, 768–1199 — прокрутка, от 1200 — целиком ---------- */

.kt-table-wrap { position: relative; min-width: 0; }   /* relative: скрытые для глаз подписи шапки остаются внутри обёртки */
.kt-table {
  display: block;
  width: 100%;
  font-size: var(--kt-table-size);
  line-height: var(--kt-table-lh);
}
.kt-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kt-table tbody { display: block; border-top: var(--kt-border); }
.kt-table tbody tr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kt-space-12) var(--kt-space-16);
  padding: var(--kt-space-16) 0;
  border-bottom: var(--kt-border);
}
.kt-table td { display: block; min-width: 0; padding: 0; }
.kt-table td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--kt-space-2);
  font-family: var(--kt-font-body);
  font-stretch: normal;
  font-size: var(--kt-micro-size);
  font-weight: var(--kt-weight-regular);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
  white-space: normal;
}
.kt-table td.kt-table__c-name { grid-column: 1 / -1; padding-right: 92px; }
.kt-table td.kt-table__c-score { position: absolute; top: var(--kt-space-16); right: 0; text-align: right; }
.kt-table td.kt-table__c-score::before { content: none; }
.kt-table td.kt-table__c-wide,
.kt-table td.kt-table__c-actions { grid-column: 1 / -1; }

.kt-table__bank { display: flex; align-items: center; gap: var(--kt-space-12); min-width: 0; }
.kt-table__name {
  font-size: var(--kt-ui-size);
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
  color: var(--kt-ink);
}
.kt-table__name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-table__kind {
  display: block;
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-table__types { font-size: var(--kt-micro-size); line-height: var(--kt-micro-lh); color: var(--kt-muted); }
td.kt-table__num,
td.kt-table__id {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 15px;
  font-weight: var(--kt-num-weight);
  line-height: var(--kt-num-lh);
  white-space: nowrap;
}
td.kt-table__gain { color: var(--kt-accent-2); }
td.kt-table__date {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 12px;
  font-weight: var(--kt-num-weight);
  color: var(--kt-muted);
  white-space: nowrap;
}
.kt-table__score {
  font-family: var(--kt-font-head);
  font-size: 18px;
  font-weight: var(--kt-weight-heavy);
  line-height: 1;
  white-space: nowrap;
}
.kt-table__of {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  color: var(--kt-quiet);
  white-space: nowrap;
}
.kt-table__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--kt-space-8);
}
.kt-table__actions .kt-btn--text { min-height: var(--kt-control-h-s); }

.kt-sort {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--kt-space-4);
  padding: 0;
  background: none;
  color: inherit;
  border: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: color var(--kt-ease);
}
.kt-sort:hover { color: var(--kt-ink); }
.kt-sort .kt-ico { margin-bottom: 1px; }
th[aria-sort="ascending"] .kt-sort,
th[aria-sort="descending"] .kt-sort { color: var(--kt-ink); }
th[aria-sort="ascending"] .kt-sort .kt-ico,
th[aria-sort="descending"] .kt-sort .kt-ico { color: var(--kt-accent); }

@media (min-width: 768px) {
  .kt-table-wrap { overflow-x: auto; }
  .kt-table { display: table; min-width: 960px; }
  .kt-table thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .kt-table tbody { display: table-row-group; border-top: 0; }
  .kt-table tbody tr { position: static; display: table-row; padding: 0; border: 0; }
  .kt-table th,
  .kt-table td {
    display: table-cell;
    padding: 10px var(--kt-space-12);
    border-bottom: var(--kt-border);
    text-align: left;
    vertical-align: middle;
  }
  .kt-table td { height: var(--kt-row-h); }
  .kt-table td[data-label]::before { content: none; }
  .kt-table thead th {
    background: var(--kt-bg);
    color: var(--kt-quiet);
    font-size: var(--kt-th-size);
    font-weight: var(--kt-th-weight);
    line-height: var(--kt-th-lh);
    vertical-align: bottom;
  }
  .kt-table td.kt-table__c-name { padding-right: var(--kt-space-12); }
  .kt-table td.kt-table__c-score { position: static; text-align: left; }
  .kt-table th:first-child,
  .kt-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--kt-bg);
    border-right: var(--kt-border);
  }
  .kt-table tbody tr:hover > td { background: var(--kt-surface); }
  .kt-table .kt-table__num { text-align: right; }
  /* Значок сортировки стоит справа от подписи, поэтому цифры сдвинуты на его ширину: правый край подписи и цифр совпадает */
  .kt-table td.kt-table__num { padding-right: calc(var(--kt-space-12) + var(--kt-icon-s) + var(--kt-space-4)); }
  td.kt-table__num,
  td.kt-table__id { font-size: var(--kt-num-size); }
  .kt-table__of { display: none; }
  .kt-table__actions { display: flex; justify-content: flex-end; gap: var(--kt-space-12); white-space: nowrap; }
  .kt-table__actions .kt-btn--text { min-height: 0; }
  /* Ключевой столбец подборки */
  .kt-table .kt-table__key { background: var(--kt-surface); }
  .kt-table td.kt-table__key { font-weight: var(--kt-weight-semibold); }
  .kt-table thead th.kt-table__key { border-top: var(--kt-line-w-2) solid var(--kt-accent); }
  .kt-table tbody tr:hover > td.kt-table__key { background: var(--kt-surface-2); }
}

@media (min-width: 1200px) {
  .kt-table-wrap { overflow: visible; }
  .kt-table { min-width: 0; }
  .kt-table th:first-child,
  .kt-table td:first-child { position: static; border-right: 0; }
  .kt-table thead th,
  .kt-table thead th:first-child {
    position: sticky;
    top: 0;
    left: auto;
    z-index: var(--kt-z-sticky);
    border-bottom-color: var(--kt-line-strong);
  }
}

/* ---------- 16. Бейдж ---------- */

.kt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kt-space-4);
  min-height: 24px;
  padding: 0 var(--kt-space-8);
  color: var(--kt-muted);
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  font-family: var(--kt-font-body);
  font-size: var(--kt-micro-size);
  font-weight: var(--kt-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}
.kt-badge--accent { background: var(--kt-accent-dim); border-color: var(--kt-accent-dim); color: var(--kt-accent); }
.kt-badge--gain { background: var(--kt-accent-2-dim); border-color: var(--kt-accent-2-dim); color: var(--kt-accent-2); }
.kt-badge--ok { color: var(--kt-success); }
.kt-badge--warn { border-color: var(--kt-warning); color: var(--kt-warning); }
.kt-badge--ad { border-color: var(--kt-line); color: var(--kt-quiet); }

/* ---------- 17. Панель сравнения и закреплённые кнопки страницы банка ---------- */

.kt-cmpbar,
.kt-stickycta {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--kt-z-bar);
  background: var(--kt-surface);
  border-top: var(--kt-line-w-2) solid var(--kt-accent);
}
.kt-cmpbar__in {
  display: flex;
  align-items: center;
  gap: var(--kt-space-12);
  height: var(--kt-bar-h);
}
.kt-cmpbar__count {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--kt-ui-size);
  line-height: 1.2;
}
.kt-cmpbar__count b {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-weight-semibold);
}
.kt-cmpbar__hint { display: block; font-size: var(--kt-micro-size); color: var(--kt-warning); }
.kt-cmpbar__list { display: none; }
.kt-cmpbar__item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--kt-space-8);
  height: 36px;
  padding: 0 2px 0 6px;
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  font-size: var(--kt-small-size);
  white-space: nowrap;
}
.kt-cmpbar__x {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  color: var(--kt-muted);
  border: 0;
  border-radius: var(--kt-radius);
}
.kt-cmpbar__x:hover { color: var(--kt-ink); background: var(--kt-surface-2); }
.kt-stickycta__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--kt-space-8);
  height: var(--kt-bar-h);
}

@media (min-width: 768px) {
  .kt-cmpbar__in { gap: var(--kt-space-16); }
  .kt-cmpbar__count { flex: none; white-space: nowrap; }
  .kt-cmpbar__list {
    display: flex;
    flex: 1 1 auto;
    gap: var(--kt-space-8);
    min-width: 0;
    overflow: hidden;
  }
  .kt-stickycta { display: none; }
}

/* ---------- 18. Вопросы и ответы ---------- */

.kt-faq { border-top: var(--kt-border); }
.kt-faq__item { border-bottom: var(--kt-border); }
.kt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-space-16);
  min-height: 56px;
  padding: var(--kt-space-16) 0;
  font-family: var(--kt-font-head);
  font-size: 17px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
  list-style: none;
  transition: background-color var(--kt-ease);
}
.kt-faq__q::-webkit-details-marker { display: none; }
.kt-faq__q:hover { background: var(--kt-surface); }
.kt-faq__q .kt-ico { color: var(--kt-muted); }
.kt-faq__ico--minus { display: none; }
.kt-faq__item[open] .kt-faq__ico--plus { display: none; }
.kt-faq__item[open] .kt-faq__ico--minus { display: block; color: var(--kt-accent); }
.kt-faq__a {
  max-width: var(--kt-prose);
  padding-bottom: var(--kt-space-20);
  font-size: 16px;
  line-height: 1.55;
  color: var(--kt-ink);
}
.kt-faq__a p + p { margin-top: var(--kt-space-12); }

/* ---------- 19. Хлебные крошки ---------- */

.kt-crumbs {
  margin-right: calc(var(--kt-gutter) * -1);
  padding: var(--kt-space-12) var(--kt-gutter) var(--kt-space-12) 0;
  overflow-x: auto;
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  scrollbar-width: none;
}
.kt-crumbs::-webkit-scrollbar { display: none; }
.kt-crumbs ol { display: flex; gap: var(--kt-space-8); white-space: nowrap; }
.kt-crumbs li { display: flex; gap: var(--kt-space-8); color: var(--kt-muted); }
.kt-crumbs li + li::before { content: "/"; color: var(--kt-quiet); }
.kt-crumbs a { transition: color var(--kt-ease); }
.kt-crumbs a:hover { color: var(--kt-ink); text-decoration: underline; text-underline-offset: 3px; }
.kt-crumbs [aria-current] { color: var(--kt-ink); }

@media (min-width: 768px) {
  .kt-crumbs { margin-right: 0; padding-right: 0; overflow: visible; }
  .kt-crumbs ol { flex-wrap: wrap; white-space: normal; }
}

/* ---------- 20. Автор и методика ---------- */

.kt-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-24);
  padding: var(--kt-space-16);
  border: var(--kt-border);
}
.kt-trust > * { min-width: 0; }
.kt-trust__title { margin-bottom: var(--kt-space-16); }
.kt-trust__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--kt-space-4) var(--kt-space-16);
}
.kt-trust__who .kt-logo { grid-row: 1 / span 2; }
.kt-trust__name {
  font-family: var(--kt-font-head);
  font-size: 17px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
}
.kt-trust__role { font-size: var(--kt-small-size); line-height: var(--kt-small-lh); color: var(--kt-muted); }
.kt-trust__facts { display: grid; gap: var(--kt-space-12); margin-top: var(--kt-space-20); }
.kt-trust__facts dt { font-size: var(--kt-micro-size); line-height: var(--kt-micro-lh); color: var(--kt-quiet); }
.kt-trust__facts dd { margin-top: var(--kt-space-2); font-size: var(--kt-ui-size); line-height: 1.5; }
.kt-trust__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kt-space-8) var(--kt-space-20);
  margin-top: var(--kt-space-20);
  font-size: var(--kt-small-size);
}
.kt-trust__formula {
  margin-top: var(--kt-space-16);
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}

@media (min-width: 768px) {
  .kt-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kt-space-32);
    padding: var(--kt-space-24);
  }
}
@media (min-width: 1200px) {
  .kt-trust {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--kt-space-56);
    padding: var(--kt-space-32);
  }
}

/* ---------- 21. Длинный текст и врезки ---------- */

.kt-prose {
  max-width: var(--kt-prose);
  font-size: var(--kt-text-size);
  line-height: var(--kt-text-lh);
}
.kt-prose > :first-child { margin-top: 0; }
.kt-prose > :last-child { margin-bottom: 0; }
.kt-prose p { margin: 0 0 var(--kt-space-16); }
.kt-prose h2 { margin: var(--kt-space-40) 0 var(--kt-space-12); }
.kt-prose h3 { margin: 28px 0 var(--kt-space-12); }
.kt-prose a:not(.kt-btn) {
  color: var(--kt-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kt-prose a:not(.kt-btn):hover { color: var(--kt-accent-hover); }
.kt-prose ul,
.kt-prose ol { display: grid; gap: var(--kt-space-8); margin: 0 0 var(--kt-space-16); }
.kt-prose ul > li { position: relative; padding-left: 18px; }
.kt-prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--kt-accent);
}
.kt-prose ol { counter-reset: kt-ol; }
.kt-prose ol > li { position: relative; padding-left: 28px; counter-increment: kt-ol; }
.kt-prose ol > li::before {
  content: counter(kt-ol);
  position: absolute;
  top: 0.18em;
  left: 0;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-num-weight);
  color: var(--kt-quiet);
}
.kt-prose__table { margin: 0 0 var(--kt-space-16); overflow-x: auto; }
.kt-prose table { width: 100%; font-size: var(--kt-table-size); line-height: var(--kt-table-lh); }
.kt-prose th,
.kt-prose td { padding: 10px var(--kt-space-12) 10px 0; border-bottom: var(--kt-border); text-align: left; vertical-align: top; }
.kt-prose th { font-size: var(--kt-th-size); font-weight: var(--kt-th-weight); color: var(--kt-quiet); }
.kt-prose td.kt-num,
.kt-prose th.kt-num { text-align: right; white-space: nowrap; }
.kt-prose th.kt-num { font-family: var(--kt-font-body); font-stretch: normal; font-size: var(--kt-th-size); font-weight: var(--kt-th-weight); }
.kt-prose .kt-callout p { margin: 0; }

.kt-callout {
  display: grid;
  gap: var(--kt-space-8);
  margin: 0 0 var(--kt-space-16);
  padding: var(--kt-space-16) var(--kt-space-20);
  background: var(--kt-surface);
  border-left: var(--kt-edge-w) solid var(--kt-accent);
  font-size: var(--kt-ui-size);
  line-height: 1.5;
}
.kt-callout__title {
  display: flex;
  align-items: center;
  gap: var(--kt-space-8);
  font-family: var(--kt-font-head);
  font-size: 16px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
}
.kt-callout__title .kt-ico { color: var(--kt-accent); }
.kt-callout__list { display: grid; gap: var(--kt-space-8); }
.kt-callout__list li { position: relative; padding-left: 18px; }
.kt-callout__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--kt-accent);
}
.kt-callout--warn { border-left-color: var(--kt-warning); }
.kt-callout--warn .kt-callout__title .kt-ico { color: var(--kt-warning); }
.kt-callout--calc { background: var(--kt-well); }
.kt-callout--calc dl { display: grid; gap: var(--kt-space-4); }
.kt-callout--calc dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--kt-space-16); }
.kt-callout--calc dt,
.kt-callout--calc dd {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  line-height: 1.55;
}
.kt-callout--calc dl > div:last-child dd { font-weight: var(--kt-weight-semibold); }

/* ---------- 22. Карточка статьи (без картинок) ---------- */

.kt-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--kt-gap);
}
.kt-post {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--kt-space-8);
  min-width: 0;
  padding: var(--kt-space-16) 0;
  border-top: var(--kt-border);
}
.kt-post__rubric { color: var(--kt-accent); }
.kt-post__title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--kt-font-head);
  font-size: 18px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.kt-post__title a::after { content: ""; position: absolute; inset: 0; }
.kt-post:hover .kt-post__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-post__lead { font-size: var(--kt-ui-size); line-height: 1.5; color: var(--kt-muted); }
.kt-post__meta { font-size: var(--kt-micro-size); line-height: var(--kt-micro-lh); color: var(--kt-muted); }
.kt-post__meta time {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 12px;
}
.kt-post--lead .kt-post__title {
  font-size: var(--kt-h2-size);
  line-height: var(--kt-h2-lh);
  font-weight: var(--kt-h2-weight);
  letter-spacing: var(--kt-h2-track);
}

@media (min-width: 768px) {
  .kt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .kt-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kt-post__title { font-size: 20px; }
  .kt-post--lead .kt-post__title { font-size: var(--kt-h2-size); }
}

/* ---------- 23. Раскрытие о вознаграждении ---------- */

.kt-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--kt-space-8);
  max-width: 960px;
  margin-top: var(--kt-space-16);
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-muted);
}
.kt-disclosure .kt-ico { margin-top: 1px; color: var(--kt-quiet); }

/* ---------- 24. Строка-ссылка: разделы, подборки, топ-5, пары, не прошедшие отбор ---------- */

.kt-linkrows { border-top: var(--kt-border); }
.kt-linkrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "lead body go" "lead value go";
  align-items: center;
  min-height: 56px;
  padding: var(--kt-space-12) 0;
  border-bottom: var(--kt-border);
  color: var(--kt-ink);
  transition: background-color var(--kt-ease);
}
a.kt-linkrow:hover { background: var(--kt-surface); }
a.kt-linkrow:hover .kt-linkrow__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.kt-linkrow:hover .kt-linkrow__go { color: var(--kt-accent); }
.kt-linkrow__lead {
  grid-area: lead;
  display: flex;
  align-items: center;
  align-self: start;
  gap: var(--kt-space-12);
  margin-right: var(--kt-space-12);
}
.kt-linkrow__rank {
  min-width: 18px;
  font-family: var(--kt-font-head);
  font-size: 20px;
  font-weight: var(--kt-weight-bold);
  line-height: 32px;
  color: var(--kt-quiet);
}
.kt-linkrow__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kt-space-4); min-width: 0; }
.kt-linkrow__name {
  font-family: var(--kt-font-head);
  font-size: 17px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
}
.kt-linkrow__n {
  margin-left: 6px;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-num-weight);
  color: var(--kt-quiet);
  white-space: nowrap;
}
.kt-linkrow__meta { font-size: var(--kt-micro-size); line-height: var(--kt-micro-lh); color: var(--kt-quiet); }
.kt-linkrow__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}
.kt-linkrow__note .kt-ico { margin-top: 2px; }
.kt-linkrow__note--plus .kt-ico { color: var(--kt-success); }
.kt-linkrow__note--warn .kt-ico { color: var(--kt-warning); }
.kt-linkrow__value {
  grid-area: value;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--kt-space-8);
  min-width: 0;
  margin-top: var(--kt-space-4);
}
.kt-linkrow__cap { font-size: var(--kt-micro-size); line-height: var(--kt-micro-lh); color: var(--kt-quiet); }
.kt-linkrow__go { grid-area: go; margin-left: var(--kt-space-12); color: var(--kt-quiet); transition: color var(--kt-ease); }

@media (min-width: 768px) {
  .kt-linkrow {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "lead body value go";
  }
  .kt-linkrow__value {
    flex-direction: column;
    align-items: flex-end;
    max-width: 320px;
    margin: 0 0 0 var(--kt-space-24);
    text-align: right;
  }
  .kt-linkrows--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kt-gap);
  }
}

/* ---------- 25. Ключевые цифры банка ---------- */

.kt-keyfigs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--kt-border);
  border-left: var(--kt-border);
}
.kt-keyfigs__cell {
  display: grid;
  align-content: start;
  gap: var(--kt-space-4);
  min-width: 0;
  padding: var(--kt-space-12);
  border-right: var(--kt-border);
  border-bottom: var(--kt-border);
}
.kt-keyfigs__label { font-size: var(--kt-micro-size); line-height: var(--kt-micro-lh); color: var(--kt-quiet); }
.kt-keyfigs__fig { font-size: var(--kt-fig-l); white-space: normal; overflow-wrap: anywhere; }   /* «до» и «от» стоят в подписи, в цифре — число с единицей */
.kt-keyfigs__fig--long { font-size: calc(var(--kt-fig-l) * 0.75); }                                 /* значение длиннее семи знаков */
.kt-keyfigs__card { font-size: var(--kt-small-size); line-height: var(--kt-small-lh); color: var(--kt-muted); }
.kt-keyfigs__src {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  line-height: 1.4;
  color: var(--kt-quiet);
}

@media (min-width: 768px) {
  .kt-keyfigs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kt-keyfigs__cell { padding: var(--kt-space-16); }
}
@media (min-width: 1200px) {
  .kt-keyfigs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 26. Бок о бок: 2–4 банка ---------- */

.kt-vs-wrap { overflow-x: auto; }
.kt-vs { --kt-vs-n: 2; min-width: calc(var(--kt-vs-n) * 148px + (var(--kt-vs-n) - 1) * var(--kt-space-16)); }
.kt-vs__row {
  display: grid;
  grid-template-columns: repeat(var(--kt-vs-n), minmax(0, 1fr));
  gap: var(--kt-space-8) var(--kt-space-16);
  padding: var(--kt-space-12) 0;
  border-bottom: var(--kt-border);
}
.kt-vs__row--head { align-items: end; border-bottom-color: var(--kt-line-strong); }
.kt-vs__label {
  grid-column: 1 / -1;
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-vs__cell { display: grid; align-content: start; justify-items: start; gap: var(--kt-space-4); min-width: 0; }
.kt-vs__val {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 15px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
}
.kt-vs__src {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  line-height: 1.4;
  color: var(--kt-quiet);
}
.kt-vs__src a { color: var(--kt-accent); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .kt-vs__row { grid-template-columns: 200px repeat(var(--kt-vs-n), minmax(0, 1fr)); gap: var(--kt-space-8) var(--kt-space-24); }
  .kt-vs__label { grid-column: 1; font-size: var(--kt-small-size); color: var(--kt-muted); }
}

/* ---------- 27. Таблица условий со звёздочкой в заголовке ---------- */

.kt-finetable { display: block; width: 100%; font-size: var(--kt-table-size); line-height: var(--kt-table-lh); }
.kt-finetable thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kt-finetable tbody { display: block; border-top: var(--kt-border); }
.kt-finetable tr { display: grid; gap: var(--kt-space-12); padding: var(--kt-space-16) 0; border-bottom: var(--kt-border); }
.kt-finetable td { display: block; min-width: 0; padding: 0; }
.kt-finetable td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--kt-space-2);
  font-family: var(--kt-font-body);
  font-stretch: normal;
  font-size: var(--kt-micro-size);
  font-weight: var(--kt-weight-regular);
  color: var(--kt-quiet);
}
.kt-finetable__val {
  display: block;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-weight-semibold);
  line-height: 1.4;
}
.kt-finetable__note {
  display: block;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-fine-wdth);
  font-size: var(--kt-num-size);
  line-height: var(--kt-fine-lh);
  color: var(--kt-ink);
}
.kt-finetable a:not(.kt-table__name) { color: var(--kt-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-finetable a:not(.kt-table__name):hover { color: var(--kt-accent-hover); }

@media (min-width: 768px) {
  .kt-finetable { display: table; }
  .kt-finetable thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .kt-finetable tbody { display: table-row-group; border-top: 0; }
  .kt-finetable tr { display: table-row; padding: 0; border: 0; }
  .kt-finetable th,
  .kt-finetable td {
    display: table-cell;
    padding: var(--kt-space-12) var(--kt-space-16) var(--kt-space-12) 0;
    border-bottom: var(--kt-border);
    text-align: left;
    vertical-align: top;
  }
  .kt-finetable th { font-size: var(--kt-th-size); font-weight: var(--kt-th-weight); line-height: var(--kt-th-lh); color: var(--kt-quiet); vertical-align: bottom; }
  .kt-finetable th:last-child,
  .kt-finetable td:last-child { padding-right: 0; }
  .kt-finetable td[data-label]::before { content: none; }
}

/* ---------- 28. Плюсы и минусы, шаги ---------- */

.kt-proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kt-space-24); }
.kt-proscons__title { margin-bottom: var(--kt-space-12); }
.kt-proscons__list { display: grid; gap: var(--kt-space-8); }
.kt-proscons__list li { display: flex; align-items: flex-start; gap: var(--kt-space-8); font-size: var(--kt-ui-size); line-height: 1.5; }
.kt-proscons__list .kt-ico { margin-top: 3px; }
.kt-proscons__list--plus .kt-ico { color: var(--kt-success); }
.kt-proscons__list--minus .kt-ico { color: var(--kt-warning); }

.kt-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kt-space-20) var(--kt-gap); }
.kt-steps__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: start;
  gap: var(--kt-space-4) var(--kt-space-12);
}
.kt-steps__n {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: var(--kt-border-strong);
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-weight-semibold);
  line-height: 1;
}
.kt-steps__title { align-self: center; min-height: 28px; padding-top: 3px; font-size: 16px; font-weight: var(--kt-weight-semibold); line-height: 1.35; }
.kt-steps__text { grid-column: 2; font-size: var(--kt-ui-size); line-height: 1.5; color: var(--kt-muted); }

@media (min-width: 768px) {
  .kt-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kt-gap); }
  .kt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .kt-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 29. Банки: все эмитенты каталога через линии ---------- */

.kt-banks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--kt-border);
  border-left: var(--kt-border);
}
.kt-banks__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--kt-space-12);
  min-width: 0;
  min-height: 64px;
  padding: var(--kt-space-12);
  border-right: var(--kt-border);
  border-bottom: var(--kt-border);
  transition: background-color var(--kt-ease);
}
.kt-banks__item:hover { background: var(--kt-surface); }
.kt-banks__item .kt-logo { grid-row: 1 / span 2; }
.kt-banks__name { font-size: var(--kt-small-size); font-weight: var(--kt-weight-semibold); line-height: 1.3; }
.kt-banks__item:hover .kt-banks__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-banks__lic {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  line-height: 1.4;
  color: var(--kt-quiet);
}

@media (min-width: 768px) {
  .kt-banks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .kt-banks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 30. Переход к подбору или подборке ---------- */

.kt-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--kt-space-12);
  padding: var(--kt-space-16) var(--kt-space-20);
  background: var(--kt-surface);
  border-left: var(--kt-edge-w) solid var(--kt-accent);
}
.kt-teaser__text { margin-top: var(--kt-space-4); font-size: var(--kt-ui-size); line-height: 1.5; color: var(--kt-muted); }

@media (min-width: 768px) {
  .kt-teaser { grid-template-columns: minmax(0, 1fr) auto; gap: var(--kt-space-24); padding: var(--kt-space-20) var(--kt-space-24); }
}

/* ---------- 31. Оглавление и страницы ленты ---------- */

.kt-toc { display: grid; gap: var(--kt-space-8); counter-reset: kt-toc; }
.kt-toc a {
  display: flex;
  gap: 10px;
  font-size: var(--kt-ui-size);
  line-height: 1.4;
  color: var(--kt-muted);
  transition: color var(--kt-ease);
}
.kt-toc a::before {
  counter-increment: kt-toc;
  content: counter(kt-toc, decimal-leading-zero);
  flex: none;
  padding-top: 2px;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  color: var(--kt-quiet);
}
.kt-toc a:hover,
.kt-toc a[aria-current]:not([aria-current="false"]) { color: var(--kt-ink); }

.kt-pager { display: flex; flex-wrap: wrap; gap: var(--kt-space-8); }
.kt-pager__item {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--kt-space-8);
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-num-weight);
  transition: background-color var(--kt-ease), border-color var(--kt-ease);
}
a.kt-pager__item:hover { background: var(--kt-surface-2); border-color: var(--kt-ink); }
.kt-pager__item[aria-current]:not([aria-current="false"]) { background: var(--kt-accent-dim); border-color: var(--kt-accent); }

/* ---------- 32. Шапка страницы банка ---------- */

.kt-bankhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-20);
  padding-top: var(--kt-space-8);
}
.kt-bankhead__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--kt-space-8) var(--kt-space-16);
}
.kt-bankhead__main .kt-logo { grid-row: 1 / span 2; }
.kt-bankhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kt-space-8) var(--kt-space-12); }
.kt-bankhead__legal {
  grid-column: 1 / -1;
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}
.kt-bankhead__side { display: grid; align-content: start; gap: var(--kt-space-16); }

@media (min-width: 768px) {
  .kt-bankhead { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--kt-space-32); padding-top: var(--kt-space-16); }
  .kt-bankhead__side .kt-actions { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 33. Сравнить два банка ---------- */

.kt-cmpform {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--kt-space-12);
}
.kt-cmpform__or { font-size: var(--kt-small-size); color: var(--kt-quiet); }
.kt-cmpform__error { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .kt-cmpform { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--kt-space-16); max-width: 880px; }
  .kt-cmpform__or { padding-bottom: 12px; }
}

/* ---------- 34. Отзыв ---------- */

.kt-review { display: grid; gap: var(--kt-space-8); padding: var(--kt-space-16) 0; border-top: var(--kt-border); }
.kt-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kt-space-4) var(--kt-space-12); }
.kt-review__name { font-weight: var(--kt-weight-semibold); }
.kt-review__head time {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: 12px;
  color: var(--kt-quiet);
}
.kt-review__score {
  margin-left: auto;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-weight-semibold);
  white-space: nowrap;
}
.kt-review__text { max-width: var(--kt-prose); font-size: var(--kt-ui-size); line-height: 1.55; }


/* ---------- 35. Знак № ---------- */
/* В Martian Mono, ужатом до 75%, знак № сливается в неразборчивый значок: он всегда набирается шрифтом текста. */

.kt-no {
  font-family: var(--kt-font-body);
  font-stretch: normal;
  font-weight: var(--kt-weight-medium);
  letter-spacing: 0;
}
.kt-badge > .kt-no { display: contents; }      /* в бейдже знак остаётся частью строки, а не отдельным элементом ряда */

/* ---------- 36. Пометка рекламы и статус карты ---------- */

.kt-ad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kt-space-4) var(--kt-space-8);
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-muted);
}
.kt-ad > span:last-child { flex: 1 1 200px; min-width: 0; }
.kt-ad .kt-badge { min-height: 20px; }
.kt-fine__ad {
  grid-column: 1 / -1;
  padding-top: var(--kt-space-8);
  border-top: var(--kt-border);
  font-family: var(--kt-font-body);
  font-stretch: normal;
}
.kt-ad-mark {
  grid-column: 1 / -1;
  justify-self: end;
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: var(--kt-cap-size);
  font-weight: var(--kt-cap-weight);
  line-height: var(--kt-cap-lh);
  letter-spacing: var(--kt-cap-track);
  text-transform: uppercase;
  color: var(--kt-quiet);
  white-space: nowrap;
}
.kt-row__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kt-space-4) var(--kt-space-8);
  margin-top: var(--kt-space-8);
}
.kt-row__status-note {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-table__status {
  display: block;
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-warning);
}

/* От 768px «Обзор» и «На сайт» стоят в одну строку, слово «Реклама» — под кнопкой справа */
@media (min-width: 768px) {
  .kt-table .kt-table__actions {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: center;
    gap: var(--kt-space-2) var(--kt-space-12);
  }
}

/* ---------- 37. Поиск по названию банка ---------- */

.kt-pick__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-8);
  min-width: 0;
}
.kt-pick__filters > * { min-width: 0; }
.kt-search {
  display: flex;
  align-items: center;
  gap: var(--kt-space-8);
  min-height: var(--kt-control-h-s);
  padding: 0 var(--kt-space-12);
  background: var(--kt-well);
  color: var(--kt-quiet);
  border: var(--kt-border-strong);
  border-radius: var(--kt-radius);
  transition: border-color var(--kt-ease);
}
.kt-search:hover { border-color: var(--kt-ink); }
.kt-search:has(:focus-visible) {
  outline: var(--kt-focus-ring);
  outline-offset: var(--kt-focus-offset);
}
.kt-search__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--kt-control-h-s) - 2px);
  padding: 0;
  background: transparent;
  color: var(--kt-ink);
  border: 0;
  font-size: var(--kt-small-size);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.kt-search__input::placeholder { color: var(--kt-quiet); opacity: 1; }
.kt-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kt-pick__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kt-space-4) var(--kt-space-20);
  margin-left: auto;
}

@media (min-width: 768px) {
  .kt-pick__filters { grid-template-columns: 240px minmax(0, 1fr); gap: var(--kt-space-8); align-items: start; }
}

/* ---------- 38. Строка «Почему подходит»: объяснение подбора под фразой банка ---------- */

.kt-row__what > p + p { margin-top: var(--kt-space-8); }
.kt-why { color: var(--kt-ink); }
.kt-why > .kt-ico {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--kt-accent);
}
.kt-why > b { font-weight: var(--kt-weight-semibold); }
.kt-row__status .kt-badge {
  align-items: flex-start;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: normal;
}
.kt-row__status .kt-badge .kt-ico { margin-top: 1px; }