/* ============================================================
   МатКапитал24 — редизайн главной. Статичная вёрстка.
   Значения взяты из нод Figma (REST), нормализованы в tokens.css.
   Брейкпоинты макета: 1366 (эталон), 768, 320.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    color: var(--color-body);
    background: var(--color-bg);   /* корневой фрейм макета залит #f6f8fd, не белым */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Контентная колонка ограничена 1178px (--container-content): коробка
   контейнера 1366 = 1178 + поля 94*2. На мониторах шире 1366 контент
   больше не растягивается, а центрируется. */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ---------- Типографика секций ---------- */
/* Вертикальный ритм задан не единым padding'ом, а y-координатами нод макета.
   Границы фреймов по вертикали (frame-relative):
     hero      0    -> 644
     offers    644  -> 1699   (заголовок 677, слайдер 926..1598)
     trust     1699 -> 2467   (заголовок 1779, карточки 2044..2384)
     expert    2467 -> 3336   (сам фрейм 2511..3336)
     blog      3336 -> 4103   (заголовок 3408, слайдер 3545..4041)
     cta       4103 -> 4567   (баннер 4103..4497)
     faq       4567 -> 5396
     footer    5392 -> 5967                                              */
.section { position: relative; }
.section--offers { padding-top: 33px; padding-bottom: 101px; }
.section--offers .section__head { margin-bottom: 54px; }
.section--trust { padding-top: 80px; padding-bottom: 83px; }
.section--trust .section__head { margin-bottom: 37px; }
.section--expert { margin-top: 44px; padding-bottom: 32px; }   /* 44 — зазор МЕЖДУ фреймами, 32 — хвост внутри */
.section--blog { padding-top: 72px; padding-bottom: 62px; }
.section--blog .section__head { margin-bottom: 47px; }
.section--cta { padding-top: 0; padding-bottom: 70px; }
.section--faq { padding-block: 0; }
.section__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
}
.section__title {
    font-family: var(--font-heading);
    font-size: var(--fs-34);
    font-weight: var(--fw-bold);
    line-height: 47.5px;   /* lineHeightPx ноды */
    color: var(--color-dark);
}
.section__lead {
    font-size: var(--fs-16);
    line-height: 27.2px;   /* lineHeightPx ноды */
    color: var(--color-body);
}
/* Кнопка в шапке секции стоит ВВЕРХУ, на уровне заголовка, а не у нижнего
   края: в макете «Все статьи» начинается ровно с верха заголовка (3446),
   «Все предложения» — на 10px ниже. Отступ 38 = расстояние от верха шапки
   до верха заголовка (надзаголовок 29 + зазор ~9), одинаковое в обеих
   секциях. Раньше стоял align-items: flex-end, из-за чего кнопка
   опускалась на 117px ниже макета. */
.section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-8);
    margin-bottom: var(--sp-10);
}
.section__head > .btn { margin-top: 38px; }
.section__head--stacked { flex-direction: column; align-items: flex-start; gap: 10px; }
.section__head-text { display: flex; flex-direction: column; gap: var(--sp-5); width: 493px; max-width: 100%; }
.section__head--stacked .section__head-text,
.section--trust .section__head { max-width: none; }
.section--trust .section__title { width: 649px; max-width: 100%; }
.section--trust .section__lead { width: 493px; max-width: 100%; }

/* В макете надзаголовки — textCase UPPER, letterSpacing 1.04px */
/* Надзаголовок секции — во ВСЕХ секциях одна и та же пилюля: белая
   заливка, радиус 100, высота 29, инсеты 14 по бокам и 4 сверху/снизу
   (ноды 11:2809, 18:3206, 20:713, 40:1534 — размеры разные только
   по ширине текста). Раньше .eyebrow шёл вовсе без подложки, а .pill
   был бледно-голубым и на 8px выше макета. */
.eyebrow, .pill {
    display: inline-block;
    /* align-self спасает во флексе, но в гриде горизонталь задаёт
       justify-self — без него пилюля в FAQ растягивалась на всю колонку
       (342 вместо 197) на ширинах 768–1365, где .faq__aside — грид. */
    align-self: flex-start;
    justify-self: start;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-primary);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    letter-spacing: 1.04px;
    text-transform: uppercase;
}

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-9);
    border-radius: var(--radius-sm);
    font-size: var(--fs-14);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-snug);
    text-align: center;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* Двойной класс — чтобы Bootstrap темы не перебил цвет на ховере при посадке */
.btn.btn--primary, .btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn.btn--primary:hover, .btn--primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}
/* Кнопка «Все предложения»/«Все статьи» (ноды 18:3197, 297:304):
   белая заливка, СИНЯЯ рамка и СИНИЙ текст #2563eb, радиус 6, высота 45.
   Были серая рамка --color-border и тёмный текст. */
.btn.btn--outline, .btn--outline {
    min-height: 45px;
    border: 1px solid var(--color-primary);
    background: var(--color-white);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
}
/* В макете за текстом идёт стрелка 16x16 (нода 18:3199) — без неё кнопка
   была на 21px уже макетной */
.btn--outline::after {
    content: '';
    width: 16px; height: 16px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
}
.btn.btn--outline:hover, .btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn.btn--light, .btn--light {
    background: var(--color-white);
    color: var(--color-dark);
}
.btn.btn--light:hover, .btn--light:hover { color: var(--color-primary); }
.btn--lg {
    padding: var(--sp-8) var(--sp-16);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--fs-17);
    font-weight: var(--fw-bold);
}
/* Кнопка героя: градиент сверху вниз и широкое синее свечение под ней */
.btn.btn--primary.btn--lg {
    background: var(--grad-btn-hero);
    box-shadow: var(--shadow-btn-hero);
}
.btn.btn--primary.btn--lg:hover { background: var(--grad-btn-hero); filter: brightness(1.06); }
/* Кнопка в карточке предложения: сплошной цвет, радиус 10, синяя тень */
.btn.btn--primary.btn--block {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-btn-card);
}
/* Кнопка CTA эксперта: диагональный градиент, радиус 10, без тени */
.expert__cta .btn.btn--primary {
    border-radius: var(--radius-md);
    background: var(--grad-btn);
}
.expert__cta .btn.btn--primary:hover { background: var(--grad-btn); filter: brightness(1.06); }
.btn--xl {
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--radius-md);
    font-size: var(--fs-26);
    font-weight: var(--fw-bold);
}
.btn--block { display: flex; width: 100%; }

/* ---------- Бейджи ---------- */
.badge {
    position: absolute;
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-extrabold);
}
/* Бейдж возраста: в макете «Background+Shadow» 153x30 — белая подложка
   с прозрачностью .94, радиус 999 (пилл), текст #2563eb. */
/* Бейдж возраста 153x30 (нода 329:27): белый .94, пилл, тень 0 8 22
   rgba(0,0,0,.08). Перед текстом иконка-конфедератка 13x13 (нода 329:28),
   инсет 12, зазор до текста 6. */
.badge--age {
    top: var(--sp-3); left: var(--sp-3);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, .94);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    color: var(--color-primary);
    font-size: var(--fs-12);
}
.badge--age::before {
    content: '';
    flex: none;
    width: 13px; height: 13px;
    background: var(--icon-cap) center / contain no-repeat;
}
/* Бейдж рубрики: в макете (нода 21:912) синяя плашка 98x22 r16
   с БЕЛЫМ текстом в верхнем регистре, Inter 10/700, трекинг 0.6.
   Было наоборот — синий текст на белом. */
.badge--topic {
    top: var(--sp-3); left: var(--sp-3);
    padding: var(--sp-1) var(--sp-5);
    border-radius: var(--radius-lg);
    background: var(--color-badge-topic);
    color: var(--color-white);
    font-size: var(--fs-10);
    font-weight: var(--fw-bold);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* ============ HEADER ============ */
.site-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--color-white);
}
.header__inner {
    display: flex;
    align-items: center;
    gap: 0;
    height: 73px;
}
/* Логотип: иконка 34x36 + текстовый блок, суммарно 193x40 (x=99 в макете) */
.brand { display: flex; align-items: center; gap: var(--sp-3); margin-left: 5px; }
.brand__logo { width: 34px; height: 36px; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 1px; }
.brand__name-accent { color: var(--color-brand-red); }
.brand__name {
    font-family: var(--font-heading);
    font-size: var(--fs-17);
    font-weight: var(--fw-bold);
    line-height: 19.79px;   /* lineHeightPx ноды */
    /* Название набрано двумя цветами: «Мат» и «24» синие #0042c8,
       «Капитал» красный #ec2a45 (посимвольные переопределения нод
       6:2493 в шапке и 42:1656 в подвале). Раньше всё шло тёмным. */
    color: var(--color-brand-blue);
}
.brand__tagline {
    font-size: var(--fs-10);
    line-height: 9.9px;    /* нода: 2 строки в 149px, блок лого 193x40 */
    color: var(--color-muted);
    width: 149px;
}
/* Меню в макете начинается на x=324 и занимает 747px — прижато к логотипу,
   а не отцентровано. Первый пункт «Образование» в рамке 155x39 r6. */
/* Логотип кончается на 292, первый пункт начинается на 324 -> зазор 32 */
.nav { display: flex; align-items: center; gap: 25px; margin-left: 32px; }
.nav__link {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-family: var(--font-heading);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    transition: color var(--transition-fast);
}
/* Контейнер пункта в макете (нода 6:2496) — 155x39 БЕЗ заливки и обводки:
   рамки вокруг «Образование» там нет, только размер под плашку «топ» */
.nav__link--boxed {
    justify-content: center;
    width: 155px; height: 39px;
    gap: var(--sp-2);
    padding: 0;
}
.nav__link:hover { color: var(--color-primary); }
.nav__badge {
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    background: var(--color-badge-top);   /* #10b981 из ноды 6:2498, был тёплый оранжевый */
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-10);
    font-weight: var(--fw-bold);
    text-transform: lowercase;
}
/* Круглые кнопки 48x48 r24 */
.header__actions { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.icon-btn {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(37, 99, 235, .10);
    transition: box-shadow var(--transition-fast);
}
.icon-btn:hover { box-shadow: 0 4px 16px rgba(37, 99, 235, .22); }
.icon-btn img { width: auto; height: auto; }
.icon-btn__vk {
    font-size: var(--fs-13);
    font-weight: var(--fw-extrabold);
    color: var(--color-primary);
    letter-spacing: -.5px;
}
.nav__close { display: none; }
.burger { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); }
.burger span { display: block; width: 22px; height: 2px; background: var(--color-dark); }

/* ============ HERO ============ */
/* В макете шапка (Banner - HEADER, y=0) лежит ПОВЕРХ героя (Frame 4, y=0),
   а не над ним. Поэтому шапка вынута из потока, а герой занимает все 644px
   и получает отступ сверху под её высоту. */
.hero {
    position: relative;
    min-height: 644px;
    display: block;
    overflow: hidden;
}
/* Фон героя в макете (нода 2:3) — не на всю ширину: прямоугольник 1272x684
   начинается на x=94, слева остаётся полоса фона страницы. Пропорция
   исходника сохранена (1272/684 = 1710/920), низ на 40px уходит под обрез.
   Раньше картинка растягивалась на все 1366 с привязкой вправо — из-за
   этого левый край выходил белым вместо #f6f8fc и кадр не совпадал. */
.hero__bg {
    position: absolute;
    top: 0; right: 0;
    /* левый край — по левому краю контентной колонки, а не окна:
       на 1366 это ровно x=94, на широких экранах смещается вместе с контейнером */
    left: calc(50% - var(--container) / 2 + var(--container-pad));
    /* ширина — от левого края колонки до правого края окна.
       На 1366 даёт ровно 1272x684 как в макете (у <img> width:auto взял бы
       натуральные 1710 и кадр поехал бы по масштабу). */
    width: calc(50% + var(--container) / 2 - var(--container-pad));
    height: auto;
    z-index: -1;
}
/* Вертикальный ритм героя взят из y-координат нод (отсчёт от верха Frame 4):
   H1 139 -> лид 294 -> чипы 380 -> CTA 496 -> низ 644 */
