/* R24 Malaysia, the reference register that sells. Deep oxblood ground, bone cards, brass
   hairlines, tables as the house style with a conversion band between them. Static stylesheet:
   the build does NOT regenerate this file.

   House style for this sheet:
     - The gaps and insets, the fixed widths and heights and the shadows used more than once
       are named once in :root as --b-* and called by name everywhere else;
     - box properties are written in logical names (block-start, inline-end) so a modifier
       resets the one edge it means to;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - the font shorthand is opened out into its longhands;
     - repeat() tracks are written out. */

:root {
  --bg: #2a1114;
  --deep: #1d0b0d;
  --card: #f3ece0;
  --card2: #e8dfcd;
  --line: #4a2429;
  --rule: #d2c6ad;
  --ink: #241316;
  --ink2: #55433f;
  --mut: #9a8a85;
  --onbg: #f0e3da;
  --onbg2: #cdb3ae;
  --brass: #c9992e;
  --brass-l: #f0d407;
  --brass-d: #8f6a12;
  --ok: #2f7d4f;
  --r: 7px;
  --w: 1180px;

  /* named values used more than once */
  --b-sp1: .4em;
  --b-sp2: 2px;
  --b-sp3: 3px;
  --b-sp4: 4px;
  --b-sp5: 6px;
  --b-sp6: 8px;
  --b-sp7: 9px;
  --b-sp8: 10px;
  --b-sp9: 11px;
  --b-sp10: 12px;
  --b-sp11: 13px;
  --b-sp12: 14px;
  --b-sp13: 15px;
  --b-sp14: 16px;
  --b-sp15: 18px;
  --b-sp16: 19px;
  --b-sp17: 20px;
  --b-sp18: 22px;
  --b-sp19: 24px;
  --b-sp20: 26px;
  --b-sp21: 28px;
  --b-sp22: 30px;
  --b-sp23: 32px;
  --b-sp24: 34px;
  --b-sp25: 36px;
  --b-sp26: 38px;
  --b-sp27: 40px;
  --b-sz1: 100%;
  --b-sz2: 36px;
  --b-sz3: 16px;
  --b-sz4: 22px;
  --b-sz5: 27px;
  --b-sz6: 40px;
  --b-sz7: 45px;
  --b-sz8: 8px;
}

* {box-sizing: border-box;}

html {overflow-x: clip; -webkit-text-size-adjust: 100%;}

body {
  margin-block: 0px;
  margin-inline: 0px;
  background: var(--bg);
  color: var(--onbg);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 16px;
  line-height: 1.68;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

img {max-width: var(--b-sz1); height: auto; display: block; min-width: 0px;}
a {color: var(--brass-l); text-decoration: none;}
a:hover {text-decoration: underline;}
h1, h2, h3, h4 {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: .48em; margin-inline-start: 0px; line-height: 1.2; font-weight: 800; letter-spacing: -.012em;}
h1 {font-size: clamp(27px, 4.5vw, 42px);}
h2 {font-size: clamp(21px, 2.9vw, 30px);}
h3 {font-size: clamp(17px, 2.1vw, 21px);}
p {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 1.05em; margin-inline-start: 0px;}
ul, ol {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: 1.1em; margin-inline-start: 0px; padding-inline-start: 1.2em;}
li {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: .45em; margin-inline-start: 0px;}
:focus-visible {outline: 3px solid var(--brass-l); outline-offset: 2px; border-radius: 4px;}
table {border-collapse: collapse;}

/* ---------------------------------------------------------------- buttons */
.r2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--b-sp1);
  column-gap: var(--b-sp1);
  min-width: 0px;
  min-height: var(--b-sz7);
  padding-block: var(--b-sp9);
  padding-inline: var(--b-sp17);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.r2-btn:hover {text-decoration: none; filter: brightness(1.06);}
.r2-btn.p {background: linear-gradient(180deg, var(--brass-l), var(--brass)); color: #2a1a00;}
.r2-btn.o {background: transparent; border-color: var(--brass); color: var(--brass-l);}
.r2-btn.g {background: var(--card); color: var(--ink);}
.r2-btn.lg {min-height: 52px; padding-block: var(--b-sp12); padding-inline: var(--b-sp21); font-size: 16px;}

/* ---------------------------------------------------------------- top offer strip */
.r2-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--b-sp12);
  column-gap: var(--b-sp12);
  flex-wrap: wrap;
  padding-block: var(--b-sp6);
  padding-inline: var(--b-sp14);
  background: linear-gradient(90deg, var(--brass-d), var(--brass));
  color: #2a1a00;
  font-size: 13.5px;
  font-weight: 700;
}
.r2-strip .r2-btn {min-height: 34px; padding-block: 5px; padding-inline: var(--b-sp12); font-size: 12.5px; background: var(--deep); color: var(--brass-l);}

