/* VR7 Malaysia landing: light cream page, deep jade ink, turquoise accent. The one light
   shell in the cluster. Namespaced .vn-

   How this sheet is written:
     - The gaps and insets, the type sizes, the font stacks and the stacking orders used
       more than once are named once in :root as --t-* 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;
     - the font shorthand is opened out into its longhands;
     - repeat() tracks are written out. */

:root {
  --navy: #f7f4ec;
  --navy-2: #ffffff;
  --navy-3: #eee9dc;
  --navy-4: #e2dccb;
  --amb: #037a6c;
  --amb-2: #025f56;
  --amb-3: #01423c;
  --warm: #0f7f72;
  --warm-2: #015147;
  --txt: #122b28;
  --mut: #5c7470;
  --line: rgba(1,66,60,.17);
  --line-2: rgba(18,43,40,.12);
  --ok: #17875c;
  --tab: 60px;
  --font: Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;
  --disp: Georgia,"Times New Roman",serif;

  /* named values used more than once */
  --t-sp1: 1px;
  --t-sp2: 2px;
  --t-sp3: 3px;
  --t-sp4: 4px;
  --t-sp5: 5px;
  --t-sp6: 6px;
  --t-sp7: 7px;
  --t-sp8: 8px;
  --t-sp9: 9px;
  --t-sp10: 10px;
  --t-sp11: 11px;
  --t-sp12: 12px;
  --t-sp13: 13px;
  --t-sp14: 14px;
  --t-sp15: 15px;
  --t-sp16: 16px;
  --t-sp17: 17px;
  --t-sp18: 18px;
  --t-sp19: 20px;
  --t-sp20: 22px;
  --t-sp21: 24px;
  --t-sp22: 26px;
  --t-sp23: 28px;
  --t-sp24: 30px;
  --t-sp25: 34px;
  --t-fs1: 10.5px;
  --t-fs2: 11px;
  --t-fs3: 11.5px;
  --t-fs4: 12px;
  --t-fs5: 12.5px;
  --t-fs6: 13px;
  --t-fs7: 13.5px;
  --t-fs8: 14.5px;
  --t-fs9: 15.5px;
  --t-fs10: 16.5px;
  --t-fs11: 17px;
  --t-fs12: 20px;
  --t-fs13: 21px;
  --t-fs14: 22px;
  --t-fs15: 23px;
  --t-fs16: 26px;
  --t-fs17: 27px;
  --t-fs18: 31px;
  --t-fs19: 34px;
  --t-z1: 60;
}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; scroll-behavior: smooth;}
body{margin-block: 0; margin-inline: 0; color: var(--txt); font-family: var(--font); line-height: 1.65; background: var(--navy);}
a{color: var(--amb); text-decoration: none;}
img{max-width: 100%; height: auto; display: block;}
h1,h2,h3,h4{margin-block: 0; margin-inline: 0; line-height: 1.24;}
table{border-collapse: collapse; width: 100%;}
.w{max-width: 71.25rem; margin-block: 0; margin-inline: auto; padding-block: 0; padding-inline: var(--t-sp19);}

