/* ============================================================================
   lis post — контентные страницы (15.09.2026)
   ----------------------------------------------------------------------------
   Общий стиль для страниц «Услуги и цены», «Как искать работу», «Резюме под
   вакансию», «Сопроводительное письмо», «Досье на компанию», «Резюме и ATS».

   Источник правил: deploy/_brand_20260913/БРЕНДБУК.md + static/tokens.css.
   Токены (--color-*, --space-*, --radius-*) подключаются отдельным файлом
   tokens.css и здесь НЕ дублируются.

   Правила, зашитые в этот файл:
   - бирюза #0EA5A0 (--color-brand-500) только для заливок и графики;
     текст — --color-brand-700 (#0F766E, 5.47:1);
   - числа, суммы, проценты — JetBrains Mono, tabular-nums, по правому краю;
   - одна залитая кнопка на экран (--btn-primary);
   - отступы только из шкалы --space-*;
   - анимация: статичное состояние по умолчанию, движение включается внутри
     @media (prefers-reduced-motion: no-preference); при reduce движение
     сокращается до смены прозрачности, а не выключается;
   - тап-таргеты >= 44px.
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Переход по якорю (#faq и прочие): липкая шапка (45px на 390, 71px на 1440)
   иначе накрывает заголовок, к которому ведёт ссылка. */
section[id], [id="faq"] { scroll-margin-top: 84px; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: none;
}
img { max-width: 100%; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); }
.narrow { max-width: 760px; }

a { color: var(--color-brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-brand-700); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Иконки (Lucide, спрайт): только currentColor, 24x24, без заливки
   -------------------------------------------------------------------------- */
.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 24px; height: 24px; }
.ic-tile {
  width: 44px; height: 44px; padding: 10px; border-radius: var(--radius-md);
  background: var(--color-brand-50); color: var(--color-brand-700);
}

/* --------------------------------------------------------------------------
   Кнопки: залитая только одна на экран
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 13px var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.25;
  text-align: center; text-decoration: none !important; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn-primary { background: var(--color-brand-700); color: #fff; }
.btn-primary:hover { background: var(--color-brand-800); }
.btn-primary:active { background: var(--color-brand-900); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-ghost:hover { border-color: var(--color-brand-700); color: var(--color-brand-700); }
.btn-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-brand-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   Шапка и подвал публичных страниц: один и тот же состав на лендинге и на
   контентных страницах (разделы сайта, «Резюме и письмо», контакт).
   -------------------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav { display: flex; align-items: center; gap: 18px; padding: 12px 0; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; text-decoration: none !important; }
.brand:hover { text-decoration: none; }
.logo {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--color-brand-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.brand-t { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--color-text); white-space: nowrap; }
.brand-s { font-size: 11.5px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 6px; flex-wrap: nowrap; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-text-secondary); font-size: 13.5px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; line-height: 1.2;
}
.nav-links a:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.spacer { flex: 1; }
.nav .login { min-height: 44px; padding: 10px var(--space-4); font-size: 14px; flex-shrink: 0; }
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  background: none; border: 1px solid var(--color-border); border-radius: 10px;
  color: var(--color-text); font-size: 20px; cursor: pointer;
}
.nav-burger:hover { border-color: var(--color-brand-700); color: var(--color-brand-700); }
.nav-links.open { display: flex; }

/* Раздел «Резюме и письмо»: на десктопе выпадающий список, на мобильном он
   раскрывается прямо в панели меню (см. медиазапрос 1024px ниже). */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--color-text-secondary); font-size: 13.5px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; line-height: 1.2;
}
.nav-drop-btn:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.nav-drop-btn .ic-caret { width: 16px; height: 16px; transition: transform .18s ease; }
.nav-drop.open .nav-drop-btn { color: var(--color-text); background: var(--color-bg-subtle); }
.nav-drop.open .nav-drop-btn .ic-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 252px;
  display: none; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: 0 18px 40px rgba(20,24,31,.14); z-index: 90;
}
.nav-drop.open .nav-drop-menu { display: flex; }
.nav-drop-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 11px 12px;
  font-size: 13.5px; color: var(--color-text); border-radius: 8px; text-decoration: none;
}
.nav-drop-menu a:hover { background: var(--color-bg-subtle); }

/* Плашка о статусе проекта: спокойная, без крика, читается на обоих
   разрешениях (переносится по строкам, иконка не сжимается). */
