:root{
  --ink:#16211c;
  --muted:#5c6b62;
  --bg:#f2f5f1;
  --card:#ffffff;
  --line:#dce4dd;
  --green:#0e6b4f;
  --green-deep:#0a4a37;
  --gold:#d9a62e;
  --slab0:#cfe0d6;
  --slab1:#7fbfa0;
  --slab2:#3f9d78;
  --slab3:#d9a62e;
  --slab4:#c9812c;
  --slab5:#b05a1f;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:1.15rem;font-weight:700}
h2{font-size:1rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:var(--green-deep);border-bottom:2px solid var(--line);padding-bottom:.4rem;margin-bottom:.9rem}
h3{font-size:1.05rem;margin-top:1.4rem;color:var(--green-deep)}
a{color:var(--green)}
code{font-family:var(--mono);background:#e9efe9;padding:.1em .35em;border-radius:4px;font-size:.9em}

.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 1.25rem .9rem;background:var(--green-deep);color:#f4f8f4}
.brand{display:flex;gap:.8rem;align-items:center}
.brand-mark{font-family:var(--mono);font-weight:600;font-size:1.6rem;background:var(--gold);color:var(--green-deep);
  width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:8px}
.topbar h1{color:#fff}
.sub{margin:0;font-size:.8rem;color:#cfe0d6}
.badge{background:var(--gold);color:var(--green-deep);font-weight:600;padding:.05rem .45rem;border-radius:4px;font-size:.75rem}
.verified{margin:0;font-family:var(--mono);font-size:.7rem;color:#9dc4b0}

.tabs{display:flex;gap:.25rem;overflow-x:auto;padding:.6rem 1.25rem 0;background:var(--green-deep);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;color:#cfe0d6;font:inherit;font-weight:500;padding:.55rem .9rem;cursor:pointer;
  border-radius:8px 8px 0 0;white-space:nowrap}
.tab:hover{color:#fff}
.tab.active{background:var(--bg);color:var(--green-deep);font-weight:600}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

main{max-width:960px;margin:0 auto;padding:1.25rem}
.panel{display:none}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.active{animation:none}}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:720px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.lead{color:var(--muted);font-size:.92rem;margin-top:0}

label{display:block;font-size:.85rem;font-weight:500;margin:.9rem 0 .3rem}
input[type=number],input[type=text]{width:100%;font:500 1.05rem var(--mono);padding:.55rem .7rem;
  border:1.5px solid var(--line);border-radius:8px;background:#fbfdfb;color:var(--ink)}
input:focus-visible{outline:2px solid var(--green);border-color:var(--green)}
.check{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.9rem;margin:.7rem 0}
.check input{width:1.05rem;height:1.05rem;accent-color:var(--green)}
.presets{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.presets button{font:500 .78rem var(--mono);border:1px solid var(--line);background:#fbfdfb;border-radius:999px;
  padding:.25rem .6rem;cursor:pointer;color:var(--muted)}
.presets button:hover{border-color:var(--green);color:var(--green)}
details.benefits{margin-top:1rem;border-top:1px dashed var(--line);padding-top:.6rem}
details.benefits summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--green-deep)}
.note{font-size:.78rem;color:var(--muted)}

.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.92rem}
.ledger td{padding:.42rem 0;border-bottom:1px dashed var(--line)}
.ledger td:last-child{text-align:right;font-weight:500}
.ledger tr.minus td:last-child{color:#a33b1e}
.ledger tr.plus td:last-child{color:var(--green)}
.ledger tr.total td{border-bottom:none;border-top:2px solid var(--ink);font-weight:600;padding-top:.55rem}
.takehome-line{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;
  background:var(--green-deep);color:#fff;border-radius:8px;padding:.7rem .9rem}
.takehome-line strong{font-family:var(--mono);font-size:1.45rem;color:var(--gold)}
.eff{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
.quote-line{margin:.2rem 0 .9rem;font-size:.95rem;color:var(--muted)}
.quote-line strong{font-family:var(--mono);font-size:1.7rem;color:var(--green-deep);display:block}

.ladder{display:flex;width:100%;height:56px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.ladder .seg{position:relative;height:100%;background:#eef2ee}
.ladder .seg .fill{position:absolute;inset:0;width:0;transition:width .4s ease}
.ladder .seg .rate{position:absolute;top:4px;left:6px;font:600 .68rem var(--mono);color:var(--ink);opacity:.75;z-index:1}
.ladder-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.7rem}
.ladder-legend .chip{display:flex;align-items:center;gap:.4rem;font:500 .75rem var(--mono);color:var(--muted)}
.ladder-legend .dot{width:.7rem;height:.7rem;border-radius:3px;display:inline-block}

.slab-table{width:100%;border-collapse:collapse;font-size:.88rem;margin:.6rem 0}
.slab-table th,.slab-table td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.slab-table th{background:#eef2ee;font-weight:600}
.slab-table td:last-child,.slab-table th:last-child{text-align:right;font-family:var(--mono)}

.prose p{font-size:.95rem}
.disclaimer{background:#fdf6e5;border:1px solid #ecd9a2;border-radius:8px;padding:.7rem .9rem;font-size:.85rem}

.ask-card{max-width:720px;margin:0 auto}
.chat-log{min-height:120px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;margin:.8rem 0}
.msg{padding:.6rem .85rem;border-radius:10px;font-size:.92rem;max-width:88%;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--green-deep);color:#fff}
.msg.bot{align-self:flex-start;background:#eef2ee;border:1px solid var(--line)}
.ask-form{display:flex;gap:.5rem}
.btn{font:600 .95rem var(--sans);background:var(--green);color:#fff;border:0;border-radius:8px;padding:.55rem 1.1rem;cursor:pointer}
.btn:hover{background:var(--green-deep)}
.btn:disabled{opacity:.55;cursor:wait}

footer{max-width:960px;margin:0 auto;padding:0 1.25rem 2rem;color:var(--muted);font-size:.75rem;font-family:var(--mono)}