/* mybet88win.com - the long-scroll reading landing. Hand-written, never regenerated.
   Deep forest green page, mint as the lead accent, gold only on money. Serif headings over a
   sans body, generous measure, and a numbered index that stays with the reader. */

:root{
  --bg:#f4f7fc; --bg2:#e8eef8; --card:#ffffff; --card2:#f7faff; --sink:#edf2fa;
  --line:#d6e0f0; --line2:#bccce6;
  --mint:#1d4ed8; --mint2:#1740b0; --mint3:#dce7fa;
  --gold:#f59e0b; --gold2:#b97a06;
  --ink:#0f1c33; --mid:#475569; --mute:#64748b; --dim:#7a8699;
  --rad:16px; --bar:60px; --wrap:1180px; --measure:720px;
  --sans:"Inter",-apple-system,"Segoe UI",Arial,"Noto Sans SC",sans-serif;
  --serif:"Georgia","Songti SC","Times New Roman",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 {
  --sheet: var(--card);
  --sheet-2: var(--card2);
  --well: var(--sink);
  --hair: var(--line);
  --hair-2: var(--line2);
  --accent: var(--mint);
  --accent-d: var(--mint2);
  --accent-wash: var(--mint3);
  --flag: var(--gold);
  --flag-d: var(--gold2);
  --on-sheet: var(--ink);
  --sub: var(--mid);
  --faint: var(--mute);
  --faint-2: var(--dim);
  --round: var(--rad);
  --shell: var(--wrap);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.72 var(--sans);padding-bottom:12px}
a{color:var(--mint);text-decoration:none}
img{display:block;max-width:100%;height:auto;min-width:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.24;letter-spacing:-.005em}
table{border-collapse:collapse;width:100%}
.w{
  max-width:var(--shell);
  margin-top:0;
  margin-right:auto;
  margin-bottom:0;
  margin-left:auto;
  padding-top:0;
  padding-right:20px;
  padding-bottom:0;
  padding-left:20px;
}

/* ---------------------------------------------------------------- buttons */
.u9-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  row-gap:8px;
  column-gap:8px;
  min-height:46px;
  padding-top:0;
  padding-right:22px;
  padding-bottom:0;
  padding-left:22px;
  border-width:1.5px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:999px;
  background:transparent;
  color:var(--on-sheet);
  font-family:var(--sans);
  font-weight:bold;
  font-size:14.5px;
  cursor:pointer;
  transition:background 0.15s,border-color 0.15s,color 0.15s;
}
.u9-btn.a{background:var(--mint);border-color:var(--mint);color:#eaf0fa}
.u9-btn.a:hover{background:var(--accent-d); border-color:var(--accent-d)}
.u9-btn.o:hover{border-color:var(--accent); color:var(--accent)}
.u9-btn.r{background:var(--gold);border-color:var(--gold);color:#fff6e5}
.u9-btn.lg{min-height:54px; font-size:16px; padding-top:0; padding-right:30px; padding-bottom:0; padding-left:30px}

/* ---------------------------------------------------------------- header */
.u9-head{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(10,26,18,0.96);
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:var(--hair);
  backdrop-filter:blur(10px);
}
.u9-head .w{display:flex; align-items:center; row-gap:16px; column-gap:16px; padding-top:12px; padding-bottom:12px}
.u9-logo{display:flex; align-items:center; row-gap:10px; column-gap:10px; min-width:0}
.u9-logo svg{width:32px; height:32px; flex-grow:0; flex-shrink:0; flex-basis:auto}
.u9-logo .wm{display:flex;flex-direction:column;line-height:1.08;min-width:0}
.u9-logo .wm b{font-family:var(--serif); font-size:23px; color:var(--flag); white-space:nowrap}
.u9-logo .wm small{font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.u9-pills{display:flex; row-gap:4px; column-gap:4px; margin-left:auto; min-width:0; overflow-x:auto}
.u9-pills a{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  padding-top:8px;
  padding-right:14px;
  padding-bottom:8px;
  padding-left:14px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color:var(--sub);
}
.u9-pills a:hover{background:var(--sheet); color:var(--accent)}
.u9-lang{
  display:flex;
  row-gap:2px;
  column-gap:2px;
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:999px;
  padding:3px;
}
.u9-lang a{
  padding-top:5px;
  padding-right:10px;
  padding-bottom:5px;
  padding-left:10px;
  border-radius:999px;
  font-size:12px;
  font-weight:bold;
  color:var(--faint);
}
.u9-lang a.on{background:var(--accent-wash); color:var(--accent)}
.u9-burger{
  display:none;
  width:40px;
  height:40px;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:12px;
  background:transparent;
  color:var(--on-sheet);
  font-size:17px;
  cursor:pointer;
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
}
.u9-drawer{
  display:none;
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:var(--hair);
  padding-top:10px;
  padding-right:20px;
  padding-bottom:14px;
  padding-left:20px;
}
.u9-open .u9-drawer{display:flex; flex-wrap:wrap; row-gap:7px; column-gap:7px}
.u9-drawer a{
  padding-top:8px;
  padding-right:14px;
  padding-bottom:8px;
  padding-left:14px;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:var(--sub);
}

/* ---------------------------------------------------------------- hero */
.u9-hero{background:radial-gradient(120% 90% at 78% 0%,#e3ecf9 0%,var(--bg) 62%);border-bottom:1px solid var(--line)}
.u9-hero .w{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  row-gap:40px;
  column-gap:40px;
  align-items:center;
  padding-top:46px;
  padding-bottom:46px;
}
.u9-hero.big .w{padding-top:62px;padding-bottom:62px}
.u9-hero .bd{min-width:0}
.u9-hero .eb{
  display:inline-block;
  padding-top:5px;
  padding-right:14px;
  padding-bottom:5px;
  padding-left:14px;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.u9-hero h1{font-size:40px;margin-bottom:16px}
.u9-hero.big h1{font-size:47px}
.u9-hero .lead{font-size:17px; color:var(--sub); margin-bottom:24px; max-width:var(--measure)}
.u9-hero .act{display:flex; flex-wrap:wrap; row-gap:11px; column-gap:11px; margin-bottom:20px}
.u9-hero .chips{display:flex; flex-wrap:wrap; row-gap:9px; column-gap:9px}
.u9-hero .chips span{
  display:inline-flex;
  align-items:center;
  row-gap:7px;
  column-gap:7px;
  min-width:0;
  padding-top:7px;
  padding-right:14px;
  padding-bottom:7px;
  padding-left:14px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:999px;
  font-size:12.5px;
  color:var(--sub);
}
.u9-hero .chips i{font-style:normal;color:var(--mint)}
.u9-hero>.w>img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--round);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
}

/* ---------------------------------------------------------------- sections */
.u9-sec{padding:40px 0}
.u9-sec.pad{padding:52px 0}
.u9-sec .sh{max-width:var(--measure);margin-bottom:26px}
.u9-sec .sh h2{font-size:28px;margin-bottom:9px}
.u9-sec .sh p{color:var(--mute);font-size:15.5px}
.note{font-size:13px; color:var(--faint-2); margin-top:12px}

/* offer strip */
.u9-offers{
  background:var(--well);
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:var(--hair);
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:var(--hair);
  padding-top:34px;
  padding-right:0;
  padding-bottom:34px;
  padding-left:0;
}
.u9-offers .hd{max-width:var(--measure);margin-bottom:22px}
.u9-offers .hd h2{font-size:25px}
.u9-offers .gr{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; row-gap:14px; column-gap:14px}
.u9-offers .of{
  padding:18px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-left-width:3px;
  border-left-style:solid;
  border-left-color:var(--flag);
  border-radius:var(--round);
  min-width:0;
}
.u9-offers .of b{display:block; font-family:var(--serif); font-size:30px; color:var(--flag); line-height:1.1}
.u9-offers .of em{
  display:block;
  font-style:normal;
  font-size:14px;
  color:var(--on-sheet);
  margin-top:6px;
  margin-right:0;
  margin-bottom:5px;
  margin-left:0;
}
.u9-offers .of small{display:block; font-size:12.5px; color:var(--faint)}

/* entry modal */
.u9-pop[hidden]{display:none}
.u9-pop{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(5,16,11,0.84);
}
.u9-pop .bx{
  position:relative;
  width:min(430px,100%);
  max-height:92vh;
  overflow-y:auto;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:20px;
}
.u9-pop .bx>img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}
.u9-pop .x{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:50%;
  background:rgba(5,16,11,0.8);
  color:var(--on-sheet);
  font-size:17px;
  cursor:pointer;
}
.u9-pop .bd{padding:20px}
.u9-pop .bd b{display:block; font-family:var(--serif); font-size:23px; color:var(--flag); margin-bottom:9px}
.u9-pop .bd p{font-size:14.5px; color:var(--sub); margin-bottom:14px}
.u9-pop ul{list-style:none;margin-bottom:16px}
.u9-pop li{position:relative; padding-left:20px; font-size:13.5px; color:var(--sub); margin-bottom:7px}
.u9-pop li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}
/* `.u9-pop .bd b` is (0,2,1) and this was (0,1,2), so the headline rule won and every
   list number rendered as a 23px gold serif BLOCK, about 70px per row. A rule that has to
   switch another one off must out-specify it. */
.u9-pop .bd ul li b{display:inline; font-family:var(--sans); font-size:14px; font-weight:bold; color:var(--flag); margin-right:6px}
.u9-pop .later{
  display:block;
  width:100%;
  margin-top:10px;
  padding:9px;
  border-width:0;
  border-style:none;
  border-color:currentcolor;
  background:transparent;
  color:var(--faint);
  font-size:13px;
  cursor:pointer;
}

/* A modal whose CTA is below the fold converts nothing. At 375x667 the 4:3 picture alone ate
   257px, so the button sat 137px past the bottom edge and was reachable only by scrolling
   INSIDE the card - which a scroll check passes, because the card does scroll. Budget the
   phone layout so the button is on screen. */
@media(max-width:760px){
  .u9-pop{padding:12px;align-items:flex-start}
  .u9-pop .bx{max-height:none;margin-top:10px}
  .u9-pop .bx>img{aspect-ratio:16/9}
  .u9-pop .bd{padding:14px 16px 16px}
  .u9-pop .bd b{font-size:19px;line-height:1.2;margin-bottom:7px}
  .u9-pop .bd p{font-size:13.5px;line-height:1.5;margin-bottom:10px}
  .u9-pop ul{margin-bottom:12px}
  .u9-pop li{margin-bottom:5px;font-size:13px}
  .u9-pop .u9-btn.lg{min-height:48px;font-size:15px}
  .u9-pop .later{margin-top:4px;padding:7px}
}
@media(max-width:400px){
  /* the two strongest offers stay; the other two are on the promotions page anyway */
  .u9-pop .bd ul li:nth-child(n+3){display:none}
}

/* stat strip */
.u9-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  row-gap:14px;
  column-gap:14px;
  margin-top:30px;
  margin-right:0;
  margin-bottom:30px;
  margin-left:0;
}
.u9-stats>div{
  padding:20px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:var(--round);
  text-align:center;
  min-width:0;
}
.u9-stats b{display:block; font-family:var(--serif); font-size:30px; color:var(--accent)}
.u9-stats span{display:block; font-size:12.5px; color:var(--faint); margin-top:5px}

/* the numbered index - the signature of this shell */
.u9-index{
  margin-top:30px;
  margin-right:0;
  margin-bottom:30px;
  margin-left:0;
  padding:20px;
  background:var(--well);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:var(--round);
}
.u9-index>b{
  display:block;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.u9-index>div{display:grid; grid-template-columns:1fr 1fr 1fr; row-gap:9px; column-gap:20px}
.u9-index a{
  display:flex;
  align-items:baseline;
  row-gap:10px;
  column-gap:10px;
  font-size:14px;
  color:var(--sub);
  min-width:0;
}
.u9-index a:hover{color:var(--mint)}
.u9-index a.on{color:var(--mint)}
.u9-index em{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  font-style:normal;
  font-family:var(--serif);
  font-size:13px;
  color:var(--flag-d);
  width:20px;
}

/* category cards */
.u9-cats{display:grid; grid-template-columns:1fr 1fr 1fr; row-gap:18px; column-gap:18px}
.u9-cats .cc{
  display:block;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:var(--round);
  overflow-x:hidden;
  overflow-y:hidden;
  min-width:0;
}
.u9-cats .cc:hover{border-color:var(--mint2)}
.u9-cats .cc img{width:100%;aspect-ratio:16/9;object-fit:cover}
.u9-cats .bd{padding:17px}
.u9-cats .bd b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:7px}
.u9-cats .bd p{font-size:14px; color:var(--faint); line-height:1.6}

/* studio chips */
.u9-studios{display:flex; flex-wrap:wrap; row-gap:11px; column-gap:11px}
.u9-studios .st{
  display:flex;
  align-items:center;
  row-gap:10px;
  column-gap:10px;
  min-width:0;
  padding-top:11px;
  padding-right:16px;
  padding-bottom:11px;
  padding-left:16px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:999px;
}
.u9-studios .st img{max-height:22px; width:auto; min-width:0; flex-grow:0; flex-shrink:1; flex-basis:auto}
.u9-studios .st em{font-style:normal; font-size:13px; color:var(--sub); white-space:nowrap}

/* alternating splits */
.sp{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  row-gap:36px;
  column-gap:36px;
  align-items:center;
  padding-top:34px;
  padding-right:0;
  padding-bottom:34px;
  padding-left:0;
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:var(--hair);
}
.sp:last-child{border-bottom:0}
.sp img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--round);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
}
.sp.alt img{order:2}
.sp .bd h3{font-size:24px;margin-bottom:12px}
.sp .bd p{color:var(--sub); font-size:15.5px}

