@charset "UTF-8";

/* =============================================================================
   Лендинг mobicredit.ru — редизайн 2026 (задача tasks/0099, ROCI-93).

   Файл подключается в Views/Shared/Main/_Layout.cshtml ПОСЛЕ style.min.css
   и после инлайнового <style> с правилом .main{margin-top:-100px}.

   Правила изоляции (соблюдать при любых правках):
     1. Ни одного нового селектора без префикса l26-.
     2. Ни одной правки внутри style.min.css — только перебивки отсюда,
        каждая с комментарием, какую строку она перебивает и почему.
     3. Голые legacy-классы (.calc*, .range-group*, .button.get-money) НЕ трогать:
        те же классы стоят в Views/News/Index.cshtml и Views/News/Detail.cshtml.
        Перебивки идут только через хук .l26 на .lp-wrapper (специфичность 0,2,0).
     4. Заморожено: .onboarding*, data-step, .splide, .header__user*.
   ========================================================================== */

:root {
  --l26-accent: #00BFF0;
  --l26-accent-dark: #00A9DE;
  --l26-ink: #1B1B1B;
  --l26-muted: #97A9AD;
  --l26-white: #FFFFFF;
  --l26-pale: #F1FCFF;
  --l26-pale-2: #E5F9FF;
  --l26-radius: 20px;
  /* доля хода ползунка 0..1; ставится из landing-2026.js */
  --l26-ratio: 0.4444;
}

/* =============================================================================
   1. Первый экран
   ========================================================================== */

/* Перебивает style.min.css:6909 (.hero{padding:130px 0 0}).
   Секция-обёртка .hero сохранена намеренно: на ней живут размытые пятна фона
   (::before/::after) и overflow:hidden — из-за него всплывашка ПСК вынесена в body. */
/* Верхний отступ компенсирует отрицательный margin у <main>: до 992 действует
   main{margin-top:-80px} (style.min.css:113-115), с 992 — .main{margin-top:-100px}
   из инлайнового <style> лейаута. Без компенсации заголовок уезжает под шапку. */
.l26-hero {
  padding: 96px 0 36px;
}

@media (min-width: 768px) {
  .l26-hero {
    padding: 104px 0 56px;
  }
}

/* Нижний отступ по макету, иллюстрация прижата к нижнему краю секции
   (см. .l26-hero__figure). Верхний по макету был 228px (заголовок в 128px
   под шапкой, секция до 800px при ширине 1920); по просьбе заказчика
   (02.10.2026) содержимое — текст с калькулятором и иллюстрация — поднято
   на 60px: от шапки до заголовка 68px, секция на 60px ниже. */
@media (min-width: 992px) {
  .l26-hero {
    padding: 168px 0 52px;
  }
}

.l26-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
}

