/* ============================================================
   BijakDana — v5.1 ONE design system  (founder decision 2026-10-02)
   Source of truth: docs/briefs/2026-10-02-v51-system-design.md
   Canvas "BijakDana — the whole journey v2" (claude.ai 2DPuq6VSYYRgoSRafLZX89),
   rows v5.1 (home) + v5 (answer).

   WHAT v5.1 IS: v5 corporate premium fintech (the product as hero, the sentence
   door) + Azali's four signals — a plain headline; browse by KIND OF MONEY
   (Geran / Pembiayaan / Jaminan / Ekuiti); the RM79 report shown as a DOCUMENT;
   readiness as "Sedia N daripada M", never a %.

   DESIGN OF RECORD. One file, loaded by every public page. Deep-navy "night"
   premium fintech + a single brass accent used ONLY on night; generous white
   "day" sections; soft-lift cards; Geist + Geist Mono (every RM amount / count /
   reference / date in mono with tabular-nums); monogram tiles (never provider
   logos); a segmented readiness bar (never a %). Restraint = Mercury / Stripe /
   Linear.

   COLOUR = MEANING (LOCKED): brass = the action / your choice · green = verified
   or done · night = our answer + the paid layer · everything else neutral.

   THE FOUR BANS (guarded by worker/src/gradient-guard.test.ts):
     1. no gradient except the subtle --night-grid;
     2. no shadow except --lift (focus rings + inset underlines allowed);
     3. no radius >= 99px (the pill is dead);
     4. no purple, no glow, no orbs, no 3D tiles, no cyan/mint neon.
   ============================================================ */

/* ── Self-hosted type (SIL OFL; site/fonts/*.woff2 + OFL.txt). No CDN, no Google
      Fonts — the CDN guard (worker/src/tailwind-cdn-guard.test.ts) stays green. ── */
@font-face{
  font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/Geist-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/Geist-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/Geist-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/GeistMono-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/GeistMono-Medium.woff2") format("woff2");
}

:root{
  color-scheme:light;

  /* ── The v5.1 token table (brief P0, exact values) ───────────────────────── */
  --night:#0B1220;          /* top band of every page, answer header, paid card, footer */
  /* --night-grid: 1px rgba(255,255,255,.035) lines every 48px — night surfaces only.
     Implemented as the reusable .night-grid utility (a repeating background-image). */
  --day:#F5F6F8;            /* page field */
  --card:#FFFFFF;           /* raised surfaces */
  --line:#E3E6EC;           /* 1px borders on light */
  --ink:#0B1220;            /* text on light */
  --muted:#475467;          /* secondary text on light (7.7:1 on white, 7.1:1 on day — AA+; darkened 2026-10-07 from #5B6576 after a live tester called the card sub-lines too light) */
  --muted-night:#AEB9CB;    /* secondary text on night (9.5:1 on #0B1220; lightened 2026-10-07 from #9AA5B8 to match the clearer day muted) */
  --brass:#D8AE6A;          /* action fill + accents ON NIGHT ONLY (2.1:1 as text on white — never) */
  --brass-ink:#8A5A14;      /* brass text / ticks on light (5.9:1 — AA) */
  --brass-soft:#F3D9A8;     /* the owner's chosen words in the door */
  --ok-bg:#E7F4EC;          /* verified / done surface */
  --ok:#16673F;             /* verified / done text */
  --ok-fill:#1F8A5B;        /* verified / done fill (filled readiness segments) */
  /* --glass: the door panel on night — rgba fill + rgba border (used below) */
  --glass-fill:rgba(255,255,255,.04);
  --glass-line:rgba(255,255,255,.10);

  --r-card:16px;            /* cards, panels, documents */
  --r-ctl:12px;             /* buttons, inputs, sheet */
  --r-chip:8px;             /* chips, monograms, labels */

  /* --lift: the ONLY shadow. Soft 1px seat + a long low-opacity drop. */
  --lift:0 1px 1px rgba(11,18,32,.04), 0 24px 48px -24px rgba(11,18,32,.28);

  /* type */
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,"JetBrains Mono",monospace;
}

*{box-sizing:border-box}
[hidden]{display:none!important}

html{background:var(--day)}
body{
  margin:0;background:var(--day);color:var(--ink);
  font:400 clamp(16px,15.2px + .4vw,18px)/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}