/* timing rail */
.u9-rail{max-width:var(--measure)}
.u9-rail .rw{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  row-gap:18px;
  column-gap:18px;
  padding-top:0;
  padding-right:0;
  padding-bottom:26px;
  padding-left:0;
}
.u9-rail .rw:last-child{padding-bottom:0}
.u9-rail .rw::before{content:""; position:absolute; left:10px; top:20px; bottom:0; width:1px; background:var(--hair-2)}
.u9-rail .rw:last-child::before{display:none}
.u9-rail .dot{
  position:relative;
  width:22px;
  height:22px;
  border-width:2px;
  border-style:solid;
  border-color:var(--accent);
  border-radius:50%;
}
.u9-rail .dot::after{content:""; position:absolute; inset:5px; border-radius:50%; background:var(--accent)}
.u9-rail .bd{min-width:0}
.u9-rail .bd b{font-size:15.5px}
.u9-rail .bd em{
  display:inline-block;
  margin-left:9px;
  padding-top:2px;
  padding-right:10px;
  padding-bottom:2px;
  padding-left:10px;
  border-radius:999px;
  background:var(--accent-wash);
  color:var(--accent);
  font-style:normal;
  font-size:11.5px;
  font-weight:bold;
}
.u9-rail .bd p{font-size:14px; color:var(--faint); margin-top:5px}

