/*
 * Минаков Мишин — ИИ-партнёры.
 * Контракт — DESIGN.md в корне проекта: токены и компоненты берутся оттуда,
 * новый токен сначала вносится туда. Без inline-стилей и внешних запросов (CSP).
 *
 * Размеры раскладки — только токены ниже. Числа в em внутри текста (ритм
 * абзацев, риски списков, оптические сдвиги) и толщины линий рисунков
 * описаны в DESIGN.md отдельно.
 */

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-var.85d35860d517.woff2") format("woff2");
  font-weight: 250 700;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* цвет — DESIGN.md, colors */
  --navy: #0F2A44;
  --white: #FFFFFF;
  --mist: #E6EAF0;
  --haze: #C9D4E0;
  --slate: #4D5F73;
  --rule: #CDD5DF;
  --glow: #FF8D15;      /* накал на navy: только край распределения */
  --glow-ink: #C45C00;  /* накал на светлом: только графика края */
  --line-on-navy: rgba(255, 255, 255, .38);
  --dot-on-navy: rgba(255, 255, 255, .46);
  --line-on-navy-strong: rgba(255, 255, 255, .6);

  /* шрифт и шкала — DESIGN.md, typography */
  --font: "Nunito Sans", system-ui, sans-serif;
  --fs-fine: 14px;
  --fs-small: 16px;
  --fs-body: 18px;
  --fs-lead: 21px;
  --fs-h3: 21px;
  --fs-h2: clamp(26px, 1vw + 21px, 36px);
  --fs-h1: clamp(34px, 1.6vw + 26px, 48px);
  --fs-display: clamp(36px, 2.9vw + 22px, 64px);

  /* отступы — DESIGN.md, spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --pad: clamp(20px, 4.45vw, 64px);
  --section: clamp(64px, 7vw, 112px);
  --gap: 24px;
  --page-max: 1440px;

  /* длина строки — DESIGN.md, spacing */
  --measure: 34em;
  --measure-title: 16em;
  --label-col: 9.5em;

  /* размеры компонентов — DESIGN.md, sizes */
  --r: 4px;
  --control-h: 52px;
  --target: 44px;
  --logo-h: 40px;
  --logo-h-compact: 22px;
  --logo-w-small: 280px;
  --glyph-h: 26px;
  --step-fig: 240px;
  --mark-max: 420px;
  --portrait: 312px;
  --portrait-small: 240px;
  --figure-narrow: 720px;
  --relief-h: 210px;
  /* шире 1440 px рамка рельефа растёт с шириной: видна та же часть рисунка,
     что на 1440, вершины не срезаны (DESIGN.md, sizes) */
  --relief-box: max(var(--relief-h), calc(100vw * 210 / 1440));
  --hero-min: clamp(600px, calc(100svh - 188px), 820px);
}

/* ------------------------------------------------------------------ база */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s5);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  color: var(--navy);
  background: var(--white);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 300;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  font-stretch: 112%;
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
  line-height: 1.3;
}

strong,
b {
  font-weight: 650;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.dark {
  color: var(--white);
  background: var(--navy);
}

.dark :focus-visible {
  outline-color: var(--white);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nb {
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: var(--s2);
  z-index: 20;
  padding: var(--s2) var(--s4);
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
  background: var(--white);
  transform: translateY(-200%);
}

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

/* ------------------------------------------------------------------ раскладка */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

.section:not(.band) + .section:not(.band) {
  padding-top: 0;
}

.band--mist {
  background: var(--mist);
}

.section__title {
  margin-bottom: var(--s6);
}

/* заголовок с мини-знаком: «Стандартное», «Нестандартное» */
.section__title--glyph {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.section__intro {
  max-width: var(--measure);
  margin-bottom: var(--s7);
}

.lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.text {
  max-width: var(--measure);
}

.text p + p,
.text p + ul,
.text ul + p {
  margin-top: .8em;
}

.more {
  margin-top: var(--s6);
  font-weight: 600;
}

/* список с риской: короткий штрих, как деление на оси; тот же маркер в тексте заметок */
.ticks,
.prose ul,
.field__help ul {
  padding: 0;
  list-style: none;
}

.ticks > li,
.prose ul > li,
.field__help li {
  position: relative;
  padding-left: 1.3em;
  /* длинные имена без пробелов переносятся, а не раздвигают страницу на 320 px */
  overflow-wrap: break-word;
}

.ticks > li + li {
  margin-top: .45em;
}

.ticks > li::before,
.prose ul > li::before,
.field__help li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: .7em;
  height: 1px;
  background: currentColor;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--s5);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
}

.btn--main {
  color: var(--white);
  background: var(--navy);
}

.btn--main:hover {
  background: var(--slate);
}

.btn--quiet {
  color: var(--navy);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--slate);
}

