/* PPKLink — витрина. СЕКЦИИ светлой части страницы: первый экран, бенто,
   конфигуратор, таймлайн и демонстрация, состав, надёжность, доказательства,
   внедрение, вопросы, форма, подвал, липкая панель телефона.
   Тёмный «приборный отсек» и видео — в device.css. */

/* ─── ПЕРВЫЙ ЭКРАН: текст слева, киоск справа ───────────────────── */
.hero{padding:var(--sec-node) 0 0}
/* ⚠ minmax(0,…), а не 1fr: колонка 1fr не может стать уже своего содержимого,
   и широкий снимок дважды ломал раскладку. */
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.hero-tx{min-width:0}
.hero h1{font-size:var(--fs-display);line-height:1.06;letter-spacing:-.028em;font-weight:700;
  max-width:22ch;margin:0 0 18px}
.hero .lead{margin:0;max-width:60ch}
/* первая строка экрана — что это за продукт; моноширинным, как метки разделов */
.kicker{margin:0 0 16px;font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-text);font-weight:500}
/* что делает программа — пять шагов в ряд, пять равных колонок: в русском
   плашки-«пилюли» не помещались в строку и пятая уезжала вниз; текст в колонке
   может занять две строки, номер держится первой. На телефоне — столбиком. */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 16px;margin:40px 0 0;padding:0;
  list-style:none;font-size:14px;line-height:1.3;color:var(--text)}
.flow li{display:flex;align-items:flex-start;gap:10px;position:relative;padding-left:22px}
.flow li:first-child{padding-left:0}
.flow li+li::before{content:"→";position:absolute;left:0;top:2px;color:var(--faint)}
.flow i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:11px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-weight:600;flex:none;margin-top:-2px}
.hero .cta{margin-top:28px;margin-bottom:0}
/* Киоск: тёмный безель — как панель оператора на схеме и на фото линии.
   Внизу под экраном — приборная строка с показателями смены. Числа СТАТИЧНЫ и
   равны снимку: прежние бегущие счётчики расходились со скриншотом рядом. */
.kiosk{margin:0;background:#25272D;border-radius:22px;padding:14px 14px 12px;
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.06);position:relative}
.kiosk-screen{border-radius:10px;overflow:hidden;background:#F5F5F7}
/* подпись под кнопками: снимает вопрос «а что дальше» до отправки формы */
.cta-note{margin:14px 0 0;font-size:13.5px;color:var(--faint);max-width:52ch}
/* полоса призыва после доказательств: сдержанная карточка, без градиентов */
.cta-sec{padding:var(--sec-ref) 0 0}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:34px 40px;
  border-radius:var(--r-card);background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow)}
.cta-band h2{font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
.cta-band p{margin:0;color:var(--mute);font-size:15px;max-width:56ch}
.cta-band .cta{margin:0;flex:none}
@media(max-width:900px){.cta-band{flex-direction:column;align-items:flex-start;padding:26px 24px}}
.kiosk-screen img{display:block;width:100%;height:auto}
.kiosk-chips{list-style:none;margin:12px 0 0;padding:0 4px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kiosk-chips li{display:flex;flex-direction:column;gap:2px;min-width:0}
.kiosk-chips i{font-style:normal;font-size:11px;color:#9A9DA8;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kiosk-chips b{font-size:17px;font-weight:600;color:#F2F3F7;font-variant-numeric:tabular-nums;
  font-family:"JetBrains Mono",monospace}
.kiosk-chips li.ok b{color:#7FDC9A}
/* лента доверия: четыре утверждения с ppkmark.com */
/* ⚠ Ряд стоит между двумя линиями (своя сверху и граница следующей секции
   снизу) — отступы до них РАВНЫЕ, иначе текст читался прижатым к верхней.
   ⚠ Без синих точек (06.09): четыре маркера-акцента рядом с двумя синими
   кнопками спорили с ними за внимание; пункты разделены волосками. */
.trust{display:flex;flex-wrap:wrap;gap:10px 0;padding:22px 0;margin:26px 0 0;list-style:none;
  border-top:1px solid var(--hair);font-size:14px;color:var(--mute)}
.trust li{padding:0 24px;border-left:1px solid var(--border);line-height:1.3}
.trust li:first-child{padding-left:0;border-left:none}
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero h1{max-width:none}
}

/* ─── ШЕСТЬ НАПРАВЛЕНИЙ: бенто с живыми фрагментами интерфейса ──── */
.areas{padding:var(--sec-narr) 0;border-top:1px solid var(--hair)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:22px;
  display:flex;flex-direction:column;gap:18px;min-width:0;box-shadow:var(--shadow)}
.tile-h{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.tile-h svg{width:18px;height:18px;color:var(--faint);flex:none}
.tile h3{font-size:var(--fs-h3);margin:0;font-weight:650;letter-spacing:-.01em}
.tile p{margin:0;color:var(--mute);font-size:var(--fs-small);line-height:1.55}
/* ⚠ Высота визуальной части ФИКСИРОВАННАЯ, а не минимальная: иначе заголовки
   соседних плиток в одном ряду стояли на разной высоте (владелец: «выровняй,
   чтобы всё чётко на одном уровне»). */
.tile-vis{background:var(--field);border-radius:var(--r-in);padding:16px;height:136px;
  display:flex;align-items:center;justify-content:center;gap:16px;overflow:hidden}
.tile-vis svg{display:block;flex:none}
.t-mark{grid-column:span 2}
.t-mark .tile-vis{justify-content:flex-start;gap:26px;padding:16px 22px}
.t-erp{grid-column:1/-1;flex-direction:row;align-items:center;gap:28px}
.t-erp .tile-vis{flex:1 1 55%;height:96px}
.t-erp .tile-tx{flex:1 1 45%;min-width:0}
/* мини-виджеты: статичные фрагменты интерфейса, без анимации */
.wdg-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.wdg-steps span{padding:5px 10px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--hair);white-space:nowrap}
.wdg-steps span.on{color:var(--green-deep);background:var(--green-soft);border-color:transparent;font-weight:600}
.wdg-steps i{font-style:normal;color:var(--faint)}
.wdg-kv{font-size:13px;color:var(--mute);display:flex;flex-direction:column;gap:5px;min-width:0}
.wdg-kv b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.wdg-kv .bad{color:var(--red-deep)}
.lane-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lane-wrap svg{max-width:100%;height:auto}
.lane-wrap small{font-size:12px;color:var(--faint);text-align:center}
.wdg-reject{max-width:224px;width:100%;height:auto}
.wdg-bars{width:100%;max-width:230px}
.wdg-bars svg{display:block;width:100%;height:44px;color:var(--text)}
.wdg-bars small{display:block;margin-top:7px;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  color:var(--mute);text-align:center;letter-spacing:.02em}
.wdg-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;justify-content:center}
.wdg-flow span{padding:6px 11px;border-radius:9px;background:var(--surface);border:1px solid var(--hair);
  font-weight:600;color:var(--text);white-space:nowrap}
.wdg-flow span.hi{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.wdg-flow i{font-style:normal;color:var(--faint)}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-erp{flex-direction:column;align-items:stretch;gap:18px}
}
@media(max-width:640px){.bento{grid-template-columns:minmax(0,1fr)} .t-mark{grid-column:auto}}

/* ─── КОМУ И КАК: четыре ситуации из формы + четыре шага ───────────── */
.who{padding:var(--sec-narr) 0;border-top:1px solid var(--hair);background:var(--surface)}
.who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.who-card{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);padding:20px 20px 18px}
.who-card h3{margin:0 0 8px;font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.who-card p{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
.who-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px;margin:26px 0 0;padding:20px 0 0;
  list-style:none;border-top:1px solid var(--hair);counter-reset:how}
.who-how li{position:relative;padding-left:30px;font-size:14px;line-height:1.35;counter-increment:how}
.who-how li::before{content:counter(how);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-text);font:600 11px/22px "JetBrains Mono",monospace;text-align:center}
.who-how b{display:block;font-weight:650}
.who-how span{color:var(--mute)}
@media(max-width:980px){.who-grid,.who-how{grid-template-columns:repeat(2,minmax(0,1fr))}.who-how{gap:14px 16px}}

/* ─── КОНФИГУРАТОР ───────────────────────────────────────────────── */
.config{padding:var(--sec-node) 0;border-top:1px solid var(--hair);background:var(--surface)}
.cfg-line{margin:28px 0 24px;background:var(--canvas)}
.line-scroll{overflow-x:auto;scrollbar-width:none;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:10px 14px}
.line-scroll::-webkit-scrollbar{display:none}
.line-svg{width:100%;min-width:860px;height:auto;display:block}
/* швы полотна едут с той же скоростью, что изделия (0,15 px/мс = 24 px за 160 мс):
   лента читается движущейся, а не нарисованной. Только transform, GPU-дёшево;
   при «уменьшить движение» гасится общим правилом. */
@keyframes beltrun{to{transform:translateX(24px)}}
.line-svg .belt-seams{animation:beltrun .16s linear infinite}
/* жёлоб на ветку B идёт вглубь по диагонали: тот же шаг 24 по ленте — это
   35,1 px вправо и 7,1 px вверх в кабинетной проекции (x + y/2, −0,32·y) */
@keyframes chuterun{to{transform:translate(35.1px,-7.1px)}}
.line-svg .chute-seams{animation:chuterun .16s linear infinite}
.cfg-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:start}
.cfg-h{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  font-weight:600;margin:0 0 14px}
/* Тумблеры — ощутимые плитки в две колонки; включённая подсвечена. */
.switches{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sw{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-in);cursor:pointer;
  border:1px solid var(--hair);background:var(--canvas);
  transition:background var(--dur),border-color var(--dur)}
.sw:hover{background:var(--tint)}
.sw:has(input:checked){background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw-box{width:40px;height:23px;border-radius:999px;background:var(--border);flex:none;position:relative;
  transition:background var(--dur)}
.sw-box::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:transform var(--dur) var(--ease-out);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked + .sw-box{background:var(--accent-btn)}
.sw input:checked + .sw-box::after{transform:translateX(17px)}
.sw input:focus-visible + .sw-box{outline:2px solid var(--accent);outline-offset:3px}
.sw-tx{font-size:15px}
.cfg-list{display:flex;flex-direction:column;gap:11px;margin:14px 0 4px}
.cfg-row{display:grid;grid-template-columns:170px 1fr;gap:14px;font-size:var(--fs-small);
  color:var(--mute);align-items:baseline}
.cfg-row b{color:var(--text);font-weight:600}
.cfg-row.empty{grid-template-columns:1fr;color:var(--faint)}
/* из конфигуратора есть выход: состав уходит в заявку */
.cfg-act{margin-top:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cfg-note{margin:0;font-size:13.5px;color:var(--mute);max-width:54ch}
@media(max-width:900px){.cfg-grid{grid-template-columns:minmax(0,1fr);gap:26px} .switches{grid-template-columns:1fr}}
@media(max-width:560px){.cfg-row{grid-template-columns:1fr;gap:3px}}

/* ─── КАК РАБОТАЕТ: таймлайн и живая демонстрация ─────────────── */
.how{padding:var(--sec-narr) 0;border-top:1px solid var(--hair)}
.timeline{list-style:none;margin:34px 0 46px;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:tl;position:relative}
.timeline::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:1px;background:var(--border)}
.tl{position:relative;counter-increment:tl;padding-top:42px;min-width:0}
.tl::before{content:counter(tl);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--accent);color:var(--accent-text);
  font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:600;display:grid;place-items:center}
.tl h3{font-size:var(--fs-h3);margin:0 0 8px;font-weight:650}
.tl p{margin:0;color:var(--mute);font-size:var(--fs-small);line-height:1.55}
@media(max-width:900px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))} .timeline::before{display:none}}
@media(max-width:560px){.timeline{grid-template-columns:minmax(0,1fr);gap:22px}}
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
@media(max-width:960px){.live-grid{grid-template-columns:minmax(0,1fr)}}
.ring-row{display:flex;align-items:center;gap:20px}
@media(max-width:400px){.ring-row{flex-direction:column;align-items:flex-start;gap:14px}}
.ring{flex:none}
.ring-track{stroke:var(--hair)}
.ring-fill{stroke:var(--accent);transition:stroke-dashoffset .5s var(--ease-out)}
.ring-num{font-size:27px;font-weight:700;fill:var(--text);font-family:Inter,sans-serif}
.ring-cap{font-size:8.5px;fill:var(--mute);letter-spacing:.12em;font-family:Inter,sans-serif}
.kv{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.kv>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14.5px}
.kv span{color:var(--mute)}
.kv b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.codes-h,.codes-b>div{display:grid;grid-template-columns:32px 64px 1fr;gap:10px;padding:8px 12px;align-items:center}
.codes-h{background:var(--field);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute);font-weight:600;margin-top:14px;border-radius:8px 8px 0 0}
/* ⚠ Высоту резервируем заранее: список наполняется на глазах, и без этого
   карточка вырастала на 150 px прямо во время чтения. */
