/* СРМ ЗАКАЗ — витрина. Цвета и приёмы по ТЗ: изумрудный фон гранями, в половинах — ромбики
   под 45°, блоки чёрные с белой окаёмкой, текст в них жёлтый. */

:root {
  --em-deep:   #062e2a;
  --em-mid:    #0a6558;
  --em-bright: #17b3a3;
  --pattern-bright-rgb: 23,179,163;
  --pattern-deep-rgb: 6,46,42;
  --plate:     #060606;
  --line:      #ffffff;
  --cream:     #f2d675;   /* жёлтый текст в блоках */
  /* Командные клавиши (7 шт.) — вишнёвые, чтобы на телефоне отличались от текстовых плашек
     (правка заказчика 27.09: «многие тычут верхнюю кнопку, а результата нет»). */
  --cmd-bg:    linear-gradient(180deg, #122d10 0%, #0d200c 100%);   /* 28.09: темнее и холоднее, прежний отдавал кирпичом */
  --cmd-bg-hover: linear-gradient(180deg, #153513 0%, #0f260e 100%);
  --sheet-bg:  #f1f1f1;
  --radius: 16px;
  --gap: clamp(10px, 1.4vh, 18px);
  --card-h: clamp(86px, 15.5vh, 170px);   /* окна 7-9, логотип и кадр — одна высота */
}

/* ADMIN_BACKGROUND_START */
body {
  --vitrina-base: #b2c3a7;
  --em-mid: var(--vitrina-base);
  --em-deep: #4b5d3f;
  --pattern-bright-rgb: 242,245,240;
  --pattern-deep-rgb: 75,93,63;
}
/* ADMIN_BACKGROUND_END */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Roboto, -apple-system, Arial, sans-serif;
  background: var(--em-deep);
  color: #fff;
  /* Страница укладывается в высоту экрана и терпит уменьшение окна: основная сетка тянется,
     блоки заданы гибко, поэтому «окно в окно» не ломает раскладку (правка клиента). */
  min-height: 100vh; display: flex; flex-direction: column;
}
.grid { flex: 1 1 auto; min-height: 0; }

/* ---------- Фоны ---------- */
.topband {
  padding: clamp(10px, 1.6vh, 20px) 20px;
  background-color: var(--em-mid);
  background-image:
    linear-gradient(135deg, rgba(var(--pattern-bright-rgb),.55) 0 25%, transparent 25% 50%, rgba(var(--pattern-deep-rgb),.55) 50% 75%, transparent 75%),
    linear-gradient(45deg,  rgba(var(--pattern-bright-rgb),.35) 0 25%, transparent 25% 50%, rgba(var(--pattern-deep-rgb),.45) 50% 75%, transparent 75%),
    linear-gradient(180deg, rgba(var(--pattern-bright-rgb),.25), rgba(var(--pattern-deep-rgb),.6));
  background-size: 120px 120px, 80px 80px, 100% 100%;
}
.half {
  background-color: var(--em-mid);
  background-image:
    linear-gradient(45deg, rgba(var(--pattern-bright-rgb),.30) 25%, transparent 25% 75%, rgba(0,0,0,.28) 75%),
    linear-gradient(45deg, rgba(var(--pattern-bright-rgb),.30) 25%, transparent 25% 75%, rgba(0,0,0,.28) 75%);
  background-size: 72px 72px;
  background-position: 0 0, 36px 36px;
}

/* ---------- Блоки ---------- */
.plate {
  background: var(--plate);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.plate-title { padding: 14px 26px; text-align: center; max-width: 1100px; margin: 0 auto; }
/* Запас под крест нужен только там, где крест есть: на страницах из подвала и в окнах.
   На главной креста нет, и лишние поля зря ломали заголовок на три строки
   (правка заказчика 3 от 25.08). */
/* Шапка с крестом ведёт себя одинаково на странице и в окне: полоса фиксированной высоты,
   надпись по центру, кегль подбирается скриптом под ширину. Иначе длинный заголовок
   раздвигал полосу на странице, и окна переставали с ней совпадать. */
.plate-title.with-close {
  box-sizing: border-box; min-height: 80px;
  padding-left: 62px; padding-right: 62px;
  display: flex; align-items: center; justify-content: center;
}
.plate-title.with-close h1 { font-size: var(--head-fs, clamp(19px, 2.6vw, 34px)); line-height: 1.15; }
.plate-title h1 {
  margin: 0; font-size: clamp(19px, 2.6vw, 34px); font-weight: 800;
  font-style: normal; letter-spacing: .3px;   /* прямой шрифт: курсив выбивался из общего рисунка */
  color: var(--cream);            /* шапка жёлтым */
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: #fff; }
/* space-between: в обеих половинах нижний ряд прижат к низу — поэтому окно 4 встаёт
   ровно на уровень окон 7, 8, 9 (высота половин одинаковая за счёт сетки). */
/* Равномерные отступы между окнами и одинаковый низ у обеих половин: space-between делит
   свободное место поровну, поэтому внизу больше не зияет пустота (правка клиента). */
.half { padding: clamp(12px, 1.8vh, 26px) clamp(14px, 1.6vw, 26px); display: flex; flex-direction: column; gap: var(--gap); justify-content: space-between; }
.half-left  { align-items: flex-start; }
.half-right { align-items: stretch; }

/* Текстовые окна 1 и 5 */
.plate-text {
  width: 100%; padding: clamp(14px, 2vh, 26px) clamp(18px, 2vw, 30px); min-height: clamp(92px, 17vh, 200px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(3px, .8vh, 8px);
}
.plate-text p { margin: 0; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.45; }
/* Жёлтая строка КРУПНЕЕ остальных — клиенту так понравилось и текст подогнан под этот кегль */
.plate-text .accent { color: var(--cream); font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); }
.w-5 { text-align: right; }        /* окно 5 — по правому краю */

/* Точки-заполнители цветом фона: выравнивают длину строк, но не видны */
.ghost { color: var(--plate); user-select: none; }

/* Командные окна 2, 3, 4, 6 — надпись по центру блока (правка клиента) */
.plate-cmd {
  min-height: clamp(46px, 7.5vh, 86px); padding: 12px 26px; font: inherit; cursor: pointer;
  font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; color: var(--cream);
  display: flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none;                  /* клавиша новой страницы — ссылка, а не кнопка */
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
/* Окно 2 сверху, окно 4 внизу (на уровне окон 7-9), окно 3 ровно между ними */
/* Обёртка не участвует в раскладке: окна 2, 3, 4 становятся прямыми соседями окна 1,
   и свободное место делится поровну между всеми четырьмя. */
.left-stack { display: contents; }
.left-stack > * { width: 100%; }
/* Правка 26.08: посетитель жал по крупным плашкам и не понимал, где команда, а где текст.
   Теперь у клавиш при наведении загорается жёлтая рамка и подсветка, а текст становится
   ярче. Текстовые плашки не реагируют — по ним сразу видно, что нажимать нечего. */
.plate-cmd, .plate-try { background: var(--cmd-bg); }
/* Некомандные окна витрины (заголовок, окна 1 и 5) — в вишнёвой рамке цвета клавиш (правка 28.09):
   клавиши с белой рамкой и вишнёвым фоном, окна чёрные в вишнёвой рамке — видно, что жать, а что читать.
   Только главная: на остальных страницах и во всплывающих окнах заголовки прежние. */
.vitrina > header.topband > .plate-title,
.vitrina .plate-text { border-color: #6a0a33; }
/* Длинные надписи клавиш переносятся ровно, без одинокого слова на второй строке (27.09) */
.plate-cmd { text-wrap: balance; }
.plate-cmd:hover {
  background: var(--cmd-bg-hover); transform: translateY(-2px);
  border-color: var(--cream);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 3px rgba(255,233,168,.35);
}
.plate-cmd:active { transform: translateY(0); }

/* Окно 3 + логотип рядом */
.row-card { display: flex; align-items: center; gap: var(--gap); width: 100%; }
.row-card .w-3 { flex: 1 1 auto; margin-right: clamp(12px, 1.4vw, 22px); }   /* тянется до логотипа, оставляя отступ */
.row-card .logo-btn { margin-left: 0; }   /* логотип прижат к правой стороне (правка клиента) */
/* Логотип габаритами с окна 7, 8, 9 (правка клиента) */
.logo-btn {
  flex: 0 0 auto; width: var(--card-h); height: var(--card-h); padding: 0; cursor: pointer;
  border: 3px solid var(--line); border-radius: 50%; overflow: hidden;
  background: #000; box-shadow: 0 6px 22px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s;
}
.logo-btn img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; } /* логотип БПИ целиком, со всеми надписями (14.10) */
.logo-btn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--cream);
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 3px rgba(255,233,168,.35);
}

/* Правая часть: кадр видео (пропорция как у ролика) + окно 6 на остаток ширины */
/* Пока скрипт не посчитал раскладку половин, страницу не показываем: иначе браузер успевает
   нарисовать промежуточный кадр, и при обновлении вёрстку заметно дёргает (правка 20.08).
   Придерживаем ЦЕЛИКОМ, а не по частям: когда держали только полотно и нижнюю зону, шапка
   рисовалась сразу, а остальное появлялось следом — и это читалось как «что-то всплыло».
   Включается только при живом скрипте (класс js-on) — без него страница видна сразу. */
.js-on body { visibility: hidden; }
.js-on.layout-ready body { visibility: visible; }

.video-row { display: flex; align-items: stretch; gap: var(--gap); width: 100%; }
.videoframe {
  /* Высота задана, ширина следует из пропорции ролика 16:9. Без явной высоты кадр растягивался
     по строке и вылезал за экран — появлялась прокрутка вбок. */
  flex: 0 0 auto; height: var(--card-h); aspect-ratio: 16 / 9;
  padding: 0; overflow: hidden; cursor: pointer; position: relative;
  display: block; border: 3px solid var(--line);
}
.w-6 { flex: 1 1 auto; }                      /* окно 6 добирает остаток */
/* Клавиша формы связи (правка 12.09, по рисунку заказчика): надпись в три строки,
   справа крупная жирная стрелка вниз (SVG, чтобы толщина не зависела от шрифта). */
.w-6 .cmd-text { text-wrap: balance; }
.w-6 .cmd-arrow { flex: 0 0 auto; width: 2.1em; height: 2.1em; margin-left: .55em; color: var(--cream); display: block; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); width: 100%; }
.videoframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.videoframe .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.8);
  background: rgba(0,0,0,.25); transition: background .15s;
}
.videoframe:hover .play { background: rgba(0,0,0,.05); }
.videoframe:hover { border-color: var(--cream); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 3px rgba(255,233,168,.35); }
.plate-try {
  /* Высоту клавиш 7, 8, 9 считает скрипт (syncHalves в app.js): она подобрана так, чтобы
     низ правой половины совпал с низом левой, а просветы между окнами в обеих половинах
     были одинаковые. Значение в скобках — пока скрипт не отработал. */
  min-height: var(--trio-h, var(--card-h)); padding: 14px 12px; font: inherit; cursor: pointer;
  font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; color: var(--cream);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.plate-try:hover {
  background: var(--cmd-bg-hover); transform: translateY(-2px);
  border-color: var(--cream);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 3px rgba(255,233,168,.35);
}

/* ---------- Новая зона: три сменяющиеся надписи ---------- */
.ticker-zone {
  margin: clamp(6px, 1.4vh, 20px) 3px 3px; padding: clamp(8px, 1.5vh, 22px) 20px;
  background: #fff; border: 3px solid #000; border-radius: var(--radius); overflow: hidden;
}
/* Шире плашки: на большом мониторе надписи иначе ломались на три строки вместо двух */
.ticker {
  /* Высоту зоны задаёт не подобранное число, а сама длинная надпись: скрипт меряет её
     и кладёт в --ticker-h (см. syncTicker в app.js). Значение в скобках — только на случай,
     если скрипт ещё не отработал. Поэтому текст помещается целиком при любой ширине окна. */
  position: relative; min-height: var(--ticker-h, clamp(96px, 14vh, 126px)); perspective: 900px;
  max-width: 1500px; margin: 0 auto;
  /* Переворот на миг выводил надпись за границы — появлялась полоса прокрутки и всю страницу
     дёргало. Прячем всё, что вылезает за рамку зоны. */
  overflow: hidden;
}
.ticker-item {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  /* Кегль ограничен не только шириной окна, но и его высотой: на невысоком мониторе (768 px)
     надпись в две строки крупным шрифтом просто не оставляла места остальной странице, и
     появлялась общая прокрутка. Теперь буквы сами становятся чуть мельче — страница целая. */
  text-align: center; font-size: clamp(22px, min(2.9vw, 4.4vh), 38px); font-weight: 800; line-height: 1.35;
  color: var(--cream);
  /* Жёлтый с чёрной окантовкой (правка клиента). Раньше окантовка делалась через
     -webkit-text-stroke вместе с paint-order: без paint-order обводка ложится ПОВЕРХ букв,
     съедает их изнутри и на крупном кегле сливается в сплошную тёмную ленту — заказчик
     видел это как полосу через надпись (22.08). Свойство paint-order к тексту HTML умеют не
     все браузеры, а те, что не умеют, всё равно отвечают на проверку «поддерживаю».
     Поэтому окантовку рисуем тенями: тень всегда ложится ПОД букву, и вид одинаков везде. */
  /* Толщина окантовки задана в долях кегля, а не в пикселях: кегль надписи меняется с
     размером окна (от 22 до 38 px), и постоянные 4 px в узком окне выглядели вдвое жирнее,
     чем в широком. Заказчик это и показал: «в одном браузере так, в другом иначе» —
     на деле разными были размеры окон (22.08). */
  /* Толщина 0,05em, а не 0,105em: прежняя окантовка рисовалась через -webkit-text-stroke,
     а он кладёт линию ПО контуру буквы, то есть наружу выходила лишь половина от 4 px.
     Тени же ложатся целиком наружу, поэтому и вышло вдвое жирнее — заказчик заметил
     («шире, чем была, смотрится грязновато», 22.08). Половина возвращает прежний вид:
     расхождение со старым снимком 1,7 % против 6,8 %. */
  text-shadow:
    0.05em 0em 0 #000,
    0.0462em 0.0191em 0 #000,
    0.0354em 0.0354em 0 #000,
    0.0191em 0.0462em 0 #000,
    0em 0.05em 0 #000,
    -0.0191em 0.0462em 0 #000,
    -0.0354em 0.0354em 0 #000,
    -0.0462em 0.0191em 0 #000,
    -0.05em 0em 0 #000,
    -0.0462em -0.0191em 0 #000,
    -0.0354em -0.0354em 0 #000,
    -0.0191em -0.0462em 0 #000,
    -0em -0.05em 0 #000,
    0.0191em -0.0462em 0 #000,
    0.0354em -0.0354em 0 #000,
    0.0462em -0.0191em 0 #000;
  opacity: 0; transform: rotateX(-90deg); transform-origin: top center;
  backface-visibility: hidden;
  /* Правка 22.08 (заказчик: «полоса через надпись, только в этом браузере»). Две скрытые
     надписи лежали повёрнутыми на 90 градусов и оставались в отрисовке: с ребра это полоска
     в шесть пикселей ровно там, где он её видел. Прозрачности хватало не всем браузерам,
     поэтому скрытые надписи теперь выключаем из отрисовки целиком (visibility), а включаем
     мгновенно в начале перелистывания — анимация не страдает. */
  visibility: hidden;
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.3,1), visibility 0s linear .6s;
}
.ticker-item.is-on,
.ticker-item.is-out {
  visibility: visible;
  /* will-change держим только на тех, что сейчас движутся: постоянный слой у скрытых надписей
     и был поводом для артефакта. */
  will-change: transform, opacity;
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.3,1), visibility 0s;
}
.ticker-item.is-on { opacity: 1; transform: rotateX(0deg); }
.ticker-item.is-out { opacity: 0; transform: rotateX(90deg); transform-origin: bottom center; }

