/* bundle: 01151393be53591615547ac54d6bc863 */

/* --- css/fonts.css --- */
/* Селлерс Солюшн — вариативные шрифты (self-hosted, subset: cyrillic + latin).
   Вариативные нужны, чтобы font-weight анимировался в transition. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-italic-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-italic-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- css/base.css --- */
/* ==========================================================================
   Селлерс Солюшн — базовые стили: reset, токены, типографика, контейнер
   ========================================================================== */

:root {
  /* Цвета */
  --c-dark:     #0b212e;
  --c-blue-lt:  #d5e4ea;
  --c-text:     #39393a;
  --c-white:    #ffffff;

  /* Шрифты */
  --f-head: 'Montserrat', 'Arial', sans-serif;
  --f-body: 'Open Sans', 'Arial', sans-serif;

  /* Сетка: макет 1920 — контент 1728 (по 96px по краям); мобильный 360 — контент 312 */
  --container: 1728px;
}

/* --- reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 82px; }   /* якоря не прячутся под фиксированной шапкой */
@media (max-width: 767px) { html { scroll-padding-top: 60px; } }

/* Плавный скролл по якорям. JS-прокрутка шагов идёт с behavior: 'instant' и его не задевает */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-text);
  background: var(--c-white);
}

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* --- типографика ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
}

/* --- контейнер ------------------------------------------------------------ */

.container {
  width: min(var(--container), 100% - 96px);
  margin: 0 auto;
}

@media (max-width: 767px) {
  .container { width: calc(100% - 48px); }
}

/* --- утилиты -------------------------------------------------------------- */

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

.no-scroll { overflow: hidden; }


/* --- css/components.css --- */
/* ==========================================================================
   Селлерс Солюшн — компоненты из UI-кита (кнопки, ссылки, поля форм)
   ========================================================================== */

/* --- Кнопки ---------------------------------------------------------------
   Общая геометрия: h 50px, радиус 30px, паддинг 27px, Open Sans Bold 16/1.3.
   Активное состояние в макете нарисовано на 4px крупнее — отдаём scale().
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 27px;
  border: 0.5px solid transparent;
  border-radius: 30px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, transform .1s ease;
}

.btn:active { transform: scale(1.05); }

/* Голубая заливка → при наведении прозрачная с белой обводкой */
.btn--blue {
  background: var(--c-blue-lt);
  border-color: var(--c-blue-lt);
  color: var(--c-text);
}
.btn--blue:hover {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}

/* Прозрачная с белой обводкой → при наведении белая заливка */
.btn--ghost {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}
.btn--ghost:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-text);
}

/* Белая заливка с тёмной обводкой → при наведении прозрачная с белой обводкой */
.btn--white {
  background: var(--c-white);
  border-color: var(--c-text);
  color: var(--c-text);
}
.btn--white:hover {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}

/* Прозрачная с тёмной обводкой (на светлом фоне) → при наведении заливка --c-dark.
   В ките этой пары нет — ховер согласован с заказчиком 13.09 */
.btn--outline {
  background: transparent;
  border-color: var(--c-text);
  color: var(--c-text);
}
.btn--outline:hover {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-white);
}

/* --- Ссылки в футере ------------------------------------------------------
   Normal — Open Sans Light без подчёркивания, hover/active — Regular с ним.
   -------------------------------------------------------------------------- */

.link-footer {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: font-weight .2s ease, text-decoration-color .2s ease;
}

.link-footer:hover,
.link-footer:active {
  font-weight: 400;
  text-decoration-color: currentColor;
}

/* --- Логотипы маркетплейсов -----------------------------------------------
   Один и тот же ряд встречается в нескольких секциях (услуги, комплексное
   обслуживание). Размеры и гапы — из макета.
   -------------------------------------------------------------------------- */

.mp-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Логотип-кнопка — открывает модалку консультации */
.mp-logos__btn { display: block; transition: opacity .2s ease; }

/* Ховер как у карточек команды */
@media (hover: hover) {
  .mp-logos__btn:hover { opacity: .7; }
}

@media (max-width: 767px) {
  .mp-logos { gap: 6px; }
  .mp-logos img { width: 38.957px; height: 38.957px; }
  .mp-logos li:nth-child(3) img { width: 46.755px; }
}


/* --- css/sections/hero.css --- */
/* ==========================================================================
   Секция 1 — шапка + первый экран
   Макет: десктоп 1920x960 (node 4203:266), мобильный 360x640 (node 4203:1043)
   ========================================================================== */

.s-hero {
  position: relative;
  overflow: hidden;
  min-height: 960px;
  background: var(--c-dark);
  border-radius: 0 0 30px 30px;
  color: var(--c-white);
}

.s-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 32px;
}

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

.s-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 50px;
}

/* Фиксация при скролле: обёртка держит место, шапка уходит в fixed с тёмной
   подложкой. Включается, когда шапка доезжает до своего отступа от верха
   экрана (16 / 12 на мобилке) — над тёмным героем переход не виден. */
.s-header-wrap { height: 50px; }

.s-header-wrap.is-fixed .s-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 82px;
  padding: 16px max(48px, (100% - 1728px) / 2);
  background: var(--c-dark);
  box-shadow: 0 4px 20px rgba(11, 33, 46, .25);
}

.s-header__logo { flex: 0 0 auto; }
.s-header__logo img { width: 118px; height: 42px; }

.s-header__nav {
  display: flex;
  align-items: center;
  gap: 44.5px;
  margin-top: -1px;
}

.s-header__nav a {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-white);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: font-weight .2s ease, text-decoration-color .2s ease;
}

.s-header__nav a:hover,
.s-header__nav a:active,
.s-header__nav a[aria-current="page"] {
  font-weight: 400;
  text-decoration-color: currentColor;
}

.s-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.s-header__actions .btn { width: 150px; padding: 0; }

/* --- «Услуги» и выпадающие списки ---------------------------------------
   Меню-строка живёт до 1550px, дальше сворачивается в кнопку «Услуги»,
   а с появлением бургера уезжает в него.
   ------------------------------------------------------------------------ */

.s-header__services { position: relative; display: none; flex: 0 0 auto; }

.s-header__services-btn {
  gap: 10px;
  width: auto;
  padding: 0 24px;
}

.s-header__caret { transition: transform .2s ease; }

.s-header__services-btn[aria-expanded="true"] .s-header__caret { transform: rotate(180deg); }

.s-header__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 10;
  /* Ширина фиксированная: при ховере ссылка тяжелеет и max-content дёргал бы плашку */
  width: 400px;
  max-width: calc(100vw - 96px);
  padding: 20px 27px;
  background: var(--c-dark);
  border: 0.5px solid var(--c-white);
  border-radius: 20px;
}

.s-header__dropdown li + li { margin-top: 16px; }

.s-header__dropdown a {
  display: block;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: font-weight .2s ease, text-decoration-color .2s ease;
}

.s-header__dropdown a:hover,
.s-header__dropdown a:active,
.s-header__dropdown a[aria-current="page"] {
  font-weight: 400;
  text-decoration-color: currentColor;
}

.s-header__dropdown--mobile { left: auto; right: 0; }

/* «Ещё» в строке меню: 4-й и дальше пункты, открывается наведением или фокусом */
.s-header__more { position: relative; }

.s-header__more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-white);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: font-weight .2s ease, text-decoration-color .2s ease;
}

.s-header__more:hover .s-header__more-btn,
.s-header__more:focus-within .s-header__more-btn,
.s-header__more-btn.is-current {
  font-weight: 400;
  text-decoration-color: currentColor;
}

.s-header__more:hover .s-header__caret,
.s-header__more:focus-within .s-header__caret { transform: rotate(180deg); }

.s-header__more-list { display: none; left: auto; right: 0; }

/* Мостик через зазор 12px, чтобы список не закрывался по пути к нему */
.s-header__more-list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

.s-header__more:hover .s-header__more-list,
.s-header__more:focus-within .s-header__more-list { display: block; }

/* «Контакты» в бургере нужны только там, где кнопка спрятана */
.s-header__dropdown-contacts { display: none; }

.s-header__burger-wrap { position: relative; display: none; }

.s-header__burger {
  display: block;
  border-radius: 18px;
  transition: background-color .2s ease;
}

.s-header__burger img { transition: filter .2s ease; }

/* Открыт (и ховер) — инверсия, как у .btn--ghost: белая заливка, линии #39393a.
   Иконка — img с белыми линиями: brightness(0) даёт чёрный, invert(.22) — #383838 */
.s-header__burger[aria-expanded="true"] { background-color: var(--c-white); }
.s-header__burger[aria-expanded="true"] img { filter: brightness(0) invert(.22); }

@media (hover: hover) {
  .s-header__burger:hover { background-color: var(--c-white); }
  .s-header__burger:hover img { filter: brightness(0) invert(.22); }
}

/* --- контент первого экрана ----------------------------------------------- */

/* Блок текста в макете смещён на 2.5px правее колонки шапки — оставляем как в дизайне */
.s-hero__content {
  max-width: 900px;
  margin-left: 2.5px;
}

.s-hero__title {
  margin-top: 224px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
}

.s-hero__lead {
  margin-top: 31px;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
}

.s-hero__cta { margin-top: 135px; }

.s-hero__cta .btn { width: 264px; padding: 0; }

/* Страница селлеров (market.html, узел 2532:2087): заголовок в три строки,
   от лида до кнопки 60 вместо 139 */
.s-hero--sellers .s-hero__lead { margin-top: 32.76px; }
.s-hero--sellers .s-hero__cta  { margin-top: 55.48px; }

/* Страница компаний (companies.html, 2339:349): тот же каркас, что у селлеров,
   но лид в одну строку при рамке 41 — кнопка на 26.72 ниже */
.s-hero--companies .s-hero__cta { margin-top: 82.2px; }

/* registration.html (2415:1341): как у компаний, но блок текста в макете
   зажат до 281 — кнопка на 19.6 выше */
.s-hero--reg .s-hero__cta { margin-top: 62.6px; }

/* --- иллюстрация ----------------------------------------------------------
   Сцена = система координат макета 1920x960, прижата к правому нижнему углу.
   Все слои спозиционированы в % от неё, поэтому композиция масштабируется
   целиком. Объекты вынесены отдельными слоями под параллакс.
   -------------------------------------------------------------------------- */

.s-hero__art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 960;
  pointer-events: none;
}

.s-hero__stage { position: absolute; inset: 0; }

.s-hero__ribbon {
  position: absolute;
  left: 38.5417%;   /* 740 / 1920 */
  top: 13.5417%;    /* 130 / 960  */
  width: 61.4583%;  /* 1180 / 1920 */
  height: 86.4583%; /* 830 / 960   */
}

.s-hero__obj {
  position: absolute;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.s-hero__obj img {
  position: relative;   /* держим объект над слоем размытия */
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Размытие фона под объектом, обрезанное по его силуэту — как background blur в Figma */
.s-hero__obj-blur {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--blur, 5.7px));
  backdrop-filter: blur(var(--blur, 5.7px));
  -webkit-mask: var(--silhouette) no-repeat center / 100% 100%;
  mask: var(--silhouette) no-repeat center / 100% 100%;
}

/* кольцо */
.s-hero__obj--ring {
  left: 63.5015%;  top: 47.4352%;
  width: 7.2146%;  height: 14.2586%;
  --rot: 7.85deg;
  --blur: 12.85px;
  --silhouette: url('../img/hero-ring.webp');
}

.s-hero__obj--ring img { opacity: .8; }

/* процент */
.s-hero__obj--percent {
  left: 87.4366%;  top: 22.9059%;
  width: 4.2290%;  height: 8.1740%;
  --rot: 14.46deg;
  --silhouette: url('../img/hero-percent.webp');
}

.s-hero__obj--percent img { opacity: .7; }

/* калькулятор */
.s-hero__obj--calc {
  left: 85.8545%;  top: 46.2617%;
  width: 5.3663%;  height: 15.1051%;
  --rot: 19.68deg;
  --silhouette: url('../img/hero-calc.webp');
}

/* плюс */
.s-hero__obj--plus {
  left: 77.1721%;  top: 72.0629%;
  width: 4.5389%;  height: 8.9964%;
  --rot: -13.19deg;
  --silhouette: url('../img/hero-plus.webp');
}

.s-hero__obj--plus img { opacity: .9; }


@media (prefers-reduced-motion: reduce) {
  .s-hero__obj { transition: none; }
}

/* --- планшет -------------------------------------------------------------- */

/* Строка меню перестаёт помещаться — отдаём её кнопкой «Услуги» */
/* С «Ещё» строка меню шире на ~95px — сворачиваем в «Услуги» раньше */
@media (min-width: 1550px) and (max-width: 1649px) {
  .s-header--more .s-header__nav { display: none; }
  .s-header--more .s-header__services { display: block; }
}

@media (max-width: 1549px) {
  .s-header__nav { display: none; }
  .s-header__services { display: block; }
}

@media (max-width: 1439px) {
  .s-hero { min-height: 760px; }
  .s-hero__title { margin-top: 150px; font-size: 56px; }
  .s-hero__lead { margin-top: 24px; font-size: 18px; }
  .s-hero__cta { margin-top: 80px; }
  .s-hero--sellers .s-hero__lead { margin-top: 24px; }
  .s-hero--sellers .s-hero__cta  { margin-top: 40px; }
}

/* Появляется бургер — услуги уезжают в него */
@media (max-width: 1023px) {
  .s-hero { min-height: 640px; }
  .s-hero__title { margin-top: 120px; font-size: 44px; }
  .s-hero__cta { margin-top: 60px; }
  .s-header__services { display: none; }
  .s-header__burger-wrap { display: block; }
}

/* --- мобильный (макет 360) ------------------------------------------------ */

@media (max-width: 767px) {
  .s-hero {
    min-height: 640px;
    border-radius: 0 0 30px 30px;
  }

  .s-hero__inner { padding-top: 20px; }

  .s-header { height: 36px; gap: 10px; }
  .s-header-wrap { height: 36px; }
  .s-header-wrap.is-fixed .s-header { height: 60px; padding: 12px 24px; }
  .s-header__logo img { width: 86px; height: 30px; }

  .s-header__actions { gap: 10px; }
  .s-header__actions .btn--contacts { display: none; }
  .s-header__actions .btn--price { width: 116px; height: 36px; font-size: 10px; }

  .s-header__burger { width: 54px; height: 36px; }
  .s-header__burger img { width: 54px; height: 36px; }

  .s-header__dropdown { width: 280px; max-width: calc(100vw - 48px); padding: 16px 20px; }
  .s-header__dropdown a { font-size: 12px; }
  .s-header__dropdown li + li { margin-top: 12px; }
  .s-header__dropdown-contacts { display: block; }

  .s-hero__content { max-width: none; margin-left: 0; }

  .s-hero__title { margin-top: 109.3px; font-size: 36px; }
  .s-hero__lead  { margin-top: 20.6px; font-size: 12px; }
  .s-hero__cta   { margin-top: 44.7px; }

  /* Страница селлеров (2520:5848): блок на 133 вместо 173, лид 12/1.4,
     блок заголовка 115 и лида 32 — выше расчётных, остаток в отступах */
  .s-hero--sellers .s-hero__title { margin-top: 69.3px; }
  .s-hero--sellers .s-hero__lead  { margin-top: 19.777px; line-height: 1.4; }
  .s-hero--sellers .s-hero__cta   { margin-top: 42.889px; }

  /* companies.html (2520:4950): заголовок в 5 строк (рамка 193), лид на 20 ниже
     рамки, кнопка на 40 ниже рамки лида 28 */
  .s-hero--companies .s-hero__title { margin-top: 68.9px; }
  .s-hero--companies .s-hero__lead  { margin-top: 18.677px; }
  .s-hero--companies .s-hero__cta   { margin-top: 38.889px; }

  /* registration.html (2523:298): заголовок 34/1.1 в 3 строки (рамка 106),
     лид 12 на 20 ниже рамки (рамка 16), кнопка через 40 */
  .s-hero--reg .s-hero__title { margin-top: 69.34px; font-size: 34px; }
  .s-hero--reg .s-hero__lead  { margin-top: 16.93px; line-height: 1.4; }
  .s-hero--reg .s-hero__cta   { margin-top: 43.69px; }

  .s-hero__cta .btn {
    width: 169px;
    height: 36px;
    padding: 0;
    font-size: 10px;
  }

  /* На мобильном параллакс не нужен — отдаём собранную картинку одним слоем */
  .s-hero__stage { display: none; }

  .s-hero__art {
    width: 100%;
    max-width: none;
    aspect-ratio: 360 / 315;
    background: url('../img/hero-art-mobile.webp') no-repeat right bottom / 100% 100%;
  }
}


/* --- css/sections/services.css --- */
/* ==========================================================================
   Секция 2 — «Наши услуги»: заголовок + 3 карточки
   Макет: десктоп 1920 (узлы 4203:304, 4203:306), мобильный 360 (4203:1141,
   4203:1058, 4203:1135, 4203:1138)

   В макете первая карточка нарисована тёмной, потому что рядом стоит курсор —
   в этом файле так помечено состояние «при наведении» (см. кит 2545:1585).
   По умолчанию все три карточки светлые, тёмная заливка — ховер.
   Исключение — мобильный: там ховера нет и первая карточка тёмная всегда.

   Отступы посчитаны от макетных координат: в Figma текст обрезан по капители
   (text-box-trim: cap alphabetic), в CSS этого нет, поэтому все padding/margin
   уменьшены на полулидинг + (ascender − capHeight). Метрики Open Sans:
   ascender 1.06885em, capHeight 0.71387em.
   ========================================================================== */

.s-services {
  /* заголовок начинается на 1060px макета, секция стартует на 960 */
  padding: 83.86px 0 40px;
  background: var(--c-white);
}

/* --- заголовок ------------------------------------------------------------ */

.s-services__title {
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
}

.s-services__title span { color: #c8c8c8; }

/* --- сетка карточек -------------------------------------------------------
   1643px при полях 140/137 — в макете сетка сдвинута на 1.5px правее центра.
   Воспроизводим как в дизайне (см. такой же сдвиг в первом экране).
   -------------------------------------------------------------------------- */

.s-services__grid {
  position: relative;
  left: 1.5px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(222.5px, auto));
  column-gap: 29px;
  row-gap: 36px;
  width: min(1643px, 100% - 274px);
  margin: 105.74px auto 0;
}

.s-services__card {
  position: relative;
  border-radius: 30px;
  background: rgba(213, 228, 234, .3);
  color: var(--c-text);
  transition: background-color .2s ease, color .2s ease;
}