.btn--quiet:hover {
  box-shadow: inset 0 0 0 2px var(--navy);
}

.btn:active {
  transform: translateY(1px);
}

.dark .btn--main {
  color: var(--navy);
  background: var(--white);
}

.dark .btn--main:hover {
  background: var(--mist);
}

.dark .btn--quiet {
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-on-navy-strong);
}

.dark .btn--quiet:hover {
  box-shadow: inset 0 0 0 1px var(--white);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* заглушка для фактов, которых ещё нет */
.tbd {
  display: inline-block;
  padding: 0 .45em;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  color: var(--slate);
  white-space: nowrap;
  border: 1px dashed var(--slate);
  border-radius: var(--r);
}

/* ------------------------------------------------------------------ шапка */

.site-header {
  position: relative;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding-top: var(--s5);
}

.brand {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 0;
}

.brand img {
  width: auto;
  height: var(--logo-h-compact);
}

@media (min-width: 1240px) {
  .brand img {
    height: var(--logo-h);
  }
}

.nav-list {
  display: flex;
  gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding-block: var(--s2);
  font-size: var(--fs-small);
  font-weight: 450;
  white-space: nowrap;
  text-decoration: none;
  text-underline-offset: var(--s2);
}

.nav-list a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

.nav-list a[aria-current] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

.menu {
  display: none;
  position: relative;
  flex: none;
}

.menu summary {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--s4);
  font-size: var(--fs-small);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-on-navy-strong);
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu summary:hover,
.menu[open] summary {
  box-shadow: inset 0 0 0 1px var(--white);
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s3));
  min-width: max-content;
  padding: var(--s2) 0;
  background: var(--navy);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-on-navy);
}

.menu__panel .nav-list {
  flex-direction: column;
  gap: 0;
}

.menu__panel .nav-list a {
  display: block;
  padding: var(--s3) var(--s7) var(--s3) var(--s5);
  font-size: var(--fs-body);
}

/* ------------------------------------------------------------------ шапка страницы */

.page-head {
  padding-top: clamp(var(--s7), 6vw, var(--s9));
  padding-bottom: clamp(var(--s8), 6vw, var(--s9));
}

.page-head h1 {
  max-width: var(--measure-title);
}

.page-head .lead {
  margin-top: var(--s5);
  color: var(--haze);
}

.page-head__meta {
  margin-top: var(--s4);
  font-size: var(--fs-small);
  color: var(--haze);
}

/* ------------------------------------------------------------------ формы */

/* вход и смена пароля: DESIGN.md, components field */
.form {
  display: grid;
  gap: var(--s5);
  max-width: 26rem;
}

.field {
  display: grid;
  gap: var(--s2);
}

.field__label {
  font-size: var(--fs-small);
  font-weight: 600;
}

.field input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--s4);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--slate);
  border-radius: var(--r);
}

.field input[aria-invalid="true"] {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.field__error p,
.form__errors p {
  margin: 0;
  font-weight: 600;
}

.field__help {
  font-size: var(--fs-small);
  color: var(--slate);
}

/* список с чертой — общее правило .ticks выше */
.field__help ul {
  margin: 0;
}

.form__errors {
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--mist);
  border-radius: var(--r);
}