/* ---------- Всплывающие окна ---------- */
/* Правка 24.08, вторая волна (заказчик: «верхняя точка страниц разная, заголовки где-то
   выделенные, где-то нет, фон тоже двух видов, сделай одинаково везде, как на левых образцах»).
   Эталон теперь не окно, а страница из подвала. Поэтому окно собрано из тех же трёх частей,
   что и страница: полоса с плашкой заголовка (.topband), обёртка с полотном (.sheet-wrap)
   и подвал (.foot). Отступы считаются по тем же правилам, а не подгоняются числами. */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; padding: 0;
  background: var(--em-deep);          /* как фон страницы: узор живёт только в верхней полосе */
}
/* Обёртка полотна — копия .doc-wrap со страницы */
.sheet-wrap {
  max-width: 1140px; width: 100%; margin: 0 auto;
  padding: clamp(10px, 2vh, 26px) 20px;
  flex: 1 1 auto; min-height: 0; display: flex;
}
/* Окно ролика: само окно не трогаем (правка заказчика от 20.08 — ролик целиком в экран,
   без рамки и панели), но подложку равняем с остальными. Верхняя полоса рисуется отдельно:
   заголовка здесь нет, а полоса должна быть той же высоты, что у прочих окон. */
/* Само окно ролика остаётся в прежних границах (заказчик 24.08: «их не трогаем»):
   под верхней полосой, шириной 1140, как было до перестройки остальных окон. */