@media (min-width: 992px) {
  /* Колонка 560px, а не 448: заголовок «Нужная сумма под 0%» в 48px занимает
     около 505px и при узкой колонке ломается на две строки (в запасном шрифте
     ещё шире). Ширину самого калькулятора держит .l26-hero__calc — по макету 448px. */
  .l26-hero__grid {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    align-items: start;
  }

  .l26-hero__title {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .l26-hero__note {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  /* Иллюстрация по макету шире своей колонки и уходит лентой в нижний край
     секции: отрицательный нижний отступ (ниже, в блоке размеров иллюстрации)
     равен нижнему паддингу .l26-hero, а у .hero стоит overflow:hidden,
     поэтому лента обрезается ровно по краю. */
  .l26-hero__figure {
    grid-column: 2/3;
    grid-row: 1/4;
    align-self: end;
    justify-self: start;
  }

  .l26-hero__calc {
    grid-column: 1/2;
    grid-row: 3/4;
    max-width: 448px;
  }
}

/* Заголовок — всегда в одну строку, на любом языке и экране (просьба заказчика
   02.10.2026). Перенос запрещён, кегль — не больше прежнего (32 / 40 / 48px) и
   не больше, чем помещается: доступная ширина / --l26-title-k, где k — ширина
   фразы в одну строку на 1px кегля (замер: ru 10,91, tg 10,86 в Avenir Next
   Cyr / системном шрифте; ky 12,41, uz 12,59 — длиннее) плюс 6 % запаса на
   разницу системных шрифтов (Segoe UI, Roboto, San Francisco). Доступная
   ширина: до 992 — экран минус поля контейнера 2×20px, с 992 — колонка 560px.
   Высота строки прежняя — блок ниже не сдвигается. Если на устройстве шрифт
   всё же шире расчёта, landing-2026.js дожимает кегль до одной строки.
   При смене текста заголовка — перемерить k. */
.l26-hero__title {
  --l26-title-k: 11.6;
  /* элемент сетки: без min-width:0 строка без переносов раздвигает колонку
     (минимум по содержимому), и страховка в скрипте не видит переполнения */
  min-width: 0;
  max-width: 100%;
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 32px;
  font-size: min(32px, calc((100vw - 40px) / var(--l26-title-k)));
  line-height: 38px;
  text-align: center;
  white-space: nowrap;
}

html[lang="ky"] .l26-hero__title {
  --l26-title-k: 13.2;
}

html[lang="uz"] .l26-hero__title {
  --l26-title-k: 13.4;
}

@media (min-width: 768px) {
  .l26-hero__title {
    font-size: 40px;
    font-size: min(40px, calc((100vw - 40px) / var(--l26-title-k)));
    line-height: 48px;
  }
}

@media (min-width: 992px) {
  .l26-hero__title {
    margin-bottom: 12px;
    font-size: 48px;
    font-size: min(48px, calc(560px / var(--l26-title-k)));
    line-height: 58px;
    text-align: left;
  }
}

.l26-hero__note {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: var(--l26-muted);
}

@media (min-width: 992px) {
  .l26-hero__note {
    margin-bottom: 54px;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
  }
}

/* Триггер всплывашки ПСК — именно <button>, а не <a href="#">:
   ссылка-заглушка скроллит наверх, попадает в историю и врёт скринридеру. */
.l26-hero__note-trigger {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--l26-accent);
  text-decoration: underline;
  cursor: pointer;
}

.l26-hero__note-trigger:hover {
  color: var(--l26-accent-dark);
}

/* Иллюстрация — растр, вырезанный из макета вместе с фоном (650×530 при ширине
   макета 1920). Края растворяются маской, чтобы прямоугольник не читался на
   фоне с размытыми пятнами; на десктопе низ не растворяется — там лента
   уходит в край секции. Без поддержки маски край просто будет виден.
   На мобильном плашка калькулятора по макету наезжала на низ иллюстрации
   (margin-bottom: -28px); по просьбе заказчика (02.10.2026) подсказка
   «Потяните…» отодвинута от картинки — отступ 16px. */
.l26-hero__figure {
  width: 100%;
  max-width: 290px;
  margin: -14px auto 16px;
}

@media (min-width: 768px) {
  .l26-hero__figure {
    max-width: 420px;
  }
}

@media (min-width: 992px) {
  .l26-hero__figure {
    /* 650 из колонки 520 и смещение влево на 55 — как в макете */
    width: 125%;
    max-width: 650px;
    margin: 0 0 -52px -10.6%;
  }
}

/* Иллюстрация — экспорт из Figma с прозрачным фоном (03.10.2026; раньше —
   JPEG 650×530, вырезанный из PNG-макета вместе с фоном, 1:1 и мыльный на
   экранах высокой плотности, края растворялись маской). Коробка прежняя —
   650×530 в масштабе макета, чтобы вёрстка вокруг не сдвинулась; картинка
   542×484 стоит в ней там же, где была в вырезке: сдвиг 42 и 46px (замер по
   совпадению с макетом дал 47 — на 1px выше, чтобы лента кончалась ровно
   в нижнем крае коробки и не раздвигала её). Проценты margin
   считаются от ширины коробки. Маска не нужна — фон прозрачный. */
.l26-hero__figure {
  aspect-ratio: 650 / 530;
}

.l26-hero__figure img {
  display: block;
  width: 83.385%;
  height: auto;
  margin: 7.077% 0 0 6.462%;
}

/* До 992 иллюстрация не стоит на краю секции (под ней калькулятор), и лента
   обрывалась бы ровной линией — низ растворяем, как было у прежнего JPEG.
   С 992 лента уходит в нижний край первого экрана — маска не нужна. */
.l26-hero__figure img {
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, #000 90%, transparent);
}

@media (min-width: 992px) {
  .l26-hero__figure img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Иллюстрация с одним флагом — при выборе киргизского, таджикского или
   узбекского языка (класс ставит landing-i18n.js). Картинка 502×458 с прозрачным
   фоном отрисована в том же масштабе, что и общая 650×530: карта в обеих одного
   размера. Поэтому коробка остаётся прежней (aspect-ratio — чтобы страница не
   прыгала при смене языка), а картинка встаёт так, чтобы карта и лента оказались
   на тех же местах: 502/650 ширины, сдвиг 78px вправо и 72px вниз в масштабе
   макета. Маска не нужна — фон прозрачный. */
.l26-hero__figure_single {
  aspect-ratio: 650 / 530;
}

.l26-hero__figure_single img {
  width: 77.23%;
  margin: 11.08% 0 0 12%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* =============================================================================
   2. Калькулятор (два синхронизированных экземпляра: первый экран и шаг 4)
   ========================================================================== */

.l26-calc {
  position: relative;
  /* цвет незалитой части дорожки: у верхнего калькулятора фон секции голубой,
     поэтому дорожка белая; у нижнего фон карточки белый — дорожка бледно-голубая */
  --l26-track-bg: var(--l26-white);
  /* ширина бегунка: от неё считаются заливка, риска, выноска с хвостиком
     и нативный бегунок прозрачного <input type=range> */
  --l26-thumb: 24px;
}

@media (min-width: 992px) {
  .l26-calc {
    --l26-thumb: 28px;
  }
}

.l26-calc_on-white {
  --l26-track-bg: var(--l26-pale-2);
}

/* Выноска «Потяните для нужной суммы…» — по макету узкая плашка над бегунком,
   а не полоса на всю ширину. Плашка и хвостик едут за бегунком через ту же
   переменную --l26-ratio, что и заливка дорожки; clamp не даёт плашке выйти
   за края калькулятора у крайних значений.
   Размеры (ширина плашки, её высота, смещение хвостика от левого края плашки,
   высота хвостика) заданы переменными, чтобы мобильная версия меняла только их. */
.l26-hero__calc {
  --l26-hint-w: 233px;
  --l26-hint-h: 52px;
  --l26-hint-tail: 54px;
  --l26-hint-gap: 36px;
  /* высота строки «Выберите сумму» вместе с отступом до дорожки */
  --l26-head-h: 38px;
  /* место под плашку и хвостик: плашка лежит абсолютно над строкой «Выберите сумму»,
     хвостик заканчивается на верхнем крае дорожки */
  padding-top: calc(var(--l26-hint-h) + var(--l26-hint-gap) - var(--l26-head-h));
}

@media (min-width: 992px) {
  .l26-hero__calc {
    --l26-hint-w: 311px;
    --l26-hint-h: 64px;
    --l26-hint-tail: 72px;
    --l26-hint-gap: 45px;
    --l26-head-h: 40px;
  }
}

.l26-calc__hint {
  position: absolute;
  z-index: 2;
  top: 0;
  left: clamp(0px, calc(var(--l26-thumb) / 2 + (100% - var(--l26-thumb)) * var(--l26-ratio) - var(--l26-hint-tail)), calc(100% - var(--l26-hint-w)));
  box-sizing: border-box;
  width: var(--l26-hint-w);
  height: var(--l26-hint-h);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--l26-white);
  font-size: 13px;
  line-height: 18px;
  color: var(--l26-muted);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .l26-calc__hint {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 20px;
  }
}

/* хвостик — узкий клин от низа плашки к бегунку */
.l26-hero__calc::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--l26-hint-h) - 1px);
  left: calc(var(--l26-thumb) / 2 + (100% - var(--l26-thumb)) * var(--l26-ratio));
  width: 14px;
  height: calc(var(--l26-hint-gap) + 1px);
  margin-left: -7px;
  background: var(--l26-white);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.l26-calc__head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.l26-calc__label {
  font-size: 16px;
  line-height: 20px;
}

