/* Toolser — site-specific styles. Numbers are the product: tabular figures, the receipt, the calculator first. */

body{font-weight:400}
h1,h2,h3{font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(2.1rem,1.5rem + 3vw,3.6rem);line-height:1.04}
h2{font-size:clamp(1.45rem,1.25rem + 1vw,2rem)}
h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.brand img{height:24px;width:auto}
.nav a{font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brand)}
.lede{color:var(--ink-2);font-size:var(--fs-lg);max-width:54ch;line-height:1.5}
.num,output,.receipt,.attr dd,.calc input{font-variant-numeric:tabular-nums lining-nums}

/* ---- Homepage intro + the receipt (the memorable thing) ---------------- */
.intro{padding-block:clamp(2rem,6vw,4.5rem) var(--s-6)}
.intro h1{max-width:17ch;margin-bottom:var(--s-4)}
.receipt{list-style:none;margin:var(--s-6) 0 0;padding:0;max-width:52rem;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.receipt li{border-bottom:1px dashed #c9cbd1}
.receipt li:last-child{border-bottom:0}
.receipt a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.6rem;padding:1.05rem 0;color:var(--ink);text-decoration:none}
.receipt .what{font-size:clamp(1.1rem,1rem + .6vw,1.45rem);font-weight:700;letter-spacing:-.01em}
.receipt .dots{border-bottom:2px dotted #b7bac2;transform:translateY(-.3em);min-width:1.5rem}
.receipt .answer{font-size:clamp(1.35rem,1.1rem + 1.3vw,2.2rem);font-weight:800;color:var(--brand);letter-spacing:-.02em;white-space:nowrap}
.receipt .answer small{font-size:.55em;font-weight:600;color:var(--ink-2);letter-spacing:0}
.receipt .how{grid-column:1 / -1;font-size:var(--fs-sm);color:var(--ink-2);margin:0}
.receipt a:hover .what{color:var(--brand);text-decoration:underline;text-underline-offset:.15em}
.receipt-foot{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s-3)}

/* ---- Calculator (shared by home + the three tools) ---------------------- */
.calc{background:var(--paper);border-radius:var(--radius);padding:clamp(1.1rem,3vw,2rem);display:grid;gap:var(--s-5)}
@media(min-width:900px){.calc{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--s-7)}.calc .calc-title,.calc .calc-intro,.calc .calc-disclaimer{grid-column:1 / -1}}
.calc-title{font-size:var(--fs-lg);margin:0}
.calc-intro{margin:-.5rem 0 0;color:var(--ink-2);font-size:var(--fs-sm)}
.calc-fields{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));align-content:start}
.calc-field{display:grid;gap:.3rem}
.calc-label{font-weight:700;font-size:var(--fs-sm)}
.calc-unit{font-weight:500;color:var(--ink-2)}
.calc input,.calc select{font:inherit;font-size:1.2rem;font-weight:600;padding:.6rem .75rem;min-height:48px;border:2px solid #cfd1d6;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.calc-help{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.4}
.calc-preset{grid-column:1 / -1}
.calc-results{display:grid;gap:var(--s-3);align-content:start}
.calc-result{display:grid;gap:.15rem;padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.calc-result:last-child{border-bottom:0}
.calc-out-label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.calc-result output{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.calc-primary output{font-size:clamp(2.6rem,2rem + 3vw,3.8rem);color:var(--brand)}
.calc-note{font-size:var(--fs-xs);color:var(--ink-2)}
.calc-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem}
.calc-to{font-size:1rem;font-weight:700;color:var(--ink-2);letter-spacing:0}
@media(max-width:600px){.calc .calc-intro{display:none}.calc{gap:var(--s-4)}.calc-fields{gap:var(--s-3)}}
.calc-disclaimer{font-size:var(--fs-xs);color:var(--ink-2);margin:0}

/* ---- Tool pages ------------------------------------------------------- */
.tool{padding-block:clamp(1rem,3vw,2rem) var(--section)}
.crumbs{font-size:var(--fs-sm);color:var(--ink-2)}
.crumbs a{color:var(--ink-2);display:inline-block;padding-block:.65rem}
.tool-head h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);margin:var(--s-1) 0 var(--s-4);max-width:22ch}
.tool-intro{margin-top:var(--s-7)}

/* ---- Long-form text --------------------------------------------------- */
.prose{font-size:1.06rem;line-height:1.7;max-width:44rem}
.prose p,.prose li{max-width:65ch}
.prose h2{margin-top:var(--s-7)}
.prose ul{padding-left:1.15em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--brand)}
.prose .checklist{list-style:none;padding:0}
.prose .checklist li{padding-left:1.6em;position:relative}
.prose .checklist li::before{content:"";position:absolute;left:.1em;top:.62em;width:.7em;height:.38em;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.takeaways{border-left:3px solid var(--brand);padding:var(--s-2) 0 var(--s-2) var(--s-5);margin:var(--s-6) 0}
.prose .takeaways-title{font-size:var(--fs-lg);margin:0 0 var(--s-3)}
.takeaways ul{margin:0}
.calc-examples{display:grid;gap:var(--s-5)}
.calc-example{border-top:2px solid var(--ink);padding-top:var(--s-3)}
.calc-example h3{margin:0 0 var(--s-3)}
.attr-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:var(--s-2) var(--s-4);margin:0 0 var(--s-3)}
.attr dt{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.attr dd{margin:0;font-weight:700}
.attr-out dd{color:var(--brand)}
.faq-block{margin-top:var(--s-7)}
.faq details{font-size:var(--fs-md)}
.faq details>div p{max-width:62ch}
.more-tools{margin-top:var(--section);max-width:52rem}
.more-tools h2{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.home-calc{padding-block:var(--s-7) var(--section);border-top:1px solid var(--line)}
.home-calc>h2{margin-bottom:var(--s-2)}
.home-calc>.lede{margin-bottom:var(--s-5)}
.home-calc .prose{margin-top:var(--s-7)}

/* ---- Simple pages ------------------------------------------------------- */
.page{padding-block:clamp(2rem,5vw,4rem) var(--section)}
.page .prose h1{margin-bottom:var(--s-5)}
.page .form{font-size:var(--fs-md);max-width:36rem;margin-top:var(--s-6)}
.form button{min-height:48px}

/* ---- Footer: deep rose ------------------------------------------------- */
.site-footer{background:var(--deep);color:#f5d0da}
.site-footer .wordmark{font-weight:800;font-size:var(--fs-xl);color:#fff;text-decoration:none;letter-spacing:.04em}
.site-footer h2{color:#fff;font-size:var(--fs-sm);font-weight:800;letter-spacing:0;margin-bottom:var(--s-3)}
.footer-grid{grid-template-columns:1fr}
@media(min-width:900px){.footer-grid{grid-template-columns:1.2fr 1.6fr 1fr}}
.footer-grid p{max-width:34ch;margin-top:var(--s-3)}
.site-footer ul a{display:inline-block;padding-block:.3rem;line-height:1.35}
.footer-bottom{color:#f0b9c8}