/* Portal awam STP (Cash-i SMART + Kad Kredit-i): gaya tunggal atas token design-tokens.json, sama dengan konsol.
   [CHANGE 2026-09-15] what: ganti resources/css/app.css (Vite) dengan fail biasa bertoken · why: satu tema untuk semua skrin;
   butang oren grafik lama + teks putih = 3.66:1 (gagal AA), sempadan input pucat gagal 3:1, gaya sebaris bertaburan di 10 paparan ·
   verify: lint_hardcodes 0, validate_contrast lulus, tangkapan desktop + telefon setiap halaman. */

*, *::before, *::after{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal);
  background:var(--color-surface-page); color:var(--color-text-primary); -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4, p, ul, ol{ margin:0; }
a{ color:inherit; }
img{ max-inline-size:100%; }
.mono{ font-family:var(--font-mono); }
.nw{ white-space:nowrap; }
.ic{ inline-size:1em; block-size:1em; flex:none; vertical-align:-0.125em; }
.sr-only{ position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
:where(a, button, select, summary):focus-visible{ outline:none; box-shadow:var(--shadow-focus-ring); }

/* ── topbar ── */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) var(--space-8); background:var(--color-surface-card); border-block-end:1px solid var(--color-border-default); }
.brand{ display:flex; align-items:center; gap:var(--space-3); text-decoration:none; border-radius:var(--radius-md); }
.brand-arch{ flex:none; inline-size:2.5rem; block-size:2.5rem; border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 50% 115%, transparent 54%, var(--color-graphic-accent) 55% 68%, transparent 69%),
    radial-gradient(circle at 50% 115%, transparent 34%, var(--color-text-on-action) 35% 48%, transparent 49%),
    var(--color-surface-nav); }
.brand-word{ line-height:var(--leading-tight); }
.brand-word b{ display:block; font-size:var(--text-lg); color:var(--color-text-link); white-space:nowrap; }
.brand-word b em{ font-style:normal; color:var(--color-text-accent); }
.brand-word span{ display:block; font-size:var(--text-xs); color:var(--color-text-secondary); }
.topbar-right{ display:flex; align-items:center; gap:var(--space-5); font-size:var(--text-sm); color:var(--color-text-secondary); }
.topbar-right a{ padding:var(--space-2); border-radius:var(--radius-md); font-weight:var(--weight-semibold); color:var(--color-text-link); text-decoration:none; }
.topbar-right a:hover{ text-decoration:underline; }
.secure{ display:inline-flex; align-items:center; gap:var(--space-2); }
.secure-dot{ inline-size:0.5rem; block-size:0.5rem; border-radius:var(--radius-full); background:var(--color-feedback-success); }

/* ── hero (navy jenama) ── */
.hero{ position:relative; padding:var(--space-8) var(--space-8) var(--space-16); color:var(--color-text-on-action);
  background:
    repeating-radial-gradient(circle at 85% 130%, transparent 0 2.875rem, color-mix(in srgb, var(--color-text-on-nav) 6%, transparent) 2.875rem 3rem),
    var(--color-surface-nav); }
.hero.compact{ padding-block-end:var(--space-12); }
.kicker{ display:inline-flex; align-items:center; gap:var(--space-2); margin-block-end:var(--space-4); padding:var(--space-1) var(--space-3);
  border:1px solid color-mix(in srgb, var(--color-graphic-accent) 55%, transparent); border-radius:var(--radius-full);
  background:color-mix(in srgb, var(--color-graphic-accent) 16%, transparent); color:var(--color-text-on-nav);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.12em; text-transform:uppercase; }
.kicker i{ inline-size:0.4375rem; block-size:0.4375rem; border-radius:var(--radius-full); background:var(--color-graphic-accent); }
.hero h1{ max-inline-size:44rem; font-size:var(--text-3xl); font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:-.01em; text-wrap:balance; }
.hero h1 .o{ color:var(--color-text-accent-on-nav); white-space:nowrap; }
.hero p{ max-inline-size:36rem; margin-block-start:var(--space-3); color:var(--color-text-on-nav-muted); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-6); }

