/* credit-plus.kz — дизайн-система v2 (02.09.2026).
   Mobile-first, ноль внешних запросов: системный стек шрифтов, никаких CDN.
   Опознавательный знак сайта — «проверяемая строка»: табличные данные,
   которые заканчиваются оранжевым плюсом. Всё остальное держится тихо. */

:root{
  --c-ink:#14202B;
  --c-primary:#143A5A;
  --c-primary-dk:#0D2840;
  /* Белый текст на прежнем #D9501F давал 4,10:1 — ниже порога AA 4.5 для
     обычного кегля. Затемнено до 4,77:1; ховер — до 6,45:1. */
  --c-cta:#C8481B;
  --c-cta-dk:#A83911;
  --c-good:#0F7355;
  --c-good-bg:#E4F2ED;
  --c-warn:#9A4E14;
  --c-warn-bg:#FBEEE2;
  --c-bg:#F1F5F7;
  --c-card:#FFFFFF;
  --c-sunk:#E9EFF3;
  --c-line:#D7E0E6;
  --c-muted:#5B6E7B;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,32,43,.06), 0 3px 12px rgba(20,32,43,.05);
  --maxw:1100px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--c-ink);background:var(--c-bg);
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--c-cta);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.num{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{line-height:1.24;text-wrap:balance;letter-spacing:-.012em}
h1{font-size:1.7rem;margin:0 0 .55em;font-weight:800}
h2{font-size:1.35rem;margin:1.9em 0 .6em;font-weight:700}
h3{font-size:1.1rem;margin:1.5em 0 .5em;font-weight:700}
p{margin:0 0 1em;max-width:64ch}
ul,ol{margin:0 0 1.1em;padding-left:1.35em;max-width:64ch}
li{margin-bottom:.4em}
@media(min-width:760px){h1{font-size:2.2rem}h2{font-size:1.6rem}h3{font-size:1.2rem}}

/* ---------- шапка ---------- */
.hdr{background:var(--c-card);border-bottom:1px solid var(--c-line);position:sticky;top:0;z-index:60}
.hdr .wrap{display:flex;align-items:center;gap:14px;min-height:58px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.18rem;
  color:var(--c-primary);letter-spacing:-.03em;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo span{display:inline}
.logo b{color:var(--c-cta);font-weight:800}
.logo-mark{width:26px;height:26px;flex:0 0 26px}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:10px 11px;border-radius:8px;color:var(--c-ink);font-size:.94rem;
  white-space:nowrap;min-height:44px;display:flex;align-items:center}
.nav a:hover{background:var(--c-sunk);text-decoration:none}
.nav a[aria-current]{color:var(--c-primary);font-weight:700;background:var(--c-sunk)}
.lang{margin-left:6px;font-size:.85rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-muted);padding:10px 8px;min-height:44px;
  display:flex;align-items:center;white-space:nowrap}

/* На узких экранах горизонтальная прокрутка меню была ловушкой: при 375px из
   шести разделов помещались два, остальные 406 px уезжали вправо без единого
   признака, что строку можно листать. Четыре раздела для мобильного посетителя
   просто не существовали. Переносим меню на свою строку и разрешаем перенос —
   видно всё, прокручивать нечего. */
@media(max-width:719px){
  /* И липкой такая шапка быть не должна: в две строки она занимает 176 px —
     пятую часть экрана телефона — навсегда. Постоянное действие на мобильном
     уже даёт кнопка внизу, так что шапку отпускаем скроллиться. */
  .hdr{position:static}
  .hdr .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;min-height:0}
  .logo{order:1}
  .lang{order:2;margin-left:auto}
  .nav{order:3;flex-basis:100%;margin-left:0;overflow-x:visible;flex-wrap:wrap;
    gap:2px 0;border-top:1px solid var(--c-line);padding-top:4px;margin-top:6px}
  .nav a{padding:9px 10px;font-size:.9rem}
}

/* ---------- крошки ---------- */
.crumbs{font-size:.85rem;color:var(--c-muted);padding:12px 0 0;display:flex;flex-wrap:wrap;gap:.4em}
.crumbs a{color:var(--c-muted)}
.crumbs i{font-style:normal;opacity:.5}

