/* Shared by /roi-calculator (page.css) and the homepage banner (banner/banner.css): the tokens, the number box, the
   slider and the rolling digits. build-roi.py puts this file in front of each, so the two can never drift apart. */
.roi-main,.roi-band,.roi-strip{--roi-ink:#1C1D1F;--roi-muted:#616B79;--roi-soft:#7A8494;--roi-line:#DDE3EB;--roi-paper:#F1F4FA;
  --roi-canvas:#F7F9FC;--roi-navy:#091324;--roi-teal:#0E7490;--roi-teal-lt:#5EEAD4;--roi-amber-lt:#FCD34D;--roi-down-lt:#F87171;
  --roi-ease:cubic-bezier(.22,1,.36,1);--roi-spring:cubic-bezier(.2,.9,.25,1.04)}
@supports (transition-timing-function:linear(0,1)){.roi-main,.roi-band,.roi-strip{--roi-spring:linear(0, 0.015, 0.054, 0.111, 0.179, 0.255, 0.333, 0.412, 0.489, 0.563, 0.631, 0.693, 0.75, 0.8, 0.844, 0.882, 0.914, 0.941, 0.964, 0.982, 0.996, 1.007, 1.015, 1.021, 1.025, 1.027, 1.028, 1.028, 1.027, 1.026, 1.024, 1.022, 1.02, 1.018, 1.015, 1.013, 1.011, 1.009, 1.008, 1.006, 1)}}
.roi-num{font-variant-numeric:tabular-nums}

/* a field: label and number box, the slider, the hint */
.roi-field{padding:14px 0 2px}
.roi-field+.roi-field{border-top:1px solid #EEF1F5}
.roi-field-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.roi-field-label{font-size:14.5px;line-height:1.35;font-weight:500;color:var(--roi-ink)}
.roi-field-hint{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--roi-muted)}

/* the number box */
.roi-box{display:flex;align-items:center;gap:6px;flex:none}
.roi-box-pre,.roi-box-unit{font-size:13px;font-weight:500;color:var(--roi-soft)}
.roi-box-unit{min-width:22px}
.roi-n{width:104px;height:38px;padding:0 11px;border:1px solid #D5DCE6;border-radius:9px;background:#fff;color:var(--roi-ink);
  font:500 15px/1 ImperumSans,system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:right;
  transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield;appearance:textfield}
.roi-n::-webkit-outer-spin-button,.roi-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi-n:hover{border-color:#B9C4D3}
.roi-n:focus{outline:none;border-color:var(--roi-teal);box-shadow:0 0 0 3px rgba(14,116,144,.14)}
.roi-field.is-live .roi-n{border-color:var(--roi-teal)}

/* the slider: a native range, the filled part ends at the thumb centre */
.roi-range{--track:#E3E8EF;--fill:var(--roi-teal);position:relative;display:block;width:100%;height:30px;margin:6px 0 0;
  background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.roi-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--fill) 0,var(--fill) calc(10px + var(--f) * (100% - 20px)),var(--track) calc(10px + var(--f) * (100% - 20px)))}
.roi-range::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}
.roi-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--fill)}
.roi-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;
  border:2px solid var(--fill);box-shadow:0 1px 3px rgba(9,19,36,.22);transition:transform .12s var(--roi-ease),box-shadow .12s}
.roi-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--fill);
  box-shadow:0 1px 3px rgba(9,19,36,.22);transition:transform .12s var(--roi-ease),box-shadow .12s}