/* Нижние поля: у тёмной 61 как в макете (контент кончается на 418.8 при
   высоте 481), у светлых 47 — ровно столько свободного места остаётся
   в строке сетки 222.5. Больше нельзя: строка вырастет и 1920 разъедется. */
.s-services__card--main {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 48.34px 107px 61px 60px;   /* колонка 807 − 60 − 107 = 640, ширина текста в макете */
}

.s-services__card--ledger,
.s-services__card--reg {
  grid-column: 2;
  padding-left: 60px;
  padding-right: 47px;                /* колонка 807 − 60 − 47 = 700 */
  padding-bottom: 47px;
}

.s-services__card--ledger { grid-row: 1; padding-top: 40.34px; }
.s-services__card--reg    { grid-row: 2; padding-top: 52.34px; }

/* --- содержимое карточек --------------------------------------------------- */

.s-services__card-title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
}

.s-services__card-text {
  margin-top: 25.38px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

.s-services__card-note {
  margin-top: 29.3px;
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  transition: color .2s ease;
}

/* Вся карточка кликабельна: ссылка в заголовке растянута на карточку.
   Логотипы маркетплейсов — над ней, они открывают модалку. */
.s-services__card-link { color: inherit; text-decoration: none; }
.s-services__card-link::after { content: ''; position: absolute; inset: 0; }

.s-services__logos { margin-top: 69.78px; position: relative; z-index: 1; }

/* --- наведение ------------------------------------------------------------- */

@media (hover: hover) and (min-width: 768px) {
  .s-services__card:hover {
    background: var(--c-dark);
    color: var(--c-white);
  }

  .s-services__card:hover .s-services__card-note { color: var(--c-blue-lt); }
}

/* --- планшет --------------------------------------------------------------
   Макета нет: заголовок и карточки уменьшаем, ниже 1024 сетка в одну колонку.
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-services { padding: 70px 0 40px; }
  .s-services__title { font-size: 56px; }
  .s-services__grid { margin-top: 70px; width: min(1643px, 100% - 96px); }
  .s-services__card--main   { padding: 48.34px 48px 48px; }
  .s-services__card--ledger,
  .s-services__card--reg    { padding-left: 48px; padding-right: 48px; padding-bottom: 48px; }
  .s-services__card-title   { font-size: 30px; }
  .s-services__logos { margin-top: 48px; }
}

@media (max-width: 1023px) {
  .s-services__title { font-size: 44px; }
  .s-services__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 29px;
  }
  .s-services__card--main,
  .s-services__card--ledger,
  .s-services__card--reg { grid-column: 1; grid-row: auto; }
}

/* --- мобильный (макет 360) -------------------------------------------------
   Карточки во всю ширину, скруглены только сверху и наезжают друг на друга.
   Нахлёст настоящий: высоты карточек взяты из макета (510 / 306 / 255), а
   следующая подтянута отрицательным margin. Так предыдущая видна в вырезах
   под скруглёнными углами и под неё ложится тень — как нарисовано.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .s-services {
    padding: 52.17px 0 30px;
  }

  .s-services__title {
    max-width: none;
    font-size: 36px;
  }

  .s-services__grid {
    left: 0;
    display: block;
    width: 100%;
    margin-top: 63.43px;
  }

  .s-services__card {
    /* position нужен, чтобы карточка рисовалась целиком поверх предыдущей:
       без него текст предыдущей попадает поверх фона следующей */
    position: relative;
    padding-left: 32px;
    padding-right: 32px;
    border-radius: 30px 30px 0 0;
  }

  /* Ховера нет — первая карточка тёмная всегда, как в мобильном макете */
  .s-services__card--main {
    padding-top: 52.22px;
    padding-bottom: 146px;      /* высота карточки 510 по макету */
    background: var(--c-dark);
    color: var(--c-white);
  }

  .s-services__card--main .s-services__card-note { color: var(--c-blue-lt); }

  .s-services__card--ledger,
  .s-services__card--reg {
    padding-top: 54.62px;
    background: #ecf0f2;
    box-shadow: 0 -6px 8.9px rgba(11, 33, 46, .07);
  }

  /* нахлёст 60 и 40.81 — из макета (карточки на 1364 и 1629.19) */
  .s-services__card--ledger { margin-top: -60px;    padding-bottom: 111.35px; }
  .s-services__card--reg    { margin-top: -40.81px; padding-bottom: 58.32px; }

  .s-services__card-title { font-size: 24px; }

  /* В макете у первой карточки интерлиньяж 1.3, у остальных 1.1 */
  .s-services__card--ledger .s-services__card-title,
  .s-services__card--reg .s-services__card-title { line-height: 1.1; }

  .s-services__card-text { font-size: 12px; }

  .s-services__card--main .s-services__card-text   { margin-top: 16.09px; }
  /* 1.4 — так в макете, у соседних карточек 1.3 */
  .s-services__card--ledger .s-services__card-text { margin-top: 20.09px; line-height: 1.4; }
  .s-services__card--reg .s-services__card-text    { margin-top: 42.5px; }

  .s-services__card-note {
    margin-top: 12.3px;
    font-size: 16px;
  }

  .s-services__logos { margin-top: 36.39px; }

  /* Перенос перед «с налоговой» есть только в десктопном макете */
  .s-services__br { display: none; }
}


/* --- css/sections/marketplaces.css --- */
/* ==========================================================================
   Секция 3 — «Уделяйте бухгалтерии максимум 30 минут в месяц»
   + тёмная карточка «Специализируемся на маркетплейсах»
   Макет: десктоп 1920 (узлы 4203:305, 4203:417), мобильный 360 (4203:1057,
   4203:927)

   Отступы, как и в секции 2, пересчитаны из координат макета: там текст
   обрезан по капители, поэтому padding/margin меньше на полулидинг +
   (ascender − capHeight). Метрики Open Sans: ascender 1.06885em,
   capHeight 0.71387em.
   ========================================================================== */

.s-marketplaces {
  /* капитель заголовка — на 1885.2 макета, секция стартует на 1829 */
  padding: 41.31px 0 100px;
  background: var(--c-white);
}

/* --- заголовок ------------------------------------------------------------ */

.s-marketplaces__title {
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
}

.s-marketplaces__title span { color: #c8c8c8; }

/* Переносы внутри заголовка и заголовка карточки нужны только на мобильном */
.s-marketplaces__br { display: none; }

/* --- тёмная карточка ------------------------------------------------------
   1640x260 на 2288, поля 140/140. Паддинги сверху и снизу разные, потому что
   в макете они отмерены от капители и от базовой линии (60 и 60 «по-фигмовски»
   превращаются в 51.93 и 56.3 в CSS).
   -------------------------------------------------------------------------- */

.s-marketplaces__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(1640px, 100% - 96px);
  margin: 100.89px auto 0;
  padding: 51.93px 69px 56.3px 61px;
  border-radius: 30px;
  background: var(--c-dark);
  color: var(--c-white);
}

.s-marketplaces__body { width: 788px; }

.s-marketplaces__card-title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-marketplaces__card-text {
  max-width: 770px;
  margin-top: 28.99px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

.s-marketplaces__cta {
  /* В макете кнопка отцентрована по карточке, а текст — по своим паддингам.
     Из-за разницы верхнего и нижнего паддинга кнопку опускаем на 2.17px. */
  position: relative;
  top: 2.17px;
  flex: 0 0 auto;
  width: 264px;
  padding: 0;
}

/* --- планшет --------------------------------------------------------------
   Макета нет: до 1440 всё уменьшается, с 1024 кнопка уходит под текст.
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-marketplaces { padding: 40px 0 80px; }
  .s-marketplaces__title { font-size: 56px; }
  .s-marketplaces__card {
    width: min(1640px, 100% - 96px);
    margin-top: 70px;
    padding: 51.93px 48px 48px;
  }
  .s-marketplaces__body { width: auto; flex: 1 1 auto; }
  .s-marketplaces__card-title { font-size: 30px; }
}

@media (max-width: 1023px) {
  .s-marketplaces__title { font-size: 44px; }
  .s-marketplaces__card {
    display: block;
  }
  .s-marketplaces__cta {
    top: 0;
    margin-top: 40px;
  }
}

/* --- мобильный (макет 360) ------------------------------------------------- */

@media (max-width: 767px) {
  .s-marketplaces {
    padding: 20.85px 0 0;
  }

  .s-marketplaces__title {
    max-width: none;
    font-size: 36px;
  }

  /* Карточка во всю ширину, скруглена сверху, снизу встык со следующей секцией */
  .s-marketplaces__card {
    width: 100%;
    margin-top: 70.77px;
    padding: 54.62px 32px 60px;
    border-radius: 30px 30px 0 0;
  }

  .s-marketplaces__card-title { font-size: 24px; }

  .s-marketplaces__card-text {
    max-width: none;
    margin-top: 17.09px;
    font-size: 12px;
    line-height: 1.4;
  }

  .s-marketplaces__cta {
    top: 0;
    display: flex;
    width: 100%;
    height: 36px;
    margin-top: 38.09px;
    font-size: 10px;
  }

  /* Переносы «С вас» и «Специализируемся» есть только в мобильном макете */
  .s-marketplaces__br { display: inline; }
}


/* --- css/sections/plan.css --- */
/* ==========================================================================
   Секция 4 — «Комплексное бухгалтерское обслуживание»: аккордеон услуг
   Макет: десктоп 1920 (узел 4203:742), мобильный 360 (4203:934)

   Отступы пересчитаны из координат макета: в Figma текст обрезан по капители,
   поэтому padding/margin меньше на полулидинг + (ascender − capHeight).
   Метрики Open Sans: ascender 1.06885em, capHeight 0.71387em.

   Разделители в макете нулевой высоты (линия нарисована по границе блока),
   поэтому рисуем их псевдоэлементом — обычный border добавил бы высоту.
   ========================================================================== */

.s-plan {
  position: relative;
  overflow: hidden;
  padding: 100px 0 99.5px;
  background: var(--c-blue-lt);
  color: var(--c-text);
}

/* Декоративное свечение слева: рамка 669x529, картинка внутри крупнее
   и не обрезается рамкой — режет только overflow самой секции. Прижата к левому нижнему углу секции
   (на 1920 это те же 438 сверху: 438 + 529 = 967) на всех ширинах,
   как бы ни менялась высота секции. */
.s-plan__flower {
  /* Параллакс при прокрутке: main.js пишет --parallax от −0.5 до 0.5,
     сдвиг в пределах --parallax-range (±240, мобилка ±150). Картинка уходит
     под низ секции на 217 (мобилка 140); сильный сдвиг вверх бывает, только
     пока низ секции ещё за экраном, так что край картинки не виден */
  --parallax-range: 480px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 669px;
  height: 529px;
  pointer-events: none;
  transform: translate3d(0, calc(var(--parallax, 0) * var(--parallax-range)), 0);
  will-change: transform;
}

.s-plan__flower img {
  position: absolute;
  left: -69.04px;      /* −10.32% */
  top: -6.45px;        /* −1.22% */
  width: 752.22px;     /* 112.44% */
  height: 752.77px;    /* 142.3% */
  max-width: none;
}

.s-plan__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 160px;
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
}

/* --- левая колонка --------------------------------------------------------- */

/* Колонки сжимаются пропорционально: между 1440 и 1920 жёсткие 600/880 не влезают */
.s-plan__aside { flex: 0 1 600px; min-width: 0; }

.s-plan__title {
  margin-top: -8.066px;   /* капитель заголовка — на уровне первого разделителя */
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-plan__note {
  margin-top: 23.4px;
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
}

/* Логотипы в макете стоят на 680.3 — это gap 439 от текстового блока.
   Абсолютом, чтобы не тянуть колонку и не мешать порядку на мобильном. */
.s-plan__logos {
  position: absolute;
  left: 0;
  top: 581.3px;
}

/* Без логотипов (companies.html). В WP — галочка «Показывать иконки
   маркетплейсов» в настройках блока: снята → класс на секции. */
.s-plan--no-logos .s-plan__logos { display: none; }

/* --- аккордеон ------------------------------------------------------------- */

.s-plan__list {
  position: relative;
  flex: 1 1 880px;
  min-width: 0;
  /* Высота из макета: секция не должна прыгать при переключении пунктов.
     Когда придут настоящие ответы разной длины — пересчитать по самому длинному. */
  min-height: 667px;
}

.s-plan__item {
  position: relative;
  padding: 30px 0;
}

.s-plan__item::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-text);
}

.s-plan__item:last-child { padding-bottom: 0; }

.s-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.is-open > .s-plan__head { cursor: default; }

.s-plan__head-title {
  /* Отрицательные поля срезают строку до обрезанной по капители коробки —
     тогда она центруется в строке ровно как в макете */
  margin: -5.185px 0 -4.193px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.is-open .s-plan__head-title { max-width: 760px; }

/* Плюс: две линии 1px, как в макете (узел 4203:830) */
.s-plan__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.s-plan__icon::before,
.s-plan__icon::after {
  content: '';
  position: absolute;
  background: var(--c-text);
}

.s-plan__icon::before { top: 7.5px; left: 0; width: 16px; height: 1px; }
.s-plan__icon::after  { top: 0; left: 7.5px; width: 1px; height: 16px; }

/* У раскрытого пункта в макете иконки нет — закрыть его нельзя, можно
   только открыть соседний */
.is-open .s-plan__icon { display: none; }

.s-plan__panel {
  max-width: 720px;
  /* Высота ответа зафиксирована по макету (7 строк с отступами 14).
     Ответ длиннее — скроллится внутри, короче — место всё равно занято.
     Поэтому секция не меняет высоту, каким бы ни был текст. */
  height: 229.6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 19.813px;
  margin-bottom: -4.193px;   /* убираем «хвост» строки под базовой линией */
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 57, 58, .35) transparent;
  transition: height .4s ease, margin .4s ease, opacity .4s ease, visibility 0s;
}

.s-plan__panel::-webkit-scrollbar { width: 4px; }
.s-plan__panel::-webkit-scrollbar-track { background: transparent; }

.s-plan__panel::-webkit-scrollbar-thumb {
  background: rgba(57, 57, 58, .35);
  border-radius: 2px;
}

/* Закрытый ответ схлопывается плавно; высота открытого — из правил выше */
.js-accordion-item:not(.is-open) > .s-plan__panel {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, .4s;
}

.s-plan__panel p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

.s-plan__panel p + p { margin-top: 14px; }

/* --- нижняя черта во всю ширину контента ----------------------------------- */

.s-plan__rule {
  position: relative;
  z-index: 1;
  width: min(1640px, 100% - 96px);
  height: 1px;
  margin: 99.5px auto 0;
  background: var(--c-text);
}

/* --- планшет ---------------------------------------------------------------
   Макета нет: колонки сужаются, ниже 1024 всё в одну колонку.
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-plan { padding: 80px 0 79.5px; }
  .s-plan__inner { gap: 60px; width: min(1640px, 100% - 96px); }
  .s-plan__rule { width: min(1640px, 100% - 96px); margin-top: 79.5px; }
  .s-plan__aside { flex: 0 1 480px; }
  .s-plan__title { font-size: 30px; }
  .s-plan__note { font-size: 18px; }

  .s-plan__logos { top: auto; bottom: 0; }
  .s-plan__flower { width: 500px; height: 500px; }
}

@media (max-width: 1023px) {
  .s-plan__inner { display: block; }
  .s-plan__list { margin-top: 60px; min-height: 0; }
  .s-plan__logos { position: static; margin-top: 60px; }
}

/* --- мобильный (макет 360) -------------------------------------------------
   Порядок другой: заголовок, подпись, аккордеон, логотипы. В макете тут
   стоит текст-заглушка из другого проекта — берём из него только метрики.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .s-plan { padding: 60px 0; }

  .s-plan__inner {
    display: block;
    width: calc(100% - 64px);
  }

  .s-plan__title {
    margin-top: -5.378px;
    font-size: 24px;
  }

  .s-plan__note {
    margin-top: 20.29px;
    font-size: 12px;
    line-height: 1.3;
  }

  .s-plan__list {
    margin-top: 44.69px;
    min-height: 0;
  }

  /* Разделители на мобильном тоньше — 0.5px */
  .s-plan__item::before { top: -0.25px; height: 0.5px; }

  .s-plan__item { padding: 20px 0; }
  .s-plan__item:last-child { padding-bottom: 20px; }

  /* В мобильном макете список закрыт снизу такой же чертой */
  .s-plan__list::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25px;
    height: 0.5px;
    background: var(--c-text);
  }

  /* На мобильном заголовок «Консультации экспертов…» встаёт в две строки.
     У закрытого пункта высоту строки задаёт иконка (16px), у раскрытого её
     нет — и высота секции гуляла бы на 7px. Держим ту же нижнюю границу. */
  .s-plan__head { gap: 35px; min-height: 16px; }

  .s-plan__head-title {
    margin: -3.889px 0 -3.145px;
    font-size: 12px;
  }

  .is-open .s-plan__head-title { max-width: none; }

  .s-plan__panel {
    max-width: none;
    height: 245px;   /* высота первого ответа на 360 */
    margin-top: 15.512px;
    margin-bottom: -3.745px;
  }

  .s-plan__panel p { font-size: 12px; line-height: 1.4; }
  .s-plan__panel p + p { margin-top: 10px; }

  .s-plan__logos { position: static; margin-top: 40px; }

  /* Нижней черты во всю ширину в мобильном макете нет */
  .s-plan__rule { display: none; }

  .s-plan__flower {
    --parallax-range: 300px;
    left: 72px;
    width: 288px;
    height: 340px;
  }

  .s-plan__flower img {
    left: -44.38px;    /* −15.41% */
    top: -4.15px;      /* −1.22% */
    width: 483.49px;   /* 167.88% */
    height: 483.82px;  /* 142.3% */
  }
}


/* --- css/sections/team.css --- */
/* ==========================================================================
   Секция 5 — «Команда»: 4 карточки с фото
   Макет: десктоп 1920 (узел 4203:686, Y 3715), мобильный 360 (4203:1142, Y 3574)

   Заголовка у секции нет — только ряд карточек 4x300 с гапом 60, по центру
   страницы (1380 при 1920).

   Маска фото в Figma (Rectangle 1069) — обычный круг 300x300, поэтому
   border-radius: 50% и подложка #d9d9d9 под вырезанным по контуру портретом.
   Фото спозиционированы в процентах от круга: мобильный макет — это ровно
   тот же кадр в масштабе 2/3, так что одни и те же проценты годятся везде.

   Отступы пересчитаны из координат: в Figma текст обрезан по капители.
   Метрики Open Sans: ascender 1.06885em, capHeight 0.71387em.
   20/1.3: смещение капители 6.481, хвост под базовой линией 5.241.
   12/1.4: смещение 4.489, хвост 3.745.
   ========================================================================== */

