/* ============================================================
   vcash.my — "Ledger" design system
   Money in motion: the visual language of clearing rails,
   transaction rows and statements, warmed for humans.
   ============================================================ */

:root{
  --ink:#10243b;          /* deep statement navy   */
  --ink-soft:#2c4763;     /* secondary ink         */
  --paper:#f7f4ec;        /* warm statement paper  */
  --paper-2:#efe9db;      /* banded row tint       */
  --teal:#0a7d72;         /* ringgit teal accent   */
  --teal-deep:#055f57;
  --amber:#c9883a;        /* highlight / figures   */
  --rule:#d9d2c2;         /* hairline rule         */
  --rule-ink:#244562;
  --good:#1f7a4d;
  --warn:#a8431f;
  --max:1140px;
  --mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Fraunces","Georgia",serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--ink);}
h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.01em;margin:.2em 0 .35em;}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:1.9em 0 .5em;}
h3{font-size:1.22rem;margin:1.6em 0 .4em;}
p{margin:0 0 1.05em;}
.lede{font-size:1.2rem;color:var(--ink-soft);max-width:62ch;}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal-deep);margin:0 0 .4em;}
.fig{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---- top rail / nav ---- */
.topbar{background:var(--ink);color:#eaf1f5;border-bottom:3px solid var(--teal);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:64px;gap:18px;}
.brand{display:flex;align-items:baseline;gap:.5ch;font-family:var(--serif);
  font-size:1.42rem;font-weight:600;color:#fff;}
.brand:hover{text-decoration:none;}
.brand .dot{color:var(--amber);}
.brand small{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  color:#9fc6c1;text-transform:uppercase;align-self:center;}
.nav{display:flex;flex-wrap:wrap;gap:2px;}
.nav a{color:#cdd9e1;font-size:.82rem;font-family:var(--mono);
  letter-spacing:.04em;padding:7px 11px;border-radius:4px;text-transform:uppercase;}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none;}
.nav a.on{color:#fff;background:var(--teal-deep);}
.navtoggle{display:none;background:none;border:1px solid #466;color:#fff;
  font-family:var(--mono);font-size:.8rem;padding:6px 12px;border-radius:5px;cursor:pointer;}

/* ---- hero ---- */
.hero{background:
   linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
   border-bottom:1px solid var(--rule);}
.hero .wrap{padding:54px 22px 46px;}
.hero h1{max-width:18ch;}
.hero .lede{margin-top:.3em;}

/* statement-row hero ornament */
.statement{margin-top:30px;border:1px solid var(--rule-ink);border-radius:9px;
  background:#fff;overflow:hidden;box-shadow:0 12px 30px -22px rgba(16,36,59,.5);}
.statement .sh{display:flex;justify-content:space-between;align-items:center;
  background:var(--ink);color:#dce8ee;padding:11px 18px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;}
.statement .sh .bal{color:var(--amber);}
.srow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--rule);}
.srow:nth-child(even){background:var(--paper);}
.srow .d{font-weight:600;color:var(--ink);}
.srow .m{font-size:.86rem;color:var(--ink-soft);}
.srow .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--teal-deep);white-space:nowrap;font-size:.92rem;}
.srow a{display:block;}
.srow a:hover .d{color:var(--teal-deep);}

/* ---- generic cards grid ---- */
.grid{display:grid;gap:18px;margin:26px 0;}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.card{background:#fff;border:1px solid var(--rule);border-radius:9px;
  padding:22px 22px 20px;transition:transform .15s ease,box-shadow .15s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -20px rgba(16,36,59,.55);}
.card .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);}
.card h3{margin:.35em 0 .3em;}
.card p{font-size:.95rem;color:var(--ink-soft);margin-bottom:.6em;}
.card .go{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-deep);}

/* ---- prose article ---- */
.article{background:#fff;border-top:1px solid var(--rule);}
.article .wrap{max-width:760px;padding:46px 22px 40px;}
.article h2{border-bottom:2px solid var(--paper-2);padding-bottom:.2em;}
.article ul,.article ol{margin:0 0 1.1em;padding-left:1.25em;}
.article li{margin:.4em 0;}
.article strong{color:var(--ink);}

/* meta line */
.meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--ink-soft);text-transform:uppercase;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:10px 0;margin:0 0 30px;
  display:flex;flex-wrap:wrap;gap:18px;}
.meta b{color:var(--teal-deep);font-weight:600;}

/* callouts */
.note{border-left:4px solid var(--teal);background:var(--paper);
  padding:16px 18px;border-radius:0 8px 8px 0;margin:1.4em 0;font-size:.96rem;}
.note.warn{border-color:var(--warn);}
.note .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3em;}

/* data table */
.tbl{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.93rem;}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);
  vertical-align:top;}
.tbl th{background:var(--ink);color:#dce8ee;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;}
.tbl td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;}
.tbl tr:nth-child(even) td{background:var(--paper);}

/* key-facts strip */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:9px;
  overflow:hidden;margin:1.6em 0;}
