/* RESET & BASE – MOBILE FIRST */
.roi-calc,.roi-calc *,.roi-calc *::before,.roi-calc *::after{box-sizing:border-box!important;margin:0!important;padding:0!important}
.roi-calc{
background:#f5f0f0!important;
font-family:system-ui,-apple-system,BlinkMacSystemFont,’Segoe UI’,Roboto,sans-serif!important;
color:#3d1111!important;
padding:16px!important;
line-height:1.6!important;
border-radius:10px!important;
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
-webkit-text-size-adjust:100%!important;
}

/* BLOGGER DROP-CAP KILLER */
.roi-calc h1:first-letter,.roi-calc h2:first-letter,.roi-calc p:first-letter,
.roi-calc span:first-letter,.roi-calc div:first-letter,.roi-calc label:first-letter,
.roi-calc td:first-letter,.roi-calc th:first-letter{
font-size:inherit!important;font-weight:inherit!important;float:none!important;
line-height:inherit!important;margin:0!important;padding:0!important;
display:inline!important;text-transform:none!important;color:inherit!important;
}

/* TYPOGRAPHY – fluid */
.roi-calc h1{
font-size:20px!important;
font-weight:800!important;
color:#3d1111!important;
margin-bottom:6px!important;
display:block!important;
float:none!important;
line-height:1.2!important;
}
.roi-calc .rc-sub{
color:#7a4a4a!important;
font-size:13px!important;
margin-bottom:20px!important;
display:block!important;
line-height:1.5!important;
}
.roi-calc .rc-accent{
background:#5c1a1a!important;
color:#f5f0f0!important;
padding:1px 7px!important;
border-radius:4px!important;
display:inline!important;
}
.roi-calc .rc-badge{
display:inline-block!important;
background:#5c1a1a!important;
color:#f5f0f0!important;
padding:2px 7px!important;
border-radius:10px!important;
font-size:9px!important;
font-weight:700!important;
text-transform:uppercase!important;
vertical-align:middle!important;
margin-left:5px!important;
letter-spacing:.03em!important;
}

/* SECTIONS */
.roi-calc .rc-box{
background:#ffffff!important;
border:2px solid #d4b0b0!important;
border-radius:10px!important;
padding:16px!important;
margin-bottom:14px!important;
display:block!important;
width:100%!important;
}
.roi-calc .rc-box-title{
font-size:10px!important;
font-weight:700!important;
text-transform:uppercase!important;
letter-spacing:.06em!important;
color:#5c1a1a!important;
margin-bottom:14px!important;
display:block!important;
padding-bottom:8px!important;
border-bottom:1px solid #e8d8d8!important;
}

/* FORM – single column mobile-first */
.roi-calc .rc-fields{
display:flex!important;
flex-direction:column!important;
gap:14px!important;
width:100%!important;
}
.roi-calc .rc-field{
display:block!important;
width:100%!important;
}
.roi-calc .rc-label{
font-size:11px!important;
font-weight:700!important;
text-transform:uppercase!important;
letter-spacing:.04em!important;
color:#5c1a1a!important;
margin-bottom:4px!important;
display:block!important;
}
.roi-calc .rc-help{
font-size:10px!important;
color:#9a6e6e!important;
margin-bottom:6px!important;
display:block!important;
font-style:italic!important;
}
.roi-calc .rc-input-wrap{
position:relative!important;
display:block!important;
width:100%!important;
}
.roi-calc .rc-input-wrap .rc-prefix{
position:absolute!important;
left:14px!important;
top:50%!important;
transform:translateY(-50%)!important;
color:#9a6e6e!important;
font-weight:700!important;
font-size:15px!important;
pointer-events:none!important;
z-index:2!important;
}
.roi-calc .rc-input-wrap .rc-suffix{
position:absolute!important;
right:14px!important;
top:50%!important;
transform:translateY(-50%)!important;
color:#9a6e6e!important;
font-weight:700!important;
font-size:15px!important;
pointer-events:none!important;
z-index:2!important;
}
.roi-calc input[type=”number”],.roi-calc select{
width:100%!important;
padding:14px 14px!important;
border:2px solid #d4b0b0!important;
border-radius:8px!important;
font-size:16px!important; /* 16px prevents iOS zoom */
font-weight:600!important;
color:#3d1111!important;
background:#f9f5f5!important;
font-family:inherit!important;
-webkit-appearance:none!important;
-moz-appearance:none!important;
appearance:none!important;
min-height:50px!important;
display:block!important;
transition:border-color .2s,background .2s!important;
}
.roi-calc input[type=”number”]:focus,.roi-calc select:focus{
border-color:#5c1a1a!important;
outline:none!important;
background:#fff!important;
}
.roi-calc .rc-has-prefix input{padding-left:30px!important}
.roi-calc .rc-has-suffix input{padding-right:30px!important}
.roi-calc select{
background-image:url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’14’ height=’14’ fill=’%235c1a1a’%3E%3Cpath d=’M7 10L2 5h10z’/%3E%3C/svg%3E”)!important;
background-repeat:no-repeat!important;
background-position:right 14px center!important;
padding-right:36px!important;
}

