/* eu9official.bet — .eb-* shell.
   Light long-scroll landing: a document, not a casino floor. Ink #14332A on a warm bone page,
   copper #B4703A for anything that is money or a call to action, deep green #15573A for section
   marks and ticks. Crisp 8px radii, one soft card shadow, real whitespace.

   House style for this sheet:
     - every repeated number is a token in :root — the step scale, the four radii, the four
       shadows, the type stack. A rule names the token, never the number;
     - box properties are written one side at a time (padding-block / padding-inline,
       margin-block / margin-inline, border-width / -style / -color), so a modifier can reset a
       single edge without restating the other three and without a shorthand quietly wiping a
       value set above it;
     - flow offsets use the logical names (inset-block-start, inset-inline-start,
       padding-inline-start) so the chrome reads the same way the text does;
     - gap is always row-gap plus column-gap, because several blocks wrap and the two axes do
       not stay equal once they do.

   Step scale: 4 / 8 / 14 / 22 / 34 / 46 / 54 / 86. Nothing touches — every block carries its
   own bottom gap. */

:root {
  /* ink and paper */
  --pg: #f6f4ec;
  --cd: #fffdf8;
  --hl: #e3ded0;
  --ik: #14332a;
  --mk: #5f6f64;
  --ac: #b4703a;
  --ac2: #8c5326;
  --tl: #15573a;
  --tl2: #e6efe8;

  /* lift */
  --sh: 0 2px 10px rgba(20, 51, 42, .08);
  --sh2: 0 10px 34px rgba(20, 51, 42, .14);
  --sh3: 0 14px 38px rgba(20, 51, 42, .3);
  --sh4: 0 26px 70px rgba(12, 34, 27, .4);

  /* corners */
  --r: 8px;
  --rc: 14px;
  --rl: 16px;
  --pill: 99px;
  --disc: 50%;

  /* step scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 14px;
  --s4: 22px;
  --s5: 34px;
  --s6: 46px;
  --s7: 54px;
  --s8: 86px;

  /* frame */
  --w: 1140px;
  --bar: 58px;
  --ff: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  padding-block-end: var(--s8);
  background-color: var(--pg);
  color: var(--ik);
  font-family: var(--ff);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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: 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: 19px; }

p { margin: 0 0 var(--s3); }

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

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

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

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

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

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

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

.eb-btn.lg { min-height: var(--s7); padding-inline: 30px; font-size: 16.5px; }

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

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

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

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

.eb-logo svg { width: 36px; height: 36px; flex-grow: 0; flex-shrink: 0; flex-basis: auto; }

.eb-logo .wm { display: flex; flex-flow: column nowrap; line-height: 1.04; min-width: 0; }

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

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

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

.eb-pills a {
  padding-block: 7px;
  padding-inline: 12px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--mk);
}

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

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

.eb-lang a { padding-block: var(--s1); padding-inline: 11px; border-radius: var(--pill); font-size: 12.5px; font-weight: 700; color: var(--mk); }

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

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

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

.eb-drawer { display: none; flex-wrap: wrap; row-gap: 7px; column-gap: 7px; padding-block: 0 16px; padding-inline: var(--s4); }

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

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

/* ---------------------------------------------------------------- hero */
.eb-hero { padding: var(--s6) 0 var(--s5); }

.eb-hero.big { padding: var(--s7) 0 38px; }

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

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

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

.eb-hero h1 { margin-bottom: 15px; }

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

.eb-hero .act { display: flex; row-gap: 12px; column-gap: 12px; flex-wrap: wrap; margin-block-end: var(--s4); }

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

.eb-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: var(--pill);
  background-color: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk);
}

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

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

/* ---------------------------------------------------------------- generic section */
.eb-sec { padding: 0 0 var(--s6); }

.eb-sec.pad { padding-top: var(--s6); }

.eb-sec .sh { margin-block-end: var(--s4); max-width: 70ch; }

.eb-sec .sh h2 { margin-bottom: 9px; }

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

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

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

.eb-offers .hd { display: flex; align-items: center; row-gap: 18px; column-gap: 18px; flex-wrap: wrap; margin-block-end: var(--s4); }

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

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

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

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

.eb-offers .of em { display: block; margin-block: 7px 6px; margin-inline: 0; font-style: normal; font-weight: 600; font-size: 14.5px; }

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

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

.eb-stats > div {min-width:0; background-color: #fff; padding-block: var(--s4); padding-inline: 18px; text-align: center; }

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

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

.eb-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--s3); column-gap: var(--s3); }

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

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

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

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

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

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

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

.eb-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 */
.eb-tw {
  overflow-x: auto;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--rc);
  background-color: #fff;
  box-shadow: var(--sh);
}