/* ── butang ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-block-size:var(--size-control-lg);
  padding:0 var(--space-6); border:1px solid transparent; border-radius:var(--radius-button); font:inherit; font-size:var(--text-sm);
  font-weight:var(--weight-semibold); text-decoration:none; cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.btn-oren{ background:var(--color-button-primary-bg); color:var(--color-button-primary-text); }
.btn-oren:hover{ background:var(--color-button-primary-bg-hover); }
.btn-ghost{ background:transparent; color:var(--color-text-on-action); border-color:color-mix(in srgb, var(--color-text-on-nav) 60%, transparent); }
.btn-ghost:hover{ background:color-mix(in srgb, var(--color-text-on-nav) 10%, transparent); }
.btn-navy{ background:var(--color-action-brand); color:var(--color-text-on-action); }
.btn-navy:hover{ background:var(--color-action-brand-hover); }
.btn-outline{ background:var(--color-surface-card); color:var(--color-button-secondary-text); border-color:var(--color-button-secondary-border); }
.btn-outline:hover{ color:var(--color-text-link); border-color:var(--color-text-link); }
.btn-sm{ min-block-size:var(--size-control-md); padding:0 var(--space-4); }
.btn[disabled], .cta[disabled]{ opacity:.55; cursor:not-allowed; }
.hero .btn:focus-visible, .calc a:focus-visible{ box-shadow:0 0 0 2px var(--color-surface-nav), 0 0 0 4px var(--color-text-on-nav); }

/* ── langkah wizard ── */
.steps{ position:relative; z-index:2; max-inline-size:66rem; margin:calc(var(--space-10) * -1) auto 0; padding:0 var(--space-6);
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--space-2); }
.step{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); background:var(--color-surface-card);
  border:1px solid var(--color-border-default); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.step .n{ flex:none; inline-size:var(--size-control-sm); block-size:var(--size-control-sm); display:grid; place-items:center; border-radius:var(--radius-md);
  background:var(--color-surface-raised); color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:var(--weight-bold); }
.step small{ display:block; font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-secondary); }
.step b{ font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.step.active{ border-color:var(--color-graphic-accent); box-shadow:var(--shadow-md); }
.step.active .n{ background:var(--color-action-primary); color:var(--color-text-on-action); }
.step.done .n{ background:var(--color-feedback-success); color:var(--color-text-on-action); }

/* ── susun atur & kad ── */
.wrap{ max-inline-size:66rem; margin:var(--space-6) auto var(--space-16); padding:0 var(--space-6); display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:var(--space-5); align-items:start; }
.wrap.single{ grid-template-columns:minmax(0, 1fr); max-inline-size:45rem; }
.side{ display:flex; flex-direction:column; gap:var(--space-4); min-inline-size:0; }
.card{ min-inline-size:0; background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.card-h{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); border-block-end:1px solid var(--color-border-default); }
.card-h h2{ font-size:var(--text-base); font-weight:var(--weight-semibold); }
.card-h .tag{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-secondary); }
.card-b{ padding:var(--space-5); }
.card-b.tight{ padding-block-start:var(--space-3); }
.lead{ margin-block-end:var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); }
.lead b{ color:var(--color-text-primary); }

/* ── borang ── */
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 var(--space-4); }
.field{ margin-block-end:var(--space-4); }
.field > label:not([class]){ display:block; margin-block-end:var(--space-2); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text-link); }
.field input:not([type=file]), .field select{ inline-size:100%; min-block-size:var(--size-control-lg); padding:0 var(--space-3);
  font:inherit; font-size:var(--text-base); color:var(--color-input-text); background:var(--color-input-bg);
  border:1px solid var(--color-input-border); border-radius:var(--radius-md); }
.field input::placeholder{ color:var(--color-input-placeholder); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--color-text-link); box-shadow:var(--shadow-focus-ring); }
.field .tac-input{ font-size:var(--text-xl); letter-spacing:.4em; text-align:center; }
.hint{ margin-block-start:var(--space-1); font-size:var(--text-xs); color:var(--color-text-secondary); }
.err{ margin-block-start:var(--space-1); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-feedback-error); }
.err-box{ margin-block-end:var(--space-4); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-feedback-error);
  background:var(--color-feedback-error-bg); border:1px solid color-mix(in srgb, var(--color-feedback-error) 30%, transparent); border-radius:var(--radius-md); }
