/* WINMY Malaysia shell (.wm-*) - brand-protection / account-help info site. No game grid and no
   promo carousel: the page is a documentation-style column of checklist hero, stat bar, sign-in
   split, method cards, security rows, support rows and a notice bar. Lighter slate-teal base with
   jade + ice-blue accents and no gold. Mobile-first. */
:root{
  --bg:#0b2124;--bg2:#0f2a2d;--panel:#143437;--panel2:#1b4245;--line:#24504f;
  --jade:#3fd0a4;--jade2:#22ab83;--jaded:#157a5f;--ice:#7fd4e8;--ice2:#4aa8c4;
  --warn:#e8a04a;--ink:#e6f4f1;--mut:#9cb8b6;--rad:10px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em}
.w,.wm-main{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------------- header: compact, no inline login fields ---------------- */
.wm-head{position:sticky;top:0;z-index:50;background:rgba(9,29,31,.96);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px)}
.wm-bar{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:11px 16px}
.wm-burger{display:none;background:none;border:0;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;padding:8px 11px}
.wm-logo{flex:0 0 auto;display:flex;align-items:center;gap:9px}
.wm-logo .mk{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--jade),var(--jaded));color:#042019;font-weight:900;font-size:15px}
.wm-logo .wm{font-weight:800;font-size:20px;letter-spacing:.2px;white-space:nowrap;color:var(--ink)}
.wm-logo .wm b{font-weight:800;color:var(--jade)}
.wm-topnav{display:flex;gap:2px;margin-left:16px}
.wm-topnav a{padding:9px 11px;border-radius:8px;font-size:14px;color:var(--mut);white-space:nowrap}
.wm-topnav a:hover{color:var(--ink)}
.wm-topnav a.on{color:var(--jade);font-weight:700}
.wm-act{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
/* the header CTA carries a long label on desktop and a short one once the bar gets tight */
.wm-act .sm{display:none}
.wm-lang{display:flex;gap:2px;align-items:center}
.wm-lang a{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:7px;
  font-size:13px;color:var(--mut);white-space:nowrap}
.wm-lang a.on{color:var(--ink);font-weight:800;background:var(--panel)}
.wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;
  padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.wm-btn-jade{background:linear-gradient(180deg,var(--jade),var(--jade2));color:#042019}
.wm-btn-out{background:transparent;color:var(--ink);border-color:var(--line)}
.wm-btn-out:hover{border-color:var(--jade2)}
.wm-btn-lg{padding:13px 24px;font-size:15px}
.wm-drawer{display:none}

/* breadcrumb strip */
.wm-crumb{border-bottom:1px solid var(--line);background:var(--bg2)}
.wm-crumb div{max-width:1120px;margin:0 auto;padding:2px 16px;font-size:13px;color:var(--mut);
  display:flex;align-items:center}
.wm-crumb a{display:inline-flex;align-items:center;min-height:44px;padding-right:3px;color:var(--jade)}
.wm-crumb span{margin:0 7px;opacity:.5}

/* ---------------- hero: checklist + framed image ---------------- */
.wm-main{padding-top:30px;padding-bottom:44px}
.wm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:38px;align-items:center;
  margin-bottom:34px}
.wm-hero .eb{display:inline-block;color:var(--ice);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:1.4px}
.wm-hero h1{font-size:clamp(27px,4vw,38px);margin:.35em 0 .4em}
.wm-hero .lead{color:var(--mut);margin:0 0 20px;font-size:17px}
.wm-ticks{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.wm-ticks li{position:relative;padding-left:26px;font-size:14px;color:var(--ink)}
.wm-ticks li::before{content:"";position:absolute;left:0;top:.45em;width:15px;height:15px;border-radius:50%;
  background:var(--jaded);box-shadow:inset 0 0 0 1px var(--jade)}
.wm-ticks li::after{content:"";position:absolute;left:5px;top:.72em;width:4px;height:7px;
  border:solid var(--jade);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wm-hero .act{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.wm-frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.wm-frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* ---------------- single-bar stat strip ---------------- */
.wm-statbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:linear-gradient(90deg,#123c3a,#0f2f31);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin:0 0 38px}
.wm-statbar div{padding:16px 14px;text-align:center;min-width:0;border-left:1px solid var(--line)}
.wm-statbar div:first-child{border-left:0}
.wm-statbar b{display:block;font-size:22px;color:var(--jade);font-weight:800}
.wm-statbar span{font-size:12px;color:var(--mut)}

/* ---------------- section head: left rule, documentation style ---------------- */
.wm-sh{margin:40px 0 18px;border-left:3px solid var(--jade);padding-left:14px}
.wm-sh h2{font-size:22px;margin:0 0 4px}
.wm-sh p{margin:0;color:var(--mut);font-size:14px}

/* ---------------- sign-in split ---------------- */
.wm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:30px;align-items:start}
.wm-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.wm-steps li{position:relative;padding:0 0 18px 44px;counter-increment:s;border-left:1px solid var(--line);
  margin-left:14px}
.wm-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.wm-steps li::before{content:counter(s);position:absolute;left:-14px;top:-2px;width:28px;height:28px;
  border-radius:50%;background:var(--panel);border:1px solid var(--jade2);color:var(--jade);
  display:grid;place-items:center;font-size:13px;font-weight:800}
.wm-steps h3{font-size:15px;margin:0 0 3px}
.wm-steps p{margin:0;font-size:14px;color:var(--mut)}
.wm-form{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.wm-form h3{font-size:17px;margin:0 0 4px}
.wm-form .sub{font-size:13px;color:var(--mut);margin:0 0 16px}
.wm-form label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin:0 0 5px;letter-spacing:.3px}
.wm-form .fake{display:block;width:100%;background:#0a2224;border:1px solid var(--line);border-radius:8px;
  padding:12px 13px;color:#53716f;font-size:14px;margin-bottom:14px}
.wm-form .go{display:block;text-align:center;background:linear-gradient(180deg,var(--jade),var(--jade2));
  color:#042019;font-weight:800;padding:13px;border-radius:9px;font-size:15px}
.wm-form .note{margin:13px 0 0;font-size:12px;color:var(--mut);text-align:center}

/* ---------------- payment / method cards ---------------- */
.wm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wm-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:18px;min-width:0}
.wm-card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:var(--panel2);border:1px solid var(--line);margin-bottom:11px}
.wm-card h3{font-size:15px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-card p{margin:0;font-size:13px;color:var(--mut)}
.wm-card .chip{display:inline-block;margin-top:10px;background:rgba(63,208,164,.14);color:var(--jade);
  border:1px solid var(--jade2);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap}

/* ---------------- security: bordered rows + gradient CTA card ---------------- */
.wm-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:30px;align-items:start}
.wm-rows{display:grid;gap:11px}
.wm-row{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--ice2);
  border-radius:var(--rad);padding:14px 16px;min-width:0}
.wm-row h3{font-size:14px;margin:0 0 3px}
.wm-row p{margin:0;font-size:13px;color:var(--mut)}
.wm-sidecta{background:linear-gradient(160deg,#17504a,#0f2f31);border:1px solid var(--jade2);
  border-radius:14px;padding:22px}
.wm-sidecta h3{font-size:17px;margin:0 0 10px}
.wm-sidecta ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.wm-sidecta li{position:relative;padding-left:22px;font-size:13px;color:var(--ink)}
.wm-sidecta li::before{content:"";position:absolute;left:2px;top:.5em;width:5px;height:9px;
  border:solid var(--jade);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wm-sidecta .go{display:block;text-align:center;background:linear-gradient(180deg,var(--jade),var(--jade2));
  color:#042019;font-weight:800;padding:12px;border-radius:9px}

/* ---------------- support channel rows (divided) ---------------- */
.wm-chan{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wm-chan li{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-top:1px solid var(--line);
  background:var(--panel)}
.wm-chan li:first-child{border-top:0}
.wm-chan{list-style:none;margin:0;padding:0}
.wm-chan .ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;background:var(--panel2);border:1px solid var(--line)}
.wm-chan .tx{min-width:0}
.wm-chan h3{font-size:15px;margin:0 0 2px}
.wm-chan p{margin:0;font-size:13px;color:var(--mut)}
.wm-chan .meta{margin-left:auto;flex:0 0 auto;font-size:12px;color:var(--jade);font-weight:700;white-space:nowrap}

/* ---------------- notice bar ---------------- */
.wm-notice{display:flex;align-items:flex-start;gap:13px;background:rgba(232,160,74,.08);
  border:1px solid rgba(232,160,74,.4);border-radius:12px;padding:16px 18px;margin:34px 0}
.wm-notice .ic{flex:0 0 auto;color:var(--warn);font-size:19px;line-height:1.3}
.wm-notice p{margin:0;font-size:14px;color:var(--ink)}
.wm-notice a{color:var(--warn);font-weight:700;text-decoration:underline}

/* ---------------- prose / tables / faq ---------------- */
.wm-prose{max-width:860px;margin:40px auto 0}
.wm-prose h1{font-size:30px}
.wm-prose h2{font-size:21px;margin-top:1.6em;color:#fff}
.wm-prose p{color:#cde6e2}
.wm-prose .lead{font-size:18px;color:var(--mut)}
.wm-prose a{color:var(--jade);font-weight:600}
.wm-prose a:hover{text-decoration:underline}
/* buttons inside the article keep their own label colour: the rule above is more specific than
   .wm-btn-* and would otherwise paint jade text onto a jade button */
.wm-prose a.wm-btn-jade{color:#042019}
.wm-prose a.wm-btn-out{color:var(--ink)}
.wm-prose a.wm-btn:hover{text-decoration:none}
.wm-tw{overflow-x:auto;margin:18px 0}
.wm-tbl{width:100%;border-collapse:collapse;min-width:460px}
.wm-tbl th,.wm-tbl td{border:1px solid var(--line);padding:11px 13px;text-align:left;font-size:14px}
.wm-tbl th{background:var(--panel2);color:#fff;font-size:13px;letter-spacing:.3px}
.wm-tbl td{color:#cde6e2}
.wm-tbl tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.wm-faq{margin:10px 0}
.wm-faq details{border-bottom:1px solid var(--line);padding:2px 0}
.wm-faq summary{cursor:pointer;font-weight:700;padding:15px 30px 15px 0;list-style:none;position:relative}
.wm-faq summary::-webkit-details-marker{display:none}
.wm-faq summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--jade);font-weight:800;font-size:19px}
.wm-faq details[open] summary::after{content:"\2212"}
.wm-faq p{margin:0 0 15px;color:var(--mut);font-size:15px}
.wm-closing{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(100deg,#17504a,#0f2f31);border:1px solid var(--jade2);border-radius:14px;
  padding:24px 26px;margin:34px 0 0}
.wm-closing b{font-size:19px}
.wm-closing span{display:block;color:var(--mut);font-size:14px;font-weight:400;margin-top:3px}

/* ---------------- footer ---------------- */
.wm-foot{background:#081c1e;border-top:1px solid var(--line);margin-top:46px;padding:36px 0 24px}
.wm-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.wm-fbrand p{color:var(--mut);font-size:14px;max-width:42ch;margin:12px 0}
.wm-foot h4{color:#fff;font-size:14px;margin:0 0 10px;letter-spacing:.3px}
.wm-foot .cols a{display:block;color:var(--mut);font-size:14px;padding:4px 0}
.wm-foot .cols a:hover{color:var(--jade)}
.soc{display:flex;gap:10px;margin-top:10px}
.soc a{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.soc a:hover{background:var(--panel2);border-color:var(--jade2)}
.soc svg{width:21px;height:21px;fill:var(--jade);display:block}
.pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.pay b{color:#fff;font-size:14px;margin-right:4px}
.pay span{background:#fff;border-radius:7px;padding:5px 8px;display:inline-flex}
.pay img{height:22px;width:auto;object-fit:contain}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.trust .chip{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 8px;display:inline-flex}
.trust .chip img{height:22px;width:auto}
.legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mut);font-size:13px;
  border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.legal .age{display:inline-block;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  font-weight:800;border-radius:6px;padding:1px 7px;margin-right:8px}

/* bottom tab bar + sticky cta (mobile) */
.wm-nav,.wm-scta{display:none}

/* ---------------- responsive ---------------- */
@media(max-width:1040px){
  .wm-topnav{display:none}
}
@media(max-width:900px){
  .wm-hero{grid-template-columns:1fr;gap:26px}
  .wm-split,.wm-sec{grid-template-columns:1fr}
  .wm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wm-foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .wm-burger{display:block;padding:10px 12px}
  .wm-bar{gap:6px;padding:9px 12px}
  .wm-logo{margin-right:auto;min-width:0}
  .wm-logo .wm{font-size:18px;overflow:hidden;text-overflow:ellipsis}
  .wm-lang{display:none}
  .wm-act .lg{display:none}
  .wm-act .sm{display:inline}
  .wm-act .wm-btn{padding:10px 14px;font-size:13px}
  .wm-statbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wm-statbar div:nth-child(3){border-left:0}
  .wm-statbar div:nth-child(n+3){border-top:1px solid var(--line)}
  .wm-ticks{grid-template-columns:1fr}
  .wm-chan li{flex-wrap:wrap}
  .wm-chan .meta{margin-left:52px}
  .wm-drawer{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;background:#0a2124;border-top:1px solid var(--line)}
  .wm-drawer a{padding:9px 12px;border-radius:8px;font-size:13px;font-weight:700;color:var(--mut);background:var(--panel)}
  .wm-drawer a.on{color:#042019;background:var(--jade)}
  html:not(.wm-open) .wm-drawer{display:none}
  .wm-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#0a1f21;border-top:1px solid var(--line)}
  .wm-nav a{flex:1;text-align:center;padding:8px 2px 7px;font-size:11px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px}
  .wm-nav a.on{color:var(--jade)}
  .wm-nav a.cta{color:var(--ice)}
  .wm-nav .i{font-size:18px}
  .wm-scta{display:block;position:fixed;left:0;right:0;bottom:52px;z-index:60;padding:8px 12px;
    background:linear-gradient(180deg,rgba(10,31,33,0),rgba(10,31,33,.95) 40%)}
  .wm-scta a{display:block;text-align:center;background:linear-gradient(180deg,var(--jade),var(--jade2));
    color:#042019;font-weight:800;padding:13px;border-radius:10px;font-size:16px}
  .wm-foot{padding-bottom:120px}
}
@media(max-width:420px){
  .wm-cards{grid-template-columns:1fr}
}

/* === 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/support-team.jpg"]{object-position:55.3% 33.3%}
/* === end image focal points === */

/* === hero CTA in the thumb zone === */
/* The chips and stat rows used to sit between the lead and the buttons and
   pushed them under the sticky bar on a 667-tall screen. */
@media(max-width:560px){
  div:has(> .act){display:flex;flex-direction:column}
  div:has(> .act) > *:nth-child(1){order:10}
  div:has(> .act) > *:nth-child(2){order:20}
  div:has(> .act) > *:nth-child(3){order:30}
  div:has(> .act) > *:nth-child(4){order:40}
  div:has(> .act) > *:nth-child(5){order:35}
}
/* === end hero CTA === */