/* r24asia.com - .ra-* shell. Cool slate, teal accent, amber money figures.
   Hand written for this site; the generator does not touch this file.

   House style for this sheet:
     - The gaps and insets, the corner radii and the type sizes used more than once are
       named once in :root as --ln-* 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;
     - every border is split into width, style and colour;
     - 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;
     - an animation names all eight of its parts. */

:root {
  --pg: #0E1726;
  --pg2: #17233A;
  --deep: #090F1B;
  --card: rgba(21,32,51,.72);
  --line: rgba(135,160,190,.17);
  --line2: rgba(135,160,190,.3);
  --teal: #17A89B;
  --teal2: #6FE3D2;
  --wash: rgba(23,168,155,.1);
  --amber: #E8A33D;
  --mist: #E6EDF5;
  --mute: #8C9BB0;
  --bad: #E0585F;
  --rad: 14px;
  --gap: 18px;
  --sec: 52px;
  --barh: 62px;

  /* named values used more than once */
  --ln-sp1: 2px;
  --ln-sp2: 3px;
  --ln-sp3: 4px;
  --ln-sp4: 5px;
  --ln-sp5: 6px;
  --ln-sp6: 7px;
  --ln-sp7: 8px;
  --ln-sp8: 9px;
  --ln-sp9: 10px;
  --ln-sp10: 11px;
  --ln-sp11: 12px;
  --ln-sp12: 13px;
  --ln-sp13: 14px;
  --ln-sp14: 15px;
  --ln-sp15: 16px;
  --ln-sp16: 17px;
  --ln-sp17: 18px;
  --ln-sp18: 20px;
  --ln-sp19: 22px;
  --ln-sp20: 24px;
  --ln-sp21: 26px;
  --ln-sp22: 28px;
  --ln-sp23: 30px;
  --ln-sp24: 34px;
  --ln-sp25: 40px;
  --ln-rad1: 8px;
  --ln-rad2: 9px;
  --ln-rad3: 11px;
  --ln-rad4: 20px;
  --ln-rad5: 999px;
  --ln-fs1: 11.5px;
  --ln-fs2: 12.5px;
  --ln-fs3: 13px;
  --ln-fs4: 13.4px;
  --ln-fs5: 13.5px;
  --ln-fs6: 14px;
  --ln-fs7: 14.2px;
  --ln-fs8: 14.6px;
  --ln-fs9: 15px;
  --ln-fs10: 15.5px;
  --ln-fs11: 16px;
  --ln-fs12: 18px;
  --ln-fs13: 19px;
  --ln-fs14: 20px;
}
*,*::before,*::after{box-sizing: border-box;}
html{overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body{
  margin-block: 0;
  margin-inline: 0;
  background: var(--pg);
  color: var(--mist);
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-stretch: normal;
  font-size: var(--ln-fs11);
  line-height: 1.68;
  font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Noto Sans CJK SC",sans-serif;
  letter-spacing: .005em;
}
img{display: block; max-width: 100%; min-width: 0; border-width: 0; border-style: none; border-color: currentcolor;}
a{color: var(--teal2); 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{margin-block: 0; margin-inline: 0; line-height: 1.22; letter-spacing: -.012em; font-weight: 700;}
p{margin-block-start: 0; margin-inline-end: 0; margin-block-end: .95em; margin-inline-start: 0;}
ul,ol{margin-block-start: 0; margin-inline-end: 0; margin-block-end: 1em; margin-inline-start: 0; padding-inline-start: 1.15em;}
li{margin-block-start: 0; margin-inline-end: 0; margin-block-end: .4em; margin-inline-start: 0;}
.w{width: 100%; max-width: 1136px; margin-block: 0; margin-inline: auto; padding-block: 0; padding-inline: var(--ln-sp15);}
:focus-visible{outline: 2px solid var(--teal2); outline-offset: 2px;}

/* ---------- buttons ---------- */
.ra-b{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--ln-sp6);
  column-gap: var(--ln-sp6);
  min-height: 44px;
  padding-block: 0;
  padding-inline: var(--ln-sp18);
  border-radius: var(--ln-rad5);
  font-weight: 700;
  font-size: var(--ln-fs9);
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-color: currentcolor;
  text-decoration-thickness: auto;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
}
.ra-b:hover{text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto; filter: brightness(1.07);}
.ra-b.a{background: linear-gradient(100deg,var(--teal) 10%,var(--teal2)); color: #06231F;}
.ra-b.o{background: transparent; border-color: var(--line2); color: var(--mist);}
.ra-b.lg{min-height: 50px; padding-block: 0; padding-inline: var(--ln-sp21); font-size: var(--ln-fs11);}
.ra-b.sm{min-height: 36px; padding-block: 0; padding-inline: var(--ln-sp14); font-size: var(--ln-fs5);}

/* ---------- header ---------- */
.ra-top{
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: rgba(9,15,27,.94);
  backdrop-filter: saturate(1.3) blur(8px);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
}
.ra-strip{background: linear-gradient(94deg,#0C3B38,#124C45 58%,#0C3B38); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line);}
.ra-strip .w{display: flex; align-items: center; row-gap: var(--ln-sp10); column-gap: var(--ln-sp10); min-height: 44px; padding-block-start: var(--ln-sp3); padding-block-end: var(--ln-sp3);}
.ra-strip em{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  font-style: normal;
  font-weight: 800;
  font-size: var(--ln-fs3);
  color: var(--amber);
  background: rgba(232,163,61,.14);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(232,163,61,.34);
  border-radius: var(--ln-rad1);
  padding-block: var(--ln-sp1);
  padding-inline: var(--ln-sp6);
}
.ra-strip p{margin-block: 0; margin-inline: 0; min-width: 0; font-size: var(--ln-fs3); color: #CFE5E1; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ra-strip .ra-b{margin-inline-start: auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.ra-bar .w{display: flex; align-items: center; row-gap: var(--ln-sp13); column-gap: var(--ln-sp13); min-height: var(--barh);}
.ra-brandline{display: flex; align-items: center; row-gap: var(--ln-sp8); column-gap: var(--ln-sp8); min-width: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; color: var(--mist); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.ra-brandline:hover{text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.ra-brandline svg{width: 34px; height: 34px; flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-width: 0;}
.ra-brandline .wm{display: flex; flex-direction: column; min-width: 0; line-height: 1.05;}
.ra-brandline .wm b{font-size: 18.5px; letter-spacing: .015em; white-space: nowrap;}
.ra-brandline .wm small{font-size: 9.5px; letter-spacing: .2em; color: var(--teal2); white-space: nowrap;}
.ra-pills{display: flex; row-gap: var(--ln-sp3); column-gap: var(--ln-sp3); margin-inline-start: var(--ln-sp7); min-width: 0; overflow-x: hidden; overflow-y: hidden;}
.ra-pills a{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
  padding-inline: var(--ln-sp11);
  border-radius: var(--ln-rad2);
  font-size: var(--ln-fs6);
  color: var(--mute);
  white-space: nowrap;
}
.ra-pills a:hover{background: var(--wash); color: var(--mist); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.ra-lang{display: flex; row-gap: var(--ln-sp1); column-gap: var(--ln-sp1); margin-inline-start: auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-width: 1px; border-style: solid; border-color: var(--line); border-radius: var(--ln-rad2);}
.ra-lang a{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
  padding-inline: var(--ln-sp10);
  border-radius: var(--ln-rad2);
  font-size: var(--ln-fs2);
  color: var(--mute);
}
.ra-lang a.on{background: var(--teal); color: #06231F; font-weight: 700;}
.ra-lang a:hover{text-decoration-line: none; text-decoration-style: solid; text-decoration-color: currentcolor; text-decoration-thickness: auto;}
.ra-bar .ra-b.hid{flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.ra-burger{
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  row-gap: var(--ln-sp3);
  column-gap: var(--ln-sp3);
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--ln-rad2);
  cursor: pointer;
}
.ra-burger span{display: block; height: 2px; width: 18px; margin-block: 0; margin-inline: auto; background: var(--mist); border-radius: 2px;}
.ra-drawer{display: none; flex-wrap: wrap; row-gap: var(--ln-sp5); column-gap: var(--ln-sp5); padding-block-start: var(--ln-sp9); padding-inline-end: var(--ln-sp15); padding-block-end: var(--ln-sp13); padding-inline-start: var(--ln-sp15); border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line);}
.ra-drawer a{padding-block: var(--ln-sp8); padding-inline: var(--ln-sp12); border-radius: var(--ln-rad2); background: var(--pg2); font-size: var(--ln-fs6); color: var(--mist);}
.ra-open .ra-drawer{display: flex;}

/* ---------- hero ---------- */
.ra-hero{
  padding-block-start: var(--ln-sp24);
  padding-inline-end: 0;
  padding-block-end: var(--ln-sp9);
  padding-inline-start: 0;
  background: radial-gradient(900px 420px at 86% -8%,rgba(23,168,155,.2),transparent 70%),
  radial-gradient(640px 320px at 6% 4%,rgba(232,163,61,.08),transparent 72%);
}
.ra-hero .w{display: grid; grid-template-columns: 1.06fr .94fr; row-gap: var(--ln-sp23); column-gap: var(--ln-sp23); align-items: center;}
.ra-hero .bd{min-width: 0;}
.ra-hero .eb{
  display: inline-block;
  margin-block-end: var(--ln-sp11);
  padding-block: var(--ln-sp4);
  padding-inline: var(--ln-sp11);
  border-radius: var(--ln-rad5);
  background: var(--wash);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(23,168,155,.34);
  color: var(--teal2);
  font-size: var(--ln-fs2);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ra-hero h1{font-size: clamp(28px,4.4vw,45px);}
.ra-hero .lead{margin-block-start: var(--ln-sp14); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; font-size: 16.5px; color: #C7D4E3;}
.ra-hero .act{display: flex; flex-wrap: wrap; row-gap: var(--ln-sp9); column-gap: var(--ln-sp9); margin-block-start: var(--ln-sp18); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0;}
.ra-hero .fine{margin-block-start: var(--ln-sp12); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; font-size: var(--ln-fs2); color: var(--mute);}
.ra-hero .pic{
  min-width: 0;
  border-radius: var(--ln-rad4);
  overflow-x: hidden;
  overflow-y: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line2);
  box-shadow: 0 26px 60px rgba(4,9,18,.6);
}
.ra-hero .pic img{width: 100%; height: auto; object-fit: cover; object-position: 50% 36%;}

/* ---------- figure row ---------- */
.ra-figs{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--gap); column-gap: var(--gap);}
.ra-figs>div{
  min-width: 0;
  padding-block: var(--ln-sp15);
  padding-inline: var(--ln-sp13);
  border-radius: var(--rad);
  background: var(--card);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  text-align: center;
}
.ra-figs b{display: block; font-size: clamp(19px,2.3vw,26px); color: var(--amber); line-height: 1.2;}
.ra-figs span{display: block; margin-block-start: var(--ln-sp4); font-size: var(--ln-fs3); color: var(--mute);}

/* ---------- sections ---------- */
.ra-sec{padding-block: calc(var(--sec)/2); padding-inline: 0;}
.ra-sec.pad{padding-block-start: var(--ln-sp25); padding-inline-end: 0; padding-block-end: var(--sec); padding-inline-start: 0;}
.ra-hd{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--ln-sp19); margin-inline-start: 0;}
.ra-hd h2{font-size: clamp(21px,2.8vw,30px);}
.ra-hd p{margin-block-start: var(--ln-sp8); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; color: var(--mute); font-size: var(--ln-fs10); max-width: 62ch;}

/* ---------- advantage cards ---------- */
.ra-adv{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--gap); column-gap: var(--gap);}
.ra-card{
  min-width: 0;
  padding-block: 19px;
  padding-inline: var(--ln-sp16);
  border-radius: var(--rad);
  background: var(--card);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ra-card i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-block-end: var(--ln-sp11);
  border-radius: var(--ln-rad3);
  background: var(--wash);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(23,168,155,.3);
  font-style: normal;
  font-size: var(--ln-fs13);
  color: var(--teal2);
  font-weight: 700;
}
.ra-card b{display: block; margin-block-end: var(--ln-sp6); font-size: var(--ln-fs11);}
.ra-card p{margin-block: 0; margin-inline: 0; font-size: 14.3px; color: #B4C2D3;}

/* ---------- image splits ---------- */
.ra-split{display: grid; grid-template-columns: .95fr 1.05fr; row-gap: var(--ln-sp22); column-gap: var(--ln-sp22); align-items: center;}
.ra-split.flip .pic{order: 2;}
.ra-split .pic{min-width: 0; border-radius: 18px; overflow-x: hidden; overflow-y: hidden; border-width: 1px; border-style: solid; border-color: var(--line2);}
.ra-split .pic img{width: 100%; height: auto; object-fit: cover; object-position: 50% 38%;}
.ra-split .bd{min-width: 0;}
.ra-split .bd h2{margin-block-end: var(--ln-sp11); font-size: clamp(20px,2.6vw,28px);}
.ra-split .bd p{font-size: var(--ln-fs10); color: #BDCAD9;}
.ra-split .bd p:last-child{margin-block-end: 0;}

/* ---------- four step start ---------- */
.ra-start{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: var(--gap);
  column-gap: var(--gap);
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
  counter-reset: tvs;
}
.ra-start li{
  position: relative;
  min-width: 0;
  margin-block: 0;
  margin-inline: 0;
  padding-block-start: 38px;
  padding-inline-end: var(--ln-sp15);
  padding-block-end: var(--ln-sp17);
  padding-inline-start: var(--ln-sp15);
  border-radius: var(--rad);
  background: linear-gradient(176deg,rgba(23,168,155,.11),rgba(21,32,51,.6));
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ra-start li::before{
  counter-increment: tvs;
  content: counter(tvs);
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--ln-rad1);
  background: var(--teal);
  color: #06231F;
  font-size: var(--ln-fs6);
  font-weight: 800;
}
.ra-start b{display: block; margin-block-end: var(--ln-sp5); font-size: var(--ln-fs10);}
.ra-start p{margin-block: 0; margin-inline: 0; font-size: var(--ln-fs7); color: #B4C2D3;}
.ra-start.lean{grid-template-columns: 1fr 1fr;}

/* ---------- tier cards ---------- */
.ra-tiers{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--ln-sp19); column-gap: var(--ln-sp19); align-items: start;}
.ra-tier{
  position: relative;
  min-width: 0;
  padding-block: var(--ln-sp20);
  padding-inline: var(--ln-sp18);
  border-radius: 17px;
  background: var(--card);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  display: flex;
  flex-direction: column;
}
.ra-tier.up{
  margin-block-start: -14px;
  padding-block-start: 32px;
  border-color: rgba(23,168,155,.52);
  background: linear-gradient(172deg,rgba(23,168,155,.16),rgba(21,32,51,.84));
  box-shadow: 0 20px 48px rgba(4,9,18,.5);
}
.ra-tier .rib{
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-block: var(--ln-sp4);
  padding-inline: var(--ln-sp13);
  border-radius: var(--ln-rad5);
  background: var(--amber);
  color: #2A1B06;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  white-space: nowrap;
}
.ra-tier b{font-size: var(--ln-fs14); letter-spacing: .02em;}
.ra-tier small{display: block; margin-block-start: var(--ln-sp4); margin-inline-end: 0; margin-block-end: var(--ln-sp13); margin-inline-start: 0; color: var(--mute); font-size: var(--ln-fs5);}
.ra-tier .amt{display: block; margin-block-end: var(--ln-sp14); font-size: 24px; font-weight: 800; color: var(--amber);}
.ra-tier ul{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--ln-sp18); margin-inline-start: 0; padding-block: 0; padding-inline: 0; list-style-type: none; list-style-position: outside; list-style-image: none;}
.ra-tier li{position: relative; margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--ln-sp8); margin-inline-start: 0; padding-inline-start: 23px; font-size: var(--ln-fs7); color: #BDCAD9;}
.ra-tier li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 7px;
  width: 12px;
  height: 7px;
  border-inline-start-width: 2px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--teal2);
  border-block-end-width: 2px;
  border-block-end-style: solid;
  border-block-end-color: var(--teal2);
  transform: rotate(-45deg);
}
.ra-tier .ra-b{margin-block-start: auto; width: 100%;}

/* ---------- cashier cards ---------- */
.ra-cash{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: var(--gap); column-gap: var(--gap);}

/* ---------- comparison + data tables ---------- */
.ra-tw{overflow-x: auto; border-radius: var(--rad); border-width: 1px; border-style: solid; border-color: var(--line); background: var(--card);}
.ra-cmp,.ra-tbl{width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--ln-fs8);}
.ra-cmp th,.ra-tbl th{
  padding-block: var(--ln-sp13);
  padding-inline: var(--ln-sp14);
  text-align: left;
  font-size: var(--ln-fs2);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal2);
  background: rgba(23,168,155,.12);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--line2);
}
.ra-cmp td,.ra-tbl td{padding-block: var(--ln-sp12); padding-inline: var(--ln-sp14); border-block-end-width: 1px; border-block-end-style: solid; border-block-end-color: var(--line); vertical-align: top;}
.ra-cmp tr:last-child td,.ra-tbl tr:last-child td{border-block-end-width: 0; border-block-end-style: none; border-block-end-color: currentcolor;}
.ra-cmp tbody tr:nth-child(even),.ra-tbl tbody tr:nth-child(even){background: rgba(9,15,27,.4);}
.ra-cmp td.y{color: #C6F3EB; font-weight: 600;}
.ra-cmp td.y::before{content: "\2713\00a0\00a0"; color: var(--teal2); font-weight: 800;}
.ra-cmp td.n{color: #A9B6C6;}
.ra-cmp td.n::before{content: "\2715\00a0\00a0"; color: var(--bad); font-weight: 800;}

/* ---------- member voices ---------- */
.ra-voices{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: var(--gap); column-gap: var(--gap);}
.ra-v{
  min-width: 0;
  margin-block: 0;
  margin-inline: 0;
  padding-block: var(--ln-sp18);
  padding-inline: var(--ln-sp17);
  border-radius: var(--rad);
  background: var(--card);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ra-v .hd{display: flex; align-items: center; row-gap: var(--ln-sp10); column-gap: var(--ln-sp10); margin-block-end: var(--ln-sp11); min-width: 0;}
.ra-v .av{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wash);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(23,168,155,.3);
  font-size: var(--ln-fs12);
}
.ra-v .hd div{min-width: 0;}
.ra-v .hd b{display: block; font-size: var(--ln-fs8);}
.ra-v .hd small{display: block; color: var(--mute); font-size: var(--ln-fs2);}
.ra-v .rt{margin-inline-start: auto; flex-grow: 0; flex-shrink: 0; flex-basis: auto; color: var(--amber); font-size: var(--ln-fs2); letter-spacing: .06em;}
.ra-v blockquote{margin-block: 0; margin-inline: 0; font-size: 14.4px; color: #BDCAD9; line-height: 1.66;}

/* ---------- walls, chips, tiles ---------- */
.ra-wall{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: var(--ln-sp10); column-gap: var(--ln-sp10); margin-block-start: var(--ln-sp19);}
.ra-wall .lg{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 54px;
  padding-block: var(--ln-sp8);
  padding-inline: var(--ln-sp8);
  border-radius: var(--ln-rad3);
  background: #f6f2fb;
  border-width: 1px;
  border-style: solid;
  border-color: #ded0f0;
}
.ra-wall .lg img{
  min-width: 0;
  max-width: 112px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ra-wall .lg.tx{font-size: var(--ln-fs2); color: var(--mute); text-align: center; line-height: 1.25;}
.ra-chips{display: flex; flex-wrap: wrap; row-gap: var(--ln-sp7); column-gap: var(--ln-sp7); margin-block-start: var(--ln-sp13);}
.ra-chips span{
  padding-block: var(--ln-sp6);
  padding-inline: var(--ln-sp12);
  border-radius: var(--ln-rad5);
  background: rgba(23,168,155,.08);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  font-size: var(--ln-fs3);
  color: #B4C2D3;
  white-space: nowrap;
}
.ra-tiles{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: var(--ln-sp11); column-gap: var(--ln-sp11);}
.ra-tiles span{display: block; min-width: 0; border-radius: 12px; overflow-x: hidden; overflow-y: hidden; border-width: 1px; border-style: solid; border-color: var(--line);}
.ra-tiles span img{width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;}

/* ---------- prose ---------- */
.ra-prose{max-width: 82ch;}
.ra-prose h2{margin-block-start: var(--ln-sp24); margin-inline-end: 0; margin-block-end: var(--ln-sp12); margin-inline-start: 0; font-size: clamp(19px,2.4vw,26px);}
.ra-prose h2:first-child{margin-block-start: 0;}
.ra-prose h3{margin-block-start: var(--ln-sp20); margin-inline-end: 0; margin-block-end: var(--ln-sp9); margin-inline-start: 0; font-size: var(--ln-fs12);}
.ra-prose p,.ra-prose li{font-size: 15.6px; color: #C2CFDE;}
.ra-prose .lead{font-size: 17px; color: #D4DFEC;}
.ra-prose ul,.ra-prose ol{margin-block-start: 0; margin-inline-end: 0; margin-block-end: 1.1em; margin-inline-start: 0; padding-inline-start: 1.25em;}
.ra-prose .act{display: flex; flex-wrap: wrap; row-gap: var(--ln-sp9); column-gap: var(--ln-sp9); margin-block-start: var(--ln-sp17); margin-inline-end: 0; margin-block-end: var(--ln-sp21); margin-inline-start: 0;}
.ra-prose .ra-tw{margin-block-start: var(--ln-sp19); margin-inline-end: 0; margin-block-end: var(--ln-sp22); margin-inline-start: 0;}

/* ---------- faq ---------- */
.ra-faq{display: grid; row-gap: var(--ln-sp10); column-gap: var(--ln-sp10); margin-block-start: var(--ln-sp15);}
.ra-faq details{border-radius: var(--rad); background: var(--card); border-width: 1px; border-style: solid; border-color: var(--line); overflow-x: hidden; overflow-y: hidden;}
.ra-faq summary{
  padding-block-start: var(--ln-sp14);
  padding-inline-end: 44px;
  padding-block-end: var(--ln-sp14);
  padding-inline-start: var(--ln-sp16);
  cursor: pointer;
  font-weight: 600;
  font-size: 15.3px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
  position: relative;
}
.ra-faq summary::-webkit-details-marker{display: none;}
.ra-faq summary::after{content: "+"; position: absolute; inset-inline-end: 17px; inset-block-start: 13px; font-size: var(--ln-fs14); color: var(--teal2);}
.ra-faq details[open] summary::after{content: "\2013";}
.ra-faq details>div{padding-block-start: 0; padding-inline-end: var(--ln-sp16); padding-block-end: var(--ln-sp14); padding-inline-start: var(--ln-sp16);}
.ra-faq p{margin-block: 0; margin-inline: 0; font-size: 14.8px; color: #B4C2D3;}

/* ---------- closing band ---------- */
.ra-band{
  margin-block-start: calc(var(--sec)/2);
  margin-inline-end: 0;
  margin-block-end: var(--sec);
  margin-inline-start: 0;
  background: linear-gradient(100deg,#0F3D39,#15564E 54%,#0F3D39);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: rgba(23,168,155,.3);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: rgba(23,168,155,.3);
}
.ra-band .w{display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--ln-sp18); column-gap: var(--ln-sp18); padding-block-start: var(--ln-sp23); padding-block-end: var(--ln-sp23);}
.ra-band b{flex-grow: 1; flex-shrink: 1; flex-basis: 320px; min-width: 0; font-size: clamp(18px,2.3vw,24px); line-height: 1.34;}
.ra-band .ra-b{flex-grow: 0; flex-shrink: 0; flex-basis: auto;}

/* ---------- footer ---------- */
.ra-foot{
  margin-block-start: var(--sec);
  padding-block-start: var(--ln-sp25);
  padding-inline-end: 0;
  padding-block-end: calc(var(--barh) + 34px);
  padding-inline-start: 0;
  background: var(--deep);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
}
.ra-foot .row{display: grid; grid-template-columns: 1.5fr repeat(4,1fr); row-gap: var(--ln-sp21); column-gap: var(--ln-sp21); margin-block-end: var(--ln-sp23);}
.ra-foot .ab{min-width: 0;}
.ra-foot .ab p{margin-block-start: var(--ln-sp12); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; font-size: var(--ln-fs4); color: var(--mute); line-height: 1.7;}
.ra-foot h4{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--ln-sp10); margin-inline-start: 0; font-size: var(--ln-fs2); letter-spacing: .08em; text-transform: uppercase; color: var(--teal2);}
.ra-foot .row>div a{
  display: block;
  min-height: 26px;
  padding-block: var(--ln-sp2);
  padding-inline: 0;
  margin-block-end: var(--ln-sp2);
  font-size: 13.6px;
  color: #A9B6C6;
}
.ra-foot .pay,.ra-foot .cert{display: flex; flex-wrap: wrap; row-gap: var(--ln-sp9); column-gap: var(--ln-sp9); padding-block: var(--ln-sp17); padding-inline: 0; border-block-start-width: 1px; border-block-start-style: solid; border-block-start-color: var(--line);}
.ra-foot .pay span,.ra-foot .cert span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 34px;
  padding-block: 0;
  padding-inline: var(--ln-sp10);
  border-radius: var(--ln-rad2);
  background: rgba(21,32,51,.7);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ra-foot .pay img{
  min-width: 0;
  max-height: 19px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .92;
}
.ra-foot .cert img{
  min-width: 0;
  max-height: 22px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .85;
}
.ra-foot .base{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: var(--ln-sp13);
  column-gap: var(--ln-sp13);
  padding-block-start: var(--ln-sp17);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
}
.ra-foot .age{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--bad);
  color: var(--bad);
  font-size: var(--ln-fs3);
  font-weight: 800;
}
.ra-foot .base p{flex-grow: 1; flex-shrink: 1; flex-basis: 320px; min-width: 0; margin-block: 0; margin-inline: 0; font-size: var(--ln-fs3); color: var(--mute);}
.ra-foot .base small{flex-grow: 1; flex-shrink: 1; flex-basis: 100%; font-size: 12.3px; color: #6C7A8C;}

/* ---------- sticky join bar ---------- */
.ra-join{
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  row-gap: var(--ln-sp11);
  column-gap: var(--ln-sp11);
  padding-block: var(--ln-sp8);
  padding-inline: var(--ln-sp13);
  background: rgba(9,15,27,.96);
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: rgba(23,168,155,.34);
  backdrop-filter: blur(8px);
}
.ra-join.off{display: none;}
.ra-join .t{
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  font-size: var(--ln-fs4);
  color: #B4C2D3;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ra-join .t b{margin-inline-end: var(--ln-sp5); color: var(--amber); font-size: var(--ln-fs11);}
.ra-join .ra-b{flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.ra-join .x{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 44px;
  height: 38px;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--ln-rad2);
  color: var(--mute);
  font-size: var(--ln-fs12);
  line-height: 1;
  cursor: pointer;
}

/* ---------- entry modal ---------- */
.ra-pop{
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--ln-sp17);
  padding-inline: var(--ln-sp17);
  background: rgba(4,9,18,.78);
}
.ra-pop[hidden]{display: none;}
.ra-pop .bx{
  position: relative;
  width: 100%;
  max-width: 388px;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: var(--ln-rad4);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(23,168,155,.4);
  background: linear-gradient(170deg,#132A3C,#0C1726 62%);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
}
.ra-pop .x{
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(9,15,27,.8);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line2);
  color: var(--mist);
  font-size: var(--ln-fs13);
  line-height: 1;
  cursor: pointer;
}
.ra-pop .pans{padding-block-start: var(--ln-sp23); padding-inline-end: var(--ln-sp19); padding-block-end: var(--ln-sp9); padding-inline-start: var(--ln-sp19); overflow-y: auto;}
.ra-pop .pan{display: block;}
.ra-pop .pan.off{display: none !important;}
.ra-pop .tag{
  display: inline-block;
  margin-block-end: var(--ln-sp11);
  padding-block: var(--ln-sp3);
  padding-inline: var(--ln-sp10);
  border-radius: var(--ln-rad5);
  background: var(--wash);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(23,168,155,.34);
  font-size: var(--ln-fs1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal2);
}
.ra-pop .big{display: block; font-size: 46px; line-height: 1.05; color: var(--amber);}
.ra-pop em{display: block; margin-block-start: var(--ln-sp4); margin-inline-end: 0; margin-block-end: var(--ln-sp11); margin-inline-start: 0; font-style: normal; font-size: 14.5px; color: #C7D4E3;}
.ra-pop p{font-size: var(--ln-fs7); color: #AFBDCE;}
.ra-pop .pan .ra-b{width: 100%; margin-block-start: var(--ln-sp3);}
.ra-pop .pg{display: flex; justify-content: center; row-gap: var(--ln-sp3); column-gap: var(--ln-sp3); padding-block-start: var(--ln-sp9); padding-inline-end: 0; padding-block-end: var(--ln-sp15); padding-inline-start: 0;}
.ra-pop .dot{
  width: 46px;
  height: 26px;
  border-radius: var(--ln-rad5);
  background: transparent;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  padding-block: 0;
  padding-inline: 0;
  cursor: pointer;
  position: relative;
}
.ra-pop .dot::after{
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  inset-inline-end: 8px;
  inset-block-start: 10px;
  height: 6px;
  border-radius: var(--ln-rad5);
  background: rgba(135,160,190,.3);
}
.ra-pop .dot.on::after{background: var(--teal2);}


/* ---------- breakpoints ---------- */
@media (max-width:1000px){
  .ra-adv{grid-template-columns: 1fr 1fr;}
  .ra-cash{grid-template-columns: 1fr 1fr;}
  .ra-start{grid-template-columns: 1fr 1fr;}
  .ra-wall{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
  .ra-tiles{grid-template-columns: 1fr 1fr 1fr 1fr;}
  .ra-foot .row{grid-template-columns: 1fr 1fr;}
  .ra-pills{display: none;}
}
@media (max-width:860px){
  :root{--sec: 40px;}
  .ra-hero .w{grid-template-columns: 1fr; row-gap: var(--ln-sp19); column-gap: var(--ln-sp19);}
  .ra-hero .pic{order: 2;}
  .ra-split{grid-template-columns: 1fr; row-gap: var(--ln-sp18); column-gap: var(--ln-sp18);}
  .ra-split.flip .pic{order: 0;}
  .ra-tiers{grid-template-columns: 1fr; row-gap: var(--ln-sp21); column-gap: var(--ln-sp21);}
  .ra-tier.up{margin-block-start: 0;}
  .ra-voices{grid-template-columns: 1fr;}
  .ra-burger{display: flex;}
  .ra-bar .ra-b.hid{display: none;}
}
@media (max-width:620px){
  body{font-size: var(--ln-fs10);}
  .ra-figs{grid-template-columns: 1fr 1fr;}
  .ra-adv{grid-template-columns: 1fr;}
  .ra-cash{grid-template-columns: 1fr;}
  .ra-start,.ra-start.lean{grid-template-columns: 1fr;}
  .ra-start li{padding-block-start: 36px; padding-inline-end: var(--ln-sp14); padding-block-end: var(--ln-sp15); padding-inline-start: var(--ln-sp14);}
  .ra-wall{grid-template-columns: 1fr 1fr 1fr;}
  .ra-tiles{grid-template-columns: 1fr 1fr 1fr;}
  .ra-foot .row{grid-template-columns: 1fr; row-gap: var(--ln-sp18); column-gap: var(--ln-sp18);}
  .ra-hero{padding-block-start: var(--ln-sp15);}
  .ra-hero h1{font-size: 25.5px;}
  .ra-hero .eb{margin-block-end: var(--ln-sp8); padding-block: var(--ln-sp3); padding-inline: var(--ln-sp10); font-size: var(--ln-fs1);}
  .ra-hero .lead{margin-block-start: var(--ln-sp10); font-size: var(--ln-fs9); line-height: 1.56;}
  .ra-hero .act{margin-block-start: var(--ln-sp14);}
  .ra-hero .act .ra-b{flex-grow: 1; flex-shrink: 1; flex-basis: 100%;}
  .ra-band .w{padding-block-start: var(--ln-sp20); padding-block-end: var(--ln-sp20);}
  .ra-join{row-gap: var(--ln-sp7); column-gap: var(--ln-sp7); padding-block: var(--ln-sp7); padding-inline: var(--ln-sp10);}
  .ra-join .t{display: none;}
  .ra-join .ra-b{flex-grow: 1; flex-shrink: 1; flex-basis: auto; padding-block: 0; padding-inline: var(--ln-sp11);}
  .ra-strip p{display: none;}
  .ra-strip .w{min-height: 34px;}
  .ra-pop .big{font-size: 38px;}
  .ra-pop .pans{padding-block-start: var(--ln-sp21); padding-inline-end: var(--ln-sp17); padding-block-end: var(--ln-sp5); padding-inline-start: var(--ln-sp17);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior: auto;}
  *{transition-property: none !important; transition-duration: 0s !important; transition-timing-function: ease !important; transition-delay: 0s !important; animation-name: none !important; animation-duration: 0s !important; animation-timing-function: ease !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important;}
}

/* Only near-black artwork is lifted to a white mark. A SOLID badge (Touch 'n Go,
   Maybank) silhouettes into a featureless white block, so it keeps its own colour. */
.ra-foot .pay img.lift{filter: brightness(0) invert(1) opacity(.88);}
.ra-foot .cert img.lift{filter: brightness(0) invert(1) opacity(.8);}