/* Royal711 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.

   The way this sheet is written:
     - The gaps and insets, the line heights, the font weights and the font stacks used more
       than once are named once in :root as --s-* and called by name everywhere else;
     - box properties keep their physical names, one edge per declaration;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - the font shorthand is opened out into its longhands;
     - repeat() tracks are written out. */

: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;

  /* named values used more than once */
  --s-sp1: .4em;
  --s-sp2: .6em;
  --s-sp3: 2px;
  --s-sp4: 3px;
  --s-sp5: 4px;
  --s-sp6: 5px;
  --s-sp7: 6px;
  --s-sp8: 7px;
  --s-sp9: 8px;
  --s-sp10: 9px;
  --s-sp11: 10px;
  --s-sp12: 11px;
  --s-sp13: 12px;
  --s-sp14: 13px;
  --s-sp15: 14px;
  --s-sp16: 15px;
  --s-sp17: 16px;
  --s-sp18: 17px;
  --s-sp19: 18px;
  --s-sp20: 20px;
  --s-sp21: 22px;
  --s-sp22: 24px;
  --s-sp23: 26px;
  --s-sp24: 28px;
  --s-sp25: 30px;
  --s-sp26: 34px;
  --s-sp27: 36px;
  --s-sp28: 40px;
  --s-sp29: 44px;
  --s-sp30: 48px;
  --s-sp31: 58px;
  --s-lh1: 1;
  --s-wt1: 600;
  --s-wt2: 800;
  --s-wt3: 700;
}

* {box-sizing: border-box;}

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

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--bg);
  color: var(--ink);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 1.03125rem;
  line-height: 1.74;
  font-family: "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-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
a:hover {text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
h1, h2, h3, h4 {font-family: var(--serif); line-height: 1.22; margin-top: 0; margin-right: 0; margin-bottom: .5em; margin-left: 0; font-weight: var(--s-wt1);}
h1 {font-size: clamp(1.75rem, 4.6vw, 2.875rem); letter-spacing: -.012em;}
h2 {font-size: clamp(1.375rem, 3vw, 1.9375rem);}
h3 {font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);}
p {margin-top: 0; margin-right: 0; margin-bottom: 1.1em; margin-left: 0;}
ul, ol {margin-top: 0; margin-right: 0; margin-bottom: 1.15em; margin-left: 0; padding-left: 1.25em;}
li {margin-top: 0; margin-right: 0; margin-bottom: .45em; margin-left: 0;}
:focus-visible {outline: 0.1875rem solid var(--vio); outline-offset: 0.125rem; border-radius: 0.25rem;}

