/* tokens.css */
/* tokens.css: W1-B дизайн-система, токены (цвета, тени, радиусы, шрифты, отступы, переходы, z-index) и @font-face */

/* Шрифт Onest (OFL, static/fonts/OFL.txt): 2 подмножества tools/fonts_subset.py, ось wght 400-700, курсива нет.
   unicode-range = CYR и LAT из tools/fonts_subset.py (python tools/fonts_subset.py --unicode-range): меняются
   только вместе (tests/test_r1_fonts.py). В кириллице - казахские буквы (SPEC-REDESIGN 10.1). */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/onest-kzr-cyr.65be2d659d.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04AF, U+04B0-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/onest-kzr-lat.c975745a40.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-display: swap): Arial с поправками против сдвига вёрстки.
   Значения печатает python tools/fonts_subset.py --fallback-metrics (ширина образца RU+EN при wght 400,
   затем метрики hhea). */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial");
  size-adjust: 103.93%;
  ascent-override: 93.33%;
  descent-override: 29.35%;
  line-gap-override: 0%;
}

/* шрифты (задача W1C «шрифт Onest») */
:root {
  --font-text: "Onest", "Onest Fallback", Arial, sans-serif;
  --font-head: "Onest", "Onest Fallback", Arial, sans-serif;
}

/* ---- Дизайн-система B (W1U-2; SPEC-REDESIGN 4.1, 4.3; эталон b-refine.html): цвета, тени, радиусы,
   отступы, сетка, слои. Цвет в CSS сайта - только эти переменные и белый #fff (CONTRACT 1.9); контраст пар -
   tests/test_r1_ui_css.py. --apricot (2,5:1 к белому) - только заливки и декор, не текст. */
:root {
  --ink: #1B2433;
  --text: #4A5568;
  --muted: #5B6886;
  --blue: #2B5BD6;
  --blue-ink: #2148B0;
  --blue-line: #BFD0F5;
  --sky: #EAF0FF;
  --mist: #F4F7FC;
  --line: #DCE3F0;
  --line-soft: #EEF1F7;
  --apricot: #F08A4B;
  --apricot-tint: #FFF0E6;
  --apricot-ink: #B4501A;
  --error: #B42318;
  --error-tint: #FFF6F6;
  --focus-halo: #DCE6FF;
  --scene-hi: #FBFCFF;
  --scene-lo: #D9E4FF;
  --media-hi: #F8FAFF;
  --media-lo: #EDF2FF;
  --ring-cut: #62666d; /* срез рендеров и силуэт профиля (Рустем 12.10) */
  --overlay: rgba(27, 36, 51, .45);
  --lightbox-bg: rgba(27, 36, 51, .92); /* --ink 92 %; color-mix() нет в Chrome <= 110, Safari < 16.2 */
  --lightbox-btn-bg: rgba(27, 36, 51, .65);
  --bar-bg: rgba(255, 255, 255, .96);

  /* тени - только у карточек каталога, сцены первого экрана, меток сцены, активного пункта меню, «наверх», диалогов */
  --shadow-card: 0 14px 34px rgba(27, 36, 51, .07);
  --shadow-scene: 0 26px 54px rgba(43, 91, 214, .16);
  --shadow-pin: 0 8px 22px rgba(27, 36, 51, .1);
  --shadow-pill: 0 2px 8px rgba(27, 36, 51, .08);
  --shadow-top: 0 6px 18px rgba(27, 36, 51, .16);
  --shadow-dialog: 0 26px 54px rgba(27, 36, 51, .18);

  /* радиусы по иерархии: сцена - круг, карточки 26, картинки 18, поля 14, кнопки - таблетки */
  --r-round: 50%;
  --r-card: 26px;
  --r-img: 18px;
  --r-field: 14px;
  --r-pill: 999px;

  /* шкала отступов */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-58: 58px;
  --sp-64: 64px;
  --sp-88: 88px;

  /* сетка: содержимое до 1200 px, поля --gutter 40 / 24 / 16; --header-h - ряд шапки; --sticky-h - сколько
     липкая шапка закрывает сверху (липкая только от 1025 px); --bar-h - нижняя панель (до 1024 px) */
  --container: 1200px;
  --container-text: 800px;
  --container-narrow: 700px;
  --container-article: 1140px;
  --gutter: 40px;
  --section-y: 88px;
  --col-gap: 64px;
  --grid-gap: 24px;
  --header-h: 76px;
  --sticky-h: 77px;
  --bar-h: 0px;

  /* переходы и слои */
  --t-fast: .2s;
  --t-base: .3s;
  --z-bar: 90;
  --z-header: 100;
}

/* планшет и телефон (бургер, нижняя панель) */
@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
    --section-y: 64px;
    --col-gap: 32px;
    --header-h: 64px;
    --sticky-h: 0px;
    --bar-h: 76px;
  }
}

/* телефон */
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --section-y: 48px;
  }
}

/* base.css */
/* base.css: дизайн-система B (W1U-3; SPEC-REDESIGN 4.2-4.3): сброс, типографика Onest, ссылки, фокус, skip-link,
   скрытый текст, блокировка прокрутки, без движения. Шрифт - переменная --font-text (W1C), цвета - tokens.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* фон ниже короткой страницы - цвет подвала (у body остаётся #fff) */
  background-color: var(--mist);
  scroll-behavior: smooth;
  /* якорь и фокус встают ниже липкой шапки (от 1025 px) и выше нижней панели (до 1024 px): WCAG 2.4.11 */
  scroll-padding-block-start: calc(var(--sticky-h) + 8px);
  scroll-padding-block-end: calc(var(--bar-h) + 8px);
}

/* текст: Onest 400, 16/1.6, --text на белом (SPEC 4.2) */
body {
  margin: 0;
  background-color: #fff;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* заголовки: Onest 700, --ink; H1 46 / 38 / 28 px (десктоп / планшет / телефон), H2 34, H3 23 (b-refine.html) */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 .5em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -.02em;
}

h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.015em;
}

h3 {
  font-size: 23px;
  line-height: 1.3;
}

h4 {
  font-size: 18px;
  line-height: 1.4;
}

h5,
h6 {
  font-size: 16px;
  line-height: 1.5;
}

p,
ul,
ol {
  margin-block: 0 1em;
}

b,
strong {
  font-weight: 700;
}

/* ссылки в тексте - синие. Правило a:not(.btn) (грабля 7: цвет ссылок не перебивает текст кнопок) обёрнуто в
   :where - нулевая специфичность, поэтому любой класс компонента (.site-nav__link, .skip-link) задаёт свой цвет */
