/* MYR88 Malaysia landing: deep navy, amber, warm red accent. Namespaced .mm- */
:root{
  --navy:#0c1830; --navy-2:#13274b; --navy-3:#1b3460; --navy-4:#254276;
  --amb:#f3b13b; --amb-2:#c9821a; --amb-3:#ffd990;
  --warm:#d94b35; --warm-2:#a8331f;
  --txt:#eef2fa; --mut:#9db0ce; --line:rgba(243,177,59,.2); --line-2:rgba(157,176,206,.18);
  --ok:#4ec98b;
  --tab:60px;
  --font:Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;
  --disp:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%;scroll-behavior:smooth}
body{margin:0;color:var(--txt);font-family:var(--font);line-height:1.65;background:var(--navy)}
a{color:var(--amb);text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:1.24}
table{border-collapse:collapse;width:100%}
.w{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---------- buttons ---------- */
.mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 18px;border-radius:7px;font-weight:800;font-size:14px;border:1px solid transparent;
  text-align:center;line-height:1.2}
.mm-btn.a{background:linear-gradient(180deg,var(--amb-3),var(--amb));color:#2d1a00}
.mm-btn.o{background:transparent;color:var(--txt);border-color:var(--line-2)}
.mm-btn.r{background:linear-gradient(180deg,var(--warm),var(--warm-2));color:#fff}
.mm-btn.lg{min-height:50px;font-size:15.5px;padding:0 24px}

/* ---------- header ---------- */
.mm-head{position:sticky;top:0;z-index:50;background:rgba(12,24,48,.96);
  border-bottom:1px solid var(--line-2);backdrop-filter:saturate(1.3) blur(6px)}
.mm-head .w{display:flex;align-items:center;gap:16px;padding-top:11px;padding-bottom:11px}
.mm-logo{display:flex;align-items:center;gap:9px;flex:none}
.mm-logo svg{width:34px;height:38px;flex:none}
.mm-logo .wm{display:flex;flex-direction:column;line-height:1}
.mm-logo .wm b{font-family:var(--disp);font-size:23px;letter-spacing:.02em;white-space:nowrap;color:var(--amb)}
.mm-logo .wm small{font-size:8px;letter-spacing:.3em;color:var(--mut);font-weight:700;margin-top:4px;
  white-space:nowrap}
.mm-pills{display:flex;flex:1;flex-wrap:wrap;gap:5px;min-width:0}
.mm-pills a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--mut);border:1px solid transparent;white-space:nowrap}
.mm-pills a:hover{color:var(--txt);border-color:var(--line-2)}
.mm-lang{display:flex;gap:3px;flex:none}
.mm-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:40px;
  border-radius:6px;border:1px solid var(--line-2);color:var(--mut);font-size:11.5px;font-weight:700;
  padding:0 6px;white-space:nowrap}
.mm-lang a.on{background:var(--amb);color:#2d1a00;border-color:transparent}
.mm-burger{display:none;background:var(--navy-3);border:1px solid var(--line-2);color:var(--amb);
  font-size:17px;min-width:44px;min-height:44px;border-radius:7px;cursor:pointer}
.mm-drawer{display:none;flex-wrap:wrap;gap:6px;padding:0 20px 13px}
.mm-open .mm-drawer{display:flex}
.mm-drawer a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:7px;
  background:var(--navy-3);color:var(--txt);font-size:13px;font-weight:700}

/* ---------- hero ---------- */
.mm-hero{padding:26px 0 8px}
.mm-hero.big{padding:34px 0 10px}
.mm-hero .w{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;
  align-items:center}
.mm-hero .bd{display:grid;gap:13px;align-content:start;min-width:0}
.mm-hero .eb{font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amb-2)}
.mm-hero h1{font-family:var(--disp);font-size:38px;line-height:1.16;color:#fff}
.mm-hero.big h1{font-size:44px}
.mm-hero .lead{margin:0;font-size:16.5px;color:var(--mut);max-width:56ch}
.mm-hero .act{display:flex;flex-wrap:wrap;gap:11px}
.mm-hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:3px}
.mm-hero .chips span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:7px;
  background:var(--navy-2);border:1px solid var(--line-2);font-size:11.5px;color:var(--mut);
  font-weight:700;min-height:36px}
