#ait-roi * { box-sizing: border-box; } #ait-roi .wrap { max-width: 1100px; margin: 0 auto; padding: 20px; background: #fff; border: 1px solid var(–ait-border); border-radius: 16px; } #ait-roi header { display:flex; align-items:center; gap:14px; margin-bottom:6px; } #ait-roi .brand { display:flex; align-items:center; gap:12px; } #ait-roi .brand .mark { width:40px; height:40px; border-radius:10px; background: var(–ait-navy); position:relative; } #ait-roi .brand .mark:after { content:”AI”; position:absolute; color:#fff; font-weight:700; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; letter-spacing:.5px; } #ait-roi h1 { margin: 0; color: var(–ait-navy); font-size: 24px; letter-spacing:.3px; } #ait-roi .tagline { color:#4b5b74; margin: 2px 0 14px; font-size:13px; } #ait-roi .grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; } #ait-roi .card { background: var(–ait-bg); border: 1px solid var(–ait-border); border-radius: 12px; padding: 14px; } #ait-roi h2 { margin: 0 0 10px; color: var(–ait-navy); font-size: 18px; } #ait-roi label { display:block; font-size: 13px; color:#223; margin-bottom:6px; } #ait-roi input[type=”text”], #ait-roi input[type=”number”], #ait-roi select { width: 100%; padding: 10px 12px; border: 1px solid var(–ait-border); border-radius: 8px; background: #fff; font-size: 14px; } #ait-roi input[type=”number”]::-webkit-outer-spin-button, #ait-roi input[type=”number”]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #ait-roi table { width: 100%; border-collapse: collapse; background:#fff; } #ait-roi th, #ait-roi td { padding: 10px; text-align: left; border-bottom: 1px dashed var(–ait-border); font-size: 14px; } #ait-roi th { color:#223; font-weight:600; } #ait-roi .btn { display:inline-block; border: none; background: var(–ait-navy); color:#fff; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; transition: transform .05s ease, box-shadow .2s ease; } #ait-roi .btn:hover { box-shadow: 0 6px 16px rgba(10,26,51,.18); } #ait-roi .btn:active { transform: translateY(1px); } #ait-roi .btn.secondary { background:#fff; color: var(–ait-navy); border:1px solid var(–ait-navy); } #ait-roi .btn.ghost { background: transparent; color: var(–ait-navy); border:1px dashed var(–ait-navy); } #ait-roi .actions { display:flex; gap:10px; flex-wrap: wrap; } #ait-roi .pill { display:inline-block; padding: 8px 12px; border-radius: 999px; background:#eef3fb; color:#1d3a6b; font-size: 12px; } #ait-roi .kpi { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; } #ait-roi .kpi .stat { background:#fff; border:1px solid var(–ait-border); border-radius:12px; padding:12px; text-align:center; } #ait-roi .kpi .label { color:#42526e; font-size:12px; margin-bottom:4px; } #ait-roi .kpi .value { font-size:18px; font-weight:700; color: var(–ait-navy); } #ait-roi .value.positive { color: var(–ait-accent); } #ait-roi .value.negative { color: #d33; } #ait-roi .footer-note { color:#48607a; font-size:12px; margin-top: 10px; } #ait-roi .disclaimer { font-size: 11px; color:#6b7b8e; margin-top: 8px; } #ait-roi .features { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } #ait-roi .features .chip { font-size:12px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(–ait-border); } #ait-roi .client-view .admin-only { display:none !important; } @media (max-width: 900px){ #ait-roi .grid{ grid-template-columns:1fr; } #ait-roi .kpi { grid-template-columns: repeat(2,1fr);} } @media print { #ait-roi .no-print { display:none !important; } #ait-roi .wrap { border:none; } }

Automotive Intelligence Technologies — ROI Calculator

One Vendor. One Solution. SaaS + BDC + IT. Calculate your consolidation savings in minutes.

Dealership Profile

Number of rooftops

Currency CAD USD

Monthly incremental revenue from efficiency (optional)

One-time setup / onboarding fee

BMW AG Official Supplier TD Merchant Solutions Partner EDR & SOC Cybersecurity ISPI / AOS / DMS Integrations

AIT Bundle (Editable)

Tier Bronze Silver Gold

AIT price / rooftop / month

Discount (%)

Internal notes

Apply Tier Defaults Bronze: 1999 | Silver: 3499 | Gold: 4999 (per rooftop / mo)

Current Vendor Stack (Per Rooftop)

Vendor / Purpose	Monthly Cost	Actions
		Remove
		Remove
		Remove
		Remove
		Remove
+ Add Vendor Reset to Example

Update these numbers with your dealership’s actual vendor costs. Values shown are examples.

Summary (Per Month)

Current Vendor Total

CAD 0

AIT Cost

CAD 0

Net Monthly Savings

CAD 0

Annual Savings

CAD 0

Savings = (Current total × rooftops) − (AIT total after discount × rooftops) + revenue uplift.

ROI & Payback

ROI (%)

—

Payback (months)

—

Monthly Lift Included

CAD 0

Discount Applied

0%

ROI = (Annual Savings ÷ Annual AIT Cost) × 100. Payback = Setup Fee ÷ Monthly Savings.

Recalculate Toggle Client View Print / Save as PDF Copy Summary

Client View hides internal notes and admin-only controls for sharing on calls or screens.