/* ---------------------------------------------------------------- buttons */
.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s-sp1);
  column-gap: var(--s-sp1);
  min-height: 2.875rem;
  padding-top: var(--s-sp13);
  padding-right: var(--s-sp22);
  padding-bottom: var(--s-sp13);
  padding-left: var(--s-sp22);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  border-radius: 62.4375rem;
  font-weight: var(--s-wt3);
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-color: currentcolor;
  text-decoration-thickness: auto;
  transition: transform .14s, box-shadow .14s, background-color .14s;
}
.rl-btn:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; transform: translateY(-0.0625rem);}
.rl-btn.p {background: var(--vio); color: #fff; box-shadow: 0 0.375rem 1.125rem rgba(124, 58, 237, .26);}
.rl-btn.p:hover {background: var(--vio-d);}
.rl-btn.g {
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color: #2a1f03;
  box-shadow: 0 0.375rem 1.125rem rgba(201, 154, 18, .24);
}
.rl-btn.o {background: var(--card); border-color: var(--line2); color: var(--ink);}
.rl-btn.o:hover {border-color: var(--vio); color: var(--vio-d);}
.rl-btn.sm {min-height: 2.375rem; padding-top: var(--s-sp9); padding-right: var(--s-sp18); padding-bottom: var(--s-sp9); padding-left: var(--s-sp18); font-size: 0.84375rem;}
.rl-btn.lg {min-height: 3.25rem; padding-top: var(--s-sp15); padding-right: var(--s-sp25); padding-bottom: var(--s-sp15); padding-left: var(--s-sp25); font-size: 1rem;}

/* ---------------------------------------------------------------- header */
.rl-head {position: sticky; top: 0; z-index: 40; background: var(--bg);}
.rl-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--s-sp15);
  column-gap: var(--s-sp15);
  flex-wrap: wrap;
  padding-top: var(--s-sp9);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp9);
  padding-left: var(--s-sp19);
  background: linear-gradient(90deg, var(--vio-d), var(--vio));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: var(--s-wt1);
}
.rl-strip .rl-btn.g {min-height: 1.875rem; padding-top: var(--s-sp5); padding-right: var(--s-sp15); padding-bottom: var(--s-sp5); padding-left: var(--s-sp15); font-size: 0.75rem; box-shadow: none;}
.rl-head .bar {
  position: relative;
  max-width: var(--w);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--s-sp13);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp13);
  padding-left: var(--s-sp19);
  display: flex;
  align-items: center;
  row-gap: var(--s-sp21);
  column-gap: var(--s-sp21);
  min-width: 0;
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
  background: var(--bg);
}
.rl-logo {display: flex; align-items: center; row-gap: var(--s-sp12); column-gap: var(--s-sp12); min-width: 0; color: inherit;}
.rl-logo:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.rl-logo svg {width: 2.5rem; height: 2.5rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-width: 0;}
.rl-logo .wm {display: flex; flex-direction: column; min-width: 0; line-height: 1.14;}
.rl-logo .wm b {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: var(--s-wt1);
  letter-spacing: .02em;
  white-space: nowrap;
}
.rl-logo .wm small {
  font-size: 0.53125rem;
  letter-spacing: .2em;
  color: var(--mut);
  white-space: nowrap;
}
.rl-nav {display: flex; row-gap: var(--s-sp20); column-gap: var(--s-sp20); min-width: 0; overflow-x: hidden; overflow-y: hidden;}
.rl-nav a {
  color: var(--mut);
  font-size: 0.875rem;
  font-weight: var(--s-wt1);
  white-space: nowrap;
  padding-top: var(--s-sp6);
  padding-right: 0;
  padding-bottom: var(--s-sp6);
  padding-left: 0;
  border-bottom-width: 0.125rem;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
.rl-nav a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; color: var(--ink); border-bottom-color: var(--vio);}
.rl-side {margin-left: auto; display: flex; align-items: center; row-gap: var(--s-sp11); column-gap: var(--s-sp11); min-width: 0;}
.rl-lang {display: flex; row-gap: var(--s-sp10); column-gap: var(--s-sp10);}
.rl-lang a {font-size: 0.75rem; font-weight: var(--s-wt3); color: var(--mut); white-space: nowrap;}
.rl-lang a:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; color: var(--ink);}
.rl-lang a.on {color: var(--vio-d); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.rl-burger {
  display: none;
  width: 2.625rem;
  height: 2.625rem;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line2);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------- hero */
.rl-hero {
  max-width: var(--w);
  margin-top: 2.625rem;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--s-sp19);
  padding-bottom: 0;
  padding-left: var(--s-sp19);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  row-gap: var(--s-sp29);
  column-gap: var(--s-sp29);
  align-items: start;
}
.rl-hero .tx {min-width: 0;}
.rl-caps {display: flex; flex-wrap: wrap; row-gap: var(--s-sp9); column-gap: var(--s-sp9); margin-bottom: var(--s-sp19);}
.rl-caps span {
  padding-top: var(--s-sp6);
  padding-right: var(--s-sp14);
  padding-bottom: var(--s-sp6);
  padding-left: var(--s-sp14);
  border-radius: 62.4375rem;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 0.75rem;
  font-weight: var(--s-wt1);
  white-space: nowrap;
}
.eb {
  display: inline-block;
  margin-bottom: var(--s-sp14);
  font-size: 0.71875rem;
  font-weight: var(--s-wt2);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vio);
}
.lead {color: #443a59; font-size: clamp(1rem, 2vw, 1.15625rem);}
.act {display: flex; flex-wrap: wrap; row-gap: var(--s-sp12); column-gap: var(--s-sp12); margin-top: var(--s-sp21); margin-right: 0; margin-bottom: 0; margin-left: 0;}

.rl-promo {
  min-width: 0;
  padding-top: var(--s-sp22);
  padding-right: var(--s-sp22);
  padding-bottom: var(--s-sp23);
  padding-left: var(--s-sp22);
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh-l);
}
.rl-promo .pill {
  display: inline-block;
  margin-bottom: var(--s-sp12);
  padding-top: var(--s-sp5);
  padding-right: var(--s-sp13);
  padding-bottom: var(--s-sp5);
  padding-left: var(--s-sp13);
  border-radius: 62.4375rem;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 0.6875rem;
  font-weight: var(--s-wt2);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rl-promo h2 {font-size: 1.4375rem; margin-bottom: var(--s-sp2);}
.rl-promo .cd {display: flex; row-gap: var(--s-sp10); column-gap: var(--s-sp10); margin-bottom: var(--s-sp16);}
.rl-promo .cd span {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  padding-top: var(--s-sp10);
  padding-right: var(--s-sp5);
  padding-bottom: var(--s-sp10);
  padding-left: var(--s-sp5);
  border-radius: var(--r-s);
  background: var(--tint);
  text-align: center;
}
.rl-promo .cd b {
  display: block;
  font-size: 1.4375rem;
  font-weight: var(--s-wt2);
  color: var(--vio-d);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rl-promo .cd em {
  display: block;
  font-style: normal;
  font-size: 0.65625rem;
  color: var(--mut);
  letter-spacing: .04em;
}
.rl-promo p {font-size: 0.875rem; color: var(--mut);}
.rl-promo .rl-btn {width: 100%;}

/* ---------------------------------------------------------------- inner page head */
.rl-ph {
  max-width: var(--w);
  margin-top: var(--s-sp28);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--s-sp19);
  padding-bottom: 0;
  padding-left: var(--s-sp19);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  row-gap: var(--s-sp28);
  column-gap: var(--s-sp28);
  align-items: center;
}
.rl-ph .tx {min-width: 0;}
.rl-ph > img {
  min-width: 0;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--sh-l);
}