.l26-calc__value {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}

@media (min-width: 992px) {
  .l26-calc__value {
    font-size: 26px;
    line-height: 32px;
  }
}

/* Редактируется само крупное число. type="text" + inputmode="numeric", а не
   type="number": последний ломает разделитель разрядов, допускает e/+/- в Firefox
   и теряет введённое при невалидном значении. Знак рубля — отдельным элементом. */
.l26-calc__input {
  width: 7ch;
  max-width: 140px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}

.l26-calc__input::-webkit-outer-spin-button,
.l26-calc__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.l26-calc__limits {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 14px;
  line-height: 17px;
  color: var(--l26-muted);
}

.l26-calc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.l26-calc__total-label {
  font-size: 16px;
  line-height: 20px;
}

.l26-calc__total-values {
  display: inline-flex;
  align-items: baseline;
  gap: 24px;
  margin-left: auto;
}

@media (min-width: 992px) {
  .l26-calc__total-values {
    gap: 30px;
  }
}

/* По макету зачёркнутая и итоговая суммы одного кегля — такого же, как
   выбранная сумма в строке «Выберите сумму»; различаются цветом и начертанием. */
.l26-calc__total-old,
.l26-calc__total-new {
  font-size: 24px;
  line-height: 30px;
}

/* На узком экране при сумме 100 000 («200 800 ₽» и «100 000 ₽») строка в 24px
   не помещается в 335px и переносится — на телефонах уменьшаем кегль и зазор. */
@media (max-width: 400px) {
  .l26-calc__total-values {
    gap: 12px;
  }

  .l26-calc__total-old,
  .l26-calc__total-new {
    font-size: 22px;
  }
}

@media (max-width: 359.98px) {
  .l26-calc__total-old,
  .l26-calc__total-new {
    font-size: 18px;
  }
}

@media (min-width: 992px) {
  .l26-calc__total-old,
  .l26-calc__total-new {
    font-size: 26px;
    line-height: 32px;
  }

  /* нижний калькулятор на десктопе живёт в «телефоне» онбординга шириной 275px */
  .l26-calc_on-white .l26-calc__total-values {
    gap: 10px;
  }

  .l26-calc_on-white .l26-calc__total-old,
  .l26-calc_on-white .l26-calc__total-new {
    font-size: 17px;
    line-height: 24px;
  }
}

.l26-calc__total-old {
  font-weight: 500;
  color: var(--l26-muted);
}

.l26-calc__total-new {
  font-weight: 600;
}

.l26-calc__action {
  display: grid;
  margin-top: 20px;
}

/* только первый экран: нижний калькулятор стоит в «телефоне» онбординга
   с замороженной высотой, лишние 16px там не помещаются */
@media (min-width: 992px) {
  .l26-hero__calc .l26-calc__action {
    margin-top: 36px;
  }
}

/* Видимый дисклеймер с ПСК — решение владельца от 2026-09-02:
   на мобильном hover нет, одной всплывашки недостаточно. */
.l26-calc__disclaimer {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--l26-muted);
}