/* ---------- герой ---------- */
.hero{background:linear-gradient(158deg,var(--c-primary) 0%,var(--c-primary-dk) 100%);
  color:#fff;padding:30px 0 34px;position:relative;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0 0 0 auto;width:min(44vw,680px);
  background:url("/assets/brand/pattern-ledger.svg?v=a0de9271d0") repeat;opacity:.75;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.hero h1{color:#fff}
.hero .lead{font-size:1.06rem;color:#D6E4EE;max-width:62ch}
.hero a{color:#9FCDE6}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;
  font-size:.88rem;color:#B9D2E2}
.hero-stats b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:22px}
.hero-cta .btn{flex:1 1 220px}
/* До 720 px липкая полоса внизу уже несёт «Подобрать займ» — вторая такая же
   кнопка в 40 px над ней выглядела ошибкой вёрстки. Оставляем только сравнение. */
@media(max-width:719px){.hero-cta .btn-cta{display:none}}
.hero-note{font-size:.83rem;color:#A7C0D2;line-height:1.55;margin:14px 0 0;max-width:60ch}
.hero-note a{color:#9FCDE6}
.hero-art{display:none}
.hero-calc{margin-top:26px}
/* Карточка расчёта в первом экране: заголовок мельче, поля плотнее — иначе
   блок результата не помещается над сгибом ноутбука 1366×768. */
/* .hero задаёт color:#fff всему поддереву. Белая карточка расчёта внутри него
   унаследовала белый текст: заголовок и значения «Переплата / К возврату»
   пропадали на белом фоне. Возвращаем обычные цвета явно. */
.hero-calc .calc{padding:18px;color:var(--c-ink)}
.hero-calc .calc a{color:var(--c-primary)}
.hero-calc .calc-match{color:var(--c-ink)}
.hero-calc .calc h2{font-size:1.2rem}
.hero-calc .calc-row{margin-bottom:12px}
@media(min-width:760px){.hero-calc .calc h2{font-size:1.3rem}}
@media(min-width:1000px){
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
  .hero-calc{margin-top:0}
  .hero-stats{flex-direction:column;gap:6px}
  /* Иллюстрация — фоном, а не <img>. Тег с display:none браузер всё равно
     скачивает (картинки обходят lazy-loading), и ниже 1000 px, где блок скрыт,
     мобильный платил 119 КБ за то, чего не видит. Фон не грузится вовсе.
     Размер 300×225 — ровно бокс отрисовки; файл отдаётся 600×450 под экраны 2×.
     Кадр прежний: прижат вверх и обрезан контейнером по высоте 160 px. */
  .hero-art{display:block;height:160px;margin:4px 8px -18px 0;pointer-events:none;
    background:url("/assets/graphics/verified-comparison-600.webp?v=2c9af2acd6") right top / 300px 225px no-repeat;
    filter:drop-shadow(0 16px 22px rgba(4,20,33,.18))}
}

/* Шапка липкая от 720 px — без запаса якорь уезжает под неё. */
h2[id],h3[id],section[id]{scroll-margin-top:16px}
@media(min-width:720px){h2[id],h3[id],section[id]{scroll-margin-top:74px}}

/* ---------- якорная панель: страница длинная, ориентир нужен ---------- */
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px;
  padding:16px 0 0;font-size:.9rem;color:var(--c-muted)}
.jump>span{font-weight:600}
.jump a{display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;
  border:1px solid var(--c-line);border-radius:19px;background:var(--c-card);
  color:var(--c-primary);font-weight:600;font-size:.88rem}
.jump a:hover{border-color:var(--c-primary);text-decoration:none}

/* ---------- фирменная линейная инфографика ---------- */
.catalog-guide{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  margin:26px 0 2px;padding:20px 0}
.catalog-guide h2{font-size:1.05rem;margin:0 0 16px;color:var(--c-primary)}
.guide-list{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:16px}
.guide-item{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:start;margin:0}
.guide-icon,.card-icon{width:42px;height:42px;border-radius:10px;background:var(--c-sunk);
  color:var(--c-primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.guide-icon svg,.card-icon svg{width:23px;height:23px}
.guide-item:nth-child(4) .guide-icon{background:var(--c-warn-bg);color:var(--c-cta)}
.guide-item h3{font-size:.96rem;margin:1px 0 2px}
.guide-item p{font-size:.83rem;color:var(--c-muted);line-height:1.48;margin:0}
@media(min-width:760px){
  .guide-list{grid-template-columns:repeat(4,1fr);gap:0}
  .guide-item{padding:0 18px;border-left:1px solid var(--c-line)}
  .guide-item:first-child{padding-left:0;border-left:0}
  .guide-item:last-child{padding-right:0}
}

/* ---------- связка калькулятора с витриной ---------- */
.calc-match{font-size:.92rem;margin:14px 0 0;padding:11px 13px;
  background:var(--c-sunk);border-radius:8px;line-height:1.5}
.calc-match b{font-variant-numeric:tabular-nums}
.calc-det{margin-top:12px}
.calc-det summary{font-size:.85rem;color:var(--c-muted);cursor:pointer;font-weight:600;
  list-style:none;display:inline-flex;align-items:center;gap:7px;min-height:32px}
.calc-det summary::-webkit-details-marker{display:none}
.calc-det summary::before{content:"+";font-size:1.1rem;line-height:1;font-weight:400}
.calc-det[open] summary::before{content:"–"}
.calc-det .calc-note{margin-top:2px}
.filter-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:.9rem;margin:12px 0 0;padding:11px 13px;background:var(--c-sunk);
  border-radius:8px;max-width:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--c-primary);
  font-weight:600;cursor:pointer;text-decoration:underline}

/* ---------- секции / карточки ---------- */
main{padding-bottom:40px}
.sec{padding:26px 0 4px}
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin:0 0 18px}
.card h2:first-child,.card h3:first-child{margin-top:0}
.cols{display:grid;gap:16px}
@media(min-width:760px){.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:repeat(3,1fr)}}
.trust-card .card-icon{background:var(--c-primary);color:#fff}
.trust-card:nth-child(2) .card-icon{background:var(--c-good-bg);color:var(--c-good)}
.trust-card:nth-child(3) .card-icon{background:var(--c-warn-bg);color:var(--c-warn)}
.trust-card .card-icon+h3{margin-top:12px}

/* ---------- редакционная иллюстрация ---------- */
.section-split{display:grid;gap:10px;align-items:center}
.section-visual{margin:0 auto;max-width:390px;order:2;text-align:center}
.section-visual img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(20,32,43,.09))}
.section-visual figcaption{font-size:.78rem;color:var(--c-muted);line-height:1.45;margin-top:6px}
@media(min-width:860px){
  .section-split{grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);gap:42px}
  .section-visual{order:initial}
}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:9px;font-weight:700;font-size:1rem;
  border:0;cursor:pointer;text-align:center;font-family:inherit}
