/* =====================================================================
   6. HOW IT WORKS
   Десктоп: слева картинка шага, справа таймлайн. Каждая карточка «прилипает»
   при прокрутке (data-sticky в index.html) и ложится поверх предыдущей.
   Файл подключается только на десктопе (≥1250px); планшет/телефон — how-mobile.css.

   --rx — сдвиг правой колонки (таймлайн, тексты); на 1250–1439 она ближе.
   --img-w / --img-h — размер картинки шага.
   ===================================================================== */

.how { height: 2648px; --rx: 0px; --img-w: 716px; --img-h: 322px; }
.how__tabs   { position: absolute; left: 504px; top: 10px; z-index: 2; }
.how__panels { position: absolute; inset: 0; }
.how__stack > * { position: absolute; }

/* ---- общие элементы шага ---- */
.step, .bstep { width: 1320px; height: 348px; }
.step__img     { position: absolute; left: 0; top: 25px; width: var(--img-w); height: var(--img-h); object-fit: cover; }
.step__icon    { position: absolute; left: calc(839px + var(--rx)); top: 70px; width: 25px; }
.step__text    { position: absolute; left: calc(876px + var(--rx)); top: 73px; width: 322px; font-size: 14px; line-height: 16.8px; background: var(--bg); }
.step__line    { position: absolute; width: 1px; background: var(--line); }
.step__diamond { position: absolute; width: 12px; height: 12px; margin: 2.5px; background: var(--cyan); rotate: 45deg; }  /* left/top — по описанному квадрату 17px */
.bstep:not(.bstep--first) > .step__diamond { display: none; }   /* нужны только на планшете/телефоне */

/* ---- вступление (прилипает выше всех) ---- */
.how-intro { width: 1320px; height: 572px; }
.how-intro__eyebrow { position: absolute; left: 4px; top: 14px; font: 500 18px/0 var(--head); }
.how-intro__title   { position: absolute; left: 3px; top: 32px; width: 645px; font: 500 50px/50px var(--head); }
.how-intro__text    { position: absolute; left: 2.3px; top: 95px; width: 764px; line-height: 19.2px; }
.how-intro__btn     { position: absolute; left: 2px; top: 202px; }

/* первый шаг лежит внутри вступления */
.step--first { position: absolute; left: 0; top: 0; }
.step--first .step__img     { top: 250px; }
.step--first .step__line    { left: calc(851px + var(--rx)); top: 201px; height: 370px; }
.step--first .step__diamond { left: calc(842.5px + var(--rx)); top: 191px; }
.step--first .step__icon    { left: calc(838px + var(--rx)); top: 295px; }
.step__heading { position: absolute; left: calc(873px + var(--rx)); top: 200px; width: 433px; font: 500 24px/0 var(--head); }
.step__text--single { top: 308px; line-height: 0; background: none; }

/* финальный шаг */
.step--final .step__img { top: 0; }
.step__final { position: absolute; left: calc(827px + var(--rx)); top: -26px; width: 440px; height: 380px; background: var(--bg); }
.step__final .step__line    { left: 24px; top: 41px; height: 339px; }
.step__final .step__diamond { left: 16.5px; top: 31px; }
.step__final-text { position: absolute; left: 50.1px; top: 29px; width: 372px; font: 500 24px/28.8px var(--head); }
.step__final .btn { position: absolute; left: 53px; top: 131px; }

/* расположение карточек (consumers) */
.how__stack--consumers .how-intro { left: 61px; top: 97px; }
.how__stack--consumers .step--2   { left: 61px; top: 759px; }
.how__stack--consumers .step--3   { left: 60px; top: 1196px; }
.how__stack--consumers .step--4   { left: 60px; top: 1648px; }
.how__stack--consumers .step--4 .step__text { left: calc(878px + var(--rx)); }
.how__stack--consumers .step--final { left: 61px; top: 2114px; }

/* ---- Businesses ----
   Колонка текста: --t-* — отступы сверху заголовка, текста, подписи, списка, примечания */
.bstep__panel { position: absolute; width: 446px; height: 365px; background: var(--bg); }
.bstep__col   { position: absolute; width: 380px; }
.bstep__col > * { position: absolute; left: 0; }
.bstep__title { left: -4.4px; width: 445px; font: 500 24px/24px var(--head); top: var(--t-title); }
.bstep__text  { top: var(--t-text); width: 364px; font-size: 14px; line-height: 16.8px; }
.bstep__text strong { font-family: var(--head); font-weight: 700; }
.bstep__text p + p { margin-top: 10px; }
.bstep__label { top: var(--t-label); font-size: 14px; line-height: 0; font-weight: 600; }
.bstep__note  { top: var(--t-note); width: 364px; font-size: 14px; line-height: 16.8px; }
.bullets      { top: var(--t-list); left: 31.6px; width: 347px; font-size: 14px; line-height: 16.8px; }
.bullets li   { position: relative; }
.bullets li + li { margin-top: 8.2px; }
.bullets--loose li + li { margin-top: 6.4px; }
.bullets li::before {     /* стрелка-маркер, повёрнутая на 45° */
  content: ""; position: absolute; left: -25.6px; top: -2px; width: 15px; height: 15px; margin: 3.1px;
  background: url(../../img/icon-arrow-bullet.png) center / contain no-repeat; rotate: 45deg;
}

