/* 3star88malaysia.com — .sv-* shell.
   Light long-scroll landing: a document, not a casino floor. Ink #10243F on #F7F9FC, warm gold
   #D8A13A for anything that is money or a call to action, deep teal #0E6E6B for section marks and
   ticks. Crisp 8px radii, one soft card shadow, real whitespace.
   Scale: 4 / 8 / 14 / 22 / 34 / 54 / 86. Nothing touches — every block carries its own bottom gap.

   Spelling rules for this sheet:
     - The gaps and insets, the line heights, the font weights and the font stacks used more
       than once are named once in :root as --s-* and called by name everywhere else;
     - box properties keep their physical names, one edge per declaration;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - the font shorthand is opened out into its longhands;
     - repeat() tracks are written out. */

:root {
  --pg: #f7f9fc;
  --cd: #ffffff;
  --hl: #dce3ec;
  --ik: #10243f;
  --mk: #5c6f86;
  --ac: #d8a13a;
  --ac2: #b9841f;
  --tl: #0e6e6b;
  --tl2: #e6f2f1;
  --sh: 0 2px 10px rgba(16, 36, 63, .07);
  --sh2: 0 10px 34px rgba(16, 36, 63, .13);
  --r: 8px;
  --w: 1140px;
  --bar: 58px;

  /* named values used more than once */
  --s-sp1: 1px;
  --s-sp2: 2px;
  --s-sp3: 3px;
  --s-sp4: 4px;
  --s-sp5: 5px;
  --s-sp6: 6px;
  --s-sp7: 7px;
  --s-sp8: 8px;
  --s-sp9: 9px;
  --s-sp10: 10px;
  --s-sp11: 11px;
  --s-sp12: 12px;
  --s-sp13: 13px;
  --s-sp14: 14px;
  --s-sp15: 15px;
  --s-sp16: 16px;
  --s-sp17: 18px;
  --s-sp18: 20px;
  --s-sp19: 22px;
  --s-sp20: 24px;
  --s-sp21: 26px;
  --s-sp22: 30px;
  --s-sp23: 34px;
  --s-sp24: 38px;
  --s-sp25: 46px;
  --s-lh1: 1;
  --s-lh2: 1.05;
  --s-lh3: 1.08;
  --s-wt1: 600;
  --s-wt2: 700;
  --s-wt3: 800;
}

* {box-sizing: border-box;}

html {overflow-x: clip;}

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--pg);
  color: var(--ik);
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-stretch: normal;
  font-size: 1.03125rem;
  line-height: 1.68;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 5.375rem;
}

img {max-width: 100%; height: auto; vertical-align: middle;}

a {color: var(--tl); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}

a:hover {text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}

h1, h2, h3, h4 {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; line-height: 1.22; font-weight: var(--s-wt2); letter-spacing: -.012em;}

h1 {font-size: clamp(1.8125rem, 4.4vw, 2.875rem);}

h2 {font-size: clamp(1.4375rem, 2.9vw, 1.9375rem);}

h3 {font-size: 1.1875rem;}

p {margin-top: 0; margin-right: 0; margin-bottom: var(--s-sp14); margin-left: 0;}

.w {width: 100%; max-width: var(--w); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--s-sp19); padding-bottom: 0; padding-left: var(--s-sp19);}

/* ---------------------------------------------------------------- buttons */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s-sp8);
  column-gap: var(--s-sp8);
  min-height: 2.875rem;
  padding-top: 0;
  padding-right: var(--s-sp19);
  padding-bottom: 0;
  padding-left: var(--s-sp19);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--r);
  font-weight: var(--s-wt2);
  font-size: 0.9375rem;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}

.sv-btn:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; transform: translateY(-0.0625rem);}

.sv-btn.a {background: var(--ac); color: #231703; box-shadow: 0 0.1875rem 0 var(--ac2);}

.sv-btn.a:hover {box-shadow: 0 0.3125rem 0 var(--ac2);}

.sv-btn.o {background: #fff; color: var(--ik); border-color: var(--hl); box-shadow: var(--sh);}

.sv-btn.t {background: var(--tl); color: #eafaf9;}

.sv-btn.lg {min-height: 3.375rem; padding-top: 0; padding-right: var(--s-sp22); padding-bottom: 0; padding-left: var(--s-sp22); font-size: 1.03125rem;}

/* ---------------------------------------------------------------- header */
.sv-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 249, 252, .94);
  backdrop-filter: saturate(150%) blur(0.5625rem);
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--hl);
}

.sv-head .w {display: flex; align-items: center; row-gap: var(--s-sp17); column-gap: var(--s-sp17); min-height: 4.125rem;}

.sv-logo {display: flex; align-items: center; row-gap: var(--s-sp10); column-gap: var(--s-sp10); min-width: 0; color: var(--ik);}

.sv-logo:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}