.codes-b{max-height:150px;min-height:150px;overflow-y:auto;border:1px solid var(--hair);border-top:none;
  border-radius:0 0 8px 8px;margin-bottom:16px}
.codes-b>div{border-top:1px solid var(--hair);font-size:11.5px;font-family:"JetBrains Mono",monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:slip .28s var(--ease-out)}
.codes-b>div:first-child{border-top:none}
.codes-b>div.dup{color:var(--red);text-decoration:line-through;opacity:.75}
.codes-b .bad span{color:var(--amber)}
@keyframes slip{from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none}}
.pad{display:flex;gap:9px;flex-wrap:wrap}
.pad button{font:inherit;font-size:14.5px;font-weight:600;padding:12px 17px;border-radius:var(--r-in);
  border:1px solid var(--border);background:var(--canvas);color:var(--text);cursor:pointer;
  transition:border-color var(--dur),color var(--dur)}
.pad button:hover{border-color:var(--accent);color:var(--accent-text)}
.label{background:var(--canvas);border:1px dashed var(--border);border-radius:14px;padding:20px;
  text-align:center;transition:border-color var(--dur-slow),background var(--dur-slow)}
.label.empty{color:var(--faint);font-size:13.5px}
.bars.ghost{height:48px;background:repeating-linear-gradient(90deg,var(--hair) 0 3px,transparent 3px 6px,
  var(--hair) 6px 8px,transparent 8px 13px);border-radius:2px;margin-bottom:11px}
.ghost-tx{color:var(--faint)}
.lab-note{font-size:12px;color:var(--faint);margin-top:7px}
.label.done{border-style:solid;border-color:var(--accent);background:var(--surface)}
.bars{height:48px;margin-bottom:11px;padding:0 6%;color:var(--text)}
.bars .c128{display:block;width:100%;height:100%}
.sscc{font-family:"JetBrains Mono",monospace;font-size:15px;font-weight:500;letter-spacing:.02em}
.done-list{list-style:none;margin:18px 0 0;padding:0}
.done-list li{position:relative;padding:9px 0 9px 30px;font-size:var(--fs-small);color:var(--faint);
  border-bottom:1px solid var(--hair);transition:color var(--dur-slow)}
.done-list li:last-child{border-bottom:none}
.done-list li::before{content:"";position:absolute;left:2px;top:14px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--surface);
  transition:background var(--dur-slow),border-color var(--dur-slow)}
.done-list li.on{color:var(--text)}
.done-list li.on::before{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 2px var(--surface)}
.live-note{margin:16px 0 0;font-size:13.5px;color:var(--mute)}

/* ─── СПРАВОЧНЫЕ РАЗДЕЛЫ: состав, обиход смены, нештатные ────────── */
.caps{padding:var(--sec-ref) 0;border-top:1px solid var(--hair)}
.mods{width:100%;border-collapse:collapse;margin-top:28px;font-size:14.5px}
.mods th{text-align:left;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:500;padding:0 14px 10px 0;border-bottom:1px solid var(--hair)}
.mods td{padding:13px 14px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--mute)}
/* назначение — не шире 64 символов: на 1440 строка шла на 110 знаков и читалась
   как дамп; max-width на самой ячейке таблица игнорирует, поэтому обёртка */
.mods .d{max-width:64ch}
/* участки, которые есть в любом рабочем месте (смена, отчёты, обмен с 1С) */
.mods .base{display:block;width:max-content;margin:7px 0 0;font:500 10px/1 "JetBrains Mono",monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-soft);
  padding:4px 7px;border-radius:var(--r-pill);white-space:nowrap}
