/* ==================== RESET & VARIABLES ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --orange:        #706BFF;
  --orange-dark:   #5B4FE0;
  --orange-light:  #F1EEFF;
  --orange-mid:    #E5DFFF;
  --orange-grad:   linear-gradient(135deg, #706BFF 0%, #B652FF 100%);
  --text:          #0F172A;
  --text2:         #334155;
  --muted:         #64748B;
  --border:        #E2E8F0;
  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --dark:          #0F172A;
  --dark2:         #1E293B;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     20px;
  --shadow:        0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:     0 4px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-orange: 0 4px 20px rgba(112,107,255,.30);
}
/* Отступ под закреплённой шапкой при переходе по якорю — единственное место,
   где он задаётся. Считается от высоты самой шапки, чтобы не разъезжаться с
   ней (см. --header-h ниже по файлу). */
/* Фон документа — тот же тёмный, что у подвала.

   Замечание 15.08: «что за белый прямоугольник снизу? во всех сайтах на
   телефонах снизу дальше фирменный цвет, а это будто обрубок». Телефон, когда
   страницу оттягивают за конец, докрашивает освободившееся место фоном
   документа. Фон был у `body` и белый — отсюда белая полоса под тёмным
   подвалом.

   Красим `html`, а не `body`: у `body` фон остаётся светлым, он и рисует
   страницу. Пока фона у `html` нет, браузер берёт на холст фон `body` — как
   раз этот случай. Как только он появился, `body` красит только свою рамку, а
   она и так во всю высоту документа: страницы выглядят ровно как прежде,
   меняется только то, что за их пределами. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 84px) + 8px); background: var(--dark2); }
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; background: var(--surface); color: var(--text); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* Кнопки и поля не наследуют шрифт сами — браузер рисует их своим (на Windows
   это Arial). По файлу это было незаметно: почти у каждого блока стоит своё
   font-family: inherit, и правило просто забывали у новых. Так уехали стрелки
   ленты новостей и крестик закрытия окна. Одно правило на все — и забыть
   больше негде. */
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 48px 0; }

/* ==================== TYPOGRAPHY ==================== */
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: 1.05rem; font-weight: 600; }
.section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.section-title { text-align: center; margin-bottom: 16px; }
.section-desc { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 44px; font-size: 1.05rem; }

/* ==================== BUTTONS ==================== */
/* line-height задан явно: у <button> он свой по умолчанию, у <a> наследуется от
   окружающего текста. Из-за этого кнопка и ссылка с одним классом получались
   разной высоты — заметно там, где они стоят рядом (окно новости). */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 50px; font-size: .95rem; line-height: 1.2; font-weight: 600; cursor: pointer; transition: all .18s; border: none; font-family: inherit; white-space: nowrap; }
.btn-primary { background: var(--orange-grad); color: #fff; box-shadow: var(--shadow-orange); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(112,107,255,.40); }
.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--orange); color: var(--orange); }
/* Кнопка карточки «Клиентам» — пурпурным концом фирменного градиента, чтобы
   отличаться от кнопки «Агентам», но остаться в палитре. #7B24A8 —
   затемнённый #B652FF: на белом даёт 6.2:1, сам #B652FF — 3.2:1. */