/* ---------------------------------------------------------------- kpis */
.rl-kpis {
  max-width: var(--w);
  margin-top: var(--s-sp27);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--s-sp19);
  padding-bottom: 0;
  padding-left: var(--s-sp19);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s-sp15);
  column-gap: var(--s-sp15);
}
.rl-kpis div {
  min-width: 0;
  padding-top: var(--s-sp19);
  padding-right: var(--s-sp20);
  padding-bottom: var(--s-sp19);
  padding-left: var(--s-sp20);
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
}
.rl-kpis b {
  display: block;
  font-family: var(--serif);
  font-size: 1.6875rem;
  font-weight: var(--s-wt1);
  color: var(--vio-d);
  line-height: 1.12;
}
.rl-kpis span {display: block; margin-top: var(--s-sp6); font-size: 0.78125rem; color: var(--mut);}

/* ---------------------------------------------------------------- category cards */
.rl-cats {
  max-width: var(--w);
  margin-top: var(--s-sp27);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--s-sp19);
  padding-bottom: 0;
  padding-left: var(--s-sp19);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: var(--s-sp17);
  column-gap: var(--s-sp17);
}
.rl-cat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r);
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
  color: inherit;
  transition: box-shadow .16s, transform .16s;
}
.rl-cat:hover {text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; box-shadow: var(--sh-l); transform: translateY(-0.125rem);}
.rl-cat img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-width: 0;}
.rl-cat .tx {display: flex; flex-direction: column; row-gap: var(--s-sp4); column-gap: var(--s-sp4); min-width: 0; padding-top: var(--s-sp16); padding-right: var(--s-sp18); padding-bottom: var(--s-sp19); padding-left: var(--s-sp18);}
.rl-cat b {font-family: var(--serif); font-size: 1.125rem; font-weight: var(--s-wt1);}
.rl-cat .big {font-size: 1.3125rem; font-weight: var(--s-wt2); color: var(--gold); line-height: 1.15;}
.rl-cat span {font-size: 0.78125rem; color: var(--mut); line-height: 1.45;}

