/* Страница услуги: скелет для всех услуг (сменный узел, где сделано, как делаю, цена, вопросы). Перенос _dev/design/service/style.css. */

/* знак процента у моноширинной цифры — Fira, без широкой моноширинной клетки */
.pct { font-family: var(--sans); letter-spacing: 0; margin-left: 1px; }
/* запятая, «×», «+», «/» при моноширинной цифре — Fira: моноширинная клетка разрывает «21,6» */
.sgn { font-family: var(--sans); letter-spacing: 0; }
/* стрелки страницы — малые, как в кнопке */
.ic--arrow { width: 22px; height: 11px; }
.ic--check { width: 18px; height: 14px; }

/* ---------- Кнопки и ссылки ---------- */
.link--big { font-size: var(--fs-body); }

/* ---------- Лист ---------- */

/* подзаголовок листа — сразу под h2 */
.sheet__head { margin-bottom: 28px; }
.sheet__head p { margin-top: 10px; max-width: 72ch; color: var(--graphite); }

/* ---------- Лист 1: скелет для всех услуг ----------
   Слева — суть, Telegram, факты (якоря к «Где сделано» и «Сколько стоит»), на всю высоту.
   Справа сверху — сменный узел: схема с выносками (.uzel), если у услуги есть наглядный механизм, иначе чертёж
   доказательства из лучшего кейса (.uzel--proof), без кейса и механизма — блок «Что входит в услугу» (.uzel--inc).
   Справа снизу — штамп «Коротко», вплотную к правому нижнему углу рамки (The Stamp Corner Rule). */

/* первый лист — экран, не выше 790; выше — только если содержимое не помещается (сложенный лист) */
.sheet--hero { --hero-min: clamp(600px, calc(100vh - 74px), 790px); }
.frame--hero {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px 40px;
  padding: 26px 28px 44px 36px;
}

