/* ============================================================
   БФЛ Брянск — вёрстка этапа 9. Перевёрстка 1:1 по макету .pen.
   Значения = переменные ds-* (get_variables из бфл-брянск-seo.pen).
   Mobile-first; @media min-width 768 / 1280.
   ============================================================ */

:root {
  --brand: #2E50E6;  --brand-deep: #2440C4;  --brand-50: #EEF1FE;
  --hero: #EDF1FE;   --ink: #0F1B2D;  --ink-dark: #0B1424;
  --muted: #5B6677;  --muted-dark: #9FB0C7;  --on-dark: #EAF1FB;
  --line: #E4E8F0;   --bg: #FFFFFF;   --bg-soft: #F4F7FC;
  --success: #15A45A; --success-50: #E7F6EE;
  --orange: #C2410C; --orange-50: #FFF1E8;  --star: #FFB400;

  --r-btn: 12px;  --r-card: 16px;  --r-input: 10px;  --r-pill: 100px;
  --font-head: "Alegreya", Georgia, serif;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-card: 0 10px 30px rgba(15,27,45,.10);
  --shadow-soft: 0 4px 16px rgba(15,27,45,.08);

  --gutter: 20px;  --section-py: 40px;
  --w-wide: 1152px;  --w-mid: 860px;  --w-tight: 820px;
}
@media (min-width: 768px) { :root { --gutter: 40px; --section-py: 56px; } }
@media (min-width: 1280px){ :root { --gutter: 64px; --section-py: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--ink); background: #DCE2EC; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (min-width: 768px) { body { font-size: 16px; } }

/* ---------- Фикс-контейнер: ступени 375 / 768 / 1280 (заморозка ширин) ----------
   Между шагами ширина НЕ плывёт; вне [375..1280] — JS-зум (site.js).
   Всё, что должно масштабироваться зумом, лежит внутри .page. */
.page { width: 375px; max-width: 100%; margin: 0 auto; background: var(--bg); position: relative; }
@media (min-width: 768px)  { .page { width: 768px; } }
@media (min-width: 1280px) { .page { width: 1280px; } }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink); margin: 0 0 .5em; text-wrap: balance; }
/* Типо-шкала = дизайн-токены-вёрстки.md [375/768/1280] */
h1 { font-size: 30px; font-weight: 800; line-height: 1.10; letter-spacing: -.6px; }
h2 { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.4px; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; }
@media (min-width: 768px) {
  h1 { font-size: 38px; line-height: 1.08; letter-spacing: -.8px; }
  h2 { font-size: 28px; }
}
@media (min-width: 1280px) {
  h1 { font-size: 48px; line-height: 1.05; letter-spacing: -1px; }
  h2 { font-size: 34px; line-height: 1.10; letter-spacing: -.6px; }
}

/* ---------- Секции: фон во всю ширину, контент центрирован ---------- */
.section { padding-block: var(--section-py); padding-inline: var(--gutter); }
.section--soft { background: var(--bg-soft); }
.section__in { width: 100%; max-width: var(--w-wide); margin-inline: auto; }
.section__in--mid { max-width: var(--w-mid); }
.section__in--tight { max-width: var(--w-tight); }
.section__lead { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 68ch; margin: 0 0 4px; }  /* body-уровень: 14/16 */
@media (min-width: 768px) { .section__lead { font-size: 16px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { line-height: 1.7; }

/* ---------- Кнопки ---------- */
/* Лейблы кнопок — Alegreya (канон §5 атласа); исключения: кнопка шапки и кнопки ExpertCard — Golos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-size: 16px; font-weight: 700; padding: 16px 28px; border: 1px solid transparent; cursor: pointer; text-align: center; max-width: 100%; white-space: normal; transition: background .15s, transform .05s; }
.expert-card .btn { font-family: var(--font-body); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* Зелёная пилюля — ТОЛЬКО hero + финальная CTA (по макету) */
.btn--cta { background: var(--success); color: #fff; border-radius: var(--r-pill); box-shadow: var(--shadow-soft); }
.btn--cta:hover { background: #12924f; }
/* Синяя rect-12 — рабочая кнопка (шапка, квиз, форма, тест, эксперт) */
.btn--brand { background: var(--brand); color: #fff; border-radius: var(--r-btn); }
.btn--brand:hover { background: var(--brand-deep); }
.btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-btn); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
/* Контурная синяя пилюля (мост к блогу) */
.btn--outline { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); border-radius: var(--r-pill); }
.btn--outline:hover { background: var(--brand); color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.tlink { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; }

/* ---------- Header (контент центрирован по 1152) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); }
.site-header__row { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-head); font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.brand__sub { display: none; font-size: 12px; color: var(--muted); }
@media (min-width: 768px) { .brand__name { font-size: 20px; } .brand__sub { display: block; } }
.main-nav { display: none; }
.main-nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.main-nav a { color: var(--ink); font-size: 15px; font-weight: 500; }
.main-nav a:hover { color: var(--brand); text-decoration: none; }
.site-header__cta { display: none; font-family: var(--font-body); font-size: 14px; padding: 11px 18px; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }
@media (min-width: 1280px) { .site-header__cta { font-size: 15px; padding: 13px 22px; } }
.mobile-menu { position: relative; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; list-style: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); cursor: pointer; }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle svg { width: 22px; height: 22px; }
.mobile-menu .icon-close { display: none; }
.mobile-menu[open] .icon-menu { display: none; }
.mobile-menu[open] .icon-close { display: inline; }
.mobile-nav { position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: min(78vw, 320px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav a { display: block; padding: 12px 4px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav li:last-child a { border-bottom: none; }
@media (min-width: 1280px) { .main-nav { display: block; } .site-header__cta { display: inline-flex; } .mobile-menu { display: none; } }

/* ---------- Hero ---------- */
.hero { background: var(--bg); }
.hero__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1280px) { .hero__grid { grid-template-columns: 1fr 420px; gap: 48px; } }
/* макет 375: lead 16/normal #0F1B2D; левая колонка ритм 24 */
/* Лид: 14 на 375 (решение клиента 07.07 «обычный текст на мобиле = 14»), 17 на 768, 18 на 1280 */
.hero__lead { font-size: 14px; line-height: 1.6; color: var(--ink); max-width: 60ch; margin: 12px 0 0; }
@media (min-width: 768px) { .hero__lead { font-size: 17px; } }
@media (min-width: 1280px) { .hero__lead { font-size: 18px; } }
.hero__cta { margin: 24px 0 20px; }
.hero__cta .btn { width: 100%; }
@media (min-width: 768px) { .hero__cta .btn { width: auto; } }
/* макет 375: чипы ВЕРТИКАЛЬНЫМ стеком (gap 10), padding [8,14]; на 768+ — в ряд */
.hero__chips { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 768px) { .hero__chips { flex-direction: row; flex-wrap: wrap; gap: 12px; } }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-50); border-radius: var(--r-pill); padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ink); }
.chip svg { width: 18px; height: 18px; color: var(--brand); }
/* фото — contain (по макету), не обрезаем; макет 375 height 318 */
.hero__photo { border-radius: 20px; border: 1px solid var(--line); background: var(--bg-soft) center / contain no-repeat; min-height: 318px; }
@media (min-width: 1280px) { .hero__photo { min-height: 420px; } }

