/* ═══════════════════════════════════════════════════════════════════
   PPKLink — витрина. ПРОДАЮЩИЕ БЛОКИ (06.09.2026): товарные группы, «чем
   отличается», стоимость и свидетельство о регистрации.
   Вынесены из sections.css отдельным файлом: тот перевалил за 500 строк, а
   правило проекта — файл меньше 500. Порядок подключения:
   fonts → tokens → base → sections → sales → device → mobile.
   Токены и приёмы те же, что в sections.css: своих цветов здесь нет.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ТОВАРНЫЕ ГРУППЫ: где программа уже работает ─────────────────── */
.groups{padding:var(--sec-ref) 0;border-top:1px solid var(--hair)}
.grp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.grp{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:18px 20px}
.grp h3{margin:0 0 6px;font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.grp p{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
@media(max-width:980px){.grp-grid{grid-template-columns:1fr}}

/* ─── ЧЕМ ОТЛИЧАЕТСЯ: три способа закрыть маркировку ──────────────
   Две строки в карточке: «как обычно» приглушена, наша — основным цветом и
   отбита линией. Оценок чужих решений в тексте нет, разницу делает вёрстка. */
.diff{padding:var(--sec-narr) 0;border-top:1px solid var(--hair);background:var(--surface)}
.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.dcard{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);padding:20px}
.dcard h3{margin:0 0 14px;font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.dcard p{margin:0;font-size:14px;line-height:1.5;display:grid;gap:5px}
.dcard i{font-style:normal;font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.d-them{color:var(--mute);padding-bottom:14px}
.d-them i{color:var(--faint)}
.d-us{padding-top:14px;border-top:1px solid var(--hair);color:var(--text)}
.d-us i{color:var(--accent-text)}
@media(max-width:980px){.diff-grid{grid-template-columns:1fr}}

/* ─── СКОЛЬКО ЭТО СТОИТ: база плюс участки разного веса ───────────
   Прайса нет — публикуем правило. Сумма приходит из js/data.js (PRICE),
   поэтому в разметке её нет и второго места с числом не заводить. */
.price{padding:var(--sec-narr) 0;border-top:1px solid var(--hair)}
.price-base{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;
  margin:28px 0 34px;padding:22px 24px;background:var(--accent-soft);
  border:1px solid var(--border);border-radius:var(--r-card)}
.pb-cap{display:block;font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-text);font-weight:600}
.pb-num{display:block;margin-top:4px;font-size:clamp(24px,3vw,32px);font-weight:680;
  letter-spacing:-.02em;white-space:nowrap}
.price-base p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mute)}
.price-why{margin:-6px 0 16px;font-size:14px;color:var(--mute)}
.w-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.w-card{background:var(--surface);border:1px solid var(--hair);border-left-width:3px;
  border-radius:var(--r-card);padding:16px 18px}
.w-card.light{border-left-color:var(--steel-dark)}
.w-card.mid{border-left-color:var(--accent)}
.w-card.heavy{border-left-color:var(--amber)}
.w-card b{display:block;margin-bottom:6px;font-size:15px;font-weight:650}
.w-card span{font-size:13.5px;line-height:1.5;color:var(--mute)}
.price-rules{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.price-rules li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.price-rules li::before{content:"";position:absolute;left:4px;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.price-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:28px 0 0}
.price-cta span{font-size:13.5px;line-height:1.5;color:var(--mute);max-width:36ch}
@media(max-width:980px){.w-grid{grid-template-columns:1fr}
  .price-base{grid-template-columns:1fr;gap:12px}}

/* ─── СВИДЕТЕЛЬСТВО РОСПАТЕНТА ────────────────────────────────────
   Единственный факт на странице, который проверяет третья сторона, поэтому
   показываем сам документ. Подложка под картинкой белая в обеих темах: это
   бумага, а не элемент интерфейса. */
.cert{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;
  margin:34px 0 0;padding:20px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-card)}
.cert a{display:block;line-height:0;background:#fff;border:1px solid var(--hair);
  border-radius:10px;overflow:hidden;transition:box-shadow var(--dur) var(--ease-out)}
.cert a:hover{box-shadow:var(--shadow-lift)}
.cert img{width:100%;height:auto;display:block}
/* ⚠ ТОЛЬКО прямой потомок: правило без «>» задевало жирный номер
   свидетельства внутри абзаца и разрывало предложение на три строки. */
.cert figcaption > b{display:block;margin-bottom:8px;font-size:var(--fs-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);font-weight:600}
.cert figcaption p{margin:0;font-size:14.5px;line-height:1.55}
.cert-more{display:inline-block;margin-top:10px;font-size:13px;color:var(--accent-text)}
.nums-note{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--mute);max-width:78ch}
@media(max-width:700px){.cert{grid-template-columns:1fr}.cert a{max-width:250px}}

/* ─── БЫСТРЫЕ КАНАЛЫ У КНОПОК ПЕРВОГО ЭКРАНА ─────────────────────
   Телефон и мессенджеры подняты из подвала: у этой аудитории написать —
   нормальный первый шаг, а форму на первом визите заполняет меньшинство. */
