/* Home page (frames homepage 1440 / homepage-mobile 390). Numbers from fig-spec. */

/* ── hero (section-3-hero) ────────────────────────────────────────────── */
.hero {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  height: 680px; overflow: hidden; background: var(--color-surface);
}
.hero__copy {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-24);
  padding: 0 48px 0 var(--container-pad);
}
.hero__eyebrow { font-family: var(--font-body); font-weight: 800; line-height: 12px; letter-spacing: 1.5px; }
.hero__eyebrow::before { width: 12px; height: 2px; }
.hero__title {
  font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 76px;
  letter-spacing: -3px; color: var(--color-text);
}
.hero__sub { font-size: 20px; line-height: 22px; font-weight: 500; color: var(--color-muted-4); }
.hero__desc { font-size: 14px; line-height: 22px; color: var(--color-muted); max-width: 592px; }
.hero__cta { display: flex; align-items: center; gap: var(--space-16); }
.hero__btn { min-height: 44px; padding: 14px 28px; border-radius: var(--radius-md); font-size: 15px; }
.hero__link { font-size: 15px; line-height: 16px; font-weight: 700; color: var(--color-text); text-decoration: none; }
.hero__link:hover { color: var(--color-brand); }

.hero__media { position: relative; background: var(--color-bg); }
.hero__pic { position: absolute; inset: 0; z-index: 0; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
/* darkening layer sits ABOVE the photo, in its own z-layer */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #111116 0%, rgba(17, 17, 22, 0) 60%);
}
.hero__next {
  position: absolute; z-index: 2; right: 40px; bottom: 40px;
  display: flex; flex-direction: column; gap: 14px;
  width: 300px; padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: rgba(17, 17, 22, .8); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--color-line-dark);
}
.hero__next-head { display: flex; justify-content: space-between; align-items: center; }
.hero__next-label { font-family: var(--font-display); font-weight: 900; font-size: 11px; line-height: 14px; letter-spacing: 1px; color: var(--color-brand); }
.hero__next-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-2); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero__next-body { display: contents; }
.hero__next-event { display: flex; flex-direction: column; gap: var(--space-4); }
.hero__next-meta { display: flex; justify-content: space-between; font-size: 11px; line-height: 12px; color: var(--color-muted); }
.hero__next-in { font-family: var(--font-mono); font-weight: 700; color: var(--color-brand-2); }
.hero__next-title { font-size: 14px; line-height: 15px; font-weight: 700; color: var(--color-text); }
.hero__next-mob, .hero__next-badge { display: none; }
.hero__next-rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-line-dark); }
.hero__next-odds { display: flex; flex-direction: column; gap: var(--space-8); }
.hero__next-market { font-size: 11px; line-height: 12px; text-transform: uppercase; color: var(--color-muted); }
.hero__next-chips { display: flex; gap: var(--space-8); }
.hero__chip {
  flex: 1; height: 29px; border: 0; border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-text);
  font-size: 12px; line-height: 13px; font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hero__chip:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.hero__chip.is-selected { background: var(--color-brand); color: var(--color-bg); }
.hero__chip[aria-pressed="true"] { background: var(--color-brand); color: var(--color-bg); }

/* ── workspace (section-4-workspace) ──────────────────────────────────── */
.workspace { background: var(--color-bg); display: flex; flex-direction: column; gap: var(--space-32); padding: 80px var(--container-pad); }
.workspace__head { display: flex; flex-direction: column; gap: var(--space-8); }
.workspace__eyebrow { font-family: var(--font-body); font-weight: 800; line-height: 12px; letter-spacing: 1.5px; }
.workspace__title { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 69px; letter-spacing: -2px; color: var(--color-text); }
.workspace__tabs { box-shadow: none; }
.workspace__tabs .tabs__tab { padding-bottom: 12px; }
.workspace__split { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-32); align-items: start; }
.workspace__all { display: none; }

.terminal { display: flex; flex-direction: column; }
.terminal__group { display: flex; flex-direction: column; }
.terminal__sport {
  display: flex; justify-content: space-between; align-items: center;
  height: 40px; padding: 12px 16px; background: var(--color-surface);
  box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark);
}
.terminal__sport-name { display: flex; align-items: center; gap: var(--space-12); font-family: var(--font-display); font-weight: 900; font-size: 13px; line-height: 16px; color: var(--color-text); }
.terminal__sport-count { font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 14px; color: var(--color-muted); }
.terminal__chev { display: none; }
.terminal__empty { padding: var(--space-24) 16px; font-size: 14px; color: var(--color-muted); }

