/* Simple Money Advice - shared calculator styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #FEFCF7; --surface: #FFFFFF; --green-dark: #1B4332; --green-mid: #2D6A4F;
--green-light: #52B788; --green-faint: #ECFDF5; --amber: #D97706; --amber-light: #FEF3C7;
--text: #1A1714; --text-mid: #4B4540; --text-light: #8C8178;
--border: #E8E3D8; --border-light: #F0EDE6;
--radius-sm: 6px; --radius: 12px; --radius-lg: 20px;
--shadow: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; }
a { color: inherit; text-decoration: none; }
.calc-wrap { max-width: 780px; margin: 0 auto; padding: 56px 24px 96px; }
.calc-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: #ECFDF5; color: var(--green-mid); margin-bottom: 18px; }
.calc-title { font-family: 'Lora', serif; font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.2; color: var(--green-dark); margin-bottom: 12px; }
.calc-subtitle { font-size: 16px; color: var(--text-mid); margin-bottom: 40px; line-height: 1.6; }
.inputs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; }
.inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.input-group { display: flex; flex-direction: column; gap: 10px; }
.input-label { font-size: 13px; font-weight: 600; color: var(--text); }
.input-label span { font-weight: 400; color: var(--text-light); }
.input-row { display: flex; align-items: center; gap: 12px; }
.input-number { width: 110px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 15px; font-weight: 600; color: var(--green-dark); background: var(--bg); font-family: 'Inter', sans-serif; outline: none; transition: border-color .15s; }
.input-number:focus { border-color: var(--green-mid); }
.input-prefix { font-size: 14px; font-weight: 600; color: var(--text-light); }
.slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--border); outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green-dark); cursor: pointer; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.input-select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--green-dark); background: var(--bg); font-family: 'Inter', sans-serif; outline: none; width: 100%; }
.input-select:focus { border-color: var(--green-mid); }
.results-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.results-grid.three { grid-template-columns: 2fr 1fr 1fr; }
.result-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.result-card.main { background: var(--green-dark); border-color: var(--green-dark); }
.result-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; }
.result-card.main .result-label { color: rgba(255,255,255,.55); }
.result-value { font-size: 26px; font-weight: 700; color: var(--green-dark); line-height: 1.1; }
.result-card.main .result-value { font-size: 32px; color: #fff; }
.result-sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.result-card.main .result-sub { color: rgba(255,255,255,.45); }
.milestone-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.milestone-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.milestone-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; align-items: center; }
.milestone-row:last-child { border-bottom: 0; }
.milestone-row.header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); padding-top: 0; }
.milestone-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green-dark); }
.milestone-row.header .num { font-weight: 700; color: var(--text-light); }
.milestone-row.total { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 700; }
.milestone-row.total .num { font-size: 15px; }
.verdict-card { border-radius: var(--radius); padding: 22px 26px; margin-bottom: 24px; border: 1px solid; }
.verdict-card.good { background: var(--green-faint); border-color: #B7E4C7; }
.verdict-card.warn { background: var(--amber-light); border-color: #FCD34D; }
.verdict-title { font-family: 'Lora', serif; font-size: 19px; font-weight: 600; color: var(--green-dark); margin-bottom: 8px; line-height: 1.3; }
.verdict-body { font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.callout { background: var(--amber-light); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 24px; font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.callout strong { color: var(--text); }
.cta-bar { background: #ECFDF5; border: 1px solid #BBF7D0; border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cta-text { font-size: 14px; color: var(--text-mid); }
.cta-text strong { color: var(--text); }
.cta-btn { background: var(--green-dark); color: #fff; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; white-space: nowrap; transition: opacity .15s; border: 0; cursor: pointer; font-family: 'Inter', sans-serif; }
.cta-btn:hover { opacity: .88; }
.disclaimer { font-size: 12px; color: var(--text-light); margin-top: 32px; line-height: 1.7; }
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; position: relative; }
.detail-card .milestone-title { margin-bottom: 4px; }
.detail-sub { font-size: 13px; color: var(--text-light); margin-bottom: 16px; }
.detail-gate { background: var(--surface); border: 1px dashed var(--green-light); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 24px; }
.detail-gate h3 { font-family: 'Lora', serif; font-size: 18px; font-weight: 600; color: var(--green-dark); margin-bottom: 6px; }
.detail-gate p { font-size: 14px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }
.gate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-form input { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif; outline: none; background: var(--bg); }
.gate-form input:focus { border-color: var(--green-mid); }
.gate-note { font-size: 12px; color: var(--text-light); margin-top: 10px; }
.gate-blur { filter: blur(6px); pointer-events: none; user-select: none; }
footer { background: var(--green-dark); color: rgba(255,255,255,.5); padding: 32px 24px; text-align: center; font-size: 13px; }
footer a { color: rgba(255,255,255,.5); transition: color .15s; }
footer a:hover { color: #fff; }
.footer-disclaimer { font-size: 12px; color: rgba(255,255,255,.6); max-width: 640px; margin: 12px auto 0; line-height: 1.7; }
@media (max-width: 640px) {
.inputs-grid { grid-template-columns: 1fr; }
.results-grid, .results-grid.three { grid-template-columns: 1fr 1fr; }
.result-card.main { grid-column: 1 / -1; }
.cta-bar { flex-direction: column; align-items: flex-start; }
}


.sma-header{position:sticky;top:0;z-index:1000;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.4}
.sma-topbar{background:rgba(254,252,247,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #F0EDE6}
.sma-topbar-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sma-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.sma-logo img{height:40px;width:auto;display:block}
.sma-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.sma-links a{color:#4B4540;text-decoration:none;white-space:nowrap}
.sma-links a:hover{color:#1B4332}
.sma-links a.active{color:#1B4332;font-weight:700}
.sma-mega{background:#1B4332;display:flex;flex-wrap:wrap;justify-content:center;padding:0 16px}
.sma-cluster{position:relative}
.sma-cluster-btn{background:none;border:0;border-bottom:2px solid transparent;margin:0;font-family:inherit;padding:13px 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;line-height:1.2}
.sma-cluster-btn:hover,.sma-cluster.open .sma-cluster-btn,.sma-cluster.current .sma-cluster-btn{color:#fff;border-bottom-color:#F59E0B}
.sma-caret{font-size:9px;transition:transform .15s}
.sma-cluster.open .sma-caret{transform:rotate(180deg)}
.sma-cluster-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #E8E3D8;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.14);min-width:230px;max-width:calc(100vw - 16px);padding:8px;z-index:1001;text-align:left}
.sma-cluster.open .sma-cluster-menu{display:block}
@media (hover:hover) and (min-width:701px){.sma-cluster:hover .sma-cluster-menu{display:block}.sma-cluster:hover .sma-caret{transform:rotate(180deg)}}
.sma-cluster-menu a{display:block;padding:10px 14px;font-size:13px;font-weight:500;color:#4B4540;border-radius:6px;text-decoration:none;line-height:1.35;white-space:normal}
.sma-cluster-menu a:hover{background:#ECFDF5;color:#1B4332}
.sma-cluster-menu a.active{background:#ECFDF5;color:#1B4332;font-weight:700}
.sma-crumb{max-width:720px;margin:16px auto 0;padding:0 24px;font-family:'Inter',system-ui,sans-serif;font-size:13px}
.sma-crumb a{color:#2D6A4F;font-weight:600;text-decoration:none}
.sma-crumb a:hover{text-decoration:underline}
@media (max-width:700px){.sma-header{position:relative}.sma-topbar-inner{height:auto;flex-direction:column;gap:6px;padding:10px 16px}.sma-logo img{height:34px}.sma-links{gap:18px;font-size:13px;flex-wrap:wrap;justify-content:center}.sma-mega{padding:0 4px}.sma-cluster-btn{padding:11px 10px;font-size:12px}.sma-crumb{padding:0 16px}}