/* Layout: brand bar · home (hero + category grid of calculators) or calculator view (inputs left, results right) · footer */
:root{
  --bg:#f4f6f5; --surface:#ffffff; --ink:#14211e; --muted:#5a6a66; --line:#d9e2df;
  --accent:#0f5c50; --accent-soft:#e2eeea; --gold:#b8862b; --c1:#0f5c50; --c2:#c8902e; --c3:#5d6fae; --c4:#a9c0b9;
  --good:#1f8a5b; --warn:#c08a1e; --bad:#c2453b; --mark-bg:#0f5c50; --mark-fg:#e9c56b;
  --display:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1513; --surface:#151f1c; --ink:#e3ebe8; --muted:#94a49f; --line:#25332f;
  --accent:#4fbfa6; --accent-soft:#1a2f2a; --gold:#e0b04f; --c1:#4fbfa6; --c2:#e0b04f; --c3:#98a9e3; --c4:#3f5853;
  --good:#4cc28a; --warn:#e0b04f; --bad:#ec7a6f; --mark-bg:#1d4a42; --mark-fg:#e9c56b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1513; --surface:#151f1c; --ink:#e3ebe8; --muted:#94a49f; --line:#25332f;
  --accent:#4fbfa6; --accent-soft:#1a2f2a; --gold:#e0b04f; --c1:#4fbfa6; --c2:#e0b04f; --c3:#98a9e3; --c4:#3f5853;
  --good:#4cc28a; --warn:#e0b04f; --bad:#ec7a6f; --mark-bg:#1d4a42; --mark-fg:#e9c56b; color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
*{box-sizing:border-box}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:24px 40px;display:flex;flex-direction:column;gap:20px}
.bar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar-in{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:38px;height:38px;flex:none}
.word{display:flex;flex-direction:column;line-height:1}
.word b{font:400 21px/1 var(--display);letter-spacing:-.01em}
.word b em{font-style:normal;font-weight:700;color:var(--accent)}
.word small{font:500 9.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.barnav{display:flex;gap:18px;font-size:14px;font-weight:500}
.barnav a{text-decoration:none;color:var(--muted)}.barnav a:hover{color:var(--accent)}
.eyebrow{margin:0;font:600 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1{margin:0;font:400 clamp(32px,5vw,52px)/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;padding-block:28px 36px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:flex;flex-direction:column;gap:14px}
.hero p.lede{margin:0;font-size:17px;color:var(--muted);max-width:52ch}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font:600 14px var(--body);text-decoration:none;border:1px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer}
.btn.solid{background:var(--accent);color:var(--surface)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.quick{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.quick h3{margin:0;font:400 18px var(--display)}
.qrow{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}
.qrow b{font:600 15px var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.qrow.total b{color:var(--accent);font-size:20px}
.quick hr{border:0;border-top:1px dashed var(--line);margin:0}
.group{display:flex;flex-direction:column;gap:12px}
.group h2{margin:0;font:400 24px var(--display)}
.group > p{margin:-6px 0 0;color:var(--muted);font-size:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .k{font:500 11px var(--mono);letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.card b{font:600 16px var(--body)}
.card span{font-size:13.5px;color:var(--muted)}
.crumb{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.crumb a{color:var(--accent);text-decoration:none}
.hint{margin:0;font-size:12px;color:var(--muted)}
.note{border-left:4px solid var(--line)!important}
.note.good{border-left-color:var(--good)!important}.note.mid{border-left-color:var(--warn)!important}.note.bad{border-left-color:var(--bad)!important}
.actions{display:flex;justify-content:flex-end;gap:8px}
.btn.sm{padding:7px 14px;font-size:13px}
.related{display:flex;flex-direction:column;gap:10px}
.related h3{margin:0;font:400 20px var(--display)}
.site-foot{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;font-size:13px;color:var(--muted)}
.foot-in h4{margin:0 0 8px;font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.foot-in ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot-in a{text-decoration:none}.foot-in a:hover{color:var(--accent)}
.legal{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:0 28px;font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tab{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 14px/1 var(--body);padding:10px 14px;border-radius:999px;cursor:pointer}
.tab:hover{border-color:var(--accent)}
.tab[aria-current="page"],.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.calc{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.calc{grid-template-columns:minmax(0,1fr)}}
.inputs{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:18px;min-width:0}
.inputs h2{margin:0;font:400 26px/1.15 var(--display);text-wrap:balance}
.blurb{margin:-10px 0 0;color:var(--muted);font-size:14px}
form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.frow label{font-size:14px;font-weight:500}
.numbox{display:flex;align-items:center;gap:4px;background:var(--accent-soft);border-radius:8px;padding:5px 9px;font:500 14px var(--mono);color:var(--accent)}
.numbox input{width:92px;border:0;background:transparent;font:500 14px var(--mono);color:var(--accent);text-align:right;padding:0;-moz-appearance:textfield}
.numbox input::-webkit-outer-spin-button,.numbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=range]{width:100%;margin:0;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--line) var(--p,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.scale{display:flex;justify-content:space-between;font:400 11px var(--mono);color:var(--muted)}
select{font:500 14px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.formula{margin:0;padding-top:14px;border-top:1px dashed var(--line);font:400 12px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.results{display:flex;flex-direction:column;gap:16px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile .l{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tile .v{font:700 19px/1.2 var(--body);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .s{font:400 12px var(--mono);color:var(--muted)}
.tile.big{background:var(--accent-soft);border-color:transparent}
.tile.big .v{color:var(--accent);font-size:24px}
.note{margin:0;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.note.warn{border-color:var(--c2)}
.chartbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 8px;display:flex;flex-direction:column;gap:8px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legend i.ln{height:3px;border-radius:2px}
#chart svg{width:100%;height:auto;display:block}
#chart text{font:11px var(--mono);fill:var(--muted)}
.hit{fill:transparent}.hit:hover{fill:var(--ink);fill-opacity:.05}
details.table{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 16px}
summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:14px}
.tscroll{overflow-x:auto;padding-bottom:12px}
table{border-collapse:collapse;width:100%;font:400 13px var(--mono);font-variant-numeric:tabular-nums}
th,td{padding:7px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font:600 12px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
th:first-child,td:first-child{text-align:left}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

[hidden]{display:none!important}
.acct{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{opacity:.6;cursor:wait}
.modal{position:fixed;inset:0;z-index:20;background:rgba(10,20,18,.55);display:grid;place-items:center;padding:20px}
.mbox{position:relative;width:min(420px,100%);background:var(--surface);color:var(--ink);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.mbox h3{margin:0;font:400 23px/1.2 var(--display);padding-right:28px}
.mbox p{margin:0}
.mbox form{display:flex;flex-direction:column;gap:10px}
.mbox label{font-size:13px;font-weight:600}
.mbox input[type=email],.mbox input[type=text]{width:100%;font:16px var(--body);padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.mbox input#mCode{font:500 22px var(--mono);letter-spacing:.3em;text-align:center}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:400!important;color:var(--muted)}
.check input{margin-top:3px;accent-color:var(--accent)}
.mclose{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:18px;cursor:pointer}
.merr{color:var(--bad);font-size:14px;min-height:1px}
.mok{color:var(--good);font-size:14px}
.gate{position:fixed;inset:0;z-index:30;background:rgba(10,20,18,.72);display:grid;place-items:center;padding:20px}
.gbox{width:min(480px,100%);background:var(--surface);color:var(--ink);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.gbox h2{margin:0;font:400 24px/1.2 var(--display)}
.gbox p{margin:0;font-size:14.5px;color:var(--muted)}
.gbox ul{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.gbox .btn{align-self:flex-start}
.oauth{display:flex;flex-direction:column;gap:8px}
.obtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14.5px var(--body);cursor:pointer}
.obtn:hover{border-color:var(--accent)}
.obtn i{font-style:normal;font:700 12px var(--body);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff}
.or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:25;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;max-width:calc(100% - 32px)}
a.tab{text-decoration:none;display:inline-block}
.inputs h1{margin:0;font:400 26px/1.15 var(--display);letter-spacing:0;text-wrap:balance}
.article{max-width:760px;display:flex;flex-direction:column;gap:14px;padding-top:8px}
.article h2{margin:18px 0 0;font:400 24px/1.2 var(--display)}
.article p,.article li{font-size:15.5px;line-height:1.65;color:var(--ink)}
.article p{margin:0}.article ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.article .formula-box{font:400 14px/1.6 var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-wrap:anywhere}
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:2px 14px}
.faq summary{font-weight:600;font-size:15px;padding:10px 0}
.faq details p{padding-bottom:12px}
.seo-intro{max-width:760px;display:flex;flex-direction:column;gap:12px}
.seo-intro h2{margin:0;font:400 24px var(--display)}
.seo-intro p{margin:0;font-size:15.5px;line-height:1.65}
.legal a{color:inherit}
.tile .v{overflow-wrap:normal;white-space:nowrap}
.tile.big .v{font-size:clamp(19px,2vw,24px)}