.event {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; box-shadow: inset 0 -1px 0 var(--color-line-dark);
  transition: background-color var(--dur-fast) var(--ease);
}
.event:hover { background: rgba(255, 255, 255, .02); }
.event__info { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.event__comp { font-size: 12px; line-height: 13px; color: var(--color-muted); }
.event__title { font-size: 15px; line-height: 16px; font-weight: 700; color: var(--color-text); }
.event__odds { display: flex; gap: var(--space-12); flex-shrink: 0; }
.event__odds .odd { width: 110px; }
.event__odds--3 .odd { width: 80px; height: 41px; }
.event__odds--3 .odd__name { font-size: 10px; }
.event__odds--3 .odd__price { font-size: 11px; }
.odd.is-selected .odd__name, .odd.is-selected .odd__price { color: var(--color-bg); }
.odd__name { font-size: 11px; line-height: 12px; }
.odd__price { font-size: 12px; line-height: 16px; }

/* bet slip */
.slip {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-20); border-radius: var(--radius-lg);
  background: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-dark);
}
.slip__header { display: flex; justify-content: space-between; align-items: center; }
.slip__title { font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 17px; color: var(--color-text); }
.slip__count {
  padding: 4px 10px; border-radius: 100px; background: var(--color-brand);
  font-family: var(--font-mono); font-weight: 800; font-size: 11px; line-height: 14px; color: var(--color-text);
}
.slip__selections { display: flex; flex-direction: column; gap: var(--space-8); }   /* several legs stack; one leg = the mockup card */
.slip__selection {
  position: relative; display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-12); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line-dark);
}
.slip__pick { font-size: 13px; line-height: 14px; font-weight: 700; color: var(--color-text); padding-right: 20px; }
.slip__market { font-size: 12px; line-height: 13px; color: var(--color-muted); }
.slip__price { font-family: var(--font-mono); font-weight: 800; font-size: 16px; line-height: 21px; color: var(--color-brand); }
.slip__remove {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: none; color: var(--color-muted); cursor: pointer;
  font-size: 18px; line-height: 1; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.slip__remove:hover { color: var(--color-text); background: var(--color-line-dark); }
.slip__empty { padding: var(--space-12); border-radius: var(--radius-md); font-size: 12px; line-height: 16px; color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-line-dark); }
.slip__stake { display: flex; flex-direction: column; gap: var(--space-8); }
.slip__label { font-size: 11px; line-height: 12px; font-weight: 800; letter-spacing: 1px; color: var(--color-muted); }
.slip__input {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 16px; border-radius: var(--radius-md);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-line-dark);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.slip__input:focus-within { box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring); }
.slip__currency { font-size: 13px; line-height: 14px; color: var(--color-muted); }
.slip__stake-input {
  width: 120px; align-self: stretch; border: 0; background: none; text-align: right; outline: none;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; line-height: 20px; color: var(--color-text);
  appearance: textfield; -moz-appearance: textfield;
}
.slip__stake-input::-webkit-inner-spin-button, .slip__stake-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.slip__quick { display: flex; gap: var(--space-8); }
.slip__quick-btn {
  flex: 1; height: 32px; border: 0; border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line-dark); color: var(--color-text);
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.slip__quick-btn:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.slip__quick-btn:active { background: var(--color-brand); color: var(--color-bg); }
.slip__rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-line-dark); }
.slip__summary { display: flex; flex-direction: column; gap: var(--space-8); }
.slip__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; line-height: 14px; color: var(--color-muted); }
.slip__row dd { font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-text); }
.slip__row--return dt { color: var(--color-text); font-weight: 700; }
.slip__row--return dd { font-size: 15px; line-height: 20px; font-weight: 800; color: var(--color-brand-2); }
.slip__submit { min-height: 44px; border-radius: var(--radius-md); font-size: 14px; }
.slip__note { font-size: 11px; line-height: 12px; text-align: center; color: var(--color-muted); }
.slip__note.is-error { color: var(--color-danger-2); }
.slip__note.is-ok { color: var(--color-success); }
.slip--surface { background: var(--color-surface); }
.slip--surface .slip__selection { background: var(--color-bg); }

/* sticky slip bar — mobile only */
.slip-bar { display: none; }

