/* ============================================================================
   RELAID · СХЕМЫ  (ТЗ 42, эталон 04.09.2026)
   ============================================================================
   Двенадцать схем вместо 81. Каждая повторяет структуру одного проверенного
   референса — сетку, отношения кеглей, толщину линий, порядок элементов;
   источник назван в комментарии над схемой. Цвета, шрифты и радиусы только
   из tokens.css: где у источника угол острый, ставим свой радиус.

   Имена независимы (префикс .sm-), поэтому слой ничего не переопределяет
   и не ломает остальные страницы. Откат — снять класс с разметки.

   Порядок подключения: tokens → style → redesign → schemes.
   ========================================================================= */

/* Страница на схемах: шапки секций выключены влево. Центровку задаёт
   redesign.css, и рядом с левыми блоками она читается как сбой. */
.page--sm .sec__head{ text-align:left; margin-inline:0; max-width:none }
.page--sm .sec__head > *{ margin-inline:0 }
.page--sm .sec__head h2,
.page--sm .sec__head h3{ margin-inline:0; max-width:min(100%, 28ch) }
.page--sm .sec__head .lead{ margin-inline:0 }
.page--sm [data-sec] > h2,
.page--sm [data-sec] > h3,
.page--sm .sec > h2,
.page--sm .sec > h3{ text-align:left; margin-inline:0; max-width:min(100%, 28ch) }

/* Служебное */
.sm-num{ font-variant-numeric:tabular-nums }
.sm-lab{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
}
.blk--dark .sm-lab{ color:var(--acc-hi) }

/* ── 01 · РАЗВИЛКА ЦЕНЫ — по betterment.com/pricing ────────────────────────
   Условие над ценой и крупнее корпуса, цена — самый сильный узел, единица
   прижата к низу. Отношение 22 : 72 : 16. Ни рамки, ни тени. */
.sm-fork{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-5);
  /* ребёнок грида по умолчанию не уже своего содержимого: без min-width:0 ряд
     раздувается длинной ценой и выносится за правый край полосы (grid-blowout) */
  min-width:0; max-width:100%;
}
.sm-fork > *{ min-width:0 }
.sm-fork__c{
  background:var(--surf); border-radius:var(--r-card); padding:var(--s-7);
  display:flex; flex-direction:column;
  border:0; box-shadow:none;
  /* колонка объявлена контейнером запроса: кегль суммы берётся от её
     собственной ширины, поэтому сужение ряда (резерв под карточку контактов)
     уменьшает цифру, а не рвёт сумму на две строки */
  container-type:inline-size;
}
/* Обёртка вокруг условия и цены раскрывается: без неё цена — прямой ребёнок
   колонки и её можно прижать к низу. Иначе условие в две строки поднимает
   цену выше, чем в соседней карточке с условием в четыре, и ряд цифр едет. */
.sm-fork__c > div{ display:contents }
.sm-fork__p{ margin-top:auto }
.blk--dark .sm-fork__c{ background:var(--bg-2) }
.sm-fork__cond{ font-size:var(--t-lead); line-height:1.35; color:var(--ink) }
.blk--dark .sm-fork__cond{ color:var(--ink-i) }
.sm-fork__p{
  font-family:var(--f-disp); font-size:min(clamp(30px,3.4vw,48px), 20cqi); font-weight:200;
  line-height:1; letter-spacing:-.03em; padding-top:var(--s-6);
  display:flex; align-items:baseline; gap:4px; font-variant-numeric:normal;
}
.sm-fork__p sup{ font-size:.34em; font-weight:400; top:0; position:relative }
/* число не переносится никогда: «215 000» с переносом внутри разряда читается
   как другая сумма. Не влезает — уменьшается кегль, а не рвётся строка. */
.sm-fork__p .sm-num{ white-space:nowrap }
/* Длинная сумма («33 946 / 38 644 ₽») не влезает в колонку даже на 1440:
   у неё вдвое больше знаков, чем у соседей. Класс ставится адресно, ровно
   там, где замер показал вылет, — тем же приёмом, что .facts--fit в style.css.
   Строка не рвётся: уменьшается кегль. */
.sm-fork--fit .sm-fork__p{ font-size:min(clamp(24px,2.4vw,34px), 13cqi) }
.sm-fork__u{ font-size:var(--t-body); color:var(--soft); margin-top:var(--s-5) }
.blk--dark .sm-fork__u{ color:var(--soft-i) }
@media (max-width:767px){ .sm-fork__c{ padding:var(--s-5) } }

/* ── 02 · СМЕТА — по stripe.com/invoicing + разбивка комиссии wise.com ─────
   Две карточки: в верхней итог и объект, в нижней состав. Линия под каждой
   позицией и ни одной под итогом. Пунктир перед итогом — 3px dashed,
   обрезанный обёрткой height:1px, отчего точки мелкие и частые. */
.sm-inv{ max-width:560px }
.sm-inv__top,
.sm-inv__bot{ background:var(--surf); border-radius:var(--r-card); padding:var(--s-6) var(--s-7) }
.blk--dark .sm-inv__top,
.blk--dark .sm-inv__bot{ background:var(--bg-2) }
.sm-inv__top{ margin-bottom:10px }
.sm-inv__hd{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4);
  padding-bottom:var(--s-4); border-bottom:1px solid var(--line); margin-bottom:var(--s-4);
}
.blk--dark .sm-inv__hd{ border-bottom-color:var(--line-i) }
.sm-inv__from{ font-size:var(--t-small); font-weight:600; color:var(--soft) }
.blk--dark .sm-inv__from{ color:var(--soft-i) }
.sm-inv__sum{
  font-family:var(--f-disp); font-size:clamp(30px,4vw,40px); font-weight:500;
  line-height:1.05; letter-spacing:-.03em; margin-left:-2px; font-variant-numeric:tabular-nums;
}
.sm-inv__due{ font-size:var(--t-small); color:var(--soft); margin-top:2px }
.blk--dark .sm-inv__due{ color:var(--soft-i) }
.sm-inv__mark{
  font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc); white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--acc) 25%, transparent);
  border-radius:var(--r-pill); padding:5px 12px;
}
.blk--dark .sm-inv__mark{ color:var(--acc-hi); border-color:var(--line-i) }
.sm-inv__pair{ display:flex; gap:var(--s-3); font-size:var(--t-small); margin-bottom:6px }
.sm-inv__pair > span:first-child{ width:86px; flex-shrink:0; color:var(--soft) }
.blk--dark .sm-inv__pair > span:first-child{ color:var(--soft-i) }
.sm-inv__no{
  font-family:var(--f-mono); font-size:var(--t-small); color:var(--soft);
  margin-bottom:var(--s-4); font-variant-numeric:tabular-nums;
}
.blk--dark .sm-inv__no{ color:var(--soft-i) }
.sm-inv__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--line);
  margin-bottom:var(--s-3); font-size:var(--t-small);
}
.blk--dark .sm-inv__row{ border-bottom-color:var(--line-i) }
.sm-inv__calc{
  display:block; font-family:var(--f-mono); font-size:var(--t-micro); font-style:normal;
  color:var(--soft); font-variant-numeric:tabular-nums; margin-top:2px; letter-spacing:.02em;
}
.blk--dark .sm-inv__calc{ color:var(--soft-i) }
.sm-inv__v{ font-variant-numeric:tabular-nums; white-space:nowrap }
.sm-inv__dash{ height:1px; overflow:hidden; margin:var(--s-1) 0 var(--s-3) }
.sm-inv__dash i{ display:block; border-bottom:3px dashed color-mix(in srgb, var(--ink) 16%, transparent) }
.blk--dark .sm-inv__dash i{ border-bottom-color:var(--line-i) }
.sm-inv__tot{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4);
  font-size:var(--t-body); font-weight:600;
}
.sm-inv__tot .sm-inv__r{ text-align:right }
.sm-inv__tot em{
  display:block; font-style:normal; font-size:var(--t-micro); font-weight:400;
  color:var(--soft); margin-top:2px; font-family:var(--f-body); letter-spacing:0;
}
.blk--dark .sm-inv__tot em{ color:var(--soft-i) }
@media (max-width:767px){ .sm-inv__top,.sm-inv__bot{ padding:var(--s-5) } }

/* ── 03 · ПРАЙС ПО РАЗДЕЛАМ — по vercel.com/docs/limits + kdc.clinic/tseny ──
   Шапка — обведённая пилюля с заливкой цвета фона, th серый весом 400 и того
   же кегля, что ячейки. Числа выровнены влево; колонку держит tabular-nums,
   объявленный на самом table. Вертикальных линий, зебры, рамки и тени нет.
   Счётчик позиций отжат вправо через flex:1 1 0 на названии. */