.field .err-box{ margin-block:var(--space-2) 0; }
.demo-note{ display:flex; align-items:flex-start; gap:var(--space-2); margin-block-end:var(--space-4); padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm); color:var(--color-feedback-warning); background:var(--color-feedback-warning-bg);
  border:1px dashed color-mix(in srgb, var(--color-feedback-warning) 45%, transparent); border-radius:var(--radius-md); }
.demo-note .ic{ margin-block-start:.2em; }
.demo-note small{ display:block; margin-block-start:var(--space-1); font-size:var(--text-xs); }
.demo-code{ font-family:var(--font-mono); font-size:var(--text-lg); font-weight:var(--weight-bold); letter-spacing:.1em; }

.toggle-row{ display:flex; gap:var(--space-2); }
.chip-opt{ flex:1; min-block-size:var(--size-control-lg); padding:var(--space-2) var(--space-3); font:inherit; font-size:var(--text-sm);
  color:var(--color-text-secondary); background:var(--color-surface-card); border:1px solid var(--color-input-border); border-radius:var(--radius-md); cursor:pointer; }
.chip-opt:hover{ color:var(--color-text-link); border-color:var(--color-text-link); }
.chip-opt.on{ color:var(--color-text-on-action); background:var(--color-action-brand); border-color:var(--color-action-brand); font-weight:var(--weight-semibold); }

/* ── kalkulator amaun (navy) ── */
.calc{ position:relative; overflow:hidden; padding:var(--space-5); border-radius:var(--radius-card); background:var(--color-surface-nav); color:var(--color-text-on-action); }
.calc::after{ content:""; position:absolute; inset-inline-end:-4rem; inset-block-end:-7rem; inline-size:16rem; block-size:16rem; pointer-events:none;
  border:1.5rem solid color-mix(in srgb, var(--color-graphic-accent) 22%, transparent); border-radius:var(--radius-full); }
.calc > *{ position:relative; z-index:1; }
.calc .lbl{ font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-on-nav-muted); }
.calc .amt{ margin-block:var(--space-2) var(--space-1); font-size:clamp(var(--text-3xl), 1.5rem + 1.5vw, var(--text-4xl)); font-weight:var(--weight-bold);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.calc .amt small{ margin-inline-end:var(--space-1); font-size:var(--text-lg); font-weight:var(--weight-medium); color:var(--color-text-accent-on-nav); vertical-align:.5em; }
.calc .note{ max-inline-size:18rem; font-size:var(--text-sm); color:var(--color-text-on-nav-muted); }
.calc .note b{ color:var(--color-text-on-action); }
.calc .rows{ margin-block-start:var(--space-4); padding-block-start:var(--space-3); border-block-start:1px solid var(--color-border-on-nav); font-size:var(--text-sm); }
.calc .rows div{ display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-1); color:var(--color-text-on-nav-muted); }
.calc .rows b{ font-weight:var(--weight-semibold); color:var(--color-text-on-action); text-align:end; }

/* ── akuan ── */
.consent{ margin-block-start:var(--space-5); }
.c-item{ display:flex; align-items:flex-start; gap:var(--space-3); padding-block:var(--space-3); border-block-end:1px dashed var(--color-border-default); }
.c-item:last-child{ border-block-end:0; }
.c-item input[type=checkbox]{ flex:none; inline-size:1.25rem; block-size:1.25rem; margin:.125rem 0 0; accent-color:var(--color-action-brand); }
.c-item p{ font-size:var(--text-sm); color:var(--color-text-secondary); }
.c-item p b{ color:var(--color-text-primary); }
.c-item a{ font-weight:var(--weight-semibold); color:var(--color-text-accent); text-decoration:none; }
.c-item a:hover{ text-decoration:underline; }