.mods td.k{font-size:11.5px;color:var(--faint);width:104px}
.mods td.t{color:var(--text);font-weight:600;width:238px}
.mods tr.head td{color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;padding-top:26px;border-bottom:none}
/* обиход смены и нештатные ситуации — одна секция, две колонки компактных строк */
.daily{padding:var(--sec-ref) 0;background:var(--surface);border-top:1px solid var(--hair)}
.daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:30px}
.daily-grid .cfg-h{margin-bottom:6px}
.rely-list.compact{margin-top:0}
.rely-list.compact .rely-item{grid-template-columns:1fr;gap:3px;padding:13px 0}
.rely-list.compact b{font-size:15px}
.rely-list.compact span{font-size:14px;line-height:1.5;max-width:70ch}
/* две колонки одинаковы по форме, а роли разные: слева обиход, справа —
   что происходит при сбое. Маркер перед заголовком делает роль видимой. */
.rely-list.compact b{display:flex;align-items:center;gap:9px}
.rely-list.compact b::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--green)}
#relyList b::before{background:var(--amber)}
.rely-list{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.rely-item{display:grid;grid-template-columns:minmax(200px,.9fr) 1.1fr;gap:26px;padding:20px 0;
  border-bottom:1px solid var(--hair);align-items:baseline}
.rely-item:last-child{border-bottom:none}
.rely-item b{font-weight:650;font-size:15.5px}
.rely-item span{color:var(--mute);font-size:15px}
@media(max-width:900px){.daily-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:760px){
  .rely-item{grid-template-columns:1fr;gap:6px}
  .mods td.t{width:auto} .mods td.k{display:none}
}

/* ─── ПРОВЕРЕНО НА ЛИНИЯХ: цифры, было/стало, внедрения ─────────── */
.proof{padding:var(--sec-narr) 0;border-top:1px solid var(--hair);background:var(--surface)}
/* ⚠ ПЯТЬ ЦИФР В ДВА РЯДА (06.09.2026, решение владельца). Сетка размечена
   ШЕСТЬЮ долями: сверху три цифры по две доли, снизу две по три — нижние
   получаются шире. Дыры нет ни в одном ряду, черта идёт до края.
   Раньше здесь были три равные колонки, и на пяти цифрах вторая строка
   обрывалась на две трети. Меняешь число цифр — пересобирай эту разметку. */
/* ⚠ ЧЕРТА СПЛОШНАЯ, ПРОМЕЖУТКОВ В СЕТКЕ НЕТ (06.09.2026). Раньше колонки
   разделял gap, и черта под рядом шла отрезками: стык нижнего ряда (по центру)
   не совпадал со стыками верхнего (на третях), и ряды читались как неровные —
   хотя ширины были равные. Теперь отступ живёт ВНУТРИ ячейки (padding-right),
   ячейки касаются друг друга, черта под рядом одна на всю ширину, а две нижние
   цифры делят её ровно пополам. */
.nums{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:30px 0 8px;
  border-top:1px solid var(--hair)}
.num{grid-column:span 2;padding:18px 28px 16px 0;border-bottom:1px solid var(--hair)}
.num:nth-child(n+4){grid-column:span 3}
.num:nth-child(3),.num:last-child{padding-right:0}   /* последние в ряду */
/* цифры — моноширинным, как в самой программе (дизайн-разбор, П3) */
.num b{display:block;font-family:"JetBrains Mono",monospace;font-size:30px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.1}
/* ⚠ :not(.nb) — НЕ ПРИДИРКА. Русская типографика (js/site.js, typo) оборачивает
   термины «1С», SSCC, DataMatrix в <span class="nb">, и без исключения этот
   внутренний span тоже становился блоком: подпись рвалась на три строки, а
   термин уезжал на свою. Поймано на цифре «3 канала обмена с 1С» 06.09.2026 */
.num span:not(.nb){display:block;margin-top:6px;font-size:13.5px;color:var(--mute);line-height:1.45}
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.pain{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);padding:22px}
/* заголовок резервирует две строки: строки «было / PPKLink» в соседних
   карточках начинаются на одной высоте */
