.tool-shell { max-width: 1120px; margin: 0 auto; padding: 28px 24px 80px; }
.tool-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--text-secondary); margin-bottom:32px; }
.tool-breadcrumb a { text-underline-offset:3px; }
.tool-intro { max-width:840px; margin-bottom:32px; }
.tool-intro .eyebrow { margin-bottom:16px; }
.tool-intro h1 { font-size:clamp(32px,4.4vw,50px); line-height:1.1; letter-spacing:-.045em; margin:0 0 18px; }
.tool-intro p { font-size:17px; line-height:1.65; max-width:730px; color:var(--text-secondary); margin:0; }
.tool-benefits { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px; font-size:13px; font-weight:600; }
.tool-benefits span::before { content:'✓'; color:var(--brand-primary); margin-right:6px; }
.calculator-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:24px; align-items:start; }
.tool-form { padding:28px; border:1px solid var(--border-strong); background:var(--surface); border-radius:24px; }
.form-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.form-top h2 { margin:0; font-size:21px; letter-spacing:-.025em; }
.text-button { border:0; background:none; padding:10px 0; cursor:pointer; color:var(--brand-primary-ink); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { min-width:0; }
.field label, .tool-form legend { display:block; font-size:14px; font-weight:650; margin-bottom:7px; }
.field-hint { display:block; margin-top:6px; font-size:12px; color:var(--text-secondary); line-height:1.5; }
.input-wrap { display:flex; align-items:center; border:1.5px solid var(--border-strong); border-radius:12px; background:var(--bg); padding:0 13px; gap:8px; }
.input-wrap:focus-within { outline:3px solid var(--brand-primary-muted); border-color:var(--brand-primary); }
.input-wrap span { color:var(--text-secondary); font-size:14px; }
.input-wrap input { border:0; outline:0; background:none; min-width:0; width:100%; color:var(--text-primary); font:600 19px var(--font-sans); padding:13px 0; }
.input-wrap:has([aria-invalid=true]) { border-color:var(--danger); }
.field-error { display:block; color:var(--danger-ink); font-size:12px; margin-top:5px; }
.field-error:empty { display:none; }
.tool-form fieldset { min-width:0; border:0; padding:24px 0 0; margin:24px 0 18px; border-top:1px solid var(--border); }
.tool-form > .calculator-fields { padding:0; margin:0; border:0; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mode-switch label { position:relative; display:flex; align-items:center; gap:8px; padding:13px 10px; border:1.5px solid var(--border-strong); border-radius:12px; cursor:pointer; font-size:14px; margin:0; }
.mode-switch label:has(input:checked) { color:var(--brand-primary-ink); border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.mode-switch input { accent-color:var(--brand-primary); margin:0; width:17px; height:17px; }
.tool-form select { width:100%; border:1.5px solid var(--border-strong); border-radius:12px; background:var(--bg); color:var(--text-primary); font:500 14px var(--font-sans); min-height:51px; padding:10px; }
.mode-help { color:var(--text-secondary); font-size:13px; line-height:1.6; margin:10px 0 0; }
.form-actions { display:flex; gap:20px; align-items:center; margin-top:24px; }
.form-actions .btn { flex:1; padding:14px 16px; }
.tool-result { position:sticky; top:88px; border-radius:24px; overflow:hidden; border:1px solid var(--border-strong); background:var(--surface); }
.result-main { padding:30px; background:#064e3b; color:#ecfdf5; }
.result-main h2 { font-size:14px; font-weight:500; margin:0 0 12px; color:#d1fae5; }
#result-heading { scroll-margin-top:90px; }
.result-price { font-size:clamp(35px,4vw,48px); line-height:1.12; font-weight:750; letter-spacing:-.045em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.price-unit { display:block; margin-top:8px; color:#a7f3d0; font-size:13px; }
.result-example { font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border:1px solid #6ee7b766; border-radius:6px; display:inline-block; margin-bottom:16px; color:#d1fae5; }
.result-metrics { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #ffffff26; margin-top:22px; padding-top:18px; gap:12px; }
.result-metrics span { display:block; font-size:12px; color:#d1fae5; }
.result-metrics strong { font-size:23px; font-weight:650; font-variant-numeric:tabular-nums; }
.result-details { padding:24px 28px; }
.result-details dl { margin:0; font-size:14px; }
.result-details dl div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border-subtle); }
.result-details dt { color:var(--text-secondary); }
.result-details dd { margin:0; font-weight:650; text-align:right; }
.result-note { font-size:12px; color:var(--text-secondary); line-height:1.65; margin:16px 0 0; }
.result-copy { width:100%; border:1px solid var(--border-strong); border-radius:10px; padding:12px; font-size:13px; font-weight:650; background:var(--bg); color:var(--text-primary); cursor:pointer; margin-top:18px; }
.result-copy:disabled { opacity:.45; cursor:default; }
.result-formula { margin:18px 0 0; padding:12px; background:var(--surface-alt); border-radius:10px; font-size:12px; color:var(--text-secondary); }
.result-formula strong { display:block; color:var(--text-primary); font-size:14px; margin-top:4px; }
.empty-result { padding:36px 28px; }
.empty-result h2 { font-size:24px; margin:0 0 12px; }
.empty-result p { color:var(--text-secondary); }
.tool-cta { margin-top:20px; padding:20px 24px; background:var(--brand-primary-soft); border:1px solid var(--border); border-radius:18px; }
.tool-cta p { margin:0 0 10px; font-size:14px; }
.tool-cta a { font-size:14px; font-weight:700; color:var(--brand-primary-ink); text-underline-offset:4px; }
.tool-explanation { max-width:800px; margin:64px auto 0; }
.tool-explanation h2 { font-size:26px; letter-spacing:-.03em; line-height:1.2; margin:36px 0 16px; }
.tool-explanation p, .tool-explanation li { color:var(--text-secondary); line-height:1.8; font-size:15px; }
.tool-explanation ol { padding-left:22px; }
.formula-box { padding:20px 24px; background:var(--surface); border:1px solid var(--border-strong); border-left:3px solid var(--brand-primary); border-radius:0 14px 14px 0; }
.formula-box p { margin:4px 0; font-size:14px; }
.tool-explanation details { border-bottom:1px solid var(--border-strong); padding:18px 0; }
.tool-explanation summary { font-weight:650; cursor:pointer; line-height:1.55; }
.tool-explanation details p { margin-bottom:0; }
.related-tool-links { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:24px; font-size:14px; font-weight:600; }
.tools-card { display:block; max-width:700px; background:var(--surface); padding:32px; border:1px solid var(--border-strong); border-radius:24px; text-decoration:none; }
.tools-card h2 { font-size:26px; margin:8px 0 14px; letter-spacing:-.025em; }
.tools-card p { color:var(--text-secondary); font-size:16px; line-height:1.7; }
.tools-card .card-link { color:var(--brand-primary-ink); font-weight:700; }
.tool-shell [hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.copy-fallback { width:100%; min-height:160px; margin-top:14px; background:var(--surface); color:var(--text-primary); }
.skip-link { position:absolute; left:12px; top:-80px; z-index:100; padding:12px; background:var(--surface); color:var(--text-primary); }
.skip-link:focus { top:12px; }
.tool-shell :focus-visible { outline:3px solid var(--brand-primary); outline-offset:3px; }
@media (prefers-color-scheme:dark) { .tool-shell { --brand-primary-ink:#6ee7b7; --danger-ink:#fda4af; } }
@media (max-width:780px) { .calculator-layout { grid-template-columns:1fr; } .tool-result { position:static; } .tool-intro h1 { font-size:36px; } }
@media (max-width:420px) { .tool-shell { padding:22px 16px 56px; } .tool-form { padding:20px 16px; } .field-grid { gap:16px 12px; } .tool-intro h1 { font-size:32px; } .result-main { padding:26px 22px; } .result-details { padding:20px 22px; } .mode-switch label { padding:12px 8px; font-size:13px; } .form-actions { gap:16px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }