/* ═══════════════════════════════════════════════════════════════════════
   Лендинг — СЕКЦИИ 02–10. У каждой свой тип объекта: три подряд
   одинаковых блока = низ страницы не читается (диагноз в RESEARCH.md).
   Оболочка (шапка, обложка, подвал, кнопки) — в landing.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 02. БОЛЬ — ТЕКСТОВОЕ ПОЛОТНО ══════════════════════════════════════
   Пять фраз написаны как один связный ход, поэтому это один абзац
   крупного набора, а не пять карточек: рамка тут не добавляет смысла. */
.pain .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.pain .cols{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:56px; align-items:start; }
.pain .canvas{
  font-size:clamp(18px,1.55vw,21px); line-height:1.55; color:var(--text-muted);
  max-width:31em;   /* ≈ 62 знака в строке */
}
.pain .canvas b{ font-weight:500; color:var(--text); }
.pain .aside{ display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.pain .aside .m{ font-size:14px; color:var(--text-faint); }
.pain .aside .val{ font-family:var(--font-mono); font-size:15px; color:var(--text); }
.verdict{
  margin-top:44px; padding-top:26px;
  border-top:1px solid var(--border);
  font-size:18px; line-height:1.55; color:var(--text); max-width:44em;
}

/* ═══ 03. РАЗБОР БАЗЫ — СЦЕНА ПОЛОСОЙ ВО ВСЮ МЕРУ ═══════════════════════
   Второй вид «сцены»: у обложки она в колонке, здесь — на всю меру.
   Своё кольцо у полосы движка уже есть. */
.recognize{ border-top:1px solid var(--border); }
.recognize .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.recognize .lead{ max-width:46em; margin-bottom:44px; }

/* ═══ 04. КАК ЭТО РАБОТАЕТ — ГОРИЗОНТАЛЬНЫЙ РЕЛЬС ═══════════════════════
   Номера честные: это настоящая последовательность. Засечка на линейке
   вместо кружка с цифрой — прибор, а не бейдж. */
.how .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.rail{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--border); }
.rail li{ position:relative; padding:28px 30px 0 0; }
.rail li::before{ content:''; position:absolute; left:0; top:-10px; width:1px; height:10px; background:var(--text); }
.rail .n{ display:block; margin-bottom:14px; }
.rail h3{ margin-bottom:8px; }
.rail p{ font-size:16px; line-height:1.55; color:var(--text-muted); }
.how .after{ margin-top:44px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.how .after .note{ margin:0; }

/* ═══ 05. ОДНА БАЗА — ДВЕ ЗАДАЧИ — СХЕМА-РАЗВИЛКА ═══════════════════════
   Не две карточки рядом: полоса базы и настоящая развилка линиями.
   Форма буквально повторяет заголовок. */
.jobs{ border-top:1px solid var(--border); }
.jobs .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.fork-base{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  min-height:58px; padding:14px 20px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
}
.fork-base .what{ font-size:15px; color:var(--text-muted); }
/* Ветви приходят на линейку, с которой начинаются задачи: без опоры
   концы висели в воздухе и читались обломком рамки. */
.fork-link{ position:relative; height:40px; }
.fork-link i{ position:absolute; background:var(--border); display:block; }
.fork-link .v0{ left:50%; top:0; width:1px; height:20px; }
/* При колонке (W−52)/2 середина ветви = 25% − 13px. */
.fork-link .h{ left:calc(25% - 13px); right:calc(25% - 13px); top:20px; height:1px; }
.fork-link .v1{ left:calc(25% - 13px); top:20px; width:1px; height:20px; }
.fork-link .v2{ right:calc(25% - 13px); top:20px; width:1px; height:20px; }
/* Правило у КАЖДОЙ ветви своё, зазор 52px: сплошная линейка на всю ширину
   замыкала развилку в прямоугольник и читалась рамкой, а не схемой. */
.branches{ display:grid; grid-template-columns:1fr 1fr; column-gap:52px; }
.branch{ position:relative; padding-top:30px; border-top:1px solid var(--border); }
.branch h3{ font-size:20px; margin-bottom:10px; }
.branch p{ font-size:16px; line-height:1.6; color:var(--text-muted); max-width:34em; }
.ask{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.ask span{
  display:block; padding:9px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:14px; color:var(--text-muted); background:var(--bg);
}

/* ═══ 06. ЧЕСТНОСТЬ — УТВЕРЖДЕНИЯ + ТАБЛИЦА-ДОКАЗАТЕЛЬСТВО ══════════════
   Единственная плотная таблица на странице. Левая колонка узкая намеренно:
   таблице нужно ≈780px, иначе «нужна проверка» налезает на «в базе
   не найдено» — поймано съёмкой на 1440. */
.honesty{ border-top:1px solid var(--border); }
.honesty .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.honesty .cols{ display:grid; grid-template-columns:minmax(0,392px) minmax(0,1fr); gap:56px; align-items:start; }
.claims{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:26px; }
.claims li{ display:grid; grid-template-columns:38px minmax(0,1fr); align-items:start; }
.claims h3{ margin-bottom:7px; }
.claims p{ font-size:16px; line-height:1.6; color:var(--text-muted); max-width:32em; }
.claims .n{ padding-top:5px; }

.legend{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.legend div{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-muted); }
.legend .sw{ width:26px; height:16px; border:1px solid var(--border); border-radius:var(--r-sm); flex:none; margin-top:2px; }
.legend .sw.found{ background:var(--accent-soft); border-color:var(--accent-line); }
.legend .sw.miss{ background:repeating-linear-gradient(135deg,#fff 0 5px,var(--hatch) 5px 10px); }

.table{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.tr{ display:grid; grid-template-columns:minmax(0,184px) minmax(0,186px) minmax(0,1fr) 172px; align-items:center; }
.tr > div{ padding:0 16px; }
.thead{ min-height:38px; background:var(--surface); border-bottom:1px solid var(--border); align-items:center; }
.thead > div{ padding-top:12px; padding-bottom:12px; }
.trow{ min-height:78px; border-bottom:1px solid var(--border); transition:background-color var(--dur-fast) var(--ease); }
.trow:last-of-type{ border-bottom:0; }
.trow:hover{ background:var(--row-hover); }
.tr .field{ font-size:15px; color:var(--text); }
.tr .val-ok{ font-size:15px; font-weight:500; color:var(--accent); white-space:nowrap; }
.tr .val-miss{
  font-size:14px; color:var(--text); white-space:nowrap;
  display:inline-block; padding:5px 10px; border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:repeating-linear-gradient(135deg,#fff 0 5px,var(--hatch) 5px 10px);
}
.tr .src{ font-size:12.5px; color:var(--text); }
.tr .src.none{ color:var(--text-faint); }
/* NB: класс НЕ .pill — .pill занят пилюлей движка сцен (LOCK §4). */
.stpill{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 11px; border-radius:var(--r-pill);
  font-size:12px; white-space:nowrap;
}
.stpill.ok{ border:1px solid var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.stpill.ok .d{ width:5px; height:5px; border-radius:var(--r-pill); background:var(--accent); flex:none; }
.stpill.check{ border:1px solid var(--text); color:var(--text); background:var(--bg); }
/* Квадрат без скругления намеренно: острая форма против круглой точки —
   состояние читается формой, а не только цветом. */
.stpill.check .d{ width:5px; height:5px; border:1px solid var(--text); flex:none; }
.tfoot{ min-height:46px; display:flex; align-items:center; padding:12px 20px; background:var(--surface); border-top:1px solid var(--border); }

/* ═══ 07. ЦЕНЫ — СТРОКИ ПОЛОСЫ ══════════════════════════════════════════
   Ни одной плитки, ни одной тени. Единственное место с цифрой 40px:
   дисплей 56px из «Полосы» ломает лестницу основы (h1 48 / h2 34). */
.pricing{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pricing .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.pricing .sec-head{ border-bottom-color:var(--border-strong); }
.pricing .lead{ margin-bottom:40px; max-width:44em; }

.rows{ border-top:1px solid var(--border-strong); }
.prow{
  display:grid;
  grid-template-columns:74px minmax(0,190px) minmax(0,250px) minmax(0,1fr) 40px;
  grid-template-areas:'idx price name desc go';
  align-items:baseline;
  padding:26px 20px 28px; margin:0 -20px;
  border-bottom:1px solid var(--border-strong);
  transition:background-color var(--dur-base) var(--ease), border-bottom-color var(--dur-base) var(--ease);
}
.prow:hover{ background:var(--bg); border-bottom-color:var(--icon-faint); }
.prow .idx{ grid-area:idx; color:var(--num-faint); transition:color var(--dur-base) var(--ease); }
.prow:hover .idx{ color:var(--text); }
.prow .price{
  grid-area:price;
  font-size:clamp(30px,3.4vw,40px); font-weight:500; color:var(--text);
  line-height:1; letter-spacing:-.022em; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.prow:hover .price{ color:var(--accent); }
.prow .price small{ font-size:16px; color:var(--text-faint); font-weight:400; letter-spacing:0; }
.prow .price .rur{ font-size:.78em; margin-left:6px; }
.prow .name{ grid-area:name; font-size:17px; font-weight:500; }
.prow .desc{ grid-area:desc; font-size:16px; color:var(--text-muted); }
.prow .go{ grid-area:go; justify-self:end; align-self:center; color:var(--icon-faint); transition:color var(--dur-fast) var(--ease); }
.prow:hover .go{ color:var(--text); }

.extras{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:26px 0 0; font-size:16px; color:var(--text-muted); }
.extras .mono{ color:var(--text); }
.extras .sep{ color:var(--icon-faint); }
.guarantee{
  margin-top:22px;
  display:flex; align-items:center; gap:12px;
  min-height:60px; padding:14px 20px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--bg);
  font-size:16px;
}
.guarantee .sq{ width:18px; height:18px; border:1px solid var(--accent); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex:none; }

/* ═══ 08. КАК МЕНЯЕТСЯ РАБОТА — ДИПТИХ РАЗНОЙ ПЛОТНОСТИ ═════════════════
   Слева тесно и серо, справа просторно и в цвет текста. Разницу видно
   раньше, чем прочитаны слова. */
.change{ border-top:1px solid var(--border); }
.change .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.diptych{ display:grid; grid-template-columns:5fr 7fr; align-items:stretch; }
/* Итоговые строки прижаты к низу и стоят на одной линии — иначе две линейки
   на разной высоте читаются оплошностью, а не разной плотностью. */
.side{ padding-right:52px; display:flex; flex-direction:column; }
.side + .side{ padding-right:0; padding-left:52px; border-left:1px solid var(--border); }
.side .cap{ margin-bottom:18px; display:block; }
.side .metric{ margin-top:auto; }
.was p{ font-size:16px; line-height:1.45; color:var(--text-muted); max-width:26em; }
.now p{ font-size:18px; line-height:1.65; color:var(--text); max-width:30em; }
.now .cap{ color:var(--accent); }
.metric{ margin-top:26px; padding-top:16px; border-top:1px solid var(--border); font-size:16px; color:var(--text-faint); }
.now .metric{ color:var(--text); }
.now .metric .mono{ font-size:19px; }

/* ═══ 09. ДАННЫЕ И ДОСТУП — ВРЕЗКА НА АЛЬТ-ПОВЕРХНОСТИ ══════════════════
   Юридический текст: узкая мера, никакой графики, читается как
   примечание в договоре. */
.privacy{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.privacy .wrap{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
.privacy .sec-head{ border-bottom-color:var(--border-strong); }
.privacy .cols{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:56px; align-items:start; }
.privacy h2{ margin-bottom:0; }
.inset{ display:flex; flex-direction:column; gap:18px; max-width:38em; }
.inset p{ font-size:17px; line-height:1.65; color:var(--text-muted); }
.inset p b{ font-weight:500; color:var(--text); }

/* ═══ 10. ФИНАЛЬНЫЙ ПРИЗЫВ — строка, а не тёмная плашка ═════════════════
   Тёмных секций на странице нет ни одной: чередование светлых и тёмных
   полос прямо запрещено reference lock. */
.final .wrap{ padding-top:76px; padding-bottom:84px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px; align-items:end; }
.final h2{ max-width:16ch; }
.final .lead{ max-width:40em; }
.final .act{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.final .btn-primary{ height:52px; padding:0 26px; font-size:16px; }

/* ═══ АДАПТИВ СЕКЦИЙ ════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .honesty .cols{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:40px; }
  .tr{ grid-template-columns:minmax(0,150px) minmax(0,152px) minmax(0,1fr) 158px; }
  .tr .src{ font-size:12px; }
}
@media (max-width:1024px){
  .pain .canvas, .branch p, .claims p, .was p, .now p{ max-width:40em; }
  .pain .cols{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .pain .aside{ flex-direction:row; flex-wrap:wrap; gap:20px; padding-top:0; }
  .rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail li{ padding-right:36px; }
  .rail li:nth-child(n+3){ margin-top:30px; padding-top:28px; border-top:1px solid var(--border); }
  .rail li:nth-child(n+3)::before{ top:-1px; }
  .branches{ column-gap:36px; }
  .honesty .cols{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .privacy .cols{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .prow{ grid-template-columns:64px minmax(0,170px) minmax(0,1fr); grid-template-areas:'idx price name' '. desc desc'; row-gap:8px; }
  .prow .go{ display:none; }
  .side{ padding-right:34px; }
  .side + .side{ padding-left:34px; }
  .final .wrap{ grid-template-columns:minmax(0,1fr); gap:36px; align-items:start; }
}
@media (max-width:640px){
  .rail{ grid-template-columns:minmax(0,1fr); }
  .rail li{ padding-right:0; }
  .rail li + li{ margin-top:26px; padding-top:26px; border-top:1px solid var(--border); }
  .rail li + li::before{ top:-1px; }

  .fork-link{ display:none; }
  .branches{ grid-template-columns:minmax(0,1fr); column-gap:0; }
  .branch{ padding-top:26px; margin-top:26px; }

  .claims li{ grid-template-columns:minmax(0,1fr); }
  .claims .n{ padding-top:0; margin-bottom:9px; }

  /* Таблица честности на узком экране: строки становятся карточками данных,
     шапка не нужна — каждое поле подписывает себя само через data-l.
     align-items:center из .tr в flex-column центрировал бы по горизонтали,
     а левый якорь — закон направления. */
  .table .thead{ display:none; }
  .tr{ display:block; }
  .tr > div{ padding:0; }
  .trow{ padding:18px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .trow > div::before{
    content:attr(data-l); display:block; margin-bottom:6px;
    font-family:var(--font-mono); font-size:11.5px;
    letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint);
  }

  .prow{ grid-template-columns:44px minmax(0,1fr); grid-template-areas:'idx price' '. name' '. desc'; row-gap:6px; padding:22px 16px 24px; margin:0 -16px; }
  .prow .name{ margin-top:6px; }
  .extras{ flex-direction:column; align-items:flex-start; gap:8px; }
  .extras .sep{ display:none; }

  .diptych{ grid-template-columns:minmax(0,1fr); }
  .side{ padding:0; }
  .side + .side{ padding:34px 0 0; margin-top:34px; border-left:0; border-top:1px solid var(--border); }

  .final .wrap{ padding-top:48px; padding-bottom:56px; }
  .final .act{ gap:14px; }
  .final .btn-primary{ width:100%; }
}

/* ═══ ДОСТУПНОСТЬ ДВИЖЕНИЯ ══════════════════════════════════════════════
   Страница гасит длительности. ОБЕ СЦЕНЫ ИСКЛЮЧЕНЫ НАМЕРЕННО: их движки
   в этом режиме рисуют осмысленный ФИНАЛЬНЫЙ КАДР, а не обрывают мультик
   на полпути. Своё правило у них лучше общего. */
@media (prefers-reduced-motion: reduce){
  *:not(.dm-scene):not(.dm-scene *):not(.scene-chaos):not(.scene-chaos *){
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
}