/* ============================================================
   Страница Web Studio (services/web-studio/)
   Горизонтальная навигация по экранам, как на главной (см.
   src/styles/screens/nav.css + src/scripts/nav.js). Восемь экранов
   плюс подвал. Префикс .ws-*

   Сверстано по PNG-макетам сентября (архив Web_Studio.zip). Шкала —
   сентябрьская, --fs-home-*, как на Development Studio: страницы из
   одной серии макетов.

   Первый экран (этажерка слоёв) перенесён с прежней версии страницы
   без изменений в геометрии — поменялись только заголовок, лид и
   кнопки.
   ============================================================ */

/* ---------- Общее ---------- */

.ws-badge { font-size: var(--fs-home-micro); }

.ws-h2 {
  font-size: var(--fs-home-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Заголовок во всю ширину экрана — крупнее двухколоночного. */
.ws-h2-wide {
  font-size: var(--fs-home-h2-wide);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Лид в макетах не приглушён. */
.ws-lead {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-lead + .ws-lead { margin-top: clamp(10px, 1.1vw, 19px); }

.ws-left .ws-badge,
.ws-wide .ws-badge { margin-bottom: clamp(8px, 0.83vw, 14px); }

.ws-hero-lead,
.ws-intro-lead { margin-top: clamp(14px, 1.6vw, 28px); max-width: 56ch; }
/* Лид первого экрана ограничивает сама колонка: в макете он
   переносится по 642, а 56ch обрезали бы его на 460. */
.ws-hero-lead { max-width: none; }
/* На экранах 4 и 5 шапка занимает всю ширину: в макете лид тянется
   до правого края и переносится один раз, поэтому ограничения нет. */
.ws-intro-full .ws-intro-lead { max-width: none; }

/* Две колонки: слева текст, справа интерактив. */
.ws-two {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.67vw, 28px);
  width: 100%;
}
.ws-left {
  width: 50.5%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ws-right { flex: 1; min-width: 0; }

/* Экран во всю ширину: шапка сверху, содержимое под ней. */
.ws-wide {
  display: flex;
  flex-direction: column;
  width: 100%;
}

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

/* ============================================================
   ЭКРАН 1 — Позиционирование (этажерка слоёв)
   ============================================================ */

/* Доли ряда сняты с макета (2880 = 2×1440): артворк этажерки 463,
   зазор до подписей 19.5, колонка подписей 135 — вместе 617.5 из
   1260, то есть ровно 49 %. Остальное берёт текстовая колонка.
   Зазора между колонками нет: у артворка своё пустое поле сверху и
   снизу от левой вершины, и лид в макете переносится по 642 — любой
   зазор ломает перенос. */
.ws-hero-grid {
  display: flex;
  gap: 0;
  align-items: center;
}

.ws-hero-left {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.3vw, 40px);
  flex: 1;
  min-width: 0;
}

.ws-hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* H1 в макетах сентября крупнее общесайтового: 48 при 1440. */
.ws-hero-title {
  font-size: var(--fs-home-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-hero-title .dim { color: var(--text-25); }

.ws-hero-subtitle {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
}

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

/* ---------- Правая часть: стек слоёв ----------
   Ширина и внутренние доли — из макета (см. комментарий у
   .ws-hero-grid). Доли, а не vw: при content-width 1470 всё
   масштабируется вместе, а не разъезжается. */
.ws-hero-right {
  width: 49%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3.16%;
  position: relative;
}

/* SVG-слой с пунктирными линиями от угла картинки до плашки —
   координаты каждой линии считает JS (renderHeroLines в web.js) по
   реальным getBoundingClientRect картинки и плашки, поэтому линии
   остаются на месте при любой ширине экрана. */
.ws-stack-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ws-stack-line {
  fill: none;
  stroke: var(--text-20);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  transition: stroke 0.3s var(--ease), stroke-width 0.3s var(--ease);
}
.ws-stack-line.highlighted {
  stroke: var(--accent);
  stroke-width: 1.3;
}

/* Этажерка из шести слоёв.

   Числа сняты с макета s1-0.png (он в 2×, поэтому всё пополам):
   ромб слоя 926 × 196, шаг между слоями 125.7, отсюда высота стопки
   5 × 125.7 + 196 = 824.5. Ширина .ws-stack — это ширина РОМБА,
   картинка шире неё (см. .ws-stack-slice).

   Пунктирные направляющие по краям — из макета: тонкая линия
   цвета --track от верхней вершины до нижней с каждой стороны. */
.ws-stack {
  position: relative;
  width: 74.98%;
  aspect-ratio: 926 / 824.5;
  flex-shrink: 0;
}
.ws-stack::before,
.ws-stack::after {
  content: '';
  position: absolute;
  top: 11.643%;
  height: 76.23%;
  width: 0;
  border-left: 1px dashed var(--track);
  pointer-events: none;
}
.ws-stack::before { left: 0; }
.ws-stack::after { right: 0; }

.ws-stack-row {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-28px);
  animation: wsStackIn 0.7s var(--ease-out) forwards;
  cursor: pointer;
  transition: filter 0.3s var(--ease);
}
/* Шаг 125.7 от высоты 824.5 = 15.246 %. Ряд не центрируется по своей
   ячейке, а прибит верхом: у слоёв разные холсты, и центрирование
   разносило ромбы по вертикали. */
.ws-stack-row.n0 { top: 0%;       z-index: 6; animation-delay: 0.5s; }
.ws-stack-row.n1 { top: 15.246%;  z-index: 5; animation-delay: 0.4s; }
.ws-stack-row.n2 { top: 30.492%;  z-index: 4; animation-delay: 0.3s; }
.ws-stack-row.n3 { top: 45.738%;  z-index: 3; animation-delay: 0.2s; }
.ws-stack-row.n4 { top: 60.984%;  z-index: 2; animation-delay: 0.1s; }
.ws-stack-row.n5 { top: 76.23%;   z-index: 1; animation-delay: 0s; }

/* Подсветка слоя — z-index на время hover выставляет JS (inline
   style), чтобы поднятая карточка вышла из-под соседних без !important. */
.ws-stack-row.highlighted {
  filter: brightness(1.3) drop-shadow(0 0 20px var(--accent-50));
}

@keyframes wsStackIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Холсты слоёв разные: у первых пяти 1007 × 316 с прозрачным полем
   по 40 слева и справа, у шестого 927 × 196 без полей. Сам ромб во
   всех ровно 926 шириной. Раньше картинка бралась долей от ряда, и
   шестой слой выходил на 8 % шире остальных и висел ниже.
   Считаем от холста: ширина = 100 % ромба × холст / 926, сдвиг влево
   на его поле — тогда все шесть ромбов садятся один на другой. */
.ws-stack-slice {
  display: block;
  width: 108.747%;
  margin-left: -4.320%;
  height: auto;
  pointer-events: none;
}
.ws-stack-row.n5 .ws-stack-slice {
  width: 100.108%;
  margin-left: 0;
}

/* Список тегов-слоёв справа от стека — расположены равномерно по
   высоте, каждый соединён со «своей» карточкой линией из SVG-слоя. */
.ws-stack-tags {
  position: relative;
  align-self: stretch;
  width: 21.86%;
  flex-shrink: 0;
}

/* Сдвиг на половину ПЛАШКИ, а не всего блока: в макете против
   вершины слоя стоит центр плашки, подпись висит под ней. */
.ws-stack-tag {
  --ws-pill-h: clamp(19px, 1.67vw, 28px);
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(calc(var(--ws-pill-h) / -2));
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.57vw, 10px);
  cursor: pointer;
}
/* Тот же шаг 15.246 %, начало — правая вершина верхнего ромба
   (96 из 824.5 = 11.643 %). В макете центр плашки стоит ровно
   против вершины своего слоя. */
.ws-stack-tag.t0 { top: 11.643%; }
.ws-stack-tag.t1 { top: 26.889%; }
.ws-stack-tag.t2 { top: 42.135%; }
.ws-stack-tag.t3 { top: 57.381%; }
.ws-stack-tag.t4 { top: 72.627%; }
.ws-stack-tag.t5 { top: 87.873%; }

/* Плашка — тот же стеклянный рецепт, что и у .badge (base.css). */
.ws-stack-tag-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: var(--ws-pill-h);
  padding: 0 clamp(11px, 1vw, 17px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(52, 61, 79, 0.55), rgba(52, 61, 79, 0.22));
  border: 0.5px solid var(--text-20);
  box-shadow:
    inset 0 1px 0 rgba(232, 237, 247, 0.16),
    inset 0 -10px 14px -8px rgba(18, 20, 26, 0.6),
    0 1px 3px rgba(18, 20, 26, 0.5);
  font-size: var(--fs-home-micro);
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ws-stack-tag.highlighted .ws-stack-tag-pill {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(232, 237, 247, 0.16),
    0 0 0 1px var(--accent-50),
    0 0 16px var(--accent-15);
}

/* Кегль подписи подобран под ширину колонки: самая длинная строка
   («Системы масштабирования») в макете доходит ровно до правого края
   контента, поэтому запас тут минимальный и размер считается от него,
   а не берётся круглым. */
.ws-stack-tag-desc {
  padding-left: clamp(4px, 0.38vw, 7px);
  font-size: clamp(7px, 0.66vw, 11.1px);
  color: var(--text-30);
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}
.ws-stack-tag.highlighted .ws-stack-tag-desc { color: var(--text-50); }

/* Узкая полоса сразу над мобильным порогом: колонка подписей там
   такая, что самая длинная строка переносится в две, и блок начинает
   налезать на соседний слой. Поджимаем сам блок, а не шаг — шаг
   задаёт стопка. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .ws-stack-tag { gap: 3px; }
  .ws-stack-tag-desc { line-height: 1.05; }
}

/* ============================================================
   ЭКРАН 2 — Что происходит на стороне пользователя
   ============================================================ */

/* Пять мыслей клиента списком. Раскрыт один пункт: он в панели с
   акцентной заливкой, остальные — строкой с разделителем.
   Содержимое всех пяти лежит в разметке и переключается
   прозрачностью, поэтому высота списка постоянна. */
.ws-thoughts {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.56vw, 9px);
}
/* Пункт — <button>, поэтому внутри только строчные элементы: строки
   разложены на блоки через display, а не через <p>/<div>. */
.ws-thought {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(14px, 1.6vw, 27px) clamp(14px, 1.67vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid transparent;
  border-bottom-color: var(--text-12);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.ws-thought:last-child { border-bottom-color: transparent; }
/* Свёрнутые пункты гаснут тем сильнее, чем дальше от раскрытого —
   так в макете список уходит в фон. Степень ставит JS через --dim. */
.ws-thought:not(.active) { opacity: var(--dim, 1); }
.ws-thought:not(.active):hover { opacity: 1; }
.ws-thought.active {
  border-color: var(--accent-30);
  border-bottom-color: var(--accent-30);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(77, 107, 255, 0.22), rgba(77, 107, 255, 0) 70%),
    var(--surface-15);
}

/* Кегль 11 снят с макета по ширине строки (262px у «01 · ОСОЗНАНИЕ ·
   МЫСЛИ ВАШЕГО КЛИЕНТА») — это меньше общего --fs-home-micro. */
.ws-thought-kicker {
  display: block;
  font-size: clamp(9px, 0.76vw, 13px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-30);
}
.ws-thought.active .ws-thought-kicker { color: var(--accent); }
.ws-thought-kicker b { font-weight: 500; }

.ws-thought-quote {
  display: block;
  margin-top: clamp(7px, 0.83vw, 14px);
  font-size: var(--fs-home-lead);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Текст свёрнутого пункта из потока вынут: иначе высоту списка
   задавали бы все пять раскрытых сразу. */
.ws-thought-text {
  display: block;
  position: absolute;
  margin-top: clamp(8px, 0.9vw, 15px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease);
}
.ws-thought.active .ws-thought-text {
  position: static;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease) 0.1s;
}

/* ============================================================
   ЭКРАН 3 — Логика проектирования
   ============================================================ */

/* Шапка экрана: слева заголовок с лидом, справа переключатель
   сценариев и подсказка под ним. */
.ws-logic-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 52px);
}
.ws-logic-head-left { flex: 1; min-width: 0; }
.ws-logic-switch-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(5px, 0.56vw, 10px);
  flex-shrink: 0;
  padding-top: clamp(20px, 2.2vw, 38px);
}
.ws-logic-switch {
  display: flex;
  border-radius: var(--r-btn);
  overflow: hidden;
}
.ws-logic-tab {
  padding: clamp(10px, 1.11vw, 19px) clamp(16px, 1.81vw, 31px);
  border: none;
  background: var(--surface-15);
  font-family: inherit;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.ws-logic-tab:hover:not(.active) { background: var(--surface-30); }
.ws-logic-tab.active { background: var(--accent); }
.ws-logic-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.ws-logic-hint svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Панель сценария. */
.ws-logic-panel {
  margin-top: clamp(24px, 2.8vw, 48px);
  padding: clamp(15px, 1.67vw, 28px);
}
.ws-logic-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ws-logic-title {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-logic-count {
  font-size: var(--fs-home-micro);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-30);
  flex-shrink: 0;
}
.ws-logic-count b { font-weight: 400; color: var(--accent); }

/* Шесть шагов в ряд. */
.ws-logic-steps {
  margin-top: clamp(12px, 1.4vw, 24px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 0.9vw, 15px);
}
.ws-logic-step {
  padding: clamp(10px, 1.11vw, 19px);
  border-radius: 10px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
}
/* Первый шаг подсвечен: с него читается ряд. */
.ws-logic-step:first-child {
  border-color: var(--accent-30);
  background: var(--accent-15);
}
.ws-logic-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.ws-logic-step-kind {
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.ws-logic-step-mark {
  width: clamp(12px, 1.11vw, 19px);
  height: clamp(12px, 1.11vw, 19px);
  flex-shrink: 0;
  color: var(--accent);
}
.ws-logic-step-mark svg { width: 100%; height: 100%; }
.ws-logic-step-name {
  margin-top: clamp(5px, 0.56vw, 10px);
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-logic-step-text {
  margin-top: clamp(6px, 0.7vw, 12px);
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Три следствия под шагами. */
.ws-logic-sub {
  margin-top: clamp(15px, 1.67vw, 28px);
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-logic-results {
  margin-top: clamp(10px, 1.11vw, 19px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.81vw, 31px);
  padding: clamp(12px, 1.35vw, 23px);
  border-radius: 10px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
}
.ws-logic-result {
  display: flex;
  align-items: flex-start;
  gap: clamp(9px, 1vw, 17px);
}
.ws-logic-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(26px, 2.5vw, 43px);
  height: clamp(26px, 2.5vw, 43px);
  flex-shrink: 0;
  border-radius: 8px;
  border: 0.5px solid var(--accent-30);
  background: var(--accent-15);
  color: var(--accent);
}
.ws-logic-result-icon svg { width: 55%; height: 55%; }
.ws-logic-result-name {
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-logic-result-text {
  margin-top: 4px;
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Плашка под панелью. */
.ws-logic-note {
  margin-top: clamp(12px, 1.4vw, 24px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.81vw, 31px);
  padding: clamp(15px, 1.67vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid var(--accent-30);
  background: var(--accent-15);
}
.ws-logic-note-mark {
  width: clamp(30px, 3.05vw, 52px);
  height: clamp(30px, 3.05vw, 52px);
  flex-shrink: 0;
  color: var(--accent);
}
.ws-logic-note-mark svg { width: 100%; height: 100%; }
.ws-logic-note-body { flex: 1; min-width: 0; }
.ws-logic-note-title {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-logic-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);
}
.ws-logic-note .btn { flex-shrink: 0; gap: 8px; }
.ws-logic-note .btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ============================================================
   ЭКРАН 4 — Метод работы Web Studio
   ============================================================ */

.ws-method-row {
  margin-top: clamp(24px, 2.8vw, 48px);
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.81vw, 31px);
  padding: clamp(15px, 1.67vw, 28px);
  /* Два подсвета акцентом поверх общей заливки .ws-panel: один у
     верхней кромки левее середины, второй из нижнего правого угла.
     Замер макета дал в обоих альфу около 0.11, между ними полоса
     чистой поверхности. Без них карточка была ровной плашкой. */
  background-image:
    radial-gradient(32% 90% at 40% 0%, rgba(77, 107, 255, 0.15) 0%, transparent 72%),
    radial-gradient(52% 115% at 100% 100%, rgba(77, 107, 255, 0.14) 0%, transparent 72%);
}
.ws-method-body { flex: 1; min-width: 0; }
.ws-method-kicker {
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.ws-method-name {
  margin-top: clamp(4px, 0.42vw, 7px);
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-method-lines {
  margin-top: clamp(20px, 2.2vw, 38px);
  display: flex;
  flex-direction: column;
}
/* Абзацы разделены линией, каждый начинается с «>>» — так в макете. */
.ws-method-line {
  padding: clamp(10px, 1.11vw, 19px) 0;
  border-bottom: 0.5px solid var(--text-12);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-method-line:first-child { padding-top: 0; }
.ws-method-line:last-child { border-bottom: none; }
.ws-method-line::before { content: '>> '; color: var(--text-50); }

.ws-method-tags {
  margin-top: clamp(12px, 1.4vw, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.7vw, 12px);
}
.ws-method-tag {
  padding: clamp(4px, 0.42vw, 7px) clamp(8px, 0.9vw, 15px);
  border-radius: 999px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-30);
  font-size: var(--fs-seo-nano);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Меню этапов справа. */
.ws-method-side {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 0.9vw, 15px);
  flex-shrink: 0;
}
.ws-method-menu {
  width: clamp(180px, 16.2vw, 278px);
  padding: clamp(6px, 0.7vw, 12px);
  border-radius: 10px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-15);
}
.ws-method-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: clamp(8px, 0.9vw, 15px) clamp(9px, 1vw, 17px);
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.ws-method-item:hover:not(.active) { background: var(--surface-30); }
.ws-method-item.active { background: var(--surface-50); }
.ws-method-item-mark {
  width: clamp(12px, 1.11vw, 19px);
  height: clamp(12px, 1.11vw, 19px);
  flex-shrink: 0;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.ws-method-item.active .ws-method-item-mark { opacity: 1; }
.ws-method-item-mark svg { width: 100%; height: 100%; }

.ws-method-dots {
  width: clamp(16px, 1.53vw, 26px);
  height: clamp(16px, 1.53vw, 26px);
  flex-shrink: 0;
  color: var(--text-50);
}
.ws-method-dots svg { width: 100%; height: 100%; }

/* ============================================================
   ЭКРАН 5 — Коммерческие форматы Web Studio
   ============================================================ */

/* Ряд форматов: раскрытый занимает почти всю ширину, свёрнутые —
   корешки. Ширины ставит JS долями ряда, чтобы переход
   анимировался. */
.ws-formats-row {
  margin-top: clamp(24px, 2.8vw, 48px);
  display: grid;
  align-items: stretch;
  /* 25px между карточками при 1440 — из макета: 6 карточек,
     раскрытая 616, корешок 104, всё вместе ровно в 1260. */
  gap: clamp(12px, 1.74vw, 30px);
  transition: grid-template-columns 0.45s var(--ease-out);
}
.ws-format {
  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.35) 100%),
    var(--surface-15);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.ws-format:hover { border-color: var(--text-20); }
.ws-format.active {
  border-color: var(--text-12);
  background: var(--surface-15);
  cursor: default;
}
/* Имя формата на корешке в макете не видно — корешок пустой,
   поэтому у свёрнутых оно гасится, а не обрезается по ширине. */
.ws-format-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.ws-format.active .ws-format-name {
  opacity: 1;
  transition: opacity 0.3s var(--ease) 0.15s;
}
/* Содержимое раскрытого формата: в разметке оно есть у всех, но у
   свёрнутых вынуто из потока и погашено — иначе корешок растягивал
   бы ряд по своему тексту. */
.ws-format-body {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease);
}
.ws-format.active .ws-format-body {
  position: static;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease) 0.15s;
}
/* Имя раскрытого формата и подвал прибиты по конечной ширине: пока
   колонки анимируются, содержимое иначе переносится и тянет высоту
   ряда. Имя прибили сразу, подвал — нет, и строка «срок / цена» на
   узкой колонке разъезжалась на две: ряд подскакивал на 13-39px и
   возвращался обратно, это и были «скачки при перелистывании».
   Резерв minHeight от них не спасал — он считается по КОНЕЧНЫМ
   ширинам, а распирало ряд на промежуточных.

   У подвала своя переменная: на десктопе она равна --ws-format-w, а
   на мобильном подвал выходит из-под рамки на ширину корешков и
   равен всему ряду (см. fixFormatWidth). */
.ws-format.active .ws-format-name { width: var(--ws-format-w, auto); }
.ws-format.active .ws-format-foot-wrap { width: var(--ws-foot-w, auto); }

.ws-format-lead {
  margin-top: clamp(7px, 0.78vw, 13px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
/* В макете пункты заполняют сначала левый столбец, потом правый,
   поэтому поток по столбцам, а число рядов считает JS
   (--ws-format-rows) по длине списка. */
/* Обёртка вокруг текста карточки формата: нужна только мобильной
   раскладке (рамку там носит она), на десктопе боксом быть не должна. */
.ws-format-box { display: contents; }

/* Подвал карточки (кнопка и строка «срок / цена») вынесен из тела ради
   мобильной раскладки — там он выходит из-под рамки и встаёт под
   карточкой. Живёт по тем же правилам, что и тело: у свёрнутого
   корешка спрятан вместе с ним, иначе кнопки всех шести форматов
   торчали бы из корешков. */
.ws-format-foot-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease);
}
.ws-format.active .ws-format-foot-wrap {
  position: static;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease) 0.15s;
}

.ws-format-items {
  margin-top: clamp(14px, 1.6vw, 27px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(var(--ws-format-rows, 3), auto);
  grid-auto-flow: column;
  gap: clamp(8px, 0.9vw, 15px) clamp(16px, 1.81vw, 31px);
}
.ws-format-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-format-item::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.ws-format-result {
  margin-top: clamp(14px, 1.6vw, 27px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.ws-format-result b { font-weight: 500; color: var(--text); }
.ws-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);
}
.ws-format .btn svg { width: 12px; height: 12px; }

/* Подвал карточки: срок слева, цена справа. */
.ws-format-foot {
  margin-top: clamp(10px, 1.11vw, 19px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.ws-format-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-format-foot svg { width: 13px; height: 13px; flex-shrink: 0; }

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

/* Плашка под пейджером: линия, текст и кнопка справа. */
.ws-formats-note {
  margin-top: clamp(20px, 2.2vw, 38px);
  padding-top: clamp(15px, 1.67vw, 28px);
  border-top: 0.5px solid var(--text-12);
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.81vw, 31px);
}
.ws-formats-note p {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.ws-formats-note .btn { flex-shrink: 0; gap: 8px; }
.ws-formats-note .btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ============================================================
   ЭКРАН 6 — Проекты и доказательства
   ============================================================ */

/* Фильтры под лидом. */
.ws-case-filters {
  margin-top: clamp(20px, 2.2vw, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.7vw, 12px);
}
/* Пять фильтров в макете стоят одной строкой: чип 28px высотой,
   «Все проекты» — 88px по ширине, отсюда кегль 11 и поля 11. */
.ws-case-filter {
  padding: clamp(4px, 0.49vw, 8px) clamp(7px, 0.76vw, 13px);
  border-radius: 999px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-30);
  font-family: inherit;
  font-size: clamp(9px, 0.76vw, 13px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.ws-case-filter:hover:not(.active) { border-color: var(--text-20); }
.ws-case-filter.active {
  background: var(--accent);
  border-color: var(--accent);
}

/* Правая часть: вертикальная лента-указатель и карточка проекта. */
.ws-case-col {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.81vw, 31px);
  flex: 1;
  min-width: 0;
}
.ws-case-rail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 2px;
}
.ws-case-rail-item {
  width: 3px;
  flex: 1;
  min-height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--text-12);
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.ws-case-rail-item:hover:not(.active) { background: var(--text-20); }
.ws-case-rail-item.active { background: var(--accent); }

.ws-case-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-case {
  padding: clamp(15px, 1.67vw, 28px);
  display: flex;
  flex-direction: column;
}
.ws-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.35vw, 23px);
  padding-bottom: clamp(12px, 1.35vw, 23px);
  border-bottom: 0.5px solid var(--text-12);
}
.ws-case-name {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-case-niche {
  flex-shrink: 0;
  padding: clamp(4px, 0.42vw, 7px) clamp(9px, 1vw, 17px);
  border-radius: 999px;
  border: 0.5px solid var(--accent-30);
  background: var(--accent-15);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.ws-case-task {
  margin-top: clamp(12px, 1.35vw, 23px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.ws-case-task b { font-weight: 500; color: var(--text); }
.ws-case-items {
  margin-top: clamp(10px, 1.11vw, 19px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.42vw, 7px);
}
.ws-case-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-case-item::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.ws-case-result {
  margin-top: clamp(12px, 1.35vw, 23px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.ws-case-result b { font-weight: 500; color: var(--text); }
.ws-case-tags {
  margin-top: clamp(12px, 1.35vw, 23px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.7vw, 12px);
}
.ws-case-tag {
  padding: clamp(4px, 0.42vw, 7px) clamp(8px, 0.9vw, 15px);
  border-radius: 6px;
  border: 0.5px solid var(--text-12);
  background-color: var(--surface-30);
  font-size: var(--fs-home-micro);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-case-btn {
  margin-top: clamp(12px, 1.35vw, 23px);
  width: 100%;
  height: clamp(38px, 3.1vw, 53px);
  gap: 8px;
  font-size: var(--fs-home-lead);
}
.ws-case-btn svg { width: 13px; height: 13px; }
/* Пусто, когда фильтр не дал совпадений. */
.ws-case-empty {
  padding: clamp(15px, 1.67vw, 28px);
  font-size: var(--fs-home-body);
  color: var(--text-50);
}

/* ============================================================
   ЭКРАН 7 — Как организована совместная работа
   ============================================================ */

.ws-team-list {
  display: flex;
  flex-direction: column;
}
.ws-team-step {
  position: relative;
  padding: clamp(12px, 1.35vw, 23px) clamp(15px, 1.67vw, 28px);
  border-radius: var(--r-card);
  border: 0.5px solid transparent;
  border-bottom-color: var(--text-12);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ws-team-step:last-child { border-bottom-color: transparent; }
.ws-team-step:not(.active):hover { background: var(--surface-15); }
/* Раскрытый пункт: акцентная заливка и полоса по левой кромке. */
.ws-team-step.active {
  border-color: var(--accent-30);
  border-bottom-color: var(--accent-30);
  border-left: 2px solid var(--accent);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(77, 107, 255, 0.2), rgba(77, 107, 255, 0) 70%),
    var(--surface-15);
}
.ws-team-head {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1vw, 17px);
}
.ws-team-num {
  font-size: var(--fs-home-lead);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
  flex-shrink: 0;
}
.ws-team-name {
  flex: 1;
  min-width: 0;
  font-size: clamp(14px, 1.25vw, 21px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-team-mark {
  width: clamp(12px, 1.25vw, 21px);
  height: clamp(12px, 1.25vw, 21px);
  flex-shrink: 0;
  color: var(--text);
}
.ws-team-mark svg { width: 100%; height: 100%; }

/* Тело пункта вынуто из потока у свёрнутых — высота списка постоянна. */
.ws-team-body {
  position: absolute;
  margin-top: clamp(12px, 1.35vw, 23px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.35vw, 23px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease);
}
.ws-team-step.active .ws-team-body {
  position: static;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease) 0.1s;
}
/* Пункт — <button>: и подпись стороны, и текст под ней делаются
   блоками через display, отдельной строкой каждая, как в макете. */
.ws-team-side { display: block; }
.ws-team-side-title {
  display: block;
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.ws-team-side-text {
  display: block;
  margin-top: clamp(4px, 0.42vw, 7px);
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

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

.ws-request-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.74vw, 30px);
}
.ws-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);
}
.ws-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.35vw, 23px) clamp(8px, 0.83vw, 14px);
}
.ws-field { display: flex; flex-direction: column; }
.ws-field.wide { grid-column: 1 / -1; }
.ws-field-label {
  font-size: var(--fs-home-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ws-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);
}
.ws-input::placeholder { color: var(--text-30); }
.ws-input:focus { outline: none; border-bottom-color: var(--accent); }
textarea.ws-input {
  resize: none;
  min-height: clamp(28px, 2.81vw, 48px);
}

/* Согласие стоит в левой колонке под лидом — так в макете.
   Скрытие прописано явно: класс задаёт display, и без этого правила
   после отправки подпись осталась бы видимой и кликабельной. */
.ws-consent[hidden] { display: none; }
.ws-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);
}
.ws-consent input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.ws-consent-box {
  display: flex;
  align-items: center;
  justify-content: center;
  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);
}
.ws-consent-box svg { width: 68%; height: 68%; }
.ws-consent input:checked + .ws-consent-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.ws-consent input:focus-visible + .ws-consent-box { border-color: var(--accent); }
.ws-consent a { color: var(--accent); text-decoration: none; }
.ws-consent a:hover { text-decoration: underline; }

.ws-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: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), filter 0.2s var(--ease);
}
.ws-submit:hover:not(:disabled) { filter: brightness(1.1); }
/* Выключенная кнопка контурная, а не полупрозрачная — как на SEO и
   Development Studio. */
.ws-submit:disabled {
  background: transparent;
  border: 0.5px solid var(--text-20);
  color: var(--text-30);
  cursor: not-allowed;
}

/* Экран благодарности: в макете его нет — добавлен, чтобы клиент
   увидел номер обращения (номер выдаёт только сервер). */
.ws-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.9vw, 15px);
  padding: clamp(15px, 1.67vw, 28px);
}
.ws-done[hidden] { display: none; }
.ws-done-ref {
  font-size: var(--fs-home-micro);
  color: var(--text-50);
}
.ws-done-ref b { color: var(--text); font-weight: 500; }
.ws-done-title {
  font-size: var(--fs-home-title);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
}
.ws-done-text {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-50);
}
.ws-form-error {
  font-size: var(--fs-home-micro);
  line-height: 1.2;
  color: var(--danger);
}
.ws-form-error[hidden] { display: none; }