:where(a:not(.btn)) {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
  transition: color var(--t-fast);
}

img,
video {
  max-inline-size: 100%;
  block-size: auto;
}

img,
svg,
video {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

[hidden] {
  display: none !important;
}

/* фокус с клавиатуры: контур 3px --blue со смещением 2px (5,9:1 к белому, WCAG 1.4.11; SPEC 4.3) */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* вводный абзац: 18 px, на телефоне 16 */
.lead {
  max-inline-size: 32em;
  margin-block: 0 28px;
  font-size: 18px;
  line-height: 1.6;
}

/* ссылка «к содержимому»: синяя таблетка за верхним краем, появляется при фокусе */
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: calc(var(--z-header) + 10);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background-color: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* текст только для скринридеров */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* блокировка прокрутки под диалогом и лайтбоксом (KZR.lockScroll) */
html.is-scroll-locked {
  overflow: hidden;
}

@media (hover: hover) {
  :where(a:not(.btn):hover) {
    color: var(--blue-ink);
  }
}

@media (max-width: 1024px) {
  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -.015em;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 20px;
  }

  .lead {
    font-size: 16px;
  }
}

/* без движения: плавная прокрутка, анимации и переходы выключены на всём сайте */
@media (prefers-reduced-motion: reduce) {
  /* корень - без перехода: inline-отступ KZR.lockScroll ставится сразу, без сдвига на кадр (html 0,0,1 выше *) */
  html {
    scroll-behavior: auto;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* layout.css */
/* layout.css: дизайн-система B (W1U-3; CONTRACT 5): контейнер с полями, секции, шапка секции, две колонки, сетки */

/* Контейнер: содержимое до 1200 px по центру, поля --gutter (40 / 24 / 16 px) внутри контейнера */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* текст каталога и статьи: 800 и 1140 px; узкий - 700 px только на десктопе */
.container--text {
  max-inline-size: calc(var(--container-text) + 2 * var(--gutter));
}

.container--article {
  max-inline-size: calc(var(--container-article) + 2 * var(--gutter));
}

@media (min-width: 1025px) {
  .container--narrow {
    max-inline-size: calc(var(--container-narrow) + 2 * var(--gutter));
  }
}

/* Секция: вертикальные поля 88 / 64 / 48 px; фон тумана - модификатор --mist */
.section {
  padding-block: var(--section-y);
}

.section--mist {
  background-color: var(--mist);
}

/* две секции тумана подряд не сливаются в один блок (Рустем 12.10) */
.section--mist + .section--mist {
  border-block-start: 1px solid var(--line);
}

/* Шапка секции: H2 и при необходимости .lead; без надписей капсом над заголовком (SPEC 4.4) */
.section__head {
  max-inline-size: 760px;
  margin-block-end: 40px;
}

.section__head > :last-child {
  margin-block-end: 0;
}

/* Две колонки; до 1024 px - одна под другой */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
}

.split--center {
  align-items: center;
}

.split__col {
  min-inline-size: 0;
}

/* Сетки карточек: .grid - столбик; --2 - две колонки от 768 px; --3 и --4 - три и четыре от 1025 px (две на планшете) */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

@media (max-width: 767px) {
  .section__head {
    margin-block-end: 24px;
  }
}

/* components.css */
/* components.css: дизайн-система B (W1U-4; SPEC-REDESIGN 4.3, CONTRACT 5): иконка, кнопки-таблетки, группа кнопок,
   плашки диаметров, метки сцены, мелкая метка, карточка кольца. Стилей компонентов сайта T0 нет (W2P-14). */

/* Иконка: inline SVG из static/icons (функция svg()), размер = font-size, цвет = currentColor */
.icon {
  display: inline-block;
  flex-shrink: 0;
  inline-size: 1em;
  block-size: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

/* Направленные иконки зеркалятся в RTL: по классу icon--dir и по имени (шевроны eicon-chevron). */
[dir="rtl"] .icon--dir,
[dir="rtl"] .icon--eicon-chevron-left, /* rtl-ok: имя иконки в селекторе, не свойство */
[dir="rtl"] .icon--eicon-chevron-right { /* rtl-ok: имя иконки в селекторе, не свойство */
  transform: scaleX(-1);
}

/* Кнопки - таблетки высотой 44 px (b-refine .btn): Onest 600 15 px. Рамка 1,5 px у всех (прозрачная), чтобы
   контурная была той же высоты. Ссылки-кнопки базовое правило a:not(.btn) не красит (грабля 7) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 11.5px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* главная - синяя с белым текстом (5,9:1) */
.btn--primary {
  background-color: var(--blue);
  color: #fff;
}

/* вторая - абрикосовая мягкая (4,6:1) */
.btn--soft {
  background-color: var(--apricot-tint);
  color: var(--apricot-ink);
}

/* третья - контурная (открыть, скрыть, подробнее) */
.btn--outline {
  border-color: var(--blue-line);
  background-color: transparent;
  color: var(--blue);
}

/* на всю ширину: отправка формы, нижняя панель, бургер */
.btn--block {
  display: flex;
  inline-size: 100%;
}

.btn__icon {
  font-size: 16px;
}

.btn:disabled {
  cursor: default;
  opacity: .6;
}

.btn[aria-busy="true"] {
  cursor: progress;
}

/* Группа кнопок: в строку с переносом; на телефоне - столбиком во всю ширину (b-refine .m-hero .ctas) */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Плашки диаметров: --blue 700 на --sky (5,2:1), подпись .chips__label - --muted (b-refine .dia) */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips__label {
  margin-inline-end: 2px;
  color: var(--muted);
  font-size: 14px;
}

.chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background-color: var(--sky);
  color: var(--blue);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Метка сцены первого экрана: белая таблетка с тенью; где стоит - решает страница (волна 2) */
.pin {
  display: inline-block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background-color: #fff;
  box-shadow: var(--shadow-pin);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Мелкая метка: 12 px --muted на тумане (5,2:1) */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background-color: var(--mist);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Карточка кольца (b-refine .pcard): белая, радиус 26, тень; картинка 300 px слева, текст справа;
   --stack - картинка сверху (две карточки в ряд на главной); на телефоне всегда столбиком.
   Рендер во всю ширину панели: срез кадра слева и справа - края панели (Рустем 12.10) */
.ring-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 22px;
  border-radius: var(--r-card);
  background-color: #fff;
  box-shadow: var(--shadow-card);
}

/* лишняя высота в ряду - в тело (строка 1fr), кнопки прижаты к низу: заголовки и кнопки на одном уровне */
.ring-card--stack {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 20px;
  align-items: start;
}

.ring-card--stack .ring-card__body {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.ring-card--stack .ring-card__actions {
  margin-block-start: auto;
}

.ring-card__media {
  display: grid;
  place-items: center;
  min-block-size: 200px;
  overflow: hidden;
  border-radius: var(--r-img);
  background-image: linear-gradient(160deg, var(--media-hi), var(--media-lo));
}

/* кадр 1:1, видно верхние 80%: ниже только прозрачное (кольцо с тенью - до 77,3% высоты кадра) */
.ring-card__media img {
  inline-size: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: top;
}

.ring-card__body {
  min-inline-size: 0;
}

.ring-card__title {
  margin-block: 0 6px;
  font-size: 23px;
}

.ring-card__text {
  margin-block: 0 14px;
}

.ring-card .chips {
  margin-block-end: 16px;
}

@media (hover: hover) {
  .btn--primary:hover {
    background-color: var(--blue-ink);
  }

  .btn--soft:hover {
    border-color: var(--apricot);
  }

  .btn--outline:hover {
    background-color: var(--sky);
  }
}

@media (max-width: 767px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pin {
    padding: 7px 12px;
    font-size: 13px;
  }

  .ring-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .ring-card__title {
    font-size: 20px;
  }
}

/* «Перезвоните мне» (шапка, блок контактов; SPEC-REDESIGN 7.2): открывает диалог #perezvon, без JS - страница
   контактов. Правило - единственный источник цвета и размера ссылки; шапка добавляет nowrap и отступ (header.css). */
a.callback-link {
  display: block;
  inline-size: fit-content;
  margin-block-start: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--blue);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  a.callback-link:hover {
    color: var(--blue-ink);
    text-decoration-style: solid;
  }
}

/* header.css */
/* header.css: шапка B (W1U-5; SPEC-REDESIGN 5, b-refine.html .d-head и .m-head). Светлая на всех страницах.
   От 1025 px - ряд: логотип, меню-таблетка (текущий пункт - белая таблетка), телефон, «Оставить заявку», язык;
   шапка липкая. До 1024 px - логотип, звонок, бургер; меню, телефон, заявка и язык - в панели бургера.
   Узкий десктоп (ряд RU занимает 1141 px, замер 09.10 на Onest): контейнерные запросы к .site-header__inner -
   до 1159 px прячутся телефон и «Перезвоните мне» (они в блоке контактов), до 1039 px ужимается меню. */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--line-soft);
  background-color: #fff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-inline-size: var(--container);
  min-block-size: var(--header-h);
  margin-inline: auto;
}