/* ------------------------------------------------------------------ футер */

.site-footer {
  border-top: 1px solid var(--line-on-navy);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
  align-items: start;
  padding-top: var(--s8);
  padding-bottom: var(--s6);
}

.site-footer__brand {
  grid-column: 1 / span 5;
}

.site-footer__brand img {
  width: auto;
  height: var(--logo-h-compact);
}

.site-footer__brand p {
  margin-top: var(--s4);
  font-size: var(--fs-small);
  color: var(--haze);
}

.site-footer__nav {
  grid-column: 6 / span 5;
}

.site-footer__nav .nav-list {
  flex-wrap: wrap;
  column-gap: var(--s5);
  row-gap: 0;
}

.site-footer__cta {
  grid-column: 11 / span 2;
  justify-self: end;
  white-space: nowrap;
}

.site-footer__base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: var(--s6);
  row-gap: var(--s3);
  padding-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--haze);
  border-top: 1px solid var(--line-on-navy);
}

.site-footer__copy {
  margin: 0;
}

/* вошедший сотрудник: имя, смена пароля, выход */
.site-footer__account {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s5);
  row-gap: var(--s2);
}

.site-footer__account a,
.site-footer__account .linkbtn {
  color: var(--white);
}

.site-footer__account form {
  display: contents;
}

/* кнопка формы, которая выглядит и ведёт себя как ссылка (выход: только POST) */
.linkbtn {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  background: none;
  border: 0;
  cursor: pointer;
}

.linkbtn:hover {
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ первый экран главной */

.hero {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-min);
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  padding-top: clamp(var(--s7), 7vh, var(--s8));
  /* место под рельеф растёт вместе с его рамкой */
  padding-bottom: calc(var(--s10) + var(--relief-box) - var(--relief-h));
}

.hero__title {
  grid-column: 1 / -1;
  margin-bottom: var(--s6);
  font-size: var(--fs-display);
  font-weight: 300;
  font-stretch: 112%;
  line-height: 1.07;
  letter-spacing: -0.01em;
}

.hero__lead {
  grid-column: 1 / span 6;
  grid-row: 2;
  max-width: var(--measure);
  margin-bottom: var(--s6);
  font-size: var(--fs-lead);
  color: var(--haze);
}

.hero__grid .actions {
  grid-column: 1 / span 6;
  grid-row: 3;
}

.hero__relief {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: var(--relief-box);
  pointer-events: none;
}

/* движение рельефа (static/js/relief.js): когда первый кадр холста готов,
   холст закрывает статичный <img>; под reduced motion и после сбоя виден <img> */
.hero__relief--live {
  display: none;
}

.hero__relief--live.is-on {
  display: block;
}

.hero__relief.is-covered {
  visibility: hidden;
}

/* ------------------------------------------------------------------ эксперимент */

.exp {
  position: relative;
  grid-column: 7 / -1;
  grid-row: 2 / span 2;
  align-self: end;
}

.exp__svg {
  width: 100%;
  overflow: visible;
}

