/* v2-hero.css — первый экран главной и блок «Как это работает».
   Заведён отдельным файлом: v2.css параллельно правит другая сессия.
   Подключается только из templates/v2/index.html, после v2.css.
   Своих цветов не вводит — работает на токенах :root из v2.css.
   Разбор по пунктам приёмки: B1 B2 B3 B4 B7 B8 B13. */

/* ── B1. Заголовок первого экрана ────────────────────────────
   .page-head центрировал h1 по контейнеру, но .page-head h1 снимал
   max-width. Строка растягивалась на 1072 px, ломалась в случайном
   месте и композиция читалась как левый флаг. Даём заголовку
   собственную меру и не рвём термин «152-ФЗ за 30 секунд». */
.hero h1{
  max-width:20ch;
  margin-inline:auto;
  text-wrap:balance;
}
.hero-nowrap{white-space:nowrap}
.hero .lead{max-width:56ch;margin-inline:auto}
.hero .chip{margin-bottom:1.25rem}

/* Форма и подсказка живут на той же центральной оси. */
.hero .form-row{margin-inline:auto}

@media(max-width:560px){
  /* На 375px «152-ФЗ за 30 секунд» одной строкой не помещается —
     nowrap сняли бы горизонтальный скролл ценой обрезки. */
  .hero-nowrap{white-space:normal}
  .hero h1{max-width:none}
}

/* ── B2. Полоса фактов под формой ────────────────────────────
   Была .grid.grid-3 с .cell: на тёмной секции .cell красился в #17171a —
   три чёрных квадрата на чёрном фоне, текст в них терялся, а сама полоса
   лежала в отдельном .wrap и уезжала влево от центрированного заголовка.
   Теперь — строка без карточек: цифра акцентом, подпись читаемым muted. */
.hero-stats{
  list-style:none;margin:3rem auto 0;padding:2rem 0 0;
  border-top:1px solid var(--rule-dark);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  max-width:960px;text-align:center;
}
.hero-stats li{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.hero-stat-num{
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;letter-spacing:-.03em;
  color:#6ab7f5;
}
.hero-stat-cap{
  font-size:.875rem;line-height:1.4;color:var(--on-dark);opacity:.78;
  max-width:22ch;
}
@media(max-width:700px){
  .hero-stats{grid-template-columns:1fr;gap:1.25rem;margin-top:2rem;padding-top:1.5rem}
  .hero-stats li{flex-direction:row;gap:.875rem;align-items:baseline;text-align:left}
  /* Колонка цифр фиксированной ширины — самая длинная из них «01.09.2025». */
  .hero-stat-num{font-size:1.375rem;flex:0 0 auto;min-width:6.75rem}
  .hero-stat-cap{max-width:none}
}

/* ── B3. Блок согласий ───────────────────────────────────────
   Текст согласия юридически значим и не сокращён: в строке с чекбоксом
   видно начало той же фразы, полный текст раскрывается кнопкой рядом —
   до отметки галочки. Сам блок отделён от оффера рамкой, чтобы не
   читаться продолжением обещаний сервиса. */
.consent-box{
  margin:1.5rem auto 0;max-width:56ch;text-align:left;
  border:1px solid var(--rule-dark);border-radius:12px;
  padding:1rem 1.125rem;
}
.consent-box .consent{margin:0;max-width:none}
.consent-box .consent + .consent,
.consent-box .consent-full + .consent{
  margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--rule-dark);
}
.consent-full{margin:.625rem 0 0 1.75rem}
.consent-full > summary{
  list-style:none;cursor:pointer;display:inline-block;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-muted);
  border-bottom:1px dotted var(--rule-dark);padding-bottom:.125rem;
}
.consent-full > summary::-webkit-details-marker{display:none}
.consent-full > summary::after{content:" +";font-weight:600}
.consent-full[open] > summary::after{content:" –"}
.consent-full > summary:hover{color:var(--on-dark)}
.consent-full p{
  margin:.75rem 0 0;font-size:.8125rem;line-height:1.55;
  color:var(--on-dark-muted);max-width:none;
}
.consent-full a{color:var(--on-dark);text-decoration:underline;text-underline-offset:.15em}