.sv-logo svg {width: 2.25rem; height: 2.25rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

.sv-logo .wm {display: flex; flex-direction: column; line-height: 1.04; min-width: 0;}

.sv-logo .wm b {font-size: 1.3125rem; letter-spacing: .035em;}

.sv-logo .wm small {font-size: 0.59375rem; letter-spacing: .22em; color: var(--mk); font-weight: var(--s-wt1);}

.sv-pills {display: flex; row-gap: var(--s-sp4); column-gap: var(--s-sp4); margin-left: auto; flex-wrap: wrap;}

.sv-pills a {
  padding-top: var(--s-sp7);
  padding-right: var(--s-sp12);
  padding-bottom: var(--s-sp7);
  padding-left: var(--s-sp12);
  border-radius: 6.1875rem;
  font-size: 0.875rem;
  font-weight: var(--s-wt1);
  color: var(--mk);
}

.sv-pills a:hover {background: var(--tl2); color: var(--tl); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}

.sv-lang {display: flex; row-gap: var(--s-sp2); column-gap: var(--s-sp2); border-width: 0.0625rem; border-style: solid; border-color: var(--hl); border-radius: 6.1875rem; padding-top: var(--s-sp3); padding-right: var(--s-sp3); padding-bottom: var(--s-sp3); padding-left: var(--s-sp3); background: #fff;}

.sv-lang a {white-space: nowrap; padding-top: var(--s-sp4); padding-right: var(--s-sp11); padding-bottom: var(--s-sp4); padding-left: var(--s-sp11); border-radius: 6.1875rem; font-size: 0.78125rem; font-weight: var(--s-wt2); color: var(--mk);}

.sv-lang a.on {background: var(--ik); color: #fff;}

.sv-lang a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}

.sv-burger {
  display: none;
  background: #fff;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.1875rem;
  color: var(--ik);
  cursor: pointer;
}

.sv-drawer {display: none; flex-wrap: wrap; row-gap: var(--s-sp7); column-gap: var(--s-sp7); padding-top: 0; padding-right: var(--s-sp19); padding-bottom: var(--s-sp16); padding-left: var(--s-sp19);}

.sv-drawer a {
  padding-top: var(--s-sp9);
  padding-right: var(--s-sp14);
  padding-bottom: var(--s-sp9);
  padding-left: var(--s-sp14);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6.1875rem;
  background: #fff;
  font-size: 0.875rem;
  font-weight: var(--s-wt1);
  color: var(--ik);
}

.sv-drawer.on {display: flex;}

/* ---------------------------------------------------------------- hero */
.sv-hero {padding-top: var(--s-sp25); padding-right: 0; padding-bottom: var(--s-sp23); padding-left: 0;}

.sv-hero.big {padding-top: 3.375rem; padding-right: 0; padding-bottom: var(--s-sp24); padding-left: 0;}

.sv-hero .w {display: grid; grid-template-columns: 1.08fr .92fr; row-gap: var(--s-sp25); column-gap: var(--s-sp25); align-items: center;}

.sv-hero .bd {min-width: 0;}

.sv-hero .eb {
  display: inline-block;
  margin-bottom: var(--s-sp15);
  padding-top: var(--s-sp6);
  padding-right: var(--s-sp13);
  padding-bottom: var(--s-sp6);
  padding-left: var(--s-sp13);
  border-radius: 6.1875rem;
  background: var(--tl2);
  color: var(--tl);
  font-size: 0.78125rem;
  font-weight: var(--s-wt2);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sv-hero h1 {margin-bottom: var(--s-sp15);}

.sv-hero .lead {font-size: 1.09375rem; color: var(--mk); margin-bottom: var(--s-sp19); max-width: 54ch;}

.sv-hero .act {display: flex; row-gap: var(--s-sp12); column-gap: var(--s-sp12); flex-wrap: wrap; margin-bottom: var(--s-sp19);}

.sv-hero .chips {display: flex; flex-wrap: wrap; row-gap: var(--s-sp9); column-gap: var(--s-sp9);}

.sv-hero .chips span {
  display: inline-flex;
  align-items: center;
  row-gap: var(--s-sp7);
  column-gap: var(--s-sp7);
  min-width: 0;
  padding-top: var(--s-sp7);
  padding-right: var(--s-sp13);
  padding-bottom: var(--s-sp7);
  padding-left: var(--s-sp13);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6.1875rem;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: var(--s-wt1);
  color: var(--mk);
}

.sv-hero .chips i {font-style: normal; color: var(--tl); font-weight: var(--s-wt2);}

.sv-hero > .w > img {
  min-width: 0;
  width: 100%;
  border-radius: 1rem;
  box-shadow: var(--sh2);
  border-width: 0.375rem;
  border-style: solid;
  border-color: #fff;
}

/* ---------------------------------------------------------------- generic section */
.sv-sec {padding-top: 0; padding-right: 0; padding-bottom: var(--s-sp25); padding-left: 0;}

.sv-sec.pad {padding-top: var(--s-sp25);}

.sv-sec .sh {margin-bottom: var(--s-sp19); max-width: 70ch;}

.sv-sec .sh h2 {margin-bottom: var(--s-sp9);}

.sv-sec .sh p {color: var(--mk); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;}

.sv-sec .note {display: block; margin-top: var(--s-sp14); color: var(--mk); font-size: 0.84375rem;}

/* ---------------------------------------------------------------- offer strip */
.sv-offers {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--sh);
  padding-top: var(--s-sp21);
  padding-right: var(--s-sp21);
  padding-bottom: var(--s-sp21);
  padding-left: var(--s-sp21);
}

.sv-offers .hd {display: flex; align-items: center; row-gap: var(--s-sp17); column-gap: var(--s-sp17); flex-wrap: wrap; margin-bottom: var(--s-sp19);}

.sv-offers .hd h2 {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 16.25rem; min-width: 0;}

.sv-offers .gr {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--s-sp14); column-gap: var(--s-sp14);}

.sv-offers .of {padding-top: var(--s-sp17); padding-right: var(--s-sp17); padding-bottom: var(--s-sp17); padding-left: var(--s-sp17); border-radius: var(--r); background: var(--pg); border-width: 0.0625rem; border-style: solid; border-color: var(--hl);}

.sv-offers .of b {display: block; font-size: 1.75rem; color: var(--ac2); line-height: var(--s-lh2);}

.sv-offers .of em {display: block; margin-top: var(--s-sp7); margin-right: 0; margin-bottom: var(--s-sp6); margin-left: 0; font-style: normal; font-weight: var(--s-wt1); font-size: 0.90625rem;}

.sv-offers .of small {color: var(--mk); font-size: 0.8125rem;}

/* ---------------------------------------------------------------- stat strip */
.sv-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: var(--s-sp1);
  column-gap: var(--s-sp1);
  background: var(--hl);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  overflow-x: hidden;
  overflow-y: hidden;
}

