/* WMTech: лендинг.
   Светлая холодная основа и воздух из варианта B, шрифты Unbounded + Golos Text из варианта C.
   Лента из знака WM рисуется штрихом SVG тремя цветами логотипа, без градиентов.
   Тёмные секции (этапы и заявка) работают как контрастные акценты внутри светлой страницы. */

:root {
  /* Светлая основа */
  --ice: #f3f6fc;
  --cloud: #e7eefa;
  --ink: #0f1b4d;
  --slate: #4a5680;
  --rule: #cdd7ea;
  --rule-strong: #8d9bc0;

  /* Цвета логотипа */
  --blue: #1832ab;
  --blue-press: #10237f;
  --mid: #4c84cf;
  --sky: #77c5f6;

  /* Тёмные секции */
  --night: #0e1a4f;
  --night-raise: #14245f;
  --night-line: #2b3c82;
  --night-edge: #3d509a;
  --night-field: #7486c9;
  --on-night: #eef3ff;
  --on-night-soft: #aab8e2;

  --danger: #a3201a;
  --danger-on-night: #ff9a8b;

  /* Типографика */
  --display: "Unbounded", "Segoe UI", Arial, sans-serif;
  --text: "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;

  /* Сетка и ритм */
  --gutter: clamp(16px, 4.4vw, 72px);
  --max: 1280px;
  --gap: clamp(20px, 2.6vw, 40px);
  --section: clamp(88px, 11vw, 168px);
  --head-gap: clamp(48px, 6vw, 88px);
  --top-h: 76px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Тема по умолчанию: светлая */
  --fg: var(--ink);
  --fg-soft: var(--slate);
  --line: var(--rule);
  --line-strong: var(--ink);
  --link: var(--blue);
  --focus: var(--mid);
  --btn-bg: var(--blue);
  --btn-bg-hover: var(--blue-press);
  --btn-fg: var(--ice);
}

/* Тёмная секция переопределяет только переменные темы */
.night {
  --fg: var(--on-night);
  --fg-soft: var(--on-night-soft);
  --line: var(--night-line);
  --line-strong: var(--night-line);
  --link: var(--sky);
  --focus: var(--sky);
  --btn-bg: var(--sky);
  --btn-bg-hover: transparent;
  --btn-fg: var(--ink);
  color-scheme: dark;
  background: var(--night);
  color: var(--fg);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 1px);
}

body {
  margin: 0;
  background: var(--ice);
  color: var(--fg);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
input, textarea, button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--sky); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 30;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--ice);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Кнопки ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 32px;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:active { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
}
/* Отклик на нажатие: цвет меняется сразу, при отпускании плавно возвращается */
.btn:active:not(:disabled):not(.is-busy) {
  transform: scale(0.97);
  transition: transform 160ms var(--ease), background-color 0ms, border-color 0ms, color 0ms;
}

/* На тёмном фоне наведение и нажатие инвертируют кнопку: прозрачный фон, голубой контур и текст */
.night .btn:active { color: var(--sky); border-color: var(--sky); }
@media (hover: hover) and (pointer: fine) {
  .night .btn:hover { color: var(--sky); border-color: var(--sky); }
}

.btn--ghost {
  min-height: 46px;
  padding: 0 20px;
  font-size: 14px;
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn--ghost:active { background: var(--blue); border-color: var(--blue); color: var(--ice); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--blue); border-color: var(--blue); color: var(--ice); }
}

/* ---------- Шапка ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ice);
  border-bottom: 1px solid var(--rule);
}

.top__row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  min-height: var(--top-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 58px; height: 29px; }
.brand__name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  font-size: 16px;
  font-weight: 500;
}
.nav a {
  padding-block: 6px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { border-bottom-color: var(--sky); }
}

/* ---------- Первый экран ---------- */

.hero { position: relative; }

.hero__inner {
  padding-top: clamp(32px, 3.6vw, 64px);
  padding-bottom: clamp(36px, 3.4vw, 56px);
}

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 6.4vw + 12px, 128px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-left: -0.04em;
}

.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  white-space: nowrap;
}
.hero__line > span { display: block; }

.hero__base {
  display: grid;
  gap: clamp(24px, 2.4vw, 32px);
  max-width: 44em;
  margin-top: clamp(28px, 3.4vw, 52px);
}

.hero__lead {
  max-width: 36em;
  color: var(--fg);
  font-size: clamp(18px, 1.3vw, 21px);
  line-height: 1.55;
}

