/* Переиспользуемые части: пилюли, кнопки, поля, карточки, оверлеи.
 * Числа из макета. Состояния (hover, focus, active, disabled, error) в макете
 * не нарисованы — достроены в его логике и обязательны.
 */

/* ── пилюля ───────────────────────────────────────────────────────────── */
/* Базовый элемент интерфейса макета: тёмная плашка со скруглением 999. */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-6) var(--space-10);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); line-height: 15px;
  color: var(--color-text-strong);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
a.pill:hover, button.pill:hover { border-color: var(--color-accent); }
/* Подписи внутри пилюли: в макете они полужирные, приглушённая — обычная. */
.pill > span { font-weight: 700; }
.pill > span.pill__muted { font-weight: 400; color: var(--color-text-muted); }
.pill__mono  { font-family: var(--font-mono); font-weight: 700; line-height: 16px; }

/* «18+ Australians only» в верхнем баре — та же пилюля, но плотнее. */
.pill--age {
  padding: var(--space-4) var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 14.3px;
  color: var(--color-text-strong);
}

/* ── кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-10) var(--space-16);
  border: 1px solid transparent; border-radius: var(--radius-10);
  background: transparent; color: inherit;
  font-size: var(--fs-body); font-weight: 700; line-height: 17px; letter-spacing: .5px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* Join Now: лайм на тёмном, радиус 10, паддинг 10/18 — числа макета. */
.btn--primary {
  padding: var(--space-10) 18px;
  border: 0;                       /* в макете рамки нет, она добавляла 2px высоты */
  background: var(--color-accent); color: var(--color-on-accent);
}
.btn--primary:hover  { background: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-active); }

/* Log In: в макете это просто текст, поэтому «кнопка» без рамки и фона. */
/* «Log In» в макете — просто текст: ни рамки, ни вертикального паддинга. */
.btn--ghost { padding: 0; border: 0; color: var(--color-text); }
.btn--ghost:hover { color: var(--color-text-strong); }

/* Тёмная кнопка на светлой секции. */
.btn--dark { background: var(--color-text-dark); color: var(--color-text-strong); }
.btn--dark:hover { background: var(--color-panel); }

.btn--block { width: 100%; }

/* ── купон в шапке ────────────────────────────────────────────────────── */
.bet-slip {
  display: inline-flex; align-items: center; justify-content: center;
  /* Кнопка не сжимается родителем. У её <li> и у .nav__list стоят
     flex-shrink: 1 и min-width: 0, поэтому при нехватке места в строке шапки
     флекс имел право ужать кнопку — тогда счётчик и подпись налезали на края. */
  flex: 0 0 auto;
  width: fit-content;
  /* Содержимое уменьшено на треть, высота подтянута следом, чтобы поля вокруг
     остались соразмерными: 40 = 19 (счётчик) + 10.5 сверху и снизу. */
  height: 40px;
  gap: var(--space-8);
  padding: 0 var(--space-12);
  box-sizing: border-box;
  background: var(--color-panel);
  /* Обводка внутренней тенью, а не border: в макете strokeAlign у неё INSIDE —
     штрих рисуется поверх и места не занимает. CSS-border съедал по пикселю с
     каждой стороны и делал поля несимметричными относительно макета. */
  box-shadow: inset 0 0 0 1px var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-strong); text-decoration: none;
  font-size: 11px; font-weight: 800; line-height: 16px; white-space: nowrap;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.bet-slip:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* Ничто внутри не сжимается и не переносится: иконка, подпись и счётчик
   сохраняют свои размеры, а ширину кнопки задаёт их сумма. */
.bet-slip > * { flex: 0 0 auto; }

.bet-slip .bet-slip__icon {
  /* Двойной селектор обязателен: общее правило .icon ниже по файлу задаёт 1em,
     при кегле кнопки это 13px, и при равной специфичности побеждает оно.
     Цвет — лайм, как обводка вектора 75:1566 в макете. */
  width: 12px; height: 12px;
  color: var(--color-accent);
}

