/* MYBOSS88 Malaysia, the promo landing that sells. Lime paper, olive ink, lime accents, offer
   cards and proof between them.

   House style for this sheet:
     - type sizes that repeat are tokens in :root (--ds-fs*) and a rule names the token;
     - every box edge is written on its own, in logical names: padding-block-start,
       margin-inline-end, border-block-end-width / -style / -color. A modifier resets the one
       edge it means to and leaves the other three where the base class put them;
     - offsets are inset-block-start / inset-inline-start, so a pinned badge reads in the same
       direction as the text;
     - gap is row-gap plus column-gap, overflow is overflow-x plus overflow-y, and list-style
       carries its position explicitly so a <summary> cannot inherit the UA marker back.

   Static stylesheet: the build does NOT regenerate it. */

:root {
  --pg: #f7fee7;
  --cd: #ffffff;
  --hl: #d9f99d;
  --ik: #365314;
  --mk: #5c7342;
  --ac: #65a30d;
  --ac2: #4d7c0f;
  --tl: #3f6212;
  --tl2: #ecfccb;
  --sh: 0 2px 10px rgba(16, 36, 63, .07);
  --sh2: 0 10px 34px rgba(16, 36, 63, .13);
  --r: 8px;
  --w: 1140px;
  --bar: 58px;

  /* token layer */
  --ds-fs1: 12.5px;
  --ds-fs2: 13px;
  --ds-fs3: 13.5px;
  --ds-fs4: 14px;
  --ds-fs5: 14.5px;
  --ds-fs6: 15px;
  --ds-fs7: 15.5px;
  --ds-fs8: 16px;
  --ds-fs9: 17px;
  --ds-fs10: 18px;
  --ds-fs11: 19px;
  --ds-fs12: 20px;
  --ds-fs13: 21px;
  --ds-fs14: 22px;
  --ds-fs15: 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: 16.5px;
  line-height: 1.68;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-block-end: 86px;
}

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(29px, 4.4vw, 46px);}

h2 {font-size: clamp(23px, 2.9vw, 31px);}

h3 {font-size: var(--ds-fs11);}

p {margin-block-start: 0; margin-inline-end: 0; margin-block-end: 14px; margin-inline-start: 0;}

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

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

.mq-btn:hover {text-decoration: none; transform: translateY(-1px);}

.mq-btn.a {background: var(--ac); color: #231703; box-shadow: 0 3px 0 var(--ac2);}

.mq-btn.a:hover {box-shadow: 0 5px 0 var(--ac2);}

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

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

.mq-btn.lg {min-height: 54px; padding-block: 0; padding-inline: 30px; font-size: 16.5px;}

/* ---------------------------------------------------------------- header */
.mq-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: rgba(247, 249, 252, .94);
  backdrop-filter: saturate(150%) blur(9px);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--hl);
}

.mq-head .w {display: flex; align-items: center; row-gap: 18px; column-gap: 18px; min-height: 66px;}

.mq-logo {display: flex; align-items: center; row-gap: 10px; column-gap: 10px; min-width: 0; color: var(--ik);}

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

.mq-logo svg {width: 36px; height: 36px; flex: 0 0 auto;}

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

.mq-logo .wm b {font-size: var(--ds-fs13); letter-spacing: .035em;}

.mq-logo .wm small {font-size: 9.5px; letter-spacing: .22em; color: var(--mk); font-weight: 600;}

.mq-pills {display: flex; row-gap: 4px; column-gap: 4px; margin-inline-start: auto; flex-wrap: wrap;}

.mq-pills a {
  padding-block: 7px;
  padding-inline: 12px;
  border-radius: 99px;
  font-size: var(--ds-fs4);
  font-weight: 600;
  color: var(--mk);
}

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

