/* =========================================================================
   ZooDom · final-alt — альтернативная тема по макету Claude Design
   (артборд «Система», сентябрь 2026).

   Подключается последней строкой <head> и перекрывает собранный CSS
   final/ без его правки. Почти вся работа — переопределение слоя
   переменных (@theme + :root исходника); точечные правила ниже написаны
   только там, где значение зашито мимо токена или где меняется сам
   материал (кнопка, карточка, плоскость трансфера, декор).

   Специфичность: правила Astro имеют вид `.x[data-astro-cid-…]`
   (0,2,0). Здесь тот же вес набирается удвоением класса `.x.x`,
   а побеждает порядок — тема стоит в каскаде последней.
   ========================================================================= */

/* --- Nunito: только заголовки. Локально, кириллица + латиница ---------- */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/nunito-cyrillic-ext-700-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/nunito-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/nunito-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/nunito-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/nunito-cyrillic-ext-800-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/nunito-cyrillic-800-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Onest Variable (100–900), Caveat Variable и IBM Plex Mono 400/500/600
   уже объявлены в собранном CSS локальными файлами из _astro/. Веса
   Onest 500 и 800 — настоящие оси вариативного шрифта, синтетического
   утолщения нет (font-synthesis-weight: none стоит на body). */

/* =========================================================================
   Токены
   ========================================================================= */
:root {
  --font-head: 'Nunito', 'Onest Variable', 'Onest', system-ui, sans-serif;

  /* чернила */
  --color-ink: #2B1408;
  --color-ink-soft: #5A3A28;

  /* светлые плоскости */
  --color-light: #E8CDA6;     /* первый экран, «кто рядом», тело страницы */
  --color-honey: #5A3A28;     /* трансфер — теперь тёмная плоскость мягких чернил */
  --color-terms: #E4C497;     /* условия и вопросы */
  --color-request: #F3DCC2;   /* заявка */

  /* бумага */
  --color-paper: #FFFBF3;     /* поля отпечатков, текст на красном, поля формы */
  --color-card: #FFF7EA;      /* лист карточки днём */
  --color-wall-cream: #F3D9B4;

  /* заметка */
  --color-note-day: #FFF7EA;
  --color-note-green: #2C452C;  /* тинт заметки на мшистых плоскостях: 1.25 к плоскости — заметка тише её, а не отдельная карточка */
  --color-note-night: #5C2B18;

  /* лист карточки акта II: день → сумерки → ночь («тёплое окно на тёмном») */
  --color-sheet-day: #FFF7EA;
  --color-sheet-dusk: #FFF0DA;
  --color-sheet-night: #FFE9C9;

  /* небо дня: #F7E0B4 → #F5CE92 → #EA9C4C → #DD7838 */
  --color-day-morning: #F5CE92;
  --color-day-noon: #F7E0B4;
  --color-day-afternoon: #EA9C4C;
  --color-day-sunset: #DD7838;
  /* вечер и ночь: жжёный коричневый, не фиолетовый */
  --color-day-dusk: #7A2C18;
  --color-day-dusk-deep: #4A2015;
  --color-day-edge: #2E150A;
  --color-day-night: #231007;

  /* плоскости акта III: тёплый мох вместо холодного изумруда
     (правка 05, 11 сентября 2026) — так они садятся рядом с кремом,
     терракотой и чернилами */
  --color-green: #375436;
  --color-green-deep: #2E4A36;

  /* полоса срочности: жёлто-оранжевая плоскость с текстом чернилами */
  --color-urgent: #F5A623;

  /* акцент */
  --color-accent: #CF2A1E;
  --color-accent-hover: #B5231A;
  --color-accent-active: #9A1D16;
  --color-accent-night: #FFB59A;
  --color-accent-text: #9A1D16;      /* красный текстом на светлой плоскости */
  --color-accent-text-hover: #7E1710;
  --color-accent-sky: #8E1913;       /* красный текстом на небе полудня */

  /* текст на тёмном */
  --color-on-dark: #FFF1DC;
  --color-on-dark-soft: #F3DCC2;
  --color-on-dark-mute: #D8BEA3;

  /* типографическая шкала (значения для 1440, адаптивная механика прежняя) */
  --text-h1: clamp(42px, 3.5vw + 21.6px, 72px);
  --text-h1--line-height: 1.02;
  --text-h2: clamp(33px, 2.4vw + 19.4px, 54px);
  --text-h2--line-height: 1.06;
  --text-h3: clamp(24px, 1vw + 21.6px, 36px);
  --text-h3--line-height: 1.12;
  --text-h4: 21px;
  --text-h4--line-height: 1.22;
  --text-lead: clamp(17px, 0.35vw + 15px, 20px);
  --text-lead--line-height: 1.5;
  --text-hand: 20px;

  /* раскладка и материалы */
  --header-h: 64px;
  --r-note: 20px;
  --r-btn: 14px;
  --r-btn-sm: 12px;

  --edge: rgb(43 20 8 / 0.16);
  --edge-soft: rgb(43 20 8 / 0.09);
  --edge-strong: rgb(43 20 8 / 0.30);
  --edge-card: rgb(43 20 8 / 0.12);
  --edge-card-strong: rgb(43 20 8 / 0.18);
  --bevel: #FFFDF7;
  --edge-night: rgb(255 241 220 / 0.20);
  --edge-night-soft: rgb(255 241 220 / 0.12);

  /* Зерна в копии нет: точечная сетка на плоскостях читалась как
     разметка, заказчик снял её 8 сентября 2026. Переменные оставлены,
     чтобы правила собранного CSS (background-image: var(--grain))
     оставались валидными и просто ничего не рисовали. */
  --grain: none;
  --grain-dark: none;
  --grain-size: 20px 20px;
  --slot-hatch: repeating-linear-gradient(45deg, rgb(43 20 8 / 0.05) 0 2px, transparent 2px 12px);

  /* надзаголовок по умолчанию — красный текстом на светлой плоскости */
  --eyebrow: var(--color-accent-text);
  --note-head: var(--color-ink);
}

/* =========================================================================
   Типографика
   ========================================================================= */
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-head);
  font-weight: 800;
}

.t-h1 { letter-spacing: -0.02em; }
.t-h2 { letter-spacing: -0.018em; }
.t-h3 { letter-spacing: -0.012em; }