/* ---------- buttons ---------- */
.vn-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--t-sp8);
  column-gap: var(--t-sp8);
  min-height: 2.75rem;
  padding-block: 0;
  padding-inline: var(--t-sp18);
  border-radius: 0.4375rem;
  font-weight: 800;
  font-size: 0.875rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  line-height: 1.2;
}
.vn-btn.a{background: linear-gradient(180deg,var(--amb-3),var(--amb)); color: #f3fffd;}
.vn-btn.o{background: transparent; color: var(--txt); border-color: var(--line-2);}
.vn-btn.r{background: linear-gradient(180deg,var(--warm),var(--warm-2)); color: #0d2320;}
.vn-btn.lg{min-height: 3.125rem; font-size: var(--t-fs9); padding-block: 0; padding-inline: var(--t-sp21);}

/* ---------- header ---------- */
.vn-head{
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(247,244,236,.96);
  border-block-end-width: 0.0625rem;
  border-block-end-style: solid;
  border-block-end-color: var(--line-2);
  backdrop-filter: saturate(1.3) blur(0.375rem);
}
.vn-head .w{display: flex; align-items: center; row-gap: var(--t-sp16); column-gap: var(--t-sp16); padding-block-start: var(--t-sp11); padding-block-end: var(--t-sp11);}
.vn-logo{display: flex; align-items: center; row-gap: var(--t-sp9); column-gap: var(--t-sp9); flex: none;}
.vn-logo svg{width: 2.125rem; height: 2.375rem; flex: none;}
.vn-logo .wm{display: flex; flex-direction: column; line-height: 1;}
.vn-logo .wm b{font-family: var(--disp); font-size: var(--t-fs15); letter-spacing: .02em; white-space: nowrap; color: var(--amb);}
.vn-logo .wm small{
  font-size: 0.5rem;
  letter-spacing: .3em;
  color: var(--mut);
  font-weight: 700;
  margin-block-start: var(--t-sp4);
  white-space: nowrap;
}
.vn-pills{display: flex; flex: 1; flex-wrap: wrap; row-gap: var(--t-sp5); column-gap: var(--t-sp5); min-width: 0;}
.vn-pills a{
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding-block: 0;
  padding-inline: var(--t-sp12);
  border-radius: 62.4375rem;
  font-size: var(--t-fs5);
  font-weight: 700;
  color: var(--mut);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  white-space: nowrap;
}
.vn-pills a:hover{color: var(--txt); border-color: var(--line-2);}
.vn-lang{display: flex; row-gap: var(--t-sp3); column-gap: var(--t-sp3); flex: none;}
.vn-lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.75rem;
  border-radius: 0.375rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--mut);
  font-size: var(--t-fs3);
  font-weight: 700;
  padding-block: 0;
  padding-inline: var(--t-sp6);
  white-space: nowrap;
}
.vn-lang a.on{background: var(--amb); color: #f3fffd; border-color: transparent;}
.vn-burger{
  display: none;
  background: var(--navy-3);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--amb);
  font-size: var(--t-fs11);
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 0.4375rem;
  cursor: pointer;
}
.vn-drawer{display: none; flex-wrap: wrap; row-gap: var(--t-sp6); column-gap: var(--t-sp6); padding-block-start: 0; padding-inline-end: var(--t-sp19); padding-block-end: var(--t-sp13); padding-inline-start: var(--t-sp19);}
.vn-open .vn-drawer{display: flex;}
.vn-drawer a{
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-block: 0;
  padding-inline: var(--t-sp13);
  border-radius: 0.4375rem;
  background: var(--navy-3);
  color: var(--txt);
  font-size: var(--t-fs6);
  font-weight: 700;
}

/* ---------- hero ---------- */
.vn-hero{padding-block-start: var(--t-sp22); padding-inline-end: 0; padding-block-end: var(--t-sp8); padding-inline-start: 0;}
.vn-hero.big{padding-block-start: var(--t-sp25); padding-inline-end: 0; padding-block-end: var(--t-sp10); padding-inline-start: 0;}
.vn-hero .w{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  row-gap: var(--t-sp23);
  column-gap: var(--t-sp23);
  align-items: center;
}
.vn-hero .bd{display: grid; row-gap: var(--t-sp13); column-gap: var(--t-sp13); align-content: start; min-width: 0;}
.vn-hero .eb{
  font-size: var(--t-fs1);
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amb-2);
}
.vn-hero h1{font-family: var(--disp); font-size: 2.375rem; line-height: 1.16; color: #0d2320;}
.vn-hero.big h1{font-size: 2.75rem;}
.vn-hero .lead{margin-block: 0; margin-inline: 0; font-size: var(--t-fs10); color: var(--mut); max-width: 56ch;}
.vn-hero .act{display: flex; flex-wrap: wrap; row-gap: var(--t-sp11); column-gap: var(--t-sp11);}
.vn-hero .chips{display: flex; flex-wrap: wrap; row-gap: var(--t-sp8); column-gap: var(--t-sp8); margin-block-start: var(--t-sp3);}
.vn-hero .chips span{
  display: inline-flex;
  align-items: center;
  row-gap: var(--t-sp7);
  column-gap: var(--t-sp7);
  padding-block: var(--t-sp7);
  padding-inline: var(--t-sp12);
  border-radius: 0.4375rem;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  font-size: var(--t-fs3);
  color: var(--mut);
  font-weight: 700;
  min-height: 2.25rem;
}
.vn-hero .chips i{font-style: normal; color: var(--amb); font-size: var(--t-fs6);}
.vn-hero>.w>img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0.875rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}