/* member cards */
.u9-members{display:grid; grid-template-columns:1fr 1fr 1fr; row-gap:16px; column-gap:16px}
.u9-members .mb{
  padding:20px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:var(--round);
  min-width:0;
}
.u9-members .hd{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  row-gap:12px;
  column-gap:12px;
  align-items:center;
  margin-bottom:11px;
}
.u9-members .av{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--accent-wash);
  font-size:20px;
}
.u9-members .hd b{display:block;font-family:var(--sans);font-size:14.5px}
.u9-members .hd small{display:block; font-size:12px; color:var(--faint-2)}
.u9-members .rt{color:var(--flag); font-size:12.5px; letter-spacing:0.14em; margin-bottom:9px}
.u9-members .mb p{font-size:14px; color:var(--faint); line-height:1.65}

/* ---------------------------------------------------------------- prose pages */
.u9-prose{
  max-width:var(--measure);
  margin-top:0;
  margin-right:auto;
  margin-bottom:0;
  margin-left:auto;
  padding-top:30px;
  padding-right:20px;
  padding-bottom:40px;
  padding-left:20px;
}
.u9-prose h1{font-size:36px;margin-bottom:14px}
.u9-prose h2{font-size:24px; margin-top:34px; margin-right:0; margin-bottom:11px; margin-left:0; color:var(--flag)}
.u9-prose p{margin-top:0; margin-right:0; margin-bottom:15px; margin-left:0; color:var(--sub)}
.u9-prose .lead{font-size:17.5px; color:var(--on-sheet)}
.u9-prose a{border-bottom:1px solid rgba(78,240,168,.32)}
.u9-prose ul{margin-top:0; margin-right:0; margin-bottom:15px; margin-left:20px; color:var(--sub)}
.u9-prose .act{
  display:flex;
  flex-wrap:wrap;
  row-gap:11px;
  column-gap:11px;
  margin-top:22px;
  margin-right:0;
  margin-bottom:22px;
  margin-left:0;
}
.u9-prose .u9-index{margin:26px 0}

