/* Spacemotion · стили презентации v025 (13.10.2026) — копия v024 + html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }: Safari на iPhone и iPad (особенно в горизонтальном положении) и Chrome на Android больше не увеличивают сами мелкий текст в широких блоках. Раньше вводки и подписи вырастали ≈ в 1,3 раза уже после загрузки, а блоки с align-self: end «прыгали» вверх («Карта» Теплицкого: «43,2 млн ₽ за ступени 3–4» легла на скобку). Приближение пальцами работает как раньше. Chrome и PDF не меняются. */
/* Spacemotion · стили презентации v024 (13.10.2026) — копия v023 + в каждом наборе шрифтов первым стоит основной шрифт (Golos, Barry, Plex Mono), «SM Arrows» — вторым. Safari и iPhone берут высоту строки у первого шрифта набора, даже если он рисует только стрелки: заголовки Barry съезжали вниз на 0,19 кегля («Фигура» Теплицкого, 260 px — на 49 px, на вводку). Стрелки по-прежнему рисует SM Arrows: у Golos и Plex Mono стрелки убраны из диапазона символов. Chrome и PDF не меняются. */
/* Spacemotion · стили презентации v023 (12.10.2026) — копия v022 + формат A4 (<body data-format="a4">): документы — КП, дорожные карты, сметы — в том же редакторе. Лист 1920 × 2715, поля 144, сетка 12 × 12, PDF A4 (210 × 297 мм), поток .flow с переносом на следующий лист (просмотрщик v010), классы документа doc-*. 16:9 не меняется. */
/* Spacemotion · стили презентации v022 (12.10.2026) — копия v021 + сетка слайда не растягивается: колонки и ряды minmax(0, 1fr). Раньше крупный заголовок или широкий блок раздвигал свой ряд или колонку, и вся сетка слайда съезжала на 2–20 px (так было на «Целях», «Карте», «Agency», «Из чего складывается»), а при смене размера рамки в редакторе сетка тянулась за ней. */
/* Spacemotion · стили презентации v021 (12.10.2026) — копия v020 + шрифт-стрелки «SM Arrows» первым в каждом наборе шрифтов: ↗ в ссылках и кнопках больше не превращается в эмодзи на iPhone и в Safari. */
/* Spacemotion · стили презентации v020 (11.10.2026) — копия v012 + цвет любого объекта из редактора v022 (--fill, --ink, тон и заливка фото, «+ Квадрат»). Номера v013–v019 заняты стилями гроусс-ветки. */
/* Spacemotion · стили презентации v012 (06.10.2026) — копия v003 + объекты редактора v006–v007 (масштаб --sc, наклон --t, цвет предмета --fill) и PDF без размытых теней и фильтров. Номера v004–v011 заняты стилями гроусс-ветки (спикер-кит Матвея Гроусса), в шаблон Spacemotion они не входят. */
/* Spacemotion · стили презентации v003 (03.10.2026) — копия v002 + сдвиг блоков (--dx/--dy), визуальное выравнивание по верху букв (--ay), интерактив при наведении. */
/* Spacemotion · стили презентации v002 (02.10.2026) — копия v001 + Barry J27 без поддельного жирного и с родным трекингом в заголовках. */
/* Spacemotion · презентация-КП v001 (02.10.2026)
   Сетка шаблона «Spacemotion Presentations Templates 20261002»: слайд 1920×1080, поля 24, 12 колонок × 12 рядов, промежуток 24.
   Цвета брендгайда: red space #FC4700 · black #0A0A0A · grey space #F2F2F2 · white. Служебные: #77776F, #D9D9D4.
   Шрифты: Barry J27 — шмуцтитулы и знаковые строки; Golos Text — заголовки и текст (замена Aeroport); IBM Plex Mono — цифры-метки. */

/* v002: у Barry J27 одно начертание. Диапазон 100–900 — чтобы браузер не рисовал поддельный «жирный» в заголовках (вес 600). */
/* v021 (12.10.2026): стрелки ← ↑ → ↓ ↗ … — свой маленький шрифт (Inter, OFL 1.1, только U+2190–2199, ~1,3 КБ, прямо в CSS).
   В Golos и Plex Mono стрелок нет: браузер брал системный шрифт, а iPhone и Safari — эмодзи ↗️. Теперь стрелка везде одна — обычная, цвета текста. */
/* v024 (13.10.2026): SM Arrows — ВТОРЫМ в наборе, первым — основной шрифт. Первый шрифт набора Safari считает «главным» и берёт у него высоту строки,
   хотя пробела и букв в нём нет (Chrome по правилам CSS ищет первый шрифт с пробелом). У SM Arrows (Inter) верх 0,97 и низ 0,24 кегля, у Barry — 0,75 и 0,40:
   в Safari строки Barry опускались на 0,19 кегля. Чтобы ↑ и ↓ не брались из Golos и Plex Mono (у них эти две есть), U+2190–2199 убраны из их диапазонов —
   стрелки ищутся дальше по набору и находятся в SM Arrows. Правило: первым в наборе — шрифт с пробелом и буквами; проверка — safari_font_check.py. */
