/* TT88 Malaysia conversion landing - .ty-* shell.
   Ivory ground, deep teal ink, brand teal and crimson as the money colour. A stack of bands,
   not a floor.

   House style for this sheet:
     - repeated radii and type sizes live in :root as --vx-rad* and --vx-fs*, and a rule names
       the token rather than the number;
     - box properties are written one edge at a time in logical names (padding-block-start,
       margin-inline-end, border-block-end-*), so a modifier resets the single edge it means to;
     - offsets are inset-block-start / inset-inline-start rather than top / left;
     - gap is row-gap plus column-gap, overflow is overflow-x plus overflow-y, and transition is
       spelled out as property / duration / timing-function / delay.

   Static file: the build never regenerates this. */

:root {
  --bg: #faf7f2;
  --bg2: #f4efe6;
  /* band tint */
  --bg3: #ebe3d6;
  /* deeper tint */
  --ink: #0c3b3a;
  /* headings, deep teal */
  --ink2: #3c5453;
  /* body */
  --mute: #6b7f7e;
  /* muted */
  --line: #ded6c8;
  --teal: #0e8c84;
  --teal2: #0a6b65;
  --money: #c8102e;
  /* the money colour: crimson */
  --money2:#96091f;
  --rad: 16px;
  --w: 1160px;

  /* token layer */
  --vx-rad1: 9px;
  --vx-rad2: 10px;
  --vx-rad3: 11px;
  --vx-rad4: 13px;
  --vx-rad5: 999px;
  --vx-fs1: 12px;
  --vx-fs2: 12.5px;
  --vx-fs3: 13px;
  --vx-fs4: 13.5px;
  --vx-fs5: 14px;
  --vx-fs6: 14.5px;
  --vx-fs7: 15px;
  --vx-fs8: 15.5px;
  --vx-fs9: 16.5px;
  --vx-fs10: 17px;
  --vx-fs11: 17.5px;
  --vx-fs12: 19px;
}

*,*::before,*::after{box-sizing: border-box;}
html{overflow-x: clip; -webkit-text-size-adjust: 100%;}
body{
  margin-block: 0;
  margin-inline: 0;
  background: var(--bg);
  color: var(--ink2);
  font: 400 16.5px/1.72 "Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",
       "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  overflow-x: clip;
}
img{max-width: 100%; height: auto; display: block;}
a{color: var(--teal2); text-decoration: none;}
a:hover{text-decoration: underline;}
h1,h2,h3,h4{line-height: 1.24; margin-block-start: 0; margin-inline-end: 0; margin-block-end: .5em; margin-inline-start: 0; color: var(--ink); font-weight: 800; letter-spacing: -.015em;}
h1{font-size: clamp(27px,4.3vw,44px);}
h2{font-size: clamp(22px,2.9vw,33px);}
h3{font-size: var(--vx-fs12);}
p{margin-block-start: 0; margin-inline-end: 0; margin-block-end: 1.05em; margin-inline-start: 0;}
:focus-visible{outline: 2px solid var(--teal); outline-offset: 2px;}

