@font-face {
  font-family: "Oswald Local";
  src: url("./assets/fonts/oswald-cyrillic-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Condensed Local";
  src: url("./assets/fonts/ibm-plex-sans-condensed-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Condensed Local";
  src: url("./assets/fonts/ibm-plex-sans-condensed-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --graphite: #242522;
  --paper: #e8e2d5;
  --paper-deep: #d6d0c3;
  --olive: #6e6b34;
  --lime: #cbef2b;
  --white: #f4f1e9;
  --line: rgb(76 73 57 / 32%);
  --ink: #26261f;
  --rail: #4c4939;
  --rail-soft: rgb(76 73 57 / 48%);
  /* spacing scale: 4 8 12 16 24 32 56 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 56px;
  /* общий множитель типографики: один рычаг на всю шкалу (базовый кегль +~2px) */
  --fs-scale: 1.125;
  /* mobile type scale */  --fs-2xs: calc(9px * var(--fs-scale)); --fs-xs: calc(10.5px * var(--fs-scale)); --fs-sm: calc(12px * var(--fs-scale)); --fs-md: calc(14px * var(--fs-scale)); --fs-lg: calc(16px * var(--fs-scale));
  /* deco primitives (parametrized by --bk-c / --bk-len / --bk-th on the element) */
  --deco-cross:
    linear-gradient(var(--rail) 0 0) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--rail) 0 0) 5px 0 / 1px 11px no-repeat;
  --display: "Oswald Local", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans Condensed Local", "Arial Narrow", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* corner-bracket primitive: set --bk-c / --bk-len / --bk-th on the element, then background: var(--deco-brackets) */
  --deco-brackets:
    linear-gradient(var(--bk-c) 0 0) left top / var(--bk-len) var(--bk-th) no-repeat,
    linear-gradient(var(--bk-c) 0 0) left top / var(--bk-th) var(--bk-len) no-repeat,
    linear-gradient(var(--bk-c) 0 0) right top / var(--bk-len) var(--bk-th) no-repeat,
    linear-gradient(var(--bk-c) 0 0) right top / var(--bk-th) var(--bk-len) no-repeat,
    linear-gradient(var(--bk-c) 0 0) left bottom / var(--bk-len) var(--bk-th) no-repeat,
    linear-gradient(var(--bk-c) 0 0) left bottom / var(--bk-th) var(--bk-len) no-repeat,
    linear-gradient(var(--bk-c) 0 0) right bottom / var(--bk-len) var(--bk-th) no-repeat,
    linear-gradient(var(--bk-c) 0 0) right bottom / var(--bk-th) var(--bk-len) no-repeat;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* Корень обязан ОСТАВАТЬСЯ прокручиваемым всё время, включая открытый
     попап. Прежде при открытии он получал overflow: hidden, переставал
     быть контейнером прокрутки, полоса исчезала — и ширина документа
     скачком росла на её толщину: вся страница под затемнением дёргалась
     вбок. scrollbar-gutter здесь бессилен: зарезервированное место
     схлопывается вместе с самой полосой, потому что резервировать его
     больше некому.
     overflow-y: scroll держит полосу на месте всегда, а прокрутку под
     попапом останавливает не корень, а фиксация тела — см. script.js.
     Там, где полосы нет (мобильные наложенные полосы и ветка ≤699 со
     scrollbar-width: none), лишнего отступа не появляется. */
  overflow-y: scroll;
  background: var(--paper-deep);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--graphite);
  font-family: var(--body);
  background: var(--paper-deep);
}

/* Перенос внутри слова — там, где длинное слово в свою коробку не влезает:
   заголовки и плашки набраны крупно и по ширине экрана, и на 320 при
   увеличенном системном кегле слова («ПРОГРАММИРОВАНИЕ», «ФИКСИРОВАННОГО»)
   уходили под срез. break-word включается только когда слово целиком в
   строку не помещается: обычный набор он не трогает и минимальную ширину
   колонок не меняет — поэтому список ролей блока 5 остаётся как был. */
h1:not(.k-display, .section-title),
h2:not(.k-display, .section-title),
h3:not(.k-display, .section-title),
h4:not(.k-display, .section-title),
.lime-label,
.k-order__plate,
.k-order__head span,
.k-order__case,
.k-set > li,
.fit-highlight,
.fit-list p,
.why-background li {
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

.hero {
  position: relative;
  z-index: 2;
  min-height: 398px;
  margin: 6px 6px 0;
  overflow: hidden;
  color: var(--white);
  border: 1px solid rgb(21 22 20 / 72%);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #65645d;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(21 23 22 / 52%) 0%, rgb(21 23 22 / 12%) 48%, rgb(21 23 22 / 22%) 100%),
    linear-gradient(180deg, rgb(33 33 29 / 20%) 0%, transparent 30%, rgb(27 27 24 / 88%) 100%);
}

.hero__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
  filter: saturate(0.48) sepia(0.12) contrast(0.9) brightness(0.93);
  transform: scale(1.01);
}

.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  background-image: url("./assets/paper-grid-texture.webp");
  background-size: 540px;
}

.hero__content,
.hero__proof {
  position: relative;
  z-index: 2;
}

/* Шапка выше содержимого героя: лист бургер-меню раскрывается в потоке
   шапки, и при крупном шрифте заголовок героя (абсолютный слой) печатался
   поверх пунктов меню. Порядок слоёв, а не размер набора. */
.hero__header {
  position: relative;
  z-index: 4;
}

.hero__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px 15px 0;
  gap: 6px 12px;
}

/* воздух между именем и подписью — шаг шкалы: прежний 1px в шкалу не
   входил, ближайшая ступень вверх — --sp-1 */
.brand {
  display: grid;
  gap: var(--sp-1);
  min-height: 44px;
  min-width: 0;
  align-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  font-family: var(--display);
  line-height: 1;
  letter-spacing: 0.055em;
}

/* имя в шапке — вдвое крупнее подписи под ним (решение владельца):
   имя доминирует, подпись остаётся прежнего кегля */
.brand strong {
  font-size: calc(21px * var(--fs-scale));
  font-weight: 500;
}

.brand span {
  font-size: var(--fs-2xs);
  font-weight: 300;
  line-height: 1.2;
}

.hero__nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: clamp(8px, 3vw, 19px);
  padding-top: 2px;
  font-family: var(--display);
  font-size: calc(7px * var(--fs-scale));
  font-weight: 400;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.hero__nav a {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  text-decoration: none;
}

.hero__content {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 22px;
}

.eyebrow,
.digitization__eyebrow,
.hero__proof {
  margin: 0;
  font-family: var(--body);
  letter-spacing: 0.055em;
}

.eyebrow {
  margin-bottom: 12px;
  font-size: min(calc(9px * var(--fs-scale)), 4.2vw);
  color: rgb(244 241 233 / 78%);
}

.hero h1 {
  display: grid;
  margin: 0;
  width: 161.3%;
  max-width: 630px;
  font-family: var(--display);
  font-size: min(clamp(calc(58px * var(--fs-scale)), 19.4vw, calc(78px * var(--fs-scale))), 21vw);
  font-weight: 450;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgb(20 20 18 / 26%);
  transform: scaleX(0.62);
  transform-origin: left top;
}

.hero__lead {
  margin: 8px 0 11px;
  font-size: min(calc(12px * var(--fs-scale)), 5.4vw);
  line-height: 1.3;
  color: rgb(244 241 233 / 90%);
}

.hero__cta {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  min-width: 144px;
  min-height: 56px;
  max-width: 100%;
  padding-left: 12px;
  border-radius: 5px 14px 14px 5px;
  color: #20231c;
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-decoration: none;
  background: var(--lime);
}

.hero__cta::before {
  position: absolute;
  inset: -10px 0;
  content: "";
}

/* подпись кнопки переносится сама: при крупном шрифте одна длинная строка
   выдавливала стрелку за пределы кнопки */
.hero__cta > span {
  min-width: 0;
}

/* кнопка и подпись-пруф — одна строка потока, а не два абсолютных слоя:
   на 768/1280 подпись заезжала под круглую стрелку кнопки */
.hero__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.hero__proof {
  display: block;
  margin: 0;
  font-size: calc(6px * var(--fs-scale));
  color: rgb(244 241 233 / 68%);
}

.digitization {
  position: relative;
  z-index: 3;
  min-height: 846px;
  margin-top: -1px;
  overflow: visible;
  isolation: isolate;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgb(77 75 57 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(77 75 57 / 8%) 1px, transparent 1px),
    url("./assets/paper-grid-texture.webp");
  background-position: 0 0, 0 0, center top;
  background-size: 46px 46px, 46px 46px, 620px 620px;
  background-blend-mode: multiply, multiply, multiply;
}

.digitization::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background: radial-gradient(circle at 70% 14%, #fff 0, transparent 34%);
}

.torn-edge {
  position: absolute;
  top: -24px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 48px;
  pointer-events: none;
  background: url("./assets/torn-paper-edge.webp") center -34px / 100% 145px no-repeat;
  filter: saturate(0.25) brightness(1.08);
}

.digitization__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1280px);
  min-height: 846px;
  margin: 0 auto;
  padding: 66px 29px 34px 47px;
}

.digitization__eyebrow {
  margin: 0 0 22px;
  font-size: calc(11px * var(--fs-scale));
  color: #393a35;
}

/* Канон сжатого дисплея: ширина набора = 1 / коэффициент scaleX, поэтому
   видимая ширина заголовка ровно равна колонке, а строка переносится сама.
   Было `width: max-content` + `nowrap` — коробка заголовка вылезала за свою
   колонку и печаталась поверх соседней. */
.digitization__intro h2 {
  display: block;
  width: 188.7%;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(calc(70px * var(--fs-scale)), 22.5vw, calc(90px * var(--fs-scale)));
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.047em;
  text-transform: uppercase;
  transform: scaleX(0.53);
  transform-origin: left top;
}

.digitization__intro > p {
  margin: 18px 0 0;
  max-width: 344px;
  font-size: calc(16px * var(--fs-scale));
  line-height: 1.28;
}

.transformations {
  margin: 43px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.transformation {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 17px;
  min-height: 99px;
  border-bottom: 1px solid var(--line);
}

.transformation::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 2px;
  width: 33px;
  content: "";
  pointer-events: none;
  opacity: 0.75;
  --bk-c: var(--olive);
  --bk-len: 10px;
  --bk-th: 1px;
  background: var(--deco-brackets);
}

.transformation__number {
  align-self: center;
  padding-left: 11px;
  color: var(--olive);
  font-family: var(--display);
  font-size: calc(16px * var(--fs-scale));
  font-weight: 520;
}

.transformation__body {
  display: flex;
  min-width: 0;
  padding: 16px 7px 13px 14px;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgb(76 73 57 / 18%);
}

.transformation h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 111.12%;
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(calc(18px * var(--fs-scale)), 5.1vw, calc(22px * var(--fs-scale)));
  font-weight: 520;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transform: scaleX(0.9);
  transform-origin: left center;
}

/* подписи переносятся: при сжатии колонки `nowrap` печатал левую и правую
   половину строки друг на друге («ИНФОРМАЦИЯСТРУКТУРА») */
.transformation h3 span {
  min-width: 0;
}

.transformation h3 b {
  color: var(--olive);
  font-family: var(--body);
  font-size: calc(22px * var(--fs-scale));
  font-weight: 400;
  letter-spacing: 0;
}

.transformation__body p {
  margin: 9px 0 0;
  overflow: hidden;
  color: #65613a;
  font-size: calc(11.5px * var(--fs-scale));
  line-height: 1.15;
  text-overflow: clip;
  white-space: nowrap;
}

.transformation__next {
  display: grid;
  place-items: center;
  color: var(--lime);
  font-size: calc(20px * var(--fs-scale));
}

.transformation--long {
  min-height: 128px;
}

/* Стрелка идёт сразу за первой половиной строки и переносит вторую на
   новую строку. Раньше она стояла во второй колонке грида шириной 20px у
   правого края набора и на 320/360 обрезалась вместе с ним. */
.transformation--long h3 {
  align-items: end;
}

.transformation--long h3 span:last-child {
  flex: 0 0 100%;
}

.technical-rail {
  position: absolute;
  z-index: 1;
  width: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--olive) 0 1px, transparent 1px 13px);
}

.technical-rail--left {
  top: 50px;
  bottom: 54px;
  left: 17px;
  opacity: 0.35;
}

.technical-rail--right {
  top: 57px;
  right: 22px;
  height: 175px;
  opacity: 0.75;
}

.technical-rail--right::before,
.technical-rail--right::after {
  position: absolute;
  left: -8px;
  width: 17px;
  height: 1px;
  content: "";
  background: var(--olive);
}

.technical-rail--right::before {
  top: 0;
}

.technical-rail--right::after {
  bottom: 0;
}

.registration {
  position: absolute;
  left: 8px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--olive);
  border-radius: 50%;
  opacity: 0.78;
}

.registration::before,
.registration::after {
  position: absolute;
  content: "";
  background: var(--olive);
}

.registration::before {
  top: 8px;
  left: -8px;
  width: 32px;
  height: 1px;
}

.registration::after {
  top: -8px;
  left: 8px;
  width: 1px;
  height: 32px;
}

.registration--top {
  top: 57px;
}

.registration--bottom {
  bottom: 31px;
}

@media (min-width: 700px) {
  .hero {
    min-height: min(760px, 88vh);
    margin: 14px 14px 0;
    border-radius: 10px 10px 0 0;
  }

  .hero__portrait {
    object-position: center 50%;
  }

  .hero__header {
    padding: 34px 44px 0;
  }

  .brand {
    gap: 4px;
  }

  .brand strong {
    font-size: min(calc(36px * var(--fs-scale)), 54px);
  }

  .brand span {
    font-size: min(calc(12px * var(--fs-scale)), 18px);
  }

  .hero__nav {
    flex-wrap: wrap;
    gap: 8px clamp(28px, 5vw, 72px);
    padding-top: 5px;
    font-size: min(calc(12px * var(--fs-scale)), 18px);
  }

  .hero__content {
    left: clamp(44px, 5vw, 86px);
    bottom: 58px;
  }

  .eyebrow {
    margin-bottom: 18px;
    font-size: min(calc(14px * var(--fs-scale)), 22px);
  }

  .hero h1 {
    width: 125%;
    max-width: 950px;
    /* потолок в vw: при крупном множителе заголовок дорастал до шапки и
       ложился на логотип и меню */
    font-size: min(clamp(calc(96px * var(--fs-scale)), 10.2vw, calc(150px * var(--fs-scale))), 12vw);
    line-height: 0.86;
    transform: scaleX(0.8);
  }

  .hero__lead {
    margin: 22px 0 22px;
    /* потолки в px: содержимое героя стоит от нижнего края, и при крупном
       множителе верх столбца доходил до шапки */
    font-size: min(calc(22px * var(--fs-scale)), 34px);
    line-height: 1.25;
  }

  .hero__cta {
    min-width: min(392px, 100%);
    min-height: 60px;
    padding: 10px 28px;
    border-radius: 9px 31px 31px 9px;
    font-size: calc(17px * var(--fs-scale));
  }

  .hero__action {
    gap: 14px 32px;
  }

  .hero__proof {
    display: block;
    font-size: calc(12px * var(--fs-scale));
  }

  .torn-edge {
    top: -60px;
    height: 100px;
    background-position: center -42px;
    background-size: 100% 240px;
  }

  .digitization {
    min-height: 1000px;
    background-size: 76px 76px, 76px 76px, 900px 900px;
  }

  .digitization__inner {
    min-height: 1000px;
    /* 90px поля на 768 съедали четверть ширины, и заголовок с лидом
       переставали помещаться в две колонки */
    padding: 122px clamp(40px, 8vw, 132px) 80px;
  }

  .digitization__eyebrow {
    margin-bottom: 34px;
    font-size: calc(19px * var(--fs-scale));
  }

  /* Две колонки — только когда для них есть место. На 700–1023 колонка
     заголовка ужималась до 248px, и заголовок печатался поверх лида. */
  .digitization__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 26px;
  }

  @media (min-width: 1080px) {
    .digitization__intro {
      grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.65fr);
      gap: 60px;
    }
  }

  .digitization__intro h2 {
    font-size: clamp(calc(92px * var(--fs-scale)), 9.2vw, calc(142px * var(--fs-scale)));
    line-height: 0.92;
    transform: scaleX(0.74);
  }

  .digitization__intro > p {
    margin: 0 0 12px;
    max-width: 420px;
    font-size: calc(22px * var(--fs-scale));
  }

  .desktop-break {
    display: none;
  }

  .transformations {
    margin-top: 74px;
  }

  .transformation {
    grid-template-columns: 110px minmax(0, 1fr) 56px;
    min-height: 122px;
  }

  .transformation::before {
    top: 20px;
    bottom: 20px;
    left: 13px;
    width: 65px;
    --bk-c: var(--olive);
    --bk-len: 18px;
    --bk-th: 1px;
    background: var(--deco-brackets);
  }

  .transformation__number {
    padding-left: 35px;
    font-size: calc(27px * var(--fs-scale));
  }

  /* колонка перечисления отбирала 210px и додавливала заголовок строки:
     до 1080px строка идёт в одну колонку */
  .transformation__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
  }

  @media (min-width: 1080px) {
    .transformation__body {
      grid-template-columns: minmax(0, 1.65fr) minmax(210px, 0.45fr);
      gap: 30px;
      padding: 24px 30px;
    }
  }

  .transformation h3 {
    gap: 20px;
    width: auto;
    font-size: clamp(calc(30px * var(--fs-scale)), 2.6vw, calc(40px * var(--fs-scale)));
    transform: none;
  }

  .transformation h3 b {
    font-size: calc(38px * var(--fs-scale));
  }

  .transformation__body p {
    margin: 0;
    font-size: calc(17px * var(--fs-scale));
    white-space: normal;
  }

  .transformation__next {
    font-size: calc(34px * var(--fs-scale));
  }

  .transformation--long {
    min-height: 150px;
  }

  .transformation--long h3 {
    align-items: end;
  }

  /* декор привязан к полю набора блока (38% от него): поле стало меньше на
     планшете, и кресты с рельсами наезжали на ай-броу */
  .technical-rail--left {
    left: calc(clamp(40px, 8vw, 132px) * 0.38);
  }

  .technical-rail--right {
    top: 110px;
    right: calc(clamp(40px, 8vw, 132px) * 0.38);
    height: 330px;
  }

  .registration {
    left: calc(clamp(40px, 8vw, 132px) * 0.38);
    width: 30px;
    height: 30px;
  }

  .registration::before {
    top: 14px;
    left: -13px;
    width: 54px;
  }

  .registration::after {
    top: -13px;
    left: 14px;
    height: 54px;
  }

  .registration--top {
    top: 115px;
  }
}

/* Full-page concept sections 03–09 */

.full-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.full-section--paper,
.full-section--olive,
.conditions__sheet {
  background-image:
    linear-gradient(rgb(77 75 57 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(77 75 57 / 8%) 1px, transparent 1px),
    url("./assets/paper-grid-texture.webp");
  background-position: 0 0, 0 0, center top;
  background-size: 46px 46px, 46px 46px, 620px 620px;
  background-blend-mode: multiply, multiply, normal;
}

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

.full-section--olive {
  background-color: #d4d0c0;
  background-image:
    linear-gradient(rgb(110 105 90 / 18%), rgb(110 105 90 / 18%)),
    linear-gradient(rgb(77 75 57 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(77 75 57 / 8%) 1px, transparent 1px),
    url("./assets/paper-grid-texture.webp");
  background-position: 0 0, 0 0, 0 0, center top;
  background-size: auto, 46px 46px, 46px 46px, 620px 620px;
  background-blend-mode: normal, multiply, multiply, normal;
}

.section-shell {
  position: relative;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 58px 28px 46px;
}

.section-eyebrow {
  margin: 0 0 18px;
  color: #3f402f;
  font-family: var(--body);
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: 0.055em;
}

.section-eyebrow--light {
  color: rgb(244 241 233 / 84%);
}

.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(calc(66px * var(--fs-scale)), 18vw, calc(84px * var(--fs-scale)));
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.section-title--xl {
  display: block;
  width: 229.9%;                                 /* 1 / 0.435 */
  font-size: clamp(calc(96px * var(--fs-scale)), 27vw, calc(116px * var(--fs-scale)));
  line-height: 0.94;
  transform: scaleX(0.435);
  transform-origin: left top;
}

.section-lead {
  margin: 18px 0 0;
  max-width: 510px;
  font-size: calc(17px * var(--fs-scale));
  line-height: 1.32;
}

.paper-tear {
  position: absolute;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 54px;
  pointer-events: none;
  background: url("./assets/torn-paper-edge-top.webp") center / 100% 100% no-repeat;
}

.paper-tear--top {
  top: 0;
}

.lime-label {
  width: fit-content;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 20px 0 0;
  padding: 10px 13px;
  color: #20231c;
  font-size: calc(13px * var(--fs-scale));
  background: var(--lime);
}

/* 03 — evidence */

.cases {
  min-height: 846px;
}

.cases .section-shell {
  padding-bottom: 10px;
}

.cases .section-lead {
  max-width: 245px;
  margin-bottom: 14px;
  font-size: calc(14px * var(--fs-scale));
}

.cases .section-eyebrow,
.cases .section-title,
.cases .section-lead {
  margin-left: 22px;
}

.case-track {
  display: flex;
  width: calc(100% + 28px);
  /* агрегаты сняты — слайдер отходит от лида на то же поле, которое они
     давали снизу: sp-5 на мобиле, sp-6 на десктопе */
  margin-top: var(--sp-5);
  margin-right: -28px;
  padding: 0 28px 12px 0;
  --case-gap: 13px;
  gap: var(--case-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  /* Полоса прокрутки скрыта у всех треков и на всех ширинах — решение
     владельца. Скрывается только полоса: прокрутка пальцем, снап и кнопки
     листания работают как прежде. Три механизма разом, потому что их
     понимают разные браузеры: scrollbar-width — Firefox и новые Chromium,
     ::-webkit-scrollbar — WebKit и старые Chromium (там же iOS Safari),
     -ms-overflow-style — старый Edge. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.case-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.case-card {
  flex: 0 0 var(--case-card, 64.5vw);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #35362f;
  border-radius: 7px;
  background: rgb(239 234 224 / 92%);
}

.case-card__meta {
  display: grid;
  min-height: 38px;
  padding: 7px 13px 5px;
  gap: 3px;
  color: #5f5c34;
  font-family: var(--display);
  font-size: calc(12px * var(--fs-scale));
  letter-spacing: 0.025em;
}

/* кто именно: имя и ниша участника — вторая строка шапки карточки */
.case-card__who {
  color: #55523f;
  font-family: var(--body);
  font-size: calc(9px * var(--fs-scale));
  letter-spacing: 0.035em;
  line-height: 1.25;
}

.case-card__body {
  padding: 10px 14px;
}

.case-card__body h3 {
  width: 153.85%;
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: min(calc(37px * var(--fs-scale)), 13vw);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  transform: scaleX(0.65);
  transform-origin: left top;
}

.case-facts {
  margin: 0;
}

.case-facts div {
  padding: 4px 0;
  border-top: 1px solid rgb(53 54 47 / 36%);
}

.case-facts dt {
  margin-bottom: 2px;
  color: #6d6939;
  font-family: var(--display);
  font-size: calc(12px * var(--fs-scale));
  font-weight: 500;
}

.case-facts dd {
  margin: 0;
  font-size: calc(12px * var(--fs-scale));
  line-height: 1.24;
}

.case-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-top: 8px;
  gap: 10px;
  font-family: var(--display);
  font-size: calc(11px * var(--fs-scale));
}

/* Счётчик стоит ровно посередине между кнопками. Он лежит в средней колонке
   сетки (auto 1fr auto), а без выравнивания растягивался на всю её ширину и
   текст прижимался к левому краю — то есть к кнопке «Назад». На мобиле это
   уже было сделано отдельным правилом, здесь — для всех ширин и всех
   слайдеров сразу: и кейсы, и все ленты выступлений ходят под этим классом. */
.case-controls span {
  justify-self: center;
}

.case-controls button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid #45463c;
  color: #35362f;
  font: inherit;
  background: rgb(239 234 224 / 48%);
  cursor: pointer;
}

.case-controls button:disabled {
  opacity: 0.36;
  cursor: default;
}

/* 04 — method */

.method__hero {
  position: relative;
  min-height: 303px;
  overflow: hidden;
  color: var(--white);
  background: #34332e;
}

.method__hero::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 34px;
  content: "";
  background: url("./assets/torn-paper-edge-transparent.webp") center / 100% 100% no-repeat;
}

.method__hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 58%;
  filter: brightness(0.62) saturate(0.72) sepia(0.08) contrast(0.98);
}

.method__hero-copy {
  position: relative;
  z-index: 1;
  padding: 48px 13px 24px;
}

.method__hero h2 {
  width: 208.3%;                                 /* 1 / 0.48 */
  margin: 0;
  font-family: var(--display);
  font-size: calc(57px * var(--fs-scale));
  font-weight: 420;
  line-height: 1.02;
  letter-spacing: -0.045em;
  transform: scaleX(0.48);
  transform-origin: left top;
}

.method__body {
  min-height: 528px;
  padding-top: 26px;
  /* поле блока 4 на десктопе. На мобиле его перекрывает канон
     `.section-shell.section-shell` (линия набора 24px) — там это значение
     не работает и защищать его минимумом нечего. */
  padding-right: 15.4vw;
  padding-bottom: 24px;
  padding-left: 15.4vw;
}

.method__thesis {
  margin: 0 0 11px;
  font-size: calc(15px * var(--fs-scale));
  line-height: 1.3;
}

.method__note {
  margin: 0 0 5px;
  color: #555434;
  font-size: calc(11px * var(--fs-scale));
  line-height: 1.25;
}