/* ---------- sections ---------- */
.vn-sec{padding-block: var(--t-sp20); padding-inline: 0;}
.vn-sec.pad{padding-block-start: var(--t-sp25);}
.vn-sec .sh{margin-block-end: var(--t-sp16);}
.vn-sec .sh h2{font-family: var(--disp); font-size: var(--t-fs16); color: #0d2320;}
.vn-sec .sh p{margin-block-start: var(--t-sp7); margin-inline-end: 0; margin-block-end: 0; margin-inline-start: 0; color: var(--mut); font-size: var(--t-fs8);}
.note{display: block; margin-block-start: var(--t-sp11); font-size: var(--t-fs4); color: var(--mut);}

/* stat row */
.vn-stats{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap: var(--t-sp12);
  column-gap: var(--t-sp12);
  padding-block: var(--t-sp18);
  padding-inline: var(--t-sp18);
  border-radius: 0.875rem;
  background: linear-gradient(180deg,var(--navy-2),var(--navy));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.vn-stats>div{min-width:0;display: grid; row-gap: var(--t-sp3); column-gap: var(--t-sp3); text-align: center;}
.vn-stats b{font-family: var(--disp); font-size: var(--t-fs19); color: var(--amb); line-height: 1;}
.vn-stats span{font-size: var(--t-fs3); color: var(--mut); line-height: 1.35;}

/* entry card: one offer, once per visitor, landing page only */
.vn-pop[hidden]{display: none;}
.vn-pop{
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--t-sp19);
  padding-inline: var(--t-sp19);
  background: rgba(6,24,22,.52);
}
.vn-pop .bx{
  position: relative;
  width: min(26.25rem,100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 1.0625rem;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: 0 1.375rem 3rem rgba(1,66,60,.28);
}
.vn-pop .bx>img{width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.vn-pop .x{
  position: absolute;
  inset-block-start: 0.5625rem;
  inset-inline-end: 0.5625rem;
  width: 2.0625rem;
  height: 2.0625rem;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--t-fs13);
  line-height: 1;
  color: #0d2320;
  background: rgba(255,255,255,.88);
}
.vn-pop .bd{display: grid; row-gap: var(--t-sp11); column-gap: var(--t-sp11); padding-block-start: var(--t-sp18); padding-inline-end: var(--t-sp19); padding-block-end: var(--t-sp19); padding-inline-start: var(--t-sp19);}
.vn-pop .bd b{font-family: var(--disp); font-size: var(--t-fs15); color: #0d2320; line-height: 1.25;}
.vn-pop .bd p{margin-block: 0; margin-inline: 0; font-size: var(--t-fs7); color: var(--mut); line-height: 1.6;}
.vn-pop ul{margin-block: 0; margin-inline: 0; padding-block: 0; padding-inline: 0; list-style-type: none; list-style-position: outside; list-style-image: none; display: grid; row-gap: var(--t-sp7); column-gap: var(--t-sp7);}
.vn-pop li{display: flex; align-items: baseline; row-gap: var(--t-sp10); column-gap: var(--t-sp10); font-size: var(--t-fs6); color: var(--txt);}
.vn-pop li b{flex: none; min-width: 3.25rem; font-family: var(--disp); font-size: var(--t-fs11); color: var(--amb);}
.vn-pop .later{
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-fs5);
  color: var(--mut);
  text-decoration: underline;
  padding-block: var(--t-sp2);
  padding-inline: var(--t-sp2);
}

/* offer strip: the four standing offers, sat directly under the hero on the landing page */
.vn-offers{
  border-radius: 0.9375rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  overflow-x: hidden;
  overflow-y: hidden;
  background: linear-gradient(180deg,var(--navy-2),var(--navy-3));
}
.vn-offers .hd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--t-sp14);
  column-gap: var(--t-sp14);
  padding-block: var(--t-sp16);
  padding-inline: var(--t-sp19);
  background: linear-gradient(110deg,var(--amb-3),var(--amb));
  border-block-end-width: 0.0625rem;
  border-block-end-style: solid;
  border-block-end-color: var(--line);
}
.vn-offers .hd h2{font-family: var(--disp); font-size: var(--t-fs13); color: #f3fffd;}
.vn-offers .gr{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap: var(--t-sp1);
  column-gap: var(--t-sp1);
  background: var(--line);
}
.vn-offers .of{
  display: grid;
  row-gap: var(--t-sp4);
  column-gap: var(--t-sp4);
  align-content: start;
  padding-block-start: var(--t-sp17);
  padding-inline-end: var(--t-sp18);
  padding-block-end: 1.1875rem;
  padding-inline-start: var(--t-sp18);
  background: var(--navy-2);
}
.vn-offers .of b{font-family: var(--disp); font-size: var(--t-fs18); color: var(--amb); line-height: 1;}
.vn-offers .of em{
  font-style: normal;
  font-size: var(--t-fs7);
  font-weight: 800;
  color: var(--txt);
  line-height: 1.4;
}
.vn-offers .of small{font-size: var(--t-fs4); color: var(--mut); line-height: 1.5;}

/* numbered index: the section list this page actually renders */
.vn-index{padding-block: var(--t-sp17); padding-inline: var(--t-sp18); border-radius: 0.875rem; background: var(--navy-2); border-width: 0.0625rem; border-style: solid; border-color: var(--line-2);}
.vn-index>b{
  display: block;
  font-size: var(--t-fs1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amb-2);
  margin-block-end: var(--t-sp11);
}
.vn-index>div{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--t-sp7); column-gap: var(--t-sp18);}
.vn-index a{
  display: flex;
  align-items: baseline;
  row-gap: var(--t-sp9);
  column-gap: var(--t-sp9);
  font-size: var(--t-fs6);
  color: var(--txt);
  padding-block: var(--t-sp5);
  padding-inline: 0;
  line-height: 1.45;
}
.vn-index em{
  flex: none;
  font-style: normal;
  font-weight: 900;
  font-size: var(--t-fs2);
  color: var(--amb-2);
  min-width: 1.0625rem;
}