/* ---------- Капсула (левый акцент 5px, clip 2 строки + Читать полностью) ---------- */
.capsule { background: var(--brand-50); border-radius: var(--r-card); border-left: 5px solid var(--brand); padding: 24px 28px 24px 30px; }
/* Кикер 12/12/13, текст ответа 16/17/18 по ширинам (атлас 3.3) */
.capsule__kicker { display: flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-family: var(--font-head); margin-bottom: 14px; }
@media (min-width: 1280px) { .capsule__kicker { font-size: 13px; } }
.capsule__kicker svg { width: 18px; height: 18px; }
.capsule__body { color: var(--ink); font-size: 14px; line-height: 1.6; margin: 0; }
@media (min-width: 768px) { .capsule__body { font-size: 17px; } }
@media (min-width: 1280px) { .capsule__body { font-size: 18px; } }
/* Решение клиента 07.07: жирные выделения в капсуле визуально НЕ рендерим (strong остаётся в DOM — заморозка цела) */
.capsule__body strong, .capsule__body b { font-weight: 400; }
.clamp-cb { position: absolute; opacity: 0; pointer-events: none; }
/* Решение клиента 07.07 (вечер-3): «Прямой ответ» ВСЕГДА и ВЕЗДЕ сворачивается до 3 строк */
.clamp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.clamp-cb:checked ~ .clamp-text { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.clamp__toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 700; font-size: 14px; margin-top: 8px; cursor: pointer; }
.clamp-cb:checked ~ .clamp__toggle .clamp__lbl-more { display: none; }
.clamp-cb:not(:checked) ~ .clamp__toggle .clamp__lbl-less { display: none; }
.clamp__toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.clamp-cb:checked ~ .clamp__toggle svg { transform: rotate(180deg); }

/* ---------- Калькулятор (светлая карточка) ---------- */
/* макет: калькулятор-карточка brand-50 radius 20; на 375 padding уменьшен (квиз-инсет ~10),
   иначе тройной вложенный padding сужает опции и текст переносится */
.calc { background: var(--brand-50); border-radius: 20px; padding: 16px; max-width: 849px; margin-inline: auto; }
@media (min-width: 768px) { .calc { padding: 40px; } }
.calc__head { text-align: center; margin-bottom: 24px; }
.calc__head h2 { margin-bottom: 8px; }
.calc__head p { color: var(--muted); max-width: 52ch; margin: 0 auto; }
.quiz { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.quiz__top { margin-bottom: 18px; }
.quiz__step-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.quiz__segs { display: flex; gap: 6px; }
.quiz__seg { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.quiz__seg.is-active { background: var(--brand); }
.quiz__kicker { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brand); font-family: var(--font-head); margin-bottom: 10px; }
.quiz__q { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.quiz__options { display: grid; gap: 10px; margin-bottom: 20px; }
.quiz__opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-input); cursor: pointer; background: #fff; font-size: 15px; width: 100%; text-align: left; }
.quiz__opt:hover { border-color: var(--brand); background: var(--brand-50); }
.quiz__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.quiz__opt.is-selected .quiz__radio { border-color: var(--brand); }
.quiz__opt.is-selected .quiz__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.quiz__warn { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.quiz__warn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--star); flex-shrink: 0; }

/* ---------- Две колонки (контент + sticky/форма) ---------- */
.split { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1280px) { .split { grid-template-columns: 1fr 380px; gap: 48px; } .split--wideimg { grid-template-columns: 1fr 420px; } }
@media (min-width: 1280px) { .sticky-col { position: sticky; top: 88px; } }
.illus { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-soft) center / cover no-repeat; min-height: 300px; }
@media (min-width: 1280px) { .illus { min-height: 422px; } }

/* ---------- Карточки-иконки (Почему) ---------- */
.grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2,1fr); } .grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1280px) { .grid--3 { grid-template-columns: repeat(3,1fr); } }
.fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; height: 100%; }
.fcard__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-50); display: inline-flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 16px; }
.fcard__icon svg { width: 26px; height: 26px; }
.fcard h3 { margin: 0 0 8px; }
.fcard p { margin: 0; color: var(--muted); }

/* Долги: две карточки-списка */
.ledger { display: grid; gap: 24px; margin-top: 6px; }
@media (min-width: 768px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger__card { border-radius: var(--r-card); padding: 28px; }
.ledger__card--yes { background: var(--success-50); }
.ledger__card--no { background: #fff; border: 1px solid var(--line); }
/* макет: «Спишется/Останется» 17/18/19 по ширинам */
.ledger__h { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 17px; margin-bottom: 14px; }
@media (min-width: 768px) { .ledger__h { font-size: 18px; } }
@media (min-width: 1280px) { .ledger__h { font-size: 19px; } }
.ledger__h svg { width: 24px; height: 24px; }
.ledger__card--yes .ledger__h svg { color: var(--success); }
.ledger__card--no .ledger__h svg { color: var(--muted-dark); }
.ledger__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ledger__list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }  /* шрифт = body: 14 мобайл / 16 десктоп (макет) */
.ledger__list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; }
.ledger__card--yes .ledger__list svg { color: var(--success); }
.ledger__card--no .ledger__list svg { color: var(--muted-dark); }

