/* ═══════════════════════════════════════════════════════════════
   ВТОРИЧНЫЕ СТРАНИЦЫ: продукт, образец, узел образцов, заглушка.
   Ни одного своего цвета и ни одной своей гарнитуры: всё из
   tokens.css и base.css. Здесь только раскладка блоков, которых
   на главной не было.
   ═══════════════════════════════════════════════════════════════ */

/* ── крошки ─────────────────────────────────────────────────── */
.crumbs{padding:var(--s3) var(--pad) 0;display:flex;gap:8px;flex-wrap:wrap;
  align-items:baseline;font-family:JBM,monospace;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)}
.crumbs a{color:var(--fg3);border-bottom:var(--hair) solid transparent}
.crumbs a:hover{color:var(--accent-text);border-bottom-color:currentColor}
.crumbs i{font-style:normal;opacity:.5}
.crumbs span[aria-current]{color:var(--fg)}

/* ── шапка страницы ─────────────────────────────────────────── */
.phead{padding-bottom:var(--s2)}
.head{padding:0 var(--pad) var(--s5)}
.head h1{font-size:clamp(30px,5vw,68px);margin:.16em 0 0;max-width:19ch;
  text-wrap:balance}
.head__row{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--s6);align-items:end;margin-top:var(--s4);padding-bottom:var(--s4);
  border-bottom:var(--hair) solid var(--rule)}

.acts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.acts--wide{margin-top:var(--s5);padding-top:var(--s4);
  border-top:var(--hair) solid var(--rule)}
.acts--wide .cta__note{flex:1;min-width:220px;max-width:46ch;margin:0}
.btn--gh{background:transparent;color:var(--fg);
  box-shadow:inset 0 0 0 var(--hair) var(--rule2)}
.btn--gh:hover{filter:none;background:var(--lit)}
.lnk{font-weight:600;font-size:15px;color:var(--fg);
  border-bottom:2px solid var(--accent);padding-bottom:2px}
.lnk:hover{color:var(--accent-text)}

/* ── показ листа ────────────────────────────────────────────── */
.showbox{padding:var(--s6) var(--pad) var(--s6);display:flex;
  flex-direction:column;align-items:center;gap:var(--s4)}
.showbox h2{font-size:clamp(20px,2.1vw,30px);align-self:flex-start;max-width:26ch}
.showsheet{max-width:100%}
.showfoot{display:flex;gap:var(--s4);align-items:flex-start;flex-wrap:wrap;
  width:100%;padding-top:var(--s3);border-top:var(--hair) solid var(--rule)}
.showfoot .tag{margin-top:0;max-width:36ch}
.cap{font-family:JBM,monospace;font-size:10px;line-height:1.7;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg3);max-width:60ch}
.showlink{align-self:flex-start}

/* ── обычная полоса текста ──────────────────────────────────── */
.sect{padding:var(--s6) var(--pad) var(--s6)}
.sect h2{font-size:clamp(23px,2.6vw,38px);max-width:24ch}
.sect__lead{margin-top:var(--s3);font-size:15.5px;line-height:1.55;
  color:var(--fg2);max-width:64ch}
.sect__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s6)}
.sect__g--one{grid-template-columns:minmax(0,72ch)}
.sect__main p{margin-top:var(--s3);font-size:16px;line-height:1.6;
  color:var(--fg2);max-width:60ch}
/* .src — метка источника для ./bin/check-facts, облик не меняет */

/* ── пары «ключ → значение» ─────────────────────────────────── */
.defs{margin-top:var(--s4);border-top:var(--hair) solid var(--rule2)}
.defs div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--s3);
  padding:13px 0;border-bottom:var(--hair) solid var(--rule);align-items:baseline}
.defs b{font-family:JBM,monospace;font-weight:600;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg)}
.defs span{font-size:14.5px;line-height:1.5;color:var(--fg2)}

/* ── четыре стадии ──────────────────────────────────────────── */
.stg{margin-top:var(--s4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4);border-top:var(--hair) solid var(--rule2)}
.stg__i{padding-top:var(--s3)}
.stg__i b{display:block;margin-top:9px;font-family:Unbounded,sans-serif;
  font-weight:600;font-size:16px;letter-spacing:-.02em;line-height:1.1;color:var(--fg)}
.stg__i p{margin-top:9px;font-size:14px;line-height:1.5;color:var(--fg2)}

/* ── цена ───────────────────────────────────────────────────── */
.prc{margin-top:var(--s4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);border-top:var(--hair) solid var(--rule2);padding-top:var(--s3)}
.prc__v{font-family:Unbounded,sans-serif;font-weight:600;
  font-size:clamp(22px,2.2vw,34px);letter-spacing:-.03em;line-height:1;
  margin:10px 0;color:var(--fg)}
.prc__i--ours{border-left:2px solid var(--accent);padding-left:var(--s3);
  margin-left:calc(var(--s3) * -1)}
.prc__d{font-size:14px;line-height:1.5;color:var(--fg2);max-width:46ch}

/* ── разбор решений ─────────────────────────────────────────── */
.why{margin-top:var(--s4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) var(--s6);border-top:var(--hair) solid var(--rule2);
  padding-top:var(--s4)}
.why b{display:block;font-family:Unbounded,sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-.025em;line-height:1.15;color:var(--fg);max-width:26ch}
.why p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--fg2);max-width:44ch}