/* =============================================================================
   3. Ползунок суммы — оверлейная схема
   Нативный <input type=range> лежит поверх нарисованной дорожки с opacity:0.
   Причина: в WebKit нет ::-webkit-slider-progress, двухцветность там делается
   трюком «box-shadow справа от бегунка» (~900 теней, style.min.css:2777),
   который не масштабируется на блочную дорожку 46px; в Firefox
   ::-moz-range-progress заливает с противоположной стороны.
   Оверлей сохраняет клавиатуру, тач-драг, роль slider и клик по дорожке.
   ========================================================================== */

/* высота дорожки по макету: 36px на мобильном, 46px с 992 */
.l26-slider {
  position: relative;
  height: 36px;
}

@media (min-width: 992px) {
  .l26-slider {
    height: 46px;
  }
}

.l26-slider__track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  /* цвета инвертированы по просьбе заказчика (02.10.2026): незалитая часть
     дорожки — синяя, заливка до бегунка — цвет фона секции (--l26-track-bg) */
  background: var(--l26-accent);
  overflow: hidden;
}

/* Заливка — cyan СЛЕВА от бегунка, по образцу, выбранному заказчиком
   (02.10.2026; в макете было справа). Бегунок отдельным элементом не рисуем:
   это скруглённый правый конец заливки шириной --l26-thumb с риской внутри.
   На минимуме от заливки остаётся одна «таблетка» бегунка у левого края,
   на максимуме дорожка залита целиком. Бегунок за края дорожки не выходит —
   ход его центра совпадает с ходом нативного бегунка той же ширины. */
.l26-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--l26-thumb) + (100% - var(--l26-thumb)) * var(--l26-ratio));
  border-radius: 8px;
  background: var(--l26-track-bg);
}

/* риска в центре бегунка: половина высоты дорожки, скруглённая */
.l26-slider__notch {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: calc(var(--l26-thumb) / 2 + (100% - var(--l26-thumb)) * var(--l26-ratio));
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--l26-ink);
}

/* Перебивает 20 глобальных правил input[type=range] (style.min.css:2721-2864,
   специфичность 0,1,1). Селектор с классом даёт 0,2,1 — иначе базовые
   height:44px, overflow:hidden, display:flex и box-shadow-трюк остаются в силе. */
input[type=range].l26-slider__input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  overflow: visible;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* без этого драг по горизонтали конфликтует со скроллом страницы */
  touch-action: pan-y;
}

input[type=range].l26-slider__input::-webkit-slider-runnable-track {
  height: 100%;
  border: none;
  background: none;
  background-image: none;
}

input[type=range].l26-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--l26-thumb);
  height: 100%;
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
}

input[type=range].l26-slider__input::-moz-range-track {
  height: 100%;
  border: none;
  background: none;
  background-image: none;
}

input[type=range].l26-slider__input::-moz-range-progress {
  height: 0;
  background: none;
  background-image: none;
}

input[type=range].l26-slider__input::-moz-range-thumb {
  width: var(--l26-thumb);
  height: 100%;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Перетаскивание пальцем по всей дорожке (landing-2026.js, initSliderDrag).
   Класс ставит скрипт: тогда указатель ловит контейнер, а прозрачный input
   остаётся только для клавиатуры и скринридера. Без скрипта класса нет,
   и работает прежний нативный ползунок. pan-y — вертикальный свайп
   по дорожке по-прежнему прокручивает страницу. */
.l26-slider_drag {
  touch-action: pan-y;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.l26-slider_drag input[type=range].l26-slider__input {
  pointer-events: none;
}

/* фокус не виден на прозрачном инпуте — подсвечиваем нарисованную дорожку */
input[type=range].l26-slider__input:focus-visible ~ .l26-slider__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* =============================================================================
   4. Всплывашка ПСК
   Живёт прямым потомком <body>: у .hero стоит overflow:hidden, а .hero__grid
   с z-index:1 создаёт стекинг-контекст, из которого не подняться над .header
   (z-index:10). z-index:90 — выше шапки (10), ниже модалок (100).
   ========================================================================== */

.l26-popover {
  position: fixed;
  z-index: 90;
  width: calc(100vw - 32px);
  max-width: 360px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--l26-white);
  box-shadow: 0 10px 40px rgba(16, 146, 180, 0.22);
  font-size: 14px;
  line-height: 20px;
  color: var(--l26-ink);
}

.l26-popover[hidden] {
  display: none;
}

.l26-popover__arrow {
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-color: var(--l26-white);
}

.l26-popover_below .l26-popover__arrow {
  top: auto;
  bottom: 100%;
  border-bottom: 8px solid var(--l26-white);
  border-top: 0;
}

/* =============================================================================
   5. Блок «Что нужно для оформления»
   ========================================================================== */

.l26-req {
  padding: 30px 0 36px;
  background: var(--l26-pale-2);
}

@media (min-width: 992px) {
  .l26-req {
    padding: 10px 0 60px;
    background: var(--l26-white);
  }
}

.l26-req__head {
  text-align: center;
}

@media (min-width: 992px) {
  .l26-req__head {
    text-align: left;
  }
}

.l26-req__title {
  margin: 0 0 24px;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
}

@media (min-width: 992px) {
  .l26-req__title {
    margin-bottom: 26px;
    font-size: 34px;
    line-height: 40px;
  }
}

.l26-req__grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 992px) {
  .l26-req__grid {
    grid-template-columns: minmax(0, 512px) minmax(0, 560px);
    justify-content: space-between;
    gap: 30px;
    align-items: start;
  }
}

