/* =====================================================================
   BRIDGES · СТАНДАРТ ОФОРМЛЕНИЯ СТРАНИЦЫ РАСЧЕТА (Вануату)

   Страница воронки собрана статическим файлом и токены сайта из
   src/styles/tokens.css к ней не подключаются. Поэтому ролевой слой
   продублирован здесь один в один - и дальше вся страница красится
   ТОЛЬКО ролями. Светлая и темная тема получаются из одного набора
   правил, отдельного «темного» файла с !important больше нет.

   Порядок: подключается последним, после всех легаси-стилей страницы.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ТОКЕНЫ (роли) - совпадают с src/styles/tokens.css
   --------------------------------------------------------------------- */
:root {
  --vq-font-display: 'Metal-Reg-1', 'Montserrat', sans-serif;
  --vq-font-text: 'Montserrat', -apple-system, sans-serif;

  --bg-page: #f9f9f9;
  --bg-subtle: #f3f4f6;
  --bg-alt: #f3f4f6;
  --bg-surface: #ffffff;
  --bg-field: #ffffff;
  --bg-elevated: #ffffff;
  --bg-header: #ffffff;
  --bg-warm: #fdf8f1;
  --bg-blue-soft: #edf3ff;
  --bg-inverse: #0b1526;

  --text-primary: #1b1b1b;
  --text-muted: #6b7280;
  --text-faint: #9aa2b1;
  --text-on-action: #ffffff;

  --line: #e7e9ee;
  --line-strong: #d7deea;
  --line-field: #e7e9ee;

  --action: #0057ff;
  --action-fill: #0057ff;
  --action-fill-hover: #0047d6;
  --action-hover: #0047d6;
  --action-line: #cbdcf8;

  --state-ok: #16a34a;
  --state-ok-text: #127a3e;
  --state-ok-soft: #eafaf0;
  --state-ok-line: #c9ecd7;

  /* Радиусы и ритм - как на сайте */
  --r-btn: 14px;
  --r-card: 18px;
  --r-card-lg: 28px;
  --r-field: 12px;
  --r-pill: 999px;

  /* Сетка сайта - те же значения, что в grid-lock.css */
  --site-wrap: 1320px;
  --site-pad: 20px;

  /* Финальный блок консультации - эталон CzCta с /ru/methodology/:
     секция чуть темнее страницы, карточка на тон светлее секции. */
  --vq-cta-sec: #eeeeee;
  --vq-cta-card: #f9f9f9;
  --vq-section-y: clamp(56px, 7vw, 96px);

  --shadow-card: 0 4px 14px rgba(20, 30, 50, .08);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .14);
}

:root[data-theme='dark'] {
  --bg-page: #07090d;
  --bg-subtle: #0a0d12;
  --bg-alt: #0d1117;
  --bg-surface: #10141a;
  --bg-field: #0c1016;
  --bg-elevated: #141922;
  --bg-header: #090c11;
  --bg-warm: #0d1117;
  --bg-blue-soft: #0d1117;
  --bg-inverse: #141922;

  --text-primary: #f2f4f7;
  --text-muted: #a7afba;
  --text-faint: #7e8794;

  --line: rgba(180, 195, 215, .12);
  --line-strong: rgba(180, 195, 215, .18);
  --line-field: rgba(180, 195, 215, .5);

  --action: #4d8cff;
  --action-fill: #0057ff;
  --action-fill-hover: #0047d6;
  --action-hover: #74a6ff;
  --action-line: rgba(77, 140, 255, .38);

  --state-ok: #3fc41a;
  --state-ok-text: #8fe0ab;
  --state-ok-soft: rgba(63, 196, 26, .12);
  --state-ok-line: rgba(63, 196, 26, .28);

  --shadow-card: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .6);

  --vq-cta-sec: #0a0d12;
  --vq-cta-card: #10141a;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. ОСНОВА СТРАНИЦЫ
   --------------------------------------------------------------------- */
html[data-theme] { background: var(--bg-page); }

html body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--vq-font-text);
}

/* ЕДИНЫЙ РИТМ ФОНОВ: на странице ровно два фона - серый лист страницы и
   белая полоса. Третьих оттенков и теплых подложек нет, чередование
   строгое: геро и калькулятор - серые, команда - белая, отзывы - серые,
   кейсы - белые, вопросы - серые, консультация - белая. */
