/* RJBET77 Malaysia. Brand protection that sells, built in PAPER: off-white ground, serif
   headings, soft shadows, generous white space, violet ink and gold kept for money. The third
   material in the cluster, against rounded dark cards and hard 1px
   rules. Static stylesheet: the build does NOT regenerate this file. */

:root {
  --bg: #faf8fc;
  --card: #ffffff;
  --tint: #f3eefb;
  --line: #e4ddf0;
  --line2: #cfc4e4;
  --ink: #221a33;
  --mut: #6b6182;
  --vio: #7c3aed;
  --vio-d: #5b21b6;
  --vio-l: #a78bfa;
  --gold: #c99a12;
  --gold-l: #f0c33c;
  --ok: #15803d;
  --r: 16px;
  --r-s: 10px;
  --sh: 0 2px 10px rgba(60, 30, 110, .06);
  --sh-l: 0 12px 34px rgba(60, 30, 110, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --w: 1180px;
  --col: 780px;
}

* { box-sizing: border-box; }

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

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

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vio-d); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.22; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(28px, 4.6vw, 46px); letter-spacing: -.012em; }
h2 { font-size: clamp(22px, 3vw, 31px); }
h3 { font-size: clamp(17px, 2.1vw, 21px); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin: 0 0 .45em; }
:focus-visible { outline: 3px solid var(--vio); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- buttons */
.jb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .14s, box-shadow .14s, background-color .14s;
}
.jb-btn:hover { text-decoration: none; transform: translateY(-1px); }
.jb-btn.p { background: var(--vio); color: #fff; box-shadow: 0 6px 18px rgba(124, 58, 237, .26); }
.jb-btn.p:hover { background: var(--vio-d); }
.jb-btn.g {
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color: #2a1f03;
  box-shadow: 0 6px 18px rgba(201, 154, 18, .24);
}
.jb-btn.o { background: var(--card); border-color: var(--line2); color: var(--ink); }
.jb-btn.o:hover { border-color: var(--vio); color: var(--vio-d); }
.jb-btn.sm { min-height: 38px; padding: 8px 17px; font-size: 13.5px; }
.jb-btn.lg { min-height: 52px; padding: 14px 30px; font-size: 16px; }

/* ---------------------------------------------------------------- header */
.jb-head { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.jb-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 18px;
  background: linear-gradient(90deg, var(--vio-d), var(--vio));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.jb-strip .jb-btn.g { min-height: 30px; padding: 4px 14px; font-size: 12px; box-shadow: none; }
.jb-head .bar {
  position: relative;
  max-width: var(--w);
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.jb-logo { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; }
.jb-logo:hover { text-decoration: none; }
.jb-logo svg { width: 40px; height: 40px; flex: 0 0 auto; min-width: 0; }
.jb-logo .wm { display: flex; flex-direction: column; min-width: 0; line-height: 1.14; }
.jb-logo .wm b {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.jb-logo .wm small {
  font-size: 8.5px;
  letter-spacing: .2em;
  color: var(--mut);
  white-space: nowrap;
}
.jb-nav { display: flex; gap: 20px; min-width: 0; overflow: hidden; }
.jb-nav a {
  color: var(--mut);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
}
.jb-nav a:hover { text-decoration: none; color: var(--ink); border-bottom-color: var(--vio); }
.jb-side { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.jb-lang { display: flex; gap: 9px; }
.jb-lang a { font-size: 12px; font-weight: 700; color: var(--mut); white-space: nowrap; }
.jb-lang a:hover { text-decoration: none; color: var(--ink); }
.jb-lang a.on { color: var(--vio-d); text-decoration: underline; }
.jb-burger {
  display: none;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- hero */
.jb-hero {
  max-width: var(--w);
  margin: 42px auto 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 44px;
  align-items: start;
}
.jb-hero .tx { min-width: 0; }
.jb-caps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.jb-caps span {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.eb {
  display: inline-block;
  margin-bottom: 13px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vio);
}
.lead { color: #443a59; font-size: clamp(16px, 2vw, 18.5px); }
.act { display: flex; flex-wrap: wrap; gap: 11px; margin: 22px 0 0; }

.jb-promo {
  min-width: 0;
  padding: 24px 24px 26px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-l);
}
.jb-promo .pill {
  display: inline-block;
  margin-bottom: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.jb-promo h2 { font-size: 23px; margin-bottom: .6em; }
.jb-promo .cd { display: flex; gap: 9px; margin-bottom: 15px; }
.jb-promo .cd span {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 4px;
  border-radius: var(--r-s);
  background: var(--tint);
  text-align: center;
}
.jb-promo .cd b {
  display: block;
  font-size: 23px;
  font-weight: 800;
  color: var(--vio-d);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.jb-promo .cd em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--mut);
  letter-spacing: .04em;
}
.jb-promo p { font-size: 14px; color: var(--mut); }
.jb-promo .jb-btn { width: 100%; }

/* ---------------------------------------------------------------- inner page head */
.jb-ph {
  max-width: var(--w);
  margin: 40px auto 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.jb-ph .tx { min-width: 0; }
.jb-ph > img {
  min-width: 0;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--sh-l);
}

/* ---------------------------------------------------------------- kpis */
.jb-kpis {
  max-width: var(--w);
  margin: 36px auto 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.jb-kpis div {
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}
.jb-kpis b {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  color: var(--vio-d);
  line-height: 1.12;
}
.jb-kpis span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mut); }

/* ---------------------------------------------------------------- category cards */
.jb-cats {
  max-width: var(--w);
  margin: 36px auto 0;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.jb-cat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  color: inherit;
  transition: box-shadow .16s, transform .16s;
}
.jb-cat:hover { text-decoration: none; box-shadow: var(--sh-l); transform: translateY(-2px); }
.jb-cat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-width: 0; }
.jb-cat .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 15px 17px 18px; }
.jb-cat b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.jb-cat .big { font-size: 21px; font-weight: 800; color: var(--gold); line-height: 1.15; }
.jb-cat span { font-size: 12.5px; color: var(--mut); line-height: 1.45; }

/* ---------------------------------------------------------------- tiers */
.jb-tiers { max-width: var(--w); margin: 48px auto 0; padding: 0 18px; }
.jb-tiers > h2, .jb-tiers > .sub { max-width: var(--col); }
.jb-tiers .sub { color: var(--mut); font-size: 15px; margin-bottom: 26px; }
.jb-tiers .g {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.jb-tier {
  position: relative;
  min-width: 0;
  padding: 24px 18px 20px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  text-align: center;
}
.jb-tier.pop {
  border-color: var(--vio);
  box-shadow: var(--sh-l);
  padding-top: 30px;
}
.jb-tier .rib {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 15px;
  border-radius: 999px;
  background: var(--vio-d);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jb-tier b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.jb-tier .pc {
  display: block;
  margin: 8px 0 1px;
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.jb-tier em { display: block; font-style: normal; font-size: 11.5px; color: var(--mut); }
.jb-tier p { margin: 12px 0 16px; font-size: 12.5px; color: var(--mut); line-height: 1.55; }
.jb-tier .jb-btn { width: 100%; min-height: 40px; padding: 9px 14px; font-size: 13px; }

/* ---------------------------------------------------------------- daily wheel */
.jb-wheel {
  max-width: var(--w);
  margin: 48px auto 0;
  padding: 30px 26px;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}
.jb-wheel .dial { min-width: 0; text-align: center; position: relative; }
.jb-wheel .wh {
  width: 196px;
  height: 196px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 7px solid var(--card);
  box-shadow: 0 0 0 2px var(--line2), var(--sh-l);
  background: conic-gradient(
    var(--vio) 0 45deg, var(--gold-l) 45deg 90deg, var(--vio-l) 90deg 135deg,
    var(--gold) 135deg 180deg, var(--vio-d) 180deg 225deg, var(--gold-l) 225deg 270deg,
    var(--vio) 270deg 315deg, var(--gold) 315deg 360deg);
}
.jb-wheel .pin {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 17px solid var(--vio-d);
}
.jb-wheel .dial small { display: block; margin-top: 10px; font-size: 11.5px; color: var(--mut); }
.jb-wheel .tx { min-width: 0; }
.jb-wheel .pill {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.jb-wheel .tx p { color: var(--mut); font-size: 14.5px; }
.jb-wheel .pzs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.jb-wheel .pz {
  min-width: 0;
  padding: 13px 15px;
  border-radius: var(--r-s);
  background: var(--tint);
}
.jb-wheel .pz b { display: block; font-size: 13.5px; }
.jb-wheel .pz span { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; color: var(--gold); }

/* ---------------------------------------------------------------- fees + timeline */
.jb-fees, .jb-time { max-width: var(--w); margin: 48px auto 0; padding: 0 18px; }
.jb-fees > h2, .jb-time > h2 { max-width: var(--col); }
.jb-fees .tw {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh);
}
.jb-fees table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.jb-fees th {
  text-align: left;
  padding: 13px 18px;
  background: var(--tint);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 700;
}
.jb-fees td { padding: 13px 18px; border-top: 1px solid var(--line); }
.jb-fees td.ok { color: var(--ok); font-weight: 700; }
.jb-fees .note { margin-top: 14px; max-width: var(--col); font-size: 13.5px; color: var(--mut); }

.jb-time ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.jb-time li {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 18px 0 18px 150px;
  border-bottom: 1px solid var(--line);
}
.jb-time li:first-child { border-top: 1px solid var(--line); }
.jb-time .t {
  position: absolute;
  left: 0;
  top: 18px;
  width: 112px;
  padding: 4px 0;
  text-align: center;
  border-radius: 999px;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.jb-time b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.jb-time p { margin: 4px 0 0; font-size: 14px; color: var(--mut); }

/* ---------------------------------------------------------------- reviews */
.jb-revs { max-width: var(--w); margin: 48px auto 0; padding: 0 18px; }
.jb-revs .g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jb-rev {
  margin: 0;
  min-width: 0;
  padding: 22px 20px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  display: flex;
  flex-direction: column;
}
.jb-rev .st { color: var(--gold); font-size: 14px; letter-spacing: .1em; margin-bottom: 10px; }
.jb-rev blockquote { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: #403653; flex: 1 1 auto; }
.jb-rev figcaption { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.jb-rev figcaption b { font-size: 14px; }
.jb-rev figcaption span { font-size: 12px; color: var(--mut); }
.jb-rev .ft {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.jb-rev .ft em { font-style: normal; font-size: 11.5px; color: var(--mut); }
.jb-rev .vf {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- written column */
.jb-col { max-width: var(--col); margin: 48px auto 0; padding: 0 18px; }
.jb-col.utl { max-width: 720px; }
.jb-col h2 { margin-top: 1.75em; }
.jb-col h3 { margin-top: 1.35em; }
.jb-col > :first-child { margin-top: 0; }

.jb-steps { list-style: none; padding: 0; margin: 0 0 30px; counter-reset: jbs; display: grid; gap: 12px; }
.jb-steps li {
  counter-increment: jbs;
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 16px 20px 16px 58px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  font-size: 15px;
}
.jb-steps li::before {
  content: counter(jbs);
  position: absolute;
  left: 18px;
  top: 15px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 13px;
  font-weight: 800;
}

.jb-tw {
  overflow-x: auto;
  margin: 24px 0 30px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
}
.jb-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.jb-tbl th {
  text-align: left;
  padding: 12px 16px;
  background: var(--tint);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 700;
}
.jb-tbl td { padding: 11px 16px; border-top: 1px solid var(--line); }

.jb-faq { margin: 20px 0 30px; }
.jb-faq details {
  padding: 16px 20px;
  margin-bottom: 10px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}
.jb-faq summary { cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; }
.jb-faq summary::-webkit-details-marker { display: none; }
.jb-faq summary::before { content: "+ "; color: var(--vio); font-weight: 800; }
.jb-faq details[open] summary::before { content: "\2212 "; }
.jb-faq details[open] summary { margin-bottom: .6em; color: var(--vio-d); }
.jb-faq p { margin: 0; color: var(--mut); font-size: 14.5px; }

/* ---------------------------------------------------------------- conversion band */
.jb-band {
  max-width: var(--w);
  margin: 44px auto 0;
  padding: 26px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: var(--r);
  background: linear-gradient(120deg, var(--tint), #fff 70%);
  border: 1px solid var(--line2);
}
.jb-col .jb-band { margin: 34px 0 0; max-width: none; padding: 22px 24px; }
.jb-band b { font-family: var(--serif); font-size: 20px; font-weight: 600; min-width: 0; }

/* ---------------------------------------------------------------- footer */
.jb-foot { margin-top: 60px; background: var(--card); border-top: 1px solid var(--line); }
.jb-foot .w { max-width: var(--w); margin: 0 auto; padding: 40px 18px 28px; }
.jb-foot .cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.jb-foot .cols > div { min-width: 0; }
.jb-foot .ab p { color: var(--mut); font-size: 13.5px; margin: 14px 0 0; }
.jb-foot h4 {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 700;
  margin-bottom: 1em;
}
.jb-foot .cols a { display: block; margin-bottom: .65em; color: #4a4061; font-size: 13.5px; }
.jb-foot .cols a.cta { color: var(--vio-d); font-weight: 700; }
.jb-foot .pay, .jb-foot .trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.jb-foot .trust { margin-top: 12px; padding-top: 12px; }
/* One chip for every vendor mark on this site: a white card with a hairline border, on the
   provider rail and the trust badges alike. The old rule gave PALE marks an ink card and left
   the rest on the page ground, which put two treatments in one row. */
.jb-foot .pay span, .jb-foot .trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 7px 13px;
  border-radius: var(--r-s);
  background: #ffffff;
  border: 1px solid var(--line);
}
.jb-foot .pay img, .jb-foot .trust img {
  max-height: 21px;
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
}
.jb-foot .trust span { height: 36px; }
.jb-foot .trust img { max-height: 18px; }
.jb-foot .rg { margin: 26px 0 6px; font-size: 12.5px; color: var(--mut); }
.jb-foot .cr { margin: 0; font-size: 12.5px; color: var(--mut); }

/* ---------------------------------------------------------------- sticky cta */
.jb-scta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  padding: 9px 14px;
  background: rgba(250, 248, 252, .97);
  border-top: 1px solid var(--line2);
  backdrop-filter: blur(8px);
}
.jb-scta .jb-btn { width: 100%; }

/* ---------------------------------------------------------------- entry modal */
.jb-pop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(34, 26, 51, .55);
  backdrop-filter: blur(3px);
}
.jb-pop.on { display: flex; }
.jb-pop .bx {
  position: relative;
  width: min(430px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 28px 70px rgba(34, 26, 51, .35);
}
/* the card is overflow:auto for its rounded corners, so the close control lives INSIDE it */
.jb-pop .x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.jb-pop .hd {
  padding: 17px 58px 15px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
}
.jb-pop .panes { padding: 24px 22px 6px; }
/* a hide utility must beat every rule it has to switch off */
.jb-pop .pane.jb-off { display: none !important; }
.jb-pop .pane { display: block; text-align: center; }
.jb-pop .pane .eb { margin-bottom: 6px; }
.jb-pop .pane .big {
  display: block;
  margin: 4px 0 12px;
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--vio-d);
}
.jb-pop .pane p { color: var(--mut); font-size: 14px; }
.jb-pop .pane .jb-btn { width: 100%; }
.jb-pop .pg { display: flex; align-items: center; gap: 10px; padding: 16px 22px 20px; }
.jb-pop .pg button.pv, .jb-pop .pg button.nx {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 19px;
  cursor: pointer;
}
.jb-pop .pg button[disabled] { opacity: .35; cursor: default; }
.jb-pop .dots { display: flex; gap: 7px; margin: 0 auto; }
.jb-pop .dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}
.jb-pop .dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--line2);
}
.jb-pop .dot.on::after { background: var(--vio); }
.jb-pop .ct { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- home banner */
.jb-banner { max-width: var(--w); margin: 30px auto 0; padding: 0 18px; }
.jb-banner img {
  width: 100%;
  min-width: 0;
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: var(--sh-l);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .jb-nav { display: none; }
  .jb-tiers .g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jb-revs .g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  body { padding-bottom: 72px; }
  .jb-scta { display: block; }
  .jb-burger { display: block; }
  .jb-open .jb-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 6px 18px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .jb-open .jb-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .jb-hero, .jb-ph, .jb-wheel { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .jb-ph > img { order: -1; }
  .jb-wheel .wh { width: 168px; height: 168px; }
  .jb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .jb-head .bar { gap: 12px; padding: 10px 16px; }
  .jb-logo .wm small { display: none; }
  .jb-side .jb-btn.o { display: none; }
  .jb-lang { gap: 7px; }
  .jb-cats { grid-template-columns: minmax(0, 1fr); }
  .jb-tiers .g { grid-template-columns: minmax(0, 1fr); }
  .jb-tier.pop { margin-top: 14px; }
  .jb-revs .g { grid-template-columns: minmax(0, 1fr); }
  .jb-wheel .pzs { grid-template-columns: minmax(0, 1fr); }
  .jb-kpis { grid-template-columns: minmax(0, 1fr); }
  .jb-foot .cols { grid-template-columns: minmax(0, 1fr); }
  .jb-band { flex-direction: column; align-items: flex-start; }
  .jb-band .jb-btn { width: 100%; }
  .act .jb-btn { width: 100%; }
  .jb-banner img { aspect-ratio: 4 / 3; }
  .jb-time li { padding: 16px 0 16px 0; }
  .jb-time .t { position: static; display: inline-block; margin-bottom: 7px; width: auto; padding: 4px 14px; }
}

@media (max-width: 480px) {
  /* mark + wordmark + 3 language links + Register + burger runs 6px over a 375px bar.
     The mark still links home, so the wordmark text is what gives way first. */
  .jb-head .bar { gap: 9px; padding: 10px 13px; }
  .jb-logo .wm { display: none; }
  .jb-logo svg { width: 36px; height: 36px; }
  .jb-side { gap: 8px; }
  .jb-side .jb-btn { padding: 8px 13px; font-size: 12.5px; }
  .jb-burger { width: 38px; height: 38px; }
  .jb-lang { gap: 6px; }
  .jb-lang a { font-size: 11.5px; }
}