/* ============================================================================
   pages.css — секции страниц. Порядок как в макете, сверху вниз.
   Числа взяты из figma-spec, не подобраны на глаз.
   ========================================================================= */

/* ── Главная: hero (0:31) ───────────────────────────────────────────────
   hero-body 1440×680, row. Слева 800×680 (padding 60 40 60 80, gap 40,
   justify center), справа постер 640×680.                                */

.hero {
  display: flex;
  align-items: stretch;
  height: 680px;
  background: var(--color-paper);
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-12);
  flex: 1;
  min-width: 0;
  padding: 60px 40px 60px var(--gutter);
}

/* Три группы с зазором 40; внутри первой (кикер + заголовок + лид) — 24.
   Зазор группы, а не зазор секции: иначе всё содержимое уезжает вниз,
   хотя бокс самого героя стоит верно. */
.hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.hero__head .kicker-pill { align-self: flex-start; }

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

/* В макете цвет меняется внутри строки посимвольно:
   «BACK» тёмный + «YOUR GAME.» красный, «KNOW» оранжевый + «YOUR LIMIT.» тёмный */
.hero__title em { font-style: normal; color: var(--color-brand); }
/* Специфичнее, чем .hero__title em: иначе правило-контейнер перебивает
   класс-модификатор при равном весе и «KNOW» становится красным. */
.hero__title .hero__accent { color: var(--color-amber-heading); }
.hero__line:last-child { color: var(--color-ink); }

.hero__lead {
  max-width: 680px;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  color: var(--color-muted);
}

.hero__actions { display: flex; align-items: center; gap: var(--space-8); }

/* Кнопки героя крупнее базовых: padding 18 36, шрифт 16/21 */
.btn--lg {
  padding: 18px 36px;
  font-size: var(--fs-body-lg);
  line-height: 21px;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.hero__note {
  font-size: var(--fs-label-xs);
  line-height: 16px;
  color: var(--color-muted);
}

/* Постер 640×680: коралловый фон, полоса слева 12px, водяной знак,
   фото 520×520 со смещением 60/80 от угла постера. */
.hero__poster {
  position: relative;
  flex: none;
  width: 640px;
  overflow: hidden;
  background: var(--color-flame);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.hero__stripe {
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: rgba(242, 13, 47, .6);
  z-index: 2;
}

.hero__watermark {
  position: absolute;
  top: 14px;
  left: -80px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 160px;
  line-height: 174px;
  text-transform: uppercase;
  color: rgba(242, 13, 47, .25);
  -webkit-text-stroke: 3px #fffcf7;
  opacity: .65;
  white-space: nowrap;
  pointer-events: none;
}

.hero__poster picture { position: relative; z-index: 1; }

.hero__image {
  position: absolute;
  top: 80px;
  left: 60px;
  width: 520px;
  height: 520px;
  object-fit: cover;
  z-index: 1;
}

/* Мобильный фрейм: постер под текстом, høyde по содержимому */
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    height: auto;
  }

  .hero__text {
    padding: var(--space-11) var(--gutter-mobile);
    gap: var(--space-9);
  }

  .hero__title { font-size: 42px; line-height: 44px; }
  .hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__poster { width: 100%; height: 380px; }
  .hero__watermark { font-size: 96px; line-height: 104px; left: -40px; }
  .hero__image { top: 40px; left: 40px; width: 300px; height: 300px; }
}

/* ── 404 ────────────────────────────────────────────────────────────────── */

.page-404__title {
  margin-top: var(--space-8);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.page-404__text {
  margin-top: var(--space-9);
  max-width: 60ch;
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: var(--color-muted);
}

.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* ── Лента видов спорта (0:51): 1440×54, gap 40, padding 16 0 ─────────── */

.ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  height: var(--h-ticker);
  padding-block: var(--space-8);
  background: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  color: var(--color-surface);
  overflow: hidden;
}

.ticker__item { display: flex; align-items: center; gap: var(--space-4); }

.ticker__label,
.ticker__star {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  text-transform: uppercase;
}

.ticker__item:last-child .ticker__star { display: none; }

/* ── Рынки и купон (0:73): row, gap 40, padding 64 80 ──────────────────── */

.betting {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-14) var(--gutter);
  background: var(--color-paper);
}

.betting__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  flex: 1;
  min-width: 0;
}

.betting__head { display: flex; flex-direction: column; gap: var(--space-10); }
.betting__intro { display: flex; flex-direction: column; gap: var(--space-4); }

.betting__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.betting__title { font-size: var(--fs-h4); line-height: 44px; }

.betting__note {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

/* Табы: padding 8 16, radius 100, Geist 800 12/16 */
.betting__head .tab {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-label-xs);
  line-height: 16px;
  letter-spacing: normal;
  box-shadow: none;
}

.betting__head .tab.is-active { box-shadow: none; }

.markets { display: flex; flex-direction: column; gap: var(--space-9); }

.markets__empty {
  padding: var(--space-11);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  font-size: var(--fs-body);
  line-height: 21px;
  color: var(--color-muted);
}

/* Карточка матча (0:106): 880×156, обводка 2px INSIDE, radius 8 */
.match {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  overflow: hidden;
}

.match__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 48px;
  padding-inline: var(--space-8);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* Первая карточка в макете выделена коралловой шапкой */
.match--featured .match__head { background: var(--color-flame); }

.match__league { display: flex; align-items: center; gap: var(--space-4); }

.match__sport {
  font-family: var(--font-display);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-label-sm);
  text-transform: uppercase;
}

.match__meta {
  font-size: var(--fs-label-xs);
  line-height: 16px;
  opacity: .8;
}

.match__all {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
}

.match__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.match__body {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-9);
}

.match__teams {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 220px;
  flex: none;
}

.match__when {
  font-size: var(--fs-label-xs);
  line-height: 16px;
  color: var(--color-muted);
}

.match__team {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
}

.match__market {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100px;
  flex: none;
}

.match__market-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-micro);
  text-transform: uppercase;
  color: var(--color-muted);
}

.match__market-name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-sm);
}

.match__odds {
  display: flex;
  gap: var(--space-6);
  flex: 1;
  min-width: 0;
}

/* Кнопка коэффициента (0:121): 48px, padding 12 16, radius 8 */
.odds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  height: 48px;
  padding-inline: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.odds__name {
  font-size: var(--fs-caption);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.odds__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  line-height: 18px;
}

.odds:hover { background: var(--color-paper); }

/* Выбранный коэффициент. Красная заливка — это именно «выбрано», а не
   «фаворит»: в макете sports и how-it-works такая кнопка подписана SELECTED
   и несёт галочку, а в купоне справа лежит ровно она. Отдельного состояния
   для фаворита в дизайне нет. */
.odds.is-picked {
  background: var(--color-brand);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-brand);
}

.odds.is-picked:hover { background: var(--color-brand-hover); }

/* Галочка живёт внутри названия, а не отдельным флекс-элементом: иначе
   space-between развёл бы её, название и коэффициент по трём краям. */
.odds.is-picked .odds__name::before { content: "\2713\00a0"; }

/* На главной дизайнер нарисовал ту же кнопку без галочки (0:121). Это его
   расхождение между фреймами, а не наша вольность — переносим как есть. */
.page-home .odds.is-picked .odds__name::before { content: none; }

.match__more { flex: none; }

/* Купон (0:201): 360×495, тёмный, padding 24, radius 16 */
.slip {
  position: sticky;
  top: calc(var(--h-header) + var(--space-9));
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  width: 360px;
  flex: none;
  padding: var(--space-10);
  border-radius: var(--radius-2xl);
  background: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  color: var(--color-surface);
}

.slip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 24px;
}

.slip__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  text-transform: uppercase;
}

.slip__empty {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .102);
  font-size: var(--fs-body-sm);
  line-height: 18px;
  color: var(--color-paper);
}

/* В макете купон — плоский список из 8 блоков с одним зазором 20.
   Обёртка своей раскладкой добавляла лишние 7px, поэтому она вне потока. */
.slip__body { display: contents; }

.slip__pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Название рынка и выбор лежат в своей группе с зазором 2, а не 12:
   переносить надо зазор группы, а не зазор карточки. */
.slip__detail { display: flex; flex-direction: column; gap: 2px; }

.slip__pick-head { display: flex; align-items: center; gap: var(--space-3); min-height: 17px; }

.slip__pick-head .badge {
  padding: 1px 5px;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

.slip__event {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-caption);
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slip__remove {
  margin-left: auto;
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-extrabold);
  line-height: 16px;
  color: var(--color-brand-text);
  cursor: pointer;
}

.slip__market {
  font-size: var(--fs-body-sm);
  line-height: 17px;
  color: var(--color-muted);
}

.slip__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 20px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 20px;
}

.slip__selection strong {
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  font-size: 15px;
}

.slip__stake { display: flex; flex-direction: column; gap: var(--space-4); }
.slip__stake-label { min-height: 16px; }

.slip__stake-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-caption);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.slip__stake-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
}

.slip__currency {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  line-height: 21px;
}

/* Поле растягивается на всю высоту контроля (с его паддингом 14): габарит
   контроля не меняется, а нажимаемая область становится 49 вместо 21.
   min-height здесь не ставим — он поднимал купон на 3px (0:201). */
.slip__input {
  width: 100%;
  align-self: stretch;
  height: auto;
  border: 0;
  padding: 0;
  background: none;
  text-align: right;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  line-height: 21px;
  color: var(--color-ink);
}

.slip__input:focus-visible { outline: none; }
.slip__stake-control:focus-within {
  outline: var(--focus-outline-on-dark);
  outline-offset: 2px;
}

.slip__rule {
  position: relative;
  height: 0;
  border: 0;
  overflow: visible;
}

.slip__rule::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 253, 248, .15);
}

.slip__return {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.slip__return-label {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.slip__return-value {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-black);
  line-height: var(--lh-title-sm);
  color: var(--color-success);
}

/* Кнопка ставки (0:227): 56px, radius 100, обводка 1.5px светлая */
.slip__place {
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  box-shadow: inset 0 0 0 1.5px var(--color-surface);
  color: var(--color-surface);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  line-height: 21px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.slip__place:hover { background: var(--color-brand-hover); }

.slip__legal { display: flex; flex-direction: column; gap: 4px; }

.slip__legal-line {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-paper);
  opacity: .7;
}

.slip__legal-link {
  font-size: var(--fs-caption);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-caption);
  color: #ff3355;
}

@media (max-width: 1023px) {
  .betting { flex-direction: column; }
  .slip { position: static; width: 100%; }
}

@media (max-width: 767px) {
  .betting { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-11); }
  .betting__title { font-size: var(--fs-h6); line-height: 30px; }
  .ticker { gap: var(--space-9); }
  .ticker__label, .ticker__star { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }

  .match__body { flex-wrap: wrap; gap: var(--space-8); }
  .match__teams { width: 100%; }
  .match__market { width: auto; }
  .match__odds { width: 100%; flex: none; }
  .match__more { width: 100%; }
}

/* ── Скачки (0:233): 1440×389, padding 80, gap 40, фон брендовый ──────── */

.racing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-15) var(--gutter);
  background: var(--color-brand);
  color: var(--color-surface);
  overflow: hidden;
}

/* Водяной знак «RACING»: 160px, обводка 3px, поверх фона но под контентом */
.racing__watermark {
  position: absolute;
  top: 20px;
  left: 120px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 160px;
  line-height: 174px;
  text-transform: uppercase;
  color: transparent;
  /* В макете заливки нет вовсе, только обводка 3px кремовым. */
  -webkit-text-stroke: 3px var(--color-paper);
  /* opacity 0.15 стоит на самом узле 0:234 — при переносе её потеряли, и знак
     светился втрое ярче макета. Боксы этого не видят, поймал секционный дифф. */
  opacity: .15;
  white-space: nowrap;
  pointer-events: none;
}

.racing__head,
.racing__grid { position: relative; z-index: 1; }

.racing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.racing__intro { display: flex; flex-direction: column; gap: var(--space-3); }

.kicker-pill--tight {
  padding: 4px 12px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.racing__title {
  font-size: var(--fs-h4);
  line-height: 44px;
  color: var(--color-surface);
}

.racing__all {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-black);
  line-height: 17px;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease);
}

.racing__all:hover { background: var(--color-ink-hover); }

.racing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}

/* Карточка забега (0:243): padding 20, gap 16, radius 8, обводка 1.5px */
.race {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-9);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  color: var(--color-ink);
}

/* Цвета карточек в макете разные и заданы поштучно: кремовая, коралловая,
   белая. Это не ошибка дизайнера, а ритм ряда — переносим как есть. */
.race--hot { background: var(--color-flame); }
.race--plain { background: var(--color-surface); }

.race__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 21px;
}

.race__countdown {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  line-height: 21px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.race--hot .race__countdown { color: var(--color-ink); }

.race__kind {
  padding: 2px 6px;
  font-size: 9px;
  font-weight: var(--fw-extrabold);
  line-height: 12px;
  color: var(--color-paper);
}

.race__body { display: flex; flex-direction: column; gap: 4px; }

.race__track {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.race__number {
  font-size: var(--fs-label-xs);
  line-height: 16px;
  color: var(--color-muted);
}

.race--hot .race__number { color: var(--color-ink); opacity: .8; }

@media (max-width: 767px) {
  .racing { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-9); }
  .racing__head { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .racing__title { font-size: var(--fs-h6); line-height: 30px; }
  .racing__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .racing__watermark { font-size: 96px; line-height: 104px; left: var(--gutter-mobile); }
}

/* ── Мозаика видов спорта (0:267): padding 80, gap 40 ─────────────────── */

.explore {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
}

.explore__head { display: flex; flex-direction: column; gap: var(--space-3); }
.explore__title { font-size: var(--fs-h4); line-height: 44px; }

/* Ряд: слева блок 876, справа карточка 380, зазор 24 */
.explore__grid {
  display: grid;
  grid-template-columns: minmax(0, 876fr) minmax(0, 380fr);
  gap: var(--space-10);
  align-items: start;
}

.explore__main { display: flex; flex-direction: column; gap: var(--space-10); }

/* Верхний ряд: 592 + 260, нижний: 220 + 428 + 180 — пропорции из макета */
.explore__row { display: grid; gap: var(--space-10); }
.explore__row--top { grid-template-columns: minmax(0, 592fr) minmax(0, 260fr); }
.explore__row--bottom { grid-template-columns: minmax(0, 220fr) minmax(0, 428fr) minmax(0, 180fr); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  overflow: hidden;
}

/* Фото в плитке AFL: 300×320, прижато вправо с отступом 12 и 20 сверху */
.tile__media {
  position: absolute;
  top: 20px;
  right: 12px;
  z-index: 0;
  width: 300px;
  height: 320px;
  opacity: .4;
  pointer-events: none;
}

.tile__media img { width: 100%; height: 100%; object-fit: cover; }

.tile__title,
.tile__meta { position: relative; z-index: 1; }

.tile__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  text-transform: uppercase;
}

.tile__title--xl { font-size: var(--fs-h5); line-height: 35px; }
.tile__title--lg { font-size: var(--fs-h6); line-height: var(--lh-h6); }

/* Контент плиток прижат к ВЕРХУ, а зазор до подписи у каждой плитки свой:
   16 у AFL, 80 у NRL, 50 у Football и Cricket. Прижатие к низу давало
   смещение подписей на десятки пикселей при верном боксе плитки. */
.tile__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tile__count {
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
}

.tile__meta--sm .tile__count {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-regular);
  line-height: 16px;
}

.tile__link {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  line-height: 17px;
  text-transform: uppercase;
}

.tile__meta--sm .tile__link { font-size: var(--fs-label-xs); line-height: 13px; }

/* Цвета плиток из макета */
.tile--afl { background: var(--color-flame); color: var(--color-ink); height: 340px; gap: var(--space-8); }
.tile--afl .tile__link { color: var(--color-ink); }

.tile--nrl { background: var(--color-brand); color: var(--color-surface); height: 340px; gap: 80px; }
.tile--nrl .tile__meta { gap: var(--space-4); }
.tile--football, .tile--cricket { gap: 50px; }

.tile--football { background: var(--color-ink); color: var(--color-paper); height: 260px; }
.tile--cricket { background: var(--color-surface); color: var(--color-ink); height: 260px; }



/* В макете этот блок 180×110 и прижат к верху ряда, а не растянут по нему */
.explore__minis {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-self: start;
}

/* Маленькие плитки 180×47, padding 16, radius 8 */
.mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 47px;
  padding-inline: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  transition: background var(--dur) var(--ease);
}

.mini--accent { background: var(--color-amber); }
.mini:hover { background: var(--color-surface); }
.mini--accent:hover { background: var(--color-flame); }

.mini__name {
  font-family: var(--font-display);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-label-sm);
  text-transform: uppercase;
}

.mini__count {
  font-size: var(--fs-caption);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-caption);
}

/* Карточка «Featured league» (0:304): 380×467, обводка 2.5px, radius 12 */
.featured {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2.5px var(--color-ink);
  overflow: hidden;
}

.featured__media img { width: 100%; height: 260px; object-fit: cover; }

.featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-10);
}

.featured__flag { align-self: flex-start; font-size: var(--fs-micro); line-height: var(--lh-micro); }

.featured__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  text-transform: uppercase;
}

.featured__text {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  .explore__grid { grid-template-columns: 1fr; }
  .explore__row--top,
  .explore__row--bottom { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .explore { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-9); }
  .explore__title { font-size: var(--fs-h6); line-height: 30px; }
  .explore__row--top,
  .explore__row--bottom { grid-template-columns: 1fr; }
  .tile--afl, .tile--nrl { height: 260px; }
  .tile--football, .tile--cricket { height: 200px; }
  .tile--nrl { gap: var(--space-11); }

}

/* ── Как это работает (0:312): 1440×540, row gap 64, padding 80 ───────── */

.hiw {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-15) var(--gutter);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.hiw__media { flex: none; width: 520px; }

.hiw__media img {
  width: 520px;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.hiw__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  flex: 1;
  min-width: 0;
}

.hiw__intro { display: flex; flex-direction: column; gap: var(--space-6); }

.hiw__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.hiw__title { font-size: var(--fs-h4); line-height: 44px; }

.hiw__lead {
  font-size: 15px;
  line-height: 20px;
  color: var(--color-muted);
}

/* Шаги: две колонки по два, зазор 16 внутри и между рядами */
.hiw__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-8);
}

.hiw__step { display: flex; flex-direction: column; gap: 4px; }

.hiw__step-title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.hiw__step-text {
  font-size: var(--fs-body-sm);
  line-height: 17px;
  color: var(--color-muted);
}

/* Кнопка 238×50: padding 16 32, обводка 2px, radius 100 */
.hiw__cta {
  padding: 16px 32px;
  font-size: var(--fs-body);
  line-height: 18px;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

/* ── Ответственная игра (0:336): padding 80, gap 48, тёмный ───────────── */

.rg-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  padding: var(--space-15) var(--gutter);
  background: var(--color-ink);
  color: var(--color-surface);
  overflow: hidden;
}

/* «CONTROL» 140px: заливки нет, только обводка 2px брендовым, прозрачность .12 */
.rg-section__watermark {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 0;
  font-family: var(--font-display);
  font-size: 140px;
  line-height: 152px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-brand);
  opacity: .12;
  white-space: nowrap;
  pointer-events: none;
}

.rg-section__intro,
.rg-section__grid { position: relative; z-index: 1; }

.rg-section__intro { display: flex; flex-direction: column; gap: var(--space-6); }

.rg-section__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand);
}

.rg-section__title {
  font-size: var(--fs-h4);
  line-height: 44px;
  color: var(--color-surface);
}

.rg-section__lead {
  font-size: 15px;
  line-height: 20px;
  opacity: .8;
}

.rg-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-9);
}

/* Карточка 305×150: padding 24, gap 16, radius 8, обводка 1.5px */
.rg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  color: var(--color-ink);
}

.rg-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.rg-card__text {
  font-size: var(--fs-body-sm);
  line-height: 18px;
  color: var(--color-muted);
}

.rg-card__link {
  margin-top: auto;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-black);
  line-height: 17px;
  color: var(--color-brand-text);
}

.rg-card__link:hover { color: var(--color-brand-active); }

@media (max-width: 1023px) {
  .hiw { flex-direction: column; align-items: stretch; }
  .hiw__media { width: 100%; }
  .hiw__media img { width: 100%; }
  .rg-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .hiw { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-11); }
  .hiw__title { font-size: var(--fs-h6); line-height: 30px; }
  .hiw__steps { grid-template-columns: 1fr; }
  .hiw__media img { height: 220px; }

  .rg-section { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-11); }
  .rg-section__title { font-size: var(--fs-h6); line-height: 30px; }
  .rg-section__grid { grid-template-columns: 1fr; }
  .rg-section__watermark { font-size: 88px; line-height: 96px; left: var(--gutter-mobile); }
}

/* ============================================================================
   Мобильный фрейм 390 — ОТДЕЛЬНЫЙ макет, а не сжатый десктоп: другие размеры,
   другой состав блоков, сокращённые тексты. Числа взяты из фрейма 0:5784.
   Правила «чтобы не ломалось ниже 390» вынесены в отдельный блок в конце.
   ========================================================================= */