.sv-stats > div {min-width:0;background: #fff; padding-top: var(--s-sp19); padding-right: var(--s-sp17); padding-bottom: var(--s-sp19); padding-left: var(--s-sp17); text-align: center;}

.sv-stats b {display: block; font-size: 1.9375rem; color: var(--ik); line-height: var(--s-lh3);}

.sv-stats span {display: block; margin-top: var(--s-sp6); color: var(--mk); font-size: 0.84375rem;}

.sv-kpis {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--s-sp14); column-gap: var(--s-sp14);}

.sv-kpis > div {min-width:0;
  padding-top: var(--s-sp18);
  padding-right: var(--s-sp17);
  padding-bottom: var(--s-sp18);
  padding-left: var(--s-sp17);
  border-radius: var(--r);
  background: #fff;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-top-width: 0.1875rem;
  border-top-style: solid;
  border-top-color: var(--tl);
}

.sv-kpis b {display: block; font-size: 1.6875rem; line-height: var(--s-lh3);}

.sv-kpis span {display: block; margin-top: var(--s-sp5); color: var(--mk); font-size: 0.84375rem;}

/* ---------------------------------------------------------------- numbered index */
.sv-index {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-left-width: 0.25rem;
  border-left-style: solid;
  border-left-color: var(--ac);
  border-radius: var(--r);
  background: #fff;
  padding-top: var(--s-sp19);
  padding-right: var(--s-sp20);
  padding-bottom: var(--s-sp19);
  padding-left: var(--s-sp20);
  box-shadow: var(--sh);
}

.sv-index > b {
  display: block;
  margin-bottom: var(--s-sp14);
  font-size: 0.78125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mk);
}

.sv-index > div {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--s-sp9); column-gap: var(--s-sp21);}

.sv-index a {
  display: flex;
  align-items: baseline;
  row-gap: var(--s-sp11);
  column-gap: var(--s-sp11);
  min-width: 0;
  color: var(--ik);
  font-weight: var(--s-wt1);
  font-size: 0.9375rem;
  padding-top: var(--s-sp3);
  padding-right: 0;
  padding-bottom: var(--s-sp3);
  padding-left: 0;
}

.sv-index a em {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ac2);
  font-weight: var(--s-wt3);
}

/* ---------------------------------------------------------------- tables */
.sv-tw {overflow-x: auto; border-width: 0.0625rem; border-style: solid; border-color: var(--hl); border-radius: 0.875rem; background: #fff; box-shadow: var(--sh);}

.sv-tbl {width: 100%; border-collapse: collapse; min-width: 35rem; font-size: 0.9375rem;}

.sv-tbl th {
  background: var(--ik);
  color: #fff;
  text-align: left;
  padding-top: var(--s-sp14);
  padding-right: var(--s-sp16);
  padding-bottom: var(--s-sp14);
  padding-left: var(--s-sp16);
  font-size: 0.8125rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: var(--s-wt2);
}

.sv-tbl td {padding-top: var(--s-sp13); padding-right: var(--s-sp16); padding-bottom: var(--s-sp13); padding-left: var(--s-sp16); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--hl); vertical-align: top;}