/* ---------------------------------------------------------------- header */
.r2-head {position: relative; z-index: 30; background: var(--deep); border-bottom: 1px solid var(--line);}
.r2-head .bar {display: flex; align-items: center; row-gap: var(--b-sp12); column-gap: var(--b-sp12); max-width: var(--w); margin-block: 0px; margin-inline: auto; padding-block: var(--b-sp10); padding-inline: var(--b-sp15);}
.r2-logo {display: flex; align-items: center; row-gap: var(--b-sp8); column-gap: var(--b-sp8); min-width: 0px;}
.r2-logo:hover {text-decoration: none;}
.r2-logo svg {width: var(--b-sz2); height: var(--b-sz2); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.r2-logo .wm {display: flex; flex-direction: column; line-height: 1.05; min-width: 0px;}
.r2-logo .wm b {font-size: 20px; font-weight: 900; color: var(--brass-l); letter-spacing: .02em; white-space: nowrap;}
.r2-logo .wm small {font-size: 9px; letter-spacing: .15em; color: var(--onbg2); white-space: nowrap;}
.r2-burger {display: none; min-width: 45px; min-height: var(--b-sz7); background: transparent; border: 1px solid var(--line); border-radius: var(--r); color: var(--brass-l); font-size: 18px; cursor: pointer;}
.r2-nav {display: flex; row-gap: var(--b-sp3); column-gap: var(--b-sp3); margin-inline-start: auto; min-width: 0px; flex-wrap: wrap; justify-content: flex-end;}
.r2-nav a {padding-block: var(--b-sp6); padding-inline: var(--b-sp9); font-size: 13.5px; font-weight: 650; color: var(--onbg); border-radius: var(--r); white-space: nowrap;}
.r2-nav a:hover {background: var(--line); text-decoration: none;}
.r2-lang {display: flex; row-gap: var(--b-sp2); column-gap: var(--b-sp2);}
.r2-lang a {padding-block: var(--b-sp5); padding-inline: var(--b-sp7); font-size: 12px; font-weight: 700; color: var(--onbg2); border-radius: var(--r); white-space: nowrap;}
.r2-lang a.on {background: var(--brass); color: #2a1a00;}

/* ---------------------------------------------------------------- hero */
.r2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  row-gap: var(--b-sp24);
  column-gap: var(--b-sp24);
  align-items: start;
  max-width: var(--w);
  margin-block: 0px;
  margin-inline: auto;
  padding-block-start: var(--b-sp25);
  padding-inline-end: var(--b-sp15);
  padding-block-end: var(--b-sp22);
  padding-inline-start: var(--b-sp15);
}
.r2-hero .tx {min-width: 0px;}
.eb {
  display: inline-block;
  margin-block-end: var(--b-sp11);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}
.lead {font-size: 17px; color: var(--onbg2);}
.act {display: flex; flex-wrap: wrap; row-gap: var(--b-sp9); column-gap: var(--b-sp9); margin-block-start: var(--b-sp17); margin-inline-end: 0px; margin-block-end: var(--b-sp5); margin-inline-start: 0px;}

.r2-caps {display: flex; flex-wrap: wrap; row-gap: var(--b-sp6); column-gap: var(--b-sp6); margin-block-end: var(--b-sp17);}
.r2-caps span {
  padding-block: var(--b-sp5);
  padding-inline: var(--b-sp11);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
  font-size: 12.5px;
  color: var(--onbg);
}

.r2-promo {
  padding-block: var(--b-sp18);
  padding-inline: var(--b-sp18);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r);
  border: 1px solid var(--rule);
  min-width: 0px;
}
.r2-promo .pill {
  display: inline-block;
  margin-block-end: var(--b-sp9);
  padding-block: var(--b-sp4);
  padding-inline: var(--b-sp9);
  border-radius: 999px;
  background: var(--wine, #7c3338);
  color: #ffe9c9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.r2-promo h2 {font-size: 22px; color: var(--ink); margin-block-end: var(--b-sp14);}
.r2-promo .cd {display: flex; row-gap: var(--b-sp8); column-gap: var(--b-sp8); margin-block-end: var(--b-sp13);}
.r2-promo .cd span {flex-grow: 1; flex-shrink: 1; flex-basis: 0px; min-width: 0px; padding-block: var(--b-sp8); padding-inline: var(--b-sp4); text-align: center; background: var(--card2); border-radius: var(--r);}
.r2-promo .cd b {display: block; font-size: 25px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums;}
.r2-promo .cd em {display: block; font-style: normal; font-size: 10.5px; color: var(--ink2); text-transform: uppercase; letter-spacing: .07em;}
.r2-promo p {font-size: 14px; color: var(--ink2);}
.r2-promo .r2-btn {width: var(--b-sz1);}

/* ---------------------------------------------------------------- category cards */
.r2-cats {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--b-sp12); column-gap: var(--b-sp12); max-width: var(--w); margin-block-start: 0px; margin-inline-end: auto; margin-block-end: var(--b-sp27); margin-inline-start: auto; padding-block: 0px; padding-inline: var(--b-sp15);}
.r2-cat {display: flex; flex-direction: column; background: var(--deep); border: 1px solid var(--line); border-radius: var(--r); overflow-x: hidden; overflow-y: hidden; min-width: 0px;}
.r2-cat:hover {border-color: var(--brass); text-decoration: none;}
.r2-cat img {width: var(--b-sz1); aspect-ratio: 4 / 3; object-fit: cover;}
.r2-cat .tx {padding-block-start: var(--b-sp12); padding-inline-end: var(--b-sp13); padding-block-end: var(--b-sp14); padding-inline-start: var(--b-sp13); min-width: 0px;}
.r2-cat b {display: block; font-size: 14px; color: var(--onbg);}
.r2-cat .big {display: block; margin-block-start: var(--b-sp4); margin-inline-end: 0px; margin-block-end: var(--b-sp3); margin-inline-start: 0px; font-size: 26px; font-weight: 900; color: var(--brass-l); font-variant-numeric: tabular-nums;}
.r2-cat span {display: block; font-size: 12.5px; color: var(--onbg2);}

/* ---------------------------------------------------------------- common section frame */
.r2-tiers, .r2-wheel, .r2-fees, .r2-time, .r2-revs, .r2-banner {
  max-width: var(--w);
  margin-block-start: 0px;
  margin-inline-end: auto;
  margin-block-end: var(--b-sp27);
  margin-inline-start: auto;
  padding-block: 0px;
  padding-inline: var(--b-sp15);
}
.r2-tiers .sub, .r2-fees .note {color: var(--onbg2); font-size: 14.5px; max-width: 74ch;}

/* tier cards */
.r2-tiers .g {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--b-sp11); column-gap: var(--b-sp11); margin-block-start: var(--b-sp17);}
.r2-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--b-sp4);
  column-gap: var(--b-sp4);
  min-width: 0px;
  padding-block-start: var(--b-sp17);
  padding-inline-end: var(--b-sp14);
  padding-block-end: var(--b-sp15);
  padding-inline-start: var(--b-sp14);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.r2-tier.pop {background: var(--deep); color: var(--onbg); border-color: var(--brass); transform: translateY(-8px);}
.r2-tier .rib {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-block: var(--b-sp4);
  padding-inline: var(--b-sp11);
  border-radius: 999px;
  background: var(--brass);
  color: #2a1a00;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.r2-tier b {font-size: 16px;}
.r2-tier .pc {font-size: 29px; font-weight: 900; color: var(--brass-d); font-variant-numeric: tabular-nums;}
.r2-tier.pop .pc {color: var(--brass-l);}
.r2-tier em {font-style: normal; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--mut);}
.r2-tier p {margin-block-start: var(--b-sp6); margin-inline-end: 0px; margin-block-end: var(--b-sp12); margin-inline-start: 0px; font-size: 13px;}
.r2-tier .r2-btn {margin-block-start: auto; width: var(--b-sz1);}

/* wheel */
.r2-wheel {display: grid; grid-template-columns: 300px minmax(0, 1fr); row-gap: var(--b-sp25); column-gap: var(--b-sp25); align-items: center;}
.r2-wheel .dial {position: relative; text-align: center; min-width: 0px;}
.r2-wheel .wh {
  width: var(--b-sz1);
  max-width: 250px;
  aspect-ratio: 1 / 1;
  margin-block-start: 0px;
  margin-inline-end: auto;
  margin-block-end: var(--b-sp14);
  margin-inline-start: auto;
  border-radius: 50%;
  border: 8px solid var(--brass-d);
  background: conic-gradient(var(--brass) 0 45deg, var(--deep) 45deg 90deg, var(--brass-l) 90deg 135deg,
    var(--deep) 135deg 180deg, var(--brass) 180deg 225deg, var(--deep) 225deg 270deg,
    var(--brass-l) 270deg 315deg, var(--deep) 315deg 360deg);
}
.r2-wheel .pin {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 0px;
  height: 0px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 20px solid var(--card);
}
.r2-wheel .dial small {display: block; margin-block-start: var(--b-sp7); font-size: 12px; color: var(--onbg2);}
.r2-wheel .tx {min-width: 0px;}
.r2-wheel .pill {
  display: inline-block;
  margin-block-end: var(--b-sp8);
  padding-block: var(--b-sp4);
  padding-inline: var(--b-sp10);
  border-radius: 999px;
  background: var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass-l);
}
.r2-wheel .tx p {color: var(--onbg2); font-size: 14.5px;}
.r2-wheel .pzs {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--b-sp9); column-gap: var(--b-sp9); margin-block-start: var(--b-sp14);}
.r2-wheel .pz {padding-block: var(--b-sp11); padding-inline: var(--b-sp13); background: var(--deep); border: 1px solid var(--line); border-radius: var(--r); min-width: 0px;}
.r2-wheel .pz b {display: block; font-size: 13.5px;}
.r2-wheel .pz span {display: block; margin-block-start: var(--b-sp3); font-size: 15px; font-weight: 800; color: var(--brass-l);}

