/* ===== Мини-лендинги на поддоменах ===== */
/* Живут поверх основной дизайн-системы style.css: те же токены, шрифты и карточки офферов.
   Здесь только блоки, которых нет на основном сайте: интерактивные инструменты и текстовые секции. */

.sub-main { display: block; }

/* --- инструмент --- */
.tool {
  background: #fff;
  border: 1px solid #E3EAF5;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 18px 40px -28px rgba(11, 18, 32, .28);
}
.tool__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.tool__title { font: 700 19px/1.25 Unbounded, Inter, sans-serif; letter-spacing: -.01em; margin: 0; color: #0B1220; }
.tool__hint { font-size: 13.5px; color: #5B6782; }
.tool__grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .tool__grid--2 { grid-template-columns: 1fr 1fr; align-items: start; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field__label { font: 600 13px/1.4 Inter, sans-serif; color: #5B6782; letter-spacing: .01em; }
.field__val { font: 700 17px/1.2 Inter, sans-serif; color: #0B1220; font-variant-numeric: tabular-nums; }
.field input[type="range"] { width: 100%; accent-color: #2563EB; height: 22px; cursor: pointer; }
.field select, .field input[type="number"] {
  width: 100%; padding: 11px 12px; border: 1px solid #D9E2F0; border-radius: 10px;
  font: 500 15px/1.3 Inter, sans-serif; color: #0B1220; background: #fff;
}
.field select:focus-visible, .field input:focus-visible { outline: 2px solid #2563EB; outline-offset: 1px; }

.readout { display: grid; gap: 10px; background: #F3F6FB; border-radius: 14px; padding: 18px; }
.readout__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.readout__row dt { font-size: 14px; color: #5B6782; margin: 0; }
.readout__row dd { margin: 0; font: 700 17px/1.2 Inter, sans-serif; color: #0B1220; font-variant-numeric: tabular-nums; }
.readout__row--hero dd { font-size: 26px; font-family: Unbounded, Inter, sans-serif; color: #2563EB; }
.readout__note { font-size: 13px; line-height: 1.5; color: #5B6782; margin: 2px 0 0; }
.readout__note b { color: #0B1220; }

.verdict { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #F3F6FB; }
.verdict__icon { flex: none; width: 22px; height: 22px; color: #2563EB; }
.verdict__text { font-size: 14.5px; line-height: 1.55; color: #0B1220; margin: 0; }
.verdict--good { background: #E8F5F1; } .verdict--good .verdict__icon { color: #0A7A62; }
.verdict--warn { background: #FDF3E7; } .verdict--warn .verdict__icon { color: #A9650B; }

/* лестница лимитов */
.ladder { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ladder__step { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #F3F6FB; }
.ladder__n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #0B1F45; color: #fff; font: 700 13px/1 Inter, sans-serif; }
.ladder__label { font-size: 14.5px; color: #0B1220; }
.ladder__sum { font: 700 15px/1.2 Inter, sans-serif; color: #2563EB; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ladder__step--now { background: #EAF1FE; box-shadow: inset 0 0 0 1px #BFD4FB; }

/* --- текстовые секции --- */
.sub-text { display: flex; flex-direction: column; gap: 26px; }
.sub-block { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.sub-block__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #EAF1FE; color: #2563EB; }
.sub-block__icon svg { width: 22px; height: 22px; }
.sub-block__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sub-block h2 { font: 600 21px/1.3 Unbounded, Inter, sans-serif; letter-spacing: -.01em; margin: 0; color: #0B1220; text-wrap: balance; }
.sub-block p { margin: 0; font-size: 16px; line-height: 1.7; color: #2C3850; max-width: 68ch; }
@media (max-width: 560px) {
  .sub-block { grid-template-columns: 1fr; gap: 10px; }
  .sub-block__icon { width: 38px; height: 38px; }
}

.sub-note { border-left: 3px solid #2563EB; padding: 4px 0 4px 16px; font-size: 15px; line-height: 1.65; color: #2C3850; }

/* --- секции лендинга --- */
.sub-section { padding: 44px 0; }
.sub-section--tight { padding: 28px 0; }
.sub-section__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
/* Метрики один в один с .section-title на главной (style.css): начертание 700, тот же clamp
   и цвет по наследству. Семейство даёт глобальное правило h1,h2,h3 — задавать его тут не нужно. */
.sub-section__title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.sub-section__sub { font-size: 15.5px; line-height: 1.6; color: #5B6782; margin: 0; max-width: 70ch; }

/* Подвал .sub-foot убран: лендинги используют общий .footer с главной (логотип, реквизиты,
   cookie-строка, копирайт). Плашку «Проверено» на узких экранах прячет общее правило
   .topbar .pill--live в style.css — отдельное правило под .pill--updated больше не нужно. */

/* Герой на лендинге короче, чем на главной: там под заголовком стоит виджет подбора,
   здесь — сразу инструмент, поэтому нижний отступ главной оставляет пустое поле. */
.page--sub .hero { padding-bottom: 18px; }
.page--sub .hero--v2 .art-hero__in { padding-bottom: 26px; }
@media (min-width: 1024px) { .page--sub .hero { padding-bottom: 22px; } }

/* Бейдж-УТП у разных МФО занимает одну или две строки, из-за чего названия в соседних
   карточках стоят на разной высоте. Фиксируем высоту бейджа — сетка выравнивается. */
.page--sub .offer__usp { min-height: 44px; }
@media (max-width: 700px) { .page--sub .offer__usp { min-height: 28px; } }

/* Иконка в блоке-вердикте: span задаёт бокс, svg должен ему подчиняться. */
.verdict__icon svg { width: 22px; height: 22px; display: block; }
/* Страховка от повторения бага: ни один svg на лендинге не должен тянуться по контейнеру. */
.page--sub svg:not([width]) { width: 1.25em; height: 1.25em; }