.sv-tbl tbody tr:nth-child(2n) td {background: #fbfcfe;}

.sv-tbl td:first-child {font-weight: var(--s-wt1);}

/* RTP bar column */
.sv-bar {display: block; height: 0.4375rem; border-radius: 6.1875rem; background: var(--hl); overflow-x: hidden; overflow-y: hidden; margin-top: var(--s-sp7);}

.sv-bar i {display: block; height: 100%; background: var(--tl);}

/* ---------------------------------------------------------------- conversion band */
.sv-cband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--s-sp19);
  column-gap: var(--s-sp19);
  flex-wrap: wrap;
  padding-top: var(--s-sp21);
  padding-right: var(--s-sp22);
  padding-bottom: var(--s-sp21);
  padding-left: var(--s-sp22);
  border-radius: 0.875rem;
  background: linear-gradient(103deg, #f6e4bd, #fbf2de);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #e9d2a4;
}

.sv-cband .tx {flex-grow: 1; flex-shrink: 1; flex-basis: 20rem; min-width: 0;}

.sv-cband b {display: block; font-size: 1.3125rem; line-height: 1.3;}

.sv-cband small {display: block; margin-top: var(--s-sp6); color: #6b5420; font-size: 0.875rem;}

/* ---------------------------------------------------------------- category cards */
.sv-cats {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--s-sp17); column-gap: var(--s-sp17);}

.sv-cats .cc {
  display: block;
  min-width: 0;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: var(--sh);
  color: var(--ik);
}

.sv-cats .cc:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; box-shadow: var(--sh2);}

.sv-cats .cc img {width: 100%; min-width: 0; display: block; aspect-ratio: 4 / 3; object-fit: cover;}

.sv-cats .cc .bd {padding-top: var(--s-sp17); padding-right: var(--s-sp18); padding-bottom: var(--s-sp19); padding-left: var(--s-sp18);}

.sv-cats .cc b {display: block; margin-bottom: var(--s-sp7); font-size: 1.125rem;}

.sv-cats .cc p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: 0.90625rem;}

/* ---------------------------------------------------------------- studio chips */
.sv-studios {display: flex; flex-wrap: wrap; row-gap: var(--s-sp10); column-gap: var(--s-sp10);}

/* ONE uniform chip for every provider and payment mark, the mark in its own colour, nothing
   silhouetted. A faint neutral fill rather than pure white so a light mark still has an edge. */
.sv-studios .st {
  display: inline-flex;
  align-items: center;
  row-gap: var(--s-sp9);
  column-gap: var(--s-sp9);
  min-width: 0;
  padding-top: var(--s-sp9);
  padding-right: var(--s-sp15);
  padding-bottom: var(--s-sp9);
  padding-left: var(--s-sp15);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6.1875rem;
  background: #f1f4f9;
  font-size: 0.875rem;
  font-weight: var(--s-wt1);
}

.sv-studios .st img {min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; max-height: 1.25rem; width: auto;}

.sv-studios .st em {font-style: normal;}

/* ---------------------------------------------------------------- timeline */
.sv-rail {position: relative; padding-left: var(--s-sp22);}

.sv-rail:before {
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: 0.4375rem;
  bottom: 0.4375rem;
  width: 0.125rem;
  background: var(--hl);
}

.sv-rail .rw {position: relative; padding-bottom: var(--s-sp20);}

.sv-rail .rw:last-child {padding-bottom: 0;}

.sv-rail .dot {
  position: absolute;
  left: -1.875rem;
  top: 0.3125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  border-width: 0.1875rem;
  border-style: solid;
  border-color: var(--tl);
}

.sv-rail .bd b {display: block; font-size: 1.0625rem;}

.sv-rail .bd em {
  display: inline-block;
  margin-top: var(--s-sp5);
  margin-right: 0;
  margin-bottom: var(--s-sp7);
  margin-left: 0;
  padding-top: var(--s-sp3);
  padding-right: var(--s-sp10);
  padding-bottom: var(--s-sp3);
  padding-left: var(--s-sp10);
  border-radius: 6.1875rem;
  background: var(--tl2);
  color: var(--tl);
  font-style: normal;
  font-size: 0.78125rem;
  font-weight: var(--s-wt2);
}

.sv-rail .bd p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: 0.90625rem;}

/* ---------------------------------------------------------------- KYC / tier cards */
.sv-tiers {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--s-sp17); column-gap: var(--s-sp17);}

.sv-tiers .tc {
  position: relative;
  padding-top: var(--s-sp20);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp20);
  padding-left: var(--s-sp19);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--sh);
}

.sv-tiers .tc.pop {border-color: var(--ac); box-shadow: var(--sh2);}

