/* release 371 (new design): Games (/betting/markets), one game (/games/<sport>/<id>), Live (/live) and the market board
   (/betting/markets?view=board) in the designer's look: white page, Nunito, indigo #5663F0 actions, 8px corners, white cards
   with the soft shadow. The designer only drew the marketing pages, so the product screens (game list, price tables, live
   scores) are restyled here in the same style; every hook the page scripts use is unchanged. Loaded after the older sheets
   and scoped to body.b371p2 so it wins over them without !important (except where an older rule uses it).
   Builds on static/css/sx_brand.css (tokens --b-*, .b-section, .b-split, .b-media, .b-checks, .b-cta ...). */

body.b371p2 { background: #fff; color: var(--b-ink); }
body.b371p2 .site-shell { background: #fff; }

/* ---------------------------------------------------------------- the short white title area above each tool */
body.b371p2 .b371-title { text-align: center; padding: 40px 0 24px; }
body.b371p2 .b371-title .b371-eyebrow { margin: 0 0 8px; color: var(--b-primary-600); font: 800 14px/1.3 var(--b-font); letter-spacing: .06em; text-transform: uppercase; }
body.b371p2 .b371-title h1 { margin: 0; color: var(--b-ink); font: 800 48px/1.08 var(--b-font); letter-spacing: -.015em; }
body.b371p2 .b371-title .b371-lead { margin: 12px auto 0; max-width: 46rem; color: var(--b-text); font: 600 20px/1.45 var(--b-font); }
body.b371p2 .b371-title .b371-meta { margin: 10px auto 0; color: var(--b-muted); font-size: 15px; }
@media (max-width: 767px) {
  body.b371p2 .b371-title { padding: 16px 0 12px; }
  body.b371p2 .b371-title h1 { font-size: 28px; line-height: 1.15; }
  body.b371p2 .b371-title .b371-lead { font-size: 16px; margin-top: 6px; }
  body.b371p2 .b371-title .b371-eyebrow { font-size: 12px; margin-bottom: 4px; }
}

/* ---------------------------------------------------------------- Games and game page: the tool in brand cards */
body.b371p2 .bt { max-width: 1120px; color: var(--b-ink); font-family: var(--b-font); padding-top: 0; }
body.b371p2 .bt .bt-hero { text-align: center; padding: 40px 0 24px; }
body.b371p2 .bt .bt-hero h1 { margin: 0; color: var(--b-ink); font: 800 48px/1.08 var(--b-font); letter-spacing: -.015em; }
body.b371p2 .bt .bt-hero .bt-lead { margin: 12px auto 0; max-width: 46rem; color: var(--b-text); font: 600 20px/1.45 var(--b-font); }
@media (max-width: 767px) {
  body.b371p2 .bt .bt-hero { padding: 14px 0 10px; }
  body.b371p2 .bt .bt-hero h1 { font-size: 26px; line-height: 1.15; }
  /* the lead stays off phones so the first price stays on the first screen (release 370) */
  body.b371p2 .bt .bt-hero .bt-lead { display: none; }
}

/* cards: white, 8px, the designer's soft shadow instead of a grey line */
body.b371p2 .bt :is(.bt-card, .bt-g) { border: 1px solid var(--b-line); border-radius: var(--b-radius); box-shadow: 0 4px 18px rgba(0, 0, 0, .06); background: #fff; }
body.b371p2 .bt .bt-g.gx { padding: 16px 20px 12px; }
body.b371p2 .bt .bt-g.gx:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .10); border-color: #D5D8FB; }
@media (max-width: 640px) {
  body.b371p2 .bt .bt-pick.bt-filters { border: 0; box-shadow: none; background: none; }
  body.b371p2 .bt .bt-g.gx { padding: 12px 12px 8px; }
}

/* the view tabs, sport tabs, date and odds toggles: the designer's pill tabs, indigo when chosen */
body.b371p2 .bt :is(.bt-views, .bt-tabs, .gp-tabs) { background: var(--b-soft); border-radius: var(--b-radius); }
body.b371p2 .bt :is(.bt-views, .bt-tabs, .gp-tabs) button { color: var(--b-ink); font-family: var(--b-font); font-weight: 700; border-radius: 6px; }
body.b371p2 .bt :is(.bt-views, .bt-tabs, .gp-tabs) button:hover { background: var(--b-primary-tint); color: var(--b-ink); }
body.b371p2 .bt :is(.bt-views, .bt-tabs, .gp-tabs) button:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--b-primary); color: #fff; box-shadow: none; }
body.b371p2 .bt :is(.bt-views, .bt-tabs) button:is([aria-selected="true"], [aria-pressed="true"]) :is(.bt-pro-tag, .dw-live-count) { background: #fff !important; color: var(--b-primary-700) !important; border-color: #fff !important; }
@media (max-width: 640px) {
  body.b371p2 .bt .bt-filters .bt-fams { background: none; }
  body.b371p2 .bt .bt-filters .bt-fams button { border-color: var(--b-line); border-radius: 999px; color: var(--b-ink); font-weight: 700; }
  body.b371p2 .bt .bt-filters .bt-fams button[aria-selected="true"] { background: var(--b-primary); border-color: var(--b-primary); color: #fff; }
  body.b371p2 .bt .bt-filters .bt-tabs.is-date button[aria-pressed="true"] { box-shadow: none; }
}
body.b371p2 .bt .bt-linkbtn, body.b371p2 .bt .gx-open, body.b371p2 .bt .gx-rec, body.b371p2 .bt .dw-record { color: var(--b-primary-600); font-weight: 700; }

/* fields */
body.b371p2 .bt :is(select, .bt-books-btn, .bt-quick-sum, .dw-settings > summary) { border-color: #CFD1D1; border-radius: var(--b-radius); font-family: var(--b-font); color: var(--b-ink); }
body.b371p2 .bt .bt-quick > .bt-field > :is(label, .bt-label), body.b371p2 .bt .bt-pick .bt-field > :is(label, .bt-label) { color: var(--b-text); font-weight: 700; }
body.b371p2 .bt .bt-quick-sum b, body.b371p2 .bt .bt-quick-sum [class*="change"] { color: var(--b-primary-600); }

/* the game card: league and time, team rows, a price tile per market with the best price and its book */
body.b371p2 .bt .gx-head { color: var(--b-muted); font-size: 13px; }
body.b371p2 .bt .gx-head .bt-league { color: var(--b-ink); font-weight: 800; }
body.b371p2 .bt .gx-team { color: var(--b-ink); font-weight: 700; font-size: 16px; }
body.b371p2 .bt .gx-row.is-head { color: var(--b-muted); font-weight: 700; font-size: 12px; }
body.b371p2 .bt .bt-tile.gx-tile { border: 1px solid var(--b-line); background: #fff; border-radius: var(--b-radius); transition: border-color .15s, background-color .15s; }
body.b371p2 .bt a.bt-tile.gx-tile:hover { border-color: var(--b-primary); background: var(--b-primary-50); }
body.b371p2 .bt .bt-tile.gx-tile b { color: var(--b-ink); font-weight: 800; font-size: 15px; }
body.b371p2 .bt .bt-tile.gx-tile small { color: var(--b-muted); font-size: 11px; }
body.b371p2 .bt .bt-tile.gx-tile i { color: var(--b-text); }
body.b371p2 .bt .bt-tile.gx-tile.is-empty { background: var(--b-soft); border-color: transparent; }
body.b371p2 .bt .bt-g.gx.is-stale .bt-tile.gx-tile b { color: var(--b-muted); }   /* expired prices read grey but still 4.5:1 */
body.b371p2 .bt .gx-model { color: var(--b-text); font-size: 13px; }
body.b371p2 .bt .gx-model b { color: var(--b-ink); font-weight: 800; }
body.b371p2 .bt .bt-track.gx-save { border-color: var(--b-primary); border-radius: var(--b-radius); color: var(--b-ink); font-weight: 700; font-family: var(--b-font); }
body.b371p2 .bt .bt-track.gx-save:hover { background: var(--b-primary-50); }
@media (max-width: 640px) {
  body.b371p2 .bt .gx-team { font-size: 15px; }
  body.b371p2 .bt .bt-tile.gx-tile b { font-size: 14px; }
  body.b371p2 .bt .bt-tile.gx-tile small { font-size: 10px; }
}

/* group headings, the price status line and the age of the prices */
body.b371p2 .bt .bt-alert h2 { color: var(--b-ink); font-family: var(--b-font); font-weight: 800; }
body.b371p2 .bt .bt-alert p { color: var(--b-text); }
body.b371p2 .bt :is(.bt-group, .bt-day-list) > :is(h2, h3) { font-family: var(--b-font); }

/* tables: the best price in each column is the indigo cell; book names bold; capture times kept */
body.b371p2 .bt :is(.bt-table-wrap, .dw-table-scroll) { border: 1px solid var(--b-line); border-radius: var(--b-radius); background: #fff; }
body.b371p2 .bt .bt-table th { color: var(--b-ink); }
body.b371p2 .bt .bt-table thead th, body.b371p2 .bt .dw-game-table thead th { background: var(--b-soft); color: var(--b-text); font-weight: 800; }
body.b371p2 .bt .bt-table tbody th[scope="row"] { font-weight: 700; }
body.b371p2 .bt .bt-table td.is-best, body.b371p2 .bt .gp-panel .bt-table td.is-best { background: var(--b-primary-50); color: var(--b-primary-700); font-weight: 800; box-shadow: inset 3px 0 0 var(--b-primary); }
body.b371p2 .bt .bt-table td.is-best span { color: var(--b-primary-700); }
body.b371p2 .bt .bt-table .bt-muted { color: var(--b-muted); }
body.b371p2 .bt .dw-game-table td strong { color: var(--b-ink); font-weight: 800; }

/* the one-game page */
body.b371p2 .bt.bt-gp .gp-back a { color: var(--b-primary-600); font-weight: 700; }
body.b371p2 .bt.bt-gp .gp-head { text-align: center; padding: 28px 0 18px; }
body.b371p2 .bt.bt-gp .gp-head .bt-eyebrow { color: var(--b-primary-600); font: 800 14px/1.3 var(--b-font); letter-spacing: .06em; text-transform: uppercase; }
body.b371p2 .bt.bt-gp .gp-title { color: var(--b-ink); font: 800 44px/1.1 var(--b-font); letter-spacing: -.015em; }
body.b371p2 .bt.bt-gp .gp-head .b371-lead { margin: 10px auto 0; max-width: 44rem; color: var(--b-text); font: 600 18px/1.45 var(--b-font); }
body.b371p2 .bt.bt-gp .gp-head .gp-h-note { color: var(--b-muted); }
body.b371p2 .bt.bt-gp .gp-tabs { margin-left: auto; margin-right: auto; }
body.b371p2 .bt.bt-gp .gp-books h2, body.b371p2 .bt.bt-gp .ph-h { color: var(--b-ink); font-family: var(--b-font); font-weight: 800; }
body.b371p2 .bt.bt-gp .gp-books h2 small { color: var(--b-muted); }
body.b371p2 .bt.bt-gp .ph { border: 1px solid var(--b-line); border-radius: var(--b-radius); box-shadow: 0 4px 18px rgba(0, 0, 0, .06); background: #fff; }
body.b371p2 .bt.bt-gp .dw-market-details > summary, body.b371p2 .bt.bt-gp details > summary { color: var(--b-ink); font-weight: 700; }
@media (max-width: 767px) {
  body.b371p2 .bt.bt-gp .gp-head { text-align: left; padding: 8px 0 8px; }
  body.b371p2 .bt.bt-gp .gp-title { font-size: 26px; line-height: 1.15; }
  body.b371p2 .bt.bt-gp .gp-head .b371-lead { display: none; }
  body.b371p2 .bt.bt-gp .gp-head .bt-eyebrow { font-size: 12px; }
}

/* the small print at the foot of the tool */
body.b371p2 .bt .bt-foot { color: var(--b-muted); border-top-color: var(--b-line); }
body.b371p2 .bt .bt-foot a { color: var(--b-text); }
body.b371p2 .bt .bt-deeper a { border-color: var(--b-line); border-radius: var(--b-radius); color: var(--b-ink); font-weight: 700; }
body.b371p2 .bt .bt-deeper a:hover { border-color: var(--b-primary); background: var(--b-primary-50); }

/* ---------------------------------------------------------------- the designer's sections under the tool */
body.b371p2 .b371-more { font-family: var(--b-font); color: var(--b-ink); background: #fff; }
body.b371p2 .b371-more .b-section { padding: 96px 0; }
body.b371p2 .b371-more .b-section.is-first { padding-top: 72px; }
body.b371p2 .b371-more .b-split > div:first-child .b-text { margin-top: 12px; }
body.b371p2 .b371-more .b-checks { margin-top: 24px; }
body.b371p2 .b371-more .b371-plan-cards { margin-top: 40px; }
body.b371p2 .b371-more .b371-plan-cards .b-card { height: 100%; }
body.b371p2 .b371-more .b371-plan-cards .b-h3 { margin-top: 16px; font-size: 20px; }
body.b371p2 .b371-more .b371-plan-cards .b-text { margin-top: 8px; }
body.b371p2 .b371-more .b371-tabs-wrap { margin-top: 28px; }
body.b371p2 .b371-more .b371-tabpanel { margin-top: 32px; }
body.b371p2 .b371-more .b371-tabpanel[hidden] { display: none; }
body.b371p2 .b371-more .b371-tabpanel .b-card { padding: 40px; }
body.b371p2 .b371-more .b371-tabpanel .b-split { gap: 48px; }
body.b371p2 .b371-more .b371-tag { display: inline-flex; margin-top: 16px; }
body.b371p2 .b371-more .b-cta .b-card .b-text { margin-top: 12px; }
body.b371p2 .b371-more .b-cta .b-card .b-btns { margin-top: 24px; justify-content: center; }
body.b371p2 .b371-more .b-cta-plain .b-btns { margin-top: 32px; justify-content: center; }
body.b371p2 .b371-more .b-cta-plain .b-btn-light + .b-btn-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .9); }
body.b371p2 .b371-more .b-cta-plain .b-btn-light + .b-btn-light:hover { background: rgba(255, 255, 255, .12); }
body.b371p2 .b371-more .b-media img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 767px) {
  body.b371p2 .b371-more .b-section { padding: 56px 0; }
  body.b371p2 .b371-more .b-section.is-first { padding-top: 48px; }
  body.b371p2 .b371-more .b371-tabpanel .b-card { padding: 24px; }
  body.b371p2 .b371-more .b-tabs { display: flex; }
  body.b371p2 .b371-more .b-tabs button { flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 8px 10px; }
}

/* ---------------------------------------------------------------- Live: the scoreboard in brand cards */
body.b371p2.lv-page { background: #fff; font-family: var(--b-font); }
html:not([data-theme="dark"]) body.b371p2.lv-page, body.b371p2.lv-page {
  --lv-bg: #fff; --lv-panel: #fff; --lv-panel-2: var(--b-soft); --lv-line: var(--b-line); --lv-line-soft: #EEEFEF;
  --lv-ink: var(--b-ink); --lv-blue: var(--b-primary-600); --lv-head: var(--b-font); --lv-body: var(--b-font); }
body.b371p2 .lv { max-width: 1180px; padding-top: 0; }
body.b371p2 .lv-head { display: block; text-align: center; padding: 40px 0 8px; margin: 0; }
body.b371p2 .lv-head h1 { font: 800 48px/1.08 var(--b-font); letter-spacing: -.015em; color: var(--b-ink); }
body.b371p2 .lv-head .b371-lead { margin: 12px auto 0; max-width: 44rem; color: var(--b-text); font: 600 20px/1.45 var(--b-font); }
body.b371p2 .lv-head .lv-status { justify-content: center; margin-top: 16px; }
body.b371p2 .lv-refresh { width: 44px; height: 44px; border-color: var(--b-primary); border-radius: var(--b-radius); }
body.b371p2 .lv-refresh:hover { background: var(--b-primary-50); }
body.b371p2 .dw-live-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin: 4px 0 20px; }
body.b371p2 .dw-live-actions a:not(.bt-btn-primary) { color: var(--b-primary-600); font-weight: 700; }
body.b371p2 .lv-bar { background: #fff; border-bottom-color: var(--b-line); }
body.b371p2 .lv-days { border: 0; background: var(--b-soft); border-radius: var(--b-radius); padding: 4px; }
body.b371p2 .lv-day { border-radius: 6px; min-height: 44px; }
body.b371p2 .lv-day:hover { background: var(--b-primary-tint); }
html:not(#lv371a):not(#lv371b):not(#lv371c) body.b371p2 .lv-day[aria-selected="true"], html:not(#lv371a):not(#lv371b):not(#lv371c) body.b371p2 .lv-day[aria-selected="true"] small { background: var(--b-primary); color: #fff !important; }
body.b371p2 .lv-day[aria-selected="true"] small { background: transparent !important; }
body.b371p2 .lv-chip { min-height: 44px; height: auto; border-color: var(--b-line); color: var(--b-ink); font-weight: 700; }
body.b371p2 .lv-chip:hover { border-color: var(--b-primary); }
html:not(#lv371a):not(#lv371b):not(#lv371c) body.b371p2 .lv-chip[aria-pressed="true"] { background: var(--b-primary); border-color: var(--b-primary); color: #fff !important; }
body.b371p2 .lv-chip--live[aria-pressed="true"] { background: #B42318; border-color: #B42318; }
html:not(#lv371a):not(#lv371b):not(#lv371c) body.b371p2 .lv-chip--live[aria-pressed="true"] { background: #B42318; border-color: #B42318; }
body.b371p2 :is(.lv-group, .lv-card, .lv-score-strip) { border-color: var(--b-line); border-radius: var(--b-radius); box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
body.b371p2 .lv-group__head { background: #fff; padding: 14px 16px; }
body.b371p2 .lv-group__head h2 { font: 800 16px/1.3 var(--b-font); color: var(--b-ink); }
body.b371p2 .lv-group__link { color: var(--b-primary-600) !important; font-weight: 700; }
body.b371p2 .lv-row:hover { background: var(--b-primary-50); }
body.b371p2 .lv-name { font-weight: 600; }
body.b371p2 .lv-score { font: 800 17px var(--b-font); }
body.b371p2 .lv-call__pick > em { color: var(--b-primary-600); font-family: var(--b-font); }
body.b371p2 .lv-odds > div { border-radius: var(--b-radius); }
body.b371p2 .lv-odds .is-pick { border-color: var(--b-primary); background: var(--b-primary-50); }
body.b371p2 .lv-tbl td.is-best { color: var(--b-primary-700); background: var(--b-primary-50); }
body.b371p2 .dw-forecast-context > summary { min-height: 44px; display: flex; align-items: center; color: var(--b-ink); font-weight: 700; }
body.b371p2 .lv-legend a { color: var(--b-primary-600); }
@media (max-width: 680px) {
  body.b371p2 .lv-head { padding: 14px 0 4px; text-align: left; }
  body.b371p2 .lv-head h1 { font-size: 28px; }
  body.b371p2 .lv-head .b371-lead { font-size: 15px; margin-top: 4px; }
  body.b371p2 .lv-head .lv-status { justify-content: flex-start; margin-top: 8px; }
  body.b371p2 .dw-live-actions { justify-content: flex-start; margin-bottom: 8px; }
}

/* ---------------------------------------------------------------- the market board (?view=board) */
body.b371p2.mb-page { --mk-bg: #fff; --mk-card: #fff; --mk-card-2: var(--b-soft); --mk-ink: var(--b-ink); --mk-muted: var(--b-muted); --mk-line: var(--b-line); --sans: var(--b-font); background: #fff; }
body.b371p2 .mk-head { display: block; text-align: center; padding: 32px 0 8px; }
body.b371p2 .mk-head h1 { font: 800 44px/1.1 var(--b-font); letter-spacing: -.015em; }
body.b371p2 .mk-head p { margin: 10px auto 0; max-width: 44rem; color: var(--b-text); font: 600 18px/1.45 var(--b-font); }
body.b371p2 .toolbar { justify-content: center; }
body.b371p2 .toolbar select { border-color: #CFD1D1; border-radius: var(--b-radius); min-height: 44px; font-size: 16px; }
body.b371p2 :is(.mk-card, .mk-read) { border-radius: var(--b-radius); box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
body.b371p2 .mk-row.is-fav .ch, body.b371p2 .mk-side.is-fav .pc { color: var(--b-primary-700); }
body.b371p2 .mk-row.is-fav .bar i, body.b371p2 .mk-split i.is-fav { background: var(--b-primary); }
body.b371p2 .mk-note a { color: var(--b-primary-600); }
@media (max-width: 640px) {
  body.b371p2 .mk-head { text-align: left; padding: 12px 0 4px; }
  body.b371p2 .mk-head h1 { font-size: 28px; }
  body.b371p2 .mk-head p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.b371p2 .bt .bt-tile.gx-tile, body.b371p2 .bt .bt-g.gx { transition: none; }
}

/* release 371 (new design): the "One game, every price" line under the game's title */
body.b371p2 .bt.bt-gp .b371-gp-lead { margin: -6px auto 24px; max-width: 44rem; text-align: center; color: var(--b-text); font: 400 17px/1.5 var(--b-font); }
body.b371p2 .bt.bt-gp .b371-gp-lead b { color: var(--b-primary-600); font-weight: 800; }
body.b371p2 .bt.bt-gp .gp-head .bt-note { color: var(--b-muted); }
@media (max-width: 767px) { body.b371p2 .bt.bt-gp .b371-gp-lead { display: none; } }
/* the sportsbook / state / odds card centred under the title on wide screens */
@media (min-width: 768px) { body.b371p2 .bt.bt-gp .bt-pick.is-compact { margin-left: auto; margin-right: auto; } }

/* release 371 (new design): the "Change" link takes the indigo underline; the odds toggle stays on one line on wide screens;
   team names bold like the designer's card titles */
body.b371p2 .bt .bt-quick-sum b { text-decoration-color: var(--b-primary); }
@media (min-width: 641px) {
  body.b371p2 .bt .bt-quick > .bt-field:has(.bt-tabs) { flex: 0 0 auto; }
  body.b371p2 .bt .bt-quick .bt-tabs.is-small { flex-wrap: nowrap; }
}
body.b371p2 .bt .gx-team :is(.gx-full, .gx-short) { font-weight: 700; }
body.b371p2 .bt .bt-hero .bt-lead { max-width: 52rem; }
/* release 371 (new design): one even row line in the game table; the best price is a plain indigo cell (no side bar); Live's
   filter bar on white (the cream/light layers paint it grey) */
body.b371p2 .bt .dw-game-table :is(th, td) { border-bottom-color: var(--b-line); }
body.b371p2 .bt .dw-game-table tbody th { color: var(--b-ink); font-weight: 700; }
body.b371p2 .bt .bt-table td.is-best, body.b371p2 .bt .gp-panel .bt-table td.is-best { box-shadow: none; }
html.sx-cream[data-sx-page="live"] body.b371p2 .lv-bar, html body.b371p2 .lv-bar { background: #fff; border-bottom: 1px solid var(--b-line); }
/* release 371 (new design): the market board keeps the footer below the first screen while its cards load (CLS) */
body.b371p2 .mb-main { min-height: calc(100vh - 72px); box-sizing: border-box; }
body.b371p2 .mk-note { margin: 0 0 16px; text-align: center; }
@media (max-width: 640px) { body.b371p2 .mk-note { text-align: left; } }
/* release 371 (new design): Live keeps the space for the scoreboard until its script draws it, so the sections below don't jump (CLS) */
body.b371p2 .lv-board:not(:has(.lv-group, .lv-empty, .lv-score-strip)) { min-height: 100vh; }
/* release 371 (new design): expired prices are marked by a dashed tile, not faded, so their numbers keep 4.5:1 */
body.b371p2 .bt .bt-g.is-stale :is(.bt-tile, .bt-cmp-t) { opacity: 1; border-style: dashed; }