/* fees + generic tables */
.r2-fees .tw, .r2-tw {overflow-x: auto; margin-block-start: var(--b-sp15); margin-inline-end: 0px; margin-block-end: var(--b-sp14); margin-inline-start: 0px; border: 1px solid var(--line); border-radius: var(--r);}
.r2-fees table, .r2-tbl {width: var(--b-sz1); font-size: 14.5px; background: var(--deep);}
.r2-fees th, .r2-tbl th {
  text-align: left;
  padding-block: var(--b-sp10);
  padding-inline: var(--b-sp12);
  background: var(--line);
  color: var(--brass-l);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.r2-fees td, .r2-tbl td {padding-block: var(--b-sp10); padding-inline: var(--b-sp12); border-top: 1px solid var(--line);}
.r2-fees .ok {color: #7fd6a2; font-weight: 700;}

/* timeline */
.r2-time ol {list-style-type: none; list-style-position: outside; list-style-image: none; margin-block-start: var(--b-sp15); margin-inline-end: 0px; margin-block-end: 0px; margin-inline-start: 0px; padding-block: 0px; padding-inline: 0px;}
.r2-time li {position: relative; margin-block: 0px; margin-inline: 0px; padding-block-start: 0px; padding-inline-end: 0px; padding-block-end: var(--b-sp20); padding-inline-start: var(--b-sp26); border-left: 2px solid var(--line);}
.r2-time li:last-child {border-inline-start-color: transparent; padding-block-end: 0px;}
.r2-time li::before {
  content: "";
  position: absolute;
  inset-inline-start: -9px;
  inset-block-start: 2px;
  width: var(--b-sz3);
  height: var(--b-sz3);
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid var(--bg);
}
.r2-time b {display: block; font-size: 16px;}
.r2-time .t {display: inline-block; margin-block-start: var(--b-sp4); margin-inline-end: 0px; margin-block-end: var(--b-sp5); margin-inline-start: 0px; padding-block: var(--b-sp3); padding-inline: var(--b-sp8); border-radius: 999px; background: var(--line); font-size: 11.5px; font-weight: 800; color: var(--brass-l); font-variant-numeric: tabular-nums;}
.r2-time p {margin-block: 0px; margin-inline: 0px; font-size: 14px; color: var(--onbg2);}

/* reviews */
.r2-revs .g {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--b-sp13); column-gap: var(--b-sp13); margin-block-start: var(--b-sp15);}
.r2-rev {padding-block: var(--b-sp16); padding-inline: var(--b-sp16); background: var(--card); color: var(--ink); border-radius: var(--r); min-width: 0px;}
.r2-rev .hd {display: flex; align-items: baseline; row-gap: var(--b-sp7); column-gap: var(--b-sp7); flex-wrap: wrap; margin-block-end: var(--b-sp7);}
.r2-rev b {font-size: 15px;}
.r2-rev .sm {font-size: 12.5px; color: var(--ink2);}
.r2-rev .st {color: var(--brass-d); letter-spacing: .08em;}
.r2-rev p {margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: var(--b-sp9); margin-inline-start: 0px; font-size: 14px; color: var(--ink2);}
.r2-rev .ft {display: flex; row-gap: var(--b-sp8); column-gap: var(--b-sp8); align-items: center; padding-block-start: var(--b-sp8); border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink2);}
.r2-rev .vf {color: var(--ok); font-weight: 800;}