.btn:hover{text-decoration:none}
.btn-cta{background:var(--c-cta);color:#fff}
.btn-cta:hover{background:var(--c-cta-dk)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* .hero a (0,1,1) специфичнее .btn-cta (0,1,0) и перекрашивал текст кнопок
   героя в светло-голубой: на оранжевом это давало 2,81:1 вместо 4,77:1. */
.hero .btn-cta,.hero .btn-ghost{color:#fff}
.btn-line{background:transparent;border:2px solid var(--c-line);color:var(--c-primary)}
.btn-line:hover{border-color:var(--c-primary)}
.btn-sm{min-height:40px;padding:8px 14px;font-size:.92rem;border-radius:8px}
.btn-block{display:flex;width:100%}

/* ---------- витрина: таблица (десктоп) / карточки (мобильные) ---------- */
.offers{margin:14px 0 6px}
.offer{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.offer-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.offer-logo{width:44px;height:44px;flex:0 0 44px;border-radius:8px;background:var(--c-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:1.05rem;letter-spacing:-.03em}
.offer-name{font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.offer-name a{color:var(--c-ink)}
.offer-legal{font-size:.79rem;color:var(--c-muted);margin-top:2px}
.offer-score{margin-left:auto;text-align:right;flex:0 0 auto}
.offer-score b{display:block;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--c-primary)}
.offer-score span{font-size:.72rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em}
.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;
  border-top:1px solid var(--c-line);padding-top:12px}
@media(min-width:700px){.offer-grid{grid-template-columns:repeat(4,1fr)}}
.offer-cell dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--c-muted);font-weight:600;margin-bottom:2px}
.offer-cell dd{font-size:.98rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35}
.offer-cell dd small{display:block;font-weight:400;font-size:.8rem;color:var(--c-muted);
  font-variant-numeric:normal;margin-top:2px}
.offer-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--c-line)}
.offer-foot .btn{flex:1 1 190px}
.offer-lic{font-size:.78rem;color:var(--c-muted);flex:1 1 220px;line-height:1.45}
.offer-lic a{color:var(--c-muted);text-decoration:underline}

.badge{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.03em;
  padding:3px 8px;border-radius:20px;white-space:nowrap}
.badge-good{background:var(--c-good-bg);color:var(--c-good)}
.badge-warn{background:var(--c-warn-bg);color:var(--c-warn)}
.badge-plain{background:var(--c-sunk);color:var(--c-muted)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}

