/* starbucks88win.com — .wn-* 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 type sizes, the font stacks and the stacking orders used
       more than once are named once in :root as --t-* and called by name everywhere else;
     - box properties are written in logical names (block-start, inline-end) so a modifier
       resets the one edge it means to;
     - 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: #f6f4ec;
  --cd: #fffdf8;
  --hl: #e3ded0;
  --ik: #14332a;
  --mk: #5f6f64;
  --ac: #b4703a;
  --ac2: #8c5326;
  --tl: #15573a;
  --tl2: #e6efe8;
  --sh: 0 2px 10px rgba(20, 51, 42, .08);
  --sh2: 0 10px 34px rgba(20, 51, 42, .14);
  --r: 8px;
  --w: 1140px;
  --bar: 58px;

  /* named values used more than once */
  --t-sp1: 1px;
  --t-sp2: 2px;
  --t-sp3: 3px;
  --t-sp4: 4px;
  --t-sp5: 5px;
  --t-sp6: 6px;
  --t-sp7: 7px;
  --t-sp8: 8px;
  --t-sp9: 9px;
  --t-sp10: 10px;
  --t-sp11: 11px;
  --t-sp12: 12px;
  --t-sp13: 13px;
  --t-sp14: 14px;
  --t-sp15: 15px;
  --t-sp16: 16px;
  --t-sp17: 18px;
  --t-sp18: 20px;
  --t-sp19: 22px;
  --t-sp20: 24px;
  --t-sp21: 26px;
  --t-sp22: 30px;
  --t-sp23: 34px;
  --t-sp24: 38px;
  --t-sp25: 46px;
  --t-fs1: 12.5px;
  --t-fs2: 13px;
  --t-fs3: 13.5px;
  --t-fs4: 14px;
  --t-fs5: 14.5px;
  --t-fs6: 15px;
  --t-fs7: 15.5px;
  --t-fs8: 16px;
  --t-fs9: 16.5px;
  --t-fs10: 17px;
  --t-fs11: 18px;
  --t-fs12: 19px;
  --t-fs13: 20px;
  --t-fs14: 21px;
  --t-fs15: 22px;
  --t-fs16: 27px;
}

* {box-sizing: border-box;}

html {overflow-x: clip;}

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

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

a {color: var(--tl); text-decoration: none;}

a:hover {text-decoration: underline;}

h1, h2, h3, h4 {margin-block: 0; margin-inline: 0; line-height: 1.22; font-weight: 700; 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: var(--t-fs12);}

p {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp14); margin-inline-start: 0;}

.w {width: 100%; max-width: var(--w); margin-block: 0; margin-inline: auto; padding-block: 0; padding-inline: var(--t-sp19);}

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

.wn-btn:hover {text-decoration: none; transform: translateY(-0.0625rem);}

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

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

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

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

.wn-btn.lg {min-height: 3.375rem; padding-block: 0; padding-inline: var(--t-sp22); font-size: var(--t-fs9);}

/* ---------------------------------------------------------------- header */
.wn-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: rgba(246, 244, 236, .94);
  backdrop-filter: saturate(150%) blur(0.5625rem);
  border-block-end-width: 0.0625rem;
  border-block-end-style: solid;
  border-block-end-color: var(--hl);
}

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

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

.wn-logo:hover {text-decoration: none;}

.wn-logo svg {width: 2.25rem; height: 2.25rem; flex: 0 0 auto;}

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

.wn-logo .wm b {font-size: var(--t-fs14); letter-spacing: .035em;}

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

.wn-pills {display: flex; row-gap: var(--t-sp4); column-gap: var(--t-sp4); margin-inline-start: auto; flex-wrap: wrap;}

.wn-pills a {
  padding-block: var(--t-sp7);
  padding-inline: var(--t-sp12);
  border-radius: 6.1875rem;
  font-size: var(--t-fs4);
  font-weight: 600;
  color: var(--mk);
}

.wn-pills a:hover {background: var(--tl2); color: var(--tl); text-decoration: none;}

.wn-lang {display: flex; row-gap: var(--t-sp2); column-gap: var(--t-sp2); border-width: 0.0625rem; border-style: solid; border-color: var(--hl); border-radius: 6.1875rem; padding-block: var(--t-sp3); padding-inline: var(--t-sp3); background: #fff;}

.wn-lang a {padding-block: var(--t-sp4); padding-inline: var(--t-sp11); border-radius: 6.1875rem; font-size: var(--t-fs1); font-weight: 700; color: var(--mk);}

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

.wn-lang a:hover {text-decoration: none;}

.wn-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: var(--t-fs12);
  color: var(--ik);
  cursor: pointer;
}