/* Большая карточка. На десктопе по макету: бледный круг диаметром 512px,
   срезанный снизу по линии малых карточек (видно 420px), внутри белая карточка
   со скруглённым верхом — тот же приём, что у .side-content__illustration-phone. */
.l26-req__figure {
  display: block;
}

@media (min-width: 992px) {
  .l26-req__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 512px;
    max-width: 100%;
    height: 420px;
    margin: 0;
    background: radial-gradient(circle 256px at 50% 256px, var(--l26-pale) 99.6%, transparent 100%);
    overflow: hidden;
  }
}

/* Иконка обтекается текстом (float), а не стоит отдельной колонкой:
   в макете первая строка заголовка короткая и иконка встаёт рядом с ней,
   а следующие строки идут под иконкой во всю ширину карточки. */
.l26-req__card {
  display: block;
  padding: 22px;
  border-radius: var(--l26-radius);
  background: var(--l26-white);
}

.l26-req__card .l26-req__item-icon {
  float: right;
  align-self: auto;
  margin: 0 0 8px 14px;
  padding: 0;
}

/* До 992 по мобильному макету иконка стоит справа внизу, напротив третьей
   и четвёртой строк, а первые две строки идут во всю ширину. Приём «float
   к низу»: невидимая распорка высотой в две строки плавает справа первой,
   иконка встаёт под неё (clear:right). */
@media (max-width: 991.98px) {
  /* flow-root: карточка вмещает плавающую иконку, когда текст короче распорки
     (на планшете заголовок укладывается в две строки) */
  .l26-req__card {
    display: flow-root;
  }

  .l26-req__card::before {
    content: "";
    float: right;
    width: 0;
    height: 58px;
  }

  .l26-req__card .l26-req__item-icon {
    clear: right;
    margin: 0 0 0 12px;
  }
}

@media (min-width: 992px) {
  .l26-req__card .l26-req__item-icon {
    margin: -1px 24px 8px 14px;
  }
}

/* Оформление карточки на десктопе перенесено с .side-content__illustration-phone
   (style.min.css:7274-7290): лёгкое свечение по бокам и бледная рамка. */
@media (min-width: 992px) {
  .l26-req__card {
    box-sizing: border-box;
    width: 350px;
    max-width: 100%;
    height: calc(100% - 97px);
    /* справа без отступа: по макету «или Кыргызстана» в 36px занимает почти
       всю ширину карточки; от края отступает только иконка */
    padding: 20px 0 0 26px;
    border: 4px solid #F3FDFF;
    border-bottom: 0;
    border-radius: 40px 40px 0 0;
    background: linear-gradient(89.22deg, rgba(217, 248, 255, 0.5) -1.38%, #fff 5.04%, #fff 52.67%, #fff 95.63%, rgba(217, 248, 255, 0.5) 101.73%), #fff;
    box-shadow: 0 0 50px rgba(16, 146, 180, 0.05);
  }
}

.l26-req__card-title {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
}

@media (min-width: 992px) {
  .l26-req__card-title {
    font-size: 36px;
    line-height: 40px;
  }
}

.l26-req__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 768px) {
  .l26-req__cards {
    gap: 20px;
  }
}

.l26-req__item {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 16px 12px 14px;
  border-radius: 16px;
  background: var(--l26-white);
}

@media (min-width: 992px) {
  .l26-req__item {
    min-height: 195px;
    padding: 22px 20px 20px;
    border-radius: var(--l26-radius);
    background: var(--l26-pale);
  }
}

.l26-req__item-title {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
}

@media (min-width: 992px) {
  .l26-req__item-title {
    font-size: 19px;
    line-height: 28px;
  }
}

.l26-req__item-icon {
  margin-top: auto;
  align-self: flex-end;
  padding-top: 12px;
}

.l26-req__icon {
  display: block;
}

/* =============================================================================
   6. Кредитный индекс
   Кольцо постоянной ширины, 5 равных секторов по 36°, нарисовано одной
   окружностью со stroke-dasharray (было пять фигур с масками, ~4 КБ).
   Цвета статические по сегменту, а не «заливка до текущего» — как в макете.
   ========================================================================== */

.l26-rating {
  text-align: center;
}

.l26-rating__title {
  margin-bottom: 3px;
  font-size: 14px;
  line-height: 17px;
}

.l26-rating__subtitle {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
}

.l26-rating__gauge {
  position: relative;
  width: 100%;
  max-width: 275px;
  margin: 0 auto;
  /* совпадает с viewBox кольца (0 0 280 141), иначе SVG вылезет за обёртку */
  aspect-ratio: 280/141;
}

.l26-rating__gauge svg {
  display: block;
  width: 100%;
  height: auto;
}