/* banner */
.r2-banner img {width: var(--b-sz1); border-radius: var(--r); border: 1px solid var(--line);}

/* conversion band */
.r2-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--b-sp15);
  column-gap: var(--b-sp15);
  max-width: var(--w);
  margin-block-start: 0px;
  margin-inline-end: auto;
  margin-block-end: var(--b-sp27);
  margin-inline-start: auto;
  padding-block: var(--b-sp18);
  padding-inline: var(--b-sp19);
  background: linear-gradient(135deg, var(--deep), #3a181c);
  border: 1px solid var(--brass-d);
  border-radius: var(--r);
}
.r2-band b {font-size: 17px; min-width: 0px;}

/* ---------------------------------------------------------------- reading column */
.r2-col, .r2-ph {max-width: var(--w); margin-block: 0px; margin-inline: auto; padding-block-start: 0px; padding-inline-end: var(--b-sp15); padding-block-end: var(--b-sp27); padding-inline-start: var(--b-sp15);}
/* a single reading column: the build puts the steps, prose, table and FAQ straight into
   .r2-col with no sidebar, so a two-track grid split them down the middle. */
.r2-col {max-width: 860px;}
.r2-col .main {min-width: 0px;}
.r2-col h2 {margin-block-start: 1.5em;}
.r2-col h2:first-child {margin-block-start: 0px;}
/* .r2-side is the header's right-hand group (language switcher plus the two buttons), not a
   page sidebar. It was styled as a sticky column, which stacked the header controls. */
.r2-side {display: flex; align-items: center; row-gap: var(--b-sp8); column-gap: var(--b-sp8); margin-inline-start: auto; min-width: 0px;}

.r2-kpis {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--b-sp10); column-gap: var(--b-sp10); margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: var(--b-sp20); margin-inline-start: 0px;}
.r2-kpis div {padding-block: var(--b-sp13); padding-inline: var(--b-sp13); background: var(--deep); border: 1px solid var(--line); border-radius: var(--r); min-width: 0px;}
.r2-kpis b {display: block; font-size: 23px; font-weight: 900; color: var(--brass-l); font-variant-numeric: tabular-nums;}
.r2-kpis span {display: block; margin-block-start: var(--b-sp4); font-size: 12.5px; color: var(--onbg2);}

.r2-steps {counter-reset: s; list-style-type: none; list-style-position: outside; list-style-image: none; padding-block: 0px; padding-inline: 0px; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: var(--b-sp20); margin-inline-start: 0px;}
.r2-steps li {counter-increment: s; position: relative; margin-block-start: 0px; margin-inline-end: 0px; margin-block-end: var(--b-sp8); margin-inline-start: 0px; padding-block-start: var(--b-sp12); padding-inline-end: var(--b-sp14); padding-block-end: var(--b-sp12); padding-inline-start: 54px; background: var(--deep); border: 1px solid var(--line); border-radius: var(--r);}
.r2-steps li::before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 15px;
  inset-block-start: 13px;
  width: var(--b-sz5);
  height: var(--b-sz5);
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 50%;
  background: var(--brass);
  color: #2a1a00;
  font-weight: 900;
  font-size: 13px;
}

.r2-faq {margin-block-start: var(--b-sp4); margin-inline-end: 0px; margin-block-end: var(--b-sp20); margin-inline-start: 0px;}
.r2-faq details {border: 1px solid var(--line); border-radius: var(--r); background: var(--deep); margin-block-end: var(--b-sp7);}
.r2-faq summary {padding-block: var(--b-sp12); padding-inline: var(--b-sp14); cursor: pointer; font-weight: 700; min-height: 44px;}
.r2-faq summary::-webkit-details-marker {display: none;}
.r2-faq summary::after {content: "+"; float: right; color: var(--brass); font-weight: 900;}
.r2-faq details[open] summary::after {content: "\2212";}
.r2-faq p {margin-block: 0px; margin-inline: 0px; padding-block-start: 0px; padding-inline-end: var(--b-sp14); padding-block-end: var(--b-sp13); padding-inline-start: var(--b-sp14); color: var(--onbg2);}

/* inner hero */
.r2-ph {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--b-sp23); column-gap: var(--b-sp23); align-items: center; padding-block-start: var(--b-sp23); padding-block-end: var(--b-sp20);}
.r2-ph .tx {min-width: 0px;}
.r2-ph > img {border-radius: var(--r); border: 1px solid var(--line); width: var(--b-sz1);}

.utl {max-width: 800px;}

/* ---------------------------------------------------------------- footer */
.r2-foot {background: var(--deep); border-top: 1px solid var(--line);}
.r2-foot .w {max-width: var(--w); margin-block: 0px; margin-inline: auto; padding-block-start: var(--b-sp26); padding-inline-end: var(--b-sp15); padding-block-end: var(--b-sp22); padding-inline-start: var(--b-sp15);}
.r2-foot .cols {display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; row-gap: var(--b-sp21); column-gap: var(--b-sp21);}
.r2-foot .ab {min-width: 0px;}
.r2-foot .ab p {font-size: 13.5px; color: var(--onbg2); margin-block-start: var(--b-sp11); margin-inline-end: 0px; margin-block-end: 0px; margin-inline-start: 0px;}
.r2-foot h4 {font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--brass); margin-block-end: var(--b-sp10);}
.r2-foot .cols div a {display: block; margin-block-end: var(--b-sp7); font-size: 13.5px; color: var(--onbg);}
.r2-foot .pay, .r2-foot .trust {display: flex; flex-wrap: wrap; row-gap: var(--b-sp7); column-gap: var(--b-sp7); margin-block-start: var(--b-sp18);}
.r2-foot .pay span, .r2-foot .trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  padding-block: var(--b-sp6);
  padding-inline: var(--b-sp10);
  background: #efece2;
  border: 1px solid #cdc8bb;
  border-radius: 5px;
}
.r2-foot .pay img, .r2-foot .trust img {max-height: 21px; width: auto; min-width: 0px;}
.r2-foot .rg {margin-block-start: var(--b-sp18); margin-inline-end: 0px; margin-block-end: var(--b-sp5); margin-inline-start: 0px; font-size: 12.5px; color: var(--onbg2);}
.r2-foot .cr {margin-block: 0px; margin-inline: 0px; font-size: 12.5px; color: var(--mut);}

/* ---------------------------------------------------------------- sticky cta */
.r2-scta {
  display: none;
  position: fixed;
  inset-block-start: auto;
  inset-inline-end: 0px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  z-index: 40;
  padding-block: var(--b-sp8);
  padding-inline: var(--b-sp11);
  background: rgba(29, 11, 13, .96);
  border-top: 1px solid var(--brass-d);
}
.r2-scta .r2-btn {width: var(--b-sz1);}