.method__note strong {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.method-steps {
  margin: 0 -30px 0 30px;
  padding: 0;
  list-style: none;
}

.method-steps li,
.why-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 88px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.method-steps li {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 70px;
  gap: 10px;
}

.method-steps > li > span {
  width: 34px;
  height: 38px;
  font-size: calc(20px * var(--fs-scale));
}

.method-steps h3 {
  font-size: calc(23px * var(--fs-scale));
}

.method-steps p {
  font-size: calc(12px * var(--fs-scale));
}

.method__hero .lime-label {
  margin-top: 16px;
  padding: 8px 9px;
  font-size: calc(11px * var(--fs-scale));
}

.method-steps > li > span,
.why-list > li > span {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid #3e4038;
  color: #292b25;
  font-family: var(--display);
  font-size: calc(24px * var(--fs-scale));
  font-weight: 600;
  background: var(--lime);
}

.method-steps h3,
.why-list h3 {
  margin: 0 0 2px;
  font-family: var(--display);
  font-size: calc(26px * var(--fs-scale));
  font-weight: 500;
  line-height: 1;
}

.method-steps p,
.why-list p {
  margin: 0;
  font-size: calc(14px * var(--fs-scale));
  line-height: 1.28;
}

/* 05 — team */

.team {
  min-height: 843px;
}

.team .section-shell {
  padding: 53px 45px 26px;
}

.team > .section-shell > .section-eyebrow {
  margin-bottom: 8px;
}

.team__heading {
  position: relative;
  min-height: 170px;
}

.team__heading > span {
  position: absolute;
  top: -18px;
  left: -4px;
  color: rgb(244 241 233 / 42%);
  font-family: var(--display);
  font-size: calc(148px * var(--fs-scale));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
}

/* Заголовок — в потоке: коробка блока растёт вместе с ним. Абсолютный
   заголовок при крупном шрифте выходил за фиксированную высоту и ложился
   на лид и на бланк. Ширина 1/scaleX + отрицательное поле слева: видимая
   строка ровно по правому краю набора. */
.team__heading h2 {
  position: static;
  display: block;
  width: 192.3%;                                 /* 1 / 0.52 */
  margin: 0 0 0 -92.3%;
  font-family: var(--display);
  font-size: calc(58px * var(--fs-scale));
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-align: right;
  transform: scaleX(0.52);
  transform-origin: right top;
}

.team > .section-shell > .section-lead {
  margin-top: 10px;
  font-size: calc(15px * var(--fs-scale));
}

.ownership-banner {
  margin: 21px -18px 0;
  padding: 16px 10px;
  color: var(--paper);
  text-align: center;
  background: var(--graphite);
}

.ownership-banner h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: calc(22px * var(--fs-scale));
  font-weight: 500;
  line-height: 1;
}

.ownership-banner p {
  margin: 0;
  font-size: calc(9px * var(--fs-scale));
  line-height: 1.3;
}

/* 06 — rhythm */

.rhythm {
  min-height: 843px;
}

.rhythm .section-shell {
  padding: 58px 0 32px 40px;
}

.rhythm__intro {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.rhythm__intro .section-title {
  display: inline-block;
  width: 138%;
  font-size: calc(52px * var(--fs-scale));
  transform: scaleX(0.72);
  transform-origin: left top;
}

.rhythm__intro .section-lead {
  padding-top: 18px;
  border-top: 1px solid #3f403a;
  margin-top: 13px;
  padding-top: 12px;
  font-size: calc(12px * var(--fs-scale));
}

.rhythm__intro img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: center;
}

.materials-note {
  margin-right: 40px;
  padding: 10px 9px;
  text-align: center;
  background: rgb(180 182 141 / 48%);
}

.materials-note strong {
  font-family: var(--display);
  font-size: calc(12px * var(--fs-scale));
  font-weight: 500;
}

.materials-note p {
  margin: 6px 0 2px;
  font-size: calc(11px * var(--fs-scale));
}

.materials-note small {
  color: #68685e;
  font-size: calc(9px * var(--fs-scale));
}

.program-topics {
  margin: 11px 40px 0 0;
  font-size: calc(10px * var(--fs-scale));
  line-height: 1.35;
  text-align: center;
}

/* 07 — why Denis */

.why__portrait {
  position: relative;
  height: 405px;
  overflow: hidden;
  color: var(--paper);
  background: #5d5c56;
}

.why__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 59% center;
  filter: saturate(0.72) contrast(0.94);
}

.why__portrait p {
  position: absolute;
  top: 42px;
  left: 31px;
  width: 130px;
  margin: 0;
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: 0.04em;
}

.why__body {
  padding-top: 0;
}

.why__body h2 {
  margin: -155px -10px 18px;
}

.why__body h2 span {
  display: block;
  width: max-content;
  padding: 7px 11px 4px;
  font-family: var(--display);
  font-size: calc(40px * var(--fs-scale));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  background: var(--paper);
  transform: scaleX(0.65);
  transform-origin: left top;
}

.why__body > .section-lead {
  font-size: calc(15px * var(--fs-scale));
}

.why-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.why-list li {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 58px;
  gap: 12px;
}

.why-list > li > span {
  width: 34px;
  height: 34px;
  font-size: calc(20px * var(--fs-scale));
}

.why-list h3 {
  font-size: calc(15px * var(--fs-scale));
}

.why-list p {
  font-size: calc(12px * var(--fs-scale));
}

.why-list li {
  min-height: 66px;
}

.why-list h3 {
  font-size: calc(15px * var(--fs-scale));
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid #383932;
  font-family: var(--display);
  font-size: calc(13px * var(--fs-scale));
  text-decoration: none;
}

/* 08 — fit */

.fit {
  min-height: 843px;
  padding: 28px 9px 36px;
  background-color: #b9b795;
}

.fit__sheet {
  min-height: 779px;
  padding: 48px 34px 26px;
  overflow: hidden;
  background-color: var(--paper);
  background-image: url("./assets/paper-grid-texture.webp");
  background-size: 620px;
  box-shadow: 0 5px 18px rgb(46 47 39 / 18%);
}

.fit__image {
  position: absolute;
  top: 48px;
  right: -7px;
  display: block;
  width: 206px;
  height: 174px;
  object-fit: cover;
  border: 6px solid #ece7dc;
  box-shadow: 0 4px 8px rgb(45 45 40 / 22%);
  transform: rotate(2deg);
}

.fit .section-eyebrow {
  width: 145px;
  margin: 0 0 20px;
  font-size: calc(9px * var(--fs-scale));
}

.fit .section-title {
  position: relative;
  z-index: 1;
  width: 275px;
  margin: 0;
  font-size: calc(52px * var(--fs-scale));
  line-height: 0.92;
  transform: scaleX(0.62);
  transform-origin: left top;
}

.fit > .fit__sheet > .section-lead {
  width: 190px;
  margin: -2px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--graphite);
  font-size: calc(12px * var(--fs-scale));
  line-height: 1.25;
}

.fit-list {
  margin-top: 17px;
}

.fit-list h3,
.not-fit h3 {
  width: fit-content;
  margin: 0 0 6px;
  padding: 7px 10px;
  color: var(--paper);
  font-family: var(--display);
  font-size: calc(14px * var(--fs-scale));
  font-weight: 500;
  background: var(--graphite);
}

.fit-list > p {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 49px;
  align-items: center;
  margin: 0;
  gap: 9px;
  border-bottom: 1px dashed rgb(53 54 47 / 46%);
  font-family: var(--display);
  font-size: calc(13px * var(--fs-scale));
  line-height: 1.08;
}

.fit-list > p > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--graphite);
  font-family: var(--body);
  font-size: calc(20px * var(--fs-scale));
  font-weight: 600;
  line-height: 1;
  background: var(--lime);
}

.fit-highlight {
  --k-note-bg: var(--lime);
  --k-note-fold: #8ea11c;
  margin: 14px 8px 15px;
  padding: 11px 10px;
  font-family: var(--display);
  font-size: calc(16px * var(--fs-scale));
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.platform-note strong {
  font-family: var(--display);
  font-size: calc(10px * var(--fs-scale));
  font-weight: 500;
}

.platform-note p {
  margin: 5px 0 0;
  font-size: calc(11px * var(--fs-scale));
  line-height: 1.22;
}

.not-fit {
  margin: 13px -5px 0;
  padding: 13px 20px;
  color: var(--paper);
  background: var(--graphite);
}

.not-fit h3 {
  padding: 0;
  background: transparent;
}

.not-fit p {
  margin: 4px 0 0;
  font-size: calc(11px * var(--fs-scale));
}

/* 09 — conditions */

.conditions {
  min-height: 843px;
  color: var(--graphite);
  background-color: #4e4c3f;
  background-image: url("./assets/paper-grid-texture.webp");
  background-size: 620px;
  background-blend-mode: multiply;
}

.conditions__top-label {
  height: 60px;
  padding: 20px 20px 0;
  color: rgb(244 241 233 / 78%);
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: 0.06em;
  text-align: center;
}

.conditions__sheet {
  background-color: var(--paper);
}

.conditions__sheet > .conditions__intro {
  padding: 28px 42px 16px;
}

.conditions__sheet > .conditions__intro > .section-eyebrow {
  margin-bottom: 10px;
}

.conditions h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
  font-family: var(--display);
  font-weight: 520;
  line-height: 0.92;
}

.conditions h2 span {
  display: block;
  width: 133.33%;
  font-size: calc(104px * var(--fs-scale));
  letter-spacing: -0.055em;
  white-space: nowrap;
  transform: scaleX(0.75);
  transform-origin: left top;
}

.conditions h2 small {
  display: block;
  width: 142.86%;
  margin-top: 6px;
  font-size: calc(54px * var(--fs-scale));
  letter-spacing: -0.04em;
  transform: scaleX(0.7);
  transform-origin: left top;
}

.conditions__payment {
  margin: 8px 0 14px;
  color: #4f503a;
  font-family: var(--display);
  font-size: calc(13px * var(--fs-scale));
  font-weight: 500;
  line-height: 1.22;
}

.conditions__sheet h3 {
  width: 142.86%;                                /* 1 / 0.7 */
  margin: 0;
  font-family: var(--display);
  font-size: min(calc(33px * var(--fs-scale)), 11.5vw);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -0.035em;
  transform: scaleX(0.7);
  transform-origin: left top;
}

.conditions__sheet > .conditions__intro > .section-lead {
  margin-top: 6px;
  font-size: calc(14px * var(--fs-scale));
}

/* minmax(0, …): без него колонка не могла стать уже своего min-content,
   и «В СЕНТЯБРЕ, ПОСЛЕ НАБОРА ГРУППЫ» выезжала за экран */
.conditions__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 10px;
  border: 1px solid var(--line);
}

.conditions__facts p > * {
  justify-self: stretch;
  min-width: 0;
}

.conditions__facts p {
  display: grid;
  min-height: 66px;
  align-content: center;
  margin: 0;
  padding: 9px;
  gap: 5px;
}

.conditions__facts p + p {
  border-left: 1px solid var(--line);
}

.conditions__facts span {
  color: #69684b;
  font-size: calc(9px * var(--fs-scale));
}

.conditions__facts strong {
  font-family: var(--display);
  font-size: calc(13px * var(--fs-scale));
  font-weight: 500;
  line-height: 1.13;
}

.conditions__image {
  display: block;
  width: 100%;
  height: 105px;
  object-fit: cover;
}

.consultation {
  padding: 18px 34px 20px;
  text-align: center;
}

.consultation h3 {
  width: 125%;
  font-size: calc(32px * var(--fs-scale));
  white-space: nowrap;
  transform: scaleX(0.8);
  transform-origin: left top;
}

.consultation > p:not(.section-eyebrow) {
  margin: 6px auto 10px;
  max-width: 390px;
  font-size: calc(12px * var(--fs-scale));
  line-height: 1.25;
}

.consultation > .section-eyebrow {
  margin-bottom: 10px;
}

.prototype-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 55px;
  padding: 12px 24px;
  color: rgb(244 241 233 / 82%);
}

.prototype-footer p {
  margin: 0;
  font-family: var(--display);
  font-size: calc(13px * var(--fs-scale));
  line-height: 1.15;
}

.prototype-footer p span {
  font-size: calc(9px * var(--fs-scale));
}

.prototype-footer a {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: calc(11px * var(--fs-scale));
  text-decoration: none;
}

.case-controls button:focus-visible {
  outline: 3px solid #141511;
  outline-offset: 3px;
}

@media (min-width: 700px) {
  .full-section--paper,
  .full-section--olive,
  .conditions__sheet {
    background-size: 76px 76px, 76px 76px, 900px 900px;
  }

  .section-shell {
    padding: 120px clamp(90px, 8vw, 132px) 90px;
  }

  .section-eyebrow {
    margin-bottom: 28px;
    font-size: calc(17px * var(--fs-scale));
  }

  .section-title {
    font-size: min(clamp(calc(104px * var(--fs-scale)), 9vw, calc(138px * var(--fs-scale))), 16vw);
  }

  .section-title--xl {
    width: 138.9%;                               /* 1 / 0.72 */
    font-size: min(clamp(calc(130px * var(--fs-scale)), 12vw, calc(180px * var(--fs-scale))), 22vw);
    transform: scaleX(0.72);
  }

  .section-lead {
    font-size: calc(23px * var(--fs-scale));
  }

  .paper-tear {
    top: -58px;
    height: 110px;
    background-position: center -48px;
    background-size: 100% 260px;
  }

  .cases {
    min-height: 1050px;
  }

  .cases .section-shell {
    padding-bottom: 90px;
  }

  .cases .section-lead {
    margin-bottom: 52px;
  }

  .cases .section-eyebrow,
  .cases .section-title,
  .cases .section-lead {
    margin-left: 0;
  }

  /* тот же приём, что на мобиле: трек идёт от кромки до кромки экрана, а не
     до края листа секции (лист шире 1280 не растёт, и на широком мониторе
     уезжающая карточка обрывалась ровной вертикалью посреди пустого поля).
     Поле держит padding, равный расстоянию от кромки экрана до линии набора
     (50vw − 50% от ширины набора), scroll-padding возвращает снап на ту же
     линию: активная карточка стоит там же, где стояла, а соседние остаются
     видны в полях. Страница не едет по горизонтали — у html стоит
     overflow-x: clip. */
  .case-track {
    /* расстояние от кромки экрана до линии набора: половина поля, на которое
       лист шире 1280 не растёт, плюс собственное поле листа. Обе величины —
       те же, что у .section-shell (width: min(100%, 1280px) и padding
       clamp(90px, 8vw, 132px)), поэтому карточка встаёт ровно на линию
       заголовка. Длина абсолютная: у scroll-padding проценты считаются от
       самого трека, и процентная запись сбивала снап. */
    --case-bleed: calc((100vw - min(100vw, 1280px)) / 2 + clamp(90px, 8vw, 132px));
    width: calc(100% + 2 * var(--case-bleed));
    margin-top: var(--sp-6);
    margin-left: calc(-1 * var(--case-bleed));
    margin-right: calc(-1 * var(--case-bleed));
    padding-left: var(--case-bleed);
    padding-right: var(--case-bleed);
    scroll-padding-left: var(--case-bleed);
    gap: 24px;
  }

  .case-card {
    flex-basis: min(560px, calc(50% - 12px));
  }

  .case-card__meta {
    min-height: 78px;
    padding: 20px 24px;
    font-size: calc(18px * var(--fs-scale));
  }

  .case-card__who {
    font-size: calc(13px * var(--fs-scale));
  }

  .case-card__body {
    padding: 26px 28px 30px;
  }

  /* заголовок карточки набирается в её ширину: карточка — половина колонки,
     и длинное слово («ПЕРЕВОЗЧИКОВ») при фиксированных 58px срезалось краем.
     Потолок в cqi считается от ширины самой карточки, а не экрана: на 768
     карточка вдвое уже, чем на 1280, и общий vw-потолок там не спасал. */
  .case-card {
    container-type: inline-size;
  }

  .case-card__body h3 {
    width: auto;
    font-size: min(clamp(calc(38px * var(--fs-scale)), 4.6vw, calc(58px * var(--fs-scale))), 12cqi);
    white-space: normal;
    transform: none;
  }

  .case-facts dd {
    font-size: calc(17px * var(--fs-scale));
  }

  .case-facts dt {
    font-size: calc(16px * var(--fs-scale));
  }

  .case-controls {
    max-width: 520px;
    margin: 24px auto 0;
    font-size: calc(14px * var(--fs-scale));
  }

  .method__hero {
    min-height: 720px;
  }

  .method__hero > img {
    object-position: 68% center;
  }

  .method__hero-copy {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 150px clamp(90px, 8vw, 132px) 90px;
  }

  .method__hero h2 {
    width: 130%;
    font-size: clamp(calc(100px * var(--fs-scale)), 9vw, calc(136px * var(--fs-scale)));
    transform: scaleX(0.76);
  }

  .lime-label {
    margin-top: 38px;
    padding: 17px 24px;
    font-size: calc(22px * var(--fs-scale));
  }

  .method__body {
    min-height: 900px;
    padding-top: 90px;
  }

  .method__thesis {
    font-size: calc(26px * var(--fs-scale));
  }

  .method__note {
    margin-bottom: 42px;
    font-size: calc(20px * var(--fs-scale));
  }

  .method-steps li,
  .why-list li {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 130px;
    gap: 26px;
  }

  .method-steps > li > span,
  .why-list > li > span {
    width: 70px;
    height: 70px;
    font-size: calc(38px * var(--fs-scale));
  }

  .method-steps h3 {
    font-size: calc(44px * var(--fs-scale));
  }

  .method-steps p {
    font-size: calc(20px * var(--fs-scale));
  }

  .team {
    min-height: 1200px;
  }

  .team__heading {
    min-height: 300px;
  }

  .team__heading > span {
    font-size: calc(260px * var(--fs-scale));
  }

  .team__heading h2 {
    font-size: calc(106px * var(--fs-scale));
  }

  .ownership-banner {
    margin-top: 52px;
    padding: 36px;
  }

  .ownership-banner h3 {
    font-size: calc(54px * var(--fs-scale));
  }

  .ownership-banner p {
    font-size: calc(18px * var(--fs-scale));
  }

  .rhythm {
    min-height: 1300px;
  }

  .rhythm__intro {
    gap: 54px;
  }

  .rhythm__intro .section-title {
    font-size: calc(108px * var(--fs-scale));
  }

  .rhythm__intro .section-lead {
    font-size: calc(22px * var(--fs-scale));
  }

  .rhythm__intro img {
    height: 660px;
  }

  .materials-note {
    padding: 24px;
  }

  .materials-note strong,
  .materials-note p {
    font-size: calc(19px * var(--fs-scale));
  }

  .program-topics {
    font-size: calc(16px * var(--fs-scale));
  }

  .why__portrait {
    height: 720px;
  }

  .why__portrait p {
    top: 90px;
    left: clamp(90px, 8vw, 132px);
    width: 230px;
    font-size: calc(18px * var(--fs-scale));
  }

  /* Плашки заголовка лежат поверх нижней части снимка — та же композиция,
     что на мобиле. Верхнее поле листа здесь 120px, поэтому −70px давали не
     наплыв, а зазор в 50px: снимок и заголовок читались как два блока.
     −300px = 120px поля + 180px наплыва (примерно полторы плашки). */
  .why__body h2 {
    margin-top: -300px;
    margin-bottom: 52px;
  }

  .why__body h2 span {
    padding: 12px 20px 8px;
    font-size: min(calc(80px * var(--fs-scale)), 13vw);
  }

  .why-list h3 {
    font-size: calc(28px * var(--fs-scale));
  }

  .why-list p {
    font-size: calc(18px * var(--fs-scale));
  }

  .text-link {
    margin-top: 38px;
    font-size: calc(18px * var(--fs-scale));
  }

  .fit {
    padding: 86px clamp(30px, 5vw, 76px) 90px;
  }

  .fit__sheet {
    min-height: 1300px;
    padding-top: 110px;
  }

  /* Снимок держится тех же двух линий, что и на мобиле: верх рамки — на
     верхней линии заголовка (113px от верха листа), правый край — на правой
     линии набора листа (то же значение, что у поля .section-shell).
     Раньше он висел на отрицательных полях: верх уходил на 30px выше листа,
     правый край — на 60px за лист, и `overflow: hidden` резал снимок с двух
     сторон, оставляя узкую полосу. Поворот 2° снят — как и на мобиле. */
  /* та же сетка, что и на мобиле: колонка заголовка и снимок в одной
     строке, ширина снимка прежняя (34% листа) — её задаёт трек. */
  .fit .fit__sheet.section-shell {
    display: grid;
    /* Прежняя ширина снимка = 34% от паддинг-бокса листа. У трека процент
       считается от контент-бокса, поэтому добавляем 34% полей:
       0.68 x clamp(90px, 8vw, 132px). Замер: 235px на 768, 392px на 1280 —
       ровно как было до правки. */
    grid-template-columns: minmax(0, 1fr) calc(34% + 0.68 * clamp(90px, 8vw, 132px));
    column-gap: 40px;
    align-content: start;
  }

  .fit .fit__sheet.section-shell > * {
    grid-column: 1 / -1;
  }

  .fit .fit__sheet.section-shell > .section-eyebrow {
    grid-row: 1;
  }

  .fit .fit__sheet.section-shell > .fit__title-col {
    grid-column: 1;
    grid-row: 2;
    container-type: inline-size;
  }

  .fit .fit__sheet.section-shell > .fit__image {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    top: auto;
    right: auto;
    width: 100%;
  }

  .fit .fit__sheet .section-title {
    margin-top: -0.09em;
    font-size: min(min(clamp(calc(104px * var(--fs-scale)), 9vw, calc(138px * var(--fs-scale))), 16vw), 28cqi);
  }

  .fit__image {
    height: auto;
    aspect-ratio: 196 / 166;
    margin: 0;
    transform: none;
  }

  .fit .section-title {
    font-size: calc(118px * var(--fs-scale));
  }

  .fit-list {
    clear: both;
    padding-top: 46px;
  }

  .fit-list > p {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 96px;
    font-size: calc(26px * var(--fs-scale));
  }

  .fit-list > p > span {
    width: 44px;
    height: 44px;
  }

  /* Ширина ограничена, иначе на 1280+ строка ломается «…ОБРАЗОВАНИЕ НЕ /
     НУЖНЫ» с висящим предлогом. Загнутый угол — как на мобиле, крупнее. */
  .fit-highlight {
    position: relative;
    max-width: 760px;
    padding: 26px;
    font-size: calc(34px * var(--fs-scale));
  }

  .fit-highlight::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0;
    height: 0;
    content: "";
    border-top: 22px solid #8ea11c;
    border-right: 22px solid var(--paper);
  }

  .platform-note p,
  .not-fit p {
    font-size: calc(19px * var(--fs-scale));
  }

  .not-fit {
    padding: 30px;
  }

  .conditions__top-label {
    padding: 60px 20px 110px;
    font-size: calc(18px * var(--fs-scale));
  }

  .conditions h2 span {
    font-size: clamp(calc(150px * var(--fs-scale)), 15vw, calc(220px * var(--fs-scale)));
  }

  .conditions h2 small {
    font-size: calc(94px * var(--fs-scale));
  }

  .conditions__payment {
    font-size: calc(24px * var(--fs-scale));
  }

  .conditions__sheet h3 {
    font-size: calc(70px * var(--fs-scale));
  }

  .conditions__facts p {
    min-height: 150px;
    padding: 24px;
  }

  .conditions__facts span {
    font-size: calc(14px * var(--fs-scale));
  }

  .conditions__facts strong {
    font-size: calc(28px * var(--fs-scale));
  }

  .conditions__image {
    height: 380px;
  }

  .consultation {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .consultation h3 {
    font-size: calc(84px * var(--fs-scale));
  }

  .consultation > p:not(.section-eyebrow) {
    font-size: calc(22px * var(--fs-scale));
  }

  .prototype-footer {
    padding: 36px clamp(60px, 8vw, 120px);
  }

  .prototype-footer p {
    font-size: calc(20px * var(--fs-scale));
  }

  .prototype-footer p span,
  .prototype-footer a {
    font-size: calc(14px * var(--fs-scale));
  }
}

@media (max-width: 360px) {
  .section-shell {
    padding-right: 22px;
    padding-left: 22px;
  }

  .section-title {
    font-size: calc(62px * var(--fs-scale));
  }

  .section-title--xl {
    font-size: calc(84px * var(--fs-scale));
  }

  .team__heading h2 {
    font-size: calc(52px * var(--fs-scale));
  }

  .team__heading > span {
    font-size: calc(132px * var(--fs-scale));
  }

  /* прежнее правило .why__body h2 span (37px под ≤360) снято: оно перекрывалось
     ветвью канона ниже по файлу, но оставалось миной — на самом узком экране
     оно задирало кегль полоски вместо того, чтобы его уменьшать */

  .conditions h2 span {
    font-size: calc(82px * var(--fs-scale));
  }

  .fit__image {
    /* right задаётся ниже, в ветви ≤699px — здесь только размер снимка.
       Правый край снимка прижат к краю экрана (запас 5.7px на поворот 2°),
       сдвинуть рамку вправо нельзя — поэтому от заголовка уходим размером.
       Глифы «ПРОВЕРЬТЕ» кончаются на 155.4px; при 150×129 рамка на 320px
       начинается на ~159px, наезда нет. Пропорция 158:136 сохранена. */
    width: 150px;
    height: 129px;
  }

  .fit .section-title {
    width: 270px;
    font-size: calc(44px * var(--fs-scale));
    transform: scaleX(0.47);
  }

  .conditions__top-label {
    height: 56px;
    padding-top: 18px;
  }

  .conditions__image {
    height: 99px;
  }

  .consultation {
    padding-top: 16px;
    padding-bottom: 17px;
  }

  .prototype-footer {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-width: 360px) {
  /* прежнее правило .hero__nav (5px / gap 7px) снято: оно давно перекрывалось
     мобильной ветвью канона, но оставалось миной с нечитаемым кеглем */

  .hero h1 {
    font-size: min(calc(50px * var(--fs-scale)), 18vw);
  }

  .digitization__inner {
    padding-right: 24px;
    padding-left: 40px;
  }

  .digitization__intro h2 {
    font-size: calc(54px * var(--fs-scale));
  }

  .transformation h3 {
    font-size: calc(18px * var(--fs-scale));
  }
}

/* Block 02 — visual alignment to reference PNG (block-02-business-digitization-mobile.png) */
.digitization__intro h2 {
  width: 250%;                                   /* 1 / 0.4 */
  font-size: min(calc(92px * var(--fs-scale)), 30vw);
  font-weight: 640;
  line-height: 0.95;
  letter-spacing: -0.04em;
  transform: scaleX(0.4);
}

.digitization__eyebrow {
  position: relative;
}

.digitization__eyebrow::after {
  position: absolute;
  top: 50%;
  right: -12px;
  left: 170px;
  height: 1px;
  content: "";
  background: repeating-linear-gradient(to right, var(--rail-soft) 0 5px, transparent 5px 10px);
}

.transformations {
  border-top: 1px dashed var(--rail-soft);
}

.transformation {
  min-height: 92px;
  border-bottom: 1px dashed var(--rail-soft);
}

.transformation--long {
  min-height: 120px;
}

.transformation__number {
  font-size: calc(21px * var(--fs-scale));
}

.transformation h3 {
  gap: 16px;
  width: 175.44%;
  font-size: clamp(calc(24px * var(--fs-scale)), 8vw, calc(31.5px * var(--fs-scale)));
  line-height: 1.04;
  transform: scaleX(0.57);
}

.transformation h3 span {
  flex-shrink: 0;
}

.transformation--long h3 {
  line-height: 1;
}

.transformation--long h3 b {
  align-self: end;
  line-height: normal;
}

.transformation h3 b {
  font-size: calc(40px * var(--fs-scale));
  line-height: 0;
}

.transformation__body p {
  overflow: visible;
  font-size: calc(13px * var(--fs-scale));
}

.technical-rail--right {
  top: 57px;
  right: 12px;
  width: 17px;
  height: 258px;
  opacity: 0.7;
  background:
    linear-gradient(var(--olive), var(--olive)) center top / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--olive) 0 1px, transparent 1px 11px) center top / 9px calc(100% + 1px) no-repeat,
    repeating-linear-gradient(to bottom, var(--olive) 0 1px, transparent 1px 55px) center top / 17px calc(100% + 1px) no-repeat;
}

