@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FBFBFC; --paper2:#F3F4F6; --card:#FFFFFF; --ink:#17181B; --ink-soft:#52555C; --faint:#9AA0A8;
  --green:#15663C; --green-d:#0E4A2B; --green-bg:#ECF4EF; --rule:#E5E6E9; --rule-d:#D3D5DA; --gold:#15663C;
  --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16.5px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--green-d);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.mono{font-family:'IBM Plex Mono',monospace}
.serif{font-family:'Fraunces',Georgia,serif}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:none;
  padding:13px 22px;border-radius:var(--r);font:600 15px Inter;cursor:pointer;transition:.15s;letter-spacing:.1px}
.btn:hover{background:#000}
.btn.green{background:var(--green)} .btn.green:hover{background:var(--green-d)}
.btn.gold{background:var(--gold);color:#fff} .btn.gold:hover{filter:brightness(.94)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-d)}
.btn.ghost:hover{border-color:var(--ink)}

/* top bar */
.topbar{border-bottom:1.5px solid var(--ink);background:var(--paper)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font:600 19px Inter;color:var(--ink);letter-spacing:-.2px}
.logo .mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:5px;font-size:16px;background:var(--ink);color:var(--paper)}
.nav{display:flex;align-items:center;gap:26px;font-size:14.5px;color:var(--ink-soft)}
.nav a{color:var(--ink-soft)} .nav a:hover{color:var(--ink)}

/* hero */
.hero{padding:66px 0 30px}
.eyebrow{font:600 12.5px 'IBM Plex Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin:0 0 20px}
.hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:62px;line-height:1.04;letter-spacing:-1px;margin:0 0 22px;max-width:13ch}
.hero h1 em{font-style:italic;color:var(--green)}
.hero .lead{font-size:19px;color:var(--ink-soft);max-width:54ch;margin:0 0 30px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}

/* ledger entry visual */
.ledger{margin-top:40px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);overflow:hidden;max-width:560px}
.ledger .lh{display:flex;justify-content:space-between;padding:9px 18px;border-bottom:1.5px solid var(--ink);font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.ledger .lrow{display:flex;justify-content:space-between;align-items:baseline;padding:13px 18px;border-bottom:1px dashed var(--rule-d)}
.ledger .lrow:last-child{border-bottom:none}
.ledger .lrow .desc{font-size:14.5px;color:var(--ink)}
.ledger .lrow .amt{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:17px;color:var(--green-d)}
.ledger .lrow.total{background:var(--green-bg)}
.ledger .lrow.total .desc{font-weight:600} .ledger .lrow.total .amt{font-size:22px;font-weight:600}

/* sections + rules */
section{padding:50px 0;border-top:1.5px solid var(--rule)}
.section-label{font:600 12.5px 'IBM Plex Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
h2.sec{font-family:'Fraunces',serif;font-weight:500;font-size:36px;letter-spacing:-.4px;margin:0 0 12px}
.sub{color:var(--ink-soft);font-size:17.5px;max-width:60ch;margin:0 0 30px}

/* ledger-row steps */
.steprow{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--rule)}
.steprow:last-child{border-bottom:1px solid var(--rule)}
.steprow .n{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:22px;color:var(--green)}
.steprow h3{font-family:'Fraunces',serif;font-weight:500;font-size:21px;margin:0 0 5px}
.steprow p{margin:0;color:var(--ink-soft);font-size:15.5px;max-width:64ch}

/* tool card */
.tool-card{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);overflow:hidden}
.tool-head{background:var(--ink);color:var(--paper);padding:13px 22px;display:flex;align-items:center;gap:10px;font:600 15px Inter}
.tool-head .mark{width:24px;height:24px;border:1px solid var(--paper);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.tool-head .lock{margin-left:auto;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.5px;color:#C9C2B0;display:flex;align-items:center;gap:6px}
.tool-body{padding:26px}
.field{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.field label{font-size:14px;color:var(--ink-soft);min-width:130px;font-weight:500}
input[type=range]{flex:1;accent-color:var(--green)}
.field .out{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:18px;min-width:66px;text-align:right}
.seg{display:flex;gap:0;flex:1;border:1.5px solid var(--rule-d);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;font:500 14px Inter;padding:10px 4px;border:none;border-right:1px solid var(--rule-d);background:var(--card);cursor:pointer;color:var(--ink-soft);transition:.12s}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink);color:var(--paper);font-weight:600}

.result-box{border:1.5px solid var(--green);border-radius:var(--r);background:var(--green-bg);padding:22px;text-align:center;margin:8px 0 18px}
.result-box .rl{font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--green-d);margin-bottom:6px}
.result-box .rv{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:36px;color:var(--green-d);letter-spacing:-1px}
.result-box .rm{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--green-d);margin-top:5px}
.fineprint{font-size:12.5px;color:var(--faint);max-width:60%}

input[type=email],input[type=text]{width:100%;padding:13px 15px;border:1.5px solid var(--rule-d);border-radius:var(--r);font:400 15px Inter;background:var(--card)}
input:focus{outline:none;border-color:var(--green)}

/* lead block */
.lead-card{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--paper);padding:34px;display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center}
.lead-card h2{font-family:'Fraunces',serif;font-weight:500;margin:0 0 10px;font-size:30px;color:var(--paper)}
.lead-card p{color:#C9C2B0;margin:0;font-size:15px}
.lead-form{display:flex;flex-direction:column;gap:11px}
.lead-form .row{display:flex;gap:11px}
.lead-form input{background:var(--card)}
.lead-note{font:500 12px 'IBM Plex Mono',monospace;color:#A39B88;margin-top:2px}

/* trust list */
.trust-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.trust-item{padding:20px 24px 20px 0;border-top:1px solid var(--rule)}
.trust-item .tag{font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--green);margin-bottom:7px;display:block}
.trust-item h4{font-family:'Fraunces',serif;font-weight:500;margin:0 0 4px;font-size:17px}
.trust-item p{margin:0;font-size:14px;color:var(--ink-soft)}

/* lookback uploaders */
.uploader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:80px;border:1.5px dashed var(--rule-d);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:.15s;background:var(--paper)}
.uploader:hover{border-color:var(--green);background:var(--green-bg)}
.uploader.loaded{border-style:solid;border-color:var(--green);background:var(--green-bg)}
.uploader .u-name{font-weight:600;color:var(--green-d)}
.muted-row{font-size:13px;color:var(--ink-soft)}
.muted-row code{font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--paper2);padding:1px 5px;border-radius:3px}
table.bd{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
table.bd th{text-align:left;font:600 11px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:9px 8px}
table.bd td{padding:10px 8px;border-top:1px solid var(--rule)}
table.bd td.num{text-align:right;font-family:'IBM Plex Mono',monospace}
.banner-ok{border:1.5px solid var(--green);background:var(--green-bg);color:var(--green-d);border-radius:var(--r);padding:11px 15px;font:500 13px 'IBM Plex Mono',monospace;display:flex;align-items:center;gap:8px;margin-bottom:18px}

footer{padding:36px 0;border-top:1.5px solid var(--ink);color:var(--faint);font-size:13px;margin-top:20px}
footer strong{color:var(--ink-soft);font-family:'Fraunces',serif;font-weight:500}
.hide{display:none}

@media(max-width:760px){
  .hero h1{font-size:42px}.lead-card{grid-template-columns:1fr}
  h2.sec{font-size:28px}.fineprint{max-width:100%}.wrap{padding:0 18px}
}