html body .section,
html body .hero-grey,
html body .qHeroSec,
html body #price-block,
html body .socp { background: var(--bg-page) !important; }

html body #qteam,
html body #cases-block,
html body #faq-block { background: var(--bg-surface) !important; }

/* Финальная консультация - эталон CzCta: секция чуть темнее страницы,
   карточка на тон светлее секции, поэтому карточка видна без рамки. */
html body .section.vcta { background: var(--vq-cta-sec) !important; }

/* ЕДИНАЯ КАРТОЧКА: одна поверхность, одна рамка, один радиус.
   Крупные блоки - 28px, обычные карточки и элементы форм - 18px и 12px. */
html body #price-block .qk,
html body #price-block .qkCta,
html body .vctaCard,
html body .qkm__box { background: var(--bg-surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card-lg) !important; box-shadow: none !important; }

html body .qTrust__it,
html body .socp__stats,
html body .socp__r,
html body #price-block .qk__vs,
html body #price-block .qkPack__count,
html body #qteam .qtc { background: var(--bg-surface) !important; }

/* Карточки кейсов - фирменный navy в обеих темах: подпись лежит белым
   текстом прямо на карточке, светлеть ей нельзя. */
html body #cases-block .chSlide,
html body #cases-block .chTile { background: #10213d !important; }

/* ЕДИНАЯ СЕТКА САЙТА (src/styles/grid-lock.css): контейнер 1320px,
   боковые поля 20px, полезная ширина 1280px. Шапка, контент и подвал
   воронки стоят на той же вертикали, что и остальной сайт. */
html body .wrapper,
html body .qHdr__in {
  width: 100%;
  max-width: var(--site-wrap) !important;
  margin-inline: auto;
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
  box-sizing: border-box;
}

/* Вертикальный ритм секций - единый с сайтом */
html body #price-block,
html body #qteam,
html body #cases-block,
html body #faq-block,
html body .socp,
html body .section.vcta { padding-top: var(--vq-section-y); padding-bottom: var(--vq-section-y); }

/* ---------------------------------------------------------------------
   3. ТИПОГРАФИКА - шкала сайта, без мелкого кегля
   --------------------------------------------------------------------- */
