/* ============================================================
MONEY TRAIL GUIDE — How Long Will My Money Last Calculator
Light theme for Blogger embed
============================================================ */
#mtg-calc-root *,
#mtg-calc-root *::before,
#mtg-calc-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
#mtg-calc-root {
font-family: ‘Open Sans’, sans-serif;
background: #ffffff;
color: #0d1f19;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 0 60px;
}
/* ── Hero ── */
#mtg-calc-root .mtg-hero {
text-align: center;
padding: 52px 24px 36px;
}
#mtg-calc-root .mtg-badge {
display: inline-block;
background: rgba(1,48,36,0.07);
border: 1px solid rgba(1,48,36,0.2);
color: #013024;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 20px;
}
#mtg-calc-root .mtg-hero h2 {
font-family: ‘Playfair Display’, serif;
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 900;
line-height: 1.1;
max-width: 720px;
margin: 0 auto 16px;
color: #0d1f19;
}
#mtg-calc-root .mtg-hero h2 em {
font-style: normal;
color: #2a7d52;
}
#mtg-calc-root .mtg-hero p {
color: #4a6358;
font-size: 1rem;
max-width: 480px;
margin: 0 auto;
line-height: 1.7;
}
/* ── Grid ── */
#mtg-calc-root .mtg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 0 24px;
align-items: start;
}
@media (max-width: 860px) {
#mtg-calc-root .mtg-grid { grid-template-columns: 1fr; }
}
/* ── Cards ── */
#mtg-calc-root .mtg-card {
background: #f7faf8;
border: 1.5px solid #d0e6da;
border-radius: 18px;
padding: 26px;
}
#mtg-calc-root .mtg-card-title {
font-family: ‘Playfair Display’, serif;
font-size: 1.08rem;
font-weight: 700;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
color: #0d1f19;
}
#mtg-calc-root .mtg-icon-wrap {
width: 30px; height: 30px;
background: #013024;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
#mtg-calc-root .mtg-icon-wrap svg { width: 16px; height: 16px; fill: #a7ec4f; }
/* ── Section divider ── */
#mtg-calc-root .mtg-divider {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #2a7d52;
margin: 18px 0 12px;
padding-bottom: 7px;
border-bottom: 1.5px solid #d0e6da;
display: flex;
align-items: center;
gap: 7px;
}
#mtg-calc-root .mtg-divider svg { width: 13px; height: 13px; fill: #2a7d52; flex-shrink: 0; }
/* ── Fields ── */
#mtg-calc-root .mtg-field { margin-bottom: 14px; }
#mtg-calc-root .mtg-field label,
#mtg-calc-root .mtg-exp-label {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4a6358;
margin-bottom: 5px;
}
#mtg-calc-root .mtg-input-wrap { position: relative; display: flex; align-items: center; }
#mtg-calc-root .mtg-prefix {
position: absolute; left: 12px;
color: #2a7d52; font-weight: 700; font-size: 0.95rem; pointer-events: none;
}
#mtg-calc-root input[type=”number”],
#mtg-calc-root input[type=”text”] {
width: 100%;
background: #ffffff;
border: 1.5px solid #c5ddd4;
border-radius: 10px;
padding: 11px 11px 11px 26px;
color: #0d1f19;
font-family: ‘Open Sans’, sans-serif;
font-size: 0.93rem;
font-weight: 500;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
#mtg-calc-root input[type=”text”] { padding-left: 12px; }
#mtg-calc-root input[type=”number”]:focus,
#mtg-calc-root input[type=”text”]:focus {
border-color: #2a7d52;
box-shadow: 0 0 0 3px rgba(42,125,82,0.1);
}
#mtg-calc-root input[type=”number”]::-webkit-outer-spin-button,
#mtg-calc-root input[type=”number”]::-webkit-inner-spin-button { -webkit-appearance: none; }
#mtg-calc-root input::placeholder { color: #9ab8ac; }
/* ── Expense rows ── */
#mtg-calc-root .mtg-exp-rows { display: flex; flex-direction: column; gap: 10px; }
#mtg-calc-root .mtg-exp-row-custom {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 8px;
align-items: flex-end;
margin-top: 10px;
}
#mtg-calc-root .mtg-remove-btn {
width: 36px; height: 36px;
border-radius: 8px;
background: #fff0f0;
border: 1.5px solid #f5c6c6;
color: #c0392b;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
font-weight: 700;
transition: all 0.2s;
flex-shrink: 0;
line-height: 1;
}
#mtg-calc-root .mtg-remove-btn:hover { background: #ffe0e0; border-color: #e74c3c; }
#mtg-calc-root .mtg-add-btn {
margin-top: 12px; width: 100%; padding: 10px;
background: rgba(42,125,82,0.06);
border: 1.5px dashed #2a7d52;
border-radius: 10px;
color: #2a7d52;
font-family: ‘Open Sans’, sans-serif;
font-size: 0.8rem; font-weight: 700;
cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
}
#mtg-calc-root .mtg-add-btn:hover { background: rgba(42,125,82,0.12); }
#mtg-calc-root .mtg-total-row {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 14px;
background: #013024;
border-radius: 10px;
margin-top: 14px;
}
#mtg-calc-root .mtg-total-row .mtg-total-label {
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
#mtg-calc-root .mtg-total-row .mtg-total-val {
font-size: 1.1rem; font-weight: 700; color: #a7ec4f;
}
/* ── Toggle ── */
#mtg-calc-root .mtg-toggle-row {
display: flex; align-items: center; justify-content: space-between;
margin: 6px 0 12px;
padding: 10px 14px;
background: rgba(1,48,36,0.04);
border: 1px solid #d0e6da;
border-radius: 10px;
}
#mtg-calc-root .mtg-toggle-label { font-size: 0.82rem; color: #2c4a3c; font-weight: 500; }
#mtg-calc-root .mtg-toggle-label small { display: block; font-size: 0.68rem; color: #7a9b8e; }
#mtg-calc-root .mtg-toggle { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
#mtg-calc-root .mtg-toggle input { opacity: 0; width: 0; height: 0; }
#mtg-calc-root .mtg-toggle-slider {
position: absolute; inset: 0;
background: #c5ddd4; border-radius: 22px; cursor: pointer; transition: background 0.3s;
}
#mtg-calc-root .mtg-toggle-slider::before {
content: ”; position: absolute;
width: 16px; height: 16px; left: 3px; top: 3px;
background: white; border-radius: 50%; transition: transform 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#mtg-calc-root .mtg-toggle input:checked + .mtg-toggle-slider { background: #2a7d52; }
#mtg-calc-root .mtg-toggle input:checked + .mtg-toggle-slider::before { transform: translateX(20px); }
/* ── Calc button ── */
#mtg-calc-root .mtg-btn-calc {
width: 100%; margin-top: 6px; padding: 15px;
background: #013024; color: #a7ec4f;
border: none; border-radius: 12px;
font-family: ‘Open Sans’, sans-serif;
font-size: 1rem; font-weight: 800;
cursor: pointer; letter-spacing: 0.02em;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
box-shadow: 0 4px 18px rgba(1,48,36,0.2);
}
#mtg-calc-root .mtg-btn-calc:hover {
background: #024a38; transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(1,48,36,0.28);
}
#mtg-calc-root .mtg-btn-calc:active { transform: translateY(0); }
/* ── Results column ── */
#mtg-calc-root .mtg-results-col { display: flex; flex-direction: column; gap: 20px; }
#mtg-calc-root .mtg-result-hero {
background: linear-gradient(135deg, #013024 0%, #024a38 100%);
border-radius: 18px; padding: 28px; text-align: center;
border: 1.5px solid #013024;
}
#mtg-calc-root .mtg-result-hero .mtg-rlabel {
font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: #a7ec4f; margin-bottom: 10px;
}
#mtg-calc-root .mtg-result-main {
font-family: ‘Playfair Display’, serif;
font-size: clamp(2.4rem, 5.5vw, 3.6rem);
font-weight: 900; line-height: 1; color: #ffffff; margin-bottom: 8px;
}
#mtg-calc-root .mtg-result-date { font-size: 0.87rem; color: rgba(255,255,255,0.65); }
#mtg-calc-root .mtg-result-date strong { color: #ffffff; }
#mtg-calc-root .mtg-result-sub {
margin-top: 10px; font-size: 0.77rem; color: rgba(255,255,255,0.45);
}
/* Placeholder */
#mtg-calc-root .mtg-placeholder {
text-align: center; padding: 34px 20px;
}
#mtg-calc-root .mtg-placeholder svg {
width: 48px; height: 48px; margin-bottom: 10px; opacity: 0.35;
}
#mtg-calc-root .mtg-placeholder p { font-size: 0.87rem; color: rgba(255,255,255,0.5); }
/* ── Scenarios ── */
#mtg-calc-root .mtg-scenarios { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
#mtg-calc-root .mtg-scenario-item {
background: #f0f7f3; border: 1.5px solid #d0e6da;
border-radius: 12px; padding: 14px 10px; text-align: center;
}
#mtg-calc-root .mtg-scenario-item.mtg-highlight {
background: #013024; border-color: #013024;
}
#mtg-calc-root .mtg-scenario-item.mtg-highlight .mtg-sc-label { color: rgba(255,255,255,0.5); }
#mtg-calc-root .mtg-scenario-item.mtg-highlight .mtg-sc-time { color: #a7ec4f; }
#mtg-calc-root .mtg-scenario-item.mtg-highlight .mtg-sc-spend { color: rgba(255,255,255,0.4); }
#mtg-calc-root .mtg-sc-label {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: #4a6358; margin-bottom: 7px;
}
#mtg-calc-root .mtg-sc-time {
font-family: ‘Playfair Display’, serif;
font-size: 1.25rem; font-weight: 700; color: #0d1f19;
}
#mtg-calc-root .mtg-sc-time.mtg-good { color: #2a7d52; }
#mtg-calc-root .mtg-sc-spend { font-size: 0.7rem; color: #7a9b8e; margin-top: 3px; }
/* ── Charts ── */
#mtg-calc-root .mtg-chart-wrap { position: relative; height: 200px; margin-top: 4px; }
#mtg-calc-root .mtg-donut-wrap { position: relative; height: 220px; margin-top: 4px; }
/* ── Invest CTA ── */
#mtg-calc-root .mtg-invest-cta {
background: #013024;
border: 1.5px solid #013024;
border-radius: 18px; padding: 22px;
display: flex; align-items: center; gap: 16px;
text-decoration: none; color: #ffffff;
transition: background 0.2s, transform 0.2s;
}
#mtg-calc-root .mtg-invest-cta:hover { background: #024a38; transform: translateY(-2px); }
#mtg-calc-root .mtg-invest-cta-icon {
width: 46px; height: 46px;
background: rgba(167,236,79,0.15);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
#mtg-calc-root .mtg-invest-cta-icon svg { width: 22px; height: 22px; fill: #a7ec4f; }
#mtg-calc-root .mtg-invest-text .mtg-cta-label {
font-size: 0.67rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: #a7ec4f; margin-bottom: 3px;
}
#mtg-calc-root .mtg-invest-text strong {
font-family: ‘Playfair Display’, serif; font-size: 0.98rem; display: block;
}
#mtg-calc-root .mtg-invest-text p { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 3px; }
#mtg-calc-root .mtg-invest-arrow {
margin-left: auto; color: #a7ec4f; font-size: 1.3rem; flex-shrink: 0;
}
/* ── Share bar ── */
#mtg-calc-root .mtg-share-bar {
display: flex; gap: 10px; align-items: center;
flex-wrap: wrap; padding: 0 24px; margin-top: 28px;
}
#mtg-calc-root .mtg-share-label {
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: #7a9b8e;
}
#mtg-calc-root .mtg-share-btn {
padding: 7px 16px; border-radius: 100px;
font-family: ‘Open Sans’, sans-serif;
font-size: 0.78rem; font-weight: 700;
cursor: pointer;
border: 1.5px solid #c5ddd4;
background: #f7faf8; color: #013024;
transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
#mtg-calc-root .mtg-share-btn:hover { border-color: #013024; background: #013024; color: #a7ec4f; }
#mtg-calc-root .mtg-share-btn svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
/* ── Disclaimer ── */
#mtg-calc-root .mtg-disclaimer {
padding: 20px 24px 0;
border-top: 1.5px solid #e0ede7;
margin-top: 32px;
}
#mtg-calc-root .mtg-disclaimer p {
font-size: 0.71rem; color: #7a9b8e; line-height: 1.7;
}
/* Animations */
#mtg-calc-root .mtg-fade-in { animation: mtgFadeIn 0.4s ease forwards; }
@keyframes mtgFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 580px) {
#mtg-calc-root .mtg-scenarios { grid-template-columns: 1fr; }
#mtg-calc-root .mtg-invest-cta { flex-wrap: wrap; }
#mtg-calc-root .mtg-exp-row-custom { grid-template-columns: 1fr auto; }
#mtg-calc-root .mtg-exp-row-custom .mtg-exp-name-col { grid-column: 1 / -1; }
}
How Long Will My
Money Last?
Enter your savings and monthly expenses. See your financial runway and what small changes can do for your future.
Your Numbers
Monthly Expenses Breakdown
$0
Options
~3% annual erosion of purchasing power
Disclaimer: This calculator is for informational and educational purposes only. Results are estimates based on the data you enter and do not account for all financial variables. This is not financial advice. Always consult a qualified financial professional before making major financial decisions.
(function() {
var mtgLineChart = null;
var mtgDonutChart = null;
var mtgCustomCount = 0;
var PALETTE = [‘#2a7d52′,’#a7ec4f’,’#1a9ab5′,’#f0a030′,’#c45b9a’,’#7c5cbf’,’#e8724f’,’#5dd68c’,’#2d75c9′,’#d4d420′];
function mtgGetTotal() {
var t = 0;
document.querySelectorAll(‘#mtg-calc-root .mtg-exp-field’).forEach(function(el) { t += parseFloat(el.value) || 0; });
return t;
}
function mtgGetBreakdown() {
var items = [];
document.querySelectorAll(‘#mtg-calc-root .mtg-exp-field’).forEach(function(el) {
var v = parseFloat(el.value) || 0;
if (v > 0) items.push({ label: el.getAttribute(‘data-cat’) || ‘Other’, value: v });
});
return items;
}
function mtgUpdateTotal() {
document.getElementById(‘mtg-total-display’).textContent = ‘$’ + Math.round(mtgGetTotal()).toLocaleString(‘en-US’);
}
document.querySelectorAll(‘#mtg-calc-root .mtg-exp-field’).forEach(function(el) {
el.addEventListener(‘input’, mtgUpdateTotal);
});
window.mtgAddExpense = function() {
mtgCustomCount++;
var id = ‘mtgc’ + mtgCustomCount;
var div = document.createElement(‘div’);
div.id = id + ‘-wrap’;
div.style.marginTop = ’10px’;
div.innerHTML =
‘
‘ +
‘
‘
‘ +
‘
‘ +
‘‘ +
‘
‘;
document.getElementById(‘mtg-custom-expenses’).appendChild(div);
document.getElementById(id + ‘-name’).addEventListener(‘input’, function() {
document.getElementById(id + ‘-val’).setAttribute(‘data-cat’, this.value.trim() || ‘Custom’);
});
document.getElementById(id + ‘-val’).addEventListener(‘input’, mtgUpdateTotal);
};
window.mtgRemove = function(id) {
var el = document.getElementById(id + ‘-wrap’);
if (el) el.remove();
mtgUpdateTotal();
};
function mtgFmt(n) { return ‘$’ + Math.round(n).toLocaleString(‘en-US’); }
function mtgCalcMonths(savings, net, inflation) {
if (net 0 && m 1199) return ‘Forever’;
var y = Math.floor(months / 12), m = Math.round(months % 12);
if (y === 0) return m + ‘ mo’;
if (m === 0) return y + ‘ yr’;
return y + ‘ yr ‘ + m + ‘ mo’;
}
function mtgFmtDate(months) {
if (!isFinite(months) || months > 1199) return null;
var d = new Date(); d.setMonth(d.getMonth() + Math.round(months));
return d.toLocaleDateString(‘en-US’, { month: ‘long’, year: ‘numeric’ });
}
function mtgTimeline(savings, net, inflation, maxM) {
var labels = [], data = [], bal = savings, exp = net;
var step = Math.max(1, Math.floor(maxM / 36));
for (var m = 0; m <= maxM; m += step) {
labels.push(m === 0 ? 'Now' : (m < 24 ? m + 'mo' : Math.round(m / 12) + 'yr'));
data.push(Math.max(0, bal));
for (var i = 0; i < step; i++) {
bal -= exp; if (((m + i + 1) % 12 === 0) && inflation) exp *= 1.03; if (bal = 1000 ? (v / 1000).toFixed(0) + ‘k’ : v); } } }
}
}
});
}
function mtgRenderDonut(breakdown) {
var ctx = document.getElementById(‘mtg-donut-chart’).getContext(‘2d’);
if (mtgDonutChart) mtgDonutChart.destroy();
mtgDonutChart = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: breakdown.map(function(b) { return b.label; }),
datasets: [{ data: breakdown.map(function(b) { return b.value; }), backgroundColor: breakdown.map(function(_, i) { return PALETTE[i % PALETTE.length]; }), borderColor: ‘#f7faf8’, borderWidth: 3, hoverOffset: 8 }]
},
options: {
responsive: true, maintainAspectRatio: false, cutout: ‘62%’,
plugins: {
legend: { position: ‘right’, labels: { color: ‘#2c4a3c’, font: { size: 11, family: “‘Open Sans'” }, padding: 12, boxWidth: 12, usePointStyle: true, pointStyleWidth: 10 } },
tooltip: { callbacks: { label: function(c) { var t = c.dataset.data.reduce(function(a,b){return a+b;},0); return ‘ ‘ + mtgFmt(c.parsed) + ‘ (‘ + Math.round(c.parsed/t*100) + ‘%)’; } }, backgroundColor: ‘#013024’, titleColor: ‘#a7ec4f’, bodyColor: ‘#fff’, borderColor: ‘rgba(42,125,82,0.3)’, borderWidth: 1, padding: 10 }
}
}
});
}
window.mtgCalculate = function() {
var savings = parseFloat(document.getElementById(‘mtg-savings’).value) || 0;
var income = parseFloat(document.getElementById(‘mtg-income’).value) || 0;
var inflation = document.getElementById(‘mtg-inflation’).checked;
var expenses = mtgGetTotal();
var breakdown = mtgGetBreakdown();
var net = expenses – income;
if (!savings || !expenses) { alert(‘Please enter at least your savings and monthly expenses.’); return; }
var months = mtgCalcMonths(savings, net, inflation);
var dateStr = mtgFmtDate(months);
var hero = document.getElementById(‘mtg-result-hero’);
var h = ‘
‘;
h += ‘
‘;
if (dateStr) h += ‘
‘;
else h += ‘
‘;
if (income > 0) h += ‘
‘;
h += ‘
‘;
hero.innerHTML = h;
hero.classList.add(‘mtg-fade-in’);
if (breakdown.length > 0) {
var dc = document.getElementById(‘mtg-donut-card’);
dc.style.display = ‘block’; dc.classList.add(‘mtg-fade-in’);
mtgRenderDonut(breakdown);
}
var scns = [
{ id: ‘mtg-sc-less20’, factor: 0.8, lbl: ‘mtg-sc-less20-amt’ },
{ id: ‘mtg-sc-current’, factor: 1.0, lbl: ‘mtg-sc-current-amt’ },
{ id: ‘mtg-sc-more20’, factor: 1.2, lbl: ‘mtg-sc-more20-amt’ }
];
scns.forEach(function(s) {
var m = mtgCalcMonths(savings, expenses * s.factor – income, inflation);
document.getElementById(s.id).textContent = mtgFmtDur(m);
document.getElementById(s.lbl).textContent = mtgFmt(expenses * s.factor) + ‘/mo’;
});
var sc = document.getElementById(‘mtg-scenarios-card’);
sc.style.display = ‘block’; sc.classList.add(‘mtg-fade-in’);
if (isFinite(months) && months > 0) {
var cc = document.getElementById(‘mtg-chart-card’);
cc.style.display = ‘block’; cc.classList.add(‘mtg-fade-in’);
mtgRenderLine(savings, net, inflation, Math.round(months));
}
document.getElementById(‘mtg-share-bar’).style.display = ‘flex’;
var url = new URL(window.location.href);
url.searchParams.set(‘s’, savings); url.searchParams.set(‘e’, expenses);
if (income) url.searchParams.set(‘i’, income);
if (inflation) url.searchParams.set(‘inf’, ‘1’);
window._mtgShareUrl = url.toString();
if (window.innerWidth < 900) {
document.getElementById('mtg-result-hero').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
window.mtgCopyLink = function() {
if (navigator.clipboard && window._mtgShareUrl) navigator.clipboard.writeText(window._mtgShareUrl).then(function(){alert('Link copied!');});
else alert('Calculate first to generate your shareable link.');
};
window.mtgExportPDF = function() { window.print(); };
document.addEventListener('keydown', function(e) { if (e.key === 'Enter' && document.activeElement && document.activeElement.closest('#mtg-calc-root')) mtgCalculate(); });
})();