/* toto88malaysia.com: .lo-* shell.
   Light long-scroll landing: a document, not a casino floor. Ink #2A1410 on #FDF7EC, warm gold
   #D9A21E for anything that is money or a call to action, deep red #B5121B for section marks and
   ticks. Crisp 8px radii, one soft card shadow, real whitespace.

   House style for this sheet:
     - repeated radii and type sizes are tokens in :root (--px-rad*, --px-fs*); rules name the
       token, never the number;
     - borders are written as width / style / colour longhands per edge, so a rule can restate
       a colour without silently resetting the width above it;
     - flex is flex-grow / flex-shrink / flex-basis, animation is its eight longhands, and
       transition is property / duration / timing-function / delay - no shorthand resets;
     - gap is row-gap plus column-gap and overflow is overflow-x plus overflow-y, because
       several blocks wrap and the two axes stop being equal once they do.

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

:root {
  --pg: #FDF7EC;
  --cd: #ffffff;
  --hl: #EEDFC8;
  --ik: #2A1410;
  --mk: #7A6355;
  --ac: #D9A21E;
  --ac2: #A8780F;
  --tl: #B5121B;
  --tl2: #FBECEC;
  --sh: 0 2px 10px rgba(42, 20, 16, .07);
  --sh2: 0 10px 34px rgba(42, 20, 16, .13);
  --r: 8px;
  --w: 1140px;
  --bar: 58px;

  /* token layer */
  --px-rad1: 14px;
  --px-rad2: 16px;
  --px-rad3: 99px;
  --px-fs1: 12.5px;
  --px-fs2: 13px;
  --px-fs3: 13.5px;
  --px-fs4: 14px;
  --px-fs5: 14.5px;
  --px-fs6: 15px;
  --px-fs7: 15.5px;
  --px-fs8: 16px;
  --px-fs9: 17px;
  --px-fs10: 18px;
  --px-fs11: 19px;
  --px-fs12: 20px;
  --px-fs13: 21px;
  --px-fs14: 22px;
  --px-fs15: 27px;
}

* {box-sizing: border-box;}

html {overflow-x: clip;}

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--pg);
  color: var(--ik);
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-stretch: normal;
  font-size: 16.5px;
  line-height: 1.68;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 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-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 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(--px-fs11);}

p {margin-top: 0; margin-right: 0; margin-bottom: 14px; margin-left: 0;}

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

/* ---------------------------------------------------------------- buttons */
.lo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: 8px;
  column-gap: 8px;
  min-height: 46px;
  padding-top: 0;
  padding-right: 22px;
  padding-bottom: 0;
  padding-left: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--r);
  font-weight: 700;
  font-size: var(--px-fs6);
  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;
}

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

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

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

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

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

.lo-btn.lg {min-height: 54px; padding-top: 0; padding-right: 30px; padding-bottom: 0; padding-left: 30px; font-size: 16.5px;}

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

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

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

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

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

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

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

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

.lo-pills {display: flex; row-gap: 4px; column-gap: 4px; margin-left: auto; flex-wrap: wrap;}

.lo-pills a {
  padding-top: 7px;
  padding-right: 12px;
  padding-bottom: 7px;
  padding-left: 12px;
  border-radius: var(--px-rad3);
  font-size: var(--px-fs4);
  font-weight: 600;
  color: var(--mk);
}

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

.lo-lang {display: flex; row-gap: 2px; column-gap: 2px; border-width: 1px; border-style: solid; border-color: var(--hl); border-radius: var(--px-rad3); padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; background: #fff;}

.lo-lang a {padding-top: 4px; padding-right: 11px; padding-bottom: 4px; padding-left: 11px; border-radius: var(--px-rad3); font-size: var(--px-fs1); font-weight: 700; color: var(--mk); white-space: nowrap; }

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

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

.lo-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(--px-fs11);
  color: var(--ik);
  cursor: pointer;
}

.lo-drawer {display: none; flex-wrap: wrap; row-gap: 7px; column-gap: 7px; padding-top: 0; padding-right: 22px; padding-bottom: 16px; padding-left: 22px;}