/* ---------------------------------------------------------------- buttons */
.ty-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: .5em;
  column-gap: .5em;
  min-height: 44px;
  padding-block: 11px;
  padding-inline: 21px;
  border-radius: 12px;
  border-width: 1.5px;
  border-style: solid;
  border-color: transparent;
  font-weight: 700;
  font-size: var(--vx-fs7);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  min-width: 0;
  transition-property: transform, box-shadow;
  transition-duration: .14s, .14s;
  transition-timing-function: ease, ease;
  transition-delay: 0s, 0s;
}
.ty-btn:hover{text-decoration: none; transform: translateY(-1px);}
.ty-btn:active{transform: translateY(0);}
.ty-btn.p{
  background: linear-gradient(180deg,var(--money),var(--money2));
  color: #fff;
  box-shadow: 0 6px 16px rgba(150,9,31,.30);
}
.ty-btn.o{background: #fff; border-color: var(--teal); color: var(--teal2);}
.ty-btn.s{
  background: #fff;
  color: var(--ink);
  min-height: 36px;
  padding-block: 7px;
  padding-inline: 15px;
  font-size: var(--vx-fs4);
  border-radius: var(--vx-rad5);
  flex: 0 0 auto;
}
.ty-btn.lg{min-height: 52px; padding-block: 15px; padding-inline: 28px; font-size: var(--vx-fs9);}

/* ---------------------------------------------------------------- chrome */
.ty-strip{
  background: linear-gradient(90deg,var(--ink),var(--teal2));
  color: #eafaf8;
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: 14px;
  column-gap: 14px;
  flex-wrap: wrap;
  padding-block: 9px;
  padding-inline: 16px;
  font-size: var(--vx-fs4);
  text-align: center;
}
.ty-strip p{margin-block: 0; margin-inline: 0; min-width: 0;}

.ty-head{
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: rgba(255,255,255,.97);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
  backdrop-filter: saturate(1.2) blur(8px);
}
.ty-head .bar{
  max-width: var(--w);
  margin-block: 0;
  margin-inline: auto;
  padding-block: 11px;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  row-gap: 20px;
  column-gap: 20px;
  min-width: 0;
}

.ty-logo{display: flex; align-items: center; row-gap: 10px; column-gap: 10px; color: var(--ink); min-width: 0; flex: 0 0 auto;}
.ty-logo:hover{text-decoration: none;}
.ty-logo svg{width: 38px; height: 38px; flex: 0 0 auto;}
.ty-logo .wm{display: flex; flex-direction: column; min-width: 0;}
.ty-logo .wm b{font-size: var(--vx-fs12); font-weight: 800; line-height: 1.1; color: var(--ink); white-space: nowrap;}
.ty-logo .wm small{font-size: 10px; letter-spacing: .07em; color: var(--mute); white-space: nowrap;}

.ty-menu{display: flex; row-gap: 4px; column-gap: 4px; min-width: 0; flex: 1 1 auto;}
.ty-menu a{
  padding-block: 9px;
  padding-inline: 13px;
  border-radius: var(--vx-rad1);
  font-size: var(--vx-fs6);
  font-weight: 600;
  color: var(--ink2);
  white-space: nowrap;
}
.ty-menu a:hover{text-decoration: none; background: var(--bg3); color: var(--ink);}

.ty-acct{margin-inline-start: auto; display: flex; align-items: center; row-gap: 9px; column-gap: 9px; min-width: 0;}
.ty-lang{
  display: flex;
  row-gap: 2px;
  column-gap: 2px;
  background: var(--bg2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--vx-rad5);
  padding-block: 3px;
  padding-inline: 3px;
}
.ty-lang a{white-space: nowrap; padding-block: 5px; padding-inline: 10px; border-radius: var(--vx-rad5); font-size: var(--vx-fs1); font-weight: 700; color: var(--mute);}
.ty-lang a.on{background: var(--teal); color: #fff;}
.ty-lang a:hover{text-decoration: none; color: var(--ink);}
.ty-burger{
  display: none;
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  color: var(--ink);
  width: 44px;
  height: 44px;
  border-radius: var(--vx-rad2);
  font-size: var(--vx-fs12);
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- hero */
.ty-hero{
  max-width: var(--w);
  margin-block: 0;
  margin-inline: auto;
  padding-block-start: 40px;
  padding-inline-end: 16px;
  padding-block-end: 0;
  padding-inline-start: 16px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  row-gap: 34px;
  column-gap: 34px;
  align-items: center;
}
.ty-hero .tx{min-width: 0;}
.ty-hero .eb{
  display: inline-block;
  margin-block-end: 12px;
  padding-block: 5px;
  padding-inline: 13px;
  border-radius: var(--vx-rad5);
  background: var(--bg3);
  color: var(--teal2);
  font-size: var(--vx-fs2);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ty-hero h1{margin-block-end: .4em;}
.ty-hero .lead{font-size: var(--vx-fs11); color: var(--ink2); margin-block-end: 1.1em;}
.ty-hero .act{display: flex; flex-wrap: wrap; row-gap: 11px; column-gap: 11px;}
.ty-hero>img{border-radius: var(--rad); min-width: 0; box-shadow: 0 20px 44px rgba(24,58,60,.14);}

.ty-stats{
  max-width: var(--w);
  margin-block-start: 34px;
  margin-inline-end: auto;
  margin-block-end: 0;
  margin-inline-start: auto;
  padding-block: 20px;
  padding-inline: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: 14px;
  column-gap: 14px;
  background: var(--bg2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
}
.ty-stats div{min-width: 0; text-align: center;}
.ty-stats b{display: block; font-size: 24px; font-weight: 900; color: var(--ink); letter-spacing: -.02em;}
.ty-stats span{display: block; font-size: var(--vx-fs2); color: var(--mute); line-height: 1.45; margin-block-start: 3px;}

/* ---------------------------------------------------------------- promo cards */
.ty-promos{max-width: var(--w); margin-block-start: 56px; margin-inline-end: auto; margin-block-end: 0; margin-inline-start: auto; padding-block: 0; padding-inline: 16px;}
.ty-promos h2{text-align: center; margin-block-end: 26px;}
.ty-promos .row{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 20px; column-gap: 20px;}
.ty-promos .pc{
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  box-shadow: 0 8px 26px rgba(24,58,60,.07);
}
.ty-promos .pc img{width: 100%; aspect-ratio: 3/2; object-fit: cover; min-width: 0;}
.ty-promos .pc .tx{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 7px;
  column-gap: 7px;
  padding-block: 18px;
  padding-inline: 18px;
  flex: 1 1 auto;
  min-width: 0;
}
.ty-promos .big{
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--money2);
}
.ty-promos .pc h3{margin-block: 0; margin-inline: 0; font-size: var(--vx-fs10);}
.ty-promos .pc p{margin-block-start: 0; margin-inline-end: 0; margin-block-end: 6px; margin-inline-start: 0; font-size: var(--vx-fs5); color: var(--ink2); flex: 1 1 auto;}
.ty-promos .pc .ty-btn{width: 100%;}
.ty-promos .more{font-size: var(--vx-fs3); color: var(--mute);}

/* ---------------------------------------------------------------- how-to */
.ty-howto{
  max-width: var(--w);
  margin-block-start: 56px;
  margin-inline-end: auto;
  margin-block-end: 0;
  margin-inline-start: auto;
  padding-block: 34px;
  padding-inline: 16px;
  background: linear-gradient(180deg,var(--bg2),#fff);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
  text-align: center;
}
.ty-howto .hd{max-width: 62ch; margin-block-start: 0; margin-inline-end: auto; margin-block-end: 24px; margin-inline-start: auto;}
.ty-howto .hd p{margin-block: 0; margin-inline: 0; color: var(--mute); font-size: var(--vx-fs8);}
.ty-howto ol{
  counter-reset: s;
  list-style: none;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-block-end: 24px;
  margin-inline-start: 0;
  padding-block: 0;
  padding-inline: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: 16px;
  column-gap: 16px;
  text-align: left;
}
.ty-howto li{
  counter-increment: s;
  position: relative;
  min-width: 0;
  padding-block-start: 18px;
  padding-inline-end: 16px;
  padding-block-end: 16px;
  padding-inline-start: 16px;
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--vx-rad4);
}
.ty-howto li::before{
  content: counter(s);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-block-end: 11px;
  border-radius: var(--vx-rad1);
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: var(--vx-fs5);
}
.ty-howto b{display: block; font-size: var(--vx-fs8); color: var(--ink); margin-block-end: 5px;}
.ty-howto p{margin-block: 0; margin-inline: 0; font-size: var(--vx-fs4); color: var(--ink2); line-height: 1.6;}

/* ---------------------------------------------------------------- cashier band */
.ty-cash{
  max-width: var(--w);
  margin-block-start: 56px;
  margin-inline-end: auto;
  margin-block-end: 0;
  margin-inline-start: auto;
  padding-block: 30px;
  padding-inline: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 30px;
  column-gap: 30px;
  align-items: center;
  background: var(--bg3);
  border-radius: var(--rad);
}
.ty-cash .tx{min-width: 0;}
.ty-cash p{font-size: var(--vx-fs8);}
.ty-cash .rails{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 10px; column-gap: 10px; min-width: 0;}
.ty-cash .rails span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 54px;
  padding-block: 9px;
  padding-inline: 11px;
  border-radius: var(--vx-rad3);
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ty-cash .rails span img{max-height: 26px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain;}

/* ---------------------------------------------------------------- game strip */
.ty-shelf{max-width: var(--w); margin-block-start: 56px; margin-inline-end: auto; margin-block-end: 0; margin-inline-start: auto; padding-block: 0; padding-inline: 16px;}
.ty-shelf .hd{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  row-gap: 14px;
  column-gap: 14px;
  margin-block-end: 18px;
  min-width: 0;
}
.ty-shelf .hd h2{margin-block: 0; margin-inline: 0;}
.ty-shelf .lnk{font-size: var(--vx-fs6); font-weight: 700; white-space: nowrap;}
.ty-games{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 14px; column-gap: 14px;}
.ty-games .gc{
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: var(--vx-rad4);
  min-width: 0;
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  transition-property: box-shadow;
  transition-duration: .16s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.ty-games .gc:hover{text-decoration: none; box-shadow: 0 10px 24px rgba(24,58,60,.12);}
.ty-games .gc img{width: 100%; aspect-ratio: 1/1; object-fit: cover; min-width: 0;}
.ty-games .mt{display: block; padding-block-start: 9px; padding-inline-end: 10px; padding-block-end: 11px; padding-inline-start: 10px; min-width: 0;}
.ty-games .mt b{
  display: block;
  font-size: var(--vx-fs2);
  color: var(--ink);
  line-height: 1.35;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ty-games .mt em{display: block; font-style: normal; font-size: 11px; color: var(--teal2); margin-block-start: 2px;}

/* ---------------------------------------------------------------- RTP register */
.ty-rtp{max-width: var(--w); margin-block-start: 56px; margin-inline-end: auto; margin-block-end: 0; margin-inline-start: auto; padding-block: 0; padding-inline: 16px;}
.ty-rtp>p{max-width: 72ch; color: var(--mute); font-size: var(--vx-fs7);}
.ty-tw{overflow-x: auto; border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--rad); background: #fff;}
.ty-tbl{width: 100%; border-collapse: collapse; font-size: var(--vx-fs7); min-width: 460px;}
.ty-tbl th,.ty-tbl td{padding-block: 13px; padding-inline: 16px; text-align: left; border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line);}
.ty-tbl th{
  background: var(--bg2);
  color: var(--mute);
  font-size: var(--vx-fs2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.ty-tbl tbody tr:last-child td{border-block-end-width: 0; border-block-end-style: none; border-block-end-color: currentcolor;}
.ty-tbl td.bar{display: flex; align-items: center; row-gap: 11px; column-gap: 11px; min-width: 0;}
.ty-tbl .t{
  flex: 1 1 auto;
  min-width: 60px;
  height: 9px;
  border-radius: var(--vx-rad5);
  background: var(--bg3);
  overflow-x: hidden;
  overflow-y: hidden;
}
.ty-tbl .t span{
  display: block;
  height: 100%;
  border-radius: var(--vx-rad5);
  background: linear-gradient(90deg,var(--teal),var(--money));
}
.ty-tbl .bar em{
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  font-size: var(--vx-fs4);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- reviews */
.ty-revs{max-width: var(--w); margin-block-start: 56px; margin-inline-end: auto; margin-block-end: 0; margin-inline-start: auto; padding-block: 0; padding-inline: 16px;}
.ty-revs h2{text-align: center; margin-block-end: 26px;}
.ty-revs .row{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 20px; column-gap: 20px;}
.ty-revs .rv{
  margin-block: 0;
  margin-inline: 0;
  min-width: 0;
  padding-block: 22px;
  padding-inline: 22px;
  background: var(--bg2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
}
.ty-revs .st{color: var(--money); font-size: var(--vx-fs5); letter-spacing: 2px; margin-block-end: 10px;}
.ty-revs blockquote{margin-block-start: 0; margin-inline-end: 0; margin-block-end: 14px; margin-inline-start: 0;}
.ty-revs blockquote p{margin-block: 0; margin-inline: 0; font-size: var(--vx-fs7); color: var(--ink); line-height: 1.65;}
.ty-revs figcaption{display: flex; flex-direction: column; min-width: 0;}
.ty-revs figcaption b{font-size: var(--vx-fs5); color: var(--ink);}
.ty-revs figcaption span{font-size: var(--vx-fs2); color: var(--mute);}

/* ---------------------------------------------------------------- studio wall */
.ty-wall{
  max-width: var(--w);
  margin-block-start: 56px;
  margin-inline-end: auto;
  margin-block-end: 0;
  margin-inline-start: auto;
  padding-block: 30px;
  padding-inline: 16px;
  background: var(--bg2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--rad);
}
.ty-wall h2{text-align: center; margin-block-end: 22px; font-size: clamp(19px,2.3vw,26px);}
.ty-wall .logos{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 12px; column-gap: 12px;}
.ty-wall .logos span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 58px;
  padding-block: 10px;
  padding-inline: 12px;
  border-radius: var(--vx-rad3);
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ty-wall .logos span img{max-height: 30px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain;}

/* ---------------------------------------------------------------- page hero */
.ty-ph{
  max-width: var(--w);
  margin-block: 0;
  margin-inline: auto;
  padding-block-start: 36px;
  padding-inline-end: 16px;
  padding-block-end: 0;
  padding-inline-start: 16px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  row-gap: 32px;
  column-gap: 32px;
  align-items: center;
}
.ty-ph>img{border-radius: var(--rad); min-width: 0; box-shadow: 0 18px 40px rgba(24,58,60,.13);}
.ty-ph .tx{min-width: 0;}
.ty-ph .eb{
  display: inline-block;
  margin-block-end: 12px;
  padding-block: 5px;
  padding-inline: 13px;
  border-radius: var(--vx-rad5);
  background: var(--bg3);
  color: var(--teal2);
  font-size: var(--vx-fs2);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ty-ph .lead{font-size: var(--vx-fs10); color: var(--ink2);}
.ty-ph .act{display: flex; flex-wrap: wrap; row-gap: 11px; column-gap: 11px;}

/* ---------------------------------------------------------------- content */
.ty-content{max-width: 840px; margin-block-start: 52px; margin-inline-end: auto; margin-block-end: 0; margin-inline-start: auto; padding-block-start: 0; padding-inline-end: 16px; padding-block-end: 60px; padding-inline-start: 16px;}
.ty-content.utl{padding-block-start: 36px;}
.ty-content h2{margin-block-start: 1.8em;}
.ty-content h2:first-child{margin-block-start: 0;}
.ty-content .lead{font-size: var(--vx-fs11); color: var(--ink2);}
.ty-content .act.utl{display: flex; flex-wrap: wrap; row-gap: 11px; column-gap: 11px; margin-block-end: 28px;}
.ty-content ul,.ty-content ol{padding-inline-start: 1.25em;}
.ty-content li{margin-block-end: .45em;}
.ty-content .ty-tw{margin-block-end: 28px;}

.ty-kpis{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 13px; column-gap: 13px; margin-block-start: 0; margin-inline-end: 0; margin-block-end: 28px; margin-inline-start: 0;}
.ty-kpis div{
  min-width: 0;
  padding-block: 17px;
  padding-inline: 14px;
  text-align: center;
  background: var(--bg2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--vx-rad4);
}
.ty-kpis b{
  display: block;
  font-size: 23px;
  font-weight: 900;
  color: var(--money2);
  letter-spacing: -.02em;
  margin-block-end: 3px;
}
.ty-kpis span{display: block; font-size: var(--vx-fs1); color: var(--mute); line-height: 1.45;}

.ty-steps{counter-reset: s; list-style: none; margin-block-start: 0; margin-inline-end: 0; margin-block-end: 28px; margin-inline-start: 0; padding-block: 0; padding-inline: 0; display: grid; row-gap: 11px; column-gap: 11px;}
.ty-steps li{
  counter-increment: s;
  position: relative;
  min-width: 0;
  padding-block-start: 15px;
  padding-inline-end: 17px;
  padding-block-end: 15px;
  padding-inline-start: 56px;
  background: var(--bg2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--vx-rad4);
  font-size: var(--vx-fs7);
  color: var(--ink2);
}
.ty-steps li::before{
  content: counter(s);
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 14px;
  width: 28px;
  height: 28px;
  border-radius: var(--vx-rad1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: var(--vx-fs3);
}

.ty-faq{display: grid; row-gap: 10px; column-gap: 10px; margin-block-end: 28px;}
.ty-faq details{background: #fff; border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--vx-rad4); padding-block: 14px; padding-inline: 17px;}
.ty-faq summary{cursor: pointer; font-weight: 700; font-size: var(--vx-fs8); color: var(--ink); list-style: none;}
.ty-faq summary::-webkit-details-marker{display: none;}
.ty-faq summary::after{content: "+"; float: right; color: var(--teal); font-weight: 800; margin-inline-start: 10px;}
.ty-faq details[open] summary::after{content: "\2212";}
.ty-faq p{margin-block-start: .75em; margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; font-size: var(--vx-fs7); color: var(--ink2);}

.ty-band{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 17px;
  column-gap: 17px;
  margin-block-start: 32px;
  padding-block: 24px;
  padding-inline: 24px;
  border-radius: var(--rad);
  background: linear-gradient(120deg,var(--ink),var(--teal2));
  color: #eafaf8;
}
.ty-band b{font-size: var(--vx-fs11); font-weight: 700; line-height: 1.5; min-width: 0; flex: 1 1 300px;}

/* ---------------------------------------------------------------- entry modal */
.ty-pop{
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: 16px;
  padding-inline: 16px;
  background: rgba(24,58,60,.6);
  backdrop-filter: blur(4px);
}
.ty-pop.on{display: flex;}
.ty-pop .bx{
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(24,58,60,.35);
}
.ty-pop .x{
  position: absolute;
  inset-block-start: 9px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.ty-pop .hd{
  padding-block-start: 18px;
  padding-inline-end: 48px;
  padding-block-end: 0;
  padding-inline-start: 20px;
  font-size: var(--vx-fs2);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal2);
}
.ty-pop .panes{padding-block-start: 14px; padding-inline-end: 20px; padding-block-end: 4px; padding-inline-start: 20px; overflow-y: auto;}
.ty-pop .pane{display: flex; flex-direction: column; align-items: flex-start; row-gap: 9px; column-gap: 9px;}
.ty-pop .pane .eb{font-size: var(--vx-fs4); font-weight: 700; color: var(--mute);}
.ty-pop .pane .big{
  font-size: clamp(38px,11vw,54px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--money2);
}
.ty-pop .pane p{margin-block: 0; margin-inline: 0; font-size: var(--vx-fs5); color: var(--ink2); line-height: 1.6;}
.ty-pop .pane .ty-btn{width: 100%; margin-block-start: 4px;}
.ty-pop .pg{display: flex; align-items: center; row-gap: 10px; column-gap: 10px; padding-block-start: 14px; padding-inline-end: 20px; padding-block-end: 18px; padding-inline-start: 20px;}
.ty-pop .pg button{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  flex: 0 0 auto;
}
.ty-pop .pg button:disabled{opacity: .35; cursor: default;}
.ty-pop .dots{display: flex; row-gap: 6px; column-gap: 6px; flex: 1 1 auto; justify-content: center; min-width: 0;}
.ty-pop .dot{
  width: 9px;
  height: 9px;
  padding-block: 0;
  padding-inline: 0;
  border-radius: 50%;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-color: var(--teal);
  background: transparent;
}
.ty-pop .dot.on{background: var(--teal);}
.ty-pop .ct{font-size: var(--vx-fs1); color: var(--mute); font-variant-numeric: tabular-nums; flex: 0 0 auto;}
/* A hide utility has to beat every rule it switches off. */
.ty-hide,.ty-off{display: none !important;}

/* ---------------------------------------------------------------- footer */
.ty-foot{margin-block-start: 60px; background: var(--bg2); border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line);}
.ty-foot .w{max-width: var(--w); margin-block: 0; margin-inline: auto; padding-block-start: 44px; padding-inline-end: 16px; padding-block-end: 26px; padding-inline-start: 16px;}
.ty-foot .cols{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; row-gap: 30px; column-gap: 30px; margin-block-end: 30px;}
.ty-foot .cols>div{min-width: 0;}
.ty-foot .ab p{font-size: var(--vx-fs5); color: var(--ink2); margin-block-start: 14px; margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0;}
.ty-foot h4{
  font-size: var(--vx-fs3);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mute);
  margin-block-end: 12px;
}
.ty-foot .cols a{display: block; margin-block-end: 8px; font-size: var(--vx-fs6); color: var(--ink2);}
.ty-foot .pay,.ty-foot .trust{display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; margin-block-end: 17px;}
.ty-foot .pay span,.ty-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding-block: 7px;
  padding-inline: 12px;
  border-radius: var(--vx-rad2);
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ty-foot .pay span img{max-height: 22px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain;}
.ty-foot .trust span{height: 34px;}
.ty-foot .trust span img{max-height: 19px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain;}
.ty-foot .rg,.ty-foot .lic,.ty-foot .cr{font-size: var(--vx-fs2); color: var(--mute); margin-block-start: 0; margin-inline-end: 0; margin-block-end: 7px; margin-inline-start: 0;}
.ty-foot .cr{padding-block-start: 13px; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line); margin-block-start: 6px;}

.ty-scta{display: none;}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .ty-games{grid-template-columns: 1fr 1fr 1fr 1fr;}
  .ty-wall .logos{grid-template-columns: 1fr 1fr 1fr 1fr;}
  .ty-howto ol{grid-template-columns: 1fr 1fr;}
  .ty-foot .cols{grid-template-columns: 1fr 1fr;}
}
@media (max-width:880px){
  .ty-hero,.ty-ph,.ty-cash{grid-template-columns: 1fr; row-gap: 24px; column-gap: 24px;}
  .ty-ph>img{order: -1;}
  .ty-promos .row,.ty-revs .row{grid-template-columns: 1fr; row-gap: 16px; column-gap: 16px;}
  .ty-promos .pc img{aspect-ratio: 16/9;}
  .ty-stats{grid-template-columns: 1fr 1fr; row-gap: 18px; column-gap: 18px;}
  .ty-kpis{grid-template-columns: 1fr 1fr;}
}
@media (max-width:760px){
  .ty-burger{display: flex; align-items: center; justify-content: center;}
  .ty-menu{
    display: none;
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 100%;
    flex-direction: column;
    row-gap: 2px;
    column-gap: 2px;
    padding-block-start: 10px;
    padding-inline-end: 14px;
    padding-block-end: 14px;
    padding-inline-start: 14px;
    background: #fff;
    border-block-end-width: 1px;
    border-block-end-style: solid;
    border-block-end-color: var(--line);
    box-shadow: 0 14px 28px rgba(24,58,60,.1);
  }
  .ty-open .ty-menu{display: flex;}
  /* At 375 the logo, three language chips, Register and the burger do not fit on one row.
     Let the bar wrap and stop the header being sticky on phones: the bottom claim strip
     already holds the thumb zone. */
  .ty-head{position: static;}
  .ty-head .bar{position: relative; row-gap: 12px; column-gap: 12px; padding-block: 10px; padding-inline: 14px; flex-wrap: wrap; row-gap: 9px;}
  .ty-acct{order: 3; width: 100%; margin-inline-start: 0; justify-content: space-between;}
  .ty-acct .ty-btn.p{flex: 1 1 auto; max-width: 190px;}
  .ty-logo .wm small{display: none;}
  .ty-strip{font-size: var(--vx-fs2); padding-block: 8px; padding-inline: 14px; row-gap: 10px; column-gap: 10px;}
  .ty-hero,.ty-ph{padding-block-start: 26px;}
  .ty-games{grid-template-columns: 1fr 1fr 1fr; row-gap: 10px; column-gap: 10px;}
  .ty-wall .logos{grid-template-columns: 1fr 1fr 1fr;}
  .ty-cash .rails{grid-template-columns: 1fr 1fr 1fr;}
  .ty-foot .cols{grid-template-columns: 1fr; row-gap: 24px; column-gap: 24px;}
  .ty-foot .w{padding-block-end: 92px;}   /* clear the sticky CTA */
  .ty-band{padding-block: 19px; padding-inline: 19px;}

  /* Sticky claim strip in the thumb zone (feedback_above_fold_cta). */
  .ty-scta{
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    z-index: 95;
    display: block;
    padding-block-start: 10px;
    padding-inline-end: 13px;
    padding-block-end: calc(10px + env(safe-area-inset-bottom));
    padding-inline-start: 13px;
    background: rgba(255,255,255,.97);
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: var(--line);
    box-shadow: 0 -6px 22px rgba(24,58,60,.1);
  }
  .ty-scta .ty-btn{width: 100%; min-height: 52px; font-size: var(--vx-fs9);}
}
@media (max-width:420px){
  .ty-games{grid-template-columns: 1fr 1fr;}
  .ty-howto ol{grid-template-columns: 1fr;}
  .ty-cash .rails{grid-template-columns: 1fr 1fr;}
  .ty-wall .logos{grid-template-columns: 1fr 1fr;}
  .ty-kpis{grid-template-columns: 1fr 1fr; row-gap: 9px; column-gap: 9px;}
  .ty-hero .act .ty-btn,.ty-ph .act .ty-btn{flex: 1 1 100%;}
}