/* Section archetypes the inner pages are built from. The mockup reuses five
 * shapes across responsible-gambling, betstop, showdown, how-it-works, sports,
 * racing, help-centre and contact-us, so they live here once:
 *
 *   .page-hero   split hero: text left (672), media or graphic right (544)
 *   .split       numbered header left (384) + content right (904), gap 24
 *   .sec         plain section: eyebrow, title, content
 *   .tiles       row of equal cards with 1px dividers between them
 *   .steps       numbered steps row
 *
 * Numbers from fig-spec: sections pad 96/64 (light and dark) or 50/64 (heroes),
 * gap 40; eyebrow 11/15 bold 0.08em; titles Anton 72/108.39; body 14/21.
 */

/* ── section shell ────────────────────────────────────────────────────── */
.sec { padding-block: var(--section-pad-y); }
.sec--tight { padding-block: 50px; }
.sec--light { background: var(--color-light); color: var(--color-text-dark); }
.sec--dark { background: var(--color-bg); color: var(--color-border-light); }
.sec--grad { background: var(--grad-brand); }
.sec .container { display: flex; flex-direction: column; gap: 40px; }
.sec--gap48 .container { gap: 48px; }

.sec__head { display: flex; flex-direction: column; gap: var(--space-8); }
.sec__title {
  display: flex; flex-direction: column; gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: 108.39px;
  text-transform: uppercase;
}
.sec--light .sec__title { color: var(--color-text-dark); }
.sec--dark .sec__title, .sec--grad .sec__title { color: var(--color-border-light); }
.sec__lead { font-size: var(--fs-small); line-height: 21px; }
.sec--light .sec__lead { color: #555555; }
.sec--dark .sec__lead, .sec--grad .sec__lead { color: var(--color-muted); }

/* ── split: numbered header + content ─────────────────────────────────── */
.split { display: flex; align-items: flex-start; gap: var(--space-24); }
.split__left { flex: 0 0 384px; display: flex; flex-direction: column; gap: var(--space-12); }
.split__right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-20); }
/* Section numbers: Anton 48 in brand red at 20% (0:949 and its siblings). */
.split__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: 72.26px;
  color: rgb(239 68 68 / .2);
}
.split__eyebrow {
  font-weight: 700; font-size: var(--fs-3xs); line-height: 15.03px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
}
.split__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: 108.39px;
  text-transform: uppercase;
}
.sec--light .split__title { color: var(--color-text-dark); }
.sec--dark .split__title, .sec--grad .split__title { color: var(--color-border-light); }
.split__title--brand { color: var(--color-brand) !important; }
/* The mockup's ink line sits at three quarters down the gradient, on its red end,
   where near-black is exactly what reads (0:3346). */
.split__title--ink { color: var(--color-text-dark) !important; }
.split__text { font-size: var(--fs-small); line-height: 21px; }
.sec--light .split__text { color: #555555; }
.sec--dark .split__text, .sec--grad .split__text { color: var(--color-muted); }

/* ── bullets ──────────────────────────────────────────────────────────── */
.bullets { display: flex; flex-direction: column; gap: var(--space-12); }
.bullets--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-24); }
.bullets li {
  position: relative; padding-left: 22px;
  font-size: var(--fs-small); line-height: 21px;
}
.sec--light .bullets li { color: #555555; }
.sec--dark .bullets li, .sec--grad .bullets li { color: var(--color-muted); }
.bullets li::before { content: "•"; position: absolute; left: 0; color: var(--color-brand); }

/* ── card tiles ───────────────────────────────────────────────────────── */
.tiles { display: grid; gap: var(--space-24); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tiles--5 { grid-template-columns: repeat(5, 1fr); }   /* RG tools row — 0:3236 */
.tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24);
}
.sec--dark .tile { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.sec--light .tile { background: var(--color-text); }
.tile__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: 72.26px;
  color: rgb(239 68 68 / .2);
}
.tile__title { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h5); line-height: 25px; }
.sec--dark .tile__title { color: var(--color-border-light); }
.sec--light .tile__title { color: var(--color-text-dark); }
.tile__text { font-size: var(--fs-small); line-height: 21px; }
.sec--dark .tile__text { color: var(--color-muted); }
.sec--light .tile__text { color: var(--color-muted-dark); }
.tile__link {
  margin-top: auto; align-self: flex-start; position: relative;
  font-weight: 800; font-size: var(--fs-xs); line-height: 18px;
  color: var(--color-brand); text-decoration: none;
}
.tile__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.tile__link:hover { text-decoration: underline; }

/* small label/value tiles — "HISTORY / Deposits, withdrawals, wagers" */
.labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.labels div { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--color-border); }
.labels dt, .labels b {
  font-weight: 800; font-size: var(--fs-2xs); line-height: 16px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
}
.labels span { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted); }

