/* Shared styles for the free tools / calculators family (/tools and each tool page).
   Self-contained, namespaced under .tool- so it never collides with site CSS. */
.tool { max-width: 920px; margin: 0 auto; padding: 1rem 1rem 3rem; font-family: 'Outfit','Roboto',sans-serif; color: #1e293b; }
.tool-bc { font-size: .82rem; color: #64748b; margin: .6rem 0 1.2rem; }
.tool-bc a { color: #0369a1; text-decoration: none; }
.tool h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: #0f172a; margin: 0 0 .6rem; line-height: 1.25; }
.tool-lead { font-size: 1.02rem; line-height: 1.7; color: #334155; margin: 0 0 1.4rem; }
.tool h2 { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin: 2.2rem 0 .7rem; }
.tool h3 { font-size: 1.05rem; font-weight: 600; color: #0f172a; margin: 1.2rem 0 .4rem; }
.tool p { font-size: 1rem; line-height: 1.7; margin: .6rem 0; }
.tool-grid2 { display: grid; grid-template-columns: 1.05fr 1.3fr; gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .tool-grid2 { grid-template-columns: 1fr; } }
.tool-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.25rem 1.35rem; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.tool-card h2 { margin-top: 0; font-size: 1.15rem; }
.tool-field { margin-bottom: .8rem; }
.tool-field label { display: block; font-size: .82rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
.tool-field input, .tool-field select { width: 100%; padding: 9px 11px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: .95rem; color: #0f172a; box-sizing: border-box; background: #fff; }
.tool-field input:focus, .tool-field select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.tool-two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tool-btn { width: 100%; padding: 11px 16px; background: #2563eb; color: #fff; border: none; border-radius: 9px; font-size: 1rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tool-btn:hover { background: #1d4ed8; }
.tool-hint { font-size: .78rem; color: #94a3b8; margin-top: 6px; }
/* Result panel */
.tool-result { border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff; }
.tool-res-head { padding: 14px 18px; background: #eff6ff; border-bottom: 1px solid #dbeafe; }
.tool-res-head .lbl { font-size: .74rem; letter-spacing: .05em; color: #1e40af; text-transform: uppercase; }
.tool-res-head .big { font-size: 1.9rem; font-weight: 700; color: #2563eb; margin-top: 2px; }
.tool-res-head .sub { font-size: .78rem; color: #1e40af; margin-top: 2px; }
.tool-res-body { padding: 6px 18px 16px; }
.tool-res table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tool-res th { text-align: left; font-weight: 600; color: #64748b; padding: 8px; border-bottom: 1px solid #cbd5e1; font-size: .82rem; }
.tool-res td { padding: 8px; border-bottom: 1px solid #eef2f7; }
.tool-res td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tool-seclbl { font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.tool-rates { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .6rem 0; }
.tool-rates th { background: #f8fafc; text-align: left; font-weight: 600; color: #334155; padding: 9px 10px; border: 1px solid #e2e8f0; }
.tool-rates td { padding: 9px 10px; border: 1px solid #e2e8f0; }
.tool-rates td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tool-faq { background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; margin: 10px 0; }
.tool-faq summary { font-weight: 600; cursor: pointer; font-size: .98rem; color: #0f172a; }
.tool-faq p { margin: 8px 0 2px; font-size: .94rem; color: #475569; }
.tool-steps { counter-reset: step; padding: 0; list-style: none; margin: .6rem 0; }
.tool-steps li { position: relative; padding-left: 38px; margin-bottom: .7rem; line-height: 1.6; }
.tool-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: #2563eb; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; }
.tool-disc { font-size: .76rem; color: #94a3b8; line-height: 1.55; margin-top: 14px; }
/* Hub grid */
.tool-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.tool-tile { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.tool-tile:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.1); }
.tool-tile .ic { width: 38px; height: 38px; border-radius: 9px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 10px; }
.tool-tile h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 600; color: #0f172a; }
.tool-tile p { margin: 0; font-size: .86rem; color: #64748b; line-height: 1.5; }
.tool-related { display: flex; flex-wrap: wrap; gap: 8px; margin: .6rem 0 0; }
.tool-related a { font-size: .86rem; color: #2563eb; text-decoration: none; border: 1px solid #dbeafe; background: #eff6ff; border-radius: 999px; padding: 5px 12px; }
.tool-related a:hover { background: #dbeafe; }

/* ---- Deep calculator UI: sliders, metrics, charts, schedules, scenarios ---- */
.tool-srow { display: flex; align-items: center; gap: 10px; }
.tool-srow input[type=range] { flex: 1; accent-color: #2563eb; height: 4px; }
.tool-srow .tool-sval { width: 130px; flex: 0 0 auto; }
.tool-srow .tool-sval input { text-align: right; }
.tool-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: .2rem 0; }
.tool-metric { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 11px 12px; }
.tool-metric .lbl { font-size: .74rem; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.tool-metric .val { font-size: 1.18rem; font-weight: 700; color: #0f172a; margin-top: 2px; }
.tool-metric.accent { background: #eff6ff; border-color: #dbeafe; }
.tool-metric.accent .val { color: #2563eb; }
.tool-metric.good .val { color: #15803d; }
.tool-metric.warn .val { color: #b45309; }
.tool-insight { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; font-size: .92rem; color: #0c4a6e; line-height: 1.6; }
.tool-insight strong { color: #075985; }
.tool-insight i { color: #0284c7; margin-right: 6px; }
.tool-chartwrap { position: relative; height: 250px; margin: 16px 0 8px; }
.tool-chartwrap.sm { height: 200px; }
.tool-chart-cap { font-size: .78rem; color: #94a3b8; text-align: center; margin-top: 2px; }
.tool-scroll { max-height: 320px; overflow: auto; border: 1px solid #eef2f7; border-radius: 10px; }
.tool-scroll table { font-size: .86rem; }
.tool-scroll thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }
.tool-toggle { display: inline-flex; flex-wrap: wrap; background: #f1f5f9; border-radius: 9px; padding: 3px; gap: 3px; margin: .2rem 0 1rem; }
.tool-toggle button { border: none; background: transparent; padding: 7px 14px; font-size: .86rem; font-weight: 600; color: #475569; border-radius: 6px; cursor: pointer; }
.tool-toggle button.active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.1); }
.tool-card--wide { margin-top: 1.5rem; }
.tool-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: #475569; margin: 4px 0 0; }
.tool-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tool-legend i.dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }