/* RJBET77 Malaysia long-scroll landing. Charcoal ground, violet into magenta, hard 1px rules,
   zero corner radius, no shadows. Deliberately the opposite construction to the rounded dark
   cards. Static stylesheet: the build does NOT regenerate this file. */

:root {
  --bg: #15131a;
  --bg2: #1b1822;
  --panel: #201c2a;
  --line: #342e42;
  --line2: #4a4160;
  --tx: #f2f0f6;
  --mut: #a29bb4;
  --vio: #7c3aed;
  --mag: #c026d3;
  --mag-l: #e879f9;
  --gold: #f0b429;
  --ok: #22c55e;
  --w: 1180px;
  --col: 760px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 16px/1.72 ui-sans-serif, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  padding-bottom: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--mag-l); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.24; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(27px, 4.6vw, 44px); letter-spacing: -.015em; }
h2 { font-size: clamp(20px, 2.8vw, 28px); }
h3 { font-size: clamp(16px, 2vw, 20px); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin: 0 0 .45em; }
:focus-visible { outline: 2px solid var(--mag-l); outline-offset: 2px; }

/* ---------------------------------------------------------------- buttons (square, not pill) */
.r7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .14s, color .14s;
}
.r7-btn:hover { text-decoration: none; }
.r7-btn.p { background: var(--mag); color: #fff; }
.r7-btn.p:hover { background: var(--mag-l); color: #15131a; }
.r7-btn.g { background: var(--gold); color: #241703; }
.r7-btn.g:hover { background: #ffc94d; }
.r7-btn.o { background: transparent; border-color: var(--line2); color: var(--tx); }
.r7-btn.o:hover { border-color: var(--mag); color: var(--mag-l); }
.r7-btn.lg { min-height: 50px; padding: 14px 28px; font-size: 16px; }

/* ---------------------------------------------------------------- header */
.r7-head { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.r7-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 7px 16px;
  background: linear-gradient(90deg, var(--vio), var(--mag));
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.r7-offer .r7-btn { min-height: 30px; padding: 4px 13px; font-size: 12px; }
.r7-head .bar {
  max-width: var(--w);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}
.r7-logo { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.r7-logo:hover { text-decoration: none; }
.r7-logo svg { width: 36px; height: 36px; flex: 0 0 auto; min-width: 0; }
.r7-logo .wm { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.r7-logo .wm b { font-size: 18px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.r7-logo .wm small {
  font-size: 8.5px;
  letter-spacing: .2em;
  color: var(--mut);
  white-space: nowrap;
}
.r7-nav { display: flex; gap: 20px; min-width: 0; overflow: hidden; }
.r7-nav a {
  color: var(--mut);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.r7-nav a:hover { text-decoration: none; color: var(--tx); border-bottom-color: var(--mag); }
.r7-side { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.r7-lang { display: flex; gap: 10px; }
.r7-lang a { font-size: 12px; font-weight: 700; color: var(--mut); white-space: nowrap; }
.r7-lang a:hover { text-decoration: none; color: var(--tx); }
.r7-lang a.on { color: var(--mag-l); text-decoration: underline; }
.r7-side .r7-btn { min-height: 36px; padding: 8px 16px; font-size: 13.5px; }
.r7-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--line2);
  color: var(--tx);
  font-size: 18px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- hero (centred) */
.r7-hero {
  max-width: var(--col);
  margin: 44px auto 0;
  padding: 0 16px;
  text-align: center;
}
.eb {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 11px;
  border: 1px solid var(--mag);
  color: var(--mag-l);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lead { color: #d8d3e4; font-size: clamp(15.5px, 1.9vw, 18px); }
.act { display: flex; flex-wrap: wrap; gap: 11px; margin: 20px 0 0; justify-content: center; }
.r7-ph .act, .r7-util .act { justify-content: flex-start; }
.r7-hero > img {
  width: 100%;
  margin-top: 30px;
  min-width: 0;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.r7-paychips, .r7-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.r7-paychips span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line);
}
.r7-paychips span.ink { background: #ece9f5; border-color: #ece9f5; }
.r7-paychips img { max-height: 20px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain; }
.r7-badges { margin-top: 12px; }
.r7-badges span {
  padding: 4px 12px;
  border: 1px solid var(--line2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--mut);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- page head (inner) */
.r7-ph {
  max-width: var(--w);
  margin: 34px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.r7-ph .tx { min-width: 0; }
.r7-ph > img {
  min-width: 0;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------------------------------------------------------------- kpis */
.r7-kpis {
  max-width: var(--w);
  margin: 36px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.r7-kpis div {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: none;
}
.r7-kpis b { display: block; font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.r7-kpis span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mut); }

/* ---------------------------------------------------------------- category strip */
.r7-cats {
  max-width: var(--w);
  margin: 36px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.r7-cat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg2);
  color: inherit;
  padding-bottom: 16px;
}
.r7-cat:hover { text-decoration: none; background: var(--panel); }
.r7-cat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-width: 0; }
.r7-cat b { margin: 14px 18px 4px; font-size: 16px; font-weight: 700; }
.r7-cat span { margin: 0 18px; font-size: 12.5px; color: var(--mut); line-height: 1.45; }

/* ---------------------------------------------------------------- studios */
.r7-studios {
  max-width: var(--w);
  margin: 36px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.r7-studios > div { min-width: 0; }
.r7-studios h3 {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
.r7-studios .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.r7-studios .chip {
  padding: 7px 13px;
  border: 1px solid var(--line2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.r7-studios .logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.r7-studios .logos span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 56px;
  padding: 8px 10px;
  background: var(--bg2);
}
.r7-studios .logos span.ink { background: #ece9f5; }
.r7-studios .logos img { max-height: 26px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain; }

/* ---------------------------------------------------------------- two column body + jump index */
.r7-wrap {
  max-width: var(--w);
  margin: 40px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 228px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.r7-col { min-width: 0; max-width: var(--col); }
.r7-col h2 { margin-top: 1.7em; scroll-margin-top: 110px; }
.r7-col > :first-child { margin-top: 0; }

.r7-jump { position: sticky; top: 104px; min-width: 0; }
.r7-jump h2 {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}
.r7-jump ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.r7-jump li { margin: 0; }
.r7-jump a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--mut);
  font-size: 13.5px;
  line-height: 1.4;
}
.r7-jump a:hover { text-decoration: none; color: var(--mag-l); }
.r7-jump i { font-style: normal; font-weight: 800; color: var(--mag); flex: 0 0 auto; }
.r7-jump span { min-width: 0; }

.r7-steps { list-style: none; padding: 0; margin: 0 0 30px; counter-reset: r7s; }
.r7-steps li {
  counter-increment: r7s;
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 14px 0 14px 46px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.r7-steps li:first-child { border-top: 1px solid var(--line); }
.r7-steps li::before {
  content: counter(r7s);
  position: absolute;
  left: 0;
  top: 13px;
  font-size: 19px;
  font-weight: 800;
  color: var(--mag);
}

.r7-tw { overflow-x: auto; margin: 22px 0 30px; border: 1px solid var(--line); }
.r7-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 440px; }
.r7-tbl th {
  text-align: left;
  padding: 11px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mut);
}
.r7-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.r7-tbl tbody tr:last-child td { border-bottom: none; }

.r7-faq { margin: 18px 0 30px; border-top: 1px solid var(--line); }
.r7-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.r7-faq summary { cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; }
.r7-faq summary::-webkit-details-marker { display: none; }
.r7-faq summary::before { content: "+ "; color: var(--mag); font-weight: 800; }
.r7-faq details[open] summary::before { content: "\2212 "; }
.r7-faq details[open] summary { margin-bottom: .6em; }
.r7-faq p { margin: 0; color: var(--mut); font-size: 14.5px; }

/* ---------------------------------------------------------------- bands */
.r7-band {
  max-width: var(--w);
  margin: 36px auto 0;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid var(--mag);
  background: var(--bg2);
}
.r7-col .r7-band { margin: 30px 0 0; padding: 20px; max-width: none; }
.r7-band b { font-size: 17px; font-weight: 700; min-width: 0; }

/* ---------------------------------------------------------------- payment cards */
.r7-pays {
  max-width: var(--w);
  margin: 40px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.r7-pc { min-width: 0; padding: 20px 18px; background: var(--bg2); }
.r7-pc .lg {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  margin-bottom: 12px;
}
.r7-pc .lg.ink { background: #ece9f5; padding: 5px 9px; width: fit-content; }
.r7-pc .lg img { max-height: 24px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain; }
.r7-pc b { display: block; font-size: 15px; }
.r7-pc em { display: block; margin: 3px 0 9px; font-style: normal; font-size: 12px; color: var(--ok); }
.r7-pc p { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.55; }

/* ---------------------------------------------------------------- rtp table */
.r7-rtp { max-width: var(--w); margin: 40px auto 0; padding: 0 16px; }
.r7-rtp > p { max-width: var(--col); color: var(--mut); font-size: 14.5px; }
.r7-rtp .tw { overflow-x: auto; border: 1px solid var(--line); }
.r7-rtp table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.r7-rtp th {
  text-align: left;
  padding: 11px 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mut);
}
.r7-rtp td { padding: 10px 15px; border-bottom: 1px solid var(--line); }
.r7-rtp tbody tr:last-child td { border-bottom: none; }
.r7-rtp td.n { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.r7-rtp td.bar { width: 170px; }
.r7-rtp td.bar i {
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--vio), var(--mag));
}

/* ---------------------------------------------------------------- reviews */
.r7-revs { max-width: var(--w); margin: 40px auto 0; padding: 0 16px; }
.r7-revs .g {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.r7-rev { margin: 0; min-width: 0; padding: 20px 18px; background: var(--bg2); }
.r7-rev .hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.r7-rev .hd b { font-size: 14.5px; }
.r7-rev .hd span { font-size: 12px; color: var(--mut); }
.r7-rev .hd em { font-style: normal; color: var(--gold); font-size: 12px; margin-left: auto; }
.r7-rev blockquote { margin: 0; font-size: 13.5px; color: var(--mut); line-height: 1.6; }

/* ---------------------------------------------------------------- phone split */
.r7-shot {
  max-width: var(--w);
  margin: 40px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.r7-shot img { min-width: 0; border: 1px solid var(--line); aspect-ratio: 3 / 4; object-fit: cover; }
.r7-shot .tx { min-width: 0; }
.r7-shot .tx p { color: var(--mut); font-size: 15px; }
.r7-shot ul { list-style: none; padding: 0; margin: 0 0 20px; }
.r7-shot li {
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 14.5px;
}
.r7-shot li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

/* ---------------------------------------------------------------- util page */
.r7-util { max-width: var(--col); margin: 40px auto 0; padding: 0 16px; }
.r7-util h2 { margin-top: 1.7em; }

/* ---------------------------------------------------------------- footer */
.r7-foot { margin-top: 56px; border-top: 1px solid var(--line); background: var(--bg2); }
.r7-foot .w { max-width: var(--w); margin: 0 auto; padding: 36px 16px 26px; }
.r7-foot .cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.r7-foot .cols > div { min-width: 0; }
.r7-foot .ab p { color: var(--mut); font-size: 13px; margin: 14px 0 0; }
.r7-foot h4 {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 1em;
}
.r7-foot .cols a { display: block; margin-bottom: .65em; color: #d2cce0; font-size: 13.5px; }
.r7-foot .cols a.cta { color: var(--gold); font-weight: 700; }
.r7-foot .marks { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.r7-foot .pay, .r7-foot .trust { display: flex; flex-wrap: wrap; gap: 7px; }
.r7-foot .trust { margin-top: 10px; }
.r7-foot .pay span, .r7-foot .trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--line);
}
.r7-foot .pay span.ink, .r7-foot .trust span.ink { background: #ece9f5; border-color: #ece9f5; }
.r7-foot .pay img, .r7-foot .trust img {
  max-height: 20px;
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
}
.r7-foot .trust span { height: 32px; }
.r7-foot .trust img { max-height: 17px; }
.r7-foot .rg { margin: 24px 0 6px; font-size: 12.5px; color: var(--mut); }
.r7-foot .cr { margin: 0; font-size: 12.5px; color: var(--mut); }

/* ---------------------------------------------------------------- sticky cta */
.r7-scta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg);
  border-top: 1px solid var(--line2);
}
.r7-scta .r7-btn { flex: 1 1 auto; min-width: 0; }
.r7-top {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  color: var(--tx);
  font-size: 17px;
}
.r7-top:hover { text-decoration: none; border-color: var(--mag); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .r7-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .r7-jump { position: static; margin-bottom: 30px; border: 1px solid var(--line); padding: 16px 18px; }
  .r7-jump ol { columns: 2; column-gap: 26px; }
  .r7-col { max-width: none; }
  .r7-pays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r7-revs .g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r7-nav { display: none; }
}

@media (max-width: 860px) {
  body { padding-bottom: 68px; }
  .r7-scta { display: flex; }
  .r7-burger { display: block; }
  .r7-open .r7-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 6px 16px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .r7-open .r7-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .r7-head .bar { position: relative; gap: 12px; }
  .r7-ph, .r7-shot { grid-template-columns: minmax(0, 1fr); }
  .r7-ph > img { order: -1; }
  .r7-shot img { max-width: 260px; }
  .r7-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r7-studios { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .r7-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r7-foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .r7-side .r7-btn { padding: 8px 12px; font-size: 12.5px; }
  .r7-logo .wm small { display: none; }
  .r7-lang { gap: 7px; }
  .r7-cats { grid-template-columns: minmax(0, 1fr); }
  .r7-pays { grid-template-columns: minmax(0, 1fr); }
  .r7-revs .g { grid-template-columns: minmax(0, 1fr); }
  .r7-jump ol { columns: 1; }
  .r7-band { flex-direction: column; align-items: flex-start; }
  .r7-band .r7-btn { width: 100%; }
  .act .r7-btn { width: 100%; }
  .r7-foot .cols { grid-template-columns: minmax(0, 1fr); }
}

/* Small phones. The bar is the lockup plus the language links, the Register button and the burger;
   .r7-side carries min-width:0 so it was clamped to 171px while its own contents ran on to 345px,
   which is the width the fixed register bar reported. Give the gaps, the button padding and the
   wordmark back what they can spare; every control keeps its touch height. */
@media (max-width: 400px) {
  .r7-head .bar { gap: 6px; }
  .r7-logo { gap: 7px; }
  .r7-logo svg { width: 30px; height: 30px; }
  .r7-logo .wm b { font-size: 14px; }
  .r7-side { gap: 5px; }
  /* the language links are bare text, so they keep a real gap between them rather than paying for
     the row out of the space between two tap targets */
  .r7-lang { gap: 6px; }
  .r7-side .r7-btn { padding: 8px 5px; font-size: 11.5px; }
  .r7-burger { width: 36px; }
}