/* mbi8official.bet - .mg-* shell.
   A reading surface, not a game wall: ivory paper, a serif-weighted heading scale, a sticky contents
   rail on the left of the prose and callout boxes in the margin. There is no game grid anywhere,
   which is what gives this shell its own character. Hand-written. */

:root{
  --paper:#fdfbf7;
  --paper2:#f5f1e9;
  --ink:#22201d;
  --ink2:#6d665c;
  --rule:#e6e0d4;
  --tc:#b4552a;          /* terracotta, the one accent */
  --tc-dk:#8e3f1c;
  --tc-sf:#fbeee6;
  --ok:#2f7d4f;
  --warn:#9a6b11;
  --r:4px;               /* almost square: a document, not an app */
  --w:1120px;
}

*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.75 Georgia,"Times New Roman","Songti SC","Noto Serif CJK SC",serif;
  padding-bottom:84px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.25;font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1.15em}
.mg-w{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- header */
.mg-head{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30}
.mg-head .row{display:flex;align-items:center;gap:16px;padding:12px 0}
.mg-brand{display:inline-flex;align-items:baseline;gap:9px;min-height:44px;text-decoration:none}
.mg-brand .bm{font:700 25px/44px Georgia,serif;letter-spacing:-.02em;color:var(--tc-dk)}
.mg-brand .bs{font:italic 400 15px/44px Georgia,serif;color:var(--ink2)}
.mg-lng{margin-left:auto;display:flex;gap:3px}
.mg-lng a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;border-radius:var(--r);
  font:600 14px/1 system-ui,sans-serif;color:var(--ink2);text-decoration:none;white-space:nowrap}
.mg-lng a.on{background:var(--tc-sf);color:var(--tc-dk)}
.mg-toggle{display:none;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper2);color:var(--ink);
  font:600 14px/1 system-ui,sans-serif}
.mg-nav{display:flex;flex-wrap:wrap;gap:2px;padding-bottom:8px}
.mg-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font:600 14.5px/1 system-ui,sans-serif;color:var(--ink2);text-decoration:none;border-radius:var(--r);
  white-space:nowrap}
.mg-nav a.on{color:var(--tc-dk);background:var(--tc-sf)}

/* ---------------------------------------------------------------- hero */
.mg-hero{background:var(--paper2);border-bottom:1px solid var(--rule);padding:18px 0 30px}
.mg-crumb{margin:0 0 14px;font:400 14px/1.6 system-ui,sans-serif;color:var(--ink2)}
.mg-crumb a{color:var(--tc-dk);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.mg-hero .in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;
  align-items:center}
.mg-hero .kick{display:inline-block;font:600 12px/1 system-ui,sans-serif;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tc-dk);margin-bottom:12px}
.mg-hero h1{font-size:clamp(28px,4.2vw,42px);margin:0 0 12px;max-width:19ch}
.mg-hero .lede{font-size:18.5px;color:var(--ink2);margin:0;max-width:52ch}
.mg-hero .hgo{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mg-hero .hgo .mg-btn{margin-top:0}
.mg-hero img{border-radius:var(--r);height:auto;aspect-ratio:16/10;object-fit:cover;width:100%;
  border:1px solid var(--rule)}

/* ---------------------------------------------------------------- body layout */
.mg-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:40px;align-items:start;
  padding:34px 0 46px}
.mg-side{position:sticky;top:132px;display:grid;gap:18px;min-width:0}
.mg-prose{min-width:0;max-width:72ch}

.mg-toc{border-left:2px solid var(--tc);padding:2px 0 2px 16px}
.mg-toc b{display:block;font:600 12px/1 system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:10px}
.mg-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.mg-toc li{counter-increment:t;margin-bottom:2px}
.mg-toc a{display:block;padding:7px 0;font:400 15px/1.45 system-ui,sans-serif;color:var(--ink2);
  text-decoration:none}
.mg-toc a::before{content:counter(t) ". ";color:var(--tc)}
.mg-toc a.here{color:var(--tc-dk);font-weight:600}