.site-header__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.site-header__logo-img {
  display: block;
  inline-size: 137px;
  max-inline-size: none;
  block-size: auto;
}

/* звонок и бургер - только до 1024 px */
.site-header__call,
.burger {
  display: none;
}

/* Меню: обёртка .site-nav (бургер + панель); на десктопе панель - часть ряда */
.site-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-inline-size: 0;
}

.site-nav__panel {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  min-inline-size: 0;
}

/* таблетка меню: туман, пункты 14/500 --ink, текущий - белая таблетка с тенью (SPEC 4.3) */
.site-nav__list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 5px;
  border-radius: var(--r-pill);
  background-color: var(--mist);
  list-style: none;
}

.site-nav__item {
  margin: 0;
}

.site-nav__link {
  display: block;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.site-nav__item--active > .site-nav__link {
  background-color: #fff;
  box-shadow: var(--shadow-pill);
}

/* правая часть ряда: телефон (под ним - «Перезвоните мне»), заявка, язык */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline-start: auto;
}

.site-header__contact {
  display: flex;
  flex-direction: column;
  align-items: end;
  line-height: 1.25;
}

.site-header__phone {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* «Перезвоните мне» под телефоном: цвет и размер - a.callback-link (components.css); отступ 7px - центры
   целей телефона и ссылки >= 24 px (SC 2.5.8) */
.site-header a.site-header__callback {
  margin-block-start: 7px;
  white-space: nowrap;
}

.site-header__cta {
  flex: none;
}

/* Язык: все языки config.yaml -> languages. Два языка - ссылка на другой (десктоп) и пара в бургере;
   три и больше (.lang-switch--menu) - на десктопе выпадающий список по кнопке (header.js) */
.lang-switch {
  position: relative;
  flex: none;
}

.lang-switch__toggle {
  display: none;
}

.lang-switch__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switch__item {
  margin: 0;
}

.lang-switch__link {
  display: block;
  padding: 6px 8px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

@media (hover: hover) {
  .site-nav__link:hover,
  .site-header__phone:hover,
  .lang-switch__toggle:hover,
  .lang-switch__link:hover {
    color: var(--blue);
  }
}

@media (min-width: 1025px) {
  .site-header {
    position: sticky;
    inset-block-start: 0;
  }

  /* контейнер для запросов узкого десктопа (ниже) */
  .site-header__inner {
    container: site-header / inline-size;
  }

  .site-nav__menu {
    margin-inline-start: 8px;
  }

  /* текущий язык уже на странице: в ряду - только другие языки */
  .lang-switch__item--current {
    display: none;
  }

  .lang-switch--menu .lang-switch__toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }

  .lang-switch__caret {
    font-size: 11px;
    transition: transform var(--t-fast);
  }

  .lang-switch--open .lang-switch__caret {
    transform: rotate(180deg);
  }

  .lang-switch--menu .lang-switch__list {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: 1;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 100%;
    margin-block-start: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-field);
    background-color: #fff;
    visibility: hidden;
  }

  .lang-switch--open .lang-switch__list,
  .no-js .lang-switch--menu:focus-within .lang-switch__list {
    visibility: visible;
  }
}

/* узкий десктоп: ряд шапки не шире .site-header__inner (контейнер задан только от 1025 px) */
@container site-header (max-width: 1159px) {
  .site-header__contact {
    display: none;
  }
}

@container site-header (max-width: 1039px) {
  .site-nav__menu {
    margin-inline-start: 0;
  }

  .site-nav__link {
    padding-inline: 9px;
    font-size: 13px;
  }

  .site-header__cta {
    padding-inline: 18px;
  }
}