.lo-drawer a {
  padding-top: 9px;
  padding-right: 14px;
  padding-bottom: 9px;
  padding-left: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--px-rad3);
  background: #fff;
  font-size: var(--px-fs4);
  font-weight: 600;
  color: var(--ik);
}

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

/* ---------------------------------------------------------------- hero */
.lo-hero {padding-top: 46px; padding-right: 0; padding-bottom: 34px; padding-left: 0;}

.lo-hero.big {padding-top: 54px; padding-right: 0; padding-bottom: 38px; padding-left: 0;}

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

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

.lo-hero .eb {
  display: inline-block;
  margin-bottom: 15px;
  padding-top: 6px;
  padding-right: 13px;
  padding-bottom: 6px;
  padding-left: 13px;
  border-radius: var(--px-rad3);
  background: var(--tl2);
  color: var(--tl);
  font-size: var(--px-fs1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

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

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

.lo-hero .act {display: flex; row-gap: 12px; column-gap: 12px; flex-wrap: wrap; margin-bottom: 22px;}

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

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

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

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

/* ---------------------------------------------------------------- generic section */
.lo-sec {padding-top: 0; padding-right: 0; padding-bottom: 46px; padding-left: 0;}

.lo-sec.pad {padding-top: 46px;}

.lo-sec .sh {margin-bottom: 22px; max-width: 70ch;}

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

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

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

/* ---------------------------------------------------------------- offer strip */
.lo-offers {
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--px-rad1);
  background: #fff;
  box-shadow: var(--sh);
  padding-top: 26px;
  padding-right: 26px;
  padding-bottom: 26px;
  padding-left: 26px;
}

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

.lo-offers .hd h2 {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 260px; min-width: 0;}

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

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

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

.lo-offers .of em {display: block; margin-top: 7px; margin-right: 0; margin-bottom: 6px; margin-left: 0; font-style: normal; font-weight: 600; font-size: var(--px-fs5);}

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

/* ---------------------------------------------------------------- stat strip */
.lo-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: var(--px-rad1);
  overflow-x: hidden;
  overflow-y: hidden;
}

.lo-stats > div {min-width:0;background: #fff; padding-top: 22px; padding-right: 18px; padding-bottom: 22px; padding-left: 18px; text-align: center;}

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

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

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

.lo-kpis > div {min-width:0;
  padding-top: 20px;
  padding-right: 18px;
  padding-bottom: 20px;
  padding-left: 18px;
  border-radius: var(--r);
  background: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: var(--tl);
}

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

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

/* ---------------------------------------------------------------- numbered index */
.lo-index {
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--ac);
  border-radius: var(--r);
  background: #fff;
  padding-top: 22px;
  padding-right: 24px;
  padding-bottom: 22px;
  padding-left: 24px;
  box-shadow: var(--sh);
}

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

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

.lo-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(--px-fs6);
  padding-top: 3px;
  padding-right: 0;
  padding-bottom: 3px;
  padding-left: 0;
}

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

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

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

.lo-tbl td {padding-top: 13px; padding-right: 16px; padding-bottom: 13px; padding-left: 16px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--hl); vertical-align: top;}

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

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

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

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

/* ---------------------------------------------------------------- conversion band */
.lo-cband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 22px;
  column-gap: 22px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-right: 30px;
  padding-bottom: 26px;
  padding-left: 30px;
  border-radius: var(--px-rad1);
  background: linear-gradient(103deg, #F3E3C4, #FBF2DE);
  border-width: 1px;
  border-style: solid;
  border-color: #EEDFC8;
}

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

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

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

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

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

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

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

.lo-cats .cc .bd {padding-top: 18px; padding-right: 20px; padding-bottom: 22px; padding-left: 20px;}

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

.lo-cats .cc p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: var(--px-fs5);}