.sm-plg{
  display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) 0;
  font-size:var(--t-h4); font-weight:600;
}
.sm-plg > span:first-of-type{ flex:1 1 0 }
.sm-plg__n{
  font-family:var(--f-mono); font-size:var(--t-small); font-weight:400; color:var(--acc);
  background:color-mix(in srgb, var(--acc) 8%, transparent);
  border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.blk--dark .sm-plg__n{ color:var(--acc-hi); background:var(--bg-2) }
.sm-pl{
  width:100%; font-size:var(--t-small); font-variant-numeric:tabular-nums;
  border-collapse:separate; border-spacing:0; margin-bottom:var(--s-6);
}
.sm-pl th{
  font-family:var(--f-body); font-size:var(--t-small); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--soft);
  text-align:left; padding:10px; background:var(--surf-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.sm-pl th:first-child{ border-left:1px solid var(--line); border-radius:var(--r-fld) 0 0 var(--r-fld) }
.sm-pl th:last-child{ border-right:1px solid var(--line); border-radius:0 var(--r-fld) var(--r-fld) 0 }
.blk--dark .sm-pl th{ background:var(--bg-2); border-color:var(--line-i); color:var(--soft-i) }
.sm-pl td{ padding:var(--s-3) 10px; vertical-align:top; text-align:left }
.sm-pl tr:not(:last-child) td{ border-bottom:1px solid var(--line) }
.blk--dark .sm-pl tr:not(:last-child) td{ border-bottom-color:var(--line-i) }
.sm-pl__t{ display:flex; align-items:flex-start; gap:var(--s-3) }
.sm-pl__t .ico{ width:20px; height:20px; flex-shrink:0; color:var(--acc); margin-top:2px }
.blk--dark .sm-pl__t .ico{ color:var(--acc-hi) }
.sm-pl__x{
  display:block; font-size:var(--t-small); line-height:1.55; color:var(--soft);
  max-width:78ch; margin-top:var(--s-1);
}
.blk--dark .sm-pl__x{ color:var(--soft-i) }
.sm-pl col.u{ width:110px } .sm-pl col.p{ width:130px }
@media (max-width:767px){
  .sm-pl col.u{ width:70px } .sm-pl col.p{ width:96px }
  .sm-pl th,.sm-pl td{ padding-inline:6px }
}

/* ── 04 · УСЛОВИЯ И КОЭФФИЦИЕНТЫ — по tbank.ru/business/tariffs ────────────
   Сначала вопрос, потом ответ: длинная подпись сверху, короткое значение
   снизу. Оба весом 400, иерархию держит прозрачность 0,54 против 0,8.
   Несколько условий — один узел с <br>, не вложенный список. Линий нет. */
.sm-cond{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-7) }
.sm-cond h3{ font-size:var(--t-h3); font-weight:500; margin-bottom:var(--s-6) }
.sm-cond dl{ display:flex; flex-direction:column }
.sm-cond dt{
  font-size:var(--t-small); line-height:20px;
  color:color-mix(in srgb, var(--ink) 54%, transparent);
}
.sm-cond dd{
  font-size:var(--t-body); line-height:24px; font-weight:400; margin-bottom:var(--s-5);
  color:color-mix(in srgb, var(--ink) 80%, transparent); font-variant-numeric:tabular-nums;
}
.blk--dark .sm-cond dt{ color:var(--soft-i) }
.blk--dark .sm-cond dd{ color:var(--ink-i) }

/* ── 05 · ПОЛОСА ЭТАПОВ — по woodsarchitects.co.uk/fees ────────────────────
   Линия — отдельный absolute в 1px от центра первого круга до центра
   последнего. У круга рамки нет: дырку в линии делает box-shadow цветом
   фона секции. Число в цвете своего узла, единица отдельным sup. */
.sm-leg{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding-bottom:var(--s-6); margin-bottom:var(--s-6); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--t-micro); line-height:16px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--soft);
}
.blk--dark .sm-leg{ border-bottom-color:var(--line-i); color:var(--soft-i) }
.sm-leg em{ font-style:normal; color:var(--ink) }
.blk--dark .sm-leg em{ color:var(--ink-i) }
.sm-road{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-2) }
.sm-road__l{
  position:absolute; top:74px; left:10%; right:10%; height:1px; background:var(--line);
}
.blk--dark .sm-road__l{ background:var(--line-i) }
.sm-stop{ display:flex; flex-direction:column; align-items:center; gap:var(--s-5); text-align:center }
.sm-stop__t{
  font-family:var(--f-mono); font-size:var(--t-micro); line-height:14.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--soft); min-height:29px;
}
.blk--dark .sm-stop__t{ color:var(--soft-i) }
.sm-stop__n{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:17px; font-weight:500;
  background:var(--acc); color:var(--acc-ink); box-shadow:0 0 0 6px var(--page);
}
.blk--dark .sm-stop__n{ background:var(--acc-hi); color:var(--bg); box-shadow:0 0 0 6px var(--bg) }
.sm-stop__d{
  font-family:var(--f-disp); font-size:clamp(28px,3.4vw,42px); font-weight:200; line-height:1;
  letter-spacing:-.04em; display:flex; align-items:baseline; gap:3px;
  font-variant-numeric:tabular-nums; color:var(--acc);
}
.blk--dark .sm-stop__d{ color:var(--acc-hi) }
.sm-stop__d sup{ font-size:.36em; font-weight:300; color:var(--soft); position:relative; top:0 }
.blk--dark .sm-stop__d sup{ color:var(--soft-i) }
@media (max-width:860px){
  .sm-road{ grid-template-columns:1fr; gap:var(--s-6) }
  .sm-road__l{ display:none }
  .sm-stop{ flex-direction:row; align-items:center; gap:var(--s-4); text-align:left }
  .sm-stop__t{ min-height:0; flex:1 1 0 }
}

/* ── 06 · НУМЕРОВАННЫЕ ОБЕЩАНИЯ — по 37signals.com ─────────────────────────
   Номер — реальный текст в колонке 2.8ch с табличными цифрами; формулировка
   рядом тем же кеглем; пояснение под ней с тем же отступом 2.8ch.
   Ни маркеров, ни карточек, ни рамок. */
.sm-man{ max-width:76ch }
.sm-man > li{ padding:var(--s-5) 0; border-bottom:1px solid var(--line) }
.blk--dark .sm-man > li{ border-bottom-color:var(--line-i) }
.sm-man > li:first-child{ padding-top:0 }
.sm-man__h{ display:flex }
.sm-man__n{
  width:2.8ch; flex-shrink:0; font-family:var(--f-mono); font-weight:500; color:var(--acc);
  font-variant-numeric:tabular-nums; font-size:var(--t-h4); line-height:1.35;
}
.blk--dark .sm-man__n{ color:var(--acc-hi) }
.sm-man__t{
  width:calc(100% - 2.8ch); font-family:var(--f-disp); font-size:var(--t-h4);
  line-height:1.35; font-weight:500; letter-spacing:-.01em;
}
.sm-man__x{
  margin-left:2.8ch; max-width:56ch; margin-top:var(--s-2);
  color:var(--soft); font-size:var(--t-body);
}
.blk--dark .sm-man__x{ color:var(--soft-i) }

/* ── 07 · ПРАВОВАЯ ВРЕЗКА — по developer.mozilla.org + вид сноски gwern.net ─
   Отличается от абзаца ровно четырьмя вещами: левая полоса 2px, заливка,
   иконка и отступы 48/16. Слово-маркер — <strong> внутри первого абзаца,
   не отдельная шапка. Полоса — псевдоэлемент, только у него скругляются
   концы; border скруглить нельзя. */