html body .h1,
html body .qHero__ttl {
  font-family: var(--vq-font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -.4px;
  color: var(--text-primary);
  text-wrap: balance;
}

html body .h2,
html body .sectionH__ttl {
  font-family: var(--vq-font-display);
  font-weight: 400;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.1;
  color: var(--text-primary);
}

/* НАДЗАГОЛОВОК - единый стандарт сайта, знак в знак с
   src/styles/eyebrow.css (решение Сергея 23.08): черта 26x1px слева,
   текст СЕРЫЙ капсом с разрядкой, перенос уходит в колонку текста -
   вторая строка не ныряет под черту. */
html body .bhead-eye {
  position: relative !important;
  display: block !important;
  padding-left: 38px !important;
  margin-bottom: 16px;
  font-family: var(--vq-font-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
html body .bhead-eye::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  /* середина первой строки при line-height 1.5 */
  top: .75em !important;
  width: 26px !important;
  height: 1px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--action) !important;
}

/* H2 секций - размер из токена --fs-h2, как на остальных страницах */
html body .sectionH__ttl:not(#_) {
  font-family: var(--vq-font-display) !important;
  font-size: clamp(27px, 3vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.011em !important;
}

html body .qHero__txt p,
html body .prIntro,
html body .casesSub,
html body .qteamSub {
  font-family: var(--vq-font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------
   3b. ЕДИНЫЙ ВИД ЭЛЕМЕНТОВ ФОРМ
   Плитки состава, счетчики, поля модалки и шаги «минус/плюс» - один
   фон, одна рамка, один радиус 12px, одна подсветка фокуса.
   --------------------------------------------------------------------- */
html body #price-block .qk__tile,
html body #price-block .qk__add,
html body #price-block .qk__step button,
html body .qkm__form input {
  background: var(--bg-field) !important;
  border: 1px solid var(--line-field) !important;
  border-radius: var(--r-field) !important;
  color: var(--text-primary) !important;
  font-family: var(--vq-font-text);
  transition: border-color .16s, background .16s, color .16s;
}
html body #price-block .qk__tile:hover,
html body #price-block .qk__add:hover,
html body #price-block .qk__step button:hover { border-color: var(--action) !important; }
html body #price-block .qk__tile:focus-visible,
html body #price-block .qk__step button:focus-visible,
html body .qkm__form input:focus {
  outline: 0;
  border-color: var(--action) !important;
  box-shadow: 0 0 0 3px var(--action-line);
}

/* ---------------------------------------------------------------------
   4. КНОПКИ - единый радиус 14px, высота 58px
   --------------------------------------------------------------------- */
html body .btn,
html body .qHero__cta,
html body .vctaBtn,
html body #price-block .qkCta__btn,
html body .qkPack__dl,
html body .qkRec__cta {
  border-radius: var(--r-btn) !important;
  font-family: var(--vq-font-text);
  font-weight: 500;
  font-size: 16px;
  transition: background .18s, border-color .18s, color .18s;
}

html body .qHero__cta,
html body #price-block .qkCta__btn,
html body .vctaBtn:not(.vctaBtn--sec) {
  min-height: 58px;
  background: var(--action-fill);
  color: var(--text-on-action);
  border: 0;
}
html body .qHero__cta:hover,
html body #price-block .qkCta__btn:hover,
html body .vctaBtn:not(.vctaBtn--sec):hover { background: var(--action-fill-hover); }

html body .btn_bor,
html body .vctaBtn--sec {
  min-height: 58px;
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-primary) !important;
}
html body .btn_bor:hover,
html body .vctaBtn--sec:hover { border-color: var(--action) !important; color: var(--action) !important; }

/* ---------------------------------------------------------------------
   5. ШАПКА ВОРОНКИ
   --------------------------------------------------------------------- */
html body header.header.qHdr {
  background: var(--bg-header) !important;
  border-bottom: 1px solid var(--line) !important;
}
html body .qHdr__logo svg path { fill: var(--text-primary) !important; }
html body .qOfficial span { color: var(--text-muted) !important; font-size: 15px; }
html body .qOfficial__ic { color: var(--action) !important; }

/* ---------------------------------------------------------------------
   6. ГЕРО
   --------------------------------------------------------------------- */
/* Цена первым экраном: сумма и уточнение «для одного заявителя» - одной
   строкой-парой, срок и формат оформления - второй строкой. */
html body .qHeroPrice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin: 24px 0 6px; }
html body .qHeroPrice b {
  font-family: var(--vq-font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--text-primary) !important;
}
html body .qHeroPrice em {
  font-style: normal;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-faint);
}
/* Перенос строки перед сроком: сумма с уточнением живет отдельно */
html body .qHeroPrice i:first-of-type { flex-basis: 100%; width: auto; height: 0; background: none; margin: 2px 0 0; }
html body .qHeroPrice i:first-of-type + span { padding-left: 0; }
html body .qHeroPrice span { font-size: 15px; color: var(--text-muted); }
html body .qHeroPrice i { background: var(--action); }

html body .qHero__advIt { color: var(--text-muted) !important; font-size: 15px; }
html body .qHero__advIt svg { color: var(--action); }

/* Лист сметы - изображение бумаги, остается белым в обеих темах */
html body .qHeroFan__p { background: #fff; border-color: rgba(0, 0, 0, .08); }

/* ---------------------------------------------------------------------
   7. КАЛЬКУЛЯТОР
   --------------------------------------------------------------------- */
html body #price-block .qk { overflow: hidden; }
html body #price-block .qk__form { border-right: 1px solid var(--line) !important; padding: 36px 38px; }
/* Служебные подписи набраны 12px капсом: на --text-faint они давали
   контраст 2.6 к белому. Поднимаем на уровень --text-muted (4.8). */
html body #price-block .qk__lab { color: var(--text-muted) !important; font-size: 12px; letter-spacing: .14em; }
html body #price-block .qk__addS,
html body .qEnd,
html body .qk__resCompo,
html body .qkm__note { color: var(--text-muted) !important; }

html body #price-block .qk__tile { padding: 16px 18px; }
html body #price-block .qk__tile.on {
  border-color: var(--action) !important;
  background: var(--bg-blue-soft) !important;
}
html body #price-block .qk__tile b { color: var(--text-primary) !important; font-size: 16px; }
html body #price-block .qk__tile > span:last-child { color: var(--text-muted) !important; font-size: 14px; }
html body #price-block .qk__ck { border-color: var(--line-strong) !important; }
html body #price-block .qk__tile.on .qk__ck { border-color: var(--action) !important; background: var(--action) !important; }

html body #price-block .qk__add { padding: 13px 16px; }
html body #price-block .qk__addT { color: var(--text-primary) !important; font-size: 16px; }
html body #price-block .qk__tip { color: var(--text-faint) !important; }
html body #price-block .qk__tip:hover { color: var(--action) !important; }
html body #price-block .qk__tipPop {
  background: var(--bg-inverse);
  color: #f2f4f7;
  font-size: 13.5px;
  border-radius: var(--r-field);
  width: 250px;
}
html body #price-block .qk__step button { color: var(--action) !important; width: 36px; height: 36px; }
html body #price-block .qk__step button:hover { background: var(--bg-blue-soft) !important; }
html body #price-block .qk__step i { color: var(--text-primary) !important; font-size: 16px; }