@media (max-width: 767px) {

  /* ── Hero (0:5805): 390×855, padding 24/16, gap 24 ──────────────────── */

  .hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    height: auto;
    padding: var(--space-10) var(--gutter-mobile);
  }

  /* Обёртка убирается из потока: в макете это четыре блока подряд
     с одним зазором 24, а не текстовая колонка плюс постер. */
  .hero__text {
    display: contents;
  }

  .hero__head { gap: var(--space-8); }

  .hero__head .kicker-pill {
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-micro);
    line-height: 13px;
  }

  /* 40px с межстрочным 44: две строки по 88 с зазором 2 */
  .hero__title { gap: 2px; font-size: var(--fs-h4); line-height: 44px; }

  .hero__lead { font-size: var(--fs-body); line-height: 20px; }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  .hero__actions .btn {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-9);
    font-size: 15px;
    line-height: 18px;
  }

  .hero__note { font-size: var(--fs-label-xs); line-height: 16px; }

  /* Постер 358×320: полоса 8px, фото 280×280 со смещением 39/20 */
  .hero__poster {
    width: 100%;
    height: 320px;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 2px var(--color-ink);
  }

  .hero__stripe { width: 8px; }

  .hero__watermark {
    top: -43px;
    left: -20px;
    font-size: 80px;
    line-height: 87px;
  }

  .hero__image { top: 20px; left: 39px; width: 280px; height: 280px; }

  /* ── Лента (0:5824): 390×40, padding 12/0/12/16 ─────────────────────── */

  .ticker {
    height: 40px;
    justify-content: flex-start;
    gap: var(--space-10);
    padding: var(--space-6) 0 var(--space-6) var(--gutter-mobile);
  }

  .ticker__label,
  .ticker__star { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); }

  /* ── Рынки (0:5846 заголовок + 0:5863 список) ───────────────────────── */

  .betting {
    display: block;
    padding: 0;
  }

  /* На 390 заголовок ленты — отдельная секция во всю ширину, а карточки
     и купон лежат ниже в общем блоке с боковым отступом 16. */
  .betting__list { display: contents; }

  /* Заголовок-секция: padding 32/16/16, gap 12 */
  .betting__head {
    gap: var(--space-6);
    padding: var(--space-11) var(--gutter-mobile) var(--space-8);
  }

  .betting__intro { gap: var(--space-6); }
  .betting__kicker { line-height: 16px; }
  .betting__title { font-size: var(--fs-h6); line-height: 30px; }
  .betting__note { font-size: var(--fs-body-sm); line-height: 17px; }

  /* Табы прокручиваются вбок, как в макете */
  .betting__head .tabs {
    flex-wrap: nowrap;
    gap: var(--space-4);
    padding-block: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .betting__head .tabs::-webkit-scrollbar { display: none; }

  .betting__head .tab {
    flex: none;
    height: 28px;
    padding: 0 var(--space-8);
    line-height: 28px;
  }

  /* Список: padding 0/16/32, gap 12; купон идёт последним блоком */
  .markets {
    gap: var(--space-6);
    padding-inline: var(--gutter-mobile);
  }

  /* Карточка матча на 390: 358×194 — колонки складываются в строки */
  .match__head { height: 38px; padding-inline: var(--space-6); }

  /* На 390 команды и рынок стоят в одной строке, коэффициенты и ссылка —
     во всю ширину. Флекс-колонка давала лишнюю строку и +30px карточке. */
  .match__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-6) var(--space-4);
    padding: var(--space-7);
  }

  .match__market { text-align: right; }
  .match__odds,
  .match__more { grid-column: 1 / -1; }

  /* Время и команды в одном блоке 52px, рынок уходит в строку с коэффициентами */
  .match__teams { width: auto; gap: 0; }
  .match__team { font-size: var(--fs-label-sm); line-height: 19px; }
  .match__when { line-height: 14px; }

  .match__market {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-4);
    width: auto;
  }

  .match__odds { width: auto; gap: var(--space-4); min-height: 36px; }
  .odds { height: 36px; }

  /* «+42 Markets →» на мобильном остаётся: в макете это отдельная строка 16px */
  /* 12/16: строка «+42 Markets →» в макете 16px, унаследованные 17
     давали каждой карточке +1, а четырём — сдвиг всей страницы на 4. */
  .match__more { display: block; line-height: 16px; }
  .match__more .link-arrow { font-size: var(--fs-label-xs); line-height: 16px; }

  /* Купон (0:5956): 358×452, padding 20, gap 16, radius 16 */
  /* Купон на 390 (0:5956): 358×452, padding 20, gap 16.
     Высоты блоков и позиции разделителей отличаются от десктопных,
     а сами линии здесь занимают по 1px, а не ноль. */
  .slip {
    width: auto;
    margin: var(--space-6) var(--gutter-mobile) var(--space-11);
    padding: var(--space-9);
    gap: var(--space-8);
  }

  .slip__head { min-height: 22px; }
  .slip__title { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
  .slip__pick { min-height: 98px; padding: var(--space-7); }
  /* 70 = подпись 14 + зазор 8 + поле 48 (padding 12/16) */
  .slip__stake { gap: var(--space-4); }
  .slip__stake-label { min-height: 14px; font-size: var(--fs-caption); line-height: 14px; }
  .slip__stake-control { height: 48px; padding: 12px var(--space-8); }
  .slip__return { min-height: 24px; }
  .slip__place { height: 52px; font-size: var(--fs-body); line-height: 18px; }

  .slip__rule { height: 1px; }

  .slip__rule::before { position: static; display: block; height: 1px; }

  /* ── Скачки (0:5986): 390×225, padding 32/16, gap 20 ────────────────── */

  .racing {
    gap: var(--space-9);
    padding: var(--space-11) var(--gutter-mobile);
  }

  .racing__head { flex-direction: row; align-items: center; gap: var(--space-6); }
  .racing__title { font-size: var(--fs-h6); line-height: 30px; }

  .racing__all {
    flex: none;
    height: 30px;
    padding-inline: var(--space-6);
    font-size: var(--fs-caption);
    line-height: 30px;
  }

  .racing__head { min-height: 47px; }
  .racing__intro { gap: 4px; }
  .racing__title { font-size: var(--fs-title); line-height: var(--lh-title); }
  .racing__kicker .kicker-pill--tight { padding: 2px 8px; font-size: 10px; line-height: 13px; }

  /* На 390 забеги лежат горизонтальной лентой: три карточки по 200,
     шире экрана — прокручиваются пальцем. */
  .racing__grid {
    display: flex;
    gap: var(--space-6);
    min-height: 94px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .racing__grid::-webkit-scrollbar { display: none; }

  .race {
    flex: none;
    width: 200px;
    gap: var(--space-6);
    padding: var(--space-7);
    scroll-snap-align: start;
  }

  .race__top { min-height: 18px; }
  .race__countdown { font-size: var(--fs-body-sm); line-height: 17px; }
  .race__track { font-size: var(--fs-label-sm); line-height: 19px; }
  .race__number { font-size: var(--fs-caption); line-height: 14px; }
  .race__countdown { font-size: var(--fs-body); line-height: 18px; }
  .race__track { font-size: var(--fs-label); line-height: var(--lh-label); }

  .racing__watermark { font-size: 72px; line-height: 78px; top: 8px; }

  /* ── Мозаика (0:6021 заголовок + 0:6025 плитки) ─────────────────────── */

  /* Мозаика на 390 собрана иначе, чем на десктопе: AFL во всю ширину,
     под ней NRL и Football в ряд, затем Cricket во всю ширину, затем
     теннис с баскетболом. Ряды-обёртки уходят из потока, а расстановку
     задаёт одна сетка. */
  .explore {
    gap: var(--space-9);
    padding: var(--space-11) var(--gutter-mobile) 0;
  }

  .explore__head { gap: 4px; height: 55px; }
  .explore__title { font-size: var(--fs-h6); line-height: 30px; }

  .explore__grid { display: contents; }
  .explore__row { display: contents; }

  .explore__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .tile { padding: var(--space-8); border-radius: var(--radius-xl); }

  .tile--afl { grid-column: 1 / -1; height: 220px; gap: 80px; }
  .tile--nrl { grid-column: 1; height: 150px; gap: var(--space-11); }
  .tile--football { grid-column: 2; height: 150px; gap: var(--space-11); }
  .tile--cricket { grid-column: 1 / -1; height: 88px; gap: var(--space-10); padding: var(--space-7); }

  .tile__media { width: 240px; height: 200px; top: 10px; right: 10px; }

  /* Размеры подписей на 390 свои: AFL крупнее прочих, у мелких плиток 12px */
  .tile__title--xl { font-size: var(--fs-h6); line-height: 30px; }
  .tile__title--lg { font-size: var(--fs-label-lg); line-height: 20px; }
  .tile--cricket .tile__title { font-size: var(--fs-label-lg); line-height: 20px; }
  /* 0:6039 — на мобильном фрейме подпись Football тоже 18/19.58, а не 24:
     десктопные 24px не влезали в бокс 141px и рвали слово как FOOTBAL/L. */
  .tile--football .tile__title { font-size: var(--fs-label-lg); line-height: 20px; }

  .tile--afl .tile__count { font-size: var(--fs-body-sm); line-height: 17px; }
  .tile--afl .tile__link { font-size: var(--fs-body); line-height: 16px; }

  .tile--nrl .tile__count,
  .tile--football .tile__count,
  .tile--nrl .tile__link,
  .tile--football .tile__link { font-size: var(--fs-caption); line-height: 14px; }

  .tile--cricket .tile__count,
  .tile--cricket .tile__link { font-size: var(--fs-label-xs); line-height: 16px; }

  .tile__meta { gap: 4px; }

  /* В плитке Cricket счётчик и ссылка стоят в одну строку (блок 16px),
     колонкой они не влезали в карточку высотой 88 и обрезались. */
  .tile--cricket .tile__meta {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .explore__minis {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: var(--space-6);
  }

  .mini { flex: 1; height: 37px; }
  .mini__name { font-size: var(--fs-label-xs); line-height: 13px; }
  .mini__count { font-size: var(--fs-micro); line-height: 13px; }

  /* Карточка «Featured» на 390 — отдельная секция под мозаикой.
     Зазор до неё 32 = gap секции 20 + собственные 12. */
  .featured { margin: var(--space-6) 0 var(--space-11); }
  .featured__media img { height: 160px; }

  .featured__body {
    gap: var(--space-6);
    padding: var(--space-8);
  }

  .featured__flag { font-size: 10px; line-height: 13px; }
  .featured__title { font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); }
  .featured__text { font-size: var(--fs-body-sm); line-height: 18px; }
  .featured .link-arrow { font-size: var(--fs-label-xs); line-height: 13px; }

  /* ── Как это работает (0:6064): padding 32/16, gap 24 ───────────────── */

  /* На 390 это четыре блока подряд с зазором 24, а не «фото + колонка» */
  .hiw { gap: var(--space-10); padding: var(--space-11) var(--gutter-mobile); }
  .hiw__media { width: 100%; }
  .hiw__media img { width: 100%; height: 220px; }
  .hiw__body { display: contents; }
  /* intro 160 = кикер 16 + заголовок 60 + текст 60 при зазоре 12 */
  .hiw__intro { gap: var(--space-6); }
  .hiw__kicker { line-height: 16px; }
  .hiw__title { font-size: var(--fs-h6); line-height: 30px; }
  .hiw__lead { font-size: var(--fs-body); line-height: 20px; }

  /* шаги 180 = четыре блока по 33 с зазором 16 (внутренний зазор 2) */
  .hiw__steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .hiw__step { gap: 2px; min-height: 33px; }
  .hiw__step-title { line-height: 16px; }
  .hiw__step-text { font-size: var(--fs-label-xs); line-height: 15px; }
  .hiw__cta { width: 100%; height: 41px; padding-block: 0; line-height: 41px; }

  /* ── Ответственная игра (0:6085): padding 32/16, gap 24 ─────────────── */

  .rg-section { gap: var(--space-10); padding: var(--space-11) var(--gutter-mobile); }
  .rg-section__intro { gap: var(--space-5); }
  .rg-section__kicker { font-size: var(--fs-caption); line-height: 14px; }
  .rg-section__title { font-size: var(--fs-h6); line-height: 30px; }
  .rg-section__lead { font-size: var(--fs-body-sm); line-height: 18px; }
  .rg-section__grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .rg-card { padding: var(--space-8); gap: var(--space-4); }
  .rg-card { gap: var(--space-4); padding: var(--space-8); }
  .rg-card__title { font-size: var(--fs-label-sm); line-height: 15px; }
  .rg-card__text { font-size: var(--fs-label-xs); line-height: 16px; }
  /* 0:6518 — на мобильных фреймах подпись ссылки набрана Title Case
     («Configure Limits →»), а на десктопных капсом («CONFIGURE LIMITS ↗») */
  .rg-card__link { font-size: var(--fs-label-xs); line-height: 16px; text-transform: none; }
  .rg-section__watermark { font-size: 72px; line-height: 78px; }

  /* ── Нижние полосы на 390: support 166, betstop 144, payments 83 ─────
     Составы отличаются от десктопных: телефон уходит в кнопку во всю
     ширину, подписи переносятся, порядок другой. */

  .support-strip { height: 166px; padding-block: var(--space-10); }
  .support-strip__inner { gap: var(--space-8); }
  .support-strip__lead { flex-direction: column; align-items: flex-start; gap: 4px; }
  .support-strip__title { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
  .support-strip__service { font-size: var(--fs-body-sm); line-height: 17px; }
  .support-strip__note { font-size: var(--fs-label-xs); line-height: 16px; }

  .support-strip__phone {
    justify-content: center;
    width: 100%;
    height: 44px;
    font-size: var(--fs-label-lg);
    line-height: 20px;
  }

  .betstop-strip { height: 144px; padding-block: var(--space-9); }
  .betstop-strip__inner { gap: var(--space-6); }
  .betstop-strip__lead { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .betstop-strip__title { font-size: var(--fs-body-sm); line-height: 17px; }
  .betstop-strip__note { font-size: var(--fs-label-xs); line-height: 16px; }
  .betstop-strip__cta { font-size: var(--fs-label-xs); line-height: 16px; }

  .payments-strip { height: 83px; padding-block: var(--space-9); }
  .payments-strip__inner { gap: var(--space-6); }
  /* Ряд «подпись … логотипы» прижат к краям полосы (0:6126, row main:between) */
  .payments-strip__lead {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .payments-strip__label { font-size: var(--fs-micro); line-height: 13px; }
  /* Логотипы на мобильном фрейме вдвое меньше десктопных (0:6128) */
  .payments-strip__logos { width: 110px; height: 15px; }
  .payments-strip__note { gap: var(--space-3); font-size: var(--fs-caption); line-height: 14px; }
  /* Бейдж на мобильном фрейме мельче десктопного: текст 9/11.7 (0:6131),
     плашка 65×16. С десктопными 11px строка не влезала в 358 и переносилась. */
  .payments-strip__note .badge { font-size: 9px; line-height: 12px; }

  /* ── Подвал (0:6133): 390×675, padding 40/16/80/16, gap 32 ──────────
     Блок бренда 202, реквизиты 85. Колонки ссылок выше макетных: аккордеон
     убран по решению заказчика, ссылки видны сразу. */

  .site-footer { gap: var(--space-11); padding-block: var(--space-12) var(--space-15); }
  .site-footer__inner,
  .site-footer__legal { padding-inline: var(--gutter-mobile); }
  .site-footer__rule { display: none; }

  .site-footer__inner { gap: var(--space-11); }
  .site-footer__brand { gap: var(--space-8); }
  .site-footer .logo { min-height: 24px; }
  .site-footer .logo__word { font-size: var(--fs-label-lg); line-height: 24px; }
  .site-footer__slogan { gap: 2px; font-size: var(--fs-label-lg); line-height: 20px; }
  .site-footer__about { font-size: var(--fs-label-xs); line-height: 18px; }
  .footer-col__title { margin-bottom: var(--space-5); }

  .site-footer__nav { gap: var(--space-9) var(--space-8); }

  .site-footer__legal { gap: var(--space-4); font-size: var(--fs-micro); }
  .site-footer__legal p:first-child { line-height: 16px; }
  .site-footer__legal p:last-child { line-height: 13px; }
}

/* Ниже макетной ширины эталона нет — задача только не ломаться.
   Отдельный блок обязателен: те же правила в общем мобильном медиазапросе
   меняли геометрию НА самой макетной ширине. */
@media (max-width: 389px) {
  .racing__grid { grid-template-columns: 1fr; }
  /* Правило ниже ничего не делает: на мобильном .explore__row--bottom это
     display:contents, а колонки задаёт .explore__main. Оставлено как есть —
     трогать раскладку ради 320 не нужно, кегль подписи правится ниже. */
  .explore__row--bottom { grid-template-columns: 1fr; }
  .explore__minis { flex-direction: column; }
  .match__odds { flex-wrap: wrap; }
  /* Доска sports: три исхода (футбол) при min-width 120 ниже 390 не влезают —
     третья кнопка уходила за край и срезалась у .league с overflow:hidden
     (замер: −33px на 375, −88px на 320). Переносим, как на главной. */
  .event__odds { flex-wrap: wrap; }
  .odds { min-width: 120px; }
  .rg-bar__row--lead { flex-wrap: wrap; }
  .rg-bar { height: auto; }
}

/* ── Интро внутренней страницы (0:447): 1440×251, padding 48/80, gap 24 ── */

.page-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-13) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  overflow: hidden;
}

/* Крупное слово фоном: 160px, заливки нет, только обводка */
/* Водяной знак интро (0:2440 / 0:2657 / 4:421 / 4:624 и родня).
   В макете он ЗАЛИТ цветом с малой прозрачностью, а не обведён контуром:
   ни у одного из десяти таких узлов нет strokes. Обводка была домыслом —
   пиксельная сверка её не видела, потому что бокс совпадал. Цвет, кегль
   и прозрачность у каждой страницы свои, поэтому заданы модификаторами. */
.page-intro__watermark {
  position: absolute;
  top: var(--wm-top, 20px);
  left: var(--wm-left, var(--gutter));
  z-index: 0;
  font-family: var(--font-display);
  font-size: var(--wm-size, 160px);
  line-height: 1.088;
  text-transform: uppercase;
  color: var(--wm-color, var(--color-flame));
  opacity: var(--wm-opacity, .12);
  white-space: nowrap;
  pointer-events: none;
}

/* Интро contact-us набрано крупнее общего шаблона (0:2439): плашка 26,
   заголовок 72/72, лид 18/27 шириной 680, зазор 24. Общие значения
   .page-intro оставлены как есть — у каждой страницы свой фрейм. */
.page-contact-us .page-intro__content { gap: var(--space-10); }
.page-contact-us .page-intro__kicker { min-height: 26px; }
.page-contact-us .page-intro__kicker .kicker-pill { padding: 6px 12px; gap: 6px; font-size: 11px; line-height: 14px; }
.page-contact-us .page-intro__title { font-size: 72px; line-height: 72px; }
.page-contact-us .page-intro__lead { max-width: 680px; font-size: 18px; line-height: 27px; }

/* 0:448 — у sports знак наоборот: заливки нет вовсе, только обводка
   2px #ff704d при 15%, кегль 160, x 120 y 100. Один общий стиль на все
   страницы был неверен в обе стороны: где-то домысливал контур, где-то
   терял заливку. */
.page-sports .page-intro__watermark {
  --wm-size: 160px;
  --wm-left: 120px;
  --wm-top: 100px;
  --wm-opacity: .15;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-flame);
}

/* 0:2440 — CONTACT, 180, #ff704d при 12%, x 595 y 90 */
.page-contact-us .page-intro__watermark {
  /* Знак начинается на 30px ВЫШЕ секции (в макете y 90 при начале секции
     120) и обрезается её краем; бокс 845 шириной, текст прижат вправо. */
  --wm-size: 180px;
  --wm-left: 595px;
  --wm-top: -60px;
  /* На эталонном рендере знак читается как «CO…»: Figma обрезала слово
     по ширине бокса 845 и подставила многоточие. Ставим ровно то, что
     видно на рендере — знак декоративный и скрыт от скринридера. */
  width: 845px;
  line-height: 196px;
  text-align: right;
}

/* 0:2657 — LIMIT, 200, #120e0d при 4%, x 857 y 160 */
.page-deposit-limits .page-intro__watermark {
  --wm-size: 200px;
  --wm-left: 857px;
  --wm-top: 160px;
  --wm-color: var(--color-ink);
  --wm-opacity: .04;
}

/* Сетка: кикер и заголовок во всю ширину, лид и метка — в одной строке,
   метка прижата к правому краю и к низу строки (как в макете). */
.page-intro__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-10);
  align-items: end;
}

.page-intro__kicker,
.page-intro__title { grid-column: 1 / -1; }
.page-intro__kicker { justify-self: start; }

/* 0:2445 — вторая половина заголовка набрана красным (в узле это
   посимвольное переопределение заливки, в дереве видна только базовая) */
.page-intro__accent { color: var(--color-brand); }

.page-intro__title {
  font-size: var(--fs-h1);
  line-height: 61px;
}

.page-intro__mark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.page-intro__lead {
  max-width: 500px;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-muted);
}

.page-intro__mark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 14px;
  text-transform: uppercase;
}

/* ── Навигация по видам спорта (0:460): 1440×64, padding 16/80 ─────────── */

.sports-nav {
  padding: var(--space-8) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.sports-nav__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 32px;
}

.sports-nav .tab {
  height: 32px;
  padding: 0 var(--space-8);
  font-size: var(--fs-label-xs);
  line-height: 32px;
  letter-spacing: normal;
  box-shadow: none;
}

/* ── Секция RG с нумерованными карточками (0:708): 190px карточка ──────── */

.rg-section--numbered .rg-section__grid { gap: var(--space-9); }

.rg-section--numbered .rg-card {
  gap: var(--space-8);
  padding: var(--space-10);
}

.rg-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  color: var(--color-brand-text);
}

@media (max-width: 1023px) {
  .page-intro__footer { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .sports-nav__row { overflow-x: auto; scrollbar-width: none; }
  .sports-nav__row::-webkit-scrollbar { display: none; }
  .sports-nav .tab { flex: none; }
}

@media (max-width: 767px) {
  /* Интро на 390 (0:6278): 390×235, padding 24/16, gap 16.
     Кикер, заголовочная группа и метка — три блока с зазором 16,
     внутри группы зазор 4. */
  .page-intro {
    gap: var(--space-8);
    padding: var(--space-10) var(--gutter-mobile);
  }

  .page-intro__watermark { --wm-size: 72px; --wm-left: var(--gutter-mobile); --wm-top: 8px; }
  /* 4:421 — на мобильном знак короче («CO»), 110, при 15%, x 232 y 113 */
  /* 4:421 — на мобильном знак короче («CO») и набран в ДВЕ строки:
     бокс 158×240 это два межстрочных по 120. Одной строкой он был
     вдвое ниже и уезжал вправо. */
  .page-contact-us .page-intro__watermark {
    /* Знак начинается на 10px ВЫШЕ секции (в макете y 113 при начале
       секции 123) и обрезается её краем. */
    --wm-size: 110px; --wm-left: 232px; --wm-top: -10px; --wm-opacity: .15;
    width: 158px;
    line-height: 120px;
    text-align: right;
  }
  /* 4:624 — LIMIT, 110, x 67 y 133 */
  .page-deposit-limits .page-intro__watermark { --wm-size: 110px; --wm-left: 67px; --wm-top: 133px; }
  /* На 390 всё в один столбец, а зазор между заголовком и лидом — 4,
     а не 16, как между остальными блоками. */
  .page-intro__content { grid-template-columns: 1fr; }
  .page-intro__kicker { height: 21px; }
  .page-intro__kicker .kicker-pill { padding: 4px 10px; font-size: 10px; line-height: 13px; }
  .page-intro__title { font-size: 36px; line-height: 40px; }
  .page-intro__lead { margin-top: -12px; }
  .page-intro__lead { font-size: var(--fs-body-sm); line-height: 18px; }
  .page-intro__mark { height: 14px; font-size: var(--fs-caption); line-height: 14px; }
  .page-intro__mark .badge { padding: 0 4px; font-size: var(--fs-caption); line-height: 14px; }

  /* Навигация на 390 (0:6289): 390×48, padding 12/16, табы по 26, зазор 8 */
  .sports-nav { height: 48px; padding: var(--space-6) var(--gutter-mobile); }

  .sports-nav__row {
    flex-wrap: nowrap;
    min-height: 26px;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sports-nav__row::-webkit-scrollbar { display: none; }

  .sports-nav .tab {
    flex: none;
    height: 26px;
    line-height: 26px;
    padding-inline: var(--space-6);
    font-size: var(--fs-caption);
  }

  /* Доска на 390 (0:6306): секция с padding 24/16/32 и зазором 16.
     Только на Sports: на главной у этой секции своя раскладка. */
  .betting--board { display: block; }

  .betting--board .betting__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-10) var(--gutter-mobile) var(--space-11);
  }

  .board { gap: var(--space-8); }

  .board__head { gap: 4px; min-height: 69px; }
  .board__kicker { font-size: var(--fs-caption); line-height: 14px; }
  .board__note { font-size: var(--fs-body-sm); line-height: 17px; }

  .league__head { height: 51px; padding-inline: var(--space-8); }
  .league__name { font-size: var(--fs-label-xs); line-height: 13px; }
  .league__meta { font-size: var(--fs-caption); line-height: 14px; }
  .league__all { font-size: var(--fs-caption); line-height: 14px; }

  .event__time { font-size: var(--fs-caption); line-height: 14px; }
  .event__team { font-size: var(--fs-label-sm); line-height: 19px; }

  /* На 390 эта секция везде одинаковая: номеров нет, карточки по 95 */
  .rg-section--numbered .rg-section__grid { gap: var(--space-6); }
  .rg-section--numbered .rg-card { gap: var(--space-4); padding: var(--space-8); }
  .rg-card__num { display: none; }
}


/* ── Доска лиг на Sports (0:485) ────────────────────────────────────────
   Лига = шапка 48 + строки матчей по 90. Рынок в макете лежит в одном
   блоке со временем, а не отдельной колонкой. */

.board__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.board__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.board__title { font-size: 48px; line-height: 52px; }

.board__note {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

.board {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.league {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  overflow: hidden;
}

.league__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 48px;
  padding-inline: var(--space-8);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.league__title { display: flex; align-items: center; gap: var(--space-4); }

.league__name {
  font-family: var(--font-display);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-label-sm);
  text-transform: uppercase;
}

.league__meta { font-size: var(--fs-label-xs); line-height: 16px; opacity: .8; }

.league__all {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
}

.league__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.league__rows { display: flex; flex-direction: column; }

/* Строка матча: 880×90, padding 20, gap 24 */
.event {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: 90px;
  padding-inline: var(--space-9);
}

.event + .event { box-shadow: inset 0 1px 0 var(--color-line-soft); }

.event__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 120px;
  flex: none;
}

.event__time {
  font-size: var(--fs-label-xs);
  line-height: 16px;
  color: var(--color-muted);
}

.event__market-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold);
  line-height: 13px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.event__market-name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-sm);
}

.event__teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 198px;
  flex: none;
}

.event__team {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
}

.event__odds { display: flex; gap: var(--space-6); flex: 1; min-width: 0; }
.event__more { flex: none; }

@media (max-width: 767px) {
  .board__title { font-size: var(--fs-h6); line-height: 30px; }
  .board { gap: var(--space-8); }

  /* Строка матча на 390: 162 = padding 16 + (46 + 44 + 16) + два зазора 12 */
  .event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-6) var(--space-8);
    height: auto;
    padding: var(--space-8);
  }

  .event__when,
  .event__teams { width: auto; min-height: 46px; }
  .event__when { gap: 0; }

  .event__odds,
  .event__more { grid-column: 1 / -1; }
  .event__odds { gap: var(--space-4); min-height: 44px; }
  .event__odds .odds { height: 44px; }
  /* 12/16: строка со ссылкой в макете ровно 16px, унаследованные 17 давали
     каждой строке матча +1 и всей доске +8 */
  .event__more { height: 16px; line-height: 16px; }
}

/* ============================================================================
   Мобильные правила страницы Sports.
   Идут в конце файла намеренно: десктопные правила доски описаны ниже
   исходного мобильного блока и при равной специфичности перебивали его.
   ========================================================================= */

@media (max-width: 767px) {
  /* Заголовок доски (0:6306): 69 = кикер 14 + заголовок 30 + текст 17, зазор 4 */
  .board__head { gap: 4px; height: 69px; }
  .board__kicker { font-size: var(--fs-caption); line-height: 14px; }
  .board__title { font-size: var(--fs-h6); line-height: 30px; }
  .board__note { font-size: var(--fs-body-sm); line-height: 17px; }

  /* Шапка лиги на 390 — 51, а не 48 как на десктопе */
  .league__head { height: 51px; padding-inline: var(--space-8); }

  /* Купон на этой странице — третий вариант в макете (0:6589): 419,
     padding 16, кнопка 43, своя высота блока выбора. */
  /* Зазор снизу 56 = padding секции купона 32 + отступ до следующей секции 24 */
  .slip--board {
    margin: var(--space-12) var(--gutter-mobile) 56px;
    padding: var(--space-8);
    gap: var(--space-8);
  }

  /* 419 = padding 32 + (17 + 115 + 65 + 0 + 20 + 43 + 31) + шесть зазоров 16.
     Разделитель здесь ОДИН и нулевой высоты, в отличие от главной. */
  .slip--board .slip__head { height: 17px; min-height: 0; }
  .slip--board .slip__title { font-size: var(--fs-label); line-height: 17px; }
  .slip--board .slip__pick { height: 115px; min-height: 0; }
  .slip--board .slip__stake { height: 65px; }
  .slip--board .slip__stake-control { height: 43px; padding: 10px var(--space-8); }
  .slip--board .slip__return { height: 20px; min-height: 0; }
  .slip--board .slip__place { height: 43px; }
  .slip--board .slip__legal { height: 31px; }
  .slip--board .slip__rule { height: 0; }
  .slip--board .slip__rule--narrow { display: none; }
}

/* ============================================================================
   Страница Racing. Числа из фреймов 0:796 (1440) и 0:6621 (390).
   ========================================================================= */

/* ── Интро (0:823): 1440×320, слева 880 (padding 40/80), справа 560 ─────── */

.racing-intro {
  display: flex;
  align-items: stretch;
  height: 320px;
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.racing-intro__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-10);
  flex: 1;
  min-width: 0;
  padding: var(--space-12) var(--gutter);
}

.racing-intro__badges { display: flex; align-items: center; gap: var(--space-6); }

.racing-intro__count {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.racing-intro__headline { display: flex; flex-direction: column; gap: 4px; }

.racing-intro__title { font-size: var(--fs-h2); line-height: 52px; }

.racing-intro__lead {
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: var(--color-muted);
}

.racing-intro__cta { display: flex; align-items: center; gap: var(--space-8); }

.racing-intro__mark {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.racing-intro__right {
  position: relative;
  flex: none;
  width: 560px;
  background: var(--color-brand);
  overflow: hidden;
}

.racing-intro__watermark {
  position: absolute;
  top: 40px;
  left: 24px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 131px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 253, 248, .35);
  white-space: nowrap;
  pointer-events: none;
}

.racing-intro__right img {
  position: absolute;
  right: 40px;
  bottom: 20px;
  z-index: 1;
  width: 440px;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* ── Ближайшие забеги (0:840): padding 48/80, gap 24 ────────────────────── */

.ntj {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-13) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.ntj__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  min-height: 55px;
}

.ntj__intro { display: flex; flex-direction: column; gap: 4px; }

.ntj__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.ntj__title { font-size: var(--fs-h5); line-height: 35px; }

.ntj__all {
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding-inline: var(--space-9);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-extrabold);
  line-height: 17px;
  text-transform: uppercase;
}

.ntj__all:hover { background: var(--color-ink-hover); }

.ntj__rail {
  /* 0:847 — ряд из пяти карточек, а не сетка на три (gap 16) */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-8);
  min-height: 121px;
}

.ntj-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-9);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

/* Цвета карточек берутся из фреймов, а не «первая выделена»:
   0:848 белая с красной обводкой, 0:856 коралловая, 0:864 тёмная,
   0:872 белая, 0:880 оранжевая. На 390 четвёртая бежевая (0:6690). */
.ntj-card--lead { box-shadow: inset 0 0 0 2px var(--color-brand); }

.ntj-card--hot { background: var(--color-flame); }

.ntj-card--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

.ntj-card--plain { background: var(--color-surface); }

.ntj-card--amber { background: var(--color-amber); }

.ntj-card--hot .ntj-card__timer,
.ntj-card--amber .ntj-card__timer { color: var(--color-ink); }

.ntj-card--ink .ntj-card__timer { color: var(--color-flame); }

.ntj-card--hot .ntj-card__race,
.ntj-card--amber .ntj-card__race { color: var(--color-ink); }

.ntj-card--ink .ntj-card__race { color: var(--color-paper); }

.ntj-card--ink .badge--ink {
  background: var(--color-paper);
  color: var(--color-ink);
}

@media (max-width: 767px) {
  /* 0:6690 — на мобильном фрейме четвёртая карточка бежевая, а не белая */
  .ntj-card--plain { background: var(--color-paper); }
}

.ntj-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.ntj-card__timer {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  line-height: 30px;
  color: var(--color-brand-text);
}

.ntj-card.is-selected .ntj-card__timer { color: var(--color-ink); }

.ntj-card__body { display: flex; flex-direction: column; gap: 4px; }

.ntj-card__track {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.ntj-card__race {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-sm);
  color: var(--color-muted);
}

/* 0:6673 / 0:854 — на карточке-лидере подпись оранжевая и капсом */
.ntj-card--lead .ntj-card__race {
  color: var(--color-amber-text);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
}

/* 0:6669 — у лидера бейдж красный, у остальных тёмный */
.ntj-card--lead .badge--ink { background: var(--color-brand); }

/* ── Рабочая область забега (0:888): padding 40/80/64, gap 32 ──────────── */

.race-workspace {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--space-12) var(--gutter) var(--space-14);
  background: var(--color-paper);
}

/* Карточка выбранного забега (0:889): padding 32, gap 20 */
.race-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.race-detail__head { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }

.race-detail__track {
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-black);
  line-height: var(--lh-label-sm);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.race-detail__number {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
}

.race-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-left: auto;
}

.race-detail__facts li {
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.race-detail__rule { height: 0; border: 0; box-shadow: 0 0 0 .5px var(--color-line-soft); }

.race-detail__races { display: flex; align-items: center; gap: var(--space-8); min-height: 35px; }

.race-detail__races-label {
  font-size: var(--fs-body);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.race-detail__races-list { display: flex; gap: var(--space-4); }

/* Чип забега 55×35: padding 10/18, radius 100 */
.race-chip {
  height: 35px;
  padding-inline: 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-label-sm);
  line-height: 35px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.race-chip:hover { background: var(--color-paper); }
.race-chip.is-active { background: var(--color-ink); color: var(--color-surface); }

.race-detail__markets { display: flex; gap: var(--space-4); min-height: 39px; }

.market-switch {
  height: 39px;
  padding-inline: var(--space-9);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 39px;
  text-transform: uppercase;
  cursor: pointer;
}

.market-switch.is-active { background: var(--color-brand); color: var(--color-surface); box-shadow: none; }

/* Сетка «поле + купон» (0:900): gap 24 */
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-10);
  align-items: start;
}

.runner-board {
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  overflow: hidden;
}

.runner-board__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-9);
  box-shadow: inset 0 0 0 1px var(--color-line-soft);
}

.runner-board__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.runner-board__title { font-size: var(--fs-h6); line-height: var(--lh-h6); }

.runner-board__count {
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Таблица участников */
.runners { width: 100%; }

.runners th {
  padding: var(--space-6) var(--space-8);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-paper);
}

.runners td {
  padding: var(--space-6) var(--space-8);
  font-size: var(--fs-body-sm);
  line-height: 17px;
  border-top: 1px solid var(--color-line-soft);
  vertical-align: middle;
}

.runners__no {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 16px;
}

.runners__horse {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 16px;
  text-transform: uppercase;
}

.runners__people { display: flex; flex-direction: column; gap: 2px; }

.runners__jockey {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 17px;
}

.runners__trainer {
  font-size: var(--fs-caption);
  line-height: 14px;
  color: var(--color-muted);
}

.odds--sm { height: 36px; padding-inline: var(--space-6); }
.odds--sm .odds__value { font-size: var(--fs-body-sm); }

/* ── Расписание (0:1138): padding 80, gap 40 ───────────────────────────── */

.upcoming {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-15) var(--gutter);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.upcoming__head { display: flex; flex-direction: column; gap: var(--space-3); }

.upcoming__kicker {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  text-transform: uppercase;
}

.upcoming__title { font-size: var(--fs-h4); line-height: 44px; }

.upcoming__note {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

.schedule { display: flex; flex-direction: column; }

/* Строка 1280×62: padding 20, элементы в ряд */
.schedule__row {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  height: 62px;
  padding-inline: var(--space-9);
  border-top: 1px solid var(--color-line-soft);
}

.schedule__row:last-child { border-bottom: 1px solid var(--color-line-soft); }

.schedule__timer {
  width: 80px;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  color: var(--color-brand-text);
}

.schedule__track {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.schedule__race {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  color: var(--color-muted);
}

.schedule__kind { font-size: var(--fs-label-xs); line-height: 16px; }

.schedule__runners {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

.schedule__link { margin-left: auto; }

@media (max-width: 1023px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .racing-intro { flex-direction: column; height: auto; }
  .racing-intro__right { width: 100%; height: 280px; }
}

@media (max-width: 767px) {
  /* Интро на 390 (0:6642): padding 24/16, gap 20 */
  .racing-intro { gap: var(--space-9); padding: var(--space-10) var(--gutter-mobile); }
  .racing-intro__left { padding: 0; gap: var(--space-8); }
  .racing-intro__title { font-size: var(--fs-h5); line-height: 35px; }
  .racing-intro__lead { font-size: var(--fs-body-sm); line-height: 18px; }
  .racing-intro__cta { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .racing-intro__right { height: 200px; border-radius: var(--radius-xl); }
  .racing-intro__right img { position: static; width: 100%; height: 100%; border-radius: 0; }
  .racing-intro__watermark { font-size: 72px; line-height: 78px; }

  /* Ближайшие забеги на 390: лента с прокруткой */
  .ntj { padding: var(--space-10) 0 var(--space-10) var(--gutter-mobile); gap: var(--space-8); }
  .ntj__head { padding-right: var(--gutter-mobile); }
  .ntj__title { font-size: var(--fs-h6); line-height: 30px; }

  .ntj__rail {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: var(--gutter-mobile);
  }

  .ntj__rail::-webkit-scrollbar { display: none; }

  /* 0:6666 — карточка 150×91, паддинг 12, зазор 10; шапка выровнена по низу */
  .ntj__head { align-items: flex-end; }
  .ntj-card {
    flex: none;
    width: 150px;
    height: 91px;
    gap: 10px;
    padding: var(--space-6);
  }
  .ntj-card__top { gap: var(--space-4); }
  .ntj-card__timer { font-size: 24px; line-height: 26px; }
  .ntj-card__body { gap: 2px; }
  .ntj-card__track { font-size: 14px; line-height: 15px; }
  .ntj-card__race { font-size: 11px; line-height: 14px; }
  .ntj-card .badge { padding: 2px 6px; border-radius: 3px; font-size: 8px; line-height: 10px; }

  .race-workspace { gap: var(--space-8); padding: var(--space-8) var(--gutter-mobile); }
  .race-detail { gap: var(--space-8); padding: var(--space-8); }
  .race-detail__number { font-size: var(--fs-h6); line-height: 30px; }
  .race-detail__facts { margin-left: 0; width: 100%; }
  .race-detail__races { flex-wrap: wrap; }
  .race-detail__races-list { overflow-x: auto; scrollbar-width: none; }
  .race-chip { flex: none; }
  .race-detail__markets { flex-wrap: wrap; }

  /* Таблица участников на 390 превращается в карточки */
  .runners thead { display: none; }
  .runners, .runners tbody, .runners tr, .runners td { display: block; width: 100%; }

  .runners tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3) var(--space-6);
    padding: var(--space-8);
    border-top: 1px solid var(--color-line-soft);
  }

  .runners td { padding: 0; border: 0; }
  .runners__no { grid-row: span 2; align-self: center; }
  .runners tr td:nth-child(3) { grid-column: 1 / -1; }
  .runners tr td:last-child,
  .runners tr td:nth-last-child(2) { grid-column: span 1; }

  .runners__people {
    font-size: var(--fs-caption);
    line-height: 14px;
    color: var(--color-muted);
  }

  .upcoming { gap: var(--space-9); padding: var(--space-11) var(--gutter-mobile); }
  .upcoming__title { font-size: var(--fs-h6); line-height: 30px; }

  .schedule__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    height: auto;
    padding: var(--space-8) 0;
  }

  .schedule__timer { width: auto; }
  .schedule__runners { grid-column: 2; font-size: var(--fs-caption); line-height: 14px; }
  .schedule__link { grid-column: 3; }
}


/* ── Racing: уточнения по числам макета ────────────────────────────────── */

/* Шапка забега 68: слева колонка «трек + номер» (зазор 6), справа плашки */
.race-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 68px;
}