.sm-note{
  --sm-accent:var(--err);
  position:relative; background:color-mix(in srgb, var(--sm-accent) 9%, var(--page));
  border-radius:var(--r-fld); padding:var(--s-4) var(--s-4) var(--s-4) var(--s-7);
  margin-block:var(--s-5); font-size:var(--t-body); line-height:1.6; max-width:78ch;
}
.blk--dark .sm-note{ background:color-mix(in srgb, var(--sm-accent) 22%, var(--bg)) ; color:var(--ink-i) }
.sm-note::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--sm-accent); border-radius:var(--r-pill);
}
.sm-note::before{
  content:""; position:absolute; left:var(--s-4); top:20px; width:17px; height:17px;
  background-color:var(--sm-accent);
  mask-size:cover; -webkit-mask-size:cover;
  mask-image:var(--sm-icon); -webkit-mask-image:var(--sm-icon);
}
.sm-note strong{ font-weight:600 }
.sm-note a{ color:var(--sm-accent); text-underline-offset:3px }
.sm-note--warn{ --sm-accent:var(--err);
  --sm-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>") }
.sm-note--info{ --sm-accent:var(--acc);
  --sm-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>") }
.sm-note--ok{ --sm-accent:var(--ok);
  --sm-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/><path d='M9 18h6'/><path d='M10 22h4'/></svg>") }

/* ── 08 · ЧАСТЫЕ ВОПРОСЫ — по basecamp.com/pricing ─────────────────────────
   Взят атрибут name на группе <details>: раскрытия эксклюзивные, открытие
   второго вопроса закрывает первый, без единой строки JS. Линии между
   вопросами и по краям списка; ни рамки, ни заливки, ни тени. */
.sm-faq > details{ border-top:1px solid var(--line) }
.sm-faq > details:last-of-type{ border-bottom:1px solid var(--line) }
.blk--dark .sm-faq > details{ border-top-color:var(--line-i) }
.blk--dark .sm-faq > details:last-of-type{ border-bottom-color:var(--line-i) }
.sm-faq summary{
  display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-5) 0;
  cursor:pointer; list-style:none; font-family:var(--f-disp);
  font-size:var(--t-h4); line-height:1.4; font-weight:500;
}
.sm-faq summary::-webkit-details-marker{ display:none }
.sm-faq summary::after{
  content:""; width:11px; height:11px; flex-shrink:0; margin:8px 0 0 auto;
  border-right:1.5px solid var(--acc); border-bottom:1.5px solid var(--acc);
  transform:rotate(45deg); transition:transform var(--d-base) var(--e-out);
}
.blk--dark .sm-faq summary::after{ border-color:var(--acc-hi) }
.sm-faq details[open] summary::after{ transform:rotate(-135deg) }
.sm-faq__a{ padding:0 40px var(--s-5) 0; max-width:72ch; color:var(--soft) }
.blk--dark .sm-faq__a{ color:var(--soft-i) }
.sm-faq__a p + p{ margin-top:var(--s-3) }
@media (prefers-reduced-motion:reduce){ .sm-faq summary::after{ transition:none } }

/* ── 09 · ГРАНИЦЫ РАБОТ — по docs.github.com/site-policy ───────────────────
   table-layout:fixed даёт 50/50 без единой заданной ширины. Рамок у ячеек
   нет; линия под шапкой нарисована внутренней тенью, потому что при
   position:sticky border у thead не рисуется. Зебра красит нечётные строки,
   а не чётные. Кегль на ступень мельче корпуса. */
.sm-split{
  width:100%; table-layout:fixed; font-size:var(--t-small); line-height:21px;
  border-collapse:separate; border-spacing:0;
}
.sm-split th{
  font-weight:600; text-align:left; padding:var(--s-3) var(--s-2); vertical-align:top;
  box-shadow:inset 0 -2px 0 var(--line);
}
.blk--dark .sm-split th{ box-shadow:inset 0 -2px 0 var(--line-i) }
.sm-split td{ padding:var(--s-3) var(--s-2); vertical-align:top }
.sm-split th:first-child,.sm-split td:first-child{ padding-left:14px }
.sm-split tbody tr:nth-child(odd) td{ background:var(--surf) }
.blk--dark .sm-split tbody tr:nth-child(odd) td{ background:var(--bg-2) }
.sm-split tbody tr:nth-child(odd) td:first-child{ border-radius:var(--r-fld) 0 0 var(--r-fld) }
.sm-split tbody tr:nth-child(odd) td:last-child{ border-radius:0 var(--r-fld) var(--r-fld) 0 }
.sm-split__you{ color:var(--soft) }
.blk--dark .sm-split__you{ color:var(--soft-i) }

/* ── 10 · СТАТЬИ ПО ТЕМЕ — по worksinprogress.co ───────────────────────────
   Замкнутый прямоугольник в рамке 1px, внутри две горизонтальные линии,
   рубрика в подвале с правой границей. Тени и заливки нет. Отход от
   источника один: радиус --r-card и картинка сверху — СВГ-обложки
   остаются решением владельца. */
.sm-wip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px }
.sm-wip__c{
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column; background:none;
  transition:border-color var(--d-fast) var(--e-out);
}
.blk--dark .sm-wip__c{ border-color:var(--line-i) }
.sm-wip__c:hover{ border-color:var(--acc) }
.blk--dark .sm-wip__c:hover{ border-color:var(--acc-hi) }
.sm-wip__img{ display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover }
.sm-wip__h{ padding:15px 15px 10px }
.sm-wip__h h3{ font-family:var(--f-disp); font-size:var(--t-h4); line-height:1.3; font-weight:500 }
.sm-wip__by{
  font-family:var(--f-mono); font-size:var(--t-micro); line-height:15px;
  color:var(--soft); margin-top:6px; letter-spacing:.04em;
}
.blk--dark .sm-wip__by{ color:var(--soft-i) }
.sm-wip__b{
  border-top:1px solid var(--line); padding:15px; display:flex; flex-direction:column;
  justify-content:space-between; gap:var(--s-4); flex:1 1 auto;
}
.blk--dark .sm-wip__b{ border-top-color:var(--line-i) }
.sm-wip__b p{ font-size:var(--t-small); line-height:1.55; color:var(--soft) }
.blk--dark .sm-wip__b p{ color:var(--soft-i) }
.sm-wip__more{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:500; margin-left:auto;
  color:var(--acc); border-bottom:1px solid currentColor; letter-spacing:.04em;
}
.blk--dark .sm-wip__more{ color:var(--acc-hi) }
.sm-wip__f{ border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr }
.blk--dark .sm-wip__f{ border-top-color:var(--line-i) }
.sm-wip__tag{
  font-family:var(--f-mono); font-size:var(--t-micro); line-height:15px; color:var(--soft);
  padding:5px 15px; border-right:1px solid var(--line); letter-spacing:.04em;
}
.blk--dark .sm-wip__tag{ color:var(--soft-i); border-right-color:var(--line-i) }

/* ── 11 · ПРОЗА С ПОЛЕМ — по distill.pub + вид сноски gwern.net ────────────
   Именованные линии сетки: проза в text, схема во всю полосу — screen.
   Определение позиционируется absolute от своего абзаца (механика gwern):
   через grid-column:gutter оно заняло бы отдельную строку сетки и оставило
   дыру в колонке текста. Ниже 1060px позиционирование снимается. */
.sm-doc{
  display:grid; row-gap:var(--s-4);
  grid-template-columns:[screen-start]1fr[text-start]minmax(0,68ch)[text-end gutter-start]0[gutter-end]1fr[screen-end];
}
.sm-doc > *{ grid-column:text }
.sm-doc__wide{ grid-column:screen }
.sm-doc__blk{ grid-column:text; position:relative }
.sm-doc p{ max-width:68ch }
.sm-doc__side{
  font-size:var(--t-small); line-height:20px; color:var(--soft);
  border-top:1px dotted color-mix(in srgb, var(--soft) 35%, var(--page));
  border-bottom:1px dotted color-mix(in srgb, var(--soft) 35%, var(--page));
  padding:10px 0; margin-top:var(--s-3);
}
.blk--dark .sm-doc__side{
  color:var(--soft-i); border-top-color:var(--line-i); border-bottom-color:var(--line-i);
}
.sm-doc__side b{
  display:block; font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc); font-weight:400; margin-bottom:4px;
}
.blk--dark .sm-doc__side b{ color:var(--acc-hi) }
@media (min-width:1060px){
  .sm-doc{
    grid-template-columns:[screen-start]1fr[text-start]minmax(0,68ch)[text-end]32px[gutter-start]220px[gutter-end]1fr[screen-end];
  }
  .sm-doc__side{ position:absolute; left:calc(100% + 32px); top:2px; width:220px; margin:0 }
}

/* ── 12 · ЛЕНТА С МЕТКОЙ — по linear.app/changelog ─────────────────────────
   Двенадцать колонок, области "a a a b b b b b b c c c": метка слева, текст
   в середине, три колонки пустого поля справа — оно держит меру без
   max-width. У каждой записи СВОЯ липкая ячейка метки, поэтому предыдущая
   выталкивается границей следующей записи и синхронизировать со скроллом
   нечего. Линия — отдельный элемент, а не border ячейки: на телефоне
   снимается одним display:none. */
.sm-feed__e{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-6);
  position:relative; padding-bottom:var(--s-7);
}
.sm-feed__rail{
  position:absolute; width:2px; height:100%; top:0; left:9px;
  background:var(--line); border-radius:var(--r-pill);
}
.blk--dark .sm-feed__rail{ background:var(--line-i) }
.sm-feed__d{
  grid-column:1/4; padding-left:var(--s-5); position:sticky; top:var(--s-5); align-self:start;
  font-size:var(--t-small); line-height:21px; font-variant-numeric:tabular-nums;
}
.sm-feed__d span{
  display:block; font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc); margin-top:4px;
}
.blk--dark .sm-feed__d span{ color:var(--acc-hi) }
.sm-feed__b{ grid-column:4/10 }
.sm-feed__b h3{
  font-family:var(--f-disp); font-size:var(--t-h3); line-height:1.15; font-weight:500;
  letter-spacing:-.02em; margin-bottom:var(--s-3);
}
.sm-feed__b p{ color:var(--soft); max-width:64ch }
.blk--dark .sm-feed__b p{ color:var(--soft-i) }
.sm-feed__sub{ margin-top:var(--s-5); border-top:1px solid var(--line) }
.blk--dark .sm-feed__sub{ border-top-color:var(--line-i) }
.sm-feed__sub > div{
  display:flex; justify-content:space-between; gap:var(--s-4); padding:14px 0;
  border-bottom:1px solid var(--line); font-size:var(--t-small);
}
.blk--dark .sm-feed__sub > div{ border-bottom-color:var(--line-i) }
.sm-feed__sub b{
  font-weight:400; color:var(--soft); font-variant-numeric:tabular-nums;
  font-family:var(--f-mono); font-size:var(--t-small); white-space:nowrap;
}
.blk--dark .sm-feed__sub b{ color:var(--soft-i) }
@media (max-width:860px){
  .sm-feed__e{ grid-template-columns:repeat(4,1fr); gap:var(--s-3); padding-bottom:var(--s-6) }
  .sm-feed__rail{ display:none }
  .sm-feed__d{
    grid-column:1/5; padding-left:0; position:relative; top:0; margin-bottom:var(--s-3);
  }
  .sm-feed__b{ grid-column:1/5 }
}