/* ⚠ 3em, не 2,6: две строки заголовка при line-height 1,5 = 3em, и карточка
   с двухстрочным названием опускала ряд «было/стало» ниже соседей */
.pain h3{font-size:16.5px;margin:0 0 14px;font-weight:650;min-height:3em}
/* Метка слева говорит, что это за строка: сверху — как бывает без программы,
   снизу — что делает PPKLink. */
.pain p{margin:0 0 11px;color:var(--mute);font-size:14.5px;display:grid;
  grid-template-columns:52px 1fr;gap:11px;align-items:baseline}
.pain p:last-child{margin:0}
.pain p>span:first-child{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-family:"JetBrains Mono",monospace}
.pain .was>span:first-child{color:var(--red-deep)}   /* --red на холсте не дотягивал до 4,5:1 */
.pain .now>span:first-child{color:var(--accent-text)}
.pain .now>span:last-child{color:var(--text)}
.cases-h{margin:44px 0 0;font-size:var(--fs-h3);font-weight:650}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:18px}
.case{padding:22px 22px 18px;background:var(--canvas);border:1px solid var(--hair);border-radius:14px}
.case h3{margin:0 0 12px;font-size:16.5px;font-weight:650;min-height:3em}
.case p{margin:0 0 10px;font-size:var(--fs-small);line-height:1.5;color:var(--mute)}
.case p:last-child{margin:0;color:var(--text)}
.case i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}
.cases-more{margin-top:26px}
@media(max-width:900px){
  .cases,.pains{grid-template-columns:minmax(0,1fr)}
}
/* узко — цифры в столбик: доли уже не помогают, крупная цифра не влезает */
@media(max-width:620px){.nums{grid-template-columns:minmax(0,1fr)}
  .num,.num:nth-child(n+4){grid-column:auto;padding-right:0} .num b{font-size:26px}}

/* ─── ВНЕДРЕНИЕ И ВОПРОСЫ ────────────────────────────────────────── */
.deploy{padding:var(--sec-ref) 0;border-top:1px solid var(--hair)}
.deploy .sec-title{font-size:clamp(22px,2.4vw,28px)}
.steps-num{display:flex;flex-direction:column;gap:15px;margin-top:16px}
.snum{display:grid;grid-template-columns:26px 1fr;gap:12px}
.snum i{font-style:normal;color:var(--accent-text);font-size:13px;padding-top:2px}
.snum b{display:block;font-size:14.5px;font-weight:650;margin-bottom:3px}
/* :not(.nb) — та же грабля, что у .num выше: термин в подписи не должен стать блоком */
.snum span:not(.nb){display:block;max-width:76ch;color:var(--mute);font-size:var(--fs-small);line-height:1.5}
.faq{padding:var(--sec-ref) 0;border-top:1px solid var(--hair)}
.faq .wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:start}
.faq-head{position:sticky;top:96px}
.faq-list{border-top:1px solid var(--hair)}
@media(max-width:900px){.faq .wrap{grid-template-columns:1fr;gap:22px} .faq-head{position:static}}
details{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:16px;list-style:none;display:flex;
  justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
/* Плюс, который становится минусом: крестик читался бы как «закрыть». */
summary::after{content:"";width:13px;height:13px;flex:none;transition:background-size var(--dur);
  background:linear-gradient(var(--accent),var(--accent)) center/13px 1.7px no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/1.7px 13px no-repeat}
details[open] summary::after{background-size:13px 1.7px, 1.7px 0}
details p{margin:0 0 18px;color:var(--mute);font-size:15px;max-width:64ch}

/* ─── ФОРМА ──────────────────────────────────────────────────────── */
.form-sec{padding:var(--sec-node) 0;background:var(--surface);border-top:1px solid var(--hair)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.contact-tel{margin-top:22px}
.contact-tel .big{display:block;font-size:22px;font-weight:700;color:var(--text);margin-bottom:2px}
/* мессенджеры рядом с телефоном: половина заказчиков пишет, а не звонит */
.quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.quick a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-in);
  border:1px solid var(--border);color:var(--text);font-size:var(--fs-small);font-weight:600;
  transition:border-color var(--dur),background var(--dur)}