/* ── panel: white card on a coloured section ──────────────────────────── */
.panel {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-32);
  background: var(--color-text); color: var(--color-body-dark);
}
.panel__label {
  font-weight: 700; font-size: var(--fs-2xs); line-height: 16px;
  text-transform: uppercase; color: var(--color-brand);
}
.panel__text { font-size: var(--fs-small); line-height: 21px; color: #555555; }
.panel__title { font-weight: 700; font-size: var(--fs-body); line-height: 22px; color: var(--color-surface); }
.panel a { color: var(--color-brand); font-weight: 700; }

/* ── numbered question list ───────────────────────────────────────────── */
.questions { display: flex; flex-direction: column; gap: var(--space-12); }
.questions li {
  display: flex; gap: var(--space-12);
  font-size: var(--fs-small); line-height: 21px;
}
.sec--light .questions li { color: #555555; }
.questions li b { font-weight: 800; color: var(--color-brand); }

/* ── page hero (split) ────────────────────────────────────────────────── */
.page-hero { padding-block: 50px; }
.page-hero .container { display: flex; flex-direction: column; gap: 40px; }
.page-hero__row { display: flex; align-items: flex-start; gap: var(--space-24); }
.page-hero__left { flex: 0 1 672px; display: flex; flex-direction: column; gap: var(--space-24); }
.page-hero__headline { display: flex; flex-direction: column; gap: var(--space-12); }
.page-hero__headline span {
  font-family: var(--font-display);
  font-size: 80px; line-height: 72px;
  text-transform: uppercase; color: var(--color-text);
}
/* Every inner hero sets its first line at 120 and the rest at 80 (fig-spec). */
.page-hero__headline span:first-child { font-size: 120px; line-height: 108px; }
.page-hero__headline .is-brand { color: var(--color-brand); }
.page-hero__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.page-hero__links { display: flex; flex-direction: column; gap: var(--space-10); }
.page-hero__links a {
  position: relative; width: fit-content;
  font-weight: 800; font-size: var(--fs-small); line-height: 19px;
  color: var(--color-brand); text-decoration: none;
}
.page-hero__links a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.page-hero__links a:hover { text-decoration: underline; }
.page-hero__note { font-size: var(--fs-small); line-height: 22px; color: var(--color-muted); }
.page-hero__media { position: relative; flex: 0 1 544px; }
.page-hero__media img { width: 100%; height: 520px; object-fit: cover; }
/* The oversized "18+" is a watermark over the photo — 8% in the file, not a stamp. */
.page-hero__stamp {
  position: absolute; left: 0; top: 24px;
  font-family: var(--font-display); font-size: 180px; line-height: 1;
  color: rgb(239 68 68 / .08); pointer-events: none;
}

/* The hero's support links are #e5e7eb in the file, not brand red (0:3205). */
.page-hero__links a { color: var(--color-border-light); }

/* ── steps row ────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-16); }
.step + .step::before {
  content: ""; position: absolute; left: -12px; top: 0;
  width: 1px; height: 100%; background: var(--color-border-light);
}
.sec--dark .step + .step::before { background: var(--color-border); }
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: 72.26px;
  color: rgb(239 68 68 / .2);
}
.step__title {
  font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h5); line-height: 25px;
  text-transform: uppercase;   /* as every frame draws them (0:1385, showdown, betstop) */
}
.sec--light .step__title { color: var(--color-text-dark); }
.sec--dark .step__title { color: var(--color-border-light); }
.step__text { font-size: var(--fs-small); line-height: 21px; }
.sec--light .step__text { color: var(--color-muted-dark); }
.sec--dark .step__text { color: var(--color-muted); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .sec { padding-block: var(--space-48); }
  .sec--tight { padding-block: var(--space-48); }
  .sec .container { gap: var(--space-24); }
  .sec--gap48 .container { gap: var(--space-24); }
  .sec__title, .split__title { font-size: 32px; line-height: 36px; }
  .split { flex-direction: column; gap: var(--space-24); }
  .split__left { flex: 1 1 auto; width: 100%; }
  .split--even .split__left, .split--even .split__right { flex: 1 1 auto; width: 100%; }
  .split__num, .tile__num, .step__num { font-size: 32px; line-height: 44px; }
  .bullets--2col { grid-template-columns: 1fr; }
  .tiles--3, .tiles--4, .tiles--5, .steps, .labels { grid-template-columns: 1fr; }
  .step + .step::before { display: none; }
  .panel { padding: var(--space-20); }

  .page-hero { padding-block: 40px; }
  .page-hero.sec--grad { background: var(--grad-brand-soft); }
  .page-hero .container { gap: var(--space-24); }
  .page-hero__row { flex-direction: column; }
  .page-hero__left, .page-hero__media { flex: 1 1 auto; width: 100%; }
  .page-hero__headline { gap: var(--space-4); }
  .page-hero__headline span,
  .page-hero__headline span:first-child { font-size: 56px; line-height: 50px; }
  .page-hero__lead { font-size: var(--fs-small); line-height: 21px; }
  .page-hero__media img { height: 240px; }
  .page-hero__stamp { font-size: 72px; }
}

/* ── BetStop page ─────────────────────────────────────────────────────── */
/* hero graphic — 0:1762: concentric squares and an oversized Anton "B" */
.betstop-hero__word {
  font-family: var(--font-display);
  font-size: 120px; line-height: 108px;
  text-transform: uppercase; color: var(--color-text);
}
/* BetStop headline: the two lines sit flush and the second is brand red (0:1773). */
.sec__title--flush { gap: 0; }
.sec__title--brand { color: var(--color-brand); }

/* BetStop steps: icon tile beside a solid 72px number (0:1778/0:1782). */
.betstop-step__row { display: flex; align-items: center; gap: var(--space-12); min-height: 86px; }
.betstop-step__icon {
  flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: var(--color-bg); color: var(--color-brand);
}
.betstop-step__icon .icon { width: 20px; height: 20px; }
.betstop-step__num {
  font-family: var(--font-display); font-size: var(--fs-h1); line-height: 86px;
  color: var(--color-brand);
}

.betstop-hero__cta { min-height: 48px; padding: 0 18px; font-size: var(--fs-body-sm); align-self: flex-start; }
.page-hero__graphic {
  position: relative; flex: 0 1 620px; height: 520px;
  display: grid; place-items: center;
  background: var(--color-bg);
}
.page-hero__graphic::before,
.page-hero__graphic::after {
  content: ""; position: absolute;
}
/* Concentric marks behind the "B": 8% for the filled square, 12% for the outlines
   — in the file they are a texture, not blocks (0:1763–0:1766). */
.page-hero__graphic::before { right: 40px; top: 24px; width: 260px; height: 260px; background: rgb(239 68 68 / .08); }
.page-hero__graphic::after {
  left: 24px; bottom: 34px; width: 180px; height: 180px;
  box-shadow: inset 0 0 0 1px rgb(239 68 68 / .12);
}
.page-hero__graphic-letter {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 180px; line-height: 1;
  color: rgb(239 68 68 / .12);
}

/* emphasis row — 0:1828 */
.emphasis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: start; }
.emphasis__lead {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); background: var(--color-brand); color: var(--color-text);
}
.emphasis__num { color: rgb(255 255 255 / .15) !important; }   /* 0:1832 */
.emphasis__title { font-weight: 800; font-size: var(--fs-body); line-height: 22px; }
.emphasis__text { font-size: var(--fs-small); line-height: 19px; color: rgb(255 255 255 / .702); }
.emphasis__col {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.emphasis__col a { color: var(--color-brand); font-weight: 700; }

@media (max-width: 1199px) {
  .betstop-hero__word { font-size: 42px; line-height: 42px; }
  .page-hero__graphic { flex: 1 1 auto; width: 100%; height: 240px; }
  .page-hero__graphic::before { width: 120px; height: 120px; right: 20px; top: 20px; }
  .page-hero__graphic::after { width: 90px; height: 90px; left: 16px; bottom: 16px; }
  .page-hero__graphic-letter { font-size: 96px; }
  .emphasis { grid-template-columns: 1fr; }
}

/* ── Showdown page ────────────────────────────────────────────────────── */
.showdown__cta { min-height: 48px; padding: 0 18px; font-size: var(--fs-body-sm); align-self: flex-start; }

/* account comparison — 0:658 */
.compare { display: grid; grid-template-columns: 528fr 120fr 528fr; gap: var(--space-24); align-items: center; }
.compare__card {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.compare__card--brand { background: var(--color-brand); box-shadow: none; }
.compare__card .tile__num { color: var(--color-brand); }            /* solid on the standard card */
.compare__card--brand .tile__num { color: rgb(255 255 255 / .15); }
.compare__card--brand .tile__title { color: var(--color-text); }
.compare__card--brand .tile__text { color: rgb(255 255 255 / .8); }
.compare__sep {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  font-weight: 800; font-size: var(--fs-xs); line-height: 18px;
  text-transform: uppercase; color: var(--color-brand);
}
.compare__arrow { font-size: 20px; }

/* CTA — 0:672 */
.showdown-cta { display: grid; grid-template-columns: 768fr 528fr; gap: var(--space-24); align-items: stretch; }
.showdown-cta__main {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-16);
  padding: 40px; background: var(--color-brand); color: var(--color-text);
  min-height: 520px;
}
.showdown-cta__title {
  font-family: var(--font-cond); font-weight: 700;
  font-size: 100px; line-height: 100px;
  text-transform: uppercase;
}
.showdown-cta__text { font-size: var(--fs-body); line-height: 24px; color: rgb(255 255 255 / .8); }
.showdown-cta__side {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-16);
  padding: 40px; background: var(--color-bg);
}