.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.hero__note {
  max-width: 20em;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

/* Лента из знака WM (вариант B): спокойная волна слева переходит в пики справа. */
.ribbon {
  display: block;
  width: 100%;
  height: clamp(190px, 23.62vw, 640px);
  overflow: visible;
  pointer-events: none;
}
/* На широких экранах лента поднимается в пустую правую половину и целиком помещается в первый экран */
@media (min-width: 1280px) {
  .ribbon { margin-top: -12.5vw; }
}
.ribbon path { fill: none; stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; }
/* Мягкий переход цветов логотипа вдоль всей линии (градиент по оси X, общий для трёх отрезков). */
.ribbon path { stroke: url(#ribbon-grad); }
.ribbon--wide { display: none; }
/* Шире 1920 px: лента не растёт в высоту, а вытягивается по ширине; толщина как на 1920 px, контент не перекрывается */
@media (min-width: 1921px) {
  .ribbon--std { display: none; }
  .ribbon--wide { display: block; height: 453px; margin-top: -240px; }
  .ribbon.ribbon--wide path { stroke: url(#ribbon-grad-wide); stroke-width: 50px; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}
/* У растянутой ленты штрих считается в экранных пикселях, поэтому вместо отрисовки штриха открываем её слева направо */
@media (min-width: 1921px) and (prefers-reduced-motion: no-preference) {
  .ribbon--wide { animation: wipe 1800ms cubic-bezier(0.15, 0.6, 0.85, 0.4) 250ms both; }
  .fonts-wait .ribbon--wide { animation-play-state: paused; }
}
@keyframes wipe { from { clip-path: inset(-40px 100% -40px 0); } to { clip-path: inset(-40px 0 -40px 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Заголовок появляется быстро и сразу читается; линия рисуется сама по себе: быстро, медленнее в середине, быстро к концу. */
  .hero__line > span { animation: rise 560ms var(--ease) both; }
  .hero__line:nth-child(2) > span { animation-delay: 70ms; }
  .hero__line:nth-child(3) > span { animation-delay: 140ms; }
  /* Строки ждут Unbounded не дольше 500 мс (класс ставит скрипт в head) */
  .fonts-wait .hero__line > span,
  .fonts-wait .ribbon path { animation-play-state: paused; }

  /* Одна линия, один путь: рисуется целиком, без стыков и кружков на них. */
  /* Стартует вместе с заголовком (оба ждут шрифт), подхватывает движение, пока поднимается третья строка. */
  .ribbon path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1800ms cubic-bezier(0.15, 0.6, 0.85, 0.4) 250ms forwards; }
}

@keyframes rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Разделы: общий каркас ---------- */

.section { padding-block: var(--section); }

.head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gap);
  row-gap: 20px;
  align-items: end;
  margin-bottom: var(--head-gap);
}

.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw + 8px, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.head__intro {
  max-width: 30em;
  color: var(--fg-soft);
  font-size: clamp(17px, 1.2vw, 19px);
  text-wrap: pretty;
}
/* В светлых секциях вводная фраза набрана полной краской, как описания под ней */
.section:not(.night) .head__intro { color: var(--fg); }

/* ---------- Что разрабатываем ---------- */

.dir {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gap);
  row-gap: 10px;
  align-items: center;
  padding-block: clamp(22px, 2.4vw, 36px);
  border-top: 2px solid var(--line-strong);
}
.dir:last-child { border-bottom: 2px solid var(--line-strong); }

.dir__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw + 8px, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.dir__text {
  max-width: 28em;
  color: var(--fg);
  font-size: 17px;
  text-wrap: pretty;
  line-height: 1.55;
}

.dirs__note {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 18px;
}

/* ---------- Как работаем: этапы над и под шкалой из цветов логотипа ---------- */

.track {
  --seg-1: #1832ab;
  --seg-2: #2649b5;
  --seg-3: #3a68c3;
  --seg-4: #4c84cf;
  --seg-5: #589bdb;
  --seg-6: #67b1e9;
  --seg-7: #77c5f6;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  /* Четыре строки верхнего ряда, шкала, четыре строки нижнего. Общие строки выравнивают номера и заголовки. */
  grid-template-rows: repeat(4, auto) 12px repeat(4, auto);
}

.track__scale { display: none; }
.track__scale span:nth-child(1) { background: #1832ab; }
.track__scale span:nth-child(2) { background: #2649b5; }
.track__scale span:nth-child(3) { background: #3a68c3; }
.track__scale span:nth-child(4) { background: #4c84cf; }
.track__scale span:nth-child(5) { background: #589bdb; }
.track__scale span:nth-child(6) { background: #67b1e9; }
.track__scale span:nth-child(7) { background: #77c5f6; }

.stage {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}
.stage:nth-child(1) { grid-column: 1 / span 2; --seg: var(--seg-1); }
.stage:nth-child(2) { grid-column: 2 / span 2; --seg: var(--seg-2); }
.stage:nth-child(3) { grid-column: 3 / span 2; --seg: var(--seg-3); }
.stage:nth-child(4) { grid-column: 4 / span 2; --seg: var(--seg-4); }
.stage:nth-child(5) { grid-column: 5 / span 2; --seg: var(--seg-5); }
.stage:nth-child(6) { grid-column: 6 / span 2; --seg: var(--seg-6); }
.stage:nth-child(7) { grid-column: 7 / span 2; --seg: var(--seg-7); }

.stage::after {
  content: "";
  grid-row: 5;
  grid-column: 1;
  width: 50%;
  background: var(--seg);
}
.stage:last-child::after { width: 100%; }

.stage__body {
  display: grid;
  grid-template-rows: subgrid;
  grid-column: 1;
  padding-inline: 16px 20px;
  border-left: 1px solid var(--line);
}
.stage:nth-child(odd) .stage__body { grid-row: 1 / span 4; padding-bottom: 28px; }
.stage:nth-child(even) .stage__body { grid-row: 6 / span 4; padding-top: 28px; }

.stage__n {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-soft);
}

.stage__name {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.stage__do {
  margin-top: 10px;
  color: var(--fg-soft);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.stage__get {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
}
.stage__get span {
  display: block;
  color: var(--sky);
  font-size: 14px;
  font-weight: 500;
}

.process__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px 32px;
  margin-top: clamp(64px, 8vw, 120px);
}
.process__cta-text {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw + 6px, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Низ тёмной секции равен отступу CTA от этапов: строка с кнопкой завершает секцию */
#process { padding-bottom: clamp(72px, 8vw, 120px); }

/* ---------- Принципы работы ---------- */

/* Секция отделена шагом тона, а не очередной линией */
#principles { background: var(--cloud); }

.rules {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 7vw, 120px);
  row-gap: 48px;
  align-items: start;
}

.rules__head {
  position: sticky;
  top: calc(var(--top-h) + 32px);
  display: grid;
  gap: 24px;
}

.rules__list {
  display: grid;
  gap: clamp(40px, 4vw, 64px);
}

.rule {
  display: grid;
  gap: 12px;
}

.rule__name {
  font-family: var(--display);
  font-size: clamp(21px, 1.2vw + 10px, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rule__text {
  max-width: 34em;
  color: var(--fg);
  text-wrap: pretty;
}

.rule__stack {
  color: var(--fg-soft);
  font-size: 15px;
  font-weight: 400;
}

/* ---------- Заявка ---------- */

.lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 6vw, 112px);
  row-gap: 56px;
  align-items: start;
}

.lead__intro {
  display: grid;
  gap: 24px;
  align-content: start;
}

.lead__text {
  max-width: 26em;
  color: var(--fg-soft);
  font-size: clamp(17px, 1.2vw, 19px);
}

.lead__subtitle {
  margin-top: 32px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
}

.next {
  display: grid;
  gap: 12px;
  font-size: 16px;
}
.next li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  color: var(--fg-soft);
  text-wrap: pretty;
}
.next li span {
  font-family: var(--display);
  font-weight: 500;
  color: var(--sky);
}

/* Форма */
.form { display: grid; gap: 26px; }

.form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 24px;
}

.field { display: grid; gap: 8px; align-content: start; }

.field__label { font-size: 16px; font-weight: 600; }
.req { margin-left: 3px; color: #ff6b6b; font-weight: 600; }
.form__req-note { margin-top: 10px; color: var(--fg-soft); font-size: 14px; }

.field__opt {
  margin-left: 6px;
  color: var(--fg-soft);
  font-weight: 400;
}

.field__hint {
  color: var(--fg-soft);
  font-size: 14px;
  line-height: 1.45;
}

.field__input {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--night-field);
  border-radius: var(--radius);
  background: var(--night-raise);
  color: var(--on-night);
  font-size: 17px;
  line-height: 1.4;
  caret-color: var(--sky);
  transition: border-color 150ms ease;
}
/* Автозаполнение браузера: оставить поле в тёмной теме (inset-заливка вместо светлого фона, не тень) */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-night);
  box-shadow: 0 0 0 1000px var(--night-raise) inset;
  transition: background-color 9999s;
}
@media (hover: hover) and (pointer: fine) {
  .field__input:hover { border-color: var(--on-night-soft); }
}
.field__input:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 0;
  border-color: var(--sky);
}
.field__input--area { min-height: 168px; resize: vertical; }

.field__error {
  color: var(--danger-on-night);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}
.field__error:empty { display: none; }

.field.is-invalid .field__input { border-color: var(--danger-on-night); }
/* Вместе с рамкой даёт линию 2 px; голубой фокус не перекрывается */
.field.is-invalid .field__input:not(:focus-visible) {
  outline: 1px solid var(--danger-on-night);
  outline-offset: -2px;
}

/* Чекбокс согласия в стиле тёмной темы */
.field--check {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
.field--check .field__error { grid-column: 2; }

.check__box {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--on-night-soft);
  border-radius: 3px;
  background: var(--night-raise);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.check__box::before {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border-left: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  transition: transform 150ms var(--ease), opacity 100ms ease;
}
.check__box:checked { background: var(--sky); border-color: var(--sky); }
.check__box:checked::before { transform: rotate(-45deg) scale(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .check__box:hover { border-color: var(--sky); }
}
.check__box:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.field--check.is-invalid .check__box { border-color: var(--danger-on-night); }

.check__label {
  color: var(--fg-soft);
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__nojs {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-soft);
  font-size: 15px;
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 4px;
}

/* Ширина вмещает и «Отправить заявку», и «Отправляем заявку…»: кнопка не дёргается при отправке */
.btn--submit { min-width: 288px; overflow: hidden; }

.btn--submit:disabled { cursor: not-allowed; }
.btn--submit:disabled:not(.is-busy) {
  background: var(--night-line);
  border-color: var(--night-line);
  color: var(--on-night-soft);
}

/* Отправка: кнопка заблокирована, по нижнему краю идёт полоса */
.btn--submit.is-busy,
.btn--submit.is-busy:hover,
.btn--submit.is-busy:active {
  cursor: progress;
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}
.btn--submit.is-busy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36%;
  height: 3px;
  background: var(--ink);
  animation: sending 1100ms linear infinite;
}
@keyframes sending {
  from { transform: translateX(-100%); }
  to { transform: translateX(280%); }
}

.form__status {
  color: var(--fg-soft);
  font-size: 15px;
  line-height: 1.5;
}
.form__status:empty { display: none; }
.form__status.is-error { color: var(--danger-on-night); font-weight: 500; }

/* Ошибки и статус появляются мягко при переходе из display: none */
.field__error,
.form__status { transition: opacity 150ms var(--ease), transform 150ms var(--ease); }
@starting-style {
  .field__error,
  .form__status { opacity: 0; transform: translateY(-4px); }
}

.done {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--night-edge);
  border-radius: var(--radius);
  background: var(--night-raise);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
@starting-style {
  .done { opacity: 0; transform: translateY(8px); }
}
.done__title {
  font-family: var(--display);
  font-size: clamp(24px, 2vw + 8px, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sky);
  text-wrap: balance;
}
.done__title:focus { outline: none; }
.done__text { color: var(--fg-soft); }
.done__again {
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--sky);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

/* ---------- Подвал ---------- */

.foot { padding-block: clamp(56px, 6vw, 88px); background: var(--ice); }

.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  color: var(--slate);
  font-size: 15px;
}
.foot__mark { width: 96px; height: 48px; }
.foot__org {
  margin-right: auto;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(17px, 0.6vw + 12px, 20px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Область нажатия около 44 px, раскладка не сдвигается */
.foot__link {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  color: var(--ink);
}

/* ---------- Политика конфиденциальности ---------- */

.doc {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: var(--section);
}

.doc__head {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* Длинное «конфиденциальности» должно помещаться в строку от 360 px */
.doc__head .h2 {
  font-size: clamp(22px, 6.2vw, 72px);
  overflow-wrap: break-word;
  hyphens: auto;
}

.doc__date { color: var(--slate); font-size: 16px; }

.doc__body { max-width: 44em; }
.doc__part + .doc__part { margin-top: 48px; }
.doc__body h2 {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  font-family: var(--display);
  font-size: clamp(20px, 1vw + 12px, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.doc__body p,
.doc__body ul { margin-top: 16px; }
.doc__body p,
.doc__body li { text-wrap: pretty; }
.nobr { white-space: nowrap; }
.doc__body ul { padding-left: 1.2em; list-style: disc; }
.doc__body li + li { margin-top: 6px; }
.doc__body li::marker { color: var(--mid); }

/* ---------- Адаптив ---------- */

@media (min-width: 1101px) {
  /* Номер этапа в цвет своего отрезка; у тёмных отрезков 1-4 не хватает контраста, им голубой */
  .stage__n { color: var(--sky); font-size: 16px; }
  .stage:nth-child(n+5) .stage__n { color: var(--seg); }
  /* Отрыв результата от описания в самой высокой колонке ряда */
  .stage__get { margin-top: 22px; }
}

@media (min-width: 901px) {
  /* Политика в той же сетке 5fr/7fr, что и строки «Что разрабатываем» */
  .doc__body { max-width: none; }
  .doc__part {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--gap);
    padding-top: 24px;
    border-top: 2px solid var(--ink);
  }
  .doc__part h2 { padding-top: 0; border-top: 0; }
  .doc__part > div { max-width: 40em; }
  .doc__part > div > :first-child { margin-top: 0; }
}

/* Планшет: навигация ещё помещается в шапку */
@media (min-width: 761px) and (max-width: 900px) {
  .top__row { gap: 20px; }
  .nav { gap: 16px; font-size: 15px; }
  .top .btn--ghost { padding: 0 16px; }
}

@media (max-width: 1100px) {
  .track__scale {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: 10px;
  }
  .track { display: block; }
  .stage {
    display: block;
    padding-block: 28px;
    border-bottom: 1px solid var(--line);
  }
  .stage::after { content: none; }
  .stage__body,
  .stage:nth-child(odd) .stage__body,
  .stage:nth-child(even) .stage__body {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--gap);
    align-items: baseline;
    padding: 0;
    border: 0;
  }
  .stage__n {
    grid-row: 1 / 3;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--seg);
    border-radius: 3px;
    background: var(--night);
    color: var(--on-night);
    font-size: 16px;
  }
  .stage__name { grid-column: 2 / -1; margin-top: 0; font-size: 22px; }
  .stage__do { grid-column: 2 / -1; }
  .process__cta { border-top: 0; padding-top: 0; margin-top: 40px; }
}

@media (max-width: 900px) {
  .head,
  .dir,
  .rules,
  .lead__grid { grid-template-columns: minmax(0, 1fr); }
  .head { align-items: start; }
  .dir { align-items: start; }
  .rules__head { position: static; }
}

@media (max-width: 760px) {
  .nav { display: none; }
}

/* Подвал до 1100 px в две строки по одной левой оси: знак и ТОО, под ними ссылка и ©.
   В одну строку он помещается только шире 1100 px, иначе ссылка и © расходятся по диагонали. */
@media (min-width: 601px) and (max-width: 1100px) {
  .foot__row { column-gap: 24px; }
  .foot__org { flex-basis: calc(100% - 120px); margin-right: 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .foot__mark { width: 64px; height: 32px; }
  .foot__org { flex-basis: calc(100% - 88px); }
}

@media (max-width: 600px) {
  :root { --top-h: 64px; }
  body { font-size: 17px; }

  .brand__mark { width: 48px; height: 24px; }
  .brand__name { font-size: 16px; }
  .top .btn--ghost { min-height: 44px; padding: 0 14px; font-size: 13px; }

  /* Главный заголовок заметно крупнее заголовков секций, «разрабатываем» не упирается в поле */
  .hero__title { font-size: clamp(36px, 10.6vw, 50px); }
  .h2 { font-size: clamp(26px, 7.8vw, 34px); }

  .ribbon { height: 140px; }
  .ribbon path { stroke-width: 54; }

  .hero__act .btn { width: 100%; }
  .hero__note { font-size: 14px; font-weight: 400; }
  :root { --section: 64px; --head-gap: 32px; }
  #directions { padding-top: 24px; }

  .stage__body,
  .stage:nth-child(odd) .stage__body,
  .stage:nth-child(even) .stage__body {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 0;
  }
  .stage__n { grid-row: 1 / 4; }
  .stage__name,
  .stage__do,
  .stage__get { grid-column: 2; }
  .stage__name { font-size: 20px; }

  .process__cta .btn,
  .btn--submit { width: 100%; min-width: 0; }

  .form__pair { grid-template-columns: minmax(0, 1fr); }
  .field__input { font-size: 16px; }

  .foot__mark { width: 80px; height: 40px; }
  .foot__org { margin-right: 0; flex-basis: 100%; }

  .doc__head { margin-bottom: 40px; }
  .doc__body h2 { font-size: 18px; }
}

@media (max-width: 380px) {
  .brand__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ribbon path { stroke-dasharray: none; stroke-dashoffset: 0; }
  /* Отправка без движения: полоса во всю ширину стоит на месте */
  .btn--submit.is-busy::after { width: 100%; transform: none; opacity: 0.55; }
}