.mm-hero .chips i{font-style:normal;color:var(--amb);font-size:13px}
.mm-hero>.w>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  border:1px solid var(--line)}

/* ---------- sections ---------- */
.mm-sec{padding:22px 0}
.mm-sec.pad{padding-top:34px}
.mm-sec .sh{margin-bottom:16px}
.mm-sec .sh h2{font-family:var(--disp);font-size:26px;color:#fff}
.mm-sec .sh p{margin:7px 0 0;color:var(--mut);font-size:14.5px}
.note{display:block;margin-top:11px;font-size:12px;color:var(--mut)}

/* offer strip: the four standing offers, landing page only */
.mm-offers{border-radius:15px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,var(--navy-2),var(--navy-3))}
.mm-offers .hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 20px;background:linear-gradient(110deg,var(--amb-2),var(--warm));
  border-bottom:1px solid var(--line)}
.mm-offers .hd h2{font-family:var(--disp);font-size:21px;color:#fff}
.mm-offers .gr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line)}
.mm-offers .of{display:grid;gap:4px;align-content:start;padding:17px 18px 19px;
  background:var(--navy-2)}
.mm-offers .of b{font-family:var(--disp);font-size:31px;color:var(--amb);line-height:1}
.mm-offers .of em{font-style:normal;font-size:13.5px;font-weight:800;color:var(--txt);
  line-height:1.4}
.mm-offers .of small{font-size:12px;color:var(--mut);line-height:1.5}

/* entry card: the offer, once per visitor, landing page only */
.mm-pop[hidden]{display:none}
.mm-pop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,12,26,.6)}
.mm-pop .bx{position:relative;width:min(420px,100%);max-height:92vh;overflow:auto;
  border-radius:17px;background:var(--navy-2);border:1px solid var(--line);
  box-shadow:0 22px 48px rgba(0,0,0,.45)}
.mm-pop .bx>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mm-pop .x{position:absolute;top:9px;right:9px;width:33px;height:33px;border:0;border-radius:50%;
  cursor:pointer;font-size:21px;line-height:1;color:#0c1830;background:rgba(255,255,255,.88)}
.mm-pop .bd{display:grid;gap:11px;padding:18px 20px 20px}
.mm-pop .bd b{font-family:var(--disp);font-size:23px;color:#fff;line-height:1.25}
.mm-pop .bd p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.6}
.mm-pop ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.mm-pop li{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--txt)}
.mm-pop li b{flex:none;min-width:52px;font-family:var(--disp);font-size:17px;color:var(--amb)}
.mm-pop .later{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--mut);text-decoration:underline;padding:2px}

/* stat row */
.mm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px;
  border-radius:14px;background:linear-gradient(180deg,var(--navy-2),var(--navy));
  border:1px solid var(--line)}
.mm-stats>div{display:grid;gap:3px;text-align:center}
.mm-stats b{font-family:var(--disp);font-size:34px;color:var(--amb);line-height:1}
.mm-stats span{font-size:11.5px;color:var(--mut);line-height:1.35}

/* numbered index: the section list this page actually renders */
.mm-index{padding:17px 18px;border-radius:14px;background:var(--navy-2);border:1px solid var(--line-2)}
.mm-index>b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amb-2);margin-bottom:11px}
.mm-index>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px}
.mm-index a{display:flex;align-items:baseline;gap:9px;font-size:13px;color:var(--txt);
  padding:5px 0;line-height:1.45}
.mm-index em{flex:none;font-style:normal;font-weight:900;font-size:11px;color:var(--amb-2);
  min-width:17px}

/* category cards */
.mm-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.mm-cats .cc{display:grid;border-radius:14px;overflow:hidden;background:var(--navy-2);
  border:1px solid var(--line-2);align-content:start}
.mm-cats .cc img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mm-cats .bd{display:grid;gap:6px;padding:14px 15px 17px}
.mm-cats .bd b{font-size:15.5px;color:var(--amb)}
.mm-cats .bd p{margin:0;font-size:13px;color:var(--mut);line-height:1.55}

