/* TT88 MY: the sports and match-data site. Ink-navy page, electric cyan on every button and
   every figure, white cards, and tables as the furniture - score boards, fixture cards, league
   standings and odds rails rather than a game floor.
   Hand written, not generated by the build. Namespaced .t7- so it cannot collide with anything. */
:root{
  --blue:#0A1222; --blue-d:#0E1A33; --blue-dd:#060D18; --ink:#04101C; --ink-2:#102A42;
  --cit:#22D3EE; --cit-2:#7DE7F7; --cit-d:#0E7490;
  --card:#FFFFFF; --mist:#EAF4FA; --mist-2:#CFE6F0;
  --txt:#0B1A2E; --mut:#4A6880; --line:#CBE2EC; --line-2:rgba(255,255,255,.22);
  --ok:#128a4e; --bar:62px;
  --font:Arial,"Helvetica Neue",Helvetica,"Noto Sans SC","PingFang SC",sans-serif;
  --disp:"Trebuchet MS","Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
}

/* role names over the palette slots above: the component rules are written in terms of
   what a colour is for rather than which slot it came from. */
:root {
  --band: var(--blue-d);
  --well: var(--blue-dd);
  --band-2: var(--ink-2);
  --accent: var(--cit);
  --hi: var(--cit-2);
  --accent-d: var(--cit-d);
  --sheet: var(--card);
  --wash: var(--mist);
  --wash-2: var(--mist-2);
  --on-sheet: var(--txt);
  --sub: var(--mut);
  --hair: var(--line);
  --hair-2: var(--line-2);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%;scroll-behavior:smooth}
body{margin:0;color:var(--txt);font-family:var(--font);line-height:1.65;background:var(--blue)}
a{color:var(--blue-d);text-decoration:none}
img{max-width:100%;height:auto;display:block;min-width:0}
h1,h2,h3,h4{margin:0;line-height:1.2;font-family:var(--disp);font-weight:900}
table{border-collapse:collapse;width:100%}
.w{
  max-width:1160px;
  margin-top:0;
  margin-right:auto;
  margin-bottom:0;
  margin-left:auto;
  padding-top:0;
  padding-right:20px;
  padding-bottom:0;
  padding-left:20px;
}
.note{display:block; margin-top:12px; font-size:12px; color:rgba(255,255,255,0.76)}

/* ---------- buttons ---------- */
.t7-btn{
display:inline-flex;
align-items:center;
justify-content:center;
row-gap:8px;
column-gap:8px;
min-height:46px;
padding-top:0;
padding-right:20px;
padding-bottom:0;
padding-left:20px;
border-radius:6px;
font-weight:900;
font-size:14px;
border-width:2px;
border-style:solid;
border-color:transparent;
text-align:center;
line-height:1.15;
letter-spacing:0.01em;
text-transform:uppercase;
  }
.t7-btn.y{
background:linear-gradient(180deg,var(--hi),var(--accent));
color:var(--ink);
box-shadow:0 3px 0 var(--accent-d);
  }
.t7-btn.w{background:#fff; color:var(--band); border-color:#fff}
.t7-btn.o{background:transparent; color:var(--band); border-color:var(--hair)}
.t7-btn.lg{min-height:54px; font-size:15px; padding-top:0; padding-right:26px; padding-bottom:0; padding-left:26px}

/* ---------- header ---------- */
.t7-head{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--ink);
  border-bottom-width:3px;
  border-bottom-style:solid;
  border-bottom-color:var(--accent);
}
.t7-head .w{display:flex; align-items:center; row-gap:16px; column-gap:16px; padding-top:10px; padding-bottom:10px}
.t7-logo{
  display:flex;
  align-items:center;
  row-gap:9px;
  column-gap:9px;
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  min-width:0;
}
.t7-logo svg{width:36px; height:36px; flex-grow:0; flex-shrink:0; flex-basis:auto}
.t7-logo .wm{display:flex;flex-direction:column;line-height:1;min-width:0}
.t7-logo .wm b{
font-family:var(--disp);
font-size:20px;
letter-spacing:0.01em;
white-space:nowrap;
color:var(--accent);
  }
.t7-logo .wm small{
font-size:8px;
letter-spacing:0.34em;
color:#fff;
font-weight:bold;
margin-top:4px;
white-space:nowrap;
opacity:0.78;
  }
.t7-pills{
  display:flex;
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0%;
  flex-wrap:wrap;
  row-gap:4px;
  column-gap:4px;
  min-width:0;
}
.t7-pills a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
min-width:44px;
padding-top:0;
padding-right:12px;
padding-bottom:0;
padding-left:12px;
border-radius:5px;
font-size:12.5px;
font-weight:800;
color:#dde4f6;
white-space:nowrap;
  }
.t7-pills a:hover{background:var(--band-2); color:#fff}
.t7-lang{display:flex; row-gap:3px; column-gap:3px; flex-grow:0; flex-shrink:0; flex-basis:auto}
.t7-lang a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:40px;
min-height:44px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:var(--hair-2);
color:#dde4f6;
font-size:11.5px;
font-weight:800;
padding-top:0;
padding-right:6px;
padding-bottom:0;
padding-left:6px;
white-space:nowrap;
  }