/* Display headings: 600 weight, −0.03em tracking. */
h1,h2,h3,.display{font-weight:600;letter-spacing:-.03em;line-height:1.12;margin:0 0 .4em}
h1{font-size:clamp(28px,22px + 3vw,46px)}
h2{font-size:clamp(22px,18px + 1.6vw,30px)}
h3{font-size:clamp(18px,16px + .6vw,21px)}
p{line-height:1.6;margin:0 0 1em}

/* Every RM amount, count, reference and date is Geist Mono with tabular-nums. */
.mono,.num,.ref,.amt{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* 44px min tap targets + a visible focus ring (NOT a banned shadow — allowed). */
button,[role="button"],a.btn-brass,a.btn-ink,a.ghost,.blank{min-height:44px}
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:2px;border-radius:4px}
.on-night :focus-visible,.night :focus-visible{outline-color:var(--brass)}

/* ── Night surface + the subtle grid (the ONLY gradient allowed) ──────────── */
.night{background:var(--night);color:#F2F5FA}
.night .lab,.on-night .lab{color:var(--brass)}
.night p,.on-night p{color:var(--muted-night)}
/* ── Day island inside night: a white/light card (e.g. the hero example-answer
      card) that lives inside .night / .on-night must carry its OWN day/ink text
      context, never inherit the night colours (that's a 1.09:1 invisibility bug).
      Put `on-day` on the card; these rules (specificity 0,1,1 — matching the
      night descendant rules above, and winning by source order) re-establish AA
      ink/day text so NO child can re-inherit night. ─────────────────────────── */
.on-day{color:var(--ink)}
.on-day p{color:var(--muted)}
.on-day .lab{color:var(--brass-ink)}
.on-day .seg i{background:var(--line)}
.on-day .seg i.on{background:var(--ok-fill)}
/* The mirror image: a .night island nested INSIDE an .on-day scope (e.g. a tool-page funnel
   CTA slab) must keep its OWN night text. Specificity 0,2,0 / 0,3,0 / 0,2,1 wins over the
   .on-day .lab / .on-day p rules above, so brass + muted-night are restored on the slab —
   else the day-scope bleeds back in and brass-ink on #0B1220 is a 3.16:1 contrast fail. */
.on-day .night{color:#F2F5FA}
.on-day .night .lab{color:var(--brass)}
.on-day .night p{color:var(--muted-night)}
/* The night grid: 1px rgba(255,255,255,.035) lines every 48px. A single
   repeating linear-gradient per axis — the brief's one permitted gradient. */
.night-grid{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.read{max-width:720px}        /* reading column for hubs / content pages */

/* ============================================================
   NAV — night and day variants. Monogram-wordmark left, links right.
   ============================================================ */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:1.12rem}
.nav .links{display:flex;align-items:center;gap:22px;font-size:.92rem}
.nav .links a{text-decoration:none;color:var(--muted)}
.nav .links a:hover{color:var(--ink)}
.nav.day{border-bottom:1px solid var(--line);color:var(--ink)}
.nav.night{color:#F2F5FA;border-bottom:1px solid var(--glass-line)}
.nav.night .links a{color:var(--muted-night)}
.nav.night .links a:hover{color:#F2F5FA}

/* ============================================================
   FOOTER — night, grouped links (the hub generator injects it).
   ============================================================ */
.footer{background:var(--night);color:var(--muted-night)}
.footer .wrap{padding-block:48px 40px}
.footer .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px}
@media(min-width:720px){.footer .cols{grid-template-columns:1.4fr repeat(3,1fr)}}
.footer h4{color:var(--brass);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer a{color:var(--muted-night);text-decoration:none;font-size:.92rem}
.footer a:hover{color:#F2F5FA}
.footer .fine{margin-top:32px;padding-top:20px;border-top:1px solid var(--glass-line);font-size:.82rem;color:var(--muted-night)}

/* ============================================================
   BUTTONS
   btn-brass — the action, ON NIGHT ONLY (brass fill, ink text).
   btn-ink   — the action on DAY (ink fill, white text).
   ghost     — secondary, both surfaces.
   ============================================================ */
.btn-brass,.btn-ink,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-ctl);font:inherit;font-weight:500;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-brass{background:var(--brass);color:var(--night);border-color:var(--brass)}
.btn-brass:hover{background:var(--brass-soft)}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:#1A2436}
.ghost{background:transparent;color:inherit;border-color:var(--line)}
.on-night .ghost,.night .ghost{border-color:var(--glass-line);color:#F2F5FA}
.ghost:hover{border-color:var(--muted)}

/* ============================================================
   CARD / CARD-LIFT / GLASS
   card      — a raised white surface on day (flat seat, 1px line).
   card-lift — the hero product card / report document (uses --lift).
   glass     — the door panel on night (--glass fill + border).
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.card-lift{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:var(--lift)}
.glass{background:var(--glass-fill);border:1px solid var(--glass-line);border-radius:var(--r-card);padding:24px;color:#F2F5FA}
.glass .lab{color:var(--brass)}

/* ============================================================
   LAB — a 13px letter-spaced label (kicker). Brass on night, muted on day.
   ============================================================ */
.lab{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   PILLS — status chips. ok = verified/done (green); neutral = everything else.
   Radius = --r-chip (never a pill ≥99px).
   ============================================================ */
.pill-ok,.pill-neutral{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-chip);
  font-size:.8rem;font-weight:500;line-height:1.3;
}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-fill)}
.pill-neutral{background:#EEF1F5;color:var(--muted);border:1px solid var(--line)}

/* ============================================================
   MONOGRAM — 2–3 letters, an ink tile with brass text. NEVER a provider logo.
   (On day it carries the brass-ink so it reads on a white card too.)
   ============================================================ */
.monogram{
  display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:var(--r-chip);background:var(--night);color:var(--brass);
  font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.02em;
}

/* ============================================================
   SEG — the segmented readiness bar. M segments; filled ones = --ok-fill.
   This is "Sedia N daripada M" made visible — NEVER a percentage.
   Usage: <div class="seg"><i class="on"></i><i class="on"></i><i></i>…</div>
   ============================================================ */
.seg{display:flex;gap:4px;align-items:center}
.seg i{flex:1;height:8px;border-radius:var(--r-chip);background:var(--line)}
.seg i.on{background:var(--ok-fill)}
.on-night .seg i,.night .seg i{background:rgba(255,255,255,.14)}
.on-night .seg i.on,.night .seg i.on{background:var(--ok-fill)}

/* ============================================================
   SHEET — bottom sheet (mobile) / popover (desktop) radiogroup container.
   White panel, 12px controls, soft-lift. Options are visible as a radiogroup.
   ============================================================ */
.sheet{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--lift);max-width:420px;
}
.sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet [role="radiogroup"]{display:grid;gap:8px;margin:0;padding:0}
.sheet [role="radio"]{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.sheet [role="radio"]:hover{border-color:var(--muted)}
.sheet [role="radio"][aria-checked="true"]{border-color:var(--ink);background:#F2F5FA;font-weight:500}

/* The blank in the sentence door — a button that opens the sheet. */
.blank{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;border-bottom:2px solid var(--brass);
  color:var(--brass-soft);font:inherit;font-weight:500;padding:0 2px 1px;cursor:pointer;
}

/* The door controller (js/v5-door.js) injects a backdrop + a .door-sheet at
   runtime. Bottom sheet < 1024px; popover anchored to the blank >= 1024px.
   The .sheet component above supplies the panel chrome + radiogroup styling. */
.door-backdrop{
  position:fixed;inset:0;z-index:60;
  background:rgba(11,18,32,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.door-sheet{
  width:100%;max-width:560px;margin:0;
  max-height:80vh;overflow-y:auto;
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.door-sheet[role="dialog"]{animation:door-rise .16s ease-out}
@keyframes door-rise{from{transform:translateY(12px)}to{transform:translateY(0)}}
/* Desktop: a popover anchored to the blank (JS sets top/left). */
@media(min-width:1024px){
  .door-backdrop.is-popover{background:transparent;display:block}
  .door-sheet.is-popover{
    width:320px;max-width:min(360px,calc(100vw - 24px));
    max-height:60vh;border-radius:var(--r-card);animation:none;
  }
}

/* ============================================================
   DOC — the report shown AS A DOCUMENT (Azali's signal #3). Soft-lift paper
   card with a PDF tag. Numbers inside are mono. Labelled "CONTOH" by the page.
   ============================================================ */
.doc{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--lift);padding:28px 26px;overflow:hidden;
}
.doc .pdf-tag{
  position:absolute;top:16px;right:16px;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;
  color:var(--muted);background:#EEF1F5;border:1px solid var(--line);
  border-radius:var(--r-chip);padding:3px 8px;
}
.doc .doc-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.doc .doc-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.doc .doc-line:last-child{border-bottom:0}
.doc .doc-line .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

/* ============================================================
   FOLD — a collapsed "Maklumat lanjut" row (a native <details>/<summary>).
   ============================================================ */
.fold{border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);overflow:hidden}
.fold+.fold{margin-top:8px}
.fold>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;cursor:pointer;font-weight:500;list-style:none;min-height:44px;
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";font-family:var(--mono);color:var(--muted);font-size:1.1rem}
.fold[open]>summary::after{content:"\2212"} /* minus */
.fold>summary:hover{background:#F2F5FA}
.fold .fold-body{padding:0 16px 16px;color:var(--muted);line-height:1.6}

/* ============================================================
   TRUST BAND — a day-section strip of real-peniaga photos (the proof we are
   built for real Malaysian business owners). Ships HIDDEN (the <section> carries
   the HTML `hidden` attribute) until real consented photos land — see the GO LIVE
   comment in index.html. The frames are the v5.1 craft treatment: a 4:3 hairline
   frame (1px --line, flat, no glow — radius --r-card), a short mono caption under
   each. Aspect is reserved (aspect-ratio:4/3) so there is zero CLS when photos drop.
   ============================================================ */
.trust-band .tb-lead{color:var(--muted);max-width:52ch;margin:10px 0 0}
.trust-band .tb-ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.trust-band .tb-ticks li{display:flex;align-items:center;gap:9px;line-height:1.5}
.trust-band .tb-ticks li::before{content:"";width:13px;height:8px;flex:none;border-left:2.5px solid var(--brass-ink);border-bottom:2.5px solid var(--brass-ink);transform:rotate(-45deg) translateY(-2px)}

/* The photo row: 4 across (desktop) → 2×2 (tablet) → 1 column (mobile). */
.trust-band .tb-row{display:grid;gap:16px;margin-top:28px;grid-template-columns:1fr}
@media(min-width:640px){.trust-band .tb-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.trust-band .tb-row{grid-template-columns:repeat(4,1fr)}}

.trust-band figure{margin:0;display:flex;flex-direction:column;gap:9px}
/* The hairline frame: 4:3 reserved, 1px line, flat (no shadow), --r-card corners. */
.peniaga-frame{
  position:relative;aspect-ratio:4 / 3;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
}
.peniaga-frame img{display:block;width:100%;height:100%;object-fit:cover}
.trust-band figcaption{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:-.01em}

@media (prefers-reduced-motion: no-preference){
  /* Reuse the shared fade-up entrance; reduced-motion sees the final state (band
     already in DOM flow). Gated so the reduced-motion guarantee holds. */
  .trust-band.bd-rise{opacity:0;animation:bd-rise .32s cubic-bezier(.22,.61,.36,1) both}
}

/* ============================================================
   ENTRANCE MOTION — restrained, physics-based, it WHISPERS.
   Transform + opacity ONLY (no gradient / shadow / radius — the v5.1 guard
   stays green). Linear / Teenage Engineering / Stripe register: 150–500ms,
   ease-out, fires ONCE. Motion COMMUNICATES (a result assembling), never
   decorates. EVERY rule is gated behind prefers-reduced-motion:no-preference,
   so reduced-motion sees the final state instantly and the count-up (JS) short-
   circuits via matchMedia. No layout shift: we animate opacity/transform of
   elements whose box is already reserved (counts use tabular-nums).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* A short fade-up used by hero label/H1/door and the example rows/pills.
     translateY is tiny (5px) — a settle, not a slide-from-far. */
  @keyframes bd-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  .bd-rise{opacity:0;animation:bd-rise .32s cubic-bezier(.22,.61,.36,1) both}

  /* Each filled readiness segment grows in from its left edge (left-to-right
     fill). The grey track is already full-width, so no reflow. */
  @keyframes bd-seg-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .seg.bd-fill i.on{transform-origin:left center;animation:bd-seg-fill .34s cubic-bezier(.22,.61,.36,1) both}
}