/* ── ДОБОРКА СТРАНИЦЫ НА СХЕМАХ ────────────────────────────────────────────
   Правила ниже не относятся к отдельной схеме: они снимают наследие прежних
   ТЗ на странице, где ведут схемы, и держат симметрию рядов. */

/* Шапка секции — ВСЕГДА один столбик и по левому краю. Двухколоночную
   раскладку ей задают :has()-правила из style.css: заголовок слева, подводка
   справа, между ними полполосы пустоты. Специфичность поднята повтором
   класса — перебиваем без !important. */
.page--sm .blk .sec .sec__head.sec__head.sec__head{
  display:block; grid-template-columns:none; text-align:left;
  max-width:none; margin-inline:0;
}
.page--sm .blk .sec .sec__head.sec__head.sec__head > *{ margin-inline:0 }
.page--sm .blk .sec .sec__head.sec__head.sec__head > .lead.lead.lead{
  margin:var(--s-4) 0 0; max-width:min(100%, 62ch); padding:0;
  background:none; border:0; box-shadow:none;
}

/* Цифра-призрак за заголовком. При схемах крупное число живёт внутри блока
   (развилка, смета, полоса этапов), и второй призрачный счётчик спорит с ним. */
.page--sm .ghost{ display:none }

/* Список из пяти и более пунктов — в две колонки: одна колонка на 76ch
   оставляет пустой правую половину полосы. Порядок чтения сохраняется
   сверху вниз внутри колонки. */
/* Колонки (CSS columns) балансируют по высоте: при пяти пунктах слева
   оказывается два, справа три, и левая колонка обрывается на середине.
   Сетка раскладывает по строкам — низ у обеих колонок ровный, а нечётный
   последний пункт занимает всю ширину. */
@media (min-width:1024px){
  /* Зазор между колонками сделан отступами внутри ячеек, а не column-gap:
     с зазором линии соседних пунктов не смыкаются, и ряд выглядит как две
     оборванные чёрточки вместо одной сплошной линии под строкой. */
  .sm-man--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:0; max-width:none }
  .sm-man--2 > li:nth-child(odd){ padding-right:var(--s-8) }
  .sm-man--2 > li:nth-child(even){ padding-left:var(--s-8) }
  .sm-man--2 > li:last-child:nth-child(odd){ grid-column:1 / -1; padding-right:0 }
  /* Линия рисуется под каждым пунктом; у последнего ряда её быть не должно.
     При чётном числе пунктов последний ряд — два элемента, при нечётном —
     один растянутый. */
  .sm-man--2:has(> li:last-child:nth-child(even)) > li:nth-last-child(-n+2){ border-bottom:0 }
  .sm-man--2:has(> li:last-child:nth-child(odd)) > li:last-child{ border-bottom:0 }
  /* в двух колонках верх у всех пунктов одинаковый: :first-child знает только
     первый по разметке, а верхний в правой колонке остался бы со сдвигом */
  /* обе колонки начинаются с одной высоты: отрицательный отступ контейнера
     поднимал только первый пункт по разметке, и правая колонка съезжала вниз */
  .sm-man--2 > li{ break-inside:avoid; -webkit-column-break-inside:avoid;
    padding-top:0; padding-bottom:var(--s-5) }
  .sm-man--2 > li + li{ padding-top:var(--s-5) }
  .sm-man--2 > li:nth-child(n+2){ padding-top:var(--s-5) }
}

/* Смета и её сноски — один ряд: выписка слева, ориентиры и переход справа.
   Иначе правая половина тёмной полосы остаётся пустой. */
.sm-invrow{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:var(--s-8); align-items:start }
.sm-invrow__x > p{ max-width:52ch }
.sm-invrow__x > p + p{ margin-top:var(--s-4) }
@media (max-width:1023px){ .sm-invrow{ grid-template-columns:1fr; gap:var(--s-6) } }

/* Выписка шире 900 px: шапка и итог во всю ширину, состав в две колонки.
   Одной колонкой она уходила на два экрана вниз, а рядом стоял пустой столб. */
@media (min-width:1024px){
  .sm-invrow{ display:block }
  .sm-inv{ max-width:none }
  /* Шапка: итог слева на всю высоту, пары «объект / устройств / что входит»
     подряд справа. Без span у итога строки растягивались по его высоте и
     между парами появлялись провалы в сотню пикселей. */
  .sm-inv__top{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--s-7); align-items:start;
  }
  .sm-inv__top > .sm-inv__hd{ grid-column:1; align-self:start }
  .sm-inv__top > .sm-inv__meta{ grid-column:2 }
  .sm-inv__hd{ border-bottom:0; padding-bottom:0; margin-bottom:0 }
  .sm-inv__rows{
    display:grid; grid-template-columns:1fr 1fr; column-gap:0;
  }
  .sm-inv__rows > .sm-inv__row:nth-child(odd){ padding-right:var(--s-8) }
  .sm-inv__rows > .sm-inv__row:nth-child(even){ padding-left:var(--s-8) }
  /* линия под последним рядом не нужна: ниже идёт пунктир перед итогом */
  .sm-inv__rows:has(> .sm-inv__row:last-child:nth-child(even)) > .sm-inv__row:nth-last-child(-n+2),
  .sm-inv__rows:has(> .sm-inv__row:last-child:nth-child(odd)) > .sm-inv__row:nth-last-child(-n+2){
    border-bottom:0; margin-bottom:0;
  }
  .sm-invrow__x{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7);
    align-items:start; margin-top:var(--s-6);
  }
  .sm-invrow__x .btn-row{ grid-column:1 / -1 }
}

/* Ряд цен в шапке уступает место карточке контактов — тем же приёмом, что был
   у прежней полосы .facts: горизонтальный резерв справа ровно под ширину
   карточки плюс отбивка. Ряд сдвигается влево, карточка встаёт на своё место
   у правого края и держится нижней кромки блока. Чтобы сумма не рвалась в
   суженной колонке, кегль цены берётся от ширины самой колонки (см. ниже). */
@media (min-width:1200px){
  .hero-wrap .sm-fork,
  .hero .sm-fork{
    padding-right:calc(min(300px,34%) + var(--s-6));
  }
  /* три колонки — только там, где карточек действительно три. На узкой
     раскладке .hero--split их две, и жёсткий repeat(3,1fr) делил полосу
     на трети: карточка выходила 124 px и число не помещалось. */
  .hero-wrap .sm-fork:has(> .sm-fork__c:nth-child(3)),
  .hero .sm-fork:has(> .sm-fork__c:nth-child(3)){
    grid-template-columns:repeat(3,1fr);
  }
  /* в суженной колонке отступ 48 px съедал треть ширины и ронял кегль суммы
     до подписи: в шапке берём 24 px, цифра снова читается как цифра оффера */
  .hero-wrap .sm-fork > .sm-fork__c,
  .hero .sm-fork > .sm-fork__c{ padding:var(--s-5) }
}
/* 900–1199: под три колонки и карточку ширины уже не хватает — карточка
   возвращается в поток, ряд занимает полосу целиком. Правило повторяет
   поведение прежней полосы .facts на этих ширинах. */
@media (min-width:900px) and (max-width:1199px){
  .page--sm .hero-wrap:has(.sm-fork){ padding-bottom:0 }
  .page--sm .hero-wrap:has(.sm-fork) .hero__cc,
  .page--sm .hero:has(.sm-fork) .hero__cc{
    position:static; width:auto; margin-top:var(--gap-blk); padding:var(--s-5);
  }
  .hero-wrap .sm-fork, .hero .sm-fork{ padding-right:0 }
}

/* Прайс на телефоне: три колонки на 390 px превращают примечание в столбик
   по два слова. Строка разворачивается в блок — название, под ним единица и
   цена одной строкой, примечание во всю ширину. Шапка не нужна: подписи
   переехали в саму строку. */
