* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}

.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #001a4d;
font-size: 2.5em;
margin-bottom: 20px;
text-align: center;
font-weight: 700;
}

.intro {
background: white;
padding: 30px;
border-radius: 8px;
margin-bottom: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
text-align: center;
color: #555;
line-height: 1.8;
}

.calculator-wrapper {
background: linear-gradient(135deg, #001a4d 0%, #0d2a5c 100%);
padding: 40px;
border-radius: 12px;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.calculator-title {
color: white;
font-size: 1.8em;
margin-bottom: 30px;
text-align: center;
}

.form-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 30px;
}

.form-section.full {
grid-template-columns: 1fr;
}

.form-group {
display: flex;
flex-direction: column;
}

label {
color: white;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95em;
}

input[type=”number”],
input[type=”text”],
select {
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 1em;
font-family: inherit;
transition: border-color 0.3s;
}

input[type=”number”]:focus,
input[type=”text”]:focus,
select:focus {
outline: none;
border-color: #dc143c;
box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.1);
}

input[type=”range”] {
width: 100%;
height: 6px;
border-radius: 3px;
background: #e0e0e0;
outline: none;
-webkit-appearance: none;
appearance: none;
}

input[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #dc143c;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

input[type=”range”]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #dc143c;
cursor: pointer;
border: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider-value {
color: #ffd700;
font-weight: 600;
margin-top: 6px;
font-size: 0.9em;
}

.radio-group {
display: flex;
flex-direction: column;
gap: 10px;
}

.radio-option {
display: flex;
align-items: center;
padding: 10px;
background: rgba(255,255,255,0.1);
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
}

.radio-option:hover {
background: rgba(255,255,255,0.2);
}

.radio-option input[type=”radio”] {
margin-right: 10px;
cursor: pointer;
width: 18px;
height: 18px;
}

.radio-option label {
margin: 0;
color: white;
cursor: pointer;
font-weight: 500;
}

.calculate-btn {
background: linear-gradient(135deg, #dc143c 0%, #b20a30 100%);
color: white;
padding: 16px 40px;
border: none;
border-radius: 6px;
font-size: 1.1em;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
width: 100%;
margin-bottom: 20px;
}

.calculate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(220, 20, 60, 0.3);
}

.results-section {
display: none;
background: white;
padding: 40px;
border-radius: 12px;
margin-top: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.results-section.active {
display: block;
animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 30px;
}

.result-card {
background: linear-gradient(135deg, #f5f5f5 0%, #fffaf0 100%);
padding: 25px;
border-radius: 8px;
border-left: 4px solid #dc143c;
}

.result-label {
color: #666;
font-size: 0.9em;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.result-value {
color: #001a4d;
font-size: 2.2em;
font-weight: 700;
}

.result-unit {
color: #999;
font-size: 0.5em;
margin-left: 5px;
}

.roi-badge {
background: linear-gradient(135deg, #dc143c 0%, #b20a30 100%);
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
grid-column: 1 / -1;
margin-top: 10px;
}

.roi-ratio {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 8px;
}

.roi-text {
font-size: 1em;
opacity: 0.95;
}

.cta-section {
background: linear-gradient(135deg, #001a4d 0%, #0d2a5c 100%);
color: white;
padding: 30px;
border-radius: 8px;
text-align: center;
margin-top: 30px;
}

.cta-btn {
background: #dc143c;
color: white;
padding: 14px 35px;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: 700;
cursor: pointer;
margin-top: 15px;
transition: all 0.3s;
}

.cta-btn:hover {
background: #b20a30;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(220, 20, 60, 0.3);
}

.urgency-message {
font-size: 0.85em;
margin-top: 10px;
opacity: 0.9;
}

.explainer {
background: white;
padding: 40px;
border-radius: 8px;
margin-bottom: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.explainer h2 {
color: #001a4d;
font-size: 1.8em;
margin-bottom: 20px;
}

.explainer p {
color: #666;
line-height: 1.8;
margin-bottom: 15px;
}

.examples-section {
background: white;
padding: 40px;
border-radius: 8px;
margin-bottom: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.examples-section h2 {
color: #001a4d;
font-size: 1.8em;
margin-bottom: 30px;
}

.examples-table {
width: 100%;
border-collapse: collapse;
}

.examples-table th {
background: #001a4d;
color: white;
padding: 15px;
text-align: left;
font-weight: 600;
}

.examples-table td {
padding: 15px;
border-bottom: 1px solid #e0e0e0;
color: #555;
}

.examples-table tr:hover {
background: #f8f9fa;
}

.examples-table .amount {
color: #dc143c;
font-weight: 600;
}

.faq-section {
background: white;
padding: 40px;
border-radius: 8px;
margin-bottom: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.faq-section h2 {
color: #001a4d;
font-size: 1.8em;
margin-bottom: 30px;
}

.faq-item {
margin-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 20px;
}

.faq-item:last-child {
border-bottom: none;
}

.faq-question {
color: #001a4d;
font-weight: 600;
font-size: 1.1em;
margin-bottom: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.faq-question::after {
content: ‘+’;
font-size: 1.5em;
color: #dc143c;
}

.faq-answer {
color: #666;
line-height: 1.8;
display: none;
}

.faq-item.open .faq-answer {
display: block;
}

.faq-item.open .faq-question::after {
content: ‘−’;
}

@media (max-width: 768px) {
h1 {
font-size: 1.8em;
}

.form-section {
grid-template-columns: 1fr;
}

.results-grid {
grid-template-columns: 1fr;
}

.calculator-wrapper {
padding: 20px;
}
}

{
“@context”: “https://schema.org/”,
“@type”: “WebApplication”,
“name”: “TC ROI Calculator”,
“description”: “Calculate your exact savings from AI transaction coordination. Enter your deal volume & see time saved, errors avoided & revenue gained. Instant personalized ROI.”,
“url”: “https://rebillion.ai/tools-roi-calculator/”,
“applicationCategory”: “BusinessApplication”,
“offers”: {
“@type”: “Offer”,
“price”: “99”,
“priceCurrency”: “USD”,
“availability”: “https://schema.org/InStock”
}
}

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “How accurate is this ROI calculator?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Our calculator is based on real-world data from hundreds of real estate professionals using AI-powered transaction coordination. The 70% efficiency rate for admin task automation is conservative – many users report even higher productivity gains.”
}
},
{
“@type”: “Question”,
“name”: “What if I don’t use a transaction coordinator currently?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “If you’re handling transaction coordination yourself, the savings are even more dramatic. You’re not just replacing a TC cost – you’re reclaiming the most valuable resource you have: your time.”
}
},
{
“@type”: “Question”,
“name”: “Does ReBillion replace my transaction coordinator?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “ReBillion complements and enhances TC capabilities rather than completely replacing them. Many customers use ReBillion to supercharge their existing TCs.”
}
}
]
}

function handleCTA() {
alert(‘Free trial would redirect to signup page.’);
}

document.getElementById(‘deals’).addEventListener(‘input’, function() {
document.getElementById(‘dealsValue’).textContent = this.value;
document.getElementById(‘dealsDisplay’).textContent = this.value + ‘ deals/month’;
});

document.getElementById(‘hoursPerDeal’).addEventListener(‘input’, function() {
document.getElementById(‘hoursValue’).textContent = this.value;
document.getElementById(‘hoursDisplay’).textContent = this.value + ‘ hours/deal’;
});

function calculateROI() {
const persona = document.querySelector(‘input[name=”persona”]:checked’).value;
const monthlyDeals = parseInt(document.getElementById(‘deals’).value);
const commission = parseInt(document.getElementById(‘commission’).value);
const hoursPerDeal = parseInt(document.getElementById(‘hoursPerDeal’).value);
const hourlyRate = parseInt(document.getElementById(‘hourlyRate’).value);
const tcCost = parseInt(document.getElementById(‘tcCost’).value);

const rebillionCosts = {
agent: 99,
team: 199,
brokerage: 299,
tc: 99
};

const rebillionCost = rebillionCosts[persona];
const hoursSaved = hoursPerDeal * 0.70;
const monthlyHoursReclaimed = hoursSaved * monthlyDeals;
const valueOfTimeReclaimed = monthlyHoursReclaimed * hourlyRate;

const additionalDeals = Math.floor(monthlyHoursReclaimed / 15);
const additionalRevenue = additionalDeals * commission;

const tcCostReduction = tcCost * monthlyDeals;

const totalValue = valueOfTimeReclaimed + additionalRevenue + tcCostReduction;
const netROI = totalValue – rebillionCost;
const annualROI = netROI * 12;
const roiRatio = rebillionCost > 0 ? Math.round(netROI / rebillionCost) : 0;

document.getElementById(‘monthlySavings’).textContent = Math.max(0, Math.round(netROI)).toLocaleString();
document.getElementById(‘hoursReclaimed’).textContent = Math.round(monthlyHoursReclaimed);
document.getElementById(‘additionalDeals’).textContent = additionalDeals;
document.getElementById(‘annualROI’).textContent = Math.max(0, Math.round(annualROI)).toLocaleString();
document.getElementById(‘roiRatio’).textContent = Math.max(0, roiRatio);

document.getElementById(‘resultsSection’).classList.add(‘active’);

setTimeout(() => {
document.getElementById(‘resultsSection’).scrollIntoView({ behavior: ‘smooth’ });
}, 100);
}

document.querySelectorAll(‘.faq-question’).forEach(question => {
question.addEventListener(‘click’, function() {
const item = this.parentElement;
item.classList.toggle(‘open’);
});
});