@media (max-width: 1199px) {
  .compare { grid-template-columns: 1fr; }
  .compare__sep { flex-direction: row; }
  .showdown-cta { grid-template-columns: 1fr; }
  .showdown-cta__main { min-height: 0; padding: var(--space-24); }
  .showdown-cta__title { font-size: 48px; line-height: 48px; }
  .showdown-cta__side { padding: var(--space-24); }
}

/* ── How It Works ─────────────────────────────────────────────────────── */
.hiw-nav { background: var(--color-bg); }
.hiw-nav__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.hiw-nav__item {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.hiw-nav__item:hover { border-color: var(--color-brand); }
.hiw-nav__num {
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: 72.26px;
  color: rgb(239 68 68 / .2);
}
.hiw-nav__title {
  font-weight: 800; font-size: var(--fs-xs); line-height: 18px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-border-light);
}
.hiw-nav__item:hover .hiw-nav__title { color: var(--color-brand); }

/* The section container already puts 40px between steps — no extra padding. */
/* flex-basis is measured on the main axis: inside the step's column flex the
   inherited  from .market-table became a 768px HEIGHT and left
   a white void under the row. */
.market-table.hiw__row { flex: 0 0 auto; background: var(--color-text); }
.hiw__row .odds { cursor: default; }

.hiw-slip {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24);
  background: var(--color-bg); color: var(--color-border-light);
}
.hiw-slip__label {
  font-weight: 800; font-size: var(--fs-2xs); line-height: 16px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
}
.hiw-slip__event { font-weight: 800; font-size: var(--fs-small); line-height: 19px; }
.hiw-slip__market { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted); }
.hiw-slip__row {
  display: flex; justify-content: space-between; gap: var(--space-16);
  padding-top: var(--space-12); border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted);
}
.hiw-slip__row--total { font-weight: 800; font-size: var(--fs-h5); line-height: 25px; color: var(--color-brand); }
/* 408×52 brand block closing the final slip (0:1045) — drawn, not clickable. */
.hiw-slip__cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; background: var(--color-brand); color: var(--color-text);
  font-weight: 700; font-size: var(--fs-body); line-height: 22px;
}
.hiw-slip__note { font-size: var(--fs-3xs); line-height: 15px; color: var(--color-muted); }
.hiw-check { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.hiw-check li {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--fs-xs); line-height: 18px; color: var(--color-border-light);
}
.hiw-check li::before { content: "✓"; color: var(--color-brand); font-weight: 700; }