.wn-drawer {display: none; flex-wrap: wrap; row-gap: var(--t-sp7); column-gap: var(--t-sp7); padding-block-start: 0; padding-inline-end: var(--t-sp19); padding-block-end: var(--t-sp16); padding-inline-start: var(--t-sp19);}

.wn-drawer a {
  padding-block: var(--t-sp9);
  padding-inline: var(--t-sp14);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6.1875rem;
  background: #fff;
  font-size: var(--t-fs4);
  font-weight: 600;
  color: var(--ik);
}

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

/* ---------------------------------------------------------------- hero */
.wn-hero {padding-block-start: var(--t-sp25); padding-inline-end: 0; padding-block-end: var(--t-sp23); padding-inline-start: 0;}

.wn-hero.big {padding-block-start: 3.375rem; padding-inline-end: 0; padding-block-end: var(--t-sp24); padding-inline-start: 0;}

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

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

.wn-hero .eb {
  display: inline-block;
  margin-block-end: var(--t-sp15);
  padding-block: var(--t-sp6);
  padding-inline: var(--t-sp13);
  border-radius: 6.1875rem;
  background: var(--tl2);
  color: var(--tl);
  font-size: var(--t-fs1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wn-hero h1 {margin-block-end: var(--t-sp15);}

.wn-hero .lead {font-size: 1.09375rem; color: var(--mk); margin-block-end: var(--t-sp19); max-width: 54ch;}

.wn-hero .act {display: flex; row-gap: var(--t-sp12); column-gap: var(--t-sp12); flex-wrap: wrap; margin-block-end: var(--t-sp19);}

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

.wn-hero .chips span {
  display: inline-flex;
  align-items: center;
  row-gap: var(--t-sp7);
  column-gap: var(--t-sp7);
  min-width: 0;
  padding-block: var(--t-sp7);
  padding-inline: var(--t-sp13);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6.1875rem;
  background: #fff;
  font-size: var(--t-fs2);
  font-weight: 600;
  color: var(--mk);
}

.wn-hero .chips i {font-style: normal; color: var(--tl); font-weight: 700;}

.wn-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 */
.wn-sec {padding-block-start: 0; padding-inline-end: 0; padding-block-end: var(--t-sp25); padding-inline-start: 0;}

.wn-sec.pad {padding-block-start: var(--t-sp25);}

.wn-sec .sh {margin-block-end: var(--t-sp19); max-width: 70ch;}

.wn-sec .sh h2 {margin-block-end: var(--t-sp9);}

.wn-sec .sh p {color: var(--mk); margin-block: 0; margin-inline: 0;}

.wn-sec .note {display: block; margin-block-start: var(--t-sp14); color: var(--mk); font-size: var(--t-fs3);}

/* ---------------------------------------------------------------- offer strip */
.wn-offers {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--sh);
  padding-block: var(--t-sp21);
  padding-inline: var(--t-sp21);
}

.wn-offers .hd {display: flex; align-items: center; row-gap: var(--t-sp17); column-gap: var(--t-sp17); flex-wrap: wrap; margin-block-end: var(--t-sp19);}

.wn-offers .hd h2 {margin-block: 0; margin-inline: 0; flex: 1 1 16.25rem; min-width: 0;}

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

.wn-offers .of {padding-block: var(--t-sp17); padding-inline: var(--t-sp17); border-radius: var(--r); background: var(--pg); border-width: 0.0625rem; border-style: solid; border-color: var(--hl);}

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

.wn-offers .of em {display: block; margin-block-start: var(--t-sp7); margin-inline-end: 0; margin-block-end: var(--t-sp6); margin-inline-start: 0; font-style: normal; font-weight: 600; font-size: var(--t-fs5);}

.wn-offers .of small {color: var(--mk); font-size: var(--t-fs2);}

/* ---------------------------------------------------------------- stat strip */
.wn-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: var(--t-sp1);
  column-gap: var(--t-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;
}

.wn-stats > div {background: #fff; padding-block: var(--t-sp19); padding-inline: var(--t-sp17); text-align: center;}

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

.wn-stats span {display: block; margin-block-start: var(--t-sp6); color: var(--mk); font-size: var(--t-fs3);}

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

.wn-kpis > div {
  padding-block: var(--t-sp18);
  padding-inline: var(--t-sp17);
  border-radius: var(--r);
  background: #fff;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-block-start-width: 0.1875rem;
  border-block-start-style: solid;
  border-block-start-color: var(--tl);
}

.wn-kpis b {display: block; font-size: var(--t-fs16); line-height: 1.08;}

.wn-kpis span {display: block; margin-block-start: var(--t-sp5); color: var(--mk); font-size: var(--t-fs3);}

/* ---------------------------------------------------------------- numbered index */
.wn-index {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-inline-start-width: 0.25rem;
  border-inline-start-style: solid;
  border-inline-start-color: var(--ac);
  border-radius: var(--r);
  background: #fff;
  padding-block: var(--t-sp19);
  padding-inline: var(--t-sp20);
  box-shadow: var(--sh);
}

.wn-index > b {
  display: block;
  margin-block-end: var(--t-sp14);
  font-size: var(--t-fs1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mk);
}

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

.wn-index a {
  display: flex;
  align-items: baseline;
  row-gap: var(--t-sp11);
  column-gap: var(--t-sp11);
  min-width: 0;
  color: var(--ik);
  font-weight: 600;
  font-size: var(--t-fs6);
  padding-block: var(--t-sp3);
  padding-inline: 0;
}

.wn-index a em {
  flex: 0 0 auto;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ac2);
  font-weight: 800;
}

/* ---------------------------------------------------------------- tables */
.wn-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);}

