/* bull99malaysia.com — .bq-* shell.
   Light long-scroll landing: a document, not a casino floor. Ink #10131a on #f7f4ef, warm gold
   #e0a800 for anything that is money or a call to action, deep teal #d21f2b 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 fixed widths and heights and the shadows used more than once
       are named once in :root as --b-* 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;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - the font shorthand is opened out into its longhands;
     - repeat() tracks are written out. */

:root {
  --pg: #f7f4ef;
  --cd: #ffffff;
  --hl: #e6dfd3;
  --ik: #10131a;
  --mk: #6b6559;
  --ac: #e0a800;
  --ac2: #b98400;
  --tl: #d21f2b;
  --tl2: #fbe8e9;
  --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 */
  --b-sp1: 1px;
  --b-sp2: 2px;
  --b-sp3: 3px;
  --b-sp4: 4px;
  --b-sp5: 5px;
  --b-sp6: 6px;
  --b-sp7: 7px;
  --b-sp8: 8px;
  --b-sp9: 9px;
  --b-sp10: 10px;
  --b-sp11: 11px;
  --b-sp12: 12px;
  --b-sp13: 13px;
  --b-sp14: 14px;
  --b-sp15: 15px;
  --b-sp16: 16px;
  --b-sp17: 18px;
  --b-sp18: 20px;
  --b-sp19: 22px;
  --b-sp20: 24px;
  --b-sp21: 26px;
  --b-sp22: 30px;
  --b-sp23: 34px;
  --b-sp24: 38px;
  --b-sp25: 46px;
  --b-sz1: 100%;
  --b-sz2: 42px;
  --b-sz3: 36px;
  --b-sz4: 20px;
  --b-sz5: 40px;
  --b-sz6: 44px;
  --b-sz7: 26px;
  --b-sz8: 34px;
  --b-sz9: 38px;
}

* {box-sizing: border-box;}

html {overflow-x: clip;}

body {
  margin-block: 0px;
  margin-inline: 0px;
  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: var(--b-sz1); height: auto; vertical-align: middle;}

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

a:hover {text-decoration: underline;}

h1, h2, h3, h4 {margin-block: 0px; margin-inline: 0px; 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: 19px;}

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

.w {width: var(--b-sz1); max-width: var(--w); margin-block: 0px; margin-inline: auto; padding-block: 0px; padding-inline: var(--b-sp19);}

/* ---------------------------------------------------------------- buttons */
.bq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--b-sp8);
  column-gap: var(--b-sp8);
  min-height: 46px;
  padding-block: 0px;
  padding-inline: var(--b-sp19);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition-property: transform, box-shadow;
  transition-duration: .12s, .12s;
  transition-timing-function: ease, ease;
  transition-delay: 0s, 0s;
}

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

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

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

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

.bq-btn.t {background: var(--tl); color: #fdf0f1;}

.bq-btn.lg {min-height: 54px; padding-block: 0px; padding-inline: var(--b-sp22); font-size: 16.5px;}

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

.bq-head .w {display: flex; align-items: center; row-gap: var(--b-sp17); column-gap: var(--b-sp17); min-height: 66px;}

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

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

.bq-logo svg {width: var(--b-sz3); height: var(--b-sz3); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

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

.bq-logo .wm b {font-size: 21px; letter-spacing: .035em;}

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

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

.bq-pills a {
  padding-block: var(--b-sp7);
  padding-inline: var(--b-sp12);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mk);
}

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

.bq-lang {display: flex; row-gap: var(--b-sp2); column-gap: var(--b-sp2); border: 1px solid var(--hl); border-radius: 99px; padding-block: var(--b-sp3); padding-inline: var(--b-sp3); background: #fff;}

.bq-lang a {white-space: nowrap; padding-block: var(--b-sp4); padding-inline: var(--b-sp11); border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--mk); min-height: var(--b-sz6); min-width: 44px; display: grid; align-items: center; justify-items: center;}

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

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

.bq-burger {
  display: none;
  background: #fff;
  border: 1px solid var(--hl);
  border-radius: var(--r);
  width: var(--b-sz6);
  height: var(--b-sz6);
  font-size: 19px;
  color: var(--ik);
  cursor: pointer;
}

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

.bq-drawer a {
  padding-block: var(--b-sp9);
  padding-inline: var(--b-sp14);
  border: 1px solid var(--hl);
  border-radius: 99px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ik);
}

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

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