.exp__axis {
  stroke: var(--line-on-navy);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.exp__dot {
  fill: var(--dot-on-navy);
}

/* у анимируемых линий нет non-scaling-stroke: с ним Chromium неверно считает pathLength */
.exp__curve,
.exp__edge {
  fill: none;
  stroke-width: 1.3;
}

.exp__curve {
  stroke: var(--white);
  stroke-opacity: .8;
}

.exp__edge {
  stroke: var(--glow);
}

.exp__lead {
  fill: none;
  stroke: var(--line-on-navy-strong);
  stroke-width: .9;
}

.exp__ring {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.exp__pick {
  fill: var(--glow);
}

/* координаты подписи — от точки края; печатает design/build_figures.py */
.exp__cap {
  position: absolute;
  left: calc(77.86% - 1px);
  bottom: 34.88%;
  max-width: 11em;
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.3;
}

@media (prefers-reduced-motion: no-preference) {
  .exp__curve,
  .exp__edge,
  .exp__lead {
    stroke-dasharray: 1;
    animation: exp-draw .55s cubic-bezier(.3, .6, .4, 1) 1.5s both;
  }

  .exp__edge {
    animation-delay: 2s;
  }

  .exp__lead {
    animation-duration: .25s;
    animation-delay: 2.405s;
  }

  .exp__pick {
    animation: exp-fall .615s cubic-bezier(.45, 0, .95, .55) 1.67s both;
  }

  .exp__ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: exp-lock .5s cubic-bezier(.2, .7, .3, 1) 2.285s both;
  }

  .exp__cap {
    animation: exp-show .45s ease-out 2.465s both;
  }

  @keyframes exp-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  /* высота падения точки края — от её места до верха рамки (build_figures.py) */
  @keyframes exp-fall {
    from { transform: translateY(-289px); opacity: 0; }
    15% { opacity: 1; }
    to { transform: none; opacity: 1; }
  }

  @keyframes exp-lock {
    from { transform: scale(2.6); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  @keyframes exp-show {
    from { transform: translateY(var(--s1)); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

/* ------------------------------------------------------------------ рисунки: общие линии */

.fig-axis {
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fig-curve {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fig-edge {
  fill: none;
  stroke: var(--glow-ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.fig-edge-dot {
  fill: var(--glow-ink);
}

.fig-edge-ring {
  fill: none;
  stroke: var(--glow-ink);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.dark .fig-axis {
  stroke: var(--line-on-navy);
}

.dark .fig-curve {
  stroke: var(--white);
}

.dark .fig-edge,
.dark .fig-edge-ring {
  stroke: var(--glow);
}

.dark .fig-edge-dot {
  fill: var(--glow);
}

.glyph {
  flex: none;
  width: auto;
  height: var(--glyph-h);
}

.glyph__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.glyph__edge {
  fill: var(--glow-ink);
}

.dark .glyph__edge {
  fill: var(--glow);
}

.sigma {
  display: inline-block;
  width: .74em;
  height: .7em;
  overflow: visible;
  vertical-align: baseline;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

/* ------------------------------------------------------------------ ось «стандартное — нестандартное» */

.split {
  padding-top: var(--s8);
  padding-bottom: var(--section);
}

.split__axis {
  margin-bottom: var(--s5);
}

.split__axis svg {
  width: 100%;
  overflow: visible;
}

.split__cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.split__col:first-child {
  grid-column: 1 / span 5;
}

.split__col:last-child {
  grid-column: 7 / span 5;
}

.split__title {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/* мини-знаки у заголовков — только когда общей оси нет (до 760 px) */
.split__title .glyph,
.axis-map__labels .glyph {
  display: none;
}

.split__lead {
  margin-top: var(--s3);
  font-size: var(--fs-lead);
  color: var(--slate);
}

.split__list {
  margin-top: var(--s6);
  padding: 0;
  list-style: none;
}

.split__list > li {
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
}

.split__list h3 + p {
  margin-top: var(--s2);
}

.split__note {
  margin-top: var(--s2);
  padding-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--slate);
  border-top: 1px solid var(--rule);
}

/* «За человеком:» — обещание сайта, повторяется у каждого пункта */
.handoff {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--slate);
}

.handoff__label {
  font-weight: 650;
  color: var(--navy);
}

/* ось-карта в шапке «Что делаем»: подписи под осью ведут к разделам */
.axis-map {
  padding-top: var(--s8);
}

.axis-map__labels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.axis-map__labels > :first-child {
  grid-column: 1 / span 5;
}

.axis-map__labels > :last-child {
  grid-column: 7 / span 5;
}

.axis-map__labels a {
  display: flex;
  align-items: center;
  gap: var(--s4);
  justify-self: start;
  font-size: var(--fs-h2);
  font-weight: 400;
  font-stretch: 112%;
  line-height: 1.2;
  text-underline-offset: .2em;
}

/* ------------------------------------------------------------------ с чего начать */

.start {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
}

.start__head {
  grid-column: 1 / span 4;
}

.start__head h3 {
  margin-top: var(--s5);
  font-size: var(--fs-lead);
}

.start__col {
  grid-column: span 4;
}

.start__col h3 {
  margin-bottom: var(--s3);
}

.start .actions {
  grid-column: 5 / -1;
}

/* ------------------------------------------------------------------ шаги */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  counter-increment: step;
}

.step-fig {
  width: 100%;
  max-width: var(--step-fig);
  margin-bottom: var(--s4);
}

.step-fig__ghost {
  fill: none;
  stroke: var(--slate);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.dark .step-fig__ghost {
  stroke: var(--haze);
}

.steps__title {
  font-size: var(--fs-h3);
  font-weight: 650;
  line-height: 1.3;
}

/* номер — порядок шагов виден и так, в доступное имя он не попадает («/ ""») */
.steps__title::before,
.stage__head h3::before {
  display: inline-block;
  min-width: 1.4em;
  font-weight: 400;
  color: var(--slate);
}

.steps__title::before {
  content: counter(step);
  content: counter(step) / "";
}

.dark .steps__title::before {
  color: var(--haze);
}

.steps__title a {
  text-decoration: none;
}

.steps__title a:hover {
  text-decoration-line: underline;
}

.steps__item p {
  margin-top: var(--s2);
}

.steps__caption {
  max-width: var(--measure);
  margin-top: var(--s6);
  font-size: var(--fs-small);
  color: var(--slate);
}

.dark .steps__caption {
  color: var(--haze);
}

.page-head .steps {
  margin-top: var(--s8);
}

/* шаги подробно: страница «Как работаем» */
.stages {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--s7);
  border-top: 1px solid var(--rule);
  counter-increment: stage;
}

.stage:first-child {
  padding-top: 0;
  border-top: 0;
}

.stage__head {
  grid-column: 1 / span 4;
}

.stage__head h3 {
  font-size: var(--fs-h2);
  font-weight: 400;
  font-stretch: 112%;
  line-height: 1.2;
}

.stage__head h3::before {
  content: counter(stage);
  content: counter(stage) / "";
}

.stage__body {
  grid-column: 5 / -1;
}

/* ------------------------------------------------------------------ пункт работы: задача, что делаем, за человеком */

.task {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--s6);
  border-top: 1px solid var(--rule);
}

.task > h3 {
  grid-column: 1 / span 4;
}

.task__rows {
  grid-column: 5 / -1;
}

.rows > div {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  column-gap: var(--gap);
}

.rows > div + div {
  margin-top: var(--s4);
}

.rows dt {
  padding-top: .15em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--slate);
}

.rows dd {
  max-width: var(--measure);
}

.rows dd .ticks {
  margin-top: .2em;
}

.rows__human dt {
  color: var(--navy);
}

/* ------------------------------------------------------------------ правила */

.rules__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
}

.rules__row dt {
  grid-column: 1 / span 5;
  font-size: var(--fs-h3);
  font-weight: 400;
  font-stretch: 112%;
  line-height: 1.35;
}

.rules__row dd {
  grid-column: 6 / span 6;
}

.rules__coda {
  margin-top: var(--s6);
  padding-top: var(--s5);
  font-size: var(--fs-lead);
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ основатели */

.founders__fig svg {
  width: 100%;
}

.founders__overlap {
  fill: var(--mist);
}

/* Портреты — под вершинами кривых: колонки 4–6 и 7–9 центрированы на 37,5 %
   и 62,5 % ширины, вершины гауссиан — на 37,2 % и 62,8 % (design/build_figures.py,
   founders). Межколонник между портретами — под точкой пересечения. Имя и факты
   стоят по бокам пары, «Вместе» — под парой, под областью пересечения. */
.founders__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
  align-items: start;
  margin-top: var(--s5);
}

/* текст и портрет человека — ячейки общей сетки */
.founders__person {
  display: contents;
}

.founders__person:first-child .founders__text {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}

.founders__person:first-child .founders__photo {
  grid-column: 4 / span 3;
  grid-row: 1;
}

.founders__person:last-child .founders__photo {
  grid-column: 7 / span 3;
  grid-row: 1;
}

.founders__person:last-child .founders__text {
  grid-column: 10 / span 3;
  grid-row: 1 / span 2;
}

.founders__shared {
  grid-column: 4 / span 6;
  grid-row: 2;
}

/* Портрет: прямоугольник 3:4 без скругления, рамки, тени и фильтров.
   Пока файл грузится, место держит mist. */
.founders__photo img {
  width: 100%;
  max-width: var(--portrait);
  background: var(--mist);
}

.founders__grid h3 {
  font-size: var(--fs-lead);
}

.founders__grid h3 + p,
.founders__grid h3 + .ticks {
  margin-top: var(--s2);
}

/* ------------------------------------------------------------------ частые вопросы */

.faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.faq > h2 {
  grid-column: 1 / span 4;
}

.faq__list {
  grid-column: 5 / -1;
  border-bottom: 1px solid var(--rule);
}

.faq details {
  border-top: 1px solid var(--rule);
}

.faq summary {
  position: relative;
  padding: var(--s5) var(--s7) var(--s5) 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* плюс, который становится минусом */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--s2);
  top: calc(var(--s5) + .78em);
  width: var(--s4);
  height: 1.5px;
  background: currentColor;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: none;
}

.faq__answer {
  max-width: var(--measure);
  padding-bottom: var(--s5);
}

/* ------------------------------------------------------------------ финальный призыв */

.cta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
  align-items: end;
}

.cta__text {
  grid-column: 1 / span 8;
}

.cta__text h2 {
  font-weight: 300;
}

.cta__text p {
  margin-top: var(--s4);
  font-size: var(--fs-lead);
  color: var(--haze);
}

.cta .actions {
  grid-column: 10 / -1;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ колонки текста */

.cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s7);
}

.cols > * {
  grid-column: span 6;
}

.cols h3 + * {
  margin-top: var(--s3);
}

.cols__wide {
  grid-column: 1 / -1;
}

.cols + .cols {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--rule);
}

.defs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
}

.defs dt {
  font-weight: 650;
}

.defs dd {
  margin-top: var(--s2);
}

/* ------------------------------------------------------------------ контакты */

.contact-reply {
  margin-top: var(--s5);
  font-weight: 600;
}

.contact-list > div {
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}

.contact-list > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.contact-list dt {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--slate);
}

.contact-list dd {
  margin-top: var(--s1);
  font-size: var(--fs-lead);
}

/* ------------------------------------------------------------------ знак на «О нас» */

.mark-fig {
  width: min(100%, var(--mark-max));
}

/* мини-знаки как маркеры двух пунктов про метод */
.glyph-list {
  margin-top: var(--s5);
  padding: 0;
  list-style: none;
}

.glyph-list > li {
  display: grid;
  grid-template-columns: var(--s8) minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: start;
}

.glyph-list > li + li {
  margin-top: var(--s4);
}

.glyph-list .glyph {
  margin-top: .1em;
}

/* ------------------------------------------------------------------ заметки */

.note-list {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-entry {
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
}

.note-entry:last-child {
  border-bottom: 1px solid var(--rule);
}

.note-entry__date {
  display: block;
  font-size: var(--fs-small);
  color: var(--slate);
}

.note-entry__title {
  margin-top: var(--s1);
  font-size: var(--fs-h3);
  font-weight: 650;
  font-stretch: 100%;
  line-height: 1.3;
}

.note-entry__title a {
  text-decoration: none;
}

.note-entry__title a:hover {
  text-decoration-line: underline;
}

.note-entry__summary {
  max-width: var(--measure);
  margin-top: var(--s2);
  color: var(--slate);
}

.empty {
  font-size: var(--fs-lead);
  color: var(--slate);
}

.pager {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: var(--s6);
  font-size: var(--fs-small);
}

.pager span {
  color: var(--slate);
}

/* текст заметки из Markdown */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 1.6em;
  font-size: var(--fs-h2);
}

.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: 1.4em;
  font-size: var(--fs-h3);
}