/* ---------------------------------------------------------------- tiers */
.rl-tiers {max-width: var(--w); margin-top: var(--s-sp30); margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--s-sp19); padding-bottom: 0; padding-left: var(--s-sp19);}
.rl-tiers > h2, .rl-tiers > .sub {max-width: var(--col);}
.rl-tiers .sub {color: var(--mut); font-size: 0.9375rem; margin-bottom: var(--s-sp23);}
.rl-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(--s-sp15);
  column-gap: var(--s-sp15);
  align-items: start;
}
.rl-tier {
  position: relative;
  min-width: 0;
  padding-top: var(--s-sp22);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp20);
  padding-left: var(--s-sp19);
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
  text-align: center;
}
.rl-tier.pop {
  border-color: var(--vio);
  box-shadow: var(--sh-l);
  padding-top: var(--s-sp25);
}
.rl-tier .rib {
  position: absolute;
  top: -0.8125rem;
  left: 50%;
  transform: translateX(-50%);
  padding-top: var(--s-sp6);
  padding-right: var(--s-sp16);
  padding-bottom: var(--s-sp6);
  padding-left: var(--s-sp16);
  border-radius: 62.4375rem;
  background: var(--vio-d);
  color: #fff;
  font-size: 0.65625rem;
  font-weight: var(--s-wt2);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rl-tier b {display: block; font-family: var(--serif); font-size: 1.1875rem; font-weight: var(--s-wt1);}
.rl-tier .pc {
  display: block;
  margin-top: var(--s-sp9);
  margin-right: 0;
  margin-bottom: 0.0625rem;
  margin-left: 0;
  font-size: 1.875rem;
  font-weight: var(--s-wt2);
  color: var(--gold);
  line-height: var(--s-lh1);
}
.rl-tier em {display: block; font-style: normal; font-size: 0.71875rem; color: var(--mut);}
.rl-tier p {margin-top: var(--s-sp13); margin-right: 0; margin-bottom: var(--s-sp17); margin-left: 0; font-size: 0.78125rem; color: var(--mut); line-height: 1.55;}
.rl-tier .rl-btn {width: 100%; min-height: 2.5rem; padding-top: var(--s-sp10); padding-right: var(--s-sp15); padding-bottom: var(--s-sp10); padding-left: var(--s-sp15); font-size: 0.8125rem;}

/* ---------------------------------------------------------------- daily wheel */
.rl-wheel {
  max-width: var(--w);
  margin-top: var(--s-sp30);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--s-sp25);
  padding-right: var(--s-sp23);
  padding-bottom: var(--s-sp25);
  padding-left: var(--s-sp23);
  display: grid;
  grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr);
  row-gap: var(--s-sp29);
  column-gap: var(--s-sp29);
  align-items: center;
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
}
.rl-wheel .dial {min-width: 0; text-align: center; position: relative;}
.rl-wheel .wh {
  width: 12.25rem;
  height: 12.25rem;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: var(--s-sp17);
  margin-left: auto;
  border-radius: 50%;
  border-width: 0.4375rem;
  border-style: solid;
  border-color: var(--card);
  box-shadow: 0 0 0 0.125rem 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);
}
.rl-wheel .pin {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left-width: 0.625rem;
  border-left-style: solid;
  border-left-color: transparent;
  border-right-width: 0.625rem;
  border-right-style: solid;
  border-right-color: transparent;
  border-top-width: 1.0625rem;
  border-top-style: solid;
  border-top-color: var(--vio-d);
}
.rl-wheel .dial small {display: block; margin-top: var(--s-sp11); font-size: 0.71875rem; color: var(--mut);}
.rl-wheel .tx {min-width: 0;}
.rl-wheel .pill {
  display: inline-block;
  margin-bottom: var(--s-sp11);
  padding-top: var(--s-sp5);
  padding-right: var(--s-sp13);
  padding-bottom: var(--s-sp5);
  padding-left: var(--s-sp13);
  border-radius: 62.4375rem;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 0.6875rem;
  font-weight: var(--s-wt2);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rl-wheel .tx p {color: var(--mut); font-size: 0.90625rem;}
.rl-wheel .pzs {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--s-sp12); column-gap: var(--s-sp12);}
.rl-wheel .pz {
  min-width: 0;
  padding-top: var(--s-sp14);
  padding-right: var(--s-sp16);
  padding-bottom: var(--s-sp14);
  padding-left: var(--s-sp16);
  border-radius: var(--r-s);
  background: var(--tint);
}
.rl-wheel .pz b {display: block; font-size: 0.84375rem;}
.rl-wheel .pz span {display: block; margin-top: var(--s-sp3); font-size: 0.9375rem; font-weight: var(--s-wt2); color: var(--gold);}