.cta{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--size-control-lg);
  margin-block-start:var(--space-5); padding:0 var(--space-5); border:0; border-radius:var(--radius-button);
  background:var(--color-button-primary-bg); color:var(--color-button-primary-text); font:inherit; font-size:var(--text-base); font-weight:var(--weight-semibold);
  cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out); }
.cta:hover{ background:var(--color-button-primary-bg-hover); }
.cta:active{ background:var(--color-action-primary-active); }
.cta-sub{ margin-block-start:var(--space-2); font-size:var(--text-xs); color:var(--color-text-secondary); text-align:center; }
.btn-back, .link-btn{ padding:var(--space-2) 0; background:none; border:0; border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm);
  font-weight:var(--weight-semibold); color:var(--color-text-secondary); cursor:pointer; }
.btn-back:hover, .link-btn:hover{ color:var(--color-text-link); text-decoration:underline; }
.link-btn.accent{ color:var(--color-text-accent); }
.row-between{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-3); }

/* ── dokumen ── */
.doc-row{ display:flex; align-items:center; gap:var(--space-3); padding-block:var(--space-3); border-block-end:1px dashed var(--color-border-default); font-size:var(--text-sm); }
.doc-row:last-child{ border-block-end:0; }
.doc-ic{ flex:none; inline-size:2.25rem; block-size:2.25rem; display:grid; place-items:center; border-radius:var(--radius-md);
  background:var(--color-feedback-attention-bg); color:var(--color-text-accent); font-size:var(--text-xs); font-weight:var(--weight-bold); }
.doc-row .st{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); margin-inline-start:auto; font-size:var(--text-xs); color:var(--color-text-secondary); text-align:end; }
.doc-file{ display:flex; align-items:center; gap:var(--space-1); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-feedback-success); overflow-wrap:anywhere; }
.doc-remove{ padding:var(--space-2); background:none; border:0; font:inherit; font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-feedback-error); cursor:pointer; }
.upload-btn{ position:relative; display:inline-flex; align-items:center; min-block-size:var(--size-control-md); padding:0 var(--space-3);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-text-link); background:var(--color-surface-card);
  border:1px solid var(--color-input-border); border-radius:var(--radius-md); cursor:pointer; }
.upload-btn:hover{ border-color:var(--color-text-link); }
.upload-btn:focus-within{ border-color:var(--color-text-link); box-shadow:var(--shadow-focus-ring); }
.hidden-input{ position:absolute; inset:0; inline-size:100%; block-size:100%; opacity:0; cursor:pointer; }

/* ── cip status ── */
.chip{ display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; }
.chip.ok{ background:var(--color-feedback-success-bg); color:var(--color-feedback-success); }
.chip.warn{ background:var(--color-feedback-warning-bg); color:var(--color-feedback-warning); }
.chip.bad{ background:var(--color-feedback-error-bg); color:var(--color-feedback-error); }
.chip.navy{ background:var(--color-feedback-info-bg); color:var(--color-feedback-info); }

/* ── garis masa status ── */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ position:relative; display:flex; gap:var(--space-4); padding-block-end:var(--space-6); }
.timeline li::before{ content:""; position:absolute; inset-inline-start:0.8125rem; inset-block:1.875rem 0; inline-size:2px; background:var(--color-border-default); }
.timeline li.done::before{ background:var(--color-feedback-success); }
.timeline li:last-child::before{ display:none; }
.t-dot{ position:relative; z-index:1; flex:none; inline-size:1.75rem; block-size:1.75rem; display:grid; place-items:center; border-radius:var(--radius-full);
  background:var(--color-surface-card); border:2px solid var(--color-border-strong); color:var(--color-text-secondary); font-size:var(--text-xs); font-weight:var(--weight-bold); }
