/* BetStop — the National Self-Exclusion Register.
 * Числа из фреймов baqqybet-betstop-desktop (1440) и baqqybet-betstop-mobile
 * (390): fig-spec / gen, не из головы. Класс страницы — M0: мобильная ветка
 * написана вместе с секцией.
 *
 * Три верхние секции набраны в макете гарнитурой Archivo (--font-text),
 * нижняя «Keep wagering in perspective» — Inter (--font-ui). Так в макете,
 * поэтому семейство задаётся посекционно.
 *
 * Чего не хватило в общих компонентах и что описано здесь: тёмная панель с
 * призывом (bs-panel), выноска с левой полосой (bs-callout), нумерованные
 * шаги с вертикальными разделителями (bs-how__steps) и блок ответственной
 * игры этой страницы (bs-rw) — на главной он свёрстан в pages/home.css с
 * другими числами (там нет разделителей между шагами). Общие файлы не
 * правились: по ним верстают другие страницы.
 */

/* ── betstop-intro (57:14) ────────────────────────────────────────────── */
.bs-intro {
  font-family: var(--font-text);
  background: var(--color-bg);
  padding-block: var(--space-64);
}
/* 952 (fill) + 32 + 360 = 1344 — контент десктопного фрейма. */
.bs-intro__row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-32); align-items: start; }
.bs-intro__copy { display: flex; flex-direction: column; gap: var(--space-16); }
.bs-intro__title {
  font-family: var(--font-text);
  font-size: var(--fs-d1); font-weight: 900; line-height: 70.4px; letter-spacing: -.0234em; /* -1.5px / 64px */
  color: var(--color-text-strong);
}
.bs-intro__lead { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text); }
.bs-intro__text { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text); }

/* Панель «Official service» — карточка с призывом. */
.bs-panel {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
}
.bs-panel__label {
  font-size: var(--fs-2xs); font-weight: 800; line-height: 12px; letter-spacing: .1091em; /* 1.2px / 11px */
  text-transform: uppercase; color: var(--color-text-muted);
}
.bs-panel__title { font-size: var(--fs-h6); font-weight: 900; line-height: 20px; color: var(--color-text-strong); }
.bs-panel__text  { font-size: var(--fs-body); line-height: 21px; color: var(--color-text); }
/* Подпись кнопки в макете набрана капсом сама — без text-transform и трекинга. */
.bs-panel__cta {
  min-height: 48px; padding: var(--space-14, 14px) var(--space-16);
  border-radius: var(--radius-12);
  font-family: var(--font-text);
  font-size: var(--fs-md); font-weight: 900; line-height: 16.32px; letter-spacing: normal;
}

/* ── how-betstop-works (57:24) ────────────────────────────────────────── */
.bs-how {
  font-family: var(--font-text);
  background: var(--color-bg-light); color: var(--color-text-dark);
  padding-block: var(--space-64);
}
.bs-how__inner  { display: flex; flex-direction: column; gap: var(--space-24); }
.bs-how__header { display: flex; flex-direction: column; gap: var(--space-8); }
.bs-how__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 13.06px; letter-spacing: .0833em; /* 1px / 12px */
  text-transform: uppercase; color: #0f172a;   /* из макета, в токенах такого нет */
}
.bs-how__title {
  font-family: var(--font-text);   /* h2 в base.css уходит в Inter — здесь Archivo макета */
  font-size: var(--fs-h2); font-weight: 900; line-height: 35px; color: var(--color-text-dark);
}
.bs-how__lead  { font-size: var(--fs-md); line-height: 22.5px; color: var(--color-text-dark-muted); }

/* Три колонки с вертикальными разделителями: 3×415.33 + 2×1 + 4×24 = 1344.
   Разделитель нарисован ровно посередине промежутка, поэтому gap 48, а полоса
   — псевдоэлемент на −24px. */
/* align-items: start — иначе шаги 02 и 03 растягиваются до высоты первого
   (415×152 в макете против 155 у step-01). */