/* category cards */
.vn-cats{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--t-sp15); column-gap: var(--t-sp15);}
.vn-cats .cc{
  display: grid;
  border-radius: 0.875rem;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  align-content: start;
}
.vn-cats .cc img{width: 100%; aspect-ratio: 16/10; object-fit: cover;}
.vn-cats .bd{display: grid; row-gap: var(--t-sp6); column-gap: var(--t-sp6); padding-block-start: var(--t-sp14); padding-inline-end: var(--t-sp15); padding-block-end: var(--t-sp17); padding-inline-start: var(--t-sp15);}
.vn-cats .bd b{font-size: var(--t-fs9); color: var(--amb);}
.vn-cats .bd p{margin-block: 0; margin-inline: 0; font-size: var(--t-fs6); color: var(--mut); line-height: 1.55;}

/* studio chips */
.vn-studios{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--t-sp11); column-gap: var(--t-sp11);}
.vn-studios .st{
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--t-sp9);
  column-gap: var(--t-sp9);
  min-height: 3.75rem;
  padding-block: var(--t-sp10);
  padding-inline: var(--t-sp12);
  border-radius: 0.6875rem;
  background: #0d2320;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  min-width: 0;
}
/* min-width:0 on both children is the whole fix. A flex item defaults to min-width:auto, so a
   wide wordmark asked for max-height:26px computes a 149px width, refuses to shrink, and is drawn
   outside the chip and over the label. max-width:100% does not help: it resolves against the
   chip, and 149 is already under that. */