(function(){ const $ = (sel, ctx=document) => ctx.querySelector(sel); const $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel)); const fmt = (n, cur) => (cur || ‘CAD’) + ‘ ‘ + Number(n || 0).toLocaleString(undefined, {minimumFractionDigits:0, maximumFractionDigits:0}); const state = { tiers: { Bronze:1999, Silver:3499, Gold:4999 }, currency: ‘CAD’ }; const els = { rooftops: $(‘#rooftops’), currency: $(‘#currency’), revUplift: $(‘#revUplift’), setupFee: $(‘#setupFee’), tier: $(‘#tier’), aitPricePerRoof: $(‘#aitPricePerRoof’), discountPct: $(‘#discountPct’), notes: $(‘#notes’), applyTier: $(‘#applyTier’), addRow: $(‘#addRow’), resetRows: $(‘#resetRows’), vendorBody: $(‘#vendorBody’), currentTotal: $(‘#currentTotal’), aitCost: $(‘#aitCost’), netSavings: $(‘#netSavings’), annualSavings: $(‘#annualSavings’), roiPct: $(‘#roiPct’), payback: $(‘#payback’), revLiftShown: $(‘#revLiftShown’), discountShown: $(‘#discountShown’), recalc: $(‘#recalc’), clientViewToggle: $(‘#clientViewToggle’), printBtn: $(‘#printBtn’), copySummary: $(‘#copySummary’), app: $(‘#ait-roi-app’) }; function bindRowActions(scope){ $$(‘.removeRow’, scope || document).forEach(btn => { btn.onclick = (e)=> { const tr = e.target.closest(‘tr’); if (tr && $$(‘#vendorBody tr’).length > 1) tr.remove(); calc(); }; }); $$(‘#vendorBody input’).forEach(inp => { inp.oninput = debounce(calc, 150); }); } function addRow(name=”, cost=’0′){ const tr = document.createElement(‘tr’); tr.innerHTML = ` Remove`; els.vendorBody.appendChild(tr); bindRowActions(tr); } function resetRows(){ els.vendorBody.innerHTML = ”; addRow(‘Text Messaging Platform’, 600); addRow(‘Loaner / Fleet Management’, 750); addRow(‘Inventory Management’, 450); addRow(‘IT & Cybersecurity (EDR/SOC)’, 2200); addRow(‘BDC Services’, 3000); } function getVendorMonthlyPerRoof(){ let sum = 0; $$(‘#vendorBody tr’).forEach(tr => { const cost = parseFloat($(‘td:nth-child(2) input’, tr).value || ‘0’); sum += isNaN(cost) ? 0 : cost; }); return sum; } function calc(){ state.currency = els.currency.value || ‘CAD’; const rooftops = Math.max(1, parseInt(els.rooftops.value || ‘1’, 10)); const revUplift = Math.max(0, parseFloat(els.revUplift.value || ‘0’)); const setupFee = Math.max(0, parseFloat(els.setupFee.value || ‘0’)); const pricePerRoof = Math.max(0, parseFloat(els.aitPricePerRoof.value || ‘0’)); const discountPct = Math.min(100, Math.max(0, parseFloat(els.discountPct.value || ‘0’))); const currentPerRoof = getVendorMonthlyPerRoof(); const currentMonthly = currentPerRoof * rooftops; const aitPerRoofAfterDisc = pricePerRoof * (1 – discountPct/100); const aitMonthly = aitPerRoofAfterDisc * rooftops; const netMonthlySavings = (currentMonthly – aitMonthly) + revUplift; const annualSavings = netMonthlySavings * 12; const annualAitCost = aitMonthly * 12; const roiPct = annualAitCost > 0 ? (annualSavings / annualAitCost) * 100 : 0; const paybackMonths = netMonthlySavings > 0 ? (setupFee / netMonthlySavings) : Infinity; // Update UI els.currentTotal.textContent = fmt(currentMonthly, state.currency); els.aitCost.textContent = fmt(aitMonthly, state.currency); const savingsEl = els.netSavings; savingsEl.textContent = fmt(netMonthlySavings, state.currency); savingsEl.classList.toggle(‘positive’, netMonthlySavings >= 0); savingsEl.classList.toggle(‘negative’, netMonthlySavings alert(‘Summary copied to clipboard.’)).catch(()=>alert(‘Copy not available in this browser.’)); } function toggleClientView(){ $(‘#ait-roi-app’).classList.toggle(‘client-view’); } function debounce(fn, ms){ let t; return function(){ clearTimeout(t); t = setTimeout(fn, ms); }; } // Events [‘input’,’change’].forEach(ev=>{ [els.rooftops, els.currency, els.revUplift, els.setupFee, els.tier, els.aitPricePerRoof, els.discountPct].forEach(el=>{ el.addEventListener(ev, debounce(calc, 120)); }); }); $(‘#applyTier’)?.addEventListener(‘click’, applyTierDefaults); $(‘#addRow’).addEventListener(‘click’, ()=>addRow(”, 0)); $(‘#resetRows’).addEventListener(‘click’, resetRows); $(‘#recalc’).addEventListener(‘click’, calc); $(‘#clientViewToggle’).addEventListener(‘click’, toggleClientView); $(‘#printBtn’).addEventListener(‘click’, ()=>window.print()); $(‘#copySummary’)?.addEventListener(‘click’, copySummary); bindRowActions(); calc(); // init })();