.mq-lang {display: flex; row-gap: 2px; column-gap: 2px; border-width: 1px; border-style: solid; border-color: var(--hl); border-radius: 99px; padding-block: 3px; padding-inline: 3px; background: #fff;}

.mq-lang a {
  padding-block: 4px;
  padding-inline: 11px;
  border-radius: 99px;
  font-size: var(--ds-fs1);
  font-weight: 700;
  color: var(--mk);
  white-space: nowrap;
}
/* A CJK chip is two wide glyphs and wraps to two lines the moment the bar tightens, which
   drags the whole header out of shape. Both the chips and the wordmark stay on one line. */
.mq-logo .wm b, .mq-logo .wm small {white-space: nowrap;}

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

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

.mq-burger {
  display: none;
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  width: 44px;
  height: 44px;
  font-size: var(--ds-fs11);
  color: var(--ik);
  cursor: pointer;
}

.mq-drawer {display: none; flex-wrap: wrap; row-gap: 7px; column-gap: 7px; padding-block-start: 0; padding-inline-end: 22px; padding-block-end: 16px; padding-inline-start: 22px;}

.mq-drawer a {
  padding-block: 9px;
  padding-inline: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 99px;
  background: #fff;
  font-size: var(--ds-fs4);
  font-weight: 600;
  color: var(--ik);
}

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

/* ---------------------------------------------------------------- hero */
.mq-hero {padding-block-start: 46px; padding-inline-end: 0; padding-block-end: 34px; padding-inline-start: 0;}

.mq-hero.big {padding-block-start: 54px; padding-inline-end: 0; padding-block-end: 38px; padding-inline-start: 0;}

.mq-hero .w {display: grid; grid-template-columns: 1.08fr .92fr; row-gap: 46px; column-gap: 46px; align-items: center;}

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

.mq-hero .eb {
  display: inline-block;
  margin-block-end: 15px;
  padding-block: 6px;
  padding-inline: 13px;
  border-radius: 99px;
  background: var(--tl2);
  color: var(--tl);
  font-size: var(--ds-fs1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mq-hero h1 {margin-block-end: 15px;}

.mq-hero .lead {font-size: 17.5px; color: var(--mk); margin-block-end: 22px; max-width: 54ch;}

.mq-hero .act {display: flex; row-gap: 12px; column-gap: 12px; flex-wrap: wrap; margin-block-end: 22px;}

.mq-hero .chips {display: flex; flex-wrap: wrap; row-gap: 9px; column-gap: 9px;}

.mq-hero .chips span {
  display: inline-flex;
  align-items: center;
  row-gap: 7px;
  column-gap: 7px;
  min-width: 0;
  padding-block: 7px;
  padding-inline: 13px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 99px;
  background: #fff;
  font-size: var(--ds-fs2);
  font-weight: 600;
  color: var(--mk);
}

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

.mq-hero > .w > img {
  min-width: 0;
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--sh2);
  border-width: 6px;
  border-style: solid;
  border-color: #fff;
}

/* ---------------------------------------------------------------- generic section */
.mq-sec {padding-block-start: 0; padding-inline-end: 0; padding-block-end: 46px; padding-inline-start: 0;}

.mq-sec.pad {padding-block-start: 46px;}

.mq-sec .sh {margin-block-end: 22px; max-width: 70ch;}

.mq-sec .sh h2 {margin-block-end: 9px;}

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

.mq-sec .note {display: block; margin-block-start: 14px; color: var(--mk); font-size: var(--ds-fs3);}

/* ---------------------------------------------------------------- offer strip */
.mq-offers {
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
  padding-block: 26px;
  padding-inline: 26px;
}

.mq-offers .hd {display: flex; align-items: center; row-gap: 18px; column-gap: 18px; flex-wrap: wrap; margin-block-end: 22px;}

.mq-offers .hd h2 {margin-block: 0; margin-inline: 0; flex: 1 1 260px; min-width: 0;}

.mq-offers .gr {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 14px; column-gap: 14px;}

.mq-offers .of {padding-block: 18px; padding-inline: 18px; border-radius: var(--r); background: var(--pg); border-width: 1px; border-style: solid; border-color: var(--hl);}

.mq-offers .of b {display: block; font-size: 28px; color: var(--ac2); line-height: 1.05;}

.mq-offers .of em {display: block; margin-block-start: 7px; margin-inline-end: 0; margin-block-end: 6px; margin-inline-start: 0; font-style: normal; font-weight: 600; font-size: var(--ds-fs5);}

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

/* ---------------------------------------------------------------- stat strip */
.mq-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: 1px;
  column-gap: 1px;
  background: var(--hl);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.mq-stats > div {background: #fff; padding-block: 22px; padding-inline: 18px; text-align: center;}

.mq-stats b {display: block; font-size: 31px; color: var(--ik); line-height: 1.08;}

.mq-stats span {display: block; margin-block-start: 6px; color: var(--mk); font-size: var(--ds-fs3);}

.mq-kpis {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 14px; column-gap: 14px;}

.mq-kpis > div {
  padding-block: 20px;
  padding-inline: 18px;
  border-radius: var(--r);
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-block-start-width: 3px;
  border-block-start-style: solid;
  border-block-start-color: var(--tl);
}

.mq-kpis b {display: block; font-size: var(--ds-fs15); line-height: 1.08;}

.mq-kpis span {display: block; margin-block-start: 5px; color: var(--mk); font-size: var(--ds-fs3);}

/* ---------------------------------------------------------------- numbered index */
.mq-index {
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-inline-start-width: 4px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--ac);
  border-radius: var(--r);
  background: #fff;
  padding-block: 22px;
  padding-inline: 24px;
  box-shadow: var(--sh);
}

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

.mq-index > div {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 9px; column-gap: 26px;}

.mq-index a {
  display: flex;
  align-items: baseline;
  row-gap: 11px;
  column-gap: 11px;
  min-width: 0;
  color: var(--ik);
  font-weight: 600;
  font-size: var(--ds-fs6);
  padding-block: 3px;
  padding-inline: 0;
}

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

/* ---------------------------------------------------------------- tables */
.mq-tw {overflow-x: auto; border-width: 1px; border-style: solid; border-color: var(--hl); border-radius: 14px; background: #fff; box-shadow: var(--sh);}

.mq-tbl {width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--ds-fs6);}

.mq-tbl th {
  background: var(--ik);
  color: #fff;
  text-align: left;
  padding-block: 14px;
  padding-inline: 16px;
  font-size: var(--ds-fs2);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
}

.mq-tbl td {padding-block: 13px; padding-inline: 16px; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--hl); vertical-align: top;}

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

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

/* RTP bar column */
.mq-bar {display: block; height: 7px; border-radius: 99px; background: var(--hl); overflow-x: hidden; overflow-y: hidden; margin-block-start: 7px;}

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

/* ---------------------------------------------------------------- conversion band */
.mq-cband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 22px;
  column-gap: 22px;
  flex-wrap: wrap;
  padding-block: 26px;
  padding-inline: 30px;
  border-radius: 14px;
  background: linear-gradient(103deg, #f6e4bd, #fbf2de);
  border-width: 1px;
  border-style: solid;
  border-color: #e9d2a4;
}

.mq-cband .tx {flex: 1 1 320px; min-width: 0;}

.mq-cband b {display: block; font-size: var(--ds-fs13); line-height: 1.3;}

.mq-cband small {display: block; margin-block-start: 6px; color: #6b5420; font-size: var(--ds-fs4);}

/* ---------------------------------------------------------------- category cards */
.mq-cats {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 18px; column-gap: 18px;}

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

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

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

.mq-cats .cc .bd {padding-block-start: 18px; padding-inline-end: 20px; padding-block-end: 22px; padding-inline-start: 20px;}

.mq-cats .cc b {display: block; margin-block-end: 7px; font-size: var(--ds-fs10);}

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

/* ---------------------------------------------------------------- studio chips */
.mq-studios {display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px;}

/* 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. */
.mq-studios .st {
  display: inline-flex;
  align-items: center;
  row-gap: 9px;
  column-gap: 9px;
  min-width: 0;
  padding-block: 9px;
  padding-inline: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 99px;
  background: #f1f4f9;
  font-size: var(--ds-fs4);
  font-weight: 600;
}

.mq-studios .st img {min-width: 0; flex: 0 1 auto; max-height: 20px; width: auto;}

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

/* ---------------------------------------------------------------- timeline */
.mq-rail {position: relative; padding-inline-start: 30px;}

.mq-rail:before {
  content: "";
  position: absolute;
  inset-inline-start: 9px;
  inset-block-start: 7px;
  inset-block-end: 7px;
  width: 2px;
  background: var(--hl);
}

.mq-rail .rw {position: relative; padding-block-end: 24px;}

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

.mq-rail .dot {
  position: absolute;
  inset-inline-start: -30px;
  inset-block-start: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border-width: 3px;
  border-style: solid;
  border-color: var(--tl);
}

.mq-rail .bd b {display: block; font-size: var(--ds-fs9);}

.mq-rail .bd em {
  display: inline-block;
  margin-block-start: 5px;
  margin-inline-end: 0;
  margin-block-end: 7px;
  margin-inline-start: 0;
  padding-block: 3px;
  padding-inline: 10px;
  border-radius: 99px;
  background: var(--tl2);
  color: var(--tl);
  font-style: normal;
  font-size: var(--ds-fs1);
  font-weight: 700;
}

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

/* ---------------------------------------------------------------- KYC / tier cards */
.mq-tiers {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 18px; column-gap: 18px;}

.mq-tiers .tc {
  position: relative;
  padding-block: 24px;
  padding-inline: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
}

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

.mq-tiers .rib {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 22px;
  padding-block: 5px;
  padding-inline: 13px;
  border-radius: 99px;
  background: var(--ik);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mq-tiers .tc h3 {margin-block-end: 5px;}

.mq-tiers .tc .sub {color: var(--mk); font-size: var(--ds-fs4); margin-block-end: 14px;}

.mq-tiers .tc .chip {
  display: inline-block;
  margin-block-end: 14px;
  padding-block: 5px;
  padding-inline: 12px;
  border-radius: var(--r);
  background: var(--tl2);
  color: var(--tl);
  font-size: var(--ds-fs2);
  font-weight: 700;
}

.mq-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;}

.mq-tiers .tc li {position: relative; padding-block-start: 5px; padding-inline-end: 0; padding-block-end: 5px; padding-inline-start: 24px; font-size: var(--ds-fs5); color: var(--mk);}

.mq-tiers .tc li:before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 12px;
  width: 11px;
  height: 6px;
  border-inline-start-width: 2.5px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--tl);
  border-block-end-width: 2.5px;
  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 */
.mq-tiers.five {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

.mq-tiers.five .tc {padding-block: 20px; padding-inline: 16px;}

.mq-tiers.five .tc h3 {font-size: var(--ds-fs9);}

/* ---------------------------------------------------------------- splits */
.mq-split {display: grid; grid-template-columns: 1fr 1fr; row-gap: 38px; column-gap: 38px; align-items: center; margin-block-end: 34px;}

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

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

.mq-split > img {min-width: 0; width: 100%; border-radius: 14px; box-shadow: var(--sh);}

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

.mq-split .bd h3 {margin-block-end: 11px; font-size: var(--ds-fs14);}

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

/* ---------------------------------------------------------------- members */
.mq-members {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 18px; column-gap: 18px;}

.mq-members .mb {
  padding-block: 22px;
  padding-inline: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
}

.mq-members .hd {display: flex; align-items: center; row-gap: 12px; column-gap: 12px; margin-block-end: 13px;}

.mq-members .av {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tl2);
  display: grid;
  place-items: center;
  font-size: var(--ds-fs13);
}

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

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

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

.mq-members .rt {flex: 0 0 auto; color: var(--ac); font-size: var(--ds-fs2); letter-spacing: .5px;}

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

/* ---------------------------------------------------------------- prose */
.mq-prose {max-width: 820px;}

.mq-prose h2 {margin-block-start: 34px; margin-inline-end: 0; margin-block-end: 13px; margin-inline-start: 0; scroll-margin-top: 86px;}

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

.mq-prose h3 {margin-block-start: 22px; margin-inline-end: 0; margin-block-end: 9px; margin-inline-start: 0;}

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

.mq-prose ul, .mq-prose ol {margin-block-start: 0; margin-inline-end: 0; margin-block-end: 14px; margin-inline-start: 0; padding-inline-start: 22px; color: #2c3f58;}

.mq-prose li {margin-block-end: 6px;}

/* 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. */
.mq-prose .mq-tw, .mq-prose .mq-tiers, .mq-prose .mq-rail {margin-block: 22px; margin-inline: 0;}

.mq-prose .mq-kpis, .mq-prose .mq-steps, .mq-prose .mq-faq {margin-block-end: 22px;}

.mq-prose .mq-kpis + .mq-steps {margin-block-start: 22px;}

.mq-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: 11px; column-gap: 11px;}

.mq-steps li {
  counter-increment: s;
  position: relative;
  padding-block-start: 15px;
  padding-inline-end: 18px;
  padding-block-end: 15px;
  padding-inline-start: 56px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #fff;
  font-size: var(--ds-fs6);
}

.mq-steps li:before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 17px;
  inset-block-start: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ik);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--ds-fs2);
  font-weight: 700;
}