/* Плитки «две дороги» (ServiceNavTile) */
.roadtile { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; height: 100%; display: flex; flex-direction: column; }
.roadtile__plate { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.roadtile__plate svg { width: 28px; height: 28px; }
.roadtile p, .roadtile__desc { color: var(--muted); margin: 0; }
.roadtile .tlink { margin-top: auto; padding-top: 16px; }
/* Клип описания до 3 строк + «Развернуть» (полный текст в DOM) */
.clamp-text3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.clamp-cb:checked ~ .clamp-text3 { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.clamp__toggle--road { font-weight: 500; margin-bottom: 4px; }
/* Кламп 3 строки + «Развернуть» на ВСЕХ ширинах (решение клиента 07.07, блок-атлас §6 п.1) */

/* Что останется: список */
.lead-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lead-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.lead-list svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }

/* Цены: список */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.check-list svg { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* Компакт лид-форма */
.lead-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 28px; display: grid; gap: 14px; }
.lead-form__chip { display: inline-flex; align-items: center; gap: 7px; align-self: start; background: var(--success-50); color: var(--success); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill); }
.lead-form__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.lead-form h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.lead-form__sub { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.45; }
.lead-form input[type="text"], .lead-form input[type="tel"] { width: 100%; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: var(--r-input); font-family: var(--font-body); font-size: 15px; color: var(--ink); background: #fff; }
.lead-form input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.5; }
.consent input { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; }

/* ---------- Этапы (вертикальный узкий список) ---------- */
.steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 28px; margin: 0; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 20px; }
.steps h3 { margin: 0 0 4px; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } /* канон §4.8: текст шага 15 на всех ширинах */

