/* Reusable pieces of the mockup: buttons, eyebrows, section headers, plaques,
 * badges, cards, tabs, form fields. Numbers come from fig-spec on the node the
 * comment names. Anything used three times or more lives here, not in a page file.
 */

/* ── buttons ──────────────────────────────────────────────────────────── */
/* homepage[3:41] cta-primary · [3:43] cta-secondary · [3:25] join-cta */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--fs-small); line-height: 18px; font-weight: 800;
  text-decoration: none; text-align: center;
}
.btn--primary { background: var(--color-lime); color: var(--color-ink); padding: 12px 20px; }
.btn--primary:hover { background: var(--color-lime-hover); }
.btn--primary:active { background: var(--color-lime-active); }

.btn--ghost {
  background: var(--color-bg); color: var(--color-ink);
  padding: 12px 20px; box-shadow: inset 0 0 0 2px var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: #fff; }

.btn--violet { background: var(--color-violet); color: #fff; padding: 12px 20px; }
.btn--violet:hover { background: var(--color-violet-hover); }

.btn--dark { background: var(--color-ink); color: #fff; padding: 12px 20px; }
.btn--dark:hover { background: var(--color-violet); }

/* header «Join Now» is a shorter pill: 13px text, 10/16 padding */
.site-header__actions .btn--primary { font-size: var(--fs-xs); line-height: 16.38px; padding: 10px 16px; }

/* plain text action, e.g. header «Log In» */
.btn--link { font-weight: 800; padding-block: 9px; }
.btn--link:hover { color: var(--color-violet); }

/* «View all markets →» — text link with an arrow, used in every section header */
/* 3:59 «View all markets →»: подчёркивание в макете статическое, не по ховеру */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-size: var(--fs-small); line-height: 18px; font-weight: 800;
  color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px;
  position: relative;
}
.link-arrow:hover { text-decoration-thickness: 2px; }
.link-arrow--onviolet { color: #fff; }
.link-arrow--onlime { color: var(--color-ink); }

/* ── eyebrow: lime square + caps label (homepage[3:29]) ───────────────── */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-10);
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
  letter-spacing: 0.06em;   /* число из макета, а не «на глаз» */
  text-transform: uppercase; color: var(--color-ink);
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--color-lime); flex: none; }
.eyebrow--violet::before { background: var(--color-violet); }

/* ── section header (homepage[3:55]) ──────────────────────────────────── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.section-head__stack { display: flex; flex-direction: column; gap: var(--space-8); }
.section-head__kicker {
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
  text-transform: uppercase; color: var(--color-ink);
}
.section-title {
  font-size: var(--fs-h2); line-height: 81px; font-weight: 800; text-transform: uppercase;
}
.section-title--sm { font-size: var(--fs-h3); line-height: 44px; }
.section-lead { font-size: var(--fs-body); line-height: 26px; max-width: 760px; }

/* ── plaques (homepage[3:48]) ─────────────────────────────────────────── */
.plaques { display: flex; gap: var(--space-12); }
.plaque {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-6);
  padding: 14px; border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
}
.plaque__label { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; text-transform: uppercase; }
/* 1:393 / 8:15: подпись плашки приглушена — 0.75 на белой, 0.9 на фиолетовой */
.plaque__text { font-size: var(--fs-xs); line-height: 16.38px; opacity: .75; }
.plaque--violet .plaque__text { opacity: .9; }
.plaque--violet { background: var(--color-violet); color: #fff; box-shadow: none; }

/* ── badges and pills ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
  font-size: var(--fs-3xs); line-height: 13px; font-weight: 800; text-transform: uppercase;
}
.badge--violet { background: var(--color-violet); color: #fff; }
.badge--dark { background: var(--color-ink); color: #fff; }
/* A state that is not yet confirmed must not read as the lime «done» badge. */
.badge--pending { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-border); }

/* ── tabs (market filters, homepage[3:62]) ────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.tab {
  padding: 6px 12px; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800;
  text-transform: uppercase; color: var(--color-ink); background: var(--color-bg);
}
.tab:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }
.tab[aria-selected="true"],
.tab[aria-pressed="true"] { background: var(--color-ink); color: #fff; box-shadow: none; }

/* ── generic card ─────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.card--lime { background: var(--color-lime); box-shadow: none; }
.card--violet { background: var(--color-violet); color: #fff; box-shadow: none; }
.card--dark { background: var(--color-ink); color: #fff; box-shadow: none; }
.card--sand { background: var(--color-sand); box-shadow: none; }

/* Decorative numeral inside a card — tinted on purpose, hidden from readers. */
.card__num {
  font-size: var(--fs-h4); line-height: 40px; font-weight: 800;
  color: color-mix(in srgb, currentColor 22%, transparent);
}

