/* idompetmalaysia.com — brand-protection guide shell.
   Slate near-black with emerald, a slate shell on its own system.
   Genre is an explanatory guide, not a game floor: a readable prose measure, quiet bordered cards and
   no neon. Hand-written; the builder never regenerates this file. */

:root{
  --slate:#020617; --slate2:#060d20; --panel:#0b1324; --line:#17213a;
  --em:#22c55e; --em2:#10b981; --mint:#86efac; --deep:#022c22; --deep2:#0d2e1e;
  --ink:#e2e8f0; --ink2:#cbd5e1; --mute:#94a3b8; --faint:#64748b; --wash:#f0fdf4;
  --rad:12px; --bar:58px; --wrap:1180px; --prose:72ch;
}

*,*::before,*::after{box-sizing:border-box}
/* clip, not hidden: iOS ignores body-only overflow-x and scrolls anyway */
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--slate);color:var(--ink);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  overflow-x:clip}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(26px,4.4vw,41px)}
h2{font-size:clamp(21px,2.8vw,28px)}
h3{font-size:clamp(17px,1.9vw,20px)}
p{margin:0 0 1.05em}
a{color:var(--mint);text-decoration:none}
a:hover{text-decoration:underline}
/* width/height attrs are injected for CLS; without this they beat the CSS and distort the art */
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- header */
.ip-head{position:sticky;top:0;z-index:60;background:rgba(2,6,23,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ip-bar{max-width:var(--wrap);margin:0 auto;padding:0 16px;height:var(--bar);
  display:flex;align-items:center;gap:14px}
.ip-burger{display:none;width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink);font-size:17px;line-height:1;cursor:pointer}
.ip-logo{display:flex;align-items:center;gap:9px;flex:0 0 auto;color:var(--ink)}
.ip-logo:hover{text-decoration:none}
.ip-logo .mk{width:30px;height:30px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--em),var(--em2));
  display:grid;place-items:center;color:#031b10;font-weight:800;font-size:15px}