@media (max-width: 1199px) {
  .hiw-nav__row { grid-template-columns: 1fr 1fr; padding-block: var(--space-24); gap: var(--space-16); }
  .hiw-nav__num { font-size: 32px; line-height: 44px; }
  .hiw-step + .hiw-step { padding-top: var(--space-32); }
}

/* ── campaign rows (promotions) ───────────────────────────────────────── */
.campaign-light { background: var(--color-text); color: var(--color-text-dark); }
.campaign-light .sec__title { color: var(--color-text-dark); }
.campaign-light .sec__lead { color: #555555; }
.campaign { display: grid; grid-template-columns: 672fr 544fr; gap: var(--space-24); align-items: center; }
.campaign--reverse { grid-template-columns: 672fr 544fr; }
.campaign__text { display: flex; flex-direction: column; gap: var(--space-16); }
.campaign__media img { width: 100%; height: 520px; object-fit: cover; }

@media (max-width: 1199px) {
  .campaign, .campaign--reverse { grid-template-columns: 1fr; }
  .campaign--reverse .campaign__media { order: 2; }
  .campaign__media img { height: 240px; }
}

/* ── Help Centre ──────────────────────────────────────────────────────── */
.help-hero .page-hero__graphic { height: 446px; background: none; place-items: center; }
.help-hero .page-hero__graphic::before,
.help-hero .page-hero__graphic::after { display: none; }
.help-hero .page-hero__graphic-letter { font-size: 271px; line-height: 271px; }   /* 0:1169 is shorter than the BetStop hero */
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.topic a {
  display: flex; flex-direction: column; gap: 0;
  min-height: 139px; padding: var(--space-12) var(--space-24);
  background: var(--color-text); color: var(--color-text-dark); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topic--active a { background: var(--color-bg); color: var(--color-text); }
.topic a:hover { background: var(--color-bg); color: var(--color-text); }
.topic__num { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 72.26px; color: rgb(239 68 68 / .2); }
.topic__title { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h5); line-height: 25px; }
.topic__go { font-weight: 800; font-size: var(--fs-xs); line-height: 18px; color: var(--color-brand); }

.articles { display: flex; flex-direction: column; }
.article { border-top: 1px solid var(--color-border); }
.article:last-child { border-bottom: 1px solid var(--color-border); }
.article__head {
  display: flex; align-items: center; gap: var(--space-16);
  width: 100%; padding: var(--space-20) 0;
  border: 0; background: none; cursor: pointer; text-align: left;
}
.article__num { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 32px; color: var(--color-brand); }
.article__title { flex: 1; font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h5); line-height: 25px; color: var(--color-border-light); }
.article__sign { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.article__sign::before, .article__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--color-brand);
  transition: transform var(--dur-fast) var(--ease);
}
.article__sign::after { transform: rotate(90deg); }
.article__head[aria-expanded="true"] .article__sign::after { transform: rotate(0deg); }
.article__text { padding-bottom: var(--space-20); font-size: var(--fs-small); line-height: 21px; color: var(--color-muted); }

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 384fr 848fr; gap: var(--space-24); align-items: start; }
.contact__rail { display: flex; flex-direction: column; gap: var(--space-16); }
.contact__rail a { color: var(--color-brand); font-weight: 700; }
.contact__rule { height: 1px; border: 0; margin: var(--space-16) 0; background: var(--color-brand); }
.contact__card {
  display: flex; flex-direction: column; gap: var(--space-20);
  padding: var(--space-24);
  background: var(--color-text); color: var(--color-text-dark);
}
.contact__heading { display: flex; flex-direction: column; gap: var(--space-8); }
.contact__label {
  font-weight: 700; font-size: var(--fs-2xs); line-height: 16px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
}
.contact__title { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 27px; color: var(--color-text-dark); }
.contact__lead { font-size: var(--fs-small); line-height: 21px; color: var(--color-muted-dark); }
.contact__form .field__label { color: var(--color-muted-dark); }
.contact__form input, .contact__form select, .contact__form textarea {
  background: var(--color-text); color: var(--color-text-dark);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.contact__form input:hover, .contact__form select:hover, .contact__form textarea:hover {
  box-shadow: inset 0 0 0 1px var(--color-muted-dark);
}
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring-light);
}
.contact__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
/* the mockup's #777777 lands at 4.48 on white — one step darker clears 4.5 */
.contact__note { font-size: var(--fs-xs); line-height: 18px; color: #757575; }
.contact__send { min-height: 48px; padding: 0 32px; font-size: var(--fs-body-sm); }

@media (max-width: 1199px) {
  .topics { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact__footer { flex-direction: column; align-items: stretch; }
  .contact__send { width: 100%; }
}

/* ── Sports page ──────────────────────────────────────────────────────── */
.market-table--wide { flex: 0 1 912px; }
/* On sports the mockup puts the filters above the table as a compact 444px row
   (0:385), not as a full-width strip inside it. */
.market-table__filters--wrap { flex-wrap: nowrap; width: fit-content; padding: 0; }
.market-table__filters--wrap .filter { flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-12); }

.featured { display: grid; grid-template-columns: 768fr 528fr; gap: var(--space-24); }
.featured__media img { width: 100%; height: 520px; object-fit: cover; }
.featured__panel {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-24);
  padding: 40px; background: var(--color-brand); color: var(--color-text);
}
.featured__panel .eyebrow { color: var(--color-text); }
.featured__sport {
  font-family: var(--font-display); font-size: 120px; line-height: 108px;
  text-transform: uppercase;
}
.featured__sub { font-size: var(--fs-small); line-height: 19px; color: rgb(255 255 255 / .8); }
.featured__match { display: flex; flex-direction: column; gap: var(--space-8); }
.featured__match span { font-family: var(--font-display); font-size: 36px; line-height: 40px; text-transform: uppercase; }
.featured__vs { font-family: var(--font-body) !important; font-weight: 800; font-size: var(--fs-2xs) !important; line-height: 16px !important; }
.featured__time { font-size: var(--fs-small); line-height: 19px; color: rgb(255 255 255 / .8); }