.technical-rail--right::before,
.technical-rail--right::after {
  left: 0;
}

@media (min-width: 700px) {
  /* keep desktop exactly as before the block-02 mobile alignment */
  .digitization__intro h2 {
    width: 188.7%;                               /* 1 / 0.53 */
    font-size: min(clamp(calc(92px * var(--fs-scale)), 9.2vw, calc(142px * var(--fs-scale))), 13vw);
    font-weight: 520;
    line-height: 0.92;
    letter-spacing: -0.047em;
    transform: scaleX(0.53);
  }

  .digitization__eyebrow::after {
    content: none;
  }

  .transformations {
    border-top: 1px solid var(--line);
  }

  .transformation {
    min-height: 122px;
    border-bottom: 1px solid var(--line);
  }

  .transformation--long {
    min-height: 150px;
  }

  /* То же, что на мобиле: коробка цифры совпадает с уголковой рамкой, здесь
     рамка шире — 65px с отступом 13px (см. .transformation::before). Без
     этого коробка тянулась во всю колонку набора (110px на планшете, 156px
     на широком экране), и цифра вставала по центру КОЛОНКИ — то есть на
     32px правее рамки, за её правым уголком. Ровно это владелец и увидел.
     Нулевой левый отступ обязателен: базовое правило даёт 11px, а с 1080px
     — 35px, и оба сдвигают цифру внутри её коробки. */
  /* Класс примитива в селекторе не для красоты: у k-num--plain своя ширина
     (width: auto), и без него правило проигрывает по весу. */
  .transformation .transformation__number.k-num--plain {
    justify-self: start;
    width: 65px;
    margin-left: 13px;
    padding-left: 0;
  }

  .transformation__number {
    font-size: calc(27px * var(--fs-scale));
  }

  .transformation h3 {
    gap: 6px 20px;
    width: 111.12%;                              /* 1 / 0.9 */
    font-size: clamp(calc(18px * var(--fs-scale)), 5.1vw, calc(22px * var(--fs-scale)));
    line-height: 1.03;
    transform: scaleX(0.9);
  }

  .transformation h3 span {
    flex-shrink: 1;
  }

  .transformation--long h3 {
    line-height: 1.03;
  }

  .transformation h3 b {
    font-size: calc(38px * var(--fs-scale));
    line-height: normal;
  }

  .transformation__body p {
    overflow: visible;
    font-size: calc(17px * var(--fs-scale));
  }

  .technical-rail--right {
    top: 110px;
    right: calc(clamp(40px, 8vw, 132px) * 0.38);
    width: 1px;
    height: 330px;
    opacity: 0.75;
    background: repeating-linear-gradient(to bottom, var(--olive) 0 1px, transparent 1px 13px);
  }

  .technical-rail--right::before,
  .technical-rail--right::after {
    left: -8px;
  }
}

@media (max-width: 360px) {
  .digitization__intro h2 {
    font-size: min(calc(88px * var(--fs-scale)), 30vw);
  }
}

/* Block 04 — visual alignment to reference PNG (block-04-universal-method-mobile.png) */
.method__hero {
  min-height: 285px;
}

.method__hero > img {
  object-position: 52% 16%;
}

.method__hero h2 {
  width: 238.1%;                                 /* 1 / 0.42 */
  font-size: min(calc(65px * var(--fs-scale)), 13vw);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.05em;
  transform: scaleX(0.42);
}

.method__body {
  padding-right: 24px;
}

.method__hero .lime-label {
  margin-top: 18px;
  padding: 4px 7px;
  font-size: calc(10px * var(--fs-scale));
}

.method__thesis {
  margin: 0 0 13px;
  font-size: calc(17.5px * var(--fs-scale));
  line-height: 1.32;
}

.method__note {
  margin: 0 0 4px;
  font-size: calc(13.5px * var(--fs-scale));
  line-height: 1.16;
}

.method__note strong {
  font-size: calc(13px * var(--fs-scale));
  letter-spacing: 0.03em;
}

.method-steps {
  position: relative;
  margin: 0 13px 0 -4px;
  border-top: 1px solid var(--rail-soft);
}

.method-steps::before {
  position: absolute;
  top: -1px;
  bottom: 26px;
  left: 13px;
  width: 1px;
  content: "";
  background: var(--rail-soft);
}

.method-steps li {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 76px;
  gap: 18px;
  padding-left: 34px;
  border-bottom: 1px solid var(--rail-soft);
}

/* rail node marker + dash to the number box */
.method-steps li::before {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 25px;
  height: 9px;
  content: "";
  transform: translateY(-50%);
  background:
    linear-gradient(var(--rail), var(--rail)) 0 0 / 9px 1px no-repeat,
    linear-gradient(var(--rail), var(--rail)) 0 8px / 9px 1px no-repeat,
    linear-gradient(var(--rail), var(--rail)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--rail), var(--rail)) 8px 0 / 1px 9px no-repeat,
    linear-gradient(var(--rail), var(--rail)) 3px 3px / 3px 3px no-repeat,
    linear-gradient(var(--rail), var(--rail)) 9px 4px / 16px 1px no-repeat;
}

/* small cross at the right end of each row rule */
.method-steps li::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 11px;
  height: 11px;
  content: "";
  background: var(--deco-cross);
}

.method-steps > li > span {
  width: 34px;
  height: 38px;
  border-width: 2px;
  font-size: calc(21px * var(--fs-scale));
}

.method-steps h3 {
  width: 240%;
  margin: 0 0 3px;
  font-size: calc(29.5px * var(--fs-scale));
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform: scaleX(0.5);
  transform-origin: left center;
}

.method-steps p {
  font-size: calc(11.5px * var(--fs-scale));
  line-height: 1.3;
}

@media (min-width: 700px) {
  /* keep desktop as before the block-04 mobile alignment */
  .method__hero {
    min-height: 720px;
  }

  .method__hero > img {
    object-position: 68% center;
  }

  .method__hero h2 {
    width: 130%;
    font-size: clamp(calc(100px * var(--fs-scale)), 9vw, calc(136px * var(--fs-scale)));
    font-weight: 420;
    line-height: 1.02;
    letter-spacing: -0.045em;
    transform: scaleX(0.48);
  }

  .method__body {
    padding-right: 15.4vw;
  }

  .method__thesis {
    margin-bottom: 11px;
    line-height: 1.3;
  }

  .method__note {
    font-size: calc(20px * var(--fs-scale));
    line-height: 1.25;
  }

  .method__note strong {
    font-size: inherit;
    letter-spacing: 0.02em;
  }

  .method-steps {
    margin: 0 -30px 0 30px;
    border-top: 0;
  }

  .method__hero .lime-label {
    margin-top: 38px;
  }

  .method-steps::before {
    content: none;
  }

  .method-steps li {
    min-height: 88px;
    padding-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .method-steps li::before,
  .method-steps li::after {
    content: none;
  }

  .method-steps > li > span {
    border-width: 1px;
  }

  .method-steps h3 {
    width: auto;
    margin-bottom: 2px;
    font-size: calc(44px * var(--fs-scale));
    line-height: 1;
    letter-spacing: normal;
    white-space: normal;
    transform: none;
  }

  .method-steps p {
    font-size: calc(20px * var(--fs-scale));
    line-height: 1.28;
  }
}

/* Block 01 — visual alignment to reference PNG (block-01-hero-recognition.png) */
@media (max-width: 699px) {
  .hero__portrait {
    filter: saturate(0.85) sepia(0.05) contrast(0.95) brightness(0.96);
  }

  .hero__header {
    padding: 20px 20px 0;
  }

  .hero__content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: var(--fs-xs);
  }

  /* потолки в vw: колонка героя стоит от нижнего края экрана, и при крупном
     множителе её верх доезжал до логотипа в шапке */
  .hero h1 {
    font-size: min(clamp(calc(72px * var(--fs-scale)), 24.3vw, calc(99px * var(--fs-scale))), 27vw);
    line-height: 0.92;
  }

  .hero__lead {
    margin: 12px 0 12px;
    font-size: min(var(--fs-sm), 5vw);
    line-height: 1.35;
  }

  .hero__cta {
    box-shadow: 0 0 0 2px rgb(24 25 21 / 65%);
  }

  .hero__proof {
    right: 20px;
    bottom: 26px;
    font-size: var(--fs-2xs);
  }
}


/* Block 05 — visual alignment to reference PNG (block-05-own-ai-team-mobile-v2.png) */
@media (max-width: 699px) {
  /* classic scrollbars steal ~15px and break the fixed 390px geometry */
  html {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    width: 0;
    height: 0;
  }


  .team .section-shell {
    padding: 70px 33px 26px 28px;
  }

  .team > .section-shell > .section-eyebrow {
    margin-bottom: 0;
  }

  .team__heading {
    min-height: 169px;
  }

  .team__heading > span {
    top: -50px;
    left: 17px;
    font-size: calc(235px * var(--fs-scale));
    font-weight: 560;
    letter-spacing: -0.04em;
    transform: scaleX(0.37);
    transform-origin: left top;
  }

  .team__heading h2 {
    font-weight: 560;
    line-height: 0.87;
  }

  .team > .section-shell > .section-lead {
    margin-top: 18px;
    margin-left: 18px;
    font-size: var(--fs-xs);
    line-height: 1.4;
  }

  .ownership-banner {
    position: relative;
    min-height: 78px;
    margin: 4px -8px 0 1px;
    padding: 13px 10px 14px;
  }

  .ownership-banner::before {
    position: absolute;
    inset: 9px 11px;
    content: "";
    pointer-events: none;
    opacity: 0.72;
    --bk-c: var(--paper);
    --bk-len: 15px;
    --bk-th: 1.5px;
    background: var(--deco-brackets);
  }

  /* torn tape at both ends */
  .ownership-banner::after {
    position: absolute;
    top: 14px;
    right: -8px;
    left: -8px;
    height: 46px;
    content: "";
    pointer-events: none;
    opacity: 0.45;
    background:
      linear-gradient(105deg, rgb(228 222 206 / 0%) 0 6px, rgb(228 222 206) 6px) left top / 22px 100% no-repeat,
      linear-gradient(75deg, rgb(228 222 206) calc(100% - 6px), rgb(228 222 206 / 0%) 0) right top / 22px 100% no-repeat;
  }

  /* без nowrap: при крупном множителе строка не помещалась в
     скомпенсированную коробку и уезжала за плашку */
  .ownership-banner h3 {
    width: 190%;
    margin: 0 0 5px -45%;
    font-size: min(calc(32px * var(--fs-scale)), 11vw);
    font-weight: 560;
    line-height: 0.9;
    letter-spacing: -0.01em;
    transform: scaleX(0.553);
    transform-origin: center top;
  }

  .ownership-banner p {
    font-size: var(--fs-xs);
  }

}