.sv-tiers .rib {
  position: absolute;
  top: -0.8125rem;
  left: 1.375rem;
  padding-top: var(--s-sp5);
  padding-right: var(--s-sp13);
  padding-bottom: var(--s-sp5);
  padding-left: var(--s-sp13);
  border-radius: 6.1875rem;
  background: var(--ik);
  color: #fff;
  font-size: 0.71875rem;
  font-weight: var(--s-wt2);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sv-tiers .tc h3 {margin-bottom: var(--s-sp5);}

.sv-tiers .tc .sub {color: var(--mk); font-size: 0.875rem; margin-bottom: var(--s-sp14);}

.sv-tiers .tc .chip {
  display: inline-block;
  margin-bottom: var(--s-sp14);
  padding-top: var(--s-sp5);
  padding-right: var(--s-sp12);
  padding-bottom: var(--s-sp5);
  padding-left: var(--s-sp12);
  border-radius: var(--r);
  background: var(--tl2);
  color: var(--tl);
  font-size: 0.8125rem;
  font-weight: var(--s-wt2);
}

.sv-tiers .tc ul {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none;}

.sv-tiers .tc li {position: relative; padding-top: var(--s-sp5); padding-right: 0; padding-bottom: var(--s-sp5); padding-left: var(--s-sp20); font-size: 0.90625rem; color: var(--mk);}

.sv-tiers .tc li:before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.75rem;
  width: 0.6875rem;
  height: 0.375rem;
  border-left-width: 0.15625rem;
  border-left-style: solid;
  border-left-color: var(--tl);
  border-bottom-width: 0.15625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--tl);
  transform: rotate(-45deg);
}

/* five VIP tiers need a tighter grid than the three KYC cards */
.sv-tiers.five {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

.sv-tiers.five .tc {padding-top: var(--s-sp18); padding-right: var(--s-sp16); padding-bottom: var(--s-sp18); padding-left: var(--s-sp16);}

.sv-tiers.five .tc h3 {font-size: 1.0625rem;}

/* ---------------------------------------------------------------- splits */
.sv-split {display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--s-sp24); column-gap: var(--s-sp24); align-items: center; margin-bottom: var(--s-sp23);}

.sv-split:last-child {margin-bottom: 0;}

.sv-split.alt > img {order: 2;}

.sv-split > img {min-width: 0; width: 100%; border-radius: 0.875rem; box-shadow: var(--sh);}

.sv-split .bd {min-width: 0;}

.sv-split .bd h3 {margin-bottom: var(--s-sp11); font-size: 1.375rem;}

.sv-split .bd p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk);}

/* ---------------------------------------------------------------- members */
.sv-members {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--s-sp17); column-gap: var(--s-sp17);}

.sv-members .mb {
  padding-top: var(--s-sp19);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp19);
  padding-left: var(--s-sp19);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--sh);
}

.sv-members .hd {display: flex; align-items: center; row-gap: var(--s-sp12); column-gap: var(--s-sp12); margin-bottom: var(--s-sp13);}

.sv-members .av {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: var(--tl2);
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 1.3125rem;
}

.sv-members .hd > div {min-width: 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto;}

.sv-members .hd b {display: block; font-size: 0.9375rem;}

.sv-members .hd small {color: var(--mk); font-size: 0.8125rem;}

.sv-members .rt {flex-grow: 0; flex-shrink: 0; flex-basis: auto; color: var(--ac); font-size: 0.8125rem; letter-spacing: 0.03125rem;}

.sv-members p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: 0.90625rem;}

/* ---------------------------------------------------------------- prose */
.sv-prose {max-width: 51.25rem;}

.sv-prose h2 {margin-top: var(--s-sp23); margin-right: 0; margin-bottom: var(--s-sp13); margin-left: 0; scroll-margin-top: 5.375rem;}

.sv-prose h2:first-child {margin-top: 0;}

.sv-prose h3 {margin-top: var(--s-sp19); margin-right: 0; margin-bottom: var(--s-sp9); margin-left: 0;}