.wn-tbl {width: 100%; border-collapse: collapse; min-width: 35rem; font-size: var(--t-fs6);}

.wn-tbl th {
  background: var(--ik);
  color: #fff;
  text-align: left;
  padding-block: var(--t-sp14);
  padding-inline: var(--t-sp16);
  font-size: var(--t-fs2);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
}

.wn-tbl td {padding-block: var(--t-sp13); padding-inline: var(--t-sp16); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--hl); vertical-align: top;}

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

.wn-tbl td:first-child {font-weight: 600;}

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

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

/* ---------------------------------------------------------------- conversion band */
.wn-cband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--t-sp19);
  column-gap: var(--t-sp19);
  flex-wrap: wrap;
  padding-block: var(--t-sp21);
  padding-inline: var(--t-sp22);
  border-radius: 0.875rem;
  background: linear-gradient(103deg, #f6e4bd, #f9eedb);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #e7c9a8;
}

.wn-cband .tx {flex: 1 1 20rem; min-width: 0;}

.wn-cband b {display: block; font-size: var(--t-fs14); line-height: 1.3;}

.wn-cband small {display: block; margin-block-start: var(--t-sp6); color: #6b5420; font-size: var(--t-fs4);}

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

.wn-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);
}

.wn-cats .cc:hover {text-decoration: none; box-shadow: var(--sh2);}

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

.wn-cats .cc .bd {padding-block-start: var(--t-sp17); padding-inline-end: var(--t-sp18); padding-block-end: var(--t-sp19); padding-inline-start: var(--t-sp18);}

.wn-cats .cc b {display: block; margin-block-end: var(--t-sp7); font-size: var(--t-fs11);}

.wn-cats .cc p {margin-block: 0; margin-inline: 0; color: var(--mk); font-size: var(--t-fs5);}