/* --- Панель результата --- */
html body #price-block .qk__res { background: transparent !important; border: 0 !important; padding: 36px 38px 32px; }
html body #price-block .qk__resReco {
  background: var(--bg-blue-soft) !important;
  color: var(--action) !important;
  border-radius: var(--r-pill) !important;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 7px 13px;
}
html body #price-block .qk__resName {
  font-family: var(--vq-font-text);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-primary) !important;
  margin: 0 0 12px;
}
html body #price-block .qk__resLab {
  margin: 0 0 2px;
  font: 500 15px/1.4 var(--vq-font-text);
  color: var(--text-muted);
}
html body #price-block .qk__resPrice b {
  font-family: var(--vq-font-display);
  font-weight: 400;
  color: var(--text-primary) !important;
}
html body #price-block .qk__resPrice span { color: var(--text-faint) !important; font-size: 16px; }
html body #price-block .qk__resCompo { color: var(--text-muted) !important; font-size: 15px; }

html body .qk__resBack { border-top: 1px dashed var(--line) !important; }
html body .qk__resBackRow span { color: var(--text-muted) !important; font-size: 15px; }
html body .qk__resBackRow b { color: var(--text-primary) !important; font-size: 16px; }
html body .qk__resBackRow--eff b { color: var(--action) !important; font-size: 21px; }
html body .qk__resBackRow--eff span { color: var(--text-primary) !important; }

html body #price-block .qk__resVs { border-top: 0 !important; }
html body #price-block .qk__vs { border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; padding: 16px 18px; }
html body #price-block .qk__vs.best { border-color: var(--action) !important; box-shadow: none !important; }
html body #price-block .qk__vs:not(.best) { opacity: .72; }
html body #price-block .qk__vs + .qk__vs { border-top: 1px solid var(--line) !important; }
html body #price-block .qk__vsN { color: var(--text-primary) !important; font-size: 15px; font-weight: 500; }
html body #price-block .qk__vsN em { color: var(--text-muted) !important; font-size: 13px; margin-top: 4px; }
html body #price-block .qk__vs b { color: var(--text-primary) !important; font-size: 16px; }
html body #price-block .qk__vs.best b { color: var(--action) !important; }
html body #price-block .qk__vsBadge {
  background: var(--action-fill) !important;
  color: var(--text-on-action) !important;
  font-size: 10px;
}

html body #price-block .qk__resEco {
  background: var(--state-ok-soft) !important;
  border: 1px solid var(--state-ok-line);
  color: var(--state-ok-text) !important;
  border-radius: var(--r-field) !important;
  font-size: 15px;
  text-align: left;
}

html body .qk__resBtn { border-top: 1px solid var(--line) !important; }
html body #price-block .qkCta__btn { border-radius: var(--r-btn) !important; font-size: 16px; }