.sv-prose p {color: #2c3f58;}

.sv-prose ul, .sv-prose ol {margin-top: 0; margin-right: 0; margin-bottom: var(--s-sp14); margin-left: 0; padding-left: var(--s-sp19); color: #2c3f58;}

.sv-prose li {margin-bottom: var(--s-sp6);}

/* Nothing touching: the prose column concatenates kpis, steps, blocks, a table and the FAQ with
   no wrapper between them, so each needs to carry its own gap or two of them render flush. */
.sv-prose .sv-tw, .sv-prose .sv-tiers, .sv-prose .sv-rail {margin-top: var(--s-sp19); margin-right: 0; margin-bottom: var(--s-sp19); margin-left: 0;}

.sv-prose .sv-kpis, .sv-prose .sv-steps, .sv-prose .sv-faq {margin-bottom: var(--s-sp19);}

.sv-prose .sv-kpis + .sv-steps {margin-top: var(--s-sp19);}

.sv-steps {counter-reset: s; list-style: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; display: grid; row-gap: var(--s-sp11); column-gap: var(--s-sp11);}

.sv-steps li {
  counter-increment: s;
  position: relative;
  padding-top: var(--s-sp15);
  padding-right: var(--s-sp17);
  padding-bottom: var(--s-sp15);
  padding-left: 3.5rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #fff;
  font-size: 0.9375rem;
}

.sv-steps li:before {
  content: counter(s);
  position: absolute;
  left: 1.0625rem;
  top: 0.875rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--ik);
  color: #fff;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 0.8125rem;
  font-weight: var(--s-wt2);
}

/* ---------------------------------------------------------------- notice bar */
.sv-notice {
  display: flex;
  row-gap: var(--s-sp14);
  column-gap: var(--s-sp14);
  padding-top: var(--s-sp17);
  padding-right: var(--s-sp18);
  padding-bottom: var(--s-sp17);
  padding-left: var(--s-sp18);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #e9d2a4;
  border-radius: var(--r);
  background: #fdf8ee;
  font-size: 0.90625rem;
  color: #5d4a1d;
}

.sv-notice i {flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-style: normal; font-size: 1.125rem;}

/* ---------------------------------------------------------------- faq */
.sv-faq {display: grid; row-gap: var(--s-sp9); column-gap: var(--s-sp9);}

.sv-faq details {border-width: 0.0625rem; border-style: solid; border-color: var(--hl); border-radius: var(--r); background: #fff;}

.sv-faq summary {
  padding-top: var(--s-sp15);
  padding-right: var(--s-sp17);
  padding-bottom: var(--s-sp15);
  padding-left: var(--s-sp17);
  cursor: pointer;
  font-weight: 650;
  font-size: 0.96875rem;
  list-style: none;
}

.sv-faq summary::-webkit-details-marker {display: none;}

.sv-faq summary:after {content: "+"; float: right; color: var(--ac2); font-weight: var(--s-wt3);}

.sv-faq details[open] summary:after {content: "\2212";}

.sv-faq p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: var(--s-sp17); padding-bottom: var(--s-sp16); padding-left: var(--s-sp17); color: var(--mk); font-size: 0.9375rem;}

/* ---------------------------------------------------------------- closing band */
.sv-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--s-sp19);
  column-gap: var(--s-sp19);
  flex-wrap: wrap;
  width: calc(100% - 2.75rem);
  max-width: var(--w);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: var(--s-sp25);
  margin-left: auto;
  padding-top: var(--s-sp22);
  padding-right: var(--s-sp23);
  padding-bottom: var(--s-sp22);
  padding-left: var(--s-sp23);
  border-radius: 1rem;
  background: var(--ik);
  color: #fff;
}

.sv-band b {flex-grow: 1; flex-shrink: 1; flex-basis: 20rem; min-width: 0; font-size: 1.25rem; line-height: 1.38; font-weight: var(--s-wt1);}

/* ---------------------------------------------------------------- footer */
.sv-foot {border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--hl); background: #fff; padding-top: var(--s-sp25); padding-right: 0; padding-bottom: var(--s-sp19); padding-left: 0;}

.sv-foot .top {display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); row-gap: var(--s-sp22); column-gap: var(--s-sp22); margin-bottom: var(--s-sp23);}

.sv-foot .ab {min-width: 0;}

.sv-foot .ab p {margin-top: var(--s-sp13); margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: 0.875rem;}

.sv-foot .top > div h4 {margin-top: 0; margin-right: 0; margin-bottom: var(--s-sp11); margin-left: 0; font-size: 0.8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--mk);}

.sv-foot .top > div a {display: block; padding-top: var(--s-sp4); padding-right: 0; padding-bottom: var(--s-sp4); padding-left: 0; color: var(--ik); font-size: 0.90625rem;}

.sv-foot .pay, .sv-foot .trust {display: flex; flex-wrap: wrap; row-gap: var(--s-sp10); column-gap: var(--s-sp10); margin-bottom: var(--s-sp17);}

.sv-foot .pay span, .sv-foot .trust span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6rem;
  min-height: 2.5rem;
  padding-top: var(--s-sp7);
  padding-right: var(--s-sp12);
  padding-bottom: var(--s-sp7);
  padding-left: var(--s-sp12);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #f1f4f9;
}

.sv-foot .pay img, .sv-foot .trust img {min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; max-height: 1.375rem; width: auto;}

.sv-foot .legal {display: flex; row-gap: var(--s-sp16); column-gap: var(--s-sp16); align-items: flex-start; border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--hl); padding-top: var(--s-sp19);}

.sv-foot .age {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border-width: 0.125rem;
  border-style: solid;
  border-color: var(--ik);
  display: grid;
  align-items: center;
  justify-items: center;
  font-weight: var(--s-wt3);
  font-size: 0.84375rem;
}

.sv-foot .legal p {margin-top: 0; margin-right: 0; margin-bottom: var(--s-sp6); margin-left: 0; font-size: 0.84375rem; color: var(--mk);}

.sv-foot .legal small {color: var(--mk); font-size: 0.78125rem;}