.hero__inner { padding-top: 139px; padding-bottom: 34px; }
.hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-34);
    font-weight: var(--fw-bold);
    line-height: 42.47px;            /* lineHeightPx ноды */
    color: var(--color-hero-title);  /* #121d49 из ноды, не --color-dark */
    max-width: 570px;                /* ширина ноды — даёт перенос в 3 строки как в макете */
}
.hero__title-accent { color: var(--color-primary); }
.hero__lead {
    margin-top: 19px;
    font-size: var(--fs-16);
    line-height: 24.8px;             /* lineHeightPx ноды */
    color: var(--color-lead-navy);   /* #202b57 из ноды */
    max-width: 509px;                /* ширина ноды */
}
/* Чипы: высота 68, радиус 30, иконка 45x45, gap 15, padding 10 (из нод) */
.chips { display: flex; flex-wrap: wrap; width: fit-content; gap: 5px; margin-top: 17px; }
.chip {
    display: inline-flex; align-items: center; gap: var(--sp-6);
    min-height: 68px;
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
}
.chip img { width: 45px; height: 45px; flex: none; }
.chip:last-child { padding-right: var(--sp-6); }
/* Group 1 (CTA) на x=95 y=496 327x114, social-proof на x=438 — зазор 16px */
.hero__actions {
    display: flex; align-items: flex-start; flex-wrap: wrap;
    gap: var(--sp-6);
    margin-top: 48px;
}
/* Группа 327x114: кнопка 74, зазор 21, подпись 19.
   Подпись в макете прижата влево (x=100 при кнопке на x=95), не по центру. */
.hero__cta-group { display: flex; flex-direction: column; gap: 21px; align-items: stretch; width: 327px; }
/* Подпись под кнопкой (нода 6:2524): Inter 16/500 #586eaf, по левому краю
   кнопки. Было 13/400 по центру. */
.hero__note {
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    color: var(--color-slate-blue);   /* #586eaf из ноды */
    text-align: left;
}
.social-proof { display: flex; align-items: center; gap: var(--sp-6); min-height: 99px; }
.social-proof__avatars { display: flex; }
.social-proof__avatars img {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    object-fit: cover;
}
.social-proof__avatars img + img { margin-left: -29px; }
.social-proof__text { display: flex; flex-direction: column; min-width: 204px; }
.social-proof__count { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--color-navy); }
.social-proof__label { font-size: var(--fs-20); font-weight: var(--fw-regular); color: var(--color-body); }

/* ============ СЛАЙДЕРЫ ============ */
/* Дорожка слайдера в макете 1232px — шире контейнера (1178), выходит вправо */
.slider { overflow: hidden; margin-right: -54px; }
.slider__track {
    display: grid;
    grid-auto-flow: column;
    gap: var(--sp-8);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Полосу прокрутки прячем — листание идёт стрелками и точками,
       в макете полосы нет */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { width: 0; height: 0; }
.slider__track > * { scroll-snap-align: start; }
/* padding-bottom дорожек раньше резервировал место под отсутствовавшие
   стрелки. Теперь блок управления реальный, поэтому запас убран — иначе
   отступ удваивался и вся страница ниже уезжала на 36px за слайдер. */
.offers { grid-auto-columns: 290px; }
.articles { grid-auto-columns: 395px; }

/* ---------- Управление слайдером ----------
   Точки: активная 8x8 #2563eb, следующие 5x5 и 3x3 серые (#bfc1c6 —
   снято пробой пикселя с эталона). Стрелки: круг 36x36, заливка #2563eb,
   тень 0 4 12 rgba(37,99,235,.30); недоступная приглушена. */
.slider__controls {
    position: relative;
    display: flex; align-items: center;
    margin-right: 54px;      /* компенсируем вылет .slider вправо */
    margin-top: var(--sp-3); /* 8 — зазор от карточек до точек в макете */
    min-height: 36px;
}
.slider__dots {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: var(--sp-4);
}
.slider__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}
.slider__dot--mid   { width: 5px; height: 5px; background: var(--color-dot-idle); }
.slider__dot--small { width: 3px; height: 3px; background: var(--color-dot-idle); }
.slider__nav { display: flex; gap: var(--sp-2); margin-left: auto; }
.slider__btn {
    position: relative;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .30);
    cursor: pointer;
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}
.slider__btn:hover:not(:disabled) { filter: brightness(1.08); }
.slider__btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
/* Шеврон рисуем рамкой — отдельная иконка не нужна */
.slider__btn::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}
.slider__btn--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.slider__btn--next::before { transform: translate(-65%, -50%) rotate(45deg); }

/* ---------- Карточка предложения (290x648) ---------- */
/* Карточка 290x648, fill #ffffff, stroke #e2e8f0, радиус 22 (не 16). */
/* Высоту карточки задаёт контент. Жёсткие 648px (высота карточки в макете)
   держать нельзя: у нас пока нет блока с логотипом партнёра и разделителями
   (ноды 329:52-329:93, ждут выгрузки), поэтому содержимого меньше, и разница
   схлопывалась в пустое место посередине карточки. Одинаковую высоту
   карточек в ряду обеспечивает растяжение грид-дорожки. */
.offer-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.offer-card__media { position: relative; }
.offer-card__media img { width: 100%; aspect-ratio: 289 / 172; object-fit: cover; }
.offer-card__body {
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    flex: 1;
}
/* В макете у заголовка и описания фиксированная высота под две строки
   (ноды 329:32 «Heading 3 - (фикс. высота, без смещения)» 46 и 329:34 — 39).
   Благодаря этому карточки с однострочным и двухстрочным заголовком
   совпадают по высоте и снизу не остаётся разного пустого места. */
.offer-card__title {
    /* Высота именно ФИКСИРОВАННАЯ, а не минимальная: нода в макете так и
       называется «фикс. высота, без смещения». У одной из восьми карточек
       заголовок занимал три строки (65 вместо 46) и сдвигал в ней акцию,
       кнопку и отзывы относительно соседних. Длинный заголовок подрезаем
       по двум строкам. */
    height: 46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-dark);
}
.offer-card__desc { min-height: 39px; font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--color-muted); }
/* В макете рейтинг стоит первым, учеников — вторым (ноды 329:36 на x=111
   и 329:43 на x=208). В разметке порядок обратный, поэтому меняем местами
   выводом, не трогая восемь карточек.
   Слева от цифр — подложка 32x32 с радиусом 9: у рейтинга #fff5d8,
   у учеников #eaf9f0 (ноды 329:37 и 329:44). Сами глифы (звезда и люди)
   ждут выгрузки из Figma — подложки уже встанут на свои места. */
.offer-stats { display: flex; gap: var(--sp-7); }
.offer-stats__item:nth-child(2) { order: -1; }
.offer-stats__item {
    display: grid;
    grid-template-columns: 32px auto;
    align-items: center;
    column-gap: 5px;
}
.offer-stats__item::before {
    content: '';
    grid-row: 1 / span 2;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--color-plate-students) var(--icon-students) center / 20px 20px no-repeat;
}
.offer-stats__item:nth-child(2)::before {
    background-color: var(--color-plate-rating);
    background-image: var(--icon-star-gold);
    background-size: 16px 15px;
}
.offer-stats dt, .offer-stats dd { grid-column: 2; }
.offer-stats dt { font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--color-dark); }
.offer-stats dd { margin: 0; font-size: var(--fs-10); color: var(--color-muted); }
/* В макете тег и акция лежат в одном блоке «Background+Border» 253x96:
   градиентная заливка, обводка #cfebdd, радиус 14. */
/* Строка партнёра (ноды 329:52, 329:53, 329:93): два разделителя по 68px
   цвета #e2e8f0 и логотип 85x28 между ними с зазорами по 16.
   Отступы из макета: 12 от статистики сверху, 31 до блока акции снизу
   (в теле карточки уже есть общий зазор 8, поэтому margin меньше). */
.offer-card__partner {
    display: flex; align-items: center; gap: 16px;
    min-height: 28px;
    margin: 4px 0 23px;
}
.offer-card__partner::before,
.offer-card__partner::after {
    content: '';
    flex: 1 1 68px;
    height: 1px;
    background: var(--color-border);
}
.offer-card__partner span {
    flex: none;
    display: grid; place-items: center;
    width: 85px; min-height: 28px;
    font-size: 10px; font-weight: var(--fw-bold);
    line-height: 1.2; letter-spacing: .4px;
    text-transform: uppercase; text-align: center;
    color: var(--color-muted);
}

/* Блок акции 253x96 (нода 329:94): слева белый кружок 40x40 с тенью
   0 8 20 rgba(16,168,90,.08) и иконкой подарка (ноды 329:95, 329:96),
   справа два текста. Раньше кружка с иконкой не было вовсе. */
.offer-card__deal {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: var(--sp-1);
    /* Высота фиксированная: в макете блок 253x96 у ВСЕХ карточек
       (ноды 329:94, 329:143, 329:221, 329:281), независимо от того,
       в одну строку промо-текст или в две. Без этого кнопки, подписи
       и строки отзывов вставали на разных уровнях. */
    min-height: 96px;
    padding: 14px;
    border: 1px solid var(--color-success-soft);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-success-pale), var(--color-white));
}
.offer-card__deal::before {
    content: '';
    grid-row: 1 / span 2;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-white) var(--icon-gift) center / 20px 20px no-repeat;
    box-shadow: 0 8px 20px rgba(16, 168, 90, .08);
}
.offer-card__deal > * { grid-column: 2; }
.offer-card__tag { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-success-dark); }
.offer-card__promo { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-dark); }
.offer-card__note {
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    color: var(--color-slate-blue);   /* #586eaf из ноды, не зелёный */
    text-align: center;
}
/* Без margin-top:auto — иначе строка отзывов прижималась к низу карточки,
   а весь остаток высоты собирался в пустоту над ней */
.offer-card__reviews { font-size: var(--fs-11); font-weight: var(--fw-extrabold); color: var(--color-muted); }

/* ---------- Карточка статьи (395x444) ---------- */
.article-card {
    min-height: 444px;
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    overflow: hidden;
}
.article-card__media { position: relative; }
.article-card__media img { width: 100%; aspect-ratio: 392 / 200; object-fit: cover; }
/* Инсеты из макета: контент карточки стоит на x=119 при карточке на 94,
   то есть 25 по бокам; заголовок отбит от обложки на 24, низ 24.
   Стояло var(--sp-6) = 16 по кругу, из-за чего контент был шире
   макетного (361 против 344) и прижат к краям. */
.article-card__body { display: flex; flex-direction: column; gap: 20px; padding: 24px 25px; flex: 1; }
/* Заголовок и текст в макете фиксированной высоты (ноды 21:914 — 46
   под две строки, 21:915 — контейнер 84 под три). Без этого карточка
   с длинным заголовком растягивала весь ряд: он был 467 вместо 444. */
.article-card__title {
    height: 46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: var(--fs-17);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-dark);
}
.article-card__excerpt {
    height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--color-muted);
}
/* Нода 21:917 называется HorizontalBorder и несёт обводку #e2e8f0 —
   над мета-строкой в макете идёт разделитель, которого у нас не было.
   margin-top: auto убран: он прижимал строку к низу карточки, а в макете
   она следует за текстом с отбивкой 4 и отступом 14 после линии. */
.article-card__meta {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.article-card__date { margin-left: auto; }
.article-card__meta img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.article-card__author { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-dark); }
.article-card__date { font-size: var(--fs-11); color: var(--color-muted); }

/* ============ ДОВЕРИЕ ============ */
/* Секция стоит на синей подложке — заголовок и лид в макете белые (#ffffff). */
.section--trust .section__bg { z-index: 0; }
.section--trust > .container { position: relative; z-index: 1; }
.section--trust .section__title,
.section--trust .section__lead { color: var(--color-white); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
/* Карточка доверия (нода 19:246): 278x340, радиус 14, инсет 15,
   БЕЗ тени — карточка и так контрастит с фотофоном секции. */
.trust-card {
    display: flex; flex-direction: column; gap: var(--sp-6);
    height: 340px;
    padding: var(--sp-6);
    border-radius: 14px;
    background: var(--color-white);
}
.trust-card__icon { width: 65px; height: 65px; }
.trust-card__title {
    max-width: 178px;                /* ширина ноды — даёт перенос в 2 строки как в макете */
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-navy);        /* #061542 из ноды */
}
.trust-card__text {
    font-size: var(--fs-17);
    line-height: var(--lh-normal);
    color: var(--color-trust-text);  /* #3e5480 из ноды */
}