.status-note { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.status-note .wrap {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; padding-bottom: 10px;
  color: var(--color-text-secondary); font-size: 13.5px; line-height: 1.45;
}
.status-note .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-brand-700); }

footer { border-top: 1px solid var(--color-border); padding: 56px 0 60px; background: var(--color-bg); }
.foot { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--space-8); }
.foot p { color: var(--color-text-secondary); font-size: 13.5px; max-width: 330px; line-height: 1.6; margin-top: var(--space-3); }
.foot h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-text); margin-bottom: var(--space-3); }
.foot a { display: flex; align-items: center; min-height: 44px; color: var(--color-text-secondary); font-size: 13.5px; text-decoration: none; }
.foot a:hover { color: var(--color-text); }
.copy {
  border-top: 1px solid var(--color-border); margin-top: var(--space-10); padding-top: var(--space-5);
  color: var(--color-text-secondary); font-size: 13px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Каркас страницы
   -------------------------------------------------------------------------- */
main { padding: var(--space-16) 0 56px; }
.kicker { font-size: 12px; font-weight: 700; color: var(--color-brand-700); text-transform: uppercase; letter-spacing: 2.2px; margin-bottom: var(--space-3); }
h1 { font-size: clamp(28px, 2.4vw + 14px, 42px); line-height: 1.18; letter-spacing: -.7px; font-weight: 800; }
h2 { font-size: clamp(21px, 1.1vw + 15px, 28px); line-height: 1.24; letter-spacing: -.3px; font-weight: 700; margin-bottom: var(--space-4); }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.2px; font-weight: 700; margin-bottom: var(--space-2); }
h4 { font-size: 16px; font-weight: 600; margin-bottom: var(--space-1); }
.lead { color: var(--color-text-secondary); font-size: 17.5px; line-height: 1.6; margin-top: var(--space-4); max-width: 720px; }
p { margin-bottom: var(--space-3); }
p:last-child { margin-bottom: 0; }
.section { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.section:first-of-type { border-top: 0; padding-top: var(--space-10); }
.section > .sub { color: var(--color-text-secondary); font-size: 16px; max-width: 760px; margin: -8px 0 var(--space-6); }
.muted { color: var(--color-text-secondary); }
.small { font-size: 13.5px; line-height: 1.55; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Карточки и сетки
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-bg); padding: var(--space-5);
}
.card-soft { background: var(--color-bg-subtle); border-color: var(--color-border); }
.card h3 { display: flex; align-items: center; gap: var(--space-2); }
.card p, .card li { font-size: 15px; }
.card-dark { background: var(--color-navy-900); border-color: var(--color-navy-line); color: var(--color-navy-text); }
.card-dark h3 { color: var(--color-navy-text); }
.card-dark p, .card-dark li { color: var(--color-navy-muted); }