.how__stack--businesses .how-intro { left: 49.1px; top: 97px; }
.how__stack--businesses .how-intro__title { width: 637px; }
.how__stack--businesses .how-intro__text  { top: 150px; width: 696px; }
.how__stack--businesses .how-intro__btn   { top: 192px; }

.bstep--first { position: absolute; left: 0; top: 0; --t-title: 0px; --t-text: 62px; --t-list: 172.6px; --t-note: 274px; }
.bstep--first .bstep__panel  { left: calc(884.4px + var(--rx)); top: 225px; height: 351px; }
.bstep--first .step__img     { left: 10.3px; top: 250px; }
.bstep--first .step__line    { left: calc(841.4px + var(--rx)); top: 250px; height: 321px; }
.bstep--first .step__diamond { left: calc(832.9px + var(--rx)); top: 246px; }
.bstep--first .step__icon    { left: calc(828.4px + var(--rx)); top: 315px; }
.bstep--first .bstep__col    { left: calc(904.4px + var(--rx)); top: 255px; }
.bstep--first .bstep__title  { line-height: 0; left: -5.2px; }
.bstep--first .bullets       { left: 29px; }
.bstep--first .bullets li + li { left: 3px; }   /* в дизайне пункты 2–4 чуть правее первого */

.how__stack--businesses .bstep--2 { left: 61.1px; top: 759px; --t-title: 18px; --t-text: 80px; --t-label: 201px; --t-list: 217.6px; --t-note: 324px; }
.how__stack--businesses .bstep--3 { left: 60.1px; top: 1196px; --t-title: 20px; --t-text: 92px; --t-list: 197px; }
.how__stack--businesses .bstep--4 { left: 60.1px; top: 1648px; --t-title: 18px; --t-text: 92px; --t-label: 219px; --t-list: 301.6px; --t-note: 331px; }
.how__stack--businesses .bstep--2 .bstep__panel { left: calc(873.1px + var(--rx)); top: 0; }
.how__stack--businesses .bstep--3 .bstep__panel,
.how__stack--businesses .bstep--4 .bstep__panel { left: calc(874px + var(--rx)); top: 0; }
.how__stack--businesses .bstep .step__icon { left: calc(817px + var(--rx)); top: 90px; }
.how__stack--businesses .bstep--3 .step__icon,
.how__stack--businesses .bstep--4 .step__icon { left: calc(818px + var(--rx)); }
.how__stack--businesses .bstep--2 .bstep__col { left: calc(893.1px + var(--rx)); top: 0; }
.how__stack--businesses .bstep--3 .bstep__col { left: calc(894.3px + var(--rx)); top: 0; }
.how__stack--businesses .bstep--4 .bstep__col { left: calc(895px + var(--rx)); top: 0; }
.how__stack--businesses .bstep--2 .bstep__text { width: 377px; }
.how__stack--businesses .bstep--3 .bstep__text { width: 320px; }
.how__stack--businesses .bstep--4 .bstep__text { width: 369px; }
.how__stack--businesses .bstep--3 .bullets { left: 25.6px; width: 343px; }
.how__stack--businesses .bstep--4 .bullets { left: 26px; }
.how__stack--businesses .bstep--4 .step__img { height: 331px; }
.how__stack--businesses .bstep--2 .step__img { left: -1px; }

.how__stack--businesses .step--final { left: 61.1px; top: 2114px; }
.how__stack--businesses .step__final { left: calc(791.4px + var(--rx)); width: 527.5px; }
.how__stack--businesses .step__final .step__line    { left: 38.5px; top: 67px; height: 298px; }
.how__stack--businesses .step__final .step__diamond { left: 30px; top: 59px; }
.how__stack--businesses .step__final-text { left: 103.5px; top: 54px; width: 425px; }
.how__stack--businesses .step__final .btn { left: 103px; top: 158px; }

/* desktop 1250–1439: в оригинале здесь пусто (ошибка Vev) — показываем блок,
   правая колонка ближе, картинки меньше */
@media (max-width: 1439px) {
  .how { --rx: -150px; --img-w: 600px; --img-h: 270px; }
  .how__tabs { left: 409px; }
  .how__stack .how-intro, .how__stack .step, .how__stack .bstep { margin-left: -30px; }
  .bstep__panel { width: 420px; }
  .how__stack--businesses .step__final { width: 480px; }
}