.t-h4 {
  font-weight: 800;
  letter-spacing: 0;
}

/* Надзаголовок: Onest 600 · 15, без капса и разрядки; время — Plex Mono 600 · 15 */
.t-eyebrow {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.t-eyebrow__time {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Цитата в блоке «кто рядом» — Nunito 700 */
.pr__quote-t.pr__quote-t {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.4;
}

.form__ok-h.form__ok-h {
  font-family: var(--font-head);
  font-weight: 800;
}

/* Ссылки: красный текстом на светлых плоскостях, волосяное подчёркивание */
.link {
  color: var(--color-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.link:hover { color: var(--color-accent-text-hover); }
.link:active { color: var(--color-accent-text-hover); }
.on-honey .link { color: var(--color-accent-text); }
.on-honey .link:hover { color: var(--color-accent-text-hover); }
.on-night .link { color: var(--color-accent-night); }
.on-night .link:hover { color: var(--color-on-dark); }

/* На бумаге карточки хватает контраста и чистому красному */
.note .link { color: var(--color-accent); }
.note .link:hover { color: var(--color-accent-hover); }
.form__again.form__again { color: var(--color-accent); }

/* =========================================================================
   Кнопки: лист со скруглением 14, высота 50–52, Onest 600 · 17
   ========================================================================= */
.btn.btn {
  min-height: 50px;
  padding-inline: 26px;
  border-radius: var(--r-btn);
  font-size: 17px;
  font-weight: 600;
}

.btn.btn--md {
  min-height: 52px;
  padding-inline: 28px;
}

.btn.btn--sm {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: var(--r-btn-sm);
  font-size: 15px;
  font-weight: 700;
}

/* Роли (prod-fix-04): primary — красная заливка, главное действие экрана;
   secondary — сплошная заливка тоном, противоположным плоскости;
   ghost — обводка 2 px, только у равноправных кнопок в ряд. Контраст
   текста: primary 5.08 (hover 6.32), secondary на светлой 15.64 (hover
   на красном 4.71), на тёмной 15.64 (hover 13.87); кнопка к плоскости —
   от 3.16 (красная на условиях) и от 7.60 (светлая на мху) */
.btn.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

.btn.btn--primary:hover { background-color: var(--color-accent-hover); }
.btn.btn--primary:active { background-color: var(--color-accent-active); }

.btn.btn--secondary {
  background-color: var(--color-ink);
  color: var(--color-on-dark);
}

.btn.btn--secondary:hover { background-color: var(--color-accent); }
.btn.btn--secondary:active { background-color: var(--color-accent-hover); }

/* Полоса срочности: базовый красный к жёлто-оранжевой плоскости — 2.59,
   поэтому наведение там тёмно-красное: 4.05 к плоскости, текст 7.37 */
.urgent .btn.btn--secondary:hover { background-color: var(--color-accent-active); }
.urgent .btn.btn--secondary:active { background-color: #7A1712; }

.btn.btn--ghost {
  border: 2px solid var(--color-ink-soft);
  color: var(--color-ink);
}

.btn.btn--ghost:hover {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-on-dark);
}

.btn.btn--link { color: var(--color-accent-text); }
.btn.btn--link:hover { color: var(--color-accent-text-hover); }
.on-honey .btn.btn--link { color: var(--color-accent-text); }

/* На тёмных плоскостях вторая роль — светлая заливка с текстом чернилами */
.on-night .btn.btn--secondary {
  background-color: var(--color-on-dark);
  color: var(--color-ink);
}

.on-night .btn.btn--secondary:hover { background-color: #F7E3C3; }
.on-night .btn.btn--secondary:active { background-color: #EBD3AE; }

.on-night .btn.btn--ghost {
  border-color: var(--color-on-dark-soft);
  color: var(--color-on-dark);
}

.on-night .btn.btn--ghost:hover {
  background-color: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-ink);
}

.on-night .btn.btn--link { color: var(--color-accent-night); }

/* Обратный звонок (виджет ВАТС МегаФона): своя круглая зелёная кнопка
   виджета в правом нижнем углу не показывается — на телефоне там липкая
   полоса, а цвет не наш. Окно открывает «Перезвоните мне» рядом с
   номером (ui/Callback.astro, scripts/callback.ts). display, а не
   visibility: видимостью виджет управляет сам, инлайном */
#itlcb-call-btn { display: none !important; }

/* =========================================================================
   Шапка: плоскость чернил, кромка, навигация 15 / 500, телефон 600
   ========================================================================= */
.hd.hd {
  background-color: var(--color-ink);
  background-image: var(--grain-dark);
  border-bottom: 1px solid var(--edge-night-soft);
}

.hd__link.hd__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-on-dark-soft);
}

.hd__link.hd__link:hover { color: var(--color-on-dark); }

.hd__phone.hd__phone {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-dark);
}

.hd__phone .link { color: inherit; text-decoration: none; }
.hd__phone .link:hover { text-decoration: underline; }
.hd__toggle.hd__toggle { font-size: 15px; }
.hd__panel.hd__panel { background-image: var(--grain-dark); }

/* =========================================================================
   Карточка: лист #FFF7EA, скругление 20, волосяная кромка, поля 24
   ========================================================================= */
.note {
  border: 1px solid var(--edge-card);
  border-radius: var(--r-note);
}

/* Цветной кант слева — деталь прежнего материала; в этой теме карточка
   держится кромкой, а не кантом */
.note--edge { border-inline-start: 1px solid var(--edge-card); }

.note__h {
  font-weight: 800;
  letter-spacing: 0;
  color: var(--note-ink, var(--color-ink));
}

.note--lg .note__h { font-family: var(--font-head); }

/* Заметки на тёмных плоскостях цен и отзывов — тинт плоскости, светлая кромка */
.on-night .note { border-color: var(--edge-night-soft); }

/* Карточка акта II: тот же лист, только освещённость другая */
.scene .note { border-color: var(--edge-card); }

/* Блок проживания: кромка сильнее — на тёплом креме волосяная почти не
   видна, и карточка расплывается в фон (правка 05) */
.lv .note { border-color: var(--edge-card-strong); }
.list-bring li::before { color: var(--note-ink, var(--color-ink)); }

/* =========================================================================
   Плоскости
   ========================================================================= */
.on-night,
.urgent {
  --grain: var(--grain-dark);
}

/* Трансфер — тёмная плоскость мягких чернил со светлым текстом */
.tr.tr {
  --grain: var(--grain-dark);
  --eyebrow: var(--color-accent-night);
  --note-bg: var(--color-card);
  --note-ink: var(--color-ink);
  --note-ink-soft: var(--color-ink-soft);
  background-color: var(--color-honey);
  border-top: 1px solid var(--edge-night-soft);
  color: var(--color-on-dark);
}

.tr .tr__copy .t-body { color: var(--color-on-dark); }
.tr .link { color: var(--color-accent-night); }
.tr .link:hover { color: var(--color-on-dark); }
.tr .note { border-color: var(--edge-card); }

/* Ссылка в заметке со станцией («Как добраться →», правка seo-02) стоит
   на бумаге, а не на коричневом: красный текстом, 4.93:1 */
.tr .note .link { color: var(--color-accent); }
.tr .note .link:hover { color: var(--color-accent-hover); }

/* Условия: медовая плоскость чуть глубже крема, тексты красным — только #9A1D16 */
.on-honey {
  --eyebrow: var(--color-accent-text);
  --note-head: var(--color-ink);
}

/* Акт II: красный текстом на небе полудня */
.act2 .act2__day { --eyebrow: var(--color-accent-sky); }

/* Сцена уборки (правка 07) без движения стоит на своём неподвижном тоне —
   послеполуденном #EA9C4C, и самый тёмный красный даёт на нём 4.07:1.
   Там, где небо выключено (reduced-motion и без JS), её айбрау берёт
   чернила, как у прогулки на закате. С едущим небом худший фактический
   тон под айбрау — #F0BD7E, красный держит 5.34:1 и остаётся. */
@media (prefers-reduced-motion: reduce) {
  .act2 .act2__day .s-clean { --eyebrow: var(--color-ink); }
}

html:not(.js) .act2 .act2__day .s-clean { --eyebrow: var(--color-ink); }

/* Небо: четыре слоя той же механики, новые опорные точки шкалы */
.sky__l--noon.sky__l--noon {
  background-image: linear-gradient(180deg, #FBEBC8 0%, var(--color-day-noon) 100%);
}

.sky__l--afternoon.sky__l--afternoon {
  background-image: linear-gradient(180deg, var(--color-day-noon) 0%, #F0B871 55%, var(--color-day-afternoon) 100%);
}

.sky__l--sunset.sky__l--sunset {
  background-image: linear-gradient(180deg, #F0B871 0%, var(--color-day-sunset) 72%, #D06A30 100%);
}

/* Точечная сетка неба тоже снята вместе с зерном плоскостей */
.sky__grain.sky__grain {
  background-image: none;
}

/* Вечер и ночь: закат → жжёный коричневый → ночь */
.nightfall.nightfall {
  background-image: linear-gradient(
    180deg,
    var(--color-day-sunset) 0,
    #B4522A 26px,
    var(--color-day-dusk) 78px,
    var(--color-day-dusk-deep) 260px,
    var(--color-day-edge) 58%,
    var(--color-day-night) 100%
  );
}

/* Ось времени: штрих 4 px со скруглением 2, подпись 13 / 500 без капса */
.rail__line.rail__line {
  border-radius: 2px;
  overflow: hidden;
}

.rail__part.rail__part {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Один блок — один экран (§2 правки 06). Отзывы и условия перебирали
   1440 × 900 на 12–15 px, и лишнее было в перегонах между подблоками, а
   не в текстах: отзывы отдают по 8 px на двух перегонах, условия — на
   двух своих. Правила живут в теме: сами компоненты общие с final/. */
.rev .rev__themes-h.rev__themes-h { margin-top: var(--s-32); }
.rev .rev__row.rev__row { margin-top: var(--s-32); }
.terms .terms__grid.terms__grid { margin-top: var(--s-24); }
.terms .faq.faq { margin-top: var(--s-24); }

/* Правка 08 удлинила пару «Дополнительный уход» до четырёх строк, и
   условия снова перебрали экран на 24 px. Возвращает их нижнее поле
   карточек (20 → 12; верхнее не трогается — над ним скрепка) и поле
   строк вопросов (16 → 14): текст тот же */
.terms .terms__note.terms__note { padding-bottom: var(--s-12); }
/* Скрепка (метка clip, якорь corner) заходит на первую заметку на 50 px
   от правой кромки и лежит на высоте строки её заголовка. «Как считаем
   дни» (prod-fix-03a) короче прежнего заголовка и встаёт в одну строку:
   на 1024 в ряду из четырёх заметок он дотягивался до скрепки. Заголовок
   первой заметки держит под неё правое поле */
.terms .terms__note:first-child > dt { padding-right: 28px; }
.terms .acc__q.acc__q { padding-block: 14px; }

/* Заявка: кадр карты больше не растягивается на всю высоту колонки —
   667 px карты рядом с формой не нужны, хватает кадра 3:2 (§5 правки
   06). Высоту блока это не меняет: её задаёт форма. */
.req__side.req__side { gap: var(--s-20); }
.req__side .req__map.req__map { flex: 0 0 auto; }

.req__side .req__map .map__box {
  aspect-ratio: 3 / 2;
  min-height: 0;
  flex: 0 0 auto;
}

/* Плоскости цен и отзывов — зелёные, те же тона, что в final */
.pri.pri { background-color: var(--color-green); }
.rev.rev { background-color: var(--color-green-deep); }

/* Форма: поля на бумаге, скругления элементов управления прежние */
.form__ok.form__ok { border-radius: var(--r-btn); }

/* Подвал */
.ft__link.ft__link { font-size: 15px; }

/* =========================================================================
   Декор — рисованные элементы с листов (папка decor рядом с этим файлом),
   маской. Форма и зерно мелка живут в альфа-канале WebP, цвет даёт
   --dcr-c, поэтому один файл работает и на креме, и на коричневом.
   Расстановка — decor.config.mjs там же, слои — §3 задания
   final-alt 03: пятно (z 0, под контентом, ему можно под фото, карточки
   и за край, нельзя под текст), метка (z 1, рядом с контентом, ни на
   что не заходит), привязанный элемент (z 2, внутри объекта контента).
   ========================================================================= */
:root { --col: 1200px; }

[data-decor] {
  position: relative;
  overflow: hidden;
}

/* Контент выше пятен; метки не пересекают контент, поэтому порядок с
   .wrap для них не важен */
[data-decor] > .wrap {
  position: relative;
  z-index: 1;
}

.dcr {
  position: absolute;
  z-index: 0;
  display: block;
  width: calc(var(--dcr-w) * var(--dcr-k, 1));
  aspect-ratio: var(--dcr-ar);
  top: var(--dcr-top, auto);
  bottom: var(--dcr-bottom, auto);
  opacity: var(--dcr-o, 1);
  background-color: var(--dcr-c);
  -webkit-mask: var(--dcr-src) no-repeat center / contain;
          mask: var(--dcr-src) no-repeat center / contain;
  transform: rotate(var(--dcr-r, 0deg));
  pointer-events: none;
}

.dcr[data-layer="mark"] { z-index: 1; }
.dcr[data-layer="tied"] { z-index: 2; }

/* Пятна приклеены к краю страницы отрицательным отступом и остаются
   на нём при любой ширине; метки держатся за колонку контента: в
   наружном поле (left/right) или внутри неё на --dcr-x от левой кромки */
.dcr[data-anchor="edge-left"] { left: calc(-1 * var(--dcr-out, 0px)); }
.dcr[data-anchor="edge-right"] { right: calc(-1 * var(--dcr-out, 0px)); }
.dcr[data-anchor="left"] { right: calc(50% + var(--col) / 2 + var(--dcr-gap, 24px)); }
.dcr[data-anchor="right"] { left: calc(50% + var(--col) / 2 + var(--dcr-gap, 24px)); }
.dcr[data-anchor="col"] { left: calc(50% - var(--col) / 2 + var(--dcr-x, 0px)); }
/* То же от правой кромки колонки: элементу у правого края нужна привязка
   к ней, а не к левой. Ниже 1290 контейнер уже колонки в 1200, и голый
   расчёт увёл бы элемент за окно — поэтому не ближе наружного поля. */
.dcr[data-anchor="col-right"] {
  right: max(var(--gutter), calc(50% - var(--col) / 2 + var(--dcr-x, 0px)));
}

/* Кольцо вокруг фотографии: внутри обёртки отпечатка, по её центру,
   ниже самого отпечатка (isolate держит z −1 внутри обёртки, а обёртка
   лежит в .wrap — выше фоновых пятен секции) */
[data-decor-host] {
  position: relative;
  isolation: isolate;
}

/* Форма вытянута под хозяина (`ar` в конфиге): маска заполняет бокс
   целиком, а не вписывается в него с родной пропорцией */
.dcr[data-stretch] {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.dcr[data-anchor="inside"] {
  z-index: -1;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(var(--dcr-r, 0deg));
}

/* Наклейка в углу карточки: предмет лежит поверх плашки и свисает за
   её кромку на --dcr-dx / --dcr-dy. Обрезать его нечем — у карточки
   нет ни overflow, ни фона поверх; z 1 внутри её стопки. */
.dcr[data-anchor="corner"] {
  z-index: 1;
  bottom: auto;
}

/* Вынос за кромку масштабируется вместе с размером: иначе на телефоне
   уменьшенная наклейка висела бы на прежнем отступе и последняя в
   строке вылезала бы за край окна */
.dcr[data-anchor="corner"][data-corner="bl"] {
  bottom: calc(-1 * var(--dcr-dy, 0px) * var(--dcr-k, 1));
  top: auto;
  left: calc(-1 * min(var(--dcr-dx, 0px), var(--gutter) - 10px) * var(--dcr-k, 1));
  right: auto;
}

.dcr[data-anchor="corner"][data-corner="br"] {
  bottom: calc(-1 * var(--dcr-dy, 0px) * var(--dcr-k, 1));
  top: auto;
  right: calc(-1 * min(var(--dcr-dx, 0px), var(--gutter) - 10px) * var(--dcr-k, 1));
}

.dcr[data-anchor="corner"][data-corner="tl"] {
  top: calc(-1 * var(--dcr-dy, 0px) * var(--dcr-k, 1));
  left: calc(-1 * min(var(--dcr-dx, 0px), var(--gutter) - 10px) * var(--dcr-k, 1));
  right: auto;
}

.dcr[data-anchor="corner"][data-corner="tr"] {
  top: calc(-1 * var(--dcr-dy, 0px) * var(--dcr-k, 1));
  /* Вправо наклейка уходит не дальше наружного поля страницы: правая
     кромка последней карточки — это кромка контейнера, а на узком
     экране поля всего 24 px, и повёрнутый бокс вылезал бы за край окна */
  right: calc(-1 * min(var(--dcr-dx, 0px), var(--gutter) - 10px) * var(--dcr-k, 1));
}

/* Метка у края секции: на телефоне наружного поля нет, и свободное
   место считается от края окна (--dcr-x) и от верха или низа секции */
.dcr[data-anchor="sec"][data-side="left"] { left: var(--dcr-x, 0px); }
.dcr[data-anchor="sec"][data-side="right"] { right: var(--dcr-x, 0px); }

/* Житель на кромке узла-хозяина (якорь edge, prod-decor-01, лист I).
   Элемент — первый ребёнок хозяина (заметки, отпечатка), хозяин помечен
   data-decor-host. На кромку ложится срез бокса или линия опоры
   `--dcr-rest` (доля высоты сверху, из нарезки): у лежащей кошки и
   попугая ниже неё свешиваются лапы и хвост. `--dcr-at` — центр элемента
   по длине кромки, `--dcr-dy` — на сколько он заходит внутрь хозяина.
   Поворота нет: срез обязан лежать на кромке ровно */
.dcr[data-anchor="edge"] {
  z-index: 2;
  transform: none;
}

.dcr[data-anchor="edge"][data-side="top"] {
  top: auto;
  bottom: calc(100% - var(--dcr-dy, 0px)
    - (1 - var(--dcr-rest, 1)) * var(--dcr-w) * var(--dcr-k, 1) / var(--dcr-ar));
  left: calc(var(--dcr-at) * 100% - var(--dcr-w) * var(--dcr-k, 1) / 2);
}

.dcr[data-anchor="edge"][data-side="bottom"] {
  top: calc(100% - var(--dcr-dy, 0px));
  bottom: auto;
  left: calc(var(--dcr-at) * 100% - var(--dcr-w) * var(--dcr-k, 1) / 2);
}

.dcr[data-anchor="edge"][data-side="right"] {
  left: calc(100% - var(--dcr-dy, 0px));
  top: calc(var(--dcr-at) * 100% - var(--dcr-w) * var(--dcr-k, 1) / var(--dcr-ar) / 2);
  bottom: auto;
}

/* Поле (якорь field, prod-decor-02, листы K и L): высокая линия в
   наружном поле страницы, наружным краем уходит за край окна (`bleed` —
   доля ширины за краем), сверху и снизу её режет кромка секции. Слой z 0,
   под контентом. Поле страницы m = (окно − колонка) / 2 считается от
   --vw (scroll.ts пишет clientWidth: 100vw считал бы полосу прокрутки).
   Высота — h × clamp(0.4, m / 360, 1) (множитель m / 360 приходит как
   --fld-hr = h / 360), но не больше той, при которой видимая часть шире
   m − 16 (с `under` — m + 24): --fld-wcap = 1 / ((1 − bleed) × ar).
   Ниже 1376 (m < 88) полей нет */
.dcr[data-anchor="field"] {
  --fld-m: calc((var(--vw) - var(--col)) / 2);
  --fld-hh: min(
    clamp(calc(var(--fld-h) * 0.4), calc(var(--fld-m) * var(--fld-hr)), var(--fld-h)),
    calc((var(--fld-m) - 16px + var(--fld-under, 0px)) * var(--fld-wcap))
  );
  --fld-w: calc(var(--fld-hh) * var(--dcr-ar));

  z-index: 0;
  width: var(--fld-w);
  height: var(--fld-hh);
  top: var(--fld-top, 0);
  bottom: auto;
}

.dcr[data-anchor="field"][data-side="left"] {
  left: calc(-1 * var(--fld-bleed) * var(--fld-w));
  right: auto;
}

.dcr[data-anchor="field"][data-side="right"] {
  right: calc(-1 * var(--fld-bleed) * var(--fld-w));
  left: auto;
}

.dcr[data-anchor="field"][data-flip] {
  transform: scaleX(-1) rotate(var(--dcr-r, 0deg));
}

@media (width < 1376px) {
  .dcr[data-anchor="field"] { display: none; }
}

/* until: 1376 — элемент только уже 1376: на широком экране его место
   занимает поле (пятно отзывов уступает петле) */
@media (width >= 1376px) {
  .dcr[data-until] { display: none; }
}

/* Поле появляется вместе с секцией — когда её первый .rv получил is-in
   от общего наблюдателя reveal.ts: прозрачностью, 600 мс, один раз.
   Движения нет. Без JS и с reduced-motion — сразу на месте */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-decor] > .dcr[data-anchor="field"] {
    opacity: 0;
    transition: opacity 600ms var(--ease-rv);
  }

  html.js [data-decor]:has(.rv.is-in) > .dcr[data-anchor="field"] {
    opacity: var(--dcr-o, 1);
  }
}

/* На телефоне житель остаётся у своего хозяина, чуть мельче */
@media (width < 620px) {
  .dcr[data-anchor="edge"] { --dcr-k: 0.8; }
}

/* `from` — элемент только от ширины: обратное к `only` */
@media (width < 1200px) { .dcr[data-from="lg"] { display: none; } }
@media (width < 1024px) { .dcr[data-from="sm"] { display: none; } }
@media (width < 900px) { .dcr[data-from="md"] { display: none; } }
/* xs — по той же границе, что столбик кадров первого экрана (max-width
   620 включительно) */
@media (width <= 620px) { .dcr[data-from="xs"] { display: none; } }

/* Движение жителей (prod-decor-01 §6). Житель появляется вместе с
   хозяином: его .rv получает is-in от общего наблюдателя reveal.ts —
   своего наблюдателя у жителей нет, всё на CSS. Один раз, через 300 мс
   после появления хозяина. Анимируются только transform, opacity и
   clip-path — раскладка не двигается. Без JS (нет html.js) и с
   reduced-motion жители сразу на месте.
   — top: поднимается из-за кромки — сдвиг вниз на 45 % и срез нижних
     45 %, срез всё время на кромке, зверь выглядывает;
   — bottom (хвост): опускается из-под кромки, потом раз качается ±4°
     вокруг верхней кромки;
   — right (хомяк): выезжает из-за правой кромки;
   — жители с линией опоры (лежащая кошка, попугай): только прозрачность —
     лежащая кошка не прыгает, а у попугая под кромкой хвост */
@media (prefers-reduced-motion: no-preference) {
  html.js .dcr[data-anchor="edge"] {
    transition:
      transform 500ms cubic-bezier(.2, .9, .3, 1.15),
      clip-path 500ms cubic-bezier(.2, .9, .3, 1.15),
      opacity 400ms var(--ease-rv);
    transition-delay: calc(var(--rv-delay, 0ms) + 300ms);
  }

  html.js .dcr[data-anchor="edge"][data-side="top"]:not([data-rest]) {
    transform: translateY(45%);
    clip-path: inset(0 0 45% 0);
  }

  html.js .dcr[data-anchor="edge"][data-side="bottom"] {
    transform: translateY(-45%);
    clip-path: inset(45% 0 0 0);
    transform-origin: 50% 0;
  }

  html.js .dcr[data-anchor="edge"][data-side="right"] {
    transform: translateX(-45%);
    clip-path: inset(0 0 0 45%);
  }

  html.js .dcr[data-anchor="edge"][data-rest] {
    opacity: 0;
  }

  html.js .rv.is-in .dcr[data-anchor="edge"] {
    transform: none;
    clip-path: inset(0);
    opacity: var(--dcr-o, 1);
  }

  /* Хвост, опустившись, раз качается вокруг верхней кромки */
  html.js .rv.is-in .dcr[data-anchor="edge"][data-side="bottom"] {
    animation: dcr-sway 900ms ease-in-out calc(var(--rv-delay, 0ms) + 800ms) 1;
  }
}

@keyframes dcr-sway {
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}

/* Сердце в кнопке: в строке после подписи, цвет текста кнопки */
.dcr[data-anchor="button"] {
  position: static;
  display: inline-block;
  margin-inline-start: 10px;
  vertical-align: -1px;
  transform: none;
}

/* Ниже 1900 наружное поле уже (на 1440 — 120 px при колонке 1200),
   и пятну со своим положением нужна другая вертикаль: значения -n */
@media (width < 1900px) {
  .dcr[data-narrow] {
    top: var(--dcr-top-n, var(--dcr-top, auto));
    bottom: var(--dcr-bottom-n, var(--dcr-bottom, auto));
  }
}

/* 1024–1419: наружного поля нет (контейнер 1288 плюс зазор с меткой не
   помещаются уже с 1416, задание давало 1280) — метки в наружном поле
   снимаются. Метки у углов отпечатков внутри колонки остаются. Пятна
   остаются в 70 % от табличного размера. */
@media (width < 1420px) {
  .dcr[data-anchor="left"],
  .dcr[data-anchor="right"] { display: none; }
}

/* Элемент, у которого смысл только на широком экране: веер над H1 стоит
   в наружном поле у кромки колонки, а ниже 1288 колонка уже поля нет —
   он ложился бы на надзаголовок и обрезался краем окна */
@media (width < 1288px) {
  .dcr[data-wide] { display: none; }
}

@media (width < 1280px) {
  .dcr[data-layer="blob"] { --dcr-k: 0.7; }
}

/* Ниже 1024 на всю страницу остаются два пятна (data-keep="sm") в 55 %
   и привязанные элементы; всё остальное снято. Оставшиеся пятна
   приклеиваются к левому краю окна на своих значениях -s. */
@media (width < 1024px) {
  /* Наклейки держатся за карточку, а не за наружное поле страницы,
     поэтому остаются вместе с привязанными элементами. Телефонные
     записи (data-only) — тоже: у них хозяин — угол карточки, отпечатка
     или край секции, а не наружное поле, которого здесь нет. */
  .dcr:not([data-keep="sm"]):not([data-tied]):not([data-anchor="corner"]):not([data-only]) { display: none; }
  .dcr[data-layer="blob"] { --dcr-k: 0.55; }

  /* Телефонные наклейки — в 70 % на всех ширинах ниже 1024, не только на
     телефоне: в полный размер предмет заходит на карточку глубже её
     внутреннего поля и ложится на первую строку текста */
  .dcr[data-only][data-anchor="corner"] { --dcr-k: 0.7; }

  .dcr[data-small] {
    top: var(--dcr-top-s, auto);
    bottom: var(--dcr-bottom-s, auto);
    left: calc(-1 * var(--dcr-out-s, 0px));
    right: auto;
  }

  .dcr[data-small="right"] {
    left: auto;
    right: calc(-1 * var(--dcr-out-s, 0px));
  }
}

/* Кольцо вокруг кадра считается от ширины отпечатка, а не от таблицы:
   ужатое до 55 % оно целиком ушло бы под кадр. Только в одну колонку
   (ниже 1000): на 1000–1023 раскладка ещё настольная, и полное кольцо
   ложилось бы на абзац слева. */
@media (width < 1000px) {
  .dcr[data-anchor="inside"] { --dcr-k: 1; }
}

/* Телефонная расстановка (правка 17 сентября 2026): записи only: 'sm'
   видны ниже 1024, only: 'xs' — ниже 620, где блоки уже в одну колонку.
   Выше этих ширин работает настольная расстановка. */
@media (width >= 1024px) {
  .dcr[data-only] { display: none; }
}

/* Отзывы встают стопкой ниже 900; в три узкие колонки наклейка в углу
   ложилась бы на текст */
@media (width >= 900px) {
  .dcr[data-only="md"] { display: none; }
}

@media (width >= 620px) {
  .dcr[data-only="xs"] { display: none; }
}

/* На телефоне карточка уже, а заголовок в ней уходит в две строки:
   предмет в углу становится мельче, чтобы не наезжать на него */
@media (width < 700px) {
  .dcr[data-anchor="corner"] { --dcr-k: 0.7; }
}

/* =========================================================================
   Отпечатки (правка final-alt 09): меньше бумаги, больше фото. Одно
   правило для главной и страницы дня: поля 8 px сверху и по бокам,
   снизу — строка подписи и 8 px воздуха. Подпись в одну строку от 768.
   Кегль: первый экран 22 px, остальные отпечатки главной 20 (правило
   держится за `main[data-page]`, на странице дня кегль прежний).
   Отпечаток без подписи (проп `bare`) внизу держит те же 8 px.
   ========================================================================= */
:root {
  --print-pad: 8px;
  --print-foot: 8px;
  --print-pad-lg: 8px;
  --print-foot-lg: 8px;
}

.print .print__cap.print__cap { padding-top: 4px; }
.print .print__hand.print__hand { line-height: 1.2; }

/* Одна строка — только на главной: там подписи короткие, с именами. На
   странице дня подпись кадра террасы («Терраса второго этажа ·
   открытый воздух, но своя территория») длиннее любого отпечатка ряда,
   и без переноса она выходила за бумагу — там перенос остаётся. */
@media (min-width: 768px) {
  main[data-page] .print .print__hand.print__hand { white-space: nowrap; }
}

main[data-page] .print .print__hand.print__hand { font-size: 20px; }

/* Подпись отпечатка не шире его бумаги (prod-fix-02). Малый отпечаток
   «Почему дом» уже 210 px — ему перенос разрешён, остальные держат одну
   строку. Проверка — app/tools/check-layout.js */
main[data-page] .wh__small .print .print__hand.print__hand {
  white-space: normal;
  text-wrap: balance;
}

/* «Почему дом» на 700–1200 — три кадра в ряд (фото 05): на 768 вертикальный
   отпечаток ~170 px, длинная подпись в строку не встаёт — в ряду перенос
   разрешён всем трём */
@media (min-width: 700px) and (max-width: 1200px) {
  main[data-page] .wh__table .print .print__hand.print__hand {
    white-space: normal;
    text-wrap: balance;
  }
}
main[data-page] .hero .print .print__hand.print__hand { font-size: 22px; }

/* 25.10.2026: «Наш дом в Баковке, Одинцово» (`odin-hero-1`) шире бумаги
   на 5–13 px от 1280 — подпись первого экрана переносится, если не
   встаёт; короткие подписи остаются в одну строку. Без `balance`: место
   разрыва — после «Баковке,», а не после «в» */
@media (min-width: 768px) {
  main[data-page] .hero .print .print__hand.print__hand {
    white-space: normal;
  }
}

/* Первый экран копии. Правка 09 держала малые отпечатки не уже 300 px
   (колонка кадров 628) ценой H1 в 44 px. Правка 10 решила наоборот:
   заголовок крупнее — 58 px на 1440, три строки (самая длинная строка
   «всегда под присмотром» — 11.4 кегля, колонка слова ~690), не больше
   четырёх строк на 390. Колонка кадров сужена обратно до 470 px, две
   колонки внутри. Ниже 1000 — одна колонка, как было; ниже 620 кадры
   столбиком (правило компонента). */
.hero .hero__in.hero__in { grid-template-columns: minmax(0, 1fr) min(470px, 40%); }

/* Фото 06: кадры первого экрана крупнее ровно настолько, насколько H1 это
   позволяет, — ни на одной странице он не прибавляет строки (замер
   перебором на главной и шести посадочных, 1280–1920). От 1366 колонка
   кадров 486 (+16 px): при 490 на 1920 главная ещё в три строки, при 496
   уже в четыре, 486 — с запасом под другую отрисовку шрифта. На 1280–1365
   остаются 470: `sobaki/` получает четвёртую строку уже при 476. Задание
   просило 600 (колонка слова ≥ 560 ради фактов 2 × 2) — при 600 H1 на
   1440 прибавлял одну-две строки на всех семи страницах; решено:
   заголовок не удлинять (19.10.2026) */
@media (min-width: 1366px) {
  .hero .hero__in.hero__in { grid-template-columns: minmax(0, 1fr) 486px; }
}

.hero .hero__art.hero__art {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hero .t-h1.t-h1 { font-size: clamp(34px, 3.2vw + 12px, 58px); }

/* 1001–1279: колонка слова и так шире нужного H1, а малые отпечатки при
   40 % выходили по 180 px — подписи «Тишу гладят за завтраком» и «Рыжик
   спит без задних лап» в строку не вставали. Колонка кадров шире, и
   подпись первого экрана здесь может перенестись */
@media (1001px <= width < 1280px) {
  .hero .hero__in.hero__in { grid-template-columns: minmax(0, 1fr) 46%; }
  main[data-page] .hero .print .print__hand.print__hand { white-space: normal; }
}

@media (max-width: 1000px) {
  .hero .hero__in.hero__in { grid-template-columns: minmax(0, 1fr); }
  /* фото 06: 640 → 720 — кадры под словом, на длину H1 не влияют */
  .hero .hero__art.hero__art { max-width: 720px; }
}

@media (max-width: 620px) {
  .hero .hero__art.hero__art { grid-template-columns: minmax(0, 1fr); }
}

/* Ссылка «Рассчитать стоимость» — текст, без полей кнопки: в колонке
   слова 529 px с полями она уезжала под обводку (правка 09) */
.hero .hero__cta .btn.btn--link { padding-inline: 0; }

/* =========================================================================
   Правка final-alt 10 — маркер, значки, движение
   ========================================================================= */

/* --- Маркер под ключевой фразой (§2) ------------------------------------
   `strong()` из lib/site.ts ставит класс `mk`. Под фразой ложится
   рисованный мазок: фон строки высотой ~60 % кегля, опущенный к нижней
   половине букв, с выносом 4 px с каждой стороны; на каждой строке свой
   (`box-decoration-break: clone`). Цвет и непрозрачность запечены в файл
   (cut-decor.py, TINTS): светлые плоскости — #F5A623 · 0.45 под
   основными чернилами, тёмные (чернила, коричневый, мох) — #CF2A1E · 0.55
   под светлым текстом. Бумага внутри тёмной плоскости — снова светлая. */
:root {
  --mk-light: url(decor/marker-light.webp);
  --mk-dark: url(decor/marker-dark.webp);
  --mk-src: var(--mk-light);
  --mk-ink: var(--color-ink);
}

.on-night,
.tr {
  --mk-src: var(--mk-dark);
  --mk-ink: var(--color-on-dark);
}

.lv__pane,
.voice,
.tr .note,
.rt .note {
  --mk-src: var(--mk-light);
  --mk-ink: var(--color-ink);
}

strong.mk.mk {
  font-weight: 600;
  color: var(--mk-ink);
  padding-inline: 4px;
  margin-inline: -4px;
  background: var(--mk-src) no-repeat 0 92% / 100% 58%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Прорисовка слева направо через 250 мс после того, как текст появился
   (600 мс появления + 250). Фраза — один инлайновый бокс с текстом, и
   `clip-path` срезал бы вместе с мазком буквы, поэтому растёт ширина
   фона: это только перерисовка, раскладка не двигается */
html.js strong.mk.mk {
  background-size: 0% 58%;
  transition: background-size 650ms cubic-bezier(.2, .7, .2, 1) calc(var(--rv-delay, 0ms) + 850ms);
}

html.js strong.mk.mk.is-in { background-size: 100% 58%; }

/* В панели «Уход» пункт показывает переключатель, а не прокрутка:
   мазок начинается сразу со сменой панели */
html.js .lv__pane strong.mk.mk { transition-delay: 250ms; }

/* --- Появление (§7) ---------------------------------------------------- */
:root { --ease-rv: cubic-bezier(.2, .7, .2, 1); }

html.js .rv {
  --rv-delay: calc(min(var(--rv-i, 0), 6) * 110ms);

  transform: translateY(28px);
  transition:
    opacity 600ms var(--ease-rv),
    transform 600ms var(--ease-rv);
  transition-delay: var(--rv-delay);
}

html.js .rv.is-in { transform: none; }

/* Отпечатки «падают на стол»: сверху 24 px, поворот на 4° больше своего
   (соседи — в разные стороны), масштаб 1.03, тень растёт вместе с
   приземлением; лёгкий перелёт. Обёртка .rv при этом стоит на месте —
   движется сам отпечаток. Соседние отпечатки — через 140 мс. Конечное
   состояние не записано в кадрах: анимация уходит в собственный поворот
   отпечатка (на телефоне он вдвое мягче) */
html.js .rv:has(> .print),
html.js .rv:has(> .print).is-in {
  opacity: 1;
  transform: none;
}

html.js .rv > .print { opacity: 0; }

html.js .rv.is-in > .print {
  opacity: 1;
  animation: zd-land 700ms cubic-bezier(.2, .9, .3, 1.15) calc(var(--land-wait, 0ms) + var(--rv-i, 0) * 140ms) backwards;
}

html.js .rv:nth-child(even) > .print { --land-r: -4deg; }

/* Первый экран не ждёт ни скрипта, ни наблюдателя: H1, лид, факты и
   кнопки появляются сразу с первой отрисовкой (CSS-анимация по очереди),
   кадры падают после них. Раньше первый экран был спрятан, пока не
   загрузится и не запустится основной скрипт, — на медленной сети или при
   ошибке скрипта человек видел пустой крем и считал, что сайт не
   загрузился */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .rv,
  html.js .hero .rv.is-in {
    opacity: 1;
    transform: none;
    transition: none;
    animation: zd-rise 600ms var(--ease-rv) calc(var(--hero-i, 0) * 110ms) backwards;
  }

  .hero__copy > :nth-child(2) { --hero-i: 1; }
  .hero__copy > :nth-child(3) { --hero-i: 2; }
  .hero__copy > :nth-child(4) { --hero-i: 3; }

  html.js .hero .hero__slip.rv { animation: none; }

  html.js .hero .rv > .print,
  html.js .hero .rv.is-in > .print {
    opacity: 1;
    animation: zd-land 700ms cubic-bezier(.2, .9, .3, 1.15) calc(450ms + var(--slip-i, 0) * 140ms) backwards;
  }

  .hero__slip:nth-child(2) { --slip-i: 1; }
  .hero__slip:nth-child(3) { --slip-i: 2; }

  html.js .hero .hero__facts .ico,
  html.js .hero .hero__facts.is-in .ico {
    opacity: 1;
    animation: zd-pop 400ms var(--ease-rv) calc(520ms + var(--i, 0) * 120ms) backwards;
  }
}

@keyframes zd-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes zd-land {
  from {
    opacity: 0;
    transform: translateY(-24px) rotate(calc(var(--rot, 0deg) + var(--land-r, 4deg))) scale(1.03);
    box-shadow: 0 1px 2px rgb(43 20 8 / 0.06);
  }
}

/* Наведение на отпечаток (только точный указатель): выпрямляется,
   поднимается на 4 px, тень чуть больше */
.print.print {
  transition:
    box-shadow 250ms var(--ease),
    transform 250ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .print.print:hover {
    transform: translateY(-4px) rotate(0deg);
    box-shadow: var(--shadow-print-hover);
  }
}

@media not all and (pointer: fine) {
  .print.print:hover {
    transform: rotate(var(--rot, 0deg));
    box-shadow: var(--shadow-print);
  }
}

/* Значки фактов первого экрана: по очереди, масштаб 0.6 → 1 и поворот
   −12° → 0, старт после H1 */
html.js .hero__facts .ico { opacity: 0; }

html.js .hero__facts.is-in .ico {
  opacity: 1;
  animation: zd-pop 400ms var(--ease-rv) calc(var(--rv-delay, 0ms) + 300ms + var(--i, 0) * 120ms) backwards;
}

@keyframes zd-pop {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-12deg);
  }
}

/* Штрих, который прорисовывается слева направо (обводка «5,0») */
html.js [data-draw] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 800ms var(--ease-rv) 300ms;
}

html.js [data-draw].is-in { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  html.js .rv,
  html.js .hero__facts .ico {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html.js .rv > .print {
    opacity: 1;
    animation: none;
  }

  html.js strong.mk.mk { background-size: 100% 58%; }
  html.js [data-draw] { clip-path: none; }
}

/* =========================================================================
   Правка seo-01 — главная-хаб и посадочные
   ========================================================================= */

/* Мёд — тон утреннего неба шкалы, вынесенный в плоскость: «Кого
   принимаем» на главной сразу под кремом первого экрана и «Как кошка
   живёт» на посадочной. От крема #E8CDA6 он отстоит на ΔE 12 (wall-cream
   — на 4, honey #EBCE9C — на 6: сливались), чернила на нём 11.7:1,
   красный текстом #9A1D16 — 5.5:1, бумага карточки отделяется сама */
:root { --color-warm: #F5CE92; }

/* Посадочная (правка seo-03): трансфер стоит вторым, «Почему частный
   дом» идёт за ним на wall-cream, как на главной. На длительной
   передержке за ним стоит письмо Максима (prod-fix-02, вместо тарифов):
   его крем от wall-cream отстоит на ΔE 4, плоскости слились бы. Поэтому
   Максим после «Почему» — на мёде (от wall-cream ΔE 14, чернила 11.7:1),
   как раньше тарифы. Правило держится за соседство, а не за страницу */
main[data-page="landing"] .wh + .pr.pr {
  background-color: var(--color-warm);
}

/* Отзывы на всех страницах — на мху, как на главной (правка seo-03):
   чернильной плоскости и ночного тинта у посадочных больше нет.
   prod-fix-01: полоса срочности ушла за цены (сначала цена, потом «нужно
   срочно?»), и на koshki/, sobaki/, gryzuny-i-pticy/, odintsovo/ цены
   стоят сразу за отзывами. Два мха подряд слились бы, поэтому цены за
   отзывами — на коричневой плоскости трансфера: светлый текст 9.11:1,
   приглушённый 5.71:1, светлый акцент 5.95:1. Тинт заметки расчёта —
   #4A2E1F (1.22 к плоскости, как тинт мха 1.25). Правило держится за
   соседство: на главной и у длительного проживания перед ценами не отзывы */
main[data-page="landing"] .rev + .pri.pri {
  --note-bg: #4A2E1F;
  background-color: var(--color-honey);
  border-top: 1px solid var(--edge-night-soft);
}

/* Крошки стоят на плоскости первого экрана — верхнее поле hero под ними
   меньше, чтобы крошки и H1 читались одним заголовком страницы */
main[data-page="landing"] .hero.hero { padding-top: var(--s-32); }