.list-plain { list-style: none; }
.list-plain li { position: relative; padding-left: 26px; margin: 9px 0; font-size: 16px; }
.list-plain li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-500); }
.list-check li::before, .list-cross li::before {
  content: ""; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: no-repeat center/11px 11px;
}
.list-check li::before { background-color: #E8F9EC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.list-cross li::before { background-color: #FBEAEA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.list-check li, .list-cross li { padding-left: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 600; background: var(--color-gray-100); color: var(--color-gray-700);
  white-space: nowrap;
}
.badge-teal { background: var(--color-brand-50); color: var(--color-brand-800); }
.badge-ok { background: #E8F9EC; color: #1E7A24; }
.badge-warn { background: #FEF7E0; color: #7A5400; }
.badge-info { background: #E6F4F6; color: #0B6B73; }
.badge-soft { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Таблица цен: mono-цифры, tabular-nums, выравнивание вправо, hover строки
   -------------------------------------------------------------------------- */
/* Горизонтальная прокрутка нужна только там, где таблица не влезает. На
   широком экране обёртку НЕ делаем скролл-контейнером: любой overflow, кроме
   visible, превращает контейнер в скроллпорт, и липкая шапка таблицы
   перестаёт следовать за страницей (бралась бы относительно обёртки). */
.table-scroll { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
@media (max-width: 767px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
table.svc { width: 100%; border-collapse: collapse; min-width: 620px; }
table.svc caption { text-align: left; padding: var(--space-4) var(--space-5); font-weight: 700; color: var(--color-text); }
table.svc th, table.svc td { padding: 13px var(--space-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
table.svc thead th {
  /* липкая шапка таблицы встаёт вплотную под липкую шапку сайта (её высота
     замерена: 71px на десктопе, 45px на мобильном), иначе между ними
     просвечивают строки таблицы */
  position: sticky; top: 75px; z-index: 2;
  background: var(--color-bg-subtle); color: var(--color-gray-700);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
table.svc tbody tr:last-child td { border-bottom: 0; }
table.svc tbody tr:hover td { background: var(--color-bg-subtle); }
table.svc td.num, table.svc th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
table.svc td.num b { font-weight: 600; }
table.svc .op-name { font-weight: 600; }
table.svc .op-note { display: block; color: var(--color-text-secondary); font-size: 13.5px; margin-top: 2px; }
table.svc tr.group-row td {
  background: var(--color-brand-50); color: var(--color-brand-800);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
  padding: 9px var(--space-5);
}
table.svc tr.group-row:hover td { background: var(--color-brand-50); }
.price-free { color: var(--color-success-ink); font-weight: 600; }
.price-note { display: block; color: var(--color-text-secondary); font-size: 13px; margin-top: 3px; font-family: var(--font-sans); }
.table-hint { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Таблицы-справочники (площадки, источники проверки)
   Отличие от таблицы цен: строки длинные, цифр нет, шапка не липкая.
   На узком экране четыре колонки текста не читаются, поэтому до 768px
   каждая строка становится карточкой, а подпись колонки берётся из
   data-label у ячейки.
   -------------------------------------------------------------------------- */
.table-box { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 13px var(--space-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
table.tbl thead th { background: var(--color-bg-subtle); color: var(--color-gray-700); font-size: 13px; font-weight: 600; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--color-bg-subtle); }
table.tbl .t-name { font-weight: 600; }
table.tbl .t-note { display: block; color: var(--color-text-secondary); font-size: 13.5px; margin-top: 3px; }
@media (max-width: 767px) {
  .table-box { border: 0; border-radius: 0; }
  table.tbl thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: auto; }
  table.tbl tbody tr {
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
    padding: var(--space-2) 0; margin-bottom: var(--space-4); background: var(--color-bg);
  }
  table.tbl tbody tr:last-child { margin-bottom: 0; }
  table.tbl tbody tr:hover td { background: transparent; }
  table.tbl td { border-bottom: 0; padding: 8px var(--space-4); font-size: 15px; }
  table.tbl td:first-child { padding-top: var(--space-4); }
  table.tbl td:last-child { padding-bottom: var(--space-4); }
  table.tbl td::before {
    content: attr(data-label); display: block;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
    color: var(--color-text-secondary); margin-bottom: 3px;
  }
}

/* --------------------------------------------------------------------------
   Калькулятор сметы
   -------------------------------------------------------------------------- */
.calc {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-bg-subtle); padding: var(--space-5);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--space-6);
}
.calc-ops { display: flex; flex-direction: column; gap: 2px; }
.calc-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg);
  border: 1px solid var(--color-border); cursor: pointer;
}
.calc-row:hover { border-color: var(--color-brand-200); }
.calc-row.is-on { border-color: var(--color-brand-500); background: var(--color-brand-50); }
.calc-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-brand-700); }
.calc-row .calc-label { font-size: 15px; }
.calc-row .calc-label small { display: block; color: var(--color-text-secondary); font-size: 12.5px; }
.calc-qty { display: flex; align-items: center; gap: var(--space-2); }
.calc-qty input {
  width: 68px; min-height: 44px; padding: 0 var(--space-2);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
  background: var(--color-bg-input); color: var(--color-text);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; text-align: right;
}
.calc-qty input:focus { border-color: var(--color-brand-700); box-shadow: var(--focus-ring); outline: none; background: #fff; }
.calc-qty .unit { font-size: 12.5px; color: var(--color-text-secondary); white-space: nowrap; }
.calc-row input[type="checkbox"]:disabled ~ .calc-label { color: var(--color-gray-500); }
.calc-sum {
  background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: var(--space-5); align-self: start; position: sticky; top: 100px;
}
.calc-sum h3 { font-size: 16px; }
.calc-lines { list-style: none; margin: var(--space-3) 0; font-size: 14px; }
.calc-lines li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 5px 0; color: var(--color-text-secondary); border-bottom: 1px dashed var(--color-border); }
.calc-lines li span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); white-space: nowrap; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-3); }
.calc-total .t-label { font-weight: 600; }
.calc-total .t-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; color: var(--color-brand-800); }
.calc-empty { color: var(--color-text-secondary); font-size: 14px; }
.calc-hint { margin-top: var(--space-4); font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; }

