/* ═══════════════════════════════════════════════════════════
   Честный брокер — openbroker24.ru
   Дизайн-система по Brand System v3
   Палитра: три цвета + нейтральные. Всё остальное — производные.
   #142E50 структура · #1B6B45 выгода · #8F6009 внимание
   Шрифты: IBM Plex Sans + IBM Plex Mono
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #142E50;        /* структура: заголовки, текст, логотип */
  --ink-deep: #0E2238;   /* тёмная полоса метрик — единственный второй тёмный */
  --ink-soft: #3D5578;
  --save: #1B6B45;       /* выгода: экономия, цифры, CTA */
  --save-dark: #145637;  /* нажатие и hover на зелёном */
  --save-tint: #EBF5EE;  /* подложка под цифрой экономии */
  --save-on-dark: #5FC99B; /* зелёный по тёмному фону */
  --warn: #8F6009;       /* внимание: дедлайн, условие, обязательное поле */
  --warn-on-dark: #F5C244; /* охра по тёмному фону */
  --cream: #F7F6F3;      /* тёплый фон */
  --white: #FFFFFF;
  --rule: #E3E1DB;       /* линии */
  --dim: #657081;       /* вторичный текст */
  --field-line: rgba(20,46,80,.55); /* рамка полей ввода: 3.4:1 к белому — WCAG 1.4.11 */
  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Типографика ─────────────────────────────── */

h1, h2, h3 { line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 4.6vw, 54px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: 20px; }

.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 640px; }

.mono { font-family: var(--mono); }

/* Лейбл секции — скобочная система */
.tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--save);
  display: block;
  margin-bottom: 14px;
}
.tag::before { content: '[ '; color: var(--dim); }
.tag::after  { content: ' ]'; color: var(--dim); }

.tag-warn { color: var(--warn); }

/* ── Шапка ───────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-in {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo-words { line-height: 1.2; }
.logo-name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.logo-tag { font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: .3px; }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--save); }
.nav a.active { border-bottom-color: var(--save); }

.header-phone { text-align: right; line-height: 1.3; flex-shrink: 0; }
.header-phone a { font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; }
.header-phone span { display: block; font-size: 12px; color: var(--dim); }

.burger {
  display: none; background: none; border: 1px solid var(--rule); border-radius: var(--r-m);
  width: 44px; height: 44px; cursor: pointer; flex-shrink: 0;
  font-size: 20px; color: var(--ink);
}

/* ── Кнопки ──────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--r-m);
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: background .15s, transform .1s;
}
.btn-save { background: var(--save); color: #fff; }
.btn-save:hover { background: var(--save-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover { border-color: #fff; }
.btn .arr { font-family: var(--mono); }

/* ── Герой ───────────────────────────────────── */

.hero { background: var(--ink); color: #fff; padding: 72px 0 80px; }
.hero-grid {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center;
}
.hero .badge {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill);
  padding: 7px 16px; margin-bottom: 26px;
}
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--save-on-dark); }
.hero .lead { color: rgba(255,255,255,.78); margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-note { font-size: 14px; color: rgba(255,255,255,.55); }
.hero-note a { color: rgba(255,255,255,.8); }

/* Карточка мини-кейса в герое */
.hero-card {
  background: #fff; color: var(--ink); border-radius: var(--r-m);
  padding: 28px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.hero-card .hc-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 18px;
}
.hc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.hc-row:last-of-type { border-bottom: none; }
.hc-row .k { font-size: 14px; color: var(--dim); }
.hc-row .v { font-family: var(--mono); font-weight: 600; font-size: 17px; }
.hc-row .v.old { text-decoration: line-through; color: var(--dim); font-weight: 400; }
.hc-save {
  margin-top: 14px; background: var(--save); color: #fff; border-radius: var(--r-m);
  padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;
}
.hc-save .k { font-size: 13px; opacity: .85; }
.hc-save .v { font-family: var(--mono); font-weight: 700; font-size: 20px; }
.hero-card .hc-foot { font-size: 12px; color: var(--dim); margin-top: 14px; }

/* ── Полоса цифр ─────────────────────────────── */

.stats { background: var(--cream); border-bottom: 1px solid var(--rule); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 40px 28px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: none; }
.stat .n { font-family: var(--mono); font-size: clamp(30px, 3vw, 42px); font-weight: 700; }
.stat .n.green { color: var(--save); }
.stat .d { font-size: 14px; color: var(--dim); margin-top: 4px; }

/* ── Секции ──────────────────────────────────── */

.sec { padding: 88px 0; }
.sec-cream { background: var(--cream); }
.sec-ink { background: var(--ink); color: #fff; }
.sec-ink h2 { color: #fff; }
.sec-ink .lead { color: rgba(255,255,255,.75); }
.sec-head { max-width: 680px; margin-bottom: 52px; }
.sec-head h2 { margin-bottom: 16px; }

/* ── Карточки ────────────────────────────────── */

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-m);
  padding: 30px; display: block; text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
a.card:hover { border-color: var(--ink); box-shadow: 0 10px 30px rgba(20,46,80,.08); }
.card .c-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--save); margin-bottom: 12px;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--ink-soft); }
.card .c-more { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 15px; color: var(--save); }

.step .n {
  font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--save);
  margin-bottom: 14px;
}

/* ── Списки с галочками ──────────────────────── */