/* Block 03 — visual alignment to reference PNG (block-03-real-processes-mobile-v2-photo-flip.png) */
@media (max-width: 699px) {
  .cases {
    position: relative;
    min-height: 0;
  }

  /* right-hand ruler + cross, as in the reference */
  .cases::after {
    position: absolute;
    top: 96px;
    right: 12px;
    width: 17px;
    height: 190px;
    content: "";
    opacity: 0.7;
    pointer-events: none;
    background:
      linear-gradient(var(--olive), var(--olive)) center top / 1px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--olive) 0 1px, transparent 1px 11px) center top / 9px calc(100% + 1px) no-repeat,
      repeating-linear-gradient(to bottom, var(--olive) 0 1px, transparent 1px 55px) center top / 17px calc(100% + 1px) no-repeat;
  }

  .cases::before {
    position: absolute;
    top: 300px;
    right: 32px;
    width: 15px;
    height: 15px;
    content: "";
    opacity: 0.65;
    pointer-events: none;
    background:
      linear-gradient(var(--olive), var(--olive)) 0 7px / 15px 1px no-repeat,
      linear-gradient(var(--olive), var(--olive)) 7px 0 / 1px 15px no-repeat;
  }

  .cases .section-title--xl {
    font-size: calc(122px * var(--fs-scale));
    font-weight: 560;
    line-height: 0.87;
    transform: scaleX(0.55);
  }

  .cases .section-lead {
    max-width: 220px;
    margin-top: 17px;
    margin-bottom: 16px;
    font-size: var(--fs-sm);
    line-height: 1.21;
  }

  .case-card {
    position: relative;
    border-radius: 10px;
  }

  .case-card__meta {
    display: block;
    min-height: 0;
    padding: 9px 13px 7px;
  }

  /* lime evidence-frame bracket, top-right of the first card */
  .case-card:first-child .case-card__meta::after {
    position: absolute;
    top: 10px;
    right: 13px;
    width: 22px;
    height: 17px;
    content: "";
    background:
      linear-gradient(var(--lime), var(--lime)) left top / 7px 1.5px no-repeat,
      linear-gradient(var(--lime), var(--lime)) left top / 1.5px 7px no-repeat,
      linear-gradient(var(--lime), var(--lime)) right top / 7px 1.5px no-repeat,
      linear-gradient(var(--lime), var(--lime)) right top / 1.5px 7px no-repeat,
      linear-gradient(var(--lime), var(--lime)) left bottom / 7px 1.5px no-repeat,
      linear-gradient(var(--lime), var(--lime)) left bottom / 1.5px 7px no-repeat,
      linear-gradient(var(--lime), var(--lime)) right bottom / 7px 1.5px no-repeat,
      linear-gradient(var(--lime), var(--lime)) right bottom / 1.5px 7px no-repeat;
  }

  .case-card__body h3 {
    width: 166.7%;                               /* 1 / 0.6 */
    font-size: min(calc(44px * var(--fs-scale)), 15vw);
    line-height: 0.91;
    transform: scaleX(0.6);
  }

  /* fact rows: indented text, rule with a small cross at the left */
  .case-facts div {
    position: relative;
    padding: 6px 0 6px 13px;
  }

  .case-facts div::before {
    position: absolute;
    top: -5px;
    left: -3px;
    width: 9px;
    height: 9px;
    content: "";
    background:
      linear-gradient(#35362f, #35362f) 0 4px / 9px 1px no-repeat,
      linear-gradient(#35362f, #35362f) 4px 0 / 1px 9px no-repeat;
  }

  .case-controls {
    margin-top: 10px;
  }

  .case-controls span {
    color: #8f9c35;
    letter-spacing: 0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* Block 06 — visual alignment to reference PNG (block-06-mentorship-rhythm-mobile-v2.png) */
@media (max-width: 699px) {
  .rhythm .section-shell {
    padding: 56px 24px 30px 30px;
  }

  .rhythm__intro {
    position: relative;
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 14px;
  }

  /* dashed rail with ticks left of the title */
  .rhythm__intro::before {
    position: absolute;
    top: 4px;
    bottom: 96px;
    left: -16px;
    width: 7px;
    content: "";
    background:
      repeating-linear-gradient(to bottom, var(--rail) 0 1px, transparent 1px 7px) center top / 1px 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--rail) 0 1px, transparent 1px 34px) center top / 7px 100% no-repeat;
  }

  .rhythm__intro .section-eyebrow {
    font-size: var(--fs-2xs);
    white-space: nowrap;
  }

  .rhythm__intro .section-title {
    width: 132%;
    font-size: calc(55px * var(--fs-scale));
    font-weight: 560;
    line-height: 0.97;
    letter-spacing: -0.02em;
    transform: scaleX(0.62);
    transform-origin: left top;
  }

  .rhythm__intro .section-lead {
    margin-top: 14px;
    padding-top: 14px;
    font-size: var(--fs-sm);
    line-height: 1.35;
  }

  .rhythm__intro img {
    height: 322px;
  }

  .materials-note {
    margin-right: 24px;
    padding: 13px 12px;
  }

  .materials-note strong {
    font-size: var(--fs-sm);
  }

  .materials-note p {
    font-size: var(--fs-sm);
  }

  .materials-note small {
    font-size: var(--fs-xs);
  }

  .program-topics {
    margin-right: 24px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    text-align: center;
  }
}

/* Block 07 — visual alignment to reference PNG (block-07-why-denis-mobile.png) */
@media (max-width: 699px) {
  .why__portrait {
    height: 415px;
  }

  .why__body h2 {
    display: grid;
    justify-items: start;
    margin: -150px -6px 0;
  }

  .why__body h2 span {
    position: relative;
    max-width: 100%;
    padding: 11px 14px 7px 12px;
    /* Полоска — цельная строка, переносить её нельзя, поэтому кегль тянется
       по ширине экрана: самая длинная строка равна 9.94em + 26px полей, и при
       левом поле 24px она должна укладываться до правой линии набора.
       Знаменатель: 24px левое поле + 26px внутренние поля + 24px правое поле
       = 74px. С прежними 72px полоска перелезала правую линию набора на 2.1px
       на всех ширинах. Кегль на эталонных 390px — 31.8px (было 32.0px):
       линия набора важнее круглого значения, разница невидима.
       Выше 392px формула упирается в потолок 32px, ниже — уменьшается. */
    font-size: min(calc(32px * var(--fs-scale)), calc((100vw - 74px) / 9.94));
    font-weight: 620;
    letter-spacing: -0.01em;
    line-height: 1;
    background: var(--paper);
    box-shadow: 0 3px 9px rgb(20 21 17 / 28%);
  }

  .why__body h2 span:nth-child(1) { transform: rotate(-0.7deg); z-index: 3; }
  .why__body h2 span:nth-child(2) { transform: rotate(0.5deg); z-index: 2; margin-top: -3px; }
  .why__body h2 span:nth-child(3) { transform: rotate(-0.4deg); z-index: 1; margin-top: -3px; }

  .why__body > .section-lead {
    margin-top: 26px;
    margin-left: 4px;
    font-size: var(--fs-md);
    line-height: 1.35;
  }

  .why-list {
    position: relative;
    margin: 20px 0 0 34px;
  }

  /* dashed vertical rail on the left */
  .why-list::before {
    position: absolute;
    top: 6px;
    bottom: 30px;
    left: -26px;
    width: 1px;
    content: "";
    background: repeating-linear-gradient(to bottom, var(--rail) 0 5px, transparent 5px 10px);
  }

  .why-list li {
    position: relative;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 13px 0 12px;
    border-bottom: 1px dashed var(--rail-soft);
  }

  .why-list li:last-child {
    border-bottom: 0;
  }

  /* cross at the right end of each divider */
  .why-list li::after {
    position: absolute;
    right: -2px;
    bottom: -6px;
    width: 11px;
    height: 11px;
    content: "";
    background: var(--deco-cross);
  }

  .why-list li:last-child::after {
    content: none;
  }

  .why-list > li > span {
    width: 38px;
    height: 44px;
    border: 2px solid var(--ink);
    font-size: calc(20px * var(--fs-scale));
  }

  .why-list h3 {
    font-size: var(--fs-lg);
    letter-spacing: 0.04em;
  }

  .why-list h3::before {
    content: "/ ";
    color: #6f6c55;
  }

  .why-list p {
    font-size: var(--fs-sm);
    line-height: 1.35;
  }

  .why-stamp {
    display: table;
    margin: -14px 0 0 auto;
    padding: 9px 13px;
    color: var(--paper);
    font-family: var(--display);
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    background: var(--ink);
    transform: rotate(-1.2deg);
  }

  .why .text-link::after {
    content: " →";
  }
}

/* Block 08 — visual alignment to reference PNG (block-08-fit-requirements-mobile.png) */
@media (max-width: 699px) {
  .fit__sheet {
    padding: 52px 30px 30px;
  }

  /* Снимок стоит ровно и по линиям набора: верхний край рамки — на верхней
     линии заголовка (71px от верха листа = чернила «ПРОВЕРЬТЕ»), правый край
     рамки — на правой линии набора (24px). Поворот 2° снят: рядом с прямой
     сеткой листа и прямым заголовком он читался кривой рамкой, а не «живым»
     снимком, и съедал поле справа (правый край уходил на 5px от края экрана). */
  /* Верх листа — сетка: заголовок в левой колонке, снимок в правой, обе
     стоят на одной строке. Верхняя кромка снимка = верхняя линия первой
     строки заголовка, зазор между ними задаёт column-gap, а не догадка про
     абсолютные координаты. Абсолютный снимок раньше висел поверх колонки
     заголовка, и «Т» в «ПОДХОДИТ» упиралась в рамку. */
  /* Верх листа — сетка: колонка заголовка и снимок стоят в одной строке.
     Снимок держит свой прежний размер (196px, на ≤360 — 134px), а кегль
     заголовка считается от ширины оставшейся колонки (43cqi ≈ ширина
     «ПОДХОДИТ» при scaleX 0.5), поэтому буквы не доходят до рамки ни на
     одной ширине. Отрицательное поле −0.0972em поднимает коробку h2 на
     верхний свес шрифта: верхняя кромка снимка встаёт ровно на верхнюю
     линию первой строки, а не на служебный отступ строки. */
  .fit .fit__sheet.section-shell {
    --fit-photo: 196px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-content: start;
  }

  .fit .fit__sheet.section-shell > * {
    grid-column: 1 / -1;
  }

  .fit .fit__sheet.section-shell > .section-eyebrow {
    grid-row: 1;
  }

  .fit .fit__sheet.section-shell > .fit__title-col {
    grid-column: 1;
    grid-row: 2;
    container-type: inline-size;
  }

  .fit .fit__sheet.section-shell > .fit__image {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    top: auto;
    right: auto;
    width: var(--fit-photo);
    height: auto;
    aspect-ratio: 196 / 166;
    transform: none;
  }

  .fit .fit__sheet .section-title.k-display {
    margin-top: -0.0972em;
    font-size: min(calc(60px * var(--fs-scale)), 43cqi);
    font-weight: 560;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  .fit > .fit__sheet > .section-lead {
    width: 180px;
    font-size: var(--fs-sm);
    line-height: 1.35;
  }

  .fit-list {
    position: relative;
    margin-top: 26px;
  }

  /* dashed rail left of the checklist */
  .fit-list::before {
    position: absolute;
    top: 34px;
    bottom: 6px;
    left: -18px;
    width: 1px;
    content: "";
    background: repeating-linear-gradient(to bottom, var(--rail) 0 5px, transparent 5px 10px);
  }

  .fit-highlight {
    margin: 18px 10px 18px 2px;
    padding: 15px 14px;
    font-size: var(--fs-md);
    line-height: 1.3;
    transform: rotate(-0.9deg);
  }

  .not-fit {
    position: relative;
    margin: 16px -2px 0;
    padding: 16px 20px 15px;
    box-shadow: 2px 5px 12px rgb(20 21 17 / 30%);
    transform: rotate(-0.6deg);
  }

  /* tape at the top-left */
  .not-fit::before {
    position: absolute;
    top: -9px;
    left: 14px;
    width: 52px;
    height: 18px;
    content: "";
    opacity: 0.55;
    background: #d9d4c3;
    transform: rotate(-4deg);
  }
}

/* Block 09 — visual alignment to reference PNG (block-09-conditions-cta-mobile.png) */
@media (max-width: 699px) {
  .conditions__top-label {
    display: flex;
    align-items: center;
    height: 58px;
    gap: 14px;
    padding: 0 18px;
  }

  .conditions__top-label::before,
  .conditions__top-label::after {
    flex: 1 1 0;
    content: "";
    border-top: 1px dashed rgb(238 234 224 / 40%);
  }

  .conditions h2 span {
    padding-bottom: 12px;
    border-bottom: 1px dashed #6f6c55;
    font-size: calc(88px * var(--fs-scale));
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .conditions h2 small {
    margin-top: 10px;
    font-size: calc(58px * var(--fs-scale));
    font-weight: 600;
  }

  .conditions__payment {
    font-size: var(--fs-sm);
    letter-spacing: 0.05em;
  }

  .conditions__sheet h3 {
    font-size: calc(30px * var(--fs-scale));
    font-weight: 560;
  }

  .conditions__facts {
    position: relative;
    margin-top: 16px;
    padding: 6px;
  }

  /* corner brackets around the facts box */
  .conditions__facts::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(var(--rail), var(--rail)) left top / 14px 1.5px no-repeat,
      linear-gradient(var(--rail), var(--rail)) left top / 1.5px 14px no-repeat,
      linear-gradient(var(--rail), var(--rail)) right top / 14px 1.5px no-repeat,
      linear-gradient(var(--rail), var(--rail)) right top / 1.5px 14px no-repeat,
      linear-gradient(var(--rail), var(--rail)) left bottom / 14px 1.5px no-repeat,
      linear-gradient(var(--rail), var(--rail)) left bottom / 1.5px 14px no-repeat,
      linear-gradient(var(--rail), var(--rail)) right bottom / 14px 1.5px no-repeat,
      linear-gradient(var(--rail), var(--rail)) right bottom / 1.5px 14px no-repeat;
  }

  .conditions__facts p {
    min-height: 74px;
    justify-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
  }

  .conditions__facts span {
    font-size: var(--fs-2xs);
    letter-spacing: 0.12em;
  }

  .conditions__facts strong {
    font-size: var(--fs-md);
    line-height: 1.25;
  }

  .prototype-footer a::before {
    content: "[ ";
  }

  .prototype-footer a::after {
    content: " \2191 ]";
  }
}

/* Desktop fixes: hero header overlap, fit lead overlap, role tags */
@media (min-width: 700px) {
  /* content is bottom-anchored; a negative computed top pulled it into the header.
     min-height guard keeps short viewports from pushing the title into the header. */
  .hero__content {
    top: auto;
  }

  .hero {
    min-height: max(100vh, 700px);
  }

  .fit > .fit__sheet > .section-lead {
    width: 300px;
    margin-top: 30px;
  }
}

/* ================================================================
   CANON CORE — единственный источник компонентов k-* (все ширины).
   Маркеры, списки, штампы, печати, теги и CTA выглядят одинаково
   на мобиле и на десктопе — это и есть канон стайлгайда.
   Экранно-зависимое (кегли дисплеев, сжатие, линия набора 24px,
   карта декора, компоновка блока 5) — ниже, в мобильной ветке.
   Удвоенные классы в селекторах — намеренно: перекрытие старых
   блочных правил без !important.
   ================================================================ */

/* --- ай-броу: типографика и пунктир до края --- */
.k-eyebrow.k-eyebrow.k-eyebrow { display: flex; align-items: center; gap: 10px; width: auto; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rail); }
.k-eyebrow.k-eyebrow.k-eyebrow::after { content: ""; position: static; flex: 1 1 0; height: 1px; margin: 0; background: repeating-linear-gradient(to right, var(--rail-soft) 0 5px, transparent 5px 10px); }
.k-eyebrow.k-eyebrow.section-eyebrow--light { color: rgb(244 241 233 / 84%); }

/* --- номерной маркер: 32x32 везде (глава 03) --- */
/* padding-bottom 0.16em — оптическая компенсация: у цифр этой гарнитуры
   нет нижних выносных, и при геометрическом центрировании над цифрой
   оставалось 8.5px, а под ней 5.5px (замер ink-бокса на 390/базовом
   кегле). Половина этой разницы в em держит компенсацию на любом кегле. */
span.k-num.k-num, i.k-num.k-num { display: inline-grid; place-items: center; box-sizing: border-box; width: 1.88em; height: 1.88em; min-width: 32px; min-height: 32px; padding: 0 0 0.16em; border: 2px solid var(--ink); border-radius: 0; font-family: var(--display); font-size: calc(17px * var(--fs-scale)); font-weight: 600; line-height: 1; color: #292b25; background: var(--lime); }
/* «голый» номер — без рамки и плашки, поэтому и без коробки: с квадратом
   1.88em он при крупном кегле выезжал из своей колонки на текст строки */
span.k-num.k-num--plain { width: auto; height: auto; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--olive); font-size: calc(21px * var(--fs-scale)); }

/* --- список с рельсой (глава 04) --- */
.k-list.k-list.k-list { position: relative; margin: var(--sp-5) 0 0; padding: 0; border: 0; list-style: none; }
.k-list.k-list.k-list::before { content: ""; position: absolute; top: 6px; bottom: 30px; left: -12px; width: 1px; background: repeating-linear-gradient(to bottom, var(--rail) 0 5px, transparent 5px 10px); }
.k-list.k-list.k-list > li, .k-list.k-list.k-list > p { position: relative; display: grid; grid-template-columns: minmax(40px, auto) minmax(0, 1fr); gap: var(--sp-4); align-items: center; min-height: 0; margin: 0; padding: 13px 0 12px; border: 0; border-bottom: 1px dashed var(--rail-soft); }
.k-list.k-list.k-list > li::before, .k-list.k-list.k-list > p::before { content: none; }
.k-list.k-list.k-list > li:last-child, .k-list.k-list.k-list > p:last-of-type { border-bottom: 0; }
.k-list.k-list.k-list > li::after, .k-list.k-list.k-list > p::after { content: ""; position: absolute; top: auto; left: auto; right: -5px; bottom: -6px; width: 11px; height: 11px; opacity: 1; background: var(--deco-cross); }
.k-list.k-list.k-list > li:last-child::after, .k-list.k-list.k-list > p:last-of-type::after { content: none; }
.k-list.k-list.k-list > p { font-family: var(--display); font-size: var(--fs-md); line-height: 1.2; }
.k-list.k-list li h3 { width: auto; margin: 0 0 2px; font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0.04em; line-height: 1.15; white-space: normal; transform: none; }
.k-list.k-list li h3::before { content: "/ "; color: #6f6c55; }
.k-list.k-list li p { margin: 0; font-size: var(--fs-sm); line-height: 1.35; }

/* --- штампы и печать (глава 05) --- */
.k-stamp.k-stamp.k-stamp { display: table; width: auto; margin: 0; padding: 5px 9px; border: 0; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-align: left; color: var(--paper); background: var(--ink); box-shadow: none; transform: none; }
.k-stamp.k-stamp.k-stamp--tilt { transform: rotate(-1.2deg); }
.k-seal.k-seal.k-seal { position: relative; display: table; width: auto; margin: 0; padding: 9px 22px; border: 4px solid var(--ink); font-family: var(--display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.18em; text-align: center; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 3px rgb(238 234 224 / 90%), inset 0 0 0 4px var(--ink); }

/* --- теги состояния (глава 06) --- */
.k-tag.k-tag.k-tag { display: inline-block; width: auto; padding: 2px 6px; border: 1.5px solid #4b4c43; font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; white-space: nowrap; color: #292b25; background: var(--lime); }
.k-tag.k-tag.k-tag--optional { border-width: 1px; background: #ddd9cd; }

/* --- CTA (глава 07); отступ снаружи компонента задаёт лейаут секции --- */
.k-cta.k-cta.k-cta { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; max-width: 100%; min-height: 56px; padding: 0 32px; border: 2px solid #141511; border-radius: 0; font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0.04em; line-height: 1.1; text-decoration: none; color: var(--graphite); background: var(--lime); cursor: pointer; }
.k-cta.k-cta.k-cta--ghost { background: transparent; }
/* текстовый вариант — там, где рядом уже стоит рамочный объект (печать,
   штамп) и вторая рамка прочиталась бы как вторая кнопка */
.k-cta.k-cta.k-cta--link { min-height: 44px; padding: 0; border: 0; background: transparent; justify-content: flex-start; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }

/* --- комплект разнородных источников (глава 11) ---
   Не шаги и не список: три предмета разного материала, собранные вместе.
   Материал = роль источника (выдано / сделано вами / ходит по рукам),
   разное выравнивание и лёгкий наклон держат «разные вещи в одном комплекте»,
   пунктирная рельса слева связывает их. Соседство (глава 07): ни один из трёх
   не повторяет форму соседей секции — тёмного баннера-вердикта и ghost-кнопки. */
/* полоски повёрнуты — на крупном кегле углы соседних листов сходились
   вплотную, поэтому зазор чуть больше базового */
.k-set.k-set { position: relative; display: grid; gap: calc(var(--sp-3) + 4px); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
/* рельса комплекта — по оси левого поля (глава 09) */
.k-set.k-set::before { content: ""; position: absolute; top: 4px; bottom: 10px; left: -12px; width: 1px; background: repeating-linear-gradient(to bottom, var(--rail) 0 5px, transparent 5px 10px); }
.k-set.k-set::after { content: ""; position: absolute; bottom: 0; left: -17px; width: 11px; height: 11px; background: var(--deco-cross); }
.k-set.k-set > li { display: table; width: auto; margin: 0; font-family: var(--display); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.05em; line-height: 1.2; color: var(--graphite); }
/* 1 · выдано — светлая полоска с тенью: тот же материал, что k-strips.
   Тёмная плашка здесь запрещена: ниже в секции стоит тёмный баннер-вердикт,
   и вторая тёмная плита отнимает у него вес. */
.k-set.k-set > .k-set__given { margin-right: auto; padding: 8px 12px; background: var(--paper); box-shadow: 0 3px 9px rgb(20 21 17 / 22%); transform: rotate(-1.2deg); }
/* 2 · ваше — lime как след маркера по тексту, а не плашка: роль главного
   действия (глава 07) остаётся за единственной lime-кнопкой страницы */
.k-set.k-set > .k-set__own { margin-left: auto; padding: 0; background: none; transform: rotate(0.9deg); }
.k-set.k-set > .k-set__own > span { display: inline; padding: 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: linear-gradient(to top, transparent 0 0.06em, var(--lime) 0.06em 0.92em, transparent 0.92em); }
/* 3 · общее — второй экземпляр того же листа: плотная бумага и жёсткая
   копия со сдвигом. Рамка запрещена (повторила бы ghost-кнопку), скобки —
   тоже (ими обведён баннер-вердикт сразу под комплектом).
   ВАЖНО — один наклон на предмет: лист и текст лежат в одном слое (span),
   поэтому строка лежит НА листе, а не поверх него. Наклон несёт span;
   у li наклона нет — он остаётся неповёрнутой системой координат, от которой
   отсчитывается копия. Разные углы у текста и его же плашки — дефект. */
.k-set.k-set > .k-set__shared { position: relative; margin-left: 8px; margin-right: auto; padding: 0; background: none; transform: none; }
.k-set.k-set > .k-set__shared > span { position: relative; display: block; padding: 9px 12px; background: var(--paper-deep); box-shadow: 0 2px 4px rgb(20 21 17 / 24%); transform: rotate(-0.5deg); }
/* второй экземпляр — целый лист под первым, а не обводка вокруг него:
   та же плотная бумага, сдвиг вправо-вниз и свой угол; из-под верхнего листа
   видна полоса с краем-волоском. Собственная тень верхнего листа отделяет
   стопку: без неё две одинаковые бумаги слипаются в один кривой многоугольник. */
.k-set.k-set > .k-set__shared::before { content: ""; position: absolute; inset: 0; background: var(--paper-deep); border: 1px solid var(--rail-soft); transform-origin: 0 0; transform: rotate(1.2deg) translate(6px, 5px); pointer-events: none; }

/* --- цикл-циферблат (глава 14) ---
   Еженедельный ритм: три шага на кольце вокруг тёмного штампа.
   Кольцо одно и ровное — пунктирный круг на CSS, а не три вычисляемые
   дуги: считать координаты в скрипте больше не нужно, и кривиться нечему.
   Геометрия только в процентах ширины: R = 36%, шаги стоят в 12 / 4 / 8
   часов (0°, 120°, 240°), поэтому круг остаётся кругом на любой ширине.
   Направление задают три одинаковых шеврона по касательной — по одному
   на каждую дугу, чтобы цикл читался как цикл.
   Номера — plain: lime остаётся за главным действием страницы и не
   спорит с тёмным штампом за центр внимания. */
/* Плашки стоят по кругу абсолютом и свисают ниже коробки кольца на ~24px
   (кольцу задано aspect-ratio: 1). Нижнее поле учитывает этот свес —
   иначе последняя строка плашки упиралась в следующую плиту. */
.k-cycle { position: relative; aspect-ratio: 1; margin: var(--sp-2) 0 calc(var(--sp-6) + 28px); }
.k-cycle__ring { position: absolute; top: 14%; left: 14%; width: 72%; height: 72%; border: 1.5px dashed var(--rail-soft); border-radius: 50%; }
.k-cycle__dir { position: absolute; width: 11px; height: 11px; border-right: 1.5px solid var(--rail); border-bottom: 1.5px solid var(--rail); }
.k-cycle__dir--a { top: 32%; left: 81.2%; transform: translate(-50%, -50%) rotate(15deg); }
.k-cycle__dir--b { top: 86%; left: 50%; transform: translate(-50%, -50%) rotate(135deg); }
.k-cycle__dir--c { top: 32%; left: 18.8%; transform: translate(-50%, -50%) rotate(255deg); }
/* шаг — светлая плашка с тенью (тот же материал, что k-set__given):
   станция на кольце, а не подпись рядом с ним. Рамки нет — в центре уже
   стоит тёмный штамп, вторая рамка спорила бы с ним (глава 07). */
/* Ширина 37% — геометрический предел: плашки 2 и 3 стоят в 4 и 8 часов
   (левый край 18.8% / 81.2%), при большей ширине они вылезли бы за коробку
   кольца и за линию набора. Боковое поле ужато до --sp-2: вместе с шириной
   это и есть «увеличить плашку», чтобы длинное слово вставало целиком. */
.k-cycle__step { position: absolute; display: grid; justify-items: center; gap: 4px; width: 37%; margin: 0; padding: var(--sp-5) var(--sp-2); text-align: center; }
/* загнутый угол — тот же приём, что у лаймовой плашки блока 8
   (.fit-highlight::after): два бордера нулевого блока. Верхний треугольник —
   изнанка загиба, правый — цвет фона, он и срезает угол. Отличаются только
   цвета под бумагу: изнанка — олива 38% поверх лица листа (тот же перепад,
   что #8ea11c у лайма), срез — фон секции. */
/* --- лист с загнутым уголком: бумага, тень, уголок. Один класс на все
   места, где страница уже так делала: плашки цикла блока 6, лаймовая
   выноска блока 8, вывод блока 7. Цвет листа и уголка — переменные, чтобы
   лаймовый вариант не заводил вторую геометрию. --- */
.k-note { position: relative; background: var(--k-note-bg, var(--paper)); box-shadow: 0 3px 9px rgb(20 21 17 / 22%); }
/* плашка циферблата стоит по кругу абсолютом — примитив её не переставляет */
.k-cycle__step.k-note { position: absolute; }
.k-note::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 0; height: 0; border-top: 16px solid var(--k-note-fold, rgb(110 107 52 / 38%)); border-right: 16px solid var(--k-note-bg, var(--paper)); }
/* Внутреннее поле плашки — по шкале: сверху и снизу --sp-5, чтобы номер не
   касался кромки, а подпись не заходила в 16px зону загнутого уголка; по
   бокам --sp-3 — плашка шириной 36% кольца, более широкое поле сжало бы
   строку. Все плашки одинаковые. */
/* Циферблат — жёсткая геометрия: карточки стоят по кругу и имеют ширину
   36% от кольца. Кегль внутри поэтому с потолком в vw — иначе подписи
   вылезали из карточек, за экран и на центральный штамп. Базовый кегль
   потолок не задевает. */
/* padding-block 0.09em — строчная коробка шрифта выше интерлиньяжа
   1.2, из-за чего внутренняя высота заголовка плашки была на 2px больше
   контейнера. Поле добирает эту разницу, набор не сдвигается. */
/* Потолок в vw подобран по самому длинному слову набора — сейчас это
   «ВОСКРЕСЕНЬЯМ»: при 3.15vw оно целиком укладывается в плашку на 320,
   360 и 390. Разрыв слова переносом запрещён правилом свода, поэтому
   overflow-wrap снят. */
.k-cycle__step > b { display: block; padding-block: 0.16em; font-family: var(--display); font-size: min(var(--fs-sm), 3.15vw); font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--graphite); }
/* подпись шага — что происходит на этом шаге; стоит при своём шаге,
   а не отдельным хвостом рядом со схемой */
.k-cycle__step > em { font-style: normal; font-family: var(--display); font-size: min(var(--fs-2xs), 3.4vw); font-weight: 500; letter-spacing: 0.06em; line-height: 1.25; color: var(--rail); }

/* середина маркера прицелена в точку на кольце: 10px поля + 16px = 26px.
   Плашка перекрывает пунктир — шаг лежит НА кольце, а не за ним.
   Наклон — по одному на плашку и в разные стороны: текст и бумага лежат
   в одном слое и поворачиваются вместе (глава 11). */
.k-cycle__step--1 { top: 14%; left: 50%; transform: translate(-50%, -26px) rotate(-1.2deg); }
.k-cycle__step--2 { top: 68%; left: 81.2%; transform: translate(-50%, -26px) rotate(1.1deg); }
.k-cycle__step--3 { top: 68%; left: 18.8%; transform: translate(-50%, -26px) rotate(-0.9deg); }
.k-cycle .k-num.k-num--plain { font-size: min(calc(19px * var(--fs-scale)), 6.6vw); }
.k-cycle__stamp { position: absolute; z-index: 2; top: 50%; left: 50%; padding: 9px 13px; font-family: var(--display); font-size: min(var(--fs-sm), 4.4vw); font-weight: 500; letter-spacing: 0.07em; line-height: 1.25; text-align: center; white-space: nowrap; color: var(--paper); background: var(--ink); transform: translate(-50%, -50%); }

/* --- знак роли (глава 12) ---
   Уголковые скобки канона + линейный знак внутри. Знак говорит, что это
   за роль: ассистент — человек, коммерческий контур — кривая роста,
   дизайн-студия — карандаш, веб-команда — окно браузера, разработка —
   код, интегратор — два блока на связи.
   Все шесть нарисованы в одной сетке 24×24 и одним весом линии: 1.5px не
   масштабируется вместе с иконкой (vector-effect: non-scaling-stroke),
   поэтому линия знака совпадает по весу со скобками и на мобиле (34px),
   и на десктопе (44px). Только контур: заливок, объёма, скруглений и
   вторых цветов у знака нет — чернильная линия одна на всю страницу. */
.k-icon { display: grid; place-items: center; box-sizing: border-box; width: var(--k-icon-size, 34px); height: var(--k-icon-size, 34px); --bk-c: var(--ink); --bk-len: 9px; --bk-th: 1.5px; background: var(--deco-brackets); }
.k-icon > svg { display: block; width: 62%; height: 62%; overflow: visible; }
.k-icon > svg *, .program-modal__close > svg * { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.k-icon > svg * { stroke: var(--ink); }

/* --- бланк заказа (глава 12) ---
   Лист-заявка на столе: шапка колонок РОЛЬ / СТАТУС, линовка строк,
   графа статуса и итог под двойной чертой. Каталог ролей читается как
   бланк, который заполняют: отметил графу — роль ушла в итог.
   Нанятое помечено следом маркера по названию (тот же приём, что
   k-set__own) — lime остаётся отметкой, а не второй кнопкой страницы
   (глава 07: главное действие — единственная lime-кнопка блока 9).
   Соседство (глава 07): у листа нет рамки, он держится тенью и линовкой —
   сплошная рамка повторила бы ghost-кнопку и обводку баннера секции.
   Наклона у листа нет: бланк лежит ровно, наклон в секции занят
   комплектом источников (глава 11, один наклон на предмет).
   --k-order-status — ширина графы статуса. Она же и есть выравнивание:
   квадраты и заголовок СТАТУС стоят на левом крае этой колонки, а подписи
   НАНЯТ / НАНЯТЬ разной ширины уходят вправо и вертикаль не сбивают. */
.k-order { --k-order-status: 62px; padding: var(--sp-4) var(--sp-4) var(--sp-3); background: var(--paper); box-shadow: 0 3px 9px rgb(20 21 17 / 22%); counter-reset: k-order-role; }
.k-order__plate { display: table; margin: 0 0 var(--sp-3); padding: 7px 11px; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }
.k-order__list { margin: 0; padding: 0; list-style: none; }
.k-order__list > li { margin: 0; }
.k-order__head { display: grid; grid-template-columns: minmax(0, 1fr) var(--k-order-status); padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.14em; color: var(--rail); }
.k-order__list > li[data-icon] { counter-increment: k-order-role; border-bottom: 1px solid var(--line); }
/* строка бланка: иконка · название · графа статуса. Нативный чекбокс
   спрятан, кликабельна вся строка; кольцо клавиатурного фокуса рисуем
   на видимой обёртке (SYSTEM.md, правило 6). */
.k-order .hire { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) var(--k-order-status); gap: var(--sp-3); align-items: center; min-height: 48px; padding: 7px 0; cursor: pointer; }
.k-order .hire input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.k-order .hire:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.k-order .k-icon { --k-icon-size: 34px; --bk-len: 9px; }
.k-order strong { font-family: var(--display); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.04em; line-height: 1.15; color: var(--graphite); }
.k-order strong::before { content: counter(k-order-role, decimal-leading-zero) " / "; color: #6f6c55; }
.k-order strong > span { display: inline; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.k-order__list > li:has(input:checked) strong > span { background: linear-gradient(to top, transparent 0 0.06em, var(--lime) 0.06em 0.92em, transparent 0.92em); }
.k-order__state { display: flex; align-items: center; gap: 6px; font-style: normal; }
.k-order__state > span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ink); font-family: var(--display); font-size: calc(12px * var(--fs-scale)); font-weight: 600; line-height: 1; color: #292b25; }
.k-order__state::after { content: "НАНЯТЬ"; font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; color: var(--olive); }
.k-order__list > li:has(input:checked) .k-order__state > span::after { content: "✓"; }
.k-order__list > li:has(input:checked) .k-order__state::after { content: "НАНЯТ"; color: #292b25; }
/* итог бланка — двойная черта и точечная выноска, как в накладной */
.k-order__total { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding-top: 9px; border-top: 3px double var(--ink); font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; color: var(--rail); }
.k-order__total::after { content: ""; flex: 1 1 0; height: 1px; background: repeating-linear-gradient(to right, var(--rail-soft) 0 2px, transparent 2px 6px); }
.k-order__total > b { order: 1; font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.1em; color: var(--graphite); }

/* блок 5: комплект источников после бланка ролей */
.team-sources.team-sources { margin-top: var(--sp-6); }

/* ================================================================
   CANON — мобильная ветка ≤699px: линия набора 24px, дисплейные
   кегли и сжатие, призрак, карта декора, контекстные привязки.
   ================================================================ */
@media (max-width: 699px) {
  /* --- линия набора 24px --- */
  .section-shell.section-shell { padding-left: 24px; padding-right: 24px; }
  .cases .section-shell, .team .section-shell, .rhythm .section-shell { padding-top: var(--sp-7); }
  .digitization__inner { padding: var(--sp-7) 24px 34px; }
  .method__hero-copy { padding: 48px 24px 24px; }
  .fit { padding: 0; }
  .fit .fit__sheet.section-shell { padding: 56px 24px 44px; }
  .conditions__sheet > .conditions__intro { padding: 28px 24px 16px; }
  .conditions__top-label { padding: 0 24px; }

  /* --- ай-броу: пунктир уходит за правое поле экрана --- */
  /* пунктир уходит в правое поле экрана; сама подпись переносится, иначе
     при крупном множителе её хвост уезжал за край вместе с линейкой */
  .k-eyebrow.k-eyebrow.k-eyebrow { position: static; margin: 0 -24px var(--sp-4) 0; }
  .team .k-eyebrow.k-eyebrow.k-eyebrow { margin-bottom: 0; }

  /* --- дисплейные заголовки --- */
  h2.k-display.k-display, .k-display.k-display { display: block; width: 200%; margin: 0; font-family: var(--display); font-weight: 560; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; white-space: normal; transform: scaleX(0.5); transform-origin: left top; }
  /* Потолок в vw: дисплейная строка из одного длинного слова не переносится,
     и при росте множителя вылезала за линию набора (её резал overflow
     секции). Потолок выбран так, что базовый кегль не меняется. */
  .k-display.k-display--xl { font-size: min(calc(60px * var(--fs-scale)), 26vw); }
  .k-display.k-display--l { font-size: min(calc(60px * var(--fs-scale)), 26vw); }
  .k-display.k-display span, .k-display.k-display small { display: block; width: auto; margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; white-space: inherit; transform: none; }

  /* --- призрак (блок 5) --- */
  .k-ghost.k-ghost { position: relative; min-height: 170px; }
  .k-ghost.k-ghost > i { position: absolute; top: -46px; left: 0; font-style: normal; font-family: var(--display); font-size: min(calc(235px * var(--fs-scale)), 84vw); font-weight: 560; letter-spacing: -0.04em; line-height: 1; color: rgb(244 241 233 / 42%); transform: scaleX(0.37); transform-origin: left top; }
  .k-ghost.k-ghost > h2 { position: static; display: block; width: 200%; margin: 0 0 0 -100%; text-align: right; font-family: var(--display); font-size: min(calc(60px * var(--fs-scale)), 26vw); font-weight: 560; line-height: 0.87; letter-spacing: -0.03em; text-transform: uppercase; transform: scaleX(0.5); transform-origin: right top; }

  /* --- контекстные привязки компонентов канона к мобильной сетке --- */
  /* Цифра стоит ВНУТРИ уголковой рамки, а не рядом с ней. Рамку рисует
     .transformation::before, на мобиле это 33px, отступ 2px от левого края
     строки. Коробку цифры делаем в точности такой же — внутри цифра и так
     по центру (у примитива k-num display: grid; place-items: center).
     Раньше коробка тянулась во всю колонку и цифра уезжала вбок от рамки. */
  .transformation .transformation__number.k-num--plain { align-self: center; justify-self: start; width: 33px; margin-left: 2px; padding-left: 0; }
  /* На десктопе строка-перечисление живёт в одну строку под `overflow: hidden`.
     На мобиле обрезка снята, и `white-space: nowrap` начал выталкивать текст
     за экран — здесь строка переносится. */
  .transformation__body p { white-space: normal; }
  .fit-list .k-stamp.k-stamp { margin: 0 0 var(--sp-3); }

  /* --- карта декора: рельсы в левом поле (ось 12px), кресты на правой линии --- */
  .technical-rail--left { left: 12px; }
  .technical-rail--right { right: 4px; }
  .cases::after { right: 4px; }
  .cases::before { right: 17px; }
  .why__portrait p { left: 24px; }
  .why__body h2 { margin: -150px 0 0; }
  .why__body > .section-lead { margin-left: 0; }
  .cases .section-eyebrow, .cases .section-title, .cases .section-lead { margin-left: 0; }
  /* трек уходит в правый край экрана, но последний слайд обязан доезжать
     до линии набора: без хвостового добора он упирался в конец трека и
     вставал у правого края, а предыдущая карточка резалась пополам.
     Добор = ширина трека − ширина карточки − зазор. */
  /* Карточка занимает почти всю ширину экрана, справа намеренно торчит краешек
     следующей — сигнал «тут есть ещё». Видимая ширина трека = 100vw − 24px
     (левая линия набора), поэтому карточка = 100vw − 24 − зазор − подглядывание.
     Подглядывание фиксированное: в vw оно на 320 схлопывалось до незаметного. */
  /* Трек занимает всю ширину экрана и уходит под обе линии набора, а поле
     слева держит padding: уезжающая карточка остаётся видна в левом поле,
     а не срезается кромкой контейнера. scroll-padding возвращает снап на
     линию набора, поэтому активная карточка стоит там же, где стояла.
     Ширина трека равна ширине экрана — горизонтальной прокрутки страницы
     это не даёт. */
  .case-track { --case-gap: 10px; --case-peek: 28px; --case-card: calc(100vw - 24px - var(--case-gap) - var(--case-peek));
    width: calc(100% + 48px); margin-left: -24px; margin-right: -24px;
    padding: 0 0 12px 24px; scroll-padding-left: 24px; }
  /* хвостовой добор = ширина трека − карточка − зазор: без него последняя
     карточка не доезжает до линии набора и встаёт у правого края */
  .case-track::after { content: ""; flex: 0 0 calc(100% - var(--case-card) - var(--case-gap)); }
  .team .k-order { margin-top: var(--sp-4); }
  .team > .section-shell > .section-lead { margin-left: 0; }
  .ownership-banner { margin: var(--sp-5) -8px 0; }
  .materials-note, .program-topics { margin-right: 0; }
}

@media (min-width: 700px) {
  .m-br { display: none; }
  /* ghost-заголовок блока 5 после смены разметки (span -> i) */
  .team__heading > i { position: absolute; top: -18px; left: -4px; font-style: normal; color: rgb(244 241 233 / 42%); font-family: var(--display); font-size: min(calc(260px * var(--fs-scale)), 40vw); font-weight: 500; line-height: 1; letter-spacing: -0.06em; }
}

/* Переходы между блоками отменены — старые кромки скрыты на мобиле */
@media (max-width: 699px) {
  /* ревью отступов: высота секций — по контенту, низ везде 44px, верх 56px */
  .digitization, .cases, .method, .team, .rhythm, .why, .fit, .conditions { min-height: 0; height: auto; }
  .digitization__inner { padding-bottom: 44px; }
  .cases .section-shell { padding-bottom: 44px; }
  .method__body { padding-bottom: 44px; }
  .team .section-shell { padding-bottom: 44px; }
  .rhythm .section-shell { padding-bottom: 44px; }
  .why__body.section-shell { padding-bottom: 44px; }
  .fit .fit__sheet.section-shell { padding-top: 56px; }
  .conditions__sheet > .conditions__intro { padding-top: 40px; }

  .torn-edge { display: none; }
  .method__hero::after { content: none; }
  .method__hero-copy { padding: 48px 24px 64px; }
  .conditions__image { height: 210px; }
  .transformation { grid-template-columns: 52px minmax(0, 1fr); }
  .transformation__next { display: none; }
  /* блок 8 — оливковый лист, чтобы отличаться от бумаги блока 7 */
  .fit .fit__sheet { background-color: #d4d0c0; }
  /* блок 9: два куска бумаги на тёмном столе, фото между ними */
  .conditions__sheet { background: transparent; }
  .conditions__sheet > .conditions__intro { background-color: var(--paper); }
  .consultation { background-color: var(--paper); padding-bottom: 34px; }
  /* фото встык между двумя листами: рваные кромки уже читаются как «наклеено»,
     узкая полоса фона читалась как случайный зазор, а не как стол */
  .conditions__image { margin: 0; }

  /* UX-ревью */
  /* единый принцип «заголовок → линия → лид»: 18px / 1px / 14px */
  .digitization__intro > p, .cases .section-lead, .method__thesis,
  .rhythm__intro .section-lead,
  .why__body > .section-lead, .fit .fit__sheet > .section-lead, .conditions__payment {
    margin-top: 18px;
    border-top: 1px solid var(--ink);
    padding-top: 14px;
  }
  /* k-ghost выше своего h2 на 13px — компенсация до тех же 18px */
  .team > .section-shell > .section-lead { margin-top: 5px; }

  /* кнопки: единая система k-cta (hero + вторичные контролы) */
  .hero__cta.hero__cta { position: static; display: flex; flex-wrap: wrap; gap: 6px 10px; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; margin-top: var(--sp-4); padding: 10px 16px; border: 2px solid #141511; border-radius: 0; background: var(--lime); box-shadow: none; font-family: var(--display); font-size: min(var(--fs-lg), 6.5vw); font-weight: 500; letter-spacing: 0.04em; line-height: 1.1; color: var(--graphite); text-decoration: none; }
  .hero__action { display: block; }
  .case-controls button { min-height: 44px; padding: 0 14px; border: 2px solid #141511; border-radius: 0; background: transparent; font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.06em; color: var(--graphite); cursor: pointer; }
  .prototype-footer a { font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.1em; }

  /* hero — во всю высоту мобильного вьюпорта (минус верхний зазор 6px) */
  .hero { min-height: calc(100vh - 6px); min-height: calc(100svh - 6px); }


  .hero__proof { display: none; }                     /* дублирует лид и наезжает на кнопку */
  .hero__nav { font-size: calc(10px * var(--fs-scale)); gap: 14px; }          /* было 7px */
  .conditions__facts span { font-size: calc(12px * var(--fs-scale)); }        /* было 9px */
  /* действие рядом с выбором: кнопка идёт сразу за листом бланка.
     sp-5 — зазор, на котором рамка кнопки не слипается с краем листа
     (правило соседства, глава 07). */
  .team-cta { margin-top: var(--sp-5); }
  .team-cta .k-cta { display: flex; justify-content: center; width: 100%; }
  .method__body .k-cta { display: flex; justify-content: center; width: 100%; margin-top: var(--sp-5); }
}

/* на 320 подпись кнопки блока 5 не помещалась в поля 32px и стрелка
   срывалась на вторую строку — ужимаем поля, подпись не трогаем */
@media (max-width: 360px) {
  /* прежний размер снимка блока 8 на узких экранах */
  .fit .fit__sheet.section-shell { --fit-photo: 134px; }
  .team-cta .k-cta.k-cta { padding: 0 12px; }
  /* на 320 кольцо блока 6 сжимается вместе с экраном, и штамп в центре
     подходил вплотную к верхней плашке — набираем его на ступень мельче */
  .k-cycle__stamp { padding: 7px 10px; font-size: min(var(--fs-xs), 3.9vw); }
}

@media (min-width: 700px) {
  /* --- десктопная ступень канона: те же компоненты, крупнее набор --- */
  .k-eyebrow.k-eyebrow.k-eyebrow { font-size: var(--fs-sm); }
  .k-list.k-list.k-list > li, .k-list.k-list.k-list > p { grid-template-columns: minmax(48px, auto) minmax(0, 1fr); gap: 20px; padding: 18px 0; }
  .k-list.k-list li h3 { font-size: calc(20px * var(--fs-scale)); }
  .k-list.k-list li p { font-size: calc(15px * var(--fs-scale)); }
  .k-list.k-list.k-list > p { font-size: calc(17px * var(--fs-scale)); }
  .k-stamp.k-stamp.k-stamp { padding: 8px 13px; font-size: var(--fs-md); }
  .k-seal.k-seal.k-seal { font-size: var(--fs-md); }
  /* --- бланк заказа: тот же лист, крупнее набор. Ширина ограничена —
     на всю колонку 1200px бланк перестаёт читаться как лист бумаги, а
     графа статуса уезжает от названия роли на полэкрана --- */
  .team .k-order { margin-top: var(--sp-6); }
  .k-order { --k-order-status: 88px; max-width: 660px; padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .k-order__plate { margin-bottom: var(--sp-4); padding: 9px 14px; font-size: var(--fs-sm); }
  .k-order__head { font-size: var(--fs-xs); }
  .k-order .hire { grid-template-columns: 44px minmax(0, 1fr) var(--k-order-status); gap: var(--sp-4); min-height: 60px; padding: 10px 0; }
  .k-order .k-icon { --k-icon-size: 44px; --bk-len: 11px; }
  .k-order strong { font-size: var(--fs-lg); }
  .k-order__state { gap: 9px; }
  .k-order__state > span { width: 24px; height: 24px; font-size: calc(15px * var(--fs-scale)); }
  .k-order__state::after { font-size: var(--fs-xs); }
  .k-order__total { font-size: var(--fs-sm); }
  .k-order__total > b { font-size: calc(20px * var(--fs-scale)); }
  /* --- цикл-циферблат: тот же круг, крупнее набор. Ширина ограничена —
     на всю колонку кольцо разъезжается, а шаги уходят друг от друга --- */
  .k-cycle { max-width: 620px; margin: var(--sp-5) auto var(--sp-6); }
  /* кольцо на десктопе ограничено 620px, поэтому потолок здесь в px,
     а не в vw — иначе на 1280 он не работал бы */
  .k-cycle__step > b { font-size: min(var(--fs-md), 21px); }
  .k-cycle__step > em { font-size: min(var(--fs-xs), 15px); }
  .k-cycle .k-num.k-num--plain { font-size: min(calc(24px * var(--fs-scale)), 30px); }
  .k-cycle__stamp { font-size: min(var(--fs-md), 21px); padding: 11px 16px; }
  /* --- комплект источников: тот же приём, крупнее набор --- */
  .team-sources.team-sources { margin-top: var(--sp-6); }
  .k-set.k-set { gap: calc(var(--sp-4) + 6px); margin-top: var(--sp-5); max-width: 660px; }
  .k-set.k-set > li { font-size: calc(20px * var(--fs-scale)); }
  .k-set.k-set > .k-set__given { padding: 11px 17px; }
  .k-set.k-set > .k-set__shared > span { padding: 12px 18px; }
  /* лист шире — тот же угол расходится по краям сильнее, поэтому мягче */
  .k-set.k-set > .k-set__shared::before { transform: rotate(1.4deg) translate(6px, 5px); }

  /* --- блок 6: заголовок больше не уезжает под фотографию --- */
  .rhythm__intro { grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: 40px; }
  /* новые мобильные элементы на десктопе не показываем */
  .method__body .k-cta { display: none; }
  /* блок 5: CTA после баннера — счётчик слева, кнопка справа */
  .team-cta { display: flex; align-items: center; justify-content: flex-start; gap: 24px; margin-top: var(--sp-6); }
  /* блок 5 — вторичное действие: ghost (lime остаётся только у блока 9) */
  .team-cta .k-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; border: 2px solid #141511; font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0.04em; color: var(--graphite); background: transparent; text-decoration: none; }
}

/* ================================================================
   ДОКАЗАТЕЛЬСТВА (блок 3) — фактура вместо заглушек.
   Материалы канона: светлый лист с тенью = выписка из отчёта,
   пунктирные рельсы = перечисление, lime = маркер по тексту.
   Всё содержимое — только подтверждённые факты доказательной базы.
   ================================================================ */

/* цитата участника внутри карточки: плотная бумага и lime-засечка слева */
.case-quote {
  margin: 0 0 10px;
  padding: 9px 10px 9px 12px;
  border-left: 3px solid var(--lime);
  background: rgb(214 208 195 / 62%);
}

.case-quote p {
  margin: 0;
  font-size: calc(12px * var(--fs-scale));
  line-height: 1.3;
}

.case-quote footer {
  margin-top: 5px;
  font-family: var(--display);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: #5f5c34;
}

/* пересказ, а не дословная запись: lime-засечка (ею помечены проверенные
   цитаты) заменена пунктиром — разный материал у разного статуса текста */
.case-quote--retold {
  border-left: 0;
  padding-left: 12px;
  background:
    repeating-linear-gradient(to bottom, var(--rail) 0 5px, transparent 5px 10px) left top / 2px 100% no-repeat,
    linear-gradient(rgb(214 208 195 / 62%), rgb(214 208 195 / 62%));
}

/* ================================================================
   ПРИМЕР ВИДЕОУРОКА (блок 6) — нативный плеер с постером,
   preload=none: 32 МБ не тянутся, пока зритель не нажал play.
   ================================================================ */
.lesson-video {
  margin: var(--sp-6) 0 0;
}

.lesson-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ink);
  background: #1c1d19;
  object-fit: cover;
}

.lesson-video figcaption {
  display: grid;
  gap: 3px;
  margin-top: 9px;
}

.lesson-video figcaption strong {
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--graphite);
}

.lesson-video figcaption span {
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--rail);
}

/* ================================================================
   ПОЧЕМУ ДЕНИС (блок 7) — согласованная формулировка роли,
   числовое подтверждение требовательности, бэкграунд и выступления
   с внешними ссылками (единственные проверяемые следы).
   ================================================================ */
/* Лист с загнутым уголком — примитив кита (.k-note), тот же, что у плашек
   циферблата блока 6 и лаймовой выноски блока 8. Своей геометрии, фона и
   тени у выноски нет. */
.why-summary {
  margin: var(--sp-5) 0 0;
  padding: 13px 14px;
  font-size: var(--fs-md);
  line-height: 1.4;
}

/* тёмная плашка-вердикт: цифра требовательности живёт в блоке 6 —
   в блоке 7 она дублировалась, поэтому осталась в одном месте */
.rhythm-review {
  display: grid;
  /* было `auto` в первой колонке: при крупном кегле «12 из 22» забирал
     ширину, и вторая колонка резалась краем плиты */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  /* снизу — зазор до плашки материалов: без него тёмная плита и оливковый
     лист слипались в один объект (правило соседства) */
  margin: var(--sp-4) 0 var(--sp-5);
  padding: 11px 13px;
  color: var(--paper);
  background: var(--ink);
}

.rhythm-review b {
  font-family: var(--display);
  font-size: calc(21px * var(--fs-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--lime);
}

.rhythm-review span {
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.why-background {
  margin-top: var(--sp-6);
}

.why-background ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-background li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--rail-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.why-background li:last-child {
  border-bottom: 0;
}

/* --- десктопная ступень: те же компоненты, крупнее набор --- */
@media (min-width: 700px) {
  .case-quote p { font-size: var(--fs-md); }
  .lesson-video { max-width: 840px; }
  .lesson-video figcaption strong { font-size: calc(20px * var(--fs-scale)); }
  .lesson-video figcaption span { font-size: var(--fs-lg); }
  .why-summary { max-width: 660px; padding: var(--sp-4) var(--sp-5); font-size: calc(20px * var(--fs-scale)); }
  .rhythm-review { max-width: 660px; padding: var(--sp-4) var(--sp-5); }
  .rhythm-review b { font-size: calc(30px * var(--fs-scale)); }
  .rhythm-review span { font-size: var(--fs-lg); }
  .why-background { max-width: 660px; }
  .why-background li { padding: 14px 0; font-size: var(--fs-lg); }
}

/* --- мобильная ветка: карточки кейсов без фото — шапка стала двухстрочной --- */
@media (max-width: 699px) {
  .case-card__meta { padding-right: 42px; }
  .case-card__who { display: block; margin-top: 3px; }
}

/* ================================================================
   УСЛОВИЯ (блок 9) — факт удержания рядом с ценой.
   Материал взят у соседней таблицы фактов (та же тонкая рамка):
   строка читается как ещё одна графа условий, а не как реклама.
   Тёмной плашки и lime здесь нет — оба заняты: вердикт живёт
   в блоке 6, lime остаётся за единственной кнопкой страницы.
   ================================================================ */
.conditions__retention {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
}

.conditions__retention strong {
  font-family: var(--display);
  font-size: calc(17px * var(--fs-scale));
  font-weight: 500;
  line-height: 1.15;
  color: var(--graphite);
}

.conditions__retention span {
  font-size: calc(13px * var(--fs-scale));
  line-height: 1.3;
  color: #69684b;
}

@media (min-width: 700px) {
  .conditions__retention { max-width: 560px; padding: var(--sp-3) var(--sp-4); }
  .conditions__retention strong { font-size: calc(22px * var(--fs-scale)); }
  .conditions__retention span { font-size: var(--fs-md); }
}

/* ================================================================
   БУРГЕР-МЕНЮ МОБИЛЬНОЙ ШАПКИ (спека visual-designer, 2026-08-08).
   Панель — раскрывающийся лист в нормальном потоке (disclosure),
   не оверлей и не модальное окно: абсолют по канону вёрстки §1
   остаётся за декором. Блок стоит в конце канонного слоя — иначе
   легаси-правила .hero__nav перебивают его по порядку.
   ================================================================ */
@media (max-width: 699px) {
  .hero__header { align-items: center; gap: 0; }
  /* Логотип занимает свободное место строки, а не свою max-content ширину:
     с `flex: 0 0 auto` крупное имя не переносилось, уходило за экран и
     сбрасывало бургер на вторую строку шапки. Базис 0 — перенос строки
     решается по бургеру, а имя переносится внутри своей колонки. */
  .brand { flex: 1 1 0; min-width: 0; margin-right: auto; padding-right: 12px; }

  .hero__burger {
    position: relative;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin: 0; padding: 0; border: 0; cursor: pointer;
    --bk-c: var(--white); --bk-len: 9px; --bk-th: 1px;
    background: var(--deco-brackets);
  }
  .hero__burger:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

  .hero__burger-bars {
    position: relative; width: 18px; height: 1.5px; background: var(--white);
  }
  .hero__burger-bars::before, .hero__burger-bars::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
    background: var(--white);                 /* не inherit: в открытом состоянии родитель прозрачен */
    transition: top 160ms ease, transform 160ms ease;
  }
  .hero__burger-bars::before { top: -6px; }
  .hero__burger-bars::after  { top:  6px; }
  .hero[data-menu="open"] .hero__burger-bars { background: transparent; }
  .hero[data-menu="open"] .hero__burger-bars::before { top: 0; transform: rotate(45deg); }
  .hero[data-menu="open"] .hero__burger-bars::after  { top: 0; transform: rotate(-45deg); }

  .hero__nav {
    flex: 0 0 auto;
    width: calc(100% + 40px);
    margin: 0 -20px;                          /* в край карточки героя */
    display: grid;
    grid-template-rows: 0fr;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;                 /* снимает flex-end из легаси */
    gap: 0; padding: 0; border: 0;
    overflow: hidden;
    visibility: hidden; opacity: 0;
    transition: grid-template-rows 200ms ease, opacity 160ms linear,
                visibility 0s linear 200ms;
  }
  .hero[data-menu="open"] .hero__nav {
    grid-template-rows: 1fr; visibility: visible; opacity: 1;
    transition: grid-template-rows 200ms ease, opacity 160ms linear, visibility 0s;
  }

  /* служебный уровень: padding/border не сжимаются в 0fr-треке */
  .hero__nav-clip { min-height: 0; overflow: hidden; }

  .hero__nav-sheet {
    padding: 12px 20px 14px;
    background: var(--paper);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }

  .hero__nav-title {
    margin: 0 0 2px; display: flex; align-items: center; gap: 10px;
    font-family: var(--body); font-size: var(--fs-xs); font-weight: 400;
    letter-spacing: 0.14em; color: var(--rail);
  }
  .hero__nav-title::after {
    content: ""; flex: 1 1 0; height: 1px;
    background: repeating-linear-gradient(to right, var(--rail-soft) 0 5px, transparent 5px 10px);
  }

  .hero__nav a {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 0;
    border-bottom: 1px dashed var(--rail-soft);
    font-family: var(--display); font-size: var(--fs-lg); font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
  }
  .hero__nav a:last-child { border-bottom: 0; }
  .hero__nav a .idx {
    font-family: var(--body); font-size: var(--fs-xs); font-weight: 400;
    letter-spacing: 0.1em; color: var(--rail);
  }
}

@media (min-width: 700px) {
  .hero__burger { display: none; }
  .hero__nav { display: flex; visibility: visible; opacity: 1; }
  .hero__nav-title { display: none; }
  .hero__nav-clip, .hero__nav-sheet { display: contents; }
  .hero__nav a .idx { display: none; }
}

/* ================================================================
   БЭКГРАУНД (блок 7) — две колонки: слева регалии, справа портрет.
   Портрет вертикальный (3:4) и обрезан по лицу через object-position.
   Замена ассета — только src в разметке: пропорция, обрезка и рамка
   живут здесь и от файла не зависят.
   На узких экранах (≤359px) колонка съедает строку до нечитаемой
   ширины, поэтому портрет уходит под список — пропорция сохраняется.
   ================================================================ */
.why-background__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.why-side-photo {
  margin: 0;
}

.why-side-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 58% 24%;   /* кадр по лицу */
  border: 5px solid var(--paper);
  box-shadow: 0 4px 10px rgb(20 21 17 / 22%);
}

@media (max-width: 359px) {
  .why-background__cols { grid-template-columns: minmax(0, 1fr); }
  .why-side-photo { width: 132px; }
}

/* Снимок тянется вдоль колонки регалий — тот же приём, что у фотографии
   блока 6: вытянутый по вертикали кадр, обрезка по object-fit с фокусом на
   лице, низ примерно на конце списка. Картинка вынута из потока внутрь
   рамки, иначе её собственная пропорция задавала бы высоту строки и
   растягивала список. Колонки остаются 50/50. */
@media (min-width: 360px) {
  .why-background__cols {
    align-items: stretch;
  }

  .why-side-photo {
    position: relative;
    align-self: stretch;
    min-height: 240px;
    max-height: 620px;
    border: 5px solid var(--paper);
    box-shadow: 0 4px 10px rgb(20 21 17 / 22%);
  }

  .why-side-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    box-shadow: none;
  }
}

@media (min-width: 700px) {
  .why-background__cols { gap: var(--sp-6); }
}

/* ================================================================
   БЛАНК НАЙМА (блок 5) — строка роли выросла с одного названия до
   «название → что делает → чей кейс». Обе добавленные строки живут
   внутри той же средней ячейки грида: колонки бланка не меняются.
   ================================================================ */
.k-order__use {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--graphite);
}

.k-order__case {
  display: block;
  margin-top: 3px;
  font-family: var(--body);
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--rail);
}

/* строка владельца под бланком: мелкая приписка, не пункт каталога */
.team-extra {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--rail);
}

@media (min-width: 700px) {
  .k-order__use { font-size: var(--fs-md); }
  .k-order__case { font-size: var(--fs-sm); }
  .team-extra { max-width: 660px; font-size: var(--fs-md); }
}

/* ================================================================
   06 — попап «Программа»
   Полноэкранный лист на мобиле, центрированный лист на десктопе.
   Липкие шапка и подвал — плоская бумага без сетки: иначе клетка
   «едет» относительно текстуры скроллящегося тела.
   Lime в попапе ровно один — кнопка CTA; номера этапов поэтому
   k-num--plain (олива), а не k-num (лайм в рамке).
   ================================================================ */

/* тройной класс — как у остальных k-*: перебить базовый .k-cta.k-cta.k-cta
   (у него justify-content: center и padding 0 32px, из-за них надпись
   триггера переносилась в две строки на 320px) */
.program-open.program-open.program-open { display: flex; flex-wrap: wrap; gap: 6px 10px; width: 100%; justify-content: space-between; align-items: center; margin: 14px 0 0; padding: 10px 16px; text-align: left; }
/* подпись переносится сама: с nowrap строка выдавливала стрелку за экран
   уже на ×1.4 (320px). Перенос — вместо обрезки. */
.program-open.program-open.program-open > span { min-width: 0; }

dialog.program-modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--graphite); }
dialog.program-modal::backdrop { background: rgb(24 25 21 / 64%); }

/* ПРЕДВАРИТЕЛЬНАЯ ВЁРСТКА ПАНЕЛИ.
   Закрытый диалог по умолчанию лежит в display: none, и всё его нутро —
   восемь этапов, заголовки, условия, кнопка — браузер впервые верстает
   ровно в тот кадр, когда должен везти панель. Отсюда и асимметрия,
   которую видит владелец: при закрытии верстать уже нечего, поэтому уход
   гладкий, а приход дёргается.
   Признак ставит скрипт после загрузки страницы (не до неё — иначе работа
   попала бы в первую отрисовку и подняла LCP). С ним закрытая панель
   остаётся в раскладке: свёрстана, но не видна, не ловит мышь и не
   попадает ни в обход табом, ни в дерево доступности — visibility: hidden
   вынимает поддерево целиком. Своих картинок панель не тянет: текстура
   фона уже загружена шапкой.
   Геометрия та же, что у открытого модального диалога (position: fixed,
   inset: 0), — чтобы браузеру при открытии нечего было пересчитывать.
   Специфичность на класс выше правила display: none из блока ≥700px,
   поэтому порядок в файле роли не играет. */
dialog.program-modal[data-prelaid]:not([open]) {
  display: block;
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.program-modal__sheet { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; background-color: var(--paper); }
.program-modal__sheet:focus { outline: none; }

.program-modal__bar { flex: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 4px 24px; background: var(--paper); border-bottom: 1px solid var(--rail-soft); }
.program-modal__count { min-width: 0; margin-right: auto; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; color: var(--rail); }
/* кнопка закрытия не ужимается: при крупном шрифте счётчик слева сжимал её
   с 48 до 32px и уводил правую половину за экран */
/* Крест — SVG в весе штриха кита (.k-icon): текстовый × вставал не по
   оптическому центру и менял рисунок вместе с кеглем. Размер кнопки —
   константа 48px, крест внутри — доля от неё, поэтому масштаб текста
   его не деформирует. */
.program-modal__close { display: grid; flex: none; place-items: center; width: 48px; height: 48px; margin-right: 0; padding: 0; border: 2px solid #141511; border-radius: 0; background: transparent; color: var(--graphite); cursor: pointer; }
.program-modal__close > svg { display: block; width: 44%; height: 44%; overflow: visible; }
.program-modal[data-scrolled] .program-modal__bar { box-shadow: 0 6px 12px rgb(20 21 17 / 12%); }

/* overflow-wrap: anywhere — на 320 при крупном множителе длинное слово
   давало горизонтальную прокрутку внутри листа попапа */
.program-modal__scroll { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--sp-5) 24px var(--sp-6);
  background-image: linear-gradient(rgb(77 75 57 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(77 75 57 / 8%) 1px, transparent 1px), url("./assets/paper-grid-texture.webp");
  background-position: 0 0, 0 0, center top; background-size: 46px 46px, 46px 46px, 620px 620px; background-blend-mode: multiply, multiply, normal; }

.program-modal__title { margin: 0; font-family: var(--display); font-size: calc(26px * var(--fs-scale)); font-weight: 600; letter-spacing: 0.01em; line-height: 1.06; text-transform: uppercase; }
.program-modal__lead { margin: var(--sp-3) 0 0; font-size: var(--fs-md); line-height: 1.45; }

.program-modal__mark { display: flex; align-items: center; gap: 10px; margin: var(--sp-5) 0 0; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rail); }
.program-modal__mark::after { content: ""; flex: 1 1 0; height: 1px; background: repeating-linear-gradient(to right, var(--rail-soft) 0 5px, transparent 5px 10px); }

.program-steps.program-steps.program-steps { margin: var(--sp-2) 0 0; }
.program-steps.program-steps.program-steps > li { align-items: start; padding: 14px 0 15px; }
.program-steps.program-steps .k-num { margin-top: -2px; }
.program-steps.program-steps li h3 { margin: 0 0 5px; font-size: var(--fs-md); font-weight: 600; }
.program-steps.program-steps li p { color: var(--rail); line-height: 1.4; }
.program-steps.program-steps li .yield { margin-top: 5px; color: var(--graphite); }
.program-steps.program-steps li .yield::before { content: "→ "; font-family: var(--display); font-weight: 600; color: var(--olive); }

.program-verdict { margin: var(--sp-6) 0 0; padding: 15px 16px 16px; color: var(--paper); background: var(--graphite); }
.program-verdict strong { display: block; font-family: var(--display); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; }
.program-verdict span { display: block; margin-top: 7px; font-size: var(--fs-sm); line-height: 1.4; color: rgb(232 226 213 / 82%); }

.program-terms { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.program-terms li { position: relative; padding-left: 21px; font-size: var(--fs-sm); line-height: 1.4; color: var(--rail); }
.program-terms li::before { content: ""; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; background: var(--deco-cross); }
.program-terms li[hidden] { display: none; }   /* иначе grid-родитель перебивает hidden */

/* тот же список с крестиком внутри карточки кейса: примитив не меняется,
   контекст задаёт только шаг и наследование набора графы */
.case-facts dd .program-terms { gap: var(--sp-2); margin: 0; }
.case-facts dd .program-terms li { font-size: inherit; line-height: inherit; color: inherit; }

.program-modal__foot { flex: none; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rail-soft); }
.program-modal__foot .k-cta.k-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; justify-content: space-between; padding: 10px 16px; text-align: left; }
.program-modal__foot .k-cta.k-cta > span { min-width: 0; }

.program-modal :focus-visible { outline: 3px solid #141511; outline-offset: 3px; }

/* Лист выезжает от правого края и уходит обратно вправо — движение панели,
   а не всплытие на месте. Кривая мягкая (никакого «щелчка»), закрытие чуть
   быстрее открытия: уход не должен задерживать. Горизонтальной прокрутки
   не даёт: сдвиг живёт внутри dialog с overflow: hidden, а сам dialog
   лежит в top layer и на поток страницы не влияет. */
@media (prefers-reduced-motion: no-preference) {
  /* честный проезд: движется только панель (никакого подмешанного
     проявления — с ним движение читалось как всплытие на месте).
     Гаснет и загорается отдельно только подложка. */
  /* Ход панели. Прежняя кривая cubic-bezier(0.22, 0.61, 0.36, 1) была
     разогнана на старте (наклон 2.77) и заканчивалась нулевым наклоном:
     по замеру на неё уходило 9 / 11 / 16 / 64 % времени на четверти пути,
     а последние 12 % пути (те самые «сорок точек справа») ползли почти
     половину времени. Новая кривая идёт слитно: 27 / 21 / 22 / 30 % по
     четвертям, на последние 12 % пути — 16 % времени. Наклон на входе 0.6
     (мягкий старт без рывка), на выходе 0.5 (приезд, а не подползание).
     Длительность 260 мс: прежние 320 мс лишь на бумаге были ходом —
     90 % пути укладывалось в ~180 мс, остальное дотягивал хвост. 260 мс
     слитного движения держат ту же скорость и остаются в полосе, где
     жест читается выездом, а не миганием.
     Уход зеркальный, чуть короче — правило файла «закрытие не должно
     задерживать».
     11.08.2026: ключевых кадров, заливки (backwards/forwards) и перехода
     здесь больше нет — проезд листа ведёт GSAP из script.js, см. ниже.
     Длительности и направление те же.
     РЕШЕНИЕ ВЛАДЕЛЬЦА 10.08.2026: обе кривые заменены на linear.
     Длительности, направление и геометрия те же; затемнение фона уже
     было линейным. При linear все четыре четверти пути занимают поровну
     времени — это и есть проверка. */
  /* Лист поднимается в отдельный слой на время проезда: у него тень
     размытием 48px и текстурный фон, и без промотирования браузер
     перерисовывает их каждый кадр — на быстром мониторе это съедает
     бюджет кадра и движение начинает пропускать кадры. С will-change
     слой рисуется один раз, а едет уже композитор. */
  dialog.program-modal[open] .program-modal__sheet,
  dialog.program-modal[data-closing] .program-modal__sheet { will-change: transform; }

  /* РЕШЕНИЕ ВЛАДЕЛЬЦА 11.08.2026: движение панели снято с браузера и
     передано GSAP (assets/gsap.min.js). Своей анимации у листа здесь
     больше нет — ни ключевых кадров, ни перехода: два движка на одном
     свойстве спорили бы за transform. В CSS остаётся только ПОКОЙ листа —
     за правым краем экрана; путь оттуда и обратно ведёт script.js.
     Длительности, направление и линейная кривая прежние: 260 мс приход,
     200 мс уход. */
  .program-modal__sheet { transform: translateX(100%); }

  /* Затемнение осталось на CSS: ::backdrop — псевдоэлемент, скриптом за
     него не взяться, а его прозрачность и раньше шла ровно (она не
     двигает раскладку и не требует растра панели). Обе величины —
     те же 260 / 200 мс linear, старт общий с проездом: признак
     data-shown скрипт ставит в тот же момент, когда пускает GSAP. */
  dialog.program-modal::backdrop { opacity: 0; transition: opacity 200ms linear; }
  dialog.program-modal[data-shown]::backdrop { opacity: 1; transition-duration: 260ms; }
}

/* без анимации — простое появление, лист сразу на месте.
   Отдельных правил не нужно: и сдвиг, и переход живут только внутри
   блока no-preference, поэтому здесь панель просто стоит на своём месте,
   а подложка сразу непрозрачная. */

@media (min-width: 700px) {
  .program-open.program-open.program-open { display: inline-flex; width: auto; min-width: 340px; gap: 28px; margin-top: var(--sp-5); padding: 0 28px; }
  /* Выдвижная правая шторка: лист прижат к правому краю вьюпорта и живёт
     во всю высоту. Центрированная карточка читалась как приход слева —
     панель уезжала к середине, хотя стартовала из-за правого края. */
  dialog.program-modal { display: block; width: 100%; height: 100%; padding: 0; }
  dialog.program-modal:not([open]) { display: none; }
  .program-modal__sheet { width: min(760px, 100%); margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; border: 0; border-left: 2px solid #141511; box-shadow: -20px 0 48px rgb(20 21 17 / 34%); }
  .program-modal__bar { min-height: 68px; padding: 6px 32px; }
  .program-modal__scroll { padding: var(--sp-6) 32px 40px; }
  .program-modal__title { max-width: 24ch; font-size: calc(34px * var(--fs-scale)); }
  .program-modal__lead { max-width: 60ch; font-size: calc(17px * var(--fs-scale)); }
  .program-steps.program-steps.program-steps > li { padding: 18px 0 19px; }
  .program-steps.program-steps li h3 { font-size: calc(19px * var(--fs-scale)); }
  .program-steps.program-steps li p { max-width: 62ch; font-size: calc(15px * var(--fs-scale)); }
  .program-verdict { padding: 20px 24px; }
  .program-verdict strong { font-size: calc(19px * var(--fs-scale)); }
  .program-verdict span { font-size: calc(14px * var(--fs-scale)); }
  .program-terms li { max-width: 68ch; font-size: calc(14px * var(--fs-scale)); }
  .program-modal__foot { display: flex; justify-content: flex-start; padding: 16px 32px; }
  .program-modal__foot .k-cta.k-cta { width: auto; min-width: 420px; gap: 32px; }
}

/* ================================================================
   09 — форма заявки
   Материал — бланк k-order (глава 12): лист var(--paper) на такой же
   бумаге, без рамки, держится тенью и линовкой. Поле — графа с линией,
   а не коробка: рамка вокруг инпута дала бы «коробки в коробках».
   Ошибка маркируется штампом ink, а не цветом: красного в палитре нет.
   Lime в блоке ровно один — кнопка отправки.
   ================================================================ */

.lead-form { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-4) var(--sp-3); text-align: left; background: var(--paper); box-shadow: 0 3px 9px rgb(20 21 17 / 22%); }
.lead-form[hidden] { display: none; }
.lead-form__plate { display: table; margin: 0 0 var(--sp-4); padding: 7px 11px; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }

.lead-form__group + .lead-form__group { margin-top: var(--sp-5); }
.lead-form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--sp-3); margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.14em; color: var(--rail); }
.lead-form__head > span { flex: 0 1 auto; letter-spacing: 0.06em; color: var(--olive); }

