:root { --ink:#182126; --muted:#5a686d; --line:#dce5e3; --paper:#fffdf9; --panel:#ffffff; --green:#176b54; --green-dark:#0d4f3d; --mint:#e6f4ed; --shadow:0 18px 48px rgba(20,45,38,.10); }
* { box-sizing:border-box; }
body { margin:0; background:#f3f7f4; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.site-shell { width:min(1120px,calc(100% - 32px)); margin:48px auto 72px; }
.tool-card,.content-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.tool-card { overflow:hidden; }
.tool-heading { padding:36px 40px 28px; background:linear-gradient(135deg,#f8fcf8,#e8f6ef); border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:.8rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
h1,h2 { line-height:1.15; }
h1 { margin:0; font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.045em; }
.lede { margin:12px 0 0; max-width:620px; color:var(--muted); font-size:1.05rem; }
.price-row { display:flex; align-items:center; gap:16px; padding:22px 40px; border-bottom:1px solid var(--line); }
.price-row label { flex:1; font-weight:700; }.price-row label span { color:var(--muted); font-weight:400; }
.price-input-wrap { display:flex; align-items:center; width:190px; border:1px solid #bbc8c4; border-radius:10px; overflow:hidden; background:#fff; }.price-input-wrap span { padding-left:12px; color:var(--muted); }.price-input-wrap input { width:100%; border:0; padding:11px 12px 11px 6px; outline:0; }
.table-wrap { padding:22px 40px 8px; overflow-x:auto; }.calculator-grid { min-width:800px; display:grid; grid-template-columns:1.3fr 1.3fr 1.3fr .85fr 1fr auto; gap:10px; align-items:center; }.grid-head { color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:0 2px 8px; }.calculator-row { padding:12px 0; border-top:1px solid #e8eeec; }.calculator-row label { display:block; }.mobile-label { display:none; }.measure { display:flex; border:1px solid #bbc8c4; border-radius:10px; overflow:hidden; background:#fff; }.calculator-row input { min-width:0; width:100%; padding:11px 10px; border:1px solid #bbc8c4; border-radius:10px; outline:none; }.measure input { border:0; border-radius:0; }.measure select { border:0; border-left:1px solid #d8e1de; background:#f4f8f6; padding:0 8px; color:#263a33; }.calculator-row input:focus,.measure:focus-within,.price-input-wrap:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,84,.14); }.row-bf { font-variant-numeric:tabular-nums; color:var(--green-dark); font-weight:800; white-space:nowrap; }.remove-row,.text-button { border:0; background:transparent; color:#6a3a32; padding:8px; font-size:.86rem; text-decoration:underline; }.tool-actions { display:flex; justify-content:space-between; align-items:center; padding:18px 40px 28px; }.button { border:0; border-radius:10px; padding:12px 16px; font-weight:800; }.button.primary { color:#fff; background:var(--green); }.button.primary:hover { background:var(--green-dark); }.button.secondary { border:1px solid #a9c9bb; color:var(--green-dark); background:#f6fbf8; }.results { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:stretch; padding:24px 40px; background:#132a23; }.result-card { display:grid; gap:2px; padding:13px 16px; border-radius:12px; background:rgba(255,255,255,.1); color:#e3f3eb; }.result-card span,.result-card small { font-size:.78rem; }.result-card strong { font-size:1.55rem; font-variant-numeric:tabular-nums; color:#fff; }.results .primary { align-self:center; background:#d4f0df; color:#0c4d3a; }.copy-status { grid-column:1 / -1; min-height:1.2em; margin:0; color:#d4f0df; font-size:.88rem; }.content-card { margin-top:28px; padding:36px 40px; box-shadow:none; }.content-card h2 { margin:0 0 14px; font-size:1.45rem; }.content-card h2:not(:first-child) { margin-top:36px; }.content-card p { color:#46565a; max-width:780px; }.content-card details { border-top:1px solid var(--line); padding:14px 0; }.content-card details:last-child { border-bottom:1px solid var(--line); }.content-card summary { cursor:pointer; font-weight:750; }.content-card details p { margin:9px 0 0; }
@media (max-width:720px) { .site-shell { width:min(100% - 20px,600px); margin:10px auto 38px; }.tool-card,.content-card { border-radius:14px; }.tool-heading,.content-card { padding:26px 20px; }.price-row { display:block; padding:18px 20px; }.price-input-wrap { width:100%; margin-top:8px; }.table-wrap { padding:8px 20px 0; overflow:visible; }.calculator-grid { min-width:0; }.grid-head { display:none; }.calculator-row { grid-template-columns:1fr 1fr; gap:12px; padding:18px 0; }.calculator-row label:nth-child(3),.calculator-row label:nth-child(4) { grid-column:span 1; }.mobile-label { display:block; margin:0 0 5px; color:var(--muted); font-size:.77rem; font-weight:750; }.row-bf { grid-column:1; align-self:end; }.remove-row { grid-column:2; justify-self:end; align-self:end; }.tool-actions { padding:16px 20px 22px; }.results { grid-template-columns:1fr 1fr; padding:20px; }.results .primary { grid-column:1 / -1; width:100%; }.result-card strong { font-size:1.25rem; } }
@media (max-width:390px) { .calculator-row { grid-template-columns:1fr; }.calculator-row label:nth-child(3),.calculator-row label:nth-child(4),.row-bf,.remove-row { grid-column:1; }.remove-row { justify-self:start; padding-left:0; }.results { grid-template-columns:1fr; }.tool-actions { gap:8px; align-items:flex-start; flex-direction:column; } }
.site-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; padding:24px 12px 4px; color:var(--muted); font-size:.9rem; }.site-footer a,.inline-link { color:var(--green-dark); font-weight:700; }.page-card { max-width:780px; margin:0 auto; }.page-card h1 { font-size:clamp(2rem,5vw,3rem); }.page-card h2 { margin-top:32px; }