/* ── notice band (help-centre, responsible-gambling) ──────────────────── */
.notice {
  background: var(--color-notice);
  box-shadow: inset 0 0 0 1px var(--color-notice-line);
  border-radius: var(--radius-sm);
  padding: var(--space-16) var(--space-20);
  font-size: var(--fs-xs); line-height: 20px; color: var(--color-ink);
}
.notice__title { font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; margin-bottom: var(--space-6); }

/* ── forms ────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-6); }
.field__label {
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800;
  text-transform: uppercase; color: var(--color-ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
}
.field__hint { font-size: var(--fs-micro); font-weight: 700; color: var(--color-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px var(--space-14);
  border: 0; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
  background: var(--color-bg); font-size: var(--fs-small); line-height: 18px;
}
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--color-violet), var(--focus-ring);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { box-shadow: inset 0 0 0 2px var(--color-error); }
.field__error { font-size: var(--fs-2xs); color: var(--color-error); font-weight: 700; }

.checkbox { display: flex; align-items: flex-start; gap: var(--space-10); font-size: var(--fs-2xs); line-height: 18px; position: relative; }
.checkbox input { width: 18px; height: 18px; flex: none; accent-color: var(--color-violet); margin-top: 1px; }
/* The box itself is 18×18 and a one-line label is 19px tall — under the 24×24
   minimum (WCAG 2.2 AA, 2.5.8). The pseudo-element belongs to the LABEL, so a tap
   on it ticks the box, and it is kept over the box alone: stretching it across the
   whole row would swallow the privacy-policy link inside the wording. */
.checkbox::after {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 24px; height: 24px; z-index: 1;
}

.form-status { font-size: var(--fs-xs); font-weight: 700; }
.form-status--ok { color: var(--color-success); }
.form-status--err { color: var(--color-error); }

/* ── empty state ──────────────────────────────────────────────────────── */
.empty {
  padding: var(--space-32) var(--space-24); text-align: center;
  color: var(--color-muted); font-size: var(--fs-small);
}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* mobile-homepage[56:235]: 32/40, not the hero’s 38/38 */
  .section-title { font-size: var(--fs-h5); line-height: 40px; }
  .section-title--sm { font-size: var(--fs-h6); line-height: 28px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .section-head__stack { gap: var(--space-6); }
  .section-lead { font-size: var(--fs-small); line-height: 21px; }
  .eyebrow { font-size: var(--fs-micro); line-height: 13px; gap: var(--space-6); }
  .eyebrow::before { width: 8px; height: 8px; }
  .plaques { gap: var(--space-8); }
  .plaque { padding: 12px; gap: var(--space-4); }
  .plaque__label { font-size: var(--fs-3xs); line-height: 14px; }
  .plaque__text { font-size: var(--fs-2xs); line-height: 15.12px; }
  .card__num { font-size: var(--fs-h6); line-height: 28px; }
}

/* ── market board (homepage[3:61], sports[1:404]) ─────────────────────── */
.board {
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
  background: var(--color-bg);
  min-width: 0;
}
.board__tabs { padding: var(--space-16); gap: var(--space-8); border-bottom: 1px solid var(--color-border); }
.board__tabs .tab { padding: 8px 14px; border-radius: var(--radius-md); font-size: var(--fs-2xs); line-height: 15.12px; }
.board__rows > li + li { border-top: 1px solid var(--color-border); }

.market {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-20);
}
.market__meta { display: flex; flex-direction: column; gap: var(--space-6); flex: 1 1 416px; min-width: 0; }
.market__when { font-size: var(--fs-2xs); line-height: 15.12px; }
.market__event { font-size: var(--fs-body-sm); line-height: 19px; font-weight: 800; }
/* 3:79 «Match Winner» в макете приглушён до 0.75 */
.market__type { flex: 0 0 120px; font-size: var(--fs-xs); line-height: 16.38px; opacity: .75; }
.market__odds { display: flex; gap: var(--space-8); flex: 0 0 320px; }