/* ---------------------------------------------------------------- studio chips */
.wn-studios {display: flex; flex-wrap: wrap; row-gap: var(--t-sp10); column-gap: var(--t-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. */
.wn-studios .st {
  display: inline-flex;
  align-items: center;
  row-gap: var(--t-sp9);
  column-gap: var(--t-sp9);
  min-width: 0;
  padding-block: var(--t-sp9);
  padding-inline: var(--t-sp15);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 6.1875rem;
  background: #efece1;
  font-size: var(--t-fs4);
  font-weight: 600;
}

.wn-studios .st img {min-width: 0; flex: 0 1 auto; max-height: 1.25rem; width: auto;}

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

/* ---------------------------------------------------------------- timeline */
.wn-rail {position: relative; padding-inline-start: var(--t-sp22);}

.wn-rail:before {
  content: "";
  position: absolute;
  inset-inline-start: 0.5625rem;
  inset-block-start: 0.4375rem;
  inset-block-end: 0.4375rem;
  width: 0.125rem;
  background: var(--hl);
}

.wn-rail .rw {position: relative; padding-block-end: var(--t-sp20);}

.wn-rail .rw:last-child {padding-block-end: 0;}

.wn-rail .dot {
  position: absolute;
  inset-inline-start: -1.875rem;
  inset-block-start: 0.3125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  border-width: 0.1875rem;
  border-style: solid;
  border-color: var(--tl);
}

.wn-rail .bd b {display: block; font-size: var(--t-fs10);}

.wn-rail .bd em {
  display: inline-block;
  margin-block-start: var(--t-sp5);
  margin-inline-end: 0;
  margin-block-end: var(--t-sp7);
  margin-inline-start: 0;
  padding-block: var(--t-sp3);
  padding-inline: var(--t-sp10);
  border-radius: 6.1875rem;
  background: var(--tl2);
  color: var(--tl);
  font-style: normal;
  font-size: var(--t-fs1);
  font-weight: 700;
}

.wn-rail .bd p {margin-block: 0; margin-inline: 0; color: var(--mk); font-size: var(--t-fs5);}

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

.wn-tiers .tc {
  position: relative;
  padding-block: var(--t-sp20);
  padding-inline: var(--t-sp19);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--sh);
}

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

.wn-tiers .rib {
  position: absolute;
  inset-block-start: -0.8125rem;
  inset-inline-start: 1.375rem;
  padding-block: var(--t-sp5);
  padding-inline: var(--t-sp13);
  border-radius: 6.1875rem;
  background: var(--ik);
  color: #fff;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wn-tiers .tc h3 {margin-block-end: var(--t-sp5);}

.wn-tiers .tc .sub {color: var(--mk); font-size: var(--t-fs4); margin-block-end: var(--t-sp14);}

.wn-tiers .tc .chip {
  display: inline-block;
  margin-block-end: var(--t-sp14);
  padding-block: var(--t-sp5);
  padding-inline: var(--t-sp12);
  border-radius: var(--r);
  background: var(--tl2);
  color: var(--tl);
  font-size: var(--t-fs2);
  font-weight: 700;
}

.wn-tiers .tc ul {margin-block: 0; margin-inline: 0; padding-block: 0; padding-inline: 0; list-style-type: none; list-style-position: outside; list-style-image: none;}

.wn-tiers .tc li {position: relative; padding-block-start: var(--t-sp5); padding-inline-end: 0; padding-block-end: var(--t-sp5); padding-inline-start: var(--t-sp20); font-size: var(--t-fs5); color: var(--mk);}

.wn-tiers .tc li:before {
  content: "";
  position: absolute;
  inset-inline-start: 0.125rem;
  inset-block-start: 0.75rem;
  width: 0.6875rem;
  height: 0.375rem;
  border-inline-start-width: 0.15625rem;
  border-inline-start-style: solid;
  border-inline-start-color: var(--tl);
  border-block-end-width: 0.15625rem;
  border-block-end-style: solid;
  border-block-end-color: var(--tl);
  transform: rotate(-45deg);
}

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

.wn-tiers.five .tc {padding-block: var(--t-sp18); padding-inline: var(--t-sp16);}

.wn-tiers.five .tc h3 {font-size: var(--t-fs10);}

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

.wn-split:last-child {margin-block-end: 0;}

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

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

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

.wn-split .bd h3 {margin-block-end: var(--t-sp11); font-size: var(--t-fs15);}

.wn-split .bd p {margin-block: 0; margin-inline: 0; color: var(--mk);}

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

.wn-members .mb {
  padding-block: var(--t-sp19);
  padding-inline: var(--t-sp19);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--sh);
}

.wn-members .hd {display: flex; align-items: center; row-gap: var(--t-sp12); column-gap: var(--t-sp12); margin-block-end: var(--t-sp13);}

.wn-members .av {
  flex: 0 0 auto;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: var(--tl2);
  display: grid;
  place-items: center;
  font-size: var(--t-fs14);
}

.wn-members .hd > div {min-width: 0; flex: 1 1 auto;}

.wn-members .hd b {display: block; font-size: var(--t-fs6);}

.wn-members .hd small {color: var(--mk); font-size: var(--t-fs2);}

.wn-members .rt {flex: 0 0 auto; color: var(--ac); font-size: var(--t-fs2); letter-spacing: 0.03125rem;}

.wn-members p {margin-block: 0; margin-inline: 0; color: var(--mk); font-size: var(--t-fs5);}

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

.wn-prose h2 {margin-block-start: var(--t-sp23); margin-inline-end: 0; margin-block-end: var(--t-sp13); margin-inline-start: 0; scroll-margin-top: 5.375rem;}

.wn-prose h2:first-child {margin-block-start: 0;}

.wn-prose h3 {margin-block-start: var(--t-sp19); margin-inline-end: 0; margin-block-end: var(--t-sp9); margin-inline-start: 0;}

.wn-prose p {color: #27463a;}

.wn-prose ul, .wn-prose ol {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp14); margin-inline-start: 0; padding-inline-start: var(--t-sp19); color: #27463a;}

.wn-prose li {margin-block-end: var(--t-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. */
.wn-prose .wn-tw, .wn-prose .wn-tiers, .wn-prose .wn-rail {margin-block: var(--t-sp19); margin-inline: 0;}

.wn-prose .wn-kpis, .wn-prose .wn-steps, .wn-prose .wn-faq {margin-block-end: var(--t-sp19);}

.wn-prose .wn-kpis + .wn-steps {margin-block-start: var(--t-sp19);}

.wn-steps {counter-reset: s; list-style-type: none; list-style-position: outside; list-style-image: none; margin-block: 0; margin-inline: 0; padding-block: 0; padding-inline: 0; display: grid; row-gap: var(--t-sp11); column-gap: var(--t-sp11);}

.wn-steps li {
  counter-increment: s;
  position: relative;
  padding-block-start: var(--t-sp15);
  padding-inline-end: var(--t-sp17);
  padding-block-end: var(--t-sp15);
  padding-inline-start: 3.5rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #fff;
  font-size: var(--t-fs6);
}

.wn-steps li:before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 1.0625rem;
  inset-block-start: 0.875rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--ik);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--t-fs2);
  font-weight: 700;
}

/* ---------------------------------------------------------------- notice bar */
.wn-notice {
  display: flex;
  row-gap: var(--t-sp14);
  column-gap: var(--t-sp14);
  padding-block: var(--t-sp17);
  padding-inline: var(--t-sp18);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: #e7c9a8;
  border-radius: var(--r);
  background: #fcf6e9;
  font-size: var(--t-fs5);
  color: #5d4a1d;
}

.wn-notice i {flex: 0 0 auto; font-style: normal; font-size: var(--t-fs11);}

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

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

.wn-faq summary {
  padding-block: var(--t-sp15);
  padding-inline: var(--t-sp17);
  cursor: pointer;
  font-weight: 650;
  font-size: var(--t-fs7);
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}

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

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

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

.wn-faq p {margin-block: 0; margin-inline: 0; padding-block-start: 0; padding-inline-end: var(--t-sp17); padding-block-end: var(--t-sp16); padding-inline-start: var(--t-sp17); color: var(--mk); font-size: var(--t-fs6);}

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

.wn-band b {flex: 1 1 20rem; min-width: 0; font-size: var(--t-fs13); line-height: 1.38; font-weight: 600;}

/* ---------------------------------------------------------------- footer */
.wn-foot {border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--hl); background: #fff; padding-block-start: var(--t-sp25); padding-inline-end: 0; padding-block-end: var(--t-sp19); padding-inline-start: 0;}

.wn-foot .top {display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); row-gap: var(--t-sp22); column-gap: var(--t-sp22); margin-block-end: var(--t-sp23);}

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