/* ---------- Аккордеон (Head 24px + фон белый + рамка) ---------- */
/* Аккордеон выделяется на секции: на белой секции — серый фон, на серой — белый */
.accordion { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); overflow: hidden; }
.section--soft .accordion { background: var(--bg); }
.accordion + .accordion { margin-top: 14px; }
.accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; }
.accordion > summary::-webkit-details-marker { display: none; }
.accordion__title { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
@media (min-width: 768px) { .accordion__title { font-size: 22px; } }
@media (min-width: 1280px) { .accordion__title { font-size: 24px; } }
.accordion__chev { flex-shrink: 0; width: 24px; height: 24px; transition: transform .2s; color: var(--muted); }
.accordion[open] .accordion__chev { transform: rotate(180deg); }
.accordion__body { padding: 0 28px 24px; }
.accordion__body > *:first-child { margin-top: 0; }
.accordion__body > *:last-child { margin-bottom: 0; }
/* Аккордеон, который на широких ширинах «разбирается» в открытую прозу (атлас: Документы ≥768, «Что такое» ≥1280) */
@media (min-width: 768px) {
  .accordion--prose768 { border: 0; background: transparent !important; border-radius: 0; overflow: visible; }
  .accordion--prose768 > summary { padding: 0 0 18px; pointer-events: none; }
  .accordion--prose768 .accordion__chev { display: none; }
  .accordion--prose768 .accordion__title { font-size: 28px; }
  .accordion--prose768 .accordion__body { padding: 0; }
}
@media (min-width: 1280px) {
  .accordion--prose768 .accordion__title { font-size: 34px; }
  .accordion--prose1280 { border: 0; background: transparent !important; border-radius: 0; overflow: visible; }
  .accordion--prose1280 > summary { padding: 0 0 18px; pointer-events: none; }
  .accordion--prose1280 .accordion__chev { display: none; }
  .accordion--prose1280 .accordion__title { font-size: 34px; }
  .accordion--prose1280 .accordion__body { padding: 0; }
}
/* FAQ = безфоновый список с нижними разделителями (компонент RJdIk: вопрос 18/700, ответ 15 muted) */
.faq .accordion { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq .accordion + .accordion { margin-top: 0; }
.faq .accordion > summary { padding: 20px 0; gap: 16px; }
.faq .accordion__title { font-size: 18px; font-weight: 700; letter-spacing: 0; }
@media (min-width: 768px) { .faq .accordion__title { font-size: 18px; } }
@media (min-width: 1280px) { .faq .accordion__title { font-size: 18px; } }
.faq .accordion__chev { width: 22px; height: 22px; }
.faq .accordion[open] .accordion__chev { transform: rotate(45deg); }
.faq .accordion__body { padding: 0 0 20px; }
.faq .accordion__body p { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Тест: полоса на 375/768 (DS Sticky-бар), большая карточка на 1280 ---------- */
/* По .pen: на ≤1279 «Отличия» — аккордеоны на всю ширину + компактная sticky-полоса теста;
   большая карточка-сайдбар показывается только на 1280. */
/* Sticky-бар теста: fixed низ вьюпорта, появляется после первого скролла (канон: f64hC на 375 / RoZEx на 768) */
.testbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: 343px; max-width: calc(100vw - 24px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(15,27,45,.15); padding: 10px 12px; opacity: 0; pointer-events: none; transition: opacity .2s; }
body.testbar-on .testbar { opacity: 1; pointer-events: auto; }
.testbar__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testbar__ic svg { width: 20px; height: 20px; }
.testbar__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testbar__txt strong { font-family: var(--font-head); font-size: 12px; font-weight: 700; line-height: 1.28; }
.testbar__txt span { display: none; color: var(--muted); font-size: 13px; }
.testbar .btn { margin-left: auto; white-space: nowrap; font-size: 14px; padding: 11px 18px; border-radius: 10px; flex-shrink: 0; }
@media (min-width: 768px) { .testbar { width: 688px; gap: 24px; border-radius: var(--r-card); padding: 16px 20px; } .testbar__ic { width: 44px; height: 44px; border-radius: 12px; } .testbar__ic svg { width: 24px; height: 24px; } .testbar__txt strong { font-size: 16px; } .testbar__txt span { display: block; } .testbar .btn { font-size: 15px; padding: 14px 24px; border-radius: var(--r-btn); } }
.testcard-col { display: none; }
@media (min-width: 1280px) { .testbar { display: none; } .testcard-col { display: block; } }

/* Sticky тест-карточка (Отличия) */
.testcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.testcard__img { height: 240px; background: var(--bg-soft) center / cover no-repeat; }
.testcard__body { padding: 28px; }
.testcard h3 { margin: 0 0 8px; font-size: 26px; }
.testcard p { color: var(--muted); font-size: 16px; margin: 0 0 18px; }
/* Сайдбарное исполнение (статья/услуги, прототип R0JMqv): img 180, заголовок 22, padding 24 */
.testcard--side .testcard__img { height: 180px; border-radius: 12px; }
.testcard--side .testcard__body { padding: 24px; display: grid; gap: 18px; }
.testcard--side h3 { font-size: 22px; margin: 0; letter-spacing: -.3px; line-height: 1.15; }
.testcard--side p { font-size: 15px; line-height: 1.55; margin: 0; }

/* ---------- Мифы ---------- */
/* Мифы: карточки ОБНИМАЮТ контент и прижаты кверху (макет: align-items:flex-start, height:fit-content) */
.myths { display: grid; gap: 24px; margin-top: 6px; align-items: start; }
@media (min-width: 768px) { .myths { grid-template-columns: repeat(3,1fr); } }
.myth { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: grid; gap: 12px; align-self: start; }
.myth__badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; background: var(--orange-50); color: var(--orange); font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .8px; padding: 5px 10px; border-radius: var(--r-pill); }
.myth__badge svg { width: 13px; height: 13px; }
.myth__t { margin: 0; font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.3; }
@media (min-width: 768px) { .myth__t { font-size: 18px; } }
@media (min-width: 1280px) { .myth__t { font-size: 19px; } }
.myth__hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.myth__a { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (min-width: 768px) { .myth__a { font-size: 13px; } }
@media (min-width: 1280px) { .myth__a { font-size: 14px; } }

/* ---------- Кто ведёт (ExpertCard + контакты) ---------- */
.expert-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; display: grid; gap: 16px; margin-top: 6px; }
@media (min-width: 768px) { .expert-card { padding: 32px; gap: 32px; } }
@media (min-width: 1280px) { .expert-card { grid-template-columns: 300px 1fr; padding: 40px; gap: 40px; } }
.expert-card__photo { border-radius: 14px; border: 1px solid var(--line); background: var(--line) center / contain no-repeat; min-height: 300px; }
@media (min-width: 768px) { .expert-card__photo { border-radius: var(--r-card); min-height: 380px; } }
.expert-card .btn { font-size: 15px; padding: 14px 24px; }
@media (min-width: 768px) { .expert-card .btn { font-size: 16px; padding: 16px 28px; } }
.expert-card__kicker { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--brand); margin: 0 0 8px; }
@media (min-width: 1280px) { .expert-card__kicker { font-size: 13px; } }
.expert-card__name { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 4px; }
@media (min-width: 768px) { .expert-card__name { font-size: 24px; letter-spacing: -.6px; } }
@media (min-width: 1280px) { .expert-card__name { font-size: 30px; } }
.expert-card__role { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
@media (min-width: 768px) { .expert-card__role { font-size: 16px; } }
.expert-card__bio { font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
@media (min-width: 768px) { .expert-card__bio { font-size: 14px; } }
@media (min-width: 1280px) { .expert-card__bio { font-size: 17px; } }
/* Статы: на 375 — чипы-плашки (V2, атлас 3.15: значение 17/800 brand, подпись 11/600), на 768+ — открытые статы */
.expert-card__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 16px; }
.stat { background: var(--brand-50); border-radius: 12px; padding: 10px 8px; text-align: center; }
.stat__v { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--brand); letter-spacing: -.3px; }
.stat__l { font-size: 11px; font-weight: 600; color: var(--muted); }
/* Подписи статов: на 375 — короткие («опыт»/«дел»/«профиль», как в макете V2), на 768+ — полные */
.stat__l-full { display: none; }
@media (min-width: 768px) { .stat__l-full { display: inline; } .stat__l-short { display: none; } }
@media (min-width: 768px) {
  .expert-card__stats { gap: 24px; margin: 0 0 20px; }
  .stat { background: transparent; border-radius: 0; padding: 0; text-align: left; }
  .stat__v { font-size: 24px; letter-spacing: -.4px; }
  .stat__l { font-size: 13px; font-weight: 400; }
}
@media (min-width: 1280px) { .stat__v { font-size: 28px; } .stat__l { font-size: 14px; } }
.expert-extra { margin: 0; }
.expert-extra-acc { margin: 24px 0 0; }
.expert-extra p { color: var(--ink); }
/* Малый аккордеон (V2-карточка: Head 16/700, chevron 20, тело 14) */
.accordion--sm > summary { padding: 16px 18px; gap: 12px; }
.accordion--sm .accordion__title { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.accordion--sm .accordion__chev { width: 20px; height: 20px; }
.accordion--sm .accordion__body { padding: 0 18px 16px; }
.accordion--sm .accordion__body p { font-size: 14px; line-height: 1.6; }
.expert-card .accordion { background: var(--bg); margin: 0 0 16px; }
/* Порядок V2 на 375: кикер → имя → роль → чипы-статы → аккордеон «Био» → кнопка (атлас 3.15) */
.expert-card__col { display: flex; flex-direction: column; }
.expert-card__col .expert-card__kicker { order: 1; }
.expert-card__col .expert-card__name { order: 2; }
.expert-card__col .expert-card__role { order: 3; }
.expert-card__col .expert-card__stats { order: 4; }
.expert-card__col .accordion--bio { order: 5; }
.expert-card__col .btn { order: 6; }
@media (min-width: 768px) { .expert-card__col { display: block; } }
/* На 768+ служебные аккордеоны (био, «О компании») разбираются в текст без лейбла */
@media (min-width: 768px) {
  .accordion--ghost768 > summary { display: none; }
  .expert-card .accordion { background: transparent; margin: 0; }
  .accordion--sm .accordion__body { padding: 0; }
  .accordion--sm .accordion__body p { font-size: 16px; }
}
@media (min-width: 768px) { .expert-card .accordion--bio .accordion__body p { font-size: 14px; } }
@media (min-width: 1280px) { .expert-card .accordion--bio .accordion__body p { font-size: 17px; } }
.contacts { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 768px) { .contacts { grid-template-columns: repeat(3,1fr); } }
.contact-row { display: flex; gap: 12px; align-items: center; background: var(--bg-soft); border-radius: var(--r-card); padding: 16px; }
.contact-row .plate { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-row .plate svg { width: 20px; height: 20px; }
.contact-row .l { font-size: 13px; color: var(--muted); }
.contact-row .v { font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.3; }
.contact-row .v a { color: var(--ink); }
.geo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.geo-row img { height: 32px; width: auto; }

/* ---------- Отзывы: КАРУСЕЛЬ на 375/768, ГРИД на 1280 (1:1 по DS · Отзывы) ---------- */
/* Карусель отзывов: карточка 335/gap 16 на 375, карточка 332/gap 24 на 768 (канон 3.16) */
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: 335px; gap: 16px; margin-top: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.reviews > .rev { scroll-snap-align: start; }
@media (min-width: 768px) { .reviews { grid-auto-columns: 332px; gap: 24px; } }
@media (min-width: 1280px) { .reviews { grid-auto-flow: row; grid-template-columns: repeat(3,1fr); grid-auto-columns: auto; overflow: visible; gap: 24px; padding-bottom: 0; } }
.rev { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.rev__shot { height: 300px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft) center / cover no-repeat; }
/* Сумма и бейдж «Дело завершено» — всегда в ОДНОЙ строке (макет TopLine); при тесноте сумма ужимается, бейдж не переносится */
.rev__sumline { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: nowrap; min-width: 0; }
.rev__amount { font-family: var(--font-head); font-weight: 800; font-size: 32px; letter-spacing: -.6px; color: var(--ink); white-space: nowrap; }
.rev__badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap; background: var(--success-50); color: var(--success); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill); }
.rev__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.rev__label { font-size: 14px; color: var(--muted); margin-top: -12px; }
.rev__meta { font-size: 14px; color: var(--muted); line-height: 1.45; }
.rev__hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.rev__stars { display: flex; gap: 2px; color: var(--star); }
.rev__stars svg { width: 16px; height: 16px; }
.rev__quote { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; }
@media (min-width: 768px) { .rev__quote { font-size: 16px; } }
.rev__author { display: flex; flex-direction: column; gap: 2px; }
.rev__name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.rev__sub { font-size: 13px; color: var(--muted); }

/* ---------- Коротко (brand-50 панель) ---------- */
.summary-panel { background: var(--brand-50); border-radius: 20px; padding: 40px; }
.summary-panel h2 { margin: 0 0 14px; }
.summary-panel p { margin: 0; font-size: 14px; line-height: 1.7; }
@media (min-width: 768px) { .summary-panel p { font-size: 16px; } }
@media (min-width: 1280px) { .summary-panel p { font-size: 17px; } }

/* ---------- Мост к блогу ---------- */
.bridge { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 768px) { .bridge { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; } }
.bridge__l { display: flex; gap: 16px; align-items: center; }
.bridge__plate { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bridge__plate svg { width: 24px; height: 24px; }
.bridge strong { font-family: var(--font-head); font-size: 17px; display: block; }
.bridge__sub { color: var(--muted); font-size: 12px; }
@media (min-width: 768px) { .bridge strong { font-size: 18px; } .bridge__sub { font-size: 13px; } }
@media (min-width: 1280px) { .bridge__sub { font-size: 14px; } }
.bridge .btn { font-size: 15px; padding: 12px 22px; gap: 8px; }

/* ---------- Footer (по макету yKTFD) ---------- */
.site-footer { background: var(--ink-dark); color: var(--muted-dark); padding: 40px var(--gutter) 32px; }
@media (min-width: 768px) { .site-footer { padding: 48px var(--gutter) 36px; } }
@media (min-width: 1280px) { .site-footer { padding: 56px var(--gutter) 28px; } }
.site-footer a { color: var(--on-dark); }
.footer__top { max-width: var(--w-wide); margin-inline: auto; display: grid; gap: 40px; }
@media (min-width: 768px) { .footer__top { grid-template-columns: 380px 1fr 1fr; gap: 48px; } }
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand .brand__name { color: var(--on-dark); font-size: 22px; }
.footer__tag { color: var(--muted-dark); font-size: 15px; line-height: 1.55; margin: 0; }
.footer__row { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--on-dark); }
.footer__row svg { width: 16px; height: 16px; color: var(--muted-dark); flex-shrink: 0; }
.footer__row strong { font-weight: 700; }
.footer__row:hover { text-decoration: none; }
.footer__row--muted { color: var(--muted-dark); font-size: 14px; }
.footer__col h4 { color: var(--on-dark); font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: .4px; margin: 0 0 14px; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.footer__list a { color: var(--muted-dark); font-size: 15px; }
.footer__list a:hover { color: var(--on-dark); }
.footer__hr { max-width: var(--w-wide); margin: 32px auto; border: 0; height: 1px; background: rgba(159,176,199,.25); }
.footer__req, .footer__disc { max-width: var(--w-wide); margin: 0 auto; color: var(--muted-dark); }
.footer__req { font-size: 13px; line-height: 1.5; }
.footer__links { max-width: var(--w-wide); margin: 12px auto; display: flex; flex-wrap: wrap; gap: 24px; }
.footer__links a { font-size: 13px; font-weight: 700; color: var(--on-dark); }
.footer__disc { font-size: 12px; line-height: 1.5; margin-top: 12px; }

/* ============================================================
   БЛОК A — интерактив: попап-консультация, маска, многошаговый
   квиз, состояния форм, экран «Спасибо». Стиль наследует ds-*.
   ============================================================ */

/* ---------- Поля форм: общий вид (Имя/Телефон) ---------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field__label .req { color: var(--orange); }
.input { width: 100%; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: var(--r-input); font-family: var(--font-body); font-size: 15px; color: var(--ink); background: #fff; }
.input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.input.is-invalid { border-color: #DC2626; background: #FEF2F2; }
.input.is-invalid:focus { outline-color: #DC2626; }
.field__err { display: none; font-size: 12px; color: #DC2626; }
.field.is-invalid .field__err { display: block; }
.lead-form input.is-invalid { border-color: #DC2626; background: #FEF2F2; }
.consent.is-invalid span { color: #DC2626; }
.consent.is-invalid input { outline: 2px solid #DC2626; outline-offset: 1px; }

/* существующая лид-форма — те же инпуты + порядок «чекбокс между телефоном и кнопкой» */
.lead-form .field { gap: 6px; }
.mobile-nav__cta { padding: 10px 16px 14px; }

/* ---------- Экран «Спасибо» (для любой формы/квиза) ---------- */
.form-done { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 8px 0; }
.form-done__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--success-50); color: var(--success); display: inline-flex; align-items: center; justify-content: center; }
.form-done__ic svg { width: 34px; height: 34px; }
.form-done h3 { margin: 0; }
.form-done p { margin: 0; color: var(--muted); font-size: 15px; max-width: 34ch; }

