/* ===== ROI Calculator Page ===== */
.roi-hero {
  padding: 9rem 0 3rem;
  background: linear-gradient(175deg, #0f172a 0%, #1e293b 100%);
  color: #f1f5f9;
}
.roi-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: -.03em; margin-bottom: .75rem;
}
.roi-tagline { font-size: 1.1rem; color: #94a3b8; max-width: 520px; margin: 0 auto; }

/* Layout */
.roi-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}

/* Inputs */
.roi-inputs {
  padding: 2rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
}
.roi-inputs h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 2rem; }
.roi-field { margin-bottom: 1.75rem; }
.roi-field label {
  display: block; font-size: .85rem; font-weight: 600; color: #334155; margin-bottom: .5rem;
}
.roi-field input[type="range"] {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  background: #e2e8f0; border-radius: 3px; outline: none;
}
.roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #0d9488; cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.roi-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #0d9488; cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.roi-range-labels {
  display: flex; justify-content: space-between; font-size: .75rem; color: #94a3b8; margin-top: .35rem;
}
.roi-range-labels output { font-weight: 700; color: #0d9488; font-size: .85rem; }
.roi-field input[type="number"] {
  width: 100%; padding: .75rem 1rem; font-family: inherit; font-size: 1rem;
  border: 1px solid #e2e8f0; border-radius: 8px;
}
.roi-field input[type="number"]:focus { outline: none; border-color: #0d9488; }
.roi-field select {
  width: 100%; padding: .75rem 1rem; font-family: inherit; font-size: .95rem;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer;
}
.roi-field select:focus { outline: none; border-color: #0d9488; }

/* Outputs */
.roi-output {
  padding: 2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px;
  position: sticky; top: 100px;
}
.roi-output h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 2rem; }
.roi-line {
  display: flex; justify-content: space-between; align-items: center; padding: .75rem 0;
  border-bottom: 1px solid #e2e8f0;
}
.roi-line-label { font-size: .9rem; font-weight: 500; color: #475569; }
.roi-line-value { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
.roi-line-sub { font-size: .75rem; color: #94a3b8; margin-bottom: .5rem; padding-top: .25rem; }

.roi-total {
  margin-top: 1.5rem; padding: 1.5rem; background: #0f172a; border-radius: 12px;
}
.roi-total-row {
  display: flex; justify-content: space-between; align-items: center;
}
.roi-total-row span:first-child { font-size: 1rem; font-weight: 600; color: #94a3b8; }
.roi-total-num { font-size: 2rem; font-weight: 800; color: #2dd4bf; }
.roi-multiple { font-size: .85rem; color: #64748b; margin-top: .75rem; text-align: right; }
.roi-multiple-num { font-weight: 800; font-size: 1.15rem; color: #2dd4bf; }

.roi-disclaimer {
  font-size: .75rem; color: #94a3b8; margin-top: 1.25rem; line-height: 1.6;
}

/* Mobile */
@media (max-width: 768px) {
  .roi-hero { padding: 7rem 0 2rem; }
  .roi-hero h1 { font-size: 1.8rem; }
  .roi-layout { grid-template-columns: 1fr; }
  .roi-output { position: static; }
}