.checks { list-style: none; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.checks li::before {
  content: '✓'; font-family: var(--mono); font-weight: 700; color: var(--save);
  flex-shrink: 0; margin-top: 1px;
}
.checks-2col { grid-template-columns: 1fr 1fr; gap: 14px 32px; }

.crosses li::before { content: '—'; color: var(--warn); }

/* ── Блок лицензии ───────────────────────────── */

.license {
  border: 1.5px solid var(--rule); border-left: 4px solid var(--save);
  border-radius: var(--r-m); background: var(--white);
  padding: 28px 32px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.license .l-body { flex: 1; min-width: 260px; }
.license h3 { margin-bottom: 6px; }
.license p { font-size: 15px; color: var(--ink-soft); }
.license .l-num {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  background: var(--cream); border: 1px dashed var(--warn); border-radius: var(--r-m);
  padding: 12px 18px; color: var(--warn); white-space: nowrap;
}
.license a { color: var(--save); }

/* ── Кейсы ───────────────────────────────────── */

.case { border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; background: #fff; display: grid; grid-template-columns: 280px 1fr; margin-bottom: 20px; }
.case-side { background: var(--ink); color: #fff; padding: 28px; }
.case-side .cs-num { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.55); text-transform: uppercase; margin-bottom: 12px; }
.case-side h3 { color: #fff; margin-bottom: 4px; }
.case-side .cs-type { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.case-side .cs-fleet { font-family: var(--mono); font-size: 22px; font-weight: 700; }
.case-side .cs-fleet small { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.6); }
.case-main { padding: 28px 32px; }
.case-nums { display: flex; gap: 36px; flex-wrap: wrap; margin-bottom: 18px; }
.case-nums .cn .k { font-size: 13px; color: var(--dim); }
.case-nums .cn .v { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.case-nums .cn .v.old { text-decoration: line-through; color: var(--dim); font-weight: 400; }
.case-nums .cn.save { background: var(--save-tint); border-radius: var(--r-m); padding: 8px 16px; }
.case-nums .cn.save .v { color: var(--save); }
.case-nums .cn.save .pct { font-size: 13px; color: var(--save); font-family: var(--mono); }
.case-main p { font-size: 15px; color: var(--ink-soft); margin-top: 8px; }
.case-main p b { color: var(--ink); }

.case-total {
  background: var(--save); color: #fff; border-radius: var(--r-m); padding: 34px 38px;
  display: flex; gap: 40px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.case-total .ct-label { font-size: 15px; opacity: .85; max-width: 300px; }
.case-total .ct-num { font-family: var(--mono); font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
.case-total .ct-num small { display: block; font-size: 13px; font-weight: 400; opacity: .8; }

/* ── Формула ОСАГО / образовательный блок ────── */

.edu { border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.edu-formula {
  background: var(--ink); color: #fff; padding: 30px 34px;
  font-family: var(--mono); font-size: clamp(15px, 1.8vw, 19px); letter-spacing: 1px;
}
.edu-formula small { display: block; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.6); margin-top: 10px; letter-spacing: 0; }
.edu table { width: 100%; border-collapse: collapse; font-size: 15px; }
.edu th, .edu td { text-align: left; padding: 13px 20px; border-top: 1px solid var(--rule); }
.edu th { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); border-top: none; background: var(--cream); }
.edu td:first-child { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.edu-note { padding: 18px 20px; font-size: 14px; color: var(--ink-soft); background: var(--cream); border-top: 1px solid var(--rule); }

/* ── Партнёры ────────────────────────────────── */

.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.partner {
  border: 1px solid var(--rule); border-radius: var(--r-m); background: #fff;
  padding: 20px 14px; text-align: center; font-size: 15px; font-weight: 500; color: var(--ink-soft);
}
.partners-note { margin-top: 18px; font-size: 14px; color: var(--dim); }

/* ── Форма заявки ────────────────────────────── */

.cta-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.cta-left h2 { margin-bottom: 18px; }
.cta-left .lead { margin-bottom: 28px; }
.cta-phone { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--ink); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.sec-ink .cta-phone { color: #fff; }
.cta-msgrs { display: flex; gap: 12px; margin-top: 18px; }
.cta-msgrs a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r-m); padding: 10px 18px;
}
.cta-msgrs a:hover { border-color: var(--ink); }
.sec-ink .cta-msgrs a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-color: rgba(255,255,255,.3); }
.sec-ink .cta-msgrs a:hover { border-color: #fff; }

.form {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-m); padding: 34px;
  color: var(--ink);
}
.form h3, .form h2 { margin-bottom: 6px; font-size: 21px; }
.form .f-sub { font-size: 14px; color: var(--dim); margin-bottom: 24px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-field { display: flex; flex-direction: column; gap: 6px; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: 14px; font-weight: 600; }
.f-field label .req { color: var(--warn); }
.f-field input, .f-field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--r-m); padding: 12px 14px;
  background: var(--cream); width: 100%;
}
.f-field input:focus, .f-field textarea:focus { border-color: var(--save); background: #fff; }
.f-field textarea { min-height: 96px; resize: vertical; }
.form .btn { width: 100%; justify-content: center; margin-top: 20px; }
.f-legal { font-size: 12.5px; color: var(--dim); margin-top: 12px; }
.f-legal a { color: var(--dim); }
.f-ok { display: none; background: var(--save-tint); border: 1px solid var(--save); color: var(--save); border-radius: var(--r-m); padding: 14px 18px; font-weight: 600; margin-top: 16px; }

/* ── Хлебные крошки / герой внутренних ───────── */

.page-hero { background: var(--ink); color: #fff; padding: 48px 0 60px; }
.crumbs { font-size: 13.5px; color: rgba(255,255,255,.55); margin-bottom: 26px; }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero h1 { color: #fff; margin: 12px 0 18px; }
.page-hero .lead { color: rgba(255,255,255,.78); }
.page-hero .tag { color: var(--save-on-dark); }

/* ── Двухколоночные блоки услуг ──────────────── */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.duo h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 14px 0 16px; }
.duo .lead { font-size: 16px; margin-bottom: 24px; }

/* ── Контакты ────────────────────────────────── */

.contact-cards { display: grid; gap: 16px; }
.contact-card { border: 1px solid var(--rule); border-radius: var(--r-m); padding: 22px 26px; background: #fff; }
.contact-card .k { font-size: 13px; color: var(--dim); margin-bottom: 4px; }
.contact-card .v { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-card .v-sans { font-family: var(--sans); font-size: 16px; }
.contact-card .todo { color: var(--warn); border-bottom: 1px dashed var(--warn); }

/* ── Маркер ЗАПОЛНИТЬ ────────────────────────── */

.todo-mark {
  font-family: var(--mono); font-size: .9em; color: var(--warn);
  background: rgba(160,107,10,.08); border: 1px dashed var(--warn);
  border-radius: var(--r-s); padding: 1px 8px; white-space: nowrap;
}

/* ── FAQ ─────────────────────────────────────── */

.faq details { border: 1px solid var(--rule); border-radius: var(--r-m); background: #fff; margin-bottom: 12px; }
.faq summary {
  cursor: pointer; padding: 20px 26px; font-weight: 600; font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::after { content: '+'; font-family: var(--mono); font-size: 22px; color: var(--save); flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq .faq-body { padding: 0 26px 22px; font-size: 15.5px; color: var(--ink-soft); }

/* ── Подвал ──────────────────────────────────── */

.footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 64px 0 36px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
.footer .logo { color: #fff; margin-bottom: 18px; }
.footer .logo-tag { color: rgba(255,255,255,.5); }
.footer p { margin-bottom: 10px; line-height: 1.65; }
.footer .f-req { font-size: 13.5px; color: rgba(255,255,255,.55); }
.footer h4, .footer h3 { color: #fff; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--mono); font-weight: 600; margin-bottom: 16px; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .f-phone { font-family: var(--mono); font-size: 19px; font-weight: 700; color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.5); }

/* ── Адаптив ─────────────────────────────────── */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-card { max-width: 480px; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .partners { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 48px; }
  .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .header-phone { margin-left: 0; }
  .nav.open {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--rule);
    padding: 12px 24px 20px;
  }
  .nav.open a { padding: 12px 0; border-bottom: 1px solid var(--rule); min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .sec { padding: 60px 0; }
  .hero { padding: 48px 0 56px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--rule); }
  .stat:nth-child(even) { border-left: 1px solid var(--rule); }
  .stat:nth-child(-n+2) { border-top: none; }
  .cards-3 { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .checks-2col { grid-template-columns: 1fr; }
  .partners { grid-template-columns: 1fr 1fr; }
  .case { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .header-phone span { display: none; }
  .header-phone a { font-size: 14px; }
}

/* ═══════════════════════════════════════════════
   V2 — компоненты синтеза (герой-калькулятор,
   конфликт интересов, чек-лист, метрики, шаги)
   ═══════════════════════════════════════════════ */

body { background: var(--cream); }

/* тонкие линии и лёгкая типографика v2 */
:root { --hair: rgba(20,46,80,0.12); }

/* лейбл с линией слева, как в экспериментах */
.tag2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.tag2::before { content: ''; width: 20px; height: 1px; background: var(--hair); }
.tag2 .brk { color: var(--save); }

/* ── ГЕРОЙ V2 (светлый, с калькулятором) ── */
.hero2 { background: var(--cream); padding: 72px 0 72px; border-bottom: 1px solid var(--hair); }
.hero2-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.hero2 h1 { color: var(--ink); margin-bottom: 20px; }
.hero2 h1 .brk { font-family: var(--mono); color: var(--warn); font-weight: 400; letter-spacing: -2px; white-space: nowrap; }
.hero2 .lead { margin-bottom: 30px; }
.hero2-proof { display: flex; gap: 24px; padding-top: 24px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.proof-item { font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 7px; }
.proof-br { font-family: var(--mono); font-size: 11px; color: var(--save); letter-spacing: -1px; font-weight: 600; }

/* карточка-калькулятор */
.hcalc { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden; box-shadow: 0 2px 4px rgba(20,46,80,0.04), 0 16px 48px rgba(20,46,80,0.10); }
.hcalc-head { padding: 15px 22px; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; }
.hcalc-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.hcalc-live { font-size: 11px; font-weight: 500; color: var(--save); display: flex; align-items: center; gap: 5px; }
.hcalc-live::before { content: ''; width: 6px; height: 6px; background: var(--save); border-radius: 50%; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hcalc-body { padding: 20px 22px 22px; }
.hcalc-field { margin-bottom: 14px; }
.hcalc-field label { font-size: 12.5px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; }
.hcalc-field input { width: 100%; font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--cream); border: 1px solid var(--field-line); border-radius: var(--r-s); padding: 11px 14px; }
.hcalc-field input:focus { border-color: var(--ink); background: #fff; }
.hcalc-result { display: none; background: var(--save-tint); border: 1px solid rgba(27,107,69,0.18); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 14px; }
.hcalc-result .r-label { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--save); margin-bottom: 6px; }
.hcalc-result .r-range { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--save); letter-spacing: -1px; }
.hcalc-result .r-note { font-size: 11.5px; color: var(--save); opacity: .75; margin-top: 6px; line-height: 1.5; }
.hcalc-empty { background: var(--cream); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 14px; text-align: center; font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.hcalc .btn { width: 100%; justify-content: center; }
.hcalc-foot { font-size: 11.5px; color: var(--dim); text-align: center; margin-top: 10px; line-height: 1.5; }

/* ── ПОЛОСА МЕТРИК (тёмная) ── */
.metrics2 { background: var(--ink-deep); display: grid; grid-template-columns: repeat(4, 1fr); }
.metric2 { padding: 34px 36px; border-right: 1px solid rgba(255,255,255,0.06); }
.metric2:last-child { border-right: none; }
.metric2 .n { font-family: var(--mono); font-size: 36px; font-weight: 600; letter-spacing: -2px; line-height: 1; color: #fff; margin-bottom: 8px; }
.metric2 .n.gn { color: var(--save-on-dark); }
.metric2 .n.an { color: var(--warn-on-dark); }
.metric2 .n sup { font-size: 17px; vertical-align: top; margin-top: 5px; display: inline-block; }
.metric2 .l { font-size: 12.5px; color: rgba(255,255,255,0.50); line-height: 1.55; max-width: 180px; }
.metric2 .src { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; color: rgba(255,255,255,0.50); margin-top: 5px; }

/* ── БЛОК КОНФЛИКТА ИНТЕРЕСОВ ── */
.problem-wrap { background: var(--ink); color: #fff; }
.problem-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.problem-wrap h2 { color: #fff; }
.problem-wrap .tag2 { color: var(--warn-on-dark); }
.problem-wrap .tag2::before { background: rgba(255,255,255,0.2); }
.problem-facts { font-family: var(--mono); font-size: 15px; line-height: 2.1; color: rgba(255,255,255,0.55); margin: 22px 0 26px; }
.problem-facts b { color: var(--warn-on-dark); font-weight: 600; }
.problem-text { font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.75; margin-bottom: 14px; }
.problem-text strong { color: #fff; }
.problem-note { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.7; }

/* чек-лист самодиагностики */
.chk { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-m); overflow: hidden; }
.chk-head { padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.chk-head .t { font-size: 16px; font-weight: 600; color: #fff; }
.chk-head .s { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.chk-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: background .15s; }
.chk-item:hover { background: rgba(255,255,255,0.04); }
.chk-box { width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--r-s); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: transparent; transition: all .15s; margin-top: 1px; }
.chk-item.on .chk-box { background: var(--warn-on-dark); border-color: var(--warn-on-dark); color: var(--ink); }
.chk-item .txt { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.55; }
.chk-item.on .txt { color: #fff; }
.chk-verdict { padding: 18px 24px; background: rgba(0,0,0,0.25); }
.chk-verdict .v-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.chk-verdict .v-text { font-size: 14px; color: #fff; line-height: 1.6; min-height: 44px; }
.chk-verdict .v-text .score { font-family: var(--mono); color: var(--warn-on-dark); font-weight: 600; }

/* ── ЦЕЛИ (4 карточки) ── */
.goal-card { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 26px 22px; position: relative; overflow: hidden; transition: all .18s; }
.goal-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--save); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.goal-card:hover::after { transform: scaleX(1); }
.goal-card:hover { box-shadow: 0 4px 20px rgba(20,46,80,0.09); transform: translateY(-2px); }
.goal-card .gn { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-bottom: 12px; }
.goal-card .gt { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.5; }

/* ── ШАГИ С ТАЙМИНГАМИ ── */
.step2 { display: grid; grid-template-columns: 52px 1fr; gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--hair); }
.step2:last-child { border-bottom: none; }
.step2-circ { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); background: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--save); transition: all .18s; }
.step2-circ svg { display: block; }
.step2:hover .step2-circ { background: var(--ink); color: #fff; border-color: var(--ink); }
.step2 h3 { font-size: 17px; margin-bottom: 5px; }
.step2 .time { font-family: var(--mono); font-size: 11px; color: var(--warn); letter-spacing: .4px; margin-bottom: 7px; }
.step2 p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

/* ── КЕЙСЫ V2 (анонимные карточки) ── */
.case2 { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden; transition: all .2s; }
.case2:hover { box-shadow: 0 6px 28px rgba(20,46,80,0.1); transform: translateY(-3px); }
.case2-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--hair); }
.case2-ind { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.case2-co { font-size: 16px; font-weight: 600; color: var(--ink); }
.case2-fleet { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.case2-body { padding: 14px 22px 18px; }
.case2-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.case2-row:last-of-type { border-bottom: none; }
.case2-row .l { color: var(--dim); }
.case2-row .v { font-family: var(--mono); font-weight: 500; }
.case2-row .v.old { text-decoration: line-through; color: var(--dim); font-weight: 400; }
.case2-save { margin-top: 12px; background: var(--save-tint); border: 1px solid rgba(27,107,69,0.15); border-radius: var(--r-m); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; }
.case2-save .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px; color: var(--save); }
.case2-save .v { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--save); letter-spacing: -.5px; }
.case2-sol { padding: 12px 22px 18px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.case2-sol b { color: var(--ink); }

/* ── ПОЯВЛЕНИЕ ── */
.fu { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.fu.vis { opacity: 1; transform: translateY(0); }

/* ── АДАПТИВ V2 ── */
@media (max-width: 1024px) {
  .hero2-grid { grid-template-columns: 1fr; gap: 40px; }
  .hcalc { max-width: 520px; }
  .problem-grid { grid-template-columns: 1fr; gap: 44px; }
  .metrics2 { grid-template-columns: 1fr 1fr; }
  .metric2 { border-bottom: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 720px) {
  .hero2 { padding: 48px 0 56px; }
  .metrics2 { grid-template-columns: 1fr 1fr; }
  .metric2 { padding: 24px 22px; }
  .metric2 .n { font-size: 28px; }
}

/* фикс сетки процесса на главной */
@media (max-width: 1024px) {
  #process-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ═══ V2.1 — фиксы вёрстки по баг-ханту ═══ */

/* Шапка: запрет переносов, бургер раньше */
.nav a { white-space: nowrap; }
.nav { gap: 20px; }
.nav a { font-size: 14.5px; }
.header-in { flex-wrap: nowrap; }
@media (max-width: 1280px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .nav.open {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--rule);
    padding: 12px 24px 20px;
  }
  .nav.open a { padding: 12px 0; border-bottom: 1px solid var(--rule); white-space: normal; min-height: 44px; display: flex; align-items: center; }
}
/* Мобильная шапка: убираем переполнение (была ширина 515px на 390px экране) */
@media (max-width: 720px) {
  .header-in { gap: 10px; }
  .logo-tag { display: none; }
  .logo-name { font-size: 15px; }
  .logo svg { width: 24px; height: 19px; }
  .header-phone a { font-size: 12.5px; }
}
@media (max-width: 400px) {
  .header-phone { display: none; }
}

/* Плашка экономии в кейсах: значение переносилось на 2 строки на всех ширинах */
.case2-save { flex-direction: column; align-items: flex-start; gap: 5px; }
.case2-save .l { white-space: nowrap; }
.case2-save .v { font-size: 18px; white-space: nowrap; }

/* Плашка экономии в кейсах v1 (страница keysy) */
.case-nums { gap: 20px 28px; }
.case-nums .cn.save .v { white-space: nowrap; }

/* Якоря не прячутся под липкой шапкой */
section[id], div[id] { scroll-margin-top: 84px; }

/* Таблицы не разрывают мобильную вёрстку */
.edu { overflow-x: auto; }
.edu table { min-width: 560px; }

/* Мелкие поправки */
.hero2 h1 { overflow-wrap: anywhere; }
.partners { gap: 12px; }
.partner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══ V2.2 — светлый блок проблемы, фото, лого ═══ */

/* Лого: текстовые скобки вместо SVG (SVG стоял криво) */
.logo-br { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -6px; color: var(--ink); line-height: 1; padding-right: 8px; flex-shrink: 0; }
.footer .logo-br { color: #fff; }
@media (max-width: 720px) { .logo-br { font-size: 21px; } }

/* Блок «неудобный вопрос» — светлый (тёмно-синий утомлял) */
.problem-wrap { background: var(--white); color: var(--ink); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.problem-wrap h2 { color: var(--ink); }
.problem-wrap .tag2 { color: var(--warn); }
.problem-wrap .tag2::before { background: var(--hair); }
.problem-facts { color: var(--ink-soft); }
.problem-facts b { color: var(--warn); background: rgba(160,107,10,0.08); padding: 1px 7px; border-radius: var(--r-s); }
.problem-text { color: var(--ink-soft); }
.problem-text strong { color: var(--ink); }
.problem-note { color: var(--dim); }
.chk { background: var(--cream); border: 1px solid var(--hair); }
.chk-head { border-bottom: 1px solid var(--hair); }
.chk-head .t { color: var(--ink); }
.chk-head .s { color: var(--dim); }
.chk-item { border-bottom: 1px solid var(--hair); }
.chk-item:hover { background: rgba(20,46,80,0.03); }
.chk-box { border-color: rgba(20,46,80,0.3); }
.chk-item.on .chk-box { background: var(--warn); border-color: var(--warn); color: #fff; }
.chk-item .txt { color: var(--ink-soft); }
.chk-item.on .txt { color: var(--ink); font-weight: 500; }
.chk-verdict { background: var(--white); border-top: 1px solid var(--hair); }
.chk-verdict .v-label { color: var(--dim); }
.chk-verdict .v-text { color: var(--ink); }
.chk-verdict .v-text .score { color: var(--warn); }

/* Фото-карточки направлений */
.dir-card { display: block; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden; text-decoration: none; color: var(--ink); transition: all .18s; }
.dir-card:hover { box-shadow: 0 8px 30px rgba(20,46,80,0.11); transform: translateY(-3px); }
.dir-card img { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--cream); }
.dir-body { padding: 20px 22px 22px; }
.dir-body .c-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--save); margin-bottom: 8px; }
.dir-body h3 { margin-bottom: 8px; }
.dir-body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.dir-body .c-more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 14.5px; color: var(--save); }

/* Пометка фото-заглушки */
.ph-mark { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--warn); background: rgba(160,107,10,0.08); border: 1px dashed var(--warn); border-radius: var(--r-s); padding: 3px 9px; margin-top: 10px; }

/* Блок «ваш брокер» */
.broker-card { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 36px 40px; }
.broker-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-m); background: var(--cream); display: block; }
.broker-card h3 { font-size: 22px; margin-bottom: 4px; }
.broker-role { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.broker-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 10px; }
.broker-contacts { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 720px) { .broker-card { grid-template-columns: 1fr; padding: 24px; } .broker-photo { max-width: 260px; } }

/* Фото в герое внутренних страниц */
.page-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.page-hero-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r-m); display: block; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; gap: 28px; } .page-hero-img { height: 200px; } }

/* ═══ V2.3 — образцы отчётов (документы) ═══ */

.reports-wrap { background: var(--cream); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.report-col { display: flex; flex-direction: column; gap: 14px; }
.report-cap { font-size: 14px; color: var(--ink-soft); line-height: 1.6; padding: 0 6px; }
.report-cap b { color: var(--ink); }

/* лист документа */
.doc { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-s); box-shadow: 0 2px 6px rgba(20,46,80,0.05), 0 18px 44px rgba(20,46,80,0.12); padding: 26px 28px 22px; position: relative; font-size: 12.5px; line-height: 1.5; }
.doc-badge { position: absolute; top: 14px; right: -9px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: var(--warn); padding: 4px 12px; border-radius: var(--r-s) 0 0 var(--r-s); box-shadow: 0 2px 8px rgba(160,107,10,0.35); }
.doc-letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); margin-bottom: 14px; }
.doc-brand { display: flex; align-items: center; gap: 8px; }
.doc-mark { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--save); line-height: 1; letter-spacing: -4px; }
.doc-brand-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.doc-brand-sub { font-family: var(--mono); font-size: 7px; color: var(--warn); letter-spacing: .6px; text-transform: uppercase; margin-top: 2px; }
.doc-org { text-align: right; font-size: 8px; line-height: 1.55; color: #666; }
.doc-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.doc-sub { font-family: var(--mono); font-size: 9.5px; color: var(--dim); letter-spacing: .5px; margin-bottom: 14px; }
.doc-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.doc-kv .cell { background: var(--cream); border-radius: var(--r-s); padding: 9px 10px; }
.doc-kv .k { font-size: 8.5px; color: var(--dim); margin-bottom: 2px; line-height: 1.3; }
.doc-kv .v { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.doc-kv .v.g { color: var(--save); }
.doc-kv .v.a { color: var(--warn); }
.doc-sec { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.doc-sec::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.doc-find { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.doc-find:last-of-type { border-bottom: none; }
.doc-find .t { color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.doc-find .t b { color: var(--ink); font-weight: 600; }
.doc-find .m { font-family: var(--mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.doc-find .m.g { color: var(--save); }
.doc-find .m.a { color: var(--warn); }
.doc-total { margin-top: 12px; background: var(--save-tint); border: 1px solid rgba(27,107,69,0.18); border-radius: var(--r-s); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.doc-total .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .5px; color: var(--save); text-transform: uppercase; }
.doc-total .v { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--save); white-space: nowrap; }
.doc table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.doc table th { font-family: var(--mono); font-size: 8px; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); text-align: left; padding: 6px 8px; background: var(--cream); border-bottom: 1px solid var(--hair); white-space: nowrap; }
.doc table td { padding: 7px 8px; border-bottom: 1px solid var(--hair); color: var(--ink-soft); }
.doc table td.num { font-family: var(--mono); font-weight: 600; color: var(--ink); white-space: nowrap; }
.doc table tr.best td { background: var(--save-tint); color: var(--ink); }
.doc table tr.best td:first-child { border-left: 2px solid var(--save); }
.doc table tr.best td.num { color: var(--save); }
.doc-pill { display: inline-block; font-family: var(--mono); font-size: 7.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--save); background: rgba(27,107,69,0.1); border-radius: var(--r-m); padding: 2px 7px; margin-left: 6px; vertical-align: 1px; }
.doc-note { margin-top: 12px; background: var(--cream); border-radius: var(--r-s); padding: 9px 12px; font-size: 10px; color: var(--ink-soft); line-height: 1.55; }
.doc-note b { color: var(--ink); }
.doc-foot { margin-top: 14px; padding-top: 9px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; color: var(--dim); gap: 10px; flex-wrap: wrap; }

@media (max-width: 1024px) { .reports-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .doc { padding: 18px 16px 16px; }
  .doc-kv { grid-template-columns: 1fr 1fr; }
  .doc-org { display: none; }
  .doc { overflow-x: visible; }
}

/* фикс: таблица тендера не распирает мобильную вёрстку */
.reports-grid > * { min-width: 0; }
.doc { overflow-x: visible; }
.doc table { min-width: 430px; }

/* мобильные фиксы v3 */
@media (max-width: 480px) {
  .case2-save .l, .case2-save .v { white-space: normal; }
  .case2-save .v { font-size: 16px; }
  .case2-row .l { max-width: 55%; }
}

/* ═══ V3.1 — пропорции отчётов и фотопаузы ═══ */

/* Листы отчётов: не растягиваем на всю колонку — держим формат «документа» */
.reports-grid { grid-template-columns: repeat(2, minmax(0, 580px)); justify-content: center; gap: 36px; }
.doc { max-width: 580px; }
/* Бейдж выступает над листом, не перекрывая реквизиты */
.doc-badge { top: -11px; right: 18px; border-radius: var(--r-s); box-shadow: 0 3px 10px rgba(160,107,10,0.3); }
.doc-letterhead { padding-top: 4px; }
/* Реквизитная колонка не прячется под бейджем */
.doc-org { padding-top: 2px; }
/* Табличный док: чуть плотнее строки, чтобы оба листа были ближе по высоте */
.doc table td { padding: 9px 8px; }
.doc-note { margin-top: 14px; }

/* Фотопауза: выше, мягкий градиент вместо равномерного затемнения */
.photo-band { position: relative; overflow: hidden; }
.photo-band img { width: 100%; height: 420px; object-fit: cover; object-position: center; display: block; }
.photo-band .pb-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,34,56,.82) 0%, rgba(14,34,56,.55) 45%, rgba(14,34,56,.15) 100%); }
.photo-band .pb-in { position: absolute; inset: 0; display: flex; align-items: center; }
@media (max-width: 720px) { .photo-band img { height: 320px; } }

/* бейдж внутрь листа (при overflow срезался) */
.doc-badge { top: 12px; right: 12px; border-radius: var(--r-s); }
.doc-org { padding-top: 26px; }

/* ═══ V3.2 — пропорции, ритм, воздух, анимации ═══ */

/* Лого: дескриптор соразмерен названию */
.logo-br { font-size: 22px; letter-spacing: -5px; padding-right: 6px; }
.logo-name { font-size: 17px; letter-spacing: -0.2px; }
.logo-tag { font-size: 8.5px; letter-spacing: 0.4px; color: var(--dim); }

/* Ритм: меньше пустых разрывов между секциями */
.sec { padding: 64px 0; }
.sec-head { margin-bottom: 36px; }
.hero2 { padding: 56px 0 60px; }
.stats .stat { padding: 32px 26px; }
.metric2 { padding: 28px 32px; }

/* Лёгкая типографика — воздух внутри, а не между блоками */
.lead { font-weight: 300; }
.hero2 .lead, .problem-text { font-weight: 300; }
.problem-text strong { font-weight: 600; }

/* Блок «неудобный вопрос»: сбалансированные колонки */
.problem-grid { gap: 52px; align-items: center; }
.problem-facts { font-size: 14px; line-height: 2; margin: 18px 0 20px; }
.chk { box-shadow: 0 8px 30px rgba(20,46,80,0.06); }
.chk-item { padding: 13px 22px; }
.chk-head { padding: 16px 22px; }

/* Отчёты: равная высота листов */
.report-col { height: 100%; }
.reports-grid { align-items: stretch; }
.report-col .doc { display: flex; flex-direction: column; flex: 1; }
.doc-foot { margin-top: auto; padding-top: 12px; }
.doc-total { margin-top: auto; }
.doc .doc-total { margin-top: 14px; }

/* Партнёры: живой ховер */
.partner { transition: all .16s; }
.partner:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(20,46,80,0.08); }

/* Кнопки: лёгкий подъём */
.btn { transition: all .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-save:hover { box-shadow: 0 6px 18px rgba(27,107,69,0.28); }

/* Ступенчатое появление карточек в сетках */
.cards-3 > .fu:nth-child(2), .cards-4 > .fu:nth-child(2) { transition-delay: .08s; }
.cards-3 > .fu:nth-child(3), .cards-4 > .fu:nth-child(3) { transition-delay: .16s; }
.cards-4 > .fu:nth-child(4) { transition-delay: .24s; }

/* Иконка направления */
.dir-ico { width: 26px; height: 26px; margin-bottom: 10px; display: block; color: var(--save); }

@media (prefers-reduced-motion: reduce) {
  .fu { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══ V3.3 — лого, типографическая шкала ═══ */

/* Скобки лого крупнее и по центру строки названия */
.logo-br { font-size: 30px; letter-spacing: -7px; padding-right: 10px; position: relative; top: -1px; }
@media (max-width: 720px) { .logo-br { font-size: 24px; letter-spacing: -6px; } }

/* Типографический аудит: единая шкала и межстрочные */
h1 { line-height: 1.12; }
h2 { line-height: 1.18; margin-bottom: 0; }
h3 { line-height: 1.3; }
.lead { line-height: 1.7; }
.card p, .dir-body p, .case2-sol, .goal-card .gt { line-height: 1.62; }
.checks li { line-height: 1.55; }
.faq .faq-body { line-height: 1.75; }
.footer { line-height: 1.65; }
/* единые размеры вторичного текста: 15px, подписи 13px */
.card p, .dir-body p { font-size: 15px; }
.case2-sol { font-size: 13.5px; }
.case2-fleet, .case2-ind { letter-spacing: .8px; }
.hero2-proof { margin-top: 4px; }

/* ═══ V3.4 — выравнивание кейсов и отчётов ═══ */

/* Три карточки кейсов: одинаковая высота, «экономия» и «Боль/Решение» на одной линии */
.cards-3 { align-items: stretch; }
.cards-3 > .case2 { display: flex; flex-direction: column; }
.case2-head { min-height: 128px; display: flex; flex-direction: column; }
.case2-head .case2-fleet { margin-top: auto; }
.case2-body { display: flex; flex-direction: column; flex: 1 0 auto; }
.case2-save { margin-top: 14px; }
.case2-sol { margin-top: 0; }

/* Два отчёта: строго равная высота, подвалы на одной линии */
.reports-grid { align-items: stretch; }
.report-col { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.report-col .doc { flex: 1; display: flex; flex-direction: column; overflow: visible; }
.report-col .report-cap { margin-top: 0; }
.doc-total { margin-top: 16px; }
.doc-foot { margin-top: auto; }

/* «риск» и прочие маркеры: пилюля, выровненная по верху строки */
.doc-find { align-items: flex-start; }
.doc-find .t { padding-right: 4px; }
.doc-find .m.a {
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--warn); background: rgba(160,107,10,0.1);
  border-radius: var(--r-s); padding: 3px 8px; margin-top: 1px; white-space: nowrap;
}

/* Секция «Не обещания — документы»: компактнее, чтобы помещалась */
.reports-wrap { padding: 56px 0; }
.reports-wrap .sec-head { margin-bottom: 28px; }
.reports-wrap .sec-head .lead { max-width: 620px; }
.doc { padding: 22px 24px 18px; }
.doc-kv { margin-bottom: 12px; }
.doc-find { padding: 6px 0; }

/* ═══ V3.5 — жёсткая шапка кейса ═══ */
.case2-head { height: 118px; min-height: 0; justify-content: flex-start; }
.case2-co { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case2-fleet { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══ V3.6 — зелёный бокс прибит к низу body ═══ */
.case2-body { min-height: 118px; }
.case2-body .case2-save { margin-top: auto; }
.case2-row .l { max-width: 62%; }

/* ═══ V3.7 — фиксированная высота строк было/стало ═══ */
.case2-row { min-height: 34px; box-sizing: border-box; align-items: center; }
.case2-row .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.case2-body { min-height: 0; }
.case2-body .case2-save { margin-top: 14px; }

/* ═══ V3.8 — карточки в ряду появляются синхронно (не ступенчато) ═══ */
.cards-3 > .fu, .cards-4 > .fu,
.cards-3 > .fu:nth-child(2), .cards-3 > .fu:nth-child(3),
.cards-4 > .fu:nth-child(2), .cards-4 > .fu:nth-child(3), .cards-4 > .fu:nth-child(4) {
  transition-delay: 0s !important;
}

/* фикс: таблица тендера скроллится внутри листа, не рвёт страницу */
.report-col .doc { overflow-x: auto; overflow-y: visible; }

/* ═══ V5 — Манифест бренда (смыслы из brand kit) ═══ */
.manifesto { background: var(--ink); color: #fff; position: relative; overflow: hidden; padding: 72px 0; }
.manifesto::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px; }
.manifesto .wrap { position: relative; z-index: 1; }
.manifesto-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.52); margin-bottom: 26px; }
.manifesto-lead { font-size: clamp(24px, 3vw, 36px); font-weight: 300; line-height: 1.35; color: rgba(255,255,255,.72); max-width: 720px; margin-bottom: 8px; }
.manifesto-lead b { font-weight: 600; color: #fff; }
.manifesto-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-m); overflow: hidden; margin: 40px 0 28px; }
.manifesto-promise .p { background: rgba(255,255,255,.02); padding: 26px 28px; }
.manifesto-promise .p-n { font-family: var(--mono); font-size: 11px; color: var(--save-on-dark); margin-bottom: 10px; }
.manifesto-promise .p-t { font-size: 19px; font-weight: 600; color: #fff; }
.manifesto-coda { font-family: var(--mono); font-size: 13px; line-height: 2.1; color: rgba(255,255,255,.52); }
.manifesto-coda b { color: rgba(255,255,255,.7); font-weight: 400; }
@media (max-width: 720px) { .manifesto-promise { grid-template-columns: 1fr; } .manifesto { padding: 52px 0; } }

/* ═══ V6 — отчёты: развязка листов и подписей через grid ═══ */
/* Проблема: report-col равнял (лист+подпись) целиком → лист с длинной подписью короче.
   Решение: листы в ряду 1 (растягиваются в равные), подписи в ряду 2 (независимы). */
.reports-grid { grid-template-columns: repeat(2, minmax(0, 580px)); grid-template-rows: 1fr auto; grid-auto-flow: column; justify-content: center; gap: 12px 36px; align-items: stretch; }
.report-col { display: contents; }
.report-col .doc { grid-row: 1; align-self: stretch; height: auto; flex: none; display: flex; flex-direction: column; overflow: hidden; max-width: 580px; }
.report-col .report-cap { grid-row: 2; margin: 0; }
.doc-foot { margin-top: auto; }
/* таблица тендера скроллится внутри листа, лист остаётся равной высоты */
.doc table { display: block; overflow-x: auto; white-space: nowrap; }
.doc table tbody, .doc table thead, .doc table tr { white-space: normal; }
@media (max-width: 1024px) {
  .reports-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .report-col .doc, .report-col .report-cap { grid-row: auto; }
}

/* ═══ V6 — кейсы: ровный межстрочный в заголовке ═══ */
.case2-co { line-height: 1.22; margin-bottom: 6px; }
.case2-fleet { line-height: 1.4; }
.case2-head { padding-bottom: 16px; }

/* фикс: инлайновые 2-колоночные сетки сворачиваются на мобильном */
@media (max-width: 720px) {
  .cards-3[style*="1fr 1fr"], .cards-3[style*="minmax"] { grid-template-columns: 1fr !important; }
  .doc table { font-size: 10px; }
}

/* ═══ V7 — реальные КП (изображения) ═══ */
.kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.kp-card { margin: 0; }
.kp-card > a { display: block; border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden; box-shadow: 0 2px 6px rgba(20,46,80,0.05), 0 18px 44px rgba(20,46,80,0.12); transition: transform .18s, box-shadow .18s; background: #fff; }
.kp-card > a:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(20,46,80,0.18); }
.kp-card img { width: 100%; height: auto; display: block; }
.kp-card figcaption { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.kp-card figcaption b { color: var(--ink); }
@media (max-width: 860px) { .kp-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ═══════════════════════════════════════════════════════════
   V8 — МОБИЛЬНЫЙ СЛОЙ
   Принцип: на телефоне ЛПР читает между делами — одна колонка,
   палец 44px, никаких горизонтальных сюрпризов, звонок всегда под рукой.
   ═══════════════════════════════════════════════════════════ */

/* ── 8.1 База ───────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video, table { max-width: 100%; }

/* Длинные термины («специализирующийся», «конфиденциальности») ломали сетку */
h1, h2, h3, .lead, .case2-co, .kp-card figcaption, p, li, td, th {
  overflow-wrap: break-word;
}
/* Переносы — только на узком экране и только там, где слово физически
   не влезает. На десктопе h1 рвался как «перепла-чиваете». */
h1, h2 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 480px) {
  h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}

/* Грид-колонки не должны раздуваться под min-content
   (иначе слово «специализирующийся» задаёт ширину странице) */
.page-hero-grid > *, .hero2-grid > *, .cards-3 > *, .cards-4 > *,
.duo > *, .cta-grid > *, .problem-grid > *, .footer-grid > *,
.kp-grid > *, .manifesto-promise > *, .metrics2 > *, .stats-grid > * {
  min-width: 0;
}

/* ── 8.2 Планшет: 3 колонки кейсов рвут числа раньше 720 ── */
@media (max-width: 940px) {
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .case2-save .v { font-size: 17px; }
}
@media (max-width: 860px) {
  .cards-3 { grid-template-columns: 1fr; }
}

/* ── 8.3 Телефон: ≤720px ────────────────────── */
@media (max-width: 720px) {

  /* Ритм: секции короче, воздух сохраняем */
  .sec { padding: 52px 0; }
  .wrap { padding: 0 20px; }
  h1 { font-size: 30px; line-height: 1.18; }
  h2 { font-size: 24px; line-height: 1.2; }
  h3 { font-size: 18px; }
  .lead { font-size: 16.5px; }

  /* Мелкий моно-текст: 9–11px нечитаем с руки */
  .tag, .tag2, .c-tag, .page-tag, .manifesto-tag, .v-label,
  .case2-ind, .cs-num, .hcalc-label, .estimate-title, .src,
  .field-required, .field-hint, .ph-mark {
    font-size: 11.5px !important;
    letter-spacing: 1.2px;
  }
  .src, .ph-mark { letter-spacing: .4px; }
  .case2-save .l { font-size: 11.5px; }
  .case2-save .v { font-size: 19px; }
  .hcalc-foot, .kp-card figcaption { font-size: 14px; }

  /* Поля: <16px = iOS зумит страницу при фокусе */
  input, select, textarea { font-size: 16px !important; }
  input[type=text], input[type=tel], input[type=email],
  input[type=number], select { min-height: 48px; }
  .f-grid label, .field-label { font-size: 14px; }

  /* Кнопки: палец, а не курсор. В блоке действий — в столбик на всю ширину */
  .btn, .btn-2, .btn-ghost, .btn-save, .submit-btn {
    min-height: 50px; width: 100%; justify-content: center; text-align: center;
  }
  .cta-msgrs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cta-msgrs .btn { width: 100%; }
  .hero2-cta .btn, .sec p > .btn { width: 100%; }
  .btn .arr { margin-left: 8px; }

  /* Тач-цели */
  .logo { min-height: 44px; }
  .nav-back, .footer a, .crumbs a { display: inline-block; padding: 6px 0; }
  a { -webkit-tap-highlight-color: rgba(20,46,80,.08); }

  /* Шапка компактнее, меню тянется от самой шапки */
  .header-in { height: 62px; }
  .nav.open { top: 62px; max-height: calc(100vh - 62px); overflow-y: auto; padding: 8px 20px 16px; }
  .nav.open a { padding: 14px 0; font-size: 16px; min-height: 44px; display: flex; align-items: center; }

  /* Фотополоса не съедает экран */
  .photo-band img { height: 240px; }
  .page-hero-img { height: 180px; }
  .broker-photo { max-width: 100%; }

  /* Метрики на тёмном: 2 колонки, но с воздухом */
  .metrics2 { grid-template-columns: 1fr 1fr; }
  .metric2 { padding: 22px 18px; }
  .metric2 .n { font-size: 26px; }
  /* сноска про источник цифры была почти не видна на тёмном */
  .metric2 .src { font-size: 10.5px; color: rgba(255,255,255,0.50); }
  .metric2 .l { font-size: 13.5px; }

  /* три доказательства в герое — в столбик, а не рваной строкой */
  .hero2-proof { flex-direction: column; gap: 10px; }
  .proof-item { font-size: 14px; }

  /* Манифест */
  .manifesto-lead { font-size: 21px; }
  .manifesto-coda { font-size: 12px; line-height: 1.95; }

  /* FAQ: заголовок и плюс не слипаются */
  .faq-q { padding-right: 40px; min-height: 52px; }

  /* Формы */
  .f-grid { grid-template-columns: 1fr; }
  .f-ok { font-size: 14px; }
}

/* ── 8.4 Узкий телефон: ≤400px ──────────────── */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 22px; }
  .sec { padding: 44px 0; }
  .case2-save .v { font-size: 17px; }
  .cta-msgrs { grid-template-columns: 1fr; }
}
@media (max-width: 344px) {
  .metrics2 { grid-template-columns: 1fr; }
}

/* ── 8.5 Таблица коэффициентов ОСАГО: помещается, а не скроллится ──
   Было: .edu{overflow-x:auto} + table{min-width:560px} — вбок уезжал
   весь блок вместе с формулой. Стало: таблица переносится по словам. */
@media (max-width: 900px) {
  .edu { overflow: hidden; overflow-x: visible; }
  .edu table { min-width: 0; font-size: 13.5px; table-layout: fixed; }
  .edu th, .edu td { padding: 10px 12px; }
  .edu th:first-child, .edu td:first-child { width: 76px; }
  /* «Коэффициент» в 76px рвётся посреди слова — на мобильном сокращаем */
  .edu th:first-child { font-size: 0; letter-spacing: 0; }
  .edu th:first-child::before { content: 'Коэф.'; font-size: 10.5px; letter-spacing: .4px; }
  .edu td:first-child { white-space: nowrap; }
  /* «расшифровка» короче «что учитывает» — отдаём третьей колонке больше */
  .edu th:nth-child(2), .edu td:nth-child(2) { width: 40%; }
  .edu td { hyphens: auto; -webkit-hyphens: auto; }
  .edu-formula { font-size: 13px; word-break: break-word; }
  .edu-formula small { font-size: 12px; }
}
@media (max-width: 420px) {
  .edu table { font-size: 12.5px; }
  .edu th, .edu td { padding: 9px 8px; }
  .edu th:first-child, .edu td:first-child { width: 70px; }
}

/* ── 8.6 Реальные КП: A4 в 340px нечитаем ───── */
@media (max-width: 720px) {
  .kp-grid { gap: 32px; }
  .kp-card > a {
    position: relative; display: block; max-height: 340px; overflow: hidden;
  }
  .kp-card > a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);
    pointer-events: none;
  }
  .kp-card > a::before {
    content: '[ открыть КП целиком ]';
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 2; font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--ink); background: #fff; border: 1px solid var(--ink);
    padding: 9px 14px; border-radius: var(--r-s); white-space: nowrap;
  }
  .kp-card figcaption { margin-top: 12px; }
}

/* ── 8.7 Липкая нижняя панель действий (только телефон) ── */
.mbar { display: none; }
@media (max-width: 720px) {
  .mbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 24px rgba(20,46,80,.08);
    transform: translateY(105%); transition: transform .25s ease;
  }
  .mbar.show { transform: translateY(0); }
  .mbar a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 48px; border-radius: var(--r-m); text-decoration: none;
    font-size: 15px; font-weight: 600; font-family: var(--sans);
  }
  .mbar .mbar-call { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
  .mbar .mbar-lead { background: var(--save); color: #fff; }
  .mbar svg { flex-shrink: 0; }
  /* чтобы панель не накрывала подвал */
  body.has-mbar .footer { padding-bottom: 92px; }
}

/* ── 8.8 Тач-устройства: hover-эффекты не залипают ── */
@media (hover: none) {
  .kp-card > a:hover, .card:hover, .case2:hover, .dir-card:hover, .doc:hover {
    transform: none; box-shadow: inherit;
  }
  .btn:hover, .btn-ghost:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   V9 — ПЛОТНОСТЬ ГЛАВНОЙ
   Главная была 11 экранов на десктопе и 19 на телефоне.
   Правки ниже режут воздух там, где он не несёт смысла.
   ═══════════════════════════════════════════════════════════ */

/* ── 9.1 Партнёры: компактная лента вместо полноценной секции ── */
.partners-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 18px; }
.partners-head h3 { font-size: 20px; margin: 0; }
.partners-head p { font-size: 14.5px; color: var(--dim); margin: 0; }
.sec-partners .partners-note { margin-top: 14px; font-size: 13px; }
@media (max-width: 720px) {
  .partners-head { gap: 6px; margin-bottom: 14px; }
  .partners-head h3 { font-size: 18px; }
  .partners-head p { font-size: 13.5px; }
  /* 16 плашек в один столбик — почти тысяча пикселей ни о чём */
  .partners { grid-template-columns: 1fr 1fr; gap: 8px; }
  .partner { font-size: 12.5px; padding: 10px 8px; text-align: center; }
}

/* ── 9.2 Направления: на телефоне фото не несёт информации ── */
@media (max-width: 720px) {
  .dir-card img { height: 120px; }
}
@media (max-width: 480px) {
  .dir-card img { display: none; }
  .dir-card .ph-mark { display: none; }
}

/* ── 9.3 Подвал: на телефоне занимал 1210px — больше любой секции ── */
@media (max-width: 720px) {
  .footer { padding: 44px 0 28px; font-size: 14.5px; }
  .footer-grid { gap: 26px; margin-bottom: 28px; }
  .footer h4, .footer h3 { font-size: 12.5px; margin-bottom: 10px; }
  .footer ul { gap: 4px; grid-template-columns: 1fr 1fr; }
  .footer ul li { font-size: 14px; }
  .footer p { margin-bottom: 7px; }
  .footer .f-req { font-size: 12.5px; }
  .nav-back, .footer a { padding: 4px 0; }
}

/* ── 9.4 Секции: шаг вниз по вертикальному ритму ── */
@media (max-width: 720px) {
  .sec { padding: 44px 0; }
  .sec-head { margin-bottom: 22px; }
}
@media (max-width: 480px) {
  .sec { padding: 38px 0; }
}

/* ── 9.5 КП: сворачивание на всех ширинах, не только на телефоне ──
   КП — документ на А4, в ленте он всегда выше своей полезности.
   Показываем шапку и первый экран, дальше — по клику. */
@media (min-width: 721px) {
  .kp-card > a { position: relative; display: block; max-height: 420px; overflow: hidden; }
  .kp-card > a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 80%);
    pointer-events: none;
  }
  .kp-card > a::before {
    content: '[ открыть КП целиком ]';
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    z-index: 2; font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--ink); background: #fff; border: 1px solid var(--ink);
    padding: 9px 14px; border-radius: var(--r-s); white-space: nowrap;
  }
}
/* Кнопка наезжала на текст КП — растягиваем растушёвку под неё */
@media (max-width: 720px) {
  .kp-card > a::after { height: 128px; }
  .kp-card > a::before { bottom: 16px; }
}

/* ── 9.6 Свайп-карточки на телефоне ──
   Три карточки в столбик = почти два экрана пролистывания.
   Горизонтальная лента со snap: одна карточка на экран, остальные — жестом. */
@media (max-width: 720px) {
  .swipe-m {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* вылезаем за поля обёртки, чтобы лента шла от края до края */
    margin-left: calc(var(--pad, 20px) * -1);
    margin-right: calc(var(--pad, 20px) * -1);
    padding: 2px var(--pad, 20px) 10px;
  }
  .swipe-m::-webkit-scrollbar { display: none; }
  .swipe-m > * { scroll-snap-align: start; min-width: 0; }
  .swipe-hint {
    display: block; font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .6px; color: var(--dim); margin-top: 2px;
  }
}
.swipe-hint { display: none; }
/* --pad повторяет боковые поля .wrap на каждом брейкпоинте */
:root { --pad: 24px; }
@media (max-width: 720px) { :root { --pad: 20px; } }
@media (max-width: 400px) { :root { --pad: 16px; } }

/* ── 9.7 Карточка кейса внутри свайп-ленты ──
   Жёсткая шапка в 118px рассчитана на карточку во всю ширину.
   В ленте карточка уже — название переносится и упирается в границу. */
@media (max-width: 720px) {
  .swipe-m .case2-head { height: auto; min-height: 0; padding-bottom: 14px; }
  .swipe-m .case2-co { -webkit-line-clamp: 3; }
  .swipe-m .case2-fleet { white-space: normal; margin-top: 6px; }
  .swipe-m .case2-row .l { white-space: normal; max-width: 52%; }
  .swipe-m .case2 { display: flex; flex-direction: column; }
  .swipe-m .case2-sol { margin-top: auto; }
  .swipe-m .dir-body { padding-bottom: 18px; }
}

/* ── 9.8 Отчёт об аудите — образец формата рядом с реальными КП ── */
.doc-wrap { max-width: 720px; margin: 0 auto 8px; }
.doc-lbl { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-step { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--warn); border: 1px solid rgba(160,107,10,.35); border-radius: var(--r-s); padding: 4px 9px; }
.doc-cap { margin-top: 14px; font-size: 13px; color: var(--dim); line-height: 1.55; text-align: center; }
.reports-wrap .kp-grid { margin-top: 0; }
@media (max-width: 720px) {
  .doc-lbl { font-size: 14.5px; gap: 8px; }
  .doc-step { font-size: 10px; padding: 3px 7px; }
  .doc { padding: 20px 16px 16px; font-size: 12px; }
  .doc-kv { grid-template-columns: 1fr 1fr; }
  .doc-org { display: none; }
  .doc-find { flex-direction: column; gap: 3px; }
  .doc-find .m { align-self: flex-start; }
  .doc-total { flex-direction: column; align-items: flex-start; gap: 4px; }
  .doc-cap { font-size: 12.5px; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
   V10 — АУДИТ: тап-зоны и читаемость мелких меток
   ═══════════════════════════════════════════════════════════ */

/* ── 10.1 Ссылки в подвале: были 31–32px по высоте, палец мажет ── */
@media (max-width: 720px) {
  .footer ul li a { display: block; padding: 9px 0; }
  .footer p a, .footer a[href^="mailto"], .footer a[href^="tel"] { display: inline-block; padding: 8px 0; }
  .nav-back { display: inline-block; padding: 11px 0; }
  .footer ul { gap: 0; }
}

/* ── 10.2 Мелкие мото-метки: 7–8,5px не читаются на телефоне ── */
@media (max-width: 720px) {
  .logo-tag { font-size: 9.5px; letter-spacing: .5px; }
  .doc-brand-sub { font-size: 8.5px; }
}
@media (max-width: 400px) { .doc-brand-sub { display: none; } }

/* ═══════════════════════════════════════════════════════════
   V10.3 — ПРАВОВЫЕ СТРАНИЦЫ (политика, оферта)
   ═══════════════════════════════════════════════════════════ */
.legal { max-width: 780px; }
.legal .legal-date { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .3px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); margin-bottom: 34px; }
.legal h2 { font-size: 20px; line-height: 1.35; margin: 38px 0 12px; letter-spacing: -.2px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 12px; }
.legal ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.legal li { position: relative; font-size: 16px; line-height: 1.65; color: var(--ink-soft); padding-left: 20px; margin-bottom: 8px; }
.legal li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 1px; background: var(--save); }
.legal a { color: var(--save); text-decoration: none; border-bottom: 1px solid rgba(27,107,69,.3); }
.legal a:hover { border-bottom-color: var(--save); }
@media (max-width: 720px) {
  .legal h2 { font-size: 18px; margin: 30px 0 10px; }
  .legal p, .legal li { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   V11 — ДОСТУПНОСТЬ (WCAG 2.1 AA)
   ═══════════════════════════════════════════════════════════ */

/* --- 2.4.7 Видимый фокус: одно правило на весь сайт --- */
:focus-visible {
  outline: 3px solid var(--save);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
/* На тёмных секциях зелёный тонет — переключаем на янтарный (8,3:1 к #142E50) */
.sec-ink :focus-visible,
.manifesto :focus-visible,
.metrics2 :focus-visible,
.problem-wrap :focus-visible,
.hero-dark :focus-visible,
footer :focus-visible {
  outline-color: var(--warn-on-dark);
}
/* Мышью кольцо не показываем — только клавиатуре */
:focus:not(:focus-visible) { outline: none; }

/* --- 2.4.1 Ссылка «к содержимому» --- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 500;
  background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: .3px;
  padding: 12px 18px; border-radius: 0 0 var(--r-m) var(--r-m);
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* --- 2.1.1 Нативный контрол, скрытый визуально, но живой для клавиатуры --- */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --- Чек-лист «страхуют вслепую»: настоящие чекбоксы --- */
.chk-item { position: relative; }
.chk-item:focus-within { background: rgba(20,46,80,.05); outline: 3px solid var(--save); outline-offset: -3px; }
.chk-item input:checked ~ .chk-box,
.chk-item.on .chk-box { background: var(--warn); border-color: var(--warn); color: #fff; }
.chk-item input:checked ~ .txt,
.chk-item.on .txt { color: var(--ink); font-weight: 500; }

/* --- 2.5.5 Тап-зоны: инлайн-CTA, работающие как кнопки --- */
.tap44 { display: inline-flex; align-items: center; min-height: 44px; }

/* --- 1.4.11 Метка фото-заглушки на тёмном фоне --- */
.sec-ink .ph-mark,
.page-hero .ph-mark,
.hero-dark .ph-mark { color: #C79E55; border-color: #C79E55; background: rgba(199,158,85,.10); }

/* ═══════════════════════════════════════════════════════════
   V12 — ДОБОР ПОСЛЕ КОНТРОЛЬНОГО ПРОГОНА
   ═══════════════════════════════════════════════════════════ */

/* 1.4.11 — граница у кнопок-призраков была 1,2:1, стала 3,4:1 */
.btn-ghost { border-color: var(--field-line); }
.btn-ghost-light { border-color: rgba(255,255,255,.45); }  /* 4,0:1 к --ink */
.burger { border-color: var(--field-line); }

/* 2.5.5 — тап-зоны 44×44 в подвале и в CTA */
@media (max-width: 720px) {
  .footer a, .crumbs a, .nav-back {
    min-height: 44px; display: inline-flex; align-items: center; padding: 6px 0;
  }
  .cta-phone { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   V13 — ОСТАТОК ТАП-ЗОН
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  a.v, .inline-cta { min-height: 44px; display: inline-flex; align-items: center; }
}
.skip-link { padding: 14px 18px; }

/* ═══════════════════════════════════════════════════════════
   V14 — СВОРАЧИВАЕМЫЕ ДОКУМЕНТЫ + ПЛОТНОСТЬ ГЛАВНОЙ
   ═══════════════════════════════════════════════════════════ */

/* Шаг документа: подпись над листом */
.doc-lbl { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.doc-step { font-family: var(--mono); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--save); background: rgba(27,107,69,.09); border-radius: var(--r-m); padding: 3px 9px; }

/* Сворачиваемый документ */
.doc-fold { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--white); margin-top: 14px; }
.doc-fold + .doc-fold { margin-top: 12px; }
.doc-fold > summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--r-m);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.doc-fold > summary::-webkit-details-marker { display: none; }
.doc-fold > summary:hover { background: var(--cream); }
.doc-fold > summary:focus-visible { outline: 3px solid var(--save); outline-offset: -3px; }
.doc-fold .fold-br { font-family: var(--mono); color: var(--save); font-size: 17px; letter-spacing: -3px; flex: none; }
.doc-fold .fold-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-left: auto; }
.doc-fold .fold-sub::after { content: ' [ раскрыть ]'; color: var(--save); }
.doc-fold[open] .fold-sub::after { content: ' [ свернуть ]'; }
.doc-fold[open] > summary { border-bottom: 1px solid var(--hair); border-radius: var(--r-m) var(--r-m) 0 0; }
.fold-body { padding: 22px 20px 20px; }
@media (max-width: 620px) {
  .doc-fold > summary { padding: 12px 14px; font-size: 14.5px; }
  .doc-fold .fold-sub { margin-left: 0; width: 100%; }
  .fold-body { padding: 16px 12px 14px; }
}

/* КП внутри свёртки */
.kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .kp-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   V15 — ЗАГОЛОВОК СВЁРНУТОГО БЛОКА В ОДНУ СТРОКУ С СКОБКОЙ
   ═══════════════════════════════════════════════════════════ */
.doc-fold > summary .fold-t { flex: 1 1 0%; min-width: 0; }
@media (max-width: 620px) {
  .doc-fold > summary { gap: 10px; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
  .doc-fold .fold-br { line-height: 1.35; }
  .doc-fold .fold-sub { margin-top: 4px; }
}
.fold-body > .doc { max-width: 720px; margin-left: auto; margin-right: auto; }
.fold-body > .doc-cap { max-width: 720px; margin-left: auto; margin-right: auto; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll:focus-visible { outline: 3px solid var(--save); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   V16 — ПЕРЕЛИНКОВКА РАЗБОРОВ
   ═══════════════════════════════════════════════════════════ */
.sec-rel { padding-top: 0; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rel-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-m); text-decoration: none; min-height: 44px; transition: border-color .18s ease, transform .18s ease; }
.rel-card:hover { border-color: var(--save); transform: translateY(-2px); }
.rel-card:focus-visible { outline: 3px solid var(--save); outline-offset: 3px; }
.rel-br { font-family: var(--mono); color: var(--save); font-size: 15px; letter-spacing: -3px; }
.rel-t { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.rel-s { font-size: 13.5px; color: var(--dim); line-height: 1.45; }
@media (max-width: 900px) { .rel-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   V17 — ДИСЦИПЛИНА ЦВЕТА, ШКАЛА, ЧИТАЕМОСТЬ
   Зелёный --save = только деньги и главное действие.
   Всё остальное, что было зелёным «для красоты», → --ink / --dim
   ═══════════════════════════════════════════════════════════ */

/* ── 17.1 Зелёный возвращается к смыслу ── */
.card .c-tag,
.dir-body .c-tag { color: var(--dim); }
.checks li::before { color: var(--ink); }
.faq summary::after { color: var(--dim); }
details[open] > summary::after { color: var(--save); }
.step2-circ { color: var(--ink); border-color: var(--rule); }
.card .c-more,
.dir-body .c-more { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.card:hover .c-more,
.dir-card:hover .c-more { color: var(--save); border-bottom-color: var(--save); }
.hcalc-result .r-label { color: var(--dim); }

/* ── 17.2 Одна ступень H2 на весь сайт ── */
.sec-head h2 { font-size: clamp(24px, 2.6vw, 32px); }
.duo h2 { font-size: clamp(24px, 2.6vw, 32px); }

/* ── 17.3 Полоса метрик: ровные базовые линии, читаемая сноска ── */
.metric2 .l { min-height: 38px; font-size: 13px; color: rgba(255,255,255,.62); }
.metric2 .src { font-size: 11px; color: rgba(255,255,255,.62); }

/* ── 17.4 Заголовок не убегает от контента в 2-колоночных секциях ── */
@media (min-width: 901px) {
  .problem-grid > :first-child,
  #process-grid > :first-child { position: sticky; top: 96px; align-self: start; }
}

/* ── 17.5 Длина строки: мелкий текст не растягивается на 170 знаков ── */
.partners-note, .doc-cap, .cases-note { max-width: 68ch; }
.broker-card p, .problem-note { max-width: 62ch; }

/* ── 17.6 Контраст и минимальный кегль интерфейсного текста ── */
.problem-note { color: rgba(255,255,255,.58); }
.case2-save .l { font-size: 11px; }
.logo-tag { font-size: 10px; }

/* ── 17.7 FAQ возвращается в общую сетку ── */
.wrap.faq { max-width: 1180px; }
.wrap.faq > .sec-head, .wrap.faq > details, .wrap.faq > p { max-width: 880px; }

/* ── 17.8 Скобка обрамляет фразу, а не имитирует пустой чекбокс ── */
.hero2-proof .proof-item { display: inline-flex; align-items: baseline; gap: 6px; }
.hero2-proof .proof-br { display: none; }
.hero2-proof .proof-item::before { content: '[ '; font-family: var(--mono); color: var(--warn); }
.hero2-proof .proof-item::after  { content: ' ]'; font-family: var(--mono); color: var(--warn); }

/* ── 17.9 Иерархия кнопок: не семь равнозначных выходов ── */
.btn-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.btn-link:hover { color: var(--save); border-bottom-color: var(--save); }
.btn-link:focus-visible { outline: 3px solid var(--save); outline-offset: 3px; }
.btn-ghost { max-width: 360px; }

/* ── 17.10 Новые блоки: манифест, кейсы, форма, калькулятор ── */
.manifesto-promise .p-s {
  margin-top: 8px; font-size: 13.5px; line-height: 1.6;
  color: rgba(255,255,255,.62); max-width: 34ch;
}
.cases-note {
  margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--dim);
  border-left: 2px solid var(--rule); padding-left: 14px;
}
.hcalc-alt {
  display: inline-block; margin-top: 8px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule);
  text-underline-offset: 3px; font-weight: 600;
}
.hcalc-alt:hover { text-decoration-color: var(--save); color: var(--save); }
.f-next {
  margin: 22px 0 18px; padding: 18px 20px;
  background: var(--cream); border: 1px solid var(--hair); border-radius: var(--r-m);
}
.f-next-t {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 10px;
}
.f-next-l { margin: 0; padding-left: 20px; }
.f-next-l li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 6px; }
.f-next-p { margin-top: 10px; font-size: 13.5px; color: var(--dim); }

/* ── 17.11 Кейсы: нижние края карточек совпадают ── */
.case-main { display: flex; flex-direction: column; }
.case-main .case-nums { margin-bottom: auto; }
.case-side .cs-fleet small { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   V18 — МОБИЛЬНАЯ ВЕРСИЯ
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* 18.1 Липкая панель больше не съедает нижние 69px контента */
  body.has-mbar { padding-bottom: 74px; scroll-padding-bottom: 74px; }
  body.has-mbar .footer { padding-bottom: 26px; }
  .mbar a { min-height: 44px; }
  .mbar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }

  /* 18.2 Крошки — рабочий селектор и тап-таргет 44px */
  .crumbs a { display: inline-block; padding: 12px 0; min-height: 44px; }

  /* 18.3 Калькулятор: подписи не мельче основного текста */
  .hcalc-field label { font-size: 15px; }
  .hcalc-empty { font-size: 14px; }
  .hcalc-result .r-note { font-size: 13px; }
  .hcalc-result .r-label { font-size: 11.5px; }

  /* 18.4 Герой компактнее — кнопка попадает на первый экран */
  .hero2 { padding: 30px 0 42px; }
  .hero2 .lead { margin-bottom: 18px; }
  .hero2-proof { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }

  /* 18.5 Инлайн-ссылки в абзацах добираются до 24px по вертикали */
  .faq-body a, .lead a, p a { padding: 4px 0; }
}

@media (max-width: 400px) {
  /* 18.6 Телефон не исчезает из шапки — превращается в иконку-кнопку */
  .header-phone { display: block; }
  .header-phone span { display: none; }
  .header-phone a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-m);
    border: 1.5px solid var(--ink); font-size: 0;
  }
  .header-phone a::before {
    content: ''; width: 18px; height: 18px; display: block;
    background: var(--ink);
    -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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .3 1.9.6 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.1a2 2 0 012.1-.5c.9.3 1.8.5 2.8.6a2 2 0 011.7 2z'/%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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .3 1.9.6 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.1a2 2 0 012.1-.5c.9.3 1.8.5 2.8.6a2 2 0 011.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* ═══════════════ V19 — продуктовые страницы, ритм, контакты ═══════════════ */

/* 19.1 Таблица сравнения (грузы) */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.cmp-tbl th, .cmp-tbl td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.cmp-tbl thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.cmp-tbl tbody th { font-weight: 600; color: var(--ink); width: 21%; background: rgba(255,255,255,.5); }
.cmp-tbl tbody td { color: var(--ink-soft); width: 39.5%; }
.cmp-tbl tbody tr:last-child th, .cmp-tbl tbody tr:last-child td { border-bottom: 0; }
.cmp-tbl .cmp-yes { color: var(--ink); }
.cmp-tbl td.num { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; }
@media (min-width: 721px) {
  .cmp-tbl.tbl-num tbody th { width: 46%; }
  .cmp-tbl.tbl-num tbody td { width: 27%; }
}
@media (min-width: 721px) {
  .cmp-tbl .cmp-no::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--warn); margin-right: 8px; vertical-align: 2px; }
}

@media (max-width: 720px) {
  .cmp-tbl, .cmp-tbl tbody, .cmp-tbl tr, .cmp-tbl th, .cmp-tbl td { display: block; width: auto; }
  .cmp-tbl thead { display: none; }
  .cmp-tbl tbody tr { border: 1px solid var(--hair); border-radius: var(--r-m); padding: 4px 0; margin-bottom: 12px; background: #fff; }
  .cmp-tbl tbody th { width: auto; background: none; border-bottom: 0; padding: 12px 16px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); font-weight: 500; }
  .cmp-tbl tbody td { width: auto; border-bottom: 0; padding: 0 16px 10px; }
  .cmp-tbl tbody td::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
}

/* 19.2 Нумерованные факты */
.fact-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.fact-row { display: grid; grid-template-columns: 98px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--hair); }
.fact-row:last-child { border-bottom: 1px solid var(--hair); }
.fr-n { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--warn); padding-top: 3px; white-space: nowrap; }
.fr-b { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }
.fr-b b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .fact-row { grid-template-columns: 1fr; gap: 7px; padding: 16px 0; }
  .fr-b { font-size: 15px; }
}

/* 19.3 Список исключений */
.excl-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 40px; }
.excl-list li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.excl-list li::before { content: '×'; position: absolute; left: 0; top: 15px; font-family: var(--mono); font-size: 16px; color: var(--warn); }
.excl-list li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 860px) { .excl-list { grid-template-columns: 1fr; } }

/* 19.4 Смежные кремовые секции не слипаются */
.sec-cream + .sec-cream { border-top: 1px solid var(--hair); }

/* 19.5 keysy: парк в моно только числом */
.cs-fleet { line-height: 1.25; }
.cs-fleet small { display: block; margin-top: 5px; font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--dim); }

/* 19.6 Контакты: две колонки вместо шести карточек в столбик */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 860px) { .contacts-grid { grid-template-columns: 1fr; } }