/* ---------------------------------------------------------------- fees + timeline */
.rl-fees, .rl-time {max-width: var(--w); margin-top: var(--s-sp30); margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--s-sp19); padding-bottom: 0; padding-left: var(--s-sp19);}
.rl-fees > h2, .rl-time > h2 {max-width: var(--col);}
.rl-fees .tw {
  overflow-x: auto;
  border-radius: var(--r);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: var(--card);
  box-shadow: var(--sh);
}
.rl-fees table {width: 100%; border-collapse: collapse; font-size: 0.90625rem; min-width: 35rem;}
.rl-fees th {
  text-align: left;
  padding-top: var(--s-sp14);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp14);
  padding-left: var(--s-sp19);
  background: var(--tint);
  font-size: 0.71875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: var(--s-wt3);
}
.rl-fees td {padding-top: var(--s-sp14); padding-right: var(--s-sp19); padding-bottom: var(--s-sp14); padding-left: var(--s-sp19); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line);}
.rl-fees td.ok {color: var(--ok); font-weight: var(--s-wt3);}
.rl-fees .note {margin-top: var(--s-sp15); max-width: var(--col); font-size: 0.84375rem; color: var(--mut);}

.rl-time ol {list-style: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; display: grid; row-gap: 0; column-gap: 0;}
.rl-time li {
  position: relative;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  min-width: 0;
  padding-top: var(--s-sp19);
  padding-right: 0;
  padding-bottom: var(--s-sp19);
  padding-left: 9.375rem;
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.rl-time li:first-child {border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line);}
.rl-time .t {
  position: absolute;
  left: 0;
  top: 1.125rem;
  width: 7rem;
  padding-top: var(--s-sp5);
  padding-right: 0;
  padding-bottom: var(--s-sp5);
  padding-left: 0;
  text-align: center;
  border-radius: 62.4375rem;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 0.78125rem;
  font-weight: var(--s-wt2);
  font-variant-numeric: tabular-nums;
}
.rl-time b {display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: var(--s-wt1);}
.rl-time p {margin-top: var(--s-sp5); margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.875rem; color: var(--mut);}

/* ---------------------------------------------------------------- reviews */
.rl-revs {max-width: var(--w); margin-top: var(--s-sp30); margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--s-sp19); padding-bottom: 0; padding-left: var(--s-sp19);}
.rl-revs .g {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--s-sp17); column-gap: var(--s-sp17);}
.rl-rev {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  min-width: 0;
  padding-top: var(--s-sp21);
  padding-right: var(--s-sp20);
  padding-bottom: var(--s-sp21);
  padding-left: var(--s-sp20);
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
  display: flex;
  flex-direction: column;
}
.rl-rev .st {color: var(--gold); font-size: 0.875rem; letter-spacing: .1em; margin-bottom: var(--s-sp11);}
.rl-rev blockquote {margin-top: 0; margin-right: 0; margin-bottom: var(--s-sp15); margin-left: 0; font-size: 0.875rem; line-height: 1.65; color: #403653; flex-grow: 1; flex-shrink: 1; flex-basis: auto;}
.rl-rev figcaption {display: flex; flex-wrap: wrap; row-gap: var(--s-sp8); column-gap: var(--s-sp8); align-items: baseline;}
.rl-rev figcaption b {font-size: 0.875rem;}
.rl-rev figcaption span {font-size: 0.75rem; color: var(--mut);}
.rl-rev .ft {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s-sp9);
  column-gap: var(--s-sp9);
  align-items: center;
  margin-top: var(--s-sp13);
  padding-top: var(--s-sp13);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line);
}
.rl-rev .ft em {font-style: normal; font-size: 0.71875rem; color: var(--mut);}
.rl-rev .vf {
  margin-left: auto;
  padding-top: var(--s-sp3);
  padding-right: var(--s-sp10);
  padding-bottom: var(--s-sp3);
  padding-left: var(--s-sp10);
  border-radius: 62.4375rem;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 0.65625rem;
  font-weight: var(--s-wt3);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- written column */
.rl-col {max-width: var(--col); margin-top: var(--s-sp30); margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--s-sp19); padding-bottom: 0; padding-left: var(--s-sp19);}
.rl-col.utl {max-width: 45rem;}
.rl-col h2 {margin-top: 1.75em;}
.rl-col h3 {margin-top: 1.35em;}
.rl-col > :first-child {margin-top: 0;}

