/* Shop-ticket look: slate ink, warm paper, steel blue (keep) vs safety orange (replace). System fonts only. */
:root{--ink:#1d2630;--ink2:#56616e;--paper:#f6f4ef;--card:#fffefb;--rule:#dcd7cc;--keep:#2f6690;--repl:#d9480f;--ok:#2b7a4b;--focus:#f2b705;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans)}
a{color:var(--ink);text-decoration-color:var(--repl);text-underline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site{max-width:1180px;margin:0 auto;padding:2.2rem 1rem 1.2rem}
.brand{font:700 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--repl);margin:0 0 .9rem}.brand span{color:var(--ink2)}
h1{font:800 clamp(2.2rem,5vw,3.6rem)/1 var(--sans);letter-spacing:-.02em;margin:0 0 .7rem;text-transform:uppercase}
.lede{max-width:62ch;color:var(--ink2);font-size:1.08rem;margin:0}
main{max-width:1180px;margin:0 auto;padding:0 1rem 2.5rem}
.layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1.25rem;align-items:start}
.card{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:1.1rem;margin:0 0 1rem}
fieldset.card{min-width:0}
legend{font:700 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:0 .4rem;display:flex;align-items:center;gap:.45rem}
legend i{width:.8rem;height:.8rem;border-radius:2px;display:inline-block}
.keep legend i{background:var(--keep)}.repl legend i{background:var(--repl)}
.side.keep{border-top:4px solid var(--keep)}.side.repl{border-top:4px solid var(--repl)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .9rem}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font-size:.86rem;font-weight:650;margin:.5rem 0 0}
label small{display:block;font-weight:400;color:var(--ink2);font-size:.76rem;margin-top:.2rem}
input,select,textarea{display:block;width:100%;margin-top:.25rem;font:inherit;font-family:var(--mono);color:var(--ink);background:#fff;border:1px solid #bfb8aa;border-radius:4px;padding:.5rem .6rem;min-height:2.6rem}
textarea{font-family:var(--sans);font-size:.9rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn{font:700 .92rem var(--sans);border-radius:4px;padding:.65rem 1rem;cursor:pointer;border:2px solid var(--ink);text-decoration:none;display:inline-block}
.btn.primary{background:var(--ink);color:#fff}.btn.primary:hover{background:#0e151c}
.btn.ghost{background:transparent;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.2rem 0 .8rem}
.hint{font-size:.82rem;color:var(--ink2);margin:.3rem 0 0}
.results{position:sticky;top:1rem}
.verdict{border-radius:6px;padding:1.1rem 1.2rem;margin:0 0 1rem;color:#fff;background:var(--ink2);display:flex;flex-direction:column;gap:.1rem}
.verdict.keep{background:var(--keep)}.verdict.replace{background:var(--repl)}.verdict.tie{background:var(--ink2)}
.verdict strong{font:800 1.9rem/1.1 var(--sans);text-transform:uppercase;letter-spacing:-.01em}
.v-kicker{font:600 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.bar{display:grid;grid-template-columns:4.5rem 1fr auto;gap:.6rem;align-items:center;margin:.35rem 0}
.bar span{font-weight:700;font-size:.88rem}.bar b{font-family:var(--mono);font-size:.92rem}
.bar div{background:#ece8df;border-radius:3px;height:1.1rem;overflow:hidden}
.bar i{display:block;height:100%}.bar i.keep{background:var(--keep)}.bar i.repl{background:var(--repl)}
.per{font-family:var(--mono);font-size:.85rem;color:var(--ink2);margin:.5rem 0 0}
.breakeven{border-left:6px solid var(--focus)}
.breakeven span{font:700 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.breakeven strong{display:block;font:800 2.2rem/1.1 var(--mono);margin:.15rem 0}
.breakeven p{margin:.2rem 0 0;font-size:.9rem}
h3{font-size:1rem;margin:0 0 .3rem}
.legend{font-size:.82rem;color:var(--ink2);margin:0 0 .4rem}.sw{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin:0 .3rem 0 .6rem;vertical-align:-1px}.sw.keep{background:var(--keep);margin-left:0}.sw.repl{background:var(--repl)}
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:#e6e1d6;stroke-width:1}.chart .ax{font:11px var(--mono);fill:var(--ink2)}
.chart .keep-line{fill:none;stroke:var(--keep);stroke-width:2.5}.chart .repl-line{fill:none;stroke:var(--repl);stroke-width:2.5}
.chart circle.keep{fill:var(--keep)}.chart circle.repl{fill:var(--repl)}
.table-wrap{overflow-x:auto;padding:.6rem}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:right;font:700 .7rem var(--mono);text-transform:uppercase;color:var(--ink2);border-bottom:2px solid var(--ink);padding:.4rem;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead tr:first-child th{border-bottom:1px solid var(--rule);text-align:center}
td{text-align:right;font-family:var(--mono);padding:.4rem;border-bottom:1px solid #ece8df;white-space:nowrap}
tr.tot td{font-weight:700;border-top:2px solid var(--ink)}
tr.tot td:nth-child(2){text-align:left;font-family:var(--sans);font-weight:400;color:var(--ink2)}
.explain,.faq,.cta{max-width:none}
.explain h2,.faq h2,.cta h2{font-size:1.3rem;margin:0 0 .5rem}
details{border-top:1px dashed var(--rule);padding:.6rem 0}summary{cursor:pointer;font-weight:650}
.cta{border:2px solid var(--ink);background:#fff}
.site-foot{text-align:center;font-size:.85rem;color:var(--ink2);padding:1.5rem 1rem 2rem}
.inputs,.results{min-width:0}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}.results{position:static}}
@media (max-width:560px){.sides,.grid{grid-template-columns:minmax(0,1fr)}.verdict strong{font-size:1.5rem}.breakeven strong{font-size:1.8rem}}
@media print{body{background:#fff}.site .lede,.inputs .actions,.inputs .hint,.results .actions,.explain,.faq,.cta,.site-foot,.skip{display:none!important}
.layout{display:block}.results{position:static}.card{break-inside:avoid}}