/* 19.7 Контакты — реквизиты строкой */
.f-req-line { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--dim); }
.contacts-grid .contact-card .v a { color: var(--ink); }

/* ═══════════════ V20 — меню, лента, таблица, порядок на мобильном ═══════════════ */

/* 20.1 Меню закрывает экран целиком, телефон в меню */
.nav-phone { display: none; }
@media (max-width: 980px) {
  body.nav-lock { overflow: hidden; }
  .nav.open {
    top: 62px;
    height: calc(100dvh - 62px);
    max-height: calc(100dvh - 62px);
    background: #fff;
    border-top: 1px solid var(--hair);
    box-shadow: 0 18px 40px rgba(20,46,80,.10);
    overflow-y: auto;
    padding: 6px 20px calc(28px + env(safe-area-inset-bottom));
  }
  .nav.open .nav-phone {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    margin-top: 18px; padding: 16px 18px; border: 1px solid var(--hair);
    border-radius: var(--r-m); background: var(--cream);
    font-family: var(--mono); font-size: 19px; letter-spacing: -.3px; color: var(--ink);
  }
  .nav.open .nav-phone span {
    font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--dim);
  }
}

/* 20.2 Точки-индикаторы под лентой */
.swipe-dots { display: none; }
@media (max-width: 720px) {
  .swipe-dots { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
  .swipe-dots span {
    width: 6px; height: 6px; border-radius: var(--r-pill);
    background: var(--rule); transition: background .2s, width .2s;
  }
  .swipe-dots span.on { width: 18px; background: var(--ink); }
  .swipe-m > * { scroll-snap-stop: always; }
}

/* 20.3 Таблица тендера — карточки на телефоне, без вложенного скролла */
@media (max-width: 720px) {
  .tbl-scroll { overflow: visible; min-width: 0; width: 100%; }
  .tbl-scroll table { min-width: 0; width: 100%; display: block; }
  .tbl-scroll thead { display: none; }
  .tbl-scroll tbody { display: block; }
  .tbl-scroll tbody tr {
    display: block; border: 1px solid var(--hair); border-radius: var(--r-m);
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  .tbl-scroll tbody tr.best { border-color: var(--save); box-shadow: inset 3px 0 0 var(--save); }
  .tbl-scroll tbody td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 5px 0; font-size: 14px; }
  .tbl-scroll tbody td:first-child {
    display: block; font-weight: 600; font-size: 15px; color: var(--ink);
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--hair);
  }
  .tbl-scroll tbody td::before {
    content: attr(data-l); flex: 0 0 auto; color: var(--dim); font-size: 13px;
  }
  .tbl-scroll tbody td:first-child::before { content: none; }
  .tbl-scroll tbody td.num { font-family: var(--mono); }
}