.eb-tbl { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }

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

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

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

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

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

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

/* ---------------------------------------------------------------- conversion band */
.eb-cband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--s4);
  column-gap: var(--s4);
  flex-wrap: wrap;
  padding-block: 26px;
  padding-inline: 30px;
  border-radius: var(--rc);
  background-image: linear-gradient(103deg, #f6e4bd, #f9eedb);
  border-width: 1px;
  border-style: solid;
  border-color: #e7c9a8;
}

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

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

.eb-cband small { display: block; margin-block-start: 6px; color: #6b5420; font-size: 14px; }

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

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

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

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

.eb-cats .cc .bd { padding: 18px 20px var(--s4); }

.eb-cats .cc b { display: block; margin-block-end: 7px; font-size: 18px; }

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

/* ---------------------------------------------------------------- studio chips */
.eb-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. */
.eb-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: var(--pill);
  background-color: #efece1;
  font-size: 14px;
  font-weight: 600;
}

.eb-studios .st img { min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; max-height: 20px; width: auto; }

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

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

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

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

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

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

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

.eb-rail .bd em {
  display: inline-block;
  margin-block: 5px 7px;
  margin-inline: 0;
  padding-block: 3px;
  padding-inline: 10px;
  border-radius: var(--pill);
  background-color: var(--tl2);
  color: var(--tl);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
}

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

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

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

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

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

.eb-tiers .tc h3 { margin-bottom: 5px; }

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

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

.eb-tiers .tc ul { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; }

.eb-tiers .tc li { position: relative; padding-block: 5px; padding-inline: 24px 0; font-size: 14.5px; color: var(--mk); }

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

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

.eb-tiers.five .tc { padding: 20px 16px; }

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

/* ---------------------------------------------------------------- splits */
.eb-split { display: grid; grid-template-columns: 1fr 1fr; row-gap: 38px; column-gap: 38px; align-items: center; margin-block-end: var(--s5); }

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

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

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

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

.eb-split .bd h3 { margin-block-end: 11px; font-size: 22px; }

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

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

.eb-members .mb {
  padding: var(--s4);
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--rc);
  background-color: #fff;
  box-shadow: var(--sh);
}

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

.eb-members .av {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 42px;
  height: 42px;
  border-radius: var(--disc);
  background-color: var(--tl2);
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 21px;
}

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

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

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

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

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

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

.eb-prose h2 { margin-block: var(--s5) 13px; margin-inline: 0; scroll-margin-block-start: var(--s8); }

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

.eb-prose h3 { margin: var(--s4) 0 9px; }

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

.eb-prose ul, .eb-prose ol { margin-block: 0 var(--s3); margin-inline: 0; padding-inline-start: var(--s4); color: #27463a; }

.eb-prose li { margin-bottom: 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. */
.eb-prose .eb-tw, .eb-prose .eb-tiers, .eb-prose .eb-rail { margin: var(--s4) 0; }

.eb-prose .eb-kpis, .eb-prose .eb-steps, .eb-prose .eb-faq { margin-bottom: var(--s4); }

.eb-prose .eb-kpis + .eb-steps { margin-top: var(--s4); }

.eb-steps { counter-reset: s; list-style-type: none; list-style-position: outside; margin: 0; padding: 0; display: grid; row-gap: 11px; column-gap: 11px; }

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

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

/* ---------------------------------------------------------------- notice bar */
.eb-notice {
  display: flex;
  row-gap: var(--s3);
  column-gap: var(--s3);
  padding-block: 18px;
  padding-inline: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #e7c9a8;
  border-radius: var(--r);
  background-color: #fcf6e9;
  font-size: 14.5px;
  color: #5d4a1d;
}

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

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

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

.eb-faq summary {
  padding-block: 15px;
  padding-inline: 18px;
  cursor: pointer;
  font-weight: 650;
  font-size: 15.5px;
  list-style-type: none;
  list-style-position: outside;
}

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

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

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

.eb-faq p { margin: 0; padding-block: 0 16px; padding-inline: 18px; color: var(--mk); font-size: 15px; }

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

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

/* ---------------------------------------------------------------- footer */
.eb-foot { border-block-start: 1px solid var(--hl); background-color: #fff; padding: var(--s6) 0 var(--s4); }

.eb-foot .top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; row-gap: 30px; column-gap: 30px; margin-block-end: var(--s5); }

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

.eb-foot .ab p { margin-block: 13px 0; margin-inline: 0; color: var(--mk); font-size: 14px; }

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

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

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

.eb-foot .pay span, .eb-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-color: #efece1;
}

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

.eb-foot .legal { display: flex; row-gap: 16px; column-gap: 16px; align-items: flex-start; border-block-start: 1px solid var(--hl); padding-block-start: var(--s4); }

.eb-foot .age {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 40px;
  height: 40px;
  border-radius: var(--disc);
  border-width: 2px;
  border-style: solid;
  border-color: var(--ik);
  display: grid;
  align-items: center;
  justify-items: center;
  font-weight: 800;
  font-size: 13.5px;
}

.eb-foot .legal p { margin-block: 0 6px; margin-inline: 0; font-size: 13.5px; color: var(--mk); }

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

/* ---------------------------------------------------------------- sticky join bar (desktop) */
.eb-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(--s3);
  column-gap: var(--s3);
  width: calc(100% - 44px);
  max-width: 720px;
  padding-block: 12px;
  padding-inline: var(--s4) 14px;
  border-radius: var(--pill);
  background-color: var(--ik);
  color: #fff;
  box-shadow: var(--sh3);
}

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