/* ---------------------------------------------------------------- notice bar */
.mq-notice {
  display: flex;
  row-gap: 14px;
  column-gap: 14px;
  padding-block: 18px;
  padding-inline: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #e9d2a4;
  border-radius: var(--r);
  background: #fdf8ee;
  font-size: var(--ds-fs5);
  color: #5d4a1d;
}

.mq-notice i {flex: 0 0 auto; font-style: normal; font-size: var(--ds-fs10);}

/* ---------------------------------------------------------------- faq */
.mq-faq {display: grid; row-gap: 9px; column-gap: 9px;}

.mq-faq details {border-width: 1px; border-style: solid; border-color: var(--hl); border-radius: var(--r); background: #fff;}

.mq-faq summary {
  padding-block: 15px;
  padding-inline: 18px;
  cursor: pointer;
  font-weight: 650;
  font-size: var(--ds-fs7);
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}

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

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

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

.mq-faq p {margin-block: 0; margin-inline: 0; padding-block-start: 0; padding-inline-end: 18px; padding-block-end: 16px; padding-inline-start: 18px; color: var(--mk); font-size: var(--ds-fs6);}

/* ---------------------------------------------------------------- closing band */
.mq-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 22px;
  column-gap: 22px;
  flex-wrap: wrap;
  width: calc(100% - 44px);
  max-width: var(--w);
  margin-block-start: 0;
  margin-inline-end: auto;
  margin-block-end: 46px;
  margin-inline-start: auto;
  padding-block: 30px;
  padding-inline: 34px;
  border-radius: 16px;
  background: var(--ik);
  color: #fff;
}