.bq-hero.big {padding-block-start: 54px; padding-inline-end: 0px; padding-block-end: var(--b-sp24); padding-inline-start: 0px;}

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

.bq-hero .bd {min-width: 0px;}

.bq-hero .eb {
  display: inline-block;
  margin-block-end: var(--b-sp15);
  padding-block: var(--b-sp6);
  padding-inline: var(--b-sp13);
  border-radius: 99px;
  background: var(--tl2);
  color: var(--tl);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bq-hero h1 {margin-block-end: var(--b-sp15);}

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

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

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

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

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

.bq-hero > .w > img {
  min-width: 0px;
  width: var(--b-sz1);
  border-radius: 16px;
  box-shadow: var(--sh2);
  border: 6px solid #fff;
}

/* ---------------------------------------------------------------- generic section */
.bq-sec {padding-block-start: 0px; padding-inline-end: 0px; padding-block-end: var(--b-sp25); padding-inline-start: 0px;}

.bq-sec.pad {padding-block-start: var(--b-sp25);}

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

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

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

.bq-sec .note {display: block; margin-block-start: var(--b-sp14); color: var(--mk); font-size: 13.5px;}

/* ---------------------------------------------------------------- offer strip */
.bq-offers {
  border: 1px solid var(--hl);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
  padding-block: var(--b-sp21);
  padding-inline: var(--b-sp21);
}

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

.bq-offers .hd h2 {margin-block: 0px; margin-inline: 0px; flex-grow: 1; flex-shrink: 1; flex-basis: 260px; min-width: 0px;}

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

.bq-offers .of {padding-block: var(--b-sp17); padding-inline: var(--b-sp17); border-radius: var(--r); background: var(--pg); border: 1px solid var(--hl);}

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

.bq-offers .of em {display: block; margin-block-start: var(--b-sp7); margin-inline-end: 0px; margin-block-end: var(--b-sp6); margin-inline-start: 0px; font-style: normal; font-weight: 600; font-size: 14.5px;}

.bq-offers .of small {color: var(--mk); font-size: 13px;}

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

.bq-stats > div {min-width:0;background: #fff; padding-block: var(--b-sp19); padding-inline: var(--b-sp17); text-align: center;}

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

.bq-stats span {display: block; margin-block-start: var(--b-sp6); color: var(--mk); font-size: 13.5px;}

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

.bq-kpis > div {
  min-width: 0;
  padding-block: var(--b-sp18);
  padding-inline: var(--b-sp17);
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hl);
  border-top: 3px solid var(--tl);
}

.bq-kpis b {display: block; font-size: 27px; line-height: 1.08;}

.bq-kpis span {display: block; margin-block-start: var(--b-sp5); color: var(--mk); font-size: 13.5px;}

/* ---------------------------------------------------------------- numbered index */
.bq-index {
  border: 1px solid var(--hl);
  border-left: 4px solid var(--ac);
  border-radius: var(--r);
  background: #fff;
  padding-block: var(--b-sp19);
  padding-inline: var(--b-sp20);
  box-shadow: var(--sh);
}

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

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

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

.bq-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: 800;
}

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

.bq-tbl {width: var(--b-sz1); border-collapse: collapse; min-width: 560px; font-size: 15px;}

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

.bq-tbl td {padding-block: var(--b-sp13); padding-inline: var(--b-sp16); border-top: 1px solid var(--hl); vertical-align: top;}

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

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

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

.bq-bar i {display: block; height: var(--b-sz1); background: var(--tl);}

/* ---------------------------------------------------------------- conversion band */
.bq-cband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--b-sp19);
  column-gap: var(--b-sp19);
  flex-wrap: wrap;
  padding-block: var(--b-sp21);
  padding-inline: var(--b-sp22);
  border-radius: 14px;
  background: linear-gradient(103deg, #f7e4b4, #fbf1d8);
  border: 1px solid #efd9a0;
}

.bq-cband .tx {flex-grow: 1; flex-shrink: 1; flex-basis: 320px; min-width: 0px;}

.bq-cband b {display: block; font-size: 21px; line-height: 1.3;}