/* ── racing strip (section-5-racing-timeline) ─────────────────────────── */
.racing-strip {
  display: flex; align-items: center; gap: var(--space-48);
  padding: 40px var(--container-pad); background: var(--color-surface);
  box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark);
}
.racing-strip__head { display: flex; flex-direction: column; gap: var(--space-6); width: 280px; flex-shrink: 0; }
.racing-strip__eyebrow { font-family: var(--font-body); font-weight: 800; line-height: 12px; letter-spacing: 1.5px; }
.racing-strip__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; color: var(--color-text); }
.racing-strip__tabs { display: flex; gap: var(--space-12); padding-top: 8px; }
.racing-strip__tab {
  padding: 0 0 2px; border: 0; background: none; cursor: pointer;
  font-size: 12px; line-height: 13px; font-weight: 400; color: var(--color-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.racing-strip__tab:hover { color: var(--color-text); }
.racing-strip__tab[aria-selected="true"] { color: var(--color-text); font-weight: 700; border-color: var(--color-text); }

.timeline { position: relative; display: flex; gap: var(--space-24); width: 744px; flex: none; overflow-x: auto; scrollbar-width: none; }
.timeline::-webkit-scrollbar { display: none; }
.racing-strip__empty { flex: 1; font-size: 14px; line-height: 15px; color: var(--color-muted); }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: rgba(255, 255, 255, .114); }
.timeline__item { position: relative; width: 180px; flex-shrink: 0; }
.timeline__link { display: flex; flex-direction: column; align-items: center; gap: var(--space-10, 10px); text-decoration: none; color: inherit; }
.timeline__time {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px;
  background: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-dark);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.timeline__item.is-active .timeline__time { background: var(--color-brand); color: var(--color-bg); box-shadow: var(--shadow-glow); }
.timeline__link:hover .timeline__time { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--color-brand); }
.timeline__item.is-active .timeline__link:hover .timeline__time { box-shadow: var(--shadow-glow); }
.timeline__time-mob { display: none; }
.timeline__track { font-size: 14px; line-height: 15px; font-weight: 800; color: var(--color-text); }
.timeline__meta { margin-top: -8px; font-size: 11px; line-height: 12px; color: var(--color-muted); }
.racing-strip__all { width: 160px; text-align: right; flex-shrink: 0; }

/* ── arena (section-6-sports-index) ───────────────────────────────────── */
.arena { background: var(--color-bg); display: flex; flex-direction: column; gap: var(--space-40); padding: 80px var(--container-pad); }
.arena__title { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 69px; letter-spacing: -2px; color: var(--color-text); }
.arena__split { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: start; }
.arena__tabs { display: none; }

.directory { display: flex; flex-direction: column; }
.directory__row { display: block; }
.directory__link {
  display: flex; align-items: center; padding: 16px 0; text-decoration: none; color: var(--color-text);
  box-shadow: inset 0 -1px 0 var(--color-line-dark);
  transition: color var(--dur-fast) var(--ease);
}
.directory__num { width: 24px; margin-right: var(--space-24); font-family: var(--font-mono); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--color-muted); transition: color var(--dur-fast) var(--ease); }
.directory__name { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; transition: color var(--dur-fast) var(--ease); }
.directory__arrow { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: 20px; line-height: 26px; color: var(--color-muted); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.directory__row.is-active .directory__num, .directory__row.is-active .directory__name, .directory__row.is-active .directory__arrow,
.directory__link:hover .directory__num, .directory__link:hover .directory__name, .directory__link:hover .directory__arrow { color: var(--color-brand); }
.directory__link:hover .directory__arrow { transform: translateX(4px); }

.arena__card {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32); border-radius: var(--radius-xl);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line-dark);
}
.arena__pic { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 456 / 240; }
.arena__pic img { width: 100%; height: 100%; object-fit: cover; }
.arena__card-body { display: flex; flex-direction: column; gap: var(--space-12); }
.arena__badge {
  align-self: flex-start; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--color-brand);
  font-family: var(--font-mono); font-weight: 800; font-size: 10px; line-height: 13px; color: var(--color-text);
}
.arena__card-title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; color: var(--color-text); }
.arena__card-text { font-size: 14px; line-height: 21px; color: var(--color-muted); }

/* ── manifesto (section-7-manifesto) ──────────────────────────────────── */
.manifesto {
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
  padding: 32px var(--container-pad); background: var(--color-surface);
  box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark);
}
.manifesto__col { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); min-height: 40px; }
.manifesto__col + .manifesto__col { padding-left: var(--space-24); border-left: 1px solid var(--color-line-dark); }
.manifesto__title { font-family: var(--font-display); font-weight: 900; font-size: 12px; line-height: 15px; color: var(--color-text); }
.manifesto__text { font-size: 13px; line-height: 14px; color: var(--color-muted); }