.vn-studios .st img{
  max-height: 1.625rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  flex: 0 1 auto;
  min-width: 0;
}
.vn-studios .st em{font-style: normal; font-size: var(--t-fs4); font-weight: 800; color: #d8d1bf; min-width: 0;}

/* alternating splits */
.sp{
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  row-gap: var(--t-sp22);
  column-gap: var(--t-sp22);
  align-items: center;
  margin-block-end: var(--t-sp20);
}
.sp:last-child{margin-block-end: 0;}
.sp.alt img{order: 2;}
.sp img{width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.875rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line-2);}
.sp .bd h3{font-family: var(--disp); font-size: var(--t-fs14); color: #0d2320; margin-block-end: var(--t-sp9);}
.sp .bd p{margin-block: 0; margin-inline: 0; color: var(--mut); font-size: var(--t-fs8);}

/* deposit rail */
.vn-rail{display: grid; row-gap: 0; column-gap: 0; padding-inline-start: var(--t-sp6);}
.vn-rail .rw{
  display: grid;
  grid-template-columns: 1.875rem minmax(0,1fr);
  row-gap: var(--t-sp14);
  column-gap: var(--t-sp14);
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-block-end: var(--t-sp19);
  padding-inline-start: 0;
  position: relative;
}
.vn-rail .rw:last-child{padding-block-end: 0;}
.vn-rail .rw::before{
  content: "";
  position: absolute;
  inset-inline-start: 0.875rem;
  inset-block-start: 1.25rem;
  inset-block-end: 0;
  width: 0.125rem;
  background: var(--line-2);
}
.vn-rail .rw:last-child::before{display: none;}
.vn-rail .dot{
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--navy-2);
  border-width: 0.125rem;
  border-style: solid;
  border-color: var(--amb);
  position: relative;
  z-index: 2;
}
.vn-rail .dot::after{content: ""; position: absolute; inset-block: 0.4375rem; inset-inline: 0.4375rem; border-radius: 50%; background: var(--amb);}
.vn-rail .bd{display: grid; row-gap: var(--t-sp4); column-gap: var(--t-sp4);}
.vn-rail .bd b{font-size: 0.9375rem; color: #0d2320;}
.vn-rail .bd em{
  font-style: normal;
  justify-self: start;
  font-size: var(--t-fs2);
  font-weight: 800;
  padding-block: var(--t-sp3);
  padding-inline: var(--t-sp9);
  border-radius: 62.4375rem;
  background: rgba(23,135,92,.12);
  color: var(--ok);
}
.vn-rail .bd p{margin-block: 0; margin-inline: 0; font-size: var(--t-fs7); color: var(--mut);}

/* member cards */
.vn-members{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--t-sp15); column-gap: var(--t-sp15);}
.vn-members .mb{
  display: grid;
  row-gap: var(--t-sp11);
  column-gap: var(--t-sp11);
  align-content: start;
  padding-block: var(--t-sp17);
  padding-inline: var(--t-sp17);
  border-radius: 0.875rem;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
}
.vn-members .hd{display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; align-items: center; row-gap: var(--t-sp11); column-gap: var(--t-sp11);}
.vn-members .av{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: var(--t-fs12);
  background: var(--navy-3);
}
.vn-members .hd b{display: block; font-size: var(--t-fs7);}
.vn-members .hd small{display: block; font-size: var(--t-fs3); color: var(--mut);}
.vn-members .rt{color: var(--amb); font-size: var(--t-fs4); letter-spacing: .06em;}
.vn-members .mb p{margin-block: 0; margin-inline: 0; font-size: var(--t-fs7); color: var(--mut); line-height: 1.6;}