.lead-field { position: relative; padding: 10px 0 0; border-bottom: 1px solid var(--line); }
/* бейджи переносятся на новую строку, а не вылезают за правый край и не
   ложатся на верхнюю рамку поля (было на ×2 / 320 и 390) */
.lead-field > label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 16px; font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.14em; color: var(--rail); }
.lead-field__opt, .lead-field__mark { flex: none; max-width: 100%; }
.lead-field__opt { padding: 2px 5px; border: 1px solid var(--rail-soft); font-family: var(--display); font-size: var(--fs-2xs); font-style: normal; font-weight: 500; letter-spacing: 0.06em; color: var(--rail); background: #ddd9cd; }
.lead-field__mark { padding: 3px 6px; font-family: var(--display); font-size: var(--fs-2xs); font-style: normal; font-weight: 500; letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }
.lead-field__mark[hidden] { display: none; }

.lead-field__row { display: flex; align-items: center; gap: 3px; }
.lead-field__at { flex: none; font-family: var(--body); font-size: calc(16px * var(--fs-scale)); line-height: 1.2; color: var(--rail); }
/* 16px — жёстко: при меньшем кегле iOS Safari зумит страницу на фокусе */
.lead-field input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 3px 0 6px; border: 0; border-radius: 0; background: transparent; font-family: var(--body); font-size: calc(16px * var(--fs-scale)); line-height: 1.2; color: var(--graphite); appearance: none; }
.lead-field input::placeholder { color: rgb(76 73 57 / 62%); }
.lead-field:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.lead-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.lead-field[data-invalid] { border-bottom: 2px solid var(--ink); }
/* 8px сверху — под кольцо фокуса (2px обводки + 4px offset): без зазора
   кольцо ошибочного поля перечёркивало строку объяснения на всех ширинах */