/* ── mobile branch (frame homepage-mobile 390) ────────────────────────── */
@media (max-width: 1199px) {
  .hero { display: block; position: relative; height: 580px; }
  .hero__copy { position: relative; z-index: 3; gap: var(--space-16); padding: 24px var(--container-pad-m) 0; justify-content: flex-start; }
  .hero__eyebrow { font-size: 10px; line-height: 11px; }
  .hero__eyebrow::before { width: 8px; }
  .hero__title { font-size: 40px; line-height: 42px; }
  .hero__sub { font-size: 14px; line-height: 15px; font-weight: 400; }
  .hero__desc { display: none; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .hero__btn { min-height: 39px; padding: 12px; font-size: 14px; }
  .hero__link { text-align: center; font-size: 13px; }
  .hero__media { position: absolute; left: 0; right: 0; bottom: 0; height: 340px; }
  .hero__media::after { background: linear-gradient(45deg, #111116 0%, rgba(17, 17, 22, .6) 30%, rgba(17, 17, 22, .8) 80%, #111116 100%); }
  .hero__next { left: var(--container-pad-m); right: var(--container-pad-m); bottom: 16px; width: auto; gap: 10px; padding: 14px; background: rgba(17, 17, 22, .902); }
  .hero__next-label { font-size: 10px; line-height: 11px; }
  .hero__next-body { display: flex; justify-content: space-between; align-items: center; }
  .hero__next-meta { display: block; }
  .hero__next-in { display: none; }
  .hero__next-title { font-size: 13px; }
  .hero__next-desk { display: none; }
  .hero__next-mob { display: inline; }
  .hero__next-rule, .hero__next-odds { display: none; }
  .hero__next-badge {
    display: inline-flex; align-items: center; height: 24px; padding: 4px 8px; border-radius: var(--radius-xs);
    box-shadow: inset 0 0 0 1px var(--color-brand); font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-brand-2);
  }

  .workspace { gap: var(--space-20); padding: 48px var(--container-pad-m) 24px; }
  .workspace__head { gap: var(--space-6); }
  .workspace__eyebrow { font-size: 10px; line-height: 11px; }
  .workspace__title { font-size: 28px; line-height: 35px; }
  .workspace__tabs { overflow-x: auto; scrollbar-width: none; }
  .workspace__tabs::-webkit-scrollbar { display: none; }
  .workspace__tabs .tabs__tab { white-space: nowrap; }
  .workspace__split { grid-template-columns: 1fr; gap: 0; }
  .workspace__all { display: block; }

  .terminal { gap: var(--space-16); }
  .terminal__group { padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--color-line-dark); }
  .terminal__sport { padding: 0; background: none; box-shadow: none; }
  .terminal__sport-name { font-size: 14px; }
  .terminal__sport-count, .terminal__view { display: none; }
  .terminal__chev { display: block; font-size: 16px; color: var(--color-muted); }
  .event { flex-direction: column; align-items: stretch; gap: var(--space-12); padding: 8px 0; box-shadow: none; }
  .event__info { gap: 2px; }
  .event__comp { font-size: 11px; line-height: 12px; }
  .event__title { font-size: 14px; line-height: 15px; }
  .event__odds .odd, .event__odds--3 .odd { flex: 1; width: auto; height: 44px; }
  .event__odds--3 .odd { height: 41px; }

  /* the slip becomes a bottom sheet opened from the sticky bar */
  .slip { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: var(--z-overlay); border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; overflow: auto; transform: translateY(100%); transition: transform var(--dur-slow) var(--ease); box-shadow: 0 -12px 32px rgba(0, 0, 0, .5); }
  .slip:not(.is-open) { visibility: hidden; transition: transform var(--dur-slow) var(--ease-in), visibility 0s var(--dur-slow); }
  .slip.is-open { transform: none; }
  .slip-bar { display: block; position: sticky; bottom: 0; z-index: var(--z-sticky); }
  .slip-bar__btn {
    display: flex; justify-content: space-between; align-items: center; width: 100%; height: 56px; padding: 0 var(--container-pad-m);
    border: 0; background: var(--color-ink); box-shadow: inset 0 1px 0 var(--color-brand); color: var(--color-text); cursor: pointer;
  }
  .slip-bar__left { display: flex; align-items: center; gap: var(--space-8); }
  .slip-bar__title { font-family: var(--font-display); font-weight: 900; font-size: 13px; }
  .slip-bar__count { display: inline-grid; place-items: center; min-width: 22px; height: 17px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--color-brand); font-family: var(--font-mono); font-weight: 700; font-size: 10px; }
  .slip-bar__right { display: flex; align-items: center; gap: var(--space-12); }
  .slip-bar__return { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--color-brand-2); }
  .slip-bar__chev { font-size: 14px; color: var(--color-muted); transition: transform var(--dur-base) var(--ease); }
  .slip-bar__btn[aria-expanded="true"] .slip-bar__chev { transform: rotate(180deg); }

  .racing-strip { flex-direction: column; align-items: stretch; gap: var(--space-20); padding: 48px var(--container-pad-m); }
  .racing-strip__head { width: auto; gap: var(--space-4); }
  .racing-strip__eyebrow { font-size: 10px; line-height: 11px; }
  .racing-strip__title { font-size: 24px; line-height: 30px; }
  .racing-strip__tabs { gap: var(--space-32); padding-top: 16px; }
  .racing-strip__tab { padding-bottom: 12px; font-size: 14px; font-weight: 500; border-bottom-width: 2px; }
  .racing-strip__tab[aria-selected="true"] { font-weight: 700; border-color: var(--color-brand); }
  .timeline { width: auto; gap: var(--space-12); overflow-x: auto; scrollbar-width: none; }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline::before { display: none; }
  .timeline__item { width: 140px; }
  .timeline__link { align-items: flex-start; gap: var(--space-4); height: 80px; padding: 12px; border-radius: var(--radius-md); background: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-dark); }
  .timeline__time { width: auto; height: auto; border-radius: 0; background: none !important; box-shadow: none !important; font-size: 12px; line-height: 16px; color: var(--color-muted); }
  .timeline__item.is-active .timeline__time { color: var(--color-brand-2); }
  .timeline__time-desk { display: none; }
  .timeline__time-mob { display: inline; }
  .timeline__track { font-size: 13px; }
  .timeline__meta { margin-top: 0; font-size: 10px; line-height: 11px; }
  .racing-strip__all { width: auto; text-align: left; }

  .arena { gap: var(--space-24); padding: 64px var(--container-pad-m) 48px; }
  .arena__title { font-size: 32px; line-height: 40px; }
  .arena__split { grid-template-columns: 1fr; gap: var(--space-24); }
  .directory { display: none; }
  .arena__tabs { display: flex; gap: var(--space-32); overflow-x: auto; scrollbar-width: none; }
  .arena__tabs::-webkit-scrollbar { display: none; }
  .arena__tabs .tabs__tab { padding-bottom: 12px; white-space: nowrap; }
  .arena__card { gap: 0; padding: 0; border-radius: var(--radius-lg); background: var(--color-ink); overflow: hidden; }
  .arena__pic { border-radius: 0; aspect-ratio: 350 / 200; }
  .arena__card-body { gap: var(--space-8); padding: var(--space-20); }
  .arena__card-title { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 23px; }
  .arena__card-text { font-size: 13px; line-height: 20px; color: var(--color-muted-4); }

  .manifesto { grid-template-columns: 1fr; gap: var(--space-24); padding: 48px var(--container-pad-m); }
  .manifesto__col { gap: var(--space-6); min-height: 0; }
  .manifesto__col + .manifesto__col { padding-left: 0; padding-top: var(--space-24); border-left: 0; box-shadow: inset 0 1px 0 var(--color-line-dark); }
}

/* ── laptop range (1200–1439): fluid columns, nothing fixed wider than the viewport ── */
@media (min-width: 1200px) and (max-width: 1439px) {
  .timeline { width: auto; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline__item { width: 160px; }
  .racing-strip__all { width: auto; flex-shrink: 0; }
  .arena__split { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); }
}

/* mobile fixes from the frame-by-frame style check */
@media (max-width: 1199px) {
  .terminal__sport-name { line-height: 17px; }
  .event__odds .odd__name, .event__odds--3 .odd__name { font-size: 11px; line-height: 12px; }
  .event__odds .odd__price, .event__odds--3 .odd__price { font-size: 12px; line-height: 16px; }
  .timeline__link { border-radius: var(--radius-md); }
  .timeline__track { line-height: 14px; }
  .racing-strip__tab { line-height: 15px; }
}

/* wider than the 1440 frame: the copy column keeps its frame width next to the centred content,
   the photo column takes the rest (the side padding sits on the full-bleed hero, so the token resolves right) */
@media (min-width: 1441px) {
  .hero { padding-left: var(--container-pad); grid-template-columns: 640px minmax(0, 1fr); }
  .hero__copy { padding-left: 0; }
}