@media (max-width:767px){
  /* Строка становится сеткой: название и цена в одну линию, примечание —
     во всю ширину под ними. td:first-child раскрывается через display:contents,
     иначе название и примечание остались бы одной ячейкой и цена ушла бы
     под текст. */
  .sm-pl, .sm-pl tbody, .sm-pl thead{ display:block; width:auto }
  .sm-pl colgroup{ display:none }
  /* шапку не прячем: в части прайсов колонка называется «₽», и без неё
     на телефоне пропадает единица измерения у всех сумм разом */
  .sm-pl thead tr{ padding:var(--s-2) 0; border-bottom:1px solid var(--line) }
  .sm-pl th{ background:none; border:0; border-radius:0; padding:0;
    font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.08em;
    text-transform:uppercase; color:var(--soft) }
  .sm-pl th:first-child{ grid-column:1; grid-row:1 }
  .sm-pl th + th{ grid-column:2; grid-row:1 }
  .sm-pl th + th + th{ grid-column:3; grid-row:1 }
  .sm-pl tr{
    display:grid; grid-template-columns:1fr auto auto; column-gap:var(--s-3);
    align-items:baseline; padding:var(--s-4) 0; border-bottom:1px solid var(--line);
  }
  .blk--dark .sm-pl tr{ border-bottom-color:var(--line-i) }
  .sm-pl tr:last-child{ border-bottom:0 }
  .sm-pl tr:not(:last-child) td{ border-bottom:0 }
  .sm-pl td{ display:block; padding:0; width:auto }
  .sm-pl td:first-child{ display:contents }
  .sm-pl__t{ grid-column:1; grid-row:1 }
  .sm-pl td + td{ grid-column:2; grid-row:1; font-family:var(--f-mono);
    font-size:var(--t-micro); letter-spacing:.06em; color:var(--soft) }
  .sm-pl td + td + td{ grid-column:3; grid-row:1; color:var(--ink);
    font-family:var(--f-mono); font-size:var(--t-small); font-variant-numeric:tabular-nums }
  .blk--dark .sm-pl td + td + td{ color:var(--ink-i) }
  .blk--dark .sm-pl td + td{ color:var(--soft-i) }
  .sm-pl__x{ grid-column:1 / -1; grid-row:2; margin-top:var(--s-2) }
}


/* Подстатья прайса — строка второго уровня внутри той же таблицы. Отступ и
   тихий цвет вместо отдельной вложенной таблицы. */
.sm-pl tr.sm-pl__sub td:first-child{ padding-left:var(--s-6); color:var(--soft) }
.blk--dark .sm-pl tr.sm-pl__sub td:first-child{ color:var(--soft-i) }

/* Строка итога в прайсе: у Vercel таких строк нет, поэтому берём приём сметы —
   итог отличается весом и линией сверху, а не заливкой и не кеглем. */
.sm-pl tr.sm-pl__tot td{ font-weight:600; border-top:1px solid var(--line); border-bottom:0 }
.blk--dark .sm-pl tr.sm-pl__tot td{ border-top-color:var(--line-i) }
.sm-pl tr.sm-pl__tot + tr td{ border-top:0 }

/* Метка внутри формулировки пункта («15 минут, бесплатно») — тише заголовка
   и моноширинная: это служебная приписка, а не часть фразы. */
.sm-man__t .numlist__m{
  display:inline-block; margin-left:var(--s-3); font-family:var(--f-mono);
  font-size:var(--t-micro); font-weight:400; letter-spacing:.08em; color:var(--soft);
  vertical-align:middle;
}
.blk--dark .sm-man__t .numlist__m{ color:var(--soft-i) }

/* Подпись таблицы дублирует заголовок секции, под которым таблица и стоит.
   Скрываем визуально, оставляя для скринридера. */
.sm-pl caption{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Первая ячейка строки бывает <th scope="row"> — по виду это обычная ячейка,
   а не заголовок: капс и моно ей не нужны. */
.sm-pl tbody th{
  font-family:var(--f-body); font-size:var(--t-small); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink);
  text-align:left; padding:var(--s-3) 10px; vertical-align:top; background:none;
  border:0; border-bottom:1px solid var(--line); box-shadow:none;
}
.blk--dark .sm-pl tbody th{ color:var(--ink-i); border-bottom-color:var(--line-i) }
.sm-pl tbody tr:last-child th{ border-bottom:0 }
/* Резерв под карточку контактов — горизонтальный (см. блок «Ряд цен в шапке»):
   ряд цен сдвинут влево, карточка стоит справа и наезжает на нижнюю кромку
   блока, как задумано в style.css. Вертикальный запас снят: он отодвигал
   карточку от кромки и растил первый экран. Страницам без ряда цен запас
   не нужен вовсе — карточка там ни на что не ложится. */

/* Ширины колонок прайса. Без ограничения первая колонка забирает всю полосу,
   и «Единица» с «Ценой» уезжают к правому краю, отрываясь от строки. У Vercel
   первая колонка — 44 % таблицы; берём близкие пропорции, но в процентах,
   чтобы работало на любой ширине полосы. */
/* В таблице, где во второй колонке не значение, а фраза, первая колонка
   в 56 % оставляла тексту половину полосы и рвала название на четыре строки.
   Там пропорция обратная: название — треть, объяснение — две трети. */
@media (min-width:768px){
  /* раскладку фиксируем: при table-layout:auto браузер считает проценты
     пожеланием и отдаёт длинному тексту всё, что тот попросит — первая
     колонка схлопывалась до 123 px, а таблица вылезала за полосу на 22 px */
  .sm-pl.sm-pl--wide{ table-layout:fixed }
  .sm-pl.sm-pl--wide th:first-child,
  .sm-pl.sm-pl--wide td:first-child{ width:30% }
  /* в прайсе значения не переносятся — «2 500 ₽» рвать нельзя. Здесь во второй
     колонке фраза, и запрет переноса обрезал её по краю таблицы. */
  .sm-pl.sm-pl--wide th:not(:first-child),
  .sm-pl.sm-pl--wide td:not(:first-child){ white-space:normal }
}
.sm-pl th:first-child, .sm-pl td:first-child{ width:56% }
.sm-pl th:not(:first-child), .sm-pl td:not(:first-child){ white-space:nowrap }
.sm-pl tbody td:not(:first-child){ color:var(--soft) }
.blk--dark .sm-pl tbody td:not(:first-child){ color:var(--soft-i) }
@media (max-width:767px){
  .sm-pl th:first-child, .sm-pl td:first-child{ width:auto }
  .sm-pl th:not(:first-child), .sm-pl td:not(:first-child){ white-space:normal }
}

/* Подвал секции на тёмной полосе получал заливку --bg-2 из прежних правил:
   под кнопками появлялся прямоугольник, обрывающийся по краю секции. */
.page--sm .sec__foot,
.page--sm .blk--dark .sec__foot{ background:none; border-radius:0 }
.page--sm .sec__foot:has(> .btn),
.page--sm .sec__foot:has(> a.btn){
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
}

/* ── ВОЗДУХ ────────────────────────────────────────────────────────────────
   Слой редизайна поднял шаг блоков и отбивку шапки под прежнюю раскладку,
   где секция состояла из карточек. У схем плотность своя: таблица, список и
   выписка сами держат ритм линиями и отступами строк, поэтому лишний воздух
   между шапкой и телом растягивал секции вдвое против содержимого. */
.page--sm .sec__head{ margin-bottom:var(--s-6) }
@media (min-width:1024px){ .page--sm .sec__head{ margin-bottom:var(--s-7) } }
.page--sm .sec{ --sec-gap:var(--s-6) }
.page--sm .sec__foot,
.page--sm .sec__note{ margin-top:var(--s-6); padding-top:var(--s-5) }
/* Подвал секции — одна полоса, а не несколько отдельно висящих абзацев.
   Линия сверху уже есть у самого подвала; сноскам внутри него свои отбивки
   и свои линии не нужны, иначе между двумя строками сноски открывается
   разрыв в 40 px и полоса рассыпается. */
.page--sm .sec__foot > .sec__note,
.page--sm .sec__foot > p{ margin-top:0; padding-top:0; border-top:0 }
/* только для текстового подвала: в подвале-ряду кнопок отбивку держит gap,
   а margin-top сдвигал вторую кнопку на 6 px вниз относительно первой */
.page--sm .sec__foot:not(:has(> .btn)):not(:has(> a.btn)) > * + *{ margin-top:var(--s-3) }
/* Пара «шапка + содержание» внутри .sec__stack складывала два отступа: 48 px
   от шапки плюс 32 px зазора сетки — между заголовком и первой строкой
   открывалось 80 px пустоты. Расстояние держит зазор сетки, отступ шапки
   внутри стопки снимается. */
.page--sm .sec__stack{ gap:var(--s-7) }
.page--sm .sec__stack > .sec__head{ margin-bottom:0 }
/* Служебная полоса в середине секции (а не в самом низу) читалась подписью
   к следующему заголовку: снизу у неё не было воздуха вовсе. */