.ip-logo .mk::before{content:"i"}
.ip-logo .wm{font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.ip-logo .wm b{color:var(--em);font-weight:700}
.ip-topnav{display:flex;align-items:center;gap:3px;margin-left:8px;min-width:0;flex:1 1 auto}
.ip-topnav a{padding:8px 11px;border-radius:8px;color:var(--ink2);font-size:14.5px;white-space:nowrap}
.ip-topnav a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.ip-topnav a.on{color:var(--mint);background:rgba(34,197,94,.1)}
.ip-act{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.ip-lang{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.ip-lang a{padding:4px 8px;border-radius:6px;color:var(--mute);font-size:12.5px;white-space:nowrap}
.ip-lang a:hover{color:var(--ink);text-decoration:none}
.ip-lang a.on{background:var(--em);color:#031b10;font-weight:600}

/* ---------------------------------------------------------------- buttons */
.ip-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:9px;font-weight:600;font-size:14.5px;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s}
.ip-btn:hover{text-decoration:none;filter:brightness(1.08)}
.ip-btn-lg{padding:13px 24px;font-size:16px;border-radius:10px}
/* -vio and -amb are class names kept from an earlier palette; both are emerald here. */
.ip-btn-vio{background:linear-gradient(145deg,var(--em),var(--em2));color:#031b10}
.ip-btn-amb{background:var(--mint);color:#04210f}
.ip-btn-out{background:transparent;border-color:#2b3a56;color:var(--ink)}
.ip-btn-out:hover{background:var(--panel);border-color:var(--em)}

/* ---------------------------------------------------------------- drawer */
.ip-drawer{display:none;position:fixed;inset:var(--bar) 0 0;z-index:55;
  background:var(--slate2);padding:14px 16px;overflow-y:auto;border-top:1px solid var(--line)}
.ip-open .ip-drawer{display:block}
.ip-drawer a{display:block;padding:13px 12px;border-radius:9px;color:var(--ink);
  border-bottom:1px solid var(--line);font-size:16px}
.ip-drawer a:hover{text-decoration:none;background:var(--panel)}
.ip-drawer a.on{color:var(--mint)}

/* ---------------------------------------------------------------- shell */
.ip-main{max-width:var(--wrap);margin:0 auto;padding:0 16px 48px}

/* ---------------------------------------------------------------- hero */
.ip-hero{position:relative;margin:18px 0 26px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);isolation:isolate}
.ip-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* falls off by 62% so the art stays legible instead of reading as a dull wash */
.ip-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(2,6,23,.95) 0%,rgba(2,6,23,.78) 38%,rgba(2,6,23,.18) 62%,transparent 78%)}
.ip-hero .in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:26px;align-items:center;padding:34px 30px}
.ip-hchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.ip-hchips span{padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(34,197,94,.14);color:var(--mint);border:1px solid rgba(34,197,94,.3);white-space:nowrap}
.ip-hero h1{margin-bottom:.45em}
.ip-hero p{color:var(--ink2);max-width:58ch}
.act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* promo card beside the hero */
.ip-promo{background:rgba(2,44,34,.82);border:1px solid rgba(34,197,94,.34);
  border-radius:14px;padding:20px;backdrop-filter:blur(4px)}
.ip-promo .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--em);
  color:#031b10;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ip-promo h3{margin:11px 0 4px;color:var(--wash)}
.ip-promo .lbl{color:var(--mint);font-size:13.5px;margin-bottom:12px}
.ip-promo p{color:var(--ink2);font-size:14px;margin:12px 0}
.ip-promo .go{display:block;text-align:center;padding:11px;border-radius:9px;
  background:linear-gradient(145deg,var(--em),var(--em2));color:#031b10;font-weight:700}
.ip-promo .go:hover{text-decoration:none;filter:brightness(1.08)}
.ip-clock{display:flex;align-items:center;gap:7px}
.ip-clock>div{flex:1 1 0;min-width:0;text-align:center;background:rgba(2,6,23,.6);
  border:1px solid rgba(34,197,94,.22);border-radius:9px;padding:8px 4px}
.ip-clock b{display:block;font-size:21px;color:var(--wash);font-variant-numeric:tabular-nums}
.ip-clock span{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.ip-clock i{color:var(--faint);font-style:normal}

/* ---------------------------------------------------------------- section head */
.ip-sh{max-width:var(--prose);margin:40px 0 18px}
.ip-sh h2{margin-bottom:.3em}
.ip-sh p{color:var(--mute);margin:0}

/* ---------------------------------------------------------------- cards */
.ip-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(246px,100%),1fr));gap:14px}
.ip-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:20px;transition:border-color .15s}
.ip-card:hover{border-color:rgba(34,197,94,.44)}
.ip-card .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:rgba(34,197,94,.13);font-size:19px;margin-bottom:12px}
.ip-card h3{margin-bottom:.35em}
.ip-card p{color:var(--ink2);font-size:14.5px;margin-bottom:.8em}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(34,197,94,.1);color:var(--mint);border:1px solid rgba(34,197,94,.26);
  white-space:nowrap}  /* CJK labels wrap mid-word without this */

/* ---------------------------------------------------------------- tiers */
.ip-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr));gap:14px}
.ip-tier{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);padding:22px}
.ip-tier.pop{border-color:var(--em);background:linear-gradient(170deg,rgba(34,197,94,.09),var(--panel) 46%)}
.ip-tier .rib{position:absolute;top:-10px;right:14px;padding:3px 11px;border-radius:999px;
  background:var(--em);color:#031b10;font-size:11px;font-weight:800;white-space:nowrap}
.ip-tier .sub{color:var(--mute);font-size:13.5px;margin-bottom:12px}
.ip-tier .pill{display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(34,197,94,.12);
  color:var(--mint);font-size:12px;white-space:nowrap}
.ip-tier ul{margin:0;padding-left:18px;color:var(--ink2);font-size:14.5px}
.ip-tier li{margin:.3em 0}

/* ---------------------------------------------------------------- wheel */
.ip-wheelsec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;
  align-items:center;background:var(--deep);border:1px solid rgba(34,197,94,.26);
  border-radius:16px;padding:26px}
.ip-wheelcol{min-width:0}
.ip-wheeltx h2{margin-bottom:.4em}
.ip-wheeltx p{color:var(--ink2)}
.ip-wheelwrap{display:grid;place-items:center;min-width:0}
.ip-wheel{width:min(260px,74vw);aspect-ratio:1;border-radius:50%;position:relative;
  background:conic-gradient(var(--em) 0 25%,var(--deep2) 0 50%,var(--em2) 0 75%,var(--deep2) 0);
  border:7px solid var(--panel);box-shadow:0 0 0 3px rgba(34,197,94,.34)}
