/* ============================================================
   КиберОпора — компоненты сайта
   Требует tokens.css. Mobile-first: база 375px,
   затем @media (min-width: 768px) и (min-width: 1120px).
   Правила направления: рамки 2–3px сплошным графитом, radius 0,
   теней нет (кроме inset-маркера), плакатные веса Manrope — 700–800.
   ============================================================ */

/* ============ ЛЕЙАУТ И УТИЛИТЫ ============ */

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.ko-section{ padding: var(--s-7) 0 var(--s-8); }

.ko-section-head{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
}
.ko-section-head h2{ flex-basis: 100%; margin-top: var(--s-3); }

.all-link{
  font-weight: 600; font-size: 14px; text-decoration: none;
  border-bottom: var(--border-3) solid var(--ko-brand);
}
.all-link:hover{ background: var(--ko-mist); }

/* Киккер — подпись со знаком-квадратом */
.ko-kicker{
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.ko-kicker::before{
  content: ""; width: 10px; height: 10px; flex: none;
  background: var(--ko-brand); border: 2px solid var(--ko-ink);
}

.note{ font-size: var(--fs-caption); line-height: var(--lh-caption); opacity: .72; }

.mono-label{
  font-family: var(--font-mono);
  font-size: var(--fs-mono); letter-spacing: var(--ls-mono);
}

/* Тёмные секции: фокус-обводка светлая */
.topline, .cta, .checklist-head{ --ko-focus-ring: var(--ko-paper); }

/* ============ СЛУЖЕБНАЯ СТРОКА ============ */

.topline{ background: var(--ko-bg-inverse); color: var(--ko-paper); }
.topline .container{
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.topline b{ font-weight: 600; letter-spacing: .06em; }

/* ============ ШАПКА ============ */

.site-header{
  border-bottom: var(--border-3) solid var(--ko-line);
  padding-top: var(--s-4);
}
.brand-row{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-4);
}

/* Логотип — типографическое решение: вторая половина слова на чёрной плашке */
.logo{
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
}
.logo .logo-half{
  background: var(--ko-ink); color: var(--ko-paper);
  padding: 2px 6px 4px; display: inline-block;
}
.logo:hover .logo-half{ background: var(--ko-brand); color: var(--ko-paper); }

.slogan{ font-weight: 600; font-size: var(--fs-caption); letter-spacing: .02em; }
.slogan em{ font-style: normal; box-shadow: inset 0 -6px 0 var(--ko-mark); }

/* Мобильная навигация — чекбокс-паттерн без JS.
   Разметка: input#nav-toggle → .brand-row (с label.nav-toggle-btn) → nav.nav
   Ограничение: чекбокс не сообщает скринридерам состояние раскрытия меню —
   при добавлении JS label заменяется на button с aria-expanded. */
.nav-toggle-input{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.nav-toggle-btn{
  margin-left: auto; align-self: center; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: var(--border-2) solid var(--ko-line); background: var(--ko-paper);
  font-weight: 600; font-size: var(--fs-caption);
  letter-spacing: .08em; text-transform: uppercase;
  user-select: none;
}
.nav-toggle-btn::before{
  content: ""; width: 16px; height: 12px;
  background:
    linear-gradient(var(--ko-ink), var(--ko-ink)) 0 0 / 100% 2px,
    linear-gradient(var(--ko-ink), var(--ko-ink)) 0 5px / 100% 2px,
    linear-gradient(var(--ko-ink), var(--ko-ink)) 0 10px / 100% 2px;
  background-repeat: no-repeat;
}
.nav-toggle-btn:hover{ background: var(--ko-ink); color: var(--ko-paper); }
.nav-toggle-btn:hover::before{ filter: invert(1); }
.nav-toggle-input:focus-visible ~ .brand-row .nav-toggle-btn{
  outline: 3px solid var(--ko-focus-ring); outline-offset: 2px;
}

.nav{ display: none; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) 0 var(--s-4); }
.nav-toggle-input:checked ~ .nav{ display: flex; }
.nav a{
  text-decoration: none; font-weight: 600; font-size: var(--fs-caption);
  border: var(--border-2) solid var(--ko-line); padding: 10px 12px;
  background: var(--ko-paper); min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav a:hover{ background: var(--ko-ink); color: var(--ko-paper); }
.nav a[aria-current="page"]{ background: var(--ko-brand); color: var(--ko-paper); border-color: var(--ko-brand); }
/* Акцентная кнопка «Консультация» — первая в навигации на всех страницах */
.nav a.nav-cta{ background: var(--ko-brand); color: var(--ko-paper); border-color: var(--ko-brand); }
.nav a.nav-cta:hover{ background: var(--ko-ink); border-color: var(--ko-ink); color: var(--ko-paper); }

/* ============ КНОПКИ ============ */

.ko-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 48px; padding: 12px 20px;
  font-family: var(--font-text); font-weight: 600; font-size: 15px;
  line-height: 1.2; text-align: center; text-decoration: none;
  border: var(--border-2) solid var(--ko-line); cursor: pointer;
}
.ko-btn--primary{ background: var(--ko-brand); color: var(--ko-paper); border-color: var(--ko-brand); } /* белый текст на синем: 6.1:1 */
.ko-btn--primary:hover{ background: var(--ko-ink); color: var(--ko-paper); }
.ko-btn--secondary{ background: var(--ko-paper); color: var(--ko-ink); }
.ko-btn--secondary:hover{ background: var(--ko-ink); color: var(--ko-paper); }
.ko-btn:active{ background: var(--ko-ink); color: var(--ko-paper); }
.ko-btn[disabled], .ko-btn[aria-disabled="true"]{
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* Большая CTA — плакатная */
.ko-btn--big{
  border-width: var(--border-3); min-height: 56px; padding: 16px 28px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
}
.ko-btn--block{ display: flex; width: 100%; }

/* ============ ВЕРДИКТ-БЕЙДЖИ ============ */

.ko-badge{
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  border: var(--border-2) solid var(--ko-line); padding: 5px 9px 6px;
}
/* Имена модификаторов нейтральные: класс в исходном коде не должен читаться
   как квалификация компании — текст плашки задаёт разметка страницы.
   .ko-badge--scam оставлен как алиас для демонстрационных карточек. */
.ko-badge--alarm,
.ko-badge--scam{ background: var(--ko-danger); color: var(--ko-paper); } /* 5.4:1 */
.ko-badge--warn,
.ko-badge--sus{  background: var(--ko-warn);   color: var(--ko-paper); } /* 6.6:1 */
.ko-badge--safe,
.ko-badge--ok{   background: var(--ko-safe);   color: var(--ko-paper); } /* 6.2:1 */
.ko-badge--brand{ background: var(--ko-brand); color: var(--ko-paper); } /* 6.1:1 — сервисные плашки («Ответим в течение 15 минут») */

.tag-sample{
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: 2px dashed var(--ko-line); padding: 4px 8px; opacity: .8;
}

/* ============ КАРТОЧКА РАЗБОРА ============ */

.ko-cards{ display: grid; gap: var(--s-4); }

.ko-card{
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
  display: flex; flex-direction: column;
}
.ko-card--featured{ background: var(--ko-bg-alt); }

.ko-card-body{ padding: var(--s-4) var(--s-4) 18px; flex: 1; }
.ko-card-tags{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ko-card-date{
  font-size: 12px; font-weight: 500;
  margin-left: auto; white-space: nowrap;
}
.ko-card-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; line-height: 1.25; margin-top: 14px;
}
.ko-card-title a{ text-decoration: none; }
.ko-card-title a:hover{ box-shadow: inset 0 -8px 0 var(--ko-mark); }
.ko-card-excerpt{ margin-top: 10px; font-size: 15px; }

.ko-card-meta{
  border-top: var(--border-2) solid var(--ko-line);
  display: grid; grid-template-columns: 1fr 1fr;
}
.meta-cell{ padding: 10px var(--s-4) 12px; }
.meta-cell + .meta-cell{ border-left: var(--border-2) solid var(--ko-line); }
.meta-label{
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; opacity: .72;
}
.meta-value{ display: block; font-weight: 600; font-size: 16px; margin-top: 2px; }
.meta-value--alarm{ color: var(--ko-danger-text); }

.ko-card-link{
  display: block; text-decoration: none;
  border-top: var(--border-2) solid var(--ko-line);
  padding: var(--s-3) var(--s-4); font-weight: 600; font-size: 14px;
}
.ko-card-link:hover{ background: var(--ko-ink); color: var(--ko-paper); }

/* ============ ПЛИТКИ ЦИФР-ФАКТОВ ============ */

.facts{
  border: var(--border-3) solid var(--ko-line);
  display: grid; grid-template-columns: 1fr;
}
.fact{ padding: 14px var(--s-4); }
.fact + .fact{ border-top: var(--border-2) solid var(--ko-line); }
.fact-num{
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.fact-num--alarm{ color: var(--ko-brand); } /* крупные цифры — законное место акцентного синего */
.fact-label{ display: block; font-size: var(--fs-caption); font-weight: 500; margin-top: var(--s-1); }

/* ============ ФОРМА ПРОВЕРКИ ============ */

.check-form{
  display: flex; flex-direction: column;
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
  max-width: 640px;
}
.check-form input{
  font-size: 16px; background: var(--ko-paper); border: 0;
  padding: var(--s-4); width: 100%; min-height: 56px;
}
.check-form input::placeholder{ color: var(--ko-ink); opacity: .65; } /* эффективный контраст ≥5:1 на paper */
.check-form input:focus-visible{ outline-offset: -3px; }
.check-form button{
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--ko-brand); color: var(--ko-paper);
  border: 0; border-top: var(--border-3) solid var(--ko-line);
  padding: var(--s-4) 22px; min-height: 56px; cursor: pointer;
}
.check-form button:hover{ background: var(--ko-ink); color: var(--ko-paper); }

/* ============ ХЛЕБНЫЕ КРОШКИ ============ */

.breadcrumbs{ font-size: var(--fs-caption); }
.breadcrumbs ol{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.breadcrumbs a{ font-weight: 600; }
.breadcrumbs li + li::before{
  content: "→"; margin-right: var(--s-2); opacity: .6;
}
.breadcrumbs [aria-current="page"]{ font-weight: 500; opacity: .8; }

/* ============ ТЕГИ-РУБРИКИ ============ */

.tags{ display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; /* цель касания */
  border: var(--border-2) solid var(--ko-line); background: var(--ko-paper);
  padding: 6px 10px; text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tag:hover{ background: var(--ko-ink); color: var(--ko-paper); }
.tag[aria-current="page"]{ background: var(--ko-mist); }
.tag-count{ font-weight: 600; color: var(--ko-brand-text); }
.tag:hover .tag-count{ color: var(--ko-paper); }

/* ============ ПАГИНАЦИЯ ============ */

.pagination{ display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pagination a, .pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  border: var(--border-2) solid var(--ko-line);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.pagination a:hover{ background: var(--ko-ink); color: var(--ko-paper); }
.pagination [aria-current="page"]{ background: var(--ko-brand); color: var(--ko-paper); border-color: var(--ko-brand); font-weight: 600; }
.pagination .pagination-gap{ border: 0; min-width: auto; }

/* ============ СТАТЕЙНАЯ ТИПОГРАФИКА ============ */

.prose{ max-width: 68ch; }
.prose > * + *{ margin-top: var(--s-4); }

/* H2 в разборе — вопрос, как его задаёт пострадавший */
.prose h2{ margin-top: var(--s-7); max-width: 26ch; }
.prose h3{ margin-top: var(--s-6); }
.prose h2:first-child, .prose h3:first-child{ margin-top: 0; }

/* Лид «короткий ответ» — выделенный блок сразу после вопроса */
.lead-answer{
  font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500;
  border-left: 6px solid var(--ko-brand); padding-left: var(--s-4);
  max-width: 62ch;
}
.lead-answer b{ font-weight: 600; }

.prose ul, .prose ol{ padding-left: 0; list-style: none; }
.prose li{ position: relative; padding-left: 26px; }
.prose li + li{ margin-top: var(--s-2); }
.prose ul li::before{
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 9px; height: 9px;
  background: var(--ko-brand); border: 2px solid var(--ko-ink);
}
.prose ol{ counter-reset: prose-num; }
.prose ol li{ counter-increment: prose-num; padding-left: 34px; }
.prose ol li::before{
  content: counter(prose-num); position: absolute; left: 0; top: .12em;
  font-weight: 600; font-size: 14px;
  border: 2px solid var(--ko-ink); padding: 0 5px;
}

/* Цитата пострадавшего */
.victim-quote{
  border: var(--border-2) solid var(--ko-line); background: var(--ko-bg-alt);
  padding: var(--s-4) var(--s-4) 14px;
}
.victim-quote p{
  font-size: var(--fs-body); font-weight: 500; font-style: normal;
}
.victim-quote p + p{ margin-top: var(--s-2); }
.victim-quote footer{
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 2px dashed var(--ko-line);
  font-size: var(--fs-caption);
}
.victim-quote cite{ font-style: normal; font-weight: 600; }

/* Сноски */
.prose sup a{ text-decoration: none; font-weight: 600; color: var(--ko-brand-text); }
.footnotes{
  margin-top: var(--s-6); padding-top: var(--s-3);
  border-top: var(--border-2) solid var(--ko-line);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
}
.footnotes ol{ list-style: none; counter-reset: fn; }
.footnotes li{ counter-increment: fn; padding-left: 22px; position: relative; overflow-wrap: anywhere; }
.footnotes li + li{ margin-top: var(--s-1); }
.footnotes li::before{
  content: counter(fn) "."; position: absolute; left: 0;
  font-weight: 600; color: var(--ko-brand-text);
}

/* ============ ТАБЛИЦА ПРИЗНАКОВ СХЕМЫ ============ */

.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table{ min-width: 560px; }

.signs-table{
  width: 100%; border-collapse: collapse;
  border: var(--border-3) solid var(--ko-line);
  font-size: 15px; background: var(--ko-paper);
}
.signs-table caption{
  text-align: left; font-family: var(--font-display);
  font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3);
  padding-bottom: var(--s-3);
}
.signs-table thead th{
  background: var(--ko-mist); text-align: left;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 14px; border: var(--border-2) solid var(--ko-line);
}
.signs-table td,
.signs-table tbody th{
  padding: var(--s-3) 14px; border: var(--border-2) solid var(--ko-line);
  vertical-align: top;
}
/* Первая ячейка строки — th[scope="row"]: семантический заголовок, визуально обычная жирная ячейка */
.signs-table tbody th{
  background: var(--ko-paper); text-align: left;
  font-weight: 600; min-width: 120px;
}

/* ============ ШАГИ ВОЗВРАТА 1-2-3 ============ */

.steps ol{ list-style: none; display: grid; gap: 14px; }
.steps h3 + ol{ margin-top: var(--s-4); }
.step{
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start;
  border: var(--border-2) solid var(--ko-line); padding: 14px; background: var(--ko-paper);
}
.step-num{
  font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--ko-brand); border: var(--border-3) solid var(--ko-line);
  width: 56px; height: 56px; display: grid; place-items: center;
}
.step-title{ display: block; font-weight: 600; font-size: 16px; }
.step p{ margin-top: var(--s-1); font-size: 15px; overflow-wrap: anywhere; }

/* ============ ЧЕК-ЛИСТ ============ */

.checklist{ border: var(--border-3) solid var(--ko-line); background: var(--ko-paper); }
.checklist-head{
  background: var(--ko-ink); color: var(--ko-paper);
  padding: var(--s-3) var(--s-4);
  font-weight: 600; font-size: var(--fs-caption);
  letter-spacing: .12em; text-transform: uppercase;
}
.checklist ul{ list-style: none; }
.checklist li + li{ border-top: var(--border-2) solid var(--ko-line); }
.checklist label{
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 13px var(--s-4); font-size: 15px; cursor: pointer;
}
.checklist label:hover{ background: var(--ko-mist); }
.checklist-foot{
  border-top: var(--border-3) solid var(--ko-line); background: var(--ko-mist);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-caption); font-weight: 500;
}

/* Квадратный чекбокс — общий для чек-листов и форм */
.checkbox{
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
  cursor: pointer;
}
.checkbox:checked{
  background-color: var(--ko-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23FFFFFF' stroke-width='2.6'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}

/* ============ CTA-БЛОК КОНСУЛЬТАЦИИ (ПЛАКАТ) ============ */

.cta{
  border: var(--border-3) solid var(--ko-line);
  background: var(--ko-brand); color: var(--ko-paper);
  padding: var(--s-6) var(--s-5) var(--s-7);
}
.cta--full{ border-left: 0; border-right: 0; } /* вариант во всю ширину экрана */
.cta .ko-kicker::before{ border-color: var(--ko-paper); }
.cta h2{ font-weight: 700; margin-top: var(--s-3); }
.cta p{ margin-top: var(--s-3); max-width: 56ch; }
.cta-note{ font-size: var(--fs-caption); opacity: .85; }
.cta-grid{ display: grid; gap: var(--s-5); }
.cta .ko-btn--big{ background: var(--ko-paper); color: var(--ko-ink); }
.cta .ko-btn--big:hover{ background: var(--ko-ink); color: var(--ko-paper); }

/* ============ FAQ-АККОРДЕОН (без JS) ============ */

.faq{ display: grid; gap: var(--s-3); }
.faq details{ border: var(--border-3) solid var(--ko-line); background: var(--ko-paper); }
.faq summary{
  list-style: none; cursor: pointer;
  display: flex; gap: 14px; align-items: flex-start;
  padding: var(--s-4);
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; line-height: 1.35;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::before{
  content: "+"; flex: none;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: var(--border-3) solid var(--ko-line);
  font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--ko-brand); /* плакатный глиф от 26px — легальная роль сигнального, см. правило 5.2 */
}
.faq summary:hover::before{ background: var(--ko-mist); }
.faq details[open] summary::before{
  content: "–"; background: var(--ko-ink); color: var(--ko-paper);
}
.faq-answer{
  border-top: var(--border-2) solid var(--ko-line);
  padding: var(--s-4); font-size: 15px;
}
.faq-answer p + p{ margin-top: 10px; }

/* ============ ПРЕДУПРЕЖДАЮЩАЯ ПОЛОСА ============ */

/* Декоративный разделитель секций — штриховка дозированно, 1–2 на страницу */
.hazard{
  height: 16px;
  border-top: var(--border-3) solid var(--ko-line);
  border-bottom: var(--border-3) solid var(--ko-line);
  background: repeating-linear-gradient(-45deg, var(--ko-ink) 0 12px, var(--ko-brand) 12px 26px);
}

/* Полоса с текстом предупреждения */
.alert-bar{
  display: flex; align-items: stretch;
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
}
.alert-bar::before{
  content: ""; width: 22px; flex: none;
  border-right: var(--border-3) solid var(--ko-line);
  background: repeating-linear-gradient(-45deg, var(--ko-ink) 0 10px, var(--ko-danger) 10px 22px);
}
.alert-bar-body{ padding: var(--s-3) var(--s-4); font-size: 15px; }
.alert-bar-body b{ font-weight: 600; }
.alert-bar--sand{ background: var(--ko-mist); }

/* ============ ТАЙМЛАЙН ДВИЖЕНИЯ ДЕНЕГ ============ */

.trail{ list-style: none; display: flex; flex-direction: column; }
.trail-step{
  position: relative; flex: 1;
  border: var(--border-2) solid var(--ko-line); background: var(--ko-paper);
  padding: var(--s-3) 14px;
}
.trail-step + .trail-step{ margin-top: 36px; }
.trail-step + .trail-step::before{
  content: "↓"; position: absolute; top: -33px; left: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px;
  color: var(--ko-brand-text);
}
.trail-label{
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; opacity: .72;
}
.trail-node{ display: block; font-weight: 600; font-size: 16px; margin-top: 2px; }
.trail-note{ display: block; font-size: var(--fs-caption); margin-top: var(--s-1); }
.trail-step--lost{ background: var(--ko-mist); border-width: var(--border-3); }
.trail-step--lost .trail-node{ color: var(--ko-danger-text); }

/* ============ ЛИНЕЙНАЯ ШКАЛА РИСКА 0–100 ============ */

.risk{
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
  padding: 14px var(--s-4) var(--s-4);
}
.risk-head{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-1) var(--s-4);
}
.risk-title{
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.risk-num{
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1;
}
.risk-num small{ font-family: var(--font-text); font-weight: 600; font-size: 13px; }
.risk-track{
  position: relative; margin-top: 10px; height: 24px;
  border: var(--border-2) solid var(--ko-line); background: var(--ko-paper);
  --risk: 0%;
}
/* Уровень заполнения — модификаторами, чтобы не держать инлайн-стили в разметке.
   Добавляйте шаг по мере надобности: значение = ширина заливки .risk-fill. */
.risk-track--90{ --risk: 90%; }
.risk-track--92{ --risk: 92%; }
.risk-track--95{ --risk: 95%; }
/* Деления 25/50/75 поверх полосы */
.risk-track::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--ko-ink), var(--ko-ink)) 25% 0 / 2px 100%,
    linear-gradient(var(--ko-ink), var(--ko-ink)) 50% 0 / 2px 100%,
    linear-gradient(var(--ko-ink), var(--ko-ink)) 75% 0 / 2px 100%;
  background-repeat: no-repeat; opacity: .3;
}
.risk-fill{
  height: 100%; width: var(--risk, 50%);
  background: var(--ko-danger); border-right: var(--border-2) solid var(--ko-line);
}
.risk--high .risk-num{ color: var(--ko-danger-text); }
.risk--mid .risk-fill{ background: var(--ko-warn-plate); }
.risk--mid .risk-num{ color: var(--ko-warn); }
.risk--low .risk-fill{ background: var(--ko-safe); }
.risk--low .risk-num{ color: var(--ko-safe); }
.risk-labels{
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; opacity: .72;
}

/* ============ ПОЛЯ ФОРМ («ОПИСАТЬ СИТУАЦИЮ») ============ */

.form{ display: grid; gap: var(--s-5); max-width: 640px; }

.field{ display: grid; gap: 6px; }
.field-label{ font-weight: 600; font-size: 15px; }
.field-label .req{ color: var(--ko-danger-text); font-weight: 600; }
.field-hint{ font-size: var(--fs-caption); line-height: var(--lh-caption); opacity: .75; }

.input, .textarea, .select{
  width: 100%; min-height: 48px;
  border: var(--border-2) solid var(--ko-line); background: var(--ko-paper);
  padding: 12px 14px; font-size: 16px;
}
.input::placeholder, .textarea::placeholder{ color: var(--ko-ink); opacity: .65; } /* эффективный контраст ≥5:1 на paper */
.textarea{ min-height: 128px; resize: vertical; }
.select{
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5 8 11l5.5-5.5' fill='none' stroke='%2317212B' stroke-width='2.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}

/* Honeypot: поле-ловушка для спам-ботов (см. /form-handler.php).
   Убираем за пределы экрана, а не через display:none — часть ботов
   намеренно пропускает поля, скрытые display/visibility.
   Из дерева доступности контейнер убран через aria-hidden в разметке. */
.hp-field{
  position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Строка согласия с квадратным чекбоксом */
.field-consent{
  display: flex; gap: var(--s-3); align-items: center;
  min-height: 44px; /* цель касания */
  font-size: var(--fs-caption); line-height: var(--lh-caption); cursor: pointer;
}

/* Ошибка */
.field--error .input,
.field--error .textarea,
.field--error .select,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"]{
  border-color: var(--ko-danger-text); border-width: var(--border-3); padding: 11px 13px;
}
.field-error{
  display: flex; gap: 8px; align-items: baseline;
  color: var(--ko-danger-text); font-weight: 600; font-size: var(--fs-caption);
}
.field-error::before{
  content: "!"; flex: none;
  width: 16px; height: 16px; display: grid; place-items: center;
  background: var(--ko-danger); color: var(--ko-paper);
  border: 2px solid var(--ko-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1;
  transform: translateY(2px);
}

/* ============ ФУТЕР ============ */
/* Светлый подвал: бренд-строка → четыре узкие колонки ссылок →
   дисклеймер отдельным абзацем → строка копирайта. */

.site-footer{
  background: var(--ko-mist); color: var(--ko-ink);
  border-top: var(--border-3) solid var(--ko-line);
  padding: var(--s-7) 0 var(--s-5);
}
.footer-head{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-2) var(--s-5);
}
.footer-slogan{ font-size: var(--fs-caption); font-weight: 600; opacity: .8; }

.footer-cols{ display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.footer-col-title{
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ko-brand-text);
  margin-bottom: var(--s-3);
}
.footer-col nav{ display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col a{
  text-decoration: none; font-weight: 600; font-size: 14px; width: fit-content;
  border-bottom: 2px solid var(--ko-brand);
}
.footer-col a:hover{ color: var(--ko-brand-text); }
.footer-col a[aria-current="page"]{ border-bottom-color: var(--ko-ink); opacity: .75; }

.footer-disclaimer{
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--ko-line-faint);
  font-size: var(--fs-caption); line-height: 1.6;
  max-width: 82ch; opacity: .88;
}
.footer-bottom{
  margin-top: var(--s-4);
  font-size: 12px; letter-spacing: .04em; opacity: .75;
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
}

/* ============================================================
   ≥768px
   ============================================================ */
@media (min-width: 768px){

  .ko-section{ padding: var(--s-8) 0 var(--s-9); }
  .ko-section-head h2{ flex-basis: auto; }

  /* Шапка */
  .site-header{ padding-top: var(--s-5); }
  .logo{ font-size: 28px; }
  .nav-toggle-btn{ display: none; }
  .nav{ display: flex; }
  .nav-toggle-input:checked ~ .nav{ display: flex; }

  /* Форма проверки — в одну строку */
  .check-form{ flex-direction: row; }
  .check-form input{ flex: 1; }
  .check-form button{
    border-top: 0; border-left: var(--border-3) solid var(--ko-line);
    white-space: nowrap;
  }

  /* Плитки цифр — в ряд */
  .facts{ grid-template-columns: repeat(3, 1fr); }
  .fact + .fact{ border-top: 0; border-left: var(--border-2) solid var(--ko-line); }

  /* Карточки — две колонки, featured на всю ширину */
  .ko-cards{ grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .ko-card--featured{ grid-column: 1 / -1; flex-direction: row; }
  .ko-card--featured .ko-card-body{ flex: 1.35; border-right: var(--border-2) solid var(--ko-line); }
  .ko-card--featured .ko-card-side{ flex: 1; display: flex; flex-direction: column; }
  .ko-card--featured .ko-card-meta{ border-top: 0; flex: 1; grid-template-columns: 1fr; align-content: start; }
  .ko-card--featured .meta-cell + .meta-cell{ border-left: 0; border-top: var(--border-2) solid var(--ko-line); }
  .ko-card--featured .ko-card-link{ margin-top: auto; }

  /* CTA — кнопка справа */
  .cta{ padding: var(--s-7) var(--s-7) var(--s-8); }
  .cta-grid{ grid-template-columns: 1fr auto; align-items: center; gap: var(--s-7); }

  /* FAQ */
  .faq summary{ font-size: 19px; padding: var(--s-5); }
  .faq-answer{ padding: var(--s-5); }

  /* Таймлайн — горизонтальный */
  .trail{ flex-direction: row; align-items: stretch; }
  .trail-step + .trail-step{ margin-top: 0; margin-left: 38px; }
  .trail-step + .trail-step::before{
    content: "→"; top: 50%; left: -34px;
    transform: translateY(-50%); line-height: 1;
  }

  /* Футер: четыре узкие колонки */
  .footer-cols{ grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
}

/* ============================================================
   ≥1120px
   ============================================================ */
@media (min-width: 1120px){

  .ko-cards{ grid-template-columns: repeat(2, 1fr); }

  .fact-num, .risk-num{ letter-spacing: .005em; }
  .risk-num{ font-size: 32px; }

  .faq summary{ font-size: 20px; }
}