.odd {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 44px; border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-ink);
}
.odd__label { font-size: var(--fs-3xs); line-height: 14px; font-weight: 800; }
.odd__value { font-size: var(--fs-xs); line-height: 16.38px; font-weight: 800; }
.odd:hover { background: var(--color-sand); }
.odd--on, .odd[aria-pressed="true"] { background: var(--color-lime); box-shadow: none; }
.odd--on:hover, .odd[aria-pressed="true"]:hover { background: var(--color-lime-hover); }

/* ── bet slip (homepage[3:146]) ───────────────────────────────────────── */
.slip {
  flex: 0 0 400px; align-self: flex-start;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-sm);
  background: var(--color-violet); color: #fff;
}
.slip__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.slip__title { font-size: var(--fs-lg); line-height: 23px; font-weight: 800; text-transform: uppercase; }
.slip__count { background: var(--color-ink); color: var(--color-lime); }
/* Купон держит сколько угодно выборов — строка на каждый. Макет рисует одну
   (там в купоне один выбор), остальные повторяют её ритм. */
.slip__selection,
.slip__list { display: flex; flex-direction: column; gap: var(--space-6); }
.slip__list { gap: var(--space-12); }
.slip__pick { display: flex; align-items: flex-start; gap: var(--space-8); }
.slip__pick + .slip__pick { padding-top: var(--space-12); border-top: 1px solid rgba(255,255,255,.2); }
.slip__pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.slip__event { font-size: var(--fs-small); line-height: 18px; font-weight: 800; }
.slip__market { font-size: var(--fs-xs); line-height: 16.38px; }
.slip__odds { font-size: var(--fs-body); line-height: 20px; font-weight: 800; color: var(--color-lime); }
.slip__pick .slip__odds { flex: none; }
/* Крестик: 24×24 по WCAG 2.5.8, лайм на фиолетовом — 4.91:1 */
.slip__remove {
  flex: none; width: 24px; height: 24px; border-radius: var(--radius-xs);
  display: grid; place-items: center; color: #fff; font-size: var(--fs-2xs);
}
.slip__remove:hover { background: rgba(255,255,255,.18); }
/* Итоговый коэффициент мульти — виден только когда выборов больше одного */
.slip__combined {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  font-size: var(--fs-xs); line-height: 16.38px; font-weight: 800;
}
.slip__combined .slip__row-value { color: var(--color-lime); }
.slip__empty { font-size: var(--fs-xs); line-height: 18px; opacity: .9; }
.slip__divider { height: 1px; background: var(--color-ink); border: 0; margin: 0; }

.slip__stake { display: flex; flex-direction: column; gap: var(--space-10); }
.slip__label { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; text-transform: uppercase; }
.slip__input {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding: 12px var(--space-14); border-radius: var(--radius-sm); background: var(--color-ink);
}
.slip__currency { font-size: var(--fs-xs); line-height: 16.38px; }
.slip__input input {
  flex: 1; min-width: 0; border: 0; background: none; text-align: right;
  font-size: var(--fs-body); line-height: 20px; font-weight: 800; color: var(--color-lime);
  /* 24×24 minimum (WCAG 2.2 AA, 2.5.8): the dark plaque around it is tall enough,
     the input itself was 21px. The negative margin gives the extra height back to
     the box, so the plaque keeps the height the mockup draws. */
  min-height: 24px; margin-block: -2px;
}
.slip__quick { display: flex; gap: var(--space-8); }
.slip__step {
  flex: 1; min-height: 36px; border-radius: var(--radius-sm); background: var(--color-ink); color: #fff;
  font-size: var(--fs-xs); line-height: 16.38px; font-weight: 800;
}
.slip__step:hover { background: var(--color-ink-2); color: var(--color-lime); }

.slip__totals { display: flex; flex-direction: column; gap: var(--space-10); }
.slip__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.slip__row-label { font-size: var(--fs-xs); line-height: 16.38px; }
.slip__row-value { font-size: var(--fs-small); line-height: 18px; font-weight: 800; }
.slip__row--return .slip__row-label { font-weight: 800; }
.slip__return { font-size: var(--fs-lg); line-height: 23px; color: var(--color-lime); }