.bet-slip__count {
  display: flex; align-items: center; justify-content: center;
  /* Настоящий круг: min-width равен height, поэтому одна цифра даёт ровно
     28x28. Две и более расширяют плашку в капсулу того же радиуса, а не в
     приплюснутый овал — прежние min-width:24 при высоте 20 кругом быть не
     могли ни при каком значении. */
  min-width: 19px; height: 19px;
  padding: 0 var(--space-6);
  box-sizing: border-box;
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10px; font-weight: 800; line-height: 1;
}

/* Мобильная шапка: подпись скрыта (правило в layout.css), кнопка ужимается до
   иконки и счётчика. Пропорции те же, круг остаётся кругом. */
@media (max-width: 767px) {
  .bet-slip { height: 30px; padding: 0 var(--space-10); gap: var(--space-6); }
  .bet-slip .bet-slip__icon { width: 11px; height: 11px; }
  .bet-slip__count {
    min-width: 15px; height: 15px;
    padding: 0 4px;
    font-size: 9px;
  }
}

/* ── бургер ───────────────────────────────────────────────────────────── */
.burger {
  width: 34px; height: 34px; padding: var(--space-8);
  background: var(--color-panel);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-strong); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.burger:hover { border-color: var(--color-accent); }
.burger__box { display: block; width: 18px; height: 18px; }

/* ── табы и фильтры ───────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.tab {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 var(--space-16);
  background: var(--color-panel-deep);
  border: 0; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 15px;
  color: var(--color-text); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab:hover { background: var(--color-panel); }
.tab--outlined { box-shadow: inset 0 0 0 1px var(--color-border); }
.tab[aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); }

/* В мобильном фрейме таб ниже: 31px против 36. */
@media (max-width: 767px) {
  .tab { height: 31px; padding: 0 var(--space-14, 14px); }
}

/* ── поля форм ────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--space-6); }
.field__label {
  font-size: var(--fs-xs); font-weight: 700; line-height: 15px;
  color: var(--color-text-muted);
}
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 0 var(--space-14, 14px);
  background: var(--color-panel);
  border: 1px solid var(--color-border); border-radius: var(--radius-10);
  color: var(--color-text-strong);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 120px; padding-block: var(--space-12); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-accent); box-shadow: var(--focus-ring); outline: none;
}
.field__hint  { font-size: var(--fs-2xs); line-height: 14px; color: var(--color-text-muted); }
.field__error { font-size: var(--fs-xs); line-height: 15px; color: var(--color-error); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-error); }

/* Чекбокс — тоже поле: подпись стоит рядом с боксом, и правило-контейнер
   вида `.field label{display:block}` не должно это перебивать. */
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-8); }
.field--check .field__label { display: inline; font-weight: 400; color: var(--color-text); }
/* Сам бокс — не текстовое поле: правило .field input выше задаёт ему width:100%
   и min-height:44px, а .auth .field input — ещё и 48px, из-за чего чекбокс
   растягивался на всю высоту строки и уезжал вниз от своей подписи. Двойной
   класс нужен, чтобы перебить .auth .field input (0,2,1) — у него та же
   специфичность, но auth.css подключается позже. */
.field.field--check input[type="checkbox"],
.field.field--check input[type="radio"] {
  width: 16px; height: 16px; min-height: 0;
  padding: 0; margin: 1px 0 0;      /* 1px — оптическое совмещение с первой строкой подписи */
  flex: none;
}

.form__error   { color: var(--color-error); }
.form__success { color: var(--color-success); }

/* Видно только при выключенном JavaScript: формы уходят через fetch, и без
   скрипта отправка не состоится. method="post" на них стоит, чтобы нативная
   отправка не утащила пароль в адресную строку. */