.page--sm .sec__foot:not(:last-child){ margin-bottom:var(--s-8) }
/* Мера для сноски. Слой редизайна снимает у неё ограничение ширины, чтобы
   полоса шла во всю секцию; на длинной сноске это давало строку в 130 знаков
   при потолке 95. Ширина полосы остаётся, длина строки возвращается. */
.page--sm .sec__foot > p,
.page--sm .sec__foot > .sec__note{ max-width:min(100%, 88ch) }
.page--sm .sm-pl{ margin-bottom:var(--s-5) }
.page--sm .sm-plg{ padding:var(--s-2) 0 var(--s-3) }
.page--sm .btn-row{ margin-top:var(--s-5) }

/* Пункт без пояснения — одна строка формулировки: интервал под абзац ему
   не нужен, иначе короткий список растягивается на два экрана. */
.sm-man > li{ padding:var(--s-4) 0 }
.sm-man > li:has(.sm-man__x){ padding:var(--s-5) 0 }
.sm-man > li:last-child{ border-bottom:0 }


/* Два-три пункта в столбик оставляют пустой правую половину полосы. Такой
   список раскладывается в ряд: номер и формулировка сверху, пояснение под
   ними, колонки по числу пунктов. Линия — вертикальная, как между колонками
   в схеме 04, а не горизонтальная между строками. */
@media (min-width:860px){
  .sm-man--row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:var(--s-7); max-width:none }
  .sm-man--row > li{ padding:0; border-bottom:0; border-left:1px solid var(--line);
    padding-left:var(--s-5) }
  .blk--dark .sm-man--row > li{ border-left-color:var(--line-i) }
  .sm-man--row > li:first-child{ border-left:0; padding-left:0 }
  .sm-man--row .sm-man__x{ margin-left:0; max-width:44ch }
}

/* ── МЕРА СТРОКИ ───────────────────────────────────────────────────────────
   В style.css есть базовое правило `main li, main p, main dd, main dt
   { max-width: min(100%, 60ch) }` — оно держит меру там, где ширину задаёт
   текст. В схемах ширину задаёт раскладка: колонка списка, ячейка таблицы,
   строка выписки. Меру внутри них держат собственные правила схем
   (.sm-man__x — 56ch, .sm-note — 78ch, .sm-doc p — 68ch), поэтому сами
   контейнеры от базового ограничения освобождаются. Иначе пункт списка
   упирался в 600 px посреди полосы в 1237 и справа оставалась пустота. */
.page--sm .sm-man > li,
.page--sm .sm-man__h,
.page--sm .sm-cond dt,
.page--sm .sm-cond dd,
.page--sm .sm-pl td, .page--sm .sm-pl th,
.page--sm .sm-inv__row, .page--sm .sm-inv__pair,
.page--sm .sm-fork__cond, .page--sm .sm-fork__u, .page--sm .sm-fork__p,
.page--sm .sm-wip__b p, .page--sm .sm-wip__by,
.page--sm .sm-feed__d, .page--sm .sm-feed__sub div,
.page--sm .sm-split td, .page--sm .sm-split th,
.page--sm .sm-stop__t, .page--sm .sm-stop__d{ max-width:none }

/* ── ДВА НАСЛЕДНЫХ БЛОКА, КОТОРЫЕ ОСТАВЛЯЛИ ПОЛОСУ ПУСТОЙ ─────────────────
   Конвертер их не трогал: это не карточки и не таблицы, а списки и
   определения. На полосе в 1237 px оба упирались в меру строки и занимали
   левую половину — справа не было ничего.

   .marks — маркированный список коротких пунктов. Раскладывается в две
   колонки по строкам: низ у колонок ровный, нечётный последний пункт
   занимает всю ширину. В блоге (.art__tldr) колонка узкая — там не трогаем.

   .deflist — пары «термин — объяснение». Вместо «термин слева, объяснение
   справа с мерой 48ch» пары встают по две в ряд, термин над объяснением:
   это схема 04, и полоса заполняется целиком. */
@media (min-width:1024px){
  .page--sm .marks:not(.art__tldr){
    display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s-9); row-gap:var(--s-3);
  }
  .page--sm .marks:not(.art__tldr) > li:last-child:nth-child(odd){ grid-column:1 / -1 }
  .page--sm .marks:not(.art__tldr) > li{ max-width:none }

  .page--sm .deflist{ grid-template-columns:1fr 1fr; column-gap:var(--s-9); border-top:0 }
  .page--sm .deflist > div{
    grid-template-columns:1fr; gap:var(--s-2);
    border-top:1px solid var(--line); padding-block:var(--s-5);
  }
  .blk--dark .page--sm .deflist > div,
  .page--sm .blk--dark .deflist > div{ border-top-color:var(--line-i) }
  .page--sm .deflist > div + div{ border-top:1px solid var(--line) }
  .page--sm .deflist dd{ max-width:none }
}

/* Список ссылок-переходов («Обо мне → Прайс → Контакты») стоял столбиком
   у левого края: три коротких строки и пустая полоса справа. В ряд он
   занимает ту же высоту, что одна строка, и полоса перестаёт пустовать. */
@media (min-width:768px){
  .page--sm ul.u-flow:has(> li > a.link--cta){
    display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-7); align-items:baseline;
  }
  .page--sm ul.u-flow:has(> li > a.link--cta) > li{ max-width:none }
  .page--sm .req-line{ max-width:none }
}

/* ── ФИРМЕННАЯ ПЛАШКА КОНТАКТОВ ───────────────────────────────────────────
   В redesign.css есть правило «.card без ссылки — это не карточка»: оно
   снимает фон, рамку, радиус и оставляет одну левую линию. Карточка контактов
   в шапке тоже размечена как .card, и правило раздело её до текста с линией —
   на тёмном блоке это читалось как сбой вёрстки. Возвращаем ей вид из
   style.css: плашка --bg-2, рамка, радиус и уголковые засечки. */
.page--sm .hero__cc,
.page--sm .card.hero__cc{
  background:var(--bg-2);
  border:1px solid var(--line-i);
  border-radius:var(--r-card);
  padding:var(--s-4);
  box-shadow:none;
}
.page--sm .hero__cc::before,
.page--sm .hero__cc::after{
  content:""; position:absolute; width:var(--s-3); height:var(--s-3);
  border:1px solid var(--acc-hi); opacity:.55;
}
.page--sm .hero__cc::before{ top:var(--s-2); left:var(--s-2); border-right:0; border-bottom:0 }
.page--sm .hero__cc::after{ bottom:var(--s-2); right:var(--s-2); border-left:0; border-top:0 }

/* ── КАРТОЧКИ: ОДИН ВИД ВМЕСТО ТРЁХ ───────────────────────────────────────
   На тёмных полосах карточки расходились на три разных вида: часть теряла
   заливку и оставалась с левой линией (правило редизайна), часть сохраняла
   подложку --bg-2 и читалась как чёрная заплата на градиенте, часть шла
   без внутренних отступов и текст касался краёв.

   Правило: карточка, по которой нельзя перейти, — это колонка текста.
   Ни заливки, ни рамки; отделяет левая линия, отступ один и тот же, высота
   тянется на весь ряд, чтобы линии соседних колонок были одной длины.
   Заливку сохраняют только те, по которым переходят (.card--link) и постеры. */
.page--sm .blk .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk--dark .card.card--dark:not(.card--link):not(.hero__cc){
  background:none; background-image:none; box-shadow:none;
  border:0; border-radius:0;
  border-left:1px solid var(--line);
  padding:0 0 0 var(--s-5);
  align-self:stretch;
}
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk--dark .card.card--dark:not(.card--link):not(.hero__cc){ border-left-color:var(--line-i) }
.page--sm .card:not(.card--link):not(.card--cover):not(.hero__cc) > *:first-child{ margin-top:0 }
.page--sm .card:not(.card--link):not(.card--cover):not(.hero__cc) .measure{ max-width:none }
@media (max-width:767px){
  .page--sm .blk .card:not(.card--link):not(.card--cover):not(.hero__cc),
  .page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc),
  .page--sm .blk--dark .card.card--dark:not(.card--link):not(.hero__cc){
    border-left:0; border-top:1px solid var(--line); padding:var(--s-4) 0 0;
  }
  .page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc),
  .page--sm .blk--dark .card.card--dark:not(.card--link):not(.hero__cc){ border-top-color:var(--line-i) }
}

/* Карточка на тёмной полосе больше не залита светлым — значит и текст в ней
   не может быть тёмного контекста. В style.css есть правило «белая карточка
   внутри тёмного блока»: оно красит заголовок и текст в --ink/--soft, а
   ссылку — в --acc (тёмно-синий). После снятия заливки это давало тёмный
   текст и нечитаемую ссылку на тёмном фоне: «Договор и гарантия на два года»
   пропадала в фоне. Возвращаем тёмный контекст. */
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .card__title,
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) h3,
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) h4{ color:var(--ink-i) }
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .card__text,
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .muted,
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .card__meta{ color:var(--soft-i) }
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .card__more,
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .link--cta,
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc) .link{ color:var(--acc-hi) }
/* Та же беда вне карточек: ссылка-стрелка на тёмной полосе красилась --acc. */
.page--sm .blk--dark .card__more,
.page--sm .blk--dark .link--cta{ color:var(--acc-hi) }