.ip-wheel::after{content:"";position:absolute;inset:38%;border-radius:50%;
  background:var(--panel);border:3px solid rgba(34,197,94,.4)}
.ip-tw{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:10px;margin-top:16px}
.ip-prize{background:rgba(2,6,23,.56);border:1px solid rgba(34,197,94,.2);border-radius:10px;
  padding:12px;text-align:center;font-size:13.5px;color:var(--ink2)}
.ip-prize b{display:block;color:var(--wash);font-size:15.5px;margin-bottom:2px}

/* ---------------------------------------------------------------- notice + table */
/* flex-wrap put the icon on a line of its own above the text, because the <p> has no basis to
   shrink from. Pin the icon column, let the paragraph take the rest, and align both to the top so
   a two-line notice does not float its icon down the middle. */
.ip-notice{display:flex;align-items:flex-start;gap:12px;margin:26px auto;
  max-width:var(--prose);
  background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.26);
  border-left:3px solid var(--em);border-radius:10px;padding:14px 16px;color:var(--ink2);font-size:14.5px}
.ip-notice>.ic{flex:0 0 20px;width:20px;height:20px;margin-top:1px;fill:var(--em)}
.ip-notice p{flex:1 1 auto;min-width:0;margin:0}
.ip-notice a{font-weight:600}
.ip-tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;
  display:block;overflow-x:auto}  /* a wide table scrolls itself rather than the page */
.ip-tbl th,.ip-tbl td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
.ip-tbl th{background:var(--panel);color:var(--wash);font-weight:600;white-space:nowrap}
.ip-tbl td{color:var(--ink2)}
.ip-tbl tr:last-child td{border-bottom:none}
.ok{color:var(--em);font-weight:600}

/* ---------------------------------------------------------------- prose + page head */
/* The reading column is narrower than the 1180px shell, so without the auto margins it hugs the
   left edge and leaves a third of a desktop screen empty beside every paragraph. Centre it: the
   cards and grids keep the full width, the text sits in the middle of the page like an article. */
.ip-prose{max-width:var(--prose);margin-left:auto;margin-right:auto}
.ip-prose h2{margin-top:1.5em}
.ip-prose h3{margin-top:1.2em}
.ip-prose p,.ip-prose li{color:var(--ink2)}
.ip-prose ul,.ip-prose ol{padding-left:20px}
.ip-prose li{margin:.35em 0}
.ip-prose strong{color:var(--wash)}
.lead{font-size:17.5px;color:var(--ink)!important}
.ip-ph{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;align-items:center;
  margin:18px 0 10px;padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.ip-ph>div{min-width:0}
.ip-ph img{border-radius:12px;width:100%;object-fit:cover;height:auto;aspect-ratio:4/3}
.eb{display:inline-block;padding:4px 11px;border-radius:999px;background:rgba(34,197,94,.13);
  color:var(--mint);font-size:12.5px;font-weight:600;margin-bottom:11px;white-space:nowrap}
/* The trail is outside .ip-main, so it needs the page width itself - it was rendering flush to the
   viewport with the first letter clipped. The link also read as plain text at --mute, which is why
   nobody could tell it was one. */
.ip-crumb{font-size:13px;color:var(--mute)}
.ip-crumb .in{max-width:var(--wrap);margin:0 auto;padding:16px 16px 0}
.ip-crumb a{color:var(--mint);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(134,239,172,.42)}
.ip-crumb a:hover{color:var(--em);text-decoration-color:currentColor}
.ip-crumb span{margin:0 8px;color:var(--faint)}
.ip-crumb .cur{margin:0;color:var(--mute)}

/* ---------------------------------------------------------------- faq */
.ip-faq{max-width:var(--prose);margin:34px auto 0}
.ip-faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:0 16px;margin-bottom:9px}
.ip-faq summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--wash);list-style:none}
.ip-faq summary::-webkit-details-marker{display:none}
.ip-faq summary::after{content:"+";float:right;color:var(--em);font-size:19px;line-height:1}
.ip-faq details[open] summary::after{content:"\2212"}
.ip-faq details[open] summary{border-bottom:1px solid var(--line)}
.ip-faq p{color:var(--ink2);font-size:14.5px;padding-top:12px}