/* ============ ЭКСПЕРТ ============ */
/* Фрейм 2511..3336. Левая колонка 94..760, правая 804..1287 -> зазор 44 */
.expert { display: grid; grid-template-columns: 666px 1fr; gap: 44px; align-items: start; padding-top: 20px; }
.expert__main { display: flex; flex-direction: column; }
.expert__head { display: flex; flex-direction: column; gap: 11px; width: 581px; max-width: 100%; }
/* feature-cards: 665x250, три карточки 215x250 с зазором 10 */
.expert__features { display: grid; grid-template-columns: repeat(3, 215px); gap: 10px; margin-top: 22px; }
.feature-card {
    display: flex; flex-direction: column;
    height: 250px;
    padding: 25px 22px;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}
.feature-card__icon { width: 64px; height: 64px; margin-bottom: 22px; }
.feature-card strong {
    font-size: var(--fs-16); font-weight: var(--fw-bold);
    line-height: var(--lh-snug); color: var(--color-navy);
    margin-bottom: var(--sp-5);
}
.feature-card span { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--color-trust-text); }
/* cta 94,3121 387x89 */
/* align-items: center прижимал подпись к середине, а в макете строка
   с иконкой начинается слева, с отступом 6 от края кнопки */
.expert__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-5); width: 387px; margin-top: 22px; }
/* Текст 322 + зазор 7 + стрелка 17 = 346 при кнопке 387: боковые поля
   по 20, иначе строка переносится */
.expert__cta .btn { width: 100%; min-height: 53px; padding-inline: 20px; white-space: nowrap; font-size: var(--fs-18); }
/* В кнопке макета за текстом идёт стрелка 17x16 (нода 20:666) */
.expert__cta .btn::after {
    content: '';
    width: 17px; height: 16px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
}
/* right-visual 477x409, quote-card 466x236 */
.expert__aside { display: flex; flex-direction: column; gap: 0; }
.quote-card { margin-top: -19px; }   /* цитата заходит на фото, как в макете */
/* Фото эксперта в макете 442x409 (нода 20:671); при height:auto оно
   выходило 453 — на 44 выше макета. */
.expert__visual-wrap { position: relative; width: 442px; max-width: 100%; }
.expert__visual { display: block; width: 100%; height: 409px; border-radius: var(--radius-xl); object-fit: cover; }
/* Кружок 95x95 (нода 20:676): белый, тень 0 4 20 rgba(0,0,0,.05),
   выступает за правый край фото на 35 и отступает сверху на 75.
   Глиф — сердце над двумя фигурами, обводка #006bff 2.6 (ноды 20:677, 20:678);
   ждёт выгрузки из Figma, пока нарисован здесь. */
.expert__badge {
    position: absolute;
    top: 75px; right: -35px;
    width: 95px; height: 95px;
    border-radius: 50%;
    background-color: var(--color-white);
    background-image: var(--icon-family);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}
.section__title .accent { color: var(--color-primary); }
.quote-card {
    position: relative;
    width: 466px; max-width: 100%; min-height: 236px;
    padding: 26px 30px;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}
.quote-card__mark {
    position: absolute; left: 26px; top: 6px;
    font-family: var(--font-quote); font-size: 70px; line-height: 1;
    color: var(--color-primary-soft);
}
/* Интерлиньяж цитаты — 1.23 по ноде 20:682 (15.47px, строка 19),
   а не --lh-loose 1.7: из-за него карточка была на 17px выше макета. */
.quote-card blockquote { margin: 0 0 0 58px; font-size: var(--fs-15); line-height: 1.23; color: var(--color-body); }
.quote-card figcaption { position: relative; display: flex; flex-direction: column; margin: var(--sp-6) 0 0 58px; padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
/* Росчерк подписи справа от имени (нода 20:690, 93x30 на 22 ниже
   разделителя). В вёрстке его не было вовсе. */
.quote-card figcaption::after {
    content: '';
    position: absolute;
    /* Холст SVG на 3x4 больше рамки пути — компенсируем.
       Отступ справа выверен подбором (align.mjs): совпадение по вертикали
       точное, по горизонтали росчерк стоял на 7px правее макета. */
    right: 34px; top: 20px;
    width: 96px; height: 34px;
    background: var(--icon-signature) center / contain no-repeat;
}
/* Имя эксперта в макете СИНЕЕ #006bff, должность — приглушённый #7b8aaa
   (ноды 20:688/20:689 на десктопе и 80:3596/80:3597 на планшете).
   Стояли тёмно-синий и общий --color-muted. */
.quote-card figcaption strong { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--color-quote-name); }
.quote-card figcaption span { font-size: var(--fs-12); color: var(--color-quote-role); }
/* ряд из трёх пунктов на y=3266 */
/* Декор слева от плашки пунктов (нода 20:565 decor-dots, 169x64):
   сетка 9x4 из точек 3x3 цвета #0b73ff с шагом 20. Рисуем повторяющимся
   radial-gradient — 36 отдельных вектором тянуть незачем.
   По вертикали центр декора (3287) совпадает с центром плашки (3288). */
.expert__bottom { position: relative; }
.expert__bottom::before {
    content: '';
    position: absolute;
    left: 96px;
    top: 50%;
    transform: translateY(-50%);
    width: 169px; height: 64px;
    background-image: radial-gradient(circle at 1.5px 1.5px, var(--color-decor-dot) 1.5px, transparent 1.6px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Нижние пункты эксперта (нода 20:691) — не строка с маркерами, а плашка
   978x96: заливка #e6efff, радиус 12 (снят промером эталона), инсеты
   25/23/26/29, внутри ряд 44. Между пунктами вертикальные линии 2px
   цвета #afc6eb (ноды 20:698, 20:701), по центру зазора.
   Раньше блок шёл прозрачным во всю ширину с зелёными точками. */
.expert__points {
    display: flex;
    justify-content: flex-start;   /* при space-between разделители уезжали от макетных 596 и 933 */
    align-items: center;
    width: 978px;
    max-width: 100%;
    margin: 56px 0 0 auto;      /* прижат вправо: 1272-978 = 294 ≈ 292 в макете */
    padding: 23px 25px 29px;
    border-radius: 12px;
    background: var(--color-points-bg);
}
/* Ширины пунктов из макета: 248, 275 и 280 (плюс по 32 на разделитель
   с отступом у второго и третьего). В сумме 927 — ровно внутренний ряд
   макета. Без фиксированных ширин текст ужимался и уходил в три строки. */
.expert__points li {
    display: flex;
    align-items: center;
    flex: none;
    gap: 20px;
    min-height: 44px;
    font-size: var(--fs-16); font-weight: var(--fw-bold);
    line-height: 19px; color: var(--color-navy);
}
/* Боксы шире макетных на 3-5px: строкам «Проверенные партнёры» и
   «Работаем в рамках закона» при Inter 16/700 нужно 197 и 216px, а в
   макете под них отведено 196 и 214 — не хватало пары пикселей, и текст
   срывался на третью строку. Шрифт при этом остаётся макетным. */
.expert__points li:nth-child(1) { width: 252px; }
.expert__points li:nth-child(2) { width: 307px; gap: 21px; }
.expert__points li:nth-child(3) { width: 307px; gap: 25px; }
.expert__points li + li {
    margin-left: 25px;
    padding-left: 25px;
    border-left: 2px solid var(--color-points-divider);
}
/* Иконки в макете разного размера: 32x38, 40x40 и 29x28 */
.expert__points li:nth-child(2)::before { width: 40px; height: 40px; }
.expert__points li:nth-child(3)::before { width: 29px; height: 29px; }
/* Иконки: щит, весы и звезда. ВРЕМЕННО нарисованы своими масками —
   выгрузка нод 20:693, 21:742 и 20:702 из Figma упирается в лимит API.
   Размеры и посадочные места уже макетные, замена сведётся к подстановке
   файлов в background. */
.expert__points li::before {
    content: '';
    flex: none;
    width: 32px; height: 32px;
    background: var(--color-primary);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.expert__points li:nth-child(1)::before {
    -webkit-mask-image: var(--icon-shield); mask-image: var(--icon-shield);
}
.expert__points li:nth-child(2)::before {
    -webkit-mask-image: var(--icon-scales); mask-image: var(--icon-scales);
}
.expert__points li:nth-child(3)::before {
    -webkit-mask-image: var(--icon-star); mask-image: var(--icon-star);
}
/* Подпись под кнопкой (нода 21:737): щит с галочкой 15x18, зазор 6,
   вся строка прижата влево с отступом 6 от края кнопки — иконки не было
   вовсе, а текст стоял по центру. */
.expert__note {
    display: flex; align-items: center; gap: 6px;
    padding-left: 6px;
    font-size: var(--fs-14);
    color: var(--color-muted);
    text-align: left;
}
.expert__note::before {
    content: '';
    flex: none;
    width: 15px; height: 18px;
    background: var(--icon-shield-blue) center / contain no-repeat;
}
/* ============ CTA-БАННЕР ============ */
.cta-banner {
    position: relative;
    min-height: 394px;
    display: flex; align-items: center;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    color: var(--color-white);
}
.cta-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Контент баннера начинается на 392 от его левого края (ноды 51:2320,
   51:2401, 51:2330 — 484..492), а не прижат вправо: раньше стоял
   margin-left:auto с шириной 55%, и весь блок уезжал на ~175px правее,
   заголовок обрезался. Инсеты: 34 сверху, 48 снизу. */
.cta-banner__content {
    position: relative;
    display: flex; flex-direction: column;
    margin-left: 33.28%;          /* 392 / 1178 */
    padding: 34px 0 48px;
}
.cta-banner__title {
    width: 585px; max-width: 100%;
    margin-bottom: 17px;
    font-family: var(--font-heading);
    font-size: var(--fs-30);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}
/* Строки списка: маркер 30x30, зазор до текста 14, шаг строк 44 */
.cta-banner__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 27px; }
.cta-banner__list li {
    display: flex; align-items: center; gap: 14px;
    min-height: 30px;
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
}
/* Маркер (нода 51:2314) — кружок с тем же вертикальным градиентом, что
   у кнопки героя, и белой галочкой 18x18 внутри. Был полупрозрачный
   белый кружок без галочки. */
.cta-banner__list li::before {
    content: '';
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background-image: var(--icon-check-white), var(--grad-btn-hero);
    background-size: 18px 18px, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
/* Кнопка 406x67 (нода 51:2330): белая, радиус 10, тень 0 4 20 #98b9ef,
   текст #0563f9 Inter 26/700, инсеты 60 слева и 48 справа */
.cta-banner .btn {
    align-self: flex-start;
    gap: 7px;
    padding: 18px 54px;
    border-radius: var(--radius-md);
    color: var(--color-cta-text);
    box-shadow: 0 4px 20px var(--color-cta-shadow);
}
.cta-banner .btn::after {
    content: '';
    width: 24px; height: 24px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
}

/* ============ FAQ ============ */
/* Слева колонка 493 (x=94..587), справа аккордеон 653 (x=614..1267):
   зазор 27. Раньше стояло 112 — значение было подобрано под ошибочный
   контейнер шириной 1266 и с обычным контейнером сузило бы аккордеон. */
.faq { display: grid; grid-template-columns: 493px 1fr; gap: 27px; align-items: start; padding-block: 65px 112px; }
.faq__aside { display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; }
/* Кружок пункта в макете 81x81 (ноды 87:288, 40:1464), зазор до текста 31,
   между строками 28. Стояло 56 и 16 — иконки были заметно мельче макета. */
.faq__points { display: flex; flex-direction: column; gap: 28px; margin-top: var(--sp-8); }
.faq__points li { display: flex; align-items: center; gap: 31px; }
.faq__points-icon {
    flex: none;
    display: grid; place-items: center;
    width: 81px; height: 81px;
    border-radius: 50%;
    background: var(--color-primary-pale);
}
/* Ширина текстового блока: в макете Figma подогнала её под содержимое
   построчно — 182 у первого пункта и 224 у второго и третьего (ноды
   40:1540, 40:1542, 40:1546). Берём наибольшую: при 182 наши строки
   переносились чаще макета, без ограничения — реже. */
.faq__points-text { display: flex; flex-direction: column; gap: var(--sp-1); width: 224px; }
.faq__points-text strong { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--color-navy); }
.faq__points-text span { font-size: var(--fs-15); color: var(--color-muted); }
.faq__list { display: flex; flex-direction: column; gap: var(--sp-5); }
.faq__item { border: 1px solid var(--color-faq-border); border-radius: var(--radius-lg); background: var(--color-white); }
.faq__q {
    display: flex; align-items: center; gap: var(--sp-5);
    width: 100%;
    min-height: 90px;
    padding: var(--sp-8);
    text-align: left;
}
/* Номер вопроса: в макете (нода 40:1490) кружок 38x38 с диагональным
   градиентом и БЕЛОЙ цифрой. Было наоборот — синяя цифра на бледной заливке. */
.faq__num {
    flex: none;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--grad-faq-num);
    color: var(--color-white);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
}
.faq__text {
    flex: 1;
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-navy);   /* #07163d из ноды */
}
/* «+» в макете сидит в белом кружке 33x33 с рамкой (нода 40:1493),
   а не висит голым знаком */