#sheet-video { align-items: center; padding: 0 20px 20px; }
#sheet-video .sheet-box {
  width: 1140px; max-width: 100%; flex: 0 0 auto;
  margin-top: calc(80px + 2 * clamp(10px, 1.6vh, 20px));
  height: calc(100vh - 80px - 2 * clamp(10px, 1.6vh, 20px) - 24px);
}
#sheet-video::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: calc(80px + 2 * clamp(10px, 1.6vh, 20px));   /* плашка + поля .topband: та же полоса, что у прочих окон */
  pointer-events: none;
  background-color: var(--em-mid);
  background-image:
    linear-gradient(135deg, rgba(var(--pattern-bright-rgb),.55) 0 25%, transparent 25% 50%, rgba(var(--pattern-deep-rgb),.55) 50% 75%, transparent 75%),
    linear-gradient(45deg,  rgba(var(--pattern-bright-rgb),.35) 0 25%, transparent 25% 50%, rgba(var(--pattern-deep-rgb),.45) 50% 75%, transparent 75%),
    linear-gradient(180deg, rgba(var(--pattern-bright-rgb),.25), rgba(var(--pattern-deep-rgb),.6));
  background-size: 120px 120px, 80px 80px, 100% 100%;
}
.sheet[hidden] { display: none; }
/* П.9: ВСЕ всплывающие окна выровнены одинаково — верх по нижней границе верхней зоны,
   ширина = ширина плашки в шапке. Обе величины меряет скрипт (см. syncSheets в app.js). */