/* Пометка «цены справочные, офертой не является» (15.09.2026).
   Спокойная строка у прайса и у калькулятора: 13.5px, вторичный текст
   (--color-text-secondary = #5C6470, 5.98:1 на белом), без заливки. */
.price-note {
  margin-top: var(--space-3);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 760px;
}
.calc-sum .price-note { margin-top: var(--space-4); max-width: none; }

/* --------------------------------------------------------------------------
   Аккордеон (вопросы и ответы)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; padding: var(--space-4) 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--color-text); text-align: left;
}
.faq-q:hover { color: var(--color-brand-700); }
.faq-q .chev { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--color-brand-700); transition: transform .2s ease; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { font-size: 16px; color: var(--color-gray-800); padding-bottom: var(--space-4); max-width: 780px; }
.faq-a p:first-child { padding-top: 2px; }

/* --------------------------------------------------------------------------
   Шаги с залипающими номерами
   -------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border);
}
.step:last-child { border-bottom: 0; }
.step-n {
  position: sticky; top: 88px; align-self: start;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-subtle); color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-mono); font-weight: 600; font-size: 17px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.step.is-active .step-n { background: var(--color-brand-700); color: #fff; border-color: var(--color-brand-700); }
.step h3 { margin-bottom: 6px; }
.step .step-meta { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   Сравнитель времени (ползунок + число)
   -------------------------------------------------------------------------- */
.cmp { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-bg-subtle); }
.cmp-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.cmp-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cmp-field label { font-size: 14px; font-weight: 600; }
.cmp-field .row { display: flex; align-items: center; gap: var(--space-3); }
.cmp-field output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; color: var(--color-brand-800); min-width: 74px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--color-gray-200); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--color-brand-700); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(20,24,31,.25); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--color-gray-200); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--color-brand-700); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(20,24,31,.25); }
input[type="range"]:focus-visible { outline: 2px solid var(--color-brand-700); outline-offset: 6px; border-radius: var(--radius-sm); }
.cmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.cmp-col { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.cmp-col h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); }
.cmp-big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.1; margin: var(--space-2) 0 var(--space-3); color: var(--color-text); }
.cmp-col.is-ours { border-color: var(--color-brand-500); background: var(--color-brand-50); }
.cmp-col.is-ours .cmp-big { color: var(--color-brand-800); }
.cmp-list { list-style: none; font-size: 14.5px; color: var(--color-text-secondary); }
.cmp-list li { position: relative; padding-left: 20px; margin: 6px 0; }
.cmp-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gray-400); }
.cmp-col.is-ours .cmp-list li::before { background: var(--color-brand-500); }
.cmp-assume { margin-top: var(--space-4); font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; }

/* --------------------------------------------------------------------------
   «До и после» адаптации резюме
   -------------------------------------------------------------------------- */
.ba { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; }
.ba-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.ba-head .ba-title { font-weight: 700; }
.ba-legend { display: flex; gap: var(--space-4); font-size: 12.5px; color: var(--color-text-secondary); }
.ba-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ba-dot { width: 10px; height: 10px; border-radius: 3px; }
.ba-dot.before { background: var(--color-gray-200); }
.ba-dot.after { background: var(--color-brand-500); }
.ba-slider { padding: var(--space-4) var(--space-5) var(--space-2); border-bottom: 1px solid var(--color-border); }
.ba-slider label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--space-2); }
.ba-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--color-text-secondary); }
.ba-body { padding: var(--space-2) var(--space-5) var(--space-5); background: var(--color-bg); }
.ba-row { padding: var(--space-4) 0; border-bottom: 1px dashed var(--color-border); }
.ba-row:last-child { border-bottom: 0; }
.ba-row .ba-what { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); margin-bottom: 8px; }
.ba-text { font-size: 16px; line-height: 1.55; padding: 10px var(--space-4); border-radius: var(--radius-sm); }
.ba-before { background: var(--color-gray-100); color: var(--color-gray-700); }
.ba-after { background: var(--color-brand-50); color: var(--color-brand-900); border-left: 3px solid var(--color-brand-500); }
.ba-row .ba-why { display: none; margin-top: 8px; font-size: 13.5px; color: var(--color-brand-800); }
.ba-row.changed .ba-why { display: block; }
.ba-row.changed .ba-before { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--color-gray-400); }
.ba-row .ba-after { display: none; }
.ba-row.changed .ba-after { display: block; }
.ba-row.changed { background: linear-gradient(90deg, rgba(14,165,160,.05), transparent 70%); }
.ba-who { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-secondary); }
.ba-note { padding: var(--space-4) var(--space-5); background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); font-size: 13.5px; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Табы
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.tab-btn {
  min-height: 48px; padding: 0 var(--space-4); background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-text-secondary);
  cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn[aria-selected="true"] { color: var(--color-brand-800); border-bottom-color: var(--color-brand-700); }