.slip__place {
  min-height: 52px; border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
  font-size: var(--fs-small); line-height: 18px; font-weight: 800;
}
.slip__place:hover:not(:disabled) { background: var(--color-lime-hover); }
.slip__place:disabled { opacity: .75; cursor: not-allowed; }
.slip__status:empty { display: none; }
.slip__status { color: #fff; }

/* ── responsible gambling band (homepage[3:274], every page) ──────────── */
.rg-band { padding-block: var(--section-y); }
.rg-band__inner { display: flex; gap: var(--space-55); align-items: flex-start; }
.rg-band__intro { flex: 0 1 490px; display: flex; flex-direction: column; gap: var(--space-12); }
.rg-band__title {
  font-size: var(--fs-h2); line-height: 61px; font-weight: 800;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
}
.rg-band__mark {
  background: var(--color-violet); color: #fff; border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: var(--fs-h3); line-height: 53px;
}
.rg-cards { flex: 1 1 811px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); min-width: 0; }
.rg-card {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-sm);
}
/* Номера карточек в макете 0.25 на всех трёх тонах (3:282 / 3:287 / 3:292),
   текст — 0.85 на лаймовой и 0.9 на фиолетовой и чёрной (3:284 / 3:289 / 3:294). */
.rg-card__num { font-size: var(--fs-h4); line-height: 50.4px; font-weight: 800; opacity: .25; }
.rg-card__title { font-size: var(--fs-title); line-height: 28px; font-weight: 800; text-transform: uppercase; }
.rg-card__text { font-size: var(--fs-small); line-height: 21px; flex: 1; }
.rg-card--lime .rg-card__text { opacity: .85; }
.rg-card--violet .rg-card__text, .rg-card--dark .rg-card__text { opacity: .9; }
.rg-card__link { font-size: var(--fs-xs); line-height: 16.38px; color: inherit; }
.rg-card--lime { background: var(--color-lime); color: var(--color-ink); }
.rg-card--violet { background: var(--color-violet); color: #fff; }
.rg-card--dark { background: var(--color-ink); color: #fff; }
.rg-card--dark .rg-card__num, .rg-card--dark .rg-card__link { color: var(--color-lime); }

@media (max-width: 1199px) {
  .market { flex-wrap: wrap; gap: var(--space-10); padding: var(--space-12); }
  .market__meta { flex: 1 1 100%; }
  .market__type { flex: 1 1 100%; }
  .market__odds { flex: 1 1 100%; }
  .board__tabs { padding: var(--space-12); }

  .slip { flex: 1 1 auto; padding: var(--space-16); gap: var(--space-14); }

  /* The band is drawn in two mobile variants: 716 high on 3 frames and 837 on
     the other 10. Taken from the majority (responsible-gambling-mobile[79:1792]):
     48/16 padding, gap 24, header gap 8, title 32/32, card 20 padding. */
  .rg-band { padding-block: var(--space-48); }
  .rg-band__inner { flex-direction: column; gap: var(--space-24); }
  /* the header column is 216 wide in the frame, which is what breaks «KEEP
     WAGERING» over two lines (responsible-gambling-mobile[79:1793]) */
  .rg-band__intro { flex: 1 1 auto; gap: var(--space-8); max-width: 216px; }
  .rg-band__title { font-size: var(--fs-h5); line-height: 32px; gap: var(--space-8); }
  /* [79:1797] the mark is 24/24 inside a 4/8 padded block with a 2px radius */
  .rg-band__mark { font-size: var(--fs-lead); line-height: 24px; padding: 4px 8px; border-radius: var(--radius-xs); }
  /* the desktop flex-basis of 811px would stretch the stack in a column —
     reset it, or every card grows to a third of that height */
  .rg-cards { flex: 0 0 auto; grid-template-columns: 1fr; gap: var(--space-12); width: 100%; }
  .rg-card__text { flex: 0 0 auto; }
  .rg-cards { gap: var(--space-16); }
  .rg-card { padding: var(--space-20); gap: var(--space-12); }
  .rg-card__num { font-size: var(--fs-h6); line-height: 35.28px; }
  .rg-card__title { font-size: var(--fs-lg); line-height: 23px; }
  .rg-card__text { font-size: var(--fs-xs); line-height: 18px; }
  .rg-card__link { font-size: var(--fs-xs); line-height: 16.38px; }
}

/* racing sections use the violet kicker (homepage[3:181]) */
.section-head__kicker--violet { color: var(--color-violet); }

/* ── hero — same geometry on every page (homepage[3:27], sports[1:373], …) ── */
/* ── hero (homepage[3:27]) ────────────────────────────────────────────── */
.hero { padding-block: 72px var(--space-80); }
.hero__inner { display: flex; gap: var(--space-32); align-items: flex-start; }

/* 760 / 528 are the mockup's widths at 1440. Between the two frames they have to
   give: fixed basis + shrink keeps the ratio and stops the right column pushing
   the document sideways at 1280. */
/* 760 + 32 + 528 = 1320 inside a 1360 container: the frame leaves 40px spare
   rather than stretching the text column, so the photo starts exactly at 832. */
.hero__left { flex: 0 1 760px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-28); }
.hero__title { display: flex; flex-direction: column; gap: var(--space-12); }
.hero__line {
  font-size: var(--fs-h1); line-height: 68.4px; font-weight: 800;
  text-transform: uppercase;
}
.hero__line--2 { display: flex; align-items: center; gap: var(--space-12); }
.hero__mark {
  background: var(--color-violet); color: #fff;
  border-radius: var(--radius-sm); padding: 6px 12px;
}
/* 3:39: лид героя в макете 0.75 */
.hero__lead { font-size: var(--fs-body); line-height: 26px; max-width: 760px; opacity: .75; }
.hero__ctas { display: flex; gap: var(--space-12); }

.hero__right { flex: 0 1 528px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.hero__photo { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.hero__photo img { width: 100%; height: 520px; object-fit: cover; }

/* ── mobile (mobile-homepage[56:46]) ──────────────────────────────────── */
@media (max-width: 1199px) {
  .hero { padding-block: var(--space-32) var(--space-40); }
  .hero__inner { flex-direction: column; gap: var(--space-20); }
  .hero__left, .hero__right { flex: 1 1 auto; width: 100%; }
  .hero__left { gap: var(--space-20); }
  .hero__title { gap: var(--space-6); }
  .hero__line { font-size: 38px; line-height: 38px; }
  .hero__line--2 { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .hero__mark { padding: 4px 10px; }
  .hero__lead { font-size: var(--fs-small); line-height: 21px; }
  .hero__ctas { flex-direction: column; gap: var(--space-10); }
  .hero__ctas .btn { width: 100%; }
  /* the mobile frame runs every hero child in one column at gap 20 — the photo
     and the plaques are 20 apart too (mobile-homepage[56:46]) */
  .hero__right { gap: var(--space-20); }
  .hero__photo img { height: 240px; }
}


/* the title is two nodes in the mockup (homepage[3:277] + [3:279]) */
.rg-band__line { display: block; }

/* Bet slip on a phone — mobile-homepage[56:151]: 16 padding, 14 gaps, header
   16/20.16, selection 13/16.38 + 12/15.12 + 15/19 with a 4px gap, stake block
   gap 8 with a 39px field and 32px quick buttons, totals gap 6, CTA 44 high. */
@media (max-width: 1199px) {
  .slip__title { font-size: var(--fs-body); line-height: 20.16px; }
  .slip__selection { gap: var(--space-4); }
  .slip__event { font-size: var(--fs-xs); line-height: 16.38px; }
  .slip__market { font-size: var(--fs-2xs); line-height: 15.12px; }
  .slip__odds { font-size: var(--fs-body-sm); line-height: 19px; }
  .slip__stake { gap: var(--space-8); }
  .slip__label { font-size: var(--fs-3xs); line-height: 14px; }
  .slip__input { padding: 10px var(--space-14); }
  .slip__input input { font-size: var(--fs-body-sm); line-height: 19px; }
  .slip__quick { gap: var(--space-6); }
  .slip__step { min-height: 32px; font-size: var(--fs-2xs); line-height: 15.12px; }
  .slip__totals { gap: var(--space-6); }
  .slip__row-label { font-size: var(--fs-2xs); line-height: 15.12px; }
  .slip__row-value { font-size: var(--fs-xs); line-height: 16.38px; }
  .slip__return { font-size: var(--fs-body); line-height: 20px; }
  .slip__place { min-height: 44px; font-size: var(--fs-xs); line-height: 16.38px; }
}

/* ── markets section: home[3:54] and sports[1:397] share it ───────────── */
/* ── upcoming markets (homepage[3:54]) ────────────────────────────────── */
.markets__inner { display: flex; flex-direction: column; gap: var(--space-32); }
.markets__body { display: flex; gap: var(--space-32); align-items: flex-start; }
.markets__body .board { flex: 1 1 928px; }

@media (max-width: 1199px) {
  .markets__inner { gap: var(--space-24); }
  .markets__body { flex-direction: column; gap: var(--space-24); }
  .markets__body .board, .markets__body .slip { width: 100%; flex: 1 1 auto; }
}