/* betstop — правки по макету поверх pages.css.
   Файл подключается после pages.css, поэтому правила с той же
   специфичностью здесь выигрывают. Значения — числами из макета.

   Селекторы намеренно с префиксом .page-betstop: мобильные блоки pages.css
   написаны так же (0,2,0), и без префикса они перебивали бы этот файл. */

/* ── Герой: печать «STOP / EXCLUDE» (0:3080 / 4:963) ───────────────────────
   Круг — auto layout center/center, «STOP» стоит ровно по центру, а «EXCLUDE»
   лежит абсолютно: на десктопе его верх на 260 от верха круга (0:3082 y 518
   при круге y 258), на мобильном — на 150 (4:965 y 622 при круге y 472).
   Раньше оба слоя центрировались вместе, а на мобильном ещё и прижимались
   к верху — «STOP» вылезал за круг, «EXCLUDE» не был виден вовсе. */
.page-betstop .bs-hero__stamp-bottom {
  position: absolute;
  top: 260px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 54px;
  line-height: 58.75px;
  opacity: .15;
}

/* ── Полоса действия (0:3083) ──────────────────────────────────────────────
   Кнопка 50, а не 56; подпись под ней 13/16.9 приглушённым. */
.page-betstop .bs-action .btn { height: 50px; }
.page-betstop .bs-action__text { font-size: 13px; line-height: 16.9px; color: var(--color-muted); }

/* ── Как это работает (0:3100) ─────────────────────────────────────────────
   0:3102 — кикер набран Archivo Narrow 700 16/21.55 брендовым, а не Archivo
   Black приглушённо-красным. */
.page-betstop .bs-how__kicker {
  font-family: var(--font-narrow);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 21.55px;
  color: var(--color-brand);
}

.page-betstop .bs-how__head { gap: 16px; }                 /* 0:3101 — gap16 */
.page-betstop .bs-how__title { font-size: 48px; line-height: 52.22px; }

/* 0:3105 / 0:3112 / 0:3118 — красный номер только у первого шага */
.page-betstop .bs-step__num { color: var(--color-ink); }
.page-betstop .bs-how .bs-step:first-of-type .bs-step__num { color: var(--color-brand); }

/* 0:3110 — линия 1.5px тёмным при прозрачности 0.15 */
.page-betstop .bs-rule { height: 0; border: 0; box-shadow: 0 0 0 .75px rgba(18, 14, 13, .15); }

/* ── Переход (0:3136) ──────────────────────────────────────────────────────
   0:3137 — заголовок кремовый #f4e2cf, а не белый; 0:3138 — абзац белый
   при прозрачности 0.8. */
.page-betstop .bs-transition__title { color: var(--color-paper); font-size: 56px; line-height: 61.6px; }
.page-betstop .bs-transition__text { font-size: 18px; line-height: 23.4px; opacity: .8; }

/* ── Последствия для аккаунта (0:3139) ─────────────────────────────────────
   0:3140 — строка это три колонки 80 / 380 / 660 с зазором 40. Бейдж стоит
   ПОД заголовком в средней колонке, а не рядом с ним, и у каждой строки свой
   цвет: 01 красный, 02 тёмный, 03–04 серо-бежевый. Разделитель — снизу
   у каждой строки, включая последнюю (0:3161 тоже с обводкой). */
.page-betstop .bs-effects { min-height: 778px; padding-block: 80px; }

.page-betstop .bs-effect {
  min-height: 0;
  border-top: 0;
  /* обводка в макете INSIDE — рисуем тенью, чтобы не менять высоту строки */
  box-shadow: inset 0 -1px 0 rgba(18, 14, 13, .125);
}

.page-betstop .bs-effect__num { font-size: 32px; line-height: 34.82px; color: var(--color-ink); }
.page-betstop .bs-effects .bs-effect:first-child .bs-effect__num { color: var(--color-brand); }

/* 0:3142 — заголовок и бейдж это колонка с зазором 12 */
.page-betstop .bs-effect__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.page-betstop .bs-effect__title { font-size: 20px; line-height: 21.76px; }
.page-betstop .bs-effect__status { display: flex; }
.page-betstop .bs-effect__body { display: flex; flex-direction: column; gap: 16px; }
.page-betstop .bs-effect__text { font-size: 15px; line-height: 24px; color: var(--color-muted); }

