:root { --mf-navy:#10233f; --mf-blue:#246bfe; --mf-projection-selected:#2fae8a; --mf-conservative:#94a8c1; --mf-hero-start:#10233f; --mf-hero-end:#318dff; --mf-result-start:#f4f8ff; --mf-result-end:#eafaf4; --mf-suggestion:#d99c27; --mf-mint:#dff8ee; --mf-ink:#182235; --mf-muted:#667085; --mf-line:#dde3ed; --mf-paper:#fff; }
.mfch { max-width:1120px; margin:32px auto; color:var(--mf-ink); font-family:inherit; }
.mfch *, .mfch *:before, .mfch *:after { box-sizing:border-box; }
.mfch__hero { padding:46px 48px; color:#fff; border-radius:24px; background:radial-gradient(circle at 82% 18%, var(--mf-hero-end) 0, var(--mf-blue) 24%, var(--mf-hero-start) 66%); }
.mfch__hero h2 { margin:7px 0 12px; font-size:clamp(28px,4vw,44px); line-height:1.08; letter-spacing:-.035em; color:#fff; }
.mfch__hero p { max-width:650px; margin:0; color:#e8f0ff; font-size:16px; line-height:1.6; }
.mfch__eyebrow { color:#b4d7ff!important; font-size:13px!important; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mfch__tabs { display:none; }
.mfch__mobile-picker-label { display:grid; gap:7px; color:var(--mf-ink); font-size:13px; font-weight:700; }
.mfch__mobile-picker { width:100%; border:1px solid var(--mf-line); border-radius:10px; padding:12px; background:#fff; color:var(--mf-ink); font:inherit; }
.mfch__workspace { overflow:hidden; border:1px solid var(--mf-line); border-radius:20px; background:var(--mf-paper); box-shadow:0 16px 45px rgba(21,39,73,.08); }
.mfch__workspace-main { display:grid; grid-template-columns:1.06fr .94fr .58fr; min-height:485px; }
.mfch__form { padding:32px; }
.mfch__form h3 { margin:0 0 8px; font-size:25px; letter-spacing:-.025em; }
.mfch__form > p { margin:0 0 28px; color:var(--mf-muted); line-height:1.5; }
.mfch__fields { display:grid; gap:18px; }
.mfch__field { display:grid; gap:8px; }
.mfch__field label { font-weight:650; font-size:14px; }
.mfch__control { display:grid; grid-template-columns:1fr 102px; gap:10px; align-items:center; }
.mfch input, .mfch select { width:100%; border:1px solid var(--mf-line); border-radius:10px; padding:12px; color:var(--mf-ink); background:#fff; font:inherit; }
.mfch input[type="range"] { padding:0; accent-color:var(--mf-blue); }
.mfch__slider-marks { position:relative; height:24px; margin-right:112px; color:var(--mf-muted); font-size:10px; line-height:1; }
.mfch__slider-marks span { position:absolute; top:10px; transform:translateX(-50%); white-space:nowrap; }
.mfch__slider-marks span:before { position:absolute; top:-8px; left:50%; width:1px; height:5px; background:#c6d0de; content:""; }
.mfch__year-marks .mfch__suggested { top:7px; padding:2px 4px; border-radius:5px; background:#fff5dc; color:#a66b00; font-weight:700; }
.mfch__year-marks .mfch__suggested:before { top:-5px; background:var(--mf-suggestion); }
.mfch__field-hint { margin:0; color:var(--mf-muted); font-size:11px; line-height:1.4; }
.mfch__quick-amounts { display:flex; flex-wrap:wrap; gap:7px; }
.mfch__quick-amounts button { padding:6px 9px; border:1px solid var(--mf-line); border-radius:7px; background:#fff; color:var(--mf-muted); cursor:pointer; font:600 11px/1 inherit; }
.mfch__quick-amounts button:hover { border-color:var(--mf-blue); background:#eef4ff; color:#1648b6; }
.mfch__result { display:flex; flex-direction:column; padding:34px; background:linear-gradient(155deg,var(--mf-result-start),var(--mf-result-end)); }
.mfch__result small { color:var(--mf-muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mfch__result h4 { margin:9px 0 8px; color:var(--mf-navy); font-size:34px; letter-spacing:-.04em; }
.mfch__result > p { margin:0 0 28px; color:var(--mf-muted); }
.mfch__chart-wrap { display:flex; align-items:center; gap:16px; margin:6px 0 24px; }
.mfch__chart { position:relative; flex:0 0 112px; width:112px; height:112px; border-radius:50%; background:conic-gradient(var(--mf-blue) 0 var(--mf-investment), #43bd8d var(--mf-investment) 100%); }
.mfch__chart::after { position:absolute; inset:18px; border-radius:50%; background:#f2f8ff; content:""; }
.mfch__chart-label { position:relative; z-index:1; width:76px; margin:35px auto; color:var(--mf-navy); font-size:12px; font-weight:750; line-height:1.15; text-align:center; }
.mfch__legend { display:grid; gap:8px; color:var(--mf-muted); font-size:12px; }
.mfch__legend span { display:flex; align-items:center; gap:7px; }
.mfch__legend i { width:9px; height:9px; border-radius:50%; background:var(--mf-blue); }
.mfch__legend i.mfch__gain { background:#43bd8d; }
.mfch__breakdown { display:grid; gap:13px; margin-top:auto; }
.mfch__breakdown div { display:flex; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid rgba(16,35,63,.12); color:var(--mf-muted); }
.mfch__breakdown strong { color:var(--mf-ink); text-align:right; }
.mfch__calculator-menu { padding:18px; border-left:1px solid var(--mf-line); background:#fff; }
.mfch__calculator-menu h3 { margin:7px 5px 17px; color:var(--mf-navy); font-size:19px; letter-spacing:-.02em; }
.mfch__calculator-menu button { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; margin:9px 0; padding:14px 13px; border:1px solid transparent; border-radius:10px; background:#36af99; color:#fff; cursor:pointer; font:700 14px/1.2 inherit; text-align:left; }
.mfch__calculator-menu button[aria-selected="true"] { background:var(--mf-blue); }
.mfch__calculator-menu button:hover { filter:brightness(.96); }
.mfch__calculator-menu button span { font-size:20px; font-weight:400; line-height:0; }
.mfch__projection { padding:34px; border-top:1px solid var(--mf-line); background:#fff; }
.mfch__projection-head,.mfch__scenario-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.mfch__projection h3,.mfch__projection h4 { margin:0 0 6px; color:var(--mf-navy); font-size:23px; letter-spacing:-.02em; }
.mfch__projection h4 { font-size:17px; }
.mfch__projection-head p,.mfch__scenario-head p { margin:0; color:var(--mf-muted); font-size:13px; line-height:1.5; }
.mfch__projection-inputs,.mfch__scenario-head > p { color:var(--mf-muted); font-size:12px; line-height:1.6; text-align:right; white-space:nowrap; }
.mfch__projection-inputs b { color:var(--mf-ink); }
.mfch__projection-legend { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0 8px; color:var(--mf-muted); font-size:12px; }
.mfch__projection-legend span { display:flex; align-items:center; gap:7px; }
.mfch__projection-legend i { width:9px; height:9px; border-radius:50%; }
.mfch__legend-selected { background:var(--mf-projection-selected); }
.mfch__legend-conservative { background:var(--mf-conservative); }
.mfch__projection-line { display:block; width:100% !important; height:440px !important; overflow:visible; }
.mfch__projection-bars { display:block; width:100% !important; height:330px !important; overflow:visible; }
.mfch__chart-grid { stroke:#e7edf3; stroke-width:1; }
.mfch__chart-axis { fill:var(--mf-muted); font-size:11px; }
.mfch__chart-year { fill:var(--mf-muted); font-size:12px; font-weight:700; }
.mfch__chart-area { fill:var(--mf-projection-selected); opacity:.12; }
.mfch__selected-horizon { stroke:var(--mf-suggestion); stroke-width:1.5; stroke-dasharray:4 5; }
.mfch__horizon-label { fill:#a66b00; font-size:11px; font-weight:700; }
.mfch__projection-selected { fill:none; stroke:var(--mf-projection-selected); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.mfch__projection-conservative { fill:none; stroke:var(--mf-conservative); stroke-width:3; stroke-dasharray:7 7; stroke-linecap:round; }
.mfch__selected-point { fill:var(--mf-projection-selected); stroke:#fff; stroke-width:2; }
.mfch__conservative-point { fill:var(--mf-conservative); stroke:#fff; stroke-width:2; }
.mfch__projection-summary { display:flex; justify-content:space-between; gap:16px; padding:16px 0 22px; border-top:1px solid var(--mf-line); color:var(--mf-muted); font-size:13px; }
.mfch__projection-summary strong { color:var(--mf-ink); text-align:right; }
.mfch__scenario-head { margin:2px 0 12px; padding-top:23px; border-top:1px solid var(--mf-line); }
.mfch__bar-selected { fill:var(--mf-projection-selected); }
.mfch__bar-horizon { fill:#1b8a70; }
.mfch__bar-conservative { fill:color-mix(in srgb, var(--mf-conservative) 50%, white); }
.mfch__projection-bars rect { cursor:help; }
.mfch__projection-note { margin:12px 0 0; color:var(--mf-muted); font-size:11px; line-height:1.5; }
.mfch__disclaimer { margin:16px 0; color:var(--mf-muted); font-size:12px; line-height:1.5; }
@media (max-width:960px) { .mfch__tabs { display:block; padding:20px 0 14px; } .mfch__workspace-main { grid-template-columns:1.06fr .94fr; } .mfch__calculator-menu { display:none; } }
@media (max-width:720px) { .mfch { margin:18px 0; } .mfch__hero { padding:32px 24px; border-radius:18px; } .mfch__workspace { border-radius:16px; } .mfch__workspace-main { grid-template-columns:1fr; } .mfch__form,.mfch__result,.mfch__projection { padding:24px; } .mfch__result { min-height:310px; } .mfch__projection-head,.mfch__scenario-head { display:block; } .mfch__projection-inputs,.mfch__scenario-head > p { margin-top:12px; text-align:left; } .mfch__slider-marks { margin-right:112px; } .mfch__projection-summary { display:grid; } .mfch__projection-summary strong { text-align:left; } .mfch__quick-amounts { gap:6px; } .mfch__quick-amounts button { padding:8px 10px; } .mfch__projection-line { height:300px !important; } .mfch__projection-bars { height:250px !important; } }