.bq-cband small {display: block; margin-block-start: var(--b-sp6); color: #6b5200; font-size: 14px;}

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

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

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

.bq-cats .cc img {width: var(--b-sz1); min-width: 0px; display: block; aspect-ratio: 4 / 3; object-fit: cover;}

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

.bq-cats .cc b {display: block; margin-block-end: var(--b-sp7); font-size: 18px;}

.bq-cats .cc p {margin-block: 0px; margin-inline: 0px; color: var(--mk); font-size: 14.5px;}

/* ---------------------------------------------------------------- studio chips */
.bq-studios {display: flex; flex-wrap: wrap; row-gap: var(--b-sp10); column-gap: var(--b-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. */
.bq-studios .st {
  display: inline-flex;
  align-items: center;
  row-gap: var(--b-sp9);
  column-gap: var(--b-sp9);
  min-width: 0px;
  padding-block: var(--b-sp9);
  padding-inline: var(--b-sp15);
  border: 1px solid var(--hl);
  border-radius: 99px;
  background: #f2eee6;
  font-size: 14px;
  font-weight: 600;
}

.bq-studios .st img {min-width: 0px; flex-grow: 0; flex-shrink: 1; flex-basis: auto; max-height: var(--b-sz4); width: auto;}

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

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

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

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

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

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

.bq-rail .bd b {display: block; font-size: 17px;}

.bq-rail .bd em {
  display: inline-block;
  margin-block-start: var(--b-sp5);
  margin-inline-end: 0px;
  margin-block-end: var(--b-sp7);
  margin-inline-start: 0px;
  padding-block: var(--b-sp3);
  padding-inline: var(--b-sp10);
  border-radius: 99px;
  background: var(--tl2);
  color: var(--tl);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
}

.bq-rail .bd p {margin-block: 0px; margin-inline: 0px; color: var(--mk); font-size: 14.5px;}

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

.bq-tiers .tc {
  position: relative;
  padding-block: var(--b-sp20);
  padding-inline: var(--b-sp19);
  border: 1px solid var(--hl);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
}

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

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

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

.bq-tiers .tc .sub {color: var(--mk); font-size: 14px; margin-block-end: var(--b-sp14);}

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

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

.bq-tiers .tc li {position: relative; padding-block-start: var(--b-sp5); padding-inline-end: 0px; padding-block-end: var(--b-sp5); padding-inline-start: var(--b-sp20); font-size: 14.5px; color: var(--mk);}

.bq-tiers .tc li:before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 12px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--tl);
  border-bottom: 2.5px solid var(--tl);
  transform: rotate(-45deg);
}

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

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

.bq-tiers.five .tc h3 {font-size: 17px;}

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

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

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

.bq-split > img {min-width: 0px; width: var(--b-sz1); border-radius: 14px; box-shadow: var(--sh);}

.bq-split .bd {min-width: 0px;}

.bq-split .bd h3 {margin-block-end: var(--b-sp11); font-size: 22px;}

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

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

.bq-members .mb {
  padding-block: var(--b-sp19);
  padding-inline: var(--b-sp19);
  border: 1px solid var(--hl);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
}

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

.bq-members .av {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: var(--b-sz2);
  height: var(--b-sz2);
  border-radius: 50%;
  background: var(--tl2);
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 21px;
}

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

.bq-members .hd b {display: block; font-size: 15px;}

.bq-members .hd small {color: var(--mk); font-size: 13px;}

.bq-members .rt {flex-grow: 0; flex-shrink: 0; flex-basis: auto; color: var(--ac); font-size: 13px; letter-spacing: .5px;}

.bq-members p {margin-block: 0px; margin-inline: 0px; color: var(--mk); font-size: 14.5px;}

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

.bq-prose h2 {margin-block-start: var(--b-sp23); margin-inline-end: 0px; margin-block-end: var(--b-sp13); margin-inline-start: 0px; scroll-margin-top: 86px;}

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

.bq-prose h3 {margin-block-start: var(--b-sp19); margin-inline-end: 0px; margin-block-end: var(--b-sp9); margin-inline-start: 0px;}

.bq-prose p {color: #2a2e38;}

.bq-prose ul, .bq-prose ol {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: var(--b-sp14); margin-inline-start: 0px; padding-inline-start: var(--b-sp19); color: #2a2e38;}

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

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

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

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

.bq-steps li {
  counter-increment: s;
  position: relative;
  padding-block-start: var(--b-sp15);
  padding-inline-end: var(--b-sp17);
  padding-block-end: var(--b-sp15);
  padding-inline-start: 56px;
  border: 1px solid var(--hl);
  border-radius: var(--r);
  background: #fff;
  font-size: 15px;
}

.bq-steps li:before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 17px;
  inset-block-start: 14px;
  width: var(--b-sz7);
  height: var(--b-sz7);
  border-radius: 50%;
  background: var(--ik);
  color: #fff;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 13px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- notice bar */
.bq-notice {
  display: flex;
  row-gap: var(--b-sp14);
  column-gap: var(--b-sp14);
  padding-block: var(--b-sp17);
  padding-inline: var(--b-sp18);
  border: 1px solid #efd9a0;
  border-radius: var(--r);
  background: #fdf8ea;
  font-size: 14.5px;
  color: #5d4700;
}

.bq-notice i {flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-style: normal; font-size: 18px;}

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

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

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

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

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

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

.bq-faq p {margin-block: 0px; margin-inline: 0px; padding-block-start: 0px; padding-inline-end: var(--b-sp17); padding-block-end: var(--b-sp16); padding-inline-start: var(--b-sp17); color: var(--mk); font-size: 15px;}

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

.bq-band b {flex-grow: 1; flex-shrink: 1; flex-basis: 320px; min-width: 0px; font-size: 20px; line-height: 1.38; font-weight: 600;}

/* ---------------------------------------------------------------- footer */
.bq-foot {border-top: 1px solid var(--hl); background: #fff; padding-block-start: var(--b-sp25); padding-inline-end: 0px; padding-block-end: var(--b-sp19); padding-inline-start: 0px;}

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

.bq-foot .ab {min-width: 0px;}

.bq-foot .ab p {margin-block-start: var(--b-sp13); margin-inline-end: 0px; margin-block-end: 0px; margin-inline-start: 0px; color: var(--mk); font-size: 14px;}

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

.bq-foot .top > div a {display: block; padding-block: var(--b-sp4); padding-inline: 0px; color: var(--ik); font-size: 14.5px;}

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

.bq-foot .pay span, .bq-foot .trust span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: var(--b-sz5);
  padding-block: var(--b-sp7);
  padding-inline: var(--b-sp12);
  border: 1px solid var(--hl);
  border-radius: var(--r);
  background: #f2eee6;
}

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

.bq-foot .legal {display: flex; row-gap: var(--b-sp16); column-gap: var(--b-sp16); align-items: flex-start; border-top: 1px solid var(--hl); padding-block-start: var(--b-sp19);}

.bq-foot .age {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: var(--b-sz5);
  height: var(--b-sz5);
  border-radius: 50%;
  border: 2px solid var(--ik);
  display: grid;
  align-items: center;
  justify-items: center;
  font-weight: 800;
  font-size: 13.5px;
}

.bq-foot .legal p {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: var(--b-sp6); margin-inline-start: 0px; font-size: 13.5px; color: var(--mk);}

.bq-foot .legal small {color: var(--mk); font-size: 12.5px;}

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

.bq-sticky > span {flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0px; font-size: 14.5px; font-weight: 600;}

.bq-sticky .bq-btn {min-height: var(--b-sz2); padding-block: 0px; padding-inline: var(--b-sp17); font-size: 14px;}

.bq-sticky .x {flex-grow: 0; flex-shrink: 0; flex-basis: auto; background: none; border: 0; color: #8c8678; font-size: 21px; cursor: pointer; padding-block: 0px; padding-inline: var(--b-sp4);}

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

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

/* ---------------------------------------------------------------- entry modal */
.bq-pop {
  position: fixed;
  inset-block: 0px;
  inset-inline: 0px;
  z-index: 60;
  background: rgba(10, 22, 38, .62);
  display: grid;
  align-items: center;
  justify-items: center;
  padding-block: var(--b-sp17);
  padding-inline: var(--b-sp17);
}

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

.bq-pop .bx {
  position: relative;
  width: var(--b-sz1);
  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 */
.bq-pop .x {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: var(--b-sz3);
  height: var(--b-sz3);
  border: 0;
  border-radius: 50%;
  background: rgba(16, 36, 63, .62);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.bq-pop .bx > img {width: var(--b-sz1); display: block; aspect-ratio: 16 / 9; object-fit: cover;}

.bq-pop .bd {padding-block: var(--b-sp20); padding-inline: var(--b-sp20);}

.bq-pop .bd b {display: block; font-size: 22px; margin-block-end: var(--b-sp9);}

.bq-pop .bd > p {color: var(--mk); font-size: 14.5px;}

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

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

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

.bq-pop .pg .lbl {display: block; margin-block-start: var(--b-sp7); margin-inline-end: 0px; margin-block-end: var(--b-sp5); margin-inline-start: 0px; font-weight: 650; font-size: 15.5px;}

.bq-pop .pg .nt {display: block; color: var(--mk); font-size: 13.5px;}

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

.bq-pop .nav button {
  width: var(--b-sz9);
  height: var(--b-sz9);
  border: 1px solid var(--hl);
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  color: var(--ik);
  cursor: pointer;
}

.bq-pop .nav .ct {font-variant-numeric: tabular-nums; color: var(--mk); font-size: 13.5px; font-weight: 700;}

.bq-pop .bd .bq-btn {width: var(--b-sz1);}

.bq-pop .later {
  display: block;
  width: var(--b-sz1);
  margin-block-start: var(--b-sp11);
  padding-block: var(--b-sp9);
  padding-inline: var(--b-sp9);
  background: none;
  border: 0;
  color: var(--mk);
  font-size: 13.5px;
  cursor: pointer;
}

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

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

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

  .bq-tabs {
    position: fixed;
    inset-inline-start: 0px;
    inset-inline-end: 0px;
    inset-block-end: 0px;
    z-index: 46;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--bar);
    background: var(--ik);
    border-top: 1px solid #1b1f28;
  }
  .bq-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--b-sp2);
    column-gap: var(--b-sp2);
    color: #a9a294;
    font-size: 10.5px;
    font-weight: 600;
  }
  .bq-tabs a:hover {text-decoration: none;}
  .bq-tabs .i {font-size: 17px; line-height: 1;}
  .bq-tabs .mid {color: #231a03;}
  .bq-tabs .mid .i {
    width: var(--b-sz2);
    height: var(--b-sz2);
    margin-block-start: -18px;
    border-radius: 50%;
    background: var(--ac);
    border: 3px solid var(--ik);
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 21px;
  }
}

@media (max-width: 400px) {
  body {font-size: 16px;}
  .w {padding-block: 0px; padding-inline: var(--b-sp16);}
  .bq-band {width: calc(100% - 32px);}
  .bq-sticky {padding-block: var(--b-sp9); padding-inline: var(--b-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) {
  .bq-pop .bx > img {aspect-ratio: 21 / 9;}
  .bq-pop .bd {padding-block-start: var(--b-sp16); padding-inline-end: var(--b-sp17); padding-block-end: var(--b-sp17); padding-inline-start: var(--b-sp17);}
  .bq-pop .bd b {font-size: 19px; margin-block-end: var(--b-sp6);}
  .bq-pop .bd > p {font-size: 13.5px; margin-block-end: var(--b-sp10);}
  .bq-pop .pg .big {font-size: 27px;}
  .bq-pop .pg .lbl {font-size: 14.5px; margin-block-start: var(--b-sp5); margin-inline-end: 0px; margin-block-end: var(--b-sp4); margin-inline-start: 0px;}
  .bq-pop .pg .nt {font-size: 12.5px;}
  .bq-pop .nav {margin-block-start: var(--b-sp12); margin-inline-end: 0px; margin-block-end: var(--b-sp10); margin-inline-start: 0px;}
  .bq-pop .nav button {width: var(--b-sz8); height: var(--b-sz8);}
  .bq-pop .later {margin-block-start: var(--b-sp7); padding-block: var(--b-sp7); padding-inline: var(--b-sp7);}
}

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

@media (prefers-reduced-motion: reduce) {
  * {animation: none !important; transition-property: none !important; transition-duration: 0s !important; transition-timing-function: ease !important; transition-delay: 0s !important; scroll-behavior: auto !important;}
}