/* Standalone widget for /us/products/on-site-plus/ — isolated from css/roi-calculator.css, all rules scoped under .mroi-widget */
/* Palette/card styling intentionally mirrors css/roi-calculator.css (--g/--gd/--w/--g200 etc) for visual parity with the full calculator. */
.mroi-widget{
  --mroi-g:#00644E;
  --mroi-gd:#003227;
  --mroi-gm:#338471;
  --mroi-w:#fff;
  --mroi-g200:#E5E7EB;
  --mroi-g400:#9CA3AF;
  --mroi-g600:#4B5563;
  --mroi-g800:#1F2937;
  --mroi-r:12px;
  --mroi-rs:8px;
  --mroi-sh:0 4px 20px rgba(0,0,0,.10);
  font-family:'Inter',Arial,sans-serif;
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
  text-align:center;
}

.mroi-box{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  box-sizing:border-box;
  text-align:left;
}

.mroi-card{
  background:var(--mroi-w);
  border:1px solid var(--mroi-g200);
  border-radius:var(--mroi-r);
  box-shadow:var(--mroi-sh);
  padding:24px;
  box-sizing:border-box;
}

.mroi-card-highlight{
  background:linear-gradient(135deg,var(--mroi-gd),var(--mroi-g));
  border:none;
}

.mroi-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--mroi-g400);
  margin-bottom:10px;
}

.mroi-label-highlight{
  color:rgba(255,255,255,.68);
}

.mroi-value{
  font-family:'Poppins',sans-serif;
  font-size:30px;
  font-weight:700;
  color:var(--mroi-g800);
  margin-bottom:16px;
  line-height:1.1;
}

.mroi-value .mroi-unit{
  font-size:16px;
  font-weight:500;
  color:var(--mroi-g400);
}

.mroi-value-highlight{
  color:var(--mroi-w);
  margin-bottom:6px;
}

.mroi-sub{
  font-size:13px;
  color:rgba(255,255,255,.6);
}

.mroi-range{
  width:100%;
  height:5px;
  -webkit-appearance:none;
  appearance:none;
  background:var(--mroi-g200);
  border-radius:4px;
  outline:none;
  cursor:pointer;
  margin:0;
}

.mroi-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--mroi-g);
  cursor:pointer;
  border:none;
}

.mroi-range::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--mroi-g);
  cursor:pointer;
  border:none;
}

.mroi-cta{
  display:inline-block;
  margin-top:22px;
  background:var(--mroi-g);
  color:var(--mroi-w);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  padding:13px 28px;
  border-radius:var(--mroi-rs);
  transition:all .2s;
}

.mroi-cta:hover{
  background:var(--mroi-gd);
  color:var(--mroi-w);
}

@media(max-width:768px){
  .mroi-box{grid-template-columns:1fr}
}