.quick a:hover{background:var(--tint);border-color:var(--text)}
.quick svg{width:18px;height:18px;color:var(--mute)}
form{display:flex;flex-direction:column;gap:13px;position:relative}
/* ⚠ Ошибка стоит В СТРОКЕ С ПОДПИСЬЮ, справа, а не под полем: сообщение под
   полем раздвигало форму, и поля «прыгали» относительно соседей. */
.field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px}
.field[hidden]{display:none}   /* иначе display:grid перебивает атрибут hidden */
.field label{grid-row:1;grid-column:1;display:block;font-size:12.5px;color:var(--mute);margin-bottom:6px;font-weight:500}
.field input,.field select{grid-row:2;grid-column:1/-1;width:100%;font:inherit;font-size:15px;padding:13px 15px;
  border-radius:var(--r-in);border:1px solid var(--border);background:var(--canvas);color:var(--text);
  transition:border-color var(--dur),box-shadow var(--dur)}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld-err{grid-row:1;grid-column:2;margin:0 0 6px;font-size:12.5px;line-height:1.4;color:var(--red-deep);
  text-align:right;white-space:nowrap}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--red)}
/* поле «Состав линии» появляется только по кнопке из конфигуратора */
.cfg-field{position:relative}
.cfg-field input{padding-right:46px;background:var(--accent-soft);border-color:transparent;
  font-family:"JetBrains Mono",monospace;font-size:12.5px}
.cfg-clear{position:absolute;right:7px;bottom:7px;width:34px;height:34px;border:none;background:none;
  color:var(--mute);cursor:pointer;border-radius:8px;font:inherit;font-size:18px;line-height:1}
.cfg-clear:hover{background:var(--surface);color:var(--text)}
/* Ловушка для роботов: убрана с экрана, но не display:none — часть ботов
   пропускает скрытые поля, а это поле должно выглядеть настоящим. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.next{list-style:none;counter-reset:n;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:44ch}
.next li{counter-increment:n;display:grid;grid-template-columns:26px 1fr;column-gap:12px;row-gap:3px}
.next li::before{content:counter(n);grid-column:1;grid-row:1 / span 2;font-family:"JetBrains Mono",monospace;
  color:var(--accent-text);font-size:13px;font-weight:500;padding-top:2px}
.next b{grid-column:2;font-size:14.5px;font-weight:650}
.next span{grid-column:2;font-size:var(--fs-small);color:var(--mute);line-height:1.5}
.form-err{display:none;background:var(--red-soft);color:var(--red-deep);border-radius:var(--r-in);
  padding:11px 14px;font-size:13.5px;line-height:1.45}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mute);line-height:1.5;margin-top:4px}
.agree input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none}
/* после отправки форма уступает место подтверждению */
.form-done{display:none;background:var(--green-soft);color:var(--green-deep);border-radius:var(--r-card);
  padding:26px;font-size:15px;line-height:1.55}
.form-done b{display:block;font-size:18px;margin-bottom:8px}
.form-done a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
form.sent{display:none}
.form-done.on{display:block}
@media(max-width:940px){.form-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:480px){.fld-err{white-space:normal}}

/* ─── ПОДВАЛ ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);padding:46px 0 32px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.foot .foot-h{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:0 0 12px}
footer p{font-size:var(--fs-small);color:var(--mute);margin:0 0 7px}
footer a{font-size:var(--fs-small);color:var(--mute);display:block;margin-bottom:7px}
footer a:hover{color:var(--accent-text)}
footer .big{font-size:20px;font-weight:700;color:var(--text);margin-bottom:10px;display:block}
.copy{margin-top:30px;padding-top:20px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--faint);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.copy a{display:inline;color:var(--mute);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
@media(max-width:860px){.foot{grid-template-columns:1fr;gap:26px}}

/* ─── ЛИПКАЯ ПАНЕЛЬ НА ТЕЛЕФОНЕ: позвонить или запросить показ ──── */
.mbar{display:none}
@media(max-width:760px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.5fr;gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--hair);transition:transform var(--dur-slow) var(--ease-out)}
  .mbar .btn{padding:13px 12px;font-size:15px}
  .mbar.off{transform:translateY(110%)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}