/* =====================================================================
   6. HOW IT WORKS — планшет и телефон (< 1250px)
   Подключается только на этих ширинах (media в index.html), десктоп — how.css.
   Шаги идут обычным столбиком: картинка, под ней иконка и текст,
   слева сквозная линия-таймлайн с ромбами. Ничего не прилипает.
   Вкладки Consumers / Businesses для этого блока стоят в конце секции solution.

   Координаты: у вступления — от верха секции, у шагов — от верха шага.
   ===================================================================== */

/* ---------- высота секции зависит от открытой вкладки ---------- */
.how { height: 2223px; }
.how:has([data-panel="businesses"].is-active) { height: 3028px; }

.how__tabs   { display: none; }
.how__stack [data-anim="scroll"] { --range: 50%; }
.step--4, .bstep--4 { --range: 30%; }
.how__panels { position: absolute; inset: 0; }
.how__stack  { position: relative; }
.how__stack > *, .how__stack > * > *, .step--first > *, .bstep--first > *, .step__final > *, .bstep__col > * { position: absolute; }

/* ---------- общий вид ---------- */
.how-intro__eyebrow { font: 500 18px/0 var(--head); }
.how-intro__title   { font: 500 40px/40px var(--head); }
.how-intro__text    { font-size: 14px; line-height: 16.8px; }
.step__img     { object-fit: cover; }
.step__icon    { width: 25px; }
.step__line    { width: 1px; background: var(--line); }
.step__diamond { width: 12px; height: 12px; margin: 2.5px; background: var(--cyan); rotate: 45deg; }  /* left/top — по описанному квадрату 17px */
.step__text    { font-size: 14px; line-height: 16.8px; background: var(--bg); }
.step__heading { font: 500 24px/0 var(--head); }
.step__text--single { line-height: 0; background: none; }
.step__final      { background: var(--bg); }
.step__final-text { font: 500 24px/28.8px var(--head); }