.s-team {
  /* низ секции 4 на 3615, карточки на 3715 */
  padding: 100px 0 99.45px;
  color: var(--c-text);
}

/* companies.html: ряд под текстом «Аутсорсинг» — 60 от рамки текста 142
   (64.6 от базовой линии семи строк по 21), снизу отступ даёт карточка «Проверим…» */
.s-team--outsource { padding: 64.6px 0 0; }

/* registration.html: ряд на 60 ниже рамки заголовка 146 (130.6 по капители),
   через 100 после ряда — черта над преимуществами */
.s-team--reg { padding: 75.4px 0 99.45px; }

.s-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  width: min(1380px, 100%);
  margin: 0 auto;
  list-style: none;
}

.s-team__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Вся карточка — кнопка, открывает модалку сотрудника (team-modal.css) */
.s-team__open {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.s-team__open > span { display: block; }

/* Ховер — фото бледнеет, как иконки соцсетей в футере */
.s-team__photo { transition: opacity .2s ease; }

@media (hover: hover) {
  .s-team__open:hover .s-team__photo { opacity: .7; }
}

/* Круг-подложка из макета; портрет крупнее круга и им обрезается */
.s-team__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: #d9d9d9;
}

.s-team__photo img {
  position: absolute;
  max-width: none;
}

.s-team__photo--savinova img    { left: 3%;        top: 0.6667%; width: 89.6667%; height: 120%; }
.s-team__photo--urchik img      { left: 7.6667%;   top: 4%;      width: 82.3333%; height: 110.6667%; }
.s-team__photo--penkovskaya img { left: -10%;      top: 6.6667%; width: 120%;     height: 110.3333%; }
.s-team__photo--trus img        { left: 9.3333%;   top: 3%;      width: 81.6667%; height: 109.3333%; }

.s-team__name {
  margin-top: 43.519px;   /* 50 − 6.481 */
  font-size: 20px;
  line-height: 1.3;
  width: 100%;
}

.s-team__role {
  margin-top: 8.277px;    /* 20 − 5.241 − 6.481 */
  margin-bottom: -5.241px;
  width: 100%;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: rgba(57, 57, 58, 0.3);
}

/* --- Планшет: жёсткие 1380 не влезают, колонки сжимаются ---------------- */

@media (max-width: 1439px) {
  .s-team__grid { gap: 40px; }

  .s-team__name,
  .s-team__role { font-size: 18px; }

  .s-team__name { margin-top: 44.167px; }  /* 50 − 5.833 */
  .s-team__role { margin-top: 9.45px; margin-bottom: -4.717px; }
}

@media (max-width: 1023px) {
  .s-team { padding: 80px 0; }
  .s-team--outsource { padding: 60px 0 0; }

  .s-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
    width: min(700px, 100%);
  }
}

/* --- Мобильный 360 ------------------------------------------------------ */

@media (max-width: 767px) {
  .s-team { padding: 60px 0 60px; }
  .s-team--outsource { padding: 66.43px 0 0; }   /* 60 от рамки текста 202 (по строкам 195.57) */
  .s-team--reg { padding: 70.3px 0 0; }          /* 60 от рамки заголовка 116 (по строкам 40 — 105.7) */

  .s-team__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    width: min(280px, 100%);
  }

  /* В макете карточка ровно 280: фото 200 + 30 + строка имени + 10 + должность */
  .s-team__card { height: 280px; }

  .s-team__photo { width: 200px; }

  .s-team__name {
    margin-top: 25.511px;  /* 30 − 4.489 */
    font-size: 12px;
    line-height: 1.4;
  }

  .s-team__role {
    margin-top: 5.2px;     /* капитель должности на 22 ниже капители имени */
    margin-bottom: -1.111px;
    font-size: 12px;
    line-height: 1.4;
  }
}


/* --- css/sections/team-modal.css --- */
/* ==========================================================================
   Модалка сотрудника (секция 5 «Команда»)
   Макет: десктоп 1920x1171 — 2454:1499 / 1691 / 1769 / 1846,
          мобильный 360 — 2520:2974 / 3150 / 3231 / 3332.

   Нативный <dialog> во весь экран. Десктоп: слева панель 960 с лентой
   и логотипом, справа белая колонка, она и скроллится. Мобильный: одна
   колонка, внизу лента и логотип.

   Строки в макете идут через целые пиксели: 21 у текста 16/1.3 и 17 у 12/1.4
   (проверено по всем четырём эталонам — с 20.8 и 16.8 текст к концу уезжает
   на 3–5px). Поэтому line-height здесь 21px и 17px.

   Отступы сняты с эталонного рендера, от капители до капители: высоты
   текстовых блоков в Figma больше расчётных, и следующий блок стоит
   по ним, а не по тексту. У разных людей в макете эти расстояния гуляют
   на 1–3px — взято одно значение на всех.
   Десктоп:  фото 288 → имя 50, имя → должность 50, должность → заголовок 56,
             заголовок → текст 46, последняя строка текста → заголовок 56.
   Мобильный: фото → имя 40, имя → должность 39, последняя строка
             должности → заголовок 42, заголовок → текст 31, текст → заголовок 43,
             базовая линия последней строки → логотип 67.4.
   Смещение капители:  36/1.1 — 8.066   16/21 — 5.285
                       20/1.1 — 4.481   12/17 — 4.589 (хвост 3.845)
   ========================================================================== */

html.is-modal-open { overflow: hidden; }

.m-team {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--c-text);
  background: var(--c-white);
}

.m-team[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: m-team-fade .25s ease;
}

.m-team::backdrop { background: transparent; }

@keyframes m-team-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .m-team[open] { animation: none; }
}

/* Крестик 60 на (1820, 40) — прижат к углу экрана, не скроллится */
.m-team__close {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 2;
  width: 60px;
  height: 60px;
  background: url('../img/modal-close.svg') 0 0 / 100% 100% no-repeat;
}

/* Левая панель: лента запечена в картинку 960x1171 (повёрнутый A4 из макета),
   логотип 369x128.8 по центру панели */
.m-team__art {
  position: relative;
  background: url('../img/team-modal-art.webp') center / cover no-repeat var(--c-blue-lt);
}

.m-team__art::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 369.1px;
  height: 128.76px;
  margin: -64.38px 0 0 -184.55px;
  background: url('../img/logo-dark.svg') 0 0 / 100% 100% no-repeat;
}

/* Правая колонка: фото на 138, текст с 1140 (180 от панели), ширина 600 */
.m-team__body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 138px 60px 100px clamp(60px, 9.375vw, 180px);
}

.m-team__inner {
  position: relative;
  z-index: 1;
  flex: none;
  max-width: 600px;
}

.m-team__photo { width: 150px; }

.m-team__name {
  margin-top: 41.934px;   /* 50 − 8.066 */
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.m-team__role {
  margin-top: 13.181px;   /* капитель на 50 ниже капители имени */
  font-style: italic;
  font-size: 16px;
  line-height: 21px;
  color: rgba(57, 57, 58, 0.3);
}

.m-team__h {
  margin-top: 35px;       /* 56 − строка 21 */
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
}

.m-team__text {
  margin-top: 25px;       /* 46 − 21 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
}

/* Абзацы через пустую строку, как в макете */
.m-team__text p + p { margin-top: 21px; }

/* Лента и логотип внизу — только на мобильном */
.m-team__foot { display: none; }

/* --- Планшет ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .m-team[open] { display: block; }
  .m-team__art { display: none; }
  .m-team__body { height: 100%; padding: 100px 48px 80px; }
}

/* --- Мобильный 360 ------------------------------------------------------- */

@media (max-width: 767px) {
  /* Крестик 30 на (310, 20) */
  .m-team__close {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background-image: url('../img/modal-close-m.svg');
  }

  /* Колонка 296 с полями 32, фото 50 на 40 */
  .m-team__body { padding: 40px 32px 0; }

  .m-team__photo { width: 50px; }

  .m-team__name {
    margin-top: 35.519px;  /* 40 − 4.481 */
    font-size: 20px;
  }

  .m-team__role {
    margin-top: 16.892px;  /* капитель на 39 ниже капители имени */
    font-size: 12px;
    line-height: 17px;
  }

  .m-team__h {
    margin-top: 25px;      /* 42 − 17 */
    font-size: 12px;
    line-height: 17px;
  }

  .m-team__text {
    margin-top: 14px;      /* 31 − 17 */
    font-size: 12px;
    line-height: 17px;
  }

  .m-team__text p + p { margin-top: 17px; }

  .m-team__text + .m-team__h { margin-top: 26px; }  /* 43 − 17 */

  /* Логотип 80x27.9 на 67.4 ниже последней строки (так у самого длинного
     текста — Савиновой, её экран 1036) и в 106 от низа. Короткий текст —
     логотип прижат к низу экрана. Лента 360x383 уходит под текст. */
  .m-team__foot {
    display: block;
    position: relative;
    flex: none;
    margin-top: auto;
    padding: 63.555px 0 106.1px;  /* 67.4 − хвост строки 3.845 */
  }

  .m-team__foot::before {
    content: '';
    position: absolute;
    left: -32px;
    right: -32px;
    bottom: 0;
    aspect-ratio: 360 / 383;
    background: url('../img/team-modal-ribbon-m.webp') 0 0 / 100% 100% no-repeat;
  }

  .m-team__foot::after {
    content: '';
    position: relative;
    display: block;
    width: 80px;
    height: 27.9px;
    background: url('../img/logo-dark.svg') 0 0 / 100% 100% no-repeat;
  }
}


/* --- css/sections/about.css --- */
/* ==========================================================================
   Секция 6 — «30+ лет помогаем расти бизнесу» / «Обслуживаем без перебоев»
   Макет: десктоп 1920 (узел 4203:425, Y 4265), мобильный 360 (4203:1175, Y 4874)

   Две колонки по 770 с гапом 100 (140..1780). Колонки независимы по высоте:
   левая — фото офиса, «Обслуживаем без перебоев», волна; правая — «30+»,
   текст, логотип EMG, фото с ноутбуком. На мобильном порядок другой —
   колонки разворачиваются через display: contents и order.

   Отступы пересчитаны из координат: в Figma текст обрезан по капители.
   Метрики Open Sans: ascender 1.06885em, descender 0.29297em, capHeight 0.71387em.
   Смещение капители / хвост под базовой линией:
     16/1.3 — 5.185 / 4.193      12/1.4 — 4.489 / 3.745
     36/1.3 — 11.666 / 9.434     24/1.1 — 5.379 / 3.888
     «30+» набран с line-height: 0 и не раздувает строку — так Figma ставит
     вторую строку через обычные 1.1 от первой (иначе на мобильном +3.9px).
     Строка 36/1.1: базовая линия на 33.766 от верха, капитель 72 на −17.63, хвост 5.834
     Строка 24/1.1: базовая линия на 22.511, капитель 48 на −11.76, хвост 3.889
   ========================================================================== */

.s-about {
  /* капитель заголовка следующей секции — на 5594, её верх без паддинга */
  padding-bottom: 83.866px;
  color: var(--c-text);
}

.s-about__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 100px;
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
}

.s-about__col {
  display: flex;
  flex-direction: column;
  flex: 0 1 770px;
  min-width: 0;
}

/* Фото: маска в Figma — скруглённый квадрат 770 с r30. Кадры уже обрезаны
   до видимой области, так что это обычная квадратная картинка. */
.s-about__photo {
  width: 100%;
  height: auto;   /* иначе атрибут height побеждает aspect-ratio */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 30px;
}

.s-about__title,
.s-about__heading {
  font-family: var(--f-body);
  font-weight: 700;
}

/* --- левая колонка ------------------------------------------------------- */

.s-about__title {
  margin: 48.334px 0 -9.434px;   /* капитель на 60 ниже фото */
  font-size: 36px;
  line-height: 1.3;
}

.s-about__text {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

.s-about__service .s-about__text {
  margin: 34.815px 0 -4.193px;   /* 40 − 5.185, хвост заголовка уже снят */
}

/* Волна: 790.287x82, на 20px шире колонки — так в макете */
.s-about__wave {
  width: calc(100% + 20.287px);
  max-width: none;
  height: auto;
  aspect-ratio: 4096 / 425;
  margin-top: 175.5px;
}

/* --- правая колонка ------------------------------------------------------ */

/* «30+» 72px в строке 36/1.1. Верх колонки в макете на 87 ниже левой,
   это капитель «30+»: 87 + 17.63 */
.s-about__heading {
  margin: 104.63px 0 -5.834px;
  font-size: 36px;
  line-height: 1.1;
}

.s-about__num {
  margin-right: 9.36px;   /* пробел после «30+» в макете набран кеглем 72 */
  font-size: 72px;
  line-height: 0;
}

.s-about__history .s-about__text { margin-top: 32.415px; }   /* 37.6 − 5.185 */
.s-about__history .s-about__text + .s-about__text { margin-top: 20.8px; }   /* пустая строка */
.s-about__history .s-about__text:last-of-type { margin-bottom: -4.193px; }

.s-about__logo {
  width: 140.953px;
  height: auto;
  margin-top: 57.4px;
}

.s-about__photo--laptop { margin-top: 69px; }

/* Figma перенесла «малого» на новую строку, хотя оно влезало, — перенос
   не по алгоритму. Так и на десктопе (колонка ровно 770, от 1920), и на
   мобильном; на промежуточных ширинах колонка другая и перенос не нужен. */
@media (min-width: 768px) and (max-width: 1919px) {
  .s-about__br { display: none; }
}

/* --- планшет ------------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-about__inner {
    gap: 60px;
    width: min(1640px, 100% - 96px);
  }

  .s-about__wave { width: 100%; }
}

/* --- одна колонка: порядок как в мобильном макете ------------------------ */

@media (max-width: 1023px) {
  .s-about__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(620px, 100% - 96px);
  }

  .s-about__col { display: contents; }

  .s-about__wave    { order: 1; margin-top: 0; }
  .s-about__photo--office { order: 2; margin-top: 60px; }
  .s-about__history { order: 3; }
  .s-about__photo--laptop { order: 4; margin-top: 60px; }
  .s-about__service { order: 5; }

  .s-about__heading { margin-top: 77.63px; }   /* капитель на 60 ниже фото */
}

/* --- мобильный 360: блок 296 по центру ----------------------------------- */

@media (max-width: 767px) {
  .s-about { padding-bottom: 49.83px; }   /* капитель следующего заголовка на 6190 */

  .s-about__inner { width: min(296px, 100% - 48px); }

  .s-about__wave { height: 31px; object-fit: cover; }

  .s-about__photo--office { margin-top: 40px; }
  .s-about__photo--laptop { margin-top: 40px; }

  .s-about__heading {
    margin: 51.76px 0 -3.889px;   /* 40 + 11.76 */
    font-size: 24px;
  }

  .s-about__num {
    margin-right: 0;
    font-size: 48px;
  }

  .s-about__text { font-size: 12px; line-height: 1.4; }

  .s-about__history .s-about__text { margin-top: 20.84px; }   /* 25.33 − 4.489 */
  .s-about__history .s-about__text + .s-about__text { margin-top: 16.8px; }
  .s-about__history .s-about__text:last-of-type { margin-bottom: -3.745px; }

  /* В макете у блока текста задана высота 135 при 143 фактических, поэтому
     логотип стоит на 12 ниже последней строки, а не на 20. Воспроизведено
     как в макете, вопрос дизайнеру открыт. */
  .s-about__logo { width: 80px; margin-top: 12.03px; }

  .s-about__title {
    margin: 34.62px 0 -3.888px;   /* 40 − 5.379 */
    font-size: 24px;
    line-height: 1.1;
  }

  .s-about__service .s-about__text { margin: 20.98px 0 -3.745px; }
}


/* --- css/sections/steps.css --- */
/* ==========================================================================
   Секция 7 — «Забудьте про бухучёт и сфокусируйтесь на важном»: шаги со скроллом
   Макет: десктоп 1920 (заголовок 4203:424 на 5594, блок 4203:478 на 5842),
   кадры шагов 2–5 — узлы 2204:45, 2204:62, 2204:75, 2204:88;
   мобильный 360 (заголовок 4203:1223 на 6190, блок 4203:1224 на 6403).

   ТЗ из макета: «скролл блока до 6-го, далее спускается вниз по странице».
   Сцена (карточка + панель) прилипает к центру экрана, пока страница
   прокручивает трек; прогресс трека переключает шаги (main.js → scrollSteps).
   Высоту трека и сцены main.js пишет в --steps и --stage-h.

   Отступы пересчитаны из координат: в Figma текст обрезан по капители.
   Метрики Open Sans: ascender 1.06885em, capHeight 0.71387em.
   Смещение капители / хвост:  72/1.1 — 16.134 / 11.668   36/1.1 — 8.066 / 5.834
                               20/1.1 — 4.481 / 3.241     16/1.3 — 5.185 / 4.193
                               12/1.4 — 4.489 / 3.745
   ========================================================================== */

.s-steps {
  --stage-h: 500px;      /* уточняет main.js по факту */
  --step-scroll: 45vh;   /* сколько прокрутки на один переход между шагами */

  /* капитель «Рассчитать стоимость обслуживания» на 6442, её верх без паддинга */
  padding-bottom: 81.866px;
  color: var(--c-text);
}

.s-steps__title {
  margin: 0 0 -11.668px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
}

.s-steps__title-muted { color: #c8c8c8; }

/* Блок в макете на 5844: от базовой линии заголовка (5724.6) — 119.4 */
.s-steps__track {
  margin-top: 119.4px;
  height: calc(var(--stage-h) + (var(--steps, 1) - 1) * var(--step-scroll));
}

/* Сцена прижата влево, как в макете: 560 + 30 + 916 = 1506 из 1640 */
.s-steps__stage {
  position: sticky;
  top: max(0px, calc(50vh - var(--stage-h) / 2));
  display: flex;
  gap: 30px;
  width: min(1640px, 100% - 96px);
  height: 500px;
  margin: 0 auto;
}

/* --- карточка с шаром ---------------------------------------------------- */

.s-steps__card {
  position: relative;
  flex: 0 1 560px;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--c-blue-lt);
}

/* Шар 362.939x360.06 на 99 от левого края карточки; верх — по шагу (--ball,
   в пикселях макета от верха карточки 500). В процентах — чтобы та же
   раскладка работала на мобильной карточке 296x264.29 (масштаб 0.5286). */
.s-steps__ball {
  position: absolute;
  left: 17.679%;
  top: calc(var(--ball, 288) / 500 * 100%);
  width: 64.811%;
  max-width: none;
  height: auto;
  aspect-ratio: 362.939 / 360.06;
  transition: top .8s cubic-bezier(.22, .61, .36, 1);
  /* шар можно тянуть мышью и пальцем (main.js → scrollSteps) */
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.s-steps__card.is-dragging { cursor: grabbing; }

.s-steps__card.is-dragging .s-steps__ball {
  cursor: grabbing;
  transition: none;
}

/* --- панель: линии, счётчик, текст шага, кнопка -------------------------- */

.s-steps__panel {
  position: relative;
  flex: 0 1 916px;
  min-width: 0;
}

/* Линии нулевой высоты по верху и низу панели, #c8c8c8 */
.s-steps__panel::before,
.s-steps__panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #c8c8c8;
}
.s-steps__panel::before { top: -0.5px; }
.s-steps__panel::after  { bottom: -0.5px; }

.s-steps__counter {
  position: absolute;
  left: 2px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 16px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

.s-steps__counter img { width: 16px; height: 16px; }

/* Цифра центруется в строке 16 обрезанной коробкой, как в Figma */
.s-steps__num { margin: -5.185px 0 -4.193px; }

/* Вертикальная черта 40px на x 800 (панель начинается на 730) */
.s-steps__counter::after {
  content: '';
  position: absolute;
  left: 67.5px;
  top: -20px;
  width: 1px;
  height: 40px;
  background: #c8c8c8;
}

/* Текст шага: колонка 610 на 900 (170 от панели), капитель заголовка на 60.
   Все шаги в одной ячейке грида — высота не прыгает при переключении. */
.s-steps__list {
  position: absolute;
  left: 170px;
  right: 0;
  top: 60px;
  display: grid;
  max-width: 610px;
}

.s-steps__item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}

.s-steps__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s ease .1s, transform .4s ease .1s, visibility 0s;
}

