/* ============================================================
   VKUS-LENDING — публичные страницы: вход и «Как это работает».

   Облик 08.09.2026, второй заход. Ориентир — gumloop.com (снят замером:
   design-system/donors/gumloop.com/2026-09-08/), образ собран моделью
   muse-spark 1.2 и разобран на приёмы: output/radar-vhod-final/index.html.
   Взяты система и приёмы, не бренд: ни шрифтов, ни разметки, ни картинок
   донора здесь нет.

   Что изменилось против первой редакции (донор serro.ai):
   публичные страницы стали СВЕТЛЫМИ. Рабочая часть — панель, заявки,
   карточки — остаётся угольной по vkus.css: её облик приняли и выкатили,
   пилот идёт, и переодевать её заодно значило бы менять то, о чём не просили.
   Граница проходит по классу `vh` на теле страницы.

   Три приёма, ради которых всё переписано:
     1. Форма входа стоит на первом экране — свой человек входит сразу.
     2. Служебная полоса над шапкой: доступ, лимит, срок — одной строкой.
     3. Контраст кеглей: заголовок крупно, служебное 10–12 px, средних мало.
        Средний диапазон и делал страницу вялой.
   ============================================================ */

/* ---------- Что добавляет класс `vh` ----------
   Палитры здесь нет: с 08.09.2026 светлый облик у всего сайта, и живёт он
   одним источником — `vkus.css`. Два места, задающие цвет, разошлись бы молча,
   и правка одного выглядела бы применённой.

   Класс остался ради двух вещей, которых нет в рабочей части: приглушённой
   половины крупного заголовка и подсветки в служебной полосе. */
.vh{
  /* Норма контраста для крупного текста — 3, а не 4.5, и приглушение здесь
     должно читаться именно как приглушение: рабочий `--nv-text-dim` для этой
     роли слишком тёмен. */
  --vh-dim-krupno:#86868F;
  --vh-svet:#C2E7FF;
}

/* ---------- Служебная полоса ----------
   Над шапкой, набрана мельче всего на странице. Отвечает на вопрос «что это
   вообще такое» раньше, чем человек дочитает заголовок. */
.vh-rels{
  background:var(--nv-text);
  color:var(--nv-bg);
  font-size:12px;
  line-height:1.45;
  letter-spacing:.01em;
  padding:9px 16px;
  text-align:center;
}
.vh-rels i{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--vh-svet); margin:0 10px; vertical-align:middle;
}
.vh-rels b{ font-weight:600; }
.vh-rels em{ font-style:normal; color:var(--vh-svet); }

/* ---------- Полоса контента ----------
   Секции публичных страниц задают полосу сами: смена поверхности иначе
   обрывается по краям `.wrap`. */
.vk-sektsiya{
  width:100%; max-width:1160px; margin:0 auto;
  padding:clamp(48px,7vh,96px) clamp(16px,3vw,24px);
  box-sizing:border-box;
}

/* ---------- Первый экран: только дверь ----------
   Рядом с формой больше ничего нет — публичная страница не рассказывает о продукте
   (решение человека 08.09.2026). Двухколоночная раскладка «заявление слева, форма
   справа» снята вместе с заявлением: без левой колонки она оставляла пустую половину.
   Смещать ось теперь нечем и незачем — когда на экране один предмет, центр честнее
   искусственного сдвига. */
.vhod-pervyy-ekran{ border-bottom:1px solid var(--nv-border); }
.vhod-tolko-forma{
  width:100%; max-width:420px; margin:0 auto;
  padding:clamp(48px,12vh,140px) clamp(16px,3vw,24px) clamp(56px,14vh,160px);
  box-sizing:border-box;
}
/* Липкость форме здесь не нужна: прокручивать нечего. */
.vhod-tolko-forma .vk-forma{ position:static; }

/* Заголовок: одна гарнитура, вес 500–600, плотный набор. Приём донора —
   первая половина строки приглушена, вторая полного контраста: смысловой
   акцент цветом внутри строки, без второго шрифта. */