/* планшет и телефон: логотип, звонок, бургер; панель бургера - под шапкой во всю ширину */
@media (max-width: 1024px) {
  .site-header__inner {
    gap: 10px;
  }

  .site-header__logo-img {
    inline-size: 119px;
  }

  .site-header__call,
  .burger {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--r-round);
    background-color: var(--mist);
    color: var(--ink);
    font-size: 20px;
  }

  .site-header__call {
    margin-inline-start: auto;
  }

  .site-nav {
    flex: none;
  }

  .burger__icon--close,
  .site-nav--open .burger__icon--open {
    display: none;
  }

  .site-nav--open .burger__icon--close {
    display: block;
  }

  /* без JS (html.no-js) кнопка меню - просто кнопка: фокус на ней или внутри панели раскрывает панель */
  .site-nav__panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: none;
    max-block-size: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 4px var(--gutter) 24px;
    border-block-end: 1px solid var(--line);
    background-color: #fff;
  }

  .site-nav--open .site-nav__panel,
  .no-js .site-nav:focus-within .site-nav__panel {
    display: block;
  }

  .site-nav__list {
    display: block;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .site-nav__link {
    padding: 14px 4px;
    border-block-end: 1px solid var(--line-soft);
    border-radius: 0;
    font-size: 17px;
    white-space: normal;
  }

  .site-nav__item--active > .site-nav__link {
    background-color: transparent;
    box-shadow: none;
    color: var(--blue);
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 20px 0 0;
  }

  .site-header__contact {
    align-items: start;
  }

  .site-header__phone {
    font-size: 18px;
  }

  .site-header__cta {
    display: flex;
    inline-size: 100%;
  }

  .lang-switch__list {
    gap: 8px;
  }

  .lang-switch__link {
    padding: 8px 16px;
    background-color: var(--mist);
  }

  .lang-switch__item--current > .lang-switch__link {
    background-color: var(--sky);
    color: var(--blue);
  }
}

/* «Перезвоните мне» в шапке - только на десктопе (SPEC-REDESIGN 5, 7.2): до 1024 px .site-header__contact живёт в
   панели бургера (W1U-5) - там ссылку прячем; на телефоне звонит панель «Позвонить», «Перезвоните мне» - в блоке
   контактов. Класс .site-header__call не трогать - это иконка звонка W1U-5. */
@media (max-width: 1024px) {
  .site-header a.site-header__callback {
    display: none;
  }
}

/* footer.css */
/* footer.css: подвал B (W1U-6; SPEC-REDESIGN 5): светлый, на тумане. Четыре колонки от 1025 px (бренд и
   реквизиты, меню, контакты, адрес), две на планшете, одна на телефоне; нижний ряд: копирайт, ссылка на политику
   (W2P-11), «Создание сайта»; запас под «наверх» - у последнего в ряду (.site-footer__bottom > :last-child).
   До 1024 px снизу запас под нижнюю панель (--bar-h), иначе она закрывает копирайт. */