/* 20.4 Сворачивание тяжёлых блоков только на телефоне */
@media (min-width: 721px) {
  details.m-fold > summary { display: none; }
  details.m-fold > .fold-body { margin-top: 0; }
}

/* 20.5 (V30) Порядок секций перенесён в сам HTML — одинаков на всех экранах:
   герой → метрики → кейсы → манифест → партнёры → проблема → процесс →
   документы → направления → брокер. Flex-order на телефоне больше не нужен,
   визуальный порядок совпадает с DOM (и с порядком чтения для скринридера). */

/* 20.6 Подвал: агентская модель вслух */
.f-agency { margin-top: 10px; max-width: 46ch; }

/* 20.7 Правая колонка на странице автопарка — механика вместо копии чек-листа */
.chk-plain .fact-rows { margin-top: 14px; gap: 0; }
.fact-rows-tight .fact-row { grid-template-columns: 62px 1fr; gap: 12px; padding: 14px 0; }
.fact-rows-tight .fr-b { font-size: 14.5px; line-height: 1.6; }
.chk-link { margin-top: 16px; }

/* 20.8 Плотнее на телефоне: партнёры, подвал, свёрнутые блоки */
@media (max-width: 720px) {
  .partners { grid-template-columns: 1fr 1fr; gap: 6px; }
  .partner { padding: 11px 10px; font-size: 12.5px; min-height: 0; }
  .partners-note { font-size: 13px; line-height: 1.6; }

  .footer { padding-top: 34px; }
  .footer-grid { gap: 24px; }
  .footer p { font-size: 13.5px; line-height: 1.6; }
  .f-req, .f-agency { font-size: 12.5px; line-height: 1.55; }

  .chk-fold .fold-body, .f-next-fold .fold-body { margin-top: 12px; }
  .f-next-fold { margin: 18px 0; }
  .f-next-fold[open] .f-next { border: 0; padding: 0; background: none; margin: 0; }
  .f-next-fold[open] > summary { display: none; }
  .cta-left .cta-msgrs { display: none; }
}
@media (min-width: 721px) {
  .f-next-fold > summary { display: none; }
}