.t7-lang a.on{background:var(--accent); color:var(--ink); border-color:transparent}
.t7-burger{
display:none;
background:var(--band-2);
border-width:1px;
border-style:solid;
border-color:var(--hair-2);
color:var(--accent);
font-size:17px;
min-width:44px;
min-height:44px;
border-radius:5px;
cursor:pointer;
  }
.t7-drawer{
  display:none;
  flex-wrap:wrap;
  row-gap:6px;
  column-gap:6px;
  padding-top:0;
  padding-right:20px;
  padding-bottom:12px;
  padding-left:20px;
  background:var(--ink);
}
.t7-open .t7-drawer{display:flex}
.t7-drawer a{
display:inline-flex;
align-items:center;
min-height:40px;
padding-top:0;
padding-right:13px;
padding-bottom:0;
padding-left:13px;
border-radius:5px;
background:var(--band-2);
color:#fff;
font-size:13px;
font-weight:800;
  }

/* ---------- hero ---------- */
.t7-hero{
padding-top:30px;
padding-right:0;
padding-bottom:10px;
padding-left:0;
background:radial-gradient(1200px 420px at 86% 8%,rgba(255,225,107,0.17),transparent 62%), linear-gradient(170deg,var(--blue) 0%,var(--band) 100%);
  }
.t7-hero.big{padding:40px 0 14px}
.t7-hero .w{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
row-gap:30px;
column-gap:30px;
align-items:center;
  }
.t7-hero .bd{display:grid; row-gap:14px; column-gap:14px; align-content:start; min-width:0}
.t7-hero .eb{
font-size:10.5px;
font-weight:900;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--accent);
  }