/* ---------------------------------------------------------------- studio chips */
.lo-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. */
.lo-studios .st {
  display: inline-flex;
  align-items: center;
  row-gap: 9px;
  column-gap: 9px;
  min-width: 0;
  padding-top: 9px;
  padding-right: 15px;
  padding-bottom: 9px;
  padding-left: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--px-rad3);
  background: #F7EEDF;
  font-size: var(--px-fs4);
  font-weight: 600;
}

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

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

/* ---------------------------------------------------------------- timeline */
.lo-rail {position: relative; padding-left: 30px;}

.lo-rail:before {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--hl);
}

.lo-rail .rw {position: relative; padding-bottom: 24px;}

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

.lo-rail .dot {
  position: absolute;
  left: -30px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border-width: 3px;
  border-style: solid;
  border-color: var(--tl);
}

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

.lo-rail .bd em {
  display: inline-block;
  margin-top: 5px;
  margin-right: 0;
  margin-bottom: 7px;
  margin-left: 0;
  padding-top: 3px;
  padding-right: 10px;
  padding-bottom: 3px;
  padding-left: 10px;
  border-radius: var(--px-rad3);
  background: var(--tl2);
  color: var(--tl);
  font-style: normal;
  font-size: var(--px-fs1);
  font-weight: 700;
}

.lo-rail .bd p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: var(--px-fs5);}

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

.lo-tiers .tc {
  position: relative;
  padding-top: 24px;
  padding-right: 22px;
  padding-bottom: 24px;
  padding-left: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--px-rad1);
  background: #fff;
  box-shadow: var(--sh);
}

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

.lo-tiers .rib {
  position: absolute;
  top: -13px;
  left: 22px;
  padding-top: 5px;
  padding-right: 13px;
  padding-bottom: 5px;
  padding-left: 13px;
  border-radius: var(--px-rad3);
  background: var(--ik);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

.lo-tiers .tc .sub {color: var(--mk); font-size: var(--px-fs4); margin-bottom: 14px;}

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

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

.lo-tiers .tc li {position: relative; padding-top: 5px; padding-right: 0; padding-bottom: 5px; padding-left: 24px; font-size: var(--px-fs5); color: var(--mk);}

.lo-tiers .tc li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 11px;
  height: 6px;
  border-left-width: 2.5px;
  border-left-style: solid;
  border-left-color: var(--tl);
  border-bottom-width: 2.5px;
  border-bottom-style: solid;
  border-bottom-color: var(--tl);
  transform: rotate(-45deg);
}

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

.lo-tiers.five .tc {padding-top: 20px; padding-right: 16px; padding-bottom: 20px; padding-left: 16px;}

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

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

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

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

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

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

.lo-split .bd h3 {margin-bottom: 11px; font-size: var(--px-fs14);}

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

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

.lo-members .mb {
  padding-top: 22px;
  padding-right: 22px;
  padding-bottom: 22px;
  padding-left: 22px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--px-rad1);
  background: #fff;
  box-shadow: var(--sh);
}

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

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

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

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

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

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

.lo-members p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: var(--px-fs5);}

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

.lo-prose h2 {margin-top: 34px; margin-right: 0; margin-bottom: 13px; margin-left: 0; scroll-margin-top: 86px;}

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

.lo-prose h3 {margin-top: 22px; margin-right: 0; margin-bottom: 9px; margin-left: 0;}

.lo-prose p {color: #4A3A30;}

.lo-prose ul, .lo-prose ol {margin-top: 0; margin-right: 0; margin-bottom: 14px; margin-left: 0; padding-left: 22px; color: #4A3A30;}

.lo-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. */
.lo-prose .lo-tw, .lo-prose .lo-tiers, .lo-prose .lo-rail {margin-top: 22px; margin-right: 0; margin-bottom: 22px; margin-left: 0;}

.lo-prose .lo-kpis, .lo-prose .lo-steps, .lo-prose .lo-faq {margin-bottom: 22px;}

.lo-prose .lo-kpis + .lo-steps {margin-top: 22px;}

.lo-steps {counter-reset: s; list-style: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; display: grid; row-gap: 11px; column-gap: 11px;}

.lo-steps li {
  counter-increment: s;
  position: relative;
  padding-top: 15px;
  padding-right: 18px;
  padding-bottom: 15px;
  padding-left: 56px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--hl);
  border-radius: var(--r);
  background: #fff;
  font-size: var(--px-fs6);
}

.lo-steps li:before {
  content: counter(s);
  position: absolute;
  left: 17px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ik);
  color: #fff;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: var(--px-fs2);
  font-weight: 700;
}

