/* ========================================================= ROI Calculator Section ========================================================= */
.roi-section{background-color:var(--color-ink-50);}
.roi-section .roi-section-wrapper{gap:var(--space-xs);padding-block:var(--section-padding);}
/* .roi-section .roi-section-wrapper .roi-section-intro p{font-size:var(--font-size-body-md);line-height:var(--line-height-auto);color:var(--color-slate-500);font-weight:var(--font-weight-regular);}
*/
.roi-section .roi-section-wrapper .roi-section-form{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:stretch !important;justify-content:flex-start !important;gap:24px !important;padding-top:var(--space-sm);width:100%;}
/* ---------- Inputs card ---------- */
.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs{flex:1 1 calc(50% - 12px) !important;width:100% !important;max-width:calc(50% - 12px) !important;min-width:0 !important;gap:22px;padding:26px 28px;background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-border);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs h3{font-family:var(--font-mono);font-size:var(--font-size-caption);font-weight:var(--font-weight-medium);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-eyebrow);color:var(--color-slate-500);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs .roi-section-field{gap:9px;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs .roi-section-field .roi-section-field-head label{font-size:var(--font-size-link);line-height:var(--line-height-auto);color:var(--color-slate-700);font-weight:var(--font-weight-regular);margin:0;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs .roi-section-field .roi-section-field-head output{font-family:var(--font-display);font-size:var(--font-size-figure-xs);font-weight:var(--font-weight-bold);line-height:var(--line-height-auto);color:var(--color-ink-900);}
/* ---------- Custom Slider Styling ---------- */
/* input[type="range"].slider{-webkit-appearance:none;appearance:none;width:100%;background:transparent;margin:8px 0;padding:0 !important;border:none !important;box-shadow:none !important;}
input[type="range"].slider:focus{outline:none;}
input[type="range"].slider::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;background:linear-gradient(to right,var(--color-signal-500) calc(var(--slider-pos,0) * 100%),var(--color-border) calc(var(--slider-pos,0) * 100%));border-radius:3px;}
input[type="range"].slider::-webkit-slider-thumb{height:16px;width:16px;border-radius:50%;background:var(--color-signal-500);cursor:pointer;-webkit-appearance:none;margin-top:-5px;border:none;box-shadow:0 0 0 2px var(--color-white);}
input[type="range"].slider::-moz-range-track{width:100%;height:6px;cursor:pointer;background:linear-gradient(to right,var(--color-signal-500) calc(var(--slider-pos,0) * 100%),var(--color-border) calc(var(--slider-pos,0) * 100%));border-radius:3px;}
input[type="range"].slider::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:var(--color-signal-500);cursor:pointer;border:none;box-shadow:0 0 0 2px var(--color-white);}
*/
/* ---------- Outputs card ---------- */
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs{flex:1 1 calc(50% - 12px) !important;width:100% !important;max-width:calc(50% - 12px) !important;min-width:0 !important;gap:var(--space-sm);padding:26px 28px;background-color:var(--color-ink-25);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-border);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-result{gap:5px;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-result .roi-section-result-label p{font-size:var(--font-size-meta);font-weight:var(--font-weight-semibold);line-height:var(--line-height-auto);color:var(--color-slate-700);}
/* the figures are set solid and cannot shrink,so when one no longer clears its label the formula text drops to the next line instead of overflowing */
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-result .roi-section-result-line{flex-wrap:nowrap;align-items:baseline;gap:16px;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-result .roi-section-result-line .roi-section-result-formula p{font-family:var(--font-mono);font-size:var(--font-size-eyebrow);line-height:var(--line-height-auto);color:var(--color-slate-500);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-result .roi-section-result-line output{font-family:var(--font-display);font-size:var(--font-size-figure-sm);font-weight:var(--font-weight-bold);line-height:var(--line-height-auto);color:var(--color-heading);white-space:nowrap;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-divider{height:1px;background-color:var(--color-border);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-total{flex-wrap:wrap;row-gap:4px;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-total .roi-section-total-label p{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-bold);line-height:var(--line-height-auto);color:var(--color-ink-900);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-total output{font-family:var(--font-display);font-size:var(--font-size-figure);font-weight:var(--font-weight-bold);line-height:var(--line-height-auto);color:var(--color-teal-700);white-space:nowrap;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-disclaimer p{font-size:var(--font-size-caption);line-height:var(--line-height-fine);color:var(--color-slate-500);}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-actions{gap:12px;align-items:center;flex-wrap:wrap;}
/* ---------- Large Desktop / Laptop ---------- */
@media (max-width:1199px){.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs,.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs{padding:24px;}
}
/* ---------- Tablet ---------- */
@media (max-width:991px){/* the 54px total and its label no longer clear each other in half the container,so the two cards take the full width one after the other */
 .roi-section .roi-section-wrapper .roi-section-form{flex-direction:column !important;align-items:stretch !important;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs,.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs{flex:0 0 auto !important;max-width:100% !important;}
}
/* ---------- Mobile ---------- */
@media (max-width:767px){.roi-section .roi-section-wrapper .roi-section-form .roi-section-inputs,.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs{padding:22px 20px;}
.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-actions .roi-reset-btn{justify-content:center;width:100%;}
}
/* ---------- Small Mobile ---------- */
@media (max-width:575px){.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-actions .button,.roi-section .roi-section-wrapper .roi-section-form .roi-section-outputs .roi-section-actions .roi-reset-btn{width:100%;text-align:center;}
}