/* ── Racing page ──────────────────────────────────────────────────────── */
.meetings { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-24); min-height: 130px; }   /* 0:2911 */
.meeting {
  display: flex; flex-direction: column; gap: var(--space-12);
  min-height: 130px; padding: var(--space-16); border: 0; border-radius: 0; cursor: pointer; text-align: left;
  background: var(--color-text); color: var(--color-text-dark);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.meeting:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
/* The chosen meeting is filled, not outlined (0:2912). */
.meeting.is-active {
  background: var(--color-brand); color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}
.meeting__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 34px; }
.meeting__no {
  flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-display); font-size: var(--fs-h5); line-height: 27.1px;
}
.meeting__time { font-weight: 800; font-size: var(--fs-small); line-height: 19.12px; color: #11172a; }
.meeting__track { font-weight: 800; font-size: var(--fs-body); line-height: 22px; color: #11172a; }
.meeting__code { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted-dark); }
.meeting.is-active .meeting__time,
.meeting.is-active .meeting__track { color: var(--color-text); }
.meeting.is-active .meeting__code { color: rgb(255 255 255 / .702); }

.racing-workspace { padding-top: 0; }
.racing-meetings { padding-block: 50px 30px; }   /* 0:2908 */
.race-card { flex: 0 0 960px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.race-card__head {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); background: var(--color-text);
}
.race-card__eyebrow {
  font-weight: 700; font-size: var(--fs-3xs); line-height: 15.03px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
}
.race-card__meta { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted-dark); }
.race-card__title {
  font-family: var(--font-display); font-size: 80px; line-height: 80px;
  text-transform: uppercase; color: var(--color-text-dark);
}
.race-card__controls { display: flex; gap: var(--space-12); }
.race-card__controls .filter { flex: 0 0 auto; min-height: 38px; padding: 0 var(--space-16); }