/* Плашка на тёмном заливку сохраняет — но по одному образцу с карточками.
   Заливку снять нельзя: на ядре градиента даже чистый белый даёт 4,2 при
   пороге 4,5 (замер в style.css, § сноски на тёмном), и подложка --bg-2
   здесь не украшение, а читаемость. Чёрной заплатой она выглядела не из-за
   заливки, а из-за нулевых внутренних отступов и острых углов: текст лежал
   на самой кромке. Приводим к виду карточки — радиус --r-card, отступ s-5. */
.page--sm .blk--dark .plate,
.page--sm .blk--dark .sec__note{ border-radius:var(--r-card) }
/* Отступ — только тем, у кого заливка осталась. Вложенную плиту (сноска
   внутри подвала секции, плашка внутри карточки) слой редизайна намеренно
   распластывает: заливки у неё нет, и отступ 24 px превращался в абзац,
   сдвинутый вправо без всякой причины. */
.page--sm .blk--dark .plate:not(.sec__foot *):not(.card *):not(.plate *),
.page--sm .blk--dark .sec__note:not(.sec__foot *):not(.card *):not(.plate *){
  padding:var(--s-5); border:0;
}
@media (max-width:767px){
  .page--sm .blk--dark .plate:not(.sec__foot *):not(.card *):not(.plate *),
  .page--sm .blk--dark .sec__note:not(.sec__foot *):not(.card *):not(.plate *){ padding:var(--s-4) }
}

/* Плитка-хаб: ссылка внизу повторяла заголовок слово в слово — на экране это
   читалось как дубль строки. Ссылка остаётся (она же цель нажатия на всю
   плитку и её имя для скринридера), но не показывается: стрелка у плитки
   своя, в правом верхнем углу. */
.page--sm .hub__i > .card__more{
  font-size:0; line-height:0; height:0; margin:0; padding:0; overflow:hidden;
}
.page--sm .hub__i > .card__more::after{ content:none }

/* Карточка «услуга по теме» в конце статьи: три колонки auto auto 1fr.
   На 768–900 кикер и заголовок съедали полосу целиком, и правой колонке
   оставалось 58 px — фраза сыпалась в вертикальную ленту. Третьей колонке
   даём пол в треть ширины: заголовок переносится, строка остаётся строкой. */
@media (min-width:768px){
  .page--sm .art__svc{ grid-template-columns:auto auto minmax(34%,1fr) }
}

/* Ряд плиток .hub и ряд плиток .grid стоят в одной секции (первая секция
   главной: три двери, под ними объекты) и шли по разным колонкам: у .grid
   слой редизайна поднял зазор до 48 px, у .hub он остался 24. Левые края
   средних плиток расходились на 8 px, ширины — на 16. Один зазор на оба ряда. */
.page--sm .hub{ column-gap:var(--s-7) }
@media (max-width:767px){ .page--sm .hub{ column-gap:0 } }

/* ── ТАБЛИЦА С ТЕКСТОМ НА ТЕЛЕФОНЕ ────────────────────────────────────────
   Мобильная раскладка схемы 03 рассчитана на строку прайса: название, единица,
   цена — три коротких значения в одну линию. В 30 таблицах из 108 во второй и
   третьей колонке не значения, а фразы: на 390 px колонка получала 40 px, и
   слово «Обязателен» рассыпалось в столбик по одной букве внутри пилюли.
   Такие таблицы помечены классом sm-pl--wide (замер длины ячеек, порог —
   24 знака в среднем или 40 в максимуме) и на телефоне разворачиваются
   в строки: название, под ним каждое значение своей строкой. */
@media (max-width:767px){
  .sm-pl.sm-pl--wide tr{ grid-template-columns:1fr; row-gap:var(--s-2) }
  .sm-pl.sm-pl--wide thead{ display:none }
  .sm-pl.sm-pl--wide .sm-pl__t{ grid-column:1 / -1; grid-row:1; font-weight:500 }
  .sm-pl.sm-pl--wide td + td,
  .sm-pl.sm-pl--wide td + td + td{
    grid-column:1 / -1; grid-row:auto;
    font-family:var(--f-body); white-space:normal; letter-spacing:0;
  }
  .sm-pl.sm-pl--wide .sm-pl__x{ grid-column:1 / -1; grid-row:auto; margin-top:0 }
  /* пилюля-вердикт: перенос по словам, а не по буквам. Правило style.css
     ставит overflow-wrap:anywhere ради одного длинного плейсхолдера — из-за
     него минимальная ширина пилюли равнялась одной букве. */
  .page--sm .verdict__m{ overflow-wrap:break-word; word-break:normal }
}

/* ══ ЕДИНЫЙ ЯЗЫК ЛИНИЙ И МАРКЕРОВ ══════════════════════════════════════════
   Схемы стоят в 204 секциях из 507; остальные 303 остались в старой разметке
   и рядом со схемами читались как сбой: где-то точки-маркеры, где-то линии,
   где-то ни того ни другого. Правило одно на весь сайт, и оно про смысл, а
   не про украшение:

     • колонки, стоящие рядом  → вертикальная линия слева, отступ 24 px,
                                 линии одной длины (высота ряда);
     • строки, идущие подряд   → горизонтальная линия под строкой;
     • перечисление в прозе    → маркер-штрих серым моно в колонке 2.8ch,
                                 тот же приём, что номер в схеме 06;
     • цитата                  → вертикальная линия слева;
     • круглых точек нет нигде.
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Маркер-штрих вместо круглой точки. Круг 9 px цвета --acc был единственным
      круглым элементом в наборе и спорил со всеми линиями рядом. */
.page--sm main .marks > li::before,
.page--sm main .ulist > li::before,
.page--sm main .art__tldr > li::before{
  content:"—"; position:absolute; left:0; top:0;
  width:auto; height:auto; background:none; border:0; border-radius:0;
  font-family:var(--f-mono); font-size:.92em; line-height:inherit; color:var(--soft);
}
.page--sm .blk--dark .marks > li::before,
.page--sm .blk--dark .ulist > li::before,
.page--sm .blk--dark .art__tldr > li::before{ color:var(--soft-i) }
.page--sm main .marks > li,
.page--sm main .ulist > li,
.page--sm main .art__tldr > li{ padding-left:2.8ch }

/* Списки без класса в прозе статьи шли браузерным диском. */
.page--sm main ul:not([class]) > li{
  list-style:none; position:relative; padding-left:2.8ch;
}
.page--sm main ul:not([class]) > li::before{
  content:"—"; position:absolute; left:0; top:0;
  font-family:var(--f-mono); font-size:.92em; color:var(--soft);
}
.page--sm .blk--dark ul:not([class]) > li::before{ color:var(--soft-i) }

/* 2. Перечисление колонками: маркер не нужен — колонку отделяет линия слева,
      ровно как у карточек-колонок. */
/* Линия ставится только там, где сам пункт и есть содержание. Если внутри
   пункта лежит плитка — у неё своя рамка, свой радиус и своя заливка, и линия
   рядом с ней читается как палка сбоку, а отступ 24 px сдвигает плитку из
   ряда. Такие пункты правило не трогает. */
.page--sm main ul.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
.page--sm main ol.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)){
  border-left:1px solid var(--line); padding:0 0 0 var(--s-5);
  align-self:stretch; max-width:none;
}
.page--sm .blk--dark ul.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
.page--sm .blk--dark ol.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)){ border-left-color:var(--line-i) }
.page--sm main ul.grid > li::before,
.page--sm main ol.grid > li::before{ content:none }
@media (max-width:767px){
  .page--sm main ul.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
  .page--sm main ol.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)){
    border-left:0; border-top:1px solid var(--line); padding:var(--s-4) 0 0;
  }
  .page--sm .blk--dark ul.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
  .page--sm .blk--dark ol.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)){ border-top-color:var(--line-i) }
}

/* 3. Пары «условие — значение» идут строками — значит линия под строкой.
      Сквозная плашка гарантии стоит на 64 страницах и была единственным
      перечислением вовсе без разделителей. */