.lead-field__err { margin: 8px 0 9px; font-size: var(--fs-sm); line-height: 1.35; color: var(--graphite); }
.lead-field__err[hidden] { display: none; }

.lead-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-form__alert { margin: var(--sp-4) 0 0; padding: 10px 12px; border-left: 3px solid var(--ink); font-size: var(--fs-sm); line-height: 1.35; color: var(--graphite); background: var(--paper-deep); }
.lead-form__alert[hidden] { display: none; }

/* двойная черта итога — как у k-order__total */
.lead-form__seal { margin: var(--sp-4) 0 0; padding-top: 12px; border-top: 3px double var(--ink); }
.lead-form__submit { display: flex; flex-wrap: wrap; width: 100%; align-items: center; justify-content: space-between; gap: 6px var(--sp-2); min-height: 56px; padding: 10px 16px; border: 2px solid #141511; border-radius: 0; font-family: var(--display); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.02em; line-height: 1.12; text-align: left; color: #23251f; background: var(--lime); cursor: pointer; }
.lead-form__submit > span { min-width: 0; }
.lead-form__submit:focus-visible { outline: 3px solid #141511; outline-offset: 3px; }
.lead-form[data-state="sending"] .lead-form__submit { cursor: progress; }
.lead-form__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); line-height: 1.4; text-align: center; color: var(--rail); }

/* --- квитанция --- */
.lead-done { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-4) var(--sp-5); text-align: left; background: var(--paper); box-shadow: 0 3px 9px rgb(20 21 17 / 22%); }
.lead-done[hidden] { display: none; }
.lead-done:focus { outline: none; }
.lead-done__plate { display: table; margin: 0 0 var(--sp-4); padding: 7px 11px; font-family: var(--display); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--paper); background: var(--ink); }
.lead-done h4 { margin: 0; font-family: var(--display); font-size: calc(24px * var(--fs-scale)); font-weight: 600; letter-spacing: 0.01em; line-height: 1.06; text-transform: uppercase; color: var(--graphite); }
.lead-done__echo { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding-top: 10px; border-top: 3px double var(--ink); font-family: var(--display); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.14em; color: var(--rail); }
.lead-done__echo::after { content: ""; flex: 1 1 0; height: 1px; background: repeating-linear-gradient(to right, var(--rail-soft) 0 2px, transparent 2px 6px); }
.lead-done__echo > b { order: 1; font-family: var(--body); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; color: var(--graphite); }
/* класс, а не `.lead-done p`: селектор по тегу перебил бы цвет плашки */
.lead-done__text { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--rail); }
.lead-done__again { display: inline-flex; align-items: center; min-height: 44px; margin: var(--sp-3) 0 0; padding: 0; border: 0; background: transparent; font-family: var(--display); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.06em; color: var(--graphite); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; cursor: pointer; }
.lead-done__again:focus-visible { outline: 3px solid #141511; outline-offset: 3px; }

@media (min-width: 700px) {
  .lead-form { max-width: 620px; margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .lead-form__plate { padding: 9px 14px; font-size: var(--fs-sm); }
  .lead-form__head { padding-bottom: 8px; font-size: var(--fs-xs); }
  .lead-field > label { font-size: var(--fs-xs); }
  .lead-field input { min-height: 48px; font-size: calc(17px * var(--fs-scale)); }
  /* кнопка вровень с полями формы: на десктопе она была по содержимому
     и обрывалась раньше правого края полей. Стрелка остаётся прижатой
     к правому краю — её держит justify-content: space-between. */
  .lead-form__submit { width: 100%; min-width: 380px; font-size: var(--fs-lg); }
  .lead-form__note { text-align: left; font-size: var(--fs-sm); }
  .lead-done { max-width: 620px; padding: var(--sp-5); }
  .lead-done h4 { font-size: calc(32px * var(--fs-scale)); }
}

/* ================================================================
   Изъятия из общего множителя типографики.
   Эти два заголовка не «мелкий текст», а подогнанные под ширину экрана
   строки: ширина в % ровно компенсирует scaleX, а nowrap-строка подобрана
   так, чтобы лечь в эту компенсированную коробку. Пропорциональный рост
   кегля ломает подгонку — строка вылезает за линию набора (замерено:
   «ГОТОВЫЙ РЕЗУЛЬТАТ» +9px на 320, «БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ» +50px на 900).
   Множитель наследуется, поэтому достаточно вернуть его к 1 на самом узле —
   правило одно, точечных правок кеглей нет.
   ================================================================ */
.transformation h3,
.consultation h3 { --fs-scale: 1; }


/* ================================================================
   СТРЕЛКА КНОПКИ — один знак, один вес, одно выравнивание.
   Раньше у каждой кнопки была своя: у героя и у формы — глиф в чёрном
   кружке (приёма с кружком больше нигде на странице нет), у «всей
   программы» — дисплейный «→» (в этой гарнитуре он тоньше и растянутее),
   у ghost-кнопок — знак прямо в тексте. Теперь у всех один <b>:
   основная гарнитура, кегль в em от надписи (растёт вместе с ней, а не
   отдельно), выравнивание по оптической середине строки, поле справа
   такое же, как слева.
   ================================================================ */
.k-cta > b,
.program-open > b,
.lead-form__submit > b,
.hero__cta > .hero__cta-icon {
  flex: none;
  align-self: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--body);
  font-size: 1.25em;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  transform: none;
}

/* ================================================================
   ДЕСКТОПНАЯ СЕТКА ≥1080 — спека desktop-layout-spec.md.
   Ступень стоит ПОСЛЕДНЕЙ в файле: после всех ступеней ≥700 и после
   канона k-* (§5.2) — иначе они перебивают её по порядку.
   Ни одна базовая строка не удалена, только переопределение (§5.1).
   !important не используется (§7.9). Мобильная ≤699 и планшет
   700–1079 этой ступенью не затронуты.
   ================================================================ */

/* ---------- ЗАХОД 1 · СЕТКА: контейнер, поле, 12 колонок ---------- */

@media (min-width: 1080px) {
  :root {
    /* поле листа: на 1280 ровно 112px, на 1440 упирается в потолок 112
       и прирост экрана уходит в поля экрана (§2.2) */
    --pad: clamp(56px, 8.75vw, 112px);
    /* колонка двенадцатиколонника: (1056 − 11 × 24) / 12 = 66px
       и на 1280, и на 1440 — набор при росте экрана не сужается (§2.3) */
    --col: calc((min(100vw, 1280px) - 2 * var(--pad) - 264px) / 12);
    /* опорные ширины: n колонок + (n−1) жёлобов по 24px */
    --t2: calc(2 * var(--col) + 24px);
    --t3: calc(3 * var(--col) + 48px);
    --t4: calc(4 * var(--col) + 72px);
    --t5: calc(5 * var(--col) + 96px);
    --t6: calc(6 * var(--col) + 120px);
    --t7: calc(7 * var(--col) + 144px);
  }

  /* 1.1 · контейнер набора и поле листа — одно значение на всю страницу */
  .section-shell {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding: 120px var(--pad) 90px;
  }

  .digitization__inner {
    padding: 120px var(--pad) 90px;
  }

  .method__hero-copy {
    /* верхнее поле шапки блока 4 прежнее: копия лежит на снимке */
    padding: 150px var(--pad) 90px;
  }

  /* 1.2 · снятие исключений §2.4 — все на одну левую линию.
     Специфичность равна исходной: у этих правил свои селекторы. */
  .team .section-shell,
  .rhythm .section-shell,
  .conditions__sheet > .conditions__intro {
    padding: 120px var(--pad) 90px;
  }

  /* блок 8: обнуляются только боковые поля — лист становится контейнером
     набора по ширине. Вертикальные полосы стола остаются: без них лист
     занимает секцию целиком и перестаёт читаться листом (§3.8, ред. 2). */
  .fit {
    padding: 86px 0 90px;
  }

  /* подвал — на ту же линию набора */
  .prototype-footer {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding: 36px var(--pad);
  }

  /* блок 1: карточка героя не меняется (margin 14px + рамка 1px),
     поэтому её внутренний контейнер уже набора на 30px, а поле —
     на те же 15px меньше: снаружи выходит ровно линия набора
     (112px на 1280, 192px на 1440), ширина набора те же 1056px. */
  .hero__header,
  .hero__content {
    width: min(100%, 1250px);
    margin-inline: auto;
    padding-inline: calc(var(--pad) - 15px);
  }

  .hero__content {
    left: 0;
    right: 0;
  }

  /* 1.3 · двенадцать колонок. Раскладка пока одноколоночная:
     каждый объект по умолчанию занимает весь набор. */
  .digitization__inner,
  .cases .section-shell,
  .method__hero-copy,
  .method__body,
  .team .section-shell,
  .rhythm .section-shell,
  .why__body,
  .conditions__sheet > .conditions__intro,
  .consultation,
  .hero__content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-content: start;
  }

  .digitization__inner > *,
  .cases .section-shell > *,
  .method__hero-copy > *,
  .method__body > *,
  .team .section-shell > *,
  .rhythm .section-shell > *,
  .why__body > *,
  .conditions__sheet > .conditions__intro > *,
  .consultation > * {
    grid-column: 1 / -1;
  }

  /* реперные кресты блока 2 — декор на абсолюте. У абсолютного потомка
     грид-контейнера placement-свойства меняют containing block с padding-box
     на область треков: с grid-column: 1 / -1 кресты уезжали внутрь набора
     на ширину поля. auto возвращает им padding-box, то есть прежнее место. */
  .digitization__inner > .registration {
    grid-column: auto;
  }

  /* Объекты, которые в блочном потоке были по содержимому, а грид-ячейка
     их растягивает или, наоборот, схлопывает. Правило блочного потока
     «margin-inline: auto + width: auto = во всю ширину» в гриде не
     работает: авто-поля делают элемент по содержимому. Ниже — возврат
     прежней геометрии, без новых величин: те же 520 и то же место
     штампа. Циферблат блока 6 получает свой трек в заходе 4. */
  .rhythm .section-shell > .program-open,
  .method__body > .k-cta {
    justify-self: start;
  }

  .cases .section-shell > .case-controls {
    width: min(100%, 520px);
  }

  /* штамп блока 7 сейчас стоит у ЛЕВОЙ линии набора (display: table
     с margin-left: auto его вправо не уводит). Блок 7 — заход 5,
     здесь только сохраняем нынешнее место. */
  .why__body > .why-stamp {
    justify-self: start;
  }

  /* блок 1: контент героя — колонки 1–7 (§3.1) */
  .hero__content > * {
    grid-column: 1 / 8;
  }
}

/* ---------- ЗАХОД 2 · ВЫСОТЫ: ложные донья и жёсткие высоты ---------- */

@media (min-width: 1080px) {
  /* 2.1 · ложные донья секций (§4.1) — только переопределение */
  .digitization,
  .digitization__inner,
  .cases,
  .method__body,
  .team,
  .team__heading,
  .rhythm,
  .fit,
  .fit__sheet,
  .conditions {
    min-height: 0;
  }

  /* 2.2 · жёсткие высоты объектов (§4.2) */
  /* фото блока 6: высота от ширины трека. Пропорция — та, что стоит
     на эталонном 1280 сейчас (700 × 660), кадр не меняется. */
  .rhythm__intro img {
    height: auto;
    aspect-ratio: 700 / 660;
  }

  /* фото блока 9: та же пропорция, что сейчас на 1280 (1280 × 380) */
  .conditions__image {
    height: auto;
    aspect-ratio: 64 / 19;
  }

  /* строки таблицы преобразований: высота по контенту, поле по шкале */
  .transformation,
  .transformation--long {
    min-height: 0;
    padding-block: 24px;
  }

  .transformation__body {
    padding-block: 0;
  }

  .conditions__facts p {
    min-height: 0;
    padding: var(--sp-5);
  }

  .fit-list > p {
    min-height: 0;
  }

  /* обрезка листа блока 8 была нужна абсолютному снимку; на десктопе
     снимок в потоке, а с двухколоночным низом обрезка режет «не подойдёт» */
  .fit__sheet {
    overflow: visible;
  }

  /* компенсация одноколоночной раскладки в блоке 4 (§4.2, строка 2707) */
  .method-steps {
    margin-inline: 0;
  }
}

/* ---------- ЗАХОД 3 · БЛОКИ 2, 3, 4 ---------- */