.runners { width: 100%; background: var(--color-text); border-collapse: collapse; }
.runners th, .runners td { padding: var(--space-20) var(--space-12); text-align: left; vertical-align: middle; }
.runners thead th {
  padding-block: var(--space-12);
  font-weight: 800; font-size: var(--fs-3xs); line-height: 15px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-muted-dark);
}
.runners tbody tr { border-top: 1px solid var(--color-border-light); }
.runners tbody tr:hover { background: var(--color-light); }
/* Only the leading runner's number is brand red; the rest are flat grey (0:2970). */
.runners__no { font-family: var(--font-display); font-size: var(--fs-h5); line-height: 25px; color: #999999; }
.runners tbody tr:first-child .runners__no { color: rgb(239 68 68 / .25); }
.runners__name { font-weight: 800; font-size: var(--fs-body); line-height: 22px; color: var(--color-text-dark); }
.runners__barrier, .runners__jockey, .runners__form {
  font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted-dark);
}
.runners td .odds { min-width: 88px; min-height: 53px; }
.race-card__empty {
  padding: var(--space-24); background: var(--color-text);
  font-size: var(--fs-small); line-height: 21px; color: var(--color-muted-dark);
}   /* row pitch 93 in 0:2963 */

@media (max-width: 1199px) {
  .market-table--wide { flex: 1 1 auto; }
  .featured { grid-template-columns: 1fr; }
  .featured__media img { height: 240px; }
  .featured__panel { padding: var(--space-24); }
  .featured__sport { font-size: 56px; line-height: 56px; }
  .featured__match span { font-size: 24px; line-height: 28px; }

  .meetings { grid-template-columns: 1fr; }
  .race-card { flex: 1 1 auto; }
  .race-card__title { font-size: 40px; line-height: 44px; }
  /* the mockup turns the race card into stacked rows on mobile */
  .runners, .runners tbody, .runners tr, .runners td, .runners th { display: block; width: 100%; }
  .runners thead { display: none; }
  .runners tbody tr {
    display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4) var(--space-12);
    padding: var(--space-16); margin-bottom: var(--space-12);
    background: var(--color-text); border-top: 0;
  }
  .runners__no { grid-row: span 4; }
  .runners th, .runners td { padding: 0; }
  .runners td:nth-child(6), .runners td:nth-child(7) { grid-column: 2; }
  .runners td .odds { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Per-frame geometry corrections, all from fig-spec. Grouped here so the
 * archetypes above stay generic and every exception carries its node id.
 * ───────────────────────────────────────────────────────────────────────── */

/* sports: the markets band sits on the page ground, not on the light band — the
   frame gives 0:380 no fill of its own. Its rhythm is 50 above, 0 below, and 20
   between the filter row and the workspace (0:380 pad50/20, 0:398 @989). */
.markets--sports { padding-block: 50px 0; }
.markets--sports .markets__header { margin-bottom: 0; }
.markets--sports .market-table__filters--wrap { margin-bottom: var(--space-20); }

/* sports: the market rows are 100 tall with a 1px divider between (0:399/0:400),
   and the filter chips sit above the table as a 444px row, padding 0 16 (0:385) */
.market-table--wide .event { min-height: 101px; }
.market-table--wide .event:first-child { min-height: 100px; border-top: 0; }
.market-table__filters--wrap { flex-wrap: nowrap; }
.market-table__filters--wrap .filter { min-height: 44px; padding: 0 var(--space-16); text-transform: none; letter-spacing: 0; }

/* racing: race header — meta row 18, title row 120 with a 120×120 block,
   controls 38, gaps 16, padding 24 (0:2950) */
.race-card__meta-row { display: flex; align-items: center; gap: var(--space-12); }
.race-card__title-row { display: flex; align-items: center; gap: var(--space-16); }
.race-card__title { line-height: 120px; }
/* 8% wash beside the race number, as everywhere else in the file (0:2957) */
.race-card__block { flex: 0 0 120px; width: 120px; height: 120px; background: var(--color-brand); opacity: .08; }
.race-card__controls .filter { min-height: 38px; padding: var(--space-10) 14px; }

/* showdown: one-platform pads 96/50 with a 220-tall principles row (0:635),
   account comparison row 220 (0:658) */
.sec--pb50 { padding-bottom: 50px; }
.showdown-principles { min-height: 220px; }
.compare { min-height: 220px; }

/* how it works: the step navigation row is 220 tall, items pad 20, gap 8 (0:947) */
.hiw-nav__row { min-height: 220px; align-items: stretch; }
.hiw-nav__item { justify-content: flex-start; padding-block: var(--space-20); gap: var(--space-8); border-top: 0; }
.hiw-nav__item + .hiw-nav__item { position: relative; }
.hiw-nav__item + .hiw-nav__item::before {
  content: ""; position: absolute; left: -12px; top: 0;
  width: 1px; height: 100%; background: var(--color-border);
}
.hiw-nav__title { font-family: var(--font-body); font-size: var(--fs-body); line-height: 22px; letter-spacing: 0; }

/* help centre: eyebrow and title are separate children of the section, 40 apart
   (0:1186/0:1187); the article list is a 1136-wide stack of 160-tall rows (0:1235) */
.help-topics__head { display: contents; }
.articles--rows { width: 1136px; max-width: 100%; }
.articles--rows .article { border-top: 0; }
.articles--rows .article + .article { border-top: 1px solid var(--color-border); }
.articles--rows .article:last-child { border-bottom: 0; }
.articles--rows .article__head {
  display: flex; align-items: center; gap: var(--space-24);
  width: 100%; min-height: 160px; padding: var(--space-16) 0;
  border: 0; background: none; text-align: left;
}
.articles--rows .article__num {
  flex: 0 0 120px; width: 120px;
  font-size: var(--fs-h2); line-height: 128px;
}
.articles--rows .article__body { display: flex; flex-direction: column; gap: var(--space-6); }
.articles--rows .article__title { font-size: var(--fs-h5); line-height: 25px; }
.articles--rows .article__text { padding-bottom: 0; }

@media (max-width: 1199px) {
  .market-table--wide .event, .market-table--wide .event:first-child { min-height: 0; }
  .market-table__filters--wrap { flex-wrap: wrap; width: auto; }
  .hiw-nav__row { min-height: 0; }
  .hiw-nav__item + .hiw-nav__item::before { display: none; }
  .showdown-principles, .compare { min-height: 0; }
  .articles--rows { width: 100%; }
  .articles--rows .article__head { min-height: 0; gap: var(--space-16); }
  .articles--rows .article__num { flex: 0 0 44px; width: 44px; font-size: 32px; line-height: 44px; }
}

/* how it works: a step is divider + 40 gap + (text 212, gap 50, illustration),
   title Barlow Condensed 48/58 (0:964) */
.hiw-step {
  display: flex; flex-direction: column; gap: 50px;
  padding-top: 40px; border-top: 1px solid var(--color-border-light);
}
.hiw-step__text { display: flex; flex-direction: column; gap: var(--space-16); }
.hiw-step__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: 72.26px;
  color: rgb(239 68 68 / .2);
}
.hiw-step__title {
  font-family: var(--font-cond); font-weight: 700;
  font-size: var(--fs-h2); line-height: 58px;
  text-transform: uppercase; color: var(--color-text-dark);
}