.race-detail__name { display: flex; flex-direction: column; gap: var(--space-3); }

.race-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-left: auto;
  min-height: 22px;
}

/* Характеристики забега — плашки 22px с padding 4/10 */
.race-detail__facts li {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Карточка ближайшего забега — 121 */
.ntj-card { height: 121px; }

/* Поле участников: шапка 98 (padding 24), строка заголовков 38, строки по 80 */
.runner-board__head { min-height: 98px; align-items: center; }

.runners th { height: 38px; padding: var(--space-6) var(--space-9); }
.runners td { height: 80px; padding: var(--space-8); }

@media (max-width: 767px) {
  .ntj-card { height: auto; min-height: 94px; }
  .runner-board__head { min-height: 0; padding: var(--space-8); flex-wrap: wrap; }
  .runners td { height: auto; }
}


/* Строка участника 80: высота задаётся строке, а не ячейке — <td> в таблице
   растягивается по содержимому и давала 82.6, то есть +20 на восемь строк. */
.runners tbody tr { height: 80px; }
.runners tbody td { height: auto; padding: var(--space-6) var(--space-8); }

/* Купон на Racing (0:1094): 487, padding 20 */
.slip--race { height: 487px; padding: var(--space-9); }
.slip--race .slip__pick { min-height: 0; }

@media (max-width: 767px) {
  .runners tbody tr { height: auto; }
  .slip--race { height: auto; }
}


/* Заголовки таблицы в одну строку: «Jockey / Trainer» переносился и делал
   шапку 52 вместо 38. */
.runners thead th { white-space: nowrap; }
.runners { border-collapse: collapse; }


/* Заголовок расписания (0:1139): группа «тег + заголовок» и кнопка справа */
.upcoming__head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-10); min-height: 72px; }
.upcoming__intro { display: flex; flex-direction: column; gap: var(--space-3); }

/* Строка расписания (0:1147): 62, padding 20, элементы в ряд */
.schedule__time {
  width: 80px;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
}

.schedule__kind {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-extrabold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.schedule__starts {
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
}

@media (max-width: 767px) {
  .upcoming__head { flex-direction: column; align-items: flex-start; gap: var(--space-6); min-height: 0; }
  .schedule__time { width: auto; }
}


/* Поле — колонка из шапки и таблицы; без этого браузер добавлял
   собственные полпикселя и таблица не сходилась с макетом. */
.runner-board { display: flex; flex-direction: column; }
.runners tbody td { vertical-align: middle; }

/* ============================================================================
   Racing на 390 (фрейм 0:6621). Отдельный рисунок: таблица участников
   превращается в карточки по 153, ближайшие забеги едут лентой, у интро
   появляется постер с водяным знаком.
   ========================================================================= */

@media (max-width: 767px) {
  /* Интро (0:6642): 518 = padding 48 + текст 159 + 20 + кнопки 71 + 20 + постер 200 */
  /* Hero на 390 (0:6642): три группы с зазором 20, внутри первой — 12
     между бейджем, счётчиком, заголовком и лидом (0:6643 = 159). */
  .racing-intro { gap: var(--space-6); padding: var(--space-10) var(--gutter-mobile); }
  .racing-intro__left { display: contents; }
  .racing-intro__cta, .racing-intro__right { margin-top: var(--space-4); }

  .racing-intro__badges {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .racing-intro__count { font-size: var(--fs-body); line-height: 18px; }

  .racing-intro__headline { gap: var(--space-6); }
  .racing-intro__title { font-size: 44px; line-height: 48px; }
  .racing-intro__lead { font-size: var(--fs-body-sm); line-height: 18px; }

  .racing-intro__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .racing-intro__cta .btn { height: 48px; }
  .racing-intro__mark { font-size: 10px; line-height: 13px; }

  .racing-intro__right { height: 200px; border-radius: var(--radius-xl); }
  .racing-intro__right img { position: absolute; left: 0; top: 21px; width: 247px; height: 157px; border-radius: 0; }
  .racing-intro__watermark { font-size: 48px; line-height: 52px; top: 12px; left: 10px; }

  /* Ближайшие забеги (0:6659): 201, лента карточек 150×91 */
  .ntj { gap: var(--space-8); padding: var(--space-10) 0 var(--space-10) var(--gutter-mobile); }
  .ntj__head { min-height: 46px; padding-right: var(--gutter-mobile); }
  .ntj__title { font-size: var(--fs-h6); line-height: 30px; }
  .ntj__all { height: 18px; padding: 0; background: none; color: var(--color-brand-text); }
  .ntj__all:hover { background: none; color: var(--color-brand-active); }

  .ntj__rail { min-height: 91px; }
  /* Карточка ленты на 390 (0:6666): 150×91, padding 12, зазор 10;
     таймер 24/26, трек 14/15, номер забега 11/14. */
  .ntj-card { height: 91px; min-height: 91px; gap: 10px; padding: var(--space-6); }
  .ntj-card__top { min-height: 26px; }
  .ntj-card__timer { font-size: 24px; line-height: 26px; }
  .ntj-card__body { gap: 2px; min-height: 31px; }
  .ntj-card__track { font-size: 14px; line-height: 15px; }
  .ntj-card__race { font-size: 11px; line-height: 14px; }

  /* Карточка забега (0:6698): секция 340, карточка 308 (padding 16, gap 14) */
  /* Секции макета на 390 идут во всю ширину с боковым отступом 16,
     поэтому рабочая область не имеет своего бокового padding. */
  .race-workspace { gap: var(--space-8); padding: var(--space-8) var(--gutter-mobile); }
  /* Зазор до купона на 390 — 40: нижний отступ списка 24 плюс верхний 16 */
  .race-workspace .slip--race { margin: var(--space-8) 0 0; }
  .race-detail { gap: 14px; padding: var(--space-8); }
  /* В мобильном фрейме название забега и полоса фактов — два отдельных
     блока карточки (55 и 19) с общим зазором 14, а не одна шапка. */
  .race-detail__head { display: contents; }
  .race-detail__name {
    display: flex; flex-direction: row; align-items: baseline;
    gap: var(--space-4); min-height: 55px;
  }
  .race-detail__number { font-size: var(--fs-h6); line-height: 30px; }
  .race-detail__facts { gap: var(--space-3); margin-left: 0; min-height: 19px; }
  .race-detail__facts li { padding: 2px 6px; font-size: 10px; line-height: 13px; }
  .race-detail__races { flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 103px; }
  .race-detail__races-list { flex-wrap: wrap; gap: var(--space-4); }
  .race-chip { height: 29px; padding-inline: var(--space-6); line-height: 29px; font-size: var(--fs-label-xs); }
  .race-detail__markets { min-height: 29px; gap: var(--space-4); }
  .market-switch { height: 29px; padding-inline: var(--space-6); font-size: var(--fs-caption); line-height: 29px; }

  /* Поле участников (0:6738): карточки 153, зазор 10 */
  .runner-board {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  /* Шапка списка на 390 (0:6739): слева кикер над заголовком (46),
     справа счётчик, прижатый к нижней линии. Разметка плоская,
     поэтому колонка собирается сеткой, а не обёрткой. */
  .runner-board__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 14px 28px;
    row-gap: 4px;
    column-gap: var(--space-4);
    min-height: 46px;
    padding: 0 0 var(--space-8);
    box-shadow: none;
    align-items: end;
  }
  .runner-board__kicker { grid-area: 1 / 1; }
  .runner-board__title { grid-area: 2 / 1; }
  .runner-board__count { grid-area: 2 / 2; }

  /* Шапка списка на 390 (0:6739): 46 = кикер 14 + зазор 4 + заголовок 28 */
  .runner-board__intro { gap: 4px; }
  .runner-board__kicker { line-height: 14px; }
  .runner-board__title { font-size: 24px; line-height: 28px; }

  .runner-board__count {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-surface);
    font-size: var(--fs-caption);
    line-height: 13px;
  }

  .runners tbody { display: flex; flex-direction: column; gap: 10px; }

  .runners tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-6) var(--space-6);
    height: 153px;
    align-content: start;
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1.5px var(--color-ink);
  }

  .runners__no {
    grid-row: 1;
    align-self: start;
    font-size: var(--fs-title-sm);
    line-height: var(--lh-title-sm);
  }

  .runners__name { grid-row: 1; }
  .runners tbody tr td:nth-last-child(2),
  .runners tbody tr td:last-child { grid-column: span 1; align-self: end; }

  /* Расписание (0:7003): карточки 96 с padding 14 и зазором 8 */
  .upcoming { gap: var(--space-9); padding: var(--space-11) var(--gutter-mobile); }
  .upcoming__head { min-height: 83px; gap: var(--space-3); }
  .upcoming__title { font-size: var(--fs-h6); line-height: 28px; }
  .upcoming .ntj__all { display: none; }

  .schedule { gap: 0; }

  .schedule__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    height: 96px;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--color-line-soft);
  }

  .schedule__time { grid-row: 1; font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); }
  .schedule__track { grid-row: 1; grid-column: 2 / -1; }
  .schedule__kind { grid-row: 2; }
  .schedule__starts { grid-row: 2; grid-column: 2; font-size: var(--fs-body-sm); line-height: 17px; }
  .schedule__link { grid-row: 2; grid-column: 3; }

  /* Купон (0:6958): 467, padding 16 */
  .slip--race {
    height: auto;
    margin: var(--space-8) 0 var(--space-11);
    padding: var(--space-8);
    gap: var(--space-8);
  }
}


@media (max-width: 767px) {
  /* Заголовок «Next to jump» на 390 — 24/26, а не 28/30 */
  .ntj__head { min-height: 46px; align-items: flex-start; }
  .ntj__intro { gap: 4px; }
  .ntj__title { font-size: var(--fs-title); line-height: var(--lh-title); }
  .ntj__kicker { line-height: 16px; }
  .ntj__rail { min-height: 91px; align-items: start; }

  /* Купон на Racing @390 — панель 0:6959: 358×435, padding 20, зазор 16.
     Части: шапка 20, выбор 98, ставка 64, возврат 24, кнопка 45, сноска 32;
     разделители в макете — LINE нулевой высоты. */
  .slip--race { min-height: 435px; }
  .slip--race .slip__head { min-height: 20px; }
  .slip--race .slip__pick { min-height: 98px; }
  .slip--race .slip__stake { min-height: 64px; gap: 6px; }
  .slip--race .slip__stake-control { height: 44px; min-height: 44px; }
  .slip--race { padding: 20px; }
  .slip--race .slip__return { min-height: 24px; }
  .slip--race .slip__place { min-height: 45px; height: 45px; }
  .slip--race .slip__rule {
    height: 1px;
    margin-bottom: -1px;
    border: 0;
    background: color-mix(in srgb, var(--color-cream) 15%, transparent);
  }

  /* Карточка участника: 153 при восьми карточках даёт ровно 1294 */
  .runners tbody { gap: 10px; }
}

/* ============================================================================
   Showdown. Фреймы 0:1255 (1440) и 0:7115 (390).
   ========================================================================= */

/* ── Интро (0:1282): 654, padding 80, gap 64; сетка 752 + 480 с зазором 48 ─ */

.sd-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 752fr) 480px;
  gap: var(--space-13);
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  overflow: hidden;
}

.sd-hero__watermark {
  position: absolute;
  top: 40px;
  right: -40px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 180px;
  line-height: 160px;
  text-align: right;
  text-transform: uppercase;
  color: var(--color-flame);
  opacity: .25;
  pointer-events: none;
}

.sd-hero__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
}

.sd-hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-h2);
  line-height: 58px;
}

/* 0:1291 — вторая строка красная, 0:1292 — третья мельче и тёмная */
.sd-hero__title-accent { color: var(--color-brand); }

.sd-hero__title-small {
  font-size: var(--fs-h4);
  line-height: 44px;
}

.sd-hero__lead {
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-medium);
  line-height: 27px;
  color: var(--color-muted);
}

/* 0:1295 — белая плашка с красной обводкой 1.5px, а не бледная заливка */
.sd-hero__warning {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 20px;
  color: var(--color-brand-text);
}

/* Панель статуса (0:1338): 378×480, padding 32, gap 24 */
/* На десктопе обёртка карточки прозрачна: раскладку держит .sd-status.
   Разделители есть только в мобильном фрейме. */
.sd-status__card { display: contents; }
/* 0:1310 и 0:1316 — линии есть и на десктопе: 1px белым при opacity .15.
   У <hr> нельзя рисовать псевдоэлементом (это void-элемент) — красим сам бокс. */
.sd-status__rule {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-surface);
  opacity: .15;
}

.sd-status {
  position: relative;
  z-index: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-surface);
}

/* 0:1297 — две половины в общей рамке 2px, радиус 12, разделитель 2px.
   Имя .sd-split в проекте уже занято другой секцией — здесь .sd-wallets. */
.sd-wallets {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  min-height: 94px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.sd-wallets::before {
  content: "";
  grid-column: 2;
  background: var(--color-ink);
}

.sd-wallet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-9);
  margin: 0;
  background: var(--color-surface);
}

.sd-wallet:first-child { grid-column: 1; }

.sd-wallet--alt {
  grid-column: 3;
  background: var(--color-brand);
  color: var(--color-surface);
}

.sd-wallet__name {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.sd-wallet__note { font-size: var(--fs-label-xs); line-height: 16px; opacity: .8; }

.sd-status__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.sd-status__title {
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.sd-status__cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  text-transform: uppercase;
}

.sd-status__text { font-size: var(--fs-body); line-height: 20px; opacity: .85; }

.sd-status__legal { font-size: var(--fs-caption); line-height: 14px; opacity: .7; }
/* 0:1319 — оранжевая строка, а не белая */
.sd-status__legal--strong { font-weight: var(--fw-extrabold); opacity: 1; color: var(--color-amber); }

/* ── Разделение аккаунтов (0:1320): 617, gap 48 ─────────────────────────── */

.sd-split,
.sd-steps,
.sd-compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.sd-split__head,
.sd-steps__head,
.sd-compare__head { display: flex; flex-direction: column; gap: var(--space-6); }

.sd-split__kicker,
.sd-steps__kicker,
.sd-compare__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.sd-split__title,
.sd-steps__title,
.sd-compare__title { font-size: var(--fs-h4); line-height: 44px; }

.sd-split__lead {
  font-size: var(--fs-body-lg);
  line-height: 21px;
  color: var(--color-muted);
}

/* Сетка сравнения: 476 + 280 + 476, зазор 24 */
.sd-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 476fr) 280px minmax(0, 476fr);
  gap: var(--space-10);
  align-items: start;
}

.sd-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.sd-col--alt { background: var(--color-ink); color: var(--color-surface); }

.sd-col__tag {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-surface);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 14px;
  text-transform: uppercase;
}

.sd-col__title {
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-bold);
  font-family: var(--font-body);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.sd-col__list { display: flex; flex-direction: column; gap: var(--space-6); }

.sd-col__list li {
  font-size: var(--fs-body);
  line-height: 18px;
}

.sd-col:not(.sd-col--alt) .sd-col__list li { color: var(--color-muted); }

/* Разделитель «≠» (0:1330): 280×134, padding 20, gap 8 */
.sd-split__divider {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-9);
  border-radius: var(--radius-xl);
  background: var(--color-flame);
  text-align: center;
}

.sd-split__sign {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
}

.sd-split__note {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 14px;
  text-transform: uppercase;
}

/* ── Ключевое утверждение (0:1378): 398, gap 24 ─────────────────────────── */

.sd-statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-15) var(--gutter);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.sd-statement__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 58px;
  text-transform: uppercase;
}

.sd-statement__lines span:nth-child(2) { color: var(--color-brand); }
.sd-statement__lines span:nth-child(3) { color: var(--color-muted); }

.sd-statement__note {
  max-width: 90ch;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  color: var(--color-muted);
}

/* ── Три шага (0:1384): карточки 411, padding 28, gap 20 ────────────────── */

.sd-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  align-items: start;
}

.sd-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.sd-step__num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  color: var(--color-brand);
}

.sd-step__title {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  font-family: var(--font-body);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.sd-step__text {
  font-size: var(--fs-body-sm);
  line-height: 18px;
  color: var(--color-muted);
}

.sd-step__link {
  margin-top: auto;
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
  cursor: pointer;
}

.sd-step__tag {
  margin-top: auto;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  line-height: 13px;
  text-transform: uppercase;
}

/* ── Что остаётся раздельным (0:1411): две колонки 616, зазор 48 ────────── */

.sd-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-13);
}

.sd-compare__col { display: flex; flex-direction: column; gap: var(--space-9); }

.sd-compare__name {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  font-family: var(--font-body);
  line-height: var(--lh-title-sm);
  text-transform: uppercase;
}

.sd-checks { display: flex; flex-direction: column; gap: var(--space-6); }

.sd-checks li {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

.sd-checks li::before {
  content: "✔";
  flex: none;
  font-size: var(--fs-body-lg);
  color: var(--color-success);
}

/* ── Повторный призыв (0:1453): 350, padding 80, gap 32 ─────────────────── */

.sd-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-11);
  padding: var(--space-15) var(--gutter);
  background: var(--color-brand);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  text-align: center;
}

.sd-cta__title { font-size: 48px; line-height: 52px; }

.sd-cta__text {
  max-width: 680px;
  font-size: var(--fs-body-lg);
  line-height: 21px;
}

.sd-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.sd-cta__actions .btn { height: 52px; padding-inline: var(--space-11); }
.sd-cta .btn--outline { color: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-surface); }
.sd-cta .btn--outline:hover { background: var(--color-surface); color: var(--color-ink); }

@media (max-width: 1023px) {
  .sd-hero { grid-template-columns: 1fr; }
  .sd-split__grid { grid-template-columns: 1fr; }
  .sd-split__divider { flex-direction: row; }
  .sd-steps__list { grid-template-columns: 1fr; }
  .sd-compare__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .sd-hero,
  .sd-split,
  .sd-steps,
  .sd-compare,
  .sd-statement { gap: var(--space-10); padding: var(--space-9) var(--space-9); }

  .sd-hero__watermark { font-size: 96px; line-height: 88px; right: -10px; }
  .sd-hero__text { gap: var(--space-9); }
  .sd-hero__title { font-size: var(--fs-h4); line-height: 44px; }
  .sd-hero__sub { font-size: var(--fs-h6); line-height: 30px; }
  .sd-hero__lead { font-size: var(--fs-body); line-height: 21px; }

  .sd-status { padding: var(--space-9); gap: var(--space-8); }

  .sd-split__title,
  .sd-steps__title,
  .sd-compare__title { font-size: var(--fs-h6); line-height: 30px; }

  .sd-statement { gap: var(--space-8); }
  .sd-statement__lines { font-size: var(--fs-h5); line-height: 36px; }
  .sd-statement__note { font-size: var(--fs-body-sm); line-height: 18px; }

  .sd-col { padding: var(--space-9); gap: var(--space-8); }
  .sd-split__divider { padding: var(--space-8); }
  .sd-step { padding: var(--space-9); gap: var(--space-8); }
  .sd-step__num { font-size: var(--fs-h5); line-height: 36px; }

  .sd-compare { padding: var(--space-10) var(--space-10); }
  .sd-cta { padding: var(--space-11) var(--space-11); gap: var(--space-10); }
  .sd-cta__title { font-size: var(--fs-h5); line-height: 36px; }
  .sd-cta__actions { flex-direction: column; align-self: stretch; }
}


/* Интро Showdown: три группы с зазором 32; внутри первой 20, внутри второй 16 */
.sd-hero__group { display: flex; flex-direction: column; }
.sd-hero__group--title { gap: var(--space-9); min-height: 214px; justify-content: flex-start; }
.sd-hero__group--lead { gap: var(--space-8); min-height: 122px; }
/* 0:1295 — плашка 52, а не 94: в группе 122 = лид 54 + зазор 16 + плашка 52 */
.sd-hero__warning { min-height: 52px; display: flex; align-items: center; }

/* Карточка шага (0:1392): 250 при padding 28 */
.sd-step { min-height: 250px; }

/* Пояснение под утверждением в макете — одна строка */
.sd-statement__note { max-width: none; }


/* Колонки интро не растягиваются друг под друга: в макете панель статуса
   378, а текст 494, и сетка их не выравнивает. */
.sd-hero { align-items: start; }
.sd-status { min-height: 378px; }

/* Колонки сравнения в макете 304 и 274 — по содержимому, без выравнивания */
.sd-split__grid { align-items: start; }
.sd-col { min-height: 0; }

/* Карточки шагов: первая 250, остальные 235 */
.sd-steps__list { align-items: start; }
.sd-step { min-height: 235px; }
.sd-step:first-child { min-height: 250px; }


/* Панель статуса (0:1338): 378 при padding 32 — содержимое уплотнено
   до макетного, иначе панель тянет вверх всю секцию интро. */
.sd-status { min-height: 0; height: 378px; gap: var(--space-8); padding: var(--space-11); }
.sd-status__wallets { gap: var(--space-4); }
.sd-wallet { padding: var(--space-6) var(--space-8); }
.sd-wallet__name { font-size: var(--fs-label); line-height: var(--lh-label); }
.sd-status__cta-title { font-size: var(--fs-title); line-height: var(--lh-title); }
.sd-status__text { font-size: var(--fs-body-sm); line-height: 18px; }
.sd-status .btn { height: 44px; }
.sd-status__legal { font-size: var(--fs-micro); line-height: 13px; }

@media (max-width: 767px) { .sd-status { height: auto; } }


/* Списки в колонках сравнения: строки 18 при зазоре 8 (макет 0:1321) */
.sd-col__list { gap: var(--space-4); }
.sd-col__list li { line-height: 18px; }
.sd-checks { gap: var(--space-4); }
.sd-checks li { line-height: 18px; }


/* Высоты колонок заданы макетом поштучно: 304 и 274 в сравнении аккаунтов,
   185 в блоке «что остаётся раздельным». */
.sd-split__grid > .sd-col:first-child { min-height: 304px; }
.sd-split__grid > .sd-col--alt { min-height: 274px; }
.sd-compare__col { min-height: 185px; }

@media (max-width: 767px) {
  .sd-split__grid > .sd-col:first-child,
  .sd-split__grid > .sd-col--alt,
  .sd-compare__col { min-height: 0; }
}


/* Секция «что остаётся раздельным» 457, призыв 350, RG на этой странице 468 */



/* Колонки «что остаётся раздельным» в макете 177 */
.sd-compare__col { min-height: 177px; }

/* На Showdown секция RG в макете 468 — на 6 выше общей */
.sd-showdown-rg { min-height: 468px; }
@media (max-width: 767px) { .sd-showdown-rg { min-height: 0; } }

/* ============================================================================
   How it works. Фрейм 0:1762 (1440) и 3:184 (390).
   ========================================================================= */

.hiw-hero {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.hiw-hero__intro { display: flex; flex-direction: column; gap: var(--space-10); }

.hiw-hero__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-display);
  line-height: 76px;
}

.hiw-hero__leads { display: flex; gap: var(--space-13); padding-top: var(--space-8); }

.hiw-hero__lead {
  flex: 1;
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-medium);
  line-height: 30px;
}

.hiw-hero__note {
  flex: 1;
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: var(--color-muted);
}

/* Полоса шагов (0:1806): 189, padding 40 */
.hiw-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-surface);
}

.hiw-timeline__item { display: flex; flex-direction: column; gap: var(--space-6); }

.hiw-timeline__num {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 35px;
  color: var(--color-brand);
}

.hiw-timeline__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

/* ── Секция шага (0:1826): padding 80, gap 64; текст 616, демо 600 ─────── */

.hiw-step {
  display: grid;
  grid-template-columns: minmax(0, 616fr) minmax(0, 600fr);
  gap: var(--space-14);
  align-items: start;
  padding: var(--space-15) var(--gutter);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* Чередование берётся из фреймов, а не «через один»: 01 белый (0:1826),
   02 бежевый (0:1871), 03 ТЁМНЫЙ (0:1921), 04 снова белый (0:1979). */
.hiw-step--02 { background: var(--color-paper); }

.hiw-step--03 {
  background: var(--color-ink);
  color: var(--color-paper);
}

.hiw-step--04 { background: var(--color-surface); }

/* 0:3252 — на RG метаполоса бежевая, а не белая как на legal-страницах */
.page-responsible-gambling .legal-meta { background: var(--color-paper); }

.hiw-step__text { display: flex; flex-direction: column; gap: var(--space-11); }
.hiw-step__head { display: flex; flex-direction: column; gap: var(--space-6); }

.hiw-step__num {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 87px;
  color: var(--color-brand);
}

.hiw-step__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hiw-step__title { font-size: 48px; line-height: 52px; }

.hiw-step__lead {
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: var(--color-muted);
}

.hiw-step__note {
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--color-muted);
}

.hiw-step__checks { display: flex; flex-direction: column; gap: var(--space-6); }

.hiw-step__checks li {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  font-size: var(--fs-body);
  line-height: 18px;
}

.hiw-step__check-num {
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  color: var(--color-brand-text);
}

.hiw-step__demo { display: flex; flex-direction: column; gap: var(--space-8); }

.match--demo { background: var(--color-surface); }
.match--demo.is-confirmed { box-shadow: inset 0 0 0 2px var(--color-success); }

.slip--demo { width: 100%; position: static; }

/* ── Переходы между шагами (0:1866, 0:1917) ────────────────────────────── */

.hiw-transition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  height: 90px;
  padding-inline: var(--gutter);
  background: var(--color-flame);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* 0:1866 — первая переходная полоса красная, вторая (0:1974) коралловая.
   Правило стоит после .hiw-transition, иначе та перебивает его порядком. */
.hiw-transition.hiw-transition--first { background: var(--color-brand); }

.hiw-transition__text {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  text-transform: uppercase;
}

.hiw-connector {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: 63px;
  padding-inline: var(--gutter);
  /* 0:1917 — белая полоса, не бежевая */
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.hiw-connector__line { flex: 1; height: 1px; background: var(--color-line-soft); }

.hiw-connector__label {
  font-family: var(--font-display);
  font-size: var(--fs-label-sm);
  line-height: 15px;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .hiw-step { grid-template-columns: 1fr; }
  .hiw-hero__leads { flex-direction: column; gap: var(--space-8); }
  .hiw-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .hiw-hero { gap: var(--space-11); padding: var(--space-11) var(--gutter-mobile); }
  .hiw-hero__title { font-size: var(--fs-h4); line-height: 44px; }
  .hiw-hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .hiw-hero__note { font-size: var(--fs-body-sm); line-height: 18px; }
  .hiw-timeline { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-9); }
  .hiw-timeline__item { flex-direction: row; align-items: baseline; gap: var(--space-6); }
  .hiw-timeline__num { font-size: var(--fs-h6); line-height: 30px; }

  .hiw-step { gap: var(--space-10); padding: var(--space-11) var(--gutter-mobile); }
  .hiw-step__num { font-size: var(--fs-h3); line-height: 46px; }
  .hiw-step__title { font-size: var(--fs-h6); line-height: 30px; }
  .hiw-step__lead { font-size: var(--fs-body-sm); line-height: 18px; }

  .hiw-transition { height: auto; padding: var(--space-9) var(--gutter-mobile); }
  .hiw-transition__text { font-size: var(--fs-label-lg); line-height: 22px; }
  .hiw-connector { height: auto; padding: var(--space-8) var(--gutter-mobile); }
}


/* Секция RG на how-it-works (0:2008): 648 — карточки идут 2×2 и крупнее */
/* 0:2008 — на этой странице дизайнер нарисовал не карточки, а список строк:
   слева заголовок и подпись, справа красная ссылка, между строками линия.
   Карточная раскладка остаётся на главной и остальных страницах. */
.hiw-rg { min-height: 648px; }

.hiw-rg .rg-section__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 336px;
}

/* 0:2015 — строка 84: паддинг 20 сверху и снизу, разделитель снизу */
.hiw-rg .rg-card {
  display: grid;
  grid-template-columns: minmax(0, 800px) auto;
  align-items: center;
  /* зазор только по горизонтали: строчный gap в grid раздвигал заголовок
     и подпись и делал строку 109 вместо 84 */
  column-gap: var(--space-10);
  row-gap: 0;
  min-height: 84px;
  padding: var(--space-9) 0;
  border-radius: 0;
  background: none;
  /* Разделитель тенью, а не границей: border занимает высоту и делал
     строку 85 вместо макетных 84, а к низу секции набегало +4px. */
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-surface) 90%, transparent);
}

/* 0:2017 — на тёмной секции заголовок в макете светлый (#fffdf8). Общий
   --color-ink давал ink на ink, то есть 1:1: текст не был виден вовсе. */
.hiw-rg .rg-card__title {
  grid-column: 1;
  font-size: var(--fs-label-lg);
  line-height: 20px;
  color: var(--color-paper);
}

/* 0:2018 — подпись сразу под заголовком, зазор 6. Карточка здесь лежит на
   тёмном фоне секции, поэтому цвет светлый (#fffdf8 в макете), а не общий
   серый --color-muted: тот давал 2.9:1 при норме 4.5. */
.hiw-rg .rg-card__text {
  grid-column: 1;
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  line-height: 18px;
  color: var(--color-paper);
  opacity: .8;
}

/* 0:2019 — ссылка справа, капсом, красная */
.hiw-rg .rg-card__link {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: end;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-black);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-brand);
}

@media (max-width: 767px) {
  .hiw-rg { min-height: 0; }
  .hiw-rg .rg-section__grid { grid-template-columns: 1fr; min-height: 0; }
  .hiw-rg .rg-card { padding: var(--space-8); }
}


/* Высоты секций-шагов заданы макетом поштучно: у каждого шага свой объём
   демонстрации, поэтому одинаковыми они быть не могут. */
.hiw-hero { min-height: 741px; }
.hiw-step--01 { min-height: 487px; }
.hiw-step--02 { min-height: 457px; }
.hiw-step--03 { min-height: 678px; }
.hiw-step--04 { min-height: 542px; }

@media (max-width: 767px) {
  .hiw-hero,
  .hiw-step--01,
  .hiw-step--02,
  .hiw-step--03,
  .hiw-step--04 { min-height: 0; }
}


/* Внутри текстовой колонки шага зазор 12, а до кнопки — 32 (макет 0:1827) */
.hiw-step__head { gap: var(--space-6); }
.hiw-step__text { gap: var(--space-11); }
.hiw-step__lead { font-size: var(--fs-body-lg); line-height: 26px; }
.hiw-step__note { font-size: var(--fs-body); line-height: 19px; }


/* Номер шага в макете — бокс 87 при кегле 80; у заголовка и лида
   свои межстрочные, поэтому колонка укладывается в 327. */
.hiw-step__num { line-height: 80px; }
.hiw-step__head { gap: 10px; }
.hiw-step__title { font-size: 44px; line-height: 48px; }