/* --- Полоса гарантий --- */
html body .qTrust { background: var(--line) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
html body .qTrust__it { padding: 22px 20px; }
html body .qTrust__it svg { color: var(--action) !important; }
html body .qTrust__it b { color: var(--text-primary) !important; font-size: 16px; font-weight: 500; }
html body .qTrust__it span { color: var(--text-muted) !important; font-size: 15px; }

/* --- Персональный расчет --- */
html body #price-block .qkCta { padding: 44px 46px; }
html body #price-block .qkCta__txt b { color: var(--text-primary) !important; }
html body #price-block .qkCta__hook { color: var(--text-primary) !important; font-size: 16px; }
html body .qkCta__lead { color: var(--text-muted) !important; }
html body .qkCta__compo li { color: var(--text-primary) !important; font-size: 16px; }
html body .qkCta__compo li::before { background: var(--text-faint) !important; }
html body .qkCta__note {
  background: var(--bg-blue-soft) !important;
  border: 1px solid var(--action-line) !important;
  border-radius: var(--r-field) !important;
  color: var(--text-muted) !important;
  font-size: 15px;
}
html body .qkCta__note svg { stroke: var(--action) !important; }
html body #price-block .qkCta__hook .qkCta__note {
  background: var(--bg-page) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-field) !important;
  color: var(--text-muted) !important;
}
/* Подпись под кнопкой - просто текст, без плашки */
html body .qk__resBtn .qkCta__note,
html body #price-block .qkCta__btnCol .qkCta__note {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  display: block;
  text-align: center;
}
html body .qkRec__ttl { color: var(--text-primary) !important; font-size: 18px; }
html body .qkRec__save {
  background: var(--state-ok-soft) !important;
  border: 1px solid var(--state-ok-line) !important;
  color: var(--state-ok-text) !important;
  border-radius: var(--r-field) !important;
  font-size: 15px;
  font-weight: 500;
}
html body .qkRec__save svg { stroke: var(--state-ok) !important; }
html body .qkRec__cta {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--action) !important;
  border-radius: var(--r-btn) !important;
  min-height: 52px;
}
html body .qkRec__cta:hover { border-color: var(--action) !important; }
html body .qkCta__bonus { color: var(--text-muted) !important; border-top: 1px solid var(--line) !important; font-size: 16px; }

/* Блок «персональный расчет» на воронках других стран: таблица расходов,
   пояснение под рекомендацией и список того, что придет вместе со сметой.
   На Вануату этих элементов нет, поэтому раньше они не были покрашены и
   ночью оставались светлой плитой с темным текстом. */
html body .qkRec__rows {
  background: var(--bg-page) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
}
html body .qkRec__row { border-bottom: 1px solid var(--line) !important; color: var(--text-muted) !important; }
html body .qkRec__row b { color: var(--text-primary) !important; }
html body .qkRec__row .minus { color: var(--state-ok-text) !important; }
html body .qkRec__row--total span,
html body .qkRec__row--total b { color: var(--text-primary) !important; }
html body .qkRec__desc { color: var(--text-muted) !important; font-size: 16px; }
html body #price-block .qkCta__list li { color: var(--text-primary) !important; font-size: 16px; }
html body #price-block .qkCta__incTtl { color: var(--text-faint) !important; }
/* Нумерованный список содержимого комплекта - есть на воронках других стран */
html body .qkPack__nums li { color: var(--text-primary) !important; font-size: 15.5px !important; }
html body .qkPack__nums li::before {
  background: var(--bg-blue-soft) !important;
  color: var(--action) !important;
}
html body .qkCta__bonus svg { stroke: var(--action) !important; }

