/* Potensa brand tokens — direction C "Trusted & Warm" (owner pick 2026-10-18): DM Serif Display headings, DM Sans body,
   navy + green on warm cream. Fredoka now ONLY in the logo. Previous 'riang' tokens: tokens.riang.bak.css.
   Original header: — shared by sales page, quiz, checkout, pay, test runner and result pages.
   Source: report_engine/brand/potensa/brand_book.html (Hijau / Kuning / Navy / Mint / Kuning lembut, Fredoka + Poppins).
   Import this first; page CSS only uses these variables. */
@font-face{font-family:"Fredoka";src:url("fonts/Fredoka.v2.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/DMSerifDisplay.v2.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/DMSans.v2.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* brand */
  --hijau:#1FA45B; --hijau-tua:#177D4A; --hijau-muda:#E6F3EB;
  --kuning:#D4962F; --kuning-tua:#B87D1F; --kuning-lembut:#F6ECD9; --krem:#F3ECDF;
  --navy:#15244A; --navy-2:#2C3B66; --mint:#E6F0E9; --mint-2:#F1F6F2;
  --merah:#FF5A4E; --pink:#FF8FC7; --biru:#3D6BFF;
  /* neutrals */
  --ink:#18223F; --ink-2:#4E566D; --ink-3:#878C9C; --line:#E7DFD0; --line-2:#EFE9DE;
  --paper:#FFFFFF; --bg:#FAF6EF; --bg-2:#F3ECDF;
  /* type */
  --f-display:"DM Serif Display",Georgia,"Times New Roman",serif; --f-logo:"Fredoka",ui-rounded,system-ui,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:34px; --fs-4xl:42px;
  /* shape */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,32,74,.06),0 2px 8px rgba(16,32,74,.06);
  --sh-2:0 6px 24px rgba(16,32,74,.10);
  --sh-3:0 14px 40px rgba(16,32,74,.16);
  --sh-btn:0 8px 20px rgba(23,125,74,.22);
  /* layout */
  --w-app:480px; --w-page:1120px; --gutter:16px;
  --tap:48px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:var(--fs-md);line-height:1.6;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.display{font-family:var(--f-display);font-weight:400;line-height:1.12;letter-spacing:-.005em;margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--biru);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* shared primitives */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border:0;border-radius:var(--r-pill);
  background:var(--hijau-tua);color:#fff;font-family:var(--f-body);font-weight:700;font-size:var(--fs-lg);text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-btn);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s}
.p-btn:hover{background:#146C40}
.p-btn:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(23,125,74,.2)}
.p-btn[disabled]{opacity:.5;pointer-events:none}
.p-btn--kuning{background:var(--kuning);color:var(--navy);box-shadow:0 4px 0 var(--kuning-tua)}
.p-btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line)}
.p-btn--block{display:flex;width:100%}
.p-card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);border:1px solid var(--line-2)}
.p-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;
  background:var(--mint);color:var(--hijau-tua)}
.p-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hijau-tua)}
.p-src{font-size:11px;line-height:1.4;color:var(--ink-3)}
.c-lead{display:flex;align-items:center;gap:10px;min-width:0}
.c-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2);color:var(--ink);text-decoration:none}