.timeline li.done .t-dot{ background:var(--color-feedback-success); border-color:var(--color-feedback-success); color:var(--color-text-on-action); }
.timeline li.now .t-dot{ background:var(--color-action-primary); border-color:var(--color-action-primary); color:var(--color-text-on-action); }
.timeline b{ display:block; font-size:var(--text-sm); }
.t-desc{ display:block; font-size:var(--text-sm); color:var(--color-text-secondary); }
.t-note{ display:block; margin-block-start:var(--space-1); font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.t-note.ok{ color:var(--color-feedback-success); }
.t-note.warn{ color:var(--color-feedback-warning); }
.t-meta{ display:block; margin-block-start:var(--space-2); font-size:var(--text-xs); color:var(--color-text-secondary); }
.timeline .btn{ margin-block-start:var(--space-3); }

/* ── kad produk & fakta ── */
.prod-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4); }
.prod{ display:flex; flex-direction:column; padding:var(--space-5); background:var(--color-surface-card); border:1px solid var(--color-border-default);
  border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.prod h3{ font-size:var(--text-lg); color:var(--color-text-link); }
.prod p{ margin-block:var(--space-2) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); }
.prod .btn{ align-self:flex-start; margin-block-start:auto; }
.prod .facts{ margin-block-end:var(--space-4); }
.facts{ padding-block-start:var(--space-3); border-block-start:1px dashed var(--color-border-default); font-size:var(--text-sm); }
.facts.plain{ padding-block-start:0; border-block-start:0; }
.facts div{ display:flex; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-1); }
.facts span{ color:var(--color-text-secondary); }
.facts b{ text-align:end; font-variant-numeric:tabular-nums; }
.facts .sep{ margin-block-start:var(--space-2); padding-block-start:var(--space-2); border-block-start:1px dashed var(--color-border-default); }

/* ── bahagian tajuk (laman utama & panduan) ── */
.kick{ margin-block-end:var(--space-2); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-accent); }
.how{ max-inline-size:68rem; margin:0 auto; padding:var(--space-12) var(--space-5) var(--space-4); }
.how-head{ max-inline-size:40rem; margin:0 auto var(--space-8); text-align:center; }
.how-head h2, .gd-sec h2{ font-size:var(--text-2xl); font-weight:var(--weight-bold); line-height:var(--leading-tight); letter-spacing:-.01em; color:var(--color-text-link); text-wrap:balance; }
.how-head p{ margin-block-start:var(--space-2); color:var(--color-text-secondary); }
.hsteps{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--space-4); }
.hstep{ position:relative; padding:var(--space-6) var(--space-4) var(--space-5); text-align:center; background:var(--color-surface-card);
  border:1px solid var(--color-border-default); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); }
.hstep-n{ position:absolute; inset-block-start:calc(var(--space-3) * -1); inset-inline-start:50%; transform:translateX(-50%);
  inline-size:1.75rem; block-size:1.75rem; display:grid; place-items:center; border-radius:var(--radius-full);
  background:var(--color-action-brand); color:var(--color-text-on-action); font-size:var(--text-xs); font-weight:var(--weight-bold); }
.hstep-ic{ inline-size:3rem; block-size:3rem; margin:var(--space-1) auto var(--space-3); display:grid; place-items:center; border-radius:var(--radius-lg);
  background:var(--color-feedback-attention-bg); color:var(--color-text-accent); }
.hstep-ic svg{ inline-size:var(--size-icon-lg); block-size:var(--size-icon-lg); }
.hstep h3{ margin-block-end:var(--space-1); font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-text-link); }
.hstep p{ font-size:var(--text-sm); color:var(--color-text-secondary); }

/* ── panduan (/guide) ── */
.gd-wrap{ max-inline-size:68rem; margin:0 auto; padding:0 var(--space-5); }
.gd-band{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-4); margin-block-start:calc(var(--space-10) * -1); }
.gd-stat{ padding:var(--space-4) var(--space-5); background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card); box-shadow:var(--shadow-md); }
.gd-stat b{ display:block; font-size:var(--text-2xl); font-weight:var(--weight-bold); letter-spacing:-.01em; color:var(--color-stat-value-brand); }
.gd-stat span{ font-size:var(--text-sm); color:var(--color-text-secondary); }
.gd-sec{ margin-block-start:var(--space-12); }
.gd-sec > p{ max-inline-size:42rem; margin-block-start:var(--space-2); color:var(--color-text-secondary); }
.gd-steps{ display:grid; gap:var(--space-3); margin-block-start:var(--space-6); }
.gd-step{ display:flex; gap:var(--space-4); padding:var(--space-4) var(--space-5); background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card); }
.gd-step .n{ flex:none; inline-size:2.25rem; block-size:2.25rem; display:grid; place-items:center; border-radius:var(--radius-md);
  background:var(--color-action-brand); color:var(--color-text-on-action); font-weight:var(--weight-bold); }