.wn-foot .ab p {margin-block-start: var(--t-sp13); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; color: var(--mk); font-size: var(--t-fs4);}

.wn-foot .top > div h4 {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp11); margin-inline-start: 0; font-size: var(--t-fs2); letter-spacing: .09em; text-transform: uppercase; color: var(--mk);}

.wn-foot .top > div a {display: block; padding-block: var(--t-sp4); padding-inline: 0; color: var(--ik); font-size: var(--t-fs5);}

.wn-foot .pay, .wn-foot .trust {display: flex; flex-wrap: wrap; row-gap: var(--t-sp10); column-gap: var(--t-sp10); margin-block-end: var(--t-sp17);}

.wn-foot .pay span, .wn-foot .trust span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6rem;
  min-height: 2.5rem;
  padding-block: var(--t-sp7);
  padding-inline: var(--t-sp12);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #efece1;
}

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

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

.wn-foot .age {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border-width: 0.125rem;
  border-style: solid;
  border-color: var(--ik);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--t-fs3);
}

.wn-foot .legal p {margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp6); margin-inline-start: 0; font-size: var(--t-fs3); color: var(--mk);}

.wn-foot .legal small {color: var(--mk); font-size: var(--t-fs1);}

/* ---------------------------------------------------------------- sticky join bar (desktop) */
.wn-sticky {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: 1.125rem;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  row-gap: var(--t-sp14);
  column-gap: var(--t-sp14);
  width: calc(100% - 2.75rem);
  max-width: 45rem;
  padding-block-start: var(--t-sp12);
  padding-inline-end: var(--t-sp14);
  padding-block-end: var(--t-sp12);
  padding-inline-start: var(--t-sp19);
  border-radius: 6.1875rem;
  background: var(--ik);
  color: #fff;
  box-shadow: 0 0.875rem 2.375rem rgba(20, 51, 42, .3);
}

