@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap");.spread-calc{--navy:#1F6E8C;--navy-2:#2A86A6;--blue:#2E97C0;--blue-soft:#E8F5FA;--cyan:#74C0E1;--ink:#13243b;--muted:#6b7c93;--line:#e6ecf3;--bg:#f3f6fb;--green:#1fb573;--amber:#f0a13b;--red:#e25563;--card:#ffffff;--shadow:0 10px 30px rgba(31,110,140,0.1);--shadow-sm:0 4px 14px rgba(31,110,140,0.08);--radius:18px;font-family:Heebo,system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;justify-content:center}.spread-calc *{box-sizing:border-box}.spread-calc .app{width:100%;max-width:480px;min-height:100vh;background:linear-gradient(180deg,#fbfdff 0,var(--bg) 100%);position:relative;display:flex;flex-direction:column;box-shadow:0 0 60px rgba(31,110,140,.08)}.spread-calc .topbar{justify-content:space-between;padding:16px 18px 10px}.spread-calc .brand,.spread-calc .topbar{display:flex;align-items:center}.spread-calc .brand .logo-img{height:50px;width:auto;display:block;max-width:70vw}.spread-calc .progress{padding:4px 18px 14px}.spread-calc .progress .track{height:6px;background:var(--line);border-radius:99px;overflow:hidden}.spread-calc .progress .fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:99px;transition:width .4s ease}.spread-calc .progress .label{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--muted)}.spread-calc .screens{flex:1;position:relative}.spread-calc .screen{display:none;padding:6px 18px 120px;animation:calc-fade .35s ease}.spread-calc .screen.active{display:block}@keyframes calc-fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.spread-calc h1.title{font-size:23px;line-height:1.3;margin:14px 0 8px;color:var(--navy);font-weight:800}.spread-calc .sub{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 8px}.spread-calc .step-h{font-size:18px;font-weight:700;color:var(--navy);margin:8px 0 2px}.spread-calc .step-k{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.4px}.spread-calc .field{margin:14px 0}.spread-calc .field label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}.spread-calc .field .hint-i{width:16px;height:16px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:help;flex:none}.spread-calc .input-wrap{position:relative;display:flex;align-items:center}.spread-calc .input-wrap .unit{position:absolute;left:14px;color:var(--muted);font-size:13px;pointer-events:none}.spread-calc .field input[type=email],.spread-calc .field input[type=number],.spread-calc .field input[type=tel],.spread-calc .field input[type=text]{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:13px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;transition:.15s;outline:none}.spread-calc .field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}.spread-calc .field .pad-unit{padding-left:34px}.spread-calc .choices{display:flex;flex-wrap:wrap;gap:8px}.spread-calc .choices button{flex:1 1 auto;min-width:60px;padding:11px 10px;border:1.5px solid var(--line);background:#fff;border-radius:12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s}.spread-calc .choices button:hover{border-color:var(--blue)}.spread-calc .choices button.sel{background:var(--navy);border-color:var(--navy);color:#fff}.spread-calc .q{margin:18px 0;padding-bottom:16px;border-bottom:1px solid var(--line)}.spread-calc .q:last-of-type{border-bottom:none}.spread-calc .q .qt{font-size:14px;font-weight:600;margin-bottom:10px;line-height:1.5}.spread-calc .q .qs{font-size:11.5px;color:var(--muted);margin-bottom:8px}.spread-calc .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px;margin:14px 0}.spread-calc .metric-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px}.spread-calc .metric-tag.cons{background:#e7f7ef;color:var(--green)}.spread-calc .metric-tag.reas{background:#fff3e2;color:var(--amber)}.spread-calc .metric-tag.high{background:#fdeaed;color:var(--red)}.spread-calc .kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.spread-calc .kpi{background:#fff;border-radius:16px;padding:15px 14px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}.spread-calc .kpi .k-l{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;line-height:1.3}.spread-calc .kpi .k-v{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1}.spread-calc .kpi .k-s{font-size:11px;color:var(--muted);margin-top:3px}.spread-calc .kpi.feat{background:linear-gradient(135deg,var(--navy),var(--navy-2));border:none;color:#fff;grid-column:1/-1}.spread-calc .kpi.feat .k-l{color:#bcd3f2}.spread-calc .kpi.feat .k-v{color:#fff;font-size:30px}.spread-calc .kpi.feat .k-s{color:#cfe0f7}.spread-calc .kpi.good .k-v{color:var(--green)}.spread-calc .footer{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(243,246,251,0),var(--bg) 26%);padding:14px 18px calc(16px + env(safe-area-inset-bottom));display:flex;gap:10px}.spread-calc .btn{flex:1;border:none;border-radius:14px;padding:15px;font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;transition:.15s}.spread-calc .btn-primary{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;box-shadow:0 8px 20px rgba(46,151,192,.32)}.spread-calc .btn-primary:hover{filter:brightness(1.05)}.spread-calc .btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.spread-calc .btn-ghost{flex:0 0 auto;background:#fff;color:var(--navy);border:1.5px solid var(--line);min-width:54px;font-size:18px}.spread-calc .hero-ill{margin:18px auto 6px;width:100%;height:170px;border-radius:20px;background:linear-gradient(135deg,var(--navy) 0,var(--blue) 100%);position:relative;overflow:hidden;box-shadow:var(--shadow)}.spread-calc .hero-ill .coin{position:absolute;border-radius:50%;opacity:.18;background:#fff}.spread-calc .hero-ill .house{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:64px}.spread-calc .feat-list{margin:14px 0;display:flex;flex-direction:column;gap:10px}.spread-calc .feat-list .row{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:#33485f}.spread-calc .feat-list .ic{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-size:17px;flex:none}.spread-calc .feat-list .ic,.spread-calc .proc{display:flex;align-items:center;justify-content:center}.spread-calc .proc{flex-direction:column;text-align:center;padding-top:60px}.spread-calc .spinner{width:78px;height:78px;border-radius:50%;border:7px solid var(--blue-soft);border-top-color:var(--blue);animation:calc-spin 1s linear infinite;margin-bottom:24px}@keyframes calc-spin{to{transform:rotate(1turn)}}.spread-calc .proc-steps{margin-top:22px;text-align:right;width:100%;max-width:300px}.spread-calc .proc-steps .ps{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--muted);font-size:13.5px;transition:.3s}.spread-calc .proc-steps .ps.done{color:var(--ink)}.spread-calc .proc-steps .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}.spread-calc .proc-steps .ps.done .dot{background:var(--green);border-color:var(--green);color:#fff}.spread-calc .explain{font-size:12.5px;color:var(--muted);line-height:1.65;background:var(--blue-soft);border-radius:14px;padding:13px;margin:14px 0}.spread-calc .chart-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);padding:14px 12px 10px;margin:14px 0;border:1px solid var(--line)}.spread-calc .chart-card h3{margin:0 0 6px;font-size:14px;color:var(--navy);font-weight:700}.spread-calc .chart-card .ct-sub{font-size:11px;color:var(--muted);margin:0 0 8px}.spread-calc .chart-box{position:relative;height:200px}.spread-calc .cmp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:4px}.spread-calc .cmp-item{text-align:center;min-width:0}.spread-calc .cmp-box canvas{max-width:100%}.spread-calc .cmp-t{font-size:11.5px;font-weight:700;color:var(--navy);margin-bottom:4px}.spread-calc .cmp-box{position:relative;height:130px}.spread-calc .cmp-legend{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:11px;color:var(--muted)}.spread-calc .cmp-legend span{display:flex;align-items:center;gap:6px}.spread-calc .cmp-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}.spread-calc .cta-wrap{background:linear-gradient(135deg,var(--navy),var(--navy-2));border-radius:20px;padding:22px;color:#fff;margin:14px 0;box-shadow:var(--shadow)}.spread-calc .cta-wrap h2{margin:0 0 8px;font-size:20px;font-weight:800}.spread-calc .cta-wrap p{margin:0 0 14px;font-size:13.5px;color:#cfe0f7;line-height:1.6}.spread-calc .cta-wrap input{width:100%;padding:13px 14px;border:none;border-radius:12px;margin-bottom:10px;font-family:inherit;font-size:15px;outline:none;color:var(--ink);background:#fff;direction:rtl;text-align:right}.spread-calc .cta-wrap input::-moz-placeholder{color:#94a3b8;opacity:1}.spread-calc .cta-wrap input::placeholder{color:#94a3b8;opacity:1}.spread-calc .cta-wrap input:-webkit-autofill,.spread-calc .cta-wrap input:-webkit-autofill:focus,.spread-calc .cta-wrap input:-webkit-autofill:hover{-webkit-text-fill-color:var(--ink);box-shadow:inset 0 0 0 1000px #fff;caret-color:var(--ink)}.spread-calc .cta-wrap .btn-cta{width:100%;background:#fff;color:var(--navy);border:none;border-radius:13px;padding:15px;font-weight:800;font-size:15.5px;cursor:pointer}.spread-calc .cta-wrap .btn-cta:disabled{opacity:.55;cursor:not-allowed}.spread-calc .num-note{font-size:11px;color:var(--muted);margin-top:5px}.spread-calc .disclaimer{font-size:10.5px;color:#9aa8b9;text-align:center;padding:0 24px 8px;line-height:1.5}.spread-calc-tip{position:fixed;background:#13243b;color:#fff;font-family:Heebo,system-ui,Arial,sans-serif;direction:rtl;font-size:12px;line-height:1.5;padding:9px 12px;border-radius:10px;max-width:240px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}