/* CALCULATE BUTTON */
.roi-calc .rc-calcbtn{
width:100%!important;
padding:16px!important;
background:#5c1a1a!important;
color:#f5f0f0!important;
border:none!important;
border-radius:10px!important;
font-size:16px!important;
font-weight:700!important;
cursor:pointer!important;
display:block!important;
min-height:52px!important;
-webkit-tap-highlight-color:transparent!important;
touch-action:manipulation!important;
transition:background .15s!important;
text-align:center!important;
margin-top:6px!important;
}
.roi-calc .rc-calcbtn:active{background:#7a2e2e!important}

/* RESULTS */
.roi-calc .rc-results{display:none!important;width:100%!important}
.roi-calc .rc-results.on{display:block!important}

/* METRIC CARDS – stack on mobile */
.roi-calc .rc-metrics{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
margin-bottom:14px!important;
width:100%!important;
}
.roi-calc .rc-metric{
background:#5c1a1a!important;
border-radius:8px!important;
padding:14px!important;
text-align:center!important;
display:block!important;
width:100%!important;
}
.roi-calc .rc-metric.hl{
background:linear-gradient(135deg,#5c1a1a,#8a3535)!important;
border:2px solid #cc5555!important;
}
.roi-calc .rc-metric-label{
font-size:9px!important;
text-transform:uppercase!important;
letter-spacing:.06em!important;
color:#dfc8c8!important;
display:block!important;
margin-bottom:2px!important;
}
.roi-calc .rc-metric-val{
font-size:26px!important;
font-weight:800!important;
color:#ffffff!important;
display:block!important;
font-family:ui-monospace,’SF Mono’,’Cascadia Mono’,monospace!important;
word-break:break-all!important;
}
.roi-calc .rc-metric-note{
font-size:10px!important;
color:#dfc8c8!important;
display:block!important;
margin-top:2px!important;
}

/* VERDICT */
.roi-calc .rc-verdict{
padding:16px!important;
border-radius:8px!important;
margin-bottom:14px!important;
text-align:center!important;
display:block!important;
}
.roi-calc .rc-verdict.good{background:#e8f5e8!important;border:2px solid #4caf50!important}
.roi-calc .rc-verdict.ok{background:#fff8e1!important;border:2px solid #ff9800!important}
.roi-calc .rc-verdict.bad{background:#fde8e8!important;border:2px solid #f44336!important}
.roi-calc .rc-vicon{font-size:28px!important;display:block!important;margin-bottom:6px!important}
.roi-calc .rc-vtxt{font-size:16px!important;font-weight:700!important;display:block!important;color:#3d1111!important}
.roi-calc .rc-vsub{font-size:12px!important;color:#555!important;display:block!important;margin-top:4px!important;line-height:1.4!important}

/* BAR CHART */
.roi-calc .rc-bars{margin-bottom:14px!important;width:100%!important}
.roi-calc .rc-bar-item{margin-bottom:12px!important;display:block!important}
.roi-calc .rc-bar-lbl{
font-size:11px!important;
font-weight:700!important;
color:#5c1a1a!important;
display:block!important;
margin-bottom:4px!important;
}
.roi-calc .rc-bar-track{
width:100%!important;
height:28px!important;
background:#e8d8d8!important;
border-radius:6px!important;
overflow:hidden!important;
display:block!important;
}
.roi-calc .rc-bar-fill{
height:28px!important;
border-radius:6px!important;
display:flex!important;
align-items:center!important;
padding:0 10px!important;
font-size:11px!important;
font-weight:700!important;
color:#fff!important;
transition:width .5s ease!important;
min-width:40px!important;
}
.roi-calc .rc-bar-red{background:#cc5555!important}
.roi-calc .rc-bar-green{background:#4caf50!important}

/* TABLE – scrollable on mobile */
.roi-calc .rc-table-wrap{
width:100%!important;
overflow-x:auto!important;
-webkit-overflow-scrolling:touch!important;
display:block!important;
border-radius:6px!important;
border:1px solid #e8d8d8!important;
}
.roi-calc table{
width:100%!important;
min-width:260px!important;
border-collapse:collapse!important;
}
.roi-calc th{
font-size:10px!important;
text-transform:uppercase!important;
letter-spacing:.04em!important;
color:#9a6e6e!important;
text-align:left!important;
padding:10px 12px!important;
border-bottom:2px solid #d4b0b0!important;
font-weight:700!important;
background:#f9f5f5!important;
}
.roi-calc td{
font-size:13px!important;
padding:10px 12px!important;
border-bottom:1px solid #f0e5e5!important;
color:#3d1111!important;
font-weight:600!important;
}
.roi-calc tr:last-child td{
border-bottom:none!important;
font-weight:800!important;
color:#5c1a1a!important;
background:#f9f5f5!important;
}

/* TIPS */
.roi-calc .rc-tips{
background:#fff!important;
border:2px solid #d4b0b0!important;
border-radius:8px!important;
padding:16px!important;
margin-top:14px!important;
display:block!important;
}
.roi-calc .rc-tips-title{
font-size:10px!important;
font-weight:700!important;
text-transform:uppercase!important;
letter-spacing:.05em!important;
color:#5c1a1a!important;
margin-bottom:12px!important;
display:block!important;
}
.roi-calc .rc-tip{
font-size:12px!important;
color:#3d1111!important;
margin-bottom:10px!important;
padding-left:18px!important;
position:relative!important;
line-height:1.5!important;
display:block!important;
}
.roi-calc .rc-tip:last-child{margin-bottom:0!important}
.roi-calc .rc-tip::before{
content:”2192″!important;
position:absolute!important;
left:0!important;
color:#5c1a1a!important;
font-weight:700!important;
}

/* ACTION BUTTONS */
.roi-calc .rc-actions{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
margin-top:16px!important;
width:100%!important;
}
.roi-calc .rc-abtn{
padding:14px 20px!important;
border-radius:8px!important;
font-size:14px!important;
font-weight:700!important;
cursor:pointer!important;
border:none!important;
display:block!important;
width:100%!important;
text-align:center!important;
min-height:48px!important;
-webkit-tap-highlight-color:transparent!important;
touch-action:manipulation!important;
}
.roi-calc .rc-abtn-primary{background:#5c1a1a!important;color:#f5f0f0!important}
.roi-calc .rc-abtn-primary:active{background:#7a2e2e!important}
.roi-calc .rc-abtn-secondary{background:#fff!important;color:#5c1a1a!important;border:2px solid #d4b0b0!important}
.roi-calc .rc-abtn-secondary:active{border-color:#5c1a1a!important}
.roi-calc .rc-copied{
font-size:12px!important;
color:#2d8a2d!important;
font-weight:700!important;
text-align:center!important;
display:none!important;
margin-top:8px!important;
}

/* BRAND */
.roi-calc .rc-brand{
margin-top:20px!important;
padding-top:12px!important;
border-top:2px solid #d4b0b0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
}
.roi-calc .rc-brand-b{
background:#5c1a1a!important;
color:#f5f0f0!important;
font-weight:800!important;
font-size:10px!important;
padding:2px 5px!important;
border-radius:3px!important;
display:inline-block!important;
}
.roi-calc .rc-brand-t{
color:#5c1a1a!important;
font-weight:700!important;
font-size:12px!important;
display:inline-block!important;
}

/* ========== TABLET (600px+) ========== */
@media(min-width:600px){
.roi-calc{padding:24px!important}
.roi-calc h1{font-size:24px!important}
.roi-calc .rc-box{padding:20px!important}
.roi-calc .rc-fields{
flex-direction:row!important;
flex-wrap:wrap!important;
}
.roi-calc .rc-field{
width:calc(50% – 8px)!important;
flex:0 0 calc(50% – 8px)!important;
}
.roi-calc .rc-metrics{
flex-direction:row!important;
}
.roi-calc .rc-metric{
flex:1!important;
min-width:0!important;
}
.roi-calc .rc-actions{
flex-direction:row!important;
justify-content:center!important;
}
.roi-calc .rc-abtn{
width:auto!important;
min-width:160px!important;
}
}

/* ========== DESKTOP (900px+) ========== */
@media(min-width:900px){
.roi-calc{padding:32px!important;max-width:860px!important;margin:0 auto!important}
.roi-calc h1{font-size:26px!important}
.roi-calc .rc-sub{font-size:14px!important}
.roi-calc .rc-box{padding:24px!important;margin-bottom:18px!important}
.roi-calc .rc-fields{gap:16px!important}
.roi-calc .rc-metric-val{font-size:30px!important}
.roi-calc .rc-bar-track{height:32px!important}
.roi-calc .rc-bar-fill{height:32px!important;font-size:12px!important}
}

/* ========== LARGE DESKTOP (1200px+) ========== */
@media(min-width:1200px){
.roi-calc{max-width:940px!important;padding:40px!important}
}

/* ========== TOUCH DEVICES ========== */
@media(hover:none)and(pointer:coarse){
.roi-calc .rc-calcbtn:hover{background:#5c1a1a!important}
.roi-calc .rc-abtn-primary:hover{background:#5c1a1a!important}
}

/* ========== PRINT ========== */
@media print{
.roi-calc{padding:10px!important;border:none!important;background:#fff!important}
.roi-calc .rc-calcbtn,.roi-calc .rc-actions{display:none!important}
.roi-calc .rc-results{display:block!important}
}

function rcGv(id){var v=parseFloat(document.getElementById(id).value);return isNaN(v)?0:v;}
function rcFmt(n){var a=Math.abs(n);if(a>=1000000)return ‘$’+(n/1000000).toFixed(1)+’M’;if(a>=10000)return ‘$’+(n/1000).toFixed(0)+’K’;if(a>=1000)return ‘$’+(n/1000).toFixed(1)+’K’;return ‘$’+Math.round(n);}

function rcCalc(){
var tc=rcGv(‘rc_toolCost’),sc=rcGv(‘rc_setupCost’),th=rcGv(‘rc_teamHours’),hr=rcGv(‘rc_hourlyRate’);
var leads=rcGv(‘rc_leads’),conv=rcGv(‘rc_conv’)/100,deal=rcGv(‘rc_deal’),ts=rcGv(‘rc_timeSaved’);
var per=parseInt(document.getElementById(‘rc_period’).value);
var ramp=parseInt(document.getElementById(‘rc_ramp’).value);

var mToolCost=tc;
var mTeamCost=th*hr;
var totTool=mToolCost*per;
var totTeam=mTeamCost*per;
var totCost=totTool+sc+totTeam;

var active=Math.max(per-ramp,0);
var mRev=leads*conv*deal;
var mTimeSave=ts*hr;
var mGain=mRev+mTimeSave;
var totRev=mRev*active;
var totTime=mTimeSave*active;
var totGain=totRev+totTime;

var netGain=totGain-totCost;
var roi=totCost>0?((netGain/totCost)*100):0;

var mCost=mToolCost+mTeamCost;
var mNet=mGain-mCost;
var payback=999;
if(mNet>0){payback=Math.ceil((sc+(mCost*ramp))/mNet)+ramp;if(paybackper?’N/A’:payback+’mo’;
document.getElementById(‘rc_net’).textContent=netGain>=0?rcFmt(netGain):’-‘+rcFmt(Math.abs(netGain));
document.getElementById(‘rc_netper’).textContent=’over ‘+per+’ months’;

var vd=document.getElementById(‘rc_verd’),vi=document.getElementById(‘rc_vi’),vt=document.getElementById(‘rc_vt’),vs=document.getElementById(‘rc_vs’);
if(roi>=200){vd.className=’rc-verdict good’;vi.textContent=’u2714′;vt.textContent=’Strong Investment’;vs.textContent=’This tool delivers exceptional returns. Buy with confidence.’;}
else if(roi>=50){vd.className=’rc-verdict ok’;vi.textContent=’u26A0′;vt.textContent=’Moderate Return’;vs.textContent=’Positive ROI but negotiate pricing or explore alternatives.’;}
else{vd.className=’rc-verdict bad’;vi.textContent=’u274C’;vt.textContent=’Weak ROI’;vs.textContent=’May not justify cost. Look for cheaper alternatives.’;}

document.getElementById(‘rc_t1’).textContent=rcFmt(totTool);
document.getElementById(‘rc_t2’).textContent=rcFmt(sc);
document.getElementById(‘rc_t3’).textContent=rcFmt(totTeam);
document.getElementById(‘rc_t4’).textContent=’+’+rcFmt(totRev);
document.getElementById(‘rc_t5’).textContent=’+’+rcFmt(totTime);
document.getElementById(‘rc_t6’).textContent=rcFmt(totCost);
document.getElementById(‘rc_t7’).textContent=’+’+rcFmt(totGain);

var mx=Math.max(totCost,totGain,1);
var bc=document.getElementById(‘rc_barcost’),bg=document.getElementById(‘rc_bargain’);
bc.style.width=Math.max((totCost/mx)*100,5)+’%’;bc.textContent=rcFmt(totCost);
bg.style.width=Math.max((totGain/mx)*100,5)+’%’;bg.textContent=rcFmt(totGain);

document.getElementById(‘rc_mc’).textContent=rcFmt(mCost);
document.getElementById(‘rc_mg’).textContent=rcFmt(mGain);
document.getElementById(‘rc_mn’).textContent=(mNet>=0?’+’:’-‘)+rcFmt(Math.abs(mNet));

document.getElementById(‘rc_res’).scrollIntoView({behavior:’smooth’,block:’start’});
}

function rcReset(){
var inp=document.querySelectorAll(‘.roi-calc input[type=”number”]’);
for(var i=0;i<inp.length;i++)inp[i].value='';
document.getElementById('rc_res').className='rc-results';
document.querySelector('.roi-calc').scrollIntoView({behavior:'smooth',block:'start'});
}

function rcCopy(){
var t='MarTech ROI Analysisn====================n';
t+='ROI: '+document.getElementById('rc_roi').textContent+'n';
t+='Payback: '+document.getElementById('rc_pay').textContent+'n';
t+='Net Gain: '+document.getElementById('rc_net').textContent+' ('+document.getElementById('rc_netper').textContent+')n';
t+='Monthly: Cost '+document.getElementById('rc_mc').textContent+' | Gain '+document.getElementById('rc_mg').textContent+' | Net '+document.getElementById('rc_mn').textContent+'nn';
t+='martech.blog/tools/roi-calculator';
if(navigator.clipboard){navigator.clipboard.writeText(t);}
else{var ta=document.createElement('textarea');ta.value=t;ta.style.position='fixed';ta.style.left='-9999px';document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta);}
var m=document.getElementById('rc_copied');m.style.display='block';setTimeout(function(){m.style.display='none';},2500);
}