.mg-cta{border:1px solid var(--rule);background:var(--paper2);border-radius:var(--r);padding:17px 18px}
.mg-cta b{display:block;font-size:17px;margin-bottom:6px}
.mg-cta p{font:400 14.5px/1.6 system-ui,sans-serif;color:var(--ink2);margin:0 0 13px}

.mg-btn{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;
  border-radius:var(--r);font:700 15px/1 system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.mg-btn.p{background:var(--tc);color:#fff}
.mg-btn.o{border:1px solid var(--rule);color:var(--ink);margin-top:8px;background:var(--paper)}

/* ---------------------------------------------------------------- prose */
.mg-prose section{scroll-margin-top:136px}
.mg-prose h2{font-size:26px;margin:34px 0 13px;padding-top:4px}
.mg-prose section:first-child h2{margin-top:0}
.mg-prose a{color:var(--tc-dk);text-decoration:underline;text-underline-offset:3px}

.mg-call{border-left:3px solid var(--warn);background:#fdf7e8;padding:14px 17px;margin:0 0 1.2em;
  border-radius:0 var(--r) var(--r) 0}
.mg-call.good{border-left-color:var(--ok);background:#eef6f0}
.mg-call b{display:block;font-size:16px;margin-bottom:5px}
.mg-call p{margin:0;font-size:16px;color:var(--ink2)}

.mg-check{list-style:none;margin:0 0 1.3em;padding:0}
.mg-check li{position:relative;padding:7px 0 7px 32px;font-size:16.5px;
  border-bottom:1px solid var(--rule)}
.mg-check li:last-child{border-bottom:0}
.mg-check li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--tc)}

.mg-steps{list-style:none;counter-reset:s;margin:0 0 1.3em;padding:0}
.mg-steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.mg-steps li:last-child{border-bottom:0}
.mg-steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;border:1px solid var(--tc);color:var(--tc-dk);
  font:700 14px/1 system-ui,sans-serif}
.mg-steps b{font-size:17px}
.mg-steps span{grid-column:2;font-size:16px;color:var(--ink2)}

.mg-tw{overflow-x:auto;margin:0 0 1.3em}
.mg-tbl{width:100%;border-collapse:collapse;font:400 15.5px/1.55 system-ui,sans-serif;min-width:480px}
.mg-tbl th,.mg-tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top}
.mg-tbl th{font:600 12.5px/1.4 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink2);background:var(--paper2)}
.mg-tbl tr:last-child td{border-bottom:0}

.mg-logos{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.3em}
.chip{display:grid;place-items:center;height:50px;min-width:104px;padding:9px 13px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper2)}
.chip img{max-height:22px;width:auto}
.chip.tx{font:600 13px/1 system-ui,sans-serif;color:var(--ink2)}
/* a light-ink mark is invisible on ivory, so it gets a dark tile instead */
.chip img.inv{filter:none}
.chip:has(img.inv){background:var(--ink);border-color:var(--ink)}

.mg-faq details{border-bottom:1px solid var(--rule)}
.mg-faq summary{cursor:pointer;padding:15px 34px 15px 0;list-style:none;position:relative;
  font-size:17.5px;font-weight:700;min-height:44px}
.mg-faq summary::-webkit-details-marker{display:none}
.mg-faq summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--tc);
  font:700 22px/1 system-ui,sans-serif}
.mg-faq details[open] summary::after{content:"\2212"}
.mg-faq p{margin:0;padding:0 0 16px;color:var(--ink2);font-size:16.5px}

/* ---------------------------------------------------------------- footer */
.mg-foot{background:var(--paper2);border-top:1px solid var(--rule);padding:34px 0 30px}
.mg-foot .top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;
  align-items:start}
