/* Homepage product demos: the hero window (an app frame with four tools) and three feature cards (player history,
   line shopping, a live game). Zinc surfaces with soft depth, tiles for each block of a card, team logos and
   headshots, mono numerals, violet only for what is chosen, green for what is up. Sample notes live in tooltips.
   Markup: the window, the How it works steps, the questions and the closing call to action in landing.html (built
   from sample data), the cards in landing-live.js, the pick tracker in landing-header.js and the plan cards in
   landing-pricing.js. */

.dm {
  --dm-raise-2:#28282e; --dm-bar:#2a2a31; --dm-bar-hi:#3a3a43;
  --dm-line:rgb(255 255 255/.07); --dm-line-2:rgb(255 255 255/.11);
  --dm-text:var(--vo-text,#f4f4f5); --dm-text-2:var(--vo-text-2,#c4c4cc); --dm-text-3:var(--vo-text-3,#9b9ba5); --dm-text-4:#72727c;
  --dm-up:var(--vo-up,#2BD07F); --dm-up-hi:#5ce5a3; --dm-up-soft:rgb(43 208 127/.13); --dm-down:#ff7b7b; --dm-gold:#f7b955;
  --dm-violet-text:#c4b5ff;
  --dm-mono:var(--vo-mono,'JetBrains Mono',ui-monospace,monospace);
  --dm-ease:cubic-bezier(.2,.7,.2,1);
  color:var(--dm-text);
  font-family:var(--vo-font,'Plus Jakarta Sans',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
}
.dm *, .dm *::before, .dm *::after { box-sizing:border-box; }
.dm :is(h3, h4, p) { margin:0; }
.dm img { display:block; }
.dm .is-up { color:var(--dm-up); }
.dm .is-down { color:var(--dm-down); }
.dm .is-num { font-family:var(--dm-mono); font-variant-numeric:tabular-nums; text-align:right; }
.dm .ui-icon { width:16px; height:16px; flex:none; }
.dm :is(button, a):focus-visible { outline:2px solid var(--vo-brand-hi,#8B6CFF); outline-offset:2px; }

/* ------------------------------------------------------------------ shared parts */
.dm-sample { color:var(--dm-text-4); font:500 12px/1 var(--dm-mono); letter-spacing:.08em; text-transform:uppercase; cursor:help; }
.dm-chip { display:inline-flex; align-items:center; gap:8px; height:28px; flex:none; white-space:nowrap; padding:0 11px 0 8px; border-radius:999px; background:rgb(255 255 255/.04); box-shadow:inset 0 0 0 1px var(--dm-line); color:var(--dm-text-2); font:500 12px/1 var(--dm-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.dm-chip img { width:16px; height:16px; object-fit:contain; }
.dm-live-pill { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px; border-radius:999px; background:var(--dm-up-soft); color:var(--dm-up); font:650 12px/1 var(--dm-mono); letter-spacing:.08em; text-transform:uppercase; }
.dm-live-dot { position:relative; width:7px; height:7px; flex:none; border-radius:50%; background:var(--dm-up); }
.dm-live-dot::after { content:''; position:absolute; inset:-4px; border:1.5px solid var(--dm-up); border-radius:50%; opacity:0; animation:dm-pulse 2.2s var(--dm-ease) infinite; }
@keyframes dm-pulse { 0% { opacity:.7; transform:scale(.45); } 75%, 100% { opacity:0; transform:scale(1.4); } }
.dm-delta { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:7px; background:var(--dm-up-soft); color:var(--dm-up); font:650 12px/1 var(--dm-mono); white-space:nowrap; }

.dm-seg { display:inline-flex; flex:none; align-items:center; gap:2px; padding:3px; border-radius:11px; background:rgb(0 0 0/.28); box-shadow:inset 0 0 0 1px var(--dm-line); }
.dm-seg button {
  appearance:none; display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 13px; border:0; border-radius:8px;
  background:transparent; color:var(--dm-text-3); font-family:inherit; font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
  cursor:pointer; transition:color .15s, background-color .15s, box-shadow .15s;
}
.dm-seg button:hover { color:var(--dm-text); }
.dm-seg button:is([aria-pressed="true"], [aria-selected="true"]) { background:var(--dm-raise-2); color:var(--dm-text); box-shadow:inset 0 1px 0 rgb(255 255 255/.08), 0 1px 3px rgb(0 0 0/.5); }

.dm-tile { position:relative; border-radius:16px; background:linear-gradient(180deg,rgb(255 255 255/.038),rgb(255 255 255/.016)); box-shadow:inset 0 0 0 1px rgb(255 255 255/.065), inset 0 1px 0 rgb(255 255 255/.04); }
.dm-tile-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dm-tile-head h4 { color:var(--dm-text); font-size:14px; font-weight:650; letter-spacing:-.005em; }
.dm-tile-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.dm-avatar { position:relative; display:grid; place-items:end center; width:var(--size,36px); height:var(--size,36px); flex:none; overflow:hidden; border-radius:50%; background:radial-gradient(circle at 50% 28%,#34343d,#1a1a1f 72%); box-shadow:inset 0 0 0 1px rgb(255 255 255/.1); }
.dm-avatar img { width:132%; max-width:none; height:auto; margin-bottom:-2%; }
.dm-avatar b { display:none; place-self:center; color:var(--dm-text-2); font:650 calc(var(--size,36px) * .34)/1 var(--dm-mono); }
.dm-avatar.is-missing img { display:none; }
.dm-avatar.is-missing b { display:block; }

.dm-text-link { display:inline-flex; align-items:center; gap:7px; color:var(--dm-violet-text); font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.dm-text-link .ui-icon { width:15px; height:15px; transition:transform .2s var(--dm-ease); }
.dm-text-link:hover .ui-icon { transform:translateX(3px); }

/* Bars grow from their baseline once the card is on screen. */
.dm-bar-fill { transform-origin:50% 100%; }
[data-play].is-playing .dm-bar .dm-bar-fill { animation:dm-grow .8s var(--dm-ease) both; animation-delay:calc(var(--i,0) * 45ms); }
[data-play]:not(.is-playing) .dm-bar .dm-bar-fill { transform:scaleY(0); }
[data-play]:not(.is-playing) .dm-bar-value { opacity:0; }
.dm-bar-value { transition:opacity .4s .3s; }
@keyframes dm-grow { from { transform:scaleY(0); } to { transform:none; } }

/* ------------------------------------------------------------------ the hero window */
.dm-window {
  position:relative; overflow:hidden; border-radius:22px;
  background:radial-gradient(90% 50% at 50% 0%,rgb(255 255 255/.04),transparent 70%), linear-gradient(180deg,#131317,#0c0c0e 55%);
  box-shadow:0 0 0 1px rgb(255 255 255/.09), inset 0 1px 0 rgb(255 255 255/.08), 0 60px 140px -50px rgb(0 0 0/.95), 0 30px 60px -30px rgb(0 0 0/.7);
  container:dm-window / inline-size;
}
.sl-stage .dm-window { z-index:2; }
.sl-stage.sl-rise .dm-window { animation:sl-untilt-soft .8s var(--dm-ease) both; animation-delay:200ms; }
.dm-window-bar { display:flex; align-items:center; gap:14px; min-height:58px; padding:0 16px; border-bottom:1px solid var(--dm-line); background:linear-gradient(180deg,rgb(255 255 255/.03),rgb(255 255 255/.01)); }
.dm-dots { display:flex; gap:7px; }
.dm-dots i { width:11px; height:11px; border-radius:50%; background:#2c2c33; box-shadow:inset 0 0 0 1px rgb(255 255 255/.05); }
.dm-url { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:8px; background:rgb(0 0 0/.25); box-shadow:inset 0 0 0 1px var(--dm-line); color:var(--dm-text-3); font:500 12.5px/1 var(--dm-mono); }
.dm-url svg { width:13px; height:13px; }
.dm-window-tabs { margin-left:4px; }
.dm-window-bar .dm-sample { margin-left:auto; }
/* Short names for the tabs and the sample label, used where the bar is phone-width. */
.dm-tab-short { display:none; }

.dm-app { display:grid; grid-template-columns:62px minmax(0,1fr); }
.dm-rail { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0; border-right:1px solid var(--dm-line); background:rgb(0 0 0/.18); }
.dm-rail-mark { width:26px; height:26px; margin-bottom:12px; }
.dm-rail-item { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--dm-text-4); transition:background-color .25s, color .25s, box-shadow .25s; }
.dm-rail-item svg { width:19px; height:19px; }
.dm-rail-end { margin-top:auto; }
.dm-window[data-tab="ev"] [data-rail="ev"], .dm-window[data-tab="arb"] [data-rail="arb"], .dm-window[data-tab="odds"] [data-rail="odds"], .dm-window[data-tab="props"] [data-rail="props"] {
  background:rgb(123 92 255/.15); color:var(--dm-violet-text); box-shadow:inset 0 0 0 1px rgb(123 92 255/.34);
}
.dm-window-body { min-width:0; min-height:476px; }
.dm-panel { padding:22px 24px 18px; }
.dm-panel[hidden] { display:none; }
.dm-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.dm-panel-head h3 { display:flex; align-items:center; gap:12px; color:var(--dm-text); font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.dm-panel-head p { margin-top:6px; color:var(--dm-text-3); font-size:13.5px; }
.dm-filters { display:flex; gap:8px; }
.dm-filter { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 10px 0 12px; border-radius:10px; background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px var(--dm-line); color:var(--dm-text-2); font-size:12.5px; font-weight:550; white-space:nowrap; }
.dm-filter svg { width:12px; height:12px; color:var(--dm-text-4); }

.dm-table { display:grid; }
.dm-tr { display:grid; grid-template-columns:var(--dm-cols); align-items:center; column-gap:16px; min-height:64px; padding:0 10px; border-top:1px solid var(--dm-line); }
.dm-th { min-height:34px; border-top:0; color:var(--dm-text-4); font:500 12px/1 var(--dm-mono); letter-spacing:.07em; text-transform:uppercase; }
.dm-th [title] { cursor:help; text-decoration:underline dotted rgb(255 255 255/.22); text-underline-offset:5px; }
.dm-th > .is-num { font-family:inherit; }
.dm-rows .dm-tr { transition:background-color .2s; }
.dm-rows .dm-tr:hover { background:rgb(255 255 255/.025); }
.dm-table-ev { --dm-cols:80px minmax(0,1fr) 84px 112px 64px 60px 74px 70px; }
.dm-table-arb { --dm-cols:80px minmax(0,1fr) 132px 132px 128px 72px; }
.dm-table-odds { --dm-cols:minmax(170px,1fr) repeat(6,minmax(54px,76px)); }
.dm-table-props { --dm-cols:minmax(0,1fr) 124px 120px 70px 56px 104px; }
.dm-tr > .is-num { color:var(--dm-text-2); font-size:14px; }
.dm-tr > .is-muted { color:var(--dm-text-3); }
.dm-tr > .is-strong { color:var(--dm-text); font-weight:650; }
.dm-tr > :is(.is-up, .is-down) { font-weight:650; }
.dm-tr > .is-up { color:var(--dm-up); }
.dm-tr > .is-down { color:var(--dm-down); }
.dm-tr > .is-num i { color:var(--dm-text-4); font-style:normal; font-weight:500; }
.dm-tr.dm-th > * { color:var(--dm-text-4); font:500 12px/1 var(--dm-mono); }

.dm-edge { display:grid; gap:8px; justify-items:start; }
.dm-edge b { color:var(--dm-up); font:650 14.5px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-edge i { position:relative; width:44px; height:3px; overflow:hidden; border-radius:2px; background:rgb(255 255 255/.07); }
.dm-edge i::after { content:''; position:absolute; inset:0 auto 0 0; width:calc(var(--v,0) * 100%); border-radius:inherit; background:var(--dm-up); }

.dm-bet { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; min-width:0; }
.dm-bet-text { display:grid; gap:5px; min-width:0; }
.dm-bet strong { overflow:hidden; color:var(--dm-text); font-size:14.5px; font-weight:650; letter-spacing:-.005em; text-overflow:ellipsis; white-space:nowrap; }
/* A block, not a flex row: an ellipsis only draws on a block's own line, so a long matchup ends in "…" instead of
   being cut mid-word. */
.dm-bet small { display:block; overflow:hidden; color:var(--dm-text-3); font-size:12.5px; line-height:16px; text-overflow:ellipsis; white-space:nowrap; }
.dm-bet .sport-glyph { display:inline-flex; margin-right:7px; vertical-align:-3px; color:var(--dm-text-4); }
.dm-bet .sport-glyph svg { width:14px; height:14px; }
.dm-face { position:relative; display:grid; place-items:center; width:38px; height:38px; flex:none; }
.dm-face-team { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#121215; box-shadow:0 0 0 1.5px #0e0e11; }
.dm-face-team img { width:15px; height:15px; object-fit:contain; }
.dm-face.is-logo img { width:30px; height:30px; object-fit:contain; }
.dm-face.is-pair img { position:absolute; width:24px; height:24px; object-fit:contain; }
.dm-face.is-pair img:first-child { left:0; top:1px; }
.dm-face.is-pair img:last-child { right:0; bottom:1px; filter:drop-shadow(-2px -1px 1px rgb(14 14 17/.9)); }

.dm-move svg { width:76px; height:28px; overflow:visible; }
.dm-spark-line path { fill:none; stroke:var(--dm-text-3); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dm-spark-line circle { fill:var(--dm-text-3); }
.dm-spark-line.is-up path { stroke:var(--dm-up); }
.dm-spark-line.is-up circle { fill:var(--dm-up); }

.dm-book { display:flex; align-items:center; gap:10px; }
.dm-book img { width:26px; height:26px; flex:none; border-radius:7px; }
.dm-book b { color:var(--dm-text); font:650 15px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-leg { display:flex; align-items:center; gap:10px; min-width:0; }
.dm-leg img { width:26px; height:26px; flex:none; border-radius:7px; }
.dm-leg > span { display:grid; gap:5px; }
.dm-leg small { color:var(--dm-text-3); font-size:12px; line-height:1; }
.dm-leg b { color:var(--dm-text); font:650 14.5px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-px-head { display:flex; justify-content:center; }
.dm-px-head img { width:24px; height:24px; border-radius:7px; }
.dm-px { position:relative; color:var(--dm-text-2); font:500 14px/1 var(--dm-mono); font-variant-numeric:tabular-nums; text-align:center; }
.dm-px.is-best { color:var(--dm-up); font-weight:700; }
.dm-px.is-best::after { content:''; position:absolute; left:50%; bottom:-9px; width:18px; height:2px; margin-left:-9px; border-radius:2px; background:var(--dm-up); }
.dm-px.is-worst { color:rgb(255 123 123/.8); }
.dm-prop { display:grid; gap:5px; }
.dm-prop b { color:var(--dm-text); font:650 14.5px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-prop small { color:var(--dm-text-3); font-size:12.5px; }
.dm-spark { position:relative; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); align-items:end; gap:3px; height:30px; }
.dm-spark::before { content:''; position:absolute; left:-3px; right:-3px; bottom:var(--line); border-top:1px dashed rgb(255 255 255/.3); z-index:1; }
.dm-spark i { height:var(--h); border-radius:2px 2px 1px 1px; background:var(--dm-bar-hi); }
.dm-spark i.is-up { background:var(--dm-up); }

/* The feed: the newest row slides in, and a notification names it. */
.dm-rows .is-new { animation:dm-row-in .7s var(--dm-ease); }
@keyframes dm-row-in { from { opacity:0; transform:translateY(-8px); background-color:rgb(43 208 127/.09); } 55% { background-color:rgb(43 208 127/.05); } to { opacity:1; transform:none; background-color:transparent; } }
.dm-toast {
  position:absolute; right:-30px; bottom:15px; z-index:6; /* the stage's horizon runs 45px past the window: this hangs 30px off its corner */ display:flex; align-items:center; gap:12px; max-width:360px; padding:11px 18px 11px 11px; border-radius:15px;
  background:rgb(28 28 33/.94); box-shadow:inset 0 0 0 1px rgb(255 255 255/.12), 0 28px 60px -18px rgb(0 0 0/.95), 0 10px 24px -12px rgb(0 0 0/.7); backdrop-filter:blur(14px);
  opacity:0; transform:translateY(8px) scale(.97); transition:opacity .35s var(--dm-ease), transform .35s var(--dm-ease); pointer-events:none;
}
.dm-toast.is-shown { opacity:1; transform:none; }
.dm-toast-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:10px; background:var(--dm-up-soft); color:var(--dm-up); }
.dm-toast-icon svg { width:17px; height:17px; }
.dm-toast > span:last-child { display:grid; gap:4px; min-width:0; }
.dm-toast b { color:var(--dm-text); font-size:13px; font-weight:650; }
.dm-toast small { overflow:hidden; color:var(--dm-text-3); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }

@container dm-window (max-width:1080px) {
  .dm-table-ev { --dm-cols:76px minmax(0,1fr) 88px 108px 70px 66px; }
  .dm-table-ev .dm-tr > :is(:nth-child(5), :nth-child(6)) { display:none; }
  .dm-filters .dm-filter:first-child { display:none; }
}
@container dm-window (max-width:860px) {
  .dm-url, .dm-filters { display:none; }
  .dm-app { grid-template-columns:minmax(0,1fr); }
  .dm-rail { display:none; }
  /* Tablets: win probability goes too, so the bet keeps its full name beside the price history. */
  .dm-table-ev { --dm-cols:76px minmax(0,1fr) 88px 108px 66px; }
  .dm-table-ev .dm-tr > :is(:nth-child(5), :nth-child(6), :nth-child(7)) { display:none; }
  .dm-table-arb { --dm-cols:76px minmax(0,1fr) 124px 124px 70px; }
  .dm-table-arb .dm-tr > :nth-child(5) { display:none; }
  .dm-table-props { --dm-cols:minmax(0,1fr) 118px 116px 66px 100px; }
  .dm-table-props .dm-tr > :nth-child(5) { display:none; }
}
@container dm-window (max-width:700px) {
  .dm-table-ev { --dm-cols:76px minmax(0,1fr) 108px 66px; }
  .dm-table-ev .dm-tr > :is(:nth-child(3), :nth-child(5), :nth-child(6), :nth-child(7)) { display:none; }
}
@container dm-window (max-width:620px) {
  /* Phones: one row, as on wider screens. The four tabs share the width under short names (+EV, Arb, Odds, Props;
     each keeps its full name for screen readers) and "Sample" ends the row. */
  .dm-window-bar { flex-wrap:nowrap; gap:10px; min-height:0; padding:10px 12px; }
  .dm-dots { display:none; }
  .dm-window-tabs { display:flex; flex:1 1 auto; min-width:0; margin:0; }
  .dm-window-tabs button { flex:1 1 0; min-width:0; padding:0 6px; }
  .dm-tab-full { display:none; }
  .dm-tab-short { display:inline; }
  .dm-window-bar .dm-sample { flex:none; margin-left:0; letter-spacing:.06em; }
  .dm-panel { padding:18px 14px 16px; }
  .dm-panel-head { align-items:flex-start; flex-direction:column; gap:10px; }
  .dm-tr { column-gap:12px; padding:0 4px; }
  .dm-table-ev { --dm-cols:minmax(0,1fr) auto; }
  .dm-table-ev .dm-tr > :is(:nth-child(3), :nth-child(n+5)) { display:none; }
  /* The edge moves under the best price, so the bet has the row's width for its name and matchup. */
  .dm-table-ev .dm-th > :first-child { display:none; }
  .dm-table-ev .dm-rows .dm-tr { grid-template-rows:auto auto; row-gap:6px; padding-block:12px; }
  .dm-table-ev .dm-rows .dm-tr > .dm-bet { grid-row:1 / 3; grid-column:1; }
  .dm-table-ev .dm-rows .dm-tr > .dm-book { grid-row:1; grid-column:2; justify-self:end; }
  .dm-table-ev .dm-rows .dm-tr > .dm-edge { grid-row:2; grid-column:2; justify-self:end; }
  .dm-table-ev .dm-edge b { font-size:13px; }
  .dm-table-ev .dm-edge i { display:none; }
  .dm-table-arb { --dm-cols:60px minmax(0,1fr) auto; }
  .dm-table-arb .dm-tr > :is(:nth-child(3), :nth-child(4), :nth-child(5)) { display:none; }
  /* Two of the six books fit; the right edge fades so the row reads as one that scrolls. The rows end in as much
     padding as the fade is wide, so at the end of the scroll the fade lies over empty space, not a price. */
  .dm-table-odds { overflow-x:auto; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); }
  .dm-table-odds .dm-tr { --dm-cols:128px repeat(6,60px); min-width:max-content; padding-right:32px; }
  .dm-table-props { --dm-cols:minmax(0,1fr) 84px 50px; }
  .dm-table-props .dm-tr > :is(:nth-child(2), :nth-child(5), :nth-child(6)) { display:none; }
  .dm-face { width:32px; height:32px; }
  .dm-face .dm-avatar { --size:32px !important; }
  .dm-face.is-logo img { width:26px; height:26px; }
  .dm-face.is-pair img { width:20px; height:20px; }
  .dm-bet { gap:10px; }
  .dm-bet strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; line-height:1.25; }
  .dm-table-arb { --dm-cols:54px minmax(0,1fr) auto; }
}
/* The narrowest phones (360px and under): bets and players drop their photos and the trend bars narrow, so names
   stay readable instead of cutting to a few letters. */
@container dm-window (max-width:330px) {
  :is(.dm-table-ev, .dm-table-props) .dm-face { display:none; }
  .dm-table-props { --dm-cols:minmax(0,1fr) 70px 50px; }
}

/* ------------------------------------------------------------------ the feature cards */
.home-product-preview:has(> .dm-card) {
  display:flex; flex-direction:column; border:0; border-radius:24px;
  background:radial-gradient(110% 55% at 50% 0%,rgb(255 255 255/.045),transparent 65%), linear-gradient(180deg,#141418,#0d0d10);
  box-shadow:0 0 0 1px rgb(255 255 255/.085), inset 0 1px 0 rgb(255 255 255/.08), 0 50px 110px -45px rgb(0 0 0/.95), 0 24px 50px -30px rgb(0 0 0/.7);
  container:dm-card / inline-size;
}
.dm-card { display:flex; flex:1; flex-direction:column; gap:16px; min-height:inherit; padding:20px; }
/* When the chip and the sample label do not fit on one line, the label wraps under the chip instead of overlapping it. */
.dm-topline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; }
.dm-topline-end { display:inline-flex; align-items:center; gap:14px; margin-left:auto; }
.dm-identity-text { display:grid; gap:6px; min-width:0; }
.dm-identity-text h3 { overflow:hidden; color:var(--dm-text); font-size:23px; font-weight:700; letter-spacing:-.025em; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.dm-identity-text p { color:var(--dm-text-3); font-size:13.5px; }

.dm-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dm-stats > div, .dm-player-stats > .dm-tile { display:grid; align-content:start; gap:6px; min-width:0; padding:13px 14px; border-radius:14px; background:linear-gradient(180deg,rgb(255 255 255/.034),rgb(255 255 255/.014)); box-shadow:inset 0 0 0 1px rgb(255 255 255/.06); }
.dm-stats small, .dm-player-stats small { color:var(--dm-text-3); font:500 12px/1 var(--dm-mono); letter-spacing:.07em; text-transform:uppercase; }
.dm-stats strong, .dm-player-stats strong { color:var(--dm-text); font:700 21px/1.1 var(--dm-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.dm-stats span, .dm-player-stats span { overflow:hidden; color:var(--dm-text-3); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.dm-stats > div[title] { cursor:help; }
.dm .dm-stats .is-up, .dm .dm-player-stats .is-up { color:var(--dm-up); }
.dm .dm-stats .is-down, .dm .dm-player-stats .is-down { color:var(--dm-down); }

/* Player history */
.dm-identity { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; }
.dm-identity-photo { position:relative; }
.dm-identity-team { position:absolute; right:-4px; bottom:-2px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#121215; box-shadow:0 0 0 2px #101013, inset 0 0 0 1px rgb(255 255 255/.08); }
.dm-identity-team img { width:20px; height:20px; object-fit:contain; }
.dm-line-chip { display:grid; justify-items:end; gap:6px; padding:10px 14px; border-radius:13px; background:rgb(0 0 0/.25); box-shadow:inset 0 0 0 1px var(--dm-line); }
.dm-line-chip small { color:var(--dm-text-3); font-size:12px; }
.dm-line-chip b { color:var(--dm-text); font:700 19px/1 var(--dm-mono); }
.dm-player-stats { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:10px; }
.dm-player-stats .dm-tile-ring { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
.dm-tile-ring > div { display:grid; gap:5px; min-width:0; }
.dm-ring { width:46px; height:46px; transform:rotate(-90deg); }
.dm-ring circle { fill:none; stroke-width:6; }
.dm-ring-track { stroke:rgb(255 255 255/.08); }
.dm-ring-fill { stroke:var(--dm-up); stroke-linecap:round; stroke-dasharray:var(--c); stroke-dashoffset:var(--o); transition:stroke-dashoffset .9s var(--dm-ease); }
[data-play]:not(.is-playing) .dm-ring-fill { stroke-dashoffset:var(--c); }

.dm-chart-tile { display:grid; gap:14px; padding:16px 16px 14px; }
.dm-chart { display:grid; gap:9px; }
.dm-plot {
  position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); align-items:end; gap:7px; height:176px; padding-right:48px;
  border-bottom:1px solid var(--dm-line-2); background:linear-gradient(var(--dm-line) 1px,transparent 1px) 0 0/100% 25%;
}
.dm-plot-line { position:absolute; left:0; right:0; bottom:var(--y); z-index:2; border-top:1px dashed rgb(255 255 255/.36); pointer-events:none; }
.dm-plot-line b { position:absolute; right:0; top:-11px; min-width:40px; padding:4px 7px; border-radius:6px; background:#1c1c21; box-shadow:inset 0 0 0 1px var(--dm-line-2); color:var(--dm-text); font:650 12px/1 var(--dm-mono); text-align:center; }
.dm-bar { appearance:none; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.dm-bar .dm-bar-value { color:var(--dm-text-4); font:650 12px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-bar.is-over .dm-bar-value { color:var(--dm-up); }
.dm-bar .dm-bar-fill { width:100%; max-width:40px; height:var(--h); border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#3a3a42,#26262c); transition:filter .15s, box-shadow .15s; }
.dm-bar.is-over .dm-bar-fill { background:linear-gradient(180deg,var(--dm-up-hi),#1fae68); box-shadow:inset 0 1px 0 rgb(255 255 255/.25); }
.dm-bar.is-tied .dm-bar-fill { background:linear-gradient(180deg,#8b8b95,#62626b); }
.dm-bar:hover .dm-bar-fill { filter:brightness(1.18); }
.dm-bar[aria-pressed="true"] .dm-bar-fill { box-shadow:0 0 0 2px #121215, 0 0 0 3.5px rgb(255 255 255/.8); }
.dm-bar:focus-visible { outline:none; }
.dm-bar:focus-visible .dm-bar-fill { box-shadow:0 0 0 2px #121215, 0 0 0 4px var(--vo-brand-hi,#8B6CFF); }
.dm-tip {
  position:absolute; left:50%; bottom:calc(var(--h) + 28px); z-index:3; display:grid; gap:5px; padding:8px 10px; border-radius:9px;
  background:#1d1d22; box-shadow:inset 0 0 0 1px var(--dm-line-2), 0 14px 30px -10px rgb(0 0 0/.85); color:var(--dm-text-3); font-size:12px; line-height:1; white-space:nowrap;
  opacity:0; transform:translate(-50%,4px); transition:opacity .15s, transform .15s; pointer-events:none;
}
.dm-tip b { color:var(--dm-text); font:650 13px/1 var(--dm-mono); }
.dm-bar.is-first .dm-tip { left:0; transform:translate(0,4px); }
.dm-bar.is-last .dm-tip { left:auto; right:0; transform:translate(0,4px); }
.dm-bar:is(:hover, :focus-visible, [aria-pressed="true"]) .dm-tip { opacity:1; transform:translate(-50%,0); }
.dm-bar.is-first:is(:hover, :focus-visible, [aria-pressed="true"]) .dm-tip, .dm-bar.is-last:is(:hover, :focus-visible, [aria-pressed="true"]) .dm-tip { transform:none; }
.dm-axis { display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:7px; padding-right:48px; }
.dm-axis span { display:grid; place-items:center; }
.dm-axis img { width:20px; height:20px; object-fit:contain; opacity:.9; }
.dm-chart[data-n="20"] :is(.dm-plot, .dm-axis) { gap:4px; }
.dm-chart[data-n="20"] .dm-bar-value { font-size:12px; letter-spacing:-.04em; }
.dm-chart[data-n="20"] .dm-axis img { width:16px; height:16px; }
.dm-legend { display:inline-flex; gap:16px; color:var(--dm-text-3); font-size:12.5px; }
.dm-legend span { display:inline-flex; align-items:center; gap:7px; }
.dm-legend i { width:9px; height:9px; border-radius:3px; background:var(--dm-bar-hi); }
.dm-legend i.is-up { background:var(--dm-up); }

/* Line shopping: a ladder of books, the fair price marked across it. */
.dm-matchup { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; }
.dm-logos { display:flex; }
.dm-logos img { width:40px; height:40px; object-fit:contain; }
.dm-logos img + img { margin-left:-8px; filter:drop-shadow(-3px 0 2px rgb(16 16 19/.95)); }
.dm-shop-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; }
.dm-shop-pick, .dm-shop-win { display:grid; gap:10px; }
.dm-shop-pick small, .dm-shop-win small { color:var(--dm-text-3); font:500 12px/1 var(--dm-mono); letter-spacing:.07em; text-transform:uppercase; }
.dm-shop-pick > span { display:flex; align-items:center; gap:12px; }
.dm-shop-pick img { width:34px; height:34px; border-radius:9px; }
.dm-shop-pick b { color:var(--dm-text); font:700 28px/1 var(--dm-mono); letter-spacing:-.02em; }
.dm-shop-pick em { color:var(--dm-text-2); font-size:14px; font-style:normal; font-weight:600; }
.dm-shop-win { justify-items:end; }
.dm-shop-win strong { font:700 30px/1 var(--dm-mono); letter-spacing:-.03em; }
.dm-ladder { display:grid; }
.dm-ladder-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; }
.dm-ladder-head > span { color:var(--dm-text-3); font:500 12px/1 var(--dm-mono); letter-spacing:.07em; text-transform:uppercase; }
.dm-ladder-row { display:grid; grid-template-columns:22px 28px 116px minmax(0,1fr) 84px; align-items:center; gap:12px; min-height:54px; border-top:1px solid var(--dm-line); }
.dm-rank { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgb(255 255 255/.05); color:var(--dm-text-3); font:650 12px/1 var(--dm-mono); }
.dm-ladder-row img { width:28px; height:28px; border-radius:8px; }
.dm-ladder-book { display:grid; gap:5px; color:var(--dm-text-2); font-size:14px; font-weight:600; }
.dm-ladder-book small { color:var(--dm-text-3); font:500 12.5px/1 var(--dm-mono); }
.dm-ladder-bar { position:relative; height:8px; border-radius:4px; background:rgb(255 255 255/.06); }
.dm-ladder-bar .dm-bar-fill { position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:#3e3e47; transform-origin:0 50%; }
.dm-ladder-bar::after { content:''; position:absolute; left:var(--fair); top:-10px; bottom:-10px; border-left:1.5px dashed rgb(255 255 255/.5); }
[data-play].is-playing .dm-ladder-bar .dm-bar-fill { animation:dm-grow-x .8s var(--dm-ease) both; animation-delay:calc(var(--i,0) * 90ms); }
[data-play]:not(.is-playing) .dm-ladder-bar .dm-bar-fill { transform:scaleX(0); }
@keyframes dm-grow-x { from { transform:scaleX(0); } to { transform:none; } }
.dm-fair-label { position:absolute; left:var(--fair); bottom:15px; transform:translateX(-50%); padding:3px 7px; border-radius:6px; background:#1c1c21; box-shadow:inset 0 0 0 1px var(--dm-line-2); color:var(--dm-text-2); font:600 12px/1 var(--dm-mono); font-style:normal; white-space:nowrap; }
.dm-ladder-row > strong { color:var(--dm-text-2); font:650 15px/1 var(--dm-mono); font-variant-numeric:tabular-nums; text-align:right; }
.dm-ladder-row.is-best .dm-rank { background:var(--dm-up-soft); color:var(--dm-up); }
.dm-ladder-row.is-best .dm-ladder-book { color:var(--dm-text); }
.dm-ladder-row.is-best .dm-bar-fill { background:linear-gradient(90deg,#1fae68,var(--dm-up-hi)); }
.dm-ladder-row.is-best > strong { color:var(--dm-up); }

/* Live game */
.dm-scoreboard { display:grid; grid-template-areas:"away score home"; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; padding:4px 2px 0; }
.dm-sb-team { grid-area:away; display:flex; align-items:center; gap:14px; min-width:0; }
.dm-sb-team.is-home { grid-area:home; flex-direction:row-reverse; text-align:right; }
.dm-sb-team img { width:56px; height:56px; object-fit:contain; }
.dm-sb-team > span { display:grid; gap:6px; min-width:0; }
.dm-sb-team strong { overflow:hidden; color:var(--dm-text-2); font-size:17px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.dm-sb-team.is-leader strong { color:var(--dm-text); }
.dm-sb-team small { display:inline-flex; align-items:center; gap:6px; color:var(--dm-text-3); font:500 12.5px/1 var(--dm-mono); white-space:nowrap; }
.dm-sb-team.is-home small { justify-content:flex-end; }
.dm-ball { display:inline-block; width:12px; height:8px; border-radius:50%; background:#a8743d; box-shadow:inset 0 0 0 1px rgb(0 0 0/.25); }
.dm-sb-score { grid-area:score; display:flex; align-items:center; gap:18px; }
.dm-sb-score > b { color:var(--dm-text); font:700 44px/1 var(--dm-mono); font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.dm-sb-score > b.is-trailing { color:var(--dm-text-3); }
.dm-sb-clock { display:grid; justify-items:center; gap:6px; }
.dm-sb-clock em { color:var(--dm-text-3); font:600 12px/1 var(--dm-mono); font-style:normal; letter-spacing:.08em; }
.dm-sb-clock time { color:var(--dm-text); font:650 15px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-field { display:grid; gap:9px; }
.dm-field-strip { position:relative; height:30px; overflow:hidden; border-radius:9px; background:linear-gradient(180deg,#14231a,#0f1a14); box-shadow:inset 0 0 0 1px rgb(255 255 255/.06); }
.dm-field-strip::before, .dm-field-strip::after { content:''; position:absolute; top:0; bottom:0; width:6%; }
.dm-field-strip::before { left:0; background:color-mix(in srgb,var(--away) 45%,#14231a); }
.dm-field-strip::after { right:0; background:color-mix(in srgb,var(--home) 45%,#14231a); }
.dm-field-strip > i { position:absolute; top:0; bottom:0; left:calc(6% + var(--x) * .88); width:1px; background:rgb(255 255 255/.1); }
.dm-field-first { position:absolute; top:0; bottom:0; left:calc(6% + var(--x) * .88); width:2px; background:var(--dm-gold); box-shadow:0 0 0 1px rgb(0 0 0/.2); }
.dm-field-ball { position:absolute; top:50%; left:calc(6% + var(--x) * .88); width:16px; height:10px; margin:-5px 0 0 -8px; border-radius:50%; background:#b07a42; box-shadow:0 0 0 2px rgb(255 255 255/.85), 0 2px 6px rgb(0 0 0/.6); }
.dm-field-meta { display:flex; align-items:center; justify-content:space-between; color:var(--dm-text-3); font-size:12.5px; }
.dm-field-meta b { color:var(--dm-text); font:600 12.5px/1 var(--dm-mono); }
.dm-wp { display:grid; gap:12px; padding:14px 16px 12px; cursor:help; }
.dm-wp-now { display:inline-flex; align-items:center; gap:10px; }
.dm-wp-now strong { color:var(--dm-up); font:700 22px/1 var(--dm-mono); }
.dm-wp-chart { position:relative; display:grid; gap:8px; }
.dm-wp-chart svg { width:100%; height:88px; }
.dm-wp-mid { stroke:rgb(255 255 255/.16); stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.dm-wp-q { stroke:rgb(255 255 255/.06); vector-effect:non-scaling-stroke; }
.dm-wp-area { fill:url(#dm-wp-fill); }
.dm-wp-line { fill:none; stroke:var(--dm-up); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.dm-wp-dot { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--dm-up); box-shadow:0 0 0 3px rgb(43 208 127/.25); }
.dm-wp-axis { display:grid; grid-template-columns:repeat(4,1fr); color:var(--dm-text-4); font:500 12px/1 var(--dm-mono); text-align:center; }
.dm-markets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dm-market { display:grid; gap:9px; padding:12px 14px; }
.dm-market small { color:var(--dm-text-3); font:500 12px/1 var(--dm-mono); letter-spacing:.07em; text-transform:uppercase; }
.dm-market div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.dm-market span { overflow:hidden; color:var(--dm-text-2); font-size:13.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.dm-market em { color:var(--dm-text-3); font:500 12.5px/1 var(--dm-mono); font-style:normal; }
.dm-market b { padding:2px 4px; margin:-2px -4px; border-radius:5px; color:var(--dm-text); font:650 15px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-market b.is-tick-up { animation:dm-tick-up 1.4s var(--dm-ease); }
.dm-market b.is-tick-down { animation:dm-tick-down 1.4s var(--dm-ease); }
@keyframes dm-tick-up { 0%, 30% { color:var(--dm-up); background:rgb(43 208 127/.16); } 100% { background:transparent; } }
@keyframes dm-tick-down { 0%, 30% { color:var(--dm-down); background:rgb(255 107 107/.14); } 100% { background:transparent; } }

.dm-empty { display:grid; place-content:center; gap:8px; min-height:inherit; padding:24px; text-align:center; }
.dm-empty strong { font-size:16px; }
.dm-empty p { color:var(--dm-text-3); font-size:14px; }
.dm-empty a { color:var(--dm-violet-text); font-weight:600; }

/* The game title gets the whole row once the market switch would squeeze it: the switch moves under it. */
@container dm-card (max-width:640px) {
  .dm-matchup { grid-template-columns:auto minmax(0,1fr); }
  .dm-matchup .dm-seg { grid-column:1 / -1; justify-self:start; }
}
@container dm-card (max-width:540px) {
  .dm-card { gap:14px; padding:16px; }
  .dm-identity-text h3 { font-size:20px; white-space:normal; }
  .dm-identity { grid-template-columns:auto minmax(0,1fr); }
  .dm-line-chip { grid-column:1 / -1; grid-auto-flow:column; justify-content:space-between; align-items:center; }
  .dm-player-stats { grid-template-columns:1fr 1fr; }
  .dm-shop-hero { flex-direction:column; align-items:stretch; gap:14px; padding:14px; }
  .dm-shop-win { justify-items:start; grid-template-columns:auto auto; align-items:center; gap:8px 12px; }
  .dm-shop-win small { grid-column:1 / -1; }
  .dm-shop-pick b, .dm-shop-win strong { font-size:24px; }
  .dm-fair-label { display:none; }
  .dm-ladder-row { grid-template-columns:22px 26px minmax(0,1fr) 76px; row-gap:8px; padding-top:10px; }
  .dm-ladder-bar { grid-column:2 / -1; grid-row:2; margin:0 0 12px; }
  .dm-stats { grid-template-columns:1fr; }
  .dm-sb-team { flex-direction:column; align-items:flex-start; gap:8px; }
  .dm-sb-team.is-home { flex-direction:column; align-items:flex-end; }
  .dm-sb-team img { width:44px; height:44px; }
  .dm-sb-score { gap:12px; }
  .dm-sb-score > b { font-size:36px; }
  .dm-markets { grid-template-columns:1fr; }
  .dm-plot, .dm-axis { gap:4px; padding-right:42px; }
  .dm-chart[data-n="20"] .dm-bar-value { display:none; }
  .dm-chart[data-n="20"] .dm-axis span:nth-child(even) { visibility:hidden; }
  .dm-chart[data-n="10"] .dm-bar-value { font-size:12px; }
  .dm-chart[data-n="10"] .dm-axis img { width:16px; height:16px; }
}
/* Small phones (375px and under): the hit rate drops its ring so "6 of 10 over" fits beside the other tiles, and the
   score gives a little room back to the team names. */
@container dm-card (max-width:349px) {
  .dm-player-stats .dm-tile-ring { grid-template-columns:minmax(0,1fr); }
  .dm-tile-ring .dm-ring { display:none; }
}
@container dm-card (max-width:334px) {
  .dm-sb-score { gap:8px; }
  .dm-sb-score > b { font-size:30px; }
  .dm-sb-team strong { font-size:15px; }
}
@container dm-card (max-width:300px) {
  .dm-sb-score { gap:6px; }
  .dm-sb-score > b { font-size:26px; }
  .dm-sb-team strong { font-size:14px; }
}

@media (max-width:1260px) { .dm-toast { right:20px; } }
@media (max-width:760px) { .dm-toast { display:none; } }

/* ------------------------------------------------------------------ how it works */
.dm-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.dm-step {
  display:flex; flex-direction:column; gap:26px; padding:12px 12px 28px; border-radius:24px;
  background:radial-gradient(110% 50% at 50% 0%,rgb(255 255 255/.04),transparent 65%), linear-gradient(180deg,#141418,#0d0d10);
  box-shadow:0 0 0 1px rgb(255 255 255/.085), inset 0 1px 0 rgb(255 255 255/.07), 0 40px 90px -45px rgb(0 0 0/.9);
}
.dm-step-visual { display:grid; align-content:space-between; gap:14px; min-height:220px; padding:16px; }
.dm-step-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; color:var(--dm-text); font-size:14px; font-weight:650; }
.dm-step-head small { color:var(--dm-text-3); font:500 12px/1 var(--dm-mono); white-space:nowrap; }
.dm-step-head b { font:700 17px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-step-who { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.dm-flow { display:grid; gap:7px; }
.dm-flow-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:42px; padding:0 12px 0 9px; border-radius:11px; background:rgb(0 0 0/.22); box-shadow:inset 0 0 0 1px var(--dm-line); }
.dm-flow-row img { width:24px; height:24px; border-radius:7px; }
.dm-flow-row > span:not(.dm-flow-icon) { overflow:hidden; color:var(--dm-text-2); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.dm-flow-row b { color:var(--dm-text); font:650 14px/1 var(--dm-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dm-flow-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:rgb(255 255 255/.07); color:var(--dm-text-2); font:700 12px/1 var(--dm-mono); }
.dm-flow-row.is-best { grid-template-columns:24px minmax(0,1fr) auto auto; background:rgb(43 208 127/.07); box-shadow:inset 0 0 0 1px rgb(43 208 127/.3); }
.dm-flow-row.is-best b { color:var(--dm-up); }
.dm-flow-row em { display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:6px; background:var(--dm-up-soft); color:var(--dm-up); font:650 12px/1 var(--dm-mono); font-style:normal; white-space:nowrap; }
.dm-mini-bars { position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:end; gap:8px; height:100px; border-bottom:1px solid var(--dm-line-2); }
.dm-mini-bars::before { content:''; position:absolute; left:0; right:0; bottom:var(--line); z-index:1; border-top:1px dashed rgb(255 255 255/.36); }
.dm-mini-bars i { display:flex; align-items:flex-end; height:100%; }
.dm-mini-bars .dm-bar-fill { width:100%; height:var(--h); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--dm-bar-hi),var(--dm-bar)); }
.dm-mini-bars i.is-up .dm-bar-fill { background:linear-gradient(180deg,var(--dm-up-hi),#1fae68); box-shadow:inset 0 1px 0 rgb(255 255 255/.25); }
[data-play].is-playing .dm-mini-bars .dm-bar-fill { animation:dm-grow .8s var(--dm-ease) both; animation-delay:calc(var(--i,0) * 55ms); }
[data-play]:not(.is-playing) .dm-mini-bars .dm-bar-fill { transform:scaleY(0); }
.dm-step-stats { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; color:var(--dm-text-3); font-size:12.5px; white-space:nowrap; }
.dm-step-stats b { margin-left:6px; color:var(--dm-text); font:650 13px/1 var(--dm-mono); font-variant-numeric:tabular-nums; }
.dm-pl { display:block; width:100%; height:96px; overflow:visible; }
.dm-pl-area { fill:url(#dm-pl-fill); }
.dm-pl-line { fill:none; stroke:var(--dm-up); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
[data-play].is-playing :is(.dm-pl, .dm-tracker-curve) { animation:dm-reveal 1.3s var(--dm-ease) both; }
[data-play]:not(.is-playing) :is(.dm-pl, .dm-tracker-curve) { clip-path:inset(0 100% 0 0); }
@keyframes dm-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
.dm-step-copy { display:grid; gap:10px; padding:0 10px; }
.dm-step-num { color:var(--dm-violet-text); font:600 12.5px/1 var(--dm-mono); letter-spacing:.1em; }
.dm-step-copy h3 { color:var(--dm-text); font-size:22px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.dm-step-copy p { color:var(--dm-text-3); font-size:15px; line-height:1.6; }
/* Narrower than three columns, each step lies on its side (the picture beside its words); phones stack it. */
@media (max-width:980px) {
  .dm-steps { grid-template-columns:minmax(0,1fr); gap:16px; }
  .dm-step { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:28px; padding:12px; }
  .dm-step-copy { padding:0 14px 0 0; }
}
@media (max-width:640px) {
  .dm-step { display:flex; align-items:stretch; gap:22px; padding:12px 12px 24px; }
  .dm-step-copy { padding:0 8px; }
}

/* ------------------------------------------------------------------ the pick tracker */
.hero-tracker:has(> .dm-tracker) {
  padding:0; border:0; border-radius:24px;
  background:radial-gradient(110% 50% at 50% 0%,rgb(255 255 255/.045),transparent 65%), linear-gradient(180deg,#141418,#0d0d10);
  box-shadow:0 0 0 1px rgb(255 255 255/.085), inset 0 1px 0 rgb(255 255 255/.08), 0 50px 110px -45px rgb(0 0 0/.95), 0 24px 50px -30px rgb(0 0 0/.7);
}
.dm-tracker { display:flex; flex-direction:column; gap:18px; padding:22px; }
.dm-tracker-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dm-tracker-brand { display:inline-flex; align-items:center; gap:10px; color:var(--dm-text); font-size:15px; font-weight:650; }
.dm-tracker-brand img { width:24px; height:24px; }
.dm-tracker-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:4px; }
.dm-tracker-net { display:grid; gap:12px; min-width:0; }
.dm-tracker-net small { color:var(--dm-text-3); font-size:14px; font-weight:600; }
.dm-tracker-net strong { color:var(--dm-text); font:800 56px/.9 var(--vo-font,'Plus Jakarta Sans',sans-serif); font-variant-numeric:tabular-nums; letter-spacing:-.05em; white-space:nowrap; }
.dm-tracker-roi { display:grid; justify-items:end; gap:8px; padding-bottom:3px; }
.dm-tracker-roi small { color:var(--dm-text-3); font-size:12.5px; white-space:nowrap; }
.dm-delta.is-loss { background:rgb(255 107 107/.13); color:var(--dm-down); }
.dm-tracker-curve { display:block; width:100%; height:64px; overflow:visible; }
.dm-tracker-area { fill:url(#dm-tracker-fill); }
.dm-tracker-line { fill:none; stroke:var(--dm-up); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.dm-tracker-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.dm-tracker-stats > div { display:grid; gap:8px; min-width:0; padding:12px 13px; border-radius:13px; background:linear-gradient(180deg,rgb(255 255 255/.034),rgb(255 255 255/.014)); box-shadow:inset 0 0 0 1px rgb(255 255 255/.06); }
.dm-tracker-stats small { color:var(--dm-text-3); font-size:12px; white-space:nowrap; }
.dm-tracker-stats b { color:var(--dm-text); font:700 16px/1 var(--dm-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dm-cal { display:grid; gap:8px; }
.dm-cal-weekdays, .dm-cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.dm-cal-weekdays { color:var(--dm-text-4); font:500 12px/1 var(--dm-mono); text-align:center; }
.dm-cal-day { position:relative; display:grid; place-items:center; min-width:0; height:48px; border-radius:11px; background:rgb(255 255 255/.028); box-shadow:inset 0 0 0 1px rgb(255 255 255/.04); transition:transform .2s var(--dm-ease); }
.dm-cal-day small { position:absolute; top:6px; left:8px; color:var(--dm-text-4); font:500 12px/1 var(--dm-mono); }
.dm-cal-day b { margin-top:12px; font:650 12.5px/1 var(--dm-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dm-cal-day.is-win { background:rgb(43 208 127/calc(.07 + var(--a,0) * .3)); box-shadow:inset 0 0 0 1px rgb(43 208 127/calc(.12 + var(--a,0) * .28)); }
.dm-cal-day.is-win b { color:var(--dm-up-hi); }
.dm-cal-day.is-loss { background:rgb(255 107 107/calc(.07 + var(--a,0) * .26)); box-shadow:inset 0 0 0 1px rgb(255 107 107/calc(.12 + var(--a,0) * .24)); }
.dm-cal-day.is-loss b { color:#ffa0a0; }
.dm-cal-day:is(.is-win, .is-loss) small { color:rgb(255 255 255/.5); }
.dm-cal-day:is(.is-open, .is-even) b { color:var(--dm-text-2); }
.dm-cal-day.is-blank { background:none; box-shadow:none; }
.dm-cal-day:not(.is-blank):hover { transform:translateY(-2px); }
[data-play].is-playing .dm-cal-day:not(.is-blank) { animation:dm-cell-in .5s var(--dm-ease) both; animation-delay:calc(var(--i,0) * 16ms); }
[data-play]:not(.is-playing) .dm-cal-day:not(.is-blank) { opacity:0; }
@keyframes dm-cell-in { from { opacity:0; transform:translateY(6px) scale(.96); } to { opacity:1; transform:none; } }
@media (max-width:540px) {
  .dm-tracker { gap:14px; padding:16px; }
  .dm-tracker-hero { flex-direction:column; align-items:flex-start; gap:12px; }
  .dm-tracker-roi { grid-auto-flow:column; align-items:center; justify-items:start; gap:10px; padding:0; }
  .dm-tracker-net strong { font-size:46px; }
  .dm-tracker-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dm-cal-weekdays, .dm-cal-grid { gap:4px; }
  .dm-cal-day { height:42px; border-radius:9px; }
  .dm-cal-day small { top:5px; left:6px; }
  .dm-cal-day b { margin-top:14px; font-size:12px; letter-spacing:-.05em; }
}

/* ------------------------------------------------------------------ pricing (markup: landing-pricing.js) */
.home-pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:20px; }
.home-plan {
  position:relative; display:flex; flex-direction:column; padding:28px 28px 32px; border-radius:26px; color:var(--vo-text,#f4f4f5);
  background:radial-gradient(120% 45% at 50% 0%,rgb(255 255 255/.045),transparent 65%), linear-gradient(180deg,#141418,#0d0d10);
  box-shadow:0 0 0 1px rgb(255 255 255/.085), inset 0 1px 0 rgb(255 255 255/.07), 0 40px 90px -45px rgb(0 0 0/.9);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.home-plan:hover { transform:translateY(-3px); }
.home-plan.is-featured {
  background:radial-gradient(120% 50% at 50% 0%,rgb(123 92 255/.13),transparent 62%), linear-gradient(180deg,#15141b,#0d0d10);
  box-shadow:0 0 0 1.5px rgb(139 108 255/.7), inset 0 1px 0 rgb(255 255 255/.09), 0 50px 110px -45px rgb(0 0 0/.95);
}
.home-plan-name { display:flex; align-items:center; gap:12px; min-height:42px; }
.home-plan-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px rgb(255 255 255/.09); color:var(--vo-text-2,#c4c4cc); }
.home-plan-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.home-plan.is-featured .home-plan-icon { background:rgb(123 92 255/.16); box-shadow:inset 0 0 0 1px rgb(139 108 255/.45); color:#c4b5ff; }
.home-plan-name h3 { margin:0; color:var(--vo-text,#f4f4f5); font-size:20px; font-weight:700; letter-spacing:-.02em; }
.home-plan-badge { display:inline-flex; align-items:center; height:26px; margin-left:auto; padding:0 11px; border-radius:999px; background:linear-gradient(180deg,#8B6CFF,#7B5CFF); box-shadow:inset 0 1px 0 rgb(255 255 255/.25); color:#fff; font:600 12px/1 var(--vo-mono,monospace); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.home-plan-tagline { margin:16px 0 0; color:var(--vo-text-3,#9b9ba5); font-size:14.5px; line-height:1.55; }
.home-plan-main { display:flex; flex-direction:column; }
.home-plan-body { display:flex; flex-direction:column; margin-top:26px; }
.home-plan-price { display:flex; align-items:flex-start; gap:3px; }
.home-plan-price > span { margin-top:8px; color:var(--vo-text-3,#9b9ba5); font-size:24px; font-weight:600; }
.home-plan-price strong { color:var(--vo-text,#f4f4f5); font:800 60px/1 var(--vo-font,'Plus Jakarta Sans',sans-serif); font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
.home-plan-price small { align-self:flex-end; margin:0 0 8px 6px; color:var(--vo-text-3,#9b9ba5); font-size:15px; }
.home-plan-deal { display:flex; align-items:center; gap:10px; margin-top:14px; }
.home-plan-was { color:var(--vo-text-3,#9b9ba5); font:500 14px/1 var(--vo-mono,monospace); text-decoration-color:rgb(255 255 255/.45); }
.home-plan-save { display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:7px; background:rgb(43 208 127/.13); color:#2BD07F; font:650 12px/1 var(--vo-mono,monospace); }
.home-plan-billing { margin:12px 0 0; color:var(--vo-text-3,#9b9ba5); font-size:13px; }
.home-plan-action {
  display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:26px; border-radius:12px;
  background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px rgb(255 255 255/.13); color:var(--vo-text,#f4f4f5); font-size:15px; font-weight:650; text-decoration:none;
  transition:background-color .2s, transform .2s, filter .2s;
}
.home-plan-action:hover { background:rgb(255 255 255/.09); transform:translateY(-1px); }
.home-plan-action:focus-visible { outline:2px solid #8B6CFF; outline-offset:3px; }
.home-plan.is-featured .home-plan-action { background:linear-gradient(180deg,#8B6CFF,#7B5CFF); box-shadow:inset 0 1px 0 rgb(255 255 255/.25), 0 14px 32px -14px rgb(123 92 255/.75); color:#fff; }
.home-plan.is-featured .home-plan-action:hover { filter:brightness(1.08); }
.home-plan-included { margin-top:30px; padding-top:26px; border-top:1px solid rgb(255 255 255/.07); }
.home-plan-included h4 { margin:0 0 16px; color:var(--vo-text-2,#c4c4cc); font-size:13.5px; font-weight:650; }
.home-plan-features { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.home-plan-features li { display:flex; align-items:flex-start; gap:12px; color:var(--vo-text-2,#c4c4cc); font-size:14.5px; line-height:1.4; }
.home-plan-features li > span { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:rgb(43 208 127/.14); color:#2BD07F; }
.home-plan-features svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* Side by side, a card without a struck list price keeps that row's height so every button lines up. */
@media (min-width:981px) { .home-plan-tagline { min-height:3.1em; } .home-pricing-grid:has(.home-plan-deal) .home-plan-price + .home-plan-billing { margin-bottom:38px; } }
@media (max-width:980px) { .home-pricing-grid { grid-template-columns:minmax(0,1fr); gap:16px; } }
/* Tablets: each card lies on its side, the price and button beside what the plan includes. */
@media (min-width:641px) and (max-width:980px) {
  .home-plan { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:0 36px; }
  .home-plan-included { align-self:stretch; margin:0; padding:4px 0 0 34px; border-top:0; border-left:1px solid rgb(255 255 255/.07); }
}
@media (max-width:540px) { .home-plan { padding:22px 20px 26px; border-radius:22px; } .home-plan-price strong { font-size:52px; } }
/* Where the name row has no room for the badge (narrow columns, tablets, or the narrowest phones), the badge sits on
   the card's top edge instead, out of the flow, so every card's rows stay level. */
@media (min-width:641px) and (max-width:1140px) {
  .home-plan-badge { position:absolute; top:-13px; left:28px; margin:0; box-shadow:inset 0 1px 0 rgb(255 255 255/.25), 0 0 0 4px var(--vo-bg,#09090b); }
}
@media (max-width:380px) {
  .home-plan-badge { position:absolute; top:-13px; left:20px; margin:0; box-shadow:inset 0 1px 0 rgb(255 255 255/.25), 0 0 0 4px var(--vo-bg,#09090b); }
}
/* Three narrow columns: the billing line can wrap, so every card keeps room for two lines of it. */
@media (min-width:981px) and (max-width:1140px) { .home-plan-billing { min-height:3em; line-height:1.5; } }

/* ------------------------------------------------------------------ the hero (markup: landing.html)
   The original centred layout and spacing (landing-2026.css sets the block, the sizes and the gaps), restyled: the
   slogan in white with "precise" in solid green (no gradient, no full stops), and under the buttons a quiet line of
   facts, white figures with grey words between thin dividers, in place of the checkmark row. */
html:is(:root,#vo-a) body.sl-landing:is(*,#vo-b):is(*,#vo-c) .home-hero h1.dm-hero-title { color:var(--vo-text,#f4f4f5); }
html:is(:root,#vo-a) body.sl-landing:is(*,#vo-b):is(*,#vo-c) .home-hero h1.dm-hero-title b {
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#2BD07F !important; -webkit-text-fill-color:currentColor !important; font-weight:inherit;
}
.dm-hero-facts { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:0; padding:0; list-style:none; color:var(--vo-text-3,#9b9ba5); font-size:14.5px; }
.dm-hero-facts li { display:inline-flex; align-items:baseline; gap:7px; padding:0 20px; line-height:1.12; }
.dm-hero-facts li + li { border-left:1px solid rgb(255 255 255/.12); }
.dm-hero-facts b { color:var(--vo-text,#f4f4f5); font:600 14.5px/1 var(--vo-mono,monospace); letter-spacing:-.01em; }
@media (max-width:640px) {
  .dm-hero-facts { display:grid; grid-template-columns:repeat(2,auto); justify-content:center; row-gap:14px; }
  .dm-hero-facts li { padding:0 16px; }
  .dm-hero-facts li:nth-child(3) { border-left:0; }
}

/* ------------------------------------------------------------------ one frame
   Every section's content sits on the same edges as the bet tracker: the site frame (--site-wide, 1240px, inside the
   --site-gutter). The product window and the pricing block used to be narrower. */
html:is(:root,#vo-a) body.sl-landing:is(*,#vo-b):is(*,#vo-c) :is(.sl-stage, .home-pricing-inner) { width:min(100% - var(--site-gutter)*2, var(--site-wide)) !important; }

/* ------------------------------------------------------------------ surfaces
   Tones, glows and texture come from atmosphere.css, set by the section classes in landing.html. Here only the
   homepage's own piece: the band that fades in behind the lower half of the product window and runs on under the
   sportsbook logos, the numbers and the toolkit. */
.home-hero .sl-hero-orb { display:none; }
.home-hero .sl-horizon::before { display:none; }
html:has(body.sl-landing) { --atm-page-glow-w:1000px; --atm-page-glow-h:520px; --atm-page-glow-y:300px; }
.home-hero .sl-stage::after {
  content:''; position:absolute; left:50%; top:46%; bottom:-400px; z-index:-1; width:100vw; transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(180deg, transparent 0, var(--atm-tone-1) 260px);
}
/* The logo strip is part of that band: its logos fade out at the edges (the mask is on the moving track, not the strip,
   so the band and its light run on underneath). */
body.sl-landing .hero-brands { position:relative; background:var(--atm-tone-1); -webkit-mask-image:none; mask-image:none; }
body.sl-landing .hero-brand-track { -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
/* Cards on a raised band are lifted one step further so they still read as cards. Their fill is a touch translucent
   (--atm-card-see), so the green light behind a section shows faintly through them instead of stopping at their edge. */
.dm-step, .home-plan { background:linear-gradient(180deg,rgb(24 24 28/calc(1 - var(--atm-card-see))),rgb(18 18 21/calc(1 - var(--atm-card-see)))); }
body.sl-landing :is(.tc-card, .sl-tool) { background-color:rgb(17 17 20/calc(1 - var(--atm-card-see))) !important; }
body.sl-landing .sl-stats-grid { background:rgb(17 17 20/calc(.6 - var(--atm-card-see))); }
@media (max-width:760px) { html:has(body.sl-landing) { --atm-page-glow-w:640px; --atm-page-glow-h:420px; --atm-page-glow-y:260px; } }

/* ------------------------------------------------------------------ logo strips
   The sportsbook names are hidden with position:absolute, so each logo holds its own and the strip clips them whether
   or not the marquee's transform is running. Without a positioned ancestor inside the strip they hang past the window
   and the page scrolls sideways under reduced motion.
   Reduced motion: no marquee. One centered set wraps inside the site frame, the copies that close the loop are hidden,
   and the edge fades go with the motion they softened. The 28 logos sit in rows of 14, 10 or 7 and the six sports in
   one row or two of three, so no row is left with a stray mark. */
body.sl-landing .hero-brand-set li { position:relative; }
@media (prefers-reduced-motion:reduce) {
  body.sl-landing :is(.hero-brand-track, .home-sport-viewport) { -webkit-mask-image:none; mask-image:none; }
  body.sl-landing :is(.hero-brand-track, .home-sport-track) { display:block; width:min(100% - var(--site-gutter,40px)*2, var(--site-wide,1240px)); margin-inline:auto; }
  body.sl-landing :is(.hero-brand-set, .home-sport-set)[aria-hidden=true] { display:none; }
  body.sl-landing :is(.hero-brand-set, .home-sport-set) { flex-wrap:wrap; justify-content:center; }
  body.sl-landing .hero-brand-set { --logo-cell:78px; --logos-per-row:14; max-width:calc(var(--logo-cell)*var(--logos-per-row)); margin-inline:auto; row-gap:24px; }
  body.sl-landing .hero-brand-set li { width:var(--logo-cell); padding:6px 0; justify-content:center; }
  body.sl-landing .home-sport-set { gap:12px 0; }
  body.sl-landing .home-sport-set a { padding:6px 26px; }
}
@media (prefers-reduced-motion:reduce) and (max-width:1171px) { body.sl-landing .hero-brand-set { --logos-per-row:10; } }
@media (prefers-reduced-motion:reduce) and (max-width:959px) { body.sl-landing .home-sport-set { display:grid; grid-template-columns:repeat(3,auto); justify-content:center; } }
@media (prefers-reduced-motion:reduce) and (max-width:859px) { body.sl-landing .hero-brand-set { --logos-per-row:7; } }
@media (prefers-reduced-motion:reduce) and (max-width:640px) {
  body.sl-landing .hero-brand-set { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); max-width:none; row-gap:6px; }
  body.sl-landing .hero-brand-set li { width:auto; padding:4px 0; }
  body.sl-landing .hero-brand-set img { width:36px; height:36px; border-radius:10px; }
  body.sl-landing .home-sport-set a { padding:6px 10px; }
}

/* ------------------------------------------------------------------ section labels
   An icon and a word above each heading, in place of the pill and its dot. */
html:is(:root,#vo-a) body.sl-landing:is(*,#vo-b):is(*,#vo-c) :is(.sl-kicker, .home-feature-label) {
  display:inline-flex !important; align-items:center !important; gap:10px !important; width:max-content; height:auto !important; padding:0 !important;
  border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  color:var(--vo-text-2,#c4c4cc) !important; font:600 15px/1.3 var(--vo-font,'Plus Jakarta Sans',sans-serif) !important; letter-spacing:-.005em !important; text-transform:none !important;
}
html:is(:root,#vo-a) body.sl-landing:is(*,#vo-b):is(*,#vo-c) :is(.sl-kicker, .home-feature-label)::before {
  content:'' !important; flex:none; width:18px !important; height:18px !important; border-radius:0 !important; background:var(--sl-lime,#2BD07F) !important; box-shadow:none !important;
  -webkit-mask:var(--kicker-icon) center/contain no-repeat; mask:var(--kicker-icon) center/contain no-repeat;
}
#tools .sl-kicker { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%223.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%2213.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%3C%2Fsvg%3E"); }
#how .sl-kicker { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%2213.5%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M7%2010.5v3a3%203%200%200%200%203%203h3.5%22%2F%3E%3C%2Fsvg%3E"); }
#plans .sl-kicker { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3.5%2012.6V4.5a1%201%200%200%201%201-1h8.1a1%201%200%200%201%20.7.3l7.4%207.4a1%201%200%200%201%200%201.4l-8.1%208.1a1%201%200%200%201-1.4%200l-7.4-7.4a1%201%200%200%201-.3-.7Z%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E"); }
#faq .sl-kicker { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M9.5%209.2a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.9-1%201.6v.6M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
#explore .home-feature-label { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M5%2020c.8-3.6%203.6-5.6%207-5.6s6.2%202%207%205.6%22%2F%3E%3C%2Fsvg%3E"); }
#compare-odds .home-feature-label { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%221.6%22%2F%3E%3Crect%20x%3D%2213.5%22%20y%3D%225%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%221.6%22%2F%3E%3C%2Fsvg%3E"); }
#live-games .home-feature-label { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M3%2012h4l3-7%204%2014%203-7h4%22%2F%3E%3C%2Fsvg%3E"); }
#bet-tracker .home-feature-label { --kicker-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D%22M7%203.5h10a1.5%201.5%200%200%201%201.5%201.5v15.2l-3-1.7-3%201.7-3-1.7-3%201.7V5A1.5%201.5%200%200%201%207%203.5Z%22%2F%3E%3Cpath%20d%3D%22M9%208.5h6M9%2012h4%22%2F%3E%3C%2Fsvg%3E"); }

/* ------------------------------------------------------------------ feature points beside each widget */
.home-feature-copy > .dm-points { display:grid; gap:18px; width:100%; max-width:480px; margin:6px 0 6px; padding:0; list-style:none; }
.dm-points li { display:flex; align-items:flex-start; gap:14px; }
.dm-point-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.02)); box-shadow:inset 0 0 0 1px rgb(255 255 255/.09), inset 0 1px 0 rgb(255 255 255/.06); color:var(--dm-text-2); }
.dm-point-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dm-points li > span:last-child { display:grid; gap:4px; min-width:0; padding-top:1px; }
.dm-points b { color:var(--dm-text); font-size:15.5px; font-weight:650; letter-spacing:-.005em; }
.dm-points small { color:var(--dm-text-3); font-size:14.5px; line-height:1.5; }

/* ------------------------------------------------------------------ questions */
.dm-faq-inner { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; }
.dm-faq-list {
  width:100%; padding:6px; border-radius:26px;
  background:radial-gradient(120% 60% at 50% 0%,rgb(255 255 255/.035),transparent 65%), linear-gradient(180deg,#131317,#0d0d10);
  box-shadow:0 0 0 1px rgb(255 255 255/.085), inset 0 1px 0 rgb(255 255 255/.07), 0 40px 90px -45px rgb(0 0 0/.9);
}
.dm-faq-list details { position:relative; border-radius:20px; transition:background-color .25s; }
.dm-faq-list details + details::before { content:''; position:absolute; top:0; left:24px; right:24px; height:1px; background:rgb(255 255 255/.065); transition:opacity .25s; }
.dm-faq-list details:hover, .dm-faq-list details[open] { background:rgb(255 255 255/.035); }
.dm-faq-list details:is(:hover, [open])::before, .dm-faq-list details:is(:hover, [open]) + details::before { opacity:0; }
.dm-faq-list summary { display:flex; align-items:center; gap:20px; padding:22px 20px 22px 24px; list-style:none; cursor:pointer; }
.dm-faq-list summary::-webkit-details-marker { display:none; }
.dm-faq-list summary:focus-visible { outline:2px solid var(--vo-brand-hi,#8B6CFF); outline-offset:-2px; border-radius:20px; }
.dm-faq-q { flex:1; min-width:0; color:var(--dm-text); font-size:17px; font-weight:600; letter-spacing:-.012em; line-height:1.4; }
.dm-faq-icon { position:relative; display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px rgb(255 255 255/.09); transition:transform .3s var(--dm-ease), background-color .25s; }
.dm-faq-icon::before, .dm-faq-icon::after { content:''; position:absolute; width:12px; height:1.6px; border-radius:2px; background:var(--dm-text-2); }
.dm-faq-icon::after { transform:rotate(90deg); }
.dm-faq-list details[open] .dm-faq-icon { transform:rotate(45deg); background:rgb(255 255 255/.1); }
.dm-faq-answer { overflow:hidden; }
.dm-faq-answer p { max-width:66ch; padding:0 64px 24px 24px; color:var(--dm-text-3); font-size:15px; line-height:1.65; }
.dm-faq-answer a { color:var(--vo-brand-text,#c4b5ff); text-decoration:underline; text-underline-offset:3px; }
/* Under the questions: one row with the help center and contact. */
.dm-faq-contact {
  display:flex; align-items:center; gap:18px; width:100%; margin-top:20px; padding:20px 20px 20px 22px; border-radius:24px;
  background:radial-gradient(90% 120% at 0% 0%,rgb(255 255 255/.04),transparent 60%), linear-gradient(180deg,#131317,#0d0d10);
  box-shadow:0 0 0 1px rgb(255 255 255/.085), inset 0 1px 0 rgb(255 255 255/.07);
}
.dm-faq-contact-icon { display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:14px; background:rgb(255 255 255/.06); box-shadow:inset 0 0 0 1px rgb(255 255 255/.09); color:var(--dm-text-2); }
.dm-faq-contact-icon svg { width:22px; height:22px; }
.dm-faq-contact-text { display:grid; flex:1; gap:5px; min-width:0; }
.dm-faq-contact-text h3 { color:var(--dm-text); font-size:17px; font-weight:650; letter-spacing:-.01em; }
.dm-faq-contact-text p { color:var(--dm-text-3); font-size:14.5px; }
.dm-faq-contact-actions { display:flex; flex:none; gap:10px; }
.dm-faq-contact-actions .home-button { min-height:44px; padding:0 18px; font-size:14.5px; }
@media (max-width:640px) {
  .dm-faq-contact { flex-wrap:wrap; padding:18px; }
  .dm-faq-contact-text { flex-basis:calc(100% - 64px); }
  .dm-faq-contact-actions { flex-wrap:wrap; width:100%; }
  .dm-faq-contact-actions .home-button { flex:1 1 130px; }
}
@media (max-width:640px) {
  .dm-faq-list { padding:4px; border-radius:22px; }
  .dm-faq-list summary { gap:14px; padding:18px 14px 18px 18px; }
  .dm-faq-list details + details::before { left:18px; right:18px; }
  .dm-faq-q { font-size:16px; }
  .dm-faq-answer p { padding:0 18px 20px; font-size:15px; }
}

/* ------------------------------------------------------------------ the closing call to action */
.dm-cta { padding:8px 0 clamp(88px,10vw,128px); }
.dm-cta-panel {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); align-items:center; gap:48px; padding:clamp(40px,5.2vw,76px); overflow:hidden; border-radius:32px;
  background:linear-gradient(180deg,#141418,#0e0e11);
  box-shadow:0 0 0 1px rgb(255 255 255/.08), inset 0 1px 0 rgb(255 255 255/.06), 0 50px 100px -50px rgb(0 0 0/.9);
}
.dm-cta-copy { position:relative; display:grid; justify-items:start; gap:22px; }
.dm-cta-copy h2 { color:var(--dm-text); font-size:clamp(40px,4.7vw,66px); line-height:1.02; letter-spacing:-.045em; }
.dm-cta-soft { color:#7c7c86; }
.dm-cta-copy p { max-width:430px; color:var(--dm-text-3); font-size:17px; line-height:1.6; }
.dm-cta-copy .home-actions { justify-content:flex-start; margin-top:6px; }
.dm-cta-copy .home-actions .home-button { min-height:50px; padding:0 24px; font-size:15px; }
.dm-cta-stack { position:relative; height:350px; }
.dm-cta-card {
  position:absolute; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px;
  background:linear-gradient(180deg,#1c1c21,#141418);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.1), inset 0 1px 0 rgb(255 255 255/.08), 0 30px 50px -24px rgb(0 0 0/.9), 0 10px 20px -12px rgb(0 0 0/.7);
}
.dm-cta-card.is-tracker { top:0; right:0; z-index:1; display:grid; gap:10px; width:300px; padding:16px 18px 14px; }
.dm-cta-card.is-ev { top:178px; left:0; z-index:2; width:340px; }
.dm-cta-card.is-arb { top:274px; right:8px; z-index:3; width:320px; }
.dm-cta-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dm-cta-card-title { display:inline-flex; align-items:center; gap:8px; color:var(--dm-text-2); font-size:13px; font-weight:600; white-space:nowrap; }
.dm-cta-card-title img { width:18px; height:18px; }
.dm-cta-net { display:grid; gap:6px; }
.dm-cta-net small { color:var(--dm-text-3); font-size:12.5px; }
.dm-cta-net strong { color:var(--dm-up); font:800 34px/1 var(--vo-font,'Plus Jakarta Sans',sans-serif); font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.dm-cta-curve { display:block; width:100%; height:42px; overflow:visible; }
.dm-cta-line { fill:none; stroke:var(--dm-up); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.dm-cta-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:11px; background:var(--dm-up-soft); color:var(--dm-up); }
.dm-cta-icon svg { width:18px; height:18px; }
.dm-cta-card-text { display:grid; flex:1; gap:4px; min-width:0; }
.dm-cta-card-text b { overflow:hidden; color:var(--dm-text); font-size:14px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.dm-cta-card-text small { overflow:hidden; color:var(--dm-text-3); font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.dm-cta-price { display:inline-flex; align-items:center; gap:8px; flex:none; }
.dm-cta-price img { width:22px; height:22px; border-radius:6px; }
.dm-cta-price b { color:var(--dm-text); font:650 14px/1 var(--dm-mono); }
.dm-cta-price em { display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:6px; background:var(--dm-up-soft); color:var(--dm-up); font:650 12px/1 var(--dm-mono); font-style:normal; }
.dm-cta-teams { display:flex; flex:none; }
.dm-cta-teams img { width:30px; height:30px; padding:3px; border-radius:50%; background:#1d1d23; box-shadow:0 0 0 2px #17171c; }
.dm-cta-teams img + img { margin-left:-8px; }
.dm-cta-return { display:grid; flex:none; justify-items:end; gap:4px; }
.dm-cta-return b { color:var(--dm-up); font:700 17px/1 var(--dm-mono); }
.dm-cta-return small { color:var(--dm-text-3); font-size:12px; }
@media (max-width:1100px) {
  .dm-cta-panel { grid-template-columns:minmax(0,1fr); justify-items:center; gap:44px; }
  .dm-cta-copy { justify-items:center; text-align:center; }
  .dm-cta-copy p { margin-inline:auto; }
  .dm-cta-copy .home-actions { justify-content:center; }
  .dm-cta-stack { width:min(100%,440px); }
}
@media (max-width:540px) {
  .dm-cta-panel { padding:32px 20px 28px; border-radius:24px; }
  .dm-cta-copy .home-actions { width:100%; }
  .dm-cta-copy .home-actions .home-button { flex:1 1 100%; }
  /* Phones: the three cards stack as a short list instead of a fanned deck. */
  .dm-cta-stack { display:grid; gap:10px; height:auto; }
  .dm-cta-card, .dm-cta-card.is-tracker, .dm-cta-card.is-ev, .dm-cta-card.is-arb { position:relative; inset:auto; width:auto; }
  .dm-cta-price b { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .dm *, .dm *::before, .dm *::after { animation:none !important; transition:none !important; }
  [data-play] .dm-bar-fill { transform:none !important; }
  [data-play] .dm-ring-fill { stroke-dashoffset:var(--o) !important; }
  [data-play] .dm-bar-value { opacity:1 !important; }
  [data-play] :is(.dm-pl, .dm-tracker-curve) { clip-path:none !important; }
  [data-play] .dm-cal-day { opacity:1 !important; }
  .home-plan, .home-plan-action { transition:none; }
}

/* ------------------------------------------------------------------ the green accent: homepage specifics
   The accent variables, button text and focus colours are site-wide in atmosphere.css; these are the homepage's
   violet that was written as a value rather than a variable. */
.dm { --dm-violet-text:#5ce5a3; }
body.sl-landing .dm-window[data-tab="ev"] [data-rail="ev"], body.sl-landing .dm-window[data-tab="arb"] [data-rail="arb"], body.sl-landing .dm-window[data-tab="odds"] [data-rail="odds"], body.sl-landing .dm-window[data-tab="props"] [data-rail="props"] {
  background:rgb(43 208 127/.13); box-shadow:inset 0 0 0 1px rgb(43 208 127/.32);
}
body.sl-landing .sl-tool.is-feature { border-color:rgb(255 255 255/.1); }
body.sl-landing .sl-tool.is-feature .sl-tool-icon { box-shadow:none; }
body.sl-landing .tc-meter i { background:linear-gradient(90deg,#12A05C,#5ce5a3) 0 0/var(--w) 100% no-repeat, #1f1f25; }
body.sl-landing .tc-hist i.on { background:linear-gradient(180deg,#5ce5a3,#2BD07F); }
body.sl-landing .home-plan.is-featured {
  background:linear-gradient(180deg,#18181c,#121215);
  box-shadow:0 0 0 1px rgb(43 208 127/.45), inset 0 1px 0 rgb(255 255 255/.08), 0 50px 110px -45px rgb(0 0 0/.95);
}
body.sl-landing .home-plan.is-featured .home-plan-icon { background:rgb(43 208 127/.14); box-shadow:inset 0 0 0 1px rgb(43 208 127/.4); color:#5ce5a3; }
body.sl-landing .home-plan-badge { background:linear-gradient(180deg,#3fe090,#2BD07F); color:#04140b; }
body.sl-landing .home-plan.is-featured .home-plan-action { background:linear-gradient(180deg,#3fe090,#2BD07F); box-shadow:inset 0 1px 0 rgb(255 255 255/.28), 0 6px 18px -10px rgb(43 208 127/.28); color:#04140b; }
body.sl-landing .home-plan-action:focus-visible { outline-color:#2BD07F; }
html body.sl-landing .vo-consent :is(a, button):focus-visible { outline-color:#2BD07F !important; }
body.sl-landing :is(.home-product-preview, .hero-tracker)::after { background:none; }
html body.sl-landing :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color:#2BD07F; }