.roi-range:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(14,116,144,.10),0 1px 3px rgba(9,19,36,.22)}
.roi-range:hover::-moz-range-thumb{box-shadow:0 0 0 5px rgba(14,116,144,.10),0 1px 3px rgba(9,19,36,.22)}
.roi-range:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 7px rgba(14,116,144,.14),0 1px 3px rgba(9,19,36,.22)}
.roi-range:active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 0 0 7px rgba(14,116,144,.14),0 1px 3px rgba(9,19,36,.22)}
.roi-range:focus{outline:none}
.roi-range:focus-visible{outline:3px solid #E00030;outline-offset:3px;border-radius:8px}
/* the first-view pulse on the first thumb (the export's roiPulse), drawn by a ring that sits under the thumb */
.roi-pulse{position:absolute;left:calc(10px + var(--f) * (100% - 20px));top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  border:2px solid var(--roi-teal);opacity:0;pointer-events:none}
.roi-slider{position:relative;--f:0}


/* rolling digits (the script builds these; the server text is the fallback). --roi-lh is the cell height: the line height
   of the text around it, so a roller inside a sentence sits on the same baseline as its words */
.roi-roll{position:relative;display:inline-flex;align-items:center;height:var(--roi-lh,1.1em);line-height:var(--roi-lh,1.1em);overflow:hidden;vertical-align:top;white-space:nowrap}
.roi-roll>span{display:inline-block;flex:none;height:var(--roi-lh,1.1em);overflow:hidden}
.roi-d{-webkit-mask-image:linear-gradient(transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 14%,#000 86%,transparent 100%)}
.roi-ds{display:flex;flex-direction:column;transform:translateY(calc(var(--n,0) * -1 * var(--roi-lh,1.1em)));transition:transform .52s var(--roi-spring);transition-delay:var(--dd,0ms)}
.roi-ds>i{display:block;height:var(--roi-lh,1.1em);font-style:normal}
/* a result that is a word ("Coverage") is set smaller than the numbers and centred in the cell. It needs its own line box:
   the cell's line-height is an absolute length the word would inherit, which drops its glyphs below a 1.1em box */
.roi-w{font-size:var(--roi-word,1em)}
.roi-roll>.roi-w{height:auto;line-height:1.15;overflow:visible}
.roi-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


@media (prefers-reduced-motion:reduce){
  .roi-ds{transition:none}
  .roi-range::-webkit-slider-thumb{transition:none}
  .roi-range:active::-webkit-slider-thumb{transform:none}
}

/* The SOC ROI banner on the homepage (T7, Oct 2026), between the customer logos and the dark final call to action.
   A: a dark results bar; its sliders grow upward inside it while the page scrolls with it, so the numbers stay put.
   B: a light sentence; its sliders open in a sheet that rises above it. shared.css comes first. Nothing starts hidden:
   the numbers in the markup are the model's defaults, and the button is a link to /roi-calculator until the script
   (loaded when the band comes near) takes it over. */
.roi-band.sec{padding:56px 0 64px}
.roi-band .roi-bn{position:relative}
.roi-band .roi-bn[hidden]{display:none}
.roi-band .btn{text-decoration:none}
.roi-band .roi-bn-go{gap:9px;padding:14px 22px;font-size:15px;white-space:nowrap}
.roi-band .roi-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.roi-bn-go .roi-flip{transition:transform .3s var(--roi-ease)}
.roi-bn.is-open .roi-bn-go .roi-flip{transform:rotate(180deg)}
.roi-bn-top{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-height:34px}
.roi-band .roi-bn-full{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.3;font-weight:550;text-decoration:none}
.roi-band .roi-bn-full:hover{text-decoration:underline;text-underline-offset:3px}
.roi-band .roi-bn-full .roi-icon{width:15px;height:15px}
.roi-bn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
.roi-bn-grid .roi-field{padding:10px 0 8px}
.roi-bn-grid .roi-field+.roi-field{border-top:0}
.roi-band .roi-n{width:92px;height:36px}

/* A: the dark results bar */
.roi-bn-a{overflow:hidden;isolation:isolate;border-radius:22px;background:var(--roi-navy);color:#fff;
  box-shadow:0 1px 2px rgba(9,19,36,.1),0 26px 50px -30px rgba(9,19,36,.6)}
.roi-bn-a::before{content:"";position:absolute;z-index:-1;right:-120px;bottom:-200px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,116,144,.48),transparent 68%);pointer-events:none}
/* the three metric cells align at the top so their labels share a line (the ROI cell is taller: it carries the payback sentence);
   the intro and the button centre on the row */
.roi-bn-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) minmax(0,1.25fr) minmax(0,.8fr) auto;align-items:start;gap:28px;
  padding:26px 28px 26px 32px}