.l26-rating__seg {
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.l26-rating__seg:hover {
  opacity: 0.8;
}

/* Стрелка: круг с треугольником на 12 часах, поворот ставит её в центр сектора.
   Углы −72/−36/0/+36/+72 — центры пяти секторов по 36°.
   Размеры в процентах, чтобы виджет пережил ширину меньше 275px. */
.l26-rating__arrow {
  position: absolute;
  left: 0;
  right: 0;
  /* центр кольца в viewBox — (140, 140) при высоте 141; внутренний радиус
     кольца 94 единицы = 92,3 px при ширине 275, минус высота треугольника 18
     даёт радиус круга 74,3 px → 54 % ширины и верхняя грань на 45,6 % высоты */
  top: 45.6%;
  width: 54%;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  transition: transform 0.2s ease;
  /* Круг стрелки невидим, но его нижняя половина лежит поверх подписи и ползунка
     «Закрытые займы»: без этого он перехватывал нажатие мыши, и бегунок нельзя
     было тянуть — срабатывал только клик по краям дорожки, вне круга. */
  pointer-events: none;
}

.l26-rating__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  width: 0;
  height: 0;
  margin: auto;
  border: 7px solid transparent;
  border-top: 0;
  border-bottom: 18px solid var(--l26-ink);
}

.l26-rating[data-loans="1"] .l26-rating__arrow {
  transform: rotate(-72deg);
}

.l26-rating[data-loans="2"] .l26-rating__arrow {
  transform: rotate(-36deg);
}

/* явное правило: раньше «3» работало по умолчанию (без transform),
   при переносе в отдельный файл это стало бы неявной зависимостью */
.l26-rating[data-loans="3"] .l26-rating__arrow {
  transform: rotate(0deg);
}

.l26-rating[data-loans="4"] .l26-rating__arrow {
  transform: rotate(36deg);
}

.l26-rating[data-loans="5"] .l26-rating__arrow {
  transform: rotate(72deg);
}

.l26-rating__limit-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  margin: auto;
  font-size: 14px;
  line-height: 17px;
}

.l26-rating__limit {
  position: absolute;
  left: 0;
  right: 0;
  top: 76%;
  margin: auto;
  font-size: 24px;
  line-height: 29px;
}

.l26-rating__limit b {
  font-weight: 600;
}

.l26-rating__input {
  width: 100%;
  max-width: 275px;
  margin: 20px auto 0;
}

.l26-rating__input-label {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 17px;
}

/* Ползунок 1..5 намеренно без единой строки нового CSS:
   базовый глобальный стиль input[type=range] (тонкий трек, круглый knob 22px,
   заливка слева) уже точно соответствует макету. */

.l26-rating__steps {
  display: flex;
  justify-content: space-between;
  margin: 6px -5px 0;
  font-size: 14px;
  line-height: 17px;
  color: var(--l26-muted);
}

/* =============================================================================
   7. Точечные перебивки legacy-блоков (только через хук .l26)
   ========================================================================== */

/* Перебивает style.min.css:6538-6546 (.advantages{padding:40px 0 0}, с 992 —
   padding-bottom:40px). По макету иконки преимуществ стоят сразу под первым
   экраном (было 10px), но под калькулятором появился дисклеймер, которого в
   макете нет, и блок прижимался к первому экрану. По просьбе заказчика
   (02.10.2026) отступы сверху и снизу блока увеличены и сделаны одинаковыми:
   - до 992 первый экран и блок на одном фоне, границы между ними не видно —
     глаз меряет от дисклеймера под калькулятором до карточки. По рисунку
     заказчика в ROCI-93 (03.10.2026: «сверху сократить как нижний») отступы
     симметричны относительно карточки, по 56px: сверху — нижний отступ
     .l26-hero (36px, с 768 — 56px) плюс отступ блока (20px / 0); снизу — от
     карточки до голубого блока «Что нужно»: 10px до точек карусели, сами
     точки 16px и 30px отступа блока;
   - с 992 граница первого экрана видна (фон сменяется белым), следующий блок
     белый, видимая граница — плашка «Просто» с 10px собственного отступа
     .l26-req: 80px от первого экрана до иконок и 70 + 10 = 80px от подписей
     до плашки. */
.l26 .advantages {
  padding-top: 20px;
  padding-bottom: 30px;
}

/* Карточки карусели — одной высоты (по самой высокой: на узком экране у части
   подписей две строки). Без этого точки карусели стоят под самым высоким
   слайдом, и под низкой карточкой отступ до точек больше — на 320px снизу
   выходило 80px вместо 56. Только в режиме карусели (Splide монтируется
   скриптом ниже 922px): в сетке с 922 растянутые карточки центрируют
   содержимое по вертикали, и иконки разъезжаются по высоте. */
@media (max-width: 921.98px) {
  .l26 .advantages .splide__slide .advantages__item {
    height: 100%;
  }
}

@media (min-width: 768px) {
  .l26 .advantages {
    padding-top: 0;
  }
}

@media (min-width: 992px) {
  .l26 .advantages {
    padding-top: 80px;
    padding-bottom: 70px;
  }
}

/* Перебивают style.min.css:7131-7135 (.side-content{padding:30px 0}): по макету
   после кредитного индекса пауза больше (иллюстрации секций стоят через 642px),
   а блок «+20 000 ₽» почти сразу переходит в «Как получить деньги?». */