.bs-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-48); align-items: start; }
.bs-step { position: relative; display: flex; flex-direction: column; gap: var(--space-10); }
.bs-step + .bs-step::before {
  content: ""; position: absolute; left: calc(var(--space-24) * -1); top: 0;
  height: max(155px, 100%);   /* column-separator в макете 1×155 — на всю строку */
  width: 1px; background: var(--color-border-light);
}
.bs-step__num {
  font-family: var(--font-mono);
  font-size: 40px;            /* кегля 40 в шкале токенов нет — число макета */
  font-weight: 500; line-height: 52px; letter-spacing: -.025em; /* -1px / 40px */
  color: var(--color-green); opacity: .6;
}
.bs-step__label {
  font-family: var(--font-text);
  font-size: var(--fs-sm); font-weight: 800; line-height: 14.14px; letter-spacing: .0385em; /* 0.5px / 13px */
  text-transform: uppercase; color: #0f172a;
}
.bs-step__text { font-size: var(--fs-body); line-height: 22px; color: var(--color-text-dark-muted); }
.bs-step__link {
  align-self: flex-start; position: relative;
  font-size: var(--fs-body); font-weight: 700; line-height: 15.23px;
  color: var(--color-green);
  text-decoration: underline; text-underline-offset: 3px;
}
.bs-step__link:hover { color: var(--color-text-dark); }
/* Тап-зона 24px псевдоэлементом: паддинг раздвинул бы колонки шагов. */
.bs-step__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

/* ── account-consequences (57:35) ─────────────────────────────────────── */
.bs-account {
  font-family: var(--font-text);
  background: var(--color-bg);
  padding-block: var(--space-64);
}
.bs-account__row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-32); align-items: start; }
.bs-account__content { display: flex; flex-direction: column; gap: var(--space-12); }
.bs-account__title {
  font-family: var(--font-text);
  font-size: var(--fs-h2); font-weight: 900; line-height: 35px;
  color: var(--color-text-strong);
}
.bs-account__lead { font-size: var(--fs-md); line-height: 24px; color: var(--color-text); }

.bs-account__list { display: flex; flex-direction: column; gap: var(--space-12); }
/* Маркер выровнен по базовой линии первой строки: в макете у него свой
   межстрочный 15.23, и растягивать его до высоты строки текста нельзя. */