.facts div{background:#fff;padding:16px 16px;}
.facts .n{font-family:var(--mono);font-size:1.5rem;color:var(--teal-deep);
  font-variant-numeric:tabular-nums;}
.facts .l{font-size:.8rem;color:var(--ink-soft);}

/* pill tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0;}
.tags a{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  background:var(--paper-2);color:var(--ink-soft);padding:5px 11px;border-radius:20px;}
.tags a:hover{background:var(--teal-deep);color:#fff;text-decoration:none;}

/* related */
.related{background:var(--paper);border-top:1px solid var(--rule);}
.related .wrap{padding:34px 22px;}
.related h2{margin-top:0;}

/* CTA band */
.band{background:var(--ink);color:#e7eef3;}
.band .wrap{padding:40px 22px;}
.band h2{color:#fff;margin-top:0;}
.band p{color:#b9cad6;}

/* footer */
.foot{background:#0b1b2c;color:#9fb3c2;font-size:.88rem;}
.foot .wrap{padding:40px 22px 30px;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:26px;}
.foot h4{color:#dbe6ee;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0 0 .8em;}
.foot a{color:#9fb3c2;display:block;padding:3px 0;font-size:.9rem;}
.foot a:hover{color:#fff;}
.foot .fb{font-family:var(--serif);font-size:1.3rem;color:#fff;}
.foot .legal{grid-column:1/-1;border-top:1px solid #1d3247;padding-top:18px;
  margin-top:8px;font-size:.78rem;color:#6f879a;font-family:var(--mono);
  letter-spacing:.03em;line-height:1.7;}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  color:var(--ink-soft);text-transform:uppercase;padding:14px 0 0;}
.crumb a{color:var(--ink-soft);}
.crumb a:hover{color:var(--teal-deep);}

@media(max-width:860px){
  .g3,.g2,.foot .wrap{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .nav{display:none;width:100%;flex-direction:column;}
  .nav.open{display:flex;}
  .topbar .wrap{flex-wrap:wrap;min-height:auto;padding-top:10px;padding-bottom:10px;}
  .navtoggle{display:block;}
}

/* ===== expanded-content components (v2) ===== */
.example{background:linear-gradient(180deg,#fff,var(--paper));
  border:1px solid var(--rule-ink);border-radius:10px;padding:22px 22px 6px;margin:1.6em 0;}
.example .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.2em;}
.example h3{margin-top:.1em;}
.example .calc{font-family:var(--mono);font-size:.92rem;background:var(--ink);
  color:#dce8ee;border-radius:7px;padding:12px 14px;margin:.8em 0 1.1em;
  font-variant-numeric:tabular-nums;line-height:1.7;overflow-x:auto;}
.example .calc .hl{color:var(--amber);}
.example .calc .ok{color:#7fd1a8;}

.checklist{list-style:none;padding:0;margin:1.2em 0;}
.checklist li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--rule);
  font-size:.97rem;}
.checklist li:before{content:"";position:absolute;left:2px;top:13px;width:13px;height:13px;
  border:2px solid var(--teal);border-radius:3px;}
.checklist li:last-child{border-bottom:none;}

.tips{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:1.4em 0;}
.tips .tip{background:var(--paper);border-left:3px solid var(--teal);
  border-radius:0 7px 7px 0;padding:13px 15px;}
.tips .tip b{display:block;font-family:var(--serif);font-size:1.02rem;
  color:var(--ink);margin-bottom:.15em;}
.tips .tip span{font-size:.9rem;color:var(--ink-soft);}

.faq{margin:1.2em 0;}
.faq details{border:1px solid var(--rule);border-radius:8px;margin:9px 0;
  background:#fff;overflow:hidden;}
.faq details[open]{border-color:var(--teal);}
.faq summary{cursor:pointer;padding:15px 18px;font-family:var(--serif);
  font-size:1.05rem;color:var(--ink);list-style:none;position:relative;
  padding-right:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:"+";position:absolute;right:18px;top:13px;
  font-family:var(--mono);font-size:1.3rem;color:var(--teal-deep);transition:transform .2s;}
.faq details[open] summary:after{content:"\2212";}
.faq summary:hover{color:var(--teal-deep);}
.faq .a{padding:0 18px 16px;font-size:.96rem;color:var(--ink-soft);}
.faq .a p{margin:.2em 0 .7em;}

.keyfacts{background:var(--ink);color:#e7eef3;border-radius:10px;
  padding:20px 22px 8px;margin:1.6em 0;}
.keyfacts .h{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#9fc6c1;margin-bottom:.5em;}
.keyfacts ul{margin:0;padding-left:1.1em;}
.keyfacts li{margin:.45em 0;font-size:.95rem;color:#cdd9e1;}
.keyfacts li b{color:#fff;}

.divlabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin:2.2em 0 0;
  padding-top:1.2em;border-top:2px solid var(--paper-2);}

@media(max-width:860px){.tips{grid-template-columns:1fr;}}

/* ===== official sources box (v3) ===== */
.sources{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--amber);
  border-radius:0 9px 9px 0;padding:18px 20px 16px;margin:1.8em 0;}
.sources .src-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7em;}
.sources .src-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.sources .src-list li{position:relative;padding-left:20px;font-size:.93rem;line-height:1.45;}
.sources .src-list li:before{content:"\2197";position:absolute;left:0;top:1px;
  font-family:var(--mono);color:var(--amber);font-size:.85rem;}
.sources .src-list a{color:var(--teal-deep);font-weight:500;}
.sources .src-note{font-size:.86rem;color:var(--ink-soft);margin:.9em 0 0;
  padding-top:.7em;border-top:1px dashed var(--rule);}
.sources.authrow .src-list{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.sources.authrow .src-list{grid-template-columns:1fr;}}