/* studio chips */
.mm-studios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.mm-studios .st{display:flex;align-items:center;justify-content:center;gap:9px;min-height:60px;
  min-width:0;padding:10px 12px;border-radius:11px;background:#f3f5f9;border:1px solid var(--line-2)}
.mm-studios .st img{max-height:26px;width:auto;object-fit:contain;
  /* a flex item is min-width:auto by default, so a wide wordmark asked for a 26px height computes
     a 114px width, refuses to shrink and pushes the label outside the chip - which is what took
     the home pages to 324px. The picture stays in its box. */
  min-width:0;max-width:100%;flex:0 1 auto}
.mm-studios .st em{font-style:normal;font-size:12px;font-weight:800;color:#2b3c58}

/* alternating splits */
.sp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:center;
  margin-bottom:22px}
.sp:last-child{margin-bottom:0}
.sp.alt img{order:2}
.sp img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line-2)}
.sp .bd h3{font-family:var(--disp);font-size:22px;color:#fff;margin-bottom:9px}
.sp .bd p{margin:0;color:var(--mut);font-size:14.5px}

/* deposit rail */
.mm-rail{display:grid;gap:0;padding-left:6px}
.mm-rail .rw{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:0 0 20px;
  position:relative}
.mm-rail .rw:last-child{padding-bottom:0}
.mm-rail .rw::before{content:"";position:absolute;left:14px;top:20px;bottom:0;width:2px;
  background:var(--line-2)}
.mm-rail .rw:last-child::before{display:none}
.mm-rail .dot{width:30px;height:30px;border-radius:50%;background:var(--navy-2);
  border:2px solid var(--amb);position:relative;z-index:2}
.mm-rail .dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--amb)}
.mm-rail .bd{display:grid;gap:4px}
.mm-rail .bd b{font-size:15px;color:#fff}
.mm-rail .bd em{font-style:normal;justify-self:start;font-size:11px;font-weight:800;padding:3px 9px;
  border-radius:999px;background:rgba(78,201,139,.14);color:var(--ok)}
.mm-rail .bd p{margin:0;font-size:13.5px;color:var(--mut)}

/* member cards */
.mm-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.mm-members .mb{display:grid;gap:11px;align-content:start;padding:17px;border-radius:14px;
  background:var(--navy-2);border:1px solid var(--line-2)}
.mm-members .hd{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px}
.mm-members .av{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;font-size:20px;background:var(--navy-3)}
.mm-members .hd b{display:block;font-size:13.5px}
.mm-members .hd small{display:block;font-size:11.5px;color:var(--mut)}
.mm-members .rt{color:var(--amb);font-size:12px;letter-spacing:.06em}
.mm-members .mb p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.6}