.bstep__panel { display: none; }
.bstep__title { font: 500 24px/24px var(--head); }
.bstep__text, .bstep__note { 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 { z-index: 1; width: 322px; height: 28px; font-size: 14px; line-height: 28px; font-weight: 600; background: var(--bg); }
.bullets      { font-size: 14px; line-height: 16.8px; }
.bullets li   { position: relative; }
.bullets li + li { margin-top: 8.2px; }
.bullets li::before {
  content: ""; position: absolute; left: -25.5px; top: -2px; width: 15px; height: 15px; margin: 3.1px;
  background: url(../../img/icon-arrow-bullet.png) center / contain no-repeat; rotate: 45deg;
}

/* =====================================================================
   ПЛАНШЕТ 740–1249
   ===================================================================== */

/* ---------- For Consumers ---------- */
.how-intro { left: 0; top: 0; width: 740px; height: 736px; }
.how-intro__eyebrow { left: 4.5px; top: 69px; }
.how-intro__title   { left: 3.5px; top: 87px; width: 645px; }
.how-intro__text    { left: 1.6px; top: 152px; width: 719px; }
.how-intro__btn     { left: 2.5px; top: 262px; }

.step--first { inset: 0; }
.step--first .step__img     { left: .5px; top: 322px; width: 716px; height: 322.2px; }
.step--first .step__heading { left: 52.5px; top: 666px; width: 463px; }
.step--first .step__line    { left: 35.5px; top: 666px; height: 1500px; }
.step--first .step__diamond { left: 27px; top: 656px; }
.step--first .step__icon    { left: 23.5px; top: 705.9px; }
.step--first .step__text    { left: 60.5px; top: 717px; width: 323px; }

.step--2, .step--3, .step--4 { left: -.5px; width: 740px; height: 416px; }
.step--2 { top: 739px; }
.step--3 { top: 1152px; }
.step--4 { top: 1568px; }
:is(.step--2, .step--3, .step--4) .step__img  { left: 0; top: 25px; width: 716px; height: 321.5px; }
:is(.step--2, .step--3, .step--4) .step__icon { left: 24px; top: 365px; }
:is(.step--2, .step--3, .step--4) .step__text { left: 61px; top: 368px; width: 322px; }

.step--final { top: 1984px; height: 190px; }
.step--final .step__img { display: none; }
.step__final { left: 0; top: 0; width: 450px; height: 190px; }
.step__final .step__line    { left: 36px; top: 0; height: 185px; }
.step__final .step__diamond { left: 27.5px; top: 29px; }
.step__final-text           { left: 60px; top: 24px; width: 390px; }
.step__final .btn           { left: 60px; top: 101px; }

/* ---------- For Businesses ----------
   В каждом шаге: картинка, ромб, иконка и колонка текста .bstep__col (x = 57.5).
   Внутри колонки заголовок выступает влево на 14px. */
.how__stack--businesses .how-intro { height: 888px; }
.how__stack--businesses .how-intro__eyebrow { left: 5.5px; }
.how__stack--businesses .how-intro__title   { left: 4.5px; top: 97px; width: 735px; }
.how__stack--businesses .how-intro__text    { left: 2.6px; top: 160px; width: 696px; }
.how__stack--businesses .how-intro__btn     { left: 3.5px; top: 196px; }

.bstep { left: 0; width: 740px; }
.bstep .step__img  { left: .5px; top: 25px; width: 716px; height: 321.5px; }
.bstep .step__diamond { left: 23px; }
.bstep .step__icon { left: 18.5px; }
.bstep__col        { left: 57.5px; top: 0; width: 659px; }
.bstep__col > *    { left: 0; }
.bstep__title      { left: -4px; }
.bstep__text, .bstep__note { width: 659px; }
.bstep__label      { left: 1px; }
.bullets           { left: 26px; width: 347px; }

.bstep--first { inset: 0; width: auto; }
.bstep--first .step__img     { left: 1px; top: 264px; }
.bstep--first .step__line    { left: 31.5px; top: 569px; height: 2279px; }
.bstep--first .step__diamond { left: 23.1px; top: 602px; }
.bstep--first .step__icon    { top: 656px; }
.bstep--first .bstep__title  { top: 611px; width: 445px; line-height: 0; }
.bstep--first .bstep__text   { top: 658px; }
.bstep--first .bullets       { top: 746.6px; }
.bstep--first .bstep__note   { top: 848px; width: 364px; }

.bstep--2 { top: 888px; height: 659px; }
.bstep--2 .step__img     { left: 1px; }
.bstep--2 .step__diamond { left: 23.1px; top: 368px; }
.bstep--2 .step__icon    { left: 19.5px; top: 420px; }
.bstep--2 .bstep__title  { top: 365px; width: 353px; }
.bstep--2 .bstep__text   { top: 439px; }
.bstep--2 .bstep__label  { top: 506px; }
.bstep--2 .bullets       { top: 532.6px; }
.bstep--2 .bstep__note   { top: 634px; }

.bstep--3 { top: 1548px; height: 575px; }
.bstep--3 .step__diamond { top: 371px; }
.bstep--3 .step__icon    { top: 420px; }
.bstep--3 .bstep__title  { top: 370px; width: 555px; }
.bstep--3 .bstep__text   { top: 422px; }
.bstep--3 .bullets       { top: 494px; }
.bstep--3 .bullets li + li { margin-top: 5.4px; }

.bstep--4 { top: 2125px; height: 682px; }
.bstep--4 .step__img     { height: 330.4px; }
.bstep--4 .step__diamond { top: 375px; }
.bstep--4 .step__icon    { top: 423px; }
.bstep--4 .bstep__title  { top: 372px; width: 240px; }
.bstep--4 .bstep__text   { top: 425px; }
.bstep--4 .bstep__label  { top: 538px; }
.bstep--4 .bullets       { top: 542.6px; }
.bstep--4 .bstep__note   { top: 639px; width: 366px; }

.how__stack--businesses .step--final { left: 0; top: 2807px; height: 217px; }
.how__stack--businesses .step__final { left: 58.5px; width: 450px; height: 209px; }
.how__stack--businesses .step__final .step__line    { left: -27px; top: 41px; height: 176px; }
.how__stack--businesses .step__final .step__diamond { left: -34.5px; top: 39px; }
.how__stack--businesses .step__final-text           { left: -1px; top: 33.3px; width: 390px; }
.how__stack--businesses .step__final .btn           { left: -1px; top: 137.3px; }

/* =====================================================================
   ТЕЛЕФОН < 740
   ===================================================================== */
@media (max-width: 739px) {
  .how { height: 1530px; }
  .how:has([data-panel="businesses"].is-active) { height: 2120px; }

  .how-intro__eyebrow { font-size: 14px; }
  .how-intro__title   { font-size: 25px; line-height: 25px; }
  .step__heading      { font-size: 16px; }
  .how__stack .btn    { height: 29px; }

  /* ---------- For Consumers ---------- */
  .how-intro { width: 320px; height: 624px; }
  .how-intro__eyebrow { left: .5px; top: 40px; }
  .how-intro__title   { left: .5px; top: 58px; width: 315px; }
  .how-intro__text    { left: .5px; top: 105px; width: 316px; }
  .how-intro__btn     { left: -.5px; top: 310px; }

  .step--first .step__img     { left: 1.5px; top: 419px; width: 318px; height: 143.1px; }
  .step--first .step__heading { left: 29.5px; top: 382px; width: 300px; }
  .step--first .step__line    { left: 12.5px; top: 384px; height: 1110px; }
  .step--first .step__diamond { left: 5px; top: 374px; }
  .step--first .step__icon    { left: .5px; top: 582px; }
  .step--first .step__text    { left: 39.5px; top: 593px; width: 280px; }

  .step--2, .step--3, .step--4 { left: .5px; width: 319px; height: 232px; }
  .step--2 { top: 628px; }
  .step--3 { top: 863px; }
  .step--4 { top: 1088px; }
  :is(.step--2, .step--3, .step--4) .step__img  { top: 0; width: 319px; height: 143px; }
  :is(.step--2, .step--3, .step--4) .step__icon { left: 1px; top: 161.5px; }
  :is(.step--2, .step--3, .step--4) .step__text { left: 39px; top: 160px; width: 237px; }
  .step--2 .step__icon { left: -.5px; }

  .step--final { left: 1.5px; top: 1327px; width: 318px; height: 177px; }
  .step__final { width: 318px; height: 177px; }
  .step__final .step__line    { display: none; }
  .step__final .step__diamond { left: 3.5px; top: 31.4px; }
  .step__final-text           { left: 38px; top: 25px; width: 280px; }
  .step__final .btn           { left: 38px; top: 126px; }

  /* ---------- For Businesses ---------- */
  .bstep__title { font-size: 16px; line-height: 16px; }
  .bstep__text, .bstep__note, .bullets { font-size: 12px; line-height: 14.4px; }
  .bstep__label { font-size: 12px; }
  .bullets li + li { margin-top: 5.6px; }
  .bullets li::before { left: -19.5px; top: -1px; width: 12px; height: 12px; margin: 2.5px; }

  .how__stack--businesses .how-intro { height: 645px; }
  .how__stack--businesses .how-intro__eyebrow { left: .5px; top: 39px; }
  .how__stack--businesses .how-intro__title   { left: .5px; top: 57px; width: 316px; }
  .how__stack--businesses .how-intro__text    { left: 1px; top: 115px; width: 317px; }
  .how__stack--businesses .how-intro__btn     { left: 2.5px; top: 162px; }

  .bstep { width: 321px; }
  .bstep .step__img     { left: .5px; top: 0; width: 321px; height: 143.9px; }
  .bstep .step__diamond { left: 4px; }
  .bstep .step__icon    { left: .5px; }
  .bstep__col   { left: 30.5px; width: 291px; }
  .bstep__title { left: 0; }
  .bstep__text, .bstep__note { width: 291px; }
  .bullets      { left: 20px; width: 270px; }
  .bstep__label { left: .8px; width: 245.5px; }

  .bstep--first .step__img     { top: 250px; }
  .bstep--first .step__line    { left: 12.5px; top: 223px; height: 1700px; }
  .bstep--first .step__diamond { top: 219px; }
  .bstep--first .step__icon    { top: 408px; }
  .bstep--first .bstep__title  { top: 228px; width: 300px; line-height: 0; }
  .bstep--first .bstep__text   { top: 411px; width: 289px; }
  .bstep--first .bullets       { top: 514.8px; }
  .bstep--first .bstep__note   { top: 599px; width: 283px; }

  .bstep--2 { top: 693px; height: 409px; }
  .bstep--2 .step__img     { left: .3px; width: 322px; height: 144.4px; }
  .bstep--2 .step__diamond { left: 4px; top: -29px; }
  .bstep--2 .step__icon    { left: .5px; top: 159px; }
  .bstep--2 .bstep__title  { top: -28px; width: 299px; }
  .bstep--2 .bstep__text   { top: 163px; width: 292px; }
  .bstep--2 .bstep__label  { top: 263px; }
  .bstep--2 .bullets       { top: 289.8px; }
  .bstep--2 .bstep__note   { top: 372px; width: 278px; }

  .bstep--3 { top: 1154px; height: 334px; }
  .bstep--3 .step__img     { top: 9px; }
  .bstep--3 .step__diamond { top: -34px; }
  .bstep--3 .step__icon    { top: 165px; }
  .bstep--3 .bstep__title  { left: -1px; top: -34px; width: 303px; }
  .bstep--3 .bstep__text   { top: 169px; }
  .bstep--3 .bullets       { top: 259px; width: 272px; }
  .bstep--3 .bullets li + li { margin-top: 6.2px; }

  .bstep--4 { top: 1529px; height: 403px; }
  .bstep--4 .step__img     { height: 148px; }
  .bstep--4 .step__diamond { top: -29px; }
  .bstep--4 .step__icon    { top: 154px; }
  .bstep--4 .bstep__col    { left: 31.5px; }
  .bstep--4 .bstep__title  { left: -1.1px; top: -29px; width: 271px; }
  .bstep--4 .bstep__text   { top: 158px; }
  .bstep--4 .bstep__label  { top: 256px; }
  .bstep--4 .bullets       { top: 282.8px; }
  .bstep--4 .bstep__note   { top: 367px; width: 278px; }

  .how__stack--businesses .step--final { top: 1925px; width: 322px; height: 195px; }
  .how__stack--businesses .step--final .step__img { display: none; }
  .how__stack--businesses .step__final { left: -.5px; width: 323px; height: 195px; }
  .how__stack--businesses .step__final .step__line    { display: block; left: 13px; top: -15px; height: 194px; }
  .how__stack--businesses .step__final .step__diamond { left: 4.5px; top: 18px; }
  .how__stack--businesses .step__final-text           { left: 40px; top: 14px; width: 283px; }
  .how__stack--businesses .step__final .btn           { left: 40px; top: 145px; }
}