/* ---------- сводная таблица ---------- */
.tw{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--c-card);margin:16px 0}
/* Подсказка про боковую прокрутку. Приём с градиентами на background-attachment
   здесь не подошёл: тень видна, только если содержимое прозрачно, а тогда
   строки таблицы теряют белый фон и уезжают в цвет страницы. Поэтому просто
   говорим словами — и только там, где прокрутка реально есть. */
.tw-hint{display:none;font-size:.8rem;color:var(--c-muted);margin:-8px 0 16px}
@media(max-width:719px){.tw-hint{display:block}}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:560px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--c-line);vertical-align:top}
thead th{background:var(--c-sunk);font-size:.73rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--c-muted);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
/* tabular-nums нужен всем числовым ячейкам, а вот nowrap — только тем, где
   значение действительно нельзя рвать. Из-за общего nowrap сводная таблица
   раздувалась до 1556 px и обрезалась даже на 1920. */
td.n{font-variant-numeric:tabular-nums}
td.n.nw{white-space:nowrap}
td b{font-weight:700}

/* ---------- калькулятор ---------- */
.calc{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow)}
.calc>h2:first-child{margin-top:0}
.calc-row{margin-bottom:16px}
.calc-row label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.86rem;font-weight:600;color:var(--c-muted);margin-bottom:7px;gap:10px}
.calc-row output{font-size:1.05rem;font-weight:800;color:var(--c-ink);
  font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:44px;accent-color:var(--c-cta);background:transparent}
.calc-out{background:var(--c-sunk);border-radius:9px;padding:15px;margin-top:4px}
.calc-out dl{display:grid;grid-template-columns:1fr auto;gap:9px 12px;margin:0}
.calc-out .cr{display:contents}
.hl{color:var(--c-cta);font-weight:600}
.calc-out dt{color:var(--c-muted);font-size:.92rem}
.calc-out dd{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
/* «К возврату» — главное число сайта. На фоне --c-sunk оранжевый --c-cta даёт
   4,12:1: как крупный жирный текст это проходит AA (порог 3:1), но с запасом в
   ноль. Тёмный вариант даёт 5,60:1 и проходит даже по норме для обычного кегля. */
.calc-out .big dd{font-size:1.3rem;color:var(--c-cta-dk);font-weight:800}
.calc-out .big dt{font-weight:700;color:var(--c-ink)}
.calc-note{font-size:.82rem;color:var(--c-muted);margin:12px 0 0;line-height:1.5}

/* ---------- фильтры ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;
  border-radius:20px;border:1px solid var(--c-line);background:var(--c-card);
  font-size:.9rem;color:var(--c-ink);font-weight:600;font-family:inherit;cursor:pointer}
.chip:hover{border-color:var(--c-primary);text-decoration:none}
.chip[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
/* Пометка кросс-языкового перехода: в казахском разделе часть ссылок ведёт на
   русские страницы, и об этом честнее сказать до клика, а не после. */
.lng{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-muted);background:var(--c-sunk);padding:2px 6px;border-radius:3px;
  white-space:nowrap;vertical-align:.08em}

/* ---------- FAQ ---------- */
.faq details{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  margin-bottom:9px;overflow:hidden}
.faq summary{padding:14px 16px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1rem;font-weight:700;font-family:inherit;line-height:1.4}
.faq summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;color:var(--c-muted);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .faq-body{padding:0 16px 14px}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- заметки ---------- */
/* Состояние несёт поверхность, а не полоса сбоку: цвет фона и рамки в одном
   оттенке, а сам вердикт всегда проговорён словами в тексте заметки. */
.note{background:var(--c-sunk);border:1px solid var(--c-line);border-radius:8px;
  padding:14px 16px;margin:18px 0;font-size:.95rem}