@media (min-width:480px){
  /* зазор между колонками обнуляется, отбивку держит внутренний отступ:
     иначе линия под строкой рвётся ровно на ширину зазора и вместо одной
     сплошной получается две коротких — тот же приём, что в схемах 02 и 06 */
  /* второй колонке гарантируем не меньше 45 % ширины плашки: колонка dt
     объявлена auto и на узкой плите (768: она стоит в паре и получает ~300 px)
     забирала всё, оставляя значению 7 px — строка сыпалась в вертикальную
     ленту по одному слову */
  .page--sm main .tgb__l{
    row-gap:0; column-gap:0;
    grid-template-columns:minmax(0,auto) minmax(45%,1fr);
  }
  .page--sm main .tgb__l > dt,
  .page--sm main .tgb__l > dd{
    padding-block:var(--s-3); border-bottom:1px solid var(--line-i);
  }
  .page--sm main .tgb__l > dt{ padding-right:var(--s-5) }
  .page--sm main .tgb__l > dt:nth-child(1),
  .page--sm main .tgb__l > dd:nth-child(2){ padding-top:0 }
  .page--sm main .tgb__l > :nth-last-child(-n+2){ border-bottom:0; padding-bottom:0 }
}

/* 3a. Пары «условие — значение» без обёртки строки. Там, где dt и dd лежат
      прямыми детьми сетки, линия строки рисуется у каждого из них отдельно:
      между колонками оставался зазор 96 px — линия шла двумя обрубками, да
      ещё и на разной высоте (dt и dd вставали с разницей в 3 px из-за
      интерлиньяжа). Зазор обнуляем, отбивку держит отступ, ряды выравниваем
      по верху — линия становится одной сплошной. */
@media (min-width:768px){
  .page--sm main .deflist:not(:has(> div)),
  .page--sm main .reqs:not(:has(> div)){ column-gap:0; row-gap:0; align-items:stretch }
  .page--sm main .deflist:not(:has(> div)) > dt,
  .page--sm main .deflist:not(:has(> div)) > dd,
  .page--sm main .reqs:not(:has(> div)) > dt,
  .page--sm main .reqs:not(:has(> div)) > dd{
    padding-block:var(--s-4); border-top:1px solid var(--line); margin:0;
  }
  .page--sm main .deflist:not(:has(> div)) > dt,
  .page--sm main .reqs:not(:has(> div)) > dt{ padding-right:var(--s-8) }
  .page--sm main .deflist:not(:has(> div)) > dt:nth-child(1),
  .page--sm main .deflist:not(:has(> div)) > dd:nth-child(2),
  .page--sm main .reqs:not(:has(> div)) > dt:nth-child(1),
  .page--sm main .reqs:not(:has(> div)) > dd:nth-child(2){ border-top:0; padding-top:0 }
  .page--sm .blk--dark .deflist:not(:has(> div)) > dt,
  .page--sm .blk--dark .deflist:not(:has(> div)) > dd,
  .page--sm .blk--dark .reqs:not(:has(> div)) > dt,
  .page--sm .blk--dark .reqs:not(:has(> div)) > dd{ border-top-color:var(--line-i) }
}

/* 4. Цитата — без линий вовсе. Сначала у неё была верхняя полоса 2 px, потом
      левая; владелец снял вертикальные линии по всему сайту, и у цитаты линии
      тоже нет. Цитату держат кавычки, отбивка и мера строки. */
.page--sm main blockquote,
.page--sm main .pull{
  border:0; padding:0; margin-block:var(--s-6);
}

/* ══ КОЛОНКИ БЕЗ ВЕРТИКАЛЬНЫХ ЛИНИЙ ═══════════════════════════════════════
   Решение владельца 05.09.2026: вертикальных разделителей между колонками
   на сайте нет — колонки разделяет воздух. Горизонтальные линии строк
   (список, пара «условие — значение», строка прайса, подвал секции)
   остаются: они отделяют строки друг от друга, а не колонки.
   Правило собрано одним куском и снимается одним куском. */
.page--sm .sm-man--row > li,
.page--sm .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc),
.page--sm .blk--dark .card.card--dark:not(.card--link):not(.hero__cc),
.page--sm main ul.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
.page--sm main ol.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
.page--sm .versus > * + *{
  border-left:0;
  padding-left:0;
}
@media (max-width:767px){
  /* на телефоне колонки становятся строками — там линия сверху остаётся */
  .page--sm .card:not(.card--link):not(.card--cover):not(.hero__cc),
  .page--sm main ul.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)),
  .page--sm main ol.grid > li:not(:has(> .card)):not(:has(> a)):not(:has(> article)){
    border-top:1px solid var(--line); padding-top:var(--s-4);
  }
  .page--sm .blk--dark .card:not(.card--link):not(.card--cover):not(.hero__cc){
    border-top-color:var(--line-i);
  }
}

/* ── ПЛАШКА НА СВЕТЛОЙ ПОЛОСЕ: ТЁМНЫЙ ТЕКСТ ───────────────────────────────
   У .plate цвет текста задан белым — приём рассчитан на тёмный блок. На
   светлой полосе (/kamery-i-zakon/, предупреждение «страница от монтажника»)
   это давало белым по светло-серому: текст был не виден вовсе. */
.page--sm .blk:not(.blk--dark) .plate,
.page--sm .blk:not(.blk--dark) .plate p,
.page--sm .blk:not(.blk--dark) .plate li,
.page--sm .blk:not(.blk--dark) .plate dd,
.page--sm .blk:not(.blk--dark) .plate dt{ color:var(--ink) }
.page--sm .blk:not(.blk--dark) .plate .muted,
.page--sm .blk:not(.blk--dark) .plate .sec__note{ color:var(--soft) }
.page--sm .blk:not(.blk--dark) .plate a{ color:var(--acc) }

/* ── ПЛИТКА-ССЫЛКА НА ТЁМНОЙ ПОЛОСЕ ──────────────────────────────────────
   Белая плитка на тёмном градиенте читалась как чужой элемент: три белых
   прямоугольника посреди тёмной секции. Плитка остаётся плиткой (по ней
   переходят), но берёт поверхность тёмного блока — ту же, что у фирменной
   плашки контактов в шапке. */
.page--sm .blk--dark .hub__i,
.page--sm .blk--dark .card--link:not(.card--cover){
  background:var(--bg-2); background-image:none;
  border:1px solid var(--line-i); color:var(--ink-i);
}
.page--sm .blk--dark .hub__i .hub__t,
.page--sm .blk--dark .hub__i h3,
.page--sm .blk--dark .card--link:not(.card--cover) .card__title{ color:var(--ink-i) }
.page--sm .blk--dark .hub__i .hub__x,
.page--sm .blk--dark .hub__i p,
.page--sm .blk--dark .card--link:not(.card--cover) .card__text{ color:var(--soft-i) }
.page--sm .blk--dark .hub__i::before,
.page--sm .blk--dark .card--link:not(.card--cover) .card__more{ color:var(--acc-hi) }

/* ── ПАРА ПЛАШЕК В РЯДУ: ОДИН ВЕРХ, ОДНА ВЫСОТА ──────────────────────────
   В ряду из двух плашек правая вставала ниже левой и обрывалась выше: у
   сноски на тёмном ширина задана по содержанию, а выравнивание — по центру.
   В ряду обе держат верх и тянутся на всю высоту ряда. */
@media (min-width:768px){
  .page--sm .grid > .plate,
  .page--sm .grid > .sec__note,
  .page--sm .grid > .card{ align-self:stretch; width:auto; max-width:none }
  .page--sm .grid{ align-items:stretch }
}

/* Врезка-утверждение внутри ряда занимает полосу целиком: половина ряда под
   ней оставалась пустой. Заголовок врезки идёт во всю ширину, текст держит
   меру строки. */
.page--sm .grid > blockquote,
.page--sm .grid > .pull{ grid-column:1 / -1 }
.page--sm main .pull h2,
.page--sm main .pull h3,
.page--sm main blockquote h2,
.page--sm main blockquote h3{ max-width:none }

/* ── ПРАВОВАЯ ВРЕЗКА БЕЗ КОРОБКИ ─────────────────────────────────────────
   Схема 07 рисовала врезку заливкой, скруглением и полосой 2 px слева.
   В ряду с обычными текстовыми колонками она читалась как отдельная коробка:
   слева плита, справа голый текст. Врезка остаётся врезкой за счёт иконки,
   цвета акцента у слова-маркера и отступа под иконку — без коробки и полосы. */
.page--sm .sm-note{
  background:none; border-radius:0; padding:0 0 0 var(--s-6);
  max-width:none;
}
.page--sm .sm-note::after{ content:none }
.page--sm .sm-note::before{ left:0; top:4px }
.page--sm .blk--dark .sm-note{ background:none; color:var(--ink-i) }

/* ── НУМЕРАЦИЯ ПУНКТОВ СНЯТА ──────────────────────────────────────────────
   Решение владельца 05.09.2026: «дубли цифр». На одной странице стояло
   до трёх разных списков, и каждый начинался заново с 01 — числа повторялись
   и ничего не значили. Пункты остаются пунктами, номер снят, текст выровнен
   по левому краю полосы. Номер остаётся только там, где он про порядок
   действий: оглавление статьи и полоса этапов. */
.page--sm .sm-man__n{ display:none }
.page--sm .sm-man__t{ width:100% }
.page--sm .sm-man__x{ margin-left:0 }