.form__noscript {
  margin: 0 0 var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-left: 3px solid var(--color-error);
  background: rgba(0, 0, 0, .04);
  color: var(--color-text);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.form__noscript a { color: inherit; }

/* Поля на светлой секции (формы контактов и лимитов нарисованы на #f5f3ef). */
.section--light .field input,
.section--light .field select,
.section--light .field textarea {
  background: var(--color-card); border-color: var(--color-border-light); color: var(--color-text-dark);
}
.section--light .field__label,
.card--light .field__label,
.form--light .field__label { color: var(--color-text-dark-muted); }

/* ── доступность: приглушённый текст на светлом ───────────────────────
   #94a3b8 и #9ca3af задуманы для тёмного фона; на белом и бежевом они дают
   2.3–2.6:1 при норме 4.5:1 (WCAG 1.4.3). Заменяются на #475569 — тот же
   приглушённый серо-синий из палитры макета, но читаемый (6.8:1). */
.section--light .board__count,
.section--light .board__time,
.section--light .board__meta,
.section--light .board__market-name,
.section--light .board__market-count,
.section--light .league__count,
.section--light .event__comp,
.section--light .event__market-name,
.section--light .event__market-count,
.section--light .promo-card__note,
.section--light .cf__note,
.section--light .cs__op-address,
.section--light .field__label,
.card--light .board__count,
.board .board__count,
.board .board__meta,
.board .board__market-name,
.board .board__market-count { color: var(--color-text-dark-muted); }

/* ── карточки ─────────────────────────────────────────────────────────── */
.card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-14);
  padding: var(--space-24);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card--light { background: var(--color-card); border-color: var(--color-border-light); color: var(--color-text-dark); }
a.card:hover, .card--interactive:hover { transform: translateY(-2px); border-color: var(--color-accent); }

/* Ссылка-стрелка «Explore →», «Learn more →», «View all». */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-size: var(--fs-sm); font-weight: 800; line-height: 16px;
  color: var(--color-accent); text-decoration: none;
  transition: gap var(--dur-fast) var(--ease);
}
.arrow-link:hover { gap: var(--space-10); }
.section--light .arrow-link { color: var(--color-text-dark); }

/* ── оверлеи: меню, cookie-панель, возрастной барьер ──────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-16);
  background: var(--scrim-75);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.overlay.is-open { opacity: 1; }
.overlay__panel {
  width: min(100%, 500px);
  max-height: 90vh; overflow: auto;
  background: var(--color-bg-light); color: var(--color-text-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  transform: translateY(8px);
  transition: transform var(--dur-slow) var(--ease);
}
.overlay.is-open .overlay__panel { transform: none; }

/* Возрастной барьер: свой слой поверх всего и никакого закрытия мимо ответа. */
.overlay--age { z-index: var(--z-agegate); }

/* Иконки берут цвет от текста, размер — из CSS. */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; }
.icon--missing { display: inline-block; width: 1em; height: 1em; outline: 1px dashed var(--color-error); }

/* ── возрастной барьер (фрейм «01 - Age Gate») ────────────────────────── */
/* Описано специфичнее .overlay__panel: при равной специфичности порядок в
   файле решал бы, чей паддинг и фон победят — это ломается при любой правке. */
.overlay__panel.age-gate {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-20);
  width: 500px; max-width: 100%; padding: var(--space-32);
  background: var(--color-bg-light); color: var(--color-text-dark);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.age-gate__header  { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.age-gate__welcome {
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 800; line-height: 13.06px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--color-text-dark);
}
.age-gate__brand {
  font-family: var(--font-text);
  font-size: var(--fs-h2); font-weight: 900; line-height: 35px; letter-spacing: -.5px;
  color: var(--color-text-dark);
}
.age-gate__badge {
  width: 338px; max-width: 100%;
  padding: var(--space-12) 18px;
  background: var(--color-accent); border-radius: var(--radius-12);
  font-family: var(--font-text);
  font-size: var(--fs-h3); font-weight: 900; line-height: 30.46px; letter-spacing: .5px;
  color: var(--color-on-accent);
}
.age-gate__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.age-gate__title {
  font-family: var(--font-text);
  font-size: var(--fs-h3); font-weight: 900; line-height: 30.46px;
  text-transform: uppercase; color: var(--color-text-dark);
}
.age-gate__text {
  font-family: var(--font-text);
  font-size: var(--fs-md); line-height: 23px; color: var(--color-text-dark);
}
.age-gate__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.age-gate__yes {
  width: 100%; min-height: 43px; padding: var(--space-14, 14px) 0;
  border-radius: var(--radius-12);
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 800; line-height: 15.23px; letter-spacing: 1px;
  text-transform: uppercase;
}
.age-gate__no {
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 700; line-height: 15.23px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-text-dark);
  text-decoration: underline; text-underline-offset: 3px;
  position: relative;
}
/* Тап-зона 24px псевдоэлементом — паддинг сдвинул бы кнопки барьера. */
.age-gate__no::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.age-gate__rule { width: 100%; height: 1px; background: var(--color-border-light); border: 0; margin: 0; }
.age-gate__help {
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 600; line-height: 13.06px; color: var(--color-text-dark);
}