.faq__plus {
    flex: none;
    display: grid; place-items: center;
    width: 33px; height: 33px;
    margin-left: auto;
    border: 1px solid var(--color-faq-plus-border);
    border-radius: 50%;
    background: var(--color-white);
    font-size: var(--fs-26);
    line-height: 1;
    color: var(--color-primary);
    transition: transform var(--transition);
}
.faq__q[aria-expanded="true"] .faq__plus { transform: rotate(45deg); }
/* Контейнер FAQ раньше получал padding-inline: 50 — это была ошибка чтения
   макета: рамка faq-block-editable (нода 40:1418) действительно начинается
   на x=50 и шире 1252, но только потому, что включает декоративные векторы
   (40:1420, 40:1422, 40:1423). Сам контент стоит на x=94, как во всех
   остальных секциях: заголовок 40:1533 на 94, пункты 40:1463 на 95,
   аккордеон 40:1487 заканчивается на 1267. Поэтому здесь общий контейнер. */

/* ============ FOOTER ============ */
/* Карточка 1178x562 на x=94 (внешняя тень-подложка 1199x588 на x=86).
   Контент внутри начинается на x=132 -> внутренний отступ 38px.
   Разделители колонок в макете — вертикальные линии на x=458, 691, 917. */
.site-footer { padding-block: 0 var(--sp-9); background: transparent; }
.footer-card {
    height: 562px;
    padding: 53px 38px 30px;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}
.footer__grid {
    display: grid;
    grid-template-columns: 326px 233px 226px 1fr;
    padding-bottom: var(--sp-7);
}
.footer__grid > * + * { padding-left: var(--sp-10); border-left: 1px solid var(--color-border); }
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-7); padding-right: var(--sp-8); }
.footer__about { font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--color-muted); }
/* Блок «Защита данных» (нода 42:1594): подложка 309x116 #f7faff с рамкой
   #e2ebfa, слева плашка 43x43 #e8f0ff со щитом. Инсеты 21/20, зазор до
   текста 15. Раньше блок шёл вовсе без подложки и без иконки. */
.footer__secure {
    display: grid;
    grid-template-columns: 43px 1fr;
    column-gap: 15px;
    align-items: start;
    padding: 20px 21px 18px;
    border: 1px solid var(--color-secure-border);
    border-radius: 14px;
    background: var(--color-secure-bg);
}
.footer__secure::before {
    content: '';
    grid-row: 1 / span 2;
    width: 43px; height: 43px;
    border-radius: 15px;
    background: var(--color-secure-plate) var(--icon-shield-badge) center / 18px 22px no-repeat;
}
.footer__secure > * { grid-column: 2; }
.footer__secure .footer__title { margin-bottom: var(--sp-3); }
.footer__secure p { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--color-muted); }
.footer__title {
    margin-bottom: var(--sp-6);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    color: var(--color-navy);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--sp-7); }
.footer__col a { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--color-dark); }
.footer__col a:hover { color: var(--color-primary); }
.footer__col p { font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--color-muted); }
/* Почта в макете (нода 42:1589): плашка 28x28 #eef4ff с конвертом,
   зазор 12, текст ТЁМНЫЙ #07163b. Иконки не было, а текст шёл синим. */
.footer__mail {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: var(--fs-15); font-weight: var(--fw-bold);
    color: var(--color-navy);
}
.footer__mail::before {
    content: '';
    flex: none;
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    background: var(--color-mail-plate) var(--icon-mail) center / 14px 11px no-repeat;
}
.footer__col .footer__mail { margin-top: var(--sp-6); }
/* «Мы в соцсетях» и кнопки в одной строке (label x=132, кнопки x=264) */
.footer__social-row {
    display: flex; align-items: center; gap: var(--sp-9);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--color-border);
}
.footer__social-row .footer__title { margin-bottom: 0; }
.footer__social-row .header__actions { margin-left: 0; }
.footer__bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-7);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-14);
    color: var(--color-muted);
}
.footer__bottom nav { display: flex; gap: 100px; }
.footer__bottom a:hover { color: var(--color-primary); }
/* ============================================================
   ПЛАНШЕТ — фрейм макета 768x5665.
   Граница 1365px: в макете между 768 и 1366 промежуточных фреймов нет,
   поэтому всё ниже эталонной ширины отдаём планшетной раскладке.
   ============================================================ */
/* ============ ТИПОГРАФИКА ПО НОДАМ МАКЕТА ============
   Значения сняты font-audit.mjs — он сопоставляет каждую текстовую ноду
   с элементом страницы и сравнивает гарнитуру, кегль, начертание,
   интерлиньяж, трекинг и регистр.
   Почему точные px, а не коэффициенты: в макете 42 разных интерлиньяжа,
   причём у мелкого текста отношение к кеглю ~1.65, а у крупного ~1.21 —
   одним набором коэффициентов это не повторяется. Заказчик просил
   типографику один в один, поэтому ключевые компоненты получают
   значения из нод. Проверка: node font-audit.mjs 1366
   Интерлиньяж задан БЕЗРАЗМЕРНЫМ отношением (значение ноды / кегль ноды),
   а не в px: на 1366 это даёт ровно макетные пиксели, а на узких ширинах,
   где кегль меньше, строка ужимается вместе с ним. С абсолютными px
   планшетные карточки распухали на 40px.                              */
.btn { line-height: 1.65; }
.btn--outline { line-height: 1; }
.btn--lg { line-height: 1.75; }
/* CTA эксперта в макете 700, а не 800 как остальные кнопки */
.expert__cta .btn { font-weight: var(--fw-bold); line-height: 1.21; }
.nav__link { line-height: 1.65; }
/* Плашка «топ» в шапке и в подвале набрана по-разному: в шапке Manrope 9
   в верхнем регистре с трекингом, в подвале — Inter 10 как есть */
.nav__badge { font-family: var(--font-heading); font-size: 9px; line-height: 1.4; letter-spacing: .36px; text-transform: uppercase; }
.footer__col .nav__badge { font-family: var(--font-body); font-size: 10px; line-height: normal; letter-spacing: 0; text-transform: none; }
.hero__title, .hero__title-accent { letter-spacing: -.72px; }
.hero__note { line-height: 1.65; }
.social-proof__label { font-size: 19px; }
.eyebrow, .pill { line-height: 1.65; }
/* Бейдж возраста в карточке предложения и бейдж рубрики в статье
   набраны разным интерлиньяжем */
.badge--age { line-height: 1.65; }
.badge--topic { line-height: 1.65; }
.article-card__title { line-height: 1.35; }
.article-card__excerpt { line-height: 1.55; }
.article-card__author { line-height: 1.65; }
.offer-card__title { letter-spacing: -.38px; }
.offer-card__desc { line-height: 1.45; }
.offer-card__note { line-height: 2.2; }
/* Стрелка в кнопке карточки (нода 329:109, 16x16) и галочка перед
   подписью (нода 329:113, 15x15). Глифы простые, поэтому нарисованы
   своей SVG-маской в цвет текста — выгрузка из Figma для них не нужна. */
/* Текст и стрелка в макете умещаются в одну строку: кнопка 253,
   инсеты по 28, содержимое 197 (текст 177 + зазор + стрелка 16) */
.offer-card .btn--block { padding-inline: 24px; white-space: nowrap; }
.offer-card .btn--block::after {
    content: '';
    width: 16px; height: 16px;
    margin-left: var(--sp-2);
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
}
.offer-card__note { display: flex; align-items: center; gap: var(--sp-2); }
.offer-card__note::before {
    content: '';
    flex: none;
    width: 15px; height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M5.2 8.2l2 2 3.6-3.9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M5.2 8.2l2 2 3.6-3.9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Строка отзывов в макете (нода 329:118) — не просто текст, а плашка
   252x30: белая, рамка #e2e8f0, радиус 8, мягкая тень и шеврон справа */
.offer-card__reviews {
    display: flex; align-items: center;
    min-height: 30px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-white);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    line-height: 1.65; letter-spacing: .44px; text-transform: uppercase;
}
.offer-card__reviews::after {
    content: '';
    width: 7px; height: 7px;
    margin-left: auto;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    transform: rotate(45deg);
}
.brand__tagline { font-size: 9px; }
.footer__title { letter-spacing: 0; }
/* Нода 51:2320 сообщает lineHeightPx 47.5, но её собственный бокс — 82 на
   две строки, то есть 41 на строку (1.41). Берём бокс: при 47.5 заголовок
   вырастал на 13px и баннер переставал укладываться в макетные 394. */
.cta-banner__title { font-size: 29px; line-height: 1.41; }
.btn--xl { line-height: 1.21; }
/* Нижние правовые ссылки подвала — 12/14.5, а «Карта сайта» набрана
   крупнее остальных: 14.6/17.7 */
.footer__bottom nav a { font-size: var(--fs-12); line-height: 1.21; }
.footer__bottom nav a:first-child { font-size: 14.6px; line-height: 1.21; }
/* Должность под именем в карточке цитаты */
.quote-card figcaption span { font-size: 12.9px; }

/* Планшетная раскладка нарисована под 768 и растягивать её до 1365 нельзя:
   на широком экране фон героя (949px) переставал закрывать секцию, чипы
   наезжали на картинку, а колонки эксперта разъезжались по углам.
   Поэтому граница опущена до 1199 — выше работает десктопная раскладка,
   которой в диапазоне 1200–1365 отдаётся колонка 1170 (блок в конце файла). */
