/* Cost Cutter sample report: light paper document inside the dark KH Labs shell (kh-a.css: nav, footer, buttons).
   Paper ground, Geist + Geist Mono. Green = still paid / pass, grey = removed, amber-brown (--p-acc) = a failing check. No orange. */
:root{
  --sheet:#faf8f2; --rule:var(--p-line); --rule2:rgb(22 20 15 / .28); --save:#0b6b49; --add:#e1efe4; --del:#efe3d2;
  --cutp:#bcb4a2; --ease:cubic-bezier(.16,1,.3,1);
}
html{background:var(--paper);scroll-padding-top:84px;scrollbar-color:#c4bca8 var(--paper)}
body{background:var(--paper);color:var(--p-ink);font:400 16.5px/1.62 var(--sans);overflow-x:hidden}
::selection{background:rgb(143 82 0 / .22);color:var(--p-ink)}
a{text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--p-ink)}
.nav a,.nav button,.sheet a,.dk a,.cta a.btn,.btn{text-decoration:none}
.nav{background:#08090b;color:var(--ink)}
:focus-visible{outline:2px solid var(--p-acc);outline-offset:3px}
.nav :focus-visible,.dk :focus-visible,.cta :focus-visible,.sheet :focus-visible{outline-color:var(--acc)}
code,.m,.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
code{font-size:.86em;background:rgb(22 20 15 / .07);padding:1px 5px}
.dk{background:var(--bg);color:var(--ink)}

/* ---------- document frame ---------- */
.doc{display:grid;grid-template-columns:220px minmax(0,820px);gap:64px;justify-content:center;padding:0 clamp(20px,4vw,56px)}
.toc{position:sticky;top:64px;align-self:start;padding-top:96px;font-size:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule);counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--p-mute);text-decoration:none}
.toc a::before{content:counter(t,decimal-leading-zero) "  ";font:500 11px var(--mono);color:#8a8272;white-space:pre}
.toc a:hover{color:var(--p-ink);border-left-color:var(--p-ink)}
.paper{padding:0 0 96px;min-width:0;display:block}
.paper section{padding:72px 0 8px}
.paper h1,.paper h2,.paper h3{max-width:none;color:var(--p-ink);letter-spacing:-.03em;margin:0;text-wrap:balance}
.paper h2{font-size:clamp(26px,2.6vw,34px);line-height:1.12;font-weight:600;padding-top:22px;border-top:2px solid var(--p-ink);margin-bottom:18px}
.paper h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin:36px 0 12px}
.paper p{margin:0 0 14px;color:var(--p-soft);max-width:62ch;text-wrap:pretty}
.paper .lede{max-width:58ch;font-size:19px;line-height:1.55;color:var(--p-ink)}
.paper .note{font-size:13.5px;color:var(--p-mute)}
.paper a{color:var(--p-ink)}

