:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253b35;background:#fff;font-synthesis:none;--green:#25654d;--muted:#76817c;--line:#e3e8e4}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}header{height:98px;max-width:1320px;margin:auto;display:flex;align-items:center;gap:25px;padding:0 48px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;font-size:28px;font-weight:750;letter-spacing:-1px;color:#233d32}.brand-icon{display:inline-flex;position:relative;align-items:center;justify-content:center;width:38px;height:38px;background:var(--green);color:#fff;border-radius:12px;margin-right:11px;font-size:30px}.brand-icon span{font-size:18px;margin-top:-12px}.brand-dot{color:var(--green)}.header-caption{font-size:14px;color:#737d77}.poc{margin-left:auto;background:#f3f6f3;padding:7px 12px;border-radius:6px;font-size:12px;color:#5b7262}main{max-width:1120px;margin:auto;padding:0 36px}.intro{text-align:center;padding:54px 0 28px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--green)}h1{font-size:48px;letter-spacing:-2px;font-weight:550;margin:17px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--green)}.intro p{font-size:16px;line-height:1.75;color:#788079;margin:0}.steps{display:flex;align-items:center;justify-content:center;gap:19px;margin:15px 0 35px;color:#959c96;font-size:13px}.steps span{display:flex;align-items:center;gap:9px}.steps b{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;font-size:12px}.steps .active{color:var(--green)}.steps .active b{color:white;background:var(--green);border-color:var(--green)}.steps i{width:65px;height:1px;background:var(--line)}.commitments{background:#f7f8f6;border:1px solid #e7eae5;border-radius:18px;padding:26px 29px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}h2{font-size:21px;letter-spacing:-.5px;margin:0 0 7px}.section-heading p{margin:0;color:#7c847e;font-size:14px}.small-note{font-size:12px;color:#858b84}.options{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.chip{display:flex;align-items:center;gap:14px;background:white;border:1px solid #d7ddd5;border-radius:25px;color:#4c5a51;font-size:14px;padding:10px 15px;transition:background .15s,border .15s}.chip:hover{background:#eaf1e9;border-color:#749482}.chip span{font-size:20px;line-height:16px;color:#7a867c}.hint{font-size:12px;color:#7b857c;margin-top:23px}.hint span{margin-right:7px}.composer{margin-top:25px;border:1px solid #cfd9cf;border-radius:17px;padding:20px 22px;box-shadow:0 6px 22px #1a372508}.composer>label{font-size:12px;font-weight:650;color:#5d7564}.composer textarea{display:block;resize:vertical;min-height:95px;max-height:350px;width:100%;border:0;outline:none;margin:10px 0;color:#344c3d;line-height:1.8;font-size:16px;background:white}.composer textarea::placeholder{color:#9aa59c}.composer:focus-within{border-color:var(--green)}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px}.composer-bottom>span{font-size:12px;color:#8a928c}.primary{background:var(--green);border:0;color:white;padding:13px 19px;border-radius:9px;font-size:14px;font-weight:600;white-space:nowrap}.primary:hover{background:#194c39}.primary span{margin-left:20px;font-size:18px}.privacy{text-align:center;font-size:12px;color:#8e978f;margin:17px 0 35px}.result-heading{border-top:1px solid var(--line);padding-top:40px;margin-top:45px}.result-heading h2{font-size:32px;margin-top:12px}.result-heading p{color:var(--muted);font-size:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.stats article{border:1px solid var(--line);border-radius:13px;padding:24px}.stats span,.stats small{display:block;font-size:13px;color:#77857d}.stats strong{display:block;font-size:31px;letter-spacing:-1px;margin:13px 0}.stats .remaining{background:#edf5ef;border-color:#deebe1}.remaining strong{color:var(--green)}.overview{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{border:1px solid var(--line);border-radius:15px;padding:25px}h3{font-size:16px;margin:0 0 23px;font-weight:600}.donut-layout{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.donut{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.donut>div{width:130px;height:130px;border-radius:50%;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut span{font-size:12px;color:var(--muted)}.donut strong{font-size:30px;margin-top:6px}.legend{font-size:12px;flex:1}.legend p{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.legend b{display:block;width:100%;padding-left:16px;font-size:15px;margin-top:5px}.legend i,.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.expense-color{background:#b7c7a6}.saving-color{background:#25654d}.muted{font-size:13px;color:var(--muted);line-height:1.6}.breakdown-row{margin-bottom:15px}.breakdown-row>div{display:flex;justify-content:space-between;font-size:13px;gap:15px}.bar-track{height:5px;background:#f1f4f0;border-radius:4px;margin-top:8px}.bar-track i{display:block;background:#a9bca0;height:5px;border-radius:4px}.investments{margin-top:40px}.investments h2{font-size:27px;margin-top:10px}.assumption{font-size:12px;color:#808a81;line-height:1.7;margin:18px 0}.chart-heading{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.chart-legend{display:flex;flex-wrap:wrap;gap:13px;font-size:12px}.projection-chart{width:100%;margin:20px 0}.projection-chart svg{width:100%;height:auto;display:block}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:right;font-size:14px;white-space:nowrap}caption{text-align:left;font-size:12px;color:var(--muted);padding-bottom:15px}th,td{padding:15px 10px;border-bottom:1px solid var(--line)}th{font-size:12px;font-weight:500;color:var(--muted)}th:first-child,td:first-child{text-align:left}td small{color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:27px 0;margin-top:45px;font-size:12px;color:#9aa29b}.footer-brand{font-size:17px;font-weight:750;color:#6b7d6e}dialog{border:1px solid var(--line);border-radius:19px;padding:32px;width:420px;max-width:calc(100% - 32px);color:#253b35;box-shadow:0 25px 90px #16312330}dialog::backdrop{background:#16312345;backdrop-filter:blur(3px)}dialog h2{font-size:25px;margin:18px 0 10px}dialog p{color:var(--muted);font-size:14px;line-height:1.6}dialog label{display:block;font-size:14px;margin:25px 0 8px}dialog input{border:1px solid #bfcec2;padding:14px;border-radius:9px;width:100%;font-size:20px}dialog .primary{width:100%;margin-top:10px}.close{position:absolute;right:17px;top:12px;font-size:27px;border:0;background:none;color:#7c887e}.error{color:#af3e36!important;font-size:13px;margin:10px 0 0}.error:empty{display:none}:focus-visible{outline:2px solid #25654d;outline-offset:4px}[hidden]{display:none!important}@media(max-width:700px){header{height:80px;padding:0 20px;gap:10px}.header-caption{font-size:11px;max-width:125px}.brand{font-size:24px}.poc{display:none}main{padding:0 18px}.intro{padding-top:35px}h1{font-size:35px;letter-spacing:-1px}.eyebrow{font-size:10px}.intro p{font-size:14px}.steps{gap:10px;font-size:11px}.steps i{width:20px}.commitments{padding:22px 18px}.section-heading{align-items:flex-start}.small-note{display:none}.chip{font-size:13px;padding:10px 12px;gap:10px}.options{gap:8px}.composer{padding:18px}.composer-bottom{align-items:flex-end}.composer-bottom>span{font-size:11px}.primary{padding:12px;font-size:13px}.primary span{margin-left:8px}.stats{grid-template-columns:1fr;gap:10px}.stats article{padding:18px;display:grid;grid-template-columns:1fr 1fr;align-items:center}.stats strong{font-size:25px;text-align:right;margin:0;grid-column:2;grid-row:1/3}.overview{grid-template-columns:1fr}.panel{padding:20px}.investments h2{font-size:24px}footer{font-size:11px}.donut-layout{gap:18px}}