/* 0:3144 — бейдж pad(4,10), радиус 4 */
.page-betstop .bs-effect .badge { padding: 4px 10px; border-radius: 4px; line-height: 14.3px; }
/* 0:3152 — на тёмном бейдже текст кремовый, а не белый */
.page-betstop .bs-effect .badge--ink { color: var(--color-paper); }
/* 0:3158 / 0:3165 — серо-бежевая плашка без обводки */
.page-betstop .bs-badge--mist { background: #e5e1db; color: var(--color-ink); }

/* ── Схема блокировок (0:3122 / 4:1006) ────────────────────────────────────
   Обводка 2px, радиус 8; подпись и бейдж — одна строка по краям.
   Связки между узлами: на широком горизонтальные, на узком вертикальные. */
.page-betstop .bs-diagram { gap: 20px; padding: 24px; box-shadow: inset 0 0 0 2px var(--color-ink); }

.page-betstop .bs-diagram__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-betstop .bs-diagram__label { font-size: 12px; line-height: 15.6px; }
.page-betstop .bs-diagram .badge { padding: 3px 8px; border-radius: 4px; line-height: 14.3px; }

.page-betstop .bs-diagram__row { flex-wrap: nowrap; gap: 16px; }

/* 0:3128 — узел провайдера 13/16.9 приглушённым, радиус 4, обводка 1 */
.page-betstop .bs-diagram__node {
  padding: 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 16.9px;
  color: var(--color-muted);
}

/* 0:3131 — центральный узел тёмный, Archivo Black 14/15.23, радиус 8 */
.page-betstop .bs-diagram__node--core {
  padding: 16px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 15.23px;
  color: var(--color-surface);
}

/* 0:3130 — связка это глиф, а не рамка: Archivo Black 16/17.41 брендовым */
.page-betstop .bs-diagram__line {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 17.41px;
  color: var(--color-brand);
}

.page-betstop .bs-diagram__line::before { content: "\2500\2500\2500"; }

/* Раскладка широкого макета. Держится в min-width намеренно: файл идёт после
   pages.css, и безусловное правило перебило бы её мобильные медиазапросы. */
@media (min-width: 1024px) {
  /* 0:3104 — колонка номера фиксированная 180, зазор 64 */
  .page-betstop .bs-step { grid-template-columns: 180px minmax(0, 1fr); gap: 64px; }
  .page-betstop .bs-step__num { font-size: 110px; line-height: 119.68px; }
  .page-betstop .bs-step__title { font-size: 24px; line-height: 26.11px; }
  /* 0:3108 — абзац шага шириной 720, а не во всю колонку 956 */
  .page-betstop .bs-step__lead { max-width: 720px; font-size: 16px; line-height: 26px; }
  /* 0:3122 — схема тоже 720, а не во всю колонку 956 */
  .page-betstop .bs-diagram { max-width: 720px; }
  .page-betstop .bs-step__text { gap: 24px; }
  .page-betstop .bs-how .bs-step:first-of-type .bs-step__text { gap: 20px; }  /* 0:3106 */

  /* 0:3140 — три колонки 80 / 380 / 660 с зазором 40 */
  .page-betstop .bs-effect {
    display: grid;
    grid-template-columns: 80px 380px minmax(0, 660px);
    column-gap: 40px;
    align-items: start;
    padding: 40px 0;
  }
}

@media (max-width: 767px) {
  /* 4:959 — «BET STOP.» набран 56/56, а не 64: на 64 строка не помещается
     в 358 и распирает документ ниже макетной ширины */
  .page-betstop .bs-hero__title { font-size: 56px; line-height: 56px; gap: 12px; }

  /* 4:963 — круг 220 с обводкой 6, «EXCLUDE» на 150 от верха */
  .page-betstop .bs-hero__stamp { align-items: center; box-shadow: inset 0 0 0 6px var(--color-ink); }
  .page-betstop .bs-hero__stamp-top { font-size: 56px; line-height: 60.93px; }
  .page-betstop .bs-hero__stamp-bottom { top: 150px; font-size: 32px; line-height: 34.82px; }

  /* 4:966 — pad(24,16,40,16), зазор 20, кнопка 50, подпись с зазором 6 */
  .page-betstop .bs-action { padding: 24px var(--gutter-mobile) 40px; gap: 20px; }
  .page-betstop .bs-action__note { gap: 6px; }
  .page-betstop .bs-action__text { font-size: 13px; line-height: 18px; }

  /* 4:984 — pad(56,16), зазор 40; заголовок 4:987 — 32/38 */
  .page-betstop .bs-how { padding: 56px var(--gutter-mobile); gap: 40px; }
  .page-betstop .bs-how__head { gap: 12px; }
  .page-betstop .bs-how__title { font-size: 32px; line-height: 38px; }
  .page-betstop .bs-step { gap: 16px; }
  /* min-height у шагов (pages.css) растягивает строки сетки и разводит номер
     с текстом на 18px: лишнюю высоту отдаём вниз, а не в зазор */
  .page-betstop .bs-how .bs-step { align-content: start; }
  /* 4:1003 — у третьего шага внутренний зазор 16, а не 12 как у первых двух:
     иначе схема блокировок под ним стоит на 8px выше макета */
  .page-betstop .bs-how .bs-step:nth-of-type(3) .bs-step__text { gap: 16px; }

  /* 4:1006 — схема: pad 16, зазор 16; узлы во всю ширину колонкой по центру,
     связки вертикальные (4:1014) */
  .page-betstop .bs-diagram { gap: 16px; padding: 16px; }
  .page-betstop .bs-diagram .badge { padding: 4px 10px; }
  .page-betstop .bs-diagram__label { font-size: 11px; line-height: 14.3px; }  /* 4:1008 */
  .page-betstop .bs-diagram__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-betstop .bs-diagram__node { justify-content: center; padding: 8px 16px; font-size: 12px; line-height: 15.6px; text-align: center; }
  .page-betstop .bs-diagram__node--core { padding: 10px 20px; font-size: 13px; line-height: 14.14px; }
  .page-betstop .bs-diagram__line { align-self: center; font-size: 14px; line-height: 15.23px; }
  .page-betstop .bs-diagram__line::before { content: "\2502"; }

  /* 4:1020 — pad(56,16), зазор 16; 4:1021 — 32/38, 4:1022 — 16/24 */
  .page-betstop .bs-transition { padding: 56px var(--gutter-mobile); gap: 16px; }
  .page-betstop .bs-transition__title { font-size: 32px; line-height: 38px; }
  .page-betstop .bs-transition__text { font-size: 16px; line-height: 24px; }

  /* 4:1023 — pad(40,16), зазор между строками 32.
     Номер и заголовок стоят в одной строке; бейдж у строк 02–04 уходит
     на свою строку во всю ширину, у 01 остаётся рядом с заголовком. */
  .page-betstop .bs-effects { padding: 40px var(--gutter-mobile); gap: 32px; min-height: 0; }

  .page-betstop .bs-effect {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
    padding: 0 0 24px;
    align-items: start;
  }

  .page-betstop .bs-effect__head,
  .page-betstop .bs-effect__body { display: contents; }

  .page-betstop .bs-effect__num { grid-column: 1; grid-row: 1; align-self: center; font-size: 28px; line-height: 30.46px; }
  .page-betstop .bs-effect__title { grid-column: 2 / -1; grid-row: 1; align-self: center; font-size: 16px; line-height: 17.41px; }
  .page-betstop .bs-effect__status { grid-column: 1 / -1; grid-row: 2; }
  .page-betstop .bs-effect__text { grid-column: 1 / -1; grid-row: 3; font-size: 14px; line-height: 20px; }

  /* 4:1024 — в первой строке бейдж стоит рядом с заголовком */
  .page-betstop .bs-effects .bs-effect:first-child .bs-effect__title { grid-column: 2; }
  .page-betstop .bs-effects .bs-effect:first-child .bs-effect__status { grid-column: 3; grid-row: 1; align-self: center; justify-self: start; }
  .page-betstop .bs-effects .bs-effect:first-child .bs-effect__text { grid-row: 2; }

  /* 4:1047 — у последней строки разделителя нет */
  .page-betstop .bs-effects .bs-effect:last-child { padding-bottom: 0; box-shadow: none; }

  /* 4:1055 — ссылка в макете отдельный блок ПОСЛЕ строки 04: 24 нижнего
     паддинга строки + 32 зазора секции + 8 паддинга блока − 12 зазора сетки */
  .page-betstop .bs-effect__more { grid-column: 1 / -1; grid-row: 4; padding-top: 52px; }

  /* 4:1044 — на мобильном плашка кремовая с обводкой 1px */
  .page-betstop .bs-badge--mist { background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-ink); }
}