/* ---------- cover ---------- */
.cover{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;padding:56px 0 48px;border-bottom:1px solid var(--rule)}
.paper .cover{padding:56px 0 48px}
.cover__top{display:flex;justify-content:space-between;gap:16px;font:500 12.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--p-mute);padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:clamp(32px,6vh,64px)}
.cover h1{font-size:clamp(32px,3.6vw,50px);line-height:1.06;font-weight:600;letter-spacing:-.035em;max-width:24ch}
.cover__fig{margin:clamp(32px,6vh,56px) 0 clamp(28px,5vh,48px)}
.paper .cover__nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0;max-width:none;font-size:clamp(44px,6vw,84px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--p-ink);font-variant-numeric:tabular-nums}
.cover__nums .was{color:var(--p-mute)}
.cover__nums .arr{color:#a39b88;font-weight:400}
.cover__nums b{color:var(--save);font-weight:600}
.cover__nums small{font-size:17px;letter-spacing:0;font-weight:400;color:var(--p-mute)}
.paper .cover__sub{max-width:none;margin-top:14px;font:500 14px var(--mono);color:var(--p-soft)}
.cover__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;margin:0 0 28px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cover__meta dt{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--p-mute)}
.cover__meta dd{margin:4px 0 0;font-size:14.5px;line-height:1.4;color:var(--p-ink)}
.cover > *{animation:rise .9s var(--ease) both}
.cover > :nth-child(2){animation-delay:.05s}.cover > :nth-child(3){animation-delay:.12s}.cover > :nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- tables ---------- */
.t{width:100%;border-collapse:collapse;margin:18px 0 14px;font-size:14.5px}
.t caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--p-mute);padding-top:10px}
.t th{text-align:left;font:500 11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--p-mute);padding:0 10px 8px 0;border-bottom:1px solid var(--p-ink);vertical-align:bottom}
.t td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--p-ink)}
.t tfoot td{font-weight:600;border-bottom:2px solid var(--p-ink);border-top:1px solid var(--p-ink)}
.t .n{text-align:right;white-space:nowrap}
.t th.n{text-align:right}
.t tbody tr{transition:background .2s}
.t tbody tr:hover{background:rgb(22 20 15 / .03)}
.t a{text-decoration:none}.t a:hover{text-decoration:underline}
.up{color:var(--save)!important}.down,.failc{color:var(--p-acc)!important;font-weight:500}
.check{display:flex;align-items:center;gap:10px;font:500 13.5px var(--mono);color:var(--save)}
.check .ok{width:9px;height:9px;background:var(--save);flex:none}
.keys{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.keys li{padding:14px 0 0;border-top:1px solid var(--rule);color:var(--p-soft);max-width:62ch}
.keys b{color:var(--p-ink);font-weight:600}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t--fails td{font-size:13.5px}

/* ---------- waterfall ---------- */
.wf-fig{margin:28px 0 8px}
.wf{width:100%;height:auto;display:block;overflow:visible}
.wf__lab{font:400 13px var(--sans);fill:var(--p-soft)}
.wf__val{font:500 13px var(--mono);fill:var(--p-ink)}
.wf__val--end{fill:var(--save);font-weight:500}
.wf__base{fill:#3d3830}.wf__keep{fill:var(--save)}.wf__cut{fill:var(--cutp)}.wf__end{fill:var(--save)}
.wf rect{transform-box:fill-box;transform-origin:left center;animation:grow 1s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + .15s)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
figcaption{font-size:13px;color:var(--p-mute);margin-top:10px}

/* ---------- levers ---------- */
.lever{padding:40px 0 8px!important;border-top:1px solid var(--rule);margin-top:32px}
.lever__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;margin-bottom:12px}
.paper .lever h3{margin:0;font-size:22px;display:flex;align-items:baseline;gap:12px}
.lever__n{font:500 13px var(--mono);color:var(--p-mute)}
.paper .lever__save{margin:0;font-size:14px;color:var(--p-mute)}
.lever__save b{font:500 20px var(--mono);color:var(--save);margin-right:4px}
.lever__save span{display:block;text-align:right;font-size:12.5px}
.ex{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;background:var(--sheet);border:1px solid var(--rule)}
.ex caption{caption-side:top;text-align:left;font-size:13px;color:var(--p-mute);padding-bottom:8px}
.ex th,.ex td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.ex thead th{font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--p-mute)}
.ex tbody th{font-weight:600;width:70px}
.ex .n{text-align:right;white-space:nowrap}
.ex .m{display:block;font-size:12px;color:var(--p-mute);margin-top:2px}
.pr{margin:18px 0;border:1px solid var(--rule2);overflow:hidden;background:var(--sheet)}
.pr__h{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--rule);background:#ebe6d9;font-size:13.5px}
.pr__t{font-weight:600}
.pr__t::before{content:"";display:inline-block;width:8px;height:8px;background:var(--save);margin-right:8px;vertical-align:1px}
.pr__f{font:500 12.5px var(--mono);color:var(--p-mute)}
.pr__d{margin:0;padding:8px 0;overflow-x:auto;font:12.5px/1.65 var(--mono)}
.pr__d code{background:none;padding:0;font-size:inherit;display:block;min-width:max-content}
.dl{display:block;padding:0 16px 0 0;white-space:pre;color:var(--p-soft)}
.dl__s{display:inline-block;width:28px;text-align:center;color:var(--p-mute);user-select:none}
.dl--add{background:var(--add);color:#0f3d2a}.dl--add .dl__s{color:var(--save)}
.dl--del{background:var(--del);color:#4b3512}.dl--del .dl__s{color:var(--p-acc)}
.pr figcaption{margin:0;padding:8px 14px 10px;border-top:1px solid var(--rule);font-size:12.5px}
.paper .risk{font-size:14.5px;max-width:64ch}
.risk b{color:var(--p-ink);font-weight:600}

/* ---------- eval ---------- */
.iters{list-style:none;padding:0;margin:12px 0 28px;display:grid;gap:10px}
.iters li{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:4px 16px;font-size:14.5px;color:var(--p-soft)}
.iters li b{font:500 14px var(--mono);text-align:right;color:var(--p-ink)}
.iters li i{grid-column:1 / -1;height:6px;background:#e1dccd;position:relative;overflow:hidden}
.iters li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--p-ink);transform-origin:left;animation:grow 1s var(--ease) both .2s}
.iters li:first-child i::after{background:#8a8272}
.iters li:last-child i::after{background:var(--save)}
.callout{background:var(--sheet);border:1px solid var(--rule2);padding:18px 20px 6px;margin:8px 0 12px}
.callout b{color:var(--p-ink)}

/* ---------- plan, guarantee, cta ---------- */
.plan{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:0}
.plan li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid var(--rule);color:var(--p-soft)}
.plan li b{font:500 13.5px var(--mono);color:var(--p-ink)}
.guar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:start;padding:24px;background:var(--sheet);border:1px solid var(--rule2)}
.paper .guar p{margin:0;color:var(--p-ink)}
.paper .guar__price{font:600 48px/1 var(--sans);letter-spacing:-.045em;color:var(--p-ink)}
.guar__price small{display:block;font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--p-mute);margin-top:8px;max-width:14ch}
.rincl{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;font-size:15px;color:var(--p-soft)}
.rincl li{display:flex;gap:10px}
.rincl li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%230b6b49' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat}
.paper .cta{margin-top:64px;padding:40px clamp(20px,4vw,44px)}
.cta{background:var(--bg);color:var(--ink)}
.paper .cta h2{border-top:0;padding-top:0;color:var(--ink)}
.paper .cta p{color:var(--soft);font-size:17px}
.paper .cta p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.paper .cta .btn{color:#0a0b0d}.paper .cta .btn--g{color:var(--ink)}
.paper .cta .btn:hover{color:#0a0b0d}.paper .cta .btn--g:hover{color:var(--ink)}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.paper .cta .cta__mail{margin-top:18px;font-size:15px;color:var(--mute)}
.method{padding-left:18px;color:var(--p-soft);font-size:14.5px;display:grid;gap:8px;max-width:58ch}
.method b{color:var(--p-ink)}
.method li::marker{color:var(--p-mute)}
.dk footer{border-top:0}

/* ---------- sample-audit extras ---------- */
.sa .doc{display:block;max-width:900px;margin:0 auto}\n.sa .paper{padding-bottom:64px}
.sa .sum{display:flex;gap:10px 40px;flex-wrap:wrap;margin:18px 0 6px;align-items:baseline}
.sa .sum .big{font-size:clamp(34px,5vw,54px);letter-spacing:-.045em;font-weight:600;line-height:1}
.sa .sum .big .was{color:var(--p-mute)}.sa .sum .big b{color:var(--save);font-weight:600}
.sa .sum .big small{font-size:16px;letter-spacing:0;font-weight:400;color:var(--p-mute);margin-left:8px}
.sa .meta{font:500 12.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--p-mute);margin-bottom:22px}
.sa .paper h1{font-size:clamp(30px,4vw,44px);line-height:1.06;margin:0 0 14px}
.sa .paper section{padding-top:48px}
.sa .s{color:var(--p-mute);font-size:13px}
.sa .paper ul{padding-left:18px;color:var(--p-soft);display:grid;gap:8px;max-width:66ch}
.sa .paper ul li::marker{color:var(--p-mute)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .doc{grid-template-columns:minmax(0,820px)}
  .toc{display:none}
}
@media (max-width:700px){
  body{font-size:15.5px}
  .paper section{padding-top:56px}
  .cover{min-height:0;padding-top:40px}
  .cover__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover__top{flex-direction:column;gap:4px}
  .t{display:block;overflow-x:auto;font-size:13.5px}
  .t--risk{display:table}
  .t--risk td{font-size:13.5px}
  .ex thead{display:none}
  .ex tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
  .ex tbody th,.ex tbody td{border:0;width:auto}
  .ex tbody th,.ex td.su{grid-column:1 / -1;padding-bottom:2px}
  .ex td.n{text-align:left;padding-top:4px}
  .ex td.n::before{content:attr(data-l);display:block;font:500 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--p-mute)}
  .lever__save span{text-align:left}
  .guar{grid-template-columns:minmax(0,1fr);gap:16px}
  .rincl{grid-template-columns:minmax(0,1fr)}
  .plan li{grid-template-columns:minmax(0,1fr);gap:4px}
  .cta__btns .btn{width:100%;white-space:normal}
  .wf__lab,.wf__val{font-size:19px}
}