.site-footer {
  padding-block: 56px 32px;
  padding-inline: var(--gutter);
  background-color: var(--mist);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.site-footer__inner {
  max-inline-size: var(--container);
  margin-inline: auto;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 32px;
}

.site-footer__logo {
  display: inline-block;
  line-height: 0;
}

.site-footer__logo img {
  display: block;
  inline-size: 137px;
  block-size: auto;
}

.site-footer__slogan {
  margin-block: 12px 16px;
  color: var(--ink);
  font-weight: 600;
}

.site-footer__legal {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list > li + li {
  margin-block-start: 8px;
}

/* подпись над значением контакта: 13 px --muted (5,2:1 на тумане) */
.site-footer__label {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.site-footer__link {
  color: var(--ink);
  text-decoration: none;
}

.site-footer__address {
  margin: 0;
  font-style: normal;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-block-start: 40px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.site-footer__copy {
  margin: 0;
}

/* запас под круглую «наверх» (.bottom-bar__top) - у последнего в ряду: ссылка студии выводится не всегда (D-15) */
.site-footer__bottom > :last-child {
  margin-inline-end: 36px;
}

/* «Создание сайта» (D-15): логотип студии белый - на светлом подвале показываем его тёмным */
.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-decoration: none;
}

.site-footer__credit-logo {
  display: block;
  inline-size: 52px;
  block-size: auto;
  filter: invert(1);
  opacity: .7;
}

@media (hover: hover) {
  .site-footer__link:hover,
  .site-footer__credit:hover {
    color: var(--blue);
  }
}

@media (max-width: 1024px) {
  .site-footer {
    padding-block-end: calc(32px + var(--bar-h));
  }

  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom > :last-child {
    margin-inline-end: 58px;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-block-start: 40px;
  }

  .site-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* bottom-bar.css */
/* bottom-bar.css: нижняя панель B (W1U-7; SPEC-REDESIGN 7.4, b-refine .m-bar и .m-top). Обёртка #bottom-bar -
   без размеров (дети - position: fixed), клики сквозь неё не перехватываются. До 1024 px панель «Позвонить» +
   «Оставить заявку» видна всегда; круглая кнопка «наверх» - после прокрутки (bottom-bar--scrolled), над панелью. */

.bottom-bar__top {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: var(--z-bar);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-round);
  background-color: #fff;
  box-shadow: var(--shadow-top);
  color: var(--ink);
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s linear var(--t-base);
}

.bottom-bar--scrolled .bottom-bar__top {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s;
}

@media (hover: hover) {
  .bottom-bar__top:hover {
    color: var(--blue);
  }
}

/* панель кнопок - только до 1024 px */
.bottom-bar__panel {
  display: none;
}

@media (max-width: 1024px) {
  .bottom-bar__top {
    inset-block-end: calc(var(--bar-h) + 10px);
    inset-inline-end: 14px;
  }

  .bottom-bar__panel {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-bar);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 10px;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--line-soft);
    background-color: var(--bar-bg);
  }

  .bottom-bar__btn {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-bar__top,
  .bottom-bar--scrolled .bottom-bar__top {
    transition: none;
  }
}

/* dialog.css */
/* dialog.css: диалоги B (W1U-8; SPEC-REDESIGN 4.3, b-refine .m-dlg): #zapros и «Перезвоните мне» #perezvon
   (модификатор dialog--small). Сам <dialog> - затемнение во весь экран (фон на элементе, а не на ::backdrop:
   ::backdrop в старых браузерах не наследует переменные), окно - белое, радиус 26, тень диалога; на телефоне -
   лист снизу. Разметка - _dialog.html, _dialog_callback.html. */

.dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 24px;
  border: 0;
  background: var(--overlay);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialog[open] {
  display: flex;
}

.dialog::backdrop {
  background: transparent;
}

.dialog__window {
  position: relative;
  box-sizing: border-box;
  inline-size: 600px;
  max-inline-size: 100%;
  margin: auto;
  padding: 32px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--shadow-dialog);
}

/* маленький диалог («Перезвоните мне», волна 3) */
.dialog--small .dialog__window {
  inline-size: 420px;
}

/* крестик - круглая кнопка на тумане у конечного края */
.dialog__close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background-color: var(--mist);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.dialog__title {
  margin: 0 0 16px;
  padding-inline-end: 48px;
  font-size: 26px;
}

@media (hover: hover) {
  .dialog__close:hover {
    color: var(--blue);
  }
}

/* телефон: лист снизу во всю ширину, скругление только сверху */
@media (max-width: 767px) {
  .dialog {
    padding: 0;
  }

  .dialog__window,
  .dialog--small .dialog__window {
    inline-size: 100%;
    margin: auto 0 0;
    padding: 20px 16px 18px;
    border-radius: 26px 26px 0 0;
  }

  .dialog__title {
    font-size: 22px;
  }
}

/* Подзаголовок диалога сразу под заголовком (SPEC-REDESIGN 7.1; #zapros - form.subtitle, #perezvon - callback.subtitle).
   b-refine .m-dlg: 4 px от заголовка, 14 px до полей; нижний отступ заголовка W1U-8 (16 px) гасится сдвигом -12 px. */
.dialog__subtitle {
  margin: -12px 0 14px;
  padding-inline-end: 48px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* form.css */
/* form.css: форма заявки B (W1U-8; SPEC-REDESIGN 4.3, b-refine .fld): поля на тумане без рамки, радиус 14;
   фокус - рамка --blue и мягкое кольцо --focus-halo; ошибка - рамка --error и подсказка; кнопка - синяя таблетка.
   Разметка - _form.html, макрос lead_form.
   Классы состояний ставит form.js: lead-form__field--invalid, lead-form__status--success | --error. */

.lead-form {
  margin: 0;
  color: var(--text);
}

/* встроенная форма: белая карточка, рамка --line, без тени (тени - только у перечисленного в SPEC 4.3) */
.lead-form--embedded {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: #fff;
}

.lead-form__head {
  margin-block-end: 20px;
}

.lead-form__title {
  color: var(--ink);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
}

.lead-form__subtitle {
  margin-block-start: 4px;
  font-size: 15px;
}

/* «Перезвоните мне» под заголовком формы /kontakty/ (Д2 W7-10): кнопка .btn--soft, 44 px. От 1025 px блок контактов
   со ссылкой - колонкой рядом с формой (и ссылка в шапке от ~1240 px): кнопку не показываем */
.lead-form__callback {
  margin-block-start: 12px;
}

@media (min-width: 1025px) {
  .lead-form__callback {
    display: none;
  }
}

/* сетка: две колонки (половинные поля рядом), на телефоне одна; зазоры 12 и 10 */
.lead-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
}

.lead-form__field--full {
  grid-column: 1 / -1;
}

.lead-form__label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.lead-form__req {
  padding-inline-start: .15em;
  color: var(--error);
}

.lead-form__input {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 11px 13px;
  border: 1.5px solid transparent;
  border-radius: var(--r-field);
  background-color: var(--mist);
  color: var(--ink);
  font-size: 16px; /* не мельче 16: iOS Safari иначе увеличивает страницу при фокусе */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}

.lead-form__textarea {
  min-block-size: 96px;
  resize: vertical;
}

.lead-form__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* фокус поля: рамка --blue (5,5:1 к туману) вместо общего контура + декоративное кольцо (SPEC 4.3) */
.lead-form__input:focus {
  outline: none;
  border-color: var(--blue);
  background-color: #fff;
  box-shadow: 0 0 0 3px var(--focus-halo);
}

.lead-form__field--invalid .lead-form__input {
  border-color: var(--error);
  background-color: var(--error-tint);
}

.lead-form__field--invalid .lead-form__input:focus {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.lead-form__error {
  margin: 0;
  color: var(--error);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ловушка для ботов: не видна и не отрисовывается */
.lead-form__trap {
  display: none;
}

/* строка согласия под кнопкой (SPEC 7.3) */
.lead-form__consent {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.lead-form__submit {
  grid-column: 1 / -1;
  margin-block-start: 4px;
}

.lead-form__submit[aria-busy="true"] {
  cursor: progress;
}

.lead-form__status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.lead-form__status--success {
  color: var(--ink);
}

.lead-form__status--error {
  color: var(--error);
}

/* С11: form.js прокручивает сообщение к низу окна над панелью; запас под кнопку «наверх» (bottom-bar.css: 44 px,
   на 10 px выше панели) - низ сообщения на 8 px выше неё */
@media (max-width: 1024px) {
  .lead-form__status {
    scroll-margin-block-end: 54px;
  }
}

/* прямые контакты вместо формы (L.forms_enabled = false, сейчас uz/fa): у строк контактов стилей нет -
   стилизовать до включения uz/fa */
.lead-form__contacts > .lead-form__title {
  margin-block-end: 16px;
}

@media (max-width: 767px) {
  .lead-form--embedded {
    padding: 20px 16px;
  }

  /* все поля во всю ширину: подсказки видны целиком (Рустем 12.10) */
  .lead-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* lightbox.css */
/* lightbox.css: W1-D, лайтбокс #lightbox (.lightbox, ::backdrop): картинка, счётчик, листание, закрытие -
   MIGRATION-SPEC 6.5; цвета B (W1U-8): фон --ink 92%, значки белые. Раскладка прежняя. */

/* Сам <dialog> - тёмный фон во весь экран, картинка по центру. Фон на элементе, а не на ::backdrop:
   ::backdrop в старых браузерах не наследует переменные. Клик по фону (цель - сам <dialog>) закрывает. */
.lightbox {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 56px 64px;
  border: 0;
  background: var(--lightbox-bg);
  color: #fff;
  overflow: hidden;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Картинка целиком в экране: поля 64px под стрелки, 56px сверху и снизу под счётчик и крестик */
.lightbox__img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: calc(100vw - 128px);
  max-block-size: calc(100vh - 112px);
  max-block-size: calc(100dvh - 112px);
  border-radius: var(--r-img);
  object-fit: contain;
}

.lightbox__counter {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-base);
}

.lightbox__btn[hidden] {
  display: none;
}

.lightbox__btn--close {
  inset-block-start: 4px;
  inset-inline-end: 8px;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  inset-block-start: 50%;
  margin-block-start: -24px;
}

.lightbox__btn--prev {
  inset-inline-start: 8px;
}

.lightbox__btn--next {
  inset-inline-end: 8px;
}

.lightbox :focus-visible {
  outline-color: #fff;
}

@media (hover: hover) {
  .lightbox__btn:hover {
    color: var(--sky);
  }
}

@media (max-width: 767px) {
  .lightbox {
    padding: 56px 16px;
  }

  .lightbox__img {
    max-inline-size: calc(100vw - 32px);
  }

  /* на телефоне стрелки лежат поверх картинки - подложка для контраста */
  .lightbox__btn--prev,
  .lightbox__btn--next {
    background: var(--lightbox-btn-bg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__btn {
    transition: none;
  }
}

/* process.css */
/* process.css: W2P-4, живая схема производства (partials/_process.html), ролик и полоса фото (partials/_video.html).
   «Загорание» - только при классе .process--live (ставит static/js/process.js): шаг приглушён, пока не попал в экран,
   обводка иконки прорисовывается (у каждого элемента иконки шага pathLength="1" - тест W2P-1). Без JS и при reduced motion всё видно сразу. */

.process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: center;
  column-gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: #fff;
  transition: opacity .5s ease, transform .5s ease;
}

.process__step--hl {
  border-color: var(--sky);
  background-color: var(--sky);
}

.process__icon {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--r-round);
  background-color: var(--mist);
  color: var(--blue);
  font-size: 48px;
}

.process__step--hl .process__icon {
  background-color: #fff;
}

.process__num {
  align-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.process__title {
  align-self: start;
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.process__text {
  grid-column: 1 / -1;
  margin: 12px 0 0;
}

.process__badge {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 10px 0 0;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background-color: var(--apricot-tint);
  color: var(--apricot-ink);
  font-size: 13px;
  font-weight: 600;
}

.process__note {
  margin: 20px 0 0;
  color: var(--ink);
  font-weight: 600;
}

.process--live .process__step:not(.is-lit) {
  opacity: .35;
  transform: translateY(12px);
}

/* элементы иконки - по типу, не по [pathLength]: Chrome не пересчитывает стиль SVG по селектору атрибута с заглавной
   буквой, когда класс .process--live ставится скриптом (проверено 09.10.2026, Chromium Playwright 1.63) */
.process--live .process__icon :is(path, circle, rect, line, polyline, polygon, ellipse) {
  stroke-dasharray: 1 2; /* пробел 2, не 1: при 1 у ещё не прорисованной иконки на концах дуг - точки (DPR 2-3) */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s ease .15s;
}

.process--live .process__step.is-lit .process__icon :is(path, circle, rect, line, polyline, polygon, ellipse) {
  stroke-dashoffset: 0;
}

/* ---------------------------------------------------------------- ролик и полоса фото */
.video {
  margin: 0;
}

.video__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-img);
  background-color: var(--ink);
}

.video__media {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background-color: #fff;
  color: var(--blue);
  font-size: 32px;
  cursor: pointer;
}

.video__play:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -7px; /* спека 4.3: 2px; кольцо внутри кнопки - от заставки не зависит */
}

/* свой контур ролика срезает overflow рамки - контур рисует рамка */
.video__frame:has(> .video__media:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.video__caption {
  margin-block-start: 10px;
  color: var(--muted);
  font-size: 14px;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.photo-strip__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-img);
}

@media (max-width: 1024px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .process__step,
  .process__icon :is(path, circle, rect, line, polyline, polygon, ellipse) {
    transition: none;
  }
}

/* W4-6: родная оболочка ролика скрыта, пока видна наша .video__play: иначе над кнопкой видна дуга - в первые секунды
   на странице это родной индикатор загрузки, на Android ещё и родная кнопка play. После запуска правило снимается
   вместе с кнопкой - родные controls на месте; без JS кнопки нет, controls видны. На весь экран правило не действует:
   нашей кнопки там не видно, а в конце ролика (кнопка снова показана) нужны родные controls */
.video__frame:has(> .video__play:not([hidden])) .video__media:not(:fullscreen)::-webkit-media-controls {
  display: none;
}

/* blocks.css */
/* blocks.css: W2P-5, общие блоки страниц волны 2 - «под заказ», клиенты, страны, контакты, полоса заявки, карточки
   статей (partials/_clients.html, _countries.html, _contacts_block.html, _request_strip.html, _articles_latest.html).
   Цвета - токены tokens.css; кнопки, плашки (.chip), метки (.tag), раскладка (.section, .container) - компоненты
   волны 1. Тени - только у перечисленного в спеке 4.3, здесь их нет. */

/* «Другой диаметр - под заказ» (главная и продукция) */
.custom-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-block-start: 26px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: #fff;
}

.custom-order__text {
  flex: 1 1 320px;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

/* клиенты: сетка 5, на телефоне 2; логотип или название одной высоты */
.clients {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clients__item {
  display: grid;
  place-items: center;
  min-block-size: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  background-color: #fff;
  text-align: center;
}

.clients__logo {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 36px;
  object-fit: contain;
}

.clients__name {
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}

/* страны поставок - плашки */
.countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* контакты: подпись над значением */
.contacts-block {
  display: grid;
  gap: 18px;
  margin: 0;
}

.contacts-block__label {
  margin-block-end: 2px;
  color: var(--muted);
  font-size: 14px;
}

.contacts-block__value {
  margin: 0;
  color: var(--ink);
}

.contacts-block__phone {
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

.contacts-block__maps {
  margin: 10px 0 0;
}

/* полоса заявки: текст и кнопка; с формой - две колонки от 1025 px */
.request-strip__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}

.request-strip__title {
  margin: 0 0 8px;
}

.request-strip__lead {
  margin: 0 0 20px;
}

.request-strip--form .request-strip__lead {
  margin-block-end: 0;
}

/* статьи: блок «последние / по теме» и карточка */
.posts-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  max-inline-size: none; /* у .section__head - 760px */
}

.posts-block__head > h2 {
  margin-block-end: 0;
}

.posts-block__more {
  font-weight: 600;
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: #fff;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
}

.post-card__date {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.post-card__title {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.35;
}

.post-card__link {
  color: var(--ink);
  text-decoration: none;
}

.post-card__link:hover,
.post-card__link:focus-visible {
  color: var(--blue);
}

.post-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.post-card__media {
  display: block;
  margin-block-end: 16px;
}

.post-card__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--r-img);
}

@media (min-width: 1025px) {
  .request-strip--form .request-strip__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 1024px) {
  .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .clients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .posts {
    grid-template-columns: minmax(0, 1fr);
  }

  .custom-order {
    padding: 18px 16px;
  }
}

/* page-home.css */
/* page-home.css: W2P-6, главная RU и EN (templates/pages/home.html, спека 6.1). Сцена первого экрана - по b-refine
   (.stage/.disc/.card/.pin), перенесена НЕ буквально: только логические свойства и токены (грабли 7, 31 handoff v3).
   Телефон: H1 -> сцена с двумя метками -> лид и одна кнопка (спека 6.1 п.1). Общие блоки - blocks.css, process.css. */

/* ---------------------------------------------------------------- первый экран */
.hero {
  padding-block: 40px 66px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  grid-template-areas: "title stage" "body stage";
  column-gap: 24px;
  align-items: center;
}

.hero__title {
  grid-area: title;
  align-self: end;
  margin: 0 0 18px;
}

.hero__body {
  grid-area: body;
  align-self: start;
}

.hero__lead {
  max-inline-size: 32em;
  margin: 0 0 28px;
}

/* сцена: квадрат с мягким кругом --sky, белая карточка с рендером, три метки */
.hero__stage {
  position: relative;
  grid-area: stage;
  inline-size: min(100%, 470px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.hero__disc {
  position: absolute;
  inset: 0;
  border-radius: var(--r-round);
  background: radial-gradient(circle at 42% 36%, var(--scene-hi) 0, var(--sky) 58%, var(--scene-lo) 100%);
}

/* одна ячейка во всю карточку: строка не растёт по картинке. Рендер без полей от верхнего левого угла: срез кадра -
   край карточки, она режет кольцо (Рустем 12.10) */
.hero__card {
  position: absolute;
  inset-inline: 13%;
  inset-block: 19% 11%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--r-card);
  background-color: #fff;
  box-shadow: var(--shadow-scene);
}

.hero__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: 0 0; /* rtl-ok: рендер не зеркалится, кольцо уходит из кадра вверх и влево */
}

.hero__pin {
  position: absolute;
  white-space: nowrap;
}

.hero__pin--d1 {
  inset-block-start: 2%; /* при 7% метки 1 и 2 налезали (тексты спеки длиннее b-refine) */
  inset-inline-start: 0;
}

.hero__pin--d2 {
  inset-block-start: 13%;
  inset-inline-end: 0;
}

.hero__pin--d3 {
  inset-block-end: 3%;
  inset-inline-start: 20%;
}

.hero__pin--m1,
.hero__pin--m2 {
  display: none;
}

/* ---------------------------------------------------------------- кольца */
.home-rings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* ---------------------------------------------------------------- производство: ролик под схемой, не шире 880 px */
.home-process__video {
  max-inline-size: 880px;
  margin-block-start: 32px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- преимущества: светлый блок без теней */
.advantages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advantages__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-start: 16px;
  border-block-start: 3px solid var(--apricot);
}

.advantages__title {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.advantages__text {
  color: var(--muted);
}

/* ---------------------------------------------------------------- партнёры и страны */
.home-partners__geo {
  margin: 32px 0 14px;
}

/* ---------------------------------------------------------------- о компании коротко */
.about-short__text {
  max-inline-size: 760px; /* у текста: на .container (margin-inline: auto) блок уезжал к центру */
  margin: 12px 0 22px;
}

/* ---------------------------------------------------------------- контакты и форма */
.home-contacts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "stage" "body";
  }

  .hero__title {
    margin-block-end: 20px;
  }

  .hero__stage {
    margin-block-end: 24px;
  }

  .advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-contacts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* телефон: сцена - скруглённый прямоугольник 230 px (b-refine .m-stage), две метки, одна кнопка */
@media (max-width: 767px) {
  .hero {
    padding-block: 20px 40px;
  }

  .hero__title {
    margin-block-end: 14px;
  }

  .hero__stage {
    inline-size: 100%;
    max-inline-size: 398px; /* 430 - 2 x 16: телефоны до 430 px не меняются */
    aspect-ratio: auto;
    margin-inline: auto;
    block-size: 230px;
    margin-block-end: 16px;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient(circle at 42% 36%, var(--scene-hi) 0, var(--sky) 62%, var(--scene-lo) 100%);
  }

  .hero__disc,
  .hero__pin--d1,
  .hero__pin--d2,
  .hero__pin--d3,
  .hero__price {
    display: none;
  }

  /* рендер 230 x 230 от верхнего левого угла сцены, сцена режет кольцо своим радиусом */
  .hero__card {
    inset: 0;
    background: none;
    box-shadow: none;
  }

  .hero__pin--m1,
  .hero__pin--m2 {
    display: inline-flex;
  }

  .hero__pin--m1 {
    inset-block-start: 14px;
    inset-inline-start: 12px;
  }

  .hero__pin--m2 {
    inset-block-end: 16px;
    inset-inline-end: 12px;
  }

  .hero__actions .btn {
    inline-size: 100%;
  }

  .home-rings__grid,
  .advantages {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* page-catalog.css */
/* page-catalog.css: W2P-7, «Продукция» RU и EN (templates/pages/catalog.html, спека 6.2) и вариант карточки
   .ring-card--catalog (макрос ring_card в components/_macros.html). Базовая карточка .ring-card*, плашки .chips -
   компоненты волны 1; «под заказ», страны, статьи, полоса заявки - blocks.css. */

.catalog__head {
  max-inline-size: 820px;
}

.catalog__intro {
  margin: 12px 0 0;
}

.catalog__cards {
  display: grid;
  gap: 22px;
  margin-block-start: 28px;
}

/* раскладка - базовая .ring-card; медиа по содержимому: картинка 300 x 240 + 12 + силуэт 58 + 16 = 326 px */
.ring-card--catalog .ring-card__media {
  gap: 12px;
  padding-block-end: var(--sp-16);
}

.ring-card__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ring-cut);
}

.ring-card__profile-svg {
  inline-size: 47px;
  block-size: 58px;
}

.ring-card__profile-caption {
  color: var(--muted);
  font-size: 13px;
}

.ring-card__material {
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 500;
}

/* «Поставка»: текст и страны; фото мешков - справа, когда появится */
.delivery__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

.delivery__lead {
  margin: 12px 0 16px;
  max-inline-size: 640px;
}

.delivery__img {
  display: block;
  inline-size: min(100%, 480px);
  block-size: auto;
  border-radius: var(--r-img);
}

@media (max-width: 767px) {
  .ring-card--catalog {
    gap: 18px;
  }

  .delivery__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* page-about.css */
/* page-about.css: W2P-8, «О компании» RU и EN (templates/pages/about.html, спека 6.3). Ролик - process.css, клиенты и
   полоса заявки - blocks.css, лайтбокс - lightbox.css. Тени нет ни у чего (спека 4.3). */

.about-who__title {
  max-inline-size: 900px;
  margin: 0 0 28px;
}

.about-who__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}

.about-who__text h2 {
  margin: 0 0 12px;
}

.about-who__text p {
  margin: 0 0 14px;
}

/* «Наш цех»: сетка кадров с подписями шагов, по клику - лайтбокс */
.workshop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workshop__figure {
  margin: 0;
}

.workshop__link {
  display: block;
  border-radius: var(--r-img);
}

.workshop__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-img);
}