/* ═══ V21 — кейсы: строка покрытия ═══ */
.case-cover{
  margin:18px 0 20px; padding:14px 16px;
  border-left:2px solid var(--save); background:rgba(27,107,69,.045);
  font-size:14.5px; line-height:1.65; color:var(--ink-soft);
}
.cc-k{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--save); margin-bottom:4px;
}
@media (max-width:720px){ .case-cover{ font-size:14px; padding:12px 14px; margin:14px 0 16px; } }

/* ═══ V21 — форма: три поля видимых, остальное по запросу ═══ */
.f-more{ margin:0 0 20px; }
.f-more > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:13px 0; font-family:var(--mono); font-size:11.5px; letter-spacing:1px;
  text-transform:uppercase; color:var(--dim); border-top:1px solid var(--hair);
  align-items:flex-start; line-height:1.5;
}
.f-more > summary::-webkit-details-marker{ display:none; }
.f-more > summary:hover{ color:var(--ink); }
.f-more > summary .fold-br{ font-family:var(--mono); color:var(--warn); letter-spacing:-1px; flex:0 0 auto; white-space:nowrap; }
.f-more[open] > summary{ color:var(--ink); }
.f-more .f-grid{ margin-top:4px; }

/* ═══ V22 — шкала отступов и утилиты вместо инлайновых style ═══ */
:root{
  --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px;
  --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;
  --r-s:6px; --r-m:12px; --r-pill:999px;
}
.nav-calc{ color:var(--save); font-weight:600; }
.mt-2{ margin-top:var(--s-2); }
.mt-3{ margin-top:var(--s-3); }
.mt-4{ margin-top:var(--s-4); }
.mt-5{ margin-top:var(--s-5); }
@media (min-width:721px){ .cards-2{ grid-template-columns:1fr 1fr; } }
.note-s{ color:var(--dim); font-size:14px; }
.h-art{ font-size:24px; margin:var(--s-5) 0 var(--s-2); }
.p-art{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin-bottom:var(--s-3); }
.p-art-lead{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin-bottom:var(--s-4); }
.art-src{ border-top:1px solid var(--hair); margin-top:36px; padding-top:var(--s-4); font-size:15px; color:var(--dim); }
.w-760{ max-width:760px; }
.sec-tight{ padding-top:0; }
.nav a.nav-calc{ color:var(--save); font-weight:600; }
.ref-note{ margin-top:var(--s-3); }
.ref-note b{ color:var(--ink); }