.s-steps__item-title {
  margin: -8.066px 0 -5.834px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-steps__item-text {
  margin-top: 34.815px;   /* 40 − 5.185 */
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

/* Кнопка стоит на месте при любом шаге: в кадрах 2–5 — 304 от капители
   заголовка. Коробка в макете 51.42 при наших 50 — центры совпадают. */
.s-steps__cta {
  position: absolute;
  left: 170px;
  top: 364.71px;
  width: 264px;
}

@media (prefers-reduced-motion: reduce) {
  .s-steps__ball,
  .s-steps__item,
  .s-steps__item.is-active { transition: none; }
}

/* --- планшет: карточка над панелью --------------------------------------- */

@media (max-width: 1439px) {
  .s-steps__title { font-size: 56px; }
}

@media (max-width: 1023px) {
  .s-steps__stage {
    flex-direction: column;
    gap: 40px;
    width: min(620px, 100% - 96px);
    height: auto;
  }

  .s-steps__card {
    flex: none;
    aspect-ratio: 560 / 500;
  }

  .s-steps__panel {
    flex: none;
    height: 440px;
  }

  .s-steps__list { left: 100px; }
  .s-steps__cta { left: 100px; }
}

/* --- мобильный 360 ------------------------------------------------------- */

@media (max-width: 767px) {
  .s-steps {
    --stage-h: 660.29px;
    padding-bottom: 51.64px;   /* капитель следующего заголовка на 7123 */
  }

  .s-steps__title {
    margin-bottom: -5.834px;
    font-size: 36px;
  }

  /* блок на 6403, базовая линия заголовка на 6334.5 */
  .s-steps__track { margin-top: 68.5px; }

  .s-steps__stage { width: min(312px, 100% - 48px); }

  .s-steps__card {
    margin: 0 8px;
    border-radius: 10.571px;
  }

  .s-steps__panel { height: 356px; }

  .s-steps__counter {
    left: 5px;
    gap: 4px;
    height: 12px;
    font-size: 12px;
  }

  .s-steps__counter img { width: 12px; height: 12px; }

  .s-steps__num { margin: -3.889px 0 -3.145px; }

  .s-steps__counter::after { left: 44.5px; }   /* черта на x 50 */

  .s-steps__list {
    left: 73px;
    top: 20px;
    max-width: 234px;
  }

  .s-steps__item-title {
    margin: -4.481px 0 -3.241px;
    font-size: 20px;
  }

  /* в макете от капители заголовка до капители текста 84 при трёх строках */
  .s-steps__item-text {
    margin-top: 21.231px;
    font-size: 12px;
    line-height: 1.4;
  }

  .s-steps__cta {
    left: 8px;
    right: 8px;
    top: 260px;
    width: auto;
    height: 36px;
    padding: 0;
    font-size: 10px;
  }
}


/* --- css/sections/calc.css --- */
/* ==========================================================================
   Секция 8 — «Рассчитать стоимость обслуживания»: калькулятор
   Макет: десктоп 1920 (4203:521 на 6442, блок 1640 на x 96),
   мобильный 360 (4203:1244 на 7123). Цены — прайс-лист, узел 2437:87.

   ТЗ из макета: «в этом блоке пересчитывается стоимость» — цена в карточке
   обновляется сразу при изменении полей (main.js → calculator).

   Отступы пересчитаны из координат: в Figma текст обрезан по капители.
   Смещение капители / хвост:  72/1.1 — 16.134 / 11.668   36/1.1 — 8.066 / 5.834
                               20/1.3 — 6.481 / 5.241     16/1.3 — 5.185 / 4.193
                               20/1.1 — 4.481 / 3.241     12/1.3 — 3.889 / 3.145
   Montserrat 40/1.1 (цена на мобилке) — 8.34 / 7.66
   ========================================================================== */

.s-calc {
  /* до футера на 7276 — 180 от низа блока (7096) */
  padding-bottom: 180px;
  color: var(--c-text);
}

/* Блок в макете 1640 от левого края контейнера, а не по центру страницы */
.s-calc__inner { max-width: 1640px; }

/* На странице селлеров (market.html) блок в макете по центру: 140..1780 */
.s-calc--center .s-calc__inner { margin: 0 auto; }

/* companies.html: после «Как начать» (черта на 5485, капитель на 5585),
   снизу черта блока «Аутсорсинг» на 100 ниже карточки */
.s-calc--companies { padding: 83.866px 0 100px; }

.s-calc__title {
  margin: 0 0 -11.668px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
}

.s-calc__title-muted { color: #c8c8c8; }

/* Капитель первой подписи на 206 от капители заголовка, базовая линия
   заголовка на 130.6 */
.s-calc__body {
  display: flex;
  align-items: center;
  gap: 86px;
  margin-top: 75.401px;
}

/* --- форма: две колонки по 300, поля идут сверху вниз -------------------- */

.s-calc__form {
  flex: 0 0 680px;
  display: grid;
  grid-template-columns: 300px 300px;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 40px 80px;
}

/* Высота поля 82: подпись 11.42 (по капители) + 20.58 + поле 50 */
.s-calc__label {
  display: block;
  margin: -5.185px 0 -4.193px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.s-calc__control {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 20.578px;
  /* капитель по центру поля (19.29), как центрует Figma */
  padding: 14.105px 30px 15.095px;
  border: 0;
  border-radius: 30px;
  background: rgba(213, 228, 234, .3);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-text);
  outline: none;
  transition: box-shadow .2s ease;
}

.s-calc__control::placeholder { color: var(--c-text); opacity: 1; }

/* Патент у ООО не считается — поле неактивно */
.s-calc__control:disabled { opacity: .4; cursor: not-allowed; }

.s-calc__control:focus-visible { box-shadow: inset 0 0 0 1px var(--c-text); }

/* Стрелка 12x7 на x 263 от края поля (svg с учётом обводки — 14x9.54 на 262) */
.s-calc__control--select {
  padding-right: 50px;
  appearance: none;
  background: rgba(213, 228, 234, .3) url('../img/select-arrow.svg') no-repeat right 24px top 21px / 14px 9.537px;
  cursor: pointer;
}

/* Правая колонка: импорт, документы, выручка, сотрудники */
.s-calc__field--right { grid-column: 2; }

/* --- карточка с ценой ---------------------------------------------------- */

/* Высота 447.3 (60 + заголовок + 322), по центру строки 448.
   Поля по бокам 30 — на 1440 карточка 563, заголовку в строку нужно 493 */
.s-calc__card {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  padding: 51.934px 30px 64.022px;
  border-radius: 30px;
  background: var(--c-dark);
  color: var(--c-white);
  text-align: center;
}

.s-calc__card-title {
  margin-bottom: -5.834px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

/* Капитель цены на 196 от верха карточки */
.s-calc__price {
  display: block;
  margin: 54.567px 0 -11.668px;
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  white-space: nowrap;
}

/* Капитель подписи на 317 */
.s-calc__note {
  margin: 63.12px 0 -5.241px;
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
}

.s-calc__note a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}

.s-calc__note a:hover { text-decoration-color: currentColor; }

/* --- планшет: форма, под ней карточка ------------------------------------ */

@media (max-width: 1439px) {
  .s-calc__title { font-size: 56px; }

  .s-calc__body {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }

  .s-calc__form { flex: none; width: min(680px, 100%); }

  .s-calc__card {
    order: 0;
    flex: none;
    width: min(680px, 100%);
  }
}

/* --- мобильный 360 ------------------------------------------------------- */

@media (max-width: 767px) {
  /* до футера на 8359 — 60 от низа блока (8299) */
  .s-calc { padding-bottom: 60px; }
  .s-calc--companies { padding: 51.934px 0 0; }

  .s-calc__title {
    margin-bottom: -5.834px;
    font-size: 36px;
  }

  /* форма на 154 от капители заголовка, базовая линия третьей строки на 104.9 */
  .s-calc__body {
    gap: 40px;
    margin-top: 49.1px;
  }

  .s-calc__form {
    width: auto;
    align-self: stretch;
    margin: 0 8px;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 20px;
  }

  .s-calc__field--right { grid-area: auto; }

  /* поле 72: подпись 8.57 + 12.43 + 51 */
  .s-calc__label {
    margin: -3.889px 0 -3.145px;
    font-size: 12px;
  }

  /* в макете капитель текста на 20 от верха поля, не по центру */
  .s-calc__control {
    height: 51px;
    margin-top: 12.433px;
    padding: 16.111px 30px 19.289px;
    font-size: 12px;
  }

  .s-calc__control--select {
    padding-right: 46px;
    background-position: right 20px top 21px;
  }

  .s-calc__card {
    width: 100%;
    padding: 35.519px 40px 41.634px;
    border-radius: 24px;
  }

  .s-calc__card-title {
    margin-bottom: -3.241px;
    font-size: 20px;
  }

  /* в мобильном макете цена набрана Montserrat, блок 32 при капители 28 */
  .s-calc__price {
    margin: 21.66px 0 -7.66px;
    font-family: var(--f-head);
    font-size: 40px;
  }

  .s-calc__note {
    max-width: 222px;
    margin: 30.111px auto -3.145px;
    font-size: 12px;
  }
}


/* --- css/sections/footer.css --- */
/* ==========================================================================
   Секция 9 — футер: «Частые вопросы», контакты, текст про куки
   Макет: десктоп 1920 (4203:591 на 7276), мобильный 360 (4203:1286 на 8359).

   ТЗ из макета: «тут раскрывается список так / плюс пропадает» — открыт
   ровно один вопрос, у раскрытого нет плюса (тот же аккордеон, что в секции 4,
   классы js-accordion*).

   Отступы пересчитаны из координат: в Figma текст обрезан по капители.
   Смещение капители / хвост:  36/1.1 — 8.066 / 5.834   24/1.1 — 5.378 / 3.89
                               16/1.3 — 5.185 / 4.193   12/1.3 — 3.889 / 3.145
                               12/1.4 — 4.489 / 3.745   10/1.4 — 3.741 / 3.12
   ========================================================================== */

.s-footer { color: var(--c-white); }

/* Узор над футером: 19 колонок x 2 ряда, фигура 97.26x96.95, зазор 4 */
.s-footer__pattern {
  aspect-ratio: 1920 / 197.908;
  background: url('../img/footer-pattern.svg') 0 0 / calc((100% + 4px) / 19) auto repeat;
}

.s-footer__body {
  padding-top: 100px;
  background: var(--c-dark);
}

.s-footer__inner {
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
}

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

.s-footer__faq {
  display: flex;
  align-items: flex-start;
  gap: 160px;
}

/* капитель — на уровне первого разделителя */
.s-footer__title {
  flex: 0 1 600px;
  min-width: 0;
  margin-top: -8.066px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-footer__list {
  flex: 1 1 880px;
  min-width: 0;
}

/* Закрытый пункт 76 = 30 + иконка 16 + 30; у раскрытого после ответа 100
   (в макете 80, 100 — со слов дизайнера 11.09) */
.s-footer__item {
  position: relative;
  padding: 30px 0;
  transition: padding-bottom .4s ease;
}

.s-footer__item.is-open { padding-bottom: 100px; }

/* Разделители нулевой высоты, как в макете */
.s-footer__item::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-white);
}

.s-footer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.is-open > .s-footer__head { cursor: default; }

/* Строка срезана до обрезанной по капители коробки — центруется по иконке */
.s-footer__q {
  margin: -5.185px 0 -4.193px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

.s-footer__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.s-footer__icon::before,
.s-footer__icon::after {
  content: '';
  position: absolute;
  background: var(--c-white);
}

.s-footer__icon::before { top: 7.5px; left: 0; width: 100%; height: 1px; }
.s-footer__icon::after  { top: 0; left: 7.5px; width: 1px; height: 100%; }

.is-open .s-footer__icon { display: none; }

/* Ответ: капитель на 30 от базовой линии вопроса, колонка 620.
   Высота зафиксирована (3 строки, как в макете): все раскрытые пункты
   одинаковые, блок с чертами не меняет высоту. Длиннее — скролл внутри. */
.s-footer__panel {
  max-width: 620px;
  /* 3 строки = 62.4, но Chrome округляет строки до 63 и рисует скролл
     на полпикселя — берём 63, лишние 0.6 снимаем снизу */
  height: 63px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 24.815px 0 -4.793px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
  transition: height .4s ease, margin .4s ease, opacity .4s ease, visibility 0s;
}

.s-footer__panel::-webkit-scrollbar { width: 4px; }
.s-footer__panel::-webkit-scrollbar-track { background: transparent; }

.s-footer__panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .35);
  border-radius: 2px;
}

/* Закрытый ответ схлопывается плавно; высота открытого — из правил выше */
.js-accordion-item:not(.is-open) > .s-footer__panel {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, .4s;
}

.s-footer__panel p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

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

/* Черта во всю ширину под вопросами, 100 до капители адреса и после */
.s-footer__contacts {
  position: relative;
  display: flex;
  align-items: center;
  padding: 100px 0;
}

.s-footer__contacts::before,
.s-footer__legal::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-white);
}

.s-footer__address {
  margin: -5.185px auto -4.193px 0;
  font-style: normal;
  font-size: 16px;
  line-height: 1.3;
}

.s-footer__address a,
.s-footer__legal a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}

.s-footer__address a:hover,
.s-footer__legal a:hover { text-decoration-color: currentColor; }

.s-footer__cta { margin-right: 69px; }

/* Иконки 30 по высоте, между ними 30 */
.s-footer__social {
  display: flex;
  gap: 30px;
}

.s-footer__social a {
  display: block;
  transition: opacity .2s ease;
}

.s-footer__social a:hover { opacity: .7; }

/* --- куки ---------------------------------------------------------------- */

/* Капитель на 100 от черты, от базовой линии до низа футера 100 */
.s-footer__legal {
  position: relative;
  padding: 94.815px 0 96px;
}

.s-footer__legal p {
  max-width: 900px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
}

/* Ссылки на документы ПД — строкой под текстом про куки (в макете их нет) */
.s-footer__docs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin-top: 30px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
}

.s-footer__docs a { text-decoration-color: rgba(255, 255, 255, .4); }

/* Переносы, которые Figma сделала не по алгоритму, — только на мобильном */
.s-footer__br { display: none; }

/* --- планшет ------------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-footer__faq { gap: 60px; }
  .s-footer__title { flex-basis: 480px; font-size: 30px; }
}

@media (max-width: 1023px) {
  .s-footer__faq { display: block; }
  .s-footer__list { margin-top: 60px; }

  .s-footer__contacts { flex-wrap: wrap; gap: 40px 69px; }
  .s-footer__address { flex: 1 0 100%; }
  .s-footer__cta { margin-right: 0; }
}

/* --- мобильный 360 ------------------------------------------------------- */

@media (max-width: 767px) {
  /* 11 колонок x 2 ряда, фигура 31.82x31.5, зазор 1 */
  .s-footer__pattern {
    aspect-ratio: 360 / 64;
    background-image: url('../img/footer-pattern-m.svg');
    background-size: calc((100% + 1px) / 11) auto;
  }

  .s-footer__body {
    padding-top: 60px;
    border-radius: 0 0 30px 30px;
  }

  .s-footer__inner { width: calc(100% - 48px); }

  .s-footer__faq { margin: 0 8px; }

  .s-footer__title {
    margin: -5.378px 0 -3.89px;
    font-size: 24px;
  }

  /* в макете блок заголовка 23 (при капители 17.13), под ним 40 */
  .s-footer__list { margin-top: 45.87px; }

  /* закрытый пункт 68 = 20 + строка 28 + 20 */
  .s-footer__item { padding: 20px 0; }
  .s-footer__item.is-open { padding-bottom: 40px; }

  .s-footer__item::before { top: -0.25px; height: 0.5px; }

  /* Вопрос в две строки прижат к верху строки 28, иконка по её центру */
  .s-footer__head {
    align-items: flex-start;
    gap: 20px;
    min-height: 28px;
  }

  .is-open > .s-footer__head { min-height: 31px; }

  .s-footer__q {
    margin: -3.889px 0 -3.145px;
    font-size: 12px;
  }

  /* у раскрытого вопроса в макете интерлиньяж 1.4, у закрытых 1.3 */
  .is-open .s-footer__q {
    margin: -4.489px 0 -3.745px;
    line-height: 1.4;
  }

  .s-footer__icon {
    flex-basis: 15.18px;
    width: 15.18px;
    align-self: center;
  }

  .s-footer__icon::before { top: 7.75px; height: 0.5px; }
  .s-footer__icon::after  { left: 7.34px; width: 0.5px; }

  /* У раскрытого место иконки остаётся: ширина вопроса не меняется,
     переносы не прыгают, и блок с чертами держит высоту */
  .is-open .s-footer__icon { display: block; visibility: hidden; }

  /* ответ в макете не обрезан по капители — отступ считается от строки */
  /* блок ответа в макете 85 (5 строк) */
  .s-footer__panel {
    max-width: none;
    height: 85px;
    margin: 20px 0 0;
  }

  .s-footer__panel p {
    font-size: 12px;
    line-height: 1.4;
  }

  /* кнопка, адрес, иконки — столбиком по центру через 60 */
  .s-footer__contacts {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 60px;
    padding: 60px 0;
  }

  /* черта под вопросами на мобилке 296 и 0.5px */
  .s-footer__contacts::before {
    top: -0.25px;
    left: 8px;
    right: 8px;
    height: 0.5px;
  }

  .s-footer__cta {
    order: -1;
    width: 296px;
    height: 36px;
    padding: 0;
    font-size: 10px;
  }

  /* блок адреса в макете 79 при капители до базовой линии 75.77 */
  .s-footer__address {
    flex: none;
    width: 300px;
    margin: -4.489px 0 -0.51px;
    font-size: 12px;
    line-height: 1.4;
  }

  .s-footer__social { gap: 32.78px; }

  .s-footer__legal { padding: 56.259px 0 56.88px; }

  .s-footer__legal p {
    max-width: none;
    font-size: 10px;
    line-height: 1.4;
  }

  .s-footer__br { display: inline; }

  .s-footer__docs {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }
}