/* ---------------------------------------------------------------- notice bar */
.lo-notice {
  display: flex;
  row-gap: 14px;
  column-gap: 14px;
  padding-top: 18px;
  padding-right: 20px;
  padding-bottom: 18px;
  padding-left: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #EEDFC8;
  border-radius: var(--r);
  background: #FDF7EC;
  font-size: var(--px-fs5);
  color: #5d4a1d;
}

.lo-notice i {flex-grow: 0; flex-shrink: 0; flex-basis: auto; font-style: normal; font-size: var(--px-fs10);}

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

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

.lo-faq summary {
  padding-top: 15px;
  padding-right: 18px;
  padding-bottom: 15px;
  padding-left: 18px;
  cursor: pointer;
  font-weight: 650;
  font-size: var(--px-fs7);
  list-style: none;
}

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

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

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

.lo-faq p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 18px; padding-bottom: 16px; padding-left: 18px; color: var(--mk); font-size: var(--px-fs6);}

/* ---------------------------------------------------------------- closing band */
.lo-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-top: 0;
  margin-right: auto;
  margin-bottom: 46px;
  margin-left: auto;
  padding-top: 30px;
  padding-right: 34px;
  padding-bottom: 30px;
  padding-left: 34px;
  border-radius: var(--px-rad2);
  background: var(--ik);
  color: #fff;
}

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

/* ---------------------------------------------------------------- footer */
.lo-foot {border-top-width: 1px; border-top-style: solid; border-top-color: var(--hl); background: #fff; padding-top: 46px; padding-right: 0; padding-bottom: 22px; padding-left: 0;}

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

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

.lo-foot .ab p {margin-top: 13px; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mk); font-size: var(--px-fs4);}

.lo-foot .top > div h4 {margin-top: 0; margin-right: 0; margin-bottom: 11px; margin-left: 0; font-size: var(--px-fs2); letter-spacing: .09em; text-transform: uppercase; color: var(--mk);}

.lo-foot .top > div a {display: block; padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 0; color: var(--ik); font-size: var(--px-fs5);}

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

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

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

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

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

.lo-foot .legal p {margin-top: 0; margin-right: 0; margin-bottom: 6px; margin-left: 0; font-size: var(--px-fs3); color: var(--mk);}

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

/* ---------------------------------------------------------------- sticky join bar (desktop) */
.lo-sticky {
  position: fixed;
  left: 50%;
  bottom: 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-top: 12px;
  padding-right: 14px;
  padding-bottom: 12px;
  padding-left: 22px;
  border-radius: var(--px-rad3);
  background: var(--ik);
  color: #fff;
  box-shadow: 0 14px 38px rgba(42, 20, 16, .3);
}

.lo-sticky > span {flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0; font-size: var(--px-fs5); font-weight: 600;}

.lo-sticky .lo-btn {min-height: 42px; padding-top: 0; padding-right: 18px; padding-bottom: 0; padding-left: 18px; font-size: var(--px-fs4);}

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

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

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

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

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

.lo-pop .bx {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--px-rad2);
  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 */
.lo-pop .x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  border-radius: 50%;
  background: rgba(42, 20, 16, .62);
  color: #fff;
  font-size: var(--px-fs12);
  line-height: 1;
  cursor: pointer;
}

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

.lo-pop .bd {padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px;}

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

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

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

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

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

.lo-pop .pg .lbl {display: block; margin-top: 7px; margin-right: 0; margin-bottom: 5px; margin-left: 0; font-weight: 650; font-size: var(--px-fs7);}

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