/* Ниже макетной ширины эталона нет, задача одна — чтобы ничего не распирало
   документ. Правки держатся здесь, чтобы не доставать до 390. */
@media (max-width: 389px) {
  .page-betstop .bs-hero__title { flex-wrap: wrap; }

  .page-betstop .bs-effect { grid-template-columns: auto minmax(0, 1fr); }
  .page-betstop .bs-effects .bs-effect:first-child .bs-effect__title { grid-column: 2 / -1; }
  .page-betstop .bs-effects .bs-effect:first-child .bs-effect__status { grid-column: 1 / -1; grid-row: 2; }
  .page-betstop .bs-effects .bs-effect:first-child .bs-effect__text { grid-row: 3; }
}

/* 0:3053 — на этой странице кнопка шапки в макете КРЕМОВАЯ с чернильной
   обводкой, а не красная: из тринадцати десктопных фреймов так нарисован
   только betstop. Для страницы самоисключения это осмысленно — призыв
   зарегистрироваться там не выделяют. */
@media (min-width: 768px) {
.page-betstop .site-header__actions .btn--brand {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.page-betstop .site-header__actions .btn--brand:hover {
  background: var(--color-paper);
}
}

/* 15:731 — на мобильном фрейме кнопка остаётся красной: светлой она
   нарисована только в широком макете этой страницы. */