.hiw-step__head { gap: var(--space-4); }
.hiw-step--02 .hiw-step__note { line-height: 18px; }

/* ============================================================================
   Help Centre. Фрейм 0:2096 (1440) и 4:4 (390).
   ========================================================================= */

.help-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-height: 648px;
  padding: 100px var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  overflow: hidden;
}

/* 0:2102 — вторая половина заголовка красная */
.help-hero__title-accent { color: var(--color-brand); }

/* 0:2103 — лид шириной 640, поэтому переносится на три строки */
.help-hero__lead { max-width: 640px; }

/* 0:2106 — поле и кнопка в одной белой плашке: обводка 2, радиус 8, тень,
   паддинг 4 со всех сторон кроме левого (24 под лупу) */
.help-search__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 72px;
  padding: 4px 4px 4px var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink), 0 4px 16px rgba(18, 14, 13, .102);
}

/* На широкой ширине обёртка поля растворяется: лупа и поле лежат прямо
   в плашке, как в 0:2106. Своя коробка нужна ей только на мобильном. */
.help-search__field { display: contents; }

.help-search__icon { flex: none; color: var(--color-ink); }

.help-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  font-size: 18px;
  line-height: 23px;
}

.help-search__input:focus { outline: none; }

.help-search__row:focus-within { outline: var(--focus-ring); outline-offset: 2px; }

/* 0:2110 — кнопка внутри плашки: 138×54, радиус 6, обводка 1.5 */
.help-search__row .btn {
  flex: none;
  min-height: 54px;
  padding: 18px var(--space-11);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

/* 0:2114 — популярные запросы это пилюли, а не ссылки */
.help-search__tag {
  padding: 8px var(--space-8);
  border-radius: 50px;
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 17px;
  color: var(--color-ink);
}

.help-search__tag:hover { background: var(--color-surface); }

.help-search__popular-label { opacity: .6; }

.help-hero__watermark {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 320px;
  line-height: 348px;
  text-transform: uppercase;
  color: var(--color-flame);
  opacity: .2;
  pointer-events: none;
}

.help-hero__intro,
.help-search { position: relative; z-index: 1; }

.help-hero__intro { display: flex; flex-direction: column; gap: var(--space-10); }

.help-hero__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.help-hero__title { font-size: var(--fs-display); line-height: 76px; }

.help-hero__lead {
  max-width: 90ch;
  font-size: var(--fs-label-lg);
  line-height: 27px;
  color: var(--color-muted);
}

/* Поиск (0:2110): 161, gap 20 */
.help-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  max-width: 800px;
}

.help-search__label {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
}

.help-search__row { display: flex; gap: var(--space-6); }

.help-search__input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding-inline: var(--space-9);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  font-size: var(--fs-label-lg);
  line-height: 56px;
}

.help-search__row .btn { height: 56px; }

.help-search__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.help-search__popular-label,
.help-search__tag {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 17px;
}

.help-search__tag { color: var(--color-brand-text); cursor: pointer; }
.help-search__tag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Быстрые действия (0:2124): 84, padding 32/80, gap 24 ──────────────── */

.quick-help {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: 84px;
  padding-inline: var(--gutter);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.quick-help__label {
  flex: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 19px;
  text-transform: uppercase;
}

.quick-help__list { display: flex; flex-wrap: wrap; gap: var(--space-11); }

.quick-help__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 20px;
  text-transform: uppercase;
}

.quick-help__link:hover { color: var(--color-brand-text); }

.quick-help__num {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  color: var(--color-brand-text);
}

/* ── Каталог и статьи (0:2151): 1226, padding 80, gap 80 ───────────────── */

.help-workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--space-15);
  align-items: start;
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
}

.help-topics { display: flex; flex-direction: column; gap: var(--space-11); }

.help-topics__label {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.help-topics__title { font-size: var(--fs-h5); line-height: 35px; }

.help-topics__list { display: flex; flex-direction: column; }

.help-topic {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--color-line-soft);
  text-align: left;
  cursor: pointer;
}

.help-topic__num {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  color: var(--color-muted);
}

.help-topic__name {
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-bold);
  line-height: 19px;
  text-transform: uppercase;
}

.help-topic:hover .help-topic__name { color: var(--color-brand-text); }
.help-topic.is-active .help-topic__name { color: var(--color-brand); }

/* 0:2163 — активная тема это белая плашка с красной полосой слева */
.help-topic.is-active {
  padding-left: var(--space-8);
  background: var(--color-surface);
  border-bottom-color: var(--color-brand);
  box-shadow: inset 3px 0 0 var(--color-brand);
}
.help-topic.is-active .help-topic__num { color: var(--color-brand); }

.help-articles { display: flex; flex-direction: column; gap: var(--space-13); }
.help-articles__head { display: flex; flex-direction: column; gap: var(--space-6); }

.help-articles__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.help-articles__title { font-size: 48px; line-height: 52px; }

.help-articles__lead {
  font-size: var(--fs-body-lg);
  line-height: 24px;
  color: var(--color-muted);
}

/* FAQ */
.faq { display: flex; flex-direction: column; }

.faq__item { border-top: 1px solid var(--color-line-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--color-line-soft); }

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-9) 0;
  text-align: left;
  cursor: pointer;
}

.faq__num {
  flex: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
  color: var(--color-brand-text);
}

.faq__text {
  flex: 1;
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-bold);
  line-height: 23px;
}

.faq__chevron { flex: none; transition: rotate var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] .faq__chevron { rotate: 180deg; }
.faq__q[aria-expanded="true"] .faq__text { color: var(--color-brand-text); }

.faq__a {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding-bottom: var(--space-10);
  font-size: 15px;
  line-height: 23px;
  color: var(--color-muted);
}

.faq__steps { display: flex; flex-direction: column; gap: var(--space-6); }

.faq__steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  font-size: 15px;
  line-height: 23px;
}

.faq__step-num {
  flex: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  color: var(--color-brand-text);
}

.faq__more { display: flex; align-items: center; gap: var(--space-8); }

.faq__more-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ── Не нашли ответ (0:2314): 368, padding 80, gap 32 ──────────────────── */

.help-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-11);
  min-height: 368px;
  padding: var(--space-15) var(--gutter);
  background: var(--color-brand);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  text-align: center;
}

.help-cta__text { display: flex; flex-direction: column; gap: var(--space-4); }
.help-cta__title { font-size: var(--fs-h5); line-height: 38px; }

.help-cta__lead {
  max-width: 80ch;
  font-size: var(--fs-body-lg);
  line-height: 24px;
}

.help-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.help-cta__actions .btn { height: 50px; }
.help-cta .btn--outline { color: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-surface); }
.help-cta .btn--outline:hover { background: var(--color-surface); color: var(--color-ink); }

@media (max-width: 1023px) {
  .help-workspace { grid-template-columns: 1fr; gap: var(--space-12); }
  .quick-help { height: auto; flex-wrap: wrap; padding-block: var(--space-9); }
}

@media (max-width: 767px) {
  .help-hero { min-height: 0; gap: var(--space-10); padding: var(--space-11) var(--gutter-mobile); }
  .help-hero__watermark { font-size: 120px; line-height: 130px; right: 0; }
  .help-hero__title { font-size: var(--fs-h4); line-height: 44px; }
  .help-hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .help-search__row { flex-direction: column; }
  .help-search__input { height: 48px; line-height: 48px; font-size: var(--fs-body); }
  .help-search__row .btn { height: 48px; }

  .quick-help { padding: var(--space-9) var(--gutter-mobile); gap: var(--space-8); }
  .quick-help__list { flex-direction: column; gap: var(--space-6); }

  .help-workspace { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-11); }
  .help-topics__title { font-size: var(--fs-h6); line-height: 30px; }
  .help-articles__title { font-size: var(--fs-h6); line-height: 30px; }
  .help-articles { gap: var(--space-10); }
  .faq__text { font-size: var(--fs-body); line-height: 20px; }

  .help-cta { min-height: 0; padding: var(--space-11) var(--gutter-mobile); }
  .help-cta__title { font-size: var(--fs-h6); line-height: 30px; }
  .help-cta__actions { flex-direction: column; align-self: stretch; }
}


/* Список тем (0:2152): 12 пунктов по 55 без зазоров */
.help-topics { gap: var(--space-11); }
.help-topics__list { gap: 0; }
.help-topic { height: 55px; padding-block: 0; }

/* FAQ (0:2262): вопросы по 63 с зазором 16, раскрытый — 357 */
.faq { gap: var(--space-8); }
/* 0:2241 — закрытый вопрос это строка 63 с нижней линией, а не плашка в
   рамке: рамка появляется только у раскрытого (см. эталон 0:2151). */
.faq__item { border: 0; }
.faq__item:last-child { border: 0; }

.faq__q {
  height: 63px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 -1px 0 var(--color-ink);
}

/* Раскрытый вопрос: рамка вокруг всего элемента, заголовок красным капсом */
.faq__item:has(.faq__q[aria-expanded="true"]) {
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.faq__q[aria-expanded="true"] {
  padding: 0 var(--space-9);
  box-shadow: inset 0 -2px 0 var(--color-ink);
}

.faq__q[aria-expanded="true"] .faq__text {
  text-transform: uppercase;
  color: var(--color-brand);
}

.faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { padding: var(--space-10) var(--space-9); }
.faq__a { padding: var(--space-9) var(--space-8) var(--space-10); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-ink); box-shadow: inset 0 -1.5px 0 var(--color-ink), inset 1.5px 0 0 var(--color-ink), inset -1.5px 0 0 var(--color-ink); }

/* Секция RG на Help в макете 496 */
/* 0:2331 — на help-centre карточки без заливки, с белой обводкой 1.5,
   красным номером и светлым текстом; ряд с зазором 24, карточка 302×184. */
.help-rg { min-height: 496px; }
.help-rg .rg-section__grid { gap: var(--space-10); }

.help-rg .rg-card {
  gap: var(--space-8);
  padding: var(--space-10);
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--color-surface);
  color: var(--color-surface);
}

.help-rg .rg-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
  color: var(--color-brand);
}

/* 0:2017 — на тёмной секции заголовок карточки в макете светлый. Общий
   --color-ink давал ink на ink, то есть 1:1: текст был не виден вовсе. */
.help-rg .rg-card__title { font-size: 16px; line-height: 17px; color: var(--color-paper); }
/* 0:2334 — карточка на тёмном фоне: цвет светлый, как в макете. Общий серый
   --color-muted давал здесь 2.65:1 при норме 4.5. */
.help-rg .rg-card__text { font-size: 13px; line-height: 18px; color: var(--color-paper); opacity: .7; }
.help-rg .rg-card__link { font-size: 13px; line-height: 17px; color: var(--color-brand); }

@media (max-width: 767px) {
  .help-topic { height: auto; padding-block: var(--space-6); }
  .faq__q { height: auto; padding: var(--space-8); }
  .help-rg { min-height: 0; }
}


/* Раскрытый ответ в макете 357 при закрытом вопросе 63, а список тем 751 */
.faq__a { min-height: 294px; }
.help-topics { min-height: 751px; }

@media (max-width: 767px) {
  .faq__a { min-height: 0; }
  .help-topics { min-height: 0; }
}


/* В макете Help Centre контент начинается на 132, хотя полоса и шапка
   занимают 120: между ними зазор 12. */
.help-hero { margin-top: 12px; }
.faq__a { min-height: 286px; }

@media (max-width: 767px) { .help-hero { margin-top: 0; } }


/* ============================================================================
   Contact us. Фрейм 0:2438 (1440) и 4:405 (390).
   ========================================================================= */

.contact-intro { min-height: 360px; }

/* Полоса маршрутизации (0:2447): 81, padding 24/80, gap 40 */
.routing {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 81px;
  padding-inline: var(--gutter);
  /* 0:2447 — бежевая полоса */
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.routing__label {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  line-height: 17px;
  text-transform: uppercase;
}

/* 0:2449 — ряд пунктов с зазором 48 и вертикальными разделителями между ними */
.routing__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-13);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 0:2456 / 0:2463 — линии 1px высотой 32 при прозрачности 0.3 */
.routing__item + .routing__item { position: relative; }

.routing__item + .routing__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-13) / -2);
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 32px;
  background: var(--color-ink);
  opacity: .3;
}

/* 0:2450 — значок 24, зазор 12, текст в две строки с зазором 2 */
.routing__link {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.routing__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 14px;
}

.routing__mark--ink { background: var(--color-ink); color: var(--color-paper); }
.routing__mark--amber { background: var(--color-amber); color: var(--color-ink); }
.routing__mark--brand { background: var(--color-brand); color: var(--color-surface); }

.routing__text { display: flex; flex-direction: column; gap: 2px; }

.routing__title {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 15px;
  text-transform: uppercase;
}

.routing__link--brand .routing__title { color: var(--color-brand); }

.routing__note {
  font-size: var(--fs-body-sm);
  /* 0:2455 — Geist 400: обычное начертание, а не жирное как у ссылки */
  font-weight: var(--fw-regular);
  line-height: 16px;
  color: var(--color-muted);
}

.routing__link {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 18px;
}

.routing__link:hover { color: var(--color-brand-text); }

/* Форма и контакты (0:2470): padding 80, gap 80 */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-15);
  align-items: start;
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-13); }

/* 0:2472 — секция формы: зазор 32, между секциями линия 1px при 15% */
.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: 0;
  border: 0;
  margin: 0;
}

/* Линия рисуется тенью в зазоре, а не границей с паддингом: паддинг
   добавлял по 48px на стык и уводил всё ниже на 110px. */
.contact-block + .contact-block {
  position: relative;
}

.contact-block + .contact-block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-13) * -1);
  height: 1px;
  background: color-mix(in srgb, var(--color-ink) 15%, transparent);
}

/* 0:2473 — шапка секции: номер слева, текст колонкой справа, зазор 24 */
.contact-block__head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

/* 0:2475 — текст занимает остаток ряда (699 из 820), иначе подпись
   переносится в три строки и шапка растёт с 72 до 80 */
.contact-block__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.contact-block__num {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 76px;
  color: var(--color-brand);
}

.contact-block__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 24px;
  text-transform: uppercase;
}

.contact-block__note {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--color-muted);
}

.field__input--area { min-height: 160px; padding: var(--space-8) var(--space-8); resize: vertical; line-height: 22px; }

.field__optional {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--fs-micro);
  font-weight: var(--fw-extrabold);
  line-height: 13px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.field__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }

.field__count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 14px;
  color: var(--color-muted);
}

/* 0:2537 / 4:515 — зона вложения: кремовая плашка с рамкой 2px, скрепка
   и две строки текста. Тёмной таблетки-кнопки в макете нет ни на одной
   ширине — она была домыслена и держала плашку на 8px выше. */
.attach {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 80px;
  padding: 20px var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  cursor: pointer;
}

.attach:hover { background: color-mix(in srgb, var(--color-paper) 88%, var(--color-ink)); }

.attach__icon { flex: none; display: flex; width: 20px; height: 20px; }
.attach__icon svg { width: 100%; height: 100%; }

.attach__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 0:2541 — Geist 700 14/18 капсом */
.attach__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-transform: uppercase;
}

/* 0:2542 — 12/16 приглушённым */
.attach__note { font-size: 12px; line-height: 16px; color: var(--color-muted); }

.contact-form__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-9);
  padding-top: 0;
  border-top: 0;
}

.contact-form__legal { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }
/* 0:2545 — кнопка во всю ширину, 57 высотой, Geist 900 16/21 */
.contact-form__foot .btn { width: 100%; height: 57px; font-size: 16px; line-height: 21px; }

/* Боковая колонка контактов */
/* 0:2548 / 4:524 — панель поддержки: одна тёмная карточка, внутри заголовок
   и три группы, разделённые светлыми линиями при 20%. Десктоп: паддинг 32,
   зазор 24, r12. Мобильный (4:524): паддинг 24, зазор тот же. */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  align-self: start;
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-white);
}

/* 0:2549 — Archivo Black 16/17.41, кремовый */
.contact-side__title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--color-paper);
}

/* 0:2550 — линия перед каждой группой, нулевой бокс: рисуем псевдоэлементом,
   иначе граница займёт свой пиксель и панель вырастет на число разделителей */
.support-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Разделитель в макете — отдельный узел нулевой высоты, и он съедает
     ещё один зазор колонки: перед каждой группой не 24, а 48. Без этого
     панель была на 72px ниже макета (три разделителя). */
  margin-top: var(--space-10);
}

.support-group::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-10) * -1);
  height: 1px;
  background: color-mix(in srgb, var(--color-paper) 20%, transparent);
}

/* 0:2552 — Geist 700 11/14 капсом, белым */
.support-group__label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* 0:2553 — 13/18 белым при 80% */
.support-group__text {
  font-size: var(--fs-body-sm);
  line-height: 18px;
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}

.support-group__mail { text-decoration: none; }

/* 25:148 — строка «customer support email» в макете набрана капсом */
.support-group__text--caps { text-transform: uppercase; }
.support-group__mail:hover { color: var(--color-white); }

/* 0:2554 — ссылка Geist 700 14/18 красным */
.support-group__link {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-brand);
}

.support-group__link:hover { color: var(--color-brand-hover); }

/* 0:2567 — на третьей группе ссылка мельче: 12/16 */
.support-group__link--sm { font-size: 12px; line-height: 16px; }

/* 0:2559 — телефонный блок отдельным фреймом с зазором 4 */
.support-group__phone { display: flex; flex-direction: column; gap: var(--space-2); }

.support-group__phone-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* 0:2561 — Archivo Black 28/30.46 красным */
.support-group__phone-num {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 30px;
  color: var(--color-brand);
}

.support-group__phone-num:hover { color: var(--color-brand-hover); }

/* 0:2562 — 11/14 белым при 60% */
.support-group__phone-note {
  font-size: 11px;
  line-height: 14px;
  color: color-mix(in srgb, var(--color-white) 60%, transparent);
}

/* 0:2564 — у третьей группы зазор 10, а не 12 */
.support-group--rg { gap: 10px; }

@media (max-width: 1023px) {
  .contact { grid-template-columns: 1fr; gap: var(--space-12); }
  .routing { height: auto; flex-wrap: wrap; padding-block: var(--space-8); }
}

@media (max-width: 767px) {
  .contact-intro { min-height: 0; }
  .routing { padding: var(--space-8) var(--gutter-mobile); gap: var(--space-6); }
  .routing__list { flex-direction: column; gap: var(--space-6); }
  .contact { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-11); }
  .contact-block__num { font-size: var(--fs-h4); line-height: 44px; }
  /* 4:520 — на мобильном зазор 16, кнопка 52, текст 12/16.8 */
  .contact-form__foot { gap: var(--space-8); }
  .contact-form__foot .btn { height: 52px; font-size: 15px; line-height: 20px; }
  .contact-form__legal { font-size: 12px; line-height: 17px; }
  /* 4:515 — на мобильном вложение остаётся строкой (80 высотой),
     колонкой оно вырастало до 122 и уводило секцию на 42px. */
  .attach { gap: var(--space-6); padding: var(--space-8); }
  .attach__title { font-size: 13px; line-height: 17px; }
  .attach__note { font-size: 11px; line-height: 14px; }
}

/* В макете бокс этой секции 1579, но следующая секция начинается на 80px
   выше её низа — то есть форма заходит под support-полосу. Это ошибка
   дизайнера: воспроизводить наложение нельзя, секция заканчивается там,
   где начинается следующая (1499). */
/* Раньше здесь лежала стопка безусловных правил, которой форму ужимали
   с 1419 до 1339 — чтобы секция уложилась в 1499 и полосы ниже встали на
   место. Правила перебивали компонентные стили и держали textarea на 88px
   вместо 160. Форма собрана по числам макета, а расхождение самого макета
   (секция 1579 при начале следующей полосы через 1499) поглощается нижним
   паддингом секции — см. ниже. */
.contact { min-height: 1499px; }
@media (max-width: 767px) { .contact { min-height: 0; } }

/* 0:2471 — колонка формы: зазор 48, между секциями ещё один такой же
   зазор съедает разделитель нулевой высоты, итого 96 на стык. */
.contact-form { gap: var(--space-13); }
.contact-form .contact-block + .contact-block { margin-top: var(--space-13); }
.contact-block { gap: var(--space-11); }
.contact-block__num { font-size: 72px; line-height: 72px; }

/* ============================================================================
   Deposit limits. Фрейм 0:2655 (1440) и 4:607 (390).
   ========================================================================= */

.dl-intro { min-height: 428px; }

/* Панель лимита (0:2665): 669, слева 792, справа 440, зазор 48 */
.dl-panel {
  display: grid;
  grid-template-columns: minmax(0, 792fr) 440px;
  gap: var(--space-13);
  align-items: start;
  min-height: 669px;
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* На десктопе тело карточки прозрачно: раскладку держит .dl-surface */
.dl-surface__body { display: contents; }

.dl-surface {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.dl-surface__head { display: flex; flex-direction: column; gap: var(--space-4); }

.dl-surface__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.dl-surface__title { font-size: var(--fs-h6); line-height: var(--lh-h6); }

.dl-current { display: flex; flex-direction: column; gap: var(--space-3); }

.dl-current__label {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-extrabold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.dl-current__value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 58px;
}

.dl-current__period {
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.dl-cycle { display: flex; flex-direction: column; gap: var(--space-4); }

.dl-cycle__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-transform: uppercase;
}

.dl-cycle__row--days { font-size: var(--fs-caption); color: var(--color-muted); }

.dl-cycle__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line-soft);
  overflow: hidden;
}

.dl-cycle__fill { display: block; height: 100%; background: var(--color-brand); }

.dl-surface__note { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }

.dl-form { display: flex; flex-direction: column; gap: var(--space-8); }
.dl-form .field-row { grid-template-columns: minmax(0, 1fr) 200px; }
.dl-form .btn { align-self: flex-start; height: 48px; }
.dl-form__legal { font-size: var(--fs-label-xs); line-height: 16px; color: var(--color-muted); }

/* Боковая колонка (0:2690): 509, padding 32, зазор 32 */
.dl-rail {
  display: flex;
  flex-direction: column;
  /* 0:2692 support-rail — тёмная панель со светлым текстом, обводка 2 */
  gap: var(--space-11);
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.dl-rail__card { display: flex; flex-direction: column; gap: var(--space-4); }

.dl-rail__card--alt {
  padding: var(--space-9);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-surface);
}

.dl-rail__title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.dl-rail__text { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }
.dl-rail__card--alt .dl-rail__text { color: var(--color-paper); }

.dl-rail__meta {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-amber);
}

.dl-rail__phone {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 35px;
  color: var(--color-surface);
}

/* Предупреждение (0:2708): 148, padding 40/80, зазор 8 */
.dl-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 148px;
  justify-content: center;
  padding: var(--space-12) var(--gutter);
  /* 0:2708 — красная плашка с кремовым текстом, а не коралловая с тёмным */
  background: var(--color-brand);
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.dl-callout__title { font-size: 36px; line-height: 39px; }
.dl-callout__text { font-size: var(--fs-body-lg); line-height: 21px; }

/* Как это работает (0:2711): 440, зазор 48 */
.dl-how,
.dl-tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.dl-tools { gap: var(--space-12); }

.dl-how__head { display: flex; flex-direction: column; gap: var(--space-4); }

.dl-how__kicker {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-black);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.dl-how__title { font-size: var(--fs-h4); line-height: 44px; }

.dl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-11);
  align-items: start;
}

.dl-step { display: flex; flex-direction: column; gap: var(--space-6); }

.dl-step__num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  color: var(--color-brand);
}

.dl-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.dl-step__text { font-size: var(--fs-body); line-height: 20px; color: var(--color-muted); }

/* Другие инструменты (0:2731): строки по 90 */
.dl-tools__list { display: flex; flex-direction: column; }

.dl-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  height: 90px;
  border-top: 1px solid var(--color-line-soft);
}

.dl-tool:last-child { border-bottom: 1px solid var(--color-line-soft); }
.dl-tool__text { display: flex; flex-direction: column; gap: 4px; }

.dl-tool__title {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.dl-tool__note { font-size: var(--fs-body); line-height: 18px; color: var(--color-muted); }

.dl-tool__link {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  line-height: 21px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

/* Короткий вариант секции RG (0:2757): 264 */
.rg-section--slim { min-height: 264px; gap: var(--space-13); }
.rg-section--slim .rg-section__intro { gap: var(--space-6); }

.rg-section__mark { display: flex; align-items: center; gap: var(--space-6); }

.rg-section__mark-text {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-paper);
}

@media (max-width: 1023px) {
  .dl-panel { grid-template-columns: 1fr; min-height: 0; }
  .dl-steps { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .dl-intro { min-height: 0; }
  .dl-panel { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-10); }
  .dl-surface,
  .dl-rail { padding: var(--space-9); gap: var(--space-9); }
  .dl-current__value { font-size: var(--fs-h4); line-height: 44px; }
  .dl-callout { padding: var(--space-11) var(--gutter-mobile); min-height: 0; }
  .dl-callout__title { font-size: var(--fs-h6); line-height: 30px; }
  .dl-how,
  .dl-tools { padding: var(--space-11) var(--gutter-mobile); gap: var(--space-10); }
  .dl-how__title { font-size: var(--fs-h6); line-height: 30px; }
  .dl-tool { height: auto; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding-block: var(--space-9); }
  .rg-section--slim { min-height: 0; }
}


/* Панель лимита в макете 443: форма компактнее, чем набор полей по умолчанию */
.dl-surface { gap: var(--space-9); }
.dl-surface__title { font-size: var(--fs-title); line-height: var(--lh-title); }
.dl-current__value { font-size: var(--fs-h4); line-height: 44px; }
.dl-form { gap: var(--space-6); }
.dl-form .btn { height: 44px; }

/* Короткая секция RG: метка входит в общий блок, а не идёт отдельно */
.rg-section--slim .rg-section__intro { gap: var(--space-6); }
.rg-section--slim .rg-section__mark { margin-top: var(--space-4); }
.dl-steps { gap: var(--space-12); }


/* Итоговая доводка Deposit limits по числам макета */
.dl-panel { min-height: 669px; }
.dl-surface { gap: var(--space-8); }
.dl-rail { gap: var(--space-9); }
.rg-section--slim { min-height: 264px; }
.rg-section--slim .rg-section__lead { max-width: 96ch; }
.dl-how { min-height: 440px; }

.rg-section--slim .rg-section__intro { gap: var(--space-6); }
.rg-section--slim .rg-section__lead { line-height: 20px; }


/* Панель в макете 443. У нас 497: в макете пояснение про недействующие
   отмены перекрыто формой, а скрывать текст ради пикселей нельзя —
   расхождение объяснено в отчёте. */
.dl-surface { gap: var(--space-7); }
.rg-section--slim .rg-section__lead { font-size: var(--fs-body-sm); line-height: 18px; }

@media (max-width: 767px) { .dl-surface { max-height: none; } }

.rg-section--slim { gap: var(--space-11); }

/* ============================================================================
   About us. Фрейм 0:2851 (1440) и 4:779 (390).
   ========================================================================= */

/* Интро (0:2864): 700, padding 80, зазор 64 */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;
  gap: var(--space-14);
  align-items: center;
  min-height: 700px;
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.about-hero__text { display: flex; flex-direction: column; gap: var(--space-10); }

.about-hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-h1);
  line-height: 68px;
}

.about-hero__title span:nth-child(2) { color: var(--color-brand); }

.about-hero__lead {
  max-width: 60ch;
  font-size: var(--fs-label-lg);
  line-height: 27px;
  color: var(--color-muted);
}

.about-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.about-hero__actions .btn { height: 50px; }

.about-hero__mark {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-medium);
  line-height: 16px;
  color: var(--color-muted);
}

.about-hero__media { position: relative; }

.about-hero__watermark {
  position: absolute;
  top: -60px;
  left: -120px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 240px;
  text-transform: uppercase;
  color: var(--color-flame);
  opacity: .2;
  pointer-events: none;
}

.about-hero__media img {
  position: relative;
  z-index: 1;
  width: 600px;
  height: 560px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* Реквизиты (0:2898): 120, padding 32/80, зазор 16 */
.facts {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 120px;
  padding-inline: var(--gutter);
  background: var(--color-ink);
  color: var(--color-surface);
}

.facts__divider { width: 1px; height: 48px; background: rgba(255, 253, 248, .15); }

.fact { display: flex; flex-direction: column; gap: 4px; padding-inline: var(--space-11); }
.fact:first-of-type { padding-left: 0; }

.fact__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 14px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

/* Наша история (0:2914): 510, padding 96, зазор 40 */
.story {
  display: grid;
  grid-template-columns: 420px minmax(0, 788fr);
  gap: var(--space-12);
  align-items: start;
  min-height: 510px;
  padding: 96px var(--gutter);
  /* 0:2914 our-story — в макете бежевая, не белая */
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.story__left { display: flex; flex-direction: column; gap: var(--space-8); }

.story__num {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 87px;
  color: var(--color-brand);
}

.story__kicker {
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  line-height: 18px;
  text-transform: uppercase;
}

.story__right { display: flex; flex-direction: column; gap: var(--space-11); }
.story__title { font-size: var(--fs-h4); line-height: 48px; }

.story__lead {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 33px;
}

.story__text { font-size: var(--fs-body-lg); line-height: 26px; color: var(--color-muted); }

/* Принципы (0:2925): 537, padding 96, зазор 56 */
.principles {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-height: 537px;
  padding: 96px var(--gutter);
  /* 0:2925 brand-principles — в макете белая */
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.principles__head { display: flex; flex-direction: column; gap: var(--space-6); }

.principles__kicker {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-black);
  line-height: 17px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

/* 0:2928 — Archivo Black 40/43.52, бокс 44: строка 48 давала +4px секции */
.principles__title { font-size: var(--fs-h4); line-height: 44px; }

.principles__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-11);
  align-items: start;
}

/* 0:2930 — это карточка 394×216: бежевая, обводка 2px, радиус 12,
   паддинг 32, зазор 24 между номером и текстовой группой */
.principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-11);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.principle__body { display: flex; flex-direction: column; gap: 10px; }

.principle__num {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 35px;
  color: var(--color-brand);
}

