.ss-calculator { --ss-calculator-ink:#111111; --ss-calculator-muted:#505050; --ss-calculator-gold:#c89420; --ss-calculator-gold-deep:#9b6b10; --ss-calculator-gold-pale:#fbf3de; --ss-calculator-line:#e9e2d5; --ss-calculator-paper:#fff; --ss-calculator-soft:#f7f7f5; --ss-calculator-navy:#102742; color:var(--ss-calculator-ink); background:var(--ss-calculator-paper); font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; line-height:1.75; }
.ss-calculator *, .ss-calculator *::before, .ss-calculator *::after { box-sizing:border-box; }
.ss-calculator-shell { width:min(100% - 32px,1100px); margin-inline:auto; }
.ss-calculator-hero { padding:clamp(52px,8vw,100px) 0 42px; border-bottom:1px solid var(--ss-calculator-line); background:linear-gradient(110deg,#fbfaf6 0%,#fff 62%); }
.ss-calculator-eyebrow { margin:0 0 9px; color:var(--ss-calculator-gold-deep); font-size:13px; font-weight:800; }
.ss-calculator h1,.ss-calculator h2,.ss-calculator h3,.ss-calculator strong,.ss-calculator legend { font-family:Cairo,"IBM Plex Sans Arabic",sans-serif; }
.ss-calculator h1 { max-width:780px; margin:0; font-size:clamp(34px,5vw,58px); line-height:1.32; font-weight:900; letter-spacing:0; }
.ss-calculator-hero-title { margin:13px 0 0; color:var(--ss-calculator-gold-deep); font-family:Cairo,"IBM Plex Sans Arabic",sans-serif; font-size:clamp(19px,2.4vw,27px); font-weight:800; line-height:1.55; }
.ss-calculator-lead { max-width:720px; margin:14px 0 0; color:#444; font-size:16px; font-weight:600; }
.ss-calculator-privacy-note { max-width:760px; margin-top:25px; padding:14px 17px; border-right:4px solid var(--ss-calculator-gold); background:var(--ss-calculator-gold-pale); color:#69572f; font-size:13px; font-weight:600; }
.ss-calculator-workspace { padding-block:clamp(36px,6vw,74px); }
.ss-calculator-form { display:grid; gap:18px; }
.ss-calculator-disclaimer,.ss-calculator-result-note { margin:0; color:var(--ss-calculator-muted); font-size:13px; font-weight:600; }
.ss-calculator-form-status { min-height:0; color:#9e2e1d; font-size:14px; font-weight:700; }
.ss-calculator-form-status:not(:empty) { min-height:28px; padding:7px 12px; background:#fff2ee; border-right:3px solid #d65a44; }
.ss-calculator-step { min-width:0; margin:0; padding:clamp(20px,3vw,30px); border:1px solid var(--ss-calculator-line); background:#fff; }
.ss-calculator-step legend { padding-inline:8px; color:var(--ss-calculator-ink); font-size:clamp(20px,2.4vw,26px); font-weight:900; }
.ss-calculator-step legend span { display:inline-grid; width:29px; height:29px; margin-left:8px; place-items:center; background:var(--ss-calculator-gold); color:#fff; font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; font-size:13px; border-radius:50%; }
.ss-calculator-step > p { margin:0 0 21px; color:var(--ss-calculator-muted); font-size:14px; font-weight:600; }
.ss-calculator-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.ss-calculator-field { display:grid; gap:7px; min-width:0; color:#292929; font-size:14px; font-weight:700; }
.ss-calculator-field small { color:var(--ss-calculator-muted); font-size:11px; font-weight:600; }
.ss-calculator-field input,.ss-calculator-field select,.ss-calculator-newsletter input { width:100%; min-width:0; min-height:48px; border:1px solid #d9d2c7; border-radius:2px; padding:10px 12px; background:#fff; color:var(--ss-calculator-ink); font:inherit; font-size:16px; outline:none; transition:border-color .18s,box-shadow .18s; }
.ss-calculator-field input:focus,.ss-calculator-field select:focus,.ss-calculator-newsletter input:focus { border-color:var(--ss-calculator-gold); box-shadow:0 0 0 3px #c8942022; }
.ss-calculator-field-wide { grid-column:span 2; }
.ss-calculator-live-total { display:flex; justify-content:space-between; gap:18px; margin-top:20px; padding-top:15px; border-top:1px solid var(--ss-calculator-line); color:var(--ss-calculator-muted); font-size:14px; font-weight:700; }
.ss-calculator-live-total strong { color:var(--ss-calculator-gold-deep); font-size:18px; }
.ss-calculator-form-actions { display:flex; flex-wrap:wrap; gap:11px; padding-top:5px; }
.ss-calculator-button { min-height:48px; border:1px solid transparent; padding:10px 18px; border-radius:2px; font:700 14px "IBM Plex Sans Arabic",Tahoma,sans-serif; cursor:pointer; transition:transform .18s,background .18s,border-color .18s; }
.ss-calculator-button:hover { transform:translateY(-2px); }
.ss-calculator-button:focus-visible,.ss-calculator-text-action:focus-visible { outline:3px solid #c8942080; outline-offset:3px; }
.ss-calculator-button-primary { background:var(--ss-calculator-ink); color:#fff; }
.ss-calculator-button-primary:hover { background:var(--ss-calculator-gold-deep); }
.ss-calculator-button-quiet { border-color:var(--ss-calculator-ink); background:#fff; color:var(--ss-calculator-ink); }
.ss-calculator-button-quiet:hover { background:var(--ss-calculator-gold-pale); border-color:var(--ss-calculator-gold); }
.ss-calculator-results { margin-top:48px; padding-top:42px; border-top:1px solid var(--ss-calculator-line); }
.ss-calculator-result-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ss-calculator-result-heading h2 { margin:0; font-size:clamp(28px,4vw,43px); line-height:1.35; font-weight:900; }
.ss-calculator-text-action { border:0; border-bottom:1px solid currentColor; padding:0 0 2px; background:transparent; color:var(--ss-calculator-gold-deep); font:700 14px "IBM Plex Sans Arabic",Tahoma,sans-serif; cursor:pointer; white-space:nowrap; }
.ss-calculator-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ss-calculator-summary-item { min-height:104px; padding:17px; border:1px solid var(--ss-calculator-line); background:#fff; }
.ss-calculator-summary-item span { display:block; color:var(--ss-calculator-muted); font-size:12px; font-weight:700; }
.ss-calculator-summary-item strong { display:block; margin-top:7px; color:var(--ss-calculator-ink); font-size:22px; line-height:1.3; overflow-wrap:anywhere; }
.ss-calculator-summary-item.is-negative strong { color:#b4412b; }.ss-calculator-summary-item.is-positive strong { color:#28724c; }
.ss-calculator-status-card { margin-top:18px; padding:clamp(20px,3vw,30px); border-right:5px solid var(--ss-calculator-gold); background:var(--ss-calculator-gold-pale); }
.ss-calculator-status-card[data-state="deficit"] { border-color:#c7543e; background:#fff4f0; }.ss-calculator-status-card[data-state="strong"] { border-color:#39835d; background:#f1faf5; }
.ss-calculator-status-card h3 { margin:0 0 7px; font-size:24px; line-height:1.45; }.ss-calculator-status-card p { margin:0; color:#51472f; font-size:15px; font-weight:600; }.ss-calculator-status-card[data-state="deficit"] p { color:#7f3629; }.ss-calculator-status-card[data-state="strong"] p { color:#245b40; }
.ss-calculator-breakdown,.ss-calculator-allocation,.ss-calculator-opportunity,.ss-calculator-next-step { margin-top:20px; padding:clamp(20px,3vw,30px); background:var(--ss-calculator-soft); }
.ss-calculator-breakdown h3,.ss-calculator-allocation h3,.ss-calculator-opportunity h3,.ss-calculator-next-step h3 { margin:0; font-size:23px; line-height:1.45; }.ss-calculator-breakdown > p,.ss-calculator-allocation > p,.ss-calculator-opportunity > p,.ss-calculator-next-step > p { margin:5px 0 0; color:var(--ss-calculator-muted); font-size:14px; font-weight:600; }
.ss-calculator-bar-row { display:grid; grid-template-columns:minmax(115px,.65fr) minmax(0,2fr) auto; gap:12px; align-items:center; margin-top:15px; font-size:13px; font-weight:700; }.ss-calculator-bar { height:11px; overflow:hidden; background:#e4e4e1; border-radius:999px; }.ss-calculator-bar b { display:block; width:0; height:100%; background:var(--ss-calculator-gold); border-radius:inherit; }.ss-calculator-bar-row[data-tone="debt"] b { background:#b27c25; }.ss-calculator-bar-row[data-tone="discretionary"] b { background:#507996; }.ss-calculator-bar-row[data-tone="surplus"] b { background:#3d8a64; }.ss-calculator-bar-row[data-tone="deficit"] b { background:#c7543e; }
.ss-calculator-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }.ss-calculator-plan-card { padding:20px; border-top:4px solid var(--ss-calculator-gold); background:#fff; border-left:1px solid var(--ss-calculator-line); border-right:1px solid var(--ss-calculator-line); border-bottom:1px solid var(--ss-calculator-line); }.ss-calculator-plan-card h3 { margin:0 0 8px; font-size:18px; line-height:1.5; }.ss-calculator-plan-card p { margin:0; color:var(--ss-calculator-muted); font-size:13px; font-weight:600; }.ss-calculator-plan-card strong { color:var(--ss-calculator-gold-deep); }
.ss-calculator-allocation { background:var(--ss-calculator-navy); color:#fff; }.ss-calculator-allocation > p { color:#d8e0e9; }.ss-calculator-allocation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }.ss-calculator-allocation-item { padding:15px; border:1px solid #ffffff2b; background:#ffffff0b; }.ss-calculator-allocation-item span { display:block; color:#d8e0e9; font-size:12px; font-weight:600; }.ss-calculator-allocation-item strong { display:block; margin-top:5px; color:#edc25d; font-size:21px; }.ss-calculator-allocation-item small { display:block; color:#d8e0e9; font-size:11px; }
.ss-calculator-opportunity { border-right:4px solid var(--ss-calculator-gold); background:#fffdf8; }.ss-calculator-next-step { background:#fff; border:1px solid var(--ss-calculator-line); }.ss-calculator-recommendations { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:17px; }.ss-calculator-recommendation { padding:16px; border:1px solid var(--ss-calculator-line); background:var(--ss-calculator-soft); }.ss-calculator-recommendation strong { display:block; font-size:17px; }.ss-calculator-recommendation p { margin:5px 0 0; color:var(--ss-calculator-muted); font-size:12px; font-weight:600; }.ss-calculator-recommendation [data-product] { display:inline-block; margin-top:10px; color:var(--ss-calculator-gold-deep); font-size:12px; font-weight:800; }
.ss-calculator-newsletter { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.7fr); gap:24px; align-items:center; margin-top:20px; padding:clamp(20px,3vw,30px); border-right:4px solid var(--ss-calculator-gold); background:var(--ss-calculator-gold-pale); }.ss-calculator-newsletter h3 { margin:0; font-size:22px; line-height:1.5; }.ss-calculator-newsletter p { margin:5px 0 0; color:#665a40; font-size:13px; font-weight:600; }.ss-calculator-newsletter form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.ss-calculator-newsletter form span { grid-column:1 / -1; color:#665a40; font-size:12px; font-weight:700; }.ss-calculator-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.ss-calculator-result-note { margin-top:16px; }
@media (max-width:720px) { .ss-calculator-field-grid,.ss-calculator-summary-grid,.ss-calculator-plan-grid,.ss-calculator-allocation-grid,.ss-calculator-newsletter { grid-template-columns:1fr; }.ss-calculator-field-wide { grid-column:auto; }.ss-calculator-result-heading { align-items:start; flex-direction:column; }.ss-calculator-newsletter form { grid-template-columns:1fr; }.ss-calculator-newsletter .ss-calculator-button { width:100%; }.ss-calculator-bar-row { grid-template-columns:1fr auto; gap:5px 12px; }.ss-calculator-bar { grid-column:1 / -1; grid-row:2; }.ss-calculator-bar-row b { min-width:0; } }
@media (max-width:390px) { .ss-calculator-shell { width:min(100% - 24px,1100px); }.ss-calculator-step,.ss-calculator-breakdown,.ss-calculator-allocation,.ss-calculator-opportunity,.ss-calculator-next-step { padding:18px; }.ss-calculator-form-actions .ss-calculator-button { width:100%; }.ss-calculator-live-total { align-items:start; flex-direction:column; gap:3px; } }