/* ---------- prose ---------- */
.mm-prose h1{font-family:var(--disp);font-size:34px;color:#fff;margin-bottom:11px}
.mm-prose h2{font-family:var(--disp);font-size:23px;color:#fff;margin:30px 0 10px;scroll-margin-top:86px}
.mm-prose p{margin:0 0 14px;color:#cfd9ea}
.mm-prose .lead{font-size:16.5px;color:var(--mut);margin-bottom:18px}
.mm-prose ul{margin:0 0 16px;padding-left:22px;display:grid;gap:7px;color:#cfd9ea}
.mm-prose .act{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 22px}
.mm-prose .mm-index{margin-bottom:8px}
.mm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px;
  border-radius:14px;background:linear-gradient(180deg,var(--navy-2),var(--navy));
  border:1px solid var(--line)}
.mm-kpis>div{display:grid;gap:3px;text-align:center}
.mm-kpis b{font-family:var(--disp);font-size:30px;color:var(--amb);line-height:1}
.mm-kpis span{font-size:11.5px;color:var(--mut);line-height:1.35}
.mm-steps{counter-reset:s;list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.mm-steps li{counter-increment:s;position:relative;padding:14px 16px 14px 52px;border-radius:11px;
  background:var(--navy-2);border:1px solid var(--line-2);color:#cfd9ea}
.mm-steps li::before{content:counter(s);position:absolute;left:15px;top:13px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900;font-size:13px;
  background:linear-gradient(180deg,var(--amb-3),var(--amb));color:#2d1a00}
.mm-tw{overflow-x:auto;border-radius:12px;border:1px solid var(--line-2);margin:0 0 22px}
.mm-tbl{font-size:13.5px;min-width:440px;background:var(--navy-2)}
.mm-tbl th{background:var(--navy-3);color:var(--amb);text-align:left;padding:11px 14px;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase}
.mm-tbl td{padding:11px 14px;border-top:1px solid var(--line-2);color:#cfd9ea}
.mm-faq{display:grid;gap:9px;margin:0 0 22px}
.mm-faq details{border-radius:11px;border:1px solid var(--line-2);background:var(--navy-2)}
.mm-faq summary{cursor:pointer;padding:14px 16px;font-weight:800;font-size:14.5px;color:var(--amb)}
.mm-faq p{margin:0;padding:0 16px 15px;color:#cfd9ea}
.mm-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  max-width:1100px;margin:14px auto 34px;padding:22px 24px;border-radius:15px;
  background:linear-gradient(110deg,var(--warm-2),var(--warm));width:calc(100% - 40px)}
.mm-band b{font-size:17px;line-height:1.4;max-width:60ch;color:#fff}

/* ---------- footer ---------- */
.mm-foot{background:#081122;border-top:1px solid var(--line-2);margin-top:8px}
.mm-foot .w{padding-top:30px;padding-bottom:26px;display:grid;gap:22px}
.mm-foot .top{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:24px}
.mm-foot .ab{display:grid;gap:11px;align-content:start}
.mm-foot .ab p{margin:0;font-size:12.5px;color:var(--mut);line-height:1.65}
.mm-foot .top>div{display:grid;gap:8px;align-content:start;min-width:0}
.mm-foot h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--amb)}
.mm-foot a{color:var(--mut);font-size:13px}
.mm-foot .pay,.mm-foot .trust{display:flex;flex-wrap:wrap;gap:9px;padding-top:18px;
  border-top:1px solid var(--line-2)}
.mm-foot .pay span,.mm-foot .trust span{display:flex;align-items:center;justify-content:center;
  height:34px;padding:0 11px;border-radius:7px;background:#f3f5f9}
.mm-foot .pay img{max-height:19px;width:auto;object-fit:contain}
.mm-foot .trust img{max-height:21px;width:auto;object-fit:contain}
.mm-foot .legal{display:flex;flex-wrap:wrap;align-items:center;gap:13px;padding-top:17px;
  border-top:1px solid var(--line-2)}
.mm-foot .legal p{margin:0;flex:1;min-width:240px;font-size:12.5px;color:var(--mut)}
.mm-foot .legal small{font-size:12px;color:var(--mut)}
.mm-foot .age{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;
  height:32px;border-radius:50%;border:2px solid var(--amb-2);color:var(--amb);font-weight:900;font-size:11px}

/* ---------- sticky join bar (desktop) + tab bar (phone) ---------- */
.mm-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:11px 18px;background:rgba(8,17,34,.97);
  border-top:1px solid var(--line)}
.mm-sticky.off{display:none}
.mm-sticky span{font-size:13.5px;color:var(--txt);font-weight:700}
.mm-sticky .mm-btn{min-height:40px;padding:0 16px;font-size:13px}
.mm-sticky .x{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;color:var(--mut);font-size:17px;line-height:1;cursor:pointer}
.mm-tabs{display:none}

@media(max-width:1000px){
  .mm-hero .w{grid-template-columns:1fr}
  /* The headline and both buttons come first on a phone. Floating the image above them (order:-1)
     looked better but pushed the CTA off the first screen, which is the one rule this shell is not
     allowed to break. The picture follows the buttons instead. */
  .mm-hero>.w>img{order:2;aspect-ratio:16/9}
  .mm-hero .bd{order:1}
  .mm-hero h1,.mm-hero.big h1{font-size:31px}
  .mm-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-members{grid-template-columns:1fr}
  .mm-foot .top{grid-template-columns:1fr 1fr}
  .sp,.sp.alt{grid-template-columns:1fr}
  .sp img,.sp.alt img{order:-1;aspect-ratio:16/9}
  .mm-pills{display:none}
  .mm-burger{display:inline-flex;align-items:center;justify-content:center}
  .mm-head .w{justify-content:space-between}
}
@media(max-width:760px){
  body{padding-bottom:calc(var(--tab) + 8px)}
  .mm-stats,.mm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));padding:15px}
  .mm-offers .gr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-offers .hd h2{font-size:18px}
  .mm-offers .of b{font-size:26px}
  .mm-stats b{font-size:27px}
  .mm-index>div{grid-template-columns:1fr}
  .mm-studios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-prose h1{font-size:27px}
  .mm-prose h2{font-size:20px;scroll-margin-top:74px}
  .mm-sec .sh h2{font-size:22px}
  .mm-band{margin-bottom:24px;padding:18px}
  .mm-band b{font-size:15.5px}
  /* The sticky bar becomes the tab bar's job on a phone, so only one strip is ever pinned. */
  .mm-sticky{display:none}
  .mm-tabs{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:60;
    grid-template-columns:repeat(5,1fr);height:var(--tab);padding-top:7px;
    background:linear-gradient(180deg,#102347,#081122);border-top:1px solid var(--line)}
  .mm-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--mut);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
    position:relative}
  .mm-tabs a .i{font-size:17px;line-height:1}
  .mm-tabs a.mid{color:var(--amb);justify-content:flex-end;padding-bottom:7px}
  .mm-tabs a.mid .i{position:absolute;top:-19px;width:47px;height:47px;display:flex;
    align-items:center;justify-content:center;border-radius:50%;font-size:24px;color:#2d1a00;
    background:linear-gradient(180deg,var(--amb-3),var(--amb));border:3px solid #081122;
    box-shadow:0 4px 11px rgba(243,177,59,.33)}
}
@media(max-width:520px){
  .w{padding:0 15px}
  .mm-cats{grid-template-columns:1fr}
  .mm-offers .gr{grid-template-columns:1fr}
  .mm-offers .of{padding:14px 16px 15px}
  .mm-hero h1,.mm-hero.big h1{font-size:27px}
  .mm-logo .wm b{font-size:21px}
  .mm-band{width:calc(100% - 30px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.mm-index a.on{color:var(--amb);font-weight:700}

/* A studio chip holds a wide wordmark next to its label, and two of them share a 138px cell on a
   phone - too narrow for a row. Stack the mark over the label rather than cramming them side by
   side; the mark keeps its height and the label wraps under it. */
@media(max-width:560px){
  .mm-studios .st{flex-direction:column;gap:6px;padding:10px 8px;text-align:center}
  .mm-studios .st em{min-width:0;line-height:1.25}
}
/* Small phones. Lockup, three language pills and the burger are all nowrap with their own
   minimums, so at 320 the head row measured 338px and took the document sideways with it - the
   entry modal and the tab bar are fixed and were only reporting that width. Trim the wordmark and
   the pills; the burger keeps its 44px. */
@media(max-width:400px){
  .mm-head .w{gap:8px}
  .mm-logo{gap:6px}
  .mm-logo .wm b{font-size:18px}
  .mm-lang a{min-width:30px;padding:0 4px}
}

/* === image focal points === */
/* The part of the picture that must survive the crop is pinned to the same
   point of the box. */
img[src$="/assets/img/cat-bonus.jpg"]{object-position:32.6% 32.7%}
img[src$="/assets/img/cat-live.jpg"]{object-position:55.2% 36.0%}
img[src$="/assets/img/hero-live.jpg"]{object-position:34.3% 26.9%}
img[src$="/assets/img/hero-login.jpg"]{object-position:63.3% 48.2%}
img[src$="/assets/img/hero-main.jpg"]{object-position:58.3% 37.3%}
img[src$="/assets/img/hero-withdraw.jpg"]{object-position:64.2% 27.0%}
img[src$="/assets/img/split-check.jpg"]{object-position:53.3% 34.5%}
img[src$="/assets/img/split-wallet.jpg"]{object-position:43.7% 29.4%}
/* === end image focal points === */