/* How it works — frame how-it-works[1:1244] / how-it-works-mobile[80:4]. */

/* the hero here has no photo: the text column runs the full 1223px (1:1271) */
.hero--wide .hero__inner { display: block; }
.hero__left--wide { max-width: 1223px; }
/* [36:15] the lead is one 1223-wide line here, not the shared 760 column */
.hero--wide .hero__lead { max-width: none; }

/* ── four steps (how-it-works[36:32]) ─────────────────────────────────── */
.steps__inner { display: flex; flex-direction: column; gap: var(--space-32); }
/* timeline-container[1:1317] is 242 = rule + 32 + card 210: no bottom padding */
.steps__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32);
  padding-block: var(--space-32) 0;
  border-top: 1px solid var(--color-border);
}
.step {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
}
/* card header[1:1321]: цифра слева, стрелка-указатель справа (arrow-right 16x16) */
.step__no {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-h4); line-height: 50.4px; font-weight: 800;
}
.step__no::after { content: "\2192"; font-size: 16px; line-height: 1; }
.step__title { font-size: var(--fs-body); line-height: 20.16px; font-weight: 800; text-transform: uppercase; }
/* [1:1326]/[1:1333]/[1:1347] .85, [1:1340] .9 на десктопе */
.step__text { font-size: var(--fs-xs); line-height: 20px; opacity: .85; }
.step--lime { background: var(--color-lime); box-shadow: none; }
.step--violet { background: var(--color-violet); color: #fff; box-shadow: none; }
.step--dark { background: var(--color-ink); color: #fff; box-shadow: none; }
.step--dark .step__no { color: var(--color-lime); }

/* ── gambling help strip (how-it-works[1:1379]) ───────────────────────── */
/* [1:1379]/[80:83]: фон #ffffff, обводка 1px #e5e7eb сверху и снизу */
.help-strip {
  background: var(--color-bg);
  box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
}
.help-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16); min-height: 64px; flex-wrap: wrap;
}
.help-strip__text { font-size: var(--fs-small); line-height: 18px; }
.help-strip__text a { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.help-strip__links { display: flex; align-items: center; gap: var(--space-16); }
/* badge[1:1382]: тёмная плашка pad 4/10, r4, текст 12/15.12 лаймом */
.help-strip .badge {
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
  background: var(--color-ink); color: var(--color-lime);
}
/* [36:72] «BetStop» — подпись рядом со ссылкой на реестр, 14/18 */
.help-strip__brand { font-size: var(--fs-small); line-height: 18px; font-weight: 800; }

@media (min-width: 1200px) {
  /* [1:1340] на десктопе .9, остальные три .85 */
  .step--violet .step__text { opacity: .9; }
  /* обводка карточек: [36:36]/[36:46]/[36:51] — 1px #1a1a1a, [36:41] — #e5e7eb */
  .step--lime, .step--violet, .step--dark { box-shadow: inset 0 0 0 1px var(--color-ink); }
  /* [1:1380] — одна строка: «… 1800 858 858 - Free and confidential support.» */
  .help-strip__note::before { content: "\2014\00a0"; }
}

@media (max-width: 1199px) {
  /* how-it-works-mobile hero[80:22]: pad 40/48, gap 24, eyebrow 11/14 gap 8 */
  .hero { padding-block: var(--space-40) var(--space-48); }
  .hero__left { gap: var(--space-24); }
  .eyebrow { font-size: var(--fs-3xs); line-height: 14px; gap: var(--space-8); }
  /* headline-stack[80:26] breaks «FROM THE MARKET» over two nodes
     ([80:27] «FROM THE» + [80:28] «MARKET»), 38/38 each; the markup has one
     span, so the break has to be forced to keep the 128px stack. */
  .hero__title .hero__line:first-child { max-width: 250px; }
  /* highlight-wrapper[80:29]: pad 4/8, текст 32/32 (на других фреймах 38/38) */
  .hero__line--2 .hero__mark { font-size: var(--fs-h5); line-height: 32px; padding: 4px 8px; }
  /* cta-primary[80:33] 358x48 with 14/18 text → 15px padding-block */
  .hero__ctas .btn { padding-block: 15px; }

  /* four-steps[80:37]: pad 48/48, header 92 (11/14 + gap 8 + 28/35) */
  .steps { padding-block: var(--space-48); box-shadow: inset 0 1px 0 var(--color-border); }
  .section-head__kicker { font-size: var(--fs-3xs); line-height: 14px; }
  .steps .section-head__stack { gap: var(--space-8); }
  .steps .section-title { font-size: var(--fs-h6); line-height: 35px; }
  .steps__inner { gap: var(--space-24); }
  /* timeline-container[80:41]: no padding, no rule — the 24px connectors
     between the cards become the grid gap */
  .steps__list {
    grid-template-columns: 1fr; gap: var(--space-24);
    padding-block: 0; border-top: 0;
  }
  /* timeline-card-01[80:42]: pad 20, «01» 32/40.32 then gap 16, title→text gap 8 */
  .step { padding: var(--space-20); gap: var(--space-8); }
  .step__no { font-size: var(--fs-h5); line-height: 40.32px; margin-bottom: var(--space-8); }

  /* gambling-help-strip[80:83]: колонка, pad 20, gap 12 */
  .help-strip__inner {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding-block: var(--space-20); gap: var(--space-12); min-height: 0;
  }
  /* [80:84]: две строки с зазором 4 — 13/16.38 Bold и 12/15.12 Regular */
  .help-strip__text { display: flex; flex-direction: column; gap: var(--space-4); }
  .help-strip__line { font-size: var(--fs-xs); line-height: 16.38px; font-weight: 700; }
  .help-strip__note { font-size: var(--fs-2xs); line-height: 15.12px; }
  /* strip-badges[80:87]: gap 12; badge pad 4/8, r2, 11/14; подписи 13/16.38 */
  .help-strip__links { gap: var(--space-12); }
  .help-strip .badge { padding: 4px 8px; border-radius: var(--radius-xs); font-size: var(--fs-3xs); line-height: 14px; }
  .help-strip__brand, .help-strip .link-arrow { font-size: var(--fs-xs); line-height: 16.38px; }
}