/* help centre: the "getting started" header is one column of eyebrow, number,
   title, lead and a 1px rule, 16 apart (0:1229) */
.gs-head { display: flex; flex-direction: column; gap: var(--space-16); }
.gs-head__num {
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: 108.39px;
  color: rgb(239 68 68 / .2);
}
.gs-head__rule { height: 1px; border: 0; margin: 0; background: var(--color-border); }
.gs-head .sec__lead { font-size: var(--fs-body); line-height: 24px; }   /* 0:1233 */

@media (max-width: 1199px) {
  .hiw-step { gap: var(--space-24); padding-top: var(--space-24); }
  .hiw-step__title { font-size: 32px; line-height: 36px; }
  .gs-head__num { font-size: 32px; line-height: 44px; }
}

/* responsible gambling: the 'check your gambling' heading is Manrope 16/22 in the
   questions group (0:3295), and the responsibilities tiles stack at 10 (0:3331) */
.rg-check__title { font-size: var(--fs-body); line-height: 22px; }
.tiles--tight .tile { gap: var(--space-10); }

/* responsible gambling: sections 08 and 09 keep eyebrow and title as separate
   children of the section, 40 apart (0:3328/0:3346); section 02 groups them at 8
   and its tools row is 367 tall (0:3232/0:3236) */