.u9-kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  row-gap:12px;
  column-gap:12px;
  margin-top:22px;
  margin-right:0;
  margin-bottom:22px;
  margin-left:0;
}
.u9-kpis>div{
  padding:16px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:var(--round);
  min-width:0;
}
.u9-kpis b{display:block; font-family:var(--serif); font-size:24px; color:var(--accent)}
.u9-kpis span{display:block; font-size:12px; color:var(--faint); margin-top:4px}

.u9-steps{
  list-style-type:none;
  list-style-position:outside;
  list-style-image:none;
  counter-reset:fgs;
  margin-top:20px;
  margin-right:0;
  margin-bottom:24px;
  margin-left:0;
}
.u9-steps li{
  position:relative;
  counter-increment:fgs;
  padding-top:0;
  padding-right:0;
  padding-bottom:16px;
  padding-left:48px;
  font-size:15px;
  color:var(--sub);
}
.u9-steps li::before{
  content:counter(fgs);
  position:absolute;
  left:0;
  top:-2px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-width:1.5px;
  border-style:solid;
  border-color:var(--accent);
  border-radius:50%;
  color:var(--accent);
  font-family:var(--serif);
  font-size:15px;
}

.u9-tw{
  overflow-x:auto;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:var(--round);
  margin-top:20px;
  margin-right:0;
  margin-bottom:20px;
  margin-left:0;
}
.u9-tbl{font-size:14px;min-width:460px}
.u9-tbl th{
  padding-top:12px;
  padding-right:15px;
  padding-bottom:12px;
  padding-left:15px;
  text-align:start;
  background:var(--well);
  color:var(--accent);
  font-family:var(--sans);
  font-size:12px;
  font-weight:bold;
  letter-spacing:0.07em;
  text-transform:uppercase;
}
.u9-tbl td{
  padding-top:12px;
  padding-right:15px;
  padding-bottom:12px;
  padding-left:15px;
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:var(--hair);
  color:var(--sub);
}