/* --- css/sections/form-modal.css --- */
/* ==========================================================================
   Модалка «Заказать консультацию»
   Макет: десктоп 1920x1171 — 2438:571 (обычная), 2546:2192 (ошибка).
   Мобильного макета нет — сделано по аналогии с модалкой сотрудника.

   Каркас общий с модалкой сотрудника: <dialog class="m-team m-form">,
   крестик, левая панель с лентой и мобильный низ — классы .m-team__*
   (team-modal.css). Здесь только правая колонка с формой.

   Колонка 526 по центру правой половины, капитель заголовка на 407,
   низ чекбокса на 805 (снизу остаётся 366). Отсюда центровка
   с полем сверху 41.
   Высота поля 24 + капитель 11.422 + 24 = 59.422, но Figma ставит поля
   по целым пикселям (490 / 569 / 676 / 783) — в CSS 59.
   Смещение капители: 36/1.1 — 8.066 (хвост 5.834), 16/1.3 — 5.185 (хвост 4.193).
   ========================================================================== */

.m-form {
  --c-error: #b70000;
}

.m-form__body {
  align-items: center;
  padding: 41px 60px 0;
}

.m-form__form {
  display: flex;
  flex-direction: column;
  flex: none;
  width: min(526px, 100%);
  margin: auto 0;          /* по центру, но без обрезки сверху на низком экране */
}

/* Рамка заголовка в макете 35 при капители 25.7 — следующий блок на 48 от рамки */
.m-form__title {
  margin: -8.066px 0 -5.834px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.m-form__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 57.301px;    /* 48 + (35 − 25.699) */
}

/* Текст центрован по обрезанной коробке: сверху 24 до капители */
.m-form__input {
  display: block;
  width: 100%;
  height: 59px;
  padding: 18.815px 30px 19.385px;   /* 24 − 5.185; остаток до 59 */
  border: 0;
  border-radius: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: var(--c-text);
  background: rgba(213, 228, 234, 0.3);
  outline: none;
  transition: background-color .2s, color .2s;
}

.m-form__input::placeholder {
  color: var(--c-text);
  opacity: 1;
  transition: color .2s;
}

.m-form__input:focus-visible { box-shadow: inset 0 0 0 1px var(--c-blue-lt); }

.m-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 59px;
  margin-top: 48px;
  border-radius: 24px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-white);
  background: var(--c-dark);
}

.m-form__submit span { display: block; margin: -5.185px 0 -4.193px; }

/* Строка согласия 22px: чекбокс, гап 7, подчёркивание «рекламы» 0.5px черным
   на 21 от верха строки */
.m-form__agree {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 48px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}

/* Вторая галочка (реклама) — в макете её нет, гап 16 выбран сам */
.m-form__agree + .m-form__agree { margin-top: 16px; }

.m-form__check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.m-form__box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid #d9d9d9;
  border-radius: 6px;
}

/* Отмеченного состояния в макете нет — тёмная заливка и галочка.
   Без transition: плавная заливка .2s выглядела как задержка клика */
.m-form__check:checked + .m-form__box {
  border-color: var(--c-dark);
  background: var(--c-dark);
}

.m-form__check:checked + .m-form__box::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--c-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.m-form__check:focus-visible + .m-form__box { box-shadow: 0 0 0 2px var(--c-blue-lt); }

.m-form__agree-text { display: block; margin: -5.185px 0 -4.193px; }

.m-form__agree-text a {
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 5px;
}

/* --- Ошибка (2546:2192) --------------------------------------------------- */

.m-form__input.is-error,
.m-form__input.is-error::placeholder { color: var(--c-error); }
.m-form__input.is-error { background: rgba(183, 0, 0, 0.1); }

.m-form__agree.is-error { color: var(--c-error); }
.m-form__agree.is-error .m-form__box { border-color: rgba(183, 0, 0, 0.5); }

/* --- Планшет ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .m-form__body { padding: 100px 48px 80px; }
}

/* --- Мобильный: макета нет ---------------------------------------------- */

@media (max-width: 767px) {
  .m-form__body { align-items: stretch; padding: 90px 32px 0; }

  .m-form__form { width: 100%; margin: 0; }

  .m-form__title {
    margin: -5.378px 0 -3.889px;  /* 24/1.1 */
    font-size: 24px;
  }

  .m-form__fields { gap: 12px; margin-top: 30px; }

  /* 16px, чтобы iOS не увеличивал страницу при фокусе */
  .m-form__input {
    height: 50px;
    padding: 14.6px 20px;
    border-radius: 20px;
  }

  .m-form__submit { height: 50px; margin-top: 24px; border-radius: 20px; }

  .m-form__agree { align-items: flex-start; margin-top: 24px; font-size: 12px; line-height: 1.4; }
  .m-form__agree + .m-form__agree { margin-top: 12px; }
  .m-form__agree-text { margin: 0; padding-top: 2.6px; }
  .m-form__agree-text a { text-underline-offset: 3px; }
}


/* --- css/sections/promo.css --- */
/* ==========================================================================
   Тёмная промо-карточка: «Скидка 20%» и «Для продавцов всех популярных площадок»
   Страница market.html. Макет: десктоп 2234:2187 (карточки 2532:2093 на 1060
   и 2532:1829 на 5667), мобильный 2520:3932 (2520:4429 на 700, 2520:4859 на 5462).

   Тексты срезаны до обрезанной по капители коробки отрицательными полями,
   поэтому гапы между ними — прямо из макета. Поля в em, чтобы не пересчитывать
   на каждом кегле (метрики Open Sans: ascender 1.06885, capHeight 0.71387):
     интерлиньяж 1.1 — сверху −0.22408em, снизу −0.16206em
     интерлиньяж 1.3 — сверху −0.32407em, снизу −0.26206em
   ========================================================================== */

.s-promo { padding-top: 100px; }

/* После «Для продавцов» идёт калькулятор: капитель его заголовка через 100 */
.s-promo--sellers { padding-bottom: 83.866px; }

.s-promo__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
  padding: 60px;
  border-radius: 30px;
  background: var(--c-dark);
  color: var(--c-white);
}

.s-promo__body {
  flex: 0 1 788px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  font-family: var(--f-body);
  font-weight: 700;
}

.s-promo--sellers .s-promo__body { gap: 40px; }

.s-promo__big {
  display: block;
  margin: -0.32407em 0 -0.26206em;
  font-size: 72px;
  line-height: 1.3;
}