@media (min-width: 1080px) {
  /* --- блок 2 «Оцифровка» --- */
  .digitization__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 24px;
    align-items: end;
  }

  .digitization__intro > h2 {
    grid-column: 1 / 8;
  }

  .digitization__intro > p {
    grid-column: 9 / 13;
    align-self: end;
  }

  /* строка: номер 2 колонки · тело · стрелка */
  .transformation {
    grid-template-columns: var(--t2) minmax(0, 1fr) 90px;
  }

  /* тело строки: заголовок · перечисление 3 колонки */
  .transformation__body {
    grid-template-columns: minmax(0, 1fr) var(--t3);
  }

  /* в наборе 1056px прежние 22px читались как подпись, а не как строка
     таблицы. Множитель на узле отключён (строка 4522) — не трогаем. */
  .transformation h3 {
    font-size: clamp(calc(18px * var(--fs-scale)), 5.1vw, calc(28px * var(--fs-scale)));
  }

  /* --- блок 3 «Кейсы» --- */
  .cases .section-shell > .section-eyebrow {
    grid-row: 1;
  }

  .cases .section-shell > .section-title {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .cases .section-shell > .section-lead {
    grid-column: 8 / 13;
    grid-row: 2;
    align-self: end;
    max-width: none;
    margin-bottom: 0;
  }

  .cases .section-shell > .case-track {
    grid-row: 3;
  }

  .cases .section-shell > .case-controls {
    grid-row: 4;
  }

  /* Вынос трека пересчитан под новое поле: расстояние от кромки экрана
     до линии набора = половина поля, на которое лист шире 1280 не растёт,
     плюс поле листа. Обе величины — те же, что у контейнера набора,
     поэтому активная карточка встаёт ровно на линию заголовка. */
  .case-track {
    --case-bleed: calc((100vw - min(100vw, 1280px)) / 2 + var(--pad));
  }

  /* карточка = 6 колонок: две ложатся в набор ровно (516 × 2 + 24 = 1056),
     третья подглядывает в правом поле */
  .case-card {
    flex-basis: var(--t6);
  }

  /* --- блок 4 «Метод» --- */
  .method__hero-copy > * {
    grid-column: 1 / 8;
  }

  .method__body > .method__thesis {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  .method__body > .method__note {
    grid-column: 1 / 5;
    grid-row: 2;
  }

  /* Ряд-добор: список шагов выше пары «тезис + приписка», и если он
     охватывает только их две строки, излишек высоты раздаётся этим
     строкам и приписка отъезжает от тезиса. Третья строка 1fr забирает
     остаток на себя — левая группа остаётся собранной. */
  .method__body {
    grid-template-rows: auto auto 1fr;
  }

  .method__body > .method-steps {
    grid-column: 6 / 13;
    grid-row: 1 / span 3;
  }

  /* обе группы стоят на одной верхней линии */
  .method-steps.k-list.k-list.k-list {
    margin-top: 0;
  }
}

/* ---------- ВОЗВРАТЫ КРУГА 1 (редакция 2 спеки) ---------- */

@media (min-width: 1080px) {
  /* Возврат 1 · блок 7: подпись на портрете стояла на старом поле
     clamp(90px, 8vw, 132px) и на 1440 отставала от страницы на 77px.
     Портрет — полосой во всю ширину экрана, поэтому расстояние до линии
     набора считается так же, как у выноса слайдера кейсов. */
  .why__portrait p {
    left: calc((100vw - min(100vw, 1280px)) / 2 + var(--pad));
  }

  /* Возврат-спутник · блок 1: строка действия получает 9 колонок.
     Кнопка (min-width 392) и её пруф — один жест; в 7 треках пара не
     помещается и пруф срывался на вторую строку (§3.1, ред. 2). */
  .hero__content > .hero__action {
    grid-column: 1 / 10;
  }

  /* Возврат 2 · блок 4: канон файла — ширина коробки = 1 / scaleX.
     При width: 130% и scaleX(0.48) запас исчез вместе с сужением колонки
     до 7 треков, и заголовок потерял авторский перенос. Ширина на глифы
     не влияет — двигается только точка переноса (§3.4, ред. 2). */
  .method__hero h2 {
    width: 208.3%;
  }
}

/* ---------- ЗАХОД 4 · БЛОКИ 5 И 6 ---------- */

@media (min-width: 1080px) {
  /* --- блок 5 «Команда»: бланк и комплект источников рядом --- */
  .team .section-shell > .section-eyebrow {
    grid-row: 1;
  }

  .team .section-shell > .team__heading {
    grid-row: 2;
  }

  .team .section-shell > .section-lead {
    grid-column: 1 / 6;
    grid-row: 3;
  }

  /* ширину бланка задаёт трек, а не собственный потолок 660 */
  .team .section-shell > .k-order {
    grid-column: 1 / 8;
    grid-row: 4;
    max-width: none;
  }

  .team .section-shell > .team-extra {
    grid-column: 1 / 8;
    grid-row: 5;
    max-width: none;
  }

  .team .section-shell > .team-cta {
    grid-column: 1 / 8;
    grid-row: 6;
  }

  /* комплект объясняет бланк — стоит рядом с ним, с той же верхней линии
     (у обоих одинаковое верхнее поле --sp-6) */
  .team .section-shell > .team-sources {
    grid-column: 9 / 13;
    grid-row: 4 / span 3;
    align-self: start;
  }

  .team .section-shell > .ownership-banner {
    grid-column: 1 / -1;
    grid-row: 7;
  }

  /* --- блок 6 «Ритм» --- */
  /* Ряды оболочки: 5 и 7 — доборы. Они забирают излишек высоты у объектов,
     которые охватывают несколько рядов (циферблат и плеер), иначе излишек
     раздаётся содержательным рядам и правая колонка расползается. */
  .rhythm .section-shell {
    grid-template-rows: auto auto auto auto 1fr auto 1fr auto auto auto;
  }

  .rhythm .section-shell > .section-eyebrow {
    grid-row: 1;
  }

  .rhythm .section-shell > .rhythm__intro {
    grid-row: 2;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 24px;
  }

  .rhythm__intro > div {
    grid-column: 1 / 6;
  }

  /* фото возвращается на правую линию набора */
  .rhythm__intro > img {
    grid-column: 6 / 13;
  }

  /* цикл — 6 колонок по левой линии; авто-поле снято */
  .rhythm .section-shell > .k-cycle {
    grid-column: 1 / 7;
    grid-row: 3 / span 3;
    max-width: none;
    margin: var(--sp-5) 0 var(--sp-6);
  }

  .rhythm .section-shell > .rhythm-review {
    grid-column: 8 / 13;
    grid-row: 3;
    margin: var(--sp-5) 0 0;
  }

  .rhythm .section-shell > .materials-note {
    grid-column: 8 / 13;
    grid-row: 4;
    margin: var(--sp-6) 0 0;
  }

  /* Плеер, подпись, кнопка и темы — один объект из четырёх частей, но
     подпись лежит внутри <figure>, а кнопка и темы — снаружи. display:
     contents отдаёт части фигуры в сетку оболочки напрямую: разметка не
     меняется, а все четыре встают в свои треки. */
  .rhythm .section-shell > .lesson-video {
    display: contents;
  }

  .lesson-video > .section-eyebrow {
    grid-column: 1 / -1;
    grid-row: 6;
    margin-top: var(--sp-6);
  }

  .lesson-video > .lesson-video__player {
    grid-column: 1 / 9;
    grid-row: 7 / span 4;
    max-width: none;
  }

  /* правый столбик у видео выровнен по низу плеера: ряд 7 — добор */
  .lesson-video > figcaption {
    grid-column: 10 / 13;
    grid-row: 8;
    margin-top: 0;
  }

  /* Кнопка в трек 246: собственный минимум 340 снят, иначе она вылезает
     из колонки. Перенос строк отключён — иначе подпись занимает две
     строки, а стрелка срывается на третью и кнопка перестаёт быть
     кнопкой кита (стрелка стоит в строке подписи, справа). */
  .rhythm .section-shell > .program-open {
    grid-column: 10 / 13;
    grid-row: 9;
    justify-self: start;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
    margin-top: var(--sp-5);
  }

  .rhythm .section-shell > .program-topics {
    grid-column: 10 / 13;
    grid-row: 10;
    /* центрированная строка перечислений в узкой колонке читается рвано */
    text-align: left;
    margin: var(--sp-4) 0 0;
  }
}

/* ---------- ЗАХОД 5 · БЛОКИ 7, 8, 9 ---------- */

@media (min-width: 1080px) {
  /* --- блок 7 «Почему Денис» --- */
  .why__body > h2 {
    grid-row: 1;
  }

  .why__body > .section-lead {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .why__body > .why-list {
    grid-column: 1 / 8;
    grid-row: 3;
  }

  /* вывод стоит рядом со списком, с той же верхней линии */
  .why__body > .why-summary {
    grid-column: 9 / 13;
    grid-row: 3;
    align-self: start;
    max-width: none;
  }

  .why__body > .why-background {
    grid-row: 4;
    max-width: none;
  }

  .why-background__cols {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 24px;
  }

  .why-background__cols > ul {
    grid-column: 1 / 7;
  }

  /* портрет держит пропорцию 3:4: в колонке 426 растяжка по высоте
     списка регалий давала горизонтальную полосу вместо портрета */
  .why-background__cols > .why-side-photo {
    grid-column: 8 / 13;
    align-self: start;
    aspect-ratio: 3 / 4;
    max-height: none;
  }

  /* штамп — у правой линии набора, как на мобильной (§3.7, ред. 2) */
  .why__body > .why-stamp {
    grid-row: 5;
    justify-self: end;
  }

  /* --- блок 8 «Кому подходит» --- */
  .fit .fit__sheet.section-shell {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: 24px;
  }

  .fit .fit__sheet.section-shell > .section-eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .fit .fit__sheet.section-shell > .fit__title-col {
    grid-column: 1 / 8;
    grid-row: 2;
  }

  .fit .fit__sheet.section-shell > .fit__image {
    grid-column: 9 / 13;
    grid-row: 2;
  }

  /* «подойдёт» и «не подойдёт» — пара выбора, на десктопе стоят рядом */
  .fit .fit__sheet.section-shell > .fit-list {
    grid-column: 1 / 8;
    grid-row: 3 / span 3;
  }

  .fit .fit__sheet.section-shell > .platform-note {
    grid-column: 9 / 13;
    grid-row: 3;
    /* та же верхняя линия, что у первой строки чек-листа */
    padding-top: 46px;
  }

  .fit .fit__sheet.section-shell > .not-fit {
    grid-column: 9 / 13;
    grid-row: 4;
    align-self: start;
  }

  /* выноска во весь набор: снят потолок 760 и боковые поля объекта */
  .fit .fit__sheet.section-shell > .fit-highlight {
    grid-column: 1 / -1;
    grid-row: 6;
    max-width: none;
    margin-inline: 0;
  }

  /* --- блок 9 «Условия» --- */
  .conditions__sheet > .conditions__intro > .section-eyebrow {
    grid-row: 1;
  }

  .conditions__sheet > .conditions__intro > h2 {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .conditions__sheet > .conditions__intro > .conditions__payment {
    grid-column: 1 / 7;
    grid-row: 3;
  }

  /* срок выровнен по нижней линии цены */
  .conditions__sheet > .conditions__intro > h3 {
    grid-column: 8 / 13;
    grid-row: 2;
    align-self: end;
  }

  .conditions__sheet > .conditions__intro > .section-lead {
    grid-column: 8 / 13;
    grid-row: 3;
  }

  /* тезис удержания стоит сразу под строкой оплаты, в её же колонке
     (правка 28.08: довод укрупнён и поднят из-под срока результатов) */
  .conditions__sheet > .conditions__intro > .conditions__retention {
    grid-column: 1 / 7;
    grid-row: 4;
    max-width: none;
  }

  .conditions__sheet > .conditions__intro > .conditions__facts {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  /* консультация: текст слева, бланк справа; центровка снята — левый край
     текста обязан совпадать с левым краем формы */
  .consultation {
    grid-template-rows: auto auto auto 1fr;
    text-align: left;
  }

  .consultation > .section-eyebrow {
    grid-column: 1 / 6;
    grid-row: 1;
  }

  .consultation > h3 {
    grid-column: 1 / 6;
    grid-row: 2;
    /* Строка обязана лечь в две строки в колонке 5 треков (§3.9).
       nowrap снят. Компенсирующая ширина 125% при scaleX(0.8) оставлена
       по канону файла «ширина коробки = 1 / scaleX» — тому самому, что
       §3.4 ред. 2 вернула заголовку блока 4: перенос считается по
       несжатой коробке. При width: auto «КОНСУЛЬТАЦИЯ» (521px при кегле
       84) в трек 426 не влезает и рвётся посреди слова на третью строку. */
    white-space: normal;
  }

  .consultation > p:not(.section-eyebrow) {
    grid-column: 1 / 6;
    grid-row: 3;
    max-width: none;
    margin-inline: 0;
  }

  .consultation > .lead-form,
  .consultation > .lead-done {
    grid-column: 7 / 13;
    grid-row: 1 / span 4;
    align-self: start;
    max-width: none;
    margin-top: 0;
  }
}

/* ================================================================
   КРУГ 3 · §3.10 «Перенос заголовков».
   Перенос в заголовке задаёт только автор: число строк на 1280 и 1440
   обязано равняться числу авторских переносов + 1. Кегль дисплейного
   заголовка считается от ширины трека, а не от экрана; коробка сжатого
   дисплея = 1 / scaleX от трека. Раскладка круга 2 не меняется —
   единственное исключение оговорено в §3.10 (консультация и правая
   колонка видео).
   ================================================================ */

@media (min-width: 1080px) {
  /* 1 · блок 8, заголовок «ПОДХОДИТ / ЛИ ВАМ / ФОРМАТ».
     Причина A: мобильная коробка width: 275px (строка 1520) на десктопе
     не переопределялась — видимая ширина 171 px при треке 606, и три
     авторские строки ломались на четыре. Коробка = 1 / scaleX. */
  .fit .fit__sheet .section-title {
    width: 161.3%;                                 /* 1 / 0.62 */
  }

  /* 2 · блок 8, лаймовая выноска. Причина C: одной строке нужно 1029 px
     при доступных 1004. Кегль 34 → 33 по шкале (38.25 → 37.1). */
  .fit .fit__sheet.section-shell > .fit-highlight {
    font-size: calc(33px * var(--fs-scale));
  }

  /* 3 · блок 8, третья строка чек-листа. Причина C: строка не добирает
     до одной. Кегль снижается только здесь, канон k-list не трогаем —
     поэтому счетверённый селектор, а не правка канона.
     Считаем от ячейки текста, а не от коробки строки: в строке к-листа
     ещё колонка знака 48 и жёлоб 20, поэтому под текст остаётся 538, а не
     606. Одной строке при кегле 19.1 нужно 570; кегль 18 из спеки давал
     висящее слово «ПРОГРАММ» (76 px во второй строке) — против §3.10.5.
     15 по шкале (16.9) укладывает строку в одну. */
  .fit-list.k-list.k-list.k-list > p {
    font-size: calc(15px * var(--fs-scale));
  }

  /* Правки 4 и 7 (кегль «БЕЗ ФИКСИРОВАННОГО СРОКА» и раскрытие заголовка
     консультации на 12 колонок) сняты по решению владельца: в одну тонкую
     строку заголовок срока теряет вес и оставляет правую половину блока
     без противовеса цене, а заголовок консультации во всю ширину
     отрывается от своего текста и прижимается к форме. Оба узла вернулись
     к состоянию круга 2. Правило §3.10.2 к заголовкам без авторских
     переносов не применяется. */

  /* 5 · блок 9, «ПЛАТИТЬ ЗА ВСЮ ПРОГРАММУ СРАЗУ НЕ НУЖНО».
     Причина C: одной строке нужно 526 при 516. Кегль 24 → 23. */
  .conditions__sheet > .conditions__intro > .conditions__payment {
    font-size: calc(23px * var(--fs-scale));
  }

  /* 6 · блок 9, «Первая группа платит четвёртый месяц подряд».
     Тезис переехал в колонку оплаты (1/7, 516px) — прежнее сжатие 20 → 18
     под узкую колонку 390 снято, кегль единый с широкой ступенью. */
  .conditions__intro > .conditions__retention strong {
    font-size: calc(22px * var(--fs-scale));
  }

  /* 8 · блок 6, правый столбик у видео: 9–12 (336) вместо 10–12 (246),
     плеер 1–7. Кнопка встаёт в строку, перечисление тем перестаёт
     рваться. */
  .lesson-video > .lesson-video__player {
    grid-column: 1 / 8;
  }

  .lesson-video > figcaption,
  .rhythm .section-shell > .program-open,
  .rhythm .section-shell > .program-topics {
    grid-column: 9 / 13;
  }
}

/* ================================================================
   Плашка отладки проезда панели программы. Появляется только в
   режиме ?popupdebug=1 — сам элемент до этого не создаётся, поэтому
   на обычной странице правило ни на что не влияет.
   Левый нижний угол: панель прижата к правому краю и это место
   не перекрывает. Сквозная для мыши, чтобы не мешать нажатиям.
   ================================================================ */
.popup-debug {
  position: fixed;
  z-index: 2147483647;
  bottom: 12px;
  left: 12px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 10px 12px;
  pointer-events: none;
  white-space: pre;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  color: #d9ff5c;
  background: rgb(12 13 10 / 92%);
  border: 1px solid #cbef2b;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 45%);
  text-align: left;
}

/* ================================================================
   ПАКЕТ ПРАВОК ВЛАДЕЛЬЦА № 1 (спека, редакция 5).
   Только десктопная ступень. Мобильная и планшет не затронуты,
   разметка и тексты не менялись.
   ================================================================ */

@media (min-width: 1080px) {
  /* 1 · Заголовок героя. §3.10.3 получает вторую ось: по ширине кегль
     считается от трека (он фиксирован — 606, поэтому потолок задан в px),
     по высоте — от окна, потому что колонка героя прижата к низу и растёт
     вверх, в шапку. Прежде кегль тянулся за шириной экрана: примерно
     с 1520 «ИИ-КОМАНДУ» переставало помещаться в трек, появлялась
     четвёртая строка, и столбец наезжал на логотип с подписью.
     Один рычаг закрывает оба дефекта: и разрыв слова, и кашу в углу. */
  .hero h1 {
    font-size: min(
      clamp(calc(96px * var(--fs-scale)), 10.2vw, calc(150px * var(--fs-scale))),
      12vw,
      148px,
      17vh
    );
  }

  /* 3 · Кнопка героя — форма кита: прямые углы и рамка 2px, как у
     остальных кнопок сайта и как на мобильной, принятой владельцем.
     Размер, поля и подпись не трогаем. */
  .hero__cta {
    border: 2px solid #141511;
    border-radius: 0;
  }

  /* 2 · Блок 6: правый столбик у видео начинается на верхней линии плеера
     (§3.6, ред. 5). Прежде столбик равнялся по низу — ряд-добор стоял
     перед ним; теперь добор уехал в конец, а подпись, кнопка и темы
     встают с первой строки плеера. */
  .rhythm .section-shell {
    grid-template-rows: auto auto auto auto 1fr auto auto auto auto 1fr;
  }

  .lesson-video > figcaption {
    grid-row: 7;
  }

  .rhythm .section-shell > .program-open {
    grid-row: 8;
  }

  .rhythm .section-shell > .program-topics {
    grid-row: 9;
  }

  /* 5 · Блок 7: плашки заголовка встают по средней горизонтали снимка.
     Величина считается от высоты снимка, а не от ширины экрана: плашки
     выходят из потока и поднимаются на половину высоты кадра, а свою
     половину добирают через translateY(-50%) — она всегда равна их
     собственной высоте, какой бы ни был кегль.
     Из потока — обязательно: отрицательным полем плашки тянут за собой
     весь текст ниже, и лид уезжал бы на фотографию. Теперь под кадром
     сразу идёт лид с обычным верхним полем листа.
     grid-row/column: auto — у абсолютного потомка грид-контейнера
     placement-свойства меняют containing block на область треков;
     auto возвращает его к padding-box листа. */
  .why {
    --why-photo-h: 720px;
  }

  .why__portrait {
    height: var(--why-photo-h);
  }

  .why__body > h2 {
    position: absolute;
    z-index: 1;
    grid-row: auto;
    grid-column: auto;
    top: calc(-0.5 * var(--why-photo-h));
    /* Плашки стоят на общей левой линии набора — по чернилам, как
       меряется вертикаль всей страницы. Отсчёт идёт от padding-box листа
       (у абсолютного потомка left считается от него), поэтому к полю
       листа добавляется поправка на собственное поле плашки: 20px внутри
       спана, сжатого scaleX(0.65), дают 13px видимых.
       Прежнее left: -10px было полем из потока и от padding-box уводило
       плашку на 10px левее КРОМКИ ЛИСТА — на 1280 это за край экрана. */
    left: calc(var(--pad) - 13px);
    margin: 0;
    transform: translateY(-50%);
  }

  /* 7 · Блок 8: снимок вырастает до высоты заголовка. Заголовок занимает
     колонки 1–6, снимок — 7–12; высоту ряда задаёт строка заголовка, а
     снимок тянется по ней, поэтому жёсткая пропорция снимается и кадр
     подрезается по object-fit, как у остальных фотографий страницы. */
  .fit .fit__sheet.section-shell > .fit__title-col {
    grid-column: 1 / 7;
  }

  .fit .fit__sheet.section-shell > .fit__image {
    grid-column: 7 / 13;
    align-self: stretch;
    aspect-ratio: auto;
    height: 0;
    min-height: 100%;
  }
}

/* ================================================================
   Бейдж «[ ДО ВНЕДРЕНИЯ ]» снят решением владельца от 10.08.2026
   («1 убираем везде») — на всех ширинах, включая мобильную и планшет.
   Собственные правила бейджа удалены: и десктопное из ступени ≥700,
   и мобильное из ветки канона, и компенсация поля после блока
   бэкграунда. Осталось одно правило — скрытие. Тройной класс, чтобы
   перебить display: table у канона .k-stamp, не трогая сам канон.
   Ничего вокруг не двигали: под бейджем в блоке 7 ничего не стоит,
   он был последним объектом листа.
   ================================================================ */
.why-stamp.k-stamp.k-stamp {
  display: none;
}

/* ================================================================
   10 — ВЫСТУПЛЕНИЯ. Шесть карточек одного ранга в одном столбце,
   по дате, новые первыми. Ширина у всех одна — вся линия набора.
   Слайдер не свой: тот же трек и та же карточка, что у кейсов
   (.case-track / .case-card), параметризованы через переменные
   примитива. Новых компонентов кита здесь нет.
   События без съёмки набраны на листе k-note: не заглушка и не
   зарезервированная пустота, а другой материал под другую роль —
   тема на них и есть содержание, поэтому она на ступень крупнее.
   ================================================================ */

/* minmax(0, 1fr) и min-width: 0 — иначе колонка списка растягивается по
   max-content ленты кадров, и карточка вылезает за линию набора вместо
   того, чтобы прокручивать трек внутри себя */
.speech-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

/* Тонкая линия сверху — граница события. Пунктир уже приём страницы
   (k-list, комплект источников, чек-лист блока 8), новых элементов нет.
   Внутренние зазоры карточки заметно меньше межкарточного, иначе строки
   снова разбегаются по соседям. */
.speech {
  min-width: 0;
  border-top: 1px dashed var(--rail-soft);
  padding-top: var(--sp-5);
}

/* Иерархия карточки: название события — заголовок, город и дата —
   служебная строка под ним, тема — обычное описание. Прежде было
   наоборот, и «Один дизайнер. Весь продукт.» читалось заголовком,
   а название события — подписью к нему. */
.speech__meta {
  display: grid;
  gap: 4px;
  margin: 0;
}

.speech__name {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--graphite);
}

/* разрядка — признак служебной строки, поэтому она осталась только здесь */
.speech__where {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--rail);
}

.speech__topic {
  margin: var(--sp-3) 0 0;
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--graphite);
}

/* Трек внутри карточки не выходит за линию набора: вынос примитива
   задан переменной, здесь она обнуляется. Полоса прокрутки скрыта на
   всех ширинах — требование приёмки блока. */
/* Вынос примитива НЕ обнуляем. Обнулённый вынос ставил коробку трека
   ровно по линии набора, и при свайпе въезжающий кадр срезался её
   прямой кромкой — ровно тот дефект, о котором писал владелец.
   Трек обязан идти от кромки до кромки экрана: тогда соседние кадры
   видны в полях, а не обрублены. Приём и величины — те же, что у
   галереи кейсов, снап так же возвращает активный кадр на линию
   набора. Здесь остаётся только собственный отступ от темы. */
.speech__track.case-track {
  margin-top: var(--sp-4);
}

.speech__frame.case-card {
  margin: 0;
  overflow-wrap: normal;
}

.speech__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.speech__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: var(--sp-3);
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--graphite);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

@media (min-width: 700px) {
  /* на десктопе город и дата встают в строку названия — порядок полей
     «название · город · дата» тот же, меняется только раскладка строки */
  .speech__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
  }

  .speech__name {
    font-size: calc(20px * var(--fs-scale));
  }

  .speech__where::before {
    content: "· ";
  }

  .speech__topic {
    font-size: var(--fs-md);
  }

  .speech__link {
    font-size: var(--fs-md);
  }
}

@media (min-width: 1080px) {
  /* кадр — четыре колонки: лента читается лентой, а не одним снимком */
  .speech__frame.case-card {
    flex: 0 0 var(--t4);
  }

  /* счётчик и кнопки — по левой линии набора, как весь блок */
  .speech__controls.case-controls {
    width: min(100%, 520px);
    margin-left: 0;
    margin-right: auto;
  }
}

/* ================================================================
   Блок 7, бэкграунд: снимок полосой на телефоне и планшете.
   Решение владельца — версия 3 листа сравнения. Ступень до 1079:
   колонки схлопываются, список регалий занимает всю ширину набора,
   снимок идёт полосой под ним. Порядок в разметке прежний.
   Пропорция 3:2 стоит на самой картинке, а не на рамке: у рамки
   бордюр 5px, и коробка стала бы на 10px уже — пропорция уехала бы
   до 1.53 и срезала снимок по высоте. На img коробка ровно как файл,
   обрезки нет, оба лица целые.
   Десктоп ≥1080 не затронут: там снимок остаётся в колонках 8–12
   с пропорцией 3:4.
   ================================================================ */
@media (max-width: 1079px) {
  .why-background__cols {
    display: block;
  }

  .why-side-photo {
    position: static;
    display: block;
    width: 100%;
    min-height: 0;
    max-height: none;
    margin: var(--sp-5) 0 0;
    border: 5px solid var(--paper);
    box-shadow: 0 4px 10px rgb(20 21 17 / 22%);
  }

  .why-side-photo img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 45%;
    border: 0;
    box-shadow: none;
  }
}

/* ================================================================
   ФОТОРЯД СТРАНИЦЫ — точки фокуса. Приглушение испечено в файлы,
   CSS-фильтров не добавляем: в шапке фильтр уже был и остаётся.
   Каждое место режется по-разному на телефоне и на десктопе, поэтому
   точка фокуса задана отдельно там, где это важно.
   ================================================================ */
.hero__portrait {
  object-position: 62% 42%;
}

@media (min-width: 700px) {
  .hero__portrait {
    object-position: 58% 45%;
  }
}

.method__hero > img,
.method__hero > img {
  object-position: 50% 45%;
}

.why__portrait img {
  object-position: 54% 38%;
}

.fit__image {
  object-position: 50% 40%;
}

.conditions__image {
  object-position: 50% 50%;
}

/* ================================================================
   Блок 7, бэкграунд на десктопе: снимок горизонтальной полосой под
   списком регалий — той же логикой, что уже принята на мобильной.
   Свести горизонтальный кадр с высотой списка нельзя: пять строк в
   половине набора дают 568 px, а кадру такой высоты нужна вся полоса
   набора. Поэтому пустое поле под списком уходит не выравниванием
   высот, а тем, что снимок встаёт под список — висеть нечему.
   Пропорция снова на самой картинке, а не на рамке: бордюр 5 px
   иначе уводит коробку с 16:9 и снимок начинает подрезаться.
   ================================================================ */
@media (min-width: 1080px) {
  .why-background__cols {
    display: block;
  }

  .why-background__cols > .why-side-photo {
    position: static;
    display: block;
    width: 100%;
    min-height: 0;
    max-height: none;
    margin: var(--sp-6) 0 0;
    aspect-ratio: auto;
  }

  .why-side-photo img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 50%;
    border: 0;
    box-shadow: none;
  }
}

/* ================================================================
   Полоса прокрутки страницы — своя, тонкая, в палитре сайта.
   Решение владельца: системную скрыть, вместо неё узкая декоративная.
   Только десктоп: на мобильной полосы и так нет, ветка ≤699 её уже
   убирает, и туда мы не заходим.
   Прокрутка остаётся настоящей — колесо, клавиатура и перетаскивание
   ползунка работают штатно, это по-прежнему системный скроллер, у него
   меняется только рисунок. Стрелки убраны, объёма нет.
   Firefox умеет только ширину и цвета — scrollbar-width / scrollbar-color;
   Chrome, Edge и Safari рисуют через ::-webkit-scrollbar. Заданы оба.
   ================================================================ */
@media (min-width: 700px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--rail-soft) transparent;
  }

  html::-webkit-scrollbar {
    width: 8px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 0;
    background: var(--rail-soft);
  }

  html::-webkit-scrollbar-thumb:hover {
    background: var(--rail);
  }

  html::-webkit-scrollbar-button,
  html::-webkit-scrollbar-corner {
    display: none;
  }
}


/* фотокарточки в «Публичных выступлениях»: кадр на белом листе с полями,
   тенью и лёгким наклоном (материал k-set__given), тонировка под палитру */
.speech__frame.case-card {
  padding: 10px 10px 22px;
  background: var(--paper);
  box-shadow: 0 3px 9px rgb(20 21 17 / 26%);
  border: 0;
  border-radius: 0;
}
.speech__frame img {
  filter: saturate(0.5) sepia(0.15) contrast(1.03);
}
.speech__frame:nth-child(odd) { transform: rotate(-1deg); }
.speech__frame:nth-child(even) { transform: rotate(0.8deg); }
/* Запас под тень и наклон, чтобы карточки не резались краем трека.
   Снизу запас больше: тень смещена вниз на 3px и размыта на 9px, то есть
   уходит под карточку на 12px, а наклон добавляет ещё пару. С равными 10px
   низ тени срезался кромкой трека на 4–5px на всех ширинах — замер и кадры
   это показали. Сверху тень выступает всего на 6px, там 10px хватает. */
.speech__track.case-track { padding-block: 10px 16px; }

/* фото в блоке ритма — та же фотокарточка, что в выступлениях */
.rhythm__intro img {
  padding: 8px 8px 18px;
  background: var(--paper);
  box-shadow: 0 3px 9px rgb(20 21 17 / 26%);
  border: 0;
  border-radius: 0;
  transform: rotate(-1deg);
  filter: saturate(0.5) sepia(0.15) contrast(1.03);
}


/* ================================================================
   ТЕКСТЫ ЛЕНДИНГА ПО МЕТОДУ СУРГАЯ — 2026-08-18.
   Новые узлы страницы и правки формы под согласованные тексты.
   Собственных величин здесь нет: шкала --sp-*, кегли --fs-*,
   материалы (бумага, тень, пунктир, лайм) — те же, что у кита.
   ================================================================ */