.rl-steps {list-style: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: var(--s-sp25); margin-left: 0; counter-reset: jbs; display: grid; row-gap: var(--s-sp13); column-gap: var(--s-sp13);}
.rl-steps li {
  counter-increment: jbs;
  position: relative;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  min-width: 0;
  padding-top: var(--s-sp17);
  padding-right: var(--s-sp20);
  padding-bottom: var(--s-sp17);
  padding-left: var(--s-sp31);
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
  font-size: 0.9375rem;
}
.rl-steps li::before {
  content: counter(jbs);
  position: absolute;
  left: 1.125rem;
  top: 0.9375rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--vio-d);
  font-size: 0.8125rem;
  font-weight: var(--s-wt2);
}

.rl-tw {
  overflow-x: auto;
  margin-top: var(--s-sp22);
  margin-right: 0;
  margin-bottom: var(--s-sp25);
  margin-left: 0;
  border-radius: var(--r);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  background: var(--card);
}
.rl-tbl {width: 100%; border-collapse: collapse; font-size: 0.90625rem; min-width: 28.75rem;}
.rl-tbl th {
  text-align: left;
  padding-top: var(--s-sp13);
  padding-right: var(--s-sp17);
  padding-bottom: var(--s-sp13);
  padding-left: var(--s-sp17);
  background: var(--tint);
  font-size: 0.71875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: var(--s-wt3);
}
.rl-tbl td {padding-top: var(--s-sp12); padding-right: var(--s-sp17); padding-bottom: var(--s-sp12); padding-left: var(--s-sp17); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line);}

.rl-faq {margin-top: var(--s-sp20); margin-right: 0; margin-bottom: var(--s-sp25); margin-left: 0;}
.rl-faq details {
  padding-top: var(--s-sp17);
  padding-right: var(--s-sp20);
  padding-bottom: var(--s-sp17);
  padding-left: var(--s-sp20);
  margin-bottom: var(--s-sp11);
  border-radius: var(--r);
  background: var(--card);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: var(--sh);
}
.rl-faq summary {cursor: pointer; font-weight: var(--s-wt3); font-size: 0.96875rem; list-style: none;}
.rl-faq summary::-webkit-details-marker {display: none;}
.rl-faq summary::before {content: "+ "; color: var(--vio); font-weight: var(--s-wt2);}
.rl-faq details[open] summary::before {content: "\2212 ";}
.rl-faq details[open] summary {margin-bottom: var(--s-sp2); color: var(--vio-d);}
.rl-faq p {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mut); font-size: 0.90625rem;}