.workshop__caption {
  margin-block-start: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

/* 4 факта: светлые карточки без теней */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts__item {
  padding: 22px;
  border-radius: var(--r-card);
  background-color: var(--sky);
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.facts__note {
  margin: 20px 0 0;
  color: var(--ink);
  font-weight: 600;
}

/* реквизиты */
.requisites {
  display: grid;
  gap: 12px;
  margin: 0;
}

.requisites__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
}

.requisites__row dt {
  color: var(--muted);
}

.requisites__row dd {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 1024px) {
  .about-who__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .workshop,
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .requisites__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* page-contacts.css */
/* page-contacts.css: W2P-10, «Контакты» RU и EN (templates/pages/contacts.html, спека 6.4): две колонки - контакты и
   форма #forma; блок контактов - blocks.css (.contacts-block), форма - form.css. */

.contacts-page__title {
  margin: 0 0 28px;
}

.contacts-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 1024px) {
  .contacts-page__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* page-legal.css */
/* page-legal.css: W2P-11, политика конфиденциальности RU и EN (templates/pages/legal.html, спека 6.5): колонка текста. */

.legal__inner {
  max-inline-size: 760px;
}

.legal__title {
  margin: 0 0 12px;
}

.legal__version {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.legal__section {
  margin-block-start: 28px;
}

.legal__section h2 {
  margin: 0 0 10px;
  font-size: 23px;
}

.legal__section p {
  margin: 0 0 12px;
}

.legal__operator {
  padding: 20px 24px;
  border-radius: 26px;
  background-color: var(--mist);
}

.legal__operator p:last-child {
  margin-block-end: 0;
}

@media (max-width: 767px) {
  /* «конфиденциальности» в 28 px шире поля 288 px на 320: 27,2 px на 320, 28 px от 330 */
  .legal__title {
    font-size: min(28px, 8.5vw);
  }

  .legal__operator {
    padding: 16px;
  }
}

/* page-blog.css */
/* page-blog.css: W2P-12, блог, рубрика, статья, крошки (templates/pages/blog.html, category.html, article.html,
   partials/_breadcrumbs.html; спека 6.6). Карточка статьи (.post-card), блок «по теме» и полоса заявки - blocks.css. */

.blog-page__title {
  margin: 8px 0 12px;
}

.blog-page__intro {
  max-inline-size: 760px;
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------- крошки */
.breadcrumbs {
  margin-block-end: 8px;
  color: var(--muted);
  font-size: 14px;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
}

.breadcrumbs__item:last-child {
  max-inline-size: 100%;
}

.breadcrumbs__sep {
  margin-inline: 8px;
  font-size: 9px;
}

.breadcrumbs__link {
  color: var(--text);
  text-decoration: none;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--blue);
}

.breadcrumbs__current {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- плашки рубрик */
.rubric-chips {
  margin-block-end: 24px;
}

.rubric-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rubric-chips__link {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: var(--mist);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.rubric-chips__link[aria-current="page"] {
  background-color: var(--blue);
  color: #fff;
}

.rubric-chips__link:not([aria-current]):hover {
  color: var(--blue);
}

/* ---------------------------------------------------------------- лента: обложка слева, крупная дата */
.post-list {
  display: grid;
  gap: 20px;
}

.post-list .post-card--cover {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.post-list .post-card__media {
  margin: 0;
}

.post-list .post-card__date {
  font-size: 22px;
}

.post-list .post-card__title {
  font-size: 23px;
}

/* ---------------------------------------------------------------- статья */
.article__inner {
  max-inline-size: 820px;
}

.article__title {
  margin: 8px 0 12px;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}

/* рубрика-ссылка - синяя (5,48:1 на --mist); плашка-span .tag остаётся --muted */
a.article__rubric {
  color: var(--blue);
  text-decoration: none;
}

a.article__rubric:hover {
  color: var(--blue-ink);
}

/* «Ещё по теме» - вторая белая секция сразу за статьёй: верхний отступ не удваивается */
.article + .posts-block {
  padding-block-start: 0;
}

.article-body h2 {
  margin: 28px 0 12px;
  font-size: clamp(22px, 5vw, 28px);
}

.article-body h3 {
  margin: 20px 0 10px;
}

.article-body p {
  margin: 0 0 14px;
}

.article-body ol,
.article-body ul {
  margin: 0 0 14px;
  padding-inline-start: 28px;
}

.key-answer {
  padding: 18px 20px;
  border-radius: 18px;
  background-color: var(--mist);
}

.key-answer__label {
  color: var(--ink);
}

.article-body table {
  inline-size: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: 14px;
}

.article-body th,
.article-body td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.article-body thead th {
  background-color: var(--mist);
  color: var(--ink);
}

.article-faq__item {
  border-block-end: 1px solid var(--line);
}

@media (max-width: 767px) {
  .post-list .post-card--cover {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-body th,
  .article-body td {
    padding: 6px;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: normal; /* не anywhere: рвёт номера стандартов */
  }
}

/* page-404.css */
/* page-404.css: W2P-13, страница 404 RU и EN (templates/pages/404.html, спека 6.7): по центру, H1, подсказка, три
   ссылки-кнопки; на телефоне кнопки во всю ширину. */

.error-page__inner {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 40px;
  text-align: center;
}

.error-page__title {
  margin: 0;
}

.error-page__help {
  margin: 0;
}

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) {
  .error-page__links {
    flex-direction: column;
    justify-self: stretch;
  }

  .error-page__links .btn {
    inline-size: 100%;
  }
}