.bs-account__item { display: flex; align-items: baseline; gap: var(--space-10); }
.bs-account__marker {
  flex: none;
  font-size: var(--fs-body); font-weight: 700; line-height: 15.23px;
  color: var(--color-text-strong);
}
.bs-account__text { font-size: var(--fs-md); line-height: 23.25px; color: var(--color-text); }
/* Абзац под списком набран с другим межстрочным, чем лид над ним. */
.bs-account__note { font-size: var(--fs-md); line-height: 23.25px; color: var(--color-text); }
.bs-account__link {
  align-self: flex-start; position: relative;
  font-size: var(--fs-body); font-weight: 700; line-height: 15.23px;
  color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.bs-account__link:hover { color: var(--color-text-strong); }
.bs-account__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

/* Выноска «Important»: та же панель, но с полосой 3px слева (макет). */
.bs-callout {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 3px 0 0 var(--color-border);   /* обводка только слева, 3px */
}
.bs-callout__label {
  font-size: var(--fs-2xs); font-weight: 800; line-height: 12px; letter-spacing: .1091em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.bs-callout__strong { font-size: var(--fs-body); font-weight: 500; line-height: 21px; color: var(--color-text); }
.bs-callout__text   { font-size: var(--fs-body); line-height: 21px; color: var(--color-text); }
/* Подпись в макете набрана капсом сама — text-transform не нужен. */
.bs-callout__link {
  /* В десктопном фрейме подпись занимает всю ширину выноски (312), в мобильном
     жмётся по тексту — поэтому stretch здесь и flex-start в ветке 390. */
  align-self: stretch; position: relative;
  font-size: var(--fs-body); font-weight: 700; line-height: 15.23px;
  color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.bs-callout__link:hover { color: var(--color-text-strong); }
.bs-callout__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

/* ── responsible-wagering (58:1028) ───────────────────────────────────── */
/* На главной этот блок свёрстан в pages/home.css, но там другие числа:
   секция 48/48 без разделителей между шагами. Здесь свой набор. */
.bs-rw {
  font-family: var(--font-ui);
  background: var(--color-bg-light); color: var(--color-text-dark);
  padding-block: var(--space-48);
}
.bs-rw__inner { display: flex; flex-direction: column; gap: var(--space-24); }
.bs-rw__rule  { height: 1px; background: var(--color-border-light); border: 0; margin: 0; }
/* 520 + 24 + 800 = 1344. */
.bs-rw__grid  { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.bs-rw__left  { display: flex; flex-direction: column; gap: var(--space-16); }
.bs-rw__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: .0833em;
  text-transform: uppercase; color: var(--color-green-deep);
}
.bs-rw__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h1); font-weight: 900; line-height: 48px;
  color: var(--color-text-dark);
}
.bs-rw__lead { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }
.bs-rw__lead-narrow { display: none; }   /* редакция мобильного фрейма */

/* Между карточками в макете нарисована полоса 1px с зазором 16 сверху и снизу:
 * отдельный узел, поэтому шаг 33, а линия — псевдоэлемент вне бокса карточки. */
.bs-rw__actions { display: flex; flex-direction: column; gap: 33px; }
.bs-rw__action  { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.bs-rw__action + .bs-rw__action::before {
  content: ""; position: absolute; inset-inline: 0; top: -17px;
  height: 1px; background: var(--color-border-light);
}
.bs-rw__num {
  font-family: var(--font-ui);
  font-size: var(--fs-h1); font-weight: 900; line-height: 53.25px; letter-spacing: -.0227em; /* -1px / 44px */
  color: var(--color-green-deep);
}
.bs-rw__action-title { font-size: var(--fs-h6); font-weight: 900; line-height: 22px; color: var(--color-text-dark); }
.bs-rw__action-text  { font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted); }
.bs-rw__action-link {
  align-self: flex-start; position: relative;
  font-size: var(--fs-sm); font-weight: 800; line-height: 16px;
  color: var(--color-text-dark); text-decoration: none;
}
.bs-rw__action-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bs-rw__action-link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

.bs-rw__support {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: 69px; padding: var(--space-16) var(--space-20);
  background: var(--color-card);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.bs-rw__support-text  { display: flex; flex-direction: column; gap: var(--space-4); }
.bs-rw__support-title { font-size: var(--fs-body); font-weight: 900; line-height: 17px; color: var(--color-text-dark); }
.bs-rw__support-note  { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-dark-muted); }
.bs-rw__support-note a {
  position: relative;
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.bs-rw__support-note a:hover { color: var(--color-text-dark); }
.bs-rw__support-note a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }

/* ── планшет ──────────────────────────────────────────────────────────── */
/* Порог 1359: ниже него боковые панели 360 и сетка 520+800 не помещаются. */
@media (max-width: 1359px) {
  .bs-intro__row,
  .bs-account__row { grid-template-columns: minmax(0, 1fr); }
  .bs-rw__grid { grid-template-columns: minmax(0, 1fr); }
  .bs-how__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .bs-step + .bs-step::before { display: none; }
  .bs-step + .bs-step { padding-top: var(--space-24); border-top: 1px solid var(--color-border-light); }
  .bs-intro__title { font-size: var(--fs-d2); line-height: 58px; }
}

/* ── мобильная ветка макета (фрейм 390) ───────────────────────────────── */
@media (max-width: 767px) {
  .bs-intro { padding-block: var(--space-40); }
  .bs-intro__row  { gap: var(--space-12); }
  .bs-intro__copy { gap: var(--space-12); }
  .bs-intro__title { font-size: var(--fs-h2); line-height: 39px; letter-spacing: normal; }
  .bs-intro__lead  { line-height: 19.36px; }
  .bs-intro__text  { font-size: var(--fs-body); line-height: 17px; }

  .bs-panel { gap: var(--space-10); padding: 25px 21px; }   /* дети панели в макете стоят на +25/+21 от её края */
  /* На мобильном макет красит эту метку в акцент — решение дизайнера, не наследование. */
  .bs-panel__label { letter-spacing: .0909em; color: var(--color-accent); }
  .bs-panel__title { line-height: 22px; }
  .bs-panel__text  { line-height: 17px; }
  .bs-panel__cta   { min-height: 43px; padding: 13px var(--space-16); border-radius: var(--radius-10); font-size: var(--fs-body); line-height: 17px; }

  .bs-how { padding-block: var(--space-40); }
  .bs-how__eyebrow { font-size: var(--fs-2xs); line-height: 13.31px; letter-spacing: .0909em; color: var(--color-text-dark); }
  .bs-how__title   { font-size: var(--fs-h4); line-height: 29.05px; }
  .bs-how__lead    { font-size: var(--fs-body); line-height: 17px; }
  /* В мобильном фрейме шаги идут в столбик, разделители — горизонтальные. */
  .bs-how__steps { gap: 0; }
  .bs-step { gap: var(--space-8); padding-block: var(--space-20); }
  .bs-step + .bs-step { padding-top: var(--space-20); }
  .bs-step__num   { font-size: var(--fs-h2); line-height: 42px; letter-spacing: normal; }
  .bs-step__label { font-size: var(--fs-xs); line-height: 15px; letter-spacing: .0417em; color: var(--color-text-dark); }
  .bs-step__text  { line-height: 17px; }
  .bs-step__link  { line-height: 17px; color: var(--color-text-dark); }

  .bs-account { padding-block: var(--space-40); }
  .bs-account__row     { gap: var(--space-16); }
  .bs-account__content { gap: var(--space-16); }
  .bs-account__title { font-size: var(--fs-h4); line-height: 29px; }
  .bs-account__lead  { font-size: var(--fs-body); line-height: 17px; }
  .bs-account__marker { line-height: 17px; color: var(--color-accent); }
  .bs-account__text   { font-size: var(--fs-body); line-height: 17px; }
  .bs-account__link   { line-height: 17px; }
  /* Сноска под списком в мобильном фрейме набрана 14/17, а не 15/23.25. */
  .bs-account__note   { font-size: var(--fs-body); line-height: 17px; }

  .bs-callout { gap: var(--space-10); padding: 21px; }   /* дети выноски в макете на +21: при 20 строки не переносятся как в макете */
  .bs-callout__label  { letter-spacing: .0909em; color: var(--color-accent); }
  .bs-callout__strong { line-height: 17px; color: var(--color-text-strong); }
  .bs-callout__text   { line-height: 17px; }
  .bs-callout__link   { align-self: flex-start; line-height: 17px; }

  .bs-rw { padding-block: var(--space-40); }
  .bs-rw__grid { gap: var(--space-24); }
  .bs-rw__left { gap: var(--space-12); }
  .bs-rw__title { font-size: var(--fs-h3); line-height: 31px; }
  .bs-rw__lead  { font-size: var(--fs-body); line-height: 21px; }
  .bs-rw__lead-wide   { display: none; }
  .bs-rw__lead-narrow { display: inline; }
  .bs-rw__action { gap: var(--space-6); }
  .bs-rw__num    { font-size: var(--fs-h2); line-height: 39px; letter-spacing: -.0313em; /* -1px / 32px */ }
  .bs-rw__action-title { font-size: var(--fs-lg); line-height: 19.36px; }
  .bs-rw__action-text  { font-size: var(--fs-sm); line-height: 18px; }
  .bs-rw__support {
    flex-direction: column; align-items: flex-start; gap: var(--space-12);
    padding: var(--space-16); border-radius: var(--radius-12);
  }
  .bs-rw__support-note { font-size: var(--fs-xs); line-height: 15px; }
}