/* ---------- print / PDF ---------- */
@page{size:A4;margin:16mm 14mm 18mm}
@media print{
  html,body{background:#fff}
  body{font-size:10.5pt}
  .nav,.sheet,.toc,.dk,.skip,.cta__btns{display:none!important}
  .doc{display:block;padding:0}
  .paper{padding:0}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cover{min-height:0;height:255mm;break-after:page;padding:0;justify-content:center;border:0}
  .paper section{padding-top:0}
  .paper section + section{margin-top:10mm}
  #baseline,#levers,#eval,#risks,#method{break-before:page}
  h2,h3,.lever__head{break-after:avoid}
  .t,.ex,.pr,.callout,.guar,.plan li,.iters,.wf-fig,tr{break-inside:avoid}
  .dl{white-space:pre-wrap;overflow-wrap:anywhere}
  .pr__d{font-size:8.4pt}
  .pr__d code{min-width:0}
  .lever + .lever{margin-top:6mm}
  .paper .cta{background:#fff;color:var(--p-ink);border:1.5px solid var(--p-ink)}
  .paper .cta h2{color:var(--p-ink)}.paper .cta p{color:var(--p-soft)}
  .paper .cta p a{color:var(--p-ink)}
  .cta p:first-of-type::after{content:" Get a free AI check: khlabs.dev/#check · linkedin.com/in/khoa-tran-khlabs · khoatran.mma26@gmail.com";color:var(--p-acc)}
  a{text-decoration:none}
  .sa .paper{padding:0}
}