.gd-step.o .n{ background:var(--color-action-primary); }
.gd-step h3{ margin-block-end:var(--space-1); font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-text-link); }
.gd-step p{ font-size:var(--text-sm); color:var(--color-text-secondary); }
.gd-step p b{ color:var(--color-text-primary); }
.mini{ display:inline-block; margin-block-start:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm);
  background:var(--color-feedback-attention-bg); color:var(--color-text-accent); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
.gd-grid2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4); margin-block-start:var(--space-6); }
.gd-card{ padding:var(--space-5); background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card); }
.gd-card h3, .box h3{ display:flex; align-items:center; gap:var(--space-2); margin-block-end:var(--space-2); font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-text-link); }
.gd-card h3 svg, .box h3 svg{ flex:none; inline-size:var(--size-icon-md); block-size:var(--size-icon-md); color:var(--color-text-accent); }
.gd-card ul, .gd-demo ul{ margin:0; padding-inline-start:var(--space-5); }
.gd-card li, .gd-card p{ font-size:var(--text-sm); color:var(--color-text-secondary); }
.gd-card li + li, .gd-demo li + li{ margin-block-start:var(--space-2); }
.gd-card li b{ color:var(--color-text-primary); }
.gd-flow{ position:relative; margin-block-start:var(--space-6); padding:var(--space-6); overflow-x:auto; border-radius:var(--radius-xl); background:var(--color-surface-nav); color:var(--color-text-on-nav-muted); }
.gd-flow-line{ display:flex; align-items:center; gap:var(--space-2); min-inline-size:45rem; font-size:var(--text-xs); font-weight:var(--weight-semibold); }
.gd-node{ padding:var(--space-2) var(--space-3); text-align:center; white-space:nowrap; color:var(--color-text-on-action);
  background:color-mix(in srgb, var(--color-text-on-nav) 8%, transparent); border:1px solid var(--color-border-on-nav); border-radius:var(--radius-md); }
.gd-node.hot{ background:color-mix(in srgb, var(--color-graphic-accent) 25%, transparent); border-color:color-mix(in srgb, var(--color-graphic-accent) 60%, transparent); }
.gd-arrow{ flex:none; color:var(--color-text-on-nav-muted); }
.gd-note{ margin-block-start:var(--space-4); font-size:var(--text-xs); color:var(--color-text-on-nav-muted); }
.gd-sub{ margin-block-start:var(--space-8); }
.gd-sub > h3{ margin-block-end:var(--space-1); font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-text-link); }
.gd-sub > p{ max-inline-size:42rem; margin-block-end:var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); }
/* position:relative: label .sr-only (position:absolute) dlm sel mesti berpaut pada kotak skrol, jika tidak ia melebarkan halaman telefon */
.tbl-wrap{ position:relative; overflow-x:auto; background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card); }
.tbl{ inline-size:100%; min-inline-size:45rem; border-collapse:collapse; font-size:var(--text-sm); }
.tbl.narrow{ min-inline-size:35rem; }
.tbl th{ padding:var(--space-3); font-weight:var(--weight-semibold); text-align:start; }
.tbl thead tr{ background:var(--color-surface-nav); color:var(--color-text-on-action); }
.tbl.light thead tr{ background:transparent; color:var(--color-text-link); border-block-end:2px solid var(--color-graphic-accent); }
.tbl th.c, .tbl td.c{ text-align:center; }
.tbl td{ padding:var(--space-2) var(--space-3); color:var(--color-text-secondary); border-block-start:1px solid var(--color-border-default); }
.tbl tbody tr:nth-child(even){ background:var(--color-surface-sunken); }
.tbl td.row-h{ font-weight:var(--weight-semibold); color:var(--color-text-primary); }
.yes{ color:var(--color-feedback-success); font-size:var(--text-base); }
.no{ color:var(--color-text-tertiary); }
.tag-sm{ display:inline-block; padding:0.125rem var(--space-2); border-radius:var(--radius-sm); font-size:var(--text-xs); font-weight:var(--weight-bold); }
.tag-sm.info{ background:var(--color-feedback-info-bg); color:var(--color-feedback-info); }
.tag-sm.accent{ background:var(--color-feedback-attention-bg); color:var(--color-text-accent); }
.fine{ margin-block-start:var(--space-2); font-size:var(--text-xs); color:var(--color-text-secondary); }
.box{ margin-block-start:var(--space-5); padding:var(--space-5); background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card); }
.box > p{ margin-block-end:var(--space-3); font-size:var(--text-sm); color:var(--color-text-secondary); }
.cred{ font-family:var(--font-mono); color:var(--color-text-link); }
.cred.pw{ font-weight:var(--weight-bold); color:var(--color-text-accent); }
.note-warn{ display:flex; align-items:flex-start; gap:var(--space-2); margin-block-start:var(--space-3); padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md); background:var(--color-feedback-warning-bg); color:var(--color-feedback-warning); font-size:var(--text-xs); }
.note-warn .ic{ margin-block-start:.15em; }
.gd-demo{ margin-block-start:var(--space-6); padding:var(--space-5); background:var(--color-feedback-warning-bg);
  border:1px dashed color-mix(in srgb, var(--color-feedback-warning) 45%, transparent); border-radius:var(--radius-card); }