@media (min-width: 992px) {
  .l26 .side-content_rating {
    padding-bottom: 100px;
  }

  .l26 .side-content_gosuslugi {
    padding-bottom: 11px;
  }
}

/* Перебивает нижний паддинг .lp-wrapper (80px) из style.min.css: по макету
   от плиток способов погашения до логотипа футера 45px, из них 40 даёт футер. */
@media (min-width: 992px) {
  .lp-wrapper.l26 {
    padding-bottom: 5px;
  }
}

/* В плитке Visa/MasterCard по макету два логотипа — базовый .pay-methods__item-img
   (style.min.css:8229) их разведения не предусматривает. */
.l26 .pay-methods__item-img {
  gap: 14px;
}

/* Перебивает style.min.css:7554 (.side-content_gosuslugi .side-content__grid,
   специфичность 0,2,0): по макету карточка «+20 000 ₽» слева, текст справа.
   Дочерние правила .side-content__grid_reverse .side-content__illustration
   уже дают нужные grid-column, переопределить нужно только раскладку колонок. */
@media (min-width: 992px) {
  .l26 .side-content_gosuslugi .side-content__grid_reverse {
    grid-template-columns: minmax(0, 512px) minmax(0, 375px);
  }
}

/* Зона 922–991 сломана на проде: Splide уничтожается по innerWidth < 922
   (число живёт только в JS, брейкпоинта 922 в CSS нет), а раскладка карточек
   переключается на 992 — пять карточек по 100% в ряд, и .splide__track{overflow:hidden}
   режет четыре. Подтягиваем сеточный вид карусели с 992 на 922.
   Единственное место, где 922 уместен. */
@media (min-width: 922px) and (max-width: 991.98px) {
  .advantages .splide__list {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .advantages .splide__slide {
    flex: 1 1 0;
    min-width: 0;
  }

  .advantages .splide__slide .advantages__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    gap: 0;
  }

  .advantages .advantages__item-icon {
    margin-bottom: 20px;
  }

  .advantages .advantages__item-title {
    text-align: center;
  }
}

/* Иконка «Переводим сразу на карту» по макету шире остальных: карта и знак СБП
   рядом, 48×32. Перебивает style.min.css:6627 (.advantages__item-icon svg
   {width:32px;height:32px}, специфичность 0,1,1). */
.advantages .advantages__item-icon svg.l26-adv__icon_wide {
  width: 48px;
  height: 32px;
}

/* =============================================================================
   8. Шапка: открепление и переключатель языка (с 02.10.2026 — рабочий,
   список языков и поведение — wwwroot/js/main/landing-i18n.js)
   ========================================================================== */

/* Шапка не закреплена: уезжает вместе со страницей (решение заказчика 02.10.2026).
   Перебивает style.min.css:1615 (.header{position:sticky}). relative, а не static:
   шапка должна остаться в потоке на том же месте и сохранить z-index:10 — на неё
   снизу наезжает <main> с отрицательным margin-top, и без z-index первый экран
   перекрыл бы логотип и кнопку кабинета. Голый .header допустим: класс есть только
   в Main-лейауте, а этот файл подключается только им. */
.header {
  position: relative;
}

/* Бандл вешает .header_scroled уже при scrollY > 0 (style.min.css:1641 — фон и
   тень закреплённой шапки). У незакреплённой шапки это дало бы плашку с тенью,
   которая появляется на первом же пикселе прокрутки и уезжает вверх. */
.header.header_scroled {
  background: transparent;
  box-shadow: none;
}

.l26-header__side {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 992px) {
  .l26-header__side {
    gap: 16px;
  }
}

/* порядок в шапке разный: мобильный «флаг RU, затем иконка ЛК»,
   десктоп «пилюля ЛК, затем флаг RU» */
.l26-header__side .l26-lang {
  order: 1;
}

.l26-header__side .personal-link,
.l26-header__side .header__user {
  order: 2;
}

@media (min-width: 992px) {
  .l26-header__side .l26-lang {
    order: 2;
  }

  .l26-header__side .personal-link,
  .l26-header__side .header__user {
    order: 1;
  }
}

/* Переключатель языка (задача tasks/0136). До инициализации скрипта элемента
   в шапке нет: класс _ready ставит landing-i18n.js. Мёртвой кнопки, которая
   ничего не делает, в шапке быть не должно. */
.l26-lang {
  position: relative;
  display: none;
}

.l26-lang_ready {
  display: block;
}

.l26-lang__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: var(--l26-ink);
  -webkit-user-select: none;
  user-select: none;
}