.eb-sticky .eb-btn { min-height: 42px; padding-block: 0; padding-inline: 18px; font-size: 14px; }

.eb-sticky .x {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  background-color: transparent;
  background-image: none;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  color: #7f93ad;
  font-size: 21px;
  cursor: pointer;
  padding-block: 0;
  padding-inline: var(--s1);
}

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

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

/* ---------------------------------------------------------------- entry modal */
.eb-pop {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 60;
  background-color: rgba(12, 34, 27, .62);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 18px;
}

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

.eb-pop .bx {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--rl);
  background-color: #fff;
  box-shadow: var(--sh4);
}

/* 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 */
.eb-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: var(--disc);
  background-color: rgba(20, 51, 42, .62);
  background-image: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

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

.eb-pop .bd { padding: 24px; }

.eb-pop .bd b { display: block; font-size: 22px; margin-block-end: 9px; }

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

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

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

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

.eb-pop .pg .lbl { display: block; margin-block: 7px 5px; margin-inline: 0; font-weight: 650; font-size: 15.5px; }

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

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

.eb-pop .nav button {
  width: 38px;
  height: 38px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--disc);
  background-color: #fff;
  background-image: none;
  font-size: 16px;
  color: var(--ik);
  cursor: pointer;
}

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

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

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

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

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

  /* the thumb-zone CTA: a pinned bar, not a button at the top of the screen */
  .eb-sticky {
    inset-inline: 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;
  }
  .eb-sticky > span { display: none; }
  .eb-sticky .eb-btn { flex: 1 1 auto; }

  .eb-tabs {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--bar);
    background-color: var(--ik);
    border-block-start: 1px solid #1d3550;
  }
  .eb-tabs a {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    row-gap: 2px;
    column-gap: 2px;
    color: #9fb2c8;
    font-size: 10.5px;
    font-weight: 600;
  }
  .eb-tabs a:hover { text-decoration: none; }
  .eb-tabs .i { font-size: 17px; line-height: 1; }
  .eb-tabs .mid { color: #1c1105; }
  .eb-tabs .mid .i {
    width: 42px;
    height: 42px;
    margin-block-start: -18px;
    border-radius: var(--disc);
    background-color: var(--ac);
    border-width: 3px;
    border-style: solid;
    border-color: var(--ik);
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 21px;
  }
}

@media (max-width: 400px) {
  body { font-size: 16px; }
  .w { padding: 0 16px; }
  /* A KPI figure like RM3,160,000 is 164px at 27px type and has nowhere to break, so two
     columns forced the page 30px past a 320px screen. One column has room for the longest
     figure on any page here. */
  .eb-stats, .eb-kpis { grid-template-columns: 1fr; }
  .eb-band { width: calc(100% - 32px); }
  .eb-sticky { padding: 9px 12px; }
}

/* 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) {
  .eb-pop .bx > img { aspect-ratio: 21 / 9; }
  .eb-pop .bd { padding: 16px 18px 18px; }
  .eb-pop .bd b { font-size: 19px; margin-block-end: 6px; }
  .eb-pop .bd > p { font-size: 13.5px; margin-block-end: 10px; }
  .eb-pop .pg .big { font-size: 27px; }
  .eb-pop .pg .lbl { font-size: 14.5px; margin-block: 5px var(--s1); margin-inline: 0; }
  .eb-pop .pg .nt { font-size: 12.5px; }
  .eb-pop .nav { margin: 12px 0 10px; }
  .eb-pop .nav button { width: 34px; height: 34px; }
  .eb-pop .later { margin-block-start: 7px; padding: 7px; }
}

@media (max-height: 560px) {
  .eb-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. */
.eb-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-block: var(--s1);
  padding-inline: 11px;
  white-space: nowrap;
}

.eb-lang { padding: 2px; }

.eb-sticky .x,
.eb-pop .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}