.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: .35em;
}

.prose blockquote {
  padding-left: var(--s5);
  border-left: 2px solid var(--navy);
}

.prose code {
  padding: .1em .3em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--mist);
  border-radius: var(--r);
}

.prose pre {
  padding: var(--s4);
  overflow-x: auto;
  background: var(--mist);
  border-radius: var(--r);
}

.prose pre code {
  padding: 0;
  background: none;
}

.prose table {
  width: 100%;
  font-size: var(--fs-small);
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: var(--s2) var(--s3) var(--s2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.prose th {
  font-weight: 650;
  border-bottom-color: var(--navy);
}

.prose th[align="right"],
.prose td[align="right"] {
  text-align: right;
}

.prose th[align="center"],
.prose td[align="center"] {
  text-align: center;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

.prose .footnote {
  margin-top: var(--s7);
  padding-top: var(--s4);
  font-size: var(--fs-small);
  border-top: 1px solid var(--rule);
}

.prose .footnote hr {
  display: none;
}

/* ------------------------------------------------------------------ 404 и 500 */

.err {
  padding-top: clamp(var(--s7), 6vw, var(--s9));
  padding-bottom: var(--section);
}

.err h1 {
  max-width: var(--measure-title);
}

.err .lead {
  margin-top: var(--s5);
  color: var(--haze);
}

.err .actions {
  margin-top: var(--s6);
}

.err__note {
  max-width: var(--measure);
  margin-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--haze);
}

.sig3 {
  max-width: var(--figure-narrow);
  margin-top: var(--s7);
  padding-bottom: var(--s6);
}

/* подписи отсчитываются от рамки рисунка: ось — на 15 % снизу (build_figures.py) */
.sig3__plot {
  position: relative;
}

.sig3__band {
  fill: var(--white);
  fill-opacity: .07;
}

.sig3__bound {
  stroke: var(--line-on-navy-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

/* координаты подписей печатает design/build_figures.py */
.sig3__label {
  position: absolute;
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--haze);
  transform: translateX(-50%);
}

.sig3__label--m3,
.sig3__label--p3 {
  top: calc(85% + var(--s3));
}

.sig3__label--m3 {
  left: 8.75%;
}

.sig3__label--p3 {
  left: 53.75%;
}

.sig3__label--mass,
.sig3__label--you {
  bottom: calc(15% + var(--s3));
  font-size: var(--fs-small);
  color: var(--white);
}

.sig3__label--mass {
  left: 31.25%;
}

.sig3__label--you {
  left: 94.38%;
}

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

/* основатели: уже 1240 px боковым подписям тесно (меньше 264 px) — портреты
   остаются под вершинами, тексты двоих — рядом под ними, «Вместе» — ниже */
@media (max-width: 1239px) {
  .founders__person:first-child .founders__text {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  .founders__person:last-child .founders__text {
    grid-column: 7 / span 6;
    grid-row: 2;
  }

  .founders__shared {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: var(--measure);
  }
}

/* меню целиком помещается в шапку от 921 px; уже — <details> */
@media (max-width: 920px) {
  .nav {
    display: none;
  }

  .menu {
    display: block;
  }
}

@media (max-width: 1080px) {
  .hero__lead,
  .hero__grid .actions {
    grid-column: 1 / span 9;
  }

  .exp {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: end;
    width: min(100%, var(--figure-narrow));
    margin-top: var(--s6);
  }

  .site-footer__brand {
    grid-column: 1 / span 6;
  }

  .site-footer__nav {
    grid-column: 7 / -1;
  }

  .site-footer__cta {
    grid-column: 1 / -1;
    justify-self: start;
  }

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

  .task > h3,
  .stage__head {
    grid-column: 1 / -1;
    margin-bottom: var(--s4);
  }

  .task__rows,
  .stage__body {
    grid-column: 1 / -1;
  }

  .faq > h2 {
    grid-column: 1 / -1;
    margin-bottom: var(--s5);
  }

  .faq__list {
    grid-column: 1 / -1;
  }

  .cta__text,
  .cta .actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .start__head,
  .start .actions {
    grid-column: 1 / -1;
  }

  .start__col {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  :root {
    --fs-lead: 18px;
    --relief-h: 130px;
  }

  .site-header__inner {
    gap: var(--s4);
    padding-top: var(--s4);
  }

  .brand img {
    width: 100%;
    max-width: var(--logo-w-small);
    height: auto;
  }

  .hero {
    min-height: 0;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--s7);
    padding-bottom: var(--s9);
  }

  .hero__title,
  .hero__lead,
  .hero__grid .actions,
  .exp {
    grid-column: 1;
  }

  .hero__title {
    margin-bottom: var(--s5);
  }

  .hero__lead {
    margin-bottom: var(--s5);
  }

  .actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .exp {
    width: 100%;
    margin-top: var(--s3);
  }

  /* подпись прижата к правому краю рисунка: на 320–414 px не задевает склон колокола */
  .exp__cap {
    left: auto;
    right: 0;
    width: auto;
    max-width: 8.5em;
    text-align: right;
  }

  .exp__curve,
  .exp__edge {
    stroke-width: 2.2;
  }

  .exp__lead {
    stroke-width: 1.6;
  }

  .split {
    padding-top: var(--s7);
  }

  .split__axis {
    display: none;
  }

  .split__title .glyph,
  .axis-map__labels .glyph {
    display: block;
  }

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

  .split__cols {
    row-gap: var(--s7);
  }

  .axis-map__labels {
    row-gap: var(--s5);
  }

  .split__col:first-child,
  .split__col:last-child,
  .axis-map__labels > :first-child,
  .axis-map__labels > :last-child {
    grid-column: 1;
  }

  /* шаги строкой: колокол слева, текст справа; сужение читается сверху вниз */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s5);
  }

  .steps__item {
    display: grid;
    grid-template-columns: calc(var(--step-fig) / 2) minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: start;
  }

  .step-fig {
    grid-row: 1 / span 2;
    margin: .2em 0 0;
  }

  .rules__row dt,
  .rules__row dd {
    grid-column: 1 / -1;
  }

  .rules__row dd {
    margin-top: var(--s2);
  }

  /* основатели столбцом: портрет, имя и факты одного человека вместе;
     общее — после обоих */
  .founders__grid {
    row-gap: var(--s7);
  }

  .founders__person {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }

  .founders__person,
  .founders__shared {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .founders__person .founders__photo {
    order: -1;
  }

  .founders__photo img {
    max-width: var(--portrait-small);
  }

  /* строка — не длиннее measure и в одной колонке (до 760 px колонка до 692 px) */
  .founders__text {
    max-width: var(--measure);
  }

  .founders__shared {
    order: 1;
  }

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

  .rows dd {
    margin-top: var(--s1);
  }

  .cols > *,
  .start__col,
  .site-footer__brand,
  .site-footer__nav,
  .site-footer__cta {
    grid-column: 1 / -1;
  }

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

  .site-footer__nav .nav-list {
    flex-direction: column;
  }

  .sig3__label--mass,
  .sig3__label--you {
    font-size: var(--fs-fine);
  }

  .sig3__label--you {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* самые узкие телефоны (уже 360 px, колонка меньше 320 px): «Автоматизируем»
   в девизе и «Сопровождение» в шаге не помещаются — девиз 32 px, колокол
   шага — четверть step-fig, 60 px (DESIGN.md, typography.display и sizes.step-fig) */
@media (max-width: 359px) {
  :root {
    --fs-display: 32px;
  }

  .steps__item {
    grid-template-columns: calc(var(--step-fig) / 4) minmax(0, 1fr);
  }
}