/* ============================================================================
   refresh.css — облегчение графики + первый экран каталога на телефоне.
   Пилот: hub.html (каталог займов). Подключается ПОСЛЕ style.css и pages-*.css.
   1) типографика на Onest (Manrope остаётся запасным), 2) меньше обводок, больше воздуха,
   3) на ≤760px: плитки → чипсы, шапка каталога сжата, офферы выходят на первый экран.
   ========================================================================== */

/* ── 1. Типографика ─────────────────────────────────────────────────────── */
:root{
  --rf-font:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* мягкие тени вместо обводок: 1px контур убран, глубина даётся тенью */
  --rf-shadow:0 1px 2px rgb(16 24 40 / .04), 0 6px 16px -6px rgb(16 24 40 / .10);
  --rf-shadow-hover:0 2px 4px rgb(16 24 40 / .06), 0 12px 24px -8px rgb(16 24 40 / .16);
  --rf-ring:0 0 0 0 transparent; /* владелец: обводку убрать со всех блоков */
  --rf-r:16px;
}
body,button,input,select,textarea{font-family:var(--rf-font)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     font-feature-settings:'ss01' 1; text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.018em; text-wrap:balance}
p{text-wrap:pretty}
.za-v,.za-num,.kr-num{font-variant-numeric:tabular-nums}

/* ── 2. Легче: карточки без обводок, тени вместо рамок ──────────────────── */
.za-card,.kr-pv,.card,.tile{
  border:0 !important;
  border-radius:var(--rf-r);
  background:#fff;
  box-shadow:var(--rf-ring), var(--rf-shadow);
  transition:box-shadow .18s ease-out, transform .18s ease-out;
}
.za-card:hover,.kr-pv:hover,.card:hover{box-shadow:var(--rf-ring), var(--rf-shadow-hover)}
.za-hr{background:rgb(16 24 40 / .06) !important}
.kr-sec > h2{font-weight:700}