.tiles--5 { min-height: 367px; }
.sec__head--loose { display: contents; }

/* betstop: the section header sets eyebrow and title 20 apart (0:1771) and the
   steps row is 220 tall (0:1776); the emphasis row is 298 (0:1828) */
.betstop-head { gap: var(--space-20); }
.betstop-steps { min-height: 220px; }
.emphasis { min-height: 298px; }

/* contact: 'how can we help' is an even 672/672 rail — copy left, three steps
   right, each step 124 tall inside a 220 row (0:1377/0:1382) */
.split--even .split__left { flex: 0 0 672px; gap: var(--space-16); }
/* the mockup draws two 672 columns inside a 1312 rail — 56 more than fits, so the
   steps take the remaining width instead of overflowing the container */
.split--even .split__right { flex: 1 1 auto; min-width: 0; gap: 0; justify-content: center; }
.contact-steps { min-height: 220px; align-items: center; }
.contact-steps .step { gap: var(--space-8); }
.contact-steps .step__title { line-height: 22px; }

/* contact: the message field is 220 tall in the mockup (0:1432) */
.contact__form textarea { min-height: 220px; }

/* how it works: steps 03 and 04 are two columns — text beside the illustration
   (0:1007) and the brand block beside the final slip (0:1025) */
.hiw-step--split { flex-direction: row; align-items: stretch; gap: var(--space-24); }
.hiw-step--split .hiw-step__text { flex: 0 1 672px; }
.hiw-visual {
  flex: 0 1 544px;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); background: var(--color-bg);
}
.hiw-visual .hiw-slip { padding: var(--space-20); }
#step-04 .hiw-visual { flex: 0 1 528px; gap: var(--space-24); padding: 40px; }
.hiw-final {
  flex: 0 1 755px;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: 40px; background: var(--color-brand);
}
.hiw-final__eyebrow { color: var(--color-text); }
/* the mockup sets this number #ef4444 on the #ef4444 block — invisible; kept
   tonal but readable */
.hiw-final__num { color: rgb(239 68 68 / .2); }
.hiw-final__title {
  font-family: var(--font-cond); font-weight: 700;
  font-size: 100px; line-height: 120px;
  text-transform: uppercase; color: var(--color-text);
}
.hiw-final__text { font-size: var(--fs-small); line-height: 22px; color: rgb(255 255 255 / .702); }
/* how it works, per-step geometry from the frame: the copy is a 672 column even
   where the illustration sits below it (0:967/0:988); step 02 keeps 20 between
   copy and row (0:987); no divider is drawn above step 03 (0:1006) — the mockup
   puts it under it instead; step 04 is a pair of fixed 560 panels (0:1025); and
   the step-03 slip preview is a flat 190 list without the divider rules (0:1015) */
.hiw-step__text { max-width: 672px; }
#step-02 { gap: var(--space-20); }
#step-03 { padding-top: 0; border-top: 0; }
#step-04 .hiw-final, #step-04 .hiw-visual { min-height: 560px; }
#step-03 .hiw-slip .hiw-slip__label { font-size: var(--fs-xs); line-height: 18px; }
#step-03 .hiw-visual > .hiw-slip__label { font-size: var(--fs-3xs); line-height: 15.03px; }
#step-03 .hiw-slip__row { padding-top: 0; border-top: 0; }
#step-03 .hiw-slip__row:not(.hiw-slip__row--total) {
  font-weight: 800; font-size: var(--fs-body); line-height: 22px;
  color: var(--color-border-light);
}

/* the fixture row is 100 tall on this page (0:973), with no rule above it */
.hiw__row .event { min-height: 100px; border-top: 0; }

@media (max-width: 1199px) {
  .hiw-step--split { flex-direction: column; }
  .hiw-step--split .hiw-step__text, .hiw-visual, .hiw-final { flex: 1 1 auto; }
  .hiw-final { padding: var(--space-24); }
  .hiw-final__title { font-size: 48px; line-height: 52px; }
  #step-04 .hiw-visual { padding: var(--space-24); }
  .hiw-step__text { max-width: none; }
  #step-04 .hiw-final, #step-04 .hiw-visual { min-height: 0; }
  #step-03 { padding-top: var(--space-24); border-top: 1px solid var(--color-border-light); }
}