@media (max-width: 767px) {
  .age-gate { gap: var(--space-16); padding: var(--space-24); }
  .age-gate__brand { font-size: var(--fs-h3); line-height: 30px; }
  .age-gate__badge { font-size: var(--fs-h5); line-height: 24px; padding: var(--space-10) var(--space-12); }
  .age-gate__title { font-size: var(--fs-h5); line-height: 24px; }
  .age-gate__text  { font-size: var(--fs-body); line-height: 20px; }
}

/* ── панель cookie-настроек (фрейм «03 - Cookie Preferences») ─────────── */
.overlay__panel.cookie-prefs {
  display: flex; flex-direction: column; gap: var(--space-24);
  width: 520px; max-width: 100%; padding: var(--space-32);
  background: var(--color-bg-light); color: var(--color-text-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.cookie-prefs__header  { display: flex; flex-direction: column; gap: var(--space-6); }
.cookie-prefs__eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-text-dark-muted);
}
.cookie-prefs__title {
  font-family: var(--font-text);
  font-size: var(--fs-h3); font-weight: 900; line-height: 30px;
  text-transform: uppercase; color: var(--color-text-dark);
}
.cookie-prefs__text {
  font-family: var(--font-text);
  font-size: var(--fs-body); line-height: 21px; color: var(--color-text-dark-muted);
}
.cookie-prefs__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-prefs__text a:hover { color: var(--color-text-dark); }

.cookie-prefs__list {
  background: var(--color-card); border-radius: var(--radius-12); overflow: hidden;
}
.cookie-prefs__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: 71px; padding: var(--space-16);
}
.cookie-prefs__row + .cookie-prefs__row { box-shadow: inset 0 1px 0 var(--color-border-light); }
.cookie-prefs__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.cookie-prefs__name {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 600; line-height: 17px; color: var(--color-text-dark);
}
.cookie-prefs__note {
  font-family: var(--font-text);
  font-size: var(--fs-sm); line-height: 18px; color: var(--color-text-dark-muted);
}
.cookie-prefs__always {
  flex: none;
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 700; line-height: 13px; color: var(--color-text-dark-muted);
}

/* Переключатель категории: настоящий checkbox под визуальной дорожкой,
   поэтому он работает с клавиатуры и без JS. */
.switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  display: inline-flex; align-items: center;
  width: 40px; height: 20px; padding: 2px;
  background: var(--color-border-light); border-radius: var(--radius-10);
  transition: background-color var(--dur-fast) var(--ease);
}
.switch__knob {
  width: 16px; height: 16px;
  background: var(--color-card); border-radius: var(--radius-md);
  transition: translate var(--dur-fast) var(--ease);
}
.switch input:checked + .switch__track { background: #000; }
.switch input:checked + .switch__track .switch__knob { translate: 20px 0; }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring-dark); }