@media (max-width: 1199px) {
    /* В планшетном фрейме фото лежит не на всю площадь: прямоугольник
       949x511 сдвинут влево и вверх (нода 77:2716 на -100,-3), низ героя
       остаётся фоном #f6f8fd. При растяжении на весь герой кадр
       увеличивался и наезжал на текст. */
    /* Пропорции макета в процентах, а не в пикселях: на 768 это ровно
       -100px и 949px, но при 1199 жёсткие значения уже не закрывали
       секцию и справа оставалась белая полоса.
       max-width: none обязателен — сброс img{max-width:100%} иначе режет
       картинку до ширины героя. */
    .hero__bg { left: -13%; top: -3px; width: 123.6%; max-width: none; height: auto; }
    /* Матовая подложка под текстом (нода 77:2717): серый 10% с блюром 4 */
    .hero::before {
        content: '';
        position: absolute; left: 0; top: 0;
        width: 450px; height: 377px;
        background: rgba(217, 217, 217, .1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 0;
    }
    .hero__inner { position: relative; z-index: 1; }
    /* Поля макета (94/50/88px) заданы под 1366 — на узких экранах перекрываем.
       В планшетном фрейме контент стоит на x=32 и шириной 704 (768-64),
       поэтому поле именно 32, а не --sp-8. */
    .container,
    .section--faq > .container,
    .site-footer > .container { padding-inline: 32px; }
    .slider { margin-right: 0; }
    /* В планшетном и мобильном фреймах у слайдеров только точки —
       стрелок «назад/вперёд» там нет (в макете есть лишь ноды
       «Go to slide», без «Previous/Next slide»). Точки отбиты от
       карточек на 8 (ноды 77:3283, 83:129). */
    .slider__nav { display: none; }
    .slider__controls { min-height: 8px; margin-top: 8px; margin-right: 0; }
    /* Карточки в планшетном фрейме уже десктопных: предложение 251x561
       (как на мобильном), статья 343x385. Пропорции обложек те же, поэтому
       достаточно задать ширину дорожки — высота подтянется. */
    .offers { grid-auto-columns: 251px; }
    .articles { grid-auto-columns: 343px; }
    .offer-card { min-height: 561px; }
    /* Строка партнёра в узких фреймах мельче: разделители 59, логотип 73x24
       (ноды 77:2813, 77:2814, 77:2854) */
    .offer-card__partner { min-height: 24px; gap: 14px; margin: 3px 0 18px; }
    .offer-card__partner::before,
    .offer-card__partner::after { flex-basis: 59px; }
    .offer-card__partner span { width: 73px; min-height: 24px; font-size: 9px; }
    /* Фиксированные высоты заголовка и описания в узких фреймах — 40 и 34
       (ноды 77:2793, 77:2795), подложки статистики 28 (нода 77:2797) */
    .offer-card__title { height: 40px; }
    .offer-card__desc { min-height: 34px; }
    /* У секции «доверие» оставались десктопные ширины (649/493), из-за чего
       заголовок шёл в одну строку вместо двух и шапка была на 58px ниже
       макета. В планшетном фрейме это 416 и 339 (ноды 79:3306, 79:3307). */
    .section--trust .section__title { width: 416px; }
    .section--trust .section__lead { width: 339px; }
    .offer-stats__item { grid-template-columns: 28px auto; }
    .offer-stats__item::before { width: 28px; height: 28px; background-size: 17px 17px; }
    .offer-stats__item:nth-child(2)::before { background-size: 14px 13px; }
    /* В планшетном фрейме блок акции тоже фиксированный — 219x83.
       У трёх карточек промо-текст занимал третью строку и растягивал блок
       на 2px, сбивая ряд: подрезаем его по двум строкам. */
    /* min-height нужен явно: базовые 96 перебивали планшетную height: 83 */
    .offer-card__deal { height: 83px; min-height: 83px; }
    /* Хвост карточки в планшетном макете компактнее (нода 77:2866, 219x103):
       кнопка 42, подпись 23, отзывы 26 */
    .offer-card__body { gap: 6px; }
    .offer-card .btn--block { min-height: 42px; }
    .offer-card__reviews { min-height: 26px; }
    .offer-card__promo {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    .article-card { min-height: 385px; }
    .article-card__title { font-size: var(--fs-15); }
    .faq { padding-block: var(--sp-10); }
    /* В планшетном фрейме секции плотно обжимают контент, а между ними 60px
       (низ «доверия» 2206 -> верх «эксперта» 2266). Две соседние секции по 30
       и дают этот зазор; при 48 у нас копился сдвиг вниз по всей странице. */
    .section { padding-block: var(--sp-9); }
    .section__title { font-size: var(--fs-26); max-width: none; }

    /* Прячем кнопки только в ШАПКЕ: тот же класс используют кнопки соцсетей
       в подвале, и без ограничения они пропадали вместе с ней */
    .site-header .header__actions { display: none; }
    .burger { display: flex; margin-left: auto; }

    /* ---- Выпадающее меню (фрейм «Меню» 320x260) ----
       Панель во всю ширину под шапкой: пункты с инсетом 15 и шагом 40,
       крестик 30x30 справа на строке первого пункта. Открывается классом
       .is-open на <html> — так же гасится прокрутка страницы. */
    .nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        z-index: 60;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-6);          /* 24 (строка) + 16 = шаг 40 из макета */
        margin-left: 0;
        padding: 31px var(--sp-6) 45px;
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }
    .is-open .nav { display: flex; }
    .nav__link {
        width: 100%;
        min-height: 24px;
        font-size: var(--fs-15);
        line-height: 24px;
    }
    /* Первый пункт в мобильном макете — обычная строка, без рамки 155x39.
       Высоту держим ровно 24: иначе бейдж «топ» растит строку и весь шаг
       в 40px уезжает вниз. */
    .nav__link--boxed {
        justify-content: flex-start;
        width: 100%; height: 24px;
        border: 0;
        border-radius: 0;
        padding: 0;
        /* крестик занимает правый край строки — не даём тексту под него залезть */
        padding-right: 45px;
    }
    .nav__link--boxed .nav__badge { line-height: 1; }
    .nav__close {
        position: absolute;
        top: 24px; right: var(--sp-6);
        display: block;
        width: 30px; height: 30px;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .nav__close::before,
    .nav__close::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 18px; height: 2px;
        margin: -1px 0 0 -9px;
        background: var(--color-dark);
    }
    .nav__close::before { transform: rotate(45deg); }
    .nav__close::after  { transform: rotate(-45deg); }
    .is-open, .is-open body { overflow: hidden; }

    /* Планшетный герой (фрейм 77:2715, 615 высотой): заголовок начинается
       на 137, соцдоказательство кончается на 595 -> низ 20.
       Стояло 72/72, из-за чего весь блок был поднят на 65px. */
    .hero { min-height: 615px; }
    .hero__inner { padding-block: 137px 20px; }
    /* Лид в макете 342 шириной в три строки (нода 77:2718), кнопка 317x64,
       подпись отбита от края кнопки на 20 (нода 77:2722) */
    /* Лид отбит от заголовка на 4 (нода 77:2718 на y=270 при заголовке
       до 266), а чип в макете 61 высотой с иконкой 40 (ноды 77:2734,
       77:2736) — у нас иконка была 45 и чип 68 */
    .hero__lead { width: 342px; max-width: 100%; margin-top: 4px; }
    .chip { min-height: 61px; padding: 10px 9px 11px; gap: 14px; }
    .chip img { width: 40px; height: 40px; }
    /* Кнопка 317x64: текст Manrope 16/700 высотой 30 и инсеты по 17
       (нода 77:2721). Подпись 19 высотой -> отношение строки 1.19,
       десктопные 1.65 давали 26. */
    .hero__cta-group { width: 317px; gap: 11px; }
    .hero .btn--lg { padding-block: 17px; }
    .hero__note { padding-left: 20px; line-height: 1.19; }
    .hero__actions { gap: var(--sp-8); }

    /* Планшетный фрейм (768x5665) КОМПАКТНЕЕ десктопного: многоколоночность
       сохраняется, а не схлопывается. Карточки доверия — все 4 в ряд (707x308),
       преимущества эксперта — 3 в ряд (409x189), эксперт — две колонки. */
    .trust-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
    .trust-card { height: auto; min-height: 308px; padding: var(--sp-5); }
    .trust-card__icon { width: 48px; height: 48px; }
    .trust-card__title { font-size: var(--fs-16); }
    .trust-card__text { font-size: var(--fs-13); }
    /* Фрейм эксперта в планшетном макете обжимает контент (6 сверху,
       14 снизу), а зазор в 60 до предыдущей секции лежит СНАРУЖИ фрейма.
       У нас секции идут встык, поэтому воздух переносим в margin:
       30 (низ «доверия») + 24 + 6 = 60, а коробка секции перестаёт
       быть на 40px выше макетной. */
    .section--expert { margin-top: 24px; padding-block: 6px 14px; }
    /* padding-top: 20 — десктопная величина (там контент отбит от верха
       фрейма на 20), в планшетном макете отбивка 6, поэтому снимаем. */
    .expert { grid-template-columns: minmax(0, 422px) minmax(0, 282px); gap: var(--sp-5); justify-content: space-between; padding-top: 0; }
    .expert__head { width: auto; }
    /* Карточка преимущества в планшетном макете 132x206: инсет 13, иконка 39,
       заголовок 13/700, текст 11/400.
       ВНИМАНИЕ: высоты текстовых боксов в узких фреймах брать нельзя — это
       непропорционально сжатая копия десктопного фрейма. Проверка: тот же
       заголовок на десктопе — Inter 16/700 в боксе 171px, ровно столько строка
       и занимает; в планшетном заявлено 13px в боксе 92px, что невозможно.
       Поэтому интерлиньяж берём отношением с десктопа (19/16 = 1.19 у
       заголовков карточек, 16/13 = 1.23 у мелкого текста), а высоту карточки
       отдаём контенту. */
    /* Отбивки левой колонки из макета: 13 от заголовка до карточек
       и 20 от карточек до кнопки (ноды 80:3618, 80:3548, 80:3572) */
    .expert__features { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: 13px; }
    .expert__cta { margin-top: 20px; }
    .feature-card { height: auto; min-height: 206px; padding: 13px; }
    .feature-card__icon { width: 39px; height: 39px; margin-bottom: 14px; }
    .feature-card strong { font-size: var(--fs-13); line-height: 1.19; margin-bottom: var(--sp-2); }
    .feature-card span { font-size: var(--fs-11); line-height: 1.23; }
    .expert__cta { width: 100%; }
    .expert__aside { align-items: stretch; }
    /* Фото 282x252, цитата 272x303 с нахлёстом 36 (на десктопе нахлёст 19) */
    /* Правая колонка в макете начинается на 22 от верха секции, а не на 6
       (нода 80:3583 на y=2288 при секции 2266). Карточка цитаты там уже
       фото: 272 против 282 (ноды 80:3591 и 80:3583). */
    .expert__aside { margin-top: 16px; }
    .expert__visual-wrap { width: 100%; }
    .quote-card { width: 272px; }
    .expert__visual { height: 252px; }
    /* В планшетном и мобильном фреймах кружок 70x70 и выступает на 10
       (ноды 80:3625 и 87:2756) */
    .expert__badge { top: 22px; right: -10px; width: 70px; height: 70px; }
    /* Правый инсет 13 (в макете текст 510..725 при карточке 466..738):
       при наших 16 строка не добирала 3px и уходила девятой */
    .quote-card { min-height: 0; margin-top: -36px; padding: 23px 13px 50px var(--sp-6); }
    /* Кавычка в планшетном макете Georgia 39, бокс 21x44 на +10,+18
       (нода 80:3593) — тянулся десктопный кегль 70, и она наезжала на текст */
    .quote-card__mark { left: 10px; top: 18px; font-size: 39px; }
    /* Росчерк здесь 60x19 на +204,+179 (нода 80:3598); правило с этими
       размерами лежало только в мобильном блоке, и на планшете
       оставался десктопный 96x34 */
    .quote-card figcaption::after { right: 6px; top: 9px; width: 62px; height: 22px; }
    /* lineHeightPx ноды 16.94, а не десктопный --lh-loose 1.7.
       Текст в макете начинается на 44 от края карточки и шириной 215
       (нода 80:3594) — у нас было 74 и 182, отчего он шёл лишней строкой. */
    .quote-card blockquote { margin-left: 28px; font-size: var(--fs-14); line-height: 16.94px; }
    /* После линии в макете 39 до имени — в этом зазоре справа стоит росчерк
       (нода 80:3598 на 2683 при линии 2677). Без него подпись наезжала
       на имя и должность. */
    .quote-card figcaption { margin-left: 26px; padding-top: 39px; }
    /* В планшетном макете (нода 80:3599) плашка 706x96, ряд 632x51:
       пункты 179, 200 и 227 в ОДНУ строку, иконки 29. Десктопные
       фиксированные ширины (252/307/307) сюда не влезают и роняли
       третий пункт на вторую строку, поэтому здесь ширина по контенту. */
    .expert__points { flex-wrap: nowrap; gap: 0; margin-top: 25px; padding: 23px 12px 22px; }
    .expert__points li { gap: 10px; min-height: 51px; }
    /* Ширины пунктов планшетного ряда: 179, 195 и 227 (ноды 80:3602,
       80:3608, 80:3615) — при равномерном распределении текст уходил
       в четыре строки вместо трёх */
    .expert__points li:nth-child(1) { width: 179px; }
    /* второму пункту макетных 156 под текст мало: строке «и требований
       ФЗ-256» при Inter 14/700 нужно 175, иначе уходит в четвёртую строку */
    .expert__points li:nth-child(2) { width: 234px; }
    .expert__points li:nth-child(3) { width: 235px; }
    .expert__points li + li { margin-left: 12px; padding-left: 12px; }
    .expert__points li::before { width: 29px; height: 29px; }
    .expert__points li:nth-child(2)::before { width: 34px; height: 34px; }
    .expert__points li:nth-child(3)::before { width: 29px; height: 29px; }
    /* В планшетном фрейме декор стоит не слева от плашки, а в правой
       колонке под карточкой цитаты (нода 87:563 на x=517, y=2827) */
    .expert__bottom::before { display: none; }
    .expert__aside { position: relative; }
    .expert__aside::after {
        content: '';
        position: absolute;
        left: 51px; bottom: -84px;
        width: 169px; height: 64px;
        background-image: radial-gradient(circle at 1.5px 1.5px, var(--color-decor-dot) 1.5px, transparent 1.6px);
        background-size: 20px 20px;
        pointer-events: none;
    }
    /* Планшет: заголовок и пункты рядом сверху (342 + 309), аккордеон во всю ширину снизу */
    .faq { grid-template-columns: 1fr; gap: 42px; padding-block: 0; }
    .faq__aside { display: grid; grid-template-columns: minmax(0, 342px) minmax(0, 309px); gap: var(--sp-8); align-items: start; }
    .faq__aside > .pill, .faq__aside > .section__title, .faq__aside > .section__lead { grid-column: 1; }
    .faq__points { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
    /* Аккордеон в планшетном макете: строка 90 (двухстрочный вопрос 104),
       зазор 14, блок 654; заголовок с пунктами сверху и отступ до него 42 */
    .faq__list { gap: 14px; }
    /* Высоту однострочной строки задаёт не текст, а кружок номера (38).
       Инсет 26 при min-height 88 даёт 90 у однострочных и 103 у
       двухстрочных — блок 655 против макетных 654. */
    .faq__q { min-height: 88px; padding: 26px var(--sp-8); }
    /* В макете длинные вопросы (3, 5 и 6) разбиты на две строки и такие
       строки 104 высотой вместо 90. Наша дорожка шире, и они умещались
       в одну — ограничиваем текст 460 (в макете первая строка 448). */
    .faq__text { max-width: 460px; font-size: var(--fs-16); line-height: var(--lh-snug); }
    /* Дорожка журнала в макете 430 при карточках 385 (нода 83:6):
       над карточками 16 и под точками 14 */
    .section--blog .slider__controls { margin-top: 22px; padding-bottom: 14px; }
    /* CTA-баннер 705x272: картинка слева, контент справа */
    /* Планшетный баннер (нода 87:141) устроен так же — контент начинается
       на 238 от левого края при ширине 705 (те же ~33%), но всё мельче:
       заголовок 355x82, маркеры 18, кнопка 315x52, инсеты 12 сверху
       и 32 снизу. */
    /* flex-start обязателен: при выравнивании по центру контент вставал
       на 17px ниже макетных 12 сверху */
    .cta-banner { min-height: 272px; align-items: flex-start; }
    .cta-banner__content { width: 382px; padding: 12px 0 32px; }
    /* Заголовок 355x82 — две строки по 41 (нода 87:143). Стояло 28 на
       строку, и он выходил 56. */
    .cta-banner__title { width: 355px; margin-bottom: 0; font-size: var(--fs-20); line-height: 41px; }
    .cta-banner__list { gap: 5px; margin-bottom: 14px; }
    .cta-banner__list li { min-height: 21px; gap: 14px; font-size: var(--fs-14); }
    .cta-banner__list li::before { width: 18px; height: 18px; background-size: 11px 11px, cover; }
    /* Кнопка 315x52 (нода 87:166): текст Inter 20/700, инсеты 45 и 33 */
    .cta-banner .btn { padding: 14px 33px 14px 45px; font-size: var(--fs-20); }
    .cta-banner .btn::after { width: 24px; height: 24px; }
    .btn--xl { font-size: var(--fs-18); padding: var(--sp-4) var(--sp-7); }
    /* Подвал 704x603: бренд 309 слева, КАТАЛОГ/ПОЛЕЗНОЕ сверху справа,
       НУЖНА ПОМОЩЬ под ними. Инсеты карточки из макета: 53 сверху,
       24 по бокам (контент на x=56 при карточке на x=32), 26 снизу. */
    .footer-card { min-height: 603px; height: auto; padding: 53px 24px 26px; }
    /* padding-bottom у сетки — десктопный приём; в планшетном макете
       высоту сетки задаёт колонка бренда (349), лишние 16 не нужны */
    .footer__grid { padding-bottom: 0; }
    .footer__brand { gap: var(--sp-5); }
    .footer__about, .footer__col p { font-size: var(--fs-13); }
    .footer__col ul { gap: var(--sp-5); }
    .footer__col a, .footer__mail { font-size: var(--fs-14); }
    .footer__title { margin-bottom: var(--sp-4); }
    /* Низ подвала в макете: сетка кончается на 5442, линия 5459, ряд соцсетей
       5482..5530 (48), линия 5547, нижняя строка 5570..5617 (47).
       Отсюда отбивки 40 и 41 — у нас были 0 и 16. */
    .footer__social-row { margin-top: 17px; padding-top: 23px; gap: var(--sp-7); }
    .footer__bottom { margin-top: 17px; padding-top: 24px; font-size: var(--fs-12); }
    .footer__grid { grid-template-columns: 309px repeat(2, 1fr); gap: var(--sp-8) var(--sp-7); }
    /* «Нужна помощь» лежит во второй строке правой половины, а колонка
       бренда тянется во всю высоту (в макете она 349, а меню кончается
       на 154). Без span бренд оставался в первой строке и сетка
       вырастала на высоту обоих рядов. */
    .footer__grid > *:last-child { grid-column: 2 / -1; grid-row: 2; }
    .footer__brand { grid-row: 1 / span 2; }
    /* Отбивки внутри колонки бренда в макете неравные: 19 после логотипа,
       37 до почты и 45 до блока защиты (ноды 87:462, 87:493, 87:495, 87:500) */
    .footer__brand { gap: 19px; }
    .footer__brand > .footer__mail { margin-top: 18px; }
    .footer__secure { margin-top: 26px; }
    /* Вертикальные разделители между колонками в планшетном макете ЕСТЬ
       (ноды 87:510 и 87:511 — линии 206 высотой цвета #e4ecfa на x=393
       и x=565). Раньше они здесь снимались целиком. Блок «Нужна помощь»
       лежит во второй строке и линии не получает — поэтому целимся
       именно в nav-колонки. */
    .footer__grid > * + * { padding-left: 0; border-left: 0; }
    .footer__grid > nav.footer__col {
        padding-left: 29px;
        border-left: 1px solid var(--color-footer-divider);
        min-height: 206px;
    }
    /* В макете копирайт и ссылки идут ОДНОЙ строкой, а не переносятся
       блоком: «© …», «Карта сайта» и «Пользовательское соглашение» на
       первой линии, «Политика конфиденциальности» — на второй.
       display: contents пускает ссылки в общий ряд, и перенос работает
       по одной ссылке, а не всем меню сразу. */
    .footer__bottom { align-items: baseline; row-gap: 10px; column-gap: var(--sp-8); }
    .footer__bottom nav { display: contents; }
    .faq__aside { gap: var(--sp-5); }
    /* В планшетном фрейме кружок 53x53, глиф 18x21, зазоры 25 и 20
       (ноды 87:328, 87:330) */
    .faq__points { gap: 20px; }
    .faq__points li { gap: 25px; }
    .faq__points-icon { width: 53px; height: 53px; }
    .faq__points-icon img { width: 18px; height: auto; }

    /* В планшетном макете у баннера СВОЯ картинка (другой imageRef) и режим
       STRETCH — она скомпонована под 705x272. Мы подставляем десктопную,
       и при object-fit: cover она увеличивалась: книга занимала 269px
       вместо ~233 и закрывала текст. Растягиваем так же, как в макете.
       Когда планшетный ассет выгрузят — подставить его и вернуть cover. */
    .cta-banner__bg { object-fit: fill; object-position: center; }

    /* ---- Типографика планшетного фрейма (по решению заказчика — один
       в один с макетом). Значения сняты font-audit.mjs 768.
       Карточка предложения в этом фрейме — десктопная, уменьшенная
       примерно на 0.87 (290->251 по ширине, 13.5->11 по кеглю), отсюда
       мелкие подписи 8.7-10.4px. Блок идёт последним в секции, чтобы
       перекрывать компонентные правила выше. */
    .hero__title, .hero__title-accent { font-size: 25px; }
    .hero__lead { font-size: var(--fs-14); }
    .section__title { font-size: 25px; }
    .section__lead { font-size: var(--fs-14); }
    .chip { font-size: 12.6px; line-height: 15.2px; }
    .btn { font-size: 12.6px; line-height: 20.7px; }
    /* Кнопка шапки секции в планшетном макете 214x45 (нода 77:2776):
       инсеты 29, текст со стрелкой в одну строку. При наших 30 и без
       запрета переноса текст уходил во вторую строку и кнопка была 56. */
    .btn--outline {
        font-size: var(--fs-15); line-height: 15px;
        padding-inline: 29px; gap: 5px;
        white-space: nowrap;
    }
    /* Колонка заголовка в макете 493 (нода 77:2769), кнопка отбита от
       верха шапки на 44, строки внутри колонки — на 10 */
    .section__head-text { width: 493px; gap: 10px; }
    .section__head > .btn { margin-top: 44px; }
    /* Шапка предложений в макете начинается на 655 (герой кончается на 615),
       а дорожка — на 888, то есть через 38 после шапки */
    /* Между фреймами в планшетном макете всегда 60 (низ предложений 1470 ->
       «доверие» 1530, оно же 2206 -> «эксперт» 2266 и так далее).
       У нас коробки секций стыкуются вплотную, поэтому зазор задаём явно. */
    .section--offers { padding-top: 40px; padding-bottom: 60px; }
    .section--offers .section__head { margin-bottom: 38px; }
    .section--expert { margin-top: 60px; }
    .btn--lg { font-size: var(--fs-16); line-height: 29.7px; }
    /* Бейдж возраста и бейдж рубрики набраны по-разному: 11 и 8.7.
       ВНИМАНИЕ: в планшетном фрейме слайдер продублирован в нескольких
       масштабах (карточки дальше по дорожке мельче), поэтому значения
       берём с ПЕРВЫХ, видимых карточек — ноды 77:2792 и 83:11. */
    .badge--age { font-size: 11px; line-height: 17.1px; }
    .badge--topic { font-size: 8.7px; line-height: 14.3px; }
    /* Логотип в шапке уменьшен, в подвале — полного размера */
    .brand__name { font-size: 10.3px; line-height: 12px; }
    .brand__tagline { font-size: 5.2px; line-height: 6px; }
    .site-footer .brand__name { font-size: var(--fs-17); line-height: 19.8px; }
    .site-footer .brand__tagline { font-size: 9px; line-height: 9.9px; }
    .nav__link { font-size: var(--fs-15); }
    .trust-card__text { font-size: var(--fs-14); }
    .offer-card__title { font-size: var(--fs-15); line-height: 20.1px; }
    .offer-card__desc { font-size: 11px; line-height: 17px; }
    .offer-card__tag { font-size: 10px; line-height: 12.5px; }
    .offer-card__promo { font-size: 10.8px; }
    .offer-card__note { font-size: 10.4px; line-height: 22.9px; }
    .offer-card__reviews { font-size: 9.5px; line-height: 15.7px; }
    /* Первая карточка дорожки — ноды 77:2803/77:2812 (10px); дальше
       по дорожке макет мельчает, ориентируемся на видимую */
    .offer-stats__item dt, .offer-stats__item dd { font-size: 10px; line-height: 12.1px; }
    /* Карточка статьи в узких фреймах (ноды 83:12, 83:13, 83:15 и те же
       на мобильном): заголовок 40 под две строки, текст 61 под три при
       Inter 12/20.3, аватар 24, полоса-разделитель 36. Десктопные 46 и 60
       растягивали ряд. */
    .article-card__title { height: 40px; }
    .article-card__excerpt { height: 61px; font-size: var(--fs-12); line-height: 20.3px; }
    /* Поля тела в узких фреймах меньше десктопных: 21 сверху, 22 по бокам,
       16 снизу, зазор 15 (ноды 100:55 и 83:7 — карточка 385 высотой) */
    .article-card__body { padding: 21px 22px 16px; gap: 15px; }
    .article-card__meta { padding-top: 12px; }
    .article-card__meta img { width: 24px; height: 24px; }
    .article-card__author { font-size: 11.3px; line-height: 18.6px; }
    .faq__text { font-size: 19.6px; line-height: 23.7px; }
    .faq__points strong { font-size: var(--fs-16); }
    .faq__points span { font-size: 13px; line-height: 15.7px; }
    .expert__points li { font-size: var(--fs-14); line-height: 16.9px; }
    .footer__title { font-size: var(--fs-14); }
    .footer__mail { font-size: var(--fs-15); }
    /* Колонка подвала на планшете уже десктопной (285 против 309), и при
       десктопных инсетах 21 строке «ФЗ-256. Ваши данные защищены» не
       хватало места — уходила в четвёртую строку и растила подвал на 24px */
    .footer__secure { padding: 20px 14px 18px; }
    /* строка заголовка баннера задана выше по нодовому боксу (41), сюда
       раньше попадало значение lineHeightPx = 28 и перебивало его */
    .footer__bottom nav a:first-child { font-size: var(--fs-12); line-height: 14.5px; }
}

/* ============================================================
   МОБИЛЬНЫЙ — фрейм макета 320x8033
   Верхняя граница 767px; проверено на 320 и 390.
   ============================================================ */
@media (max-width: 767px) {
    .container,
    .section--faq > .container,
    .site-footer > .container { padding-inline: var(--sp-6); }
    .offer-card, .article-card { min-height: 0; }
    .trust-card { height: auto; }
    .section__head-text { width: auto; }
    .section { padding-block: var(--sp-10); }
    /* Мобильный фрейм: все заголовки 20/700 с lineHeightPx 27, лид 14/24.8.
       Без этого десктопный line-height 47.5px тянулся на мобильный. */
    .section__title { font-size: var(--fs-20); line-height: 27px; width: auto; }
    .section__lead { font-size: var(--fs-14); line-height: 24.8px; width: auto; }
    .hero__title { font-size: var(--fs-20); line-height: 27px; }
    .hero__lead { font-size: var(--fs-14); line-height: 24.8px; }
    /* В мобильном макете чипы стоят в ДВА ряда по два (y=330 и y=383),
       а не одной прокручиваемой строкой. Порядок в рядах переставлен под
       ширины: Жильё+Образование, затем Строительство+Ипотека. DOM оставляем
       десктопным (Жильё, Ипотека, Образование, Строительство) и меняем
       только визуальный порядок. */
    .chips { flex-wrap: wrap; width: 100%; max-width: 100%; gap: 8px; }
    .chip:nth-child(1) { order: 1; }   /* Жильё */
    .chip:nth-child(3) { order: 2; }   /* Образование */
    .chip:nth-child(4) { order: 3; }   /* Строительство */
    .chip:nth-child(2) { order: 4; }   /* Ипотека */
    /* В мобильном фрейме блока «10 000+ семей» нет: герой кончается на CTA
       (низ 560). Он и давал ~112px лишнего хвоста. */
    .social-proof { display: none; }
    .chip { flex: none; }
    .section__head { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }

    .brand__tagline { display: none; }

    .hero__title { max-width: none; }
    .hero__lead { font-size: var(--fs-14); }
    /* Мобильный герой в макете кадрирован по светлой левой части фото:
       imageTransform ноды image 1 даёт окно 11.9%..42.6% по ширине.
       При object-fit: cover в боксе 320x560 видно ровно 30.7% ширины,
       поэтому окно совпадает с макетным при привязке 17.1%.
       Десктопная привязка (right) ставила заголовок поверх людей — текст
       был нечитаем. Планшет сюда не попадает: там герой — тот же фрейм
       1366x615, обрезанный вьюпортом, и правая привязка верна. */
    .hero__bg { object-position: 17.1% center; }
    /* Ритм героя в макете: чипы кончаются на 431, CTA-группа на 451 -> зазор 20.
       Кнопка 290x47 при тексте 16/700, под ней подпись 19 с зазором 5. */
    .hero__actions { flex-direction: column; align-items: flex-start; margin-top: var(--sp-7); }
    .hero__cta-group { width: 100%; align-items: stretch; gap: 5px; }
    .btn--lg { padding: 11px var(--sp-8); font-size: var(--fs-16); }

    /* Чип в мобильном макете: 49 высоты, иконка 30x30, инсеты 9, зазор 10 */
    .chips { gap: var(--sp-2); }
    .chip {
        min-height: 49px;
        gap: var(--sp-3);
        padding: 9px;
        font-size: var(--fs-12);
    }
    .chip img { width: 30px; height: 30px; }
    .chip:last-child { padding-right: 9px; }


    /* Слайдеры на мобильном — карточка почти во всю ширину вьюпорта */
    /* Карточка предложения в мобильном макете 251x561 (была 272) */
    .offers { grid-auto-columns: 251px; }
    /* Карточка журнала в мобильном макете 290x385: обложка 173,
       заголовок Manrope 15/700 в две строки по 20 */
    .articles { grid-auto-columns: 290px; }
    .offer-card { min-height: 561px; }
    .article-card { min-height: 385px; }
    .article-card__media img { aspect-ratio: 288 / 173; }
    .article-card__title { font-size: var(--fs-15); line-height: 20px; }
    /* FAQ: заголовок 185, пункты 231, аккордеон 521 -> блок 1005.
       Свои поля у блока в мобильном макете почти нулевые (4 сверху, 0 снизу):
       воздух вокруг даёт .section, а не .faq. Зазор колонок 34. */
    .faq { padding-block: 4px 0; gap: 34px; }
    /* сброс планшетной двухколоночной раскладки FAQ */
    .faq__aside { display: flex; flex-direction: column; gap: var(--sp-4); }
    .faq__points { grid-column: auto; grid-row: auto; }
    /* Планшетная раскладка ставит «Нужна помощь» во вторую строку правой
       половины; в мобильном фрейме колонка одна и порядок обычный.
       Вертикальные линии и их min-height 206 — тоже планшетный приём:
       в мобильном фрейме колонки разделены ГОРИЗОНТАЛЬНЫМИ линиями. */
    .footer__grid > *:last-child { grid-column: auto; grid-row: auto; }
    .footer__grid > nav.footer__col { padding-left: 0; border-left: 0; min-height: 0; }
    .faq__points { margin-top: var(--sp-5); gap: var(--sp-5); }
    /* В мобильном фрейме кружок 58x58, глиф 19x23 (ноды 107:251, 107:253),
       текстовый блок 182 (нода 107:255) — при десктопных 224 строки
       переносились реже макета и пункты выходили на 29px короче */
    .faq__points-icon { width: 58px; height: 58px; }
    .faq__points-icon img { width: 19px; height: auto; }
    .faq__points-text { width: 182px; }
    .faq__list { gap: var(--sp-2); }
    .faq__q { min-height: 0; padding: var(--sp-4) var(--sp-5); gap: var(--sp-4); }
    /* Вопрос в мобильном макете 14/16.9, у меня тянулся десктопный 20px */
    .faq__text { font-size: var(--fs-14); line-height: 16.9px; }
    .faq__num { width: 26px; height: 26px; font-size: var(--fs-13); }
    .faq__plus { font-size: var(--fs-20); }
    .faq__points-text strong { font-size: var(--fs-15); }
    .faq__points-text span { font-size: var(--fs-13); }
    .section--faq .section__lead br { display: none; }
    /* CTA-баннер на мобильном вертикальный: 295x604 */
    /* В мобильном макете (нода 102:186) картинка занимает верх баннера,
       а контент лежит внизу во всю ширину с инсетом 11 — боковой отступ
       33% отсюда надо снять, иначе блок вылезает за баннер. */
    .cta-banner { min-height: 604px; align-items: flex-end; }
    /* В мобильном фрейме у баннера свой ассет (STRETCH под 290x604) — там
       иллюстрация перекомпонована вертикально. Десктопную растягивать
       нельзя (пропорция 2.99 против 0.48), поэтому кадрируем: книга лежит
       Мобильный ассет выгружен отдельно (290x292 — иллюстрация с
       прозрачными скруглениями), он кладётся сверху во всю ширину,
       а ниже баннер продолжается его же синим #0540c9 — цвет снят
       с нижней кромки картинки, поэтому шва не видно. */
    .cta-banner { background: var(--color-cta-mob-bg); }
    .cta-banner__bg { top: 0; left: 0; width: 100%; height: auto; object-fit: fill; }
    /* Мобильный баннер (нода 102:185, 290x604): контент 273 шириной при
       инсетах 11 слева и 6 справа, низ 72. Заголовок 273x82 — ДВЕ строки;
       при наших 266 он срывался на третью. Кнопка 273x52 с инсетами 34. */
    /* Нижний инсет 72 — как в макете (кнопка кончается на 5659 при баннере
       до 5731). С интерлиньяжем заголовка 28 он занимает 84 против
       макетных 82, поэтому блок встаёт на 249 от верха вместо 261 —
       разница в 12px от лишней строки заголовка. */
    .cta-banner__content { width: 100%; margin-left: 0; padding: 0 6px 72px 11px; }
    .cta-banner__title { width: auto; margin-bottom: 14px; line-height: 28px; }
    .cta-banner__list { margin-bottom: 28px; gap: 8px; }
    .cta-banner__list li { gap: 17px; min-height: 21px; }
    /* Маркер — кружок 18x18 (нода 102:191), а 11x11 это галочка ВНУТРИ него
       (нода 102:192). Раньше кружку доставался размер галочки. */
    .cta-banner__list li::before { width: 18px; height: 18px; background-size: 11px 11px, cover; }
    /* Кнопка 273x52: текст со стрелкой 216 при инсетах 34 и 23 (нода
       102:211). При наших 34/34 содержимому не хватало 13px и текст
       уходил во вторую строку — кнопка выходила 72. */
    /* Кнопка 273x52 (нода 102:210): текст Inter 18/700 шириной 185,
       стрелка 24, инсеты 34 и 23. Тянулся планшетный кегль 20 — из-за
       него строка не влезала и приходилось ужимать поля. */
    .cta-banner .btn { padding: 14px 23px 14px 34px; font-size: var(--fs-18); white-space: nowrap; }

    /* Карточка доверия в мобильном макете 290x244: инсеты 18/25, иконка 65,
       зазор до заголовка 20, заголовок 18/700, текст 15/400.
       Планшетный блок ужимал иконку до 48 и текст до 13 — сбрасываем. */
    .trust-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
    .trust-card { min-height: 0; gap: var(--sp-7); padding: 25px 18px; }
    .trust-card__icon { width: 65px; height: 65px; }
    .trust-card__title { font-size: var(--fs-18); }
    .trust-card__text { font-size: var(--fs-15); }
.cta-banner__title { font-size: var(--fs-20); }
    .btn--xl { font-size: var(--fs-18); }

    .faq__q { padding: var(--sp-6); gap: var(--sp-4); }
    .faq__text { font-size: var(--fs-16); }
    .faq__points li { gap: 16px; }

    /* Сброс планшетной двухколоночной раскладки эксперта.
       В мобильном макете порядок другой: заголовок (351) -> карточки (308)
       -> фото с цитатой (490) -> кнопка (71) -> пункты (222). Кнопка уезжает
       ПОД фото, поэтому .expert__main распускаем в сетку и правим порядок. */
    .expert { grid-template-columns: 1fr; gap: var(--sp-4); }
    .expert__main { display: contents; }
    .expert__head     { order: 1; }
    .expert__features { order: 2; }
    .expert__aside    { order: 3; }
    .expert__cta      { order: 4; }
    .expert__features { grid-template-columns: 1fr; gap: var(--sp-3); }
    /* В мобильном макете три карточки укладываются в 308px суммарно (~100 каждая):
       иконка уходит влево, а не над текстом */
    /* Размеры из нод: карточка 290x91, инсеты 20/11, иконка 29x29,
       зазор до текста 7, заголовок Inter 13/700, описание 12/400
       (ноды 87:2717, 87:2719, 87:2724, 87:2725) */
    .feature-card {
        display: grid;
        grid-template-columns: 29px 1fr;
        grid-template-areas: 'icon title' 'icon text';
        /* Иконка и текст начинаются с одной верхней линии: в макете обе
           ноды стоят на y=3344 (87:2719 и 98:23). Раньше иконка
           центрировалась по высоте карточки. */
        align-content: start;
        column-gap: 7px;
        height: auto; min-height: 0;
        padding: 20px 11px;
    }
    .feature-card__icon { grid-area: icon; width: 29px; height: 29px; margin: 0; align-self: start; }
    .feature-card strong { grid-area: title; margin-bottom: 5px; font-size: var(--fs-13); }
    .feature-card span { grid-area: text; font-size: var(--fs-12); }
    /* Мобильный макет: фото 282x252, цитата 272x274 заходит на фото на 36
       (на десктопе нахлёст 19) -> вместе 490. */
    .expert__visual { width: 100%; height: 252px; }
    /* Ширина во всю колонку — вровень с фото. В макете фото и карточка
       обе 272 (нода 87:2751 — само фото; 282 у группы 87:2750 из-за
       выступающего кружка), у нас фото занимает всю ширину контейнера,
       поэтому и карточку тянем на 100%, иначе справа оставался уступ. */
    .quote-card {
        width: 100%;
        min-height: 0;
        margin-top: -36px;
        padding: 18px 13px 29px var(--sp-6);
    }
    /* Кавычка в мобильном макете стоит на +10,+18 (нода 87:2761),
       у нас она была прижата к самому верху карточки (+2) */
    .quote-card__mark { left: 10px; top: 18px; font-size: 39px; }
    /* Планшетные приёмы, которых в мобильном фрейме нет: сдвиг правой
       колонки на 16 (там одноколоночная раскладка) и зазор 39 после линии
       — в мобильном макете он 31 (нода 87:2760, карточка 272x274) */
    .expert__aside { margin-top: 0; }
    .quote-card figcaption { padding-top: 31px; }
    /* lineHeightPx ноды 16.94 (100% intrinsic), а не десктопный --lh-loose 1.7:
       из-за него цитата вырастала почти на 80px */
    /* Текст в макете начинается на 44 от края карточки, подпись — на 42
       (ноды 87:2762, 87:2764). При инсете карточки 16 это отступы 28 и 26;
       стояло по 44, из-за чего текст был 196 вместо 215 и шёл лишней строкой. */
    .quote-card blockquote { margin-left: 28px; font-size: var(--fs-14); line-height: 16.94px; }
    .quote-card figcaption { margin: var(--sp-4) 0 0 26px; }
    /* В узких фреймах росчерк мельче — 60x19 (ноды 80:3598, 87:2766),
       с поправкой на вылет обводки это 62x22; в макете он на +204,+179
       при линии на +173, то есть 6 от неё и 6 от правого края */
    .quote-card figcaption::after { right: 6px; top: 6px; width: 62px; height: 22px; }
    .quote-card figcaption strong { font-size: var(--fs-17); }
    /* Кнопка эксперта в макете 290x47, подпись 16 с зазором 8 -> группа 71 */
    /* nowrap — приём десктопной кнопки 387px; на узких экранах он не даёт
       строке переноситься и распирает страницу до 377px при вьюпорте 320 */
    .expert__cta .btn { white-space: normal; padding-inline: var(--sp-6); }
    .expert__cta { gap: var(--sp-2); margin-top: var(--sp-4); }
    /* Кегль кнопки в мобильном макете 13, а не 16: текстовый бокс 250x16
       (нода 87:2742). При 16 строка не влезала в 256 и уходила во вторую,
       кнопка выходила 63 вместо 47. */
    .expert__cta .btn { min-height: 47px; font-size: var(--fs-13); gap: 7px; }
    /* Стрелка здесь 10x9 (нода 87:2744), а не десктопные 17x16: с ними
       тексту не хватало 2px и строка уходила во вторую */
    .expert__cta .btn::after { width: 10px; height: 9px; }
    .expert__note { font-size: var(--fs-13); }
    /* Иконка перед подписью здесь 11x13 (нода 87:2746), а не десктопные 15x18 */
    .expert__note::before { width: 11px; height: 13px; }
    /* Подвал в мобильном макете идёт другим порядком: лого -> описание ->
       КАТАЛОГ -> ПОЛЕЗНОЕ -> НУЖНА ПОМОЩЬ -> почта -> «Защита данных».
       Почта и «Защита» лежат в .footer__brand, поэтому распускаем его
       в сетку через display: contents и правим только порядок — DOM
       остаётся десктопным. Между колонками — горизонтальные разделители
       (в макете линии на y=7178 и y=7369). */
    /* Инсеты карточки подвала в мобильном макете: 31 сверху, 14 по бокам
       (контент на x=30 при карточке на x=16) — планшетные 53/24 велики */
    .footer-card { min-height: 0; padding: 31px 14px 26px; }
    /* В макете между группами подвала 48–56 (зазор сетки + отбивка до линии)
       и 35 между ссылками внутри колонки */
    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    /* Колонка меню в мобильном макете 142 (нода 7012..7154): заголовок 18,
       отбивка 22, три ссылки по 18 с шагом 24. Стояло 30 и 41 — каждая
       колонка была на 31px выше. */
    .footer__col ul { gap: 24px; }
    .footer__brand { display: contents; }
    .footer__brand > .brand { order: 1; }
    .footer__about          { order: 2; }
    .footer__col            { order: 3; }
    .footer__brand > .footer__mail { order: 4; }
    .footer__secure         { order: 5; }
    nav.footer__col { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--color-border); }
    /* Пункты в мобильном макете — столбец с разделителями между строками */
    /* В мобильном фрейме (нода 87:812) заголовок отбит от верха героя на 57,
       а низ героя — на 38 после кнопки; планшетные 72/72 давали +68 */
    .hero { min-height: 560px; }
    .hero__inner { padding-block: 57px 38px; }
    /* В мобильном макете фото кроет герой целиком (нода 87:810, 320x560),
       планшетный сдвиг -100/-3 сюда не годится */
    .hero__bg { left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
    .hero::before { display: none; }   /* матовой подложки в мобильном фрейме нет */
    /* Шапка лежит поверх героя. В мобильном макете логотип 117x24
       заканчивается на y=41 (нода 87:798), а заголовок начинается на 57.
       У нас шапка держала десктопные 73 и срезала первую строку H1. */
    .header__inner { height: 56px; }
    .site-header .brand__logo { width: 21px; height: 22px; }
    /* Кнопка шапки на мобильном идёт под текстом, а не сбоку, поэтому
       планшетная отбивка 44 (она там выравнивает кнопку по заголовку)
       здесь избыточна. В самом мобильном фрейме этих кнопок нет вовсе. */
    .section__head > .btn { margin-top: 16px; }
    .section__head { margin-bottom: 30px; }
    /* Планшетные 60 у «эксперта» задавали зазор между фреймами макета;
       в мобильной раскладке верхний отступ секциям не нужен */
    .section { margin-top: 0; }
    /* В мобильном фрейме декора нет — снимаем и планшетный вариант */
    .expert__aside::after { display: none; }
    /* Ограничение 178 — десктопное (там заголовок карточки в две строки).
       В мобильном макете бокс 263 (нода 87:2528) и заголовок в одну. */
    .trust-card__title { max-width: none; }
    /* В мобильном макете (нода 87:2767) плашка 290x222, радиус 19,
       пункты столбиком с ГОРИЗОНТАЛЬНЫМИ разделителями */
    .expert__points {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: 25px;
        padding: 23px 11px;
        border-radius: 19px;
    }
    .expert__points li,
    .expert__points li:nth-child(1),
    .expert__points li:nth-child(2),
    .expert__points li:nth-child(3) { width: auto; gap: 10px; min-height: 32px; font-size: var(--fs-13); line-height: 16px; }
    .expert__points li + li {
        margin-left: 0;
        padding-left: 0;
        padding-top: var(--sp-6);
        margin-top: var(--sp-6);
        border-left: 0;
        border-top: 2px solid var(--color-points-divider);
    }
    .expert__points li::before { width: 25px; height: 25px; }
    .brand__tagline { width: auto; }
    .footer__brand { grid-column: auto; }
    .footer__bottom { flex-direction: column; }
    /* display возвращаем явно: планшетный contents пускал ссылки в общий
       ряд, а в мобильном фрейме они идут своим столбцом */
    .footer__bottom nav { display: flex; flex-direction: column; gap: var(--sp-2); }

    /* ---- Типографика мобильного фрейма (один в один с макетом).
       Значения сняты font-audit.mjs 320. В отличие от планшетного,
       мобильный фрейм по большей части нарисован заново (H1 Manrope 20
       против десктопных 34), но карточки в слайдерах — те же уменьшенные
       копии, поэтому подписи мелкие. Блок последний в секции. */
    /* Нода 87:813 сообщает lineHeightPx 20, но её бокс — 91 на три строки,
       то есть 30 на строку. Берём бокс: при 20 заголовок выходил 80 вместо
       макетных 120. */
    .hero__title, .hero__title-accent { font-size: 20px; line-height: 1.5; }
    .hero__note { font-size: 13px; }
    /* Кнопки в мобильном макете набраны по-разному по типам */
    .btn { font-size: 13px; line-height: 15.7px; }
    .btn--lg { font-size: var(--fs-16); line-height: 29.7px; }
    .btn--xl { font-size: var(--fs-18); line-height: 21.8px; }
    .btn--block { line-height: 20.7px; }
    .offer-stats__item dt, .offer-stats__item dd { font-size: 10px; line-height: 12.1px; }
    .section__lead { line-height: 27.2px; }
    .cta-banner__title { font-size: 18px; }
    /* Значения ПЕРВОЙ карточки дорожки (ноды 87:1909, 100:62, 100:66):
       в мобильном фрейме слайдеры продублированы копиями в разном
       масштабе, единого значения на все карточки в макете просто нет. */
    .offer-card__title { font-size: var(--fs-15); }
    .article-card__excerpt { font-size: var(--fs-12); }
    .article-card__author { font-size: var(--fs-12); }
    .faq__text { font-size: var(--fs-14); }
    .faq__points strong { font-size: 13px; line-height: 15.7px; }
    .footer__title { font-size: var(--fs-15); }
    .cta-banner__lead { font-size: var(--fs-15); line-height: 18.2px; }
}

/* ============================================================
   ПРОМЕЖУТОК 1200–1365 — в макете такого фрейма нет.
   Здесь работает планшетная раскладка с полями 32, и контейнер
   тянулся за окном (до 1301 при 1365). Ограничиваем коробку 1170.
   Блок идёт последним: он перекрывается с @media (max-width: 1365px)
   и при равной специфичности должен стоять после него.
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1365px) {
    /* Поля обнуляем: колонка 1170 набирается самой коробкой, а десктопной
       раскладке нужна вся ширина — с полями 94 контент падал до 982,
       и фиксированные колонки (666 + 44 + 466) переставали помещаться. */
    .container { max-width: 1170px; padding-inline: 0; }
    .section--faq > .container,
    .site-footer > .container { padding-inline: 0; }
}