.wn-sticky > span {flex: 1 1 auto; min-width: 0; font-size: var(--t-fs5); font-weight: 600;}

.wn-sticky .wn-btn {min-height: 2.625rem; padding-block: 0; padding-inline: var(--t-sp17); font-size: var(--t-fs4);}

.wn-sticky .x {flex: 0 0 auto; background: none; border-width: 0; border-style: none; border-color: currentcolor; color: #7f93ad; font-size: var(--t-fs14); cursor: pointer; padding-block: 0; padding-inline: var(--t-sp4);}

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

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

/* ---------------------------------------------------------------- entry modal */
.wn-pop {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 60;
  background: rgba(12, 34, 27, .62);
  display: grid;
  place-items: center;
  padding-block: var(--t-sp17);
  padding-inline: var(--t-sp17);
}

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

.wn-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(12, 34, 27, .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 */
.wn-pop .x {
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-end: 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(20, 51, 42, .62);
  color: #fff;
  font-size: var(--t-fs13);
  line-height: 1;
  cursor: pointer;
}

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

.wn-pop .bd {padding-block: var(--t-sp20); padding-inline: var(--t-sp20);}

.wn-pop .bd b {display: block; font-size: var(--t-fs15); margin-block-end: var(--t-sp9);}

.wn-pop .bd > p {color: var(--mk); font-size: var(--t-fs5);}

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

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

.wn-pop .pg .big {display: block; font-size: 2.125rem; color: var(--ac2); font-weight: 800; line-height: 1.05;}

.wn-pop .pg .lbl {display: block; margin-block-start: var(--t-sp7); margin-inline-end: 0; margin-block-end: var(--t-sp5); margin-inline-start: 0; font-weight: 650; font-size: var(--t-fs7);}

.wn-pop .pg .nt {display: block; color: var(--mk); font-size: var(--t-fs3);}

.wn-pop .nav {display: flex; align-items: center; justify-content: space-between; row-gap: var(--t-sp12); column-gap: var(--t-sp12); margin-block-start: var(--t-sp17); margin-inline-end: 0; margin-block-end: var(--t-sp16); margin-inline-start: 0;}

.wn-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: var(--t-fs8);
  color: var(--ik);
  cursor: pointer;
}

.wn-pop .nav .ct {font-variant-numeric: tabular-nums; color: var(--mk); font-size: var(--t-fs3); font-weight: 700;}

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

.wn-pop .later {
  display: block;
  width: 100%;
  margin-block-start: var(--t-sp11);
  padding-block: var(--t-sp9);
  padding-inline: var(--t-sp9);
  background: none;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  color: var(--mk);
  font-size: var(--t-fs3);
  cursor: pointer;
}

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

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

  /* the thumb-zone CTA: a pinned bar, not a button at the top of the screen */
  .wn-sticky {
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: var(--bar);
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 0;
    padding-block: var(--t-sp10);
    padding-inline: var(--t-sp14);
    row-gap: var(--t-sp10);
    column-gap: var(--t-sp10);
  }
  .wn-sticky > span {display: none;}
  .wn-sticky .wn-btn {flex: 1 1 auto;}

  .wn-tabs {
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--bar);
    background: var(--ik);
    border-block-start-width: 0.0625rem;
    border-block-start-style: solid;
    border-block-start-color: #1d3550;
  }
  .wn-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--t-sp2);
    column-gap: var(--t-sp2);
    color: #9fb2c8;
    font-size: 0.65625rem;
    font-weight: 600;
  }
  .wn-tabs a:hover {text-decoration: none;}
  .wn-tabs .i {font-size: var(--t-fs10); line-height: 1;}
  .wn-tabs .mid {color: #1c1105;}
  .wn-tabs .mid .i {
    width: 2.625rem;
    height: 2.625rem;
    margin-block-start: -1.125rem;
    border-radius: 50%;
    background: var(--ac);
    border-width: 0.1875rem;
    border-style: solid;
    border-color: var(--ik);
    display: grid;
    place-items: center;
    font-size: var(--t-fs14);
  }
}