/* ---------------------------------------------------------------- sticky join bar (desktop) */
.sv-sticky {
  position: fixed;
  left: 50%;
  bottom: 1.125rem;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  row-gap: var(--s-sp14);
  column-gap: var(--s-sp14);
  width: calc(100% - 2.75rem);
  max-width: 45rem;
  padding-top: var(--s-sp12);
  padding-right: var(--s-sp14);
  padding-bottom: var(--s-sp12);
  padding-left: var(--s-sp19);
  border-radius: 6.1875rem;
  background: var(--ik);
  color: #fff;
  box-shadow: 0 0.875rem 2.375rem rgba(16, 36, 63, .3);
}

.sv-sticky > span {flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0; font-size: 0.90625rem; font-weight: var(--s-wt1);}

.sv-sticky .sv-btn {min-height: 2.625rem; padding-top: 0; padding-right: var(--s-sp17); padding-bottom: 0; padding-left: var(--s-sp17); font-size: 0.875rem;}

.sv-sticky .x {flex-grow: 0; flex-shrink: 0; flex-basis: auto; background: none; border-width: 0; border-style: none; border-color: currentcolor; color: #7f93ad; font-size: 1.3125rem; cursor: pointer; padding-top: 0; padding-right: var(--s-sp4); padding-bottom: 0; padding-left: var(--s-sp4);}

.sv-sticky.off {display: none;}

/* ---------------------------------------------------------------- mobile tab bar */
.sv-tabs {display: none;}

/* ---------------------------------------------------------------- entry modal */
.sv-pop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 22, 38, .62);
  display: grid;
  align-items: center;
  justify-items: center;
  padding-top: var(--s-sp17);
  padding-right: var(--s-sp17);
  padding-bottom: var(--s-sp17);
  padding-left: var(--s-sp17);
}

.sv-pop[hidden] {display: none;}

.sv-pop .bx {
  position: relative;
  width: 100%;
  max-width: 26.25rem;
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.625rem 4.375rem rgba(10, 22, 38, .4);
}

/* the close control lives INSIDE the card: .bx clips its own rounded corners, so a button
   sitting above the top edge has its upper half cut off */
.sv-pop .x {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  border-radius: 50%;
  background: rgba(16, 36, 63, .62);
  color: #fff;
  font-size: 1.25rem;
  line-height: var(--s-lh1);
  cursor: pointer;
}

.sv-pop .bx > img {width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover;}

.sv-pop .bd {padding-top: var(--s-sp20); padding-right: var(--s-sp20); padding-bottom: var(--s-sp20); padding-left: var(--s-sp20);}

.sv-pop .bd b {display: block; font-size: 1.375rem; margin-bottom: var(--s-sp9);}

.sv-pop .bd > p {color: var(--mk); font-size: 0.90625rem;}

/* one offer per screen: the panels are paged, never stacked */
.sv-pop .pg {display: none;}

.sv-pop .pg.on {display: block;}

.sv-pop .pg .big {display: block; font-size: 2.125rem; color: var(--ac2); font-weight: var(--s-wt3); line-height: var(--s-lh2);}

.sv-pop .pg .lbl {display: block; margin-top: var(--s-sp7); margin-right: 0; margin-bottom: var(--s-sp5); margin-left: 0; font-weight: 650; font-size: 0.96875rem;}

.sv-pop .pg .nt {display: block; color: var(--mk); font-size: 0.84375rem;}

.sv-pop .nav {display: flex; align-items: center; justify-content: space-between; row-gap: var(--s-sp12); column-gap: var(--s-sp12); margin-top: var(--s-sp17); margin-right: 0; margin-bottom: var(--s-sp16); margin-left: 0;}

.sv-pop .nav button {
  width: 2.375rem;
  height: 2.375rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 50%;
  background: #fff;
  font-size: 1rem;
  color: var(--ik);
  cursor: pointer;
}

.sv-pop .nav .ct {font-variant-numeric: tabular-nums; color: var(--mk); font-size: 0.84375rem; font-weight: var(--s-wt2);}

.sv-pop .bd .sv-btn {width: 100%;}

