@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#1f2a2e;
  --muted:#56656a;
  --paper:#ffffff;
  --panel:#f1f5f3;
  --line:#d4ddd9;
  --green:#2f6b5e;
  --green-ink:#24564b;
  --amber:#f2c35b;
  --amber-soft:#fbf0d4;
  --focus:#1d5fd1;
  --radius:8px;
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ink:#e7eeeb;
    --muted:#a5b3b0;
    --paper:#141a1c;
    --panel:#1c2427;
    --line:#2f3b3f;
    --green:#7fc3b1;
    --green-ink:#a3d9ca;
    --amber:#e2b34c;
    --amber-soft:#3a3220;
    --focus:#8db4ff;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{--ink:#e7eeeb;
    --muted:#a5b3b0;
    --paper:#141a1c;
    --panel:#1c2427;
    --line:#2f3b3f;
    --green:#7fc3b1;
    --green-ink:#a3d9ca;
    --amber:#e2b34c;
    --amber-soft:#3a3220;
    --focus:#8db4ff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:var(--green-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.prose{max-width:var(--measure)}

/* header */
.site-head{border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.brand svg{width:28px;height:28px;color:var(--green)}
.site-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.95rem}
.site-nav a{color:var(--ink);text-decoration:none}
.site-nav a:hover{color:var(--green-ink);text-decoration:underline}

/* type */
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:700;max-width:22ch}
h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin-top:2.4rem;margin-bottom:.6rem}
h3{font-size:1.15rem;margin-top:1.6rem;margin-bottom:.4rem}
p{margin:.7rem 0}
main > .wrap > h1:first-child{margin-top:44px}
.crumbs{font-size:.9rem;color:var(--muted);margin:24px 0 12px}
.crumbs a{color:var(--muted)}
.lede{font-size:1.2rem;max-width:var(--measure);margin:16px 0 8px}
.lede strong{background:var(--amber-soft);padding:0 .2em;border-radius:3px}
.meta{font-size:.9rem;color:var(--muted);margin:4px 0 28px}

/* calculator panel */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin:8px 0 12px}
.calc-head{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.field > span{font-weight:700}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.seg button{font:inherit;border:0;background:transparent;color:var(--ink);padding:8px 14px;cursor:pointer;min-height:42px}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--green);color:var(--paper);font-weight:700}
.switch{display:flex;align-items:center;gap:10px;font-size:.95rem;cursor:pointer;min-height:42px}
.switch input{width:20px;height:20px;accent-color:var(--green)}
select,input[type=number]{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;min-height:42px}
input[type=number]{width:6.5em}

/* the invoice: the one memorable element */
.invoice{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.invoice-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-bottom:2px solid var(--ink)}
.invoice-title strong{font-size:1.05rem}
.invoice-title span{font-size:.85rem;color:var(--muted)}
.inv-row{display:grid;grid-template-columns:28px 64px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.inv-row.off{color:var(--muted)}
.inv-row.off .amt{text-decoration:line-through;opacity:.6}
.inv-row input[type=checkbox],.inv-row input[type=radio]{width:20px;height:20px;accent-color:var(--green);margin:0}
.inv-row .nr{font-size:.85rem;color:var(--muted)}
.inv-row .lbl small{display:block;color:var(--muted);font-size:.85rem}
.inv-row .qty{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:4px;font-size:.85rem;color:var(--muted)}
.inv-row .qty input{width:4.5em;min-height:34px;padding:4px 6px}
.inv-row .amt{text-align:right;white-space:nowrap}
.inv-row.material .amt input{width:6em;text-align:right}
.inv-sum{padding:12px 16px;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.inv-sum div{display:flex;justify-content:space-between;gap:12px}
.inv-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;background:var(--amber);color:#1f2a2e;font-weight:700;font-size:1.3rem;font-variant-numeric:tabular-nums}
.inv-note{font-size:.85rem;color:var(--muted);margin:10px 2px 0}

/* simple result tools (age, budget) */
.result{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px}
.result .big{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.result .big small{font-size:1rem;font-weight:400;color:var(--muted)}
.grid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.budget-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.budget-row label{flex:1}
.budget-row input{width:7em;text-align:right}

/* tables in content */
table.data{border-collapse:collapse;width:100%;margin:12px 0;font-size:.95rem}
table.data th,table.data td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{border-bottom:2px solid var(--ink)}
table.data td.num,table.data th.num{text-align:right;white-space:nowrap}
.table-scroll{overflow-x:auto}

/* callout box for insurance */
.hint{border-left:4px solid var(--green);background:var(--panel);padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;margin:24px 0;max-width:var(--measure)}
.hint p{margin:.3rem 0}
.btn{display:inline-block;background:var(--green);color:var(--paper);text-decoration:none;font-weight:700;padding:10px 16px;border-radius:var(--radius);margin-top:6px}
.btn:hover{background:var(--green-ink);color:var(--paper)}
.ad-label{font-size:.8rem;color:var(--muted)}

/* faq */
details{border-bottom:1px solid var(--line);padding:10px 0;max-width:var(--measure)}
summary{cursor:pointer;font-weight:700;padding:4px 0}
details p{margin:.5rem 0}

/* home */
.home-hero{padding:40px 0 8px}
.home-hero p{font-size:1.2rem;max-width:56ch}
.topic-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 40px;margin-top:8px}
.topic-cols h2{font-size:1.2rem;margin-top:1.6rem;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.topic-list{list-style:none;margin:0;padding:0}
.topic-list li{border-bottom:1px solid var(--line)}
.topic-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;text-decoration:none;color:var(--ink)}
.topic-list a:hover .t{text-decoration:underline;color:var(--green-ink)}
.topic-list .r{color:var(--muted);font-size:.9rem;white-space:nowrap}

.related{margin-top:2.4rem}
.related ul{padding-left:1.1rem}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:56px;padding:24px 0 40px;font-size:.9rem;color:var(--muted)}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.site-foot a{color:var(--muted)}

@media (max-width:560px){
  .calc{padding:14px}
  .inv-row{grid-template-columns:24px 1fr auto;padding:10px 12px}
  .inv-row .nr{display:none}
  .invoice-title,.inv-sum,.inv-total{padding-left:12px;padding-right:12px}
  .inv-total{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}