/* ---------- Попап-консультация ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(11,20,36,.55); backdrop-filter: blur(2px); }
.modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 40px); overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow-card); padding: 32px; animation: modalIn .2s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.modal__close:hover { color: var(--ink); border-color: var(--brand); }
.modal__close svg { width: 20px; height: 20px; }
.modal .lead-form { border: 0; box-shadow: none; padding: 0; }
body.modal-open { overflow: hidden; }

/* ============================================================
   АРХЕТИП СТАТЬЯ (A5/A6): крошки, ArticleMeta, TOC, Callout,
   таблица-сравнение, timeline, related, CTA-плашка. Наследует ds-*.
   ============================================================ */
.breadcrumbs { max-width: var(--w-wide); margin-inline: auto; padding: 20px var(--gutter) 0; font-size: 13px; color: var(--muted-dark); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
@media (min-width: 768px) { .breadcrumbs { font-size: 14px; } }
.breadcrumbs a { color: var(--muted-dark); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs .sep { color: #C5CDD8; }
.breadcrumbs .cur { color: var(--muted); font-size: 14px; line-height: 1.4; }
/* прототип 768/375: заголовок статьи переносится на свою строку под крошками */
@media (max-width: 1279px) { .breadcrumbs .cur { flex-basis: 100%; } }

.article-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1280px) { .article-grid { grid-template-columns: 1fr 320px; gap: 48px; } }
.article-side { display: grid; gap: 20px; }
@media (min-width: 1280px) { .article-side { position: sticky; top: 88px; } }
.article-body { max-width: 760px; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { margin-top: 36px; scroll-margin-top: 84px; }
.article-body h3 { margin-top: 24px; }
.article-body p { line-height: 1.75; }
.article-body ul, .article-body ol { line-height: 1.7; }
.article-body ul li, .article-body ol li { margin-bottom: .6em; }
/* Типо-шкала СТАТЬИ — своя, НЕ совпадает с коммерческими страницами (атлас §9):
   H1 26/34/40 · H2 23/28/28 · H3 18/20/20 · проза и списки 17 на всех ширинах */
.article-body h1 { font-size: 26px; letter-spacing: -.3px; }
.article-body h2 { font-size: 23px; letter-spacing: -.3px; }
.article-body h3 { font-size: 18px; }
.article-body p, .article-body ul, .article-body ol { font-size: 17px; }
@media (min-width: 768px) {
  .article-body h1 { font-size: 34px; }
  .article-body h2 { font-size: 28px; }
  .article-body h3 { font-size: 20px; }
}
@media (min-width: 1280px) {
  .article-body h1 { font-size: 40px; letter-spacing: -.5px; line-height: 1.12; }
  .article-body h2 { font-size: 28px; }
}
/* Маркеры списков статьи — точка/номер, как в прототипе (не галочки) */
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul > li { padding-left: 22px; position: relative; }
.article-body ul > li::before { content: "•"; position: absolute; left: 4px; font-weight: 800; color: var(--brand); }
.article-body ol { list-style: none; counter-reset: artol; padding-left: 0; }
.article-body ol > li { counter-increment: artol; padding-left: 30px; position: relative; }
.article-body ol > li::before { content: counter(artol) "."; position: absolute; left: 0; font-family: var(--font-head); font-weight: 800; color: var(--brand); }
/* Капсула в статье (прототип): кикер 13 на всех ширинах; ответ 14 (375) / 18 (768+); gap 10 */
.article-body .capsule__kicker { font-size: 13px; }
.article-body .capsule__body { font-size: 14px; line-height: 1.6; }
@media (min-width: 768px) { .article-body .capsule__body { font-size: 18px; } }

/* ArticleMeta */
/* ArticleMeta — карточка над колонками (прототип iHP2G): bg-soft r16;
   375 — вертикаль [18,20] gap 18; 768/1280 — ряд [20,28] space-between */
.artmeta { display: flex; flex-direction: column; gap: 18px; background: var(--bg-soft); border-radius: var(--r-card); padding: 18px 20px; }
@media (min-width: 768px) { .artmeta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 20px 28px; } }
.artmeta__author { display: inline-flex; align-items: center; gap: 14px; }
.artmeta__ava { width: 64px; height: 84px; border-radius: 12px; border: 1px solid var(--line); background: #fff center / contain no-repeat; flex-shrink: 0; }
.artmeta__by { font-size: 13px; color: var(--muted); }
.artmeta__name { font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--brand); }
.artmeta__facts { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 16px; }
@media (min-width: 768px)  { .artmeta__facts { display: flex; gap: 16px 32px; } }
@media (min-width: 1280px) { .artmeta__facts { gap: 40px; } }
.fact { display: grid; gap: 7px; }
.fact__l { font-size: 13px; color: var(--muted); }
.fact__v { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--ink); }
.fact__v svg { width: 17px; height: 17px; flex-shrink: 0; }

/* TOC — карточка «Содержание статьи» В ТЕЛЕ статьи (компонент z6n1Dv, атлас §9):
   внешняя bg-soft, шапка с тёмным кубом, внутри зелёное меню (success-50) со свёрнутым
   списком (видны первые 2 пункта) и toggle «Всё содержание». Все пункты — в DOM. */
.toc { background: var(--bg-soft); border-radius: var(--r-card); padding: 20px; margin: 24px 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .toc { padding: 28px; gap: 18px; } }
.toc__head { display: flex; align-items: center; gap: 12px; }
.toc__cube { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toc__cube svg { width: 16px; height: 16px; }
.toc__h { font-family: var(--font-body); font-weight: 800; font-size: 18px; margin: 0; }
@media (min-width: 768px) { .toc__h { font-size: 20px; } }
.toc__menu { background: var(--success-50); border-radius: 12px; padding: 18px; }
.toc ol { list-style: none; counter-reset: tocn; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.article-body .toc ol > li, .toc ol > li { counter-increment: tocn; margin: 0; padding: 0; position: static; }
.article-body .toc ol > li::before { content: none; }
.toc a { display: flex; gap: 8px; font-size: 15px; color: var(--success); line-height: 1.45; }
.toc a::before { content: counter(tocn) "."; font-weight: 700; flex-shrink: 0; }
@media (min-width: 768px) { .toc a { font-size: 16px; } }
.toc a:hover { text-decoration: underline; }
.toc__cb { display: none; }
.toc__cb:not(:checked) ~ ol li:nth-child(n+3) { display: none; }
.toc__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--success); cursor: pointer; }
.toc__toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.toc__cb:checked ~ .toc__toggle svg { transform: rotate(180deg); }
.toc__toggle .toc__lbl-less { display: none; }
.toc__cb:checked ~ .toc__toggle .toc__lbl-less { display: inline; }
.toc__cb:checked ~ .toc__toggle .toc__lbl-more { display: none; }

/* «Мост к решению» — финальная CTA-плашка статьи (компонент N0WcR, атлас §4.6/§9) */
.mostcta { background: var(--bg-soft); border-radius: var(--r-card); padding: 24px; margin: 28px 0 8px; display: grid; gap: 18px; }
@media (min-width: 768px) { .mostcta { grid-template-columns: 1fr auto; align-items: center; padding: 26px 30px; } }
.mostcta__l { display: grid; gap: 8px; }
.mostcta h2 { font-family: var(--font-head); font-size: 21px !important; font-weight: 800; line-height: 1.2; margin: 0 !important; }
.mostcta p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.mostcta__r { display: grid; gap: 8px; justify-items: center; }
@media (min-width: 768px) { .mostcta__r { justify-items: end; } }
.mostcta .btn { padding: 14px 24px; font-size: 15px; }
.mostcta__note { font-size: 13px; color: var(--muted-dark, #9FB0C7); }

/* Callout (прототип cQhVI): brand-50, r12, padding 20, иконка info 22 слева, gap 14;
   заголовок Alegreya 17/700 + текст 16/1.6 */
.callout { background: var(--brand-50); border-radius: 12px; padding: 20px; margin: 24px 0; display: flex; gap: 14px; align-items: flex-start; }
.callout__ic { flex-shrink: 0; width: 22px; height: 22px; color: var(--brand); }
.callout__ic svg { width: 22px; height: 22px; }
.callout__col { display: grid; gap: 5px; min-width: 0; }
.callout__t { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin: 0; }
.callout__t strong { font-weight: 700; }
.callout p { margin: 0; font-size: 16px !important; line-height: 1.6; }
.callout .btn { margin-top: 10px; justify-self: start; }
.callout--warn { background: var(--orange-50); }
.callout--warn .callout__ic { color: var(--orange); }

/* Таблица-сравнение */
/* Таблица-сравнение (прототип JBdbY): r12, шапка brand с белым текстом,
   ряды-зебра white/bg-soft с верхней линией, ячейки [13,16], текст 15 */
.ctable-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; }
.ctable { width: 100%; border-collapse: collapse; font-size: 15px !important; min-width: 520px; line-height: 1.45; }
.ctable th, .ctable td { text-align: left; padding: 13px 16px; vertical-align: top; }
.ctable thead th { font-family: var(--font-body); font-weight: 700; background: var(--brand); color: #fff; }
.ctable tbody tr { border-top: 1px solid var(--line); }
.ctable tbody tr:nth-child(even) { background: var(--bg-soft); }
.ctable tbody th { font-weight: 700; color: var(--ink); font-family: var(--font-body); }
.ctable tbody td { color: var(--muted); }

/* CTA-плашка (тёмная, сайдбар) */
.cta-plashka { background: var(--ink-dark); color: var(--on-dark); border-radius: var(--r-card); padding: 24px; display: grid; gap: 14px; }
.cta-plashka h3 { color: #fff; margin: 0; font-size: 20px; }
.cta-plashka p { color: var(--muted-dark); font-size: 14px; margin: 0; }
.cta-plashka .btn { width: 100%; }
.cta-plashka__note { font-size: 12px; color: var(--muted-dark); display: inline-flex; align-items: center; gap: 6px; }
.cta-plashka__note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }

/* Timeline (пример по месяцам) */
.timeline { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 14px; }
.timeline li { padding: 16px 20px; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-card); margin: 0; }
.timeline li strong { font-family: var(--font-head); }

/* Related — «Похожие статьи» (прототип xfux7): белая карточка r16 с превью 172,
   категория Alegreya 12/700 КАПСОМ без фона, заголовок 18/700, мета 13 muted.
   375 — карусель по одной (scroll-snap), 768+ — 3 в ряд */
.related { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; margin-top: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.related > .rcard { scroll-snap-align: start; }
@media (min-width: 768px) { .related { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3,1fr); gap: 24px; overflow: visible; padding-bottom: 0; } }
.rcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; height: 100%; }
.rcard__thumb { height: 172px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--muted-dark); flex-shrink: 0; }
.rcard__thumb svg { width: 36px; height: 36px; }
.rcard__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rcard__cat { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--brand); text-transform: uppercase; }
.rcard__t { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.25; margin: 0; }
.rcard__t a { color: var(--ink); }
.rcard__t a:hover { color: var(--brand); }
.rcard__meta { margin-top: auto; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rcard__meta svg { width: 14px; height: 14px; }
.related-h { font-size: 23px; letter-spacing: -.3px; }
@media (min-width: 768px) { .related-h { font-size: 28px; } }
.see-also { color: var(--muted); font-size: 14px; line-height: 1.8; }

/* ---------- Квиз: доп. состояния и шаг телефона ---------- */
.quiz__opt.is-selected { border-color: var(--brand); background: var(--brand-50); }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.quiz__nav { display: grid; gap: 10px; }
.quiz__back { display: inline-flex; align-items: center; gap: 6px; align-self: start; background: none; border: 0; color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.quiz__back:hover { color: var(--brand); }
.quiz__back svg { width: 16px; height: 16px; }
.quiz__fields { display: grid; gap: 14px; margin-bottom: 16px; }
.quiz__msgrs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.quiz__msgr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: var(--r-input); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; }
.quiz__msgr:hover { border-color: var(--brand); }
.quiz__msgr.is-selected { border-color: var(--brand); background: var(--brand-50); }
.quiz__msgr svg { width: 24px; height: 24px; }
.quiz .consent { margin-top: 2px; }
.quiz__done { padding: 12px 0; }

/* ---------- Хабы и синглтоны (атлас §11–13) ---------- */
/* Hero хаба: без фото; лид полужирный 600 (14/17/18), хвост muted */
.hero--hub .hero__lead strong { font-weight: 600; }
.hero__sub { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
@media (min-width: 768px) { .hero__sub { font-size: 16px; } }

/* Нав-плитки хабов: 375 — компакт-строки в столбик; 768 — компакт 2-в-ряд; 1280 — полные карточки */
.navtiles { display: grid; gap: 16px; margin-top: 20px; }
.navtile { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; color: var(--ink); text-decoration: none; }
.section--soft .navtile { background: #fff; }
.section:not(.section--soft) .navtile { background: var(--bg-soft); }
.navtile__plate { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.navtile__plate svg { width: 20px; height: 20px; }
.navtile__t { font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.25; margin: 0; }
.navtile__d { display: none; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.navtile__more { display: none; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; font-size: 15px; }
.navtile__more svg { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .navtiles { grid-template-columns: repeat(2, 1fr); }
  .navtiles .navtile:only-child { max-width: 336px; }
}
@media (min-width: 1280px) {
  .navtiles { grid-template-columns: repeat(3, 368px); gap: 24px; }
  .navtiles .navtile:only-child { max-width: 368px; }
  .navtile { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .navtile__plate { width: 48px; height: 48px; border-radius: 12px; }
  .navtile__plate svg { width: 24px; height: 24px; }
  .navtile__t { font-size: 19px; line-height: 1.3; }
  .navtile__d { display: block; }
  .navtile__more { display: inline-flex; margin-top: auto; }
}

/* Крупная проза «Почему обращаются к нам» (колонка 820, 16/17/18) */
.bigprose p { font-size: 16px; line-height: 1.7; }
@media (min-width: 768px)  { .bigprose p { font-size: 17px; } }
@media (min-width: 1280px) { .bigprose p { font-size: 18px; } }

/* Сетка 4 карточек «Как мы работаем»: 375 стек, 768 — 2+2, 1280 — 4 в ряд */
.grid--4 { display: grid; gap: 24px; }
@media (min-width: 768px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Контакты: слева контакт-строки, справа форма 440 (1280) */
.contact-grid { display: grid; gap: 48px; margin-top: 24px; }
@media (min-width: 1280px) { .contact-grid { grid-template-columns: 1fr 440px; } }
.contact-list { display: grid; gap: 14px; }
.contact-row--plain { background: none; padding: 0; border-radius: 0; }
.hours-h { font-family: var(--font-head); font-weight: 800; font-size: 20px; margin: 24px 0 8px; }
.hours-p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.contact-hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* Карта-плейсхолдер (Яндекс.Карта — этап 10) */
.map-ph { height: 360px; margin-top: 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; }

/* Реквизиты: карточка, 2 колонки на 768+, вертикаль на 375 */
.req-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-top: 20px; display: grid; gap: 20px; }
.section:not(.section--soft) .req-card { background: var(--bg-soft); border: 0; }
@media (min-width: 768px) { .req-card { grid-template-columns: 1fr 1fr; gap: 28px 48px; padding: 36px; } }
.req { display: grid; gap: 3px; }
.req__l { font-size: 13px; color: var(--muted); }
.req__v { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; }
.req__v a { color: var(--ink); }

/* ---------- Cookie-баннер (Метрика грузится после акцепта, юр-слой §3) ---------- */
.cookiebar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 16px; width: min(720px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(15,27,45,.15); padding: 14px 18px; }
.cookiebar__txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cookiebar__txt a { color: var(--brand); }
.cookiebar__btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cookiebar__btns .btn { padding: 10px 18px; font-size: 14px; }
.cookiebar__no { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; padding: 8px 6px; }
.cookiebar__no:hover { text-decoration: underline; }
@media (max-width: 767px) { .cookiebar { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; } .cookiebar__btns { justify-content: center; } }