.tab-panel { padding: var(--space-5) 0 0; }
.tab-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Пример письма и переключатели
   -------------------------------------------------------------------------- */
.switches { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-5); }
.switch-group { border: 0; padding: 0; }
.switch-group legend { font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--color-text-secondary); font-weight: 700; margin-bottom: var(--space-2); }
.switch-items { display: flex; gap: var(--space-1); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px; }
.switch-items button {
  min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: none;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
}
.switch-items button:hover { color: var(--color-text); }
.switch-items button[aria-pressed="true"] { background: var(--color-bg); color: var(--color-brand-800); box-shadow: var(--shadow-sm); }
.letter {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg);
}
.letter-head { padding: var(--space-4) var(--space-5); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.letter-head .l-subj { display: block; margin-top: 4px; font-size: 14.5px; }
.letter-head .l-subj b { color: var(--color-text); }
.letter-body { padding: var(--space-5); white-space: pre-line; font-size: 16px; line-height: 1.7; }
.letter-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); font-size: 13.5px; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Досье: раскрытие через grid-template-rows 0fr -> 1fr
   -------------------------------------------------------------------------- */
.dossier { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); }
.dossier-head {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; text-align: left;
  min-height: 64px; padding: var(--space-4) var(--space-5); background: none; border: 0; cursor: pointer; font-family: inherit;
}
.dossier-head:hover { background: var(--color-bg-subtle); }
.dossier-head .d-title { font-size: 17px; font-weight: 700; color: var(--color-text); }
.dossier-head .d-sub { display: block; font-size: 13.5px; font-weight: 400; color: var(--color-text-secondary); margin-top: 2px; }
.dossier-head .chev { margin-left: auto; flex: none; color: var(--color-brand-700); transition: transform .2s ease; }
.dossier.open .dossier-head .chev { transform: rotate(180deg); }
.dossier-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.dossier.open .dossier-wrap { grid-template-rows: 1fr; }
.dossier-wrap > div { overflow: hidden; }
.dossier-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--color-border); }
.d-row { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px dashed var(--color-border); }
.d-row:last-child { border-bottom: 0; }
.d-key { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--color-text-secondary); padding-top: 3px; }
.d-val { font-size: 15.5px; }
.d-val .none { color: var(--color-text-secondary); }
.d-src { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--space-2); }
.d-src .ic { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Демонстрация разбора резюме
   -------------------------------------------------------------------------- */
.ats { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; }
.ats-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); align-items: center; }
.ats-toolbar .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--color-text-secondary); font-weight: 700; margin-right: var(--space-2); }
.chip-btn {
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer;
}
.chip-btn:hover { border-color: var(--color-brand-700); color: var(--color-brand-700); }
.chip-btn[aria-pressed="true"] { background: var(--color-brand-700); border-color: var(--color-brand-700); color: #fff; }
.ats-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ats-pane { padding: var(--space-5); }
.ats-pane + .ats-pane { border-left: 1px solid var(--color-border); }
.ats-pane h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.ats textarea {
  width: 100%; min-height: 260px; resize: vertical; padding: var(--space-4);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-md);
  background: var(--color-bg-input); color: var(--color-text);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
}
.ats textarea:focus { outline: none; border-color: var(--color-brand-700); box-shadow: var(--focus-ring); background: #fff; }
.ats-results { list-style: none; }
.ats-results li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-bottom: 1px dashed var(--color-border); font-size: 14.5px; }
.ats-results li:last-child { border-bottom: 0; }
.ats-results .res-ico { width: 20px; height: 20px; margin-top: 1px; }
.ats-results .ok .res-ico { color: var(--color-success-ink); }
.ats-results .no .res-ico { color: var(--color-gray-500); }
.ats-results .res-val { display: block; font-family: var(--font-mono); font-size: 13.5px; color: var(--color-text); margin-top: 3px; word-break: break-word; }
.ats-results .res-why { display: block; font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }
.ats-sum { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); font-size: 14.5px; }
.ats-sum b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Призыв к действию
   -------------------------------------------------------------------------- */