.u9-faq{margin:26px 0}
.u9-faq details{border-bottom:1px solid var(--line)}
.u9-faq summary{
  padding-top:16px;
  padding-right:30px;
  padding-bottom:16px;
  padding-left:0;
  cursor:pointer;
  font-family:var(--serif);
  font-weight:bold;
  font-size:17px;
  list-style-type:none;
  list-style-position:outside;
  list-style-image:none;
  position:relative;
}
.u9-faq summary::-webkit-details-marker{display:none}
.u9-faq summary::after{content:"+"; position:absolute; right:0; top:15px; color:var(--accent); font-family:var(--sans); font-size:19px}
.u9-faq details[open] summary::after{content:"\2212"}
.u9-faq p{
  padding-top:0;
  padding-right:0;
  padding-bottom:16px;
  padding-left:0;
  margin:0;
  font-size:14.5px;
  color:var(--faint);
}

.u9-band{
  margin-top:30px;
  margin-right:0;
  margin-bottom:10px;
  margin-left:0;
  padding:28px;
  text-align:center;
  background:linear-gradient(140deg,var(--sheet-2),var(--sheet));
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:var(--round);
}
.u9-band b{display:block; font-family:var(--serif); font-size:23px; color:var(--flag); margin-bottom:15px}

/* ---------------------------------------------------------------- footer */
.u9-foot{
  background:var(--well);
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:var(--hair);
  margin-top:30px;
}
.u9-foot .w{padding-top:34px;padding-bottom:22px}
.u9-foot .top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; row-gap:28px; column-gap:28px}
.u9-foot .ab{min-width:0}
.u9-foot .ab p{font-size:13.5px; color:var(--faint); line-height:1.7}
.u9-foot .top>div{min-width:0}
.u9-foot h4{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:11px;
}
.u9-foot a{
  display:block;
  font-size:13.5px;
  color:var(--faint);
  padding-top:3px;
  padding-right:0;
  padding-bottom:3px;
  padding-left:0;
}
.u9-foot a:hover{color:var(--mint)}
.u9-foot .pay,.u9-foot .trust{display:flex; flex-wrap:wrap; row-gap:9px; column-gap:9px; margin-top:20px}
.u9-foot .pay span,.u9-foot .trust span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:34px;
  padding-top:6px;
  padding-right:11px;
  padding-bottom:6px;
  padding-left:11px;
  background:var(--sheet);
  border-width:1px;
  border-style:solid;
  border-color:var(--hair);
  border-radius:8px;
}
.u9-foot .pay img{max-height:21px; width:auto; min-width:0; flex-grow:0; flex-shrink:1; flex-basis:auto}
.u9-foot .trust img{max-height:20px; width:auto; min-width:0; flex-grow:0; flex-shrink:1; flex-basis:auto; opacity:0.85}
.u9-foot .legal{margin-top:22px; padding-top:16px; border-top-width:1px; border-top-style:solid; border-top-color:var(--hair)}
.u9-foot .legal p{font-size:12.5px; color:var(--faint-2); margin-bottom:7px}
.u9-foot .legal small{font-size:12px; color:var(--faint-2)}
.u9-foot .age{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  border-width:1.5px;
  border-style:solid;
  border-color:var(--flag-d);
  border-radius:50%;
  color:var(--flag);
  font-size:10px;
  font-weight:800;
  margin-right:9px;
}