/* ---------------------------------------------------------------- closing band */
.ip-closing{margin:42px 0 0;padding:34px 26px;border-radius:16px;text-align:center;
  background:linear-gradient(150deg,var(--deep),var(--panel));border:1px solid rgba(34,197,94,.3)}
.ip-closing h2{margin-bottom:.3em}
.ip-closing p{color:var(--ink2);max-width:56ch;margin:0 auto 18px}

/* ---------------------------------------------------------------- sticky CTA */
/* every page needs a CTA above the fold on phones; the hero button scrolls away on short screens */
.ip-scta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:9px 12px;
  background:rgba(2,6,23,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
.ip-scta a{display:block;text-align:center;padding:13px;border-radius:10px;font-weight:700;
  background:linear-gradient(145deg,var(--em),var(--em2));color:#031b10}
.ip-scta a:hover{text-decoration:none}

/* ---------------------------------------------------------------- footer */
.ip-foot{border-top:1px solid var(--line);background:var(--slate2);margin-top:52px;
  padding:34px 16px 26px}
.ip-foot .cols{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:26px}
.ip-fbrand .wm{font-weight:700;font-size:17px;color:var(--ink)}
.ip-fbrand p{color:var(--mute);font-size:14px;margin-top:9px}
.ip-foot h4{margin:0 0 11px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.ip-foot .w a{display:block;padding:4px 0;color:var(--ink2);font-size:14.5px}
.ip-foot .soc{display:flex;gap:10px;margin-top:12px}
.ip-foot .soc img{width:26px;height:26px;opacity:.82}
.ip-foot .soc a:hover img{opacity:1}
/* Logo walls on a dark panel. Measured per file, never one blanket filter: a solid badge whose
   wordmark is knocked out in white (Touch 'n Go, Boost) collapses into a grey block if lifted,
   so it carries no class at all and keeps its own colour. */
.ip-foot .pay,.ip-foot .trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px}
.ip-foot .pay img,.ip-foot .trust img{max-height:23px;width:auto;opacity:.9;transition:opacity .15s}
.ip-foot .trust img{max-height:27px}
.ip-foot img.lift{filter:brightness(0) invert(1);opacity:.8}
.ip-foot img.bright{filter:brightness(1.75) saturate(1.15);opacity:.95}
.ip-foot .pay img:hover,.ip-foot .trust img:hover{opacity:1}
.ip-foot .legal{max-width:var(--wrap);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line);
  color:var(--faint);font-size:13px}
.ip-foot .legal .age{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;
  border:1.5px solid var(--faint);font-size:11px;font-weight:700;margin-right:8px;vertical-align:middle}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .ip-topnav{display:none}
  .ip-burger{display:block}
  .ip-hero .in{grid-template-columns:minmax(0,1fr);padding:26px 22px}
  .ip-ph{grid-template-columns:minmax(0,1fr)}
  .ip-ph img{order:-1}
  .ip-wheelsec{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .ip-main{padding-bottom:calc(var(--bar) + 30px)}
  .ip-scta{display:block}
  /* The language switcher plus a CTA will not fit beside the logo and burger at 360px, and the
     widest case is the Chinese label set. Drop the header button here: .ip-scta is fixed to the
     bottom on phones, so a call to action is on screen the whole time rather than just at the top. */
  .ip-act .ip-btn{display:none}
  .ip-act{min-width:0}
  .ip-lang{padding:2px}
  .ip-lang a{padding:4px 7px;font-size:12px}
  .ip-hero{margin-top:12px;border-radius:13px}
  .ip-hero .in{padding:22px 16px;gap:18px}
  .ip-hero::after{background:linear-gradient(180deg,rgba(2,6,23,.72) 0%,rgba(2,6,23,.9) 58%,var(--slate) 100%)}
  .ip-ph,.ip-wheelsec,.ip-closing{padding:20px 16px}
  .ip-card,.ip-tier{padding:17px}
  .act .ip-btn{flex:1 1 auto}
  .ip-foot .cols{gap:20px}
}
@media (max-width:380px){
  .ip-bar{gap:9px;padding:0 12px}
  .ip-logo .wm{font-size:15.5px}
  .ip-clock b{font-size:18px}
  .ip-hchips span{font-size:11.5px;padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}