.t7-hero h1{font-size:40px;line-height:1.14;color:#fff}
.t7-hero.big h1{font-size:45px}
.t7-hero .lead{margin:0;font-size:16px;color:#dfe6f8;max-width:56ch}
/* An in-content link on the blue has to be readable: the default link colour is the
   page background's own family and vanishes into it. */
.t7-hero a:not(.t7-btn),.t7-sec .note a,.t7-why a,.t7-cash a{
color:var(--accent);
text-decoration:underline;
text-underline-offset:2px;
  }
.t7-hero .act{display:flex; flex-wrap:wrap; row-gap:12px; column-gap:12px}
.t7-hero .chips{display:flex; flex-wrap:wrap; row-gap:8px; column-gap:8px; margin-top:2px; min-width:0}
.t7-hero .chips span{
display:inline-flex;
align-items:center;
row-gap:7px;
column-gap:7px;
padding-top:7px;
padding-right:12px;
padding-bottom:7px;
padding-left:12px;
border-radius:5px;
background:rgba(255,255,255,0.12);
border-width:1px;
border-style:solid;
border-color:var(--hair-2);
font-size:11.5px;
color:#eaf0ff;
font-weight:800;
min-height:36px;
min-width:0;
  }
.t7-hero .chips i{font-style:normal; color:var(--accent); font-size:12.5px; flex-grow:0; flex-shrink:0; flex-basis:auto}
.t7-hero .ph{margin:0;min-width:0}
.t7-hero .ph img{
width:100%;
aspect-ratio:3/2;
object-fit:cover;
border-radius:12px;
border-width:3px;
border-style:solid;
border-color:var(--accent);
  }

/* store chips: an Android file and a home-screen route, not two app-store badges */
.t7-stores{display:flex; flex-wrap:wrap; row-gap:9px; column-gap:9px; min-width:0}
.t7-stores .st{
display:flex;
align-items:center;
row-gap:10px;
column-gap:10px;
padding-top:8px;
padding-right:13px;
padding-bottom:8px;
padding-left:13px;
border-radius:7px;
background:var(--ink);
border-width:1px;
border-style:solid;
border-color:var(--hair-2);
min-width:0;
flex-grow:0;
flex-shrink:1;
flex-basis:auto;
  }
.t7-stores .st>i{
  font-style:normal;
  font-size:19px;
  color:var(--accent);
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  line-height:1;
}
.t7-stores .st>span{display:grid; row-gap:1px; column-gap:1px; min-width:0}
.t7-stores .st b{font-size:12.5px;color:#fff;line-height:1.25}
.t7-stores .st small{font-size:10.5px;color:#b9c5e6;line-height:1.3}

/* ---------- generic section ---------- */
.t7-sec{padding:26px 0}
.t7-sec.pad{padding-top:38px}
.t7-sec .sh{margin-bottom:18px}
.t7-sec .sh h2{font-size:27px;color:#fff}
.t7-sec .sh p{margin-top:8px; margin-right:0; margin-bottom:0; margin-left:0; color:#d6ddf4; font-size:14.5px}

/* kpi row */
.t7-kpis{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
row-gap:2px;
column-gap:2px;
border-radius:12px;
overflow-x:hidden;
overflow-y:hidden;
background:var(--accent);
  }
.t7-kpis>div{min-width:0;
  display:grid;
  row-gap:3px;
  column-gap:3px;
  text-align:center;
  padding-top:17px;
  padding-right:12px;
  padding-bottom:17px;
  padding-left:12px;
  background:var(--sheet);
}
.t7-kpis b{font-family:var(--disp); font-size:31px; color:var(--band); line-height:1}
.t7-kpis span{font-size:11.5px; color:var(--sub); line-height:1.35}

/* payment rail */
.t7-rail{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:10px;
  column-gap:10px;
}
.t7-rail .rc{
display:flex;
align-items:center;
row-gap:9px;
column-gap:9px;
min-height:58px;
padding-top:10px;
padding-right:12px;
padding-bottom:10px;
padding-left:12px;
border-radius:9px;
background:var(--sheet);
min-width:0;
  }
.t7-rail .rc img{
  max-height:22px;
  width:auto;
  height:auto;
  object-fit:contain;
  flex-grow:0;
  flex-shrink:1;
  flex-basis:auto;
  min-width:0;
}
.t7-rail .rc em{font-style:normal; font-size:11.5px; font-weight:800; color:var(--on-sheet); min-width:0}

/* four product tiles */
.t7-tiles{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:14px;
  column-gap:14px;
}
.t7-tiles .tl{
display:grid;
row-gap:9px;
column-gap:9px;
align-content:start;
padding-top:20px;
padding-right:18px;
padding-bottom:22px;
padding-left:18px;
border-radius:12px;
background:var(--sheet);
border-bottom-width:4px;
border-bottom-style:solid;
border-bottom-color:var(--accent);
min-width:0;
  }
.t7-tiles .ic{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:11px;
background:var(--wash);
color:var(--band);
  }
.t7-tiles .ic svg{width:30px;height:30px}
.t7-tiles .tl b{font-family:var(--disp);font-size:18px;color:var(--ink)}
.t7-tiles .tl p{margin:0; font-size:13px; color:var(--sub); line-height:1.55}

/* match-odds board */
.t7-odds{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap:13px; column-gap:13px}
.t7-odds .mt{
display:grid;
row-gap:11px;
column-gap:11px;
align-content:start;
padding-top:15px;
padding-right:16px;
padding-bottom:17px;
padding-left:16px;
border-radius:11px;
background:var(--sheet);
min-width:0;
  }
.t7-odds .hd{display:flex; align-items:center; row-gap:9px; column-gap:9px; flex-wrap:wrap; min-width:0}
.t7-odds .lg{
font-family:var(--font);
font-size:10.5px;
font-weight:900;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--band);
background:var(--wash);
padding-top:4px;
padding-right:8px;
padding-bottom:4px;
padding-left:8px;
border-radius:4px;
min-width:0;
  }
.t7-odds .lv{
font-style:normal;
display:inline-flex;
align-items:center;
row-gap:5px;
column-gap:5px;
font-size:10px;
font-weight:900;
letter-spacing:0.09em;
color:#b8161f;
background:#fdecec;
padding-top:4px;
padding-right:8px;
padding-bottom:4px;
padding-left:8px;
border-radius:4px;
  }
.t7-odds .lv i{width:7px;height:7px;border-radius:50%;background:#d8232e;animation:sbpulse 1.3s infinite}
.t7-odds .tm{font-style:normal; font-size:11px; font-weight:800; color:var(--sub)}
.t7-odds .hd small{font-size:11px; color:var(--sub); font-weight:bold}
.t7-odds .tms{display:flex; align-items:center; row-gap:10px; column-gap:10px; min-width:0}
.t7-odds .tms span{
font-family:var(--disp);
font-size:16.5px;
font-weight:900;
color:var(--ink);
min-width:0;
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
  }
.t7-odds .tms span:last-child{text-align:right}
.t7-odds .tms i{
  font-style:normal;
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  font-size:11px;
  font-weight:800;
  color:var(--sub);
}
.t7-odds .ods{display:flex; row-gap:8px; column-gap:8px; min-width:0}
.t7-odds .od{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
row-gap:2px;
column-gap:2px;
flex-grow:1;
flex-shrink:1;
flex-basis:0;
min-width:0;
min-height:48px;
border-radius:7px;
background:linear-gradient(180deg,var(--hi),var(--accent));
color:var(--ink);
  }
.t7-odds .od span{
font-size:10px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.06em;
opacity:0.72;
  }
.t7-odds .od b{font-family:var(--disp);font-size:15.5px;line-height:1}
@keyframes sbpulse{50%{opacity:.25}}

/* full-width photographic band */
.t7-band{position:relative; margin-top:14px; margin-right:0; margin-bottom:14px; margin-left:0; background:var(--ink)}
.t7-band>img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 42%}
/* The badminton frame puts the racket and the shuttle high in the picture, so the
   band has to hold the top of it rather than the middle. */
img[src$="/assets/img/band-badminton.jpg"]{object-position:center 28%}
.t7-band .w{
position:absolute;
left:0;
right:0;
bottom:0;
padding-bottom:20px;
padding-top:40px;
background:linear-gradient(180deg,rgba(10,23,51,0),rgba(10,23,51,0.82));
  }
.t7-band p{
margin:0;
font-family:var(--disp);
font-weight:900;
font-size:22px;
color:#fff;
max-width:30ch;
text-shadow:0 1px 10px rgba(10,23,51,0.6);
  }

/* why-us: eight white cards on the deeper blue */
.t7-why{
  padding-top:30px;
  padding-right:0;
  padding-bottom:30px;
  padding-left:0;
  background:linear-gradient(180deg,var(--band),var(--well));
}
.t7-why .sh{margin-bottom:18px}
.t7-why .sh h2{font-size:27px;color:#fff}
.t7-why .sh p{margin-top:8px; margin-right:0; margin-bottom:0; margin-left:0; font-size:14.5px; color:#cfd8f3}
.t7-why .gr{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:13px;
  column-gap:13px;
}
.t7-why .wc{
display:grid;
row-gap:8px;
column-gap:8px;
align-content:start;
padding-top:18px;
padding-right:17px;
padding-bottom:20px;
padding-left:17px;
border-radius:11px;
background:var(--sheet);
min-width:0;
  }
.t7-why .ic{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:9px;
background:var(--accent);
font-size:19px;
line-height:1;
  }
.t7-why .wc b{font-family:var(--disp);font-size:15.5px;color:var(--ink);line-height:1.3}
.t7-why .wc p{margin:0; font-size:12.5px; color:var(--sub); line-height:1.6}

/* latest winners: a vertical scroll of rows */
.t7-winners{
height:268px;
overflow-x:hidden;
overflow-y:hidden;
border-radius:12px;
background:var(--sheet);
position:relative;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  }
.t7-winners .tr{animation:sbroll 34s linear infinite}
.t7-winners:hover .tr{animation-play-state:paused}
.t7-winners .wr{
display:grid;
grid-template-columns:minmax(0,96px) minmax(0,1fr) auto minmax(0,42px);
align-items:center;
row-gap:12px;
column-gap:12px;
padding-top:10px;
padding-right:16px;
padding-bottom:10px;
padding-left:16px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:var(--wash);
  }
.t7-winners .id{font-size:12px; font-weight:800; color:var(--sub); min-width:0}
.t7-winners .gm{font-size:13px; color:var(--on-sheet); min-width:0}
.t7-winners b{
font-family:var(--disp);
font-size:16px;
color:var(--band);
background:var(--accent);
padding-top:2px;
padding-right:9px;
padding-bottom:2px;
padding-left:9px;
border-radius:5px;
white-space:nowrap;
  }
.t7-winners small{font-size:11px; color:var(--sub); text-align:end}
@keyframes sbroll{to{transform:translateY(-50%)}}

/* live-casino cards */
.t7-live{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap:15px; column-gap:15px}
.t7-live .lc{
display:grid;
align-content:start;
border-radius:12px;
overflow-x:hidden;
overflow-y:hidden;
background:var(--sheet);
min-width:0;
  }
.t7-live .lc img{width:100%;aspect-ratio:4/3;object-fit:cover}
.t7-live .bd{
  display:grid;
  row-gap:9px;
  column-gap:9px;
  padding-top:15px;
  padding-right:16px;
  padding-bottom:18px;
  padding-left:16px;
  min-width:0;
}
.t7-live .bd b{font-family:var(--disp);font-size:17px;color:var(--ink)}
.t7-live .mt{display:flex; flex-wrap:wrap; row-gap:7px; column-gap:7px}
.t7-live .mt span{
font-size:11px;
font-weight:800;
color:var(--band);
background:var(--wash);
padding-top:4px;
padding-right:9px;
padding-bottom:4px;
padding-left:9px;
border-radius:4px;
  }
.t7-live .bd p{margin:0; font-size:12.5px; color:var(--sub); line-height:1.6}
.t7-live .t7-btn{justify-self:start}

/* VIP tiers */
.t7-vip{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:12px;
  column-gap:12px;
}
.t7-vip .vt{
display:grid;
row-gap:7px;
column-gap:7px;
align-content:start;
padding-top:16px;
padding-right:15px;
padding-bottom:18px;
padding-left:15px;
border-radius:11px;
background:var(--sheet);
border-top-width:4px;
border-top-style:solid;
border-top-color:var(--accent);
min-width:0;
  }
.t7-vip .vt>b{font-family:var(--disp); font-size:17px; color:var(--ink); letter-spacing:0.03em}
.t7-vip .rw{
display:flex;
align-items:baseline;
justify-content:space-between;
row-gap:8px;
column-gap:8px;
border-bottom-width:1px;
border-bottom-style:dashed;
border-bottom-color:var(--hair);
padding-bottom:5px;
min-width:0;
  }
.t7-vip .rw span{font-size:11px; color:var(--sub); min-width:0}
.t7-vip .rw em{
font-style:normal;
font-size:12.5px;
font-weight:900;
color:var(--band);
white-space:nowrap;
  }
.t7-vip .vt p{
  margin-top:3px;
  margin-right:0;
  margin-bottom:0;
  margin-left:0;
  font-size:12px;
  color:var(--sub);
  line-height:1.55;
}

/* membership plans */
.t7-plans{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
row-gap:16px;
column-gap:16px;
align-items:start;
padding-top:14px;
  }
.t7-plans .pl{
position:relative;
display:grid;
row-gap:11px;
column-gap:11px;
align-content:start;
padding-top:22px;
padding-right:20px;
padding-bottom:24px;
padding-left:20px;
border-radius:13px;
background:var(--sheet);
min-width:0;
  }
.t7-plans .pl.pop{
background:linear-gradient(180deg,#fffdf2,var(--sheet));
box-shadow:0 10px 26px rgba(10,23,51,0.28);
border-width:2px;
border-style:solid;
border-color:var(--accent);
  }
.t7-plans .rb{
position:absolute;
top:-13px;
left:50%;
transform:translateX(-50%);
white-space:nowrap;
background:var(--ink);
color:var(--accent);
font-size:10.5px;
font-weight:900;
letter-spacing:0.1em;
text-transform:uppercase;
padding-top:6px;
padding-right:14px;
padding-bottom:6px;
padding-left:14px;
border-radius:999px;
  }
.t7-plans .pl>b{font-family:var(--disp);font-size:20px;color:var(--ink)}
.t7-plans .pl>small{font-size:12px; color:var(--sub); line-height:1.5}
.t7-plans ul{
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position:outside;
  list-style-image:none;
  display:grid;
  row-gap:9px;
  column-gap:9px;
}
.t7-plans li{position:relative; padding-left:26px; font-size:13px; color:var(--on-sheet); line-height:1.55}
.t7-plans li::before{
content:"";
position:absolute;
left:0;
top:5px;
width:16px;
height:16px;
border-radius:50%;
background:var(--accent);
  }
.t7-plans li::after{
content:"";
position:absolute;
left:5px;
top:10px;
width:6px;
height:3px;
border-left-width:2px;
border-left-style:solid;
border-left-color:var(--ink);
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:var(--ink);
transform:rotate(-45deg);
  }
.t7-plans .t7-btn{justify-self:stretch}

/* four steps */
.t7-steps{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:13px;
  column-gap:13px;
}
.t7-steps .sp{
display:grid;
row-gap:9px;
column-gap:9px;
align-content:start;
padding-top:17px;
padding-right:16px;
padding-bottom:19px;
padding-left:16px;
border-radius:11px;
background:var(--sheet);
min-width:0;
  }
.t7-steps em{
font-style:normal;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:var(--ink);
color:var(--accent);
font-family:var(--disp);
font-size:16px;
font-weight:900;
  }
.t7-steps p{margin:0; font-size:13px; color:var(--on-sheet); line-height:1.6}

/* app block */
.t7-app{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
row-gap:28px;
column-gap:28px;
align-items:center;
padding:24px;
border-radius:14px;
background:var(--sheet);
  }
.t7-app .bd{display:grid; row-gap:14px; column-gap:14px; align-content:start; min-width:0; justify-items:start}
.t7-app h3{font-size:25px;color:var(--ink)}
.t7-app .bd p{margin:0; font-size:14.5px; color:var(--sub)}
.t7-app .bd .t7-stores .st{background:var(--wash); border-color:var(--hair)}
.t7-app .bd .t7-stores .st b{color:var(--ink)}
.t7-app .bd .t7-stores .st small{color:var(--mut)}
.t7-app .bd .t7-stores .st>i{color:var(--blue-d)}
.t7-app .ph{display:flex;justify-content:center;min-width:0}
.t7-app .fr{
display:block;
width:min(252px,100%);
padding:11px;
border-radius:30px;
background:var(--ink);
box-shadow:0 14px 30px rgba(10,23,51,0.3);
min-width:0;
  }
.t7-app .fr img{width:100%;border-radius:21px;min-width:0}

/* studio wall + name chips + sportsbook wall */
.t7-provs{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:10px;
  column-gap:10px;
}
.t7-provs .pg{display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px;
  border-radius:9px;background:var(--ink);min-width:0}
.t7-provs .pg img{
max-height:26px;
max-width:100%;
width:auto;
height:auto;
object-fit:contain;
flex-grow:0;
flex-shrink:1;
flex-basis:auto;
min-width:0;
  }
.t7-chips{display:flex; flex-wrap:wrap; row-gap:8px; column-gap:8px; margin-top:12px}
.t7-chips .pc{
display:inline-flex;
align-items:center;
min-height:34px;
padding-top:0;
padding-right:13px;
padding-bottom:0;
padding-left:13px;
border-radius:5px;
background:rgba(255,255,255,0.13);
border-width:1px;
border-style:solid;
border-color:var(--hair-2);
color:#eaf0ff;
font-size:12px;
font-weight:800;
  }

/* game tile wall */
.t7-gt{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:11px;
  column-gap:11px;
}
.t7-gt .gt{
display:grid;
row-gap:5px;
column-gap:5px;
align-content:start;
padding:8px;
border-radius:10px;
background:var(--sheet);
min-width:0;
  }
.t7-gt .gt img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;min-width:0}
.t7-gt .gt em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--ink);line-height:1.3}
.t7-gt .gt small{font-size:10px; color:var(--sub)}

/* trust badges */
.t7-trust{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap:10px;
  column-gap:10px;
}
.t7-trust .tb{
display:grid;
justify-items:center;
align-content:center;
row-gap:7px;
column-gap:7px;
min-height:76px;
padding-top:12px;
padding-right:9px;
padding-bottom:12px;
padding-left:9px;
border-radius:9px;
background:var(--ink);
min-width:0;
  }
.t7-trust .tb img{max-height:28px;max-width:100%;width:auto;height:auto;object-fit:contain;min-width:0}
.t7-trust .tb em{font-style:normal;font-size:10px;font-weight:800;color:#c3cdea;text-align:center;
  line-height:1.3;min-width:0}

/* cashier rows */
.t7-cash{display:grid; row-gap:0; column-gap:0; padding-left:5px}
.t7-cash .cr{
display:grid;
grid-template-columns:28px minmax(0,1fr);
row-gap:14px;
column-gap:14px;
padding-top:0;
padding-right:0;
padding-bottom:20px;
padding-left:0;
position:relative;
  }
.t7-cash .cr:last-child{padding-bottom:0}
.t7-cash .cr::before{
content:"";
position:absolute;
left:13px;
top:20px;
bottom:0;
width:2px;
background:rgba(255,255,255,0.26);
  }
.t7-cash .cr:last-child::before{display:none}
.t7-cash .dot{
width:28px;
height:28px;
border-radius:50%;
background:var(--accent);
position:relative;
z-index:2;
  }
.t7-cash .bd{display:grid; row-gap:4px; column-gap:4px; min-width:0}
.t7-cash .bd b{font-family:var(--disp);font-size:16px;color:#fff}
.t7-cash .bd em{
font-style:normal;
justify-self:start;
font-size:11px;
font-weight:900;
padding-top:3px;
padding-right:10px;
padding-bottom:3px;
padding-left:10px;
border-radius:999px;
background:var(--accent);
color:var(--ink);
  }
.t7-cash .bd p{margin:0;font-size:13.5px;color:#dbe2f6}

/* ---------- prose ---------- */
.t7-prose{
  background:var(--sheet);
  border-radius:14px;
  padding-top:30px;
  padding-right:32px;
  padding-bottom:34px;
  padding-left:32px;
}
.t7-prose h1{font-size:33px;color:var(--ink);margin-bottom:12px}
.t7-prose h2{
  font-size:23px;
  color:var(--ink);
  margin-top:30px;
  margin-right:0;
  margin-bottom:11px;
  margin-left:0;
  scroll-margin-top:86px;
}
.t7-prose h2:first-child{margin-top:0}
.t7-prose p{margin-top:0; margin-right:0; margin-bottom:14px; margin-left:0; color:#3b456b}
.t7-prose .lead{font-size:16.5px; color:var(--sub); margin-bottom:20px}
.t7-prose ul{
  margin-top:0;
  margin-right:0;
  margin-bottom:16px;
  margin-left:0;
  padding-left:22px;
  display:grid;
  row-gap:7px;
  column-gap:7px;
  color:#3b456b;
}
.t7-prose .act{
  display:flex;
  flex-wrap:wrap;
  row-gap:12px;
  column-gap:12px;
  margin-top:0;
  margin-right:0;
  margin-bottom:24px;
  margin-left:0;
}
.t7-tw{
  overflow-x:auto;
  border-radius:11px;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  margin-top:4px;
  margin-right:0;
  margin-bottom:24px;
  margin-left:0;
}
.t7-tbl{font-size:13.5px; min-width:460px; background:var(--sheet)}
.t7-tbl th{
background:var(--ink);
color:var(--accent);
text-align:start;
padding-top:11px;
padding-right:14px;
padding-bottom:11px;
padding-left:14px;
font-size:11px;
letter-spacing:0.07em;
text-transform:uppercase;
  }
.t7-tbl td{
  padding-top:11px;
  padding-right:14px;
  padding-bottom:11px;
  padding-left:14px;
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:var(--hair);
  color:#3b456b;
}
.t7-faq{display:grid; row-gap:9px; column-gap:9px; margin-top:0; margin-right:0; margin-bottom:6px; margin-left:0}
.t7-faq details{border-radius:10px; border-width:1px; border-style:solid; border-color:var(--hair); background:var(--wash)}
.t7-faq summary{
  cursor:pointer;
  padding-top:14px;
  padding-right:16px;
  padding-bottom:14px;
  padding-left:16px;
  font-weight:800;
  font-size:14.5px;
  color:var(--band);
}
.t7-faq p{margin:0; padding-top:0; padding-right:16px; padding-bottom:15px; padding-left:16px; color:#3b456b}

/* closing band */
.t7-close{padding:4px 0 36px}
.t7-close .w{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
row-gap:18px;
column-gap:18px;
padding-top:24px;
padding-right:26px;
padding-bottom:24px;
padding-left:26px;
border-radius:14px;
background:linear-gradient(110deg,var(--accent),var(--hi));
  }
.t7-close b{font-family:var(--disp);font-size:19px;line-height:1.4;max-width:62ch;color:var(--ink)}
.t7-close .t7-btn.y{background:var(--ink); color:var(--accent); box-shadow:none}

/* ---------- footer ---------- */
.t7-foot{background:var(--ink);margin-top:10px}
.t7-foot .w{padding-top:32px; padding-bottom:28px; display:grid; row-gap:22px; column-gap:22px}
.t7-foot .top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; row-gap:24px; column-gap:24px}
.t7-foot .ab{display:grid; row-gap:12px; column-gap:12px; align-content:start; min-width:0}
.t7-foot .ab p{margin:0;font-size:12.5px;color:#aab6d8;line-height:1.65}
.t7-foot .top>div{display:grid; row-gap:8px; column-gap:8px; align-content:start; min-width:0}
.t7-foot h4{font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent)}
.t7-foot a{display:inline-flex;align-items:center;min-height:34px;color:#aab6d8;font-size:13px}
.t7-foot .pay,.t7-foot .trust{
display:flex;
flex-wrap:wrap;
row-gap:9px;
column-gap:9px;
padding-top:18px;
border-top-width:1px;
border-top-style:solid;
border-top-color:var(--hair-2);
  }
.t7-foot .pay span,.t7-foot .trust span{
display:flex;
align-items:center;
justify-content:center;
height:36px;
padding-top:0;
padding-right:12px;
padding-bottom:0;
padding-left:12px;
border-radius:6px;
background:var(--band-2);
min-width:0;
  }
.t7-foot .pay img{max-height:19px;width:auto;object-fit:contain;min-width:0}
.t7-foot .trust img{max-height:22px;width:auto;object-fit:contain;min-width:0}
.t7-foot .legal{
display:flex;
flex-wrap:wrap;
align-items:center;
row-gap:13px;
column-gap:13px;
padding-top:17px;
border-top-width:1px;
border-top-style:solid;
border-top-color:var(--hair-2);
  }
.t7-foot .legal p{margin:0; flex-grow:1; flex-shrink:1; flex-basis:0%; min-width:240px; font-size:12.5px; color:#aab6d8}
.t7-foot .legal small{font-size:12px;color:#8d9bc2}
.t7-foot .age{
display:inline-flex;
align-items:center;
justify-content:center;
flex-grow:0;
flex-shrink:0;
flex-basis:auto;
width:34px;
height:34px;
border-radius:50%;
border-width:2px;
border-style:solid;
border-color:var(--accent);
color:var(--accent);
font-weight:900;
font-size:11px;
  }

/* ---------- sticky join bar (desktop) + five-tab bar (phone) ---------- */
.t7-sticky{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:60;
display:flex;
align-items:center;
justify-content:center;
row-gap:14px;
column-gap:14px;
padding-top:10px;
padding-right:18px;
padding-bottom:10px;
padding-left:18px;
background:var(--ink);
border-top-width:3px;
border-top-style:solid;
border-top-color:var(--accent);
  }
.t7-sticky.off{display:none}
.t7-sticky span{font-size:13.5px; color:#fff; font-weight:bold}
.t7-sticky .t7-btn{min-height:42px; padding-top:0; padding-right:17px; padding-bottom:0; padding-left:17px; font-size:12.5px}
.t7-sticky .x{
width:44px;
height:44px;
border-radius:50%;
border-width:1px;
border-style:solid;
border-color:var(--hair-2);
background:transparent;
color:#aab6d8;
font-size:17px;
line-height:1;
cursor:pointer;
  }
.t7-tabs{display:none}

/* ---------- paged entry modal ---------- */
.t7-pop[hidden]{display:none}
.t7-pop{
position:fixed;
inset:0;
z-index:80;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(10,23,51,0.66);
  }
.t7-pop .bx{
position:relative;
width:min(366px,100%);
max-height:92vh;
overflow-x:auto;
overflow-y:auto;
border-radius:15px;
background:var(--sheet);
border-width:3px;
border-style:solid;
border-color:var(--accent);
box-shadow:0 22px 50px rgba(10,23,51,0.45);
padding-top:0;
padding-right:0;
padding-bottom:14px;
padding-left:0;
  }
.t7-pop .x{
position:absolute;
top:8px;
right:8px;
width:34px;
height:34px;
border-width:0;
border-style:none;
border-color:currentcolor;
border-radius:50%;
cursor:pointer;
font-size:21px;
line-height:1;
color:#fff;
background:rgba(10,23,51,0.6);
z-index:3;
  }
.t7-pop .tp{
  display:grid;
  row-gap:3px;
  column-gap:3px;
  padding-top:15px;
  padding-right:18px;
  padding-bottom:15px;
  padding-left:18px;
  background:var(--ink);
  text-align:center;
}
.t7-pop .tp .wm{
font-family:var(--disp);
font-weight:900;
font-size:19px;
color:var(--accent);
letter-spacing:0.02em;
  }
.t7-pop .tp em{
font-style:normal;
font-size:10.5px;
letter-spacing:0.2em;
text-transform:uppercase;
color:#b9c5e6;
  }
.t7-pop .pn{
  display:grid;
  row-gap:11px;
  column-gap:11px;
  padding-top:18px;
  padding-right:20px;
  padding-bottom:6px;
  padding-left:20px;
}
.t7-pop .pn[hidden]{display:none!important}
.t7-pop .pn b{font-family:var(--disp);font-size:21px;color:var(--ink);line-height:1.26}
.t7-pop .pn p{margin:0; font-size:13.5px; color:var(--sub); line-height:1.6}
.t7-pop .pn .t7-btn{margin-top:2px}
.t7-pop .pg{
  display:flex;
  justify-content:center;
  row-gap:9px;
  column-gap:9px;
  padding-top:12px;
  padding-right:0;
  padding-bottom:4px;
  padding-left:0;
}
.t7-pop .pg .dt{
width:11px;
height:11px;
border-radius:50%;
border-width:0;
border-style:none;
border-color:currentcolor;
cursor:pointer;
padding:0;
background:var(--wash-2);
  }
.t7-pop .pg .dt.on{background:var(--accent); box-shadow:0 0 0 3px rgba(245,197,24,0.28)}
.t7-pop .later{
display:block;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
border-width:0;
border-style:none;
border-color:currentcolor;
background:none;
cursor:pointer;
font:inherit;
font-size:12.5px;
color:var(--sub);
text-decoration:underline;
padding-top:4px;
padding-right:8px;
padding-bottom:4px;
padding-left:8px;
  }

/* ---------- responsive ---------- */
@media(max-width:1060px){
  .t7-why .gr,.t7-trust,.t7-provs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .t7-odds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t7-vip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t7-gt{grid-template-columns:repeat(4,minmax(0,1fr))}
  .t7-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1000px){
  .t7-hero .w{grid-template-columns:1fr}
  /* On a phone the headline, the buttons and the store chips all come before the picture. The
     picture floating above them looked better and pushed the hero CTA out of the thumb arc,
     which is the one rule this shell is not allowed to break. */
  .t7-hero .bd{order:1}
  .t7-hero .ph{order:2}
  .t7-hero .ph img{aspect-ratio:16/9}
  .t7-hero h1,.t7-hero.big h1{font-size:30px}
  .t7-hero .lead{font-size:14.5px;line-height:1.55}
  .t7-pills{display:none}
  .t7-burger{display:inline-flex;align-items:center;justify-content:center}
  .t7-head .w{justify-content:space-between}
  .t7-tiles,.t7-live,.t7-plans,.t7-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t7-app{grid-template-columns:1fr}
  .t7-app .ph{order:-1}
  .t7-foot .top{grid-template-columns:1fr 1fr}
  .t7-band>img{aspect-ratio:16/8}
}
@media(max-width:760px){
  body{padding-bottom:calc(var(--bar) + 10px)}
  .t7-hero{padding:20px 0 8px}
  .t7-hero.big{padding:22px 0 10px}
  .t7-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t7-why .gr,.t7-vip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t7-trust,.t7-provs,.t7-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t7-gt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t7-odds{grid-template-columns:1fr}
  .t7-sec .sh h2,.t7-why .sh h2{font-size:22px}
  .t7-prose{padding:22px 20px 26px}
  .t7-prose h1{font-size:26px}
  .t7-prose h2{font-size:20px;scroll-margin-top:72px}
  .t7-band p{font-size:17px}
  .t7-close b{font-size:16px}
  /* The sticky bar becomes the tab bar's job on a phone, so only one strip is ever pinned. */
  .t7-sticky{display:none}
  .t7-tabs{
display:grid;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:60;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
height:var(--bar);
padding-top:8px;
background:var(--ink);
border-top-width:3px;
border-top-style:solid;
border-top-color:var(--accent);
    }
  .t7-tabs a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
row-gap:2px;
column-gap:2px;
color:#b9c5e6;
font-size:9.5px;
font-weight:900;
text-transform:uppercase;
letter-spacing:0.02em;
position:relative;
    }
  .t7-tabs a .i{font-size:17px;line-height:1}
  .t7-tabs a.mid{color:var(--accent); justify-content:flex-end; padding-bottom:7px}
  .t7-tabs a.mid .i{
position:absolute;
top:-20px;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:25px;
color:var(--ink);
background:linear-gradient(180deg,var(--hi),var(--accent));
border-width:3px;
border-style:solid;
border-color:var(--ink);
box-shadow:0 4px 12px rgba(10,23,51,0.4);
    }
}
@media(max-width:560px){
  .w{padding:0 16px}
  .t7-hero h1,.t7-hero.big h1{font-size:27px}
  .t7-logo .wm b{font-size:18px}
  .t7-tiles,.t7-live,.t7-plans,.t7-steps{grid-template-columns:1fr}
  .t7-why .gr,.t7-vip{grid-template-columns:1fr}
  .t7-rail,.t7-trust,.t7-provs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t7-gt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t7-band>img{aspect-ratio:4/3}
  .t7-band .w{padding-bottom:16px}
  .t7-winners .wr{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .t7-winners .id{grid-column:1;font-size:11px}
  .t7-winners .gm{grid-column:1}
  .t7-winners b{grid-column:2;grid-row:1}
  .t7-winners small{grid-column:2;grid-row:2}
  .t7-winners{height:300px}
  .t7-app{padding:18px}
  .t7-close .w{padding:18px 18px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .t7-winners .tr{animation:none}
  .t7-odds .lv i{animation:none}
}

/* six-vertical chip grid, on the casino page only */
.t7-verts{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap:12px; column-gap:12px}
.t7-verts .vc{
display:grid;
row-gap:4px;
column-gap:4px;
align-content:start;
padding-top:17px;
padding-right:16px;
padding-bottom:19px;
padding-left:16px;
border-radius:11px;
background:var(--sheet);
border-left-width:5px;
border-left-style:solid;
border-left-color:var(--accent);
min-width:0;
  }
.t7-verts .vc b{font-family:var(--disp);font-size:16px;color:var(--ink)}
.t7-verts .vc em{
font-style:normal;
font-family:var(--disp);
font-size:25px;
font-weight:900;
color:var(--band);
line-height:1.1;
  }
.t7-verts .vc span{font-size:12px; color:var(--sub); line-height:1.5}
@media(max-width:760px){.t7-verts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.t7-verts{grid-template-columns:1fr}}

/* Near-black third-party artwork sits invisibly on the navy panels, so it is lifted to a white
   mark. Only the measured DARK_INK set carries .lift: a SOLID badge silhouettes into a block. */
.t7-provs .pg img.lift,
.t7-rail .rc img.lift,
.t7-trust .tb img.lift,
.t7-foot .pay img.lift,
.t7-foot .trust img.lift{filter:brightness(0) invert(1); opacity:0.9}