/* --- Блок 2: закрывающая строка списка задач --- */
.digitization__outro.k-note {
  max-width: 620px;
  margin: var(--sp-5) 0 0;
  padding: 13px 15px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* ссылка в подводке — подчёркивание как у текстовых ссылок страницы */
.digitization__outro a {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* --- Блок 3: квиз (пока заглушка, кнопка ведёт на форму) --- */
.quiz__yield {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.quiz__yield li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px dashed var(--rail-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.quiz__yield li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--olive);
  font-family: var(--display);
}

.quiz__action {
  margin-top: var(--sp-5);
}

/* --- Блок 4: прокрутка кейсов видна и там, где полосы нет --------
   Рельса показывает, какая доля ленты на экране и где мы в ней;
   стрелки на кнопках — второй, независимый признак того, что лента
   листается. Полоса прокрутки у треков скрыта решением владельца,
   поэтому признак нужен свой. */
.case-rail {
  overflow: hidden;
  height: 3px;
  margin-top: var(--sp-4);
  background: rgb(76 73 57 / 22%);
}

.case-rail > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
}

.case-controls [data-case-prev]::before {
  content: "←";
  margin-right: 8px;
  color: var(--olive);
}

.case-controls [data-case-next]::after {
  content: "→";
  margin-left: 8px;
  color: var(--olive);
}

/* --- Блок 5: графа статуса и приписка под бланком --- */
/* приписка укрупнена (решение владельца 18.08): это не сноска,
   а строка того же веса, что роли бланка */
.team-extra.team-extra {
  margin-top: var(--sp-5);
  padding: 12px 14px;
  border-left: 3px solid var(--ink);
  color: var(--graphite);
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.25;
  background: var(--paper);
}

/* --- Блок 6: проверка работ и горизонт --- */
.rhythm-review--text {
  grid-template-columns: minmax(0, 1fr);
}

.rhythm-horizon {
  max-width: 620px;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* --- Блок 7: метод компактным листом вместо большого слайда ------
   Одна строка и цепочка из пяти звеньев. Стрелка живёт внутри
   звена, а не в зазоре между ними: при переносе на новую строку
   стрелка в зазоре повисала бы в начале строки. */
.method--compact .method__body {
  min-height: 0;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

.method__title {
  margin: var(--sp-3) 0 0;
  color: var(--graphite);
  font-family: var(--display);
  font-size: clamp(calc(24px * var(--fs-scale)), 7vw, calc(34px * var(--fs-scale)));
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-transform: uppercase;
}

.method--compact .method__thesis {
  max-width: 660px;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.method-chain {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.method-chain > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: var(--graphite);
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
  background: var(--paper);
}

.method-chain > li:not(:last-child)::after {
  content: "→";
  color: var(--olive);
  font-family: var(--body);
}

/* модель — единственное сменное звено, поэтому единственное отмеченное */
.method-chain__swap {
  border-color: #141511;
  background: var(--lime);
}

.method-chain__swap em {
  color: #3c3f22;
  font-family: var(--body);
  font-size: var(--fs-2xs);
  font-style: normal;
  letter-spacing: 0;
}

/* --- Блок 10: что входит в цену --- */
.price-list {
  max-width: 620px;
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.price-list li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px dashed var(--rail-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--olive);
  font-family: var(--display);
}

.price-list li:last-child {
  border-bottom: 0;
}

/* --- Блок 11: лид-магнит --- */
.lead-magnet {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  text-align: left;
}

.lead-magnet .lead-magnet__title {
  width: auto;
  margin: var(--sp-3) 0 0;
  color: var(--graphite);
  font-family: var(--display);
  font-size: clamp(calc(20px * var(--fs-scale)), 6vw, calc(30px * var(--fs-scale)));
  font-weight: 520;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: uppercase;
  transform: none;
}

.lead-magnet__text {
  max-width: 620px;
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* --- Блок 12: форма --- */
/* заголовок формы — фраза, а не одно слово: сжатие и nowrap сняты */
.consultation h3 {
  width: auto;
  color: var(--graphite);
  font-size: clamp(calc(19px * var(--fs-scale)), 5.6vw, calc(28px * var(--fs-scale)));
  line-height: 1.08;
  text-transform: uppercase;
  white-space: normal;
  transform: none;
}

.lead-field--area .lead-field__row {
  display: block;
}

.lead-field textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 6px 0 8px;
  border: 0;
  border-radius: 0;
  color: var(--graphite);
  font-family: var(--body);
  font-size: calc(16px * var(--fs-scale));
  line-height: 1.35;
  background: transparent;
  resize: vertical;
  appearance: none;
}

.lead-field textarea::placeholder {
  color: rgb(76 73 57 / 62%);
}

.lead-field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.lead-done__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: var(--sp-3) 0 0;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.lead-done__contacts a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.lead-done__contacts span {
  color: var(--rail);
}

/* --- десктопная ступень новых узлов --- */
@media (min-width: 700px) {
  .hero__lead {
    max-width: 640px;
    margin: 18px 0 16px;
    font-size: min(calc(17px * var(--fs-scale)), 24px);
  }

  .digitization__outro.k-note {
    max-width: 720px;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-md);
  }

  .quiz__yield li {
    padding-left: 26px;
    font-size: var(--fs-md);
  }

  .case-controls button {
    min-height: 48px;
    padding: 0 18px;
    border: 2px solid #141511;
    font-size: var(--fs-xs);
    background: transparent;
  }

  .team-extra.team-extra {
    max-width: 660px;
    padding: var(--sp-4) var(--sp-5);
    font-size: calc(19px * var(--fs-scale));
  }

  .rhythm-horizon {
    max-width: 660px;
    font-size: var(--fs-lg);
  }

  .method--compact .method__thesis {
    font-size: var(--fs-lg);
  }

  .method-chain > li {
    padding: 11px 16px;
    font-size: var(--fs-sm);
  }

  .price-list {
    max-width: 660px;
  }

  .price-list li {
    padding: 11px 0 11px 28px;
    font-size: var(--fs-lg);
  }

  .lead-magnet__text {
    max-width: 660px;
    font-size: var(--fs-lg);
  }

  .lead-field textarea {
    min-height: 104px;
    font-size: calc(17px * var(--fs-scale));
  }
}

/* --- Промежуточная ступень 700–1079: колонка героя стоит от нижнего края,
   и четыре обещания подняли её на голову портрета. Возвращаем запас тем же
   приёмом, что уже принят на мобиле: пруф снят как дублирующий лид, набор
   лида и списка на ступень мельче. --- */
@media (min-width: 700px) and (max-width: 1079px) {
  .hero__proof {
    display: none;
  }

  .hero__lead {
    margin: 14px 0 12px;
    font-size: min(calc(15.5px * var(--fs-scale)), 21px);
  }

  /* поворот фотокарточки прибавляет к её коробке по ~3px с каждой стороны,
     а правого поля у секции ритма нет — коробка выходила за документ */
  .rhythm__intro img {
    width: calc(100% - 8px);
  }
}

/* --- Правки по замерам и кадрам (проверка mobile/laptop) --- */

/* Блок 2: стрелка всегда закрывает первую половину пары. База 0 у левой
   половины — иначе при длинной левой части стрелка срывалась на строку
   правой половины и пары читались по-разному. */
/* Стрелка стоит вплотную к левой половине пары. Прежняя база 0 растягивала
   половину на всю строку и уносила стрелку к правому краю — со снятой
   правой половиной это стало видно на телефоне. */
.transformation--long h3 span:first-child {
  flex: 0 1 auto;
  min-width: 0;
}

.transformation--long h3 b {
  flex: none;
}

/* Кнопка с подписью в две строки: стрелка остаётся на строке подписи,
   а не уезжает третьей строкой. */
.lead-form__submit > span {
  flex: 1 1 0;
}

/* Блок 7: у лайма ниже вес, чем у общего правила звена, — поднимаем
   селектор до той же ступени, иначе отметка не видна. */
.method-chain > .method-chain__swap {
  background: var(--lime);
}

@media (max-width: 699px) {
  /* Блок 8: плашки заголовка стали на строку короче, и лид уезжал на
     снимок. Наплыв уменьшен ровно на высоту снятой полоски. */
  .why__body h2 {
    margin: -103px 0 0;
  }

  /* Блок 11: на мобиле лист условий прозрачный, бумагу держит каждый
     блок сам — лид-магниту она тоже нужна. */
  .lead-magnet {
    padding-bottom: var(--sp-5);
    background-color: var(--paper);
  }

  /* Блок 3: длинная подпись кнопки не помещалась в одну строку и
     стрелка срывалась вниз — кнопка идёт во всю ширину, как в блоке 5. */
  .quiz__action .k-cta.k-cta {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 16px;
    text-align: left;
  }

  .quiz__action .k-cta > span {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 1080px) {
  /* Блок 4: «БЫЛО РУКАМИ —» длиннее прежнего «РЕАЛЬНЫЕ» и в шести
     колонках разваливался на четыре строки. Кегль ниже — авторский
     перенос в две строки вернулся. */
  .cases .section-shell > .section-title {
    font-size: calc(95px * var(--fs-scale));
  }

  /* Блок 7 компактный: у прежнего слайда тезис и приписка стояли слева
     в жёстких рядах, а список шагов — справа. Схема заменена цепочкой,
     жёсткие ряды сняты, иначе тезис печатался выше своего заголовка. */
  .method--compact .method__body {
    grid-template-rows: none;
  }

  .method--compact .method__body > .method__thesis {
    grid-column: 1 / 9;
    grid-row: auto;
  }

  .method--compact .method__body > .section-eyebrow,
  .method--compact .method__body > .method__title,
  .method--compact .method__body > .method-chain,
  .method--compact .method__body > .k-cta {
    grid-column: 1 / 11;
    grid-row: auto;
  }
}

/* Блок 4 на промежуточной ступени: коробка заголовка тут шире, но строка
   «БЫЛО РУКАМИ —» всё равно упиралась в её край — кегль на ступень ниже. */
@media (min-width: 700px) {
  .cases .section-title--xl {
    font-size: calc(108px * var(--fs-scale));
  }
}

/* ================================================================
   ПРАВКИ ПО ПРИЁМКЕ КОММИТА 5663f3d.
   ================================================================ */

/* --- Блок 12, десктоп: у консультации теперь ДВА абзаца ------------
   Правило круга 2 сажало все абзацы в третий ряд сетки — на 1280 и
   1920 они ложились друг на друга (замер приёмки: наложение 124px).
   Ряд под второй абзац добавлен, размещение абзацев отдано потоку:
   третий абзац, если появится, встанет следующим сам. Бланк заявки
   тянется на все ряды, поэтому его пролёт задан от первого до
   последнего, а не фиксированным числом. */
@media (min-width: 1080px) {
  .consultation {
    grid-template-rows: auto auto auto auto 1fr;
  }

  .consultation > p:not(.section-eyebrow) {
    grid-row: auto;
  }

  .consultation > .lead-form,
  .consultation > .lead-done {
    grid-row: 1 / -1;
  }
}

/* --- Блок 3: квиз-заглушка полосой, а не экраном ------------------
   Заглушка не должна весить столько же, сколько блок с содержанием:
   заголовок обычной строкой вместо сложенного дисплея, копия и
   кнопка — в одну полосу. */
.quiz .section-shell {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

.quiz__title {
  margin: 0;
  color: var(--graphite);
  font-family: var(--display);
  font-size: clamp(calc(20px * var(--fs-scale)), 5.6vw, calc(28px * var(--fs-scale)));
  font-weight: 520;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: uppercase;
}

.quiz__lead {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.quiz__yield {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.quiz__yield li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.quiz__yield li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--olive);
  font-family: var(--display);
}

.quiz__action {
  margin-top: var(--sp-4);
}

@media (min-width: 700px) {
  /* копия слева, действие справа: полоса читается одной строкой */
  .quiz__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .quiz__copy {
    flex: 1 1 420px;
    min-width: 0;
  }

  .quiz__lead,
  .quiz__yield li {
    font-size: var(--fs-md);
  }

  .quiz__action {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* --- Блок 1 на мобиле: снимок полосой, текст под ним --------------
   Замечание Натальи №4 («текст не на лице») на телефоне не
   закрывалось: колонка первого экрана выросла вчетверо — лид в три
   строки и четыре обещания, — и заголовок ложился на рот и бороду.
   Двигать кадр по вертикали нечем: снимок 3:2 в узкой коробке
   масштабируется по высоте, вертикального запаса у него нет и
   object-position по Y ничего не меняет.
   Поэтому кадр занимает верхнюю долю блока, а не весь блок: лицо
   уходит выше колонки. Нижняя кромка растворяется маской — стыка
   между снимком и тёмным полем блока не видно, рамки не появилось. */
@media (max-width: 699px) {
  .hero__portrait {
    bottom: auto;
    height: 60%;
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  }

  /* колонку добираем и набором: каждый снятый пиксель — это запас
     между подбородком и заголовком на коротких экранах */
  .hero h1 {
    font-size: min(clamp(calc(66px * var(--fs-scale)), 22.6vw, calc(88px * var(--fs-scale))), 25vw);
  }

  .hero__lead {
    margin: 10px 0 10px;
  }

  .hero__cta.hero__cta {
    margin-top: var(--sp-3);
  }
}

/* Блок 2 на широком экране: пара умещается в одну строку, поэтому
   принудительный перенос правой половины снимаем — стрелка стоит между
   фразами, как в паре, а не в конце строки. Переносится только та пара,
   которой строки действительно не хватает. */
@media (min-width: 1080px) {
  .transformation--long h3 span:first-child {
    flex: 0 1 auto;
  }

  .transformation--long h3 span:last-child {
    flex: 0 1 auto;
  }

  .transformation--long h3 {
    align-items: center;
  }

  /* второй трек коробки строки держался под подпись («звонки · встречи»),
     а подписи в новом списке нет: пара из-за него ужималась вдвое и
     переносилась там, где места хватало. Строка снова в один трек. */
  .transformation__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================
   ПАКЕТ ПРАВОК ВЛАДЕЛЬЦА (шесть штук).
   ================================================================ */

/* --- 1 · Блок 2: жирная только левая половина пары -----------------
   Весь список одним весом читался сплошной плитой. Правая половина —
   то, что получится, — набрана обычным начертанием и приглушённым
   цветом рельсы: тот же приём, что у служебных строк страницы. */
.transformation h3 span:last-child {
  font-weight: 400;
  color: var(--rail);
}

/* --- 2 · Блок 5: кнопка найма у каждой роли ------------------------
   Отметка в бланке заменена настоящим действием. Кнопка нарочно тише
   главной: рамка в волос, без заливки, набор на ступень мельче —
   лаймовая кнопка секции остаётся единственной главной.
   Коробка ниже 44px, поэтому область нажатия добирается невидимым
   полем — тот же приём, что у кнопки первого экрана. */
/* графа действия шире прежней графы статуса: в неё встала кнопка */
.k-order {
  --k-order-status: 78px;
}

/* --- 3 · Блок 8: переключатель выступлений -------------------------
   Имена всех шести видны сразу — это и есть доказательство объёма;
   раскрыта одна карточка, поэтому блок короче прежнего списка втрое.
   Вкладка — тот же лист, что у бланка ролей: бумага, тонкая линовка;
   выбранная переворачивается в чернила. Лайм здесь не появляется:
   он занят действиями. */
.speech-tabs {
  margin: var(--sp-5) 0 0;
}

.speech-tabs__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.speech-tabs__strip button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rail-soft);
  border-radius: 0;
  color: var(--rail);
  font-family: var(--display);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: left;
  background: var(--paper);
  cursor: pointer;
}

.speech-tabs__strip button[aria-selected="true"] {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.speech-tabs__strip button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.speech-panel {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--rail-soft);
}

.speech-panel[hidden] {
  display: none;
}

/* --- 5 · Блок 11: мини-форма чек-листа ----------------------------- */
.gift-form {
  max-width: 420px;
  margin: var(--sp-4) 0 0;
}

.gift-form[hidden] {
  display: none;
}

/* Форма раскрывается сразу с фокусом в поле, поэтому кольцо фокуса видно
   всегда. Между подписью графы и полем даём ему место: без зазора кольцо
   (отступ 4px) ложилось прямо на подпись. */
.gift-form .lead-field__row {
  margin-top: 8px;
}

.gift-form .k-cta {
  margin-top: var(--sp-4);
}

.gift-form__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--rail);
}

.gift-done {
  max-width: 420px;
  margin: var(--sp-4) 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.4;
  background: var(--paper);
}

.gift-done[hidden] {
  display: none;
}

.gift-done:focus {
  outline: none;
}

/* --- 6 · Первый экран: «СВОЮ ИИ-КОМАНДУ» одной строкой -------------
   Строка длиннее прежних, поэтому кегль заголовка считается от неё:
   ниже задан потолок, при котором она укладывается в набор на всех
   ширинах. Перенос внутри строки запрещён явно — глобальное правило
   страницы иначе рвёт её по дефису «ИИ-КОМАНДУ». */
.hero__line-tight {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

@media (min-width: 700px) {
  .speech-tabs__strip button {
    font-size: var(--fs-xs);
    min-height: 44px;
    padding: 0 16px;
  }
}

/* --- 4 · Мобильная ширина: действия во всю ширину ------------------
   Главные кнопки страницы на телефоне идут во весь набор: подпись
   слева, стрелка справа — как у кнопки первого экрана. Кнопки
   листания слайдеров и кнопки найма в строках бланка сюда не входят:
   это не действия страницы, а органы управления внутри объекта. */
@media (max-width: 699px) {
  /* тройной класс — у канона кита поля заданы так же, и правило в два
     класса ему проигрывало: подпись в две строки вылезала за рамку */
  .k-cta.k-cta.k-cta {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    padding: 10px 16px;
    text-align: left;
  }

  .k-cta.k-cta.k-cta > span {
    flex: 1 1 0;
    min-width: 0;
  }

  .k-cta.k-cta.k-cta--link {
    justify-content: flex-start;
    padding: 0;
  }

  .gift-form,
  .gift-done,
  .lead-magnet__text {
    max-width: none;
  }

}

/* Кегль первого экрана считается по длинной строке «СВОЮ ИИ-КОМАНДУ»:
   она обязана стоять в одну строку на всех ширинах (решение владельца).
   Потолки ниже — ровно та величина, при которой строка укладывается в
   коробку набора: на телефоне коробка растёт вместе с экраном, поэтому
   потолок задан от ширины экрана, а с 1080 набор фиксирован и потолок
   постоянный. */
@media (max-width: 699px) {
  .hero h1 {
    font-size: min(calc(88px * var(--fs-scale)), calc((100vw - 40px) * 0.209));
  }
}

@media (min-width: 700px) {
  .hero h1 {
    font-size: min(clamp(calc(96px * var(--fs-scale)), 10.2vw, calc(150px * var(--fs-scale))), 12vw, calc((100vw - 120px) * 0.148));
  }
}

@media (min-width: 1080px) {
  /* с 1080 до 1280 набор ещё растёт вместе с экраном, поэтому потолок тут
     тоже считается от ширины; с 1280 набор фиксирован и потолок постоянный */
  .hero h1 {
    font-size: min(96px, calc(84px + (100vw - 1080px) * 0.083));
  }
}

/* Блок «Выступления»: «ВЫСТУПЛЕНИЯ» — самое длинное слово этой ступени, и на
   700–760 оно выходило за набор (переполнение было и до этих правок: строка
   вылезала из своей коробки, поэтому по коробкам элементов не ловилась). */
@media (min-width: 700px) and (max-width: 1079px) {
  .speeches .section-title {
    font-size: min(calc(84px * var(--fs-scale)), calc((100vw - 56px) * 0.136));
  }
}

/* --- 7 · Первый экран без буллетов (решение владельца 18.08) -------
   Четыре обещания сняты: на первом экране остались надзаголовок,
   заголовок, подзаголовок и кнопка. Колонка стала короче на треть,
   и снимку на телефоне больше не нужно уходить узкой полосой —
   он занимает почти весь блок, а лицо всё равно выше набора.
   Правила снятого списка из файла убраны — узел не вернётся. */
@media (max-width: 699px) {
  .hero__portrait {
    height: 80%;
  }

  .hero__lead {
    margin: 12px 0 18px;
  }
}

/* ================================================================
   ВТОРОЙ ПАКЕТ ПРАВОК ВЛАДЕЛЬЦА.
   ================================================================ */

/* --- 1 · Первый экран: кегль заголовка вернулся в ряд --------------
   Длинная строка «СВОЮ ИИ-КОМАНДУ» не помещалась в семь колонок, и
   заголовок пришлось ужать до 96px — на 1280 он стал МЕЛЬЧЕ заголовков
   блоков (118 у блока 2, 119 у команды) и с ростом экрана не рос.
   Лечится не кеглем, а треком: заголовку отдан весь набор, и кегль
   вернулся к прежней формуле — заголовок снова крупнейший на странице
   и растёт вместе с экраном. Строка при этом остаётся одна. */
@media (min-width: 1080px) {
  .hero__content > h1 {
    grid-column: 1 / -1;
    /* потолок 950px держал прежнюю коробку в семь колонок и не давал
       длинной строке разъехаться на весь набор */
    max-width: none;
  }

  .hero h1 {
    font-size: min(clamp(calc(96px * var(--fs-scale)), 10.2vw, calc(150px * var(--fs-scale))), 12vw);
  }
}

/* --- 2 · Блок 5: роли снова отмечают галочкой ----------------------
   Кнопка-ссылка не давала главного — собрать команду прямо в бланке.
   Механика отметки вернулась к исходной (графа статуса, галочка,
   НАНЯТЬ → НАНЯТ, лаймовая отметка по названию), а отклик усилен:
   отмеченная строка меняет фон и получает лаймовую рельсу слева,
   графа статуса становится чернильной. Переходы короткие — отметка
   должна отзываться сразу, а не «выезжать». */
.k-order__act {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.k-order__kit {
  font-family: var(--display);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--olive);
}

.k-order__list > li[data-icon] {
  position: relative;
  transition: background-color 0.12s linear;
}

/* лаймовая рельса слева — признак отмеченной строки; ширину держим
   нулевой, чтобы неотмеченные строки не смещались */
.k-order__list > li[data-icon]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 3px;
  background: var(--lime);
  opacity: 0;
  transition: opacity 0.12s linear;
}

.k-order__list > li:has(input:checked) {
  background: rgb(203 239 43 / 12%);
}

.k-order__list > li:has(input:checked)::after {
  opacity: 1;
}

.k-order .hire {
  transition: none;
}

.k-order__state > span {
  transition: background-color 0.12s linear, border-color 0.12s linear;
}

.k-order__list > li:has(input:checked) .k-order__state > span {
  color: var(--paper);
  background: var(--ink);
}

/* палец видит, что строка кликабельна */
.k-order .hire:hover .k-order__state > span {
  border-color: var(--olive);
}

/* --- 3 · Блок 8: ленты кадров внутри вкладок -----------------------
   Одиночный кадр вернулся лентой: все снимки события доступны, но
   лежат за перелистыванием — «слишком много Татарстана» решает
   именно лента, а не выбрасывание кадров. Материал карточки и
   поведение ленты — те же, что у галереи кейсов. */
.speech-panel .case-track.speech__track {
  margin-top: var(--sp-4);
}

/* --- 4 · Фокус в формах: линия вместо коробки ----------------------
   Прямоугольная обводка ложилась поверх поля и подписи. Показываем
   фокус тем же, чем поле и так живёт, — его нижней линией: она
   становится чернильной и вдвое толще. Видно и мышью, и с клавиатуры,
   лишней геометрии не появляется. */
.lead-field input:focus-visible,
.lead-field textarea:focus-visible,
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none;
}

.lead-field:focus-within {
  border-bottom-color: var(--ink);
  box-shadow: 0 2px 0 -1px var(--ink);
}

/* --- 5 · Блок 12: заголовок формы в общем ряду ---------------------
   Заголовок стоял кеглем абзаца и выпадал из ряда заголовков блоков.
   Теперь он набран тем же дисплеем и тем же размером, что заголовки
   соседних блоков; чтобы длинная строка уместилась, ему отдан весь
   набор, а колонки текста и бланка встали под ним. */
.consultation h3 {
  /* дисплей набран вплотную к строчной коробке: без верхнего поля
     краткая «Й» подходит под пунктир эйбрау */
  margin-top: var(--sp-3);
  width: 156.25%;                                /* 1 / 0.64 */
  color: var(--graphite);
  font-family: var(--display);
  font-size: min(68px, 21vw);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-transform: uppercase;
  white-space: normal;
  transform: scaleX(0.64);
  transform-origin: left top;
}

@media (min-width: 700px) {
  .consultation h3 {
    font-size: clamp(84px, 11vw, 107px);
  }
}

@media (min-width: 1080px) {
  .consultation {
    grid-template-rows: auto auto auto auto 1fr;
  }

  .consultation > .section-eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .consultation > h3 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .consultation > p:not(.section-eyebrow) {
    grid-column: 1 / 6;
    grid-row: auto;
  }

  .consultation > .lead-form,
  .consultation > .lead-done {
    grid-column: 7 / 13;
    grid-row: 3 / -1;
  }

  .consultation h3 {
    font-size: 107px;
  }
}

/* --- Блок 2: правая половина пары — обычным регистром ---------------
   Капсом набрано только то, что человек делает руками (левая половина);
   то, что получится, идёт спокойной строкой под ней. Своего стиля у неё
   нет: это та же подпись строки, которой блок пользовался с самого
   начала (.transformation__body p) — тот же кегль, цвет и интерлиньяж.
   Из заголовка правая половина ушла ещё и потому, что заголовок сжат по
   горизонтали (scaleX 0.57 на телефоне): наборный текст в такой коробке
   читался бы сдавленным. Подпись стоит вне сжатия и остаётся нормальной.
   Перенос разрешён на всех ширинах — у самой длинной пары строка длиннее
   набора, а обрезать её нельзя. */
.transformation__result {
  white-space: normal;
}

/* Стрелка стоит на строке левой половины, а не свисает к подписи:
   прежнее выравнивание по низу было рассчитано на две половины внутри
   заголовка, теперь половина одна. */
.transformation--long h3 {
  align-items: center;
}

.transformation--long h3 b {
  align-self: center;
  line-height: 0;
}

/* Стрелка идёт последним знаком строки, а не отдельной колонкой: на
   узком экране длинная левая половина переносится, и стрелка-сосед
   срывалась под текст. Внутри строки она всегда стоит за последним
   словом. Высоту строки не поднимает — своей у знака нет. */
.transformation h3 b {
  display: inline;
  /* размер знака идёт от самой строки: прежние 40px были рассчитаны
     на отдельную колонку и на 320 свисали на подпись под строкой */
  font-size: 1.15em;
  line-height: 0;
  vertical-align: -0.04em;
}