.sv-pop .later {
  display: block;
  width: 100%;
  margin-top: var(--s-sp11);
  padding-top: var(--s-sp9);
  padding-right: var(--s-sp9);
  padding-bottom: var(--s-sp9);
  padding-left: var(--s-sp9);
  background: none;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  color: var(--mk);
  font-size: 0.84375rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .sv-hero .w {grid-template-columns: 1fr; row-gap: var(--s-sp22); column-gap: var(--s-sp22);}
  .sv-hero > .w > img {order: -1;}
  .sv-offers .gr {grid-template-columns: 1fr 1fr;}
  .sv-cats, .sv-tiers, .sv-members {grid-template-columns: 1fr 1fr;}
  .sv-tiers.five {grid-template-columns: 1fr 1fr;}
  .sv-split {grid-template-columns: 1fr; row-gap: var(--s-sp19); column-gap: var(--s-sp19);}
  .sv-split.alt > img {order: 0;}
  .sv-foot .top {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 760px) {
  body {padding-bottom: calc(var(--bar) + 1.375rem);}
  .sv-pills {display: none;}
  .sv-burger {display: block; margin-left: auto;}
  .sv-head .w {row-gap: var(--s-sp10); column-gap: var(--s-sp10);}
  .sv-sec {padding-bottom: var(--s-sp23);}
  .sv-hero {padding-top: var(--s-sp22); padding-right: 0; padding-bottom: var(--s-sp19); padding-left: 0;}
  .sv-hero.big {padding-top: var(--s-sp22); padding-right: 0; padding-bottom: var(--s-sp19); padding-left: 0;}
  .sv-stats, .sv-kpis {grid-template-columns: 1fr 1fr;}
  .sv-index > div {grid-template-columns: 1fr;}
  .sv-cats, .sv-tiers, .sv-members, .sv-tiers.five {grid-template-columns: 1fr;}
  .sv-offers {padding-top: var(--s-sp18); padding-right: var(--s-sp18); padding-bottom: var(--s-sp18); padding-left: var(--s-sp18);}
  .sv-offers .gr {grid-template-columns: 1fr;}
  .sv-band {padding-top: var(--s-sp20); padding-right: var(--s-sp20); padding-bottom: var(--s-sp20); padding-left: var(--s-sp20); margin-bottom: var(--s-sp23);}
  .sv-cband {padding-top: var(--s-sp19); padding-right: var(--s-sp19); padding-bottom: var(--s-sp19); padding-left: var(--s-sp19);}
  .sv-foot .top {grid-template-columns: 1fr; row-gap: var(--s-sp19); column-gap: var(--s-sp19);}

  /* the thumb-zone CTA: a pinned bar, not a button at the top of the screen */
  .sv-sticky {
    left: 0;
    right: 0;
    bottom: var(--bar);
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 0;
    padding-top: var(--s-sp10);
    padding-right: var(--s-sp14);
    padding-bottom: var(--s-sp10);
    padding-left: var(--s-sp14);
    row-gap: var(--s-sp10);
    column-gap: var(--s-sp10);
  }
  .sv-sticky > span {display: none;}
  .sv-sticky .sv-btn {flex-grow: 1; flex-shrink: 1; flex-basis: auto;}

  .sv-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--bar);
    background: var(--ik);
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-top-color: #1d3550;
  }
  .sv-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--s-sp2);
    column-gap: var(--s-sp2);
    color: #9fb2c8;
    font-size: 0.65625rem;
    font-weight: var(--s-wt1);
  }
  .sv-tabs a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
  .sv-tabs .i {font-size: 1.0625rem; line-height: var(--s-lh1);}
  .sv-tabs .mid {color: #231703;}
  .sv-tabs .mid .i {
    width: 2.625rem;
    height: 2.625rem;
    margin-top: -1.125rem;
    border-radius: 50%;
    background: var(--ac);
    border-width: 0.1875rem;
    border-style: solid;
    border-color: var(--ik);
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 1.3125rem;
  }
}

@media (max-width: 400px) {
  body {font-size: 1rem;}
  .w {padding-top: 0; padding-right: var(--s-sp16); padding-bottom: 0; padding-left: var(--s-sp16);}
  .sv-band {width: calc(100% - 2rem);}
  .sv-sticky {padding-top: var(--s-sp9); padding-right: var(--s-sp12); padding-bottom: var(--s-sp9); padding-left: var(--s-sp12);}
}

/* On a short phone the modal card ran past 92vh and pushed the claim button under the fold.
   A CTA you have to scroll to is the thing the one-offer-per-screen rule exists to prevent.
   Shorten the art and tighten the type instead. */
@media (max-height: 700px) {
  .sv-pop .bx > img {aspect-ratio: 21 / 9;}
  .sv-pop .bd {padding-top: var(--s-sp16); padding-right: var(--s-sp17); padding-bottom: var(--s-sp17); padding-left: var(--s-sp17);}
  .sv-pop .bd b {font-size: 1.1875rem; margin-bottom: var(--s-sp6);}
  .sv-pop .bd > p {font-size: 0.84375rem; margin-bottom: var(--s-sp10);}
  .sv-pop .pg .big {font-size: 1.6875rem;}
  .sv-pop .pg .lbl {font-size: 0.90625rem; margin-top: var(--s-sp5); margin-right: 0; margin-bottom: var(--s-sp4); margin-left: 0;}
  .sv-pop .pg .nt {font-size: 0.78125rem;}
  .sv-pop .nav {margin-top: var(--s-sp12); margin-right: 0; margin-bottom: var(--s-sp10); margin-left: 0;}
  .sv-pop .nav button {width: 2.125rem; height: 2.125rem;}
  .sv-pop .later {margin-top: var(--s-sp7); padding-top: var(--s-sp7); padding-right: var(--s-sp7); padding-bottom: var(--s-sp7); padding-left: var(--s-sp7);}
}

@media (max-height: 560px) {
  .sv-pop .bx > img {display: none;}
}

@media (prefers-reduced-motion: reduce) {
  * {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
}