.vk-krupno{
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.04;
  letter-spacing:-.022em;
  font-weight:600;
  margin:0;
  max-width:18ch;
  text-wrap:balance;
}
.vk-krupno .vh-tiho{ color:var(--vh-dim-krupno); font-weight:500; }
.vk-srednee{
  margin:0;
  font-size:clamp(24px,3vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:600;
}
.vk-srednee .vh-tiho{ color:var(--vh-dim-krupno); font-weight:500; }

/* Служебная метка — тем же гротеском, что и всё. Моноширинная третья
   гарнитура прошлой редакции снята: у образа одна гарнитура на страницу,
   и различие держится кеглем и разрядкой, а не сменой шрифта. */
.vk-metka{
  font-family:inherit;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--nv-text-dim);
}
.vk-lid{
  max-width:52ch;
  margin:18px 0 0;
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.55;
  color:var(--nv-text-muted);
}

/* Перечень того, что внутри карточки: строки с ведущей меткой, не три
   карточки с иконками. */
.vk-stroki{ list-style:none; margin:clamp(22px,3vw,34px) 0 0; padding:0; max-width:62ch; }
.vk-stroki li{
  display:grid; grid-template-columns:2.4em 1fr; gap:0 16px;
  padding:14px 0; border-top:1px solid var(--nv-border);
}
.vk-stroki li:last-child{ border-bottom:1px solid var(--nv-border); }
.vk-stroki b{ display:block; font-weight:600; font-size:15px; }
.vk-stroki span{ display:block; margin-top:2px; color:var(--nv-text-muted); font-size:14px; }

/* ---------- Дверь ----------
   Карта на плите, поля в столбик, подпись под кнопкой снимает вопрос «что
   будет после нажатия». Липнет к верху: возвращаться наверх за входом не надо. */
.vk-forma{
  position:sticky; top:20px;
  padding:clamp(20px,2.2vw,26px);
  border:1px solid var(--nv-border);
  border-radius:var(--nv-r);
  background:var(--nv-surface-2);
}
@media (max-width:900px){ .vk-forma{ position:static; } }
.vk-forma h2{ margin:0 0 2px; font-size:22px; font-weight:600; letter-spacing:-.012em; }
.vk-forma .vk-metka{ display:block; margin-bottom:16px; }
.vk-pole{ display:block; margin-bottom:13px; }
.vk-pole span{
  display:block; margin-bottom:6px;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:500; color:var(--nv-text-dim);
}
.vk-forma .nv-btn{ width:100%; }
.vk-podpis{
  margin:14px 0 0; padding-top:13px;
  border-top:1px solid var(--nv-border);
  font-size:13px; line-height:1.55; color:var(--nv-text-muted);
}

/* ---------- Образец карточки ----------
   Показан документом: человек видит то, что получит, в том виде, в каком
   получит. Браузерной рамки со «светофором» здесь нет намеренно — нарисованный
   фальшивый интерфейс есть отдельный пункт нашего же списка запретов, и в
   исходном образе он был. */
.vk-shapka-sektsii{ max-width:56ch; margin-bottom:clamp(24px,3.4vw,38px); }
.vk-shapka-sektsii .vk-metka{ display:block; margin-bottom:10px; }
.vk-podpis-sektsii{ margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--nv-text-muted); }

.vk-obrazets{
  border:1px solid var(--nv-border);
  border-radius:16px;
  background:var(--nv-surface);
  padding:clamp(20px,2.6vw,32px);
  display:grid; gap:clamp(18px,2.2vw,26px);
}
.vk-obrazets__verh h3{
  margin:8px 0 6px; font-size:clamp(20px,2.2vw,26px);
  font-weight:600; letter-spacing:-.018em;
}
.vk-obrazets__verh p{ margin:0; max-width:58ch; color:var(--nv-text-muted); line-height:1.55; }
.vk-obrazets__cifry .vk-metka{ display:block; margin-bottom:10px; }

/* Стоп-сигнал — единственное место со вторым цветом. Он статусный: им помечено
   то, чего нельзя говорить, а не то, что надо разглядеть красивым. */
.vk-stop{
  border:1px solid var(--nv-border);
  border-left:3px solid var(--nv-warning);
  border-radius:var(--nv-r-sm);
  background:var(--nv-bg-deep);
  padding:15px 17px;
}
/* Метка на плите темнее, чем на бумаге: тот же `--nv-text-dim` даёт здесь 4.34
   при норме 4.5 — фон под ней на ступень плотнее. Поймано приёмкой. */