/* --- Комплект материалов --- */
html body #price-block .qkBonus,
html body #price-block .qkPack__cols { border-color: var(--line) !important; }
html body #price-block .qkBonus__badge {
  background: var(--bg-blue-soft) !important;
  border: 1px solid var(--action-line) !important;
  color: var(--action) !important;
  font-size: 11.5px;
}
html body .qkPack__ttl {
  font-family: var(--vq-font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  color: var(--text-primary) !important;
}
html body .qkPack__sub { color: var(--text-muted) !important; font-size: 16px; line-height: 1.6; }
html body .qkPack__val li b { color: var(--text-primary) !important; font-size: 16px; }
html body .qkPack__val li span { color: var(--text-muted) !important; font-size: 15px; }
html body #price-block .qkPack__count { border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
html body .qkPack__count b { color: var(--text-primary) !important; }
html body .qkPack__count span { color: var(--text-muted) !important; }
html body .qkf__name { color: var(--text-muted) !important; font-size: 15px; }
/* Обложки документов - изображение бумаги, белые в обеих темах */
html body .qkf__sheet,
html body .qkFan__d { background: #fff; border-radius: 6px; }
html body .qkPack__dl { min-height: 52px; background: var(--action-fill) !important; color: var(--text-on-action) !important; border: 0 !important; }
html body .qkPack__dl:hover { background: var(--action-fill-hover) !important; }

/* ---------------------------------------------------------------------
   8. КОМАНДА
   --------------------------------------------------------------------- */
html body #qteam .qtc { border: 1px solid var(--line); border-radius: var(--r-card) !important; overflow: hidden; }
html body #qteam .qtc__n { color: #fff !important; font-size: 17px; font-weight: 600; }
html body #qteam .qtc__r,
html body #qteam .qtc__d { color: rgba(255, 255, 255, .78) !important; font-size: 15px; }

/* ---------------------------------------------------------------------
   9. БЛОК ДОВЕРИЯ И ОТЗЫВЫ
   --------------------------------------------------------------------- */
html body .socp__stats { border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
html body .socp__stat { border-color: var(--line) !important; }
html body .socp__stat b { font-family: var(--vq-font-display); font-weight: 400; color: var(--text-primary) !important; }
html body .socp__stat span { color: var(--text-muted) !important; font-size: 15px; }
html body .socp__r { border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
html body .socp__r blockquote { color: var(--text-primary) !important; font-size: 16px; line-height: 1.6; }
html body .socp__cap b { color: var(--text-primary) !important; font-size: 15px; }
html body .socp__cap span { color: var(--text-muted) !important; font-size: 14px; }
html body .socp__arw {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--action) !important;
}
html body .socp__arw:hover { border-color: var(--action) !important; }
html body .socp__all { color: var(--action) !important; font-size: 16px; font-weight: 500; }

/* ---------------------------------------------------------------------
   10. КЕЙСЫ
   --------------------------------------------------------------------- */
html body #cases-block .chSlide,
html body #cases-block .chTile { border-radius: var(--r-card) !important; overflow: hidden; }
html body #cases-block .chSlide__nm {
  font-family: var(--vq-font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Факты кейса: исходная ситуация - задача - что сделали - срок - результат */
html body .chFacts { margin: 14px 0 0; display: grid; gap: 8px; }
html body .chFacts > div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
html body .chFacts dt {
  font: 600 12px/1.4 var(--vq-font-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin: 0;
}
html body .chFacts dd { margin: 0; font: 400 15px/1.5 var(--vq-font-text); color: #fff; }
html body #cases-block .chBtn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-btn) !important;
}
html body #cases-block .chBtn:hover { border-color: var(--action) !important; color: var(--action) !important; }
html body #cases-block .chBar { background: var(--line) !important; }
html body #cases-block .chBar i { background: var(--action) !important; }
/* Стрелка едет через карточку при наведении - стандарт /about-us/ */
html body #cases-block .chTile img,
html body #cases-block .chSlide > img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
html body #cases-block .chTile:hover img,
html body #cases-block .chSlide:hover > img { transform: scale(1.035); }

/* ---------------------------------------------------------------------
   11. FAQ
   --------------------------------------------------------------------- */
html body .faqIt { border-color: var(--line) !important; }

/* Кегль вопросов и ответов - ЭТАЛОН /ru/careers/ (стандарт FAQ сайта):
   номер 15px синий, вопрос 17px/500 с интерлиньяжем 1.4, ответ 16px/400
   с интерлиньяжем 1.7. Ничего своего здесь не выдумываем.
   :not(#_) обязателен - тем же приемом написано правило в bridges-tuning. */
/* Номер - Metal-Reg-1, как на эталоне (это цифра, а не текст). */
html body .faq .faqIt__num:not(#_) {
  font-family: var(--vq-font-display) !important;
  color: var(--action) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
/* Вопрос - MONTSERRAT. На воронке он наследовал Metal от старой темы,
   и текст читался заголовочным шрифтом. На эталоне это обычный текст. */
html body .faq .faqIt .faqIt__head .faqIt__ttl:not(#_) {
  font-family: var(--vq-font-text) !important;
  color: var(--text-primary) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}
html body .faq .faqIt__txt:not(#_),
html body .faq .faqIt__txt p:not(#_) {
  font-family: var(--vq-font-text) !important;
  color: var(--text-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: -.0261em !important;
}

/* Ритм строки - тоже с эталона: строка вопроса 20px сверху и снизу
   (высота 68px), между номером и текстом 16px, ответ с отступом 40px
   слева и 24px снизу. У нас строки были разрежены, и на широком
   контейнере вопросы читались мелкими. */
html body .faq .faqIt__head:not(#_) {
  padding: 20px 0 !important;
  gap: 16px !important;
}
html body .faq .faqIt__num:not(#_) { min-width: 0 !important; }
/* Своя min-height растягивала строку до 92px против 68px на эталоне */
html body .faq .faqIt__head:not(#_) { min-height: 68px !important; }
html body .faq .faqIt__head:not(#_)::after { width: 28px !important; height: 28px !important; }
html body .faq .faqIt__txt:not(#_) { padding: 0 0 24px 40px !important; }

/* ---------------------------------------------------------------------
   12. ФИНАЛЬНАЯ КОНСУЛЬТАЦИЯ
   --------------------------------------------------------------------- */
html body .vctaCard { color: var(--text-primary) !important; }
html body .vctaCard .vctaTtl {
  font-family: var(--vq-font-display);
  font-weight: 400;
  color: var(--text-primary) !important;
}
html body .vctaCard .vctaSub { color: var(--text-muted) !important; font-size: 17px; line-height: 1.6; }
html body .vctaCard .vctaName b { color: var(--text-primary) !important; font-size: 16px; }
html body .vctaCard .vctaName span { color: var(--text-muted) !important; font-size: 15px; }
html body .vctaMsg { color: var(--text-muted) !important; font-size: 15px; }
html body .vctaMsg a { color: var(--action) !important; }

/* ---------------------------------------------------------------------
   13. ОКНО СМЕТЫ, COOKIE, ЛИПКАЯ ПОЛОСА
   --------------------------------------------------------------------- */

html body .qkm__form b { color: var(--text-primary) !important; }
html body .qkm__form > p { color: var(--text-muted) !important; font-size: 16px; }
html body .qkm__form input { min-height: 52px; font-size: 16px; }
html body .qkm__form button.btn { min-height: 58px; background: var(--action-fill) !important; color: var(--text-on-action) !important; }
html body .qkm__note { color: var(--text-faint) !important; font-size: 14px; }
html body .qkm__done b { color: var(--text-primary) !important; }
html body .qkm__lock { color: var(--action) !important; }

html body .brCookie {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-pop);
}
html body .brCookie p,
html body .brCookie span,
html body .brCookie small { color: var(--text-muted) !important; }
html body .brCookie b,
html body .brCookie strong { color: var(--text-primary) !important; }
html body .brCookie__btn--g {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-btn) !important;
}

html body .qSticky {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
}
html body .qSticky__price b { color: var(--text-primary) !important; font-size: 17px; }
html body .qSticky__price span { color: var(--text-muted) !important; font-size: 13px; }
html body .qSticky__btn {
  background: var(--action-fill) !important;
  color: var(--text-on-action) !important;
  border-radius: var(--r-btn) !important;
  min-height: 50px;
  font-size: 15px;
}

/* Переключатель темы */
html body #themeToggle {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--action);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------
   14. МОБИЛЬНАЯ ВЕРСИЯ - 768 / 430 / 390
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
  html body #price-block .qk { grid-template-columns: 1fr !important; }
  html body #price-block .qk__form { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 26px 20px; }
  html body #price-block .qk__res { position: static !important; padding: 26px 20px 28px; }
  html body #price-block .qkCta { padding: 28px 20px; }
  html body .chFacts > div { grid-template-columns: 1fr; gap: 2px; }
  html body .chFacts dd { font-size: 15px; }
}

@media (max-width: 767px) {
  html, html body { overflow-x: hidden; max-width: 100%; }
  html body .wrapper,
  html body .qHdr__in { padding-left: 16px !important; padding-right: 16px !important; }

  html body .qHero__ttl { font-size: clamp(30px, 8.4vw, 40px) !important; line-height: 1.08 !important; }
  html body .qHero__txt p { font-size: 16px; }
  html body .qHeroPrice { gap: 8px 12px; }
  html body .qHeroPrice em { width: 100%; }
  html body .qHero__cta { width: 100%; }
  html body .qHero__adv { display: grid; gap: 10px; }

  /* Калькулятор на телефоне остается полноценным инструментом */
  html body #price-block .qk__tiles { grid-template-columns: 1fr !important; gap: 10px; }
  html body #price-block .qk__tile { padding: 16px 18px; }
  html body #price-block .qk__add { padding: 14px 16px; }
  html body #price-block .qk__step button { width: 40px; height: 40px; }
  html body #price-block .qk__step i { min-width: 28px; font-size: 17px; }
  html body #price-block .qk__resPrice b { font-size: 38px; }
  html body #price-block .qk__vs { flex-wrap: wrap; }
  html body #price-block .qk__vs b { width: 100%; margin-top: 6px; }
  html body #price-block .qkCta__btn { min-height: 58px; }
  html body #price-block .qk__tipPop { left: 0; transform: none; width: min(260px, 72vw); }

  html body .qTrust { grid-template-columns: 1fr !important; }
  html body .qkCta__compo { grid-template-columns: 1fr !important; }

  html body .socp__stats { border-radius: var(--r-card) !important; }
  html body .vctaCard { border-radius: var(--r-card) !important; }

  /* Длинные суммы не должны рвать сетку */
  html body .qk__resBackRow,
  html body .qkRec__row { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  html body .qHeroFan { max-width: 260px; }
  html body #price-block .qk__form,
  html body #price-block .qk__res { padding-left: 16px; padding-right: 16px; }
  html body #price-block .qkCta { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------
   15. ЛЕГАСИ-ОБЛАСТЬ .cz - у нее свои !important-правила поверх наших.
   Финальный блок консультации перекрашиваем в общей области, иначе
   ночью он остается светлым, а текст на нем - белым по светлому.
   --------------------------------------------------------------------- */
/* Карточка эталона: без рамки, радиус 28px, поля 64x60, фон на тон
   светлее секции - именно перепад фонов и рисует карточку. */
html body .cz .vctaCard {
  background: var(--vq-cta-card) !important;
  border: 0 !important;
  border-radius: var(--r-card-lg) !important;
  box-shadow: none !important;
  padding: 64px 60px !important;
}
html body .cz .vctaCard .vctaTtl { font-size: 36px !important; line-height: 1.1 !important; }
html body .cz .vctaCard .vctaSub { font-size: 17px !important; line-height: 1.6 !important; }
html body .cz .vctaMsg { font-size: 15.5px !important; }
html body .cz .vctaBtn { padding: 18px 30px !important; min-height: 0 !important; }
html body .cz .vctaBtn--sec { background: var(--vq-cta-card) !important; border: 1px solid var(--line) !important; }
html body .cz .vctaCard .vctaTtl,
html body .cz .vctaName b { color: var(--text-primary) !important; }
html body .cz .vctaCard .vctaSub,
html body .cz .vctaName span,
html body .cz .vctaMsg { color: var(--text-muted) !important; }
html body .cz .vctaMsg a { color: var(--action) !important; }
html body .cz .vctaBtn {
  border-radius: var(--r-btn) !important;
  min-height: 58px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
html body .cz .vctaBtn:not(.vctaBtn--sec) {
  background: var(--action-fill) !important;
  color: var(--text-on-action) !important;
  border: 0 !important;
}
html body .cz .vctaBtn:not(.vctaBtn--sec):hover { background: var(--action-fill-hover) !important; }
html body .cz .vctaBtn--sec {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-primary) !important;
}
html body .cz .vctaBtn--sec:hover { border-color: var(--action) !important; color: var(--action) !important; }

/* Знак «плюс/минус» в вопросах: рисуем своим SVG в цвете текста, чтобы
   он читался в обеих темах и не тянулся со старого домена. */
html body .faqIt__head::after {
  background-image: none !important;
  background-color: currentColor !important;
  color: var(--text-muted) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%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 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .faqIt.active .faqIt__head::after {
  color: var(--action) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* Галочки в списках комплекта - тоже своим цветом, без обращения к старому домену */
html body .qkPack__val li::before,
html body .quizAdv li::before,
html body .qkCta__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}


/* ---------------------------------------------------------------------
   16. ТОЧЕЧНЫЕ ПРАВКИ МОБИЛЬНОЙ ВЕРСТКИ
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Цена: сумма, уточнение и два факта - каждый со своей строки,
     точки-разделители на узком экране только рвали строку. */
  html body .qHeroPrice { display: grid; gap: 2px; }
  html body .qHeroPrice i { display: none; }
  html body .qHeroPrice em { margin-bottom: 6px; }

  /* Подсказка у «других иждивенцев» не должна вылезать за экран */
  html body #price-block .qk__tipPop {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    z-index: 1300;
  }

  /* Подписи кейсов на темной панели */
  html body #cases-block .chFacts { gap: 6px; }
  html body #cases-block .chFacts dt { font-size: 11px; }
  html body #cases-block .chFacts dd { font-size: 14px; }
}

/* На телефоне первым идет содержание, а не картинка: человек должен
   сразу видеть заголовок и сумму, лист сметы - следом. */
@media (max-width: 991px) {
  html body .qHero__cnt { order: 0; }
  html body .qHero__doc { order: 1 !important; margin: 26px 0 0 !important; }
  html body .qHeroFan { margin-bottom: 0 !important; }
}