:root{--navy:#071a33;--navy2:#102c4e;--teal:#00a69c;--teal-dark:#007a74;--teal-soft:#dff7f4;--gold:#f3c969;--cream:#f8f7f4;--ink:#172033;--muted:#657187;--line:#dce4e7;--white:#fff;--red:#a74632;--amber:#8a6500;--shadow:0 18px 50px rgba(7,26,51,.12)}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;background:linear-gradient(145deg,#eef5f5,#f8f7f4 45%,#e3f3f1);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
.dybs-loader{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--navy);color:#fff;opacity:1;transition:opacity .4s ease,visibility .4s ease}.dybs-loader.is-loaded{opacity:0;visibility:hidden}.loader-compass{width:62px;height:62px;display:grid;place-items:center;border:2px solid var(--teal);border-radius:50%;color:var(--gold);font-size:2rem;animation:loaderCompass 1.6s ease-in-out infinite}.loader-letters{display:flex;gap:9px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.1rem,8vw,3.4rem);font-weight:900;letter-spacing:.08em}.loader-letters span{opacity:.22;transform:translateY(5px);animation:loaderLetter 1.2s ease-in-out infinite}.loader-letters span:nth-child(2){animation-delay:.18s}.loader-letters span:nth-child(3){animation-delay:.36s}.loader-letters span:nth-child(4){animation-delay:.54s}.dybs-loader p{margin:0;color:#d8e4ed;font-size:.88rem;font-weight:750;letter-spacing:.04em}@keyframes loaderLetter{0%,70%,100%{opacity:.22;transform:translateY(5px)}18%,48%{opacity:1;transform:translateY(0);color:var(--teal)}}@keyframes loaderCompass{50%{transform:rotate(45deg);box-shadow:0 0 0 9px rgba(0,166,156,.1)}}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{width:min(1160px,calc(100% - 28px));margin:18px auto;background:rgba(255,255,255,.96);border:1px solid rgba(7,26,51,.1);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.tool-header{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:28px;padding:30px 40px;background:var(--navy);color:#fff}
.brand-logo{width:100%;height:auto;display:block;background:#fff;border-radius:14px;padding:8px}
.eyebrow{margin:0 0 5px;color:var(--teal);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.tool-header .eyebrow{color:var(--gold)}
h1,h2,h3{margin:0;color:var(--navy);font-family:Georgia,"Times New Roman",serif;line-height:1.1}
h1{font-size:clamp(2.2rem,5vw,4rem);color:#fff}
.tool-header p:last-child{margin:8px 0 0;color:#d8e4ed;font-size:1.02rem}
.calculator-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px;padding:24px 24px 0}
.panel{border:1px solid var(--line);border-radius:18px;background:#fff;padding:22px;box-shadow:0 10px 28px rgba(7,26,51,.06)}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.section-heading>div{display:flex;align-items:center;gap:10px}
.section-heading h2{font-size:1.45rem}
.step-number{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:900;font-size:.78rem}
.helper{margin:9px 0 17px;color:var(--muted);font-size:.9rem}
.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.input-grid label,.decision-reflection label{display:flex;flex-direction:column;gap:6px}
.input-grid label>span:first-child,.decision-reflection label>span:first-child{color:var(--navy);font-size:.78rem;font-weight:850}
.budget-inputs .income-field{grid-column:1/-1}
.budget-inputs .income-field>span:first-child{color:var(--teal-dark)}
.money-field,.percent-field{display:grid;align-items:center;border:1px solid #bdcbd0;border-radius:10px;overflow:hidden;background:#fff}
.money-field{grid-template-columns:34px 1fr}.percent-field{grid-template-columns:1fr 38px}
.money-field b,.percent-field b{height:100%;display:grid;place-items:center;background:#edf5f4;color:var(--teal-dark)}
input,select{width:100%;min-width:0;border:1px solid #bdcbd0;border-radius:10px;padding:11px 12px;outline:none;color:var(--ink);background:#fff}
.money-field input,.percent-field input{border:0;border-radius:0}
input:focus,select:focus,.money-field:focus-within,.percent-field:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,156,.12)}
.wide{grid-column:1/-1}
.budget-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.budget-summary span{padding:12px;border-radius:11px;background:#edf3f4;color:var(--muted);font-size:.72rem}
.budget-summary strong{display:block;margin-top:3px;color:var(--navy);font-size:1.05rem}
.budget-summary span:last-child{background:var(--teal-soft)}
.budget-summary span:last-child strong{color:var(--teal-dark)}
.receipt{margin-top:18px;border:1px solid var(--line);border-radius:13px;padding:12px 15px;background:#f9fbfb}
.receipt>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0}
.receipt span{color:var(--muted);font-size:.84rem}.receipt strong{color:var(--navy)}
.receipt .receipt-total{margin-top:5px;padding-top:12px;border-top:2px solid var(--navy);font-size:1.05rem}
.receipt .receipt-total span{color:var(--ink);font-size:1rem}.receipt .receipt-total strong{color:var(--teal-dark)}
.text-button{border:0;background:transparent;color:var(--teal-dark);font-size:.75rem;font-weight:850;text-decoration:underline;padding:4px}
.decision-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin:18px 24px;padding:22px 24px;border-radius:18px;border:1px solid #b9dfdb;background:linear-gradient(115deg,#effbf9,#fff);box-shadow:0 10px 28px rgba(7,26,51,.06)}
.decision-card.caution{border-color:#ead18a;background:linear-gradient(115deg,#fff8dd,#fff)}
.decision-card.stop{border-color:#e4b8ad;background:linear-gradient(115deg,#fdf0ec,#fff)}
.decision-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--teal);color:#fff;font-size:1.6rem;font-weight:900}
.caution .decision-icon{background:#c39312}.stop .decision-icon{background:var(--red)}
.decision-copy h2{font-size:1.65rem}.decision-copy>p:last-child{margin:7px 0 0;color:var(--muted)}
.decision-numbers{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:220px}
.decision-numbers span{padding:10px;border-radius:10px;background:rgba(255,255,255,.75);color:var(--muted);font-size:.68rem}
.decision-numbers strong{display:block;color:var(--navy);font-size:.95rem}
.decision-reflection{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:13px;padding-top:18px;border-top:1px solid rgba(7,26,51,.12)}
.reflection-heading{grid-column:1/-1}.reflection-heading h3{font-family:inherit;font-size:1rem}.reflection-heading p{margin:5px 0 0;color:var(--muted);font-size:.8rem}
.decision-reflection textarea{width:100%;min-height:92px;resize:vertical;border:1px solid #bdcbd0;border-radius:11px;padding:11px 12px;color:var(--ink);background:#fff;font:inherit;line-height:1.45;outline:none}.decision-reflection textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,156,.12)}
.reflection-note{grid-column:1/-1;margin:0;color:var(--muted);font-size:.72rem}
.alternatives{margin:0 24px}.suggestion-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:17px}
.suggestion-card{min-height:125px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#f9fbfb}
.suggestion-card span{font-size:1.25rem}.suggestion-card h3{margin-top:7px;font-family:inherit;font-size:.86rem}.suggestion-card p{margin:5px 0 0;color:var(--muted);font-size:.74rem;line-height:1.4}
.comparison-note{margin:13px 0 0;color:var(--muted);font-size:.76rem}
footer{display:flex;justify-content:space-between;gap:20px;padding:18px 28px;color:var(--muted);font-size:.75rem;background:#fff}footer strong{color:var(--navy)}
@media(max-width:900px){.calculator-grid{grid-template-columns:1fr}.suggestion-grid{grid-template-columns:repeat(2,1fr)}.decision-card{grid-template-columns:auto 1fr}.decision-numbers{grid-column:1/-1}}
@media(max-width:600px){.app-shell{width:100%;margin:0;border-radius:0}.tool-header{grid-template-columns:1fr;padding:24px}.brand-logo{width:160px}.calculator-grid{padding:16px 14px 0}.panel{padding:17px}.input-grid,.budget-summary,.decision-reflection{grid-template-columns:1fr}.budget-inputs .income-field,.wide{grid-column:auto}.decision-card{grid-template-columns:1fr;margin:14px;padding:18px}.decision-icon{width:44px;height:44px}.decision-numbers{grid-column:auto;min-width:0}.alternatives{margin:0 14px}.suggestion-grid{grid-template-columns:1fr}footer{flex-direction:column;padding:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
