/* Proof Frame. Keep the established pastel learning surfaces and bold ink. */
:root{--brand-teal:#145b55;--brand-line:#bdb7a9}
body{background-image:radial-gradient(#1414140d .7px,transparent .7px);background-size:18px 18px}
.topbar{padding:14px max(18px,calc((100vw - 1240px)/2));gap:24px;background:#faf5ecf7;backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
.brand{gap:12px;flex-shrink:0}
.brand .mark{width:48px;height:48px;transform:none;border:0;box-shadow:none;border-radius:0;background:none;color:var(--ink)}
.mark svg{display:block;width:100%;height:100%}
.wordmark{font-size:1.65rem;letter-spacing:-.065em;line-height:1.05}
.wordmark-lab{font-weight:600;margin-left:4px;letter-spacing:-.055em}
.brand small{font-size:.61rem;letter-spacing:.055em;text-transform:none;line-height:1.8;font-weight:600}
.mainnav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1;flex-wrap:wrap}
.topbar .pillbtn{font-size:.78rem;padding:10px 12px;box-shadow:none;border:1.5px solid transparent;background:transparent;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.topbar .pillbtn:hover{background:#fff;border-color:var(--ink)}
.topbar .pillbtn[aria-current=page]{background:var(--ink);color:var(--butter);border-color:var(--ink)}
.topbar .langbtn{border-color:var(--ink);background:var(--butter);min-width:44px}
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;padding:12px 20px;color:white;background:var(--ink);border-radius:8px;font-weight:800}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brand-teal);outline-offset:4px}
main:focus{outline:none}
.brand-hero{margin-top:28px;padding:34px;display:grid;grid-template-columns:minmax(0,1fr) 230px;column-gap:32px;overflow:hidden;border-width:2px;box-shadow:6px 6px 0 var(--ink)}
.brand-eyebrow{font:700 .68rem var(--mono);letter-spacing:.12em;display:flex;align-items:center;gap:9px;margin-bottom:20px}
.brand-dot{width:8px;height:8px;background:var(--brand-teal);flex-shrink:0}
.brand-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.055em;line-height:1.02;margin:0 0 22px;max-width:700px}
.brand-hero .hero-copy>p{max-width:620px}
.brand-hero .hero-honesty{font-size:.76rem;line-height:1.6;margin-top:20px}
.proof-emblem{align-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transform:rotate(5deg)}
.emblem-frame{background:var(--ink);color:var(--butter);width:174px;height:174px;padding:22px;box-shadow:10px 10px 0 #14141422}
.emblem-frame svg{width:100%;height:100%}
.proof-emblem>span{font:700 .75rem var(--mono);letter-spacing:.22em;margin-top:8px}
.proof-emblem>small{font-size:.64rem;max-width:210px;font-weight:800}
.proof-process{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border-top:1px solid #14141455;padding-top:18px;margin-top:24px}
.proof-process>div{display:flex;align-items:center;gap:10px;font-size:.77rem;font-weight:800}
.process-num{font:700 .63rem var(--mono);display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;background:#fff9;border:1px solid #14141466}
.trackcard{transition:transform .16s ease,box-shadow .16s ease}
.trackcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.trackcard .num{display:inline-block;font-family:var(--mono);border-bottom:2px solid var(--ink);margin-bottom:12px;opacity:1;padding-bottom:4px;min-width:24px}
.footer:before{content:'[✓] BUKTI LAB';display:block;font:700 .7rem var(--mono);letter-spacing:.12em;margin-bottom:10px;color:var(--ink)}
@media(min-width:1100px){.container{padding-top:4px}}
@media(max-width:1000px){.topbar{gap:12px}.brand{width:100%}.mainnav{justify-content:flex-start}.topbar{position:static}.brand-hero{grid-template-columns:minmax(0,1fr) 180px;padding:26px;gap:20px}.emblem-frame{width:150px;height:150px}}
@media(max-width:600px){.topbar{padding:14px 16px 12px;gap:12px}.brand .mark{width:42px;height:42px}.wordmark{font-size:1.5rem}.mainnav{gap:5px}.topbar .pillbtn{min-height:44px;font-size:.75rem;padding:8px 10px;border-color:#14141425;background:#fff9}.brand-hero{margin-top:18px;padding:22px 18px;grid-template-columns:1fr;gap:0}.brand-eyebrow{font-size:.59rem;letter-spacing:.07em;margin-bottom:20px}.brand-hero h1{font-size:clamp(2.25rem,10vw,3.25rem);margin-bottom:18px}.proof-emblem{display:none}.proof-process{gap:10px;margin-top:18px;padding-top:16px}.proof-process>div{align-items:flex-start;flex-direction:column;font-size:.66rem;line-height:1.4;gap:7px}.brand-hero .hero-honesty{font-size:.73rem}.brand-hero .bigbtn{font-size:.85rem}.brand-hero .btnrow{gap:10px}.brand-hero .hero-copy>p{font-size:.94rem!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