/* ── F2. Блок согласий по горизонтали ────────────────────────
   Было: два согласия друг под другом в колонке 56ch — узкая простыня
   под самым оффером. Текст юридически значим и не сокращён: меняется
   только раскладка. На ширине от 760px обязательное согласие и раскрытие
   полного текста занимают левую колонку, необязательное маркетинговое —
   правую, разделитель между ними вертикальный вместо горизонтального.
   Блок становится шире и ниже почти вдвое; на телефоне остаётся столбцом. */
@media(min-width:760px){
  .consent-box{
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:1.5rem;max-width:76ch;padding:.875rem 1.125rem;
  }
  .consent-box > .consent:first-child{grid-column:1;grid-row:1;margin:0}
  .consent-box > .consent-full{grid-column:1;grid-row:2;margin:.5rem 0 0 1.875rem}
  .consent-box > .consent:last-child{
    grid-column:2;grid-row:1 / span 2;margin:0;
    padding:0 0 0 1.5rem;border-top:0;border-left:1px solid var(--rule-dark);
  }
  /* Полный текст раскрывается внутри левой колонки и не должен растягивать
     сетку: колонка узкая, строка держится в её ширине. */
  .consent-full p{font-size:.75rem}
}
/* Между блоком согласий и следующим за ним предупреждением про чужие сайты
   нужен воздух: раньше они слипались в одну простыню. */
.hero form > .hint{margin-top:1.25rem}

/* Подсветка галочки при попытке отправить форму без согласия.
   Классы вешает скрипт в index.html; их правила жили в styles.css,
   который в тему v2 не подключён, — тут эквивалент на токенах v2. */