.gd-demo h3{ display:flex; align-items:center; gap:var(--space-2); margin-block-end:var(--space-2); font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-feedback-warning); }
.gd-demo li{ font-size:var(--text-sm); color:var(--color-feedback-warning); }
.gd-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); margin-block:var(--space-12) var(--space-16); }

/* ── semakan status: senarai keputusan ── */
.res{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-block-end:var(--space-3); padding:var(--space-4);
  color:inherit; text-decoration:none; background:var(--color-surface-card); border:1px solid var(--color-border-default); border-radius:var(--radius-card);
  transition:border-color var(--duration-fast) var(--ease-out); }
.res:hover{ border-color:var(--color-graphic-accent); }
.res-ref{ font-family:var(--font-mono); font-weight:var(--weight-bold); color:var(--color-text-link); }
.res-meta, .res-more{ font-size:var(--text-xs); color:var(--color-text-secondary); }
.res-right{ text-align:end; }
.res-status{ font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-text-secondary); }
.res-status.ok{ color:var(--color-feedback-success); }
.res-status.warn{ color:var(--color-feedback-warning); }
.res-status.bad{ color:var(--color-feedback-error); }

/* ── e-KYC swafoto ── */
.selfie-drop{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-6) var(--space-4); text-align:center; cursor:pointer; background:var(--color-surface-sunken);
  border:2px dashed var(--color-input-border); border-radius:var(--radius-xl);
  transition:border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.selfie-drop:hover{ border-color:var(--color-text-link); background:var(--color-surface-card); }
.selfie-drop:focus-within{ border-color:var(--color-text-link); box-shadow:var(--shadow-focus-ring); }
.selfie-ic{ inline-size:3.25rem; block-size:3.25rem; display:grid; place-items:center; border-radius:var(--radius-full); background:var(--color-feedback-info-bg); color:var(--color-text-link); }
.selfie-ic svg{ inline-size:var(--size-icon-lg); block-size:var(--size-icon-lg); }
.selfie-cta{ font-weight:var(--weight-bold); color:var(--color-text-link); }
.selfie-sub{ font-size:var(--text-xs); color:var(--color-text-secondary); }
.selfie-preview{ inline-size:9.5rem; block-size:9.5rem; object-fit:cover; border:3px solid var(--color-feedback-success); border-radius:var(--radius-xl); }
.selfie-ok, .ok-msg{ display:flex; align-items:center; gap:var(--space-2); font-weight:var(--weight-semibold); color:var(--color-feedback-success); }
.selfie-ok{ font-size:var(--text-sm); }
.loading-note{ margin-block-start:var(--space-2); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-text-accent); }