/* ---------- prose ---------- */
.vn-prose h1{font-family: var(--disp); font-size: var(--t-fs19); color: #0d2320; margin-block-end: var(--t-sp11);}
.vn-prose h2{font-family: var(--disp); font-size: var(--t-fs15); color: #0d2320; margin-block-start: var(--t-sp24); margin-inline-end: 0; margin-block-end: var(--t-sp10); margin-inline-start: 0; scroll-margin-top: 5.375rem;}
.vn-prose p{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp14); margin-inline-start: 0; color: #4c6764;}
.vn-prose .lead{font-size: var(--t-fs10); color: var(--mut); margin-block-end: var(--t-sp18);}
.vn-prose ul{margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp16); margin-inline-start: 0; padding-inline-start: var(--t-sp20); display: grid; row-gap: var(--t-sp7); column-gap: var(--t-sp7); color: #4c6764;}
.vn-prose .act{display: flex; flex-wrap: wrap; row-gap: var(--t-sp11); column-gap: var(--t-sp11); margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp20); margin-inline-start: 0;}
.vn-prose .vn-index{margin-block-end: var(--t-sp8);}
.vn-kpis{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap: var(--t-sp12);
  column-gap: var(--t-sp12);
  padding-block: var(--t-sp18);
  padding-inline: var(--t-sp18);
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-block-end: var(--t-sp20);
  margin-inline-start: 0;
  border-radius: 0.875rem;
  background: linear-gradient(180deg,var(--navy-2),var(--navy));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.vn-kpis>div{min-width:0;display: grid; row-gap: var(--t-sp3); column-gap: var(--t-sp3); text-align: center;}
.vn-kpis b{font-family: var(--disp); font-size: 1.875rem; color: var(--amb); line-height: 1;}
.vn-kpis span{font-size: var(--t-fs3); color: var(--mut); line-height: 1.35;}
.vn-steps{counter-reset: s; list-style-type: none; list-style-position: outside; list-style-image: none; margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp20); margin-inline-start: 0; padding-block: 0; padding-inline: 0; display: grid; row-gap: var(--t-sp10); column-gap: var(--t-sp10);}
.vn-steps li{
  counter-increment: s;
  position: relative;
  padding-block-start: var(--t-sp14);
  padding-inline-end: var(--t-sp16);
  padding-block-end: var(--t-sp14);
  padding-inline-start: 3.25rem;
  border-radius: 0.6875rem;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  color: #4c6764;
}
.vn-steps li::before{
  content: counter(s);
  position: absolute;
  inset-inline-start: 0.9375rem;
  inset-block-start: 0.8125rem;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--t-fs6);
  background: linear-gradient(180deg,var(--amb-3),var(--amb));
  color: #f3fffd;
}
.vn-tw{overflow-x: auto; border-radius: 0.75rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line-2); margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp20); margin-inline-start: 0;}
.vn-tbl{font-size: var(--t-fs7); min-width: 27.5rem; background: var(--navy-2);}
.vn-tbl th{
  background: var(--navy-3);
  color: var(--amb);
  text-align: left;
  padding-block: var(--t-sp11);
  padding-inline: var(--t-sp14);
  font-size: var(--t-fs3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vn-tbl td{padding-block: var(--t-sp11); padding-inline: var(--t-sp14); border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line-2); color: #4c6764;}
.vn-faq{display: grid; row-gap: var(--t-sp9); column-gap: var(--t-sp9); margin-block-start: 0; margin-inline-end: 0; margin-block-end: var(--t-sp20); margin-inline-start: 0;}
.vn-faq details{border-radius: 0.6875rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line-2); background: var(--navy-2);}
.vn-faq summary{cursor: pointer; padding-block: var(--t-sp14); padding-inline: var(--t-sp16); font-weight: 800; font-size: var(--t-fs8); color: var(--amb);}
.vn-faq p{margin-block: 0; margin-inline: 0; padding-block-start: 0; padding-inline-end: var(--t-sp16); padding-block-end: var(--t-sp15); padding-inline-start: var(--t-sp16); color: #4c6764;}
.vn-band{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--t-sp16);
  column-gap: var(--t-sp16);
  max-width: 68.75rem;
  margin-block-start: var(--t-sp14);
  margin-inline-end: auto;
  margin-block-end: var(--t-sp25);
  margin-inline-start: auto;
  padding-block: var(--t-sp20);
  padding-inline: var(--t-sp21);
  border-radius: 0.9375rem;
  background: linear-gradient(110deg,var(--warm-2),var(--warm));
  width: calc(100% - 2.5rem);
}
.vn-band b{font-size: var(--t-fs11); line-height: 1.4; max-width: 60ch; color: #0d2320;}

/* ---------- footer ---------- */
.vn-foot{background: #ffffff; border-block-start-width: 0.0625rem; border-block-start-style: solid; border-block-start-color: var(--line-2); margin-block-start: var(--t-sp8);}
.vn-foot .w{padding-block-start: var(--t-sp24); padding-block-end: var(--t-sp22); display: grid; row-gap: var(--t-sp20); column-gap: var(--t-sp20);}
.vn-foot .top{display: grid; grid-template-columns: 1.7fr repeat(4,1fr); row-gap: var(--t-sp21); column-gap: var(--t-sp21);}
.vn-foot .ab{display: grid; row-gap: var(--t-sp11); column-gap: var(--t-sp11); align-content: start;}
.vn-foot .ab p{margin-block: 0; margin-inline: 0; font-size: var(--t-fs5); color: var(--mut); line-height: 1.65;}
.vn-foot .top>div{display: grid; row-gap: var(--t-sp8); column-gap: var(--t-sp8); align-content: start; min-width: 0;}
.vn-foot h4{font-size: var(--t-fs2); letter-spacing: .15em; text-transform: uppercase; color: var(--amb);}
.vn-foot a{color: var(--mut); font-size: var(--t-fs6);}
.vn-foot .pay,.vn-foot .trust{
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--t-sp9);
  column-gap: var(--t-sp9);
  padding-block-start: var(--t-sp18);
  border-block-start-width: 0.0625rem;
  border-block-start-style: solid;
  border-block-start-color: var(--line-2);
}
.vn-foot .pay span,.vn-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.125rem;
  padding-block: 0;
  padding-inline: var(--t-sp11);
  border-radius: 0.4375rem;
  background: #0d2320;
}
.vn-foot .pay img{max-height: 1.1875rem; width: auto; object-fit: contain;}
.vn-foot .trust img{max-height: 1.3125rem; width: auto; object-fit: contain;}
.vn-foot .legal{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--t-sp13);
  column-gap: var(--t-sp13);
  padding-block-start: var(--t-sp17);
  border-block-start-width: 0.0625rem;
  border-block-start-style: solid;
  border-block-start-color: var(--line-2);
}
.vn-foot .legal p{margin-block: 0; margin-inline: 0; flex: 1; min-width: 15rem; font-size: var(--t-fs5); color: var(--mut);}
.vn-foot .legal small{font-size: var(--t-fs4); color: var(--mut);}
.vn-foot .age{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border-width: 0.125rem;
  border-style: solid;
  border-color: var(--amb-2);
  color: var(--amb);
  font-weight: 900;
  font-size: var(--t-fs2);
}