/* кнопка и факты — внизу колонки, на уровне штампа; снизу — только поле под баннер cookie */
.hero__text { grid-row: 1 / 3; display: flex; flex-direction: column; min-height: 0; padding: 2px 0 64px; }
.crumbs a { color: var(--ink); text-decoration-line: underline; }
/* колонка 600px: h1 из шкалы (Headline final, 64px) встаёт в две строки, balance делит их ровно */
.hero__text h1 { font-size: var(--fs-final); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.hero__lead { margin-top: 26px; font-size: var(--fs-body); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.hero__act { margin: auto 0 0; padding-top: 28px; display: flex; align-items: center; gap: 18px; }
.hero__note { max-width: 17ch; font-size: var(--fs-label); line-height: 1.35; color: var(--graphite); }

/* факты — сразу под кнопкой; первая и последняя строки ведут к «Где сделано» и «Сколько стоит» */
.hero__facts { margin: 26px 0 0; border-top: 1px solid var(--hair); }
.hero__facts div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.hero__facts dt { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.hero__facts dd { margin: 0; font-size: var(--fs-small); }
.hero__facts a { display: inline-block; padding: 2px 0; text-decoration-line: underline; }
.hero__facts .num { font-size: var(--fs-figure); white-space: nowrap; }
.hero__facts .ic--to { margin: 0 6px; }
.hero__hint { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }

/* узел-схема: viewBox 630 — ширина колонки на 1440, единица схемы = 1px экрана (1:1, без ужатия) */
.uzel { grid-column: 2; grid-row: 1; margin: 0; min-height: 0; display: flex; flex-direction: column; }
/* чертёж — по вертикали посередине между подписью и штампом: лишняя высота окна делится поровну, а не копится над штампом */
.uzel:not(.uzel--inc) > .uzel__cap { order: -1; }
.uzel:not(.uzel--inc)::before, .uzel:not(.uzel--inc)::after { content: ""; flex: 1 1 0; }
.uzel__cap { flex: none; display: flex; align-items: center; gap: 12px; font-size: var(--fs-annotation); font-style: italic; color: var(--graphite); padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
/* пометка «А» узла — в кружке (DESIGN.md, Service page) */
.uzel__mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; font-style: normal; font-weight: 600; font-size: var(--fs-annotation); color: var(--ink); }
.uzel__svg { flex: 1 1 0; min-height: 0; width: 100%; height: auto; margin-top: 18px; display: block; overflow: visible; font-family: var(--sans); }
/* схема механизма — строго 1:1: ширина и высота в пикселях viewBox */
.uzel__svg--ml { flex: none; width: 630px; max-width: 100%; height: 376px; margin-top: 22px; overflow: hidden; }

.uzel__svg marker path, .uzel__svg marker circle { fill: var(--ink); }
.t-pct, .t-sgn { font-family: var(--sans); letter-spacing: 0; }
.ln, .ln-thin, .ln-hair, .ln-head, .ln-flow, .lead, .part__body { fill: none; vector-effect: non-scaling-stroke; }
.ln { stroke: var(--ink); stroke-width: 1.4; }
.ln-thin { stroke: var(--graphite); stroke-width: 1; }
.ln-hair { stroke: var(--hair); stroke-width: 1; }
.ln-head { stroke: var(--ink); stroke-width: 3; }
.ln-flow { stroke: var(--ink); stroke-width: 1.2; }
.lead { stroke: var(--ink); stroke-width: 1; }
.src > rect.ln { fill: var(--paper); }
.part__body { fill: var(--side-l); stroke: var(--ink); stroke-width: 2; }

/* подписи в схеме — кегли шкалы DESIGN.md (1:1 к пикселям) */
.t-cap, .t-note { font-style: italic; font-size: var(--fs-annotation); fill: var(--graphite); }
.t-part { font-weight: 600; font-size: var(--fs-title); fill: var(--ink); }
.t-code { font-style: italic; font-size: var(--fs-label); fill: var(--graphite); }
.t-case { font-weight: 600; font-size: var(--fs-title); fill: var(--ink); }
.t-fig { font-family: var(--mono); font-size: var(--fs-figure); letter-spacing: -.02em; font-variant-numeric: tabular-nums; fill: var(--ink); }

/* выноски-позиции схемы: вся позиция — одна ссылка на строку ведомости; подсветка вместе со строкой (мышь и фокус) */
.co { cursor: pointer; text-decoration: none; }
.co__hit { fill: transparent; }
.co__n { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.t-pos { font-family: var(--mono); font-size: var(--fs-label); fill: var(--ink); }
.co .lead, .co .co__n, .co text { transition: stroke .2s, fill .2s; }
.co.is-on .lead, .co.is-on .co__n { stroke: var(--blue); }
.co.is-on .co__n { fill: var(--blue-tint); }
.co.is-on text { fill: var(--blue-ink); }
.co:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* единственное авторское движение страницы: позиции выходят из модуля по очереди, через 0,08 с.
   Стартует от видимого состояния (только сдвиг, без прозрачности); при reduced motion — нет */
/* точка на грани модуля и ломаная к полке неподвижны: выезжают только полка и подписи */
.vers > .co > .co__run { animation: co-in .6s var(--ease) both; }
.vers > .co:nth-child(2) > .co__run { animation-delay: .08s; }
.vers > .co:nth-child(3) > .co__run { animation-delay: .16s; }
@keyframes co-in { from { transform: translateX(-16px); }
}

/* узел-доказательство: выписка лучшего кейса услуги. Длина — только по шкале (скорость 0…100, ось мест 1 сверху);
   кратности — одной цифрой, без выдуманной базы «было» */
/* подписи оси — Caption шкалы (не моно: это деления, а не результат) */
.t-axis { font-size: var(--fs-caption); font-variant-numeric: tabular-nums; fill: var(--graphite); }
.t-up { font-style: italic; font-size: var(--fs-annotation); fill: var(--ink); }
.i-up { color: var(--ink); }
.uzel--proof .uzel__svg { flex: 0 1 auto; margin-top: 22px; }
.ln-was, .ln-now, .tick { fill: none; vector-effect: non-scaling-stroke; }
.ln-was { stroke: var(--graphite); stroke-width: 1.4; }
.ln-now { stroke: var(--ink); stroke-width: 4; }
.tick { stroke: var(--ink); stroke-width: 1.2; }
.tick--now { stroke-width: 1.6; }
.t-name { font-weight: 600; font-size: var(--fs-figure); fill: var(--ink); }
.t-was { font-family: var(--mono); font-size: var(--fs-figure); letter-spacing: -.02em; font-variant-numeric: tabular-nums; fill: var(--graphite); }
.t-big { font-family: var(--mono); font-size: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; fill: var(--ink); }
.uzel__acts { flex: none; display: flex; align-items: center; gap: 24px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.uzel__acts .btn { white-space: nowrap; }

/* узел без чертежа: у услуги нет ни механизма, ни кейса (аудит, кастомные модули) — «Что входит в услугу» */
.uzel--inc .uzel__cap { font-style: normal; font-weight: 600; font-size: var(--fs-title); color: var(--ink); letter-spacing: 0; }
.uzel--inc .inc__t { margin-top: 14px; }
.inc { align-self: start; padding-top: 4px; }
.inc h3 { font-size: var(--fs-title); line-height: 1.15; margin-bottom: 12px; }
.inc__t { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.inc__t th, .inc__t td { padding: 8px 10px 8px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--hair); font-size: var(--fs-annotation); line-height: 1.3; }
.inc__t tbody th { font-weight: 400; }
.inc__n { width: 30px; font-variant-numeric: tabular-nums; color: var(--graphite); }
.inc__who { margin-top: 14px; font-size: var(--fs-small); max-width: 52ch; }
.inc__who b { font-weight: 600; }

/* штамп «Коротко»: основная надпись первого листа — кто, цена, срок, следующий шаг, номер листа */
.brief {
  grid-column: 2; grid-row: 2; justify-self: end; align-self: end;
  width: calc(100% + 28px); margin: 0 -28px -44px 0;
  display: grid; grid-template-columns: 244px minmax(0, 1fr) 182px; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 2px solid var(--ink); border-width: 2px 0 0 2px;
  background: var(--paper);
}
.brief > * { margin: 0; }
/* заголовок штампа — подпись поля, как «Цена» и «Срок» */
.brief .brief__h { grid-column: 1; grid-row: 1; padding: 10px 16px 0; font-size: var(--fs-label); font-weight: 400; font-style: italic; line-height: 1.3; letter-spacing: 0; color: var(--graphite); }
.brief__me { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; }
.brief__me img { flex: none; width: 46px; height: 60px; object-fit: cover; border: 1px solid var(--ink); }
.brief__me b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.15; }
.brief__me i { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--graphite); }
.brief__list { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 8px 16px; }
.brief__list, .brief__acts { align-self: stretch; border-left: 1px solid var(--hair); }
.brief__list > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 5px 0; }
.brief__list > div + div { border-top: 1px solid var(--hair); }
.brief__list dt { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.brief__list dd { margin: 0; font-size: var(--fs-small); line-height: 1.3; }
.brief__list .num { font-size: var(--fs-figure); }
.brief__price { font-weight: 600; font-size: var(--fs-body); }
.brief__paren { white-space: nowrap; }
.brief__sub { display: block; margin-bottom: 2px; font-size: var(--fs-label); color: var(--graphite); }
.brief__from { font-style: italic; color: var(--graphite); }
.brief__acts { grid-column: 3; grid-row: 1 / 3; display: grid; align-content: center; justify-items: start; gap: 10px; padding: 12px 16px; }
.brief__acts .btn { --btn-pad: 8px 14px; --btn-fs: var(--fs-small); }
.brief__acts .btn, .brief__acts .link { white-space: nowrap; }
.brief__acts .link { display: inline-flex; align-items: center; gap: 10px; padding: 2px 0; font-size: var(--fs-small); }
.brief__stamp { grid-column: 1 / -1; display: flex; border-top: 1px solid var(--ink); font-size: var(--fs-caption); color: var(--graphite); font-variant-numeric: tabular-nums; }
.brief__stamp > * { padding: 7px 16px; }
.brief__stamp b { flex: 1; font-weight: 400; color: var(--ink); }
.brief__stamp > span { border-left: 1px solid var(--hair); }

/* цена моноширинной цифрой: знак рубля — Fira через узкий неразрывный пробел, без широкой моноширинной клетки */
.cur { font-family: var(--sans); letter-spacing: 0; margin-left: .1em; }

/* ---------- Лист 2: где сделано ---------- */

.ledger { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); }
.ledger th, .ledger td { border: 1px solid var(--ink); padding: 14px 16px; text-align: left; vertical-align: top; }
.ledger thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); padding: 6px 16px; border-bottom-width: 2px; }
.ledger tbody th { width: 250px; font-weight: 400; }
/* номер позиции = номер выноски на схеме первого листа */
.ledger tbody th .pos { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border: 1.4px solid var(--ink); border-radius: 50%; font: 400 var(--fs-label)/1 var(--mono); color: var(--ink); }
.ledger tbody tr > * { transition: background .2s; }
.ledger tbody tr.is-on > *, .ledger tbody tr:target > * { background: var(--blue-tint); }
.ledger tbody tr.is-on .pos, .ledger tbody tr:target .pos { border-color: var(--blue); color: var(--blue-ink); }
.ledger__tags { margin-top: 8px; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.ledger tbody th b { display: block; font-size: var(--fs-title); font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.ledger tbody th span { display: block; color: var(--graphite); font-size: var(--fs-small); }
.ledger tbody td { font-size: var(--fs-annotation); }
.ledger__done { margin: 0; padding: 0 0 0 18px; }
.ledger__done li { padding: 1px 0; }
.ledger__done li::marker { color: var(--graphite); }
.ledger__nums { width: 26%; }
.ledger__bs { width: 34%; }
.ledger__bs small { display: block; padding: 0 0 6px; font-size: var(--fs-label); font-style: italic; color: var(--graphite); border-bottom: 1px dotted var(--thin); }
.ledger__line { font-size: var(--fs-annotation); }
.ledger__nums > span, .ledger__bs > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--thin); }
.ledger__nums > span:last-child, .ledger__bs > span:last-child, .ledger__bs > span:has(+ small) { border-bottom: 0; }
.ledger__nums i, .ledger__bs i { font-size: var(--fs-label); color: var(--graphite); }
.ledger__nums b, .ledger__bs b { font-size: var(--fs-figure); white-space: nowrap; font-weight: 400; }
.ledger__acts { width: 214px; }
.ledger__acts .btn { white-space: nowrap; }
.ledger__acts .btn, .ledger__acts .out { display: flex; width: fit-content; }
.ledger__acts .out { margin-top: 10px; }
.ledger__note { margin-top: 14px; font-size: var(--fs-small); color: var(--graphite); max-width: 80ch; }

