.styles-module__container--spx6Z {
  /*
   * TopRacesFormation sits at the natural content-column width. (The Quick Links
   * carousel bleed is now scoped to its own wrapper in FormationHomepage, so this
   * container no longer needs to cancel a root-level 8px extension.)
   *
   * box-sizing: border-box keeps the 16px horizontal padding within that width
   * so arrows and the carousel are properly contained (no page-level scroll).
   *
   * XS/S: full-bleed module strip with a 1px top border and no radius, matching
   * the Figma "Popular Races Module / Mobile" node (border/default #b0b7bf, top +
   * bottom 1px, no radius) and the sibling Upcoming Races strip. The bottom
   * separator is supplied by the adjacent .gridLayout's border-top. The rounded
   * top-corner card treatment is restored at M+ below.
   */
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: var(--fd-colors-background-surface, #ffffff);
  border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
}

@media (min-width: 960px) {
  .styles-module__container--spx6Z {
    /*
     * M/L/XL: rounded top-corner card (Figma). A 1px border on the top + both
     * sides traces the rounded corners so they read as clearly rounded — the
     * page sits on a light gray, so relying on the corner *notch* alone made the
     * radius nearly invisible (gray-on-white). The bottom stays open (the
     * adjacent .gridLayout supplies the separator below), so only the top corners
     * round. overflow: hidden clips the white surface to the radius so the
     * corners don't paint square under the border.
     */
    border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-right: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-left: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }
}

/*
 * Loading-state wrapper. The skeleton row does not use FormationCarousel, so it
 * needs its own flex layout to lay the placeholder cards out in the same
 * horizontal row as the loaded carousel (matching the 8px default gap and the
 * .carouselItem responsive widths below).
 */
.styles-module__carouselList--XbEFs {
  display: flex;
  gap: 8px;
  overflow: hidden;
}

/*
 * Per-item width is a single source of truth driven from JS via
 * useTopRacesCarousel + the shared useGridBreakpoint hook (XS = 1 card,
 * S = 2 cards, M+ = fixed 318px per the Figma Desktop card). The value is
 * supplied through the --top-races-card-width custom property so the responsive
 * card count is not also re-encoded as media queries here. The carousel scrolls
 * horizontally as additional cards load.
 */
.styles-module__carouselItem--b565c {
  min-width: var(--top-races-card-width, 318px);
  flex-shrink: 0;
}

/*
 * Top Pools loading skeleton. Mirrors the card shell (border/radius from Figma
 * border/default #B0B7BF, borderradius020 4px) and uses a pulse animation on
 * grey placeholder bars. Kept in CSS because Formation has no skeleton/animation
 * primitive; the layout itself is composed from Box/Flex in index.tsx.
 */
.styles-module__container--BtPjB {
  width: 100%;
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-radius: 4px;
  overflow: hidden;
}

.styles-module__header--soizh {
  height: 64px;
  box-sizing: border-box;
}

.styles-module__row--wCX40 {
  height: 64px;
  box-sizing: border-box;
}

.styles-module__row--wCX40:not(:last-child) {
  border-bottom: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

.styles-module__bar--fVNpr {
  display: block;
  border-radius: 2px;
  background: var(--fd-colors-background-base, #eaf0f6);
  animation: styles-module__topPoolsPulse--fXkiE 1.2s ease-in-out infinite;
}

.styles-module__titleBar--fWkSK {
  width: 96px;
  height: 16px;
}

.styles-module__seeAllBar--rIXGd {
  width: 44px;
  height: 14px;
}

.styles-module__mtpBar--cgHOh {
  width: 40px;
  height: 14px;
  flex-shrink: 0;
}

.styles-module__trackBar--vST80 {
  width: 70%;
  height: 12px;
}

.styles-module__wagerBar--zjbrY {
  width: 45%;
  height: 12px;
}

.styles-module__amountBar--grGn3 {
  width: 52px;
  height: 18px;
  flex-shrink: 0;
}

@keyframes styles-module__topPoolsPulse--fXkiE {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/*
 * Top Pools "mobile" card (XS/S horizontal carousel) — Figma node 5270:99994.
 * Fixed 320px card; typography/colours come from Formation tokens in index.tsx.
 * Colours use token vars with the Figma hex fallback (--fd-colors-* aren't
 * registered app-wide).
 */
.styles-module__card--dhBYz {
  box-sizing: border-box;
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  background: var(--fd-colors-background-surface, #ffffff);
  border: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-radius: 4px;
}

.styles-module__wagerType--owZH1 {
  text-transform: uppercase;
}

.styles-module__track--KGzF_ {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * TopPoolsFormation — structural styles only.
 *
 * Typography, colours and spacing are handled by Formation Box/Flex/Text with
 * design tokens (see index.tsx). This module is limited to the few things that
 * have no clean Formation prop equivalent: the card border/radius, the button
 * reset for "See all", the uppercase subsection heading, and the inset row
 * separator (border/subtle #C6D3E1 with the Figma 17px bottom inset).
 *
 * Container border = border/default #B0B7BF, radius = borderradius020 (4px).
 * Colours use Formation token vars with the Figma hex as a fallback (matching
 * urp-comp-race-card-formation), so theming applies where --fd-colors-* are
 * registered and the exact hex is used otherwise.
 */

/*
 * XS/S (base): full-bleed surface per the Figma mobile node — top/bottom
 * borders only, no radius, full content width like Top Races. M+ (media query)
 * restores the bordered, rounded card.
 */
.styles-module__container--rd2W7 {
  width: 100%;
  min-width: 0; /* shrink within the stacked grid column (XS/S) so the carousel scrolls instead of bleeding the page */
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-bottom: 1px solid var(--fd-colors-border-default, #b0b7bf);
  overflow: hidden;
}

@media (min-width: 960px) {
  .styles-module__container--rd2W7 {
    border: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-radius: 4px;
  }
}

/*
 * "See all" mirrors the legacy Formation tertiary Button (size m): 4px radius,
 * 7px/8px padding, a transparent 1px border reserved at rest so the hover
 * border doesn't nudge the layout. On hover it fills with the tertiary
 * background-hover token (Figma-hex fallback, since --fd-colors-* aren't
 * registered app-wide). Text is already linkDefaultBase (#0070EB) = the tertiary
 * content-hover colour, so no colour change is needed. Gated by
 * `@media (hover: hover)` so touch devices don't get a stuck hover.
 */
.styles-module__seeAll--JeFo4 {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 7px 8px;
  flex-shrink: 0;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

@media (hover: hover) {
  .styles-module__seeAll--JeFo4:hover {
    background-color: var(
      --fd-colors-component-button-tertiary-background-hover,
      #eaf4ff
    );
    border-color: var(
      --fd-colors-component-button-tertiary-background-hover,
      #eaf4ff
    );
    box-shadow: var(
      --fd-shadows-elevations-bottom-low,
      0 2px 4px 0 rgba(10, 10, 10, 0.1)
    );
  }
}

.styles-module__subsectionHeading--pqtqj {
  text-transform: uppercase;
}

.styles-module__poolRow--Zgk0j {
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

/*
 * Row hover matches the legacy pool list: fill with the background-hover token
 * (Figma-hex fallback). Gated by `@media (hover: hover)` so touch devices don't
 * get a stuck hover after tapping.
 */
@media (hover: hover) {
  .styles-module__poolRow--Zgk0j:hover {
    background-color: var(--fd-colors-background-hover, #eaf4ff);
  }
}

.styles-module__poolRowInner--o23a2 {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

/* Last pool row in each subsection: no separator, standard bottom padding */
.styles-module__poolRowLast--Vsf5L {
  border-bottom: none;
  padding-bottom: 16px;
}

/*
 * The track row (Collapsible) is a flex item of the module's
 * `<Flex flexDirection="column">` rows wrapper. Without an explicit width it
 * sizes to the carousel's max-content width and overflows the module (whose
 * `.container` has overflow:hidden), which pushes the "sides" carousel's right
 * arrow outside the clipped module. width:100% pins it to the column width — the
 * same way `.container` / `.centralColumn` fill their flex-column parents — so
 * the inner carousel's overflow-x:auto scrolls instead. min-width:0 keeps it
 * shrinkable.
 */
.styles-module__row--LoAWB {
  width: 100%;
  min-width: 0;
}

/*
 * Inset separator between track rows. Formation has no per-row separator prop on
 * Collapsible, so the trigger gets a bottom border; the last row omits it (via
 * the isLast prop) since the container already provides the outer border.
 * Colour uses the Formation border token with the Figma hex as a fallback.
 */
.styles-module__rowSeparator--eVLH6 {
  border-bottom: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

/*
 * The card's flex-item shell is a plain div (carrying role="listitem"), NOT a
 * Formation `<Box>`: a Box injects emotion styling that overrode this CSS-module
 * width, so the shell sized to its content's max-content width and cards
 * rendered wider than the design (per the epic's Formation-Box footgun — style
 * the sized shell with a CSS-module class on a plain element, use Formation only
 * for text/icon content). Fixed width (not min-width): the Figma simplified card
 * is a fixed 134px (w-[134px]); with min-width the card grew to its content's
 * max-content width whenever that exceeded 134px (the two space-between rows). The
 * MTP fits within 134px (even a post-time), so a fixed width is safe.
 */
.styles-module__cardItem--knex_ {
  width: var(--card-width, 134px);
  flex-shrink: 0;
}

/*
 * The anchor fills the fixed-width shell (block → parent width). It's a real
 * link (SPA-navigated) whose child is the card's div content. Strip the default
 * anchor underline/colour so the card renders exactly like the Figma simplified
 * card; child text keeps its own Formation token colours.
 */
.styles-module__cardLink--d8nsi {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/*
 * Top Tracks loading skeleton. Mirrors the card shell (border/radius from Figma
 * border/default #B0B7BF, borderradius020 4px) and uses a pulse animation on
 * grey placeholder bars. Kept in CSS because Formation has no skeleton/animation
 * primitive; the layout itself is composed from Box/Flex in index.tsx.
 */
.styles-module__container--WxedB {
  width: 100%;
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-radius: 4px;
  overflow: hidden;
}

.styles-module__header--Fq3rv {
  height: 64px;
  box-sizing: border-box;
}

.styles-module__row--SoPLw {
  height: 56px;
  box-sizing: border-box;
}

.styles-module__row--SoPLw:not(:last-child) {
  border-bottom: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

.styles-module__bar--NWGSk {
  display: block;
  border-radius: 2px;
  background: var(--fd-colors-background-base, #eaf0f6);
  animation: styles-module__topTracksPulse--CggKZ 1.2s ease-in-out infinite;
}

.styles-module__titleBar--MgxSG {
  width: 96px;
  height: 16px;
}

.styles-module__seeAllBar--p5oKZ {
  width: 44px;
  height: 14px;
}

.styles-module__starBar--ExC2J {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.styles-module__nameBar--n8nf9 {
  width: 50%;
  height: 14px;
}

.styles-module__chevronBar--sdjFw {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@keyframes styles-module__topTracksPulse--CggKZ {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/*
 * TopTracksFormation — structural styles only.
 *
 * Typography, colours and spacing are handled by Formation Box/Flex/Text with
 * design tokens (see index.tsx). This module is limited to the card shell
 * (border/radius) and the "See all" button reset, mirroring TopPoolsFormation.
 *
 * Container border = border/default #B0B7BF, radius = borderradius020 (4px).
 * Colours use Formation token vars with the Figma hex as a fallback, so theming
 * applies where --fd-colors-* are registered and the exact hex is used otherwise.
 */

/*
 * XS/S (base): full-bleed surface per the Figma mobile node — top/bottom
 * borders only, no radius, full content width like Top Races. M+ (media query)
 * restores the bordered, rounded card.
 */
.styles-module__container--pEzUr {
  width: 100%;
  min-width: 0; /* shrink within the stacked grid column (XS/S) so the carousel scrolls instead of bleeding the page */
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-bottom: 1px solid var(--fd-colors-border-default, #b0b7bf);
  overflow: hidden;
}

@media (min-width: 960px) {
  .styles-module__container--pEzUr {
    border: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-radius: 4px;
  }
}

/*
 * "See all" mirrors the legacy Formation tertiary Button (size m): 4px radius,
 * 7px/8px padding, a transparent 1px border reserved at rest so the hover
 * border doesn't nudge the layout. On hover it fills with the tertiary
 * background-hover token (Figma-hex fallback, since --fd-colors-* aren't
 * registered app-wide). Text is already linkDefaultBase (#0070EB) = the tertiary
 * content-hover colour, so no colour change is needed. Gated by
 * `@media (hover: hover)` so touch devices don't get a stuck hover.
 */
.styles-module__seeAll--msSLm {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 7px 8px;
  flex-shrink: 0;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

@media (hover: hover) {
  .styles-module__seeAll--msSLm:hover {
    background-color: var(
      --fd-colors-component-button-tertiary-background-hover,
      #eaf4ff
    );
    border-color: var(
      --fd-colors-component-button-tertiary-background-hover,
      #eaf4ff
    );
    box-shadow: var(
      --fd-shadows-elevations-bottom-low,
      0 2px 4px 0 rgba(10, 10, 10, 0.1)
    );
  }
}

.styles-module__tag--unPQs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding: 1px 8px;
  border-radius: 12px;
  background: var(--fd-colors-system-info-background-subtle, #eaf4ff);
  white-space: nowrap;
  text-transform: uppercase;
}

.styles-module__header--VJqdj {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  box-sizing: border-box;
  background: var(--fd-colors-background-promotional, #011638);
  border-bottom: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

.styles-module__row--kWoiH {
  display: flex;
  align-items: center;
  gap: 8px;
}

.styles-module__trackName--DPS6o {
  flex: 1 1 0;
  min-width: 0;
}

/* Ellipsis the track name regardless of the element Formation Text renders. */
.styles-module__trackName--DPS6o > * {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.styles-module__promoIcon--sb0ql {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--fd-colors-content-on-dark, #ffffff);
}

.styles-module__raceList--mcf5d {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 16px 0;
  box-sizing: border-box;
}

.styles-module__leg--DqRH5 {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.styles-module__indicator--JnrKD {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
  flex-shrink: 0;
}

.styles-module__indicatorIcon--byyx0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--fd-colors-content-subtle, #6a6f73);
  border-radius: 20px;
  background: var(--fd-colors-background-surface, #ffffff);
  flex-shrink: 0;
}

.styles-module__indicatorDot--bC4f6 {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--fd-colors-content-subtle, #6a6f73);
}

.styles-module__indicatorConnector--uEIsI {
  flex: 1 1 0;
  min-height: 8px;
  width: 1px;
  border-radius: 4px;
  background: var(--fd-colors-system-neutral-background-default, #b0b7bf);
}

.styles-module__legBody--kWELq {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 12px;
  white-space: nowrap;
}

.styles-module__specialPickRow--uMcFe {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.styles-module__pools--CEBVc {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.styles-module__poolsBody--iPXuX {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  overflow-y: auto;
}

.styles-module__poolsList--qH0hU {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.styles-module__poolItem--JX6rc {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.styles-module__poolCode--mdE11 {
  min-width: 30px;
}

.styles-module__poolsFooter--hw2Rm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
  box-shadow: 0 -2px 4px 0 rgba(10, 10, 10, 0.1);
}

.styles-module__footerRow--n8A5L {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.styles-module__card--vL5TF {
  display: flex;
  flex-direction: column;
  height: 358px;
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-radius: 4px;
  overflow: hidden;
  /* Card is an anchor; strip the default underline (Box/anchor footgun). */
  text-decoration: none;
}

.styles-module__body--B33ED {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--fd-colors-background-surface, #ffffff);
  overflow: hidden;
}

.styles-module__footer--w2l7L {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--fd-colors-background-layer, #f7fbff);
  border-top: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

.styles-module__chevron--sAjEd {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--fd-colors-link-default-base, #0070eb);
}

.styles-module__chevron--sAjEd svg {
  width: 16px;
  height: 16px;
}

.styles-module__card--XAWBC {
  display: flex;
  flex-direction: column;
  height: 358px;
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-radius: 4px;
  overflow: hidden;
}

.styles-module__header--jBR8M {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--fd-colors-background-promotional, #011638);
}

.styles-module__body--_Sc8v {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.styles-module__footer--cJa1G {
  padding: 12px 16px;
  background: var(--fd-colors-background-layer, #f7fbff);
  border-top: 1px solid var(--fd-colors-border-subtle, #c6d3e1);
}

.styles-module__bar--eDCoj {
  display: block;
  border-radius: 2px;
  background: var(--fd-colors-background-base, #eaf0f6);
  animation: styles-module__specialWagersPulse--0IR2o 1.2s ease-in-out infinite;
}

.styles-module__titleBar--rmiQT {
  width: 70%;
  height: 16px;
  background: rgba(255, 255, 255, 0.24);
}

.styles-module__mtpBar--Fdp95 {
  width: 40%;
  height: 12px;
  background: rgba(255, 255, 255, 0.24);
}

.styles-module__rowBar--WWNR_ {
  width: 80%;
  height: 14px;
}

.styles-module__footerBar--_FbLl {
  width: 30%;
  height: 14px;
}

@keyframes styles-module__specialWagersPulse--0IR2o {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/*
 * Special Wagers module. Per the desktop Figma nodes (5275:134379 / 5275:120913
 * / 5275:125961) the module is a bordered, rounded surface — matching the other
 * Formation homepage modules (Top Tracks / FDTV Picks). The FormationCarousel
 * supplies the title + paging arrows header; the cards row keeps a 16px
 * horizontal inset + 16px bottom padding. Colors use Formation token vars with
 * Figma-hex fallbacks.
 */
/*
 * XS/S (base): full-bleed surface per the Figma mobile node 5270:99992 —
 * top/bottom borders only, no radius, full content width like Top Races. M+
 * (media query) restores the bordered, rounded card per the desktop nodes.
 */
.styles-module__container--b62lL {
  width: 100%;
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-bottom: 1px solid var(--fd-colors-border-default, #b0b7bf);
  overflow: hidden;
}

.styles-module__header--wBcxQ {
  display: flex;
  align-items: center;
  /* Figma SectionHeader: 48px (mobile/XS-S) → 64px (desktop, see media query) */
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px;
}

@media (min-width: 960px) {
  .styles-module__container--b62lL {
    border: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-radius: 4px;
  }

  .styles-module__header--wBcxQ {
    height: 64px;
  }
}

.styles-module__carouselWrapper--CU2rv {
  padding: 12px 16px 16px;
}

/*
 * Loading-state row does not use FormationCarousel, so it lays the skeleton
 * cards out in the same horizontal row (matching the 8px gap + .carouselItem
 * width below).
 */
.styles-module__skeletonList--BVllJ {
  display: flex;
  gap: 8px;
  overflow: hidden;
  padding: 0 16px 16px;
}

/*
 * Fixed per-card width (Figma 318px at every breakpoint) supplied from JS via
 * useSpecialWagersCarousel through --sw-card-width, so the responsive visible
 * count emerges from container width + horizontal scroll.
 */
.styles-module__carouselItem--GzVet {
  width: var(--sw-card-width, 318px);
  flex-shrink: 0;
}

/*
 * Tips and Picks video card — fixed 280px wide at every breakpoint (Figma
 * "Video Card", node 5275:123196). Cover 168px + text 89px, so every card is an
 * identical size and the cards fill the carousel row instead of collapsing to
 * their content width. The shell is styled here (CSS modules) rather than via
 * Formation `Box`/`Flex` style props — see index.tsx for why. Colors use
 * Formation token vars with Figma-hex fallbacks (--fd-colors-* aren't
 * registered app-wide).
 */
.styles-module__card--kZVAJ {
  display: flex;
  flex-direction: column;
  width: 280px;
  flex-shrink: 0;
  padding: 0;
  text-align: left;
  background: var(--fd-colors-background-surface, #ffffff);
  border: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.styles-module__cover--ZK3wh {
  position: relative;
  height: 168px;
  width: 100%;
}

/*
 * Text block is a fixed 89px (Figma "Video Card"; cover 168px + text 89px).
 * Pinning it — alongside the fixed cover — makes every card an identical height
 * regardless of title length, so cards are equal-sized and fill the carousel
 * row instead of leaving white space under shorter cards.
 */
.styles-module__text--Nwj_7 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 16px;
  height: 89px;
  box-sizing: border-box;
}

.styles-module__thumbnail--_2hwm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.styles-module__playButton--m1JLP {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
}

.styles-module__duration--fwzFE {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  padding: 1px 4px 0;
  border-radius: 2px;
  background: var(--fd-colors-brand-secondary-shade, #011638);
}

/*
 * Title always reserves two lines (Figma "Video Card" title is a fixed 36px),
 * so the title + date sit at consistent positions across cards.
 * -webkit-line-clamp truncates long titles with an ellipsis.
 */
.styles-module__title--QG6gv {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 36px;
  overflow: hidden;
}

.styles-module__date--zwGxU {
  display: block;
  width: 100%;
  text-align: right;
  text-transform: uppercase;
}

/*
 * Loading placeholder for the video card. The shell + text-block geometry is
 * shared from the card's own module (../TipsAndPicksCard/styles.module.css) so
 * it can't drift; this file only carries the shimmer bars and a cursor reset
 * (the shared `.card` sets `cursor: pointer` for the interactive card).
 */
.styles-module__skeleton--kAj4F {
  cursor: default;
}

.styles-module__bar--AMl5s {
  display: block;
  border-radius: 2px;
  background: var(--fd-colors-background-base, #eaf0f6);
  animation: styles-module__tipsPicksPulse--MYrOy 1.2s ease-in-out infinite;
}

.styles-module__titleBar--b0wUx {
  width: 80%;
  height: 36px;
}

.styles-module__dateBar--B_kkW {
  width: 40%;
  height: 12px;
  align-self: flex-end;
}

@keyframes styles-module__tipsPicksPulse--MYrOy {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/*
 * Tips and Picks module. Per the desktop Figma node (5275:123196) the module is
 * a bordered, rounded surface matching the other Formation homepage modules
 * (Top Tracks / FDTV Picks / Special Wagers). The FormationCarousel supplies
 * the title + paging-arrows header; the cards row keeps a 16px horizontal inset
 * + 16px bottom padding. Colors use Formation token vars with Figma-hex
 * fallbacks (the --fd-colors-* vars are not registered app-wide).
 */
/*
 * XS/S (base): full-bleed surface per the Figma mobile node — top/bottom
 * borders only, no radius, full content width like Top Races. M+ (media query)
 * restores the bordered, rounded card per the desktop node 5275:123196.
 */
.styles-module__container--UDX6h {
  width: 100%;
  min-width: 0; /* shrink within the stacked grid column (XS/S) so the carousel scrolls instead of bleeding the page */
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-bottom: 1px solid var(--fd-colors-border-default, #b0b7bf);
  overflow: hidden;
}

.styles-module__header--LjzD2 {
  display: flex;
  align-items: center;
  /* Figma SectionHeader: 48px (mobile/XS-S) → 64px (desktop, see media query) */
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px;
}

@media (min-width: 960px) {
  .styles-module__container--UDX6h {
    border: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-radius: 4px;
  }

  .styles-module__header--LjzD2 {
    height: 64px;
  }
}

.styles-module__carouselWrapper--OQkVr {
  padding: 12px 16px 16px;
}

/*
 * Loading-state row does not use FormationCarousel, so it lays the skeleton
 * cards out in the same horizontal row (matching the 8px gap + 280px card
 * width below).
 */
.styles-module__skeletonList--CQ3Xx {
  display: flex;
  gap: 8px;
  overflow: hidden;
  padding: 0 16px 16px;
}

/*
 * Fixed 280px card at every breakpoint (Figma "Video Card" on both the desktop
 * and mobile nodes), so the responsive visible count emerges from the container
 * width + horizontal scroll rather than a per-breakpoint width.
 */
.styles-module__carouselItem--I4jVZ {
  width: 280px;
  flex-shrink: 0;
}

/*
 * Border-color override, scoped to the Formation homepage's Upcoming Races
 * module only.
 *
 * The shared CompactRaceCardSlider (@urp/shared) defaults its container top/
 * bottom border to COLORS.borderSubtle, but the Figma "Upcoming Races Module"
 * uses border/default (#b0b7bf) — the same border the cards and the Top Races
 * strip use. We deliberately do NOT change the shared component (it also renders
 * in My Stable's "running today" slider, which must stay as-is), so the correct
 * color is applied here via a scoped rule targeting the slider root by its fixed
 * data-qa-label. The class + attribute selector (specificity 0,2,0) outranks the
 * slider's emotion border-color class (0,1,0), so this wins without !important.
 */
.styles-module__container--NbbEv [data-qa-label="compact-race-card-slider"] {
  border-color: var(--fd-colors-border-default, #b0b7bf);
}

/*
 * Module container. XS/S: full-bleed strip with top/bottom 1px border only, no
 * radius (Figma "SEO Module / Mobile" node 5270:99998). M+: bordered card with a
 * full 1px border + 4px radius (node 5275:134383). border/default = #b0b7bf,
 * background/surface = #ffffff.
 */
.styles-module__container--RvPo7 {
  width: 100%;
  box-sizing: border-box;
  background: var(--fd-colors-background-surface, #ffffff);
  border-top: 1px solid var(--fd-colors-border-default, #b0b7bf);
  border-bottom: 1px solid var(--fd-colors-border-default, #b0b7bf);
}

@media (min-width: 960px) {
  .styles-module__container--RvPo7 {
    border: 1px solid var(--fd-colors-border-default, #b0b7bf);
    border-radius: 4px;
  }
}

/*
 * Section header. XS/S: 12px/16px padding, 16px title. M+: 64px tall, 16px
 * padding, 18px title. Title = Inter Bold 700, content/strong #05285a, lh 1.25.
 */
.styles-module__sectionHeader--H0n_Y {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.styles-module__sectionTitle--ZZTvJ {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--fd-colors-content-strong, #05285a);
}

@media (min-width: 960px) {
  .styles-module__sectionHeader--H0n_Y {
    height: 64px;
    padding: 16px;
  }

  .styles-module__sectionTitle--ZZTvJ {
    font-size: 18px;
  }
}

/*
 * SEO body — trusted Storyblok HTML injected via dangerouslySetInnerHTML.
 * body/small: Inter Regular 400, 12px, content/default #1c1d1d, lh 1.25. Links
 * are #0070eb underlined. The 16px inter-block rhythm (Figma gap space4) comes
 * from the paragraph/list margins below.
 *
 * font-size / line-height are set explicitly on the injected elements (not just
 * the .content wrapper) so the app's global element typography — direct `p`/`li`
 * rules that would otherwise override an inherited value — can't inflate the SEO
 * copy above the Figma 12px.
 */
.styles-module__content--zcpL8 {
  padding: 0 16px 16px;
  color: var(--fd-colors-content-default, #1c1d1d);
}

.styles-module__content--zcpL8,
.styles-module__content--zcpL8 p,
.styles-module__content--zcpL8 ul,
.styles-module__content--zcpL8 ol,
.styles-module__content--zcpL8 li,
.styles-module__content--zcpL8 span,
.styles-module__content--zcpL8 a {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

.styles-module__content--zcpL8 p {
  margin: 0 0 16px;
}

.styles-module__content--zcpL8 p:last-child {
  margin-bottom: 0;
}

/*
 * The Storyblok copy uses empty <p></p> as block separators; with a bottom
 * margin they double the gap. Drop them so the block rhythm stays a uniform 16px.
 */
.styles-module__content--zcpL8 p:empty {
  display: none;
}

/*
 * Figma renders the sub-items (e.g. "Major events", "Easy deposits") flush-left
 * with no bullet markers — the design mocks them as plain lines, not an indented
 * list. The live copy uses <ul>/<li>, so flatten it: no marker, no indent.
 */
.styles-module__content--zcpL8 ul,
.styles-module__content--zcpL8 ol {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

.styles-module__content--zcpL8 a {
  color: var(--fd-colors-content-link, #0070eb);
  text-decoration: underline;
}