/* ============================================================
   МОБИЛЬНЫЙ
   ============================================================ */

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (макеты webstudio.zip, 375px)

   Общее с SEO Studio: H1 32, заголовки секций --fs-svc-h2-mob,
   лид 14, подписи под кнопками не показываются. Замеры сошлись на
   обеих страницах, см. комментарий у токена в tokens.css.

   Главное отличие от прежней мобильной версии: аккордеоны и колода
   форматов БОЛЬШЕ НЕ разворачиваются целиком. Раньше макета на
   мобильный не было, и всё раскрывалось «чтобы читалось»; в макетах
   везде открыт ровно один пункт, а остальные свёрнуты — экран 5 при
   этом занимал 2739px против 773 в макете.
   ============================================================ */
@media (max-width: 1024px) {
  .ws-two,
  .ws-logic-head,
  .ws-case-col,
  .ws-formats-note { flex-direction: column; align-items: stretch; }
  .ws-left,
  .ws-right,
  .ws-request-col,
  .ws-method-side { width: 100%; }
  .ws-hero-lead,
  .ws-intro-lead { max-width: 100%; }

  .ws-hero-title { font-size: 32px; }
  .ws-h2,
  .ws-h2-wide { font-size: var(--fs-svc-h2-mob); }
  .caption { display: none; }

  /* ---------- Экран 1 ----------
     Герой по центру. Этажерка остаётся десктопной: подписи стоят
     СПРАВА от слоёв, как в макете, а не уезжают сеткой под стек —
     прежняя мобильная раскладка была догадкой без макета. */
  /* Зазор обязателен: на десктопе колонки стоят рядом и gap: 0, а в
     колонку кнопки упирались прямо в этажерку. */
  .ws-hero-grid {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(24px, 6vw, 36px);
  }
  .ws-hero-left { width: 100%; text-align: center; }
  /* Доли с десктопа: стек 75 и подписи 22 от половины ширины. В
     колонке подписям остаётся 75px, и «Визуальная оболочка» ломается
     на две строки, наезжая на следующую плашку. В макете колонка
     подписей 84 при стеке 224 — отсюда и доли ниже. */
  .ws-hero-right { width: 100%; gap: 2%; }
  .ws-stack { width: 68%; }
  .ws-stack-tags { width: 27%; }
  .ws-hero-btns { flex-direction: column; }
  .ws-hero-btn-col { width: 100%; }
  .ws-hero-btns .btn { width: 100%; }
  /* Кегли подписей на узкой колонке: пилюля 19, описание 8. */
  .ws-stack-tag { --ws-pill-h: 19px; }
  .ws-stack-tag-pill { font-size: 10px; }
  .ws-stack-tag-desc { font-size: 8px; }

  /* ---------- Экран 2 ----------
     Аккордеон мыслей: раскрыт один пункт, у свёрнутых видно только
     строку-рубрику и цитату. */
  .ws-thought-text {
    position: static;
    opacity: 1;
    visibility: visible;
  }
  .ws-thought:not(.active) .ws-thought-text { display: none; }

  /* ---------- Экран 3 ----------
     Переключатель сценариев — одной строкой, по содержимому.
     Подсказка под ним в макете не показывается. */
  .ws-logic-switch-col { padding-top: clamp(12px, 2vw, 20px); }
  /* Оба переключателя в одну строку по содержимому: на 343 они
     помещаются только при уменьшенном кегле, иначе второй уезжает
     за правый край. */
  .ws-logic-switch { flex-direction: row; }
  .ws-logic-tab {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .ws-logic-hint { display: none; }
  /* Счётчик «01 · 02» в макете стоит НАД заголовком панели. */
  .ws-logic-panel-head { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
  .ws-logic-steps { grid-template-columns: 1fr; }
  .ws-logic-results { grid-template-columns: 1fr; }
  /* Плашка «В Web Studio дизайн начинается…» в макете не
     показывается — от неё остаётся только кнопка, как на экране 3
     SEO Studio. */
  .ws-logic-note {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: none;
    background: none;
  }
  .ws-logic-note-body,
  .ws-logic-note-mark { display: none; }
  .ws-logic-note .btn { width: 100%; }

  /* ---------- Экран 4 ----------
     Меню этапов — сетка чипов НАД карточкой, а не список под ней.
     Шесть колонок с пролётами 2 и 3 дают макетные три чипа в первом
     ряду и два во втором (тот же приём, что у слоёв SEO Studio). */
  /* Плашка распадается на два блока: полоса чипов и карточка под ней —
     так в макете. Рамку и фон берёт на себя тело карточки. */
  .ws-method-row {
    flex-direction: column-reverse;
    padding: 0;
    border: none;
    background: none;
    gap: 12px;
  }
  .ws-method-body {
    padding: 20px;
    border-radius: var(--r-card);
    border: 0.5px solid var(--text-12);
    background: var(--surface-15);
  }
  .ws-method-side { align-items: stretch; }
  .ws-method-menu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .ws-method-item {
    grid-column: span 2;
    border-radius: 10px;
    padding: 9px 8px;
    text-align: center;
    justify-content: center;
  }
  .ws-method-item:nth-child(n+4) { grid-column: span 3; }
  /* Галочка в чипе не помещается и в макете её нет. */
  .ws-method-item-mark { display: none; }
  .ws-method-dots { display: none; }

  /* ---------- Экран 5 ----------
     Колода остаётся колодой: активная карточка и корешки остальных
     по бокам. Замер макета — корешок 5 при шаге 10.5, то есть зазор
     5.5; активная тогда выходит 290.5 при колонке 343, что ровно
     совпало с измеренной шириной карточки. */
  .ws-formats-row { gap: 5.5px; }
  /* Пока ведут пальцем, ширины колонок задаёт каждый кадр JS —
     переход только догонял бы устаревшее значение. */
  .ws-formats-row.dragging { transition: none; }
  .ws-formats-row.dragging .ws-format { transition: none; }
  /* Горизонталь наша, вертикаль отдаём странице. */
  .ws-formats-row { touch-action: pan-y; }
  /* Пункты в одну колонку: auto-flow обязателен, иначе они продолжают
     уходить вправо по строкам, заданным --ws-format-rows. */
  .ws-format-items {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }
  .ws-formats-dots { display: none; }
  /* Кнопка и строка «срок / цена» выходят из-под рамки карточки и
     встают под ней во всю ширину колонки — так в макете. Рамку и фон
     берёт на себя .ws-format-box. */
  .ws-format.active {
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
  }
  .ws-format.active .ws-format-box {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--r-card);
    border: 0.5px solid var(--text-12);
    background: var(--surface-15);
    /* Содержимое прибито по КОНЕЧНОЙ ширине колонки (fixFormatWidth),
       поэтому пока колонка едет от корешка к раскрытой карточке, оно
       шире неё — и должно обрезаться коробкой, как на десктопе это
       делает сама .ws-format. */
    overflow: hidden;
  }
  /* Раскрытая карточка поверх корешков: подвал уходит под них
     отрицательными полями и без слоя оказался бы перекрыт. */
  .ws-format.active { z-index: 2; }
  .ws-format.active .ws-format-foot-wrap {
    position: relative;
    z-index: 2;
    /* Наружу на ширину корешков: числа слева и справа ставит
       updateFormats (web.js), шаг корешка 10.5. */
    margin-left: calc(var(--ws-fmt-left, 0) * -10.5px);
    margin-right: calc(var(--ws-fmt-right, 0) * -10.5px);
  }
  /* Свёрнутый корешок в макете ровно 5px. Собственные поля карточки
     (15 с каждой стороны) не дали бы ему сузиться меньше 30 — грид
     держит колонку, а содержимое из неё торчит. */
  .ws-format:not(.active) {
    padding: 0;
    min-width: 0;
    /* Корешок кончается вместе с коробкой активной карточки, как в
       макете. Высоту даёт updateFormats: сам по себе корешок — ячейка
       грида и растягивался на всю строку, то есть свисал под кнопку и
       строку «срок / цена» ровно на высоту подвала. */
    height: var(--ws-box-h, auto);
    align-self: start;
  }
  /* В корешке шириной 5px от повёрнутого названия видны только
     обрывки букв — в макете корешок пустой. */
  .ws-format:not(.active) .ws-format-name { display: none; }
  /* Замыкающая плашка про Design в мобильном макете не показывается. */
  .ws-formats-note { display: none; }

  /* ---------- Экран 6 ----------
     Фильтров в макете нет, полоса проектов — ПОД карточкой, а
     замыкающая заметка уходит в самый низ. */
  .ws-case-filters { display: none; }
  .ws-case-col { display: flex; }
  .ws-case-body { order: 1; }
  .ws-case-rail {
    order: 2;
    flex-direction: row;
    gap: 4px;
  }
  .ws-case-rail-item { width: auto; height: 3px; flex: 1; }
  .ws-cases-note { order: 3; }

  /* ---------- Экран 7 ----------
     Аккордеон «Совместная работа»: раскрыт один пункт. */
  .ws-team-body {
    position: static;
    opacity: 1;
    visibility: visible;
  }
  .ws-team-step:not(.active) .ws-team-body { display: none; }

  /* ---------- Экран 8 ----------
     Поля лежат прямо на странице, без плашки, согласие — ПОД кнопкой
     отправки (как на восьмом экране SEO Studio). */
  .ws-form { grid-template-columns: 1fr; }
  .ws-form-panel {
    padding: 0;
    border: none;
    background: none;
  }
  #ws-request .ws-left { display: contents; }
  #ws-request .ws-badge { order: 1; }
  #ws-request .ws-h2 { order: 2; }
  #ws-request .ws-lead { order: 3; }
  #ws-request .ws-request-col { order: 4; }
  #ws-request .ws-consent { order: 5; }
  #ws-request .ws-two { gap: 16px; }
  /* Кегль ввода 16 — ниже Safari на iOS зумит страницу при фокусе. */
  .ws-input { font-size: 16px; }
}

@media (max-width: 640px) {
  .ws-case-head { flex-direction: column; align-items: flex-start; }
  .ws-format-name,
  .ws-case-name { white-space: normal; }
}