/* ============================================================
   Development Studio — восемь экранов
   Префикс .wd-*

   Страница сверстана по PNG-макетам сентября (архив
   Development_Studio.zip). Шкала та же, что у SEO Studio, —
   сентябрьская --fs-home-*: замер по макетам даёт H1 48/48,
   заголовок экрана 32 (в две строки) и 42 (во всю ширину),
   лид 16/18, карточки 22/14 с межстрочным 1.07-1.1.
   ============================================================ */

/* ---------- Общий каркас экранов ---------- */

/* Две колонки: слева текст, справа панель. Замер макета: панель
   занимает 750..1350 при содержимом 90..1350, то есть правая колонка
   600, зазор 24, левая 636 — половина с небольшим. */
.wd-two {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.67vw, 28px);
  width: 100%;
}
.wd-left {
  width: 50.5%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.wd-right { flex: 1; min-width: 0; }

/* Экраны во всю ширину: заголовок сверху, содержимое под ним. */
.wd-wide {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: clamp(20px, 2.4vw, 42px);
}

/* Экран 3 отбит шире остальных: в макете от заголовка до ряда
   карточек 59, от ряда до плашки 61 (у экрана 2 на том же месте 34,
   поэтому значение не общее). */
#wd-arch .wd-wide { gap: clamp(28px, 4.1vw, 70px); }

/* ---------- Типографика страницы ---------- */

/* Межстрочное ровно кегль — так во всех макетах этой страницы.
   Общесайтовые 1.35/1.4 здесь дали бы лишнюю строку. */
.wd-h1 {
  font-size: var(--fs-home-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.wd-h2 {
  font-size: var(--fs-home-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-h2-wide {
  font-size: var(--fs-home-h2-wide);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Лид в макетах не приглушён: на экранах 1, 5, 6 и 8 он ровно
   232,237,247. С половиной --text он читался вдвое тусклее. */
.wd-lead {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-badge { font-size: var(--fs-home-micro); }

/* Плашка над заголовком и отступ от неё до заголовка — 12 в макете. */
.wd-left .wd-badge,
.wd-wide .wd-badge { margin-bottom: clamp(8px, 0.83vw, 14px); }

/* ---------- Панели ---------- */

/* Общий вид панели: у всех экранов он один, отличается наполнение. */
.wd-panel {
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
}

/* ============================================================
   ЭКРАН 1 — Позиционирование
   ============================================================ */

/* 56ch, а не 42: в макетах строка лида доходит до 585, а с 42 она
   обрывалась на 488 и текст уходил лишней строкой ниже — видно на
   экранах 1 и 8. */
.wd-hero-lead {
  margin-top: clamp(14px, 1.6vw, 28px);
  max-width: 56ch;
}

/* Две кнопки в ряд, под каждой своя подпись. */
.wd-hero-btns {
  display: flex;
  gap: clamp(10px, 1.1vw, 19px);
  margin-top: clamp(20px, 2.3vw, 40px);
}
.wd-hero-btn-col {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 12px);
}
.wd-hero-btns .btn {
  height: clamp(38px, 3.1vw, 53px);
  font-size: var(--fs-seo-cta);
  padding: 0 clamp(16px, 1.7vw, 29px);
}
.wd-hero-btn-col .caption { font-size: var(--fs-home-micro); }

/* Панель сценариев: полоса табов, под ней шапка и поток шагов.
   В макете она темнее прочих и без рамки — см. --panel-window;
   остальные панели страницы остаются карточными. */
/* Высоту панели ставит в пикселях fitFlowHeight — по активной
   вкладке, как в макете. Переход, чтобы смена вкладки читалась как
   движение; overflow держит содержимое внутри, пока высота едет. */
.wd-hero-panel {
  overflow: hidden;
  border: none;
  background-color: var(--panel-window);
  transition: height 0.4s var(--ease-out);
}

/* Линия под полосой табов в макете даёт ровно 52,61,79 — это
   поверхность без прозрачности (--track), а не приглушённый текст:
   у --text-12 синевы меньше. Вертикальных разделителей между табами
   в макете нет вовсе — табы разделяет только заливка активного.

   Линия висит на самих табах, а не на полосе: у активного таба она
   акцентная и должна заменять серую, а не лежать над ней. */
.wd-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* Полоса табов в макете 29 при 1440 — отсюда и вертикальные отбивки. */
.wd-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(4px, 0.48vw, 8px) 8px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--track);
  font-family: inherit;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.wd-tab:hover { color: var(--text-50); }
/* Активный таб — закладка: заливка акцентом 15% (не 50% — в макете
   это ровно 30,36,64), скруглённые верхние углы, акцентная линия по
   НИЖНЕЙ кромке. Надпись и знак тоже акцентные, а не белые. */
.wd-tab.active {
  background: var(--accent-15);
  color: var(--accent);
  border-radius: 5px 5px 0 0;
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -0.5px 0 var(--accent);
}
.wd-tab svg {
  width: calc(var(--fs-home-micro) * 1.1);
  height: calc(var(--fs-home-micro) * 1.1);
  flex-shrink: 0;
}

/* Отбивка панели в макете 24 при 1440 — по всем четырём сторонам:
   от кромки панели до кромки карточки шага ровно столько же, сколько
   от итоговой карточки до низа панели.

   Тон шага объявлен здесь, а не на .wd-step: те же переменные нужны
   иконке итоговой карточки, а она шагом не является — без общего
   предка её кольцо оставалось без цвета. */
.wd-flow-body {
  padding: clamp(15px, 1.67vw, 28px);
  --tone: var(--accent);
  --tone-50: var(--accent-50);
  --tone-15: var(--accent-15);
}

.wd-flow-title {
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-flow-sub {
  margin-top: 2px;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* В макете это ровно 126,130,138, то есть половина --text: с 30%
     подзаголовок читался заметно тусклее. */
  color: var(--text-50);
}

/* Поток шагов: две колонки, шаги выкладываются змейкой. Позиции
   ставит renderFlow — в разметке их нет, потому что число шагов у
   сценариев разное.

   Зазоры сняты с макета: колонки 29, ряды 24 при 1440. Карточка шага
   при этом выходит 262 — в неё влезает и самая длинная подпись
   («Обязательные поля заполнены корректно.») одной строкой.
   Связи в зазоре не рисуются CSS: у них нужны наконечники, поэтому
   поверх потока лежит SVG-слой (renderFlowLinks в webdev.js). */
.wd-flow {
  position: relative;
  margin-top: clamp(15px, 1.67vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(15px, 1.67vw, 28px) clamp(18px, 2.01vw, 34px);
}

/* Слой связей: строго над сеткой, кликов не ловит. */
.wd-flow-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.wd-flow-links .wd-link {
  fill: none;
  stroke: var(--accent-50);
  stroke-width: 1;
  /* Штрих 2.5 при пропуске 1.5 — замер макета. */
  stroke-dasharray: 2.5 1.5;
}
.wd-flow-links .wd-link-head { fill: var(--accent); stroke: none; }

/* Тон шага. По умолчанию акцентный (объявлен на .wd-flow-body выше);
   у шага с состоянием — свой. Одним набором переменных, потому что от
   тона зависят сразу три места: заливка кружка, его кольцо и глиф с
   текстом плашки. */
.wd-step[data-tone="warn"] {
  --tone: var(--tone-warn);
  --tone-50: var(--tone-warn-50);
  --tone-15: var(--tone-warn-15);
}
.wd-step[data-tone="ok"] {
  --tone: var(--tone-ok);
  --tone-50: var(--tone-ok-50);
  --tone-15: var(--tone-ok-15);
}

/* Карточка шага: своей заливки нет — фон панели просвечивает, — а
   рамка акцентная. Была серая --text-12 на подложке --surface-15,
   из-за этого весь поток читался тусклее макета. */
.wd-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(9px, 0.9vw, 15px);
  /* Отбивка 11.5 при 1440: карточка в макете 52 в высоту, кружок
     иконки 27, значит на поля остаётся ровно (52 − 27 − 2) / 2. */
  padding: clamp(8px, 0.8vw, 13px);
  border-radius: 10px;
  border: 1px solid var(--accent-50);
  background: transparent;
}
/* Кружок, а не квадрат со скруглением: в макете иконка шага в круге
   27px — заливка тоном 15%, кольцо 50%, глиф без прозрачности. */
.wd-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(20px, 1.88vw, 32px);
  height: clamp(20px, 1.88vw, 32px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--tone-50);
  background: var(--tone-15);
  color: var(--tone);
}
.wd-step-icon svg {
  width: 56%;
  height: 56%;
}
.wd-step-body { min-width: 0; flex: 1; }
/* Плашка состояния уходит к правому краю карточки — так в макете, она
   не примыкает к имени. */
.wd-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wd-step-name {
  font-size: var(--fs-home-micro);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Плашка состояния — пилюля в тон шага: заливка 15%, кольцо 50%,
   надпись без прозрачности. В макете бокс «Недоступен» 52 × 13 при
   1440, а сами чернила надписи 34 — отсюда и кегль 6.5, и поля. */
.wd-step-state {
  padding: 1.5px 7px;
  border-radius: 999px;
  border: 1px solid var(--tone-50);
  background: var(--tone-15);
  font-size: clamp(6px, 0.45vw, 9px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tone);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Отбивка 3, а не 4: в макете имя и подпись укладываются ровно в
   высоту кружка, иначе карточка выше макетной. Цвет — половина
   --text: с 30% подпись читалась заметно тусклее. */
.wd-step-text {
  margin-top: 3px;
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Итоговая карточка сценария: во всю ширину, с акцентной заливкой.
   Заливка плоская — в макете это ровно accent 15%, а не градиент.
   Отбивки и кегли те же, что у шага: в макете она такой же высоты
   (52) и с тем же кружком, отличается только заливкой. */
.wd-flow-result {
  margin-top: clamp(15px, 1.67vw, 28px);
  display: flex;
  align-items: center;
  gap: clamp(9px, 0.9vw, 15px);
  padding: clamp(8px, 0.8vw, 13px);
  border-radius: 10px;
  border: 1px solid var(--accent-50);
  background: var(--accent-15);
}
/* У итоговой карточки знак без кружка: в макете это сам глиф во всю
   отведённую клетку (27), акцентный и без заливки с кольцом — кружки
   остаются только у шагов. Подпись здесь тоже не приглушена. */
.wd-flow-result .wd-step-icon {
  border: none;
  background: none;
  color: var(--accent);
}
.wd-flow-result .wd-step-icon svg { width: 100%; height: 100%; }
.wd-flow-result .wd-step-text { color: var(--text); }

/* ============================================================
   ЭКРАН 2 — Когда к задаче подключается Development Studio
   ============================================================ */

/* Шапка экрана: заголовок слева, лид справа — так в макете, лид не
   под заголовком. */
.wd-cases-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 52px);
}
.wd-cases-head-left { width: 52%; flex-shrink: 0; display: flex; flex-direction: column; }
.wd-cases-head-lead { flex: 1; min-width: 0; padding-top: clamp(6px, 0.7vw, 12px); }

/* Ряд: список ситуаций и карточка. Доли из макета — 378 и 866. */
.wd-cases-row {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.7vw, 29px);
}
.wd-picker {
  width: 30%;
  flex-shrink: 0;
  padding: clamp(12px, 1.4vw, 24px) 0;
}
/* Подсказка под колодой форматов — только на мобильном (см. медиа). */
.wd-deck-hint { display: none; }

.wd-picker-title {
  padding: 0 clamp(14px, 1.6vw, 27px);
  font-size: var(--fs-home-micro);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text);
}
.wd-picker-list {
  margin-top: clamp(12px, 1.4vw, 24px);
  padding-top: clamp(12px, 1.4vw, 24px);
  border-top: 0.5px solid var(--text-12);
  display: flex;
  flex-direction: column;
}
.wd-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(8px, 0.9vw, 15px) clamp(14px, 1.6vw, 27px);
  background: transparent;
  border: none;
  /* Полоса слева появляется у активного. Держим её всегда, чтобы
     текст не сдвигался при переключении. */
  border-left: 2px solid transparent;
  font-family: inherit;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wd-picker-item:hover { color: var(--text-50); }
.wd-picker-item.active {
  border-left-color: var(--accent);
  background: var(--accent-50);
  color: var(--text);
}

/* Карточка ситуации и кнопка под ней. */
.wd-case-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.7vw, 29px);
}
.wd-case { padding: clamp(14px, 1.7vw, 29px); }
.wd-case-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-50);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-case-title {
  margin-top: clamp(8px, 0.9vw, 15px);
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-case-text {
  margin-top: clamp(11px, 1.3vw, 22px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
/* Подпись «Инженерная задача:» полным цветом, сам текст приглушён. */
.wd-case-task {
  margin-top: clamp(8px, 0.9vw, 15px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.wd-case-task b { font-weight: 500; color: var(--text); }

/* Цепочка студий: последняя всегда Development Studio и подсвечена. */
.wd-chain {
  margin-top: clamp(14px, 1.6vw, 27px);
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 0.9vw, 15px);
}
.wd-chain-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 15px);
  padding: clamp(8px, 0.9vw, 15px) clamp(10px, 1.1vw, 19px);
  border-radius: 10px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
}
.wd-chain-item.own {
  border-color: var(--accent-50);
  background: linear-gradient(180deg, rgba(77, 107, 255, 0.18), rgba(77, 107, 255, 0.07));
}
.wd-chain-mark {
  width: clamp(17px, 1.6vw, 28px);
  height: clamp(17px, 1.6vw, 28px);
  flex-shrink: 0;
  color: var(--text-30);
}
.wd-chain-item.own .wd-chain-mark { color: var(--accent); }
.wd-chain-mark svg { width: 100%; height: 100%; }
.wd-chain-body { min-width: 0; }
.wd-chain-name {
  font-size: var(--fs-home-micro);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-chain-role {
  margin-top: 2px;
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.wd-chain-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-20);
}
.wd-chain-arrow svg { width: clamp(16px, 1.6vw, 28px); height: 12px; }

/* Кнопка под карточкой — во всю ширину панели, контурная. */
.wd-case-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: clamp(40px, 3.5vw, 60px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  font-size: var(--fs-seo-cta);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wd-case-btn:hover { background: var(--surface-30); border-color: var(--text-20); }
.wd-case-btn svg { width: 14px; height: 14px; }

/* ============================================================
   ЭКРАН 3 — Архитектура решения
   ============================================================ */

/* Ряд из пяти карточек: активная шире остальных. Как на экране
   технологий SEO Studio — доли ряда, чтобы ширины анимировались.
   Карточки растянуты на всю высоту ряда, а не по центру: в макете все
   пять одной высоты, у свёрнутых имя сверху, а остаток занимает
   градиент. */
/* Зазор 24 при 1440: активная 400, свёрнутая 191, всего 1260 —
   отношение и даёт WD_LAYER_ACTIVE_FR в webdev.js. */
.wd-arch-row {
  display: grid;
  align-items: stretch;
  gap: clamp(16px, 1.67vw, 28px);
  transition: grid-template-columns 0.45s var(--ease-out);
}

/* Свёрнутая карточка отличается от активной только шириной и тем, что
   лид и строки в ней не показаны. Кегль имени и отступы у них
   одинаковые — в отличие от карточек технологий на SEO Studio, где
   свёрнутая идёт в 0.8 масштаба. Замер макета: имя 16 в обоих
   состояниях (чернила «Бизнес-логика» 111, «Устойчивость» 104),
   отступ 24 и там, и там. */
.wd-layer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: clamp(15px, 1.67vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  /* Свёрнутая карточка — градиент от прозрачного к синему снизу,
     так в макете. У активной он слабее и служит фоном текста. */
  background:
    linear-gradient(180deg, rgba(52, 61, 79, 0) 35%, rgba(77, 107, 255, 0.5) 100%),
    var(--surface-15);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.wd-layer:hover { border-color: var(--text-20); }
.wd-layer.active {
  border-color: var(--accent-50);
  background:
    linear-gradient(180deg, rgba(77, 107, 255, 0.14), rgba(77, 107, 255, 0.04)),
    var(--surface-15);
}

.wd-layer-name {
  font-size: var(--fs-home-lead);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Лид и строки слоя: в разметке они есть у всех пяти карточек и
   переключаются прозрачностью — по правилу проекта, а не
   перерисовкой. Ширина прибита в пикселях (fixLayerBodyWidth), чтобы
   текст не переносился заново на каждом кадре анимации колонок.
   Появление с задержкой: к моменту, когда текст видно, карточка уже
   почти раскрылась и он не выезжает из-под кромки.

   У свёрнутой карточки текст вынут из потока: иначе высоту ряда
   задавала бы самая высокая пара «имя в две строки + текст», которой
   на экране никогда не видно, и ряд выходил на 17 выше макета. */
.wd-layer-body {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease);
}
.wd-layer.active .wd-layer-body {
  position: static;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease) 0.15s;
}
/* Имя раскрытой карточки тоже прибито по конечной ширине: пока
   колонки анимируются, оно иначе переносится на две строки и тянет
   за собой высоту ряда. У свёрнутых карточек имя переносится свободно
   — так в макете. */
.wd-layer.active .wd-layer-name { width: var(--layer-body-w, auto); }

.wd-layer-lead {
  margin-top: clamp(7px, 0.78vw, 13px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
/* Линия под шапкой карточки — она есть в макете. */
.wd-layer-rows {
  margin-top: clamp(11px, 1.3vw, 22px);
  padding-top: clamp(12px, 1.4vw, 24px);
  border-top: 0.5px solid var(--text-12);
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.83vw, 14px);
}
.wd-layer-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.wd-layer-row::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.wd-layer-row b { font-weight: 500; color: var(--text); }

/* Плашка под рядом карточек: знак, текст, кнопка справа. */
.wd-arch-note {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 29px);
  padding: clamp(14px, 1.7vw, 29px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
}
.wd-arch-note-mark {
  width: clamp(28px, 2.8vw, 48px);
  height: clamp(28px, 2.8vw, 48px);
  flex-shrink: 0;
  color: var(--accent);
}
.wd-arch-note-mark svg { width: 100%; height: 100%; }
.wd-arch-note-body { flex: 1; min-width: 0; }
.wd-arch-note-title {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-arch-note-text {
  margin-top: clamp(5px, 0.6vw, 10px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.wd-arch-note .btn {
  flex-shrink: 0;
  height: clamp(30px, 2.4vw, 41px);
  gap: 7px;
  font-size: var(--fs-home-body);
}
.wd-arch-note .btn svg { width: 12px; height: 12px; }

/* ============================================================
   ЭКРАН 4 — Как выбираем техническое решение
   ============================================================ */

/* Полоса прогресса слева от карточки: сегмент на каждый путь,
   активный акцентный. Ряд из полосы и карточки. */
.wd-path-row {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.7vw, 29px);
  flex: 1;
  min-width: 0;
}
.wd-path-track {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 8px);
  flex-shrink: 0;
  width: 4px;
}
.wd-path-seg {
  flex: 1;
  border-radius: 2px;
  background: var(--surface-50);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.wd-path-seg:hover { background: var(--text-20); }
.wd-path-seg.active { background: var(--accent); }

.wd-path {
  flex: 1;
  min-width: 0;
  padding: clamp(14px, 1.7vw, 29px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  /* Подсветка из правого верхнего угла — так в макете. */
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(77, 107, 255, 0.3), rgba(77, 107, 255, 0) 60%),
    var(--surface-15);
}
.wd-path-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* 22 при 1440, а не 32: замер «Разработать индивидуальное решение»
   даёт 406px чернил, на 32 строка была бы 587 и уходила на две. */
.wd-path-name {
  margin-top: clamp(8px, 0.9vw, 15px);
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-path-rows {
  margin-top: clamp(14px, 1.6vw, 27px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 15px);
}
.wd-path-row-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-path-row-label::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Текст под подписью не сдвинут: в макете он начинается от кромки
   отступа карточки, левее маркера. */
.wd-path-row-text {
  margin-top: 3px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

.wd-path-btn {
  margin-top: clamp(20px, 2.3vw, 40px);
  height: clamp(38px, 3.1vw, 53px);
  font-size: var(--fs-seo-cta);
  padding: 0 clamp(16px, 1.7vw, 29px);
}
.wd-path-note { margin-top: clamp(8px, 0.9vw, 15px); font-size: var(--fs-home-micro); }

/* ============================================================
   ЭКРАН 5 — AI Product Development
   ============================================================ */

.wd-ai-note {
  margin-top: clamp(12px, 1.4vw, 24px);
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Схема: четыре узла по углам, центральный между рядами. Связи —
   SVG-слой под узлами, ломаные считает renderAiLinks по рамкам
   узлов: координаты зависят от ширины окна, в данных их нет. */
/* Зазоры сняты с макета: 48 между рядами и 24 между колонками при
   1440. Вместе с угловой карточкой 128 и центральной 82 это и даёт
   схему 434 в высоту. */
.wd-ai {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 3.33vw, 57px) clamp(15px, 1.67vw, 28px);
}
.wd-ai-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Связи в макете сплошные, в полный акцент и толщиной ровно 1 —
   приглушения нет. Точка стоит на кромке угловой карточки, наконечник
   — на кромке центральной. */
.wd-ai-links path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}
.wd-ai-links .wd-ai-head {
  fill: var(--accent);
  stroke: none;
}
.wd-ai-links circle { fill: var(--accent); }

/* Центральный узел лежит в сетке отдельной строкой на две колонки. */
.wd-ai-center-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

.wd-node {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
/* Узел под курсором чуть загорается: рамка становится акцентной,
   подложка светлеет, знак и разделитель выходят из --track в текст.
   Узлы никуда не ведут, поэтому курсор не меняется — это подсветка,
   а не кнопка. */
.wd-node-icon,
.wd-node-tags { transition: color 0.25s var(--ease); }
.wd-node-text { transition: border-color 0.25s var(--ease); }
.wd-node:hover {
  border-color: var(--accent-50);
  background-color: var(--surface-30);
}
.wd-node:hover .wd-node-icon { color: var(--accent); }
.wd-node:hover .wd-node-tags { color: var(--text-50); }
.wd-node:hover .wd-node-text { border-left-color: var(--text-30); }
/* Иконка стоит НАД именем, а не рядом: так в макете. Рядом она
   отбирала бы у имени ширину, и «Цель применения» переносилось бы на
   две строки вместо одной.

   Левая доля по содержимому, а не в долях узла: в макете разделитель
   стоит на разном расстоянии от кромки — 154, 161, 173 и 150 при
   карточке 288, то есть его место задаёт самая широкая строка.
   Отбивка узла 24, а до разделителя с каждой стороны 13.

   Зазор между знаком и именем 15.5 — с ним карточка выходит ровно
   макетные 128 в высоту, без отдельной подпорки высоты. */
.wd-node-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.08vw, 18px);
  padding: clamp(14px, 1.6vw, 27px);
  padding-right: clamp(9px, 0.9vw, 15px);
  flex: 0 0 auto;
}
.wd-node-icon {
  width: clamp(22px, 2.22vw, 38px);
  height: clamp(22px, 2.22vw, 38px);
  flex-shrink: 0;
  /* Знак и теги в макете ровно 52,61,79 — это поверхность без
     прозрачности, а не приглушённый текст: у --text-* синевы меньше. */
  color: var(--track);
}
.wd-node-icon svg { width: 100%; height: 100%; }
.wd-node-name {
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.wd-node-tags {
  margin-top: 4px;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--track);
  white-space: nowrap;
}
/* Правая доля узла отделена линией — так в макете; линия в полный
   --track и толщиной 1. Текст здесь НЕ приглушён: в макете он белый,
   с половиной --text он читался тусклее заголовка узла. */
.wd-node-text {
  flex: 1;
  min-width: 0;
  padding: clamp(14px, 1.6vw, 27px);
  padding-left: clamp(9px, 0.9vw, 15px);
  border-left: 1px solid var(--track);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
}
/* Центральный узел: акцентный контур и плоская заливка. Ширина 76%
   ряда — в макете он 456 при ряде 600. Заливка ровно accent 15%: с
   градиентом верх выходил светлее макета. */
.wd-node.center {
  width: 76%;
  /* Не 50%: рамка тут 0.5px, и браузер рисует её целым пикселем в
     полную силу, а в макете тот же волосок размазан на половину.
     С 30% пиксель выходит ровно макетным 39,51,109. */
  border-color: var(--accent-30);
  background: var(--accent-15);
}
/* У центрального узла иконка стоит рядом с именем, а не над ним —
   так в макете: узел там ниже угловых и шире. Отбивка по вертикали
   на пиксель больше угловой: узел в макете 82, а не 80. */
.wd-node.center .wd-node-main {
  flex-direction: row;
  align-items: center;
  gap: clamp(9px, 0.9vw, 15px);
  padding-top: clamp(15px, 1.67vw, 28px);
  padding-bottom: clamp(15px, 1.67vw, 28px);
}
.wd-node.center .wd-node-text { border-left-color: var(--accent-50); }
.wd-node.center .wd-node-icon { color: var(--accent); }
.wd-node.center .wd-node-tags { color: var(--accent); }
/* У центрального узла заливка и так акцентная — под курсором он
   загорается только кромкой и разделителем, иначе подсветка выбивала
   бы его из схемы. */
.wd-node.center:hover {
  border-color: var(--accent-50);
  background-color: var(--accent-15);
}
.wd-node.center:hover .wd-node-tags { color: var(--accent); }
.wd-node.center:hover .wd-node-text { border-left-color: var(--accent); }

/* ============================================================
   ЭКРАН 6 — Проекты и технологии
   ============================================================ */

.wd-work { padding: clamp(14px, 1.7vw, 29px); }
.wd-work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 24px);
}
/* 22 при 1440: «JijaLab» в макете 74px чернил, на 32 было бы 103. */
.wd-work-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-work-kind {
  flex-shrink: 0;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.wd-work-body {
  margin-top: clamp(11px, 1.3vw, 22px);
  padding-top: clamp(14px, 1.6vw, 27px);
  border-top: 0.5px solid var(--text-12);
}
.wd-work-task {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.wd-work-task b,
.wd-work-result b { font-weight: 500; color: var(--text); }
.wd-work-items {
  margin-top: clamp(11px, 1.3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 8px);
}
.wd-work-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-work-item::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.wd-work-result {
  margin-top: clamp(11px, 1.3vw, 22px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.wd-work-tags {
  margin-top: clamp(14px, 1.6vw, 27px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wd-work-tag {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Второй и последующие теги приглушены — так в макете. */
.wd-work-tag:not(:first-child) { background: var(--accent-50); }

/* Точечный пейджер под карточкой. */
.wd-works-dots {
  margin-top: clamp(12px, 1.4vw, 24px);
  display: flex;
  justify-content: center;
  gap: 6px;
}
.wd-works-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--text-20);
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.wd-works-dot:hover { background: var(--text-30); }
.wd-works-dot.active { background: var(--accent); }

/* ============================================================
   ЭКРАН 7 — Форматы работы
   ============================================================ */

/* Колода: активная карточка поверх, остальные повёрнутым стеком
   позади. Позиции в стеке ставит JS (updateDeck) — поворот и сдвиг
   зависят от расстояния до активной. */
.wd-deck {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 1px;
}
/* Карточка занимает не всю колонку, а 83% по центру: в макете она 499
   при колонке 600, и по бокам из-под неё выглядывает стек. */
/* Заливка НЕ полупрозрачная: карточки лежат друг на друге, и через
   surface-15 просвечивали заголовки нижних — прямо поверх текста
   активной, читать было нечего. --panel это тот же surface-15, но
   сведённый с фоном страницы, поэтому цвет не поменялся. Ровно тот же
   приём и по той же причине уже применён к активной карточке веера на
   главной (--panel-glass). */
.wd-format {
  grid-area: 1 / 1;
  width: 83%;
  padding: clamp(14px, 1.7vw, 29px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background-color: var(--panel);
  /* Поворот вокруг середины карточки: с точкой ниже её низа стек
     уезжал влево от активной. */
  transform-origin: 50% 50%;
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
/* Карточки в стеке позади: видны только уголком, кликов не ловят и
   табом не обходятся — их содержимое дублирует активную. */
.wd-format:not(.active) {
  pointer-events: none;
  opacity: 0.35;
}
.wd-format:not(.active) > * { visibility: hidden; }
.wd-format.active {
  z-index: 2;
  opacity: 1;
  transform: none;
}
/* Заголовок карточки в стеке виден — по нему читается, что там ещё
   есть форматы. */
.wd-format:not(.active) > .wd-format-name { visibility: visible; }

/* 22 при 1440: «Запуск цифрового продукта» в макете 293px чернил,
   на 32 было бы 425. */
.wd-format-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-format-lead {
  margin-top: clamp(7px, 0.8vw, 13px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
/* Отбивки внутри карточки сняты с макета по шагам между строками:
   до заголовка группы 24, до списка 12, до «Результата» 24. С
   прежними значениями карточка выходила на 16 ниже макетной. */
.wd-format-group { margin-top: clamp(15px, 1.67vw, 28px); }
.wd-format-group-title {
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-format-list {
  margin-top: clamp(8px, 0.84vw, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.35vw, 6px);
}
.wd-format-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-format-item::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Связанные направления — маркер приглушён, текст обычный. */
.wd-format-group.linked .wd-format-item::before { background: var(--text-20); }
.wd-format-result {
  margin-top: clamp(15px, 1.67vw, 28px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.wd-format-result b { font-weight: 500; color: var(--text); }
.wd-format .btn {
  margin-top: clamp(14px, 1.6vw, 27px);
  width: 100%;
  height: clamp(32px, 2.6vw, 45px);
  gap: 8px;
  font-size: var(--fs-home-body);
}
.wd-format .btn svg { width: 12px; height: 12px; }

/* ============================================================
   ЭКРАН 8 — Переход к обсуждению проекта
   ============================================================ */

/* Отбивка кнопки от панели в макете 25. */
.wd-request-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.74vw, 30px);
}
/* Отбивка сверху больше боковых: в макете от кромки панели до строки
   первого поля 31, а по бокам и снизу 24.
   Синее свечение в макете тянется по правому краю почти до низа
   панели — прежний радиус гас на середине. */
.wd-form-panel {
  padding: clamp(19px, 2.15vw, 37px) clamp(15px, 1.67vw, 28px) clamp(15px, 1.67vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-12);
  background:
    radial-gradient(110% 200% at 100% 0%,
      rgba(77, 107, 255, 0.24) 0%,
      rgba(77, 107, 255, 0.1) 35%,
      rgba(77, 107, 255, 0) 75%),
    var(--surface-15);
}
/* Зазор колонок 12, рядов 19.5 — по расстояниям между линиями полей
   в макете (275, 346, 429, 512 при 1440). */
.wd-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.35vw, 23px) clamp(8px, 0.83vw, 14px);
}
.wd-field { display: flex; flex-direction: column; }
.wd-field.wide { grid-column: 1 / -1; }
/* 14, не 16. Прежний замер шёл по «Имя» — на трёх буквах ошибка
   слишком велика; по длинным строкам («Рабочая почта» 94 чернил,
   «Сайт или ссылка на систему» 189, «Что необходимо создать или
   изменить?» 265) кегль сходится на 14.2. */
.wd-field-label {
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* 12, не 14: «Как к Вам обращаться» в макете 122 чернил. С 14 длинная
   подсказка широкого поля переносилась на две строки, а в макете она
   в одну. Линия поля — --track в полный пиксель, как в макете. */
.wd-input {
  margin-top: clamp(5px, 0.56vw, 10px);
  padding-bottom: clamp(9px, 0.97vw, 16px);
  border: none;
  border-bottom: 1px solid var(--track);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: border-color 0.25s var(--ease);
}
.wd-input::placeholder { color: var(--text-30); }
.wd-input:focus { outline: none; border-bottom-color: var(--accent); }
/* Широкое поле в макете на 12 выше узкого. */
textarea.wd-input {
  resize: none;
  min-height: clamp(28px, 2.81vw, 48px);
}

/* Согласие. Чекбокс свой: системный не покрасить. Настоящий input
   оставлен в разметке и доступен с клавиатуры, поэтому у него нулевой
   размер, а не display: none. Стоит в левой колонке под лидом — так в
   макете, отбивка от лида 40. */
.wd-consent {
  margin-top: clamp(22px, 2.8vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 15px);
  cursor: pointer;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-consent input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.wd-consent-box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 18 в макете, и угол почти прямой — 5px скругления там нет. */
  width: clamp(13px, 1.25vw, 22px);
  height: clamp(13px, 1.25vw, 22px);
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid var(--text-30);
  color: transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.wd-consent-box svg { width: 68%; height: 68%; }
.wd-consent input:checked + .wd-consent-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.wd-consent input:focus-visible + .wd-consent-box { border-color: var(--accent); }
.wd-consent a { color: var(--accent); text-decoration: none; }
.wd-consent a:hover { text-decoration: underline; }

.wd-submit {
  height: clamp(40px, 3.61vw, 62px);
  width: 100%;
  border-radius: var(--r-card);
  border: none;
  background: var(--accent);
  font-family: inherit;
  font-size: var(--fs-seo-cta);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
  transition: filter 0.2s var(--ease), opacity 0.2s var(--ease);
}
.wd-submit:hover:not(:disabled) { filter: brightness(1.1); }
/* Пока согласия и описания нет, кнопка не полупрозрачная, а контурная
   — как на SEO Studio. Прежние 45% прозрачности мутили и заливку, и
   надпись: кнопка читалась как артефакт, а не как выключенная. */
.wd-submit:disabled {
  background: transparent;
  border: 0.5px solid var(--text-20);
  color: var(--text-30);
  cursor: not-allowed;
}

/* Экран благодарности. В макете его нет — добавлен, чтобы клиент
   увидел номер обращения (номер выдаёт только сервер). */
.wd-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.9vw, 15px);
  padding: clamp(14px, 1.7vw, 29px);
}
.wd-done[hidden] { display: none; }
.wd-done-ref {
  font-size: var(--fs-home-micro);
  color: var(--text-30);
}
.wd-done-ref b { color: var(--text); font-weight: 500; }
.wd-done-title {
  font-size: var(--fs-home-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wd-done-text {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Статус отправки от cform.js. */
.wd-form-panel .cform-status {
  margin-top: clamp(8px, 0.9vw, 15px);
  font-size: var(--fs-home-micro);
  line-height: 1.2;
  color: var(--text-30);
}
.wd-form-panel .cform-status[data-cform-state="error"] { color: #e0785c; }
.wd-form-panel .cform-status[data-cform-state="ok"] { color: #6ec48c; }

/* ============================================================
   МОБИЛЬНЫЙ — экраны идут в потоке, страница скроллится
   ============================================================ */

@media (max-width: 1024px) {
  /* Двухколоночные экраны становятся стопкой. */
  .wd-two,
  .wd-cases-head,
  .wd-cases-row,
  .wd-path-row { flex-direction: column; align-items: stretch; }
  .wd-left,
  .wd-right,
  .wd-cases-head-left,
  .wd-cases-head-lead,
  .wd-picker,
  .wd-case-col { width: 100%; }
  .wd-cases-head-lead { padding-top: 0; }
  .wd-hero-lead { max-width: 100%; }

  /* Кнопки первого экрана — в столбец, во всю ширину. */
  .wd-hero-btns { flex-direction: column; }
  .wd-hero-btn-col { width: 100%; }
  .wd-hero-btns .btn { width: 100%; }

  /* Поток шагов: одна колонка, связи не рисуются вовсе — карточки
     идут стопкой и стрелка между ними ничего не добавляет
     (renderFlowLinks на мобильном чистит слой).
     Позиции в сетке ставит JS инлайном, а инлайн сильнее медиазапроса
     — поэтому он их здесь и снимает (renderFlow), а не глушится
     важностью. */
  .wd-flow { grid-template-columns: 1fr; }

  /* Цепочка студий и ряд слоёв — в столбец. */
  .wd-chain { flex-direction: column; }
  .wd-chain-arrow { transform: rotate(90deg); align-self: center; }
  /* Колонки ряда слоёв инлайновые — их снимает updateLayerCols. */
  .wd-arch-row { align-items: stretch; }

  /* Плашка под рядом: знак и текст сверху, кнопка отдельной строкой.
     В ряд на 375px заголовок сжимался до пяти узких строк. */
  .wd-arch-note { flex-direction: column; align-items: stretch; }
  .wd-arch-note .btn { width: 100%; }

  /* Полоса прогресса ложится горизонтально над карточкой. */
  .wd-path-track { flex-direction: row; width: 100%; height: 4px; }

  /* Схема AI в макете остаётся десктопной: два узла сверху, широкий
     «Модель и слой знаний» посередине, два снизу и связи между ними.
     Прежняя мобильная стопка была догадкой без макета. Внутри узла
     текст всё же ставим под заголовок — в колонку 160px он рядом не
     помещается. */
  .wd-node { flex-direction: column; }
  .wd-node-text {
    width: 100%;
    border-left: none;
    border-top: 0.5px solid var(--text-12);
  }
  .wd-node.center { width: 100%; }

  /* Колода разворачивается в стопку: все форматы читаются подряд. */
  .wd-format {
    grid-area: auto;
    width: 100%;
    transform: none;
  }

  /* Форма — в одну колонку. Кегль ввода 16, иначе Safari на iOS
     зумит страницу при фокусе. */
  .wd-form { grid-template-columns: 1fr; }
  .wd-field.wide { grid-column: 1; }
  .wd-input { font-size: 16px; }

  /* Заголовки секций — общий мобильный размер услуговых страниц
     (замер по этой странице дал 23.55 и 23.74, см. tokens.css). */
  .wd-h2,
  .wd-h2-wide { font-size: var(--fs-svc-h2-mob); }
  /* Подписи под кнопками в мобильных макетах не показываются. */
  .caption { display: none; }

  /* ---------- Экран 1 ----------
     Герой по центру — так в макете. Колонка тут .wd-left, отдельного
     .wd-hero-left на этой странице нет. */
  #wd-hero .wd-left { text-align: center; align-items: center; }
  #wd-hero .wd-hero-btns { width: 100%; }

  /* ---------- Экран 2 ----------
     Список ситуаций становится сеткой чипов два в ряд, без плашки и
     без строки «ВЫБЕРИТЕ ВАШУ ТЕКУЩУЮ СИТУАЦИЮ»: в макете это
     компактный переключатель над карточкой. */
  .wd-picker {
    padding: 0;
    border: none;
    background: none;
  }
  .wd-picker-title { display: none; }
  .wd-picker-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .wd-picker-item {
    border-radius: 8px;
    padding: 9px 10px;
    text-align: center;
    justify-content: center;
    background: var(--surface-15);
  }
  /* Плашки с названием ситуации над заголовком карточки в макете нет:
     та же подпись уже стоит в выбранном чипе. */
  .wd-case-badge { display: none; }
  /* Стрелок между студиями в мобильном макете нет. */
  .wd-chain-arrow { display: none; }

  /* ---------- Экран 3 ----------
     Плашка под рядом слоёв — без знака, кнопка отдельной строкой под
     текстом (в макете она вне плашки). */
  .wd-arch-note-mark { display: none; }
  /* Кнопка в макете стоит ПОД плашкой, а не внутри неё: рамку и фон
     носит текстовая часть, сама плашка становится прозрачной. */
  .wd-arch-note {
    padding: 0;
    border: none;
    background: none;
    gap: 12px;
  }
  .wd-arch-note-body {
    padding: 20px;
    border-radius: var(--r-card);
    border: 0.5px solid var(--text-12);
    background: var(--surface-15);
  }

  /* ---------- Экран 4 ----------
     Полоса пути ПОД карточкой, как в макете. */
  .wd-path-row { flex-direction: column; }
  .wd-path-track { order: 2; }

  /* ---------- Экран 7 ----------
     Колода форматов остаётся колодой: видна одна карточка, остальные
     листаются пальцем. Раньше здесь была стопка из всех четырёх —
     экран занимал 1930px против 857 в макете. */
  .wd-deck { position: relative; }
  .wd-format:not(.active) {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .wd-deck-hint {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: var(--fs-home-body);
    color: var(--text-30);
  }
}