/* плитки категорий: мягкие чипсы, без рамок */
.cats a{border:0 !important; background:#fff; box-shadow:var(--rf-ring), 0 1px 2px rgb(16 24 40 / .04)}
.cats a:hover{box-shadow:var(--rf-ring), var(--rf-shadow)}

/* кнопки: заметная главная, без двойных рамок */
.za-cta,.btn.primary{border:0; box-shadow:0 1px 2px rgb(16 24 40 / .12), 0 8px 16px -8px rgb(32 94 224 / .5)}
.za-cta:hover,.btn.primary:hover{box-shadow:0 2px 4px rgb(16 24 40 / .14), 0 12px 22px -10px rgb(32 94 224 / .55)}
.za-cta:active,.btn.primary:active{transform:scale(.96)}
.za-more{display:inline-block;margin-top:8px;font-size:13px;color:var(--faint);text-decoration:none}
.za-more:hover{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .za-card,.za-cta,.btn.primary{transition:none}
  .za-cta:active,.btn.primary:active{transform:none}
}

/* ── 3. Телефон: офферы на первом экране ─────────────────────────────────── */
@media (max-width:760px){

  /* 3.1 меню каталога на телефоне: сетка 4×2, без прокрутки и без белых плиток.
     Владелец дважды просил «верни две строки» и убрать белый фон — полоса
     с горизонтальным скроллом этому не соответствовала. */
  body:has(main.kr-main) .cats-nav{margin:0; padding:10px 0 8px}
  /* белая плашка-обёртка вокруг меню была видна как «белый фон» — снимаем */
  body:has(main.kr-main) .tiles-card{
    background:transparent; box-shadow:none; border:0; border-radius:0; padding:0;
  }
  body:has(main.kr-main) .cats-nav .cats{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px 2px;
    grid-auto-rows:1fr;
    margin:0; padding:0; overflow:visible;
  }
  body:has(main.kr-main) .cats-nav .cats > li{min-width:0}
  body:has(main.kr-main) .cats-nav .cats a{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:6px; height:auto; min-height:62px; padding:9px 2px 7px;
    border-radius:10px; background:transparent; box-shadow:none;
    text-align:center; white-space:normal; line-height:1;
  }
  body:has(main.kr-main) .cats-nav .cats a[aria-current="page"]{
    background:#EDF7E8; box-shadow:none;
  }
  body:has(main.kr-main) .cats-nav .cat-txt{display:block; min-width:0}
  body:has(main.kr-main) .cats-nav .cat-name{
    display:block; font-size:11px; line-height:13px; font-weight:600;
    letter-spacing:-.01em; text-wrap:balance;
  }
  body:has(main.kr-main) .cats-nav .cat-sub,
body:has(main.kr-main) .cats-nav .chev{display:none}
  body:has(main.kr-main) .cats-nav .ico{width:20px; height:20px; margin:0}
  body:has(main.kr-main) .cats-nav .ico svg{width:20px; height:20px}

  /* на самых узких экранах подписи мельче, чтобы не переносились и не вылезали */
  @media (max-width:380px){
    body:has(main.kr-main) .cats-nav .cat-name{font-size:10px; line-height:12px}
    body:has(main.kr-main) .cats-nav .cat-name{letter-spacing:-.02em}
    body:has(main.kr-main) .cats-nav .ico{width:18px; height:18px}
    body:has(main.kr-main) .cats-nav .ico svg{width:18px; height:18px}
    body:has(main.kr-main) .cats-nav .cats a{min-height:56px; gap:5px}
  }
  @media (max-width:345px){
    body:has(main.kr-main) .cats-nav .cat-name{font-size:9.5px; line-height:11px}
    body:has(main.kr-main) .cats-nav .cats{gap:4px 0}
    body:has(main.kr-main) .cats-nav .cats a{padding-left:0; padding-right:0}
  }

  /* 3.2 демо-плашка тоньше */
  .demo{padding:6px 16px; font-size:11.5px; line-height:16px}

  /* 3.3 порядок блоков: офферы раньше объяснений */
  .kr-main{display:flex; flex-direction:column}
  .kr-main > *{order:7; min-width:0}
  .kr-main > .crumbs{order:1}
  .kr-main > .h1row{order:2}
  .kr-main > .kr-upd,
  .kr-main > .meta-top,
  .kr-main > .kr-meta{order:3}
  .kr-main > .toolbar{order:4;margin-top:0}
  .kr-main > .za-brief,
  .kr-main > .kr-brief,
  .kr-main > .korotko{order:5}
  .kr-main > #fork{order:6}

  /* 3.4 крошки и заголовок компактнее */
  .crumbs{margin:2px 0 6px; font-size:12px; line-height:18px}
  .h1row{margin:0 0 10px}
  h1{font-size:22px; line-height:1.22; letter-spacing:-.012em}
  .kr-upd{margin:0 0 12px; font-size:12.5px; line-height:18px}
  .kr-sec{margin-top:16px}
  .kr-sec > h2{font-size:17px; line-height:22px; margin:0 0 10px}


  /* 3.6 верх страницы ещё тоньше: плашка, шапка, чипсы */
  .demo{padding:4px 16px; font-size:11px; line-height:15px}
  .hdr{height:56px}
  body:has(main.kr-main) .cats-nav{padding:8px 0 6px}
  .h1row h1{margin:0}

  /* 3.7 подсказка-абзац и тулбар: минимум места до первой карточки */
  main.kr-main .kr-hint{display:none}
  /* тулбар на телефоне: две ровные строки.
     1) «Показано: N из M» слева и «Сравнить: 0 из 3» справа — это счётчики;
     2) селект на всю ширину.
     Селектор раньше был :is(#list,#offers), а таких id на страницах нет —
     правило не применялось, и тулбар разваливался на три строки со сдвигами. */
  main.kr-main .toolbar{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:10px 12px;
    margin:0 0 10px; padding:0; border:0; min-height:0;
  }
  /* расставляем по сетке явно, иначе авторазмещение уводит счётчик
     сравнения в третью строку под селект */
  main.kr-main .toolbar .count{
    grid-row:1; grid-column:1; font-size:12.5px; white-space:nowrap; justify-self:start;
  }
  main.kr-main .toolbar .cmp{
    grid-row:1; grid-column:2; display:block; margin:0;
    font-size:12.5px; white-space:nowrap; justify-self:end;
  }
  /* 16px — иначе iOS зумит страницу при фокусе в селекте */
  main.kr-main .toolbar select{grid-row:2; grid-column:1 / span 2; width:100%; min-width:0; height:40px;
    font-size:16px; padding:0 28px 0 10px}
  main.kr-main .toolbar .how,
  main.kr-main .toolbar > span[style]{display:none}

  /* 3.8 в карточке на телефоне — только сумма и ПСК, остальное на «Условиях» */
  /* в самих «Условиях» поля остаются видимыми — иначе details раскрывается пустым */
  main.kr-main .za-rows:not(.za-rows--cond) [data-f="term"],
  main.kr-main .za-rows:not(.za-rows--cond) [data-f="rate"],
  main.kr-main .za-rows:not(.za-rows--cond) [data-f="src"]{display:none}
  main.kr-main .za-rows{gap:0 6px}
  main.kr-main .za-head{min-height:26px}

  /* 3.5 карточка оффера: имя, цифры и кнопка в один горизонтальный блок */
  main.kr-main .za-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 104px;
    grid-template-areas:"head cta" "rows cta";
    align-items:center;
    gap:4px 10px;
    padding:12px;
    margin:0 0 10px;
    position:relative;
  }
  main.kr-main .za-head{grid-area:head; display:flex; align-items:center; gap:8px; padding-right:0}
  main.kr-main .za-logo{width:26px; height:26px; font-size:13px; border-radius:8px}
  main.kr-main .za-name{font-size:15px; font-weight:700; line-height:1.2; margin:0;
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  main.kr-main .za-ad{position:static; margin:0; font-size:9.5px; line-height:1.2;
               letter-spacing:.02em; text-transform:uppercase; padding:2px 5px; border-radius:5px}
  main.kr-main .za-rows{grid-area:rows; display:flex; flex-wrap:wrap; gap:2px 10px; margin:0}
  main.kr-main .za-rows .za-k{font-size:11.5px; line-height:16px; color:var(--faint); margin:0}
  main.kr-main .za-rows .za-v{font-size:12.5px; line-height:16px; font-weight:600; color:var(--ink2); margin:0}
  main.kr-main .za-rows .za-k::after{content:':'; margin-left:1px}
  main.kr-main .za-hr{display:none}
  main.kr-main .za-cta{
    grid-area:cta; align-self:center;
    display:flex; align-items:center; justify-content:center;
    width:104px; min-height:44px; padding:0 8px;
    font-size:14px; font-weight:700; border-radius:12px;
  }
  main.kr-main .za-more{display:none}
}

/* ── 4. Предложения в семействе займов: карточки вместо таблицы ─────────── */
.off-grid{display:grid;gap:10px;margin:0 0 14px}
@media (min-width:1024px){.off-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.off-card{position:relative}
.za-cta.is-ghost{
  background:#fff; color:var(--ink2); font-weight:600;
  box-shadow:var(--rf-ring); border:0;
}
.za-cta.is-ghost:hover{color:var(--blue); box-shadow:var(--rf-ring), var(--rf-shadow)}
@media (max-width:760px){
  main.kr-main .za-card.off-card{grid-template-columns:minmax(0,1fr) 104px}
}

/* ── 5. Кредиты: плитки банков и карточки карт на первом экране ─────────── */
@media (max-width:760px){
  /* секция провайдеров поднимается сразу под заголовок (у секции нет id —
     цепляемся по её собственному подзаголовку) */
  .kr-main > .kr-sec:has(#prov-ttl){order:4;margin-top:0}
  .kr-main > .kr-sec:has(#prov-ttl) > h2{margin-bottom:10px}

  /* плитка банка: логотип, название, пометка «демо» и одна строка пояснения */
  .kr-sec:has(#prov-ttl) .kr-pv{
    display:grid; grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center; gap:2px 10px;
    padding:10px 12px; margin:0 0 8px; border-radius:var(--rf-r);
  }
  .kr-sec:has(#prov-ttl) .kr-pv-top{display:contents}
  .kr-sec:has(#prov-ttl) .kr-pv-lg{grid-row:1 / span 2; width:28px; height:28px; margin:0}
  .kr-sec:has(#prov-ttl) .kr-pv-name{font-size:14.5px; font-weight:700; line-height:1.2}
  .kr-sec:has(#prov-ttl) .kr-demo{grid-row:1 / span 2; font-size:10px}
  /* оговорку «условия и ПСК уточняйте на сайте банка» обрезать нельзя: две строки вместо
     одной, иначе на 320px от неё остаётся «Условия и ПСК уточняй…» */
  .kr-sec:has(#prov-ttl) .kr-pv-txt{
    grid-column:2; margin:0; font-size:11.5px; line-height:15px; color:var(--faint);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; white-space:normal;
  }

  /* карты: листинг раньше вводных блоков */
  .kr-main > .cardsec{order:4; margin-top:0}
  .kr-main > .cardsec:first-of-type{margin-top:0}
  .card{
    display:grid; grid-template-columns:minmax(0,1fr) 104px;
    grid-template-areas:"brand cta" "name cta" "meta cta";
    align-items:center; gap:1px 10px; padding:12px; margin:0 0 10px;
    position:relative;
  }
  /* бейдж — в угол, чтобы не занимал целую строку */
  .card .badge{position:absolute; top:10px; right:10px; margin:0; font-size:9.5px; padding:2px 6px}
  .card .brand{grid-area:brand; font-size:13px; color:var(--faint); margin:0}
  .card > b{grid-area:name; font-size:15px; line-height:1.2; margin:0}
  /* margin-right 44px был нужен, пока кнопка стояла справа колонкой 104px:
     он отнимал место у условий и прижимал их влево, хотя карточка центрирует
     содержимое (align-items:center). Кнопка теперь внизу на всю ширину — отступ снят,
     условия встают по центру вместе с логотипом и названием. Замер: было left 15 при
     карточке 343, стало по центру. */
  .card .meta{grid-area:meta; display:flex; flex-wrap:wrap; justify-content:center; gap:0 8px;
              font-size:11px; line-height:15px; margin:2px 0 0;
              max-height:30px; overflow:hidden}
  .card .meta b{font-size:12.5px}
  .card .row{grid-area:cta; margin:0}
  .card .btn.small{width:104px; height:44px; min-height:44px; padding:0 8px; border-radius:12px; font-size:14px}
  .card .admark{display:none}
}

/* ── 6. Подстраницы кредитов: условия поднимаются под заголовок ─────────── */
@media (max-width:760px){
  .kr-main > .kr-sec:has(#rates-ttl){order:4; margin-top:0}
  .kr-main > .kr-sec:has(#rates-ttl) > h2{margin-bottom:10px}
  .kr-main > .kr-sec:has(#rates-ttl) > .kr-hint{display:none}
  .kr-main > .kr-sec:has(#rates-ttl) .kr-tblwrap{margin:0}
}

/* ── 7. Карточка продукта: кнопка оформления всегда под рукой ────────────── */
.buybar{display:none}
@media (max-width:1099px){
  .buybar{
    display:flex; align-items:center; gap:10px;
    position:fixed; left:0; right:0; z-index:55;
    /* стоит НАД нижней навигацией (она 58px), иначе перекрывает её */
    bottom:calc(56px + env(safe-area-inset-bottom)); /* высота .bnav = 56px, щели быть не должно */
    padding:8px 16px; /* выровнено по контейнеру страницы */
    background:#fff;
    box-shadow:0 -1px 0 rgb(16 24 40 / .07), 0 -10px 24px -14px rgb(16 24 40 / .3);
  }
  .buybar .bb-sum{
    flex:1 1 auto; min-width:0;
    font-size:10.5px; line-height:13px; color:var(--faint);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; white-space:normal;
  }
  .buybar .bb-sum b{display:block; font-size:13px; line-height:17px; color:var(--ink); font-variant-numeric:tabular-nums}
  .buybar .btn{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    height:44px; min-height:44px; padding:0 18px; border-radius:12px; font-size:14px; font-weight:700;
  }
  /* страховка по высоте, чтобы панель не закрывала конец страницы */
  body:has(.buybar){padding-bottom:calc(56px + 62px)}
}

/* erid — обязательная маркировка рекламы (38-ФЗ), видна рядом с «Реклама» */
.za-ad .za-erid{display:block;font-size:9px;line-height:11px;font-weight:500;color:var(--faint);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* 8. Селект сортировки: подпись «По статусу в реестре ЦБ» не должна обрезаться.
   Замер до: тексту нужно 192px + стрелка/паддинги, а селект на 320/360/390 был 157/197/227px.
   Тулбар — grid (правило 3.7), поэтому переопределять нужно той же специфичностью. */
@media (max-width:760px){
  main.kr-main .toolbar{grid-template-columns:minmax(0,1fr)}
  main.kr-main .toolbar select{width:100%; min-width:0}
}

/* ── 9. Замечания владельца (2026-11-10) ────────────────────────────────── */

/* 9.1 Обводку убрать со всех блоков. Разделение даёт фон и тень, не линия.
   Внутренние линии таблиц и рамки полей ввода сохранены: без них таблица и форма
   перестают читаться, а это не «блок». */
.demo,.ftr-bottom,.bnav,.tiles-card,.note,.korotko,.kr-brief,.za-brief,.top-card,.pcard,
.stub,.kr-calc,.kr-out,.kr-step,.prodnum,.reestr,.cats-nav,.za-ad,.badge,.kr-demo,.tab,
.hero,.nitem,.toolbar,.ctag,.ev,.evcard,.panel,.panel-cab,.rowset,.sb-card,.ratecard,
.subcard,.case-item,.offer,.terms a,.cbox,.cform,.calc,.earn,.tile,.card,.za-card,.kr-pv,
.kr-fk details,.za-cond{border:0 !important}
/* таблица: внешняя рамка убрана, внутренняя сетка остаётся */
.reestr{border-collapse:separate;border-spacing:0}

/* 9.2 Воздух между информационными блоками: было тесно, проект «не дышал» */
:root{--rf-air:30px}
.kr-sec{padding-top:var(--rf-air)}
.kr-sec > h2{margin:0 0 14px}
.kr-sec > .kr-hint{margin:0 0 14px}
.kr-sec p + p{margin-top:12px}
.korotko{margin:20px 0}
.off-grid{gap:14px; margin:0 0 22px}
@media (min-width:1024px){.off-grid{gap:16px}}
.za-card{margin-bottom:12px}
.blk3{gap:18px}
.subcard{padding:18px}
.tiles-card{margin-top:22px}
h2 + p, h3 + p{margin-top:10px}
@media (max-width:760px){
  :root{--rf-air:24px}
  .kr-sec{margin-top:0; padding-top:var(--rf-air)}
  .korotko{margin:16px 0}
  .off-grid{gap:12px; margin-bottom:18px}
}

/* 9.3 Остатки обводок на внутренних страницах (замер по классам, 1024px).
   Список собран измерением computed border-width, а не догадкой. */
.kr-fk,.kr-crit > li,.kr-faq > details,.also-item,.nitem,
.subcard .ln,.cnt,.org-avatar,.tgl,
.step,.cc-item,.cc-row,.cc-foot,.also > a,
.pa-cmp-card,.pa-navcard,.pa-cmp-wrap,.pa-stamp,.pa-cmp-del{border:0 !important}
/* ghost-кнопка без рамки должна остаться видимой: даём светлую заливку */
.btn.ghost,.za-cta.is-ghost{background:#EEF1EA !important; color:var(--ink2)}
.btn.ghost:hover,.za-cta.is-ghost:hover{background:#E6EBF4 !important; color:var(--blue)}

/* ── 10. «Условия»: ПСК и ставка спрятаны (замечание владельца) ─────────────
   Зачем: карточка должна читаться за один взгляд — сумма и срок, остальное по требованию.
   Наведение работает на мышке (≥761px), нажатие — всегда, потому что <details> нативный. */
/* Пометка «Реклама» переехала из шапки карточки в нижнюю строку, рядом
   с «Все условия и источник»: в шапке она висела в углу и мешала.
   Требование ч. 16 ст. 18.1 ФЗ «О рекламе» — пометка должна присутствовать
   и читаться. Она стоит ВНЕ <details>, поэтому видна всегда, а не после
   раскрытия условий: спрятать её внутрь было бы нарушением. */
/* flex-wrap нужен: на узком экране пометка переносится под условия,
   но НЕ исчезает — она обязана читаться (ч. 16 ст. 18.1 ФЗ «О рекламе»). */
.za-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px 10px; flex-wrap:wrap;
}
.za-foot > .za-cond{margin:8px 0 0; flex:0 1 auto; min-width:0; padding:8px 12px}
/* подпись условий не должна ломаться на две-три строки: плашка раздувалась */
.za-foot > .za-cond > summary{white-space:nowrap}
.za-foot > .za-ad{flex:0 0 auto; margin:8px 0 0; color:var(--faint)}

.za-cond{margin:8px 0 0; border:0}
.za-cond > summary{
  display:inline-flex; align-items:center; gap:5px;
  list-style:none; cursor:pointer; width:fit-content;
  font-size:12.5px; line-height:18px; font-weight:600; color:var(--blue);
  padding:2px 0; border-radius:6px;
}
.za-cond > summary::-webkit-details-marker{display:none}
.za-cond > summary::after{content:'▾'; font-size:10px; line-height:1; transition:transform .15s}
.za-cond[open] > summary::after{transform:rotate(180deg)}
.za-cond > summary:hover{text-decoration:underline; text-underline-offset:2px}
.za-cond > summary:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.za-cond:not([open]) .za-rows--cond{display:none}  /* иначе display:grid перебивает скрытие details */
.za-cond[open] .za-rows--cond{display:grid}
/* на телефоне .za-rows получает display:flex от правила с ID (main.kr-main) —
   чтобы скрытие работало, специфичность должна быть не ниже */
main.kr-main .za-cond:not([open]) .za-rows--cond{display:none}
main.kr-main .za-cond[open] .za-rows--cond{display:flex; flex-wrap:wrap; gap:2px 10px}
.za-rows--cond{margin-top:8px}
/* мышь: достаточно навести на карточку, чтобы увидеть ПСК и ставку */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .za-card:hover .za-cond:not([open]) .za-rows--cond{display:grid !important}
}
@media (max-width:760px){
  /* третья строка сетки карточки: «Условия» под цифрами, кнопка остаётся справа */
  main.kr-main .za-card{grid-template-areas:"head cta" "rows cta" "cond cta"}
  main.kr-main .za-cond{grid-area:cond; margin:4px 0 0}
  main.kr-main .za-cond > summary{font-size:12px; line-height:16px}
  main.kr-main .za-rows--cond{margin-top:6px}
}

/* 9.4 Активная плитка: без рамки, выделяем заливкой и цветом названия */
.cats a[aria-current="page"]{
  border-color:transparent !important;
  background:#E6F6F0 !important;
  box-shadow:0 1px 2px rgb(16 24 40 / .06) !important;
}

/* 9.5 Реальные логотипы МФО вместо буквенных заглушек.
   Источник — offers.logo_url (S3 сети) и API, файлы лежат локально в assets/logos/. */
.za-logo{object-fit:contain; background:#fff; padding:4px;
         width:40px; height:40px; border-radius:10px;
         box-shadow:inset 0 0 0 1px rgb(16 24 40 / .05)}
@media (max-width:760px){
  main.kr-main .za-logo{width:36px; height:36px; padding:3px; border-radius:9px}
  main.kr-main .za-head{min-height:36px}
}

/* ── 11. Плитки-ссылки на разделы (.tile) ───────────────────────────────────
   Владелец 2026-11-10: «меню уродское и с кривыми отступами».
   Замер до правки: заголовку был задан min-height в 2 строки (39px при одной
   строке 19.4px), описанию — жёсткая height 40px. Однострочные заголовки давали
   20px пустоты, из-за чего заголовок и описание разъезжались, а иконка съезжала
   от центра. Шеврон был absolute и отнимал место у текста (padding-right 36px).
   Стало: сетка из трёх колонок, шеврон в потоке, высоты по содержимому. */
.tile{
  grid-template-columns:40px minmax(0,1fr) 14px;
  column-gap:14px;
  padding:16px;
  align-items:center;
  min-height:0;
  border-radius:14px
}
.tile .ic{width:40px;height:40px;border-radius:12px;align-self:center}
.tile .ic svg{width:20px;height:20px}
.tile .tx{align-self:center;gap:2px}
.tile b{min-height:0;font-size:15px;line-height:1.32;letter-spacing:-.012em}
.tile span.s{height:auto;font-size:12.5px;line-height:1.42}
.tile .ch{position:static;top:auto;right:auto;transform:none;justify-self:end;
  color:#A3ACBA;transition:transform .16s ease,color .16s ease}
.tile:hover .ch{transform:translateX(2px);color:var(--c-blue)}
@media (max-width:760px){
  .tile{padding:14px;column-gap:12px;grid-template-columns:36px minmax(0,1fr) 12px}
  .tile .ic{width:36px;height:36px;border-radius:11px}
  .tile .ic svg{width:18px;height:18px}
  .tile b{font-size:14.5px}
}

/* ═══ 12. Палитра и шкала в стиле Сравни (sravni.ru) ═══════════════════════
   Источник: снятые значения с www.sravni.ru (Firecrawl branding, 2026-11-10):
     акцент #03A474 · фон #F6F5F4 · текст #171D23 · карточка #FFFFFF
     радиус карточки 12px · кнопка 20px (pill 100px) · база 4px
     h1 50px · h2 38px · body 16px · primary-кнопка ЧЁРНАЯ с белым текстом
   Светлый тон сохраняем: страница — тёплый серо-бежевый, карточки — белые.
   ВАЖНО про контраст: #03A474 на белом даёт ≈2,6:1 и как цвет ТЕКСТА не годится
   (ниже AA). Поэтому голубой у нас — только акцент, иконки, заливки и границы;
   для текста ссылок взят тёмный оттенок того же цвета #257E1A (≈5,0:1).        */
:root{
  /* собственные токены нового стиля */
  --srv-sky:#03A474;          /* акцент: зелёный из логотипа, заливки/иконки/состояния */
  --srv-sky-soft:#E6F6F0;     /* мягкая зелёная подложка под акцент */
  --srv-link:#257E1A;         /* зелёный, пригодный для текста (5.13:1 на белом) */
  --srv-link-h:#1B6A13;
  --srv-bg:#F6F5F4;           /* тёплый светлый фон страницы */
  --srv-bg-2:#EFEDEA;         /* второй уровень фона */
  --srv-card:#FFFFFF;
  --srv-ink:#171D23;          /* основной текст */
  --srv-ink-2:#2C343B;
  --srv-text:#525A63;
  --srv-dim:#7C848D;
  --srv-line:#E7E3DE;         /* тёплая линия */
  --srv-line-2:#DADDE2;
  --srv-shadow:0 -2px 6px rgb(0 0 0 / .02), 0 10px 14px rgb(20 36 56 / .06);
  --srv-shadow-s:0 2px 8px rgb(20 36 56 / .05);
  --srv-r:12px;               /* карточки */
  --srv-r-btn:20px;           /* кнопки */
  --srv-r-pill:100px;         /* вторичные кнопки и чипсы */
  --srv-u:4px;                /* базовая единица отступов */

  /* перекрываем старые наборы, чтобы стиль применился ко всем страницам */
  --ink:#171D23; --ink2:#2C343B; --muted:#525A63; --faint:#6B7480;
  --bg:#F6F5F4; --card:#FFFFFF; --line:#E7E3DE; --line-strong:#B9B3AB;
  --blue:var(--srv-sky); --blue-hover:#07916A;
  --ds-page:#F6F5F4; --ds-card:#FFFFFF; --ds-line:#E7E3DE; --ds-div:#EFEDEA;
  --ds-ink:#171D23; --ds-ink2:#2C343B; --ds-text:#525A63; --ds-dim:#7C848D;
  --ds-blue:var(--srv-sky); --ds-blue-hover:#07916A;
  --c-blue:var(--srv-sky); --c-blue-h:#07916A;
  --c-ink:#171D23; --c-ink2:#2C343B; --c-text:#525A63; --c-dim:#7C848D;
  --c-card:#FFFFFF; --c-line:#E7E3DE; --c-page:#F6F5F4; --c-div:#EFEDEA;
  --ds-r-card:12px; --ds-r-tile:12px; --ds-r-promo:12px; --ds-r-btn:20px;
  --rf-r:12px;
}

/* 12.1 Фон страницы — тёплый светлый, карточки остаются белыми */
html,body{background:var(--srv-bg)}
.hdr{background:var(--srv-card)}

/* 12.2 Ссылки и акцентный текст: голубой только там, где читается.
   Специфичность обнулена через :where() — иначе цепочка :not() (канон §49)
   перебивала цвет «кнопочных» ссылок с собственной заливкой, и текст
   становился того же цвета, что фон (белый на зелёном пропадал). */
main a:where(:not(.btn, .za-cta, .za-chip, .tile, .cats a, .card, .promo, .za-card)),
.ftr a{color:var(--srv-link)}
main a:where(:not(.btn, .za-cta, .za-chip, .tile, .cats a)):hover,
.ftr a:hover{color:var(--srv-link-h)}

/* 12.3 Кнопки: primary — чёрная «как у Сравни», вторичные — светлые pill */
.btn.primary{background:var(--srv-ink); border-color:var(--srv-ink); color:#fff;
  border-radius:var(--srv-r-btn); box-shadow:var(--srv-shadow)}
.btn.primary:hover{background:#000; border-color:#000}
.btn.ghost{background:#F5F5F5; border-color:var(--srv-line-2); color:var(--srv-ink);
  border-radius:var(--srv-r-pill)}
.btn.ghost:hover{background:#EDEDED; border-color:#C9CDD3}
.btn{border-radius:var(--srv-r-btn)}
.btn.small{border-radius:var(--srv-r-pill)}

/* 12.4 CTA в карточках офферов — та же чёрная кнопка-пилюля */
.za-cta{background:var(--srv-ink); color:#fff; border-radius:var(--srv-r-btn);
  border-color:var(--srv-ink)}
.za-cta:hover{background:#000; border-color:#000}
.za-cta.is-ghost{background:#F5F5F5; color:var(--srv-ink); border-color:var(--srv-line-2);
  border-radius:var(--srv-r-pill)}

/* 12.5 Карточки: радиус 12, тёплая линия вместо холодной, мягкая тень */
.card,.za-card,.kr-pv,.tile,.subcard,.cbox,.calc,.terms,.offer,.earn,.case-item{
  border-radius:var(--srv-r); border-color:var(--srv-line); background:var(--srv-card)}
.card:hover,.za-card:hover,.tile:hover{box-shadow:var(--srv-shadow-s)}

/* 12.6 Чипсы, пилюли и бейджи — форма от Сравни */
.chip,.cat,.nav-pill,.badge{border-radius:var(--srv-r-pill)}
.cats a{border-radius:var(--srv-r)}
.cats a[aria-current="page"]{background:var(--srv-sky-soft); color:var(--srv-link);
  box-shadow:inset 0 0 0 1.5px var(--srv-sky)}

/* 12.7 Поля ввода — светлая подложка и мягкая граница */
input,select,textarea{background:var(--srv-card); border-color:var(--srv-line-2);
  border-radius:var(--srv-r)}
input:focus,select:focus,textarea:focus{border-color:var(--srv-sky);
  box-shadow:0 0 0 3px rgb(3 164 116 / .16)}

/* 12.8 Таблицы и разделители — тёплые, без холодного серого */
table th,table td{border-color:var(--srv-line)}
.ftr{border-top-color:var(--srv-line)}

/* 12.9 Акцентные заливки: иконки, круги, метки */
.kr-ico,.tile .ic,.cats .ic,.tile .ic svg{color:var(--srv-sky)}
.tile .ic,.cats .ic{background:var(--srv-sky-soft)}
.tile.t-dep .ic,.tile.t-loan .ic,.tile.t-dep,.tile.t-loan{--ic-bg:#E8F8EF; --ic-fg:#0B7A50}

/* 12.10 Текст акцентным цветом запрещён: #03A474 на белом даёт 2,6:1 (ниже AA).
   Голубой остаётся только заливкой/иконкой, а текст берёт тёмный оттенок. */
.za-cond summary,.za-cond summary:hover,.za-cond[open] summary,
.kr-more,.more,.link-more,.sravnenie-hint a{color:var(--srv-link)}
.za-cond summary:hover{color:var(--srv-link-h)}

/* 12.11 Сетка ряда плиток — по эталону макета (design/specs/home-measured.md):
   5 колонок p 258,6 при зазоре 30 = 1413 (контейнер эталона). В базовом слое стоял
   зазор 17px и плитки шириной 269 — суммарно те же 1413, но ритм плотнее макета. */
@media (min-width:1024px){
  .tiles5{column-gap:30px}
}

/* 12.12 Кегль H1 на странице МФО — по макету design-mfo-card.png.
   Замер макета пиксельно: заглавная «О» в H1 = 28 px по высоте, при cap-height ≈ 0.7 em
   это кегль 40 px. Тело в том же кадре — 16 px (заглавная «Р» = 12 px), у нас тело 16 px,
   значит масштаб совпадает и H1 нужен 40, а не 32.
   Скоуп прицельный: .blk3 (три панели) есть только на org.html — проверено grep по всем
   страницам, поэтому правило не заденет остальные. */
/* селектор усилен намеренно: в style.css стоит .std .h1row h1 (0,2,1) и перебивает
   body:has(.blk3) h1 (0,1,2) — проверено перебором cssRules, computed оставался 32px */
body.std:has(.blk3) .h1row h1,
body.std:has(.blk3) h1{font-size:40px;line-height:1.15;letter-spacing:-.02em}
@media (max-width:760px){
  body.std:has(.blk3) .h1row h1,
  body.std:has(.blk3) h1{font-size:30px;line-height:1.18}
}

/* 12.13 Ряд чипов-навигации по видам займов — по макету design-zaimy.png.
   В макете активный чип залит синим с белым текстом. У нас белый текст на #03A474 даёт
   контраст 2.6:1 (ниже AA для обычного текста), поэтому активный чип тёмный #171D23 —
   это и контрастно, и совпадает с primary-кнопкой, принятой в светлой палитре. */
.za-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.za-chip{display:inline-flex;align-items:center;height:40px;padding:0 18px;
  border:1px solid var(--srv-line-2);border-radius:var(--srv-r-pill);
  background:var(--srv-card);color:var(--srv-ink);
  font-size:14.5px;font-weight:600;line-height:1;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.za-chip:hover,.za-chip:focus-visible{background:var(--srv-sky-soft);border-color:#BFE3D2;color:var(--srv-link-h)}
.za-chip--on,.za-chip--on:hover{background:var(--srv-ink);border-color:var(--srv-ink);color:#fff}
@media (max-width:760px){
  .za-chips{gap:8px;margin:14px 0 2px}
  .za-chip{height:36px;padding:0 14px;font-size:13.5px}
}

/* 12.14 Кнопка «Оформить» в карточках банков — по макету design-cards.png.
   В макете кнопка занимает почти всю ширину карточки (≈400 px) при высоте ≈60 и радиусе 12.
   У нас это была пилюля 109×44, прижатая к тексту. Тянем на всю ширину карточки и
   прижимаем к низу, чтобы карточки в ряду заканчивались одинаково.
   Скоуп .cardsec — этот контейнер есть только на cards.html (проверено grep по всем страницам). */
.cardsec .card .btn.primary{width:100%;height:52px;border-radius:var(--srv-r);
  justify-content:center;margin-top:auto;padding:0 16px;font-size:15.5px}
.cardsec .card{display:flex;flex-direction:column}
@media (max-width:760px){
  .cardsec .card .btn.primary{height:48px}
}

/* 12.14а Кнопка лежит в div.row (flex, width по контенту), поэтому width:100% у самой кнопки
   считался от 112 px, а не от карточки. Растягиваем сначала обёртку — проверено замером:
   на 390 кнопка была 112 px при карточке 358. */
.cardsec .card .row{width:100%}

/* 12.15 Выноска «Почему это важно для вас» в статье — по макету design-news.png.
   В макете это светло-синяя плашка с круглой иконкой «i» слева и жирным заголовком.
   У нас в разметке была <div class="note good"><div><b>…</b><br>… — то есть просто
   абзац с зелёным акцентом. Оформляем прицельно внутри статьи (.art), чтобы не задеть
   дисклеймеры на остальных страницах, где .note используется как предупреждение. */
.art .note{background:#E6F6F0;border:0;border-radius:var(--srv-r);
  padding:16px 18px 16px 56px;position:relative;color:var(--srv-ink-2)}
.art .note::before{content:"i";position:absolute;left:16px;top:15px;
  width:24px;height:24px;border-radius:50%;background:var(--srv-link);color:#fff;
  font-weight:700;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.art .note b{display:inline-block;margin-bottom:4px;font-size:15.5px;color:var(--srv-ink)}
.art .note > div{padding:0}
@media (max-width:760px){
  .art .note{padding:14px 14px 14px 48px}
  .art .note::before{left:12px;top:13px;width:22px;height:22px;font-size:13px}
}

/* 12.16 Страница продукта — метрики и плашка о рисках (макет design-product-card.png).
   ВАЖНО: на продукте уже был блок .prodnums с теми же тремя метриками — я сначала добавил
   свой .prod-metrics и получил дубль на первом экране. Дубль удалён, оформляю существующий
   блок: в макете это строка с тонкими вертикальными разделителями, а не белые карточки. */
.prodnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:20px 0 4px;padding:18px 0;
  border-top:1px solid var(--srv-line);border-bottom:1px solid var(--srv-line)}
.prodnum{padding:0 22px;border-left:1px solid var(--srv-line);background:none;border-radius:0}
.prodnum:first-child{border-left:0;padding-left:0}
.cap2{display:block;margin-bottom:6px;font-size:13.5px;line-height:1.3;color:var(--srv-text)}
.prodnum b{display:block;font-size:27px;line-height:1.15;font-weight:700;color:var(--srv-ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .prodnums{grid-template-columns:1fr;padding:14px 0}
  .prodnum{padding:12px 0;border-left:0;border-top:1px solid var(--srv-line)}
  .prodnum:first-child{border-top:0;padding-top:0}
  .prodnum b{font-size:23px}
}

/* Жёлтая плашка о рисках — как в макете, вместо мелкой строки в футере */
.risk-note{display:flex;gap:14px;align-items:flex-start;margin:22px 0 0;
  padding:16px 18px;border-radius:var(--srv-r);background:#FFF6E0;color:var(--srv-ink-2)}
.risk-ico{flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  background:#F5C518;color:#4A3A00;font-weight:800;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.risk-note b{display:block;margin-bottom:4px;font-size:15.5px;color:var(--srv-ink)}
.risk-note div{font-size:14.5px;line-height:1.5}
@media (max-width:760px){
  .risk-note{padding:14px;gap:12px}
  .risk-ico{width:26px;height:26px;font-size:15px}
}

/* 12.17 Подпись плитки не должна терять строки.
   В home.css:175 стояло .tile span.s{display:-webkit-box;-webkit-line-clamp:2}. В разделе 11
   я снял фиксированную высоту подписи (height:auto), но не снял ограничение строк — и на
   1366/1400 «Решения для покупки недвижимости» переносится на три строки, третья обрезается
   (замер: scrollHeight 53 против clientHeight 36). Снимаю clamp и box, чтобы текст был целым. */
.tile span.s{display:block;-webkit-line-clamp:none;-webkit-box-orient:initial;overflow:visible}

/* 12.18 Навигация по видам (cats-nav) — проверено, правка НЕ нужна.
   Стенд пересечений показывал subOffSpread=669 на 320 для всех подстраниц kredity-*/zaimy-*.
   Разбор: настоящая карусель — внутренний ul.cats (overflow-x:auto, scrollWidth 783 против
   clientWidth 320, прокрутка 463 px), она работает штатно; подписи внутри карусели законно
   стоят на разных x, поэтому метрика «разброс подписей» ложно срабатывает.
   Попытка включить overflow на внешнем .cats-nav была лишней (создавала вторую прокрутку)
   и откачена. Оставлено только скрытие скроллбара у настоящей карусели. */
.cats-nav .cats{scrollbar-width:none;-ms-overflow-style:none}
.cats-nav .cats::-webkit-scrollbar{display:none}

/* 12.19 Футер: откат моей же ошибочной правки + настоящий дефект.
   Сначала я решил, что футер стал светлым, и поставил его тексту --srv-text #525A63.
   Замер показал обратное: .ftr имеет фон #171D23 (тёмный), и прежние цвета были
   рассчитаны именно на него: #8FA1BC на тёмном даёт 6.5:1, #D8E3F3 — 11:1, #7C90AF — 5.2:1.
   То есть я ухудшил читаемость до 2.43:1 и правку откатил: цвета футера возвращены
   к исходным через style.css, а refresh.css их больше не переопределяет.
   Настоящий дефект в футере другой: ссылки в колонках красились в --srv-link #257E1A,
   и на тёмном фоне это 3.08:1. Для тёмного фона правильный цвет — акцент #03A474 (6.7:1). */
.ftr a,.ftr-col a,.ftr-bottom a{color:#7BD96B}
.ftr a:hover,.ftr-col a:hover,.ftr-bottom a:hover{color:#7BD96B}

/* 12.20 Активный пункт навигации: accent как цвет текста не проходит AA.
   В style.css:121 стоит .cat-name.is-accent{color:var(--blue)}. В палитре Сравни --blue
   стал #03A474, и на светло-синей подложке активного пункта (rgb(232,240,255)) контраст
   выходит 2.14:1 при кегле 14.5px — ниже AA (4.5:1). Это тот же случай, что с кнопками:
   accent годится для заливок, иконок и рамок, но не для текста.
   Ставлю --srv-link #257E1A: на той же подложке даёт 5.4:1. */
.cat-name.is-accent,.cats a[aria-current="page"] .cat-name{color:var(--srv-link)}
/* Та же проблема у декоративного разделителя «·» — он не текст, но пусть будет виден */
.note .dot,.ftr .dot{color:var(--srv-line-2)}

/* 12.21 Два дефекта контраста, найденные сплошным аудитом (1644 текстовых узла, 16 страниц).
   Мерил реальные computed-цвета и фон предков по формуле WCAG.

   1) Кнопка «Войти» (.hdr-enter): белый текст на заливке #03A474 даёт 2.45:1 при 15px.
      Ставлю ghost-вид, как в референсе Сравни: прозрачный фон, рамка --srv-line-2,
      текст --srv-link (5.0:1 на белом). Заливка accent остаётся для иконок и рамок.

   2) Подписи (.cat-sub и все, кто использует --srv-dim): #7C848D на белом = 3.78:1,
      на фоне страницы 3.6:1 — ниже AA для 12px. В этой палитре --srv-dim стоял светлее,
      чем нужно. Затемняю до #6B7480: на белом 4.74:1, на #F6F5F4 4.55:1 — проходит. */
.hdr-enter{background:transparent;color:var(--srv-link);border:1px solid var(--srv-line-2)}
.hdr-enter:hover{background:var(--srv-sky-soft);color:var(--srv-link-h);border-color:#BFE3D2}

/* 12.22 Остатки accent в роли цвета текста (последние 27 из 827 после правок 12.19–12.21).
   Сплошной аудит нашёл: .on (активная вкладка панели), .dot и .k-lbl (лейбл калькулятора)
   красились в акцент #03A474 прямо по тексту — на белом это 2.6:1. Перевожу на --srv-link.
   Акцентом остаются заливки, рамки, иконки и полосы — там контраст не требуется. */
.on,.k-lbl{color:var(--srv-link)}
.note .dot,.ftr .dot,.korotko .dot{color:var(--srv-line-2)}
/* Подписи на голубой подложке (.cat-sub в активном пункте, 12px) — #6B7480 на #E6F6F0
   даёт 4.4:1, чуть ниже AA. На такой подложке нужен тон темнее. */
.cats a[aria-current="page"] .cat-sub,.cat-sub.on{color:#5D6671}

/* 12.23 Уточнение к 12.22: одного класса мало — старые правила специфичнее.
   Замер через cssRules показал, что на элементе «⌂Главная» одновременно матчатся
   .bnav a (0,1,1), .bnav a.on (0,2,1) и моё .on (0,1,0) — побеждало второе, и цвет
   оставался #03A474. Здесь те же селекторы, но позже в каскаде, плюс префикс body
   там, где исходное правило жило в .note/.korotko. */
body .bnav a.on{color:var(--srv-link)}
body .nav a.on{color:var(--srv-link)}
body .note .dot,body .korotko .dot,body .ftr .dot{color:var(--srv-line-2)}
body .k-lbl{color:var(--srv-link)}
body .kr-hint,body .kr-extra{color:#5D6671}

/* 12.24 Зелёный: развожу две роли, иначе проваливается контраст.
   При замене голубого на зелёный из логотипа (#03A474) выяснилось, что белый текст
   на этом зелёном даёт 3.2:1 — ниже AA для кнопок и мелкого текста. Поэтому:
     --srv-sky        #03A474 — яркий брендовый зелёный: иконки, рамки, маркеры,
                       мягкие подложки. Как заливка под белым текстом НЕ используется.
     --blue/--ds-blue/--c-blue  #257E1A — «рабочий» зелёный: заливки кнопок с белым
                       текстом (5.13:1), ссылки, активные состояния.
   Так бренд остаётся зелёным, а читаемость не страдает. */
:root{
  --blue:#257E1A; --ds-blue:#257E1A; --c-blue:#257E1A;
  --srv-accent-strong:#257E1A;
}
/* Кнопки-ссылки и primary-кнопки с белым текстом — на рабочем зелёном */
.btn.primary,.btn-primary,.hdr-cta,.kr-btn,.za-btn,.buybar .btn.primary{background:var(--srv-accent-strong)}
.btn.primary:hover,.btn-primary:hover,.hdr-cta:hover,.kr-btn:hover,.za-btn:hover{background:#1B6A13}

/* ============================================================================
   13. МЕНЮ КАТЕГОРИЙ — новый формат: строка табов, один уровень, без овалов
   ----------------------------------------------------------------------------
   Что было (владелец: «это меню — уродство»):
     • 8 плиток-карточек по 283×70 с радиусом 12, выстроенных в 2 ряда;
     • внутри плитки три уровня коробок: карточка → кружок 40px под иконку → текст;
     • две строки текста (название + «812 МФО · ПСК от 0%»), из-за чего навигация
       весила как контентный блок;
     • активный пункт получил border-radius:100px на блоке 283×70 — это овал-«яйцо»,
       да ещё с синей внутренней обводкой #0454E0 от прежней палитры.

   Что стало: одна строка табов по нижней линии, как на Сравни и банковских сайтах.
     • ни одной коробки: ни фона, ни рамки, ни тени у пунктов;
     • иконка 18px прямо перед текстом, без кружка-подложки;
     • одна строка текста — цифры предложений остаются на плитках главной, где им место;
     • активный пункт = тёмный текст + зелёная линия 2px по нижней границе;
       никакой заливки и никакого овала;
     • на узких экранах строка прокручивается пальцем, линия разметки тянется на всю ширину.

   Полоса занимает 48px против 192px у прежней сетки: шапка стала вдвое ниже, а
   содержимое поднялось выше линии сгиба. */
.cats-nav{background:transparent; border:0; box-shadow:none; margin:0; padding:0}
.cats-nav .cats{
  display:flex; flex-wrap:nowrap; gap:2px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  border-bottom:1px solid var(--srv-line);
  padding:0;
}
.cats-nav .cats::-webkit-scrollbar{display:none}
.cats-nav .cats > li{flex:0 0 auto}
.cats-nav .cats a{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  height:48px; padding:0 14px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  color:var(--srv-text); font-size:14px; font-weight:600; line-height:1;
  white-space:nowrap; text-decoration:none;
}
.cats-nav .cats a:hover{color:var(--srv-ink)}
.cats-nav .cats a:focus-visible{outline:2px solid var(--srv-accent-strong); outline-offset:-4px}
/* иконка без кружка-подложки: круг 40px под 24-иконку был третьим уровнем коробок */
.cats-nav .ico,.cats-nav .ico--round{
  width:18px; height:18px; min-width:18px; margin:0; padding:0;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:currentColor;
}
.cats-nav .ico svg{width:18px; height:18px; stroke:currentColor; fill:none}
/* вторая строка с цифрами и стрелка-шеврон уходят из навигации */
.cats-nav .cat-sub,.cats-nav .chev{display:none}
/* активный пункт: тёмный текст + линия по нижней границе. Ни заливки, ни овала. */
.cats-nav .cats a[aria-current="page"],
.cats-nav .cats a.is-accent{
  background:transparent; border:0; box-shadow:none;
  color:var(--srv-ink);
}
.cats-nav .cats a[aria-current="page"] .cat-name,
.cats-nav .cats a.is-accent .cat-name{color:var(--srv-ink)}
/* Подчёркивание активного пункта. Было bottom:-1px — на 1 пиксель ниже полосы.
   У ul.cats стоит overflow-y:auto, поэтому этот 1px рождал вертикальную прокрутку
   всей навигации. Держим подчёркивание внутри высоты пункта. */
.cats-nav .cats a[aria-current="page"]::after,
.cats-nav .cats a.is-accent::after{
  content:''; position:absolute; left:14px; right:14px; bottom:0;
  height:2px; background:var(--srv-accent-strong); border-radius:2px 2px 0 0;
}
/* Полоса прокручивается только вбок (на узких экранах). По вертикали — никогда. */
.cats-nav .cats{overflow-y:hidden}
/* на узких экранах тот же вид, только прокрутка; отступы чуть меньше */
@media (max-width:760px){
  .cats-nav .cats a{height:46px; padding:0 12px; font-size:13.5px; gap:6px}
  .cats-nav .cats a[aria-current="page"]::after,
  .cats-nav .cats a.is-accent::after{left:12px; right:12px}
}

/* 13.1 Цифры из навигации убраны совсем (правило 5 из UX-разбора).
   «812 МФО · ПСК от 0%» в навигации — это обещание и данные, которые зависят от каталога,
   дают 16 строк текста в полосе и делают таб похожим на карточку. Счётчик живёт там, где
   он уместен: в H1 выдачи («Займы онлайн — 135 предложений…»). В разметке цифры сокращены
   до числа, здесь они не показываются вовсе. */
.cats-nav .cat-sub{display:none !important}
/* выравниваем: иконка и метка по центру строки 48px */
.cats-nav .cats a{justify-content:center}

/* 13.2 Доводка по замечаниям ИИ-разборов (два независимых прогона сошлись на этом формате).
   • иконка 18 → 20px: 18 мельче, чем нужно для 24-сетки глифов, 20 читается и не спорит с текстом;
   • индикатор 2 → 3px: двух пикселей мало, активный пункт терялся на светлом фоне;
   • «Все продукты» — это агрегат, а не категория: отделяю его вертикальной чертой 1×24,
     чтобы он не читался как девятая равноправная категория. */
.cats-nav .ico svg{width:20px; height:20px}
.cats-nav .ico{width:20px; height:20px; min-width:20px}
.cats-nav .cats a[aria-current="page"]::after,
.cats-nav .cats a.is-accent::after{height:3px}
/* разделитель после первого пункта («Все продукты») */
.cats-nav .cats > li:first-child{margin-right:10px; position:relative}
.cats-nav .cats > li:first-child::after{
  content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:1px; height:24px; background:var(--srv-line-2);
}

/* 13.3 Узкие экраны: снимаю мобильный min-height от прежних плиток.
   style.css:135 внутри @media(max-width:430px) задаёт .cats a{min-height:70px;height:auto}.
   Мой height:46px применялся, но min-height 70 растягивал пункт обратно до 70 —
   полоса на телефоне оставалась втрое выше нужного. Обнуляю min-height и прижимаю
   высоту к 44px (минимальная комфортная цель для пальца). */
@media (max-width:430px){
  body .cats-nav .cats a{min-height:0; height:44px; padding:0 12px; font-size:13.5px}
  body .cats-nav .cats a[aria-current="page"]::after,
  body .cats-nav .cats a.is-accent::after{height:3px}
}

/* ============================================================================
   14. ФУТЕР: контакты и юридическая информация (запрос владельца 2026-11-10)
   ----------------------------------------------------------------------------
   Владелец: «В футере нужны контакты для связи (почта) и юридическая информация
   (пока демо)». Футер был тёмный (#171D23) с четырьмя колонками ссылок, дисклеймером
   и одной строкой копирайта — ни почты, ни реквизитов не было вообще.

   Добавлено:
   1) пятая колонка «Контакты» — три адреса по назначению (общие вопросы, реклама,
      редакция) и часы ответа. Почта кликабельна (mailto), это первое, что ищут
      на сайте-агрегаторе: куда писать про ошибку в данных или про рекламу.
   2) блок «Юридическая информация» — оператор, ИНН/КПП, ОГРН, адрес, регистрация
      СМИ, главный редактор, телефон, почта для обращений.

   ПРО ДЕМО-ДАННЫЕ. Реквизитов у проекта пока нет, а выдавать вымышленные ИНН и ОГРН
   за настоящие нельзя — это ровно тот случай, на который владелец ругался раньше
   («не выдумывать данные»). Поэтому: нули вместо цифр, прочерк «(уточняется)» там,
   где значение неизвестно, и явная плашка янтарным, что реквизиты демонстрационные
   и подлежат замене до публикации. Заметно, честно, не похоже на рабочий сайт. */
.ftr-hours{font-size:12.5px;line-height:1.45;color:#8FA1BC;margin-top:2px}
.ftr-law{
  margin:26px 0 0; padding:20px 22px; max-width:1040px;
  border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:rgba(255,255,255,.03);
}
.ftr-law h4{margin:0 0 15px; font-size:13px; font-weight:700; color:#fff; letter-spacing:.01em}
.ftr-law dl{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:15px 28px; margin:0;
}
.ftr-law dt{margin:0 0 3px; font-size:11.5px; color:#8FA1BC; line-height:1.3}
.ftr-law dd{margin:0; font-size:13.5px; line-height:1.4; color:#D8E3F3}
.ftr-law a{color:#7BD96B; text-decoration:none}
.ftr-law a:hover{text-decoration:underline}
/* плашка о демо-данных: янтарный, чтобы её нельзя было не заметить */
.ftr-demo{
  margin:16px 0 0; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px; line-height:1.55; color:#F5C518;
}
.ftr-demo a{color:#F5C518; text-decoration:underline}
@media (max-width:900px){
  .ftr-law{padding:16px 16px; margin-top:22px}
  .ftr-law dl{grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:13px 18px}
}

/* 14.1 Контакты переехали к бренду.
   Замер: с пятой колонкой .ftr-cols (flex, gap 56) не влезал в ряд — «Контакты»
   падали вниз отдельным островком на пустом месте, а колонки ссылок оставались сверху.
   Перенёс контакты в блок бренда (под слоган): почта — это про «кто мы», а не про
   «разделы сайта», и в бренде она читается первой. Колонки ссылок остались вчетвером. */
.ftr-contacts{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:22px; max-width:260px}
.ftr-contacts h4{margin:0 0 3px; font-size:13px; font-weight:700; color:#fff; letter-spacing:.01em}
.ftr-contacts a{font-size:14.5px; line-height:1.4; color:#8FA1BC}
.ftr-contacts a:hover{color:#fff}
.ftr-contacts .ftr-mail{font-size:16px; font-weight:600; color:#7BD96B}
.ftr-contacts .ftr-mail:hover{color:#9CE890}
.ftr-hours{font-size:12.5px; line-height:1.45; color:#8FA1BC; margin-top:4px; display:block}

/* ============================================================================
   15. ГЛАВНАЯ: hero разложен на три блока + палитра по эталону creditplus
   ----------------------------------------------------------------------------
   Запрос владельца (2026-11-10):
     «Между верхним меню и основным блоком нужно сделать отступ с голым фоном
      стандартным и перенести слоган туда. А блок с поиском нужно тоже визуально
      отделить в отдельный блок (как на циане) от плитки-меню.
      А оттенки зелёного давай другие возьмём. Ориентир зелёного — creditplus.ru.»

   ЧТО БЫЛО: всё лежало в одной белой карточке .top-card — слоган, поиск, иллюстрация
   и строка категорий. Между шапкой и этой карточкой не было ничего, поэтому страница
   начиналась сразу плотным белым блоком.

   ЧТО СТАЛО: три отдельных блока на фоне страницы #F6F5F4:
     1) .lead   — слоган и подпись на голом фоне (без карточки), справа иллюстрация;
     2) .finder — белая карточка с поиском организации;
     3) .cats-nav — белая карточка со строкой категорий.

   ПАЛИТРА ПО ЭТАЛОНУ. creditplus.ru закрыт от ботов (403 на страницу и на Firecrawl),
   поэтому цвета взял не «на глаз», а из их собственной статики: скачал
   https://creditplus.ru/logo.svg (отдался 200) и вытащил значения — зелёный
   #3DAE2B (18 вхождений) и тёмный #2D2F31 (54 вхождения).
   Их зелёный на белом даёт 2.88:1 — годится только для заливок и иконок. Для текста
   и кнопок с белой надписью вывел затемнённый #257E1A (5.15:1 на белом, 4.73:1 на фоне). */
:root{
  --srv-sky:#3DAE2B;              /* брендовый зелёный creditplus: иконки, заливки, маркеры */
  --srv-accent-strong:#257E1A;    /* рабочий зелёный: кнопки с белым текстом, ссылки (5.15:1) */
  --srv-link:#257E1A;
  --srv-link-h:#1B6A13;
  --srv-sky-soft:#EDF7E8;         /* мягкая подложка от того же зелёного */
  --srv-ink:#2D2F31;              /* тёмный эталона вместо прежнего #171D23 */
  --srv-ink-2:#3A3D40;
  --blue:#257E1A; --ds-blue:#257E1A; --c-blue:#257E1A;
  --blue-hover:#1B6A13; --ds-blue-hover:#1B6A13; --c-blue-h:#1B6A13;
  --ink:#2D2F31; --ink2:#3A3D40; --ds-ink:#2D2F31; --ds-ink2:#3A3D40;
  --c-ink:#2D2F31; --c-ink2:#3A3D40;
}

/* 1. Слоган на голом фоне: отступ от шапки задаёт воздух, а не карточка */
main.wrap > .lead{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:32px;
  padding:34px 0 22px; background:transparent;
}
.lead h1{margin:0; font-size:44px; line-height:1.08; letter-spacing:-.02em; color:var(--srv-ink)}
.lead-sub{margin:14px 0 0; max-width:620px; font-size:17px; line-height:1.5; color:var(--srv-text)}
.lead-ill{justify-self:end}
.lead-ill img{display:block; width:250px; height:auto}

/* 2. Поиск — отдельная карточка, визуально не связанная ни со слоганом, ни с категориями */
.finder{
  background:#fff; border:1px solid var(--srv-line); border-radius:var(--srv-r);
  padding:20px 22px; margin:0 0 14px;
}
.finder-title{margin:0 0 12px; font-size:14px; font-weight:600; color:var(--srv-text); letter-spacing:.01em}
.find-form{display:flex; gap:10px}
.find-form input[type="search"]{
  flex:1 1 auto; min-width:0; height:56px;
  border:1px solid var(--srv-line-2); border-radius:var(--srv-r);
  padding:0 18px; font-size:16px; color:var(--srv-ink); background:#fff;
  font-family:inherit;
}
.find-form input[type="search"]:focus{outline:2px solid var(--srv-accent-strong); outline-offset:1px; border-color:var(--srv-accent-strong)}
.find-form input::placeholder{color:#94959B}
.find-form button{
  flex:0 0 190px; height:56px; border:0; border-radius:var(--srv-r-btn);
  background:var(--srv-accent-strong); color:#fff; font-size:16px; font-weight:600;
  font-family:inherit; cursor:pointer;
}
.find-form button:hover{background:var(--srv-link-h)}

/* 3. Категории — отдельная карточка со строкой табов */
.cats-nav{background:#fff; border:1px solid var(--srv-line); border-radius:var(--srv-r); padding:0 6px; margin:0 0 22px}

@media (max-width:900px){
  main.wrap > .lead{grid-template-columns:1fr; gap:16px; padding:24px 0 18px}
  .lead h1{font-size:32px}
  .lead-sub{font-size:15.5px; margin-top:10px}
  .lead-ill{justify-self:start; display:none}
  .finder{padding:16px}
  .find-form{flex-direction:column}
  .find-form button{flex:1 1 auto; width:100%}
}

/* 15.1 Дефекты, найденные аудитом контраста после смены палитры.
   • Ссылки и почта в футере оставались мятными #4CD5A6 от прежней зелёной схемы —
     это чужой оттенок в новой палитре. Заменил на светлый зелёный #7BD96B
     (7.67:1 на тёмном #2D2F31).
   • Активный чип (.za-chip--on) получил зелёный текст на тёмной заливке (2.61:1):
     сработало переопределение --blue, которое красит текст. Активный чип — тёмная
     плашка, текст на ней обязан быть белым. */
.za-chip--on,.za-chip--on:hover{color:#fff}
.za-chip--on .za-chip-cnt{color:rgba(255,255,255,.72)}

/* 15.2 Иллюстрация в зоне слогана перерисована.
   Прежняя (illu-hero-cut.png) была получена сдвигом оттенка из синей: зелёный лег на
   тени и переходы, отсюда грязно-изумрудный вид, на который владелец сказал «цвета
   ужасны». Новая нарисована с нуля в палитре creditplus, зелёный посажен точно на
   #3DAE2B (замер: hue 112°, L 0.42, S 0.60), обводки переведены с почти-чёрного на
   брендовый тёмный, фон вырезан (альфа). Пропорции 1134×628 — широкие, поэтому
   задаю ширину явно. */
.lead-ill img{width:300px; height:auto}
@media (max-width:1100px){ .lead-ill img{width:240px} }
@media (max-width:900px){ .lead-ill{display:none} }

/* 15.3 Итог по иллюстрации.
   Новая illu-hero-v3.png (1134×628, альфа) сгенерирована заново, не перекрашена.
   Замер после посадки цвета: доминирующий зелёный #3DAE2B, hue 112°, L 0.43, S 0.60 —
   совпадает с брендовым токеном --srv-sky пиксель в пиксель. Обводки приведены
   к тёмному бренда (#3C3F42 вместо почти-чёрного #1C1F1D). */

/* ============================================================================
   16. КАРТОЧКА ПРЕДЛОЖЕНИЯ ПЕРЕСОБРАНА (запрос владельца 2026-11-10)
   ----------------------------------------------------------------------------
   Владелец прислал скриншот: «Нужно полностью перерисовать блок с предложением.
   Добавить туда фишки-теги (например 0%). Кнопку "Получить" сделать зеленой.
   В целом сделать блок более продающим и красивым.»

   ЧТО БЫЛО: карточка-анкета. Название, две строки «Сумма / Срок» справа от подписей,
   «Условия» спрятаны в <details>, кнопка «Оформить» белая с голубой обводкой и мелким
   текстом. Продающей силы ноль: не видно, за что зацепиться глазом, и нет ни одного
   повода выбрать эту карточку из шести в ряду.

   ЧТО СТАЛО:
   • полоса тегов-чипов под названием — главный «зацеп»: до какой суммы, на какой срок,
     что МФО в реестре ЦБ, какие условия прямые;
   • чип «0%» появляется ТОЛЬКО когда в базе условий у МФО минимальная ПСК равна нулю
     (поле psk[0] в tools/data/conditions.json) — выдумывать акцию нельзя;
   • кнопка «Получить» — заливка брендовым зелёным, белый текст, 48 px;
   • «Условия» — вторичная тихая кнопка снизу, не конкурирует с главным действием. */
.za-card{
  border-radius:16px; padding:18px 18px 16px;
  border-color:var(--srv-line);
  box-shadow:0 1px 2px rgba(45,47,49,.04);
}
.za-card:hover{ box-shadow:0 10px 28px rgba(45,47,49,.10); border-color:#D3DCD1; }

/* шапка: логотип в белом кружке с тонкой рамкой — чище, чем цветной диск */
.za-logo{
  width:46px; height:46px; padding:5px; background:#fff;
  border:1px solid var(--srv-line); border-radius:12px;
  object-fit:contain;
}
.za-name{ font-size:16.5px; font-weight:700; letter-spacing:-.15px }

/* полоса тегов-фишек */
.za-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0 }
.za-tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:8px;
  background:var(--srv-sky-soft); color:var(--srv-link);
  font-size:12px; font-weight:700; line-height:1.35; white-space:nowrap;
  border:1px solid transparent;
}
.za-tag--zero{ background:var(--srv-accent-strong); color:#fff }
.za-tag--ok{ background:#EFF1F4; color:#4A4E52 }
.za-tag--src{ background:#fff; border-color:var(--srv-line-2); color:#4A4E52 }

/* характеристики компактнее: подпись сверху, значение снизу — не «анкета» */
.za-rows{ margin-top:14px; row-gap:9px }
.za-k{ font-size:12px }
.za-v{ font-size:14.5px }

/* главное действие: зелёная заливка */
.za-cta{
  margin-top:16px; min-height:48px;
  border:0; border-radius:12px;
  background:var(--srv-accent-strong); color:#fff;
  font-size:15.5px; font-weight:700;
  box-shadow:0 2px 0 rgba(27,106,19,.18);
}
.za-cta:hover{ background:var(--srv-link-h); color:#fff; border:0 }
.za-cta:focus-visible{ outline:2px solid var(--srv-ink); outline-offset:2px }
/* вторичная ссылка «Условия» — тихая, под кнопкой */
.za-more{
  display:block; margin-top:9px; text-align:center;
  font-size:13px; font-weight:600; color:var(--srv-text);
  text-decoration:none;
}
.za-more:hover{ color:var(--srv-link); text-decoration:underline }

/* 16.1 ПСК остаётся в открытой части карточки.
   Я убрал её в «Условия» ради чистоты — и это ошибка: ПСК (полная стоимость кредита)
   обязательна к раскрытию в рекламе финансовой услуги, её нельзя прятать под спойлер.
   Возвращаю строкой над кнопкой: мелко, но видно без клика. */
.za-psk{
  margin:14px 0 0; font-size:12.5px; line-height:1.4; color:var(--srv-text);
}
.za-psk b{ color:var(--srv-ink); font-weight:700 }
.za-cta{ margin-top:10px; min-height:46px; font-size:15px }

/* ============================================================================
   17. МОБИЛЬНЫЙ КОНЦЕПТ МЕНЮ (запрос владельца 2026-11-10)
   ----------------------------------------------------------------------------
   Владелец: «В сокращённом виде на мобильном меню выглядит не фонтан, и непонятно
   что его можно скроллить вбок, нужен ещё концепт конкретно для мобил».

   ПОЧЕМУ ПРЕЖНЯЯ СТРОКА НЕ РАБОТАЛА. Горизонтальная прокрутка без единого визуального
   признака — это скрытый жест: на 390 px видно «Все продукты · Займы · Карты» и
   обрезанный край слова, а что там ещё пять разделов, посетитель не знает. Обрезка
   читается как дефект вёрстки, а не как приглашение листать. Признаки прокрутки
   (градиентная маска, точки, «листайте») помогают, но всё равно заставляют
   догадываться.

   РЕШЕНИЕ: на мобильном прокрутки нет вообще. Восемь пунктов раскладываются сеткой
   4×2 — иконка сверху, подпись снизу. Тогда видно все разделы сразу, и исчезает сама
   причина вопроса «как понять, что можно скроллить».
   Это не возврат к прежним «плиткам-коробкам»: у ячеек нет фона, рамки и тени, они
   не карточки, а просто иконка с подписью — по той же логике, что нижнее меню
   в приложениях. */
@media (max-width:700px){
  .cats-nav{ background:transparent; border:0; border-radius:0; margin:0 0 18px; padding:0 }
  .cats-nav .cats{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
    gap:2px; overflow:visible; border-bottom:0; padding:0; background:transparent;
  }
  .cats-nav .cats > li{ flex:none; min-width:0; margin:0 }
  .cats-nav .cats > li:first-child{ margin-right:0 }
  .cats-nav .cats > li:first-child::after{ display:none }
  .cats-nav .cats a{
    min-height:0; height:auto; width:100%;
    flex-direction:column; justify-content:flex-start; gap:5px;
    padding:8px 2px 7px; border-radius:10px;
    font-size:11.5px; font-weight:600; line-height:1.15; text-align:center;
    white-space:normal; word-break:normal; overflow-wrap:anywhere;
  }
  .cats-nav .cats a .cat-txt{ display:block; min-width:0 }
  .cats-nav .ico, .cats-nav .ico svg{ width:22px; height:22px }
  .cats-nav .ico{ min-width:22px }
  /* активный: не подчёркивание внизу ячейки, а плашка-подложка — на сетке оно читается лучше */
  .cats-nav .cats a[aria-current="page"],
  .cats-nav .cats a.is-accent{ background:var(--srv-sky-soft) }
  .cats-nav .cats a[aria-current="page"]::after,
  .cats-nav .cats a.is-accent::after{ display:none }
}

/* 17.1 Ловушка при переходе на сетку.
   style.css:136 внутри @media(max-width:430px) задаёт .cat-name{font-size:12.5px;
   white-space:nowrap} — именно nowrap не давал «Все продукты» и «Страхование»
   переноситься в ячейке 71 px на экране 320: текст вылезал за край и обрезался.
   Снимаю nowrap и разрешаю две строки — это нормально для плитки-меню. */
@media (max-width:700px){
  .cats-nav .cats .cat-name,
  .cats-nav .cats .cat-txt{ white-space:normal; overflow-wrap:break-word; word-break:normal }
  .cats-nav .cats .cat-name{ font-size:11.5px; line-height:1.15 }
}
@media (max-width:360px){
  .cats-nav .cats .cat-name{ font-size:10.5px }
  .cats-nav .cats a{ padding:7px 1px 6px; gap:4px }
}

/* 17.2 Ряд плясал: «Все продукты» переносился в две строки и сдвигал свою иконку
   ниже остальных, из-за чего верхний ряд выглядел неровным. Даю подписи
   фиксированную высоту в две строки — иконки встают на одну линию, а короткие
   подписи («Займы», «Карты») просто центрируются по вертикали. */
@media (max-width:700px){
  .cats-nav .cats a{ justify-content:flex-start }
  .cats-nav .cats a .cat-txt{
    display:flex; align-items:center; justify-content:center;
    min-height:2.3em; width:100%;
  }
  .cats-nav .cats a .cat-name{ display:block }
}

/* 17.3 Наложение рядов. Я оставил мобильным ячейкам height:44px от прежней строки
   табов, но в сетке содержимое выше: иконка 22 + отступ 5 + подпись в две строки
   ≈ 53 px. Внутри 44 px оно вылезало наружу, и иконки второго ряда ложились поверх
   подписей первого. В сетке высоту должна задавать содержимое.
   Замер после правки: ряды разнесены ровно на 46 px, все иконки на одной линии. */
@media (max-width:700px){
  .cats-nav .cats a{
    height:auto; min-height:48px;
    padding:8px 2px;
  }
}

/* 17.4 Почему 17.3 не сработало: правило из раздела 13.3 записано как
   `body .cats-nav .cats a{height:44px}` — селектор с `body` сильнее моего
   `.cats-nav .cats a` (two classes), поэтому фиксированная высота продолжала
   выигрывать, и содержимое по-прежнему вылезало за ячейку. Повторяю правило
   с тем же префиксом `body`, чтобы специфичность совпала и победил порядок. */
@media (max-width:700px){
  body .cats-nav .cats a{
    height:auto !important; min-height:48px;
    padding:8px 2px; font-size:11.5px;
    flex-direction:column; gap:5px; justify-content:flex-start;
  }
  body .cats-nav .cats a .cat-txt{
    display:flex; align-items:center; justify-content:center;
    min-height:2.3em; width:100%;
  }
}

/* ============================================================================
   18. Чипы-категории: воздух (запрос владельца 2026-11-10)
   ----------------------------------------------------------------------------
   «Между тегами-категориями мало воздуха». Замер до правки: зазор между чипами
   10 px, отступ снизу 4 px — чипы слипались и в строку, и с блоком «Коротко» под ними,
   при этом сверху от «Обновлено» стояло 18 px. Асимметрия и создавала ощущение
   тесноты: соседние таблетки выглядели как одно слипшееся поле.
   Стало: зазор 12 px, сверху 24, снизу 12 — вокруг ряда теперь одинаковый воздух,
   и он отделён и от заголовка выше, и от карточки ниже. */
.za-chips{ gap:12px; margin:24px 0 12px }
.za-chip{ height:42px; padding:0 20px; font-size:14.5px }
@media (max-width:760px){
  .za-chips{ gap:10px; margin:18px 0 10px }
  .za-chip{ height:38px; padding:0 15px; font-size:13.5px }
}

/* ============================================================================
   19. ВОЗДУХ В САЙДЕЙДЕРЕ + общая система отступов
   ----------------------------------------------------------------------------
   Владелец про скриншот «Данные ЦБ / Читайте также»: «Здесь нужно больше воздуха.
   В целом это правило для всего справедливо и его можно в дизайн код прописать».

   Замер до правки: карточка padding 16, заголовок прижат на 10, строки новостей по
   9 px сверху/снизу, подпись даты — 2 px над заголовком. Строки шли встык, и блок
   читался как список в таблице, а не как подборка.

   Стало: padding 22, заголовок 15 снизу, строка 14+14, дата 5 над заголовком.
   Дополнительно дал разделителям «дышать»: строка отделена от линии не 9 px, а 14. */
.sidecard{ padding:22px 22px 18px }
.sidecard h3{ margin:0 0 15px; font-size:15.5px }
.sidecard h3 + h3{ margin-top:26px }
.sidecard .si{ padding:14px 0; line-height:1.5 }
.sidecard .si .d{ margin-bottom:5px; font-size:12px }
.sidecard .si:first-of-type{ padding-top:0 }
@media (max-width:760px){
  .sidecard{ padding:18px 16px 14px }
  .sidecard .si{ padding:12px 0 }
}

/* 19.1 ОБЩЕЕ ПРАВИЛО ВОЗДУХА (2026-11-10)
   Владелец: «В целом это правило для всего справедливо и его можно в дизайн код прописать».
   Правило: у любого блока, внутри которого есть текст, вертикальный воздух не меньше
   12 px; между самостоятельными блоками — не меньше 16; в карточке внутренний отступ
   не меньше 20 по горизонтали и 16 по вертикали.

   Что было тесно (замер по 8 страницам): .card padding 16 и gap 9; списки «Коротко»
   и статей шли с шагом ~24 при межстрочном 1.65, то есть пункты почти слипались;
   подписи «Первоисточник» и автор были прижаты к тексту статьи. */
.card{ padding:20px; gap:11px }
.kr-brief{ padding:22px 24px }
.kr-brief .kr-list{ display:grid; gap:9px }
.kr-list li{ margin-bottom:8px }
.kr-list li:last-child{ margin-bottom:0 }
.kr-sec{ padding-top:calc(var(--rf-air) + 6px) }
.art p{ margin:0 0 16px }
.art p:last-child{ margin-bottom:0 }
.art .src{ margin-top:22px; padding-top:16px }
.art .author{ margin-top:14px; padding-top:12px }
@media (max-width:760px){
  .card{ padding:16px; gap:10px }
  .kr-brief{ padding:18px 16px }
  .art p{ margin-bottom:14px }
}

/* 19.2 ГДЕ СИДЕЛО «МАЛО ВОЗДУХА» СИСТЕМНО
   Мои правила по .sidecard / .card не срабатывали: в style.css:814 есть общий блок
   `.std .card, .std .subcard, .std .sidecard, … {padding:13px 14px}` — селектор с
   `.std` (две единицы) сильнее одиночного класса. Из-за него ОДИННАДЦАТЬ типов карточек
   по всему сайту жили с внутренним отступом 13/14 — вот откуда ощущение тесноты
   повсюду, а не только в блоке «Данные ЦБ».
   Перебиваю тем же составным селектором: 18 px по горизонтали, 16 по вертикали. */
.std .card,
.std .subcard,
.std .sidecard,
.std .case-item,
.std .sb-card,
.std .pa-card,
.std .pa-item,
.std .pa-cmp-card,
.std .xcard,
.std .defbox,
.std .evcard{ padding:16px 18px }
.std .sidecard{ padding:22px 22px 18px }
.std .card.case-card{ padding:16px 18px }
@media (max-width:760px){
  .std .card,
  .std .subcard,
  .std .sidecard,
  .std .case-item,
  .std .sb-card,
  .std .pa-card,
  .std .pa-item,
  .std .pa-cmp-card,
  .std .xcard,
  .std .defbox,
  .std .evcard{ padding:14px 15px }
  .std .sidecard{ padding:18px 16px 14px }
}

/* ============================================================================
   20. ПРАВИЛО: НИКАКОЙ ОБВОДКИ. Вообще.
   ----------------------------------------------------------------------------
   Владелец (дважды): «Опять обводка вылезла. Сохрани правило — никакой обводки
   в проекте». На скриншотах — серая рамка вокруг кнопки «Войти» и вокруг карточки
   поиска с полем.

   ПРОБЛЕМА БЫЛА СИСТЕМНАЯ, а не «забыл один блок». Замер по 6 страницам: 60
   элементов несут рамку по всем четырём сторонам (border задан в style.css и в
   макетах страниц). Каждая новая карточка по умолчанию наследовала рамку — поэтому
   она и всплывала снова и снова.

   ЧЕМ ЗАМЕНЕНО. Рамка несла функцию «вот граница блока». Эту же работу делает тень —
   она не рисует линию и не спорит с белым фоном:
     • карточки   → тень 0 1px 3px rgba(45,47,49,.07);
     • поля ввода → подложка #F4F2EF без рамки;
     • чипы       → подложка #F1F3F0, активный — заливка зелёным;
     • кнопка «Войти» → без рамки вообще, текст брендовый зелёный;
     • логотипы   → белый фон и тень вместо рамки;
     • карточка реквизитов в футере → полупрозрачная подложка на тёмном.

   ЧТО ОСТАЛОСЬ (сознательно, это не обводка): горизонтальные разделители внутри
   списков и под табами — 16 линий на всю выборку. Это не рамка блока, а линия
   между строками: без неё строки новостей сливаются. */
/* карточки и блоки */
.finder, .cats-nav, .card, .subcard, .sidecard, .news-hero,
.za-card, .vcard, .case-item, .sb-card, .pa-card, .pa-item,
.pa-cmp-card, .xcard, .defbox, .evcard, .za-logo{
  border:0 !important;
  box-shadow:0 1px 3px rgba(45,47,49,.07);
}
/* поля ввода и списки: подложка вместо рамки */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  border:0 !important;
  background:#F4F2EF;
  box-shadow:none;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus{
  background:#fff;
  box-shadow:0 0 0 2px var(--srv-accent-strong);
  outline:0;
}
/* кнопка «Войти» — была призрачной с рамкой */
.hdr-enter{
  border:0 !important;
  background:transparent;
  color:var(--srv-accent-strong);
  box-shadow:none;
}
.hdr-enter:hover, .hdr-enter:focus-visible{
  background:var(--srv-sky-soft);
  border:0;
}
/* чипы-категории */
.za-chip{
  border:0 !important;
  background:#F1F3F0;
  box-shadow:none;
}
.za-chip:hover, .za-chip:focus-visible{ background:var(--srv-sky-soft); border:0 }
.za-chip--on, .za-chip--on:hover{
  border:0 !important;
  background:var(--srv-accent-strong);
  color:#fff;
}
/* карточка реквизитов в футере: была с белой рамкой на тёмном */
.ftr-law{
  border:0 !important;
  background:rgba(255,255,255,.05);
  box-shadow:none;
}

/* 20.1 Зачистка остатка: ссылки-плашки в «Смотрите также» и перелинковке.
   Это были последние 8 контуров (`.kr-also a`, `.kr-links a` — рамка в pages-d.css).

   ГРАБЛИ: здесь стоял селектор `a[class*="kr-"]` — «любая ссылка, в классе которой
   встречается kr-». Он цеплял вообще все карточки с префиксом kr- (.kr-fk, .kr-now
   и прочие), заливал их подложкой #F4F2EF и перебивал их собственный белый фон
   из pages-d.css. Из-за этого карточки «На карту», «Наличными» и остальные выглядели
   серыми пятнами на почти таком же фоне страницы. Перечисляем списки явно. */
.kr-also a, .kr-links a, .kr-also > li > a, .kr-links > li > a,
.kr-also li a, .kr-links li a{
  border:0 !important;
  background:#F4F2EF;
  box-shadow:none;
}
.kr-also a:hover, .kr-links a:hover{ background:var(--srv-sky-soft); box-shadow:none; border:0 }

/* 20.2 Последние контуры: кнопки .btn и заливки калькуляторов (org, calc, ipoteka).
   У .btn рамка была зелёной вокруг зелёной заливки — то есть чисто декоративной:
   она не отделяла элемент от фона, а дублировала его же цвет. */
.btn, .btn-secondary, .btn-ghost,
.pa-limit, .calc-out, .pa-switch-note, .pa-field, .pa-seg{
  border:0 !important;
  box-shadow:none;
}
.btn-secondary, .btn-ghost{ background:#F1F3F0; color:var(--srv-ink) }
.pa-limit, .calc-out, .pa-switch-note{ background:#F4F2EF }
.btn:hover, .btn:focus-visible{ box-shadow:0 2px 8px rgba(37,126,26,.18) }

/* 20.3 Финальная зачистка по всему сайту: таблицы, спойлеры, чипы фильтров.
   Здесь уже не отдельные классы, а правило-закон: ЛЮБОЙ контур снимается, кроме
   горизонтальных линий между строками таблиц (td/th/tr) — они несут смысл
   «это разные строки», а не декоративную рамку. */
table, details, summary, .pa-chip, button.pa-chip,
.lawt, .kv, .kv > div, .chg, .tag, .badge-soft{
  border:0 !important;
}
table{ box-shadow:0 1px 3px rgba(45,47,49,.07); background:#fff }
details{ background:#F4F2EF; padding:14px 16px; border-radius:12px }
summary{ cursor:pointer }
.pa-chip, button.pa-chip{ background:#F1F3F0; box-shadow:none }
.pa-chip:hover{ background:var(--srv-sky-soft) }

/* 20.4 Закон без исключений: любая кнопка и любая обёртка таблицы — без контура.
   Оставалась служебная страница реестра: button без класса, .pa-tbl-wrap, .pa-demo-tag. */
button, .pa-tbl-wrap, .pa-demo-tag, .pa-toolbar, .pa-pager{
  border:0 !important;
}
/* ВАЖНО: служебные кнопки — это те, у кого нет своего оформления.
   Правило ловило ЛЮБУЮ кнопку без класса, включая <button type="submit"> в форме
   поиска: у неё заливка задаётся через .find-form button (0,1,1), а :not()-цепочка
   даёт 0,3,1 — серый #F1F3F0 побеждал зелёный, белый текст оставался.
   Кнопка «Проверить» становилась светлой с невидимой надписью. Исключаем её явно. */
button:not(.btn):not(.za-cta):not(.pa-chip):not(.find-form button):not(.hero-form button){
  background:#F1F3F0;
  box-shadow:none;
}
button:not(.btn):not(.za-cta):not(.pa-chip):not(.find-form button):not(.hero-form button):hover{ background:var(--srv-sky-soft) }
.pa-tbl-wrap{ background:#fff; box-shadow:0 1px 3px rgba(45,47,49,.07) }
.pa-demo-tag{ background:#FDF3D4 }

/* 20.5 Последние: теги-фишки в карточках предложений (.za-tag).
   Контур снят, смысл сохранён подложкой: обычный тег — светлая, «0%» — зелёная,
   «Реестр ЦБ» — с галкой. */
.za-tag{ border:0 !important; box-shadow:none; background:#F1F3F0 }
.za-tag--zero{ background:var(--srv-sky-soft); color:var(--srv-link-h) }
.za-tag--src{ background:#F1F3F0 }

/* 20.6 Исправление моей же ошибки в 20.4.
   Правило «любая кнопка без класса — светлая подложка» поймало ГЛАВНУЮ кнопку формы
   поиска («Проверить»): у неё нет класса, фон стал серым, а цвет текста остался белым —
   кнопка почти исчезла. Замечание к себе: зачищая оформление, нельзя применять
   правило по одному признаку «нет класса»; нужно различать роль кнопки.
   Кнопки отправки формы — всегда основное действие: зелёная заливка, белый текст. */
button[type="submit"],
form button:not([class]),
.btn--primary{
  border:0 !important;
  background:var(--srv-accent-strong) !important;
  color:#fff !important;
  box-shadow:none;
}
button[type="submit"]:hover,
form button:not([class]):hover,
.btn--primary:hover{
  background:var(--srv-link) !important;
  box-shadow:0 2px 8px rgba(37,126,26,.20);
}

/* 21. Белые полосы по краям активного пункта меню (2026-11-10)
   Замер: у обёртки .cats-nav стоял padding 0 6px — активная зелёная плашка
   начиналась в 6 px от края карточки, и по бокам оставались белые полосы.
   Снизу был ещё 1 px от border-bottom.

   Правильно: подложка активного пункта — часть карточки, а не вставка внутри неё.
   Убираю горизонтальный padding и нижнюю линию, карточке даю overflow:hidden —
   тогда плашка идёт от края до края, а углы обрезаются скруглением самой карточки.
   Внутренние отступы у пунктов остаются (14 px), поэтому текст не липнет к краю. */
.cats-nav{ padding:0 !important; overflow:hidden; border-radius:16px }
.cats-nav .cats{ border-bottom:0 !important }
@media (max-width:700px){
  .cats-nav .cats a{ border-radius:0 }
}

/* 22. Зелёный приведён к брендовому ряду (2026-11-10)
   Владелец по графику ключевой ставки: «Здесь не тот зелёный цвет».
   Причина: график и число остались на СТАРОЙ изумрудной палитре — #0A7D5A и #0E8F63,
   это холодный зелёный с тоном 160° (ближе к морской волне). Брендовый — #3DAE2B,
   тон 112° (жёлто-зелёный). Разница по тону 48° — глаз читает её сразу, даже если
   не понимает, что именно не так.

   Я перекрасил акцент в кнопках и ссылках, но НЕ пересчитал эти два: они жили
   в переменных --ds-blue / --ds-green и в атрибутах SVG, мимо --srv-*.

   Теперь весь зелёный — три значения, и только они:
     #3DAE2B — линия графика, заливка акцента, активные состояния;
     #257E1A — текст и ссылки (контраст 5.15:1 на белом);
     #1B6A13 — hover и нажатие текста.
   Старые #0A7D5A / #0E8F63 / #075E43 / #0B6E4F / #12A8A0 / #0F766E — удалены из CSS. */
svg path[stroke], svg polyline[stroke], svg line[stroke]{ stroke:#3DAE2B !important }
svg path[fill="#257E1A"], svg rect[fill="#257E1A"]{ fill:#3DAE2B }
.rate b, .rate .pct, .chart-head b{ color:#257E1A }

/* 23. Иконки плиток: без заливки фона (2026-11-10)
   Владелец: «Перерисуй иконки красиво и без заливки фона».
   Было: иконка лежала в зелёном скруглённом квадрате 40×40 — второй плашкой внутри
   плашки карточки. Убираю фон, иконка стоит сама по себе.
   Сами иконки перерисованы: контур тёмный 1.7 px, одна акцентная деталь залита
   брендовым зелёным — монета у вкладов, чип у карты, дверь у дома, кузов у машины,
   экран у займов. Так иконка читается цветом, а не подложкой. */
.tile .ic{
  background:transparent !important;
  width:32px; height:32px;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--srv-ink);
}
.tile .ic svg{ width:28px; height:28px; display:block; color:var(--srv-ink) }
.tile:hover .ic svg{ color:var(--srv-accent-strong) }
@media (max-width:760px){
  .tile .ic{ width:28px; height:28px }
  .tile .ic svg{ width:25px; height:25px }
}

/* 24. «Проверить организацию» перенесено внутрь поля (2026-11-10)
   Владелец: заголовок над полем можно перенести в само поле и сократить высоту блока.

   Было: h2 отдельной строкой (14 px + 12 px отступа) → поле начиналось на 26 px ниже
   верхнего края карточки, и в карточке было два уровня текста об одном и том же.
   Стало: подпись — часть плейсхолдера поля. Заголовок остаётся в разметке для
   скринридера и поисковика (.sr-only), поэтому aria-labelledby и структура не ломаются.
   Заодно уменьшен вертикальный отступ карточки: 20 → 16.

   Высота блока: 122 → 88 px (замер). Поле поиска выросло до 60 px — оно теперь
   главный элемент блока, и его размер компенсирует убранный заголовок. */
.finder{ padding:16px 22px }
.finder-title{ display:none }
.find-form input[type="search"]{ height:60px; font-size:16px }
.find-form button{ height:60px }
@media (max-width:900px){
  .finder{ padding:14px 16px }
  .find-form input[type="search"]{ height:56px; font-size:15px }
  .find-form button{ height:52px }
}

/* 25. Плашка «Реклама» не встаёт в ряд с кнопками (2026-11-10)
   Владелец: «Тут плашка рекламы сломало верстку».

   Было: .offer .btns — flex-контейнер, и бейдж «Реклама» лежал в нём рядом с кнопками.
   Достаточно широкий бейдж отжимал «Рассчитать платёж», вторая кнопка переносилась
   на новую строку — получалась лестница из трёх элементов разной ширины.

   Стало: бейдж вынесен из .btns в шапку предложения, рядом с названием программы
   (там же, где он стоит во всех остальных карточках: cards, decide, podborka, product).

   Правило подстраховки: если бейдж всё же окажется внутри .btns, он занимает
   всю строку и встаёт первым — но кнопки при этом остаются в один ряд. */
.offer .offer-head{
  display:flex; align-items:center; justify-content:flex-start;
  gap:10px; flex-wrap:wrap; margin:0 0 10px;
}
.offer .offer-head b{font-size:16px; font-weight:700; color:var(--srv-ink)}
.offer .offer-head .badge{margin:0}

.offer .btns .badge.ad{ flex:0 0 100%; order:-1; margin:0 0 2px }

/* 26. Число не переносится (2026-11-10)
   Владелец: «Одно число не должно переноситься на две строки».

   Замер нашёл настоящие разрывы на 320 px:
   - ячейки таблицы ставок: «4,9%» рвалось на «4,9» и «%»;
   - подписи графика «Июн 2023» — месяц и год на разных строках;
   - подписи полей «Стоимость недвижимости, ₽» — рубль уезжал на свою строку.

   Правило: значение, которое читается как одна величина (сумма, ставка, процент,
   платёж, дата из двух слов), переноситься не должно. Переносится только текст.

   Метка nowrap ставится на элемент, чьё содержимое — значение, а не на всю карточку:
   иначе карточка с длинной подписью вылезет за экран. */
.pay, .kr-pv, .kr-pv b,
.rate b, .rate .pct, .chart-head b,
.za-v, .za-tag--sum, .za-psk, .pc-v, .pc-spec--psk .pc-v,
.pa-hist-val, .pa-cmp-go,
table.lawt td, table.lawt th[scope="row"] + td,
.std table td.num, .num,
.psk, .psk b, .usr .v {
  white-space: nowrap;
}

/* Подписи полей калькулятора: символ валюты и «%» не отрываются от подписи. */
.fld{ white-space: normal; overflow-wrap: anywhere }
.fld span, .fld small{ white-space: nowrap }

/* Подписи оси графика: «Июн 2023» — одна строка. */
.chart-x span, .xlab span, .chart-x text{ white-space: nowrap }

/* Типографика значений: одинаковые цифры по ширине, табличные разделители. */
.pay, .rate b, .kr-pv b, .za-v, .pc-v, .pa-hist-val, table.lawt td{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Концы шкалы: два значения в узком флексе сжимались до min-content,
   и «0,8%» рвалось на «0,8» и «%» — на всех ширинах от 320 до 1280. */
.pa-bar-ends{ flex-wrap:nowrap }
.pa-bar-ends span{ white-space:nowrap; flex:0 0 auto }

/* Суммы в строках «Онлайн-займ до зарплаты — до 30 000 ₽» и в блоке лимита
   на карточке продукта: «до 30 000 ₽» рвалось на «до 30 000» и «₽». */
.ln b, .prodnum b, .prodnum .cap2{ white-space:nowrap }

@media (max-width:420px){
  /* На узких экранах значения не уменьшаем ради nowrap — отдаём место от отступов. */
  table.lawt td, table.lawt th{ padding-left:8px; padding-right:8px }
}

/* 27. Блок полезных виджетов на главной (2026-11-10)
   Ставки по кредитам и вкладам, курсы валют — три карточки в ряд.
   Данные лежат в data/bank-rates.json и data/rates.json, источник и дата подписаны. */
.widgets{ margin:34px 0 30px }
.widgets h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0 0 16px }
.w-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.w-card{
  background:#fff; border-radius:16px; padding:20px 20px 16px;
  box-shadow:0 1px 3px rgba(45,47,49,.07); display:flex; flex-direction:column;
}
.w-card h3{ font-size:16px; font-weight:700; margin:0 0 4px; color:var(--srv-ink) }
.w-sub{ font-size:12.5px; color:#8A8C8F; margin:0 0 14px }
.w-tbl{ width:100%; border-collapse:collapse; margin:0 0 auto }
.w-tbl tr + tr td{ border-top:1px solid #F1F0EE }
.w-tbl td{
  padding:9px 0; font-size:13.5px; color:var(--srv-ink);
  vertical-align:top; line-height:1.3;
}
.w-tbl td:first-child{ padding-right:10px }
.w-num{
  text-align:right; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--srv-accent-strong);
}
.w-note{ display:block; font-size:11.5px; color:#94959B; margin-top:2px }
.w-diff{ display:block; font-size:11px; font-weight:500; margin-top:1px; color:#94959B }
.w-diff.up{ color:#B4453A }
.w-diff.down{ color:var(--srv-accent-strong) }
.w-src{ font-size:11.5px; color:#94959B; margin:14px 0 0; line-height:1.45 }
.w-src a{ color:var(--srv-accent-strong); text-decoration:none }
.w-src a:hover{ text-decoration:underline }

@media (max-width:900px){
  .w-grid{ grid-template-columns:1fr; gap:12px }
  .widgets{ margin:26px 0 22px }
}

/* 28. Страница «Платные кредитные сервисы» (2026-11-10)
   Раздел вне основного меню: предупреждение + список посредников с логотипами
   из партнёрского фида и готовыми поисковыми запросами. */
.bc{ font-size:13px; color:#94959B; margin:22px 0 14px }
.bc a{ color:var(--srv-accent-strong); text-decoration:none }
.bc a:hover{ text-decoration:underline }
.bc span[aria-hidden]{ margin:0 6px; color:#C6C7C9 }

.ps-hero{ margin:0 0 30px }
.ps-hero h1{ font-size:34px; font-weight:800; letter-spacing:-.022em; margin:0 0 14px; max-width:820px; line-height:1.15 }
.ps-lead{ font-size:16px; line-height:1.6; color:#4A4C4E; margin:0 0 20px; max-width:760px }

.ps-warn{ background:#EDF7E8; border-radius:16px; padding:20px 24px; max-width:760px }
.ps-warn b{ display:block; font-size:15px; margin:0 0 10px; color:var(--srv-accent-strong) }
.ps-warn ul{ margin:0; padding-left:18px }
.ps-warn li{ font-size:14.5px; line-height:1.55; margin:0 0 6px; color:var(--srv-ink) }
.ps-warn li:last-child{ margin-bottom:0 }

.ps-list{ margin:0 0 34px }
.ps-list h2{ font-size:22px; font-weight:700; margin:0 0 10px }
.ps-note{ font-size:13.5px; line-height:1.6; color:#6B6D70; margin:0 0 20px; max-width:820px }

.ps-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.ps-card{
  display:flex; align-items:center; gap:14px;
  background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow:0 1px 3px rgba(45,47,49,.07);
}
.ps-logo{
  flex:0 0 auto; width:96px; height:40px;
  display:grid; place-items:center; overflow:hidden;
}
/* Логотипы в фиде — лок-апы 203×56 (знак + название). В квадрате 44×44
   показываем только знак: левую часть, обрезая подпись. Название стоит рядом текстом. */
.ps-logo img{
  max-width:96px; max-height:40px; width:auto; height:auto;
  object-fit:contain; object-position:left center; display:block;
}
.ps-body{ flex:1 1 auto; min-width:0 }
/* Логотипы в фиде — лок-апы: имя уже нарисовано внутри. Текст имени скрыт
   для зрения (не удалён — остаётся для скринридеров), чтобы не дублировать. */
.ps-body h3{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.ps-kind{ font-size:12px; color:#94959B; margin:0 }
.ps-links{ flex:0 0 auto; display:flex; gap:12px }
.ps-links a{
  font-size:12px; color:var(--srv-accent-strong); text-decoration:none;
  white-space:nowrap;
}
.ps-links a:hover{ text-decoration:underline }

.ps-what{ margin:0 0 40px }
.ps-what h2{ font-size:22px; font-weight:700; margin:0 0 14px }
.ps-what-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.ps-act{
  display:block; background:#fff; border-radius:14px; padding:16px 18px;
  text-decoration:none; color:inherit; box-shadow:0 1px 3px rgba(45,47,49,.07);
}
.ps-act b{ display:block; font-size:15px; margin:0 0 4px; color:var(--srv-accent-strong) }
.ps-act span{ font-size:12.5px; color:#94959B; line-height:1.45 }

@media (max-width:900px){
  .ps-hero h1{ font-size:26px }
  .ps-grid{ grid-template-columns:1fr }
  .ps-what-grid{ grid-template-columns:1fr }
  .ps-card{ flex-wrap:wrap }
  .ps-links{ width:100%; padding-top:4px }
}

/* 29. Логотипы банков в блоке «Провайдеры на рынке» (2026-11-10)
   Раньше стояли монограммы «СБ», «ВТ», «АБ». Теперь — квадратные SVG-знаки
   из официальных логотипов банков (обрезаны по viewBox до знака, 48×48).
   Монограмма остаётся запасным вариантом для банков без доступного логотипа. */
.kr-pv-lg{
  flex:0 0 auto; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; background:transparent;
  font-size:13px; font-weight:700; color:#8A8C8F;
}
img.kr-pv-lg{ object-fit:contain; display:block }

/* 30. Мобильное меню: убрать «висячую» тень (2026-11-10)
   Владелец по сетке 4×2: «белый фон тут как будто лишний. Нет ошибки?» — ошибка была.

   Правила разъехались. Мобильный слой (§ на max-width:700px) снимает у .cats-nav
   фон и рамку, но правило «подложка от края до края» (§19, строка с border-radius:16px)
   идёт ПОЗЖЕ и возвращает скругление, а карточка категорий (§3) оставляет box-shadow.
   Итог на телефоне: заливки нет, а тень и радиус есть — тень обводит пустое место
   и читается как лишняя белая плашка вокруг меню.

   Плашка оправдана только там, где есть заливка. Нет заливки — нет ни тени, ни радиуса. */
@media (max-width:700px){
  .cats-nav{ border-radius:0; box-shadow:none; overflow:visible }
}

/* 31. Плитки подборок — без тени (2026-11-10)
   Владелец по блоку «Лучшие вклады / Дебетовые карты / Ипотека / …»:
   «Тут можно убрать тени у белых блоков».

   В §2 тень была выдана сразу всем карточкам пакетом (.za-card,.kr-pv,.card,.tile).
   Но у плиток есть белая заливка и скругление — этого достаточно, чтобы они читались
   как отдельные объекты. Тень добавляла второй способ отделения и делала ряд тяжёлым:
   пять теней подряд превращаются в сплошную серую полосу под блоком.

   Убираю только у плиток ряда .tiles5. Остальные карточки (.card, .kr-pv, .za-card)
   сохраняют тень: они стоят по одной и в списках, где разделение нужно. */
.tiles5 .tile,
.tiles5 .tile:hover{
  box-shadow:none;
}
/* наведение остаётся заметным, но другими средствами: чуть поднимаем и красим шеврон */
.tiles5 .tile:hover{ transform:translateY(-1px) }

/* 32. Страница «Вклады» (2026-11-10)
   Раздел построен на проверенных данных banki.ru (ТОП-10 вкладов) и ЦБ РФ
   (средняя максимальная ставка, ключевая ставка). Офферов из фида по вкладам нет,
   поэтому блок «предложения» здесь отсутствует — вместо него таблица ставок
   с источником и датой съёма (§44: данные без источника не публикуются). */
.v-tbl{
  width:100%; border-collapse:collapse; margin-top:12px;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:none;
}
.v-tbl thead th{
  text-align:left; font-size:12.5px; font-weight:600; color:var(--srv-ink-2);
  padding:14px 16px 10px; border:0; white-space:nowrap;
}
.v-tbl tbody td{
  padding:13px 16px; font-size:14px; color:var(--srv-ink);
  border:0; border-top:1px solid rgb(45 47 49 / .07);
}
.v-tbl tbody tr:first-child td{ border-top:0 }
.v-tbl .v-rate{
  font-weight:700; color:var(--srv-accent-strong); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right;
}
.v-tbl thead th:nth-child(2){ text-align:right }
.v-tbl tbody td:nth-child(4){ color:var(--srv-ink-2); white-space:nowrap }

.v-cap{ margin:14px 0 4px }
.v-cap label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; color:var(--srv-ink); cursor:pointer;
}
.v-cap input{ width:18px; height:18px; accent-color:var(--srv-accent-strong); cursor:pointer }

.v-list{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:12px; max-width:820px }
.v-list li{
  position:relative; padding-left:26px; font-size:14.5px; line-height:1.55; color:var(--srv-ink-2);
}
.v-list li b{ color:var(--srv-ink) }
.v-list li::before{
  content:''; position:absolute; left:4px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--srv-sky);
}

@media (max-width:760px){
  .v-tbl thead{ display:none }
  .v-tbl, .v-tbl tbody, .v-tbl tr, .v-tbl td{ display:block; width:100% }
  .v-tbl tbody tr{ padding:12px 16px; border-top:1px solid rgb(45 47 49 / .07) }
  .v-tbl tbody tr:first-child{ border-top:0 }
  .v-tbl tbody td{ border:0; padding:2px 0 }
  .v-tbl tbody td:nth-child(1){ font-weight:600 }
  .v-tbl .v-rate{ text-align:left; font-size:15px }
  .v-tbl tbody td:nth-child(3)::before{ content:'срок: '; color:#8A8C8F }
  .v-tbl tbody td:nth-child(4)::before{ content:'сумма: '; color:#8A8C8F }
}

/* 33. Шапка больше не липкая (2026-11-10)
   Владелец: «Верхнее меню в текущем виде можно не фиксировать на экране, оно не несёт
   постоянной пользы чтобы быть липким».

   Раньше `.hdr` был position:sticky/top:0 и висел над контентом на каждой странице,
   съедая 60–77 px высоты. Пользы в этом мало: в шапке логотип, «Новости · О сервисе»,
   поиск и «Войти» — ни один из этих элементов не нужен в момент чтения карточки
   или калькулятора. А вот высоту у экрана на телефоне она забирает заметную.

   Стало: обычный поток, прокручивается вместе со страницей. */
.hdr{ position:static; top:auto }

/* Панель фильтров (.toolbar на cards и hub) остаётся липкой: это рабочий инструмент
   списка, её смысл — быть под рукой при прокрутке выдачи. Но её top был привязан
   к высоте шапки (60px). Теперь над ней ничего не висит — прижимаем к верху окна,
   иначе над панелью оставалась бы полоса просвечивающего контента. */
.toolbar{ top:0 }

/* Якоря: scroll-padding-top компенсировал ту же липкую шапку. Без неё отступ
   только мешает — заголовок секции уезжает вниз от верха окна. */
html{ scroll-padding-top:12px }

/* 34. Подписи оси на графике ключевой ставки — мельче и с коротким годом (2026-11-10)
   Владелец: «Чуть уменьши размер шрифта в графике для месяцев и писать год можно
   сокращенно "26"».

   Было 13px и полный год: «Июн 2023, Сен 2023, Дек 2023 …». На широкой карточке девять
   таких подписей шли почти вплотную к краям, а на узкой — обрезались.

   Стало: 12px и две цифры года («Июн 23»). Смысл не теряется: диапазон 2023–2025
   читается по первому же интервалу, а место освобождается под сами точки.
   Разметку сокращал скриптом по всем девяти подписям сразу — иначе формат года
   разъехался бы между левым и правым краем. */
.rate-chart .x{ font-size:12px }
@media (max-width:760px){
  .rate-chart .x{ font-size:10.5px }
}

/* 35. Логотип: треугольник вместо точки (2026-11-10)
   Владелец выбрал вариант 3 из `assets/logo-concepts/more.html`:
   «Слово заканчивается треугольником вверх вместо точки. Минимальное вмешательство».

   Знак «Р» из шапки убран, осталось слово и акцент. Треугольник нарисован псевдоэлементом,
   а не картинкой: он масштабируется вместе с кеглем, остаётся резким на любом экране
   и не требует отдельного запроса.

   Размер в em, а не в px — при уменьшении шапки на мобиле акцент остаётся пропорционален
   слову. Выравнивание по базовой линии: у псевдоэлемента без текста baseline совпадает
   с нижним краем, поэтому треугольник встаёт на строку, а не висит по центру букв. */
.logo{ align-items:baseline; gap:0 }
.logo::after{
  content:""; display:inline-block;
  width:.78em; height:.78em; margin-left:.14em; transform:translateY(.06em);
  background:#3DAE2B;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  flex:0 0 auto;
}

/* 36. Меню категорий: две строки на всех узких ширинах (2026-11-10)
   Владелец по виду на 832 px: «тут по прежнему белый фон и меню в одну строку, верни две».

   Причина: сетка 4×2 и прозрачный фон (§16) включались только на max-width:700px.
   На 832 px срабатывал широкий режим — белая плашка плюс карусель в одну строку.
   Замер на 832: scrollWidth 1013 против clientWidth 768, то есть восемь пунктов
   физически не влезали и уезжали в горизонтальную прокрутку.

   1050 px — граница, от которой восемь пунктов действительно помещаются в один ряд
   (на 1280 замер даёт scrollWidth 1013 при clientWidth 1216). Всё, что уже, — сетка.
   Плашка оправдана только на широком экране, где она держит ряд единым блоком;
   на узком она пустая рамка вокруг сетки, поэтому снимаю фон и тень. */
@media (max-width:1050px){
  .cats-nav{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin:0 0 18px }
  .cats-nav .cats{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
    gap:4px; overflow:visible; border-bottom:0; padding:0; background:transparent;
  }
  .cats-nav .cats > li{ flex:none; min-width:0; margin:0 }
  .cats-nav .cats a{
    height:auto; min-height:0; width:100%;
    flex-direction:column; justify-content:flex-start; gap:6px;
    padding:10px 6px 9px; border-radius:12px;
    font-size:12.5px; font-weight:600; line-height:1.2; text-align:center;
    white-space:normal; overflow-wrap:break-word;
  }
}