.principle__title {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.principle__text { font-size: var(--fs-body); line-height: 21px; color: var(--color-muted); }

/* Что предлагаем (0:2945): 1367, padding 96, зазор 64 */
.offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  min-height: 1367px;
  padding: 96px var(--gutter);
  /* 0:2945 what-we-offer — в макете бежевая */
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.offer__head { display: flex; flex-direction: column; gap: var(--space-6); }

.offer__kicker {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-black);
  line-height: 17px;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.offer__title { font-size: var(--fs-h4); line-height: 48px; }
.offer__lead { font-size: var(--fs-body-lg); line-height: 24px; color: var(--color-muted); }

.offer__blocks { display: flex; flex-direction: column; gap: var(--space-12); }

/* 0:2951 — ряд без собственной рамки и заливки: текст 568, картинка 640,
   зазор 40. Обводка есть только у самой картинки (0:2959, 2px, радиус 12),
   а ряды разделены линией 1px при прозрачности 0.15 (0:2961). */
.offer-row {
  display: grid;
  grid-template-columns: minmax(0, 568px) 640px;
  gap: var(--space-12);
  align-items: center;
  padding: 0;
}

/* Разделитель — граница самого ряда, а не элемент сетки: псевдоэлемент
   в grid становится ячейкой и добавляет целый ряд (замер: +740px). */
.offer-row + .offer-row {
  padding-top: var(--space-12);
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
}

.offer-row__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

/* 0:2962 — во втором ряду картинка слева, текст справа с отступом 24 */
.offer-row:nth-of-type(2) .offer-row__media { order: -1; }
.offer-row:nth-of-type(2) .offer-row__text { padding-left: var(--space-10); }

.offer-row--wide { grid-template-columns: minmax(0, 1fr) 420px; }

.offer-row__text { display: flex; flex-direction: column; gap: var(--space-6); }

.offer-row__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 58px;
  color: var(--color-brand);
}

.offer-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  text-transform: uppercase;
}

.offer-row__lead { font-size: var(--fs-body-lg); line-height: 24px; color: var(--color-muted); }

.offer-row__media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.offer-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-surface);
}

.offer-note__title {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.offer-note__text { font-size: var(--fs-body); line-height: 20px; color: var(--color-paper); }

@media (max-width: 1023px) {
  /* minmax(0,1fr), а не 1fr: «1fr» это minmax(auto,1fr), и min-content колонки
     держал её шире экрана — на 320 текст героя вставал 319px при доступных 280
     и срезался у .about-hero с overflow:hidden. */
  .about-hero,
  .story,
  .offer-row,
  .offer-row--wide { grid-template-columns: minmax(0, 1fr); }
  .about-hero__media img { width: 100%; }
  .principles__row { grid-template-columns: 1fr; }
  .facts { height: auto; flex-wrap: wrap; padding-block: var(--space-9); }
  .facts__divider { display: none; }
  .fact { padding-inline: 0; }
}

@media (max-width: 767px) {
  .about-hero { min-height: 0; gap: var(--space-10); padding: var(--space-11) var(--gutter-mobile); }
  .about-hero__title { font-size: var(--fs-h4); line-height: 44px; }
  .about-hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .about-hero__actions { flex-direction: column; align-items: stretch; }
  .about-hero__media img { height: 260px; }
  .about-hero__watermark { font-size: 96px; line-height: 104px; left: -20px; top: -30px; }

  .facts { padding: var(--space-9) var(--gutter-mobile); gap: var(--space-8); }
  .story,
  .principles,
  .offer { min-height: 0; gap: var(--space-11); padding: var(--space-11) var(--gutter-mobile); }
  .story__title,
  .principles__title,
  .offer__title { font-size: var(--fs-h6); line-height: 30px; }
  .story__lead { font-size: var(--fs-label-lg); line-height: 26px; }
  .story__num { font-size: var(--fs-h4); line-height: 44px; }
  .offer-row { padding: var(--space-9); gap: var(--space-9); }
  .offer-row__num { font-size: var(--fs-h5); line-height: 36px; }
  .offer-row__media img { height: 200px; }
}


/* Доводка About us: интро 700, история 510, блок предложений 1367 */
.about-hero { min-height: 700px; }
.about-hero__text { gap: var(--space-9); }
.story { min-height: 510px; }
.story__right { gap: var(--space-10); }
.offer { min-height: 1367px; }
.offer__blocks { gap: var(--space-12); }
/* паддинг ряда убран вместе с карточным видом: в макете (0:2951) его нет */


.about-hero__text { gap: var(--space-8); }
.about-hero__title { line-height: 64px; }
.offer-row__lead { line-height: 22px; }

/* Интро About us в макете 700 (hero-container внутри editorial-hero) */
.about-hero { min-height: 0; height: 700px; }
@media (max-width: 767px) { .about-hero { height: auto; } }

/* ============================================================================
   BetStop. Фрейм 0:3043 (1440) и 4:937 (390).
   Боковой отступ здесь 120, а не 80 как на остальных страницах.
   ========================================================================= */

.bs-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  min-height: 582px;
  /* 0:3070 — паддинг 80/120/64/120: снизу 64, а не 80 */
  padding: var(--space-15) 120px 64px;
  /* бежевая секция с тёмным текстом, а не тёмная со светлым */
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

/* 0:3071 — плашка тёмная с кремовым текстом, высота 26 при паддинге 6/14 */
.bs-hero__kicker .kicker-pill {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 6px 14px;
}

.bs-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-13);
  align-items: center;
}

/* 0:3074 — колонка 680: подзаголовок в макете переносится на две строки */
.bs-hero__text { display: flex; flex-direction: column; gap: var(--space-10); max-width: 680px; }

.bs-hero__title {
  display: flex;
  gap: var(--space-8);
  font-size: 120px;
  line-height: 100px;
}

.bs-hero__title-accent { color: var(--color-brand); }

.bs-hero__sub {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 30px;
  text-transform: uppercase;
}

/* На бежевом лид идёт приглушённым #5e5552, а не светлым */
.bs-hero__lead {
  max-width: 80ch;
  font-size: var(--fs-label-lg);
  line-height: 28px;
  /* 0:3079 — приглушённый #5e5552 на бежевом. Кремовый остался с той поры,
     когда секция была тёмной, и после смены фона абзац стал невидим. */
  color: var(--color-muted);
}

/* 0:3080 hero-graphic-circle — круг 380×380, красный, обводка 8px тёмным.
   Внутри «STOP» белым 88, а «EXCLUDE» (0:3082) лежит за ним при opacity .15. */
.bs-hero__stamp {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 380px;
  height: 380px;
  margin: 0;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: inset 0 0 0 8px var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-surface);
  overflow: hidden;
}

.bs-hero__stamp-top {
  grid-area: 1 / 1;
  z-index: 1;
  font-size: 88px;
  line-height: 96px;
}

.bs-hero__stamp-bottom {
  grid-area: 1 / 1;
  font-size: 54px;
  line-height: 59px;
  opacity: .15;
}

/* Основное действие (0:3083): 168, padding 48/120, зазор 24 */
.bs-action {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 168px;
  padding: var(--space-13) 120px;
  /* 0:3083 — в макете бежевая, коралловой здесь нет */
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.bs-action .btn { flex: none; height: 56px; }
.bs-action__note { display: flex; flex-direction: column; gap: 4px; }

.bs-action__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  line-height: 18px;
  text-transform: uppercase;
}

.bs-action__text { font-size: var(--fs-body-sm); line-height: 18px; }

/* Три факта (0:3090): 152, padding 40/120, зазор 48 */
.bs-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-13);
  min-height: 152px;
  align-items: center;
  padding: var(--space-12) 120px;
  /* 0:3090 — тёмная полоса, текст кремовый #f4e2cf */
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.bs-fact { display: flex; flex-direction: column; gap: var(--space-4); }

.bs-fact__title {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  text-transform: uppercase;
}

.bs-fact__text { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-paper); }

/* Как это работает (0:3100): 1285, padding 100/120, зазор 80 */
.bs-how {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  min-height: 1285px;
  padding: 100px 120px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.bs-how__head { display: flex; flex-direction: column; gap: var(--space-8); }

.bs-how__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.bs-how__title { font-size: 48px; line-height: 52px; }

.bs-rule { height: 0; border: 0; box-shadow: 0 0 0 .5px var(--color-line-soft); }

.bs-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-14); }

.bs-step__num {
  font-family: var(--font-display);
  font-size: 110px;
  line-height: 120px;
  color: var(--color-brand);
}

.bs-step__text { display: flex; flex-direction: column; gap: var(--space-8); }

.bs-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  text-transform: uppercase;
}

.bs-step__lead { font-size: var(--fs-body-lg); line-height: 26px; color: var(--color-muted); }

.bs-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.bs-diagram__label {
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-extrabold);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.bs-diagram__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

.bs-diagram__node {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 17px;
  text-transform: uppercase;
}

.bs-diagram__node--core { background: var(--color-ink); color: var(--color-surface); }
.bs-diagram__line { color: var(--color-muted); }

/* Переход (0:3136): 434, padding 120, зазор 24 */
.bs-transition {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-10);
  min-height: 434px;
  padding: 120px;
  /* 0:3136 — тёмная секция, а не красная */
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.bs-transition__title { max-width: 980px; font-size: var(--fs-h2); line-height: 62px; }
.bs-transition__text { max-width: 720px; font-size: var(--fs-label-lg); line-height: 28px; }

/* Последствия (0:3139): строки по 152, padding 40 сверху, зазор 40 */
.bs-effects {
  display: flex;
  flex-direction: column;
  min-height: 778px;
  padding-inline: 120px;
  /* 0:3139 — белая секция */
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.bs-effect {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
  min-height: 152px;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-line-soft);
}

.bs-effect:first-child { border-top: 0; }

.bs-effect__num {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 35px;
  color: var(--color-brand);
}

.bs-effect__body { display: flex; flex-direction: column; gap: var(--space-6); }

.bs-effect__head { display: flex; align-items: center; gap: var(--space-8); }

.bs-effect__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  text-transform: uppercase;
}

.bs-effect__text { font-size: 15px; line-height: 23px; color: var(--color-muted); }

@media (max-width: 1023px) {
  .bs-hero,
  .bs-action,
  .bs-facts,
  .bs-how,
  .bs-transition,
  .bs-effects { padding-inline: 40px; }
  .bs-hero__body { grid-template-columns: 1fr; }
  .bs-facts { grid-template-columns: 1fr; min-height: 0; }
  .bs-step { grid-template-columns: 1fr; gap: var(--space-9); }
  .bs-effect { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 767px) {
  .bs-hero,
  .bs-action,
  .bs-facts,
  .bs-how,
  .bs-transition,
  .bs-effects { min-height: 0; padding: var(--space-11) var(--gutter-mobile); }

  .bs-hero__title { font-size: 64px; line-height: 60px; }
  .bs-hero__sub { font-size: var(--fs-label-lg); line-height: 24px; }
  .bs-hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .bs-hero__stamp { align-items: flex-start; }
  .bs-hero__stamp-top { font-size: 56px; line-height: 60px; }
  .bs-hero__stamp-bottom { font-size: 32px; line-height: 36px; }

  .bs-action { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .bs-how { gap: var(--space-11); }
  .bs-how__title { font-size: var(--fs-h6); line-height: 30px; }
  .bs-step__num { font-size: var(--fs-h4); line-height: 44px; }
  .bs-transition__title { font-size: var(--fs-h5); line-height: 38px; }
  .bs-effect { min-height: 0; padding-top: var(--space-9); }
}

.bs-transition { height: 434px; min-height: 0; }
.bs-facts { height: 152px; min-height: 0; }
@media (max-width: 767px) { .bs-transition, .bs-facts { height: auto; } }


/* В макете между секциями BetStop оставлены зазоры: 4px перед блоком фактов
   и 82px перед переходом. Переносим их, иначе всё ниже уезжает вверх. */
.bs-facts { margin-top: 4px; }
.bs-transition { margin-top: 82px; }

@media (max-width: 767px) {
  .bs-facts { margin-top: 0; }
  .bs-transition { margin-top: 0; }
}

/* Перед нижними полосами в макете BetStop ещё 30px зазора */
.bs-effects { margin-bottom: 30px; }
@media (max-width: 767px) { .bs-effects { margin-bottom: 0; } }

/* ============================================================================
   Текстовые (legal) страницы. Четыре штуки, и в макете они разные:
   у героя разные паддинги, у одних есть полоса быстрых ссылок и блок
   «коротко о главном», у других нет. Профиль задаётся классом.

   Межстрочные заданы в px по числам макета: на страницах в 8–13 тысяч
   пикселей дробная высота строки набегает сотнями.
   ========================================================================= */

.legal-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-15) var(--gutter);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  overflow: hidden;
}

/* Профили героя: паддинг у каждой страницы свой */
.legal-hero--terms { padding-block: 60px; min-height: 340px; }
/* 0:3232 — свой профиль: заголовок 72/68.4, зазор строк 12, блок текста
   отбит от заголовка на 40, внутри лида зазор 24 */
.legal-hero--rg { padding-block: 120px; min-height: 660px; gap: var(--space-12); }
.legal-hero--rg .legal-hero__title { font-size: 72px; line-height: 68px; }
.legal-hero--rg .legal-hero__title-accent { margin-top: 12px; }
.legal-hero--rg .legal-hero__group { gap: var(--space-10); }
.legal-hero--rg .legal-hero__lead { max-width: 760px; font-size: 18px; line-height: 29px; }

/* 0:3233 — знак контурный, красным, при прозрачности 0.08, в две строки */
.legal-hero--rg .legal-hero__watermark {
  top: 40px;
  right: 80px;
  width: 800px;
  font-size: 180px;
  line-height: 196px;
  color: transparent;
  -webkit-text-stroke: 3px var(--color-brand);
  opacity: .08;
}
.legal-hero--cookie { padding-block: 110px; min-height: 396px; }
.legal-hero--privacy { padding-block: 96px; min-height: 352px; }

.legal-hero__watermark {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 239px;
  text-transform: uppercase;
  color: var(--color-flame);
  opacity: .18;
  pointer-events: none;
}

.legal-hero__capsule,
.legal-hero__group { position: relative; z-index: 1; }

.legal-hero__group { display: flex; flex-direction: column; gap: var(--space-4); }

.legal-hero__title { font-size: var(--fs-h2); line-height: 58px; }

/* 0:3240 — вторая строка красная и с новой строки */
.legal-hero__title-accent { display: block; color: var(--color-brand); }

/* 0:3242 — кикер между заголовком и лидом: Archivo Narrow 22/29.63 */
.legal-hero__subkicker {
  font-family: var(--font-narrow);
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 30px;
  text-transform: uppercase;
}

.legal-hero__lead {
  max-width: 80ch;
  font-size: var(--fs-label-lg);
  line-height: 27px;
  color: var(--color-muted);
}

/* Полоса реквизитов документа */
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  min-height: 50px;
  padding: var(--space-8) var(--gutter);
  /* 0:3724 / 0:4455 / 0:4160 — белая полоса с тёмным текстом */
  background: var(--color-surface);
  color: var(--color-ink);
}

.legal-meta__item { display: flex; align-items: baseline; gap: var(--space-4); }

.legal-meta__label {
  font-family: var(--font-narrow);
  font-size: var(--fs-kicker-sm);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-amber);
}

.legal-meta__value {
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-bold);
  line-height: 18px;
}

/* Полоса быстрых ссылок (есть только на RG) */
.legal-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-11);
  min-height: 66px;
  padding: var(--space-10) var(--gutter);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.legal-quick__link {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-transform: uppercase;
}

.legal-quick__link:hover { color: var(--color-brand-text); }

/* Блок «коротко о главном» (есть только на Privacy) */
.legal-glance {
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  padding: var(--space-14) var(--gutter);
  /* 0:4460 / 13:35 — белая секция */
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.legal-glance__title { font-size: var(--fs-h5); line-height: 35px; }

.legal-glance__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-9);
}

/* 0:4463 — карточка 302×169: бежевая заливка, обводка 1.5, паддинг 24,
   зазор 16 между заголовком и текстом */
.legal-glance__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

/* 0:4464 и 0:4470 — первый и третий заголовки красные */
.legal-glance__card:nth-child(odd) .legal-glance__card-title { color: var(--color-brand); }

.legal-glance__card-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.legal-glance__card-text { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }

/* Рабочая область: липкое оглавление 280 и текст 1160 */
.legal-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  background: var(--color-surface);
}

.legal-toc {
  position: sticky;
  top: calc(var(--h-header) + var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-13) var(--space-12);
  box-shadow: inset -1px 0 0 var(--color-line-soft);
}

.legal-toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
}

.legal-toc__search {
  height: 36px;
  padding-inline: var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  font-size: var(--fs-label-xs);
  line-height: 36px;
}

.legal-toc__list { display: flex; flex-direction: column; gap: var(--space-6); }

.legal-toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 17px;
}

.legal-toc__link:hover { color: var(--color-brand-text); }

.legal-toc__num {
  flex: none;
  font-size: var(--fs-label-xs);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
}

.legal-toc__link[hidden] { display: none; }

/* Текст документа */
.legal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  padding: var(--space-13) var(--space-14);
}

/* Базовый зазор; ниже по файлу он переопределяется на 24 по числам макета */
.legal-section { display: flex; flex-direction: column; gap: var(--space-8); }

/* Главы-плашки: padding 40, радиус 8 (0:3404, 0:3444, 0:3484) */
.legal-section--card {
  padding: var(--space-12);
  border-radius: var(--radius-lg);
}

.legal-section--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

.legal-section--ink .legal-section__num { color: var(--color-flame); }

.legal-section--paper {
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.legal-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--fs-h6);
  line-height: 30px;
}

.legal-section__num {
  font-family: var(--font-mono);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
  color: var(--color-brand);
}

/* 16 × 1.625 = 26 — межстрочный в px, чтобы на длинной странице
   не набежали сотни пикселей */
.legal-p {
  max-width: 80ch;
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: var(--color-muted);
}

.legal-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: 80ch; }

.legal-list li {
  position: relative;
  padding-left: var(--space-9);
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: var(--color-muted);
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 2px;
  background: var(--color-brand);
}

.legal-updated {
  font-size: var(--fs-body-sm);
  line-height: 18px;
  color: var(--color-muted);
}

@media (max-width: 1023px) {
  /* minmax(0,1fr), а не 1fr: «1fr» это minmax(auto,1fr), и min-content колонки
     распирал её до 333.5px при экране 320 — единственный горизонтальный скролл
     на сайте. Замер: scrollWidth 334/320 на cookie-policy. */
  .legal-workspace { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; box-shadow: inset 0 -1px 0 var(--color-line-soft); }
  .legal-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .legal-hero,
  .legal-hero--terms,
  .legal-hero--rg,
  .legal-hero--cookie,
  .legal-hero--privacy {
    min-height: 0;
    gap: var(--space-8);
    padding: var(--space-11) var(--gutter-mobile);
  }

  .legal-hero__watermark { font-size: 96px; line-height: 104px; right: 0; }
  .legal-hero__title { font-size: var(--fs-h5); line-height: 38px; }
  .legal-hero__lead { font-size: var(--fs-body); line-height: 21px; }

  .legal-meta { gap: var(--space-6); padding: var(--space-8) var(--gutter-mobile); }
  .legal-quick { gap: var(--space-8); padding: var(--space-9) var(--gutter-mobile); }
  .legal-glance { padding: var(--space-11) var(--gutter-mobile); }
  .legal-glance__grid { grid-template-columns: 1fr; }

  .legal-toc { padding: var(--space-10) var(--gutter-mobile); }
  .legal-body { gap: var(--space-11); padding: var(--space-11) var(--gutter-mobile); }
  .legal-section__title { font-size: var(--fs-title); line-height: var(--lh-title); }
  .legal-p,
  .legal-list li { font-size: var(--fs-body); line-height: 22px; }
}


/* Зазор между разделами в макете 64, ширина текстовой колонки — вся
   доступная (1032), а не ограниченная по символам. */
.legal-body { gap: var(--space-14); }
.legal-p,
.legal-list { max-width: none; }
.legal-section { gap: var(--space-8); }


/* Раздел документа по числам макета: номер 32/35, заголовок 24/26,
   абзацы 16/26 с зазором 14, между заголовком и текстом 24. */
.legal-section { gap: var(--space-10); }
.legal-section__title { font-size: var(--fs-title); line-height: 26px; align-items: center; }
.legal-section__num { font-size: 32px; line-height: 35px; }
/* Абзацы внутри раздела: зазор 14 при общем зазоре раздела 24 */
.legal-section .legal-p + .legal-p { margin-top: -10px; }
.legal-section { gap: var(--space-10); }
.legal-body { gap: 64px; }


/* Зазор между разделами у каждой текстовой страницы свой:
   terms 64, cookie 56, rg 80, privacy — свои разделители внутри. */
.legal-terms .legal-body { gap: 64px; }
.legal-cookie .legal-body { gap: 56px; }
.legal-rg .legal-body { gap: 80px; }
.legal-privacy .legal-body { gap: var(--space-13); }


/* ── Правки по итогам прогона 360 / 768 / 1024 / 1440 ─────────────────── */

/* Водяной знак About us вылезал за правый край: секция не обрезала фон */
.about-hero { overflow: hidden; }

/* На 360 заголовок BetStop 120px не помещался в строку */
@media (max-width: 389px) {
  .bs-hero__title { flex-direction: column; gap: 0; font-size: 56px; line-height: 54px; }
  .bs-hero__stamp-top { font-size: 44px; line-height: 48px; }
  .legal-hero__title { font-size: var(--fs-h6); line-height: 32px; }
  .sd-hero__title { font-size: var(--fs-h6); line-height: 32px; }
}

/* Бургер и мобильное меню работают до 1150 */
@media (max-width: 1149px) {
  .site-header__actions { gap: var(--space-6); }
}


/* Промежуточные ширины: водяные знаки и крупные числа не должны распирать
   документ. Эталона на 768/1024 нет, задача — чтобы не ломалось. */
@media (max-width: 1149px) {
  .page-intro,
  .hero,
  .hero__poster { overflow: hidden; }

  .ticker { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .ticker::-webkit-scrollbar { display: none; }
  .ticker__item { flex: none; }

  .betting__list,
  .board__head { min-width: 0; }

  .hiw-step__num { font-size: var(--fs-h3); line-height: 46px; }
  .hiw-step__text { min-width: 0; }
}


/* На планшете (768–1023) секции с двумя колонками схлопываются в одну:
   постер героя 640 и купон 360 не помещаются рядом с текстом.
   Диапазон закрыт снизу: иначе эти правила перебивают мобильные,
   и купон с боковыми отступами становится шире экрана. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { flex-direction: column; height: auto; }
  .hero__poster { width: 100%; height: 420px; }
  .hero__image { left: 50%; translate: -50% 0; }

  .betting { flex-direction: column; }
  .betting__list { width: 100%; }
  .slip { position: static; width: 100%; }

  .hiw-step { grid-template-columns: 1fr; }
  .hiw-step__num { font-size: var(--fs-h3); line-height: 46px; }

  .page-intro__watermark,
  .hero__watermark { max-width: 100%; overflow: hidden; }

  .board,
  .markets { min-width: 0; }
}


/* Прокручиваемые ленты не должны распирать документ: контейнеру нужен
   явный предел ширины, иначе он растягивается содержимым. */
.ticker,
.sports-nav__row,
.betting__head .tabs,
.racing__grid,
.ntj__rail,
.race-detail__races-list {
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hiw-step__head { min-width: 0; }
  .hiw-step__num { font-size: var(--fs-h4); line-height: 44px; }
  .hiw-step__title { font-size: var(--fs-h6); line-height: 32px; }
}


/* На 768 текстовая колонка шага не сжималась: сетке нужен явный minmax(0) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hiw-step { grid-template-columns: minmax(0, 1fr); }
  .hiw-step__text,
  .hiw-step__head,
  .hiw-step__demo { min-width: 0; }
  .hiw-step__title { overflow-wrap: anywhere; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Showdown @390 — самостоятельный мобильный фрейм (0:7115), а не сжатый
   десктоп: отступ секций 20, кошельки вынесены между текстом и карточкой
   статуса (visual-split 0:7148), заголовок собран из трёх строк с зазором 4.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sd-hero { gap: var(--space-10); padding: var(--space-9); }

  /* Кошельки поднимаются на уровень секции, карточка статуса становится
     самостоятельным блоком — порядок задаёт сама разметка. */
  .sd-status { display: contents; }

  .sd-hero__text { gap: var(--space-8); }
  .sd-hero__group { display: contents; }

  /* 0:7141 — блок 108: 36 + 4 + 36 + 4 + 28. Зазор внутри заголовка
     добирается межстрочным, между заголовком и подзаголовком — отрицательным
     отступом, потому что зазор секции здесь 16. */
  .sd-hero__title { font-size: 32px; line-height: 38px; }
  .sd-hero__sub { font-size: 24px; line-height: 28px; margin-top: -12px; }
  .sd-hero__lead { font-size: 15px; line-height: 22px; }
  .sd-hero__warning {
    min-height: 64px;
    padding: 14px;
    font-size: 13px;
    line-height: 18px;
  }

  .sd-status__wallets { gap: var(--space-6); }
  .sd-wallet { min-height: 84px; gap: 6px; padding: var(--space-9); }
  .sd-wallet__name { font-size: 16px; line-height: 20px; }
  .sd-wallet__note { font-size: 13px; line-height: 18px; }

  /* Карточка статуса (0:7155): 327 = 24 + 21 + 20 + 82 + 20 + 46 + 20 + 30 + 24,
     плюс две линии нулевой высоты. */
  .sd-status__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    padding: var(--space-10);
    /* Обводка в макете того же цвета, что фон: рисуется тенью, чтобы
       не прибавить 4px к габариту карточки. */
    box-shadow: inset 0 0 0 2px var(--color-ink);
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    color: var(--color-surface);
  }
  /* Линии в макете — LINE нулевой высоты: рисуются псевдоэлементом,
     чтобы не добавить к габариту карточки по пикселю на каждую. */
  .sd-status__rule {
    display: block;
    height: 1px;
    margin: 0 0 -1px;
    border: 0;
    background: color-mix(in srgb, var(--color-surface) 15%, transparent);
  }

  .sd-status__head { min-height: 21px; }
  .sd-status__title { font-size: 16px; line-height: 20px; }
  .sd-status__cta-title { font-size: 16px; line-height: 20px; }
  .sd-status__text { margin-top: -12px; font-size: 13px; line-height: 18px; }
  .sd-status__card .btn { min-height: 46px; height: 46px; }
  .sd-status__legal { font-size: 10px; line-height: 13px; }
  .sd-status__legal--strong { margin-top: -16px; }
}

@media (max-width: 767px) {
  /* Утверждение (0:7219): три строки 24/28 с зазором 4, вторая и третья
     переносятся на две строки — блок 148, а не 232. */
  .sd-statement { gap: var(--space-8); padding: var(--space-9); }
  .sd-statement__lines { gap: 4px; }
  .sd-statement__lines span { font-size: 24px; line-height: 28px; }
  .sd-statement__note { font-size: 13px; line-height: 18px; }

  /* Шаги (0:7225): шапка 78 = кикер 14 + 8 + заголовок 56 */
  .sd-steps { gap: var(--space-10); padding: var(--space-9); }
  .sd-steps__head { gap: var(--space-4); }
  .sd-steps__kicker { font-size: 11px; line-height: 14px; }
  .sd-steps__title { font-size: 24px; line-height: 28px; }
  .sd-steps__list { gap: var(--space-8); }
}

@media (max-width: 767px) {
  /* Карточка шага (0:7230): 20 + 28 + 16 + [40 + 8 + 54] + 16 + 38 + 20.
     Заголовок и описание в макете — отдельная группа с зазором 8. */
  .sd-step { gap: var(--space-8); padding: var(--space-9); }
  .sd-step__num { font-size: 24px; line-height: 28px; }
  .sd-step__title { font-size: 16px; line-height: 20px; }
  .sd-step__text { margin-top: -8px; font-size: 13px; line-height: 18px; }
  .sd-step__link {
    height: 38px;
    min-height: 38px;
    margin-top: 0;
    padding: 10px var(--space-8);
    font-size: 13px;
    line-height: 18px;
  }
}

@media (max-width: 767px) {
  /* Первая карточка (0:7230) с кнопкой — 240, вторая и третья (0:7237,
     0:7244) с бейджем вместо кнопки — 185. */
  .sd-steps__list .sd-step { min-height: 185px; }
  .sd-steps__list li:first-child .sd-step,
  .sd-steps__list .sd-step:first-child { min-height: 240px; }
  .sd-step__tag {
    min-height: 21px;
    padding: 4px var(--space-4);
    font-size: 10px;
    line-height: 13px;
  }
}

@media (max-width: 767px) {
  /* Сравнение (0:7251): шапка 50, две колонки по 194 с зазором 32 */
  .sd-compare { gap: var(--space-11); padding: var(--space-10); }
  .sd-compare__head { gap: var(--space-4); }
  .sd-compare__kicker { font-size: 11px; line-height: 14px; }
  .sd-compare__title { font-size: 24px; line-height: 28px; }
  .sd-compare__grid { gap: var(--space-11); }

  /* Повторный призыв (0:7291): 32 + [56 + 8 + 54] + 24 + [46 + 12 + 46] + 32 */
  .sd-cta { gap: var(--space-10); padding: var(--space-11); }
  .sd-cta__title { font-size: 24px; line-height: 28px; }
  .sd-cta__text { margin-top: -16px; font-size: 13px; line-height: 18px; }
  .sd-cta__actions { gap: var(--space-6); }
  .sd-cta__actions .btn { height: 46px; min-height: 46px; }
}

@media (max-width: 767px) {
  /* Колонка сравнения (0:7255): 20 + 16 + список 158 (пять строк по 22, зазор 12) */
  .sd-compare__name { font-size: 16px; line-height: 20px; }
  .sd-compare__col { gap: var(--space-8); }
  .sd-checks { gap: var(--space-6); }
  .sd-checks li { min-height: 22px; gap: 10px; }

  /* Призыв (0:7291): заголовок в макете набран в две строки */
  .sd-cta__title { min-height: 56px; }
  .sd-cta__text { min-height: 54px; }
}

@media (max-width: 767px) {
  /* Разделение аккаунтов (0:7170): шапка 122, карточка 266, знак 92,
     карточка 238. В мобильном фрейме у карточек нет тега-приписки,
     зато есть разделительная линия под заголовком. */
  .sd-split { gap: var(--space-10); padding: var(--space-9); }
  .sd-split__head { gap: var(--space-4); }
  .sd-split__kicker { font-size: 11px; line-height: 14px; }
  .sd-split__title { font-size: 24px; line-height: 28px; }
  .sd-split__lead { font-size: 13px; line-height: 18px; }

  .sd-split__grid { gap: var(--space-10); }
  .sd-col { gap: var(--space-9); padding: var(--space-10); }
  .sd-col__tag { display: none; }
  .sd-col__title { font-size: 16px; line-height: 20px; }
  .sd-col__list { gap: 10px; }
  .sd-col__list li { min-height: 18px; }
  /* Линия макета имеет нулевую высоту — рисуем её псевдоэлементом,
     чтобы список не сместился на пиксель. */
  .sd-col__list { position: relative; }
  .sd-col__list::before {
    content: "";
    position: absolute;
    inset: -20px 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  }
  .sd-col--alt .sd-col__list::before {
    background: color-mix(in srgb, var(--color-ink) 20%, transparent);
  }

  .sd-split__divider { gap: var(--space-4); padding: var(--space-8); }
  .sd-split__sign { font-size: 32px; line-height: 36px; }
  .sd-split__note { font-size: 13px; line-height: 16px; }
  .sd-split__note br { display: none; }
}

@media (max-width: 767px) {
  /* Линия в макете — отдельный элемент колонки, поэтому съедает ещё
     один зазор 20 между заголовком и списком. */
  .sd-col__list { margin-top: var(--space-9); }
  .sd-col__list::before { inset: -40px 0 auto 0; }
}