@media (max-width: 400px) {
  body {font-size: var(--t-fs8);}
  .w {padding-block: 0; padding-inline: var(--t-sp16);}
  .wn-band {width: calc(100% - 2rem);}
  .wn-sticky {padding-block: var(--t-sp9); padding-inline: var(--t-sp12);}
  /* A bare 1fr track is min-content wide at its narrowest, and a KPI figure like RM30,000 at 27px
     is one unbreakable token, so two cells measured wider than the screen and dragged the page
     sideways - the fixed bars only followed it. Cap the tracks and shrink the figure. */
  .wn-stats, .wn-kpis {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--t-sp10); column-gap: var(--t-sp10);}
  .wn-kpis > div {padding-block: var(--t-sp16); padding-inline: var(--t-sp14); min-width: 0;}
  .wn-kpis b {font-size: var(--t-fs14);}
}

/* 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) {
  .wn-pop .bx > img {aspect-ratio: 21 / 9;}
  .wn-pop .bd {padding-block-start: var(--t-sp16); padding-inline-end: var(--t-sp17); padding-block-end: var(--t-sp17); padding-inline-start: var(--t-sp17);}
  .wn-pop .bd b {font-size: var(--t-fs12); margin-block-end: var(--t-sp6);}
  .wn-pop .bd > p {font-size: var(--t-fs3); margin-block-end: var(--t-sp10);}
  .wn-pop .pg .big {font-size: var(--t-fs16);}
  .wn-pop .pg .lbl {font-size: var(--t-fs5); margin-block-start: var(--t-sp5); margin-inline-end: 0; margin-block-end: var(--t-sp4); margin-inline-start: 0;}
  .wn-pop .pg .nt {font-size: var(--t-fs1);}
  .wn-pop .nav {margin-block-start: var(--t-sp12); margin-inline-end: 0; margin-block-end: var(--t-sp10); margin-inline-start: 0;}
  .wn-pop .nav button {width: 2.125rem; height: 2.125rem;}
  .wn-pop .later {margin-block-start: var(--t-sp7); padding-block: var(--t-sp7); padding-inline: var(--t-sp7);}
}

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

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


/* ---------------------------------------------------------------- tap targets
   The language chips sized themselves by their text, so 中文 wrapped to two lines inside its own
   pill at 360px and every control here measured under 44px. nowrap plus an explicit minimum
   fixes both: a CJK label is two glyphs wide and will break unless told not to. */
.wn-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-block: var(--t-sp4);
  padding-inline: var(--t-sp11);
  white-space: nowrap;
}

.wn-lang {padding-block: var(--t-sp2); padding-inline: var(--t-sp2);}

.wn-sticky .x,
.wn-pop .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-block: 0;
  padding-inline: 0;
}

/* ---------------------------------------------------------------- the head row at 320
   The wordmark carries min-width:0, so instead of pushing the page sideways it was squeezed to
   46px and read "Starbu" behind the language pills. The row's floor is the lockup plus three
   44px pills plus the burger; give the pills back their spare side padding and set the wordmark
   a size that fits, so the brand is readable and nothing is clipped. The pills keep their 44px
   touch height. */
@media (max-width: 400px) {
  .wn-head .w {row-gap: var(--t-sp6); column-gap: var(--t-sp6);}
  .wn-logo {row-gap: var(--t-sp7); column-gap: var(--t-sp7);}
  .wn-logo svg {width: 2rem; height: 2rem;}
  .wn-logo .wm b {font-size: var(--t-fs6);}
  .wn-lang a {min-width: 1.875rem; padding-block: var(--t-sp4); padding-inline: var(--t-sp5);}
}