/* ═══ V22 — доп. посадочные под блоком направлений ═══ */
.dir-extra-lead{ margin:var(--s-5) 0 var(--s-2); font-family:var(--mono); font-size:11.5px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); }
.dir-extra{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
.dir-x{ display:block; padding:18px 22px; background:#fff; border:1px solid var(--hair);
  border-radius:var(--r-m); text-decoration:none; transition:border-color .18s, transform .18s; }
.dir-x:hover{ border-color:var(--save); transform:translateY(-2px); }
.dx-t{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.dx-t::after{ content:' →'; color:var(--save); }
.dx-s{ display:block; font-size:14px; line-height:1.6; color:var(--dim); }
@media (max-width:720px){ .dir-extra{ grid-template-columns:1fr; } .dir-x{ padding:15px 18px; } }

/* V23 — свёртка блока «как проверить цифры» на телефоне */
.ref-fold > summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:8px;
  padding:13px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--dim); line-height:1.5;
}
.ref-fold > summary::-webkit-details-marker{ display:none; }
.ref-fold > summary .fold-br{ color:var(--warn); letter-spacing:-1px; flex:0 0 auto; white-space:nowrap; }
.ref-fold[open] > summary{ color:var(--ink); }
.ref-fold > summary:hover{ color:var(--ink); }