/* ---------------------------------------------------------------- conversion band */
.rl-band {
  max-width: var(--w);
  margin-top: var(--s-sp29);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: var(--s-sp23);
  padding-right: var(--s-sp25);
  padding-bottom: var(--s-sp23);
  padding-left: var(--s-sp25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--s-sp19);
  column-gap: var(--s-sp19);
  border-radius: var(--r);
  background: linear-gradient(120deg, var(--tint), #fff 70%);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line2);
}
.rl-col .rl-band {margin-top: var(--s-sp26); margin-right: 0; margin-bottom: 0; margin-left: 0; max-width: none; padding-top: var(--s-sp21); padding-right: var(--s-sp22); padding-bottom: var(--s-sp21); padding-left: var(--s-sp22);}
.rl-band b {font-family: var(--serif); font-size: 1.25rem; font-weight: var(--s-wt1); min-width: 0;}

/* ---------------------------------------------------------------- footer */
.rl-foot {margin-top: 3.75rem; background: var(--card); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line);}
.rl-foot .w {max-width: var(--w); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: var(--s-sp28); padding-right: var(--s-sp19); padding-bottom: var(--s-sp24); padding-left: var(--s-sp19);}
.rl-foot .cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  row-gap: var(--s-sp26);
  column-gap: var(--s-sp26);
}
.rl-foot .cols > div {min-width: 0;}
.rl-foot .ab p {color: var(--mut); font-size: 0.84375rem; margin-top: var(--s-sp15); margin-right: 0; margin-bottom: 0; margin-left: 0;}
.rl-foot h4 {
  font-family: inherit;
  font-size: 0.71875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: var(--s-wt3);
  margin-bottom: 1em;
}
.rl-foot .cols a {display: block; margin-bottom: .65em; color: #4a4061; font-size: 0.84375rem;}
.rl-foot .cols a.cta {color: var(--vio-d); font-weight: var(--s-wt3);}
.rl-foot .pay, .rl-foot .trust {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s-sp9);
  column-gap: var(--s-sp9);
  margin-top: var(--s-sp24);
  padding-top: var(--s-sp21);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line);
}
.rl-foot .trust {margin-top: var(--s-sp13); padding-top: var(--s-sp13);}
/* 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. */
.rl-foot .pay span, .rl-foot .trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 2.5rem;
  padding-top: var(--s-sp8);
  padding-right: var(--s-sp14);
  padding-bottom: var(--s-sp8);
  padding-left: var(--s-sp14);
  border-radius: var(--r-s);
  background: #ffffff;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.rl-foot .pay img, .rl-foot .trust img {
  max-height: 1.3125rem;
  width: auto;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  object-fit: contain;
}
.rl-foot .trust span {height: 2.25rem;}
.rl-foot .trust img {max-height: 1.125rem;}
.rl-foot .rg {margin-top: var(--s-sp23); margin-right: 0; margin-bottom: var(--s-sp7); margin-left: 0; font-size: 0.78125rem; color: var(--mut);}
.rl-foot .cr {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.78125rem; color: var(--mut);}

/* ---------------------------------------------------------------- sticky cta */
.rl-scta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  padding-top: var(--s-sp10);
  padding-right: var(--s-sp15);
  padding-bottom: var(--s-sp10);
  padding-left: var(--s-sp15);
  background: rgba(250, 248, 252, .97);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line2);
  backdrop-filter: blur(0.5rem);
}
.rl-scta .rl-btn {width: 100%;}