.consent-hint{border-radius:8px;animation:consentPulse 1.8s ease-in-out infinite}
@keyframes consentPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(11,132,224,0)}
  50%{box-shadow:0 0 0 4px rgba(11,132,224,.28)}
}
.consent-shake{
  border-radius:8px;box-shadow:0 0 0 2px rgba(239,68,68,.55);
  animation:consentShake .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes consentShake{
  10%,90%{transform:translate3d(-2px,0,0)}
  20%,80%{transform:translate3d(3px,0,0)}
  30%,50%,70%{transform:translate3d(-5px,0,0)}
  40%,60%{transform:translate3d(5px,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .consent-hint,.consent-shake{animation:none}
}

/* ── B4. «Как это работает» — путь клиента ───────────────────
   Было три равных карточки в сетке без порядка и без указания, что
   первый шаг бесплатный. Стало — нумерованная лента шагов: слева
   колонка номера и цены, справа содержание. Шаги читаются сверху вниз
   как маршрут, связь между ними держит вертикальная линия. */
.flow{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:none}
.flow-step{
  position:relative;
  padding:2rem 0 2rem 0;
  border-top:1px solid var(--rule-dark);
}
.flow-step:last-child{border-bottom:1px solid var(--rule-dark)}
.flow-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}
.flow-step .step-num{color:var(--on-dark-muted)}
.flow-step h3{margin-bottom:.5rem}
.flow-body > :last-child{margin-bottom:0}
.flow-step p{color:var(--on-dark-muted);max-width:62ch}
/* Бесплатный шаг — единственный акцентный: замечание «не указано, что
   скан бесплатный». Отмечаем и чипом, и заливкой строки. */
.chip-free{border-color:#6ab7f5;color:#6ab7f5}
/* Отрицательный margin — чтобы заливка выступала за колонки, но сам шаг
   стоял на той же сетке, что остальные, и номера не сбивались вправо. */
.flow-free{
  background:rgba(11,132,224,.09);border-radius:12px;
  margin-inline:-1.5rem;padding-inline:1.5rem;border-top-color:transparent;
}
.flow-free h3{color:#fff}
/* Итог шага — что человек получает на руки. Раньше этого разреза не было
   вовсе, и все три карточки читались как описание процесса, а не результата. */
.flow-out{margin-bottom:0;font-size:.9375rem}
.flow-out-label{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);opacity:.6;margin-right:.5rem;
}

@media(min-width:860px){
  /* На десктопе номер и цена уходят в левую колонку — маршрут читается
     одной вертикалью, а содержание не прыгает по ширине. */
  .flow-step{display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:start}
  .flow-head{flex-direction:column;align-items:flex-start;gap:.625rem;margin-bottom:0}
}
@media(max-width:560px){
  .flow-free{padding-inline:1rem}
  .flow-step{padding-block:1.5rem}
}

/* ── B8. График динамики балла в шаге «Мониторинг» ───────────
   Партиал v2/_score_chart.html: разметка и числа перенесены из кейса
   /kejsy/doshel-do-79-i-spolz. Внутри SVG свои цвета и белая заглушка
   разрыва оси, поэтому подложка обязана быть светлой. */
.flow-figure{margin:1.5rem 0 0}
.score-chart{
  background:var(--paper);border-radius:12px;padding:1rem;
}
.score-chart-scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.score-chart svg{display:block;width:100%;height:auto}
/* Подсказка про свайп нужна только там, где график шире контейнера. */
.score-chart .swipe-hint{display:none;margin:.5rem 0 0;font-size:.75rem;color:var(--muted)}
.flow-figure figcaption{margin-top:.75rem;color:var(--on-dark-muted)}
@media(max-width:700px){
  /* На 375px подписи оси нечитаемы при ширине контейнера — даём графику
     собственную минимальную ширину и горизонтальный скролл. */
  .score-chart-scroller{margin:0 -.5rem}
  .score-chart svg{min-width:660px}
  .score-chart .swipe-hint{display:block}
}

/* ── B13. Ховер кнопок ───────────────────────────────────────
   .btn:hover в v2.css красит текст в var(--on-dark) — светлый. Для
   .btn-ghost на светлой секции это светлый текст на прозрачном фоне:
   надпись «Согласие для ГИС бесплатно» на ховере исчезала.
   Чиним предметно и проверяем оба фона: ghost на светлом остаётся
   тёмным, на тёмном — светлым; accent и базовая .btn не трогаются. */
.btn-ghost:hover,
.btn-ghost:focus-visible{color:var(--ink);background:rgba(14,14,16,.06);opacity:1}
.section-dark .btn-ghost:hover,
.section-dark .btn-ghost:focus-visible{
  color:var(--on-dark);background:rgba(242,242,240,.1);opacity:1;
}

/* Палитра графика из кейса. Цвета вынесены из SVG в CSS (в разметке цветов
   быть не должно), значения и геометрия не тронуты — это те же зелёный подъём,
   красный спад и жёлтые промежуточные точки, что и на странице кейса. */
.score-chart .s-a3a9bc{stroke:#a3a9bc}
.score-chart .f-a3a9bc{fill:#a3a9bc}
.score-chart .s-10b981{stroke:#10b981}
.score-chart .f-10b981{fill:#10b981}
.score-chart .s-ef4444{stroke:#ef4444}
.score-chart .f-ffffff{fill:#ffffff}
.score-chart .s-60687f{stroke:#60687f}
.score-chart .f-60687f{fill:#60687f}
.score-chart .f-047857{fill:#047857}
.score-chart .f-ef4444{fill:#ef4444}
.score-chart .s-ffffff{stroke:#ffffff}
.score-chart .f-f59e0b{fill:#f59e0b}
.score-chart .f-b45309{fill:#b45309}
.score-chart .f-33394a{fill:#33394a}

/* Внутри .consent-box своя рамка у каждого согласия не нужна: контейнер уже
   обведён, и получалась «коробка в коробке» — два вложенных прямоугольника
   разной высоты, потому что тексты согласий разной длины. Внутри контейнера
   согласия плоские, разделяет их линия (правило выше). Снаружи — на экранах
   оформления, где согласие стоит одиноко, — рамка остаётся. */
.consent-box .consent{
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
}
.consent-box .consent + .consent{padding-top:.875rem}