.sg-roi { --roi-ink:#173e35; --roi-green:#087f5b; padding:18px 0 28px; color:var(--roi-ink); font-family:Arial,sans-serif; }
.sg-roi .sg-roi-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 34px; border-radius:18px; background:linear-gradient(115deg,#103d34,#147c62); color:white; margin-bottom:20px; box-shadow:0 10px 28px #123d3417; }
.sg-roi .sg-roi-eyebrow { font-size:12px; font-weight:700; letter-spacing:2px; color:#9ce8ca; }
.sg-roi .sg-roi-hero h2 { font-size:30px; font-weight:750; margin:12px 0 8px; color:white; }
.sg-roi .sg-roi-hero p { font-size:16px; color:#d4eee5; margin:0; }
.sg-roi .sg-roi-horizon { border:1px solid #ffffff42; border-radius:30px; padding:10px 18px; font-size:13px; font-weight:700; white-space:nowrap; }
.sg-roi .sg-roi-workspace { display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; align-items:stretch; }
.sg-roi .sg-roi-panel { background:#fff; border:1px solid #dae8e1; border-radius:14px; padding:22px; box-shadow:0 3px 12px #173e3505; }
.sg-roi h3 { font-size:18px; font-weight:700; margin:0 0 12px; }
.sg-roi .sg-roi-muted { color:#647b73; font-size:13px; line-height:1.6; margin:12px 0 0; }
.sg-roi .sg-roi-fields { margin-top:20px; display:grid; gap:16px; }
.sg-roi .sg-roi-field label,.sg-roi .sg-roi-uplift label { display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.sg-roi .sg-roi-input { display:flex; border:1px solid #cbded4; border-radius:8px; align-items:center; background:#f8fbf9; overflow:hidden; }
.sg-roi .sg-roi-input:focus-within { outline:2px solid #43b68f; outline-offset:2px; }
.sg-roi .sg-roi-input input { font:600 17px Arial,sans-serif; width:100%; min-width:0; padding:11px 12px; border:0; outline:0; background:transparent; color:#173e35; }
.sg-roi .sg-roi-input span { font-size:12px; white-space:nowrap; color:#657d72; padding-right:10px; }
.sg-roi .sg-roi-uplift { background:#eaf8f0; padding:18px 12px 24px; border-radius:10px; margin:22px 0; }
.sg-roi .sg-roi-uplift strong { display:block; font-size:34px; color:#087f5b; margin:0 0 15px; }
.sg-roi .rc-slider-track { background:#12956a; }
.sg-roi .rc-slider-handle { border-color:#12956a; }
.sg-roi .sg-roi-assumptions { border-top:1px solid #e0ebe4; padding-top:16px; }
.sg-roi .sg-roi-assumptions summary { cursor:pointer; font-size:14px; font-weight:700; margin-bottom:16px; }
.sg-roi .sg-roi-assumptions .sg-roi-field { margin-top:14px; }
.sg-roi .sg-roi-results { min-width:0; }
.sg-roi .sg-roi-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.sg-roi .sg-roi-kpi { background:white; border:1px solid #dce7e1; border-radius:12px; padding:20px 16px; display:flex; flex-direction:column; gap:12px; }
.sg-roi .sg-roi-kpi>span { font-size:13px; font-weight:600; color:#597467; }
.sg-roi .sg-roi-kpi strong { font-size:clamp(19px,1.6vw,30px); line-height:1.2; color:#173e35; overflow-wrap:anywhere; }
.sg-roi .sg-roi-kpi small { color:#73887e; font-size:12px; line-height:1.5; }
.sg-roi .sg-roi-kpi.is-featured { background:#e5f7ed; border-color:#9cd7b9; }
.sg-roi .sg-roi-kpi.is-featured strong { color:#087f5b; }
.sg-roi .sg-roi-story { display:flex; align-items:center; gap:12px; border-radius:10px; background:#edf5f2; font-size:15px; line-height:1.6; padding:16px 20px; margin:16px 0; }
.sg-roi .sg-roi-story i { font-size:24px; color:#15946c; }
.sg-roi .sg-roi-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.sg-roi .sg-roi-charts>div { min-width:0; border:1px solid #dce7e1; border-radius:14px; overflow:hidden; background:white; }
.sg-roi .sg-roi-table-scroll { overflow:auto; }
.sg-roi .sg-roi-table { width:100%; border-collapse:collapse; font-size:14px; white-space:nowrap; }
.sg-roi .sg-roi-table th,.sg-roi .sg-roi-table td { padding:13px 12px; border-bottom:1px solid #e3ede7; text-align:right; }
.sg-roi .sg-roi-table th:first-child { text-align:left; }
.sg-roi .sg-roi-table thead { background:#f0f6f2; color:#476657; }
.sg-roi .sg-roi-table tbody tr:last-child { font-weight:700; color:#087f5b; background:#f0faf4; }
.sg-roi .sg-roi-disclosure { color:#73877e; font-size:12px; line-height:1.7; max-width:1200px; margin:20px 0 0; }
@media(max-width:1350px) { .sg-roi .sg-roi-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .sg-roi .sg-roi-charts { grid-template-columns:1fr; } }
@media(max-width:850px) { .sg-roi .sg-roi-workspace { grid-template-columns:1fr; } .sg-roi .sg-roi-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .sg-roi .sg-roi-hero { padding:22px; } .sg-roi .sg-roi-horizon { display:none; } .sg-roi .sg-roi-hero h2 { font-size:24px; } }
.sg-roi .sg-roi-hero { min-height:150px; }
.sg-roi .sg-roi-input-panel { border-top:4px solid #12956a; }
.sg-roi .sg-roi-section-title { display:flex; align-items:flex-start; gap:12px; margin:24px 0 12px; }
.sg-roi .sg-roi-section-title h3 { margin:0 0 4px; }
.sg-roi .sg-roi-section-title .sg-roi-muted { margin:0; }
.sg-roi .sg-roi-step { display:grid; place-items:center; flex:0 0 30px; height:30px; border-radius:50%; background:#e5f5ec; color:#087f5b; font-size:13px; font-weight:800; }
.sg-roi .sg-roi-fields.two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sg-roi .sg-roi-kpis { margin-bottom:16px; }
.sg-roi .sg-roi-kpi { box-shadow:0 5px 16px #173e3508; transition:transform .15s,box-shadow .15s; }
.sg-roi .sg-roi-kpi:hover { transform:translateY(-2px); box-shadow:0 9px 22px #173e3514; }
.sg-roi .sg-roi-kpi.is-negative { background:#fff1f0; border-color:#f4b8b3; }
.sg-roi .sg-roi-kpi.is-negative strong { color:#bd3c32; }
.sg-roi .sg-roi-kpi>span { letter-spacing:.06em; }
.sg-roi .sg-roi-livebar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:12px 16px; background:#f0f7f3; border-radius:10px; color:#426356; font-size:14px; }
.sg-roi .sg-roi-live { color:#087f5b; font-size:11px; font-weight:800; letter-spacing:.1em; }
.sg-roi .sg-roi-chart-card { min-width:0; overflow:hidden; border:1px solid #dce7e1; border-radius:14px; background:#fff; box-shadow:0 5px 18px #173e3508; }
.sg-roi .sg-roi-charts { gap:18px; }
.sg-roi .sg-roi-panel h3 { color:#173e35; }
@media(max-width:650px) { .sg-roi .sg-roi-kpis,.sg-roi .sg-roi-fields.two { grid-template-columns:1fr; } .sg-roi .sg-roi-hero { padding:20px; } }
.sg-roi .sg-roi-fields.two { grid-template-columns:minmax(0,1fr); }
.sg-roi .sg-roi-field { display:grid; grid-template-columns:minmax(105px,.9fr) minmax(0,1.1fr); align-items:center; gap:10px; }
.sg-roi .sg-roi-field>label { margin:0; line-height:1.3; }
.sg-roi .sg-roi-input { min-width:0; }
.sg-roi .sg-roi-input input { padding:9px 8px; }
.sg-roi .sg-roi-input span { font-size:11px; padding-right:7px; }
.sg-roi .sg-roi-uplift { display:grid; grid-template-columns:1fr auto; align-items:center; }
.sg-roi .sg-roi-uplift label { margin:0; }
.sg-roi .sg-roi-uplift strong { margin:0; font-size:25px; }
.sg-roi .sg-roi-uplift { width:100%; min-width:0; box-sizing:border-box; padding:20px 18px 30px; }
.sg-roi .sg-roi-uplift>.dash-slider,.sg-roi .sg-roi-uplift>.rc-slider { grid-column:1/-1; width:100% !important; min-width:0; }
.sg-roi .sg-roi-uplift .rc-slider { margin:16px 0 5px; width:100% !important; }
.sg-roi .sg-roi-input-panel { height:100%; display:flex; flex-direction:column; }
.sg-roi .sg-roi-workspace { grid-template-columns:minmax(360px,360px) minmax(0,1fr) !important; align-items:stretch !important; }
.sg-roi .sg-roi-input-panel { align-self:stretch; min-height:100%; box-sizing:border-box; }
.sg-roi .sg-roi-uplift .sg-roi-yield-slider { grid-column:1/-1; display:block; width:100% !important; min-width:100% !important; justify-self:stretch; box-sizing:border-box; }
.sg-roi .sg-roi-uplift .sg-roi-yield-slider .rc-slider { width:100% !important; }
@media(max-width:420px) { .sg-roi .sg-roi-field { grid-template-columns:minmax(90px,.85fr) minmax(0,1.15fr); gap:7px; } }
.sg-roi .sg-roi-table { font-size:15px; }
.sg-roi .sg-roi-table th,.sg-roi .sg-roi-table td { padding:15px 13px; }
.sg-roi .sg-roi-disclosure { font-size:13px; }