/* Blog, about and 404 pages. Brand values copied from design/tokens.css v1.0 (Akrab), the same block as app/waitlist/styles.css.
   Change tokens.css first, then copy here. No JavaScript on these pages. */
:root{
  --bg:#FFFFFF;--soft:#F2F5F8;--ink:#1E202A;--muted:#525A6B;--line:#DDE4EB;
  --primary:#345680;--primary-deep:#28446A;--on:#FFFFFF;--tint:#E5EBF0;
  --accent:#DC6C17;--accent-soft:#FBE9DC;--accent-text:#B4530E;
  --sky:#E3F1FB;--sky-ink:#1F5A8A;--mint:#E3F5EC;--mint-ink:#1E6B4A;--peach:#FDEBDD;--peach-ink:#9A4A12;--lilac:#ECE8FA;--lilac-ink:#4D3F8F;--sun:#FFF3CC;--sun-ink:#7A5A00;
  --fd:"Poppins","Segoe UI",sans-serif;--fb:"Inter","Segoe UI",Roboto,sans-serif;
  --r:20px;--rs:12px;--gut:clamp(16px,4vw,32px);--nav:60px;--ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.65;overflow-x:clip}
h1,h2,h3{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
h2{font-size:clamp(1.35rem,1.15rem + 1vw,1.85rem)}
h3{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.35}
p,ul,ol{margin:0}
a{color:var(--primary)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
.muted{color:var(--muted)}.small{font-size:.88rem}.k{font-size:.8rem;color:var(--muted)}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--ink);color:var(--on);padding:10px 14px;border-radius:8px}.skip:focus{top:8px}
.preview-bar{margin:0;background:var(--sun);color:var(--sun-ink);text-align:center;font-size:.85rem;font-weight:600;padding:6px 12px}
.eyebrow{display:inline-flex;font-size:.8rem;font-weight:600;color:var(--primary);background:var(--tint);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--primary);color:var(--on);border:1.5px solid var(--primary);font:600 1rem var(--fb);text-decoration:none;transition:transform .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px);background:var(--primary-deep)}
.btn.sm{min-height:42px;padding:0 18px;font-size:.92rem}

/* nav and footer, same as the landing page */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:12px;height:var(--nav)}
.wm{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);margin-right:auto}
.wm b{font-weight:600;color:var(--primary)}.wm svg{flex:none}
.links{display:none;gap:24px;font-size:.95rem;font-weight:500}.links a{color:var(--muted);text-decoration:none;padding:10px 0}.links a:hover{color:var(--ink)}
@media(min-width:800px){.links{display:flex;margin-right:12px}}
.foot{margin-top:56px;padding-block:32px;border-top:1px solid var(--line)}
.foot-in{display:grid;gap:10px}.foot a{color:inherit}
.foot-cats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;font-weight:500}

/* breadcrumbs */
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.85rem;color:var(--muted);margin-top:18px}
.crumbs li+li::before{content:"/";margin-right:4px;color:var(--line)}
.crumbs a{color:var(--muted)}
.crumbs li[aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}

/* labels and tones */
.cat-label{display:inline-block;border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:600;text-decoration:none}
.sky{background:var(--sky);color:var(--sky-ink)}.mint{background:var(--mint);color:var(--mint-ink)}.peach{background:var(--peach);color:var(--peach-ink)}
.lilac{background:var(--lilac);color:var(--lilac-ink)}.sun{background:var(--sun);color:var(--sun-ink)}.tint{background:var(--tint);color:var(--primary-deep)}

/* hubs and blog home */
.hub{padding-top:clamp(20px,4vw,40px)}
.hub h1{max-width:22em}
.hub-intro{max-width:44em;margin-top:16px;color:var(--muted);display:grid;gap:12px}
.sec-h{margin:40px 0 16px}
.cards{list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-top:24px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.post-card a{display:grid;gap:10px;align-content:start;height:100%;padding:20px;color:inherit;text-decoration:none;border-radius:var(--r);transition:background-color .18s}
.post-card a:hover{background:var(--soft)}
.post-card .cat-label{justify-self:start}
.post-card p{color:var(--muted);font-size:.94rem}
.post-card h3{font-size:1.08rem}
.stages{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.stage{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:16px;border-radius:var(--rs);text-decoration:none;height:100%}
.stage .n{grid-row:span 2;font-family:var(--fd);font-size:1.4rem;line-height:1}
.stage .t{font-weight:600}.stage .d{font-size:.88rem;opacity:.9}
.journey{display:flex;justify-content:space-between;gap:12px;margin-top:40px;flex-wrap:wrap}
.journey a{display:grid;padding:14px 18px;border:1px solid var(--line);border-radius:var(--rs);text-decoration:none;font-weight:600;min-width:min(100%,240px)}
.journey .nx{text-align:right;margin-left:auto}
.pager{display:flex;gap:8px;margin-top:24px}.pager a,.pager span{padding:6px 12px;border:1px solid var(--line);border-radius:8px}.pager span{background:var(--tint)}

/* article */
.post-head{max-width:46em;padding-top:clamp(16px,3vw,28px);display:grid;gap:14px;justify-items:start}
.post-head .lead{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink);background:var(--soft);border-left:4px solid var(--accent);padding:14px 18px;border-radius:0 var(--rs) var(--rs) 0}
.byline{font-size:.88rem;color:var(--muted)}
.post-grid{display:grid;gap:28px;margin-top:28px}
@media(min-width:1000px){.post-grid{grid-template-columns:240px minmax(0,46em);gap:48px}.toc{position:sticky;top:calc(var(--nav) + 20px);align-self:start}}
.toc{border:1px solid var(--line);border-radius:var(--rs);padding:16px 18px;font-size:.92rem}
.toc-k{font-weight:600;margin-bottom:8px}
.toc ol{padding-left:1.2em;display:grid;gap:6px}
.toc a{color:var(--muted);text-decoration:none}.toc a:hover{color:var(--primary);text-decoration:underline}
.prose{display:grid;gap:16px;min-width:0}
.prose.solo{max-width:46em;margin-top:24px}
.prose h2{margin-top:20px}.prose h3{margin-top:8px}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:6px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose code{font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:5px}
.prose blockquote{margin:0;border-left:4px solid var(--line);padding:4px 0 4px 16px;color:var(--muted);display:grid;gap:8px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rs)}
.tbl table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--soft);font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.box{border-radius:var(--rs);padding:16px 18px;display:grid;gap:8px}
.box-k{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.box-coba{background:var(--mint);color:var(--mint-ink)}
.box-catatan{background:var(--sky);color:var(--sky-ink)}
.box-sidang{background:var(--lilac);color:var(--lilac-ink)}
.box-angka{background:var(--soft);color:var(--muted);font-size:.9rem}
.box a{color:inherit}
.faq{display:grid;gap:10px;margin-top:12px;padding-top:20px;border-top:1px solid var(--line)}
.faq h3{margin-top:10px}
.cta-box{background:var(--primary);color:var(--on);border-radius:var(--r);padding:24px;display:grid;gap:12px;justify-items:start;margin-top:12px}
.cta-k{font-size:.8rem;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.cta-t{font-family:var(--fd);font-size:1.25rem;line-height:1.3}
.cta-box .btn{background:var(--on);color:var(--primary);border-color:var(--on)}
.cta-box .muted{color:var(--on);opacity:.85}
.related{margin-top:48px}
.tags{margin-top:20px;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.tags a{background:var(--soft);border-radius:999px;padding:2px 10px;text-decoration:none;color:var(--muted)}
@media print{.nav,.toc,.cta-box,.related,.foot{display:none}}