.note.warn{background:var(--c-warn-bg);border-color:#E4C39B;color:#5F3009}
.note.good{background:var(--c-good-bg);border-color:#A8D3C4;color:#0B4636}
.note.warn b,.note.good b{color:inherit}
.note.warn a{color:var(--c-warn)}
.note.good a{color:var(--c-good)}
.note p:last-child{margin-bottom:0}
.note b{font-weight:700}

/* Самодостаточный блок-ответ на первом экране: и читателю прямой ответ,
   и цитируемый фрагмент нужного размера для ИИ-поиска.
   Набран как врез в начале статьи — крупнее основного текста, между двух
   линеек. Карточкой с цветной полосой слева намеренно НЕ оформлен: ровно так
   уже выглядят .note, и второй такой же элемент на той же странице читался бы
   как повтор, а не как другой тип содержимого. */
.key{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  padding:16px 0;margin:18px 0 22px;max-width:64ch;
  font-size:1.06rem;line-height:1.62;color:var(--c-ink)}
.key b{font-weight:700}
@media(min-width:760px){.key{font-size:1.12rem}}

.chart{margin:22px 0;padding:16px 18px;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--radius);box-shadow:var(--shadow);color:var(--c-ink)}
.chart figcaption{font-size:.88rem;font-weight:600;color:var(--c-muted);margin-bottom:10px}
.chart svg{width:100%;height:auto;font-variant-numeric:tabular-nums}
/* На узком экране SVG ужимался вместе с подписями до ~6 px. Показываем в
   натуральном размере с боковой прокруткой — как таблицы. */
@media(max-width:719px){
  .chart svg{width:620px;max-width:none}
  /* Прокручивается только сам рисунок: подпись и сноска должны остаться на месте. */
  .chart-scroll{overflow-x:auto}
  .chart .tw-hint{margin:10px 0 0}
}
.chart-note{font-size:.83rem;color:var(--c-muted);margin:10px 0 0;line-height:1.5}

/* Готовая SVG-инфографика остаётся читаемой на телефоне: не ужимает подписи,
   а прокручивается внутри своей рамки, как широкая таблица рядом. */
.infographic{margin:20px 0 12px;border-radius:var(--radius)}
.infographic-scroll{overflow-x:auto;border-radius:var(--radius)}
.infographic img{width:100%;height:auto;min-width:780px}
.infographic .tw-hint{margin:8px 0 0}

.disclaimer{font-size:.85rem;color:var(--c-muted);background:var(--c-sunk);
  border-radius:8px;padding:13px 15px;margin:18px 0;line-height:1.55}
.disclaimer p:last-child{margin-bottom:0}
.updated{font-size:.83rem;color:var(--c-muted);margin:6px 0 14px}
.updated b{color:var(--c-ink);font-weight:600}

/* ---------- перелинковка ---------- */
.related{display:grid;gap:10px;margin:16px 0}
@media(min-width:700px){.related{grid-template-columns:1fr 1fr}}
.related a{display:block;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:9px;padding:13px 15px;font-weight:600}
.related a:hover{border-color:var(--c-primary);text-decoration:none}
.related a span{display:block;font-weight:400;font-size:.85rem;color:var(--c-muted);margin-top:3px}

/* ---------- подвал ---------- */
.ftr{background:var(--c-primary-dk);color:#B9CBD8;padding:30px 0 24px;margin-top:36px;font-size:.9rem}
.ftr a{color:#DCE8F0}
.ftr .cols{gap:22px}
@media(min-width:760px){.ftr .cols{grid-template-columns:2fr 1fr 1fr}}
/* Заголовки подвала — h2, а не h4: после h2 в контенте прыжок сразу на h4
   давал пропуск уровня. Вид от смены тега не меняется. */
.ftr .ftr-h{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 10px;font-weight:700;line-height:1.3}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:7px}
.ftr-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:22px;padding-top:16px;
  font-size:.82rem;line-height:1.6;color:#93A9B9}
.ftr-legal p{max-width:none}
.agent-note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.8rem;color:#8FA5B5;line-height:1.55}
.agent-note a{color:#B9CBD8;text-decoration:underline}

/* ---------- CTA в контенте: виден на любом экране ---------- */
.ctab{background:var(--c-primary);color:#fff;border-radius:var(--radius);
  padding:22px 20px;margin:30px 0 8px}
.ctab h2{color:#fff;margin:0 0 8px;font-size:1.25rem}
.ctab p{color:#CFE0EC;max-width:60ch;margin:0 0 16px}
.ctab .btn-cta{background:var(--c-cta);color:#fff}
.ctab .btn-cta:hover{background:var(--c-cta-dk)}
.ctab .ctab-note{font-size:.83rem;color:#9FB8CB;margin:14px 0 0;line-height:1.5;max-width:64ch}
@media(min-width:760px){.ctab{padding:26px 28px}.ctab h2{font-size:1.4rem}}

/* ---------- липкий CTA (мобильные) ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 16px;
  background:rgba(255,255,255,.97);border-top:1px solid var(--c-line);
  box-shadow:0 -2px 14px rgba(20,32,43,.1);display:none}
.sticky-cta .btn{width:100%}
@media(max-width:719px){.sticky-cta{display:block}body{padding-bottom:74px}
  /* На страницах без липкой кнопки резервировать под неё место незачем —
     иначе внизу остаётся пустая полоса в 74 px. */
  body.no-cta{padding-bottom:0}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:10px 14px;border-radius:8px}