/* ── ссылки дальше ──────────────────────────────────────────── */
.nxt{margin-top:var(--s4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4);border-top:var(--hair) solid var(--rule2)}
.nxt a{display:block;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule)}
.nxt a:hover{border-bottom-color:var(--accent)}
.nxt b{display:block;font-size:15px;font-weight:600;color:var(--fg)}
.nxt a p+p{margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--fg3)}
.nxt a:hover b{color:var(--accent-text)}

/* ── каталог двенадцати продуктов ───────────────────────────── */
.cat{margin-top:var(--s5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 var(--s5);border-top:var(--hair) solid var(--rule2)}
/* 🔴 07.09.2026: у продукта с образцом слева стоит его настоящий лист
   в миниатюре, у остальных — пустое поле той же высоты. Разницу между
   «показано» и «готовится» видно, а не читают. Значков нет: замок
   каркаса разрешает только формы словами (SKELETON §7). */
.cat a{display:grid;grid-template-columns:96px 34px minmax(0,1fr);gap:var(--s2);
  align-items:baseline;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule)}
.cat__sheet{grid-row:span 2;align-self:start;width:96px;height:74px;overflow:hidden;
  position:relative;background:transparent}
/* лист вписан целиком и посажен по центру поля: пропорции у деки,
   полосы и страницы разные, общий множитель их не выравнивает */
.cat__sheet{display:flex;align-items:center;justify-content:center}
.cat__sheet .sheet{position:static;flex:0 0 auto}
.cat a:hover .cat__sheet{outline:1px solid var(--accent);outline-offset:2px}
.cat__sheet--soon{display:flex;align-items:center;justify-content:center;
  border:var(--hair) dashed var(--rule2);text-align:center}
.cat__sheet--soon span{font-family:JBM,monospace;font-size:9px;line-height:1.4;
  letter-spacing:.07em;text-transform:uppercase;color:var(--fg3);max-width:11ch}
.cat a:hover{border-bottom-color:var(--accent)}
.cat b{display:block;font-size:15.5px;font-weight:600;color:var(--fg)}
.cat a:hover b{color:var(--accent-text)}
.cat__d{margin-top:6px;font-size:13px;line-height:1.4;color:var(--fg3)}
.cat .u{grid-row:span 2;grid-column:2}

/* ── сетка шести образцов ───────────────────────────────────── */
.g6{margin-top:var(--s5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s6) var(--s5)}
.g6__i{display:flex;flex-direction:column;gap:var(--s2)}
.g6__i .showsheet{margin-bottom:var(--s2)}
.g6__i b{font-size:16px;font-weight:600;color:var(--fg)}
.g6__i:hover b{color:var(--accent-text)}
.g6__note{margin-top:var(--s5);padding-top:var(--s3);
  border-top:var(--hair) solid var(--rule)}

/* ── правовой документ ──────────────────────────────────────── */
.doc{max-width:78ch}
.doc h2{font-family:Unbounded,sans-serif;font-size:19px;letter-spacing:-.02em;
  margin-top:var(--s5);max-width:34ch}
.doc p,.doc li{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--fg2)}
.doc ul{margin-top:12px;padding-left:20px}
.doc li{margin-top:7px}

/* ── 1024–1200 ──────────────────────────────────────────────── */
@media (max-width:1200px) and (min-width:901px){
  .stg{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}
  .nxt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── телефон ────────────────────────────────────────────────── */
@media (max-width:900px){
  .head h1{font-size:clamp(27px,7.6vw,68px)}
  .head__row{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .sect__g{grid-template-columns:1fr;gap:var(--s5)}
  .defs div{grid-template-columns:1fr;gap:5px}
  .stg,.nxt,.cat,.g6,.prc,.why{grid-template-columns:1fr}
  .prc__i--ours{margin-left:0}
  .showbox{padding:var(--s5) var(--pad)}
  .showfoot{gap:var(--s2);flex-direction:column}
  /* подпись под кнопками уходит на свою строку: рядом с ними
     она сжималась в колонку в три слова */
  .acts--wide .cta__note{flex:1 0 100%;min-width:0;max-width:none}
  /* лист на телефоне живёт по своей шкале: иначе он шире экрана */
  .showsheet .sheet{--s:var(--ms) !important}
}

/* ── вырезка листа 1:1 и оригинал-макет ─────────────────────── */
.sub{font-family:JBM,monospace;font-weight:600;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg);margin-top:var(--s5)}
.cut2{margin-top:var(--s4)}
.cut2__win{position:relative;overflow:hidden;background:var(--w-bg);
  width:min(100%,calc((var(--cw) + var(--x)) * 1px));
  height:calc(var(--wh) * 1px);box-shadow:var(--sheet-shadow)}
.cut2__win .page{position:absolute;transform:none;
  left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);
  width:calc(var(--cw) * 1px);height:calc(var(--cvh) * 1px)}
.cut2__win::after{content:"";position:absolute;right:0;top:0;bottom:0;width:54px;
  background:linear-gradient(to left,var(--w-bg) 20%,transparent);pointer-events:none}
.cut2 .cap,.mockwrap .cap{margin-top:var(--s2)}
.mockwrap{margin-top:var(--s5)}
.mock{background:var(--w-bg)}


/* ---------- заголовки внутри макета документа ---------- */
/* 🔴 Это текст нарисованного листа, а не структура страницы: читалка
   с экрана не должна строить по ним оглавление. Были h3/h4 и давали
   перескок уровней (h1 → h3 на главной, h2 → h4 на отчёте).
   Вид не меняется — меняется смысл для того, кто слушает страницу. */
.d-h3{font:inherit;margin:0}
.d-h4{font:inherit;margin:0}