/* ---------- sticky join bar (desktop) + tab bar (phone) ---------- */
.vn-sticky{
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  z-index: var(--t-z1);
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--t-sp14);
  column-gap: var(--t-sp14);
  padding-block: var(--t-sp11);
  padding-inline: var(--t-sp18);
  background: rgba(255,255,255,.97);
  border-block-start-width: 0.0625rem;
  border-block-start-style: solid;
  border-block-start-color: var(--line);
}
.vn-sticky.off{display: none;}
.vn-sticky span{font-size: var(--t-fs7); color: var(--txt); font-weight: 700;}
.vn-sticky .vn-btn{min-height: 2.5rem; padding-block: 0; padding-inline: var(--t-sp16); font-size: var(--t-fs6);}
.vn-sticky .x{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  background: transparent;
  color: var(--mut);
  font-size: var(--t-fs11);
  line-height: 1;
  cursor: pointer;
}
.vn-tabs{display: none;}

@media(max-width:1000px){
  .vn-hero .w{grid-template-columns: 1fr;}
  /* The headline and both buttons come first on a phone. Floating the image above them (order:-1)
     looked better but pushed the CTA off the first screen, which is the one rule this shell is not
     allowed to break. The picture follows the buttons instead. */
  .vn-hero>.w>img{order: 2; aspect-ratio: 16/9;}
  .vn-hero .bd{order: 1;}
  .vn-hero h1,.vn-hero.big h1{font-size: var(--t-fs18);}
  .vn-cats{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .vn-members{grid-template-columns: 1fr;}
  .vn-foot .top{grid-template-columns: 1fr 1fr;}
  .sp,.sp.alt{grid-template-columns: 1fr;}
  .sp img,.sp.alt img{order: -1; aspect-ratio: 16/9;}
  .vn-pills{display: none;}
  .vn-burger{display: inline-flex; align-items: center; justify-content: center;}
  .vn-head .w{justify-content: space-between;}
}
@media(max-width:760px){
  body{padding-block-end: calc(var(--tab) + 0.5rem);}
  .vn-stats,.vn-kpis{grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-block: var(--t-sp15); padding-inline: var(--t-sp15);}
  .vn-offers .gr{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .vn-offers .hd h2{font-size: 1.125rem;}
  .vn-offers .of b{font-size: var(--t-fs16);}
  /* .vn-kpis was left at 1.875rem here while .vn-stats was reduced, so a figure like
     RM50,000 needed 167px in a 123px track and pushed the page to 333 on a 320 screen. */
  .vn-stats b,.vn-kpis b{font-size: var(--t-fs17);}
  .vn-index>div{grid-template-columns: 1fr;}
  /* Two columns leave ~173px for a wordmark and its label side by side, which squeezes both.
     Stack them instead: the logo gets the full chip width and the label gets its own line. */
  .vn-studios{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .vn-studios .st{flex-direction: column; row-gap: var(--t-sp7); column-gap: var(--t-sp7); min-height: 4.625rem; padding-block: var(--t-sp12); padding-inline: var(--t-sp10);}
  .vn-studios .st img{max-height: 1.5rem;}
  .vn-studios .st em{font-size: var(--t-fs3); text-align: center; line-height: 1.3;}
  .vn-prose h1{font-size: var(--t-fs17);}
  .vn-prose h2{font-size: var(--t-fs12); scroll-margin-top: 4.625rem;}
  .vn-sec .sh h2{font-size: var(--t-fs14);}
  .vn-band{margin-block-end: var(--t-sp21); padding-block: var(--t-sp18); padding-inline: var(--t-sp18);}
  .vn-band b{font-size: var(--t-fs9);}
  /* The sticky bar becomes the tab bar's job on a phone, so only one strip is ever pinned. */
  .vn-sticky{display: none;}
  .vn-tabs{
    display: grid;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    z-index: var(--t-z1);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--tab);
    padding-block-start: var(--t-sp7);
    background: linear-gradient(180deg,#efeadd,#ffffff);
    border-block-start-width: 0.0625rem;
    border-block-start-style: solid;
    border-block-start-color: var(--line);
  }
  .vn-tabs a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--t-sp2);
    column-gap: var(--t-sp2);
    color: var(--mut);
    font-size: 0.59375rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    position: relative;
  }
  .vn-tabs a .i{font-size: var(--t-fs11); line-height: 1;}
  .vn-tabs a.mid{color: var(--amb); justify-content: flex-end; padding-block-end: var(--t-sp7);}
  .vn-tabs a.mid .i{
    position: absolute;
    inset-block-start: -1.1875rem;
    width: 2.9375rem;
    height: 2.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #f3fffd;
    background: linear-gradient(180deg,var(--amb-3),var(--amb));
    border-width: 0.1875rem;
    border-style: solid;
    border-color: #ffffff;
    box-shadow: 0 0.25rem 0.6875rem rgba(3,122,108,.3);
  }
}
@media(max-width:520px){
  .w{padding-block: 0; padding-inline: var(--t-sp15);}
  .vn-cats{grid-template-columns: 1fr;}
  /* two offer cards side by side leave 171px for a three-line label at 375px, which the mobile
     shape check reads as cramped and which looks it. One per row below 520. */
  .vn-offers .gr{grid-template-columns: 1fr;}
  .vn-offers .of{padding-block-start: var(--t-sp14); padding-inline-end: var(--t-sp16); padding-block-end: var(--t-sp15); padding-inline-start: var(--t-sp16);}
  .vn-hero h1,.vn-hero.big h1{font-size: var(--t-fs17);}
  .vn-logo .wm b{font-size: var(--t-fs13);}
  .vn-band{width: calc(100% - 1.875rem);}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior: auto;}
}
.vn-index a.on{color: var(--amb); font-weight: 700;}

/* === image focal points === */
/* The part of the picture that must survive the crop is pinned to the same
   point of the box. */
img[src$="/assets/img/cat-bonus.jpg"]{object-position: 55.3% 29.5%;}
img[src$="/assets/img/cat-cashier.jpg"]{object-position: 61.0% 28.2%;}
img[src$="/assets/img/cat-live.jpg"]{object-position: 63.0% 25.4%;}
img[src$="/assets/img/hero-free-credit.jpg"]{object-position: 62.7% 27.8%;}
img[src$="/assets/img/hero-main.jpg"]{object-position: 61.3% 38.6%;}
img[src$="/assets/img/hero-register.jpg"]{object-position: 57.3% 32.9%;}
img[src$="/assets/img/hero-slot-online.jpg"]{object-position: 66.0% 30.8%;}
/* === end image focal points === */