/* V23 — свёртка пунктов манифеста на телефоне (тёмный фон) */
.mf-fold > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  margin-top:26px; padding:13px 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.12); line-height:1.5;
}
.mf-fold > summary::-webkit-details-marker{ display:none; }
.mf-fold > summary .fold-br{ color:var(--save-on-dark); letter-spacing:-1px; flex:0 0 auto; white-space:nowrap; }
.mf-fold[open] > summary{ color:#fff; }
@media (min-width:721px){ .mf-fold > summary{ display:none; } .mf-fold > .fold-body{ margin-top:0; } }

/* ═══════════════ V24 — контакты, подвал, примечания, команда ═══════════════ */

/* 24.1 Контакты: у .contacts-grid не было сетки — карточки разъезжались,
   телефон рвался на две строки. Последняя карточка в непарном ряду тянется во всю ширину. */
.contacts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; }
.contacts-grid .contact-card{ padding:18px 20px; }
.contacts-grid .contact-card .v{ font-size:17px; white-space:nowrap; }
.contacts-grid .contact-card .v-sans{ font-size:15.5px; white-space:normal; font-weight:500; }
.contacts-grid .contact-card:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (max-width:720px){
  .contacts-grid{ grid-template-columns:1fr; gap:10px; }
  .contacts-grid .contact-card{ padding:14px 16px; }
  .contacts-grid .contact-card .v{ font-size:16px; }
}

/* 24.2 Подвал: было четыре кегля подряд (15 / 13,5 / 12,5) — текст «плясал».
   Осталось две ступени; реквизиты — моно с ровными цифрами. */
.footer p{ font-size:14.5px; }
.footer .f-req{
  font-family:var(--mono); font-size:12.5px; line-height:1.75; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.58);
}
.footer .f-agency{
  font-family:var(--sans); font-size:13px; line-height:1.65;
  letter-spacing:normal; color:rgba(255,255,255,.5); max-width:46ch; margin-top:16px;
}
@media (max-width:720px){
  .footer .f-req{ font-size:12px; }
  .footer .f-agency{ font-size:12.5px; }
}

/* 24.3 Ссылки в примечаниях были браузерным синим с подчёркиванием */
.cases-note a, .partners-note a, .doc-cap a, .f-next a, .nda-box a, .proof-note a, .f-req-line a{
  color:var(--save); text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:rgba(27,107,69,.35); text-underline-offset:3px;
}
.cases-note a:hover, .partners-note a:hover, .doc-cap a:hover,
.f-next a:hover, .nda-box a:hover, .proof-note a:hover{ text-decoration-color:var(--save); }

/* 24.4 Блок проверки: одна плашка вместо серой заметки внутри серой заметки */
.proof-note{
  margin:18px 0 0; padding:16px 18px; background:var(--cream);
  border:1px solid var(--hair); border-radius:var(--r-m);
  font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:72ch;
}
.proof-note .pn-t{
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px;
}
.proof-note b{ color:var(--ink); font-weight:600; }
@media (max-width:720px){ .proof-note{ font-size:14px; padding:14px 16px; } }

/* 24.5 Чек-лист: заголовок дублировался в свёртке и внутри */
@media (max-width:720px){ .chk-fold[open] .chk-head{ display:none; } }

/* 24.6 Команда */
.team-note{ margin-top:16px; font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:62ch; }
.team-add{ margin-top:14px; }