@media (max-width: 767px) {
  /* Знак «≠» (0:7197): 92 = 16 + 36 + 8 + 16 + 16, фон тёмный,
     подпись в одну строку. */
  .sd-split__divider {
    min-height: 92px;
    background: var(--color-ink);
    color: var(--color-surface);
  }
  .sd-split__sign { min-height: 36px; color: var(--color-brand); }
  .sd-split__note { min-height: 16px; color: inherit; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Профиль сквозных блоков для Showdown @390 (фрейм 0:7115). Дизайнер
   набрал полосы на этой странице плотнее, чем на главной: отступ 20 вместо
   16/24, другой набор строк. Профиль включается классом страницы на <body>.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Помощь (0:7322): 20 + [20 + 6 + 18 + 6 + 18] + 16 + 44 + 20 = 168 */
  .page-showdown .support-strip { padding: var(--space-9); }
  .page-showdown .support-strip__inner { gap: var(--space-8); }
  .page-showdown .support-strip__lead { gap: 6px; font-size: 13px; line-height: 18px; }
  .page-showdown .support-strip__phone { height: 44px; min-height: 44px; }

  /* BetStop (0:7332): 20 + [20 + 6 + 18 + 6 + 36] + 12 + 18 + 20 = 156 */
  .page-showdown .betstop-strip { padding: var(--space-9); }
  .page-showdown .betstop-strip__inner { gap: var(--space-6); }
  .page-showdown .betstop-strip__lead { gap: 6px; font-size: 13px; line-height: 18px; }
  .page-showdown .betstop-strip__cta { min-height: 18px; font-size: 13px; line-height: 18px; }

  /* Платежи (0:7339): 20 + 15 + 12 + 36 + 20 = 103 */
  .page-showdown .payments-strip { padding: var(--space-9); }
  .page-showdown .payments-strip__inner { gap: var(--space-6); }
  .page-showdown .payments-strip__lead { min-height: 15px; font-size: 11px; line-height: 14px; }
  .page-showdown .payments-strip__note { min-height: 36px; font-size: 11px; line-height: 18px; }

  /* Подвал (0:7347): нижний отступ 60, реквизиты 54 + 8 + 18 */
  .page-showdown .site-footer { padding-bottom: 60px; }
  .page-showdown .site-footer__legal { gap: var(--space-4); }
  .page-showdown .site-footer__legal p { font-size: 10px; line-height: 18px; }

  /* Ответственная игра (0:7300): 20 + 127 + 24 + 516 + 20 = 707 */
  .page-showdown .rg-section { gap: var(--space-10); padding: var(--space-9); }
  .page-showdown .rg-section__intro { gap: 10px; }
  .page-showdown .rg-section__kicker { font-size: 10px; line-height: 13px; }
  .page-showdown .rg-section__title { font-size: 16px; line-height: 20px; }
  .page-showdown .rg-section__lead { font-size: 13px; line-height: 18px; }
  .page-showdown .rg-section__grid { gap: var(--space-6); }
  .page-showdown .rg-card { min-height: 120px; gap: var(--space-6); padding: var(--space-9); }
}

@media (max-width: 767px) {
  /* Высоты полос на главной заданы жёстко (фрейм 0:5784); у Showdown
     свой фрейм со своими числами. */
  .page-showdown .support-strip { height: 168px; }
  .page-showdown .betstop-strip { height: 156px; }
  .page-showdown .payments-strip { height: 103px; }
  /* Бейдж и заголовок помощи в этом фрейме стоят в одну строку (0:7324) */
  .page-showdown .support-strip__lead { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); }
  .page-showdown .support-strip__lead .badge { grid-row: 1; }
  .page-showdown .support-strip__title { grid-row: 1; align-self: center; }
  .page-showdown .support-strip__service { grid-column: 1 / -1; }
  .page-showdown .support-strip__note { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  /* Заголовок RG на Showdown набран в две строки (0:7303: 350×40) */
  .page-showdown .rg-section__title { min-height: 40px; }
  .page-showdown .rg-card { height: 120px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Профиль сквозных блоков «широкие полосы» @390 — восемь страниц, чьи
   мобильные фреймы набраны с отступом 20 и увеличенными полосами:
   support 186, betstop 169, payments 152, footer 740 (10:186…10:211 и их
   двойники в остальных фреймах).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .strips-wide .support-strip {
    height: 186px;
    padding: var(--space-10) var(--space-9);
  }

  .strips-wide .support-strip__inner { gap: var(--space-8); }

  /* Бейдж и «Need help?» стоят в строку (10:187), ниже — блок 39 */
  .strips-wide .support-strip__lead {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-6);
    row-gap: 4px;
    align-items: center;
  }

  .strips-wide .support-strip__title { font-size: 16px; line-height: 17px; }

  .strips-wide .support-strip__service {
    grid-column: 1 / -1;
    margin-top: var(--space-6);
    font-size: 14px;
    line-height: 18px;
  }

  .strips-wide .support-strip__note {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 17px;
  }

  .strips-wide .support-strip__phone { height: 46px; min-height: 46px; }
}

@media (max-width: 767px) {
  /* BetStop (10:196): 24 + [20 + 8 + 18 + 8 + 34] + 16 + 17 + 24 = 169 */
  .strips-wide .betstop-strip { height: 169px; padding: var(--space-10) var(--space-9); }
  .strips-wide .betstop-strip__inner { gap: var(--space-8); }
  .strips-wide .betstop-strip__lead { gap: var(--space-4); }
  .strips-wide .betstop-strip__title { font-size: 14px; line-height: 18px; }
  .strips-wide .betstop-strip__note { font-size: 13px; line-height: 17px; }
  .strips-wide .betstop-strip__cta { min-height: 17px; font-size: 13px; line-height: 17px; }

  /* Платежи (10:203): 24 + [14 + 12 + 30] + 16 + 32 + 24 = 152 */
  .strips-wide .payments-strip { height: 152px; padding: var(--space-10) var(--space-9); }
  .strips-wide .payments-strip__inner { gap: var(--space-8); }
  .strips-wide .payments-strip__lead { gap: var(--space-6); }
  .strips-wide .payments-strip__label { font-size: 11px; line-height: 14px; }
  .strips-wide .payments-strip__logos { width: 220px; height: 30px; }
  .strips-wide .payments-strip__note { min-height: 32px; gap: var(--space-4); font-size: 12px; line-height: 16px; }

  /* Подвал (10:211): 48 + 234 + 32 + 216 + 32 + линия + 32 + 98 + 48 = 740 */
  /* Боковой отступ подвала задаётся внутренними блоками, поэтому у самой
     секции он нулевой — иначе складывается с ним и сужает колонку. */
  .strips-wide .site-footer { height: auto; padding: var(--space-13) 0; }
  .strips-wide .site-footer__inner,
  .strips-wide .site-footer__legal,
  .strips-wide .site-footer__rule { padding-inline: var(--space-9); margin-inline: 0; }
  .strips-wide .site-footer__brand { gap: var(--space-9); }
  .strips-wide .site-footer__slogan { min-height: 52px; }
  .strips-wide .site-footer__about { font-size: 13px; line-height: 20px; }
  .strips-wide .site-footer__nav { gap: var(--space-9) var(--space-8); }
  .strips-wide .site-footer__legal { gap: var(--space-6); }
  .strips-wide .site-footer__legal p { font-size: 11px; line-height: 18px; }
  .strips-wide .site-footer__legal p + p { line-height: 14px; }
}

@media (max-width: 767px) {
  /* Между блоками подвала зазор 32, линия остаётся видимой и съедает
     собственный зазор (10:234). Логотип в этом фрейме 22, а не 26. */
  .strips-wide .site-footer { gap: var(--space-11); }
  .strips-wide .site-footer__rule { display: block; }
  .strips-wide .site-footer__brand .logo { min-height: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   About us @390 (фрейм 4:779): в мобильном макете «что мы предлагаем» —
   не одна секция с колонками, а четыре самостоятельные полосы во всю
   ширину со своими отступами.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-about-us .offer { gap: 0; padding: 0; }
  .page-about-us .offer__head { padding: var(--space-13) var(--space-9) var(--space-11); }
  .page-about-us .offer-row { padding: var(--space-12) var(--space-9); }
  .page-about-us .offer__blocks { gap: 0; }
  .page-about-us .offer__blocks .offer-row:first-child {
    padding: var(--space-10) var(--space-9) var(--space-12);
  }
}

@media (max-width: 767px) {
  /* Полоса реквизитов (4:811): в мобильном фрейме факты стоят парами,
     разделители — горизонтальные линии сверху, между парами и снизу,
     плюс вертикальная линия внутри пары. */
  .page-about-us .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1px 110px 1px 90px 1px;
    row-gap: var(--space-6);
    column-gap: 0;
    min-height: 301px;
    padding: var(--space-10) var(--space-9);
  }
  .page-about-us .fact { align-content: center; gap: 4px; }
  .page-about-us .fact:nth-of-type(1) { grid-area: 2 / 1; }
  .page-about-us .fact:nth-of-type(2) { grid-area: 2 / 2; }
  .page-about-us .fact:nth-of-type(3) { grid-area: 4 / 1; }
  .page-about-us .fact:nth-of-type(4) { grid-area: 4 / 2; }
  .page-about-us .fact:nth-of-type(2),
  .page-about-us .fact:nth-of-type(4) {
    padding-left: var(--space-9);
    border-left: 1px solid rgba(255, 112, 77, .3);
  }
  .page-about-us .facts__divider { height: 1px; background: rgba(255, 112, 77, .3); }
  .page-about-us .facts__divider:nth-of-type(1) { grid-area: 1 / 1 / 2 / 3; }
  .page-about-us .facts__divider:nth-of-type(2) { grid-area: 3 / 1 / 4 / 3; }
  .page-about-us .facts__divider:nth-of-type(3) { grid-area: 5 / 1 / 6 / 3; }
  .page-about-us .fact__label { font-size: 11px; line-height: 14px; letter-spacing: .5px; }
  .page-about-us .fact__value { font-family: var(--font-display); font-size: 16px; line-height: 20px; }

  /* Принципы (4:833): три карточки по 171 с зазором 24, шапка 132 */
  .page-about-us .principles { gap: var(--space-11); padding: var(--space-13) var(--space-9); }
  .page-about-us .principles__head { gap: var(--space-4); }
  .page-about-us .principles__row { gap: var(--space-10); }
  .page-about-us .principle { min-height: 171px; gap: var(--space-8); padding: var(--space-9); }
}

@media (max-width: 767px) {
  /* Шапка принципов (4:834): кикер 16 + 8 + заголовок 108 (три строки 30/36) */
  .page-about-us .principles__kicker { font-size: 12px; line-height: 16px; }
  .page-about-us .principles__title { font-size: 30px; line-height: 36px; }

  /* Карточка (4:838): 20 + 30 + 16 + [20 + 8 + 57] + 20 = 171 */
  .page-about-us .principle__num { font-size: 28px; line-height: 30px; }
  .page-about-us .principle__title { font-size: 16px; line-height: 20px; }
  .page-about-us .principle__text { margin-top: -8px; font-size: 13px; line-height: 19px; }
}

@media (max-width: 767px) {
  /* Hero (4:793): бейдж 25 + 16 + заголовок 180 + 24 + лид 92 + 24 +
     кнопки 108 + 24 + оговорка 16, медиа 220. */
  .page-about-us .about-hero { gap: var(--space-10); padding: var(--space-12) var(--space-9); }
  .page-about-us .about-hero__text { gap: var(--space-10); }
  .page-about-us .about-hero__text > p:first-child { min-height: 25px; }
  .page-about-us .about-hero__title { margin-top: -8px; font-size: 44px; line-height: 45px; }
  .page-about-us .about-hero__lead { font-size: 15px; line-height: 22.5px; }
  .page-about-us .about-hero__actions { gap: var(--space-6); }
  .page-about-us .about-hero__actions .btn { height: 48px; min-height: 48px; }
  .page-about-us .about-hero__mark { min-height: 16px; font-size: 12px; line-height: 16px; }
  /* 4:809 — снимок лежит в рамке 350×220 с обводкой 2 и радиусом 12.
     Высота стояла у обёртки, а картинка внутри оставалась 260 и вылезала
     за неё на 40px: кадр обрезался не так, как в макете. */
  .page-about-us .about-hero__media {
    height: 220px;
    min-height: 220px;
    overflow: hidden;
    border-radius: var(--radius-xl);
  }
  .page-about-us .about-hero__media picture { display: block; height: 100%; }
  .page-about-us .about-hero__media img { width: 100%; height: 100%; object-fit: cover; }

  /* Наша история (4:824): 90 + 24 + 108 + 24 + 84 + 24 + 192 */
  .page-about-us .story { gap: var(--space-10); padding: var(--space-13) var(--space-9); }
  .page-about-us .story__left { gap: 4px; }
  .page-about-us .story__num { font-size: 70px; line-height: 70px; }
  .page-about-us .story__kicker { min-height: 16px; }
  .page-about-us .story__right { gap: var(--space-10); }
  .page-about-us .story__title { font-size: 30px; line-height: 36px; }
  .page-about-us .story__lead { font-size: 20px; line-height: 28px; }
  .page-about-us .story__text { font-size: 15px; line-height: 24px; }
}

@media (max-width: 767px) {
  /* Шапка «что мы предлагаем» (4:853): 16 + 12 + 76 + 12 + 20 */
  .page-about-us .offer__head { gap: var(--space-6); }
  .page-about-us .offer__kicker { font-size: 12px; line-height: 16px; }
  .page-about-us .offer__title { font-size: 32px; line-height: 38px; }
  .page-about-us .offer__lead { min-height: 20px; font-size: 15px; line-height: 19.5px; }

  /* Блоки (4:857, 4:866, 4:875): номер 48, заголовок 28, лид, кнопка 48,
     изображение 180. В блоке про скачки изображение стоит первым. */
  .page-about-us .offer-row { gap: var(--space-9); }
  .page-about-us .offer-row__text { gap: var(--space-4); }
  .page-about-us .offer-row__num { font-size: 44px; line-height: 48px; }
  .page-about-us .offer-row__title { font-size: 26px; line-height: 28px; }
  .page-about-us .offer-row__lead { font-size: 15px; line-height: 22.5px; }
  .page-about-us .offer-row__text > p:last-child { margin-top: var(--space-6); }
  .page-about-us .offer-row__text .link-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-surface);
    text-decoration: none;
  }
  .page-about-us .offer-row__media { height: 180px; min-height: 180px; }
  .page-about-us .offer__blocks .offer-row:nth-of-type(2) { display: flex; flex-direction: column; }
  .page-about-us .offer__blocks .offer-row:nth-of-type(2) .offer-row__media { order: -1; }
}

@media (max-width: 767px) {
  /* Врезка pre-match (4:880): 20 + 17 + 10 + 60 + 20 = 127, зазор до текста 24 */
  .page-about-us .offer-row--wide { gap: var(--space-10); }
  .page-about-us .offer-note { min-height: 127px; gap: 10px; padding: var(--space-9); }
  .page-about-us .offer-note__title { font-size: 16px; line-height: 17px; }
  .page-about-us .offer-note__text { font-size: 14px; line-height: 19.6px; }
}

@media (max-width: 767px) {
  /* В блоке pre-match кнопки нет — отступ «под кнопку» не нужен */
  .page-about-us .offer-row--wide .offer-row__text > p:last-child { margin-top: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BetStop @390 (фрейм 4:937)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero (4:954): бейдж 25 + 24 + текст 236 + 24 + круг 220 */
  .page-betstop .bs-hero { gap: var(--space-10); padding: var(--space-12) var(--gutter-mobile); }
  .page-betstop .bs-hero__kicker { min-height: 25px; }
  .page-betstop .bs-hero__body { gap: var(--space-10); }
  .page-betstop .bs-hero__text { gap: var(--space-8); }
  .page-betstop .bs-hero__stamp { width: 220px; height: 220px; min-height: 220px; }

  /* Полоса доверия (4:972): три блока по 70 с линиями между ними */
  /* Линии между блоками в макете нулевой высоты, но съедают по два
     зазора 32 — суммарно 64 между соседними блоками. */
  .page-betstop .bs-facts { gap: 0; padding: var(--space-12) var(--gutter-mobile); }
  .page-betstop .bs-fact { position: relative; min-height: 70px; gap: var(--space-4); }
  .page-betstop .bs-fact + .bs-fact { margin-top: 64px; }
  .page-betstop .bs-fact + .bs-fact::before {
    content: "";
    position: absolute;
    inset: -32px 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-cream) 15%, transparent);
  }

  /* Шаги (4:984): шапка 186, шаги 317 / 199 / 509, зазор 40 */
  .page-betstop .bs-how { gap: var(--space-12); padding: 56px var(--gutter-mobile); }
  .page-betstop .bs-how__head { gap: var(--space-6); }
  .page-betstop .bs-step { gap: var(--space-8); }

  /* Переход (4:1020): заголовок 114 + 16 + текст 96 */
  .page-betstop .bs-transition { gap: var(--space-8); padding: 56px var(--gutter-mobile); }
  .page-betstop .bs-transition__title { font-size: 32px; line-height: 38px; }
  .page-betstop .bs-transition__text { min-height: 96px; font-size: 16px; line-height: 24px; }

  /* Последствия (4:1023): строки 146 / 180 / 180 / 180 и сноска 42 */
  .page-betstop .bs-effects { gap: var(--space-11); padding: var(--space-12) var(--gutter-mobile); }
  .page-betstop .bs-effect { gap: var(--space-6); padding-bottom: var(--space-10); }
}

@media (max-width: 767px) {
  /* Hero-текст (4:957): строка с логотипом 56, подзаголовок 20/26 (52),
     лид 15/24 (96). Блок доверия (4:973): заголовок 26 + 8 + текст 36. */
  .page-betstop .bs-hero__title { min-height: 56px; }
  .page-betstop .bs-hero__sub { font-size: 20px; line-height: 26px; }
  .page-betstop .bs-hero__lead { font-size: 15px; line-height: 24px; }
  .page-betstop .bs-fact__title { font-size: 20px; line-height: 26px; }
  .page-betstop .bs-fact__text { font-size: 14px; line-height: 18px; }
}

@media (max-width: 767px) {
  /* Строка последствий (4:1024): номер, заголовок и статус стоят в одну
     строку 30, ниже — текст 14/20. Между строками зазор 32. */
  .page-betstop .bs-effect {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-6);
    align-items: center;
  }
  .page-betstop .bs-effect__num { min-height: 30px; font-size: 20px; line-height: 30px; }
  .page-betstop .bs-effect__body { display: contents; }
  .page-betstop .bs-effect__head { min-height: 30px; }
  .page-betstop .bs-effect__text {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 20px;
  }
  .page-betstop .bs-effect__body > p:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  /* Шапка шагов (4:985): кикер 22 + 12 + заголовок 152 (четыре строки 32/38) */
  .page-betstop .bs-how__kicker { font-size: 16px; line-height: 22px; }
  .page-betstop .bs-how__title { font-size: 32px; line-height: 38px; }

  /* Шаг (4:988): номер 61, зазор 16, текст 240 = 44 + 12 + 154 + 12 + 18 */
  .page-betstop .bs-step__num { font-size: 56px; line-height: 61px; }
  .page-betstop .bs-step__text { gap: var(--space-6); }
  .page-betstop .bs-step__title { font-size: 20px; line-height: 22px; }
  .page-betstop .bs-step__lead { font-size: 15px; line-height: 22px; }
  .page-betstop .bs-step__text > p:last-child { font-size: 14px; line-height: 18px; }
}

@media (max-width: 767px) {
  /* Высоты шагов из макета: текст в браузере переносится на строку
     короче, чем в Figma, поэтому блоки держатся минимальной высотой. */
  .page-betstop .bs-how .bs-step:nth-of-type(2) { min-height: 199px; }
  .page-betstop .bs-how .bs-step:nth-of-type(3) { min-height: 509px; }
  .page-betstop .bs-hero__body { gap: 19px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Contact us @390 (фрейм 4:405)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Интро (4:420): 48 + [25 + 20 + 92 + 20 + 69] + 48 = 322 */
  .page-contact-us .page-intro { padding: var(--space-13) var(--space-9); }
  .page-contact-us .page-intro__content { gap: var(--space-9); }
  .page-contact-us .page-intro__kicker { min-height: 25px; }
  .page-contact-us .page-intro__lead { font-size: 15px; line-height: 22.5px; }

  /* Маршрутизация (4:428): 32 + [13 + 24 + 176] + 32 = 277 */
  .page-contact-us .routing { gap: var(--space-10); padding: var(--space-11) var(--space-9); }
  .page-contact-us .routing__label { min-height: 13px; font-size: 12px; line-height: 13px; }
  .page-contact-us .routing__list { gap: var(--space-9); }

  /* Форма и панель поддержки (4:451): 40 + [1388 + 48 + 569] + 40 = 2085 */
  .page-contact-us .contact { gap: var(--space-13); padding: var(--space-12) var(--space-9); }
  /* 4:524 — на мобильном паддинг 24 вместо 32, зазор тот же */
  .page-contact-us .contact-side { min-height: 569px; padding: var(--space-10); }
  .page-contact-us .support-group { gap: var(--space-4); }
  .page-contact-us .support-group--phone { gap: var(--space-6); }
}

@media (max-width: 767px) {
  /* Заголовок интро (4:426): 42/46, две строки */
  .page-contact-us .page-intro__title { font-size: 42px; line-height: 46px; }
  .page-contact-us .page-intro__mark { display: none; }

  /* Маршрутизация (4:430): три строки по 32 с линиями между ними,
     зазор 20 с каждой стороны линии. */
  .page-contact-us .routing__list { gap: 0; }
  .page-contact-us .routing__list li { position: relative; min-height: 32px; display: flex; align-items: center; }
  .page-contact-us .routing__list li + li { margin-top: var(--space-12); }
  .page-contact-us .routing__list li + li::before {
    content: "";
    position: absolute;
    inset: -20px 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-ink) 15%, transparent);
  }

  /* Форма (4:452): секции 294 / 382 / 410 и подвал 102, зазор 40,
     между секциями — линии нулевой высоты. */
  /* 4:452 — колонка формы с зазором 40. Линия между секциями своим нулевым
     боксом съедает ещё один зазор, поэтому на стыке секций 80. Но перед
     подвалом формы линии нет — там остаётся 40, и удваивать общий gap
     нельзя: подвал уезжал на 40px вниз. */
  .page-contact-us .contact-form { gap: var(--space-12); }
  .page-contact-us .contact-form .contact-block + .contact-block { margin-top: var(--space-12); }
  .page-contact-us .contact-form .contact-block + .contact-block::before {
    top: calc(var(--space-12) * -1);
  }
  .page-contact-us .contact-block:nth-of-type(1) { min-height: 294px; }
  .page-contact-us .contact-block:nth-of-type(2) { min-height: 382px; }
  .page-contact-us .contact-block:nth-of-type(3) { min-height: 410px; }
  .page-contact-us .contact-form__foot { min-height: 102px; gap: var(--space-8); }
}

@media (max-width: 767px) {
  .page-contact-us .page-intro__lead { margin-top: 0; }

  /* Шапка секции формы (4:454): крупный номер 56 слева, справа колонка
     заголовка и примечания (78). Поля ниже, с зазором 24. */
  /* Шапка — строка: номер 75×56 слева, колонка текста справа, зазор 16.
     Сетка с margin-top:-20px здесь была костылём и накладывала вторую
     строку заголовка на подпись, как только заголовок переносился. */
  .page-contact-us .contact-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }
  .page-contact-us .contact-block > legend { display: none; }
  .page-contact-us .contact-block__head { gap: var(--space-8); }
  /* 4:456 — заголовок и подпись в шапке секции стоят через 4, а не через 8:
     из-за лишних четырёх пикселей каждая секция формы шла выше макетной. */
  .page-contact-us .contact-block__text { gap: var(--space-2); }
  .page-contact-us .contact-block__num {
    min-width: 75px;
    min-height: 56px;
    font-size: 56px;
    line-height: 56px;
  }
  /* 4:457 — 18/19.58, бокс 40 на две строки = 20 на строку */
  .page-contact-us .contact-block__title { font-size: 18px; line-height: 20px; }
  /* 4:458 — 13/16.9, бокс 34 на две строки = 17 */
  .page-contact-us .contact-block__note { font-size: 13px; line-height: 17px; }
  .page-contact-us .field { gap: var(--space-4); }
}

@media (max-width: 767px) {
  /* Между полями секции зазор 16 (4:459), между шапкой и полями — 24 */
  .page-contact-us .contact-block .field + .field { margin-top: calc(var(--space-4) * -1); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Deposit limits @390 (фрейм 4:607)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Интро (4:623): бейдж 21 + 16 + заголовок 80 + 16 + текст 80 */
  .page-deposit-limits .page-intro { gap: var(--space-8); padding: var(--space-11) var(--gutter-mobile); }
  .page-deposit-limits .page-intro__content { gap: var(--space-8); }
  .page-deposit-limits .page-intro__kicker { min-height: 21px; }
  .page-deposit-limits .page-intro__title { font-size: 36px; line-height: 40px; }
  .page-deposit-limits .page-intro__lead { margin-top: 0; font-size: 14px; line-height: 20px; }

  /* Панель лимита (4:631): шапка 66 + 20 + карточка 356 */
  .page-deposit-limits .dl-panel { gap: var(--space-9); padding: var(--space-10) var(--gutter-mobile); }
  .page-deposit-limits .dl-surface { min-height: 356px; gap: var(--space-9); padding: var(--space-9); }

  /* Панель помощи (4:657): зоны 83 / 99 / 83, между ними линии и зазоры 24 */
  .page-deposit-limits .dl-rail { gap: 0; padding: var(--space-9); }
  .page-deposit-limits .dl-rail__card { position: relative; }
  .page-deposit-limits .dl-rail__card + .dl-rail__card { margin-top: var(--space-13); }
  .page-deposit-limits .dl-rail__card + .dl-rail__card::before {
    content: "";
    position: absolute;
    inset: -24px 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-cream) 15%, transparent);
  }

  /* Выноска (4:673): заголовок 26/30 (60) + 12 + текст 14/20 (60) */
  .page-deposit-limits .dl-callout { gap: var(--space-6); padding: var(--space-12) var(--gutter-mobile); }
  .page-deposit-limits .dl-callout__title { font-size: 26px; line-height: 30px; }
  .page-deposit-limits .dl-callout__text { margin-top: 0; font-size: 14px; line-height: 20px; }

  /* Шаги (4:676) и связанные инструменты (4:695): шапка 70, зазор 24 */
  .page-deposit-limits .dl-how { gap: var(--space-10); padding: var(--space-12) var(--gutter-mobile); }
  .page-deposit-limits .dl-tools { gap: var(--space-10); padding: var(--space-12) var(--gutter-mobile); }
  .page-deposit-limits .dl-how__head { gap: 4px; }
  .page-deposit-limits .dl-steps { gap: var(--space-10); }
  .page-deposit-limits .dl-step { gap: var(--space-4); }
  .page-deposit-limits .dl-tools__list { gap: 0; }
  .page-deposit-limits .dl-tools__list > li { padding-block: var(--space-8); }
}

@media (max-width: 767px) {
  /* В мобильном фрейме шапка стоит НАД карточкой (4:632 + 4:635),
     а панель помощи — самостоятельная полоса во всю ширину. */
  .page-deposit-limits .dl-panel { display: contents; }
  .page-deposit-limits .dl-surface {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    min-height: 490px;
    margin: 0;
    padding: var(--space-10) var(--gutter-mobile);
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .page-deposit-limits .dl-surface__head { min-height: 66px; padding: 0; }
  .page-deposit-limits .dl-surface__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    min-height: 356px;
    padding: var(--space-9);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-ink);
  }
  .page-deposit-limits .dl-rail { margin: 0; padding: var(--space-9); }
}