.s-promo__title {
  display: block;
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-promo__cta {
  flex: 0 0 auto;
  width: 264px;
  padding: 0;
}

/* companies.html: «Заменим вам кадровика…» (2532:2578 на 3486) и «Проверим
   состояние бухгалтерии…» (2535:2586 на 7377) — карточка 260, поля 77/60,
   текст в три строки прижат к верху */
.s-promo--tall .s-promo__card {
  position: relative;
  align-items: flex-start;
  min-height: 260px;
  padding: 77px 60px;
}

/* кнопка по центру карточки: (260 − 50) / 2 = 105 от верха */
.s-promo--tall .s-promo__cta { margin-top: 28px; }

.s-promo--expert { padding-top: 100px; }

/* Фото специалиста 514x662: левый край на 743 от карточки, низ по низу
   карточки, наезжает на сетку кейсов выше */
.s-promo__wave { display: none; }

.s-promo__expert {
  position: absolute;
  left: calc(50% - 77px);
  bottom: 0;
  width: 514px;
  height: 662px;
  pointer-events: none;
}

/* Уже 1920 фото наезжает на заголовок — ужимаем заголовок до левого края фото */
@media (max-width: 1691px) {
  .s-promo--expert .s-promo__body { flex-basis: calc(50% - 137px); }
}

/* после карточки команды; до узора футера — 180 */
.s-promo--check { padding: 99.45px 0 180px; }

/* registration.html: «Если вы селлер…» (2532:2044 на 1869) — стоит сразу под
   фото, 1640x325. Заголовок 36/1.3 (строки через 47, рамка 86), через 40 текст
   16/1.3 (через 21, рамка 79). Кнопка в макете 65.9 — огрех, сделана обычной 50. */
.s-promo--self { padding-top: 0; }

.s-promo--self .s-promo__body {
  flex-basis: 750px;
  gap: 0;
  min-height: 205px;
}

.s-promo--self .s-promo__title {
  max-width: 670px;
  margin: -11.765px 0 -9.536px;
  line-height: 47px;
}

.s-promo__text {
  margin: 48.015px 0 -4.293px;   /* 40 + 86 − 72.7 − 5.285 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
}

.s-promo__text em { font-weight: 400; }

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-promo { padding-top: 80px; }
  .s-promo__expert { display: none; }
  .s-promo--check { padding-bottom: 120px; }
  .s-promo__card { padding: 48px; }
  .s-promo__big { font-size: 56px; }
  .s-promo__title { font-size: 30px; }
  .s-promo--self .s-promo__body { min-height: 0; }
  .s-promo--self .s-promo__title { margin: -0.32407em 0 -0.26206em; line-height: 1.3; }
  .s-promo__text { margin-top: 30px; }
}

@media (max-width: 1023px) {
  .s-promo__card { display: block; }
  .s-promo__cta { display: flex; margin-top: 40px; }
}

/* --- мобильный 360 ------------------------------------------------------ */

@media (max-width: 767px) {
  .s-promo { padding-top: 60px; }
  .s-promo--sellers { padding-bottom: 51.934px; }

  /* Во всю ширину, скруглена только сверху */
  .s-promo__card {
    width: 100%;
    padding: 60px 32px;
    border-radius: 30px 30px 0 0;
  }

  .s-promo__body { gap: 20px; }

  /* В макете блок «Скидка 20%» 37 при капители 25.7 — добираем снизу */
  .s-promo__big {
    margin-bottom: calc(-0.26206em + 11.301px);
    font-size: 36px;
  }

  .s-promo__title { font-size: 20px; }

  /* Блок текста в макете 62 при 58.28 по капители — остаток уходит в отступ */
  .s-promo__cta {
    width: 100%;
    height: 36px;
    margin-top: 43.72px;
    font-size: 10px;
  }

  /* Карточка в макете 366 — на 1px выше суммы блоков, остаток снизу */
  .s-promo--sellers .s-promo__card { padding-bottom: 61.04px; }
  .s-promo--sellers .s-promo__body { gap: 60px; }

  /* Блок заголовка в макете 50 при 43.53 по капители */
  .s-promo--sellers .s-promo__title {
    margin-bottom: calc(-0.16206em + 6.47px);
    font-size: 24px;
  }

  .s-promo--sellers .s-promo__cta { margin-top: 60px; }

  /* companies.html, мобильный 2520:4950 */
  .s-promo--tall .s-promo__card { min-height: 0; padding: 60px 32px; }
  .s-promo--tall .s-promo__title { font-size: 24px; }

  /* «Заменим вам…» на 3038 — наезжает на последний кейс на 60; 360x522,
     заголовок в колонке 207 (рамка 205), кнопка 150 через 30, фото 212x308
     справа внизу, под ним лента (та же волна, что в секции 6 главной) */
  .s-promo--expert {
    position: relative;
    margin-top: -60px;
    padding-top: 0;
  }

  .s-promo--expert .s-promo__card {
    overflow: hidden;
    height: 522px;
    padding-bottom: 0;
  }

  .s-promo--expert .s-promo__body { width: 207px; height: 205px; }
  .s-promo--expert .s-promo__cta { width: 150px; margin-top: 30px; }

  .s-promo__wave {
    display: block;
    position: absolute;
    left: -10px;
    top: 470px;
    width: 449px;
    height: 46px;
    max-width: none;
  }

  .s-promo__expert {
    display: block;
    left: auto;
    right: 0;
    width: 212px;
    height: 308px;
    object-fit: cover;
    object-position: 36.8% 0;
  }

  /* «Проверим…» 360x318: заголовок (рамка 102), через 60 кнопка во всю ширину */
  .s-promo--check { padding-bottom: 60px; }
  .s-promo--check .s-promo__body { height: 102px; }
  .s-promo--check .s-promo__cta { margin-top: 60px; }

  /* «Если вы селлер…» 360x456: заголовок 24/1.3 (через 31, рамка 112), через 20
     текст 12/1.4 (через 17, рамка 128), через 40 кнопка 296x36 */
  .s-promo--self { padding-top: 0; }
  .s-promo--self .s-promo__card { height: 456px; }
  .s-promo--self .s-promo__body { min-height: 0; }

  .s-promo--self .s-promo__title {
    margin: -7.68px 0 -6.19px;
    font-size: 24px;
    line-height: 31px;
  }

  .s-promo__text {
    margin: 17.28px 0 -3.845px;   /* 20 + 112 − 110.13 − 4.589 */
    font-size: 12px;
    line-height: 17px;
  }

  .s-promo--self .s-promo__cta { height: 36px; margin-top: 40.43px; }
}


/* --- css/sections/headline.css --- */
/* ==========================================================================
   Крупный заголовок по центру, вторая часть серая
   Страница market.html: «Возьмём весь учёт на себя…» (капитель на 1427 / 1075)
   и «Большая команда экспертов…» (3927 / 3550, модификатор --team).

   Заголовок срезан до обрезанной по капители коробки (72/1.1: −0.22408em
   сверху, −0.16206em снизу), паддинги секции — прямо из макета.
   ========================================================================== */

.s-headline {
  padding: 100px 0 117.2px;
  color: var(--c-text);
}

/* от базовой линии до сетки преимуществ на 4255 */
.s-headline--team { padding-bottom: 118.2px; }

/* companies.html: рамки заголовков в макете 142 и 146 при 130.6 по капители,
   следующий блок на 100 от рамки */
.s-headline--risks { padding-bottom: 111.4px; }
.s-headline--cases { padding-bottom: 115.4px; }

.s-headline__title {
  max-width: 1300px;
  margin: -0.22408em auto -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
}

.s-headline__title span { color: #c8c8c8; }

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-headline { padding: 80px 0 90px; }
  .s-headline__title { font-size: 56px; }
}

@media (max-width: 1023px) {
  .s-headline__title { font-size: 44px; }
}

/* --- мобильный 360 ------------------------------------------------------ */

@media (max-width: 767px) {
  .s-headline { padding: 60px 0 73.7px; }

  /* companies.html: рамки 155 и 196 при 144.5 и 184.1, до блока 60 */
  .s-headline--risks { padding-bottom: 70.5px; }
  .s-headline--cases { padding-bottom: 71.9px; }

  /* registration.html: строки через 40 (Figma округляет 39.6), рамка 236
     при 225.7 (6 строк), до карточек 60 */
  .s-headline--reg { padding-bottom: 70.3px; }
  .s-headline--reg .s-headline__title { margin: -8.267px auto -6.034px; line-height: 40px; }

  /* после карточек «Как мы будем взаимодействовать» — 135 */
  .s-headline--team { padding-top: 135px; }

  .s-headline__title {
    max-width: none;
    font-size: 36px;
  }
}


/* --- css/sections/start.css --- */
/* ==========================================================================
   «Как начать» — вариант начала сотрудничества с большой цифрой
   Страница market.html. Макет: десктоп 2532:2141 (капитель на 2821, шаг
   на 2965, черта на 3288), мобильный 2520:4449 (2231, черта на 2744).

   Тексты срезаны до обрезанной по капители коробки отрицательными полями
   в em: 1.1 — −0.22408 / −0.16206, 1.3 — −0.32407 / −0.26206,
   1.4 — −0.37408 / −0.31208. Где в макете блок текста вручную выше
   расчётного — остаток добавлен к нижнему полю (числа в комментариях).
   ========================================================================== */

.s-start {
  padding-top: 100px;
  color: var(--c-text);
}

/* Шаги со скроллом — механика секции 7 главной (scrollSteps в main.js).
   Трек = сцена + (шагов − 1) × 45vh, сцена прилипает к центру экрана.
   Во втором кадре (2546:2271) шаг на 17px ниже и подпись голубая —
   похоже на небрежность макета, сделано как в первом. */
.s-start__track {
  --stage-h: 570px;      /* уточняет main.js по факту */
  --step-scroll: 45vh;
  height: calc(var(--stage-h) + (var(--steps, 1) - 1) * var(--step-scroll));
}

/* от текста шага до черты — 100 плюс хвост блока 36 при 32.22 */
.s-start__inner {
  position: sticky;
  top: max(0px, calc(50vh - var(--stage-h) / 2));
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
  padding-bottom: 103.778px;
}

/* Черта нулевой высоты по низу блока */
.s-start__inner::after {
  content: '';
  position: absolute;
  bottom: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #c8c8c8;
}

.s-start__title {
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

/* блок заголовка в макете 30 при 25.7 по капители: 20 + 4.3.
   Остатки ручных высот везде кладём в верхнее поле следующего блока, а не
   в нижнее предыдущего: два положительных поля схлопнулись бы в одно */
.s-start__note {
  margin: calc(24.3px - 0.32407em) 0 -0.26206em;
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: rgba(57, 57, 58, .3);
}

/* Все шаги в одной ячейке грида — высота не прыгает при смене */
.s-start__steps {
  display: grid;
  margin-top: 79.72px;
}

/* Верх шага = капитель заголовка шага (2965). flow-root — чтобы отрицательное
   поле заголовка не схлопнулось наружу и цифра встала от того же верха */
.s-start__step {
  position: relative;
  display: flow-root;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}

.s-start__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s ease .1s, transform .4s ease .1s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .s-start__step,
  .s-start__step.is-active { transition: none; }
}

/* Колонка текста 900 по центру страницы, цифра слева от неё через 110.
   Строка в макете центрована: цифра по капители 223.5 при колонке 223 */
.s-start__num {
  display: block;
  position: absolute;
  top: -70.404px;
  /* по рамке из макета 560.225, но глиф «1» в Open Sans смещён в своей
     ширине — подвинуто по чернилам на 10 */
  right: calc(50% + 570.225px);
  width: 158.555px;
  font-weight: 700;
  font-size: 313.083px;
  line-height: 1.1;
  text-align: center;
  color: var(--c-blue-lt);
}

.s-start__body {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.s-start__step-title {
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
}

/* блок заголовка в макете 147 при 130.6 по капители: 40 + 16.4 */
.s-start__step-text {
  max-width: 670px;
  margin: calc(56.401px - 0.32407em) auto -0.26206em;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

.s-start__step-text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-start__step-text a:hover { text-decoration-color: transparent; }

/* Переносы, которые Figma сделала не по алгоритму, — только на мобильном */
.s-start__br { display: none; }

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-start { padding-top: 80px; }
  .s-start__inner { padding-bottom: 80px; }
  .s-start__body { max-width: 760px; }
  .s-start__step-title { font-size: 56px; }

  .s-start__num {
    top: -53.777px;
    right: calc(50% + 400px);
    width: auto;
    font-size: 240px;
  }
}

@media (max-width: 1023px) {
  .s-start__num {
    position: static;
    margin: -0.22407em 0 calc(-0.16206em + 40px);
    font-size: 160px;
  }
}

/* --- мобильный 360 ------------------------------------------------------ */

@media (max-width: 767px) {
  .s-start { padding-top: 60px; }

  /* блок 296 (поля 32), текст шага до черты — 60 плюс хвост 64 при 58.97 */
  .s-start__inner {
    width: calc(100% - 64px);
    padding-bottom: 65.64px;
  }

  /* черта 312 — шире колонки на 8 с каждой стороны */
  .s-start__inner::after {
    left: -8px;
    right: -8px;
  }

  .s-start__title { font-size: 24px; }

  /* блок заголовка 22 при 17.13 — 10 + 4.87; свой блок 29 при 25.37 */
  .s-start__note {
    margin: calc(14.87px - 0.37408em) 0 calc(-0.31208em + 3.634px);
    font-size: 12px;
    line-height: 1.4;
  }

  .s-start__steps { margin-top: 40px; }

  .s-start__num {
    margin: -0.22407em 0 calc(-0.16206em + 40px);
    font-size: 100px;
  }

  .s-start__step-title { font-size: 36px; }

  /* блок заголовка в макете 156 при 104.9 по капители (три строки): 20 + 51.1 */
  .s-start__step-text {
    max-width: none;
    margin: calc(71.101px - 0.37408em) 0 -0.31208em;
    font-size: 12px;
    line-height: 1.4;
  }

  .s-start__br { display: inline; }
}


/* --- css/sections/chat.css --- */
/* ==========================================================================
   «Как мы будем взаимодействовать» — три пункта про персональный чат
   Страница market.html. Макет: десктоп 2532:1824 (капитель на 3368, карточка
   3504..3727, черта на 3827), мобильный 2520:4458 + карточки 2520:4464 / 4467.

   Поля текста в em (обрезка по капители): 1.1 — −0.22408 / −0.16206,
   1.3 — −0.32407 / −0.26206, 1.4 — −0.37408 / −0.31208.
   ========================================================================== */

.s-chat {
  padding-top: 80px;
  color: var(--c-text);
}

.s-chat__inner {
  position: relative;
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
  padding-bottom: 100px;
}

/* Черта нулевой высоты по низу блока */
.s-chat__inner::after {
  content: '';
  position: absolute;
  bottom: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #c8c8c8;
}

/* flow-root: верх шапки = капитель заголовка, от него же стоит иконка */
.s-chat__head {
  position: relative;
  display: flow-root;
  padding-right: 118px;
}

.s-chat__title {
  max-width: 600px;
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-chat__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 78px;
  height: 64px;
}

/* Блок заголовка в макете 76 при 65.3 по капители: 60 + 10.7.
   Колонки 432 с гапом 60 при полях 112 — ровно 1640 */
.s-chat__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  margin-top: 70.7px;
  padding: 58px 112px 61px;
  border-radius: 30px;
  background: rgba(213, 228, 234, .3);
}

.s-chat__item-title {
  margin: -0.32407em 0 -0.26206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.s-chat__item-text {
  margin: calc(40px - 0.32407em) 0 -0.26206em;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

/* --- планшет: макета нет ----------------------------------------------- */

/* Перенос перед «вы» в первом пункте — не по алгоритму, но и на 1920,
   и на 360 он стоит там же; на планшете колонки другие — прячем */
@media (max-width: 1439px) {
  .s-chat__br { display: none; }
  .s-chat__title { font-size: 30px; }
  .s-chat__list { gap: 40px; padding: 48px; }
}

@media (max-width: 1023px) {
  .s-chat__list { grid-template-columns: 1fr; }
}

/* --- мобильный 360 ------------------------------------------------------
   Пункты — карточки во всю ширину, скруглены сверху и наезжают друг на друга
   (как карточки услуг на главной). В макете их две — третья («Сможете
   обращаться в любой момент») добавлена по тому же шагу 202.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .s-chat { padding-top: 60px; }

  .s-chat__inner {
    width: calc(100% - 64px);
    padding-bottom: 0;
  }

  .s-chat__inner::after { display: none; }

  .s-chat__head { padding-right: 0; }

  .s-chat__title {
    max-width: none;
    font-size: 24px;
  }

  .s-chat__icon { width: 22px; height: 18px; }

  /* блок заголовка в макете 49 при 43.53, до карточки 40 */
  .s-chat__list {
    display: block;
    margin: 45.47px -32px 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .s-chat__item {
    position: relative;
    height: 320px;
    margin-top: -104px;
    padding: 60px 32px;
    border-radius: 30px 30px 0 0;
    background: #ecf0f2;
    box-shadow: 0 -6px 8.9px rgba(11, 33, 46, .07);
  }

  .s-chat__item:first-child {
    height: 306px;
    margin-top: 0;
    box-shadow: none;
  }

  /* блок заголовка 11 при 8.57 */
  .s-chat__item-title {
    margin: -0.37408em 0 calc(-0.31208em + 2.434px);
    font-size: 12px;
    line-height: 1.4;
  }

  .s-chat__item-text {
    margin: calc(20px - 0.37408em) 0 0;
    font-size: 12px;
    line-height: 1.4;
  }

  .s-chat__br { display: inline; }
}


/* --- css/sections/benefits.css --- */
/* ==========================================================================
   Преимущества: Надёжность / Закон / Защита / Опыт / Компенсация
   Страница market.html. Макет: десктоп 2342:1336 (сетка на 4255, 1650x693),
   мобильный 2520:4772 (3887, колонка 312). Заголовок над сеткой — секция
   s-headline--team.

   Поля текста в em (обрезка по капители): 1.1 — −0.22408 / −0.16206,
   1.3 — −0.32407 / −0.26206, 1.4 — −0.37408 / −0.31208.
   ========================================================================== */

.s-benefits { color: var(--c-text); }

/* В макете сетка 1650 от x 140 — на 10px шире колонки контента (1640),
   правый край на 1790. Воспроизведено как в дизайне, вопрос открыт.
   Строки фиксированные 211, «Опыт» занимает две. */
.s-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 211px);
  gap: 30px 40px;
  width: calc(min(1640px, 100% - 96px) + 10px);
  margin-left: calc((100% - min(1640px, 100% - 96px)) / 2);
}

.s-benefits__card {
  padding: 60px;
  border-radius: 30px;
  background: rgba(213, 228, 234, .3);
}

.s-benefits__card--tall { grid-row: span 2; }

.s-benefits__title {
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-benefits__text {
  max-width: 620px;
  margin: calc(40px - 0.32407em) 0 -0.26206em;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
}

/* registration.html (2535:2587 на 5143): черта сверху на 5043, сетка 1650
   по центру страницы (x 135), гапы 40, строки по содержимому; до узора футера 180 */
.s-benefits--reg {
  position: relative;
  padding: 100px 0 180px;
}

.s-benefits--reg::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 50%;
  width: min(1640px, 100% - 96px);
  height: 1px;
  transform: translateX(-50%);
  background: var(--c-text);
}

.s-benefits--reg .s-benefits__grid {
  grid-template-rows: none;
  gap: 40px;
  margin: 0 auto;
}

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-benefits__grid {
    grid-template-rows: none;
    width: min(1640px, 100% - 96px);
    margin: 0 auto;
  }

  .s-benefits__card { padding: 48px; }
  .s-benefits__title { font-size: 30px; }
}

@media (max-width: 1023px) {
  .s-benefits__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .s-benefits__card--tall { grid-row: auto; }
}

/* --- мобильный 360 ------------------------------------------------------ */

@media (max-width: 767px) {
  .s-benefits__grid {
    gap: 10px;
    width: calc(100% - 48px);
  }

  .s-benefits__card { padding: 40px 20px; }

  .s-benefits__title { font-size: 20px; }

  /* блок заголовка в макете 19 при 14.28: 10 + 4.72 */
  .s-benefits__text {
    max-width: 260px;
    margin: calc(14.72px - 0.37408em) 0 -0.31208em;
    font-size: 12px;
    line-height: 1.4;
  }

  /* registration.html (2523:298): без черты, карточки во всю ширину внахлёст —
     6601 / 6826 / 7072 / 7296, высоты 306 / 306 / 389 / 238; заголовок 20/1.1
     (рамки 19 / 41 / 19 / 53), через 20 текст 12 через 17; до узора 60 */
  .s-benefits--reg { padding: 60px 0; }
  .s-benefits--reg::before { display: none; }

  .s-benefits--reg .s-benefits__grid {
    display: block;
    width: 100%;
  }

  .s-benefits--reg .s-benefits__card {
    position: relative;
    height: 306px;
    padding: 60px 32px 0;
    border-radius: 30px 30px 0 0;
    background: #ecf0f2;
  }

  .s-benefits--reg .s-benefits__card + .s-benefits__card { box-shadow: 0 -6px 8.9px rgba(11, 33, 46, 0.07); }
  .s-benefits--reg .s-benefits__card:nth-child(2) { margin-top: -81px; }
  .s-benefits--reg .s-benefits__card:nth-child(3) { height: 389px; margin-top: -60px; }
  .s-benefits--reg .s-benefits__card:nth-child(4) { height: 238px; margin-top: -165px; }

  .s-benefits--reg .s-benefits__text {
    max-width: none;
    margin: 20.13px 0 0;   /* 20 + 19 − 14.28 − 4.589 */
    line-height: 17px;
  }

  .s-benefits--reg .s-benefits__card:nth-child(4) .s-benefits__text { margin-top: 54.13px; }
}


/* --- css/sections/director.css --- */
/* ==========================================================================
   Цитата генерального директора + фото на карточке
   Страница market.html. Макет: десктоп — текст 2532:1826 (капитель на 5099),
   карточка 2322:141 (895..1790 x 5110..5567), фото 2371:11, знак 2431:2076,
   волна 2431:2080, черта 2282:5 на 5567. Мобильный — 2520:4774 (4798),
   фото с карточкой 2520:4777, знак 2520:4948.

   Секция начинается сразу под сеткой преимуществ (4948). Правый край
   карточки в макете на 1790, на 10 шире колонки контента, — как в сетке выше.
   Поля текста в em (обрезка по капители): 1.1 — −0.22408 / −0.16206,
   1.3 — −0.32407 / −0.26206, 1.4 — −0.37408 / −0.31208.
   ========================================================================== */

/* Знак вылезает за карточку вправо — режем только по горизонтали,
   сверху он наезжает на сетку преимуществ */
.s-director {
  overflow-x: clip;
  color: var(--c-text);
}

.s-director__inner {
  position: relative;
  width: min(1640px, 100% - 96px);
  min-height: 619px;
  margin: 0 auto;
  padding: 151px 0 0 60px;
}

/* Черта нулевой высоты по низу фото и карточки */
.s-director__inner::after {
  content: '';
  position: absolute;
  bottom: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #c8c8c8;
}

.s-director__text { max-width: 640px; }

.s-director__title {
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

/* Остатки ручных высот — в верхнее поле следующего блока (два положительных
   поля схлопнулись бы). Блок заголовка в макете 117 при 104.9: 40 + 12.1;
   блок цитаты 175 при 170.28 — +4.72 снизу (с отрицательным полем подписи
   складывается честно) */
.s-director__quote {
  margin: calc(52.101px - 0.32407em) 0 calc(-0.26206em + 4.723px);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: #6598ad;
}

.s-director__author {
  margin: calc(20px - 0.32407em) 0 0;
  font-size: 20px;
  line-height: 1.3;
  text-align: right;
  color: #6598ad;
}

/* Система координат — карточка: 755 от колонки, до 1790 */
.s-director__media {
  position: absolute;
  top: 162px;
  right: -10px;
  bottom: 0;
  left: 755px;
}

.s-director__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(213, 228, 234, .3);
}

/* Волна 905x93 на 5 левее карточки, низом на 2 ниже — обрезана карточкой */
.s-director__wave {
  position: absolute;
  left: -5px;
  bottom: -2px;
  width: calc(100% + 10px);
  max-width: none;
  height: 93px;
  object-fit: cover;
}

/* Фото 500x594 на 86 левее карточки, выше неё на 137, низ по черте.
   Кадр: картинка во всю ширину рамки, низ обрезан */
.s-director__photo {
  position: absolute;
  bottom: 0;
  left: -86px;
  width: 500px;
  height: 594px;
  overflow: hidden;
}

.s-director__photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100.04%;
  max-width: none;
  height: auto;
}

/* Знак 342x341: верх на 4929, правый край на 64 правее карточки */
.s-director__sign {
  position: absolute;
  top: -181px;
  right: -64px;
  width: 342px;
  height: 341px;
}

/* --- планшет: макета нет, фото под текстом ------------------------------ */

@media (max-width: 1279px) {
  .s-director__inner {
    min-height: 0;
    padding: 100px 0 0;
  }

  .s-director__text { margin: 0 auto; }

  .s-director__media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(620px, 100%);
    height: 594px;
    margin: 60px auto 0;
  }

  .s-director__card { top: 137px; }
  .s-director__photo { left: 40px; }

  .s-director__sign {
    top: 60px;
    right: -30px;
    width: 240px;
    height: 239px;
  }
}

/* --- мобильный 360 ------------------------------------------------------ */

@media (max-width: 767px) {
  /* от сетки преимуществ до капители заголовка 64.75 */
  .s-director__inner {
    width: calc(100% - 64px);
    padding-top: 64.75px;
  }

  .s-director__inner::after { display: none; }

  .s-director__title { font-size: 20px; }

  /* блок заголовка 63 при 58.28: 20 + 4.72 */
  .s-director__quote {
    margin: calc(24.72px - 0.37408em) 0 -0.31208em;
    font-size: 12px;
    line-height: 1.4;
  }

  /* блок цитаты 147 при 142.97: 10 + 4.03 */
  .s-director__author {
    margin: calc(14.03px - 0.37408em) 0 -0.31208em;
    font-size: 12px;
    line-height: 1.4;
  }

  /* Блок 312 (шире текста на 8 с боков) от верха фото на 5067 до низа
     карточки на 5402 */
  .s-director__media {
    width: auto;
    height: 335px;
    margin: 20.43px -8px 0;
  }

  .s-director__card { top: 27px; }

  .s-director__photo {
    left: 2px;
    width: 233px;
    height: 335px;
  }

  /* тот же кадр в масштабе 0.566, по бокам обрезан */
  .s-director__photo img {
    left: -16.9%;
    width: 121.45%;
  }

  .s-director__wave {
    left: -12px;
    bottom: 13px;
    width: 449px;
    height: 46px;
  }

  .s-director__sign {
    top: 13px;
    right: auto;
    left: 249px;
    width: 71px;
    height: 71px;
  }
}


/* --- css/sections/cases.css --- */
/* ==========================================================================
   Кейсы «Исправляем старые ошибки» — сетка карточек 2x2 (четвёртая ячейка
   пустая, её место занимает фото из карточки «Заменим вам…» ниже)
   Страница companies.html. Макет: десктоп 2339:349, сетка 2342:1355 на 2615,
   1641 шириной, гапы 30 / 31. Мобильного макета нет.

   Тексты срезаны до обрезанной по капители коробки полями в em:
   1.1 — −0.22408 / −0.16206, 1.3 — −0.32407 / −0.26206, 1.4 — −0.37408 / −0.31208.
   ========================================================================== */

.s-cases { color: var(--c-text); }

.s-cases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 31px;
  width: min(1641px, 100% - 96px);
  margin: 0 auto;
  list-style: none;
}

.s-cases__card {
  padding: 60px;
  border-radius: 30px;
  background: rgba(213, 228, 234, 0.3);
}

/* Интерлиньяж в пикселях: Figma округляет 39.6 до 40 (и 20.8 до 21),
   на четырёх строках иначе набегает 1.2px — сверено по краям карточек */
.s-cases__title {
  max-width: 685px;
  margin: -8.267px 0 -6.034px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
}

.s-cases__text {
  max-width: 685px;
  margin: 34.715px 0 -4.293px;   /* 40 − 5.285; строки через 21 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;             /* Figma ставит строки через целые пиксели */
}

/* Переносы из макета, которые Figma сделала не по алгоритму: s-cases__br —
   на 1920 и 360, s-cases__br-m — только на 360 */
.s-cases__br-m { display: none; }

@media (max-width: 1439px) {
  .s-cases__br { display: none; }
}

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-cases__card { padding: 48px; }
  .s-cases__title { margin: -0.22408em 0 -0.16206em; font-size: 30px; line-height: 1.1; }
}