/* 24.7 Что делаем с полисами */
.nda-box{
  margin:22px 0 4px; padding:18px 20px; background:var(--cream);
  border:1px solid var(--hair); border-radius:var(--r-m);
}
.nda-t{
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px;
}
.nda-l{ margin:0; padding-left:18px; }
.nda-l li{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:6px; }
.nda-p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--dim); }
@media (max-width:720px){
  .nda-box{ padding:14px 16px; }
  .nda-l li{ font-size:14px; }
}

/* ═══════════════ V25 — масштаб заголовков, аналитика, раздел ОСАГО ═══════════════ */

/* 25.1 Названия разделов были 32px при H1 в 54 — секции читались как подписи.
   Одна ступень вверх; на телефоне держим прежний кегль. */
.sec-head h2, .duo h2{ font-size:clamp(28px, 3.4vw, 42px); letter-spacing:-.02em; }
.sec-head{ max-width:760px; }
.sec-head h2{ margin-bottom:14px; }
@media (max-width:900px){ .sec-head h2, .duo h2{ font-size:clamp(24px, 3.4vw, 32px); } }
@media (max-width:720px){ .sec-head h2, .duo h2{ font-size:25px; } }
@media (max-width:480px){ .sec-head h2, .duo h2{ font-size:22px; } }

/* 25.2 Раздел «Как рассчитывается ОСАГО»: таблица на десять строк
   занимала целый экран — ушла в свёртку, наверху осталась суть. */
.edu-formula b{ color:var(--warn-on-dark); font-weight:600; }
.edu-note b{ color:var(--ink); }
.edu .edu-note{ padding:18px 22px; font-size:14.5px; line-height:1.7; color:var(--ink-soft); }
.edu-fold{ border:0; border-top:1px solid var(--rule); border-radius:0; background:transparent; }
.edu-fold > summary{ border-radius:0; }
.edu-fold .fold-body{ padding:0; }
.edu-fold table{ border-top:1px solid var(--rule); }

@media (max-width:720px){ .mf-fold .manifesto-promise{ margin-top:14px; } }

/* ═══════════════ V26 — палитра и ритм ═══════════════ */

/* 26.1 Секция документов уходит на тёплый фон: белые образцы КП
   на нём читаются как бумага на столе, а полоса белых секций
   от «неудобного вопроса» до партнёров перестаёт быть одной плитой. */
.reports-wrap{
  background:var(--cream);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.reports-wrap .doc-fold{ background:var(--white); }

/* 26.2 Образцы документов раскрыты на десктопе — на телефоне
   свёрнуты (открывает script.js по ширине окна). */

/* ═══════════════ V27 — полоса метрик, подвал, карточка тендера ═══════════════ */

/* 27.1 Полоса под героем была тёмно-синей и резала глаз: между белым героем
   и тёмным манифестом стояла третья по яркости плита. Теперь тёплая,
   цифры цветом только там, где это экономия. */
.metrics2{
  background:var(--cream);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.metric2{ border-right:1px solid var(--rule); }
.metric2 .n{ color:var(--ink); }
.metric2 .n.gn{ color:var(--save); }
.metric2 .n.an{ color:var(--ink); }
.metric2 .l{ color:var(--ink-soft); }
.metric2 .src{ color:var(--dim); }
@media (max-width:720px){ .metric2{ border-right:0; border-bottom:1px solid var(--rule); } }

/* 27.2 Подвал: реквизиты вернулись в основную гарнитуру — моно рядом с
   двумя кеглями санса давало четыре разных стиля в одной колонке.
   Цифры выравнивает tabular-nums, а не смена шрифта. */
.footer .f-req{
  font-family:var(--sans); font-size:13px; line-height:1.7; letter-spacing:normal;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.58);
}
.footer .f-agency{ font-size:13px; color:rgba(255,255,255,.5); max-width:52ch; }
@media (max-width:720px){ .footer .f-req, .footer .f-agency{ font-size:12.5px; } }

/* 27.3 Карточка «Что происходит в тендере»: под заголовком шла линия,
   потом отступ, потом линия первой строки — читалось как пустая строка. */
.chk-plain .fact-rows{ margin-top:0; }
.chk-plain .fact-row{ padding-left:24px; padding-right:24px; }
.chk-plain .fact-row:first-child{ border-top:0; }
.chk-plain .fact-row:last-child{ border-bottom:0; }
.chk-plain .chk-link{
  margin:0; padding:15px 24px 17px; border-top:1px solid var(--rule);
}
@media (max-width:720px){
  .chk-plain .fact-row{ padding-left:18px; padding-right:18px; }
  .chk-plain .chk-link{ padding:13px 18px 15px; }
}

/* ═══════════════ V28 — сноски и выравнивание парных колонок ═══════════════ */

/* 28.1 Сноски выглядели как серые плашки с вертикальной чертой: в конце
   каждого раздела появлялся ещё один блок, конкурирующий с контентом.
   Теперь это сноска — тонкая линия сверху, мелкий кегль, без рамки. */
.cases-note, .partners-note{
  border-left:0; padding:12px 0 0; margin-top:20px;
  border-top:1px solid var(--rule);
  font-size:13.5px; line-height:1.65; color:var(--dim); max-width:68ch;
}
.sec-partners .partners-note{ margin-top:20px; font-size:13.5px; }
.doc-cap{ font-size:13.5px; color:var(--dim); }

/* 28.2 Парные колонки: заголовок в одну строку слева и в две справа
   сбивали лиды и списки с общей линии. Ряды общие для обеих колонок. */
@media (min-width:1025px){
  @supports (grid-template-rows: subgrid){
    /* row-gap:0 — вертикальный ритм внутри колонок держат родные отступы
       (h2 margin, lead margin-bottom); 64px остаётся только между колонками.
       Иначе 64px ложится между КАЖДОЙ парой строк субсетки: метка/заголовок/лид/список. */
    /* Строк 6, а не 4: на странице автопарка в левой колонке пять детей
       (метка/заголовок/лид/список/ссылка). При span 4 пятый ребёнок ложился
       в ту же строку, что и список, — текст наезжал на текст.
       Лишние строки у коротких колонок пустые и нулевой высоты — при
       row-gap:0 они ничего не смещают. */
    .duo{ grid-template-rows:repeat(6, auto); align-items:start; gap:0 64px; }
    .duo > div{ display:grid; grid-template-rows:subgrid; grid-row:span 6; align-content:start; }
  }
}

/* ═══════════════ V30 — конверсионный поток главной ═══════════════ */

/* 30.1 Направления в герое: сегментация видна до первого скролла.
   Если посетитель не про транспорт — он понимает это за секунду, а не на 7-м экране. */
.hero2-dirs{
  display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap;
  margin-top:16px; font-family:var(--mono); font-size:12.5px; letter-spacing:.4px;
}
.hero2-dirs .hd-lbl{ color:var(--dim); letter-spacing:1px; text-transform:uppercase; font-size:11px; }
.hero2-dirs a{
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(20,46,80,.25); padding-bottom:1px;
}
.hero2-dirs a::before{ content:'[ '; color:var(--dim); }
.hero2-dirs a::after{ content:' ]'; color:var(--dim); }
.hero2-dirs a:hover{ color:var(--save); border-bottom-color:var(--save); }

/* 30.2 Строка «из калькулятора» в форме заявки: сумма приехала сама */
.f-calc-note{
  grid-column:1 / -1; font-family:var(--mono); font-size:12.5px; line-height:1.6;
  color:var(--save); background:var(--save-tint); border:1px solid rgba(27,107,69,.18);
  border-radius:var(--r-s); padding:9px 12px;
}
.f-calc-note b{ font-weight:600; }

/* ═══════════════ V32 — контакты строками, пиктограммы кейсов ═══════════════ */

/* 32.1 Контакты: семь карточек разной высоты читались рвано —
   теперь один блок со строками «метка — значение». */
.cn-card{ background:var(--white); border:1px solid var(--rule); border-radius:var(--r-m); overflow:hidden; }
.cn-card .contact-card{
  display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:baseline;
  padding:15px 22px; border-bottom:1px solid var(--hair);
}
.cn-card .contact-card:last-child{ border-bottom:0; }
.cn-card .k{
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--dim); margin:0;
}
.cn-card .v, .cn-card .v-wrap{ font-size:16px; color:var(--ink); }
.cn-card a.v, .cn-card .v a{ color:var(--ink); text-decoration:none; font-weight:600; }
.cn-card a.v:hover, .cn-card .v a:hover{ color:var(--save); }
.cn-card a.v[href^="tel"]{ font-family:var(--mono); }
.cn-card .v-note{ font-size:13px; color:var(--dim); margin-left:10px; font-weight:400; }
.cn-card .v-sans{ font-weight:400; }
@media (max-width:720px){
  .cn-card .contact-card{ grid-template-columns:1fr; gap:3px; padding:13px 16px; }
  .cn-card .v-note{ display:block; margin-left:0; }
}

/* 32.2 Пиктограммы отраслей в плашках кейсов */
.case2-ico{ margin-bottom:14px; opacity:.9; }
.case2-ico svg{ display:block; width:30px; height:30px; stroke:#7FC79F; stroke-width:1.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ═══════════════ V35 — контакты: каналы и спецификация ═══════════════ */

/* 35.1 Три прямых канала одной строкой.
   Раньше телефон, почта и адрес лежали одинаковыми строками таблицы —
   действие («позвонить») визуально весило столько же, сколько справка
   («ЭДО Контур.Диадок»). Теперь каналы связи вынесены наверх и укрупнены,
   а справочная часть ушла вниз в спецификацию. */
.cn-lines{
  /* auto-fit, а не repeat(3): пока не заполнены Telegram и WhatsApp,
     скрипт снимает плитку мессенджеров — колонок должно остаться две, а не
     две плюс пустая треть. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:0;
  border:1px solid var(--rule); border-radius:var(--r-m);
  background:var(--white); overflow:hidden; margin-bottom:40px;
}
.cn-line{
  display:flex; flex-direction:column; gap:6px;
  padding:26px 28px 24px; text-decoration:none; color:inherit;
  border-left:1px solid var(--rule); transition:background .15s ease;
}
.cn-line:first-child{ border-left:0; }
a.cn-line:hover{ background:var(--cream); }
.cn-k{
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--dim);
}
.cn-v{ font-family:var(--mono); font-size:23px; font-weight:600; color:var(--ink); line-height:1.25; }
.cn-v-sm{ font-size:18px; }
a.cn-line:hover .cn-v{ color:var(--save); }
.cn-v a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair); }
.cn-v a:hover{ color:var(--save); border-bottom-color:var(--save); }
.cn-n{ font-size:13.5px; line-height:1.55; color:var(--dim); margin-top:2px; }

/* 35.2 Справочная часть — спецификация: ключ моноширинным слева, значение справа.
   Это не карточки: тут нечего нажимать, и рамка вокруг каждой строки только шумела. */
.cn-spec{
  display:grid; grid-template-columns:1fr 1fr; gap:0 60px;
  border-top:1px solid var(--rule); margin-top:44px;
}
.cn-row{
  display:grid; grid-template-columns:120px 1fr; gap:20px;
  padding:13px 0; border-bottom:1px solid var(--rule);
}
.cn-row-wide{ grid-column:1 / -1; }
@media (max-width:900px){
  .cn-spec{ grid-template-columns:1fr; margin-top:32px; }
}
.cn-rk{
  font-family:var(--mono); font-size:11px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--dim); padding-top:3px;
}
.cn-rv{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); }

/* 35.3 Блок «что будет после обращения» на контактах — белый:
   на кремовой секции кремовая плашка не читалась как отдельный блок. */
.f-next-w{ background:var(--white); border-color:var(--rule); margin-top:0; padding:22px 24px; }
.cn-grid{ align-items:start; }

@media (max-width:1024px){
  .cn-lines{ grid-template-columns:1fr; }
  .cn-line{ border-left:0; border-top:1px solid var(--rule); }
  .cn-line:first-child{ border-top:0; }
}
@media (max-width:640px){
  .cn-lines{ margin-bottom:28px; }
  .cn-line{ padding:18px 18px 16px; }
  .cn-v{ font-size:20px; }
  .cn-v-sm{ font-size:16px; }
  .cn-row{ grid-template-columns:1fr; gap:3px; padding:11px 0; }
  .cn-rk{ padding-top:0; }
}