.btn-outline-plum { border-color: #B652FF; color: #7B24A8; }
.btn-outline-plum:hover { border-color: #B652FF; color: #fff; background: linear-gradient(135deg, #B652FF, #706BFF); }
.btn-white { background: #fff; color: var(--orange-dark); font-weight: 700; }
.btn-white:hover { background: var(--orange-light); }
.btn-sm { padding: 10px 18px; font-size: .85rem; }  /* 10, а не 9: при 9 кнопка выходила 38px — на два пикселя ниже минимума под палец */

/* ==================== BADGE ==================== */
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 50px; font-size: .8rem; font-weight: 600; }
.badge-orange { background: #EEF2FF; color: #3730A3; }
.badge-dark { background: rgba(255,255,255,.12); color: #fff; }

/* ==================== HEADER ==================== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease; }
.header.scrolled { background: rgba(30,41,59,.92); backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,.08); }
/* Высота шапки вынесена в переменную: от неё считается отступ содержимого
   на страницах, где шапка плотная. Меняется в одном месте. */
/* Высота шапки уменьшена на 12%: 84 → 74px. Просьба заказчика по образцу
   bbr.ru — шапка там компактнее и не меняется при прокрутке.
   Отступ у якорей считается от этой же переменной, поэтому переходы по меню
   подстраиваются сами. */
:root { --header-h: 74px; }
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.header .logo { overflow: hidden; height: var(--header-h); }

/* Логотип чуть уменьшается, когда страницу начали прокручивать: шапка в этот
   момент становится тёмной и плотной, и логотип в прежнюю величину смотрится в
   ней тяжело. Высоту шапки не трогаем — от неё считается отступ у якорей
   (--header-h), и её изменение сдвинуло бы переходы по меню. */
/* Логотип не меняет размер при прокрутке.

   Сначала сделали уменьшение по просьбе, потом заказчик показал bbr.ru как
   образец: там логотип статичный, и это спокойнее — при прокрутке ничего не
   «дышит». Оставляем сразу тот размер, который раньше был у прокрученной
   шапки: он и был подобран под компактное состояние. */
.header-logo-img {
  display: block;
  width: auto;
  height: 38px;
}

/* Кому анимация мешает — уменьшение остаётся, плавность убираем. */
@media (prefers-reduced-motion: reduce) {
  .header-logo-img { transition: none; }
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-icon { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg,#706BFF,#B652FF); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.5px; flex-shrink: 0; }
.logo-text { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.logo-text span { color: var(--orange); }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav a { padding: 7px 13px; border-radius: 50px; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.92); transition: all .14s; }
/* Подложка пункта меню — фирменным градиентом вместо полупрозрачного белого:
   замечание от 16.08 «задний фон таблетки в фирменный цвет».

   Концы градиента взяты затемнённые, а не #706BFF → #B652FF из --orange-grad.
   Текст в меню — 14.4 px обычного веса, по AA ему нужно 4.5:1, а белый даёт
   на #706BFF 4.0:1 и на #B652FF 3.7:1 — оба чуть ниже порога. #5B4FE0
   (--orange-dark) даёт 5.8:1, #7B24A8 — 7.9:1, и второй в теме уже есть как
   затемнённый #B652FF у кнопки «Клиентам». Градиент читается тем же
   фирменным, а надпись проходит по контрасту.

   Светлая рамка внутрь — потому что тёмно-фиолетовая таблетка на тёмном
   слайдере под шапкой отличается от фона всего в 2.5:1: сам текст виден, а
   форма таблетки почти пропадает. Прежний белый фон этой беды не имел. */
.nav a:hover, .nav a:focus-visible { background: linear-gradient(135deg, var(--orange-dark), #7B24A8); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.header-phone { font-size: .9rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 6px; }
.header-phone svg, .header-phone svg path { stroke: #fff; }
.header-phone:hover { color: #fff; opacity: .8; }
.header a[href^="mailto"] { color: rgba(255,255,255,.85) !important; }
.header a[href^="mailto"] svg path { stroke: #fff; }
.header-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-shrink: 0; }

/* Градиентная «outline» кнопка — фирменный контур, белый текст; на hover — заливка фирменным градиентом (как «Новая сделка» в ЛК Субагента) */
.btn-grad-outline { position: relative; background: transparent; border: none; color: #fff; transition: background .18s, box-shadow .18s, transform .18s; }
.btn-grad-outline::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #706BFF, #B652FF); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; }
.btn-grad-outline .btn-grad-text { position: relative; color: #fff; }
.btn-grad-outline:hover { background: linear-gradient(135deg, #706BFF, #B652FF); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(112,107,255,.35); }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .2s; }

/* Mobile nav */
.mobile-nav { display: none; position: fixed; top: 68px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 16px 24px 24px; z-index: 999; flex-direction: column; gap: 4px; box-shadow: var(--shadow-md); }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 10px 14px; border-radius: 8px; font-size: 1rem; font-weight: 500; color: var(--text2); }
.mobile-nav a:hover { background: #F1F5F9; color: var(--text); }
.mobile-nav .mobile-nav-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mobile-nav .mobile-nav-actions .btn { flex: 1; justify-content: center; }

/* ==================== HERO ==================== */
.hero { padding: 80px 0 80px; background: #FFFFFF; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero-badge { margin-bottom: 20px; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; background: linear-gradient(135deg, #706BFF, #B652FF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-desc { font-size: 1.1rem; color: var(--text2); margin-bottom: 32px; max-width: 480px; }
/* Заголовок + подзаголовок слева — оба варианта текста лежат в одной grid-ячейке, поэтому
   высота блока всегда равна более длинному варианту, и кнопки ниже не сдвигаются при кроссфейде. */
.hero-copy { display: grid; }
.hero-copy-variant { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); pointer-events: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.hero-copy-variant.active { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hero-copy-variant { transition: none; } }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-disclaimer { font-size: .8rem; color: var(--muted); }
.hero-disclaimer span { opacity: .7; }

/* Chat mockup */
.chat-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border); }
/* Единый градиентный блок «Goodfin ИИ-агент»: имя/статус и переключатель вкладок — одна визуальная группа,
   с одинаковыми отступами сверху/между строками/снизу, чтобы вкладки читались как часть агента, а не отдельный виджет. */
.chat-top { background: linear-gradient(135deg,#706BFF,#B652FF); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-header { display: flex; align-items: center; gap: 12px; }
.chat-avatar { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.chat-header-info { flex: 1; }
.chat-header-name { font-size: .9rem; font-weight: 700; color: #fff; }
.chat-header-status { font-size: .75rem; color: rgba(255,255,255,.8); }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; flex-shrink: 0; }
/* Переключатель «Агентам / Клиентам» со скользящим фоном (сегмент-контрол) — «стеклянный», лежит на градиенте агента */
.chat-tabs { position: relative; display: flex; background: rgba(255,255,255,.16); border-radius: 50px; padding: 4px; margin: 0; gap: 2px; }
.chat-tab { position: relative; z-index: 1; flex: 1; padding: 9px 14px; font-size: .83rem; font-weight: 700; color: rgba(255,255,255,.75); background: none; border: none; border-radius: 50px; cursor: pointer; transition: color .25s; font-family: inherit; }
.chat-tab.active { color: var(--orange-dark); }
.chat-tab:hover:not(.active) { color: #fff; }
.chat-tabs-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 50px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.18); transition: left .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1); z-index: 0; }
.chat-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F8FAFC; height: 340px; overflow-y: auto; scroll-behavior: smooth; }
.chat-kv-list { margin: 5px 0 3px; }
.chat-kv { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.chat-kv:last-child { border-bottom: none; }
.chat-kv b { color: var(--text); }
.chat-analysis { background: rgba(0,0,0,.04); border-radius: 8px; padding: 8px 10px; margin: 6px 0 2px; }
.chat-arow { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,.06); gap: 8px; }
.chat-arow:last-child { border-bottom: none; }
.chat-arow span { color: #64748B; flex-shrink: 0; }
.chat-arow b { text-align: right; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg { animation: msgIn .22s ease; }
.msg { max-width: 84%; display: flex; flex-direction: column; gap: 4px; }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-ai { align-self: flex-start; align-items: flex-start; }
.msg-bubble { padding: 11px 15px; border-radius: 16px; font-size: .85rem; line-height: 1.5; }
.msg-user .msg-bubble { background: linear-gradient(135deg,#706BFF,#B652FF); color: #fff; border-bottom-right-radius: 4px; }
.msg-ai .msg-bubble { background: #fff; color: var(--text2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-ai .msg-bubble.typing { display: flex; align-items: center; gap: 4px; padding: 14px 18px; }
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.msg-time { font-size: .7rem; color: var(--muted); }
.chat-result { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.chat-result-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; font-size: .8rem; }
.chat-result-bank { font-weight: 600; color: #166534; }
.chat-result-rate { font-weight: 700; color: #15803D; }

/* ==================== TRUST BAR ==================== */
.trust-bar { background: var(--dark2); padding: 28px 0; }
.trust-bar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 16px; border-right: 1px solid rgba(255,255,255,.2); }
.trust-item:last-child { border-right: none; }
.trust-num { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; }
.trust-label { font-size: .8rem; color: rgba(255,255,255,.85); margin-top: 4px; }

/* ==================== FOR WHOM ==================== */
.forwhom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.forwhom-card { padding: 40px 36px; border-radius: var(--radius-lg); border: 1.5px solid var(--border); background: var(--surface); transition: all .2s; position: relative; overflow: hidden; }
.forwhom-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
/* Шаблон ставит класс из настроек: «agent» и «client» в единственном числе
   (for-whom.html.twig:19, значения из полей). Правила были написаны на
   множественное число — и цветная полоска сверху карточек не рисовалась
   вовсе. Держим оба написания: данные в базе менять нельзя, они у заказчика
   уже свои. */
.forwhom-card.agent::before,
.forwhom-card.agents::before { background: var(--orange-grad); }
/* Карточка «Клиентам» была собрана на чужом фиолетовом: #6366F1→#8B5CF6 у
   полоски, #7C3AED у иконки, #6D28D9 у галочек. Это indigo и violet из чужой
   библиотеки — другой оттенок, чем фирменный #706BFF→#B652FF. Рядом с
   карточкой «Агентам», собранной правильно, разница видна как грязь.

   Обе карточки теперь из фирменного градиента, а различаются его концами:
   «Агентам» ведёт от сине-фиолетового к пурпурному, «Клиентам» — наоборот. */
.forwhom-card.client::before,
.forwhom-card.clients::before { background: linear-gradient(135deg, #B652FF, #706BFF); }
.forwhom-card:hover { border-color: #706BFF; box-shadow: 0 0 0 3px rgba(112,107,255,.12), var(--shadow-md); transform: translateY(-2px); }
/* Цвет обязателен: иконки библиотеки рисуются currentColor, и без него они
   наследуют цвет основного текста — тёмно-синий на светлой плашке выглядит
   как «иконки нет». Заказчик дважды писал «в разделе AI отсутствуют иконки». */
.fw-icon svg { color: #706BFF; }
.fw-icon.purple svg { color: #B652FF; }
.fw-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; }
/* Подложка под иконкой — от того же конца градиента, что и сама иконка. Раньше
   у одной карточки она была нейтрально-серой, у другой — чужого фиолетового
   оттенка: пара выглядела как две карточки из разных макетов. */
.fw-icon.orange { background: #F1EEFF; }
.fw-icon.purple { background: #FAEDFF; }
.fw-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.fw-desc { color: var(--text2); margin-bottom: 24px; font-size: .95rem; }
.fw-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.fw-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text2); }
.fw-check { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 11px; }
/* Плашка с иконкой в блоке «Для разработчиков» — тем же складом, что .fw-icon
   у карточек «Агентам»/«Клиентам»: одинаковые блоки должны выглядеть
   одинаково, а не «почти». */
.dev-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: #F1EEFF;
  color: #706BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-check.orange { background: var(--orange-mid); color: var(--orange-dark); }
/* #8B1FC4 — затемнённый #B652FF: на светлой пурпурной подложке даёт 5.6:1,
   как и пара слева. Сам #B652FF на ней читался бы 1.9:1. */
.fw-check.purple { background: #F5E4FF; color: #8B1FC4; }

/* ==================== HOW IT WORKS ==================== */
.how-bg { background: var(--bg); }
.steps { display: flex; gap: 0; align-items: flex-start; position: relative; }
.steps::after { content: ''; position: absolute; top: 44px; left: calc(16.67% + 20px); right: calc(16.67% + 20px); height: 2px; background: linear-gradient(90deg, var(--orange), #B652FF); z-index: 0; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--orange-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; box-shadow: var(--shadow-orange); }
.step-icon { font-size: 1.6rem; margin-bottom: 12px; }
.step-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.step-desc { font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* Три шага — вариант «Максимально фирменный» (градиентная плашка) */
.infB3-panel { background: linear-gradient(135deg, #706BFF, #B652FF); border-radius: 0; padding: 48px max(40px, calc((100vw - 1200px) / 2 + 40px)); position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; overflow: hidden; }
.infB3-panel::before { content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); }
.infB3-panel::after { content: ''; position: absolute; bottom: -100px; left: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.06); }
.infB3-row { display: flex; align-items: flex-start; gap: 0; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.infB3-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; }
.infB3-num { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; margin-bottom: 18px; }
.infB3-icon { width: 44px; height: 44px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.infB3-title { color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.infB3-desc { color: rgba(255,255,255,.85); font-size: .88rem; line-height: 1.55; max-width: 240px; }
.infB3-arrow { flex: 0 0 40px; height: 56px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 1.4rem; }
/* Появление шагов «Три шага» при прокрутке (добавлено) — текст/оформление шагов не менялись */
/* ПРАВКА по замечанию: «у текста заголовков при скролинге верх/вниз скачет тень».
   Причина — сама эта анимация. Пока блок едет вверх (translateY), браузер
   рисует текст с обычным сглаживанием вместо субпиксельного, и вокруг белых
   букв на градиенте появляется ореол — он и читается как «скачущая тень».
   Заканчивается анимация уже после того, как блок попал в кадр, поэтому при
   прокрутке вверх-вниз это видно каждый раз.
   Лечение: блок с текстом теперь только проявляется, без сдвига. Сдвиг остался
   у стрелок между шагами — там текста нет, ореолу взяться неоткуда, а движение
   в разделе сохраняется. Номер шага по-прежнему всплывает своей анимацией. */
.infB3-item { opacity: 0; transition: opacity .6s cubic-bezier(.16,1,.3,1); }
.infB3-arrow { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.infB3-item.in, .infB3-arrow.in { opacity: 1; transform: none; }
.infB3-row .infB3-item:nth-child(1) { transition-delay: .05s; }
.infB3-row .infB3-arrow:nth-child(2) { transition-delay: .2s; }
.infB3-row .infB3-item:nth-child(3) { transition-delay: .3s; }
.infB3-row .infB3-arrow:nth-child(4) { transition-delay: .45s; }
.infB3-row .infB3-item:nth-child(5) { transition-delay: .55s; }
.infB3-item.in .infB3-num { animation: infB3Pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes infB3Pop { 0% { transform: scale(.55); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .infB3-item, .infB3-arrow { opacity: 1; transform: none; transition: none; }
  .infB3-item.in .infB3-num { animation: none; }
}
@media (max-width: 768px) {
  .infB3-panel { padding: 32px 24px; }
  /* ПРАВКА по замечанию: «блоки 1 и 2 не выровнены по вертикали с блоком 3».
     У ряда базовое align-items: flex-start. В колонке это значит, что каждый шаг
     получает ширину по своему тексту и прижимается влево, а содержимое внутри
     центрируется уже по этой разной ширине — поэтому центры шагов не совпадали.
     Растягиваем шаги на всю ширину: центр у всех становится общим. */
  .infB3-row { flex-direction: column; gap: 28px; align-items: stretch; }
  .infB3-arrow { display: none; }
}

/* ==================== BANKS ==================== */
.banks-section { padding: 44px 0; overflow: hidden; }
.banks-title { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--muted); margin-bottom: 32px; }
/* Блок доверия «Goodfin в цифрах» — счётчики между заголовком и слайдером банков */
.banks-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; margin: 0 auto 40px; opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.banks-stats.in { opacity: 1; transform: none; }
.banks-stat { text-align: center; padding: 22px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); position: relative; overflow: hidden; }
.banks-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--orange-grad); }
.banks-stat-num { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; background: var(--orange-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.banks-stat-lbl { font-size: .82rem; color: var(--muted); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .banks-stats { opacity: 1; transform: none; transition: none; } }
@media (max-width: 768px) { .banks-stats { grid-template-columns: repeat(2, 1fr); } }
.banks-track-wrapper { overflow: hidden; position: relative; }
.banks-track-wrapper::before, .banks-track-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; }
.banks-track-wrapper::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.banks-track-wrapper::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.banks-track { display: flex; gap: 0; animation: marquee var(--gf-marquee, 28s) linear infinite; width: max-content; align-items: stretch; }
.banks-track:hover { animation-play-state: paused; }
.bank-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px; margin: 0 8px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .85rem; font-weight: 600; color: var(--text2); white-space: nowrap; cursor: default; transition: all .15s; min-width: 172px; }
.bank-chip:hover { border-color: #334155; color: var(--text); box-shadow: var(--shadow); }
.bank-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; flex-shrink: 0; }
.bank-chip-name { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: var(--text); }
.bank-chip-info { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; font-weight: 500; color: var(--muted); }
.banks-cta { text-align: center; margin-top: 32px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==================== АГЕНТАМ: возможности — hero слева, вертикальная инфографика справа ==================== */
.af-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.af-hero { position: sticky; top: 110px; }
.af-hero h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 12px 0 16px; letter-spacing: -.01em; }
.af-hero h2 em { font-style: normal; background: var(--orange-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.af-hero-desc { color: var(--muted); font-size: 1rem; line-height: 1.65; margin-bottom: 28px; max-width: 440px; }
/* Перечисление выгод списком, а не запятыми в строку (замечание 18.08).
   Вводная фраза и список — одно целое, поэтому отступ между ними меньше
   обычного, а 28px остаются под списком, перед кнопкой.
   Маркер рисуем сами: глобальное `ul { list-style: none }` снимает родные, а
   тире фирменным цветом заодно связывает список с остальной страницей. */
.af-hero-desc:has(+ .af-hero-list) { margin-bottom: 10px; }
.af-hero-list { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 440px; margin: 0 0 28px; display: flex; flex-direction: column; gap: 6px; }
.af-hero-list li { position: relative; padding-left: 22px; }
.af-hero-list li::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; }

.af-timeline { position: relative; display: flex; flex-direction: column; gap: 40px; }
.af-timeline::before { content: ''; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #706BFF, #B652FF); opacity: .25; }
.af-item { position: relative; z-index: 1; display: flex; gap: 20px; align-items: flex-start; opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.af-item.in { opacity: 1; transform: none; }
.af-item:nth-child(2) { transition-delay: .1s; }
.af-item:nth-child(3) { transition-delay: .2s; }
.af-item:nth-child(4) { transition-delay: .3s; }
.af-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--orange-grad); box-shadow: var(--shadow-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* 12px — это --radius. Было 13: значение из набора не входит, а на глаз
   от него не отличается, зато следующая правка «как у всех» его не заметит. */
.af-icon-sq { border-radius: var(--radius); }
.af-content { flex: 1; min-width: 0; padding-top: 6px; }
.af-content h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.af-content p { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.af-sub { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.af-sub-item { font-size: .88rem; color: var(--muted); line-height: 1.55; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.af-sub-item b { color: var(--text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .af-item { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .af-layout { grid-template-columns: 1fr; gap: 40px; }
  .af-hero { position: static; }
}

/* ==================== SECURITY ==================== */
.security-section { background: var(--dark); padding: 80px 0; }
.security-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.security-left .section-label { color: var(--orange); }
.security-left h2 { color: #fff; margin-bottom: 14px; }
.security-left p { color: rgba(255,255,255,.7); font-size: 1rem; }
.security-points { display: flex; flex-direction: column; gap: 16px; }
.security-point { display: flex; align-items: flex-start; gap: 16px; opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.security-point.in { opacity: 1; transform: none; }
.security-point:nth-child(2) { transition-delay: .1s; }
.security-point:nth-child(3) { transition-delay: .2s; }
.security-point:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .security-point { opacity: 1; transform: none; transition: none; } }
.sp-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-grad); box-shadow: var(--shadow-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-text h4 { color: #fff; font-size: .95rem; margin-bottom: 4px; }
.sp-text p { color: rgba(255,255,255,.6); font-size: .85rem; }
.security-badges { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.security-badge { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); text-decoration: none; transition: background .15s, border-color .15s; max-width: 220px; }
.security-badge:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.security-badge-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--dark2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.security-badge span { font-size: .78rem; color: rgba(255,255,255,.85); line-height: 1.3; font-weight: 600; }

/* ==================== CHANNELS ==================== */
.channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.channel-card { padding: 32px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: all .2s; text-align: center; }
.channel-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); }
.channel-icon { font-size: 3rem; margin-bottom: 0; flex-shrink: 0; }
.channel-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.channel-desc { font-size: .9rem; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
.channel-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 50px; background: #F1F5F9; color: var(--text2); font-size: .78rem; font-weight: 600; }

/* ==================== PRICING ==================== */
.pricing-bg { background: var(--bg); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card { padding: 36px 28px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; position: relative; transition: all .2s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Кайма выделенного тарифа — сам градиент (padding-box/border-box), а не однотонная рамка */
.price-card.featured { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--orange-grad) border-box; box-shadow: var(--shadow-orange); }
.price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orange-grad); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 14px; border-radius: 50px; white-space: nowrap; }
.price-name { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.price-value { font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 6px; line-height: 1; }
.price-value sup { font-size: 1rem; vertical-align: top; margin-top: 6px; }
.price-period { font-size: .85rem; color: var(--muted); margin-bottom: 24px; }
.price-list { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.price-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--text2); }
.pi-check { color: #16A34A; font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
.pi-dash { color: var(--muted); font-size: 1rem; flex-shrink: 0; line-height: 1.4; }

/* ==================== TESTIMONIALS ==================== */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card { padding: 28px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.testi-stars { color: var(--orange); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 14px; }
.testi-text { font-size: .9rem; color: var(--text2); line-height: 1.6; margin-bottom: 20px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.testi-name { font-size: .9rem; font-weight: 700; }
.testi-role { font-size: .8rem; color: var(--muted); }

/* ==================== NEWS ==================== */
.news-wrap { position: relative; }
.news-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 8px 12px; margin: 0 -8px; -ms-overflow-style: none; scrollbar-width: none; }
.news-track::-webkit-scrollbar { display: none; }
.news-card { scroll-snap-align: start; flex: 0 0 calc((100% - 72px) / 4); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; text-decoration: none; color: inherit; display: block; }
.news-card:hover { border-color: #706BFF; box-shadow: 0 0 0 3px rgba(112,107,255,.12), var(--shadow-md); transform: translateY(-4px); }
.news-card-img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--bg); }
.news-card-body { padding: 18px 20px 22px; }
.news-card-date { font-size: .75rem; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.news-card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; color: var(--text); }
.news-card-desc { font-size: .88rem; color: var(--text2); line-height: 1.55; }
.news-nav { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.news-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; color: var(--text); transition: all .15s; }
.news-arrow:hover { border-color: #706BFF; color: #706BFF; box-shadow: 0 0 0 3px rgba(112,107,255,.1); }
@media (max-width: 768px) {
  .news-card { flex-basis: 78%; }
}

/* ==================== ДЛЯ СМИ ==================== */
.press-hero { background: linear-gradient(135deg, #706BFF 0%, #B652FF 100%); padding: 160px 0 64px; color: #fff; text-align: center; }
.press-hero .section-label { color: rgba(255,255,255,.85); }
.press-hero h1 { color: #fff; margin-bottom: 14px; }
.press-hero p { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto 24px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: #fff; padding: 8px 18px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,.4); transition: all .15s; }
.back-link:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* Белая ссылка задумана для тёмного экрана — на «Все новости» и на правовом
   документе фон светлый, и «← На сайт» оказывалась белой по белому: её просто
   не было видно. А это та самая кнопка возврата, которую заказчик просил
   предусмотреть отдельным пунктом.

   Правило по светлому фону, а не по классу страницы: любая новая светлая
   страница получит читаемую ссылку сама, без отдельной правки. */
.news-page .back-link,
.gf-legal-page .back-link,
.gf-404 .back-link,
body:not(.gf-on-dark) main .back-link {
  color: var(--text);
  border-color: var(--border);
}

.news-page .back-link:hover,
.gf-legal-page .back-link:hover,
.gf-404 .back-link:hover,
body:not(.gf-on-dark) main .back-link:hover {
  background: var(--bg);
  border-color: #706BFF;
  color: #706BFF;
}
.logo-download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.logo-download-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 40px 32px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: all .2s; }
.logo-download-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.logo-download-preview { height: 90px; display: flex; align-items: center; justify-content: center; }
.logo-download-preview img { max-height: 90px; max-width: 220px; object-fit: contain; }
.logo-download-name { font-weight: 700; font-size: 1.05rem; }
.logo-download-hint { font-size: .82rem; color: var(--muted); margin-top: -12px; }
.media-mentions { display: flex; flex-direction: column; gap: 14px; }
.media-card { display: flex; align-items: center; gap: 20px; padding: 22px 26px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: all .2s; }
.media-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.media-card-logo { flex-shrink: 0; width: 72px; height: 72px; border-radius: 14px; background: #F8FAFC; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 10px; }
.media-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-card-body { flex: 1; min-width: 0; }
.media-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.media-card-desc { font-size: .88rem; color: var(--muted); }
.media-card-arrow { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--muted); transition: all .15s; }
.media-card:hover .media-card-arrow { border-color: var(--orange); color: var(--orange); transform: translateX(2px); }
.dev-text { max-width: 820px; margin: 0 auto; }
.dev-text p { color: var(--text2); font-size: 1rem; line-height: 1.75; margin-bottom: 20px; }
.dev-text p:last-child { margin-bottom: 0; }
.dev-text b { color: var(--text); }
@media (max-width: 768px) {
  .logo-download-grid { grid-template-columns: 1fr; }
  .media-card { flex-wrap: wrap; }
}

/* ==================== КАЛЬКУЛЯТОР СТОИМОСТИ ГАРАНТИИ ==================== */
.calc-card { display: grid; grid-template-columns: 260px 1fr; gap: 40px; max-width: 1160px; margin: 0 auto; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.calc-form { display: flex; flex-direction: column; gap: 18px; }
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc-field-label { font-size: .85rem; font-weight: 700; color: var(--text2); }
.calc-select { padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: .92rem; font-family: inherit; color: var(--text); background: var(--surface); cursor: pointer; }
.calc-select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(112,107,255,.14); }
.calc-input { padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: .95rem; font-weight: 700; font-family: inherit; color: var(--text); }
.calc-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(112,107,255,.14); }
.calc-input::placeholder { color: var(--muted); opacity: 1; }
/* Ползунки в фирменном градиенте (заливка и «бегунок») — кросс-браузерная кастомная стилизация */
.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; margin-top: 8px; cursor: pointer; background: var(--border); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-grad); box-shadow: var(--shadow-orange); border: 3px solid #fff; cursor: pointer; }
.calc-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--orange-grad); box-shadow: var(--shadow-orange); border: 3px solid #fff; cursor: pointer; }
.calc-range::-moz-range-track { height: 6px; border-radius: 3px; background: transparent; }
.calc-checks { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 20px; margin-top: 2px; }
.calc-result-wrap { display: flex; flex-direction: column; align-self: start; width: 100%; }
.calc-result-count { font-size: .8rem; color: var(--muted); text-align: center; margin-bottom: 10px; }
.calc-result-count b { color: var(--text); font-weight: 800; }
.calc-result-scroll { position: relative; }
/* Список банков-партнёров скроллится — сделано намеренно, чтобы было видно, что банков много (15),
   а не просто зафиксированные 3-5 строк. Затухание снизу подсказывает, что список продолжается. */
.calc-result { max-height: 328px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); scrollbar-width: thin; scrollbar-color: #706BFF transparent; }
.calc-result::-webkit-scrollbar { width: 6px; }
.calc-result::-webkit-scrollbar-track { background: transparent; }
.calc-result::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #706BFF, #B652FF); border-radius: 50px; }
.calc-result::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }
.calc-result-hdr { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 1fr 150px 120px; gap: 0 14px; padding: 10px 16px; background: var(--bg); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); }
.calc-scroll-fade { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 32px; background: linear-gradient(0deg, var(--surface), transparent); border-radius: 0 0 var(--radius-sm) var(--radius-sm); pointer-events: none; }
.calc-bank-row { display: grid; grid-template-columns: 1fr 150px 120px; gap: 0 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; transition: background .15s; }
.calc-bank-row:last-child { border-bottom: none; }
.calc-bank-row:hover { background: var(--bg); }
.calc-bank-row.is-cheapest { background: #F0FDF4; border-left-color: #16A34A; }
.calc-bank-row.is-best-kv { background: #F1EEFF; border-left-color: #706BFF; }
/* Когда банк одновременно и самый дешёвый для клиента, и самый выгодный по КВ агенту —
   даём отдельный, различимый вид вместо того, чтобы один акцент молча перекрывал другой. */
.calc-bank-row.is-cheapest.is-best-kv { background: linear-gradient(90deg, #F0FDF4 0%, #F1EEFF 100%); border-left: 3px solid; border-image: linear-gradient(180deg, #16A34A 50%, #706BFF 50%) 1; }
.calc-bank-name-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calc-bank-name { font-size: .88rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
/* 8px — это --radius-sm; было 7, вне набора. */
.calc-bank-logo { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 8.6px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: -.2px; }
/* Цвет темнее переменной --muted: при .68rem её контраст выходил 4.2:1 при
   норме 4.5 — на телефоне строка «КВ агенту» читалась с трудом. */
.calc-bank-kv { font-size: .68rem; color: #55617A; white-space: nowrap; }
.calc-bank-flag-col { display: flex; align-self: start; margin-top: 1px; min-height: 20px; }
/* Замечание 7 от 13.08: «Дешевле клиенту в рамке, а Выгодно агенту — не в
   рамке, сделать одинаково без рамки».

   Рамкой здесь названа подложка-таблетка. Стояла она у обоих бейджей, но
   заметна была только у зелёного: #DCFCE7 на строке самого дешёвого банка
   (#F0FDF4) видно, а сиреневый #EFEDFF на строке лучшего КВ (#F1EEFF)
   отличается от неё на два деления и попросту сливается. Отсюда и «у одного
   рамка есть, у другого нет» — разной была не разметка, а заметность.

   Подложку убрали у обоих: остаётся галочка и подпись цветом. Боковых отступов
   тоже нет — иначе бейдж без фона стоит с отбивкой от левого края колонки, а
   соседняя строка «КВ агенту» начинается вплотную. */
.calc-bank-badge { font-size: .62rem; font-weight: 700; padding: 3px 0; border-radius: 50px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
/* Оттенки те же, что были у надписей на таблетках: они подбирались под
   контраст 4.5 и на светлом фоне строки дают его с запасом (6.4:1 и 8.6:1). */
.calc-bank-badge.cheap { color: #12803B; }
.calc-bank-badge.kv { color: #4A3ECC; }
.calc-bank-rate { font-size: .82rem; color: var(--muted); text-align: right; }
.calc-bank-cost { font-size: .92rem; font-weight: 800; color: var(--orange-dark); text-align: right; white-space: nowrap; }
.calc-legend { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: .76rem; color: var(--muted); }
.calc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calc-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.calc-legend-dot.cheap { background: #16A34A; }
.calc-legend-dot.kv { background: #706BFF; }
.calc-disclaimer { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 16px; }
@media (max-width: 768px) {
  .calc-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
}
/* Таблица банков на телефоне.

   Здесь стояло лечение первого захода: разрешить таблице прокручиваться вбок и
   держать её шириной 520 px, чтобы столбец «Стоимость» не обрезался. Оно
   решало обрезку, но не решало сам вопрос заказчика: «видно только блок БАНК,
   а дальше нужно скрол вправо, чтобы увидеть ставки, стоимость».

   Правильный ответ пришёл со слоем мобильных правок дизайн-команды
   (css/responsive-fixes.css): ниже 768 px строка перестаёт быть строкой
   таблицы и становится карточкой — название и стоимость в первой строке,
   бейджи и ставка во второй. Прокрутка вбок там не нужна вовсе.

   Но min-width: 520px отсюда продолжал действовать и растягивал эту карточку
   обратно до 520 px: раскладка уже была правильной, а строка всё равно не
   помещалась в экран, и до стоимости по-прежнему приходилось доскроливать.
   Два решения одной задачи мешали друг другу. Осталось одно — карточка. */

/* ==================== FAQ ==================== */
.faq-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: stretch; }
.faq-order-card { padding: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.faq-order-card .gf-modal-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px; }
.faq-order-card .gf-modal-icon svg { width: 16px; height: 16px; }
.faq-order-title { font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 20px; color: var(--text); }
.faq-order-card .gf-modal-header { margin-bottom: 20px; }
.faq-order-card .gf-modal-header .faq-order-title { text-align: left; margin-bottom: 0; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }
.faq-list { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { width: 100%; background: none; border: none; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--text); transition: background .14s; }
.faq-q:hover { background: #F1F5F9; }
.faq-q.open { background: #F1F5F9; color: var(--text); }
.faq-arrow { width: 24px; height: 24px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .75rem; transition: all .18s; }
.faq-q.open .faq-arrow { background: var(--dark); color: #fff; transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 24px 20px; font-size: .9rem; color: var(--text2); line-height: 1.7; }
.faq-item.open .faq-a { max-height: 300px; }

/* ==================== FOOTER ==================== */
.footer { background: var(--dark2); padding: 60px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-logo { margin-bottom: 14px; }
.footer-logo .logo-text { color: #fff; }
.footer-desc { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 20px; }
.footer-col-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 16px; }
/* .78 вместо .65: при .88rem прежняя прозрачность давала 3.8:1 по тёмному
   фону при норме 4.5 — ссылки на оферту и политику читались с трудом,
   а это ровно те ссылки, которые обязаны быть читаемыми. */
.footer-col a { display: block; font-size: .88rem; color: rgba(255,255,255,.78); margin-bottom: 9px; transition: color .14s; }
.footer-col a:hover { color: var(--orange); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: .82rem; color: rgba(255,255,255,.35); }
.footer-inn { font-size: .82rem; color: rgba(255,255,255,.35); }


/* ==================== MESSENGER ICONS ==================== */
.messenger-links { display: flex; align-items: center; gap: 6px; }
.msg-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: transform .15s, opacity .15s; flex-shrink: 0; }
.header .msg-icon, .footer .msg-icon { width: 24px; height: 24px; }
.msg-icon:hover { transform: scale(1.1); opacity: .85; }

/* ==================== MAIN SLIDER ==================== */
.main-slider { position: relative; padding-top: 84px; overflow: hidden; }
.slider-track { display: flex; transition: transform .55s cubic-bezier(.25,.1,.25,1); will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; }
.slider-track:active { cursor: grabbing; }
.slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 480px; }
.slide-bg-1 { background: linear-gradient(135deg, #1B2F4E 0%, #2D5487 100%); }
.slide-bg-2 { background: linear-gradient(135deg, #183828 0%, #2A6645 100%); }
.slide-bg-3 { background: linear-gradient(135deg, #2D1B52 0%, #5B3591 100%); }
.slide-bg-4 { background: linear-gradient(135deg, #3A2010 0%, #7A4A1A 100%); }
.slide-bg-5 { background: linear-gradient(135deg, #111827 0%, #1F2937 100%); }
.slide-bg-6 { background: linear-gradient(135deg, #0F2E24 0%, #1E5C46 100%); }
.slide-bg-7 { background: linear-gradient(135deg, #14274E 0%, #2C4E8C 100%); }
.slide-content { padding: 60px 48px 60px max(48px, calc((100vw - 1200px) / 2 + 24px)); color: #fff; }
.slide-tag { display: inline-block; padding: 5px 14px; border-radius: 50px; background: rgba(255,255,255,.15); font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 20px; letter-spacing: .07em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); }
.slide-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 16px; }
.slide-desc { font-size: .95rem; color: rgba(255,255,255,.72); line-height: 1.65; margin-bottom: 28px; max-width: 400px; }
.slide-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 50px; background: #fff; font-size: .9rem; font-weight: 700; cursor: pointer; border: 2px solid transparent; font-family: inherit; transition: all .18s; text-decoration: none; }
.slide-cta:hover { border-color: var(--orange); color: var(--orange); transform: none; box-shadow: none; }
.slide-bg-1 .slide-cta { color: #1B2F4E; }
.slide-bg-2 .slide-cta { color: #183828; }
.slide-bg-3 .slide-cta { color: #2D1B52; }
.slide-bg-4 .slide-cta { color: #3A2010; }
.slide-image { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 480px; overflow: hidden; padding-right: max(24px, calc((100vw - 1200px) / 2 + 24px)); padding-bottom: 0; }
.slide-image img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 16px 40px rgba(0,0,0,.35)); display: block; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 10; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: all .22s; padding: 0; }
.slider-dot.active { width: 28px; border-radius: 4px; background: #fff; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s; z-index: 10; backdrop-filter: blur(6px); }
.slider-arrow:hover { background: rgba(255,255,255,.28); }
.slider-prev { left: 20px; }
.slider-next { right: 20px; }

/* ==================== MAIN SLIDER — полноэкранный банер в стиле GOODFIN (V2) ==================== */
.main-slider.bbr-hero { padding-top: 0; }
.bbr-slide { display: block; height: 100vh; min-height: 560px; position: relative; overflow: hidden; }
.bbr-vignette { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(10,14,30,.82) 0%, rgba(10,14,30,.55) 38%, rgba(10,14,30,.12) 62%, rgba(10,14,30,0) 78%),
  linear-gradient(0deg, rgba(10,14,30,.55) 0%, rgba(10,14,30,0) 30%);
  z-index: 1; pointer-events: none; }
.bbr-visual { position: absolute; right: clamp(0px, 4vw, 90px); bottom: 0; height: 92%; max-width: 42%; width: auto; object-fit: contain; object-position: bottom center; z-index: 0; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
/* Полноэкранный фон-фото на весь баннер (не декоративный элемент справа, а сама подложка) */
.bbr-visual-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
/* gap: 12px — это гарантированный зазор между текстовым блоком слайда (в нём
   заканчивается кнопка) и блоком под ним: чипами, каналами или показателями.

   Замечание 15.08: «снова наложение идёт». Замер: слайд «44-ФЗ, 223-ФЗ, 615ПП»
   при коротком окне (1440x700 и ниже, 810x640) давал зазор кнопка-чип **ровно
   0** — кнопка и чип стыкуются, а у кнопки градиентная обводка через ::before
   подходит к самому краю, и на глаз это читается как наложение.

   Почему только при коротком окне: блоки разводит justify-content:
   space-between, и пока высоты хватает, между ними и так много места. Как
   только не хватает — разводить нечем, и они смыкаются.

   11.08 это же чинили, но правкой `.bbr-tags { margin-top: 12px }` внутри
   media (max-width: 768px) — то есть только на телефоне. Здесь то же значение,
   но для всех ширин и сразу для всех трёх видов правого блока. На высоких
   окнах ничего не сдвигается: свободное место поглощает gap целиком. */
.bbr-content-wrap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: clamp(120px, 24vh, 220px) max(24px, calc((100vw - 1200px) / 2 + 24px)) 64px; }
.bbr-text { max-width: 580px; }
.bbr-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin-bottom: 16px; }
.bbr-desc { font-size: 1.05rem; color: rgba(255,255,255,.82); max-width: 480px; line-height: 1.6; margin-bottom: 32px; }
.bbr-cta { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 17px 30px; border-radius: 50px; background: transparent; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .18s, box-shadow .18s, transform .18s; }
.bbr-cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #706BFF, #B652FF); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; }
.bbr-cta:hover { background: linear-gradient(135deg, #706BFF, #B652FF); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(112,107,255,.35); }
.bbr-cta .btn-grad-text { position: relative; color: #fff; }
.bbr-cta svg { position: relative; flex-shrink: 0; stroke: #fff; }
.bbr-stats { display: flex; gap: 40px; flex-wrap: wrap; max-width: 620px; }
.bbr-stat-val { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; }
.bbr-stat-lbl { font-size: .82rem; color: rgba(255,255,255,.65); margin-top: 6px; }
/* Плашка категории баннера (сверху слева), как в ЛК Клиента/Субагента */
.bbr-category { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 10px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; width: fit-content; }
.bbr-category svg { flex-shrink: 0; }
/* Тег-чипы фич (для баннера «Всё в одном личном кабинете») */
.bbr-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 620px; margin-bottom: 0; }
.bbr-tag-chip { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 50px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px); color: #fff; font-size: .85rem; font-weight: 600; }
/* Три способа взаимодействия (для баннера «Работайте так, как удобно вам») — столбиком, текст справа от иконки */
.bbr-channels { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.bbr-channel-item { display: flex; flex-direction: row; align-items: center; gap: 14px; }
/* Плашка канала залита фирменным градиентом — иконка на ней обязана быть
   белой. Без этого она берёт цвет текста страницы и на градиенте почти не
   видна: замечание «часть иконок без иконок». */
.bbr-channel-icon svg { color: #fff; }
.bbr-channel-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #706BFF, #B652FF); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(112,107,255,.35); flex-shrink: 0; }
.bbr-channel-text { display: flex; flex-direction: column; gap: 2px; }
.bbr-channel-title { color: #fff; font-weight: 700; font-size: .92rem; }
.bbr-channel-hint { color: rgba(255,255,255,.6); font-size: .74rem; font-weight: 500; }
/* Кнопка «Все новости» — справа снизу на каждом баннере */
/* Общий нижний ряд слайдера: точки-пагинация слева, кнопка «Все новости» справа.
   Прижат к тому же правому краю, что и кнопка «Войти» в header (--container: 1200px + 24px отступ). */
/* right считается через 50% контейнера (.main-slider), а не 100vw — так совпадает пиксель-в-пиксель
   с .container/margin:auto в header (100vw включает ширину скроллбара, из-за чего раньше был сдвиг на его половину). */
.bbr-bottom-bar { position: absolute; right: max(24px, calc(50% - 600px + 24px)); bottom: 64px; z-index: 3; display: flex; align-items: center; gap: 16px; }
.bbr-all-news { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 50px; background: transparent; color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .18s, box-shadow .18s, transform .18s; position: relative; }
.bbr-all-news::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #706BFF, #B652FF); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; }
.bbr-all-news:hover { background: linear-gradient(135deg, #706BFF, #B652FF); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(112,107,255,.35); }
/* Горизонтальная точечная навигация — в общем нижнем ряду, перед кнопкой «Все новости» */
/* Точки переехали из угла слайда в нижнюю панель, и position сменили на static.
   А left: 50% и transform: translateX(-50%) от .slider-dots остались: left при
   static просто игнорируется, а transform продолжает работать и сдвигает весь
   ряд влево на половину его ширины — на 54 px.

   На большом экране это незаметно: панель далеко от края, сдвинутые точки
   лежат на тёмном фоне. На телефоне панель прижата к левому краю (left: 16),
   и после сдвига ряд начинается с −38: первые две точки из шести уезжают за
   экран. Их не видно и по ним не нажать — казалось, что слайдов четыре. */
.bbr-dots { position: static; transform: none; left: auto; bottom: auto; flex-direction: row; gap: 10px; }
.bbr-dots .slider-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
.bbr-dots .slider-dot.active { width: 13px; height: 13px; background: linear-gradient(135deg, #706BFF, #B652FF); box-shadow: 0 0 0 5px rgba(112,107,255,.25); }
.bbr-arrow-hide { display: none; }
@media (max-width: 1024px) {
  .bbr-visual { max-width: 34%; opacity: .8; }
  .bbr-text { max-width: 52vw; }
  .bbr-stats { max-width: 52vw; }
}
@media (max-width: 768px) {
  .bbr-slide { height: auto; min-height: 620px; max-height: none; }
  .bbr-visual { display: none; }
  .bbr-vignette { background: linear-gradient(180deg, rgba(10,14,30,.35) 0%, rgba(10,14,30,.85) 100%); }

  /* Содержимое слайда было прибито absolute к его границам. На широком экране
     это незаметно — места хватает; на телефоне колонка чипов у слайда «Всё в
     одном личном кабинете» вырастала выше слайда, и последние два чипа
     вываливались за нижний край на 25–52 px: наезжали на кнопку «Все новости»
     и на следующий блок. Слайд при этом остаётся ростом 620 px и не может
     подрасти — absolute из потока выключен.

     Возвращаем содержимое в поток: слайд теперь тянется под свои чипы, а
     минимальная высота держит прежний вид там, где содержимого мало. Заодно
     это страхует будущие слайды: добавят редактору ещё пару чипов — вёрстка
     не поедет. */
  .bbr-content-wrap {
    position: relative;
    inset: auto;
    min-height: 620px;
    padding: 110px 24px 40px;
  }
  .bbr-text { max-width: 100%; }
  .bbr-desc { max-width: 100%; }
  .bbr-stats { gap: 22px; max-width: 100%; }
  /* Левый край панели с точками совпадает с левым краем чипов: у чипов
     отступ 24px, у панели был 16 — восемь пикселей разницы, и заказчик
     назвал это «криво расположены чипы от чекбоксов». */
  .bbr-bottom-bar { left: 24px; right: 24px; bottom: 16px; gap: 10px; }
  .bbr-all-news { padding: 7px 14px; font-size: .74rem; }
  /* Здесь стояло `.bbr-tags { margin-top: 12px }` — замечание 2.3 от 11.08
     («кнопка „Войти в кабинет“ на чипы наслаивается немного», зазор был ровно
     0). Правка верная, но узкая: она лежала только в этом media-блоке, то есть
     работала лишь на телефоне. 15.08 тот же ноль вылез на широком экране при
     коротком окне.

     Теперь зазор задан один раз для всех ширин — `gap: 12px` у
     `.bbr-content-wrap` выше по файлу. Значение то же самое, вид на телефоне не
     меняется; отсюда правило убрано, чтобы отступ не сложился вдвое. */
  .bbr-tags { margin-bottom: 0; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Планшет: промежуточное состояние в 2 колонки вместо резкого прыжка
     с 3 колонок сразу в 1 (это происходит ниже, на 768px). */
  .pricing-grid, .channels-grid, .testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav, .header-phone { display: none; }
  .burger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 60px 0 60px; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); padding: 14px 16px; }
  .trust-item:nth-child(even) { border-bottom: none; }
  .trust-item:nth-child(odd):last-child { border-bottom: none; }
  .forwhom-grid { grid-template-columns: 1fr; }
  .steps { flex-direction: column; gap: 32px; }
  .steps::after { display: none; }
  .step { padding: 0; }
  .security-inner { grid-template-columns: 1fr; gap: 40px; }
  .channels-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .section { padding: 40px 0; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .trust-bar-inner { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}
/* На самых узких телефонах логотип + иконки мессенджеров + кнопка «Войти» +
   бургер вместе не помещаются в одну строку шапки — прячем декоративные
   иконки мессенджеров, оставляя логотип/вход/бургер. */
@media (max-width: 400px) {
  .header .messenger-links { display: none; }
}

/* ==================== МОДАЛЬНОЕ ОКНО «Заказать банковскую гарантию» ==================== */
.gf-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.gf-modal-overlay.open { opacity: 1; pointer-events: auto; }

/* Страница под открытым окном не прокручивается. Фиксация, а не overflow:
   hidden, — на iPhone второе не работает вовсе. Положение хранит скрипт, он же
   возвращает страницу на место при закрытии. */
body.gf-scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.gf-modal { width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px 32px 28px; position: relative; transform: translateY(14px) scale(.98); transition: transform .22s ease; }
/* Замечание 1.9 от 11.08: «в модалке новостей фирменный скролинг по новости и по
   навигатору новостей». Обе внутренние области — .news-detail-main и
   .news-detail-thumbs — фирменные уже были, а вот сама модалка (max-height +
   overflow-y:auto) отдавала системную полосу. Видно это в первую очередь на
   телефоне: там внутренние области перестают скроллиться (overflow становится
   visible), и прокручивается именно .gf-modal — то есть системная полоса и была
   той, которую видел заказчик. Правило общее для всех окон: одинаковый скролл
   везде, а не только в новостях. */
.gf-modal { scrollbar-width: thin; scrollbar-color: #706BFF transparent; }
.gf-modal::-webkit-scrollbar { width: 6px; height: 6px; }
.gf-modal::-webkit-scrollbar-track { background: transparent; }
.gf-modal::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #706BFF, #B652FF); border-radius: 50px; }
.gf-modal::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }
.gf-modal-overlay.open .gf-modal { transform: none; }
/* Крестик держится за верх окна, даже когда содержимое прокручено.

   Само окно (.gf-modal) прокручивается, а крестик стоял на position: absolute
   от него же — то есть от НАЧАЛА содержимого, а не от видимой части. Стоило
   прокрутить длинную новость или форму на узком экране, и кнопка закрытия
   уезжала вверх за пределы экрана: закрыть окно пальцем было нечем.

   position: sticky держит его на месте при прокрутке. Кнопка при этом в потоке,
   поэтому float: right убирает её с пути текста, а отрицательные поля
   возвращают в тот же угол, где она была. */
/* Отступ крестика от угла окна — один и тот же во всех окнах.

   Здесь стояло float: right с полями -20px/-16px. Поля подобраны под padding
   базового окна (36/32), а у окон он разный: у «Все новости» 22, у новости
   целиком 20. Замер отрисованных координат показал три разных положения —
   16/35, 16/16 и 4/20: в новости крестик почти касался края. Отсюда и
   «центрируй ты уже» — сама иконка в кнопке ровно по центру (сдвиг 0×0),
   криво стояла именно кнопка.
   Теперь padding окна объявлен переменной, и отступ считается от неё: сколько
   бы ни было у окна padding, крестик отходит от края на 16px. Меняете padding
   окна — правьте и переменную рядом, иначе отступ снова разъедется.

   float убран: с ним не срабатывал отрицательный верхний отступ (потому и
   выходило 35 вместо 16). Вправо кнопку прижимает margin-left: auto — она
   блочного уровня и с заданной шириной этого достаточно. Отрицательный нижний
   отступ убирает высоту, которую кнопка занимала бы в потоке, иначе заголовок
   съезжал бы вниз на 32px. position: sticky сохранён: окно прокручивается, и
   без него кнопка уезжает вверх вместе с содержимым — это уже правили. */
.gf-modal { --gf-modal-pad: 32px; --gf-modal-pad-top: 36px; }
.gf-modal-close {
  position: sticky;
  /* top отсчитывается не от границы окна, а от его padding-края — поэтому
     top: 0 зажимал кнопку на padding-top (36px) и отменял отрицательный
     верхний отступ: замер давал 35px вместо 16px. Считаем top от той же
     переменной, тогда порог прилипания совпадает с положением в потоке, и
     крестик стоит на 16px от края и в покое, и при прокрутке. */
  top: calc(16px - var(--gf-modal-pad-top));
  margin: calc(16px - var(--gf-modal-pad-top)) calc(16px - var(--gf-modal-pad)) -32px auto;
  z-index: 6;
  width: 32px;
  height: 32px;
  /* padding и line-height заданы явно: у button они браузерные, а глобального
     сброса в теме нет — центр иконки не должен зависеть от браузера. */
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
/* svg — строчный элемент, и его базовая линия добавляет снизу лишние пиксели:
   на дробном масштабе это уводит крестик из центра на пол-пикселя. */
.gf-modal-close svg { display: block; }
/* Наведение и фокус — фирменным градиентом, как у кнопок и как у полосы
   прокрутки этого же окна. Фокус наравне с наведением: закрывать окно с
   клавиатуры должно быть так же очевидно, как мышью. */
.gf-modal-close:hover,
.gf-modal-close:focus-visible {
  background: var(--orange-grad);
  color: #fff;
  box-shadow: 0 4px 14px rgba(112, 107, 255, .35);
}
.gf-modal-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #706BFF, #B652FF); box-shadow: 0 3px 12px rgba(112,107,255,.35); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; flex-shrink: 0; }
.gf-modal-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 24px; letter-spacing: -.01em; }
.gf-modal-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.gf-modal-header .gf-modal-icon { margin: 0; }
.gf-modal-header .gf-modal-title { margin-bottom: 0; }
.gf-modal-form { display: flex; flex-direction: column; gap: 16px; }
.gf-field { display: flex; flex-direction: column; gap: 6px; }
.gf-field-label { font-size: .82rem; font-weight: 600; color: var(--text2); }
.gf-req { color: #E5484D; }
.gf-input { padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: .92rem; font-family: inherit; color: var(--text); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.gf-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(112,107,255,.14); }
.gf-input::placeholder { color: var(--muted); opacity: 1; }
.gf-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.gf-password-wrap { position: relative; display: flex; border-radius: 999px; }
.gf-password-input { width: 100%; padding-right: 42px; }
.gf-password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: var(--muted); }
.gf-password-toggle:hover { color: var(--text); }
.gf-password-toggle .eye-closed { display: none; }
.gf-password-toggle.is-visible .eye-open { display: none; }
.gf-password-toggle.is-visible .eye-closed { display: flex; }
.gf-input:invalid:not(:placeholder-shown) { border-color: #E5484D; }
/* .gf-field-frame — обёртка поля на странице входа; сама рамка рисуется отдельным
   ::after поверх обёртки (см. ниже), а не border/фоном самого input. */
.gf-field-frame { display: block; position: relative; border-radius: 999px; }
.gf-field-frame:has(.gf-textarea) { border-radius: var(--radius); }
.auth-page-panel .gf-input { padding-left: 20px; padding-right: 20px; border-radius: 999px; }
.auth-page-panel .gf-textarea { border-radius: var(--radius); }
.auth-page-panel .gf-password-input { padding-right: 48px; }
.gf-field-frame .gf-input,
.gf-field-frame .gf-textarea { display: block; width: 100%; box-sizing: border-box; }
.gf-check-row { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--text2); line-height: 1.45; cursor: pointer; }
/* Фирменный фиолетовый на белом даёт 3.8:1 при норме 4.5 — а это ссылки на
   оферту и политику, которые по закону обязаны читаться. Берём тот же
   оттенок на два шага темнее: цвет узнаётся, текст читается. */
.gf-check-link { color: #4F46C7; cursor: pointer; }
.gf-check-link:hover { text-decoration: underline; }
.gf-check { position: absolute; opacity: 0; width: 0; height: 0; }
.gf-check-box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--border); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all .15s; background: #fff; }
.gf-check-box svg { opacity: 0; transform: scale(.5); transition: all .15s; }
.gf-check:checked + .gf-check-box { background: var(--orange-grad); border-color: transparent; }
.gf-check:checked + .gf-check-box svg { opacity: 1; transform: scale(1); }
.gf-check:focus-visible + .gf-check-box { box-shadow: 0 0 0 3px rgba(112,107,255,.25); }
.gf-modal-actions { display: flex; gap: 12px; margin-top: 4px; }
.gf-modal-actions .btn { flex: 1; justify-content: center; }
.gf-modal-faq-link { display: block; text-align: center; margin-top: 20px; font-size: .8rem; color: var(--muted); text-decoration: none; transition: color .15s; }
.gf-modal-faq-link:hover { color: var(--orange); }
.gf-modal-success { text-align: center; padding: 16px 0 4px; }
.gf-modal-success-icon { margin: 0 auto 14px; width: 64px; height: 64px; border-radius: 50%; background: #F0FDF4; display: flex; align-items: center; justify-content: center; }
.gf-modal-success-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.gf-modal-success-text { font-size: .88rem; color: var(--muted); }

/* ---------- Модалка «Открытая новость» ---------- */
.news-detail-modal { max-width: 900px; width: 100%; }
.news-detail-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.news-detail-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: 18px; background: var(--bg); }
.news-detail-date { font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.news-detail-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -.01em; }
.news-detail-desc { font-size: .95rem; color: var(--text2); line-height: 1.6; }
.news-detail-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.news-thumb { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.news-thumb:hover { border-color: #706BFF; box-shadow: 0 0 0 3px rgba(112,107,255,.12); }
.news-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.news-thumb-date { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; }
.news-thumb-title { display: block; font-size: .82rem; font-weight: 700; line-height: 1.35; margin-top: 2px; }
@media (max-width: 768px) {
  .news-detail-body { grid-template-columns: 1fr; }
  /* Остаток снесённой раскладки.

     Здесь список новостей на телефоне был горизонтальной лентой: контейнер
     строкой, каждая карточка колонкой — картинка сверху, текст под ней. Потом
     список переделали в вертикальный, и правило для КОНТЕЙНЕРА перекрыли ниже
     по файлу (.news-detail-thumbs с flex-direction: column, без медиазапроса),
     а правило для КАРТОЧКИ забыли — перекрывать его нечем.

     Получалась смесь: вертикальный список из карточек-колонок с
     align-items: center. Картинка вставала по центру над текстом, а дата и
     заголовок начинались каждый со своего отступа — левый край рваный, читать
     список невозможно. Видно только на телефоне.

     Карточка остаётся строкой, как на широком экране: картинка слева, текст
     справа. В вертикальном списке это и читается лучше. */
}

/* Стили окна «Все новости» — ниже, в разделе «Окно „Все новости“».

   Здесь был их первый вариант, от окна, которое в июле заменили страницей
   /novosti/. Разметку тогда убрали, а стили остались и продолжали задавать
   .news-all-grid своими значениями. Второй набор правил на те же имена — это
   место, где правка тихо не срабатывает: часть свойств берётся отсюда, часть
   из нового блока, и понять по виду, откуда именно, нельзя. Убрано. */

/* ---------- Страница «Вход / Регистрация» ---------- */
/* Картинка — full-bleed фон на весь экран (никогда не обрезается/не меняет размер
   при переключении вкладок), панель с формой — полупрозрачная стеклянная плашка
   поверх неё справа, уже прежней колонки на ~30%. Панель сама скроллится (100vh,
   overflow-y:auto), а её высота фиксирована, поэтому фон под ней тоже не «дёргается». */
.auth-page { position: relative; height: 100vh; overflow: hidden; background: linear-gradient(135deg,#F8FAFC,#F1EEFF); }
.auth-page-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.auth-page-topbar { position: absolute; top: 28px; left: 28px; z-index: 2; display: flex; align-items: center; gap: 24px; }
.auth-page-logo { position: absolute; bottom: 28px; left: 28px; z-index: 2; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); white-space: nowrap; }
.auth-page-logo-brand { font-style: normal; background: linear-gradient(135deg, #706BFF, #B652FF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.auth-page-panel { position: absolute; top: 0; right: 0; height: 100vh; width: 48%; min-width: 620px; overflow-y: auto; }
/* Колонка, а не просто блок: по ней блок поддержки прижимается к низу панели
   через margin-top: auto, оставаясь при этом в потоке. Прибитый absolute он
   ложился на кнопку — см. замечание 15.08 и правило `.auth-support-sticky`
   ниже.

   min-height: 100% берётся от панели: у неё задана высота 100vh, поэтому
   процент разрешается. Без него колонке не от чего отталкивать блок вниз, и на
   коротком содержимом (выбор роли) он уехал бы вверх, к самому тексту.

   padding-bottom было 96px — им резервировали место под прибитый блок. Место
   больше не нужно: блок сам занимает своё. Оставляем обычный отступ, иначе он
   повиснет в 96px над краем панели. */
.auth-page-inner { max-width: 500px; margin: 0 auto; padding: 84px 48px 24px; display: flex; flex-direction: column; min-height: 100%; }
/* Вкладки и блок поддержки прибиты absolute к самой панели (а не встроены в поток
   контента), поэтому их положение не зависит от того, какой сейчас шаг открыт —
   они не «уезжают» при переключении Войти/Регистрация или E-mail/ЭП. Фон —
   вертикальный градиент-затухание, чтобы скроллящийся контент под ними не резался.
   pointer-events:none на самой полосе — иначе её прозрачные края перехватывают
   hover у карточек роли под ними и вызывают «моргание» ссылки при наведении;
   auto возвращается только самому содержимому (кнопкам/ссылкам). */
.auth-tabs-sticky { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 24px 48px 20px; background: linear-gradient(to bottom, rgba(15,23,42,.32), rgba(15,23,42,0)); pointer-events: none; transform: translateZ(0); backface-visibility: hidden; }
.auth-tabs-sticky .auth-tabs { max-width: 500px; margin: 0 auto; pointer-events: auto; }
/* Блок поддержки прижат к низу, но остаётся в потоке.

   Замечание 15.08: «почему при реге через почту снова скролл появился и это
   наложение текста». Замер: `/registraciya/agent/` в окне 900x800 — кнопка
   «Зарегистрироваться» y 712..756, блок поддержки y 668..800, наложение
   238x39px. Блок был прибит absolute к низу панели, а панель прокручивается:
   форма регистрации выше окна, и её низ приходится ровно на блок.

   11.08 это уже чинили — тем же переводом в поток, но правка лежала внутри
   media (max-width: 768px), то есть спасала только телефон. На 900x800 дефект
   остался. Теперь правило общее, а мобильное ниже по файлу лишь уточняет
   отступы.

   margin-top: auto вместо absolute: пока содержимое короткое, свободное место
   уходит в этот отступ и блок стоит внизу панели ровно как раньше; когда
   содержимое длиннее окна — блок просто идёт следом за ним, и наезжать больше
   не на что.

   Градиент-затухание снят вместе с absolute: он был нужен, чтобы прокручиваемый
   под блоком текст не обрывался резко. Под блоком ничего не проезжает — и
   затухать нечему. */
.auth-support-sticky { margin-top: auto; padding: 20px 48px 4px; pointer-events: none; }
.auth-support-sticky .auth-support { max-width: 500px; margin: 0 auto; pointer-events: none; }
.auth-support-sticky #authSupportLink,
.auth-support-sticky .auth-support-text a { pointer-events: auto; }
@media (max-width: 900px) {
  .auth-page-panel { width: 100%; min-width: 0; }
}
.auth-role-desc { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.auth-role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-role-card { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; cursor: pointer; background: var(--surface); transition: all .15s; font-family: inherit; }
.auth-role-card:hover { border-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-2px); }
.auth-role-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-grad); display: flex; align-items: center; justify-content: center; }
.auth-role-name { font-weight: 700; font-size: .96rem; color: var(--text); }
.auth-role-desc-sm { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.auth-back { background: none; border: none; color: var(--muted); font-size: .85rem; cursor: pointer; display: flex; align-items: center; gap: 4px; margin-bottom: 14px; padding: 0; font-family: inherit; }
.auth-back:hover { color: var(--text); }
.auth-tabs { position: relative; display: flex; gap: 4px; background: #F1F5F9; border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.auth-tab { position: relative; z-index: 1; flex: 1; text-align: center; padding: 9px; border: none; background: none; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .25s; font-family: inherit; }
.auth-tab.active { color: var(--text); }
.auth-tabs-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: left .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1); z-index: 0; }
.auth-method-tabs { display: flex; gap: 18px; margin-bottom: 20px; border-bottom: 1.5px solid var(--border); }
.auth-method { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0 0 10px; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; font-family: inherit; }
.auth-method.active { color: var(--orange); border-color: var(--orange); }
.auth-method-icon { display: inline-flex; align-items: center; }
.auth-method .am-icon-grad { display: none; }
.auth-method.active .am-icon-grey { display: none; }
.auth-method.active .am-icon-grad { display: inline-flex; }
.auth-forgot { align-self: flex-end; font-size: .8rem; color: var(--orange); text-decoration: none; margin-top: -6px; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.auth-consent { font-size: .78rem; color: var(--text2); line-height: 1.45; }
.auth-consent-text { font-size: .82rem; line-height: 1.45; }
.auth-submit { width: 100%; justify-content: center; }
.auth-submit:disabled { opacity: .45; cursor: not-allowed; }
.auth-esign-text { font-size: .86rem; color: var(--text2); line-height: 1.5; margin-bottom: 16px; }
/* Панель ЭП — колонка: сверху чекбокс сертификатов, посередине прокручиваемый список,
   снизу статичный блок с согласием и кнопкой (не «притирается» к чекбоксу сверху). */
.auth-esign-panel { display: flex; flex-direction: column; }
.auth-cert-scroll { max-height: 176px; overflow-y: auto; margin: 6px 0 4px; }
.auth-esign-bottom { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-esign-bottom > *:not(:last-child) { margin-bottom: 16px; }
.auth-cert-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 2px; }
.auth-cert-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); cursor: pointer; transition: border-color .15s, background .15s; }
.auth-cert-item:has(.auth-cert-radio:checked) { border-color: var(--orange); }
.auth-cert-radio { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--orange); }
.auth-cert-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-cert-name { font-size: .85rem; font-weight: 700; }
.auth-cert-meta { font-size: .72rem; color: var(--muted); }
.auth-support { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }
.auth-support-link { font-size: .82rem; color: var(--orange); text-decoration: none; cursor: pointer; }
.auth-support-link:hover { text-decoration: underline; }
.auth-support-text { font-size: .74rem; color: var(--muted); margin-top: 6px; white-space: nowrap; }
@media (max-width: 480px) {
  .auth-support-text { white-space: normal; }
}
.auth-support-text a { color: var(--muted); }
@media (max-width: 480px) {
  .gf-modal { padding: 30px 22px 22px; }
  .gf-modal-actions { flex-direction: column; }
  .auth-role-cards { grid-template-columns: 1fr; }
  /* 48px отступов слева/справа у страницы входа рассчитаны на десктоп/планшет —
     на телефоне (320-400px) это забирает больше половины ширины экрана. */
  .auth-page-inner { padding: 76px 20px 88px; }
  .auth-tabs-sticky, .auth-support-sticky { padding-left: 20px; padding-right: 20px; }
  .auth-page-topbar, .auth-page-logo { left: 16px; }
}

/* Без фоновой плашки — поля и блоки лежат прямо на фотографии: белая полупрозрачная
   обводка по умолчанию, при наведении/фокусе/активности — фирменный градиентный акцент. */
.auth-page-panel .gf-modal-title { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.auth-page-panel .auth-role-desc,
.auth-page-panel .auth-role-desc-sm,
.auth-page-panel .auth-esign-text,
.auth-page-panel .gf-field-label,
.auth-page-panel .auth-consent-text,
.auth-page-panel .auth-support-text,
.auth-page-panel .gf-modal-success-text { color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.auth-page-panel .auth-phone-hint { color: rgba(255,255,255,.5); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.auth-page-panel .gf-modal-success-title { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.auth-page-panel .auth-role-name { color: #fff; }
.auth-page-panel .auth-support-text a { color: #fff; }
.auth-page-panel .auth-back { color: rgba(255,255,255,.85); }
.auth-page-panel .auth-back:hover { color: #fff; }
.auth-page-panel .gf-req { text-shadow: none; }

/* Поля БЕЗ заливки фона и БЕЗ полупрозрачной «молочной» подложки: фон полностью
   отсутствует (никакого rgba-стекла), видна только тонкая рамка-контур. В покое
   контур серо-белый, при фокусе — фирменный градиент (через border-box background,
   т.к. border-color не умеет градиент). Внутренняя область при этом не заливается. */
.auth-page-panel .gf-input,
.auth-page-panel .gf-textarea { background: none; border: none; color: #fff; }
.auth-page-panel .gf-input::placeholder { color: rgba(255,255,255,.6); }
.auth-page-panel .gf-input:focus,
.auth-page-panel .gf-textarea:focus { outline: none; }
/* Рамка поля — не border/фон самого input (это и вызывало «заливку всего поля»
   градиентом), а отдельный ::after поверх обёртки: mask-composite:exclude вырезает
   только тонкое кольцо по контуру, середина остаётся полностью прозрачной в любом
   состоянии — и в покое, и при фокусе. */
.auth-page-panel .gf-field-frame::after,
.auth-page-panel .gf-password-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: rgba(255,255,255,.6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background .15s;
}
.auth-page-panel .gf-field-frame:focus-within::after,
.auth-page-panel .gf-password-wrap:focus-within::after { background: var(--orange-grad); }
/* Автозаполнение браузера красит фон в свой жёлтый/серый — откладываем эту заливку
   практически навсегда через сверхдлинный transition, так поле остаётся без фона. */
.auth-page-panel .gf-input:-webkit-autofill,
.auth-page-panel .gf-input:-webkit-autofill:hover,
.auth-page-panel .gf-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(12,8,32,0.98) inset !important;
  box-shadow: 0 0 0 1000px rgba(12,8,32,0.98) inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
  caret-color: #fff;
}

.auth-page-panel .auth-role-card { position: relative; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.65); backdrop-filter: blur(8px); }
.auth-page-panel .auth-role-card:hover { box-shadow: 0 10px 28px rgba(112,107,255,.3), 0 4px 20px rgba(182,82,255,.25); }
/* Градиентное кольцо поверх карточки, а не в фоне — background-clip-трюк с
   полупрозрачным слоем «протекал» градиентом внутрь карточки, тут же используется
   mask-composite: exclude, который вырезает только тонкую кайму, не трогая заливку. */
.auth-page-panel .auth-role-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--orange-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.auth-page-panel .auth-role-card:hover::after { opacity: 1; }

.auth-page-panel .auth-tabs { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.auth-page-panel .auth-tab { color: rgba(255,255,255,.85); }
.auth-page-panel .auth-tab.active { color: #fff; }
.auth-page-panel .auth-tabs-thumb { background: var(--orange-grad); box-shadow: 0 4px 16px rgba(112,107,255,.45); }

.auth-page-panel .auth-method-tabs { border-bottom-color: rgba(255,255,255,.4); }
.auth-page-panel .auth-method { color: rgba(255,255,255,.75); }
.auth-page-panel .auth-method.active { background: var(--orange-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--orange); }

.auth-page-panel .btn-outline { border-color: rgba(255,255,255,.75); color: #fff; background: rgba(255,255,255,.08); }

.auth-page-panel .gf-check-box { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.15); }
.auth-page-panel .auth-cert-item { border-color: rgba(255,255,255,.4); }
.auth-page-panel .auth-cert-item:has(.auth-cert-radio:checked) { border-color: var(--orange); background: rgba(255,255,255,.08); }
.auth-page-panel .auth-cert-name { color: #fff; }
.auth-page-panel .auth-cert-meta { color: rgba(255,255,255,.7); }
.auth-page-panel .auth-esign-bottom { border-top-color: rgba(255,255,255,.35); }
.auth-page-panel .gf-password-toggle { color: rgba(255,255,255,.75); }
.auth-page-panel .gf-password-toggle:hover { color: #fff; }

.auth-page-panel .auth-support { border-top-color: rgba(255,255,255,.35); }

/* ==================== ДОСТУПНОСТЬ: РАЗМЕР ЗОН НАЖАТИЯ ====================
   Добавлено при переносе в CMS по требованию handoff/RESPONSIVE_AND_ACCESSIBILITY.md
   («~44×44 touch targets»). Внешний вид НЕ меняется: увеличивается только
   область, реагирующая на нажатие, — прозрачным слоем поверх элемента.

   Почему у точек слайдера цель 24, а не 44: точки идут с промежутком 8-10px,
   и зона 44px у каждой перекрыла бы соседние — палец попадал бы не по той
   точке. 24×24 — минимум, допустимый WCAG 2.5.8 (уровень AA), и он влезает
   без перекрытия. Увеличить до 44 можно только вместе с увеличением
   промежутков, а это уже правка дизайна — вынесено в вопросы к дизайнеру. */
.slider-dot { position: relative; }
.slider-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* Иконки мессенджеров: 24-32px по дизайну, промежуток 6px — расширяем зону до
   44px, перекрытия не будет, потому что рядом нет других мелких кнопок. */
.msg-icon { position: relative; }
.msg-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Крестик закрытия модалки — 32px по дизайну.
   ИСПРАВЛЕНО по замечанию «иконку закрыть сделать в корректном расположении»:
   здесь стояло position: relative, и оно перебивало position: absolute из
   базового правила выше. Кнопка выпадала в поток и уезжала к левому верхнему
   углу, налезая на заголовок. Своего position тут не нужно вовсе — absolute из
   базового правила и так создаёт систему координат для ::after. */
.gf-modal-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ==================== ИСПРАВЛЕНИЕ: ПЕРЕПОЛНЕНИЕ НА УЗКИХ ЭКРАНАХ ====================
   Требование handoff/RESPONSIVE_AND_ACCESSIBILITY.md — «No horizontal overflow».
   Проверка в браузере показала, что на 320 и 390 px страница уезжала по
   горизонтали: html.scrollWidth = 624 при экране 320.

   Причина. Таблице банков в калькуляторе задан min-width: 520px, чтобы она
   прокручивалась внутри своего контейнера (см. комментарий выше). Но на узких
   экранах карточка калькулятора превращается в сетку из одной колонки
   grid-template-columns: 1fr, а «1fr» — это minmax(auto, 1fr): минимальный
   размер колонки считается по самому широкому содержимому. Из-за этого 520px
   таблицы растягивали всю колонку, а вместе с ней и форму слева, и страницу.

   Лечение: колонке разрешаем сжиматься (minmax(0, 1fr)) и снимаем
   min-content-ограничение с обёрток. Сама таблица по-прежнему прокручивается
   внутри .calc-result — поведение калькулятора не меняется.

   Отдельно: в эталонном Home V2.html эта же проблема есть (scrollWidth 488 при
   экране 320), а в утверждённом прототипе дизайн-команды её нет.

   ОБНОВЛЕНО. Выяснилось, почему в прототипе проблемы нет: там подключён второй
   файл — assets/css/responsive-fixes.css, целый слой мобильных правок, которого
   в Home V2.html нет. Он перенесён в тему как css/responsive-fixes.css и снимает
   min-content-ограничение сам (min-width: 0 на .calc-card, .calc-form,
   .calc-result-wrap, .calc-result-scroll, .calc-result). Поэтому наше
   собственное лечение здесь убрано как лишнее — остался только этот разбор,
   чтобы причина не потерялась. */

/* ==================== ИСПРАВЛЕНИЕ: СЛУЖЕБНАЯ ССЫЛКА И АДМИН-ПАНЕЛЬ ====================
   1. Ссылка «Перейти к основному содержимому».
      Она нужна для доступности с клавиатуры, но в перенесённом из Drupal
      шаблоне у неё остались классы visually-hidden/focusable, а правил для них
      в этом файле нет — эталонный Home V2.html такой ссылки не имел вообще.
      В результате она рисовалась обычным белым блоком во всю ширину над
      страницей и ломала шапку: шапка у нас position: fixed с прозрачным фоном
      и рассчитана на то, что под ней сразу тёмный хиро.
      Прячем ссылку и показываем только при переходе по ней с клавиатуры.

   2. Админ-панель WordPress.
      Для авторизованного пользователя WordPress добавляет сверху полосу 32px
      (46px на узких экранах) и класс admin-bar на body. Шапка у нас
      зафиксирована на top: 0 и уезжала под эту полосу. Сдвигаем её ровно на
      высоту панели — посетителей сайта это не касается, у них панели нет. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden.focusable:focus,
.visually-hidden.focusable:focus-visible {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: #0F172A;
  color: #fff;
  border-radius: 8px;
  font: 600 14px/1 system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

body.admin-bar .header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* ==================== ПРАВКИ ПО ЗАМЕЧАНИЯМ ТЕСТИРОВАНИЯ (30.07.2026) ====================
   Разбор комментариев Александра Жукова после проверки на тестовом сервере.
   Каждый блок ниже — одно замечание. Внешний вид на десктопе там, где о нём не
   просили, не менялся. */

/* 1. «В разделе AI выровнять кнопки и текст».
   Две карточки — «Агентам» и «Участникам госторгов». Описания у них разной
   длины (одна строка против двух), из-за чего список и кнопка в правой карточке
   уезжали вниз относительно левой.
   Раскладываем карточку подсеткой: строки «иконка / заголовок / описание /
   список / кнопка» becomes общими для обеих карточек, и они выравниваются между
   собой при любой длине текста. Там, где подсетка не поддерживается, работает
   запасной вариант ниже: кнопка прижимается к низу карточки. */
.forwhom-card { display: flex; flex-direction: column; }
.forwhom-card .btn { margin-top: auto; }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    .forwhom-grid { align-items: start; }
    .forwhom-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .forwhom-card .btn { margin-top: 0; align-self: end; }
  }
}

/* 2. «В разделе "Для разработчиков" выровнять по середине кнопки».
   На телефоне две кнопки переносились на разные строки, каждая по ширине своего
   текста, и стояли лесенкой. Делаем их одинаковой ширины и по центру. */
@media (max-width: 768px) {
  .dev-cta { width: 100%; justify-content: center; }
  .dev-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* 3. «В разделе Новости при переключении новость в фокусе должна быть по
   середине, а справа и слева — края предыдущей и следующей».
   Было: карточка прилипала к левому краю (scroll-snap-align: start), сосед
   выглядывал только справа. Стало: карточка занимает всю видимую часть ленты, а
   отступы по 12% с каждой стороны остаются внутри прокручиваемой области —
   именно в них и видны края соседних карточек. */
@media (max-width: 768px) {
  .news-track { padding-left: 12%; padding-right: 12%; }
  .news-card { flex-basis: 100%; scroll-snap-align: center; }
}

/* Иконка у чипа в правом блоке слайда (добавлено по замечанию: «тут же можно
   предусмотреть для Чипов иконки добавлять?»). Отступ появляется только когда
   иконка действительно есть, поэтому чипы без иконки выглядят как раньше. */
.bbr-tag-chip { gap: 7px; }
.bbr-tag-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Одинаковый размер плашек в ленте партнёров (замечание: «если отметить
   Коммерческие торги, блок увеличивается по горизонтали, пропадает унификация
   размера блоков ленты»).

   Было: white-space: nowrap — длинный перечень типов закупок не переносился, и
   плашка растягивалась вширь тем сильнее, чем больше типов отмечено.
   Стало: перечень переносится по строкам внутри плашки, ширина ограничена, а
   высоту лента выравнивает сама — .banks-track это flex-строка, и плашки
   тянутся до высоты самой высокой. То есть выполняется вариант 1 из замечания:
   стал выше один — стали выше все. */
.bank-chip { white-space: normal; width: 216px; min-width: 216px; }
.bank-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bank-chip-info span { display: block; }

/* Фирменная плашка и логотип банка в ленте партнёров (запрос: «предусмотреть
   дополнительно к загрузке логотипа использование фирменного стиля GOODFIN…
   логотип нужно устанавливать для разных блоков отдельно»).
   Размер и заливку задаёт админка, здесь только форма и выравнивание. */
.bank-chip-plate {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-size: .62rem; font-weight: 800;
  letter-spacing: .01em; flex-shrink: 0; line-height: 1;
  padding: 0 3px; text-align: center; overflow: hidden;
}
.bank-chip-logo { border-radius: 50%; object-fit: contain; background: #fff; flex-shrink: 0; }
/* Логотип в калькуляторе — той же формы, что и плашка, иначе строки прыгают. */
.calc-bank-logo-img { border-radius: 50%; object-fit: contain; background: #fff; }

/* Фирменная плашка вместо картинки в карточке новости (запрос: «предусмотреть
   добавление логотипа в фирменном стиле GOODFIN — плашка и текст — без
   загрузки файла»). Размер тот же, что у картинки, чтобы карточки в ленте не
   прыгали по высоте. */
.news-card-plate {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 2rem; letter-spacing: .02em;
  text-align: center; padding: 12px; overflow: hidden;
}

/* ==================== ЗАМЕЧАНИЯ ТЕСТИРОВАНИЯ 30.07.2026 ====================
   Правки по файлу «Lending. Комментарии, вопросы (2)», раздел test.lending. */

/* Калькулятор: заголовок «Стоимость» выровнен вправо — под значения.
   На скриншоте видно, что заголовок стоял по левому краю колонки, а суммы —
   по правому, и они не совпадали. */
.calc-result-hdr span:last-child { text-align: right; }

/* Неактивная кнопка отправки: видно, что нажимать пока нечего.
   Добавлено вместе с проверкой заполненности формы (см. main.js). */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.35);
}

/* ── Страница «не найдено» ───────────────────────────────────────────────────
   Её не было вовсе: на битой ссылке отдавалась лента записей — с виду рабочая
   страница, но не та, за которой человек шёл, и без объяснения. */
.gf-404 { padding-top: calc(var(--header-h) + 40px); }

.gf-404-inner {
  max-width: 640px;
  text-align: center;
}

.gf-404-search {
  display: flex;
  gap: 10px;
  margin: 28px 0 20px;
}

.gf-404-search .gf-input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 999px;
  padding-left: 18px;
}

.gf-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

@media (max-width: 560px) {
  /* На узком экране поле и кнопка в одну строку не помещаются: поле сжимается
     до нечитаемого. Ставим друг под другом. */
  .gf-404-search { flex-direction: column; }
  .gf-404-search .btn { justify-content: center; }
  .gf-404-links .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── «Как это работает»: три шага строка в строку ───────────────────────────
   Замечание заказчика: «блоки "1" и "2" не выровнены по вертикали с блоком
   "3"». Шаги стоят в ряд и выровнены по верхнему краю, но заголовок третьего
   шага длиннее и переносится на вторую строку — из-за этого его описание
   начинается ниже, чем у соседей, а низы карточек расходятся на 27px.

   Делаем строки общими для всех трёх шагов: номер к номеру, значок к значку,
   заголовок к заголовку, описание к описанию — независимо от длины текста. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    .infB3-row { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); align-items: stretch; }

    /* justify-items обязателен. В колонке-флексе шаги центровал
       `align-items: center` из базового правила, но у сетки эта же строчка
       означает уже другую ось — поперечную, то есть вертикаль. По горизонтали
       номер и значок вставали к левому краю колонки, а заголовок с описанием
       оставались посередине своим `text-align`. Ровно это заказчик и увидел:
       «1, 2, 3 — по середине, выровнять текст» (замечание 5 от 13.08). */
    .infB3-item {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      justify-items: center;
      row-gap: 0;
    }

    /* Стрелка между шагами — на строке номеров, как было до перехода на
       подсетку. На строке значка она оказывалась ниже кружков и разрывала ряд
       «1 → 2 → 3» (то же замечание 5: «поднять стрелки — сделать как было
       ранее»).

       align-self: start, а не center: у кружка снизу отступ 18px, он входит в
       высоту строки, и «по середине строки» — это на 9px ниже середины самого
       кружка. К верху строки стрелка встаёт своей высотой в 56px, ровно как
       кружок, и середины совпадают. */
    .infB3-arrow { grid-row: 1; align-self: start; }
  }
}

/* Там, где подсетка не поддерживается (Safari до 16), выравниваем проще: даём
   заголовку высоту двух строк. Описания начинаются на одном уровне, а разница
   в длине самих описаний уже не бросается в глаза. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    .infB3-title { min-height: 2.6em; }
  }
}

/* Сообщение об ошибке под полем. Требование ТЗ «field-linked errors»: оно
   остаётся на экране, а не исчезает как всплывающая подсказка браузера. */
.gf-field-error {
  display: block;
  margin: -6px 0 10px;
  color: #b32d2e;
  font-size: .8rem;
  line-height: 1.35;
}

/* Поле с ошибкой видно и без чтения текста. */
.gf-input[aria-invalid="true"],
input[aria-invalid="true"].gf-input {
  border-color: #b32d2e;
  box-shadow: 0 0 0 3px rgba(179, 45, 46, .14);
}

/* На тёмной панели входа тот же красный не читается — берём светлее. */
.auth-page-panel .gf-field-error { color: #ffb4b4; }

/* ── Окно «Все новости» ──────────────────────────────────────────────────────
   Список всех новостей поверх страницы: поиск, фильтр по темам, переход к
   тексту. Второй вариант той же кнопки — страница /novosti/; чем открывать,
   выбирается в «Разделы главной → Новости». */
/* Размер окна не зависит от того, сколько новостей осталось после фильтра.

   Высота была по содержимому, и окно прыгало: со всеми темами — во весь экран,
   с одной темой и одной новостью — узкая полоска посреди страницы. Человек
   меняет тему и каждый раз заново ищет глазами, где теперь окно и где в нём
   поиск.

   Теперь высота задана, а список внутри прокручивается. 820px — чтобы на
   ноутбуке с экраном 900px оставались поля сверху и снизу; на экранах ниже
   берём всё доступное. */
.news-all-modal {
  max-width: 1100px;
  width: calc(100vw - 32px);
  height: min(calc(100dvh - 32px), 820px);
  display: flex;
  flex-direction: column;
  padding: 22px;
  /* См. .gf-modal-close: отступ крестика считается от этой переменной. Здесь
     кнопка позиционируется отдельным правилом ниже, но переменную держим в
     паре с padding — чтобы отступ не разъехался, если то правило уберут. */
  --gf-modal-pad: 22px;
  --gf-modal-pad-top: 22px;
}

/* У этого окна крестик остаётся на прежнем месте — прижатым к углу.

   Общее правило делает его липким и плавающим: там прокручивается само окно, и
   иначе кнопка уезжает вверх вместе с содержимым. Здесь окно заданной высоты и
   не прокручивается — прокручивается только список внутри, — а float внутри
   flex-контейнера не действует вовсе: кнопка становилась обычным элементом
   колонки и с отрицательным полем ложилась на заголовок «Все новости». */
.news-all-modal .gf-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  float: none;
  margin: 0;
}

.news-all-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-right: 44px;
}

.news-all-title { font-size: 1.35rem; font-weight: 800; margin: 0; }

.news-all-tools {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.news-all-search { min-width: 220px; border-radius: 999px; padding-left: 16px; }

/* Список тем оставался системным <select>: серая рамка 118,118,118 и
   прямоугольник — единственное место окна не в фирменном стиле. Приводим к
   виду поля поиска рядом. Стрелку рисуем сами, иначе браузер поставит свою в
   своём цвете. */
.news-all-topic {
  appearance: none;
  -webkit-appearance: none;
  min-width: 190px;
  padding: 11px 38px 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23706BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  font-size: .92rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.news-all-topic:hover { border-color: #B0ADFF; }

/* Ширину задаём и обёртке фирменного списка, а не только родному.

   Родной <select> остаётся в разметке источником правды, но прячется — поверх
   него скрипт строит свой список. min-width: 190px висел на родном, обёртка его
   не переняла и сжалась до 123px по своей кнопке. Пункты «Банки-партнёры»,
   «Продукты и лимиты» и «Скорость и сервис» переносились на две строки, и
   список выглядел вдвое выше нужного. */
.news-all-tools .gf-select { min-width: 200px; }

.news-all-topic:focus-visible {
  outline: none;
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .16);
}
.news-all-count { margin: 12px 0 10px; font-size: .82rem; color: var(--muted); }

.news-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  /* Три строки, и каждая нужна.

     align-content: start — иначе при одной-двух карточках сетка растягивает их
     на всю освободившуюся высоту, и карточка выходит вдвое выше соседей из
     полного списка.

     grid-auto-rows: min-content — иначе на узком экране ряды делят между собой
     заданную высоту окна вместо того, чтобы расти по содержимому. Карточка
     сжималась до 60px при содержимом в 269, и от неё оставалась полоска: у
     карточки overflow: hidden, поэтому её наименьший размер как элемента сетки
     равен нулю и ряду ничто не мешает её схлопнуть. На широком экране этого не
     видно — там высоты хватает, и я это пропустил.

     flex: 1 и min-height: 0 — чтобы список занимал остаток окна и прокручивался
     внутри, а не растягивал окно. */
  align-content: start;
  grid-auto-rows: min-content;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: #706BFF transparent;
}

.news-all-grid::-webkit-scrollbar { width: 6px; }
.news-all-grid::-webkit-scrollbar-track { background: transparent; }

.news-all-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #706BFF, #B652FF);
  border-radius: 50px;
}

/* Карточка — кнопка: по ней жмут, значит она должна быть доступна с клавиатуры
   и объявляться как кнопка, а не как безымянный блок. */
.news-all-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.news-all-card:hover,
.news-all-card:focus-visible {
  outline: none;
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .16), var(--shadow-md);
  transform: translateY(-2px);
}

.news-all-card-img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  flex-shrink: 0;
}

.news-all-card-body { display: block; padding: 14px 16px 16px; }
.news-all-card-date { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.news-all-card-title { display: block; font-size: .98rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; color: var(--text); }
.news-all-card-desc { display: block; font-size: .84rem; line-height: 1.5; color: var(--text2); }

.news-all-empty { margin: 24px 0 8px; color: var(--muted); }

@media (max-width: 640px) {
  .news-all-modal { padding: 18px 14px; --gf-modal-pad: 14px; --gf-modal-pad-top: 18px; }

  /* Поиск и фильтр в строку не помещаются: поле сжимается до нечитаемого. */
  .news-all-tools { width: 100%; margin-left: 0; }
  .news-all-search { flex: 1 1 100%; min-width: 0; }
  .news-all-topic { flex: 1 1 100%; }
  .news-all-card-img { height: 108px; }
}

/* ── Новости: фирменный контур на фокусе ──────────────────────────────────── */

/* Здесь стояла фирменная полоса прокрутки ленты новостей — её вернули, чтобы
   было видно, что список длиннее экрана. Снята 13.08 по замечанию 1: «в двух
   местах переключение новостей, оставить только в одном месте <>».

   Вторым местом и была эта полоса: Chrome под Windows рисует у неё кнопки со
   стрелками по краям, и рядом с парой ‹ › под лентой их получалось две.
   Полосы на широком экране больше нет вовсе — лента там не прокручивается
   (см. раздел «Правки от 13.08.2026» в конце файла). На телефоне лента
   листается пальцем, но полосу система там и не рисовала. */

/* Фокус — фирменным контуром, а не системной синей рамкой. Отдельно от
   :hover: мышью его не видно, а с клавиатуры это единственный ориентир. */
.news-card:focus-visible,
.news-grid-card:focus-visible,
.news-thumb:focus-visible,
.news-pager-item:focus-visible {
  outline: none;
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .28);
}

/* Наведение на карточку в ленте и в окне — тот же фирменный контур. */
.news-grid-card { transition: border-color .2s, box-shadow .2s, transform .2s; }

.news-grid-card:hover {
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .12), var(--shadow-md);
}

/* ── Окно новости: фирменная прокрутка (замечание 1.9 от 04.08.2026) ──────── */

/* Прокручиваются две области — сам текст новости слева и список новостей
   справа. Полосы у них были системные: серые, разной толщины в разных
   браузерах и заметно шире фирменной полосы калькулятора, где такая уже
   сделана. Приводим к одному виду. */
.news-detail-main,
.news-detail-thumbs {
  scrollbar-width: thin;
  scrollbar-color: #706BFF transparent;
}

.news-detail-main::-webkit-scrollbar,
.news-detail-thumbs::-webkit-scrollbar { width: 6px; height: 6px; }

.news-detail-main::-webkit-scrollbar-track,
.news-detail-thumbs::-webkit-scrollbar-track { background: transparent; }

.news-detail-main::-webkit-scrollbar-thumb,
.news-detail-thumbs::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #706BFF, #B652FF);
  border-radius: 50px;
}

.news-detail-main::-webkit-scrollbar-thumb:hover,
.news-detail-thumbs::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }

/* Третья прокрутка в том же окне — выпадающий список тем внутри навигатора
   (.gf-select-list, max-height: 260px). Замечание 1.9 говорит «по навигатору
   новостей», а список тем — его часть, и полоса у него оставалась системной.
   Наследованием это не лечится: scrollbar-color наследуется, а
   ::-webkit-scrollbar — нет. Правило общее для всех фирменных списков: тот же
   список стоит в калькуляторе, и разные полосы у одного элемента в двух местах
   выглядели бы как два разных элемента. */
.gf-select-list {
  scrollbar-width: thin;
  scrollbar-color: #706BFF transparent;
}

.gf-select-list::-webkit-scrollbar { width: 6px; height: 6px; }
.gf-select-list::-webkit-scrollbar-track { background: transparent; }

.gf-select-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #706BFF, #B652FF);
  border-radius: 50px;
}

.gf-select-list::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }

/* У сетки окна «Все новости» из пяти объявлений набора не было последнего —
   палец не темнел при наведении, в отличие от остальных четырёх полос сайта. */
.news-all-grid::-webkit-scrollbar-thumb:hover { background: var(--orange-dark); }

/* ── Калькулятор: правки 04.08.2026 ───────────────────────────────────────── */

/* 1.5 «Сумма гарантии» и «Срок, дней» — овалом, как остальные поля сайта. */
.calc-input { border-radius: 999px; padding-left: 16px; padding-right: 16px; }

/* 1.3 «Списки „Вид гарантии“ и „Закон“ — овалом, и в покое, и открытыми, и
   подсветка выбранного значения овалом» — теперь это общий вид всех фирменных
   списков, задан в разделе «Фирменные выпадающие списки». Здесь правил под
   #calculator больше нет: пока они были только тут, фильтры тем в окнах новостей
   оставались прямоугольными, и рядом с калькулятором это выглядело как два
   разных набора элементов. */

/* 1.4 Название банка, стоимость и бейджи крупнее: на этой таблице человек и
   принимает решение, а читалась она мельче всего остального на странице. */
.calc-bank-name { font-size: 1rem; }
.calc-bank-cost { font-size: 1.08rem; }
/* Боковой отступ убран 13.08 вместе с подложкой (замечание 7): без фона он
   отбивал бейдж от левого края колонки, а соседняя строка «КВ агенту»
   начинается вплотную — надписи стояли лесенкой. */
.calc-bank-badge { font-size: .72rem; padding: 4px 0; }
.calc-bank-kv { font-size: .74rem; }
.calc-result-hdr { font-size: .74rem; }

/* 1.6 «Аванс» и «Доставка оригинала» — переключатели, а не галки.
   Сам <input type=checkbox> остаётся: на нём держится расчёт, меняется только
   вид. Поэтому и разметка, и скрипт калькулятора не тронуты. */
.gf-switch-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Сам переключатель 24px высотой, а строка целиком — не меньше 40: она и
     есть цель нажатия, по ней жмут пальцем. Без этого строка была ровно по
     высоте переключателя, и промахнуться было легко. */
  min-height: 40px;
  padding: 4px 0;
  cursor: pointer;
  font-size: .85rem;
  user-select: none;
}

.gf-switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.gf-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #E2E8F0;
  transition: background .18s ease;
}

.gf-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
  transition: transform .18s ease;
}

.gf-switch-row input:checked + .gf-switch { background: var(--orange-grad); }
.gf-switch-row input:checked + .gf-switch::after { transform: translateX(20px); }

/* Обводка по фокусу — с клавиатуры видно, где ты находишься. */
.gf-switch-row input:focus-visible + .gf-switch {
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .28);
}

/* ── Мобильный экран входа и регистрации (замечания 30.07.2026) ───────────── */

/* «Из формы входа/регистрации нет возврата на сайт».
   Кнопка «На сайт» есть, но на узком экране уезжала за пределы видимой области
   вместе с верхней панелью. Закрепляем её поверх экрана — она всегда под рукой,
   на каком бы шаге формы человек ни находился. */
@media (max-width: 768px) {
  .auth-page-topbar {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 30;
  }

  .auth-page-back {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
  }

  /* «Можно убрать в мобильной версии на входе/регистрации текст
     "GOODFIN — кабинет", чтобы не перекрывал элементы» — убираем. */
  .auth-page-logo { display: none; }

  /* «Таблетка вкладки "Войти" с какой-то полу-окантовкой по контуру».
     Это тень бегунка: на светлом фоне она читается как объём, а на тёмной
     панели входа — как незамкнутая рамка вокруг половины таблетки. */
  .auth-page-panel .auth-tabs-thumb {
    box-shadow: none;
  }

  /* «Кнопка войти прямоугольник с круглёнными углами — должна быть овальная».
     Приводим кнопки формы входа и кнопку в выезжающем меню к той же овальной
     форме, что и остальные кнопки сайта. */
  .auth-submit,
  .mobile-nav .btn,
  .auth-page-panel .btn {
    border-radius: 999px;
  }

  /* Кнопка «На сайт» и вкладки «Войти / Регистрация» — одним рядом.

     Замечание 2.1 от 11.08: «смотри „На сайт“ где расположено — можно просто в
     веб мобильном сделать кнопкой текстовой „На сайт“ на разделах „Войти“,
     „Регистрация“».

     Здесь раньше стояло `padding-top: 64px` — вкладки опускались под кнопку. Эта
     правка помогала ровно в одном положении: пока панель не прокручена. Кнопка
     position: fixed (см. .auth-page-topbar выше), а полоса вкладок —
     position: absolute внутри скроллящейся панели, поэтому при прокрутке вкладки
     проезжают ровно под кнопкой. Замер на стенде: наложение начинается с 20px
     прокрутки и на 60px достигает 76x44px, то есть кнопка накрывает вкладку
     «Войти» целиком по высоте. Накрывает полупрозрачно (фон кнопки
     rgba(15,23,42,.55)), из-за чего сквозь неё читается слово «Войти» — это и
     видно на снимке заказчика. Одинаково на 390, 320 и 360px.

     Поэтому прибиваем к экрану и полосу вкладок: теперь кнопка и вкладки не
     двигаются оба, и проезжать друг под другом им нечем. Слева освобождаем место
     ровно под кнопку — 12 (её отступ) + 84 (её ширина) + 8 (просвет).

     Фон полосы делаем плотнее и с размытием: под фиксированным рядом проходит
     содержимое, и на прежнем градиенте .32 оно просвечивало сквозь вкладки. */
  .auth-tabs-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
    padding-left: 104px;
    padding-bottom: 14px;
    background: linear-gradient(to bottom, rgba(15,23,42,.88), rgba(15,23,42,.66) 72%, rgba(15,23,42,0));
    backdrop-filter: blur(8px);
  }

  /* `max-width: 500px` с `margin: 0 auto` центрировал вкладки по всей ширине
     полосы — с освобождённым слева местом они уехали бы правее середины. */
  .auth-tabs-sticky .auth-tabs {
    margin: 0;
  }

  /* Содержимое начинается под фиксированным рядом: 10 сверху + 44 высота
     вкладок + 14 снизу = 68, плюс просвет. */
  .auth-page-inner {
    padding-top: 84px;
    padding-bottom: 16px;
  }

  /* Подпись поддержки — одной строкой.

     Замечание от 11.08: «при реге или входе вот снизу текст этот в мобилке в одну
     строку сделай». Строка «Техническая поддержка: support@goodfin.ru ·
     8 (800) 511-05-86» — это 55 знаков, в 280px (320px экран минус отступы) она не
     влезает ни при каком читаемом кегле и рвётся на две-три. Убираем на телефоне
     только подпись: адрес и телефон — то, ради чего блок нужен, — остаются
     целиком и встают в одну строку (37 знаков). На настольном подпись на месте.

     nowrap здесь обязателен: без него строка всё равно переносится по разделителю
     «·», когда телефон в горизонтальном положении даёт другую ширину. */
  .auth-support-label {
    display: none;
  }

  .auth-support-text {
    white-space: nowrap;
    font-size: .8rem;
    margin-top: 2px;
  }

  /* Просветы вокруг блока поддержки — плотнее.

     Замер до правки: блок занимал 141px из 664 на экране телефона, при том что
     полезного текста в нём две строки. Складывалось из 24 отступа сверху, 20
     внутреннего сверху, 18 у самой черты, 6 между строками и 8 снизу. Числа
     подобраны под настольную раскладку, где панель высотой во весь экран.
     Убираем примерно по трети с каждого, черту и порядок не трогаем. */
  .auth-support {
    margin-top: 14px;
    padding-top: 12px;
  }

  /* Блок поддержки встаёт в конец содержимого, а не поверх него.
     Прибитый к низу панели, он ложился на согласие и на кнопку отправки:
     рисовался он под короткое окно входа, а форма вопроса заметно длиннее, и
     на телефоне её низ приходился ровно на него.

     Отступы здесь же, одним правилом: раньше их задавали в двух местах, и правка
     просветов из соседнего блока молча проигрывала этому по порядку в файле. */
  .auth-support-sticky {
    position: static;
    margin-top: 14px;
    padding-top: 10px;
    padding-bottom: 6px;
    background: none;
  }
}

/* ── Выезжающее меню: телефон и мессенджеры ───────────────────────────────── */

/* «В меню гамбургер нет иконок мессенджеров и номера телефона».
   На узких экранах шапка их прячет, и позвонить было неоткуда. */
.mobile-nav-contacts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.mobile-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.mobile-nav-messengers {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mobile-nav-messengers .msg-icon {
  display: inline-flex;
  padding: 6px;
}

/* ── Низ слайдера на телефоне ─────────────────────────────────────────────── */

/* «Криво чипы расположены от чекбоксов переключения баннеров… кнопки заходят на
   чипы… кнопка "Все новости" должна быть по горизонтальному центру чекбоксов».

   Было: нижняя панель с точками и кнопкой «Все новости» лежит поверх контента,
   и на узком экране накрывала чипы и кнопку слайда. Плюс точки и кнопка стояли
   на разной высоте.

   Стало: содержимому слайда добавлен нижний отступ ровно под панель, а сама
   панель растянута по ширине — точки слева, кнопка справа, обе по одной
   горизонтали. */
@media (max-width: 768px) {
  .bbr-content-wrap { padding-bottom: 86px; }

  /* 24px, а не 16: столько же у содержимого слайда на этой ширине
     (.bbr-content-wrap, padding 110px 24px 40px). При 16 левый край точек не
     совпадал с левым краем чипов на восемь пикселей — заказчик написал «криво
     расположены чипы от чекбоксов переключения баннеров». Ниже 560px оба
     значения становятся 18px, это задано в responsive-fixes.css. */
  .bbr-bottom-bar {
    left: 24px;
    right: 24px;
    align-items: center;
    justify-content: space-between;
  }

  .bbr-dots { align-items: center; }
  .bbr-all-news { white-space: nowrap; }
}

/* ── Фирменные выпадающие списки калькулятора ─────────────────────────────── */

/* «Выпадающие списки "Продукт", "Федеральный закон" список сделать в фирменном
   стиле». Штатный select рисует системную стрелку. Меняем
   стрелку на фирменную и подсвечиваем поле цветом бренда — сам список остаётся
   родным, поэтому он по-прежнему нормально работает с клавиатуры и на телефоне
   открывается привычным барабаном. */
.calc-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23706BFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  transition: border-color .15s, box-shadow .15s;
}

.calc-select:hover { border-color: #B0ADFF; }

.calc-select:focus {
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .16);
}

/* ── Переход к разделу по ссылке из меню ──────────────────────────────────── */

/* «Раздел "Для разработчиков" открывает при переходе из меню не по середине —
   выше». Шапка закреплена сверху и накрывает начало раздела, поэтому браузер
   подводит якорь под неё.

   Отступ задаётся ровно один раз — у html, через scroll-padding-top. Раньше их
   было два: и здесь у каждого раздела scroll-margin-top: 88px, и у html
   scroll-padding-top: 84px. Браузер складывает оба, и после перехода по
   ссылке раздел вставал на 172 px от верха вместо 84: под шапкой зияла
   полоса пустоты в целых восемьдесят восемь пикселей. Ничего не перекрывалось,
   поэтому и не бросалось в глаза, — но переход выглядел неточным.

   Величина считается от той же переменной, что и высота шапки: поменяется
   шапка — поменяется и отступ, разъехаться им больше нечем. */
:target {
  scroll-margin-top: 0;
}

/* Пока открыт экран входа, страница под ним не прокручивается: он и так ровно
   по размеру окна, а вторая полоса прокрутки рядом с прокруткой формы выглядела
   как ошибка (замечание «форма регистрации — убрать скрол»).
   Класс на body ставит и снимает showAuthView()/hideAuthView() в main.js. */
body.gf-auth-open { overflow: hidden; }

/* 100dvh вместо 100vh: на телефоне 100vh считается по окну БЕЗ адресной строки,
   поэтому экран входа оказывался выше видимой области и появлялась прокрутка. */
.auth-page { height: 100dvh; }
.auth-page-panel { height: 100dvh; }

/* ── Страница «Все новости» ───────────────────────────────────────────────────
   Заменила модальное окно: у страницы есть свой адрес, шапка, футер и поиск,
   на новость можно дать ссылку и вернуться кнопкой браузера (замечание
   «переводим модальное окно "Все новости" в одну страницу»). */
.news-page { padding-top: 40px; }
.news-page-back { display: inline-block; margin-bottom: 18px; }

.news-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 22px;
}

.news-search-input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 13px 18px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
}

.news-search-input:focus {
  outline: none;
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .16);
}

.news-search-summary { color: var(--muted); margin: -8px 0 22px; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Карточка в сетке: та же, что в ленте на главной, но без фиксированной ширины
   и с явным откликом на наведение и на фокус с клавиатуры — по замечанию
   «фокус на активной новости и фокус при наведении на новость». */
.news-grid-card { flex: none; display: flex; flex-direction: column; }
.news-grid-card .news-card-body { flex: 1; }

.news-grid-card:focus-visible {
  outline: 3px solid rgba(112, 107, 255, .45);
  outline-offset: 3px;
  border-color: #706BFF;
}

.news-pager {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}

.news-pager-item {
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text2);
  font-weight: 600;
}

.news-pager-item:hover { border-color: #706BFF; color: var(--text); }
.news-pager-item.is-current { background: #706BFF; border-color: #706BFF; color: #fff; }
.news-pager-item.is-gap { border-color: transparent; }

@media (max-width: 560px) {
  .news-search-btn { flex: 1 1 100%; justify-content: center; }
}

/* Ссылки на правовые документы под галочкой согласия. Раньше это были
   неактивные подписи, похожие на ссылки; теперь настоящие ссылки, которые
   подставляются из раздела «Правовые документы» (см. поле «Где показывать»). */
.gf-consent-links a { text-decoration: underline; text-underline-offset: 2px; }

/* Бейджи «Дешевле Клиенту» и «Выгодно Агенту» — в одном столбце, друг под
   другом. Раньше под них было отведено два отдельных столбца таблицы: у банка с
   одним бейджем половина строки пустовала, а два столбца читались как две
   разные характеристики. У одного банка бейджей может быть и два сразу —
   поэтому колонка, а не «или-или». */
.calc-bank-flags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* На узких экранах строка превращается в карточку, и слой мобильных правок
   дизайн-команды раскладывает бейджи в ряд. Оставляем колонку и там — просили
   «друг под другом», а в карточке два бейджа в ряд всё равно переносятся. */
@media (max-width: 768px) {
  .calc-bank-row .calc-bank-flags {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* ── Окно открытой новости: две колонки ──────────────────────────────────────
   По замечанию: «модальное окно сделай больше, чтобы новость была сразу видна
   как текст, а справа был бы скролл, с поиском и выбором новостей, так же
   активбар — какая новость выбрана, и фильтры».

   Было: узкое окно, слева картинка с тизером, справа полоска миниатюр без
   поиска и без отметки текущей. Стало: широкое окно, слева читается новость,
   справа список со своей прокруткой, поиском и фильтром по темам. */
.news-detail-modal {
  max-width: 1320px;
  width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 20px;
  /* Рядом с padding — та же величина переменной: от неё считается отступ
     крестика (см. .gf-modal-close). Без этой пары крестик отходил от края на
     4px вместо 16px. */
  --gf-modal-pad: 20px;
  --gf-modal-pad-top: 20px;
}

.news-detail-body {
  display: grid;
  /* Правая колонка фиксированной ширины — всё остальное отдаём самой новости.
     Замечание: «покомпактнее, чтобы новости занимали бОльшую площадь». */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  min-height: 0;
}

/* Обе колонки прокручиваются сами, а не растягивают окно. */
.news-detail-main,
.news-detail-side {
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  min-width: 0;
}

/* Замечание заказчика: «почему ты обрезал список новостей? почему они не до
   конца модалки».

   Список упирался в max-height: 460px — потолок из первой версии окна, когда
   оно было вдвое ниже. Правая колонка кончалась на 556 px при окне до 872: под
   ней оставалось больше трёхсот пикселей пустоты, а список при этом
   прокручивался. Выглядело так, будто новости обрезали.

   Теперь высоту задаёт само окно: колонки тянутся на всю строку сетки
   (stretch), а список забирает остаток после поиска и фильтра. Прокручивается
   он же — колонка стоит на месте, поиск остаётся на виду. */
.news-detail-body { align-items: stretch; }

.news-detail-side {
  display: flex;
  flex-direction: column;
  /* Прокрутку отдаём списку внутри, иначе поиск уезжал бы вместе с ним. */
  overflow: hidden;
}

.news-detail-thumbs {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

/* Картинки новостей грузят широкими, 16:9. Раньше главной задавалась
   фиксированная высота, а миниатюрам — пропорция 7:5: кадр резался поперёк, и
   от снимка оставалась случайная полоса. Теперь обе держат пропорцию исходника
   и обрезаются только по краям, если места меньше.

   Размер задаём двумя потолками сразу, а высоту и ширину оставляем auto: тогда
   картинка сама садится в меньший из них, сохраняя пропорцию, и не обрезается
   вовсе. Потолок по высоте нужен — во всю ширину колонки снимок выходил
   900×506 и выдавливал заголовок с текстом за нижний край окна. */
.news-detail-img {
  max-width: 100%;
  max-height: 42vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto 16px;
  background: var(--bg);
}

/* Замечание заказчика: «где дата и тема — выровнять бы их».

   Дата и тема стоят в одной строке, но дата тянула за собой margin-bottom: 8px
   от той версии, где она была отдельной строкой над заголовком. В флексе с
   выравниванием по центру этот отступ смещал её вверх на 4 px относительно
   темы. Размеры шрифта тоже разошлись: .8rem против .78rem.

   Выравниваем по базовой линии и задаём обеим один размер — тогда буквы стоят
   на одной строке, а не «примерно рядом». */
.news-detail-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.news-detail-meta .news-detail-date,
.news-detail-meta .news-detail-topics {
  font-size: .8rem;
  line-height: 1.2;
  margin: 0;
}

.news-detail-topics { color: #706BFF; font-weight: 700; }
.news-detail-title { font-size: 1.45rem; line-height: 1.25; margin-bottom: 12px; }
.news-detail-desc { color: var(--text2); font-size: .95rem; line-height: 1.65; white-space: pre-line; }

/* ── Правая колонка: поиск, фильтр, список ── */
.news-detail-side { padding-left: 4px; }

.news-side-tools {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-side-search,
.news-side-topic {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  background: var(--surface);
}

.news-side-search:focus,
.news-side-topic:focus {
  outline: none;
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .16);
}

.news-side-empty { color: var(--muted); font-size: .85rem; margin: 6px 0; }

.news-detail-thumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-thumb {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}

.news-thumb:hover { border-color: #B0ADFF; }

/* Отметка текущей новости — не только цветом рамки, но и полосой слева:
   на неё смотрят в первую очередь, и она видна даже при беглом взгляде. */
.news-thumb.is-current {
  border-color: #706BFF;
  background: #F5F4FF;
  box-shadow: inset 3px 0 0 #706BFF;
}

.news-thumb img,
.news-thumb-plate {
  width: 96px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg);
}

.news-thumb-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
}

.news-thumb-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-thumb-date { font-size: .7rem; color: var(--muted); font-weight: 600; }
.news-thumb-title { font-size: .82rem; font-weight: 600; color: var(--text); line-height: 1.3; }

@media (max-width: 900px) {
  /* На узком экране колонки встают друг под друга: список новостей уезжает под
     текст, а не сжимается в нечитаемую полоску. */
  .news-detail-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .news-detail-main,
  .news-detail-side { max-height: none; overflow: visible; }
  .news-detail-modal { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px 18px; --gf-modal-pad: 18px; --gf-modal-pad-top: 22px; }
  /* Список под текстом растёт без предела: на шести новостях это ещё терпимо,
     на полусотне окно превратится в километровую ленту, и до кнопок под
     новостью не добраться. Отдаём списку половину экрана со своей прокруткой. */
  .news-detail-thumbs { max-height: 52vh; overflow-y: auto; }
  /* Фиксированную высоту не возвращаем: на узком экране колонка и так узкая,
     пропорция 16:9 даёт нормальный кадр сама. */
}

/* ── Правки по замечаниям 31.07.2026 ──────────────────────────────────────── */

/* Крестик закрытия перекрывался полем поиска в окне новости: липкая панель
   списка имеет z-index, а у кнопки его не было. Поднимаем кнопку над всем
   содержимым окна и освобождаем ей место справа от поиска — иначе она садится
   прямо на поле. */
.gf-modal-close { z-index: 5; }
/* Место справа под крестик закрытия: воронка стоит вплотную к нему. */
.news-detail-side .news-side-tools { padding-right: 56px; }

/* ── Фирменный выпадающий список ─────────────────────────────────────────────
   Замечание: «при выборе со ВСЕХ даунбаров должна быть фирменная цветовая
   гамма, а не дефолт синий». Список вариантов штатного select рисует
   операционная система, и её синюю подсветку стилями не перекрыть — поэтому
   поверх строится свой (см. main.js). Сам select остаётся в разметке и
   продолжает быть источником значения. */
.gf-select { position: relative; }

/* Настоящий select прячем от глаз, но не от программ чтения экрана и не от
   форм: он по-прежнему хранит значение и шлёт событие change. */
.gf-select > select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gf-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 12px 18px;
  border: 1.5px solid var(--border);
  /* Овал — общий вид фирменных списков, а не особенность калькулятора.
     Раньше овальными были только списки калькулятора: правила лежали под
     #calculator. Остальные — фильтр тем в окне «Все новости» и в окне
     новости — оставались прямоугольными, и рядом это читалось как два разных
     набора элементов. Держим один вид здесь, чтобы следующий список получил
     его сам, а не ждал ещё одного правила под свой раздел. */
  border-radius: 999px;
  background: var(--surface);
  font-family: inherit;
  font-size: .92rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}

.gf-select-btn::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23706BFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px;
  transition: transform .18s;
}

.gf-select.is-open .gf-select-btn::after { transform: rotate(180deg); }

.gf-select-btn:hover { border-color: #B0ADFF; }

.gf-select-btn:focus-visible,
.gf-select.is-open .gf-select-btn {
  outline: none;
  border-color: #706BFF;
  box-shadow: 0 0 0 3px rgba(112, 107, 255, .16);
}

.gf-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  border: 1.5px solid #706BFF;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.gf-select-option {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
}

.gf-select-option:hover { background: #F1EEFF; }

/* Выбранный пункт — фирменным градиентом вместо системного синего. */
.gf-select-option.is-selected {
  background: linear-gradient(135deg, #706BFF, #B652FF);
  color: #fff;
  font-weight: 600;
}

/* В окне новости список тем уже, поэтому кнопка компактнее. */
.news-side-topic + .gf-select-btn,
.gf-select .gf-select-btn.is-compact { padding: 10px 14px; font-size: .88rem; }

/* ── Калькулятор: больше места под результат ─────────────────────────────────
   Замечание: «мб калькулятор чуть улучшить? чтоб больше был, чутка уменьшить мб
   сайдбар». Левая колонка с полями раньше занимала треть ширины, хотя в ней
   всего четыре поля и две галочки. Отдаём место таблице банков — ради неё
   калькулятор и открывают. */
@media (min-width: 993px) {
  /* Колонка полей была 260px при общей ширине карточки 1160px. Сужаем её до
     220px и расширяем саму карточку — таблица банков получает заметно больше
     места, а полям его и не требовалось. */
  .calc-card { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; max-width: 1280px; }
  /* Видно на две строки банков больше — раньше список обрывался на четвёртой. */
  .calc-result { max-height: 520px; }
}

/* Длинный текст новости сворачивается — окно не превращается в простыню.
   Разворачивается кнопкой «Читать полностью». */
.news-detail-desc {
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-detail-desc.is-expanded {
  display: block;
  overflow: visible;
}

.news-detail-more {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: #706BFF;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}

.news-detail-more:hover { text-decoration: underline; }

.news-detail-actions {
  display: flex;
  /* По центру, а не растяжкой: иначе любой вертикальный отступ у одной из
     кнопок делает её ниже соседней. На этом и погорела ссылка «Открыть
     страницу новости» — у неё оставался margin-top от прежней раскладки,
     когда она стояла под текстом одна. */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Окно новости компактнее: поля и списки в правой колонке ниже, текст новости
   крупнее — под него и освобождали место. */
.news-detail-side .news-side-search,
.news-detail-side .gf-select-btn { padding: 8px 12px; font-size: .85rem; }
.news-detail-side .news-side-tools { gap: 6px; padding-bottom: 8px; }
.news-detail-title { font-size: 1.55rem; margin-bottom: 10px; }
.news-detail-desc { font-size: 1rem; -webkit-line-clamp: 14; }
.news-thumb-title { font-size: .8rem; }

/* ── Свой раздел, заведённый в админке ───────────────────────────────────────
   Оформление намеренно повторяет остальные блоки сайта: заголовок, текст и
   кнопки те же, что везде, поэтому добавленный редактором раздел не выбивается
   из вёрстки. Отличаются только раскладка и фон — их выбирают в админке. */
.gf-custom-inner { display: grid; gap: 32px; align-items: center; }
.gf-custom-center .gf-custom-inner { text-align: center; justify-items: center; }
.gf-custom-center .gf-custom-body { max-width: 720px; margin: 0 auto; }

@media (min-width: 861px) {
  .gf-custom-left .gf-custom-inner,
  .gf-custom-right .gf-custom-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gf-custom-right .gf-custom-text { order: 2; }
}

.gf-custom-body { color: var(--text2); font-size: .98rem; line-height: 1.65; }
.gf-custom-body p { margin-bottom: 12px; }

.gf-custom-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.gf-custom-center .gf-custom-actions { justify-content: center; }

.gf-custom-media img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }

.gf-custom-grey { background: var(--bg); }

/* На градиенте текст белый — иначе тёмный по тёмному не читается. */
.gf-custom-gradient { background: linear-gradient(135deg, #706BFF, #B652FF); }
.gf-custom-gradient .section-title,
.gf-custom-gradient .section-label,
.gf-custom-gradient .gf-custom-body { color: #fff; }
.gf-custom-gradient .gf-custom-body a { color: #fff; text-decoration: underline; }

/* ── Поиск и фильтры в окне новости: одна компактная строка ──────────────────
   Замечание: «чтобы меньше места занимало строка поиска, фильтры — важнее,
   чтобы сам факт был поиска новостей, крупные блоки новостей. Вместо "фильтры"
   иконку воронки, туда же закинуть всё».

   Поиск и воронка стоят в одну строку; список тем раскрывается по воронке и
   места в свёрнутом виде не занимает. Освободившееся отдано карточкам. */
.news-detail-side .news-side-tools {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
}

.news-detail-side .news-side-search { flex: 1 1 auto; min-width: 0; }

.news-side-filter {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
}

.news-side-filter:hover { border-color: #B0ADFF; color: var(--text); }

.news-side-filter.is-open {
  border-color: #706BFF;
  color: #706BFF;
  background: #F5F4FF;
}

/* Точка на воронке — единственный признак, что список отфильтрован.
   Без неё короткий список читался бы как «новостей мало». */
.news-side-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B652FF;
  box-shadow: 0 0 0 2px var(--surface);
}

.news-side-filters { padding: 0 0 10px; }

/* Карточки новостей крупнее: их и пришли читать. */
.news-thumb-date { font-size: .74rem; }
.news-thumb-title { font-size: .92rem; line-height: 1.35; }

/* ── Аккордеон FAQ: раскрытие не должно дёргать страницу ──────────────────── */

/* Жалоба: «когда открываем ЧаВо — сайт сдвигается и дёргается».
   Причина в том, как была сделана анимация: высота ответа гналась от max-height 0
   до max-height 300px. Так делают часто, но у приёма два изъяна.

   Первый — рывок. Ответ занимает, скажем, 44 px, а потолок едет до 300 px: первые
   15% времени высота растёт, остальные 85% анимируется невидимое число. Открытие
   выглядит как щелчок, а закрытие начинается с паузы — это и есть «дёргается».

   Второй — потеря текста. Ответ выше 300 px просто обрезался: на телефоне,
   где строки переносятся чаще, один из вопросов терял кусок ответа
   (видно 300 px из 314 px). Никакого предупреждения при этом не было.

   Сетка из одной строки решает оба: 0fr → 1fr — это переход ровно до высоты
   содержимого, какой бы она ни была. Скорость постоянная, потолка нет. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  /* max-height остаётся для браузеров, которые не умеют анимировать 0fr → 1fr:
     там ответ просто раскроется без плавности, но не обрежется. */
  max-height: none;
  overflow: hidden;
  transition: grid-template-rows .28s ease;
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  max-height: none;
}

/* Внутренняя обёртка обязана уметь сжиматься до нуля, иначе строка сетки не
   схлопнется и закрытый ответ останется видимым.

   Отступ снизу поэтому тоже убран в закрытом состоянии. min-height ограничивает
   только содержимое, а отступ считается сверх него: с padding-bottom: 20px
   строка не могла стать ниже двадцати пикселей, и в этой полоске у каждого
   закрытого вопроса проглядывала первая строка ответа. Отступ возвращается
   вместе с раскрытием и едет той же анимацией. */
.faq-a-inner {
  padding: 0 24px;
  overflow: hidden;
  min-height: 0;
  transition: padding-bottom .28s ease;
}

.faq-item.open .faq-a-inner {
  padding-bottom: 20px;
}

/* Карточка «Задать вопрос» больше не тянется по высоте списка.
   При align-items: stretch каждое открытие и закрытие ответа меняло её высоту —
   поля внутри съезжали, и вместе со списком дёргалась вся правая колонка. */
@media (min-width: 901px) {
  .faq-layout { align-items: start; }
  .faq-order-card { height: auto; position: sticky; top: 96px; }
}

/* ── Шапка над светлым первым блоком ──────────────────────────────────────── */

/* Шапка прозрачная и целиком белым текстом: она рассчитана на тёмный слайдер
   под собой и получает подложку только при прокрутке. Выключили слайдер — под
   ней белый блок, и меню с кнопкой «Войти» пропадают: белое на белом.

   Класс ставит сервер, когда первым разделом идёт не слайдер. Тот же фон, что и
   у прокрученной шапки, — вид сайта от этого не меняется, просто подложка есть
   сразу. */
.header.is-solid {
  background: rgba(30, 41, 59, .92);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* Шапка висит поверх содержимого. Над слайдером это задумано — он высокий и
   тёмный. А светлый блок начинается прямо под ней, и его первые 84 px
   оказывались закрыты. Отодвигаем страницу ровно на высоту шапки.

   Перечислены все первые блоки, а не один #homeView: сначала правка закрывала
   только главную, и проверка на страницах, которых не было в прошлом прогоне —
   отдельная новость, правовой документ, своя страница сайта — показала, что
   заголовок там уезжает под шапку на 29–37 px. На тех страницах слайдера нет
   никогда, поэтому шапка на них плотная всегда. */
/* Отступ считается от настоящей высоты шапки, а не подобран на глаз.
   Отдельного мобильного значения нет намеренно: шапка одинаковой высоты на всех
   ширинах, и прежние 72 px на телефоне были просто занижены — на альбомной
   ориентации заголовок из-за них всё равно уезжал под шапку на 13 px. */
body:has(.header.is-solid) #homeView > *:first-child,
body:has(.header.is-solid) .gf-site-page > *:first-child,
body:has(.header.is-solid) .legal-page,
body:has(.header.is-solid) .news-page {
  padding-top: calc(var(--header-h) + 16px);
}

/* ── Экран входа под админ-панелью WordPress ──────────────────────────────── */

/* Жалоба: «убери, чтобы скрола не было при входе». У обычного посетителя её и
   нет — замеры показывают ровно 0 лишних пикселей на всех размерах экрана.
   Появляется она только у вошедшего в админку: WordPress сдвигает страницу вниз
   своей панелью (html { margin-top: 32px }), а экран входа посчитан от полной
   высоты окна. Итог — лишние 32 px, и внизу срезается блок поддержки.

   Вычитаем высоту панели ровно там, где она есть. Ширины переключения — те же,
   что у самой WordPress: до 783 px панель становится выше, 46 px вместо 32. */
body.admin-bar .auth-page,
body.admin-bar .auth-page-panel {
  height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .auth-page,
  body.admin-bar .auth-page-panel {
    height: calc(100dvh - 46px);
  }
}

/* ── Области нажатия на телефоне ──────────────────────────────────────────── */

/* Проверка размеров областей нажатия нашла места, куда пальцем попасть трудно:
   точки слайдера 9×9, бургер 38×32, ссылки подвала высотой 23 px, иконки
   мессенджеров 24×24. Общепринятый минимум — 40 px по каждой стороне.

   Там, где важен внешний вид (точки, иконки), зону расширяем невидимым слоем
   через ::after: сама точка остаётся прежнего размера, а нажимается площадь
   вокруг неё. Там, где вид не пострадает (бургер, ссылки, вкладки), увеличиваем
   сам элемент. */
@media (max-width: 900px) {

  /* Точки слайдера: 9×9 → площадь нажатия 45×45, вид не меняется.
     В ТЗ порог 44, а слой давал 41 — не дотягивал. */
  .slider-dot {
    position: relative;
  }

  /* Зона нажатия точек слайдера — два исправления сразу, и второе без
     первого делает хуже.

     Первое: inset задаёт top/right/bottom/left, но НЕ сбрасывает width,
     height и transform из правила выше по файлу. Без этих трёх строк слой
     оставался 24×24 при left/top = −18px и сдвигался transform-ом ещё на
     −12px: невидимый прямоугольник висел ЦЕЛИКОМ ВНЕ точки. Палец по-прежнему
     целился в 9×9, а над баннером появлялась нажимаемая пустота.

     Второе: развести сами точки. При промежутке 10px их центры стоят в 19px
     друг от друга, и зона в 45px накрывает соседнюю — нажатие по третьей
     точке включало четвёртый слайд. Ширина зоны не может превышать расстояние
     между центрами, иначе соседние зоны спорят за нажатие.

     Отсюда промежуток: 35px при точке 9px даёт ровно 44px между центрами —
     столько же, сколько требует ТЗ на область нажатия. Зоны смыкаются
     вплотную и не залезают друг на друга. По вертикали мешать нечему, там
     берём с запасом.

     Ряд из шести точек занимает 233px и помещается на 320px: у полосы под
     баннером отступы по 18px с каждой стороны, свободных 284px. */
  .bbr-dots { gap: 35px; }

  .slider-dot::after {
    content: '';
    position: absolute;
    inset: -18px -17.5px;
    width: auto;
    height: auto;
    transform: none;
  }

  /* Иконок мессенджеров это правило не касается: 44×44 им даёт правило выше
     по файлу, и оно действует на всех ширинах. Здесь стояло ещё одно, с
     inset: -10px, и оно ломало то, что чинило: inset перебивал left/top,
     но не сбрасывал width/height/transform, и зона нажатия левой иконки
     уезжала вверх-влево, накрывая соседнюю. Нажатие по верхней половине
     Telegram открывало MAX. Убрано. */

  /* Бургер — главная кнопка навигации на телефоне, промахиваться по ней нельзя. */
  .burger {
    width: 44px;
    height: 44px;
  }

  /* «Войти» в шапке выходила ровно 40 px — на границе допустимого. Кнопка
     ведёт в кабинет, по ней жмут чаще прочих, поэтому запас нужен. */
  .header-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Ссылки подвала стоят вплотную друг к другу: при высоте 23 px палец
     регулярно попадает в соседнюю.

     display: block, а не inline-block: у коротких названий — «AI», «Банки» —
     цель получалась 13 и 39 px шириной. Ссылка в столбце и так занимает всю
     ширину колонки, вид от этого не меняется, а попасть по ней можно. */
  .footer-col a {
    display: block;
    padding: 11px 0;
  }

  /* Вкладки демо-чата и переключатель «Войти / Регистрация». */
  .chat-tab,
  .auth-tab,
  .bbr-all-news {
    min-height: 44px;
  }

  /* Остальные цели, недотягивавшие до 44 из ТЗ.
     Считал их по 40 — это порог из другого свода правил, а в нашем ТЗ прямо
     написано «~44×44». Разница в четыре пикселя незаметна глазом и ощутима
     пальцем: именно на ней промахиваются по тесно стоящим ссылкам. */
  .btn-sm {
    min-height: 44px;
  }

  .mobile-nav a,
  .mobile-nav-phone,
  .auth-support-link,
  .back-link,
  .news-page-back,
  .auth-forgot {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Почта и телефон в подписи поддержки — тот же 44px, но прозрачным слоем, а не
     высотой самой ссылки.

     Замечание от 11.08 (стрелки по вертикали у блока поддержки): строка с
     адресом и телефоном занимала 44px при высоте текста 20 — это 24px пустоты в
     блоке, который и без того съедал 141px из 664 на экране телефона.
     min-height давал их живой высотой; overlay через ::after сохраняет палец и
     возвращает строке её настоящий размер. Способ не новый — так же сделаны
     точки слайдера, иконки мессенджеров и крестик окна (см. раздел «Доступность:
     размер зон нажатия»).

     Слой во всю ширину ссылки, а не 44px в квадрате: адрес почты шире 44px, и
     квадрат в середине оставил бы края строки без реакции. */
  .auth-support-text a {
    position: relative;
  }

  .auth-support-text a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Ссылки выезжающего меню занимают всю его ширину — попасть можно по строке
     целиком, а не только по буквам.

     Кроме иконок мессенджеров: они лежат вдвоём в одной строке рядом с
     телефоном, и «во всю ширину» им означало «во всю ширину своей обёртки»
     каждой. Две такие в строку не помещались, и вторая — MAX — уезжала за
     правый край экрана. На всех ширинах телефона, а не только на узких.

     То есть замечание 2.4 «в меню гамбургер только иконка ТГ» я закрыл лишь
     наполовину: иконку научил рисоваться, а вот это правило добавил позже, и
     оно снова убрало её с экрана. Проверка не поймала, потому что мерила
     размер значка и число фигур в нём, но не положение. */
  .mobile-nav a:not(.msg-icon) { width: 100%; }

  /* Поля ввода на телефоне — не мельче 16px.

     Safari на iPhone увеличивает страницу при касании поля, если его шрифт
     меньше 16px, и обратно сама она не уменьшается. У нас поля были 14.7-15.2px:
     человек нажимал «ИНН» в окне заявки, страница подпрыгивала на 9%, и дальше
     он заполнял форму, елозя её пальцем вбок. Chrome на iPhone — тот же WebKit,
     ведёт себя так же.

     16px именно у поля; подписи и placeholder остаются прежними. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea,
  select,
  .gf-input,
  .calc-input,
  .calc-select {
    font-size: 16px;
  }

  /* Ползунки «Сумма гарантии» и «Срок»: полоса 6px, бегунок 20px — попасть
     пальцем почти нельзя, палец соскальзывает и вместо перетаскивания
     прокручивается страница. Даём элементу 44px по высоте и возвращаем полосе
     прежний вид отступами: видно те же 6px, а нажимается 44.

     background-clip: content-box обязателен — заливку прогресса скрипт пишет
     прямо в стиль элемента, и без него она размазалась бы на все 44px. */
  .calc-range {
    height: 44px;
    padding: 19px 0;
    box-sizing: border-box;
    background-clip: content-box;
    /* 22px, а не прежние 3.

       При обрезке фона по содержимому скругление считается от рамки и
       уменьшается на величину отступа: 3 − 19 даёт ноль, и у полосы получались
       квадратные торцы вместо скруглённых. 22 − 19 возвращает те же 3px на
       видимой полосе. */
    border-radius: 22px;
  }

  .calc-range::-webkit-slider-thumb { width: 28px; height: 28px; }
  .calc-range::-moz-range-thumb { width: 28px; height: 28px; }

  .gf-switch-row { min-height: 44px; }

  /* Глазок «показать пароль»: по высоте проходил, по ширине — 42. */
  .gf-password-toggle { min-width: 44px; }
}

/* Экран входа и регистрации: те же 44 px под палец.
   Здесь мелкими остались переключатель способа входа, глазок пароля и ссылки
   поддержки внизу — по ним промахиваются чаще всего, потому что стоят тесно. */
@media (max-width: 900px) {
  .auth-method {
    /* «ЭП» — две буквы, и цель выходила 41px шириной. */
    min-width: 44px;
    justify-content: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .auth-page-back {
    min-height: 44px;
  }

  /* Глазок «показать пароль» — 26×26, лежит ВНУТРИ поля на position: absolute.
     Зону нажатия расширяем слоем, саму кнопку не трогаем.

     Здесь стояло position: relative — «чтобы слою было от чего считаться». Оно
     перебивало absolute: кнопка выпадала из поля в общий поток и уезжала выше
     него на пол-высоты. На большом экране не проявлялось, правило только для
     узких. Кнопка и так позиционирована, слою этого достаточно. */
  .gf-password-toggle::after {
    content: '';
    position: absolute;
    inset: -9px;
  }

  .auth-forgot,
  .auth-support-link {
    display: inline-block;
    padding: 11px 0;
  }

  /* `.auth-support-text a` (почта и телефон) отсюда убраны: padding 11px сверху и
     снизу давал строке 42px живой высоты при 20px текста, и блок поддержки
     раздувался — замечание от 11.08 про вертикальные просветы. Палец тем ссылкам
     всё равно нужен, поэтому 44px им даёт прозрачный слой ::after выше в этом же
     файле, а не отступы: слой не занимает места в потоке. */
}


/* ══════════════════════════════════════════════════════════════════════════
   Правки от 13.08.2026
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 3. «Для СМИ»: кнопка «На главную» ──────────────────────────────────────
   Замечание: «на странице для СМИ кнопка „На главную“ — текст должен быть
   белым цветом без фокуса».

   Ссылка задумана белой (см. `.back-link` выше), но её перекрывало правило
   «на светлой странице делаем тёмной». Оно смотрит на класс `gf-on-dark` у
   `body`, а этот класс не ставит никто: его нет ни в одном шаблоне и ни в
   одной строчке JS. То есть условие `body:not(.gf-on-dark)` выполняется
   всегда, и тёмный цвет получала в том числе ссылка на фиолетовой шапке
   «Для СМИ». Читалась она только под курсором — оттуда и «без фокуса».

   Правило отдельное, а не через `:not()` в том списке: там перечислены
   страницы целиком, а здесь раздел внутри страницы. `body` и `main` в
   селекторе не для красоты — без них вес ниже, чем у правила выше, и
   исключение молча не сработает. */
body main .press-hero .back-link {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}

body main .press-hero .back-link:hover {
  background: rgba(255, 255, 255, .15);
  border-color: #fff;
  color: #fff;
}

/* ── 4. FAQ: тень у кнопки «Отправить» ──────────────────────────────────────
   Замечание: «в форме „Задать вопрос“ при скроле вверх-вниз у кнопки
   „Отправить“ в неактивном состоянии появляется тень вверху при скролинге
   вверх и внизу при скролинге вниз».

   Карточка «Задать вопрос» приклеена к экрану (`position: sticky`, правило
   выше), а у кнопки лежит мягкая фирменная подсветка `--shadow-orange` —
   размытое пятно на 20px под кнопкой. Пока страница едет, липкий слой
   перерисовывается, и пятно тянется за кнопкой то сверху, то снизу — по
   направлению прокрутки. Никакого состояния у кнопки при этом не меняется,
   поэтому в спокойном виде дефекта и не видно.

   Снимаем подсветку у этой кнопки — и в покое, и под курсором, где она
   вырастала до 24px и добавляла сдвиг на пиксель вверх. Отклик на наведение
   остаётся, но без тени и без движения: тянуться нечему. Остальные кнопки
   сайта не трогаем — там нет липкой обёртки, там подсветка и задумана. */
.faq-order-card .btn-primary,
.faq-order-card .btn-primary:hover {
  box-shadow: none;
  transform: none;
}

.faq-order-card .btn-primary:hover { filter: brightness(1.06); }

/* ── 6. Меню-гамбургер: фирменная подсветка пункта ──────────────────────────
   Замечание: «в меню гамбургер сделать фокус списка овальными (фирменным),
   как у Вида гарантии».

   Было: прямоугольник со скруглением 8px и серым фоном #F1F5F9 — набор из
   темы по умолчанию. Стало ровно то, что у выпадающего списка «Вид гарантии»
   (`.gf-select-option.is-selected`): овал и фирменный градиент.

   Селектор с `>`: телефон, значки мессенджеров и кнопка «Войти» — тоже
   ссылки внутри меню, и общее правило `.mobile-nav a` красило бы и их.
   Пункты меню лежат прямым потомком, всё остальное — во вложенных обёртках.

   `:hover` здесь не «наведение мышью»: на телефоне он остаётся на пункте
   после касания, и именно его заказчик видел на снимке как серый
   прямоугольник у «Банки». */
.mobile-nav > a { border-radius: 999px; }

.mobile-nav > a:hover,
.mobile-nav > a:focus-visible,
.mobile-nav > a:active {
  background: linear-gradient(135deg, #706BFF, #B652FF);
  color: #fff;
  font-weight: 600;
}

/* Кнопка «Войти» в выезжающем меню — фирменным цветом (то же замечание 6).
   Была белой с серым контуром и терялась среди пунктов, хотя это главное
   действие на экране.

   Цвет текста задан отдельно: `.mobile-nav a` красит все ссылки меню в
   `--text2`, и вес у него выше, чем у `.btn-primary`, — без этой строки
   надпись осталась бы тёмной на фиолетовом. */
.mobile-nav .mobile-nav-actions .btn-primary { color: #fff; }
/* ── 1. Новости: убрана полоса прокрутки, листание осталось ─────────────────
   Замечание: «в двух местах переключение новостей, оставить только в одном
   месте <>, убрать скролинг и автопрокрутку карточек новостей — карточки
   новостей должны быть статичные».

   Переключений было действительно два: пара круглых ‹ › под лентой и полоса
   прокрутки, которой Chrome под Windows дорисовывает свои кнопки-стрелки по
   краям. Убрана полоса — осталась одна пара, та, что под лентой. Само правило
   лежит выше по файлу, в разделе «Новости: фирменный контур на фокусе»: там
   стояла фирменная полоса, которая эти кнопки и приводила.

   Прокрутку саму по себе НЕ убираем. При уточнении 13.08 заказчик выбрал
   вариант «убрать полосу, но листать зажав — оставить, и автопрокрутку тоже».
   Поэтому лента по-прежнему листается мышью, колесом и пальцем, а автолистание
   работает как у слайдера в шапке (см. main.js). Здесь правил под это нет
   намеренно: базовое `.news-track { overflow-x: auto }` выше по файлу делает
   всё нужное, а полоса скрыта тем же базовым правилом.

   Первым решением 13.08 лента на широком экране была остановлена совсем, а
   стрелки подменяли карточки через [hidden]. Заказчик это отменил — вместе с
   правилами `.news-card[hidden]` и `.news-arrow[disabled]`, которые под тот
   вариант и заводились. */

/* Ряд стрелок прячется, когда листать нечего: все новости и так на экране либо
   их нет вовсе (см. main.js). display у ряда задан классом, поэтому браузерного
   правила для [hidden] мало — оно проигрывает по весу. */
.news-nav[hidden] { display: none; }