.mg-foot .top p{font:400 15px/1.7 system-ui,sans-serif;color:var(--ink2);margin:10px 0 0;max-width:52ch}
.mg-foot nav{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.mg-foot nav a{display:flex;align-items:center;min-height:44px;
  font:400 15px/1.5 system-ui,sans-serif;color:var(--ink);text-decoration:none}
.mg-paylist{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--rule)}
.mg-paylist img{height:28px;width:auto;padding:5px 9px;background:var(--paper);border-radius:var(--r);
  border:1px solid var(--rule)}
.mg-paylist img.inv{background:var(--ink);border-color:var(--ink)}
.mg-cert{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;opacity:.72}
.mg-cert img{height:25px;width:auto}
.mg-small{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font:400 14px/1.65 system-ui,sans-serif;color:var(--ink2)}
.mg-small b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--ink2);font-size:11px;margin-right:10px;vertical-align:middle}

/* ---------------------------------------------------------------- sticky offer bar */
.mg-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:16px;
  padding:9px max(16px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom))}
/* the bar is fixed to both edges, so its text block has to be allowed to shrink or the row
   itself becomes wider than the viewport */
.mg-sticky>div{min-width:0;overflow:hidden}
.mg-sticky b,.mg-sticky span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-sticky .mg-btn{flex:0 0 auto}
.mg-sticky b{display:block;font:700 15px/1.3 system-ui,sans-serif}
.mg-sticky span{display:block;font:400 13px/1.4 system-ui,sans-serif;opacity:.78}
.mg-sticky .mg-btn{margin-left:auto;background:var(--tc);color:#fff;min-height:44px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .mg-hero .in{grid-template-columns:minmax(0,1fr)}
  .mg-hero img{order:-1;aspect-ratio:16/8}
  .mg-body{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:26px}
  .mg-side{position:static;grid-template-columns:minmax(0,1fr)}
  .mg-foot .top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  body{font-size:16.5px;padding-bottom:92px}
  .mg-w{padding:0 16px}
  .mg-toggle{display:inline-flex;padding:0 11px}
  /* brand, menu button and three language chips came to 394px on a 390px screen in Malay */
  .mg-head .row{gap:10px}
  .mg-brand{gap:6px}
  .mg-brand .bm{font-size:22px}
  .mg-brand .bs{font-size:13px}
  .mg-lng a{padding:0 8px;font-size:13px}
  .mg-nav{display:none;flex-direction:column;gap:0;padding-bottom:10px;
    border-top:1px solid var(--rule);margin-top:4px}
  .mg-nav.open{display:flex}
  .mg-nav a{border-bottom:1px solid var(--rule);border-radius:0}
  .mg-head{position:static}
  .mg-side{top:auto}
  /* on a short phone the lede pushed the buttons past the fold, so they move up under the
     heading and the intro paragraph follows them */
  .mg-hero .in>div{display:flex;flex-direction:column}
  .mg-hero .kick{order:1}
  .mg-hero h1{order:2}
  .mg-hero .hgo{order:3;margin:4px 0 16px}
  .mg-hero .lede{order:4}
  .mg-hero img{aspect-ratio:16/7}
  .mg-prose h2{font-size:23px}
  .mg-prose section{scroll-margin-top:16px}
  .mg-foot nav{grid-template-columns:minmax(0,1fr)}
  .mg-sticky{gap:12px;padding-left:14px;padding-right:14px}
  .mg-sticky span{display:none}
  .mg-sticky .mg-btn{padding:0 15px;font-size:14px}
  .chip{min-width:92px;height:46px}
}
@media (max-width:380px){
  .mg-brand .bs{display:none}
  .mg-sticky b{font-size:14px}
}

/* Chinese sets no serif italics and wider glyphs, so the chrome needs its own rules */
html[lang="zh-MY"] .mg-brand .bs{font-style:normal}
html[lang="zh-MY"] .mg-nav a,html[lang="zh-MY"] .mg-lng a,html[lang="zh-MY"] .mg-btn,
html[lang="zh-MY"] .mg-sticky b{white-space:nowrap}

/* === 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/reels.jpg"]{object-position:38.0% 23.1%}
/* === end image focal points === */