@media (max-width: 767px) {
  /* Карточка (4:635): 20 + [70 + 20 + линия + 20 + 98 + 20 + 88] + 20 = 356.
     Примечание в мобильном фрейме не показывается. */
  .page-deposit-limits .dl-surface__body { gap: var(--space-9); }
  .page-deposit-limits .dl-current { min-height: 70px; gap: var(--space-4); }
  .page-deposit-limits .dl-cycle { min-height: 98px; gap: var(--space-4); }
  .page-deposit-limits .dl-surface__note { display: none; }
  /* В мобильном фрейме карточка показывает только кнопку и оговорку
     (4:653), полей ввода нет. Поля оставлены: контрол смены лимита
     должен работать, а не быть картинкой. Расхождение объяснено в отчёте. */
  .page-deposit-limits .dl-form { gap: var(--space-6); }
  .page-deposit-limits .dl-form__legal { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .dl-surface__head { gap: 4px; }
}

@media (max-width: 767px) {
  /* Строки связанных контролов (4:700): 65 / 81 / 81 / 65 — заголовок и
     описание слева, ссылка справа, отступ 16 сверху и снизу. */
  .page-deposit-limits .dl-tool {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-8);
  }
  .page-deposit-limits .dl-tool__title { font-size: 14px; line-height: 15px; }
  .page-deposit-limits .dl-tool__text { font-size: 13px; line-height: 16px; }
  .page-deposit-limits .dl-tool > a { font-size: 13px; line-height: 17px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Профиль полос «steps» @390 — фрейм how-it-works (3:184): полосы набраны
   крупнее и по центру, подвал короче (621).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Помощь (3:417): 32 + [98 + 20 + 46] + 32 = 228, содержимое по центру */
  .strips-steps .support-strip { height: 228px; padding: var(--space-11) var(--space-9); }
  .strips-steps .support-strip__inner { gap: var(--space-9); align-items: center; text-align: center; }
  .strips-steps .support-strip__lead { gap: var(--space-4); align-items: center; }
  .strips-steps .support-strip__phone { height: 46px; min-height: 46px; }

  /* BetStop (3:426): 20 + [17 + 12 + 18 + 12 + 34] + 12 + 17 + 20 = 162 */
  .strips-steps .betstop-strip { height: 162px; padding: var(--space-9); }
  .strips-steps .betstop-strip__inner { gap: var(--space-6); }
  .strips-steps .betstop-strip__lead { gap: var(--space-6); }
  .strips-steps .betstop-strip__title { font-size: 14px; line-height: 18px; }
  .strips-steps .betstop-strip__note { font-size: 13px; line-height: 17px; }
  .strips-steps .betstop-strip__cta { min-height: 17px; font-size: 13px; line-height: 17px; }

  /* Платежи (3:432): 20 + [52 + 16 + 32] + 20 = 140 */
  .strips-steps .payments-strip { height: 140px; padding: var(--space-9); }
  .strips-steps .payments-strip__inner { gap: var(--space-8); }
  .strips-steps .payments-strip__lead { gap: var(--space-4); }
  .strips-steps .payments-strip__note { min-height: 32px; gap: var(--space-4); font-size: 12px; line-height: 16px; }

  /* Подвал (3:440): 40 + 204 + 32 + 192 + 32 + 81 + 40 = 621 */
  .strips-steps .site-footer { height: auto; gap: var(--space-11); padding: var(--space-12) 0; }
  .strips-steps .site-footer__inner,
  .strips-steps .site-footer__legal,
  .strips-steps .site-footer__rule { padding-inline: var(--space-9); margin-inline: 0; }
  .strips-steps .site-footer__brand { gap: var(--space-8); }
  .strips-steps .site-footer__nav { gap: var(--space-9) var(--space-8); }
  .strips-steps .site-footer__legal { gap: var(--space-4); }
  .strips-steps .site-footer__legal p { font-size: 11px; line-height: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   How it works @390 (фрейм 3:184): интро и лента шагов — две отдельные
   секции макета (3:198 и 3:207), каждая во всю ширину со своим фоном.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-how-it-works .hiw-hero { gap: 0; padding: 0; }
  .page-how-it-works .hiw-hero__intro {
    gap: var(--space-8);
    padding: var(--space-13) var(--space-9);
  }
  .page-how-it-works .hiw-hero__intro > p:first-child { min-height: 26px; }
  .page-how-it-works .hiw-hero__title { font-size: 40px; line-height: 43px; }
  .page-how-it-works .hiw-hero__leads { gap: 4px; }
  .page-how-it-works .hiw-hero__leads > p:first-child { font-size: 18px; line-height: 25.2px; }
  .page-how-it-works .hiw-hero__leads > p:last-child { font-size: 15px; line-height: 22.5px; }

  /* Лента (3:207): три пункта по 84 и один 56, зазор 16, отступ 32/20 */
  .page-how-it-works .hiw-timeline {
    gap: var(--space-8);
    padding: var(--space-11) var(--space-9);
    background: var(--color-surface);
  }
  .page-how-it-works .hiw-timeline__item {
    min-height: 84px;
    gap: var(--space-4);
    align-items: center;
    text-align: center;
  }
  .page-how-it-works .hiw-timeline__item:last-child { min-height: 56px; }
}

@media (max-width: 767px) {
  /* Шаги 1 и 2 в мобильном фрейме разложены на две полосы во всю ширину
     (секция текста и карточка события), шаги 3 и 4 — одной секцией. */
  .page-how-it-works .hiw-step { gap: 0; padding: 0; }
  .page-how-it-works .hiw-step__text { padding: var(--space-12) var(--space-9); }
  .page-how-it-works .hiw-step--03 .hiw-step__text,
  .page-how-it-works .hiw-step--04 .hiw-step__text { padding-bottom: var(--space-10); }
  .page-how-it-works .hiw-step__demo { padding: var(--space-9); }
}

@media (max-width: 767px) {
  /* Шапка шага (3:232): номер и кикер в строку (61), заголовок 32/35,
     лид 15/22.5, примечание 13/17, зазор 12. */
  .page-how-it-works .hiw-step__head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-6);
    align-items: center;
  }
  .page-how-it-works .hiw-step__num { grid-column: 1; min-height: 61px; font-size: 56px; line-height: 61px; }
  .page-how-it-works .hiw-step__kicker { grid-column: 2; }
  .page-how-it-works .hiw-step__title,
  .page-how-it-works .hiw-step__lead,
  .page-how-it-works .hiw-step__note,
  .page-how-it-works .hiw-step__checks { grid-column: 1 / -1; }
  .page-how-it-works .hiw-step__title { font-size: 32px; line-height: 35px; }
  .page-how-it-works .hiw-step__lead { font-size: 15px; line-height: 22.5px; }
  .page-how-it-works .hiw-step__note { font-size: 13px; line-height: 17px; }
  .page-how-it-works .hiw-step__text { gap: var(--space-11); }
  .page-how-it-works .hiw-step__text .btn { height: 42px; min-height: 42px; }
}

@media (max-width: 767px) {
  /* Шаг 3 (3:313): текст 212 + 24 + список 106 + 24 + купон 357 + 24 + сноска 60
     плюс отступы 40 — 887. Шаг 4 (3:368) — 688. */
  .page-how-it-works .hiw-step--03 { min-height: 887px; }
  .page-how-it-works .hiw-step--03 .hiw-step__demo { padding-top: var(--space-10); }
  .page-how-it-works .hiw-step--04 { min-height: 688px; }
}

@media (max-width: 767px) {
  /* Карточки событий (3:242, 3:280) в мобильном фрейме выше: 351.
     Переходы между шагами — полосы 50 и 45. */
  .page-how-it-works .hiw-step--01 .hiw-step__demo,
  .page-how-it-works .hiw-step--02 .hiw-step__demo { min-height: 351px; }
  .page-how-it-works .hiw-transition { min-height: 50px; height: 50px; padding: var(--space-8) var(--space-9); }
  .page-how-it-works .hiw-connector { min-height: 45px; height: 45px; padding: var(--space-8) var(--space-9); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Help centre @390 (фрейм 4:4): поиск и строка популярных запросов —
   отдельные полосы макета, а не части hero.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero (4:18): бейдж 26 + 24 + заголовок 92 + 24 + лид 96 */
  /* Боковой отступ несут сами блоки: поиск и лента подсказок в макете —
     полосы во всю ширину. */
  .page-help-centre .help-hero { gap: 0; padding: 0; }
  .page-help-centre .help-hero__intro { padding: var(--space-13) var(--space-9); }
  .page-help-centre .help-hero__intro { gap: var(--space-10); }
  .page-help-centre .help-hero__kicker { min-height: 26px; }
  .page-help-centre .help-hero__title { font-size: 44px; line-height: 46px; }
  .page-help-centre .help-hero__lead { font-size: 16px; line-height: 24px; }

  /* Поиск (4:26): подпись 16 + 12 + поле 52 + 12 + кнопка 48, отступ снизу 24 */
  .page-help-centre .help-search {
    gap: var(--space-6);
    padding: 0 var(--gutter-mobile) var(--space-10);
  }
  .page-help-centre .help-search__label { min-height: 16px; font-size: 12px; line-height: 16px; }
  .page-help-centre .help-search__row { flex-direction: column; gap: var(--space-6); }
  .page-help-centre .help-search__input { height: 52px; }
  .page-help-centre .help-search__row .btn { height: 48px; min-height: 48px; }

  /* Популярные запросы (4:33): строка 32 с отступом снизу 32 */
  .page-help-centre .help-search__popular {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 32px;
    margin: 0 calc(var(--gutter-mobile) * -1);
    padding: 0 var(--gutter-mobile) var(--space-11);
  }
  .page-help-centre .help-search__tag { height: 32px; }
}

@media (max-width: 767px) {
  /* Лента популярных запросов (4:35) в макете прокручивается в одну строку */
  .page-help-centre .help-search__popular {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    scrollbar-width: none;
  }
  .page-help-centre .help-search__popular::-webkit-scrollbar { display: none; }
  .page-help-centre .help-search__tag { flex: none; }
  .page-help-centre .help-search__popular-label { flex: none; }
}

@media (max-width: 767px) {
  /* Поле поиска (4:28) — 52 в высоту */
  .page-help-centre .help-search__input { height: 52px; min-height: 52px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Профиль полос «help» @390 — фрейм help-centre (4:4)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Помощь (4:255): 32 + [23 + 16 + 42 + 16 + 48] + 32 = 209 */
  .strips-help .support-strip { height: 209px; padding: var(--space-11) var(--space-9); }
  .strips-help .support-strip__inner { gap: var(--space-8); }
  .strips-help .support-strip__lead {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: 4px;
    align-items: center;
  }
  .strips-help .support-strip__title { font-size: 16px; line-height: 23px; }
  .strips-help .support-strip__service,
  .strips-help .support-strip__note { grid-column: 1 / -1; font-size: 13px; line-height: 17px; }
  .strips-help .support-strip__service { margin-top: var(--space-6); }
  .strips-help .support-strip__phone { height: 48px; min-height: 48px; }

  /* BetStop (4:265): 20 + [36 + 12 + 34] + 12 + 17 + 20 = 151 */
  .strips-help .betstop-strip { height: 151px; padding: var(--space-9); }
  .strips-help .betstop-strip__inner { gap: var(--space-6); }
  .strips-help .betstop-strip__lead { gap: var(--space-6); }
  .strips-help .betstop-strip__title { font-size: 14px; line-height: 18px; }
  .strips-help .betstop-strip__note { font-size: 13px; line-height: 17px; }
  .strips-help .betstop-strip__cta { min-height: 17px; font-size: 13px; line-height: 17px; }

  /* Платежи (4:272): 20 + [52 + 16 + 34] + 20 = 142 */
  .strips-help .payments-strip { height: 142px; padding: var(--space-9); }
  .strips-help .payments-strip__inner { gap: var(--space-8); }
  .strips-help .payments-strip__lead { gap: var(--space-4); }
  .strips-help .payments-strip__note { min-height: 34px; gap: var(--space-4); font-size: 12px; line-height: 17px; }

  /* Подвал (4:280): 56 + 242 + 40 + 192 + 40 + 98 + 48 = 716 */
  .strips-help .site-footer { height: auto; gap: var(--space-12); padding: 56px 0 var(--space-13); }
  .strips-help .site-footer__inner,
  .strips-help .site-footer__legal,
  .strips-help .site-footer__rule { padding-inline: var(--space-9); margin-inline: 0; }
  .strips-help .site-footer__brand { gap: var(--space-9); }
  .strips-help .site-footer__nav { gap: var(--space-9) var(--space-8); }
  /* 4:290 — между блоками подвала 40, а не 32 */
  .strips-help .site-footer__inner { gap: var(--space-12); }
  .strips-help .site-footer__legal { gap: var(--space-6); }
  .strips-help .site-footer__legal p { font-size: 11px; line-height: 18px; }
}

@media (max-width: 767px) {
  /* Подвал в этом фрейме крупнее: бренд 242, меню 192, реквизиты 98 */
  .strips-help .site-footer__brand { min-height: 242px; }
  .strips-help .site-footer__legal { min-height: 98px; }

  /* «Не нашли ответ» (4:218): 56 + [16 + 12 + 74 + 12 + 69] + 24 + 104 + 56 */
  .page-help-centre .help-cta { gap: var(--space-10); padding: 56px var(--space-9); }
  .page-help-centre .help-cta__text { gap: var(--space-6); }
  .page-help-centre .help-cta__kicker { min-height: 16px; font-size: 12px; line-height: 16px; }
  .page-help-centre .help-cta__title { font-size: 34px; line-height: 37px; }
  .page-help-centre .help-cta__lead { font-size: 15px; line-height: 22.5px; }
  .page-help-centre .help-cta__actions { flex-direction: column; gap: var(--space-6); min-height: 104px; }
  .page-help-centre .help-cta__actions .btn { height: 46px; min-height: 46px; }
}

@media (max-width: 767px) {
  /* Темы (4:69) и FAQ (4:144, 4:148) — самостоятельные полосы макета */
  .page-help-centre .help-workspace { gap: 0; padding: 0; }
  .page-help-centre .help-topics {
    gap: var(--space-10);
    padding: var(--space-12) var(--gutter-mobile);
  }
  .page-help-centre .help-topics__label { min-height: 16px; font-size: 12px; line-height: 16px; }
  .page-help-centre .help-topics__title { font-size: 28px; line-height: 30px; }
  .page-help-centre .help-topics__list { gap: 0; }
  .page-help-centre .help-topic { min-height: 48px; padding: 14px var(--space-8) 14px 0; }

  .page-help-centre .help-articles { gap: 0; }
  .page-help-centre .help-articles__head {
    gap: var(--space-4);
    min-height: 137px;
    padding: 0 var(--gutter-mobile) var(--space-9);
  }
  .page-help-centre .faq {
    gap: var(--space-6);
    padding: 0 var(--gutter-mobile) var(--space-12);
  }
}

@media (max-width: 767px) {
  .page-help-centre .quick-help { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsible gambling @390 (фрейм 9:4): у страницы свой мобильный набор
   отступов, а оглавление набрано с зазором 10.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero (9:23): 48 + [22 + 24 + 156 + 24 + 166] + 48 = 488 */
  .page-responsible-gambling .legal-hero { gap: var(--space-10); padding: var(--space-13) var(--space-9); }
  .page-responsible-gambling .legal-hero__capsule { min-height: 22px; }
  .page-responsible-gambling .legal-hero__group { min-height: 346px; gap: var(--space-10); }

  /* Инструменты (9:35): 32 + [17 + 20 + 266] + 32 = 367 */
  .page-responsible-gambling .legal-quick {
    min-height: 367px;
    gap: var(--space-9);
    padding: var(--space-11) var(--space-9);
  }

  /* Реквизиты документа (9:48): 32 + [22 + 16 + 42 + 16 + 120] + 32 = 280 */
  .page-responsible-gambling .legal-meta {
    min-height: 280px;
    gap: var(--space-8);
    padding: var(--space-11) var(--space-9);
  }

  /* Оглавление (9:55): 32 + [19 + 16 + 611] + 32 = 710, пункты 17 с зазором 10 */
  .page-responsible-gambling .legal-toc {
    gap: var(--space-8);
    padding: var(--space-11) var(--space-9);
  }
  .page-responsible-gambling .legal-toc__list { gap: 10px; }
  .page-responsible-gambling .legal-toc__list li { min-height: 17px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Legal-страницы @390 — у каждой свой мобильный фрейм со своими числами
   (9:477 terms, 13:4 privacy, 11:4 cookie), поэтому профиль задаётся
   по классу страницы, а не общим шаблоном.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Terms (9:494 / 9:501): hero 221, полоса реквизитов 112 */
  .page-terms-and-conditions .legal-hero {
    min-height: 221px;
    gap: var(--space-8);
    padding: var(--space-11) var(--space-9);
  }
  .page-terms-and-conditions .legal-meta {
    min-height: 112px;
    gap: var(--space-6);
    padding: var(--space-8) var(--gutter-mobile);
  }

  /* Privacy (13:23 / 13:30 / 13:35 / 13:50): hero 242, реквизиты 120,
     обзор 556, оглавление 565 */
  .page-privacy-policy .legal-hero {
    min-height: 242px;
    gap: var(--space-8);
    padding: var(--space-13) var(--gutter-mobile);
  }
  .page-privacy-policy .legal-meta {
    min-height: 120px;
    gap: var(--space-4);
    padding: var(--space-8) var(--gutter-mobile);
  }
  .page-privacy-policy .legal-glance {
    min-height: 556px;
    gap: var(--space-10);
    padding: var(--space-11) var(--gutter-mobile);
  }
  .page-privacy-policy .legal-toc {
    min-height: 565px;
    gap: var(--space-8);
    padding: var(--space-10) var(--gutter-mobile);
  }

  /* Cookie (11:21 / 11:27 / 11:43): hero 469, реквизиты 266, оглавление 590 */
  .page-cookie-policy .legal-hero {
    min-height: 469px;
    gap: var(--space-9);
    padding: var(--space-13) var(--space-9);
  }
  .page-cookie-policy .legal-meta {
    min-height: 266px;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-9);
  }
  .page-cookie-policy .legal-toc {
    min-height: 590px;
    gap: var(--space-10);
    padding: var(--space-11) var(--space-9);
  }
}

@media (max-width: 767px) {
  /* Privacy @390 (13:102): заголовок секции — строка 26 (номер 24/26 и
     название 18/20), зазор до текста 12, между секциями 24 + линия. */
  .page-privacy-policy .legal-section { gap: var(--space-6); }
  .page-privacy-policy .legal-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 26px;
    font-size: 18px;
    line-height: 20px;
  }
  .page-privacy-policy .legal-section__num { font-size: 24px; line-height: 26px; }
}

@media (max-width: 767px) {
  /* Terms @390 (9:601): заголовок-строка 30 (номер 28/30 + название 18/20),
     текст 14/21, зазор внутри секции 16, между секциями 40 с линией. */
  .page-terms-and-conditions .legal-section { gap: var(--space-8); }
  .page-terms-and-conditions .legal-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 30px;
    font-size: 18px;
    line-height: 20px;
  }
  .page-terms-and-conditions .legal-section__num { font-size: 28px; line-height: 30px; }
  .page-terms-and-conditions .legal-p { font-size: 14px; line-height: 21px; }
  .page-terms-and-conditions .legal-body { gap: var(--space-12); padding-block: var(--space-11) var(--space-13); }

  /* Responsible gambling @390 (9:130): номер 40/40, название 20/22,
     текст 15/24. */
  .page-responsible-gambling .legal-section { gap: var(--space-8); }
  .page-responsible-gambling .legal-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 40px;
    font-size: 20px;
    line-height: 22px;
  }
  .page-responsible-gambling .legal-section__num { font-size: 40px; line-height: 40px; }
  .page-responsible-gambling .legal-p { font-size: 15px; line-height: 24px; }

  /* Cookie @390 (11:85): заголовок-строка 26, текст 16/25.6 */
  .page-cookie-policy .legal-section { gap: var(--space-6); }
  .page-cookie-policy .legal-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 26px;
    font-size: 18px;
    line-height: 20px;
  }
  .page-cookie-policy .legal-section__num { font-size: 24px; line-height: 26px; }
  .page-cookie-policy .legal-p { font-size: 16px; line-height: 26px; }
}

@media (max-width: 767px) {
  /* Тело документа: зазор между секциями 40 (9:127, 9:600, 11:83) */
  .page-responsible-gambling .legal-body { gap: var(--space-12); padding-inline: var(--space-9); }
  .page-cookie-policy .legal-body { gap: var(--space-13); padding: var(--space-8) var(--space-9) var(--space-13); }
}

@media (max-width: 767px) {
  /* В мобильном фрейме RG (9:35 перед 9:48) блок инструментов стоит выше
     реквизитов документа — на десктопе порядок обратный. */
  .page-responsible-gambling main { display: flex; flex-direction: column; }
  .page-responsible-gambling .legal-quick { order: -1; }
  .page-responsible-gambling .legal-hero { order: -2; }
}

@media (max-width: 767px) {
  /* Колонка описания в строках контролов (4:700) — 266: узкий зазор до
     ссылки, иначе текст переносится лишней строкой. */
  .page-deposit-limits .dl-tool {
    grid-template-columns: minmax(0, 266px) auto;
    column-gap: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Рабочая область legal-страниц @1440 — у каждой свои колонки и отступы:
   terms 280 + 1160 без зазора, cookie 280 + 920 с зазором 80,
   RG 280 + зазор 80, privacy 260 + зазор 64.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-terms-and-conditions .legal-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }
  .page-terms-and-conditions .legal-toc { padding: var(--space-13) var(--space-10) var(--space-13) var(--space-12); }
  .page-terms-and-conditions .legal-body { padding: var(--space-13) var(--gutter) var(--space-15) var(--space-14); }

  .page-cookie-policy .legal-workspace {
    grid-template-columns: 280px minmax(0, 920px);
    gap: var(--space-15);
    padding: var(--space-15) var(--gutter) 120px;
  }

  .page-responsible-gambling .legal-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-15);
    padding: 60px var(--gutter) var(--space-15);
  }

  .page-privacy-policy .legal-workspace {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-14);
    padding: 0 var(--gutter) var(--space-15);
  }
}

@media (min-width: 1024px) {
  /* Ширина и межстрочный колонки текста берутся из своего фрейма:
     privacy 700/28, cookie 920/26, RG 720/25.6. */
  .page-privacy-policy .legal-p,
  .page-privacy-policy .legal-list { max-width: 700px; line-height: 28px; }
  .page-cookie-policy .legal-p,
  .page-cookie-policy .legal-list { max-width: 920px; line-height: 26px; }
  .page-responsible-gambling .legal-p,
  .page-responsible-gambling .legal-list { max-width: 720px; line-height: 26px; }
}

@media (min-width: 1024px) {
  /* Privacy @1440 (0:4528): секция с отступами 32 сверху и снизу, зазор
     внутри 20, между секциями — разделитель с полями 40 (0:4534). */
  .page-privacy-policy .legal-section { gap: var(--space-9); padding-block: var(--space-11); }
  .page-privacy-policy .legal-section + .legal-section { position: relative; margin-top: var(--space-15); }
  .page-privacy-policy .legal-section + .legal-section::before {
    content: "";
    position: absolute;
    inset: -40px 0 auto 0;
    height: 1px;
    background: var(--color-line-soft);
  }
  .page-privacy-policy .legal-body { gap: 0; }
  .page-privacy-policy .legal-section__title { min-height: 30px; }
}

@media (min-width: 1024px) {
  /* Terms @1440 (0:3822): колонка текста 760, зазор между секциями 64 */
  .page-terms-and-conditions .legal-p,
  .page-terms-and-conditions .legal-list { max-width: 760px; }
  .page-terms-and-conditions .legal-body { gap: var(--space-14); }

  /* Cookie @1440 (0:4209): колонка 920 без внутренних отступов */
  .page-cookie-policy .legal-body { gap: 56px; padding: 0; }

  /* RG @1440: тело справочника (0:3332) стоит на x 440 и внутренних полей
     не имеет — главы начинаются ровно с его края. Наши 48/64 сдвигали всю
     колонку текста на 64px вправо и сужали главы с 840 до 712. */
  .page-responsible-gambling .legal-body { padding: 0; }

  /* RG @1440 (0:3259): линия между главами — это отдельный ребёнок колонки
     (0:3354 и далее, 760×0), поэтому она отбита зазором 80 с ОБЕИХ сторон:
     между главами 160, а не 80. Замер: тело 9382 против 11177 в макете,
     из них 1520 — ровно 19 недостающих зазоров.
     Перед главами-плашками (0:3404, 0:3444, 0:3484) линии нет: там главы
     стоят вплотную через один зазор 80. */
  .page-responsible-gambling .legal-section + .legal-section:not(.legal-section--card) {
    position: relative;
    margin-top: var(--space-15);
  }
  .page-responsible-gambling .legal-section + .legal-section:not(.legal-section--card)::before {
    content: "";
    position: absolute;
    /* линия шириной 760 при главе 840 — правый край поджат на 80 */
    inset: -80px 80px auto 0;
    height: 1px;
    background: var(--color-line-soft);
  }
}


@media (max-width: 389px) {
  /* Ниже макетной ширины строка «номер + заголовок + статус» не влезает:
     статус переносится под заголовок, тексты сжимаются. */
  .page-betstop .bs-effect { grid-template-columns: auto minmax(0, 1fr); }
  .page-betstop .bs-effect__head { flex-wrap: wrap; min-width: 0; }
  .page-betstop .bs-effect__head .badge { max-width: 100%; }
  .page-betstop .bs-effect__text { min-width: 0; overflow-wrap: anywhere; }
}

/* Пустое состояние поиска по справке: в макете его нет, но без него
   фильтр молча показывает пустоту. Стилистика — карточки FAQ. */
.faq__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line-soft);
}

.faq__empty-title {
  font-family: var(--font-display);
  font-size: var(--fs-title-sm);
  line-height: var(--lh-title-sm);
}

.faq__empty-text { color: var(--color-muted); max-width: 60ch; }

/* ─────────────────────────────────────────────────────────────────────────
   Ниже макетной ширины (320–389): фиксированные ширины из макета распирают
   документ. Эталона здесь нет, задача одна — чтобы не появлялся
   горизонтальный скролл.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 389px) {
  /* Лента ближайших забегов прокручивается внутри себя, но её контейнер
     наследовал ширину содержимого. */
  .ntj,
  .ntj__rail {
    max-width: 100%;
    min-width: 0;
  }
  .ntj__rail { overflow-x: auto; }

  /* Водяной знак — декоративный слой, он не должен растягивать страницу. */
  .page-intro,
  .legal-hero,
  .about-hero,
  .help-hero,
  .sd-hero,
  .rg-section { overflow-x: clip; }

  /* Секции шагов: длинные слова и коды не должны выпирать наружу. */
  .hiw-step,
  .hiw-step__text,
  .hiw-step__head,
  .hiw-step__title,
  .hiw-step__lead {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Форма обратной связи: сетка секции должна сжиматься. */
  .contact,
  .contact-form,
  .contact-block,
  .contact-block .field,
  .contact-side { max-width: 100%; min-width: 0; }
}

@media (max-width: 389px) {
  /* Карточка участника: две кнопки по 120 плюс отступы не влезают в 320,
     поэтому кнопки коэффициентов делятся ровно и сжимаются. */
  .runners tbody tr { min-width: 0; }
  .runners tbody td { min-width: 0; }
  .runners .odds {
    min-width: 0;
    width: 100%;
    padding-inline: var(--space-4);
  }
  .runners .odds__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 389px) {
  /* Ниже макетной ширины плашки встают в колонку. Контейнер сохранял
     макетную высоту одной строки, и flex сжимал обе плашки до 13px —
     нажать по такой невозможно. */
  .explore__minis {
    height: auto;
    gap: var(--space-4);
  }
  .explore__minis .mini { flex: none; height: 37px; }
}

@media (min-width: 1024px) {
  /* Секция формы (0:2472): слева крупный номер 72, справа колонка
     заголовка и примечания (46) — шапка строкой, а не столбцом.
     Ниже поля с зазором 20, между шапкой и полями 32. */
  .contact-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-10);
    row-gap: var(--space-9);
    align-items: center;
  }
  .contact-block > legend { display: none; }
  .contact-block__num {
    grid-column: 1;
    grid-row: 1;
    min-height: 72px;
    font-size: 72px;
    line-height: 72px;
  }
  .contact-block__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .contact-block__note {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 30px;
  }
  .contact-block .field,
  .contact-block .field-row { grid-column: 1 / -1; }
  .contact-block .field + .field { margin-top: calc(var(--space-9) * -1 + var(--space-9)); }
}

@media (min-width: 1024px) {
  /* Между секциями формы (0:2471) зазор 48 и линия нулевой высоты,
     которая съедает ещё один зазор — фактически 96. Замыкающая линия
     под подвалом формы тоже со своим зазором. */
  .contact-form { gap: var(--space-13); min-height: 1339px; }
  .contact-form .contact-block + .contact-block { position: relative; }
  .contact-form .contact-block + .contact-block::before {
    content: "";
    position: absolute;
    inset: -24px 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-ink) 15%, transparent);
  }
  .contact-form__foot { position: relative; padding-bottom: var(--space-13); }
  .contact-form__foot::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-ink) 15%, transparent);
  }
}

@media (max-width: 767px) {
  /* Зоны панели помощи (4:658, 4:663, 4:669): 83 / 99 / 83 при зазоре 8.
     Заголовок 14/15, текст 12/18, ссылка 12/16, телефон 28/30. */
  .page-deposit-limits .dl-rail__card { gap: var(--space-4); }
  .page-deposit-limits .dl-rail__title { font-size: 14px; line-height: 15px; }
  .page-deposit-limits .dl-rail__text { font-size: 12px; line-height: 18px; }
  .page-deposit-limits .dl-rail__card a { font-size: 12px; line-height: 16px; }
  .page-deposit-limits .dl-rail__phone { font-size: 28px; line-height: 30px; }
  .page-deposit-limits .dl-rail__card:nth-of-type(1) { min-height: 83px; }
  .page-deposit-limits .dl-rail__card:nth-of-type(2) { min-height: 99px; }
  .page-deposit-limits .dl-rail__card:nth-of-type(3) { min-height: 83px; }
}

@media (max-width: 767px) {
  /* Зона помощи (4:663): подпись 11/14, номер 28/30, приписка 12/16 */
  .page-deposit-limits .dl-rail__meta { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .dl-rail__phone { font-size: 28px; line-height: 30px; min-height: 30px; }
  .page-deposit-limits .dl-rail__card:nth-of-type(2) .dl-rail__text { font-size: 12px; line-height: 16px; }
}

@media (max-width: 767px) {
  /* Строка контроля (4:701): заголовок 14/15, описание 12/16, зазор 2 */
  .page-deposit-limits .dl-tool__text { gap: 2px; }
  .page-deposit-limits .dl-tool__title { font-size: 14px; line-height: 15px; }
  .page-deposit-limits .dl-tool__text p:last-child,
  .page-deposit-limits .dl-tool__desc { font-size: 12px; line-height: 16px; }

  /* Шапка шагов (4:677): кикер 11/14 + 4 + заголовок 24/26 в две строки */
  .page-deposit-limits .dl-how__head { gap: 4px; }
  .page-deposit-limits .dl-how__kicker { font-size: 11px; line-height: 14px; }
  .page-deposit-limits .dl-how__title { font-size: 24px; line-height: 26px; }
}

@media (max-width: 767px) {
  /* Зоны панели помощи в макете — простые группы без собственных отступов:
     поля держит сама панель (4:657). Внутренний padding добавлял по 40. */
  .page-deposit-limits .dl-rail__card { padding: 0; }
}

@media (max-width: 767px) {
  /* Шаг (4:681): номер 36/39, заголовок 16/17, описание 13/18 — 108 при
     зазоре 8. У нас номер был 52, заголовок 20, описание 40. */
  .page-deposit-limits .dl-step__num { font-size: 36px; line-height: 39px; }
  .page-deposit-limits .dl-step__title { font-size: 16px; line-height: 17px; }
  .page-deposit-limits .dl-step__text { font-size: 13px; line-height: 18px; }
}

@media (max-width: 767px) {
  /* Между шагами (4:680) лежит линия нулевой высоты со своими зазорами 24 —
     фактический разрыв 48. */
  .page-deposit-limits .dl-step + .dl-step { position: relative; margin-top: var(--space-10); }
  .page-deposit-limits .dl-step + .dl-step::before {
    content: "";
    position: absolute;
    inset: -24px 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  }
}

@media (max-width: 767px) {
  /* Ответственная игра на how-it-works (3:395): интро 194 = кикер 14 + 12 +
     заголовок 96 + 12 + текст 60; ниже четыре строки по 95 без зазора,
     каждая с полем 16 сверху и снизу и линией-разделителем. */
  .page-how-it-works .rg-section { gap: 28px; padding: var(--space-13) var(--space-9); }
  .page-how-it-works .rg-section__intro { gap: var(--space-6); }
  .page-how-it-works .rg-section__kicker { font-size: 11px; line-height: 14px; }
  .page-how-it-works .rg-section__title { font-size: 28px; line-height: 32px; }
  .page-how-it-works .rg-section__lead { font-size: 14px; line-height: 19.6px; }
  .page-how-it-works .rg-section__grid { gap: 0; }
  .page-how-it-works .rg-card {
    min-height: 95px;
    gap: var(--space-4);
    padding: var(--space-8) 0;
    background: none;
    box-shadow: none;
  }
  .page-how-it-works .rg-card + .rg-card {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface) 90%, transparent);
  }
  .page-how-it-works .rg-card__title { font-size: 16px; line-height: 20px; }
  .page-how-it-works .rg-card__text { font-size: 13px; line-height: 18px; }
}