/* Полотно — копия .doc со страницы: ширину и высоту держит обёртка, а не расчёт в пикселях. */
.sheet-box {
  background: var(--sheet-bg); color: #111;
  border: 3px solid var(--line); border-radius: var(--radius);
  --sheet-pad: clamp(26px, 5vw, 70px);   /* поля текста как в .doc-scroll на странице */
  width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}

/* Заголовок окна — та же плашка, что на странице: класс .plate .plate-title даёт фон, рамку,
   радиус и ширину 1100, здесь остаются только размеры полосы и вид надписи.
   Кегль длинных заголовков ужимает скрипт (подогнатьЗаголовки в app.js), чтобы надпись
   помещалась в полосу и высота у всех окон совпадала. */
.sheet-head {
  position: relative; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  min-height: 80px; padding: 14px 62px; text-align: center;   /* поля с запасом от креста: он занимает 14+36 */
  color: var(--cream);
  font-weight: 800; font-size: var(--head-fs, clamp(19px, 2.6vw, 34px)); letter-spacing: .3px;
  line-height: 1.15;   /* у заголовка свой интервал: с общим 1.6 надпись не влезает в полосу */
}
.sheet-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);   /* как .doc-close */
  border: 2px solid var(--line); background: transparent; color: #fff;
  border-radius: 8px; width: 36px; height: 36px; flex: 0 0 auto; cursor: pointer;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sheet-close:hover { background: #fff; color: #000; }
.sheet-body {
  /* Колонкой — чтобы «Вернуться на сайт» уходила к низу полотна, как на странице из подвала
     (правка заказчика 24.08: «команду на сайт сориентируй на место, как на других страницах
     в нижнем положении»). На странице текст длинный и клавиша внизу сама, в окне с коротким
     текстом она висела посередине. */
  display: flex; flex-direction: column;
  flex: 1 1 auto; overflow-y: auto; padding: 22px var(--sheet-pad);
  text-align: justify; text-justify: inter-word; text-wrap: pretty;
  font-size: 17px; line-height: 1.6; color: #111;
}
.sheet-body.roomy { padding: 30px var(--sheet-pad); }     /* большие отступы для текста */

/* Правка 23.08 равняла под страницу из подвала одно окно «Преимущества»; правка 24.08
   («добейся единообразия на всех окнах») распространила её на все окна сразу, поэтому
   отдельных правил для #sheet-adv больше нет: фон, ширина, поля, высота и вид заголовка
   заданы выше в .sheet, .sheet-box и .sheet-head. */
.sheet-body.no-scroll { overflow-y: visible; }
.sheet-body p { margin: 0 0 12px; }
.sheet-body h3 { margin: 22px 0 10px; font-size: 20px; color: #0a4d44; }
.sheet-body h4 { margin: 16px 0 8px; font-size: 18px; color: #0a4d44; }
.sheet-body ul { margin: 0 0 14px; padding-left: 22px; }
.sheet-body li { margin-bottom: 6px; }
.sheet-body .note { color: #555; }                 /* серым, но без курсива (правка клиента) */
.sheet-body .note-black { color: #111; }           /* P.S. — обычным чёрным, не серым */
.sheet-body .accent-dark { color: #0a4d44; font-weight: 700; font-size: 18px; }
/* Строка, которая раньше была шапкой окна: в тексте она должна читаться как заголовок,
   а не теряться в общем наборе (заказчик 24.08: «шрифт не мельче?»). */
.sheet-body .lead-line {
  /* Цвет и кегль как у заголовков разделов на странице «Сопутствующие предложения»
     (образец заказчика 24.08): тёмно-зелёный, 20 px, жирный. */
  font-size: 20px; font-weight: 700; color: #0a4d44;
  margin: 0 0 14px; text-align: left;
}
.center-text { text-align: center; }
.center-text .big { font-size: 19px; font-weight: 700; line-height: 1.5; }

.chain { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chain span { background: #0a4d44; color: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 600; }
.chain span + span::before { content: "→ "; opacity: .7; }

.sheet-nav { flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-end; padding: 8px 14px; background: #e2e2e2; }
.navbtn { border: 2px solid #0a4d44; background: #fff; color: #0a4d44; border-radius: 8px; width: 40px; height: 32px; cursor: pointer; font-size: 13px; }
.navbtn:hover { background: #0a4d44; color: #fff; }

.card-name { font-size: 19px; margin-bottom: 18px; }
.card-rows { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 10px 18px; margin: 0; }
.card-rows dt { font-weight: 700; color: #0a4d44; }
.card-rows dd { margin: 0; }
.copyable { border-bottom: 1px dashed #0a4d44; cursor: pointer; }
.copyable:hover { background: #dff0ec; }

/* Окно ролика (правка клиента от 20.08): ролик должен помещаться в экран целиком, без бегунка.
   Для этого у этого окна нет ни фона, ни рамки, ни надписи в панели — только крест,
   а сам ролик вписывается по меньшей стороне: не хватает высоты, значит уже по ширине. */
.sheet-box.sheet-video {
  background: transparent; border: 0; box-shadow: none;   /* ни рамки, ни панели — только ролик */
}
.sheet-body-video {
  padding: 0; overflow: hidden;                /* бегунка здесь быть не должно */
  display: flex; align-items: center; justify-content: center;
  container-type: size;                        /* чтобы считать ролик от размера окна, см. ниже */
}
/* Ролик вписывается в окно целиком: упирается в ту сторону, которой меньше.
   Одной жёсткой стороной обойтись нельзя: с height:100% ломался телефон (ролик тянулся
   во всю высоту), с width:100% ломался ноутбук (ролик тянулся во всю ширину).
   Считаем ширину от высоты окна и берём меньшее из двух. */
.video-holder {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%; max-height: 100%;
  width: 100%;                                 /* запасной вариант, если единиц контейнера нет */
}
@media (orientation: landscape) {
  .video-holder { width: auto; height: 100%; } /* там ограничивает высота */
}
@supports (width: 1cqh) {
  .sheet-body-video .video-holder { width: min(100%, calc(100cqh * 16 / 9)); height: auto; }
}
.video-close {
  position: absolute; top: 8px; right: 8px; transform: none;   /* сбрасываем центровку .sheet-close */
  z-index: 2; background: rgba(0, 0, 0, .55);
}
.video-close:hover { background: #fff; color: #000; }
.video-wrap { position: relative; padding-top: 56.25%; background: #000; border-radius: 10px; overflow: hidden; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sheet-body-video .video-wrap {
  padding-top: 0;                              /* вместо старой распорки 56.25% */
  width: 100%; height: 100%;                   /* размер задаёт .video-holder */
}

/* Форма */
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fld { display: block; margin-bottom: 12px; font-weight: 600; color: #222; }
.fld input, .fld textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 2px solid #b9c6c3; border-radius: 10px; font: inherit; font-weight: 400; background: #fff;
}
.fld input:focus, .fld textarea:focus { outline: none; border-color: #0a4d44; }
.fld input.bad, .fld textarea.bad { border-color: #c62828; background: #fff5f5; }
.req { color: #c62828; }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 16px; font-size: 15px; }
.agree input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.btn-send { border: 0; background: #0a6558; color: #fff; border-radius: 10px; padding: 13px 24px; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }
.btn-send:hover { background: #0a4d44; }
.btn-send:disabled { opacity: .6; cursor: default; }
/* Клавиша формы после отправки: показывает ответ вместо надписи, остаётся зелёной (правка 14.09) */
.btn-send.sent:disabled { opacity: 1; background: #0a6558; cursor: default; }
.btn-ghost { border: 2px solid #0a4d44; background: #fff; color: #0a4d44; border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { background: #0a4d44; color: #fff; }
/* Клавиша «Вернуться на сайт»: правило общее для страниц и окон (24.08), раньше жило
   в <style> каждой страницы, и в окне кнопка оказывалась прижата к тексту. */
.back { display: inline-block; margin-top: 22px; }
/* В окне клавиша уходит к низу полотна и держится левого края текста. */
.sheet-body .back { margin-top: auto; align-self: flex-start; }
/* С 18.09 «Вернуться на сайт» в окнах — ссылки (заказчик: текстовые ссылки для робота, но без
   выделения). Вид прежний, как у клавиши: без подчёркивания. */
.sheet-body a.back { text-decoration: none; }
/* Ссылки внутри текста статей и окон — единый вид на всех страницах (правка 20.09, вечер:
   «новые ссылки отличаются от ранее сделанных внешне»). Клавиши .back сюда не попадают. */
/* Клавиши (.back, .btn-send, .btn-ghost) под это правило не попадают: они ссылки, но выглядят
   как кнопки — 20.09 вечером их накрыло подчёркиванием и тёмным текстом (правка заказчика). */
.doc-scroll a:not(.back):not(.btn-send):not(.btn-ghost),
.sheet-body a:not(.back):not(.btn-send):not(.btn-ghost) { color: #0a4d44; text-decoration: underline; }
.doc-scroll a:not(.back):not(.btn-send):not(.btn-ghost):hover,
.sheet-body a:not(.back):not(.btn-send):not(.btn-ghost):hover { color: #06403a; }
/* Блок акции на странице «Уведомления» (правка 22.09, по рисунку заказчика) */
.promo {
  background: #ffe600; color: #111; border: 3px solid #7a1420; border-radius: 12px;
  padding: 16px 20px; margin: 18px 0 22px; text-align: left;
}
.promo-top { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin: 0; }
.promo-label { color: #b3261e; font-weight: 800; font-size: 1.15em; }
.promo-title { font-weight: 800; font-size: 1.15em; }
.promo-grid { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.promo-when { font-weight: 700; margin: 0; flex: 0 0 auto; }
.promo-list { list-style: none; margin: 0; padding: 0; }
.promo-list li { margin: 0 0 2px; }
.promo-note { margin: 12px 0 0; font-size: .9em; }
.promo > .promo-when { margin: 12px 0 6px; }
.promo-table { display: grid; grid-template-columns: max-content max-content; gap: 4px 28px; align-items: baseline; margin-bottom: 8px; }
.promo-table strong { font-weight: 800; }
.promo-table .promo-best { color: #b3261e; font-size: 1.1em; }
@media (max-width: 700px) {
  .promo { padding: 14px; } .promo-grid { display: block; } .promo-when { margin-bottom: 6px; }
  .promo-table { grid-template-columns: 1fr auto; gap: 6px 12px; }
}

/* Значок «АКЦИЯ» на клавише 4 главной (правка 22.09) */
.w-4 .akciya {
  flex: 0 0 auto; margin-right: clamp(10px, 1.2vw, 18px);
  background: #ffe600; color: #111; border: 2px solid #111; border-radius: 8px;   /* рамка чёрная: бордовая сливалась с вишнёвой клавишей */
  padding: 5px 10px; font-size: .72em; font-weight: 800; line-height: 1.1; letter-spacing: .02em;
}
/* На большом экране значок крупнее (правка 23.09): на телефоне он и так занимает
   заметную долю клавиши, а на десктопе терялся рядом с надписью. */
@media (min-width: 901px) {
  .w-4 .akciya { padding: 9px 16px; font-size: 1em; border-width: 3px; border-radius: 10px; letter-spacing: .04em; }
}

/* Клавиши демо: белый текст на зелёном, без подчёркивания — как было до правки */
.demo-row .btn-send, .demo-row .btn-send:hover { color: #fff; text-decoration: none; }
.form-note { margin-top: 10px; font-size: 15px; min-height: 20px; }
.form-note.ok  { color: #1b7a34; font-weight: 600; }
.form-note.err { color: #c62828; font-weight: 600; }

.demo-list { margin-bottom: 14px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.foot { padding: clamp(6px, 1vh, 16px) 20px; text-align: center; color: #cfeae5; font-size: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.foot a { color: #fff; }
/* При наведении ссылки подвала желтеют так же, как название организации (правка 26.08). */
.foot a:hover { color: var(--cream); }
/* Название организации в подвале открывает визитку (правка 23.08). Кнопка нужна ради
   обработчика data-open, а выглядеть должна обычной ссылкой подвала. */
.foot-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: #fff; text-decoration: underline; cursor: pointer;
}
.foot-link:hover { color: var(--cream); }
.foot .dot { opacity: .5; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #0a4d44; color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 15px; z-index: 80; box-shadow: 0 8px 26px rgba(0,0,0,.4);
}

/* ---------- ТЗ 10 ---------- */

/* Окно 4: имя и организация — в широкой левой колонке, телефон и почта — в узкой правой.
   Так длинным значениям достаётся больше места (эскиз клиента). */
.fld-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 0 18px; }
/* Окно для сообщения занимает всю оставшуюся высоту: внизу не остаётся пустоты, и при этом
   форма никогда не вылезает за низ окна — сколько места есть, столько поле и берёт. */
/* min-height: 0 — иначе тело окна не ужимается под его высоту и форма упирается в низ */
#sheet-request .sheet-body,
#sheet-owner .sheet-body { min-height: 0; overflow-y: auto; }
/* Правка 24.08 (заказчик: «вариант слева меня пугает»): тело раскладывалось в строку,
   и клавиша «Вернуться на сайт» вставала вертикальной полосой справа от формы.
   Колонка — форма сверху, клавиша под ней, как на эскизе заказчика. */
#sheet-request .sheet-body { flex-direction: column; }
#request-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.fld-msg { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.fld-msg textarea { flex: 1 1 auto; min-height: 90px; resize: vertical; }

/* Окно 9: перечень возможностей — по центру блока, как в остальном тексте окна.
   Интервалы плотнее обычного текста: так весь текст с клавишей помещается без прокрутки. */
#sheet-owner .sheet-body { padding-top: 18px; padding-bottom: 18px; }
/* Обёртка ужимается по самой длинной строке текста, клавиша растягивается ровно по ней
   (заказчик 24.08: «сделать запрос увеличь как ширина текста или почти как»).
   Числом это не задать: в разных окнах текст разной ширины. */
.center-hug { width: fit-content; max-width: 100%; margin: 0 auto; }
.center-hug .btn-send { display: block; width: 100%; }
.center-text p { margin-bottom: 5px; }
.center-text .big { line-height: 1.4; }
.center-text .big + p { margin-top: -3px; }
.owner-list {
  display: inline-block; text-align: left; margin: 0 0 6px; padding-left: 22px;
}
.owner-list li { margin-bottom: 2px; }
.center-text .btn-send { margin-top: 6px; }

/* Клавиша «Прочитано»: включает вход в программу */
.btn-read {
  border: 0; background: #2e9e57; color: #fff; border-radius: 10px; padding: 13px 24px;
  font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
}
.btn-read:hover { background: #26834a; }
.btn-read.is-done { background: #b9b9b9; cursor: default; }
.demo-actions .btn-send:disabled { opacity: 1; background: #cfcfcf; color: #6b6b6b; }

/* Тексты отдельных страниц (преимущества, политика) оформляются так же, как во всплывающих
   окнах — правила общие, чтобы один и тот же текст выглядел одинаково в окне и на странице. */
.doc-scroll p { margin: 0 0 12px; }
/* Разделы статей с 30.09 размечены H2 (аудит stokrat.org, T03: после H1 шёл сразу H3).
   Вид прежний: H2 оформлен ровно как был H3. */
.doc-scroll h2, .doc-scroll h3 { margin: 22px 0 10px; font-size: 20px; font-weight: 700; color: #0a4d44; }
/* Заголовки выключаем влево. Общая выключка по ширине разгоняет слова в строке заголовка
   до огромных пробелов, особенно на телефоне (правки заказчика 2 и 4 от 25.08). */
.doc-scroll h2, .doc-scroll h3, .doc-scroll h4,
.sheet-body h2, .sheet-body h3, .sheet-body h4,
.doc-scroll .accent-dark, .sheet-body .accent-dark,
.doc-scroll .lead-line, .sheet-body .lead-line { text-align: left; text-wrap: balance; }
/* Заголовки разделов с полосой и номером (правки заказчика 7 и 8 от 25.08).
   Цвет полосы взят из его же эскиза. Номер отбит от текста, чтобы строка не слипалась. */
.doc-scroll h2.num-head, .doc-scroll h3.num-head, .sheet-body h3.num-head {
  background: #e3f0d9; border-radius: 8px;
  padding: 11px 18px; margin: 26px 0 14px;
}
.num-head .num { display: inline-block; min-width: 30px; }
.doc-scroll h4 { margin: 16px 0 8px; font-size: 18px; color: #0a4d44; }
.doc-scroll ul { margin: 0 0 14px; padding-left: 22px; }
.doc-scroll li { margin-bottom: 6px; }
.doc-scroll .note { color: #555; }
.doc-scroll .note-black { color: #111; }
.doc-scroll .accent-dark { color: #0a4d44; font-weight: 700; font-size: 18px; }
/* Приглашение в демо в конце «Преимуществ» (правка 12.09): красная строка и две зелёные клавиши
   на всю ширину, как на рисунке заказчика. Работает и на странице, и во всплывающем окне. */
.doc-scroll .accent-red, .sheet-body .accent-red { color: #b3261e; font-weight: 600; text-align: left; margin-top: 18px; }
.doc-scroll .demo-row, .sheet-body .demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.demo-row .btn-send { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; min-height: 52px; }
@media (max-width: 700px) { .doc-scroll .demo-row, .sheet-body .demo-row { grid-template-columns: 1fr; } }
/* Во всплывающем окне «Вернуться на сайт» прижата к низу через margin-top:auto, и когда текст длиннее
   окна, зазор до клавиш демо схлопывается (заказчик 13.09: «из табло зазор минимальный, в притык»).
   Даём клавишам нижний отступ как у страницы из подвала. */
.sheet-body .demo-row { margin-bottom: 22px; }
/* Картинки внутри текста страниц и окон: по центру, не шире колонки, со скруглением.
   Размеры проставлены в разметке, чтобы страница не прыгала при загрузке. */
.doc-scroll .doc-pic, .sheet-body .doc-pic { margin: 16px 0 20px; text-align: center; }
.doc-scroll .doc-pic img, .sheet-body .doc-pic img {
  max-width: 100%; height: auto; border-radius: 12px; vertical-align: middle;
}
/* Абзацы про цену: первая часть с красной строки, вторая — по правому краю.
   Так текст не растягивается редактором в некрасивые разрядки (правка клиента).
   Правила для окна и для отдельной страницы держим рядом — иначе мобильные их не перебьют. */
.sheet-body .split { display: flex; flex-direction: column; text-align: left; }
.sheet-body .split .tail { align-self: flex-end; text-align: right; }
.doc-scroll .split { display: flex; flex-direction: column; text-align: left; }
.doc-scroll .split .tail { align-self: flex-end; text-align: right; }

@media (max-width: 980px) {
  .fld-grid { grid-template-columns: 1fr; }
}

/* Нижний ряд окна (клавиши демо) — отдельной полосой, как ряд со стрелками.
   Клавиши растянуты на всю ширину, крайние («Прочитано» и «Войти в программу») —
   одного размера, средняя по своему тексту (правка клиента). */
.sheet-foot {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
  padding: 14px var(--sheet-pad); background: #e2e2e2;
}
.sheet-foot > button { width: 100%; }
/* Низ окна демо после правки 03.09: клавиш стало две, «Прочитано» убрана.
   Ознакомительная клавиша по своему тексту, вход в программу занимает остаток строки. */
.sheet-foot.sheet-foot-2 { grid-template-columns: auto 1fr; }
.sheet-foot .form-note { grid-column: 1 / -1; margin: 0; }

/* ---------- ТЗ 11 ---------- */

/* Клавиши 2, 3 и 4 выше и одной высоты между собой: скрипт (syncLeft в app.js) считает,
   сколько можно забрать у просветов, и кладёт результат в --cmd-h. Логотип не трогаем.
   Окна 6 это не касается — оно равняется по кадру видео, поэтому правило только для левой половины. */
.half-left .plate-cmd { min-height: var(--cmd-h, clamp(46px, 7.5vh, 86px)); }

/* Надписи клавиш 2, 3 и 4 стоят на одной оси, а не «в разброс»: клавиша 3 короче на ширину
   логотипа, поэтому её центр смещён. Скрипт меряет это смещение и кладёт половину в --cmd-shift:
   у клавиш 2 и 4 надпись уходит влево, у клавиши 3 — вправо, и все три встают в одну линию. */
.half-left .w-2, .half-left .w-4 { padding-right: calc(26px + var(--cmd-shift, 0px)); }
.half-left .w-3 { padding-left: calc(26px + var(--cmd-shift, 0px)); }

/* ---------- Смартфоны и планшеты ---------- */
/* На узком экране «в один экран» уложить нельзя — там нормально листать. Задача другая:
   ничего не должно вылезать за ширину, всё должно нажиматься пальцем и читаться без зума. */

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .half { padding: 14px; align-items: stretch; }
  .plate-text { min-height: 0; }
  .w-5 { text-align: left; }              /* по правому краю на узком экране читается плохо */
  .video-row { flex-direction: column; }
  .videoframe { width: 100%; height: auto; }
  .trio { grid-template-columns: 1fr; }
  .left-stack { gap: var(--gap); }
  .row-card { flex-direction: row; align-items: center; }

  /* Скрипт считает высоты под большой экран — на узком они не нужны */
  .half-left .plate-cmd { min-height: 56px; }
  .plate-try { min-height: 60px; }
  .half-left .w-2, .half-left .w-4, .half-left .w-3 { padding-left: 18px; padding-right: 18px; }
  .logo-btn { width: 72px; height: 72px; }

  /* Всплывающие окна на телефоне ведут себя ровно как страница из подвала: листается вся
     подложка целиком, а не внутренний бегунок (при высоте 100dvh адресная строка Safari
     срезает низ и до конца текста не долистать). Числа — те же, что в мобильном блоке
     страницы: обёртка 10px, поля текста 16px, плашка 10/14 и кегль 17. */
  .sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sheet-wrap { padding: 10px; display: block; flex: 0 0 auto; min-height: auto; }
  .sheet-box { --sheet-pad: 16px; display: block; font-size: 16px; line-height: 1.55; }
  /* Кегль через ту же переменную, иначе подгон длинных заголовков на телефоне не работает. */
  /* Полоса держит высоту 48 (как плашка страницы), а поля по вертикали меньше: у двух окон
     заголовок длинный и встаёт в две строки — с полем 10 они полосу раздвигали. Короткие
     надписи этого не замечают, их центрует min-height. */
  .topband .sheet-head { min-height: 48px; padding: 5px 58px; font-size: var(--head-fs, 17px); line-height: 1.3; }
  .sheet-close { right: 10px; width: 40px; height: 40px; }
  /* Текст выключаем по ширине — так клиент просил. Исключения ниже: окно 9 остаётся
     по центру (так задумано в макете), а три абзаца про цену — влево с отступом. */
  .sheet-body, .sheet-body.roomy { padding: 16px; font-size: 16px; text-align: justify; text-justify: inter-word; overflow: visible; }
  #sheet-owner .sheet-body { text-align: center; }
  .sheet-body.no-scroll { overflow-y: visible; }
  .sheet-nav { display: none; }        /* как .doc-nav на странице: пальцем листать удобнее */
  /* На телефоне окно листается целиком, свободного места под текстом нет, и прижатие
     к низу (margin-top: auto) схлопывается в ноль: клавиша «Вернуться на сайт» вставала
     вплотную к «Сделать запрос на ПО» и сливалась с ней (правка заказчика 1 от 25.08).
     Здесь отступ задаём явно. */
  .back, .sheet-body .back { margin-top: 22px; }
  /* Окно ролика на телефоне остаётся прежним: во весь экран, ролик по центру.
     Блочная раскладка соседних правил его схлопывает, поэтому возвращаем flex. */
  #sheet-video { padding: 0; overflow: hidden; }
  #sheet-video::before { height: 68px; }        /* плашка 48 + поля .topband 10/10 */
  #sheet-video .sheet-box {
    display: flex; width: 100%; max-width: 100%; margin-top: 0;
    height: 100vh; height: 100dvh;
  }
  #sheet-video .sheet-body-video { padding: 0; overflow: hidden; display: flex; }

  /* Нижний ряд клавиш — в столбик, каждая на всю ширину */
  .sheet-foot { grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; }

  .fld-grid, .fld-row { grid-template-columns: 1fr; }
  .card-rows { grid-template-columns: 1fr; gap: 4px 0; }
  .card-rows dd { margin-bottom: 10px; }
  .chain { flex-direction: column; align-items: stretch; }
  /* Абзацы про цену. На большом экране вторая половина фразы стоит по правому краю — там она
     помещается в одну строку и смотрится как в ТЗ. На телефоне же она переносится на 2-3 строки,
     и выравнивание вправо превращает её в лесенку. Поэтому здесь просто вторая строка с отступом:
     разрыв фразы виден, а рваного края нет. */
  .sheet-body .split, .doc-scroll .split { display: block; }
  .sheet-body .split .tail, .doc-scroll .split .tail {
    display: block; text-align: left; padding-left: 18px; margin-top: 2px;
  }

  .ticker-zone { margin: 12px 3px 3px; padding: 14px 12px; }
  .ticker { min-height: var(--ticker-h, 110px); }
}

@media (max-width: 600px) {
  .topband { padding: 10px 12px; }
  .plate-title { padding: 10px 14px; }
  .plate-title.with-close {
    min-height: 48px; padding: 5px 58px;   /* крест на телефоне шире */
  }
  .plate-title.with-close h1 { font-size: var(--head-fs, 17px); line-height: 1.3; }
  .plate-title h1 { font-size: 17px; line-height: 1.3; }
  .half { padding: 12px; }
  .plate-text { padding: 14px 16px; }
  .plate-text p { font-size: 15px; }
  .plate-text .accent { font-size: 16px; }
  .plate-cmd, .half-left .plate-cmd { font-size: 16px; min-height: 54px; padding: 12px 14px; }
  .plate-try { font-size: 15px; min-height: 56px; padding: 12px; }
  .logo-btn { width: 64px; height: 64px; }

  /* Обводка в 4 px на мелком кегле забивает буквы — на телефоне тоньше */
  .ticker-item { font-size: clamp(17px, 5.2vw, 24px); }
  .ticker-zone { padding: 12px 10px; }

  .foot { font-size: 12px; gap: 2px 6px; padding: 6px 12px; }
  /* Ссылки в подвале — с запасом по высоте, чтобы попадать пальцем, а не ногтем */
  .foot a { display: inline-block; padding: 14px 6px; }   /* 44 px под палец */
  .foot .dot { display: none; }

  /* Ниже 16 px iOS сам увеличивает страницу при входе в поле — этого не надо */
  .fld input, .fld textarea { font-size: 16px; padding: 12px; }
  .fld { font-size: 15px; }
  .agree { font-size: 14px; }
  .agree input { width: 22px; height: 22px; }         /* палец должен попадать */
  .btn-send, .btn-ghost, .btn-read { width: 100%; padding: 14px 16px; font-size: 16px; }
  .center-text .big { font-size: 17px; }
  .sheet-body h3 { font-size: 18px; }
  .sheet-body h4 { font-size: 17px; }
}

/* Наведения на сенсорном экране не бывает: без этого блок остаётся «подсвеченным»
   после нажатия и выглядит нажатым, хотя он не нажат. */
@media (hover: none) {
  .plate-cmd:hover, .plate-try:hover { background: var(--cmd-bg); transform: none; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
  .logo-btn:hover { transform: none; }
  .btn-ghost:hover { background: #fff; color: #0a4d44; }
  .btn-send:hover { background: #0a6558; }
  .sheet-close:hover { background: transparent; color: #fff; }
}


/* --- Косячки из ТЗ 12 --- */
@media (max-width: 900px) {
  /* Подвал: у ссылок был запас под палец, а у строки с названием — нет, из-за этого
     расстояния между строками получались разными. Даём всем трём одинаковый. */
  .foot { flex-direction: column; align-items: center; gap: 0; }
  .foot > span, .foot > a, .foot > button { display: block; padding: 13px 6px; }

  /* Форма: поле сообщения больше не растягивается на остаток высоты. На телефоне высота
     окна маленькая, поле сжималось меньше собственного содержимого — и галочка с клавишей
     наезжали на него сверху. Теперь форма обычным потоком, а окно листается. */
  #sheet-request .sheet-body { display: block; }
  #request-form { display: block; }
  .fld-msg { display: block; }
  .fld-msg textarea { min-height: 110px; }

  /* Стрелки прокрутки — под палец */
  .navbtn { width: 52px; height: 44px; font-size: 15px; }
  .sheet-nav { padding: 10px 14px; gap: 10px; }

  /* Клавиша окна 6 на телефоне: пока она звала смотреть видео, её прятали (кадр рядом и так
     кнопка). С 12.09 на ней форма связи — на телефоне нужна (правка заказчика). */
  .video-row .w-6 { display: flex; }
}

/* Абзац «Внимание…» в окне доступа к демо — слабым фоном (ТЗ 21, образец из документа) */
.sheet-body .demo-warn {
  /* ТЗ30 п.1: «фон этого абзаца сделай ещё чуть более видимым» — было .16 и .55. */
  background: rgba(255, 241, 204, .26);
  border-left: 3px solid rgba(255, 241, 204, .8);
  padding: 10px 14px;
  border-radius: 6px;
}

/* Подсказка в табличке «только с компьютера»: видна лишь на настольном экране с узким окном.
   Заказчик получил эту табличку на ПК со свёрнутым окном и не понял, в чём дело (21.08). */
.nodemo-hint {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(255, 241, 204, .26);
  border-left: 3px solid rgba(255, 241, 204, .8);
  text-align: left;
}

/* Клавиша формы связи заметнее (правка 30.09, по рисунку заказчика: «не видно клавишу формы»):
   золотая рамка, строка «Форма для связи здесь» на жёлтой подложке, крупная контурная стрелка. */
.w-6 { border-color: var(--cream); }
.w-6 .cmd-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.w-6 .cmd-cta { background: #ffe600; color: #111; border-radius: 6px; padding: 2px 10px; line-height: 1.3; }
.w-6 .cmd-arrow { width: 2.4em; height: 3.2em; color: #ffe600; }
@media (max-width: 600px) { .w-6 .cmd-arrow { width: 2em; height: 2.7em; } }

/* Полный знак с надписью вписан в круг, без обрезки исходного файла. */
.logo-full { background: #fff; }
.logo-full img { padding: 15%; }