/* Keep the initial monthly planner within a typical laptop viewport. */
.brand-lockup{display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.brand-tagline{font-size:9px;letter-spacing:1px;font-weight:650;color:var(--green)}
header{height:88px}
.intro{padding:22px 0 16px}
h1{font-size:42px;margin:8px 0 12px}
.intro p{font-size:14px;line-height:1.6}
.steps{margin:8px 0 22px}
.commitments{padding:20px 24px}
.options{margin-top:18px;gap:8px}
.chip{padding:8px 13px}
.hint{margin-top:16px}
.composer{margin-top:18px;padding:15px 20px}
.composer textarea{min-height:65px;height:65px;margin:6px 0}
.privacy{margin:12px 0 20px}
@media(min-width:701px) and (max-height:750px){
 header{height:76px}
 .intro{padding:12px 0 10px}
 h1{font-size:36px;margin:5px 0 8px}
 .steps{margin:5px 0 14px}
 .commitments{padding:16px 22px}
 .options{margin-top:14px}
 .hint{margin-top:12px}
 .composer{margin-top:14px}
}
@media(max-width:700px){
 header{height:auto;min-height:86px;padding:14px 20px;flex-wrap:wrap;gap:10px 18px}
 .brand-lockup{flex-shrink:1}
 .brand-tagline{font-size:9px;letter-spacing:.5px}
 .header-caption{max-width:none}
 .intro{padding:22px 0 16px}
 h1{font-size:32px}
 .intro p{font-size:14px}
 .commitments{padding:20px 16px}
 .composer{padding:16px}
}

.buffer-summary{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 22px}.buffer-summary article{background:#f7f8f6;border:1px solid var(--line);border-radius:13px;padding:18px 24px}.buffer-summary span{display:block;font-size:14px;color:#647569}.buffer-summary strong{display:block;font-size:26px;margin-top:10px;color:var(--green)}.buffer-color{background:#d0ab64}@media(max-width:700px){.buffer-summary{grid-template-columns:1fr;gap:10px}.buffer-summary article{padding:18px}}

.chart-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:8px 0 16px}.chart-controls label{font-size:14px;font-weight:600}.chart-controls select{margin-left:10px;padding:8px 12px;border:1px solid #cfd9cf;border-radius:8px;background:white;color:#253b35}.chart-controls>span{font-size:12px;color:#64755f}.projection-chart{overflow-x:auto}.projection-chart svg{min-width:900px}

.secondary{padding:13px 15px;border:1px solid #cfd9cf;border-radius:9px;background:white;color:#52695b;font-size:14px;cursor:pointer}.secondary:hover{background:#f0f5ef}.input-actions{display:flex;gap:10px;align-items:center}.result-actions{display:flex;justify-content:space-between;align-items:center;gap:16px}.result-actions h2{margin-bottom:0}.primary:disabled{opacity:.6;cursor:default}#save-status{font-size:13px;color:var(--green)}#save-status:empty{display:none}.saved-sidebar{position:absolute;top:112px;left:22px;width:195px;padding:16px 12px;border:1px solid var(--line);border-radius:12px;background:#f7f8f6}.saved-sidebar h2{font-size:15px;letter-spacing:0}.saved-sidebar p,.saved-sidebar small{font-size:12px;color:#7c887f;line-height:1.6}.saved-sidebar small{display:block;margin-top:16px}.saved-plan{display:block;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:8px;padding:12px 8px;color:#344c3d;margin-top:6px}.saved-plan:hover,.saved-plan[aria-current]{background:#e6eee5;border-color:#cddccc}.saved-plan strong{display:block;font-size:13px}.saved-plan span{display:block;font-size:12px;margin-top:5px;color:#647569}@media(min-width:1300px){main{margin-left:235px;margin-right:auto;max-width:calc(100% - 260px)}}@media(max-width:1299px){.saved-sidebar{position:static;width:auto;max-width:1048px;margin:16px 36px 0;padding:12px 16px}.saved-sidebar h2{display:inline-block;margin:0 15px 0 0}.saved-sidebar p{display:inline}.saved-sidebar small{display:inline-block;margin:0 0 0 12px}.saved-sidebar nav{display:flex;gap:8px;flex-wrap:wrap}.saved-plan{width:auto}.saved-sidebar:has(.saved-plan) small{margin-top:8px}}@media(max-width:700px){.saved-sidebar{margin:14px 18px 0}.composer-bottom{flex-wrap:wrap}.input-actions{width:100%;justify-content:flex-end}.result-actions{align-items:flex-start;flex-direction:column}.saved-sidebar small{margin-left:0;display:block}.saved-sidebar p{display:block}}