.cookie-prefs__actions { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-prefs__save, .cookie-prefs__accept {
  min-height: 38px; padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-12);
  font-family: var(--font-text);
  font-size: var(--fs-sm); font-weight: 800; line-height: 14.14px; letter-spacing: 1px;
  text-transform: uppercase;
}
.cookie-prefs__accept { background: var(--color-card); border-color: var(--color-border-light); color: var(--color-text-dark); }
.cookie-prefs__accept:hover { background: var(--color-bg-light); }
.cookie-prefs__reject {
  padding: var(--space-4) 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 700; line-height: 13.06px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-text-dark-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie-prefs__reject:hover { color: var(--color-text-dark); }

@media (max-width: 767px) {
  .overlay__panel.cookie-prefs { gap: var(--space-16); padding: var(--space-20); }
  .cookie-prefs__title { font-size: var(--fs-h5); line-height: 24px; }
  .cookie-prefs__row { flex-wrap: wrap; min-height: 0; padding: var(--space-12); }
}

/* ── мобильное меню (фрейм «baqqybet-mobile-menu-open») ───────────────── */
.overlay--menu { align-items: stretch; padding: 0; background: var(--color-bg); }
.overlay__panel.mobile-menu {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; max-width: none; max-height: none; height: 100%;
  padding: var(--space-32) var(--container-pad-mobile) var(--space-40);
  background: var(--color-bg); color: var(--color-text);
  border-radius: 0;
}
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-32); }
.mobile-menu__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: var(--space-8);
  background: var(--color-panel);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-strong); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.mobile-menu__close:hover { border-color: var(--color-accent); }
.mobile-menu__close .icon { width: 18px; height: 18px; }

.mobile-menu__list { display: flex; flex-direction: column; gap: var(--space-20); }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 35px; padding-block: var(--space-4);
  font-size: var(--fs-h5); font-weight: 800; line-height: 27px; letter-spacing: .5px;
  color: var(--color-text-strong); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.mobile-menu__link:hover, .mobile-menu__link.is-current { color: var(--color-accent); }
.mobile-menu__chevron { width: 16px; height: 16px; color: var(--color-border); }
.mobile-menu__link:hover .mobile-menu__chevron { color: var(--color-accent); }

.mobile-menu__actions { display: flex; align-items: center; gap: var(--space-12); min-height: 48px; }
.mobile-menu__login, .mobile-menu__join {
  flex: 1; min-height: 48px;
  border-radius: var(--radius-10);
  font-size: var(--fs-body); font-weight: 800; line-height: 17px; letter-spacing: .5px;
}
.mobile-menu__login { border: 1.5px solid var(--color-accent); color: var(--color-accent); }
.mobile-menu__login:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* Меню — мобильное состояние: на десктопе слой не открывается вовсе. */
@media (min-width: 1200px) {
  .overlay--menu { display: none !important; }
}

/* ── блок «Keep wagering in perspective» ──────────────────────────────
   Общий: в макете он одинаков на главной, sports, racing, bet-cart и др.
   Разметка — includes/responsible-wagering.php. */
.rw { background: var(--color-bg-light); color: var(--color-text-dark); }
.rw__inner { display: flex; flex-direction: column; gap: var(--space-24); }
.rw__rule  { height: 1px; background: var(--color-border-light); border: 0; margin: 0; }

.rw__grid { display: grid; grid-template-columns: 520px 1fr; gap: var(--space-24); }
.rw__left { display: flex; flex-direction: column; gap: var(--space-16); }
.rw__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-green-deep);
}
.rw__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h1); font-weight: 900; line-height: 48px;
  color: var(--color-text-dark);
}
.rw__lead { font-size: var(--fs-lg); line-height: 24px; color: var(--color-text-dark-muted); }
.rw__lead-narrow { display: none; }
@media (max-width: 767px) {
  .rw__lead-wide { display: none; }
  .rw__lead-narrow { display: inline; }
}

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

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

@media (max-width: 1359px) {
  .rw__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Мобильный фрейм: колонка текста с шагом 12, шаги списка с шагом 6. */
  .rw__left { gap: var(--space-12); }
  .rw__title { font-size: var(--fs-h3); line-height: 31px; letter-spacing: -1px; }
  .rw__lead  { font-size: var(--fs-body); line-height: 21px; }
  .rw__action { gap: var(--space-6); }
  /* Кегли шагов в мобильном фрейме мельче: 16/19 заголовок, 13/18 текст. */
  .rw__action-title { font-size: var(--fs-lg); line-height: 19px; }
  .rw__action-text  { font-size: var(--fs-sm); line-height: 18px; }
  .rw__num { font-size: var(--fs-h2); line-height: 39px; }
  /* В мобильных фреймах полоса выше десктопных 69px и тянется по содержимому. */
  .rw__support { flex-direction: column; align-items: flex-start; height: auto; }
}