@media (max-width: 1023px) {
  .s-cases__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* --- мобильный 360 (2520:4950) -------------------------------------------
   Карточки во всю ширину, скруглены сверху и наезжают друг на друга, как
   услуги на главной: 1926 / 2319 / 2680, высоты 471 / 410 / 418, у второй
   и третьей тень вверх. Рамки заголовков в макете выше расчётных — остаток
   добавлен к отступу текста. */

@media (max-width: 767px) {
  .s-cases__grid { display: block; width: 100%; }

  .s-cases__card {
    position: relative;
    padding: 60px 32px 0;
    border-radius: 30px 30px 0 0;
    background: #ecf0f2;
  }

  .s-cases__card:nth-child(1) { height: 471px; }

  .s-cases__card:nth-child(2) {
    height: 410px;
    margin-top: -78px;
    box-shadow: 0 -6px 8.9px rgba(11, 33, 46, 0.07);
  }

  .s-cases__card:nth-child(3) {
    height: 418px;
    margin-top: -49px;
    box-shadow: 0 -6px 8.9px rgba(11, 33, 46, 0.07);
  }

  .s-cases__title {
    max-width: none;
    margin: -0.22408em 0 -0.16206em;
    font-size: 20px;
    line-height: 1.1;
  }

  /* строки через 17 (Figma округляет 16.8), смещение капители 4.589 */
  .s-cases__text {
    max-width: none;
    margin: 15.411px 0 0;
    font-size: 12px;
    line-height: 17px;
  }

  /* рамки заголовков 105 и 87 при 102.28 и 80.28 по капители */
  .s-cases__card:nth-child(1) .s-cases__text { margin-top: 18.131px; }
  .s-cases__card:nth-child(3) .s-cases__text { margin-top: 22.131px; }

  /* у второго кейса в макете текст 1.3 — строки через 16 */
  .s-cases__card:nth-child(2) .s-cases__text { margin-top: 15.911px; line-height: 16px; }

  .s-cases__br,
  .s-cases__br-m { display: inline; }
}


/* --- css/sections/interact.css --- */
/* ==========================================================================
   «С нами легко взаимодействовать» — переписка в Telegram и карточки с галочками
   Страница companies.html. Макет: десктоп 2339:349, блок 2535:2588 на 3846
   (1596 шириной от x 140 — заголовок по центру этой ширины, не страницы).
   Мобильного макета нет.

   Капитель заголовка на 3846, рамка 69 при 51.4 по капители, контент на 100
   ниже рамки. Переписка 590x503 (фон — обои Telegram, 2x), колонки карточек
   по 460 с гапом 30, между перепиской и карточками 56.
   ========================================================================== */

.s-interact {
  padding-top: 100px;
  color: var(--c-text);
}

.s-interact__inner {
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
}

.s-interact__hy { display: none; }

.s-interact__title {
  max-width: 1596px;
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
}

.s-interact__body {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  max-width: 1596px;
  margin-top: 117.6px;   /* 69 + 100 − 51.4 */
}

/* --- переписка ------------------------------------------------------------ */

.s-interact__chat {
  flex: 0 0 590px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 503px;
  padding: 59px 87px 58px 22px;
  background: url('../img/companies-chat-bg.webp') 0 0 / 100% 100% no-repeat;
  list-style: none;
}

/* Хвостик 23x28.8 слева внизу, пузырь наезжает на него на 18 */
.s-interact__msg {
  display: flex;
  align-items: flex-end;
}

.s-interact__msg::before {
  content: '';
  flex: none;
  width: 23.016px;
  height: 28.788px;
  margin-right: -18px;
  background: url('../img/chat-bubble-tail.svg') 0 0 / 100% 100% no-repeat;
}

/* Пузырь: поля 16 до полной строки 26 (здесь Figma текст не обрезает —
   сверено по краям пузырей: 136 / 110 / 84 = 32 + строки по 26) */
.s-interact__msg p {
  flex: 0 1 476px;
  padding: 16px;
  border-radius: 20px;
  background: var(--c-white);
  font-style: italic;
  font-size: 23.564px;
  line-height: 26px;
  color: #000;
}

/* --- карточки ------------------------------------------------------------- */

.s-interact__col {
  flex: 0 0 460px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  list-style: none;
}

/* между колонками карточек 30, а не 56, как до переписки */
.s-interact__col--right {
  align-items: flex-end;
  gap: 66px;
  margin-left: -26px;
}

/* Переносы из макета в пузыре — только на 1920 (--m — ещё и на 360) */
@media (max-width: 1691px) {
  .s-interact__br { display: none; }
}

.s-interact__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  list-style: none;
}

.s-interact__card {
  position: relative;
  padding: 60px;
  border-radius: 30px;
  background: rgba(213, 228, 234, 0.3);
}

.s-interact__card-text {
  max-width: 340px;
  margin: -5.285px 0 -4.293px;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;   /* Figma округляет 20.8 до 21 */
}

/* Галочка 20 на (410, 30.5) */
.s-interact__check {
  position: absolute;
  top: 30.5px;
  right: 30px;
  width: 20px;
  height: 20px;
}

.s-interact__tg { width: 78px; height: 64px; }

/* --- планшет: макета нет ----------------------------------------------- */

/* Ряд 1596 перестаёт влезать уже на 1691 — дальше карточки справа от переписки */
@media (max-width: 1691px) {
  .s-interact__body {
    display: grid;
    grid-template-columns: minmax(0, 590px) minmax(0, 1fr);
    gap: 30px 40px;
    margin-top: 80px;
  }

  .s-interact__chat { grid-row: span 2; }
  .s-interact__col--right { gap: 30px; margin-left: 0; }
  .s-interact__tg { display: none; }
}

@media (max-width: 1439px) {
  .s-interact { padding-top: 80px; }
  .s-interact__title { font-size: 56px; }
}

@media (max-width: 1023px) {
  .s-interact__title { font-size: 44px; }
  .s-interact__body { grid-template-columns: 1fr; }
  .s-interact__chat { grid-row: auto; width: 100%; max-width: 590px; height: auto; }
}

/* --- мобильный 360 (2520:4950) -------------------------------------------
   Заголовок в три строки с переносом «взаимодейство-вать» (рамка 113), через 40
   переписка во всю ширину 360x426 (свой кадр обоев), самолётик 22x18 справа
   над пузырями, пузыри 296 с полями 20 (текст не обрезан). Через 40 — все
   четыре карточки столбиком с гапом 20, поля 20, галочка на (272, 21). */

@media (max-width: 767px) {
  .s-interact { padding-top: 109px; }
  .s-interact__inner { width: calc(100% - 48px); }

  .s-interact__title { font-size: 36px; }
  .s-interact__hy { display: inline; }

  .s-interact__body {
    display: block;
    margin-top: 48.1px;   /* 113 + 40 − 104.9 */
  }

  .s-interact__chat {
    width: auto;
    max-width: none;
    height: 426px;
    margin: 0 -24px;
    padding: 42px 29.5px 0;
    gap: 20px;
    background-image: url('../img/companies-chat-bg-m.webp');
  }

  .s-interact__chat::before {
    content: '';
    align-self: flex-end;
    width: 22px;
    height: 18px;
    background: url('../img/icon-telegram-dark.svg') 0 0 / 100% 100% no-repeat;
  }

  /* строки через 17 (16.8 в макете округлено: пузыри 91 = 40 + 3 × 17) */
  .s-interact__msg p {
    flex: 0 0 296px;
    padding: 20px;
    font-size: 12px;
    line-height: 17px;
  }

  /* у третьего пузыря в макете интерлиньяж 1.1 — строки через 13 */
  .s-interact__msg:last-child p { line-height: 13px; }

  .s-interact__col,
  .s-interact__list { gap: 20px; }

  .s-interact__col { margin-top: 40px; }
  .s-interact__col--right { gap: 0; margin-top: 20px; }
  .s-interact__tg { display: none; }

  .s-interact__card {
    min-height: 68px;
    padding: 20px;
    border-radius: 30px;
  }

  /* рамки текста в макете 67 и 28 — карточки 107 и 68 */
  .s-interact__chat + .s-interact__col .s-interact__card:first-child { min-height: 107px; }

  .s-interact__check { top: 21px; right: 20px; }

  .s-interact__card-text {
    max-width: 200px;
    margin: -4.589px 0 -3.845px;
    font-size: 12px;
    line-height: 17px;   /* Figma округляет 16.8 */
  }

  .s-interact__br--m { display: inline; }
}


/* --- css/sections/handover.css --- */
/* ==========================================================================
   «4 шага, чтобы передать бухгалтерию в наши руки»
   Страница companies.html. Макет: десктоп 2339:349, блок 2532:2583 на 4618:
   заголовок 36/1.1 (рамка 37), через 40 карточка 1640x224, поля 60/40/60/60,
   четыре колонки по 350 с гапом 46. Мобильного макета нет.
   ========================================================================== */

/* В макете «Как начать» на 99 ниже карточки, а не на 100 */
.s-handover {
  margin-bottom: -1px;
  padding-top: 100px;
  color: var(--c-text);
}

.s-handover__inner {
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
}

.s-handover__title {
  margin: -0.22408em 0 -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.s-handover__title span { color: #c8c8c8; }

.s-handover__card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 46px;
  height: 224px;        /* по тексту 224.4 — в макете округлено */
  margin-top: 51.3px;   /* 37 + 40 − 25.7 */
  padding: 60px 40px 60px 60px;
  border-radius: 30px;
  background: rgba(213, 228, 234, 0.3);
  list-style: none;
}

.s-handover__step-title {
  margin: -0.32407em 0 -0.26206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.s-handover__step-text {
  margin: 34.715px 0 -4.293px;   /* 40 − 5.285, строки через 21 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
}

.s-handover__step-text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-handover__step-text a:hover { text-decoration-color: transparent; }

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-handover { margin-bottom: 0; padding-top: 80px; }

  .s-handover__card {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding: 48px;
  }
}

/* --- мобильный 360 (2520:4950) -------------------------------------------
   Заголовок по центру 20/1.1 (рамка 42), через 20 — шаги отдельными
   карточками во всю ширину внахлёст: 4781 / 4961 / 5159 / 5338,
   высоты 306 / 320 / 229 / 199. */

@media (max-width: 767px) {
  .s-handover { padding-top: 60px; }
  .s-handover__inner { width: calc(100% - 48px); }

  .s-handover__title {
    font-size: 20px;
    text-align: center;
  }

  .s-handover__card {
    display: block;
    height: auto;
    margin: 25.72px -24px 0;   /* 42 + 20 − 36.28 */
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .s-handover__step {
    position: relative;
    height: 306px;
    padding: 60px 32px 0;
    border-radius: 30px 30px 0 0;
    background: #ecf0f2;
  }

  .s-handover__step + .s-handover__step { box-shadow: 0 -6px 8.9px rgba(11, 33, 46, 0.07); }
  .s-handover__step:nth-child(2) { height: 320px; margin-top: -126px; }
  .s-handover__step:nth-child(3) { height: 229px; margin-top: -122px; }
  .s-handover__step:nth-child(4) { height: 199px; margin-top: -50px; }

  /* строки через 17 и 16 — Figma округляет 16.8 и 15.6 */
  .s-handover__step-title {
    margin: -4.589px 0 -3.845px;
    font-size: 12px;
    line-height: 17px;
  }

  /* рамка заголовка шага 11 при 8.57 (у второго 13); смещение капители 4.089 */
  .s-handover__step-text {
    margin: 18.341px 0 0;
    font-size: 12px;
    line-height: 16px;
  }

  .s-handover__step:nth-child(2) .s-handover__step-text { margin-top: 20.341px; }
}


/* --- css/sections/outsource.css --- */
/* ==========================================================================
   «Аутсорсинг — это экономия до 30%» — заголовок и текст по центру над командой
   Страница companies.html. Макет: десктоп 2339:349, черта на 6339, капитель
   заголовка на 6439 (рамка 146 при 130.6), через 40 текст 670 (рамка 142),
   через 60 ряд команды на 6827. Мобильного макета нет.
   ========================================================================== */

.s-outsource { color: var(--c-text); }

.s-outsource__inner {
  position: relative;
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}

/* Черта нулевой высоты по верху блока */
.s-outsource__inner::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #c8c8c8;
}

.s-outsource__title {
  max-width: 1400px;
  margin: -0.22408em auto -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
}

.s-outsource__title span { color: #c8c8c8; }

/* registration.html: черта на 4187, заголовок «Закрыть или открыть бизнес…»
   без текста, команда на 60 ниже рамки заголовка (s-team--reg) */

.s-outsource__text {
  max-width: 670px;
  margin: 50.115px auto -4.293px;   /* 146 + 40 − 130.6 − 5.285; строки через 21 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
}

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1439px) {
  .s-outsource__inner { padding-top: 80px; }
  .s-outsource__title { font-size: 56px; }
}

@media (max-width: 1023px) {
  .s-outsource__title { font-size: 44px; }
}

/* --- мобильный 360 (2520:4950) -------------------------------------------
   Без черты. Заголовок 296 шириной (рамка 197 при 184.1), через 40 текст
   12/1.4 (рамка 202 при 193.4), через 60 команда. */

@media (max-width: 767px) {
  /* капитель на 62 ниже карточки калькулятора (у калькулятора тут нет нижнего поля) */
  .s-outsource__inner { width: calc(100% - 64px); padding-top: 62px; }
  .s-outsource__inner::before { display: none; }
  /* заголовок 312, капитель на 60 ниже карточки калькулятора */
  .s-outsource--team .s-outsource__inner { width: calc(100% - 48px); padding-top: 60px; }
  /* строки через 40 и 17 — Figma округляет 39.6 и 16.8 */
  .s-outsource__title {
    margin: -8.267px auto -6.034px;
    font-size: 36px;
    line-height: 40px;
  }

  .s-outsource__text {
    margin: 46.711px auto -3.845px;   /* 197 + 40 − 185.7 − 4.589 */
    font-size: 12px;
    line-height: 17px;
  }
}


/* --- css/sections/registration.css --- */
/* ==========================================================================
   Страница registration.html («Регистрация и ликвидация бизнеса»)
   Макет: десктоп 2415:1341 (1920x7313), мобильный 2523:298 (360x8941).

   s-checks — сетка карточек с галочками + фото специалиста и синий знак
   (сетка и фото на 1302, фото стоит на тёмной карточке на 1869).
   s-liquid — «Ликвидация бизнеса в 3 шага»: заголовок на 2294, через 60
   карточка 1640x266 с тремя колонками и кнопкой.

   Обрезка по капители (Open Sans: ascender 1.06885, capHeight 0.71387):
   16 при строке 21 — −5.285 / −4.293; 12 при строке 17 — −4.589 / −3.845.
   Figma ставит строки через целые пиксели (20.8 → 21, 16.8 → 17).
   ========================================================================== */

/* --- s-checks -------------------------------------------------------------- */

.s-checks {
  position: relative;
  width: min(1640px, 100% - 96px);
  height: 567px;
  margin: 0 auto;
  color: var(--c-text);
}

.s-checks__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 950px;
  list-style: none;
}

/* Текст 340 по центру карточки 460 — поля 60 со всех сторон */
.s-checks__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  border-radius: 30px;
  background: rgba(213, 228, 234, 0.3);
}

/* «Подготовим / всю документацию» — перенос не по алгоритму, только на 360 */
.s-checks__br { display: none; }

.s-checks__text {
  flex: 0 1 340px;
  margin: -5.285px 0 -4.293px;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
}

/* Галочка 22 на (408, 31), обводка #d9d9d9 торчит на 0.5 наружу */
.s-checks__check {
  position: absolute;
  top: 31px;
  right: 30px;
  width: 22px;
  height: 22px;
  background: url('../img/icon-checkbox.svg') 0 0 / 100% 100% no-repeat;
}

/* Знак 485x484 на (1155, 53), фото 443x567 на (987, 0) — поверх знака.
   Фото: картинка 156.58% ширины рамки, сдвинута на −56.45% (видна правая часть) */
.s-checks__sign {
  position: absolute;
  left: 1155px;
  top: 53px;
  width: 485px;
  height: 484px;
  pointer-events: none;
}

.s-checks__photo {
  position: absolute;
  left: 987px;
  top: 0;
  width: 443px;
  height: 567px;
  overflow: hidden;
  pointer-events: none;
}

.s-checks__photo img {
  position: absolute;
  left: -56.45%;
  top: 0;
  width: 156.58%;
  max-width: none;
  height: auto;
}

/* Фото и знак отсчитываются от __media, а не от секции: reveal вешает на
   __media transform, и без этого фото на время анимации уезжало вниз.
   Сетка и __media лежат в одной ячейке, __media — во всю секцию. */
@media (min-width: 1440px) {
  .s-checks { display: grid; }

  .s-checks__grid,
  .s-checks__media { grid-area: 1 / 1; }

  .s-checks__grid { align-self: start; }

  .s-checks__media {
    position: relative;
    height: 567px;
  }
}

/* --- s-liquid -------------------------------------------------------------- */

.s-liquid {
  padding-top: 100px;
  color: var(--c-text);
}

.s-liquid__inner {
  width: min(1640px, 100% - 96px);
  margin: 0 auto;
}

.s-liquid__title {
  max-width: 1300px;
  margin: -0.22408em auto -0.16206em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
  text-align: center;
}

.s-liquid__title span { color: #c8c8c8; }

/* рамка заголовка 146 при 130.6 по капители, до карточки 60 */
.s-liquid__card {
  display: flex;
  align-items: flex-start;
  gap: 58px;
  min-height: 266px;
  margin-top: 75.4px;
  padding: 60px 38px 60px 60px;
  border-radius: 30px;
  background: rgba(213, 228, 234, 0.3);
}

.s-liquid__steps {
  flex: 0 1 1220px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 380px));
  gap: 40px;
  list-style: none;
}

.s-liquid__step-title {
  margin: -5.285px 0 -4.293px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
}

.s-liquid__step-text {
  margin: 34.715px 0 -4.293px;   /* 40 − 5.285 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
}

.s-liquid__step:last-child .s-liquid__step-text { max-width: 350px; }

/* Переносы третьего шага из макета («у вас / нет сотрудников… / вы рассчитались») —
   на 1920 совпадают с алгоритмом, а уже 1920 дают висячее «у вас»; нужны только
   на 360, там Figma переносит не жадно */
@media (min-width: 768px) {
  .s-liquid__br { display: none; }
}

/* Кнопка 264x50 (в макете 65.9 — огрех, решение заказчика 14.09)
   по центру самой высокой колонки 146.84 */
.s-liquid__cta {
  flex: 0 0 264px;
  margin-top: 48.42px;
  padding: 0;
}

/* --- планшет: макета нет ----------------------------------------------- */

/* Колонка уже 1640 — знак прижат вправо и уходит под фото */
@media (max-width: 1735px) {
  .s-checks__sign { left: auto; right: 0; }
}

@media (max-width: 1439px) {
  .s-checks { height: auto; }
  .s-checks__grid { width: 100%; }
  .s-checks__sign,
  .s-checks__photo { display: none; }

  .s-liquid { padding-top: 80px; }
  .s-liquid__title { font-size: 56px; }
  .s-liquid__card {
    flex-direction: column;
    height: auto;
    margin-top: 60px;
    padding: 48px;
  }
  .s-liquid__steps { flex: none; width: 100%; }
  .s-liquid__cta { flex: none; width: 264px; margin-top: 0; }
}

@media (max-width: 1023px) {
  .s-liquid__title { font-size: 44px; }
  .s-liquid__steps { grid-template-columns: 1fr; }
}

/* --- мобильный 360 (2523:298) --------------------------------------------
   Карточки с галочками столбиком 312 на 996: высоты 73/88/68/68/104/68
   (рамки текста 33/48/28/28/64/28 + поля 20), зазоры в макете неровные —
   20/20/20/14/24. Через 40 — фото 241x276 на x 18 (сдвиг −6 от колонки),
   знак 172x171 на (164, 1646); картинка во всю ширину рамки. */

@media (max-width: 767px) {
  .s-checks { width: calc(100% - 48px); }

  .s-checks__grid {
    display: block;
    width: 100%;
  }

  .s-checks__card {
    display: block;
    height: 68px;
    padding: 20px;
    border-radius: 30px;
  }

  .s-checks__card + .s-checks__card { margin-top: 20px; }
  .s-checks__card:nth-child(1) { height: 73px; }
  .s-checks__card:nth-child(2) { height: 88px; }
  .s-checks__card:nth-child(5) { height: 104px; margin-top: 14px; }
  .s-checks__card:nth-child(6) { margin-top: 24px; }

  .s-checks__br { display: inline; }

  .s-checks__text {
    max-width: 200px;
    margin: -4.589px 0 -3.845px;
    font-size: 12px;
    line-height: 17px;
  }

  .s-checks__check {
    top: 21px;
    right: 20px;
    width: 20px;
    height: 20px;
    background-image: url('../img/icon-check.svg');
  }

  .s-checks__media {
    position: relative;
    height: 276px;
    margin-top: 40px;
  }

  .s-checks__sign,
  .s-checks__photo { display: block; right: auto; }

  .s-checks__sign { left: 140px; top: 43px; width: 172px; height: 171px; }

  .s-checks__photo { left: -6px; width: 241px; height: 276px; }

  .s-checks__photo img { left: -0.11%; width: 100.19%; }

  /* после тёмной карточки 60; строки через 40, рамка 153 при 145.7, до карточек 40 */
  .s-liquid { padding-top: 60px; }
  .s-liquid__inner { width: calc(100% - 48px); }
  .s-liquid__title { margin: -8.267px auto -6.034px; font-size: 36px; line-height: 40px; }

  .s-liquid__card {
    display: block;
    height: auto;
    margin: 47.3px -24px 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .s-liquid__steps { display: block; }

  /* шаги отдельными карточками внахлёст: 2588 / 2790 / 2986, высоты 306 / 320 / 311 */
  .s-liquid__step {
    position: relative;
    height: 306px;
    padding: 60px 32px 0;
    border-radius: 30px 30px 0 0;
    background: #ecf0f2;
  }

  .s-liquid__step + .s-liquid__step { box-shadow: 0 -6px 8.9px rgba(11, 33, 46, 0.07); }
  .s-liquid__step:nth-child(2) { height: 320px; margin-top: -104px; }
  .s-liquid__step:nth-child(3) { height: 311px; margin-top: -124px; }

  .s-liquid__step-title {
    margin: -4.589px 0 -3.845px;
    font-size: 12px;
    line-height: 17px;
  }

  /* рамка заголовка 11 при 8.57 → 20 + 2.43 − 4.589; у второго рамки нет */
  .s-liquid__step-text {
    margin: 17.84px 0 -3.845px;
    font-size: 12px;
    line-height: 17px;
  }

  .s-liquid__step:nth-child(2) .s-liquid__step-title { line-height: 16px; margin: -4.089px 0 -3.345px; }
  .s-liquid__step:nth-child(2) .s-liquid__step-text { margin-top: 15.41px; }
  .s-liquid__step:last-child .s-liquid__step-text { max-width: none; }

  /* Кнопка в разметке после списка — ставим в последнюю карточку: карточка
     на 306 − 104 + 320 − 124 = 398, кнопка в ней на 60 + 11 + 20 + 84 + 40 = 215 */
  .s-liquid__card { position: relative; }

  .s-liquid__cta {
    position: absolute;
    left: 32px;
    right: 32px;
    top: 613px;
    width: auto;
    height: 36px;
    font-size: 10px;
  }
}


/* --- css/sections/price.css --- */
/* ==========================================================================
   Окно «Прайс-лист» (все страницы, кнопка «Прайс-лист» в шапке)
   Макет: десктоп 2437:87 (1920x6562), мобильный 2523:1967 (360x7148).

   В макете это отдельный экран без шапки, на мобилке с крестиком — сделан
   нативным <dialog> во весь экран (каркас .m-team из team-modal.css),
   скроллится .m-price__body. Внутри: шапка 600 с синим знаком, таблицы цен,
   калькулятор (копия секции, свои id). Футер в окно не входит.

   Таблица — ряды-«таблетки» r24: заголовок #d5e4ea, строки rgba(213,228,234,.3).
   Колонки 300 / 150 / 250 через 20 + черта 0.5x20 + 20 (черты — псевдоэлементы
   ячеек на x 350 и 540; уже 830 колонки сжимаются, черты едут с ними). Строки текста через 21 (Figma округляет 20.8),
   обрезка по капители −5.285 / −4.293. Ряд: поля 24 (у первого после
   заголовка 25), высота не меньше черты — 68 / 70.

   Мобильный макет — черновик (тексты и заголовки таблиц местами из соседних
   таблиц), взяты только метрики: кегль 10, строки 14, колонки 90 / 46 / 112
   через 10, черты во всю высоту ряда.
   ========================================================================== */

.m-price[open] {
  display: block;
  animation: m-team-fade .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .m-price[open] { animation: none; }
}

.m-price__body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 100px;
}

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

.m-price__hero {
  height: 600px;
  padding-left: 100px;
  border-radius: 0 0 30px 30px;
  background: url('../img/price-hero.webp') 0 0 / 1920px 600px no-repeat var(--c-blue-lt);
}

/* капитель на 126 */
.m-price__title {
  max-width: 738px;
  margin: 0;
  padding-top: 109.87px;
  margin-bottom: -11.668px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.1;
}

/* рамка заголовка 229 при 209.8 по капители, через 30 лид */
.m-price__lead {
  max-width: 526px;
  margin-top: 43.915px;   /* 229 + 30 − 209.8 − 5.285 */
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
}

/* --- разделы --------------------------------------------------------------- */

.m-price__section { padding: 0 100px; }

/* заголовок 36/1.1: капитель на 100 ниже шапки (700), рамка 35, до таблиц 60 */
.m-price__h {
  margin: 91.934px 0 -5.834px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

/* второй раздел — капитель на 80 ниже сетки первого */
.m-price__section + .m-price__section .m-price__h { margin-top: 71.934px; }

/* Сетка первого раздела. В макете 4 ряда (469/467/469/538), второй — копия
   первого; по прототипу заказчика копия убрана, высоты рядов по содержимому */
.m-price__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 830px));
  align-items: start;
  gap: 60px;
  margin-top: 69.3px;   /* 35 + 60 − 25.7 */
}

/* Второй раздел — две колонки блоков через 60 */
.m-price__cols {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-top: 69.3px;
}

.m-price__col {
  flex: 0 1 830px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  min-width: 0;
}

/* Зазоры второго раздела в макете неровные — повторены:
   «ОПФ» 12, «Сверка с ФНС» 16, «Учёт кадров» 13, блоки справа через 61 */
.m-price__col:first-child > .m-price__table:first-child { gap: 12px; }
.m-price__col:first-child > .m-price__table:last-child { gap: 16px; }
.m-price__col:last-child { gap: 61px; }
.m-price__col:last-child > .m-price__table:first-child { gap: 13px; }

/* --- таблица --------------------------------------------------------------- */

.m-price__table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-price__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 68px;
  /* справа 20, а не 30: по макету третья колонка заходит в поле на 10 */
  padding: 24px 20px 24px 30px;
  border-radius: 24px;
  background: rgba(213, 228, 234, 0.3);
}