/* sticky join bar + phone tab bar */
.u9-sticky{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:48;
  display:flex;
  align-items:center;
  row-gap:14px;
  column-gap:14px;
  padding-top:12px;
  padding-right:20px;
  padding-bottom:12px;
  padding-left:20px;
  background:rgba(10,26,18,0.97);
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:var(--hair-2);
  backdrop-filter:blur(8px);
}
.u9-sticky.off{display:none}
.u9-sticky span{flex-grow:1; flex-shrink:1; flex-basis:auto; min-width:0; font-size:14px; color:var(--sub)}
.u9-sticky .u9-btn{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  min-height:40px;
  padding-top:0;
  padding-right:18px;
  padding-bottom:0;
  padding-left:18px;
  font-size:13.5px;
}
.u9-sticky .x{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto;
  width:32px;
  height:32px;
  border-width:1px;
  border-style:solid;
  border-color:var(--hair-2);
  border-radius:50%;
  background:transparent;
  color:var(--faint);
  font-size:16px;
  cursor:pointer;
}
.u9-tabs{display:none}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1000px){
  .u9-hero .w{grid-template-columns:minmax(0,1fr);gap:26px}
  .u9-hero>.w>img{order:-1;aspect-ratio:16/9}
  .u9-hero .bd{order:1}
  .u9-hero h1,.u9-hero.big h1{font-size:33px}
  .u9-cats{grid-template-columns:repeat(2,1fr)}
  .u9-members{grid-template-columns:1fr}
  .u9-foot .top{grid-template-columns:1fr 1fr}
  .sp,.sp.alt{grid-template-columns:minmax(0,1fr);gap:20px}
  .sp img,.sp.alt img{order:-1;aspect-ratio:16/9}
  .u9-pills{display:none}
  .u9-burger{display:block;margin-left:auto}
  .u9-index>div{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  body{padding-bottom:calc(var(--bar) + 60px)}
  .u9-stats,.u9-kpis{grid-template-columns:repeat(2,1fr)}
  .u9-offers .gr{grid-template-columns:repeat(2,1fr)}
  .u9-offers .hd h2{font-size:21px}
  .u9-offers .of b{font-size:25px}
  .u9-stats b{font-size:25px}
  .u9-index>div{grid-template-columns:1fr}
  .u9-studios{gap:8px}
  .u9-prose h1{font-size:28px}
  .u9-prose h2{font-size:21px}
  .u9-sec .sh h2{font-size:23px}
  .u9-band{padding:20px}
  .u9-band b{font-size:19px}
  /* At 375 the blurb, two buttons and the dismiss control fight for 335px and the text
     collapses into a 60px column. Drop the blurb and let the actions have the width. */
  .u9-sticky{
    bottom:var(--bar);
    row-gap:10px;
    column-gap:10px;
    padding-top:10px;
    padding-right:14px;
    padding-bottom:10px;
    padding-left:14px;
  }
  .u9-sticky span{display:none}
  .u9-sticky .u9-btn{
    flex-grow:1;
    flex-shrink:1;
    flex-basis:auto;
    justify-content:center;
    padding-top:0;
    padding-right:10px;
    padding-bottom:0;
    padding-left:10px;
  }
  .u9-tabs{
    display:grid;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    background:var(--sheet);
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:var(--hair-2);
    padding-top:10px;
  }
  .u9-tabs a{
    display:flex;
    flex-direction:column;
    align-items:center;
    row-gap:3px;
    column-gap:3px;
    padding-top:5px;
    padding-right:2px;
    padding-bottom:8px;
    padding-left:2px;
    font-size:10px;
    color:var(--faint);
  }
  .u9-tabs a .i{font-size:18px;line-height:1}
  .u9-tabs a.mid{position:relative;padding-top:22px}
  .u9-tabs a.mid .i{position:absolute;top:-26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--mint);border:4px solid var(--card);color:#eaf0fa;font-size:24px}
}
@media(max-width:520px){
  .w{padding:0 15px}
  .u9-cats{grid-template-columns:1fr}
  .u9-offers .gr{grid-template-columns:1fr}
  .u9-offers .of{padding:15px}
  .u9-hero h1,.u9-hero.big h1{font-size:28px}
  .u9-logo .wm b{font-size:20px}
  /* RM4,880,000 at 24px serif has nowhere to break, so two tracks could not hold it
     whatever min-width did. One column has room for the longest figure on the page. */
  .u9-stats,.u9-kpis{grid-template-columns:1fr}
  .u9-band{padding:17px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}