/* ---------------------------------------------------------------- entry modal */
.rl-pop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: var(--s-sp19);
  padding-right: var(--s-sp19);
  padding-bottom: var(--s-sp19);
  padding-left: var(--s-sp19);
  background: rgba(34, 26, 51, .55);
  backdrop-filter: blur(0.1875rem);
}
.rl-pop.on {display: flex;}
.rl-pop .bx {
  position: relative;
  width: min(26.875rem, 100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 1.75rem 4.375rem rgba(34, 26, 51, .35);
}
/* the card is overflow:auto for its rounded corners, so the close control lives INSIDE it */
.rl-pop .x {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--bg);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: var(--s-lh1);
  cursor: pointer;
}
.rl-pop .hd {
  padding-top: var(--s-sp18);
  padding-right: var(--s-sp31);
  padding-bottom: var(--s-sp16);
  padding-left: var(--s-sp21);
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
  font-family: var(--serif);
  font-weight: var(--s-wt1);
  font-size: 1.0625rem;
}
.rl-pop .panes {padding-top: var(--s-sp22); padding-right: var(--s-sp21); padding-bottom: var(--s-sp7); padding-left: var(--s-sp21);}
/* a hide utility must beat every rule it has to switch off */
.rl-pop .pane.rl-off {display: none !important;}
.rl-pop .pane {display: block; text-align: center;}
.rl-pop .pane .eb {margin-bottom: var(--s-sp7);}
.rl-pop .pane .big {
  display: block;
  margin-top: var(--s-sp5);
  margin-right: 0;
  margin-bottom: var(--s-sp13);
  margin-left: 0;
  font-family: var(--serif);
  font-size: 2.875rem;
  font-weight: var(--s-wt1);
  line-height: var(--s-lh1);
  color: var(--vio-d);
}
.rl-pop .pane p {color: var(--mut); font-size: 0.875rem;}
.rl-pop .pane .rl-btn {width: 100%;}
.rl-pop .pg {display: flex; align-items: center; row-gap: var(--s-sp11); column-gap: var(--s-sp11); padding-top: var(--s-sp17); padding-right: var(--s-sp21); padding-bottom: var(--s-sp20); padding-left: var(--s-sp21);}
.rl-pop .pg button.pv, .rl-pop .pg button.nx {
  width: 2.5rem;
  height: 2.5rem;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  border-radius: 50%;
  background: var(--bg);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  color: var(--ink);
  font-size: 1.1875rem;
  cursor: pointer;
}
.rl-pop .pg button[disabled] {opacity: .35; cursor: default;}
.rl-pop .dots {display: flex; row-gap: var(--s-sp8); column-gap: var(--s-sp8); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;}
.rl-pop .dot {
  width: 1.375rem;
  height: 1.375rem;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  background: none;
  cursor: pointer;
  position: relative;
}
.rl-pop .dot::after {
  content: "";
  position: absolute;
  inset: 0.4375rem;
  border-radius: 50%;
  background: var(--line2);
}
.rl-pop .dot.on::after {background: var(--vio);}
.rl-pop .ct {font-size: 0.75rem; color: var(--mut); font-variant-numeric: tabular-nums;}

/* ---------------------------------------------------------------- home banner */
.rl-banner {max-width: var(--w); margin-top: var(--s-sp25); margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--s-sp19); padding-bottom: 0; padding-left: var(--s-sp19);}
.rl-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) {
  .rl-nav {display: none;}
  .rl-tiers .g {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
  .rl-revs .g {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .rl-cats {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}

@media (max-width: 880px) {
  body {padding-bottom: 4.5rem;}
  .rl-scta {display: block;}
  .rl-burger {display: block;}
  .rl-open .rl-nav {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    column-gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding-top: var(--s-sp7);
    padding-right: var(--s-sp19);
    padding-bottom: var(--s-sp15);
    padding-left: var(--s-sp19);
    background: var(--bg);
    border-bottom-width: 0.0625rem;
    border-bottom-style: solid;
    border-bottom-color: var(--line);
    overflow-x: visible;
    overflow-y: visible;
  }
  .rl-open .rl-nav a {padding-top: var(--s-sp13); padding-right: 0; padding-bottom: var(--s-sp13); padding-left: 0; border-bottom-width: 0.0625rem; border-bottom-style: solid; border-bottom-color: var(--line);}
  .rl-hero, .rl-ph, .rl-wheel {grid-template-columns: minmax(0, 1fr); row-gap: var(--s-sp25); column-gap: var(--s-sp25);}
  .rl-ph > img {order: -1;}
  .rl-wheel .wh {width: 10.5rem; height: 10.5rem;}
  .rl-kpis {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .rl-foot .cols {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}

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

@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. */
  .rl-head .bar {row-gap: var(--s-sp10); column-gap: var(--s-sp10); padding-top: var(--s-sp11); padding-right: var(--s-sp14); padding-bottom: var(--s-sp11); padding-left: var(--s-sp14);}
  .rl-logo .wm {display: none;}
  .rl-logo svg {width: 2.25rem; height: 2.25rem;}
  .rl-side {row-gap: var(--s-sp9); column-gap: var(--s-sp9);}
  .rl-side .rl-btn {padding-top: var(--s-sp9); padding-right: var(--s-sp14); padding-bottom: var(--s-sp9); padding-left: var(--s-sp14); font-size: 0.78125rem;}
  .rl-burger {width: 2.375rem; height: 2.375rem;}
  .rl-lang {row-gap: var(--s-sp7); column-gap: var(--s-sp7);}
  .rl-lang a {font-size: 0.71875rem;}
}