.mq-band b {flex: 1 1 320px; min-width: 0; font-size: var(--ds-fs12); line-height: 1.38; font-weight: 600;}

/* ---------------------------------------------------------------- footer */
.mq-foot {border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--hl); background: #fff; padding-block-start: 46px; padding-inline-end: 0; padding-block-end: 22px; padding-inline-start: 0;}

.mq-foot .top {display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); row-gap: 30px; column-gap: 30px; margin-block-end: 34px;}

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

.mq-foot .ab p {margin-block-start: 13px; margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; color: var(--mk); font-size: var(--ds-fs4);}

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

.mq-foot .top > div a {display: block; padding-block: 4px; padding-inline: 0; color: var(--ik); font-size: var(--ds-fs5);}

.mq-foot .pay, .mq-foot .trust {display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; margin-block-end: 18px;}

.mq-foot .pay span, .mq-foot .trust span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 40px;
  padding-block: 7px;
  padding-inline: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #f1f4f9;
}

.mq-foot .pay img, .mq-foot .trust img {min-width: 0; flex: 0 1 auto; max-height: 22px; width: auto;}

.mq-foot .legal {display: flex; row-gap: 16px; column-gap: 16px; align-items: flex-start; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--hl); padding-block-start: 22px;}

.mq-foot .age {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--ik);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--ds-fs3);
}