.cta-ways{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:14px 0 0;
  font-size:var(--fs-small)}
.cta-ways span{color:var(--faint)}
.cta-ways a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid transparent;
  padding:2px 0;transition:border-color var(--dur) var(--ease-out)}
.cta-ways a:hover{border-bottom-color:currentColor}

/* ─── ВЕС УЧАСТКА В КОНФИГУРАТОРЕ ────────────────────────────────
   Та же шкала, что в разделе «Сколько это стоит»: цвет метки совпадает с
   цветом кромки карточки веса, чтобы человек связал одно с другим. */
/* ⚠ Три столбца: участок | вес | что появляется на линии. Метка веса стоит
   СВОИМ столбцом и потому выстроена в колонку — внутри названия она уезжала
   на вторую строку у длинных участков и оставалась сбоку у коротких. */
.cfg-row{grid-template-columns:168px 76px 1fr}
.wtag{justify-self:start}
.wtag{font-style:normal;font-size:11px;line-height:1.5;font-weight:600;letter-spacing:.04em;
  padding:1px 7px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--tint);color:var(--mute)}
/* ⚠ «в базе» — зелёным, а не синим: синий у «среднего», и две метки
   одного цвета читались как одно и то же. */
.wtag.w-base{background:var(--green-soft);color:var(--green-deep)}
.wtag.w-mid{background:var(--accent-soft);color:var(--accent-text)}
.wtag.w-heavy{background:var(--amber-soft);color:var(--amber)}
.cfg-weight{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.cfg-weight:empty{display:none}

/* ─── «БЫЛО / СТАЛО» ВНУТРИ «КОМУ ПОДХОДИТ» ──────────────────────
   Карточки приехали из раздела доказательств и стоят между ситуациями и
   шагами: отступы задаём здесь, чтобы не трогать .pains в sections.css. */
.who-pains-h{margin:34px 0 16px;font-size:var(--fs-h3);font-weight:650;letter-spacing:-.01em}
.who .pains{margin-bottom:6px}

/* ─── КНОПКИ КОНФИГУРАТОРА ───────────────────────────────────────
   Две кнопки в ряд: отправить состав и скопировать ссылку на него. На узком
   экране встают друг под друга во всю ширину — иначе не попасть пальцем. */
.cfg-btns{display:flex;flex-wrap:wrap;gap:10px}
.cfg-copied{margin:10px 0 0;font-size:13.5px;color:var(--green-deep)}
@media(max-width:560px){.cfg-btns{width:100%}.cfg-btns .btn{flex:1 1 100%;justify-content:center}}
/* На телефоне столбцы не помещаются: участок и вес в строку, описание ниже. */
@media(max-width:560px){
  .cfg-row{grid-template-columns:1fr auto;gap:4px 10px}
  .cfg-row span{grid-column:1 / -1}
  .cfg-row.empty{grid-template-columns:1fr}
}
.cfg-legend{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--faint)}

/* ─── ОДНА СЕТКА НА ВСЕ КАРТОЧКИ ─────────────────────────────────
   ⚠⚠ Отзыв владельца 06.09.2026: «пусть одинаковой высоты все будет»,
   «тут тоже выровнять». И он прав: подписи внутри соседних карточек обязаны
   стоять на одной высоте, иначе ряд читается как оборванный.
   Раньше это чинили min-height у заголовка (sections.css) — приём держится,
   только пока совпадает длина абзацев, и разваливается на первом же кейсе с
   длинным «Решением». Здесь карточка становится subgrid родителя: строки
   общие на весь ряд, и «РЕШЕНИЕ» у трёх карточек начинается на одной линии.
   ⚠ Браузер без subgrid просто проигнорирует правило — карточки останутся
   такими, какими были, ничего не сломается. */

/* «Было / стало»: заголовок + строка «было» + строка PPKLink */
.pains{grid-template-rows:repeat(3,auto)}
.pain{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.pain h3{min-height:0}

/* Внедрения: заголовок + задача + решение + результат */
.cases{grid-template-rows:repeat(4,auto)}
.case{display:grid;grid-row:span 4;grid-template-rows:subgrid}
.case h3{min-height:0}

/* Ситуации, товарные группы, веса участков: заголовок + описание */
.who-grid,.grp-grid,.w-grid{grid-template-rows:auto auto}
.who-card,.grp,.w-card{display:grid;grid-row:span 2;grid-template-rows:subgrid}

/* «Чем отличается»: заголовок + «как обычно» + наш ответ.
   Средняя строка тянется, поэтому блок PPKLink прижат к низу и стоит на
   одной линии во всех трёх карточках. */
.diff-grid{grid-template-rows:auto 1fr auto}
.dcard{display:grid;grid-row:span 3;grid-template-rows:subgrid}

/* Полоса пяти шагов на первом экране: тексты в один и в два ряда делали
   нижнюю кромку рваной. Резервируем две строки — полоса читается ровной. */
.flow span{min-height:2.6em}