.roi-bn-intro,.roi-bn-go{align-self:center}
.roi-band .roi-bn-h{margin:0;font-family:ImperumSans,system-ui,sans-serif;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:#fff}
.roi-bn-scn{margin:6px 0 0;font-size:13px;line-height:1.5;color:#9AA8BC}
.roi-band .roi-bn-scn a{color:#DCE4EE;text-decoration:underline;text-decoration-color:rgba(220,228,238,.45);text-underline-offset:3px}
.roi-bn-m{min-width:0}
.roi-bn-l{display:block;font-size:12.5px;line-height:1.3;font-weight:500;color:#9AA8BC}
.roi-bn-v{--roi-word:.66em;display:block;margin-top:6px;font-size:clamp(28px,2.6vw,36px);line-height:1.1;font-weight:500;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.roi-bn-v[data-tone="up"]{color:var(--roi-teal-lt)}
.roi-bn-v[data-tone="coverage"]{color:var(--roi-amber-lt)}
.roi-bn-v[data-tone="down"]{color:var(--roi-down-lt)}
.roi-bn-s{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:#9AA8BC}
.roi-bn-panel{overflow:hidden}
.roi-bn-panel-in{padding:18px 32px 8px;border-bottom:1px solid rgba(255,255,255,.09)}
.roi-bn-a .roi-bn-full{color:#E6ECF4}
.roi-bn-a .roi-field-label{color:#E6ECF4}
.roi-bn-a .roi-n{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.roi-bn-a .roi-n:hover{border-color:rgba(255,255,255,.32)}
.roi-bn-a .roi-n:focus,.roi-bn-a .roi-field.is-live .roi-n{border-color:var(--roi-teal-lt);box-shadow:0 0 0 3px rgba(94,234,212,.16)}
.roi-bn-a .roi-box-unit{color:#9AA8BC}
.roi-bn-a .roi-range{--track:rgba(255,255,255,.14);--fill:#2EC4B6}
.roi-bn-a .roi-range:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(94,234,212,.16),0 1px 3px rgba(0,0,0,.3)}
.roi-bn-a .roi-range:active::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(94,234,212,.2),0 1px 3px rgba(0,0,0,.3)}
.roi-bn-a .roi-range:focus-visible,.roi-bn-a a:focus-visible{outline-color:#fff}
/* A's button: white on the navy, the number boxes' corners. One rule for the no-script link and for the button the script swaps in */
.roi-bn-a .roi-bn-go{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:0;padding:0 20px;border:0;border-radius:10px;
  background:#fff;color:var(--roi-navy);font:600 14.5px/1 ImperumSans,system-ui,sans-serif;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:background-color .15s,box-shadow .15s}
.roi-bn-a .roi-bn-go:hover{background:#E8EEF6}
.roi-bn-a .roi-bn-go:active{background:#DCE4EE;box-shadow:none}
.roi-bn-a .roi-bn-go:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* B: the light sentence and its sheet */
.roi-bn-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px 48px;padding:30px 34px;border:1px solid var(--roi-line);
  border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(9,19,36,.03),0 18px 40px -30px rgba(9,19,36,.3)}
.roi-bn-line{--roi-lh:1.42em;margin:0;font-size:clamp(20px,1.9vw,26px);line-height:1.42;font-weight:400;letter-spacing:-.015em;color:#667080;text-wrap:pretty}
.roi-bn-line strong{font-weight:600;color:var(--roi-ink);font-variant-numeric:tabular-nums}
.roi-bn-line strong[data-tone="up"]{color:var(--roi-teal)}
.roi-bn-line strong[data-tone="down"]{color:#B4540A}
.roi-bn-in{font:inherit;font-weight:500;color:var(--roi-teal);font-variant-numeric:tabular-nums;letter-spacing:inherit;padding:0;margin:0;border:0;background:none;
  text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:.2em}
button.roi-bn-in{cursor:pointer;border-radius:4px}
button.roi-bn-in:hover{text-decoration-style:solid}
.roi-bn-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.roi-bn-note{margin:0;font-size:12.5px;line-height:1.4;color:var(--roi-soft)}
.roi-band .roi-bn-note a{color:var(--roi-ink);text-decoration:underline;text-underline-offset:3px}
.roi-bn-sheet{position:absolute;z-index:30;left:0;right:0;bottom:calc(100% + 12px);padding:14px 30px 10px;border:1px solid var(--roi-line);border-radius:20px;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform-origin:50% 100%;
  box-shadow:0 2px 6px rgba(9,19,36,.05),0 30px 64px -28px rgba(9,19,36,.4)}
.roi-bn-b .roi-bn-full{color:var(--roi-ink)}
.roi-bn-x{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--roi-line);border-radius:50%;background:#fff;color:var(--roi-ink);cursor:pointer}
.roi-bn-x:hover{border-color:#B9C4D3}
.roi-band .roi-bn-x .roi-icon{width:14px;height:14px}

/* the preview switcher (preview builds only) */
.roi-bn-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 0 24px;font-size:13px;line-height:1.4;color:var(--roi-soft)}
.roi-bn-pick button{min-height:34px;padding:0 15px;border:1px solid var(--roi-line);border-radius:999px;background:#fff;color:var(--roi-ink);
  font:500 13px/1 ImperumSans,system-ui,sans-serif;cursor:pointer}
.roi-bn-pick button[aria-pressed="true"]{background:var(--roi-navy);border-color:var(--roi-navy);color:#fff}

@media (max-width:1100px){
  .roi-bn-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
  .roi-bn-intro{grid-column:1 / -1}
  .roi-bn-go{grid-column:1 / -1;justify-self:start}
  .roi-bn-card{grid-template-columns:minmax(0,1fr)}
  .roi-bn-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px}
}
@media (max-width:700px){
  .roi-band.sec{padding:40px 0 48px}
  .roi-bn-a{border-radius:18px}
  .roi-bn-row{padding:22px 20px;gap:18px 14px}
  .roi-bn-v{font-size:clamp(22px,7vw,30px)}
  .roi-bn-go{justify-self:start}   /* not full width: the homepage's back-to-top button floats at the right edge */
  .roi-bn-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roi-bn-m3{display:none}
  .roi-bn-panel-in{padding:14px 20px 6px}
  .roi-bn-grid{grid-template-columns:minmax(0,1fr)}
  .roi-bn-card{padding:22px 20px;border-radius:18px}
  .roi-bn-sheet{padding:12px 18px 8px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .roi-bn-go .roi-flip{transition:none}
}