.m-price__row--head { background: var(--c-blue-lt); font-weight: 700; }
.m-price__row--head + .m-price__row { min-height: 70px; padding-block: 25px; }

.m-price__cell {
  position: relative;
  flex: 0 1 300px;   /* уже 830 колонки сжимаются пропорционально, текст переносится */
  min-width: 0;
  margin: -5.285px 0 -4.293px;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}

.m-price__cell:nth-child(2) { flex-basis: 150px; }
.m-price__cell:nth-child(3) { flex-basis: 250px; }

/* Черты между колонками — у ячеек, чтобы ехали вместе с ними: посередине
   зазора 40, по центру ряда (+0.496 — поправка на обрезку по капители) */
.m-price__cell + .m-price__cell::before {
  content: '';
  position: absolute;
  top: calc(50% + 0.496px);
  left: -20.25px;
  width: 0.5px;
  height: 20px;
  margin-top: -10px;
  background: #000;
}

.m-price__row--head .m-price__cell + .m-price__cell::before { background: var(--c-text); }

.m-price__row--single .m-price__cell:first-child { font-weight: 700; }

/* --- калькулятор внутри окна: капитель на 100 ниже таблиц ------------------ */

.s-calc--price { padding: 83.866px 0 0; }

/* --- планшет: макета нет ----------------------------------------------- */

@media (max-width: 1919px) {
  .m-price__hero { background-position: right 0 top 0; }
}

/* Ряды уже 830 (с учётом скроллбара) — ручные переносы в ячейках рвут строки.
   В заголовках таблиц оставляем: «(с выручкой…)» лучше смотрится отдельной строкой */
@media (max-width: 1839px) {
  .m-price__row:not(.m-price__row--head) br { display: none; }
}

@media (max-width: 1799px) {
  .m-price__hero,
  .m-price__section { padding-left: 48px; padding-right: 48px; }

  .m-price__grid,
  .m-price__cols { justify-content: center; }
}

@media (max-width: 1439px) {
  .m-price__title { font-size: 56px; }

  .m-price__grid { grid-template-columns: minmax(0, 830px); }

  .m-price__cols { flex-direction: column; align-items: center; }
  .m-price__col { flex: none; width: 100%; max-width: 830px; }
}

@media (max-width: 1023px) {
  .m-price__title { font-size: 44px; }
}

/* --- мобильный 360 (2523:1967) ------------------------------------------- */

@media (max-width: 767px) {
  .m-price .m-team__close { top: 30px; right: 20px; }

  .m-price__body { padding-bottom: 60px; }

  /* 360x640, заголовок 24/1.1 с капителью на 60 (рамка 76), через 20 лид 12
     (строки через 17) */
  .m-price__hero {
    height: 640px;
    padding: 0 24px;
    background: url('../img/price-hero-m.webp') 0 0 / 360px 640px no-repeat var(--c-blue-lt);
  }

  .m-price__title {
    max-width: none;
    padding-top: 54.62px;
    margin-bottom: -3.89px;
    font-size: 24px;
  }

  .m-price__lead {
    max-width: none;
    margin-top: 21.48px;   /* 76 + 20 − 69.93 − 4.589 */
    font-size: 12px;
    line-height: 17px;
  }

  .m-price__section { padding: 0 24px; }

  /* 20/1.1, капитель на 60 ниже шапки, рамка 41 в 2 строки, до таблиц 30 */
  .m-price__h {
    margin: 55.519px 0 -3.241px;
    padding-right: 16px;
    font-size: 20px;
  }

  .m-price__section + .m-price__section .m-price__h { margin-top: 55.519px; }

  .m-price__grid,
  .m-price__cols {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 34.72px;   /* 41 + 30 − 36.28 */
  }

  .m-price__cols .m-price__col:nth-child(n) { gap: 30px; }
  .m-price__cols .m-price__col:nth-child(n) > .m-price__table:nth-child(n) { gap: 10px; }

  .m-price__row {
    gap: 20px;
    min-height: 30px;
    padding: 10px;
  }

  .m-price__row--head + .m-price__row { min-height: 30px; padding-block: 10px; }

  /* черты во всю высоту ряда, на x 110 и 176 — у ряда, а не у ячеек */
  .m-price__cell + .m-price__cell::before { display: none; }

  .m-price__row::before,
  .m-price__row::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 109.75px;
    width: 0.5px;
    background: #000;
  }

  .m-price__row::after { left: 175.75px; }

  .m-price__row--head::before,
  .m-price__row--head::after { background: var(--c-text); }

  .m-price__cell {
    flex-basis: 90px;
    margin: -3.74px 0 -3.12px;
    font-size: 10px;
    line-height: 14px;
  }

  .m-price__cell:nth-child(2) { flex-basis: 46px; }
  .m-price__cell:nth-child(3) { flex: 1 1 112px; }

  .m-price__row br { display: none; }

  .s-calc--price { padding-top: 51.934px; }
}


/* --- css/sections/doc.css --- */
/* ==========================================================================
   Текстовые страницы: политика ПД, согласия, оферта (privacy.php, consent-*.php).
   Макета нет — шапка и кегли из героя, текст колонкой 900.
   ========================================================================== */

.s-page-top {
  position: relative;
  z-index: 2;              /* выпадашки шапки поверх текста */
  padding: 32px 0 100px;
  background: var(--c-dark);
  border-radius: 0 0 30px 30px;
  color: var(--c-white);
}

.s-page-top__title {
  max-width: 1100px;
  margin-top: 140px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
}

.s-page-top__lead {
  margin-top: 24px;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
}

.s-doc { padding: 100px 0 140px; }

.s-doc__body { max-width: 900px; }

.s-doc__body h2 {
  margin: 60px 0 20px;
  font-family: var(--f-body);
  font-size: 24px;
  line-height: 1.2;
}

.s-doc__body h2:first-child { margin-top: 0; }

.s-doc__body p {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}

.s-doc__body p + p { margin-top: 16px; }

.s-doc__body ul {
  margin: 12px 0 16px;
  padding-left: 1.2em;
  list-style: disc;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}

.s-doc__body li + li { margin-top: 4px; }

.s-doc__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-doc__body a:hover { text-decoration-color: transparent; }

@media (max-width: 1023px) {
  .s-page-top__title { margin-top: 100px; font-size: 44px; }
}

@media (max-width: 767px) {
  .s-page-top { padding: 20px 0 60px; }
  .s-page-top__title { margin-top: 70px; font-size: 30px; }
  .s-page-top__lead { margin-top: 16px; font-size: 12px; }

  .s-doc { padding: 60px 0 80px; }
  .s-doc__body h2 { margin: 40px 0 12px; font-size: 18px; }
  .s-doc__body p { font-size: 14px; }
  .s-doc__body p + p { margin-top: 12px; }
  .s-doc__body ul { margin: 8px 0 12px; font-size: 14px; }
}


/* --- css/sections/cookie.css --- */
/* ==========================================================================
   Баннер согласия на cookie (все страницы). Макета нет — токены кита.
   ========================================================================== */

.c-cookie {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;                        /* над фиксированной шапкой (50) */
  display: flex;
  align-items: center;
  gap: 30px;
  width: min(900px, 100% - 48px);
  padding: 20px 20px 20px 30px;
  background: var(--c-dark);
  border: 0.5px solid rgba(255, 255, 255, .3);
  border-radius: 30px;
  box-shadow: 0 10px 40px rgba(11, 33, 46, .3);
  color: var(--c-white);
  opacity: 0;
  transform: translate3d(-50%, 20px, 0);
  transition: opacity .4s ease, transform .4s ease;
}

.c-cookie[hidden] { display: none; }

.c-cookie.is-shown {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.c-cookie__text {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
}

.c-cookie__text a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .4);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}

.c-cookie__text a:hover { text-decoration-color: currentColor; }

.c-cookie__btn { flex: 0 0 150px; padding: 0; }

@media (max-width: 767px) {
  .c-cookie {
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: calc(100% - 24px);
    padding: 16px 20px 20px;
    border-radius: 20px;
  }

  .c-cookie__text { font-size: 12px; }

  .c-cookie__btn { flex: 0 0 auto; height: 36px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .c-cookie { transition: none; }
}


/* --- css/sections/reveal.css --- */
/* ==========================================================================
   Появление блоков при скролле: fade + небольшой подъём.
   Класс .reveal ставит reveal() в main.js, .is-visible — пока блок в экране.
   Без JS, при prefers-reduced-motion и с ?noanim в адресе (для headless-сверки)
   класс не ставится и всё видно сразу.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .6s ease var(--reveal-delay, 0s),
              transform .6s ease var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Сотрудники: быстрее, задержка по очереди — из JS на десктопе */
.s-team__card.reveal { transition-duration: .5s; }


/* --- css/wp.css --- */
/* ==========================================================================
   Добавки для WordPress: админ-бар, состояния формы заявки.
   ========================================================================== */

/* Админ-бар (виден только вошедшим) не перекрывает фиксированную шапку */
.admin-bar .s-header-wrap.is-fixed .s-header { margin-top: 32px; }
@media (max-width: 782px) {
  .admin-bar .s-header-wrap.is-fixed .s-header { margin-top: 46px; }
}

/* Ловушка для ботов */
.m-form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Ошибка отправки под формой */
.m-form__msg {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-error);
}

.m-form__submit[disabled] { opacity: .6; cursor: progress; }

/* Экран «Спасибо» вместо формы. Макета нет — на токенах формы */
.m-form__done {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 300px;
}

.m-form__done-text {
  margin-top: 40px;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}

/* display: flex у формы и «Спасибо» перебивает атрибут hidden */
.m-form__form[hidden],
.m-form__done[hidden] { display: none; }

@media (max-width: 767px) {
  .m-form__msg { font-size: 14px; }
  .m-form__done { min-height: 240px; }
  .m-form__done-text { margin-top: 24px; font-size: 14px; }
}

/* Заголовки окон — div, а не h2/h3: не засоряют структуру заголовков страниц (SEO).
   Шрифт как у h1–h4 в base.css; :where — чтобы не перебить стили секций. */
:where(.m-team__name, .m-team__h, .m-price__title, .m-price__h, .m-form__title) {
  font-family: var(--f-head);
  font-weight: 700;
}