.lo-pop .nav {display: flex; align-items: center; justify-content: space-between; row-gap: 12px; column-gap: 12px; margin-top: 18px; margin-right: 0; margin-bottom: 16px; margin-left: 0;}

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

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

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

.lo-pop .later {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding-top: 9px;
  padding-right: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  background: none;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  color: var(--mk);
  font-size: var(--px-fs3);
  cursor: pointer;
}

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

@media (max-width: 760px) {
  body {padding-bottom: calc(var(--bar) + 22px);}
  .lo-pills {display: none;}
  .lo-burger {display: block; margin-left: auto;}
  .lo-head .w {row-gap: 10px; column-gap: 10px;}
  .lo-sec {padding-bottom: 34px;}
  .lo-hero {padding-top: 30px; padding-right: 0; padding-bottom: 22px; padding-left: 0;}
  .lo-hero.big {padding-top: 30px; padding-right: 0; padding-bottom: 22px; padding-left: 0;}
  .lo-stats, .lo-kpis {grid-template-columns: 1fr 1fr;}
  .lo-index > div {grid-template-columns: 1fr;}
  .lo-cats, .lo-tiers, .lo-members, .lo-tiers.five {grid-template-columns: 1fr;}
  .lo-offers {padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;}
  .lo-offers .gr {grid-template-columns: 1fr;}
  .lo-band {padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; margin-bottom: 34px;}
  .lo-cband {padding-top: 22px; padding-right: 22px; padding-bottom: 22px; padding-left: 22px;}
  .lo-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 */
  .lo-sticky {
    left: 0;
    right: 0;
    bottom: var(--bar);
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 0;
    padding-top: 10px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
    row-gap: 10px;
    column-gap: 10px;
  }
  .lo-sticky > span {display: none;}
  .lo-sticky .lo-btn {flex-grow: 1; flex-shrink: 1; flex-basis: auto;}

  .lo-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--bar);
    background: var(--ik);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #1d3550;
  }
  .lo-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;
  }
  .lo-tabs a:hover {text-decoration: none;}
  .lo-tabs .i {font-size: var(--px-fs9); line-height: 1;}
  .lo-tabs .mid {color: #2A1410;}
  .lo-tabs .mid .i {
    width: 42px;
    height: 42px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--ac);
    border-width: 3px;
    border-style: solid;
    border-color: var(--ik);
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: var(--px-fs13);
  }
}

@media (max-width: 400px) {
  body {font-size: var(--px-fs8);}
  .w {padding-top: 0; padding-right: 16px; padding-bottom: 0; padding-left: 16px;}
  .lo-band {width: calc(100% - 32px);}
  .lo-sticky {padding-top: 9px; padding-right: 12px; padding-bottom: 9px; padding-left: 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) {
  .lo-pop .bx > img {aspect-ratio: 21 / 9;}
  .lo-pop .bd {padding-top: 16px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px;}
  .lo-pop .bd b {font-size: var(--px-fs11); margin-bottom: 6px;}
  .lo-pop .bd > p {font-size: var(--px-fs3); margin-bottom: 10px;}
  .lo-pop .pg .big {font-size: var(--px-fs15);}
  .lo-pop .pg .lbl {font-size: var(--px-fs5); margin-top: 5px; margin-right: 0; margin-bottom: 4px; margin-left: 0;}
  .lo-pop .pg .nt {font-size: var(--px-fs1);}
  .lo-pop .nav {margin-top: 12px; margin-right: 0; margin-bottom: 10px; margin-left: 0;}
  .lo-pop .nav button {width: 34px; height: 34px;}
  .lo-pop .later {margin-top: 7px; padding-top: 7px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px;}
}

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

@media (prefers-reduced-motion: reduce) {
  * {animation-name: none !important; animation-duration: 0s !important; animation-timing-function: ease !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; transition-property: none !important; transition-duration: 0s !important; transition-timing-function: ease !important; transition-delay: 0s !important; scroll-behavior: auto !important;}
}