.mq-foot .legal p {margin-block-start: 0; margin-inline-end: 0; margin-block-end: 6px; margin-inline-start: 0; font-size: var(--ds-fs3); color: var(--mk);}

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

/* ---------------------------------------------------------------- sticky join bar (desktop) */
.mq-sticky {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: 18px;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  row-gap: 14px;
  column-gap: 14px;
  width: calc(100% - 44px);
  max-width: 720px;
  padding-block-start: 12px;
  padding-inline-end: 14px;
  padding-block-end: 12px;
  padding-inline-start: 22px;
  border-radius: 99px;
  background: var(--ik);
  color: #fff;
  box-shadow: 0 14px 38px rgba(16, 36, 63, .3);
}

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

.mq-sticky .mq-btn {min-height: 42px; padding-block: 0; padding-inline: 18px; font-size: var(--ds-fs4);}

.mq-sticky .x {flex: 0 0 auto; background: none; border-width: 0; border-style: none; border-color: currentcolor; color: #7f93ad; font-size: var(--ds-fs13); cursor: pointer; padding-block: 0; padding-inline: 4px;}

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

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

/* ---------------------------------------------------------------- entry modal */
.mq-pop {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 60;
  background: rgba(10, 22, 38, .62);
  display: grid;
  place-items: center;
  padding-block: 18px;
  padding-inline: 18px;
}

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

.mq-pop .bx {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 26px 70px 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 */
.mq-pop .x {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  border-radius: 50%;
  background: rgba(16, 36, 63, .62);
  color: #fff;
  font-size: var(--ds-fs12);
  line-height: 1;
  cursor: pointer;
}

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

.mq-pop .bd {padding-block: 24px; padding-inline: 24px;}

.mq-pop .bd b {display: block; font-size: var(--ds-fs14); margin-block-end: 9px;}

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

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

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

.mq-pop .pg .big {display: block; font-size: 34px; color: var(--ac2); font-weight: 800; line-height: 1.05;}

.mq-pop .pg .lbl {display: block; margin-block-start: 7px; margin-inline-end: 0; margin-block-end: 5px; margin-inline-start: 0; font-weight: 650; font-size: var(--ds-fs7);}

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

.mq-pop .nav {display: flex; align-items: center; justify-content: space-between; row-gap: 12px; column-gap: 12px; margin-block-start: 18px; margin-inline-end: 0; margin-block-end: 16px; margin-inline-start: 0;}

.mq-pop .nav button {
  width: 38px;
  height: 38px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: 50%;
  background: #fff;
  font-size: var(--ds-fs8);
  color: var(--ik);
  cursor: pointer;
}

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

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

.mq-pop .later {
  display: block;
  width: 100%;
  margin-block-start: 11px;
  padding-block: 9px;
  padding-inline: 9px;
  background: none;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  color: var(--mk);
  font-size: var(--ds-fs3);
  cursor: pointer;
}

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

@media (max-width: 760px) {
  body {padding-block-end: calc(var(--bar) + 22px);}
  .mq-pills {display: none;}
  .mq-burger {display: block; margin-inline-start: auto;}
  .mq-head .w {row-gap: 10px; column-gap: 10px;}
  .mq-sec {padding-block-end: 34px;}
  .mq-hero {padding-block-start: 30px; padding-inline-end: 0; padding-block-end: 22px; padding-inline-start: 0;}
  .mq-hero.big {padding-block-start: 30px; padding-inline-end: 0; padding-block-end: 22px; padding-inline-start: 0;}
  .mq-stats, .mq-kpis {grid-template-columns: 1fr 1fr;}
  .mq-index > div {grid-template-columns: 1fr;}
  .mq-cats, .mq-tiers, .mq-members, .mq-tiers.five {grid-template-columns: 1fr;}
  .mq-offers {padding-block: 20px; padding-inline: 20px;}
  .mq-offers .gr {grid-template-columns: 1fr;}
  .mq-band {padding-block: 24px; padding-inline: 24px; margin-block-end: 34px;}
  .mq-cband {padding-block: 22px; padding-inline: 22px;}
  .mq-foot .top {grid-template-columns: 1fr; row-gap: 22px; column-gap: 22px;}

  /* the thumb-zone CTA: a pinned bar, not a button at the top of the screen */
  .mq-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: 10px;
    padding-inline: 14px;
    row-gap: 10px;
    column-gap: 10px;
  }
  .mq-sticky > span {display: none;}
  .mq-sticky .mq-btn {flex: 1 1 auto;}

  .mq-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: 1px;
    border-block-start-style: solid;
    border-block-start-color: #1d3550;
  }
  .mq-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 2px;
    column-gap: 2px;
    color: #9fb2c8;
    font-size: 10.5px;
    font-weight: 600;
  }
  .mq-tabs a:hover {text-decoration: none;}
  .mq-tabs .i {font-size: var(--ds-fs9); line-height: 1;}
  .mq-tabs .mid {color: #231703;}
  .mq-tabs .mid .i {
    width: 42px;
    height: 42px;
    margin-block-start: -18px;
    border-radius: 50%;
    background: var(--ac);
    border-width: 3px;
    border-style: solid;
    border-color: var(--ik);
    display: grid;
    place-items: center;
    font-size: var(--ds-fs13);
  }
}