.cta {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  padding: var(--space-8); background: var(--color-brand-50);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.cta h2 { margin-bottom: var(--space-2); }
.cta p { color: var(--color-gray-800); max-width: 620px; font-size: 16px; }
.cta .cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.links-near { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5); }
.links-near a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Появление блоков при прокрутке.
   Статичное состояние по умолчанию: без JS и при reduce контент просто виден.
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; }
html.anim .reveal { opacity: 0; }
html.anim .reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .reveal { transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  html.anim .reveal.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { transition: opacity .01ms linear; }
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) { .nav .brand-s { display: none; } }

@media (max-width: 1024px) {
  .nav-links {
    display: none; position: absolute; top: calc(100% + 6px); left: 16px; right: 16px;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(20,24,31,.14); z-index: 90;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 15px; color: var(--color-text); border-radius: 9px; }
  .nav-links a:hover { background: var(--color-bg-subtle); }
  .nav-burger { display: inline-flex; }
  .nav { flex-wrap: wrap; }
  .nav-drop { position: static; }
  .nav-drop-btn {
    width: 100%; justify-content: space-between; padding: 13px 14px;
    font-size: 15px; color: var(--color-text); border-radius: 9px;
  }
  .nav-drop-btn:hover { background: var(--color-bg-subtle); }
  .nav-drop-menu {
    position: static; display: none; min-width: 0; margin: 0;
    padding: 0 0 0 14px; background: transparent; border: 0; box-shadow: none;
  }
  .nav-drop.open .nav-drop-menu { display: flex; }
  .nav-drop-menu a { padding: 13px 14px; font-size: 15px; color: var(--color-text); }
  table.svc thead th { top: 50px; }
  .step-n { top: 62px; }
  .calc { grid-template-columns: 1fr; }
  .calc-sum { position: static; }
  .ats-grid { grid-template-columns: 1fr; }
  .ats-pane + .ats-pane { border-left: 0; border-top: 1px solid var(--color-border); }
}

@media (max-width: 920px) {
  .foot { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-controls, .cmp-cols { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); }
  .step-n { width: 38px; height: 38px; font-size: 15px; top: 92px; }
  .d-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .foot { grid-template-columns: 1fr; gap: 28px; }
  .copy { flex-direction: column; align-items: center; text-align: center; }
  main { padding: var(--space-10) 0 var(--space-10); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .cta { padding: var(--space-5); }
  .cta .cta-actions { width: 100%; }
  .cta .cta-actions .btn { width: 100%; }
  .section { padding: var(--space-10) 0; }
  table.svc th, table.svc td { padding: 11px var(--space-4); }
  .switches { gap: var(--space-4); }
  .switch-items { flex-wrap: wrap; }
  .letter-body { padding: var(--space-4); }
  .ba-body, .ba-slider, .ba-head { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .nav { gap: 10px; }
  .logo { width: 38px; height: 38px; }
  .brand-t { font-size: 16px; }
  .calc-row { grid-template-columns: 24px minmax(0, 1fr); }
  .calc-row .calc-qty { grid-column: 2; }
}


/* Длинный перечень правил вида «заголовок → пояснение → список» (например,
   на странице составления резюме). Без воздуха и разделителей подразделы
   сливаются в одну простыню, поэтому даём каждому заголовку отступ сверху
   и тонкую линию над ним. */
.sect-list h3 { margin-top: var(--space-10); padding-top: var(--space-8);
  border-top: 1px solid var(--color-border); }
.sect-list h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sect-list p { color: var(--color-text-secondary); line-height: 1.65; }
.sect-list ul { margin-top: var(--space-4); }
.sect-list li { line-height: 1.6; }
.sect-list li + li { margin-top: var(--space-3); }