/* Estimate The Job — one stylesheet, no framework, no webfont.
 *
 * A framework and a Google font would cost two extra round trips before the
 * page can paint, on a site whose visitors are frequently standing in a lumber
 * aisle on cellular data. System fonts render instantly and look native.
 * Core Web Vitals are a ranking signal; this is the cheapest way to win them.
 */
:root{
  --ink:#12181f; --muted:#5b6774; --line:#e4e8ed; --bg:#ffffff; --soft:#f6f8fa;
  --brand:#c2410c; --brand-dark:#9a3412; --ok:#15803d;
  --radius:10px; --wrap:960px;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#e8edf2; --muted:#9aa7b4; --line:#232c36; --bg:#0e1319; --soft:#151c24;
         --brand:#fb923c; --brand-dark:#f97316; --ok:#4ade80; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
a{color:var(--brand-dark)}
@media (prefers-color-scheme:dark){a{color:var(--brand)}}

header.site{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--ink);font-size:19px;white-space:nowrap}
.logo svg{flex:0 0 auto;border-radius:6px}
.logo em{font-style:normal;color:var(--brand)}
header.site nav{margin-left:auto;display:flex;gap:16px;font-size:15px}
header.site nav a{text-decoration:none;color:var(--muted)}
header.site nav a:hover{color:var(--ink)}

.crumb{font-size:14px;color:var(--muted);padding:14px 0 0}
.crumb a{color:var(--muted)}
h1{font-size:clamp(28px,4.6vw,40px);line-height:1.15;letter-spacing:-.03em;margin:10px 0 8px}
h2{font-size:clamp(21px,3vw,27px);letter-spacing:-.02em;margin:34px 0 10px}
h3{font-size:18px;margin:22px 0 8px}
.lead{font-size:18px;color:var(--muted);margin:0 0 18px;max-width:62ch}

/* ---- calculator ---- */
.calc{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:20px 0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select{width:100%;padding:11px 12px;font-size:17px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);font-family:inherit}
.field input:focus,.field select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
#result{margin-top:18px;padding-top:16px;border-top:2px solid var(--line)}
#result .hint{color:var(--muted);margin:0}
#result .headline{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--brand-dark)}
@media (prefers-color-scheme:dark){#result .headline{color:var(--brand)}}
#result .subline{color:var(--muted);margin-top:2px}
table.breakdown{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
table.breakdown th{text-align:left;font-weight:500;color:var(--muted);padding:7px 0;
  border-bottom:1px solid var(--line)}
table.breakdown td{text-align:right;padding:7px 0;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;font-weight:600}
table.breakdown tr:last-child th,table.breakdown tr:last-child td{border-bottom:none}

/* ---- prose ---- */
.copy{max-width:70ch}
.copy p{margin:0 0 14px}
.copy ol,.copy ul{padding-left:1.2rem}
.copy li{margin-bottom:7px}
.formula{background:var(--soft);border-left:3px solid var(--brand);padding:12px 14px;
  margin:14px 0;overflow-x:auto;font-size:16px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
table.examples{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
table.examples th{text-align:left;padding:9px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
table.examples td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
dl.faq dt,dl.terms dt{font-weight:700;margin-top:14px}
dl.faq dd,dl.terms dd{margin:4px 0 0;color:var(--muted)}
ul.mistakes li{margin-bottom:10px}

/* ---- index grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:22px 0}
.card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 16px;background:var(--bg);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--brand);transform:translateY(-2px)}
.card b{display:block;font-size:17px;margin-bottom:3px}
.card small{color:var(--muted);font-size:14px;line-height:1.45;display:block}

/* Empty until an AdSense unit is pasted in. :empty matches only an element with
   no children AND no text nodes, so this must be emitted without whitespace
   inside it -- a single newline is a text node and the slot would reserve
   space forever. */
.ad-slot{margin:24px 0;min-height:0}
.ad-slot:empty{display:none}

footer.site{border-top:1px solid var(--line);margin-top:44px;padding:22px 0 34px;
  color:var(--muted);font-size:14px}
footer.site a{color:var(--muted)}
.related{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.related li a{display:inline-block;border:1px solid var(--line);border-radius:20px;
  padding:5px 13px;text-decoration:none;font-size:14px}
.related li a:hover{border-color:var(--brand)}
@media (max-width:600px){
  body{font-size:16px}
  header.site nav{gap:12px;font-size:14px}
}

/* ---- Add to Home Screen ----------------------------------------------------
   The button is visible on EVERY browser, not only where an install API
   exists, and only hides once the site is already installed. Revealing it
   solely on Chromium means desktop Safari and Firefox users never learn the
   option is there. What it DOES varies by browser; install.js handles that. */
.installbtn{background:var(--brand);color:#fff;border:0;border-radius:7px;
  padding:7px 13px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  white-space:nowrap}
.installbtn:hover{background:var(--brand-dark)}
.iosmodal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;
  align-items:center;justify-content:center;padding:20px}
.iosmodal.open{display:flex}
.iosbox{background:var(--bg);color:var(--ink);border-radius:14px;padding:24px;
  max-width:420px;width:100%;position:relative;border:1px solid var(--line)}
.iosbox h2{margin:0 0 8px;font-size:20px}
.iosbox .calc-desc{color:var(--muted);margin:0 0 14px}
.iosbox ol{padding-left:1.2rem;margin:0 0 18px}
.iosbox li{margin-bottom:9px;line-height:1.55}
.iosclose{position:absolute;top:10px;right:12px;background:transparent;border:0;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.iosdone{width:100%;background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:11px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit}
@media (max-width:600px){
  .installbtn{padding:6px 10px;font-size:13px}
}