@media (max-width: 420px) {
  body {font-size: var(--ds-fs8);}
  .w {padding-block: 0; padding-inline: 16px;}
  .mq-band {width: calc(100% - 32px);}
  .mq-sticky {padding-block: 9px; padding-inline: 12px;}
  /* The bar is wordmark + three language chips + burger on one row. The MALAYSIA tagline
     widened the mark until the EN chip clipped the last character, so it goes at phone width
     and the chips tighten. */
  .mq-head .w {row-gap: 8px; column-gap: 8px; padding-block: 0; padding-inline: 12px;}
  .mq-logo {min-width: 0; overflow-x: hidden; overflow-y: hidden;}
  .mq-logo .wm small {display: none;}
  .mq-logo svg {width: 30px; height: 30px;}
  .mq-logo .wm b {font-size: var(--ds-fs9); letter-spacing: .015em;}
  .mq-lang {padding-block: 2px; padding-inline: 2px;}
  .mq-lang a {padding-block: 4px; padding-inline: 7px; font-size: 11px;}
}

/* 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) {
  .mq-pop .bx > img {aspect-ratio: 21 / 9;}
  .mq-pop .bd {padding-block-start: 16px; padding-inline-end: 18px; padding-block-end: 18px; padding-inline-start: 18px;}
  .mq-pop .bd b {font-size: var(--ds-fs11); margin-block-end: 6px;}
  .mq-pop .bd > p {font-size: var(--ds-fs3); margin-block-end: 10px;}
  .mq-pop .pg .big {font-size: var(--ds-fs15);}
  .mq-pop .pg .lbl {font-size: var(--ds-fs5); margin-block-start: 5px; margin-inline-end: 0; margin-block-end: 4px; margin-inline-start: 0;}
  .mq-pop .pg .nt {font-size: var(--ds-fs1);}
  .mq-pop .nav {margin-block-start: 12px; margin-inline-end: 0; margin-block-end: 10px; margin-inline-start: 0;}
  .mq-pop .nav button {width: 34px; height: 34px;}
  .mq-pop .later {margin-block-start: 7px; padding-block: 7px; padding-inline: 7px;}
}

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

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