.vk-stop .vk-metka{ color:var(--nv-text-muted); }
.vk-stop p{ margin:6px 0 0; max-width:58ch; line-height:1.55; }

/* Три числа — ячейками в ряд, а не строками списка: их читают взглядом, а не
   перечнем, и рядом стоящие величины сравнивают. Разметка осталась
   определением (`dl`) — она верна по смыслу, меняется только подача. */
.vk-kv{
  margin:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
}
.vk-kv > div{
  display:block; padding:14px 16px;
  border:1px solid var(--nv-border); border-radius:var(--nv-r-sm);
  background:var(--nv-bg-deep);
}
.vk-kv dt{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; color:var(--nv-text-dim); line-height:1.3;
}
.vk-kv dd{ margin:6px 0 0; font-size:clamp(19px,2vw,24px); font-weight:600; letter-spacing:-.02em; }

/* Низ образца: сумма цифрой, вопрос речью. Разной природы — значит и набраны
   по-разному. */
.vk-obrazets__niz{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(16px,2.2vw,28px);
  padding-top:clamp(16px,2vw,20px);
  border-top:1px solid var(--nv-border);
}
.vk-obrazets__niz .vk-metka{ display:block; margin-bottom:8px; }
.vk-summa{ margin:0; font-size:clamp(26px,3.2vw,36px); line-height:1;
           letter-spacing:-.03em; font-weight:600; }
.vk-vopros{
  margin:0; padding-left:14px;
  border-left:2px solid var(--nv-accent);
  font-size:clamp(15px,1.4vw,17px); line-height:1.5;
}

/* ---------- Шаги ----------
   Лентой со статусом справа: путь заявки читается как события, а не как
   инструкция. Номер приглушён и мельче — он метка, а не украшение. */
.vk-shagi{ list-style:none; margin:0; padding:0; max-width:72ch; }
.vk-shagi li{
  display:grid; grid-template-columns:minmax(40px,56px) 1fr;
  gap:clamp(14px,2.4vw,28px);
  padding:clamp(16px,2vw,22px) 0;
  border-top:1px solid var(--nv-border);
}
.vk-shagi li:last-child{ border-bottom:1px solid var(--nv-border); }
.vk-nomer{
  font-size:11px; letter-spacing:.07em; font-weight:600;
  color:var(--nv-text-dim); padding-top:.35em;
}
.vk-shagi b{ display:block; font-size:clamp(16px,1.6vw,18px); font-weight:600; }
/* Ширину не сужаем: находка приёмки «77 знаков» здесь ложная — детектор
   склеивает номер шага с заголовком и меряет их как одну строку. Проверено
   08.09.2026 глазами на живой странице. */
.vk-shagi p{ margin:4px 0 0; color:var(--nv-text-muted); line-height:1.55; max-width:60ch; }

/* ---------- Честные рамки ----------
   Ячейками в ряд с номером и меткой сверху. Ограничение, поданное как факт,
   читается как честность; поданное как предупреждение — как отговорка. */
.vk-ramki{ margin-top:clamp(30px,4vw,52px); }
.vk-ramki .vk-metka{ display:block; margin-bottom:14px; }
.vk-ramki ul{
  list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.vk-ramki li{
  padding:16px 18px; line-height:1.55; color:var(--nv-text-muted);
  border:1px solid var(--nv-border); border-radius:var(--nv-r);
  background:var(--nv-surface);
}
.vk-ramki b{ color:var(--nv-text); font-weight:600; }

/* Страница «Как это работает» начинается тем же заявлением, что и вход, но
   без формы — колонка одна. */
.spravka-verh .vk-krupno{ max-width:20ch; }

/* Вертикальные направляющие прошлой редакции сняты: у светлой страницы ритм
   держат смена поверхности и линии между блоками, а фоновая сетка поверх
   плотного интерфейса читается рябью. Класс оставлен пустым намеренно —
   он стоит в разметке двух шаблонов, и его удаление оттуда стоило бы правки
   в трёх файлах ради нулевого выигрыша. */
.vk-linii{ position:relative; }