@font-face { font-family: 'SM Arrows'; src: url(data:font/woff2;base64,d09GMk9UVE8AAAUMAAsAAAAACIAAAATEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYk4GyAcKgZgAEgBNgIkAywEBgWCaAcgG70HUVRNcgBfHGQiMugN87BeiFJvC03I34pMdryo/WDHK5/EJS76tU/5T3bvnzs7zxN6X75CczYfcgmWLsXStVRRiTugU5kcD/Bne//iGYxW2e3zAgkjmHacgoHfHEVQ/tfS1c98RT93E9UAn6a4w9LtEUWMzSrkzuAvGImNBaFSFHTZymP3sQclnnpgXg5QBvLCHWXRTcItZ4I9/tird7+xl5QNNtCBTuRdLCox29aABTKOsm7aqGg0xqmA58ykGC4cTHgEBbL5htyS0A8I4oU/kT1ewfhCGl8kMB7AxgOVcTc+9UEo/yMF9y3Ych3cu7f/fGHwnvg3E+HtfM5b35b/N6uD3nMXHXHXgV0gs7OXf2BEYkZhVe3G0/Nq55Il2krdkoslo5fLwajIxLjQFm9LKE5EsncSVS8fi9jw3GU9PTImLML6lWpt4Z881M41uFSeNOEXRGxYsnR0aZjTfLugtWagl5N7ZOf+hWVdodtD5v8SQGGnCZYIoih1yBRFm+hxrGJ79jHJvwvTT4dnI4IH3IUaRqV1zdXPwLGOTJtt8QNWLKqkmL42sQ2TGn0eYfX9zZ2CUkl3cndIDAkiDe5VuIQhLQRnVgMNEHjtbQNO1eeUNG/kiWshF4j+2rFtLbGR0KncaispxyzgP84QG6FKf+H98c9zQ3gPgoujZyczXE7IFXjBS0Kuy5FssBOHUyEMYQZ6V9w3vKrSCmyMZStttr5yIWtnEIF/HmE5hPSwu9PJMg25IUfgRS9xOS5XBoOo+6VHYQy35Fjel9jlKyPah4xPLob3Oe3kslNZauAXUxLLvGKQVefrQiGG5YwtBNp8Bc46U0Fh8QAk8DqGGQrTq4uKTJyrxXSa3T80y453ukfahxBiBMLEw5/c52kE992ZbRta146ltM0NFliEnVXhAoZVEkrdd7xytnCd2L8/EAJtaHUHhIAZf8fQ5l5EkPMrElKubz6wNnnW3rap2wRbrBVUW7F+rdixdW/pePN9auW2oZCUAnHeRJcwMp5fdX4Rj8/CUcB17VaZzsmm9of6fRMXUR4WhyZq5CnpcxWOjdhQAMX0rSohxKPXuF//55HzkWUe0so2aTYrdEqDsHykbo6lZBiY+KPNj6nV2yZjNdSNBEEdjGhFm9xkWh2/qElNg+o8a+InLxU4tW4YK+GHF+K5caQFAcy8+aJRXkkNjDgAc38DxUQtFIBtznbZuUzCHYm4nZcA+oMCupo/BkenE7CbfTzVRZ+QCDsGgOrSqra0GnetnTU33P05AlVt+Ka9B3yue+PRCKwIcgqd42LKPVwMcqAK69omiixdOAg/z4gxMTBT3qdZTKy3offj30U1+GtMRgDAu03t/njmk/Nvpsf5nPGtzkgGgFo4yGU1gX/fEGsAg8mWkkEzwwWVCQj6BpP21yknzVekfwU3XwIVYAEYNFFQNmFx7nwMcVcRw9gaiFEUWbGc42J04tz9n/Xc/cOQZsxqSwzqN2AZVZQIkeKoagzopSokLdNrCVWFJTRDenVbRpVpuWUGaJZYii4sDd/TY9Byo6r06rfciE5LxAgTMXxKsn6DlgnVKVaUSNG5J1ZiwmRVqpUuT5adNRTqRPduGKSR1HZ+EqsVg5xmLxA=) format('woff2'); font-weight: 100 550; unicode-range: U+2190-2199; font-display: block; }
@font-face { font-family: 'SM Arrows'; src: url(data:font/woff2;base64,d09GMk9UVE8AAAVIAAsAAAAACJgAAAT/AAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYlCGyAcKgZgAEgBNgIkAywEBgWCdAcgG9MHEZWccwl+FLhNz6irp55Jbp750KdrEq4k0ZbikYjTEV6dBc9/a6/3zc7+3TDPT9JymMG4gjAVpqoKQdX31AiC+69NgfDbidkpW3EkbkBN5BZRqNmPnHdbP6pGpWJLRezU1+EzXRAHN8410giuCYT9//vNeh94+2SaSsiESKgkQnuK6cyjetUQRUMWq2LvrI02lba1NE11FYBOkYPF7TfCowWtdCL60LfkdqfNWbe2dLkVHXoPh2eUzjNa7xkTpPthMnjMfh6Lkd4G+aEtyDh44s6aes7LHwgaKIlPWpYUdUqCjwz7Q+slY3MEfgzXhYk+ICpmuDkxq3BSd9/Fg6u3OlYVbW8cyMBCJtHovfWl7KSsdFuTocnMZJGplsyp7G06VH3R3zO7nhufqMVSM2/Svx7ywrCpmJ07oddFbCkqXtv59AF6etA6d+Mcm9jh4k+W+WB8Xlgv9cppq2cJ+C37/HV+SidYtLnjoyTqXfo+w3SDbPjst/l9iJjqjVkcjdfxOqNSLGV5zyjsj0UFt+uzU+XgzeaM4xbma19u50ku25n78zGG/Hz1ErCsFsLIjNeZNivNgHC+KLpsPEBLPAUIT01SKH2Vg4HWnw6wyUmynYMPDYS8l6v8s+KWwWKnMFNePlBp7TgWgt+wDsOjcVmFH1EZ/1uNFicGwpUZTRMbloAYrBmGcZjGtKEiiS1pmNg48wogONHkRAMHfMTevZn5ijmyUWJj/SHcW8p8JROADPj4cjRwHKOgvwIzVzcOj4y4Dmj3w1hKY2KIMKyhoenelR6opkAnWfhw4KQ6uFCiaZkOyPlwhSyHKBBW9yy6t6QBNECGUBRaTcOSe4u7VwP5KzRGIQMHeiyJwVtCkhLWeaO4r5R5ixU30CNCl5HJSeCE7iv3GhsaQGibIb3pDNxnyZKhxukOV8HAQ2jhf4GjykIk9kBQ9XpGnIdzV5GM7Usum0dzGZroOhNJIpNpjTKZti7iPJq3ikTlO0GZh/NUJiVJyxzkuY7LRWfJUPRIPd+z538wTP0FLttpFrcD981guIUz7p3BuOr65HLD49ifFPIy27JQKcMxxplihue6NMAh0qOFsN0hy88zU7DNAopb/sxVcNOERD6JXU5WbOD4YcXA7Fewn7lGTWKm5pxWJrz/D0WLTJHFsGfPpXksO9tKgQ4ryFaTZGyXTvUZWdErSi+jyaYI3ACNaxl7Ls5jz5//7pConJUSJUm2gf2XGYPzngPRmUJ3DpF89I8IAvgSL5HU1rf24qIB/v9X4TTrVdep7QWuTu2uE01GXK/tYrUQG+wcfRfcb7upD5w61oVj4TGAHTAu7e62Hh5745Wd1n8RSGrljwI96HH7EQtyQaVBpcLdjIQmTS7SIEXvqkUcVcwI+jwXhQ8Ovlh3bWaEsUqevjjwcCI09ytYLgBfLntquTOfClVbEn7K/SjWogC4koMiRrj/FZNWQE9lsp9dKROdk/THbqLzlPNL+9n3Vz2i3wk2eO7cBJ3wAxyGWYj2YUj02YV4nXZFIKt2i3bHizXVbpPv9Z/wEO8fhw2bjmxbsmDRLiNbpiz5jF6L5hhN1u2as83otG3DsjkzmBqr7LWPWLRh2w6GVI992zVLqm1YNavbnAV7Vk3ZlitdZq2xxAL5/3elmZInW5YcWfIUyVOiW482PUpEhE+DfqbGfliyYZ3JZw+uWFSi/XtnAQA=) format('woff2'); font-weight: 551 900; unicode-range: U+2190-2199; font-display: block; }
@font-face { font-family: 'Barry J27'; src: url('fonts/Barry-J27.otf') format('opentype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Golos Text'; src: url('fonts/golos-text-cyrillic-400-normal.woff2') format('woff2'); font-weight: 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'Golos Text'; src: url('fonts/golos-text-latin-400-normal.woff2') format('woff2'); font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+20BD; font-display: block; }
@font-face { font-family: 'Golos Text'; src: url('fonts/golos-text-cyrillic-500-normal.woff2') format('woff2'); font-weight: 500; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'Golos Text'; src: url('fonts/golos-text-latin-500-normal.woff2') format('woff2'); font-weight: 500; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+20BD; font-display: block; }
@font-face { font-family: 'Golos Text'; src: url('fonts/golos-text-cyrillic-600-normal.woff2') format('woff2'); font-weight: 600; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'Golos Text'; src: url('fonts/golos-text-latin-600-normal.woff2') format('woff2'); font-weight: 600; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+20BD; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2'); font-weight: 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; unicode-range: U+0000-00FF, U+2000-206F, U+2212; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2'); font-weight: 500; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; unicode-range: U+0000-00FF, U+2000-206F, U+2212; font-display: block; }

:root {
  --red: #FC4700;
  --black: #0A0A0A;
  --grey: #F2F2F2;
  --white: #FFFFFF;
  --muted: #77776F;
  --line: #D9D9D4;
  --font-text: 'Golos Text', 'SM Arrows', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-head: 'Golos Text', 'SM Arrows', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sign: 'Barry J27', 'SM Arrows', 'Golos Text', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SM Arrows', 'SFMono-Regular', Menlo, monospace;
  --s: 0.5;            /* масштаб слайда на экране — считает просмотрщик */
  --stage-bg: #E6E6E1;
}
body[data-font-choice="helvetica"] { --font-text: 'Helvetica Neue', Helvetica, Arial, 'SM Arrows', sans-serif; --font-head: 'Helvetica Neue', Helvetica, Arial, 'SM Arrows', sans-serif; }
body[data-font-choice="golos"] { --font-sign: 'Golos Text', 'SM Arrows', sans-serif; }
body[data-font-choice="barry"] { --font-head: 'Barry J27', 'SM Arrows', 'Golos Text', sans-serif; }
/* v002: «заголовки Barry» — родная толщина и трекинг Barry, как на шмуцтитулах (а не −4,5 % от Golos). */
body[data-font-choice="barry"] :is(.t-xxl, .t-xl, .t-l, .t-m, .t-s, .stat .big) { font-weight: 400; letter-spacing: -0.015em; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* v025: без автоувеличения текста на телефонах и планшетах — слайд масштабируется целиком (--s), кегли должны оставаться как в макете.
   100%, а не none: none в старых Safari мешал приближать пальцами. Проверка — safari_font_check.py (инструменты v008). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--stage-bg);
  color: var(--black);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
}

/* ---------- лента слайдов ---------- */

.deck {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(100% - 32px, 1600px);
  margin: 0 auto;
  padding: 24px 0 120px;
}
.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(10,10,10,.06), 0 18px 40px -24px rgba(10,10,10,.35);
}
.slide {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  display: grid;
  /* v022: дорожки не растягиваются содержимым — сетка всегда 134 × 64, промежуток 24 */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: 24px;
  overflow: hidden;
  background: var(--white);
  color: var(--black);
  font-size: 26px;
  line-height: 1.3;
}
.slide[data-theme="grey"] { background: var(--grey); }
.slide[data-theme="black"] { background: var(--black); color: var(--white); --muted: #8F8F88; --line: #2A2A28; }
.slide[data-theme="red"] { background: var(--red); color: var(--white); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.35); }

.blk { grid-column: var(--c, 1 / 13); grid-row: var(--r, auto); min-width: 0; position: relative; }
.bleed { position: absolute; inset: 0; z-index: 0; }
.slide > .blk { z-index: 1; }

/* ---------- типографика ---------- */

.t-xxl, .t-xl, .t-l, .t-m { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.045em; margin: 0; }
.t-xxl { font-size: 150px; line-height: 0.9; }
.t-xl  { font-size: 120px; line-height: 0.92; }
.t-l   { font-size: 88px;  line-height: 0.95; letter-spacing: -0.04em; }
.t-m   { font-size: 56px;  line-height: 1.02; letter-spacing: -0.03em; }
.t-s   { font-family: var(--font-head); font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.lead  { font-size: 28px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.body  { font-size: 24px; line-height: 1.34; font-weight: 400; margin: 0; }
.small { font-size: 18px; line-height: 1.3; margin: 0; }
.label { font-size: 16px; line-height: 1.2; font-weight: 500; letter-spacing: 0; margin: 0; color: var(--muted); }
.mono  { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.sign  { font-family: var(--font-sign); font-weight: 400; letter-spacing: -0.01em; text-transform: lowercase; margin: 0; }
.accent { color: var(--red); }
.slide[data-theme="red"] .accent { color: var(--black); }
.muted { color: var(--muted); }
p { margin: 0; }
p + p { margin-top: 0.6em; }
.blk > p + p { margin-top: 0.7em; }
a { color: inherit; text-decoration: none; }
.u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.nb { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- шапка слайда ---------- */

.meta { display: contents; }
.meta[hidden] { display: none; }
.meta .m1, .meta .m2, .meta .m3 { font-size: 16px; line-height: 1.2; font-weight: 500; z-index: 2; }
.meta .m1 { grid-column: 1 / 3; grid-row: 1; }
.meta .m2 { grid-column: 3 / 5; grid-row: 1; }
.meta .m3 { grid-column: 10 / 12; grid-row: 1; justify-self: end; text-align: right; color: var(--muted); }
.meta .mark { grid-column: 12 / 13; grid-row: 1; justify-self: end; width: 30px; height: 32px; z-index: 2; }
.meta .mark img { width: 100%; height: 100%; display: block; }
.slide[data-theme="black"] .meta .mark .mk-dark, .slide[data-theme="red"] .meta .mark .mk-dark { display: none; }
.slide:not([data-theme="black"]):not([data-theme="red"]) .meta .mark .mk-light { display: none; }
.num-n { font-family: var(--font-mono); font-weight: 500; }

/* ---------- кнопки-ссылки ---------- */

.links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.lnk { font-size: 20px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.lnk::after { content: ' \2197\FE0E'; font-family: var(--font-text); text-decoration: none; display: inline-block; margin-left: 2px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px; border-radius: 6px;
  background: var(--red); color: var(--white);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
}
.btn::after { content: '\2197\FE0E'; font-family: var(--font-text); font-weight: 500; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.slide[data-theme="red"] .btn { background: var(--white); color: var(--red); }

/* ---------- медиа ---------- */

.media { position: relative; overflow: hidden; background: #111; width: 100%; height: 100%; }
.bleed.media { position: absolute; inset: 0; width: auto; height: auto; }
.media video, .media img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media img.print-poster { display: none; }
.media .cap {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  font-size: 16px; font-weight: 500; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.media .watch {
  position: absolute; right: 18px; bottom: 16px; z-index: 3;
  font-size: 16px; font-weight: 600; color: #fff; padding: 9px 14px; border-radius: 4px;
  background: rgba(10,10,10,.55); backdrop-filter: blur(6px);
}
.media .watch::after { content: ' \2197\FE0E'; font-family: var(--font-text); }
.shade-b::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0) 38%, rgba(10,10,10,.78) 100%); }
.shade-l::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.35) 48%, rgba(10,10,10,0) 70%); }

/* ---------- 01 обложка ---------- */

.cover-logo img { width: 100%; display: block; }
.cover-note { font-size: 26px; line-height: 1.25; font-weight: 500; color: #fff; }
.cover-title { color: #fff; }
.foot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; font-size: 20px; font-weight: 500; color: #fff; }
.foot-row .site { font-family: var(--font-sign); font-size: 26px; text-transform: lowercase; }
.foot-row .grp { display: flex; gap: 22px; align-items: baseline; }
.foot-row .grp b { color: var(--red); font-weight: 600; }
.foot-row .grp a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }

/* ---------- 02 обещание ---------- */

.promise { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; height: 100%; }
.promise > div { border-top: 3px solid currentColor; padding-top: 22px; }
.promise .label { color: var(--red); font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.promise .t-s { font-size: 50px; line-height: 1.05; letter-spacing: -0.03em; }

/* ---------- 03 форматы ---------- */

.fmt-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; height: 100%; }
.fmt-grid .card { grid-column: span 3; background: var(--white); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.fmt-grid .card.w4 { grid-column: span 4; }
.slide[data-theme="black"] .fmt-grid .card { background: #161615; }
.card .n { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--red); letter-spacing: .04em; }
.card h3 { font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.card .body { font-size: 22px; line-height: 1.32; }
.card .proof { margin-top: auto; font-size: 16px; font-weight: 500; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.card .proof b { color: var(--black); font-weight: 600; }
.slide[data-theme="black"] .card .proof b { color: #fff; }

/* ---------- 04 проекты ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; height: 100%; }
.tile { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.tile .pic { position: relative; flex: 1 1 auto; overflow: hidden; background: #1a1a19; min-height: 0; }
.tile .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .pic img { transform: scale(1.04); }
.tile .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.tile .row .y { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--muted); }
.tile .what { font-size: 16px; line-height: 1.25; color: var(--muted); margin-top: -6px; }

/* ---------- кейсы: строки «метка — значение» ---------- */

.facts { display: grid; grid-template-columns: 158px 1fr; column-gap: 0; row-gap: 18px; align-content: start; }
.facts .k { font-size: 16px; font-weight: 500; color: var(--muted); padding-top: 5px; }
.facts .v { font-size: 22px; line-height: 1.28; font-weight: 500; }
.facts .v.hl { color: var(--red); font-weight: 600; }
.facts .full { grid-column: 1 / 3; }

/* ---------- шмуцтитулы ---------- */

.chapter-word { font-family: var(--font-sign); font-weight: 400; text-transform: lowercase; letter-spacing: -0.015em; line-height: 0.8; margin: 0; font-size: 230px; }
.chapter-num { font-family: var(--font-sign); font-size: 360px; line-height: 0.8; text-align: right; color: var(--red); margin: 0; }
.slide[data-theme="red"] .chapter-num { color: var(--white); }
.chapter-index { display: grid; grid-template-columns: 56px 1fr; row-gap: 6px; font-size: 20px; font-weight: 500; align-content: end; }
.chapter-index span { color: var(--muted); }
.chapter-index .on { color: inherit; }
.chapter-index .n { font-family: var(--font-mono); font-size: 16px; padding-top: 3px; }

/* ---------- 09 ЦПБ ---------- */

.verticals { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; height: 100%; align-items: end; }
.verticals .v-item { display: flex; flex-direction: column; gap: 12px; }
.verticals .v-item:nth-child(2) { transform: translateY(-88px); }
.verticals .media { aspect-ratio: 1968 / 2908; height: auto; }
.verticals .label { color: var(--muted); }

/* ---------- 12 рилсы ---------- */

.phone { height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.phone .media { height: 100%; width: auto; aspect-ratio: 9 / 16; border-radius: 34px; box-shadow: 0 0 0 10px var(--black); }
.cols3 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
.cols3 > div { border-top: 3px solid currentColor; padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.cols3 .n { font-family: var(--font-mono); font-size: 16px; color: var(--red); font-weight: 500; }
.cols3 h3 { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; margin: 0; }

/* ---------- 14 сервис ---------- */

.rows { display: flex; flex-direction: column; height: 100%; }
.rows .rw { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; border-top: 2px solid currentColor; padding: 22px 0 0; flex: 1 1 0; }
.rows .rw .k { grid-column: 1 / 4; font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.rows .rw .v { grid-column: 4 / 12; font-size: 28px; line-height: 1.3; font-weight: 500; }
.stat { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right; }
.stat .big { font-family: var(--font-head); font-size: 132px; white-space: nowrap; line-height: 0.8; font-weight: 600; letter-spacing: -0.06em; color: var(--red); }
.stat .label { margin-top: 18px; }

/* ---------- 15 сохранность ---------- */

.chain { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; height: 100%; }
.chain .node { position: relative; border: 2px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.chain .node .n { font-family: var(--font-mono); font-size: 18px; color: var(--muted); font-weight: 500; }
.chain .node h3 { font-size: 48px; line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.chain .node .small { color: var(--muted); font-size: 24px; }
.chain .node { justify-content: space-between; }
.chain .node + .node::before {
  content: ''; position: absolute; left: -26px; top: 50%; width: 28px; height: 2px; background: var(--red);
}
.chain .node + .node::after {
  content: ''; position: absolute; left: -8px; top: calc(50% - 6px); border: 7px solid transparent; border-left: 10px solid var(--red); border-right: 0;
}
.chain .node.safe { background: var(--red); border-color: var(--red); color: var(--white); }
.chain .node.safe .n, .chain .node.safe .small { color: rgba(255,255,255,.85); }

/* ---------- 16 цена ---------- */

.price { width: 100%; border-collapse: collapse; }
.price th { font-size: 16px; font-weight: 500; color: var(--muted); text-align: left; padding: 0 0 12px; }
.price th.r, .price td.r { text-align: right; }
.price th.r { padding-right: 56px; }
.price td { border-top: 1.5px solid var(--black); padding: 14px 0 13px; vertical-align: baseline; }
.price tr:last-child td { border-bottom: 1.5px solid var(--black); }
.price td.f { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; width: 38%; }
.price td.p { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; width: 24%; padding-right: 56px; }
.price td.unit { font-size: 20px; color: var(--muted); font-weight: 500; }
.value-line { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--red); }

/* ---------- 17 атмосфера ---------- */

.duo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; height: 100%; }
.duo .media { height: 100%; }
.duo .media img.ph { filter: grayscale(1) contrast(1.06); }
.duo .media.color img.ph { filter: none; }

/* ---------- 18 карта ---------- */

.map { position: relative; height: 100%; overflow: hidden; background: #ececec; }
.map img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.addr { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- 19 финал ---------- */

.contacts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; align-items: end; }
.contacts .k { font-size: 16px; font-weight: 500; opacity: .78; margin-bottom: 8px; }
.contacts .v { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- появление (только экран, не в редакторе) ---------- */

@media screen {
  body.anim:not(.editor-build) .frame .slide > .blk,
  body.anim:not(.editor-build) .frame .slide > .bleed { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  body.anim:not(.editor-build) .frame:not(.seen) .slide > .blk { opacity: 0; transform: translateY(28px); }
  body.anim:not(.editor-build) .frame:not(.seen) .slide > .bleed { opacity: 0; transform: scale(1.04); }
  body.anim:not(.editor-build) .frame .slide > .blk:nth-of-type(2) { transition-delay: .06s; }
  body.anim:not(.editor-build) .frame .slide > .blk:nth-of-type(3) { transition-delay: .12s; }
  body.anim:not(.editor-build) .frame .slide > .blk:nth-of-type(4) { transition-delay: .18s; }
  body.anim:not(.editor-build) .frame .slide > .blk:nth-of-type(n+5) { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
  body.anim .frame .slide > .blk, body.anim .frame .slide > .bleed { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- просмотр слайдами ---------- */

body.is-presenting { background: #000; overflow: hidden; }
body.is-presenting .deck { position: fixed; inset: 0; width: 100vw; height: 100vh; padding: 0; margin: 0; gap: 0; display: block; }
body.is-presenting .frame { position: absolute; left: 50%; top: 50%; width: calc(1920px * var(--s)); height: calc(1080px * var(--s)); aspect-ratio: auto; transform: translate(-50%, -50%); box-shadow: none; display: none; }
body.is-presenting .frame.is-current { display: block; }
body.is-presenting .frame[data-hidden="true"] { display: none !important; }
.present-ui { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); display: none; }
.present-ui i { display: block; height: 100%; width: 0; background: var(--red); transition: width .35s ease; }
body.is-presenting .present-ui { display: block; }
.present-count { position: fixed; right: 18px; bottom: 14px; z-index: 61; font: 500 13px/1 var(--font-mono); color: rgba(255,255,255,.55); display: none; }
body.is-presenting .present-count { display: block; }

.viewer-bar {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: flex; gap: 8px; align-items: center;
  font: 500 14px/1 var(--font-text);
}
.viewer-bar button {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: 12px 18px; background: var(--black); color: #fff; font: inherit;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}
.viewer-bar button.red { background: var(--red); }
body.is-presenting .viewer-bar { display: none; }

/* ---------- PDF и печать ---------- */

@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { background: #fff !important; width: 1920px; }
  .deck { display: block; width: 1920px; margin: 0; padding: 0; gap: 0; }
  .frame { width: 1920px; height: 1080px; aspect-ratio: auto; box-shadow: none; break-after: page; page-break-after: always; overflow: hidden; }
  .frame:last-child { break-after: auto; page-break-after: auto; }
  .frame[data-hidden="true"] { display: none !important; }
  .slide { transform: none !important; }
  .media video { display: none !important; }
  .media img.print-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .viewer-bar, .present-ui, .present-count, .editor-only { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- v003: сдвиг блоков и визуальное выравнивание ---------- */
/* --dx/--dy ставит редактор (перетаскивание за рамку), --ay считает просмотрщик (data-align-top). Без переменных — никакого translate. */
[style*="--dx"], [style*="--dy"], [style*="--ay"] { translate: var(--dx, 0px) calc(var(--dy, 0px) + var(--ay, 0px)); }

/* ---------- v003: интерактив при наведении (только экран, не в режиме правки) ---------- */
@media screen and (hover: hover) {
  body:not(.is-editing) .fmt-grid .card { transition: background-color .28s cubic-bezier(.2,.7,.2,1), color .28s cubic-bezier(.2,.7,.2,1); }
  body:not(.is-editing) .fmt-grid .card:hover { background: var(--red); color: var(--white); }
  body:not(.is-editing) .fmt-grid .card:hover .n,
  body:not(.is-editing) .fmt-grid .card:hover .proof { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.35); }
  body:not(.is-editing) .tile .row > :first-child { transition: color .28s cubic-bezier(.2,.7,.2,1); }
  body:not(.is-editing) .tile:hover .row > :first-child { color: var(--red); }
  body:not(.is-editing) .chain .node:not(.safe) { transition: background-color .28s cubic-bezier(.2,.7,.2,1), border-color .28s, color .28s; }
  body:not(.is-editing) .chain .node:not(.safe):hover { background: var(--red); border-color: var(--red); color: var(--white); }
  body:not(.is-editing) .chain .node:not(.safe):hover .n,
  body:not(.is-editing) .chain .node:not(.safe):hover .small { color: rgba(255,255,255,.85); }
}

/* ---------- v012 (06.10.2026): объекты из строки «Объект» редактора v006–v007 ---------- */
/* Масштаб и наклон ставит редактор инлайн-переменными; без переменных ничего не меняется. */
[style*="--sc:"] { scale: var(--sc); }
[style*="--t:"] { rotate: var(--t); }
/* Цвет предмета (--fill): карточки форматов, узлы схемы, кнопки. Наведение (стили v003) по-прежнему красит в red space. */
.fmt-grid .card { background: var(--fill, var(--white)); }
.slide[data-theme="black"] .fmt-grid .card { background: var(--fill, #161615); }
.chain .node[style*="--fill:"] { background: var(--fill); border-color: var(--fill); }
.btn[style*="--fill:"] { background: var(--fill); }

/* ---------- v012: PDF без серых плашек ----------
   Размытые тени и фильтры Chrome кладёт в PDF картинкой с мягкой маской (SMask); Просмотр в macOS рисует часть
   таких масок сплошным серым прямоугольником. Поэтому при печати — без размытия: тень у подписи снимается,
   у кнопки «Смотреть» вместо матового стекла — ровная полупрозрачная плашка. Тени без размытия (обводка телефона,
   контур кнопки) печатаются вектором и остаются. Новые тени в слайдах — только без размытия или с таким же правилом печати. */
@media print {
  .slide *, .slide *::before, .slide *::after { text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .media .watch { background: rgba(10,10,10,.72); }
}


/* ---------- v020 (11.10.2026): цвет любого объекта (редактор v022) ----------
   --fill ставит редактор. Блок, карточка, кнопка — заливка, --ink — цвет текста внутри (чёрный или белый по яркости).
   Текст — цвет букв. Фото и видео в кадре: тон (смешивание «цвет»: оттенки выбранного цвета, детали видны) или
   заливка (data-fill-mode="solid"). Картинка (img): тон — та же картинка фоном со смешиванием, заливка — цвет в её рамке.
   Цвет из редактора сильнее оформления слайда (!important). Chrome печатает смешивание картинкой, без мягких масок. */
.slide :is(div, section, figure, a.btn, button)[style*="--fill:"]:not([data-media]):not(.media) { background-color: var(--fill) !important; }
.slide .btn[style*="--fill:"] { background: var(--fill) !important; }
.slide [style*="--ink:"] { color: var(--ink) !important; }
.slide :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, span, a:not(.btn), b, i, em, strong)[style*="--fill:"] { color: var(--fill) !important; }
.slide :is([data-media], .media)[style*="--fill:"] { isolation: isolate; }
.slide :is([data-media], .media)[style*="--fill:"]::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--fill); mix-blend-mode: color; pointer-events: none; }
.slide :is([data-media], .media)[style*="--fill:"][data-fill-mode="solid"]::after { mix-blend-mode: normal; }
.slide :is([data-media], .media)[style*="--fill:"] > :is(.watch, .cap, a) { z-index: 2; }
.slide img[style*="--fill:"] { object-position: -99999px 0 !important; background: var(--fill) !important; }
.slide img[style*="--fill:"][style*="--fill-src:"]:not([data-fill-mode="solid"]) { background: var(--fill-src) center / 100% 100% no-repeat, var(--fill) !important; background-blend-mode: luminosity; }
/* «+ Квадрат»: рамка без фото — серая; с фото — как любой кадр */
.sq-obj { position: absolute; overflow: hidden; background: #D9D9D4; }
.sq-obj > img.ph, .sq-obj > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- v023 (12.10.2026): формат A4 — документы (КП, дорожные карты, сметы) ----------
   <body data-format="a4">. Лист 1920 × 2715 px — пропорции A4 при ширине слайда, поэтому редактор, сетка ⌃G, «Объект»,
   ручки размера и выравнивание работают как в презентациях. Поля 144 px — на бумаге ≈ 15 мм, принтер их не срежет.
   Сетка 12 × 12, промежуток 24: колонки 114 px, ряды 180,25 px.
     колонка n начинается на 144 + 138·(n − 1): 144 · 282 · 420 · 558 · 696 · 834 · 972 · 1110 · 1248 · 1386 · 1524 · 1662; конец — +114;
     ряд n начинается на 144 + 204,25·(n − 1): 144 · 348,25 · 552,5 · 756,75 · 961 · 1165,25 · 1369,5 · 1573,75 · 1778 · 1982,25 · 2186,5 · 2390,75; конец — +180,25.
   На бумаге лист в 0,4134 раза меньше: текст 30 px ≈ 9,3 pt (как в КП), заголовок раздела 48 px ≈ 15 pt, метки 20 px ≈ 6,2 pt.
   PDF — настоящий A4: именованная страница a4, лист печатается с масштабом 793,7 / 1920. */
body[data-format="a4"] { --sm-slide-h: 2715px; --sm-pad: 144px; --a4k: 0.413386; }
body[data-format="a4"] .deck { width: min(100% - 32px, 1120px); }
body[data-format="a4"] .frame { aspect-ratio: 1920 / 2715; }
body[data-format="a4"] .slide { height: 2715px; padding: 144px; font-size: 30px; line-height: 1.42; }
body[data-format="a4"].is-presenting .frame { height: calc(2715px * var(--s)); }
body[data-format="a4"] .meta .m1, body[data-format="a4"] .meta .m2, body[data-format="a4"] .meta .m3 { font-size: 22px; line-height: 1.3; }
body[data-format="a4"] .meta .mark { width: 40px; height: 43px; }
@page a4 { size: 210mm 297mm; margin: 0; }
@media print {
  html:has(> body[data-format="a4"]), body[data-format="a4"], body[data-format="a4"] .deck { width: 210mm !important; }
  body[data-format="a4"] .frame { page: a4; width: 210mm; height: 297mm; aspect-ratio: auto; overflow: hidden !important; }
  /* zoom, а не transform: у transform лист остаётся 2715 px в раскладке, и Chrome режет его по высоте страницы */
  body[data-format="a4"] .slide { transform: none !important; zoom: 0.413386; }
}

/* поток: блоки .fu идут по листам сами (просмотрщик v010). Не влез — на следующий лист; лишние листы появляются и исчезают.
   .fu-keep — не оставлять последним на листе (заголовок раздела уходит вместе со следующим блоком). */
.flow { position: relative; min-height: 0; display: block; }
.flow > .fu { position: relative; }
body.editor-build .flow.sm-flow-over { outline: 6px solid #ff3b1f; outline-offset: 8px; }

/* шапка раздела: слева номер и название (колонки 1–3), справа вводка (колонки 4–12) */
.doc-h { display: grid; grid-template-columns: 390px 1218px; column-gap: 24px; align-items: start; border-top: 2px solid currentColor; padding-top: 32px; margin-top: 104px; }
.flow > .doc-h:first-child { margin-top: 0; }
.doc-h .num { display: block; font: 500 22px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--red); margin-bottom: 24px; }
.doc-h h2 { font-family: var(--font-head); font-weight: 600; font-size: 48px; line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
.doc-h .lead, .doc-p .lead { font-size: 34px; line-height: 1.34; font-weight: 500; letter-spacing: -0.01em; }
.doc-h .lead b, .doc-p b, .doc-step b { font-weight: 600; }
.doc-h > div > p + p { margin-top: 18px; }

/* абзац и примечание — в правой колонке */
.doc-p { margin-left: 414px; padding-top: 26px; }
.doc-p p { font-size: 30px; line-height: 1.42; }
.doc-p p + p { margin-top: 18px; }
.doc-note { margin-left: 414px; padding-top: 24px; font-size: 24px; line-height: 1.4; color: var(--muted); }

/* пункт с номером: номер — колонка 4, текст — колонки 5–12 (1080 px ≈ 70 знаков) */
.doc-step { display: grid; grid-template-columns: 114px 1080px; column-gap: 24px; align-items: baseline; margin-left: 414px; padding: 24px 0 26px; border-bottom: 2px solid var(--line); }
.doc-step .n { font: 500 22px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--red); }
.doc-step .tx { font-size: 30px; line-height: 1.42; }

/* список с оранжевым тире — с колонки 5 */
.doc-sub { margin-left: 552px; padding: 14px 0 24px; }
.doc-sub ul, .doc-box ul { list-style: none; margin: 0; padding: 0; }
.doc-sub li, .doc-box li { position: relative; padding-left: 52px; font-size: 27px; line-height: 1.42; }
.doc-sub li + li, .doc-box li + li { margin-top: 12px; }
.doc-sub li::before, .doc-box li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 30px; border-top: 4px solid var(--red); }

/* серая плашка — гипотеза, условие, важное */
.doc-box { margin: 32px 0 8px 414px; background: var(--grey); padding: 44px 48px 48px; }
.doc-box h3 { font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; }

/* стоимость: название — колонки 4–10, цена — колонки 11–12 (правым краем на конце колонки 12) */
.doc-price { margin-left: 414px; padding-top: 32px; }
.doc-price .th, .doc-price .rw { display: grid; grid-template-columns: 942px 252px; column-gap: 24px; align-items: baseline; }
.doc-price .th { font: 500 20px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 16px; border-bottom: 2px solid currentColor; }
.doc-price .th > :last-child, .doc-price .rw .p { text-align: right; }
.doc-price .rw { padding: 24px 0 26px; border-bottom: 2px solid var(--line); }
.doc-price .rw .f { font-size: 30px; line-height: 1.38; }
.doc-price .rw .x { display: block; margin-top: 6px; font-size: 24px; line-height: 1.35; color: var(--muted); }
.doc-price .rw .p { font-size: 30px; font-weight: 500; white-space: nowrap; }
.doc-price .rw.tot { border-bottom: 0; }
.doc-price .rw.tot .f, .doc-price .rw.tot .p { font-weight: 600; }

/* условия: метка — колонки 4–6, значение — колонки 7–12 */
.doc-terms { margin-left: 414px; padding-top: 32px; }
.doc-terms .rw { display: grid; grid-template-columns: 390px 804px; column-gap: 24px; align-items: baseline; padding: 22px 0 24px; border-bottom: 2px solid var(--line); }
.doc-terms .rw:first-child { border-top: 2px solid currentColor; }
.doc-terms .k { font-size: 28px; line-height: 1.38; font-weight: 600; }
.doc-terms .v { font-size: 30px; line-height: 1.42; }

/* реквизиты и контакты: ячейки по 3 колонки, метка моноширинным */
.doc-req { display: grid; grid-template-columns: repeat(4, 390px); column-gap: 24px; row-gap: 40px; align-content: start; }
.doc-req > div { border-top: 2px solid currentColor; padding-top: 18px; }
.doc-req .l { display: block; font: 500 20px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.doc-req .v { font-size: 28px; line-height: 1.36; font-weight: 500; }
.flow > .doc-req { padding-top: 32px; }

/* обложка: чёрная полоса под край листа, маленький логотип, название Barry */
.doc-band { margin: -144px -144px 0; background: var(--black); }
.doc-logo img { width: 100%; height: auto; display: block; }
.doc-cover-date { font: 500 20px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #9C9C96; text-align: right; }
.doc-cover-date b { color: var(--white); font-weight: 500; }
.doc-title { font-family: var(--font-sign); font-weight: 400; text-transform: lowercase; font-size: 230px; line-height: 0.8; letter-spacing: -0.015em; color: var(--white); margin: 0; }
.doc-cover-for { font: 500 20px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #9C9C96; }
.doc-cover-sub { font-size: 34px; line-height: 1.3; font-weight: 500; color: #CFCFCA; }
.doc-cover-name, .blk > p.doc-cover-name { font-family: var(--font-sign); font-weight: 400; text-transform: lowercase; font-size: 96px; line-height: 0.9; letter-spacing: -0.015em; color: var(--red); margin-top: 22px; }