.roi-page{--bg:#0d0d12;--surface:#16161f;--surface2:#1e1e2a;--border:hsla(0,0%,100%,.07);--text:#f0f0f5;--muted:#8888a0;--green:#22c78a;--blue:#5b8af5;--orange:#f5a623;--red:#f56060;--purple:#a882f5;--accent:#7c5af5;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif}.roi-header{background:linear-gradient(135deg,#0d0d12,#1a1040 50%,#0d1a2a);border-bottom:1px solid var(--border);padding:60px 24px 48px;text-align:center;position:relative;overflow:hidden}.roi-header:before{content:"";position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:500px;height:300px;background:radial-gradient(ellipse,rgba(124,90,245,.2) 0,transparent 70%);pointer-events:none}.roi-header-inner{position:relative;max-width:700px;margin:0 auto}.roi-badge{display:inline-block;background:rgba(124,90,245,.2);border:1px solid rgba(124,90,245,.4);color:#b8a0f8;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:100px;margin-bottom:20px}.roi-header h1{font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.15;margin:0 0 16px;background:linear-gradient(135deg,#fff,#c0b0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.roi-header p{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:28px}.period-toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:4px;gap:4px}.period-toggle button{background:none;border:none;color:var(--muted);font-size:14px;font-weight:500;padding:8px 20px;border-radius:100px;cursor:pointer;transition:all .2s}.period-toggle button.active{background:var(--accent);color:#fff}.roi-body{max-width:1200px;margin:0 auto;padding:40px 24px 80px;display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}@media (max-width:900px){.roi-body{grid-template-columns:1fr}.results-sticky{position:static!important}}.roi-inputs-col{display:flex;flex-direction:column;gap:20px}.roi-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px}.roi-card h2{font-size:20px;font-weight:700;margin:0 0 6px}.card-hint{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.5}.field-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.field-group:last-child{margin-bottom:0}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.field-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.field-group input,.field-group select{background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:15px;padding:12px 14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box}.field-group input::-moz-placeholder{color:#44445a}.field-group input::placeholder{color:#44445a}.field-group input:focus,.field-group select:focus{border-color:var(--accent)}.field-group select option{background:var(--surface2)}.input-with-prefix{position:relative}.input-with-prefix .prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none}.input-with-prefix input{padding-left:30px}.input-with-suffix{position:relative}.input-with-suffix .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none}.input-with-suffix input{padding-right:36px}.metric-pill{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:hsla(0,0%,100%,.04);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-top:4px}.pill-label{font-size:13px;color:var(--muted)}.pill-value{font-size:18px;font-weight:700}.pill-suffix{font-size:13px;color:var(--muted)}.accent-green{color:var(--green)}.accent-blue{color:var(--blue)}.accent-orange{color:var(--orange)}.accent-red{color:var(--red)}.results-sticky{position:sticky;top:24px}.results-placeholder{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:60px 32px;text-align:center}.placeholder-icon{font-size:48px;margin-bottom:16px}.results-placeholder p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}.results-header{margin-bottom:24px}.period-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(124,90,245,.15);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:10px}.results-header h3{font-size:18px;font-weight:700;margin:0;color:var(--muted)}.results-hero{background:linear-gradient(135deg,rgba(124,90,245,.2),rgba(34,199,138,.1));border:1px solid rgba(124,90,245,.3);border-radius:16px;padding:28px;text-align:center;margin-bottom:20px}.hero-label{font-size:13px;color:var(--muted);margin-bottom:8px}.hero-value{font-size:52px;font-weight:800;background:linear-gradient(135deg,#22c78a,#7c5af5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}.hero-sub{font-size:13px;color:var(--muted);margin-top:6px}.roi-breakdown{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px}.breakdown-row{display:flex;align-items:center;gap:10px;padding:8px 0}.breakdown-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.breakdown-dot.gp{background:var(--green)}.breakdown-dot.labour{background:var(--blue)}.breakdown-dot.wastage{background:var(--orange)}.breakdown-dot.noshow{background:var(--purple)}.breakdown-dot.cost{background:var(--red);opacity:.7}.breakdown-label{flex:1;font-size:14px;color:var(--muted)}.breakdown-val{font-size:15px;font-weight:600}.breakdown-val.cost{color:var(--red)}.breakdown-divider{height:1px;background:var(--border);margin:8px 0}.cost-row .breakdown-label{color:rgba(245,96,96,.8)}.net-roi-block{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:16px}.net-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:15px}.net-row span:first-child{color:var(--muted)}.net-row .positive{color:var(--green);font-weight:700}.net-row .negative{color:var(--red);font-weight:700}.results-badge{background:linear-gradient(135deg,rgba(34,199,138,.15),rgba(124,90,245,.15));border:1px solid rgba(34,199,138,.3);border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;color:var(--green);text-align:center;margin-bottom:16px}.results-disclaimer{font-size:11px;color:#445;line-height:1.5;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}