/* выписка кейса: когда проект один, вместо ведомости — крупная графа на всю ширину */
.extract { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1.25fr); border: var(--frame) solid var(--ink); }
.extract > * { padding: 22px 24px; }
.extract > * + * { border-left: 1px solid var(--ink); }
.extract__head { display: flex; flex-direction: column; gap: 6px; }
.extract__head h3 { font-size: var(--fs-headline); line-height: 1.04; }
.extract__head > p:not([class]) { color: var(--graphite); font-size: var(--fs-small); }
.extract__tags { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.extract__acts { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; justify-items: start; }
.extract__acts .btn { white-space: nowrap; }
.extract__label { margin-bottom: 8px; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.extract__done ul { margin: 0; padding: 0 0 0 18px; font-size: var(--fs-body); list-style-type: "– "; }
.extract__done li { padding: 3px 0; }
.extract__done li::marker { color: var(--graphite); }
.extract__nums { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.extract__nums > div { padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.extract__nums > div:nth-child(even) { border-left: 1px solid var(--hair); }
.extract__nums > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
.extract__nums dt { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.extract__nums dd { margin: 0; font-size: 34px; line-height: 1; white-space: nowrap; }
.extract__pair { display: grid; gap: 8px; }
.extract__src { font: 400 var(--fs-annotation)/1 var(--sans); letter-spacing: 0; color: var(--graphite); display: inline-block; min-width: 64px; }
.extract__nums .ic--to { width: 28px; height: 14px; margin: 0 8px; vertical-align: 6px; }

/* ---------- Как делаю: модуль услуги ---------- */

.frame--how { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.how__text h2 { margin-bottom: 18px; }
.how__text > p + p { margin-top: 14px; }
.how__text > p { max-width: 40ch; }
.how__chain { font-size: var(--fs-body); color: var(--graphite); }
.how__chain b { display: block; margin-bottom: 4px; font-size: var(--fs-title); font-weight: 600; color: var(--ink); }
.how__chain .ic--to { margin: 0 10px; }
.how__links { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.how__links .link { display: inline-flex; align-items: center; gap: 10px; padding: 3px 0; font-size: var(--fs-small); }

.frame--how .inc { padding-top: 6px; max-width: 760px; }
.frame--how .inc__t tr > * { font-size: var(--fs-body); padding-top: 10px; padding-bottom: 10px; }

/* маршрутная карта: пять граф в рамке со стрелками-треугольниками, над последней — размерная линия срока,
   графа «Договор» — итоговая (светло-синяя) */
.route { grid-column: 1 / -1; position: relative; }
.route__h { font-size: var(--fs-title); line-height: 1.15; margin-bottom: 8px; }
/* вертикальная размерная линия (.dim--v) — только когда маршрут встаёт столбцом */
.route > .dim--v { display: none; }
.route__dim { position: relative; height: 30px; margin-left: 80%; border-left: 1px solid var(--thin); border-right: 1px solid var(--thin); }
.route__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; border-top: 1px solid var(--ink); }
.route__dim::after {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5 14 0v9z' fill='%231d2229'/%3E%3C/svg%3E") left center / 14px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M14 4.5 0 0v9z' fill='%231d2229'/%3E%3C/svg%3E") right center / 14px 9px no-repeat;
}
.route__dim span { position: absolute; left: 50%; top: 4px; z-index: 1; transform: translateX(-50%); padding: 0 10px; background: var(--sheet, var(--paper)); font: italic 400 var(--fs-annotation)/22px var(--sans); white-space: nowrap; }
.route__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: var(--frame) solid var(--ink); }
.route__steps li { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 22px 20px; }
.route__steps li + li { border-left: 1px solid var(--ink); }
.route__steps li + li::before { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.route__n { font-size: var(--fs-label); color: var(--graphite); }
.route__steps b { font-size: var(--fs-title); font-weight: 600; line-height: 1.15; }
.route__steps li > span:not(.route__n, .vh) { font-size: var(--fs-annotation); color: var(--graphite); }
.route__steps .route__deal { background: var(--blue-tint); }
.route__deal b { color: var(--blue-ink); }
.route__steps .route__deal > span:not(.route__n, .vh) { color: var(--ink); }

/* ---------- Сколько стоит ---------- */

.frame--price { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
.price__text h2 { margin-bottom: 18px; }
.price__text > p:not(.assure, .price__note) { color: var(--graphite); max-width: 34ch; }
.assure { margin: 22px 0 22px; padding-left: 30px; position: relative; font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.price__text .assure { color: var(--ink); }
.price__text .link--big { margin-top: 26px; }
.assure .ic--check { position: absolute; left: 1px; top: .28em; }

/* на кальке — без белой подложки (The Two Papers Rule) */
.variants { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); }
.variants th, .variants td { border: 1px solid var(--ink); padding: 16px 18px; text-align: left; vertical-align: top; }
.variants thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); padding: 6px 18px; border-bottom-width: 2px; }
.variants tbody th { font-weight: 400; }
.variants tbody th b { display: block; font-size: var(--fs-title); font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.variants tbody th > span { display: block; font-size: var(--fs-annotation); color: var(--graphite); max-width: 60ch; }
.variants__val { width: 250px; white-space: nowrap; }
.variants__val > span { font-style: italic; color: var(--graphite); }
.variants__val b { font-size: var(--fs-title); font-weight: 600; }
.variants__val b.num { font-size: var(--fs-title); font-weight: 400; letter-spacing: -.03em; }
/* графа «Что в каком тарифе» — обязательна для любой услуги; стоит над таблицей, а не под шапкой «Тариф / Цена» */
.which { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: baseline; margin: 0 0 14px; }
.which__l { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.which b { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.which__from { font-style: italic; font-weight: 400; color: var(--graphite); }
.which .num { font-size: var(--fs-title); font-weight: 400; letter-spacing: -.03em; white-space: nowrap; }
/* услуга входит в проект: фраза с ценой — итоговая графа (светло-синяя) в рамке */
.which--pick { margin: 0; padding: 18px; border: var(--frame) solid var(--ink); background: var(--blue-tint); }
.which--pick b { color: var(--blue-ink); }
/* уточнения к цене (DESIGN.md, Price clarifications): «название — значение», сетка 1px */
.terms { margin: 0; border: var(--frame) solid var(--ink); border-top: 0; }
.terms > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 12px 18px; align-items: baseline; }
.terms > div + div { border-top: 1px solid var(--hair); }
.terms dt { font-size: var(--fs-small); }
.terms dd { margin: 0; font-size: var(--fs-small); color: var(--graphite); }
.terms .link { color: var(--ink); }
.variants__which th { border-bottom-width: 2px; }
.variants__which th > span { max-width: 80ch; color: var(--ink); }
.variants__which th > span + span { margin-top: 4px; }
.variants__which em { font-style: normal; font-weight: 600; }
.variants__which .tbd { display: inline-block; margin-top: 4px; }
/* итоговая графа: строка тарифа, к которому относится услуга */
.variants__pick > * { background: var(--blue-tint); }
.variants__mark { display: inline-block; margin-left: 12px; padding: 1px 8px; vertical-align: 3px; border: 1px solid var(--blue-ink); font: italic 400 var(--fs-label)/1.3 var(--sans); color: var(--blue-ink); }
.variants tbody th .link { display: inline; font-weight: 600; color: var(--ink); }
.price__audit { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: var(--fs-small); color: var(--graphite); }
.price__audit .link { display: inline-flex; align-items: center; gap: 10px; padding: 3px 0; font-size: var(--fs-body); color: var(--ink); }
.variants__why { display: block; margin-top: 10px; font-size: var(--fs-label); line-height: 1.35; color: var(--graphite); white-space: normal; }

/* ---------- Частые вопросы (общий блок шаблона) ---------- */

.frame--faq { display: grid; grid-template-columns: 340px minmax(0, 1fr) 290px; gap: 0 56px; align-items: start; --frame-t: 36px; --frame-b: 72px; }
.faq__aside { padding-top: 12px; display: grid; gap: 12px; justify-items: start; color: var(--graphite); }
.faq__aside p { margin: 0; }

/* ---------- Почитать и другие услуги ---------- */

.frame--more { --frame-x: 0px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.more__read { padding: 0 48px 0 40px; border-right: 1px solid var(--ink); }
.more__other { padding: 0 40px 0 48px; }
.frame--more h2 { margin-bottom: 26px; }

.doc { display: grid; gap: 10px; justify-items: start; }
.doc__meta { display: flex; gap: 14px; font-size: var(--fs-label); color: var(--graphite); font-variant-numeric: tabular-nums; }
.doc__meta span { padding-left: 14px; border-left: 1px solid var(--hair); }
.doc h3 { font-size: var(--fs-title); line-height: 1.15; }
.doc h3 a { text-decoration: none; }
.doc h3 a:hover, .doc h3 a:focus-visible { text-decoration: underline; }
.doc > p:not(.doc__meta) { font-size: var(--fs-annotation); color: var(--graphite); max-width: 62ch; margin-bottom: 8px; }
.doc .link { display: inline-flex; align-items: center; gap: 10px; padding: 3px 0; font-size: var(--fs-small); }

/* без статьи по теме: остаётся один список услуг — заголовок слева, список справа */
.frame--more-solo { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
.frame--more-solo h2 { margin-bottom: 26px; }
.frame--more-solo .svc { margin: 0; }

.svc { list-style: none; margin: 0 0 28px; padding: 0; border-top: 2px solid var(--ink); }
.svc li { border-bottom: 1px solid var(--ink); }
.svc a small { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: 400; color: var(--graphite); }
.svc a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 4px; font-size: var(--fs-title); font-weight: 600; line-height: 1.3; text-decoration: none; }

/* ---------- Подвал ---------- */

/* низкое окно (до 820px): первый лист ужимается, чтобы кнопка и факты помещались в 768 */
@media (min-width: 1180px) and (max-height: 820px) {
  .frame--hero { padding-top: 22px; padding-bottom: 36px; row-gap: 10px; }
  .crumbs ol { margin-bottom: 10px; }
  .hero__lead { margin-top: 14px; }
  .hero__text { padding-bottom: 66px; }
  .hero__act { padding-top: 16px; }
  .hero__facts { margin-top: 12px; }
  .hero__facts div { padding: 4px 0; }
  .uzel__svg, .uzel--proof .uzel__svg { margin-top: 10px; }
  /* схема механизма идёт 1:1 без ужатия: второстепенная нижняя выноска модуля скрыта целиком, svg короче (slice) */
  .uzel__svg--ml { height: 300px; }
  .uzel__svg--ml .note { display: none; }
  .uzel__acts { margin-top: 8px; padding-top: 8px; }
  .brief { margin-bottom: -36px; }
  .brief__me { padding-bottom: 8px; }
  .brief__list > div { padding: 3px 0; }
}

/* позиции схемы и чертёж доказательства списком — только на узкой колонке */
.uzel__list, .proof__list { display: none; }

/* ---------- Узкие колонки: по ширине листа ---------- */
/* контейнер — лист: правила меняют и сетку самой рамки (по ширине рамки её не перестроить) */
main > .sheet { container-type: inline-size; }

/* лист уже 1300: колонка сути ужимается, схема держит 1:1 */
@container (1180px <= width < 1300px) {
  .frame--hero { grid-template-columns: minmax(0, 1fr) 630px; }
}
/* первый лист столбцом: суть, узел, штамп «Коротко» во всю ширину рамки в правом нижнем углу */
@container (width < 1180px) {
  .frame--hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; padding: 26px var(--pad) 0; }
  .hero__text { grid-row: auto; padding-bottom: 0; }
  .hero__act { margin-top: 0; }
  .uzel { grid-column: 1; grid-row: auto; margin-top: 40px; }
  .brief { grid-column: 1; grid-row: auto; justify-self: stretch; width: auto; margin: 40px calc(-1 * var(--pad)) 0; border-left-width: 0; }
  .brief__acts { align-content: center; }
}
/* колонка уже схемы (viewBox 630): окно схемы 1:1 до номеров у узлов, подписи позиций — списком под схемой */
@container (width < 700px) {
  /* slice берёт больший из масштабов: высота 376 держит 1:1, пустой низ (нижняя выноска скрыта) срезан полем */
  .uzel__svg--ml { width: 330px; height: 376px; margin-bottom: -76px; }
  .uzel__svg--ml .co__run > :not(.co__n, .t-pos), .uzel__svg--ml .vers > text, .uzel__svg--ml .note { display: none; }
  .uzel__svg--ml .co__hit { width: 64px; }
  .uzel__list { display: block; margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); counter-reset: pos; }
  .uzel__list li { border-bottom: 1px solid var(--hair); }
  .uzel__list a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; color: var(--ink); text-decoration: none; }
  .uzel__list a::before { counter-increment: pos; content: counter(pos); grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 26px; border: 1.4px solid var(--ink); border-radius: 50%; font: 400 var(--fs-label)/1 var(--mono); }
  .uzel__list b { font-size: var(--fs-figure); font-weight: 600; line-height: 1.2; }
  .uzel__list .num { font-size: var(--fs-figure); white-space: nowrap; }
  .uzel__list i { grid-column: 2 / -1; font-size: var(--fs-label); color: var(--graphite); }
  .uzel__list a.is-on::before { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-ink); }
  .uzel__list a.is-on b, .uzel__list a.is-on .num { color: var(--blue-ink); }
  .uzel__list-note { padding: 10px 0; font-size: var(--fs-label); color: var(--graphite); }
}
/* чертёж доказательства на колонке уже viewBox: строки «показатель — было → стало» без ужатия */
@container (width < 680px) {
  .uzel--proof .uzel__svg { display: none; }
  .proof__list { display: block; margin: 14px 0 0; }
  .proof__list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .proof__list dt b { display: block; font-size: var(--fs-figure); font-weight: 600; line-height: 1.2; }
  .proof__list dt i { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--graphite); }
  .proof__list dd { flex: none; margin: 0; display: flex; align-items: baseline; gap: 8px; }
  .proof__list .num { font-size: 26px; line-height: 1; letter-spacing: -.02em; }
  .proof__list .proof__was { font-size: var(--fs-figure); color: var(--graphite); }
  .proof__list .ic--to { width: 22px; height: 11px; }
  .proof__list > .proof__period { padding: 12px 0 6px; border-bottom: 0; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
}
/* колонка уже 350: окно схемы ужимается до колонки */
@container (width < 380px) {
  .uzel__svg--ml { zoom: .84; }
  .hero__facts div { grid-template-columns: 100px minmax(0, 1fr); }
  .hero__act { flex-wrap: wrap; gap: 12px 18px; }
  .hero__note { max-width: none; }
}
@container (width < 330px) {
  .uzel__svg--ml { zoom: .76; }
}

/* штамп «Коротко» на узком листе: графы строками */
@container (width < 700px) {
  .brief { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .brief .brief__h, .brief__me, .brief__list, .brief__acts { grid-column: 1; grid-row: auto; }
  .brief__list, .brief__acts { border-left: 0; border-top: 1px solid var(--hair); }
  .brief__list { padding: 6px 16px; }
  .brief__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px 16px; }
  .brief__acts .btn { --btn-pad: 12px 18px; }
  .brief__acts .link { padding: 12px 0; }
}

/* ведомость: строка — карточка, цифры парой под проектом, ссылки строкой внизу; шапка таблицы скрыта (подписи — в графах) */
@container (width < 1000px) {
  .ledger, .ledger tbody { display: block; }
  .ledger thead { display: none; }
  .ledger tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ledger tbody tr + tr { border-top: 1px solid var(--ink); }
  .ledger th, .ledger td { border: 0; }
  .ledger tbody th { width: auto; grid-column: 1 / -1; padding-bottom: 6px; }
  .ledger__bs, .ledger__nums, .ledger__acts { width: auto; }
  .ledger__nums { border-left: 1px solid var(--hair) !important; }
  .ledger__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 4px; }
  .ledger__acts .out { margin-top: 0; padding: 12px 0; }
  .ledger__acts:not(:has(.btn)) { padding-top: 0; }
}
@container (width < 600px) {
  .ledger tbody tr { grid-template-columns: minmax(0, 1fr); }
  .ledger__nums { border-left: 0 !important; padding-top: 0; }
  .ledger__bs { padding-bottom: 6px; }
  .ledger__nums > span { border-top: 1px dotted var(--thin); }
}

/* выписка кейса: заголовок строкой, «что сделано» и цифры — парой; на узком — столбцом */
@container (width < 1000px) {
  .extract { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .extract__head { grid-column: 1 / -1; border-bottom: 1px solid var(--ink); }
  .extract > .extract__done { border-left: 0; }
}
@container (width < 640px) {
  .extract { grid-template-columns: minmax(0, 1fr); }
  .extract > * { padding: 18px 16px; }
  .extract > .extract__nums { border-left: 0; border-top: 1px solid var(--ink); padding: 0; }
  .extract__nums > div { padding: 16px; }
}
@container (width < 440px) {
  .extract__nums { grid-template-columns: minmax(0, 1fr); }
  .extract__nums > div:nth-child(even) { border-left: 0; }
  .extract__nums > div + div { border-top: 1px solid var(--hair); }
}

/* «Как делаю», «Сколько стоит», «Другие услуги»: текст над таблицей */
@container (width < 1000px) {
  .frame--how, .frame--price, .frame--more-solo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .how__text > p, .price__text > p:not(.assure, .price__note) { max-width: 60ch; }
  .how__text .tbd { white-space: normal; }
  .price__text .link--big { display: flex; width: fit-content; }
  .frame--more { grid-template-columns: minmax(0, 1fr); }
  .more__read { padding: 0 var(--pad) 36px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .more__other { padding: 36px var(--pad) 0; }
}
/* частые вопросы: заголовок и «Не нашли ответ?» — слева, вопросы справа; на узком — столбцом */
@container (width < 1240px) {
  .frame--faq { grid-template-columns: 260px minmax(0, 1fr); gap: 24px 48px; }
  .frame--faq > .faq { grid-column: 2; grid-row: 1 / 3; }
  .faq__aside { grid-column: 1; grid-row: 2; }
}
@container (width < 760px) {
  .frame--faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .frame--faq > .faq, .faq__aside { grid-column: 1; grid-row: auto; }
}

/* маршрут столбцом: графы сверху вниз, стрелка на верхней линии графы смотрит вниз; срок — размерной линией
   вдоль столбца слева, подпись на −90° */
@container (width < 860px) {
  .route { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .route__h { grid-column: 1 / -1; }
  .route__dim { display: none; }
  .route > .dim--v { display: block; }
  .route__steps { grid-template-columns: minmax(0, 1fr); }
  .route__steps li { padding: 14px 18px 16px; }
  .route__steps li + li { border-left: 0; border-top: 1px solid var(--ink); }
  .route__steps li + li::before { left: 18px; top: 0; width: 10px; height: 12px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
}

/* цена: подписи граф над значениями, тарифы — строками без шапки */
@container (width < 600px) {
  .which, .terms > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .terms > div { padding: 12px 16px; }
  .which--pick { padding: 16px; }
  .variants, .variants tbody, .variants tr, .variants th, .variants td { display: block; }
  .variants thead { display: none; }
  .variants tbody tr + tr { border-top: 1px solid var(--ink); }
  .variants th, .variants td { border: 0; padding: 14px 16px; }
  .variants__val { width: auto; padding-top: 0 !important; white-space: normal; }
  .variants__mark { margin: 6px 0 0; }
  .svc a { padding: 14px 0; font-size: var(--fs-figure); }
}