/* ---------------------------------------------------------------- entry modal */
.r2-pop {position: fixed; inset-block: 0px; inset-inline: 0px; z-index: 60; display: none; align-items: center; justify-items: center; padding-block: var(--b-sp15); padding-inline: var(--b-sp15); background: rgba(12, 5, 6, .8);}
.r2-pop.on {display: grid;}
.r2-pop .bx {
  position: relative;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  padding-block: var(--b-sp14);
  padding-inline: var(--b-sp14);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--brass);
  border-radius: var(--r);
}
.r2-pop .x {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: var(--b-sz2);
  height: var(--b-sz2);
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.r2-pop .hd {margin-block-start: var(--b-sp2); margin-inline-end: 44px; margin-block-end: var(--b-sp12); margin-inline-start: var(--b-sp2); font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brass-d);}
.r2-pop .pane {display: block; text-align: center;}
.r2-pop .pane.r2-off {display: none !important;}
.r2-pop .pane .eb {color: var(--ink2);}
.r2-pop .pane .big {display: block; margin-block-start: var(--b-sp6); margin-inline-end: 0px; margin-block-end: var(--b-sp8); margin-inline-start: 0px; font-size: clamp(36px, 10vw, 52px); font-weight: 900; color: var(--wine, #7c3338);}
.r2-pop .pane p {color: var(--ink2); font-size: 14px;}
.r2-pop .pane .r2-btn {width: var(--b-sz1);}
.r2-pop .pg {display: flex; align-items: center; justify-content: center; row-gap: var(--b-sp8); column-gap: var(--b-sp8); margin-block-start: var(--b-sp12);}
.r2-pop .pv, .r2-pop .nx {width: var(--b-sz6); height: var(--b-sz6); border-radius: 50%; background: var(--card2); border: 1px solid var(--rule); color: var(--ink); font-size: 17px; cursor: pointer;}
.r2-pop .pv[disabled], .r2-pop .nx[disabled] {opacity: .35; cursor: default;}
.r2-pop .dots {display: flex; row-gap: var(--b-sp5); column-gap: var(--b-sp5);}
.r2-pop .dot {width: var(--b-sz4); height: var(--b-sz4); padding-block: 0px; padding-inline: 0px; border: 0; background: transparent; cursor: pointer;}
.r2-pop .dot::after {content: ""; display: block; width: var(--b-sz8); height: var(--b-sz8); margin-block: 0px; margin-inline: auto; border-radius: 50%; background: var(--rule);}
.r2-pop .dot.on::after {background: var(--brass-d);}
.r2-pop .ct {font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums;}

@media (prefers-reduced-motion: reduce) { * {transition-property: none !important; transition-duration: 0s !important; transition-timing-function: ease !important; transition-delay: 0s !important; animation: none !important;} }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .r2-cats {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .r2-tiers .g {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .r2-foot .cols {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}

@media (max-width: 880px) {
  body {padding-block-end: 72px;}
  .r2-burger {display: block;}
  .r2-nav {display: none; order: 3; width: var(--b-sz1); justify-content: flex-start;}
  .r2-open .r2-nav {display: flex; flex-direction: column; row-gap: var(--b-sp2); column-gap: var(--b-sp2);}
  .r2-open .r2-nav a {width: var(--b-sz1);}
  .r2-head .bar {flex-wrap: wrap;}
  .r2-hero, .r2-wheel, .r2-ph {grid-template-columns: minmax(0, 1fr); row-gap: var(--b-sp19); column-gap: var(--b-sp19);}
  .r2-ph > img {order: -1; max-width: 420px; margin-block: 0px; margin-inline: auto;}
  .r2-tier.pop {transform: none;}
  .r2-scta {display: block;}
}

@media (max-width: 620px) {
  .r2-logo .wm small {display: none;}
  .r2-tiers .g {grid-template-columns: minmax(0, 1fr);}
  .r2-tier .rib {position: static; transform: none; display: inline-block; margin-block-end: var(--b-sp6);}
  .r2-cats {grid-template-columns: minmax(0, 1fr);}
  .r2-kpis {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .r2-revs .g, .r2-wheel .pzs {grid-template-columns: minmax(0, 1fr);}
  .r2-band {flex-direction: column; align-items: flex-start;}
  .r2-band .r2-btn {width: var(--b-sz1);}
  .r2-foot .cols {grid-template-columns: minmax(0, 1fr);}
  .act .r2-btn {width: var(--b-sz1);}
}

/* Small phones. A KPI figure is one unbreakable token - RM1,920,000 at 23px is 170px wide with
   its padding - and two of those are wider than the screen, which pushed the whole page sideways
   and took the fixed register bar with it. Shrink the figure and the cell's padding. */
@media (max-width: 400px) {
  .r2-kpis {row-gap: var(--b-sp6); column-gap: var(--b-sp6);}
  .r2-kpis div {padding-block: var(--b-sp10); padding-inline: var(--b-sp10);}
  .r2-kpis b {font-size: 16px;}
}

.r2-pop .panes {min-width: 0px;}