.l26-lang__button:focus-visible {
  outline: 2px solid var(--color-focus, #FFC147);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Флаг в шапке по макету: на мобильном круг 26px, на десктопе скруглённый
   квадрат 30px, с белой обводкой. Прямоугольный символ из спрайта обрезается
   по центру (preserveAspectRatio="xMidYMid slice" на <svg>). */
.l26-lang__flag {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--l26-white), 0 2px 6px rgba(0, 0, 0, 0.18);
}

@media (min-width: 992px) {
  .l26-lang__flag {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
}

.l26-lang__flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.l26-lang__code {
  display: block;
}

.l26-lang__chevron {
  display: block;
  width: 12px;
  height: 8px;
}

.l26-lang__chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =============================================================================
   9. Футер
   Левая колонка: логотип → телефон → email → © и реквизиты.
   Правая: финомбудсмен → СРО → место нахождения → две колонки ссылок.
   ========================================================================== */

/* Перебивает style.min.css:8855 (.footer__logo{display:none}):
   по мобильному макету логотип в футере есть. */
.l26-footer__grid .footer__logo {
  display: block;
  justify-self: center;
}

/* Перебивает style.min.css:8919 (.footer__links{grid-row:1/2}):
   на мобильном телефон и почта идут под логотипом, а не первой строкой. */
.l26-footer__grid .footer__links {
  grid-row: auto;
}

/* Почта — по левому краю, как реквизиты и тексты под ней (просьба заказчика
   03.10.2026). Перебивает style.min.css:8918-8952: .footer__links
   {align-items:center}, с 992 — {align-items:flex-end; text-align:right},
   у .footer__links-item text-align center / right. Специфичность 0,2,0 —
   правило действует и на телефоне, и на десктопе. */
.l26-footer__grid .footer__links {
  align-items: flex-start;
  text-align: left;
}

.l26-footer__grid .footer__links-item {
  text-align: left;
}

/* По мобильному макету реквизиты и тексты про финомбудсмена и СРО выровнены
   по левому краю; по центру остаются логотип, контакты и ссылки внизу. */
.l26-footer__legal {
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1rem;
  text-align: left;
}

.l26-footer__grid .footer__terms p {
  text-align: left;
}

/* Перебивает style.min.css:8876 (.footer__grid{border-top:1px solid}):
   в макете линии над футером нет. */
.l26-footer__grid {
  border-top: 0;
}

.l26-footer__legal p {
  margin-bottom: 16px;
}

.l26-footer__legal a {
  color: var(--l26-accent);
  text-decoration: none;
}

.l26-footer__legal a:hover {
  text-decoration: underline;
}

@media (min-width: 992px) {
  /* Перебивает style.min.css:8873 (три колонки 218/542/1fr) */
  .l26-footer__grid {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 18px 40px;
  }

  .l26-footer__grid .footer__logo {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: start;
  }

  .l26-footer__grid .footer__links {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .l26-footer__grid .l26-footer__legal {
    grid-column: 1/2;
    grid-row: 3/4;
    font-size: 0.8125rem;
    line-height: 1.0625rem;
    text-align: left;
  }

  .l26-footer__grid .footer__terms {
    grid-column: 2/3;
    grid-row: 1/4;
  }
}

/* =============================================================================
   10. Доступность
   В style.min.css нет ни одного prefers-reduced-motion и семь outline:none.
   ========================================================================== */

.l26-hero__note-trigger:focus-visible,
.l26-calc__input:focus-visible,
.l26-rating__seg:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .l26-rating__arrow,
  .l26-rating__seg,
  .l26-hero__note-trigger {
    transition: none;
  }
}

/* =============================================================================
   11. Выпадающий список языков (задача tasks/0136)
   ========================================================================== */

.l26-lang__button[aria-expanded="true"] .l26-lang__chevron {
  transform: rotate(180deg);
}

.l26-lang__chevron {
  transition: transform 0.2s;
}

.l26-lang__list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;          /* выше содержимого шапки (10), ниже модалок (100) */
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 42, 51, 0.16);
}

.l26-lang__list[hidden] {
  display: none;
}

.l26-lang__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.l26-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  color: var(--l26-ink);
  text-align: left;
}

.l26-lang__option:hover {
  background: #F4FAFC;
}

.l26-lang__option:focus-visible {
  outline: 2px solid var(--color-focus, #FFC147);
  outline-offset: -2px;
}

.l26-lang__item_active .l26-lang__option {
  font-weight: 600;
  background: #EAF7FB;
}

.l26-lang__flag_small {
  flex: 0 0 auto;
  width: 24px;
  height: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .l26-lang__chevron {
    transition: none;
  }
}

/* =============================================================================
   12. Шрифт для языков, которых нет в Avenir Next Cyr (задача tasks/0136)

   Замер покрытия глифов на живой странице: в подключённом Avenir Next Cyr
   ОТСУТСТВУЮТ ӣ ӯ ҳ ҷ қ ғ (таджикский), ң ө ү (киргизский) и ʻ (U+02BB,
   узбекская буква в «oʻ», «gʻ»). Браузер подставляет их из системного шрифта
   молча, и внутри одного слова оказываются два начертания: «Тоҷикӣ» — часть
   букв из Avenir, часть из подстановки. Поэтому для трёх языков весь текст
   переводим на один системный стек.

   !important здесь вынужденный: style.min.css (290 КБ) задаёт font-family
   примерно в сотне правил, перебить их поштучно новым файлом нельзя.
   Условие снятия: подключить веб-шрифт с расширенной кириллицей
   (Noto Sans, Inter) — тогда весь блок удаляется целиком.
   ========================================================================== */

html[lang="uz"] body,
html[lang="tg"] body,
html[lang="ky"] body,
html[lang="uz"] body *,
html[lang="tg"] body *,
html[lang="ky"] body * {
  font-family: "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif !important;
}