/* ── notis privasi ── */
.prose{ font-size:var(--text-sm); line-height:1.65; color:var(--color-text-secondary); }
.prose h2{ margin-block-end:var(--space-2); font-size:var(--text-lg); color:var(--color-text-link); }
.prose p + p{ margin-block-start:var(--space-3); }
.prose b{ color:var(--color-text-primary); }
.prose hr{ margin-block:var(--space-6); border:0; border-block-start:1px dashed var(--color-border-default); }

/* ── pop-up amaun layak (URS PF item 1-vii) ── */
.elig-scrim{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:var(--space-4); background:var(--color-surface-scrim); }
.elig-modal{ inline-size:100%; max-inline-size:26rem; padding:var(--space-6); border-radius:var(--radius-xl);
  background:var(--color-surface-card); color:var(--color-text-primary); box-shadow:var(--shadow-lg); }
.elig-modal h2{ margin:0 0 var(--space-3); font-size:var(--text-lg); font-weight:var(--weight-bold); }
.elig-kick{ font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-secondary); }
.elig-amt{ margin-block:var(--space-1) var(--space-3); font-size:var(--text-4xl); font-weight:var(--weight-bold); letter-spacing:-.02em;
  color:var(--color-text-accent); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.elig-modal p{ margin:0; font-size:var(--text-sm); color:var(--color-text-secondary); }
.elig-act{ display:flex; flex-direction:column-reverse; gap:var(--space-2); margin-block-start:var(--space-6); }
.elig-act button{ inline-size:100%; }
.elig-sec{ min-block-size:var(--size-control-lg); padding-inline:var(--space-4); border:1px solid var(--color-border-strong); border-radius:var(--radius-button);
  background:transparent; color:var(--color-text-primary); font:inherit; font-weight:var(--weight-semibold); cursor:pointer; }
.elig-ok{ min-block-size:var(--size-control-lg); padding-inline:var(--space-5); border:0; border-radius:var(--radius-button); cursor:pointer;
  background:var(--color-action-primary); color:var(--color-text-on-action); font:inherit; font-weight:var(--weight-semibold); }
.elig-ok:hover{ background:var(--color-action-primary-hover); }

/* ── kaki ── */
footer{ max-inline-size:66rem; margin:0 auto; padding:0 var(--space-6) var(--space-10); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
  font-size:var(--text-xs); color:var(--color-text-secondary); }
.foot-link{ font-weight:var(--weight-semibold); color:var(--color-text-link); text-decoration:none; }
.foot-link:hover{ text-decoration:underline; }

/* ── responsif ── */
@media (max-width: 55rem){
  .topbar{ padding-inline:var(--space-4); }
  .hero{ padding:var(--space-6) var(--space-4) var(--space-12); }
  .hero h1{ font-size:var(--text-2xl); }
  .steps{ grid-template-columns:repeat(5, minmax(7.5rem, 1fr)); overflow-x:auto; padding:0 var(--space-4) var(--space-2); }
  .wrap{ grid-template-columns:minmax(0, 1fr); padding:0 var(--space-4); }
  .grid2, .prod-grid, .gd-grid2{ grid-template-columns:minmax(0, 1fr); }
  .hsteps, .gd-band{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem){
  .secure{ display:none; }
  /* langkah wizard: 5 lajur padat (nombor atas, label bawah) supaya tidak terkeluar kad */
  .steps{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--space-1); overflow:visible; padding:0 var(--space-4); }
  .step{ flex-direction:column; justify-content:flex-start; gap:var(--space-1); padding:var(--space-2) var(--space-1); text-align:center; }
  .step small{ display:none; }
  .step b{ font-size:var(--text-xs); line-height:var(--leading-tight); }
  .hero-cta .btn{ flex:1 1 100%; }
  .hsteps{ grid-template-columns:minmax(0, 1fr); row-gap:var(--space-6); }
  .how, .gd-wrap{ padding-inline:var(--space-4); }
  .res{ flex-direction:column; align-items:flex-start; }
  .res-right{ text-align:start; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}