@media (max-width: 767px) {
  /* Демо-купон в шаге 3 (3:334): 357 = 20 + [20 + 87 + 64 + линия + 20 + 46]
     при зазоре 16. Оговорка 18+ в этом фрейме не показана — на странице она
     остаётся в полосе над шапкой, блоке ответственной игры и подвале. */
  .hiw-step--03 .slip { min-height: 357px; padding: var(--space-9); gap: var(--space-8); }
  .hiw-step--03 .slip__head { min-height: 20px; }
  .hiw-step--03 .slip__pick { min-height: 87px; gap: 10px; padding: var(--space-6); }
  .hiw-step--03 .slip__stake { min-height: 64px; gap: 6px; }
  .hiw-step--03 .slip__return { min-height: 20px; }
  .hiw-step--03 .slip__place { min-height: 46px; height: 46px; }
  .hiw-step--03 .slip__legal { display: none; }
  .hiw-step--03 .slip__rule {
    height: 1px;
    margin-bottom: -1px;
    border: 0;
    background: color-mix(in srgb, var(--color-surface) 15%, transparent);
  }
  .hiw-step--03 .slip__rule:first-of-type { display: none; }
}


/* Пустой результат поиска по оглавлению: в макете поля поиска нет вовсе,
   но оставлять фильтр без ответа нельзя. */
.legal-toc__empty {
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
  line-height: 18px;
}

@media (max-width: 767px) {
  /* Поля поиска по документу в мобильном фрейме нет, но контрол рабочий и
     полезен именно на узком экране. Ставим его в строку с заголовком —
     так он занимает высоту строки, а не отдельный блок. */
  .legal-toc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: center;
  }
  .legal-toc__title { grid-column: 1; }
  .legal-toc__search {
    grid-column: 2;
    height: 32px;
    min-height: 32px;
    padding-inline: var(--space-6);
    font-size: var(--fs-body-sm);
  }
  .legal-toc__list { grid-column: 1 / -1; }
}


/* Переключатель темы справки нужен только там, где он есть в макете —
   на мобильном фрейме (4:73). На широких экранах роль выбора играет
   сам список тем. */
.help-topics__select { display: none; }

@media (max-width: 767px) {
  .help-topics__select {
    display: block;
    width: 100%;
    height: 52px;
    padding-inline: var(--space-8);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-paper);
    box-shadow: inset 0 0 0 1.5px var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-ink);
  }
}

@media (max-width: 767px) {
  /* Ответственная игра на help-centre (4:228): 56 + [167 + 32 + 668] + 56.
     Интро 16 + 8 + 66 + 8 + 69; карточки 164 / 146 / 146 / 164 с зазором 16
     и внутренним полем 20. */
  .page-help-centre .rg-section { gap: var(--space-11); padding: 56px var(--space-9); }
  .page-help-centre .rg-section__intro { gap: var(--space-4); }
  .page-help-centre .rg-section__kicker { font-size: 12px; line-height: 16px; }
  .page-help-centre .rg-section__title { font-size: 30px; line-height: 32.64px; }
  .page-help-centre .rg-section__lead { font-size: 15px; line-height: 22.5px; }
  .page-help-centre .rg-section__grid { gap: var(--space-8); }
  .page-help-centre .rg-card { gap: var(--space-6); padding: var(--space-9); min-height: 146px; }
  .page-help-centre .rg-card:first-child,
  .page-help-centre .rg-card:last-child { min-height: 164px; }
}

@media (max-width: 767px) {
  /* Terms @390 (9:601): секция 347 = заголовок 30 + 16 + блок текста 285
     + 16 до линии. Абзацы внутри блока идут с зазором 12, а не 6. */
  .page-terms-and-conditions .legal-section { padding-bottom: var(--space-8); }
  .page-terms-and-conditions .legal-p + .legal-p,
  .page-terms-and-conditions .legal-p + .legal-list,
  .page-terms-and-conditions .legal-list + .legal-p { margin-top: -4px; }
}

@media (max-width: 767px) {
  /* Оглавление (9:522): пункты 17 с зазором 8 */
  .page-terms-and-conditions .legal-toc__list { gap: var(--space-4); }
  .page-terms-and-conditions .legal-toc__list li { min-height: 17px; }
}


@media (max-width: 767px) {
  /* Cookie @390 (11:84): секция 292 = заголовок 26 + 16 + текст 234 + 16
     до линии; зазор между абзацами тот же 16. */
  .page-cookie-policy .legal-section { padding-bottom: var(--space-8); }
}


@media (max-width: 767px) {
  /* Privacy @390: реквизиты (13:31) — четыре строки по 16 с зазором 8;
     карточки обзора (13:38) — 95, последняя 115, поле 16, зазор 8. */
  .page-privacy-policy .legal-meta__item { min-height: 16px; font-size: 12px; line-height: 16px; }
  .page-privacy-policy .legal-glance__title { font-size: 18px; line-height: 20px; }
  .page-privacy-policy .legal-glance__card { min-height: 95px; gap: var(--space-4); padding: var(--space-8); }
  .page-privacy-policy .legal-glance__card:last-child { min-height: 115px; }
  .page-privacy-policy .legal-glance__card-title { font-size: 14px; line-height: 17px; }
  .page-privacy-policy .legal-glance__card-text { font-size: 12px; line-height: 18px; }
}

@media (max-width: 767px) {
  /* Строки реквизитов privacy — 16 по высоте: подпись и значение внутри
     наследуют тот же межстрочный, иначе строка вырастает до 19. */
  .page-privacy-policy .legal-meta__item > * { font-size: 12px; line-height: 16px; }
}

@media (max-width: 767px) {
  /* Пункт списка в мобильных фреймах legal (9:135, 13:113, 11:96): маркер —
     точка, текст 14/21 с отступом 12 от маркера, между пунктами 12. */
  .page-responsible-gambling .legal-list,
  .page-privacy-policy .legal-list,
  .page-cookie-policy .legal-list { gap: var(--space-6); }

  .page-responsible-gambling .legal-list li {
    padding-left: 19px;
    font-size: 14px;
    line-height: 21px;
  }

  .page-privacy-policy .legal-list { gap: 10px; }
  .page-privacy-policy .legal-list li {
    padding-left: 13px;
    font-size: 14px;
    line-height: 22px;
  }

  .page-cookie-policy .legal-list li {
    padding-left: 17px;
    font-size: 16px;
    line-height: 25.6px;
  }

  .page-responsible-gambling .legal-list li::before,
  .page-privacy-policy .legal-list li::before,
  .page-cookie-policy .legal-list li::before {
    content: "\2022";
    top: 0;
    width: auto;
    height: auto;
    background: none;
    color: var(--color-brand);
    font-size: inherit;
    line-height: inherit;
  }
}

/* Нумерованный список в legal-документах: номера в макете идут отдельным
   слоем, поэтому рисуем их счётчиком, а не браузерным маркером. */
.legal-list--ordered { counter-reset: legal-step; }

.legal-list--ordered li::before {
  content: counter(legal-step) ".";
  counter-increment: legal-step;
  width: auto;
  height: auto;
  background: none;
  color: var(--color-brand);
  font-weight: var(--fw-extrabold);
}

/* Правило маркера-точки для мобильных профилей идёт ниже общего, поэтому
   нумерацию задаём с той же специфичностью и после него. */
.page-responsible-gambling .legal-list--ordered,
.page-privacy-policy .legal-list--ordered,
.page-cookie-policy .legal-list--ordered,
.page-terms-and-conditions .legal-list--ordered { counter-reset: legal-step; }

.page-responsible-gambling .legal-list--ordered li::before,
.page-privacy-policy .legal-list--ordered li::before,
.page-cookie-policy .legal-list--ordered li::before,
.page-terms-and-conditions .legal-list--ordered li::before {
  content: counter(legal-step) ".";
  counter-increment: legal-step;
  width: auto;
  height: auto;
  background: none;
  color: var(--color-brand);
  font-weight: var(--fw-extrabold);
}

@media (min-width: 1024px) {
  /* Списки на десктопе: размеры и ширина колонки берутся из своего фрейма.
     RG (0:3339) — 15/22.5, текст 680 при отступе 19; cookie (0:4222) —
     16/26, текст 903 при отступе 17; privacy — 16/28, как её абзацы. */
  .page-responsible-gambling .legal-list li {
    max-width: 699px;
    padding-left: 19px;
    font-size: 15px;
    line-height: 22.5px;
  }
  .page-responsible-gambling .legal-list { gap: var(--space-8); }

  .page-cookie-policy .legal-list li {
    max-width: 920px;
    padding-left: 17px;
    font-size: 16px;
    line-height: 26px;
  }

  .page-privacy-policy .legal-list li {
    max-width: 700px;
    font-size: 16px;
    line-height: 28px;
  }
}

@media (min-width: 1024px) {
  /* Заголовок главы RG (0:3334): крупный номер и название в одной строке,
     блок 72 по высоте, зазор до текста 16. */
  .page-responsible-gambling .legal-section { gap: var(--space-8); }
  .page-responsible-gambling .legal-section__title {
    display: flex;
    align-items: flex-end;
    gap: var(--space-6);
    min-height: 72px;
    font-size: 28px;
    line-height: 30px;
  }
  .page-responsible-gambling .legal-section__num {
    font-size: 72px;
    line-height: 72px;
  }
}

@media (max-width: 767px) {
  /* Два поля в ряд на 390 дают колонку ~140px: подпись «New limit (AUD)»
     с отметкой обязательности переносится и рвётся. На узком экране
     ставим поля друг под другом — и подписи целые, и попадать пальцем легче. */
  .page-deposit-limits .dl-form .field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Кнопка возврата к настройкам cookie в подвале: выглядит как ссылка,
   потому что рядом стоят ссылки, но остаётся кнопкой — она открывает
   панель, а не ведёт на адрес. */


.site-footer__prefs-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: .75;
}

.site-footer__prefs-btn:hover { opacity: 1; }

/* ── Режим высокой контрастности ─────────────────────────────────────────
   Система заменяет цвета своими и убирает фоны с тенями. Наши кнопки,
   поля и вкладки нарисованы фоном и inset-тенью — в этом режиме они
   превращались в обычный текст, и понять, что по ним можно нажать, было
   нельзя. Рисуем границы явно; на обычный режим это не влияет, поэтому
   пиксельная сверка не затрагивается. */
@media (forced-colors: active) {
  .btn,
  .tab,
  .odds,
  .mini,
  .race-chip,
  .market-switch,
  .field__input,
  .help-search__input,
  .help-search__tag,
  .slip__place,
  .help-topic,
  .site-footer__prefs-btn {
    border: 1px solid currentColor;
  }

  /* Активное состояние вкладок и чипов в макете передано только заливкой —
     здесь её не будет, поэтому помечаем ещё и подчёркиванием. */
  .tab.is-active,
  .race-chip.is-active,
  .market-switch.is-active,
  .help-topic.is-active,
  [aria-selected="true"] {
    border-width: 2px;
    text-decoration: underline;
  }

  /* Кольцо фокуса системное — не перекрываем его своим цветом. */
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}


/* Мобильные фреймы задают этим секциям свою заливку, десктопные — нет.
   Различие настоящее: 0:6291 бежевая доска, 0:7251 белое сравнение. */
@media (max-width: 767px) {
  /* 0:6306 the-board-section — на мобильном фрейме доска лежит на бежевом */
  .page-sports .betting__list { background: var(--color-paper); }
  .sd-compare { background: var(--color-surface); }
}


@media (max-width: 767px) {
  /* 0:6665 — горизонтальный скроллер из четырёх карточек */
  .ntj__rail { grid-template-columns: repeat(4, 150px); }
}


@media (max-width: 767px) {
  /* 4:428 — на мобильном пункты идут колонкой, значок 28, разделители
     горизонтальные во всю ширину при прозрачности 0.15 */
  .routing { gap: var(--space-10); padding: var(--space-11) var(--space-9); }
  .routing__label { font-size: 12px; line-height: 13px; }
  .routing__list { flex-direction: column; align-items: stretch; gap: var(--space-9); }
  .routing__item + .routing__item::before {
    position: static;
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: var(--space-9);
    translate: none;
    opacity: .15;
  }
  .routing__mark { width: 28px; height: 28px; font-size: 12px; line-height: 16px; }
  .routing__title { font-size: 13px; line-height: 14px; }
}


/* 0:2104 — группа поиска: подпись, плашка и теги с зазором 20 */
.help-search { gap: var(--space-9); }
.help-search__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }


@media (max-width: 767px) {
  /* 0:5799 — на мобильном фрейме шапка держит вход и регистрацию рядом с
     бургером: «LOG IN» 13/16.9, кнопка 61×29 при паддинге 6/14. */
  .site-header__actions { gap: var(--space-6); }
  .site-header__login { font-size: 13px; line-height: 17px; }
  .site-header__actions .btn--sm { min-height: 29px; padding: 6px 14px; font-size: 13px; line-height: 17px; }
}


/* 0:2479 — поле формы обращений: подпись 16, зазор 8, плашка 52
   (14/16 паддинг при строке 20). У нас было 17 + 6 + 48. */
/* Нумерация секций формы разноцветная (0:2474 / 0:2495 / 0:2522 и те же
   узлы мобильного фрейма): 01 красный, 02 оранжевый, 03 чернильный.
   Пиксельная сверка этого не видит — боксы не смотрят на цвет. */
.contact-block:nth-of-type(2) .contact-block__num { color: var(--color-amber); }
.contact-block:nth-of-type(3) .contact-block__num { color: var(--color-ink); }

/* 0:2481 / 4:462 — подписи полей формы капсом, Geist 900 12/16 */
.contact-form .field > .field__label,
.contact-form .field__row .field__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

/* 0:2482 / 4:463 — поле 52 высотой, текст 14/18, обводка 2px (в общем
   компоненте 1.5px — на кремовом фоне разница видна как более тонкая рамка) */
.contact-form .field__input {
  min-height: 52px;
  padding: 16px;
  line-height: 18px;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

.contact-form .field__input:hover { box-shadow: inset 0 0 0 2px var(--color-ink-hover); }
.contact-form .field__input--area { min-height: 160px; }

/* 4:493 — бейдж «optional» обведён рамкой и набран чернильным, а не серым */
.contact-form .field__optional {
  padding: 2px 6px;
  border: 1px solid var(--color-ink);
  border-radius: 4px;
  background: var(--color-paper);
  font-size: 9px;
  line-height: 12px;
  color: var(--color-ink);
}

/* 0:2500 — имя и почта в одну строку с зазором 20; ниже 767 колонкой */
.contact-form .field-row { display: flex; gap: var(--space-9); }
.contact-form .field-row > .field { flex: 1; min-width: 0; }

@media (max-width: 767px) {
  .contact-form .field-row { flex-direction: column; gap: var(--space-8); }
}

/* 4:491 — бейдж стоит вплотную к подписи, а не у правого края */
.field__row--tight { justify-content: flex-start; gap: var(--space-4); align-items: center; }

.contact-form .field { gap: var(--space-4); }


/* Макет этой страницы противоречит сам себе: высота секции 1579 не сходится
   с координатой следующей полосы (2060 при начале 561) — расхождение 80px.
   Поля и шапки внутри приведены к макету точно, а неувязку поглощаем нижним
   паддингом секции, чтобы полосы и подвал встали на свои места. */
.page-contact-us .contact { padding-bottom: 10px; }


@media (max-width: 767px) {
  /* 4:266 — бейдж и заголовок в одну строку это фрейм HELP-CENTRE, а не
     главной: узел лежит в mightybet-help-centre-mobile. На остальных
     мобильных фреймах (4:555, 10:353, 12:487 и родня) это колонка с
     зазором 8. Поле 20 стоит на самой полосе — второе поле на внутреннем
     блоке давало контент 310 вместо макетных 350 и лишний перенос. */
  .strips-help .betstop-strip__lead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-5);
    row-gap: var(--space-6);
  }
  .strips-help .betstop-strip__lead .badge { grid-column: 1; grid-row: 1; }
  .strips-help .betstop-strip__title { grid-column: 2; grid-row: 1; }
  .strips-help .betstop-strip__note { grid-column: 1 / -1; grid-row: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Справочник Responsible Gambling: роли текста и блоки главы.

   В макете глава — не сплошной текст: вводный абзац набран чернилами
   крупнее тела, тело приглушённым, подразделы Archivo Narrow, а телефон
   помощи, возрастной бейдж, тег BetStop и ссылка наружу — отдельные
   блоки. Мы переносили всё это обычным `<p>` одного размера: справочник
   был на 1811px короче макета, читался как стена текста, а на тёмных
   плашках приглушённый цвет ложился на тёмный фон.

   Числа: 0:3332 (1440) и 9:127 (390). Оба набора живут в своих
   медиазапросах — правило без медиазапроса здесь уже дважды перебивало
   мобильные значения.
   ═══════════════════════════════════════════════════════════════════════ */

/* Блоки, у которых форма не зависит от ширины */
.legal-sub { display: flex; flex-direction: column; }
.legal-subs { display: flex; flex-direction: column; }
.legal-panel { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--color-paper); }
.legal-panel__phone { display: block; text-decoration: none; font-family: var(--font-display); font-weight: var(--fw-regular); color: var(--color-brand); }
.legal-panel__phone:hover { text-decoration: underline; }
.legal-panel__title { font-family: var(--font-narrow); font-weight: var(--fw-bold); color: var(--color-ink); }
.legal-panel__note { font-weight: var(--fw-bold); color: var(--color-muted); }
.legal-badge,
.legal-tag,
.legal-cta { align-self: flex-start; }
.legal-badge {
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-display);
}
.legal-tag {
  border-radius: var(--radius);
  background: var(--color-brand);
  color: var(--color-surface);
  font-family: var(--font-narrow);
  font-weight: var(--fw-bold);
}
.legal-cta { text-decoration: none; color: var(--color-brand-text); font-weight: var(--fw-black); }
.legal-cta:hover { text-decoration: underline; }
.legal-sub__title { font-family: var(--font-narrow); font-weight: var(--fw-bold); color: var(--color-ink); }

/* ── 1440: числа фрейма 0:3332 ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* 0:3337 — вводный абзац 16/25.6 чернилами; 0:3421 — тело 15/24
     приглушённым; 0:3423 — акцент Geist 700 чернилами. */
  .page-responsible-gambling .legal-p { font-size: 15px; line-height: 24px; color: var(--color-muted); }
  .page-responsible-gambling .legal-p--lead { font-size: 16px; line-height: 26px; color: var(--color-ink); }
  .page-responsible-gambling .legal-p--strong { font-weight: var(--fw-bold); color: var(--color-ink); }
  .page-responsible-gambling .legal-p--note { font-size: 14px; line-height: 21px; }
  /* 0:3546 — предупреждение красным; 15px/700 не крупный текст по WCAG,
     поэтому затемнённый брендовый (4.5:1), как везде на сайте. */
  .page-responsible-gambling .legal-p--alert { font-weight: var(--fw-bold); color: var(--color-brand-text); }

  /* 0:3381 и 0:3574 — у этих глав вводный абзац набран плотнее */
  .page-responsible-gambling #how-to-gamble-responsibly .legal-p--lead { line-height: 20.8px; }
  .page-responsible-gambling #activity-statements .legal-p--lead,
  .page-responsible-gambling #check-in-with-yourself .legal-p--lead { font-size: 15px; line-height: 19.5px; }

  /* Зазор внутри главы: 16 у простых, 24 у глав с блоком, 32 у главы
     с группой подразделов (0:3355). Общий хак «абзац + абзац = −10»
     здесь не нужен: в макете абзацы стоят через тот же зазор главы. */
  .page-responsible-gambling .legal-section { gap: var(--space-8); }
  .page-responsible-gambling .legal-section--rich { gap: var(--space-10); }
  .page-responsible-gambling .legal-section:has(.legal-subs) { gap: var(--space-11); }
  /* 0:3444 — у глав-плашек зазор всегда как у «богатых»: 24 на 1440 */
  .page-responsible-gambling .legal-section--card { gap: var(--space-10); }
  .page-responsible-gambling .legal-section .legal-p + .legal-p { margin-top: 0; }

  /* 0:3361 — подраздел: заголовок Archivo Narrow 18/24.25 и текст 15/24,
     зазор 8; между подразделами 28. */
  .page-responsible-gambling .legal-sub { gap: var(--space-4); }
  .page-responsible-gambling .legal-subs { gap: 28px; }
  .page-responsible-gambling .legal-sub__title { font-size: 18px; line-height: 24.25px; }
  .page-responsible-gambling .legal-sub__text {
    max-width: 720px;
    font-size: 15px;
    line-height: 24px;
    color: var(--color-muted);
  }

  /* 0:3409 — плашка помощи: паддинг 24, зазор 12, номер Archivo Black 32 */
  .page-responsible-gambling .legal-panel { gap: var(--space-6); padding: var(--space-10); }
  .page-responsible-gambling .legal-panel__title { font-size: 18px; line-height: 24.25px; }
  .page-responsible-gambling .legal-panel__phone { font-size: 32px; line-height: 34.82px; }
  .page-responsible-gambling .legal-panel__note { font-size: 14px; line-height: 18.2px; }
  /* 0:3598 — вторая плашка меньше */
  .page-responsible-gambling .legal-panel--sm { gap: var(--space-4); padding: var(--space-9); }
  .page-responsible-gambling .legal-panel--sm .legal-panel__title { font-size: 16px; line-height: 21.55px; }
  .page-responsible-gambling .legal-panel--sm .legal-panel__phone { font-size: 24px; line-height: 26.11px; }

  /* 0:3334 — колонка номера главы 97 шириной, зазор до заголовка 16.
     Без фиксированной ширины «11» и «22» набираются уже «08», и заголовок
     каждой главы стоит на своём месте — по строке заголовка это до 4px. */
  .page-responsible-gambling .legal-section__num { min-width: 97px; }

  /* 0:3419 — возрастной бейдж 80×42; 0:3463 — тег BetStop; 0:3468 — ссылка */
  .page-responsible-gambling .legal-badge { padding: var(--space-4) var(--space-8); font-size: 24px; line-height: 26.11px; }
  .page-responsible-gambling .legal-tag { padding: var(--space-2) var(--space-4); font-size: 12px; line-height: 16.16px; }
  .page-responsible-gambling .legal-cta { font-size: 15px; line-height: 19.5px; }

  /* 0:3339 — пункт списка: точка Geist 800 красным, текст 15/22.5,
     отступ 12 от маркера, между пунктами 12. Раньше стоял дефис-черта
     и текст 16/25.6. */
  .page-responsible-gambling .legal-list li {
    padding-left: 19px;
    font-size: 15px;
    color: var(--color-muted);
  }
  .page-responsible-gambling .legal-list li::before {
    content: "\2022";
    top: 0;
    width: auto;
    height: auto;
    background: none;
    color: var(--color-brand);
    font-weight: var(--fw-extrabold);
    font-size: 16px;
    line-height: 20.8px;
  }
  /* 0:3576 — короткие пункты «что показывает счёт» плотнее */
  .page-responsible-gambling .legal-list--tight li { line-height: 19.5px; }
  /* 0:3383 — строка нумерованного списка отбита паддингом 4 сверху и снизу */
  .page-responsible-gambling .legal-list--ordered li { padding-block: var(--space-2); }
  /* 0:3525 — вопросы разделены линиями, текст чернильный, отступы 8 */
  .page-responsible-gambling .legal-list--questions { gap: var(--space-8); }
  .page-responsible-gambling .legal-list--questions li {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line-soft);
    color: var(--color-ink);
  }

  /* Тёмные плашки (0:3404, 0:3444): текст кремовый, акцент коралловый —
     приглушённый цвет тела на чернильном фоне не читается вовсе. */
  .page-responsible-gambling .legal-section--ink .legal-p { color: var(--color-surface); }
  .page-responsible-gambling .legal-section--ink .legal-p--note { opacity: .8; }
  .page-responsible-gambling .legal-section--ink .legal-p--strong { color: var(--color-flame); }
  /* 0:3488 / 0:3517 — на кремовой плашке ввод и вывод набраны жирнее */
  .page-responsible-gambling .legal-section--paper .legal-p--lead { font-weight: var(--fw-bold); line-height: 20.8px; }
  .page-responsible-gambling .legal-section--paper .legal-p--strong { font-weight: var(--fw-extrabold); }
}

/* ── 390: числа фрейма 9:127 ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 9:133 — ввод 15/24 чернилами, 9:159 — тело 14/22.4 приглушённым */
  .page-responsible-gambling .legal-p { font-size: 14px; line-height: 22px; color: var(--color-muted); }
  .page-responsible-gambling .legal-p--lead { font-size: 15px; line-height: 24px; color: var(--color-ink); }
  .page-responsible-gambling .legal-p--strong { font-weight: var(--fw-bold); color: var(--color-ink); }
  /* 9:209 — закрывающая строка на тёмной плашке 13/19.5 */
  .page-responsible-gambling .legal-p--note { font-size: 13px; line-height: 19.5px; }
  .page-responsible-gambling .legal-p--alert { font-weight: var(--fw-bold); color: var(--color-brand-text); }

  /* 9:200 / 9:240 / 9:280 — на мобильном фрейме плашка главы имеет паддинг
     20, а не 40: при 40 колонка текста сужалась с 310 до 270 и главы-плашки
     вырастали на сотню пикселей каждая. */
  .page-responsible-gambling .legal-section--card { padding: var(--space-9); }

  /* 9:150 и далее — линия между главами и на мобильном отдельный ребёнок:
     40 до неё и 40 после. Плюс распорки 9:128 (24) и 9:425 (40) по краям
     тела: с зазором 40 это 64 сверху и 80 снизу. */
  .page-responsible-gambling .legal-body { padding: 64px var(--space-9) 80px; }
  .page-responsible-gambling .legal-section + .legal-section:not(.legal-section--card) {
    position: relative;
    margin-top: var(--space-12);
  }
  .page-responsible-gambling .legal-section + .legal-section:not(.legal-section--card)::before {
    content: "";
    position: absolute;
    inset: -40px 0 auto 0;
    height: 1px;
    background: var(--color-line-soft);
  }

  /* 9:221 — простые главы 12, 9:129 — главы с блоком 16 */
  .page-responsible-gambling .legal-section { gap: var(--space-6); }
  .page-responsible-gambling .legal-section--rich,
  .page-responsible-gambling .legal-section:has(.legal-subs) { gap: var(--space-8); }
  /* 9:240 — и на мобильном: 16, а не 12 */
  .page-responsible-gambling .legal-section--card { gap: var(--space-8); }
  .page-responsible-gambling .legal-section .legal-p + .legal-p { margin-top: 0; }

  /* 9:157 — подраздел: заголовок 16/21.55, текст 14/22.4, зазор 8;
     между подразделами 20 (9:156) */
  .page-responsible-gambling .legal-sub { gap: var(--space-4); }
  .page-responsible-gambling .legal-subs { gap: var(--space-9); }
  .page-responsible-gambling .legal-sub__title { font-size: 16px; line-height: 21.55px; }
  .page-responsible-gambling .legal-sub__text { font-size: 14px; line-height: 22px; color: var(--color-muted); }

  /* 9:205 — плашка помощи: паддинг 16, зазор 8, номер 26/28.29 */
  .page-responsible-gambling .legal-panel { gap: var(--space-4); padding: var(--space-8); }
  .page-responsible-gambling .legal-panel__title { font-size: 16px; line-height: 21.55px; }
  .page-responsible-gambling .legal-panel__phone { font-size: 26px; line-height: 28.29px; }
  .page-responsible-gambling .legal-panel__note { font-size: 12px; line-height: 15.6px; }
  .page-responsible-gambling .legal-panel--sm { padding: var(--space-8); }
  .page-responsible-gambling .legal-panel--sm .legal-panel__phone { font-size: 24px; line-height: 26.11px; }

  /* 9:413 — колонка номера 54, зазор до заголовка 12 (а не 16):
     из-за лишних 4px вся строка заголовка стояла правее макетной. */
  .page-responsible-gambling .legal-section__title { gap: var(--space-6); }
  .page-responsible-gambling .legal-section__num { min-width: 54px; }

  /* 9:216 — бейдж 20/21.76, 9:260 — тег, 9:264 — ссылка 14/18.2 */
  .page-responsible-gambling .legal-badge { padding: var(--space-4) var(--space-8); font-size: 20px; line-height: 21.76px; }
  .page-responsible-gambling .legal-tag { padding: var(--space-2) var(--space-4); font-size: 12px; line-height: 16.16px; }
  .page-responsible-gambling .legal-cta { font-size: 14px; line-height: 18.2px; }

  /* 9:177 / 9:319 / 9:370 — вводные абзацы этих глав набраны плотнее */
  .page-responsible-gambling #how-to-gamble-responsibly .legal-p--lead { font-size: 15px; line-height: 19.5px; }
  .page-responsible-gambling #check-in-with-yourself .legal-p--lead,
  .page-responsible-gambling #activity-statements .legal-p--lead { font-size: 14px; line-height: 18.2px; }

  /* 9:178 — нумерованный список: зазор 10, строка с паддингом 4;
     9:320 — вопросы с зазором 8; 9:371 — короткие пункты с зазором 10. */
  .page-responsible-gambling .legal-list--ordered { gap: var(--space-5); }
  .page-responsible-gambling .legal-list--ordered li { padding-block: var(--space-2); }
  .page-responsible-gambling .legal-list--questions { gap: var(--space-4); }
  .page-responsible-gambling .legal-list--tight { gap: var(--space-5); }

  /* 9:341 — вопросы 14/21 чернилами с разделителями */
  .page-responsible-gambling .legal-list--questions li {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line-soft);
    color: var(--color-ink);
  }

  .page-responsible-gambling .legal-section--ink .legal-p { color: var(--color-surface); }
  .page-responsible-gambling .legal-section--ink .legal-p--note { opacity: .8; }
  .page-responsible-gambling .legal-section--ink .legal-p--strong { color: var(--color-flame); }
  /* 9:284 — на кремовой плашке ввод Geist 700 15/19.5 */
  .page-responsible-gambling .legal-section--paper .legal-p--lead { font-weight: var(--fw-bold); font-size: 15px; line-height: 19.5px; }
  .page-responsible-gambling .legal-section--paper .legal-p--strong { font-weight: var(--fw-extrabold); }
}

/* ── Экраны уже 360: колонка плиток 106px, и «FOOTBALL» 18px встаёт ровно на
   границу и рвётся как FOOTBAL/L. Раскладку не трогаем (на 360–389 плитки
   по две в ряд, как в макете), уменьшаем только кегль подписи. ───────────── */
@media (max-width: 359px) {
  /* На 320 группа справа ужимается до 132px и «Log in» переносится в две
     строки, разрывая шапку. Запрещаем перенос — надпись короткая. */
  .site-header__login { white-space: nowrap; }
  /* Без переноса группа справа перестала сжиматься и дала 325px при 320.
     Забираем недостающие 8px из зазоров, а не из тап-зон. */
  .site-header__actions { gap: 8px; }
  .site-header__inner { gap: 8px; }

  /* «AUSTRALIAN» при 40px шире колонки 280 и рвётся как AUSTRALI/AN.
     Ниже 360 уменьшаем кегль заголовка героя — раскладку это не трогает. */
  /* Селектор с .page-about-us: правило страницы выше по файлу задаёт 44px
     с той же специфичностью+1, и голый .about-hero__title его не перебивает. */
  .page-about-us .about-hero__title { font-size: 32px; line-height: 36px; }

  .tile--nrl .tile__title,
  .tile--football .tile__title { font-size: 16px; line-height: 18px; }
}